/* Cart, checkout, order pages and customer forms. Builds on the brand tokens in store.css. */
.co{padding-block:28px 12px}
.co h1{font-size:34px;margin:0 0 16px}
.co h2{font-size:22px;margin:0 0 12px}
.co-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
@media (max-width:900px){.co-grid{grid-template-columns:minmax(0,1fr)}}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.panel + .panel{margin-top:16px}
.panel.soft{background:var(--panel)}
.sticky{position:sticky;top:12px}
.note{padding:12px 14px;border-radius:var(--radius);margin:0 0 14px;font-size:14.5px}
.note.info{background:var(--blue-50);color:var(--navy)}
.note.ok{background:var(--ok-50);color:var(--ok)}
.note.warn{background:var(--warn-50);color:var(--warn)}
.note.bad{background:var(--bad-50);color:var(--bad)}
.note ul{margin:4px 0 0;padding-left:18px}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* cart */
.cart-line{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line img,.cart-line .noimg{width:84px;height:84px;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.cart-line .title{font-weight:600;color:var(--ink);text-decoration:none}
.cart-line .title:hover{color:var(--blue)}
.cart-line .meta{font-size:13.5px;color:var(--ink-2)}
.cart-line .right{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.qty-form{display:flex;gap:6px;align-items:center}
.qty-form input{width:64px}
/* phones: the price/quantity column moves under the title (QA Sep 2026: at 375 px the title column was
   ~90 px wide and wrapped one word per line) */
@media (max-width:560px){
  .cart-line{grid-template-columns:64px minmax(0,1fr);gap:10px 12px}
  .cart-line img,.cart-line .noimg{width:64px;height:64px}
  .cart-line .right{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left}
}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font:inherit;font-size:13.5px;text-decoration:underline}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.sum-row.total{border-top:2px solid var(--ink);margin-top:8px;padding-top:10px;font-weight:700;font-size:18px}
.sum-row.free{color:var(--ok)}
.btn.block{width:100%;justify-content:center}

/* forms */
.fields{display:grid;gap:12px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fields .full{grid-column:1/-1}
@media (max-width:560px){.fields{grid-template-columns:minmax(0,1fr)}}
/* quote form: part number | quantity side by side on every width, the part number gets the room */
.fields.pn-qty{grid-template-columns:minmax(0,1fr) 96px;margin-bottom:8px}
label.f,div.f{display:block;font-weight:600;font-size:14px}
label.f > input,label.f > select,label.f > textarea{display:block;margin-top:4px}
label.f small{font-weight:400;color:var(--ink-2)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{font:inherit;font-weight:400;padding:9px 11px;border:1px solid #b9c5d4;border-radius:var(--radius);background:#fff;color:var(--ink);width:100%}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:2px solid var(--blue-50)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 16px;margin:0 0 16px}
legend{font-family:var(--display);font-weight:700;font-size:20px;padding:0 6px}
.choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;cursor:pointer}
.choice:hover{border-color:var(--blue)}
.choice input{margin-top:4px}
.choice b{display:block}
.choice .price{margin-left:auto;font-weight:600;white-space:nowrap}
.choice.disabled{opacity:.55}
.inline-opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.inline-opts label{font-weight:400}
.sub{margin:8px 0 0 26px}
[hidden]{display:none !important}
.req{color:var(--bad)}
.promise{font-weight:600;color:var(--navy)}

/* order page */
.status-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:600;font-size:13.5px;background:var(--blue-50);color:var(--navy)}
.status-pill.cancelled,.status-pill.refunded{background:var(--bad-50);color:var(--bad)}
.status-pill.shipped,.status-pill.delivered,.status-pill.paid,.status-pill.packed{background:var(--ok-50);color:var(--ok)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:8px 0 8px 22px;position:relative;border-left:2px solid var(--line);margin-left:6px}
.timeline li::before{content:"";position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.lines-table{width:100%;border-collapse:collapse;font-size:14.5px}
.lines-table th,.lines-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.lines-table td.n,.lines-table th.n{text-align:right}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
pre.wire{white-space:pre-wrap;font-family:var(--mono);font-size:13.5px;background:var(--panel);padding:12px;border-radius:var(--radius);margin:8px 0}
.testmode{background:var(--navy);color:#fff;padding:10px 14px;border-radius:var(--radius);margin-bottom:14px;font-weight:600}