/* shop/build.css — the Build Your Shoe configurator (/build/ only).
   ─────────────────────────────────────────────────────────────────────────
   Brand-strict: League Gothic display / Commissioner body, 0px radius,
   hairline borders over shadows, red = selection + primary action only.
   Canvas ruling (Chance 7/6 review): the whole flow sits on ONE continuous
   studio-grey surface — the same grey the product photos are shot on — so
   cut-outs float directly on the canvas (no tile boxes, no band seams).
   White is reserved for the rail header strip and the selector cards (the
   intro hero sits on the grey too — 7/8).
   Mobile-first (~80% of traffic); fixed black build bar carries the running
   total — base shoe price first, insole adds as its own line (7/2 ruling).
   ───────────────────────────────────────────────────────────────────────── */

body { background: var(--light-grey); }

.by { padding-bottom: 48px; }
.by--flow { padding-bottom: 132px; }   /* clearance for the fixed build bar */

/* ── intro ↔ flow chrome (JS toggles .by--flow past the intro screen) ──
   Intro: hero + three steps + stats + start CTA, no rail/bar. Flow: the hero
   drops away and the slim rail is the whole header — status bar + step
   content + build bar fit one screen (Chance 7/8). */
.by:not(.by--flow) .by-rail { display: none; }
.by--flow .by-hero { display: none; }
/* ?shoe= deep links skip the intro — a head script sets .by-deeplink before
   first paint so the static intro never flashes; build.js removes it on mount. */
.by-deeplink .by-hero, .by-deeplink #by-static { display: none; }

/* ── opener — sits directly on the grey canvas (one continuous surface with
   the steps below — Chance 7/8; the white band seam is gone) ── */
.by-hero { padding: 44px 20px 8px; text-align: center; }
.by-hero__eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0 0 10px;
}
.by-hero__h1 {
  font-family: var(--font-display); font-size: clamp(52px, 9vw, 96px);
  line-height: 0.94; letter-spacing: var(--heading-ls); text-transform: uppercase;
  color: var(--black); margin: 0;
}
/* ── the three numbered steps (shared by the static pre-JS intro in
   build/index.html and renderIntro — the two markups are identical) ── */
.by-staticsteps { list-style: none; margin: 0 auto; padding: 20px 20px 40px; max-width: 720px; }
.by-staticsteps li { border-top: 1px solid var(--grey-300); padding: 26px 0; }
.by-staticsteps li:first-child { border-top: 0; }
.by-staticsteps__num { font-family: var(--font-display); font-size: 40px; color: var(--red); display: block; }
.by-staticsteps h2 {
  font-family: var(--font-display); font-size: 30px; text-transform: uppercase;
  letter-spacing: var(--heading-ls); margin: 4px 0 8px; color: var(--black);
}
.by-staticsteps p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--grey-90); margin: 0; }

/* ── the JS intro step — hero → three step COLUMNS → stats → start CTA,
   everything on one screen (Chance 7/8: "three columns, not three rows").
   Phones stay stacked — three text columns don't fit 390px.
   Desktop composition (7/14, Chance round 2): each column is CENTERED —
   product cut-out on the canvas, red number, title, copy — so the 1-2-3 sit
   symmetric under the centered headline (left-aligned ragged text read as
   off-center). The block vertically centers in the viewport via auto
   margins, which collapse to 0 on short windows (justify-content:center
   would clip the top). ── */
.by-intro__steps { padding-bottom: 4px; }
.by-intro__steps li { padding: 20px 0; }
/* the per-step cut-outs are a desktop-composition element — phones keep the
   compact stacked list Chance approved on-device 7/7 */
