/* Purchase controls shared by the color gallery and the sound edition. */
.signature-offer {
  scroll-margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .8fr);
  align-items: center;
  gap: clamp(26px, 5vw, 85px);
  padding: clamp(16px, 2.6vw, 44px);
  margin-block: clamp(24px, 4.4vw, 70px);
  border: 1px solid #e0dcca33;
  border-radius: 26px;
  background: radial-gradient(75% 125% at 18% 100%, #62533b43, transparent 74%), #181b17;
}
.signature-art {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.6vw, 26px);
  border: 1px solid #d9c9a328;
  border-radius: 15px;
  background: radial-gradient(ellipse at 78% 15%, #52605c70, transparent 64%),
    radial-gradient(ellipse at 23% 90%, #71604994, transparent 70%), #262923;
}
.signature-art picture {display: block; width: 100%}
.signature-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 26px #090d093f;
}
.signature-sale {min-width: 0; max-width: 425px}
.signature-sale h2 {
  font: 460 clamp(33px, 4.2vw, 70px)/1.02 Geist, sans-serif;
  letter-spacing: -.075em;
}
.signature-sale h2 em {color: #ebd1a4; font: italic 400 1.03em/.98 Baskerville, Georgia, serif}
.signature-sale > p:not(.shop-tax) {margin: 12px 0 20px; color: #d2d5c9; max-width: 38ch; line-height: 1.52}
.shop-actions {display: grid; gap: 10px}
.shop-jump {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 2px;
  font-size: 14px;
  color: #e8d5b4;
  text-decoration: underline;
  text-decoration-color: #d9b98b70;
  text-underline-offset: 4px;
}
.shop-button {
  --top: #ffe9b7;
  --middle: #cfae75;
  --edge: #eed5a7;
  --text: #292216;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  position: relative;
  isolation: isolate;
  min-height: 60px;
  padding: 10px clamp(15px, 2vw, 26px);
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: 32px;
  color: var(--text);
  text-decoration: none;
  font-family: Geist, Arial, sans-serif;
  background: radial-gradient(ellipse 86% 128% at var(--light, 32%) -42%, #fffbedec, transparent 79%),
    linear-gradient(155deg, var(--top), var(--middle) 63%, var(--edge));
  box-shadow: inset 0 1px 2px #fffff8b3, inset 0 -2px 5px #2018223b, 0 4px 15px #03060347;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: transform .24s ease, filter .24s ease;
}
.shop-sound {--top: #e5f6cd; --middle: #b2d5b4; --edge: #d2e7c0; --text: #1c3022}
.shop-bundle {
  --top: #715b82; --middle: #40354d; --edge: #ab91bd; --text: #fff1ff;
  background: radial-gradient(ellipse 80% 130% at var(--light, 32%) -45%, #eacbfb91, transparent 78%),
    linear-gradient(153deg, var(--top), var(--middle) 62%, #65536e);
}
.shop-label {display: grid; gap: 3px; text-align: left}
.shop-label strong {font: 610 16px/1.1 Geist, Arial, sans-serif; letter-spacing: -.035em}
.shop-label small {font: 460 12px/1.28 Geist, Arial, sans-serif}
.shop-price {font-weight: 590; white-space: nowrap; font-variant-numeric: tabular-nums}
.shop-price span {font-weight: 450; margin-left: .2em}
.shop-button:focus-visible, .shop-jump:focus-visible {outline: 2px solid #f8f4ea; outline-offset: 3px}
.shop-tax {margin: 11px 2px 0; font: 450 12px/1.4 Geist, sans-serif; color: #bac2b6}
.boutique-purchase .shop-tax {margin: 0}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shop-button:hover {transform: translateY(-2px) scale(1.012); filter: brightness(1.055)}
  .shop-button:active {transform: translateY(0) scale(.985)}
}
@media (max-width: 760px) {
  .signature-offer {grid-template-columns: 1fr; gap: 23px; max-width: 600px; margin-inline: auto}
  .signature-sale {width: 100%; max-width: none}
  .signature-sale h2 {font-size: clamp(37px, 7vw, 54px)}
}
@media (max-width: 850px) {
  .look-index .shop-jump {margin-top: 5px; padding-bottom: 0}
}
@media (max-width: 380px) {
  .shop-button {padding-inline: 13px; gap: 8px}
  .shop-price {font-size: 14px}
}
@media (prefers-reduced-motion: reduce) {.shop-button {transition: none}}