/* ════════════════════════════════════════════════════════════════════════
   STITCHA — MOBILE APP V2 (≤560px, opt-in ?app=v2)
   Like-for-like port of the Claude Code prototype "Stitcha Mobile App V2"
   (design-ref: mobile-mockup-redesign.zip → css/mobile-v2.css + the app /
   sheet / order pieces of mobile.css + mobile2.css). Every selector is
   scoped under #yha2Root and the whole layer sits inside the ≤560 media
   query — desktop, classic phone and the gelato shell are untouched.
   Demo chrome (phone frame, fake status bar, dev step-switcher) dropped;
   the fake 48px status-bar paddings became safe-area insets.
   Palette per the handoff README: bg #f6f7f9 · card #fff · navy #0b1730 ·
   header #0a1428 · ink #101828 · sub #5d6b7e · line #e6e8ee ·
   blue #2f6fed/#eef3fd · green #17a34a/#e8f6ee · DM Sans 400-800.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {

#yha2Root{ position:fixed; inset:0; z-index:310; display:none; }
#yha2Root.on{ display:block; }
#yha2Root, #yha2Root *{ box-sizing:border-box; }
#yha2Root button{ font-family:inherit; cursor:pointer; }
#yha2Root h1,#yha2Root h2,#yha2Root h3,#yha2Root p{ margin:0; }
#yha2Root img{ display:block; }

#yha2Root .mv{ --bg:#f6f7f9; --card:#fff; --navy:#0b1730; --hdr:#0a1428; --ink:#101828; --sub:#5d6b7e;
  --line:#e6e8ee; --blue:#2f6fed; --blue-bg:#eef3fd; --green:#17a34a; --green-bg:#e8f6ee;
  background:var(--bg); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; }
#yha2Root .app{ position:absolute; inset:0; display:flex; flex-direction:column; }
#yha2Root .app-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:var(--bg); }
#yha2Root .app-scroll::-webkit-scrollbar{ display:none; }

/* header */
#yha2Root .mv-hd{ position:relative; z-index:62; background:var(--hdr); color:#fff; display:flex; align-items:center;
  justify-content:space-between; padding:14px 16px 12px;
  padding-top:calc(14px + env(safe-area-inset-top)); flex:0 0 auto; }
#yha2Root .mv-hd-brand{ display:flex; align-items:center; gap:.5rem; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
#yha2Root .mv-hd-mono{ width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:0; text-indent:0; }
#yha2Root .mv-hd-menu{ background:none; border:none; color:#fff; min-width:38px; min-height:38px; }
#yha2Root .mv-hd-center{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; cursor:pointer; white-space:nowrap; }
#yha2Root .mv-hd-drop{ position:absolute; right:12px; top:100%; margin-top:6px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 14px 36px rgba(10,20,40,.18); overflow:hidden; min-width:150px; z-index:95; }
#yha2Root .mv-hd-drop button{ display:block; width:100%; text-align:left; background:none; border:none; padding:.8rem 1rem;
  font-size:13.5px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
#yha2Root .mv-hd-drop button:last-child{ border-bottom:none; }
#yha2Root .mv-hd-drop .su{ color:var(--blue); }

/* progress (always visible: flex sibling above the scroller) */
/* the steps header is the top bar on every step now (no brand header off home),
   so it clears the notch itself */
#yha2Root .mv-prog{ z-index:61; display:flex; gap:2px; align-items:center; overflow-x:auto; scrollbar-width:none;
  background:#fff; border-bottom:1px solid var(--line);
  padding:calc(.65rem + env(safe-area-inset-top)) .9rem .65rem; flex:0 0 auto; }
#yha2Root .mv-prog::-webkit-scrollbar{ display:none; }
/* Vertical padding + min-height so these step controls are a real ~40px tap
   target (they were 20px tall — the only step-nav on phone, so mis-taps). */
#yha2Root .mv-prog-step{ display:flex; align-items:center; gap:.3rem; flex:0 0 auto; padding:.5rem .35rem; min-height:40px; background:none; border:none; }
/* 3 majors with flex connector bars fill the width — no auto-margin centring */
#yha2Root .mv-prog-n{ width:20px; height:20px; border-radius:50%; border:1.5px solid #c8cdd6; color:#8b93a1; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .mv-prog-l{ font-size:11px; font-weight:600; color:#8b93a1; white-space:nowrap; }
#yha2Root .mv-prog-step.on .mv-prog-n{ background:var(--navy); border-color:var(--navy); color:#fff; }
#yha2Root .mv-prog-step.on .mv-prog-l{ color:var(--ink); font-weight:700; }
#yha2Root .mv-prog-step.done .mv-prog-n{ background:#fff; border-color:var(--green); color:var(--green); }
#yha2Root .mv-prog-step.done .mv-prog-l{ color:var(--ink); }
/* connector track between majors; the navy fill shows substep progress */
#yha2Root .mv-prog-sep{ flex:1; min-width:18px; height:3px; border-radius:2px; background:#dde1e8; overflow:hidden; margin:0 6px; }
#yha2Root .mv-prog-sep i{ display:block; height:100%; border-radius:2px; background:var(--navy); transition:width .3s ease; }

/* step kicker */
#yha2Root .mv-kick{ display:inline-flex; align-items:center; gap:.4rem; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); white-space:nowrap; }
#yha2Root .mv-kick svg{ flex-shrink:0; }
#yha2Root .mv-h2{ font-size:26px; font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:.45rem 0 .4rem; }
/* build step: smaller so the title fits one line and the page sits higher */
#yha2Root .mv-h2.mvb-h2{ font-size:19px; line-height:1.18; margin:.1rem 0 .3rem; }
#yha2Root .mv-sub{ font-size:13.5px; color:var(--sub); line-height:1.5; margin:0; }

/* sticky bottom cta */
#yha2Root .mv-ctabar{ position:absolute; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line);
  padding:.7rem 1rem calc(.7rem + max(env(safe-area-inset-bottom), 8px)); }
#yha2Root .mv-cta{ width:100%; background:var(--navy); color:#fff; border:none; border-radius:12px; padding:1rem; font-size:15px;
  font-weight:700; display:flex; align-items:center; justify-content:center; gap:.5rem; }
#yha2Root .mv-cta:disabled{ opacity:.4; }
#yha2Root .mv-cta.ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
/* build CTA bar: items-selected summary + note on the left, shortened button right */
#yha2Root .mvb-ctarow{ display:flex; align-items:center; gap:.7rem; margin-top:.6rem; }
#yha2Root .mvb-ctasum{ flex:1; min-width:0; display:flex; align-items:center; gap:.55rem; }
#yha2Root .mvb-ctasum-ic{ width:34px; height:34px; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .mvb-ctasum-tx{ min-width:0; display:flex; flex-direction:column; line-height:1.2; }
#yha2Root .mvb-ctasum-tx b{ font-size:13px; }
#yha2Root .mvb-ctasum-tx small{ font-size:11px; color:var(--sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .mv-cta.mvb-cta-sm{ width:auto; flex-shrink:0; padding:.8rem 1.15rem; font-size:14px; border-radius:11px; }

/* tip / info boxes */
#yha2Root .mv-tip{ display:flex; gap:.6rem; background:var(--blue-bg); border-radius:12px; padding:.9rem 1rem; font-size:12.5px;
  color:#3a4a63; line-height:1.5; }
#yha2Root .mv-tip b{ color:var(--ink); }
#yha2Root .mv-tip svg{ flex-shrink:0; color:var(--blue); margin-top:3px; }

/* ── HOME ── */
#yha2Root .mvh-hero{ background:#fff; padding:1.4rem 1.2rem 0; }
#yha2Root .mvh-hero h1{ font-size:32px; font-weight:800; letter-spacing:-.015em; line-height:1.08; margin:.5rem 0 .5rem; }
#yha2Root .mvh-hero p{ font-size:14px; color:var(--sub); margin:0 0 1.1rem; }
#yha2Root .mvh-see{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; background:none; border:none;
  color:var(--ink); font-size:13px; font-weight:700; padding:.9rem 0 1.1rem; }
#yha2Root .mvh-photo{ position:relative; height:240px; overflow:hidden; }
/* crop higher up the image so the crew's faces are in shot */
#yha2Root .mvh-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
#yha2Root .mvh-trust{ background:var(--hdr); color:#fff; text-align:center; padding:1rem 1rem 1.2rem; }
#yha2Root .mvh-trust-k{ font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); }
#yha2Root .mvh-trust-row{ display:flex; justify-content:center; gap:1.4rem; margin-top:.7rem; flex-wrap:wrap; }
#yha2Root .mvh-trust-row span{ font-weight:800; font-size:15px; letter-spacing:.02em; opacity:.92; }
#yha2Root .mvh-sec{ background:#fff; padding:1.5rem 1.2rem; border-top:1px solid var(--line); }
#yha2Root .mvh-sec h3{ font-size:20px; font-weight:800; margin:0 0 .2rem; }
#yha2Root .mvh-sec .s{ font-size:13px; color:var(--sub); margin:0 0 1rem; }
#yha2Root .mvh-row{ display:flex; align-items:center; gap:.8rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
#yha2Root .mvh-row-ic{ width:40px; height:40px; border-radius:10px; background:var(--blue-bg); color:var(--blue); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .mvh-row b{ font-size:14px; display:block; }
#yha2Root .mvh-row p{ font-size:12px; color:var(--sub); margin:.15rem 0 0; line-height:1.4; }
#yha2Root .mvh-row .chev{ margin-left:auto; color:#aeb6c2; flex-shrink:0; }
#yha2Root .mvh-dark{ background:var(--hdr); color:#fff; padding:1.6rem 0 1.6rem 1.2rem; }
#yha2Root .mvh-dark h3{ font-size:20px; font-weight:800; margin:0 0 .2rem; }
#yha2Root .mvh-dark .s{ font-size:13px; color:rgba(255,255,255,.65); margin:0 0 1rem; padding-right:1.2rem; }
#yha2Root .mvh-rail{ display:flex; gap:.7rem; overflow-x:auto; padding-right:1.2rem; padding-bottom:.4rem; scrollbar-width:none; }
#yha2Root .mvh-rail::-webkit-scrollbar{ display:none; }
#yha2Root .mvh-team{ flex:0 0 150px; background:#fff; color:var(--ink); border-radius:12px; overflow:hidden;
  border:none; padding:0; text-align:left; }
#yha2Root .mvh-team img{ width:100%; height:192px; object-fit:cover; }
#yha2Root .mvh-team .b{ padding:.6rem .7rem .7rem; }
#yha2Root .mvh-team b{ font-size:12.5px; display:block; }
#yha2Root .mvh-team p{ font-size:10.5px; color:var(--sub); margin:.15rem 0 0; line-height:1.35; }
#yha2Root .mvh-quote{ background:var(--bg); padding:1.8rem 1.4rem; }
#yha2Root .mvh-quote .q{ font-family:Georgia,serif; font-size:40px; line-height:0; color:#c3c9d3; }
#yha2Root .mvh-quote p{ font-size:16px; font-weight:600; line-height:1.45; margin:.6rem 0 1rem; }
#yha2Root .mvh-quote .who{ display:flex; align-items:center; gap:.6rem; }
#yha2Root .mvh-quote .av{ width:36px; height:36px; border-radius:50%; background:#cdd3dd; overflow:hidden; flex-shrink:0; }
#yha2Root .mvh-quote .av img{ width:100%; height:100%; object-fit:cover; }
#yha2Root .mvh-quote .nm b{ font-size:12.5px; display:block; }
#yha2Root .mvh-quote .nm span{ font-size:11px; color:var(--sub); }
#yha2Root .mvh-foot{ background:var(--hdr); color:#fff; padding:1.6rem 1.2rem
  calc(2rem + env(safe-area-inset-bottom)); }
#yha2Root .mvh-foot h3{ font-size:20px; font-weight:800; margin:0 0 .2rem; }
#yha2Root .mvh-foot p{ font-size:13px; color:rgba(255,255,255,.65); margin:0 0 1rem; }
#yha2Root .mvh-foot .mv-cta{ background:#fff; color:var(--navy); }
#yha2Root .mvh-demo{ margin-top:1rem; text-decoration:none; }

/* ── NICHE ── */
#yha2Root .mvn-card{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; background:#fff; border:1.5px solid var(--line);
  border-radius:14px; padding:.7rem; margin-bottom:.7rem; color:var(--ink); }
#yha2Root .mvn-card.on{ border-color:var(--blue); background:var(--blue-bg); }
#yha2Root .mvn-img{ width:74px; height:93px; border-radius:9px; overflow:hidden; flex-shrink:0; background:#dde1e8; }
#yha2Root .mvn-img img{ width:100%; height:100%; object-fit:cover; }
#yha2Root .mvn-card b{ font-size:16px; display:block; }
#yha2Root .mvn-card p{ font-size:11.5px; color:var(--sub); margin:.15rem 0 0; line-height:1.35; }

/* ── NAME ── */
#yha2Root .mv-field label{ font-size:11px; font-weight:700; color:var(--sub); display:block; margin-bottom:.35rem; }
#yha2Root .mv-input-wrap{ position:relative; }
#yha2Root .mv-input{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:.85rem 2.4rem .85rem .9rem;
  font-family:inherit; font-size:15px; background:#fff; color:var(--ink); }
#yha2Root .mv-input:focus{ outline:none; border-color:var(--blue); }
#yha2Root .mv-input-ok{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%); color:var(--green); }
#yha2Root .mv-field .hint{ font-size:11px; color:#8b93a1; margin:.4rem 0 0; }
#yha2Root .mvm-prev{ position:relative; background:var(--hdr); border-radius:16px; margin-top:1.1rem; padding:1.2rem; text-align:center; overflow:hidden; }
/* badge now sits below the caption (static, centred), not the top-left corner */
#yha2Root .mvm-live{ display:inline-block; margin-top:.7rem; font-size:8.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#19d3a2; background:rgba(25,211,162,.12); padding:.25rem .5rem; border-radius:999px; }
/* preview image fills the card width (chest crop), bigger than before */
#yha2Root .mvm-stage{ position:relative; width:100%; height:240px; margin:0 0 .7rem; overflow:hidden; border-radius:12px; }
/* cropped to the top of the garment (chest area) for the live preview */
#yha2Root .mvm-stage img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
#yha2Root .mvm-cap{ font-size:11px; color:rgba(255,255,255,.6); margin:.4rem 0 0; line-height:1.5; }

/* on-garment brand overlay (fixed coordinates — see README) */
/* placeholder branding reads as raised stitching: 90% opacity, slightly off-white
   thread colour, and an emboss shadow (dark below + faint highlight above) rather
   than a flat glow, so it sits on the fabric instead of looking pasted on */
