:root{
    --navy-900:#0A1428;
    --navy-800:#0F1D38;
    --navy-700:#16294A;
    --navy-600:#22365C;
    --white:#FFFFFF;
    --white-72:rgba(255,255,255,0.72);
    --white-50:rgba(255,255,255,0.50);
    --white-14:rgba(255,255,255,0.14);
    --white-08:rgba(255,255,255,0.08);
    --sky:#0EA5E9;
    --sky-light:#38BDF8;
    --whatsapp:#25D366;
    /* Sealed, never-opened stock. A separate token from --whatsapp on
       purpose: that one means the WhatsApp brand, this one means new. */
    --green:#10B981;
    --green-light:#34D399;
    --red:#E11D3C;
    --red-light:#F85C6E;
    --radius:10px;
    --ease-premium:cubic-bezier(0.22, 1, 0.36, 1);
    --header-bg:rgba(10,20,40,0.94);
  }
  /* Light mode — every component sources its color from the --navy-*
     (background tier) and --white-* (foreground/text tier) tokens above, so
     redefining just those two tiers re-themes the whole site with no
     per-component overrides needed. Accent colors (sky/whatsapp/red) stay
     the same in both themes — they're saturated enough to hold contrast on
     either background. Set via the [data-theme] attribute (theme.js) only
     when the visitor has explicitly chosen light — dark is the default for
     everyone else, regardless of OS preference. --header-bg is separate
     from --navy-900 (rather than just using it at reduced opacity) because
     the sticky header needs to stay legibly translucent over whatever
     scrolls under it in EITHER theme, which a shared token can't do since
     the two themes need very different alpha values for the same effect. */
  :root[data-theme="light"]{
    --navy-900:#F4F7FB;
    --navy-800:#FFFFFF;
    --navy-700:#EAF1F8;
    --navy-600:#D7E3EE;
    --white:#0A1428;
    --white-72:rgba(10,20,40,0.72);
    --white-50:rgba(10,20,40,0.50);
    --white-14:rgba(10,20,40,0.14);
    --white-08:rgba(10,20,40,0.06);
    --header-bg:rgba(244,247,251,0.9);
  }
  /* These brand marks are solid-white monochrome (by design, for the dark
     theme's navy background) — on light theme they render invisible, so
     flip them to black wherever they appear (accordion, brand cards,
     brand hero). */
  [data-theme="light"] img[src*="apple-logo-white"],
  [data-theme="light"] img[src*="asus-logo"],
  [data-theme="light"] img[src*="infinix-logo"],
  [data-theme="light"] img[src*="anker-logo"],
  [data-theme="light"] img[src*="logitech-logo"]{filter:invert(1);}
  /* Samsung's real mark is navy blue (#1428A0); PlayStation's real mark is
     black — both too dark to read against this site's dark navy background
     in either theme, so each gets a small white chip behind it (same trick
     real brand-logo widgets use) instead of a theme-based invert. */
  img[src*="samsung-logo"],
  img[src*="playstation-logo"]{background:#ffffff;border-radius:4px;padding:3px;box-sizing:border-box;}
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  section[id], div[id="location"], div[id="why"]{scroll-margin-top:84px;}
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .filter-chip:focus-visible, .star-btn:focus-visible{
    outline:2px solid var(--sky);outline-offset:2px;
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
  }
  .reveal-init{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-premium), transform .6s var(--ease-premium);}
  .reveal-in{opacity:1;transform:translateY(0);}
  /* Small waterfall stagger within a grid/list — capped at 6 items so a
     long list (e.g. FAQ) doesn't drag the reveal out. */
  .reveal-init:nth-child(2){transition-delay:.08s;}
  .reveal-init:nth-child(3){transition-delay:.16s;}
  .reveal-init:nth-child(4){transition-delay:.24s;}
  .reveal-init:nth-child(5){transition-delay:.32s;}
  .reveal-init:nth-child(6){transition-delay:.4s;}
  body{
    background:var(--navy-900);
    color:var(--white);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    /* Without this, iOS Safari inflates body text when the phone is
       turned to landscape — the type jumps a size and every carefully
       sized row on the page reflows. 100% means "render it at the size
       the stylesheet asked for"; it does not stop a reader zooming. */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
  }
  body.intro-locked{overflow:hidden;}
  /* Installed-app / touch-device polish — scoped to coarse pointers (touch)
     so mouse-driven desktop browsing is never affected. */
  @media(pointer:coarse){
    a,button,.filter-chip,.star-btn,.card,input,select,textarea{
      -webkit-tap-highlight-color:transparent;
    }
    button,a,.filter-chip,.star-btn{touch-action:manipulation;}
    /* Touch has no hover state, so every lift/glow/zoom "premium" effect
       defined against :hover elsewhere in this file simply never shows on
       a phone or tablet — press-and-hold is the closest touch equivalent
       to a mouse hovering, so :active mirrors the same handful of effects
       users actually notice (cards, buttons, showcase/testimonial/policy
       cards, and the small icon buttons), rather than every trivial
       text-link color change, which native tap highlighting already covers. */
    .card:active{
      transform:translateY(-7px);border-color:var(--sky);
      box-shadow:0 28px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(14,165,233,0.25), 0 0 40px rgba(14,165,233,0.12);
    }
    .card:active .card-img img{transform:scale(1.06);}
    .btn-primary:active{transform:translateY(-3px);opacity:0.96;box-shadow:0 16px 32px rgba(255,255,255,0.16), 0 1px 0 rgba(255,255,255,0.4) inset;}
    .btn-outline:active{border-color:var(--white);transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,0.3);}
    .btn-whatsapp:active{transform:translateY(-3px);opacity:0.96;box-shadow:0 16px 32px rgba(37,211,102,0.38);}
    .showcase-card:active{
      transform:translateY(calc(var(--offset) - 8px));
      border-color:var(--sky);background:rgba(14,165,233,0.08);
      box-shadow:0 20px 44px rgba(0,0,0,0.35),0 0 28px rgba(14,165,233,0.1);
    }
    .testimonial-card:active{transform:translateY(-4px);border-color:var(--sky);}
    .policy-card:active{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 14px 30px rgba(0,0,0,0.25);}
    .recent-mini-card:active{border-color:var(--sky);transform:translateY(-3px);}
    .stat-tile:active{border-color:var(--white-30);transform:translateY(-1px);}
    .social-icon-link:active{transform:translateY(-2px);opacity:0.88;}
    .chat-bubble-btn:active{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,165,233,0.55);}
    .wishlist-btn:active{transform:scale(1.12);color:var(--red-light);}
    .star-btn:active{transform:scale(1.12);}
  }
  .intro-screen{
    position:fixed;inset:0;z-index:500;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at center, var(--navy-700) 0%, var(--navy-900) 72%);
    transition:opacity .7s ease, visibility .7s ease;
  }
  .intro-screen.intro-hide{opacity:0;visibility:hidden;pointer-events:none;}
  .intro-content{text-align:center;padding:0 24px;}
  .intro-logo{
    width:84px;height:84px;object-fit:contain;border-radius:50%;
    margin:0 auto 26px;
    animation:introDim 2.3s ease-in-out infinite;
  }
  @keyframes introDim{
    0%,100%{opacity:1;}
    50%{opacity:0.3;}
  }
  .intro-title{
    font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(28px,6vw,42px);
    text-transform:uppercase;letter-spacing:0.03em;color:var(--white);
    margin-bottom:12px;
  }
  .intro-tagline{
    font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;
    letter-spacing:0.14em;color:var(--sky-light);
  }
  @media(prefers-reduced-motion:reduce){
    .intro-logo{animation:none;}
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
  .eyebrow{
    font-family:'Archivo',sans-serif;
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--white-72);
    font-weight:700;
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:var(--sky);}
  h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:800;text-transform:none;line-height:1.05;letter-spacing:-0.01em;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
    letter-spacing:0.02em;text-transform:uppercase;
    padding:14px 28px;border-radius:var(--radius);border:1.5px solid transparent;
    cursor:pointer;transition:transform .4s var(--ease-premium), background .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .4s var(--ease-premium);
  }
  .btn-primary{background:var(--white);color:var(--navy-900);box-shadow:0 1px 0 rgba(255,255,255,0.4) inset;}
  .btn-primary:hover{transform:translateY(-3px);opacity:0.96;box-shadow:0 16px 32px rgba(255,255,255,0.16), 0 1px 0 rgba(255,255,255,0.4) inset;}
  .btn-outline{border-color:var(--white-50);color:var(--white);background:transparent;}
  .btn-outline:hover{border-color:var(--white);transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,0.3);}
  .btn-whatsapp{background:var(--whatsapp);color:#ffffff;}
  .btn-whatsapp svg{width:16px;height:16px;flex-shrink:0;}
  .btn-whatsapp:hover{transform:translateY(-3px);opacity:0.96;box-shadow:0 16px 32px rgba(37,211,102,0.38);}
  .btn-sm{padding:9px 16px;font-size:12px;}

  /* ===== NAV ===== */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--header-bg);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--white-14);
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:box-shadow .25s ease, border-color .25s ease;
  }
  header::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--sky) 30%,var(--sky-light) 50%,var(--sky) 70%,transparent);
    opacity:0.7;
  }
  header.scrolled{box-shadow:0 12px 28px rgba(0,0,0,0.35);}
  nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
  .nav-search-bar{position:relative;background:var(--navy-800);border-top:1px solid var(--white-14);border-bottom:1px solid var(--white-14);}
  .nav-search-bar-inner{display:flex;align-items:center;gap:12px;padding:14px 24px;color:var(--white-50);}
  .nav-search-bar .search-suggestions{left:24px;right:24px;}
  .nav-search-bar-inner svg{width:18px;height:18px;flex-shrink:0;}
  .nav-search-bar-inner input{
    flex:1;background:none;border:none;color:var(--white);font-family:'Inter',sans-serif;font-size:15px;
  }
  .nav-search-bar-inner input:focus{outline:none;}
  .nav-search-bar-inner input::placeholder{color:var(--white-50);}
  .nav-search-bar-inner button{background:none;border:none;color:var(--white-50);font-size:22px;line-height:1;cursor:pointer;padding:4px;flex-shrink:0;}
  .nav-search-bar-inner button:hover{color:var(--white);}
  #navSearchBtn.active{border-color:var(--sky);color:var(--sky-light);}
  .logo{
    font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;
    letter-spacing:0.01em;
  }
  .logo-img{height:52px;width:auto;display:block;}
  .foot-logo-img{height:66px;width:auto;display:block;margin-bottom:14px;}
  .nav-links{display:flex;gap:26px;align-items:center;}
  .nav-links a{font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.03em;color:var(--white-72);position:relative;padding-bottom:4px;}
  .nav-link-icon{display:none;}
  .nav-links a:hover{color:var(--sky-light);}
  .nav-links a.active{color:var(--white);}
  .nav-links a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sky);
  }
  .nav-dropdown{position:relative;}
  .nav-dropdown-menu{
    position:absolute;top:100%;left:0;margin-top:10px;min-width:170px;
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    box-shadow:0 16px 32px rgba(0,0,0,0.35);padding:8px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:60;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .nav-dropdown-menu a{
    display:block;padding:9px 12px;border-radius:6px;font-size:13px;
    font-weight:600;text-transform:none;letter-spacing:normal;color:var(--white-72);
  }
  .nav-dropdown-menu a:hover{background:var(--white-08);color:var(--sky-light);}
  .nav-cta{display:flex;align-items:center;gap:14px;}
  .burger{
    display:none;background:none;border:1px solid var(--white-14);color:var(--white);
    width:38px;height:38px;border-radius:var(--radius);cursor:pointer;
    align-items:center;justify-content:center;flex-shrink:0;
  }
  @media(max-width:600px){
    nav{padding:12px 16px;}
    .logo-img{height:40px;}
    /* Only the full nav — homepage, shop and support — carries the whole
       controls row. It outgrew the phone once the currency picker joined it
       (341px of buttons plus a 38px burger plus 48px of padding in a 390px
       bar) and the logo, the only item still allowed to shrink, collapsed to
       nothing. Here the logo is pinned and everything else gives up a few
       pixels. The simpler headers on the catalogue pages are left alone. */
    header .logo{flex-shrink:0;}
    .nav-full{padding:12px 14px;}
    .nav-full .logo-img{height:44px;border-radius:10px;}
    .nav-cta{gap:4px;}
    .nav-cta .nav-wishlist-btn{width:32px;height:32px;}
    .nav-cta .nav-wishlist-btn svg{width:16px;height:16px;}
    .nav-cta .currency-picker{font-size:9px;padding:5px 15px 5px 6px;background-position:calc(100% - 8px) 50%, calc(100% - 5px) 50%;}
    #navWaBtn{
      width:32px;height:32px;padding:0;border-radius:50%;flex-shrink:0;
    }
    #navWaBtn .btn-label{display:none;}
    #navWaBtn svg{width:16px;height:16px;}
  }
  /* Below ~380px the same row still did not fit and the whole page scrolled
     sideways. Everything in it gives up a couple more pixels rather than the
     logo giving up all of its. */
  @media(max-width:380px){
    .nav-full{padding:11px 10px;}
    .nav-full .logo-img{height:38px;}
    .nav-cta{gap:2px;}
    .nav-cta .nav-wishlist-btn,
    .nav-full #navWaBtn{width:28px;height:28px;}
    .nav-cta .nav-wishlist-btn svg,
    .nav-full #navWaBtn svg{width:14px;height:14px;}
    .nav-cta .currency-picker{font-size:8px;padding:4px 12px 4px 4px;background-position:calc(100% - 6px) 50%, calc(100% - 3px) 50%;}
  }

  /* ===== HERO ===== */
  .hero{
    padding:104px 0 72px;
    background:
      radial-gradient(ellipse 900px 500px at 12% -10%, rgba(14,165,233,0.12), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(14,165,233,0.07), transparent 55%),
      linear-gradient(180deg,var(--navy-900),var(--navy-800) 140%);
    border-bottom:1px solid var(--white-14);
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse 900px 480px at 20% 10%, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 900px 480px at 20% 10%, #000 0%, transparent 75%);
  }
  .hero::after{
    content:"";position:absolute;top:-40%;right:-10%;width:640px;height:640px;border-radius:50%;
    background:
      radial-gradient(circle, transparent calc(50% - 1px), var(--white-08) calc(50% - 1px), var(--white-08) 50%, transparent calc(50% + 1px)),
      radial-gradient(circle, transparent calc(34.4% - 1px), var(--white-08) calc(34.4% - 1px), var(--white-08) 34.4%, transparent calc(34.4% + 1px));
  }
  .hero .wrap{position:relative;z-index:1;}
  .hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:800;margin:16px 0 22px;letter-spacing:-0.02em;}
  .hero h1 .accent{color:var(--white);border-bottom:4px solid var(--sky);padding-bottom:4px;text-shadow:0 0 36px rgba(56,189,248,0.4);}
  .hero p{max-width:560px;color:var(--white-72);font-size:17px;margin-bottom:36px;}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
  .hero-assurance{
    margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--white-72);
    display:inline-flex;align-items:center;gap:9px;
    border:1px solid var(--white-14);border-radius:20px;padding:8px 16px 8px 12px;
    background:rgba(255,255,255,0.03);
  }
  .hero-assurance svg{width:14px;height:14px;flex-shrink:0;color:var(--sky-light);}

  /* A short, looping showcase clip cycling past the product categories —
     sits in normal flow (not the absolutely-positioned .hero-animation
     diagram behind it), sized to the same column width as the hero copy so
     it reads as a deliberate "here's what we sell" moment rather than a
     stretched, blurry full-bleed background. */
  .hero-video-showcase{
    margin-top:32px;max-width:480px;width:100%;border-radius:16px;overflow:hidden;
    border:1px solid var(--white-14);box-shadow:0 20px 50px rgba(0,0,0,0.35);
    aspect-ratio:16/9;background:var(--navy-800);position:relative;z-index:1;
  }
  .hero-video-showcase video{width:100%;height:100%;display:block;object-fit:cover;}

  /* Hero entrance — pure CSS animation-delay timed to the intro splash's
     fixed 2.5s display duration (script.js:3941-3951), rather than a
     JS-added class. If JS ever fails to run for any reason, a JS-triggered
     reveal would leave this content stuck at opacity:0 forever; a CSS
     animation-delay always resolves on its own, no script dependency.
     Scoped to .hero-with-splash (index.html's hero only) — category.php,
     brand.php/brands.php, and product.php all reuse the plain .hero class
     for their own hero sections but have no splash screen to mask a 2.5s
     wait, so without this scoping their h1/intro/CTAs sat invisible on
     every load until the animation's delay ran out regardless. */
  .hero-with-splash .eyebrow, .hero-with-splash h1, .hero-with-splash p, .hero-with-splash .hero-ctas, .hero-with-splash .hero-assurance, .hero-with-splash .hero-video-showcase{
    opacity:0;
    animation:heroReveal .6s var(--ease-premium) 2.5s forwards;
  }
  .hero-with-splash h1{animation-delay:2.58s;}
  .hero-with-splash p{animation-delay:2.66s;}
  .hero-with-splash .hero-ctas{animation-delay:2.74s;}
  .hero-with-splash .hero-assurance{animation-delay:2.82s;}
  .hero-with-splash .hero-video-showcase{animation-delay:2.9s;}
  @keyframes heroReveal{
    from{opacity:0;transform:translateY(24px);}
    to{opacity:1;transform:translateY(0);}
  }
  @media(prefers-reduced-motion:reduce){
    .hero-with-splash .eyebrow, .hero-with-splash h1, .hero-with-splash p, .hero-with-splash .hero-ctas, .hero-with-splash .hero-assurance, .hero-with-splash .hero-video-showcase{
      opacity:1;animation:none;
    }
  }

  .hero-animation{position:absolute;top:0;right:0;width:48%;height:100%;pointer-events:none;z-index:1;}
  .infra-svg{position:absolute;inset:0;width:100%;height:100%;}
  .infra-svg-mobile{display:none;}
  .infra-line{stroke:rgba(255,255,255,0.16);stroke-width:0.3;stroke-dasharray:1.2 1.6;}
  .infra-pulse{fill:var(--sky-light);filter:drop-shadow(0 0 3px rgba(56,189,248,0.9));}
  .infra-pulse-out{fill:var(--whatsapp);filter:drop-shadow(0 0 3px rgba(37,211,102,0.9));}
  .pulse-1{animation:infraPulse1 3.4s linear infinite;}
  .pulse-2{animation:infraPulse2 3.8s linear infinite .5s;}
  .pulse-3{animation:infraPulse3 3s linear infinite 1s;}
  .pulse-4{animation:infraPulse4 3.6s linear infinite 1.6s;}
  .pulse-5{animation:infraPulse5 4.2s linear infinite 2.1s;}
  .pulse-1-m{animation:infraPulse1Mobile 3.4s linear infinite;}
  .pulse-2-m{animation:infraPulse2Mobile 3.8s linear infinite .5s;}
  .pulse-3-m{animation:infraPulse3Mobile 3s linear infinite 1s;}
  .pulse-4-m{animation:infraPulse4Mobile 3.6s linear infinite 1.6s;}
  .pulse-5-m{animation:infraPulse5Mobile 4.2s linear infinite 2.1s;}
  @keyframes infraPulse1Mobile{
    0%{cx:15;cy:39;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:50;cy:50;opacity:0;}
  }
  @keyframes infraPulse2Mobile{
    0%{cx:50;cy:15;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:50;cy:50;opacity:0;}
  }
  @keyframes infraPulse3Mobile{
    0%{cx:72;cy:74;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:50;cy:50;opacity:0;}
  }
  @keyframes infraPulse4Mobile{
    0%{cx:85;cy:39;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:50;cy:50;opacity:0;}
  }
  @keyframes infraPulse5Mobile{
    0%{cx:50;cy:50;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:28;cy:74;opacity:0;}
  }
  @keyframes infraPulse1{
    0%{cx:56;cy:14;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:54;cy:52;opacity:0;}
  }
  @keyframes infraPulse2{
    0%{cx:88;cy:34;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:54;cy:52;opacity:0;}
  }
  @keyframes infraPulse3{
    0%{cx:52;cy:88;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:54;cy:52;opacity:0;}
  }
  @keyframes infraPulse4{
    0%{cx:86;cy:70;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:54;cy:52;opacity:0;}
  }
  @keyframes infraPulse5{
    0%{cx:54;cy:52;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:20;cy:72;opacity:0;}
  }

  .infra-hub{
    position:absolute;top:52%;left:54%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;
    background:rgba(255,255,255,0.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.2);color:var(--sky-light);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 16px 36px rgba(0,0,0,0.4);
  }
  .infra-hub svg{width:26px;height:26px;}
  .infra-hub-ring{
    position:absolute;inset:-1px;border-radius:50%;
    animation:hubPulse 2.6s infinite;
  }
  @keyframes hubPulse{
    0%{box-shadow:0 0 0 0 rgba(56,189,248,0.45);}
    70%{box-shadow:0 0 0 16px rgba(56,189,248,0);}
    100%{box-shadow:0 0 0 0 rgba(56,189,248,0);}
  }
  .infra-hub-tag{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;letter-spacing:0.01em;
    color:var(--white);white-space:nowrap;
  }

  .infra-node{
    position:absolute;transform:translate(-50%,-50%);
    width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,0.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.16);color:var(--white-72);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 26px rgba(0,0,0,0.32);
  }
  .infra-node svg{width:19px;height:19px;}
  .infra-node-whatsapp{color:var(--whatsapp);border-color:rgba(37,211,102,0.35);}
  .infra-node-out{color:var(--whatsapp);border-color:rgba(37,211,102,0.35);}
  .infra-node-tag{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:7px;
    font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--white-50);white-space:nowrap;
  }

  .infra-status-badge{
    position:absolute;bottom:4%;left:36%;
    display:flex;align-items:center;gap:6px;
    background:rgba(255,255,255,0.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.16);border-radius:20px;padding:6px 12px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--sky-light);white-space:nowrap;
  }
  .infra-status-badge svg{width:13px;height:13px;flex-shrink:0;}

  /* Two-column hero: text on the left, network diagram on the right. The
     diagram is absolutely positioned over the right 48%, so the text column
     has to be held back or it runs underneath it — which is what put the
     CTA row on top of the ZagoTech hub once the row grew to four buttons.
     Capping the row makes it wrap within the left column instead.
     Only applies where the two columns actually exist; below 1150px the
     diagram stacks under the text and none of this is needed. */
  @media(min-width:1151px){
    /* Only the button row needs holding back — it is the widest element and
       the one that reached under the diagram. The headline and the assurance
       pill both clear it at their natural widths, and capping them only
       forced ugly wrapping. */
    .hero-ctas{max-width:600px;}

    /* Hold the diagram to a fixed measure and inset it from the edge, so it
       reads as one compact constellation instead of stretching wider and
       thinner the bigger the screen gets — nodes used to sit at 90-95%,
       which pushed their labels against the viewport edge. */
    .hero-animation{width:min(46%,620px);right:3%;}
  }

  @media(max-width:1150px){
    /* Below this width there is no room beside the hero text for an
       absolutely-positioned overlay, so the diagram drops into normal
       flow as its own full-width block underneath. The arrangement of
       the nodes themselves is no longer set here — it is the same
       radial layout at every width now (see HERO DIAGRAM below). */
    .hero-animation{
      display:block;position:relative;
      width:100%;height:365px;
      top:auto;right:auto;
      margin-top:36px;
    }
  }
  @media(prefers-reduced-motion:reduce){
    .infra-pulse, .infra-hub-ring{animation:none;}
  }

  /* ===== TRUST BAR =====
     Four claims, each linking to the page that backs it up. The old version
     read as a table: hard full-height rules between cells, a flat outlined
     circle, and text crowded against it. This is the same four facts given
     the weight they deserve — a deliberate band with its own ground, hairline
     separators that fade out rather than butting into the edges, and an icon
     tile with some depth to it.

     Restraint is the point. One accent colour, one motion, nothing that
     competes with the hero directly above it. */
  .trust{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:relative;
    border-top:1px solid var(--white-08);
    border-bottom:1px solid var(--white-14);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(14,165,233,0.07) 0%, transparent 62%),
      linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  }
  /* A single sky hairline across the top, brightest in the middle. It ties the
     band to the hero above without drawing a hard line under it. */
  .trust::before{
    content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(14,165,233,0.55),transparent);
    pointer-events:none;
  }

  .trust-item{
    position:relative;
    /* 22px each side left the third cell 176px for a sub-line that needs
       181px, so it alone wrapped and sat out of line with its neighbours.
       18px gives every cell 184px and they all hold one line. */
    padding:26px 18px;
    display:flex;gap:13px;align-items:center;
    text-decoration:none;color:inherit;
    transition:background .22s var(--ease-premium);
  }
  /* Separators as short fading hairlines rather than full-height borders —
     they mark the division without boxing each cell in. */
  .trust-item + .trust-item::before{
    content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
    background:linear-gradient(180deg,transparent,var(--white-14) 22%,var(--white-14) 78%,transparent);
  }

  .trust-item .ic{
    width:42px;height:42px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:13px;
    color:var(--sky-light);
    background:linear-gradient(145deg, rgba(56,189,248,0.16) 0%, rgba(14,165,233,0.05) 100%);
    box-shadow:inset 0 0 0 1px var(--white-14), 0 2px 10px rgba(0,0,0,0.18);
    transition:color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s var(--ease-premium);
  }
  .trust-item .ic svg{width:19px;height:19px;}

  /* The chevron and icon are fixed-width; the text takes what is left and
     is allowed to shrink, so a long sub-line does not wrap and throw one
     cell out of vertical alignment with its neighbours. */
  .trust-item > div:not(.ic){ min-width:0;flex:1 1 auto; }
  .trust-item .tt{
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:12.5px;text-transform:uppercase;letter-spacing:0.075em;
    color:var(--white);line-height:1.25;
    transition:color .22s ease;
  }
  .trust-item .ds{
    font-size:12.5px;color:var(--white-72);
    margin-top:3px;line-height:1.45;
  }

  .trust-go{
    margin-left:auto;align-self:center;flex-shrink:0;
    width:18px;height:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    font-size:19px;color:var(--white-50);opacity:0.55;
    transition:transform .22s var(--ease-premium), color .22s ease, opacity .22s ease;
  }

  /* One coordinated hover: the ground warms, the tile lights up and lifts,
     the label takes the accent, the chevron steps toward its destination. */
  a.trust-item:hover{ background:rgba(255,255,255,0.035); }
  a.trust-item:hover .ic{
    color:var(--navy-900);
    background:linear-gradient(145deg, var(--sky-light) 0%, var(--sky) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22), 0 6px 18px rgba(14,165,233,0.34);
    transform:translateY(-2px);
  }
  a.trust-item:hover .tt{ color:var(--sky-light); }
  a.trust-item:hover .trust-go{ color:var(--sky-light);opacity:1;transform:translateX(4px); }
  a.trust-item:focus-visible{ outline:2px solid var(--sky);outline-offset:-3px;border-radius:2px; }

  @media(prefers-reduced-motion:reduce){
    .trust-item, .trust-item .ic, .trust-go{ transition:none; }
    a.trust-item:hover .ic{ transform:none; }
  }

  .flagship-section{padding:39px 0 32px;}

  /* ===== BRANDS ===== */
  .brands-section{padding:45px 0 52px;border-bottom:1px solid var(--white-14);}
  .brands-heading{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);
    margin:10px 0 28px;letter-spacing:-0.01em;
  }
  .brands-showcase{
    position:relative;overflow:hidden;margin-bottom:28px;padding:56px 48px;
    border:1px solid var(--white-14);border-radius:var(--radius);
    background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 70%);
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  }
  .showcase-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
  .showcase-blob-1{width:340px;height:340px;background:rgba(14,165,233,0.22);top:-120px;left:-60px;}
  .showcase-blob-2{width:280px;height:280px;background:rgba(56,189,248,0.14);bottom:-100px;right:10%;}
  .showcase-grid-bg{
    position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(ellipse 700px 400px at 30% 40%, #000 0%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 700px 400px at 30% 40%, #000 0%, transparent 70%);
  }
  .showcase-copy{position:relative;z-index:1;max-width:320px;flex-shrink:0;}
  .showcase-kicker{
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--sky-light);margin-bottom:14px;display:flex;align-items:center;gap:8px;
  }
  .showcase-kicker::before{content:"";width:20px;height:1.5px;background:var(--sky);}
  .showcase-heading{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(26px,3vw,36px);
    line-height:1.1;letter-spacing:-0.01em;color:var(--white);
  }
  .showcase-cards{position:relative;z-index:1;display:flex;gap:18px;flex-wrap:wrap;}
  /* Shop section's "Shop by Brand" — the same .showcase-card component used
     to live in one big homepage list; now split into per-category rows
     (Laptop & Desktop, Phone, Printer & Scanner, Accessory, Console) sitting
     directly in the Shop section, plus a matching per-type row on each
     category.php page (laptops.php, phones.php, etc.) — see category.php. */
  .brand-shop-groups{display:flex;flex-direction:column;gap:10px;margin-bottom:36px;}
  /* Collapsed by default — the brand logos for a whole category (Laptop &
     Desktop, Phone, ...) stay hidden behind a single clickable, icon-led
     header until tapped, rather than dumping all 29 logos on screen at
     once. Plain display toggle (see toggleBrandGroup() in script.js),
     matching every other show/hide in this codebase rather than a height
     animation. */
  .brand-shop-group{border:1px solid var(--white-14);border-radius:var(--radius);overflow:hidden;}
  .brand-shop-group-toggle{
    width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:rgba(255,255,255,0.03);border:none;cursor:pointer;text-align:left;
    font-family:inherit;color:var(--white);transition:background .15s ease;
  }
  .brand-shop-group-toggle:hover{background:rgba(255,255,255,0.06);}
  .brand-shop-group-icon{display:flex;flex-shrink:0;color:var(--sky-light);}
  .brand-shop-group-icon svg{width:22px;height:22px;}
  .brand-shop-group-label{
    flex:1;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;
    letter-spacing:0.03em;color:var(--white-72);
  }
  .brand-shop-group-count{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--white-50);flex-shrink:0;
  }
  .brand-shop-group-chevron{width:16px;height:16px;flex-shrink:0;color:var(--white-50);transition:transform .2s ease;}
  .brand-shop-group-toggle.open .brand-shop-group-chevron{transform:rotate(180deg);}
  .brand-shop-group .showcase-cards{padding:16px;}
  .showcase-card{
    --offset:0px;
    width:130px;padding:20px 16px;transform:translateY(var(--offset));
    background:rgba(255,255,255,0.045);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);
    transition:transform .4s var(--ease-premium),border-color .3s ease,background .3s ease,box-shadow .4s var(--ease-premium);
    /* Real <a href> (to its own brand.php landing page — see index.html)
       rather than a <button>, so a real crawler and a right-click/"open in
       new tab" both work; left-click is still intercepted for the fast SPA
       filter. Reset the anchor defaults that fought the styles above. */
    display:block;text-align:center;cursor:pointer;font-family:inherit;color:inherit;text-decoration:none;
  }
  .showcase-card:hover{
    transform:translateY(calc(var(--offset) - 8px));
    border-color:var(--sky);background:rgba(14,165,233,0.08);
    box-shadow:0 20px 44px rgba(0,0,0,0.35),0 0 28px rgba(14,165,233,0.1);
  }
  .showcase-card-icon{
    width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);
    display:flex;align-items:center;justify-content:center;color:var(--sky-light);margin:0 auto 16px;
  }
  .showcase-card-icon svg{width:20px;height:20px;}
  .showcase-card-logo-img{width:34px;height:34px;object-fit:contain;}
  .showcase-card-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--white);margin-bottom:10px;}
  .showcase-card-check{
    display:inline-flex;align-items:center;gap:5px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--white-50);
  }
  .showcase-card-check svg{width:12px;height:12px;flex-shrink:0;}
  @media(max-width:900px){
    .brands-showcase{padding:40px 28px;justify-content:center;text-align:center;}
    .showcase-kicker{justify-content:center;}
    .showcase-copy{max-width:100%;}
    .showcase-cards{justify-content:center;}
    .showcase-card{transform:none;}
    .showcase-card:hover{transform:translateY(-6px);}
  }
  @media(max-width:600px){
    .showcase-cards{gap:12px;}
    .showcase-card{width:calc(50% - 6px);}
  }

  /* ===== SHOP ===== */
  .section{padding:84px 0;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:40px;}
  .section-head h2{font-size:clamp(32px,4vw,48px);font-weight:800;margin-top:10px;}

  /* ===== BRAND EXPLAINER ===== */
  .explainer-section{padding-top:58px;}

  /* ===== RECENTLY VIEWED ===== */
  .recent-section{padding-top:0;padding-bottom:19px;}
  .recent-strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;}
  .recent-mini-card{
    flex:0 0 auto;width:160px;cursor:pointer;background:var(--navy-800);border:1px solid var(--white-14);
    border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease,transform .15s ease;
  }
  .recent-mini-card:hover{border-color:var(--sky);transform:translateY(-3px);}
  .recent-mini-card .thumb{
    height:100px;background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
    display:flex;align-items:center;justify-content:center;font-size:28px;
  }
  .recent-mini-card .thumb img{width:100%;height:100%;object-fit:cover;}
  .recent-mini-card .info{padding:10px 12px;}
  .recent-mini-card .r-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .recent-mini-card .r-price{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sky-light);}
  .explainer-toggle{
    background:none;border:1px solid var(--white-14);color:var(--white-72);
    font-family:'Archivo',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
    padding:9px 16px;border-radius:var(--radius);cursor:pointer;transition:all .15s ease;
    margin-bottom:2px;
  }
  .explainer-toggle:hover{border-color:var(--sky);color:var(--sky-light);}
  .explainer{
    position:relative;height:320px;border:1px solid var(--white-14);border-radius:var(--radius);
    background:
      radial-gradient(ellipse at 85% 15%, rgba(14,165,233,0.10), transparent 55%),
      linear-gradient(135deg,var(--navy-800),var(--navy-900));
    overflow:hidden;
  }
  .explainer-frame{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    padding:40px;opacity:0;transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;pointer-events:none;text-align:center;
  }
  .explainer-frame.active{opacity:1;transform:translateY(0);pointer-events:auto;}
  .explainer-icon{
    font-size:32px;width:64px;height:64px;border:1px solid var(--white-14);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--sky-light);background:var(--navy-900);
  }
  .explainer-icon svg{width:28px;height:28px;}
  .explainer-frame h3{font-size:clamp(22px,3vw,30px);max-width:560px;font-weight:800;}
  .explainer-frame p{color:var(--white-72);max-width:480px;font-size:15px;}
  .explainer-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--white-08);}
  .explainer-progress-bar{height:100%;width:0%;background:var(--sky);}
  .explainer-progress-bar.playing{animation:explainerProgress 4.2s linear;}
  @keyframes explainerProgress{from{width:0%;}to{width:100%;}}
  .explainer-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
  .explainer-dot{
    width:8px;height:8px;border-radius:50%;background:var(--white-14);border:none;cursor:pointer;
    transition:background .2s ease, transform .2s ease;padding:0;
  }
  .explainer-dot.active{background:var(--sky);transform:scale(1.35);}
  @media(prefers-reduced-motion:reduce){
    .explainer-frame{transition:opacity .3s ease;}
    .explainer-progress-bar.playing{animation:none;}
  }

  .shop-controls{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px;}
  .filter-group{margin-bottom:16px;}
  .filter-group:last-of-type{margin-bottom:32px;}
  .brand-filter-banner{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:12px 16px;margin-bottom:24px;font-size:14px;color:var(--white-72);
  }
  .brand-filter-banner strong{color:var(--white);}
  .filter-label{
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--white-50);margin-bottom:10px;
  }
  .search-box-wrap{position:relative;flex:1;min-width:240px;}
  .search-box{
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:12px 16px;color:var(--white);font-family:'Inter',sans-serif;font-size:14px;
    width:100%;
  }
  .search-box:focus{outline:none;border-color:var(--white-50);}
  .search-box::placeholder{color:var(--white-50);}

  /* ===== SEARCH SUGGESTIONS (nav + shop search, shared) ===== */
  .search-suggestions{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    box-shadow:0 16px 32px rgba(0,0,0,0.35);
    max-height:360px;overflow-y:auto;display:none;
  }
  .search-suggestions.open{display:block;}
  .search-suggestion-item{
    display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;
    border-bottom:1px solid var(--white-14);
  }
  .search-suggestion-item:last-child{border-bottom:none;}
  .search-suggestion-item:hover{background:var(--white-08);}
  .search-suggestion-thumb{
    width:38px;height:38px;border-radius:6px;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;font-size:20px;
    background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
  }
  .search-suggestion-thumb img{width:100%;height:100%;object-fit:cover;}
  .search-suggestion-info{flex:1;min-width:0;}
  .search-suggestion-name{
    font-size:13px;font-weight:600;color:var(--white);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .search-suggestion-price{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sky-light);margin-top:2px;}
  .search-suggestion-empty{padding:16px;text-align:center;font-size:13px;color:var(--white-50);}
  .search-suggestion-viewall{
    display:block;text-align:center;padding:11px;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--sky-light);border-top:1px solid var(--white-14);
  }
  .search-suggestion-viewall:hover{background:var(--white-08);}
  .sort-select{
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:12px 16px;color:var(--white);font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
    text-transform:uppercase;letter-spacing:0.03em;cursor:pointer;flex-shrink:0;
  }
  .sort-select:focus{outline:none;border-color:var(--white-50);}
  .filters{display:flex;gap:8px;flex-wrap:wrap;}
  .filter-chip{
    font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.03em;
    padding:9px 16px;border:1px solid var(--white-14);border-radius:var(--radius);cursor:pointer;
    background:transparent;color:var(--white-72);transition:all .15s ease;
  }
  .filter-chip.active{background:var(--sky);color:var(--navy-900);border-color:var(--sky);}
  .filter-chip:hover{border-color:var(--sky);color:var(--sky-light);}
  .filter-chip.active:hover{color:var(--navy-900);}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  /* On a wide desktop three cards stretch to ~430px each, which leaves every
     product floating in its own empty field. A fourth column tightens the
     whole catalog into a proper shop rhythm at the widths where there is
     room for it. */
  @media(min-width:1280px){ .grid{grid-template-columns:repeat(4,1fr);gap:22px;} }
  /* Top-level department split (Laptops & Desktops vs Printers & Scanners)
     — deliberately heavier than .brand-group-head below it (bigger type,
     an accent icon badge, its own divider) so the two departments read as
     separate zones at a glance, with brand grouping as a clear second tier
     underneath each one. */
  .category-group{margin-bottom:72px;}
  .category-group:last-child{margin-bottom:0;}
  .category-group-head{
    display:flex;align-items:center;gap:16px;margin-bottom:36px;
    padding-bottom:20px;border-bottom:2px solid var(--white-14);
  }
  .category-group-icon{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:46px;height:46px;border-radius:50%;
    background:rgba(14,165,233,0.14);color:var(--sky-light);
  }
  .category-group-icon svg{width:23px;height:23px;}
  .category-group-head h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-0.01em;flex:1;}
  .category-group-head .category-count{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--white-50);
    text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0;
  }
  .brand-group{margin-bottom:52px;}
  .brand-group:last-child{margin-bottom:0;}
  .brand-group-head{
    display:flex;align-items:baseline;gap:14px;margin-bottom:22px;
    padding-bottom:12px;border-bottom:1px solid var(--white-14);
  }
  /* A small accent mark (same device as .eyebrow's) so this tier reads as
     a heading at a glance instead of blending into body copy — the size
     and divider were already deliberate, this was just missing any color. */
  .brand-group-head h3{
    display:flex;align-items:center;gap:10px;
    font-size:clamp(20px,2.4vw,26px);font-weight:800;text-transform:uppercase;letter-spacing:0.01em;
  }
  .brand-group-head h3::before{content:"";display:inline-block;width:16px;height:2px;background:var(--sky);flex-shrink:0;}
  .brand-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--white-50);}
  .brand-type-row{margin-bottom:28px;}
  .brand-type-row:last-child{margin-bottom:0;}
  .brand-type-label{
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--white-50);margin-bottom:14px;display:flex;align-items:baseline;gap:10px;
  }
  .slide-row{
    display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:6px;margin:0 -24px;padding-left:24px;padding-right:24px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent 100%);
  }
  .slide-row::-webkit-scrollbar{display:none;}
  .slide-row .card{flex:0 0 290px;scroll-snap-align:start;}
  .card{
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 40%);
    border:1px solid var(--white-14);border-radius:var(--radius);
    overflow:hidden;position:relative;
    transition:transform .5s var(--ease-premium), border-color .35s ease, box-shadow .5s var(--ease-premium);
    box-shadow:0 1px 0 rgba(255,255,255,0.03) inset;
  }
  .card:hover{
    transform:translateY(-7px);border-color:var(--sky);
    box-shadow:0 28px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(14,165,233,0.25), 0 0 40px rgba(14,165,233,0.12);
  }
  .card-hole{
    position:absolute;top:14px;left:14px;width:14px;height:14px;border-radius:50%;
    background:var(--navy-900);border:1px solid var(--white-14);z-index:2;
  }
  .card-badge{
    position:absolute;top:16px;right:14px;z-index:2;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;
    padding:5px 10px;border-radius:2px;background:var(--navy-900);border:1px solid var(--sky);color:var(--sky-light);
  }
  /* A New badge reads green, not sky: sky is the site accent and says
     nothing in particular, green is the universal shorthand for sealed
     and untouched — and it separates at a glance from the graded
     pre-owned badges beside it. */
  .card-badge.is-new{border-color:var(--green);color:var(--green-light);}
  .card-badge.sold{background:var(--red);border-color:var(--red);color:var(--white);}

  /* ===== STAR RATINGS (catalog cards + reviews modal) ===== */
  .stars-row{display:inline-flex;gap:1px;line-height:1;}
  .star-slot{position:relative;display:inline-block;color:var(--white-14);}
  .star-base{color:var(--white-14);}
  .star-fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#F5B800;}
  .card-rating{
    display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
    padding:0;margin-bottom:10px;color:var(--white-50);font-size:11.5px;
  }
  .card-rating:hover{color:var(--white-72);}
  .card-rating.none{font-size:11px;color:var(--white-50);text-decoration:underline;text-underline-offset:2px;}
  .card-rating-text{font-weight:600;}

  .review-summary-row{display:flex;align-items:center;gap:10px;margin:6px 0 20px;flex-wrap:wrap;}
  .review-item{padding:14px 0;border-top:1px solid var(--white-14);}
  .review-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .review-reviewer{font-weight:700;font-size:13.5px;color:var(--white);}
  .verified-buyer-badge{
    margin-left:8px;font-size:10px;font-weight:700;color:var(--whatsapp);
    background:rgba(37,211,102,0.12);border-radius:20px;padding:2px 8px;white-space:nowrap;
  }
  .review-comment{margin-top:8px;font-size:13.5px;color:var(--white-72);line-height:1.6;}
  .review-date{margin-top:6px;font-size:11px;color:var(--white-50);}
  .star-picker{display:flex;gap:4px;font-size:28px;line-height:1;}
  .star-pick{color:var(--white-14);cursor:pointer;transition:color .12s ease;}
  .star-pick.active{color:#F5B800;}
  /* Honeypot field for public forms — visually hidden off-screen (not
     display:none/visibility:hidden, which unsophisticated bots often skip
     filling anyway; this catches the more thorough ones too) rather than
     truly hidden, so it still gets auto-filled by form-filling bots while
     staying invisible and unreachable by tab order for real visitors. */
  .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
  /* Staff-role admins never see owner-only sections (staff accounts, blog,
     catalog/pricing, feedback moderation) — the server independently
     enforces this too via is_owner_session(), this is just so a staff
     account isn't shown controls that would just error if clicked. */
  body.staff-role .owner-only-section{display:none !important;}
  .role-badge{
    display:inline-flex;align-items:center;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.04em;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle;
  }
  .role-badge.owner{background:rgba(14,165,233,0.14);color:var(--sky-light);}
  .role-badge.staff{background:var(--white-08);color:var(--white-50);}
  .blog-list-card:hover{border-color:var(--sky) !important;}
  .priority-badge{
    display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--navy-900);background:var(--sky-light);border-radius:20px;padding:3px 9px;font-weight:700;
  }
  .flagship-badge{
    display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--sky-light);border:1px solid rgba(14,165,233,0.4);border-radius:20px;padding:4px 10px;
    background:rgba(14,165,233,0.1);
  }
  .low-stock-badge{
    display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--red-light);border:1px solid rgba(225,29,60,0.4);border-radius:20px;padding:4px 10px;
    background:rgba(225,29,60,0.08);
  }
  .inspection-link{
    display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0;
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--sky-light);margin-bottom:14px;
  }
  .inspection-link:hover{color:var(--sky);text-decoration:underline;text-underline-offset:3px;}
  .inspection-link svg{width:13px;height:13px;flex-shrink:0;}
  /* Compact product cards hide specs/features/inspection-link behind this —
     full details (specs, features, condition report) live in the product
     modal, which this opens (same target as clicking the card itself). */
  .view-details-link{
    display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:0;
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--sky-light);margin-bottom:14px;
  }
  .view-details-link:hover{color:var(--sky);text-decoration:underline;text-underline-offset:3px;}
  .inspection-summary{
    display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:20px;
    border:1px solid var(--white-14);border-radius:var(--radius);background:var(--navy-900);
  }
  .inspection-summary .battery-ring{
    width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    border:3px solid var(--sky);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--sky-light);
  }
  .inspection-summary .label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;color:var(--white-50);}
  .inspection-list{border-top:1px solid var(--white-14);margin-bottom:20px;}
  .inspection-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:13px 0;border-bottom:1px solid var(--white-14);font-size:14px;
  }
  .inspection-row .inspection-status{
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;
    padding:4px 10px;border-radius:20px;border:1px solid var(--white-14);color:var(--white-72);flex-shrink:0;
  }
  .inspection-row .inspection-status.excellent,.inspection-row .inspection-status.good{border-color:var(--sky);color:var(--sky-light);}
  .inspection-row .inspection-status.fair{border-color:rgba(225,29,60,0.4);color:var(--red-light);}
  .inspection-notes{
    font-size:13px;color:var(--white-72);padding:14px;border:1px dashed var(--white-14);border-radius:var(--radius);
  }
  .card-img{
    height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:linear-gradient(135deg,var(--navy-700),var(--navy-900));font-size:52px;
    border-bottom:1px solid var(--white-14);position:relative;
  }
  /* Some product photos (e.g. a screen shot powered off) are naturally very
     dark — without a defined edge they bleed straight into the equally-dark
     card chrome around them, reading as a flat void rather than a photo.
     A subtle inset border and bottom vignette keep every photo looking like
     a deliberately framed shot regardless of how dark its own content is. */
  .card-img img{
    width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-premium);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .card:hover .card-img img{transform:scale(1.06);}
  /* Shared "no photo yet" empty state — see productEmoji() in script.js.
     Sized down automatically wherever it lands in a smaller thumbnail
     (recent-viewed strip, related products) via the width-based rule below. */
  .no-photo-placeholder{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    width:100%;height:100%;color:var(--white-50);
  }
  .no-photo-placeholder svg{width:40px;height:40px;flex-shrink:0;}
  .no-photo-placeholder span{
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--white-50);
  }
  .recent-mini-card .thumb .no-photo-placeholder{gap:4px;}
  .recent-mini-card .thumb .no-photo-placeholder svg{width:22px;height:22px;}
  .recent-mini-card .thumb .no-photo-placeholder span{font-size:8px;}
  .card-img::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(6,12,24,0.32) 100%);
  }
  .verified-stamp{
    position:absolute;bottom:10px;right:10px;z-index:2;
    display:flex;align-items:center;gap:5px;
    background:rgba(10,20,40,0.85);border:1px solid var(--sky);border-radius:20px;
    padding:4px 10px 4px 6px;font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--sky-light);text-transform:uppercase;letter-spacing:0.03em;
  }
  .verified-stamp svg{width:13px;height:13px;flex-shrink:0;}
  .photo-count{
    position:absolute;bottom:10px;left:10px;z-index:2;
    display:flex;align-items:center;gap:5px;
    background:rgba(10,20,40,0.85);border:1px solid var(--white-14);border-radius:20px;
    padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--white-72);text-transform:uppercase;letter-spacing:0.03em;
  }
  .card-img:hover .photo-count{border-color:var(--sky);color:var(--sky-light);}
  .card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
  .card-title-row .card-title{margin-bottom:0;}
  .wishlist-btn{
    background:none;border:none;color:var(--white-50);font-size:22px;line-height:1;cursor:pointer;
    flex-shrink:0;padding:11px;margin:-11px;transition:color .15s ease,transform .15s ease;
  }
  .wishlist-btn:hover{transform:scale(1.12);color:var(--red-light);}
  .wishlist-btn.active{color:var(--red);}
  .compare-toggle{
    display:flex;align-items:center;gap:8px;margin-top:12px;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--white-50);
  }
  .compare-toggle input{width:14px;height:14px;accent-color:var(--sky);cursor:pointer;}
  .compare-toggle.active{color:var(--sky-light);}
  .card-body{padding:22px 20px 24px;}
  .card-category{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--sky-light);margin-bottom:8px;
  }
  .card-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin-bottom:10px;}
  .card-specs{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--white-72);
    display:grid;gap:4px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--white-14);
  }
  .card-features{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 12px;}
  .feature-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--sky-light);border:1px solid var(--white-14);border-radius:20px;padding:4px 10px;
    display:inline-flex;align-items:center;gap:5px;
  }
  .feature-tag.warranty-tag{
    color:var(--sky-light);border-color:var(--sky);background:rgba(14,165,233,0.12);font-weight:600;
  }
  .card-price{
    font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:24px;color:var(--sky-light);
    margin-bottom:14px;letter-spacing:-0.01em;
  }
  .card-body .card-price{margin-bottom:2px;}
  .card-price-usd{display:block;margin-top:0;margin-bottom:14px;}
  .card-body .btn{width:100%;}

  /* ===== HERO CATEGORY TILES =====
     Replaces the decorative hero clip with the six things we actually sell.
     Each tile is a door into that category's page, which lists the stock and
     the brands carried. Built to take a photograph the moment there is one:
     .hero-cat-media holds an <img> if data-photo resolves, and the line icon
     underneath is the fallback, not the plan. */
  .hero-categories{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    margin-top:32px;max-width:520px;
  }
  /* A product card, not a padded icon: the photograph is the tile's top half,
     edge to edge, with the name and stock line sitting on the dark card
     beneath it. No inner frame, no letterboxing. */
  .hero-cat{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:0;overflow:hidden;border:1px solid var(--white-14);border-radius:14px;
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 60%);
    color:var(--white-72);text-decoration:none;text-align:center;
    transition:transform .35s var(--ease-premium), border-color .25s ease, color .25s ease, box-shadow .35s var(--ease-premium);
  }
  .hero-cat:hover{
    transform:translateY(-4px);border-color:var(--sky);color:var(--white);
    box-shadow:0 18px 38px rgba(0,0,0,0.38), 0 0 0 1px rgba(14,165,233,0.22);
  }
  .hero-cat:focus-visible{outline:2px solid var(--sky-light);outline-offset:3px;}
  /* Before a photo exists the slot still holds its shape, with the line icon
     centred in it — so a tile never changes size when a photo arrives. */
  .hero-cat-media{
    display:flex;align-items:center;justify-content:center;
    width:100%;aspect-ratio:1/1;flex-shrink:0;overflow:hidden;
    background:rgba(14,165,233,0.10);color:var(--sky-light);
  }
  .hero-cat-media svg{width:30%;height:30%;}
  .hero-cat-media img{width:100%;height:100%;object-fit:cover;display:block;}
  /* The photographs are generated square and already fill the frame, so there
     is no background to show through and nothing to letterbox. */
  .hero-cat-media.has-photo{background:#fff;}
  .hero-cat-text{padding:11px 8px 13px;display:flex;flex-direction:column;gap:3px;}
  .hero-cat-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;line-height:1.25;color:var(--white);}
  .hero-cat-count{
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.03em;
    color:var(--white-50);min-height:13px;
  }
  .hero-cat:hover .hero-cat-count{color:var(--sky-light);}
  @media(max-width:600px){
    /* Two across on a phone: six tiles in three rows, each still a full-width
       tap target within its half. */
    .hero-categories{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px;max-width:none;}
    /* The photo fills the top of the tile edge to edge at phone width too —
       that full-bleed square is what makes the row look like a shop rather
       than a menu. */
    .hero-cat{padding:0;gap:0;border-radius:12px;}
    .hero-cat-text{padding:9px 6px 11px;gap:2px;}
    .hero-cat-name{font-size:12px;}
    .hero-cat-count{font-size:9px;}
  }

  /* ===== CATEGORY HERO PHOTO =====
     The picture from the tile the visitor tapped, shown on the page it opens
     so the landing confirms what they asked for. Floated beside the heading on
     a wide screen; above it on a phone, where a side-by-side would squeeze
     the h1 to a column of single words. */
  .category-hero.has-photo .wrap{position:relative;}
  .category-hero-photo{
    float:right;width:200px;height:200px;object-fit:cover;
    border-radius:16px;border:1px solid var(--white-14);background:#fff;
    margin:0 0 20px 32px;box-shadow:0 18px 44px rgba(0,0,0,0.34);
  }
  @media(max-width:860px){
    .category-hero-photo{width:150px;height:150px;margin:0 0 16px 20px;border-radius:13px;}
  }
  @media(max-width:600px){
    .category-hero-photo{
      float:none;display:block;width:104px;height:104px;
      margin:0 0 16px;border-radius:12px;
    }
  }

  /* ===== SITE SEARCH BAR =====
     Sits directly under the header on every page that shows products, so a
     visitor never has to find the search — it is already in front of them.
     It submits to marketplace.php, which is the only page that searches both
     ZagoTech's own stock and every verified seller's listings in one pass,
     matching on product name, brand, store and category. */
  .site-search{
    border-bottom:1px solid var(--white-14);
    background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  }
  .site-search-inner{
    display:flex;align-items:center;gap:10px;
    padding:14px 24px;max-width:1280px;margin:0 auto;
  }
  .site-search form{display:flex;align-items:center;gap:10px;width:100%;}
  .site-search-field{
    flex:1;display:flex;align-items:center;gap:10px;min-width:0;
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:999px;
    padding:0 6px 0 16px;transition:border-color .2s ease;
  }
  .site-search-field:focus-within{border-color:var(--sky);}
  .site-search-field svg{width:17px;height:17px;color:var(--white-50);flex-shrink:0;}
  .site-search-field input{
    flex:1;min-width:0;background:none;border:none;outline:none;color:var(--white);
    font-family:'Inter',sans-serif;font-size:14px;padding:12px 0;
  }
  .site-search-field input::placeholder{color:var(--white-50);}
  .site-search-btn{
    flex-shrink:0;border:none;cursor:pointer;border-radius:999px;
    background:var(--sky);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;
    font-size:12px;text-transform:uppercase;letter-spacing:0.03em;padding:10px 20px;
    transition:opacity .2s ease;
  }
  .site-search-btn:hover{opacity:0.9;}
  @media(max-width:600px){
    .site-search-inner{padding:10px 14px;}
    .site-search-field{padding:0 5px 0 12px;}
    .site-search-field input{font-size:13px;padding:10px 0;}
    .site-search-btn{padding:9px 14px;font-size:11px;}
  }

  /* ===== DISPLAY CURRENCY (buyers outside Nigeria) =====
     Browsing only — see currency.js. Sized to sit in the nav beside the
     search and theme buttons without drawing attention away from them. */
  .currency-picker{
    appearance:none;-webkit-appearance:none;
    background:transparent;border:1px solid var(--white-14);border-radius:20px;
    color:var(--white-72);font-family:'IBM Plex Mono',monospace;font-size:11px;
    padding:7px 22px 7px 10px;cursor:pointer;line-height:1;
    background-image:linear-gradient(45deg,transparent 50%,var(--white-50) 50%),linear-gradient(135deg,var(--white-50) 50%,transparent 50%);
    background-position:calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size:4px 4px, 4px 4px;background-repeat:no-repeat;
    transition:border-color .2s ease,color .2s ease;
  }
  .currency-picker:hover{border-color:var(--sky);color:var(--white);}
  .currency-picker:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px;}
  .currency-picker option{background:var(--navy-800);color:var(--white);}
  /* A converted price is an estimate, so it is never styled as firmly as the
     Naira figure a customer is actually charged. */
  .zprice-converted{opacity:0.95;}
  [data-currency-note]{
    font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.6;
    color:var(--white-50);margin-top:6px;
  }
  @media(max-width:600px){
    .currency-picker{font-size:10px;padding:6px 19px 6px 8px;background-position:calc(100% - 10px) 50%, calc(100% - 6px) 50%;}
  }

  /* ===== TABBED SECTIONS (homepage "Why ZagoTech" / "Tell us what you need")
     Eight full-height sections were each given a whole screen of their own,
     which left a visitor scrolling past supporting material to reach anything.
     They are now panels behind a tab bar — the same content, one click away
     rather than one scroll away. */
  .ztab-section{background:var(--navy-800);border-top:1px solid var(--white-14);border-bottom:1px solid var(--white-14);}
  .ztab-intro{max-width:640px;color:var(--white-72);font-size:15px;line-height:1.7;margin:-8px 0 22px;}
  .ztabs{
    display:flex;gap:8px;margin-bottom:28px;border-bottom:1px solid var(--white-14);
    /* Never wraps to a second row — on a narrow screen it scrolls sideways,
       the same pattern the shop filters already use. */
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px;
  }
  .ztabs::-webkit-scrollbar{display:none;}
  .ztab{
    flex:0 0 auto;background:none;border:none;cursor:pointer;white-space:nowrap;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.01em;
    color:var(--white-50);padding:12px 4px;margin-right:22px;
    border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s ease,border-color .2s ease;
  }
  .ztab:last-child{margin-right:0;}
  .ztab:hover{color:var(--white-72);}
  .ztab.active{color:var(--white);border-bottom-color:var(--sky);}
  .ztab:focus-visible{outline:2px solid var(--sky-light);outline-offset:3px;border-radius:3px;}
  .ztab-panel{display:none;animation:ztabIn .35s var(--ease-premium);}
  .ztab-panel.active{display:block;}
  /* Each panel still carries the heading it had as a standalone section — the
     words are all kept — but at section size it competed with the block's own
     title and produced two giant headings in a row. Demoted to a subheading:
     the block title says where you are, the tab says which one you picked, and
     this says what it is. */
  .ztab-panel > .section-head{margin-top:0;margin-bottom:20px;}
  .ztab-panel > .section-head h2{font-size:clamp(19px,2vw,24px);letter-spacing:-0.01em;}
  .ztab-panel > .section-head .eyebrow{font-size:10px;margin-bottom:4px;}
  .ztab-panel > .section-head .eyebrow::before{width:16px;}
  @keyframes ztabIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  @media(prefers-reduced-motion:reduce){ .ztab-panel{animation:none;} }
  @media(max-width:600px){
    .ztabs{margin:0 -24px 22px;padding:0 24px 1px;gap:0;}
    .ztab{font-size:13px;padding:11px 2px;margin-right:18px;}
    .ztab-intro{font-size:14px;margin-bottom:18px;}
  }

  /* ===== PRODUCT GRID — SHARED PREMIUM TREATMENT =====
     Every catalog on the site (homepage shop grid, the category pages,
     brand pages, marketplace, and a seller's storefront) renders the same
     .card, so these rules are the one place the catalog's proportions,
     rhythm and hierarchy are set.

     Deliberately scoped to 601px and up: the phone layout is a tuned
     two-per-row grid with its own sizes further down this file, and it
     stays exactly as it is. */
  @media(min-width:601px){
    /* Cards in a row end up different heights when names wrap differently.
       Making the card a column and pushing the price/CTA block to the
       bottom lines the prices up across the whole row, which is most of
       what separates a considered catalog from a stack of boxes. */
    .grid > .card{display:flex;flex-direction:column;}
    .grid > .card > .card-body{flex:1;display:flex;flex-direction:column;}
    .grid > .card .card-foot{margin-top:auto;}

    /* One proportion for every photo, whatever its source file, so the grid
       reads on a single horizontal rhythm instead of a fixed 180px band. */
    .card-img{height:auto;aspect-ratio:4/3;}

    /* Two lines of title, always — a one-line name still reserves the
       second line so the specs, price and CTA below it align across the row. */
    .card-title{
      font-size:16px;line-height:1.35;min-height:2.7em;margin-bottom:2px;
      display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    /* The spec summary gets two lines and no more: enough for a full
       "Intel Core i7 8th Gen, 16GB RAM, 512GB SSD" without a long string
       pushing one card taller than the rest of its row. Clamping to a single
       line instead would cut a value mid-word ("512GB SSD" -> "51…"), which
       is worse than useless to someone comparing machines. */
    .card-specs{font-size:11.5px;line-height:1.55;}
    .card-specs > div{
      display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }

    /* A glass pill rather than a hard-edged rectangle, so the badge sits on
       the photo instead of competing with it. */
    .card-badge{
      border-radius:999px;padding:5px 11px;
      background:rgba(8,16,32,0.72);border-color:rgba(14,165,233,0.5);
      -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    }
    .card-badge.sold{background:rgba(225,29,60,0.92);border-color:transparent;}

    /* Prices line up digit-for-digit down a column. */
    .card-price{font-size:22px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}

    /* The catalog CTA: price and action on one baseline. A full-width solid
       button repeated down a grid is the loudest thing on the page and
       flattens the product itself — this keeps the product first and still
       leaves an obvious action, with the whole card clickable behind it. */
    .card-foot{
      display:flex;align-items:baseline;justify-content:space-between;gap:12px;
      padding-top:14px;margin-top:16px;border-top:1px solid var(--white-14);
    }
    .card-foot .card-price{margin-bottom:0;}
    .card-foot-cta{
      font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
      color:var(--sky-light);white-space:nowrap;flex-shrink:0;transition:gap .2s ease;
      display:inline-flex;align-items:center;gap:6px;
    }
    .card-link:hover .card-foot-cta{gap:10px;color:var(--sky);}
    .card-body{padding:20px 20px 22px;}
  }

  /* A whole-card link: one target for the product, so nothing inside has to
     compete for the click. */
  .card-link{display:block;text-decoration:none;color:inherit;}
  .card-link:hover{text-decoration:none;}
  .empty-state{
    grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--white-72);
    border:1px dashed var(--white-14);border-radius:var(--radius);
  }
  /* Initial-load placeholder for #laptopGrid, shaped like the real .card
     it's standing in for (same border/radius) rather than bare "Loading…"
     text — swapped out for the actual grid the instant loadLaptops()
     resolves, so it's only ever visible for the initial fetch. */
  .skeleton-card{
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 40%);
    border:1px solid var(--white-14);border-radius:var(--radius);overflow:hidden;
  }
  .skeleton-card-img{height:180px;background:var(--navy-700);}
  .skeleton-card-body{padding:20px;}
  .skeleton-bar{height:12px;border-radius:4px;background:var(--navy-700);margin-bottom:12px;width:100%;}
  .skeleton-bar.short{width:55%;}
  .skeleton-bar.price{height:22px;width:45%;margin-top:14px;}
  .skeleton-card-img,.skeleton-bar{position:relative;overflow:hidden;}
  .skeleton-card-img::after,.skeleton-bar::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
    animation:skeletonShimmer 1.6s ease-in-out infinite;
  }
  @keyframes skeletonShimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
  @media(max-width:600px){.skeleton-card-img{height:100px;}}

  /* ===== WHY US ===== */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .why-item{border-top:2px solid var(--sky);padding-top:18px;}
  .why-item h3{font-size:21px;font-weight:800;margin-bottom:10px;}
  .why-item p{color:var(--white-72);font-size:14px;}

  /* ===== BUSINESS REGISTRATION ===== */
  .registration-card{
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:32px;
  }
  .registration-info p{color:var(--white-72);font-size:15px;margin-bottom:20px;}
  .registration-info p strong{color:var(--white);}
  .registration-detail{
    display:flex;justify-content:space-between;gap:12px;padding:10px 0;
    border-top:1px solid var(--white-14);font-size:14px;
  }
  .registration-detail:last-of-type{border-bottom:1px solid var(--white-14);margin-bottom:20px;}
  .registration-detail span{color:var(--white-50);}
  .registration-detail strong{font-family:'IBM Plex Mono',monospace;color:var(--white);font-size:13px;}
  .registration-cert-links{display:flex;flex-wrap:wrap;gap:20px;}
  @media(max-width:760px){
    .registration-card{padding:24px;}
  }

  /* ===== TESTIMONIALS ===== */
  /* A deliberate light-card break in an otherwise dark page — cards stay
     pure white regardless of the site's dark/light theme toggle, so the
     colors below are hardcoded rather than pulled from the theme tokens. */
  .testimonial-section{padding-top:19px;}
  .testimonial-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
  }
  .testimonial-track{
    display:flex;gap:24px;width:max-content;padding:4px 0 12px;
    animation:testimonialSlide var(--marquee-duration,42s) linear infinite;
  }
  @keyframes testimonialSlide{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .testimonial-card{
    background:#FFFFFF;border:1px solid rgba(10,20,40,0.08);border-radius:var(--radius);
    padding:26px 24px;display:flex;flex-direction:column;gap:16px;
    box-shadow:0 8px 24px rgba(10,20,40,0.14);transition:transform .2s ease, border-color .2s ease;
    width:340px;flex-shrink:0;
  }
  .testimonial-card:hover{transform:translateY(-4px);border-color:var(--sky);}
  .stars{color:var(--sky);font-size:14px;letter-spacing:2px;}
  .quote{
    color:rgba(10,20,40,0.72);font-size:14px;line-height:1.6;flex-grow:1;
    display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  .quote-product{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:0.03em;
    color:var(--sky);background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.2);
    border-radius:20px;padding:4px 10px;align-self:flex-start;
  }
  .author{display:flex;align-items:center;gap:12px;}
  .avatar{
    width:38px;height:38px;border-radius:50%;background:var(--sky);
    display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:700;
    font-size:12px;color:#fff;flex-shrink:0;
  }
  .a-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;color:#0A1428;}
  .a-loc{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(10,20,40,0.5);}
  @media(prefers-reduced-motion:reduce){
    .testimonial-track{animation:none;flex-wrap:wrap;width:auto;}
  }
  @media(max-width:640px){
    .testimonial-card{width:280px;}
  }

  /* ===== FEEDBACK FORM ===== */
  .feedback-section{padding-top:0;}
  .feedback-form{
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 45%);
    border:1px solid var(--white-14);border-radius:var(--radius);
    padding:32px;max-width:640px;box-shadow:0 12px 32px rgba(0,0,0,0.2);
  }
  .feedback-form textarea{
    width:100%;background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:12px;color:var(--white);font-family:'Inter',sans-serif;font-size:14px;resize:vertical;
  }
  .feedback-form textarea:focus{outline:none;border-color:var(--white-50);}

  /* ===== REQUEST A DEVICE FORM =====
     The form covers every category we sell, so it asks more than it used to.
     Grouping the questions into numbered steps is what keeps that from
     reading as a wall of inputs: each fieldset answers one question about
     the order, and the customer can see how much is left. */
  .req-form{padding:28px 32px 30px;}
  .req-group{
    border:none;border-top:1px solid var(--white-14);
    margin:0 0 22px;padding:20px 0 0;min-width:0;
  }
  .req-group:first-of-type{border-top:none;padding-top:0;}
  .req-group .form-row:last-child{margin-bottom:0;}
  .req-legend{
    display:flex;align-items:center;gap:10px;padding:0;margin-bottom:16px;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
    letter-spacing:0.01em;color:var(--white);
  }
  .req-step{
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
    letter-spacing:0.06em;color:var(--sky-light);
    background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.3);
    border-radius:2px;padding:3px 6px;line-height:1;
  }
  .req-optional{
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
    text-transform:uppercase;letter-spacing:0.05em;color:var(--white-50);
  }
  /* Three choices, side by side — a dropdown would hide two of the three
     answers behind a tap, and condition is the one the price turns on. */
  .req-choice{display:flex;gap:8px;}
  .req-choice label{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:10px 8px;cursor:pointer;text-align:center;
    font-size:13px;color:var(--white-72);transition:border-color .15s ease,color .15s ease,background .15s ease;
  }
  .req-choice label:hover{border-color:var(--white-50);color:var(--white);}
  .req-choice input{position:absolute;opacity:0;width:0;height:0;}
  .req-choice input:checked + span{color:var(--white);font-weight:600;}
  .req-choice label:has(input:checked){
    border-color:var(--sky);background:rgba(14,165,233,0.1);color:var(--white);
  }
  .req-choice input:focus-visible + span{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px;}
  .req-hint{
    margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--white-50);
  }
  .req-bulk-hint{
    margin-top:2px;padding:10px 12px;border-radius:var(--radius);
    background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.24);
    color:var(--white-72);
  }
  .req-bulk-hint .link-btn{font-size:12px;}
  .req-tradein-toggle{max-width:none;}
  .req-foot{
    margin:12px 0 0;font-size:12px;color:var(--white-50);
  }

  /* ===== LOOK UP SPECS (admin) =====
     The button sits with the name field it works from, and a field it
     filled is tinted — so what came from a lookup and what was typed by
     hand stay tellable apart right up until Save. */
  .spec-lookup-row{display:flex;gap:10px;align-items:stretch;}
  .spec-lookup-row input{flex:1;min-width:0;}
  .spec-lookup-row .btn{flex-shrink:0;white-space:nowrap;}

  /* ===== PRODUCT UPLOAD FORM =====
     The spec blocks swap in and out as the type changes, so without a
     boundary the form reads as one long undifferentiated column of inputs
     and it is genuinely hard to see where the specs start. A hairline and
     a little air is all it needs. */
  #computerSpecFields,
  #officeEquipmentSpecFields,
  #phoneSpecFields,
  #accessorySpecFields,
  #consoleSpecFields,
  #networkingSpecFields{
    border-top:1px solid var(--white-14);
    margin:22px 0 4px;padding-top:20px;
  }
  /* A field the lookup filled, rather than the admin. Tinted until Save so
     "did I check that?" has a visible answer, and marked with more than
     colour alone so it still reads for anyone who cannot see the tint. */
  .form-row input.spec-filled,
  .form-row select.spec-filled,
  .form-row textarea.spec-filled{
    border-color:rgba(14,165,233,0.45);
    background:rgba(14,165,233,0.06);
    box-shadow:inset 3px 0 0 var(--sky);
  }
  .form-row:has(.spec-filled) > label::after{
    content:" · auto-filled";
    color:var(--sky-light);font-weight:500;letter-spacing:0.02em;
  }
  @media(max-width:600px){
    #computerSpecFields,
    #officeEquipmentSpecFields,
    #phoneSpecFields,
    #accessorySpecFields,
    #consoleSpecFields,
    #networkingSpecFields{
      margin-top:18px;padding-top:16px;
    }
  }

  .spec-lookup-msg{
    margin-top:8px;font-size:12px;line-height:1.55;color:var(--white-50);
  }
  .spec-lookup-msg.ok{color:var(--green-light,#4ADE80);}
  .spec-lookup-msg.warn{color:#FBBF24;}
  .spec-lookup-msg.err{color:var(--red-light,#F87171);}
  .form-row input.spec-filled,
  .form-row select.spec-filled,
  .form-row textarea.spec-filled{
    border-color:rgba(14,165,233,0.45);background:rgba(14,165,233,0.06);
  }
  @media(max-width:600px){
    .spec-lookup-row{flex-direction:column;}
    .spec-lookup-row .btn{width:100%;min-height:44px;}
  }

  /* ===== THE REQUEST FORM ON THE HOMEPAGE =====
     The same form the support page carries, given the room the homepage
     has. The column beside it answers what someone is actually weighing
     before they type anything: what happens after they press send. */
  .req-home{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
    gap:28px;align-items:start;
  }
  .req-home-main .req-form{max-width:none;}
  .req-home-intro{margin-bottom:24px;max-width:72ch;}
  /* Follows the form down: the form is roughly twice the height of this
     column, so without it the reassurance scrolls away at step one. */
  .req-home-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:104px;}
  .req-side-card{
    background:var(--navy-800);border:1px solid var(--white-14);
    border-radius:var(--radius);padding:22px 20px;
  }
  .req-side-card h3{font-family:'Archivo',sans-serif;font-size:15px;font-weight:800;margin-bottom:14px;}
  .req-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .req-steps li{display:flex;gap:11px;align-items:flex-start;}
  .req-steps .req-step{margin-top:2px;flex-shrink:0;}
  .req-steps strong{display:block;font-size:13px;font-weight:700;color:var(--white);margin-bottom:2px;}
  .req-steps li > div{font-size:12.5px;line-height:1.55;color:var(--white-72);}
  .req-side-ai{
    background:linear-gradient(135deg, rgba(14,165,233,0.1), rgba(14,165,233,0.03));
    border-color:rgba(14,165,233,0.25);
  }
  .req-side-ai .ai-consultant-icon{margin-bottom:12px;}
  .req-side-ai h3{margin-bottom:6px;}
  .req-side-ai p{color:var(--white-72);font-size:13px;line-height:1.55;margin-bottom:14px;}
  @media (max-width:980px){
    /* Stacked, and the reassurance sits under the form rather than pushing
       it below the fold — the form is what the section is for. */
    .req-home{grid-template-columns:1fr;gap:20px;}
    .req-home-side{position:static;}
  }
  @media (max-width:720px){
    .req-form{padding:22px 18px 24px;}
    .req-group{margin-bottom:18px;padding-top:16px;}
    .req-choice{flex-wrap:wrap;}
    .req-choice label{flex:1 1 calc(33.333% - 6px);min-width:92px;padding:11px 6px;font-size:12px;}
  }
  .star-input{display:flex;gap:6px;}
  .star-btn{
    background:none;border:none;font-size:30px;line-height:1;cursor:pointer;
    color:var(--white-14);transition:color .15s ease, transform .15s ease;
    padding:7px 5px;margin:-7px -5px;
  }
  .star-btn:hover{transform:scale(1.12);}
  .star-btn.selected{color:var(--sky-light);}
  .admin-feedback-row{
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    padding:14px 0;border-bottom:1px solid var(--white-14);
  }
  .admin-feedback-row .fb-body{flex:1;}
  .admin-feedback-row .fb-quote{font-size:13px;color:var(--white-72);margin-top:4px;}
  .admin-feedback-row .fb-product{font-size:11px;color:var(--sky-light);margin-top:2px;}
  .admin-feedback-row .fb-status{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;
    padding:3px 8px;border-radius:2px;border:1px solid var(--white-14);color:var(--white-50);
  }
  .admin-feedback-row .fb-status.approved{border-color:var(--sky);color:var(--sky-light);}

  /* ===== WARRANTY / POLICY ===== */
  .policy-section{background:var(--navy-800);border-top:1px solid var(--white-14);border-bottom:1px solid var(--white-14);}
  .policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:32px;}
  .policy-card{
    background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 50%);
    border:1px solid var(--white-14);border-radius:var(--radius);padding:26px 24px;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .policy-card:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 14px 30px rgba(0,0,0,0.25);}
  .policy-num{font-family:'IBM Plex Mono',monospace;color:var(--sky-light);font-size:13px;font-weight:600;margin-bottom:14px;}
  .policy-card h3{font-size:19px;font-weight:800;margin-bottom:10px;}
  .policy-card p{color:var(--white-72);font-size:14px;}
  .policy-note{color:var(--white-72);font-size:13px;max-width:760px;}
  .policy-note a{color:var(--sky-light);text-decoration:underline;text-underline-offset:3px;}
  .policy-note a:hover{color:var(--white);}
  /* WhatsApp links get the brand green instead of the default sky-blue link colour */
  #warrantyWaLink, #deliveryWaLink, #faqWaLink{color:var(--whatsapp);}
  #warrantyWaLink:hover, #deliveryWaLink:hover, #faqWaLink:hover{color:#1DA851;}
  #footWaLink, #footWaLink svg{color:var(--whatsapp);}
  #footWaLink:hover, #footWaLink:hover svg{color:#1DA851;}

  /* ===== DELIVERY TABLE ===== */
  .delivery-table{border:1px solid var(--white-14);border-radius:var(--radius);overflow:hidden;margin-bottom:24px;}
  .delivery-row{
    display:grid;grid-template-columns:2fr 1.2fr 1.2fr;gap:16px;
    padding:16px 20px;border-bottom:1px solid var(--white-14);
    font-size:14px;background:var(--navy-900);
  }
  .delivery-row:last-child{border-bottom:none;}
  .delivery-row div:first-child{font-family:'Archivo',sans-serif;font-weight:600;}
  .delivery-row div:nth-child(2){color:var(--white-72);}
  .delivery-row div:nth-child(3){font-family:'IBM Plex Mono',monospace;color:var(--sky-light);}
  .delivery-head{background:var(--navy-800);font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:0.04em;color:var(--white-72);}
  .delivery-head div{color:var(--white-72) !important;font-family:'Archivo',sans-serif !important;font-weight:700 !important;}

  /* ===== FAQ ===== */
  .faq-list{border-top:1px solid var(--white-14);}
  #faqToggleBtn{margin:20px 0;}
  .faq-item{border-bottom:1px solid var(--white-14);}
  .faq-item summary{
    list-style:none;cursor:pointer;padding:22px 4px;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";flex-shrink:0;font-family:'Inter',sans-serif;font-weight:400;font-size:22px;
    color:var(--sky-light);width:28px;height:28px;border:1px solid var(--white-14);border-radius:50%;
    display:flex;align-items:center;justify-content:center;transition:transform .2s ease;
  }
  .faq-item[open] summary::after{content:"–";}
  .faq-item[open] summary{color:var(--sky-light);}
  .faq-answer{color:var(--white-72);font-size:14px;padding:0 40px 22px 4px;max-width:760px;}

  /* ===== LOCATION ===== */
  .location{background:var(--navy-800);border-top:1px solid var(--white-14);border-bottom:1px solid var(--white-14);}
  .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
  .loc-info{padding:88px 48px 88px 0;}
  .loc-info h2{font-size:clamp(30px,4vw,42px);margin-bottom:20px;}
  .loc-info p{color:var(--white-72);margin-bottom:14px;font-size:15px;}
  .loc-info .addr{font-family:'IBM Plex Mono',monospace;color:var(--white);font-size:15px;margin:18px 0;padding:16px;border:1px solid var(--white-14);border-left:3px solid var(--sky);}
  .icon-link.loc-email-link{display:flex;color:var(--white);font-size:15px;margin-bottom:18px;}
  .loc-map{min-height:420px;border-left:1px solid var(--white-14);}
  .loc-map iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(1) invert(0.92) contrast(0.88);}

  /* ===== STOCK ALERTS ===== */
  .stock-alert-section{padding-top:0;}
  .stock-alert-box{
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 45%);
    border:1px solid var(--white-14);border-radius:var(--radius);padding:44px;
    box-shadow:0 12px 32px rgba(0,0,0,0.2);
  }
  .stock-alert-box h2{font-size:clamp(26px,3vw,36px);margin-top:10px;}
  @media(max-width:900px){
    .stock-alert-box{grid-template-columns:1fr;gap:28px;padding:28px;}
  }

  /* ===== AI CONSULTANT BANNER ===== */
  .ai-consultant-banner{
    display:flex;align-items:center;gap:20px;margin-top:28px;
    background:linear-gradient(135deg, rgba(14,165,233,0.1), rgba(14,165,233,0.03));
    border:1px solid rgba(14,165,233,0.25);border-radius:var(--radius);padding:22px 24px;
  }
  .ai-consultant-icon{
    width:48px;height:48px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg, var(--sky), #0669a8);color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .ai-consultant-copy{flex:1;}
  .ai-consultant-copy h3{font-family:'Archivo',sans-serif;font-size:16px;font-weight:800;margin-bottom:4px;}
  .ai-consultant-copy p{color:var(--white-72);font-size:13px;line-height:1.5;}
  .ai-consultant-btn{flex-shrink:0;white-space:nowrap;}
  @media(max-width:700px){
    .ai-consultant-banner{flex-direction:column;text-align:center;padding:24px 20px;}
  }

  /* ===== FINAL CTA ===== */
  .final-cta-section{
    background:
      radial-gradient(ellipse 700px 380px at 50% 0%, rgba(14,165,233,0.12), transparent 65%),
      linear-gradient(180deg,var(--navy-900),var(--navy-800));
    border-top:1px solid var(--white-14);
    text-align:center;
  }
  .final-cta{max-width:640px;margin:0 auto;}
  .final-cta h2{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-0.01em;margin-bottom:16px;}
  .final-cta p{color:var(--white-72);font-size:16px;line-height:1.6;margin-bottom:32px;}
  .final-cta-actions{justify-content:center;}

  /* ===== FOOTER ===== */
  footer{padding:64px 0 32px;}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:48px;}
  .foot-logo{font-family:'Archivo',sans-serif;font-weight:900;font-size:26px;margin-bottom:10px;}
  .foot-motto{font-style:italic;color:var(--sky-light);font-family:'Archivo',sans-serif;font-size:14px;}
  .foot-social-row{display:flex;gap:12px;margin-top:18px;}
  .social-icon-link{display:block;line-height:0;transition:transform .15s ease,opacity .15s ease;}
  .social-icon-link:hover{transform:translateY(-2px);opacity:0.88;}
  .foot-col h4{font-family:'Archivo',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:16px;color:var(--white-72);}
  .foot-col li{margin-bottom:10px;font-size:14px;}
  .foot-col a:hover{color:var(--sky-light);}
  .icon-link{display:inline-flex;align-items:center;gap:7px;}
  .icon-link svg{width:14px;height:14px;flex-shrink:0;color:var(--white-72);}
  .icon-link:hover svg{color:var(--sky-light);}
  .paystack-badge{
    display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 12px;
    border:1px solid var(--white-14);border-radius:20px;font-size:11.5px;color:var(--white-50);
  }
  .paystack-badge svg{width:14px;height:14px;flex-shrink:0;color:var(--whatsapp);}
  .paystack-badge strong{color:#00C3F7;font-weight:800;}
  .foot-bottom{
    border-top:1px solid var(--white-14);padding-top:24px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-size:12px;color:var(--white-72);
  }
  .foot-bottom a{text-decoration:underline;text-underline-offset:3px;}

  /* ===== PRINT RECEIPT ===== */
  #printReceiptArea{position:absolute;left:-9999px;top:0;width:800px;}
  @media print{
    body > *:not(#printReceiptArea){display:none !important;}
    #printReceiptArea{position:static;left:auto;width:auto;color:#000;background:#fff;}
    /* Deliberately no blanket "color:#000 !important" here — the receipt's
       navy/sky-blue branding and green/amber status colour are inline
       styles set by printReceipt() in script.js, and should survive
       printing. Anything left unstyled still falls back to the black set
       on the container above. */
  }

  /* ===== COOKIE CONSENT ===== */
  .cookie-banner{
    position:fixed;left:20px;right:20px;bottom:20px;z-index:70;
    max-width:640px;margin:0 auto;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,0.4);
  }
  .cookie-banner-text{flex:1;min-width:220px;font-size:13px;color:var(--white-72);line-height:1.5;}
  .cookie-banner-text a{color:var(--sky-light);text-decoration:underline;text-underline-offset:2px;}
  @media(max-width:600px){
    .cookie-banner{
      left:12px;right:12px;flex-direction:column;align-items:stretch;text-align:center;
      bottom:calc(12px + env(safe-area-inset-bottom));
    }
    .cookie-banner button{width:100%;}
  }

  .back-to-top{
    position:fixed;bottom:26px;right:26px;z-index:60;
    width:44px;height:44px;border-radius:50%;background:var(--navy-800);color:var(--white);
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--white-14);cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
  }
  .back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .back-to-top:hover{border-color:var(--sky);color:var(--sky-light);}
  @media(max-width:600px){
    .back-to-top{
      right:16px;width:36px;height:36px;
      bottom:calc(16px + env(safe-area-inset-bottom));
    }
    /* Keep card action buttons clear of the floating AI chat/back-to-top buttons */
    .card-body{padding-bottom:36px;}
  }

  /* ===== INSTALL APP ===== */
  /* Anchored just below the header instead of a bottom corner — Tawk.to's
     wrapper uses z-index:2000000000 (its own popups/greeting bubbles always
     paint above literally everything else on the page), so any bottom-corner
     position risks getting covered whenever Tawk's proactive greeting pops
     up. The header area is outside Tawk's and the AI chat widget's territory.
     On the left edge, because the right one already carries the AI chat
     bubble and back-to-top; Tawk sits bottom-left, far below this. */
  /* Sits clear of the site search bar beneath the header — at the old 88px it
     landed on top of the search field, which is the one thing on the page a
     visitor is most likely to reach for first. */
  .install-app-btn{
    /* Directly under the site search bar, which ends at ~125px on desktop
       and ~138px on a phone. It is fixed, so it stays there while the
       page scrolls rather than riding up with the bar. */
    position:fixed;top:136px;left:26px;right:auto;z-index:60;
    display:flex;align-items:center;gap:8px;
    background:var(--navy-800);color:var(--white);
    border:1px solid var(--white-14);border-radius:24px;
    padding:11px 18px 11px 14px;cursor:pointer;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
    transition:transform .2s ease, border-color .2s ease;
  }
  .install-app-btn:hover{border-color:var(--sky);color:var(--sky-light);transform:translateY(-2px);}
  @media(max-width:600px){
    .install-app-btn{
      left:12px;right:auto;padding:9px 14px 9px 12px;font-size:12px;
      top:calc(138px + env(safe-area-inset-top));
    }
  }

  /* ===== AI CHAT WIDGET ===== */
  /* Stacked above .back-to-top (bottom:26px;right:26px;) on the same right
     edge, rather than side-by-side, so the two never overlap. */
  .chat-bubble-btn{
    position:fixed;bottom:96px;right:26px;z-index:61;
    width:58px;height:58px;border-radius:50%;
    background:linear-gradient(135deg, var(--sky), #0669a8);color:#fff;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,0.2);cursor:pointer;
    box-shadow:0 6px 20px rgba(14,165,233,0.45);
    transition:transform .2s ease, box-shadow .2s ease;
    animation:chatBubblePulse 2.6s infinite;
  }
  .chat-bubble-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,165,233,0.55);}
  .chat-bubble-btn.open{background:var(--navy-700);animation:none;}
  @keyframes chatBubblePulse{
    0%{box-shadow:0 0 0 0 rgba(14,165,233,0.5);}
    70%{box-shadow:0 0 0 14px rgba(14,165,233,0);}
    100%{box-shadow:0 0 0 0 rgba(14,165,233,0);}
  }
  .chat-bubble-badge{
    position:absolute;top:-4px;right:-4px;background:#F2542D;color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.03em;
    padding:2px 5px;border-radius:8px;border:2px solid var(--navy-900);
  }
  @media(max-width:600px){
    .chat-bubble-btn{
      width:46px;height:46px;right:16px;
      bottom:calc(64px + env(safe-area-inset-bottom));
    }
  }

  /* A one-time proactive greeting so first-time visitors immediately know
     the bubble is an AI assistant that can help pick a computer — not just
     a generic support-chat icon — without having to hover or click first. */
  .chat-bubble-tooltip{
    display:none;position:fixed;bottom:100px;right:96px;z-index:60;
    width:240px;background:rgba(15,27,48,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--white-14);
    border-radius:12px;padding:14px 26px 14px 16px;box-shadow:0 12px 32px rgba(0,0,0,0.35);
    font-size:13px;line-height:1.5;color:var(--white);cursor:pointer;
  }
  .chat-bubble-tooltip.show{display:block;animation:chatTooltipIn .35s var(--ease-premium);}
  .chat-bubble-tooltip::after{
    content:"";position:absolute;top:24px;right:-7px;width:14px;height:14px;
    background:rgba(15,27,48,0.82);border-right:1px solid var(--white-14);border-bottom:1px solid var(--white-14);
    transform:rotate(-45deg);
  }
  .chat-bubble-tooltip-close{
    position:absolute;top:6px;right:8px;background:none;border:none;color:var(--white-50);
    font-size:16px;line-height:1;cursor:pointer;padding:4px;
  }
  .chat-bubble-tooltip-close:hover{color:var(--white);}
  @keyframes chatTooltipIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  @media(max-width:600px){
    /* Anchored under the header instead of over the hero's CTA stack —
       bottom:114px used to land squarely on top of the "Explore Our
       Services" button and the trust line beneath it on first load. */
    .chat-bubble-tooltip{right:16px;top:56px;bottom:auto;width:200px;}
    .chat-bubble-tooltip::after{display:none;}
  }

  .chat-widget{
    display:none;flex-direction:column;position:fixed;bottom:166px;right:26px;z-index:62;
    width:370px;max-width:calc(100vw - 32px);
    height:min(560px, 72vh);
    height:min(560px, 72dvh);
    background:var(--navy-800);border:1px solid var(--white-14);border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,0.55);overflow:hidden;
  }
  .chat-widget.open{display:flex;}
  .chat-widget-header{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px 16px;background:var(--navy-700);border-bottom:1px solid var(--white-14);
  }
  .chat-widget-header-info{display:flex;align-items:center;gap:10px;}
  .chat-widget-avatar{
    width:36px;height:36px;border-radius:50%;background:var(--sky);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;
  }
  .chat-widget-title{font-weight:700;font-size:14px;color:var(--white);}
  .chat-widget-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--white-50);}
  .chat-status-dot{width:7px;height:7px;border-radius:50%;background:var(--whatsapp);flex-shrink:0;}
  .chat-widget-close{
    background:transparent;border:none;color:var(--white-72);font-size:22px;line-height:1;
    cursor:pointer;padding:2px 6px;
  }
  .chat-widget-close:hover{color:var(--white);}
  .chat-widget-messages{
    flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  }
  .chat-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;}
  .chat-msg.user{align-self:flex-end;background:var(--sky);color:#fff;border-bottom-right-radius:3px;}
  .chat-msg.bot{align-self:flex-start;background:var(--navy-700);color:var(--white-72);border-bottom-left-radius:3px;}
  .chat-msg.typing{display:flex;align-items:center;gap:4px;padding:12px;}
  .chat-msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--white-50);animation:chatTypingDot 1.1s infinite ease-in-out;}
  .chat-msg.typing span:nth-child(2){animation-delay:.15s;}
  .chat-msg.typing span:nth-child(3){animation-delay:.3s;}
  @keyframes chatTypingDot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
  .chat-widget-suggestions{
    display:flex;gap:6px;padding:0 16px 10px;flex-wrap:wrap;
  }
  .chat-suggest-btn{
    background:var(--navy-700);border:1px solid var(--white-14);color:var(--white-72);
    border-radius:20px;padding:6px 12px;font-size:11.5px;cursor:pointer;transition:border-color .15s ease, color .15s ease;
  }
  .chat-suggest-btn:hover{border-color:var(--sky);color:var(--white);}
  .chat-widget-input-row{
    display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--white-14);background:var(--navy-800);
  }
  .chat-widget-input-row input{
    flex:1;background:var(--navy-900);border:1px solid var(--white-14);border-radius:20px;
    padding:10px 14px;color:var(--white);font-family:'Inter',sans-serif;font-size:13.5px;
  }
  .chat-widget-input-row input:focus{outline:none;border-color:var(--sky);}
  .chat-widget-send, .chat-widget-attach{
    width:38px;height:38px;border-radius:50%;border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
    transition:background .15s ease, color .15s ease;
  }
  .chat-widget-send{background:var(--sky);color:#fff;}
  .chat-widget-send:hover{background:#0284c7;}
  .chat-widget-send:disabled{opacity:.5;cursor:not-allowed;}
  .chat-widget-attach{background:transparent;color:var(--white-50);border:1px solid var(--white-14);}
  .chat-widget-attach:hover{color:var(--sky-light);border-color:var(--sky);}
  .chat-widget-attach.has-image{color:var(--sky-light);border-color:var(--sky);background:rgba(14,165,233,0.12);}
  .chat-image-preview{
    display:flex;align-items:center;gap:10px;margin:0 16px 10px;padding:6px 10px 6px 6px;
    background:var(--navy-700);border:1px solid var(--white-14);border-radius:12px;
  }
  .chat-image-preview img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;}
  .chat-image-preview-label{flex:1;font-size:11.5px;color:var(--white-72);}
  .chat-image-remove-btn{
    background:transparent;border:none;color:var(--white-50);font-size:18px;line-height:1;cursor:pointer;
    padding:2px 4px;flex-shrink:0;
  }
  .chat-image-remove-btn:hover{color:var(--red-light);}
  .chat-msg.user .chat-msg-img{display:block;max-width:180px;border-radius:10px;margin-bottom:6px;}
  .chat-widget-disclaimer{
    padding:0 16px 12px;font-size:10px;color:var(--white-50);text-align:center;
  }
  @media(max-width:600px){
    .chat-widget{
      right:12px;left:12px;bottom:0;width:auto;max-width:none;
      /* dvh, not vh: on iOS vh measures the viewport with the address
         bar HIDDEN, so a panel anchored to the bottom and sized in vh
         has its top — the title and the close button — pushed off the
         screen whenever the bar is showing. The vh line stays first as
         the fallback for browsers without dvh. */
      height:78vh;
      height:78dvh;
      border-radius:16px 16px 0 0;
      padding-bottom:env(safe-area-inset-bottom);
    }
  }

  /* ===== MODALS ===== */
  .modal-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,20,40,0.88);
    z-index:100;align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 35%);
    border:1px solid var(--white-14);border-radius:var(--radius);
    width:100%;max-width:640px;overflow-y:auto;padding:32px;
    max-height:88vh;
    max-height:88dvh;
    box-shadow:0 24px 60px rgba(0,0,0,0.45);
  }
  .modal h3{font-size:24px;margin-bottom:6px;}
  .modal .sub{color:var(--white-72);font-size:13px;margin-bottom:24px;}
  .legal-text p{color:var(--white-72);font-size:13px;margin-bottom:14px;}
  .legal-text h4{font-size:14px;font-weight:800;margin:20px 0 8px;color:var(--white);}
  .legal-text h4:first-child{margin-top:0;}
  .export-bar{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:14px 16px;margin-bottom:24px;
  }
  @media(max-width:520px){
    .export-bar{flex-direction:column;align-items:flex-start;}
    .export-bar .btn{width:100%;}
  }
  #storageStatusBox{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
  .storage-status{font-size:12px;color:var(--white-72);}
  .storage-status.ok{color:var(--sky-light);}
  .storage-status.warn{color:var(--red-light);}
  .dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
  .stat-tile{
    background:linear-gradient(160deg,var(--white-08),transparent 70%),var(--navy-900);
    border:1px solid var(--white-14);border-radius:12px;
    padding:16px 10px 14px;text-align:center;position:relative;overflow:hidden;
    transition:border-color .18s ease,transform .18s var(--ease-premium),box-shadow .18s ease;
  }
  .stat-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sky);}
  .stat-tile:hover{border-color:var(--white-30);transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(0,0,0,0.85);}
  .stat-tile .stat-icon{width:16px;height:16px;color:var(--sky-light);margin-bottom:8px;}
  .stat-tile .stat-value{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--sky-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .stat-tile .stat-label{font-family:'Archivo',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.03em;color:var(--white-72);margin-top:4px;}
  .stat-tile.delivered::before{background:var(--whatsapp);}
  .stat-tile.delivered .stat-icon{color:var(--whatsapp);}
  .stat-tile.delivered .stat-value{color:var(--whatsapp);}
  .stat-tile.spent::before{background:var(--sky-light);}
  .stat-tile.fulfilled::before{background:var(--whatsapp);}
  .stat-tile.fulfilled .stat-value{color:var(--whatsapp);}
  .stat-tile.cancelled::before{background:var(--white-50);}
  .stat-tile.cancelled .stat-value{color:var(--white-50);}
  @media(max-width:520px){
    .dashboard-stats{grid-template-columns:repeat(2,1fr);}
    /* A money figure that reads "₦2,430,0…" looks broken. On the buyer
       dashboard (exactly three tiles) the odd one out gets the full row so
       the amount always fits; the admin grids have more tiles and are
       untouched by the :last-child guard. */
    .dashboard-stats .stat-tile:nth-child(3):last-child{grid-column:1 / -1;}
    .stat-tile .stat-value{font-size:18px;}
  }
  .modal-close{
    float:right;background:none;border:none;color:var(--white-72);font-size:22px;cursor:pointer;
    padding:11px;margin:-11px;line-height:1;
  }

  /* ===== NAV WISHLIST ===== */
  .nav-wishlist-btn{
    position:relative;background:none;border:1px solid var(--white-14);color:var(--white-72);
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:border-color .15s ease,color .15s ease;flex-shrink:0;
  }
  .nav-wishlist-btn:hover{border-color:var(--red);color:var(--red-light);}

  /* ===== SCROLL CHAINING =====
     Scroll to the bottom of a modal, the cart, the chat or the filter sheet
     and the page underneath starts moving instead — so closing the panel
     leaves the visitor somewhere they never chose to be. Containing the
     scroll keeps a panel's scrolling to itself, which is what every native
     app does and what makes an overlay feel like a real surface rather
     than a div floating on a page. */
  .search-suggestions,
  .chat-widget-messages,
  .modal,
  .nav-links.mobile-open,
  .filter-sheet-body,
  .cart-items,
  .msg-thread-body,
  .compare-table-wrap,
  .recent-strip{
    overscroll-behavior:contain;
  }
  /* Horizontal carousels: stop a sideways flick at the end of the row from
     triggering the browser's back-swipe gesture. */
  .recent-strip,
  .slide-row,
  .compare-table-wrap{
    overscroll-behavior-x:contain;
  }

  /* ===== TOUCH TARGETS =====
     Apple and Google both put the minimum comfortable tap target at 44px.
     Several round controls here are drawn smaller than that on purpose —
     a 44px circle in the header would crowd the logo — so rather than
     resize them, the tappable area is widened past the circle with a
     pseudo-element. It changes no layout and moves nothing on screen; it
     only stops the button being missed, which on a phone is the difference
     between a control that feels precise and one that feels broken. */
  @media(hover:none){
    .nav-wishlist-btn::after,
    .nav-cta .nav-wishlist-btn::after,
    .account-avatar-edit-btn::after,
    .chat-bubble-tooltip-close::after,
    .thumb-remove::after{
      content:"";position:absolute;top:50%;left:50%;
      width:44px;height:44px;transform:translate(-50%,-50%);
      /* Behind the icon, so it catches the tap without covering anything. */
      z-index:0;
    }
    .nav-wishlist-btn > *,
    .account-avatar-edit-btn > *{position:relative;z-index:1;}
  }
  .nav-wishlist-btn svg{width:18px;height:18px;}
  #navAccountBtn:hover{border-color:var(--sky);color:var(--sky-light);}
  #navAccountBtn.active{border-color:var(--sky);color:var(--sky-light);background:rgba(14,165,233,0.14);}

  /* ===== THEME TOGGLE ===== */
  .theme-toggle-btn:hover{border-color:var(--sky);color:var(--sky-light);}
  .theme-toggle-btn .icon-moon{display:none;}
  :root[data-theme="light"] .theme-toggle-btn .icon-sun{display:none;}
  :root[data-theme="light"] .theme-toggle-btn .icon-moon{display:block;}
  .theme-toggle-fixed{position:fixed;top:16px;right:16px;z-index:40;background:var(--navy-800);}

  /* ===== USD ESTIMATE (inside product modal, next to the real Naira price) ===== */
  .price-usd-estimate{
    font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;
    color:var(--white-50);
  }
  .price-usd-estimate span{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-left:2px;opacity:.75;}
  .nav-wishlist-count{
    position:absolute;top:-6px;right:-6px;background:var(--red);color:var(--white);
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
    width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  }
  .wishlist-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:14px 0;border-bottom:1px solid var(--white-14);
  }
  .wishlist-row .name{font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;}
  .wishlist-row .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sky-light);margin-top:2px;}
  .wishlist-row .actions{display:flex;gap:14px;align-items:center;flex-shrink:0;}

  /* ===== ACCOUNT / AUTH ===== */
  .auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--white-50);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;}
  .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--white-14);}
  .account-dash-header{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:20px;margin-bottom:18px;padding:22px 24px;
    background:
      radial-gradient(120% 140% at 88% -20%,rgba(56,189,248,0.20),transparent 62%),
      linear-gradient(135deg,rgba(14,165,233,0.15),rgba(14,165,233,0.03) 55%,transparent);
    border:1px solid rgba(56,189,248,0.26);border-radius:16px;
    box-shadow:0 18px 44px -28px rgba(14,165,233,0.55);
  }
  /* Hairline highlight along the top edge — the detail that separates a card
     that looks designed from one that looks like a box. */
  .account-dash-header::after{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(56,189,248,0.55),transparent);
  }
  .account-identity{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
  .account-identity-text{min-width:0;}
  .account-avatar-ring{
    width:98px;height:98px;border-radius:50%;flex-shrink:0;position:relative;
    background:linear-gradient(135deg,var(--sky),var(--sky-light));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 5px rgba(14,165,233,0.14),0 10px 26px -10px rgba(14,165,233,0.7);
  }
  .account-avatar{
    width:88px;height:88px;border-radius:50%;flex-shrink:0;background:var(--navy-900);color:var(--sky-light);
    display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:35px;
    background-size:cover;background-position:center;overflow:hidden;position:relative;
  }
  /* Layered over the initial, which stays underneath as the fallback if the
     photo ever fails to load. */
  .account-avatar img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  }
  .account-avatar-edit-btn{
    position:absolute;bottom:2px;right:2px;width:34px;height:34px;border-radius:50%;
    background:var(--sky);color:#fff;border:3px solid var(--navy-800);cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;
    transition:transform .18s var(--ease-premium),background .18s ease;
  }
  .account-avatar-edit-btn:hover{background:var(--sky-light);transform:scale(1.08);}
  .account-avatar-edit-btn svg{width:16px;height:16px;}
  .account-avatar-change{
    background:none;border:none;padding:0;cursor:pointer;
    font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.03em;
    color:var(--sky-light);text-transform:uppercase;
  }
  .account-avatar-change:hover{text-decoration:underline;}
  .account-greeting{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;
    color:var(--sky-light);margin-bottom:4px;
  }
  .account-dash-header h3{font-size:22px;line-height:1.2;margin-bottom:4px;overflow-wrap:anywhere;}
  .account-dash-header .sub{margin-bottom:0;font-size:13px;overflow-wrap:anywhere;}
  .account-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
  .account-chip{
    display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
    background:var(--white-08);border:1px solid var(--white-14);
    font-size:11px;color:var(--white-72);white-space:nowrap;
  }
  .account-chip svg{width:11px;height:11px;flex-shrink:0;}
  .account-chip.ok{background:rgba(37,211,102,0.12);border-color:rgba(37,211,102,0.34);color:var(--whatsapp);}
  .account-chip.warn{background:rgba(196,120,20,0.14);border-color:rgba(196,120,20,0.38);color:#E8B466;}
  @media(max-width:600px){
    .account-dash-header{flex-direction:column;text-align:center;gap:16px;padding:22px 18px;}
    .account-identity-text{width:100%;}
    .account-chips{justify-content:center;}
    .account-avatar-ring{width:96px;height:96px;}
    .account-avatar{width:86px;height:86px;font-size:34px;}
    .account-dash-header h3{font-size:21px;}
  }
  /* ===== PASSWORD STRENGTH ===== */
  .pw-strength{margin:-6px 0 14px;}
  .pw-meter{height:5px;border-radius:999px;background:var(--white-08);overflow:hidden;}
  .pw-meter-fill{height:100%;width:0;border-radius:999px;transition:width .25s var(--ease-premium),background .25s ease;background:var(--red);}
  .pw-meter-fill.weak{background:var(--red);}
  .pw-meter-fill.fair{background:#E8B466;}
  .pw-meter-fill.good{background:var(--sky);}
  .pw-meter-fill.strong{background:var(--whatsapp);}
  .pw-meter-label{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;margin-top:6px;color:var(--white-50);}
  .pw-meter-label.weak{color:var(--red-light);}
  .pw-meter-label.fair{color:#E8B466;}
  .pw-meter-label.good{color:var(--sky-light);}
  .pw-meter-label.strong{color:var(--whatsapp);}
  .pw-rules{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:3px 12px;}
  .pw-rules li{font-size:11.5px;color:var(--white-50);}
  .pw-rules li.ok{color:var(--whatsapp);}
  @media(max-width:460px){ .pw-rules{grid-template-columns:1fr;} }

  .verify-email-banner{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    background:rgba(196,120,20,0.12);border:1px solid rgba(196,120,20,0.35);border-radius:10px;
    padding:12px 14px;margin-bottom:16px;font-size:12.5px;color:#E8B466;line-height:1.5;
  }
  .verify-email-banner .link-btn{color:var(--sky-light);font-weight:700;white-space:nowrap;flex-shrink:0;}
  .verify-email-banner .link-btn:disabled{opacity:.6;cursor:default;}
  .account-section-title{
    font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--white-72);margin:20px 0 4px;display:flex;align-items:center;justify-content:space-between;
  }
  .account-order-count{color:var(--white-50);font-weight:400;text-transform:none;letter-spacing:0;}

  .account-order-card{
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:18px;margin-top:14px;transition:border-color .15s ease;
  }
  .account-order-card:hover{border-color:rgba(14,165,233,0.35);}
  .account-order-top{
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--white-14);
  }
  .account-order-ref{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--white);}
  .account-order-date{font-size:12px;color:var(--white-50);margin-top:3px;}
  .order-status-pill{
    display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.03em;padding:5px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0;
  }
  .order-status-pill svg{width:11px;height:11px;flex-shrink:0;}
  .order-status-pill.pending{background:rgba(248,92,110,0.14);color:var(--red-light);}
  .order-status-pill.paid{background:rgba(14,165,233,0.14);color:var(--sky-light);}
  .order-status-pill.shipped{background:rgba(251,191,36,0.16);color:#FBBF24;}
  .order-status-pill.delivered,
  .order-status-pill.fulfilled{background:rgba(37,211,102,0.14);color:var(--whatsapp);}
  .order-status-pill.cancelled{background:var(--white-08);color:var(--white-50);}

  .order-timeline{display:flex;align-items:flex-start;margin:14px 0 18px;}
  .order-timeline.order-timeline-cancelled{
    display:block;color:var(--white-50);font-size:12.5px;font-family:'IBM Plex Mono',monospace;
    padding:10px 14px;border:1px dashed var(--white-14);border-radius:var(--radius);
  }
  .ot-step{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:74px;}
  .ot-dot{
    width:22px;height:22px;border-radius:50%;flex-shrink:0;
    background:var(--navy-700);border:1.5px solid var(--white-14);color:var(--white-50);
    display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;
  }
  .ot-dot svg{width:11px;height:11px;}
  .ot-dot.done{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff;}
  .ot-label{margin-top:6px;font-size:10.5px;color:var(--white-50);text-align:center;white-space:nowrap;}
  .ot-label.done{color:var(--white-72);font-weight:600;}
  .ot-line{flex:1;height:1.5px;background:var(--white-14);margin-top:11px;transition:background .2s ease;}
  .ot-line.done{background:var(--whatsapp);}
  .account-order-item{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--white-72);font-size:13px;}
  .account-order-item span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .account-order-item span:last-child{flex-shrink:0;font-family:'IBM Plex Mono',monospace;}
  .account-order-total{
    display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:12px;
    border-top:1px solid var(--white-14);font-size:13px;color:var(--white-72);
  }
  .account-order-total strong{color:var(--white);font-size:16px;font-family:'IBM Plex Mono',monospace;}
  .account-order-card .receipt-btn-row{margin-top:14px;}

  .account-empty-state{text-align:center;padding:40px 16px;}
  .account-empty-state svg{width:38px;height:38px;color:var(--white-30);margin-bottom:14px;}
  .account-empty-state p{margin:0 0 4px;color:var(--white-72);font-size:14px;font-weight:600;}
  .account-empty-state .sub{font-size:12px;color:var(--white-50);font-weight:400;margin-bottom:20px;}

  /* ===== CART & CHECKOUT ===== */
  .cart-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:14px 0;border-bottom:1px solid var(--white-14);
  }
  .cart-row .name{font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;}
  .cart-row .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sky-light);margin-top:4px;}
  .cart-row .actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .qty-stepper{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:13px;}
  .qty-stepper button{
    width:24px;height:24px;border-radius:50%;border:1px solid var(--white-14);background:none;color:var(--white);
    cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
  }
  .qty-stepper button:hover{border-color:var(--sky);color:var(--sky-light);}
  @media(max-width:600px){
    .qty-stepper button{width:32px;height:32px;font-size:16px;}
  }
  .cart-summary{margin-top:20px;padding-top:20px;border-top:1px solid var(--white-14);}
  .cart-total-row{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;
  }
  .cart-total-row span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--sky-light);}
  .checkout-order-summary{
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:16px;margin-bottom:20px;font-size:13px;
  }
  .checkout-order-summary .row{display:flex;justify-content:space-between;padding:6px 0;color:var(--white-72);}
  .checkout-order-summary .row.total{border-top:1px solid var(--white-14);margin-top:6px;padding-top:12px;font-weight:700;color:var(--white);}
  .payment-method-box{
    background:var(--navy-900);border:1px solid var(--sky);border-radius:var(--radius);
    padding:18px;margin-bottom:20px;
  }
  .payment-method-box .pm-label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--sky-light);margin-bottom:10px;}
  .payment-method-box .pm-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;}
  .payment-method-box .pm-row span:first-child{color:var(--white-72);}
  .payment-method-box .pm-row span:last-child{font-family:'IBM Plex Mono',monospace;font-weight:600;}
  .order-ref-box{
    text-align:center;padding:20px;border:1px dashed var(--sky);border-radius:var(--radius);margin-bottom:20px;
  }
  .order-ref-box .ref-code{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;color:var(--sky-light);margin-top:6px;}
  .receipt-btn-row{display:flex;gap:8px;margin-top:12px;}
  .receipt-btn-row .btn{flex:1;}
  .order-status{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;
    padding:3px 8px;border-radius:2px;border:1px solid var(--white-14);color:var(--white-50);
  }
  .order-status.paid{border-color:var(--sky);color:var(--sky-light);}
  .order-status.shipped{border-color:#FBBF24;color:#FBBF24;}
  .order-status.delivered,
  .order-status.fulfilled{border-color:var(--whatsapp);color:var(--whatsapp);}
  .admin-order-row{padding:14px 0;border-bottom:1px solid var(--white-14);}
  .admin-order-row .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px;}
  .admin-order-row .items{font-size:12px;color:var(--white-72);margin-top:4px;}
  .admin-order-row select{
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 6px;cursor:pointer;
  }
  .order-ref-pill{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(14,165,233,0.08);border:1px solid var(--sky);border-radius:20px;padding:5px 8px 5px 12px;
    font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--sky-light);
  }
  .order-ref-pill button{
    background:rgba(255,255,255,0.06);border:none;color:var(--sky-light);width:20px;height:20px;border-radius:50%;
    font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;
  }
  .order-ref-pill button:hover{background:var(--sky);color:var(--navy-900);}

  /* ===== LIGHTBOX ===== */
  /* Opened by clicking a photo from inside the product detail modal (see
     script.js openLightbox), so it has to sit visually on top of that
     modal rather than beside it — .modal-overlay's shared z-index:100 alone
     left them tied, and DOM order silently put the product modal on top
     instead, so every click here rendered a fully-loaded lightbox that no
     one could ever actually see. */
  .lightbox-overlay{background:rgba(6,12,24,0.96);padding:0;z-index:150;}
  /* Product photos are shot on a plain white background — floating that
     directly on the dark overlay left a harsh, uneven dark gap around each
     photo depending on its aspect ratio. Framing it as a deliberate plain
     white card (padding + matching background) instead makes the edge
     intentional rather than an accidental dark void on the sides. Sized to
     fill most of the viewport (rather than the old 760px cap) so the photo
     reads as the main event, not a small preview floating in empty space. */
  .lightbox-img{
    max-width:min(1100px, 94vw);max-height:90vh;object-fit:contain;
    border-radius:14px;background:#fff;padding:32px;
    box-shadow:0 30px 80px rgba(0,0,0,0.55);
  }
  @media(max-width:600px){
    .lightbox-img{padding:16px;max-height:82vh;max-height:82dvh;border-radius:10px;}
  }
  .lightbox-close{
    position:absolute;top:20px;right:24px;background:none;border:1px solid var(--white-14);color:var(--white);
    width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;
  }
  .lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.06);
    border:1px solid var(--white-14);color:var(--white);width:48px;height:48px;border-radius:50%;
    font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .lightbox-nav:hover{border-color:var(--sky);color:var(--sky-light);}
  .lightbox-nav.prev{left:20px;}
  .lightbox-nav.next{right:20px;}
  .lightbox-count{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--white-72);
    background:rgba(255,255,255,0.06);border:1px solid var(--white-14);border-radius:20px;padding:6px 14px;
  }
  @media(max-width:600px){
    .lightbox-nav{width:38px;height:38px;font-size:20px;}
    .lightbox-nav.prev{left:8px;}
    .lightbox-nav.next{right:8px;}
  }

  /* ===== PRODUCT DETAIL MODAL ===== */
  .product-modal-gallery{position:relative;}
  .product-modal-img{
    height:440px;border-radius:var(--radius);overflow:hidden;cursor:pointer;
    background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
    display:flex;align-items:center;justify-content:center;font-size:64px;
    border:1px solid var(--white-14);
  }
  /* contain, not cover. This is the inspection view — a buyer deciding on a
     used device needs to see the WHOLE photo, including the edges and
     corners where the wear is. cover crops exactly that away, and on a tall
     phone shot in a landscape frame it crops most of the device. The
     letterboxing that contain leaves is the honest trade. */
  .product-modal-img img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;}
  .product-modal-img-empty{cursor:default;}
  .product-modal-nav{width:34px;height:34px;font-size:18px;background:rgba(10,20,40,0.7);}
  .product-modal-nav.prev{left:8px;}
  .product-modal-nav.next{right:8px;}
  .product-modal-count{
    position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--white-72);
    background:rgba(10,20,40,0.75);border:1px solid var(--white-14);border-radius:20px;padding:4px 10px;
  }
  /* Column collapse on narrow screens is already handled by the reused
     .product-detail-grid class (same rule product.php's own gallery+specs
     layout uses) — just tighten the image height to match. */
  @media(max-width:700px){
    .product-modal-img{height:220px;}
  }
  /* Horizontal scroll strip (reusing .recent-strip/.recent-mini-card from
     Recently Viewed) rather than a grid — sidesteps needing its own
     column-count breakpoints inside a modal whose own width already varies
     a lot between mobile and desktop. */
  .product-modal-related{margin-top:28px;padding-top:24px;border-top:1px solid var(--white-14);}
  .product-modal-related-label{
    font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;
    color:var(--white-72);margin-bottom:14px;
  }
  /* A distinct, bordered "note" panel rather than plain paragraphs floating
     in the modal — sets this longer write-up apart from the terse spec list
     above it, the same way .inspection-summary sets that block apart. */
  .product-modal-usage{
    margin-top:28px;padding-top:24px;border-top:1px solid var(--white-14);
  }
  .product-modal-usage-label{
    display:flex;align-items:center;gap:10px;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;
    color:var(--white);margin-bottom:14px;
  }
  .product-modal-usage-label::before{content:"";display:inline-block;width:18px;height:2px;background:var(--sky);flex-shrink:0;}
  .product-modal-usage-body{
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:22px 24px;
  }
  .product-modal-usage-body p{
    color:var(--white-72);font-size:14.5px;line-height:1.75;margin-bottom:14px;
    max-width:760px; /* keeps line length readable now that the modal itself is much wider */
  }
  .product-modal-usage-body p:last-child{margin-bottom:0;}
  /* The IT-skills checklist (laptops/desktops only, see buildItSkillsBlock
     in script.js) — pulled out of prose into a scannable tag grid, since
     "can this run my software" is usually the first thing a buyer wants
     answered, not something to go hunting for in a paragraph. */
  .usage-skills{margin:18px 0;}
  .usage-skills-label{
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--white-50);margin-bottom:10px;
  }
  .usage-skills-tags{display:flex;flex-wrap:wrap;gap:8px;}
  .usage-skill-tag{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;color:var(--sky-light);
    border:1px solid rgba(14,165,233,0.3);background:rgba(14,165,233,0.08);
    border-radius:20px;padding:6px 12px;
  }
  .usage-skill-tag::before{content:"✓";font-weight:800;}
  /* Closes out the modal on a branded note — same logo/motto/handles as the
     site footer, just condensed for a modal rather than a full-width row. */
  .product-modal-brand{
    margin-top:28px;padding-top:24px;border-top:1px solid var(--white-14);
    text-align:center;
  }
  .product-modal-brand-logo{width:40px;height:40px;border-radius:10px;margin-bottom:10px;}
  .product-modal-brand-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;}
  .product-modal-brand-motto{
    font-style:italic;color:var(--sky-light);font-family:'Archivo',sans-serif;
    font-size:13px;margin-top:4px;
  }
  .product-modal-brand-links{
    display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px;
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--white-72);
  }
  .product-modal-brand-links a{color:var(--sky-light);}
  .product-modal-brand-links a:hover{text-decoration:underline;}
  .related-card{
    flex:0 0 auto;width:240px;cursor:pointer;background:var(--navy-800);border:1px solid var(--white-14);
    border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease,transform .15s ease;
  }
  .related-card:hover{border-color:var(--sky);transform:translateY(-3px);}
  .related-card .thumb{
    position:relative;height:130px;background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
    display:flex;align-items:center;justify-content:center;font-size:36px;
  }
  .related-card .thumb img{width:100%;height:100%;object-fit:cover;}
  .related-card .info{padding:12px 14px 14px;}
  .related-card .r-name{
    display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
    color:inherit;text-decoration:none;margin:8px 0 8px;
  }
  .related-card .related-specs{font-size:11px;color:var(--white-72);line-height:1.7;margin-bottom:10px;}
  .related-card .r-price{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--sky-light);margin-bottom:6px;}
  .related-card .related-warranty{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.02em;
    color:var(--whatsapp);
  }

  /* ===== COMPARE ===== */
  .compare-bar{
    display:none;position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:55;
    background:var(--navy-800);border:1px solid var(--sky);border-radius:30px;
    padding:12px 12px 12px 22px;align-items:center;gap:20px;
    box-shadow:0 12px 32px rgba(0,0,0,0.4);
    font-family:'IBM Plex Mono',monospace;font-size:12px;
  }
  .compare-bar.visible{display:flex;}
  .compare-bar-actions{display:flex;align-items:center;gap:14px;}
  .compare-table-wrap{overflow-x:auto;}
  .compare-table{width:100%;border-collapse:collapse;min-width:520px;}
  .compare-table th, .compare-table td{
    text-align:left;padding:12px 14px;border-bottom:1px solid var(--white-14);
    font-size:13px;vertical-align:top;
  }
  .compare-table th{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--white-50);white-space:nowrap;width:120px;
  }
  .compare-table td{font-family:'Inter',sans-serif;color:var(--white-72);}
  .compare-table .compare-head{font-family:'Archivo',sans-serif;font-weight:700;color:var(--white);font-size:14px;}
  .compare-table .compare-price{font-family:'IBM Plex Mono',monospace;color:var(--sky-light);font-weight:600;font-size:16px;}
  .compare-table .compare-remove{background:none;border:none;color:var(--red-light);font-size:11px;cursor:pointer;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;margin-top:6px;}
  @media(max-width:600px){
    .compare-bar{
      left:12px;right:12px;transform:none;padding:10px 10px 10px 18px;justify-content:space-between;
      bottom:calc(16px + env(safe-area-inset-bottom));
    }
  }
  .form-row{margin-bottom:16px;}
  .form-row label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--white-72);margin-bottom:6px;}
  .form-row input,.form-row select,.form-row textarea{
    width:100%;background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:11px 12px;color:var(--white);font-family:'Inter',sans-serif;font-size:14px;
  }
  .form-row textarea{resize:vertical;font-family:'Inter',sans-serif;}
  .form-row select{cursor:pointer;}
  .payment-method-fixed{
    width:100%;background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.3);border-radius:var(--radius);
    padding:11px 12px;color:var(--sky-light);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  }
  .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(14,165,233,0.15);}
  .inspection-block{
    border:1px solid var(--white-14);border-radius:var(--radius);padding:18px 18px 4px;margin-bottom:16px;
    background:rgba(255,255,255,0.02);
  }
  .form-row input[type="file"]{
    padding:8px;font-size:12px;cursor:pointer;color:var(--white-72);
  }
  .form-row input[type="file"]::file-selector-button{
    background:var(--white);color:var(--navy-900);border:none;border-radius:2px;
    padding:7px 12px;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
    text-transform:uppercase;letter-spacing:0.03em;cursor:pointer;margin-right:10px;
  }
  .image-gallery-box{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
  .gallery-thumb{
    position:relative;width:74px;height:74px;border-radius:2px;overflow:hidden;
    border:1px solid var(--white-14);flex-shrink:0;background:var(--navy-900);
  }
  .gallery-thumb img{width:100%;height:100%;object-fit:cover;}
  .gallery-thumb .thumb-main-badge{
    position:absolute;bottom:0;left:0;right:0;background:rgba(10,20,40,0.85);
    font-family:'IBM Plex Mono',monospace;font-size:8px;text-align:center;color:var(--sky-light);
    text-transform:uppercase;letter-spacing:0.03em;padding:2px 0;
  }
  .gallery-thumb .thumb-remove{
    position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;
    background:rgba(10,20,40,0.9);border:1px solid var(--white-14);color:var(--white);
    font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  }
  .gallery-thumb .thumb-remove:hover{border-color:var(--red);color:var(--red-light);}
  .form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .checkbox-group{display:flex;flex-wrap:wrap;gap:10px;}
  .checkbox-item{
    display:flex;align-items:center;gap:8px;flex:1;min-width:150px;
    background:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:11px 12px;cursor:pointer;transition:border-color .15s ease;
  }
  .checkbox-item:hover{border-color:var(--white-50);}
  .checkbox-item input{width:16px;height:16px;accent-color:var(--sky);flex-shrink:0;cursor:pointer;}
  .checkbox-item span{font-family:'Inter',sans-serif;font-size:13px;color:var(--white);}
  .admin-list{margin-top:28px;border-top:1px solid var(--white-14);padding-top:20px;}
  .admin-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:12px 0;border-bottom:1px solid var(--white-14);
  }
  .admin-row .name{font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;}
  .admin-row .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--white-72);}
  .admin-row .actions{display:flex;gap:8px;}
  .link-btn{background:none;border:none;color:var(--sky-light);font-size:12px;cursor:pointer;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;}
  .link-btn:hover{color:var(--sky);}
  .link-btn.danger{color:var(--red-light);text-decoration:underline;text-underline-offset:2px;}
  .link-btn.danger:hover{color:var(--red);}
  .link-btn.whatsapp{color:var(--whatsapp);}
  .link-btn.whatsapp:hover{color:#1DA851;}
  .status-msg{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-top:10px;min-height:16px;}
  .status-msg.ok{color:var(--white);}
  .status-msg.err{color:var(--red-light);text-decoration:underline;text-underline-offset:2px;}

  /* ===== RESPONSIVE ===== */
  /* Nav switches to the hamburger menu earlier (1099px) than the other
     component breakpoints below (900px) — the full desktop nav (8 links +
     icons + WhatsApp button) needs ~1100px before it stops wrapping onto a
     second line, even though grids/sections have room to spare down to 900px. */
  @media(max-width:1099px){
    .nav-links{
      display:flex;flex-direction:column;align-items:flex-start;gap:2px;
      position:fixed;top:73px;left:0;right:0;z-index:49;
      background:var(--navy-900);border-bottom:1px solid var(--white-14);
      max-height:0;overflow:hidden;opacity:0;
      transition:max-height .35s var(--ease-premium), opacity .3s ease;
      padding:0 16px;box-shadow:0 16px 32px rgba(0,0,0,0.35);
    }
    .nav-links.mobile-open{max-height:640px;opacity:1;padding:10px 16px 16px;overflow-y:auto;}
    .nav-links li{width:100%;}
    .nav-links a{
      display:flex;align-items:center;gap:14px;padding:13px 12px;width:100%;
      border-radius:var(--radius);transition:background .15s ease;
    }
    .nav-links a:active{background:var(--white-08);}
    .nav-links a.active{background:rgba(14,165,233,0.1);color:var(--sky-light);}
    .nav-links a.active::after{display:none;}
    .nav-link-icon{display:block;width:18px;height:18px;flex-shrink:0;color:var(--sky-light);}
    .burger{display:flex;}
    /* There is no hover on a touch device, so the dropdown cannot reveal
       itself that way. It used to sit permanently open, which pushed seven
       product links into the menu and buried everything below them. Now it is
       folded away behind a chevron: the row itself still links straight to the
       shop, and the chevron opens the list of categories. */
    .nav-dropdown{display:flex;flex-wrap:wrap;align-items:center;}
    .nav-dropdown > a{flex:1;min-width:0;}
    .nav-dropdown-menu{
      position:static;opacity:1;visibility:visible;transform:none;
      background:none;border:none;box-shadow:none;padding:0;margin:0 0 4px 32px;
      display:none;width:100%;
    }
    .nav-dropdown.open > .nav-dropdown-menu{display:block;}
    .nav-dropdown-menu a{padding:8px 12px;font-size:13px;color:var(--white-50);}
    .nav-dropdown-toggle{
      flex-shrink:0;background:none;border:none;cursor:pointer;
      color:var(--white-50);padding:10px 12px;line-height:0;border-radius:8px;
    }
    .nav-dropdown-toggle svg{
      width:16px;height:16px;transition:transform .2s ease;
    }
    .nav-dropdown.open > .nav-dropdown-toggle{color:var(--sky-light);}
    .nav-dropdown.open > .nav-dropdown-toggle svg{transform:rotate(180deg);}
    .nav-dropdown-toggle:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px;}
  }
  /* Tablet range only (601-1099px) — once the nav-links row collapses into
     the burger, the icon row has the whole header height to itself, so size
     it up from the cramped desktop-density 38px and give it room to breathe.
     Kept out of the shared max-width:1099px block above (which also covers
     phones down to 0px) as its own explicit range, rather than layering a
     "shrink back down" override in a max-width:600px block afterwards —
     two same-specificity rules for the same property fighting over source
     order is exactly the kind of bug that already bit this once. */
  @media(min-width:601px) and (max-width:1099px){
    nav{padding:20px 28px;}
    .nav-cta{gap:14px;}
    .burger, .nav-cta .nav-wishlist-btn{width:44px;height:44px;}
    .nav-cta .nav-wishlist-btn svg{width:20px;height:20px;}
  }
  @media(max-width:900px){
    .trust{grid-template-columns:repeat(2,1fr);}
    /* In two columns the vertical hairline belongs only to the right-hand
       cell of each row; the left one starts a row and must not carry it.
       Rows get a horizontal hairline between them instead. */
    .trust-item:nth-child(odd)::before{display:none;}
    .trust-item:nth-child(n+3){border-top:1px solid var(--white-08);}
    .trust-item{padding:22px 18px;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:1fr;gap:24px;}
    .policy-grid{grid-template-columns:1fr;}
    .loc-grid{grid-template-columns:1fr;}
    .loc-info{padding:56px 24px;}
    .loc-map{border-left:none;border-top:1px solid var(--white-14);}
    /* Logo/social spans the full width as its own row, then Shop/Company/
       Contact/Payment auto-flow two-per-row beneath it — each link list is
       now short enough (7 items) that a plain 2-column grid stays balanced
       without needing explicit row-spanning. */
    /* minmax(0,1fr) rather than 1fr: a plain 1fr track will not shrink below
       its widest unbreakable word, and one long address in the footer was
       stretching the grid past the screen and scrolling the whole page
       sideways on a 320px phone. */
    .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px;}
    footer a, .foot-motto{overflow-wrap:anywhere;}
    .foot-grid > div:nth-child(1){grid-column:1 / span 2;}
  }
  /* Two columns of trust items plus their padding measured 358px inside a
     320px screen, which scrolled the whole page sideways. One column there. */
  @media(max-width:380px){
    .trust{grid-template-columns:1fr;}
    .trust-item::before{display:none;}
    .trust-item{border-top:1px solid var(--white-08);padding:16px 14px;}
    .trust-item:first-child{border-top:none;}
  }
  @media(max-width:768px){
    /* iOS Safari auto-zooms on focus when a field's font-size is under
       16px — bump these up on touch-sized screens only, desktop keeps its
       tighter 14px/12px sizing. */
    .form-row input,.form-row select,.form-row textarea,
    .search-box,.sort-select,.feedback-form textarea,
    /* Every other field on the site, added since this rule was written
       and each one missed by it: the header search, the site search
       overlay, the AI chat composer, order tracking on the homepage,
       and the admin fields. A field left under 16px zooms the page in
       on tap and Safari never zooms back out, which leaves the visitor
       on a magnified, sideways-scrolling page for the rest of the
       visit. It is the single cheapest-feeling thing a phone can do. */
    .nav-search-bar-inner input,
    .site-search-field input,
    .chat-widget-input-row input,
    .hero-track-form input,
    .admin-order-row select,
    .image-link-row textarea,
    .spec-lookup-row input,
    input[type="text"],input[type="tel"],input[type="email"],
    input[type="number"],input[type="search"],input[type="password"],
    input[type="url"],textarea,select{
      font-size:16px;
    }
  }
  @media(max-width:700px){
    .product-detail-grid{grid-template-columns:1fr !important;}
  }
  @media(max-width:600px){
    /* Two-up instead of one-per-row — reads as a dense, desktop-like
       catalog grid rather than a single-file scrolling list, while every
       card below is compacted specifically to stay legible and tappable
       at roughly half the width it has on desktop. */
    .grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    /* Flagship Picks specifically: a horizontal sliding filmstrip (matching
       the Shop section's brand .slide-row carousels) instead of a tall
       vertical stack — one product screen-width at a time, with a peek of
       the next card as an affordance, rather than scrolling the whole page
       down through every pick one by one. #flagshipGrid (an id) naturally
       outweighs the .grid rule above regardless of source order. */
    #flagshipGrid{
      display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
      padding-bottom:6px;margin:0 -24px;padding-left:24px;padding-right:24px;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 40px),transparent 100%);
    }
    #flagshipGrid::-webkit-scrollbar{display:none;}
    /* Narrowed from the desktop/tablet 290px down to roughly grid-card width
       — the default "Featured" shop view (brand slide-rows, same treatment
       below) is what most mobile visitors actually browse, so this is the
       change that matters most for a dense, desktop-like feel: two-plus
       cards visible per screen instead of one at a time. */
    #flagshipGrid .card{flex:0 0 158px;scroll-snap-align:start;}
    .slide-row{gap:10px;}
    .slide-row .card{flex:0 0 158px;}
    .form-grid2{grid-template-columns:1fr;}
    .hero{padding:64px 0 40px;}
    /* Fills the same column width as the rest of the hero copy (no
       separate max-width cap) rather than floating as an undersized box
       beside empty space — just a tighter margin/radius than desktop. */
    .hero-video-showcase{max-width:none;margin-top:22px;border-radius:12px;}
    .delivery-row{grid-template-columns:1fr;gap:4px;}
    .delivery-row div:nth-child(2),.delivery-row div:nth-child(3){font-size:13px;}
    .delivery-head{display:none;}
    /* The 84px section rhythm reads as generous "premium" whitespace on
       desktop, but on a ~700px-tall phone screen it stacks into dead gaps
       between sections — scale it back down here. */
    .section{padding:45px 0;}
    .brands-section{padding:29px 0 32px;}
    .flagship-section{padding:26px 0 23px;}
    .explainer-section{padding-top:29px;}
    .recent-section{padding-top:0;padding-bottom:13px;}
    /* Product cards sit two-per-row on mobile (vs. 3 across on desktop),
       so every internal element is scaled down to match — same content,
       none of it dropped, just sized for roughly half the desktop width. */
    /* A 100px-tall thumbnail has no room for an icon, a caption AND the
       "Tested" stamp — the caption ran straight under the stamp. The icon
       alone carries the meaning at this size. */
    .card-img .no-photo-placeholder span{display:none;}
    .card-img .no-photo-placeholder svg{width:26px;height:26px;}
    .verified-stamp{font-size:8px;padding:3px 7px 3px 5px;bottom:7px;right:7px;gap:4px;}
    .verified-stamp svg{width:10px;height:10px;}
    .card-hole{width:10px;height:10px;top:10px;left:10px;}
    .card-badge{top:10px;right:10px;font-size:8px;padding:3px 7px;}
    .card-img{height:100px;}
    .card-body{padding:10px 10px 12px;}
    .card-category{font-size:8px;margin-bottom:4px;}
    .card-title-row{margin-bottom:6px;gap:4px;}
    .card-title{
      font-size:12px;margin-bottom:0;line-height:1.3;
      display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .wishlist-btn{font-size:16px;padding:6px;margin:-6px;}
    .card-rating{font-size:9px;gap:4px;margin-bottom:6px;}
    .card-rating.none{font-size:9px;}
    .flagship-badge,.low-stock-badge{font-size:7px;padding:3px 7px;margin-bottom:6px;}
    .card-specs{font-size:9px;gap:2px;margin-bottom:8px;padding-bottom:8px;}
    .card-features{gap:4px;margin:-2px 0 8px;}
    .feature-tag{font-size:8px;padding:3px 7px;gap:3px;}
    .inspection-link{font-size:9px;margin-bottom:8px;}
    .inspection-link svg{width:11px;height:11px;}
    .view-details-link{font-size:9px;margin-bottom:8px;}
    .card-price{font-size:16px;margin-bottom:8px;}
    .card-body .card-price{margin-bottom:1px;}
    .card-price-usd{font-size:10px;margin-bottom:8px;}
    .card-body .btn{padding:10px 12px;font-size:11px;gap:5px;}
    .card-body .btn svg{width:13px;height:13px;}
    /* The catalog card's footer is a price-and-link row on desktop. On a
       phone the full-width tap target that was there before is the better
       shape and the one this layout was tuned around, so the same markup is
       restyled back into it here — the phone view is unchanged. */
    .card-foot{display:block;margin-top:auto;}
    .card-foot .card-price{margin-bottom:8px;}
    .card-foot-cta{
      display:block;width:100%;text-align:center;
      background:var(--white);color:var(--navy-900);border-radius:var(--radius);
      font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
      text-transform:uppercase;letter-spacing:0.02em;padding:10px 12px;
    }
    .compare-toggle{font-size:8px;gap:5px;margin-top:8px;}
    .compare-toggle input{width:12px;height:12px;}
    /* The hero's four calls to action stack one per row on a phone, which
       pushes everything below them most of a screen further down. Two by two
       fits the same four buttons in half the height, and each one still has a
       full-width tap target within its half. Scoped to the hero: the final
       CTA uses .hero-ctas too, and its two buttons are fine as they are. */
    /* grid-auto-rows:1fr so a label that wraps to two lines ("Browse the
       Marketplace") doesn't leave the row beneath it visibly shorter — all
       four buttons end up the same height. */
    .hero .hero-ctas{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px;}
    .hero .hero-ctas .btn{
      width:100%;padding:9px 6px;font-size:10px;letter-spacing:0.01em;
      line-height:1.25;text-align:center;white-space:normal;
      /* Small, but never below the ~44px a thumb needs to hit reliably. */
      min-height:44px;
    }
    /* Filter chips wrapping to 2-3 lines per group (Use Case alone has 6
       options) eats real vertical space and looks like a plain form rather
       than an app. A single scrollable row — edge-to-edge, no visible
       scrollbar — is the native-shopping-app pattern for this. */
    .filters{
      flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;-ms-overflow-style:none;
      margin:0 -24px;padding:0 24px 4px;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);
      mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);
    }
    .filters::-webkit-scrollbar{display:none;}
    .filter-chip{flex-shrink:0;}
  }


  /* ===== CLICKABLE SERVICE CARDS =====
     The three cards on the homepage are a summary; the real explanation
     lives on services.html, so each card is the link to its own section
     there rather than a dead panel next to one shared button. */
  a.policy-card-link{display:block;text-decoration:none;color:inherit;}
  .policy-go{
    display:inline-block;margin-top:16px;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--sky-light);
    transition:transform .18s ease;
  }
  a.policy-card-link:hover .policy-go{transform:translateX(3px);}

  /* Arriving from one of those cards should land on the matching service and
     make it obvious which one was asked for. */
  .svc-card{scroll-margin-top:100px;transition:border-color .2s ease,box-shadow .2s ease;}
  .svc-card:target{border-color:var(--sky);box-shadow:0 0 0 1px var(--sky),0 14px 30px rgba(0,0,0,0.25);}

  /* ===== HEADER ICON ROW — WEIGHT =====
     1.5px strokes at 72% white on a dark ground read as faint at a glance,
     especially on a phone. Full-strength colour, a slightly stronger border,
     and a thicker stroke make the row legible without enlarging it. */
  .nav-cta .nav-wishlist-btn{color:var(--white);border-color:var(--white-50);}
  .nav-cta .nav-wishlist-btn svg *{stroke-width:1.9;}
  .nav-cta .currency-picker{
    color:var(--white);border-color:var(--white-50);font-weight:600;
    background-image:linear-gradient(45deg,transparent 50%,var(--white) 50%),linear-gradient(135deg,var(--white) 50%,transparent 50%);
  }

  /* Two trust tiles side by side on a phone leave barely enough room for the
     label; the chevron there pushed "Computer Village, Ikeja" onto three
     lines and the page 9px past the screen. The whole tile is the tap target
     anyway, so the chevron is dropped while the row is two-up, and comes back
     below 380px where each tile has the full width to itself. */
  @media(max-width:900px){
    .trust-go{display:none;}
  }
  @media(max-width:380px){
    .trust-go{display:block;}
  }

  /* =====================================================================
     MOBILE PLATFORM LAYER
     ---------------------------------------------------------------------
     Everything below is inside a phone/tablet media query. Desktop never
     sees any of it. The goal is a storefront that feels built for a thumb
     rather than a shrunken desktop: 44px targets, 16px fields, one shared
     bottom inset so nothing floating ever covers anything else, and the
     header carrying only what a phone header should — logo, search, cart,
     menu.
     ===================================================================== */

  /* One number every floating element stacks on top of. Set by mobile.js
     when the sticky buy bar appears, 0 the rest of the time. */
  :root{ --zago-bottom-inset:0px; }

  @media(max-width:1099px){

    /* ---- TOUCH TARGETS: the header row ---- */
    .burger,
    .nav-cta .nav-wishlist-btn{ width:44px;height:44px; }
    .nav-cta .nav-wishlist-btn svg{ width:20px;height:20px; }
    .nav-dropdown-toggle{
      min-width:44px;min-height:44px;
      display:flex;align-items:center;justify-content:center;
    }

    /* ---- TOUCH TARGETS: everything a thumb can hit ----
       A link inside running text keeps its inline size; these are the
       standalone controls, where 44px is the floor. */
    .btn{ min-height:44px;display:inline-flex;align-items:center;justify-content:center; }
    .btn-sm{ min-height:44px; }
    .ztab{ min-height:44px; }
    .explainer-toggle{ min-height:44px;padding-left:14px;padding-right:14px; }
    .back-to-top{ width:48px;height:48px; }
    .filter-chip{ min-height:40px;display:inline-flex;align-items:center; }

    /* Footer links and social icons were 17px and 28px tall — the two most
       common mis-taps on the whole site. */
    .social-icon-link{ width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; }

    /* Carousel dots were 11px. The dot stays 11px; the tap area is 44px. */
    .explainer-dot{ position:relative; }
    .explainer-dot::after{
      content:"";position:absolute;left:50%;top:50%;
      width:44px;height:44px;transform:translate(-50%,-50%);
    }

    /* ---- FIELDS: never let the browser zoom on focus ----
       Anything under 16px makes iOS Safari and some Android keyboards zoom
       the viewport in on focus, and the page never zooms back out. */
    input, select, textarea,
    .site-search-field input,
    .nav-search-input,
    .search-box, .sort-select{ font-size:16px; }
    .site-search-field{ padding:0 6px 0 14px; }
    .site-search-field input{ padding:13px 0;min-height:44px; }
    .site-search-btn{ min-height:44px;padding-left:18px;padding-right:18px; }
    .site-search-inner{ padding:12px 16px; }

    /* The currency picker is a real control, not a label — give it a real
       target and a field-sized label. */
    .currency-picker{ min-height:44px;font-size:14px;padding:10px 26px 10px 12px; }
  }

  /* =====================================================================
     PHONE ONLY (max-width:600px)
     ===================================================================== */
  @media(max-width:600px){

    /* ---- HEADER: logo -> search -> cart -> menu ----
       mobile.js moves currency/theme/account/wishlist into the drawer, so
       the row holds the logo, the cart and the menu and nothing else. */
    body.zago-mobile-header .nav-cta{ gap:6px; }
    body.zago-mobile-header nav{ padding:10px 16px; }
    body.zago-mobile-header .logo-img{ height:40px; }

    /* The relocated controls, as a labelled row at the foot of the drawer. */
    /* Sits at the TOP of the drawer now, so the rule that separates it
       from the nav links belongs underneath it, not above. */
    .nav-tools{
      width:100%;margin-bottom:8px;padding-bottom:14px;
      border-bottom:1px solid var(--white-14);
    }
    .nav-tools-label{
      display:block;font-family:'Archivo',sans-serif;font-weight:700;
      font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
      color:var(--white-50);padding:0 12px 10px;
    }
    .nav-tools-row{
      display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 12px 4px;
    }
    /* These buttons were sized by a .nav-cta descendant rule; out of the
       header they need the 44px floor stated again. */
    .nav-tools-row .nav-wishlist-btn{ width:44px;height:44px; }
    .nav-tools-row .nav-wishlist-btn svg{ width:20px;height:20px; }
    .nav-tools-row .currency-picker{ min-height:44px; }
    .nav-tools-row .currency-picker{ order:-1; }

    /* ---- SAFE AREAS ----
       Gesture-bar phones need the bottom inset or a pinned control sits
       under the system bar and cannot be tapped. */
    .nav-links.mobile-open{
      max-height:calc(100dvh - 73px);
      padding-bottom:calc(16px + env(safe-area-inset-bottom));
    }

    /* ---- FLOATING FURNITURE: one stack, no overlaps ----
       Each one sits above the shared inset, then above the thing below it. */
    .back-to-top{
      bottom:calc(16px + env(safe-area-inset-bottom) + var(--zago-bottom-inset));
      right:16px;
    }
    .chat-bubble-btn{
      bottom:calc(76px + env(safe-area-inset-bottom) + var(--zago-bottom-inset));
      right:16px;
    }
    .chat-widget{
      bottom:calc(136px + env(safe-area-inset-bottom) + var(--zago-bottom-inset));
      right:12px;left:12px;width:auto;
    }
    .cookie-banner{
      bottom:calc(12px + env(safe-area-inset-bottom) + var(--zago-bottom-inset));
    }
    .compare-bar{
      bottom:calc(16px + env(safe-area-inset-bottom) + var(--zago-bottom-inset));
      left:12px;right:12px;transform:none;width:auto;
    }

    /* ---- FILTER BOTTOM SHEET ---- */
    .filter-sheet-trigger{
      display:inline-flex;align-items:center;gap:9px;
      min-height:44px;padding:0 18px;margin-bottom:16px;
      background:var(--navy-800);border:1px solid var(--white-14);
      border-radius:999px;color:var(--white);cursor:pointer;
      font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
      letter-spacing:0.04em;text-transform:uppercase;
    }
    .filter-sheet-trigger svg{ width:18px;height:18px; }
    .filter-sheet-count{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:20px;height:20px;padding:0 6px;border-radius:999px;
      background:var(--sky);color:var(--navy-900);font-size:11px;font-weight:800;
    }
    .filter-sheet{
      position:fixed;inset:0;z-index:120;display:none;
    }
    .filter-sheet.open{ display:block; }
    .filter-sheet-backdrop{
      position:absolute;inset:0;background:rgba(10,20,40,0.72);
      animation:sheetFade .2s ease;
    }
    .filter-sheet-panel{
      position:absolute;left:0;right:0;bottom:0;
      max-height:86dvh;display:flex;flex-direction:column;
      background:var(--navy-800);
      border-top:1px solid var(--white-14);
      border-radius:20px 20px 0 0;
      padding-bottom:env(safe-area-inset-bottom);
      animation:sheetUp .28s var(--ease-premium);
    }
    .filter-sheet-grip{
      width:42px;height:4px;border-radius:999px;background:var(--white-14);
      margin:10px auto 2px;flex-shrink:0;
    }
    .filter-sheet-head{
      display:flex;align-items:center;justify-content:space-between;
      padding:8px 20px 12px;flex-shrink:0;
    }
    .filter-sheet-head h3{ font-size:18px;font-weight:800;margin:0; }
    .filter-sheet-close{
      width:44px;height:44px;border:none;background:none;cursor:pointer;
      color:var(--white-72);font-size:28px;line-height:1;border-radius:50%;
    }
    .filter-sheet-body{
      overflow-y:auto;-webkit-overflow-scrolling:touch;
      padding:4px 20px 16px;flex:1;
    }
    /* Inside the sheet the chips get room to wrap — the edge-to-edge
       scrolling row only makes sense when it is inline on the page. */
    .filter-sheet-body .filters{
      flex-wrap:wrap;overflow:visible;margin:0;padding:0;
      -webkit-mask-image:none;mask-image:none;
    }
    .filter-sheet-body .filter-chip{ flex-shrink:1; }
    .filter-sheet-foot{
      padding:12px 20px calc(16px + env(safe-area-inset-bottom));
      border-top:1px solid var(--white-14);flex-shrink:0;
    }
    .filter-sheet-foot .btn{ width:100%; }
    @keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
    @keyframes sheetFade{ from{ opacity:0; } to{ opacity:1; } }

    /* ---- STICKY BUY BAR (product pages) ---- */
    .buy-bar{
      position:fixed;left:0;right:0;bottom:0;z-index:58;
      display:flex;align-items:center;gap:14px;
      padding:12px 16px calc(12px + env(safe-area-inset-bottom));
      background:var(--navy-800);
      border-top:1px solid var(--white-14);
      box-shadow:0 -8px 28px rgba(0,0,0,0.35);
      transform:translateY(110%);
      transition:transform .28s var(--ease-premium);
    }
    .buy-bar.show{ transform:translateY(0); }
    .buy-bar-price{
      font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;
      color:var(--white);white-space:nowrap;flex-shrink:0;
    }
    .buy-bar-cta{ flex:1;min-height:48px;justify-content:center; }

    /* ---- TYPOGRAPHY & SPACING ----
       Tighter section rhythm so a phone screen carries content, not gaps. */
    .section{ padding:44px 0; }
    .section-head{ margin-bottom:20px; }
    .section-head h2{ font-size:clamp(22px,6vw,28px);line-height:1.25; }
    p, .policy-card p, .ztab-intro{ line-height:1.65; }

  }

  @media(max-width:380px){
    body.zago-mobile-header nav{ padding:10px 14px; }
    body.zago-mobile-header .logo-img{ height:36px; }
    .buy-bar{ gap:10px;padding-left:12px;padding-right:12px; }
    .buy-bar-price{ font-size:16px; }
  }

  /* Respect a reduced-motion preference for the new surfaces too. */
  @media(prefers-reduced-motion:reduce){
    .filter-sheet-panel,.filter-sheet-backdrop{ animation:none; }
    .buy-bar{ transition:none; }
  }

  /* =====================================================================
     PRODUCT DETAIL — CONVERSION ORDER
     Product name, then the four things a buyer decides on, in the order
     they decide them: price, condition, what backs it, what it is. The
     buttons come last, once there is a reason to press them.
     ===================================================================== */
  .pd-price{
    font-family:'Archivo',sans-serif;font-weight:800;
    font-size:clamp(28px,7vw,34px);line-height:1.1;
    color:var(--white);margin:0 0 10px;
  }
  .pd-condition{
    position:static;display:inline-block;margin:0 0 16px;
  }
  .pd-spec-label{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--white-50);
    padding-bottom:8px;margin-bottom:12px;
    border-bottom:1px solid var(--white-14);
  }

  @media(max-width:600px){
    /* The CTAs stack full width on a phone — two half-width buttons side by
       side put both below the comfortable thumb size. */
    .product-detail-grid .hero-ctas{ flex-direction:column;align-items:stretch;gap:10px; }
    .product-detail-grid .hero-ctas .btn{ width:100%; }
    .pd-spec-label{ margin-top:4px; }
    /* Scoped to the detail column only — a bare .card-specs would also
       restyle every card in the catalogue grid. */
    .product-detail-grid .card-specs{ font-size:15px;line-height:1.9; }
    /* Room for the sticky buy bar so it never sits on the last element. */
    .product-detail-grid{ padding-bottom:8px; }
  }

  /* =====================================================================
     MOBILE LAYER — CORRECTIONS
     ===================================================================== */

  /* Edge-to-edge scrolling rows (tabs, chips, brand strips) bleed out of
     .wrap with a negative side margin that has to equal .wrap's padding
     exactly. The phone gutter is now 16px (14px below 380px), so the old
     -24px overshot by 8px and pushed the page sideways. Keep the three in
     step with the gutter. */

  @media(max-width:1099px){
    /* The theme toggle on the catalogue pages is not inside .nav-cta — it is
       pinned on its own, and was missed by the header sizing rule. */
    .theme-toggle-fixed{ width:44px;height:44px; }
    .theme-toggle-fixed svg{ width:20px;height:20px; }

    /* 14px on a <select> still triggers the zoom-on-focus that 16px avoids;
       the currency picker is a select like any other. */
    .currency-picker{ font-size:16px; }

    /* The logo is the "go home" control on every page. */
    .logo{ display:inline-flex;align-items:center;min-height:44px; }

    /* Checkboxes and radios render at 12-16px natively. Scale the control and
       let the label carry the rest of the target. */
    input[type="checkbox"],input[type="radio"]{
      width:22px;height:22px;min-width:22px;min-height:22px;
      accent-color:var(--sky);
    }
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]){ min-height:44px;display:flex;align-items:center;gap:10px; }

    /* Any standalone control that ended up narrower than a fingertip. */
    .nav-links a,.foot-links a{ min-width:44px; }
  }

  /* =====================================================================
     ACCESSIBILITY & STATE
     ===================================================================== */
  /* Every interactive surface added by the mobile layer needs the same
     visible focus ring the rest of the site uses. */
  .filter-sheet-trigger:focus-visible,
  .filter-sheet-close:focus-visible,
  .filter-sheet-apply:focus-visible,
  .buy-bar-cta:focus-visible,
  .nav-tools-row > *:focus-visible{
    outline:2px solid var(--sky);outline-offset:2px;
  }
  /* A sheet that is open should trap the eye, not the page behind it. */
  .filter-sheet[aria-hidden="true"]{ pointer-events:none; }
  .filter-sheet.open{ pointer-events:auto; }

  /* The marketplace header packs a currency picker and two buttons beside the
     logo. At 320px that row is wider than the screen, and it is written as an
     inline style so it has nowhere to wrap to — give it one. */
  @media(max-width:600px){
    .mkt-nav-actions{ flex-wrap:wrap;justify-content:flex-end;gap:8px !important;min-width:0; }
    .mkt-nav-actions .btn{ font-size:12px;padding-left:12px;padding-right:12px; }
    .mkt-nav-actions .currency-picker{ flex-shrink:0; }
  }
  @media(max-width:380px){
    .mkt-nav-actions .btn{ font-size:11px;padding-left:10px;padding-right:10px; }
  }

  /* Final touch-target pass. */
  @media(max-width:1099px){
    /* The theme toggle is not always inside .nav-cta — on the catalogue and
       services pages it sits in a bare div. Target the button itself. */
    .theme-toggle-btn{ width:44px;height:44px; }
    .theme-toggle-btn svg{ width:20px;height:20px; }

    /* Carousel dots: the painted dot stays 8px, the box around it becomes
       44px. background-clip keeps the paint on the content box, so padding
       buys hit area without drawing a 44px blob. */
    .explainer-dot{
      width:44px;height:44px;padding:18px;box-sizing:border-box;
      background-clip:content-box;
    }
    .explainer-dot.active{ background-clip:content-box; }
    .explainer-dots{ gap:0; }

    /* Footer link columns: 44px tall already, now wide enough to hit too. */
    footer li > a,.foot-grid li > a{ min-width:44px; }
  }

  /* ---------------------------------------------------------------------
     MOBILE LAYER — POLISH
     --------------------------------------------------------------------- */
  @media(max-width:600px){
    /* With only the cart left in it, .nav-cta was being spaced out to the
       middle of the row. Push it right so cart and menu read as one pair,
       with the logo alone on the left. */
    body.zago-mobile-header .nav-cta{ margin-left:auto;margin-right:6px; }

    /* Hero CTA labels were being clipped mid-word: the buttons are half-width
       and nowrap, so "Explore Our Services" had nowhere to go. Let them wrap
       and size to fit — they keep their 44px height either way. */
    .hero .hero-ctas .btn{
      white-space:normal;line-height:1.25;text-align:center;
      font-size:11px;letter-spacing:0.01em;padding:10px 8px;
    }

    /* The sheet supplies its own "Show results"; a second submit inside the
       form is one button too many in a 390px column. */
    .filter-sheet-body button[type="submit"]{ display:none; }

    /* Keep the marketplace logo aligned with the top of a wrapped action row
       rather than floating against its centre. */
    .mkt-nav-actions{ align-items:flex-start; }
    nav:has(.mkt-nav-actions){ align-items:flex-start; }
  }




  /* =====================================================================
     FOOTER — COMPACT ARRANGEMENT
     ---------------------------------------------------------------------
     With the link set down to eleven, stacking each section full width left
     the footer a tall ladder with a lot of air in it. The two link lists sit
     side by side instead — Shop beside Company, one column each — so the
     block is as tall as the longer list rather than the sum of both, and the
     two headings share a line. Contact and Payment span the full width
     underneath, where an address and a card line actually want the room.

     Row height comes down to 36px and the section rhythm tightens, which is
     where most of the remaining height was.
     ===================================================================== */
  @media(max-width:600px){
    footer{ padding:40px 0 24px; }

    /* A two-column grid leaves a three-row hole under Company, because a
       grid row is as tall as its tallest cell. Multi-column flow instead:
       the browser balances the four sections across two columns by
       height, so whatever space is there gets used. The brand block
       spans both columns above them. */
    .foot-grid{
      display:block;column-count:2;column-gap:18px;margin-bottom:26px;
    }
    .foot-grid > div{ break-inside:avoid;margin-bottom:20px; }
    .foot-grid > div:nth-child(1){ column-span:all;margin-bottom:22px; }

    /* One column per list now that each list is short. */
    .foot-col ul{ display:block; }
    .foot-col li{ margin-bottom:0;font-size:14px; }

    .foot-links a,
    footer .foot-grid a{
      display:flex;align-items:center;
      min-height:36px;padding:3px 0;line-height:1.35;
    }
    .foot-col h4{ margin-bottom:6px;font-size:12px; }

    /* Brand block: the logo and motto were taking a third of the footer. */
    .foot-logo-img{ height:52px;margin-bottom:10px; }
    .foot-motto{ font-size:13px; }
    .foot-social-row{ margin-top:12px;gap:8px; }
    .social-icon-link{ width:40px;height:40px; }

    /* Contact and payment read as rows, not as a list of links. */
    .foot-col:nth-last-child(-n+2) li{ margin-bottom:2px; }
    .paystack-badge{ margin-top:10px; }

    .foot-bottom{ padding-top:18px;gap:8px; }

    /* "anywhere" split support@zagotech.store across a line break mid-word.
       break-word only breaks where a word genuinely cannot fit. */
    footer a,.foot-motto{ overflow-wrap:break-word; }
  }

  /* Below 380px the two lists no longer both fit on a row. */
  @media(max-width:389px){
    .foot-grid{ column-gap:14px; }
    .foot-links a,
    footer .foot-grid a{ min-height:34px;padding:2px 0; }
    .foot-col h4{ font-size:11px; }
    /* support@zagotech.store is a single 164px token with no break
       opportunity in it. Below 390px the column is narrower than that,
       so it has to be allowed to break somewhere — at 390px and up it
       fits on one line and never does. The flex item also needs
       min-width:0 or it refuses to shrink at all and pushes the page. */
    .foot-col .icon-link{ min-width:0; }
    .foot-col .icon-link span{ min-width:0;overflow-wrap:anywhere; }
  }

  /* Desktop keeps its five columns; the vertical rhythm just tightens so the
     block is not taller than the content in it. */
  @media(min-width:601px){
    footer{ padding:52px 0 28px; }
    .foot-grid{ margin-bottom:34px;align-items:start; }
    .foot-col li{ margin-bottom:8px; }
  }

  /* Between phone and desktop the footer was still on the two-column phone
     grid, which at 768px meant two very wide columns and a lot of stacked
     empty space. There is room for all four sections in a row here; the
     brand block spans above them. */
  @media(min-width:601px) and (max-width:900px){
    .foot-grid{
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:24px 20px;align-items:start;
    }
    .foot-grid > div:nth-child(1){ grid-column:1 / span 4; }
  }

  /* =====================================================================
     HERO DIAGRAM — ONE ARRANGEMENT EVERYWHERE
     ---------------------------------------------------------------------
     There were two layouts: an asymmetric scatter for wide screens and a
     symmetric radial one below 1150px. The scatter placed nodes at 86-88%
     and 14-20%, which pushed "Nationwide Delivery" and "Mobile Buyers" hard
     against the edges of the box — with nowrap labels they ran past it and
     were clipped.

     The radial version is simply the better diagram: a centred hub with five
     evenly-spaced spokes, every label inside the box. It now applies at
     every width, so there is one arrangement to reason about instead of two
     that have to be kept in sync.

     The node positions, the connector line endpoints and the pulses that
     travel those lines all have to agree, so the whole set moves together:
     the radial SVG (.infra-svg-mobile, carrying the -m pulses keyframed to
     its own coordinates) is the one that shows, at every width.
     ===================================================================== */
  .infra-hub{ top:50% !important;left:50% !important; }
  .infra-node-mobile{   top:39% !important;left:15% !important; }
  .infra-node-desktop{  top:15% !important;left:50% !important; }
  .infra-node-whatsapp{ top:39% !important;left:85% !important; }
  .infra-node-walkin{   top:74% !important;left:72% !important; }
  .infra-node-out{      top:74% !important;left:28% !important; }
  .infra-node-tag{ width:84px;white-space:normal;line-height:1.3;text-align:center; }
  .infra-status-badge{ left:50% !important;bottom:2% !important;transform:translateX(-50%); }

  /* Plain display toggling rather than restyling x1/y1/x2/y2, which are not
     reliably settable from CSS across browsers. */
  .infra-svg-desktop{ display:none; }
  .infra-svg-mobile{ display:block; }

  /* A radial diagram wants a roughly square box. Left to width:min(46%,620px)
     against a tall hero it stretched into a wide ellipse on big screens. */
  @media(min-width:1151px){
    .hero-animation{ width:min(44%,560px);right:3%;max-height:560px;top:50%;transform:translateY(-50%); }
  }

  /* =====================================================================
     PRODUCT VIDEO
     A short walkaround clip, shown under the photo gallery. On a pre-owned
     unit it is the strongest evidence the site can offer that the grade on
     the page is the condition in the box, so it gets a real label rather
     than being dropped in unannounced.
     ===================================================================== */
  .product-video{ margin-top:14px; }
  .product-video-label{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--white-50);
    margin-bottom:8px;
  }
  .product-video video{
    width:100%;display:block;border-radius:12px;
    border:1px solid var(--white-14);background:#000;
    aspect-ratio:16/9;object-fit:cover;
  }

  /* A card says it has one, so a shopper knows before they open it. */
  .card-video-badge{
    position:absolute;left:10px;bottom:10px;z-index:2;
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 9px;border-radius:999px;
    background:rgba(10,20,40,0.82);backdrop-filter:blur(4px);
    border:1px solid var(--white-14);color:var(--white);
    font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;
    letter-spacing:0.08em;text-transform:uppercase;
  }
  .card-video-badge svg{ width:13px;height:13px;color:var(--sky-light); }

  /* The phone header and search bar are taller than the desktop pair, so the
     button clears them at a slightly lower offset. */
  @media(max-width:600px){
    .install-app-btn{ top:150px;left:12px;right:auto;bottom:auto; }
  }

  /* Two trust cells on a phone leave about 139px for the label, so every one
     of them wrapped to two or three lines and the row read as cramped rather
     than considered. One per row instead: the icon stays inline on the left,
     the text gets the full width, and each claim reads on a single line. */
  @media(max-width:600px){
    .trust{grid-template-columns:1fr;}
    .trust-item::before{display:none;}
    .trust-item{
      border-top:1px solid var(--white-08);
      padding:15px 16px;gap:13px;
    }
    .trust-item:first-child{border-top:none;}
    .trust-item .ic{width:38px;height:38px;border-radius:11px;}
    .trust-item .ic svg{width:17px;height:17px;}
    .trust-item .tt{font-size:12px;letter-spacing:0.06em;}
    .trust-item .ds{font-size:12px;margin-top:2px;}
    .trust-go{display:block;opacity:0.4;}
  }

  /* =====================================================================
     CATALOGUE — NEW vs PRE-OWNED
     ---------------------------------------------------------------------
     Two departments, not two filters. Each gets a full-width header band
     with its own accent so a shopper always knows which half of the shop
     they are standing in: sky for sealed stock, a warmer amber for graded
     pre-owned. The accent is the only thing that differs — same typography,
     same rhythm — so it reads as one catalogue with two halves rather than
     two competing designs.
     ===================================================================== */
  .condition-group{ margin-bottom:54px; }
  .condition-group:last-child{ margin-bottom:0; }

  /* An open editorial header, not a panel. The bordered box this used to
     draw put a hard frame around the whole department and made the
     catalogue read as a form rather than a shop. What identifies the
     department now is an accent rule and the type itself. */
  .condition-head{
    position:relative;
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
    padding:0 0 14px 16px;margin-bottom:10px;
    border-bottom:1px solid var(--white-14);
  }
  /* The one mark of the department: a short accent bar beside the title. */
  .condition-head::before{
    content:"";position:absolute;left:0;top:2px;bottom:16px;width:3px;
    border-radius:2px;background:var(--cond-accent);
  }
  .condition-new{      --cond-accent:var(--green); }
  .condition-preowned{ --cond-accent:#F0A836; }

  .condition-eyebrow{
    display:block;
    font-family:Archivo,sans-serif;font-weight:700;font-size:11px;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--cond-accent);margin-bottom:6px;
  }
  .condition-title{
    font-family:Archivo,sans-serif;font-weight:800;
    font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em;
    line-height:1.1;margin:0;color:var(--white);
  }
  .condition-count{
    flex-shrink:0;
    font-family:'IBM Plex Mono',monospace;font-size:12px;
    color:var(--white-50);padding-bottom:3px;white-space:nowrap;
  }
  .condition-note{
    margin:0 0 26px;padding:0 0 0 16px;
    color:var(--white-72);font-size:13.5px;line-height:1.6;
    max-width:70ch;
  }

  /* Inside a department the category headers step down a level so the
     hierarchy reads department -> category -> brand at a glance. */
  .condition-group .category-group-head h2{ font-size:clamp(17px,1.9vw,21px); }

  @media(max-width:600px){
    .condition-group{ margin-bottom:38px; }
    .condition-head{ padding:0 0 12px 14px;align-items:flex-start;flex-direction:column;gap:6px; }
    .condition-count{ padding-bottom:0; }
    .condition-note{ padding:0 0 0 14px;font-size:13px;margin-bottom:20px; }
  }

  /* A brand teases one or two picks, but .grid lays out four equal tracks —
     so each brand block carried two or three phantom columns of dead space,
     which got more obvious once brands were split across two departments and
     each block held fewer items. auto-fit collapses the empty tracks and
     justify-content:start left-aligns what is left, so a one-item brand reads
     as one card rather than one card and a large hole. A full row is
     pixel-identical to before. */
  .condition-group .brand-group > .grid{
    grid-template-columns:repeat(auto-fit, minmax(240px, 292px));
    justify-content:start;
  }
  /* Below 900px the shared .grid rule already gives two equal columns,
     which is the catalogue layout the phone is meant to have. auto-fit
     with minmax(0,1fr) collapsed that to a single column — the desktop
     track-collapsing fix must not reach down here. */
  @media(max-width:900px){
    .condition-group .brand-group > .grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      justify-content:stretch;
    }
  }

  /* =====================================================================
     MOBILE SHOPPING — TOAST + CHECKOUT BAR
     ---------------------------------------------------------------------
     The bar a shopper sees for the whole session once they have added
     something, so it is built to the same standard as the header: a blurred
     panel rather than a flat block, a sky hairline tying it to the page, a
     cart glyph carrying a live count, and a clear money figure. Three tiers
     of type — label, total, action — so the eye lands on the number first.
     ===================================================================== */
  .cart-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:58;
    display:flex;align-items:center;gap:13px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(22,41,74,0.97) 0%, rgba(15,29,56,0.99) 100%);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--white-14);
    box-shadow:0 -10px 34px rgba(0,0,0,0.42);
    transform:translateY(112%);
    transition:transform .3s var(--ease-premium);
  }
  .cart-bar::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(14,165,233,0.7),transparent);
  }
  .cart-bar.show{ transform:translateY(0); }

  .cart-bar-icon{
    position:relative;flex-shrink:0;
    width:42px;height:42px;border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    color:var(--sky-light);
    background:linear-gradient(145deg, rgba(56,189,248,0.16) 0%, rgba(14,165,233,0.05) 100%);
    box-shadow:inset 0 0 0 1px var(--white-14);
  }
  .cart-bar-icon svg{ width:20px;height:20px; }
  .cart-bar-badge{
    position:absolute;top:-5px;right:-5px;
    min-width:19px;height:19px;padding:0 5px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:var(--sky);color:var(--navy-900);
    font-family:'Archivo',sans-serif;font-weight:800;font-size:10.5px;
    box-shadow:0 0 0 2px var(--navy-800);
  }

  .cart-bar-info{ display:flex;flex-direction:column;min-width:0;flex:1;gap:1px; }
  .cart-bar-count{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--white-50);
  }
  .cart-bar-total{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;
    letter-spacing:-0.01em;color:var(--white);line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cart-bar-cta{
    flex-shrink:0;min-height:46px;
    padding-left:20px;padding-right:20px;
    font-size:13px;letter-spacing:0.03em;
    box-shadow:0 4px 16px rgba(14,165,233,0.3);
  }
  .cart-bar-cta span{ margin-left:5px;transition:transform .2s var(--ease-premium);display:inline-block; }
  .cart-bar-cta:active span{ transform:translateX(3px); }

  /* Confirmation, not interruption: brief, centred, out of the way of the
     bar it is reporting to. */
  .zago-toast{
    position:fixed;left:50%;
    bottom:calc(20px + env(safe-area-inset-bottom) + var(--zago-bottom-inset));
    transform:translateX(-50%) translateY(10px) scale(0.97);
    z-index:130;max-width:calc(100vw - 32px);
    display:flex;align-items:center;gap:8px;
    padding:11px 18px 11px 15px;border-radius:999px;
    background:rgba(22,41,74,0.97);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(56,189,248,0.32);
    color:var(--white);font-size:13.5px;font-weight:600;letter-spacing:0.01em;
    box-shadow:0 12px 34px rgba(0,0,0,0.5);
    opacity:0;pointer-events:none;
    transition:opacity .24s ease, transform .24s var(--ease-premium);
  }
  /* A tick drawn in CSS — no extra markup, no icon font. */
  .zago-toast::before{
    content:"";flex-shrink:0;width:16px;height:16px;border-radius:50%;
    background:var(--green);
    -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain no-repeat;
    box-shadow:0 0 0 3px rgba(16,185,129,0.18);
  }
  .zago-toast.show{ opacity:1;transform:translateX(-50%) translateY(0) scale(1); }

  /* Only a phone gets either of these. */
  @media(min-width:601px){
    .zago-toast,.cart-bar{ display:none !important; }
  }
  @media(max-width:360px){
    .cart-bar{ gap:10px;padding-left:12px;padding-right:12px; }
    .cart-bar-icon{ display:none; }
    .cart-bar-total{ font-size:17px; }
    .cart-bar-cta{ padding-left:16px;padding-right:16px; }
  }
  @media(prefers-reduced-motion:reduce){
    .zago-toast,.cart-bar,.cart-bar-cta span{ transition:none; }
  }

  /* "View details & full specs" is an 11px line of text — the main way into a
     product from a card. The link stays where it is; its hit area grows to a
     comfortable height around it, changing no layout. */
  @media(max-width:600px){
    .view-details-link{ position:relative; }
    .view-details-link::after{
      content:"";position:absolute;left:0;right:0;top:50%;
      height:40px;transform:translateY(-50%);
    }
  }
  @media(prefers-reduced-motion:reduce){
    .zago-toast,.cart-bar{ transition:none; }
  }

  /* =====================================================================
     PRODUCT CARDS — OUT OF THE BOX
     ---------------------------------------------------------------------
     The card was a bordered, filled panel, so a grid of them read as a wall
     of boxes and the product name sat inside a frame rather than under its
     photo. The box is gone: the image keeps its own rounded surface, and the
     name, price and actions sit directly on the page beneath it — which is
     how a modern storefront presents a product.

     Dimensions are deliberately untouched. Width, column count and image
     height are exactly what they were; only the frame has been removed.
     ===================================================================== */
  .card{
    background:none;
    border:1px solid transparent;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  /* The photo keeps a surface of its own so it still reads as a product
     shot rather than a floating cut-out. */
  .card .card-img{
    background:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-800) 60%);
    border:1px solid var(--white-14);
    border-radius:var(--radius);
    overflow:hidden;
    transition:border-color .3s ease, box-shadow .4s var(--ease-premium);
  }
  /* Lift the photo on hover, not the whole panel — there is no panel now. */
  .card:hover{
    transform:none;
    border-color:transparent;
    box-shadow:none;
  }
  .card:hover .card-img{
    border-color:var(--sky);
    box-shadow:0 18px 40px rgba(0,0,0,0.42), 0 0 0 1px rgba(14,165,233,0.25);
  }
  /* Text sits under the photo, on the page, with no inner padding frame. */
  .card > .card-body,
  .card > .card-content,
  .card > div:not(.card-img):not(.card-hole){
    padding-left:0;padding-right:0;
  }
  .card-title{color:var(--white);}

  /* The punch-hole and stamps belonged to the panel, not to a bare photo. */
  .card-hole{display:none;}

  /* =====================================================================
     SELLER SHORTCUT IN THE ACCOUNT PANEL
     An approved seller signing in landed in the buyer view with no route to
     their own store. This is the first thing they see in the panel now.
     Buyers never see it — it renders only when the session role is SELLER.
     ===================================================================== */
  .account-seller-cta{
    display:flex;align-items:center;gap:14px;
    padding:15px 16px;margin:0 0 10px;border-radius:14px;
    text-decoration:none;color:inherit;
    background:linear-gradient(140deg, rgba(14,165,233,0.18) 0%, rgba(14,165,233,0.04) 100%);
    border:1px solid rgba(56,189,248,0.32);
    transition:border-color .18s ease, transform .2s var(--ease-premium), box-shadow .2s ease;
  }
  .account-seller-cta:hover{
    border-color:var(--sky);transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(14,165,233,0.22);
  }
  .account-seller-icon{
    width:42px;height:42px;flex-shrink:0;border-radius:13px;
    display:flex;align-items:center;justify-content:center;color:var(--sky-light);
    background:linear-gradient(145deg, rgba(56,189,248,0.22), rgba(14,165,233,0.06));
    box-shadow:inset 0 0 0 1px var(--white-14);
  }
  .account-seller-icon svg{width:20px;height:20px;}
  .account-seller-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
  .account-seller-text strong{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--white);letter-spacing:0.01em;
  }
  .account-seller-text span{font-size:12.5px;color:var(--white-72);line-height:1.4;}
  .account-seller-go{font-size:24px;color:var(--sky-light);flex-shrink:0;line-height:1;}

  .account-seller-links{
    display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;
  }
  .account-seller-links a{
    flex:1 1 auto;text-align:center;min-width:96px;
    padding:9px 12px;border-radius:10px;
    border:1px solid var(--white-14);background:var(--navy-800);
    font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
    letter-spacing:0.03em;color:var(--white-72);text-decoration:none;
    transition:color .16s ease,border-color .16s ease;
  }
  .account-seller-links a:hover{color:var(--sky-light);border-color:var(--sky);}

  @media(max-width:600px){
    .account-seller-cta{padding:13px 14px;gap:12px;}
    .account-seller-icon{width:38px;height:38px;border-radius:11px;}
    .account-seller-links a{min-height:44px;display:flex;align-items:center;justify-content:center;}
  }
  @media(prefers-reduced-motion:reduce){
    .account-seller-cta{transition:none;}
    .account-seller-cta:hover{transform:none;}
  }

  /* =====================================================================
     FEATURED BRANDS — BLOCK RHYTHM
     ---------------------------------------------------------------------
     Each brand used to be a heading, a half-empty row, and a centred
     "Shop More <Brand> Products" button — which named the brand a third
     time and cost ~70px per block. On a page with four brands that was most
     of the section's height spent on repetition.

     The link moves up into the heading row, where it reads as part of the
     brand's own line, and the row now fills four across.
     ===================================================================== */
  .fb-brand{margin-bottom:34px;}
  .fb-brand:last-child{margin-bottom:0;}
  .fb-brand-head{
    display:flex;align-items:baseline;gap:12px;
    padding-bottom:12px;margin-bottom:18px;
    border-bottom:1px solid var(--white-14);
  }
  .fb-brand-head h3{
    font-family:'Archivo',sans-serif;font-weight:800;
    font-size:clamp(16px,1.8vw,19px);letter-spacing:0.04em;text-transform:uppercase;
    margin:0;color:var(--white);
  }
  .fb-count{
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--white-50);
    white-space:nowrap;
  }
  .fb-more{
    margin-left:auto;flex-shrink:0;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
    letter-spacing:0.06em;text-transform:uppercase;
    color:var(--sky-light);text-decoration:none;white-space:nowrap;
    transition:color .16s ease, transform .18s var(--ease-premium);
    display:inline-block;
  }
  .fb-more:hover{color:var(--white);transform:translateX(3px);}

  @media(max-width:600px){
    .fb-brand{margin-bottom:26px;}
    .fb-brand-head{gap:9px;padding-bottom:10px;margin-bottom:14px;flex-wrap:wrap;}
    .fb-more{font-size:11px;min-height:44px;display:inline-flex;align-items:center;}
  }
  @media(prefers-reduced-motion:reduce){ .fb-more{transition:none;} .fb-more:hover{transform:none;} }

  /* Four picks fills a desktop row; on a phone the same four become two rows
     per brand, and four brands then run to sixteen cards before the visitor
     reaches anything else. Two per brand there — the "See all" link in the
     heading is the way to the rest. */
  @media(max-width:600px){
    .fb-brand .grid > .card:nth-child(n+3){ display:none; }
  }

  /* =====================================================================
     CARD ROW ALIGNMENT + ROW FILL
     ---------------------------------------------------------------------
     Two things were making a row of products read as untidy:

     1. A brand with two items still laid out four equal tracks, so half of
        every row was empty space. auto-fit collapses the unused tracks and
        justify-content:start left-aligns what remains.

     2. Cards in a row are stretched to equal height by the grid, but their
        contents are not — a card carrying a "Only a few left" flag pushed
        its price and button 36px below its neighbour's. Pushing the price
        block to the bottom of the card makes every price and every Add to
        Cart in a row share one baseline, whatever is above them.
     ===================================================================== */
  .fb-brand .grid{
    grid-template-columns:repeat(auto-fit, minmax(240px, 292px));
    justify-content:start;
  }
  .card .card-price{ margin-top:auto; }
  /* Deliberately NOT height:100%. On a card that is not a flex column (the
     marketplace card carried an inline display:block) that forces the body
     to the card height while its content is taller — and since the card is
     overflow:visible since it lost its box, the price simply ran out of the
     card and into the next section. flex:1 on the flex cards already does
     the job this was duplicating. */

  @media(max-width:900px){
    /* Two equal columns is the phone/tablet catalogue layout; auto-fit with a
       flexible max would collapse it to one. */
    .fb-brand .grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
      justify-content:stretch;
    }
  }

  /* The column card layout that makes prices and buttons line up across a row
     was scoped to @media(min-width:601px), so on a phone .card-body stayed a
     row flex — where margin-top:auto centres instead of pushing down, and
     nothing aligned. Phones get the same treatment. */
  @media(max-width:600px){
    .grid > .card{ display:flex;flex-direction:column; }
    .grid > .card > .card-body{ flex:1;display:flex;flex-direction:column; }
    .grid > .card .card-price{ margin-top:auto; }
  }

  /* =====================================================================
     CARD SHAPE BY PRODUCT TYPE
     ---------------------------------------------------------------------
     Every product card carries its own type class now (card-type-phone,
     card-type-printer, …), emitted by cardTypeClass() in script.js and
     card_type_class() in api/config.php so all four render paths agree.

     A phone is a tall object. Shown in the same 4:3 box as a laptop it
     floats in the middle with dead space either side and reads smaller
     than it is. A portrait frame gives the photo the shape of the thing
     being sold.
     ===================================================================== */
  /* Narrower, not taller. The card keeps the height it had; the phone photo
     is inset so the frame itself is a slim vertical rectangle, which is the
     shape of the thing rather than just a tall box. */
  .card-type-phone .card-img{
    aspect-ratio:3/4;
    width:76%;margin-left:auto;margin-right:auto;
  }

  /* Printers and scanners are wider than they are tall — they earn the
     landscape frame the default already gives them, stated here so the
     intent is explicit rather than incidental. */
  .card-type-printer .card-img,
  .card-type-scanner .card-img{ aspect-ratio:4/3; }

  /* A console sits somewhere between the two. */
  .card-type-console .card-img{ aspect-ratio:1/1; }

  /* The phone category page is entirely phones, so its grid can afford a
     narrower, taller column than a mixed catalogue. */
  @media(min-width:901px){
    .category-phone .grid{ grid-template-columns:repeat(auto-fit, minmax(210px, 250px)); }
  }

  /* On phones the card image is pinned to a fixed 100px height, which wins
     over any aspect-ratio and flattens every photo into a letterbox. Phone
     products need the height to follow the ratio instead — a phone shown as
     a 164x100 landscape strip is the one shape it definitely is not. */
  @media(max-width:600px){
    .card-type-phone .card-img{ height:auto;aspect-ratio:3/4;width:74%;margin-left:auto;margin-right:auto; }
    .card-type-console .card-img{ height:auto;aspect-ratio:1/1; }
  }

  /* =====================================================================
     HERO — TRACK AN ORDER
     ---------------------------------------------------------------------
     Tracking was buried in a footer link, which is the wrong place for the
     one thing a returning customer comes back to do. It sits in the hero's
     right-hand column now, under the network diagram, where it reads as the
     practical counterpart to the marketing above it.
     ===================================================================== */
  .hero-track{
    position:absolute;right:3%;bottom:8%;z-index:2;
    width:min(44%,560px);max-width:400px;
    padding:16px 18px;border-radius:16px;
    background:linear-gradient(160deg, rgba(22,41,74,0.92) 0%, rgba(15,29,56,0.95) 100%);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--white-14);
    box-shadow:0 18px 40px rgba(0,0,0,0.38);
  }
  .hero-track-head{display:flex;align-items:center;gap:12px;margin-bottom:13px;}
  .hero-track-icon{
    width:38px;height:38px;flex-shrink:0;border-radius:12px;
    display:flex;align-items:center;justify-content:center;color:var(--sky-light);
    background:linear-gradient(145deg, rgba(56,189,248,0.2), rgba(14,165,233,0.05));
    box-shadow:inset 0 0 0 1px var(--white-14);
  }
  .hero-track-icon svg{width:19px;height:19px;}
  .hero-track-title{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;
    color:var(--white);letter-spacing:0.01em;line-height:1.2;
  }
  .hero-track-sub{font-size:12px;color:var(--white-50);margin-top:2px;line-height:1.4;}
  .hero-track-form{display:flex;gap:8px;align-items:stretch;}
  .hero-track-form input{
    flex:1;min-width:0;border-radius:10px;
    border:1px solid var(--white-14);background:var(--navy-900);color:var(--white);
    padding:10px 13px;font-family:'IBM Plex Mono',monospace;font-size:13px;
    transition:border-color .16s ease;
  }
  .hero-track-form input:focus{outline:none;border-color:var(--sky);}
  .hero-track-form input::placeholder{color:var(--white-50);font-size:12px;}
  .hero-track-btn{flex-shrink:0;padding:0 18px;font-size:13px;min-height:42px;}

  /* Below the desktop breakpoint the diagram drops into normal flow, so the
     card follows it rather than floating over the hero. */
  @media(max-width:1150px){
    .hero-track{
      position:static;width:100%;max-width:none;
      margin:22px auto 0;
    }
  }
  /* 16px from the tablet breakpoint down, not just on phones: anything
     under 16px makes a touch browser zoom the viewport in on focus and
     never zoom back out. The 13px monospace is a desktop-only nicety. */
  @media(max-width:1099px){
    .hero-track-form input{font-size:16px;min-height:46px;}
    .hero-track-btn{min-height:46px;}
  }
  @media(max-width:600px){
    .hero-track{padding:14px 15px;border-radius:14px;margin-top:18px;}
    .hero-track-form{flex-direction:column;}
    .hero-track-btn{width:100%;}
  }

  /* =====================================================================
     FULL-SIZE PHOTO VIEWER (marketplace product page)
     A seller's photo is the only evidence a buyer has. Tapping it opens the
     image at its own size, on a plain ground, with nothing cropped.
     ===================================================================== */
  .mp-lightbox{
    display:none;position:fixed;inset:0;z-index:200;
    background:rgba(5,10,20,0.94);
    align-items:center;justify-content:center;
    padding:24px;cursor:zoom-out;
  }
  .mp-lightbox.open{display:flex;}
  .mp-lightbox img{
    max-width:100%;max-height:100%;
    object-fit:contain;border-radius:10px;
    box-shadow:0 30px 80px rgba(0,0,0,0.6);
  }
  .mp-lightbox-close{
    position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
    width:46px;height:46px;border-radius:50%;
    border:1px solid var(--white-14);background:rgba(15,29,56,0.9);
    color:var(--white);font-size:26px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .mp-lightbox-hint{
    position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;
    transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--white-50);
    letter-spacing:0.06em;
  }

