/* London Pallet Trucks — shop: header search + basket, category listing, product page, basket page. Uses tokens from site.css. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.btn.sm{font-size:15px;padding:8px 12px;border-width:2px}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{text-decoration:underline}

/* The floating "Trade price" pill from the content pages is not needed on shop pages (the buy box and basket carry the CTA)
   and it covered the order button on laptop viewports. */
.shop-body .wa-float{display:none}
@media (max-width:640px){body.shop-body{padding-bottom:0}}

/* ---------- header: search + basket ---------- */
.site-header .wrap{position:relative}
.site-search{position:relative;display:flex;align-items:center;margin-left:auto;flex:0 1 300px;min-width:0}
.site-search input{width:100%;font:inherit;font-size:14.5px;padding:9px 38px 9px 12px;border:1px solid var(--rule-2);border-radius:4px;background:var(--bg);color:var(--ink);-webkit-appearance:none}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.site-search input:focus{border-color:var(--ink)}
.site-search .sbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:4px;color:var(--ink-2);cursor:pointer}
.site-search .sbtn svg{width:18px;height:18px}
.site-search .sbtn:hover{background:var(--panel);color:var(--ink)}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg);border:1px solid var(--rule);box-shadow:0 12px 34px rgba(24,33,48,.14);z-index:70;max-height:min(70vh,520px);overflow:auto;padding:6px}
.search-results[hidden]{display:none}
.search-results a{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px;text-decoration:none;color:var(--ink);border-radius:4px}
.search-results a:hover,.search-results a.hot{background:var(--panel)}
.search-results img,.search-results .ph{width:48px;height:48px;object-fit:contain;background:var(--panel);border-radius:3px}
.search-results .rn{font-weight:500;font-size:14px;line-height:1.25}
.search-results .rc{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.search-results .rp{font-family:var(--display);font-weight:700;font-size:17px;white-space:nowrap}
.search-results .all,.search-results .none{display:block;padding:10px 8px;font-size:13.5px;color:var(--ink-2)}
.search-results .all{color:var(--accent-ink);font-weight:500}
.search-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:4px;width:40px;height:40px;flex:none;place-items:center;cursor:pointer;color:var(--ink)}
.search-toggle svg{width:18px;height:18px}
.nav-toggle{margin-left:0}
.basket-link{position:relative;display:grid;place-items:center;width:42px;height:42px;color:var(--ink);text-decoration:none;border-radius:4px;flex:none}
.basket-link:hover{background:var(--panel)}
.basket-link svg{width:24px;height:24px}
.basket-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;font-weight:500;line-height:18px;text-align:center}
.basket-count[hidden]{display:none}
.header-cta{margin-left:0}
@media (max-width:1400px){
  .nav a,.nav summary{white-space:nowrap;padding:10px 8px;font-size:14px}
  .site-header .wrap{gap:10px}
  .search-toggle{display:grid}
  .site-search{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:10px var(--gutter) 12px;background:var(--bg);border-bottom:1px solid var(--rule);flex:none}
  .site-search.open{display:flex}
  .site-search .sbtn{right:calc(var(--gutter) + 4px)}
  .search-results{left:var(--gutter);right:var(--gutter);top:calc(100% - 4px)}
}
@media (max-width:980px){
  .site-header .wrap{gap:8px}
  .logo{margin-right:auto}
  .nav-toggle,.basket-link{margin-left:0}
}
@media (max-width:640px){.basket-link{width:38px;height:38px}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 16px;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.25);display:flex;gap:14px;align-items:center;font-size:14.5px;z-index:90;opacity:0;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;white-space:nowrap}
@media (max-width:640px){.toast{bottom:84px;left:16px;right:16px;max-width:none;transform:translateY(20px)}.toast.show{transform:none}.toast span{flex:1 1 auto;min-width:0}}

/* ---------- shared: cards, badges, price ---------- */
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;padding:3px 7px;border:1px solid var(--rule-2);border-radius:3px;color:var(--ink-2);background:var(--bg);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pprice{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;text-transform:uppercase;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.pprice .from{font-size:14px;color:var(--ink-3);font-weight:600}
.pprice small{display:block;flex-basis:100%;font-family:var(--body);font-size:12.5px;font-weight:400;text-transform:none;color:var(--ink-3);margin-top:4px;line-height:1.3}
.pprice small.from{display:inline;flex-basis:auto;margin:0;font-size:14px;font-weight:600;text-transform:lowercase}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:16px}
.pcard[hidden],.pager[hidden],.empty[hidden]{display:none}
.pcard{border:1px solid var(--rule);display:flex;flex-direction:column;background:var(--bg);transition:border-color .15s,box-shadow .15s;position:relative}
.pcard:hover{border-color:var(--ink);box-shadow:0 8px 24px rgba(24,33,48,.08)}
.pcard .pic{display:block;aspect-ratio:1/1;background:var(--panel);overflow:hidden;position:relative}
.pcard .pic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s}
.pcard:hover .pic img{transform:scale(1.03)}
.pcard .pic .ph,.ph{display:grid;place-items:center;width:100%;height:100%}
.pcard .pic .vid{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 7px;border-radius:3px}
.pbody{padding:12px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;flex:1;min-width:0;align-content:start}
.pname{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.05;margin:0;text-transform:none;letter-spacing:0}
.pname a{color:var(--ink);text-decoration:none}
.pname a::after{content:"";position:absolute;inset:0}
.pcard .pprice{font-size:24px;margin-top:2px}
/* bulk-priced cards and product pages (29 Sep 2026): 'Any quantity welcome. Ask us for a price.' to the quote form (product pages: to the
   email box below); above the card's whole-card link */
