/* The product's own details living inside the section designs she kept
   (21 Sep 2026): 01 the Lookbook section, 02 the Nike 07 section. The section
   styles do the looking; these rules only make room for the picker. */

/* ---------------------------------------------- 01 · inside the Lookbook */
.product-lookbook .lb { min-height: max(900px, 100svh); }
.product-lookbook .lb-fig { width: min(var(--shot), 34vw); }
.product-lookbook .lb-fig .pdp-gallery { display: block; position: static; height: 100%; }
.product-lookbook .lb-fig .pdp-main { grid-column: auto; height: 100%; aspect-ratio: auto; border-radius: 12px; }
.product-lookbook .lb-video { top: 8%; display: block; }
.product-lookbook .lb-card { top: 2%; width: min(34vw, 400px); max-height: 94%; overflow: auto; padding: 18px 20px 20px; }
.product-lookbook .lb-card .pdp-price { margin: 0; font: 700 15px var(--body); }
.product-lookbook .lb-card .pdp-form { margin-top: 12px; }
.product-lookbook .lb-card .opt legend { font-size: 12px; }
.product-lookbook .lb-card .pill span, .product-lookbook .lb-card .sw em { font-size: 12px; }
/* the name reads off its right edge, in her palette's blue (21 Sep 2026) */
.on-lookbook .lb-name { color: var(--name, inherit); }
.product-lookbook .lb-name { left: 84px; bottom: 22%; font-size: clamp(26px, 3.2vw, 54px); max-width: 30%; text-align: right; }
.product-lookbook .lb-next { left: 84px; right: auto; bottom: 0; width: min(26vw, 260px); height: 92px; }

/* ---------------------------------------------- 02 · inside the Nike 07 */
.product-bignumber .x-num-big { left: 42%; }
.product-bignumber .x-num { height: auto; min-height: max(940px, 104svh); padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vh, 70px); }
.product-bignumber .x-num-left { top: 8%; max-width: min(38vw, 430px); }
.product-bignumber .x-num-left h2 { font-size: clamp(26px, 2.6vw, 44px); margin-bottom: 10px; }
.product-bignumber .x-num-left p { margin: 0 0 12px; }
.product-bignumber .x-num-left .pdp-price { font: 700 17px var(--body); margin: 0 0 14px; }
.product-bignumber .x-num-left .pdp-form { display: grid; gap: 12px; }
.product-bignumber .x-num-slide { position: absolute; inset: 0; }
.product-bignumber .x-num-fig { position: absolute; z-index: 2; left: 58%; bottom: 8%; height: 72%; }
.product-bignumber .x-num-fig .pdp-gallery { display: block; position: static; height: 100%; }
.product-bignumber .x-num-fig .pdp-main { grid-column: auto; height: 100%; width: min(340px, 28vw); aspect-ratio: auto; border-radius: 12px; }
.product-bignumber .x-num-name { top: 8%; }
.product-bignumber .x-num-pager { right: 4vw; bottom: 4%; z-index: 4; }

/* what sits under both: the description, shipping, how to pay */
.pdp-under { padding: clamp(30px, 5vw, 60px) 0; display: grid; gap: 14px; max-width: 72ch; }
.pdp-under .pdp-desc { font-size: 16px; line-height: 1.75; }

@media (max-width: 900px) {
  .product-lookbook .lb-fig, .product-lookbook .lb-card, .product-lookbook .lb-video, .product-lookbook .lb-next { position: relative; inset: auto; width: 100%; max-height: none; }
  .product-lookbook .lb-fig { height: min(52vh, 420px); }
  .product-lookbook .lb-name { position: relative; max-width: none; margin-top: 12px; }
    .product-bignumber .x-num { display: grid; gap: 16px; padding: 20px 16px 40px; }
  .product-bignumber .x-num-bar { display: none; }
  .product-bignumber .x-num-left, .product-bignumber .x-num-slide, .product-bignumber .x-num-fig,
  .product-bignumber .x-num-name, .product-bignumber .x-num-pager { position: relative; inset: auto; left: auto; top: auto; bottom: auto; right: auto; max-width: none; max-height: none; height: auto; }
  .product-bignumber .x-num-fig .pdp-main { height: min(52vh, 420px); }
  .product-bignumber .x-num-big { font-size: clamp(140px, 44vw, 260px); left: 4%; }
}