.by-introcol__media { display: none; }
@media (min-width: 720px) {
  /* one composed screen: fill the viewport below the topbar and center */
  .by:not(.by--flow) {
    min-height: calc(100vh - 66px);
    min-height: calc(100dvh - 66px);
    display: flex; flex-direction: column;
    padding-bottom: 24px;
  }
  .by:not(.by--flow) .by-hero { margin-top: auto; }
  .by:not(.by--flow) #by-root { margin-bottom: auto; }
  .by-hero { padding: 18px 20px 22px; }   /* the big display line needs air below */
  .by-hero__h1 { font-size: clamp(52px, 8vw, 84px); }
  .by-intro__steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    max-width: 1040px; padding: 10px 24px 4px;
  }
  .by-intro__steps li,
  .by-intro__steps li:first-child {
    border-top: 0;          /* no hairline above the numbers (Chance 7/8) */
    padding: 8px 0 0;
    text-align: center;
  }
  .by-intro__steps p { max-width: 300px; margin: 0 auto; }
  .by-staticsteps__num { font-size: 32px; }
  /* cut-outs float directly on the canvas, feet on a shared ground line.
     The 94px box is the LAYOUT slot — the images intentionally overflow it
     UPWARD (bottom-anchored) into the air below the headline, so growing
     them never moves the text beneath (Chance 7/14: bigger pictures, layout
     untouched). */
  .by-introcol__media {
    height: 94px; display: flex; align-items: flex-end; justify-content: center;
    gap: 10px; margin-bottom: 10px;
  }
  .by-introcol__media img { max-height: 138px; max-width: 240px; width: auto; object-fit: contain; }
  /* col 1 cycles ONE shoe at a time — clog → sandal → sneaker, each fading
     out on the canvas before the next fades in (Chance 7/14: single large
     shoe over the small trio, scale evened with the other columns).
     Pure CSS so the static no-JS intro animates identically. */
  .by-introcol__media--cycle { position: relative; }
  .by-introcol__media--cycle img {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    max-width: 250px; opacity: 0;
    animation: by-introcycle 9s infinite backwards;
  }
  .by-introcol__media--cycle img:nth-child(2) { animation-delay: 3s; }
  .by-introcol__media--cycle img:nth-child(3) { animation-delay: 6s; }
  @media (prefers-reduced-motion: reduce) {
    .by-introcol__media--cycle img { animation: none; }
    .by-introcol__media--cycle img:first-child { opacity: 1; }
  }
  /* col 3 plays the black-clog + custom-orthotic build animation on loop
     (Chance 7/14). The clip's insole flight uses almost the full frame so
     it can't be zoom-cropped like a photo — it renders tall out of the slot
     (the #f8f8f8 video canvas melts into the page) with a small seat-down
     nudge so the held pair lands near the ground line. */
  .by-introcol__media--anim video {
    max-height: 175px; width: auto;
    transform: translateY(13%);
  }
  .by-intro__cta { padding-top: 22px; }   /* button anchors to the col-2 copy, not adrift below it */
  .by-intro__trust { margin-top: 22px; }
}
/* one shoe on at a time: fade in (0-4%), hold (to 29%), fade out (by 33%),
   dark for the other two thirds of the 9s cycle */
@keyframes by-introcycle {
  0% { opacity: 0; }
  4% { opacity: 1; }
  29% { opacity: 1; }
  33% { opacity: 0; }
  100% { opacity: 0; }
}
.by-intro__trust {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  margin: 20px 0 0; padding: 0 20px; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-30);
}
.by-intro__cta { text-align: center; padding: 48px 20px 0; }   /* clear air between the 1-2-3 columns and the button */

/* ── progress rail — the slim white status bar that heads every flow step ── */
.by-rail {
  display: flex; justify-content: center; gap: clamp(18px, 6vw, 64px);
  padding: 12px 16px 0; background: var(--white); border-bottom: 1px solid var(--grey-300);
}
.by-rail__step {
  display: flex; align-items: baseline; gap: 8px; background: none; border: 0;
  padding: 0 0 10px; cursor: default; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.by-rail__step[data-reachable="1"] { cursor: pointer; }
.by-rail__num { font-family: var(--font-display); font-size: 22px; color: var(--grey-300); }
.by-rail__label {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-30);
}
.by-rail__step--active { border-bottom-color: var(--red); }
.by-rail__step--active .by-rail__num { color: var(--red); }
.by-rail__step--active .by-rail__label { color: var(--black); }
.by-rail__step--done .by-rail__num { color: var(--black); }

/* ── step frame — floats on the grey canvas.
   Compact (7/8): with the hero gone in the flow, the rail + head + content +
   build bar should read as one screen — keep vertical chrome tight. ── */
.by-step { padding: 16px 0 14px; }
.by-step__head { text-align: center; padding: 0 20px; }
.by-step__title {
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px);
  text-transform: uppercase; letter-spacing: var(--heading-ls); color: var(--black); margin: 0 0 5px;
}
.by-step__sub { font-family: var(--font-body); font-size: 15px; color: var(--grey-30); margin: 0 auto 12px; max-width: 520px; line-height: 1.55; }
.by-step__back {
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; color: var(--grey-30); padding: 0 20px 10px; margin: 0;
  display: block;
}
.by-step__back:hover { color: var(--black); }