/* =====================================================================
   SHARE A LISTING  (see share.js)
   ---------------------------------------------------------------------
   Sits directly under the buy controls on a product page and inside each
   row of the seller's product list. Quiet by default — it is a secondary
   action next to Add to Cart — but with real 44px touch targets, because
   on a phone this is the control a seller uses most.
   ===================================================================== */
.share-row{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--white-08);
  max-width:520px;
}
.share-row-label{
  display:block;margin-bottom:9px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--white-50);
}
.share-row-actions{display:flex;flex-wrap:wrap;gap:8px;}

.share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 14px;
  border:1px solid var(--white-14);border-radius:10px;
  background:var(--white-08);color:var(--white-72);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s var(--ease-premium);
}
.share-btn svg{width:15px;height:15px;flex:0 0 auto;}
.share-btn:hover{border-color:var(--sky);color:var(--white);background:rgba(14,165,233,0.12);}
.share-btn:active{transform:scale(0.97);}
.share-btn:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px;}
/* Confirmation state after a successful copy. */
.share-btn.is-done{
  border-color:#10B981;color:#34d399;background:rgba(16,185,129,0.12);
}

/* Only shown when every copy path failed, so the link can be selected by hand. */
.share-url-field{
  display:none;width:100%;margin-top:10px;
  padding:9px 11px;border:1px solid var(--white-14);border-radius:9px;
  background:rgba(0,0,0,0.25);color:var(--white-72);
  font-family:'IBM Plex Mono',monospace;font-size:12px;
}

