/* Interactive try-on demo. All selectors are prefixed to avoid changing the existing site. */
.tryon-demo {
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid var(--line);
  background:
    radial-gradient(38rem 30rem at 48% 16%, rgba(237, 233, 254, 0.92) 0%, rgba(237, 233, 254, 0) 72%),
    radial-gradient(34rem 26rem at 88% 4%, rgba(204, 251, 241, 0.48) 0%, rgba(204, 251, 241, 0) 75%),
    linear-gradient(180deg, #fbfaff 0%, #f7f5ff 100%);
  padding-block: clamp(1.5rem, 4svh, 4.5rem);
}
.tryon-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(17.5rem, 0.78fr) minmax(19.5rem, 1fr);
  grid-template-areas: "copy stage selectors" "benefits stage selectors";
  gap: clamp(1.4rem, 2.8vw, 2.75rem);
  align-items: center;
}
.tryon-demo-copy { grid-area: copy; min-inline-size: 0; }
.tryon-demo-copy-text { min-inline-size: 0; }
.tryon-demo-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-block-end: 1.35rem;
  padding: .55rem .85rem; border: 1px solid rgba(124,58,237,.13); border-radius: 999px;
  background: rgba(255,255,255,.8); color: var(--violet); font-size: .78rem; font-weight: 700;
  letter-spacing: .025em; line-height: 1.2; white-space: nowrap;
  text-transform: uppercase; /* capitalization is styling, so translations stay natural-case */
}
.tryon-demo-eyebrow svg { inline-size: 1rem; block-size: 1rem; flex: 0 0 auto; }
.tryon-demo-title {
  margin: 0; max-inline-size: 9.6em; color: var(--ink); font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.2vw, 4.8rem); font-weight: 400; line-height: .97; letter-spacing: -.025em;
}
.tryon-demo-title-emphasis { position: relative; display: inline-block; color: #6d7df6; font-style: italic; white-space: nowrap; }
.tryon-demo-title-emphasis::after {
  content: "✦"; position: absolute; inset-inline-end: -.65em; inset-block-start: -.18em; color: var(--violet);
  font-family: var(--font-text); font-size: .34em; font-style: normal;
}
.tryon-demo-lede { max-inline-size: 31rem; margin-block: 1.7rem 0; color: var(--ink-soft); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.65; }
.tryon-demo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-block-start: 1.9rem; }
.tryon-demo-actions .btn { min-inline-size: 11.4rem; white-space: nowrap; }
.tryon-demo-actions .tryon-demo-primary { border: 0; background: linear-gradient(100deg,#4e9cff 0%,#8b35f5 100%); box-shadow: 0 12px 26px rgba(104,72,223,.2); }
.tryon-demo-actions .tryon-demo-primary:hover { background: linear-gradient(100deg,#3f8ff1 0%,#7626e2 100%); }
.tryon-demo-actions .tryon-demo-secondary { gap: .6rem; border-color: rgba(124,58,237,.18); color: var(--violet-dark); }
.tryon-demo-action-icon { inline-size: 1.45rem; block-size: 1.45rem; flex: 0 0 auto; }

.tryon-demo-stage-wrap { grid-area: stage; min-inline-size: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.tryon-demo-stage {
  --tryon-demo-adaptive-crop: 1;
  --tryon-demo-crop-height-source: grid;
  --tryon-demo-preview-ratio: 1;
  --tryon-demo-object-position-x: 50%;
  position: relative; inline-size: 100%; max-inline-size: 25rem; aspect-ratio: var(--tryon-demo-preview-ratio); overflow: hidden; isolation: isolate;
  border-radius: 46% 46% 42% 42% / 28% 28% 22% 22%;
  background: radial-gradient(circle at 50% 42%,rgba(255,255,255,.98) 0 32%,rgba(242,239,255,.92) 58%,rgba(235,232,255,.8) 100%);
}
.tryon-demo-stage-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; object-fit: cover; object-position: var(--tryon-demo-object-position-x) center; pointer-events: none; user-select: none; transition: opacity 120ms ease; }
.tryon-demo-outfit { z-index: 2; }
.tryon-demo-stage-image.is-missing { opacity: 0; }
.tryon-demo-stage-help {
  position: absolute; z-index: 8; inset-inline: 10%; inset-block-end: 6%; padding: .7rem .9rem;
  border: 1px solid rgba(124,58,237,.14); border-radius: 12px; background: rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(15,23,42,.09); color: var(--ink-soft); font-size: .75rem; line-height: 1.35; text-align: center;
}
.tryon-demo-stage-help[hidden] { display: none; }

.tryon-demo-selectors { grid-area: selectors; display: grid; gap: .85rem; min-inline-size: 0; }
.tryon-demo-selector-card {
  position: relative; min-inline-size: 0; padding: 1rem 1rem .8rem; border: 1px solid rgba(124,58,237,.08);
  border-radius: 18px; background: rgba(255,255,255,.84); box-shadow: 0 10px 28px rgba(43,28,87,.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tryon-demo-selector-head { display: flex; align-items: center; gap: .6rem; margin-block-end: .65rem; color: var(--ink); }
.tryon-demo-selector-icon { inline-size: 1.7rem; block-size: 1.7rem; color: var(--violet); flex: 0 0 auto; }
.tryon-demo-selector-title { margin: 0; font-family: var(--font-text); font-size: .95rem; font-weight: 700; line-height: 1.2; }
.tryon-demo-carousel {
  --tryon-demo-thumb-gap: .45rem;
  --tryon-demo-thumb-size: 3rem;
  position: relative; min-inline-size: 0;
}
.tryon-demo-thumbs {
  min-inline-size: 0; overflow-x: auto; overflow-y: hidden; direction: ltr; overscroll-behavior-inline: contain;
  scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-width: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image: linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.tryon-demo-thumbs::-webkit-scrollbar { display: none; }
.tryon-demo-thumb-track {
  position: relative; display: flex; gap: var(--tryon-demo-thumb-gap); inline-size: max-content;
  padding-inline: calc(50% - var(--tryon-demo-thumb-size) / 2);
}
.tryon-demo-thumb {
  position: relative; display: grid; place-items: center; flex: 0 0 var(--tryon-demo-thumb-size); inline-size: var(--tryon-demo-thumb-size); aspect-ratio: 1 / 1; padding: .2rem;
  overflow: hidden; border: 1.5px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-soft);
  cursor: pointer; scroll-snap-align: center;
  transition: background-color 150ms ease,transform 150ms ease;
}
.tryon-demo-thumb:hover { background: rgba(237,233,254,.55); transform: translateY(-1px); }
.tryon-demo-thumbs.is-dragging,.tryon-demo-thumbs.is-programmatic { scroll-behavior: auto; scroll-snap-type: none; }
.tryon-demo-thumbs.is-dragging { cursor: grabbing; }
.tryon-demo-thumbs.is-dragging .tryon-demo-thumb { cursor: grabbing; }
.tryon-demo-selection-frame {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  inline-size: var(--tryon-demo-thumb-size); aspect-ratio: 1 / 1; border: 1.5px solid #8f63ff; border-radius: 12px;
  background: transparent; box-shadow: 0 0 0 2px rgba(124,58,237,.07); pointer-events: none;
  transform: translate(-50%,-50%);
}
.tryon-demo-thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; pointer-events: none; }
.tryon-demo-thumb img.is-missing { display: none; }
.tryon-demo-thumb-fallback { display: none; position: absolute; inset: 0; place-items: center; color: var(--violet-dark); font-size: .7rem; font-weight: 800; }
.tryon-demo-thumb.is-missing .tryon-demo-thumb-fallback { display: grid; }
.tryon-demo-dots { display: flex; justify-content: center; align-items: center; gap: .32rem; min-block-size: .5rem; margin-block-start: .45rem; }
.tryon-demo-dot { inline-size: .34rem; block-size: .34rem; border-radius: 50%; background: #dfd9f3; transition: transform 150ms ease,background-color 150ms ease; }
.tryon-demo-dot.is-selected { background: var(--violet); transform: scale(1.25); }

.tryon-demo-benefits { grid-area: benefits; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; align-self: end; margin-block-start: .5rem; }
.tryon-demo-benefit { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; min-inline-size: 0; color: var(--ink-soft); font-size: .78rem; font-weight: 600; line-height: 1.25; }
.tryon-demo-benefit + .tryon-demo-benefit { margin-inline-start: .75rem; padding-inline-start: .75rem; border-inline-start: 1px solid rgba(15,23,42,.08); }
.tryon-demo-benefit-icon { display: grid; place-items: center; inline-size: 2.35rem; block-size: 2.35rem; border: 1px solid rgba(124,58,237,.09); border-radius: 12px; background: rgba(255,255,255,.78); color: var(--violet); }
.tryon-demo-benefit-icon svg { inline-size: 1.3rem; block-size: 1.3rem; }

@media (max-width: 63.99em) and (min-width: 48em) {
  .tryon-demo { padding-block: clamp(1.25rem,3svh,2rem); }
  .tryon-demo-grid { grid-template-columns: minmax(0,1fr) minmax(18rem,.78fr); grid-template-areas: "copy stage" "selectors selectors" "benefits benefits"; gap: clamp(1rem,2.4vw,1.5rem); }
  .tryon-demo-title { font-size: clamp(2.35rem,5.5vw,3.5rem); }
  .tryon-demo-lede { margin-block-start: 1.15rem; font-size: clamp(.9rem,1.8vw,1.05rem); line-height: 1.55; }
  .tryon-demo-actions { gap: .5rem; margin-block-start: 1.25rem; }
  .tryon-demo-actions .btn { min-block-size: 2.75rem; padding-block: .5rem; font-size: clamp(.76rem,1.5vw,.9rem); }
  .tryon-demo-stage { --tryon-demo-crop-height-source: copy; }
  .tryon-demo-selectors { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tryon-demo-benefits { margin-block-start: 0; }
}
@media (max-width: 47.99em) {
  .tryon-demo { padding-block: .75rem 1.25rem; }
  .tryon-demo .container { padding-inline: 1rem; }
  .tryon-demo-grid { grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); grid-template-areas: "copy stage" "selectors selectors" "benefits benefits"; gap: .65rem .5rem; align-items: start; }
  /* Phones (2026-09-03 meeting): the copy column is half the viewport, the three buttons sit at
     its bottom (margin-block-start:auto) so a longer title in another language never moves
     them; the stage crops itself to this column's height (--tryon-demo-crop-height-source). A
     min-size, not a fixed one: a title that would not fit grows the column instead of
     overlapping the buttons. */
  .tryon-demo-copy { display: flex; flex-direction: column; min-block-size: 50vh; min-block-size: 50svh; position: relative; z-index: 2; }
  .tryon-demo-copy-text { grid-area: copy; min-inline-size: 0; padding-block-start: .35rem; position: relative; z-index: 2; }
  .tryon-demo-eyebrow { display: none; }
  /* The title stays inside its own column (the stage sits right next to it — a wider title
     used to run over the model's picture in longer languages); long words may break/hyphenate. */
  .tryon-demo-title { max-inline-size: 100%; font-size: clamp(1.7rem,8.4vw,3rem); line-height: .98; overflow-wrap: break-word; hyphens: auto; }
  /* The emphasised half is nowrap on wide screens (it carries the sparkle decoration on one
     line); on phones it must wrap like the rest, or a long phrase runs over the model. */
  .tryon-demo-title-emphasis { white-space: normal; max-inline-size: 100%; overflow-wrap: break-word; }
  /* Phones: the subtitle under the title is dropped (2026-09-03 meeting) — the title + the
     try-on stage need the first viewport; the copy stays for tablets and up. */
  .tryon-demo-lede { display: none; }
  .tryon-demo-actions { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: .4rem; inline-size: 100%; margin-block-start: auto; padding-block-start: .4rem; }
  /* Labels may wrap on phones (a long language grows the button instead of spilling out of it). */
  .tryon-demo-actions .btn { min-inline-size: 0; min-block-size: 2.75rem; inline-size: 100%; padding: .4rem; gap: .25rem; font-size: clamp(.6rem,2.65vw,.72rem); letter-spacing: -.015em; white-space: normal; text-align: center; line-height: 1.2; }
  .tryon-demo-action-icon { inline-size: 1.1rem; block-size: 1.1rem; }
  .tryon-demo-stage-wrap { align-self: stretch; margin-inline-start: -.8rem; }
  .tryon-demo-stage { --tryon-demo-crop-height-source: copy; inline-size: min(113%,21rem); max-inline-size: none; margin-inline-start: auto; border-radius: 48% 48% 44% 44% / 26% 26% 20% 20%; }
  .tryon-demo-stage-help { inset-inline: 4%; inset-block-end: 2%; padding: .45rem .55rem; font-size: .56rem; }
  /* The three selector cards share what is left of the first viewport under the copy column
     (about 40% on a tall phone) — the sticky header (--header-h + its border), the section's
     top padding and the grid gap are taken off so the last card's dots stay above the fold on
     short phones (iPhone SE). Fixed rows: each card's thumbs row is the leftover above its
     dots, and the carousel stretches into it so the JS can cap the thumbnail size by height
     (--tryon-demo-thumb-fit-height, see interactive-part.js). */
  .tryon-demo-selectors {
    --tryon-demo-selectors-block-size: calc(100svh - 50svh - var(--header-h) - 1px - .75rem - .65rem);
    gap: .45rem;
    block-size: calc(100vh - 50vh - var(--header-h) - 1px - .75rem - .65rem);
    block-size: var(--tryon-demo-selectors-block-size);
    min-block-size: 30svh;
    grid-template-rows: repeat(3,minmax(0,1fr));
  }
  .tryon-demo-selector-card { display: grid; grid-template-columns: 4.9rem minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; grid-template-areas: "head thumbs" "head dots"; align-items: center; gap: 0 .45rem; padding: .5rem .62rem .4rem; border-radius: 15px; min-block-size: 0; overflow: hidden; }
  .tryon-demo-selector-head { grid-area: head; margin: 0; gap: .42rem; }
  .tryon-demo-selector-icon { inline-size: 1.45rem; block-size: 1.45rem; }
  .tryon-demo-selector-title { font-size: clamp(.72rem,3.3vw,.9rem); }
  .tryon-demo-carousel { --tryon-demo-thumb-gap: .18rem; --tryon-demo-thumb-fit-height: 1; grid-area: thumbs; align-self: stretch; min-block-size: 0; display: grid; align-content: center; }
  .tryon-demo-dots { grid-area: dots; margin-block-start: .2rem; }
  .tryon-demo-thumb { padding: .05rem; border-radius: 9px; }
  .tryon-demo-benefits { gap: 0; margin-block-start: 0; }
  .tryon-demo-benefit { grid-template-columns: auto 1fr; gap: .42rem; font-size: clamp(.58rem,2.7vw,.75rem); }
  .tryon-demo-benefit + .tryon-demo-benefit { margin-inline-start: .45rem; padding-inline-start: .45rem; }
  .tryon-demo-benefit-icon { inline-size: 2rem; block-size: 2rem; border-radius: 10px; }
  .tryon-demo-benefit-icon svg { inline-size: 1.1rem; block-size: 1.1rem; }
}
@media (max-width: 24em) {
  .tryon-demo-title { font-size: clamp(1.72rem,9vw,2.15rem); }
  .tryon-demo-lede { font-size: .76rem; }
  .tryon-demo-selector-card { grid-template-columns: 4.4rem minmax(0,1fr); }
  .tryon-demo-benefit { display: block; text-align: center; }
  .tryon-demo-benefit-icon { margin-inline: auto; margin-block-end: .25rem; }
}
@media (max-width: 47.99em) and (max-height: 42em),
       (min-width: 30em) and (max-width: 47.99em) and (max-height: 46em) {
  .tryon-demo { padding-block-start: .5rem; }
  .tryon-demo-grid { gap: .4rem; }
  .tryon-demo-eyebrow { margin-block-end: .4rem; }
  .tryon-demo-title { font-size: clamp(1.7rem,8vw,2.35rem); }
  .tryon-demo-lede { margin-block-start: .6rem; font-size: clamp(.68rem,2.9vw,.82rem); line-height: 1.42; }
  .tryon-demo-actions { gap: .3rem; }
  .tryon-demo-actions .btn { min-block-size: 2.5rem; padding-block: .3rem; font-size: .65rem; }
  .tryon-demo-selectors { gap: .3rem; }
  .tryon-demo-selector-card { padding-block: .35rem .25rem; }
  .tryon-demo-carousel { --tryon-demo-thumb-size: 2.75rem; }
}
@media (min-width: 30em) and (max-width: 47.99em) and (max-height: 46em) {
  .tryon-demo-carousel { --tryon-demo-thumb-max-size-px: 48; }
}
@media (min-width: 64em) and (max-height: 50em) {
  .tryon-demo-grid { gap: clamp(1rem,2vw,2rem); }
  .tryon-demo-eyebrow { margin-block-end: .8rem; }
  .tryon-demo-title { font-size: clamp(2.5rem,4vw,3.5rem); }
  .tryon-demo-lede { margin-block-start: 1rem; font-size: 1rem; line-height: 1.5; }
  .tryon-demo-actions { gap: .45rem; margin-block-start: 1rem; }
  .tryon-demo-actions .btn { min-block-size: 2.75rem; padding-block: .4rem; font-size: .85rem; }
  .tryon-demo-selector-card { padding-block: .75rem .6rem; }
  .tryon-demo-benefits { margin-block-start: 0; }
}
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .tryon-demo-stage {
    border-radius: 0;
    -webkit-mask-image: url("/interactive_part_assets/background_blob-37920bddc6ef1d0bc013f029c3d79e8d.svg");
    mask-image: url("/interactive_part_assets/background_blob-37920bddc6ef1d0bc013f029c3d79e8d.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tryon-demo-stage-image,.tryon-demo-thumb,.tryon-demo-dot { transition: none; }
  .tryon-demo-thumbs { scroll-behavior: auto; }
}

/* ---------------- "Explore the demo" chooser dialog ---------------- */
/* .btn's display:inline-flex would beat the UA [hidden] rule (interactive-part.js hides the
   explore button when <dialog> is unsupported). */
.tryon-demo-secondary[hidden] { display: none; }
.tryon-demo-dialog {
  padding: 0; border: 0; border-radius: 22px; inline-size: min(92vw, 26rem);
  box-shadow: 0 24px 64px rgba(15,23,42,.28);
}
.tryon-demo-dialog::backdrop { background: rgba(15,23,42,.45); }
.tryon-demo-dialog-panel {
  position: relative; padding: 1.5rem 1.5rem 1.35rem;
  background: linear-gradient(180deg,#fbfaff 0%,#f4f1ff 100%);
}
.tryon-demo-dialog-close {
  position: absolute; inset-inline-end: .7rem; inset-block-start: .7rem; display: grid;
  place-items: center; inline-size: 2.1rem; block-size: 2.1rem; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.tryon-demo-dialog-close:hover { background: rgba(237,233,254,.8); color: var(--ink); }
.tryon-demo-dialog-close svg { inline-size: 1.15rem; block-size: 1.15rem; }
.tryon-demo-dialog-title {
  margin: 0 2rem .45rem 0; color: var(--ink); font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 400; line-height: 1.1; letter-spacing: -.015em;
}
[dir="rtl"] .tryon-demo-dialog-title { margin: 0 0 .45rem 2rem; }
.tryon-demo-dialog-text { margin: 0 0 1.15rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.tryon-demo-dialog-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.tryon-demo-choice {
  display: grid; gap: .55rem; justify-items: center; padding: .7rem .7rem .65rem;
  border: 1px solid rgba(124,58,237,.14); border-radius: 16px; background: rgba(255,255,255,.9);
  color: var(--violet-dark); font-size: .92rem; font-weight: 700; text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.tryon-demo-choice:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43,28,87,.16); }
.tryon-demo-choice img {
  /* The sources are pre-cropped to exactly 3:5 (solo figures from hero-3/hero-7), so cover fits
     them edge-to-edge without clipping; the gradient only shows while the image loads. */
  inline-size: 100%; block-size: auto; aspect-ratio: 3 / 5; object-fit: cover; border-radius: 12px;
  background: radial-gradient(circle at 50% 40%,rgba(255,255,255,.98) 0 32%,rgba(242,239,255,.92) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .tryon-demo-choice,.tryon-demo-dialog-close { transition: none; }
}