/* 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;
  color: #fbf8ff;
}

.product-dialog {
  inline-size: min(960px, calc(100% - 40px));
  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(20px, 3.5vw, 40px);
  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(170px, 43vh, 390px);
  block-size: clamp(170px, 43dvh, 390px);
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 0 0 4px #eedaff17, 0 14px 42px #0c061a65;
}

.product-gallery .product-gallery-main {
  block-size: auto;
  aspect-ratio: 1.12;
  max-block-size: min(56vh, 520px);
  max-block-size: min(56dvh, 520px);
}

/* 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(12px, 2.5vw, 26px);
  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: 13px 6px 6px;
  gap: 8px;
  scrollbar-color: #8566a5 #221630;
}

.product-thumbnails button {
  flex-basis: 50px;
  inline-size: 50px;
  block-size: 50px;
  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: 66px clamp(24px, 3.6vw, 42px) 32px;
  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 12px;
}

.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(32px, 4vw, 54px);
}

.product-benefit {
  color: var(--product-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 19px;
  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: 9px;
  gap: 8px;
  color: var(--product-accent);
  font-size: 13px;
}

.product-main.wrap {
  padding-block: clamp(12px, 2vw, 24px) clamp(24px, 4vw, 48px);
  background:
    radial-gradient(ellipse at 88% 2%, #22192c, transparent 50%),
    #111015;
  color: #fbf8ff;
}

.product-main .product-gallery {
  border-color: #44364f;
  background: #19151f;
  box-shadow: none;
}

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

.product-main .breadcrumb,
.product-main .product-loading {
  color: var(--product-muted);
}

.product-main .breadcrumb {
  padding: 0 0 14px;
}

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

.product-detail-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  padding-block: 0;
}

.product-detail-info {
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid #44364f;
  border-radius: 23px;
  background: #19151f;
}

.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 summary {
  color: #fbf8ff;
}

.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: 16px 12px;
  padding-block: 15px;
  border-block: 1px solid var(--product-line);
}

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

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

.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: 16px;
}

.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 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

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

  .quick-view-image .product-gallery-main {
    block-size: clamp(145px, 29vh, 265px);
    block-size: clamp(145px, 29dvh, 265px);
  }

  .quick-view-info {
    padding: 21px 20px 22px;
  }

  .product-detail-layout {
    gap: 21px;
  }

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

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

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

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .product-dialog[open] {
    animation: quick-view-enter 300ms var(--ease) both;
  }

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

  html:not(.motion-paused) .product-detail-layout {
    animation: product-detail-enter 420ms var(--ease) both;
  }

  html:not(.motion-paused) .quick-view-image::before,
  html:not(.motion-paused) .product-gallery::before {
    animation: product-ambient-light 12s ease-in-out infinite alternate;
  }

  html:not(.motion-paused) :is(.quick-view-image, .product-gallery) .product-gallery-main > img {
    animation: product-photo-enter 320ms var(--ease) both;
    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 24px #8af0dc3b, inset 0 1px #fff8;
  }
}

@keyframes quick-view-enter {
  from { opacity: .65; transform: translateY(9px) scale(.987); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes product-detail-enter {
  from { opacity: .6; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes product-photo-enter {
  from { opacity: .5; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes product-ambient-light {
  from { opacity: .45; }
  to { opacity: .93; }
}
.product-review-jump {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  width: fit-content;
  min-height: 36px;
  color: var(--product-accent);
  font-size: .84rem;
  text-underline-offset: 3px;
}
.product-review-jump svg {
  width: .9em;
  height: .9em;
}
#product-reviews {
  scroll-margin-top: 12px;
}