/* ---------- compact variant: one per row in a product list ---------- */
.share-btn-mini{
  min-height:34px;padding:0 10px;gap:6px;font-size:12px;border-radius:8px;
}
.share-btn-mini svg{width:13px;height:13px;}

@media(max-width:600px){
  .share-row{max-width:none;}
  /* Full-width halves: a thumb reaches either without aiming. */
  .share-row-actions{gap:8px;}
  .share-btn{flex:1 1 calc(50% - 4px);min-height:44px;font-size:13.5px;}
  .share-btn-mini{flex:0 0 auto;min-height:38px;}
}
@media(prefers-reduced-motion:reduce){
  .share-btn{transition:none;}
  .share-btn:active{transform:none;}
}

/* The listing's public address, shown under its name in the seller's product
   list. Monospace and dimmed: it is there to be recognised and copied, not
   read as prose, and it must never compete with the product name. */
.sd-product-link{
  margin-top:4px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--white-50);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:600px){
  .sd-product-link{font-size:10.5px;}
  /* Stack the row's controls so the share pair and Edit/Delete each get a
     full line rather than being squeezed onto one. */
  .admin-row[data-share-url] .actions{flex-wrap:wrap;gap:8px;}
  .admin-row[data-share-url] .share-row-actions{flex:1 1 100%;}
}

