/* Theme case studies: the industry interaction "On your skin" (signature type "swatched"). Markup: src/_includes/e2/theme/sig-swatched.njk;
   behaviour: e2-theme-swatched.js. Nothing is brand-specific: the wrapper's inline style carries the theme (--th-from / --th-to / --th-ink /
   --th-accent from stage, --th-f-head / ui / prod from tokens.fonts, --sw-r from tokens.button.radius) and every colour below derives from those.
   The look: the theme's own stage (a dark one here), hairlines, the corner the theme's buttons have, the heading face for the shade's name,
   tabular figures for money. The accent is the ONE filled button; everything else that can be pressed (the skins, the undertones, the finishes,
   the shades, the mini, the shade card) is outlined or a flat colour, and the pressed one gets an accent ring.
   The arm: six photographs of an inner forearm stacked under one SVG of twelve brush strokes (mix-blend-mode: multiply, so the shade takes the skin's
   own tone), a pigment under-layer at low opacity (so a pale shade is still seen on deep skin) and a highlight per finish. The finish is three custom
   properties on the root (--sw-fo opacity of the pigment, --sw-hlo and --sw-hlb the highlight's opacity and blur): one attribute change redraws all twelve.
   Layout: the arm over three steps in a row (stacked under 900px), then the result and the buttons, then the one filled button and the promise. On a
   phone the button row sticks to the bottom of the screen while the section is in view. Every control is at least 44 x 44px. */

.th-swatchedwrap {
  --sw-out: cubic-bezier(.2, .8, .2, 1);
  --sw-muted: color-mix(in srgb, var(--th-ink) 72%, transparent);
  --sw-line: color-mix(in srgb, var(--th-ink) 16%, transparent);
  --sw-line-2: color-mix(in srgb, var(--th-ink) 30%, transparent);
  --sw-card: color-mix(in srgb, var(--th-ink) 5%, transparent);
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-swatchedwrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.th-swatched) button { font: inherit; color: inherit; }
.th-swatched__stage :focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; }

/* ---------- The section header, in the theme's own manner (the shared one is the E2 page's) ---------- */
.th-swatched > .th-hd .th-hd__eyebrow { color: var(--th-accent); }
.th-swatched > .th-hd .th-hd__title { font-family: var(--th-f-head); font-weight: 300; font-size: clamp(44px, 6.2vw, 88px); letter-spacing: -.025em; line-height: .98; color: var(--th-ink); }
.th-swatched > .th-hd .th-hd__aside { color: color-mix(in srgb, var(--th-ink) 78%, transparent); }

/* ---------- The stage ---------- */
.th-swatched__stage {
  position: relative; isolation: isolate; border-radius: 32px; padding: clamp(18px, 3.4vw, 48px);
  background: linear-gradient(135deg, var(--th-from), var(--th-to)); color: var(--th-ink);
  font-family: var(--th-f-ui); font-size: 15px; line-height: 1.4;
  display: flex; flex-direction: column; gap: clamp(22px, 2.8vw, 36px);
  box-shadow: inset 0 0 0 1px var(--sw-line);
}
.th-swatched__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 50% at 82% 0%, color-mix(in srgb, var(--th-accent) 14%, transparent), transparent 70%);
}

/* ---------- The arm ---------- */
.th-swatched__armfig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.th-swatched__arm {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; aspect-ratio: 1024 / 340;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--sw-line);
}
.th-swatched__skinimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.th-swatched__skinimg.is-on { opacity: 1; }
.th-swatched__strokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.th-swatched__sg { transform: translateX(calc(var(--slot) * 76px)); transition: transform .4s var(--sw-out), opacity .25s ease; opacity: .8; }
.th-swatched__sg.is-on { opacity: 1; }
.th-swatched__pig { opacity: .26; }
.th-swatched__stroke { mix-blend-mode: multiply; opacity: var(--sw-fo, .88); transition: opacity .2s ease; }
.th-swatched__bristle { stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: var(--sw-bo, .16); }
.th-swatched__hl { fill: #fff; opacity: var(--sw-hlo, 0); filter: blur(var(--sw-hlb, 0px)); transition: opacity .2s ease; }
.th-swatched__ring { stroke: var(--th-accent); stroke-width: 2.4; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .2s ease; }
.th-swatched__sg.is-on .th-swatched__ring { opacity: 1; }
/* the finish: three numbers on the root, so one attribute redraws all twelve strokes */
.th-swatched[data-finish="matte"] { --sw-fo: .86; --sw-hlo: 0; --sw-hlb: 0px; --sw-bo: .2; }
.th-swatched[data-finish="satin"] { --sw-fo: .9; --sw-hlo: .24; --sw-hlb: 3.5px; --sw-bo: .12; }
.th-swatched[data-finish="glass"] { --sw-fo: .96; --sw-hlo: .5; --sw-hlb: .9px; --sw-bo: .06; }
/* the name of the chosen shade, pinned under its stroke */
.th-swatched__tag {
  position: absolute; z-index: 2; bottom: 9px; left: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 90%; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  font: 500 13px/1.3 var(--th-f-ui); letter-spacing: .02em; color: var(--th-ink); background: rgba(14, 22, 19, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-accent) 70%, transparent);
  transition: translate .3s var(--sw-out);
}
.th-swatched__cap { font-size: 13px; line-height: 1.45; color: var(--sw-muted); max-width: 70ch; text-wrap: pretty; }

