/* Electa storefront — clean, borderless retail look (loaded last; overrides style.css / electa.css) */
:root{--tint:#f4f5f7;--tint2:#eceef2;--line:transparent;--border:transparent}
body.has-motion{background:#fff}

/* announcement: one calm static bar */
.ann{background:#0b0b0c;color:#fff;text-align:center;overflow:visible;white-space:normal}
.ann-track{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 28px;padding:9px 16px;animation:none;transform:none;font-size:12.5px;letter-spacing:.02em}
.ann-track span{opacity:1}
.ann-track span+span::before{content:"";display:inline-block;width:1px;height:11px;background:rgba(255,255,255,.35);margin-right:28px;vertical-align:-1px}
@media(max-width:700px){.ann-track span:nth-child(n+2){display:none}.ann-track{padding:8px 12px;font-size:12px}}

/* header: no rule, soft shadow only after scrolling */
.eh{background:rgba(255,255,255,.96);border-bottom:0}
.eh.is-s{box-shadow:0 6px 24px -14px rgba(0,0,0,.28)}
.eh-nav a,.eh-nav button{font-weight:600}
.esearch{border-top:0;background:#fff}
.esearch form{background:var(--tint);border-radius:999px;margin:8px auto 10px;padding:4px 10px 4px 18px}

/* hero: wide 2.4:1 like a retail banner, no ticker below */
.hero{height:auto;aspect-ratio:2.4/1;min-height:360px;max-height:760px;background:#e9ecf3;color:#0b0b0c}
.hs-img::after{background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 60%)}
.hs-prod{background:linear-gradient(110deg,#eef0f5 0,#dfe4ef 100%)}
.hs-glow{background:radial-gradient(circle,rgba(255,255,255,.95),transparent 65%);filter:none;opacity:.9}
.hs-word{-webkit-text-stroke:1.5px rgba(11,11,12,.06)}
.hs-prod .hs-copy h1{color:#0b0b0c;font-size:clamp(30px,4.6vw,66px)}
.hs-prod .hs-price{color:#0b0b0c;opacity:.75}
.hs-img .hs-copy{color:#fff}.hs-img.is-dark .hs-copy{color:#0b0b0c}
.hs-prodimg{height:min(78%,520px)}
.hs-prodimg img,.hs-prodimg video{filter:drop-shadow(0 30px 34px rgba(0,0,0,.28))}
.hero-nav{border:0;background:rgba(255,255,255,.85);color:#0b0b0c;box-shadow:0 4px 16px rgba(0,0,0,.14)}
.hero-dots{bottom:16px}
.hero-dots button{background:rgba(11,11,12,.22);width:26px}.hero-dots i{background:#0b0b0c}
.hero:has(.hs-img.is-on:not(.is-dark)) .hero-dots button{background:rgba(255,255,255,.4)}
.hero:has(.hs-img.is-on:not(.is-dark)) .hero-dots i{background:#fff}
@media(max-width:860px){.hero{aspect-ratio:auto;height:clamp(420px,70vh,560px);min-height:0}}

/* buttons */
.eb{border:0;background:#0b0b0c;color:#fff}.eb:hover{background:#26262a}
.eb-pri{background:var(--primary);color:var(--on-primary)}.eb-pri:hover{background:var(--primary-dark)}

/* section headings: centred label + title */
.sec{margin:72px 0}
.sec-h.is-c{flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:30px}
.pill{display:inline-block;background:var(--tint);color:#0b0b0c;font-size:12.5px;font-weight:600;padding:6px 16px;border-radius:999px;letter-spacing:.02em}
.sec-h h2{font-weight:700;letter-spacing:-.015em}

/* category tiles: borderless round pictures */
.cats{display:flex;flex-wrap:nowrap;gap:clamp(8px,1.6vw,20px);justify-content:center;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
.cats::-webkit-scrollbar{display:none}
.cat{aspect-ratio:auto;background:none;border-radius:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 0;min-width:58px;max-width:190px;box-shadow:none!important;transform:none!important}
.cat-img{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--tint);overflow:hidden;transition:transform .45s var(--ease)}
.cat-img img{position:static;transform:none!important;animation:none;width:100%;height:100%;object-fit:cover;margin:0;transition:transform .6s var(--ease)}
.cat:hover .cat-img img{transform:scale(1.08)!important}
.cat-name{font-weight:600;font-size:clamp(10.5px,1.15vw,15px);color:#0b0b0c;position:static;max-width:100%;text-align:center;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:860px){.cats{justify-content:flex-start}.cat{flex:1 0 64px;max-width:120px}}

/* product cards: no border, no shadow, tinted picture */
.pc{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none!important}
.pc:hover{transform:none}
.pc-media{background:var(--tint);border-radius:14px}
.pc-badge{box-shadow:none;background:#0b0b0c;color:#fff;font-weight:600;border-radius:6px;padding:4px 9px;font-size:11px}
.pc-badge.is-soon{background:#b86e00;color:#fff}
.pc-body{padding:12px 2px 4px}
.pc-name{font-weight:600;min-height:0}
.pc-foot{padding-top:6px}
.pc-add{background:#0b0b0c;border-radius:999px}
.pc-add.is-ghost{background:var(--tint);color:#0b0b0c}
.pc-add:hover{transform:none}

/* bestseller arrows */
.reel-nav button{border:0;background:var(--tint)}

/* brands, reviews */
.brand{border:0;background:var(--tint);border-radius:14px}.brand:hover{transform:none;background:var(--tint2)}
.rev{background:var(--tint);border-radius:14px}

/* featured mosaic */
.mosaic{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:16px;min-height:520px}
.mz{position:relative;overflow:hidden;border-radius:16px;background:var(--tint);display:block}
.mz-0{grid-row:span 2;background:#eef0f5}.mz-1{background:#f3efe9}.mz-2{background:#e9f0ee}
.mz img{position:absolute;right:6%;bottom:6%;width:62%;height:78%;object-fit:contain;transition:transform .6s var(--ease)}
.mz-0 img{width:78%;height:72%;right:50%;transform:translateX(50%);bottom:6%}
.mz:hover img{transform:scale(1.06)}.mz-0:hover img{transform:translateX(50%) scale(1.06)}
.mz-t{position:absolute;left:26px;top:24px;z-index:2;display:grid;gap:6px;max-width:55%}
.mz-t small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#666}
.mz-t b{font-size:clamp(18px,2.2vw,28px);line-height:1.15;color:#0b0b0c}
.mz-t em{font-style:normal;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:#0b0b0c;margin-top:6px;border-bottom:1.5px solid #0b0b0c;width:max-content}
.mz-t em svg{width:14px;height:14px}
@media(max-width:860px){.mosaic{grid-template-columns:1fr;grid-template-rows:none;min-height:0}.mz,.mz-0{grid-row:auto;aspect-ratio:1/.85}.mz-t{max-width:70%}}

/* USP, newsletter, footer */
.usp{background:var(--tint)}
.callband{background:#0b0b0c}
.enews{background:var(--primary)}
.efoot{background:#0b0b0c}.efoot-bot{border-top:0;background:rgba(255,255,255,.04)}
.mnav{border-top:0;box-shadow:0 -6px 24px -12px rgba(0,0,0,.2)}

/* drawers / cart */
.edrawer-h{border-bottom:0}.menu-list a{border-bottom:0}.cd-list li{border-bottom:0;background:var(--tint);border-radius:12px;padding:12px;margin-bottom:8px}
.cd-qty{border:0;background:#fff}
.sr:hover{background:var(--tint)}

/* inner pages: same borderless language */
input,select,textarea{border-color:transparent!important;background:var(--tint)!important}
input:focus,select:focus,textarea:focus{background:#fff!important;box-shadow:0 0 0 2px #0b0b0c!important}
.enews input{background:#fff!important}
.checkout-form,.checkout-summary,.shop-sidebar-block,.shop-toolbar,.confirm-hero,.confirm-card,.product-gallery,.category-tile,.brand-tile,.deal-tile,.product-card,.home-hero-row,.shop-filter-toggle{border:0!important;background:var(--tint)!important;box-shadow:none!important}
.product-card{background:none!important}.product-card:hover{box-shadow:none!important}
.product-gallery{background:var(--tint)!important}
.payment-option{border:0;background:#fff}.payment-option:has(input:checked){background:#fff;box-shadow:0 0 0 2px #0b0b0c}
.variant-chip{border:0;background:var(--tint)}.variant-chip.is-selected{background:#0b0b0c;color:#fff}
.shop-pagination a,.shop-pagination span{border:0;background:var(--tint)}
.shop-pagination .is-active{background:#0b0b0c!important}
.summary-item,.checkout-summary-row,.confirm-detail,.spec-table td,.footer-bottom{border-bottom:0;border-top:0}
.spec-table tr:nth-child(odd) td{background:var(--tint)}
.summary-total{border-top:0}.product-info .price-block{border-top:0}
.product-tabs-nav{border-bottom:0}.pt-tab.is-active{border-bottom-color:#0b0b0c}
.confirm-order-no{border:0;background:var(--tint)}
.trust-row{border-top:0}
.btn-buy{background:#0b0b0c}
.mz:not(.mz-0) img{width:48%;height:70%}
@media(max-width:700px){.ann-track{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}.ann-track span{overflow:hidden;text-overflow:ellipsis;max-width:100%}}
@media(max-width:860px){.hs-prodimg{bottom:46px;height:42%}.hs-prod .hs-copy{padding-top:36px}}

/* mobile: brands in one row (Electa, Tinsik, Airbass first), shrink to fit, scroll if too many */
@media(max-width:760px){
 .brands{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .brands::-webkit-scrollbar{display:none}
 .brands .brand{flex:1 1 0;min-width:60px;padding:12px 4px;border-radius:12px;gap:4px}
 .brands .brand img{max-height:30px;max-width:100%}
 .brands .brand strong{font-size:12px;word-break:break-word}
 .brands .brand span{font-size:9.5px;white-space:nowrap}
}

/* brand tiles: big, focused logos */
.brands .brand{background:#fff;border:1px solid #ececf0;border-radius:16px;padding:0;gap:0;overflow:hidden;align-items:stretch;justify-items:stretch;min-height:150px;grid-template-rows:1fr auto}
.brands .brand:hover{border-color:var(--ink,#111);background:#fff}
.brands .brand img{width:100%;height:100%;max-height:none;min-height:100px;object-fit:contain;padding:22px 26px;box-sizing:border-box;display:block}
.brands .brand strong{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;padding:22px 10px;text-align:center}
.brands .brand span{padding:8px 6px 12px;font-size:12px;text-align:center;border-top:1px solid #f1f1f4}
@media(max-width:760px){
 .brands{gap:10px;padding:2px 2px 6px}
 .brands .brand{flex:1 0 0;min-width:112px;min-height:124px;border-radius:14px}
 .brands .brand img{min-height:78px;padding:16px 14px}
 .brands .brand strong{font-size:16px;padding:16px 6px}
 .brands .brand span{font-size:10.5px;padding:6px 4px 9px}
}
.brands .brand img{height:120px;min-height:0;padding:0;transform:scale(1.55);mix-blend-mode:multiply}
.brands .brand{min-height:0}
@media(max-width:760px){.brands .brand{min-width:116px}.brands .brand img{height:92px;min-height:0;padding:0;transform:scale(1.5)}}
.brands .brand strong{font-size:28px;min-height:120px}
@media(max-width:760px){.brands .brand strong{font-size:21px;min-height:92px}}

/* brands v36: centered; 3-up grid on phones; scrolls only when row is full */
.brands{display:flex!important;flex-wrap:nowrap;justify-content:flex-start;gap:14px;overflow-x:auto;scrollbar-width:thin;padding:2px}
.brands .brand{flex:0 0 195px;min-width:0}
.brands .brand:first-child{margin-left:auto}.brands .brand:last-child{margin-right:auto}
.brands .brand img{transform:scale(1.25)}
@media(max-width:760px){
 .brands{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible}
 .brands .brand{flex:none;min-width:0;margin:0!important}
 .brands .brand img{height:84px;transform:none;padding:12px 10px;object-fit:contain}
 .brands .brand strong{font-size:17px;min-height:84px;padding:10px 4px}
 .brands .brand span{font-size:10.5px}
 .brands .brand{opacity:0;transform:translateY(18px) scale(.94)}
 .brands.is-in .brand,[data-reveal].is-in .brands .brand{animation:brandPop .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*90ms)}
 .brands .brand:active{transform:scale(.96)}
}
@keyframes brandPop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.no-js .brands .brand{opacity:1!important;transform:none!important}

/* v38: every logo is trimmed of its margin (brand_logo_url) and shown in the same-size box */
.brands .brand img{transform:none!important;mix-blend-mode:normal;height:110px;width:100%;padding:34px 30px;object-fit:contain;box-sizing:border-box}
@media(max-width:760px){.brands .brand img{height:76px;padding:22px 14px}.brands .brand strong{min-height:76px}}
.brands .brand img{mix-blend-mode:multiply}
@media(max-width:760px){.brands .brand strong{font-size:20px}}

/* v39: any uploaded logo shows at the same fixed height, never stretched or cut */
.eh-logo img{height:38px;width:auto;max-width:190px;object-fit:contain}
.efoot img{height:36px;width:auto;max-width:220px;object-fit:contain}
@media(max-width:760px){.eh-logo img{height:32px;max-width:150px}}

/* v41 brands: centred row that shrinks to fit; auto-scroll (marquee, no scrollbar) only when the row is really full */
.brands{display:block!important;overflow:hidden!important;padding:0!important;scrollbar-width:none}
.brands::-webkit-scrollbar{display:none}
.brands .brands-track{display:flex;justify-content:center;gap:0}
.brands .brand{flex:0 1 195px!important;min-width:0!important;margin:0 7px!important}
.brands:not(.is-marquee) .is-clone{display:none}
.brands.is-marquee .brands-track{width:max-content;justify-content:flex-start;animation:brandsRoll var(--bd,30s) linear infinite}
.brands.is-marquee .brand{flex:0 0 190px!important}
.brands.is-marquee:hover .brands-track{animation-play-state:paused}
.brands.is-wrap .brands-track{flex-wrap:wrap;row-gap:14px}
@keyframes brandsRoll{to{transform:translateX(-50%)}}
@media(max-width:760px){
  .brands{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible!important}
  .brands .brands-track{display:contents}
  .brands .brand{margin:0!important;flex:none!important}
}

/* Featured Category — white tiles with a small icon, own categories first then borrowed ones */
.sec:has(.cats){background:#f3f4f8;border-radius:18px;padding:34px clamp(12px,3vw,40px) 38px}
.cats-sub{margin:6px 0 0;color:#5b6272;font-size:14px;text-align:center}
.sec:has(.cats) .sec-h{flex-direction:column;align-items:center;margin-bottom:22px}
.cats{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px;justify-content:stretch;overflow:visible!important;padding:2px 0}
.cat{flex:none;max-width:none;min-width:0;background:#fff!important;border:0!important;border-radius:12px!important;padding:20px 8px 16px!important;gap:12px;box-shadow:0 2px 8px rgba(11,16,32,.05)!important;transition:transform .3s var(--ease),box-shadow .3s!important;justify-content:flex-start}
.cat:hover{transform:translateY(-4px)!important;box-shadow:0 12px 26px rgba(11,16,32,.12)!important}
.cat-img{width:60px!important;height:60px;aspect-ratio:auto;border-radius:0!important;background:none!important;display:flex;align-items:center;justify-content:center;margin:0 auto}
.cat-img img{width:100%;height:100%;object-fit:contain}
.cat-name{font-size:clamp(12px,1.05vw,15px);font-weight:500;min-height:2.5em;display:flex;align-items:flex-start;justify-content:center;-webkit-line-clamp:2}
@media(max-width:1180px){.cats{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:860px){.cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;justify-content:stretch!important}.cat{flex:none!important;max-width:none!important}.cat-img{width:44px!important;height:44px}}
@media(max-width:560px){.sec:has(.cats){border-radius:0;padding:26px 10px 28px}.cats{gap:8px}.cat{padding:12px 4px 10px!important;gap:8px}.cat-img{width:36px!important;height:36px}.cat-name{font-size:11.5px;min-height:2.6em}}

/* hero: product features instead of price */
.hs-feats{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:420px}
.hs-feats li{display:flex;align-items:baseline;gap:10px;font-size:clamp(13px,1.2vw,16px);color:#0b0b0c;padding-left:22px;position:relative;line-height:1.35}
.hs-feats li::before{content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;border-radius:50%;background:var(--primary,#2f4bd8);box-shadow:0 0 0 4px rgba(47,75,216,.14)}
.hs-feats li span{opacity:.62;font-weight:500}.hs-feats li b{font-weight:700}
@media(max-width:860px){.hs-feats{gap:5px;max-width:58%}.hs-feats li{font-size:12px;padding-left:18px}.hs-feats li::before{width:9px;height:9px;box-shadow:0 0 0 3px rgba(47,75,216,.14)}.hs-feats li:nth-child(n+3){display:none}}

/* featured products mosaic: bigger product pictures */
.mz img{width:56%!important;height:94%!important;right:3%!important;bottom:3%!important;transform-origin:right bottom;mix-blend-mode:multiply}
.mz-0 img{width:92%!important;height:78%!important;right:50%!important;bottom:2%!important;transform:translateX(50%);transform-origin:center bottom}
.mz:hover img{transform:scale(1.06)}.mz-0:hover img{transform:translateX(50%) scale(1.05)}
@media(max-width:860px){.mz img{width:58%!important;height:84%!important}.mz-0 img{width:86%!important;height:74%!important}}

/* v48: mobile full-size banners, swipe rows, New Arrival, WhatsApp float */
.wa-float{position:fixed;right:16px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.28);z-index:90;transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{from{transform:scale(1);opacity:.7}to{transform:scale(1.5);opacity:0}}
@media(max-width:860px){
 .wa-float{bottom:78px;right:12px;width:52px;height:52px}
 .hero{width:auto;margin:10px 0 0;border-radius:18px;height:auto;min-height:0;aspect-ratio:var(--hr,1.78)}
 .hero:has(.hs-prod.is-on){aspect-ratio:auto;height:clamp(440px,66vh,540px)}
 .hs-img.no-copy::after{display:none}
 .hs-bg{object-fit:cover}
 .hero-nav{display:none}
 .hero{container-type:inline-size}
 .hs-img .hs-copy{padding:0 5cqw 7cqw;gap:1.6cqw;max-width:none}
 .hs-img .hs-copy h1{font-size:6.4cqw;line-height:1.05;max-width:16ch;letter-spacing:-.01em}
 .hs-img .hs-kick{font-size:2.4cqw;letter-spacing:.14em}
 .hs-img .hs-copy .eb{font-size:2.9cqw;padding:2cqw 4.2cqw;min-height:0;gap:1.2cqw;border-radius:99px}
 .hs-img .hs-copy .eb svg{width:3.2cqw;height:3.2cqw}
 .hero-dots{bottom:2.2cqw;gap:1.2cqw}
 .hero-dots button{width:5cqw;height:3px}
 .cats{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;gap:14px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 10px 6px!important;margin:0 -10px}
 .cats::-webkit-scrollbar{display:none}
 .cats .cat{flex:0 0 78px!important;width:78px;scroll-snap-align:start;aspect-ratio:auto}
 .cat-img{width:64px!important;height:64px!important;border-radius:50%!important;background:#fff!important;overflow:hidden}
 .cat-img img{border-radius:50%}
 .brands{display:block!important;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0;padding:0!important}
 .brands::-webkit-scrollbar{display:none}
 .brands .brands-track{display:flex!important;gap:10px;width:max-content}
 .brands .brand{flex:0 0 132px!important;min-width:132px!important;margin:0!important;scroll-snap-align:start;opacity:1!important;transform:none!important}
 .brands .brand.is-clone{display:none}
}

@media(max-width:860px){body:has(.sticky-atc) .wa-float{bottom:136px}}

/* v49 compact phone spacing (no wasted space) */
@media(max-width:860px){
 .sec{margin:22px 0!important}
 .sec-h,.sec-h.is-c{margin-bottom:12px!important;gap:4px!important}
 .sec-h h2{font-size:20px!important}
 .reel-nav button{width:34px;height:34px}
 .cats-sub{display:none}
 .sec:has(.cats){background:none!important;border-radius:0!important;padding:0!important}
 .sec:has(.cats) .sec-h{margin-bottom:10px!important}
 .cats{align-items:flex-start!important;gap:12px!important;padding:2px 0 2px!important;margin:0!important}
 .cats .cat{flex:0 0 72px!important;width:72px;padding:0!important;gap:6px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
 .cat-img{width:62px!important;height:62px!important;background:#f3f4f8!important;border:1px solid #ececf0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:12px}
 .cat-img img{width:100%;height:100%;object-fit:contain;border-radius:0}
 .cat-name{font-size:11.5px!important;min-height:0!important;line-height:1.2;display:block!important;text-align:center;-webkit-line-clamp:2}
 .brands .brand{flex:0 0 118px!important;min-width:118px!important;min-height:0}
 .brands .brand img{height:58px!important;padding:12px 12px!important}
 .brands .brand strong{min-height:58px!important;font-size:17px!important}
 .sec-new{margin-top:22px!important}
 .hero{margin-top:8px}
 .callband{margin-top:24px}
}