/* =====================================================================
   SELLER REJECTION MODAL
   ---------------------------------------------------------------------
   The box where a rejection reason gets written. This text is emailed to a
   real applicant and stored against their application, so it is treated as
   writing, not as a confirmation dialog: room to see what you typed, the
   usual reasons one tap away, and a live count against the server's limits.
   ===================================================================== */
/* Opens on top of the review panel it was launched from, so Cancel returns
   to the application rather than to nothing. Every .modal-overlay shares
   z-index:100, which would leave the stacking order down to markup order. */
#sellerRejectOverlay{z-index:120;}

.reject-store-line{
  margin:-4px 0 16px;
  font-size:13.5px;color:var(--white-72);
  padding-bottom:14px;border-bottom:1px solid var(--white-08);
}

.reject-presets{display:flex;flex-wrap:wrap;gap:7px;}
.reject-preset{
  border:1px solid var(--white-14);border-radius:20px;
  background:var(--white-08);color:var(--white-72);
  padding:7px 13px;min-height:34px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.reject-preset:hover{border-color:var(--sky);color:var(--white);background:rgba(14,165,233,0.12);}
.reject-preset:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px;}

#sellerRejectOverlay textarea{
  width:100%;resize:vertical;min-height:120px;line-height:1.6;
}

.reject-meta{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:7px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--white-50);
}
/* Mirrors the server's 10-character minimum, so the rule is visible before
   the request is made rather than coming back as an error. */
