: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;
    --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;
    -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;}
    .nav-cta{gap:8px;}
    #navWaBtn{
      width:38px;height:38px;padding:0;border-radius:50%;flex-shrink:0;
    }
    #navWaBtn .btn-label{display:none;}
    #navWaBtn svg{width:18px;height:18px;}
  }

  /* ===== 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:38;cy:10;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:60;cy:46;opacity:0;}
  }
  @keyframes infraPulse2{
    0%{cx:90;cy:14;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:60;cy:46;opacity:0;}
  }
  @keyframes infraPulse3{
    0%{cx:70;cy:80;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:60;cy:46;opacity:0;}
  }
  @keyframes infraPulse4{
    0%{cx:95;cy:52;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:60;cy:46;opacity:0;}
  }
  @keyframes infraPulse5{
    0%{cx:60;cy:46;opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{cx:18;cy:66;opacity:0;}
  }

  .infra-hub{
    position:absolute;top:46%;left:60%;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;}

  @media(max-width:1150px){
    /* Below this width there's no room beside the hero text for an
       absolutely-positioned 48%-wide overlay, so it drops into normal flow
       as its own full-width block below the text instead. Desktop's layout
       is an asymmetric scatter built for a wide, nearly-square box — reused
       verbatim it clips at the edges and collides on a narrower, shorter
       one, so it's recomposed here into a clean, symmetric radial diagram:
       a centered hub with five evenly-spaced spokes. Every piece that has
       to agree with another — a node's position, its connector line's
       endpoint, and that line's traveling pulse — is repositioned together
       as one coordinated set, so nothing drifts out of alignment. */
    .hero-animation{
      display:block;position:relative;
      width:100%;height:365px;
      top:auto;right:auto;
      margin-top:36px;
    }
    .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%);}

    /* Swap which of the two SVG diagrams is visible — plain display
       toggling, so this doesn't depend on x1/y1/x2/y2 or cx/cy being
       stylable via CSS on every browser (they're not reliably). */
    .infra-svg-desktop{display:none;}
    .infra-svg-mobile{display:block;}
  }
  @media(prefers-reduced-motion:reduce){
    .infra-pulse, .infra-hub-ring{animation:none;}
  }

  /* ===== TRUST BAR ===== */
  .trust{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--white-14);
  }
  .trust-item{
    padding:24px 20px;border-left:1px solid var(--white-14);
    display:flex;gap:12px;align-items:flex-start;
  }
  .trust-item:first-child{border-left:none;}
  .trust-item .ic{font-size:18px;line-height:1;width:36px;height:36px;border:1px solid var(--white-14);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sky-light);}
  .trust-item .ic svg{width:18px;height:18px;}
  .trust-item .tt{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.02em;}
  .trust-item .ds{font-size:12px;color:var(--white-72);margin-top:2px;}

  .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;}
  /* 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);
  }
  .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%;}
  .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);}
  .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. */
  .install-app-btn{
    position:fixed;top:88px;right:26px;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{
      right:12px;padding:9px 14px 9px 12px;font-size:12px;
      top:calc(66px + 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);
    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;
      height:78vh;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;max-height:88vh;overflow-y:auto;padding:32px;
    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:var(--navy-900);border:1px solid var(--white-14);border-radius:var(--radius);
    padding:16px 10px 14px;text-align:center;position:relative;overflow:hidden;
    transition:border-color .15s ease,transform .15s 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(-1px);}
  .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:19px;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);}
  }
  .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);}
  .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{
    display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:18px;
    background:linear-gradient(135deg,rgba(14,165,233,0.14),rgba(14,165,233,0.02));
    border:1px solid var(--white-14);border-radius:var(--radius);
  }
  .account-dash-header > div:last-child{min-width:0;}
  .account-avatar-ring{
    width:66px;height:66px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--sky),var(--sky-light));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(14,165,233,0.16);
  }
  .account-avatar{
    width:58px;height:58px;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:22px;
  }
  .account-greeting{
    font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;
    color:var(--sky-light);margin-bottom:3px;
  }
  .account-dash-header h3{font-size:19px;margin-bottom:2px;overflow-wrap:anywhere;}
  .account-dash-header .sub{margin-bottom:0;font-size:13px;overflow-wrap:anywhere;}
  .account-member-since{font-size:11px;color:var(--white-50);margin-top:5px;}
  @media(max-width:600px){
    .account-dash-header{gap:12px;padding:14px;}
    .account-avatar-ring{width:52px;height:52px;}
    .account-avatar{width:44px;height:44px;font-size:18px;}
    .account-dash-header h3{font-size:16px;}
  }
  .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.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.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;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);
  }
  .product-modal-img img{width:100%;height:100%;object-fit:cover;}
  .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;}
    /* No hover on touch devices — the dropdown just becomes a permanently
       visible, indented sub-list under "Shop" instead of a reveal-on-hover
       menu, matching how the rest of this panel already reads as one flat
       vertical list. */
    .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;
    }
    .nav-dropdown-menu a{padding:8px 12px;font-size:13px;color:var(--white-50);}
  }
  /* 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);}
    .trust-item:nth-child(3){border-left:none;}
    .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. */
    .foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
    .foot-grid > div:nth-child(1){grid-column:1 / span 2;}
  }
  @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{
      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. */
    .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;}
    .compare-toggle{font-size:8px;gap:5px;margin-top:8px;}
    .compare-toggle input{width:12px;height:12px;}
    /* 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;}
  }