/* Shared media and purchase layout for the product page and quick view. */
.product-dialog,
.product-main {
  --product-ink: #100c19;
  --product-panel: #1c142a;
  --product-line: #5b4671;
  --product-muted: #c8bdd6;
  --product-accent: #e3cdff;
  --product-mint: #8af0dc;
  --product-gap: clamp(12px, 2vw, 28px);
  --product-reveal-ease: cubic-bezier(.18, .78, .22, 1);
  color: #fbf8ff;
}

.product-dialog {
  inline-size: min(880px, calc(100% - 32px));
  max-inline-size: 100%;
  max-block-size: calc(100vh - 40px);
  max-block-size: calc(100dvh - 40px);
  border: 1px solid var(--product-line);
  border-radius: 24px;
  background: var(--product-ink);
  box-shadow: 0 28px 84px #05030bd9, 0 0 0 1px #bd8cfd14;
  overflow: hidden auto;
  overscroll-behavior: contain;
}

.product-dialog[open] {
  display: grid;
  grid-template: "quick-view" auto / minmax(0, 1fr);
}

.product-dialog > #product-dialog-content,
.product-dialog > .dialog-close {
  grid-area: quick-view;
}

.product-dialog > #product-dialog-content {
  min-inline-size: 0;
}

.product-dialog > .dialog-close {
  position: sticky;
  inset: 14px auto auto;
  align-self: start;
  justify-self: end;
  margin: 14px 14px 0 0;
  z-index: 2;
  inline-size: 44px;
  block-size: 44px;
  color: #fbf8ff;
  background: #231833;
  border: 1px solid #6d568b;
  box-shadow: 0 4px 14px #0a061760;
}

.product-dialog > .dialog-close:hover {
  background: #392550;
}

.product-dialog::backdrop {
  background: #090611d9;
  backdrop-filter: blur(8px);
}

.quick-view-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: stretch;
  min-block-size: 0;
}

