/* Shop the Look, look b "Style it your way": one scroll story. Markup: src/_includes/e2/shopthelook/story-b.njk; behaviour: e2-shopthelook-b.js.
   Left, an HTML product page (illustration) whose look widget re-flows through five layouts and is then recoloured by the 3D wheel; right, the
   real Layout screen (Figma, app area) panned and spotlit. The world is the dusk-blue studio (#06243A to #0A5A86, cyan glow). The page itself
   stays the dark E2 template. Sizes inside the stage use em on a 1.12cqw base (the frame is an inline-size container).
   Static (no JS, reduced motion, short or narrow screens): `.is-live` (set by the JS) is what pins it; otherwise the stage shows its last
   state (pop-up open, blue CTA) and the steps follow as a list. Every state is derived from scroll progress in the JS, never accumulated. */

.st-story--b { --st-blue: #00a8e8; --st-blue-deep: #0482ac; --head: 128px; --pad-b: 24px; --stb-ease: cubic-bezier(.3, .7, .2, 1); --stb-spring: cubic-bezier(.34, 1.56, .64, 1); position: relative; }
.st-story--b .stb-col { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ---------- Heading + step counter ---------- */
.stb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow count" "title title" "note note"; align-items: center; gap: 4px 16px; }
.stb-eyebrow { grid-area: eyebrow; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.stb-title { grid-area: title; font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.05em; }
.stb-note { grid-area: note; font-size: 14px; line-height: 1.4; color: var(--text-3); max-width: 70ch; }
.stb-count {
  grid-area: count; display: none; gap: .45em; align-items: baseline; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--text-3); border: 1px solid var(--border-strong);
}
.stb-count b { font-weight: 600; color: #fff; }

/* ---------- The stage: static = a padded box over the world; live = a 16:9 frame ---------- */
.st-story--b .st-frame { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: 16px; container-type: inline-size; background: #06243a; }
.stb-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.st-story--b .st-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 100% at 50% 40%, rgba(6,36,58,.2), rgba(6,36,58,.62)); }
.stb-grid { display: grid; gap: 16px; font-size: 14px; position: relative; }

/* ---------- The product page (an illustration) ---------- */
.stb-shop { position: relative; display: flex; justify-content: center; }
.stb-page {
  --cta: #0482ac; position: relative; width: 100%; max-width: 38em; height: 41em; overflow: hidden; border-radius: 1.4em; padding: 0 1.4em 1.2em;
  font-size: 1em; line-height: 1.3; color: #14202b; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 2.6em 4.6em -1.6em rgba(2,16,30,.8), 0 0 5em -1em rgba(0,168,232,.35);
}
.stb-tag { position: absolute; right: 1.1em; top: .95em; z-index: 6; font-family: var(--mono); font-size: .68em; letter-spacing: .08em; text-transform: uppercase; color: #5b6b78; background: #eef2f5; padding: .3em .7em; border-radius: 999px; }
.stb-bar { display: flex; align-items: center; gap: 1em; height: 3.2em; margin: 0 -1.4em; padding: 0 1.4em; border-bottom: 1px solid #e8edf1; }
.stb-store { font-weight: 600; font-size: 1.05em; letter-spacing: -.02em; }
.stb-nav { display: flex; gap: .5em; margin-left: .6em; }
.stb-nav i { width: 2.6em; height: .45em; border-radius: 999px; background: #e3e9ee; }
.stb-bag { margin-left: auto; margin-right: 5.6em; width: 1.5em; height: 1.5em; color: #14202b; }
.stb-bag svg { display: block; width: 100%; height: 100%; }

.stb-pdp { display: grid; gap: 1.1em 1.3em; margin-top: 1.2em; grid-template-columns: 9em minmax(0, 1fr); grid-template-areas: "gal info" "look look"; align-items: start; transition: grid-template-columns .5s var(--stb-ease); }
.stb-gal { grid-area: gal; display: grid; place-items: center; height: 9em; border-radius: 1em; background: linear-gradient(160deg, #eef5f9, #dbe8f0); transition: height .5s var(--stb-ease); }
.stb-gal img { width: 74%; height: auto; max-height: 86%; object-fit: contain; filter: drop-shadow(0 .6em .6em rgba(6,36,58,.25)); }
.stb-info { grid-area: info; display: flex; flex-direction: column; gap: .35em; align-items: flex-start; min-width: 0; }
.stb-name { font-size: 1.35em; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.stb-price { font-size: 1.05em; font-weight: 500; color: #3c4b58; }
.stb-sizes { display: flex; gap: .4em; margin: .15em 0 .35em; }
.stb-sizes i { display: grid; place-items: center; min-width: 2.1em; height: 2.1em; border-radius: .55em; font-style: normal; font-size: .85em; font-weight: 500; color: #3c4b58; box-shadow: inset 0 0 0 1px #cfd8df; }
.stb-sizes i.on { background: #14202b; color: #fff; box-shadow: none; }
.stb-add { display: inline-block; padding: .65em 1.4em; border-radius: .7em; font-weight: 600; font-size: .95em; color: #fff; background: #14202b; transition: transform .18s ease, box-shadow .2s ease; }
.stb-add.is-hit { transform: scale(.95); box-shadow: 0 0 0 .3em rgba(0,168,232,.3); }

/* The CTA: every button of the look takes --cta (the colour wheel sets it). */
.stb-cta { display: inline-block; text-align: center; padding: .55em 1em; border-radius: .6em; font-weight: 600; font-size: .85em; line-height: 1.2; color: #fff; background: var(--cta); white-space: nowrap; }

/* The look widget. */
.stb-page[data-layout] .stb-cta.stb-open { display: none; margin-top: .1em; }
.stb-look { grid-area: look; min-width: 0; }
.stb-look__h { display: flex; align-items: center; gap: .6em; margin-bottom: .7em; font-size: 1.05em; letter-spacing: -.02em; }
.stb-look__h b { font-weight: 600; }
.stb-arrows, .stb-x { display: none; margin-left: auto; gap: .35em; }
.stb-arrows i, .stb-x { width: 1.7em; height: 1.7em; border-radius: 50%; place-items: center; font-style: normal; font-size: 1em; line-height: 1; color: #3c4b58; box-shadow: inset 0 0 0 1px #cfd8df; }
.stb-arrows i { display: grid; }
.stb-clip { overflow: hidden; margin: -.4em -.4em; padding: .4em; }
.stb-track { display: flex; flex-direction: column; gap: .55em; }
.stb-item { display: grid; grid-template-columns: 3.1em minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .45em .55em .45em .45em; border-radius: .9em; background: #f4f8fa; box-shadow: inset 0 0 0 1px #e3ebf0; min-width: 0; }
.stb-item__img { display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: .7em; background: #fff; }
.stb-item__img img { width: 82%; height: 82%; object-fit: contain; }
.stb-item__t { display: flex; flex-direction: column; gap: .1em; min-width: 0; font-size: .92em; }
.stb-item__t b { font-weight: 600; letter-spacing: -.01em; }
.stb-item__t em { font-style: normal; color: #5b6b78; }

/* Re-flow: each layout change plays one entrance; the JS alternates data-flip so the same animation restarts. */
@keyframes stb-in-a { from { opacity: 0; transform: translateY(1.1em) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes stb-in-b { from { opacity: 0; transform: translateY(1.1em) scale(.97); } to { opacity: 1; transform: none; } }
.st-story--b.is-live .stb-page[data-flip="0"] .stb-item { animation: stb-in-a .55s var(--stb-spring) both; animation-delay: calc(var(--i) * 70ms); }
.st-story--b.is-live .stb-page[data-flip="1"] .stb-item { animation: stb-in-b .55s var(--stb-spring) both; animation-delay: calc(var(--i) * 70ms); }
.st-story--b.is-live .stb-page[data-flip="0"] .stb-look__h { animation: stb-in-a .4s ease both; }
.st-story--b.is-live .stb-page[data-flip="1"] .stb-look__h { animation: stb-in-b .4s ease both; }

/* --- layout: Right Embedded (a column beside the product) --- */
.stb-page[data-layout="right"] .stb-pdp { grid-template-columns: 13em minmax(0, 1fr); grid-template-areas: "gal info" "gal look"; }
.stb-page[data-layout="right"] .stb-gal { height: 100%; min-height: 30em; }
.stb-page[data-layout="right"] .stb-gal img { width: 88%; }
.stb-page[data-layout="right"] .stb-item { grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: .6em; }
.stb-page[data-layout="right"] .stb-item__img { width: 2.6em; height: 2.6em; }
.stb-page[data-layout="right"] .stb-item__t { font-size: .85em; }
.stb-page[data-layout="right"] .stb-cta { padding: .45em .7em; font-size: .72em; }
.stb-page[data-layout="right"] .stb-look__h { font-size: .95em; }
.stb-page[data-layout="right"] .stb-track { gap: .45em; }

/* --- layout: Slider (cards slide sideways under the product) --- */
.stb-page[data-layout="slider"] .stb-arrows { display: flex; }
.stb-page[data-layout="slider"] .stb-track { flex-direction: row; gap: .9em; transform: translateX(var(--slide, 0em)); }
.stb-page[data-layout="slider"] .stb-item { flex: 0 0 11em; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: .5em; padding: .55em; }
.stb-page[data-layout="slider"] .stb-item__img { width: 100%; height: 8.6em; }
.stb-page[data-layout="slider"] .stb-cta { display: block; }

/* --- layout: Full Width (a full-width list) --- */
.stb-page[data-layout="full"] .stb-item { grid-template-columns: 3.4em minmax(0, 1fr) auto; padding: .5em .8em .5em .5em; }
.stb-page[data-layout="full"] .stb-item__img { width: 3.4em; height: 3.4em; }
.stb-page[data-layout="full"] .stb-item__t { flex-direction: row; align-items: baseline; gap: .8em; font-size: 1em; }
.stb-page[data-layout="full"] .stb-cta { padding: .6em 1.5em; }

/* --- layout: Multi Column (cards in columns) --- */
.stb-page[data-layout="multi"] .stb-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.stb-page[data-layout="multi"] .stb-item { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: .5em; padding: .5em; }
.stb-page[data-layout="multi"] .stb-item:nth-child(4) { display: none; }
.stb-page[data-layout="multi"] .stb-item__img { width: 100%; height: 9em; }
.stb-page[data-layout="multi"] .stb-cta { display: block; }

/* --- layout: Pop-up (a button on the product opens the look as a dialog) --- */
.stb-veil { position: absolute; inset: 0; z-index: 3; background: rgba(6,36,58,.55); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.stb-page[data-layout="popup"] .stb-cta.stb-open { display: inline-block; }
.stb-page[data-layout="popup"] .stb-look {
  position: absolute; z-index: 4; left: 50%; top: 52%; width: 31em; padding: 1.1em 1.2em 1.2em; border-radius: 1.2em; background: #fff;
  box-shadow: 0 2em 4em -1em rgba(2,16,30,.6); opacity: 0; transform: translate(-50%, -46%) scale(.96); pointer-events: none;
  transition: opacity .3s ease, transform .5s var(--stb-spring);
}
.stb-page[data-layout="popup"] .stb-x { display: grid; margin-left: auto; }
.stb-page[data-layout="popup"] .stb-clip { margin: 0; padding: 0; overflow: visible; }
.stb-page[data-layout="popup"] .stb-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.stb-page[data-layout="popup"] .stb-item { grid-template-columns: 4.4em minmax(0, 1fr); grid-template-rows: auto auto; gap: .3em .7em; padding: .55em; }
.stb-page[data-layout="popup"] .stb-item__img { grid-row: 1 / 3; width: 4.4em; height: 4.4em; }
.stb-page[data-layout="popup"] .stb-item__t { align-self: end; }
.stb-page[data-layout="popup"] .stb-cta { align-self: start; justify-self: start; padding: .4em 1em; }
.stb-page[data-layout="popup"].is-open .stb-veil { opacity: 1; }
.stb-page[data-layout="popup"].is-open .stb-look { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.st-story--b.is-live .stb-page[data-layout="popup"] .stb-item { animation: none; }
.st-story--b.is-live .stb-page[data-layout="popup"] .stb-look__h { animation: none; }

/* The placement note: a pill over the page while the Placement step is up. */
.stb-where { position: absolute; z-index: 7; left: 50%; bottom: 1.4em; transform: translate(-50%, .5em); margin: 0; padding: .4em 1em; border-radius: 999px; font-size: .8em; font-weight: 600; white-space: nowrap; color: #fff; background: var(--st-blue-deep); box-shadow: 0 .6em 1.4em -.4em rgba(2,16,30,.6); opacity: 0; transition: opacity .3s ease, transform .4s var(--stb-spring); pointer-events: none; }
.stb-where.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- The 3D colour wheel ---------- */
.stb-wheel { position: absolute; z-index: 8; right: .6em; bottom: .6em; width: 7em; display: flex; flex-direction: column; align-items: center; gap: .5em; pointer-events: none; }
.stb-wheel__img { display: block; width: 100%; height: auto; transform: rotate(var(--rot, 155deg)); filter: drop-shadow(0 .9em .8em rgba(2,16,30,.5)); }
.stb-hex { display: inline-flex; align-items: center; gap: .5em; padding: .3em .8em .3em .45em; border-radius: 999px; font-family: var(--mono); font-size: .8em; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #14202b; background: #fff; box-shadow: 0 .5em 1.2em -.3em rgba(2,16,30,.55); }
.stb-hex i { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--cta, #0482ac); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.stb-hex b { font-weight: 500; }

/* ---------- The real Layout screen in a window ---------- */
.stb-win { position: relative; border-radius: 1em; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 2.4em 4.4em -1.6em rgba(2,16,30,.75), 0 0 5em -1em rgba(0,168,232,.3); }
.stb-win__bar { display: flex; gap: .45em; align-items: center; height: 2.1em; padding: 0 1em; background: #f1f1f3; }
.stb-win__bar i { width: .7em; height: .7em; border-radius: 50%; background: #d4d4d8; }
.stb-win__view { position: relative; overflow: hidden; background: #f4f6f8; }
.stb-win__page { display: block; position: relative; transform: translateY(calc(var(--ty) * -1)); transition: transform .65s var(--stb-ease); }
.stb-win__img { display: block; width: 100%; height: auto; }
.stb-win__ov { position: absolute; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .3s ease; }
.stb-frame[data-ov="2"] .stb-win__ov--2, .stb-frame[data-ov="3"] .stb-win__ov--3 { opacity: 1; }
.stb-spot {
  position: absolute; left: var(--hx); width: var(--hw); top: var(--hy); height: var(--hh); border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--st-blue), 0 0 0 100vmax rgba(4,24,40,.26); transition: left .55s var(--stb-ease), top .55s var(--stb-ease), width .55s var(--stb-ease), height .55s var(--stb-ease);
}
.stb-cap { position: relative; display: grid; padding: .9em 1.1em 1em; background: #fff; color: #14202b; }
.stb-cap__item { grid-area: 1 / 1; display: flex; gap: .8em; align-items: flex-start; opacity: 0; transform: translateY(.5em); transition: opacity .3s ease, transform .4s ease; pointer-events: none; }
.stb-cap__item.is-on { opacity: 1; transform: none; }
.stb-cap__n { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--st-blue-deep); color: #fff; font-weight: 600; font-size: .85em; font-variant-numeric: tabular-nums; }
.stb-cap__txt { display: flex; flex-direction: column; gap: .15em; min-width: 0; font-size: .95em; line-height: 1.35; color: #52606b; }
.stb-cap__txt b { color: #14202b; font-weight: 600; font-size: 1.05em; letter-spacing: -.01em; }

/* ---------- Static story: the steps as a list ---------- */
.stb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.stb-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 14px; border-radius: 20px; background: var(--surface-1); border: 1px solid var(--border); }
.stb-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--st-blue-deep); color: #fff; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.stb-step__txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--text-3); padding-top: 3px; }
.stb-step__txt b { color: #fff; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.stb-crop { grid-column: 1 / -1; position: relative; display: block; overflow: hidden; border-radius: 12px; background: #f4f6f8; width: 100%; }
.stb-crop img { display: block; width: 100%; max-width: none; height: auto; }

.st-story--b:not(.is-live) .stb-win { display: none; }
.st-story--b:not(.is-live) .stb-shop { width: 100%; max-width: 38em; margin: 0 auto; font-size: 14px; }
.st-story--b:not(.is-live) .stb-page { font-size: 1em; height: 36em; }
.st-story--b:not(.is-live) .stb-wheel { right: .8em; bottom: .8em; }

/* ---------- Live (pinned) story ---------- */
.st-story--b.is-live { height: 340vh; height: 340svh; }
.st-story--b.is-live .st-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: flex; align-items: center; justify-content: center; }
.st-story--b.is-live .stb-col {
  width: min(100%, calc((100vh - var(--header-h) - var(--head) - var(--pad-b)) * 16 / 9));
  width: min(100%, calc((100svh - var(--header-h) - var(--head) - var(--pad-b)) * 16 / 9));
}
.st-story--b.is-live .stb-count { display: inline-flex; }
.st-story--b.is-live .st-frame { aspect-ratio: 16 / 9; padding: 0; border-radius: 32px; }
.st-story--b.is-live .stb-grid {
  position: absolute; inset: 0; padding: 3cqw 4cqw; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; align-items: center;
  font-size: 1.12vw; font-size: 1.12cqw;
}
.st-story--b.is-live .stb-page { font-size: 1em; height: 39.5em; }
.st-story--b.is-live .stb-wheel { right: -5.4em; bottom: 1.4em; width: 10.5em; }
.st-story--b.is-live .stb-wheel__img { transition: none; }
.st-story--b.is-live .st-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 900px) and (max-height: 759px) {
  .st-story--b { --head: 46px; }
  .st-story--b.is-live .stb-head { grid-template-areas: "title count"; }
  .st-story--b.is-live .stb-eyebrow, .st-story--b.is-live .stb-note { display: none; }
}

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 699px) {
  .stb-title { font-size: clamp(24px, 7vw, 30px); }
  .stb-note { font-size: 13px; }
  .st-story--b:not(.is-live) .stb-shop { font-size: 9px; }
  .st-story--b:not(.is-live) .stb-wheel { width: 5.6em; right: .5em; bottom: .5em; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .stb-steps { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .stb-item, .stb-look__h { animation: none !important; }
  .stb-look, .stb-veil, .stb-where, .stb-pdp, .stb-gal, .stb-win__page, .stb-spot, .stb-cap__item { transition: none !important; }
}