#yha2Root .mv-brandov{ position:absolute; left:63%; top:36%; transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; gap:.25em; color:#f0ece3; opacity:.85; pointer-events:none; text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.42), 0 -.5px 0 rgba(255,255,255,.18); }
/* on a very light garment (white/yellow/etc.) the off-white placeholder vanishes
   → flip the placeholder to navy with an inverted (light) emboss, same opacity */
#yha2Root .mv-brandov.on-light{ color:#0b1730; text-shadow:0 1px 1px rgba(255,255,255,.55), 0 -.5px 0 rgba(0,0,0,.12); }
#yha2Root .mv-brandov .t{ font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:1em; line-height:1.25; max-width:10em; }
#yha2Root .mv-brandov img.lg{ max-width:6.5em; max-height:3.5em; object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.32)); /* sits-on-fabric shadow */ }

/* ── BUILD ── */
#yha2Root .mvb-coll{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin:1rem 0; }
#yha2Root .mvb-coll-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
#yha2Root .mvb-coll-top b{ font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .mvb-coll-top button{ background:none; border:none; color:#8b93a1; font-size:15px; min-width:32px; min-height:32px; }
#yha2Root .mvb-bar{ height:7px; border-radius:999px; background:#edeff3; overflow:hidden; margin:.6rem 0 .45rem; }
#yha2Root .mvb-fill{ height:100%; border-radius:999px; background:var(--green); transition:width .55s cubic-bezier(.34,1.2,.64,1); }
/* health box: "Essential kit included · N items" line (replaces the in-box bar) */
#yha2Root .mvb-coll-ess{ display:flex; align-items:center; gap:.4rem; margin-top:.6rem; }
#yha2Root .mvb-ess-chk{ display:inline-flex; color:var(--green); flex-shrink:0; }
#yha2Root .mvb-ess-lbl{ font-size:12.5px; font-weight:700; color:var(--sub); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .mvb-coll-ess .r{ margin-left:auto; font-size:12.5px; font-weight:800; color:var(--green); white-space:nowrap; }
  /* catalogue outage (owner 2026-08-04). The row keeps its shape but drops the
     green tick and the item count — an outage must not read as success, which
     is exactly what it did before: empty sections under "Essential kit
     included". Amber, not red: nothing the customer chose is lost. */
  #yha2Root .mvb-coll-fail .mvb-ess-lbl{ color:#92400e; font-weight:800; }
  #yha2Root .mvb-failbar{ display:flex; align-items:flex-start; gap:.55rem; margin:.7rem 0 0;
    padding:.7rem .8rem; border-radius:10px; background:#fef3c7; border:1px solid #fcd34d;
    color:#78350f; font-size:12.5px; line-height:1.45; }
  #yha2Root .mvb-failbar svg{ flex:none; margin-top:1px; }
  #yha2Root .mvb-failbar b{ font-weight:800; }
  #yha2Root .mvb-failbar .mv-cta{ margin:0 0 0 auto; width:auto; flex:none; padding:.42rem .7rem; font-size:12px; }
  /* a disabled forward CTA must LOOK disabled, or the tap just seems broken */
  #yha2Root .mv-cta[disabled]{ opacity:.45; pointer-events:none; }
  /* persistent upload notes (owner 2026-08-04) — the phone twin of desktop's
     .dbr-lowres. A toast is the wrong container for a REFUSAL: it is gone in
     1.9s and the drop row then looks untouched. Amber = advisory (soft print),
     red = refused and nothing was applied. */
  #yha2Root .cz-upnote{ display:flex; align-items:flex-start; gap:.5rem; margin:0 0 .7rem;
    padding:.65rem .75rem; border-radius:10px; background:#fef3c7; border:1px solid #fcd34d;
    color:#78350f; font-size:12px; line-height:1.45; }
  #yha2Root .cz-upnote.bad{ background:#fee2e2; border-color:#fca5a5; color:#7f1d1d; }
  #yha2Root .cz-upnote svg{ flex:none; margin-top:1px; }
  #yha2Root .cz-upnote b{ font-weight:800; }
  /* sizes + size guide on the product screen (owner 2026-08-04) */
  #yha2Root .mvs-sizehd{ display:flex; align-items:center; justify-content:space-between; margin:1rem 0 .45rem; }
  #yha2Root .mvs-sizehd span{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--sub); }
  #yha2Root .mvs-guidebtn{ background:none; border:none; padding:.2rem .1rem; font:inherit; font-size:12.5px;
    font-weight:700; color:var(--blue); text-decoration:underline; cursor:pointer; }
  #yha2Root .mvs-sizes{ display:flex; flex-wrap:wrap; gap:.35rem; }
  #yha2Root .mvs-size{ min-width:38px; text-align:center; padding:.34rem .5rem; border:1px solid var(--line);
    border-radius:8px; font-size:12.5px; font-weight:700; color:var(--ink); background:#fff; }
  #yha2Root .mvs-guide{ margin-top:.6rem; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  #yha2Root .mvs-guide table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  #yha2Root .mvs-guide th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--sub); background:#f6f7f9; padding:.45rem .6rem; }
  #yha2Root .mvs-guide td{ padding:.42rem .6rem; border-top:1px solid var(--line); }
  #yha2Root .mvs-guide-note{ margin:0; padding:.5rem .6rem .6rem; font-size:11.5px; line-height:1.45; color:var(--sub); background:#f6f7f9; }
/* (i) → why-the-essential-kit note, its own box BELOW the health/colours row */
#yha2Root .mvb-whybox{ display:flex; align-items:flex-start; gap:.55rem; background:var(--blue-bg); color:#3a4a63; border-radius:12px; padding:.8rem .95rem; margin:-.4rem 0 .9rem; font-size:12.5px; line-height:1.45; }
#yha2Root .mvb-whybox svg{ color:var(--blue); flex-shrink:0; margin-top:1px; }
#yha2Root .mvb-whybox b{ color:var(--ink); }
#yha2Root .mvb-tabs{ display:flex; gap:1.2rem; border-bottom:1.5px solid var(--line); margin:0 0 .4rem;
  overflow-x:auto; scrollbar-width:none; }
#yha2Root .mvb-tabs::-webkit-scrollbar{ display:none; }
#yha2Root .mvb-tab{ background:none; border:none; padding:.6rem 0; font-size:13px; font-weight:600; color:#8b93a1;
  border-bottom:2px solid transparent; margin-bottom:-1.5px; white-space:nowrap; flex:0 0 auto; }
#yha2Root .mvb-tab.on{ color:var(--ink); font-weight:800; border-bottom-color:var(--navy); }
#yha2Root .mvb-sech{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0 .4rem; }
#yha2Root .mvb-sech span{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8b93a1; white-space:nowrap; }
#yha2Root .mvb-row{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; background:#fff; border:1.5px solid var(--line);
  border-radius:13px; padding:.6rem .7rem; margin-bottom:.6rem; cursor:pointer; }
/* build product cards ~50% taller (56×62 → 84×93) */
#yha2Root .mvb-thumb{ position:relative; width:84px; height:112px; /* 3:4 (owner 2026-08-21: every garment image) */ border-radius:9px; overflow:hidden; background:#eef0f3; flex-shrink:0; }
#yha2Root .mvb-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mvb-row-info{ flex:1; min-width:0; }
#yha2Root .mvb-row-info b{ font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* .d (the brand line) is no longer emitted by rowHTML on the phone build page
   (owner 25 Aug) — the rule stays for any residual markup but renders nothing new */
#yha2Root .mvb-row-info .d{ font-size:11px; color:var(--sub); display:block; margin:.1rem 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#yha2Root .mvb-row-info .p{ font-size:12.5px; font-weight:700; }
/* kept-colour swatches under the price (restrict mode only) */
#yha2Root .mvb-row-sw{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; }
#yha2Root .mvb-row-sw .sw{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.14); flex-shrink:0; }
#yha2Root .mvb-row-sw .sw-more{ font-size:10px; font-weight:700; color:var(--sub); }
#yha2Root .mvb-on{ width:22px; height:22px; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .mvb-add{ flex-shrink:0; border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:9px;
  padding:.45rem .7rem; font-size:12px; font-weight:700; min-height:36px; }
#yha2Root .mvb-chev{ color:#aeb6c2; flex-shrink:0; }
#yha2Root .mv-stickyhealth{ display:flex; align-items:center; gap:.6rem; padding:0 .2rem .55rem; }
#yha2Root .mv-stickyhealth .mvb-bar{ flex:1; margin:0; }
#yha2Root .mv-stickyhealth span{ font-size:11px; font-weight:700; color:var(--sub); white-space:nowrap; }

/* ── BUILD: collection overview panel (above the health card) ── */
#yha2Root .mvb-overview{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.85rem .9rem .9rem; margin:1rem 0; }
#yha2Root .mvb-ov-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
#yha2Root .mvb-ov-lbl{ display:flex; align-items:center; gap:.4rem; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
#yha2Root .mvb-ov-chk{ display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--green); color:#fff; flex-shrink:0; }
#yha2Root .mvb-ov-all{ background:none; border:1.5px solid var(--line); border-radius:999px; font-family:inherit; font-size:11px; font-weight:700; color:var(--ink); padding:.35rem .7rem; white-space:nowrap; cursor:pointer; }
#yha2Root .mvb-ov-rail{ display:flex; gap:.6rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem; }
#yha2Root .mvb-ov-rail::-webkit-scrollbar{ display:none; }
#yha2Root .mvb-ov-item{ flex:0 0 auto; width:60px; background:none; border:none; padding:0; text-align:center; cursor:pointer; }
#yha2Root .mvb-ov-img{ position:relative; display:block; width:60px; height:62px; border-radius:9px; overflow:hidden; background:#eef0f3; }
#yha2Root .mvb-ov-img img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mvb-ov-nm{ display:block; font-size:9.5px; font-weight:600; color:var(--sub); margin-top:.3rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .mvb-ov-msg{ display:flex; align-items:center; gap:.5rem; background:var(--green-bg); border-radius:10px; padding:.55rem .7rem; margin-top:.75rem; font-size:11.5px; color:#1c6b43; line-height:1.4; }
#yha2Root .mvb-ov-msg b{ font-weight:700; }

/* ── BUILD: recommended-additions tint (vs white in-collection rows) ── */
#yha2Root .mvb-row-rec{ background:var(--blue-bg); border-color:#d8e3f7; }
#yha2Root .mvb-row-rec .mvb-thumb{ background:#e3ebf9; }

/* ── BUILD: swipe-to-swap (right) / remove (left) ── */
#yha2Root .mvb-rowwrap{ margin-bottom:.6rem; }
#yha2Root .mvb-swipe{ position:relative; touch-action:pan-y; }
#yha2Root .mvb-swipe-bg{ position:absolute; inset:0; border-radius:13px; display:flex; align-items:center; justify-content:space-between; padding:0 1.1rem; }
#yha2Root .mvb-swipe-act{ font-size:13px; font-weight:800; letter-spacing:.02em; }
#yha2Root .mvb-swipe-act.swap{ color:#17a34a; }
#yha2Root .mvb-swipe-act.remove{ color:#c2381f; }
#yha2Root .mvb-swipe-fg{ position:relative; z-index:1; }
#yha2Root .mvb-swipe-fg .mvb-row{ margin-bottom:0; }
/* add-only (recommended/category rows) + swap-page cards swipe right = green action */
#yha2Root .mvb-swipe-act.add, #yha2Root .mvb-swipe-act.swapin{ color:#17a34a; }
/* swap-page card swipe wrapper: keep the card's side margins on the wrapper so
   the revealed background lines up with the card's rounded edges */
#yha2Root .mvw-swipewrap{ margin:0 1.2rem .7rem; }
#yha2Root .mvw-swipewrap .mvb-swipe-bg{ border-radius:13px; }

/* ── BUILD: control team colours ── */
#yha2Root .mvb-collbar{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:1rem 0 .9rem; }
/* build top row: health box (2/3) + Control-team-colours button (1/3) side by side */
#yha2Root .mvb-toprow{ display:flex; align-items:stretch; gap:.6rem; margin:1rem 0; }
#yha2Root .mvb-toprow .mvb-coll{ flex:2.7 1 0; margin:0; min-width:0; }
#yha2Root .mvb-toprow .mvb-collbar-btn{ flex:1 1 0; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.3rem; margin:0; min-width:0; padding:.55rem .4rem; }
#yha2Root .mvb-toprow .mvb-collbar-btn .ic{ font-size:18px; }
#yha2Root .mvb-toprow .mvb-collbar-btn b{ font-size:11px; white-space:nowrap; }
#yha2Root .mvb-collbar-t{ font-size:18px; font-weight:800; margin:0; }
#yha2Root .mvb-collbar-s{ font-size:12px; color:var(--sub); margin:.15rem 0 0; }
#yha2Root .mvb-collbar-btn{ display:flex; align-items:center; gap:.55rem; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:.6rem .8rem; flex-shrink:0; cursor:pointer; }
#yha2Root .mvb-collbar-btn .ic{ font-size:17px; }
#yha2Root .mvb-collbar-btn b{ display:block; font-size:12.5px; }
#yha2Root .mvb-collbar-btn small{ display:block; font-size:10.5px; color:var(--sub); }
#yha2Root .mvb-clr{ margin:-.1rem 0 .2rem; }
#yha2Root .mvb-clr-bar{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .2rem 0; }
#yha2Root .mvb-clr-status{ display:flex; align-items:center; gap:.35rem; font-size:11.5px; font-weight:600; color:var(--sub); }
#yha2Root .mvb-clr-tick{ display:inline-flex; width:15px; height:15px; border-radius:50%; background:var(--green); color:#fff; align-items:center; justify-content:center; }
#yha2Root .mvb-clr-toggle{ background:none; border:none; color:var(--blue); font-size:12px; font-weight:700; display:flex; align-items:center; gap:.3rem; cursor:pointer; touch-action:manipulation; }
#yha2Root .mvb-clr-toggle .chev{ transition:transform .2s; display:inline-block; }
#yha2Root .mvb-clr-toggle .chev.up{ transform:rotate(180deg); }
#yha2Root .mvb-clr-panel{ background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:.9rem; margin-top:.6rem; }
#yha2Root .mvb-clr-h{ font-size:14px; font-weight:800; }
#yha2Root .mvb-clr-sub{ font-size:11.5px; color:var(--sub); margin:.15rem 0 .7rem; }
#yha2Root .mvb-clr-row{ display:flex; align-items:center; gap:.7rem; width:100%; background:none; border:none; padding:.5rem 0; cursor:pointer; touch-action:manipulation; }
#yha2Root .mvb-clr-chk{ width:22px; height:22px; border-radius:6px; border:1.5px solid #c8cdd6; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
#yha2Root .mvb-clr-row.on .mvb-clr-chk{ background:var(--blue); border-color:var(--blue); }
#yha2Root .mvb-clr-sw{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.12); flex-shrink:0; }
#yha2Root .mvb-clr-nm{ font-size:13.5px; font-weight:600; }
#yha2Root .mvb-clr-note{ display:flex; align-items:flex-start; gap:.4rem; background:var(--blue-bg); border-radius:10px; padding:.6rem .7rem; margin-top:.7rem; font-size:11px; color:#3a4a63; line-height:1.4; }
#yha2Root .mvb-clr-note svg{ color:var(--blue); flex-shrink:0; margin-top:1px; }
#yha2Root .mvb-clropt{ display:flex; align-items:flex-start; gap:.7rem; width:100%; text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:1rem; margin-bottom:.7rem; cursor:pointer; color:var(--ink); }
#yha2Root .mvb-clropt.on{ border-color:var(--blue); background:var(--blue-bg); }
#yha2Root .mvb-clropt-dot{ width:20px; height:20px; border-radius:50%; border:2px solid #c8cdd6; flex-shrink:0; margin-top:1px; position:relative; }
#yha2Root .mvb-clropt.on .mvb-clropt-dot{ border-color:var(--blue); }
#yha2Root .mvb-clropt.on .mvb-clropt-dot::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--blue); }
#yha2Root .mvb-clropt b{ display:block; font-size:14px; }
#yha2Root .mvb-clropt small{ display:block; font-size:11.5px; color:var(--sub); margin-top:.15rem; line-height:1.4; }
/* "Restrict colours" greyed out when no product in the collection has >1 colour */
#yha2Root .mvb-clropt.disabled{ opacity:.5; cursor:default; }
#yha2Root .mvb-clropt.disabled .mvb-clropt-dot{ border-color:#c8cdd6; }
/* Done → flash a highlight over the first per-item restrict-colours control */
@keyframes yha2clrflash{ 0%{ box-shadow:0 0 0 0 rgba(47,111,237,0); } 25%{ box-shadow:0 0 0 4px rgba(47,111,237,.4); } 100%{ box-shadow:0 0 0 0 rgba(47,111,237,0); } }
/* raise above neighbouring rows + leave scroll headroom so the ring isn't clipped */
#yha2Root .mvb-clr-flash{ animation:yha2clrflash 1.4s ease-out; border-radius:12px; position:relative; z-index:3; scroll-margin:16px; }