.reject-meta .is-short{color:#F0A836;}

.reject-actions{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--white-08);
}
#rejectConfirmBtn:disabled{opacity:0.6;cursor:not-allowed;}

/* Shown in the review panel when a re-applicant was turned down before. */
.seller-prior-reject{
  margin:14px 0;padding:12px 14px;
  border:1px solid rgba(245,158,11,0.32);border-left:3px solid #F0A836;
  border-radius:9px;background:rgba(245,158,11,0.08);
}
.seller-prior-reject-label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:0.06em;color:#F0A836;
}
.seller-prior-reject-text{
  margin-top:5px;font-size:13px;line-height:1.6;color:var(--white-72);
}

@media(max-width:600px){
  .reject-preset{font-size:12px;padding:8px 12px;min-height:38px;}
  .reject-actions{flex-direction:column-reverse;}
  .reject-actions .btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .reject-preset{transition:none;}
}

/* =====================================================================
   VENDOR LISTINGS IN THE SHOP
   ---------------------------------------------------------------------
   A third-party seller's product, shown next to ZagoTech's own stock in the
   shop grid and on the brand pages. The card keeps the catalogue card's
   shape so a mixed row does not look assembled from two different sites —
   what marks it out is the seller line and the "Seller" stamp where a
   ZagoTech pre-owned unit carries its "Tested" one.
   ===================================================================== */