.fewer{display:block;position:relative;z-index:1;margin-top:-4px;font-size:12.5px;line-height:1.35;color:var(--ink-2);text-decoration:none}
.fewer span{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.fewer:hover span{text-decoration-thickness:2px}
.pquote .fewer{margin-top:-6px;font-size:14px}
.pbtns{display:flex;gap:8px;margin-top:auto;padding-top:4px;position:relative;z-index:1}
.pbtns .btn{justify-content:center;white-space:nowrap;padding-inline:10px}
.pbtns .btn.primary{flex:1 1 auto}
.pbtns .btn:not(.primary){flex:0 0 auto}
@media (max-width:480px){.pgrid{grid-template-columns:minmax(0,1fr);gap:12px}.pcard{flex-direction:row}.pcard .pic{flex:0 0 42%;aspect-ratio:auto;min-height:150px}.pbody{padding:10px 12px 12px;gap:6px;min-width:0}.pcard .eyebrow{font-size:10.5px}.pname{font-size:19px}.pcard .pprice{font-size:22px}.badge{font-size:10.5px;padding:2px 5px}.pbtns{flex-wrap:wrap}.pbtns .btn{flex:1 1 100%}.btn.sm{font-size:14px;padding:8px 10px}}

/* ---------- /shop/ ---------- */
.shop-hero{padding-block:26px 12px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:end}
.shop-hero .quick{font-size:17px;max-width:62ch}
.shop-search{display:flex;gap:8px;align-items:stretch}
.shop-search input{flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 14px;border:2px solid var(--ink);border-radius:4px;-webkit-appearance:none}
@media (max-width:820px){.shop-hero{grid-template-columns:1fr;gap:16px}}
.cats-head{margin-top:26px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.tile{border:1px solid var(--rule);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:border-color .15s}
.tile:hover{border-color:var(--ink)}
.tile img,.tile .ph{aspect-ratio:4/3;width:100%;height:auto;object-fit:contain;background:var(--panel);mix-blend-mode:multiply}
.tile .tbody{padding:10px 12px 12px;display:grid;gap:2px}
.tile .tname{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.05}
.tile .tcount{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.how{background:var(--panel);border-block:1px solid var(--rule);margin-top:44px}
.how ol{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how li{max-width:none;display:grid;gap:3px;font-size:14px;color:var(--ink-2)}
.how b{font-family:var(--display);font-size:20px;color:var(--ink);text-transform:uppercase}
@media (max-width:720px){.how ol{grid-template-columns:1fr;gap:12px}}
.pnote{font-size:13.5px;color:var(--ink-3);margin:22px 0 0;max-width:none}
#results .rhead{margin-top:20px}
.rcount{font-size:14px}

/* ---------- category ---------- */
.cat-head{padding-block:22px 6px}
.cat-head .quick{font-size:17px}
.cat-quote{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:6px 0 12px}
.cq-price{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)}
.cq-price b{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink)}
.cq-price small{font-size:14px}
.cq-price[hidden]{display:none}
.cq-btn{justify-content:center}
.shop-cat{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;margin-top:14px}
.filters{position:sticky;top:88px;border:1px solid var(--rule);padding:14px 16px 16px;display:grid;gap:6px}
.fhead{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:20px;text-transform:uppercase;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.facet{border-bottom:1px solid var(--rule);padding:8px 0}
.facet:last-of-type{border-bottom:0}
.facet summary{cursor:pointer;font-weight:600;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .15s}
.facet[open] summary::after{transform:rotate(-135deg)}
.facet .opts{display:grid;gap:4px;padding:4px 0 2px}
.facet label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:3px 0}
.facet input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.facet .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fnote{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.filters-toggle{display:none}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.toolbar .count{margin:0;font-size:14.5px;color:var(--ink-2)}
.toolbar .count b{color:var(--ink);font-weight:600}
.sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.sort select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--rule-2);border-radius:4px;background:var(--bg);color:var(--ink)}
.empty{padding:32px 0;color:var(--ink-2)}
.other-cats{margin-top:40px}
.other-cats h2{font-size:22px;margin-top:0}
.other-cats ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.other-cats a{display:inline-block;padding:7px 12px;border:1px solid var(--rule-2);border-radius:4px;text-decoration:none;color:var(--ink);font-size:14px}
.other-cats a:hover{border-color:var(--ink)}
/* range and collection copy (catalogue/cat_seo.py): 'Types we supply' row under the intro, buying advice and FAQ under the grid */
.cat-types{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 2px}
.cat-types .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.cat-types a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--rule-2);border-radius:4px;background:#fff;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.3}
.cat-types a:hover{border-color:var(--ink)}
.cat-types .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.shop-hero h1{font-size:clamp(30px,4.2vw,46px)}
.cat-advice,.cat-faq,.cat-intro{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.cat-intro p{color:var(--ink-2);max-width:74ch;margin:0}   /* 22 Oct 2026: the range intro, moved from the header to under the grid */
.cat-advice h2,.cat-faq h2{margin:0 0 12px}
.cat-advice h3{font-size:20px;margin-top:18px}
.cat-advice p{color:var(--ink-2);max-width:74ch}
.cat-faq details{max-width:860px;border:1px solid var(--rule);border-radius:4px;background:#fff;padding:0 16px;margin-bottom:8px}
.cat-faq details[open]{box-shadow:0 8px 20px rgba(24,33,48,.07)}
.cat-faq summary{list-style:none;cursor:pointer;font-weight:600;font-size:16.5px;line-height:1.35;padding:14px 32px 14px 0;position:relative}
.cat-faq summary::-webkit-details-marker{display:none}
.cat-faq summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.cat-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.cat-faq details p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px;max-width:74ch}
.cat-guide{margin:16px 0 0;font-size:15px}
@media (max-width:820px){
  .cat-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin:6px 0 4px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .cat-types::-webkit-scrollbar{display:none}
  .cat-types a,.cat-types .lbl{flex:none}
  .cat-types a{font-size:13px;padding:4px 9px}
  .cat-faq summary{font-size:15.5px}
}
@media (max-width:820px){
  .shop-cat{grid-template-columns:1fr;gap:12px}
  .cat-head{padding-block:14px 4px}
  .cat-quote{display:grid;gap:8px;margin:4px 0 10px}
  .cq-btn{width:100%;min-height:48px;font-size:17px}
  .cat-head .quick{font-size:15.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;margin-bottom:6px}
  .cat-head .quick.open{display:block}
  .filters-toggle{display:inline-flex;justify-self:start}
  .filters{display:none;position:static}
  .filters.open{display:grid}
}

/* ---------- product page ---------- */
/* 2 Oct 2026: the HTML order is head (eyebrow, H1, badges, price + 'Get a quote'), gallery, then the buy box, so a phone shows the
   name, price and button above the photo. On a computer the gallery spans both rows on the left and .pquote is drawn as the top of
   the bordered buy box (border, padding and the 14px gap split between .pquote and .buy), so the page looks exactly as before. */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto 1fr;grid-template-areas:"media head" "media info";column-gap:36px;row-gap:0;align-items:start;margin-top:14px}
