/* Africar Spares Warehouse: quote and information pages.
 *
 * Your quote (cart), quick quote, saved lists, quote sent, contact, sign in
 * and trade accounts, trading with Africar, the CMS and policy pages, and
 * the 404. Loaded on every page from base.html after site.css, whose tokens,
 * buttons, fields (.input, .select, .textarea, .fld, .form-grid), .empty,
 * .checks, .page-head and .chip it uses.
 *
 * Restyled 2026-10-09/10 in the mockup's language: flat grounds, a 3px ink
 * rule over every list, hairline rows, 2px corners, 32px red step numerals,
 * a red cell closing the quote steps, outlined secondary buttons.
 *
 * This file loads on the homepage too, so every rule is scoped to a class
 * the homepage does not use. The homepage owns .steps, .q-links, .pad and
 * .checks variants in home.css; the quote steps here are .pg-steps.
 *
 * Breakpoints: 1180 (the quote pages' aside drops under the main column, so
 * the cart's part column never gets narrow), 1024 (the contact, sign-in and
 * trading columns stack), 760 (phones, 44px targets), 480.
 */

/* ── Layout: a main column with an aside ──────────────────────────────── */
/* Cart: the parts, then (beside them) how a quote works, then the details
   form. On one column the steps sit between the parts and the form. */
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"main aside" "send aside";grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
.pg-main{grid-area:main;min-width:0}
.pg-send{grid-area:send;min-width:0;margin-top:24px}
.pg-aside{grid-area:aside;min-width:0}
/* the aside follows the scroll only where all of it fits under the header
   (it is about 600px tall on the cart); on a shorter window it stays put */