/* ── swipeable tile rows — cut-outs float directly on the canvas ──
   Mobile: horizontal scroll-snap (swipe). Desktop ≥900px: wrapping grid. */
/* The product photos are baked on EXACTLY this grey (#f8f8f8 — verified by
   pixel-sampling the live CDN images), so they melt into the canvas natively.
   NO blend modes: multiply is what created the darker boxes. */
.by-swipe-wrap { position: relative; }
.by-swipe {
  display: flex; gap: 10px; overflow-x: auto;
  /* side padding = (viewport − tile)/2, so the FIRST tile rests dead-center
     with the next tile's tail in frame (scroll can't go negative, so
     centering tile 1 needs real leading padding). Desktop overrides below.
     66vw (not wider) so the neighbor peek survives the photos' own
     whitespace — at 78vw the next style was invisible on phones. */
  padding: 10px calc((100vw - min(66vw, 340px)) / 2) 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.by-swipe::-webkit-scrollbar { display: none; }
.by-swipe::after { content: ""; flex: 0 0 8px; }
/* auto side-margins center the row when it doesn't overflow, and scroll
   correctly (no clipped left edge) when it does */
.by-tile:first-child { margin-left: auto; }
.by-tile:last-child { margin-right: auto; }

.by-swipe-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 0; cursor: pointer;
  background: var(--black); color: var(--white); border: 0;
  font-size: 22px; line-height: 1; display: none;
}
.by-swipe-arrow:hover { background: var(--grey-90); }
.by-swipe-arrow--prev { left: 10px; }
.by-swipe-arrow--next { right: 10px; }
/* Arrows are desktop-only (tried on mobile 7/7 — too intrusive; the segmented
   progress bar below the hint is the mobile affordance). wireSwipe hides each
   arrow at its own end of the row. */
@media (min-width: 900px) {
  .by-swipe-arrow[data-on="1"] { display: block; }
}

.by-tile {
  flex: 0 0 min(66vw, 340px); scroll-snap-align: center;
  background: none; border: 1px solid transparent; border-radius: 0;
  padding: 14px 12px 16px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.by-tile__media {
  width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.by-tile__media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transition: transform 0.18s ease;
}
.by-tile:hover .by-tile__media img { transform: scale(1.04); }
/* Style tiles show live Shopify photos, which carry heavy baked-in grey
   padding (the type tiles' cut-outs don't). Zoom the photo INSIDE the
   clipped media box — same zoom-inside-frame pattern as the assembly —
   so the shoe fills the tile and the neighbor's peeking tail shows shoe,
   not padding. */
.by-tile--photo .by-tile__media { overflow: hidden; }
.by-tile--photo .by-tile__media img { transform: scale(1.32); }
.by-tile--photo:hover .by-tile__media img { transform: scale(1.36); }
.by-tile--selected { border-color: var(--red); border-width: 2px; padding: 13px 11px 15px; }
.by-tile__name {
  font-family: var(--font-display); font-size: 24px; text-transform: uppercase;
  letter-spacing: var(--heading-ls); color: var(--black); margin: 8px 0 0;
}
.by-tile__meta { font-family: var(--font-body); font-size: 13px; color: var(--grey-30); margin: 0; }
.by-tile__price { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--black); margin: 2px 0 0; }

.by-swipehint {
  display: block; text-align: center; padding: 0 0 6px; margin: 0;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey-30);
}
/* segmented progress bar — one flat segment per style, the centered one red.
   The mobile "there's more" affordance (arrows read as intrusive there). */
.by-swipedots { display: flex; justify-content: center; gap: 6px; padding: 0 20px 8px; }
.by-swipedots span { width: 22px; height: 3px; background: var(--grey-300); }
.by-swipedots span.on { background: var(--red); }
@media (min-width: 900px) { .by-swipedots { display: none; } }

/* ── the size screen: split buy panel ──
   Desktop: big cut-out left, white panel (name/price/fit/size) right —
   everything on one screen. Mobile: image on top, panel below. */