/* ── SPOTLIGHT ── */
#yha2Root .mvs-hd{ z-index:62; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--line); padding:12px 12px 10px;
  padding-top:calc(12px + env(safe-area-inset-top)); flex:0 0 auto; }
#yha2Root .mvs-hd b{ font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .mvs-hd button{ background:none; border:none; color:var(--ink); width:38px; height:38px; flex-shrink:0; }
#yha2Root .mvs-img{ position:relative; background:#eef0f3; }
#yha2Root .mvs-img img{ width:100%; height:330px; object-fit:cover; object-position:center 12%; }
#yha2Root .mvs-dots{ display:flex; justify-content:center; gap:2px; padding:.25rem 0; }
#yha2Root .mvs-dot{ width:22px; height:22px; border:none; padding:0; background:transparent;
  display:flex; align-items:center; justify-content:center; }
#yha2Root .mvs-dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:#c8cdd6; }
#yha2Root .mvs-dot.on::before{ background:var(--navy); }
#yha2Root .mvs-body{ padding:0 1.2rem 1rem; }
#yha2Root .mvs-titlerow{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
#yha2Root .mvs-titlerow h2{ font-size:22px; font-weight:800; margin:0; }
#yha2Root .mvs-ess{ font-size:10.5px; font-weight:700; color:var(--green); background:var(--green-bg); padding:.3rem .6rem; border-radius:999px; flex-shrink:0; }
#yha2Root .mvs-sub{ font-size:13px; color:var(--sub); margin:.2rem 0 .4rem; }
#yha2Root .mvs-price{ font-size:19px; font-weight:800; margin:0 0 .8rem; }
#yha2Root .mvs-sw{ display:flex; gap:.6rem; align-items:center; margin-bottom:.3rem; flex-wrap:wrap; }
#yha2Root .mvs-sw span{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
#yha2Root .mvs-sw span.on{ border-color:var(--blue); box-shadow:inset 0 0 0 2.5px #fff; }
#yha2Root .mvs-swlbl{ font-size:11.5px; color:var(--sub); margin:0 0 .9rem; }
#yha2Root .mvs-feats{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
#yha2Root .mvs-feats li{ display:flex; align-items:center; gap:.5rem; font-size:13px; }
#yha2Root .mvs-feats svg{ color:var(--green); flex-shrink:0; }
#yha2Root .mvs-bar{ position:absolute; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line);
  padding:.7rem 1rem calc(.7rem + max(env(safe-area-inset-bottom), 8px)); display:flex; flex-direction:column; gap:.55rem; }
#yha2Root .mvs-keep{ width:100%; background:var(--navy); color:#fff; border:none; border-radius:12px; padding:.95rem; font-size:14.5px;
  font-weight:700; display:flex; align-items:center; justify-content:center; gap:.5rem; }
#yha2Root .mvs-keep .ok{ width:20px; height:20px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; }
#yha2Root .mvs-keep.out{ background:#fff; color:var(--ink); border:1.5px solid var(--navy); }
#yha2Root .mvs-swap{ width:100%; background:#fff; color:var(--ink); border:1.5px solid var(--line); border-radius:12px; padding:.9rem;
  font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:.5rem; }

/* ── SWAP ── */
#yha2Root .mvw-cur{ display:flex; gap:.8rem; align-items:center; padding:1rem 1.2rem; background:#fff; border-bottom:1px solid var(--line); }
#yha2Root .mvw-cur .mvb-thumb{ width:64px; height:85px; }   /* 3:4 */
#yha2Root .mvw-cur b{ font-size:15px; display:block; }
#yha2Root .mvw-cur .p{ font-size:13px; font-weight:700; margin:.15rem 0; }
#yha2Root .mvw-cur .sel{ font-size:12px; font-weight:700; color:var(--green); }
#yha2Root .mvw-lbl{ font-size:13.5px; font-weight:800; padding:1rem 1.2rem .5rem; }
/* swap filter tabs reuse the build .mvb-tabs underline style; this wrapper gives
   them the same 1.2rem horizontal inset the build page gets from its scroll padding */
#yha2Root .mvw-tabswrap{ padding:0 1.2rem; }
#yha2Root .mvw-sel{ align-self:center; border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:.55rem 1.1rem;
  font-size:13px; font-weight:700; color:var(--ink); flex-shrink:0; min-height:40px; }
#yha2Root .mvw-note{ display:flex; gap:.5rem; align-items:flex-start; margin:.4rem 1.2rem 1rem; background:var(--blue-bg);
  border-radius:11px; padding:.8rem .9rem; font-size:12px; color:#3a4a63; line-height:1.45; }

/* ── CUSTOMISE ── */
#yha2Root .mvc-canvas-card{ position:relative; background:#fff; border:1.5px solid var(--line); border-radius:16px; margin:0 1.2rem; overflow:hidden; }
#yha2Root .mvc-seg{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:3px;
  background:#f1f3f6; border-radius:999px; padding:3px; }
#yha2Root .mvc-seg button{ border:none; background:none; font-size:12px; font-weight:700; color:var(--sub); padding:.4rem .9rem; border-radius:999px; }
#yha2Root .mvc-seg button.on{ background:var(--navy); color:#fff; }
#yha2Root .mvc-stage{ position:relative; height:340px; }
/* less aggressive crop so more of the garment shows */
#yha2Root .mvc-stage img.g, #yha2Root .cz-stage>img{ width:100%; height:100%; object-fit:cover; object-position:center 4%; }
#yha2Root .mvc-pname{ text-align:center; font-size:12.5px; font-weight:700; padding:.6rem 0 .8rem; border-top:1px solid var(--line); }
#yha2Root .mvc-ov{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
#yha2Root .mvc-sponsor{ background:rgba(255,255,255,.9); color:var(--ink); font-size:8px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:.3rem .45rem; border-radius:5px; border:1.5px dashed var(--blue); }
#yha2Root .mvc-pers{ color:#fff; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1.5px dashed rgba(255,255,255,.8); padding-bottom:2px; text-shadow:0 0 3px rgba(0,0,0,.5); white-space:nowrap; }
#yha2Root .mvc-rail{ display:flex; gap:.55rem; overflow-x:auto; scrollbar-width:none; padding:.8rem 1.2rem; }
#yha2Root .mvc-rail::-webkit-scrollbar{ display:none; }
#yha2Root .mvc-thumb{ flex:0 0 auto; width:52px; height:60px; border-radius:10px; overflow:hidden; border:2px solid var(--line); background:#eef0f3; padding:0; }
#yha2Root .mvc-thumb.on{ border-color:var(--navy); }
#yha2Root .mvc-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mvc-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:0 1.2rem; }
#yha2Root .mvc-act{ background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:.75rem .6rem; text-align:left; }
#yha2Root .mvc-act .st{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:#f1f3f6; color:var(--sub); font-size:12px; font-weight:800; margin-bottom:.45rem; }
#yha2Root .mvc-act .st.ok{ background:var(--green-bg); color:var(--green); }
#yha2Root .mvc-act b{ display:block; font-size:12.5px; }
#yha2Root .mvc-act .d{ display:block; font-size:10px; color:var(--sub); margin-top:.1rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .mvc-sprow{ border:1.5px solid var(--line); border-radius:12px; padding:.8rem .9rem; margin-bottom:.7rem; }
#yha2Root .mvc-sprow b{ font-size:13.5px; }
#yha2Root .mvc-remove{ background:none; border:none; color:#b8472f; font-size:12px; font-weight:700; padding:0; }
#yha2Root .mz-placechips{ display:flex; flex-wrap:wrap; gap:.4rem; }
#yha2Root .mz-pchip{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:.5rem .85rem; font-size:12.5px; font-weight:600; color:var(--sub); }
#yha2Root .mz-pchip.on{ background:#11233d; border-color:#11233d; color:#fff; }
#yha2Root .mz-pchip:disabled{ opacity:.35; }

/* ── REVIEW ── */
/* one large product per row — scroll down to see the whole collection */
#yha2Root .mvr-grid{ display:grid; grid-template-columns:1fr; gap:1rem; margin:1.1rem 0 1.2rem; }
#yha2Root .mvr-card{ background:#fff; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; }
#yha2Root .mvr-img{ position:relative; aspect-ratio:1/1.05; background:#eef0f3; }
#yha2Root .mvr-img img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mvr-card b{ display:block; font-size:16px; padding:.7rem .9rem 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#yha2Root .mvr-card > span{ display:block; font-size:14px; font-weight:700; color:var(--sub); padding:.15rem .9rem .8rem; }
#yha2Root .mvr-method{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; background:#fff;
  border:1.5px solid var(--line); border-radius:8px; padding:1rem; margin-bottom:.7rem; color:var(--ink); }
#yha2Root .mvr-method.primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
/* sticky CTA bar at the foot of the review page (both methods, compact) */
#yha2Root .mvr-methods{ display:flex; flex-direction:column; gap:.5rem; box-shadow:0 -8px 24px rgba(8,12,18,.06); }
#yha2Root .mvr-methods .mvr-method{ margin:0; padding:.7rem .9rem; }
#yha2Root .mvr-methods .mvr-method .ic{ width:34px; height:34px; }
#yha2Root .mvr-method .ic{ width:40px; height:40px; border-radius:10px; background:var(--blue-bg); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .mvr-method.primary .ic{ background:rgba(255,255,255,.14); color:#fff; }
#yha2Root .mvr-method .bd{ flex:1; min-width:0; }
#yha2Root .mvr-method .bd b{ display:block; font-size:14.5px; }
#yha2Root .mvr-method .bd small{ display:block; font-size:11.5px; opacity:.7; margin-top:.1rem; }

/* ── bottom sheet ── */
#yha2Root .sheet-root{ position:absolute; inset:0; z-index:200; visibility:hidden; }
#yha2Root .sheet-root.open{ visibility:visible; }
#yha2Root .sheet-scrim{ position:absolute; inset:0; background:rgba(8,12,18,.5); opacity:0; transition:opacity .3s; }
#yha2Root .sheet-root.open .sheet-scrim{ opacity:1; }
/* fidelity: the prototype's sheet is the v1 component — serif titles,
   22px radius, warm sand grip, circled close button, .34s cubic-bezier */
#yha2Root .sheet{ position:absolute; left:0; right:0; bottom:0; max-height:86%; background:#fff;
  border-radius:22px 22px 0 0; display:flex; flex-direction:column; transform:translateY(102%);
  transition:transform .34s cubic-bezier(.4,0,.2,1); }
#yha2Root .sheet-root.open .sheet{ transform:none; }
#yha2Root .sheet.tall{ max-height:92%; height:92%; }
#yha2Root .sheet-grip{ width:40px; height:5px; border-radius:5px; background:#d8d2c4; margin:.7rem auto .2rem; flex-shrink:0; }
#yha2Root .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:.4rem 1.2rem .8rem; }
#yha2Root .sheet-head h3{ font-family:inherit; font-size:20px; font-weight:800; letter-spacing:-.01em; margin:0; }
#yha2Root .sheet-x{ background:none; border:1px solid var(--line); border-radius:50%; color:var(--ink);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .sheet-body{ overflow-y:auto; padding:0 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch; }
#yha2Root .sheet-body::-webkit-scrollbar{ display:none; }

/* ── order / store sheets (mo-) ── */
/* fidelity: the prototype's order sheet keeps the v1 warm tones */
#yha2Root .mo-item{ display:flex; gap:.7rem; padding:.8rem 0; border-bottom:1px solid #ece7da; align-items:center; }
/* product group: a style header + one card per colour variant + add-colour */
#yha2Root .mo-item-group{ padding:.85rem 0; border-bottom:1px solid #ece7da; }
#yha2Root .mo-item-group .mo-item-name{ margin-bottom:.5rem; }
#yha2Root .mo-cvcard{ display:flex; gap:.7rem; align-items:flex-start; padding:.6rem; margin-bottom:.5rem; background:#fafbfc; border:1.5px solid var(--line); border-radius:12px; }
#yha2Root .mo-cv-img{ width:60px; aspect-ratio:4/5; background:#eceae3; border-radius:8px; overflow:hidden; flex-shrink:0; }
#yha2Root .mo-cv-img img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mo-cv-main{ flex:1; min-width:0; }
#yha2Root .mo-cv-top{ display:flex; align-items:center; gap:.4rem; margin-bottom:.2rem; }
#yha2Root .mo-cv-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--sub); flex-shrink:0; }
#yha2Root .mo-colour{ flex:1; min-width:0; }
#yha2Root .mo-cvx{ flex:0 0 auto; width:26px; height:26px; border:none; background:none; color:#b8472f; font-size:13px; cursor:pointer; }
#yha2Root .mo-addcolour{ border:1.5px dashed #c8cdd6; background:#fff; color:var(--navy); border-radius:8px; padding:.5rem .8rem; font-size:12.5px; font-weight:700; width:100%; cursor:pointer; }
#yha2Root .mo-item-thumb{ width:52px; aspect-ratio:4/5; background:#eceae3; border-radius:7px; overflow:hidden; flex-shrink:0; }
#yha2Root .mo-item-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mo-item-name{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#yha2Root .mo-item-row{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
#yha2Root .mo-select{ flex:1; min-width:0; height:36px; border:1px solid var(--line); border-radius:8px; padding:0 .5rem; font-family:inherit; font-size:14px; background:#fff; }
#yha2Root .mo-szrow{ display:block; }
#yha2Root .mo-szrow + .mo-szrow{ border-top:1px solid #ece7da; margin-top:.4rem; }
/* order card: colour / size / quantity each a labelled, full-width, same-size
   field, stacked vertically so every dropdown lines up */
