/* ============================================================
   SERVER-RENDERED STOREFRONT LAYER (Laravel /new pages)
   gt.css and gt-pages.css are the approved prototype styles, kept as copied.
   This file only adds what server rendering needs: classes for the few
   inline styles the prototype used, link-based pager/view toggle, keyboard
   and touch access, and the small states the prototype did not have.
   Same tokens, same motion, no new colours.
   ============================================================ */

/* ---------- access ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--blue);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-weight:600;transition:top var(--t)}
.skip:focus{top:10px}
main:focus{outline:0}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.inp:focus-visible,summary:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
.card:focus-within{border-color:var(--blue)}
.js .nojs{display:none}

/* ---------- mega menu: the prototype set column counts inline ---------- */
.mega.c1{grid-template-columns:repeat(1,minmax(170px,1fr));min-width:220px}
.mega.c2{grid-template-columns:repeat(2,minmax(170px,1fr));min-width:440px}
.mega.c3{grid-template-columns:repeat(3,minmax(170px,1fr));min-width:660px}
.mega.c4{grid-template-columns:repeat(4,minmax(170px,1fr));min-width:880px}
.mega-feat.s1{grid-column:span 1}.mega-feat.s2{grid-column:span 2}.mega-feat.s3{grid-column:span 3}.mega-feat.s4{grid-column:span 4}
.mega-feat .btn{margin-left:auto}
.mega-feat>svg{flex-shrink:0;color:var(--blue)}
/* keyboard users open the menu by tabbing into it */
.navitem:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.navitem:focus-within .navlink{color:var(--blue);border-bottom-color:var(--blue);background:var(--blue-50)}
@media (max-width:1100px){
  .mega.c4{min-width:660px;grid-template-columns:repeat(3,minmax(170px,1fr))}
  .mega-feat.s4{grid-column:span 3}
}
@media (max-width:860px){.navitem:focus-within .mega{display:none}}

/* ---------- utility bar: the page editor's announcement (up to 200 characters, one line) ---------- */
.util .ann{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.util .ann a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.util .wrap>.ann{flex-shrink:1}}

/* ---------- header account states ---------- */
.acct-pill.pending{color:var(--amber-ink)}
.acct-pill.pending::before{background:var(--amber)}
.acct-pill.off{color:var(--ink-3)}
.acct-pill.off::before{background:var(--ink-3)}