.by-buy {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 1080px; margin: 6px auto 0; padding: 0 20px; align-items: center;
}
/* min-width: 0 on both grid items — the hero photo's intrinsic 560px width
   otherwise inflates the 1fr track past a phone viewport (grid blowout:
   the whole page scrolled sideways on mobile). */
.by-buy__media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; min-width: 0; }
.by-buy__media > img { max-width: min(560px, 100%); max-height: 300px; object-fit: contain; }

/* gallery thumbnails under the hero — hover (or tap) swaps the big photo.
   One scrollable row (mobile swipes it), never a stacked wrap. */
.by-thumbs {
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  max-width: 100%; padding: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.by-thumbs::-webkit-scrollbar { display: none; }
.by-thumb:first-child { margin-left: auto; }
.by-thumb:last-child { margin-right: auto; }
.by-thumb {
  /* 5.5 thumbs per row — the half-visible sixth IS the "this scrolls"
     affordance (fixed 64px showed exactly five and hid the overflow) */
  flex: 0 0 calc((100% - 4.5 * 8px) / 5.5); aspect-ratio: 1 / 1;
  min-width: 0;   /* content width must not override the flex-basis */
  padding: 0; background: none; cursor: pointer;
  border: 1px solid var(--grey-300); border-radius: 0;
}
.by-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.by-thumb:hover { border-color: var(--black); }
.by-thumb--active, .by-thumb--active:hover { border: 2px solid var(--red); }
.by-buy__panel { background: var(--white); border: 1px solid var(--grey-300); padding: 20px 20px 22px; min-width: 0; }
.by-buy__name {
  font-family: var(--font-display); font-size: 30px; text-transform: uppercase;
  letter-spacing: var(--heading-ls); color: var(--black); margin: 0; line-height: 1;
}
.by-buy__price { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--black); margin: 6px 0 0; }
.by-buy__promise {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--grey-30);
  border-top: 1px solid var(--grey-300); margin: 18px 0 0; padding: 14px 0 0;
}

/* inline style switcher on the size screen — swap colorways in place
   (Chance 7/14). Current thumb wears the red box; fractional widths leave a
   half-thumb tail as the scroll cue when the type has >4 colorways. */
.by-styleswap {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.by-styleswap::-webkit-scrollbar { display: none; }
.by-styleswap__thumb {
  flex: 0 0 calc((100% - 3.5 * 8px) / 4.5); min-width: 0; aspect-ratio: 4 / 3;
  background: var(--light-grey); border: 1px solid var(--grey-300); border-radius: 0;
  padding: 0; cursor: pointer; overflow: hidden;
}
.by-styleswap__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.by-styleswap__thumb:hover { border-color: var(--black); }
.by-styleswap__thumb--on, .by-styleswap__thumb--on:hover { border: 2px solid var(--red); }

/* fit (gender) toggle — same pattern as the PDP */
.by-fit { display: flex; margin: 18px 0 0; border: 1px solid var(--grey-300); }
.by-fit__btn {
  flex: 1 1 0; padding: 11px 0; background: var(--white); border: 0; border-radius: 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--grey-30); cursor: pointer;
}
.by-fit__btn--on { background: var(--red); color: var(--white); }

/* option grids (color / size) inside the panel */
.by-opts__label {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); margin: 16px 0 8px;
}
.by-opts__label span { color: var(--grey-30); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 8px; }
/* "Size guide" trigger (shop/size-guide.js drawer) pinned to the row's right. */
.by-opts__label .sg-link { float: right; }
.by-optgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.by-opt {
  min-width: 52px; padding: 11px 12px; background: var(--white);
  border: 1px solid var(--grey-300); border-radius: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--black);
}
.by-opt:hover { border-color: var(--black); }
.by-opt--selected { border: 2px solid var(--red); padding: 10px 11px; }

/* Sold-out sizes: crossed out but STILL clickable — selecting one opens the
   notify-me (back in stock) panel where the continue CTA would be. */
.by-opt--soldout {
  color: var(--grey-30);
  background: #f6f6f6;
  text-decoration: line-through;
}
.by-opt--soldout:hover { border-color: var(--grey-30); }
.by-opt--selected.by-opt--soldout { background: var(--white); color: var(--grey-30); }

/* mount point for the shared .bis notify panel (styles in shop.css) */
.by-notify:not(:empty) { margin: 14px 0 0; }