#yha2Root .mo-fld{ display:block; margin-top:.55rem; }
#yha2Root .mo-fld-l{ display:block; margin-bottom:.25rem; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--sub); }
#yha2Root .mo-colourwrap, #yha2Root .mo-qtywrap{ display:flex; align-items:center; gap:.4rem; }
#yha2Root .mo-cv-main .mo-select, #yha2Root .mo-cv-main .mo-colour, #yha2Root .mo-cv-main .mo-qty{ width:100%; height:40px; color:var(--ink); flex:none; }
#yha2Root .mo-colourwrap .mo-colour, #yha2Root .mo-qtywrap .mo-qty{ flex:1; width:auto; min-width:0; }
/* selector text BLACK; dropdown chevron BLUE + consistent (custom SVG so it
   recolours the same across browsers, where native arrows can't) */
#yha2Root .mo-cv-main select{ -webkit-appearance:none; appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%232f6fed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .6rem center;
  background-size:12px; padding-right:1.7rem; }
#yha2Root .mo-qtywrap .mo-qtylist{ height:40px; color:var(--blue); }
/* single colour available → static, non-clickable label (no chevron) */
#yha2Root .mo-static{ display:flex; align-items:center; height:40px; padding:0 .7rem; border:1px solid var(--line); border-radius:8px; background:#f6f7f9; color:var(--ink); font-size:14px; font-weight:600; }
/* native qty dropdown (0–20 + Custom) or keypad input in custom mode */
#yha2Root .mo-qty{ flex:0 0 auto; width:78px; height:36px; border:1px solid var(--line); border-radius:8px;
  padding:0 .4rem; font-family:inherit; font-size:15px; font-weight:600; background:#fff; color:var(--ink); }
#yha2Root .mo-qtynum{ text-align:center; }
/* revert-to-dropdown control, shown only in custom-qty (keypad) mode */
#yha2Root .mo-qtylist{ flex:0 0 auto; width:30px; height:36px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--navy); font-size:16px; line-height:1; font-weight:700; }
#yha2Root .mo-szx{ flex:0 0 auto; width:30px; height:30px; border:none; background:none; color:#b8472f; font-size:14px; }
#yha2Root .mo-szx-sp{ flex:0 0 auto; width:30px; }
#yha2Root .mo-addsize{ margin-top:.55rem; border:1.5px dashed #c8cdd6; background:#fff; color:var(--navy); border-radius:8px; padding:.5rem .8rem; font-size:12.5px; font-weight:700; width:100%; }
#yha2Root .mo-fieldhd{ margin-top:1.2rem; font-size:13px; font-weight:800; color:var(--ink); }
#yha2Root .mo-fields{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.6rem; }
#yha2Root .mo-fields label{ display:flex; flex-direction:column; gap:.3rem; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8b93a1; }
#yha2Root .mo-fields .full{ grid-column:1/-1; }
#yha2Root .mo-fields .opt{ font-weight:600; text-transform:none; letter-spacing:0; color:#aeb6c2; }
#yha2Root .mo-fields input{ border:1px solid var(--line); border-radius:9px; padding:.7rem .75rem; font-family:inherit; font-size:15px; }
#yha2Root .mo-totals{ margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); }
#yha2Root .mo-totals .row{ display:flex; justify-content:space-between; font-size:13px; color:var(--sub); padding:.2rem 0; }
#yha2Root .mo-totals .grand{ font-family:inherit; font-size:18px; font-weight:800; color:#11233d; }
#yha2Root .mo-place{ width:100%; background:#11233d; color:#fff; border:none; border-radius:12px; padding:1rem; font-size:15px; font-weight:700; margin-top:1rem; }
#yha2Root .mo-place:disabled{ opacity:.4; }
/* create-crew-store reassurance: 3 fact chips, ✓ list + lock note */
#yha2Root .mv-storefacts{ display:flex; gap:.5rem; background:#f4f6f8; border-radius:12px; padding:.8rem .55rem; margin-bottom:1.1rem; }
#yha2Root .mv-sf{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.12rem; }
#yha2Root .mv-sf-ic{ width:36px; height:36px; border-radius:50%; background:#fff; color:var(--hdr); display:flex; align-items:center; justify-content:center; margin-bottom:.18rem; }
#yha2Root .mv-sf-ic.mv-sf-a{ font-size:17px; font-weight:800; }
#yha2Root .mv-sf b{ font-size:12px; overflow-wrap:anywhere; }
#yha2Root .mv-sf small{ font-size:10.5px; color:var(--sub); }
#yha2Root .mv-reassure{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
#yha2Root .mv-reassure li{ display:flex; align-items:center; gap:.5rem; font-size:12.5px; font-weight:600; color:var(--ink); }
#yha2Root .mv-reassure li svg{ color:var(--green); flex-shrink:0; }
#yha2Root .mv-storenote{ display:flex; align-items:flex-start; gap:.4rem; margin-top:.8rem; font-size:11px; color:#8b93a1; line-height:1.45; }
#yha2Root .mv-storenote svg{ flex-shrink:0; margin-top:1px; }
#yha2Root .mo-success{ text-align:center; padding:2rem 1rem; }
#yha2Root .mo-success-ic{ width:64px; height:64px; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
#yha2Root .mo-success h3{ font-size:20px; margin:0 0 .5rem; font-weight:800; }

/* ── Step 4 Customise (cz-*): ported from design-ref mobile-v2.css, scoped ── */
#yha2Root .cz-uploads{ padding:0 1.2rem; display:flex; flex-direction:column; gap:.6rem; }
#yha2Root .cz-uprow{ display:flex; align-items:center; gap:.7rem; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:.75rem .8rem; text-align:left; }
/* personalisation row — blue tint so it reads as distinct from a logo upload */
#yha2Root .cz-uprow-pers{ background:var(--blue-bg); border-color:#d8e3f7; }
#yha2Root .cz-uprow-pers .cz-up-ic{ background:#e3ebf9; }
/* customer-name preview on the back of the garment */
#yha2Root .cz-pers-chip{ position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); z-index:3;
  font-size:13px; font-weight:800; letter-spacing:.08em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45);
  white-space:nowrap; pointer-events:none; font-family:'DM Sans',system-ui,sans-serif; }

/* ── view-change chevrons + left/right click zones on swipeable stages ── */
#yha2Root .mvs-img, #yha2Root .mvc-stage, #yha2Root .mvr-img{ position:relative; }
#yha2Root .mvc-navchev{ position:absolute; top:0; bottom:0; width:42%; display:flex; align-items:center; z-index:5;
  background:none; border:none; padding:0 8px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#yha2Root .mvc-navchev.left{ left:0; justify-content:flex-start; }
#yha2Root .mvc-navchev.right{ right:0; justify-content:flex-end; }
/* no circle: the chevron sits directly on the garment, darkened a touch with
   a white drop-shadow halo so it stays legible over both light and dark images */
#yha2Root .mvc-navchev .chvi{ width:28px; height:28px; color:#06101f;
  display:flex; align-items:center; justify-content:center; opacity:.92;
  filter:drop-shadow(0 1px 1.5px rgba(255,255,255,.9)) drop-shadow(0 0 1px rgba(255,255,255,.7)); }
#yha2Root .mvc-navchev .chvi svg{ width:18px; height:18px; }
#yha2Root .mvc-navchev.left .chvi svg{ transform:rotate(180deg); }
#yha2Root .mvc-navchev.sm{ width:46%; padding:0 4px; }
#yha2Root .mvc-navchev.sm .chvi{ width:22px; height:22px; opacity:.9; }
#yha2Root .mvc-navchev.sm .chvi svg{ width:15px; height:15px; }
#yha2Root .mvc-navchev.sm .chvi svg{ width:13px; height:13px; }
#yha2Root .cz-up-ic{ width:34px; height:34px; border-radius:9px; background:var(--blue-bg); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .cz-up-tx{ flex:1; min-width:0; }
#yha2Root .cz-up-tx b{ display:block; font-size:13.5px; }
#yha2Root .cz-up-tx span{ font-size:11px; color:var(--sub); }
#yha2Root .cz-up-prev{ display:flex; gap:.4rem; align-items:center; flex-shrink:0; }
#yha2Root .cz-up-prev em{ font-style:normal; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); background:#f1f3f6; padding:.2rem .35rem; border-radius:4px; max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#yha2Root .cz-up-st{ width:22px; height:22px; border-radius:50%; background:#f1f3f6; color:var(--sub); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; }
#yha2Root .cz-up-st.ok{ background:var(--green-bg); color:var(--green); }
#yha2Root .cz-uprow .mvb-chev, #yha2Root .cz-uprow svg:last-child{ color:#aeb6c2; flex-shrink:0; }
#yha2Root .cz-reccard{ margin:1.1rem 1.2rem 0; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:.9rem; }
#yha2Root .cz-rec-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; }
#yha2Root .cz-rec-lbl{ display:inline-flex; align-items:center; gap:.35rem; font-size:12px; font-weight:800; color:var(--blue); }
#yha2Root .cz-rec-badge{ font-size:9.5px; font-weight:700; color:var(--green); background:var(--green-bg); padding:.25rem .5rem; border-radius:999px; white-space:nowrap; }
#yha2Root .cz-stage-wrap{ display:flex; align-items:center; gap:.4rem; }
#yha2Root .cz-stage{ flex:1; height:380px; border-radius:12px; overflow:hidden; }
#yha2Root .cz-arrow{ flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; }
#yha2Root .cz-dots{ display:flex; justify-content:center; gap:5px; padding:.6rem 0 .2rem; }
#yha2Root .cz-dots span{ width:6px; height:6px; border-radius:50%; background:#c8cdd6; }
#yha2Root .cz-dots span.on{ background:var(--navy); }
#yha2Root .cz-rec-note{ font-size:12.5px; color:var(--sub); text-align:center; margin:.2rem 0 .7rem; }
#yha2Root .cz-summ{ display:flex; border-top:1px solid var(--line); padding-top:.7rem; }
#yha2Root .cz-summ-i{ flex:1; text-align:center; border-right:1px solid var(--line); padding:0 .3rem; }
#yha2Root .cz-summ-i:last-child{ border-right:none; }
#yha2Root .cz-summ-i b{ display:block; font-size:11px; font-weight:700; }
#yha2Root .cz-summ-i span{ font-size:10.5px; color:var(--sub); }
/* on-garment logo chips */
#yha2Root .cz-logo{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; text-align:center;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-shadow:0 0 3px rgba(0,0,0,.5); opacity:.85; }
#yha2Root .cz-l-primary{ font-size:7px; }
#yha2Root .cz-l-crew{ font-size:5.5px; color:#cdd6e2; }
#yha2Root .cz-l-sponsor{ font-size:6px; letter-spacing:.04em; }
#yha2Root .cz-logo.big{ font-size:13px; letter-spacing:.14em; }
#yha2Root .cz-h3{ font-size:16px; font-weight:800; margin:0 0 .2rem; }
#yha2Root .cz-altrail{ display:flex; gap:.7rem; overflow-x:auto; scrollbar-width:none; padding:.8rem 1.2rem; }
#yha2Root .cz-altrail::-webkit-scrollbar{ display:none; }
#yha2Root .cz-alt{ position:relative; flex:0 0 160px; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:.7rem; text-align:left; }
#yha2Root .cz-alt.on{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
#yha2Root .cz-alt-k{ font-size:10px; font-weight:700; color:var(--sub); }
#yha2Root .cz-alt b{ display:block; font-size:13.5px; margin:.1rem 0 .5rem; }
#yha2Root .cz-alt-prev{ display:block; margin-bottom:.5rem; }
#yha2Root .cz-alt-note{ font-size:11px; color:var(--sub); display:block; }
#yha2Root .cz-alt-radio{ position:absolute; top:.7rem; right:.7rem; width:18px; height:18px; border-radius:50%; border:1.5px solid #c8cdd6; }
#yha2Root .cz-alt.on .cz-alt-radio{ border-color:var(--navy); background:radial-gradient(circle, var(--navy) 0 5px, #fff 6px); }
/* mini schematic */
#yha2Root .cz-mini{ display:flex; gap:.4rem; }
#yha2Root .cz-mini-g{ position:relative; flex:1; height:62px; border-radius:6px; background:#16243d; }
#yha2Root .cz-mini-dot{ position:absolute; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:2px; }
#yha2Root .cz-mini-dot.p{ background:#fff; }
#yha2Root .cz-mini-dot.c{ background:#7f8fa6; width:5px; height:5px; }
#yha2Root .cz-mini-dot.s{ background:#19d3a2; }
/* alternative-layout mockup (real garment + logos) */
#yha2Root .cz-altmock{ position:relative; display:block; height:128px; border-radius:8px; overflow:hidden; background:#eef0f3; }
#yha2Root .cz-altmock>img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .cz-altmock .cz-logo img{ max-width:22px; max-height:13px; }
#yha2Root .cz-altmock .cz-l-primary img{ max-width:18px; }
#yha2Root .cz-altmock .cz-logo.big img{ max-width:44px; max-height:34px; }
#yha2Root .cz-altmock .cz-logo{ font-size:4px; }
/* placements sub-step (redesigned) */
#yha2Root .cz-pinfo{ display:flex; align-items:center; gap:.5rem; margin:1rem 1.2rem .35rem; background:var(--blue-bg); color:#3a4a63; border-radius:11px; padding:.8rem .9rem; font-size:12.5px; line-height:1.4; }
#yha2Root .cz-pinfo svg{ color:var(--blue); flex-shrink:0; }
#yha2Root .cz-pgroups{ padding:0 1.2rem; display:flex; flex-direction:column; gap:.7rem; }
#yha2Root .cz-pgroup{ display:flex; align-items:center; gap:.7rem; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.75rem; }
#yha2Root .cz-plogo{ width:50px; height:50px; flex-shrink:0; border:1px solid var(--line); border-radius:9px; background:#f6f7f9; display:flex; align-items:center; justify-content:center; gap:1px; overflow:hidden; padding:4px; flex-direction:column; }
#yha2Root .cz-plogo img{ max-width:100%; max-height:40px; object-fit:contain; }
#yha2Root .cz-plogo.multi img{ max-height:12px; }
#yha2Root .cz-pg-tx{ flex:1; min-width:0; }
#yha2Root .cz-pg-tx b{ display:block; font-size:13.5px; line-height:1.2; }
#yha2Root .cz-pg-tx span{ font-size:11.5px; color:var(--sub); }
#yha2Root .cz-pg-place{ flex-shrink:0; display:flex; flex-direction:column; gap:.25rem; width:132px; }
#yha2Root .cz-pg-place label{ font-size:9.5px; color:var(--sub); }
/* taller + full-width so every group's dropdown lines up */
#yha2Root .cz-psel{ width:100%; min-height:44px; border:1.5px solid var(--line); border-radius:8px; padding:.5rem .55rem; font-family:inherit; font-size:13px; font-weight:600; background:#fff; color:var(--ink); }
#yha2Root .cz-plive{ padding:1.3rem 1.2rem 0; }
#yha2Root .cz-plive-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
#yha2Root .cz-plive-head h3{ font-size:16px; font-weight:800; margin:0; }
#yha2Root .cz-plive-head p{ font-size:12px; color:var(--sub); margin:.1rem 0 0; }
#yha2Root .cz-pbar{ position:absolute; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line); padding:.7rem 1rem calc(.7rem + 8px); display:flex; flex-direction:column; gap:.4rem; }
#yha2Root .cz-reset{ background:none; border:none; color:var(--blue); font-weight:800; font-size:13px; padding:.3rem; }
#yha2Root .cz-finetune-col{ flex-direction:column; align-items:flex-start; gap:.5rem; }
#yha2Root .cz-finetune-col span{ flex:none; }
#yha2Root .cz-finetune-col span svg{ vertical-align:middle; margin-right:.2rem; }
#yha2Root .cz-finetune{ display:flex; align-items:center; gap:.5rem; margin:.6rem 1.2rem 0; background:var(--blue-bg); border-radius:11px; padding:.8rem .9rem; font-size:12px; color:#3a4a63; }
#yha2Root .cz-finetune svg{ color:var(--blue); flex-shrink:0; }
#yha2Root .cz-finetune span{ flex:1; }
#yha2Root .cz-finetune button{ background:none; border:none; color:var(--blue); font-weight:800; font-size:12px; white-space:nowrap; }
#yha2Root .cz-finetune{ margin-bottom:.2rem; }

