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