/*
 * DateCard Shop — the designer page (/design). Page-specific styles only: tokens, type, buttons, fields,
 * notices and steps come from app.css (research ux-design §2). Mobile first at 375 px: the shirt sticks
 * under the header while the steps scroll, and the buy bar is fixed at the bottom. From 900 px the
 * shirt gets its own column. Every class here starts with dz-. A color-mix() sits in @supports over a plain
 * value that stands on its own (app.css says why).
 */

/* ---- page frame ---- */
.page-design{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.page-design .site-foot{margin-top:40px}
.page-design .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
/* On :root, not .dz: the page's scroll padding below reads them too. svh, not dvh: the sticky shirt sits above the
   steps, and dvh resized it each time Safari's toolbars slid in or out, moving the steps ~33 px under the finger. */
:root{--dz-head:57px;--dz-stage:min(40vh,360px);--dz-stage-typing:min(26vh,190px)}
@supports (height:1svh){:root{--dz-stage:min(40svh,360px);--dz-stage-typing:min(26svh,190px)}}
/* Keyboard focus never lands under the buy bar or the sticky shirt (WCAG 2.4.11): Tab and Shift+Tab scroll the
   focused control into the part of the window they leave free. At the bottom, room for the bar (84 px) and a little
   air; at the top on a phone, for the header and the shirt (smaller while typing; Review and windows under 521 px
   let the shirt scroll away, so app.css's room for the header is enough). Tabbing out of a text box, the shirt
   grows back after the browser's scroll: designer.js onFocusIn() scrolls again.
   scrollIntoView() (scrollToStep(), jumpTo()) adds the target's scroll-margin to this padding: one offset, not two.
   Where the padding already clears the shirt, and where the shirt scrolls away, steps and fields keep only a little
   air; their own room for the shirt (below) is for browsers without :has(), which skip the padding too. */
:root{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (max-width:899px) and (min-height:521px){
  :root:has(.dz:not(.dz-reviewing) .dz-stage-wrap){scroll-padding-top:calc(var(--dz-head) + var(--dz-stage) + 24px)}
  :root:has(.dz-typing:not(.dz-reviewing) .dz-stage-wrap){scroll-padding-top:calc(var(--dz-head) + var(--dz-stage-typing) + 24px)}
  :root:has(.dz:not(.dz-reviewing) .dz-stage-wrap) :is(.dz-step,.dz [data-key]){scroll-margin-top:4px}
}
@media (max-width:899px) and (max-height:520px){
  .dz:not(.dz-reviewing) :is(.dz-step,[data-key]){scroll-margin-top:4px}
}

/* ---- server skeleton (replaced by designer.js) ---- */
.dz-ssr-step{margin-top:20px}
.dz-ssr-h{display:flex;align-items:center;gap:10px;font-size:19px}
.dz-ssr-products{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.dz-ssr-product,.dz-ssr-product:hover{height:100%;padding:14px;text-decoration:none}
.dz-ssr-product.is-selected{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dz-ssr-name{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;text-transform:uppercase}
.dz-ssr-loading{display:flex;align-items:center;justify-content:center;gap:10px;margin:24px 0 8px;color:var(--muted);font-size:15px}
.dz-ssr-loading .spinner{width:20px;height:20px;margin:0;border-width:2px}
.dz-ssr .notice{margin-top:12px}
@media (min-width:720px){.dz-ssr-products{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Every tap target is at least 44 px tall (app.css small buttons are 40). */
.dz .btn-sm{min-height:44px}

/* ---- intro and notices ---- */
.dz-intro{padding:16px 0 4px}
.dz-title{font-family:var(--display);font-weight:800;font-size:clamp(30px,8.4vw,46px);line-height:.95;text-transform:uppercase;letter-spacing:0}
.dz-title .accent-i{text-transform:none;letter-spacing:-.01em}
.dz-lede{margin-top:8px;color:var(--muted);max-width:52ch}
@media (max-width:559px){.dz-lede{display:none}} /* on a phone the shirt comes first */
.dz-notices{display:grid;gap:10px;margin-top:10px}
.dz-notices:empty{display:none}
.dz-notice-actions{margin-top:8px;gap:8px}

/* ---- layout ---- */
.dz-layout{margin-top:10px}
/* minmax(0,1fr): a closed step's one-line summary (nowrap) must never widen the column past the phone */
.dz-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:12px}

/* ---- the stage (sticky shirt) ---- */
.dz-stage-wrap{position:sticky;top:var(--dz-head);z-index:30;margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter);background:var(--paper)}
.dz-stage{position:relative;height:var(--dz-stage);transition:height .2s ease}
/* Smaller while typing, but only while it sticks: where it scrolls away (Review, windows under 521 px) it sits above
   the field just scrolled to, and shrinking would pull that field up under the header. */
@media (max-width:899px) and (min-height:521px){.dz-typing:not(.dz-reviewing) .dz-stage{height:var(--dz-stage-typing)}}
.dz-mock{position:absolute;inset:56px 8px 42px;display:grid;place-items:center;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dz-mock>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(32,27,24,.18));transition:transform .2s ease}
.dz-mock.is-zoomed-css>svg{transform:scale(1.8);transform-origin:50% 38%}
.dz-mock.dz-flip>svg{animation:dz-flip .32s cubic-bezier(.2,.8,.2,1)}
@keyframes dz-flip{from{transform:perspective(1200px) rotateY(-60deg);opacity:.35}to{transform:none;opacity:1}}
.dz-stage-wait{display:grid;justify-items:center;gap:10px;padding:16px;text-align:center;font-size:14px;color:var(--muted)}
.dz-stage-wait .spinner{margin:0}
.dz-stage-fail p{max-width:32ch;color:var(--ink)}
.dz-stage-top{position:absolute;top:8px;left:8px;right:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.dz-stage-top>*{pointer-events:auto}
.dz-side{width:172px;padding:3px;background:var(--blush)}
@supports (color:color-mix(in srgb,red 50%,blue)){.dz-side{background:color-mix(in srgb,var(--card) 70%,var(--blush))}}
.dz-side span{font-size:14px}
.dz-zoom{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.dz-zoom svg{width:20px;height:20px}
.dz-zoom[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dz-stage-bottom{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.dz-badge{transform:rotate(-3deg);font-size:13px;white-space:nowrap}
.dz-badge.is-small{background:var(--danger);color:#fff}
.dz-colorchip{padding:4px 10px;border-radius:var(--r-pill);background:var(--card);font-size:12.5px;font-weight:600;white-space:nowrap}
@supports (color:color-mix(in srgb,red 50%,blue)){.dz-colorchip{background:color-mix(in srgb,var(--card) 82%,transparent)}}
.dz-colorchip:empty{display:none}
/* max-content: from left:50% a shrink-to-fit box would get only half the stage, and wrap a sentence to five lines */
.dz-stage-msg{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:6px 12px;border-radius:var(--r-pill);background:var(--card);box-shadow:0 2px 10px -4px rgba(32,27,24,.35);font-size:13.5px;line-height:1.35;text-align:center}
.dz-stage-msg:empty{display:none}
.dz-stage-err{color:var(--danger);font-weight:600}
.dz-link{min-height:0;margin:-8px -4px;padding:8px 4px;border:0;background:none;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Under 521 px tall (a phone on its side, a laptop at 200–400% zoom) the shirt scrolls away with the page, so it can
   take room a sticky one can't: never under 260 px, which leaves 162 px of shirt between the control rows. */
@media (max-height:520px) and (max-width:899px){:root{--dz-stage:max(260px,60vh)}.dz-stage-wrap{position:static}}
/* Review shows both sides itself: on a phone the big shirt scrolls away instead of covering half of it.
   .dz.dz-reviewing: as specific as the rules below need, or `.dz [data-key]` (later) wins for fields. */
@media (max-width:899px){
  .dz-reviewing .dz-stage-wrap{position:static}
  .dz.dz-reviewing :is(.dz-step,[data-key]){scroll-margin-top:calc(var(--dz-head) + 12px)}
}

/* ---- steps (accordion) ---- */
.dz-step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);scroll-margin-top:calc(var(--dz-head) + var(--dz-stage) + 28px)}
.dz-typing .dz-step{scroll-margin-top:calc(var(--dz-head) + var(--dz-stage-typing) + 28px)}
.dz-step.is-open{border-color:var(--muted)}
.dz-step.has-error{border-color:var(--danger)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .dz-step.is-open{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}
  .dz-step.has-error{border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}}
.dz-step-h{margin:0;font-size:inherit;font-weight:inherit}
.dz-step-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 14px;border:0;border-radius:var(--r-lg);background:none;color:var(--ink);text-align:left}
.dz-step-btn::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.dz-step.is-open .dz-step-btn::after{transform:rotate(-135deg) translateY(-2px)}
.dz-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blush);font-family:var(--display);font-weight:800;font-size:17px;line-height:1}
.dz-step.is-open .dz-num{background:var(--ink);color:var(--paper)}
.dz-step-text{display:flex;flex-direction:column;flex:1;min-width:0}
.dz-step-title{font-weight:600;font-size:17px;line-height:1.3}
.dz-step-sum{overflow:hidden;font-size:13.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.dz-step.is-open .dz-step-sum{display:none}
.dz-step-flag{flex:none;width:10px;height:10px;border-radius:50%;background:var(--danger)}
.dz-step-body{padding:2px 14px 16px}
.dz-help{font-size:14.5px;color:var(--muted)}
.dz-next{margin-top:18px}
.dz-shake{animation:dz-shake .3s ease}
@keyframes dz-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.dz [data-key]{scroll-margin-top:calc(var(--dz-head) + var(--dz-stage) + 28px)}
.dz-typing [data-key]{scroll-margin-top:calc(var(--dz-head) + var(--dz-stage-typing) + 28px)}

/* ---- groups, labels, pickable cards ---- */
.dz-group{min-width:0;margin:16px 0 0;padding:0;border:0}
.dz-label{display:block;margin-bottom:8px;padding:0;font-size:14px;font-weight:600}
.dz-label-note{font-weight:500;color:var(--muted)}
.dz-pick{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* The hidden radio or checkbox covers its card (still clipped away), so focus scrolling brings in the whole card,
   clear of the buy bar and the shirt, not just the pixel at its corner. */
.dz-pick>input.vh{top:0;left:0;width:100%;height:100%}
.dz-card{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);transition:border-color .15s ease,box-shadow .15s ease}
.dz-pick:hover .dz-card{border-color:var(--muted)}
@supports (color:color-mix(in srgb,red 50%,blue)){.dz-pick:hover .dz-card{border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}}
.dz-pick input:checked+.dz-card{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dz-pick input:focus-visible+.dz-card,.dz-pick input:focus-visible+.dz-swatch-dot,.dz-pick input:focus-visible+.dz-size-pill{outline:2px solid var(--accent);outline-offset:3px}

/* fit */
.dz-filter{margin-top:6px}
.dz-filter span{padding-inline:4px;font-size:14px;white-space:nowrap}
.dz-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dz-sil{display:block;height:52px;margin-bottom:6px}
.dz-sil:empty{display:none}
.dz-sil svg{width:auto;height:100%;fill:var(--blush);stroke:var(--ink);stroke-width:26;stroke-linejoin:round}
.dz-prod-name{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;text-transform:uppercase}
.dz-prod-line{font-size:13.5px;line-height:1.35;color:var(--muted)}
.dz-prod-price{margin-top:auto;padding-top:6px;font-family:var(--display);font-weight:700;font-size:18px}
.dz-fitinfo{margin-top:14px;padding:12px 14px;border-radius:var(--r-md);background:var(--paper)}
.dz-fitinfo p+p{margin-top:4px}
.dz-fit-head{font-size:15px}
.dz-fine{margin-top:8px!important;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* colour */
.dz-swatches{display:flex;flex-wrap:wrap;gap:4px}
.dz-swatch{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.dz-swatch-dot{display:block;width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.dz-swatch-dot[data-light]{box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 2px rgba(0,0,0,.06)}
.dz-swatch input:checked+.dz-swatch-dot{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
/* A colour with no size Printful can make right now: crossed out (ink with a paper edge reads on every swatch). */
.dz-swatch[data-out]::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:2.5px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 1.5px var(--paper);transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none}
.dz-swatch-name{margin-top:6px;font-size:14px;color:var(--muted)}

/* size */
.dz-sizes{display:flex;flex-wrap:wrap;gap:8px}
.dz-size-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;min-height:46px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-family:var(--display);font-weight:700;font-size:18px;line-height:1}
.dz-size-pill small{margin-top:2px;font-family:var(--sans);font-weight:600;font-size:11px;color:var(--muted)}
.dz-size input:checked+.dz-size-pill{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dz-size input:checked+.dz-size-pill small{color:inherit;opacity:.8}
/* Sold out at Printful right now: dashed, struck through, not pickable; the picked one stays marked, in red. */
.dz-size[data-out]{cursor:not-allowed}
.dz-size[data-out] .dz-size-pill{border-style:dashed;background:none;color:var(--muted)}
.dz-size[data-out] .dz-size-pill>span{text-decoration:line-through;text-decoration-thickness:1.5px}
.dz-size[data-out] .dz-size-pill small,.dz-size[data-out] input:checked+.dz-size-pill small{color:var(--danger);opacity:1}
.dz-size[data-out] input:checked+.dz-size-pill{background:var(--card);border-color:var(--danger);color:var(--ink);box-shadow:0 0 0 1px var(--danger)}
.dz-sizeguide{margin-top:12px}
.dz-sizeguide summary{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;cursor:pointer;list-style:none}
.dz-sizeguide summary::-webkit-details-marker{display:none}
.dz-sizeguide summary::after{content:"+";margin-left:6px}
.dz-sizeguide[open] summary::after{content:"–"}
.dz-sizeguide .table-wrap{margin-top:4px}
.dz-sizeguide p{margin-top:6px}

/* templates */
.dz-tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dz-tpl-card{gap:6px;padding:6px}
.dz-thumb{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:var(--r-xs);background:var(--stage)}
.dz-thumb-none{display:grid;place-items:center;border:1.5px dashed var(--line);background:none;font-size:13px;color:var(--muted)}
.dz-tpl-name{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.dz-tpl-warn{font-size:11.5px;font-weight:600;line-height:1.25;color:var(--danger)}
.dz-tpl-blurb{margin-top:8px;color:var(--muted)}
.dz-shoplink{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.dz-shoplink>.dz-group{margin-top:0}
.dz-shoplink .seg{max-width:380px}
.dz-shoplink .hint{margin-top:8px}

/* words */
.dz-field label .dz-where,.dz-field .label .dz-where{margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dz-field .label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.dz-field textarea{min-height:76px}
.dz-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dz-suggest{margin-top:8px}
.dz-suggest .chip{min-height:44px;padding:8px 14px;font-size:14px;cursor:pointer}
.dz-prefix{position:relative}
.dz-prefix>span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.dz-prefix input{padding-left:30px!important}
.dz-note:not([hidden]){color:var(--warn)}

/* contact */
.dz-modes{display:grid;gap:8px}
.dz-mode-card{padding:12px 14px}
.dz-mode-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600}
.dz-rec{padding:3px 8px;font-size:12px}
.dz-mode-note{font-size:14px;color:var(--muted)}
.dz-mode-panel{margin-top:14px}
.dz-mode-panel>.notice{margin-top:4px}
.dz-qrsizes{list-style:none;display:grid;gap:4px;padding:10px 12px;border-radius:var(--r-md);background:var(--paper)}
.dz-qr-small{color:var(--danger)}
/* The whole row is the tap target, never under 44 px (a one-line row is 23 px): 11 px of padding above and
   below, the row's margin trimmed to match so the first line sits where it did, and its own block so the
   margins can't collapse into a neighbour's tap area. */
.dz-checkrow{display:flow-root;margin-top:5px}
.dz-checkrow .check{margin:0;padding-block:11px}
.dz-checkrow .err{margin-top:-5px}
.dz-verify{margin-top:16px;padding:14px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--paper)}
.dz-verify:empty{display:none}
.dz-verify .field{margin-top:0}
.dz-verify .hint{margin-top:8px}
.dz-send{width:100%}
.dz-resend{margin-top:6px}
.dz-verified{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--success)}
.dz-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--success);color:var(--card);font-size:14px;line-height:1}
@media (min-width:560px){.dz-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* scan page: how people reach the wearer leads the step (tick-on cards), then the handles, then "about you" */
.dz-ways>legend{margin-bottom:10px}
.dz-way+.dz-way,.dz-way-panel+.dz-way{margin-top:8px}
.dz-way-card{flex-direction:row;align-items:flex-start;gap:12px;padding:12px 14px}
.dz-way-box{flex:none;position:relative;width:22px;height:22px;margin-top:1px;border:1.5px solid var(--muted);border-radius:6px;background:var(--card)}
.dz-way input:checked+.dz-way-card .dz-way-box{border-color:var(--accent);background:var(--accent)}
.dz-way input:checked+.dz-way-card .dz-way-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--on-accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dz-way-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dz-way-title{font-weight:600;line-height:1.35}
.dz-way-note{font-size:14px;line-height:1.4;color:var(--muted)}
.dz-way-panel{margin:10px 0 0 10px;padding:0 0 4px 14px;border-left:2px solid var(--line)}
.dz-way-panel>.field:first-child,.dz-way-panel>.hint:first-child{margin-top:0}
.dz-byhand{color:var(--ink)}
.dz-ways-more{margin:20px 0 0}
.dz-ways-more+.field{margin-top:8px}
.dz-about{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.dz-about>.dz-label+.field{margin-top:8px}
.dz-dc.is-ok{color:var(--success);font-weight:600}

/* review */
.dz-rv-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.dz-rv-side{margin:0}
.dz-rv-mock{display:grid;place-items:center;aspect-ratio:14/13;padding:6px}
.dz-rv-mock svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(32,27,24,.16))}
.dz-rv-side figcaption{margin-top:6px;line-height:1.35}
.dz-rv-side figcaption span{display:block;color:var(--muted)}
.dz-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin-top:16px;font-size:15px}
.dz-rows dt{color:var(--muted)}
.dz-rows dd{margin:0;font-weight:500}
.dz-warn-text{color:var(--warn)}
.dz-qty select{max-width:120px}
.dz-totals{margin-top:16px;padding:12px 14px;border-radius:var(--r-md);background:var(--paper)}
.dz-totals .totals{margin-top:0}
.dz-totals>p{margin-top:8px}
.dz-discount{color:var(--success)}
.dz-ok{color:var(--success)!important;font-weight:600}
.dz-bad{color:var(--danger)!important;font-weight:600}
.dz-notes{display:grid;gap:6px;margin-top:14px;padding-left:18px;color:var(--muted)}
.dz-progress{margin-top:20px}
.dz-progress li.failed::before{background:var(--danger);border-color:var(--danger)}
.dz-progress .step-sub{font-variant-numeric:tabular-nums}
.dz-co-error{margin-top:16px}
.dz-co-error .btn{margin-top:10px}
.dz-share{margin-top:14px;justify-content:space-between}

/* ---- the buy bar ---- */
.dz-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 0 calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--float)}
@supports (color:color-mix(in srgb,red 50%,blue)){.dz-bar{background:color-mix(in srgb,var(--paper) 94%,transparent)}}
.dz-bar-in{display:flex;align-items:center;gap:12px}
.dz-bar-price{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.dz-amt{font-size:24px;font-variant-numeric:tabular-nums}
.dz-bar-sub{overflow:hidden;margin-top:3px;font-size:12.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.dz-buy{flex:0 0 58%;max-width:380px;min-height:52px;padding-inline:12px;font-size:16px;line-height:1.15}
/* A problem to fix first: the button still goes to it, so it stays at full contrast, outlined instead of filled. */
.dz-buy.is-dim{background:var(--card);color:var(--ink);border-color:var(--ink);box-shadow:none}
.dz-buy.is-dim:hover{background:var(--blush)}
.dz-buy.is-busy{cursor:progress}
@media (max-width:399px){.dz-eta{display:none}}

/* ---- wide screens: the shirt gets its own column ---- */
@media (min-width:900px){
  :root{--dz-stage:max(360px,min(calc(100vh - 250px),700px));scroll-padding-top:calc(var(--dz-head) + 16px)}
  @supports (height:1svh){:root{--dz-stage:max(360px,min(calc(100svh - 250px),700px))}}
  .dz-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:32px;align-items:start}
  .dz-stage-wrap{top:calc(var(--dz-head) + 16px);margin:12px 0 0;padding:0;background:none}
  .dz-step,.dz [data-key],.dz-typing .dz-step,.dz-typing [data-key]{scroll-margin-top:calc(var(--dz-head) + 16px)}
  .dz-mock{inset:64px 24px 52px}
  .dz-rv-sides{gap:14px}
}

/* ---- very short windows (a laptop at 400% zoom is 320×200): the header and the buy bar scroll with the page
   instead of leaving the form a sliver between them (WCAG 1.4.10). Landscape phones are taller and keep the bar. ---- */
@media (max-height:300px){
  .page-design .site-head,.dz-bar{position:static}
  .page-design{padding-bottom:0}
  .page-design .toast{bottom:calc(20px + env(safe-area-inset-bottom))}
  :root{scroll-padding:0}
}