#yha2Root .cz-anum{ font-size:15px; font-weight:800; padding:1.2rem 1.2rem .6rem; }
/* the first step heading sits right under the intro box — tighten that gap only */
#yha2Root .cz-pinfo + .cz-anum{ padding-top:.25rem; }
#yha2Root .cz-atiles{ display:flex; gap:.6rem; overflow-x:auto; scrollbar-width:none; padding:0 1.2rem .4rem; }
#yha2Root .cz-atiles::-webkit-scrollbar{ display:none; }
#yha2Root .cz-atile{ flex:0 0 96px; width:96px; box-sizing:border-box; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:.6rem; text-align:center; cursor:pointer; }
#yha2Root .cz-atile.on{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }
#yha2Root .cz-atile-img{ position:relative; display:block; height:74px; border-radius:8px; overflow:hidden; background:#eef0f3; margin-bottom:.5rem; }
#yha2Root .cz-atile-img img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .cz-atile-tick{ position:absolute; top:5px; right:5px; width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
/* two-line product title, always black (never the accent blue) */
#yha2Root .cz-atile-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal;
  overflow:hidden; font-size:11.5px; font-weight:700; line-height:1.2; min-height:2.4em; color:var(--ink); }
#yha2Root .cz-atile-tag{ display:inline-block; font-size:10px; font-weight:700; color:var(--sub); background:#f1f3f6; border-radius:999px; padding:.2rem .55rem; margin-top:.35rem; }
#yha2Root .cz-atile-tag.edit{ color:var(--blue); background:var(--blue-bg); }
#yha2Root .cz-atile-tag.done{ color:var(--green); background:var(--green-bg); }
#yha2Root .cz-ahint{ font-size:11px; color:var(--sub); padding:.5rem 1.2rem 0; display:flex; align-items:center; gap:.3rem; white-space:nowrap; }
#yha2Root .cz-mini-tick{ display:inline-flex; width:14px; height:14px; border-radius:50%; background:var(--green); color:#fff; align-items:center; justify-content:center; }
#yha2Root .cz-aediting{ display:flex; gap:.6rem; align-items:flex-start; background:var(--blue-bg); border-radius:12px; margin:.9rem 1.2rem 0; padding:.85rem 1rem; font-size:12.5px; color:#3a4a63; line-height:1.45; }
#yha2Root .cz-aediting svg{ color:var(--blue); flex-shrink:0; margin-top:1px; }
#yha2Root .cz-aediting b{ color:var(--ink); }
#yha2Root .cz-swipehint{ text-align:center; font-size:12px; color:var(--sub); margin:.5rem 0 0; }
#yha2Root .cz-pgroup-col{ display:block; }
#yha2Root .cz-pg-main{ display:flex; align-items:center; gap:.7rem; }
#yha2Root .cz-spind-toggle{ display:inline-flex; align-items:center; gap:.4rem; width:auto; background:var(--blue-bg); border:none; border-radius:999px; margin-top:.7rem; padding:.5rem .85rem; color:var(--blue); font-size:12px; font-weight:700; cursor:pointer; }
#yha2Root .cz-spind-toggle .chev{ margin-left:.2rem; transition:transform .2s; display:inline-block; }
#yha2Root .cz-spind-toggle .chev.up{ transform:rotate(180deg); }
#yha2Root .cz-spind{ margin-top:.5rem; display:flex; flex-direction:column; gap:.5rem; }
#yha2Root .cz-spind-row{ display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.55rem .6rem; }
#yha2Root .cz-spind-grip{ color:#c8cdd6; font-size:11px; letter-spacing:-2px; }
#yha2Root .cz-spind-logo{ width:38px; height:30px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .cz-spind-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
#yha2Root .cz-spind-nm{ font-size:12.5px; color:var(--sub); flex:1; min-width:0; }
#yha2Root .cz-spind-row .cz-pg-place{ flex:0 0 130px; }

/* placements sub-step */
#yha2Root .cz-canvas-card{ background:#fff; border:1.5px solid var(--line); border-radius:16px; margin:1rem 1.2rem 0; overflow:hidden; position:relative; }
#yha2Root .cz-prow{ border-bottom:1px solid var(--line); padding:.85rem 0; }
#yha2Root .cz-prow b{ font-size:13.5px; display:block; margin-bottom:.5rem; }
#yha2Root .cz-pchips{ display:flex; gap:.4rem; flex-wrap:wrap; }
#yha2Root .cz-pchip{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.4rem .8rem; font-size:12px; font-weight:600; color:var(--sub); }
#yha2Root .cz-pchip.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
#yha2Root .cz-sprow{ display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; }
#yha2Root .cz-sprow .mv-input{ flex:1; }
#yha2Root .cz-spx{ background:none; border:none; color:#b8472f; font-size:15px; padding:.2rem .4rem; }
/* image-upload controls */
#yha2Root .cz-drop{ display:flex; align-items:center; justify-content:center; position:relative; min-height:120px; border:1.5px dashed #c8cdd6; border-radius:12px; background:#f6f7f9; cursor:pointer; overflow:hidden; }
#yha2Root .cz-drop.sm{ min-height:84px; }
#yha2Root .cz-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
#yha2Root .cz-drop>span{ display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:14px; font-weight:700; color:var(--navy); }
#yha2Root .cz-drop>span small{ font-size:11px; font-weight:500; color:var(--sub); }
#yha2Root .cz-drop img{ max-width:70%; max-height:92px; object-fit:contain; }
#yha2Root .cz-logo img{ max-width:42px; max-height:24px; object-fit:contain; display:block; }
#yha2Root .cz-l-primary img{ max-width:34px; }
#yha2Root .cz-l-crew img{ max-width:24px; max-height:14px; }
#yha2Root .cz-logo.big img{ max-width:84px; max-height:62px; }
/* the 60px order-sheet thumbnail is far smaller than the customise/review stages —
   scale the fixed-size fallback logo caps down so they don't swamp the garment.
   (boundary chips carry data-pbw and are sized by positionPbChips, so they're
   excluded here via :not([data-pbw]).) */
#yha2Root .mo-cv-img .cz-logo:not([data-pbw]) img{ max-width:15px; max-height:9px; }
#yha2Root .mo-cv-img .cz-l-primary:not([data-pbw]) img{ max-width:13px; }
#yha2Root .mo-cv-img .cz-l-crew:not([data-pbw]) img{ max-width:9px; max-height:5px; }
#yha2Root .mo-cv-img .cz-logo.big:not([data-pbw]) img{ max-width:30px; max-height:22px; }
/* fit-to-box (boundary zones): positionPbChips sizes the chip to the drawn
   zone (inline width/height); the logo then fills that box, keeping aspect */
#yha2Root .cz-logo[data-pbw]{ display:flex; align-items:center; justify-content:center; }
#yha2Root .cz-logo[data-pbw] img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }
/* ANCHOR-sized (no drawn zone): positionPbChips sets an inline WIDTH from the
   anchor's image fraction and leaves height auto, so the logo keeps its own
   aspect. The caps above must not clamp it — they were sized for the old
   fixed-CSS-pixel fallback, which showed the customer a logo 1.7x to 2.4x
   SMALLER than the one the store and the PDFs actually produce from the same
   anchor. Height stays auto here, unlike the zone rule above: an anchor is a
   centre plus a width, not a box, so there is no height to fill. */
#yha2Root .cz-logo[data-pbmw] img{ width:100%; height:auto; max-width:none; max-height:none; object-fit:contain; }
#yha2Root .mo-cv-img .cz-logo[data-pbmw] img{ max-width:none; max-height:none; }
#yha2Root .cz-logo-ph{ font-size:6px; opacity:.7; border:1px dashed rgba(255,255,255,.6); padding:2px 4px; border-radius:3px; }
#yha2Root .cz-up-thumb{ width:30px; height:22px; object-fit:contain; background:#f1f3f6; border-radius:4px; }
#yha2Root .cz-sp-thumb{ width:42px; height:30px; flex-shrink:0; background:#f1f3f6; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#yha2Root .cz-sp-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
#yha2Root .cz-sp-name{ flex:1; font-size:13px; font-weight:600; }

/* ── Step-4/5 additions: upload processing, swap toast, review view dots ── */
/* logo upload "Processing…" face (background-removal + vectorise) */
#yha2Root .cz-proc{ display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:13px; font-weight:700; color:var(--navy); }
#yha2Root .cz-proc small{ font-size:11px; font-weight:500; color:var(--sub); }
#yha2Root .cz-spin{ width:24px; height:24px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--blue); animation:yha2spin .7s linear infinite; }
@keyframes yha2spin{ to{ transform:rotate(360deg); } }

/* transient swap-success toast — slides in, auto-dismisses */
/* z above #yha2Root (310) — the toast lives on <body> as a sibling, so a
   lower z would render BEHIND the opaque overlay (the "pills not showing" bug) */
#yha2Toast{ position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translate(-50%,16px);
  z-index:400; display:flex; align-items:center; gap:.45rem; max-width:88%;
  background:var(--navy,#0b1730); color:#fff; font-size:13px; font-weight:600;
  padding:.7rem 1rem; border-radius:10px; box-shadow:0 10px 30px rgba(8,12,18,.32);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
#yha2Toast.show{ opacity:1; transform:translate(-50%,0); }
#yha2Toast .yha2-toast-ic{ display:inline-flex; width:20px; height:20px; border-radius:50%; background:#17a34a; color:#fff; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Toast.remove .yha2-toast-ic{ background:#b8472f; }

/* store-success Share drawer: full-width option rows (like the Add-logo sheet) */
#yha2Root .yha2-shareopt{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  min-height:60px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:.6rem .9rem; margin-bottom:.6rem; color:var(--ink); }
#yha2Root .yha2-shareopt:active{ background:#f4f1ea; }
#yha2Root .yha2-shareopt > svg{ flex-shrink:0; color:var(--navy); }
#yha2Root .yha2-shareopt b{ display:block; font-size:14px; }
#yha2Root .yha2-shareopt small{ display:block; font-size:11.5px; color:var(--sub); margin-top:.1rem; }

/* review view dots are tap targets that change ALL cards */
#yha2Root .mvr-dots{ padding:.2rem 0 .9rem; }
#yha2Root .mvr-dots span{ width:7px; height:7px; margin:0 3px; cursor:pointer; }

/* ═══ Review variant H — "Review your collection" (ported from the handoff) ═══ */
/* (review uses the shared progressHTML('review') header — no custom app bar) */
#yha2Root .rvh-wrap{ padding:1.15rem 1.15rem 0; }
#yha2Root .rvh-title{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.05; margin:.1rem 0 .9rem; }

/* ready banner */
/* compact single-line "ready for review" banner */
#yha2Root .rvh-banner{ display:flex; flex-direction:row; align-items:center; gap:.55rem; background:var(--green-bg); border-radius:13px; padding:.75rem 1rem; }
#yha2Root .rvh-banner-ic{ color:var(--green); display:flex; flex-shrink:0; }
#yha2Root .rvh-banner b{ font-size:13.5px; }

/* hero stage */
#yha2Root .rvh-stage{ position:relative; margin-top:1rem; aspect-ratio:1/0.95; background:#eceef1; border-radius:16px; overflow:hidden; touch-action:pan-y; }
#yha2Root .rvh-img{ width:100%; height:100%; object-fit:cover; object-position:center 10%; }
#yha2Root .rvh-stage .cz-logo, #yha2Root .rvh-stage .mv-brandov{ pointer-events:none; z-index:3; }
#yha2Root .rvh-stage-top{ position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:.6rem; padding:.85rem .9rem; pointer-events:none; }
#yha2Root .rvh-count{ background:#fff; border-radius:999px; padding:.32rem .6rem; font-size:11px; font-weight:800; letter-spacing:.04em; box-shadow:0 1px 3px rgba(0,0,0,.08); }
#yha2Root .rvh-tap{ position:absolute; top:18%; bottom:14%; width:38%; z-index:2; background:none; border:none; padding:0; cursor:pointer; }
#yha2Root .rvh-tap.l{ left:0; } #yha2Root .rvh-tap.r{ right:0; }
#yha2Root .rvh-vchev{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:36px; height:48px; background:none; border:none;
  display:flex; align-items:center; justify-content:center; color:var(--hdr); filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); cursor:pointer; }