.vendor-card{position:relative;}
.vendor-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, transparent, var(--sky), transparent);
  opacity:0.55;pointer-events:none;
}

/* Sits where .verified-stamp sits on a ZagoTech pre-owned card, and says
   something different on purpose: this unit was listed by a seller, not
   inspected by us. */
.vendor-stamp{
  position:absolute;right:10px;bottom:10px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:20px;
  border:1px solid var(--sky);background:rgba(14,165,233,0.16);
  color:var(--sky-light);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:0.06em;
  backdrop-filter:blur(3px);
}
.vendor-stamp svg{width:11px;height:11px;}

.vendor-store-line{
  display:inline-flex;align-items:center;gap:5px;
  margin:6px 0 2px;
  font-size:12px;font-weight:700;color:var(--sky-light);
  text-decoration:none;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vendor-store-line svg{width:12px;height:12px;flex:0 0 auto;}
.vendor-store-line:hover{text-decoration:underline;}

/* The section that holds them. Its heading carries the wording that keeps
   ZagoTech's own inspection promise off a seller's stock, so it must read as
   a deliberate department rather than a footnote. */
.condition-group.condition-vendor .condition-eyebrow{color:var(--sky-light);}
.condition-group.condition-vendor .condition-head{border-color:rgba(14,165,233,0.35);}

/* Brand pages: the same distinction, server-rendered. */
.vendor-brand-section{
  margin-top:40px;padding-top:28px;
  border-top:1px solid var(--white-14);
}
.vendor-brand-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:6px;
}
.vendor-brand-head h2{
  font-family:'Archivo',sans-serif;font-size:clamp(19px,2.4vw,23px);
  font-weight:800;letter-spacing:-0.01em;margin:0;
}
.vendor-brand-eyebrow{
  display:block;margin-bottom:4px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--sky-light);
}
.vendor-brand-note{
  max-width:720px;margin:0 0 20px;
  font-size:13.5px;line-height:1.7;color:var(--white-72);
}

