/* ===================================================================
   Midwest Technologies — designer.css
   Label designer + checkout. Extends site.css (light theme, green).
   =================================================================== */

.designer-band{max-width:var(--maxw);margin-inline:auto;padding-block:2.2rem 4rem}
.designer-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.4rem;align-items:start}
@media (max-width:1020px){.designer-grid{grid-template-columns:1fr}}

/* ---------- Preview panel ---------- */
.preview-panel{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1rem}
@media (max-width:1020px){.preview-panel{position:static}}
.preview-stage{position:relative;border-radius:var(--r);border:1px solid var(--line);
  background:
    linear-gradient(rgba(8,30,18,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,30,18,.035) 1px,transparent 1px),
    #fbfdfb;
  background-size:24px 24px,24px 24px,auto;
  min-height:340px;display:grid;place-items:center;padding:2.6rem 2rem;overflow:hidden}
.preview-stage svg{max-width:100%;height:auto;filter:drop-shadow(0 14px 28px rgba(8,30,18,.18))}
.preview-scale{position:static;margin-left:auto;font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  font-family:var(--f-disp);background:#fff;border:1px solid var(--line);border-radius:100px;padding:.3rem .7rem;white-space:nowrap}
.preview-flip{position:absolute;top:.9rem;right:1rem}

/* ---------- Price card ---------- */
.price-card{border-radius:var(--r);border:1px solid var(--line);background:var(--card);padding:1.3rem 1.4rem;
  box-shadow:0 14px 40px rgba(8,30,18,.05)}
.price-card h3{font-size:1.02rem;margin-bottom:.7rem;display:flex;justify-content:space-between;align-items:baseline}
.price-lines{display:grid;gap:.34rem;font-size:.92rem;color:var(--muted)}
.price-lines li{display:flex;justify-content:space-between;gap:1rem}
.price-lines li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)}
.price-lines li.discount span:last-child{color:var(--green-deep)}
.price-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid var(--line-2);font-family:var(--f-disp)}
.price-total b{font-size:1.65rem;letter-spacing:-.02em}
.price-total small{color:var(--muted);font-family:var(--f-body)}
.price-note{font-size:.8rem;color:var(--muted);margin-top:.6rem}

/* ---------- Controls ---------- */
.ctrl-stack{display:grid;gap:1rem}
.ctrl-group{border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:1.15rem 1.25rem}
.ctrl-group>h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
  font-weight:600;font-family:var(--f-body);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.ctrl-group>h3 .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--grad-btn);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:0}

.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font-family:var(--f-disp);font-size:.86rem;font-weight:500;padding:.5rem .85rem;border-radius:100px;
  border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink);
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.chip:hover{border-color:var(--green)}
.chip[aria-pressed="true"]{background:var(--grad-btn);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(4,106,38,.3)}