.phead{grid-area:head}.pmedia{grid-area:media}.pinfo{grid-area:info}
.phead,.pmedia,.pinfo{min-width:0}
.phead h1{font-size:clamp(28px,4vw,40px);text-transform:none;margin:4px 0 10px}
.phead .eyebrow{margin:0}
.phead .pquote{margin-top:16px;border:2px solid var(--ink);border-bottom:0;padding:18px 18px 0;background:var(--bg)}
.gallery{position:sticky;top:88px}
.stage{position:relative;aspect-ratio:1/1;background:var(--panel);overflow:hidden}
/* one cell the size of the square stage: an auto row grew to a portrait photo's full height and the stage cut off its bottom (23 Oct 2026) */
.slide{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;opacity:0;visibility:hidden;transition:opacity .2s}
.slide.on{opacity:1;visibility:visible}
.slide img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.slide.video{background:var(--ink)}
.slide video{width:100%;height:100%;object-fit:contain;background:#000}
.thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumb{flex:none;width:72px;height:72px;padding:0;border:2px solid var(--rule);background:var(--panel);cursor:pointer;position:relative;overflow:hidden}
.thumb img,.thumb svg{width:100%;height:100%;object-fit:cover}
.thumb.on{border-color:var(--ink)}
.thumb.vthumb svg:last-child{position:absolute;inset:0;margin:auto;width:28px;height:28px}
.buy{border:2px solid var(--ink);border-top:0;padding:14px 18px 18px;display:grid;gap:14px;background:var(--bg)}
.pprice.big{font-size:34px}
.tiers{border-collapse:collapse;width:100%;font-size:14.5px}
.tiers th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:6px 8px;border-bottom:2px solid var(--ink)}
.tiers td{padding:8px;border-bottom:1px solid var(--rule)}
.tiers td.pv{font-family:var(--display);font-size:19px;font-weight:700;text-align:right}
.tiers th:last-child{text-align:right}
.tiers tr.active td{background:var(--accent-soft)}
.buy .qnote{font-size:13.5px;margin:0;max-width:none}
.olabel{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.opt{margin:0;padding:0;border:0;min-width:0}
.opt.fixed{display:flex;align-items:baseline;gap:10px}
.opt.fixed .olabel{margin:0}
.opt.fixed .oval{font-weight:500;font-size:14.5px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{display:inline-block;padding:8px 14px;border:2px solid var(--rule-2);border-radius:4px;font-family:var(--display);font-size:17px;font-weight:700;cursor:pointer;line-height:1;color:var(--ink);background:var(--bg)}
.pill input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.pill input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.opt select{font:inherit;padding:9px 12px;border:2px solid var(--rule-2);border-radius:4px;background:var(--bg);width:100%}
.qtyrow{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:end}
.qty{display:grid}
.stepper{display:inline-flex;border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.stepper button{width:40px;border:0;background:var(--bg);font-size:20px;cursor:pointer;color:var(--ink);font-family:var(--body)}
.stepper button:hover{background:var(--panel)}
.stepper input{width:70px;border:0;border-inline:2px solid var(--ink);text-align:center;font:inherit;font-size:17px;font-weight:600;padding:8px 4px;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
.linetotal{margin:0;font-size:14px;color:var(--ink-2);display:grid;line-height:1.2}
.linetotal b{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink);line-height:1}
.linetotal small{font-size:12px;color:var(--ink-3)}
.buy .btns{display:flex;flex-wrap:wrap;gap:10px}
.buy .btns .btn{flex:1 1 auto;justify-content:center}
.buy .nopay{font-size:13px;color:var(--ink-2);margin:0;max-width:none;padding:10px 12px;background:var(--panel);border-left:3px solid var(--accent)}
.buy .mail{font-size:13.5px}
.tabs{margin-top:44px}
.tablist{display:flex;gap:0;border-bottom:2px solid var(--ink);overflow-x:auto}
.tablist button{background:none;border:0;padding:12px 18px;font-family:var(--display);font-size:20px;font-weight:700;text-transform:uppercase;color:var(--ink-3);cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tablist button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabpanel{padding-top:20px}
.tabpanel[hidden]{display:none}
.dsec h3{margin-top:14px}
.dsec p,.dsec li{overflow-wrap:anywhere}   /* safety net: a long unbroken supplier line never widens a phone page */
.hl{list-style:none;padding:0;display:grid;gap:8px;margin-top:12px;max-width:76ch}
.hl li{padding-left:16px;position:relative;max-width:none;font-size:15px}
.hl li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--accent)}
.hl b{font-weight:600}
.dimgs{display:grid;gap:14px;margin-top:22px;max-width:720px}
.dimg{margin:0;background:var(--panel)}
.dimg img{width:100%;height:auto}
.tabpanel .spec{margin-top:0;max-width:860px}
.tabpanel .tbl{margin-top:18px}
.related{margin-top:48px}
.related h2{font-size:26px}
@media (max-width:900px){.pdp{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"media" "head" "info"}.phead{margin-top:20px}.gallery{position:static}.phead .pquote{padding:14px 14px 0}.buy{padding:14px}.pprice.big{font-size:30px}}
/* phones (600px and below): name, badges, price and 'Get a quote' first, then the photo (at most 56% of the screen height), then the
   buy box with 'Get a price by email' at its top, where both quote buttons jump to (shop.js) */
@media (max-width:600px){
  .pdp{grid-template-areas:"head" "media" "info";margin-top:10px}
  body:has(.pdp) .crumbs li[aria-current]{display:none}   /* the H1 just below names the product */
  body:has(.pdp) .crumbs li:nth-child(2){display:none}   /* and 'Shop' goes: 'Home / Range' fits one line even for the longest range names at 360px */
  .phead{margin-top:0}
  .phead .eyebrow{font-size:11px;letter-spacing:.03em}   /* range and ref on one line on most products (it still wraps if long) */
  .phead h1{font-size:26px;line-height:1.08;margin:2px 0 8px}
  .phead .pquote{margin-top:10px;border:0;padding:0;background:none;gap:10px}
  .pmedia{margin-top:14px}
  .stage{max-height:56vh;max-height:56svh}
  .pinfo{margin-top:16px}
  .buy{border-top:2px solid var(--ink)}
}
@media (max-width:480px){.pill span{font-size:15px;padding:7px 11px}.tablist button{font-size:17px;padding:10px 12px}.thumb{width:60px;height:60px}}

/* ---------- basket ('Your quote request', 1 Oct 2026): phone order H1, line, items, subtotal, form, then help + explanation;
   desktop items on the left, subtotal and form in the right column (not sticky: the form is taller than many screens) ---------- */
.basket-page{padding-top:16px;padding-bottom:40px}
.basket-page .quick{margin-bottom:0}
.basket-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto 1fr;grid-template-areas:"lines sum" "more sum";gap:24px 32px;align-items:start;margin-top:22px}
.bleft{grid-area:lines;min-width:0}
.bmore{grid-area:more;min-width:0}
.bmore .helpcard{margin:0 0 14px}
.bmore p{font-size:14px;color:var(--ink-2)}
.bmore .snote{font-size:12.5px;color:var(--ink-3)}
.blines{display:grid;gap:12px}
.bline{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;border:1px solid var(--rule);padding:12px}
.bline img,.bline .ph{width:96px;height:96px;object-fit:contain;background:var(--panel);mix-blend-mode:multiply}
.bline .bname{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.05}
.bline .bname a{color:var(--ink);text-decoration:none}
.bline .bopts{font-size:13px;color:var(--ink-2);margin-top:2px}
.bline .bunit{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:4px}
.bline .bright{display:grid;gap:8px;justify-items:end;text-align:right}
.bline .btotal{font-family:var(--display);font-size:22px;font-weight:700;line-height:1}
.bline .btotal small{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;color:var(--ink-3)}
.bline .stepper button{width:34px}
.bline .stepper input{width:56px;font-size:15px;padding:6px 2px}
.bempty{padding:36px 0;border:1px dashed var(--rule-2);text-align:center;color:var(--ink-2)}
.bempty a{display:inline-block;margin-top:10px}
.bacts{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;margin:10px 0 0;font-size:13.5px;max-width:none}
.bacts[hidden]{display:none}
.bacts a{color:var(--accent-ink)}
.bsum{grid-area:sum;min-width:0;border:2px solid var(--ink);padding:18px;display:grid;gap:10px}
.srow{display:flex;justify-content:space-between;font-size:14.5px;color:var(--ink-2)}
.srow.total{font-family:var(--display);font-size:24px;text-transform:uppercase;color:var(--ink);border-top:2px solid var(--ink);padding-top:10px}
.snote{font-size:12.5px;color:var(--ink-3);margin:0;max-width:none}
.bmore .nopay{font-size:13px;color:var(--ink-2);margin:12px 0 0;max-width:none;padding:10px 12px;background:var(--panel);border-left:3px solid var(--accent)}
.order-form{margin-top:4px;padding-top:14px;border-top:1px solid var(--rule)}
.order-form h2{margin:0;font-size:22px}
.order-form .order-empty{padding:14px 16px;border:1px dashed var(--rule-2);color:var(--ink-2);max-width:none;margin:0}
.order-form .order-empty[hidden],[data-order-body][hidden]{display:none}
.order-form form.trade{gap:10px;margin-top:10px;max-width:none;border:0;padding:0;background:none}   /* site.css .order boxes the form: here the summary box already does */
.order-form form.trade input,.order-form form.trade textarea,.order-form form.trade select{width:100%;min-width:0}
.order-form form.trade select{-webkit-appearance:none;appearance:none;padding-right:36px;text-overflow:ellipsis;cursor:pointer;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237b8592' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 13px center}
.order-form form.trade select:has(option[value=""]:checked){color:var(--ink-3)}.order-form form.trade option{color:var(--ink)}   /* 'How did you find us?' (23 Oct 2026): drawn like the inputs, its placeholder reads like theirs */
.order-form form.trade .btn{justify-content:center;min-height:50px}
.order-form .msg{margin:0;font-size:13px;max-width:none}
.order-form .opt-hint{font-weight:400;color:var(--ink-3);font-size:13px}
.order-form .req{color:var(--accent-ink);font-weight:700}
@media (min-width:901px){.order-form form.trade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}.order-form form.trade>:not(.half){grid-column:1/-1}}   /* desktop: names, email and phone in pairs, so the button sits higher */
.balt{display:grid;gap:8px;justify-items:start;margin:10px 0 0;font-size:13.5px;max-width:none}
.balt .btn[hidden],.balt a[hidden]{display:none}
.balt .btn.wa{justify-self:stretch;justify-content:center}
@media (max-width:900px){.basket-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"lines" "sum" "more";gap:16px}}
/* phones: compact lines (photo, name and unit price on one row; quantity, line total and Remove on the next) so the form starts high */
@media (max-width:480px){.basket-page h1{font-size:30px}.basket-page .quick{font-size:15px;margin-top:6px}.basket-grid{margin-top:14px}
  .bline{grid-template-columns:56px 1fr;gap:8px 10px;padding:10px}.bline img,.bline .ph{width:56px;height:56px}.bline .bname{font-size:17px}
  .bline .bright{grid-column:1/-1;grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;text-align:left;gap:12px}.bline .btotal{justify-self:end;text-align:right;font-size:20px}
  .bsum{padding:14px}}