@media (min-width:1181px) and (min-height:760px){
  .pg-aside{position:sticky;top:calc(var(--head-h) + var(--search-row) + 24px)}
}
.pg-main > * + *{margin-top:24px}

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.panel-box + .panel-box{margin-top:24px}
.panel-box h2,.pg-aside h2{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.15;font-weight:800;overflow-wrap:anywhere}
.panel-box .note{margin-top:8px;color:var(--muted);font-size:var(--fs-ui);line-height:1.5}
.h-count{margin-left:6px;color:var(--muted);font-weight:600;letter-spacing:0}
.p-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px}
/* sending switched off: an ink-edged note, not an error */
.panel-box.notice{border-color:var(--line-strong);border-left:3px solid var(--ink);background:var(--white)}
.site .panel-box.notice h2{font-size:20px}
.panel-box.notice p{margin-top:10px;max-width:62ch;overflow-wrap:anywhere}
/* a failed line or a problem list: the alert edge, as the flash errors */
.panel-box.is-bad{border-left:4px solid var(--alert)}
.pg-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
.pg-foot .tlink{display:inline-flex;align-items:center;min-height:44px}
.pg-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:var(--fs-sm);color:var(--muted)}
.pg-note svg{width:14px;height:14px;flex:none;margin-top:.25em;color:var(--petrol)}
.pg-note a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}
.sent-ref{color:var(--ink);font-weight:800;white-space:nowrap}
.pg-quiet{color:var(--muted)}
.pg-quiet:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ── The aside: steps, the closing note, link rows ───────────────────── */
.pg-aside,.pg-panel{background:var(--sage-light);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pg-panel h2{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.15;font-weight:800;overflow-wrap:anywhere}
.pg-aside-in{padding:28px 28px 4px}
.pg-branch .pg-aside-in{padding-bottom:28px}
.pg-panel .pg-rows > div{border-bottom-color:var(--sage)}
.pg-aside .pg-steps{margin-top:20px}
.pg-aside .pg-steps li:last-child{border-bottom:0}
/* quick quote: the reply time the client gave (2026-10-10) under the steps, never stronger than "aim" */
.pg-aside .pg-reply{margin:0 0 20px;padding-top:14px;border-top:1px solid var(--sage);color:var(--muted);font-size:var(--fs-ui);line-height:1.45}
/* docked under the steps, as the mockup's quick-quote panel closes */
.pg-close{margin:0;padding:16px 28px;background:var(--note-bg);color:var(--note-fg);font-weight:700;line-height:1.4}
.pg-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:68px;padding:12px 28px;border-top:1px solid var(--line);background:var(--white);font-weight:700;text-decoration:none}
.pg-close + .pg-links a:first-child{border-top:0}
.pg-links small{display:block;margin-top:2px;font-weight:500;font-size:var(--fs-sm);color:var(--muted)}
.pg-links svg{width:18px;height:18px;flex:none;color:var(--petrol);transition:transform .2s var(--ease)}
.pg-links a:hover{background:var(--porcelain)}
.pg-links a:hover > span:first-child{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.pg-links a:hover svg{transform:translateX(4px)}
.pg-links a:focus-visible{outline-offset:-3px}

/* the quote sequence: a real sequence, so it is numbered */
.pg-steps{list-style:none;margin:0;padding:0;border-top:var(--rule-heavy);counter-reset:step}
.pg-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;align-content:start;column-gap:4px;padding:16px 0;border-bottom:1px solid var(--sage);counter-increment:step}
.pg-steps li::before{content:counter(step);grid-row:1 / span 2;font-size:32px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.pg-steps strong{font-size:var(--fs-md);font-weight:700;line-height:1.3}
/* anywhere: a long email address (quote sent, step 2) wraps instead of
   being clipped by the aside */
.pg-steps li > span{grid-column:2;margin-top:4px;color:var(--muted);font-size:var(--fs-ui);line-height:1.45;overflow-wrap:anywhere}

/* ── Part rows: the quote, quick quote results, quote sent, saved lists ── */
/* a column-label row over a 2px ink rule, as the quick-quote pad */
.lines-head{display:grid;column-gap:16px;padding-bottom:8px;border-bottom:2px solid var(--ink);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.l-sku{font-weight:800;font-size:var(--fs-md);color:var(--ink);text-decoration:none}
a.l-sku:hover,a.l-part:hover .l-sku{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}
.l-desc{display:block;margin-top:2px;font-size:13.5px;font-weight:500;letter-spacing:.02em;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.l-part{display:block;min-width:0;text-decoration:none}
/* quantity boxes: the pad's field, the site's focus */
.lines .q,.results-list .q{width:100%;height:46px;margin:0;padding:0 12px;border:1px solid var(--field-line);border-radius:var(--r);background:var(--porcelain);font:inherit;font-weight:600;text-align:right;color:var(--ink)}
/* no spinners: the pad's plain box; arrow keys still step the number */
.lines .q,.results-list .q{-moz-appearance:textfield;appearance:textfield}
.lines .q::-webkit-inner-spin-button,.lines .q::-webkit-outer-spin-button,.results-list .q::-webkit-inner-spin-button,.results-list .q::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.lines .q:focus,.results-list .q:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--white)}
/* the ink border shows focus; a keyboard user also gets the site's ring */
.lines .q:focus-visible,.results-list .q:focus-visible{outline:3px solid var(--petrol);outline-offset:1px}

/* your quote */
.cart-head,.lines li{grid-template-columns:64px minmax(0,1fr) 92px 128px 44px}
.cart-head span:first-child{grid-column:1 / 3}
.cart-head span:nth-child(2){text-align:right;padding-right:13px}
.cart-head span:nth-child(3){text-align:right}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:grid;column-gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.lines .p-thumb{width:64px;height:64px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;display:block}
.lines .p-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lines .l-info{min-width:0}
.lines .l-total{text-align:right;font-weight:700}
.lines .l-total .price-lock{justify-content:flex-end}
.lines .rm{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r);background:none;color:var(--muted);cursor:pointer}
.lines .rm:hover{background:var(--sage-light);color:var(--ink)}
.lines .rm svg{width:14px;height:14px}
.totals{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-top:18px}
.totals .t-sum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0}
.totals .t-label{color:var(--muted);font-weight:500}
.totals .t{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.018em}
.totals .t-none{color:var(--muted);font-weight:500}
.totals .t-none a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}

/* quick quote results, quote sent, saved lists */
.results-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.note + .results-list{margin-top:16px}
.results-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
/* anywhere: a pasted URL or a long supplier code in a failed line wraps
   inside the panel instead of running off a phone screen */
.results-list .r-part{min-width:0;overflow-wrap:anywhere}
.results-list .r-qty{flex:none;font-weight:700;text-align:right;white-space:nowrap}
.results-list .r-qty small,.results-list .in-quote{display:block;margin-top:2px;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.results-list.bad li{justify-content:flex-start;align-items:flex-start;gap:12px}
.results-list.bad li::before{content:"!";flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:var(--r);background:var(--alert);color:var(--white);font-weight:800;font-size:14px;line-height:1}
.results-list .l-sku,.results-list .r-why{overflow-wrap:anywhere}
.results-list .r-why{display:block;margin-top:2px;color:var(--alert);font-weight:600;font-size:var(--fs-ui)}
.results-list .gone{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-ui)}
/* saved list rows: the part, its usual quantity, Remove */
.saved-head,.results-list.saved li{display:grid;grid-template-columns:minmax(0,1fr) 92px 76px;column-gap:16px}
.saved-head span:nth-child(2){text-align:right;padding-right:13px}
.results-list.saved{border-top:0}
.results-list.saved li{align-items:center}
.results-list.saved form{margin:0;justify-self:end}
.results-list.saved .linkish{min-height:44px;padding:0 4px}

