/* ============================================================
   GLOBAL TECH design tokens
   White + blue is the product. Blue-black is punctuation.
   ============================================================ */
:root{
  --canvas:#FFFFFF;
  --surface:#F5F7FA;
  --surface-2:#EDF1F6;
  --ink:#0D1520;
  --ink-2:#47576B;
  --ink-3:#7C8BA0;
  --line:#DDE4EC;
  --blue:#0F5EAB;
  --blue-700:#0B4880;
  --blue-400:#3B86D6;
  --blue-50:#EAF2FB;
  --dark:#0A1018;
  --dark-2:#111B28;
  --dark-line:#1E2A3A;
  --green:#12794A;
  --green-bg:#E7F5EE;
  --amber:#9A6200;
  --amber-bg:#FDF3E2;
  --red:#B42318;
  /* text on a tint (badges, "your price"): same as the base colour in light, lifted in dark */
  --green-ink:#12794A;
  --amber-ink:#8A5800;
  --blue-ink:#0F5EAB;
  --red-ink:#B42318;
  --tint-ring:transparent;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(13,21,32,.06), 0 1px 3px rgba(13,21,32,.04);
  --sh-2:0 4px 12px rgba(13,21,32,.08), 0 2px 4px rgba(13,21,32,.04);
  --sh-3:0 12px 32px rgba(13,21,32,.12);
  /* mechanical easing: fast out, damped settle - like a fader */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t:.22s var(--ease);
}
:root[data-theme="dark"]{
  --canvas:#0A1018;
  --surface:#111B28;
  --surface-2:#16212F;
  --ink:#E8EEF5;
  --ink-2:#9FB0C4;
  --ink-3:#7C8BA0;
  --line:#1E2A3A;
  --blue:#3B86D6;
  --blue-700:#5B9FE3;
  --blue-50:#132234;
  --dark:#060A10;
  --dark-2:#0D1520;
  --dark-line:#1E2A3A;
  --green-bg:#0F2A1E;
  --amber-bg:#2A1F0B;
  --green-ink:#5FD39B;
  --amber-ink:#F0B65C;
  --blue-ink:#8CC0F0;
  --red-ink:#F2958C;
  --tint-ring:rgba(255,255,255,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px rgba(0,0,0,.45);
  --sh-3:0 12px 32px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas); color:var(--ink);
  font:400 15px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease), color .3s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-ligatures:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:var(--r-sm);
  font-weight:600;font-size:14.5px;letter-spacing:.1px;
  transition:background var(--t),color var(--t),border-color var(--t),transform .12s var(--ease),box-shadow var(--t);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--blue-700);box-shadow:var(--sh-2)}