@media(max-width:600px){
  .vendor-stamp{right:8px;bottom:8px;padding:3px 8px;font-size:9px;}
  .vendor-store-line{font-size:11.5px;}
  .vendor-brand-section{margin-top:30px;padding-top:22px;}
}
@media(prefers-reduced-motion:reduce){
  .vendor-card::after{transition:none;}
}

/* ===== Admin: add photos by link ===== */
.image-link-row{display:flex;gap:8px;align-items:stretch;}
.image-link-row textarea{
  flex:1;min-width:0;resize:vertical;min-height:44px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.5;
}
.image-link-row .btn{flex-shrink:0;align-self:flex-start;min-height:44px;}
.image-link-row .btn:disabled{opacity:0.6;cursor:wait;}
.image-link-help{margin:6px 0 0;line-height:1.55;}

/* A photo that will not load is marked, rather than left as a blank square
   the admin cannot tell apart from one still loading. */
.gallery-thumb.thumb-broken{outline:2px solid var(--red);outline-offset:-2px;}
.gallery-thumb.thumb-broken img{opacity:0.15;}
.gallery-thumb.thumb-broken::after{
  content:"Won't load";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:10.5px;font-weight:700;color:var(--red-light);
  pointer-events:none;
}
@media(max-width:600px){
  .image-link-row{flex-direction:column;}
  .image-link-row .btn{align-self:stretch;}
}

