/* Theme case studies: the industry interaction "shop the look" (signature type "look"). Markup: src/_includes/e2/theme/sig-look.njk;
   behaviour: e2-theme-look.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) and every colour below derives from those.
   The look: the theme's own editorial manner on its stage. Square-ish corners, hairlines, uppercase buttons, the wordmark face for the
   label only, tabular figures for money. The ink is the one filled button; the accent marks what is included and what is done.
   Layout: wide, the photo (2:3) beside a panel of rows; under 1100px the photo narrows and the rows stack their sizes under the name
   (a container query on the panel); on a phone the photo comes first, the pieces become a swipeable row of cards, and the total with the
   button sticks to the bottom of the screen while the section is in view. Every control is at least 44 x 44px. */

.th-lookwrap {
  --lk-out: cubic-bezier(.2, .8, .2, 1);
  --lk-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lk-muted: color-mix(in srgb, var(--th-ink) 74%, transparent);
  --lk-line: color-mix(in srgb, var(--th-ink) 14%, transparent);
  --lk-line-2: color-mix(in srgb, var(--th-ink) 24%, transparent);
  --lk-paper: color-mix(in srgb, #fff 62%, transparent);
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-lookwrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.th-look) button { font: inherit; color: inherit; }
/* the dark page's focus ring is light blue; on the light stage the ink ring has the contrast */
.th-look__stage :focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }

/* ---------- The stage ---------- */
.th-look__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: stretch; gap: 32px clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}
/* soft light, as in the hero stage */
.th-look__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%);
}

/* ---------- The photo and its hotspots ---------- */
/* when the rows run taller than the photo (narrower screens), the photo keeps pace with them */
.th-look__photo {
  position: sticky; top: calc(var(--header-h, 68px) + 24px); margin: 0; align-self: start; aspect-ratio: var(--ar); border-radius: 4px; background: color-mix(in srgb, var(--th-ink) 8%, var(--th-to));
  box-shadow: 0 30px 50px -36px color-mix(in srgb, var(--th-ink) 75%, transparent);
}
.th-look__img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; user-select: none; -webkit-user-select: none; }

/* A 44px button round a 28px disc; the ring breathes a few times when the section arrives, then rests. */
.th-look__hot {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 44px; height: 44px; translate: -50% -50%;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-look__hot::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgba(255,255,255,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  transition: scale .25s var(--lk-spring), opacity .2s ease;
}
.th-look__dot {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--th-ink); font: 600 13px/1 var(--th-f-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--th-ink) 8%, transparent), 0 6px 14px -6px rgba(0,0,0,.5);
  transition: background-color .18s ease, color .18s ease, scale .25s var(--lk-spring);
}
/* the pulse is its own ring over the resting one, so it can fade out and start again without the resting ring blinking */
.th-look__hot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); opacity: 0; pointer-events: none; }
.th-look.is-live:not(.is-touched) .th-look__hot::after { animation: th-look-pulse 2.4s var(--lk-out) calc(.7s + var(--n) * .3s) 4; }
@keyframes th-look-pulse { 0% { scale: 1; opacity: .9; } 75%, 100% { scale: 1.75; opacity: 0; } }
.th-look__hot.is-hi .th-look__dot, .th-look__hot[aria-expanded="true"] .th-look__dot {
  background: var(--th-ink); color: #fff; scale: 1.08;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--th-ink) 18%, transparent), 0 8px 16px -6px rgba(0,0,0,.55);   /* the white rim keeps an ink disc visible on a dark garment */
}
.th-look__hot.is-hi::before, .th-look__hot[aria-expanded="true"]::before { scale: 1.12; }
@media (hover: hover) { .th-look__hot:hover .th-look__dot { scale: 1.12; } }
.th-look__hot:active .th-look__dot { scale: .94; transition-duration: .1s; }
/* the ring is white inside ink, so it reads on a dark garment and on the pale wall alike */
.th-look__hot:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px var(--th-ink); }
/* a piece taken out of the look: its hotspot fades back */
.th-look__hot.is-out .th-look__dot { background: rgba(255,255,255,.62); color: var(--lk-muted); }
.th-look__hot.is-out::before { opacity: .4; }

