/* Theme case studies: the industry interaction "made for you" (signature type "made"). Markup: src/_includes/e2/theme/sig-made.njk;
   behaviour: e2-theme-made.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, --md-r from tokens.button.radius) and every colour below derives from those.
   The look: the theme's own editorial manner on its stage, as in the other signature sections. Hairlines, the corner the theme's buttons
   have, the heading face for the product's name only, tabular figures for money. The ink is the ONE filled button; everything else that can be
   pressed (the cloth tiles, the sizes, the pause button) is outlined, and the pressed one is outlined in ink. The accent marks what is done.
   Layout: wide, the cloths (three tiles) beside the buy box; under 900px the buy box goes under the cloths; where the cloth column is narrower
   than 520px the tiles become rows (a container query), so a phone shows all three cloths at once and none is hidden in a scroll. 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-madewrap {
  --md-out: cubic-bezier(.2, .8, .2, 1);
  --md-muted: color-mix(in srgb, var(--th-ink) 74%, transparent);
  --md-line: color-mix(in srgb, var(--th-ink) 14%, transparent);
  --md-line-2: color-mix(in srgb, var(--th-ink) 24%, transparent);
  --md-paper: color-mix(in srgb, #fff 62%, transparent);
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-madewrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.th-made) :is(button, input) { font: inherit; color: inherit; }
/* the dark page's focus ring is light blue; on the light stage the ink ring has the contrast */
.th-made__stage :focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }

/* ---------- The stage ---------- */
.th-made__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: grid; align-items: start; gap: 32px clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
/* soft light, as in the hero stage */
.th-made__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 0%, rgba(255,255,255,.5), transparent 65%);
}
.th-made__cap { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--md-muted); }

/* ---------- The cloths ---------- */
.th-made__cloths { container: thmadec / inline-size; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* the bar keeps its 44px height whether or not the pause button has been wired yet, so nothing moves when it appears */
.th-made__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--th-ink); padding-bottom: 8px; }
.th-made__pause {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--md-r); cursor: pointer;
  background: var(--md-paper); color: var(--th-ink); box-shadow: inset 0 0 0 1px var(--md-line-2);
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-made__pause[hidden] { display: none; }
@media (hover: hover) { .th-made__pause:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-made__pause:active { transform: scale(.95); transition-duration: .08s; }
.th-made__pico--play { display: none; }
.th-made__pause[aria-pressed="true"] .th-made__pico--pause { display: none; }
.th-made__pause[aria-pressed="true"] .th-made__pico--play { display: block; }

.th-made__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* A tile is one button: the clip, then name and price on a line, then weight, weave and care. The pressed tile is outlined in ink. */
.th-made__tile {
  display: grid; align-content: start; min-width: 0; margin: 0; padding: 8px 8px 14px; border: 0; border-radius: var(--md-r); cursor: pointer; text-align: left;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px;
  grid-template-areas: "clip clip" "nm px" "wt wt" "wv wv" "cr cr";
  background: var(--md-paper); box-shadow: inset 0 0 0 1px var(--md-line-2);
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-made__tile:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-made__tile:active { transform: scale(.985); transition-duration: .08s; }
.th-made__tile[aria-pressed="true"], .th-made__tile[aria-pressed="true"]:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--th-ink); }
/* the cloth's own tint sits behind the clip, so a tile never flashes empty while its poster or clip is on its way */
.th-made__clip { grid-area: clip; display: block; position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; border-radius: calc(var(--md-r) / 2); background: var(--c); }
.th-made__video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; }
.th-made__nm { grid-area: nm; font: 400 22px/1.15 var(--th-f-head); letter-spacing: -.005em; }
.th-made__px { grid-area: px; align-self: end; font: 500 15px/1.5 var(--th-f-prod); font-variant-numeric: tabular-nums; }
.th-made__wt, .th-made__wv, .th-made__cr { font-size: 13px; line-height: 1.35; color: var(--md-muted); }
.th-made__wt { grid-area: wt; margin-top: 6px; font-variant-numeric: tabular-nums; }
.th-made__wv { grid-area: wv; }
.th-made__cr { grid-area: cr; }

/* A narrow cloth column (a phone, a split under 1050px): the tiles become rows, the clip on the left. */
@container thmadec (max-width: 519px) {
  .th-made__tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .th-made__tile {
    grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 14px; align-content: center; padding: 8px 12px 8px 8px;
    grid-template-areas: "clip nm px" "clip wt wt" "clip wv wv" "clip cr cr";
  }
  .th-made__clip { margin: 0; width: 88px; grid-row: 1 / -1; align-self: center; }
  .th-made__nm { align-self: end; font-size: 20px; }
  .th-made__wt { margin-top: 2px; }
  .th-made__wt, .th-made__wv, .th-made__cr { font-size: 12.5px; }
}