/* ── insole step — the assembly visual + stacked cards ──
   Your chosen shoe composes with the selected insole on the canvas (the
   "watch the shoe assemble" moment); the two cards carry minimal words. */
/* Layout (7/14 redesign — Chance: "the picture should be locked at the top"):
   the composition is PINNED so every selection answers in the picture
   immediately. Mobile: sticky band under the fixed topbar, the two selector
   cards scroll beneath it. Desktop ≥900: sticky left column, selector panel
   right — same split as the size screen. */
.by-ins-layout {
  max-width: 760px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.by-ins-layout .by-assembly {
  position: sticky; top: 66px;   /* fixed topbar height (both breakpoints) */
  z-index: 3; background: var(--light-grey); padding: 8px 0 10px;
}
/* Each image ZOOMS INSIDE a clipped frame (overflow: hidden), so the zoom
   eats the photo's baked-in padding but can never paint over its neighbors —
   the earlier bare-transform approach let the images' opaque grey
   backgrounds overlap the shoe + the "+". */
.by-assembly { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.by-assembly__frame { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.by-assembly__frame--shoe { width: 44%; height: 118px; }
.by-assembly__frame--insole { width: 30%; height: 110px; }
.by-assembly__frame img { width: 100%; height: 100%; object-fit: contain; }
.by-assembly__shoe { transform: scale(1.3); }         /* crops baked-in padding only */
.by-assembly__insole--zoom { transform: scale(1.3); } /* eat the Conforma shots' padding without ever clipping content (shots are off-center) */
.by-assembly__plus { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--red); }
.by-assembly__caption {
  flex: 0 0 100%; margin: 4px 0 0; font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-30); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 900px) { .by-assembly__caption { font-size: 11.5px; letter-spacing: 0.1em; white-space: normal; } }
.by-ins { display: flex; flex-direction: column; gap: 14px; }
.by-ins-card {
  width: 100%; text-align: left; background: var(--white);
  border: 1px solid var(--grey-300); border-radius: 0; cursor: pointer; padding: 0;
  transition: border-color 0.15s;
  /* scrollIntoView clearance when a tapped card auto-reveals its expanded
     detail: fixed topbar + the sticky composition band (top), build bar
     (bottom). Desktop reverts to topbar-only — the composition sits beside
     the cards there, not above them. */
  scroll-margin: 230px 0 96px;
}
.by-ins-card:hover { border-color: var(--black); }
.by-ins-card--selected, .by-ins-card--selected:hover { border: 2px solid var(--red); }
.by-ins-card__top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.by-ins-card__img { flex: 0 0 84px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--light-grey); }
.by-ins-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.by-ins-card__name {
  font-family: var(--font-display); font-size: 26px; text-transform: uppercase;
  letter-spacing: var(--heading-ls); color: var(--black); display: block; line-height: 1;
}
.by-ins-card__badge {
  display: inline-block; font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  background: var(--red); padding: 3px 7px; margin-left: 8px; vertical-align: 3px;
}
.by-ins-card__price { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--black); margin-left: auto; white-space: nowrap; }
.by-ins-card__blurb { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--grey-90); margin: 6px 0 0; }

.by-ins-detail { border-top: 1px solid var(--grey-300); padding: 16px 18px 18px; cursor: default; }
.by-ins-detail p { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--grey-90); margin: 0 0 12px; }
.by-ins-detail .by-fine { font-size: 12.5px; color: var(--grey-30); }

/* the two ways to custom */
.by-ways { display: grid; gap: 8px; margin: 0 0 12px; }
.by-way {
  display: flex; gap: 10px; align-items: flex-start; background: var(--light-grey);
  border: 1px solid var(--grey-300); padding: 12px 14px;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--grey-90);
}
.by-way strong { color: var(--black); }
.by-way a { color: var(--red); font-weight: 700; text-decoration: none; }
.by-way a:hover { text-decoration: underline; }
.by-way__num { font-family: var(--font-display); font-size: 20px; color: var(--red); flex: 0 0 auto; line-height: 1.2; }

/* matched-scan banner — only rendered once identity is REAL (magic link / OTP) */
.by-scanline {
  display: flex; gap: 10px; align-items: flex-start; background: var(--light-grey);
  border: 1px solid var(--black); padding: 12px 14px; margin: 0 0 12px;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--grey-90);
}
.by-scanline__check { color: var(--red); font-weight: 700; }

