/* configurator-v2.css — Stage-2 port of proto-unified-poster-v1.html (design locked; see
   mtcc-print/docs/design-reference/). Regenerated by the v2c-port transform 2026-07-03;
   hand-edits AFTER this header line are the live source of truth going forward. */

  :root{ --brand:#7c3aed; --brand2:#a855f7; --bdark:#5b21b6; --plight:#ede9fe; --ink:#1a1625; --sub:#6b7280; --muted:#9ca3af; --green:#059669; --amber:#b45309; --grad:linear-gradient(135deg,#7c3aed,#5b21b6); --gradwide:linear-gradient(90deg,#a855f7,#7c3aed 50%,#4f6ef7); --ease:cubic-bezier(.22,1,.36,1); }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ min-height:100%; width:100%; margin:0; }
  body{ font-family:'Inter',sans-serif; color:var(--ink); overflow-x:clip; }   /* clip (not hidden) so position:sticky still works */
  .screen{ position:relative; width:100%; height:100vh; height:100lvh; height:100dvh; min-height:100vh; min-height:100lvh; min-height:100dvh; overflow:hidden; --slidedist:clamp(190px,20vw,300px); background:
      radial-gradient(50% 50% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 64%),
      radial-gradient(130% 120% at 50% 12%, #f6f1ff 0%, #e9def9 48%, #d5c5f0 100%); }
  .prototag{ position:absolute; right:14px; bottom:14px; z-index:60; font-size:.52rem; font-weight:800; letter-spacing:.12em; color:rgba(91,33,182,.55); background:rgba(255,255,255,.5); border-radius:8px; padding:5px 10px; pointer-events:none; }
  .uhdr{ position:relative; z-index:30; }
  .uhdr .util{ height:36px; background:linear-gradient(135deg,#7c3aed,#5b21b6); display:flex; align-items:center; gap:16px; padding:0 30px; color:rgba(255,255,255,.85); font-size:.6rem; font-weight:600; }
  .uhdr .util .cat{ font-weight:700; cursor:pointer; } .uhdr .util .cat.on{ background:#fff; color:var(--bdark); padding:6px 13px 9px; border-radius:10px 10px 0 0; margin-bottom:-9px; }
  .uhdr .util .promo{ flex:1; text-align:center; color:#ddd0f7; } .uhdr .util .rsep{ width:1px; height:13px; background:rgba(255,255,255,.35); }
  .uhdr .main{ height:58px; background:#fff; display:flex; align-items:center; gap:14px; padding:0 30px; }
  .uhdr .logo{ font-family:'Montserrat',sans-serif; font-size:1.05rem; font-weight:800; } .uhdr .logo b{ color:var(--brand); }
  .uhdr .allbtn{ background:var(--grad); color:#fff; border-radius:9px; padding:9px 14px; font-size:.62rem; font-weight:800; }
  .uhdr .search{ flex:1; height:36px; border:1.5px solid #e3dbf4; border-radius:10px; display:flex; align-items:center; color:var(--muted); font-size:.62rem; overflow:hidden; }
  .uhdr .search span{ flex:1; padding:0 13px; } .uhdr .search .go{ width:42px; align-self:stretch; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; }
  .uhdr .hicons{ display:flex; gap:12px; font-size:.62rem; font-weight:700; color:var(--sub); align-items:center; }
  .uhdr .subrow{ height:64px; background:#fff; border-top:1px solid #f3eefb; border-bottom:1px solid #eee9f8; display:flex; justify-content:center; align-items:center; gap:30px; }
  .scat{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; position:relative; }
  .scat .sic{ width:27px; height:27px; border-radius:8px; box-shadow:0 2px 6px rgba(60,30,130,.14); }
  .scat .sn{ font-size:.55rem; font-weight:700; color:var(--sub); } .scat.on .sn{ color:var(--bdark); font-weight:800; }
  .scat.on::after{ content:''; position:absolute; bottom:-11px; left:20%; right:20%; height:2.5px; border-radius:2px; background:var(--grad); }
  .float{ position:absolute; z-index:20; }
  .glasspill{ background:rgba(255,255,255,.68); backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(60,30,130,.12); border-radius:16px; }
  /* the three floating chrome pills share ONE height + glass shell so they read as a set */
  .f-ctrls, .dtoggle, .f-buy{ box-sizing:border-box; }
  .f-ctrls, .dtoggle{ min-height:50px; }   /* tighter: bigger pills inside, ~4px gap to the glass edge */
  .f-ctrls{ top:172px; left:50%; transform:translateX(-50%); display:flex; gap:7px; padding:0 7px; align-items:center; }
  .cpill{ font-family:inherit; font-size:.74rem; font-weight:700; color:var(--ink); border-radius:11px; padding:11px 17px; cursor:pointer; }
  .cpill:hover{ background:rgba(124,58,237,.08); } .cpill.act{ background:var(--brand); color:#fff; box-shadow:0 3px 8px rgba(124,58,237,.4), 0 1px 2px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.05), inset 0 .5px 0 rgba(255,255,255,.45); }
  /* segmented toggle — translates the platform's Apple toggle-switch vocabulary (forms.css) to a 2-up
     segmented control: the .seg is the RECESSED TRACK (multi-layer inset shadow), the active .cpill is the
     FLOATING THUMB (lift + close shadow + hairline ring + glossy top inset). Reused everywhere. */
  .seg{ position:relative; display:inline-flex; gap:3px; background:#e9e6f2; border-radius:13px; padding:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), inset 0 1px 2px rgba(0,0,0,.1), inset 0 -1px 0 rgba(255,255,255,.5); }
  /* the active "thumb" is a single element that SLIDES between pills (JS sets left/width to the active pill) */
  .seg-thumb{ position:absolute; z-index:0; top:3px; left:3px; height:36px; width:0; border-radius:9px; background:var(--brand); box-shadow:0 3px 8px rgba(124,58,237,.4), 0 1px 2px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.05), inset 0 .5px 0 rgba(255,255,255,.45); transition:left .34s cubic-bezier(.34,1.12,.5,1), width .34s cubic-bezier(.34,1.12,.5,1); pointer-events:none; }
  .seg .cpill{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 17px; border-radius:9px; color:var(--sub); white-space:nowrap; font-family:inherit; background:transparent; border:0; cursor:pointer; transition:color .26s var(--ease); }
  .seg .cpill:hover{ color:var(--bdark); }
  .seg .cpill.act, .seg .cpill.on{ color:#fff; }   /* bg/shadow now come from the sliding .seg-thumb */
  .seg .cpill.act:hover, .seg .cpill.on:hover{ color:#fff; }
  .f-ctrls .vsepp{ width:1px; height:18px; background:#e0d6f2; margin:0 3px; }
  /* persistent BOTTOM BAR (both views): running total + details on the LEFT, Add-to-cart on the RIGHT.
     The commitment lives where the deliberation is. Pure commit surface — Quick edit lives up top. */
  .f-buy{ left:0; right:0; bottom:0; top:auto; min-height:0; height:clamp(84px,10.5vh,104px); border-radius:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(24px,3.5vw,52px); box-shadow:0 -8px 28px rgba(60,30,130,.12); border-top:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.88); z-index:30; }
  .f-buy .hp{ text-align:left; display:flex; flex-direction:column; gap:2px; min-width:0; }
  /* row above the price: "Total" label + the running flash sit here */
  .f-buy .hp-top{ display:flex; align-items:center; gap:10px; min-height:16px; }
  .f-buy .hp-main{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .f-buy .hp-lbl{ font-family:'Inter',sans-serif; font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--sub); }
  /* SOLID-colour total (theme display font), lighter weight + grey per-each */
  .f-buy .hp .t{ font-family:'Montserrat',sans-serif; font-size:clamp(1.7rem,2.3vw,2.1rem); font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--brand); }
  .f-buy .hp-each{ font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700; color:var(--sub); }
  .f-buy .hp .s{ font-family:'Inter',sans-serif; font-size:.78rem; color:var(--sub); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:5px; }
  /* running flash — sits ABOVE the price (in hp-top). Reverse-psychology: GREEN = up, RED = down */
  .f-buy .pdelta{ font-family:'Montserrat',sans-serif; font-size:.92rem; font-weight:900; opacity:0; } .f-buy .pdelta.go, .qdf-top .pdelta.go, .qd3-lbl .pdelta.go{ animation:flash 1.25s var(--ease); } .pdelta.up{ color:#059669; } .pdelta.down{ color:#dc2626; }
  @keyframes flash{ 0%{opacity:0;transform:translateY(7px) scale(.92)} 16%{opacity:1;transform:none} 76%{opacity:1} 100%{opacity:0;transform:translateY(-7px) scale(1.04)} }
  .f-buy .addtot{ font-family:'Montserrat',sans-serif; font-weight:900; opacity:.92; }
  .f-buy-actions{ display:flex; align-items:center; gap:16px; flex:none; }
  .f-buy-actions .actdiv{ width:0; height:32px; flex:none; border-left:1.5px dashed #c7b8ec; }
  /* Save build — secondary action: DASHED outline, less round */
  .savebuild{ font-family:'Inter',sans-serif; font-size:.76rem; font-weight:800; color:var(--bdark); background:transparent; border:1.6px dashed #c7b8ec; border-radius:10px; padding:0 18px; height:46px; cursor:pointer; white-space:nowrap; transition:.15s var(--ease); }
  .savebuild:hover{ border-color:var(--brand); color:var(--brand); background:rgba(124,58,237,.05); }
  /* Add to cart — hero CTA, LESS round */
  .f-buy .add, .qdrawer-foot .add{ display:inline-flex; align-items:center; gap:9px; background:linear-gradient(120deg,#8b5cf6,#6d28d9); color:#fff; border:0; border-radius:13px; padding:0 30px; height:52px; font-family:'Inter',sans-serif; font-size:1rem; font-weight:800; letter-spacing:.005em; cursor:pointer; box-shadow:0 10px 24px -4px rgba(109,40,217,.55), inset 0 1px 0 rgba(255,255,255,.28); white-space:nowrap; transition:transform .15s var(--ease), box-shadow .15s; }
  .add .addcart{ width:19px; height:19px; flex:none; }
  .f-buy .add:hover, .qdrawer-foot .add:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -4px rgba(109,40,217,.62), inset 0 1px 0 rgba(255,255,255,.3); } .f-buy .add .addarr{ font-size:1.05rem; transition:transform .2s; } .f-buy .add:hover .addarr{ transform:translateX(4px); }
  /* ===== N12 segmented buy-bar (the chosen bottom-bar design) ===== */
  .f-buy .bb-seg{ display:flex; align-items:stretch; min-width:0; }
  .f-buy .bb-cell{ display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 clamp(13px,1.5vw,22px); position:relative; }
  .f-buy .bb-cell:first-child{ padding-left:0; }
  .f-buy .bb-cell + .bb-cell::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:30px; border-left:1.5px dashed #cdbff0; }
  .f-buy .bb-l{ font-family:'Inter',sans-serif; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); white-space:nowrap; }
  .f-buy .bb-v{ font-family:'Inter',sans-serif; font-weight:800; font-size:.92rem; color:var(--bdark); white-space:nowrap; }
  .f-buy .bb-total .t{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1.7rem,2.3vw,2.2rem); letter-spacing:-.02em; line-height:1; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* drawer (v2) footer reuses the same N12 segmented price-bar style, scaled for the narrow panel */
  .qdrawer-foot .bb-seg{ display:flex; align-items:stretch; min-width:0; }
  .qdrawer-foot .bb-cell{ display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 clamp(9px,2.6vw,15px); position:relative; }
  .qdrawer-foot .bb-cell:first-child{ padding-left:0; }
  .qdrawer-foot .bb-cell + .bb-cell::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:26px; border-left:1.5px dashed #cdbff0; }
  .qdrawer-foot .bb-l{ font-family:'Inter',sans-serif; font-size:.56rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--sub); white-space:nowrap; }
  .qdrawer-foot .bb-v{ font-family:'Inter',sans-serif; font-weight:800; font-size:.82rem; color:var(--bdark); white-space:nowrap; }
  .qdrawer-foot .bb-total .t{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:-.02em; line-height:1; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* ===== Step-07 order summary = the Packing-slip card (chosen price card) ===== */
  .oslip{ position:relative; max-width:580px; background:rgba(255,255,255,.9); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,1); border-radius:20px; box-shadow:0 18px 44px rgba(60,30,130,.16); overflow:hidden; margin-top:30px; }
  .oslip-pad{ padding:20px 24px 22px; }
  .oslip-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .oslip-biz{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1rem; color:var(--brand); }
  .oslip-kk{ font-size:.54rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:#9b7fd4; }
  .oslip-tbl{ display:grid; grid-template-columns:34px 1fr auto; gap:11px 12px; font-size:.84rem; }
  .oslip-tbl .h{ font-size:.56rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9b7fd4; padding-bottom:6px; border-bottom:1.5px dashed #c8b6ee; }
  .oslip-tbl .q{ color:var(--muted); font-weight:600; } .oslip-tbl .d{ color:var(--sub); font-weight:600; } .oslip-tbl .a{ font-weight:800; color:var(--bdark); text-align:right; }
  .oslip-trow{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:13px; border-top:1.5px dashed #c8b6ee; }
  .oslip-tl{ font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--sub); }
  .oslip-num{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.9rem; line-height:.9; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .oslip-add{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:15px; background:linear-gradient(135deg,#7c3aed,#5b21b6); color:#fff; border:0; border-radius:12px; padding:12px; font-family:'Inter',sans-serif; font-weight:800; font-size:.86rem; cursor:pointer; box-shadow:0 8px 18px -4px rgba(109,40,217,.5), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .15s var(--ease); }
  .oslip-add:hover{ transform:translateY(-2px); } .oslip-add svg{ width:16px; height:16px; flex:none; }
  .f-rail2{ left:clamp(20px,3vw,60px); top:calc(162px + (100vh - 162px) * 0.40); transform:translateY(-50%); width:clamp(208px,15vw,272px); }
  .f-rail2 .rt2{ font-size:.52rem; font-weight:800; letter-spacing:.22em; color:#9b7fd4; text-transform:uppercase; margin:0 0 8px 4px; }
  .f-rail2 .items{ position:relative; }
  .rn:not(:last-child) .ico::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 7px); height:clamp(14px,2.2vh,28px); border-left:1.5px dashed #c8b6ee; z-index:0; }
  .rn{ position:relative; display:flex; align-items:center; gap:15px; padding:clamp(11px,1.5vh,18px) 0; cursor:pointer; }
  .rn .ico{ width:clamp(52px,4.4vw,68px); display:flex; justify-content:center; flex:none; position:relative; z-index:2; }
  .rn.cur .ico::before{ content:''; position:absolute; inset:-7px -5px; border-radius:12px; background:rgba(124,58,237,.1); box-shadow:inset 0 0 0 1.5px #d6c8f5; }
  .rn .k{ font-size:clamp(.52rem,.8vw,.64rem); font-weight:800; letter-spacing:.12em; color:#9b7fd4; text-transform:uppercase; }
  .rn .v{ font-size:clamp(.78rem,1.05vw,.92rem); font-weight:800; margin-top:2px; white-space:nowrap; }
  .rn:hover .v{ color:var(--brand); } .rn.cur .v{ color:var(--bdark); }
  .rn.done .k{ color:var(--brand); }
  /* completed step — PURPLE circle-check-big on top of the rail tile (icon) */
  .rn.done::after{ content:''; position:absolute; top:clamp(2px,.5vh,8px); left:-3px; width:20px; height:20px; z-index:3; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%237c3aed'/%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m9 11 3 3L22 4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 2px 4px rgba(124,58,237,.4)); }
  .gmini2{ border-radius:4px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 1px 3px rgba(0,0,0,.15); display:block; position:relative; z-index:2; }
  .gmini2.dark{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:transparent; }
  .gmini2.dash{ background:rgba(255,255,255,.6); border:1.5px dashed #a98fe0; display:flex; align-items:center; justify-content:center; color:var(--brand); font-size:.62rem; font-weight:800; }
  .gstack2{ position:relative; z-index:2; } .gstack2 i{ display:block; width:30px; height:3.5px; border-radius:1.5px; background:linear-gradient(160deg,#fff,#eee8f9); border:1px solid #e4dbf4; border-bottom:0; } .gstack2 i:last-child{ border-bottom:1px solid #e4dbf4; }
  .gcal2{ width:28px; border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.18); border:1px solid rgba(124,58,237,.14); background:#fff; text-align:center; position:relative; z-index:2; }
  .f-rail2 .gcal2{ width:38px; } .f-rail2 .gcal2 .dn{ font-size:.88rem; } .f-rail2 .gcal2 .bd{ font-size:.38rem; }
  .gcal2 .bd{ background:linear-gradient(110deg,#60a5fa,#2563eb); color:#fff; font-size:.3rem; font-weight:800; letter-spacing:.12em; padding:2px 0; display:block; }
  .gcal2 .dn{ font-family:'Montserrat',sans-serif; font-size:.62rem; font-weight:900; display:block; line-height:1.35; }
  /* quantity mini-card — mirrors .gcal2 (purple header + live number) so the Quantity tile reflects the count like the date tile reflects the date */
  .gqty2{ width:28px; border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.18); border:1px solid rgba(124,58,237,.14); background:#fff; text-align:center; position:relative; z-index:2; }
  .f-rail2 .gqty2{ width:38px; } .f-rail2 .gqty2 .qn{ font-size:.88rem; } .f-rail2 .gqty2 .qb{ font-size:.38rem; }
  .gqty2 .qb{ background:linear-gradient(110deg,#a855f7,#7c3aed); color:#fff; font-size:.3rem; font-weight:800; letter-spacing:.12em; padding:2px 0; display:block; }
  .gqty2 .qn{ font-family:'Montserrat',sans-serif; font-size:.62rem; font-weight:900; display:block; line-height:1.35; }
  .gfin{ width:31px; height:27px; border-radius:4px; background:linear-gradient(115deg,#241b38,#6a59a0 50%,#241b38); box-shadow:0 2px 7px rgba(60,30,130,.3); position:relative; z-index:2; }
  /* ===== leftzone: toggle sits ABOVE the centred rail; in All options the whole config becomes a full Cold-Open scroll column with a sticky stage ===== */
  /* top clears the toggle AND the title beneath it (172 + 52 pill + 12 gap +
     ~46 title + 14 gap). Was 172, which only had to clear the toggle. */
  /* top clears the toggle AND the title beneath it (172 + 52 pill + 12 gap +
     ~46 title + 14 gap). Was 172, which only had to clear the toggle.
     bottom was clamp(210px,25vh,262px), which left 131px of nothing between
     the rail and the buy bar at 900px tall and 167px at 1400 — dead space at
     every height. Reclaiming it is what pays for the title. */
  /* Tracks .ptitle's own clamp plus the title block's height (~132px for a
     two-line subtitle), so the rail sits below it at every viewport rather
     than at one hand-tuned offset. bottom reclaims the dead space that used
     to sit between the rail and the buy bar. */
  /* top clears the title block; bottom is then chosen so the rail's CENTRE
     lands on the screen's centre rather than below it. The band runs
     370..(100vh - 20vh), whose midpoint is ~50vh + 77 — the middle of the
     area under the header. Pushing the rail down to make room for the title
     had left it visibly bottom-heavy against the hero. */
  .leftzone{ position:absolute; left:clamp(20px,3vw,60px); width:clamp(208px,15vw,272px); top:388px; bottom:clamp(130px,17vh,220px); display:flex; flex-direction:column; justify-content:center; gap:14px; z-index:21; }  /* rail vertically CENTRED in step (flex-centre, transform-free so the switch fade can use transform) */
  /* density toggle — same glass shell + canonical .seg as the other two pills */
  /* density / viewer switch — top-left, on the hero-controls line, in BOTH views. Glass card with EVEN
     9px all round the seg (min-height 54 centres the 36px seg → 9px top/bottom; padding gives 9px sides). */
  .dtoggle{ top:172px; left:clamp(20px,3vw,60px); display:flex; align-items:center; gap:9px; padding:4px 8px 4px 13px; z-index:34; }
  /* Product name — the page never said what it was selling. Same `top` as the
     view toggle so the two read as one row of chrome, but anchored RIGHT and
     never centred: at 1024px (the narrowest desktop before the mobile tier)
     the toggle ends at 483px and the quick-edit tab starts at 963px, so a
     viewport-centred pill would sit on top of the toggle. Right-anchored it
     cannot — the free gap is 480px and the longest name in the catalogue
     (“10mm Coroplast Yard Sign — Direct Print”) measures 309px. Both figures
     measured on the live page, not estimated. */
  /* Typeset like a step title in the Everything panel, one size up — no pill,
     no glass, no border. It is the page's heading, not another control.

     z-index 22 puts it BELOW the sticky header (33) so it slides underneath
     when the panel scrolls. It was 34, which sent it over the top bar. */
  /* ONE offset for both views — switching Guided/Everything must not move the
     page's own heading. 264 leaves 40px under the toggle. */
  .ptitle{ top:264px; left:clamp(20px,3vw,60px); z-index:22; display:block; padding:0; max-width:clamp(240px,20vw,340px); pointer-events:none; }
  .ptitle-t{ margin:0; font-family:'Montserrat',sans-serif; font-size:clamp(1.5rem,2.1vw,2.05rem); font-weight:900; letter-spacing:-.03em; line-height:1.04; color:var(--ink); }
  /* Last word carries the gradient, exactly as .copanel h2 em does on every
     step heading. Flat ink read as a browser default rather than a design. */
  .ptitle-t em{ font-style:normal; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* Aisle line above the name. Where the category and the name are the same
     string this carries the department instead — see productEyebrow(). */
  .ptitle-e{ margin:0 0 10px; font-size:clamp(.6rem,.72vw,.66rem); font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:#8b6fd0; }
  /* The description is marked by a solid brand bar rather than a gradient one:
     at 3px wide a three-stop gradient never resolves — it just reads as
     purple, with more to maintain. Colour moves off neutral grey onto a
     violet-grey so the three lines read as one lockup. */
  .ptitle-s{ position:relative; margin:13px 0 0; padding-left:13px; font-size:clamp(.74rem,.88vw,.84rem); font-weight:500; line-height:1.45; color:#4a4260; max-width:34ch; }
  .ptitle-s::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:3px; background:var(--brand); }
  .dtoggle .seg .cpill{ font-size:.72rem; font-weight:700; }   /* content-width pills, same padding as every other seg */
  /* "Build mode" label that names the view toggle */
  .cvlabel{ display:flex; align-items:center; margin-right:1px; }
  .cvlabel .cvk{ font-size:.62rem; font-weight:900; letter-spacing:.1em; color:var(--bdark); text-transform:uppercase; }
  /* dashed vertical divider (used in the top strip + the buy bar) */
  .vsepp.dashed{ width:0; height:30px; flex:none; border-left:1.5px dashed #c7b8ec; }
  /* Proof button reads as its OWN button, not a toggle pill */
  .dtoggle .proofbtn{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; color:var(--bdark); background:rgba(124,58,237,.06); border:1.3px solid #e2d8f5; border-radius:10px; padding:9px 14px; cursor:pointer; white-space:nowrap; transition:.15s var(--ease); }
  .dtoggle .proofbtn:hover{ border-color:var(--brand); background:rgba(124,58,237,.1); }
  .dtoggle .proofbtn.act{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 4px 12px rgba(124,58,237,.4); }
  .dtoggle .proofbtn .pfico{ font-size:.9rem; line-height:1; }
  /* orientation toggle — now lives in Step 2 (size), before the size cards */
  .orientseg{ margin-top:2px; }
  .bandorient{ margin:2px 0 14px; }
  .coorient{ margin-top:10px; }
  .dtoggle .ic{ display:inline-flex; gap:2px; align-items:center; } .dtoggle .ic i{ display:block; width:4px; height:11px; border-radius:1px; background:currentColor; opacity:.6; } .dtoggle .gico .ic i:nth-child(1){ height:11px } .dtoggle .gico .ic i:nth-child(2){ height:7px } .dtoggle .gico .ic i:nth-child(3){ height:9px }
  .dtoggle .aico .ic{ display:grid; grid-template-columns:1fr 1fr; gap:2px; } .dtoggle .aico .ic i{ width:5px; height:5px; border-radius:1px; }
  .dtoggle .cpill.on .ic i{ opacity:1; }
  .scroll-hint{ position:absolute; left:50%; bottom:13px; transform:translateX(-50%); z-index:13; font-size:.6rem; font-weight:800; letter-spacing:.05em; color:#9b7fd4; display:flex; align-items:center; gap:7px; cursor:pointer; }
  .scroll-hint .dn{ display:inline-block; animation:bob 1.8s infinite; } @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
  .leftzone .f-rail2{ position:static; left:auto; top:auto; transform:none; width:auto; flex:none; }
  .bandwrap{ display:block; }
  .copanel{ display:none; }
  /* --- All options: page scrolls; left = full Cold Open scenes (no inner scrollbar), right = sticky stage --- */
  .allwrap{ display:contents; }
  .screen.allopts{ height:auto; min-height:100vh; min-height:100lvh; min-height:100dvh; overflow:visible; }
  .screen.allopts .allwrap{ display:flex; align-items:flex-start; }   /* scenes column + sticky stage */
  .screen.allopts .uhdr{ position:sticky; top:0; z-index:33; }
  .screen.allopts .leftzone{ position:static; float:none; transform:none; flex:0 0 clamp(380px,40vw,600px); height:auto; bottom:auto; justify-content:flex-start; gap:0; padding:486px clamp(26px,2.4vw,44px) 100px clamp(20px,3vw,60px); }   /* keeps ~270px of air under the title block, which the eyebrow made ~23px taller */
  .screen.allopts .leftzone .f-rail2{ display:none; }
  .screen.allopts .bandwrap, .screen.allopts .scroll-hint{ display:none; }
  .screen.allopts .copanel{ display:block; overflow:visible; }
  /* sticky stage reserves room for the FIXED buy bar (+ a gap) so the poster is ALWAYS fully visible above it at any viewport size */
  .screen.allopts .canvas{ position:sticky; inset:auto; top:158px; align-self:flex-start; flex:1 1 auto; height:calc(100vh - 158px - clamp(84px,10.5vh,104px) - 26px); margin:0 24px 0 6px; z-index:5; animation:stageIn .5s var(--ease) both; }
  .screen.allopts .heroWrap{ top:0; bottom:0; padding:30px 24px; }   /* image vertically centred in the sticky stage */
  /* --- animated switch (both directions) — ONE simultaneous motion driven by .switching ---
     Everything fires at t=0 together: the product glides DIAGONALLY to its new centre, the NEW left
     panel fades + slides in, the OLD left panel (a fixed clone "#ghostLeft") fades + slides out (true
     cross-fade), and the bottom band pops up. */
  @keyframes prodGlide{ from{ transform:translate(var(--dx,0px), var(--dy,0px)); } to{ transform:translate(0px,0px); } }
  @keyframes lzIn{ from{ opacity:0; transform:translateX(-44px); } to{ opacity:1; transform:translateX(0); } }
  @keyframes lzGhostOut{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(-40px); } }
  @keyframes bandPop{ from{ opacity:0; transform:translateY(32px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes bandGhostOut{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(72px); } }
  .screen.switching .heroWrap, .screen.switching .leftzone, .screen.switching .band:not(.off), #ghostLeft, #ghostBand{ will-change:transform, opacity; }
  .screen.switching .heroWrap{ animation:prodGlide 1.7s cubic-bezier(.4,0,.2,1) both; }
  .screen.switching .leftzone{ animation:lzIn .9s cubic-bezier(.4,0,.2,1) both; }
  #ghostLeft{ animation:lzGhostOut .62s cubic-bezier(.4,0,.2,1) both; }
  /* entering step: bottom rail fade-slides UP with everything. leaving step: the band-ghost fade-slides DOWN out, same beat. */
  /* animate the active BAND, not the .bandwrap — a transform on the (0-height) wrapper would make it the band's containing block and park the band off-screen for the whole switch */
  .screen.switching:not(.allopts) .band:not(.off){ animation:bandPop .5s cubic-bezier(.22,1,.36,1) both; }
  #ghostBand{ animation:bandGhostOut .62s cubic-bezier(.4,0,.2,1) both; }
  @media (prefers-reduced-motion:reduce){ .screen.switching .heroWrap, .screen.switching .leftzone, .screen.switching .bandwrap, #ghostLeft, #ghostBand{ animation:none; } }
  .screen.allopts .f-ctrls{ position:fixed; top:170px; left:calc((100vw + clamp(380px,40vw,600px)) / 2); transform:translateX(-50%); z-index:34; }
  .screen.allopts .dtoggle{ position:fixed; top:172px; }   /* fixed top-left while scrolling, then fades at the SEO block (like the quick-edit cluster) */
  /* .ptitle joins this list: chrome that fades together must fade TOGETHER, or
     the title is left floating alone over the review step. */
  .screen.allopts.atend .f-ctrls, .screen.allopts.atend .dtoggle, .screen.allopts.atend .qetab, .screen.allopts.atend .ptitle{ opacity:0; pointer-events:none; transition:opacity .25s; }
  /* ===== full Cold Open scenes (verbatim styling, faithful sizes) ===== */
  /* Each step is BRACKETED by a rule above and below, close to its own
     content, with the empty space between steps left empty. A single rule
     floating midway between two steps belongs to neither of them and reads as
     decoration; a pair that hugs the step reads as its edges.
     Adjacent margins collapse, so the gap between steps is 92px, not 184. */
  /* Apple's spacing is not a fixed number — measured on
     apple.com/shop/buy-mac/mac-mini, the gap between config steps grows with
     the window (269px at 1440x800, 319-340px at 1440x1200). The rule behind
     it is geometric: gap = (viewport - step height) / 2, i.e. HALF THE
     LEFTOVER SCREEN, which is exactly what makes a centred step leave its
     neighbours off the edges. Verified at 1200 tall: with a step centred,
     0px of the previous and 7.5px of the next were visible.

     These steps average 425px, so the same rule is 50vh - 212px. Clamped so
     a short window still separates them and a very tall one does not turn the
     panel into a scroll marathon. */
  .copanel .scene{ border-bottom:1px dashed rgba(124,58,237,.16); padding:0 0 34px; margin:clamp(180px,calc(50vh - 212px),560px) 0; }
  .copanel .scene:first-child{ margin-top:0; }
  .copanel .scene:last-child{ margin-bottom:40px; }
  /* The kicker is the step's HEADER: it sits above the rule, and the rule then
     opens the block. Inside the box it was just the first line of content. */
  .copanel .sno{ font-size:.62rem; font-weight:800; letter-spacing:.26em; color:#9b7fd4; text-transform:uppercase; border-bottom:1px dashed rgba(124,58,237,.16); padding-bottom:13px; margin-bottom:4px; }
  .copanel h2{ font-family:'Montserrat',sans-serif; font-size:1.85rem; font-weight:900; letter-spacing:-.025em; margin-top:11px; line-height:1.04; } .copanel h2 em{ font-style:normal; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .copanel .ss{ font-size:.74rem; color:var(--sub); margin-top:9px; max-width:42ch; line-height:1.6; }
  .bigrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:22px; }
  .ocard{ position:relative; aspect-ratio:.78/1; border-radius:14px; overflow:hidden; cursor:pointer; box-shadow:0 14px 34px rgba(40,20,90,.22); transition:transform .22s var(--ease); }
  .ocard:hover{ transform:translateY(-6px) scale(1.02); }
  .ocard .art{ position:absolute; inset:0; } .ocard .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,10,30,0) 38%, rgba(15,10,30,.82) 100%); }
  .ocard .txt{ position:absolute; left:0; right:0; bottom:0; padding:12px 13px; color:#fff; }
  .ocard .n{ font-family:'Montserrat',sans-serif; font-size:.88rem; font-weight:800; } .ocard .d{ font-size:.54rem; color:rgba(255,255,255,.72); margin-top:2px; } .ocard .p{ font-size:.76rem; font-weight:800; margin-top:6px; } .ocard .p small{ font-size:.5rem; color:#9af6cd; font-weight:700; margin-left:4px; }
  .ocard.on{ box-shadow:0 0 0 3px var(--brand), 0 18px 40px rgba(124,58,237,.3); }
  .ocard .ptag{ position:absolute; top:9px; left:9px; z-index:2; font-size:.42rem; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--grad); border-radius:5px; padding:4px 8px; box-shadow:0 3px 9px rgba(124,58,237,.4); }
  .grplbl{ font-size:.6rem; font-weight:800; letter-spacing:.18em; color:var(--sub); text-transform:uppercase; margin:22px 0 4px; display:flex; align-items:center; gap:12px; }
  .grplbl::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(124,58,237,.2), transparent 82%); }
  .grow{ display:flex; align-items:center; flex-wrap:wrap; margin-top:10px; }
  .gop{ text-align:center; padding:8px 6px; width:122px; cursor:pointer; border-radius:14px; transition:transform .18s var(--ease); position:relative; } .gop:hover{ transform:translateY(-3px); }
  .gdv{ width:0; height:84px; border-left:1.5px dashed #c8b6ee; flex:none; }
  .gop .gbox{ height:78px; display:flex; align-items:center; justify-content:center; }
  .gop .bn{ font-size:.9rem; font-weight:800; margin-top:7px; } .gop .bx{ font-size:.58rem; color:var(--muted); font-weight:600; margin-top:2px; }
  /* discount → centred badge under the card; absolute so cards stay aligned whether or not they have one */
  .gop .be{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); margin:0; z-index:3; font-size:.5rem; font-weight:800; color:#fff; background:var(--green); border-radius:99px; padding:2px 7px; box-shadow:0 2px 6px rgba(5,150,105,.45); white-space:nowrap; }
  /* Selected: the tile itself changes, not just its label. Before this, being
     chosen only darkened the caption and lit the icon — while .popular below
     had a tinted panel AND a ring, so the suggestion looked more selected than
     the selection. */
  .gop.on{ background:rgba(124,58,237,.11); border-radius:14px; box-shadow:0 0 0 2px var(--brand), 0 6px 18px rgba(124,58,237,.22); }
  .gop.on .bn{ color:var(--bdark); }
  .gop.on .bx{ color:#6d4fc2; }
  .gmini{ border-radius:3px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 1px 3px rgba(0,0,0,.12); transition:.25s; display:block; }
  .gop.on .gmini{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; color:#fff; box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); }
  .gqty{ width:96px; height:58px; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.15rem; }
  .copanel .gfin{ width:54px; height:54px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); display:block; } .gop.on .gfin{ box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); }
  .copanel .qref{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:9px 15px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95); border-radius:14px; font-size:.66rem; font-weight:600; color:var(--ink); box-shadow:0 4px 12px rgba(60,30,130,.08); } .copanel .qref b{ color:var(--bdark); font-weight:800; }
  .scrollwrap{ margin-top:12px; } .xtrack{ display:flex; gap:8px; align-items:center; overflow-x:auto; overflow-y:visible; scrollbar-width:none; padding:8px 2px 18px; cursor:grab; } .xtrack::-webkit-scrollbar{ display:none; } .xtrack .gop{ flex:none; } .xtrack.dragging{ cursor:grabbing; user-select:none; } .xtrack.dragging .ocA{ transform:none; }
  .grsub{ font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
  /* "most popular" size — subtle highlight + ribbon (with breathing room below the header) */
  /* No panel, no ring — the “Most popular” badge is the whole signal. The tint
     and the inset ring read as “chosen”, so on first load a product appeared to
     have two selections in the same group. */
  .gop.popular{ border-radius:14px; }
  .gop .poptag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:4; font-size:.5rem; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--grad); border-radius:99px; padding:3px 9px; box-shadow:0 4px 11px rgba(124,58,237,.45); white-space:nowrap; }
  #coSizes{ margin-top:20px; }   /* room for the ribbon under the header */
  /* custom size & quantity — shared field styling: floating label, centred ×/unit, divider */
  .cfield{ position:relative; }
  .cfield label{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:.5rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#9b7fd4; white-space:nowrap; text-align:center; }
  .cinput{ width:78px; font-family:'Montserrat',sans-serif; font-size:1.28rem; font-weight:800; text-align:center; border:2px solid #e3daf4; border-radius:12px; padding:10px 8px; color:var(--bdark); background:#fff; box-shadow:0 4px 12px rgba(60,30,130,.06); transition:.16s var(--ease); }
  .cinput::placeholder{ color:#c2b3e8; text-align:center; }
  /* units field gets a centred label over the in/cm toggle, matching W/H */
  .ufield{ position:relative; display:inline-flex; }
  .ufield > label{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:.5rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#9b7fd4; white-space:nowrap; }
  .cinput:hover{ border-color:#d2c2f0; } .cinput:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(124,58,237,.16); }
  .cscust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; }
  .cscust .csprev{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; flex:none; }
  .cscust .csprevbox{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-radius:3px; box-shadow:0 6px 16px rgba(124,58,237,.3); transition:width .25s var(--ease), height .25s var(--ease); }
  .cscust .csdiv{ width:1.5px; height:50px; flex:none; background:linear-gradient(180deg,transparent,#ddd2f2 16%,#ddd2f2 84%,transparent); }
  .cscust .csx{ font-size:1.3rem; font-weight:800; color:#c9bce8; }
  /* in/cm inherits the canonical .seg/.cpill verbatim — no size/weight/shadow overrides */
  .cscust .cshint{ flex:1 1 100%; font-size:.66rem; font-weight:600; color:var(--sub); margin-top:6px; } .cscust .cshint b{ color:var(--bdark); }
  /* custom in use → inputs stay highlighted */
  .cscust.on .cinput, .qcustom.on .cinput{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,58,237,.13); }
  /* centred divider label: ─── TEXT ─── (used for "Need an exact …" in both views) */
  .dlbl{ display:flex; align-items:center; gap:14px; font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--sub); margin-top:18px; }
  .dlbl::before, .dlbl::after{ content:''; flex:1; height:1.5px; border-radius:2px; background:rgba(124,58,237,.15); }
  /* all-options: left-aligned label (line only on the right), matching the scene section labels */
  #copanel .dlbl{ gap:12px; } #copanel .dlbl::before{ display:none; }
  /* custom quantity — same treatment, no preview */
  .qcustom{ display:flex; align-items:center; gap:13px; margin-top:24px; }
  .qcustom .qsuf{ font-size:.86rem; font-weight:800; color:var(--muted); }
  /* deadline ticket — VERBATIM from proto-coldopen-poster (no liberties) */
  .dlv3{ background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden; border:1px solid #e7e0f4; margin-top:24px; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease); max-width:640px; } .dlv3:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(40,20,90,.16); }
  .dlv3 .vhead{ display:flex; align-items:center; background:var(--grad); color:#fff; padding:12px 22px; height:46px; }
  .dlv3 .vhead .svc{ font-family:'Montserrat',sans-serif; font-size:.92rem; font-weight:900; letter-spacing:.05em; }
  .dlv3 .vhead .pri{ margin-left:auto; font-size:.66rem; font-weight:800; letter-spacing:.16em; border-radius:6px; padding:5px 13px; background:linear-gradient(110deg,#60a5fa,#2563eb); box-shadow:0 2px 8px rgba(37,99,235,.45); }
  /* reflowed for the narrower rail: top rows full-width, countdown + Change date in a bottom row */
  .dlv3 .vbody{ display:flex; flex-direction:column; }
  .dlv3 .vmain{ flex:none; }
  .dlv3 .vgrid{ display:flex; border-bottom:1.5px dashed #e0d7f0; }
  .dlv3 .vc{ flex:1; padding:13px 18px; } .dlv3 .vc + .vc{ border-left:1.5px dashed #e0d7f0; }
  .dlv3 .vk{ font-size:.56rem; font-weight:800; letter-spacing:.16em; color:#9b7fd4; text-transform:uppercase; }
  .dlv3 .vv{ font-size:.82rem; font-weight:800; margin-top:3px; } .dlv3 .vv.tier{ color:#2563eb; } .dlv3 .vv small{ display:block; font-weight:600; color:var(--sub); font-size:.66rem; margin-top:2px; }
  .dlv3 .vrory{ font-family:'Montserrat',sans-serif; font-size:1.55rem; font-weight:900; line-height:1.26; padding:18px 18px 6px; } .dlv3 .vrory em{ font-style:normal; white-space:nowrap; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; } .dlv3 .vtime{ white-space:nowrap; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .dlv3 .vfoot{ display:flex; align-items:center; gap:15px; padding:12px 18px 15px; }
  .dlv3 .vbars{ width:104px; flex:none; height:34px; background:repeating-linear-gradient(90deg,#241f2e 0 2px,transparent 2px 4px,#241f2e 4px 5px,transparent 5px 9px); border-radius:2px; opacity:.85; }
  .dlv3 .vfoot > div:last-child{ margin-left:auto; text-align:right; }
  .dlv3 .vnud{ font-size:.7rem; color:var(--sub); font-weight:600; } .dlv3 .vnud b{ color:var(--bdark); }
  .dlv3 .vord{ font-size:.8rem; font-weight:800; }
  .dlv3 .vside{ display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:2px solid #e7e0f4; padding:14px 18px; text-align:left; }
  .dlv3 .vcd{ display:flex; flex-direction:column; gap:1px; }
  .dlv3 .vt{ font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .dlv3 .vtl{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .dlv3 .vbtn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--grad); border:0; color:#fff; border-radius:12px; padding:12px 16px; font-family:inherit; font-size:.76rem; font-weight:800; cursor:pointer; box-shadow:0 6px 16px rgba(124,58,237,.35); }
  .calsvg{ width:15px; height:15px; }
  /* artwork dropzone — VERBATIM Cold Open .dz (themed, not a bare dashed button) */
  .dz{ margin-top:24px; display:flex; align-items:center; gap:15px; border:1.5px dashed rgba(124,58,237,.42); border-radius:18px; background:rgba(255,255,255,.55); backdrop-filter:blur(16px); padding:17px 19px; cursor:pointer; box-shadow:0 12px 32px rgba(60,30,130,.1); transition:.2s var(--ease); max-width:640px; }
  .dz:hover{ border-color:var(--brand); transform:translateY(-2px); }
  .dz .ic{ width:44px; height:44px; border-radius:14px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 7px 16px rgba(124,58,237,.38); font-size:1rem; }
  .dz .t{ font-size:.84rem; font-weight:800; } .dz .t small{ display:block; font-size:.6rem; color:var(--sub); font-weight:500; margin-top:3px; }
  /* all-options receipt — the bottom-of-scroll breakdown (Add-to-cart is the persistent bar just below) */
  .osum{ position:relative; margin-top:34px; max-width:540px; background:#fff; border:1px solid #ece6f7; border-radius:22px; padding:26px 28px 22px; box-shadow:0 18px 44px rgba(60,30,130,.13); overflow:hidden; }
  .osum-bar{ position:absolute; top:0; left:0; right:0; height:5px; background:var(--gradwide); }
  .osum-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
  .osum-eyebrow{ font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--bdark); }
  .osum-badge{ font-size:.56rem; font-weight:800; color:var(--brand); background:rgba(124,58,237,.09); padding:5px 11px; border-radius:99px; white-space:nowrap; }
  .osum-line{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:11px 0; border-bottom:1px solid #f4f0fb; font-size:.84rem; }
  .osum-k{ color:var(--sub); font-weight:600; } .osum-v{ font-weight:800; color:var(--bdark); text-align:right; }
  .osum-totalrow{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; padding:16px 20px; background:linear-gradient(120deg,rgba(124,58,237,.08),rgba(79,110,247,.06)); border:1px solid rgba(124,58,237,.12); border-radius:14px; }
  .osum-tl{ display:flex; flex-direction:column; gap:3px; } .osum-tlbl{ font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--sub); } .osum-teach{ font-size:.68rem; font-weight:700; color:var(--muted); }
  .osum-tnum{ font-size:2rem; font-weight:900; letter-spacing:-.02em; color:var(--ink); }
  .osum-rea{ text-align:center; font-size:.66rem; color:var(--sub); font-weight:600; margin-top:16px; line-height:1.5; }
  /* ===== quick-edit "⚡ Everything" slide-down sheet (Premiere chrome) ===== */
  /* (legacy top-right Quick-edit pill removed — Quick edit is now the folder tab on #sheet2) */
  .qdim2{ position:fixed; inset:0; background:rgba(26,22,37,.34); backdrop-filter:blur(6px); z-index:44; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
  .qdim2.open{ opacity:1; pointer-events:auto; }
  /* slides in from the RIGHT */
  .qdrawer{ position:fixed; top:0; right:0; bottom:0; left:auto; width:clamp(380px,34vw,480px); background:rgba(255,255,255,.98); backdrop-filter:blur(20px) saturate(1.4); box-shadow:-16px 0 54px rgba(40,20,90,.3); z-index:45; transform:translateX(100%); transition:transform .42s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; font-family:'Inter',sans-serif; overflow:visible; }
  /* vertical folder tab — attached to the panel's left edge; pokes out while the panel is parked off-screen */
  .qetab{ position:absolute; left:-46px; top:176px; width:46px; min-height:138px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 0; background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,243,254,.97)); backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(124,58,237,.16); border-right:0; border-radius:14px 0 0 14px; box-shadow:-10px 0 24px rgba(60,30,130,.16); cursor:pointer; z-index:2; transition:background .15s var(--ease); }
  .qetab .qeic{ font-size:1.05rem; line-height:1; }
  .qetab .qet-txt{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Inter',sans-serif; font-weight:800; font-size:.76rem; letter-spacing:.06em; color:var(--bdark); transition:color .15s var(--ease); }
  .qetab:hover{ background:linear-gradient(180deg,#fff,#f3eefc); } .qetab:hover .qet-txt{ color:var(--brand); }
  .qdrawer.peek{ transform:translateX(calc(100% - 15px)); }
  .qdrawer.open{ transform:none; }
  .qdrawer-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px 16px; font-size:1.1rem; font-weight:900; border-bottom:1px solid #eee6f8; }
  .qdrawer-head small{ font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); background:rgba(124,58,237,.09); padding:3px 9px; border-radius:99px; margin-left:8px; }
  .qdrawer-x{ width:38px; height:38px; border-radius:50%; border:1.5px solid #e7ddf5; background:#f6f2fd; font-size:22px; line-height:1; cursor:pointer; color:var(--sub); }
  .qdrawer-x:hover{ color:var(--brand); border-color:var(--brand); }
  .qdrawer-body{ overflow-y:auto; padding:6px 24px 22px; flex:1; }
  /* drawer sections use the SAME tiles as the step-by-step view */
  .qdrawer-body .drow{ padding:22px 0 20px; border-bottom:1.5px dashed rgba(124,58,237,.12); }
  .qdrawer-body .drow:last-child{ border-bottom:0; }
  .qdrawer-body .dk{ display:block; font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9b7fd4; margin-bottom:11px; }
  .qdrawer-body .dtiles{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
  .qdrawer-body .dtiles .ocA{ width:calc(33.333% - 6px); min-width:0; margin:0; backdrop-filter:none; }
  .qdrawer-body .dtiles .ocA .qbadge, .qdrawer-body .dtiles .ocA .qsave{ font-size:.42rem; padding:2px 6px; }
  /* v2 (panel) compressed: smaller tiles than the default Guided/Everything sizing */
  .qdrawer-body .ocA{ padding:9px 7px 10px; border-radius:11px; }
  .qdrawer-body .ocA .gb{ height:27px; margin-bottom:5px; }
  .qdrawer-body .ocA .bn2{ font-size:.67rem; } .qdrawer-body .ocA .bx{ font-size:.5rem; margin-top:1px; }
  /* orientation + size tiles: drop the subtext */
  .qdrawer-body .ocA.otile .bx, .qdrawer-body .ocA[data-size] .bx{ display:none; }
  /* size tiles: 4 per row, a touch taller */
  .qdrawer-body .dtiles .ocA[data-size]{ width:calc(25% - 6px); }
  .qdrawer-body .dtiles .ocA[data-size] .gb{ height:34px; }
  .qdrawer-body .dseg{ display:block; }
  .qdrawer-body .dcustom{ margin-top:2px; }
  .qdrawer-body .dcustom .cscust{ margin-top:0; gap:11px; justify-content:flex-start; }
  /* custom-qty tile in the drawer (cloned from the band, re-sized for the panel) */
  .qdrawer-body .dtiles-qty{ row-gap:12px; }
  /* quantity tiles: 4 per row, fixed 44px tall */
  .qdrawer-body .dtiles-qty .ocA.qty{ width:calc(25% - 6px); height:62px; padding:8px 6px 14px; }
  .qdrawer-body .dtiles-qty .ocA.qty .gb{ height:25px; margin-bottom:0; }
  .qdrawer-body .dtiles-qty .ocA.qty .gqn{ font-size:1.05rem; }
  .qdrawer-body .dtiles-qty .ocA.qty .qper{ margin-top:4px; }   /* padding under the $/ea subtext, clears the discount badge */
  /* custom input box = one tile cell, SAME height as the qty tiles (!important beats the cloned inline height from matchQccHeight) */
  .qdrawer-body .dtiles-qty .qpin{ flex:none; width:calc(25% - 6px); align-self:flex-start; }
  .qdrawer-body .dtiles-qty .qpin .qcc{ width:100%; height:62px !important; }
  .qdrawer-body .dtiles-qty .qpin .qcc-in{ font-size:1rem; }
  .qdrawer-body .dtiles-qty .qcc-div{ display:none; }
  /* drawer footer MIRRORS the full-page buy bar */
  .qdrawer-foot{ border-top:1px solid #eee6f8; padding:16px 24px 18px; display:flex; flex-direction:column; gap:13px; background:#fff; }
  .qdf-hp{ display:flex; flex-direction:column; gap:2px; }
  .qdf-top{ display:flex; align-items:center; gap:9px; min-height:15px; }
  .qdf-lbl{ font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--sub); }
  .qdf-top .pdelta{ font-family:'Montserrat',sans-serif; font-size:.9rem; font-weight:900; opacity:0; }
  .qdf-main{ display:flex; align-items:baseline; gap:10px; }
  .qdf-num{ font-family:'Montserrat',sans-serif; font-size:1.85rem; font-weight:700; letter-spacing:-.02em; color:var(--brand); }
  .qdf-each{ font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700; color:var(--sub); }
  .qdf-sub{ font-family:'Inter',sans-serif; font-size:.76rem; color:var(--sub); font-weight:600; margin-top:3px; }
  .qdf-acts{ display:flex; align-items:center; gap:13px; }
  .qdf-save{ flex:none; height:48px; }
  .qdf-acts .actdiv{ width:0; height:30px; flex:none; border-left:1.5px dashed #c7b8ec; }
  .qdf-add{ flex:1; justify-content:center; height:52px; border-radius:13px; }
  /* Guided had it absolute, so it scrolled away with the page while Everything
     kept it pinned. Fixed in both: the total is live feedback on the build in
     progress, not a price tag — it changes with almost every click, and the
     answer to “what is this going to cost me?” should never require scrolling
     to find. Uncertainty is the thing that stalls a build, not the number. */
  .f-buy{ position:fixed; }
  .qdim{ position:fixed; inset:0; background:rgba(26,22,37,.34); backdrop-filter:blur(6px); z-index:44; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); }
  .qdim.open{ opacity:1; pointer-events:auto; }
  .qsheet{ position:fixed; top:0; left:50%; width:min(880px,94vw); z-index:46; background:rgba(255,255,255,.97); backdrop-filter:blur(30px) saturate(1.5); border:1px solid rgba(255,255,255,1); border-top:0; border-radius:0 0 26px 26px; box-shadow:0 50px 100px rgba(30,15,70,.42); padding:14px 30px 18px; text-align:left; transform:translate(-50%,calc(-100% - 16px)); transition:transform .6s cubic-bezier(.16,1,.3,1); max-height:calc(100vh - 32px); overflow-y:auto; scrollbar-width:none; }
  .qsheet::-webkit-scrollbar{ display:none; }
  .qsheet.open{ transform:translate(-50%,16px); }
  .qsheet .handle{ width:46px; height:4.5px; border-radius:3px; background:#ddd2f0; margin:0 auto 10px; }
  .qlbl{ text-align:center; font-size:.74rem; font-weight:800; color:var(--bdark); margin-bottom:9px; } .qlbl small{ font-weight:600; color:var(--muted); margin-left:7px; }
  .qrow{ display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1.5px dashed rgba(124,58,237,.1); } .qrow:last-of-type{ border-bottom:0; }
  .qrow .qk{ width:84px; font-size:.5rem; font-weight:800; letter-spacing:.12em; color:#9b7fd4; text-transform:uppercase; flex:none; }
  .qrow .qopts{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; } .qrow .qopts.scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .qrow .qopts.scroll::-webkit-scrollbar{ display:none; }
  .qchip{ display:flex; align-items:center; gap:7px; font-size:.66rem; font-weight:700; color:var(--ink); background:rgba(255,255,255,.9); border:1px solid #eee9f8; box-shadow:0 2px 7px rgba(60,30,130,.09); border-radius:11px; padding:8px 12px; cursor:pointer; white-space:nowrap; transition:.16s var(--ease); }
  .qchip:hover{ border-color:#d6c8f5; } .qchip small{ color:var(--muted); font-weight:600; }
  .qchip.on{ box-shadow:0 0 0 2px var(--brand), 0 5px 14px rgba(124,58,237,.28); color:var(--bdark); background:#fff; }
  .qchip.dashy{ background:transparent; border:1.5px dashed #b79ae8; color:var(--brand); box-shadow:none; font-weight:800; }
  .qchip .sw{ width:16px; height:13px; border-radius:3px; box-shadow:0 1px 3px rgba(60,30,130,.3); flex:none; }
  .qchip .glyw{ display:block; border-radius:2.5px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #d8cbf0; flex:none; }
  .qfoot{ display:flex; align-items:center; gap:16px; margin-top:10px; padding-top:12px; border-top:1.5px solid #efe8fb; }
  .qfoot .tot{ font-size:1.25rem; font-weight:800; } .qfoot .tots{ font-size:.54rem; color:var(--sub); font-weight:600; }
  .qfoot .done{ margin-left:auto; font-size:.64rem; font-weight:800; color:#fff; background:var(--grad); border:0; border-radius:99px; padding:11px 20px; cursor:pointer; box-shadow:0 8px 20px rgba(124,58,237,.32); }
  /* ===== stage ===== */
  .canvas{ position:absolute; inset:162px 0 0; z-index:5; }
  .canvas .glow{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:900px; height:620px; background:radial-gradient(50% 50% at 50% 50%, rgba(168,130,255,.32), transparent 70%); filter:blur(26px); }
  /* shrink-to-fit: heroWrap is the gap between the pills and the band's solid area; the product flex-centers and scales down to stay fully visible (never clipped by the rail or hidden under the band) */
  .heroWrap{ position:absolute; left:0; right:0; top:0; bottom:clamp(210px,25vh,262px); display:flex; align-items:center; justify-content:center; padding:62px 24px 0; z-index:6; transition:bottom .5s var(--ease); }
  /* step-by-step: clear the floating rail on the left (symmetric, so the poster stays centred & never hides behind it) */
  .screen:not(.allopts) .heroWrap{ padding-left:clamp(350px,24vw,440px); padding-right:clamp(290px,20vw,360px); }
  /* exact proportions: JS (fitPoster) sets width/height to the real aspect ratio, scaled to fit the stage */
  .poster{ position:relative; width:480px; height:720px; background:linear-gradient(160deg,#1a0f33 0%,#3b1f73 46%,#b53d8e 100%); border-radius:0; overflow:hidden; box-shadow:0 50px 95px -30px rgba(50,25,110,.55), 0 0 80px rgba(124,58,237,.16); transition:width .5s var(--ease), height .5s var(--ease); }
  .part{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:8% 7%; color:#fff; }
  .part::before{ content:''; position:absolute; right:-8%; top:9%; width:58%; height:46%; border-radius:50%; background:radial-gradient(circle at 42% 40%, rgba(255,214,90,.9), rgba(255,120,60,.46) 55%, transparent 72%); }
  .part .pk{ position:relative; font-size:.6rem; letter-spacing:.4em; font-weight:700; opacity:.82; text-transform:uppercase; }
  .part .pt{ position:relative; font-family:'Montserrat'; font-weight:900; font-size:clamp(2.2rem,5vw,4rem); line-height:.95; letter-spacing:-.02em; }
  .part .pt em{ font-style:normal; color:#ffd75a; }
  .part .pd{ position:relative; }
  .part .pdt{ font-weight:900; font-size:clamp(1rem,1.8vw,1.4rem); } .part .pv{ font-size:.7rem; font-weight:600; opacity:.85; margin-top:5px; letter-spacing:.04em; }
  /* --bleed is computed by computeGuides() in inch-true pixels and set on the
     CARD; the guides inherit it. It must NOT be declared here: a custom property
     declared on the element itself beats the inherited one, and `--bleed:16px`
     on .sgp pinned every bleed and safe line to 16px at any scale — on a
     630px business card true bleed is 22.5px, so art that correctly reached the
     bleed frame looked like it overshot the (wrong) line. 16px is a fallback only. */
  .sgp{ position:absolute; inset:0; z-index:6; opacity:0; pointer-events:none; transition:opacity .3s; }
  .poster.proof .sgp{ opacity:1; }
  .sgp .gp-bleed{ position:absolute; inset:calc(-1 * var(--bleed, 16px)); border:1.5px dashed rgba(96,165,250,.97); border-radius:var(--gbleed,0); }
  .sgp .gp-trim{ position:absolute; inset:0; border:2px solid rgba(239,68,68,.97); border-radius:inherit; }
  .sgp .gp-safe{ position:absolute; inset:var(--bleed, 16px); border:1.5px dashed #059669; border-radius:var(--gsafe,0); }
  .poster.proof{ overflow:visible; }   /* the bleed frame lives outside the trim */
  .poster.proof .sgp{ border-radius:inherit; }
  .pf-flag{ position:absolute; left:50%; top:44%; transform:translateX(-50%); z-index:9; display:none; align-items:center; gap:7px; pointer-events:none; }
  .poster.proof:not(.pf-ok) .pf-flag{ display:flex; }
  .pf-dot{ width:23px; height:23px; border-radius:50%; background:#f59e0b; color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 0 rgba(245,158,11,.6); animation:pulse 1.6s infinite; }
  .pf-tag{ background:rgba(20,12,40,.92); color:#fff; font-size:.58rem; font-weight:700; padding:5px 10px; border-radius:8px; white-space:nowrap; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)} 70%{box-shadow:0 0 0 12px rgba(245,158,11,0)} 100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
  .pfbar{ display:none; align-items:center; gap:11px; position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(176px,23vh,240px); background:#fff; border-radius:99px; padding:8px 8px 8px 16px; box-shadow:0 6px 18px rgba(60,30,130,.12); z-index:12; }
  .pfbar.show{ display:inline-flex; }
  /* Everything view: pull the proof legend up under the sticky hero (centre it over the stage) */
  .screen.allopts .pfbar{ position:fixed; left:calc((100vw + clamp(380px,40vw,600px)) / 2); bottom:clamp(36px,6vh,74px); }
  .pfbar .lg{ display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:800; color:var(--ink); } .pfbar .lg i{ width:15px; height:9px; border-radius:2px; }
  .pfbar .sep{ width:1px; height:15px; background:#e6def4; }
  .pfbar .pf-zoom{ display:inline-flex; align-items:center; gap:5px; border:0; cursor:pointer; font:inherit; font-size:.62rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#7c3aed,#5b21b6); padding:6px 11px; border-radius:99px; box-shadow:0 2px 10px rgba(124,58,237,.3); white-space:nowrap; }
  .pfbar .pf-zoom:hover{ filter:brightness(1.08); }
  .poster.proof.realart{ cursor:zoom-in; }  /* guides on + real art = the artwork itself opens the viewer */
  .artctrls .ac-num{ display:inline-flex; align-items:center; gap:2px; }
  .artctrls .ac-num input{ width:46px; font:inherit; font-size:.66rem; font-weight:800; color:var(--bdark); text-align:right; padding:3px 4px; border:1px solid #e6def4; border-radius:6px; background:#fff; -moz-appearance:textfield; }
  .artctrls .ac-num input::-webkit-outer-spin-button, .artctrls .ac-num input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .artctrls .ac-num input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,58,237,.18); }
  .artctrls .ac-num b{ font-size:.62rem; color:var(--bdark); }
  .pfbar .pf-warn{ display:inline-flex; align-items:center; gap:9px; font-size:.64rem; font-weight:800; color:#b45309; }
  .pfbar .pf-ok2{ display:none; align-items:center; gap:8px; font-size:.64rem; font-weight:800; color:#047857; }
  .pfbar.pf-ok .pf-warn{ display:none; } .pfbar.pf-ok .pf-ok2{ display:inline-flex; }
  /* ===== Artwork proof — FULL-SCREEN design mock (real upload affordance + EXACT print geometry) ===== */
  .dz.over{ border-color:var(--brand); background:rgba(124,58,237,.07); }
  .dz.done{ border-style:solid; border-color:#10b981; background:rgba(16,185,129,.06); }
  /* The viewer is the page's own chassis, not a dark room: the same lavender
     radial ground as .screen, Montserrat display, Inter body, the same purple.
     It used to be #13092a with pink/white guides — nothing else on the site
     looks like that, and the guide colours disagreed with the hero's. */
  .prooffs{ position:fixed; inset:0; z-index:60; display:none; flex-direction:column; font-family:'Montserrat',sans-serif; color:var(--ink); opacity:0; transition:opacity .25s var(--ease);
    background: radial-gradient(50% 50% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 64%), radial-gradient(130% 120% at 50% 12%, #f6f1ff 0%, #e9def9 48%, #d5c5f0 100%); }
  /* ONE typeface in here — the storefront theme is Montserrat throughout; every control inherits it */
  .prooffs button, .prooffs input{ font-family:inherit; }
  .prooffs.open{ display:flex; opacity:1; }
  .prooffs-bar{ flex:none; display:flex; align-items:center; gap:18px; padding:14px clamp(18px,3vw,40px); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid #ece6f7; }
  .prooffs-id{ display:flex; flex-direction:column; min-width:0; }
  .prooffs .proofttl{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; }
  .prooffs .proofsub{ font-size:.72rem; font-weight:600; color:var(--sub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .prooffs .proofx{ margin-left:auto; }
  .prooffs .proofx{ flex:none; width:38px; height:38px; border-radius:50%; border:1.5px solid #e6def4; background:#fff; font-size:21px; line-height:1; color:var(--bdark); cursor:pointer; box-shadow:0 4px 14px rgba(60,30,130,.1); }
  .prooffs .proofx:hover{ border-color:var(--brand); color:var(--brand); }
  .proofpane{ flex:1; min-height:0; display:none; }
  .prooffs.s-check #proofCheck{ display:flex; } .prooffs.s-result #proofResult{ display:grid; }
  /* STATE 2 · checking */
  .proof-check{ flex-direction:column; align-items:center; justify-content:center; gap:16px; }
  .proofspin{ width:52px; height:52px; border-radius:50%; border:4px solid #ece4fb; border-top-color:var(--brand); animation:proofspin .8s linear infinite; }
  @keyframes proofspin{ to{ transform:rotate(360deg); } }
  .proof-check .pc-t{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.15rem; color:var(--ink); }
  .proof-check .pc-s{ font-size:.8rem; font-weight:600; color:var(--sub); }
  /* STATE 3 · result — preview + sidebar */
  .proof-result{ grid-template-columns:minmax(0,1fr) clamp(340px,28vw,440px); }
  .proofview{ min-width:0; display:flex; flex-direction:column; padding:clamp(16px,2.4vw,34px); }
  .proofstage-wrap{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; }
  .proofstage{ position:relative; box-shadow:0 50px 95px -30px rgba(50,25,110,.55), 0 0 80px rgba(124,58,237,.16); }
  .proofart{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(135deg,#a855f7,#7c3aed 42%,#4f6ef7 88%); background-repeat:no-repeat; }
  .proofart.has-art{ background-color:#fff; }   /* paper under a transparent PNG, same as the hero */
  .proofart.has-art::after{ display:none; }  /* the real file is painted — no placeholder text over it */
  .proofstage-wrap{ cursor:default; } .proofstage-wrap:has(.proofstage[style*="width"]) { cursor:grab; }
  .proofart::after{ content:'YOUR ARTWORK'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:900; font-size:.7rem; letter-spacing:.28em; color:rgba(255,255,255,.5); }
  .proofstage .pg{ position:absolute; pointer-events:none; }
  /* the SAME three colours as the hero's guides: blue dashed bleed, red trim, green dashed safe */
  .pg-bleed{ inset:0; outline:1.5px dashed rgba(96,165,250,.97); outline-offset:-1px; }
  .pg-trim{ border:2px solid rgba(239,68,68,.97); }            /* inset set EXACTLY by JS */
  .pg-safe{ border:1.5px dashed #059669; }                     /* inset set EXACTLY by JS; the site green, same as the hero */
  .proofstage.warn .pg-safe{ border-color:#f59e0b; box-shadow:0 0 0 1px rgba(245,158,11,.5); }
  /* .pglabel / .lbl-* / .prooflegend: proof-viewer.css (labels cluster top-left; trim/safe offsets set by JS) */
  .proofview-foot{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; }
  .proofhint{ font-size:.66rem; font-weight:700; color:var(--muted); white-space:nowrap; }
  /* sidebar */
  .proofside{ display:flex; flex-direction:column; gap:14px; padding:24px; background:rgba(255,255,255,.92); border-left:1px solid #ece6f7; overflow:auto; }
  /* face cards, placement bar, check rows, guide labels, legend, zoom pill and
     guides toggle now live in assets/css/products/proof-viewer.css — the ONE
     viewer vocabulary shared with the /proof/{token} landing page. */
  .proofside-file{ font-size:.74rem; font-weight:700; color:var(--sub); padding-bottom:13px; border-bottom:1px solid #eee6f8; word-break:break-all; }
  .proofdpi{ display:flex; align-items:center; gap:10px; }
  .proofdpi-n{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:2.1rem; line-height:1; color:var(--bdark); }
  .proofdpi-u{ font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); display:flex; flex-direction:column; gap:1px; }
  .proofdpi-u small{ font-size:.58rem; font-weight:700; color:var(--muted); letter-spacing:0; text-transform:none; }
  .proofdpi-badge{ margin-left:auto; font-size:.6rem; font-weight:800; padding:5px 11px; border-radius:99px; white-space:nowrap; }
  .proofdpi-badge.ok{ color:#047857; background:rgba(16,185,129,.12); } .proofdpi-badge.warn{ color:#b45309; background:rgba(180,83,9,.13); }
  /* .checklist / .ck rows: proof-viewer.css */
  .proof-toggle{ align-self:flex-start; background:none; border:0; color:var(--brand); font-weight:800; font-size:.72rem; cursor:pointer; padding:2px 0; }
  .proofside-spacer{ flex:1; min-height:10px; }
  .proofside-foot{ display:flex; gap:10px; }
  .proofreplace{ flex:none; background:transparent; border:1.6px dashed #c7b8ec; border-radius:12px; padding:0 18px; height:50px; font-weight:800; color:var(--bdark); cursor:pointer; }
  .proofreplace:hover{ border-color:var(--brand); color:var(--brand); }
  .proofapprove{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(120deg,#8b5cf6,#6d28d9); color:#fff; border:0; border-radius:13px; height:50px; font-weight:800; font-size:.95rem; cursor:pointer; box-shadow:0 10px 24px -4px rgba(109,40,217,.5), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .15s var(--ease); }
  .proofapprove:hover{ transform:translateY(-2px); }
  @media(max-width:820px){ .proof-result{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; } .proofview-foot{ flex-direction:column; align-items:stretch; } .proofside{ flex-direction:row; flex-wrap:wrap; align-items:center; } .proofside-spacer{ display:none; } }
  /* proof controls — zoom + guides toggle */
  /* .proofctrls / .pvz* / .pvtoggle: proof-viewer.css */
  .proofstage.noguides .pg, .proofstage.noguides .pglabel{ display:none; }
  /* larger Guided-view upload dropzone */
  .dz-guided{ margin-top:14px; width:100%; max-width:520px; align-self:center; flex-direction:column; justify-content:center; text-align:center; gap:11px; padding:clamp(18px,3vh,30px); min-height:clamp(116px,17vh,168px); border-width:2px; }
  .dz-guided .t{ font-size:.95rem; } .dz-guided .ic{ width:54px; height:54px; font-size:1.3rem; border-radius:16px; }
  /* uploaded artwork superimposed on the hero stage — MOCK sample art (real file render is build-phase) */
  .poster.hasart{ background:linear-gradient(135deg,#f59e0b,#ec4899 32%,#7c3aed 64%,#2563eb); }
  /* in-context artwork file-check card — replaces the dropzone after upload (stays in the configurator) */
  .dz.filled{ display:block; cursor:default; border:1px solid #ece6f7; background:#fff; padding:0; min-height:0; overflow:hidden; box-shadow:0 18px 44px rgba(60,30,130,.13); }
  .dz.filled:hover{ transform:none; border-color:#ece6f7; }
  /* widen the Guided dropzone once filled — the boarding-pass card needs more room than the empty drop target */
  .dz-guided.filled{ max-width:680px; }
  /* ===== chosen file-check cards: DC1 (Everything) · GX9 (Guided) ===== */
  .fck-bigchk{ width:50px; height:50px; color:#10b981; } .fck-bigchk svg{ width:100%; height:100%; display:block; } .fck-bigchk.warn{ color:#f59e0b; }
  .fck-passlbl{ font-size:.48rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:#059669; } .fck-passlbl.warn{ color:#b45309; }
  .fck-h{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink); }
  .fck-dim{ font-family:'Montserrat',sans-serif; font-weight:900; letter-spacing:-.01em; color:var(--bdark); line-height:.9; white-space:nowrap; } .fck-dim .u{ font-size:.4em; font-weight:800; color:var(--muted); }
  .fck-chip{ display:inline-flex; align-items:center; gap:5px; font-size:.55rem; font-weight:800; letter-spacing:.03em; border-radius:99px; padding:4px 11px; background:linear-gradient(110deg,#10b981,#059669); color:#fff; box-shadow:0 3px 10px rgba(5,150,105,.3); white-space:nowrap; } .fck-chip.warn{ background:linear-gradient(110deg,#fbbf24,#f59e0b); box-shadow:0 3px 10px rgba(245,158,11,.3); }
  .fck-file{ font-size:.68rem; font-weight:700; color:var(--sub); } .fck-file b{ color:var(--ink); font-weight:800; }
  .fck-cells4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .fck-cell{ background:#faf7fe; border:1px solid #f0e9fb; border-radius:9px; padding:8px 11px; } .fck-cell.ok{ background:#ecfaf4; border-color:#cdeede; } .fck-cell.bad{ background:#fff7ec; border-color:#f5e3c4; }
  .fck-cell .cl{ font-size:.5rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; } .fck-cell .cv{ display:block; font-weight:800; font-size:.78rem; color:var(--bdark); margin-top:2px; } .fck-cell.bad .cv{ color:#b45309; }
  .fck-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px; border-radius:9px; border:0; background:var(--grad); color:#fff; font-weight:800; font-size:.74rem; cursor:pointer; box-shadow:0 8px 18px -4px rgba(109,40,217,.42); white-space:nowrap; } .fck-btn.done{ background:rgba(16,185,129,.16); color:#047857; box-shadow:none; }
  .fck-ghost{ height:36px; padding:0 13px; border-radius:9px; border:1.4px solid #e6dff2; background:#fff; color:var(--bdark); font-weight:800; font-size:.7rem; cursor:pointer; white-space:nowrap; }
  .fck-lnk{ background:none; border:0; color:var(--brand); font-weight:800; font-size:.72rem; cursor:pointer; padding:3px 0; white-space:nowrap; } .fck-lnk:hover{ text-decoration:underline; } .fck-lnk.mut{ color:var(--sub); }
  /* DC1 — Everything: big check left · details right · tools bottom */
  .fck-dc .fck-top{ display:flex; align-items:stretch; }
  .fck-dc .fck-lc{ flex:none; width:86px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:16px 0; }
  .fck-dc .fck-dv{ width:0; border-left:1.5px dashed #d8cef0; align-self:stretch; margin:15px 0; }
  .fck-dc .fck-det{ flex:1; padding:15px 17px; min-width:0; }
  .fck-dc .fck-hdrow{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .fck-dc .fck-tools{ display:flex; align-items:center; gap:14px; padding:11px 16px; border-top:1px solid #f0e9fb; background:#faf8fd; }
  /* GX9 — Guided: boarding pass + consolidated check + tear-off stub */
  .fck-pass{ display:flex; align-items:stretch; position:relative; }
  /* corner glow removed — kept the card flat & clean in both pass and warn states */
  .fck-fline{ display:flex; align-items:center; gap:7px; margin-top:5px; font-size:.68rem; font-weight:700; color:var(--sub); }
  .fck-fline .fck-fn{ font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58%; }
  .fck-pass .fck-pcheck{ flex:none; align-self:center; width:82px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding-left:8px; position:relative; z-index:2; }
  .fck-pass .fck-pvd{ width:0; border-left:1.5px dashed #d8cef0; align-self:stretch; margin:16px 0 16px 16px; position:relative; z-index:2; }
  .fck-pass .fck-pbody{ flex:1; padding:15px 17px; min-width:0; position:relative; z-index:2; }
  .fck-pass .fck-hdrow{ display:flex; align-items:center; gap:10px; }
  .fck-pass .fck-stub{ width:150px; flex:none; border-left:2px dashed #e0d6f2; background:#faf8fd; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:13px; position:relative; z-index:2; } .fck-pass .fck-stub::before,.fck-pass .fck-stub::after{ content:''; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:#efe9fb; } .fck-pass .fck-stub::before{ top:-8px; } .fck-pass .fck-stub::after{ bottom:-8px; }
  .afc{ position:relative; padding:17px 18px 15px; display:flex; flex-direction:column; gap:13px; text-align:left; }
  .afc::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gradwide); }
  .afc-checking{ align-items:center; justify-content:center; min-height:140px; gap:9px; text-align:center; }
  .afc-spin{ width:34px; height:34px; border-radius:50%; border:3px solid #ece4fb; border-top-color:var(--brand); animation:proofspin .8s linear infinite; }
  .afc-ct{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:.92rem; color:var(--ink); } .afc-cs{ font-size:.64rem; font-weight:600; color:var(--sub); }
  /* (legacy .afc result-card styles removed — superseded by the .fck cards; .afc/.afc-checking spinner above is still used) */
  .pf-fix{ background:var(--grad); color:#fff; border:0; border-radius:8px; padding:6px 12px; font-family:inherit; font-weight:800; font-size:.6rem; cursor:pointer; }
  .pf-replay{ background:none; border:0; color:#9b7fd4; cursor:pointer; font-size:.82rem; }
  /* ===== bands ===== */
  /* band = a PROPORTIONAL target (~22% of viewport) with legibility/touch guardrails, content vertically centred — so it scales smoothly with the screen like the hero instead of jumping at clamp extremes */
  /* band sits just above the buy bar (4px), content bottom-anchored (flex-end) so there's no dead gap under the Next button; smaller min-height */
  .band{ position:absolute; left:0; right:0; bottom:calc(clamp(84px,10.5vh,104px) + 4px); z-index:10; text-align:center; padding:clamp(8px,1.1vh,14px) 40px clamp(4px,0.6vh,8px); min-height:clamp(50px,6vh,90px); display:flex; flex-direction:column; justify-content:flex-end; background:none; transition:transform .44s cubic-bezier(.22,1,.36,1), opacity .34s ease; will-change:transform, opacity; }
  .band.off{ opacity:0; transform:translateY(42px); pointer-events:none; transition:transform .3s cubic-bezier(.4,0,.7,.2), opacity .22s ease; }
  .bq{ font-family:'Montserrat',sans-serif; font-size:clamp(1.1rem,1.8vw,1.55rem); font-weight:900; letter-spacing:-.02em; }
  .bq em{ font-style:normal; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .bs{ font-size:clamp(.6rem,.82vw,.72rem); color:var(--sub); font-weight:600; margin-top:2px; }
  .optrow{ display:flex; gap:11px; padding:14px 0 2px; justify-content:center; align-items:stretch; flex-wrap:wrap; }
  /* tiles scaled down ~10% (width · padding · glyph · text all reduced) */
  .ocA{ width:clamp(112px,9.8vw,168px); background:rgba(255,255,255,.85); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.95); border-radius:13px; padding:clamp(13px,1.6vh,18px) 11px clamp(12px,1.5vh,17px); text-align:center; cursor:pointer; box-shadow:0 8px 20px rgba(60,30,130,.1); transition:transform .18s var(--ease), box-shadow .18s; flex:none; position:relative; }
  .ocA:hover{ transform:translateY(-4px); }
  /* gb tall enough to hold the preview glyphs, with clear space before the label so text never crowds the icon */
  .ocA .gb{ height:clamp(44px,4.4vh,50px); display:flex; align-items:center; justify-content:center; margin-bottom:9px; }
  .ocA .bn2{ font-size:clamp(.69rem,.92vw,.83rem); font-weight:800; } .ocA .bx{ font-size:clamp(.53rem,.74vw,.63rem); color:var(--muted); font-weight:600; margin-top:2px; }
  .ocA.on{ box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); background:rgba(255,255,255,.97); }   /* selected: NO upward shift — stays in line */
  /* purple circle-check-big badge on every selected tile (white check on a purple disc, top-right).
     PURPLE everywhere, rail included. Green was tried and rejected: the brand colour IS the
     selection colour here, and a green tick read as a system/validation state rather than as the
     customer's own choice. */
  /* lucide circle-check-big (white on a purple disc) — Guided tiles: top-right of the TILE */
  .ocA.on::after{ content:''; position:absolute; top:-9px; right:-9px; width:23px; height:23px; z-index:4; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%237c3aed'/%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m9 11 3 3L22 4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(124,58,237,.45)); }
  /* Everything view: badge tucked onto the top-right CORNER of the image ICON itself (the centred glyph) — not the wide invisible tile box — so it never floats away in empty space */
  .gop.on .gbox > span, .ocard.on .art{ position:relative; }
  .gop.on .gbox > span::after, .ocard.on .art::after{ content:''; position:absolute; top:-8px; right:-8px; width:21px; height:21px; z-index:6; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%237c3aed'/%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m9 11 3 3L22 4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 2px 5px rgba(124,58,237,.45)); }
  .ocard.on .art::after{ top:12px; right:12px; }
  /* size step: orientation TILES sit left of the size tiles, split by a dashed divider */
  .sizewrap{ display:flex; align-items:flex-start; justify-content:center; gap:0; flex-wrap:wrap; padding:14px 0 2px; }
  /* The step rail is a FIXED left overlay (.f-rail2: left clamp(20,3vw,60) +
     width clamp(208,15vw,272)), while a band spans the full viewport and centres
     its content — so wide option rows slide UNDERNEATH the rail instead of
     wrapping. Reserving the rail's footprint on BOTH sides keeps the row
     optically centred and makes it wrap before it can collide. Needed once a
     band carries three groups (orientation + sides + sizes); it also closes the
     few pixels the two-group bands were already overlapping by. */
  .band .sizewrap, .band .optrow{
    max-width:calc(100vw - 2 * (clamp(20px,3vw,60px) + clamp(208px,15vw,272px) + 16px));
    margin-left:auto; margin-right:auto; }
  .ogroup{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  /* Sides-products carry a dedicated first band (data-band="7") for
     orientation + print sides, so the size band never crowds past two groups
     and every chip stays FULL SIZE — one chip width and height page-wide.
     The grplbl inside a band .ogroup drops its section top-margin. */
  .band .ogroup .grplbl{ margin-top:0; }
  /* One chip height across the page: long option subs clamp to two lines and
     every band tile meets the same minimum, so a chip with a two-line
     description reads as the same card as one with a bare label. */
  .bandwrap .ocA .bx{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ogroup-lbl{ font-size:.5rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#9b7fd4; }
  .otiles{ display:flex; gap:9px; }
  .szgroup .optrow{ padding:0; }
  .ovdiv{ align-self:stretch; width:0; flex:none; border-left:1.6px dashed #b3a0e3; margin:26px 20px 6px; }
  .ocA.otile{ }   /* same size as the size tiles (inherits base .ocA width + the 2-line height) */
  /* ── substrate axes (rigid signs): thickness / print-method rails. Each rail is a
     plain .ogroup so it inherits the tile anatomy the size + sides rails already use.
     .axwrap wraps to a second line on narrow viewports rather than squeezing tiles. */
  .axwrap{ flex-wrap:wrap; row-gap:6px; }
  .axsw{ background:repeating-linear-gradient(135deg,#efeaf9 0 5px,#ded3f4 5px 10px); border:1px solid #e4dbf4; }
  /* select-kind option groups (7+ options — docs/v2/option-schema.md): the
     dropdown flavour of the vopt tiles, one control per group */
  .voptsel{ font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600; color:var(--ink); background:rgba(255,255,255,.92); border:1.4px solid #ddd2f2; border-radius:10px; padding:10px 34px 10px 13px; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:15px; max-width:100%; }
  .voptsel:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
  /* ── booklet (proto-booklet-v1) — glyphs and stage, reused not reinvented ── */
  .obk2{ position:relative; width:66px; height:38px; margin:0 auto; filter:drop-shadow(0 4px 5px rgba(60,30,130,.28)); }
  .obk2 .lf,.obk2 .rt{ position:absolute; bottom:3px; width:31px; height:27px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; }
  .obk2 .lf{ left:1px; transform:skewY(7deg); border-radius:4px 0 0 4px; border-right:1px solid #c8b6ee; }
  .obk2 .rt{ right:1px; transform:skewY(-7deg); border-radius:0 4px 4px 0; border-left:0; }
  .obk2.p2 .lf{ box-shadow:-2px 2px 0 -1px #fff,-2px 2px 0 0 #d8cbf0; } .obk2.p2 .rt{ box-shadow:2px 2px 0 -1px #fff,2px 2px 0 0 #d8cbf0; }
  .obk2.p3 .lf{ box-shadow:-2px 2px 0 -1px #fff,-2px 2px 0 0 #d8cbf0,-4px 4px 0 -1px #fff,-4px 4px 0 0 #d8cbf0; } .obk2.p3 .rt{ box-shadow:2px 2px 0 -1px #fff,2px 2px 0 0 #d8cbf0,4px 4px 0 -1px #fff,4px 4px 0 0 #d8cbf0; }
  .obk2.p4 .lf{ box-shadow:-2px 2px 0 -1px #fff,-2px 2px 0 0 #d8cbf0,-4px 4px 0 -1px #fff,-4px 4px 0 0 #d8cbf0,-6px 6px 0 -1px #fff,-6px 6px 0 0 #d8cbf0; } .obk2.p4 .rt{ box-shadow:2px 2px 0 -1px #fff,2px 2px 0 0 #d8cbf0,4px 4px 0 -1px #fff,4px 4px 0 0 #d8cbf0,6px 6px 0 -1px #fff,6px 6px 0 0 #d8cbf0; }
  .obk2 .pgL,.obk2 .pgR{ position:absolute; top:50%; transform:translateY(-46%); font-family:'Montserrat',sans-serif; font-weight:900; z-index:2; }
  .obk2 .pgL{ left:0; width:32px; text-align:center; font-size:.82rem; color:var(--bdark,#5b21b6); }
  .obk2 .pgR{ right:0; width:32px; text-align:center; font-size:.6rem; color:#9b7fd4; letter-spacing:.06em; }
  .gbook{ width:40px; height:30px; position:relative; z-index:2; display:flex; }
  .gbook i{ flex:1; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #d8cbf0; } .gbook i:first-child{ border-radius:3px 0 0 3px; border-right:0; } .gbook i:last-child{ border-radius:0 3px 3px 0; background:linear-gradient(200deg,#fff,#e7defa); }
  .pgmore{ position:relative; }
  .pgmore.on{ box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); }
  .pgmore .pgmore-bx{ font-weight:700; }
  /* the More popover — the page's own dropdown language, never the browser menu */
  .pgpop{ position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); z-index:40; min-width:150px; max-height:260px; overflow-y:auto; background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border:1px solid #e4dbf4; border-radius:14px; box-shadow:0 18px 40px rgba(60,30,130,.22); padding:6px; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; }
  .pgpop[hidden]{ display:none; }
  .pgpop-it{ border:0; background:none; font-family:'Inter',sans-serif; font-size:.74rem; font-weight:700; color:var(--ink); padding:8px 14px; border-radius:9px; cursor:pointer; text-align:left; white-space:nowrap; }
  .pgpop-it:hover{ background:rgba(124,58,237,.09); color:var(--bdark,#5b21b6); }
  .pgpop-it.on{ background:var(--grad,linear-gradient(135deg,#7c3aed,#5b21b6)); color:#fff; }
  .pagesrow{ flex-wrap:wrap; row-gap:8px; }
  #pagesRow{ flex-wrap:nowrap; }
  #pagesRow .ocA{ width:clamp(86px,7.4vw,118px); flex:none; }
  .qref{ display:inline-flex; align-items:center; gap:8px; margin:11px auto 0; padding:8px 15px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95); border-radius:99px; font-size:.66rem; font-weight:600; color:var(--ink); box-shadow:0 4px 12px rgba(60,30,130,.08); }
  .qref b{ color:var(--bdark,#5b21b6); font-weight:800; }
  /* stage */
  .screen.bk .heroWrap{ flex-direction:column; align-items:center; justify-content:center; gap:12px; }
  .screen.bk .card3d{ display:flex; justify-content:center; }
  .booklet{ display:flex; align-items:stretch; justify-content:center; }
  .booklet .bpage{ position:relative; background:#fff; overflow:visible; box-shadow:0 40px 80px -28px rgba(50,25,110,.5); }
  .booklet .bpage .pg, .booklet .bpage .bkpg{ overflow:hidden; border-radius:inherit; }
  .booklet{ transition:gap .35s var(--ease); }
  .booklet.proofsp{ gap:46px; }
  .booklet.proofsp .spine{ display:none; }
  .booklet.spread .bpage.left{ border-radius:5px 0 0 5px; box-shadow:-26px 30px 60px -28px rgba(50,25,110,.5); }
  .booklet.spread .bpage.right{ border-radius:0 5px 5px 0; box-shadow:26px 30px 60px -28px rgba(50,25,110,.5); }
  .booklet .spine{ width:2px; background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.05) 40%, rgba(0,0,0,.16)); }
  .booklet.pages .bpage{ border-radius:5px; }
  .booklet .poster.bpage{ transition:none; }
  .bkpg{ position:absolute; inset:0; z-index:5; background:#fff; }
  .bkpg[hidden]{ display:none; }
  .poster.bkinner .upcue, .poster.bkinner .part{ display:none; }
  .poster.bkinner{ background:#fff; }
  .pg{ position:absolute; inset:0; padding:11% 10%; display:flex; flex-direction:column; color:#2a2140; }
  .pg.cover{ background:linear-gradient(155deg,#1a0f33,#3b1f73 52%,#b53d8e); color:#fff; justify-content:space-between; padding:13% 11%; }
  .pg.cover.back{ background:linear-gradient(160deg,#241b38,#3b1f73); }
  .pg.cover:not(.back)::before{ content:''; position:absolute; right:-12%; top:10%; width:60%; height:46%; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(255,214,90,.85), rgba(255,120,60,.42) 56%, transparent 72%); }
  .pg.cover .ck{ position:relative; font-size:.5rem; letter-spacing:.36em; font-weight:700; opacity:.82; text-transform:uppercase; }
  .pg.cover .ct{ position:relative; font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(1.3rem,2.4vw,2rem); line-height:.98; }
  .pg.cover .cd{ position:relative; font-weight:800; font-size:.74rem; }
  .pg.inside{ background:#fff; }
  .pg.inside .ph{ height:9px; width:54%; border-radius:3px; background:linear-gradient(90deg,#7c3aed,#a855f7); margin-bottom:9px; }
  .pg.inside .pl{ height:5px; border-radius:3px; background:#e8e2f4; margin-bottom:6px; } .pg.inside .pl.s{ width:72%; } .pg.inside .pl.m{ width:90%; }
  .pg.inside .pimg{ flex:1; border-radius:6px; background:linear-gradient(150deg,#efe9fa,#dccff0); margin:9px 0; min-height:30px; }
  .pg .pgno{ position:absolute; bottom:5%; left:0; right:0; text-align:center; font-size:.56rem; font-weight:700; color:#b3a8c8; }
  .pg.cover .pgno{ color:rgba(255,255,255,.5); }
  .bpage.proof .sgp{ opacity:1; }
  /* the spread turns like a book: the incoming leaf swings from the spine */
  .booklet{ perspective:1500px; }
  .booklet.turnf .bpage.right, .booklet.pages.turnf .bpage.left{ transform-origin:left center; animation:leafF .55s cubic-bezier(.25,.7,.3,1); }
  .booklet.turnb .bpage.left{ transform-origin:right center; animation:leafB .55s cubic-bezier(.25,.7,.3,1); }
  .booklet.turnb.spread .bpage.right:only-of-type{ transform-origin:left center; }
  @keyframes leafF{ 0%{ transform:rotateY(-64deg); box-shadow:0 30px 60px -20px rgba(50,25,110,.6);} 100%{ transform:rotateY(0);} }
  @keyframes leafB{ 0%{ transform:rotateY(64deg);} 100%{ transform:rotateY(0);} }
  @media (prefers-reduced-motion:reduce){ .booklet.turnf .bpage, .booklet.turnb .bpage{ animation:none; } }
  /* the sample cover scales with the PAGE, not the viewport — landscape pages are short */
  .screen.bk .poster{ container-type:size; }
  .screen.bk .part{ padding:8% 7%; }
  .screen.bk .part .pk{ font-size:2.4cqh; letter-spacing:.36em; }
  .screen.bk .part .pt{ font-size:9.5cqh; }
  .screen.bk .part .pdt{ font-size:3.6cqh; } .screen.bk .part .pv{ font-size:2.2cqh; }
  .screen.bk .upcue b{ font-size:2.8cqh; } .screen.bk .upcue small{ font-size:1.9cqh; }
  .pg.misspg{ background:repeating-linear-gradient(45deg,#faf8fe 0 14px,#f1ecfa 14px 28px); border:1.5px dashed #c8b6ee; align-items:center; justify-content:center; text-align:center; gap:4px; }
  .misspg .msx{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1rem; color:#9b7fd4; }
  .misspg .msx2{ font-size:.66rem; font-weight:700; color:var(--muted); }
  .sthumb.miss{ background:repeating-linear-gradient(45deg,#faf8fe 0 8px,#f1ecfa 8px 16px); border:1.5px dashed #d8cbf0; box-shadow:none; }
  .sthumb .cb{ position:absolute; left:2px; top:2px; background:var(--grad,linear-gradient(135deg,#7c3aed,#5b21b6)); color:#fff; font-size:.5rem; font-weight:900; width:14px; height:14px; border-radius:4px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(60,30,130,.35); }
  .stagefoot{ flex:none; display:flex; flex-direction:column; align-items:center; gap:11px; transition:margin-top .35s var(--ease); }
  .stagefoot.proofpad{ margin-top:36px; }   /* proof guides extend below the pages — step clear of the bleed box */
  .pgnav{ display:flex; align-items:center; gap:16px; }
  .pgnav .arw{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #e6def4; color:var(--bdark,#5b21b6); font-size:1.15rem; cursor:pointer; box-shadow:0 4px 12px rgba(60,30,130,.1); font-family:inherit; }
  .pgnav .arw:hover{ border-color:#d8cdf0; } .pgnav .arw:disabled{ opacity:.35; cursor:default; }
  .pgnav .lbl{ font-size:.82rem; font-weight:800; color:var(--bdark,#5b21b6); min-width:140px; text-align:center; }
  .strip{ display:flex; gap:9px; max-width:min(74vw,920px); overflow-x:auto; padding:8px 2px 4px; scrollbar-width:none; }
  .strip::-webkit-scrollbar{ display:none; }
  .sthumb{ position:relative; flex:none; width:44px; height:57px; border-radius:4px; border:2px solid transparent; cursor:pointer; box-shadow:0 4px 12px rgba(50,25,110,.2); background:#fff; overflow:hidden; }
  .sthumb.cover{ background:linear-gradient(155deg,#1a0f33,#3b1f73 60%,#b53d8e); }
  .sthumb.on{ border-color:var(--brand); box-shadow:0 6px 16px rgba(124,58,237,.4); }
  .sthumb .stn{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; color:#b3a8c8; }
  .sthumb.cover .stn{ color:rgba(255,255,255,.6); }
  .sthumb .sdot{ position:absolute; top:-5px; right:-5px; width:13px; height:13px; border-radius:50%; border:2px solid #f3eefb; display:none; }
  .strip.proofing .sdot{ display:block; } .sdot.ok{ background:#10b981; } .sdot.warn{ background:#f59e0b; }
  .bkseg{ display:flex; gap:2px; background:rgba(124,58,237,.07); border-radius:99px; padding:3px; margin-right:6px; }
  .bkseg .cpill{ padding:7px 14px; color:var(--sub); } .bkseg .cpill.act{ background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(124,58,237,.4); }
  /* stepper (booklet pages): −/+ around the number, same surface as the select */
  .stepgroup{ margin-top:18px; text-align:center; display:flex; flex-direction:column; align-items:center; flex:none; }
  .optrow .stepgroup{ margin-top:0; align-self:center; }
  .stepper{ display:inline-flex; align-items:center; gap:14px; background:rgba(255,255,255,.92); border:1.4px solid #ddd2f2; border-radius:16px; padding:8px 10px; }
  .stepbtn{ width:40px; height:40px; border-radius:11px; border:0; background:linear-gradient(135deg,var(--brand),#7c3aed); color:#fff; font-size:1.35rem; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(91,33,182,.25); transition:transform .12s ease, opacity .15s ease; }
  .stepbtn:hover{ transform:translateY(-1px); } .stepbtn:active{ transform:scale(.96); }
  .stepbtn:disabled{ opacity:.3; cursor:default; transform:none; box-shadow:none; }
  .stepbtn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
  .stepv{ display:flex; flex-direction:column; align-items:center; min-width:96px; }
  .stepn{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.6rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
  .stepu{ font-family:'Inter',sans-serif; font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800; color:var(--sub); margin-top:3px; }
  .stephint{ font-family:'Inter',sans-serif; font-size:.68rem; font-weight:600; color:var(--muted); margin-top:8px; max-width:230px; line-height:1.35; }
  .stepper.sm{ gap:8px; padding:5px 7px; border-radius:13px; align-self:center; }
  .stepper.sm .stepbtn{ width:28px; height:28px; border-radius:8px; font-size:1rem; box-shadow:0 3px 8px rgba(91,33,182,.22); }
  .stepper.sm .stepv{ min-width:56px; }
  .stepper.sm .stepn{ font-size:1.05rem; }
  .stepper.sm .stepu{ font-size:.5rem; margin-top:2px; }
  .stepper.sm.on{ box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); }
  .optrow .stepper.sm, .grow .stepper.sm{ margin-left:6px; }
  .voptwrap{ flex-wrap:wrap; }
  .matvoptrow{ flex-wrap:wrap; align-items:flex-end; } .matvoptrow .optrow{ padding:0; }
  .band .voptwrap{ padding-top:4px; }
  /* money pending: a re-quote is in flight — the number dims and pulses so
     the click visibly REGISTERED while the server answers (live vendor
     pricing takes 1-2s; the green/red delta flashes when it lands) */
  #price.pending, #addTot.pending, #addTot2.pending, #drawerTotal.pending{ opacity:.45; animation:pendPulse 1.1s ease-in-out infinite; }
  @keyframes pendPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.75; } }
  /* ── THE HERO IS A 3D CARD (ported from v1: .cfg-card-3d > .cfg-hero-card >
     .cfg-face). #poster is the FRONT face; #posterBack the BACK, pre-rotated
     180° and backface-hidden, so rotating the wrapper reveals it un-mirrored.
     The 0.7s flip curve is v1's exactly. ── */
  .heroWrap{ perspective:1800px; }
  .card3d{ position:relative; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
  .card3d.flipped{ transform:rotateY(180deg); }
  .card3d > .poster{ backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:border-radius .35s var(--ease), width .5s var(--ease), height .5s var(--ease); }
  .pface-back{ position:absolute; inset:0; transform:rotateY(180deg); display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#f4f0fb,#e6ddf6); border:1px solid #d9cdf1; }
  .pface-back .pback-note{ text-align:center; font-weight:900; letter-spacing:.2em; color:#8a76c9; font-size:1.1rem; }
  .pface-back .pback-note span{ display:block; margin-top:8px; font-size:.62rem; font-weight:600; letter-spacing:.04em; text-transform:none; color:#9b8cc4; }
  /* BOTH SIDES: the two faces lay flat next to each other, side by side or
     stacked — JS picks whichever yields the larger card (v1 geometry). No 3D
     here: .flipped is inert while both are visible. Each face wears its label. */
  .card3d.both{ display:flex; align-items:center; justify-content:center; gap:var(--cgap,24px); transform:none !important; }
  .card3d.both.col{ flex-direction:column; }
  .card3d.both > .poster{ backface-visibility:visible; }
  /* relative, NOT static: the face's own ::before label must anchor to the
     face. Static let it anchor to the wrapper and land on the front card. */
  .card3d.both .pface-back{ position:relative; transform:none; }
  /* the label steps inward by the corner radius (≈30% of r clears the arc), so a
     rounded card never clips its own FRONT/BACK chip */
  .card3d.both > .poster::before{ content:attr(data-face); position:absolute; top:calc(8px + var(--rad,0px) * .3); left:calc(8px + var(--rad,0px) * .3); z-index:5; font-size:.56rem; font-weight:900; letter-spacing:.14em; color:#5b21b6; background:rgba(255,255,255,.88); border-radius:6px; padding:3px 7px; pointer-events:none; }
  /* Stage control module (v1 bottom dock, ported): Both/One + Flip. Sits at
     the foot of the stage, centred — the top-centre band belongs to the
     "restore your build" bar. */
  .hctrls{ display:none; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:7; align-items:center; gap:9px; padding:4px 6px 4px 5px; background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(60,30,130,.12); border-radius:14px; }
  .heroWrap.sided .hctrls{ display:inline-flex; }
  .hctrls .cpill{ font-size:.7rem; padding:8px 13px; }
  .hctrls .hseg{ background:rgba(124,58,237,.07); border-radius:11px; padding:2px; display:inline-flex; gap:2px; }
  .hctrls .hseg .cpill.on{ background:#7c3aed; color:#fff; box-shadow:0 3px 9px rgba(124,58,237,.36); }
  .hctrls .vsepp{ width:1px; height:18px; background:#e0d6f2; }
  /* Flip: dressed like the Both/One segment beside it, and built like the
     hero — two faces, back pre-rotated, the whole button turns on the same
     .7s curve as the card so the two move together. Each face names the side
     you will SEE after pressing. */
  .hctrls .hflipwrap{ perspective:900px; }
  .hctrls .hflip{ position:relative; display:inline-grid; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1); background:rgba(124,58,237,.07); border:0; border-radius:11px; padding:2px; cursor:pointer; }
  .hctrls .hflip.flipped{ transform:rotateY(180deg); }
  .hctrls .hflip .hface{ grid-area:1/1; display:inline-flex; align-items:center; gap:7px; backface-visibility:hidden; -webkit-backface-visibility:hidden; font-family:inherit; font-size:.7rem; font-weight:700; color:#1a1625; border-radius:9px; padding:8px 13px; white-space:nowrap; }
  .hctrls .hflip .hface.back{ transform:rotateY(180deg); }
  .hctrls .hflip .hfic{ font-size:1rem; line-height:1; color:#7c3aed; }
  .hctrls .hflip b{ font-size:.58rem; letter-spacing:.14em; color:#7c3aed; background:rgba(124,58,237,.12); border-radius:6px; padding:2px 7px; }
  .heroWrap.sided.bothsides .hflipwrap{ display:none; }   /* v1: Flip hides while both faces are shown */
  /* ── ONE GLYPH FOOTPRINT PER VIEW. Measured 2026-08-27: Everything's quantity
     tile is 122×108 with a 96×58 glyph; Guided's is 135×126 with a 43×28 glyph.
     Every other tile now uses those boxes, so a row of options reads as a row
     of equals — the corner/radius thumbs were 36×22 and the radius tiles 72px
     wide, which read as a different control entirely. ── */
  /* one FIXED height per view (the tallest tile in each), so caption count can
     never make siblings different heights */
  .copanel .gop{ width:122px; height:auto; min-height:0; box-sizing:border-box; padding-bottom:10px; }
  .copanel .grow{ row-gap:10px; }
  .copanel .grow .gdv, .copanel .bigrow .gdv{ margin:0 11px; }
  /* axis + option cards: the glyph row was padding the card taller than its content */
  .copanel .gop .gbox{ height:40px; margin-bottom:5px; }
  .copanel .gop{ padding-top:6px; }
  .copanel .gop .gbox{ height:78px; }
  .band .ocA, .bandwrap .ocA{ width:135px; height:142px; box-sizing:border-box; }
  .band .ocA .bn2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* v1 mini-card thumb, scaled to the view's glyph footprint. Radii keep the
     real 1:2:3 ratio of 1/8 : 1/4 : 3/8″ (exaggerated ~2× so it reads at
     thumb size, as v1 did). */
  .vmini{ display:block; background:#fff; border-radius:0; box-shadow:0 2px 6px rgba(0,0,0,.15); border:1px solid #e6dff4; transition:border-radius .25s var(--ease), box-shadow .2s; }
  .gbox > .vmini{ width:96px; height:58px; }
  .gb > .vmini{ width:48px; height:31px; }
  .gbox > .vmini.round{ border-radius:16px; }
  .gb > .vmini.round{ border-radius:9px; }
  .gbox > .vmini.round-s{ border-radius:5px; }  .gbox > .vmini.round-m{ border-radius:10px; }  .gbox > .vmini.round-l{ border-radius:16px; }
  .gb > .vmini.round-s{ border-radius:2px; }    .gb > .vmini.round-m{ border-radius:4px; }     .gb > .vmini.round-l{ border-radius:6px; }
  .on > .gb > .vmini, .on > .gbox > .vmini{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); }
  /* Sub-option slide-out (v1 .cfg-swap-sub-group): always in the flow, so it
     animates BOTH ways — width, opacity and a short slide — instead of
     appearing/vanishing on a display toggle. Dashed brackets tie it to the
     tile it belongs to. */
  .vsub{ display:inline-flex; position:relative; align-items:center; gap:8px; align-self:center; overflow:hidden; max-width:0; padding:4px 0; margin-left:0; opacity:0; transform:translateX(-18px); transition:max-width .36s cubic-bezier(.2,.8,.2,1), opacity .28s ease, transform .36s cubic-bezier(.2,.8,.2,1), padding .36s cubic-bezier(.2,.8,.2,1), margin .36s cubic-bezier(.2,.8,.2,1); }
  .vsub.open{ max-width:640px; opacity:1; transform:none; padding:4px 14px 4px 16px; margin-left:4px; }
  .vsub::before, .vsub::after{ content:''; position:absolute; top:10px; bottom:10px; border-left:1.5px dashed #7c3aed; opacity:.45; }
  .vsub::before{ left:0; } .vsub::after{ right:0; }
  .vsub-lbl{ font-size:.56rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8b6fd0; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
  .vsub-tiles{ display:flex; gap:6px; }
  /* radius tiles are ordinary tiles — same box as their siblings */
  .vsubtile .gb, .vsubtile .gbox{ margin-bottom:0; }
  @media (prefers-reduced-motion: reduce){ .vsub{ transition:none; } }
  .on > .gb > .axsw, .on > .gbox > .axsw{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; box-shadow:0 0 0 2.5px var(--brand), 0 4px 14px rgba(124,58,237,.35); }
  /* ── THICKNESS: the board seen EDGE-ON, flutes and all. Coroplast's flutes are
     the material's signature, and the slab grows with the option's ORDINAL rank
     (not its mm value) so the ladder still reads for a substrate measured in pt.
     Slabs bottom-align on a shared baseline so the rail scans as a staircase. */
  .thic{ position:relative; width:44px; height:32px; margin:0 auto; display:flex; align-items:flex-end; justify-content:center; }
  .thic i{ display:block; width:44px; position:relative; overflow:hidden; border-radius:2.5px; transition:.25s;
           background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 2px 7px rgba(60,30,130,.2); }
  .thic i::after{ content:''; position:absolute; inset:1.5px; background-image:repeating-linear-gradient(90deg,#c9b6ee 0 1.4px,transparent 1.4px 6px); }
  .thic-1 i{ height:8px; } .thic-2 i{ height:14px; } .thic-3 i{ height:21px; } .thic-4 i{ height:27px; }
  .ocA.on .thic i, .gop.on .thic i{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; }
  .ocA.on .thic i::after, .gop.on .thic i::after{ background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1.4px,transparent 1.4px 6px); }
  /* ── PRINT METHOD: direct = ink laid straight onto the board (droplets meeting
     the slab); vinyl = a separate printed sheet applied over it (offset layer). */
  .pmic{ position:relative; width:44px; height:32px; margin:0 auto; }
  .pmic .bd{ position:absolute; left:0; right:0; bottom:0; height:13px; border-radius:2.5px; transition:.25s;
             background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 2px 7px rgba(60,30,130,.2); }
  .pmic-direct i{ position:absolute; width:6px; height:6px; background:#9b7fd4; border-radius:50% 50% 50% 0;
                  transform:rotate(-45deg); transition:.25s; }
  .pmic-direct .d1{ left:8px;  top:8px; }
  .pmic-direct .d2{ left:19px; top:2px; }
  .pmic-direct .d3{ left:30px; top:10px; }
  .pmic-vinyl .sh{ position:absolute; left:1px; right:7px; top:1px; height:12px; border-radius:2.5px; transition:.25s;
                   background:linear-gradient(160deg,#f4eeff,#ddcefa); border:1px solid #cdbdf0;
                   box-shadow:0 3px 7px rgba(60,30,130,.24); transform:rotate(-5deg); transform-origin:left bottom; }
  .ocA.on .pmic .bd, .gop.on .pmic .bd{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; }
  .ocA.on .pmic-direct i, .gop.on .pmic-direct i{ background:#c9bce8; }
  .ocA.on .pmic-vinyl .sh, .gop.on .pmic-vinyl .sh{ background:linear-gradient(160deg,#8b6fe0,#6d4fc2); border-color:#6d4fc2; }
  /* a combination we don't stock: visibly inert, never a clickable price lie */
  .axoff{ opacity:.4; pointer-events:none; filter:grayscale(1); }
  .axoff .bdelta{ color:#9b8bb5; font-style:italic; }
  /* Everything view: axis rails sit in a row, each rail keeping its own label */
  .axrow{ display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap; margin-top:8px; }
  /* ── FLUTE DIRECTION: the board face with its corrugation running across or
     up. The whole point of the choice is which way the flutes run, so the icon
     shows exactly that and nothing else. Coroplast only, and free. */
  .flic{ position:relative; width:44px; height:32px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
  .flic i{ display:block; width:42px; height:30px; border-radius:3px; position:relative; overflow:hidden; transition:.25s;
           background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 2px 7px rgba(60,30,130,.2); }
  .flic-w i::after{ content:''; position:absolute; inset:2px; background-image:repeating-linear-gradient(0deg,#c9b6ee 0 1.4px,transparent 1.4px 6px); }
  .flic-h i::after{ content:''; position:absolute; inset:2px; background-image:repeating-linear-gradient(90deg,#c9b6ee 0 1.4px,transparent 1.4px 6px); }
  .ocA.on .flic i, .gop.on .flic i{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; }
  .ocA.on .flic-w i::after, .gop.on .flic-w i::after{ background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1.4px,transparent 1.4px 6px); }
  .ocA.on .flic-h i::after, .gop.on .flic-h i::after{ background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1.4px,transparent 1.4px 6px); }
  /* ── CUTTING: a square-cut panel vs one cut to a shape (the corner radius and
     the dashed offcut are the whole difference the customer is paying for). */
  .cutic{ position:relative; width:44px; height:32px; margin:0 auto; display:block; transition:.25s;
          background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 2px 7px rgba(60,30,130,.2); }
  .cutic-rect{ border-radius:3px; }
  .cutic-shape{ border-radius:16px 16px 3px 3px / 20px 20px 3px 3px; }
  .cutic-shape::after{ content:''; position:absolute; inset:-5px -4px; border:1.4px dashed #b3a0e3; border-radius:4px; }
  .ocA.on .cutic, .gop.on .cutic{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; }
  .ocA.on .cutic-shape::after, .gop.on .cutic-shape::after{ border-color:rgba(255,255,255,.6); }
  /* Everything view: orientation tiles (gop style) */
  .coorient-tiles{ gap:11px; margin-top:8px; justify-content:flex-start; }
  .coorient-tiles .gop.otile{ width:122px; }
  .qbadge{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.46rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:var(--grad); color:#fff; border-radius:99px; padding:3px 8px; box-shadow:0 3px 9px rgba(124,58,237,.4); }
  .gminp{ border-radius:3px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 6px 16px rgba(0,0,0,.07); display:block; }
  .gsw{ width:34px; height:27px; border-radius:5px; box-shadow:0 2px 7px rgba(60,30,130,.28); display:block; }
  .band .ocA .gb > .gsw{ width:48px; height:36px; border-radius:6px; }
  .gqn{ font-family:'Montserrat',sans-serif; font-size:clamp(.9rem,1.26vw,1.13rem); font-weight:900; }
  /* Designed finishing icons — CSS mini-illustrations (ported from the design
     system rail-components-v23): grommet = sign card w/ 4 corner eyelets,
     H-stake = sign on an H-frame, hem = stitched edge, pole = rolled pockets. */
  .finic{ position:relative; margin:0 auto; box-sizing:border-box; }
  .finic-grom,.finic-hem,.finic-pole{ width:44px; height:30px; border-radius:4px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 2px 7px rgba(60,30,130,.2); }
  .finic-grom i{ position:absolute; width:6px; height:6px; border:2px solid #9b7fd4; border-radius:50%; background:#ece2f9; box-sizing:border-box; }
  .finic-grom .tl{ left:4px; top:4px; } .finic-grom .tr{ right:4px; top:4px; } .finic-grom .bl{ left:4px; bottom:4px; } .finic-grom .br{ right:4px; bottom:4px; }
  .finic-hem::before{ content:''; position:absolute; inset:4px; border:1.5px dashed #7c3aed; border-radius:2px; }
  .finic-pole span{ position:absolute; left:0; right:0; height:5px; background:linear-gradient(#cbb8ee,#b79fe0); }
  .finic-pole span:first-child{ top:0; border-radius:4px 4px 0 0; } .finic-pole span:last-child{ bottom:0; border-radius:0 0 4px 4px; }
  .finic-hstk{ width:44px; height:36px; }
  .finic-hstk .sgn{ position:absolute; top:0; left:6px; right:6px; height:17px; border-radius:3px; background:linear-gradient(160deg,#fff,#efeaf9); border:1px solid #e4dbf4; box-shadow:0 2px 6px rgba(60,30,130,.2); }
  .finic-hstk .legL,.finic-hstk .legR{ position:absolute; bottom:0; width:2.6px; height:19px; background:#9b7fd4; border-radius:2px; }
  .finic-hstk .legL{ left:12px; } .finic-hstk .legR{ right:12px; }
  .finic-hstk .bar{ position:absolute; bottom:8px; left:12px; right:12px; height:2.6px; background:#9b7fd4; border-radius:2px; }
  .ocA.on .finic-grom,.ocA.on .finic-hem,.ocA.on .finic-pole,.ocA.on .finic-hstk .sgn{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; }
  .ocA.on .finic-grom i{ border-color:#fff; background:#1d1534; }
  .ocA.on .finic-hem::before{ border-color:rgba(255,255,255,.75); }
  .ocA.on .finic-hstk .legL,.ocA.on .finic-hstk .legR,.ocA.on .finic-hstk .bar{ background:#c9bce8; }
  /* Everything (all-options) view: finishing options are NAKED — no card chrome,
     bigger icons — matching the naked .gop size cells. Selection still reads via
     the icon's own card darkening (.on states above). */
  #copanel .optrow{ justify-content:flex-start; }   /* left-align finishing (was centered → odd left gap) */
  #copanel .ocA[data-finopt]{ background:none; border:none; box-shadow:none; padding:4px 6px; width:122px; }   /* same footprint as the size/orientation/sides tiles */
  #copanel .ocA[data-finopt]:hover{ background:none; transform:none; }
  #copanel .ocA[data-finopt] .gb{ min-height:78px; height:auto; display:flex; align-items:center; justify-content:center; margin-bottom:9px; }
  #copanel .ocA[data-finopt] .finic{ transform:scale(1.7); }
  /* Sides = 2 option tiles (same pattern as orientation): single = 1 panel,
     double = 2 offset panels (.gtwo). Selection darkens the icon (scoped to .stile). */
  .coside-tiles, .sidestiles{ justify-content:flex-start; }
  .coside-tiles{ gap:11px; margin-top:8px; }
  .coside-tiles .gop.stile{ width:122px; }
  .gtwo{ position:relative; width:38px; height:46px; margin:0 auto; }
  .gtwo::before,.gtwo::after{ content:''; position:absolute; width:30px; height:38px; border-radius:3px; border:1px solid #e4dbf4; background:linear-gradient(160deg,#fff,#efeaf9); box-shadow:0 1px 3px rgba(0,0,0,.12); transition:.25s; }
  .gtwo::before{ left:0; top:8px; } .gtwo::after{ left:8px; top:0; }
  .stile.on .gmini, .stile.on .gminp, .stile.on .gtwo::before, .stile.on .gtwo::after{ background:linear-gradient(150deg,#241b38,#3a2a63 60%,#7c3aed 150%); border-color:#6d4fc2; }
  /* step-by-step qty cards — normalized to the SAME gb height + padding as size/paper/finish tiles */
  .ocA.qty{ width:clamp(112px,8.3vw,135px); padding:clamp(11px,1.3vh,15px) 7px clamp(10px,1.2vh,14px); position:relative; }
  .ocA.qty .gb{ height:clamp(32px,3.6vh,48px); margin-bottom:7px; }
  /* every Guided band option tile shares ONE height (gb + 2-line label area), content centred — so size/paper/finish/qty line up and the band/hero don't jump between steps */
  .bandwrap .ocA{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:126px; }
  /* axis tiles carry a two-line caption: grow with it instead of squeezing it (the rail's flex row keeps siblings equal) */
  .bandwrap .ocA[data-axis]{ height:auto; min-height:142px; padding-top:10px; padding-bottom:10px; }
  .bandwrap .ocA[data-axis] .bn2, .bandwrap .ocA[data-axis] .bx{ flex:none; }
  .bandwrap .ocA .gb{ flex:none; }
  .ocA.qty .gqn{ font-size:clamp(1.04rem,1.44vw,1.4rem); }
  /* per-unit price subtext under every quantity tile */
  /* per-unit qty subtext matches the .bx sublabel EXACTLY (size · weight · colour) so all tile subtext is uniform */
  .qper{ font-size:clamp(.56rem,.8vw,.66rem); font-weight:600; color:var(--muted); margin-top:3px; white-space:nowrap; line-height:1; }
  #coQty .gop .qper{ margin-top:3px; }
  /* green-outline "save %" pill, BELOW the card, only at volume breaks (like the most-popular badge) */
  .qsave{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); border:1.5px solid var(--green); color:var(--green); background:#fff; border-radius:99px; padding:2px 10px; font-size:.58rem; font-weight:800; letter-spacing:.02em; white-space:nowrap; box-shadow:0 3px 8px rgba(5,150,105,.2); }
  /* qty track bottom padding trimmed so the gap to the Next button matches the other steps (was 26px) */
  .qcards{ align-items:stretch; padding-bottom:12px; }
  .qtiles{ flex-wrap:wrap; row-gap:10px; }
  .qmorebtn{ appearance:none; border:1.6px dashed rgba(124,58,237,.55); background:rgba(255,255,255,.6); font-family:inherit; }
  .qmorebtn .gqn{ color:var(--brand); }
  .qmorebtn.on{ border-style:solid; }
  .qgrid4{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:12px 10px; width:min(600px, 94%); margin:12px auto 0; align-items:stretch; }
  .qgrid4 .gdv{ height:58px; align-self:center; margin:0; }
  .qgrid4 .qpin{ margin:0; align-self:center; display:flex; justify-content:center; }
  .qgrid4 .qpin .qpcol{ width:100%; gap:5px; align-items:center; }
  .qgrid4 .qpin .qcc{ width:96px; height:58px; min-height:0; flex:none; }
  .qgrid4 .qpin .qcc-in{ font-size:1.05rem; }
  .qgrid4 .qcc-note{ max-width:none; }
  .qgrid4 .gop, .copanel .qgrid4 .gop{ width:auto; height:auto; min-height:0; padding:6px 2px 8px; background:none; border:0; box-shadow:none; }
  .qdock-scrim{ position:fixed; inset:0; background:rgba(24,14,46,.4); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .35s; z-index:88; }
  .qdock-scrim.open{ opacity:1; pointer-events:auto; }
  .qdock{ position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); width:min(780px,94vw); max-height:72vh; overflow-y:auto; z-index:89; background:rgba(250,248,255,.92); backdrop-filter:blur(26px) saturate(1.6); border:1px solid rgba(255,255,255,.85); border-top:3px solid var(--brand); border-radius:22px 22px 0 0; box-shadow:0 -18px 60px rgba(40,20,90,.32); padding:24px 28px 28px; transition:transform .45s var(--ease); }
  .qdock.open{ transform:translate(-50%,0); }
  .qdock-x{ position:absolute; top:13px; right:15px; width:34px; height:34px; background:#f1eefb; border:1.5px solid #e5ddf6; border-radius:50%; cursor:pointer; font-family:inherit; font-size:19px; line-height:1; color:var(--ink); }
  .qdock-x:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .qdock-h{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.35rem; letter-spacing:-.02em; }
  .qdock-h em{ font-style:normal; background:var(--gradwide,linear-gradient(90deg,#a855f7,#7c3aed)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .qdock-sub{ font-size:.72rem; font-weight:600; color:var(--sub); margin-top:3px; }
  .qdock-grid{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; margin-top:18px; }
  .qdock-grid .ocA{ width:auto; }
  @media (max-width:700px){ .qdock-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
  /* CUSTOM quantity card — sits OUTSIDE the scroll; preset cards FADE OUT as they approach it (mask), never pass behind */
  .qrow2{ display:flex; align-items:flex-start; gap:0; width:100%; }
  .bandwrap .qrow2{ max-width:1140px; margin:0 auto; justify-content:center; }
  .qtiles{ flex:1; justify-content:center; }
  .qtiles .ocA{ width:clamp(98px,8.2vw,126px); }
  .qpcol{ display:flex; flex-direction:column; gap:7px; align-items:center; }
  /* the custom box IS a tile: same footprint as its neighbours. Flex chain,
     not percentage heights — a stretched flex item is definite for its own
     children only in some engines. */
  .qrow2 .qpin{ align-self:stretch; display:flex; align-items:stretch; margin-top:8px; }
  .qrow2 .qpin .qpcol{ align-self:stretch; display:flex; flex-direction:column; height:auto; }
  .qrow2 .qpin .qcc{ width:clamp(98px,8.2vw,126px); flex:1; min-height:118px; height:auto; }
  .qcc-note{ font-family:'Inter',sans-serif; font-size:.6rem; font-weight:700; color:var(--bdark,#5b21b6); max-width:150px; text-align:center; line-height:1.35; }
  .qpin-co{ justify-content:center; margin-bottom:14px; }
  .qpin-co .qcc-div{ display:none; }
  .qrow2 .scrollwrap{ flex:1; min-width:0; margin-top:0; }
  .qpin{ position:relative; z-index:6; display:flex; align-items:center; gap:10px; align-self:center; }
  /* highlighted: WHITE bg, purple border + ring, RECESSED inner shadow, "custom" PILL badge on top */
  .qpin .qcc{ cursor:text; position:relative; margin:0; padding:0; border:1.6px solid var(--brand); border-radius:14px; background:#fff; box-sizing:border-box; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 4px 11px rgba(60,30,130,.34), inset 0 1px 2px rgba(60,30,130,.2), 0 0 0 3px rgba(124,58,237,.09), 0 8px 18px rgba(124,58,237,.14); transition:box-shadow .18s var(--ease), height .4s var(--ease), width .4s var(--ease); }
  .qpin .qcc-pill{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:.5rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:999px; box-shadow:0 3px 8px rgba(124,58,237,.4); white-space:nowrap; }
  .qpin .qcc-in{ width:100%; box-sizing:border-box; border:0; background:transparent; outline:none; text-align:center; font-family:'Montserrat',sans-serif; font-weight:900; color:var(--bdark); padding:0 6px; -moz-appearance:textfield; appearance:textfield; }
  .qpin .qcc-in::placeholder{ color:#b9a8e6; }
  .qpin .qcc-in::-webkit-outer-spin-button, .qpin .qcc-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .qpin .qcc:focus-within, .qpin .qcc.on{ box-shadow:inset 0 4px 11px rgba(124,58,237,.32), inset 0 1px 2px rgba(60,30,130,.2), 0 0 0 3px rgba(124,58,237,.2), 0 12px 26px rgba(124,58,237,.22); }
  /* clearly DASHED vertical divider */
  .qpin .qcc-div{ width:0; flex:none; align-self:stretch; margin:6px 0; border-left:2.6px dashed #7c3aed; }
  .bandwrap .qpin .qcc{ width:clamp(98px,8.2vw,126px); height:auto; }   /* a tile among tiles — the flex chain gives it the row height */
  .bandwrap .qpin .qcc-in{ font-size:clamp(1.2rem,1.7vw,1.6rem); }
  #copanel .qpin .qcc{ width:96px; }   /* the custom box matches the qty GLYPH, not the tile */
  #copanel .qpin .qcc-in{ font-size:1.3rem; }
  /* preset viewport fades at BOTH edges — left = cards vanishing as they near the custom card, right = "more →" */
  .qcards-wrap{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13px,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 13px,#000 88%,transparent 100%); }
  .bandwrap .qcards{ padding-left:15px; }
  #copanel .qcards{ padding-left:15px; }
  .bandwrap .qcustom{ justify-content:center; } .bandwrap .dlbl{ max-width:560px; margin-left:auto; margin-right:auto; }
  /* step custom-size widget centred (all-options stays left) */
  .bandwrap .cscust{ justify-content:center; }
  /* all-options qty: faded right edge so it reads as "more over there", not a hard cut */
  
  .navrow{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:9px; }
  .sidesrow{ display:flex; align-items:center; gap:13px; margin-top:20px; flex-wrap:wrap; }
  .sidesrow .sideslbl{ font-size:.6rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#9b7fd4; }
  .sidesrow .sideshint{ font-size:.66rem; font-weight:600; color:var(--sub); }
  .navhint{ font-size:.62rem; font-weight:700; color:#9b7fd4; }
  .nextbtn{ border:0; border-radius:99px; padding:9px 20px; font-family:inherit; font-size:.72rem; font-weight:800; cursor:pointer; background:var(--grad); color:#fff; box-shadow:0 12px 26px rgba(124,58,237,.32); }
  .qref{ display:inline-flex; align-items:center; gap:8px; margin:11px auto 0; padding:8px 15px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95); border-radius:99px; font-size:.66rem; font-weight:600; color:var(--ink); box-shadow:0 4px 12px rgba(60,30,130,.08); } .qref b{ color:var(--bdark); font-weight:800; }
  .csbox{ display:none; align-items:center; justify-content:center; gap:8px; margin-top:12px; } .csbox.show{ display:flex; }
  .csbox input{ width:64px; font-family:inherit; font-size:.82rem; font-weight:800; text-align:center; border:1.5px solid #d9cdf2; border-radius:9px; padding:8px 6px; } .csbox input:focus{ outline:none; border-color:var(--brand); }
  .csbox .x{ font-weight:800; color:var(--muted); } .csbox .u{ font-size:.62rem; font-weight:700; color:var(--muted); }
  /* real in-hand pass card (from premiere-v10) — the "bottom calendar card" */
  .pass{ display:flex; background:rgba(255,255,255,.88); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,1); border-radius:20px; overflow:hidden; position:relative; box-shadow:0 18px 44px rgba(40,20,90,.22); max-width:840px; margin:12px auto 0; text-align:left; cursor:pointer; }
  .pass::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 90% at 14% 0%, rgba(168,130,255,.16), transparent 60%); pointer-events:none; }
  .pass .pcal{ width:86px; border-radius:16px; overflow:hidden; flex:none; align-self:center; margin-left:22px; box-shadow:0 8px 24px rgba(0,0,0,.1); border:1px solid rgba(124,58,237,.14); background:#fff; text-align:center; position:relative; z-index:2; }
  .pass .pcal .band2{ background:linear-gradient(110deg,#60a5fa,#2563eb); color:#fff; font-size:.5rem; font-weight:800; letter-spacing:.2em; padding:5px 0; }
  .pass .pcal .dy{ font-family:'Montserrat',sans-serif; font-size:1.8rem; font-weight:900; line-height:1.1; padding:5px 0 2px; }
  .pass .pcal .wd{ font-size:.44rem; font-weight:800; letter-spacing:.14em; color:var(--muted); padding-bottom:7px; }
  .pass .pvd{ width:0; border-left:1.5px dashed #c8b6ee; align-self:stretch; margin:14px 0 14px 20px; position:relative; z-index:2; }
  .pass .pm2{ flex:1; padding:16px 24px 14px; position:relative; z-index:2; }
  .pass .plbl2{ font-size:.52rem; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:#9b7fd4; }
  .tierchip{ font-size:.5rem; font-weight:800; letter-spacing:.1em; border-radius:99px; padding:4px 11px; background:linear-gradient(110deg,#60a5fa,#2563eb); color:#fff; box-shadow:0 3px 10px rgba(37,99,235,.35); }
  .pass .prory{ font-family:'Montserrat',sans-serif; font-size:1.3rem; font-weight:900; line-height:1.26; margin-top:8px; }
  .pass .prory em{ font-style:normal; white-space:nowrap; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pass .pnud2{ font-size:.76rem; color:var(--sub); font-weight:600; margin-top:9px; } .pass .pnud2 b{ color:var(--bdark); }
  .pass .lockchk{ display:inline-flex; align-items:center; justify-content:center; color:var(--green); vertical-align:-4px; margin-right:3px; }
  .pass .savemore{ color:var(--green); }
  .pass .pstub2{ width:190px; flex:none; border-left:2px dashed #d8ccf2; background:rgba(247,243,254,.6); display:flex; flex-direction:column; justify-content:center; gap:4px; text-align:center; padding:13px 13px; position:relative; z-index:2; }
  .pass .pstub2::before,.pass .pstub2::after{ content:''; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:#f3edfe; }
  .pass .pstub2::before{ top:-8px; } .pass .pstub2::after{ bottom:-8px; }
  .pass .pt{ font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; background:var(--gradwide); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pass .ptl{ font-size:.48rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .pass .pbars2{ height:20px; margin:5px 6px 3px; border-radius:2px; opacity:.75; background:repeating-linear-gradient(90deg,#3c3654 0 2px,transparent 2px 4px,#3c3654 4px 5px,transparent 5px 9px); }
  .pass .pbtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--grad); border:0; color:#fff; border-radius:11px; padding:10px 12px; font-family:inherit; font-size:.66rem; font-weight:800; cursor:pointer; box-shadow:0 6px 16px rgba(124,58,237,.35); }
  /* all-options pass card: timer + Change date drop to a full-width bottom row */
  .copanel .pass{ flex-wrap:wrap; max-width:580px; }
  .copanel .pass .pstub2{ flex:1 1 100%; width:auto; border-left:0; border-top:2px dashed #d8ccf2; flex-direction:row; align-items:center; gap:16px; text-align:left; padding:13px 20px; }
  .copanel .pass .pstub2::before, .copanel .pass .pstub2::after{ display:none; }
  .copanel .pass .pcd{ display:flex; flex-direction:column; gap:1px; flex:none; }
  .copanel .pass .pbars2{ flex:1; min-width:50px; margin:0; height:26px; }
  .copanel .pass .pbtn{ margin-top:0; flex:none; padding:11px 15px; }
  .upbtn{ display:inline-flex; align-items:center; gap:9px; border:1.5px dashed rgba(124,58,237,.5); background:rgba(255,255,255,.55); color:var(--ink); border-radius:99px; padding:13px 22px; font-family:inherit; font-size:.74rem; font-weight:800; cursor:pointer; }
  .upbtn .ic{ width:24px; height:24px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; }
  /* (legacy Quick-edit compare cluster removed — superseded by the folder-tab side panel) */
  /* framework/sample-product watermark (non-interactive) */
  .protobadge{ position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:55; pointer-events:none; font-family:'Inter',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.01em; color:var(--bdark); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border:1px solid rgba(124,58,237,.28); border-radius:99px; padding:5px 15px; box-shadow:0 4px 14px rgba(60,30,130,.13); white-space:nowrap; }
  .protobadge b{ font-weight:900; color:var(--brand); }
  @media(max-width:720px){ .protobadge{ font-size:.5rem; padding:4px 10px; } }
  /* v3 (compact) + v4 (dropdowns) drawer CSS removed — v2 panel is the chosen Quick-edit treatment */
  /* ===== Phase-A additions (2026-07-03, GAP-REPORT fixes): gate nudge · lock/unlock/added CTA states ·
     per-unit in the bar · trust at the money surfaces · Guided band-6 slip · paper deltas · countdown idle ===== */
  .bb-each{ font-family:'Inter',sans-serif; font-size:.7rem; font-weight:700; color:var(--sub); margin-top:2px; }
  .bb-trust{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; padding:0 8px; }
  .bb-trust .bt-rev{ font-size:.66rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .bb-trust .bt-rev i{ font-style:italic; color:var(--sub); font-weight:600; }
  .bb-trust .bt-line{ font-size:.58rem; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  @media(max-width:1240px){ .bb-trust{ display:none; } }
  .oslip-trust{ text-align:center; font-size:.62rem; font-weight:600; color:var(--sub); margin-top:11px; }
  .oslip-tbl .a.oslip-promise{ font-weight:800; color:var(--green); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; align-self:center; }
  /* Guided band-6 slip = boarding-pass shape: short like the In-hand card, stub on the right */
  .band .oslip-band{ margin:12px auto 0; text-align:left; max-width:760px; }
  .oslip-band .oslip-row{ display:flex; align-items:stretch; }
  .oslip-band .oslip-main{ flex:1; min-width:0; padding:14px 20px 13px; }
  .oslip-band .oslip-main .oslip-hd{ margin-bottom:10px; }
  .oslip-band .oslip-tbl{ gap:7px 12px; font-size:.78rem; }
  .oslip-band .oslip-stub{ width:216px; flex:none; border-left:2px dashed #e0d6f2; background:#faf8fd; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:3px; padding:13px 16px; position:relative; }
  .oslip-band .oslip-stub::before, .oslip-band .oslip-stub::after{ content:''; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:#efe9fb; }
  .oslip-band .oslip-stub::before{ top:-8px; } .oslip-band .oslip-stub::after{ bottom:-8px; }
  .oslip-band .oslip-stub .oslip-num{ font-size:1.7rem; }
  .oslip-band .oslip-stub .oslip-add{ margin-top:9px; padding:10px 12px; font-size:.8rem; }
  .oslip-band .oslip-stub .oslip-trust{ margin-top:7px; font-size:.52rem; line-height:1.45; }
  /* Add-to-cart journey: locked (lock chip) → approve → unlocked pulse (✓) → click → added (green) */
  .add .addlock{ display:none; align-items:center; margin-right:2px; opacity:.85; }
  .add.locked .addlock{ display:inline-flex; }
  .add.unlocked{ background:linear-gradient(120deg,#10b981,#059669); box-shadow:0 10px 24px -4px rgba(5,150,105,.5), inset 0 1px 0 rgba(255,255,255,.28); }
  .add.added, .oslip-add.added{ background:linear-gradient(120deg,#10b981,#059669); }
  /* attention pulse on the artwork step when the gate walks the customer there */
  @keyframes gatePulse{ 0%{ box-shadow:0 0 0 0 rgba(124,58,237,.5);} 100%{ box-shadow:0 0 0 22px rgba(124,58,237,0);} }
  .attn{ animation:gatePulse .9s var(--ease) 2; }
  .gate-nudge{ position:fixed; z-index:70; transform:translate(-50%,-100%); background:#1a1625; color:#fff; font-size:.72rem; font-weight:700; padding:9px 15px; border-radius:11px; box-shadow:0 10px 30px rgba(20,10,50,.35); pointer-events:none; opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease); white-space:nowrap; }
  .gate-nudge.show{ opacity:1; transform:translate(-50%,calc(-100% - 9px)); }
  .gate-nudge::after{ content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%) rotate(45deg); width:10px; height:10px; background:#1a1625; }
  /* paper tiles: live total-impact delta under the feel sublabel */
  .bdelta{ font-size:clamp(.53rem,.74vw,.63rem); font-weight:800; margin-top:3px; }
  .bdelta.inc{ color:var(--green); } .bdelta.up{ color:var(--bdark); } .bdelta.dn{ color:var(--green); }
  /* finishing (MP3): grommet-spacing sub-option chips — hidden until grommets are selected */
  .gsprow{ display:none; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .gsprow.show{ display:flex; }
  .gsplbl{ font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); margin-right:2px; }
  .gsp{ font-family:inherit; font-size:.7rem; font-weight:700; color:var(--sub); background:#fff; border:1.5px solid #e5e0f0; border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .15s; }
  .gsp:hover{ border-color:var(--brand); color:var(--bdark); }
  .gsp.on{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(124,58,237,.28); }
  .copanel .gsprow{ justify-content:flex-start; }
  /* qty next-break nudge */
  .qnudge b{ color:var(--green); }
  #coQtyNudge{ margin-top:10px; font-size:.66rem; font-weight:700; color:#9b7fd4; min-height:16px; }
  /* countdown idle (no date picked yet — a countdown you chose is service, not pressure) */
  .pcd.idle .pt{ display:none; }
  .pcd.idle .ptl{ font-size:.56rem; letter-spacing:.04em; text-transform:none; color:var(--sub); font-weight:700; line-height:1.45; }
  /* warn-path: reassurance + honest consequence inside the file-check cards */
  .fck-rea{ font-size:.6rem; font-weight:600; color:var(--sub); margin-top:9px; line-height:1.5; } .fck-rea b{ color:var(--bdark); }
  .fck-dimcap{ font-size:.54rem; font-weight:600; color:var(--muted); margin:0 0 10px; }
  .fck-btn.fixit{ background:linear-gradient(110deg,#10b981,#059669); box-shadow:0 8px 18px -4px rgba(5,150,105,.42); }
  .fck-chip.okd{ background:linear-gradient(110deg,#10b981,#059669); box-shadow:0 3px 10px rgba(5,150,105,.3); }
  .prooffix{ display:none; width:100%; align-items:center; justify-content:center; gap:8px; background:linear-gradient(110deg,#10b981,#059669); color:#fff; border:0; border-radius:12px; height:44px; font-weight:800; font-size:.82rem; cursor:pointer; box-shadow:0 8px 18px -4px rgba(5,150,105,.4); margin-bottom:10px; }
  .prooffix.show{ display:inline-flex; }
  /* ===== The rail's vertical budget. Measured at 1440x900 BEFORE any of this:
     an 8-step rail was 514px inside a 503px band, so its first two steps
     already sat behind the view toggle — the overlap predates the title.
     Giving the title real air above it takes another ~130px from the same
     column, so the rhythm tightens on anything under a tall desktop. One tier
     with a high threshold, rather than two stacked ones: the previous pair
     left a band around 1040 where neither was enough. ===== */
  @media (max-height:1240px){
    .rn{ padding:clamp(5px,0.75vh,14px) 0; }
    .rn:not(:last-child) .ico::after{ height:clamp(7px,1.05vh,18px); }
    .f-rail2 .rt2{ margin-bottom:4px; }
  }
  /* On a short screen the GUIDED column cannot hold toggle + title +
     subtitle + an 8-step rail: at 900px it left the rail 8px off the buy
     bar. The subtitle is the part that gives way — it is scannable context,
     not navigation, and the Everything view (which scrolls) keeps it at
     every height. Dropping it returns ~50px, which is what buys the air
     above the title rather than trading one crowding for another. */
  @media (max-height:940px){
    .screen:not(.allopts) .ptitle-s{ display:none; }
    .screen:not(.allopts) .leftzone{ top:334px; }
    .screen:not(.allopts) .f-rail2 .rt2{ display:none; }
  }

  /* ===== v2b-mobile-chassis (390px spike, 2026-07-03): GUIDED is the mobile chassis. This layer proves
     the fixed-canvas .screen survives a phone; the full v2 mobile build (Everything adaptation, touch
     targets audit, real-device pass) is Stage-2 v2c-mobile. Desktop (>760px) is untouched. ===== */
  @media (max-width:760px){
    /* header: keep brand + utility promo, drop the desktop-only rows */
    .uhdr .subrow, .uhdr .search, .uhdr .allbtn{ display:none; }
    .uhdr .util{ padding:0 12px; gap:8px; } .uhdr .util .cat{ display:none; }
    .uhdr .main{ height:50px; padding:0 14px; }
    /* controls: view toggle compact, top-left; proof button joins it; Everything hidden on phones
       (Guided is the mobile chassis — the Everything adaptation is Stage-2 scope) */
    .dtoggle{ top:104px; left:10px; right:auto; padding:3px 6px; min-height:44px; }
    .dtoggle .cvlabel{ display:none; }
    #dAll{ display:none; }
    .f-ctrls{ display:none; }   /* hero zoom/flip cluster — Stage-2 mobile treatment */
    /* stage: hero clears the floating chrome, no desktop side padding (rail is hidden) */
    .screen:not(.allopts) .heroWrap{ padding-left:16px; padding-right:16px; padding-top:56px; }
    .leftzone{ display:none; }   /* the rail — Guided steps drive navigation via bands + Next */
    /* bands: full-width, tighter padding, scroll internally instead of eating the hero */
    .band{ padding:8px 12px 6px; max-height:56vh; overflow-y:auto; overscroll-behavior:contain; }
    /* rail is hidden here, so the reserved safe zone must be released */
    .band .optrow, .band .sizewrap{ gap:8px; max-width:none; }
    .ovdiv{ display:none; }
    .ocA{ width:104px; padding:10px 8px; }
    .ocA.qty{ width:88px; }
    .bandwrap .qpin .qcc{ width:104px; }
    .pass{ flex-wrap:wrap; }
    .pass .pcal{ margin:14px 0 0 14px; }
    .pass .pstub2{ flex:1 1 100%; width:auto; border-left:0; border-top:2px dashed #d8ccf2; flex-direction:row; align-items:center; gap:14px; text-align:left; padding:11px 16px; }
    .pass .pstub2::before, .pass .pstub2::after{ display:none; }
    .oslip-band .oslip-row{ flex-direction:column; }
    .oslip-band .oslip-stub{ width:auto; border-left:0; border-top:2px dashed #e0d6f2; }
    .oslip-band .oslip-stub::before, .oslip-band .oslip-stub::after{ display:none; }
    .fck-pass{ flex-wrap:wrap; }
    .fck-pass .fck-stub{ width:100%; border-left:0; border-top:2px dashed #e0d6f2; flex-direction:row; align-items:center; }
    .fck-pass .fck-stub::before, .fck-pass .fck-stub::after{ display:none; }
    /* buy bar: Total(+each) + In hand + Add. Qty/Size/Paper cells + Save hide; 44px targets hold */
    .f-buy{ padding:0 12px; gap:10px; height:clamp(76px,10vh,92px); }
    .f-buy .bb-cell:nth-child(2), .f-buy .bb-cell:nth-child(3), .f-buy .bb-cell:nth-child(4){ display:none; }
    .f-buy .bb-total .t{ font-size:1.5rem; }
    .savebuild, .f-buy-actions .actdiv{ display:none; }
    .f-buy .add{ padding:0 18px; height:48px; font-size:.9rem; }
    .qetab{ display:none; }      /* quick-edit tab — Stage-2 mobile treatment (bottom-sheet) */
    /* Product name: no room beside the compact toggle on a phone, so it takes
       the full width on its own line. Phones are where the name matters MOST
       — there is no other context on screen.

       Measured at 390px, there are exactly two gaps in the mobile stack:
       86–104 between the header and the toggle (18px, too small) and
       154–186 between the toggle and the poster (32px). This sits in the
       second. The first attempt used 58px and landed on top of the
       printstuff logo — the header is 50px tall, not the 32 it looks.

       nowrap + ellipsis is load-bearing, not styling: a name long enough to
       wrap would take a second line and push straight into the artwork
       preview. Truncating a long name on a phone is the smaller loss. */
    .ptitle{ top:156px; left:10px; right:auto; max-width:calc(100% - 20px); min-height:0; padding:6px 14px; justify-content:flex-start; border-radius:12px; }
    .ptitle-t{ font-size:1rem; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .scroll-hint{ display:none; }
    .protobadge{ top:auto; bottom:8px; }
    .prototag{ display:none; }
  }

  /* ── v2c-mobile · phone-portrait tier (≤500px): the real-device pass over the survival
     chassis (Stage-2 of the 760px spike above). Nests inside it — desktop + tablet (>500px)
     are untouched. Fixes the three phone-only defects the 760 chassis left: the bottom-anchored
     band clipping its own heading/orientation, the buy bar's CTA crowding the summary, and the
     quick-edit drawer overrunning a narrow phone. ── */
  @media (max-width:500px){
    /* buy bar → Total + Add only. In-hand (its own deadline card lives in the Guided flow) and
       the button's "· $price" suffix (the Total already shows it) both drop, so the CTA can't
       overlap the summary the way it does when all three compete for ~366px. */
    .f-buy .bb-seg{ min-width:0; }
    .f-buy .bb-seg .bb-cell:nth-child(5){ display:none; }   /* In hand */
    .f-buy .add{ flex:none; }
    .f-buy .add .addtot{ display:none; }
    /* size selector flows top-down (not bottom-up) so the heading + orientation tiles are the
       first thing shown instead of being scrolled off the top of the bottom-anchored band; a
       shorter band (44vh vs the chassis' 56vh) hands that height back to the hero so the poster
       preview reads as a poster, not a broken thumbnail. Content past the fold scrolls in-band. */
    .band{ justify-content:flex-start; max-height:44vh; }
    /* trim the dead gradient above the poster (chassis parks it 56px down to clear now-hidden chrome). */
    .screen:not(.allopts) .heroWrap{ padding-top:24px; }
    /* poster art scales to the POSTER box, not the viewport: the mock's headline uses vw fonts, so
       once fitPoster shrinks the box on a phone the text overran its own edges ("SUMM…"). Make the
       poster a query container and size its type in cqw so it tracks the box at any size/orientation. */
    .poster{ container-type:inline-size; }
    .part{ padding:8% 8%; }
    .part .pk{ font-size:3cqw; letter-spacing:.18em; }
    .part .pt{ font-size:15cqw; line-height:.9; }
    .part .pdt{ font-size:5.5cqw; }
    .part .pv{ font-size:3.4cqw; margin-top:3px; }
    /* quick-edit drawer never wider than the phone (was clamp(380px,…) → overran ≤380px). */
    .qdrawer{ width:100vw; }
  }

/* ── below-the-fold content section (SEO) ── */

  .seo{ background:#fff; color:#2a2438; padding:60px 0 96px; position:relative; z-index:2; }
  .seo .wrap{ max-width:1320px; margin:0 auto; padding:0 clamp(40px,5vw,90px); }
  .seo .crumbs{ font-size:.7rem; font-weight:700; color:#9b8fb5; margin-bottom:16px; } .seo .crumbs a{ color:#9b8fb5; text-decoration:none; }
  .seo h2{ font-family:'Montserrat',sans-serif; font-size:1.95rem; font-weight:900; letter-spacing:-.02em; color:#1a1625; }
  .seo h3{ font-family:'Montserrat',sans-serif; font-size:1.18rem; font-weight:800; margin:36px 0 8px; color:#1a1625; }
  .seo p{ font-size:.92rem; line-height:1.75; color:#4b4660; margin:10px 0; max-width:76ch; } .seo p.lead{ font-size:1.04rem; color:#352f4a; }
  .seo a{ color:var(--brand); font-weight:700; text-decoration:none; } .seo a:hover{ text-decoration:underline; }
  .seo ul{ margin:10px 0 10px 20px; } .seo li{ font-size:.9rem; line-height:1.7; color:#4b4660; margin:5px 0; }
  .seo .spec{ width:100%; border-collapse:collapse; margin-top:16px; font-size:.88rem; }
  .seo .spec td{ padding:11px 14px; border-bottom:1px solid #efe9f7; } .seo .spec tr td:first-child{ font-weight:800; color:#1a1625; width:32%; }
  .seo .stocks{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
  .seo .stock{ border:1px solid #ece6f5; border-radius:14px; padding:15px 17px; background:#fcfaff; }
  .seo .stock h4{ font-size:.94rem; font-weight:800; color:#1a1625; display:flex; align-items:center; gap:9px; } .seo .stock .sw{ width:22px; height:22px; border-radius:6px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
  .seo .stock p{ font-size:.82rem; margin:7px 0 0; }
  .seo .qa{ border-top:1px solid #eee7f6; padding:16px 0; } .seo .qa:last-child{ border-bottom:1px solid #eee7f6; }
  .seo .qa h4{ font-size:.98rem; font-weight:800; color:#1a1625; } .seo .qa p{ margin:7px 0 0; }
  .seo .reviews{ display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
  .seo .rev{ flex:1; min-width:240px; border:1px solid #ece6f5; border-radius:14px; padding:16px; background:#fff; } .seo .rev .stars{ color:#f59e0b; font-size:.92rem; letter-spacing:2px; } .seo .rev p{ font-size:.85rem; font-style:italic; margin-top:6px; } .seo .rev .who{ font-size:.72rem; font-weight:800; color:#1a1625; margin-top:8px; }
  .seo .cta{ margin-top:44px; padding:26px 30px; border-radius:18px; background:linear-gradient(135deg,#241b38,#5b21b6); color:#fff; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .seo .cta h3{ color:#fff; margin:0; font-size:1.3rem; } .seo .cta p{ color:rgba(255,255,255,.82); margin:5px 0 0; }
  .seo .cta .b{ margin-left:auto; background:#fff; color:var(--brand); border:0; border-radius:12px; padding:14px 26px; font-family:inherit; font-weight:800; font-size:.86rem; cursor:pointer; }
  @media(max-width:760px){ .seo .stocks{ grid-template-columns:1fr; } }

/* ── v2c-state: restore banner ── */
.cfg2-restore{ position:fixed; top:170px; left:50%; transform:translate(-50%,-8px); z-index:42; display:flex; align-items:center; gap:12px; padding:9px 10px 9px 16px; opacity:0; transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); }
.cfg2-restore.show{ opacity:1; transform:translate(-50%,0); }
.cfg2-restore .r-txt{ font-size:.74rem; font-weight:700; color:#1a1625; }
.cfg2-restore .r-yes{ font-family:inherit; font-size:.72rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#7c3aed,#5b21b6); border:0; border-radius:9px; padding:8px 14px; cursor:pointer; box-shadow:0 6px 14px rgba(124,58,237,.35); }
.cfg2-restore .r-no{ font-family:inherit; font-size:.72rem; font-weight:800; color:#5b21b6; background:transparent; border:1.4px dashed #c7b8ec; border-radius:9px; padding:8px 12px; cursor:pointer; }
@media (max-width:760px){ .cfg2-restore{ top:110px; width:calc(100vw - 24px); justify-content:space-between; } }
/* ── v2c-artwork: real preview + press-check (na) states ── */
/* Real artwork sits on PAPER: white, like the stock. A transparent PNG designed
   for a white card used to read black on the dark placeholder ground. */
.poster.realart{ background-color:#fff; background-size:contain; background-position:center; background-repeat:no-repeat; }
.poster.realart .part{ display:none; }
.poster.realart::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
/* upload beats on the hero face. The customer's own file is already painted
   underneath: the veil is GLASS (blur + desaturate), a scan beam sweeps it,
   the preflight steps tick past; then the glass lifts and the card pops. */
.upveil{ position:absolute; inset:0; z-index:6; overflow:hidden; pointer-events:none; color:#fff; font-family:'Montserrat',sans-serif; text-align:center;
  background:rgba(24,12,48,.28); backdrop-filter:blur(7px) saturate(.6) brightness(.85); -webkit-backdrop-filter:blur(7px) saturate(.6) brightness(.85);
  transition:opacity .6s ease, backdrop-filter .6s ease, -webkit-backdrop-filter .6s ease, background .6s ease; }
.upveil.lift{ opacity:0; background:transparent; backdrop-filter:blur(0) saturate(1) brightness(1); -webkit-backdrop-filter:blur(0) saturate(1) brightness(1); }
.upv-beam{ position:absolute; left:-10%; right:-10%; height:26%; top:-30%; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(124,58,237,0) 0%, rgba(167,139,250,.28) 45%, rgba(255,255,255,.75) 50%, rgba(167,139,250,.28) 55%, rgba(124,58,237,0) 100%); filter:blur(1px); }
.upveil.scan .upv-beam{ opacity:1; animation:upScan 1.7s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes upScan{ 0%{ transform:translateY(0); } 100%{ transform:translateY(520%); } }
.upv-hud{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.upv-ring{ position:relative; width:64px; height:64px; display:none; }
.upveil.up .upv-ring{ display:block; }
.upv-ring svg{ width:64px; height:64px; transform:rotate(-90deg); }
.upv-ring .tr{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:3; }
.upv-ring .pr{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:97.4; transition:stroke-dashoffset .25s ease; }
.upv-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:900; }
.upv-t{ font-weight:900; font-size:.92rem; letter-spacing:.01em; text-shadow:0 2px 12px rgba(20,10,40,.6); }
.upv-step{ font-size:.68rem; font-weight:700; color:rgba(255,255,255,.82); display:none; }
.upveil.scan .upv-step{ display:block; animation:upStepIn .36s ease both; }
.upv-step.in{ animation:upStepIn .36s ease both; }
@keyframes upStepIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.upveil.scan .upv-t::after{ content:''; display:inline-block; width:.9em; text-align:left; animation:upDots 1.2s steps(4,end) infinite; }
@keyframes upDots{ 0%{ content:''; } 25%{ content:'.'; } 50%{ content:'..'; } 75%{ content:'...'; } }
.poster.artpop{ animation:artPop .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes artPop{ 0%{ transform:scale(.985); box-shadow:0 0 0 0 rgba(124,58,237,.55), 0 50px 95px -30px rgba(50,25,110,.55); } 40%{ transform:scale(1.012); } 100%{ transform:scale(1); box-shadow:0 0 0 26px rgba(124,58,237,0), 0 50px 95px -30px rgba(50,25,110,.55); } }
.upv-verdict{ position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:7; pointer-events:none; white-space:nowrap; padding:8px 14px; border-radius:99px; background:#059669; color:#fff; font-family:'Montserrat',sans-serif; font-weight:900; font-size:.74rem; box-shadow:0 8px 24px rgba(5,150,105,.35); animation:verdictFly 2.6s cubic-bezier(.2,.8,.2,1) both; }
.upv-verdict.warn{ background:#d97706; box-shadow:0 8px 24px rgba(217,119,6,.35); }
@keyframes verdictFly{ 0%{ opacity:0; transform:translate(-50%,18px) scale(.9); } 14%{ opacity:1; transform:translate(-50%,0) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-10px); } }
/* the pass takeover: full IMAGE size (not full screen), green, the circle draws,
   the check draws, the words land, then the whole thing fades off the art */
.upv-take{ position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(5,150,105,.86); color:#fff; pointer-events:none; border-radius:inherit; animation:takeIn .35s ease both, takeOut .5s ease 1.85s both; }
.upv-take svg{ width:min(38%,150px); height:auto; }
.upv-take .tk-c{ fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transform:rotate(-90deg); transform-origin:50% 50%; animation:takeDrawC .55s cubic-bezier(.4,0,.2,1) .15s forwards; }
.upv-take .tk-k{ fill:none; stroke:#fff; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:80; stroke-dashoffset:80; animation:takeDrawK .4s cubic-bezier(.4,0,.2,1) .6s forwards; }
.upv-take .tk-t{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1rem; letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,60,40,.35); opacity:0; animation:takeText .4s ease .85s forwards; }
@keyframes takeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes takeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes takeDrawC{ to{ stroke-dashoffset:0; } }
@keyframes takeDrawK{ to{ stroke-dashoffset:0; } }
@keyframes takeText{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes upindet{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(250%); } }
.poster.uploading .upcue{ display:none; }
/* Fit pills: the shared .seg rule paints the active pill white-on-nothing and
   expects a sliding thumb this group never had — "Actual size" was invisible.
   Same explicit treatment as the Both sides / One side group. */
.artctrls .aseg .cpill.on{ background:#7c3aed; color:#fff; box-shadow:0 3px 9px rgba(124,58,237,.36); }
.afc-prog{ width:70%; max-width:220px; height:5px; border-radius:99px; background:#ece4fb; overflow:hidden; }
.afc-prog i{ display:block; height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .2s; }
.afc-prog.indet i{ width:40%; animation:upindet 1.1s ease-in-out infinite; }
.seg .cpill.dis{ opacity:.35; pointer-events:none; }
.ck.na .ck-ic{ background:#c9c2dd; }
.ck.na .ck-ic::after{ content:'👁'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.6rem; }
/* header search: the → button must never flex-grow (span selector above gives children flex:1) */
.uhdr .search .go{ flex:0 0 42px; }
/* ── quick-edit drawer: explicit consistent grids (2/3/4-wide) — no cascade surprises ── */
.qdrawer-body .dgrid{ display:grid; gap:10px; align-items:stretch; }
.qdrawer-body .dgrid.g2{ grid-template-columns:repeat(2,1fr); }
.qdrawer-body .dgrid.g3{ grid-template-columns:repeat(3,1fr); }
.qdrawer-body .dgrid.g4{ grid-template-columns:repeat(4,1fr); }
.qdrawer-body .dgrid .ocA{ width:auto; min-width:0; margin:0; backdrop-filter:none; padding:10px 6px 14px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.qdrawer-body .dgrid .ocA .gb{ height:30px; margin-bottom:5px; }
.qdrawer-body .dgrid .ocA .bn2{ font-size:.68rem; white-space:normal; line-height:1.2; overflow-wrap:anywhere; }
.qdrawer-body .dgrid .ocA .bx{ white-space:normal; }
.qdrawer-body .ocA.otile .gb, .qdrawer-body .ocA.stile .gb{ height:34px; }
.qdrawer-body .ocA.stile .gtwo{ width:30px; height:34px; } .qdrawer-body .ocA.stile .gtwo::before, .qdrawer-body .ocA.stile .gtwo::after{ width:22px; height:28px; }
.qdrawer-body .ocA .gb > .vmini{ width:34px; height:22px; } .qdrawer-body .ocA .gb > .vmini.round{ border-radius:6px; }
.qdrawer-body .ocA .gb > .gsw{ width:34px; height:27px; }
.qdrawer-body .dgrid .ocA .bdelta{ font-size:.56rem; margin-top:2px; }
.qdrawer-body .dgrid .ocA.qty .gqn{ font-size:1rem; }
/* custom-size block gets HEADROOM for the floating WIDTH/HEIGHT/UNITS labels (they sit at top:-16px) */
.qdrawer-body .dcustom2{ margin-top:26px; }
.qdrawer-body .dcustom2 .cscust{ margin-top:0; gap:10px; justify-content:flex-start; flex-wrap:wrap; }
.qdrawer-body .dcustom2 .cinput{ width:64px; font-size:1.05rem; padding:8px 6px; }
.qdrawer-body .dcustom2 .csprev{ width:40px; height:40px; }
.qdrawer-body .dcustom2 .cshint{ flex:1 1 100%; font-size:.6rem; margin-top:8px; }
/* qty custom input = one grid cell, same height as the tiles */
.qdrawer-body .dgrid .qpin-d{ align-self:stretch; display:flex; }
.qdrawer-body .dgrid .qpin-d .qcc{ width:100%; height:auto; min-height:56px; }
.qdrawer-body .dgrid .qpin-d .qcc-in{ font-size:1rem; }
.qdrawer-body .dqnote{ margin-top:9px; font-size:.64rem; font-weight:700; color:#9b7fd4; }
/* price-delta flash inside the N12 footer (the old selectors only covered .f-buy/.qdf-top) */
.qdrawer-foot .bb-l .pdelta{ font-family:'Montserrat',sans-serif; font-size:.88rem; font-weight:900; opacity:0; }
.qdrawer-foot .pdelta.go{ animation:flash 1.25s var(--ease); }
/* ── round-2 polish: the ± delta FLOATS UP and fades (was: appear-hold-blip) ── */
@keyframes flashv2{ 0%{ opacity:0; transform:translateY(8px); } 16%{ opacity:1; transform:translateY(0); } 55%{ opacity:.95; transform:translateY(-7px); } 100%{ opacity:0; transform:translateY(-22px); } }
.f-buy .pdelta.go, .qdrawer-foot .pdelta.go, .qdf-top .pdelta.go{ animation:flashv2 1.5s cubic-bezier(.22,1,.36,1); }
/* custom-size hint sits BELOW the inputs, full width — never crammed beside the units toggle */
.qdrawer-body .dcustom2 .cshint{ flex:1 1 100%; margin-top:9px; }
/* stub CTAs may carry longer labels ("Upload a bigger file") — wrap, never clip */
.fck-stub .fck-btn{ white-space:normal; line-height:1.25; height:auto; min-height:36px; padding:7px 10px; font-size:.7rem; }
/* ── round-3: motion + card polish ── */
/* money settle: one soft rise per change — calm at any click rate */
@keyframes moneySwap{ from{ opacity:.3; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.f-buy .bb-total .t, .qdrawer-foot .bb-total .t{ display:inline-block; }
.money-swap{ animation:moneySwap .3s cubic-bezier(.22,1,.36,1); }
/* the ± delta ACTUALLY floats now: it was an inline span — transforms were silently
   ignored. Game-feel: pop in, hang a beat, sail up and away. */
.pdelta{ display:inline-block; position:relative; will-change:transform,opacity; pointer-events:none; }
@keyframes flashv3{
  0%{ opacity:0; transform:translateY(4px) scale(.8); }
  12%{ opacity:1; transform:translateY(-2px) scale(1.22); }
  28%{ opacity:1; transform:translateY(-5px) scale(1); }
  100%{ opacity:0; transform:translateY(-38px) scale(.94); }
}
.f-buy .pdelta.go, .qdrawer-foot .pdelta.go, .qdf-top .pdelta.go{ animation:flashv3 1.35s cubic-bezier(.16,.8,.3,1); }
/* file-check cards: cells never line-break — tight labels, ellipsized values */
.fck-cells4{ gap:6px; }
.fck-cell{ padding:7px 8px; min-width:0; }
.fck-cell .cl{ white-space:nowrap; letter-spacing:.04em; font-size:.47rem; overflow:hidden; text-overflow:ellipsis; }
.fck-cell .cv{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.72rem; }
.fck-dc .fck-tools{ flex-wrap:wrap; row-gap:8px; }
.fck-fline .fck-fn{ max-width:44%; }
/* alt-size chips on the warn card (legacy proportional-scaling feature, Rory 3-choice form) */
.fck-alts{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px; }
.fck-alts .fa-l{ font-size:.6rem; font-weight:800; color:var(--sub); }
.afc-alt{ font-family:inherit; font-size:.66rem; font-weight:800; color:var(--bdark); background:#fff; border:1.4px solid #ddd2f2; border-radius:99px; padding:6px 12px; cursor:pointer; white-space:nowrap; transition:.15s cubic-bezier(.22,1,.36,1); }
.afc-alt:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }
/* quick-edit: in-hand + artwork rows */
.qe-when{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1.4px solid #e6dff2; border-radius:12px; padding:12px 14px; cursor:pointer; font-family:inherit; transition:.15s; }
.qe-when:hover{ border-color:var(--brand); }
.qe-when .qw-d{ font-weight:800; font-size:.86rem; color:var(--bdark); }
.qe-when .qw-t{ font-size:.58rem; font-weight:800; letter-spacing:.06em; color:#fff; background:linear-gradient(110deg,#60a5fa,#2563eb); border-radius:99px; padding:3px 9px; }
.qe-when .qw-arrow{ margin-left:auto; color:#9b7fd4; font-weight:800; }
.qe-art-empty{ display:flex; align-items:center; gap:10px; width:100%; background:rgba(255,255,255,.7); border:1.5px dashed rgba(124,58,237,.42); border-radius:12px; padding:12px 14px; cursor:pointer; font-family:inherit; font-size:.76rem; font-weight:800; color:var(--bdark); }
.qe-art-empty:hover{ border-color:var(--brand); }
.qe-art-full{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #ece6f7; border-radius:12px; padding:11px 13px; }
.qe-art-full .qa-name{ font-size:.72rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.qe-art-full .qa-chip{ font-size:.52rem; font-weight:800; border-radius:99px; padding:3px 9px; white-space:nowrap; }
.qe-art-full .qa-chip.ok{ background:rgba(16,185,129,.14); color:#047857; }
.qe-art-full .qa-chip.warn{ background:rgba(245,158,11,.15); color:#b45309; }
/* ═══════ round-4 polish: calm motion · unified art-card anatomy · rail overflow ═══════ */
/* MONEY: pure crossfade — no rise, no bounce. The number simply settles into place. */
@keyframes moneyFade{ from{ opacity:.25; } to{ opacity:1; } }
.money-swap{ animation:moneyFade .38s ease-out; }
/* DELTA: fades in gently, then floats up and out on ONE continuous ease — zero scale, zero bounce. */
@keyframes flashv4{
  0%{ opacity:0; transform:translateY(3px); }
  18%{ opacity:1; }
  62%{ opacity:.95; }
  100%{ opacity:0; transform:translateY(-22px); }
}
.f-buy .pdelta.go, .qdrawer-foot .pdelta.go, .qdf-top .pdelta.go{ animation:flashv4 1.6s cubic-bezier(.33,0,.2,1); }
/* rail: long values (file names) ellipsize INSIDE the rail — never overlap the hero */
.rn > span:not(.ico){ flex:1; min-width:0; }
.rn .v{ overflow:hidden; text-overflow:ellipsis; }
/* unified art-card anatomy — guided now stacks fck-top over the SAME tools row as everything */
.fck-pass{ display:block; }
.fck-pass .fck-top{ display:flex; align-items:stretch; position:relative; }
.fck .fck-hdrow{ display:flex; align-items:center; gap:10px; }
.fck .fck-tools{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid #f0e9fb; background:#faf8fd; flex-wrap:wrap; row-gap:8px; }
.fck-ghost{ transition:.15s; } .fck-ghost:hover{ border-color:var(--brand); color:var(--brand); }
/* full filename, always — wraps instead of truncating */
.fck-fline{ flex-wrap:wrap; row-gap:2px; }
.fck-fline .fck-fn{ max-width:none; white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; }
/* compact one-line file-dims strip (replaces the oversized dim block) */
.fck-filedim{ margin:7px 0 11px; font-size:.7rem; font-weight:700; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fck-filedim b{ color:var(--bdark); font-weight:900; }
.fck-filedim .fd-sep{ margin:0 7px; color:#b7a6dc; }
/* drawer artwork card — same bones as the main cards, drawer-scaled chrome */
.qe-art-card{ background:#fff; border:1px solid #ece6f7; border-radius:14px; overflow:hidden; box-shadow:0 10px 26px rgba(60,30,130,.08); }
.qe-art-card.warn{ border-color:#f5e3c4; }
.qe-art-card .qe-art-bd{ padding:13px 15px; }
/* ═══════ round-5: softer money fade · layered delta floats · card emphasis fixes ═══════ */
/* money: the .25-start read as a FLASH — start half-visible and take longer, pure ease, no motion */
@keyframes moneyFade2{ from{ opacity:.5; } to{ opacity:1; } }
.money-swap{ animation:moneyFade2 .65s ease; }
/* delta floats are now ephemeral CHILDREN of the anchor (see flash()) — each completes
   its full flight; the anchor itself must stay visible for its children to show */
.f-buy .pdelta, .qdrawer-foot .pdelta, .qdf-top .pdelta{ opacity:1; }
.pdelta{ min-width:2px; min-height:1em; }
.pdelta .pfloat{ position:absolute; left:0; bottom:0; white-space:nowrap; opacity:0; pointer-events:none; animation:flashv4 1.6s cubic-bezier(.33,0,.2,1) forwards; }
.pdelta .pfloat.up{ color:#059669; } .pdelta .pfloat.down{ color:#dc2626; }
/* file-dims strip: this is CRUCIAL info — a real banded row now, not a whisper */
.fck-filedim{ font-size:.84rem; font-weight:700; color:var(--sub); background:linear-gradient(90deg,#f6f1fe,#faf8fd); border:1px solid #eae1fa; border-radius:10px; padding:9px 13px; margin:9px 0 12px; }
.fck-filedim b{ font-size:1.02em; color:var(--bdark); font-weight:900; }
.fck-filedim .fd-sep{ margin:0 8px; color:#a98fe0; font-weight:900; }
/* card header: state-toned, not black — amber when it needs a look, brand-dark otherwise */
.fck .fck-h{ color:var(--bdark); font-size:1rem; letter-spacing:-.005em; }
.fck.warn .fck-h{ color:#b45309; }
/* tools alignment is per-container: guided pins the primary right; everything + drawer CENTER everything */
.fck-pass .fck-tools .fck-btn{ margin-left:auto; }
.fck-dc .fck-tools, .qe-art-card .fck-tools{ justify-content:center; }
.fck-dc .fck-tools .fck-btn, .qe-art-card .fck-tools .fck-btn{ margin-left:0; }
/* the alt-size explainer is a full sentence now — give it its own line above the chips */
.fck-alts .fa-l{ width:100%; font-size:.62rem; }
/* ═══════ round-7: conversational size story + inline recommendations ═══════ */
.fck-filedim{ white-space:normal; overflow:visible; text-overflow:clip; }
.fck-filedim .fd-row{ line-height:1.5; }
.fck-filedim.warn{ background:linear-gradient(90deg,#fdf6ea,#fdfaf3); border-color:#f3e0bb; }
.fck-filedim .fd-note{ margin-top:7px; font-size:.68rem; font-weight:700; color:#92610a; line-height:1.5; }
.fck-filedim .fd-recs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.fck-filedim .fd-recs .afc-alt{ background:#fff; }
/* PDF/raster hero preview fills the poster face exactly like the LIVE form's poster
   board (cover + center) — the crop you see is the crop you'd get printing as-is */
.poster.realart{ background-size:cover; }
/* ═══════ round-9: real artwork owns the hero ═══════ */
/* the demo dpi-flag is placeholder theatre — never show it over a REAL uploaded file */
.poster.realart .pf-flag{ display:none !important; }
/* solid press-room dark behind the artwork: the margin you see when a file is
   physically smaller than the order is INFORMATION, not decoration */
.poster.realart{ background-color:#fff; }   /* paper. This later rule is the one that wins — the earlier #fff never applied while this said #17102b */
/* ═══════ round-10: underfill = unmistakable "no coverage" state (owner-picked hatch) ═══════ */
.poster.realart.underfill{ background-color:#fbf3e2; }
.artFootprint{ position:absolute; display:none; border:2px dashed rgba(180,83,9,.55); border-radius:2px; pointer-events:none; z-index:5; }
.artFitTag{ position:absolute; display:none; left:50%; bottom:7px; transform:translateX(-50%); z-index:7; white-space:nowrap; max-width:94%; overflow:hidden; text-overflow:ellipsis; font-size:.6rem; font-weight:800; color:#92400e; background:rgba(255,251,240,.94); border:1px solid #f0ddb4; border-radius:99px; padding:4px 11px; pointer-events:none; box-shadow:0 3px 10px rgba(146,64,14,.14); }
.artFitTag b{ font-weight:900; }

/* ── Custom quote sheet (per product page). Same drawer chrome as Quick edit;
   controls in the page's own dropdown/input language (.voptsel + .cinput
   family), never browser defaults. ── */
.qsheet{ z-index:46; }
.qsheet .qdrawer-head small{ font-weight:600; color:var(--muted); letter-spacing:0; text-transform:none; margin-left:8px; }
.qs-body{ flex:1; overflow:auto; padding:18px 24px 24px; }
.qs-prod{ display:flex; flex-direction:column; gap:2px; padding:0 0 14px; border-bottom:1px solid #eee6f8; margin-bottom:4px; }
.qs-pl{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9b7fd4; }
.qs-prod b{ font-family:'Montserrat',sans-serif; font-size:1.02rem; font-weight:800; color:var(--bdark); }
.qs-sel{ width:100%; font-weight:700; }
.qs-in{ width:100%; font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; color:var(--ink); background:#fff; border:1.4px solid #ddd2f2; border-radius:10px; padding:11px 13px; box-shadow:0 2px 8px rgba(60,30,130,.05); transition:.15s var(--ease); }
.qs-in::placeholder{ color:#a596c9; font-weight:500; }
.qs-in:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,58,237,.13); }
.qs-qty{ width:120px; font-family:'Montserrat',sans-serif; font-size:1.05rem; font-weight:800; color:var(--bdark); }
.qs-notes{ resize:vertical; min-height:96px; line-height:1.45; }
.qs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qs-foot .qs-hint{ font-size:.66rem; font-weight:600; color:var(--muted); text-align:center; }
.qs-send{ width:100%; justify-content:center; }
.qsbtn{ margin-left:8px; }
.f-buy-actions .qsbtn, .qdf-acts .qsbtn{ border-style:solid; }
.uhdr .hicons a{ color:inherit; text-decoration:none; }

/* ── Artwork: front/back slots + hero faces as drop targets (Build A). A
   single-sided product renders exactly as before — the one slot is
   display:contents. Double-sided splits the dropzone into two equal slots. ── */
.dz:not(.two) > .dzslot{ display:contents; }
.dz.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; max-width:760px; }
.dz.two .dzslot{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; min-height:clamp(116px,17vh,168px); padding:clamp(18px,3vh,30px) 16px 18px; border:2px dashed rgba(124,58,237,.42); border-radius:18px; background:rgba(255,255,255,.55); backdrop-filter:blur(16px); box-shadow:0 12px 32px rgba(60,30,130,.1); cursor:pointer; transition:.2s var(--ease); }
.dz.two .dzslot.over{ border-color:var(--brand); background:rgba(124,58,237,.07); }
.dz.two .dzslot.filled{ display:block; text-align:left; cursor:default; padding:0; border:1px solid #ece6f7; background:#fff; box-shadow:0 18px 44px rgba(60,30,130,.13); overflow:hidden; }
.dz.two .dzslot .t{ font-size:.78rem; }
.dzface{ position:absolute; top:10px; left:12px; font-size:.54rem; font-weight:900; letter-spacing:.16em; color:#7c3aed; background:rgba(124,58,237,.1); border-radius:6px; padding:2px 7px; }
.dz.two .dzslot.filled .dzface{ display:none; }
.fck-back .fck-rea{ padding:6px 16px 10px; font-size:.7rem; color:var(--muted); font-weight:600; }
/* hero faces: a drop target with a message while a file is over it */
.poster.dropover{ outline:3px dashed var(--brand); outline-offset:-3px; }
.poster.dropover::after{ content:attr(data-dropmsg); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(124,58,237,.55); color:#fff; font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(.9rem,1.6vw,1.3rem); letter-spacing:.06em; z-index:9; pointer-events:none; }
.pface-back.realart .pback-note{ display:none; }
.pface-back.realart{ background-color:#fff; }   /* the back is paper too */
#posterBack{ cursor:pointer; }
/* ── Quote sheet round 2: custom size, "Other" entries, quantities, files ── */
.qs-custom{ display:flex; align-items:flex-end; gap:10px; margin-top:10px; }
.qs-custom[hidden]{ display:none; }
.qs-custom .cfield{ display:flex; flex-direction:column; gap:4px; }
.qs-custom .cfield label{ font-size:.56rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9b7fd4; }
.qs-cin{ width:96px; font-size:1.05rem; padding:8px 6px; }
.qs-custom .csx{ font-weight:800; color:#a596c9; padding-bottom:12px; }
.qs-unit{ font-size:.66rem; font-weight:700; color:var(--muted); padding-bottom:14px; }
.qs-other{ margin-top:8px; }
.qs-other[hidden]{ display:none; }
.qs-qrow{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.qs-qrow .qs-qty{ width:130px; }
.qs-rmqty, .qs-rmfile{ width:30px; height:30px; border-radius:9px; border:1.4px solid #e6dff2; background:#fff; color:#8b6fd0; font-weight:800; cursor:pointer; line-height:1; }
.qs-rmqty:hover, .qs-rmfile:hover{ border-color:var(--brand); color:var(--brand); }
.qs-addqty{ font-family:'Inter',sans-serif; font-size:.72rem; font-weight:800; color:var(--bdark); background:transparent; border:1.6px dashed #c7b8ec; border-radius:10px; padding:8px 14px; cursor:pointer; transition:.15s var(--ease); }
.qs-addqty:hover{ border-color:var(--brand); background:rgba(124,58,237,.06); }
.qs-note{ margin-top:8px; font-size:.64rem; font-weight:600; color:var(--muted); }
.qs-drop{ display:flex; align-items:center; gap:12px; border:1.5px dashed rgba(124,58,237,.42); border-radius:14px; background:rgba(255,255,255,.7); padding:12px 14px; cursor:pointer; transition:.2s var(--ease); }
.qs-drop:hover, .qs-drop.over{ border-color:var(--brand); background:rgba(124,58,237,.07); }
.qs-drop input{ display:none; }
.qs-drop .ic{ width:36px; height:36px; border-radius:11px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; font-size:.9rem; box-shadow:0 6px 14px rgba(124,58,237,.35); }
.qs-drop .t{ font-size:.78rem; font-weight:800; color:var(--ink); } .qs-drop .t small{ display:block; font-size:.6rem; color:var(--sub); font-weight:500; margin-top:2px; }
.qs-files{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.qs-file{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ece6f7; border-radius:10px; padding:7px 8px 7px 12px; font-size:.74rem; }
.qs-file .qs-fn{ font-weight:700; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.qs-file .qs-fs{ color:var(--muted); font-weight:600; flex:none; }
.qsheet .qe-when{ margin:0; }

/* ── Hero faces read as upload areas until a file lands: the mock design dims
   behind a dashed inset frame and an upload chip. Gone the moment art arrives. ── */
.poster:not(.hasart){ cursor:pointer; }
.poster:not(.hasart) .part{ opacity:.32; }
.upcue{ position:absolute; inset:clamp(10px,3%,18px); z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; padding:12px; border:2px dashed rgba(255,255,255,.8); border-radius:max(8px, calc(var(--rad,0px) - 6px)); background:rgba(26,15,51,.28); backdrop-filter:blur(1.5px); color:#fff; pointer-events:none; transition:background .2s, border-color .2s; }
.upcue .upic{ width:clamp(34px,8%,52px); aspect-ratio:1; border-radius:28%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:clamp(.9rem,2vw,1.3rem); font-weight:900; box-shadow:0 8px 20px rgba(124,58,237,.45); }
.upcue b{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(.72rem,1.5vw,1.05rem); letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.upcue small{ font-size:clamp(.52rem,.9vw,.66rem); font-weight:600; opacity:.9; max-width:26ch; line-height:1.35; }
.poster:hover .upcue{ background:rgba(124,58,237,.34); border-color:#fff; }
.poster.hasart .upcue, .poster.realart .upcue, .poster.dropover .upcue{ display:none; }
.pface-back .upcue{ color:#3d2b6e; border-color:rgba(124,58,237,.55); background:rgba(255,255,255,.32); }
.pface-back .upcue b{ text-shadow:none; }
.pface-back.realart .upcue{ display:none; }
/* the card3d "both sides" layout: both faces show their cue */
.card3d.both .upcue b{ font-size:clamp(.62rem,1.1vw,.85rem); }
.card3d.both .upcue{ top:34px; }   /* clears the FRONT/BACK chips in the both-sides layout */

/* ── Quote sheet round 3: header, purple top edge, tidy custom size, quantities
   side by side, inline calendar, "included" finish tiles ── */
.qsheet{ border-top:5px solid transparent; border-image:linear-gradient(90deg,#7c3aed,#a855f7 55%,#ec4899) 1; }
.qs-head{ display:flex; align-items:flex-start; gap:14px; padding:20px 24px 16px; border-bottom:1px solid #eee6f8; background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(124,58,237,0)); }
.qs-hic{ width:46px; height:46px; flex:none; border-radius:14px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(124,58,237,.35); }
.qs-ht{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.qs-he{ font-size:.58rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#8b6fd0; }
.qs-hn{ font-family:'Montserrat',sans-serif; font-size:1.15rem; font-weight:900; color:var(--bdark); line-height:1.15; }
.qs-hs{ font-size:.7rem; font-weight:600; color:var(--muted); line-height:1.4; margin-top:3px; }
.qs-head .qdrawer-x{ margin-left:auto; flex:none; }
.qs-custom{ display:flex; align-items:flex-end; gap:12px; margin-top:12px; padding:12px; background:rgba(124,58,237,.05); border-radius:12px; }
.qs-dim{ display:flex; flex-direction:column; gap:5px; }
.qs-dim label{ font-size:.56rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9b7fd4; }
.qs-num{ width:104px; font-family:'Montserrat',sans-serif; font-size:1rem; font-weight:800; color:var(--bdark); text-align:center; }
.qs-x{ font-weight:800; color:#a596c9; padding-bottom:12px; }
.qs-unit{ padding-bottom:13px; }
.qs-qtys{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.qs-qrow{ display:inline-flex; align-items:center; gap:6px; }
.qs-qrow .qs-qty{ width:104px; font-family:'Montserrat',sans-serif; font-size:1rem; font-weight:800; color:var(--bdark); text-align:center; }
.qs-qrow .qs-rmqty{ width:26px; height:26px; }
.qs-calwrap{ position:relative; }
.qs-calbtn{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1.4px solid #e6dff2; border-radius:12px; padding:9px 14px 9px 10px; cursor:pointer; font-family:inherit; transition:.15s; }
.qs-calbtn:hover, .qs-calbtn.open{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.qs-calic{ width:40px; height:42px; border-radius:9px; overflow:hidden; border:1px solid #e3daf4; display:flex; flex-direction:column; flex:none; background:#fff; }
.qs-calic b{ font-size:.5rem; font-weight:900; letter-spacing:.1em; color:#fff; background:var(--grad); text-align:center; padding:2px 0; }
.qs-calic i{ font-style:normal; font-family:'Montserrat',sans-serif; font-weight:900; font-size:1rem; color:var(--bdark); text-align:center; flex:1; display:flex; align-items:center; justify-content:center; }
.qs-cald{ font-weight:800; font-size:.9rem; color:var(--bdark); flex:1; }
.qs-cal{ margin-top:8px; background:#fff; border:1.4px solid #e6dff2; border-radius:14px; padding:12px; box-shadow:0 18px 44px rgba(60,30,130,.14); }
.qs-cal[hidden]{ display:none; }
.qs-calhd{ display:flex; align-items:center; justify-content:space-between; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.86rem; color:var(--bdark); margin-bottom:8px; }
.qs-calnav{ width:30px; height:30px; border-radius:9px; border:1.4px solid #e6dff2; background:#fff; color:var(--brand); font-size:1.1rem; font-weight:800; cursor:pointer; }
.qs-calnav:hover{ border-color:var(--brand); }
.qs-calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.qs-caldow{ font-size:.56rem; font-weight:800; letter-spacing:.08em; color:#9b7fd4; text-align:center; padding:2px 0 4px; }
.qs-calday{ aspect-ratio:1; border-radius:9px; border:1.4px solid transparent; background:rgba(124,58,237,.05); font-family:'Inter',sans-serif; font-weight:700; font-size:.78rem; color:var(--ink); cursor:pointer; transition:.12s; }
.qs-calday.wk{ color:#8b7fb0; background:rgba(124,58,237,.03); }
.qs-calday.today{ border-color:#c7b8ec; }
.qs-calday:hover:not(:disabled){ border-color:var(--brand); background:rgba(124,58,237,.1); }
.qs-calday.on{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(124,58,237,.35); }
.qs-calday:disabled{ opacity:.28; cursor:default; }
/* "included" finish tiles: selected look, not a control */
.vinfo{ cursor:default; }
.vinfo .bx{ color:#16a34a; font-weight:800; }
.qs-calday{ aspect-ratio:auto; height:36px; }   /* seven columns at drawer width: squares were oversized */

/* ── Quote sheet round 4: a title band like the site's hero art, two-up option
   grid with a glyph per section ── */
.qs-head{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:30px 28px 26px; background:linear-gradient(160deg,#1a0f33 0%,#3b1f73 46%,#b53d8e 100%); color:#fff; border-bottom:0; }
.qs-hglow{ position:absolute; right:-70px; top:-90px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#ffd36b 0%,#f59e0b 35%,rgba(236,72,153,0) 70%); opacity:.85; pointer-events:none; }
.qs-head .qs-he{ position:relative; font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.qs-head .qs-hn{ position:relative; font-family:'Montserrat',sans-serif; font-size:clamp(1.35rem,2.2vw,1.7rem); font-weight:900; line-height:1.1; color:#fff; max-width:22ch; }
.qs-head .qs-hn em{ font-style:normal; color:#ffd36b; }
.qs-head .qs-hs{ position:relative; font-size:.72rem; font-weight:600; color:rgba(255,255,255,.82); line-height:1.45; max-width:48ch; margin-top:4px; }
.qs-x{ position:absolute; top:16px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; z-index:2; transition:.15s; }
.qs-x:hover{ background:rgba(255,255,255,.25); }
.qs-body .dk{ display:flex; align-items:center; gap:7px; }
.qs-gl{ width:15px; height:15px; color:var(--brand); flex:none; }
.qs-two{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
.qs-two .drow.half{ min-width:0; }
.qs-two .drow.half:nth-last-child(1):nth-child(odd){ grid-column:1/-1; }
.qs-two .drow.half:nth-child(odd):nth-last-child(2), .qs-two .drow.half:nth-child(even):nth-last-child(1){ border-bottom:0; }
.qs-sel{ text-overflow:ellipsis; }
.qs-note{ margin-top:8px; }
@media (max-width:520px){ .qs-two{ grid-template-columns:1fr; } }
/* ── Two-file artwork layout. Guided: cards side by side, ONE approve column to
   the right behind a dashed divider. Everything (narrow rail): cards stacked,
   approve row below. ── */
.band .dz.two{ display:flex; align-items:stretch; gap:12px; max-width:none; width:min(100%, 980px); }
.band .dz.two .dzslot{ flex:1 1 0; min-width:0; }
.band .dz.two .dz-approve{ flex:0 0 200px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:14px 12px; border-left:2px dashed #d8cef0; margin-left:2px; }
#coUpload.two{ display:flex; flex-direction:column; gap:10px; }
#coUpload.two .dzslot{ width:100%; }
#coUpload.two .dz-approve{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:14px 12px 6px; border-top:2px dashed #d8cef0; }
.dz-approve .fck-bigchk{ width:44px; height:44px; }
.dz-approve .dza-h{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:.92rem; color:var(--ink); }
.dz-approve .dza-s{ font-size:.64rem; font-weight:600; color:var(--sub); max-width:24ch; line-height:1.4; }
.dz-approve.wait .fck-bigchk{ opacity:.35; }
.dz-approve .fck-btn{ margin-top:4px; }
/* streamlined two-file cards: the guided front card drops the big left check column */
.band .dz.two .fck-pass .fck-pcheck, .band .dz.two .fck-pass .fck-pvd{ display:none; }
.band .dz.two .fck-pass .fck-pbody{ padding:13px 15px; }
.band .dz.two .fck-fline{ font-size:.64rem; }
.band .dz.two .fck-filedim{ margin:6px 0 9px; white-space:normal; }
.band .dz.two .fck-cells4{ grid-template-columns:repeat(4,1fr); }
.band .dz.two .fck .fck-tools{ padding:9px 12px; gap:8px; }
.fck-back .fck-hdrow{ padding:13px 15px 0; }
.fck-back .fck-fline{ padding:0 15px; }
.fck-back .fck-cells4{ margin:9px 15px 6px; }
#coUpload.two .fck-dc .fck-lc{ width:70px; }
/* ── artwork fit tools under the stage ── */
.artctrls{ display:inline-flex; align-items:center; gap:9px; margin:10px auto 0; padding:4px 6px 4px 12px; background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(60,30,130,.12); border-radius:14px; position:relative; z-index:7; }
.artctrls[hidden]{ display:none; }
.artctrls .ac-l{ font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8b6fd0; }
.artctrls .cpill{ font-size:.66rem; padding:7px 11px; }
.artctrls .ac-scale{ display:inline-flex; align-items:center; gap:8px; font-size:.62rem; font-weight:800; color:var(--bdark); }
.artctrls .ac-sl{ font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:#8b6fd0; }
.artctrls input[type=range]{ width:110px; accent-color:#7c3aed; }
.artctrls .ac-reset{ width:28px; height:28px; border-radius:9px; border:1.4px solid #e6dff2; background:#fff; color:var(--brand); font-weight:800; cursor:pointer; }
.heroWrap .artctrls{ position:absolute; left:50%; transform:translateX(-50%); bottom:-42px; margin:0; }
.heroWrap.sided .artctrls{ bottom:-84px; }
/* ── Quote header: the page's own typography, flush to the top ── */
.qsheet{ border-top:0; border-image:none; }
.qs-head{ position:sticky; top:0; z-index:3; display:block; padding:18px 24px 14px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); color:var(--ink); border-bottom:1px solid #eee6f8; box-shadow:0 8px 24px rgba(60,30,130,.06); }
.qs-hrow{ display:flex; align-items:flex-start; gap:12px; }
.qs-ht{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.qs-head .qs-he{ font-size:.56rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#8b6fd0; }
.qs-head .qs-hn{ font-family:'Montserrat',sans-serif; font-size:1.3rem; font-weight:900; line-height:1.1; color:var(--ink); letter-spacing:-.01em; max-width:none; }
.qs-head .qs-hn em{ font-style:normal; background:linear-gradient(90deg,#7c3aed,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.qs-head .qs-hs{ display:block; margin-top:8px; font-size:.7rem; font-weight:600; color:var(--muted); line-height:1.45; max-width:none; }
.qs-head .qdrawer-x{ flex:none; }
.qs-hglow, .qs-x{ display:none; }
/* guided two-file dz: .dz-guided sets flex-direction:column — the row must win */
.band .dz.two{ flex-direction:row; flex-wrap:nowrap; text-align:left; }
.band .dz.two .dzslot{ align-self:stretch; }
/* art tools sit on the stage foot, beside the Both/One module, never on the band title */
.heroWrap .artctrls{ bottom:8px; left:auto; right:24px; transform:none; }
.heroWrap.sided .artctrls{ bottom:8px; }
.heroWrap:not(.sided) .artctrls{ left:50%; right:auto; transform:translateX(-50%); }

/* ── one stage bar: Both/One + Flip and the artwork tools, centred, both views ── */
.stagebar{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:7; display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 40px); }
.stagebar .hctrls, .stagebar .artctrls, .heroWrap .stagebar .artctrls, .heroWrap.sided .stagebar .artctrls, .heroWrap:not(.sided) .stagebar .artctrls{ position:static; left:auto; right:auto; bottom:auto; transform:none; margin:0; }
.stagebar .artctrls{ padding-left:10px; }
/* honest proof status */
.pfbar .pf-status{ font-size:.64rem; font-weight:800; color:var(--sub); }
.pfbar .pf-status.ok{ color:#047857; } .pfbar .pf-status.warn{ color:#b45309; }
/* bleed is the rectangle the file is built to; the die (trim) is what rounds */
.sgp .gp-bleed{ border-radius:0; }

/* proof view: the bleed crop of the file runs past the trim to the bleed line */
.artbleed{ position:absolute; display:none; background-size:100% 100%; background-repeat:no-repeat; background-position:center; z-index:0; pointer-events:none; }
.poster.proof .artbleed{ display:block; }
.poster.proof.hasbleed{ background-image:none !important; }   /* the bleed layer carries the art while proof lines are on */

/* the five checks: icon + label/value in every cell (lucide circle-check-big / triangle-alert / dashed circle) */
.fck-cell{ display:flex; align-items:center; gap:7px; }
.fck-cell .fck-ic{ width:16px; height:16px; flex:none; display:inline-flex; }
.fck-cell .fck-ic svg{ width:16px; height:16px; }
.fck-cell.ok .fck-ic{ color:#16a34a; } .fck-cell.bad .fck-ic{ color:#d97706; } .fck-cell.na .fck-ic{ color:#a596c9; }
.fck-cell .fck-ct{ display:flex; flex-direction:column; min-width:0; }
.fck-cells4{ grid-template-columns:repeat(5,1fr); }
.screen.bk .fck-cells4{ grid-template-columns:repeat(6,1fr); }   /* booklets add the page-count cell */
.band .dz.two .fck-cells4, #coUpload .fck-cells4, .qe-art-card .fck-cells4{ grid-template-columns:repeat(2,1fr); }
.fck-chip svg, .ck-ic svg{ width:13px; height:13px; vertical-align:-2px; }
.fck-chip{ display:inline-flex; align-items:center; gap:5px; }
.ck-ic{ display:inline-flex; width:16px; height:16px; }

/* ═══ A4 · quote header: the trim-line ghost card on the account-banner gradient ═══ */
.qs-head{ --h:265; --hd:var(--h); --sd:74%; --lm:40%; --ld:27%; --hg:calc(var(--h) + 26); position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; gap:5px; min-height:150px; padding:26px 24px 22px; color:#fff; border-bottom:0; box-shadow:none; backdrop-filter:none;
  background: radial-gradient(112% 78% at 18% 2%, hsl(var(--h) 96% 74% / .72), transparent 56%), radial-gradient(96% 88% at 96% 102%, hsl(var(--hg) 92% 62% / .58), transparent 54%), linear-gradient(157deg, hsl(var(--h) 78% 56%) 0%, hsl(calc((var(--h) + var(--hd)) / 2) 76% var(--lm)) 46%, hsl(var(--hd) var(--sd) var(--ld)) 100%); }
.qs-head::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, hsl(var(--hd) 72% calc(var(--ld) - 5%) / .6) 0%, hsl(var(--hd) 70% calc(var(--ld) - 1%) / .22) 48%, transparent 100%); }
.qs-head .qs-he{ font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.qs-head .qs-hn{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.5rem; line-height:1.08; letter-spacing:-.01em; color:#fff; max-width:18ch; }
.qs-head .qs-hs{ font-size:.74rem; color:rgba(255,255,255,.85); font-weight:600; margin-top:4px; max-width:46ch; }
.qs-wm{ position:absolute; right:-36px; top:-16px; width:230px; height:130px; border:7px solid rgba(255,255,255,.13); border-radius:12px; transform:rotate(-8deg); pointer-events:none; }
.qs-wm i{ position:absolute; inset:11px; border:2px dashed rgba(255,255,255,.14); border-radius:5px; }
.qs-x{ display:flex; position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; align-items:center; justify-content:center; font-size:1.1rem; line-height:1; cursor:pointer; z-index:2; transition:.15s; }
.qs-x:hover{ background:rgba(255,255,255,.25); }
.qs-hglow, .qs-hrow, .qs-head .qdrawer-x{ display:none; }

/* ═══ B1 / C3 · the file card ═══ */
.fk2{ display:block; }
.fk2-body{ padding:12px 13px 10px; display:flex; flex-direction:column; gap:9px; }
.fk2-row{ display:flex; align-items:center; gap:11px; }
.fk-thumb{ width:84px; height:48px; flex:none; border-radius:5px; background:linear-gradient(135deg,#1a0f33,#3b1f73 60%,#b53d8e) center/cover no-repeat; box-shadow:0 4px 12px rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.06); }
.fk-thumb.back.fk-thumb-empty{ background:linear-gradient(150deg,#f4f0fb,#e6ddf6); border-color:#d9cdf1; }
.fk2-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fk2-h{ display:flex; align-items:center; gap:7px; min-width:0; }
.fk2-h .fck-fn{ flex:1; min-width:0; font-size:.72rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:none; }
.fk2-h .fck-chip{ margin-left:auto; flex:none; }
.fk-face{ font-size:.5rem; font-weight:900; letter-spacing:.14em; color:#7c3aed; background:rgba(124,58,237,.1); border-radius:5px; padding:2px 6px; flex:none; }
.fk2-sub{ font-size:.62rem; font-weight:600; color:var(--sub); }
.fk2-cells{ grid-template-columns:repeat(3,1fr) !important; }
.fk2 .fck-cell{ padding:6px 8px; border-radius:8px; }
.fk2 .fck-cell.ok{ background:rgba(22,163,74,.08); } .fk2 .fck-cell.bad{ background:rgba(217,119,6,.12); } .fk2 .fck-cell.na{ background:rgba(124,58,237,.07); }
.fk2 .fck-cell .cl{ font-size:.48rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); font-weight:800; }
.fk2 .fck-cell .cv{ font-size:.66rem; font-weight:800; }
.fk2 .fck-cell.ok .cv{ color:#0f7a3a; } .fk2 .fck-cell.bad .cv{ color:#9a5b00; } .fk2 .fck-cell.na .cv{ color:var(--bdark); }
.fk2 .fck-tools{ gap:8px; }
.fk2-note{ font-size:.62rem; font-weight:600; color:var(--sub); margin-right:auto; }
.fk2 .fck-filedim{ margin:0; white-space:normal; }

/* layout: Guided = cards side by side + approve column; Everything = stacked + approve card.
   .hasart makes single-sided lay out exactly like double-sided. */
.dz:not(.two):not(.hasart) > .dzslot{ display:contents; }
.band .dz.hasart{ display:flex; flex-direction:row; align-items:stretch; gap:12px; max-width:none; width:min(100%, 980px); padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; text-align:left; }
.band .dz.hasart .dzslot{ flex:1 1 0; min-width:0; align-self:stretch; display:block; border:1px solid #ece6f7; border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(60,30,130,.13); overflow:hidden; }
.band .dz.hasart .dzslot:not(.filled){ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:clamp(18px,3vh,30px) 16px 18px; border:2px dashed rgba(124,58,237,.42); background:rgba(255,255,255,.55); box-shadow:0 12px 32px rgba(60,30,130,.1); cursor:pointer; }
.band .dz.hasart .dz-approve{ flex:0 0 200px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:14px 12px; border-left:2px dashed #d8cef0; }
.band .dz.hasart .dz-approve .dza-t{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.band .dz.hasart .dz-approve .dza-a{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:4px; }
#coUpload.hasart{ display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
#coUpload.hasart .dzslot{ width:100%; display:block; border:1px solid #ece6f7; border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(60,30,130,.13); overflow:hidden; }
#coUpload.hasart .dzslot:not(.filled){ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:18px 16px; border:2px dashed rgba(124,58,237,.42); background:rgba(255,255,255,.55); cursor:pointer; }
#coUpload.hasart .dz-approve{ display:flex; flex-direction:row; align-items:center; text-align:left; gap:12px; padding:12px 14px; border:1px solid #ece6f7; border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(60,30,130,.13); border-top:1px solid #ece6f7; }
#coUpload.hasart .dz-approve .dza-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#coUpload.hasart .dz-approve .dza-s{ max-width:none; }
#coUpload.hasart .dz-approve .dza-a{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.dz-approve .fck-bigchk{ width:44px; height:44px; flex:none; }
.dz-approve .fck-btn{ border-radius:99px; }
@media (max-width:1100px){ .band .dz.hasart{ flex-wrap:wrap; } .band .dz.hasart .dz-approve{ flex:1 1 100%; border-left:0; border-top:2px dashed #d8cef0; } }

/* finish axis swatches: what the surface looks like */
.finsw{ width:48px; height:36px; border-radius:6px; display:block; border:1px solid #d9cdf1; background:#f3eefb; box-shadow:0 2px 7px rgba(60,30,130,.2); }
.finsw-aq{ background:linear-gradient(135deg,#f7f3ff,#d8ccf3 55%,#f1ebfb); }
.finsw-matte{ background:#e6ddf6; box-shadow:none; }
.finsw-gloss_uv{ background:linear-gradient(125deg,#ffffff 0%,#cdbdf0 40%,#ffffff 62%,#b8a6e8 100%); box-shadow:0 2px 9px rgba(60,30,130,.35), inset 0 0 0 1px rgba(255,255,255,.7); }
.finsw-uncoated{ background:#f4efe6; border-color:#e2d8c8; }
.on > .gb > .finsw, .on > .gbox > .finsw{ outline:2.5px solid var(--brand); outline-offset:1px; }
.copanel .gbox > .finsw{ width:72px; height:52px; }