*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#e9edf2;background:#0d1014}
a{color:inherit;text-decoration:none}
.agebar{background:#b3122a;color:#fff;text-align:center;font-size:12px;padding:6px 10px;font-weight:600;letter-spacing:.02em}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:#12161c;border-bottom:1px solid #222b35}
.logo{font-weight:800;font-size:20px;letter-spacing:.01em}
.nav nav a{margin-left:20px;color:#b9c4cf;font-weight:600}
.nav nav a:hover{color:#fff}
main{min-height:60vh}
.hero{padding:70px 22px;text-align:center;background:radial-gradient(120% 100% at 50% 0,#1b2330,#0d1014)}
.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 10px;font-weight:800}
.hero p{color:#9fb0bf;font-size:18px;margin:0 0 26px}
.btn{display:inline-block;background:#3ba0ff;color:#03121f;font-weight:700;padding:12px 22px;border-radius:9px}
.btn.ghost{background:transparent;border:1px solid #35404c;color:#cfe;}
.wrap{max-width:1040px;margin:0 auto;padding:34px 20px}
.wrap.narrow{max-width:680px}
h2.cathead{margin-top:34px;border-bottom:1px solid #222b35;padding-bottom:8px}
.sub{color:#93a2b0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:16px}
.card{background:#141a21;border:1px solid #222b35;border-radius:12px;padding:16px;text-align:center}
/* White chip behind every brand logo. Roughly two-thirds of the distributor logos are
   transparent PNGs with black artwork, which vanishes against the dark card; the chip keeps
   every mark legible and consistent regardless of its colours. */
.card img{width:100%;height:88px;object-fit:contain;background:#fff;border-radius:8px;padding:10px;box-sizing:border-box}
.card .ph{height:88px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#3ba0ff;background:#0f141a;border-radius:8px}
.cname{font-weight:700;margin-top:10px}
.ccat,.cblurb{color:#8798a6;font-size:13px}
.foot{background:#0a0d11;border-top:1px solid #1b232c;padding:24px 22px;color:#8797a5;font-size:14px}
.foot .warn{margin-top:10px;font-size:12px;color:#8494a3}
/* age gate + admin login */
.gate{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(120% 90% at 50% 0,#1b2330,#0d1014)}
.gatecard{background:#12161c;border:1px solid #263041;border-radius:16px;padding:34px;max-width:400px;width:92%;text-align:center}
.gatelogo{font-weight:800;font-size:22px;margin-bottom:14px}
.gatecard h1{font-size:22px;margin:0 0 8px}
.gatecard p{color:#9fb0bf;font-size:14px}
.gatecard label{display:block;text-align:left;font-size:13px;color:#93a2b0;margin:14px 0 4px}
.gatecard input{width:100%;padding:11px;border-radius:9px;border:1px solid #33404e;background:#0d1218;color:#fff;font-size:16px}
.gatecard button{width:100%;margin-top:16px;padding:12px;border:0;border-radius:9px;background:#3ba0ff;color:#03121f;font-weight:800;font-size:16px;cursor:pointer}
.gateerr{background:#3a1420;color:#ff9db0;border:1px solid #5c2030;border-radius:8px;padding:9px;font-size:13px;margin:8px 0}
.fine{font-size:11px;color:#8494a3;margin-top:16px}
/* admin */
.admin{background:#0d1014}
.ok{background:#12301c;border:1px solid #1f5c33;color:#8fe3ab;padding:8px 12px;border-radius:8px;margin-bottom:14px}
.brandform{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.brandform input,.brandform select,.settings input{padding:9px;border-radius:8px;border:1px solid #33404e;background:#0d1218;color:#fff}
.brandform button,.settings button,.btable button{padding:9px 14px;border:0;border-radius:8px;background:#3ba0ff;color:#03121f;font-weight:700;cursor:pointer}
.btable{width:100%;border-collapse:collapse;font-size:14px}
.btable td,.btable th{border-bottom:1px solid #222b35;padding:8px;text-align:left;vertical-align:middle}
.btable input[type=text],.btable input:not([type]),.btable select{padding:6px;border-radius:6px;border:1px solid #33404e;background:#0d1218;color:#fff;max-width:150px}
.btable input[type=file]{max-width:120px;font-size:11px}
.btable .thumb{height:34px;display:block;margin-bottom:3px}
.btable .del{background:#b3122a;color:#fff;padding:6px 10px}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px}
.settings label{display:flex;flex-direction:column;font-size:12px;color:#93a2b0;gap:4px}
.settings button{grid-column:1/-1;justify-self:start}
@media(max-width:600px){.settings{grid-template-columns:1fr}}
/* ---- accessibility utilities ---------------------------------------------- */
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* skip link: first focusable element, visually hidden until focused (WCAG 2.4.1) */
.skip{position:fixed;left:10px;top:-72px;z-index:999;background:#3ba0ff;color:#03121f;font-weight:800;
  padding:13px 18px;border-radius:0 0 10px 10px;box-shadow:0 6px 20px rgba(0,0,0,.55);transition:top .15s ease}
.skip:focus{top:0}
main:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #3ba0ff;outline-offset:2px}
/* ---- brand search / filter (client-side, /brands) -------------------------- */
.bsearch{position:sticky;top:0;z-index:20;margin:20px -20px 0;padding:12px 20px 10px;background:#0d1014;border-bottom:1px solid #222b35}
.bsearch-field{position:relative;display:block}
.bsearch-icon{position:absolute;left:14px;top:50%;margin-top:-9px;width:18px;height:18px;color:#93a2b0;pointer-events:none}
.bsearch input{width:100%;height:48px;font-size:16px;font-family:inherit;color:#e9edf2;background:#0d1218;
  border:1px solid #5a6d7e;border-radius:10px;padding:0 50px 0 42px;-webkit-appearance:none;appearance:none}
.bsearch input::placeholder{color:#93a2b0;opacity:1}
.bsearch input::-webkit-search-cancel-button,.bsearch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.bsearch input:focus{border-color:#3ba0ff}
.bsearch-clear{position:absolute;right:2px;top:50%;margin-top:-22px;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center;background:transparent;border:0;border-radius:9px;color:#93a2b0;
  font-size:17px;line-height:1;cursor:pointer}
.bsearch-clear:hover{color:#e9edf2}
.bsearch-status{margin:8px 2px 0;font-size:13px;color:#93a2b0;min-height:18px}
.bsearch-empty{margin:30px auto;max-width:520px;padding:22px 20px;border:1px dashed #5a6d7e;border-radius:12px;text-align:center}
.bsearch-empty-h{margin:0;font-weight:700;font-size:17px}
.bsearch-empty-p{margin:8px 0 16px;font-size:14px;color:#93a2b0}
.bsearch-reset{min-height:44px;padding:11px 20px;border:1px solid #5a6d7e;border-radius:10px;background:#12161c;
  color:#e9edf2;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.bsearch-reset:hover{border-color:#3ba0ff;color:#fff}
.catsec h2.cathead:first-child{margin-top:26px}
@media(prefers-reduced-motion:reduce){.skip{transition:none}}