.dim-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.9rem;align-items:end}
.dim-field{display:flex;flex-direction:column;gap:.3rem}
.dim-field label{font-size:.78rem;font-weight:600;color:var(--muted)}
.stepper{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#fff}
.stepper button{width:38px;border:0;background:var(--card);cursor:pointer;font-size:1.1rem;color:var(--green-deep);
  font-weight:700;transition:background .2s}
.stepper button:hover{background:#e8f3e8}
.stepper input{width:74px;border:0;text-align:center;font:inherit;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink);padding:.55rem .2rem;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;background:#f4faf4}
.dim-unit{font-size:.8rem;color:var(--muted);align-self:center;font-weight:600}

/* material swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.55rem}
.swatch{position:relative;border-radius:12px;border:2px solid var(--line);cursor:pointer;overflow:hidden;
  padding:0;background:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,128,0,.15)}
.swatch .sw-face{height:44px;display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:.78rem;letter-spacing:.04em}
.swatch .sw-name{display:block;font-size:.68rem;padding:.32rem .3rem;background:#fff;color:var(--muted);font-weight:600;text-align:center;line-height:1.25}

/* text lines: the typed text is what people check before ordering, so the
   field gets a full-width row of its own and the controls sit underneath */
.tline{display:grid;grid-template-columns:auto auto auto auto 1fr;gap:.5rem;align-items:center;
  padding:.7rem .75rem;margin-bottom:.7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.tline input[type="text"]{grid-column:1 / -1;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  padding:.8rem .85rem;font:inherit;font-size:1.06rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);min-width:0;width:100%;background:#fff}
.tline input[type="text"]::placeholder{font-weight:400;color:var(--muted);opacity:.75}
.tline input[type="text"]:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,128,0,.16)}
.tline select{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.5rem .4rem;font:inherit;
  font-size:.85rem;background:#fff;cursor:pointer;min-width:0}
.tline .tl-b,.tline .tl-u{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:#fff;cursor:pointer;
  font-weight:800;font-family:var(--f-disp);color:var(--muted);transition:all .2s}
.tline .tl-u{text-decoration:underline}
.tline .tl-b[aria-pressed="true"],.tline .tl-u[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tline .tl-x{justify-self:end;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;cursor:pointer;color:var(--muted);font-size:1.05rem}
.tline .tl-x:hover{color:#c2391b;border-color:rgba(194,57,27,.3);background:rgba(194,57,27,.05)}
.add-line{margin-top:.3rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-disp);font-weight:600;
  font-size:.9rem;color:var(--green-deep);background:none;border:1px dashed var(--line-2);border-radius:100px;
  padding:.55rem 1rem;cursor:pointer;transition:border-color .2s,background .2s}
.add-line:hover{border-color:var(--green);background:var(--card)}
.add-line:disabled{opacity:.45;cursor:not-allowed}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.seg button{border:0;background:#fff;padding:.55rem .9rem;font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}

[hidden]{display:none !important}

/* live fit state */
.fit-pill{position:absolute;top:.9rem;left:1rem;z-index:4;
  font-family:var(--f-disp);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.36rem .7rem;border-radius:3px;border:1px solid transparent}
.fit-pill.ok{background:#e8f7ec;color:#0b5c2a;border-color:#b5e2c2}
.fit-pill.bad{background:#fdecea;color:#a3271a;border-color:#f3c2bb}
.fit-warn{margin-top:.7rem;font-size:.9rem;line-height:1.5;color:#a3271a;
  background:#fdecea;border:1px solid #f3c2bb;border-radius:var(--r-sm);padding:.7rem .85rem}
#to-checkout.is-blocked{opacity:.55;filter:grayscale(.35)}
.opt-row{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center}
.opt-check{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;cursor:pointer;user-select:none}
.opt-check input{width:19px;height:19px;accent-color:var(--green)}
.hint{font-size:.8rem;color:var(--muted);margin-top:.55rem;line-height:1.45}

/* qty + breaks */
.qty-breaks{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.qb{font-size:.72rem;font-weight:600;padding:.3rem .6rem;border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.qb.active{background:var(--grad-soft);border-color:var(--green);color:var(--green-deep)}

.designer-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.2rem}
.designer-actions .btn{flex:1;justify-content:center;min-width:200px}
/* The actions sit in a ~620px column, so three across leaves ~200px each and
   every label wraps to two lines. The primary takes its own row and the two
   secondary actions share the next. */
.designer-actions #to-checkout{flex:1 1 100%}

/* ---------- Checkout ---------- */
.checkout-band{max-width:1180px;margin-inline:auto;padding-block:2.6rem 4.5rem}
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:start}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr}}
.order-summary{border-radius:var(--r);border:1px solid var(--line);background:var(--card);padding:1.7rem 1.8rem;position:sticky;top:5.5rem}
@media (max-width:900px){.order-summary{position:static}}
.order-summary h3{margin-bottom:.9rem}
.order-thumb{border-radius:12px;border:1px solid var(--line);background:
  linear-gradient(rgba(8,30,18,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(8,30,18,.035) 1px,transparent 1px),#fbfdfb;
  background-size:18px 18px,18px 18px,auto;
  display:grid;place-items:center;padding:1.4rem;margin-bottom:1rem}
.order-thumb img,.order-thumb svg{max-width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(8,30,18,.18))}
.spec-table{width:100%;font-size:.88rem;border-collapse:collapse}
.spec-table td{padding:.34rem 0;vertical-align:top}
.spec-table td:first-child{color:var(--muted);width:44%}
.spec-table td:last-child{font-weight:500}
.pay-sim{border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:1rem;margin-top:1rem;background:#fdfefd}
.pay-sim-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#8a6d00;background:#fff7dd;border:1px solid #f0e3ae;border-radius:100px;padding:.3rem .7rem;margin-bottom:.8rem}
.order-done{text-align:center;padding:3rem 1.5rem;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.order-done .big-tick{width:74px;height:74px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;margin:0 auto 1.2rem;box-shadow:0 14px 34px rgba(4,106,38,.35)}
.order-done .big-tick svg{width:36px;height:36px;color:#fff}
.order-ref{font-family:var(--f-disp);font-size:1.5rem;font-weight:700;letter-spacing:.02em;margin:.4rem 0 .8rem}
.order-done p{color:var(--muted);max-width:44ch;margin-inline:auto}


/* ---------- Mobile: spacious, collapsible, no clipping ---------- */
@media (max-width:1020px){
  .designer-band{padding-block:1.4rem 3.5rem}
  .designer-grid{gap:1.6rem}
  .preview-stage{padding:1.8rem .8rem;min-height:230px}
  .preview-stage svg{max-height:300px}
  .ctrl-stack{gap:1.1rem}
  .ctrl-group{padding:1.05rem 1.1rem;border-radius:16px}
  /* accordion: only the SIZE group open by default; tap a heading to expand */
  .ctrl-group>h3{margin-bottom:0;user-select:none}
  /* drawn with two bars: a text glyph never sits optically centred */
  /* 2px ring: at 1px the circle read as a faint hairline rather than a control */
  .ctrl-group>h3 .acc-toggle{margin-left:auto;position:relative;width:30px;height:30px;flex:0 0 auto;
    border-radius:50%;border:2px solid var(--green-deep);background:#fff;font-size:0;color:transparent;cursor:pointer;
    transition:transform .3s var(--ease)}
  .ctrl-group>h3 .acc-toggle::before,.ctrl-group>h3 .acc-toggle::after{content:"";position:absolute;
    top:50%;left:50%;background:var(--green-deep);border-radius:1px}
  .ctrl-group>h3 .acc-toggle::before{width:12px;height:2px;transform:translate(-50%,-50%)}
  .ctrl-group>h3 .acc-toggle::after{width:2px;height:12px;transform:translate(-50%,-50%)}
  .ctrl-group:not(.collapsed)>h3{margin-bottom:.9rem}
  .ctrl-group:not(.collapsed)>h3 .acc-toggle{transform:rotate(45deg)}
  .ctrl-group.collapsed>*:not(h3){display:none}
  .dim-row{gap:.6rem}
  .stepper input{width:64px}
  /* bigger touch targets on the line controls */
  .tline .tl-b,.tline .tl-u,.tline .tl-x{width:44px;height:44px}
  .tline select{min-height:44px}
  .stepper button{min-height:44px}
  /* chips are the main size picker, so they get a proper 44px touch target */
  .chip{padding:.6rem .95rem;min-height:44px;font-size:.9rem}
  /* min-width:0 used to squeeze all three onto one row at ~100px each, wrapping
     every label into a 3-line block. Keep a real minimum so they wrap instead. */
  .designer-actions .btn{min-width:200px}
  .price-card{padding:1.1rem 1.15rem}

  /* Legibility pass: the smallest labels were 10.9–12.8px, which is hard work
     on a phone. Nudged up so nothing in the designer reads below ~13px. */
  .ctrl-group>h3{font-size:.84rem}
  .ctrl-group>h3 .n{font-size:.76rem;width:22px;height:22px}
  .swatch .sw-name{font-size:.79rem}
  .swatch .sw-face{font-size:.84rem}
  .dim-field label{font-size:.84rem}
  .preview-scale{font-size:.78rem}
  .fit-pill{font-size:.79rem}
  .hint,.price-note,.dim-unit{font-size:.84rem}
  .stepper input,.tline input[type="text"]{font-size:1rem}

  /* Remaining sub-44px controls: the segmented pickers (font, alignment,
     corners, holes) sat at 40px and "Add line" at 36px. */
  .seg button{min-height:44px;padding:.55rem 1rem}
  .add-line{min-height:44px;padding-inline:1rem}
  /* the tick itself stays small, so the whole label is the tap target */
  .opt-check{min-height:44px}
  .opt-check input{width:22px;height:22px}
}
@media (max-width:620px){
  /* one action per row: below this the three buttons cannot sit side by side
     without the text wrapping, and the primary deserves the full width */
  .designer-actions{flex-direction:column}
  .designer-actions .btn{width:100%;min-width:0;flex:0 0 auto}
}
@media (min-width:1021px){
  .ctrl-group>h3 .acc-toggle{display:none}
}
@media (max-width:560px){
  .checkout-band{padding-block:1.4rem 3rem}
  .order-summary{padding:1.1rem 1.15rem}
  .pay-sim{padding:.85rem}
}

/* ---------- Debug pass: focus visibility, fit warning, mobile order bar ---------- */
/* the global focus ring uses outline-offset:3px which .seg/.stepper (overflow:hidden)
   clip away — give these controls a clip-safe inset ring instead */
.seg button:focus-visible,
.stepper button:focus-visible,
.stepper input:focus-visible,
.chip:focus-visible,
.swatch:focus-visible,
.tline .tl-b:focus-visible,
.tline .tl-x:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

/* "text is larger than the label" / validation notice under the preview */
.fit-warn{margin:.1rem 0 0;font-size:.85rem;font-weight:500;color:#8a5a00;background:#fff7e6;
  border:1px solid #f0d9a6;border-radius:12px;padding:.6rem .8rem;line-height:1.4}

/* mobile sticky order bar (price + CTA always reachable) */
.order-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;align-items:center;
  justify-content:space-between;gap:.8rem;padding:.65rem clamp(1rem,4vw,1.4rem);
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(8,30,18,.1)}
.order-bar-total{display:flex;flex-direction:column;line-height:1.05}
.order-bar-total small{font-size:.66rem;color:var(--muted)}
.order-bar-total b{font-family:var(--f-disp);font-size:1.25rem;letter-spacing:-.02em}
@media (max-width:1020px){
  .order-bar{display:flex}
  body.has-order-bar{padding-bottom:5rem}
}


/* ---------- Checkout: roomier form + explicit payment choice ---------- */
.order-form{padding:.2rem}
.order-form .quote-form{gap:1.15rem}
.order-form h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
  font-weight:700;font-family:var(--f-body);margin:1.4rem 0 .2rem}
.order-form h3:first-child{margin-top:0}
.contact-form-wrap{padding:clamp(1.5rem,3.2vw,2.4rem)}
/* delivery + payment read as selectable cards, not loose radios */
.opt-row[role="radiogroup"]{display:grid;gap:.7rem}
.opt-row[role="radiogroup"] .opt-check{align-items:flex-start;gap:.75rem;padding:1rem 1.1rem;
  border:1.5px solid var(--line-2);border-radius:var(--r);background:#fff;
  transition:border-color .2s,background .2s,box-shadow .2s}
.opt-row[role="radiogroup"] .opt-check:hover{border-color:var(--green)}
.opt-row[role="radiogroup"] .opt-check:has(input:checked){border-color:var(--green);background:var(--card);
  box-shadow:0 0 0 3px rgba(0,128,0,.1)}
.opt-row[role="radiogroup"] .opt-check .hint{display:block;margin-top:.2rem}
.spec-table td{padding:.5rem .4rem}
@media (max-width:900px){.checkout-grid{gap:1.4rem}}

/* ---------- Purchase order attach (checkout) ---------- */
.po-file{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.po-file-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.7rem 1rem;min-height:44px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  background:#fff;font-weight:600;font-size:.92rem;color:var(--ink);
  transition:border-color .2s,color .2s,background .2s}
.po-file-btn:hover{border-color:var(--green);color:var(--green-deep);background:var(--card)}
.po-file-btn svg{width:18px;height:18px;flex:0 0 auto}
.po-file-name{font-size:.9rem;color:var(--muted);word-break:break-all}
.po-file-name.has-file{color:var(--ink);font-weight:600}
.po-file-clear{min-height:44px;padding:0 .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:.88rem;color:var(--muted);cursor:pointer}
.po-file-clear:hover{border-color:#c2391b;color:#c2391b}
/* the hidden input still needs to catch the focus ring for keyboard users */
#of-po-file:focus-visible + .po-file-name,
.po-file-btn:focus-within{outline:2px solid var(--green);outline-offset:3px}

/* ---------- Label list (cart) ---------- */
.cart-panel{border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  padding:1.15rem 1.25rem;margin-bottom:1rem;box-shadow:0 14px 40px rgba(8,30,18,.05)}
.cart-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:.8rem}
.cart-head h3{margin-right:auto}
/* Clearing the list is destructive and rarely wanted, so it reads as a quiet
   text action up here rather than competing with Send and Download below. */
.cart-clear,.link-btn{background:none;border:0;padding:0;font:inherit;font-size:.85rem;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.cart-clear:hover,.link-btn:hover{color:#c2391b}
.cart-clear.is-armed,.link-btn.is-armed{color:#c2391b;font-weight:600;text-decoration:none}
.saved-note{margin:.6rem 0 0}
.cart-head h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
  font-weight:600;font-family:var(--f-body)}
.cart-sub{font-size:.85rem;color:var(--muted)}
.cart-list{display:grid;gap:.5rem;margin-bottom:.9rem}
.cart-item{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.8rem;
  padding:.6rem .7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.cart-item-thumb{display:block;width:64px;flex:0 0 auto;line-height:0}
.cart-item-thumb svg{width:100%;height:auto;max-height:40px}
.cart-item-main{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.cart-item-main b{font-size:.94rem;color:var(--ink);overflow-wrap:break-word}
.cart-item-main span{font-size:.82rem;color:var(--muted)}
.cart-item-price{font-variant-numeric:tabular-nums;font-weight:600;font-size:.92rem;white-space:nowrap}
.cart-item-flag{display:block;margin-top:.2rem;font-style:normal;font-size:.78rem;font-weight:600;
  color:var(--green-deep);line-height:1.35}
.cart-item.is-editing{border-color:var(--green-deep);box-shadow:0 0 0 2px rgba(4,106,38,.12)}
.cart-item-tools{display:flex;gap:.15rem}
.cart-item-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid transparent;background:none;cursor:pointer;color:var(--muted);
  font-size:1.25rem;line-height:1;transition:color .2s,border-color .2s,background .2s}
.cart-item-btn svg{width:16px;height:16px}
.cart-item-btn:hover{color:var(--green-deep);border-color:var(--line-2);background:#f4f8f5}
.cart-item-btn.is-on{color:var(--green-deep);border-color:var(--line-2);background:#f4f8f5}
.cart-item-del:hover{color:#c2391b;border-color:rgba(194,57,27,.3);background:rgba(194,57,27,.05)}
.cart-note{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;line-height:1.45}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:.8rem;border-top:1px solid var(--line-2);font-family:var(--f-disp)}
.cart-total b{font-size:1.4rem;letter-spacing:-.02em}
.cart-total small{color:var(--muted);font-family:var(--f-body);font-weight:400}
/* Two real actions only. At three across in this ~620px column every label
   wrapped to two lines, which is what made the panel look untidy. */
.cart-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin-top:1rem}
.cart-actions .btn{justify-content:center;width:100%}
@media (max-width:560px){
  /* On a phone the four-column row left the label name about 130px, narrow
     enough that "MAIN SWITCHBOARD" broke mid-word. Thumb and name take the
     first row; price and the row tools share the second. */
  .cart-item{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .cart-item-thumb{width:56px}
  .cart-item-main{grid-column:2;grid-row:1}
  .cart-item-price{grid-column:1;grid-row:2;justify-self:start;align-self:center;font-size:.9rem}
  .cart-item-tools{grid-column:2;grid-row:2;justify-self:end}
  /* the count and the clear action each get their own line rather than
     shuffling the destructive one under the heading */
  .cart-sub{order:1;flex-basis:100%}
  .cart-actions{grid-template-columns:1fr}
}
/* the sticky bar gains a second action once the list has something in it */
.order-bar #order-bar-send{padding-inline:1rem}
/* three things in a 375px bar: nothing in it may wrap */
.order-bar .btn{white-space:nowrap;padding-inline:1.1rem;flex:0 0 auto}
.order-bar-total{flex:0 1 auto;min-width:0}
@media (max-width:400px){
  .order-bar{gap:.5rem;padding-inline:.8rem}
  .order-bar .btn{font-size:.9rem;padding-inline:.9rem}
  .order-bar-total b{font-size:1.1rem}
}

/* ---------- Checkout: one block per label ---------- */
.order-item + .order-item{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.order-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.order-item-n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.order-item-sub{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem;color:var(--ink)}

/* ---------- Ten-line pass ---------- */
/* Line rows on phones: at five across, the two dropdowns were squeezed to
   ~53px and read "4 m" and "Nor". Remove moves up beside the text, leaving the
   second row to the two dropdowns plus Bold and Underline. The native arrow is
   swapped for a compact chevron, which buys the text the room it needs. */
@media (max-width:560px){
  .tline{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 44px 44px;column-gap:.3rem;
    grid-template-areas:"txt txt txt x" "size sym b u"}
  .tline input[type="text"]{grid-area:txt}
  .tline select{grid-area:size;width:100%;min-width:0;-webkit-appearance:none;appearance:none;
    padding:.5rem 1.1rem .5rem .55rem;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%235a6b60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .45rem center/9px 6px}
  .tline select.tl-sym{grid-area:sym}
  .tline .tl-b{grid-area:b}
  .tline .tl-u{grid-area:u}
  .tline .tl-x{grid-area:x}
}
/* 360px phones need a few more pixels for "2.5 mm" and the shock symbol;
   375px phones keep the full 44px buttons and 13.6px text */
@media (max-width:365px){
  .tline{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 40px 40px}
  .tline .tl-b,.tline .tl-u{width:40px}
  .tline select{font-size:.8rem}
}

/* Checkout text: one block per engraved line, details muted and kept whole */
.spec-line{display:block}
.spec-line + .spec-line{margin-top:.22rem}
.spec-meta{white-space:nowrap;color:var(--muted);font-weight:400}
/* On a phone the value column is ~165px, so ten lines of text stacked into a
   ragged 25-row column. The Text row takes the card's full width instead. */
@media (max-width:560px){
  .spec-table tr.spec-row-text td{display:block;width:auto}
  .spec-table tr.spec-row-text td:first-child{padding-bottom:0}
}