/* ===== Cart: items from verified sellers =====
   Listed in the same cart window as ZagoTech's own items, but as their own
   block with their own checkout, because they are paid for separately. */
.seller-cart{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--white-14);
}
.seller-cart-head{display:flex;flex-direction:column;gap:3px;margin-bottom:6px;}
.seller-cart-title{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:0.07em;color:var(--sky-light);
}
.seller-cart-note{font-size:12.5px;color:var(--white-50);line-height:1.5;}
.seller-cart .cart-row .name a{color:inherit;text-decoration:none;}
.seller-cart .cart-row .name a:hover{text-decoration:underline;}
.seller-cart .cart-total-row{margin-top:10px;}
.seller-cart-go{display:block;width:100%;text-align:center;margin-top:10px;}

/* ===== CAC registration, under the Search button =====
   Wraps onto its own line beneath the search row and sits at the right edge,
   under the button. Links to the registration details and the certificate,
   so the number can be checked rather than just read. */
.site-search-inner{flex-wrap:wrap;row-gap:6px;}
.site-search-reg{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.04em;
  color:var(--white-50);text-decoration:none;
  padding:2px 4px;border-radius:6px;
  transition:color .15s ease;
}
.site-search-reg svg{width:12px;height:12px;color:#10B981;flex-shrink:0;}
.site-search-reg strong{color:var(--white);font-weight:600;letter-spacing:0.06em;}
.site-search-reg:hover{color:var(--white-72);}
.site-search-reg:hover strong{color:var(--sky-light);}
.site-search-reg:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px;}
@media(max-width:600px){
  .site-search-reg{font-size:10.5px;}
}

/* ===== "You may also like" cards: buyable from where they are =====
   Each card is a column so the button always sits on the card's bottom edge,
   which also makes every card in the row the same height (they used to end
   wherever their spec list happened to finish). */
.related-card{display:flex;flex-direction:column;}
.related-card .info{display:flex;flex-direction:column;flex:1;}
.related-card .related-specs{flex:1;}
.related-add{
  width:100%;margin-top:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;padding:9px 12px;min-height:38px;
}
.related-add svg{flex-shrink:0;}

/* The row itself: a tidy scrollbar instead of the browser's default grey bar,
   and snapping so a card never comes to rest half cut off at the edge. */
.recent-strip{
  scroll-snap-type:x proximity;
  scroll-padding-left:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--white-14) transparent;
}
.recent-strip > *{scroll-snap-align:start;}
.recent-strip::-webkit-scrollbar{height:8px;}
.recent-strip::-webkit-scrollbar-track{background:transparent;}
.recent-strip::-webkit-scrollbar-thumb{background:var(--white-14);border-radius:999px;}
.recent-strip::-webkit-scrollbar-thumb:hover{background:var(--sky);}

/* The cart always opens on top of the product window it was opened from —
   stated rather than left to the order the overlays happen to sit in. */
#cartOverlay{z-index:110;}
#checkoutOverlay{z-index:115;}

/* ===== MAIN MENU ON EVERY PAGE (no JavaScript needed) =====
   The full .nav-links menu turns into a drawer below 1099px that only
   script.js can open, and most pages do not load script.js — so those pages
   get this instead. It is the same five destinations, as plain links that are
   always on screen: on a phone the row simply scrolls sideways rather than
   hiding behind a button that would not work. */
.nav-links-lite{
  display:flex;align-items:center;gap:24px;
  list-style:none;margin:0;padding:0;min-width:0;
}
.nav-links-lite a{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;
  text-transform:uppercase;letter-spacing:0.03em;
  color:var(--white-72);text-decoration:none;white-space:nowrap;
  padding-bottom:4px;position:relative;display:block;
}
.nav-links-lite a:hover{color:var(--sky-light);}
.nav-links-lite a.active{color:var(--white);}
.nav-links-lite a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--sky);border-radius:2px;
}
.nav-links-lite a:focus-visible{outline:2px solid var(--sky-light);outline-offset:3px;border-radius:3px;}

@media(max-width:1099px){
  /* The menu drops to its own line under the logo, so the logo and the page's
     own buttons keep their room and the links stay readable. */
  .nav-lite-row{flex-wrap:wrap;row-gap:10px;}
  .nav-links-lite{
    order:3;flex:1 0 100%;gap:18px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .nav-links-lite::-webkit-scrollbar{display:none;}
  .nav-links-lite a{font-size:12.5px;padding:6px 0;}
}
@media(max-width:600px){
  .nav-links-lite{gap:16px;}
  .nav-links-lite a{font-size:12px;}
}

/* ===== BREADCRUMBS =====
   Shown under the header on product, brand, category, store and seller-listing
   pages. Someone arriving from a search result or a shared link could not tell
   where in the shop they had landed, and the only way out was a single
   "← Back to Shop" link. Each step up is a link; the page you are on is not. */
.crumbs{
  /* The site styles every <nav> as a flex row with space-between and its
     own padding. This one is a plain bar, and without resetting that its
     inner .wrap (which has auto side margins) was centred as a flex item
     instead of starting at the page margin. */
  display:block;padding:0;
  border-bottom:1px solid var(--white-08);
  background:rgba(255,255,255,0.015);
}
.crumbs-inner{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:10px 24px;
  font-family:'Archivo',sans-serif;font-size:12.5px;
}
.crumbs a{
  color:var(--white-50);text-decoration:none;
  padding:3px 2px;border-radius:4px;
}
.crumbs a:hover{color:var(--sky-light);text-decoration:underline;}
.crumbs a:focus-visible{outline:2px solid var(--sky-light);outline-offset:2px;}
.crumbs-sep{color:var(--white-24, var(--white-14));font-size:13px;line-height:1;}
.crumbs-current{
  color:var(--white-72);font-weight:600;
  /* A long product name should not push the trail onto three lines. */
  max-width:min(46ch, 100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:600px){
  .crumbs-inner{padding:8px 16px;gap:5px;font-size:11.5px;}
  .crumbs-current{max-width:18ch;}
}

/* ===================== DELETING AN ACCOUNT =====================
   Deliberately plain and a little severe — this is the one screen on the
   site where a mis-click cannot be taken back, so nothing here should look
   like an ordinary button. */
.btn-danger{background:var(--red);color:#ffffff;border:1px solid var(--red);}
.btn-danger:hover{background:var(--red-light);border-color:var(--red-light);}
.btn-danger:disabled{opacity:.6;cursor:default;}
.delete-account-box{
  margin-top:12px;padding:18px;border:1px solid rgba(248,92,110,0.35);
  border-radius:10px;background:rgba(248,92,110,0.06);
}
.delete-account-box h4{margin:0 0 6px;color:var(--red-light);font-size:15px;}
.delete-account-box p{margin:0 0 14px;color:var(--white-72);font-size:13px;line-height:1.6;}
.delete-account-head{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--white-50);margin-bottom:6px;
}
.delete-account-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px;}
.delete-account-list{margin:0;padding-left:18px;color:var(--white-72);font-size:12.5px;line-height:1.65;}
.delete-account-list li{margin-bottom:5px;}
@media(max-width:700px){
  .delete-account-cols{grid-template-columns:1fr;gap:14px;}
}

/* ===================== CROSSED-OUT PRICES =====================
   Only ever shown for a price this shop actually charged (kept automatically
   when the owner lowers a price), or one the owner has checked on another
   site — which is labelled as such rather than dressed up as our own former
   price. Deliberately quieter than the real price, because the real price is
   the thing the buyer is deciding on. */
.price-compare{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  margin-bottom:2px;font-size:12.5px;line-height:1.4;
}
.price-was-label{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--white-50);
}
.price-compare s{color:var(--white-50);text-decoration-thickness:1px;}
.price-off{
  font-weight:700;font-size:11px;padding:2px 6px;border-radius:20px;
  background:rgba(37,211,102,0.14);color:var(--whatsapp);white-space:nowrap;
}
/* Someone else's price is a comparison, not a discount we are running. */
.price-compare-market .price-off{background:rgba(14,165,233,0.14);color:var(--sky-light);}

/* ===================== SHAREABLE REQUEST LINK (admin) =====================
   The owner talks to customers on WhatsApp all day. Rather than describing
   where the request form is, they copy this and paste it. */
.request-link-bar{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:14px;
  border:1px solid var(--white-14);border-radius:12px;
  background:rgba(14,165,233,0.06);
}
.request-link-copy{flex:1;min-width:210px;}
.request-link-label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--white-50);margin-bottom:6px;
}
.request-link-field{
  width:100%;padding:9px 12px;border-radius:8px;
  border:1px solid var(--white-14);background:var(--navy-900);
  color:var(--sky-light);font-family:'IBM Plex Mono',monospace;font-size:13px;
  cursor:text;
}
.request-link-field:focus{outline:none;border-color:var(--sky);}
.request-link-actions{display:flex;gap:8px;flex-wrap:wrap;}
@media(max-width:600px){
  .request-link-bar{padding:12px 13px;}
  .request-link-actions .btn{flex:1;min-height:44px;}
}