/* The tag: name, price and the chosen size, under (or over) the hotspot, kept inside the photo; the caret points at the disc. */
.th-look__tag {
  position: absolute; z-index: 3; left: var(--tx, 0); top: var(--ty, 0); width: max-content; max-width: calc(100% - 16px);
  display: grid; grid-template-columns: 44px minmax(0, auto); grid-template-rows: auto auto; align-content: center; gap: 1px 10px;
  padding: 7px 14px 7px 7px; border-radius: 3px; background: #fff; color: var(--th-ink); pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--th-ink) 6%, transparent), 0 18px 32px -16px rgba(0,0,0,.45);
  animation: th-look-tag .22s var(--lk-out) both;
}
.th-look__tag[hidden] { display: none; }
/* opening a tag scrolls it into view (e2-theme-look.js), with room for the entrance and the shadow; the header is already cleared by
   html's scroll-padding-top (e2-theme.css), which adds to this margin, so it isn't counted again here */
.th-look__tag { scroll-margin: 16px 0; }
.th-look__tag::before {
  content: ""; position: absolute; left: var(--cx, 50%); top: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; rotate: 45deg;
  border-radius: 1px 0 0 0;
}
.th-look__tag.is-up::before { top: auto; bottom: -5px; border-radius: 0 0 1px 0; }
.th-look__tag.is-up { animation-name: th-look-tag-up; }
@keyframes th-look-tag { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes th-look-tag-up { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.th-look__tagimg { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 2px; object-fit: cover; }
.th-look__tagname { align-self: end; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.th-look__tagmeta { align-self: start; font-size: 13px; line-height: 1.3; color: var(--lk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- The panel ---------- */
.th-look__panel { container: thlook / inline-size; display: flex; flex-direction: column; min-width: 0; }
.th-look__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--th-ink);
}
.th-look__label { font: 400 clamp(30px, 2.8vw, 40px)/1 var(--th-f-head); letter-spacing: 0; }
.th-look__brand { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lk-muted); white-space: nowrap; }

/* The rows: crop (with its number), name and price, sizes, include. */
.th-look__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.th-look__card {
  position: relative; display: grid; align-items: center; gap: 4px 18px; padding: 14px 10px 14px 0;
  grid-template-columns: 88px minmax(0, 1fr) auto 44px; grid-template-areas: "art info sizes inc";
  border-bottom: 1px solid var(--lk-line);
  transition: background-color .18s ease, opacity .2s ease, translate .6s var(--lk-out);
}
/* the highlight runs into the stage's padding a little, so the crop doesn't touch its edge */
.th-look__card::before {
  content: ""; position: absolute; inset: 0 -10px; z-index: -1; border-radius: 4px; background: var(--lk-paper); opacity: 0; transition: opacity .18s ease;
}
.th-look__card.is-hi::before, .th-look__card.is-cur::before { opacity: 1; }
.th-look__art {
  grid-area: art; position: relative; display: block; width: 88px; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--th-ink) 8%, var(--th-to));
}
.th-look__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.th-look__num {
  position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--th-ink); font: 600 11px/1 var(--th-f-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.35); transition: background-color .18s ease, color .18s ease;
}
.th-look__card.is-hi .th-look__num, .th-look__card.is-cur .th-look__num { background: var(--th-ink); color: #fff; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px -2px rgba(0,0,0,.35); }
.th-look__info { grid-area: info; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-look__name { font: 500 17px/1.25 var(--th-f-prod); letter-spacing: -.01em; transition: color .2s ease; }
.th-look__price { font: 400 15px/1.3 var(--th-f-prod); color: var(--lk-muted); font-variant-numeric: tabular-nums; }

/* Sizes: the theme's own square chips; the chosen one is outlined in ink (the one filled thing is the button below). */
.th-look__sizes { grid-area: sizes; display: flex; flex-wrap: wrap; gap: 6px; }
.th-look__size {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--lk-paper); box-shadow: inset 0 0 0 1px var(--lk-line-2);
  font: 500 13px/1 var(--th-f-ui); letter-spacing: .02em; color: var(--lk-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-look__size--wide { padding: 0 14px; }
@media (hover: hover) { .th-look__size:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); color: var(--th-ink); } }
.th-look__size:active { transform: scale(.95); transition-duration: .08s; }
.th-look__size[aria-pressed="true"] { background: #fff; color: var(--th-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--th-ink); }

/* Include: a square box in the accent, ticked while the piece is in the look. */
.th-look__inc {
  grid-area: inc; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-look__box {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; color: #fff;
  background: var(--th-accent); box-shadow: inset 0 0 0 1.5px var(--th-accent);
  transition: background-color .15s ease, box-shadow .15s ease, scale .25s var(--lk-spring);
}
.th-look__box svg { transition: opacity .12s ease, scale .2s var(--lk-spring); }
.th-look__inc[aria-pressed="false"] .th-look__box { background: var(--lk-paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--th-ink) 40%, transparent); }
.th-look__inc[aria-pressed="false"] .th-look__box svg { opacity: 0; scale: .5; }
@media (hover: hover) { .th-look__inc:hover .th-look__box { box-shadow: inset 0 0 0 1.5px var(--th-ink); } }
.th-look__inc:active .th-look__box { scale: .9; transition-duration: .08s; }

/* a piece taken out: the photo fades back, the name drops to the muted ink; the words, the number and the sizes keep AA (picking a size puts it back) */
.th-look__card.is-out .th-look__art img { opacity: .42; }
.th-look__card.is-out .th-look__name { color: var(--lk-muted); }

/* ---------- The total and the button ---------- */
.th-look__foot { display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding-top: 24px; }
.th-look__sum { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.th-look__sumtop { display: flex; flex-direction: column; gap: 4px; }
.th-look__cap { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lk-muted); }
.th-look__count { font-size: 14px; line-height: 1.3; color: var(--lk-muted); font-variant-numeric: tabular-nums; }
.th-look__total { font: 600 clamp(28px, 2.6vw, 34px)/1 var(--th-f-prod); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.th-look__total.is-tick { animation: th-look-tick .32s var(--lk-out); }
@keyframes th-look-tick { from { opacity: .3; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.th-look__cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 24px;
  border: 0; border-radius: 2px; cursor: pointer; background: var(--th-ink); color: #fff;
  font: 600 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;
}
@media (hover: hover) { .th-look__cta:not(:disabled):hover { background: color-mix(in srgb, var(--th-ink) 84%, var(--th-accent)); } }
.th-look__cta:not(:disabled):active { transform: scale(.985); transition-duration: .08s; }
.th-look__cta:disabled { cursor: default; background: color-mix(in srgb, var(--th-ink) 12%, transparent); color: color-mix(in srgb, var(--th-ink) 50%, transparent); }
.th-look__check { display: none; }
.th-look__cta.is-done, .th-look__cta.is-done:hover { background: var(--th-accent); }
.th-look__cta.is-done .th-look__check { display: block; animation: th-look-pop .45s var(--lk-spring); }
@keyframes th-look-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* ---------- Entrance (JS adds .is-ready to the section, then .is-in once in view) ---------- */
.th-look.is-ready .th-look__card:not(.is-in) { opacity: 0; translate: 0 14px; }
.th-look.is-ready .th-look__hot:not(.is-in) .th-look__dot { scale: .4; opacity: 0; }
.th-look.is-ready .th-look__hot:not(.is-in)::before { opacity: 0; }
.th-look__hot .th-look__dot { transition: background-color .18s ease, color .18s ease, scale .35s var(--lk-spring), opacity .25s ease; }

/* ---------- Narrower panels: the sizes go under the name ---------- */
@container thlook (max-width: 560px) {
  .th-look__card { grid-template-columns: 80px minmax(0, 1fr) 44px; grid-template-areas: "art info inc" "art sizes inc"; align-items: start; row-gap: 10px; }
  .th-look__art { width: 80px; }
  .th-look__info { align-self: end; }
  .th-look__inc { align-self: center; }
}
/* narrower still (tablets): the include box moves up beside the name and the sizes get the card's full width */
@container thlook (max-width: 420px) {
  .th-look__card { grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "art info inc" "sizes sizes sizes"; align-items: center; row-gap: 12px; }
  .th-look__art { width: 64px; }
  .th-look__info { align-self: center; }
  .th-look__inc { align-self: start; margin-top: -4px; }
  .th-look__size { flex: 1 1 0; }
  .th-look__size--wide { flex: 0 1 auto; }
}
@media (max-width: 1099px) and (min-width: 900px) { .th-look__stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }
@media (max-width: 899px) and (min-width: 700px) { .th-look__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Laptops with short screens (1280 x 720 and the like): a little tighter, so the photo, the rows and the button fit in one
   screen under the header ---------- */
@media (min-width: 1100px) and (max-height: 820px) {
  .th-look__stage { padding: 36px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .th-look__head { padding-bottom: 14px; }
  .th-look__label { font-size: 32px; }
  .th-look__card { padding-block: 10px; grid-template-columns: 72px minmax(0, 1fr) auto 44px; }
  .th-look__art { width: 72px; }
  .th-look__foot { padding-top: 16px; gap: 12px; }
  .th-look__cta { min-height: 52px; }
}

/* ---------- Phones: the photo first, the pieces a swipeable row of cards, the total and the button stick to the bottom ---------- */
@media (max-width: 699px) {
  .th-look__stage { display: flex; flex-direction: column; gap: 16px; padding: 14px 14px 12px; border-radius: 24px; }
  /* the panel steps aside, so the sticky row's containing block is the whole stage (it sticks over the photo) */
  .th-look__panel { display: contents; }
  .th-look__photo { position: relative; top: auto; align-self: stretch; }
  .th-look__head { padding: 4px 2px 12px; }
  .th-look__label { font-size: 28px; }
  .th-look__list {
    position: relative; flex-direction: row; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: -4px -14px 0; padding: 4px 14px 6px; scroll-padding-inline: 14px;
  }
  .th-look__list::-webkit-scrollbar { display: none; }
  .th-look__card {
    flex: 0 0 min(84%, 300px); scroll-snap-align: start; padding: 10px; border: 0; border-radius: 4px; gap: 10px 12px;
    grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "art info inc" "sizes sizes sizes"; align-items: center;
    background: var(--lk-paper); box-shadow: inset 0 0 0 1px var(--lk-line);
  }
  .th-look__card::before { display: none; }
  .th-look__card.is-hi, .th-look__card.is-cur { box-shadow: inset 0 0 0 1.5px var(--th-ink); background: #fff; }
  .th-look__art { width: 64px; }
  .th-look__num { left: 4px; top: 4px; width: 20px; height: 20px; font-size: 10.5px; }
  .th-look__name { font-size: 16px; }
  .th-look__price { font-size: 14px; }
  .th-look__inc { align-self: start; margin: -4px -4px 0 0; }
  .th-look__sizes { gap: 6px; }
  .th-look__size { flex: 1 1 0; }
  .th-look__size--wide { flex: 0 1 auto; }

  .th-look__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; margin-top: 0;
    flex-direction: row; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 6px;
    background: color-mix(in srgb, #fff 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--lk-line), 0 18px 30px -18px color-mix(in srgb, var(--th-ink) 70%, transparent);
  }
  body:has(.vsw) .th-look__foot { bottom: 88px; }   /* the review pages' A/B pill sits at the bottom of the screen */
  /* an opened tag stops above the sticky total: its bottom offset + the 64px foot + a 12px gap */
  .th-look__tag { scroll-margin-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px + 12px); }
  body:has(.vsw) .th-look__tag { scroll-margin-bottom: 164px; }
  .th-look__sum { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .th-look__sumtop { order: 2; }
  .th-look__cap { display: none; }
  .th-look__count { font-size: 12px; }
  .th-look__total { font-size: 22px; }
  .th-look__cta { flex: none; width: auto; min-height: 48px; padding: 0 18px; font-size: 13px; letter-spacing: .06em; }
  .th-look__tagname { font-size: 13px; }
  .th-look__tagmeta { font-size: 12px; }
}

/* ---------- Reduced motion: no breathing rings, no entrance, no tick; everything shows its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-look *, .th-look *::before, .th-look *::after { animation: none !important; transition: none !important; }
  .th-look.is-ready .th-look__card:not(.is-in) { opacity: 1; translate: 0 0; }
  .th-look.is-ready .th-look__hot:not(.is-in) .th-look__dot { scale: 1; opacity: 1; }
  .th-look.is-ready .th-look__hot:not(.is-in)::before { opacity: 1; }
  .th-look__hot:hover .th-look__dot, .th-look__hot.is-hi .th-look__dot, .th-look__hot[aria-expanded="true"] .th-look__dot { scale: 1; }
}