.parts{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.parts h2{margin:0 0 6px}
.parts .pgrid{margin-top:14px}

.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:22px}
.pager button{min-width:40px;height:40px;padding:0 12px;border:2px solid var(--rule-2);background:var(--bg);font-family:var(--display);font-size:17px;font-weight:700;cursor:pointer;border-radius:4px}
.pager button[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}
.pager .pinfo{margin-left:auto;font-size:14px;color:var(--ink-2)}

.facet .facet-link{display:block;margin-top:8px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}.facet .facet-link:hover{text-decoration:underline}

.offer-note{display:inline-block;margin:4px 12px 4px 0;padding:8px 14px;border:1.5px solid var(--accent);border-radius:12px;background:#fff;font-size:15px;line-height:1.45;max-width:none}
.offer-note b{display:inline;font-family:var(--mono);font-weight:500;color:var(--accent-ink);letter-spacing:.04em;margin-right:4px}
.offer-note a{font-weight:600;margin-left:4px}
.badge.ce{display:inline-flex;align-items:center;gap:4px}.badge.ce img{height:10px;width:auto;display:block}
.ce-note{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--ink-2)}.ce-note img{height:15px;width:auto;flex:none}

/* ---------- range pages, first phone screen (29 Sep 2026): ad visitors on phones left before seeing a product, so the first card's
   photo and price now sit under the H1, the from-price, the quote button, ONE line of ticks and the 2-line intro. Filters, count
   and sort share one row. The CE and offer lines live in the grid (.gnotes): above the cards on wider screens, under the first
   card on a phone, one line each there (a tap opens the rest, the Terms link stays in view). ---------- */