/* ---------- The three steps ---------- */
.th-swatched__steps { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, 1.35fr); gap: 28px clamp(24px, 3.4vw, 48px); align-items: start; }
.th-swatched__step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-swatched__h { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--sw-line-2); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sw-muted); }
.th-swatched__n {
  display: inline-grid; place-items: center; flex: none; align-self: center; width: 22px; height: 22px; border-radius: 50%; color: var(--th-accent); box-shadow: inset 0 0 0 1px currentColor;
  font: 500 11px/1 var(--mono); letter-spacing: 0;
}
.th-swatched__hv { margin-left: auto; font: italic 400 22px/1 var(--th-f-head); letter-spacing: 0; text-transform: none; color: var(--th-ink); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.th-swatched__lab { margin: 6px 0 -4px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sw-muted); }
.th-swatched__note { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--sw-muted); }

/* a choice that is a word: outlined, the pressed one ringed in the accent */
.th-swatched__row { display: grid; gap: 8px; }
.th-swatched__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-swatched__chip {
  min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--sw-r); cursor: pointer; background: transparent; color: var(--th-ink);
  box-shadow: inset 0 0 0 1px var(--sw-line-2); font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .02em;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-swatched__chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 62%, transparent); } }
.th-swatched__chip:active, .th-swatched__skin:active, .th-swatched__shade:active { transform: scale(.95); transition-duration: .08s; }
.th-swatched__chip[aria-pressed="true"], .th-swatched__chip[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--th-accent); background: color-mix(in srgb, var(--th-accent) 12%, transparent); }

/* a choice that is a colour: a flat disc (the skin's hex, the shade's hex), a ring of the stage's own colour, then the accent */
.th-swatched__skins { display: grid; grid-template-columns: repeat(3, minmax(48px, 58px)); gap: 10px; justify-content: start; padding: 4px; margin: -4px; }
.th-swatched__skin, .th-swatched__shade {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 24%, transparent);
  transition: box-shadow .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-swatched__skind { font: 500 14px/1 var(--th-f-ui); color: #1b1410; font-variant-numeric: tabular-nums; }
.th-swatched__skin:nth-child(n+4) .th-swatched__skind { color: #f3eee6; }
.th-swatched__shades { display: grid; grid-template-columns: repeat(6, minmax(44px, 54px)); gap: 10px 8px; justify-content: start; padding: 4px; margin: -4px; }
.th-swatched__grp { grid-column: 1 / -1; margin: 2px 0 -2px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sw-muted); }
.th-swatched__grp:not(:first-child) { margin-top: 8px; }
.th-swatched__shade { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .28), transparent 46%), var(--c); }
.th-swatched__shade[data-match="true"]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--th-accent); }
@media (hover: hover) {
  .th-swatched__skin:hover, .th-swatched__shade:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 24%, transparent), 0 0 0 2px var(--th-to), 0 0 0 3px color-mix(in srgb, var(--th-ink) 60%, transparent); }
}
.th-swatched__skin[aria-pressed="true"], .th-swatched__shade[aria-pressed="true"], .th-swatched__skin[aria-pressed="true"]:hover, .th-swatched__shade[aria-pressed="true"]:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 24%, transparent), 0 0 0 3px var(--th-to), 0 0 0 5px var(--th-accent);
}