#yha2Root .rvh-vchev.l{ left:.35rem; } #yha2Root .rvh-vchev.r{ right:.35rem; }
#yha2Root .rvh-vchev.l svg{ transform:rotate(180deg); }
#yha2Root .rvh-vdots{ position:absolute; left:0; right:0; bottom:10px; z-index:4; display:flex; justify-content:center; gap:5px; }
#yha2Root .rvh-vdots span{ width:6px; height:6px; border-radius:50%; background:rgba(11,23,48,.22); }
#yha2Root .rvh-vdots span.on{ background:var(--hdr); }

/* product rail */
#yha2Root .rvh-glance{ font-size:13.5px; font-weight:700; color:var(--ink); margin:1.1rem 0 0; }
#yha2Root .rvh-rail{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding:.5rem 0 .4rem; }
#yha2Root .rvh-rail::-webkit-scrollbar{ display:none; }
#yha2Root .rvh-thumb{ flex:0 0 54px; width:54px; height:62px; border-radius:10px; overflow:hidden; border:2px solid var(--line); background:#eceef1; padding:0; cursor:pointer; }
#yha2Root .rvh-thumb.on{ border-color:var(--hdr); }
#yha2Root .rvh-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* placements — expandable box (.rvh-pl-*), ported from the placements handoff */
#yha2Root .rvh-pl{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.05rem 1.1rem; margin-top:1.1rem; }
#yha2Root .rvh-pl-top{ display:flex; align-items:center; gap:.8rem; }
#yha2Root .rvh-pl-badge{ width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; }
#yha2Root .rvh-pl-htx{ min-width:0; overflow:hidden; }
/* heading + chips are each forced to one line; sizes tuned so the 4-category case fits a 390px phone */
#yha2Root .rvh-pl-htx b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.15; white-space:nowrap; }
#yha2Root .rvh-pl-chips{ display:block; font-size:9.5px; color:var(--sub); margin-top:.2rem; line-height:1.3; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#yha2Root .rvh-pl-toggle{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.9rem; padding:0; background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; }
#yha2Root .rvh-pl-toggle svg{ color:var(--sub); }
#yha2Root .rvh-pl-rows{ margin-top:.7rem; border-top:1px solid var(--line); }
#yha2Root .rvh-pl-row{ display:flex; align-items:center; gap:.85rem; padding:.7rem 0; }
#yha2Root .rvh-pl-row + .rvh-pl-row{ border-top:1px solid var(--line); }
#yha2Root .rvh-pl-rchk{ color:var(--green); flex-shrink:0; display:flex; }
#yha2Root .rvh-pl-rtx{ flex:1; min-width:0; }
#yha2Root .rvh-pl-rtx b{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.2; }
#yha2Root .rvh-pl-rtx span{ display:block; font-size:12.5px; color:var(--sub); margin-top:.12rem; }
#yha2Root .rvh-pl-empty{ font-size:12.5px; color:var(--sub); margin:.2rem 0; padding:.5rem 0; }
/* schematic garment */
#yha2Root .rvh-pl-svg{ width:66px; height:62px; flex-shrink:0; }
#yha2Root .rvh-pl-disc{ fill:#e9f5ee; }
#yha2Root .rvh-pl-line{ fill:none; stroke:#828e9c; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
#yha2Root .rvh-pl-mark{ fill:var(--hdr); }

/* order choice */
#yha2Root .rvh-h2{ font-size:20px; font-weight:800; letter-spacing:-.01em; margin:1.6rem 0 .85rem; }
#yha2Root .rvh-orders{ display:flex; flex-direction:column; gap:.7rem; }
#yha2Root .rvh-order{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.95rem .9rem; cursor:pointer; }
#yha2Root .rvh-order.on{ border-color:var(--blue); background:var(--blue-bg); box-shadow:0 0 0 1px var(--blue) inset; }
#yha2Root .rvh-radio{ width:20px; height:20px; border-radius:50%; border:2px solid #c8cdd6; flex-shrink:0; position:relative; }
#yha2Root .rvh-radio.on{ border-color:var(--blue); }
#yha2Root .rvh-radio.on::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--blue); }
#yha2Root .rvh-order-ic{ width:46px; height:46px; border-radius:50%; background:#eef1f5; color:var(--hdr); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .rvh-order.on .rvh-order-ic{ background:#dce7fb; color:var(--blue); }
#yha2Root .rvh-order-tx{ flex:1; min-width:0; }
#yha2Root .rvh-order-t{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
#yha2Root .rvh-rec{ font-size:11px; font-weight:800; font-style:normal; color:var(--green); margin-left:.3rem; }
#yha2Root .rvh-order-d{ display:block; font-size:12px; color:var(--sub); line-height:1.45; margin-top:.2rem; }
#yha2Root .rvh-order-chev{ color:#9aa1ad; flex-shrink:0; align-self:center; }

/* collapsible overview */
#yha2Root .rvh-ov{ background:#f6f7f9; border:1px solid var(--line); border-radius:14px; margin-top:.8rem; overflow:hidden; }
#yha2Root .rvh-ov.open{ background:#fff; }
/* these rows are real <button>s — pin the text colour so iOS Safari doesn't
   render the inherited name/title/price in its default link-blue */
#yha2Root .rvh-ov-head{ display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; background:none; border:none; padding:.9rem 1rem; cursor:pointer; color:var(--ink); }
#yha2Root .rvh-ov-ic{ width:40px; height:40px; border-radius:50%; background:#eaecf0; color:var(--hdr); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .rvh-ov-tx{ flex:1; min-width:0; }
#yha2Root .rvh-ov-t{ display:block; font-size:14.5px; font-weight:700; }
#yha2Root .rvh-ov-t em{ font-style:normal; font-weight:600; color:var(--sub); }
#yha2Root .rvh-ov-d{ display:block; font-size:12px; color:var(--ink); margin-top:.15rem; }
#yha2Root .rvh-ov-head>svg{ color:#9aa1ad; flex-shrink:0; transform:rotate(90deg); } /* points down when collapsed */
#yha2Root .rvh-ov.open .rvh-ov-head>svg{ transform:rotate(-90deg); } /* up when open */
#yha2Root .rvh-ov-list{ border-top:1px solid var(--line); }
#yha2Root .rvh-ov-row{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); padding:.85rem 1rem; cursor:pointer; color:var(--ink); }
#yha2Root .rvh-ov-row:last-child{ border-bottom:none; }
#yha2Root .rvh-ov-thumb{ width:42px; height:50px; border-radius:8px; overflow:hidden; background:#eceef1; flex-shrink:0; }
#yha2Root .rvh-ov-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
#yha2Root .rvh-ov-name{ flex:1; min-width:0; font-size:12px; font-weight:700; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#yha2Root .rvh-ov-price{ font-size:13px; font-weight:700; flex-shrink:0; min-width:50px; text-align:right; }
#yha2Root .rvh-ov-cols{ flex:0 0 72px; display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
#yha2Root .rvh-sw{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
#yha2Root .rvh-sw span{ width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.1) inset; }
#yha2Root .rvh-sw-more{ font-size:11px; font-weight:700; color:var(--sub); white-space:nowrap; }

/* sticky bottom bar (always visible) */
#yha2Root .rvh-bar{ position:absolute; left:0; right:0; bottom:0; z-index:70; display:flex; align-items:center; gap:.8rem; background:#fff;
  border-top:1px solid var(--line); padding:.7rem .9rem calc(.7rem + max(env(safe-area-inset-bottom), 8px)); }
#yha2Root .rvh-bar-info{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
#yha2Root .rvh-bar-ic{ width:40px; height:40px; border-radius:50%; background:#eef1f5; color:var(--hdr); display:flex; align-items:center; justify-content:center; }
#yha2Root .rvh-bar-tx{ display:flex; flex-direction:column; line-height:1.2; }
#yha2Root .rvh-bar-tx b{ font-size:14px; }
#yha2Root .rvh-bar-tx span{ font-size:11.5px; color:var(--sub); }
#yha2Root .rvh-bar-cta{ flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; background:var(--hdr); color:#fff;
  border:none; border-radius:12px; padding:1rem; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; }

/* ══ store-creation loader + "store is live" success overlay (.rvl-*) ══
   ported from the Claude-design store-live handoff; full-screen overlays
   above the review (sheets are z-200, so these sit at 250). */
#yha2Root .rvl-loadwrap{ position:absolute; inset:0; z-index:250; background:#fff; display:flex; align-items:center; justify-content:center; animation:rvlFade .25s ease; }
#yha2Root .rvl-load{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 2rem; }
#yha2Root .rvl-load-art{ position:relative; width:118px; height:118px; display:flex; align-items:center; justify-content:center; }
#yha2Root .rvl-sew{ position:absolute; inset:0; transform:rotate(-90deg); }
#yha2Root .rvl-track{ fill:none; stroke:var(--blue-bg); stroke-width:5; }
#yha2Root .rvl-stitch{ fill:none; stroke:var(--blue); stroke-width:5; stroke-linecap:round; stroke-dasharray:11 13; stroke-dashoffset:314; animation:rvlSew 3.8s ease-in-out infinite; transform-origin:60px 60px; }
#yha2Root .rvl-load-ic{ position:relative; color:var(--hdr); animation:rvlPulse 1.6s ease-in-out infinite; }
#yha2Root .rvl-load-t{ font-size:19px; font-weight:800; letter-spacing:-.01em; margin:1.3rem 0 .35rem; }
#yha2Root .rvl-load-m{ font-size:13.5px; color:var(--sub); margin:0; animation:rvlFade .5s ease; }
@keyframes rvlSew{ 0%{ stroke-dashoffset:314; } 55%,100%{ stroke-dashoffset:0; } }
@keyframes rvlPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.12); opacity:1; } }
@keyframes rvlFade{ from{ opacity:0; } to{ opacity:1; } }

#yha2Root .rvl-overlay{ position:absolute; inset:0; z-index:250; background:#fff; display:flex; flex-direction:column; animation:rvlRise .32s cubic-bezier(.2,.8,.2,1); }
@keyframes rvlRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
#yha2Root .rvl-x{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:5; width:34px; height:34px; border:none; background:none; color:var(--sub); display:flex; align-items:center; justify-content:center; cursor:pointer; }
#yha2Root .rvl-scroll{ flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:1.6rem 1.3rem calc(1.3rem + 12px); }
/* auto margins centre the content when it fits but collapse when it overflows,
   so on short phones the top stays scrollable (justify-content:center would clip it) */
#yha2Root .rvl-scroll-inner{ margin:auto 0; width:100%; }
#yha2Root .rvl-hero{ position:relative; width:88px; height:88px; margin:.4rem auto .1rem; display:flex; align-items:center; justify-content:center; }
#yha2Root .rvl-check{ width:72px; height:72px; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; animation:rvlPop .5s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes rvlPop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
#yha2Root .rvl-spark{ position:absolute; color:var(--green); opacity:0; animation:rvlTwinkle 2.4s ease-in-out infinite; }
#yha2Root .rvl-spark.s1{ top:-2px; right:8px; animation-delay:.2s; }
#yha2Root .rvl-spark.s2{ top:10px; left:-2px; animation-delay:.7s; }
#yha2Root .rvl-spark.s3{ bottom:2px; right:-2px; animation-delay:1.1s; }
#yha2Root .rvl-spark.s4{ bottom:14px; left:-4px; animation-delay:1.6s; }
@keyframes rvlTwinkle{ 0%,100%{ opacity:0; transform:scale(.6); } 35%,55%{ opacity:.9; transform:scale(1); } }

/* ── BULK ORDER on phones (owner 2026-08-04) ──────────────────────────────
   The phone reuses the desktop 3-step flow verbatim (see dkboHTML2Phone).
   Only the SHELL needed phone rules: .dk-overlay / .dk-modal live inside
   desktop-review.css's @media (min-width:561px) and .dkbo-modal is
   .drv-scoped, so none of them reach a phone. Every .dkbo-* internal is
   already unscoped and ungated, so nothing else is restated here — which is
   the point: one implementation, two shells.
   Full-screen rather than centred: a 3-step form with a roster does not fit
   in a centred card at 375px, and a bottom sheet would fight the summary. */
#yha2Root .mvbo .dk-overlay{ position:fixed; inset:0; z-index:220; background:rgba(10,20,40,.5);
  display:flex; align-items:stretch; justify-content:stretch; padding:0; }
#yha2Root .mvbo .dk-modal{ background:#fff; width:100%; max-width:none; max-height:none;
  border-radius:0; padding:0; position:relative; z-index:1; display:flex; flex-direction:column;
  animation:mvboUp .28s cubic-bezier(.2,.8,.2,1); }
@keyframes mvboUp{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
#yha2Root .mvbo .dkbo-modal{ max-width:none; max-height:none; }
#yha2Root .mvbo .dk-modal-x{ top:10px; right:10px; }
/* header/body/footer: header and footer pinned, body scrolls — the roster can
   run to any length and the Continue button must stay reachable */
#yha2Root .mvbo .dkbo-hd{ padding:16px 46px 12px 16px; gap:12px; flex-wrap:wrap; }
#yha2Root .mvbo .dkbo-hd .dk-co-h{ font-size:17px; }
/* three steps, one line. At 11px the labels wrapped to a second row and the
   header ate 40px of a 844px screen for no information. */
#yha2Root .mvbo .dkbo-steps{ gap:4px; flex-wrap:nowrap; }
#yha2Root .mvbo .dkbo-step{ font-size:10px; gap:4px; white-space:nowrap; }
#yha2Root .mvbo .dkbo-step i{ width:16px; height:16px; font-size:9.5px; }
#yha2Root .mvbo .dkbo-step-line{ width:8px; flex:0 0 8px; }
#yha2Root .mvbo .dkbo-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
#yha2Root .mvbo .dkbo-main{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px 18px; }
/* the summary is a right-hand column on desktop; on a phone it belongs under
   the form, not beside it, and must not eat the scroll area */
#yha2Root .mvbo .dkbo-sum{ flex:0 0 auto; width:auto; max-height:38vh; overflow-y:auto;
  border-left:none; border-top:1px solid var(--line); padding:12px 16px; }