/* ---- the picker, attached inside the design's own box ---- */
.on-design { position: relative; }

/* The box is her Ink Navy (21 Sep 2026) — the very shade the bar and the footer
   use, taken from --nav-bg, so if she ever picks another shade the box follows
   the bar instead of drifting away from it. Everything sitting on the box is
   turned over to read on the dark: the words, the outlines, the pills. */
.buybox { background: var(--nav-bg); color: var(--cream); border: 0;
  border-radius: 14px; padding: 16px 16px 18px; box-shadow: 0 24px 50px -30px rgba(0,18,25,.6); }
.buybox a { color: var(--cream); }
.buybox .opt legend { color: var(--cream); opacity: .78; }
.buybox .link-btn { color: var(--cream); opacity: .85; }
.buybox .qty-row input, .buybox select { background: color-mix(in srgb, #fff 10%, transparent); color: var(--cream);
  border: 1.5px solid color-mix(in srgb, var(--cream) 35%, transparent); }
/* the size and cut pills: outlined on the dark, filled in cream when chosen */
.buybox .pill span { background: color-mix(in srgb, #fff 8%, transparent); color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 34%, transparent); }
/* the one she is on is the colour of Manifesto in the bar — read from the bar's
   own word colour, so it moves with the bar rather than being typed in here
   (her word, 21 Sep 2026) */
.buybox .pill input:checked + span { background: var(--nav-ink); color: var(--nav-bg); border-color: var(--nav-ink); }
.buybox .sw span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.buybox .sw input:checked + span { outline-color: var(--cream); }
.buybox .btn-line { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 55%, transparent); }
.buybox .btn-line:hover { background: var(--cream); color: var(--nav-bg); border-color: var(--cream); }
/* the flat cut-and-colour sheet keeps a paper backing — the mock-ups are white
   and printed with multiply, so on the navy they would vanish */
.buybox .fitbox { background: #fff; border-color: color-mix(in srgb, var(--cream) 30%, transparent); }
.buybox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.buybox-head b { font: 700 13px var(--body); }
.buybox-price { font: 700 14px var(--body); white-space: nowrap; }
.buybox-price s { opacity: .5; font-weight: 500; margin-left: 5px; }
.buybox .pdp-form { display: grid; gap: 10px; }
.buybox .opt { margin: 0; border: 0; padding: 0; }
.buybox .opt legend { font: 600 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; padding: 0 0 5px; }
.buybox .opt-values { display: flex; flex-wrap: wrap; gap: 5px; }
.buybox .opt-values.swatches { gap: 20px; }
.buybox .pill span { padding: 5px 9px; font-size: 11px; border-radius: 7px; }
.buybox .sw span { width: 20px; height: 20px; }
.buybox .sw em { display: none; }
.buybox .link-btn { justify-self: start; font-size: 11px; }
.buybox .qty-row { display: flex; gap: 8px; align-items: center; }
.buybox .qty-row .btn { min-height: 42px; flex: 1; }
.buybox .btn-block { min-height: 40px; }
.buybox .muted.small { display: none; }
.buybox .fitbox { max-width: 100%; }

/* the main box holds the shirt on a person, so it fills its frame as before */
.on-design .pdp-main { background: #fff; box-shadow: 0 24px 50px -28px rgba(0,18,25,.5); }

/* ---- the small box: the flat sheet of the cut and colour she picked ---- */
/* The sheet is photographed on white and the Pantone chip on it is the colour
   reference, so the box behind it is white too — anything else tints the chip
   and the shirt and makes the reference lie (her word, 21 Sep 2026). */
.fitbox { position: relative; width: 100%; max-width: 260px; margin-top: 8px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--navy) 18%, transparent); border-radius: 8px; padding: 4px 4px 18px; }
.fitbox figure { margin: 0; }
.fitbox figure[hidden] { display: none; }
.fitbox img { width: 100%; height: 76px; object-fit: contain; }

.fitbox-name { position: absolute; left: 8px; bottom: 6px; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6B665C; }
/* the white sheet needs a light swatch to keep a visible edge on it */
.sw span[style*="#F4F7FF"], .sw span[style*="#FFFFFF"] { box-shadow: inset 0 0 0 1px rgba(0,18,25,.28); }
.pdp-info .fitbox { max-width: 300px; }
.on-lookbook .lb-thumbs { top: 10%; width: 250px; display: grid; gap: 14px; justify-items: start; }

@media (max-width: 900px) { .fitbox { width: 100%; } }

/* when the picked colour, size or cut does not exist */
.btn.btn-na, .btn-na { background: var(--red) !important; color: #fff !important; opacity: 1 !important; cursor: not-allowed;
  letter-spacing: .12em; font-weight: 700; }
.btn.is-off { opacity: .4; pointer-events: none; }

/* the lookbook's white card now holds the picker, so it is taller and scrolls */
/* the white card keeps its own size; the picker sits under it, on the page */
/* The picker stands where the white card used to.

   On a wide screen the box sits in the middle of theband between the right
   side of the photo and the edge of the page, so it breathes. As the screen
   narrows that band closes, and the spacing stops shrinking at 20px — never
   less, so the box can never come to rest against the photo (her word, 21 Sep
   2026). The same figure is used on both sides of the box, which is what makes
   it centred; when it bottoms out at 20px it is the photo that gives way, since
   the photo is hung off its own right edge rather than centred. */
.on-lookbook {
  --pd-photo-w: min(var(--shot, 560px), 34vw);
  --pd-box-w: min(34vw, 400px);
  --pd-floor: 20px;
  /* half the air left over once the photo and the box have had their width */
  --pd-gap: max(var(--pd-floor), calc((100% - var(--pd-photo-w) - 2 * var(--pd-box-w)) / 4));
}
/* The box starts where the photo starts, whatever size the photo is: both sit
   at the top of the same box, so their top edges are level (her word,
   21 Sep 2026). It used to begin 4% lower and rode below the picture. */
.on-lookbook .buybox { position: absolute; z-index: 3; right: var(--pd-gap); top: 0;
  width: var(--pd-box-w); max-height: 92%; overflow: visible; }
.on-lookbook .lb-fig { left: auto; transform: none;
  right: calc(var(--pd-box-w) + 2 * var(--pd-gap));
  max-width: calc(100% - var(--pd-box-w) - 2 * var(--pd-gap) - 12px); }
/* the big-number's left column holds it under Explore */
.on-bignum .x-num-left { top: 6%; max-width: min(40vw, 460px); }
.on-bignum .x-num-menu { width: 100%; margin: 18px 0 0; justify-items: start; }
.on-design .lb, .on-design .x-num { padding-bottom: clamp(30px, 5vh, 60px); }
.on-design .lb-look { bottom: clamp(70px, 9vh, 110px); }
.on-design .lb-nav { bottom: clamp(24px, 4vh, 44px); }
.on-design .x-num-left { bottom: auto; }
@media (max-width: 900px) {
  .on-lookbook .lb-card, .on-bignum .x-num-left { position: relative; inset: auto; width: 100%; max-width: none; max-height: none; overflow: visible; }
  .buybox .qty-row { flex-wrap: wrap; }
}

/* nothing inside these designs scrolls on its own */
.on-design .lb-card, .on-design .x-num-left, .on-design .buybox, .on-design .fitbox { overflow: visible; max-height: none; }

@media (max-width: 900px) {
  /* stacked on a pad or a phone, the 20px becomes the space above the box —
     the photo and the box still never touch */
  .on-lookbook .buybox { position: relative; right: auto; top: auto; width: 100%; max-height: none; margin-top: var(--pd-floor); }
  .on-lookbook .lb-card { position: relative; inset: auto; width: 100%; }
  /* stacked, nothing comes within 20px of the photo either */
  .on-lookbook .lb-name { position: relative; left: auto; bottom: auto; max-width: none; margin-top: var(--pd-floor); text-align: left; }
  .on-lookbook .lb-fig { position: relative; left: auto; right: auto; transform: none; width: 100%; max-width: none; height: min(52vh, 420px); }
  .on-lookbook .lb-thumbs { position: relative; inset: auto; width: 100%; }
  .on-lookbook .lb-next { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 12px; }
  .on-lookbook .lb-nav { position: relative; bottom: auto; margin-top: 12px; }
  .on-design .lb-look { position: relative; inset: auto; display: grid; gap: 12px; }
}

/* the picture inside a section design carries the circles too */
.on-design .pdp-main { position: relative; }

/* ---- a design that carries a word she wants said out loud ---- */
.pdp-warn { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; font: 700 11px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  background: color-mix(in srgb, var(--red) 12%, #fff); color: var(--red);
  border: 1.5px solid color-mix(in srgb, var(--red) 45%, transparent); }
.buybox .pdp-warn { background: color-mix(in srgb, var(--red) 82%, #000); color: #fff; border-color: transparent; }


/* ---- the print, close up: a photo in its own right, second in the gallery ----
   The frame takes the crop's own shape (--zar), so the crop fills it exactly.
   The picture is drawn at 1/--zw of the frame's width — that is, the slice of
   the sheet being shown is stretched to the full width — then slid by its own
   --cx/--cy so the middle of the crop sits in the middle of the frame. Using a
   percentage translate measures the picture itself, which is what keeps x and y
   honest sheet fractions whatever size the frame ends up. */
.pdp-zoom { position: absolute; inset: 0; background: #fff; }
.pdp-zoom picture, .pdp-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* in a circle the frame fills it, so the print reads at that size too */


/* ---- back and next through the designs, under the name on the left ----
   Drawn like the section's own "next look" card, which is the one she liked:
   the design you are going to sits behind the words at a third of its strength
   on the dark card, the label in small letterspaced capitals, the name heavy
   and lowercase. Two of them now, so she can go back as well as on. */
.on-lookbook .pd-walk { position: absolute; z-index: 3; left: clamp(18px, 4vw, 84px); bottom: clamp(14px, 3vh, 34px);
  width: min(38vw, 380px); display: grid; gap: 9px; }
.pd-walk-count { font: 600 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.pd-walk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pd-walk-btn { position: relative; overflow: hidden; height: 104px; border-radius: 10px;
  background: var(--ink); color: var(--bg); text-decoration: none;
  display: grid; align-content: center; gap: 3px; padding: 0 14px; transition: transform .2s; }
.pd-walk-btn picture, .pd-walk-btn img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%; opacity: .32; }
.pd-walk-btn small, .pd-walk-btn b { position: relative; z-index: 2; }
.pd-walk-btn small { font: 600 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.pd-walk-btn b { font: 700 16px var(--body); text-transform: lowercase; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-walk-next { text-align: right; }
.pd-walk-back:hover { transform: translateX(-3px); } .pd-walk-next:hover { transform: translateX(3px); }

@media (max-width: 900px) {
  .on-lookbook .pd-walk { position: relative; left: auto; bottom: auto; width: 100%; margin-top: var(--pd-floor); }
}

/* ---- the background picker, on the page itself ----
   Only rendered when she is signed in, so a shopper never meets it. It sits out
   of the way at the bottom until she opens it (her word, 21 Sep 2026: she does
   not want to click out to another screen to choose a colour). */
.bgbar { position: fixed; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.bgbar > * { pointer-events: auto; }
.bgbar-tab { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 18px;
  background: var(--nav-bg); color: var(--cream);
  font: 600 10px var(--mono); letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 10px 28px -12px rgba(0,18,25,.7); }
.bgbar-body { display: grid; gap: 10px; padding: 14px; border-radius: 14px; max-width: min(92vw, 660px);
  background: var(--nav-bg); color: var(--cream); box-shadow: 0 18px 44px -18px rgba(0,18,25,.75); }
.bgbar-now { font: 600 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.bgbar-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.bgbar-sw { width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .15s, border-color .15s; }
.bgbar-sw:hover { transform: translateY(-2px); }
.bgbar-sw.on { border-color: var(--red); }
.bgbar-actions { display: flex; gap: 8px; }
.bgbar-actions .btn { min-height: 38px; padding: 0 16px; font-size: 12px; }
.bgbar-actions .btn-line { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 45%, transparent); }
@media (max-width: 700px) { .bgbar-sw { width: 26px; height: 26px; } }

/* the trail standing in the section's own eyebrow slot: left, no band, no width
   of its own — it takes the section's colour like the eyebrow did */
.crumbs.crumbs-inside { justify-content: flex-start; padding: 0; max-width: none; width: auto; color: inherit; }
.crumbs.crumbs-inside::before { display: none; }