/* saved lists: the new-list form and each list's head */
.list-new{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.list-new .fld{flex:1 1 260px;min-width:0}
.list-head{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px}
.list-head h2{min-width:0}
.list-actions{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.list-actions form{margin:0}
.list-actions .linkish{min-height:44px}
.list-save{margin-top:18px}
/* where saved lists live: an ink-edged note, not an alert */
.pg-keep{padding:14px 20px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:var(--r);background:var(--white);font-size:var(--fs-ui);line-height:1.5}
.pg-full{font-weight:600}

/* ── The quote form (cart) ────────────────────────────────────────────── */
/* parts and units under the list, beside the total */
.totals .t-count{flex-basis:100%;text-align:right;color:var(--muted);font-weight:600;font-size:var(--fs-ui)}
/* phones and tablets only (see Responsive): a jump past the steps to the form */
.to-details{display:none}
/* lines we don't list, kept as typed, with × as the quote's */
.results-list.unlisted li{padding:6px 0}
.results-list.unlisted .r-part{overflow-wrap:anywhere}
.results-list .rm{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r);background:none;color:var(--muted);cursor:pointer}
.results-list .rm:hover{background:var(--sage-light);color:var(--ink)}
.results-list .rm svg{width:14px;height:14px}
/* remembered details, and the way to forget them */
.pg-remembered{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;color:var(--muted);font-size:var(--fs-ui)}
.pg-remembered .linkish{min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}
.pg-remembered .linkish:hover{text-decoration-color:currentColor}
/* collect or deliver: two 48px choices; the town stays visible, quieter while collecting */
.send-quote .deliver{min-width:0;margin:0;padding:0;border:0}
.send-quote .deliver legend{padding:0;margin-bottom:6px;font-weight:700}
.send-quote .radios{display:flex;flex-wrap:wrap;gap:8px 12px}
.send-quote .radio{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border:1px solid var(--field-line);border-radius:var(--r);background:var(--white);font-weight:600;cursor:pointer}
.send-quote .radio input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--petrol)}
.send-quote .radio:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.send-quote .town{margin-top:14px}
.send-quote .town.is-quiet label{color:var(--muted)}
/* a field the send stopped on: its message under it, in the alert red (7.5:1) */
.send-quote .fld-err{margin-top:6px;color:var(--alert);font-weight:600;font-size:var(--fs-ui);line-height:1.45;overflow-wrap:anywhere}
.send-quote .input[aria-invalid="true"]{border-color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert)}
/* availability: one quiet line, never a stock level or a lead time (none is supplied). Here it
   sits beside Send (above it on phones); on the product page it sits straight above Add to
   quote, placed by product.css. Muted text: 5.6:1 on white, 5.1:1 on the page. A 6px gap keeps
   it on one line on a 390px phone, with a few pixels to spare */
.avail-note{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);overflow-wrap:break-word;text-wrap:balance}
.avail-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent-ink)}
.pg-foot .avail-note{flex:1 1 240px;min-width:0}
/* a second sentence on its own line: by Send, the availability line under the reply time (the
   product page's usual delivery times sit under Add to quote instead: product.css .b-deliv) */
.avail-note .avail-sub{display:block;margin-top:2px}

