/* HOMETHEME (Krishna 24 Oct 2026): 8 admin-selectable looks for the app home + chrome.
   Admin > Website content > 'Home page theme' saves site.home_theme. Empty / 'atc' = the current live look (no attribute, this file does nothing).
   'classic' = pre-22-Oct look: store.js removes html.appx (light header + palette theme-picker button + customer's own saved colour theme).
   Others: html.appx[data-hth=<k>] sets the variables below. Product photos are never touched (real photos only). */
html.appx[data-hth]{--h1:#1e5bd8;--h2:#123f9e;--hbg:#eef1f6;--hac:#1e5bd8;--hacl:#e6eeff;--hpri:#1e5bd8;--hpri2:#1e5bd8;--hcard:#fff;--hink:#0a1d42;--hmute:#6b7894;--hbd:#e3e8f2;--hhdink:#fff;--hhdsub:#dbe6ff;--hhdib:rgba(255,255,255,.16);--hsl2a:#f28c28;--hsl2b:#d9630b;--hpat:none}
html.appx[data-hth=navy]{--h1:#0d2259;--h2:#050f2c;--hbg:#edf0f6;--hac:#0b2a6b;--hacl:#e1e7f4;--hpri:#14327c;--hpri2:#0b2a6b;--hhdsub:#c6d2ee;--hsl2a:#c9a227;--hsl2b:#9c7a12}
html.appx[data-hth=clean]{--h1:#ffffff;--h2:#ffffff;--hbg:#ffffff;--hac:#1e5bd8;--hacl:#eef3fd;--hhdink:#0a1d42;--hhdsub:#6b7894;--hhdib:#f1f4fa;--hbd:#e8ecf3}
html.appx[data-hth=blueteal]{--h1:#1e5bd8;--h2:#0d9488;--hbg:#edf6f6;--hac:#0f7c8c;--hacl:#dcf2f1;--hpri:#1e5bd8;--hpri2:#0d9488;--hhdsub:#d7f3ef;--hsl2a:#14b8a6;--hsl2b:#0f766e}
html.appx[data-hth=saffron]{--h1:#f59e0b;--h2:#ea580c;--hbg:#fff7ed;--hac:#c2410c;--hacl:#ffedd5;--hpri:#ea6a0c;--hpri2:#c2410c;--hhdsub:#fff1dc;--hsl2a:#1e5bd8;--hsl2b:#123f9e}
html.appx[data-hth=dark]{--h1:#15274a;--h2:#0a1428;--hbg:#0b1220;--hac:#7fb0ff;--hacl:#1b2b4a;--hpri:#2f6fe6;--hpri2:#1e5bd8;--hcard:#141f35;--hink:#e8eef9;--hmute:#9fb0cc;--hbd:#22314f;--hhdsub:#a9bde3}
html.appx[data-hth=diwali]{--h1:#8a1328;--h2:#4a0814;--hbg:#fff8ec;--hac:#b45309;--hacl:#fdf0d5;--hpri:#d97706;--hpri2:#b45309;--hhdsub:#ffe2a8;--hsl2a:#d97706;--hsl2b:#9a3412;
  --hpat:radial-gradient(circle at 12px 12px,rgba(255,196,77,.35) 1.6px,transparent 2.2px) 0 0/24px 24px}

@media(max-width:959px){
  html.appx[data-hth] body{background:var(--hbg)}
  html.appx[data-hth] .hdr{background:var(--hpat),linear-gradient(135deg,var(--h1),var(--h2))!important;color:var(--hhdink)}
  html.appx[data-hth=clean] .hdr{box-shadow:0 2px 14px rgba(15,40,90,.08);border-bottom:1px solid #e8ecf3}
  html.appx[data-hth=clean] #msrch input{background:#f3f6fb;box-shadow:inset 0 0 0 1px #e1e7f1}
  html.appx[data-hth=diwali] .hdr{border-bottom:3px solid #f2b13b}
  html.appx[data-hth] .apt b{color:var(--hhdink)}html.appx[data-hth] .apt small{color:var(--hhdsub)}
  html.appx[data-hth] .hact .ib,html.appx[data-hth] .hact a.ib[data-nav=account]{background:var(--hhdib);color:var(--hhdink)}
  html.appx[data-hth] .lwrap,html.appx[data-hth] .lcode{color:var(--hhdink)}
  html.appx[data-hth] .bnav{background:var(--hcard)!important;border-top-color:var(--hbd)}
  html.appx[data-hth] .bnav .on{color:var(--hac)}html.appx[data-hth] .bnav .on .ico{background:var(--hacl)}
}
html.appx[data-hth] .apdots i.on{background:var(--hac)}
html.appx[data-hth] .apsh a{color:var(--hac)}
html.appx[data-hth] .aps1 .hsht small{color:var(--hac)}
html.appx[data-hth] .aps3{background:var(--hpat),linear-gradient(135deg,var(--h1),var(--h2))}
html.appx[data-hth=clean] .aps3{background:linear-gradient(135deg,#1e5bd8,#123f9e)}
html.appx[data-hth] .aps2{background:linear-gradient(135deg,var(--hsl2a),var(--hsl2b))}
html.appx[data-hth] .hsb.pri{background:linear-gradient(135deg,var(--hpri),var(--hpri2));border-color:transparent;color:#fff}
html.appx[data-hth] .apx .hsb.pri,html.appx[data-hth] .hsb.pri{box-shadow:0 6px 14px color-mix(in srgb,var(--hpri) 35%,transparent)}
html.appx[data-hth] .hsdash .btn.pri,html.appx[data-hth] .hsdash .btn-pri{background:var(--hpri)}
html.appx[data-hth] .hdav{background:var(--hpri2)}
html.appx[data-hth] .hsbh{color:var(--hink)}
html.appx[data-hth=diwali] .hsbh::after,html.appx[data-hth=diwali] .hssl .hv2sec h2::after{content:" ✦";color:#d97706}

/* dark mode: home + chrome surfaces (store's own dark base is set via data-theme=dark by store.js) */
html.appx[data-hth=dark] .apc,html.appx[data-hth=dark] .hsdash,html.appx[data-hth=dark] .hsb:not(.pri):not(.wa),html.appx[data-hth=dark] .hsbx,
html.appx[data-hth=dark] .hv2c,html.appx[data-hth=dark] .hv2t,html.appx[data-hth=dark] .pc.g,html.appx[data-hth=dark] .card.g{background:var(--hcard);border-color:var(--hbd);color:var(--hink)}
html.appx[data-hth=dark] .hsb.wa{background:#103222;border-color:#1e5a3a;color:#7be3a4}
html.appx[data-hth=dark] .apcn,html.appx[data-hth=dark] .hsbh,html.appx[data-hth=dark] .apsh,html.appx[data-hth=dark] .hsdash b{color:var(--hink)}
html.appx[data-hth=dark] .hsdash small{color:var(--hmute)}
html.appx[data-hth=dark] .aps1{background:#111a2c}
html.appx[data-hth=dark] .aps1::after{background:linear-gradient(90deg,rgba(11,18,32,.96) 0,rgba(11,18,32,.82) 38%,rgba(11,18,32,0) 62%)}
html.appx[data-hth=dark] .aps1 .hsht h1{color:#fff}
html.appx[data-hth=dark] .apci,html.appx[data-hth=dark] .hv2t .hph,html.appx[data-hth=dark] .hsbp,html.appx[data-hth=dark] .hv2c .hph{background:radial-gradient(circle at 50% 40%,#ffffff 0%,#eef3fb 55%,#d8e3f5 100%);border-radius:12px}
html.appx[data-hth=dark] .hsbx .hsbp{border-radius:10px;padding:4px}
@media(max-width:959px){html.appx[data-hth=dark] #msrch input{background:#1a2742;color:#e8eef9;box-shadow:inset 0 0 0 1px #2a3b60}}
/* dark: slider card text + brand wordmarks readable (fix after phone check 24 Oct) */
html.appx[data-hth=dark] .hv2c .nm,html.appx[data-hth=dark] .hv2c .pr b,html.appx[data-hth=dark] .hv2sh h2:not(.x),html.appx[data-hth=dark] .hv2t b{color:var(--hink)}
html.appx[data-hth=dark] .hv2c .pr small,html.appx[data-hth=dark] .hv2sh p{color:var(--hmute)}
html.appx[data-hth=dark] .hv2c .br{color:#ffa45c}
html.appx[data-hth=dark] .hv2c .lr{color:var(--hac)}
html.appx[data-hth=dark] .hsbx .hsbw{background:#fff;border-radius:8px;padding:2px 8px}

/* HOMESLIDER v2 (Krishna 24 Oct 13:28): premium polish for the default ATC Blue look + every theme via its variables.
   Gradient slider headers, soft panel behind each slider, deeper card shadow, brand logo row on cards, compact brand logo strip. */
html.appx .hssl .hv2sec{background:linear-gradient(180deg,#ffffff 0%,#f3f7ff 100%);border:1px solid #e4ecfb;border-radius:18px;padding:8px 8px 6px;margin-top:12px;box-shadow:0 8px 22px rgba(11,31,92,.08)}
html.appx .hssl .hv2sh{margin:0 0 8px;padding:9px 12px;border-radius:13px;background:linear-gradient(120deg,#1e5bd8 0%,#123f9e 100%);box-shadow:0 6px 14px rgba(18,63,158,.25)}
html.appx[data-hth]:not([data-hth=clean]) .hssl .hv2sh{background:var(--hpat,none),linear-gradient(120deg,var(--h1),var(--h2))}
html.appx .hssl .hv2sh h2{color:#fff;font-size:17px;letter-spacing:.01em}html.appx .hssl .hv2sh h2 em{color:#ffb35c}
html.appx .hssl .hv2sh p{color:rgba(255,255,255,.82);font-size:11.5px}
html.appx .hssl .hv2c{border-color:#e6edf9;box-shadow:0 1px 2px rgba(11,31,92,.06),0 6px 16px rgba(11,31,92,.09);transition:transform .2s,box-shadow .2s}
@media(hover:hover){html.appx .hssl .hv2c:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(11,31,92,.08),0 12px 24px rgba(11,31,92,.14)}}
html.appx .hssl .hv2c .hph{background:radial-gradient(circle at 50% 42%,#ffffff 0%,#f4f7fc 60%,#e8eef8 100%)}
html.appx .hssl .hv2c .hph img{image-rendering:auto}
html.appx .hssl .hv2c .rk{background:linear-gradient(135deg,#0B1F5C,#1e5bd8);box-shadow:0 2px 6px rgba(11,31,92,.3)}
html.appx .hssl .hv2c .nw{background:linear-gradient(135deg,#16a34a,#0f8a3c)}html.appx .hssl .hv2c .nw.rs{background:linear-gradient(135deg,#f28c28,#d9630b)}
html.appx .hssl .hv2dots{margin-top:6px}
/* brand row on product cards: official logo + name */
.hv2c .br{display:flex;align-items:center;gap:5px;min-height:16px;margin-top:7px}
.hv2c .br .brl{display:block;height:13px;width:auto}.hv2c .br .brl.sq{height:16px;border-radius:3px}.hv2c .br.syscap .brl{height:18px}
.hv2c .br .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hv2c .br.havells>span{color:#d71920}
.brchip{display:inline-flex;align-items:center;background:#0b3b8f;border-radius:4px;padding:3px 5px}.hv2c .br .brchip .brl{height:10px}
.brsub{font-weight:900;font-size:10px;letter-spacing:.12em;color:#0a1d42}
/* compact brand logo strip (taps -> that brand's products; Syscap -> WhatsApp enquiry, customer-opened) */
.hslgs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;scroll-snap-type:x proximity}.hslgs::-webkit-scrollbar{display:none}
.hslg{flex:0 0 auto;min-width:96px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 12px 7px;border-radius:14px;background:#fff;border:1px solid #e4ecfb;box-shadow:0 4px 12px rgba(11,31,92,.07);text-decoration:none!important;color:#0a1d42}
.hslm{height:36px;display:flex;align-items:center}.hslm img{display:block;width:auto;height:26px}.hslm img.sq{height:36px;border-radius:7px}
.hslm .bwm{font-weight:900;font-size:17px;letter-spacing:.06em;line-height:1}
.hslm{gap:5px}.hslm .brchip{padding:5px 7px;border-radius:7px}.hslm .brchip img{height:14px}.hslm .brsub{font-size:10px}
.hslg small{font-size:11.5px;font-weight:700;color:#1e5bd8}.hslg.syscap small{color:#16a34a}
.hslh{margin-top:12px!important}
@media(min-width:900px){.hslgs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}}
html.appx[data-hth=dark] .hssl .hv2sec{background:linear-gradient(180deg,#121c31,#0e1729);border-color:#22314f;box-shadow:none}
html.appx[data-hth=dark] .hslg{background:var(--hcard);border-color:var(--hbd)}html.appx[data-hth=dark] .hslm{background:#fff;border-radius:9px;padding:0 8px}
html.appx[data-hth=dark] .hslg small{color:var(--hac)}html.appx[data-hth=dark] .hv2c .br.hasl{background:#fff;border-radius:5px;padding:2px 5px;align-self:flex-start}
html.appx[data-hth=dark] .hv2c .br.epcos .brsub{color:#0a1d42}
@media (prefers-reduced-motion:reduce){html.appx .hssl .hv2c{transition:none}}

/* HERO v3 (Krishna t361u): brand slider at the very top, above the header (#topHero). Real photo collages, official logos. */
#topHero{padding:10px 0 6px}#topHero[hidden],#topHero:empty{padding:0}html.hm0 #topHero:empty{display:block;min-height:calc(clamp(168px,44vw,236px) + 30px)}
#topHero .apsl{margin:0}#topHero .apslt{border-radius:18px;box-shadow:0 10px 26px rgba(10,29,66,.22)}
#topHero .aps{height:clamp(168px,44vw,236px)}
#topHero .apdots{position:static;justify-content:center;margin:7px 0 0}#topHero .apdots i{background:rgba(10,29,66,.22)}
.apb{flex-direction:row!important;align-items:center;justify-content:space-between;gap:4px!important;padding:12px 6px 12px 16px!important}
.apb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 40%,rgba(255,255,255,.22),transparent 58%);pointer-events:none}
.apbt{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 44%}
.apbl{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:#fff;border-radius:10px;padding:5px 9px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.apbl img{height:24px;width:auto}.apbl img.sq{height:30px}.apbl .brchip img{height:15px}.apbl .brsub{font-size:10px;font-weight:800;color:#0b3b8f;letter-spacing:.06em}
.apbl.txt{font:800 15px/1.1 Poppins,"Segoe UI",system-ui,sans-serif;color:#0a1d42;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px}
.apb b{max-width:none!important;font-size:clamp(18px,5vw,26px)!important;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.apb small{font-size:11.5px;font-weight:600;opacity:.92;line-height:1.3}
.apb em{align-self:flex-start;font-size:12px!important;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:4px 10px;white-space:nowrap}
.apbi{position:relative;z-index:1;flex:0 0 54%;width:54%;height:auto;max-height:100%;object-fit:contain}
.apb-havells{background:linear-gradient(135deg,#d3172f,#7d0a1d)!important}
.apb-tdk{background:linear-gradient(135deg,#1659c4,#0a2459)!important}
.apb-keltron{background:linear-gradient(135deg,#2a3f6e,#121d38)!important}.apb-keltron em{background:#f26a21;border-color:#f26a21}
.apb-lumenx{background:linear-gradient(135deg,#a3172b,#4a0812)!important}
.apb-syscap{background:linear-gradient(135deg,#2f8a55,#134a2a)!important}.apb-syscap em{background:#fff;color:#1d6b3f}
@media(min-width:900px){#topHero .aps{height:236px}.apb{padding:16px 24px 16px 36px!important}.apbi{flex-basis:44%;width:44%}}
@media(prefers-reduced-motion:reduce){#topHero .apslt{scroll-behavior:auto}}

/* t370u: Havells 4-pc box photo (square) on the hero slide */
.apbi.apbox{border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25);background:#fff}