.by-scancheck { margin: 10px 0 0; }
.by-scancheck__toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--red);
}
.by-scancheck__toggle:hover { text-decoration: underline; }
.by-scancheck__form { display: flex; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.by-scancheck__form input {
  flex: 1 1 200px; padding: 12px; border: 1px solid var(--grey-300); border-radius: 0;
  font-family: var(--font-body); font-size: 14px;
}
.by-scancheck__form button {
  padding: 12px 18px; background: var(--black); color: var(--white); border: 0; border-radius: 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
}
.by-scancheck__form button:hover { background: var(--grey-90); }
.by-scancheck__done { font-size: 13.5px; color: var(--grey-90); margin: 10px 0 0; }
.by-scancheck__err { font-size: 13px; font-weight: 600; color: var(--red); margin: 8px 0 0; }

/* arch chips (Conforma) */
.by-archgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.by-arch {
  background: var(--white); border: 1px solid var(--grey-300); border-radius: 0; cursor: pointer;
  padding: 10px 8px 12px; text-align: center;
}
.by-arch:hover { border-color: var(--black); }
.by-arch--selected, .by-arch--selected:hover { border: 2px solid var(--red); padding: 9px 7px 11px; }
.by-arch img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.by-arch__label { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--black); margin-top: 6px; }
.by-arch__sub { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--grey-30); }
.by-arch__tag {
  display: inline-block; font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: var(--black);
  padding: 2px 6px; margin-top: 5px;
}
/* .by-ins-detail p sets grey-90 at higher specificity — match it to win */
.by-ins-detail p.by-archnote, .by-archnote {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--black); margin: 2px 0 10px;
}
.by-archtest {
  display: inline-block; background: var(--white); border: 1px solid var(--red);
  border-radius: 0; padding: 12px 18px; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
}
.by-archtest:hover { background: var(--red); color: var(--white); }
/* Mandatory-test variant (Bob 7/20): the test IS the selection path, so the
   untested state gets a filled primary CTA… */
.by-archtest--primary { background: var(--red); color: var(--white); }
.by-archtest--primary:hover { background: var(--red-dark, #c40000); border-color: var(--red-dark, #c40000); }
/* …and the tested state shows the matched profile as a result row. */
.by-archresult {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 12px;
  border: 1px solid var(--red); background: var(--white); padding: 10px 14px;
}
.by-archresult img { width: 96px; height: 72px; object-fit: contain; flex-shrink: 0; }
.by-archresult__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.by-archresult__label {
  font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--black);
}
.by-archresult__note { font-family: var(--font-body); font-size: 12.5px; color: #666; }

.by-ownorthotic {
  font-family: var(--font-body); font-size: 12.5px; color: var(--grey-30);
  text-align: center; margin: 16px 0 0; line-height: 1.6; padding: 0 20px;
}
.by-ownorthotic strong { font-weight: 700; color: var(--black); }
.by-skip {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px; color: var(--grey-30);
  text-decoration: underline;
}
.by-skip:hover { color: var(--black); }

/* ── education line — a statement, not a footnote ── */
.by-edu {
  max-width: 720px; margin: 30px auto 0; padding: 0 20px;
  font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.55;
  color: var(--black); text-align: center;
}
.by-edu strong { color: var(--red); font-weight: 700; }

/* ── review step ──
   Same pinned-picture convention as the insole step (Chance 7/14): the
   finished build stays on screen — mobile: sticky band under the topbar,
   the cart lines scroll beneath; desktop ≥900: sticky media left, lines
   right, "What happens next" running full-width under both. */
.by-review { max-width: 720px; margin: 0 auto; padding: 4px 20px 0; }
.by-review__media {
  display: flex; align-items: center; justify-content: center; padding: 6px 0 10px;
  position: sticky; top: 66px; z-index: 3; background: var(--light-grey);
}
.by-review__media img { max-width: min(440px, 100%); max-height: 200px; object-fit: contain; }
/* the build animation — same slot as the static shot; #f8f8f8 video canvas
   melts into the page. Plays once, holds the finished pair; tap replays. */
.by-review__media video { max-width: min(560px, 100%); max-height: 210px; height: auto; cursor: pointer; }
.by-review__lines { border: 2px solid var(--red); background: var(--white); }
.by-review__line { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--grey-300); }
.by-review__line:last-child { border-bottom: 0; }
.by-review__line--total { background: var(--red); }
.by-review__line--total .by-review__name, .by-review__line--total .by-review__amt { color: var(--white); }
.by-review__line--total .by-review__meta { color: rgba(255, 255, 255, 0.85); }
.by-review__name { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--black); }
.by-review__meta { display: block; font-weight: 400; font-size: 13px; color: var(--grey-30); margin-top: 2px; }
.by-review__line--total .by-review__meta { color: var(--grey-300); }
.by-review__amt { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--black); white-space: nowrap; }