/* a fold under a list: save it as a list, copy it as text */
.pg-fold{margin-top:18px;border-top:1px solid var(--line)}
.pg-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;font-weight:700;cursor:pointer;list-style:none}
.pg-fold > summary::-webkit-details-marker{display:none}
.pg-fold > summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--petrol),var(--petrol)) center/14px 2.5px no-repeat,linear-gradient(var(--petrol),var(--petrol)) center/2.5px 14px no-repeat}
.pg-fold[open] > summary::after{background:linear-gradient(var(--petrol),var(--petrol)) center/14px 2.5px no-repeat}
.pg-fold > summary:hover{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.pg-fold > summary:focus-visible{outline-offset:-3px}
.pg-fold .list-new{margin-top:4px}
.pg-fold > .note{margin:8px 0 4px}
.copy-text textarea{display:block;margin-top:10px;background:var(--porcelain);font-weight:600;resize:vertical}
.copy-text .btn{margin-top:10px}
@media (forced-colors:active){
  .pg-fold > summary::after{content:"+";width:auto;height:auto;background:none}
  .pg-fold[open] > summary::after{content:"\2212";background:none}
}

/* ── Quick quote results ──────────────────────────────────────────────── */
/* added: the part, then what went in (and was already there), then "Set to" */
.results-list.qo-added li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start}
.qo-added .r-part{grid-row:1 / span 2}
.qo-added .r-qty small{white-space:normal;max-width:22ch;margin-left:auto}
.qo-added .r-set{grid-column:2;justify-self:end;margin:0}
.qo-added .r-set .linkish{min-height:44px;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px}
.results-list .r-note{display:block;margin-top:4px;font-size:var(--fs-ui);font-weight:600;color:var(--ink)}
/* not added: close part numbers to add in one tap, a search, ask by hand */
.results-list.bad .r-part{flex:1}
.r-near{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px;margin-top:10px}
.r-near form{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:280px}
/* what the close part is, under its button, before it goes on the quote */
.r-near-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.qo-skipped{overflow-wrap:anywhere}
.r-near-t{flex-basis:100%;font-size:var(--fs-ui);font-weight:600;color:var(--muted)}
.r-search{display:inline-flex;align-items:center;min-height:44px;margin-top:2px}
.r-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:18px}
.panel-box .r-ask .note{margin:0}

/* ── Quote sent ───────────────────────────────────────────────────────── */
.sent-keep h2{margin-bottom:16px}
.sent-keep .copy-text{margin-top:24px}

/* ── Contact, sign in ─────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split > .panel-box + .panel-box{margin-top:0}
.pg-stack > * + *{margin-top:24px}
.map:focus{outline:3px solid var(--petrol);outline-offset:2px}
.map{display:block;width:100%;height:260px;border:0;border-radius:var(--r);margin-top:20px;background:var(--sage-light)}
/* labelled rows: a branch's address, hours, phone, email */
.pg-rows{margin:18px 0 0;border-top:2px solid var(--ink)}
.pg-rows > div{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pg-rows dt{font-weight:700}
.pg-rows dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pg-rows .tlink{display:inline-flex;align-items:center;min-height:32px}
.pg-pre{white-space:pre-line}
.login-checks{margin-top:22px}
.pg-actions{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:24px}
.pg-actions .tlink{display:inline-flex;align-items:center;min-height:44px}

/* ── Trading with Africar ─────────────────────────────────────────────── */
/* the page head echoes the homepage trade band: the banner grey under a red edge */
.page-head.tp-head{background:var(--banner);border-top:6px solid var(--band-edge);border-bottom:0}
.tp-head .sub{color:var(--ink)}
.tp-countries{list-style:none;margin:20px 0 0;padding:0}
.tp-countries .chip{border-color:var(--white);cursor:default}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.tp-sec{padding-bottom:48px}
.tp-sec:last-child{padding-bottom:0}
.site .tp-sec h2{font-size:clamp(26px,2.2vw,30px);letter-spacing:var(--track-tight);line-height:1.1;padding-bottom:14px;margin-bottom:20px;border-bottom:var(--rule-heavy)}
.tp-sec > p{max-width:66ch}
/* the heading's rule is the steps' top rule */
.tp-sec .pg-steps{border-top:0;margin-top:-20px}
.tp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.tp-cards .panel-box + .panel-box{margin-top:0}
.tp-cards .panel-box{padding:24px}
.site .tp-cards h3{font-size:20px;font-weight:800;letter-spacing:-.018em;margin-bottom:4px}
.tp-cards p{color:var(--muted)}
.site .tp-label{margin:24px 0 8px;font-weight:700;color:var(--ink)}
.site .tp-cards .tp-label{margin-top:18px}
.site .tp-two .tp-label{margin-top:0}
.site .tp-sec .tp-label + p{margin-bottom:10px}
/* the account kinds: each card ends in its own button (to contact?kind=), the pair's buttons
   level however long each list runs */
.tp-kinds .panel-box{display:flex;flex-direction:column}
.site .tp-kinds .tp-go{margin-top:auto;padding-top:24px}
.tp-ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tp-ticks li{position:relative;padding-left:28px}
.tp-ticks li::before{content:'';position:absolute;left:3px;top:.5em;width:12px;height:7px;border-left:2.5px solid var(--petrol);border-bottom:2.5px solid var(--petrol);transform:rotate(-45deg)}
/* the site's checklist tick: white on a solid red square (.checks .tick); "Not covered" keeps its dash */
.tp-ticks:not(.tp-not) li{padding-left:32px}
.tp-ticks:not(.tp-not) li::after{content:'';position:absolute;left:0;top:calc(.75em - 10px);width:20px;height:20px;border-radius:var(--r);background:var(--petrol)}
.tp-ticks:not(.tp-not) li::before{z-index:1;left:5px;top:calc(.75em - 5px);width:9px;height:5px;border-left:2px solid var(--white);border-bottom:2px solid var(--white)}
.tp-not li::before{top:.75em;width:12px;height:0;border-left:0;border-bottom:2.5px solid var(--muted);transform:none}
.site .tp-after{margin:4px 0 20px;color:var(--muted);max-width:66ch}
.site .tp-sec .tp-after.tp-gap{margin-top:16px}
.tp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tp-two address,.tp-pre{font-style:normal;white-space:pre-line}
.tp-rows{margin:0}
.tp-rows > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.tp-rows > div:first-child{padding-top:0}
.tp-rows dt{font-weight:700}
.tp-rows dd{margin:0;color:var(--muted)}
.tp-aside{position:sticky;top:calc(var(--head-h) + var(--search-row) + 24px)}
.tp-contact{list-style:none;margin:20px 0 0;padding:0;border-top:var(--rule-heavy)}
.tp-contact li{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--sage);font-size:var(--fs-md);font-weight:700;min-width:0}
.tp-contact svg{width:20px;height:20px;flex:none;color:var(--petrol)}
.tp-contact a{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px;overflow-wrap:anywhere}
.tp-contact a:hover{text-decoration-color:currentColor}
.tp-aside .tp-hours{margin:14px 0 20px;color:var(--muted);font-size:var(--fs-ui)}

