/* ================================================================
   MATHIE ELECTRICAL — LIGHT DESIGN SYSTEM v2
   One sheet, loaded last on every page with html.theme-light.
   Bright, photographic, premium-trade. Teal #03cfd1 accents,
   ink type, charcoal used deliberately (footer, marquee band).
   ================================================================ */

html.theme-light{
  --black:#ffffff; --dark:#f4f7f7; --surface:#ffffff; --surface2:#f0f4f4;
  --white:#111619; --text:rgba(17,22,25,.78); --text-dim:rgba(17,22,25,.55);
  --line:rgba(17,22,25,.10);
  --teal:#03cfd1; --teal2:#0a8f8a; --teal-dim:rgba(3,207,209,.12);
  --glow:0 14px 40px rgba(3,207,209,.25);
  color-scheme:light;
}
html.theme-light body{background:#fff}

/* ---------- chrome ---------- */
html.theme-light .topbar{color:#06282a}
html.theme-light header.site{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(17,22,25,.03)}
html.theme-light .nav-links a{color:rgba(17,22,25,.6)}
html.theme-light .nav-links a:hover{color:#111619}
html.theme-light .hbg span{background:#111619}
html.theme-light .mnav{background:#fff}
html.theme-light .mnav a{color:#111619}
html.theme-light .callbar{background:rgba(255,255,255,.97);border-top:1px solid rgba(3,207,209,.5);box-shadow:0 -8px 30px rgba(17,22,25,.12)}
html.theme-light .callbar .c1{color:#06282a}
html.theme-light .callbar .c2{color:#111619}

/* ---------- typography scale ---------- */
html.theme-light section h2{font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:-.01em;color:#111619}
html.theme-light .sttl{color:#111619}
html.theme-light .slbl{color:#0a8f8a}
html.theme-light .ssub{color:var(--text);font-size:1.14rem;max-width:640px}
html.theme-light .lede{color:var(--text)}
html.theme-light .eyebrow{color:#0a8f8a}
html.theme-light h2 .hl,html.theme-light h1 .hl,html.theme-light .sttl .hl{background:linear-gradient(90deg,#0a8f8a,#03cfd1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- homepage hero: photo stays, panel goes light ---------- */
html.theme-light .hero-shade{background:
  linear-gradient(92deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.06) 82%),
  linear-gradient(0deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,0) 34%)}
@media(max-width:760px){html.theme-light .hero-shade{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.72) 46%,rgba(255,255,255,.94) 100%)}}
html.theme-light .hero{border-bottom:1px solid var(--line)}
html.theme-light .hero h1,html.theme-light .hero .hero-tagline{color:#111619;text-shadow:none}
html.theme-light .hero p.sub{color:rgba(17,22,25,.75)}
html.theme-light .hero .crumbs,html.theme-light .crumbs{color:var(--text-dim)}
html.theme-light .crumbs a{color:#0a8f8a}
html.theme-light .hero-bolt{opacity:.05}
/* sub-page heroes (no photo): soft paper + teal wash */
html.theme-light .hero:not(:has(.hero-canvas)){background:
  radial-gradient(ellipse 70% 55% at 78% 8%,rgba(3,207,209,.14),transparent 70%),
  linear-gradient(180deg,#fbfdfd,#fff)}

/* ---------- buttons ---------- */
html.theme-light .btn-teal{background:linear-gradient(135deg,#03cfd1,#0a8f8a);color:#fff;box-shadow:0 8px 26px rgba(3,207,209,.35)}
html.theme-light .btn-ghost{border:1.5px solid rgba(17,22,25,.25);color:#111619}
html.theme-light .btn-ghost:hover{border-color:#0a8f8a;color:#0a8f8a}
html.theme-light .btn-charge{background:#fff;border-color:#03cfd1;color:#111619}
html.theme-light .btn-charge:hover{box-shadow:0 10px 30px rgba(3,207,209,.35)}
html.theme-light .cta-main{color:#fff}
html.theme-light .cta-txt small{color:rgba(255,255,255,.85)}
html.theme-light .cta-ico{background:rgba(255,255,255,.18)}
html.theme-light .cta-alt a{color:#111619;border-color:rgba(17,22,25,.2)}
html.theme-light .cta-alt a:hover{color:#0a8f8a;border-color:#0a8f8a;background:rgba(3,207,209,.06)}
html.theme-light .cta-alt a.cta-tel{color:#0a8f8a;border-color:rgba(10,143,138,.45)}
html.theme-light .cta-alt .cta-or{color:rgba(17,22,25,.4)}
html.theme-light .form-trust{color:rgba(17,22,25,.5)}

/* ---------- cards, grids, sections ---------- */
html.theme-light .white-sec{background:var(--dark)}
html.theme-light .trust .t,html.theme-light .grid .cell,html.theme-light .steps .s,
html.theme-light .svc,html.theme-light .rv,html.theme-light .gal figure,html.theme-light .faq-item{
  background:#fff;border-color:rgba(17,22,25,.08);
  box-shadow:0 1px 2px rgba(17,22,25,.04),0 10px 30px rgba(17,22,25,.06)}
html.theme-light .grid .cell:hover,html.theme-light .steps .s:hover,html.theme-light .svc:hover,
html.theme-light .trust .t:hover,html.theme-light .gal figure:hover{
  border-color:rgba(3,207,209,.55);box-shadow:0 4px 10px rgba(17,22,25,.07),0 24px 54px rgba(17,22,25,.13);transform:translateY(-4px)}
html.theme-light .cardttl,html.theme-light .steps .s b,html.theme-light .faq summary{color:#111619}
html.theme-light .svc-thumb{background:#eef2f2}
html.theme-light .num,html.theme-light .grid .cell .num{color:#0a8f8a}
html.theme-light .atag{background:rgba(3,207,209,.1);color:#0a8f8a;border-color:rgba(3,207,209,.3)}
html.theme-light .work-label{color:#111619;background:rgba(255,255,255,.9)}
html.theme-light .ctr-n{background:linear-gradient(90deg,#0a8f8a,#03cfd1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.theme-light .ctr-l{color:var(--text-dim)}
html.theme-light .faq-q{color:#111619}
html.theme-light .faq-a{color:var(--text)}
html.theme-light .faq details{border-color:var(--line)}
html.theme-light .rvt{color:#111619}
html.theme-light .rvs{color:#f5a623}
html.theme-light .rva,html.theme-light .rvsrc{color:var(--text-dim)}

/* marquee: charcoal band, deliberate dark moment */
html.theme-light .mq,html.theme-light .marquee{background:#101517}
html.theme-light .mqi{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}
html.theme-light .mqi:hover{color:#03cfd1;-webkit-text-stroke-color:transparent;text-shadow:none}

/* brands strip */
html.theme-light .brands-l{color:rgba(17,22,25,.45)}
html.theme-light .brands-row .bw{color:rgba(17,22,25,.4)}
html.theme-light .brands-row .bw:hover{color:#0a8f8a}

/* hero quick-quote card (already white) — give it lift on light */
html.theme-light .hq-card{box-shadow:0 24px 70px rgba(17,22,25,.2);border:1px solid rgba(17,22,25,.08)}

/* forms */
html.theme-light .quote{background:var(--dark);border-top:1px solid rgba(3,207,209,.35)}
html.theme-light .qform input,html.theme-light .qform select,html.theme-light .qform textarea{background:#fff;color:#111619;border-color:rgba(17,22,25,.16)}
html.theme-light .qform input:focus,html.theme-light .qform select:focus,html.theme-light .qform textarea:focus{border-color:#03cfd1;box-shadow:0 0 0 3px rgba(3,207,209,.15)}
html.theme-light .qform label{color:rgba(17,22,25,.6)}

/* popups / toasts */
html.theme-light .offer,html.theme-light .toast{background:#fff;color:#111619;border:1px solid rgba(17,22,25,.1);box-shadow:0 24px 70px rgba(17,22,25,.25)}

/* ---------- footer: deliberate charcoal grounding ---------- */
html.theme-light footer{background:#0e1315;border-top:3px solid #03cfd1;color:rgba(255,255,255,.55)}
html.theme-light footer h4{color:#fff}
html.theme-light footer a{color:rgba(255,255,255,.55)}
html.theme-light footer a:hover{color:#03cfd1}
html.theme-light footer .tag{background:linear-gradient(90deg,#03cfd1,#7df3f4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- polish layer adaptations ---------- */
html.theme-light .fbl-glow{mix-blend-mode:multiply;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(10,143,138,.12),rgba(10,143,138,.04) 42%,transparent 72%)}
html.theme-light .sec-underline::after,html.theme-light section h2::after{background:linear-gradient(90deg,#03cfd1,rgba(3,207,209,0))}

/* ---------- generous rhythm ---------- */
html.theme-light main section{padding-top:clamp(64px,9vw,110px);padding-bottom:clamp(64px,9vw,110px)}
html.theme-light img{border-radius:2px}

/* ================================================================
   SHOP components (EV hub + product pages) — unchanged from pilot
   ================================================================ */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
@media(min-width:980px){.shop-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.prod{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .35s;box-shadow:0 2px 6px rgba(15,20,24,.05),0 12px 30px rgba(15,20,24,.06)}
.prod:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(15,20,24,.08),0 26px 56px rgba(15,20,24,.14)}
.prod-img{aspect-ratio:4/3;background:#eef2f2;overflow:hidden;position:relative;display:block}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-tag{position:absolute;top:12px;left:12px;background:#fff;color:#0a8f8a;font-family:var(--fh);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:99px;box-shadow:0 2px 8px rgba(15,20,24,.12)}
.prod-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-body h3{font-family:var(--fh);font-weight:800;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;color:#111619;margin:0;line-height:1.1}
.prod-kw{font-family:var(--fh);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#0a8f8a}
.prod-price{font-family:var(--fh);font-weight:800;font-size:1.35rem;color:#111619;margin-top:4px}
.prod-price small{display:block;font-family:var(--fb);font-weight:500;font-size:.78rem;color:rgba(17,22,25,.55);letter-spacing:0;text-transform:none}
.prod-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.prod-chips span{font-family:var(--fb);font-size:.76rem;color:rgba(17,22,25,.75);background:#f3f6f6;border:1px solid rgba(17,22,25,.08);border-radius:99px;padding:4px 9px}
.prod-btn{margin-top:auto;padding-top:12px}
.prod-btn a{display:block;text-align:center;padding:12px;border-radius:9px;background:linear-gradient(135deg,#03cfd1,#0a8f8a);color:#fff;text-decoration:none;font-family:var(--fh);font-weight:800;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .3s;box-shadow:0 6px 18px rgba(3,207,209,.3)}
.prod-btn a:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(3,207,209,.4)}
.pdp{display:grid;gap:34px;align-items:start;margin-top:14px}
@media(min-width:900px){.pdp{grid-template-columns:1.05fr 1fr;gap:48px}}
.pdp-media{border-radius:18px;overflow:hidden;background:#eef2f2;aspect-ratio:4/3;box-shadow:0 20px 50px rgba(15,20,24,.12)}
.pdp-media img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-cap{font-family:var(--fb);font-size:.78rem;color:rgba(17,22,25,.5);margin-top:8px}
.buybox{margin-top:22px;background:#fff;border:1px solid rgba(17,22,25,.1);border-radius:16px;padding:20px 22px;box-shadow:0 2px 6px rgba(15,20,24,.05),0 16px 40px rgba(15,20,24,.08)}
.buy-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.buy-price b{font-family:var(--fh);font-weight:800;font-size:2rem;color:#111619;letter-spacing:.01em}
.buy-price span{font-family:var(--fb);font-size:.86rem;color:rgba(17,22,25,.6)}
.buy-note{font-family:var(--fb);font-size:.86rem;color:rgba(17,22,25,.65);margin:8px 0 14px;line-height:1.5}
.buy-specs{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.buy-specs li{display:flex;gap:9px;align-items:flex-start;font-family:var(--fb);font-size:.92rem;color:#1a2126;line-height:1.4}
.buy-specs li::before{content:'';flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(3,207,209,.16) no-repeat center/11px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="%230a8f8a"/></svg>')}
.buy-cta{display:block;width:100%;padding:15px;border:0;border-radius:10px;cursor:pointer;background:linear-gradient(135deg,#03cfd1,#0a8f8a);color:#fff;font-family:var(--fh);font-weight:800;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgba(3,207,209,.35);transition:transform .25s var(--ease),box-shadow .3s}
.buy-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(3,207,209,.45)}
.buy-alt{text-align:center;margin:10px 0 0;font-family:var(--fb);font-size:.82rem;color:rgba(17,22,25,.55)}
.buy-alt a{color:#0a8f8a;font-weight:600;text-decoration:none}
.buy-trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(17,22,25,.08)}
.buy-trust span{font-family:var(--fh);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(17,22,25,.6)}
html.theme-light .pdp .hero-cta{display:none}

/* header booking button — visible on every screen size */
.nav-cta{margin-left:auto;margin-right:12px;padding:10px 16px;border:0;border-radius:99px;cursor:pointer;background:linear-gradient(135deg,#03cfd1,#0a8f8a);color:#fff;font-family:var(--fh);font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 18px rgba(3,207,209,.3);transition:transform .25s var(--ease),box-shadow .3s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(3,207,209,.4)}
@media(max-width:760px){.nav-cta{padding:9px 13px;font-size:.74rem;margin-right:8px}}