/* ════════════════════════════════════════════════════════════════════════
   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; }
#yha2Root .mv-prog-step{ display:flex; align-items:center; gap:.3rem; flex:0 0 auto; padding:0 .35rem; 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; }
/* (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:93px; 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; }
#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:70px; }
#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; }
#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); } }
#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; }

} /* 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; }
}