/* ── CMS pages (privacy, terms) and the policy fallbacks ──────────────── */
/* The hero block emits the shared .page-head. Text blocks sit in the wrap, on
   the page head's left edge, at a reading measure; the wide blocks (category
   grid, product rows, slideshow) keep their own full-width bands. Headings
   are smaller than the page h1 (site.css .page-head h1, 32-52px). */
.cms-main{padding-block:32px 96px}
.cms-blk{margin-top:16px}
.cms-blk > *{max-width:760px}
.cms-blk.cms-head{margin-top:40px}
.cms-main > .cms-blk:first-child{margin-top:0}
.cms-updated{margin-block:0;color:var(--muted);font-size:var(--fs-sm)}
.cms-updated::after{content:"";display:block;max-width:760px;margin-top:16px;border-bottom:1px solid var(--line)}
.cms-updated + .cms-blk{margin-top:28px}
.site .cms-h2{font-size:clamp(24px,2.2vw,28px);letter-spacing:var(--track-tight);line-height:1.15;font-weight:800}
.site .cms-h3{font-size:20px;letter-spacing:-.018em;line-height:1.25;font-weight:800}
.cms-blk .cms-h2{padding-bottom:12px;border-bottom:var(--rule-heavy)}
.cms-h2-gap{margin-bottom:16px}
.cms-blk .cms-h2 + .cms-prose,.cms-blk .cms-h2 + details{margin-top:14px}
.cms-blk .pg-actions{margin-top:20px}
.cms-hero .eyebrow{margin-bottom:10px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.cms-hero .eyebrow::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--petrol)}
.cms-faq{border-bottom:1px solid var(--line)}
/* flex drops the browser's disclosure triangle, so the question carries its
   own red plus, a minus when open (drawn, so a screen reader reads nothing
   extra; the summary itself announces expanded or collapsed) */