/* ---------- The buy box ---------- */
.th-made__buy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.th-made__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--th-ink); }
.th-made__eyebrow { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--md-muted); }
.th-made__name { font: 300 clamp(30px, 2.8vw, 40px)/1.05 var(--th-f-head); letter-spacing: -.01em; text-wrap: balance; }
.th-made__cloth { font-style: italic; color: var(--th-accent-ink); white-space: nowrap; }
.th-made__note { font-size: 15px; line-height: 1.4; color: var(--md-muted); }
.th-made__price { padding-top: 4px; font: 500 clamp(26px, 2.4vw, 32px)/1 var(--th-f-prod); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.th-made__price.is-tick > span { display: inline-block; animation: th-made-tick .32s var(--md-out); }
@keyframes th-made-tick { from { opacity: .3; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* Sizes: square chips; the pressed one (a size, or My measurements) is outlined in ink. The one filled thing is the button below. */
.th-made__fit { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.th-made__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.th-made__size {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: var(--md-r); cursor: pointer;
  background: var(--md-paper); box-shadow: inset 0 0 0 1px var(--md-line-2);
  font: 500 14px/1 var(--th-f-ui); letter-spacing: .02em; color: var(--md-muted);
  transition: box-shadow .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-made__size--custom { padding: 0 14px; }
@media (hover: hover) { .th-made__size:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); color: var(--th-ink); } }
.th-made__size:active { transform: scale(.95); transition-duration: .08s; }
.th-made__size[aria-pressed="true"], .th-made__size[aria-pressed="true"]:hover { background: #fff; color: var(--th-ink); box-shadow: inset 0 0 0 1.5px var(--th-ink); }
.th-made__chev { flex: none; transition: rotate .2s var(--md-out); }
.th-made__size[aria-expanded="true"] .th-made__chev { rotate: 180deg; }

/* My measurements: three fields. A hint under each says how the number was read, both ways; an unreadable one is shown a value that works. */
.th-made__measure { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px 16px 10px; min-width: 0; border: 0; border-radius: var(--md-r); background: var(--md-paper); box-shadow: inset 0 0 0 1px var(--md-line); }
.th-made__measure[hidden] { display: none; }
.th-made__measure:not([hidden]) { animation: th-made-open .28s var(--md-out); }
@keyframes th-made-open { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.th-made__mnote { font-size: 14px; line-height: 1.4; color: var(--md-muted); }
.th-made__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.th-made__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.th-made__flabel { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--md-muted); }
.th-made__input {
  display: block; width: 100%; min-width: 0; height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--md-r); background: #fff;
  box-shadow: inset 0 0 0 1px var(--md-line-2); font: 400 16px/1 var(--th-f-ui); color: var(--th-ink); font-variant-numeric: tabular-nums;
  transition: box-shadow .15s ease;
}
@media (hover: hover) { .th-made__input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-made__input:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 2px; }
.th-made__norm { min-height: 2.6em; font-size: 12.5px; line-height: 1.3; color: var(--md-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.th-made__norm[data-state="ok"] { color: var(--th-ink); font-weight: 500; }

/* The made-for-you line and the promise, then the button. */
.th-made__meta { display: flex; flex-direction: column; gap: 6px; padding-block: 16px; border-block: 1px solid var(--md-line-2); }
.th-made__line { font-size: 16px; line-height: 1.4; }
.th-made__ship { white-space: nowrap; }   /* "Ships by 1 Nov" wraps as one piece, never between the day and the month */
.th-made__date { font-weight: 500; font-variant-numeric: tabular-nums; }
.th-made__promise { font-size: 14px; line-height: 1.4; color: var(--md-muted); }

.th-made__foot { display: flex; flex-direction: column; }
.th-made__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--md-r); cursor: pointer;
  background: var(--th-ink); color: #fff; 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-made__ctat { text-align: center; }
.th-made__ctap { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .th-made__cta:hover { background: color-mix(in srgb, var(--th-ink) 84%, var(--th-accent)); } }
.th-made__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-made__check { display: none; margin-right: 10px; }
.th-made__cta.is-done, .th-made__cta.is-done:hover { background: var(--th-accent); }
.th-made__cta.is-done .th-made__check { display: block; animation: th-made-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-made-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* ---------- Narrower: the buy box goes under the cloths ---------- */
@media (max-width: 899px) {
  .th-made__stage { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phones: the cloths as rows, the button row sticks to the bottom ---------- */
@media (max-width: 699px) {
  .th-made__stage { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 14px 14px 12px; border-radius: 24px; }   /* stretch: the cloth column is a size container, so it has no width of its own */
  /* the buy box steps aside, so the sticky row's containing block is the whole stage (it sticks over the cloths) */
  .th-made__buy { display: contents; }
  .th-made__name { font-size: 30px; }
  .th-made__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 8px; border-radius: var(--md-r);
    background: color-mix(in srgb, #fff 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--md-line), 0 18px 30px -18px color-mix(in srgb, var(--th-ink) 70%, transparent);
  }
  body:has(.vsw) .th-made__foot { bottom: 88px; }   /* the review pages' A/B pill sits at the bottom of the screen */
  .th-made__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. The room to keep is the row's bottom offset + its height
     (8px + the 52px button + 8px) + a 16px gap; the same sum as .th-look__tag in e2-theme-look.css. A field also keeps its own hint in view
     (6px gap + up to three 12.5px lines on the narrowest phone), because that hint is how the number was read. */
  .th-made__stage { --md-clear: calc(max(12px, env(safe-area-inset-bottom)) + 68px + 16px); }
  body:has(.vsw) .th-made__stage { --md-clear: calc(88px + 68px + 16px); }
  .th-made__tile, .th-made__size, .th-made__pause { scroll-margin-bottom: var(--md-clear); }
  .th-made__input { scroll-margin-bottom: calc(var(--md-clear) + 56px); }

  /* The made-for-you line: the dot only joins two things on one line. At phone widths the line wrapped after it and stranded it, so the date
     takes its own line instead and the dot goes (it is aria-hidden; the real space is in the markup). The fallback "ships in about 12 days"
     (no JS) starts a line now, so it gets its capital. */
  .th-made__sep { display: none; }
  .th-made__ship { display: block; }
  .th-made__ship::first-letter { text-transform: uppercase; }
}

/* ---------- Reduced motion: no tick, no pop, no reveal; everything shows its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-made *, .th-made *::before, .th-made *::after { animation: none !important; transition: none !important; }
}