#yha2Root .mvbo .dkbo-foot{ flex:0 0 auto; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:#fff; }
/* inputs at 16px so iOS does not zoom the page on focus */
#yha2Root .mvbo input, #yha2Root .mvbo select{ font-size:16px; }
#yha2Root .rvl-title{ text-align:center; font-size:26px; font-weight:800; letter-spacing:-.02em; margin:.7rem 0 .4rem; line-height:1.1; }
#yha2Root .rvl-sub{ text-align:center; font-size:13.5px; color:var(--sub); margin:0 auto 1.5rem; max-width:20rem; line-height:1.45; }
#yha2Root .rvl-dur-head{ text-align:center; margin-bottom:.8rem; }
#yha2Root .rvl-dur-head b{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
#yha2Root .rvl-dur-head span{ display:block; font-size:12px; color:var(--sub); margin-top:.3rem; line-height:1.4; }
#yha2Root .rvl-dur{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.5rem; }
#yha2Root .rvl-dur-opt{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:1.15rem .4rem .85rem; font-family:inherit; cursor:pointer; }
#yha2Root .rvl-dur-opt.on{ border-color:var(--blue); background:var(--blue-bg); box-shadow:0 0 0 1px var(--blue) inset; }
#yha2Root .rvl-dur-n{ font-size:15px; font-weight:800; color:var(--ink); white-space:nowrap; }
#yha2Root .rvl-dur-tag{ font-size:11px; color:var(--sub); }
#yha2Root .rvl-dur-rec{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.2rem; background:var(--green); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.01em; padding:.22rem .5rem; border-radius:999px; white-space:nowrap; }
#yha2Root .rvl-acts{ display:flex; flex-direction:column; gap:.7rem; }
#yha2Root .rvl-act{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; background:#f6f7f9; border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; font-family:inherit; cursor:pointer; text-decoration:none; color:var(--ink); }
#yha2Root .rvl-act-ic{ width:44px; height:44px; border-radius:11px; background:#fff; border:1px solid var(--line); color:var(--hdr); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#yha2Root .rvl-act-ic.accent{ background:var(--blue-bg); border-color:transparent; color:var(--blue); }
#yha2Root .rvl-act-tx{ flex:1; min-width:0; }
#yha2Root .rvl-act-tx b{ display:block; font-size:14.5px; font-weight:700; }
#yha2Root .rvl-act-tx span{ display:block; font-size:12px; color:var(--sub); margin-top:.15rem; line-height:1.4; }
#yha2Root .rvl-act-chev{ color:#aeb6c2; flex-shrink:0; }

/* ── Bulk order step 3 on a phone (2026-08-04) ────────────────────────────────
   dkboHTML2Phone() reuses dkboReviewHTML() verbatim, and TWO of its rules live
   at the TOP LEVEL of desktop-review.css — outside any media query:
     .dkbo-revwrap        { grid-template-columns: minmax(0,7fr) minmax(0,8fr) }
     .dkbo-del .dko-fields{ grid-template-columns: 1fr 1fr }
   So the desktop two-column layout reached phones. Inside .mvbo the usable width
   is ~343px; the 7fr delivery column lands around 140px and then splits in two,
   giving ~65px inputs for "Address line 1" and "Postcode". The address could not
   realistically be completed — a checkout blocker.

   This affects BOTH brands: the phone modal is gated on WW_UI, which is true
   everywhere (a design flag), not on IS_WW.

   Fixed HERE rather than by gating the desktop rules, because desktop-review.css
   re-declares both selectors inside @media (max-height:820px) on the assumption
   the base rule is unconditional — gating the base would silently change desktop
   short-viewport layout too.

   min-width:0 on .dko-f and width:100% on the input are the load-bearing pair:
   without them the input's automatic minimum size blows the track out again
   however many columns the grid has. */
#yha2Root .mvbo .dkbo-main.step3{ display:block; overflow-y:auto; }
#yha2Root .mvbo .dkbo-revwrap{ display:block; height:auto; }
#yha2Root .mvbo .dkbo-revwrap .dkbo-del{ overflow:visible; margin-bottom:18px; }
#yha2Root .mvbo .dkbo-revwrap .dkbo-rev{ overflow:visible; max-height:none; padding-right:0; }
#yha2Root .mvbo .dkbo-del .dko-fields{ display:grid; grid-template-columns:1fr; gap:10px; }
#yha2Root .mvbo .dkbo-del .dko-f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
#yha2Root .mvbo .dkbo-del .dko-f input{ width:100%; min-width:0; }

} /* end @media (max-width:560px) */

/* Safety net: never paint above the phone breakpoint (exact complement). */
@media not all and (max-width: 560px) {
  #yha2Root { display: none !important; }
}

/* ── Step 1 rework (2026-08-21): naming card, ready banner, rec rail ── */
#yha2Root .mvb-coll-name{ padding:10px 12px; }
#yha2Root .mvb-name-lbl{ font-size:12px; font-weight:700; color:var(--ink); display:block; margin-bottom:4px; }
#yha2Root .mvb-name-in{ font-size:14px; padding:8px 30px 8px 10px; }
#yha2Root .mvb-name-hint{ margin:4px 0 0; font-size:10.5px; color:var(--sub); }
#yha2Root .mvb-ready{ display:flex; align-items:center; gap:9px; background:#faf6ec; border:1px solid #eadfc4; border-radius:10px; padding:9px 11px; margin:0 0 .7rem; color:#7a5f1e; }
#yha2Root .mvb-ready-tx{ flex:1; min-width:0; }
#yha2Root .mvb-ready-tx b{ display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }
#yha2Root .mvb-ready-tx small{ font-size:11px; color:#8a7440; }
#yha2Root .mvb-ready-n{ font-size:11px; font-weight:800; letter-spacing:.05em; white-space:nowrap; }
#yha2Root .mvb-recrail{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
/* Sized so exactly TWO cards show in full with ~a tenth of a third peeking
   (owner 23 Aug — the 84x112 kit-row-thumb size was too small to read).
   42.5% resolves against the VISIBLE rail (flex % children use the container,
   not the scroll width): 2×42.5% + the 10px gaps leaves the sliver that says
   "scroll me". Image keeps 3:4 via aspect-ratio, no fixed pixel dims. */
#yha2Root .mvb-reccard{ flex:0 0 40%; min-width:0; box-sizing:border-box; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:11px; padding:0 0 7px; text-align:left; }
/* 40% (owner 25 Aug, down from 42.5%): slightly smaller images so ~2.2 cards
   show on load — two in full plus a clear slice of the third.
   min-width:0 is load-bearing: a flex item's default min-width:auto lets the
   nowrap copy set the card's width (measured 148/207/193px — ragged rail,
   one-and-a-bit visible). Zeroed, the basis governs and text truncates. */
#yha2Root .mvb-reccard-img{ position:relative; display:block; width:100%; aspect-ratio:3/4; border-radius:11px 11px 0 0; overflow:hidden; background:#eef0f3; }
#yha2Root .mvb-reccard-img img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; }
#yha2Root .mvb-reccard-add{ position:absolute; right:6px; bottom:6px; width:27px; height:27px; border-radius:50%; background:var(--ink); color:#fff; border:0; display:grid; place-items:center; }
/* Title may take TWO lines (owner 25 Aug — it uses the space the brand line
   occupied; the brand line is gone from the phone build tiles). min-height of
   two lines keeps the price row aligned across 1-line and 2-line cards. */
#yha2Root .mvb-reccard-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; font-weight:700; line-height:1.25; min-height:calc(2 * 1.25em); margin:7px 9px 0; }
#yha2Root .mvb-reccard-p{ display:block; font-size:12.5px; font-weight:800; margin:3px 9px 0; }

/* ── Step 2 rework (2026-08-21): category icons, design styles, indiv editor ── */
#yha2Root .cz-up-ic--additional{ background:#e7f6ec; color:#1d9d55; }
#yha2Root .cz-up-ic--largeart{ background:#f1ebfb; color:#7a4fd3; }
#yha2Root .cz-up-ic--pers{ background:#fdf1e3; color:#e8862a; }
#yha2Root .cz-aa{ font-size:12px; font-weight:800; }
#yha2Root .cz-indiv{ display:flex; align-items:center; gap:11px; width:calc(100% - 2.4rem); margin:1rem 1.2rem .2rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:left; color:var(--ink); }
#yha2Root .cz-indiv-ic{ width:34px; height:34px; border-radius:9px; background:#eef2f9; color:var(--ink); display:grid; place-items:center; flex-shrink:0; }
#yha2Root .cz-indiv-tx{ flex:1; min-width:0; }
#yha2Root .cz-indiv-tx b{ display:block; font-size:13.5px; }
#yha2Root .cz-indiv-tx span{ font-size:11.5px; color:var(--sub); }
#yha2Root .cz-advinfo{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:.8rem 1.2rem; background:#eef4fe; border:1px solid #d7e5fc; border-radius:11px; padding:11px; font-size:12px; color:#2b5bd7; }
#yha2Root .cz-advinfo.edited{ background:#eefaf1; border-color:#d2eedd; color:#177a43; }
#yha2Root .cz-advinfo span{ flex:1; min-width:60%; }
#yha2Root .cz-advinfo-btn{ border:1px solid currentColor; background:#fff; color:inherit; border-radius:8px; padding:6px 10px; font-size:11.5px; font-weight:700; }
#yha2Root .cz-resetitem-link{ display:block; margin:.9rem auto .3rem; background:none; border:0; color:var(--blue); font-size:12.5px; font-weight:700; }
#yha2Root .cz-pbar-col{ flex-direction:column; gap:7px; }
#yha2Root .cz-pbar-col .mv-cta{ width:100%; }
#yha2Root .cz-cancel-link{ background:none; border:0; color:var(--sub); font-size:12.5px; font-weight:600; }
/* item tiles go 3:4 like every other garment image (owner 2026-08-21) */
#yha2Root .cz-atile-img{ height:auto; aspect-ratio:3/4; }

/* ── Round 3 (22 Aug): the advanced reset sits under the canvas ── */
#yha2Root .cz-reset-under{ display:block; margin:.7rem auto .2rem; }

/* ═══ NAVALO PHONE HOME v2 (owner mockup, 31 Aug 2026) — .mvh2-* ════════════
   Renders only on the Navalo phone home (homeHTML's phone branch; Workwear
   never reaches it — go() rewrites home→niche there). The legacy .mvh-* rules
   above stay for the pieces this page still reuses (the trust strip). */
#yha2Root .mvh2{ background:#fff; }

/* hero: photo background, headline + both CTAs over a shade */
#yha2Root .mvh2-hero{ position:relative; min-height:520px; background-size:cover; background-position:center top;
  display:flex; align-items:flex-end; }
#yha2Root .mvh2-hero-shade{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,14,26,.30) 0%, rgba(8,14,26,.55) 55%, rgba(8,14,26,.88) 100%); }
#yha2Root .mvh2-hero-tx{ position:relative; z-index:1; padding:1.4rem 1.2rem 1.6rem; width:100%; box-sizing:border-box; }
#yha2Root .mvh2-hero-tx .mv-kick{ color:#7fd7e8; }
#yha2Root .mvh2-hero-tx h1{ font-family:var(--serif, Georgia, serif); font-size:33px; font-weight:800;
  letter-spacing:-.015em; line-height:1.12; color:#fff; margin:.6rem 0 .55rem; }
#yha2Root .mvh2-hero-tx p{ font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.82); margin:0 0 1.1rem; }
#yha2Root .mvh2-cta{ width:100%; justify-content:center; }
#yha2Root a.mvh2-cta{ display:flex; text-decoration:none; box-sizing:border-box; }
#yha2Root .mvh2-cta.ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
  margin-top:.65rem; }

/* trust strip separators (the strip itself reuses .mvh-trust above) */
#yha2Root .mvh2-trust .mvh-trust-row{ gap:0; }
#yha2Root .mvh2-trust .mvh-trust-row span{ padding:0 .9rem; font-size:13px; }
#yha2Root .mvh2-trust .mvh-trust-row span + span{ border-left:1px solid rgba(255,255,255,.22); }

/* shared section furniture */
#yha2Root .mvh2-sec{ padding:1.9rem 1.2rem 1.6rem; }
#yha2Root .mvh2-kick{ display:flex; align-items:center; gap:.4rem; font-size:11px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--blue, #2f6fed); margin:0 0 .55rem; }
#yha2Root .mvh2-sec h3{ font-family:var(--serif, Georgia, serif); font-size:25px; font-weight:800;
  letter-spacing:-.015em; line-height:1.15; margin:0 0 .5rem; }
#yha2Root .mvh2-sec p.s{ font-size:14px; line-height:1.55; color:var(--sub); margin:0 0 1rem; }

/* horizontal rails + dots */
#yha2Root .mvh2-rail{ overflow-x:auto; margin:0 -1.2rem; padding:0 1.2rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#yha2Root .mvh2-rail::-webkit-scrollbar{ display:none; }
#yha2Root .mvh2-rail-in{ display:flex; gap:.75rem; }
#yha2Root .mvh2-dots{ display:flex; justify-content:center; gap:.45rem; margin-top:.9rem; }
#yha2Root .mvh2-dots span{ width:7px; height:7px; border-radius:50%; background:#cfd6e0; }
#yha2Root .mvh2-dots span.on{ background:var(--ink, #0d1524); }

/* explore tiles */
#yha2Root .mvh2-cat{ position:relative; flex:0 0 40%; min-width:0; aspect-ratio:3/4; border-radius:13px;
  overflow:hidden; scroll-snap-align:start; text-decoration:none; background:#0d1524; }
#yha2Root .mvh2-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
#yha2Root .mvh2-cat::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,14,26,.72) 100%); z-index:1; }
#yha2Root .mvh2-cat b{ position:absolute; left:.75rem; right:.5rem; bottom:.65rem; z-index:2; color:#fff;
  font-size:14px; font-weight:800; line-height:1.25; text-shadow:0 1px 8px rgba(0,0,0,.55); }
#yha2Root .mvh2-browse{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue, #2f6fed); text-decoration:none; background:none; border:0; padding:0; font-family:inherit; }
#yha2Root .mvh2-explore .mvh2-browse{ display:flex; justify-content:center; }

/* more sailing: photo first, then copy + round-icon points */
#yha2Root .mvh2-ms-img{ border-radius:14px; overflow:hidden; margin:0 0 1.1rem; }
#yha2Root .mvh2-ms-img img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
#yha2Root .mvh2-ms-pts{ display:flex; flex-direction:column; gap:.8rem; margin-top:.4rem; }
#yha2Root .mvh2-ms-pts .nvh-ms-pt{ display:flex; align-items:center; gap:.8rem; }
#yha2Root .mvh2-ms-pts .nvh-ms-ic{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:50%; background:var(--hdr, #0d1524); color:#fff; }
#yha2Root .mvh2-ms-pts .nvh-ms-pt b{ font-size:14.5px; font-weight:700; }