.btn-secondary{background:var(--canvas);color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.btn-ghost{color:var(--ink-2);padding:0 12px}
.btn-ghost:hover{color:var(--blue);background:var(--blue-50)}
.btn-dark{background:#fff;color:var(--dark)}
.btn-dark:hover{background:var(--blue);color:#fff}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px}
.btn-icon{width:44px;padding:0}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- utility bar ---------- */
.util{background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.util .wrap{display:flex;align-items:center;gap:20px;height:38px}
.util a:hover{color:var(--blue)}
.util .sp{margin-left:auto}
.dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--canvas);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:28px;height:78px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo svg{width:38px;height:38px}
.logo b{font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1}
.logo span{display:block;font-size:9.5px;font-weight:600;letter-spacing:4.6px;color:var(--blue);margin-top:2px}

/* search: the most important control on the site */
.search{flex:1;position:relative;max-width:640px}
.search input{
  width:100%;height:48px;padding:0 48px 0 44px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:14.5px;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{
  outline:0;border-color:var(--blue);background:var(--canvas);
  box-shadow:0 0 0 4px var(--blue-50);
}
.search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.search kbd{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:500 11px/1 "JetBrains Mono",monospace;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:4px 6px;background:var(--canvas);
}
.head-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.iconbtn{
  display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;font-weight:500;
  transition:background var(--t),color var(--t);
}
.iconbtn:hover{background:var(--surface);color:var(--blue)}
.iconbtn small{display:block;font-size:11px;color:var(--ink-3);line-height:1.2}
.iconbtn strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}
.cart-count{
  background:var(--blue);color:#fff;font:700 11px/1 Inter;border-radius:var(--r-pill);
  padding:3px 6px;margin-left:-4px;
}

/* ---------- nav + mega menu ---------- */
/* REBUILD 2026-10-16 (QA: footer legal links 1.95:1): this was a bare `nav` rule, so every <nav> got the menu bar's
   white strip, including the footer's legal links (pale footer text on white in light mode). The strip now belongs to
   the header's menu bar (header nav). The navs inside a page's content (main: breadcrumbs, pagers, tabs, filter chips)
   and the quotation's version strip (.qrevs, outside main) keep exactly what they had; the footer's and the back
   office sidebar's navs take their own colours. Was:
nav{background:var(--canvas);border-top:1px solid var(--line)} */
header nav,main nav,nav.qrevs{background:var(--canvas);border-top:1px solid var(--line)}
.navrow{display:flex;align-items:stretch;gap:2px;height:52px}
.navitem{position:relative;display:flex;align-items:center}
.navlink{
  display:flex;align-items:center;gap:7px;height:100%;padding:0 16px;
  font-size:14px;font-weight:600;color:var(--ink);
  border-bottom:2.5px solid transparent;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.navlink:hover,.navitem:hover .navlink{color:var(--blue);border-bottom-color:var(--blue);background:var(--blue-50)}
.navlink .chev{transition:transform var(--t)}
.navitem:hover .chev{transform:rotate(180deg)}
.navlink.hot{color:var(--blue)}

.mega{
  position:absolute;top:100%;left:0;
  background:var(--canvas);border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-3);padding:28px;
  display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:28px 32px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:70;min-width:880px;
}
.navitem:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega.right{left:auto;right:0}
.mega h4{
  margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:8px;
}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega li a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:6px 8px;margin-left:-8px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--ink-2);
  transition:background var(--t),color var(--t),padding-left var(--t);
}
.mega li a:hover{background:var(--surface);color:var(--blue);padding-left:12px}
.mega li a em{font-style:normal;font-size:11px;color:var(--ink-3);font-family:"JetBrains Mono",monospace}
.mega-feat{
  grid-column:span 4;display:flex;align-items:center;gap:16px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:2px;
}
.mega-feat p{margin:0;font-size:13px;color:var(--ink-2)}
.mega-feat strong{color:var(--ink)}

/* ---------- hero (dark punctuation) ---------- */
.hero{background:var(--dark);color:#E8EEF5;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 380px at 78% -10%, rgba(59,134,214,.30), transparent 65%),
    radial-gradient(600px 320px at 8% 110%, rgba(15,94,171,.22), transparent 60%);
}
/* faint "rack rail" texture - nods to flightcases without being literal */
.hero::after{
  content:"";position:absolute;inset:0;opacity:.30;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px);
}
.hero .wrap{position:relative;z-index:2;padding:76px 24px 84px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:600 11.5px/1 "JetBrains Mono",monospace;letter-spacing:1.6px;text-transform:uppercase;
  color:#7FB3EA;border:1px solid rgba(127,179,234,.3);border-radius:var(--r-pill);
  padding:8px 14px;background:rgba(59,134,214,.09);margin-bottom:22px;
}
.hero h1{
  margin:0 0 18px;font-size:clamp(34px,4.3vw,56px);line-height:1.04;
  font-weight:800;letter-spacing:-1.6px;
}
.hero h1 i{font-style:normal;color:#5FA3E4}
.hero p.lede{margin:0 0 30px;font-size:17px;line-height:1.6;color:#A8BCD2;max-width:50ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--dark-line);padding-top:24px}
.hero-stats div b{display:block;font:800 26px/1 Inter;letter-spacing:-.6px}
.hero-stats div span{font-size:12.5px;color:#8FA5BD}

/* discipline cards in hero */
.disc{display:grid;gap:10px}
.disc a{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:rgba(255,255,255,.045);border:1px solid var(--dark-line);border-radius:var(--r);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.disc a:hover{background:rgba(59,134,214,.14);border-color:#3B86D6;transform:translateX(5px)}
.disc .ic{
  width:42px;height:42px;flex:0 0 42px;border-radius:9px;display:grid;place-items:center;
  background:rgba(59,134,214,.16);color:#7FB3EA;
}
.disc b{display:block;font-size:14.5px;font-weight:600}
.disc span{font-size:12px;color:#8FA5BD;font-family:"JetBrains Mono",monospace}
.disc .go{margin-left:auto;color:#5A7A9A}

/* ---------- sections ---------- */
/* REBUILD 2026-10-26 (back office card padding): the storefront's page bands only. The back office shell
   (resources/views/b2b/layout.blade.php, <body class="adm">) loads this file for its tokens and base styles, and this
   rule padded every back office card (<section class="a-card">) by 64px. :where() adds no specificity, so the
   storefront's own section rules (.pt0, .psmall, .panel and the rest) win exactly as before. Was:
section{padding:64px 0} */
:where(body:not(.adm)) section{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:26px}
.sec-head h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.7px}
.sec-head p{margin:5px 0 0;color:var(--ink-2);font-size:14.5px}
.sec-head .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.kicker{
  font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--blue);margin-bottom:9px;display:block;
}

/* ---------- carousel ---------- */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 18px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail>*{scroll-snap-align:start}

/* ---------- product card ---------- */
.card{
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-3px)}
.card .thumb{
  aspect-ratio:4/3;background:var(--surface);position:relative;
  display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line);
}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s var(--ease)}
.card:hover .thumb img{transform:scale(1.05)}
.ph{color:var(--ink-3);display:grid;place-items:center;gap:8px;font-size:11px;font-family:"JetBrains Mono",monospace}
.badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.badge{
  font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.6px;text-transform:uppercase;
  /* colour flips with the theme so the badge never goes light-on-light */
  padding:5px 8px;border-radius:4px;background:var(--ink);color:var(--canvas);
}
/* tinted badges: the ring keeps the chip's edge visible on dark thumbs (transparent in light) */
.badge.stock{background:var(--green-bg);color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--tint-ring)}
.badge.low{background:var(--amber-bg);color:var(--amber-ink);box-shadow:inset 0 0 0 1px var(--tint-ring)}
.badge.oem{background:var(--blue-50);color:var(--blue-ink);box-shadow:inset 0 0 0 1px var(--tint-ring)}
.wish{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-3);opacity:0;transform:translateY(-4px);
  transition:opacity var(--t),transform var(--t),color var(--t),border-color var(--t);z-index:2;
}
.card:hover .wish{opacity:1;transform:translateY(0)}
.wish:hover{color:var(--blue);border-color:var(--blue)}
.card .body{padding:14px;display:flex;flex-direction:column;flex:1;gap:9px}
.cat{font:600 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-3)}
.card h3{
  margin:0;font-size:14.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card:hover h3{color:var(--blue)}
/* specs are first-class content, not buried in the name */
.specs{display:flex;flex-wrap:wrap;gap:5px}
.spec{
  font:500 11px/1 "JetBrains Mono",monospace;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  padding:4px 7px;border-radius:4px;
}
.sku{font:400 11px/1 "JetBrains Mono",monospace;color:var(--ink-3)}
.card .foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.price b{font-size:18px;font-weight:800;letter-spacing:-.4px;display:block;line-height:1.15}
.price small{font-size:11px;color:var(--ink-3)}
.price .yours{color:var(--green-ink);font:600 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.5px;text-transform:uppercase}
.price .was{font-size:12px;color:var(--ink-3);text-decoration:line-through}
/* the login gate - a real invitation, not a grey box */
.gate{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:12.5px;line-height:1.3}
.gate svg{color:var(--blue);flex-shrink:0}
.gate a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.card .foot .btn{margin-left:auto}

/* ---------- spare parts band (dark punctuation) ---------- */
.band{background:var(--dark);color:#E8EEF5;position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px 300px at 82% 0%, rgba(59,134,214,.20), transparent 62%);
}
.band .wrap{position:relative;z-index:2}
.band .sec-head h2{color:#fff}
.band .sec-head p{color:#A8BCD2}
.band .card{background:var(--dark-2);border-color:var(--dark-line)}
.band .card .thumb{background:#0E1723;border-color:var(--dark-line)}
.band .card h3{color:#E8EEF5}
.band .card .foot{border-color:var(--dark-line)}
.band .spec{background:#0E1723;border-color:var(--dark-line);color:#A8BCD2}
.band .card:hover{border-color:#3B86D6}
.band .gate{color:#A8BCD2}
.band .badge.stock{background:rgba(18,121,74,.22);color:#5FD39B}
.band .badge.low{background:rgba(154,98,0,.22);color:#F0B65C}

/* ---------- category grid ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px}
.catcard{
  border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--canvas);
  display:flex;flex-direction:column;gap:11px;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t),background var(--t);
}
.catcard:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-2px);background:var(--blue-50)}
.catcard .ic{width:40px;height:40px;border-radius:9px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;transition:background var(--t)}
.catcard:hover .ic{background:var(--blue);color:#fff}
.catcard b{font-size:14.5px;font-weight:600}
.catcard span{font:500 11.5px/1 "JetBrains Mono",monospace;color:var(--ink-3)}

/* ---------- brands ---------- */
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.brand{
  border:1px solid var(--line);border-radius:var(--r);height:88px;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:var(--ink-2);letter-spacing:-.3px;background:var(--canvas);
  transition:border-color var(--t),color var(--t),transform var(--t),box-shadow var(--t);
}
.brand:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-1)}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* direct children only: the text wrapper inside each cell must not inherit the cell padding */
.trust>div{background:var(--canvas);padding:26px 24px;display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.trust>div>div{min-width:0}
.trust .ic{
  color:var(--blue);flex-shrink:0;width:42px;height:42px;border-radius:9px;
  background:var(--blue-50);display:grid;place-items:center;
}
.trust b{display:block;font-size:14.5px;margin-bottom:3px}
.trust p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#A8BCD2;padding:56px 0 0;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding-bottom:40px}
footer h5{margin:0 0 14px;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:1.4px;text-transform:uppercase;color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a:hover{color:#5FA3E4}
footer .fbot{border-top:1px solid var(--dark-line);padding:20px 0;display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px}
.flogo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.flogo b{color:#fff;font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1}
.flogo span{display:block;font:600 9px/1 Inter;letter-spacing:4.4px;color:#5FA3E4;margin-top:2px}

/* ---------- component showcase ---------- */
.showcase{background:var(--surface);border-top:1px solid var(--line)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-bottom:28px}
.sw{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--canvas)}
.sw i{display:block;height:54px}
.sw div{padding:8px 10px;font:500 11px/1.5 "JetBrains Mono",monospace;color:var(--ink-2)}
.sw b{display:block;color:var(--ink);font-size:11.5px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}

/* ---------- theme toggle ---------- */
.themetog{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px;background:var(--canvas);
}
.themetog button{width:30px;height:26px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--ink-3);transition:background var(--t),color var(--t)}
.themetog button[aria-pressed="true"]{background:var(--blue);color:#fff}

/* ---------- reveal animation (damped, mechanical) ----------
   Progressive enhancement: content is visible by default. Only when JS is
   running do we hide-then-reveal, so a JS failure can never blank a section. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .mega{min-width:660px;grid-template-columns:repeat(3,1fr)}
  .mega-feat{grid-column:span 3}
  .hero .wrap{grid-template-columns:1fr;gap:38px;padding:52px 24px 60px}
}
@media (max-width:860px){
  .head{height:auto;flex-wrap:wrap;gap:12px;padding:12px 0}
  .search{order:3;flex-basis:100%;max-width:none}
  .head-actions{margin-left:auto}
  .navrow{overflow-x:auto;height:48px}
  .mega{display:none}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  /* REBUILD 2026-10-26 (back office card padding): storefront bands only, see "sections" above. Was: section{padding:44px 0} */
  :where(body:not(.adm)) section{padding:44px 0}
  .util .wrap{gap:12px;font-size:11.5px}
  .util .hide-sm{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .fgrid{grid-template-columns:1fr}
  .hero h1{font-size:31px;letter-spacing:-1px}
  .eyebrow{line-height:1.45;letter-spacing:1.2px;padding:7px 13px}
  .sec-head{flex-wrap:wrap}
  .sec-head .sp{width:100%;margin-left:0}
  .rail{grid-auto-columns:minmax(210px,1fr)}
  /* 2-up categories on phones: denser and roughly halves page length */
  .catgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .catcard{padding:14px;gap:9px}
  .catcard .ic{width:34px;height:34px}
  .catcard b{font-size:13.5px}
  .catcard span{font-size:10.5px}
  /* phones: one point per row, icon beside the text, so each line gets the full width */
  .trust{grid-template-columns:1fr}
  .trust>div{flex-direction:row;gap:14px;padding:18px 16px}
  .trust .ic{width:38px;height:38px}
  .trust b{margin-bottom:4px}
}

/* ============================================================
   REBUILD 2026-10-26 (Wave 7, storefront gaps). New rules only; nothing above changed.
   Logical properties (inline-start / inline-end) throughout, so a right-to-left page mirrors by itself.
   ============================================================ */

/* ---------- phone menu: the Menu button and the drawer (review row SF31) ----------
   v2/partials/header.blade.php prints both; storefront.js wireDrawer() opens and closes the drawer. The button shows
   below 860 px and only while JavaScript runs (.js, set by theme.js before first paint), as the listing's Filters
   button does. The drawer slides in from the inline start and is kept off the page (the hidden attribute) when shut. */
.menubtn{
  display:none;align-items:center;gap:7px;height:44px;padding:0 12px;margin-inline-start:-12px;
  border-radius:var(--r-sm);color:var(--ink);font-size:13.5px;font-weight:600;
  transition:background var(--t),color var(--t);
}
.menubtn:hover,.menubtn[aria-expanded="true"]{background:var(--surface);color:var(--blue)}
.menubtn:focus-visible,.gt-drawer-x:focus-visible,.gt-acc summary:focus-visible,.gt-drawer a:focus-visible,.gt-confirm>summary:focus-visible{outline:2px solid var(--blue-400);outline-offset:-2px}
@media (max-width:860px){
  .js .menubtn{display:inline-flex}
}
@media (max-width:560px){
  .js .menubtn{padding:0 10px;margin-inline-start:-10px}
  /* icon only on a small phone; the word stays the button's accessible name */
  .menubtn span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

.gt-drawer-shade{
  position:fixed;inset:0;z-index:90;background:rgba(6,10,16,.5);
  opacity:0;transition:opacity .22s var(--ease);
}
.gt-drawer-shade.open{opacity:1}
.gt-drawer{
  position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:91;
  width:min(360px,88vw);display:flex;flex-direction:column;
  background:var(--canvas);color:var(--ink);
  border-inline-end:1px solid var(--line);box-shadow:var(--sh-3);
  transform:translateX(-100%);transition:transform .25s var(--ease);
  overscroll-behavior:contain;outline:0;
}
[dir="rtl"] .gt-drawer{transform:translateX(100%)}
.gt-drawer.open,[dir="rtl"] .gt-drawer.open{transform:none}
.gt-drawer[hidden],.gt-drawer-shade[hidden]{display:none}
.gt-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:8px;padding-inline:18px 8px;border-bottom:1px solid var(--line);
}
.gt-drawer-head h2{margin:0;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}
.gt-drawer-x{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-2);transition:background var(--t),color var(--t)}
.gt-drawer-x:hover{background:var(--surface);color:var(--blue)}
.gt-drawer-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gt-acc,.gt-acc ul{list-style:none;margin:0;padding:0}
.gt-acc>li{border-bottom:1px solid var(--line)}
.gt-acc summary{
  display:flex;align-items:center;gap:10px;min-height:52px;padding-inline:18px;
  font-size:15px;font-weight:600;cursor:pointer;list-style:none;
  transition:background var(--t),color var(--t);
}
.gt-acc summary::-webkit-details-marker{display:none}
.gt-acc summary:hover{background:var(--surface)}
.gt-acc summary .gt-icon{width:20px;height:20px;flex-shrink:0;color:var(--blue)}
.gt-acc summary .chev{margin-inline-start:auto;flex-shrink:0;color:var(--ink-3);transition:transform var(--t)}
.gt-acc details[open]>summary{color:var(--blue)}
.gt-acc details[open]>summary .chev{transform:rotate(180deg)}
.gt-acc-in{padding-bottom:10px}
.gt-acc a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding-inline:18px;
  font-size:14px;color:var(--ink-2);transition:background var(--t),color var(--t);
}
.gt-acc a:hover{background:var(--surface);color:var(--blue)}
.gt-acc a em{font:400 11px/1 "JetBrains Mono",monospace;font-style:normal;color:var(--ink-3)}
.gt-acc a.gt-acc-all{font-weight:600;color:var(--blue)}
.gt-acc a.gt-acc-cat{font-weight:600;color:var(--ink)}
.gt-acc span.gt-acc-cat{display:block;padding:12px 18px 4px;font:700 10.5px/1.3 "JetBrains Mono",monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}
.gt-acc-sub a{min-height:36px;padding-inline-start:32px;font-size:13.5px}
.gt-acc-sub a.allin{font-weight:600;color:var(--blue)}
.gt-acc>li>a.gt-acc-link{min-height:52px;font-size:15px;font-weight:600;color:var(--ink)}
.gt-acc>li>a.gt-acc-link.on{color:var(--blue)}
.gt-drawer-util{
  list-style:none;margin:0;padding-block:8px calc(10px + env(safe-area-inset-bottom,0px));padding-inline:0;
  display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);background:var(--surface);
}
.gt-drawer-util a{display:flex;align-items:center;min-height:44px;padding-inline:18px;font-size:13.5px;color:var(--ink-2)}
.gt-drawer-util a:hover{color:var(--blue)}
/* the page behind does not scroll while the drawer is open */
html.gt-drawer-lock,html.gt-drawer-lock body{overflow:hidden}
/* never on a wide screen (storefront.js also closes it when the window grows past 860 px) */
@media (min-width:861px){
  .gt-drawer,.gt-drawer-shade{display:none}
}

/* ---------- a confirm step inside a disclosure (the cart's "Empty the order", review row SF13) ----------
   <details class="gt-confirm"><summary class="btn ...">action</summary><div class="gt-confirm-box">question, form</div>
   Works without JavaScript; storefront.js shows the "Keep the order" button and lets Escape close it. */
.gt-confirm>summary{list-style:none;cursor:pointer}
.gt-confirm>summary::-webkit-details-marker{display:none}
.gt-confirm>summary svg{flex-shrink:0}
.gt-confirm[open]>summary{color:var(--red-ink);background:var(--surface)}
.fl-under .gt-confirm[open]{flex-basis:100%}
.gt-confirm-box{
  margin-top:10px;padding:14px 16px;max-width:460px;
  border:1px solid var(--line);border-inline-start:3px solid var(--red);border-radius:var(--r-sm);
  background:var(--canvas);box-shadow:var(--sh-1);
}
.gt-confirm-box>p:first-child{margin:0 0 4px;font-size:14.5px;font-weight:700;color:var(--ink)}
.gt-confirm-box .fl-small{margin:0 0 12px}
.gt-confirm-box form{display:flex;gap:8px;flex-wrap:wrap}
.btn-primary.gt-danger{background:var(--red)}
.btn-primary.gt-danger:hover{background:#8F1B12}

/* ---------- dense list rows, now the listings' default view (review rows DD7 and SF4) ----------
   v2.css lets a row's <picture> drop out of the layout (display:contents) so its <img> is the row's first grid cell.
   Its <source> (the WebP candidate) then became a grid cell of its own: an empty first column, the photo pushed into
   the name's column, the name squeezed into 150 px and the Add button wrapped onto a second line. A <source> never
   needs a box (the browser only reads it to pick the file). The same for the other pictures v2.css flattens. */
.card .thumb picture>source,.pd-main picture>source,.pd-thumbs picture>source,.line picture>source,.sugg picture>source,.flogo picture>source{display:none}

/* ---------- saved items: "Add all to order" beside "Your order" (review row SF20) ---------- */
.gt-sp-acts{flex-wrap:wrap;align-items:center}
.gt-sp-acts form{margin:0}