/* ---------- sections ---------- */
section.pt0{padding-top:0}
.band .kicker{color:#7FB3EA}
/* spare parts band: the photo plate is light, so the prototype's translucent badge tints washed out
   (about 1.5:1). Solid chips from the dark palette keep the band look and read at 4.5:1 or better. */
.band .card .thumb .badge.stock{background:#0F2A1E;color:#5FD39B}
.band .card .thumb .badge.low{background:#2A1F0B;color:#F0B65C}

/* ---------- cards ---------- */
.price b.req{font-size:15px}
.buybox .price b.req{font-size:26px}
.price .save{color:var(--green-ink);font-weight:600}
.gate-pending svg{color:var(--amber)}
.card .foot .addform{margin-left:auto;position:relative;z-index:3}
.card .foot .addform .btn{margin-left:0}
.line .addform{position:relative;z-index:2}
/* the heart is always reachable: touch screens have no hover, keyboards focus it */
.wish:focus-visible{opacity:1;transform:none}
@media (hover:none){.card .wish{opacity:1;transform:none}}
a.wish{color:var(--ink-3)}
.brand img{max-height:38px;max-width:120px;object-fit:contain;background:#fff;border-radius:5px;padding:3px 6px}

/* ---------- search suggestions ---------- */
.sugg .none a.xref{display:inline;padding:0;border:0;color:var(--blue);font-weight:600}
.sugg .none a.xref:hover{background:none;text-decoration:underline}

/* ---------- listing ---------- */
.fnote{margin:0 0 10px;font-size:13px;color:var(--ink-2)}
.fbox .in .btn + .btn{margin-top:6px}
.pricehead{margin:10px 0 6px;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2)}
.fbox .nojs{margin-top:8px;justify-self:start}
.sortform{display:flex;align-items:center;gap:8px}
.sortform label{font-size:13px}
/* select.js keeps the width the select had: leave room for the longest label */
.toolbar .sortform select.inp{min-width:178px}
.seg a{height:33px;width:36px;display:grid;place-items:center;color:var(--ink-3);transition:background var(--t),color var(--t)}
.seg a:hover{color:var(--blue)}
.seg a[aria-current="true"]{background:var(--blue);color:#fff}
.chip a{color:inherit;opacity:.7;font-size:15px;line-height:1;padding:0 2px}
.chip a:hover{opacity:1}
.pager a,.pager span{min-width:38px;height:38px;padding:0 10px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-weight:600;font-size:13.5px;color:var(--ink-2);background:var(--canvas);display:inline-grid;place-items:center;transition:border-color var(--t),color var(--t)}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager a[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pager span.off{opacity:.4}
.results{min-width:0}

/* ---------- product ---------- */
.buybox form.row{margin:0}
.buybox .actions{gap:8px}
.buybox .actions .btn{flex:0 0 auto;min-width:0}
.savebtn.on{color:var(--red)}
.lowline{margin:0;font-size:13px;color:var(--amber-ink);font-weight:600}
.relsec{padding:40px 0 56px}
.pd-main[role="button"]:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px}
.pd-thumbs button[hidden]{display:none}

/* ---------- brands page (the prototype kept these in a page style block) ---------- */
.brandcard{align-content:start}
.br-logo{height:56px;display:flex!important;align-items:center;margin-bottom:4px}
.br-logo img{max-height:52px;max-width:160px;object-fit:contain;background:#fff;border-radius:6px;padding:4px 8px}
.brandcard span.br-cats{font-family:Inter,sans-serif;font-size:12.5px;color:var(--ink-2)}

/* ---------- footer ---------- */
.fblurb{margin:0 0 16px;font-size:13.5px;line-height:1.6;max-width:36ch}
.fcount{margin-left:auto;opacity:.7}

/* ---------- contact page ---------- */
.cinfo .clink,.pagehead .clink{color:var(--blue);font-weight:600}
.cinfo .clink:hover,.pagehead .clink:hover{text-decoration:underline}
.cinfo .caddr{overflow-wrap:anywhere}
.cmap{width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cmaplink{justify-self:start}
.cpanel{margin:0;align-self:start}
.field .opt{font-weight:400;color:var(--ink-3)}
.field .ferr{font-size:12.5px;font-weight:600;color:var(--red-ink)}
.inp[aria-invalid="true"]{border-color:var(--red)}
.formerr{margin:0 0 14px;padding:10px 12px;border:1px solid var(--red);border-radius:var(--r-sm);color:var(--red-ink);font-size:13.5px;font-weight:600}
.cnote{margin:0;text-align:center}
/* honeypot: off screen for people, still in the form for bots */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- not found ---------- */
.nf{padding:60px 0 40px}
.nf-title{margin:0 0 6px;color:var(--ink);font-size:22px}
.nf-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.nf-actions .btn{margin-top:10px}

/* ============================================================
   REBUILD 2026-10-12: performance. Inter loads with font-display:swap,
   so text first paints in a system font. This fallback is Arial resized
   to Inter's metrics, so the swap does not move the header or the page
   (measured: up to 0.085 layout shift on a first visit came from it).
   ============================================================ */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
body{font-family:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* thumbnails come wrapped in <picture> (WebP source + JPEG img): the wrapper takes no box of its own,
   so the img keeps the exact layout the prototype styles give it (absolute plate, grid cell, button fill) */
.card .thumb picture,.pd-main picture,.pd-thumbs picture,.line picture,.sugg picture,.flogo picture{display:contents}

/* ---------- Global Tech category icons (sprite, App\Support\CategoryIcons; coloured by currentColor) ---------- */
.disc .ic .gt-icon{width:21px;height:21px}
.catcard .ic .gt-icon{width:19px;height:19px}
/* the category icon sits between the kicker and the h1 (outside the heading: the h1 stays the plain name) */
.pagehead .pagehead-ic{display:block;width:30px;height:30px;margin:8px 0 6px;color:var(--blue)}
/* filter links: icon, label, count on the right (the count used to be pushed right by space-between) */
.side .flink{justify-content:flex-start;align-items:center}
.side .flink em{margin-left:auto}
.side .flink .gt-icon{width:16px;height:16px;flex-shrink:0;color:var(--ink-3);transition:color var(--t)}
.side .flink:hover .gt-icon,.side .flink.on .gt-icon{color:inherit}

/* ---------- QA #17 (12 Oct): touch screens and phones ---------- */
/* tap targets at least 24 px high (WCAG 2.5.8): the card's "Sign in" link was 41 x 15, breadcrumbs 19 px */
@media (pointer:coarse),(max-width:560px){
  .gate a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
  .crumbs a,.crumbs span[aria-current]{display:inline-flex;align-items:center;min-height:24px}
}
/* the "/" shortcut hint only means something with a keyboard */
@media (hover:none),(pointer:coarse),(max-width:560px){
  .search kbd{display:none}
}
/* the scrolling category strips (menu row, sub-category pills) fade at the right edge, so it shows there is more */
@media (max-width:860px){
  .navrow,.subpills{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);padding-right:32px}
}

/* ---------- QA 15 Oct (REBUILD 2026-10-15) ---------- */
/* #3 product buy box on a phone: "Sign in for trade price" was clipped and "Apply for an account" overflowed its
   button (.buybox .row .btn keeps buttons on one line, nowrap). They stack full width and may wrap their words. */
@media (max-width:560px){
  .gatebox .row{flex-direction:column;align-items:stretch}
  .gatebox .row .btn,.buybox .row .btn{width:100%;flex:1 1 auto;white-space:normal;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;text-align:center;line-height:1.25}
}
/* #22 tap targets at least 24 px on touch screens and phones: card names (16 px), footer links and the
   product's brand link (19 px) */
@media (pointer:coarse),(max-width:560px){
  .card h3 a{display:inline-block;padding:4px 0;min-height:24px}
  footer li a,.flegal a{display:inline-flex;align-items:center;min-height:24px}
  .pd-meta a{display:inline-flex;align-items:center;min-height:24px}
}
/* #26 dark theme: a missing photo is a dark tile with light text, not a white box (cart, rows, suggestions, cards) */
:root[data-theme="dark"] .noimg{background:var(--surface-2)}
:root[data-theme="dark"] .card .thumb:has(> .ph),:root[data-theme="dark"] .pd-main:has(> .ph){background:var(--surface-2)}
:root[data-theme="dark"] .card .thumb .ph,:root[data-theme="dark"] .pd-main .ph{color:var(--ink-3)}
/* #12 legal links in the footer's bottom line; a page still being written reads quieter */
.flegal{display:flex;gap:14px;flex-wrap:wrap}
.flegal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.flegal a:hover{color:#fff}
.flegal a.soon{text-decoration-style:dotted}

/* ---------- listings on a phone: filters fold behind a button (storefront.js wireFilterToggle) ---------- */
.ftoggle{display:none;align-items:center;gap:8px}
.fcount-on{font:700 11px/1 "JetBrains Mono",monospace;font-style:normal;background:var(--ink);color:var(--canvas);border-radius:var(--r-pill);padding:3px 7px}
.side:focus{outline:0}
/* keyed on .js (set by theme.js in the head, before first paint), not on a class storefront.js adds later:
   folding after the first paint moved the whole product grid (layout shift 0.15 to 0.23 on a slow phone load).
   Without JavaScript there is no .js class: no button, the panel stays open. */
@media (max-width:860px){
  .js .ftoggle{display:inline-flex;margin:0 0 14px}
  .js .plp>.side:not(.open){display:none}
}

/* ============================================================
   REBUILD 2026-10-12: accessibility pass (WCAG 2.1 AA)
   Contrast measured for every token against the backgrounds it is
   used on, both themes; each fix is the smallest change that passes.
   ============================================================ */
/* visually hidden, still read by screen readers (section headings that keep the heading order) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* filter box titles became h3 (were h4): the same look */
.fbox h3{margin:0;padding:13px 14px;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);background:var(--surface)}

/* small grey text (SKU, category line, crumbs, counts): #7C8BA0 was 3.5:1 on white, 3.0:1 on blue-50.
   #5F6E84 is 4.5:1 or better on every light background. The dark theme value already passes (5.5:1). */
:root{--ink-3:#5F6E84}
/* the spare parts band keeps the lighter grey: on its dark cards the darker one would fail (4.9:1 as is) */
.band .card .cat,.band .card .sku,.band .price small,.band .price .was{color:#7C8BA0}
/* "Sign in for trade price" link and hovered titles on the band: the band's own light blue (6.4:1) */
.band .gate a,.band .card:hover h3,.band .card:hover h3 a{color:#74A2CE}
.band .price .yours{color:#5FD39B}
/* "no photo" placeholder on the light photo plate (both themes): was 3.2:1 / 3.0:1 */
.card .thumb .ph,.pd-main .ph{color:#5F6D82}
/* dark theme status text (stock dots, account pill) and the saved heart: were 3.5:1, 3.75:1, 2.9:1 */
:root[data-theme="dark"]{--green:#158D56;--amber:#AC6E00;--red:#B82418}
/* hero trade-axis tiles on the blue glow */
.disc span{color:#91A7BE}
.disc .go{color:#6888A7}
/* placeholders: the browser default was 3.9:1 in Firefox */
.inp::placeholder,.search input::placeholder{color:var(--ink-3);opacity:1}

/* focus always visible: the quantity box removed the outline of its input with nothing in its place */
.qty:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.qty input:focus-visible{outline:2px solid var(--blue-400);outline-offset:-2px}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
.pd-thumbs button:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}

/* ---------- phones ---------- */
@media (max-width:560px){
  .card .foot .addform{margin-left:0;width:100%}
  .card .foot .addform .btn{width:100%}
  .sortform label{display:none}
  .fcount{margin-left:0}
}