/* ---------- The result, the buttons ---------- */
.th-swatched__result { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; padding-top: clamp(18px, 2.4vw, 28px); border-top: 1px solid var(--sw-line-2); }
.th-swatched__what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.th-swatched__finish { margin: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--th-accent); }
.th-swatched__name { margin: 0; font: italic 300 clamp(46px, 6vw, 80px)/.98 var(--th-f-head); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.th-swatched__price { margin: 4px 0 0; font: 500 20px/1.3 var(--th-f-prod); font-variant-numeric: tabular-nums; }
.th-swatched__mini { color: var(--sw-muted); font-size: 15px; font-weight: 400; }
.th-swatched__alts { display: flex; flex-direction: column; gap: 10px; }
.th-swatched__alt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--sw-r); cursor: pointer;
  background: transparent; color: var(--th-ink); box-shadow: inset 0 0 0 1px var(--sw-line-2); font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .02em;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-swatched__alt:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 62%, transparent); } }
.th-swatched__alt:active { transform: scale(.985); transition-duration: .08s; }
.th-swatched__tick { display: none; flex: none; color: var(--th-accent); }
.th-swatched__alt.is-sent { box-shadow: inset 0 0 0 1.5px var(--th-accent); }
.th-swatched__alt.is-sent .th-swatched__tick { display: block; animation: th-sw-pop .45s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- The foot: the one filled button, then the promise and the exchange ---------- */
.th-swatched__foot, .th-swatched__rules { width: min(100%, 540px); margin-inline: auto; }
.th-swatched__foot { display: flex; flex-direction: column; }
.th-swatched__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--sw-r); cursor: pointer;
  background: var(--th-accent); color: var(--th-to); font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-swatched__ctat { text-align: center; }
.th-swatched__ctap { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .th-swatched__cta:hover { background: color-mix(in srgb, var(--th-accent) 88%, #fff); } }
.th-swatched__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-swatched__check { display: none; margin-right: 10px; }
.th-swatched__cta.is-done, .th-swatched__cta.is-done:hover { background: var(--th-ink); color: var(--th-to); }
.th-swatched__cta.is-done .th-swatched__check { display: block; animation: th-sw-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-sw-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.th-swatched__rules { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.th-swatched__promise { margin: 0; font-size: 14px; line-height: 1.45; color: var(--th-ink); text-wrap: balance; }
.th-swatched__exchange { margin: 0; font-size: 13px; line-height: 1.4; color: var(--sw-muted); }

/* ---------- Narrower ---------- */
@media (max-width: 1099px) {
  .th-swatched__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-swatched__step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .th-swatched__result { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .th-swatched__alts { flex-direction: row; flex-wrap: wrap; }
  .th-swatched__alt { flex: 1 1 220px; width: auto; }
}

/* ---------- Phones: the button row sticks to the bottom ---------- */
@media (max-width: 699px) {
  .th-swatched__stage { gap: 18px; padding: 14px 14px 12px; border-radius: 24px; }
  .th-swatched__steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .th-swatched__step:last-child { grid-column: auto; }
  .th-swatched__arm { border-radius: 12px; }
  .th-swatched__tag { bottom: 4px; padding: 2px 9px; font-size: 11px; }
  .th-swatched__name { font-size: 54px; }
  .th-swatched__alts { flex-direction: column; }
  .th-swatched__alt { flex: none; width: 100%; }
  .th-swatched__shades { grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 12px 6px; }   /* six 44px discs and five gaps need 294px; the stage's content is the screen less 68px, so this holds from 362px */
  .th-swatched__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 8px;
    border-radius: var(--sw-r); background: color-mix(in srgb, var(--th-to) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--sw-line-2), 0 18px 30px -18px rgba(0, 0, 0, .8);
  }
  body:has(.vsw) .th-swatched__foot { bottom: 88px; }   /* the review pages' A/B pill sits at the bottom of the screen */
  .th-swatched__cta { min-height: 52px; padding: 0 18px; font-size: 13px; letter-spacing: .06em; }
  /* Focus Not Obscured (WCAG 2.4.11): whatever takes focus stops above the sticky row (8px + the 52px button + 8px + the 12px offset + a 16px gap) */
  .th-swatched__stage { --sw-clear: calc(max(12px, env(safe-area-inset-bottom)) + 68px + 16px); }
  body:has(.vsw) .th-swatched__stage { --sw-clear: calc(88px + 68px + 16px); }
  .th-swatched__chip, .th-swatched__skin, .th-swatched__shade, .th-swatched__alt { scroll-margin-bottom: var(--sw-clear); }
}
/* Under 362px six across no longer fit: three and three (skins), four by three (shades). */
@media (max-width: 361px) {
  .th-swatched__skins { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
  .th-swatched__shades { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .th-swatched__row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reduced motion: nothing eases or pops; every state shows finished ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-swatched *, .th-swatched *::before, .th-swatched *::after { animation: none !important; transition: none !important; }
}