.gnotes{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.gnotes .ce-note,.gnotes .offer-note{margin:0}
.gnotes .ce-note{max-width:none}
/* 'Need a special size?' (19 Oct 2026): hand and electric pallet truck ranges (in .gnotes) and the LPT-15117 buy box, to /custom-pallet-trucks/ */
.size-note{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:14px;color:var(--ink-2);max-width:none}
.size-note svg{width:20px;height:20px;flex:none;color:var(--accent)}
.size-note a{font-weight:600}
.gnotes .size-note{margin:0}
@media (max-width:820px){
  .cat-head{padding-block:8px 0}
  .cat-quote{gap:6px;margin:2px 0 8px}
  .cat-head .trust{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:12.5px;gap:14px;margin:0 0 6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .cat-head .trust::-webkit-scrollbar{display:none}
  .cat-head .trust li{flex:none}
  .cat-head .trust .tm{display:none}
  .cat-head .trust li:has(a[href$="#pre-shipment-report"]){order:1}   /* the longest tick goes last, so all three start on screen */
  .cat-head .quick{margin-bottom:0}
  .shop-cat{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;margin-top:10px}
  .filters-toggle{grid-column:1;grid-row:1;min-height:40px;padding:6px 14px;font-size:16px}
  .listing{display:contents}
  .toolbar{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:8px;padding-bottom:0;border-bottom:0;min-width:0}
  .toolbar .count{white-space:nowrap}
  .sort{font-size:0;gap:0}
  .sort select{font-size:14px;max-width:150px;padding:8px}
  .filters{grid-column:1/-1;grid-row:2}
  .shop-cat .pgrid,.shop-cat .pager,.shop-cat .empty{grid-column:1/-1}
  .shop-cat .pgrid{margin-top:0}
}
@media (max-width:374px){.sort select{max-width:128px}}   /* 360 px phones: 'Filters (1)', 'NN products' and the sort box fit on one row */
@media (max-width:480px){
  .pgrid>.pcard:not([hidden]):not(.pcard:not([hidden])~.pcard){order:-1}
  .pcard .badges{order:2}.pcard .pbtns{order:3}   /* phone cards: the price straight under the name, the spec badges after it */
  .gnotes{display:grid;gap:6px}
  .gnotes .ce-note,.gnotes .offer-note,.gnotes .size-note{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:1.4}
  .gnotes .size-note svg{width:18px;height:18px}
  .gnotes .ce-note{white-space:nowrap;cursor:pointer}
  .gnotes .offer-note{display:block;padding:6px 10px;border-radius:10px}   /* the whole offer, closing date included, always shows */
  .gnotes .ce-note>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .gnotes .offer-note b{margin:0 4px 0 0}
  .gnotes p.open{display:block;white-space:normal}
  body:has(.cat-head) .crumbs{display:none}   /* range pages: the H1 already names the range, 40px more of the first card shows */
  .pcard .pic img{object-position:50% 0}      /* the photo lines up with the top of the card, no empty grey above it */
  .cat-head .trust li:has(a[href$="#pre-shipment-report"]){display:none}   /* never clipped mid-word; product pages and the quote form keep it */
}

/* ---------- quote first (25 Sep 2026): price + 'Get a quote' at the top of the buy box, one proof line, phone quote bar ---------- */
.pquote{display:grid;gap:12px}
.pq-btn{justify-content:center;min-height:52px;font-size:19px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:none}
.trust li{margin:0;max-width:none;display:inline-flex;align-items:center;gap:7px}
.trust li::before{content:"";flex:none;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(-45deg)}
.trust a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.trust a:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.cat-head .trust{margin:0 0 10px}
.linetotal.q{flex:1 1 180px}
.linetotal.q .lt-l{display:none}
.linetotal.q b{font-family:var(--body);font-size:14.5px;font-weight:600;line-height:1.35}
.qbar{display:none}
@media (max-width:900px){
  /* z-index 50, NOT 60: the header (.hdr, z-index 60) is the stacking context of the phone menu and its backdrop, so a bar at 60 or
     more would sit on top of the open menu. Toast (90) and cookie banner (1000) stay above the bar. */
  .qbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--rule);box-shadow:0 -6px 18px rgba(24,33,48,.10);transition:transform .2s ease}
  .qbar .btn{justify-content:center;min-height:48px;font-size:17px;padding-block:10px}
  .qbar .btn.primary{flex:1 1 auto}
  .qbar .qbar-call{flex:0 0 auto;padding-inline:16px}
  .qbar.is-off{transform:translateY(calc(100% + 12px));visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  body.shop-body.has-qbar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .has-qbar .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* the slim header's Call icon repeats the bar's Call button: hide it only while the bar is showing AND the cookie bar is closed
     (browsers without :has() keep both) */
  .has-qbar:has(.qbar:not(.is-off)):has(#ck[hidden]) .hdr .hm-call{display:none}
  body:has(input[type=number]:focus,input[type=search]:focus) .qbar{display:none}
}
/* cookie bar (#ck, z-index 1000, styles in build.py) sits ABOVE the quote bar, never on top of it, so both stay usable before a
   first-time visitor answers it. The bar is 65px + the safe area tall. When the bar slides away (quote button on screen) the
   cookie bar drops back to its usual place; browsers without :has() keep it lifted. */
@media (max-width:900px){
  .has-qbar .ck{bottom:calc(81px + env(safe-area-inset-bottom))}
  .has-qbar:has(.qbar.is-off) .ck{bottom:16px}
}
@media (max-width:900px){body:has(#ck:not([hidden])) .toast{bottom:auto;top:calc(80px + env(safe-area-inset-top))}}   /* the 'Added to your quote' message is never hidden behind an open cookie bar */
@media (max-width:600px){
  .has-qbar .ck{bottom:calc(65px + env(safe-area-inset-bottom));padding-bottom:5px}
  .has-qbar:has(.qbar.is-off) .ck{bottom:0;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.qbar{transition:none}}
@media print{.qbar{display:none}}

/* ---------- 'Get a price by email' (29 Sep 2026): business name, email, quantity. Product pages: under 'Get a quote' in the buy box.
   Range pages: a full-width row of the grid after the first row of cards (shop.js keeps it there). The fields sit side by side once
   the box is wide enough (container queries; older browsers stack them).
   17 Oct 2026: optional phone and delivery postcode after the quantity, and the Companies House line under the privacy line. Narrow
   (a phone): business, email, then quantity | phone, then postcode | button, so it grows by one row. 400px+: two columns, three rows.
   700px+: two rows of three (business | email | quantity, phone | postcode | button).
   22 Oct 2026: the optional 'What do you need?' note (.qp-m, a 2-row textarea, drawn like the inputs) between the phone and the
   postcode. Narrow and 400px+: a full-width row above postcode | button, so the box grows by that one row. 700px+: business | email |
   quantity, phone | the note (two columns), postcode | button (two columns). A box without the note (the general news box) is as before.
   23 Oct 2026: the optional 'How did you find us?' select (.qp-src, no label above it, its first option is the placeholder), drawn like
   the inputs with its own arrow, after the postcode in the page. Narrow and 400px+: a full-width row above postcode | button (order),
   so the box grows by that one row. 700px+: no new row: phone | the note, then postcode | the select | button, in page order (the
   general news box: phone | postcode | the select, then the button under them). ---------- */
.qp{container-type:inline-size;display:grid;gap:6px;margin:0;padding:12px 14px 12px;border:1px solid var(--rule-2);border-radius:4px;background:var(--panel)}
.qp-h{margin:0;max-width:none;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.qp-f{display:grid;grid-template-columns:104px minmax(0,1fr);gap:6px 10px;align-items:end}
.qp-f label{display:grid;gap:2px;min-width:0;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.qp-b,.qp-e{grid-column:1/-1}
.qp-f select,.qp-f input,.qp-f textarea{width:100%;min-width:0;font:inherit;font-size:16px;line-height:1.3;padding:9px 10px;border:1px solid var(--rule-2);border-radius:4px;background:var(--bg);color:var(--ink)}
.qp-m{grid-column:1/-1}.qp-m textarea{display:block;resize:vertical;min-height:62px;max-height:240px}
.qp-src{grid-column:1/-1}.qp-pc,.qp-btn{order:1}
.qp-src select{display:block;-webkit-appearance:none;appearance:none;padding-right:26px;text-overflow:ellipsis;cursor:pointer;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237b8592' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 10px center}
.qp-src select:has(option[value=""]:checked){color:var(--ink-3)}
.qp-src option{color:var(--ink)}
.qp-btn{justify-content:center;min-height:42px;padding-inline:12px;background:var(--ink);border-color:var(--ink);color:#fff;white-space:nowrap}
.qp-btn:hover{background:#000;border-color:#000}
.qp-btn:disabled{opacity:.6;cursor:progress}
.qp .hp{position:absolute;left:-9999px}
.qp-msg{margin:0;max-width:none;font-size:13px;color:var(--ink-2)}
.qp-pv{margin:0;max-width:none;font-size:12px;color:var(--ink-3)}.qp-pv a{color:inherit}
.qp-f label small{font-size:inherit;font-weight:400}.qp-f label>span{text-wrap:balance}
.qp-pc input{text-transform:uppercase}.qp-pc input::placeholder{text-transform:none}
.qp-co{margin:0;max-width:none;font-size:12px;color:var(--ink-3)}.qp-co a{color:inherit}
.qp{scroll-margin-top:150px}   /* 'Ask us for a price' jumps here: clear of the sticky header */
/* the short box (11 Nov 2026): the note and the email, or on a product page the email and an optional note, one under the other */
.qp[data-short] .qp-f>*{grid-column:1/-1}
.qp[data-short] .qp-btn{min-height:46px}
/* a product page's short box: the email and the button on one row, the optional note under them; stacked in a narrow box */
.qp[data-short="email"] .qp-f{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
.qp[data-short="email"] .qp-f>.qp-e{grid-column:1}
.qp[data-short="email"] .qp-f>.qp-btn{grid-column:2;order:0;padding-inline:18px}
.qp[data-short="email"] .qp-f>.qp-m{grid-column:1/-1}
.qp[data-short="email"] .qp-f label{font-size:13.5px}
.qp[data-short="email"] .qp-f input{min-height:46px}
@container (max-width:399px){.qp[data-short="email"] .qp-f{grid-template-columns:minmax(0,1fr)}.qp[data-short="email"] .qp-f>.qp-btn{grid-column:1}}
/* 'more details' on /quote-received/ after a short box: four optional boxes, two by two, and one button */
.qr-more{max-width:560px;margin:22px 0 10px;padding:16px 18px;border:2px solid var(--ink);border-radius:8px;background:#fff;scroll-margin-top:0}
.qr-more[hidden]{display:none}
.qr-more h2{margin:0 0 4px;font-size:24px;line-height:1.1}
.qr-more h2 small{font-family:var(--body,system-ui,sans-serif);font-size:15px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.qr-more .qp-f{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.qr-more .qp-f label{font-size:14px;font-weight:600;color:var(--ink)}
.qr-more .qp-f input{min-height:46px}
.qr-more .qp-pc{order:0}
.qr-more .qp-btn{grid-column:1/-1;min-height:48px;background:var(--accent);border-color:var(--accent);color:#fff}
.qr-more .qp-btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.qr-more .qp-msg{font-size:14px;font-weight:600;color:var(--accent-ink)}
.qr-done{margin:0;max-width:none;font-weight:600}
body:has(#quote-more:not([hidden])) .wa-float{display:none}   /* the floating 'Contact us' would sit on the boxes of a phone */
@media (max-width:520px){.qr-more .qp-f{grid-template-columns:minmax(0,1fr)}}
@container (min-width:400px){.qp-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.qp-b,.qp-e{grid-column:auto}}
@container (min-width:700px){.qp-f{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr)}.qp-m,.qp-m~.qp-btn{grid-column:span 2}}
@container (min-width:700px){.qp-src,.qp-m~.qp-src~.qp-btn{grid-column:auto}.qp-pc,.qp-btn{order:0}.qp-tel+.qp-pc~.qp-btn{grid-column:-2/-1}}
.pgrid>.qp{grid-column:1/-1;align-self:start}
/* ---------- 28 Oct 2026: mobile yard ramp key sizes under the name (.rsizes), the in-use photo note under the gallery (.gnote), and the
   price box's forklift and bed height fields (.qp-rl, .qp-rb: one row of two after the note, as wide as the phone and postcode) ---------- */
.rsizes{margin:10px 0 12px}
.rsizes table{width:100%;border-collapse:collapse;font-size:13.5px}
.rsizes th,.rsizes td{padding:6px 8px;border-bottom:1px solid var(--rule);text-align:left;font-variant-numeric:tabular-nums}
.rsizes thead th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule-2)}
.rsizes tbody th{font-weight:700;color:var(--ink)}
.rsizes p{margin:6px 0 0;max-width:none;font-size:12.5px;color:var(--ink-2)}
.gnote{margin:8px 0 0;max-width:none;font-size:12.5px;color:var(--ink-3)}
@container (min-width:700px){.qp-rl,.qp-rb{grid-column:auto}}

@media (max-width:900px){body:has(.qp input:focus,.qp textarea:focus) .qbar{display:none}}   /* the phone keyboard is up: the quote bar would sit on the field */

/* ---------- range pages on phones and tablets (2 Oct 2026, plan step 24): the header starts as the slim bar (Menu, logo, Call,
   quote list; 59px) that other pages slide in on scroll, in place of the 171px full header, so the H1, price and first card sit
   about 110px higher. Search moves into the Menu drawer. Wider screens keep the full header. ---------- */
@media (max-width:1023px){
  .range-page .hdr{padding-top:59px}
  .range-page .hdr .hdr-top{display:none}
  .range-page .hdr .hdr-mini{transform:none;visibility:visible;transition:none}
}

/* ---------- spare parts (3 Oct 2026, wave 1): our own dimension drawings (inline SVG, catalogue/parts_drawing.py), the bulk price
   line, the part page sections (about, spec, drawing, machines it fits), and the 'Spare parts for this model' list on machine pages.
   A part whose photos are not on the media host yet shows its drawing on the card and in the gallery (.ph.dwg). ---------- */
.pdraw{display:block;width:100%;height:auto;max-width:100%}
.pdraw text{font-family:var(--mono)}
/* the pump drawing stacks its schematic above its table (3 Oct 2026 recheck, text readable on a phone): capped on a computer */
.pdraw-tall{max-width:400px;margin-left:auto;margin-right:auto}
/* the drawing beside "About this part" on a computer: its larger phone text would read at 20 px or more at full column width */
@media (min-width:901px){.part-draw .dwg-fig .pdraw{max-width:460px;margin-left:auto;margin-right:auto}.part-draw .dwg-fig .pdraw-tall{max-width:380px}}
.ph.dwg{background:var(--bg);padding:6%}
.pcard .pic .ph.dwg{padding:5%}
/* the gallery stage with a drawing in it (.is-dwg, set by the build) takes the drawing's own height: no square with empty bands above
   and below it on a phone (3 Oct 2026 review). Static, so no layout shift; a stage with photos stays square. */
.stage.is-dwg{aspect-ratio:auto}
.stage.is-dwg .slide{position:relative}
.stage.is-dwg .ph.dwg{height:auto;padding:4%}
/* the compact drawing on cards (views and size only) fills the square picture box */
.ph.dwg .pdraw-c{width:100%;height:100%;max-height:100%}
.pbulk{margin:-4px 0 0;font-size:14.5px;color:var(--ink-2)}
.pbulk::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:8px;vertical-align:1px}
.part-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin-top:44px;padding-top:24px;border-top:2px solid var(--ink)}
.part-info h2,.part-fits h2{font-size:26px;margin:0 0 10px}
.part-about p{max-width:68ch}
.part-about .spec{margin-top:16px}
.part-draw .dwg-fig{margin:0;border:1px solid var(--rule);background:var(--bg);padding:10px}
.part-draw .check{font-size:14.5px;margin-top:12px;padding:10px 12px;background:var(--panel);border-left:3px solid var(--accent);max-width:none}
.part-fits{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.part-fits h3{font-size:19px;margin-top:22px}
.part-fits .muted{font-size:14.5px;margin:4px 0 0}
.fits{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 22px}
.fits li{font-size:15px;line-height:1.35;padding:6px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere;min-width:0}
.fits .fr{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.fits-more{font-size:14.5px;margin:10px 0 0}
/* a long fit list on a phone: 6 names, then "Show all" (shop.js opens it); 3 Oct 2026 recheck */
.fits-all{display:none;margin:8px 0 0;font-size:14.5px}
@media (max-width:600px){.fits.long:not(.open) li.more{display:none}.fits.long:not(.open)+.fits-all{display:inline-block}}
.parts-more{margin:14px 0 0;font-weight:600}
.mparts{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.mparts h2{font-size:24px;margin:0 0 12px}
.mp-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.mp-list a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--rule);text-decoration:none;color:var(--ink);background:var(--bg);min-width:0}
.mp-list li{display:flex}
.mp-list a{flex:1}
.mp-list a:hover{border-color:var(--ink)}
.mp-pic{width:56px;height:56px;display:grid;place-items:center;background:var(--panel)}
.mp-pic img{width:56px;height:56px;object-fit:contain;mix-blend-mode:multiply}
.mp-pic svg{width:32px;height:32px}
.mp-t b{display:block;font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.mp-t small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.mp-all{font-size:14.5px;margin:12px 0 0}
@media (max-width:900px){.part-info{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:600px){.part-info{margin-top:32px}.fits{grid-template-columns:minmax(0,1fr)}.mp-list{grid-template-columns:minmax(0,1fr)}
  /* a machine range page lists 4 part cards on a phone, not 8 (the 'All 12 spare parts' link stays under them) */
  .parts .pgrid>.pcard:nth-child(n+5){display:none}}
/* 4 Oct 2026 parts fixes: the machine page parts block lists up to 12 parts, 6 showing until "Show all N parts" (shop.js opens it) */
.mp-list.long:not(.open) li.more{display:none}
.mp-list.long:not(.open)+.fits-all{display:inline-block;margin-top:10px}
/* a check first part: one line under its price, to what to send (#check); the check box says where to email photos */
.pcheck{margin:2px 0 0;font-size:14.5px;color:var(--ink-2)}
.pcheck::before{content:"";display:inline-block;width:7px;height:7px;border:2px solid var(--accent);box-sizing:border-box;margin-right:8px;vertical-align:1px}
.check-mail{font-size:14.5px;margin:10px 0 0}
.bline .bcheck{font-size:13px;color:var(--ink-2);margin-top:4px;max-width:46em}
/* /shop/spare-parts/: part type chips above the toolbar (a ?style= link each); one scrolling row on a phone */
.ptype-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;min-width:0}
.ptype-chips a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
.ptype-chips a:hover{border-color:var(--ink)}
.ptype-chips a[aria-current]{border-color:var(--ink);font-weight:600}
.ptype-chips span{color:var(--ink-2);font-size:13px;font-weight:400}
@media (max-width:820px){
  .ptype-chips{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0;padding-bottom:2px}
  .ptype-chips::-webkit-scrollbar{display:none}
  .ptype-chips a{flex:none}
  .shop-cat:has(>.listing>.ptype-chips) .filters{grid-row:3}
}
/* batch 5 fixes: on a computer the sidebar's 'Part type' boxes already list the types with counts; the chips wrapped to 3 rows */
@media (min-width:821px){.ptype-chips{display:none}}
/* filter panel: a 44 x 32 px 'Clear' target; counts of 0 greyed; on a phone a sticky 'Show N parts' button closes the open panel */
.filters .linkbtn{min-width:44px;min-height:32px}
.facet label.zero{color:var(--ink-3)}
.fshow{display:none}
@media (max-width:820px){
  .filters.open .fshow{display:block;position:sticky;bottom:8px;width:100%;min-height:48px;margin-top:8px;font-size:17px;z-index:2}
}
/* a fit list line with several machines of one name: the refs wrap, each ref stays whole */
.fits .fr{white-space:normal}
.fits .fr a{white-space:nowrap;color:inherit}
/* /shop/?q= results: the products that match only some of the words follow this line */
.pgrid>.rmore{grid-column:1/-1;margin:10px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-weight:600;color:var(--ink-2)}
.pgrid>.rask{border-top:0;margin-top:0;padding-top:0}