.cms-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:8px 0;font-weight:700;cursor:pointer;list-style:none}
.cms-faq summary::-webkit-details-marker{display:none}
.cms-faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--petrol),var(--petrol)) center/14px 2.5px no-repeat,linear-gradient(var(--petrol),var(--petrol)) center/2.5px 14px no-repeat}
.cms-faq[open] > summary::after{background:linear-gradient(var(--petrol),var(--petrol)) center/14px 2.5px no-repeat}
.cms-faq summary:hover{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.cms-faq summary:focus-visible{outline-offset:-3px}
@media (forced-colors:active){
  .cms-faq summary::after{content:"+";width:auto;height:auto;background:none}
  .cms-faq[open] > summary::after{content:"\2212";background:none}
}
/* contact card: labelled rows as the contact page's; steps as the quote steps;
   link cards with a 44px link. The heading's 3px rule is the list's top rule. */
.cms-rows{margin-top:0}
.cms-rows > div{grid-template-columns:160px minmax(0,1fr)}
.cms-rows dd{white-space:pre-line}
.cms-blk .cms-h2 + .cms-rows,.cms-blk .cms-h2 + .cms-steps{border-top:0}
.cms-steps li:last-child{border-bottom:0}
.cms-steps li > span{font-size:var(--fs-body)}
.cms-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cms-card{display:flex;flex-direction:column;align-items:flex-start;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.site .cms-card-t{font-size:var(--fs-md);font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.site .cms-card-x{margin-top:6px;color:var(--muted);line-height:1.55}
.cms-card .tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;padding-top:8px;overflow-wrap:anywhere}
.cms-card .tlink svg{width:16px;height:16px;flex:none;color:var(--petrol)}
.cms-faq .cms-prose{padding:0 0 16px}
/* rich text from the PIM (sanitised there): paragraphs, lists, links */
.cms-prose{font-size:var(--fs-md);line-height:1.65;max-width:70ch;overflow-wrap:break-word}
.cms-prose > * + *{margin-top:14px}
.cms-prose ul,.cms-prose ol{margin:14px 0 0;padding-left:1.3em}
.cms-prose ul{list-style:square}
.cms-prose ol{list-style:decimal}
.cms-prose li{padding-left:.3em}
.cms-prose li + li{margin-top:8px}
.cms-prose li::marker{color:var(--petrol)}
.cms-prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.cms-prose a:hover{text-decoration-color:currentColor}
.cms-prose strong,.cms-prose b{font-weight:700}
.cms-prose h2{margin-top:36px;font-size:24px;line-height:1.2;letter-spacing:-.018em}
.cms-prose h3{margin-top:28px;font-size:20px;line-height:1.25;letter-spacing:-.018em}
.cms-prose h2 + *,.cms-prose h3 + *{margin-top:10px}
.cms-prose > :first-child,.cms-prose section > :first-child{margin-top:0}
.cms-prose > section + section{margin-top:32px}
.cms-lead{margin-top:10px}

/* ── About us ─────────────────────────────────────────────────────────── */
/* The client's text at a reading measure under the aerial of the premises: the
   opening sentence as a lead beside the story, the eight points as a numbered list
   (the quote steps' red numerals) beside the warehouse photo, the closing lines on
   the trade band's grey with a call button, then the sales team as a strip of
   photos and names linking to the Contact page's team section. Ink text only on
   the grey (--banner); photos keep 2px corners. */
.ab-hero{margin:0}
.ab-hero img{width:100%;height:auto;aspect-ratio:16 / 7;object-fit:cover;object-position:50% 70%;border-radius:var(--r);background:var(--sage-light)}
.ab-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:start;margin-top:48px}
.site .ab-lead{padding-top:18px;border-top:var(--rule-heavy);font-size:clamp(21px,1.9vw,25px);font-weight:600;line-height:1.38;letter-spacing:-.012em}
.ab-text{max-width:37em;font-size:var(--fs-md);line-height:1.65}
.site .ab-text p + p{margin-top:16px}
.ab-sec{margin-top:72px}
.site .ab-sec h2,.site .ab-team h2{font-size:clamp(26px,2.2vw,30px);letter-spacing:var(--track-tight);line-height:1.1}
.site .ab-sec h2{padding-bottom:14px;border-bottom:var(--rule-heavy)}
.ab-unique{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:start}
/* the heading's rule is the list's top rule */
.ab-points{list-style:none;margin:0;padding:0;counter-reset:point}
.ab-points li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md);line-height:1.5;counter-increment:point}
.ab-points li::before{content:counter(point);font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--petrol)}
.site .ab-note{margin-top:16px;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.ab-note .tlink{color:var(--ink)}
.ab-photo{margin:24px 0 0}
.ab-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--sage-light)}
.ab-close{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px;margin-top:72px;padding:36px 40px;background:var(--banner);border-top:6px solid var(--band-edge);border-radius:var(--r);color:var(--ink)}
.site .ab-close p{max-width:46em;font-size:var(--fs-lead);font-weight:500;line-height:1.55}
.ab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ab-actions .tlink{display:inline-flex;align-items:center;min-height:44px}
.ab-team{margin-top:72px}
.ab-team-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding-bottom:10px;border-bottom:var(--rule-heavy)}
.ab-team-head .tlink{display:inline-flex;align-items:center;min-height:44px}
.ab-people{display:grid;grid-template-columns:repeat(4,minmax(0,200px));gap:24px 32px;margin:24px 0 0;padding:0;list-style:none}
.ab-people li{min-width:0}
.ab-people img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.ab-people span{display:block;margin-top:10px;font-size:var(--fs-md);font-weight:700;line-height:1.3}
/* the About page's own breakpoints, kept with it: from 1024 the story in one column
   and the warehouse photo narrower; on phones one column, the photos wider than
   tall, the strip still four across down to 561 and two by two below, never
   wider than 180px a photo (about.html's sizes follows these widths) */