.by-process { margin: 26px 0 0; }
.by-process__head {
  font-family: var(--font-display); font-size: 26px; text-transform: uppercase;
  letter-spacing: var(--heading-ls); color: var(--black); margin: 0 0 12px; text-align: center;
}
.by-process__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.by-process__steps li {
  display: flex; gap: 12px; align-items: baseline; border: 1px solid var(--grey-300);
  background: var(--white); padding: 12px 14px;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--grey-90);
}
.by-process__num { font-family: var(--font-display); font-size: 22px; color: var(--red); flex: 0 0 auto; }
.by-promise {
  margin: 14px 0 0; text-align: center; font-family: var(--font-body);
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--grey-30);
}

/* ── the build bar — fixed, black, carries the running total ── */
.by-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--black); color: var(--white);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: none;
}
.by-bar--on { display: block; }
.by-bar__inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.by-bar__sum { min-width: 0; flex: 1 1 auto; }
.by-bar__chips {
  display: block; font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--grey-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.by-bar__total { font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--white); }
.by-bar__total span { font-size: 12px; font-weight: 500; color: var(--grey-300); margin-left: 6px; }
.by-bar__cta {
  flex: 0 0 auto; background: var(--red); color: var(--white); border: 0; border-radius: 0;
  padding: 14px 22px; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.by-bar__cta:hover { background: var(--red-dark); }
.by-bar__cta:disabled { background: var(--grey-90); color: var(--grey-30); cursor: not-allowed; }
@media (max-width: 480px) {
  .by-bar__total span { display: block; margin-left: 0; }   /* price on its own line, detail beneath */
  .by-bar__cta { padding: 13px 16px; letter-spacing: 0.05em; }
}

/* ── desktop — the row stays a SWIPE row (big shoes, arrows, no wrap) ── */
@media (min-width: 900px) {
  .by-swipe { padding: 14px 64px 16px; }
  .by-tile { flex: 0 0 400px; }
  .by-swipehint { display: none; }
  .by-buy { grid-template-columns: 1fr 400px; gap: 40px; padding: 0 32px; }
  .by-buy__media > img { max-height: 400px; }
  .by-ins-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 460px;
    gap: 44px; align-items: start; max-width: 1100px; padding: 0 32px;
  }
  .by-ins-layout .by-assembly { top: 90px; padding: 12px 0; }
  /* both option headers must fit one screen with the build bar — keep the
     chrome above the cards lean */
  .by-ins-layout .by-way { padding: 10px 12px; }
  .by-review {
    max-width: 1100px; padding: 0 32px;
    display: grid; grid-template-columns: minmax(0, 1fr) 460px;
    gap: 12px 44px; align-items: start;
  }
  /* the media spans BOTH right-column rows (cart + what-happens-next) —
     sticky needs that slack to hold the shoe on screen while the right
     rail scrolls; a single-row media defines its own row height and
     never pins */
  .by-review__media { top: 90px; padding: 12px 0; grid-row: 1 / 3; }
  .by-review__media img { max-height: 380px; }
  .by-review__media video { max-width: 100%; max-height: 400px; }
  .by-process { grid-column: 2; margin-top: 8px; }
  /* in the 460px rail the steps stack — the 3-across layout is for the
     old full-width strip */
  .by-review .by-process__steps { grid-template-columns: 1fr; }
  .by-review .by-process__steps li { flex-direction: row; gap: 10px; }
  .by-ins-card { scroll-margin-top: 80px; }
  .by-assembly__frame--shoe { width: 50%; height: 300px; }
  .by-assembly__frame--insole { width: 34%; height: 270px; }
  .by-process__steps { grid-template-columns: repeat(3, 1fr); }
  .by-process__steps li { flex-direction: column; gap: 6px; }
}