.quick-view-image,
.product-gallery {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-inline-size: 0;
  min-block-size: 0;
  max-block-size: none;
  aspect-ratio: auto;
  padding: clamp(11px, 1.45vw, 20px);
  background:
    linear-gradient(155deg, #d5b0ff1c, transparent 32%),
    linear-gradient(135deg, transparent 64%, #9d65e859 64.2%, #5a378149 78%, #7b4bad80 78.3%, transparent 78.6%),
    linear-gradient(155deg, #241736 10%, #3b2556 54%, #191124 87%);
}

.quick-view-image {
  position: relative;
  border-inline-end: 1px solid #ad81dc45;
}

/* Keep ambient light behind the media stage so it never tints product photos. */
.quick-view-image::before,
.product-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 4% 100%, #61ebd238, transparent 39%),
    radial-gradient(ellipse at 87% 6%, #bb7aff52, transparent 53%),
    repeating-linear-gradient(135deg, transparent 0 46px, #dfcaff0b 46px 47px);
  opacity: .72;
}

.product-gallery {
  border: 1px solid var(--product-line);
  border-radius: 24px;
  margin: 0;
  box-shadow: 0 18px 48px #08041168, inset 0 1px #dec5ff25;
}

.quick-view-image .product-gallery-main,
.product-gallery .product-gallery-main {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: clamp(155px, 40vh, 345px);
  block-size: clamp(155px, 40dvh, 345px);
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 0 0 1px #eedaff22, 0 10px 28px #0c061a48;
}

.product-gallery .product-gallery-main {
  block-size: auto;
  aspect-ratio: 1.22;
  max-block-size: min(58vh, 480px);
  max-block-size: min(58dvh, 480px);
}

/* Position the photo inside its own stage so its intrinsic size cannot size the grid. */
.quick-view-image .product-gallery-main > img,
.product-gallery .product-gallery-main > img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  padding: clamp(8px, 1.4vw, 18px);
  object-fit: contain;
  filter: none;
  transform: none;
  scale: 1;
}

.quick-view-image .product-thumbnails,
.product-gallery .product-thumbnails {
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 10px 4px 5px;
  gap: 7px;
  scrollbar-color: #8566a5 #221630;
}

.product-thumbnails button {
  flex-basis: 46px;
  inline-size: 46px;
  block-size: 46px;
  border: 2px solid #e9d8fa;
  border-radius: 9px;
}

.product-thumbnails button[aria-pressed="true"] {
  border-color: #589b8c;
  box-shadow: 0 0 0 2px var(--product-mint);
}

.quick-view-image .product-thumbnails img {
  position: static;
  padding: 0;
}

.quick-view-info,
.product-detail-info {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.quick-view-info {
  display: block;
  padding: 49px clamp(18px, 2.6vw, 31px) 20px;
  background:
    radial-gradient(ellipse at 98% 0, #40275770, transparent 62%),
    linear-gradient(155deg, #d4a1ff0c, transparent 48%),
    #15101f;
}

.quick-view-info .eyebrow,
.product-detail-info .eyebrow {
  color: var(--product-mint);
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 6px;
}

.product-detail-info .eyebrow a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
}

.product-detail-info .eyebrow a svg {
  width: 13px;
  height: 13px;
}

.quick-view-info .eyebrow::before,
.product-detail-info .eyebrow::before {
  content: "";
  flex: 0 0 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--product-mint);
  box-shadow: 0 0 12px #8af0dc85;
}

.quick-view-info h2,
.product-detail-info h1 {
  margin: 0 0 10px;
  font-size: clamp(25px, 3.5vw, 35px);
  line-height: 1.12;
  letter-spacing: -.04em;
  text-wrap: pretty;
}

.product-detail-info h1 {
  font-size: clamp(29px, 3.35vw, 48px);
}

.product-benefit {
  color: var(--product-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 11px;
  max-inline-size: 51ch;
}

.quick-view-price,
.product-detail-price {
  color: var(--product-accent);
  font-size: 23px;
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
}

.quick-view-price del,
.product-detail-price del {
  color: var(--product-muted);
  margin: 0 5px 0 0;
  font-weight: 400;
}

.quick-view-info .product-options-summary,
.product-detail-info .product-options-summary {
  color: var(--product-muted);
}

.quick-view-info > .underlined-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 44px;
  margin-top: 2px;
  gap: 8px;
  color: var(--product-accent);
  font-size: 13px;
}

.product-main.wrap {
  padding-block: 8px clamp(16px, 2.6vw, 32px);
  padding-inline: max(clamp(13px, 3vw, 42px), calc((100% - 1320px) / 2));
  background:
    radial-gradient(ellipse at 88% 2%, #22192c, transparent 50%),
    #111015;
  color: #fbf8ff;
}

.product-main .product-gallery {
  border-color: #44364f;
  border-radius: 19px;
  inset-block-start: 90px;
  background: #19151f;
  box-shadow: none;
}

.product-main .product-gallery::before {
  background: radial-gradient(ellipse at 15% 0, #af86ec24, transparent 62%);
}

.product-main .breadcrumb {
  color: var(--product-muted);
  gap: 7px;
  padding: 0 0 8px;
}

.product-main .breadcrumb [aria-current] {
  color: var(--product-accent);
}

.product-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--product-gap);
  padding-block: 0;
}

.product-load-frame {
  --load-line: linear-gradient(90deg, #483754, #392d44);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--product-gap);
  min-block-size: clamp(230px, 49vh, 440px);
}

.product-load-frame::before,
.product-load-frame::after {
  content: "";
  border: 1px solid #44364f;
  border-radius: 23px;
}

.product-load-frame::before {
  background: radial-gradient(ellipse at 23% 5%, #39294c, transparent 68%), #19151f;
}

.product-load-frame::after {
  background:
    var(--load-line) 20px 24px / 22% 7px no-repeat,
    var(--load-line) 20px 44px / 71% 24px no-repeat,
    var(--load-line) 20px 86px / 57% 10px no-repeat,
    var(--load-line) 20px 107px / 33% 9px no-repeat,
    var(--load-line) 20px 143px / 56% 42px no-repeat,
    #19151f;
}

.product-dialog .product-load-frame {
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 12px;
  min-block-size: clamp(205px, 43vh, 366px);
  padding: 11px;
}

.product-gallery-main[data-photo-pending] {
  background: radial-gradient(ellipse at 22% 8%, #f6f1fd, #e9e2f1);
}

.product-gallery-main[data-photo-pending] > img {
  visibility: hidden;
}

.product-gallery-main[data-photo-unavailable] > img {
  display: none;
}

.product-photo-unavailable {
  color: #55466c;
  font-size: 13px;
}

.product-detail-info {
  padding: clamp(14px, 2vw, 26px);
  border: 1px solid #44364f;
  border-radius: 19px;
  background: radial-gradient(ellipse at 100% 0, #2a2038, transparent 55%), #19151f;
}

.product-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
}

.product-detail-info .purchase-facts {
  margin-block-end: 9px;
}

.product-detail-info .product-description {
  color: var(--product-muted);
  font-size: 15px;
  line-height: 1.72;
}

.product-detail-info .product-description a,
.product-help-links a {
  color: var(--product-accent);
}

.product-detail-info .product-description a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-detail-info .product-description img {
  max-inline-size: 100%;
  block-size: auto;
}

.product-detail-info .product-accordion,
.product-main .product-help {
  border-color: var(--product-line);
}

.product-detail-info .product-accordion {
  margin-block-start: 8px;
}

.product-detail-info .product-accordion summary {
  color: #fbf8ff;
  min-block-size: 44px;
  padding-block: 11px;
}

.product-detail-info .product-accordion summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 4px;
  border: solid var(--product-accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.product-detail-info .product-accordion[open] summary::after {
  transform: rotate(225deg);
}

.product-detail-info .product-accordion summary:hover,
.product-main .product-help-links a:hover {
  color: var(--product-mint);
}

.product-main .product-help .eyebrow {
  color: var(--product-mint);
}

.product-main .product-help p:not(.eyebrow) {
  color: var(--product-muted);
}

.product-main .product-help-links a {
  border-color: var(--product-line);
}

.quick-view-info .product-purchase,
.product-detail-info .product-purchase {
  display: block;
  min-inline-size: 0;
  margin-block: 8px 9px;
  padding-block: 11px;
  border-block: 1px solid var(--product-line);
}

.product-purchase .picker {
  inline-size: 100%;
  min-inline-size: 0;
}

.product-purchase .picker-group {
  margin-block-start: 12px;
}

.product-purchase .picker-group:first-child,
.product-purchase .picker-actions:first-child {
  margin-block-start: 0;
}

.product-purchase .picker-legend {
  color: #fbf8ff;
  font-size: 13px;
}

.product-purchase .picker-choice,
.product-purchase .picker-plan,
.product-purchase .picker-quantity,
.product-purchase .picker-textarea,
.product-purchase .picker-notify-input {
  color: #fbf8ff;
  background-color: var(--product-panel);
  border-color: #6d568b;
  border-radius: 9px;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.product-purchase .picker-choice {
  padding: 9px 13px;
}

.product-purchase .picker-choice:not(:disabled):hover,
.product-purchase .picker-choice--selected,
.product-purchase .picker-plan--selected {
  background-color: #382451;
  border-color: #d5afff;
}

.product-purchase .picker-choice--selected:not(.picker-choice--swatch),
.product-purchase .picker-plan--selected {
  box-shadow: 0 0 0 1px #d5afff42, inset 0 1px #f3e1ff18;
}

.product-purchase .picker-choice--swatch {
  border: 3px solid var(--product-ink);
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 0 0 1px #9a83b5;
}

.product-purchase .picker-choice--swatch.picker-choice--selected {
  box-shadow: 0 0 0 2px var(--product-mint);
}

.product-purchase .picker-plan {
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto);
}

.product-purchase .picker-actions {
  gap: 10px;
  margin-block-start: 12px;
}

.product-purchase .picker-quantity {
  min-block-size: 46px;
}

.product-purchase .picker-quantity-button,
.product-purchase .picker-quantity-value {
  min-block-size: 44px;
  color: #fbf8ff;
}

.product-purchase .picker-quantity-button:disabled {
  color: #9b8aa8;
}

.product-purchase .picker-quantity-value {
  inline-size: 28px;
}

.product-purchase .picker-add,
.product-purchase .picker-notify-button {
  min-block-size: 46px;
  padding: 11px 15px;
  border-radius: 9px;
  background: var(--product-mint);
  color: #100c19;
  font-weight: 750;
  transform: none;
}

.product-purchase .picker-add:not(:disabled),
.product-purchase .picker-notify-button:not(:disabled) {
  background-image: linear-gradient(105deg, #b8f9e899, transparent 69%);
  box-shadow: 0 4px 20px #8af0dc26, inset 0 1px #fff6;
}

.product-purchase .picker-add {
  flex: 1 1 142px;
  min-inline-size: min(142px, 100%);
}

.product-purchase .picker-add:not(:disabled):hover,
.product-purchase .picker-notify-button:not(:disabled):hover {
  background: #b0f9ed;
}

.product-purchase .picker-add:disabled,
.product-purchase .picker-notify-button:disabled {
  background: #362944;
  color: var(--product-muted);
}

.product-purchase .picker-notify-input::placeholder,
.product-purchase .picker-note,
.product-purchase .picker-reason,
.product-purchase .picker-counter,
.product-purchase .picker-plan-terms,
.product-purchase .picker-notify-label,
.product-purchase .picker-notify-result,
.product-purchase .picker-loading,
.product-purchase .picker-not-found {
  color: var(--product-muted);
}

.product-purchase .picker-error {
  color: #ffb5d4;
}

.product-dialog :focus-visible,
.product-main :focus-visible {
  outline: 2px solid var(--product-mint);
  outline-offset: 3px;
}

.product-dialog .catalog-status,
.product-main .catalog-status {
  padding-inline: clamp(22px, 4vw, 44px);
  color: var(--product-muted);
}

.product-dialog .catalog-status h2,
.product-main .catalog-status h1 {
  color: #fbf8ff;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.04em;
}

.product-dialog .catalog-status .button,
.product-main .catalog-status .button {
  background: var(--product-mint);
  color: var(--product-ink);
}

@media (max-width: 720px) {
  .product-dialog {
    inline-size: calc(100% - 24px);
    max-block-size: calc(100vh - 24px);
    max-block-size: calc(100dvh - 24px);
    border-radius: 18px;
  }

  .product-dialog > .dialog-close {
    inset-block-start: 10px;
    margin: 10px 10px 0 0;
  }

  .quick-view-layout,
  .product-detail-layout,
  .product-load-frame,
  .product-dialog .product-load-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .product-load-frame {
    grid-template-rows: clamp(165px, 36vh, 315px) 170px;
    gap: var(--product-gap);
  }

  .product-dialog .product-load-frame {
    grid-template-rows: clamp(135px, 27vh, 245px) 165px;
  }

  .quick-view-image {
    padding: 11px;
    border-inline-end: 0;
    border-block-end: 1px solid #ad81dc45;
  }

  .quick-view-image .product-gallery-main {
    block-size: clamp(135px, 27vh, 245px);
    block-size: clamp(135px, 27dvh, 245px);
  }

  .quick-view-info {
    padding: 15px 15px 17px;
  }

  .product-main .product-gallery {
    position: relative;
    inset-block-start: auto;
    padding: 10px;
    border-radius: 17px;
    margin-bottom: 0;
  }

  .product-detail-info {
    border-radius: 17px;
  }
}

@media (max-height: 620px) {
  .product-main .product-gallery {
    position: relative;
    inset-block-start: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .curated-card .product-picture {
    transition: translate .38s var(--ease), box-shadow .25s var(--ease), scale .18s var(--ease);
  }

  html:not(.motion-paused) .curated-card:has(:is(.product-photo-link, .product-title a, .product-price a, .curated-quick):active) .product-picture {
    scale: .977;
    box-shadow: 0 0 0 2px #8af0dc;
    transition-duration: 90ms;
  }

  html:not(.motion-paused) .daily-spotlight:has(:is(.daily-media, .daily-title a, .daily-link):active) .daily-media img {
    transform: scale(.977);
    transition-duration: 90ms;
  }

  html:not(.motion-paused) .product-dialog[open] {
    transform-origin: center 65%;
    animation: quick-view-enter 270ms var(--product-reveal-ease) both;
  }

  html:not(.motion-paused) .product-dialog[open]::backdrop {
    animation: product-backdrop-enter 240ms ease-out both;
  }

  html:not(.motion-paused) :is(.product-detail-info, .quick-view-info) {
    animation: product-info-reveal 240ms var(--product-reveal-ease) backwards;
  }

  /* The ready photo gets one pass. Only the light layer moves. */
  html:not(.motion-paused) .product-gallery-main:has(> img):not([data-photo-pending], [data-photo-unavailable])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(108deg, transparent 29%, #b582fa39 42%, #91f3d45c 48%, #edfff2a3 50%, #ccabff47 53%, transparent 65%);
    animation: product-content-sweep 340ms cubic-bezier(.25, .56, .42, 1) both;
  }

  html:not(.motion-paused) :is(.quick-view-image, .product-gallery) .product-gallery-main > img {
    transition: scale 280ms var(--ease);
  }

  html:not(.motion-paused) .product-thumbnails button,
  html:not(.motion-paused) .product-purchase :is(.picker-choice, .picker-plan, .picker-add, .picker-notify-button) {
    transition: transform 180ms var(--ease), box-shadow 220ms, background-color 220ms, border-color 220ms;
  }

  html:not(.motion-paused) .product-thumbnails button:active,
  html:not(.motion-paused) .product-purchase :is(.picker-choice, .picker-add, .picker-notify-button):not(:disabled):active {
    transform: scale(.97);
  }

  html:not(.motion-paused) .product-detail-info .product-accordion summary::after {
    transition: transform 220ms var(--ease);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html:not(.motion-paused) :is(.quick-view-image, .product-gallery) .product-gallery-main:hover > img {
    scale: 1.035;
  }

  html:not(.motion-paused) .product-thumbnails button:hover:not(:active) {
    transform: translateY(-2px);
  }

  html:not(.motion-paused) .product-purchase :is(.picker-add, .picker-notify-button):not(:disabled):hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px #8af0dc45, inset 0 1px #fff8;
  }
}

@keyframes quick-view-enter {
  from { opacity: .68; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes product-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes product-content-sweep {
  from { opacity: 0; transform: translate3d(-76%, 0, 0); }
  24% { opacity: .9; }
  to { opacity: 0; transform: translate3d(79%, 0, 0); }
}

@keyframes product-info-reveal {
  from { opacity: .86; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.product-review-jump {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  width: fit-content;
  min-height: 36px;
  color: var(--product-mint);
  font-size: .84rem;
  text-underline-offset: 3px;
}
.product-review-jump svg {
  width: .9em;
  height: .9em;
}
#product-reviews {
  scroll-margin-top: 8px;
}

/* The frame uses the same violet and mint light as the storefront artwork. */
.product-main,
.product-dialog {
  --product-line: #685081;
  --product-muted: #d0c4dd;
  --product-mint: #a2f4de;
  --product-gap: clamp(10px, 1.5vw, 22px);
  --product-reveal-ease: cubic-bezier(.16, 1, .3, 1);
}

body[data-page="product"] {
  background:
    radial-gradient(ellipse 80% 420px at 20% 2%, #31194f9e, transparent 85%),
    radial-gradient(ellipse 60% 530px at 100% 9%, #102e345d, transparent 90%),
    #110d19;
}

body[data-page="product"] :is(.product-main, .header-inner, .site-footer .wrap) {
  width: min(1360px, calc(100% - 2 * clamp(14px, 2.7vw, 44px)));
}

body[data-page="product"] .header-inner {
  height: 64px;
}

.product-main.wrap {
  margin-inline: auto;
  padding: 10px 0 clamp(16px, 2.6vw, 32px);
  background: transparent;
}

.product-main .breadcrumb {
  gap: 9px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.product-main .breadcrumb > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 34px;
}

.product-main .breadcrumb > a:hover {
  color: var(--product-mint);
}

.product-main .breadcrumb > a svg {
  inline-size: 15px;
  block-size: 15px;
}

.product-main .breadcrumb [aria-current] {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.product-main .product-gallery,
.quick-view-image {
  border-color: #b68be58c;
  padding: clamp(9px, 1.2vw, 17px);
  background:
    linear-gradient(140deg, #140c26 5%, #24103e91 47%, #130f26c7 82%),
    url('assets/vybe-prism.jpg') center / cover,
    #1a1129;
  box-shadow: inset 0 1px #e5d1ff6b, inset 0 -1px #a2f4de57, 0 14px 42px #09041291;
}

.product-main .product-gallery::before,
.quick-view-image::before {
  background:
    radial-gradient(ellipse at 1% 100%, #62f1d05c, transparent 48%),
    radial-gradient(ellipse at 99% 0%, #b481ff7a, transparent 52%),
    repeating-linear-gradient(135deg, transparent 0 17px, #dfcaff12 17px 18px);
  opacity: .8;
}

.product-gallery .product-gallery-main {
  aspect-ratio: 1.15;
  max-block-size: min(64dvh, 525px);
}

.quick-view-image .product-gallery-main,
.product-gallery .product-gallery-main {
  border-color: #f7eeff;
  box-shadow: 0 0 0 1px #eedaff44, 0 10px 32px #0804128c;
}

.quick-view-image .product-gallery-main > img,
.product-gallery .product-gallery-main > img {
  padding: clamp(4px, .85vw, 12px);
}

.product-thumbnails button {
  border: 1px solid #d8c5f1;
  border-radius: 8px;
  padding: 3px;
}

.product-thumbnails button[aria-pressed="true"] {
  border-color: var(--product-mint);
  box-shadow: 0 0 0 2px var(--product-mint), 0 0 14px #90f8da5e;
}

.quick-view-image .product-thumbnails img {
  filter: none;
}

.product-dialog {
  border-color: #b78be899;
  border-radius: 22px;
  box-shadow: 0 26px 85px #05030bde, 0 0 46px #a064ef35;
}

.product-dialog::backdrop {
  background: radial-gradient(ellipse at 50% 48%, #210d3a76, #090611dd 75%);
  backdrop-filter: blur(9px);
}

.product-dialog > .dialog-close {
  background: #20152eed;
  border-color: #ab88cf9c;
}

.product-dialog > .dialog-close:is(:hover, :focus-visible) {
  color: var(--product-mint);
  background: #382450;
}

.quick-view-info {
  background:
    radial-gradient(ellipse at 98% 0, #713ebc4d, transparent 68%),
    linear-gradient(145deg, #291a3c, #15101f 73%);
}

.product-detail-info {
  padding: clamp(14px, 2.1vw, 30px);
  border-color: var(--product-line);
  background:
    radial-gradient(ellipse 82% 345px at 100% 0, #4c2a7685, transparent 95%),
    linear-gradient(135deg, #211631, #191322 82%);
  box-shadow: inset 0 1px #e1bdff26, 0 14px 42px #09041254;
}

.product-detail-info h1 {
  font-size: clamp(29px, 3.55vw, 52px);
}

.product-detail-info .product-accordion {
  margin-block-start: 2px;
}

.quick-view-price,
.product-detail-price {
  color: var(--product-mint);
  font-size: clamp(23px, 2.8vw, 33px);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.product-review-jump {
  min-height: 40px;
  padding-inline: 10px;
  border: 1px solid #997ab966;
  border-radius: 8px;
  background: #cfadff0d;
  color: var(--product-accent);
}

.product-review-jump:is(:hover, :focus-visible) {
  border-color: var(--product-mint);
  color: var(--product-mint);
}

.quick-view-info > .underlined-link:is(:hover, :focus-visible) {
  color: var(--product-mint);
}

.product-purchase :is(.picker-add, .picker-notify-button) {
  position: relative;
  overflow: hidden;
}

.product-purchase :is(.picker-add, .picker-notify-button):not(:disabled) {
  background-image: linear-gradient(104deg, #d6ffed, #9ef4da 53%, #c5a4ff);
  box-shadow: 0 4px 18px #8af0dc33, inset 0 1px #fff8;
}

.product-purchase :is(.picker-add, .picker-notify-button):not(:disabled):hover {
  background-image: linear-gradient(104deg, #edfff7, #b9ffe8 53%, #d6bbff);
}

@media (min-width: 721px) {
  .product-detail-layout,
  .product-main .product-load-frame {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .quick-view-layout,
  .product-dialog .product-load-frame {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  }

  .product-dialog {
    inline-size: min(920px, calc(100% - 32px));
  }

}

@media (min-width: 721px) and (min-height: 621px) {
  .product-main .product-gallery {
    inset-block-start: 77px;
  }
}

@media (max-width: 720px) {
  .product-main .product-gallery,
  .product-dialog {
    border-radius: 17px;
  }

  .quick-view-info {
    padding: 13px 15px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .product-dialog > .dialog-close svg,
  html:not(.motion-paused) .quick-view-info > .underlined-link svg {
    transition: transform 240ms var(--product-reveal-ease);
  }

  html:not(.motion-paused) .product-dialog > .dialog-close:is(:hover, :focus-visible) svg {
    transform: rotate(90deg);
  }

  html:not(.motion-paused) .quick-view-info > .underlined-link:is(:hover, :focus-visible) svg {
    transform: translate(3px, -3px);
  }

  html:not(.motion-paused) .product-purchase :is(.picker-add, .picker-notify-button):not(:disabled)::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -100% 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 25%, #fff9 50%, transparent 75%);
  }

  html:not(.motion-paused) .product-purchase :is(.picker-add, .picker-notify-button):not(:disabled):is(:hover, :focus-visible)::after {
    animation: product-action-shine 560ms ease-out;
  }

  @supports (transition-behavior: allow-discrete) {
    html:not(.motion-paused) .product-dialog {
      opacity: 0;
      transform: translateY(15px) scale(.97);
      transition: opacity .26s ease, transform .34s var(--product-reveal-ease),
        display .34s allow-discrete, overlay .34s allow-discrete;
    }

    html:not(.motion-paused) .product-dialog[open] {
      opacity: 1;
      transform: none;
      animation: none;
    }

    html:not(.motion-paused) .product-dialog:not([open]) {
      pointer-events: none;
    }

    html:not(.motion-paused) .product-dialog::backdrop {
      opacity: 0;
      transition: opacity .28s ease, display .34s allow-discrete, overlay .34s allow-discrete;
    }

    html:not(.motion-paused) .product-dialog[open]::backdrop {
      opacity: 1;
      animation: none;
    }

    @starting-style {
      html:not(.motion-paused) .product-dialog[open] {
        opacity: 0;
        transform: translateY(15px) scale(.97);
      }

      html:not(.motion-paused) .product-dialog[open]::backdrop {
        opacity: 0;
      }
    }
  }
}

@keyframes product-action-shine {
  to { translate: 100% 0; }
}