@media (max-width:1024px){
  .ab-hero img{aspect-ratio:2 / 1}
  .ab-story{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .ab-text{max-width:none}
  .ab-unique{grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:32px}
  .ab-close{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ab-hero img{aspect-ratio:5 / 3}
  .ab-story{margin-top:28px;gap:20px}
  .site .ab-lead{padding-top:14px;font-size:20px}
  .ab-text{font-size:var(--fs-body)}
  .ab-sec,.ab-team{margin-top:48px}
  .ab-close{margin-top:48px;padding:24px 16px}
  .site .ab-close p{font-size:var(--fs-md)}
  .ab-actions .btn{width:100%}
  .ab-unique{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-photo img{aspect-ratio:3 / 2;object-position:50% 60%}
  .ab-points li{grid-template-columns:40px minmax(0,1fr);font-size:var(--fs-body)}
  .ab-points li::before{font-size:28px}
  /* the note's link is in a sentence: a 44px hit area without moving the lines */
  .ab-note .tlink{padding-block:13px}
  .ab-people{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
  .ab-people span{font-size:var(--fs-body)}
}
@media (max-width:560px){
  .ab-people{grid-template-columns:repeat(2,minmax(0,180px))}
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.oops{padding-block:96px 120px}
.site .oops h1{max-width:16ch;padding-bottom:20px;border-bottom:var(--rule-heavy);font-size:clamp(44px,6vw,84px);letter-spacing:-.04em;line-height:.98}
.site .oops p{margin-top:20px;font-size:var(--fs-lead);color:var(--muted);max-width:52ch}
.oops-search{display:flex;max-width:560px;margin-top:28px}
.oops-search input{flex:1;min-width:0;height:52px;margin:0;padding:0 16px;border:1px solid var(--field-line);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--white);font:inherit;font-weight:500;color:var(--ink);-webkit-appearance:none;appearance:none}
.oops-search input::placeholder{color:var(--placeholder);opacity:1}
.oops-search input:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.oops-search .btn{border-radius:0 var(--r) var(--r) 0;min-height:52px}
.oops-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin-top:24px}
.oops-links .tlink{display:inline-flex;align-items:center;min-height:44px}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* the quote pages go to one column below 1181: beside a 360px aside the
   cart's part column would fall to about 100px at 1025 */
@media (max-width:1180px){
  .pg-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "aside" "send";grid-template-rows:auto}
  .pg-grid.aside-first{grid-template-areas:"aside" "main" "send"}
  .pg-aside{margin-top:24px}
  .aside-first .pg-aside{margin-top:0}
  .aside-first .pg-main{margin-top:24px}
  /* the quote: parts, then the details form, then how a quote works */
  .pg-grid.send-first{grid-template-areas:"main" "send" "aside"}
  .to-details{display:inline-flex;align-items:center;min-height:44px;margin-top:12px}
}
@media (max-width:1024px){
  .split,.split.even{grid-template-columns:minmax(0,1fr);gap:24px}
  .tp-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .tp-aside{position:static;order:-1;margin-bottom:40px}
}
/* tablets and small laptops: the aside runs full width, so its steps and
   links sit side by side */
@media (min-width:761px) and (max-width:1180px){
  .pg-aside .pg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .pg-aside .pg-steps li{border-bottom:0}
  .pg-aside .pg-links{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .pg-aside .pg-links a + a{border-left:1px solid var(--line)}
  .pg-aside .pg-close + .pg-links a{border-top:0}
}
@media (max-width:760px){
  .panel-box{padding:24px 16px}
  .tp-cards .panel-box{padding:20px 16px}
  .pg-aside-in{padding:24px 16px 4px}
  .pg-close{padding:14px 16px}
  .pg-links a{padding:12px 16px;min-height:64px}
  .site .panel-box h2,.site .pg-aside h2,.site .pg-panel h2{font-size:22px}
  .pg-steps li{grid-template-columns:40px minmax(0,1fr)}
  .pg-steps li::before{font-size:28px}
  .pg-steps strong{font-size:var(--fs-body)}

  /* your quote: the part on top; quantity, price and remove under it */
  .lines-head{display:none}
  .lines,.results-list.saved{border-top:2px solid var(--ink)}
  .lines li{grid-template-columns:56px 24px minmax(0,1fr) 44px;grid-template-areas:"img info info info" "qty qty total rm";column-gap:12px;row-gap:10px}
  .lines .p-thumb{grid-area:img;width:56px;height:56px}
  .lines .l-info{grid-area:info}
  /* the part number gets a 44px row of its own; the description stays
     plain text that can be selected */
  .lines .l-sku{display:flex;align-items:center;width:fit-content;max-width:100%;min-height:44px;margin-block:-8px 0}
  .lines .l-qty{grid-area:qty}
  .lines .l-total{grid-area:total;text-align:left}
  .lines .l-total .price-lock{justify-content:flex-start}
  .lines .rm{grid-area:rm}
  .totals{flex-direction:column-reverse;align-items:stretch}
  .totals .btn{width:100%}

  .saved-head{display:none}
  .results-list.saved li{grid-template-columns:80px minmax(0,1fr);grid-template-areas:"part part" "qty rm";row-gap:10px}
  .results-list.saved .r-part{grid-area:part}
  .results-list.saved .s-qty{grid-area:qty}
  .results-list.saved form{grid-area:rm;justify-self:start}
  .list-actions{width:100%}
  .list-new .btn{width:100%}

  .pg-rows > div{grid-template-columns:72px minmax(0,1fr);gap:12px}
  /* inline links in a sentence: a 44px hit area without moving the lines */
  .pg-hit,.pg-note a,.totals .t-none a,.cms-prose a{padding-block:12px}
  .pg-note a{padding:13px 2px}
  .tp-contact a{display:inline-flex;align-items:center;min-height:44px}
  .pg-rows .tlink{min-height:44px}
  .pg-foot .btn,.pg-actions .btn{width:100%}
  .totals .t-count{text-align:left}
  .send-quote .radio{flex:1 1 100%}
  /* quick quote results: what went in under the part */
  .results-list.qo-added li{grid-template-columns:minmax(0,1fr)}
  .qo-added .r-part{grid-row:auto}
  .qo-added .r-qty{text-align:left;margin-top:6px}
  .qo-added .r-qty small{max-width:none;margin-left:0}
  .qo-added .r-set{grid-column:1;justify-self:start}
  .r-ask .btn{width:100%}

  .tp-cards,.tp-two{grid-template-columns:minmax(0,1fr)}
  .tp-kinds .tp-go .btn{width:100%}
  .tp-rows > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .tp-sec{padding-bottom:40px}

  .cms-main{padding-block:24px 64px}
  .cms-blk.cms-head{margin-top:32px}
  .cms-prose{font-size:var(--fs-body)}
  .cms-rows > div{grid-template-columns:112px minmax(0,1fr)}
  .cms-cards{grid-template-columns:minmax(0,1fr)}
  .cms-card{padding:20px 16px}

  .oops{padding-block:48px 72px}
  .site .oops p{font-size:var(--fs-body)}
}
@media (max-width:480px){
  .oops-search{flex-direction:column;gap:8px}
  .oops-search input{flex:none;border-right:1px solid var(--field-line);border-radius:var(--r)}
  .oops-search .btn{border-radius:var(--r)}
  .cms-rows > div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* the quote reference (about 220px) is wider than a step's text column
   here, so it may break at its hyphens rather than overflow */
@media (max-width:360px){
  .pg-steps .nw{white-space:normal}
  /* the account buttons run full width: the arrow goes, so each label stays on one line */
  .tp-kinds .tp-go .btn{padding-inline:16px}
  .tp-kinds .tp-go .btn svg{display:none}
}

/* ── Print: the quote sent page keeps the reference, the steps and the lines, under a block
   naming the supplier, its contacts, and who sent the request when (.sent-print, print only) ── */
.sent-print{display:none}
@media print{
  .sent-page .sent-print{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 24px;padding-block:8px 16px;border-bottom:2px solid #000;color:#000;font-size:14px;line-height:1.45}
  .sent-print img{display:block;width:auto;height:52px}
  .sent-print p{margin:0}
  .sent-print .sent-who{grid-column:1 / -1}
  .site:has(.sent-page) :is(.skip,.banner,.hdr,.flash,.foot,.sent-actions,.sent-keep){display:none!important}
  .sent-page .page-head{background:none;border:0}
  .sent-page .page-body{padding:0}
  .sent-page .pg-grid{display:block}
  .sent-page .pg-aside{position:static;border:0;background:none}
  .sent-page .pg-aside-in{padding:0}
  .sent-page .panel-box{margin-top:24px;padding:0;border:0}
  .sent-page .l-desc{color:#000}
}