/* how it works: stacked numbered steps with photos */
#yha2Root .mvh2-hiw{ display:flex; flex-direction:column; gap:1.5rem; margin-top:.6rem; }
#yha2Root .mvh2-hiw .nvh-hiw-top{ display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.8rem; }
#yha2Root .mvh2-hiw .nvh-hiw-num{ font-family:var(--serif, Georgia, serif); font-size:22px; font-weight:800;
  color:var(--blue, #2f6fed); line-height:1.15; flex-shrink:0; }
#yha2Root .mvh2-hiw .nvh-hiw-tx b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.01em; }
#yha2Root .mvh2-hiw .nvh-hiw-tx p{ font-size:13.5px; line-height:1.5; color:var(--sub); margin:.3rem 0 0; }
#yha2Root .mvh2-hiw .nvh-hiw-img{ display:block; border-radius:13px; overflow:hidden; aspect-ratio:4/3; }
#yha2Root .mvh2-hiw .nvh-hiw-img img{ display:block; width:100%; height:100%; object-fit:cover; }

/* private crew store */
#yha2Root .mvh2-prem{ background:#f4f6f9; border-radius:16px; margin:0 1.2rem; padding:1.5rem 1.2rem; }
#yha2Root .mvh2-perks{ list-style:none; margin:.6rem 0 1rem; padding:0; display:flex; flex-direction:column; gap:.5rem; }
#yha2Root .mvh2-perks li{ display:flex; align-items:center; gap:.55rem; font-size:14px; font-weight:600; }
#yha2Root .mvh2-perks li svg{ color:#17a34a; flex-shrink:0; }
#yha2Root .mvh2-prem-img img{ display:block; width:100%; mix-blend-mode:multiply; }

/* quote carousel */
#yha2Root .mvh2-tm-card{ flex:0 0 86%; min-width:0; scroll-snap-align:center; background:#fff;
  border:1px solid var(--line, #e3e8ef); border-radius:15px; padding:1.2rem 1.1rem; }
#yha2Root .mvh2-tm-card .q{ font-family:var(--serif, Georgia, serif); font-size:34px; line-height:1; display:block; }
#yha2Root .mvh2-tm-card p{ font-family:var(--serif, Georgia, serif); font-size:16.5px; line-height:1.45;
  margin:.3rem 0 1rem; }
#yha2Root .mvh2-tm-card .who{ display:flex; align-items:center; gap:.6rem; }
#yha2Root .mvh2-tm-card .av{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; display:block; }
#yha2Root .mvh2-tm-card .av img{ width:100%; height:100%; object-fit:cover; display:block; }
#yha2Root .mvh2-tm-card .nm b{ display:block; font-size:13px; }
#yha2Root .mvh2-tm-card .nm span{ font-size:12px; color:var(--sub); }

/* photo separator + info list */
#yha2Root .mvh2-msep{ padding:0 1.2rem; }
#yha2Root .mvh2-msep img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:15px; }
#yha2Root .mvh2-info{ display:flex; flex-direction:column; gap:1.15rem; }
#yha2Root .mvh2-info-i{ display:flex; align-items:flex-start; gap:.85rem; }
#yha2Root .mvh2-info-ic{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:11px; background:#eef1f6; color:var(--ink, #0d1524); }
#yha2Root .mvh2-info-i b{ display:block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
#yha2Root .mvh2-info-i p{ font-size:13.5px; line-height:1.5; color:var(--sub); margin:.3rem 0 0; }

/* closing panel: photo bg + CTAs + brand mark + quick links */
#yha2Root .mvh2-foot{ position:relative; overflow:hidden; margin-top:1.6rem; }
#yha2Root .mvh2-foot-bg{ position:absolute; inset:0; }
#yha2Root .mvh2-foot-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
#yha2Root .mvh2-foot-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,14,26,.66), rgba(8,14,26,.9)); }
#yha2Root .mvh2-foot-in{ position:relative; z-index:1; padding:2.2rem 1.2rem 1.6rem; }
#yha2Root .mvh2-foot-in h3{ font-family:var(--serif, Georgia, serif); font-size:27px; font-weight:800;
  letter-spacing:-.015em; color:#fff; margin:0 0 .4rem; }
#yha2Root .mvh2-foot-in > p{ font-size:14px; color:rgba(255,255,255,.8); margin:0 0 1.1rem; }
#yha2Root .mvh2-foot-mark{ display:flex; justify-content:center; margin:1.6rem 0 1rem; }
#yha2Root .mvh2-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem;
  border-top:1px solid rgba(255,255,255,.16); padding-top:1rem; }
#yha2Root .mvh2-quick a, #yha2Root .mvh2-quick button{ display:flex; flex-direction:column; align-items:center;
  gap:.35rem; background:none; border:0; padding:.3rem 0; color:rgba(255,255,255,.85); text-decoration:none;
  font-family:inherit; cursor:pointer; }
#yha2Root .mvh2-quick span{ font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

/* ══ BULK ORDER — PHONE LAYOUT (owner mockups, 2 Sep 2026) ══════════════════
   The phone has rendered the DESKTOP bulk markup since 4 Aug — correct
   behaviour, desktop proportions. These rules give each of the three steps a
   phone layout without a second implementation: same HTML, same handlers.
   Everything here is inside .mvbo, so desktop is untouched. */

/* ── step 1 · mode cards + quantities ────────────────────────────────────── */
#yha2Root .mvbo .dkbo-modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#yha2Root .mvbo .dkbo-mode{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px; min-height:0; }
#yha2Root .mvbo .dkbo-mode-tx b{ font-size:13.5px; line-height:1.25; }
/* the strapline is the first thing to go at 375px — the icon, title and the
   RECOMMENDED tag already say which mode this is */
#yha2Root .mvbo .dkbo-mode-tx span{ display:none; }
#yha2Root .mvbo .dkbo-add h3{ font-size:17px; }
#yha2Root .mvbo .dkbo-add-row{ flex-direction:column; align-items:flex-start; gap:8px; }
/* size grid: 6 columns is unusable at 375px, so wrap to 3 and give the boxes a
   finger-sized target */
/* six across, as the mockup: at 390px the content box is ~358px, so six
   columns land at ~53px each — a comfortable touch target, and it keeps the
   whole size run on one line instead of pushing the next product off-screen */
#yha2Root .mvbo .dkbo-cells{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
#yha2Root .mvbo .dkbo-size{ display:flex; flex-direction:column; align-items:center; gap:4px; }
#yha2Root .mvbo .dkbo-size>span{ font-size:11px; color:var(--sub); }
#yha2Root .mvbo .dkbo-size input{ width:100%; height:46px; padding:0; text-align:center; border-radius:10px;
  border:1.5px solid var(--line); font-size:16px; font-weight:700; }
#yha2Root .mvbo .dkbo-size>span{ font-size:10.5px; }
#yha2Root .mvbo .dkbo-colrow{ flex-direction:column; align-items:stretch; gap:10px; }
#yha2Root .mvbo .dkbo-colrow-c{ display:flex; align-items:center; gap:8px; }
#yha2Root .mvbo .dko-colour{ flex:1; min-width:0; height:44px; border-radius:11px; }

/* ── step 2 · personalisation ────────────────────────────────────────────── */
/* one field per garment now (owner 2 Sep) — number, input, counter on one row */
#yha2Root .mvbo .dkbo-pline{ display:flex; align-items:center; gap:9px; }
#yha2Root .mvbo .dkbo-pline input{ flex:1; min-width:0; height:46px; border-radius:11px; }
#yha2Root .dkbo-pcount{ flex:0 0 auto; font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums; }
#yha2Root .dkbo-phint{ margin:8px 0 0; font-size:11.5px; color:var(--sub); line-height:1.4; }
#yha2Root .dkbo-pcopy{ margin-top:10px; width:100%; background:var(--blue-bg,#eef3ff); color:var(--blue,#2f6fed);
  border:0; border-radius:11px; padding:11px 12px; font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; }
#yha2Root .dkbo-pcopy:hover{ filter:brightness(.97); }

/* ── step 3 · delivery | review as tabs ──────────────────────────────────── */
#yha2Root .mvbo .dkbo-revtabs{ display:flex; gap:0; margin:-2px 0 14px; border-bottom:1px solid var(--line); }
#yha2Root .mvbo .dkbo-revtab{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  background:none; border:0; border-bottom:2px solid transparent; padding:11px 6px; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--sub); cursor:pointer; margin-bottom:-1px; }
#yha2Root .mvbo .dkbo-revtab.on{ color:var(--blue,#2f6fed); border-bottom-color:var(--blue,#2f6fed); }
/* one panel at a time — the tab is what tells you the other one is there */
#yha2Root .mvbo .dkbo-revwrap.tab-delivery .dkbo-rev,
#yha2Root .mvbo .dkbo-revwrap.tab-review .dkbo-del{ display:none; }

/* ── step 1 · team roster on a phone ─────────────────────────────────────── */
/* The desktop roster line is one horizontal row: thumb, garment, colour, size,
   personalisation, delete. At 375px that row cannot hold six controls, so it
   stacks: identity on top, then the three selects, then the name field. */
#yha2Root .mvbo .dkbo-member-hd{ gap:9px; padding:11px 12px; }
#yha2Root .mvbo .dkbo-member-name{ font-size:15px; min-width:0; }
#yha2Root .mvbo .dkbo-line{ display:grid; grid-template-columns:44px 1fr auto; grid-template-areas:
  "img prod trash" "img col col" "img size size" "pers pers pers"; gap:8px; align-items:center;
  padding:11px 12px; }
#yha2Root .mvbo .dkbo-line-img{ grid-area:img; width:44px; height:52px; }
#yha2Root .mvbo .dkbo-line>.dkbo-sel.grow{ grid-area:prod; min-width:0; }
#yha2Root .mvbo .dkbo-line-col{ grid-area:col; min-width:0; }
#yha2Root .mvbo .dkbo-line-size{ grid-area:size; min-width:0; }
#yha2Root .mvbo .dkbo-line-pers{ grid-area:pers; min-width:0; }
#yha2Root .mvbo .dkbo-trash{ grid-area:trash; }
#yha2Root .mvbo .dkbo-line .dkbo-sel{ width:100%; height:44px; border-radius:11px; }
#yha2Root .mvbo .dkbo-line-col .dkbo-col-static{ display:block; padding:11px 0; }
/* personalisation field + its counter, matching the mockup's "LS  2/10" */
#yha2Root .dkbo-persw{ position:relative; display:flex; align-items:center; gap:8px; width:100%; }
#yha2Root .dkbo-persw .dkbo-pers{ flex:1; min-width:0; }
#yha2Root .mvbo .dkbo-persw .dkbo-pers{ height:44px; border-radius:11px; }
#yha2Root .dkbo-mini.alt{ margin-left:auto; text-align:right; }
#yha2Root .mvbo .dkbo-line-adders{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:0 12px 12px; }
#yha2Root .mvbo .dkbo-mini.alt{ margin-left:0; text-align:left; flex:1 1 100%; }

/* ── the sticky bottom bar the mockups show ──────────────────────────────────
   WHAT WENT WRONG FIRST TIME. The desktop right-hand SUMMARY ASIDE was being
   dropped whole under the phone form: heading, product thumbnails, eight figure
   rows, two notice cards, the CTA, the Stripe line and the terms — roughly half
   the viewport of chrome under every step, above a SECOND footer carrying Back
   and another Stripe line. My first pass then zeroed the aside's padding and
   restored it on two class names that do not exist (.dkbo-sum-rows /
   .dkbo-sum-tot; the real ones are .dkbo-sum-row / .dkbo-sum-total), so every
   figure ran flush to both edges and the money clipped off the right.

   The fix is structural, not cosmetic: on a phone the aside becomes a COMPACT
   BAR — count, total, one CTA — and the figures move into the Review tab where
   the mockup puts them (boFiguresHTML has one definition, two homes). */
/* count+total LEFT, CTA RIGHT, on one row — the mockup's bar. A grid rather
   than a flex row because the Stripe line and any error must span both
   columns underneath, and hidden aside children take no cell. */
#yha2Root .mvbo .dkbo-sum{ display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:6px 12px; padding:10px 16px calc(8px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(16,24,40,.06);
  max-height:none; overflow:visible; }
/* everything that belongs to the desktop aside and not to a phone bar */
#yha2Root .mvbo .dkbo-sum>h3,
#yha2Root .mvbo .dkbo-sum .dkbo-sum-ths,
#yha2Root .mvbo .dkbo-sum .dkbo-sum-figs,
#yha2Root .mvbo .dkbo-sum .dkbo-ship,
#yha2Root .mvbo .dkbo-sum .dkbo-terms{ display:none; }
/* count + total, the two numbers a buyer tracks */
#yha2Root .dkbo-bar{ display:none; }
#yha2Root .mvbo .dkbo-bar{ display:flex; flex-direction:column; align-items:flex-start; gap:0;
  margin:0; grid-column:1; grid-row:1; min-width:0; }
#yha2Root .mvbo .dkbo-bar-n{ font-size:12.5px; color:var(--sub); }
#yha2Root .mvbo .dkbo-bar-t{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
/* the primary action, filled — .dk-btn's own fill is declared in a desktop
   stylesheet that never reaches a phone, so the CTA arrived as a pale outline
   button and read as disabled next to the price */
#yha2Root .mvbo .dkbo-sum .dk-btn.block{ grid-column:2; grid-row:1; width:auto; min-width:148px;
  height:52px; padding:0 20px; font-size:15px; font-weight:700; border-radius:13px; margin:0;
  background:var(--hdr,#0f1e35); color:#fff; border:0; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; }
#yha2Root .mvbo .dkbo-sum .dk-btn.block[disabled]{ background:#e9ecf2; color:#9aa3b2; }
#yha2Root .mvbo .dkbo-stripe{ grid-column:1/-1; margin:2px 0 0; font-size:11px; justify-content:flex-start; }
#yha2Root .mvbo .dkbo-sum .dk-modal-err{ grid-column:1/-1; margin:0; }
/* the header: close on the LEFT, title beside it — an unstyled button was
   stretching to a full-width grey bar above everything */
#yha2Root .mvbo .dk-modal-x{ position:absolute; top:12px; left:12px; right:auto; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer; z-index:2; }
#yha2Root .mvbo .dk-modal-x:hover{ background:rgba(16,24,40,.06); }
#yha2Root .mvbo .dkbo-hd{ padding:14px 16px 12px 56px; }
/* the second footer: Back only, quiet, one line — its Stripe line would be the
   third on the screen */
#yha2Root .mvbo .dkbo-foot{ padding:8px 16px calc(8px + env(safe-area-inset-bottom)); background:#fff; }
#yha2Root .mvbo .dkbo-foot-mid{ display:none; }
#yha2Root .mvbo .dkbo-back{ font-size:13.5px; }
/* step 3 · the figures, in the Review tab where the mockup has them */
#yha2Root .dkbo-revsum{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
#yha2Root .dkbo-revsum h3{ margin:0 0 10px; font-size:15px; }
#yha2Root .dkbo-revsum .dkbo-sum-row{ display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--sub); padding:3px 0; }
#yha2Root .dkbo-revsum .dkbo-sum-row b{ color:var(--ink); font-weight:700; }
#yha2Root .dkbo-revsum .dkbo-sum-div{ height:1px; background:var(--line); margin:8px 0; }
#yha2Root .dkbo-revsum .dkbo-sum-total{ display:flex; align-items:center; justify-content:space-between;
  font-size:17px; font-weight:800; color:var(--ink); padding-top:4px; }
#yha2Root .dkbo-revsum .dkbo-en{ color:var(--green,#15803d); }