/*
Theme Name: Volta E-Mobility Store
Description: Modern online store for electric scooters, electric bikes, helmets, accessories and spare parts. Home with swipeable hero and swipeable category circles, best sellers, shop with category chips, product pages with swipe gallery, spec lists, colour/size options and verified-buyer reviews, cart drawer, favorites, customer account, checkout with Stripe, PayPal and optional installments, shipping to all countries. Spanish by default (EN/FR optional). No plugins required.
Author: Volta
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: volta
*/
:root{--teal:#00b4d8;--teal-d:#0096b4;--navy:#0c2d48;--ink:#16324a;--muted:#5b7186;--bg:#f5f9fc;--line:#dbe8f0;--radius:22px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:70px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
svg{display:block}
h1,h2,h3{font-family:'Patrick Hand','Kalam',cursive;font-weight:400;line-height:1.1;color:var(--navy)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* Header */
.ng-head{position:sticky;top:0;z-index:50;background:var(--headbg,#fff);box-shadow:0 2px 14px rgba(12,45,72,.08)}
.ng-head .wrap{display:flex;align-items:center;gap:14px;height:84px}
.ng-logo{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.ng-logo img,.ng-logo .mark{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.ng-logo .mark{border:3px solid var(--teal);color:var(--teal);display:grid;place-items:center;background:#fff}
.ng-logo .mark svg{width:34px;height:34px}
.ng-logo b{display:block;font-family:'Patrick Hand',cursive;font-size:32px;font-weight:400;color:var(--navy);line-height:1}
.ng-logo small{font-size:12.5px;font-weight:700;color:var(--teal)}
.ng-nav{display:none;gap:26px;font-weight:700}
.ng-nav a:hover,.ng-nav a.cur{color:var(--teal)}
.ng-lang{display:none;gap:4px;font-weight:800;font-size:13px}
.ng-lang a{padding:5px 9px;border-radius:999px;color:var(--muted)}
.ng-lang a.on{background:var(--navy);color:#fff}
.ng-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border-radius:999px;background:var(--teal);color:#fff;font:800 17px 'Nunito',sans-serif;border:2px solid var(--teal);transition:.2s;cursor:pointer}
.ng-btn:hover{background:var(--teal-d);border-color:var(--teal-d)}
.ng-btn.ghost{background:transparent;border-color:#fff}
.ng-btn.ghost:hover{background:rgba(255,255,255,.15)}
.ng-btn.dark{background:transparent;border-color:#fff}
.ng-btn svg{width:22px;height:22px}
.ng-head .ng-btn{padding:11px 22px}
.ng-burger{width:44px;height:44px;background:none;border:0;display:grid;place-content:center;gap:6px;cursor:pointer}
.ng-burger i{display:block;width:28px;height:3.5px;border-radius:3px;background:var(--navy)}
.ng-menu{display:none;background:#fff;border-top:1px solid #e3edf4}
.ng-menu.open{display:block}
.ng-menu a{display:block;padding:14px 24px;font-weight:700;border-bottom:1px solid #eef4f8}
.ng-menu .ng-lang{display:flex;padding:14px 20px}

/* Hero */
.ng-hero{position:relative;min-height:600px;display:flex;align-items:center;color:#fff;overflow:hidden;background:linear-gradient(135deg,#0c2d48,#00789a) center/cover no-repeat}
.ng-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,22,34,.88) 0%,rgba(8,22,34,.55) 55%,rgba(8,22,34,.05) 100%)}
.ng-hero .wrap{position:relative;padding-top:56px;padding-bottom:110px;width:100%}
.ng-hero h1{color:#fff;font-size:clamp(44px,8vw,78px);max-width:560px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ng-hero p{max-width:400px;margin:22px 0;font-size:18px;opacity:.95}
.ng-hero.sm{min-height:300px}.ng-hero.sm .wrap{padding-top:40px;padding-bottom:90px}
.ng-hero.sm h1{font-size:clamp(36px,6vw,58px)}
.ng-note{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-family:'Kalam',cursive;font-size:19px;color:#e9f9ff}
.ng-note svg{width:34px;height:34px;color:var(--teal);flex:none}
.ng-note span{border-bottom:3px solid var(--teal);padding-bottom:4px;transform:rotate(-3deg);display:inline-block}
.ng-cta{display:flex;flex-direction:column;gap:14px;max-width:330px}

/* Stats */
.ng-stats{position:relative;margin-top:-60px;background:#fff;border-radius:44px 44px 0 0;padding:34px 0 30px}
.ng-stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-left:8px;padding-right:8px}
.ng-stat{text-align:center;padding:0 6px}
.ng-stat:not(:last-child){border-right:1px solid var(--line)}
.ng-stat svg{width:30px;height:30px;margin:0 auto 6px;color:var(--navy)}
.ng-stat strong{display:block;font-size:24px;font-weight:800;color:var(--navy);line-height:1.1}
.ng-stat span{display:block;color:var(--muted);font-size:12px;line-height:1.3;margin-top:4px}

/* Sections */
.ng-sec{padding:38px 0}
.ng-sec-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.ng-sec-head h2{display:flex;align-items:center;gap:12px;font-size:40px}
.ng-sec-head h2 svg{width:40px;height:40px;color:var(--navy)}
.ng-sec-head p{color:var(--muted);max-width:520px;margin-top:6px}
.ng-outline{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border:2px solid var(--navy);border-radius:999px;font-weight:800;color:var(--navy);transition:.2s;background:transparent;cursor:pointer;font-family:inherit;font-size:16px}
.ng-outline:hover{background:var(--navy);color:#fff}
.ng-outline svg{width:18px;height:18px}
.ng-slider{position:relative}
.ng-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;margin:0 -20px;scrollbar-width:none}
.ng-track::-webkit-scrollbar{display:none}
.ng-card{flex:0 0 min(72%,270px);scroll-snap-align:start;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(12,45,72,.09);display:block}
.ng-card .pic{position:relative;aspect-ratio:1/.62;background:linear-gradient(135deg,#cfe9f3,#e8f5fa);display:grid;place-items:center;color:#9cc7d8}
.ng-card .pic>img{width:100%;height:100%;object-fit:cover}
.ng-card .pic>svg{width:64px;height:64px}
.ng-fav{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.4);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;cursor:pointer}
.ng-fav svg{width:20px;height:20px}
.ng-fav.on{background:#fff;color:#e63b6f}.ng-fav.on svg path{fill:#e63b6f}
.ng-card .info{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 14px}
.ng-card h3{font:800 18px 'Nunito',sans-serif;color:var(--navy)}
.ng-card small{color:var(--muted);font-size:14px}
.ng-card .m,.ng-card .f{font-size:22px;font-weight:800}.ng-card .m{color:var(--teal)}.ng-card .f{color:#e83e8c}
.ng-next{position:absolute;right:-6px;top:38%;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.ng-next svg{width:20px;height:20px}
.ng-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ng-grid .ng-card{flex:none}

/* Donation banner */
.ng-banner{position:relative;color:#fff;background:#10212f center/cover no-repeat;overflow:hidden}
.ng-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,22,34,.92) 0%,rgba(8,22,34,.6) 60%,rgba(8,22,34,.15) 100%)}
.ng-banner .wrap{position:relative;display:flex;gap:18px;align-items:flex-start;padding-top:44px;padding-bottom:44px}
.ng-banner .hand{width:84px;height:84px;flex:none}
.ng-banner h2{color:#fff;font-size:40px;margin-bottom:10px}
.ng-banner p{max-width:360px;margin-bottom:20px}
.ng-banner .tag{position:absolute;right:24px;bottom:20px;font-family:'Kalam',cursive;font-size:22px;transform:rotate(-8deg);text-align:right}

/* Forms / donate */
.ng-main{position:relative;margin-top:-60px;background:var(--bg);border-radius:40px 40px 0 0;padding:26px 0 30px}
.ng-donate-grid{display:grid;gap:18px;max-width:820px;margin:0 auto}
.ng-panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px 20px;box-shadow:0 4px 18px rgba(12,45,72,.05)}
.ng-panel h2{font-size:28px;display:flex;align-items:center;gap:10px}
.ng-panel h2 svg{width:26px;height:26px;color:var(--teal-d)}
.ng-panel>p.sub{color:var(--muted);margin:4px 0 16px}
.ng-amounts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.ng-amt{position:relative;cursor:pointer}
.ng-amt input,.ng-pay input{position:absolute;opacity:0;inset:0;cursor:pointer}
.ng-amt span{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:14px 8px;border:2px solid var(--line);border-radius:18px;background:#fff;transition:.15s;height:100%}
.ng-amt svg{width:26px;height:26px;color:var(--teal)}
.ng-amt b{font-size:24px;color:var(--navy)}
.ng-amt small{color:var(--muted);font-size:13px;line-height:1.25}
.ng-amt input:checked+span,.ng-pay input:checked+span{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,180,216,.18)}
.ng-amt input:focus-visible+span,.ng-pay input:focus-visible+span{outline:3px solid var(--teal)}
.ng-field{position:relative;display:block;margin-bottom:12px}
.ng-field>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:#8aa2b5;pointer-events:none}
.ng-field input,.ng-field textarea,.ng-field select{width:100%;padding:16px 16px 16px 50px;border:2px solid var(--line);border-radius:16px;font:600 16px 'Nunito',sans-serif;color:var(--ink);background:#fbfdfe}
.ng-field textarea{padding-left:16px;min-height:150px;resize:vertical}
.ng-field input.plain{padding-left:16px}
.ng-field input:focus,.ng-field textarea:focus{border-color:var(--teal);outline:0}
.ng-switch{display:flex;align-items:flex-start;gap:12px;margin:6px 0 16px;cursor:pointer}
.ng-switch input{width:22px;height:22px;accent-color:var(--teal);margin-top:2px;flex:none}
.ng-switch b{display:block}.ng-switch small{color:var(--muted)}
.ng-pays{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ng-pay{position:relative;cursor:pointer}
.ng-pay span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 10px;border:2px solid var(--line);border-radius:18px;height:100%;transition:.15s}
.ng-pay svg{width:34px;height:34px;color:var(--navy)}
.ng-pay b{font-size:20px;color:var(--navy)}.ng-pay.pp b{font-style:italic;font-weight:800;color:#003087}
.ng-pay small{color:var(--muted);font-size:13px;line-height:1.3}
.ng-submit{width:100%;padding:18px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--teal-d));color:#fff;font:800 20px 'Nunito',sans-serif;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 8px 22px rgba(0,150,180,.3)}
.ng-submit:hover{filter:brightness(1.05)}
.ng-submit svg{width:26px;height:26px}
.ng-secure{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--teal-d);font-size:14px;margin-top:12px}
.ng-secure svg{width:16px;height:16px}
.ng-notice{padding:16px 18px;border-radius:16px;margin-bottom:18px;font-weight:700}
.ng-notice.ok{background:#e4f8ee;color:#0b6b3a}.ng-notice.err{background:#fdeaea;color:#a12626}.ng-notice.info{background:#e6f6fb;color:#0a6a84}
.hp{position:absolute;left:-9999px}

/* Donors */
.ng-donors{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ng-donor{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.ng-donor .ic{width:36px;height:36px;border-radius:50%;background:#e3f6fb;color:var(--teal);display:grid;place-items:center;flex:none}
.ng-donor .ic svg{width:18px;height:18px}
.ng-donor b{display:block;font-size:15px;line-height:1.2}.ng-donor strong{color:var(--navy);font-size:16px}
.ng-donor small{color:var(--muted);font-size:12.5px}
.ng-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.ng-totals div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;text-align:center}
.ng-totals strong{display:block;font-size:32px;color:var(--navy);font-weight:800}.ng-totals span{color:var(--muted)}
.ng-pager{display:flex;justify-content:center;gap:12px;margin-top:22px}

/* Contact */
.ng-contact{display:grid;gap:18px;max-width:900px;margin:0 auto}
.ng-info{display:grid;gap:14px}
.ng-info p{display:flex;gap:12px;align-items:center;font-weight:700}
.ng-info svg{width:24px;height:24px;color:var(--teal);flex:none}

/* Blog + generic content */
.ng-posts{display:grid;gap:18px}
.ng-post{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(12,45,72,.08)}
.ng-post img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ng-post div{padding:18px}.ng-post h2{font-size:28px;margin-bottom:6px}.ng-post p{color:var(--muted);margin-bottom:12px}
.ng-content{max-width:760px;margin:0 auto;background:#fff;border-radius:26px;padding:26px 22px}
.ng-content>*+*{margin-top:1em}.ng-content h2,.ng-content h3{margin-top:1.2em}
.ng-content a{color:var(--teal-d);text-decoration:underline}
.ng-content img{border-radius:16px}
.ng-meta{color:var(--muted);font-size:14px;margin-bottom:10px}

/* Footer */
.ng-foot{background:var(--footbg,#0f1d33);color:var(--foottx,#d6e2ee);padding:44px 0 26px}
.ng-foot .cols{display:grid;gap:30px}
.ng-foot h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:18px;color:#fff;margin-bottom:12px}
.ng-foot li{list-style:none;margin:8px 0}.ng-foot a:hover{color:var(--teal)}
.ng-foot .shop{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.ng-foot .shop>svg{width:40px;height:40px;color:#fff;flex:none}
.ng-foot .shop h3{font-family:'Patrick Hand',cursive;font-weight:400;font-size:28px}
.ng-foot .social{display:flex;flex-wrap:wrap;gap:10px}
.ng-foot .social a{padding:8px 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-weight:700;font-size:14px}
.ng-foot .copy{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;opacity:.75}
.ng-foot .ng-logo b{color:#fff}

/* Bottom nav (mobile) */
.ng-bottom{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;background:var(--headbg,#fff);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px rgba(12,45,72,.1)}
.ng-bottom a{display:flex;align-items:center;justify-content:center;color:#6b7f93;flex:1;height:48px}
.ng-bottom svg{width:32px;height:32px}.ng-bottom img{width:32px;height:32px;object-fit:contain}
.ng-bottom a.on{color:var(--teal);font-weight:800}

/* Single animal */
.ng-animal{display:grid;gap:22px;max-width:900px;margin:0 auto}
.ng-animal .photo{border-radius:26px;overflow:hidden;background:#d8ecf4;aspect-ratio:4/3}
.ng-animal .photo img{width:100%;height:100%;object-fit:cover}

@media (min-width:700px){
  .ng-amounts{grid-template-columns:repeat(4,1fr)}
  .ng-donors{grid-template-columns:repeat(4,1fr)}
  .ng-grid{grid-template-columns:repeat(3,1fr)}
  .ng-posts{grid-template-columns:repeat(2,1fr)}
  .ng-foot .cols{grid-template-columns:2fr 1fr 1fr}
  .ng-animal{grid-template-columns:1fr 1fr;align-items:start}
  .ng-contact{grid-template-columns:1fr 1.4fr}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .ng-nav,.ng-lang{display:flex}.ng-burger,.ng-menu,.ng-bottom{display:none!important}
  .ng-hero{min-height:680px}
  .ng-cta{flex-direction:row;max-width:none}
  .ng-stats .wrap{grid-template-columns:repeat(4,1fr)}
  .ng-stat:not(:last-child){border-right:1px solid var(--line)}
  .ng-stat:nth-child(odd){border-right:1px solid var(--line)}
  .ng-card{flex-basis:calc((100% - 54px)/4)}
  .ng-grid{grid-template-columns:repeat(4,1fr)}
  .ng-banner .wrap{padding-top:70px;padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.ng-together{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 6px;font-family:'Kalam',cursive;font-size:22px;color:var(--teal-d);text-align:center}
.ng-together svg{width:28px;height:28px}
.ng-see-all{text-align:center;margin-top:16px}

/* Campaign additions */
.ng-prog{margin:18px 0 6px}
.ng-prog .bar{height:16px;border-radius:999px;background:#dcebf3;overflow:hidden}
.ng-prog .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),#48cae4);min-width:6px}
.ng-prog .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:10px;font-weight:700;color:var(--muted)}
.ng-prog .meta strong{color:var(--navy);font-size:22px}
.ng-story{display:grid;gap:26px;align-items:center}
.ng-story .pic{border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#0c2d48,#00789a);min-height:260px;display:grid;place-items:center;color:#fff}
.ng-story .pic img{width:100%;height:100%;object-fit:cover}
.ng-story .pic svg{width:90px;height:90px;opacity:.7}
.ng-story h2{font-size:clamp(34px,5vw,46px);margin-bottom:12px}
.ng-story .txt p{margin-bottom:14px;color:var(--ink)}
.ng-story .ng-btn{margin-top:8px}
.ng-donate-prog{max-width:900px;margin:0 auto 22px}
.ng-panel.ng-prog-panel{padding:20px}
.hp{position:absolute;left:-9999px}
@media(min-width:860px){.ng-story{grid-template-columns:1fr 1fr;gap:48px}.ng-story .pic{min-height:380px}}

.ng-logo img.custom{border-radius:0;object-fit:contain;flex:none}

@media(min-width:700px){.ng-stat svg{width:42px;height:42px;margin-bottom:8px}.ng-stat strong{font-size:34px}.ng-stat span{font-size:16px}.ng-stat{padding:0 12px}}

.ng-amt-err{margin-top:12px;padding:12px 16px;border-radius:14px;background:#fdecec;color:#b42318;font-weight:800;border:1px solid #f5c2c0}
.ng-amt-err[hidden]{display:none}
.ng-404{padding:30px 0 20px;text-align:center}
.ng-404 .num{font:700 clamp(96px,28vw,200px)/1 'Kalam','Nunito',sans-serif;color:var(--teal);letter-spacing:-2px}
.ng-404 h2{font-size:clamp(26px,5vw,38px);margin:4px 0 10px}
.ng-404 p{color:var(--muted);max-width:520px;margin:0 auto 22px}
.ng-404 .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ng-404 .ng-btn.alt{background:transparent;color:var(--navy);border-color:var(--navy)}

/* ===== Single product store ===== */
.ng-prod{display:grid;gap:26px;padding-top:24px;padding-bottom:30px}
.ng-gal .main{position:relative;border-radius:var(--radius);overflow:hidden;background:#eef5f9;aspect-ratio:1/1;display:grid;place-items:center}
.ng-gal .main img{width:100%;height:100%;object-fit:cover}
.ng-gal .ph svg{width:90px;height:90px;color:var(--teal);opacity:.6}
.ng-gal .badge{position:absolute;top:14px;left:14px;background:#e63946;color:#fff;font-weight:800;padding:6px 14px;border-radius:999px;font-size:15px}
.ng-gal .thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.ng-gal .th{flex:0 0 72px;height:72px;border-radius:14px;overflow:hidden;border:3px solid transparent;padding:0;background:#fff;cursor:pointer}
.ng-gal .th.on{border-color:var(--teal)}
.ng-gal .th img{width:100%;height:100%;object-fit:cover}
.ng-info h1{font-size:clamp(30px,6vw,44px);line-height:1.1;margin-bottom:8px}
.ng-info .short{color:var(--muted);margin-bottom:14px}
.ng-info h2.sub{font-size:26px;margin:26px 0 10px}
.ng-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:6px 0 4px}
.ng-price strong{font-size:clamp(34px,8vw,46px);font-weight:800;color:var(--price,var(--navy))}
.ng-price s{font-size:20px;color:var(--muted)}
.stock{display:flex;align-items:center;gap:6px;font-weight:800;margin-bottom:16px}
.stock svg{width:18px;height:18px}
.stock.in{color:#1a8a4a}.stock.out{color:#c0392b}
.ng-opts{border:0;padding:0;margin:0 0 16px}
.ng-opts legend{font-weight:800;margin-bottom:8px;color:var(--navy)}
.ng-opts .chip{display:inline-block;margin:0 8px 8px 0}
.ng-opts .chip input{position:absolute;opacity:0}
.ng-opts .chip span{display:inline-block;padding:10px 18px;border-radius:999px;border:2px solid var(--line);font-weight:800;cursor:pointer;background:#fff}
.ng-opts .chip input:checked+span{border-color:var(--teal);background:#e8f8fc;color:var(--navy)}
.ng-opts .chip input:focus-visible+span{outline:3px solid var(--teal)}
.ng-qty{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-weight:800;color:var(--navy)}
.ng-qty .step{display:flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.ng-qty .step button{width:44px;height:44px;border:0;background:transparent;font-size:22px;font-weight:800;cursor:pointer;color:var(--navy)}
.ng-qty .step input{width:54px;text-align:center;border:0;font-size:18px;font-weight:800;background:transparent;-moz-appearance:textfield}
.ng-qty .step input::-webkit-outer-spin-button,.ng-qty .step input::-webkit-inner-spin-button{-webkit-appearance:none}
.ng-submit[disabled]{opacity:.55;cursor:not-allowed}
.ng-trust{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.ng-trust li{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700}
.ng-trust svg{width:20px;height:20px;color:var(--teal);flex:none}
.ng-feats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ng-feats li{display:flex;gap:10px;align-items:flex-start}
.ng-feats svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:3px}
.ng-desc p{margin-bottom:12px}
.ng-sticky{position:fixed;left:0;right:0;bottom:60px;z-index:40;background:#fff;box-shadow:0 -6px 20px rgba(12,45,72,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.ng-sticky strong{font-size:22px;color:var(--navy)}
.ng-sticky s{color:var(--muted);font-size:14px}
.ng-policy h2{font-size:30px;margin:22px 0 8px}
.ng-policy h2:first-child{margin-top:0}
.ng-policy p{margin-bottom:10px}
.ng-sum{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ng-sum .pic{width:84px;height:84px;border-radius:16px;overflow:hidden;background:#eef5f9;display:grid;place-items:center;flex:none}
.ng-sum .pic img{width:100%;height:100%;object-fit:cover}
.ng-sum .pic svg{width:36px;height:36px;color:var(--teal)}
.ng-sum .meta{display:grid;gap:6px}
.ng-sum select,.ng-sum input{border:2px solid var(--line);border-radius:12px;padding:6px 10px;font:inherit;max-width:180px}
.ng-sum .q input{width:70px}
.ng-totals{width:100%;border-collapse:collapse}
.ng-totals td{padding:8px 0;border-top:1px solid var(--line)}
.ng-totals td:last-child{text-align:right;font-weight:800}
.ng-totals .t td{font-size:22px;color:var(--navy)}
.ng-donate-grid input[required]{min-width:0}
@media(min-width:860px){.ng-prod{grid-template-columns:1fr 1fr;gap:48px;align-items:start}.ng-gal{position:sticky;top:96px}.ng-sticky{display:none}}
@media(max-width:859px){.ng-prod-page{padding-bottom:70px}}

/* ===== E-mobility store additions ===== */
.muted{color:var(--muted)}
.ng-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ng-cat{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border-radius:var(--radius);padding:26px 12px;box-shadow:0 6px 22px rgba(12,45,72,.07);font-weight:800;color:var(--navy);text-align:center}
.ng-cat svg{width:64px;height:64px;color:var(--teal)}
.ng-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ng-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 22px rgba(12,45,72,.07);display:flex;flex-direction:column}
.ng-card .pic{position:relative;display:grid;place-items:center;aspect-ratio:1/1;background:#eef5f9}
.ng-card .pic img{width:100%;height:100%;object-fit:cover}
.ng-card .pic>svg{width:60px;height:60px;color:var(--teal);opacity:.6}
.ng-card .badge{position:absolute;top:10px;inset-inline-start:10px;background:#e63946;color:#fff;font-weight:800;padding:4px 10px;border-radius:999px;font-size:13px}
.ng-card .body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ng-card h3{font-family:inherit;font-weight:800;font-size:16px;line-height:1.25;color:var(--navy)}
.ng-card .ng-price{margin:0}
.ng-card .ng-price strong{font-size:22px}
.ng-card .ng-price s{font-size:14px}
.ng-card .ng-btn{margin-top:auto;justify-content:center;padding:10px 14px;font-size:15px}
.left,.stock.left{color:var(--left,#d62828);font-weight:800}
.ng-card .left{font-size:14px}.ng-card .left.out{color:var(--muted)}
.stock.left{font-size:17px;margin-bottom:16px}
@media(min-width:760px){.ng-grid{grid-template-columns:repeat(3,1fr);gap:22px}.ng-cats{max-width:640px;margin:0 auto}}
@media(min-width:1000px){.ng-grid{grid-template-columns:repeat(4,1fr)}}

/* swipe gallery */
.ng-gal .main{aspect-ratio:1/1}
.ng-gal .track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.ng-gal .track::-webkit-scrollbar{display:none}
.ng-gal .slide{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;height:100%}
.ng-gal .slide img{width:100%;height:100%;object-fit:cover}
.ng-gal .slide.ph svg{width:90px;height:90px;color:var(--teal);opacity:.6}
.ng-gal .badge{inset-inline-start:14px;left:auto}
.ng-gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:26px;line-height:1;cursor:pointer;color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.2);display:none}
.ng-gal .nav.prev{left:10px}.ng-gal .nav.next{right:10px}
.ng-gal .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.ng-gal .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 0 3px rgba(0,0,0,.4)}
.ng-gal .dots i.on{background:#fff;width:20px;border-radius:6px}
@media(hover:hover) and (min-width:760px){.ng-gal .nav{display:block}}
.rate-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--muted)}

/* reviews */
.stars{color:var(--star,#f5a623);letter-spacing:2px;white-space:nowrap}
.stars i{font-style:normal;color:#d5dde4}
.ng-reviews{padding:10px 0 26px}
.ng-reviews h2.sub{font-size:30px;margin:6px 0 10px}
.ng-reviews .avg{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:18px}
.ng-rev{background:#fff;border-radius:18px;padding:16px 18px;margin-bottom:12px;box-shadow:0 4px 16px rgba(12,45,72,.06)}
.ng-rev .head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:4px}
.ng-rev .from{color:var(--muted);font-size:14px}
.ng-rev .ver{display:inline-flex;align-items:center;gap:4px;color:#1a8a4a;font-size:13px;font-weight:800}
.ng-rev .ver svg{width:15px;height:15px}
.ng-rev p{margin-top:6px}
.ng-rev .reply{margin-top:10px;padding:10px 14px;border-inline-start:4px solid var(--teal);background:#f1f9fc;border-radius:10px}
.ng-rev .reply b{color:var(--navy);font-size:14px}
.ng-rev-form{margin-top:18px}
.ng-rev-form h3{font-size:26px;margin-bottom:8px}
.ng-rev-form .only{display:flex;gap:8px;align-items:flex-start;background:#fff8e6;border:1px solid #f4dca0;color:#7a5b00;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-weight:700}
.ng-rev-form .only svg{width:18px;height:18px;flex:none;margin-top:3px}
.ng-field.ta textarea{width:100%;border:0;background:transparent;font:inherit;resize:vertical;outline:0;padding:4px 0}
.ng-rate{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:2px;margin:6px 0 12px}
.ng-rate span{margin-inline-end:auto;font-weight:800;color:var(--navy)}
.ng-rate input{position:absolute;opacity:0}
.ng-rate label{font-size:30px;color:#d5dde4;cursor:pointer;line-height:1}
.ng-rate input:checked~label,.ng-rate label:hover,.ng-rate label:hover~label{color:var(--star,#f5a623)}

/* Arabic / RTL */
html[dir=rtl] body{font-family:'Cairo','Tahoma','Segoe UI',system-ui,sans-serif}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .ng-logo b{font-family:'Cairo','Tahoma',sans-serif;font-weight:800}
html[dir=rtl] .ng-logo{margin-right:0;margin-left:auto}
html[dir=rtl] .ng-stat:not(:last-child){border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .ng-totals td:last-child{text-align:left}
html[dir=rtl] .ng-gal .nav.prev{left:auto;right:10px}html[dir=rtl] .ng-gal .nav.next{right:auto;left:10px}
html[dir=rtl] .ng-qty .step input{direction:ltr}
html[dir=rtl] .ng-prod .ng-price{direction:rtl}
.ng-addr{line-height:1.7;margin-bottom:8px}
.ng-sum .meta span{color:var(--muted);font-weight:700}

/* colour swatches on the product page */
.ng-opts .chip.sw span{display:inline-flex;align-items:center;gap:8px}
.ng-opts .chip.sw i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block;flex:none}