/* ==== style ==== */

:root{
  --red:#d9232d; --red-dark:#b01a22;
  --blue:#2b7de9; --blue-dark:#1f63c0;
  --purple:#5e35b1; --purple-bg:#ede7f6;
  --green:#0f9d58; --green-bg:#e6f4ea;
  --ink:#212121; --muted:#6f7a86; --line:#e4e7ea;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth}
body{font-family:Roboto,'Segoe UI',Arial,Helvetica,sans-serif;background:#fff;color:var(--ink);font-size:14px}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
/* FULL WIDTH like Moglix: no centered max-width box, just edge padding */
.wrap{width:100%;padding:0 22px}
@media(max-width:640px){.wrap{padding:0 12px}}
.hide{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ 1. BLACK TOP STRIP (slim) ============ */
.topstrip{background:#000;color:#fff;padding:5px 0;overflow:hidden}
.topstrip .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.topstrip .brandred{color:var(--red);font-weight:800;font-size:14.5px}
.topstrip .brandred span{color:#fff;font-weight:600;font-size:13px}
.topstrip .msg{font-size:13px}
.cta-wrap{position:relative;display:inline-block}
.cta-wrap{margin-left:20px}
.cta-wrap::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:136%;height:330%;background:radial-gradient(ellipse at center,rgba(217,35,45,.78) 0%,rgba(217,35,45,.28) 42%,transparent 64%);pointer-events:none}
.topstrip .cta{position:relative;background:#fff;color:var(--red);font-weight:800;font-size:12.5px;padding:6px 16px;border-radius:5px;border:none;white-space:nowrap}
@media(max-width:760px){.topstrip .msg{display:none}}

/* ============ 2. HEADER ============ */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:300}
.hdr-in{width:100%;padding:11px 22px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer}
.logo-mark{width:38px;height:38px;border-radius:8px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px}
.logo-txt b{font-size:19px;color:#212121;display:block;line-height:1}
.logo-txt small{font-size:10px;color:var(--red);font-weight:700;letter-spacing:1.8px;text-transform:uppercase}
.loc{display:flex;align-items:flex-start;gap:6px;cursor:pointer;flex:0 0 auto;line-height:1.35}
.loc .pin{color:var(--red);font-size:13px;margin-top:1px}
.loc .l1{font-size:11.5px;color:#777;font-weight:500}
.loc .l2{font-size:12.5px;color:var(--blue);font-weight:700}
.srch{flex:1;display:flex;min-width:140px;max-width:760px}
.srch input{flex:1;border:1px solid #cfd6dc;border-right:none;border-radius:8px 0 0 8px;outline:none;padding:10px 16px;font-size:14px;min-width:0;color:#333}
.srch input::placeholder{color:#98a2ac}
.srch button{background:var(--red);border:none;color:#fff;padding:0 24px;border-radius:0 8px 8px 0;font-size:16px}
.hdr-r{display:flex;align-items:center;gap:26px;flex:0 0 auto;margin-left:auto}
.hdr-r .hitem{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#333;cursor:pointer;position:relative}
.hdr-r .hico{font-size:18px}
.dots{font-size:20px;color:#555;letter-spacing:2px;cursor:pointer}
.cart-count{position:absolute;top:-9px;right:-12px;background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
@media(max-width:900px){.loc{display:none}.hdr-r .hitem span.t{display:none}.hdr-r{gap:16px}}

/* ============ 3. CATEGORY ICON SUB-HEADER ============ */
.catrow{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--hdrH,63px);z-index:250}
.catrow-in{width:100%;padding:8px 14px;display:flex;justify-content:space-between;overflow-x:auto;gap:4px;scrollbar-width:none}
.catrow-in::-webkit-scrollbar{display:none}
.citem{flex:1 0 auto;min-width:82px;max-width:108px;text-align:center;cursor:pointer;padding:4px 3px;border-radius:8px}
.citem:hover{background:#fdf1f2}
.citem .cico{width:42px;height:42px;margin:0 auto 4px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.citem .cico svg{width:30px;height:30px}
.citem b{font-size:11px;font-weight:600;color:#333;line-height:1.25;display:block}
.badge-new{background:#ffd814;color:#8a2b06;font-size:8.5px;font-weight:900;padding:1px 5px;border-radius:3px;position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:2}

/* ============ 4. HERO SLIDER (compact like Moglix, horizontal slide) ============ */
.hero{width:100%;padding:0}
.slider{position:relative;border-radius:0;overflow:hidden;height:255px}
.sl-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.slide{flex:0 0 100%;position:relative;height:100%}
.sl-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 60px;max-width:1200px;margin:0 auto}
.sl-left{flex:0 0 auto;max-width:330px;color:#fff}
.sl-left .bname{font-size:34px;font-weight:900;font-style:italic;letter-spacing:1px;line-height:.95}
.sl-left .bsub{font-size:11.5px;letter-spacing:2.5px;font-weight:700;margin:4px 0 10px;opacity:.95}
.sl-left .tag2{font-size:16.5px;font-weight:700;line-height:1.3;margin-bottom:13px}
.sl-left .shop{background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:9px 18px;border-radius:7px;border:none;display:inline-flex;align-items:center;gap:8px}
.sl-mid{flex:0 0 auto;text-align:center}
.upto{font-size:17px;font-weight:800;color:#fff;letter-spacing:3px}
.pct-big{font-size:54px;font-weight:900;background:linear-gradient(180deg,#ffe985,#f8b500 60%,#d68a00);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.9;text-shadow:0 4px 14px rgba(0,0,0,.25)}
.offer-w{font-size:19px;font-weight:900;color:#fff;letter-spacing:4px}
.sl-right{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:220px}
.sl-right svg{max-height:175px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}
.bankbar{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;background:#fff;border-radius:7px;padding:6px 14px;display:flex;align-items:center;gap:10px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap;z-index:3}
.bankbar b{font-size:13px}.bankbar .bk{font-weight:800;color:#1a3c8f}.bankbar small{color:#888;font-size:9.5px}
.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:none;font-size:17px;color:#333;box-shadow:0 3px 10px rgba(0,0,0,.25);z-index:5}
.sl-prev{left:14px}.sl-next{right:14px}
.sl-dots{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:4}
.sl-dots span{width:8px;height:8px;border-radius:50%;background:#cfd4d9;cursor:pointer}
.sl-dots span.on{background:#8b9298;width:22px;border-radius:5px}

/* per-slide distinct brand fonts (like Moglix brand banners) */
.fs1 .bname{font-family:Georgia,'Times New Roman',serif;font-style:normal;letter-spacing:.5px}
.fs2 .bname{font-family:Impact,'Arial Black',sans-serif;font-style:normal;letter-spacing:3px;font-weight:400}
.fs3 .bname{font-family:'Segoe Script','Brush Script MT',cursive;font-style:italic;font-size:40px}
.fs4 .bname{font-family:'Courier New',monospace;font-weight:900;letter-spacing:-2px;font-style:normal}
.fs5 .bname{font-family:'Trebuchet MS',Verdana,sans-serif;font-style:normal;border:3px solid rgba(255,255,255,.85);padding:2px 14px;display:inline-block;letter-spacing:2px}
.t1{background:radial-gradient(ellipse at 75% 40%,#3a5068 0%,#1d2b3a 55%,#111c26 100%)}
.t2{background:radial-gradient(ellipse at 75% 40%,#f0656d 0%,#c81f29 55%,#8e1118 100%)}
.t3{background:radial-gradient(ellipse at 75% 40%,#2f8f5c 0%,#0e6b3e 55%,#084a2a 100%)}
.t4{background:radial-gradient(ellipse at 75% 40%,#3a6fb0 0%,#1f4e86 55%,#123258 100%)}
.t5{background:radial-gradient(ellipse at 75% 40%,#8a6ad1 0%,#5e35b1 55%,#3d1f82 100%)}
@media(max-width:1000px){.sl-mid{display:none}.sl-left{flex:1}.slider{height:230px}.sl-inner{padding:0 56px}}
@media(max-width:680px){.sl-right{display:none}.slider{height:215px}.bankbar{display:none}.sl-left .bname{font-size:28px}}

/* ============ 5. BRAND TABS ============ */
.brandtabs{width:100%;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.btab{background:#fff;border:1px solid var(--line);border-top:none;text-align:center;padding:13px 8px;cursor:pointer}
.btab b{display:block;font-size:14.5px;letter-spacing:.6px;color:#333}
.btab span{font-size:13px;color:#555}
.btab.on{border-bottom:3px solid var(--red)}
.btab.on b,.btab.on span{color:var(--red)}
@media(max-width:680px){.brandtabs{grid-template-columns:repeat(2,1fr)}.btab:last-child{grid-column:1/-1}}

/* ============ 6. PROMO CARDS ============ */
.promos{width:100%;padding:18px 22px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.promo{border-radius:12px;overflow:hidden;height:150px;position:relative;padding:18px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;transition:transform .18s}
.promo:hover{transform:translateY(-3px)}
.promo .pb1{font-size:12px;font-weight:800;letter-spacing:1px}
.promo .pb2{font-size:20px;font-weight:900;line-height:1.15;margin:4px 0 8px;text-shadow:0 1px 2px rgba(255,255,255,.15)}
.pm3 .pb1,.pm3 .pb2{text-shadow:0 1px 6px rgba(0,0,0,.55)}
.promo .pshop{width:max-content;font-size:11px;font-weight:800;padding:6px 13px;border-radius:5px;background:var(--red);color:#fff}
.promo svg{position:absolute;right:8px;bottom:6px;height:110px;width:auto;opacity:.95}
.promo{background-size:cover;background-position:center}
.pm1{background-image:linear-gradient(95deg,rgba(250,240,222,.96) 0%,rgba(250,240,222,.82) 42%,rgba(250,240,222,.08) 100%),url('assets/img/im-9de1e71d77.webp');color:#4a2f14}.pm1 .pb1{color:#a45f16}
.pm2{background-image:linear-gradient(95deg,rgba(232,246,228,.96) 0%,rgba(232,246,228,.82) 42%,rgba(232,246,228,.08) 100%),url('assets/img/im-65b42f5b9d.webp');color:#143d1a}.pm2 .pb1{color:#0f7a3a}
.pm3{background-image:linear-gradient(95deg,rgba(9,20,46,.95) 0%,rgba(9,20,46,.78) 45%,rgba(9,20,46,.15) 100%),url('assets/img/im-582cfff438.webp');color:#fff}.pm3 .pb1{color:#8fc2ff}.pm3 .pb2 .big{color:#ffd814;font-size:26px}
.pm4{background-image:linear-gradient(95deg,rgba(16,46,84,.95) 0%,rgba(16,46,84,.80) 45%,rgba(16,46,84,.16) 100%),url('assets/img/im-9ebe6ea0b7.webp');color:#fff}.pm4 .pb1{color:#a9d3ff}
.pm4 .ribbon{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-weight:900;font-size:15px;padding:8px 14px;border-radius:0 0 0 12px}
@media(max-width:1000px){.promos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.promos{grid-template-columns:1fr}}


/* ============ CONTINUE YOUR JOURNEY (viewed products) ============ */
.journey{margin:20px 22px 0;border-radius:12px;padding:20px 22px 24px;background:linear-gradient(180deg,#c6d4f0 0%,#dcd4e4 45%,#dfaec3 100%)}
.journey h2{font-size:20px;font-weight:800;color:#2a3550;margin-bottom:16px}
.j-row{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
.j-row::-webkit-scrollbar{display:none}
.jc{flex:0 0 150px;cursor:pointer;text-align:center}
.jc .jimg{height:140px;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(60,60,90,.15)}
.jc .jimg svg{width:88px;height:88px}
.jc .jv{position:absolute;bottom:0;left:0;right:0;background:rgba(20,22,28,.78);color:#fff;font-size:11.5px;font-weight:700;padding:4px;display:flex;align-items:center;justify-content:center;gap:5px}
.jc b{display:block;margin-top:8px;font-size:13.5px;color:#2a3550;line-height:1.3}
/* ============ 7. GREEN "RELATED" FULL-WIDTH SECTION ============ */
.greensec{margin-top:26px;background:linear-gradient(180deg,#f2faf1 0%,#dff0dd 40%,#cfe8cd 100%);padding:22px 22px 26px;position:relative}
.greensec h2{font-size:21px;font-weight:800;color:#222;margin-bottom:16px}
.rel-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.rel-row::-webkit-scrollbar{display:none}
.rel{flex:0 0 172px;cursor:pointer}
.rel .rimg{height:150px;border:1px solid #d7e3d5;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.rel .rimg svg{width:84px;height:84px}
.rel .rimg img{width:100%;height:100%;object-fit:cover;display:block}
.rel .cnt{position:absolute;bottom:0;left:0;right:0;background:rgba(20,25,32,.72);color:#fff;font-size:11.5px;font-weight:700;padding:4px 8px;display:flex;align-items:center;gap:5px}
.rel b{display:block;text-align:center;font-size:13.5px;margin-top:8px;color:#222;line-height:1.3}
.rel:first-child .rimg{border:1.5px solid var(--red)}
/* product cards row on green bg */
.gprod-row{display:flex;gap:16px;overflow-x:auto;margin-top:20px;padding:4px 2px 10px;scrollbar-width:none}
.gprod-row::-webkit-scrollbar{display:none}
.gpc{flex:0 0 232px;background:#fff;border-radius:10px;padding:14px 14px 16px;position:relative;box-shadow:0 1px 4px rgba(30,60,35,.12);cursor:pointer;transition:box-shadow .18s}
.gpc:hover{box-shadow:0 8px 20px rgba(30,60,35,.2)}
.gpc .flag{position:absolute;top:10px;left:0;background:var(--blue);color:#fff;font-size:11px;font-weight:800;padding:4px 12px 4px 10px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.gpc .gimg{height:150px;display:flex;align-items:center;justify-content:center}
.gpc .gimg svg{width:110px;height:110px}
.gpc .gimg{overflow:hidden;border-radius:8px}
.gpc .gimg img{width:100%;height:100%;object-fit:cover;display:block}
.gpc .grate{display:flex;align-items:center;gap:7px;margin:8px 0 6px}
.gpc .rpill{background:var(--green);color:#fff;font-size:11px;font-weight:800;padding:2.5px 7px;border-radius:4px}
.gpc .grate small{color:#555;font-size:12px}
.gpc .gname{font-size:14px;font-weight:600;color:#222;line-height:1.4;min-height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gpc .gprice{margin-top:8px}
.gpc .gprice .now{font-size:19px;font-weight:900}
.gpc .gprice .sub{font-size:12.5px;margin-top:2px}
.gpc .gprice .sub s{color:#999}
.gpc .gprice .sub .pct{color:var(--green);font-weight:800;margin-left:7px}
.row-arrow{position:absolute;right:26px;top:50%;width:44px;height:44px;border-radius:50%;background:#fff;border:none;font-size:19px;box-shadow:0 3px 12px rgba(0,0,0,.22);z-index:4}
.row-arrow.left{right:auto;left:26px}

/* ============ 8. BLACK CITIES FULL-WIDTH SECTION ============ */
.blacksec{background:#3f3f3f;margin:28px 22px 0;border-radius:14px;padding:22px 22px 24px;color:#fff}
.blacksec .cities-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.blacksec h2{font-size:20px;font-weight:800}
.upd{background:#fff;color:var(--red);border:none;font-weight:800;font-size:12px;padding:8px 16px;border-radius:6px}
.city-pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.cpill{background:#fff;color:#333;font-size:13px;font-weight:600;padding:8px 16px;border-radius:7px;border:1px solid #fff;cursor:pointer}
.cpill.on{color:var(--red);border-color:var(--red);background:#fff5f5}
.city-cards{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.city-cards::-webkit-scrollbar{display:none}
.ccard{flex:0 0 190px;background:#fff;border-radius:10px;overflow:hidden;color:#222;cursor:pointer}
.ccard .cimg{height:128px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ccard .cimg svg{width:84px;height:84px}
.ccard .cimg img{width:100%;height:100%;object-fit:cover;display:block}
.ccard .cb{padding:10px 12px 13px;text-align:center}
.ccard .cb b{font-size:13.5px;display:block;line-height:1.3;min-height:34px}
.ccard .from{color:var(--green);font-weight:800;font-size:13px}

/* ============ 9. BESTSELLERS (white bg, shadow boxes) ============ */
.sec{width:100%;padding:30px 22px 0}
.sec h2{font-size:21px;font-weight:800;color:#222;margin-bottom:16px}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sec-head h2{margin:0}
.viewall{background:#fdeef0;color:var(--red);font-weight:800;font-size:13px;letter-spacing:.5px;padding:9px 18px;border-radius:7px;border:none}
.viewall:hover{background:var(--red);color:#fff}
.shadow-row{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none;position:relative}
.shadow-row::-webkit-scrollbar{display:none}
.spc{flex:0 0 218px;background:#fff;border-radius:10px;padding:12px 13px 15px;box-shadow:0 2px 8px rgba(25,35,50,.12);cursor:pointer;position:relative;transition:box-shadow .18s,transform .18s}
.spc:hover{box-shadow:0 14px 32px rgba(25,35,50,.24);transform:scale(1.045);z-index:4}
.spc:hover .gname{color:var(--blue)}
.hoverbtns{display:none;gap:8px;margin-top:10px}
@media(hover:hover){.spc:hover .hoverbtns{display:flex}}
.hoverbtns button{flex:1;padding:8px 4px;border-radius:7px;font-weight:800;font-size:11px;letter-spacing:.3px;cursor:pointer}
.hb-cart{background:#fff;border:1.5px solid var(--blue);color:var(--blue)}
.hb-cart:hover{background:#eaf2fd}
.hb-buy{background:var(--red);border:none;color:#fff}
.hb-buy:hover{background:var(--red-dark)}
.spc .flag{position:absolute;top:10px;left:0;background:var(--blue);color:#fff;font-size:11px;font-weight:800;padding:4px 12px 4px 10px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.spc .simg{height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px}
.spc .simg svg{width:104px;height:104px}
.spc .simg img{width:100%;height:100%;object-fit:cover;display:block}
.spc .grate{display:flex;align-items:center;gap:7px;margin:8px 0 5px}
.spc .rpill{background:var(--green);color:#fff;font-size:11px;font-weight:800;padding:2.5px 7px;border-radius:4px}
.spc .grate small{color:#555;font-size:12px}
.spc .gname{font-size:13.5px;font-weight:600;color:#222;line-height:1.4;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spc .now{font-size:18px;font-weight:900;margin-top:7px}
.spc .sub{font-size:12.5px}
.spc .sub s{color:#999}
.spc .sub .pct{color:var(--green);font-weight:800;margin-left:7px}

/* ============ 10. 3 SERVICE BANNERS ============ */
.svc{width:100%;padding:28px 22px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.svcb{border-radius:12px;height:140px;padding:20px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;cursor:pointer}
.svcb h3{font-size:19px;font-weight:800;margin-bottom:5px}
.svcb p{font-size:12.5px;line-height:1.45;max-width:62%}
.svcb .sbtn{width:max-content;margin-top:10px;background:var(--red);color:#fff;border:none;font-weight:800;font-size:12px;padding:8px 16px;border-radius:6px}
.svcb svg{position:absolute;right:14px;bottom:10px;height:100px;width:auto}
.sv1{background:linear-gradient(115deg,#eef4fb,#dbe9f7);color:#1c3a5e}
.sv2{background:linear-gradient(115deg,#e9f1fd,#d3e3fa);color:#1c3a5e}
.sv3{background:linear-gradient(115deg,#fdeee4,#fbdfcd);color:#7a3c12}
@media(max-width:960px){.svc{grid-template-columns:1fr}.svcb p{max-width:75%}}

/* ============ 11. MEGA CATEGORY (like Moglix ELECTRICALS) ============ */
.mega{width:100%;padding:32px 22px 0}
.mega-panel{background:#eef0f2;border-radius:14px;padding:22px;position:relative}
.mega-top{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:20px;margin-bottom:22px;align-items:start}
.mega-left{background:#fff;border-radius:12px;padding:20px 18px;display:flex;flex-direction:column;justify-content:flex-start;margin-top:14px}
.mega-left h3{font-size:16px;font-weight:800;margin-bottom:20px}
.brand-circles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bcircle{text-align:center;cursor:pointer;min-width:0}
.bcircle .bc{width:100%;max-width:82px;aspect-ratio:1/1;border-radius:50%;background:#fff;border:1px solid var(--line);margin:0 auto 9px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:var(--red);text-align:center;line-height:1.1;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.bcircle small{font-size:12.5px;color:#333;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tan category tiles with wooden shelf */
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ctile{background:linear-gradient(180deg,#fdf3dd 0%,#f9e9c6 70%,#f4dfae 100%);border-radius:12px;cursor:pointer;text-align:center;padding-bottom:16px;transition:transform .18s;overflow:hidden}
.ctile:hover{transform:translateY(-3px)}
.ctile .ci2{aspect-ratio:1/.95;height:auto;display:flex;align-items:center;justify-content:center;overflow:hidden}

.ctile .ci2 img{width:100%;height:calc(100% + 1px);object-fit:cover;object-position:center bottom;display:block}
.ctile .ci2 svg{width:120px;height:120px;filter:drop-shadow(0 10px 12px rgba(120,90,30,.3))}
.ctile .shelf{height:16px;margin:-1px 0 14px;background:repeating-linear-gradient(90deg,#c99b5b 0 22px,#b8873f 22px 44px);box-shadow:inset 0 3px 4px rgba(0,0,0,.18);position:relative;z-index:1}
.ctile b{font-size:15.5px;display:block;color:#222;margin-bottom:3px}
.ctile small{font-size:13px;color:#555;font-weight:600}
/* white product cards row inside grey panel */
.mega-prods{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none;position:relative}
.mega-prods::-webkit-scrollbar{display:none}
.mega .row-arrow{right:34px;top:auto;bottom:120px}
.mega .row-arrow.left{right:auto;left:34px;top:auto;bottom:120px}
@media(max-width:1100px){.cat-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.mega-top{grid-template-columns:1fr}.brand-circles{max-width:420px;margin:0 auto}}
@media(max-width:560px){.cat-tiles{grid-template-columns:1fr}}

/* ============ 12. TRUST + FOOTER ============ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px;background:#fff}
.trust-in{width:100%;padding:26px 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:center}
.trust-in .ti{font-size:26px;margin-bottom:6px}
.trust-in b{display:block;font-size:13.5px;margin-bottom:3px}
.trust-in small{color:#888;font-size:11.5px;line-height:1.45}
@media(max-width:860px){.trust-in{grid-template-columns:repeat(2,1fr)}.trust-in .t:last-child{grid-column:1/-1}}
footer{background:#fff;color:#111;border-top:1px solid var(--line)}
.ft-in{width:100%;padding:26px 22px 16px;display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;gap:18px 20px}
.ft-in h4{color:#000;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:9px}
.ft-in a{display:block;font-size:13px;padding:2.5px 0;color:#111;font-weight:500}
.ft-in a:hover{color:var(--red)}
.ft-in p{font-size:13px;line-height:1.65;color:#111}
.ft-group{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;padding:13px 22px}
.ft-group b{font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:#7a8794;font-weight:800;margin-right:16px}
.ft-group a{font-size:13px;font-weight:600;color:#111;padding:0}
.ft-group a:not(:last-child){margin-right:11px;padding-right:11px;border-right:1px solid #d8dde2}
.ft-group a:hover{color:var(--red)}
.ft-mail-row{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:0 8px}
.ft-mail-row i{font-style:normal;color:#b9c2cb}
@media(max-width:640px){.ft-group{padding:12px 16px}.ft-group b{width:100%;margin-right:0}}
.ft-bot{border-top:1px solid var(--line);text-align:left;font-size:12px;padding:11px 22px;color:#222}
.socials{display:flex;gap:11px;margin-top:14px}
.soc{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .18s,filter .18s}
.soc:hover{transform:translateY(-2px);filter:brightness(1.12)}
.soc svg{width:17px;height:17px}
.soc.fb{background:#1877f2}
.soc.x{background:#3d4144}
.soc.ig{background:radial-gradient(circle at 30% 110%,#d8489b 0%,#af40aa 42%,#8b3ab8 82%)}
.soc.li{background:#404b52}
.soc.yt{background:#ff0000}
@media(max-width:860px){.ft-in{grid-template-columns:1fr 1fr}}

/* ============ CATEGORY LISTING PAGE (Phase 2) ============ */
.crumb{width:100%;padding:12px 22px 0;font-size:13px;color:#777}
.crumb a{color:#555}.crumb a:hover{color:var(--red)}.crumb .sep{margin:0 7px;color:#bbb}
.cat-page{width:100%;padding:14px 22px 40px;display:grid;grid-template-columns:250px 1fr;gap:20px}
@media(max-width:860px){.cat-page{grid-template-columns:1fr}}
.filters{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;align-self:start}
.filters h3{font-size:15px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.filters h3 button{background:none;border:none;color:var(--blue);font-size:12px;font-weight:700}
.fgroup{border-top:1px solid var(--line);padding:12px 0}
.fgroup b{font-size:13px;display:block;margin-bottom:9px;text-transform:uppercase;letter-spacing:.5px;color:#444}
.fgroup label{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;cursor:pointer;color:#333}
.fgroup input{accent-color:var(--red);width:15px;height:15px}
.cat-main .cat-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.cat-main .cat-top h1{font-size:20px}
.cat-main .cat-top .cnt{color:#777;font-size:13px;font-weight:600}
.sortsel{border:1px solid #cfd6dc;border-radius:7px;padding:8px 12px;font-size:13.5px;font-weight:600;color:#333;outline:none;background:#fff}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:15px}
.noresult{padding:50px 0;text-align:center;color:#888}

/* ============ PRODUCT PAGE (Phase 3) ============ */
.pd{width:100%;padding:14px 22px 40px;display:grid;grid-template-columns:460px 1fr 340px;gap:26px}
@media(max-width:1150px){.pd{grid-template-columns:420px 1fr}.pd-right{grid-column:1/-1}}
@media(max-width:820px){.pd{grid-template-columns:1fr}}
.pd-gal{position:relative}
.pd-main{border:1px solid var(--line);border-radius:12px;height:420px;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}
.pd-main svg{width:280px;height:280px}
.gal-act{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:10px}
.gal-act button{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:17px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumbs .th{width:64px;height:64px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff}
.pd-thumbs .th svg{width:44px;height:44px}
.pd-thumbs .th.on{border:2px solid var(--red)}
.hoverzoom{text-align:center;font-size:12px;color:#999;margin-top:8px}
.pd-mid h1{font-size:25px;font-weight:800;line-height:1.25;margin-bottom:8px}
.pd-incl{font-size:13.5px;color:#777;margin-bottom:6px}
.pd-priceline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pd-priceline .big{font-size:34px;font-weight:900}
.pd-priceline .gst{font-size:15px;color:#555;font-weight:700}
.pd-mrp{font-size:14px;color:#555;margin-bottom:16px}
.pd-mrp s{color:#999}
.pd-mrp .off{color:var(--green);font-weight:800;margin-left:6px}
.coinbox{background:var(--green-bg);border:1px solid #cde8d6;border-radius:10px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;cursor:pointer}
.coinbox .cl{display:flex;align-items:center;gap:11px}
.coin{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.coinbox b{font-size:14.5px;color:#1c5c34}
.coinbox small{display:block;color:#4a7a5c;font-size:12.5px;font-weight:500}
.coinbox .arr{color:#666;font-size:17px}
.dealbox{border:1px solid #cde8d6;border-radius:10px;overflow:hidden;margin-bottom:14px}
.deal-top{background:linear-gradient(90deg,#eaf7ee,#d9f0e0);padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.deal-logo{background:#fff;border:1.5px dashed var(--red);color:var(--red);font-weight:900;font-size:11px;padding:5px 9px;border-radius:6px;text-align:center;line-height:1.1}
.deal-top .dt{font-size:14px}.deal-top .dt b{font-size:16px}
.deal-top .dt u{text-decoration-color:var(--green);text-decoration-thickness:2px}
.extra-off{background:var(--green);color:#fff;font-weight:800;font-size:13px;padding:7px 16px;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.deal-bot{background:#fdf3f4;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;cursor:pointer}
.deal-bot .ic{background:#fff;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;margin-right:9px;border:1px solid #eee}
.trustpanel{background:var(--purple-bg);border-radius:12px;padding:16px;margin-bottom:14px}
.trustpanel .tp-h{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:15.5px;color:#33235c;margin-bottom:10px}
.trustpanel .tp-h .vm{width:24px;height:24px;border-radius:6px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.tp-badge{width:max-content;margin:0 auto 12px;border:1px solid #cbbfe8;border-radius:20px;font-size:12.5px;font-weight:700;color:#4a3585;padding:5px 14px;background:#fff}
.tp-stats{background:#fff;border-radius:10px;padding:14px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:8px}
.tp-stats b{font-size:17px;color:var(--green);display:block}
.tp-stats b.star{color:#1c8f3c}
.tp-stats small{font-size:12px;color:#555;font-weight:600}
.tp-foot{background:var(--purple);color:#fff;border-radius:0 0 10px 10px;margin:12px -16px -16px;padding:11px;display:flex;justify-content:space-around;font-size:13px;font-weight:700}
.tp-foot span{display:flex;align-items:center;gap:6px}
.pd-specs{margin-top:18px}
.pd-specs h3{font-size:16px;margin-bottom:10px}
.pd-specs table{width:100%;border-collapse:collapse;font-size:13.5px}
.pd-specs td{border:1px solid var(--line);padding:9px 12px}
.pd-specs td:first-child{background:#f7f9fb;font-weight:700;width:38%}
.pd-right .buybox{border:1px solid var(--line);border-radius:12px;padding:18px;background:#f8f9fb}
.bb-incl{font-size:13px;color:#777}
.bb-price{font-size:30px;font-weight:900;margin:2px 0}
.bb-price .gst{font-size:14px;color:#555;font-weight:700}
.bb-mrp{font-size:13.5px;color:#555;margin-bottom:14px}
.bb-mrp s{color:#999}.bb-mrp .off{color:var(--green);font-weight:800;margin-left:5px}
.qtyrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qtyrow b{font-size:14.5px}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:34px;height:34px;border-radius:8px;border:1px solid #cfd6dc;background:#fff;font-size:17px;font-weight:800;color:var(--blue)}
.stepper input{width:52px;height:34px;border:1px solid #cfd6dc;border-radius:8px;text-align:center;font-size:15px;font-weight:700}
.btn-cart{width:100%;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:14px;font-size:15px;font-weight:800;letter-spacing:.4px;margin-bottom:11px;display:flex;align-items:center;justify-content:center;gap:9px}
.btn-cart:hover{background:var(--blue-dark)}
.btn-buy{width:100%;background:var(--red);color:#fff;border:none;border-radius:9px;padding:14px;font-size:15px;font-weight:800;letter-spacing:.4px}
.btn-buy:hover{background:var(--red-dark)}
.delivbox{border:1px solid #f3ddc4;border-radius:12px;margin-top:16px;background:linear-gradient(120deg,#fff8ee,#fdeedd);padding:16px}
.delivbox h4{font-size:16px;margin-bottom:10px}
.delivrow{background:#fff;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;padding:4px 4px 4px 12px;gap:8px}
.delivrow .pin{color:var(--red)}
.delivrow input{flex:1;border:none;outline:none;font-size:13.5px;min-width:0}
.delivrow button{background:none;border:none;border-left:1px solid var(--line);color:var(--red);font-weight:800;font-size:12.5px;padding:9px 13px}
.delivbox small{display:block;color:#8a6a45;font-size:12px;margin-top:9px}

/* ============ CART PAGE (Phase 4) ============ */
.page-pad{width:100%;padding:18px 22px 46px}
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:20px}
@media(max-width:900px){.cart-grid{grid-template-columns:1fr}}
.cart-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cart-h{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:800;font-size:16px}
.crow{display:flex;gap:16px;padding:16px 18px;border-bottom:1px solid #f0f2f4;align-items:center}
.crow .cimg2{width:88px;height:88px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.crow .cimg2 svg{width:62px;height:62px}
.crow .cinfo{flex:1}
.crow .cinfo b{font-size:14.5px;display:block;margin-bottom:3px}
.crow .cinfo small{color:#888;font-weight:600}
.crow .cinfo .cprice{font-size:16px;font-weight:900;margin-top:5px}
.crow .cinfo .cprice s{color:#999;font-size:12.5px;font-weight:600;margin-left:7px}
.crow .cinfo .cprice .pct{color:var(--green);font-size:12.5px;font-weight:800;margin-left:6px}
.crow .rm{background:none;border:none;color:var(--red);font-weight:700;font-size:12.5px;margin-top:6px;padding:0}
.summary{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;align-self:start}
.summary h3{font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:#666;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:12px}
.srow{display:flex;justify-content:space-between;font-size:14px;padding:5px 0}
.srow.tot{border-top:1px dashed #ccc;margin-top:9px;padding-top:12px;font-weight:900;font-size:16.5px}
.srow .grn{color:var(--green);font-weight:700}
.btn-primary{width:100%;background:var(--red);color:#fff;border:none;border-radius:9px;padding:14px;font-size:15px;font-weight:800;margin-top:14px}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{width:100%;background:#fff;color:var(--red);border:1.5px solid var(--red);border-radius:9px;padding:12px;font-size:14px;font-weight:800;margin-top:10px}
.gstnote{background:var(--green-bg);border-radius:8px;font-size:12.5px;color:#1c5c34;padding:10px 12px;margin-top:14px;font-weight:600}

/* ============ CHECKOUT (Phase 4) ============ */
.chk-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
@media(max-width:900px){.chk-grid{grid-template-columns:1fr}}
.formcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.formcard h3{font-size:16px;margin-bottom:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.full{grid-column:1/-1}
.fld label{font-size:12.5px;font-weight:700;color:#555}
.fld input,.fld textarea,.fld select{border:1px solid #cfd6dc;border-radius:8px;padding:11px 13px;font-size:14px;outline:none;font-family:inherit}
.fld input:focus,.fld textarea:focus{border-color:var(--red)}
.payopt{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.payopt label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:14px;font-weight:600;cursor:pointer}
.payopt input{accent-color:var(--red);width:16px;height:16px}
.payopt label small{color:#888;font-weight:500;margin-left:auto}

/* ============ RFQ + TRACK (Phase 5) ============ */
.hero-mini{background:linear-gradient(115deg,#15212e,#25445e);color:#fff;border-radius:12px;padding:26px;margin-bottom:20px}
.hero-mini h1{font-size:24px;margin-bottom:6px}
.hero-mini p{opacity:.9;font-size:14px}
.timeline{margin-top:22px;border-left:3px solid var(--line);padding-left:22px}
.tstep{position:relative;padding-bottom:22px}
.tstep::before{content:'';position:absolute;left:-31.5px;top:2px;width:14px;height:14px;border-radius:50%;background:#cfd6dc;border:3px solid #fff;box-shadow:0 0 0 2px #cfd6dc}
.tstep.done::before{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.tstep b{font-size:14.5px;display:block}
.tstep small{color:#888;font-size:12.5px}
.success-box{max-width:560px;margin:30px auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:40px 30px}
.success-box .ok{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.success-box h2{margin-bottom:8px}
.success-box p{color:#666;font-size:14px;line-height:1.6}
.oid{background:#f4f6f8;border-radius:8px;font-weight:900;font-size:17px;padding:11px;margin:16px 0;letter-spacing:1px}


/* ============ FOOTER BOTTOM STRIP (apps | mail | socials) ============ */
.ft-strip{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 28px;padding:16px 22px;text-align:left}
.ft-apps{display:flex;gap:12px}
.store-badge{display:flex;align-items:center;gap:9px;background:#000;border-radius:8px;padding:7px 14px;color:#fff;cursor:pointer}
.store-badge small{display:block;font-size:8.5px;color:#ccc;letter-spacing:.4px}
.store-badge b{font-size:14px;line-height:1.05;display:block}
.ft-mail{text-align:left;flex:0 1 auto}
.ft-mail a{color:var(--blue);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:8px}
.ft-mail small{display:block;color:#777;font-size:12.5px;margin-top:3px}
.ft-socs{display:flex;gap:9px;justify-content:flex-start;flex:0 0 auto}
.soc2{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center}
.soc2 svg{width:15px;height:15px}
.soc2.fb{background:#1877f2}.soc2.yt{background:#ff0000}.soc2.li{background:#404b52}.soc2.x{background:#3d4144}.soc2.ig{background:radial-gradient(circle at 30% 110%,#d8489b 0%,#af40aa 42%,#8b3ab8 82%)}
@media(max-width:900px){.ft-strip{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:16px 22px}.ft-socs{justify-content:flex-start;order:1}.ft-mail{text-align:left;order:2}.ft-sp{display:none}}



/* CATEGORY "About" — plain full-width accordion, footer Popular-Searches style */
.catabout{border-top:1px solid var(--line);margin-top:26px;width:100%;max-width:100%}
.catabout .ach{display:flex;justify-content:space-between;align-items:center;padding:9.5px 22px;color:#000;cursor:pointer;background:none;border:none}
.catabout .ach h3{font-size:14px;letter-spacing:.6px;font-weight:400;color:#000;margin:0;line-height:1.15}
.catabout .ach .pm{font-size:18px;line-height:1.1;color:#888;width:24px;text-align:center;flex:0 0 auto;background:none}
.catabout .ach .pm::before{content:"+"}
.catabout .aci.open .ach .pm::before{content:"\2212"}
.catabout .aci{border:none;background:none;box-shadow:none;border-radius:0}
.catabout .acb{display:none;padding:4px 22px 22px}
.catabout .aci.open .acb{display:block}
.catabout .ca-lead{font-size:12.5px;color:#41505c;line-height:1.75;margin:0 0 7px}
.catabout .ca-sec{margin-top:18px}
.catabout .ca-num{display:flex;align-items:baseline;gap:8px;margin:0 0 7px}
.catabout .ca-num i{font-style:normal;font-weight:700;font-size:12px;color:#8a939e;background:none;flex:0 0 auto}
.catabout .ca-num h4{margin:0;font-size:12.5px;font-weight:700;color:#000;letter-spacing:.8px;text-transform:uppercase;line-height:1.4}
.catabout .ca-p{font-size:12.5px;color:#41505c;line-height:1.75;margin:0 0 9px}
.catabout .ca-prod{border:none;border-top:1px solid #f0f3f6;border-radius:0;padding:12px 0 4px;background:none;margin:0}
.catabout .ca-prod>b{display:block;font-size:13.4px;color:#111;margin-bottom:4px;font-weight:700}
.catabout .ca-prod>p{font-size:12.4px;color:#5b6773;line-height:1.75;margin:0 0 7px}
.catabout .ca-tags{margin-bottom:7px;font-size:12.2px;line-height:1.85;color:#41505c}
.catabout .ca-tags span{color:#41505c}
.catabout .ca-tags span+span::before{content:"|";color:#d0d7de;margin:0 9px}
.catabout .ca-app{font-size:12.2px;color:#5b6773;line-height:1.75;margin:0;padding:0;border:none}
.catabout .ca-app b{color:#111}
.catabout .ca-grid{display:block}
.catabout .ca-fact{border:none;border-top:1px solid #f0f3f6;border-radius:0;padding:11px 0 3px;background:none}
.catabout .ca-fact b{display:block;font-size:13px;color:#111;margin-bottom:4px;font-weight:700}
.catabout .ca-fact p{font-size:12.3px;color:#5b6773;line-height:1.75;margin:0}
.catabout .ca-ind,.catabout .ca-why{display:block;font-size:12.2px;line-height:1.95;color:#41505c}
.catabout .ca-ind span,.catabout .ca-why span{background:none;border:none;border-radius:0;padding:0;font-weight:400;color:#41505c}
.catabout .ca-ind span+span::before,.catabout .ca-why span+span::before{content:"|";color:#d0d7de;margin:0 10px}
.catabout .ca-faq{border-top:1px solid #f0f3f6;border-bottom:none;padding:11px 0 3px}
.catabout .ca-faq b{display:block;font-size:13px;color:#111;margin-bottom:4px;font-weight:700}
.catabout .ca-faq p{font-size:12.3px;color:#5b6773;line-height:1.75;margin:0}
.catabout .ca-cta{margin-top:16px;background:none;border-top:1px solid #f0f3f6;border-radius:0;padding:13px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.catabout .ca-cta b{color:#111;font-size:13px;font-weight:700}
.catabout .ca-cta a{background:none;color:#e8353f;font-weight:700;font-size:12.8px;padding:0;border-radius:0;text-decoration:none}
.catabout .ca-cta a:hover{text-decoration:underline}
@media(max-width:900px){.catabout .ach{padding:2.5px 22px}.catabout .ach h3{font-size:12.5px;font-weight:400;color:#5a6672;line-height:1.15}.catabout .aci.open .ach h3{color:#222}.catabout .ach .pm{font-size:17px}.catabout .acb{padding:3px 22px 20px}}

/* ===== ACCOUNT PAGES (orders / wishlist / coins / addresses) ===== */
#page-track .ac-wrap,#page-wishlist .ac-wrap,#page-coins .ac-wrap,#page-addresses .ac-wrap,.ac-wrap{max-width:1080px!important;margin:0 auto!important;padding:0 22px 40px!important}
.ac-hero{background:linear-gradient(135deg,#0b1a2b,#14324f)!important;border-radius:16px;padding:30px 26px!important;color:#fff!important;margin-bottom:24px}
.ac-hero .kk{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#7fb2e0!important;margin-bottom:8px}
.ac-hero h1{font-size:29px!important;font-weight:800;color:#fff!important;margin:0 0 10px!important;line-height:1.2}
.ac-hero p{font-size:14.5px;color:#c7d6e6!important;line-height:1.7;margin:0;max-width:660px}
.ac-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.ac-stats div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:12px 14px}
.ac-stats b{display:block;font-size:19px;color:#fff!important;font-weight:800}
.ac-stats span{font-size:11.5px;color:#a9c6e2!important;letter-spacing:.4px}
.ac-k{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#e8353f!important;margin:30px 0 6px}
.ac-h{font-size:22px!important;font-weight:800;color:#0b1a2b!important;margin:0 0 8px!important}
.ac-p{font-size:14px;color:#4a5661!important;line-height:1.8;margin:0 0 18px}
.ac-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.ac-step{background:#fff;border:1px solid #e5eaef;border-radius:14px;padding:18px 16px;text-align:center;box-shadow:0 2px 10px rgba(8,19,31,.05)}
.ac-step .ic{width:52px;height:52px;margin:0 auto 11px;border-radius:14px;background:linear-gradient(135deg,#eef4fb,#dfeaf6);display:flex;align-items:center;justify-content:center}
.ac-step .ic svg{width:26px;height:26px;stroke:#14324f;fill:none;stroke-width:1.8}
.ac-step b{display:block;font-size:14px;color:#0b1a2b!important;margin-bottom:5px;font-weight:800}
.ac-step p{font-size:12.6px;color:#5b6773!important;line-height:1.6;margin:0}
.ac-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ac-card{background:#fff;border:1px solid #e5eaef;border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(8,19,31,.05)}
.ac-card .ic{font-size:24px;margin-bottom:9px;display:block}
.ac-card b{display:block;font-size:14.5px;color:#0b1a2b!important;margin-bottom:5px;font-weight:800}
.ac-card p{font-size:12.9px;color:#5b6773!important;line-height:1.65;margin:0}
.ac-ind{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ac-ib{display:flex;gap:11px;align-items:flex-start;background:#f7fafd;border:1px solid #e5eaef;border-radius:12px;padding:14px}
.ac-ib .em{font-size:20px;flex:0 0 auto}
.ac-ib b{display:block;font-size:13.6px;color:#0b1a2b!important;margin-bottom:3px;font-weight:800}
.ac-ib p{font-size:12.3px;color:#5b6773!important;line-height:1.55;margin:0}
.ac-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5eaef;border-radius:12px;overflow:hidden;font-size:13px}
.ac-tbl th{background:#0b1a2b!important;color:#fff!important;text-align:left;padding:12px 14px;font-size:12.5px;font-weight:800;letter-spacing:.4px}
.ac-tbl td{padding:11px 14px;border-top:1px solid #eef1f4;color:#41505c!important;line-height:1.6}
.ac-tbl td b{color:#0b1a2b!important}
.ac-faq{border-top:1px solid #eef1f4;padding:13px 0}
.ac-faq:last-of-type{border-bottom:1px solid #eef1f4}
.ac-faq b{display:block;font-size:13.8px;color:#0b1a2b!important;margin-bottom:5px;font-weight:800}
.ac-faq p{font-size:12.9px;color:#5b6773!important;line-height:1.7;margin:0}
.ac-cta{margin-top:26px;background:linear-gradient(135deg,#e8353f,#a5161e)!important;border-radius:16px;padding:26px 24px!important;text-align:center;color:#fff!important}
.ac-cta h3{font-size:20px!important;font-weight:800;margin:0 0 8px!important;color:#fff!important}
.ac-cta p{color:#ffdcde!important;font-size:13.5px;max-width:540px;margin:0 auto 16px;line-height:1.65}
#page-track .ac-cta a,#page-wishlist .ac-cta a,#page-coins .ac-cta a,#page-addresses .ac-cta a,.ac-cta a{display:inline-block;background:#fff!important;color:#c11a24!important;font-weight:800;font-size:13.5px;padding:12px 22px!important;border-radius:10px;text-decoration:none!important;margin:0 5px 6px}
.ac-empty{background:#fff;border:1px dashed #d7dde3;border-radius:16px;padding:34px 24px;text-align:center;margin-bottom:8px}
.ac-empty svg{width:78px;height:78px;margin-bottom:14px;stroke:#b9c4cf;fill:none;stroke-width:1.5}
.ac-empty b{display:block;font-size:17px;color:#0b1a2b!important;margin-bottom:7px;font-weight:800}
.ac-empty p{font-size:13.4px;color:#5b6773!important;line-height:1.7;margin:0 auto 16px;max-width:460px}
#page-wishlist .ac-empty a,#page-coins .ac-empty a,#page-addresses .ac-empty a,#page-track .ac-empty a{display:inline-block;background:#e8353f!important;color:#fff!important;font-weight:800;font-size:13px;padding:11px 20px!important;border-radius:9px;text-decoration:none!important}
@media(max-width:900px){.ac-stats{grid-template-columns:1fr 1fr}.ac-steps{grid-template-columns:1fr 1fr}.ac-cards,.ac-ind{grid-template-columns:1fr}}
@media(max-width:560px){.ac-wrap{padding:0 14px 30px!important}.ac-hero{padding:22px 18px!important}.ac-hero h1{font-size:23px!important}.ac-steps{grid-template-columns:1fr}}

/* ===== GST info page graphics ===== */
.gstg{margin:16px 0 20px}
.gstg-flow{background:#f7fafd;border:1px solid #e5eaef;border-radius:12px;padding:18px 16px}
.gstg-flow svg{width:100%;height:auto;display:block}
.gstg-cap{font-size:12px;color:#7a8794;text-align:center;margin-top:9px;line-height:1.5}
.gstg-bars{display:grid;gap:10px;background:#fff;border:1px solid #e5eaef;border-radius:12px;padding:18px}
.gstg-bar{display:grid;grid-template-columns:150px 1fr 78px;align-items:center;gap:10px;font-size:12.6px}
.gstg-bar .lb{color:#41505c;font-weight:600}
.gstg-bar .tr{background:#eef2f6;border-radius:7px;height:20px;overflow:hidden}
.gstg-bar .fi{height:100%;border-radius:7px;background:linear-gradient(90deg,#14324f,#2b6ea8)}
.gstg-bar .fi.red{background:linear-gradient(90deg,#e8353f,#a5161e)}
.gstg-bar .vl{text-align:right;font-weight:800;color:#0b1a2b;font-size:12.4px}
.inf-body table.gst-tb{width:100%;max-width:100%;border-collapse:collapse;font-size:13px;margin:8px 0 14px;table-layout:fixed;word-wrap:break-word}
.inf-body table.gst-tb th{background:#0b1a2b;color:#fff;text-align:left;padding:10px 10px;font-size:12.3px;font-weight:800;word-break:break-word}
.inf-body table.gst-tb td{padding:9px 10px;border-top:1px solid #eef1f4;color:#41505c;line-height:1.6;word-break:break-word}
.inf-body table.gst-tb td b{color:#0b1a2b}
.gst-note{background:#fff6f6;border:1px solid #f6d7d9;border-left:4px solid #e8353f;border-radius:9px;padding:13px 15px;font-size:13px;color:#41505c;line-height:1.75;margin:12px 0}
.gst-note b{color:#0b1a2b}
.gst-chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 14px}
.gst-chips span{font-size:12px;font-weight:600;color:#0b3a5b;background:#eef4fb;border:1px solid #dce8f5;border-radius:16px;padding:5px 12px}
@media(max-width:640px){.gstg-bar{grid-template-columns:104px 1fr 60px;font-size:11.4px}.inf-body table.gst-tb{font-size:11.6px}.inf-body table.gst-tb th,.inf-body table.gst-tb td{padding:8px 7px}}
h2.h1x{font-size:inherit;font-weight:inherit;color:inherit;margin:inherit;line-height:inherit}

/* arrows sit in a gutter beside the row, never over a card */
.mega-panel{position:relative}
.mega-prods{margin-left:50px;margin-right:50px}
.mega .row-arrow{right:6px;left:auto;top:auto;bottom:150px}
.mega .row-arrow.left{left:6px;right:auto;top:auto;bottom:150px}
.srow-wrap{position:relative;padding:0 40px}
.srow-wrap .sarrow{right:4px;left:auto}
.srow-wrap .sarrow.left{left:4px;right:auto}
@media(max-width:640px){
 .mega-prods{margin-left:42px;margin-right:42px}
 .mega .row-arrow{right:2px;bottom:150px}
 .mega .row-arrow.left{left:2px;bottom:150px}
 .srow-wrap{padding:0 34px}
}
/* ============ CART DRAWER + MISC ============ */
.drawer-bg{position:fixed;inset:0;background:rgba(15,25,35,.5);z-index:400;display:none}
.drawer-bg.on{display:block}
.drawer{position:fixed;top:0;right:-390px;width:min(390px,93vw);height:100%;background:#fff;z-index:401;transition:right .28s;display:flex;flex-direction:column}
.drawer.on{right:0;box-shadow:-8px 0 30px rgba(0,0,0,.25)}
.dr-h{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.dr-h b{font-size:16px}
.dr-x{background:none;border:none;font-size:22px;color:#999}
.dr-body{flex:1;overflow-y:auto;padding:14px 16px}
.dr-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f4;align-items:center}
.dr-item .n{flex:1;font-size:13px;font-weight:700}
.dr-item .n small{display:block;color:#999;font-weight:600}
.dr-qty{display:flex;align-items:center;gap:6px}
.dr-qty button{width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:5px;font-weight:800}
.dr-f{padding:16px;border-top:1px solid var(--line)}
.dr-tot{display:flex;justify-content:space-between;font-size:15px;font-weight:800;margin-bottom:12px}
.dr-view{display:block;width:100%;text-align:center;background:var(--red);color:#fff;font-weight:800;padding:12px;border-radius:8px;font-size:14px;border:none;margin-bottom:9px}
.dr-wa{display:block;width:100%;text-align:center;background:#25d366;color:#fff;font-weight:800;padding:12px;border-radius:8px;font-size:14px;border:none}
.empty{text-align:center;color:#999;padding:40px 0;font-size:13.5px}
.to-top{position:fixed;bottom:20px;left:20px;background:#14324f;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:399;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .15s;border:none}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{transform:translateY(-3px);background:#0b1a2b}
.to-top svg{width:22px;height:22px}
.to-top .tip{position:absolute;left:56px;top:50%;transform:translateY(-50%);background:#14202c;color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s}
.to-top .tip::before{content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#14202c}
.to-top:hover .tip{opacity:1}
.wa-float{position:fixed;bottom:20px;right:20px;background:#25d366;color:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:300;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.toast{position:fixed;bottom:86px;right:20px;background:#14202c;color:#fff;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:700;z-index:500;opacity:0;transform:translateY(8px);transition:all .25s}
.toast.on{opacity:1;transform:none}

/* ============ LOGO 3D COIN FLIP (Moglix effect) ============ */
.logo-flip{position:relative;height:38px;width:158px;perspective:520px}
.flip-card{position:absolute;inset:0;transform-style:preserve-3d;animation:coinflip 6s cubic-bezier(.45,0,.25,1) infinite}
.logo-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;backface-visibility:hidden}
.logo-face.fb{transform:rotateX(180deg)}
@keyframes coinflip{0%,40%{transform:rotateX(0deg)}50%,90%{transform:rotateX(180deg)}100%{transform:rotateX(360deg)}}
.yoi{background:#e9ecef;border-radius:4px;padding:4px 10px;display:inline-flex;align-items:center;gap:7px;line-height:1.05}
.yoi b{font-size:20px;color:var(--red)}
.yoi span{font-size:9.5px;color:#555;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;width:74px;line-height:1.2}

/* ============ LOGIN DROPDOWN (Moglix style) ============ */
.hitem.hlogin{position:relative}
.login-dd{position:absolute;top:calc(100% + 14px);right:-10px;width:250px;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:16px;display:none;z-index:350;cursor:default}
.hitem.hlogin.open .login-dd{display:block}
@media(hover:hover){.hitem.hlogin:hover .login-dd{display:block}}
.login-dd::before{content:'';position:absolute;top:-7px;right:26px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.login-dd .ld-t{font-size:13px;color:#555;margin-bottom:12px;line-height:1.5}
.login-dd .ld-btn{width:100%;background:var(--red);color:#fff;border:none;border-radius:8px;padding:11px;font-weight:800;font-size:13.5px;margin-bottom:10px}
.login-dd a{display:flex;align-items:center;gap:9px;padding:8px 2px;font-size:13.5px;font-weight:600;color:#333;border-top:1px solid #f2f4f6}
.login-dd a:hover{color:var(--red)}

/* ============ SEO ACCORDION (above footer, collapsed) ============ */
.acc{width:100%;padding:0 22px;background:#fff;border-top:1px solid var(--line)}
.acc-item{border-bottom:none}
.acc-h{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 2px;cursor:pointer}
.acc-h h3{font-size:15.5px;font-weight:800;color:#222}
.acc-h .pm{font-size:22px;color:#888;font-weight:600;flex:0 0 auto;width:24px;text-align:center}
.acc-b{display:none;padding:0 2px 18px;color:#41505c;font-size:13.5px;line-height:1.8}
.acc-b b{color:#222}
.acc-b ul{margin:8px 0 0 18px}
.acc-b li{margin-bottom:7px}
.acc-item.open .acc-b{display:block}
.acc-item.open .acc-h .pm::before{content:"\2212"}
.acc-item .acc-h .pm::before{content:"+"}
.acc-item.open .acc-h .pm{color:var(--red)}

/* ============ POPULAR SEARCHES (in footer, expandable) ============ */
.pop-wrap{border-top:1px solid var(--line)}
.pop-h{display:flex;justify-content:space-between;align-items:center;padding:11px 22px;color:#000;cursor:pointer}
.pop-h b{font-size:14px;letter-spacing:.6px}
.pop-h .pm{font-size:22px;color:#888;width:24px;text-align:center}
.pop-wrap.open .pop-h .pm::before{content:"\2212"}
.pop-wrap .pop-h .pm::before{content:"+"}
.pop-body{display:none;padding:2px 22px 22px}
.pop-wrap.open .pop-body{display:block}
.pop-body h5{color:#000;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;margin:14px 0 5px}
.pop-body p{font-size:12.5px;line-height:2;color:#111}
.pop-body a{color:#111}
.pop-body a:hover{color:var(--red);text-decoration:underline}
.pop-body .sp{color:#ccc;margin:0 8px}
/* SEO mesh in accordion — presentable, spaced link groups */
.seo-mesh h4{margin:6px 0 8px;font-size:15px;color:#0b1a2b;font-weight:800}
.seo-mesh h5{color:#8a1a20;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin:20px 0 9px;padding-bottom:6px;border-bottom:1px solid #eef1f4}
.seo-mesh p{font-size:12.8px;line-height:2.3;color:#3a4550;margin:0 0 6px}
.seo-mesh a{color:#455565;text-decoration:none;white-space:nowrap;padding:2px 0;border-radius:4px;transition:color .12s}
.seo-mesh a:hover{color:#e8353f;text-decoration:underline}
.seo-mesh .sp{color:#d0d7de;margin:0 10px;user-select:none}



/* ============ RECENT SEARCHES DROPDOWN (two shades) ============ */
.srch{position:relative}
.srch-dd{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.16);z-index:340;display:none;overflow:hidden}
.srch-dd.on{display:block}
.srch-dd .sd-h{background:#f1f3f5;padding:10px 16px;font-size:11.5px;font-weight:800;color:#666;letter-spacing:1px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.srch-dd .sd-h button{background:none;border:none;color:var(--blue);font-size:11.5px;font-weight:800}
.sd-row{display:flex;align-items:center;gap:11px;padding:11px 16px;font-size:13.5px;font-weight:600;color:#333;cursor:pointer;background:#fff;border-top:1px solid #f2f4f6}
.sd-row:hover{background:#fdf1f2}
.sd-row .ck{color:#98a2ac;font-size:15px}

/* ============ 3-DOT MENU (app + support, like Moglix) ============ */
.hdots{position:relative;cursor:pointer}
.dots-dd{position:absolute;top:calc(100% + 14px);right:-6px;width:240px;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:14px;display:none;z-index:350;cursor:default;text-align:left}
.hdots.open .dots-dd{display:block}
@media(hover:hover){.hdots:hover .dots-dd{display:block}}
.dots-dd::before{content:'';position:absolute;top:-7px;right:12px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.dots-dd::after{content:'';position:absolute;top:-20px;left:-10px;right:-10px;height:22px;background:transparent}
.dots-dd .dd-t{font-size:12px;font-weight:800;color:#666;letter-spacing:.8px;text-transform:uppercase;margin-bottom:9px}
.badge-app{display:flex;align-items:center;gap:9px;background:#000;color:#fff;border-radius:7px;padding:7px 11px;margin-bottom:8px;cursor:pointer}
.badge-app .bi{font-size:19px}
.badge-app small{display:block;font-size:8.5px;letter-spacing:.5px;color:#ccc;text-transform:uppercase}
.badge-app b{font-size:13px;line-height:1.1;display:block}
.dots-dd a{display:flex;align-items:center;gap:9px;padding:9px 2px;font-size:13.5px;font-weight:600;color:#333;border-top:1px solid #f2f4f6}
.dots-dd a:hover{color:var(--red)}

/* ============ CATEGORY HOVER DROPDOWN ============ */
.citem{position:relative}
.cat-dd{position:absolute;top:calc(100% + 2px);left:0;min-width:200px;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px 0;display:none;z-index:330;text-align:left}
.cat-dd::before{content:'';position:absolute;top:-6px;left:26px;transform:rotate(45deg);width:12px;height:12px;background:#fff}
.cat-dd a{display:block;padding:8px 16px;font-size:13px;font-weight:600;color:#333;white-space:nowrap}
.cat-dd a:hover{background:#fdf1f2;color:var(--red)}
.cat-dd a.va{color:var(--red);font-weight:800;border-top:1px solid #f2f4f6;margin-top:4px}
/* last few items open leftward so they don't overflow right edge */
.citem:nth-last-child(-n+3) .cat-dd{left:auto;right:0}
.citem:nth-last-child(-n+3) .cat-dd::before{left:auto;right:26px}
@media(min-width:1000px){.catrow-in{overflow:visible;flex-wrap:nowrap}.catrow{z-index:250}}
.citem.open .cat-dd{display:block}
@media(hover:hover){.citem:hover .cat-dd{display:block}}
.catrow-in{overflow-x:auto;overflow-y:visible}
@media(min-width:1000px){.catrow-in{overflow:visible}}
@media(max-width:999px){.cat-dd{position:fixed;left:8px;right:8px;top:auto;min-width:0;width:auto}}


/* scroll-row arrows */
.scrollwrap{position:relative}
.sarrow{position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #e2e5e8;font-size:14px;color:#444;box-shadow:0 2px 8px rgba(0,0,0,.22);z-index:6;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sarrow.left{right:auto;left:-11px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ===== PEOPLE LOVE US (Reviews) ===== */
.lovesec{background:#fff;padding:44px 16px 50px;border-top:1px solid var(--line)}
.lovesec .lv-in{max-width:1240px;margin:0 auto}
.lv-head{text-align:center;margin-bottom:26px}
.lv-head h2{font-size:26px;font-weight:800;color:#1a1a1a}
.lv-head p{color:#555;margin-top:8px;font-size:14.5px}
.lv-head b{color:#111}
.lv-star{color:#0f8a4f;font-weight:800}
.lv-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.lv-col h3{text-align:center;font-size:20px;font-weight:800;color:#111;margin-bottom:16px}
.lv-card{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:24px 26px;box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:pointer;min-height:310px;display:flex;flex-direction:column;justify-content:space-between;transition:box-shadow .2s}
.lv-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.09)}
/* B79: the rotating review card replaces its own innerHTML every 7s. With no
   transition the text simply snapped to the next review, which read as a
   flick. A short fade on the freshly inserted content smooths it. */
@keyframes lvIn{from{opacity:0}to{opacity:1}}
.lv-card>div{animation:lvIn .3s ease both}
@media(prefers-reduced-motion:reduce){.lv-card>div{animation:none}}
.lv-stars{color:#0f8a4f;font-size:17px;letter-spacing:3px;margin-bottom:12px}
.lv-txt{color:#333;font-size:13.6px;line-height:1.75}
.lv-txt b{color:#111}
.lv-who{display:flex;align-items:center;gap:12px;margin-top:18px;position:relative}
.lv-av{width:44px;height:44px;border-radius:50%;background:#eceff3;display:flex;align-items:center;justify-content:center;color:#5b3b8c;font-weight:800;font-size:16px}
.lv-nm b{display:block;font-size:13.5px;color:#111;letter-spacing:.3px}
.lv-nm small{color:#777;font-size:12px}
.lv-q{position:absolute;right:2px;top:4px;color:#b9b9b9;font-size:26px;font-family:Georgia,serif;line-height:1}
.lv-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.lv-dots span{width:8px;height:8px;border-radius:6px;background:#d4d4d4;cursor:pointer;transition:all .25s}
.lv-dots span.on{width:22px;background:#1a1a1a}
.lv-cta{text-align:center;margin-top:30px}
.lv-btn{background:var(--red);color:#fff;border:none;border-radius:8px;padding:15px 34px;font-size:15.5px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(217,35,45,.32);transition:transform .15s}
.lv-btn:hover{transform:translateY(-2px);background:var(--red-dark)}
@media(max-width:860px){.lv-cols{grid-template-columns:1fr}}
/* ===== CUSTOMER SPEAK / REVIEWS PAGE ===== */
.cs-hero{background:linear-gradient(120deg,#0f2b4a,#1d4a7a 55%,#173b63);color:#fff;padding:44px 22px 46px;text-align:center}
.cs-kick{display:inline-block;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 16px;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#d8e6f5;margin-bottom:14px}
.cs-hero h1{font-size:34px;font-weight:800;letter-spacing:-.5px}
.cs-hero p{color:#cfe0f2;margin:12px auto 0;font-size:14.5px;line-height:1.7;max-width:720px}
.cs-gwrap{width:100%;padding:0 22px;margin-top:-30px}
.cs-google{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 26px rgba(0,0,0,.1);padding:20px 26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}
.cs-g-l{display:flex;align-items:center;gap:11px}
.cs-g-l span{display:flex;flex-direction:column;line-height:1.2}
.cs-g-l b{font-size:16px;color:#222}
.cs-g-l small{font-size:11.5px;color:var(--muted)}
.cs-g-r{display:flex;align-items:center;gap:14px;padding:0 26px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.cs-g-num{font-size:38px;font-weight:800;color:#1a1a1a;line-height:1}
.cs-g-stars{color:#fbbc05;font-size:17px;letter-spacing:2px}
.cs-g-r small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.cs-write{background:#fff;border:1.5px solid var(--blue);color:var(--blue);border-radius:8px;padding:10px 20px;font-size:13px;font-weight:800}
.cs-write:hover{background:var(--blue);color:#fff}
.cs-sec{width:100%;padding:44px 22px 6px;text-align:center;max-width:1400px;margin:0 auto}
.cs-kick2{display:block;color:var(--red);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.cs-sec h2{font-size:26px;font-weight:800;color:#1a1a1a;margin-bottom:8px}
.cs-lead{color:var(--muted);font-size:14px;margin-bottom:20px}
.cs-marq{overflow:hidden;margin:22px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cs-track{display:flex;gap:16px;width:max-content;animation:csScroll 70s linear infinite}
.cs-marq.rev .cs-track{animation-direction:reverse;animation-duration:82s}
.cs-marq:hover .cs-track{animation-play-state:paused}
@keyframes csScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cs-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;width:400px;flex:0 0 400px;text-align:left;box-shadow:0 1px 4px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
.cs-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.09);transform:translateY(-3px)}
.cs-card .st{color:#fbbc05;font-size:15px;letter-spacing:2px;margin-bottom:10px}
.cs-card .tx{color:#41505c;font-size:13.4px;line-height:1.75;min-height:140px}
.cs-card .tx b{color:#1a1a1a}
.cs-who{display:flex;align-items:center;gap:11px;margin-top:14px;padding-top:13px;border-top:1px solid #f0f2f4}
.cs-av{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#eef2f7;color:#2b5c96;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.cs-who b{display:block;font-size:13px;color:#1a1a1a}
.cs-who small{color:var(--muted);font-size:11.5px}
.cs-who .vtag{margin-left:auto;color:#0f8a4f;font-size:11px;font-weight:800}
.cs-filters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cs-sp{width:1px;background:var(--line);margin:0 6px}
.rv-tab{border:1.5px solid #d8dde3;background:#fff;border-radius:20px;padding:7px 18px;font-size:13px;font-weight:700;color:#333;cursor:pointer}
.rv-tab.on{background:#173b63;border-color:#173b63;color:#fff}
.cs-summary{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:20px;text-align:left;align-items:center}
.cs-bars{display:flex;flex-direction:column;gap:7px}
.rv-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#444}
.rv-bar .tr{flex:1;height:8px;background:#eef0f2;border-radius:5px;overflow:hidden}
.rv-bar .fl{height:100%;background:#fbbc05;border-radius:5px}
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center;border-left:1px solid var(--line);padding-left:22px}
.cs-stats b{display:block;font-size:23px;font-weight:800;color:#1a1a1a}
.cs-stats small{color:var(--muted);font-size:11.5px}
.rv-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.rv-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.rv-item .top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rv-item .pill{background:#0f8a4f;color:#fff;font-weight:800;font-size:12px;border-radius:5px;padding:3px 8px}
.rv-item .who{font-weight:800;color:#111;font-size:13.5px}
.rv-item .meta{color:#8b949d;font-size:11.5px}
.rv-item .tag{margin-left:auto;background:#eef4fb;color:#2b5c96;font-size:11px;font-weight:800;border-radius:5px;padding:3px 9px}
.rv-item .tag.seller{background:#f3eefb;color:#5b3b8c}
.rv-item p{color:#41505c;font-size:13.4px;line-height:1.8;margin-top:11px}
.rv-item p b{color:#1a1a1a}
.rv-vf{color:#0f8a4f;font-size:11.5px;font-weight:700;margin-top:9px;display:inline-block}
.cs-pager{display:flex;gap:7px;justify-content:center;align-items:center;margin:24px 0 8px;flex-wrap:wrap}
.cs-pager button{border:1.5px solid #d8dde3;background:#fff;color:#333;border-radius:7px;min-width:36px;height:36px;font-size:13px;font-weight:700;cursor:pointer;padding:0 10px}
.cs-pager button.on{background:var(--red);border-color:var(--red);color:#fff}
.cs-pager button:disabled{opacity:.42;cursor:default}
.cs-cta{background:linear-gradient(120deg,#0f2b4a,#1d4a7a);color:#fff;text-align:center;padding:42px 22px 46px;margin-top:34px}
.cs-cta h2{font-size:26px;font-weight:800}
.cs-cta p{color:#cfe0f2;margin:10px auto 20px;max-width:640px;font-size:14px;line-height:1.7}
.cs-cta-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){.rv-list{grid-template-columns:1fr}.cs-summary{grid-template-columns:1fr}.cs-stats{border-left:none;border-top:1px solid var(--line);padding:16px 0 0}.cs-card{width:320px;flex:0 0 320px}.cs-g-r{border:none;padding:0}}

/* ===== PRODUCT PAGE EXTRAS ===== */
.pdfast{background:#3a3a3a;border-radius:14px;margin:26px 16px;padding:20px 22px;max-width:1400px}
@media(min-width:1432px){.pdfast{margin:26px auto}}
.pdfast-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pdfast-top h2{color:#fff;font-size:20px;font-weight:800}
.pdfast-top .upd2{background:#fff;color:var(--red);border:none;font-weight:800;font-size:12px;padding:8px 16px;border-radius:6px;cursor:pointer}
.pdfast .scrollwrap{position:relative}
.pdfast .shadow-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.pdfast .spc{background:#fff;border-radius:10px;min-width:225px}
.cmpsec{background:#fff;border:1px solid var(--line);border-radius:14px;margin:26px 16px;padding:22px;max-width:1400px;overflow:hidden}
@media(min-width:1432px){.cmpsec{margin:26px auto}}
.cmpsec h2{font-size:20px;font-weight:800;color:#1a1a1a;margin-bottom:16px}
.cmp-scroll{overflow-x:auto}
.cmp-tb{border-collapse:collapse;width:100%;min-width:940px}
.cmp-tb td{padding:12px 14px;font-size:13.5px;color:#333;border-top:1px solid #eef0f2;vertical-align:middle;min-width:170px}
.cmp-tb tr:first-child td{border-top:none;vertical-align:top}
.cmp-tb td.cmp-lbl{font-weight:700;color:#222;background:#f7f8f9;min-width:120px;width:130px}
.cmp-tb tr:nth-child(even) td{background:#fcfcfd}
.cmp-tb tr:nth-child(even) td.cmp-lbl{background:#f3f5f7}
.cmp-tb td.cur{background:#fdeef0 !important}
.cmp-p{position:relative;text-align:left}
.cmp-tag{position:absolute;top:8px;left:20px;background:#555;color:#fff;font-size:11px;font-weight:700;border-radius:4px;padding:3px 9px;z-index:2}
.cmp-img{width:150px;height:150px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #f0f0f0;border-radius:8px;margin-bottom:10px;cursor:pointer;overflow:hidden}
.cmp-img img{width:100%;height:100%;object-fit:contain}
.cmp-img svg{width:110px;height:110px}
.cmp-nm{display:block;color:var(--blue);font-weight:700;font-size:13.5px;line-height:1.45;margin-bottom:8px;max-width:230px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp-nm:hover{text-decoration:underline}
.cmp-pr{font-size:17px;font-weight:800;color:#111;margin-bottom:10px}
.cmp-cart{background:var(--red);color:#fff;border:none;border-radius:6px;padding:11px 18px;font-size:12.5px;font-weight:800;letter-spacing:.4px;cursor:pointer}
.cmp-cart:hover{background:var(--red-dark)}
.cmp-rate{background:#0f8a4f;color:#fff;font-weight:800;font-size:12px;border-radius:4px;padding:3px 8px}
.pdtrust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 8px;padding:30px 16px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1400px}
@media(min-width:1432px){.pdtrust{margin:30px auto 8px}}
.pdt-i{padding:0 22px;border-left:1px solid #eee}
.pdt-i:first-child{border-left:none}
.pdt-i .ic{font-size:26px;margin-bottom:10px;display:block;filter:hue-rotate(0)}
.pdt-i h4{font-size:15.5px;font-weight:800;color:#1a1a1a;margin-bottom:7px}
.pdt-i p{color:#666;font-size:13px;line-height:1.55}
.pdt-i p b{color:#333}
.pdt-wa{display:flex;align-items:center;gap:7px;color:#333;font-size:13.5px;font-weight:600;margin-top:4px}
.pdt-wa .wa{width:20px;height:20px;border-radius:50%;background:#25d366;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
@media(max-width:960px){.pdtrust{grid-template-columns:1fr 1fr}.pdt-i{border-left:none;padding:12px 8px}}
@media(max-width:560px){.pdtrust{grid-template-columns:1fr}}

/* ===== FOOTER STRIP FIX ===== */
.ft-sp{display:none}


@media(max-width:1050px){.ft-in{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.ft-in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-sp{display:none}}

/* ===== TRUST STRIP CLICKABLE ===== */
.trust-in .t{cursor:pointer;border-radius:10px;padding:8px 6px;transition:all .18s}
.trust-in .t:hover{background:#fafbfc;transform:translateY(-2px)}
.trust-in .t:hover b{color:var(--red)}
/* ===== INFO PAGES ===== */
.inf-hero{background:linear-gradient(115deg,#15212e,#25445e);color:#fff;border-radius:12px;padding:26px 28px;margin-bottom:22px;display:flex;align-items:center;gap:20px}
.inf-ic{font-size:44px;line-height:1;flex:0 0 auto}
.inf-hero h1{font-size:25px;font-weight:800;line-height:1.25}
.inf-hero p{color:#cfe0f2;margin-top:7px;font-size:14px;line-height:1.6}
.inf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.inf-card{border:1px solid var(--line);border-radius:11px;padding:17px 18px;background:#fff}
.inf-card .n{width:26px;height:26px;border-radius:7px;background:#fdeef0;color:var(--red);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.inf-card h4{font-size:14.5px;font-weight:800;color:#1a1a1a;margin-bottom:6px}
.inf-card p{color:#5a6672;font-size:13px;line-height:1.65}
.inf-body{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.inf-body h3{font-size:16px;font-weight:800;color:#1a1a1a;margin:18px 0 8px}
.inf-body h3:first-child{margin-top:0}
.inf-body p{color:#41505c;font-size:13.8px;line-height:1.85;margin-bottom:10px}
.inf-body ul{margin:6px 0 12px 20px}
.inf-body li{color:#41505c;font-size:13.8px;line-height:1.8;margin-bottom:6px}
.inf-body b{color:#1a1a1a}
.inf-tb{border-collapse:collapse;width:100%;margin:10px 0 14px}
.inf-tb td,.inf-tb th{border:1px solid var(--line);padding:9px 12px;font-size:13.2px;text-align:left;color:#41505c}
.inf-tb th{background:#f7f8f9;color:#1a1a1a;font-weight:700}
.inf-cta{margin-top:22px;background:#fdeef0;border:1px solid #f6d5d8;border-radius:12px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.inf-cta b{display:block;font-size:15.5px;color:#1a1a1a;margin-bottom:4px}
.inf-cta small{color:#5a6672;font-size:13px}
.inf-btns{display:flex;gap:10px;flex-wrap:wrap}
.inf-b1{background:var(--red);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:13px;font-weight:800;cursor:pointer}
.inf-b1:hover{background:var(--red-dark)}
.inf-b2{background:#fff;border:1.5px solid #25d366;color:#128c3d;border-radius:8px;padding:11px 18px;font-size:13px;font-weight:800;display:inline-flex;align-items:center}
@media(max-width:900px){.inf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.inf-grid{grid-template-columns:1fr}.inf-hero{flex-direction:column;text-align:center}}
/* ===== EXPANDABLE SECTIONS — lighter + tighter (50% less space) ===== */
.acc{padding:0 22px}
.acc-h{padding:8px 2px}
.acc-h h3{font-size:13px;font-weight:500;color:#5a6672;letter-spacing:.2px}
.acc-h .pm{font-size:17px}
.acc-b{padding:0 2px 9px;font-size:13px;line-height:1.7}
.acc-item.open .acc-h h3{color:#222}
.pop-h{padding:8px 22px}
.pop-h b{font-size:12.5px;font-weight:500;color:#5a6672;letter-spacing:.3px}
.pop-h .pm{font-size:17px}
.pop-wrap.open .pop-h b{color:#222}
.pop-body{padding:1px 22px 11px}
.pop-body h5{font-size:11px;margin:8px 0 3px}
.pop-body p{font-size:12px;line-height:1.85}

/* ===== PRODUCT OVERVIEW / FEATURES / APPLICATIONS ===== */
.pd-ovw{margin-top:18px}
.pd-ovw .ov-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:14px}
.pd-ovw h3{font-size:16px;font-weight:800;color:#1a1a1a;margin-bottom:10px}
.pd-ovw p{color:#41505c;font-size:13.6px;line-height:1.85}
.pd-ovw ul{margin:4px 0 0 4px;list-style:none}
.pd-ovw li{color:#41505c;font-size:13.5px;line-height:1.7;margin-bottom:9px;padding-left:24px;position:relative}
.pd-ovw li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:#e9f6ee;border:1.5px solid #0f8a4f}
.pd-ovw li::after{content:'✓';position:absolute;left:3px;top:4px;font-size:9px;color:#0f8a4f;font-weight:800}
.pd-ovw .ap li::before{background:#eef4fb;border-color:var(--blue)}
.pd-ovw .ap li::after{content:'▸';left:4px;top:3px;font-size:10px;color:var(--blue)}
.pd-ovw .ov-note{background:#fdeef0;border:1px solid #f6d5d8;border-radius:10px;padding:14px 18px;font-size:13px;color:#41505c;line-height:1.7}
.pd-ovw .ov-note b{color:#1a1a1a}
.pd-quote{background:#fff8e6;border:1px solid #ffe0a3;border-radius:8px;padding:10px 14px;font-size:13px;color:#7a5b00;font-weight:700;margin-top:6px}

/* ===== EMPTY CATEGORY (coming soon) ===== */
.soon-box{background:#fff;border:1px dashed #c9d2da;border-radius:12px;padding:30px 26px;text-align:center;margin-top:6px}
.soon-box b{display:block;font-size:17px;font-weight:800;color:#1a1a1a;margin-bottom:8px}
.soon-box p{color:var(--muted);font-size:13.5px;line-height:1.8;max-width:640px;margin:0 auto}
.soon-box a{color:var(--red);font-weight:700}
.cat-empty{background:#fff;border:1px dashed #c9d2da;border-radius:12px;padding:44px 26px;text-align:center;grid-column:1/-1}
.cat-empty b{display:block;font-size:18px;font-weight:800;color:#1a1a1a;margin-bottom:10px}
.cat-empty p{color:var(--muted);font-size:14px;line-height:1.8;max-width:600px;margin:0 auto 16px}

/* ===== BACK BAR ===== */
.backbar{position:relative;z-index:60;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:9px 22px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.backbar.hide{display:none}
.backbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--red);color:var(--red);border-radius:8px;padding:7px 15px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.backbtn:hover{background:var(--red);color:#fff}
.backbtn .ar{font-size:15px;line-height:1}
.backtrail{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.backtrail a{color:#41505c}
.backtrail a:hover{color:var(--red);text-decoration:underline}
.backtrail .bsep{margin:0 7px;color:#c4ccd4}
.backtrail .bcur{color:#1a1a1a;font-weight:700}
.backhome{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:700;color:#41505c;cursor:pointer;white-space:nowrap}
.backhome:hover{color:var(--red)}
@media(max-width:700px){.backbar{padding:8px 14px;gap:10px}.backtrail{display:none}}

/* ===== PINCODE MODAL ===== */
.pinmask{position:fixed;inset:0;background:rgba(20,24,28,.55);display:none;align-items:flex-start;justify-content:center;z-index:900;padding:70px 16px;backdrop-filter:blur(2px)}
.pinmask.on{display:flex;animation:pinFade .2s ease}
@keyframes pinFade{from{opacity:0}to{opacity:1}}
.pinbox{background:#fff;border-radius:16px;width:100%;max-width:560px;overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:pinUp .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pinUp{from{transform:translateY(-26px);opacity:0}to{transform:translateY(0);opacity:1}}
.pinx{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:#3a3a3a;color:#fff;border:none;font-size:14px;cursor:pointer;z-index:2}
.pinx:hover{background:#000}
.pinhead{background:linear-gradient(160deg,#fdf3cf,#fbeab0);padding:22px 24px 18px;text-align:center;position:relative;overflow:hidden}
.pinhead::after{content:'';position:absolute;inset:-40% -10% auto;height:200%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0 10deg,transparent 10deg 20deg);opacity:.35;pointer-events:none}
.pinhead h3{font-size:17px;font-weight:800;color:#2a2a2a;position:relative;z-index:1}
.pinart{position:relative;z-index:1;margin-bottom:8px}
.pk-pin{animation:pinBob 1.9s ease-in-out infinite;transform-origin:60px 46px}
@keyframes pinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pk-box{animation:pkPulse 1.9s ease-in-out infinite}
@keyframes pkPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
.pinbody{background:#fff;margin:-10px 14px 16px;border-radius:12px;padding:20px 20px 18px;position:relative;z-index:2;box-shadow:0 4px 18px rgba(0,0,0,.07)}
.pinlbl{display:block;font-size:14.5px;font-weight:700;color:#222;margin-bottom:12px}
.pinrow{display:flex;align-items:center;border:1px solid #dfe3e8;border-radius:9px;padding:4px 4px 4px 12px;transition:border-color .15s}
.pinrow:focus-within{border-color:var(--red)}
.pinico{color:var(--red);font-size:15px;margin-right:8px}
.pinrow input{flex:1;border:none;outline:none;font-size:15px;font-weight:600;color:#222;padding:11px 0;background:transparent}
.pinbtn{background:#fdeef0;color:var(--red);border:none;border-radius:7px;padding:11px 20px;font-size:13px;font-weight:800;cursor:pointer;letter-spacing:.4px}
.pinbtn.ready{background:var(--red);color:#fff}
.pinbtn:hover{opacity:.9}
.pinmsg{font-size:12.8px;margin-top:9px;min-height:18px;line-height:1.5}
.pinmsg.ok{color:#0f8a4f;font-weight:700}
.pinmsg.err{color:var(--red);font-weight:700}
.pinloc{display:flex;align-items:center;gap:9px;color:var(--blue);font-size:14px;font-weight:700;margin-top:14px;padding-top:14px;border-top:1px solid #f0f2f4;cursor:pointer}
.pinloc:hover{text-decoration:underline}
.pinloc .dot{font-size:16px}
.loc{cursor:pointer}
.loc:hover .l1{color:var(--red)}
@media(max-width:560px){.pinmask{padding:40px 10px}.pinbody{margin:-10px 10px 12px;padding:16px}}

/* ===== HEADER / CATEGORY DROPDOWN FIX (large screens) ===== */
.catrow{z-index:250}
@media(min-width:1000px){.catrow{overflow:visible !important}.catrow-in{overflow:visible !important;flex-wrap:nowrap}}
@media(max-width:999px){.catrow{overflow:visible !important}.catrow-in{overflow-x:auto !important;overflow-y:visible !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch}}
.citem{position:relative;z-index:1}
.citem:hover{z-index:400}
.cat-dd{z-index:420 !important}
.citem::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px;display:none}
@media(hover:hover){.citem:hover::after{display:block}}
.hitem.hlogin{z-index:1}
.hitem.hlogin:hover{z-index:400}
.login-dd{z-index:430 !important}
.hitem.hlogin::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px;display:none}
@media(hover:hover){.hitem.hlogin:hover::after{display:block}}
.hdots{position:relative;z-index:1}
.hdots:hover,.hdots.open{z-index:400}
/* after a selection: keep it shut until the pointer leaves */
.hdots.shut .dots-dd{display:none!important}
.dots-dd{z-index:440 !important}
@media(min-width:1000px){.catrow-in{overflow:visible !important}.hdr-in{overflow:visible}}

/* ===== ARTICLE PAGES ===== */
.art-hero{background:linear-gradient(120deg,#0f2b4a,#1d4a7a 60%,#173b63);color:#fff;padding:44px 22px 48px;display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.art-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 30%,rgba(255,255,255,.09),transparent 55%)}
.art-hero-in{position:relative;z-index:2;max-width:760px}
.art-kick{display:inline-block;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 16px;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#d8e6f5;margin-bottom:14px}
.art-hero h1{font-size:32px;font-weight:800;line-height:1.22;letter-spacing:-.4px}
.art-hero p{color:#cfe0f2;margin-top:12px;font-size:15px;line-height:1.75}
.art-stats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.art-stats div{min-width:96px}
.art-stats b{display:block;font-size:27px;font-weight:800;color:#fff;line-height:1}
.art-stats small{color:#a9c4dd;font-size:11.5px;letter-spacing:.4px}
.art-hero-art{position:relative;z-index:2;display:flex;justify-content:center;align-items:center}
.art-hero-art svg{max-width:100%;height:auto}
.art-wrap{max-width:1240px;margin:0 auto;padding:34px 22px 10px;display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
.art-toc{position:sticky;top:86px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 14px}
.art-toc h4{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.art-toc a{display:block;font-size:12.8px;color:#41505c;padding:6px 8px;border-radius:7px;line-height:1.45;border-left:2px solid transparent}
.art-toc a:hover{background:#fdf1f2;color:var(--red);border-left-color:var(--red)}
.art-body{min-width:0}
.art-body h2{font-size:23px;font-weight:800;color:#1a1a1a;margin:34px 0 12px;scroll-margin-top:96px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:16.5px;font-weight:800;color:#1a1a1a;margin:22px 0 8px}
.art-body p{color:#41505c;font-size:14.2px;line-height:1.92;margin-bottom:13px}
.art-body b{color:#1a1a1a}
.art-body ul,.art-body ol{margin:6px 0 15px 20px}
.art-body li{color:#41505c;font-size:14px;line-height:1.85;margin-bottom:8px}
.art-body table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:13.4px}
.art-body th,.art-body td{border:1px solid var(--line);padding:10px 13px;text-align:left;color:#41505c;vertical-align:top}
.art-body th{background:#f7f8f9;color:#1a1a1a;font-weight:700}
.art-body tr:nth-child(even) td{background:#fcfcfd}
.art-note{background:#fdeef0;border-left:4px solid var(--red);border-radius:0 10px 10px 0;padding:16px 20px;margin:16px 0 20px}
.art-note p{margin:0;font-size:13.6px;line-height:1.8}
.art-tip{background:#e9f6ee;border-left:4px solid #0f8a4f;border-radius:0 10px 10px 0;padding:16px 20px;margin:16px 0 20px}
.art-tip p{margin:0;font-size:13.6px;line-height:1.8}
.art-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 22px}
.art-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff;transition:transform .2s,box-shadow .2s}
.art-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.art-card .ic{font-size:24px;display:block;margin-bottom:9px}
.art-card h4{font-size:14.5px;font-weight:800;color:#1a1a1a;margin-bottom:6px}
.art-card p{font-size:12.9px;line-height:1.68;margin:0;color:#5a6672}
.chart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:16px 0 22px}
.chart h4{font-size:14.5px;font-weight:800;color:#1a1a1a;margin-bottom:4px}
.chart .cap{font-size:12px;color:var(--muted);margin-bottom:16px}
.bar{display:grid;grid-template-columns:150px 1fr 62px;gap:12px;align-items:center;margin-bottom:11px;font-size:12.8px;color:#41505c}
.bar .tr{height:16px;background:#eef1f4;border-radius:9px;overflow:hidden}
.bar .fl{height:100%;border-radius:9px;width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.bar .vv{text-align:right;font-weight:800;color:#1a1a1a}
.art-body.shown .bar .fl{width:var(--w)}
.rings{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin:16px 0 22px}
.ring{text-align:center;width:132px}
.ring svg{transform:rotate(-90deg)}
.ring .rc{stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1)}
.art-body.shown .ring .rc{stroke-dashoffset:var(--off)}
.ring b{display:block;margin-top:-64px;font-size:19px;font-weight:800;color:#1a1a1a}
.ring small{display:block;margin-top:40px;font-size:11.8px;color:var(--muted);line-height:1.45}
.tline{position:relative;margin:16px 0 24px;padding-left:34px}
.tline::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(#d9232d,#f0b8bb)}
.tstep{position:relative;margin-bottom:20px}
.tstep::before{content:'';position:absolute;left:-29px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--red);animation:tpulse 2.4s ease-out infinite}
.tstep:nth-child(2)::before{animation-delay:.4s}
.tstep:nth-child(3)::before{animation-delay:.8s}
.tstep:nth-child(4)::before{animation-delay:1.2s}
.tstep:nth-child(5)::before{animation-delay:1.6s}
@keyframes tpulse{0%{box-shadow:0 0 0 0 rgba(217,35,45,.35)}70%{box-shadow:0 0 0 9px rgba(217,35,45,0)}100%{box-shadow:0 0 0 0 rgba(217,35,45,0)}}
.tstep b{display:block;font-size:14.5px;color:#1a1a1a;margin-bottom:3px}
.tstep span{font-size:11.5px;color:var(--red);font-weight:800;letter-spacing:.5px}
.tstep p{margin:5px 0 0;font-size:13.4px;line-height:1.75}
.faq{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0 22px;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;padding:14px 18px;font-size:14px;font-weight:700;color:#1a1a1a;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--red);font-size:19px;font-weight:800;line-height:1}
.faq details[open] summary{background:#fdf1f2}
.faq p{padding:0 18px 15px;margin:0;font-size:13.5px;line-height:1.8;color:#41505c}
.art-cta{background:linear-gradient(120deg,#0f2b4a,#1d4a7a);color:#fff;text-align:center;padding:40px 22px 44px;margin-top:30px}
.art-cta h2{font-size:25px;font-weight:800}
.art-cta p{color:#cfe0f2;margin:10px auto 20px;max-width:660px;font-size:14px;line-height:1.7}
.art-cta-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.art-b3{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:800;cursor:pointer}
.art-b3:hover{background:#fff;color:#0f2b4a}
.art-prod{max-width:1400px;margin:0 auto;padding:34px 22px 42px}
.art-prod h2{font-size:21px;font-weight:800;color:#1a1a1a;margin-bottom:16px}
.art-prod .shadow-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.art-prod .spc{min-width:225px;background:#fff}
@media(max-width:1000px){.art-wrap{grid-template-columns:1fr}.art-toc{position:static}.art-hero{grid-template-columns:1fr}.art-hero-art{display:none}.art-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.art-cards{grid-template-columns:1fr}.art-hero h1{font-size:25px}.bar{grid-template-columns:104px 1fr 50px}}

/* ===== HUMAN CHECK ===== */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 18px}
.tbl-scroll::-webkit-scrollbar{height:6px}
.tbl-scroll::-webkit-scrollbar-thumb{background:#ccd3da;border-radius:3px}
@media(max-width:640px){.tbl-scroll table{min-width:480px;margin:0}}
.lead-status{display:none;margin-top:14px;padding:13px 15px;border-radius:9px;font-size:14px;line-height:1.65}
.lead-status.wait{display:block;background:#f4f6f8;color:#43505c;border:1px solid #dbe2e8}
.lead-status.good{display:block;background:#eaf7ee;color:#14663a;border:1px solid #b7e2c6}
.lead-status.bad{display:block;background:#fdeded;color:#8c1d1d;border:1px solid #f3c2c2}
.lead-status a.lead-wa{display:inline-block;margin-top:9px;margin-right:14px;font-weight:800;color:#0b7a3e;text-decoration:underline}
.lead-status.bad a.lead-wa{color:#8c1d1d}
.lead-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

.hcheck{background:#f7f9fb;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:14px}
.hc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hc-head span{font-size:12.5px;font-weight:800;color:#41505c;letter-spacing:.3px}
.hc-new{background:none;border:none;color:var(--blue);font-size:12px;font-weight:700;cursor:pointer}
.hc-new:hover{text-decoration:underline}
.hc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hc-q{background:#fff;border:1px dashed #c2ccd6;border-radius:8px;padding:10px 16px;font-size:16px;font-weight:800;color:#1a1a1a;letter-spacing:1px;user-select:none}
.hc-row input{width:92px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;font-weight:700;text-align:center}
.hc-row input:focus{outline:none;border-color:var(--blue)}
.hc-ok{font-size:19px;font-weight:800;min-width:22px}
.hc-ok.good{color:#0f8a4f}
.hc-ok.bad{color:var(--red)}
.hc-note{display:block;margin-top:9px;font-size:11.8px;color:var(--muted)}
.hc-note.bad{color:var(--red);font-weight:700}
.tk-err{background:#fdeef0;border:1px solid #f6d5d8;color:#b01a22;border-radius:8px;padding:11px 14px;font-size:13px;font-weight:700;margin-top:12px}

.pincity{display:inline-flex;align-items:center;gap:6px;background:#e9f6ee;color:#0f6b3f;border:1px solid #bfe3cd;border-radius:20px;padding:5px 13px;font-size:13px;font-weight:800;margin-right:9px;animation:cityPop .35s cubic-bezier(.22,1.4,.4,1)}
@keyframes cityPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

.coll-note{grid-column:1/-1;background:#f7f9fb;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-top:6px}
.coll-note b{display:block;font-size:15px;color:#1a1a1a;margin-bottom:6px}
.coll-note p{margin:0;font-size:13.4px;color:#5a6672;line-height:1.75}

.svc-link{cursor:pointer;border-color:#f0c9cc}
.svc-link:hover{border-color:var(--red);box-shadow:0 8px 22px rgba(217,35,45,.13)}
.svc-link h4{color:var(--red)}

/* ================= VEDIKA BUSINESS PAGE (Moglix-Business style) ================= */
#page-vbiz{background:#fff}
.vb-nav{position:sticky;top:0;z-index:200;background:#0b1a2b}
.vb-nav-in{max-width:1400px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:26px}
.vb-logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex:0 0 auto}
.vb-logo .m{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#e8353f,#b01a22);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.vb-logo b{color:#fff;font-size:16px;font-weight:800;letter-spacing:.2px;line-height:1.1;display:block}
.vb-logo small{display:block;color:#7f9ab5;font-size:9px;letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.vb-menu{display:flex;gap:22px;margin-left:14px;flex-wrap:wrap}
.vb-menu a{color:#d6e2ee;font-size:13.5px;font-weight:600;cursor:pointer;position:relative;padding:4px 0}
.vb-menu a:hover{color:#fff}
.vb-menu a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transition:transform .22s}
.vb-menu a:hover::after{transform:scaleX(1)}
.vb-nav .vb-cta{margin-left:auto;background:var(--red);color:#fff;border:none;border-radius:7px;padding:9px 18px;font-size:12.8px;font-weight:800;cursor:pointer;white-space:nowrap}
.vb-nav .vb-cta:hover{background:var(--red-dark)}
.vb-strip{background:#08131f;border-top:1px solid rgba(255,255,255,.07)}
.vb-strip-in{max-width:1400px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.vb-strip a{color:#9fb4c9;font-size:12px;font-weight:600}
.vb-strip a:hover{color:#fff}
.vb-strip .right{margin-left:auto;color:#ffd166;font-size:12px;font-weight:700;cursor:pointer}

/* hero */
.vb-hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:#0b1a2b}
.vb-hero-bg{background:linear-gradient(115deg,#0b1a2b 0%,#14375c 55%,#0e2740 100%)}
.vb-hero-bg::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 78% 28%,rgba(217,35,45,.30),transparent 46%),
  radial-gradient(circle at 22% 78%,rgba(43,125,233,.22),transparent 44%)}
.vb-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:64px 64px;animation:vbGrid 24s linear infinite}
@keyframes vbGrid{to{background-position:64px 64px}}
.vb-scan{position:absolute;left:0;right:0;height:180px;top:-180px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07),transparent);animation:vbScan 7s ease-in-out infinite}
@keyframes vbScan{0%{top:-180px}100%{top:120%}}
.vb-hero-in{position:relative;z-index:3;max-width:1400px;margin:0 auto;padding:64px 22px 70px;width:100%}
.vb-hero h1{color:#fff;font-size:44px;font-weight:800;line-height:1.16;letter-spacing:-.8px;max-width:900px}
.vb-hero p{color:#c6d8ea;font-size:16px;line-height:1.75;margin-top:18px;max-width:720px}
.vb-hero .tagline{display:inline-flex;align-items:center;gap:9px;color:#ffd166;font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}
.vb-hero .tagline i{width:34px;height:2px;background:#ffd166;display:inline-block;font-style:normal}
.vb-hero-b{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.vb-b1{background:var(--red);color:#fff;border:none;border-radius:9px;padding:15px 30px;font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .18s,box-shadow .18s}
.vb-b1:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(217,35,45,.4)}
.vb-b2{background:transparent;border:1.6px solid rgba(255,255,255,.55);color:#fff;border-radius:9px;padding:14px 28px;font-size:14.5px;font-weight:800;cursor:pointer}
.vb-b2:hover{background:#fff;color:#0b1a2b}

/* section shell */
.vb-sec{max-width:1300px;margin:0 auto;padding:72px 22px}
.vb-sec.alt{max-width:none;background:#f7f9fb}
.vb-sec.alt>.in{max-width:1300px;margin:0 auto}
.vb-kick{display:block;color:var(--red);font-size:12px;letter-spacing:2.4px;text-transform:uppercase;font-weight:800;margin-bottom:12px}
.vb-h2{font-size:34px;font-weight:800;color:#0b1a2b;line-height:1.22;letter-spacing:-.5px;max-width:620px}
.vb-lead{color:#5a6672;font-size:15px;line-height:1.85;margin-top:14px;max-width:560px}
.vb-two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* animated procurement flow */
.vb-flow{position:relative}
.vb-flow svg{width:100%;height:auto}
.flow-node{fill:#fff;stroke:#dfe6ed;stroke-width:2}
.flow-node.on{stroke:var(--red)}
.flow-lbl{font-size:11px;font-weight:700;fill:#31414f}
.flow-line{stroke:#cfd8e1;stroke-width:2.4;fill:none}
.flow-dot{fill:var(--red)}

/* counters */
.vb-stats{background:#0b1a2b;color:#fff}
.vb-stats-in{max-width:1300px;margin:0 auto;padding:46px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.vb-stat b{display:block;font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1;background:linear-gradient(90deg,#fff,#ffd166);-webkit-background-clip:text;background-clip:text;color:transparent}
.vb-stat small{display:block;color:#9fb4c9;font-size:12.5px;margin-top:9px;letter-spacing:.4px}

/* solutions */
.vb-sol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.vb-solc{border:1px solid var(--line);border-radius:14px;padding:26px 24px;background:#fff;position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s;cursor:pointer}
.vb-solc:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(11,26,43,.12);border-color:var(--red)}
.vb-solc .no{font-size:32px;font-weight:800;color:#eef1f4;line-height:1;transition:color .22s}
.vb-solc:hover .no{color:#fdeef0}
.vb-solc h4{font-size:17px;font-weight:800;color:#0b1a2b;margin:10px 0 8px}
.vb-solc p{font-size:13.4px;line-height:1.75;color:#5a6672;margin:0}
.vb-solc .go{display:inline-block;margin-top:14px;color:var(--red);font-size:12.5px;font-weight:800;opacity:0;transform:translateX(-6px);transition:all .22s}
.vb-solc:hover .go{opacity:1;transform:translateX(0)}

/* problems we solve */
.vb-prob{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:38px}
.vb-probc{text-align:center;padding:26px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:all .22s}
.vb-probc:hover{background:#0b1a2b;border-color:#0b1a2b;transform:translateY(-5px)}
.vb-probc .ico{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;background:#fdeef0;display:flex;align-items:center;justify-content:center;font-size:25px;transition:background .22s}
.vb-probc:hover .ico{background:rgba(255,255,255,.12)}
.vb-probc h4{font-size:14.5px;font-weight:800;color:#0b1a2b;margin-bottom:7px;transition:color .22s}
.vb-probc p{font-size:12.4px;line-height:1.65;color:#6b7681;margin:0;transition:color .22s}
.vb-probc:hover h4{color:#fff}
.vb-probc:hover p{color:#b9c8d6}

/* presence */
.vb-presence{background:linear-gradient(115deg,#0b1a2b,#14375c);color:#fff}
.vb-presence .in{max-width:1300px;margin:0 auto;padding:66px 22px;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.vb-presence h2{font-size:34px;font-weight:800;line-height:1.22}
.vb-presence p{color:#c6d8ea;margin-top:14px;font-size:14.5px;line-height:1.8}
.vb-tabs{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}
.vb-tab{border:1.4px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:22px;padding:8px 18px;font-size:12.8px;font-weight:700;cursor:pointer}
.vb-tab.on{background:#fff;color:#0b1a2b;border-color:#fff}
.vb-off{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px 24px;min-height:150px}
.vb-off b{display:block;font-size:16px;margin-bottom:8px}
.vb-off p{color:#c6d8ea;font-size:13.6px;line-height:1.75;margin:0 0 6px}
.vb-off span{color:#ffd166;font-size:12.8px;font-weight:700}

/* newsroom */
.vb-news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.vb-newsc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:all .22s;cursor:pointer}
.vb-newsc:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(11,26,43,.12)}
.vb-newsc .top{height:120px;display:flex;align-items:center;justify-content:center;font-size:38px}
.vb-newsc .bd{padding:20px}
.vb-newsc span{font-size:11px;font-weight:800;color:var(--red);letter-spacing:1.2px;text-transform:uppercase}
.vb-newsc h4{font-size:15px;font-weight:800;color:#0b1a2b;margin:8px 0 8px;line-height:1.45}
.vb-newsc p{font-size:13px;color:#5a6672;line-height:1.7;margin:0 0 12px}
.vb-newsc .rm{color:var(--red);font-size:12.5px;font-weight:800}

/* awards marquee */
.vb-aw{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);margin-top:34px}
.vb-aw-track{display:flex;gap:16px;width:max-content;animation:vbAw 34s linear infinite}
.vb-aw:hover .vb-aw-track{animation-play-state:paused}
@keyframes vbAw{to{transform:translateX(-50%)}}
.vb-awc{flex:0 0 auto;width:200px;height:96px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px;text-align:center}
.vb-awc b{font-size:12.5px;color:#0b1a2b;line-height:1.35}
.vb-awc small{font-size:10.5px;color:var(--muted)}

/* case study */
.vb-case{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:34px;background:#fff}
.vb-case .art{background:linear-gradient(135deg,#0b1a2b,#14375c);display:flex;align-items:center;justify-content:center;padding:36px;min-height:320px}
.vb-case .bd{padding:40px}
.vb-case h3{font-size:24px;font-weight:800;color:#0b1a2b;line-height:1.32}
.vb-case p{font-size:13.8px;line-height:1.85;color:#5a6672;margin-top:14px}
.vb-case .win{background:#e9f6ee;border-left:4px solid #0f8a4f;border-radius:0 10px 10px 0;padding:15px 18px;margin-top:18px}
.vb-case .win b{color:#0f6b3f;font-size:15px}
.vb-case-b{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}

/* contact */
.vb-contact{background:#0b1a2b;color:#fff}
.vb-contact .in{max-width:1300px;margin:0 auto;padding:66px 22px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px}
.vb-contact h2{font-size:32px;font-weight:800;line-height:1.25}
.vb-contact .cinfo{margin-top:24px}
.vb-contact .crow{display:flex;gap:12px;margin-bottom:18px;align-items:flex-start}
.vb-contact .crow .i{width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:16px}
.vb-contact .crow b{display:block;font-size:14px;margin-bottom:3px}
.vb-contact .crow p{color:#a9c0d6;font-size:13px;line-height:1.7;margin:0}
.vb-form{background:#fff;border-radius:16px;padding:30px}
.vb-form .g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vb-form input,.vb-form select,.vb-form textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:9px;font-size:13.6px;font-family:inherit;color:#1a1a1a;background:#fff}
.vb-form textarea{min-height:104px;resize:vertical}
.vb-form input:focus,.vb-form select:focus,.vb-form textarea:focus{outline:none;border-color:var(--red)}
.vb-form .full{grid-column:1/-1}
.vb-form button{grid-column:1/-1;background:var(--red);color:#fff;border:none;border-radius:9px;padding:15px;font-size:14.5px;font-weight:800;cursor:pointer;letter-spacing:.6px}
.vb-form button:hover{background:var(--red-dark)}
.vb-form .msg{grid-column:1/-1;font-size:12.6px;font-weight:700;margin-top:-4px}
.vb-form .msg.ok{color:#0f8a4f}
.vb-form .msg.bad{color:var(--red)}

/* mega footer */
.vb-foot{background:#08131f;color:#9fb4c9;padding:56px 22px 26px}
.vb-foot-in{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.vb-foot h5{color:#fff;font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
.vb-foot a{display:block;color:#9fb4c9;font-size:12.8px;padding:5px 0;cursor:pointer}
.vb-foot a:hover{color:#fff}
.vb-foot-bot{max-width:1300px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px}

@media(max-width:1050px){
 .vb-two{grid-template-columns:1fr;gap:34px}
 .vb-sol{grid-template-columns:1fr 1fr}
 .vb-prob{grid-template-columns:1fr 1fr 1fr}
 .vb-presence .in,.vb-contact .in{grid-template-columns:1fr}
 .vb-case{grid-template-columns:1fr}
 .vb-news{grid-template-columns:1fr}
 .vb-foot-in{grid-template-columns:1fr 1fr 1fr}
 .vb-stats-in{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
 .vb-hero h1{font-size:30px}
 .vb-h2,.vb-presence h2,.vb-contact h2{font-size:25px}
 .vb-sol,.vb-prob{grid-template-columns:1fr}
 .vb-form .g{grid-template-columns:1fr}
 .vb-foot-in{grid-template-columns:1fr 1fr}
 .vb-menu{display:none}
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--red);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:800;font-size:14px}
.skip-link:focus{left:0}

/* ================= v45 MOBILE FIXES ================= */
/* B. Header fits on phone — search full, cart/login icons visible */
@media(max-width:640px){
  .hdr-in{gap:7px;padding:9px 9px}
  .logo{gap:6px}
  .logo-mark{width:30px;height:30px;font-size:16px}
  .logo-flip{width:70px;height:32px}
  .logo-txt b{font-size:12.5px}
  .logo-txt small{font-size:7.5px;letter-spacing:.8px}
  .yoi{padding:2px 6px;gap:4px}
  .yoi b{font-size:12px}
  .yoi span{font-size:6.3px;width:40px;letter-spacing:.2px}
  .srch{min-width:0;flex:1}
  .srch input{padding:9px 10px;font-size:13px}
  .srch input::placeholder{font-size:12px}
  .srch button{padding:0 13px;font-size:15px}
  .hdr-r{gap:13px;margin-left:4px}
  .hdr-r .hico{font-size:20px}
  .hdr-r .hitem.hlogin .t{display:none}
}
/* C. Remove scroll arrows on touch devices (users swipe) */
@media(hover:none){
  .sarrow,.row-arrow{display:none!important}
}
/* D. City pills — clean single-line scroll instead of ragged wrap */
@media(max-width:700px){
  .city-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;gap:8px}
  .city-pills::-webkit-scrollbar{display:none}
  .cpill{flex:0 0 auto;white-space:nowrap}
}
/* E. Brand circles — text never spills outside the circle */
.bcircle .bc{font-size:11px;padding:8px;line-height:1.05;word-break:break-word;overflow:hidden}
@media(max-width:640px){.bcircle .bc{font-size:10.5px}}

/* F. Product page — collapse to single column on phone, tables shrink, no cutoff */
@media(max-width:640px){
  .pd{padding:14px 12px 40px;gap:16px}
  .pd>*{min-width:0}
  .pd-main{height:auto;min-height:260px}
  .pd-main svg{width:200px;height:200px}
  .pd-specs table,.pd-ovw table,.inf-tb{table-layout:fixed;width:100%}
  .pd-specs td,.pd-ovw td,.pd-ovw th,.inf-tb td,.inf-tb th{word-break:break-word;overflow-wrap:anywhere}
  .pd-ovw .ov-card{padding:16px 14px}
}
/* G. Vedika Business nav — wrap on phone so CTA never overflows */
@media(max-width:640px){
  .vb-nav-in{padding:10px 12px;gap:10px;flex-wrap:wrap}
  .vb-menu{gap:14px;margin-left:0}
  .vb-nav .vb-cta{margin-left:0;padding:8px 12px;font-size:12px}
}

/* H. Very small phones (<=360px) — keep only V mark so search has room */
@media(max-width:360px){
  .logo-flip{display:none}
  .hdr-r{gap:11px}
  .hdr-in{gap:6px}
}

/* ================= v46 ICON-OVERLAP + PERFORMANCE FIXES ================= */
/* I. Decorative card icons must never sit over text or block taps */
.svcb svg,.promo svg{pointer-events:none}
@media(max-width:640px){
  .svcb{height:auto;min-height:116px;padding:16px 18px}
  .svcb p{max-width:56%}
  .svcb svg{height:60px;opacity:.4;right:10px;bottom:8px}
  .promo svg{opacity:.5;height:84px}
  .promo .pb2,.promo .pb1{max-width:70%}
}
/* J. Long-page scroll performance: skip rendering off-screen sections (also pauses their animations) */
@media(max-width:900px){
  .mega{content-visibility:auto;contain-intrinsic-size:auto 1850px}
}
/* K. Honour phone 'reduce motion' setting — kills continuous animations that cause lag/battery drain */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ======================================================================== */
/* ==================================================== */
.sarrow{display:none!important}/*allhide*/

/* WE SUPPLY IN */
.wsi{max-width:1200px;margin:34px auto 0;padding:26px 22px;border-top:1px solid #eee}
.wsi-h{font-size:21px;color:#14202c;margin-bottom:6px}
.wsi-p{font-size:13.5px;color:#5b6773;max-width:860px;margin-bottom:14px}
.wsi-g{border:1px solid #e8e8e8;border-radius:10px;margin-top:9px;background:#fff}
.wsi-g summary{cursor:pointer;font-weight:800;font-size:14px;color:#14202c;padding:12px 15px;list-style:none;position:relative;padding-right:36px}
.wsi-g summary::-webkit-details-marker{display:none}
.wsi-g summary::after{content:'+';position:absolute;right:15px;top:8px;font-size:19px;color:var(--red);font-weight:800}
.wsi-g[open] summary::after{content:'\2013'}
.wsi-cs{padding:2px 15px 13px;display:flex;flex-wrap:wrap;gap:8px}
.wsi-c{display:inline-block;border:1px solid #e4e8ec;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--red);background:#fff}
.wsi-c.dim{color:#9aa3ad;font-weight:600}

/* ====== WE SUPPLY IN — clean design (id-scoped, override-proof) ====== */
#page-city-supply{max-width:none!important;margin:0!important;padding:0!important;border-top:none!important;background:#f4f7fa}
#page-city-supply .sv-hero{background:linear-gradient(160deg,#0c1c2e,#143354);color:#fff;padding:42px 20px 38px!important;text-align:center;width:100%;margin:0}
#page-city-supply .sv-pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:#9cc6f2;border:1px solid rgba(156,198,242,.35);border-radius:30px;padding:6px 14px!important;white-space:nowrap}
#page-city-supply .sv-hero h1{font-size:clamp(30px,6vw,44px);font-weight:900;margin:14px 0 10px!important;letter-spacing:-.5px;color:#fff;line-height:1.1}
#page-city-supply .sv-hero p{max-width:560px;margin:0 auto!important;color:#c9d9e9;font-size:14.5px;line-height:1.65}
#page-city-supply .sv-chips{display:flex;justify-content:center;gap:8px;margin:18px 0 0!important;flex-wrap:wrap;padding:0}
#page-city-supply .sv-chips span{font-size:11.5px;color:#c9d9e9;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:7px 12px!important;white-space:nowrap}
#page-city-supply .sv-chips b{color:#fff;font-size:13px;margin-right:3px}
#page-city-supply .sv-cover{background:#fff;border-bottom:1px solid #e5eaef;padding:14px 18px!important;text-align:center;margin:0}
#page-city-supply .sv-cover-in{max-width:1000px;margin:0 auto!important;font-size:13px;line-height:1.65;color:#334155;padding:0}
#page-city-supply .sv-cover-in b{color:#c01f34;font-weight:800}
#page-city-supply .sv-wrap{max-width:1100px;margin:0 auto!important;padding:26px 18px 46px!important}
#page-city-supply .sv-featured{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 8px!important;padding:0}
#page-city-supply a.sv-feat{display:block;border-radius:16px;padding:22px!important;color:#fff!important;box-shadow:0 6px 20px rgba(10,25,45,.14);transition:transform .15s;text-decoration:none}
#page-city-supply a.sv-feat:hover{transform:translateY(-3px)}
#page-city-supply .sv-feat.india{background:linear-gradient(135deg,#0e7a6c,#0a5a4f)}
#page-city-supply .sv-feat.exp{background:linear-gradient(135deg,#c01f34,#8c1023)}
#page-city-supply .sv-feat .t{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:#fff!important;margin:0;padding:0}
#page-city-supply .sv-feat p{font-size:13px;color:rgba(255,255,255,.9)!important;margin:8px 0 12px!important;line-height:1.55;max-width:none}
#page-city-supply .sv-feat .m{font-size:12.5px;font-weight:800;letter-spacing:.5px;color:#fff!important;border-bottom:2px solid rgba(255,255,255,.5);padding:0 0 2px!important;display:inline-block}
#page-city-supply .sv-group{margin:28px 0 0!important;padding:0}
#page-city-supply .sv-gh{font-size:18px;color:#0b1a2b;font-weight:800;display:flex;align-items:center;gap:10px;margin:0 0 13px!important;padding:0}
#page-city-supply .sv-gh::before{content:'';width:4px;height:18px;background:#c01f34;border-radius:3px}
#page-city-supply .sv-gh small{font-size:12px;font-weight:700;color:#94a3b8}
#page-city-supply .sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px;padding:0;margin:0}
#page-city-supply .sv-card{background:#fff;border:1px solid #e5eaef;border-radius:13px;padding:16px 17px!important;box-shadow:0 1px 6px rgba(10,25,45,.04);transition:box-shadow .15s,border-color .15s;margin:0}
#page-city-supply .sv-card:hover{box-shadow:0 10px 24px rgba(10,25,45,.1);border-color:#d4dee8}
#page-city-supply .sv-crow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px!important;padding:0}
#page-city-supply .sv-crow b{font-size:15.5px;color:#0b1a2b;font-weight:800}
#page-city-supply .sv-badge{font-size:10px;font-weight:800;color:#0f7a3a;background:#e7f5ec;border-radius:20px;padding:3px 9px!important;white-space:nowrap}
#page-city-supply .sv-card p{font-size:12.8px;color:#5b6773;margin:0 0 11px!important;line-height:1.5;max-width:none}
#page-city-supply a.sv-more{font-size:12px;font-weight:800;color:#c01f34!important;letter-spacing:.4px;text-decoration:none;padding:0;margin:0}
#page-city-supply a.sv-more:hover{text-decoration:underline}
#page-city-supply .sv-strip{margin:34px 0 0!important;background:#fff;border:1px solid #e5eaef;border-radius:15px;padding:18px!important;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
#page-city-supply .sv-si{padding:0;margin:0}
#page-city-supply .sv-si .ic{font-size:22px}
#page-city-supply .sv-si b{display:block;font-size:13.5px;color:#0b1a2b;margin:5px 0 2px!important}
#page-city-supply .sv-si span{font-size:11.5px;color:#7a8794}
#page-city-supply .sv-cta{margin:28px 0 0!important;background:linear-gradient(135deg,#0c1c2e,#143354);border-radius:16px;padding:26px 22px!important;text-align:center;color:#fff}
#page-city-supply .sv-cta h2{font-size:20px;font-weight:800;margin:0 0 6px!important;color:#fff}
#page-city-supply .sv-cta p{color:#c9d9e9;font-size:13.5px;margin:0 0 16px!important;max-width:none}
#page-city-supply .sv-cta a{display:inline-block;font-weight:800;font-size:13.5px;padding:11px 22px!important;border-radius:9px;margin:4px 5px!important;text-decoration:none}
#page-city-supply .sv-cta a.r{background:#e8353f;color:#fff!important}
#page-city-supply .sv-cta a.g{border:1.5px solid rgba(255,255,255,.5);color:#fff!important}
#page-city-supply .sv-foot{font-size:11.5px;color:#8a939e;margin:30px 0 0!important;line-height:1.65;border-top:1px solid #e2e8ee;padding:16px 0 0!important;max-width:none}
@media(max-width:700px){#page-city-supply .sv-featured{grid-template-columns:1fr}#page-city-supply .sv-strip{grid-template-columns:1fr 1fr;gap:16px 10px}#page-city-supply .sv-grid{grid-template-columns:1fr}#page-city-supply .sv-hero{padding:36px 16px 32px!important}}


/* ============ 3-LEVEL MEGA MENU (Phase 1) — Vedika styling ============ */
.cat-dd{min-width:238px}
.nav-l2{position:relative}
.nav-l2>a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 16px;font-size:13px;font-weight:600;color:#333;white-space:nowrap;cursor:pointer}
.nav-l2>a:hover{background:#fdf1f2;color:var(--red)}
.nav-l2>a .arr{color:#b3bfca;font-weight:800;font-size:14px;line-height:1;flex:0 0 auto}
.nav-l2>a:hover .arr{color:var(--red)}
.nav-l3{position:absolute;top:-8px;left:100%;min-width:246px;background:#fff;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px 0;display:none;z-index:460}
.nav-l3 a{display:block;padding:8px 16px;font-size:12.6px;font-weight:600;color:#444;white-space:nowrap}
.nav-l3 a:hover{background:#fdf1f2;color:var(--red)}
@media(hover:hover) and (min-width:1000px){.nav-l2:hover>.nav-l3{display:block}}
/* ---- long dropdown (Controller) — one box, two columns ----
   Only kicks in above 1000px; on phones the same menu is already an
   accordion inside the bottom sheet, so it stays single column there. */
@media(min-width:1000px){
  .cat-dd.dd-2col{min-width:492px;padding:8px 0}
  .cat-dd.dd-2col>.nav-l2{width:50%;float:left}
  .cat-dd.dd-2col>a.va{clear:both;display:block}
  .cat-dd.dd-2col::after{content:'';display:block;clear:both}
  /* the level-3 flyout of a right-column item must open leftward */
  .cat-dd.dd-2col>.nav-l2:nth-child(even)>.nav-l3{left:auto;right:100%}
}

/* right-side headers: flip the level-3 panel to the left */
.citem:nth-last-child(-n+4) .nav-l3{left:auto;right:100%}

@media(max-width:999px){
  .cat-dd{max-height:62vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .nav-l2>a{white-space:normal}
  .nav-l3{position:static;display:none;box-shadow:none;border-radius:0;padding:2px 0 6px;
    background:#f7f9fb;min-width:0;border-left:3px solid #ffd9dc;margin:0 10px 6px 22px}
  .nav-l2.open>.nav-l3{display:block}
  .nav-l3 a{padding:7px 14px;font-size:12.4px;white-space:normal}
  .nav-l2>a .arr{transition:transform .18s}
  .nav-l2.open>a .arr{transform:rotate(90deg);color:var(--red)}
}

/* ================= CATEGORY LISTING PAGE (Phase 1) — Vedika theme ================= */
.vcl-head{background:linear-gradient(180deg,#0b1a2b,#14324f);color:#fff;padding:22px 0 24px}
.vcl-head .wrap{max-width:1400px;margin:0 auto;padding:0 22px}
.vcl-crumb{font-size:12.4px;color:#9fb4c8;margin-bottom:10px}
.vcl-crumb a{color:#cfe0ee}
.vcl-crumb a:hover{color:#fff;text-decoration:underline}
.vcl-crumb .sep{margin:0 7px;opacity:.6}
.vcl-head h1{font-size:27px;font-weight:800;margin:0 0 7px;line-height:1.2}
.vcl-head .mfg{font-size:13.6px;color:#c6d7e6;margin:0}
.vcl-head .mfg b{color:#fff}
@media(max-width:700px){.vcl-head h1{font-size:20px}.vcl-head .mfg{font-size:12.6px}}

.vcl-body{background:#f4f6f8;padding:20px 0 8px}
.vcl-grid{max-width:1400px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:276px 1fr;gap:20px;align-items:start}
@media(max-width:1000px){.vcl-grid{grid-template-columns:1fr;padding:0 12px}}

/* ---- OUR PRODUCT RANGE sidebar ---- */
.vcl-side{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:sticky;top:120px;max-height:calc(100dvh - 140px);display:flex;flex-direction:column}
@media(max-width:1000px){.vcl-side{position:static;max-height:none}}
.vcl-side>h3{margin:0;background:#0b1a2b;color:#fff;font-size:13px;font-weight:800;letter-spacing:.6px;padding:13px 16px}
.vcl-side ul{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.vcl-side ul::-webkit-scrollbar{width:6px}
.vcl-side ul::-webkit-scrollbar-thumb{background:#c9d2da;border-radius:3px}
.vcl-side li.cat{border-bottom:1px solid #eef1f4}
.vcl-side li.cat>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:none;cursor:pointer;
  padding:11px 15px;font-size:12.9px;font-weight:700;color:#1a2b3c;text-align:left;font-family:inherit}
.vcl-side li.cat>button:hover{background:#fdf1f2;color:var(--red)}
.vcl-side li.cat>button .arw{width:16px;height:16px;flex:0 0 auto;transition:transform .2s;color:#9aa7b3}
.vcl-side li.cat.open>button{background:#fdf1f2;color:var(--red)}
.vcl-side li.cat.open>button .arw{transform:rotate(180deg);color:var(--red)}
.vcl-side .subs{display:none;padding:2px 0 8px;background:#fafbfc}
.vcl-side li.cat.open .subs{display:block}
.vcl-side .sub-grp{font-size:10.8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#8a97a4;padding:9px 15px 4px}
.vcl-side .subs a{display:block;padding:6.5px 15px 6.5px 22px;font-size:12.3px;color:#41505f;line-height:1.4;border-left:3px solid transparent}
.vcl-side .subs a:hover{background:#fff;color:var(--red);border-left-color:var(--red)}
.vcl-side .subs a.on{background:#fff;color:var(--red);font-weight:700;border-left-color:var(--red)}

/* ---- product block ---- */
.vcl-main{min-width:0}
.vblk{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:18px;overflow:hidden}
.vblk-name{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding:12px 16px;background:#fbfcfd}
.vblk-name>span{font-size:15.5px;font-weight:800;color:#14324f;line-height:1.3}
.vbn-cb{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.6px solid var(--red);color:var(--red);
  font-size:12px;font-weight:800;padding:7px 13px;border-radius:7px;cursor:pointer;white-space:nowrap;font-family:inherit}
.vbn-cb:hover{background:var(--red);color:#fff}
.vbn-cb svg{width:14px;height:14px;fill:currentColor}
.vblk-top{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;padding:18px 16px}
@media(max-width:900px){.vblk-top{grid-template-columns:1fr;gap:16px}}

/* gallery */
.vgal{display:grid;grid-template-columns:56px 1fr;gap:10px}
.vth-strip{display:flex;flex-direction:column;gap:7px}
.vth{width:56px;height:56px;border:1.6px solid var(--line);border-radius:7px;background:#fff;padding:2px;cursor:pointer;overflow:hidden}
.vth svg{width:100%;height:100%;display:block}
.vth.on{border-color:var(--red);box-shadow:0 0 0 2px #fdd}
.vmain{border:1px solid var(--line);border-radius:10px;background:#fff;position:relative;cursor:zoom-in;overflow:hidden;aspect-ratio:1/1}
.vmain svg{width:100%;height:100%;display:block}
.vmain .zoom{position:absolute;left:8px;bottom:8px;background:rgba(11,26,43,.82);color:#fff;font-size:10.6px;padding:4px 9px;border-radius:20px}
@media(max-width:520px){.vgal{grid-template-columns:46px 1fr}.vth{width:46px;height:46px}}

.vdesc{margin-top:14px}
.vdesc h4{font-size:13px;font-weight:800;color:#14324f;margin:0 0 6px;text-transform:uppercase;letter-spacing:.4px}
.vdesc p{font-size:13.2px;line-height:1.75;color:#4c5a68;margin:0}
.vbtn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px;align-items:center}
.v-best{background:#f5a623;border:none;color:#3a2b00;font-size:12.4px;font-weight:800;padding:9px 16px;border-radius:8px;cursor:pointer;font-family:inherit}
.v-best:hover{background:#e2941a}
.vfull{font-size:12.4px;font-weight:700;color:var(--red)}
.vfull:hover{text-decoration:underline}

/* right info panel */
.vinfo h2{font-size:17px;font-weight:800;color:#0b1a2b;margin:0 0 5px;line-height:1.3}
.vmodel{font-size:12.4px;color:#6b7a89;margin-bottom:10px}
.vmodel b{color:#14324f}
.vprice-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 13px;background:#f7fafc;border:1px solid var(--line);border-radius:9px;margin-bottom:12px}
.vprice{font-size:22px;font-weight:800;color:#0b1a2b}
.vmrp{font-size:13px;color:#94a2b0;text-decoration:line-through}
.voff{font-size:12px;font-weight:800;color:#0f9d58}
.vask{font-size:12.4px;font-weight:700;color:#6b7a89;border-left:1px solid var(--line);padding-left:10px}
.vglp{font-size:12.4px;font-weight:800;color:var(--red);cursor:pointer}
.vglp:hover{text-decoration:underline}
.vspec{width:100%;border-collapse:collapse;font-size:12.6px;margin-bottom:12px}
.vspec td{border:1px solid var(--line);padding:7.5px 10px;vertical-align:top}
.vspec td:first-child{background:#f7fafc;color:#6b7a89;font-weight:700;width:44%}
.vspec td:last-child{color:#2b3a48}

.vsold{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:11px;background:#fff}
.vsold .sb1{display:block;font-size:12.6px;color:#4c5a68;margin-bottom:7px}
.vsold .sb1 b{color:#0b1a2b}
.vseal,.vlead{display:inline-flex;align-items:center;gap:5px;font-size:11.4px;font-weight:700;padding:3px 9px;border-radius:20px;margin:0 6px 8px 0}
.vseal{background:#fff8e6;color:#8a6400;border:1px solid #f0dca8}
.vlead{background:#eef6ff;color:#1c5c8a;border:1px solid #cfe2f4}
.v-int{display:block;width:100%;background:#f5a623;border:none;color:#3a2b00;font-size:13px;font-weight:800;padding:10px;border-radius:8px;cursor:pointer;margin-top:4px;font-family:inherit}
.v-int:hover{background:#e2941a}
.vcart-row{display:flex;gap:8px;margin-top:9px}
.vcart-row button{flex:1;font-size:12.4px;font-weight:800;padding:10px 6px;border-radius:8px;cursor:pointer;font-family:inherit;border:none}
.v-add{background:#fff;border:1.6px solid var(--red)!important;color:var(--red)}
.v-add:hover{background:var(--red);color:#fff}
.v-buy{background:var(--red);color:#fff}
.v-buy:hover{background:var(--red-dark)}

.vqbox{border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:#f7fafc}
.vqb-h{font-size:13px;font-weight:800;color:#0b1a2b;margin-bottom:9px}
.vmob{display:flex;border:1.4px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:8px}
.vmob .cc{background:#f1f4f7;font-size:12.6px;font-weight:700;color:#4c5a68;padding:9px 10px;border-right:1px solid var(--line);white-space:nowrap}
.vmob input{flex:1;border:none;outline:none;font-size:13px;padding:9px 10px;font-family:inherit;min-width:0}
.v-green{width:100%;background:#0f9d58;border:none;color:#fff;font-size:13px;font-weight:800;padding:10px;border-radius:8px;cursor:pointer;font-family:inherit}
.v-green:hover{background:#0c7f47}
.vokmsg{display:none;font-size:12.4px;font-weight:700;color:#0f9d58;margin-top:8px}
.vmicro{font-size:11.4px;color:#8a97a4;margin-top:7px;text-align:center}

/* ---- related slider ---- */
.vrel{background:#fff;border-top:1px solid var(--line);padding:24px 0}
.vrel .wrap{max-width:1400px;margin:0 auto;padding:0 22px}
.vrel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.vrel-head h2{font-size:17px;font-weight:800;color:#0b1a2b;margin:0}
.vrel-ar button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:#4c5a68;font-size:17px;cursor:pointer;margin-left:6px}
.vrel-ar button:hover{border-color:var(--red);color:var(--red)}
.vrel-row{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.vrel-row::-webkit-scrollbar{display:none}
.vrel-card{flex:0 0 202px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.vrel-img{height:150px;background:#f4f6f8;cursor:zoom-in;display:flex;align-items:center;justify-content:center;padding:6px}
.vrel-img svg{width:100%;height:100%}
.vrel-b{padding:11px 12px}
.vrel-b h4{font-size:12.9px;font-weight:700;color:#1a2b3c;margin:0 0 6px;line-height:1.4;min-height:36px}
.vrel-p{font-size:12.4px;font-weight:800;color:var(--red);margin-bottom:9px}
.vrel-b button{width:100%;font-size:11.8px;font-weight:800;padding:8px;border-radius:7px;cursor:pointer;font-family:inherit;margin-bottom:6px;border:none}

/* ---- reviews ---- */
.vrev{background:#f4f6f8;padding:26px 0;border-top:1px solid var(--line)}
.vrev .wrap{max-width:1400px;margin:0 auto;padding:0 22px}
.vrev-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.vrev-head h2{font-size:18px;font-weight:800;color:#0b1a2b;margin:0}
.vrev-all{font-size:12.6px;font-weight:800;color:var(--red)}
.vrev-top{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;grid-template-columns:auto 1.1fr 1.2fr;gap:28px;align-items:center;margin-bottom:16px}
@media(max-width:900px){.vrev-top{grid-template-columns:1fr;gap:20px;text-align:center}}
.vrev-num{font-size:46px;font-weight:800;color:#0b1a2b;line-height:1}
.vrev-num small{font-size:16px;color:#8a97a4;font-weight:700}
.vrev-stars{color:#f5a623;font-size:19px;letter-spacing:2px;margin:4px 0}
.vrev-cnt{font-size:12.4px;color:#6b7a89}
.vrev-brow{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.vrev-l{font-size:11.8px;color:#6b7a89;width:46px;flex:0 0 auto;text-align:left}
.vrev-track{flex:1;height:7px;background:#e9edf1;border-radius:4px;overflow:hidden}
.vrev-track i{display:block;height:100%;background:#f5a623;border-radius:4px}
.vrev-p{font-size:11.4px;color:#8a97a4;width:42px;flex:0 0 auto;text-align:right}
.vrev-sat h4{font-size:12.6px;font-weight:800;color:#0b1a2b;margin:0 0 12px;text-transform:uppercase;letter-spacing:.4px}
.vrev-donuts{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.vrev-donut{text-align:center}
.vrev-donut .dn{position:relative;width:66px;height:66px;margin:0 auto 6px}
.vrev-donut .dn span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#0b1a2b}
.vrev-donut small{font-size:11.4px;color:#6b7a89;font-weight:700}
.vrev-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.vrev-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.vrc-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.vrc-av{width:38px;height:38px;border-radius:50%;background:#14324f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto}
.vrc-n{font-size:13.4px;font-weight:800;color:#0b1a2b}
.vrc-c{font-size:11.6px;color:#8a97a4}
.vrc-st{color:#f5a623;font-size:13px;letter-spacing:1px;margin-bottom:6px}
.vrc-pn{font-size:11.8px;color:#6b7a89;margin-bottom:7px}
.vrc-pn b{color:#14324f}
.vrc-tx{font-size:12.8px;line-height:1.7;color:#4c5a68}

/* ---- expandable SEO block ---- */
.vseo-outer{background:#fff;border-top:1px solid var(--line);padding:0 0 30px}
.vseo-wrap{max-width:1400px;margin:0 auto;padding:0 22px}
.vseo{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px}
.vseo>summary{list-style:none;cursor:pointer;background:#fbfcfd;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.vseo>summary::-webkit-details-marker{display:none}
.vseo-title{font-size:14px;color:#4c5a68}
.vseo-title b{color:#0b1a2b;font-size:14.6px}
.vseo-plus{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex:0 0 auto}
.vseo[open] .vseo-plus{transform:rotate(45deg)}
.vseo-inner{padding:22px 24px 26px;border-top:1px solid var(--line)}
.vseo-inner h3{font-size:17px;font-weight:800;color:#0b1a2b;margin:22px 0 9px}
.vseo-inner h3:first-child{margin-top:0}
.vseo-inner h4{font-size:14px;font-weight:800;color:#14324f;margin:16px 0 6px}
.vseo-inner p{font-size:13.4px;line-height:1.85;color:#4c5a68;margin:0 0 11px}
.vseo-inner ul{margin:0 0 13px;padding-left:20px}
.vseo-inner li{font-size:13.3px;line-height:1.8;color:#4c5a68;margin-bottom:5px}
.vseo-inner table{width:100%;border-collapse:collapse;font-size:12.8px;margin:8px 0 16px}
.vseo-inner th{background:#0b1a2b;color:#fff;text-align:left;padding:9px 11px;font-weight:700}
.vseo-inner td{border:1px solid var(--line);padding:8px 11px;color:#4c5a68}
.vseo-inner tr:nth-child(even) td{background:#fafbfc}
.vseo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:10px 0 18px}
.vseo-c{background:#f7fafc;border:1px solid var(--line);border-radius:10px;padding:14px}
.vseo-c b{display:block;font-size:13.4px;color:#0b1a2b;margin-bottom:5px}
.vseo-c span{font-size:12.6px;color:#5b6773;line-height:1.7}
.vfaq{border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-bottom:9px;background:#fff}
.vfaq b{display:block;font-size:13.4px;color:#0b1a2b;margin-bottom:5px}
.vfaq p{font-size:12.9px;line-height:1.75;color:#5b6773;margin:0}

/* ---- lightbox ---- */
.vlb{position:fixed;inset:0;background:rgba(6,14,22,.9);z-index:9000;display:none;align-items:center;justify-content:center;padding:24px}
.vlb.on{display:flex}
.vlb-in{background:#fff;border-radius:14px;max-width:600px;width:100%;padding:14px;position:relative}
.vlb-in svg{width:100%;height:auto;display:block}
.vlb-x{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;background:#fff;border:none;font-size:19px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* ================= CHAT WITH US ================= */
.vchat{position:fixed;right:20px;bottom:20px;z-index:8000;display:flex;align-items:center;gap:10px;
  background:#0b1a2b;color:#fff;border:none;border-radius:40px;padding:10px 18px 10px 12px;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.3);font-family:inherit}
.vchat:hover{background:#14324f}
.vchat .cav{width:36px;height:36px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vchat .cav svg{width:20px;height:20px;fill:#fff}
.vchat .ctx{text-align:left;line-height:1.25}
.vchat .ctx b{display:block;font-size:13px;font-weight:800}
.vchat .ctx span{font-size:10.8px;color:#8fd7a8}
.vchat .ctx span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#3adf7c;margin-right:5px;vertical-align:middle}
@media(max-width:600px){.vchat{padding:9px 14px 9px 9px}.vchat .ctx b{font-size:12px}}

.vchat-box{position:fixed;right:20px;bottom:20px;width:330px;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.3);z-index:8001;display:none;overflow:hidden}
.vchat-box.on{display:block}
.vcb-h{background:#0b1a2b;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px}
.vcb-h .cav{width:34px;height:34px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vcb-h .cav svg{width:19px;height:19px;fill:#fff}
.vcb-h b{font-size:13.6px;display:block}
.vcb-h small{font-size:10.8px;color:#8fd7a8}
.vcb-x{margin-left:auto;background:none;border:none;color:#9fb4c8;font-size:19px;cursor:pointer;line-height:1}
.vcb-body{padding:14px 16px;max-height:300px;overflow-y:auto;background:#f6f8fa}
.vcb-msg{background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:10px 12px;font-size:12.9px;line-height:1.65;color:#3b4956;margin-bottom:10px}
.vcb-me{background:#0b1a2b;color:#fff;border:none;border-radius:12px 12px 3px 12px;margin-left:auto;max-width:82%}
.vcb-q{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.vcb-q button{background:#fff;border:1.4px solid var(--line);color:#41505f;font-size:11.6px;font-weight:700;padding:6px 11px;border-radius:20px;cursor:pointer;font-family:inherit}
.vcb-q button:hover{border-color:var(--red);color:var(--red)}
.vcb-f{display:flex;border-top:1px solid var(--line);background:#fff}
.vcb-f input{flex:1;border:none;outline:none;padding:12px 14px;font-size:13px;font-family:inherit;min-width:0}
.vcb-f button{background:var(--red);border:none;color:#fff;padding:0 18px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}

/* ---- footer alignment fix ---- */
footer .ft-group{max-width:1400px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;border-top:1px solid #e7ebef}
footer .ft-group b{font-size:12.4px;font-weight:800;color:#0b1a2b;margin-right:4px}
footer .ft-group a{font-size:12.4px;color:#5b6773;padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:#fff}
footer .ft-group a:hover{border-color:var(--red);color:var(--red)}
footer .ft-strip{max-width:1400px;margin:0 auto;padding:14px 22px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #e7ebef}
footer .ft-mail{text-align:right}
footer .ft-mail-row{font-size:12.6px;color:#4c5a68;display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
footer .ft-mail-row i{color:#c3ccd4;font-style:normal}
footer .ft-mail small{display:block;font-size:11.4px;color:#8a97a4;margin-top:3px}
footer .ft-sp{display:none}
@media(max-width:760px){
  footer .ft-group,footer .ft-strip{padding-left:14px;padding-right:14px;justify-content:center;text-align:center}
  footer .ft-mail{text-align:center}
}

/* ==================================================================
   PHASE 2 — TOP SECTION ELEVATION (black strip / header / cat row)
   ================================================================== */
.topstrip{position:relative;z-index:320;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.topstrip::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;
  background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,0));pointer-events:none}
.hdr{position:sticky;top:0;z-index:310;
  box-shadow:0 1px 0 rgba(15,32,50,.06),0 6px 18px -6px rgba(15,32,50,.18)}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:8px;
  background:linear-gradient(180deg,rgba(15,32,50,.10),rgba(15,32,50,0));pointer-events:none}
.catrow{box-shadow:0 1px 0 rgba(15,32,50,.05),0 8px 20px -10px rgba(15,32,50,.22)}
.catrow::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:linear-gradient(180deg,rgba(15,32,50,.09),rgba(15,32,50,0));pointer-events:none}
.catrow{position:sticky;top:var(--hdrH,63px);z-index:250}
/* home banner sits under the two elevated bars */
#page-home .hero{position:relative;z-index:1}

/* ==================================================================
   PHASE 1 — FOOTER
   ================================================================== */
footer .ft-contact{max-width:1400px;margin:0 auto;padding:18px 22px 14px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:22px;border-top:1px solid #e7ebef}
footer .ft-contact .fc{min-width:0}
footer .ft-contact .fc-brand{display:flex;align-items:center;gap:9px;margin-bottom:8px}
footer .ft-contact .fc-brand b{color:#0b1a2b;font-size:16.5px;font-weight:800}
footer .ft-contact h5{font-size:12.6px;font-weight:800;color:#0b1a2b;margin:0 0 5px;
  text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:7px}
footer .ft-contact h5 span{font-size:14px}
footer .ft-contact p{font-size:13px;line-height:1.7;color:#5b6773;margin:0}
footer .ft-contact .lbl{color:#8a97a4}
footer .ft-contact a{color:#5b6773}
footer .ft-contact a:hover{color:var(--red)}
@media(max-width:900px){footer .ft-contact{grid-template-columns:1fr;gap:22px;text-align:center}
  footer .ft-contact .fc-brand{justify-content:center}
  footer .ft-contact h5{justify-content:center}}

footer .ft-group{justify-content:center!important;text-align:center}
footer .ft-group b{width:100%;text-align:center;margin:0 0 4px}

/* ==================================================================
   PHASE 1 — STICKY SIDEBAR THAT STOPS AT THE RELATED SECTION
   ================================================================== */
.vcl-side{position:sticky;top:calc(var(--hdrH,63px) + 12px);
  max-height:calc(100dvh - var(--hdrH,63px) - 26px)}
.vcl-grid{align-items:start}
@media(max-width:1000px){.vcl-side{position:static;max-height:none}}

/* ==================================================================
   PHASE 3 — LEAD MODALS (PackForge pattern, Vedika colours)
   ================================================================== */
.vmd-ov{position:fixed;inset:0;background:rgba(8,17,27,.62);z-index:9500;
  display:none;align-items:center;justify-content:center;padding:20px}
.vmd-ov.on{display:flex}
.vmd{background:#fff;border-radius:16px;width:100%;max-width:760px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.05fr;box-shadow:0 26px 70px rgba(0,0,0,.4)}
@media(max-width:760px){.vmd{grid-template-columns:1fr;max-width:420px}
  .vmd .vmd-l{display:none}}
.vmd-l{padding:22px;background:#fbfcfd;border-right:1px solid var(--line)}
.vmd-l .im{background:#f2f5f8;border-radius:10px;padding:10px;margin-bottom:14px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center}
.vmd-l .im svg{width:100%;height:100%}
.vmd-l h4{font-size:15px;font-weight:800;color:#14324f;margin:0 0 6px;line-height:1.35}
.vmd-l .glp{font-size:13.6px;font-weight:800;color:#0f9d58}
.vmd-l .tag{font-size:11.4px;color:#8a949c;margin-top:7px}
.vmd-r{padding:24px;position:relative}
.vmd-x{position:absolute;top:14px;right:14px;background:none;border:none;font-size:22px;
  color:#9aa7b3;cursor:pointer;line-height:1}
.vmd-x:hover{color:var(--red)}
.vmd-r h3{font-size:20px;font-weight:800;color:#0b1a2b;margin:0 0 6px}
.vmd-cb{font-size:12.8px;line-height:1.6;color:#7b8794;margin-bottom:16px}
.vmd-f{margin-bottom:12px}
.vmd-f.hide{display:none}
.vmd-f label{display:block;font-size:12.4px;font-weight:700;color:#41505f;margin-bottom:5px}
.vmd-f input,.vmd-f textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;
  padding:11px 12px;font-size:13.6px;font-family:inherit;outline:none;background:#fff}
.vmd-f input:focus,.vmd-f textarea:focus{border-color:var(--red)}
.vmd-f textarea{min-height:76px;resize:vertical}
.vmd-f.mobf{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.vmd-f.mobf.hide{display:none}
.vmd-f.mobf span{background:#f0f3f5;padding:11px 11px;font-size:13.4px;font-weight:700;
  color:#41505f;border-right:1px solid var(--line);white-space:nowrap}
.vmd-f.mobf input{border:none;border-radius:0;flex:1;min-width:0}
.vmd-btn{width:100%;background:#f05a28;border:none;color:#fff;font-size:15px;font-weight:800;
  padding:13px;border-radius:9px;cursor:pointer;font-family:inherit}
.vmd-btn:hover{background:#d94a1c}
.vmd-btn:disabled{opacity:.6;cursor:default}
.vmd-ok{display:none;margin-top:13px;font-size:12.8px;line-height:1.65;color:#0f9d58;
  background:#eefaf2;border:1px solid #bfe7ce;border-radius:9px;padding:11px 13px}
.vmd-ok.bad{color:#b01a22;background:#fdf2f3;border-color:#f3c9cc}
.vmd-ok a{display:inline-block;margin:7px 9px 0 0;font-weight:800;color:#0b7a3e}
.vmd-ok a:hover{text-decoration:underline}

/* ==================================================================
   PHASE 3 — QUICK VIEW MODAL (image click)
   ================================================================== */
.vqv-ov{position:fixed;inset:0;background:rgba(8,17,27,.66);z-index:9400;
  display:none;align-items:center;justify-content:center;padding:20px}
.vqv-ov.on{display:flex}
.vqv{background:#fff;border-radius:16px;width:100%;max-width:940px;max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 26px 70px rgba(0,0,0,.42)}
@media(max-width:820px){.vqv{grid-template-columns:1fr;max-width:480px}}
.vqv-l{padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f9fb}
.vqv-l .big{width:100%;max-width:380px;background:#fff;border-radius:12px;padding:12px}
.vqv-l .big svg{width:100%;height:auto;display:block}
.vqv-l .strip{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.vqv-l .strip button{width:52px;height:52px;border:1.6px solid var(--line);border-radius:8px;
  background:#fff;padding:2px;cursor:pointer;overflow:hidden}
.vqv-l .strip button.on{border-color:var(--red);box-shadow:0 0 0 2px #fdd}
.vqv-l .strip button svg{width:100%;height:100%}
.vqv-r{padding:26px;position:relative}
.vqv-close{position:absolute;top:16px;right:16px;background:#fff;border:1.5px solid var(--line);
  border-radius:8px;font-size:12.6px;font-weight:700;color:#41505f;padding:6px 12px;cursor:pointer;font-family:inherit}
.vqv-close:hover{border-color:var(--red);color:var(--red)}
.vqv-r h3{font-size:21px;font-weight:800;color:#0b1a2b;margin:30px 0 14px;line-height:1.3}
.vqv-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.vqv-ask{font-size:24px;font-weight:800;color:#0b1a2b}
.vqv-kv{font-size:13.4px;color:#41505f;margin-bottom:8px}
.vqv-kv b{color:#8a949c;font-weight:700;margin-right:6px}
.vqv-sold{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:16px 0;background:#fbfcfd}
.vqv-sold .s1{display:block;font-size:13.4px;color:#41505f;margin-bottom:8px}
.vqv-sold .s1 b{color:#0b1a2b}
.vqv-qh{font-size:14.6px;font-weight:800;color:#0b1a2b;margin-bottom:10px}

/* ==================================================================
   PHASE 3 — "GET LATEST PRICE" 50% BIGGER + HIGHLIGHTED
   ================================================================== */
.vglp{font-size:18.6px!important;font-weight:800!important;color:#0f9d58!important;
  background:#eefaf2;border:1.5px dashed #7fca9c;border-radius:8px;padding:5px 13px!important;
  display:inline-block;line-height:1.25;box-shadow:0 2px 8px rgba(15,157,88,.14)}
.vglp:hover{background:#0f9d58;color:#fff!important;border-color:#0f9d58;text-decoration:none!important}
.vprice-row{align-items:center!important;gap:12px!important}
.vask{font-size:14px!important;font-weight:800!important;color:#0b1a2b!important}

/* ==================================================================
   PHASE 4 — COLOURFUL BLOCKS ON THE LISTING PAGE
   ================================================================== */
.vcl-trust{max-width:1400px;margin:0 auto 18px;padding:0 22px}
.vcl-trust .trustpanel{margin:0}
@media(max-width:1000px){.vcl-trust{padding:0 12px}}
.vblk-save{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#eefaf2,#f7fdf9);
  border:1px solid #cdead9;border-radius:9px;padding:9px 12px;margin-bottom:11px}
.vblk-save .cn{width:26px;height:26px;border-radius:50%;background:#0f9d58;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.vblk-save b{font-size:12.8px;color:#0b6b3c;display:block;line-height:1.3}
.vblk-save small{font-size:11.4px;color:#5f7f6d}
.vblk-deal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fdf6ec;
  border:1px solid #f0dcb8;border-radius:9px;padding:9px 12px;margin-bottom:11px}
.vblk-deal .dl{border:1.4px dashed var(--red);color:var(--red);font-size:9.6px;font-weight:800;
  line-height:1.15;text-align:center;padding:4px 7px;border-radius:5px;flex:0 0 auto}
.vblk-deal .dt{font-size:12.8px;color:#5b4a2a}
.vblk-deal .dt b{color:#0b1a2b}
.vblk-deal .xo{margin-left:auto;background:#0f9d58;color:#fff;font-size:11.4px;font-weight:800;
  padding:4px 11px;border-radius:20px}
.vblk-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vblk-badges span{font-size:11.2px;font-weight:700;color:#41505f;background:#f2f5f8;
  border:1px solid var(--line);border-radius:20px;padding:4px 10px}
.vblk-name{background:linear-gradient(90deg,#f7fafd,#fff)}

/* ==================================================================
   PHASE 5 — CHATBOT (PackForge pattern)
   ================================================================== */
.vchat{background:#f05a28;border-radius:50%;width:58px;height:58px;padding:0;
  justify-content:center;box-shadow:0 10px 26px rgba(240,90,40,.45)}
.vchat:hover{background:#d94a1c}
.vchat .ctx{display:none}
.vchat .cav{width:30px;height:30px;background:none}
.vchat .cav svg{width:28px;height:28px}

.vchat-box{width:392px;max-width:calc(100vw - 24px);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.35);bottom:20px;right:20px}
.vcb-h{background:#0f1c2b;padding:15px 16px;align-items:flex-start;gap:12px}
.vcb-h .cav{width:38px;height:38px;border-radius:10px;background:#f05a28}
.vcb-h .cav svg{width:22px;height:22px}
.vcb-h b{font-size:15px;font-weight:800;line-height:1.25}
.vcb-h small{font-size:11.8px;color:#9fb0c0;display:block;margin-top:2px}
.vcb-x{font-size:20px;color:#8fa0b0}
.vcb-body{background:#f6f8fa;padding:16px;min-height:280px;max-height:340px}
.vcb-msg{background:#fff;border:1px solid #e4e9ee;border-radius:12px;padding:12px 14px;
  font-size:13.4px;line-height:1.7;color:#33414f;margin-bottom:11px;max-width:92%;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.vcb-me{background:#0f1c2b;color:#fff;border:none;margin-left:auto;max-width:80%}
.vcb-q{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.vcb-q button{background:#fff;border:1px solid #dbe2e9;color:#33414f;font-size:12.4px;
  font-weight:600;padding:8px 13px;border-radius:22px;cursor:pointer;font-family:inherit;text-align:left}
.vcb-q button:hover{border-color:#f05a28;color:#f05a28}
.vcb-f{padding:12px;background:#fff;border-top:1px solid #e7ebef;gap:10px;align-items:center}
.vcb-f input{border:1.5px solid #dbe2e9;border-radius:26px;padding:12px 16px;font-size:13.4px;background:#f9fafb}
.vcb-f input:focus{border-color:#f05a28;background:#fff}
.vcb-f button{background:#f05a28;border:none;color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:17px;cursor:pointer;flex:0 0 auto;padding:0;display:flex;align-items:center;justify-content:center}
.vcb-f button:hover{background:#d94a1c}
.vcb-lead{background:#fff;border:1px solid #e4e9ee;border-radius:12px;padding:13px;margin-bottom:11px}
.vcb-lead input{width:100%;border:1.5px solid #dbe2e9;border-radius:8px;padding:10px 12px;
  font-size:13.2px;font-family:inherit;outline:none;margin-bottom:9px}
.vcb-lead input:focus{border-color:#f05a28}
.vcb-lead button{width:100%;background:#f05a28;border:none;color:#fff;font-size:13.4px;
  font-weight:800;padding:11px;border-radius:8px;cursor:pointer;font-family:inherit}
.vcb-lead .mob{display:flex;border:1.5px solid #dbe2e9;border-radius:8px;overflow:hidden;margin-bottom:9px}
.vcb-lead .mob span{background:#f0f3f5;padding:10px 10px;font-size:12.8px;font-weight:700;color:#41505f}
.vcb-lead .mob input{border:none;border-radius:0;margin:0;flex:1;min-width:0}
.vcb-wa{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.vcb-wa a{flex:1;text-align:center;font-size:12px;font-weight:800;padding:9px 6px;border-radius:8px;
  background:#25d366;color:#fff;min-width:110px}
.vcb-wa a.ml{background:#0f1c2b}

/* ============ PID PAGE — FULL ADD TO CART BOX (product-page style) ============ */
.vbuy{border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:12px;
  background:linear-gradient(180deg,#fbfcfe,#f4f7fa)}
.vb-incl{font-size:12.4px;color:#8a97a4;margin-bottom:3px}
.vb-price{font-size:27px;font-weight:800;color:#0b1a2b;line-height:1.15}
.vb-price .gst{font-size:13.4px;font-weight:700;color:#5b6773}
.vb-mrp{font-size:13px;color:#8a97a4;margin-top:4px}
.vb-mrp s{margin:0 3px}
.vb-mrp .off{color:#0f9d58;font-weight:800;margin-left:8px}
.vb-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px}
.vb-qty b{font-size:13.4px;color:#0b1a2b}
.vb-step{display:flex;align-items:center;gap:7px}
.vb-step button{width:34px;height:34px;border:1.5px solid var(--line);background:#fff;border-radius:8px;
  font-size:17px;font-weight:700;color:#41505f;cursor:pointer;font-family:inherit;line-height:1}
.vb-step button:hover{border-color:var(--red);color:var(--red)}
.vb-step input{width:52px;height:34px;text-align:center;border:1.5px solid var(--line);border-radius:8px;
  font-size:14px;font-weight:700;font-family:inherit;background:#fff;color:#0b1a2b}
.vb-cart,.vb-buy{width:100%;border:none;border-radius:9px;font-size:14.6px;font-weight:800;
  padding:13px;cursor:pointer;font-family:inherit;letter-spacing:.3px}
.vb-cart{background:#2b7de9;color:#fff;margin-bottom:9px}
.vb-cart:hover{background:#1f63c0}
.vb-buy{background:var(--red);color:#fff}
.vb-buy:hover{background:var(--red-dark)}
.vprice-row{padding:9px 12px!important;margin-bottom:11px!important}

/* ============ TRUST PANEL — SAMPLE 1 (compact, inside each block) ============ */
.trustpanel.tp-mini{margin-top:14px}
.trustpanel.tp-mini .tp-h{font-size:13.4px}
.trustpanel.tp-mini .tp-badge{font-size:11.6px}
.trustpanel.tp-mini .tp-stats b{font-size:16px}
.trustpanel.tp-mini .tp-stats small{font-size:10.8px}
.trustpanel.tp-mini .tp-foot span{font-size:11.4px}

/* ============ TRUST PANEL — SAMPLE 2 (wide band on top) ============ */
.trustpanel.tp-wide .tp-h{font-size:16.5px}
.trustpanel.tp-wide .tp-stats b{font-size:22px}

/* ============ SAMPLE SWITCHER ============ */
.vtsw{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:26px;padding:6px 8px 6px 14px}
.vtsw span{font-size:11.8px;font-weight:700;color:#c6d7e6;letter-spacing:.3px}
.vtsw button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#e6eef6;
  font-size:11.8px;font-weight:700;padding:6px 13px;border-radius:20px;cursor:pointer;font-family:inherit}
.vtsw button:hover{border-color:#fff;color:#fff}
.vtsw button.on{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:600px){.vtsw{border-radius:12px;padding:8px 10px}.vtsw span{width:100%}}

/* ============ STYLISH THANK-YOU POPUP (auto dismiss) ============ */
.vthx{position:fixed;inset:0;z-index:9800;display:none;align-items:center;justify-content:center;
  background:rgba(8,17,27,.42);backdrop-filter:blur(3px);padding:22px}
.vthx.on{display:flex;animation:vthxIn .28s ease-out}
.vthx.out{display:flex;animation:vthxOut .4s ease-in forwards}
@keyframes vthxIn{from{opacity:0}to{opacity:1}}
@keyframes vthxOut{from{opacity:1}to{opacity:0}}
.vthx-card{background:#fff;border-radius:20px;padding:34px 34px 26px;text-align:center;
  max-width:352px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.34);position:relative;overflow:hidden;
  animation:vthxPop .42s cubic-bezier(.16,1,.3,1)}
@keyframes vthxPop{from{transform:translateY(22px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.vthx-tick{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;
  background:linear-gradient(135deg,#0f9d58,#15c46f);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(15,157,88,.36)}
.vthx-tick svg{width:46px;height:46px}
.vthx-tick .c{stroke:rgba(255,255,255,.5);stroke-width:2.4;stroke-dasharray:145;stroke-dashoffset:145;
  animation:vthxC .55s .1s ease-out forwards}
.vthx-tick .t{stroke:#fff;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:vthxT .4s .45s ease-out forwards}
@keyframes vthxC{to{stroke-dashoffset:0}}
@keyframes vthxT{to{stroke-dashoffset:0}}
.vthx-card b{display:block;font-size:23px;font-weight:800;color:#0b1a2b;margin-bottom:8px}
.vthx-card p{font-size:13.6px;line-height:1.65;color:#5b6773;margin:0 0 12px}
.vthx-card p span{display:inline-block;margin-top:5px;font-size:15px;font-weight:800;color:#0b1a2b;
  background:#eefaf2;border:1px solid #bfe7ce;border-radius:22px;padding:4px 16px}
.vthx-card small{display:block;font-size:12.2px;line-height:1.6;color:#8a97a4}
.vthx-card small i{font-style:normal;font-weight:700;color:#41505f}
.vthx-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#eef1f4}
.vthx-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#0f9d58,#15c46f);
  transform-origin:left;animation:vthxBar 3.8s linear forwards}
@keyframes vthxBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:480px){.vthx-card{padding:28px 24px 22px}.vthx-card b{font-size:20px}}

/* ============ RIGHT COLUMN RE-ALIGNED after removing the duplicate rows ============ */
.vsold{margin-bottom:12px}
.vsold .v-int{margin-top:10px}
.vqbox{margin-top:0}
.vinfo>*:last-child{margin-bottom:0}
.trustpanel.tp-mini{margin-top:16px;margin-bottom:2px}

/* ============ OUR PRODUCT RANGE — collapsed on phones only ============ */
.vcl-side>h3{display:flex;align-items:center;gap:9px}
.vcl-side>h3>span{flex:1;min-width:0}
.vcl-side>h3 .sd-n{font-style:normal;font-size:10.6px;font-weight:800;letter-spacing:.3px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  padding:2px 8px;border-radius:20px;flex:0 0 auto}
.vcl-side>h3 .sd-chev{display:none}

@media(max-width:1000px){
  .vcl-side>h3{cursor:pointer;padding:15px 16px;font-size:13.4px;-webkit-tap-highlight-color:transparent}
  .vcl-side>h3 .sd-chev{display:block;font-style:normal;font-size:20px;font-weight:700;
    line-height:1;color:#9fb4c8;flex:0 0 auto;transition:transform .22s}
  .vcl-side>h3:active{background:#14324f}
  /* closed by default on a phone */
  .vcl-side>ul{display:none}
  .vcl-side.open>ul{display:block;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .vcl-side.open>h3 .sd-chev{transform:rotate(90deg);color:#fff}
  .vcl-side{margin-bottom:14px}
}

/* ============ MEGA SECTION PANELS (replaces the repeated circles) ============ */
.mega-left h3{font-size:19px;font-weight:800;color:#0b1a2b;margin:0 0 7px;line-height:1.25}
.mega-left .mp-sub{font-size:13px;line-height:1.65;color:#5b6773;margin:0 0 16px}

/* type: range — three hard facts */
.mp-facts{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.mp-fact{background:rgba(255,255,255,.72);border:1px solid rgba(11,26,43,.09);border-radius:10px;padding:10px 13px}
.mp-fact b{display:block;font-size:15px;font-weight:800;color:#0b1a2b;line-height:1.2}
.mp-fact small{display:block;font-size:11.6px;color:#6b7a89;margin-top:2px;line-height:1.4}

/* type: industries — chips */
.mp-tag-h{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#8a97a4;margin-bottom:9px}
.mp-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.mp-tags span{background:rgba(255,255,255,.8);border:1px solid rgba(11,26,43,.10);border-radius:20px;
  padding:6px 12px;font-size:12.2px;font-weight:600;color:#41505f}

/* type: why — ticked reasons */
.mp-why{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.mp-w{display:flex;gap:10px;align-items:flex-start}
.mp-w i{width:20px;height:20px;border-radius:50%;background:#0f9d58;color:#fff;font-style:normal;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
.mp-w b{display:block;font-size:13.4px;font-weight:800;color:#0b1a2b;line-height:1.3}
.mp-w small{display:block;font-size:11.8px;color:#6b7a89;margin-top:1px;line-height:1.45}

.mp-cta{background:var(--red);border:none;color:#fff;font-size:13px;font-weight:800;
  padding:11px 20px;border-radius:9px;cursor:pointer;font-family:inherit}
.mp-cta:hover{background:var(--red-dark)}
@media(max-width:900px){
  .mega-left h3{font-size:16.5px}
  .mega-left .mp-sub{font-size:12.4px;margin-bottom:13px}
  .mp-fact b{font-size:14px}
  .mp-cta{width:100%}
}

/* ============ PLACEHOLDER CARDS THAT FINISH A SHORT ROW ============ */
.soon-card{position:relative;background:#fff;border:1px dashed #c9d4de;border-radius:12px;
  padding:12px;display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.soon-card:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.soon-badge{position:absolute;top:10px;left:10px;background:#eef2f6;color:#6b7a89;font-size:9.6px;
  font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:20px;text-transform:uppercase}
.soon-card .simg{height:132px;display:flex;align-items:center;justify-content:center;padding:16px 8px 6px}
.soon-card .simg svg{max-width:104px;max-height:104px;opacity:.85}
.soon-card .nm{font-size:12.8px;font-weight:700;color:#1a2b3c;line-height:1.4;margin-bottom:5px;
  min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soon-note{font-size:11px;color:#8a97a4;line-height:1.4;margin-bottom:10px;flex:1}
.soon-btn{width:100%;background:#fff;border:1.5px solid var(--red);color:var(--red);font-size:11.6px;
  font-weight:800;padding:8px;border-radius:8px;cursor:pointer;font-family:inherit}
.soon-card:hover .soon-btn{background:var(--red);color:#fff}

/* keep the four tiles on one tidy row */
.cat-tiles{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:14px}
@media(max-width:1100px){.cat-tiles{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:520px){.cat-tiles{grid-template-columns:repeat(2,1fr)!important;gap:10px}}

/* ==================================================================
   MOBILE — bottom navigation + category sheet
   ================================================================== */
.mnav{display:none}
.mSheet-ov{display:none}

@media(max-width:999px){

  /* ---------- bottom navigation bar ---------- */
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8500;
    background:#fff;border-top:1px solid #e5e9ed;
    box-shadow:0 -3px 14px rgba(15,32,50,.10);
    padding:5px 2px calc(4px + env(safe-area-inset-bottom,0px));}
  .mnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:5px 2px 3px;color:#6b7a89;position:relative;min-width:0;cursor:pointer}
  .mnav a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .mnav a span{font-size:10.4px;font-weight:600;line-height:1.2;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mnav a.on{color:var(--red)}
  .mnav a.on svg{stroke-width:2.3}
  .mnav a.on::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
    width:30px;height:3px;border-radius:0 0 4px 4px;background:var(--red)}
  .mnav .bdg{position:absolute;top:1px;right:calc(50% - 20px);min-width:16px;height:16px;
    border-radius:9px;background:var(--red);color:#fff;font-size:9.6px;font-weight:800;
    display:none;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}

  /* keep the page and the floating chat clear of the bar */
  body{padding-bottom:60px}
  .vchat,.vchat-box{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .to-top{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .vdiag{bottom:calc(70px + env(safe-area-inset-bottom,0px))}

  /* ---------- category sheet ---------- */
  .mSheet-ov{display:block;position:fixed;inset:0;z-index:8800;background:rgba(8,17,27,.5);
    opacity:0;visibility:hidden;transition:opacity .22s}
  .mSheet-ov.on{opacity:1;visibility:visible}
  .mSheet{position:fixed;left:0;right:0;bottom:0;max-height:86vh;background:#fff;
    border-radius:18px 18px 0 0;transform:translateY(102%);transition:transform .28s cubic-bezier(.16,1,.3,1);
    display:flex;flex-direction:column;overflow:hidden;z-index:8801;
    box-shadow:0 -12px 40px rgba(0,0,0,.28)}
  .mSheet-ov.on .mSheet{transform:none}
  .mSheet::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:3px;background:#d6dde3}

  .ms-head{display:flex;align-items:center;gap:11px;padding:20px 16px 13px;
    border-bottom:1px solid var(--line);flex:0 0 auto}
  .ms-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
    justify-content:center;flex:0 0 auto}
  .ms-ico svg{width:24px;height:24px}
  .ms-head b{font-size:16px;font-weight:800;color:#0b1a2b;flex:1;min-width:0;line-height:1.25}
  .ms-x{background:#f2f5f8;border:none;width:32px;height:32px;border-radius:50%;
    font-size:15px;color:#5b6773;cursor:pointer;flex:0 0 auto;font-family:inherit}

  .ms-body{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;padding:4px 0 6px}
  .ms-row>button{width:100%;display:flex;align-items:center;justify-content:space-between;
    gap:12px;background:none;border:none;padding:14px 16px;font-size:14px;font-weight:600;
    color:#1a2b3c;text-align:left;font-family:inherit;cursor:pointer;line-height:1.35}
  .ms-row>button:active{background:#f6f8fa}
  .ms-row>button i{font-style:normal;color:#b3bfca;font-size:19px;font-weight:700;
    flex:0 0 auto;transition:transform .2s}
  .ms-row+.ms-row{border-top:1px solid #f1f4f7}
  .ms-row.open>button{color:var(--red);background:#fdf1f2}
  .ms-row.open>button i.chev{transform:rotate(90deg);color:var(--red)}
  .ms-l3{display:none;background:#fafbfc;padding:2px 0 6px}
  .ms-row.open .ms-l3{display:block}
  .ms-l3 a{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 16px 11px 30px;font-size:13.2px;color:#41505f;line-height:1.4;
    border-left:3px solid transparent}
  .ms-l3 a:active{background:#fff;border-left-color:var(--red);color:var(--red)}
  .ms-l3 a i{font-style:normal;color:#c3ccd4;font-size:16px}

  .ms-foot{flex:0 0 auto;padding:11px 16px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);background:#fff}
  .ms-foot button{width:100%;background:var(--red);border:none;color:#fff;font-size:14px;
    font-weight:800;padding:13px;border-radius:10px;cursor:pointer;font-family:inherit}

  body.m-lock{overflow:hidden}

  /* the hover dropdown is useless on a touch screen — the sheet replaces it */
  .citem:hover .cat-dd{display:none}
  .citem{cursor:pointer}
}

@media(max-width:700px){
  .mnav a span{font-size:9.8px}
  .mnav a svg{width:21px;height:21px}
}

/* ================= CHATBOT — rebuilt ================= */
/* ---- bottom action bar: Contact / WhatsApp / Call (Indique pattern) ---- */
.vcb-acts{display:flex;background:#fff;border-top:1px solid #e8ecf0}
.vcb-acts a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 4px 11px;font-size:11.6px;font-weight:700;color:#5b6773;
  border-right:1px solid #eef1f4;text-decoration:none;cursor:pointer;
  transition:color .15s,background .15s}
.vcb-acts a:last-child{border-right:none}
.vcb-acts a svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.vcb-acts a:hover{background:#fafbfc}
.vcb-acts a.va-contact:hover{color:#c69a3f}
.vcb-acts a.va-wa:hover{color:#1fae55}
.vcb-acts a.va-call:hover{color:#1fae55}

.vchat.has-history::after{content:'';position:absolute;top:6px;right:6px;width:10px;height:10px;
  border-radius:50%;background:#3adf7c;border:2px solid #0b1a2b}

.vchat-box{width:392px;max-width:calc(100vw - 24px)}
.vcb-h{align-items:center}
.vcb-h .who{flex:1;min-width:0}
.vcb-h .who b{font-size:14.4px;display:block;line-height:1.2}
.vcb-h .who small{font-size:10.8px;color:#9fb0c0;display:block;margin-top:1px}
.vcb-tools{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.vcb-tools button{background:none;border:none;color:#9fb0c0;font-size:15px;cursor:pointer;
  padding:4px 5px;border-radius:6px;line-height:1}
.vcb-tools button:hover{background:rgba(255,255,255,.12);color:#fff}

/* typing dots */
.vcb-typing{display:flex;gap:5px;align-items:center;width:auto;padding:13px 15px!important}
.vcb-typing i{width:7px;height:7px;border-radius:50%;background:#b6c2ce;display:block;
  animation:vcDot 1.1s ease-in-out infinite}
.vcb-typing i:nth-child(2){animation-delay:.16s}
.vcb-typing i:nth-child(3){animation-delay:.32s}
@keyframes vcDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* tappable menu inside a bubble */
.vc-menu{margin-top:10px;border-top:1px solid #eef1f4}
.vc-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 2px;font-size:12.9px;color:#1a2b3c;border-bottom:1px solid #f1f4f7;line-height:1.35}
.vc-menu a:last-child{border-bottom:none}
.vc-menu a:hover{color:var(--red)}
.vc-menu a span{min-width:0}
.vc-menu a em{font-style:normal;font-size:11.4px;color:#8a97a4;flex:0 0 auto;font-weight:700}
.vc-menu a:hover em{color:var(--red)}

/* price line and spec rows */
.vc-price{font-size:16px;font-weight:800;color:#0b1a2b;margin:7px 0 9px}
.vc-price s{font-size:12.4px;color:#94a2b0;font-weight:400;margin-left:5px}
.vc-price em{font-style:normal;font-size:11.6px;color:#5b6773;font-weight:600}
.vc-kv{display:flex;gap:8px;font-size:12.2px;line-height:1.5;padding:3px 0;border-top:1px solid #f1f4f7}
.vc-kv b{color:#8a97a4;font-weight:600;flex:0 0 40%}
.vc-kv span{color:#2b3a48;min-width:0}

/* comparison table */
.vc-cmp{width:100%;border-collapse:collapse;font-size:11.6px;margin:4px 0 6px}
.vc-cmp th{background:#0f1c2b;color:#fff;padding:6px 7px;text-align:left;font-weight:700;font-size:11px}
.vc-cmp td{border:1px solid #e7ebef;padding:5px 7px;color:#41505f;vertical-align:top}
.vc-cmp tr.dif td{font-weight:700;color:#0b1a2b;background:#fffdf2}

/* lead cards */
.vcb-lead input{width:100%}
.vcb-lead small{line-height:1.5}

@media(max-width:600px){
  .vchat-box{width:calc(100vw - 20px);right:10px}
  .vc-menu a{font-size:12.4px;padding:10px 2px}
}

/* ============ FREEZE: black strip + header (search bar). Nothing else. ============ */
.topstrip{position:sticky!important;top:0;z-index:340;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.hdr{position:sticky!important;top:var(--stripH,34px);z-index:330}
/* the category row scrolls away with the page — only the search bar stays */
.catrow{position:static!important;box-shadow:0 6px 16px -10px rgba(15,32,50,.22)}
.catrow::after{display:none}
html{scroll-padding-top:calc(var(--stripH,34px) + var(--hdrH,63px) + 8px)}
.vcl-side{top:calc(var(--stripH,34px) + var(--hdrH,63px) + 12px)!important;
  max-height:calc(100dvh - var(--stripH,34px) - var(--hdrH,63px) - 26px)!important}
@media(max-width:1000px){.vcl-side{position:static!important;max-height:none!important}}

/* ============ FOOTER — social block under Email Us ============ */
footer .ft-contact{grid-template-columns:1.35fr 1fr 1.15fr;align-items:start}
footer .ft-blurb{font-size:13px;line-height:1.75;color:#5b6773;margin:0;max-width:400px}
footer .fc-socs{margin-top:11px;padding-top:10px;border-top:1px solid #edf0f3}
footer .fc-sl{display:block;font-size:11.4px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:#8a97a4;margin-bottom:7px}
footer .fc-si{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
footer .fc-si .soc2{transition:transform .15s}
/* ---- social icons: make them impossible to render wrong ----
   Seen in the wild: the Instagram circle painted only its lower half (top
   half stayed white) and the glyph came out grey instead of white. A solid
   background-color under the gradient means the circle can never be white,
   and forcing the glyph colour stops it inheriting the footer's grey. */
footer .fc-si a.soc2{color:#fff!important}
footer .fc-si a.soc2 svg{color:#fff!important;fill:#fff!important}
footer .fc-si a.soc2 svg path{fill:#fff!important}
footer .fc-si a.soc2.fb{background-color:#1877f2!important;background-image:none!important}
footer .fc-si a.soc2.yt{background-color:#ff0000!important;background-image:none!important}
footer .fc-si a.soc2.li{background-color:#404b52!important;background-image:none!important}
footer .fc-si a.soc2.x {background-color:#3d4144!important;background-image:none!important}
footer .fc-si a.soc2.ig{
  background-color:#a73fad!important;
  background-image:radial-gradient(circle at 30% 110%,#d8489b 0%,#af40aa 42%,#8b3ab8 82%)!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;
  background-position:center!important}
#recentSec.sv-off{display:none!important}
footer .fc-si .soc2:hover{transform:translateY(-2px)}
@media(max-width:900px){
  footer .ft-contact{grid-template-columns:1fr}
  footer .ft-blurb{max-width:none}
  footer .fc-socs{display:flex;flex-direction:column;align-items:center}
  footer .fc-si{justify-content:center}
}

/* ============ CHAT FAB — pill ============ */
.vchat{background:#0b1a2b;border-radius:40px;width:auto;height:auto;
  padding:10px 20px 10px 12px;gap:11px;justify-content:flex-start;
  box-shadow:0 8px 26px rgba(0,0,0,.32)}
.vchat:hover{background:#14324f}
.vchat .cav{width:36px;height:36px;border-radius:50%;background:#f05a28;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vchat .cav svg{width:21px;height:21px}
.vchat .ctx{display:block;text-align:left;line-height:1.25}
.vchat .ctx b{display:block;font-size:13.4px;font-weight:800;color:#fff}
.vchat .ctx span{font-size:10.8px;color:#8fd7a8}
.vchat .ctx span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#3adf7c;margin-right:5px;vertical-align:middle}
@media(max-width:600px){.vchat{padding:9px 16px 9px 9px}.vchat .ctx b{font-size:12.4px}}

/* the long strip message is hidden under 760px, so carry a short one there */
.topstrip .msg-sm{display:none;font-size:12px;color:#e8edf2;text-align:center}
@media(max-width:760px){
  .topstrip .msg-sm{display:block;flex:1 0 100%;order:3;margin-top:2px}
  .topstrip .wrap{row-gap:2px}
}
@media(max-width:420px){.topstrip .msg-sm{font-size:11px}}

/* ---- logo wordmark: heavier and larger ---- */
.logo-txt b{font-weight:900!important;font-size:22px!important;letter-spacing:-.3px;color:#111!important}
.logo-txt small{font-weight:900!important;font-size:10.5px!important;letter-spacing:1.5px}

@media(max-width:760px){
  /* search gets a full-width row of its own, under the logo row */
  .hdr-in{flex-wrap:wrap;row-gap:9px;align-items:center}
  .logo{order:1}
  .loc{order:2;flex:1;min-width:0}
  .hdr-r{order:3;margin-left:auto;flex:0 0 auto}
  .srch{order:4;flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:none!important}
  .srch input{padding:12px 14px!important;font-size:14px!important}
  .srch input::placeholder{font-size:13.5px!important}
  .srch button{padding:0 18px!important;font-size:17px!important}
  .srch-dd{left:0;right:0;width:auto}
}
@media(max-width:640px){
  .logo-txt b{font-size:15px!important}
  .logo-txt small{font-size:8.5px!important;letter-spacing:.9px}
  .logo-flip{width:86px}
}
@media(max-width:360px){
  .logo-flip{display:flex!important;width:74px}
  .logo-txt b{font-size:13.5px!important}
}

/* the two headers that moved out of the icon row */
.dots-dd #ddMoved a{display:flex;align-items:center;gap:10px}
.dots-dd .dd-ico{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.dots-dd .dd-ico svg{width:22px;height:22px}
.dots-dd .dd-new{margin-left:auto;font-style:normal;background:#ffd814;color:#8a2b06;
  font-size:8.5px;font-weight:900;padding:1px 5px;border-radius:3px;letter-spacing:.3px}

/* labels were 11px — up 20% to 13.2px. The row now holds 12 items instead
   of 14, so there is room for the wider labels without crowding. */
.citem b{font-size:13.2px!important;line-height:1.3!important;font-weight:600}
.citem{min-width:96px!important;max-width:118px!important;padding:5px 4px!important}
.catrow-in{gap:6px!important;padding:9px 14px!important}
/* the same 13.2px on every screen — the row already scrolls sideways on a
   phone, so the wider labels simply mean a little more scrolling. */
@media(max-width:1100px){.citem{min-width:92px!important;max-width:114px!important}}
@media(max-width:760px){.citem{min-width:90px!important;max-width:110px!important}}
@media(max-width:420px){.citem{min-width:88px!important;max-width:106px!important}}

/* Three things were out of line across the tile rows:
   1. a tile with a real photograph showed a white image area, because the
      photo covers the box; a tile falling back to an SVG icon showed the
      beige tile gradient instead. Side by side they looked like two designs.
   2. a label that wrapped to two lines ("Wireless Transmitter-Receiver
      Systems", "Gas Detector Accessories & Calibration") pushed its own
      "Explore Now" down, so the row went ragged.
   3. icons sat at 120px with a heavy drop shadow while photos bled to the
      edges, so the optical weight of the two kinds never matched.          */

.cat-tiles{align-items:stretch}

.ctile{display:flex;flex-direction:column;padding-bottom:14px}

/* the image area is always white, photo or icon */
.ctile .ci2{background:#fff;flex:0 0 auto}
.ctile .ci2 svg{width:96px;height:96px;
  filter:drop-shadow(0 6px 10px rgba(30,40,55,.14))}
.ctile .ci2 img{object-fit:cover;object-position:center bottom}

.ctile .shelf{flex:0 0 auto;margin:-1px 0 12px}

/* every label reserves two lines, so the shelf and "Explore Now" line up */
.ctile b{min-height:2.7em;display:flex;align-items:flex-start;justify-content:center;
  line-height:1.32;padding:0 8px;margin-bottom:2px;font-size:15px}
.ctile small{display:block;margin-top:auto}

@media(max-width:1100px){
  .ctile .ci2 svg{width:86px;height:86px}
  .ctile b{font-size:14px;min-height:2.7em}
}
@media(max-width:520px){
  .ctile .ci2 svg{width:70px;height:70px}
  /* two columns on a phone means a narrow tile, and names such as
     "Current / Voltage Transducers" take three lines there. Reserve three,
     measured — two was leaving a 16px step between tiles. */
  .ctile b{font-size:12.8px;padding:0 6px;min-height:4em}
  .ctile small{font-size:11.6px}
}

/* ================= LOGO SHINE + SPARKLES =================
   A light sweep travels across the mark and the wordmark, and six small
   four-point stars twinkle around them on their own timings. Pure CSS, so
   it costs nothing to run and never blocks the page.                     */

.logo.shiny{position:relative;overflow:visible;isolation:isolate}

/* --- the sweep across the whole lockup --- */
.logo.shiny::after{
  content:'';position:absolute;top:-6px;bottom:-6px;left:-40%;width:36%;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);pointer-events:none;z-index:4;
  animation:vSweep 5.2s cubic-bezier(.5,0,.35,1) infinite;
  mix-blend-mode:overlay}
@keyframes vSweep{
  0%,58%{left:-40%;opacity:0}
  60%{opacity:1}
  92%,100%{left:118%;opacity:0}}

/* --- the red V keeps a soft breathing glow and its own inner shine --- */
.logo.shiny .logo-mark{position:relative;overflow:hidden;z-index:2;
  animation:vGlow 3.4s ease-in-out infinite}
@keyframes vGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(217,35,45,0)}
  50%{box-shadow:0 0 14px 2px rgba(217,35,45,.42)}}
.logo.shiny .logo-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:vMarkShine 5.2s cubic-bezier(.5,0,.35,1) infinite}
@keyframes vMarkShine{
  0%,54%{transform:translateX(-120%)}
  78%,100%{transform:translateX(120%)}}

/* --- six twinkling stars --- */
.logo.shiny .spk{position:absolute;width:11px;height:11px;pointer-events:none;
  z-index:5;opacity:0;transform:scale(.3) rotate(0deg);
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0 8%,transparent 9%),
    conic-gradient(from 0deg,
      transparent 0 8%, rgba(255,214,102,.98) 12%, transparent 16%,
      transparent 33%, rgba(255,214,102,.98) 37%, transparent 41%,
      transparent 58%, rgba(255,214,102,.98) 62%, transparent 66%,
      transparent 83%, rgba(255,214,102,.98) 87%, transparent 91%);
  -webkit-mask:radial-gradient(circle,#000 0 62%,transparent 63%);
          mask:radial-gradient(circle,#000 0 62%,transparent 63%);
  filter:drop-shadow(0 0 4px rgba(255,190,60,.9));
  animation:vTwinkle 5.2s ease-in-out infinite}
@keyframes vTwinkle{
  0%,52%{opacity:0;transform:scale(.25) rotate(0deg)}
  62%{opacity:1;transform:scale(1.15) rotate(70deg)}
  70%{opacity:.85;transform:scale(.8) rotate(120deg)}
  80%{opacity:0;transform:scale(.25) rotate(180deg)}
  100%{opacity:0;transform:scale(.25) rotate(180deg)}}

.logo.shiny .s1{left:-7px; top:-8px;  animation-delay:0s;    width:13px;height:13px}
.logo.shiny .s2{left:26px; top:-11px; animation-delay:.16s}
.logo.shiny .s3{left:52px; top:22px;  animation-delay:.30s;  width:9px;height:9px}
.logo.shiny .s4{right:6px; top:-9px;  animation-delay:.42s;  width:12px;height:12px}
.logo.shiny .s5{right:-8px;bottom:-6px;animation-delay:.55s}
.logo.shiny .s6{left:14px; bottom:-10px;animation-delay:.68s; width:9px;height:9px}

/* the wordmark brightens for a moment as the sweep passes it */
.logo.shiny .logo-txt b{animation:vLift 5.2s ease-in-out infinite}
@keyframes vLift{
  0%,56%{text-shadow:none}
  66%{text-shadow:0 0 12px rgba(255,205,80,.55)}
  84%,100%{text-shadow:none}}

@media(max-width:640px){
  .logo.shiny .spk{width:8px;height:8px}
  .logo.shiny .s1,.logo.shiny .s4{width:10px;height:10px}
}
/* respect a visitor who has asked for less motion */
@media(prefers-reduced-motion:reduce){
  .logo.shiny::after,.logo.shiny .spk,.logo.shiny .logo-mark,
  .logo.shiny .logo-mark::after,.logo.shiny .logo-txt b{animation:none}
  .logo.shiny .spk{opacity:0}
}

/* Measured on the rendered page, three things did not line up:
     left panel top   807  vs  tiles row top   793   -> 14px lower
     left panel bottom     vs  tiles row bottom      -> 22 to 75px longer
     product row left  94  vs  panel left       44   -> 50px inset each side
   The 14px came from a margin on the panel, the inset from margins that
   were reserving room for scroll arrows, and the height difference from
   the grid being set to align-items:start.                              */

.mega-top{align-items:stretch!important}
.mega-left{margin-top:0!important;align-self:stretch!important;
  padding:18px 16px!important}
.mega-left h3{margin-bottom:6px!important}
.mega-left .mp-sub{margin-bottom:13px!important}
.mp-facts{gap:8px!important;margin-bottom:13px!important}
.mp-fact{padding:9px 12px!important}
.mp-tags{margin-bottom:13px!important}
.mp-why{gap:10px!important;margin-bottom:13px!important}
.mp-cta{margin-top:auto!important}

/* One row height for every section. The tallest panel measures 356px, so
   the grid row itself is set to at least that. Putting the minimum on the
   row rather than on the panel is what makes both children stretch to the
   same height — a min-height on the panel alone left it at 356 while the
   row grew to 369 in two sections. */
.mega-top{grid-auto-rows:minmax(360px,auto)!important}
.mega-left,.cat-tiles{min-height:0!important;height:auto!important}

/* Name collision: the panel carries the modifier class .mp-why (and .mp-range,
   .mp-industries) AND the inner block uses the same names. The inner block's
   margin-bottom was therefore landing on the panel too, lifting its bottom
   edge 13px above the tiles in the two why-buy sections. */
.mega-left.mp-why,.mega-left.mp-range,.mega-left.mp-industries{
  margin-bottom:0!important;gap:0!important}

/* Under 1100px the four tiles fall into two rows. Left alone the two rows
   take their own natural heights — measured 289 vs 266 at 1100px and
   354 vs 313 at 900px — so the second row sat higher than the first.
   Equal fractions make both rows share the height. */
.cat-tiles{grid-auto-rows:1fr!important;align-content:stretch}

/* Four tiles beside a 380px panel means each tile is only 143px wide by the
   time the window reaches 1101px, and names such as "Wireless Transmitter-
   Receiver Systems" then run to four lines while their neighbours use one.
   Measured tile widths: 228px at 1440, 208px at 1360, 188px at 1280,
   143px at 1101. Two lines hold comfortably down to 208px, so the layout
   drops to two columns below 1340px, where each tile is around 390px. */
@media(max-width:1340px){
  .cat-tiles{grid-template-columns:repeat(2,1fr)!important}
}

/* The image area absorbs whatever height is left, instead of the gap
   opening up between the label and "Explore Now" (43px in some sections,
   2px in others). Shelf, label and Explore Now stay a fixed block at the
   bottom, so they land on the same line in every tile of every section. */
.ctile .ci2{flex:1 1 auto!important;aspect-ratio:auto!important;min-height:170px}
.ctile small{margin-top:0!important}

/* the product row now starts and ends exactly where the panel and the
   tiles do; the arrows sit over the ends instead of pushing the row in */
.mega-prods{margin-left:0!important;margin-right:0!important;
  padding:4px 0 6px!important;scroll-padding-left:0}
.mega-panel .row-arrow{left:auto;right:-4px}
.mega-panel .row-arrow.left{left:-4px;right:auto}

/* Measured on the listing page, all 20 blocks:
     trust card bottom   923   quote box bottom  1023   -> 77 to 101px short
     empty space under the trust card              95 to 119px
     empty space under the quote box                       18px
   Both columns are the same height; the slack was sitting inside the left
   column, below the trust card. The card is now pushed to the foot of its
   column so the two end on the same line, with the same 18px breathing
   space underneath that the right column already had.                    */

#page-catlist .vblk-top{align-items:stretch}
#page-catlist .vblk-top .vleft{display:flex;flex-direction:column;min-width:0}
#page-catlist .vleft .vgal,
#page-catlist .vleft .vdesc,
#page-catlist .vleft .vbtn-row{flex:0 0 auto}
#page-catlist .vleft .trustpanel{margin-top:auto!important;margin-bottom:0!important}

/* the right column gets the same treatment so its quote box always sits at
   the foot rather than floating when a spec table happens to be short */
#page-catlist .vblk-top .vinfo{display:flex;flex-direction:column;min-width:0}
#page-catlist .vinfo>*{flex:0 0 auto}
#page-catlist .vinfo .vqbox{margin-top:auto!important}

/* The product title runs to 1, 2 or 3 lines depending on the name and the
   window, which pushed the buy box down by 22px in some blocks and not
   others. Measured line counts: 1-2 at 1600 and 1440, always 2 from 1280
   to 1100, and 2-3 at 1024. The slot is reserved for the worst case in
   each band so the buy box starts on the same line in every block.      */
#page-catlist .vinfo h2{min-height:44px;margin-bottom:5px}
@media(max-width:1100px){#page-catlist .vinfo h2{min-height:66px}}

/* At 1024px the Request Call Back button wrapped under the name in some
   blocks and sat beside it in others — 55px against 89px. Below 1100 the
   two are stacked deliberately, so every name bar is the same height. */
@media(max-width:1100px) and (min-width:901px){
  #page-catlist .vblk-name{flex-direction:column;align-items:flex-start;gap:9px}
  #page-catlist .vblk-name .vbn-cb{align-self:flex-start}
}

@media(max-width:900px){
  /* stacked on a phone, so nothing to line up — keep the natural flow */
  #page-catlist .vleft .trustpanel{margin-top:16px!important}
  #page-catlist .vinfo .vqbox{margin-top:0!important}
  #page-catlist .vinfo h2{min-height:0}
  /* the four satisfaction dials sit two by two rather than ragged */
  #page-catlist .vrev-donuts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  #page-catlist .vrev-card{height:100%}
  #page-catlist .vrev-cards{align-items:stretch}
}

/* Measured on the block: gallery to PRODUCT DESCRIPTION 14px, heading to text
   6px, text line-height 23.1px over six lines, text to buttons 13px, button
   gap 9px — and then a 117px hole before the purple card. The spacing is
   opened out so that hole becomes a deliberate separation instead.        */
#page-catlist .vleft .vdesc{margin-top:28px!important}
#page-catlist .vleft .vdesc h4{margin-bottom:11px!important;letter-spacing:.5px}
#page-catlist .vleft .vdesc p{line-height:1.95!important}
#page-catlist .vleft .vbtn-row{margin-top:24px!important;gap:22px!important;
  padding-bottom:10px}

/* ---- the About / expandable section, matched to the home page ----
   The reference is the home page accordion (.acc / .acc-h / .pm):
     .acc      width 100%, padding 0 22px, top border only, white
     .acc-h    padding 8px 2px          (was 15px 18px here — roughly halved)
     h3        13px, weight 500, #5a6672
     .pm       17px, #888, width 24px, red once open
     ::before  "+" closed, "−" open
   Every one of those is applied below, so the two bars are identical.   */
/* Closed, the bar carried 27px of space above it and 30px below — 57px of
   empty page between the reviews and the footer. The home page bar has no
   vertical margin at all and sits directly on the footer (gap 0px). Reduced
   to 14 above and 10 below: 24px in place of 57px, 58% less, and the bar now
   sits lower, closer to the footer, as it does on the home page. Nothing in
   the opened body changed — that was already right. */
#page-catlist .vseo-outer{padding:0 0 10px!important;background:#fff}
#page-catlist .vseo-wrap{max-width:none!important;padding:0!important}
/* the 22px sits inside the bar, exactly like .acc, so the border line runs
   the full width of the page rather than starting 22px in */
#page-catlist .vseo{border:none!important;border-top:1px solid var(--line)!important;
  border-radius:0!important;margin-top:14px!important;width:100%;max-width:100%;
  background:#fff!important;overflow:visible;padding:0 22px!important}
#page-catlist .vseo>summary{background:none!important;padding:8px 2px!important;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
#page-catlist .vseo-title,
#page-catlist .vseo-title b{font-size:13px!important;font-weight:500!important;
  color:#5a6672!important;letter-spacing:.2px}
#page-catlist .vseo[open] .vseo-title b{color:#222!important}
#page-catlist .vseo-plus{background:none!important;color:#888!important;
  width:24px!important;height:auto!important;border-radius:0!important;
  font-size:17px!important;font-weight:600!important;text-align:center;
  flex:0 0 auto;display:block;line-height:1.1}
#page-catlist .vseo-plus::before{content:"+"}
#page-catlist .vseo[open] .vseo-plus::before{content:"\2212"}
#page-catlist .vseo[open] .vseo-plus{transform:none!important;color:var(--red)!important}
#page-catlist .vseo-inner{border-top:1px solid var(--line)!important;
  padding:16px 2px 22px!important}

/* BUILD 77 - five columns, not four.
   Build 75 added the Our Team column but this rule still said 1fr x 3,
   so Help was pushed onto a second row and left a large empty band
   across the footer. All five now sit on one line. */
footer .ft-in{grid-template-columns:1.9fr 1fr 1fr 1fr!important}
@media(max-width:1180px){footer .ft-in{grid-template-columns:1.35fr 1fr 1fr 1fr!important;gap:16px}}
@media(max-width:999px){footer .ft-in{grid-template-columns:1fr 1fr!important}}

/* ===== the sparkler: nine stars in five colours, plus a soft burst =====
   Each star gets its own hue, size and delay, so it reads as a firework
   rather than six identical gold dots. */
.logo.shiny .spk{
  background:
    radial-gradient(circle,rgba(255,255,255,.98) 0 8%,transparent 9%),
    conic-gradient(from 0deg,
      transparent 0 8%, var(--spk,#ffd666) 12%, transparent 16%,
      transparent 33%, var(--spk,#ffd666) 37%, transparent 41%,
      transparent 58%, var(--spk,#ffd666) 62%, transparent 66%,
      transparent 83%, var(--spk,#ffd666) 87%, transparent 91%)!important;
  filter:drop-shadow(0 0 5px var(--spk,#ffd666))}

.logo.shiny .s1{--spk:#ffd048}          /* gold      */
.logo.shiny .s2{--spk:#ff5a6e}          /* rose      */
.logo.shiny .s3{--spk:#4fd1ff}          /* cyan      */
.logo.shiny .s4{--spk:#ffb03a}          /* amber     */
.logo.shiny .s5{--spk:#b07cff}          /* violet    */
.logo.shiny .s6{--spk:#3ee08a}          /* green     */
.logo.shiny .s7{--spk:#ff7ad9}          /* magenta   */
.logo.shiny .s8{--spk:#ffe98a}          /* pale gold */
.logo.shiny .s9{--spk:#5ea8ff}          /* blue      */

.logo.shiny .s7{left:8px;  top:-12px; animation-delay:.24s; width:10px;height:10px}
.logo.shiny .s8{right:34px;bottom:-9px;animation-delay:.50s; width:12px;height:12px}
.logo.shiny .s9{left:40px; top:-6px;  animation-delay:.62s; width:9px;height:9px}

/* a coloured glow that swells once per cycle behind the whole lockup */
.logo.shiny .spk-burst{position:absolute;left:-14px;top:-14px;right:-14px;bottom:-14px;
  pointer-events:none;z-index:0;opacity:0;border-radius:50%;
  background:radial-gradient(ellipse at 22% 50%,
    rgba(255,208,72,.30) 0%,
    rgba(255,90,110,.20) 28%,
    rgba(79,209,255,.14) 52%,
    rgba(176,124,255,.10) 70%,
    transparent 82%);
  animation:vBurst 5.2s ease-in-out infinite}
@keyframes vBurst{
  0%,52%{opacity:0;transform:scale(.6)}
  62%{opacity:1;transform:scale(1.06)}
  74%{opacity:.55;transform:scale(1.14)}
  86%,100%{opacity:0;transform:scale(1.2)}}

/* the V mark picks up the colours too */
.logo.shiny .logo-mark{animation:vGlowC 5.2s ease-in-out infinite!important}
@keyframes vGlowC{
  0%,52%{box-shadow:0 0 0 0 rgba(217,35,45,0)}
  60%{box-shadow:0 0 12px 2px rgba(255,208,72,.55)}
  68%{box-shadow:0 0 16px 3px rgba(255,90,110,.50)}
  76%{box-shadow:0 0 14px 2px rgba(79,209,255,.42)}
  88%,100%{box-shadow:0 0 0 0 rgba(217,35,45,0)}}

@media(prefers-reduced-motion:reduce){
  .logo.shiny .spk-burst{animation:none;opacity:0}
}
@media(max-width:640px){
  .logo.shiny .s7,.logo.shiny .s9{display:none}
}

/* The product page is three columns — gallery, the middle matter, and the
   buy box. Scrolling moved all three, so both sides emptied out and left
   white space. Both sides are now pinned and only the middle travels.
   Each pinned column scrolls inside itself if its own content is taller
   than the window, so nothing is ever unreachable. */
#page-product .pd{align-items:start}

#page-product .pd-gal,
#page-product .pd-right{
  position:sticky;
  top:calc(var(--stripH,36px) + var(--hdrH,63px) + 14px);
  align-self:start;
  max-height:calc(100dvh - var(--stripH,36px) - var(--hdrH,63px) - 28px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin}

/* a discreet scrollbar inside the pinned columns */
#page-product .pd-gal::-webkit-scrollbar,
#page-product .pd-right::-webkit-scrollbar{width:6px}
#page-product .pd-gal::-webkit-scrollbar-thumb,
#page-product .pd-right::-webkit-scrollbar-thumb{background:#cfd8e0;border-radius:3px}
#page-product .pd-gal::-webkit-scrollbar-track,
#page-product .pd-right::-webkit-scrollbar-track{background:transparent}

/* sticky needs an unclipped ancestor */
#page-product,#page-product .pd{overflow:visible}

/* The stylesheet dropped to two columns at 1150px, which pushed the buy box
   below the middle — pinning it there is pointless, and at 1000px it scrolled
   away. Three columns are kept down to 821px with the sides narrowed, so both
   stay pinned; below 821px the page stacks and pinning is switched off. */
@media(max-width:1150px) and (min-width:821px){
  #page-product .pd{grid-template-columns:330px 1fr 290px!important;gap:18px!important}
  /* the stylesheet also gave the buy box grid-column:1/-1 in this band, which
     dropped it onto a row of its own below the middle. Put it back in the
     third column so it can be pinned. */
  #page-product .pd-right{grid-column:3!important;grid-row:1!important}
}
@media(max-width:1000px) and (min-width:821px){
  #page-product .pd{grid-template-columns:290px 1fr 260px!important;gap:14px!important}
}

/* stacked layouts have nothing to pin against */
@media(max-width:820px){
  #page-product .pd-gal,
  #page-product .pd-right{position:static;max-height:none;overflow:visible}
}

html,body{overflow-x:clip!important}
.topstrip{position:sticky!important;top:0!important;z-index:340}
.hdr{position:sticky!important;top:var(--stripH,36px)!important;z-index:330}
.brand-circles{display:none!important}
.vdiag{position:fixed;left:16px;bottom:16px;z-index:9999;width:280px;background:#fff;border-radius:12px;
  padding:14px 16px 12px;box-shadow:0 14px 40px rgba(0,0,0,.3);font-family:Arial,sans-serif;border-left:5px solid #0f9d58}
.vdiag.warn{border-left-color:#f5a623}.vdiag.err{border-left-color:#d9232d;width:320px}
.vdiag b{display:block;font-size:13px;font-weight:800;color:#0b1a2b;margin-bottom:9px;line-height:1.4}
.vd-row{display:flex;justify-content:space-between;gap:10px;font-size:12.2px;color:#5b6773;padding:4px 0;border-top:1px solid #f0f3f6}
.vd-row small{color:#0b1a2b;font-weight:700;white-space:nowrap}
.vdiag button{margin-top:10px;width:100%;background:#0b1a2b;border:none;color:#fff;font-size:12px;font-weight:700;
  padding:8px;border-radius:7px;cursor:pointer;font-family:inherit}
@media(max-width:600px){.vdiag{left:10px;right:10px;width:auto}}


/* ====  id="vcontact-css" ==== */

/* ================= CONTACT PAGE (Indique layout, Vedika theme) ================= */
#page-contact{background:#fbfcfd}
.vc-wrap{max-width:1220px;margin:0 auto;padding:0 18px 60px}
.vc-crumb{font-size:12.5px;color:var(--muted);padding:16px 0 4px}
.vc-crumb a{color:var(--muted);text-decoration:none}
.vc-crumb a:hover{color:var(--red)}
.vc-crumb b{color:var(--ink)}

/* ---- hero ---- */
.vc-hero{text-align:center;padding:34px 10px 40px;border-bottom:1px solid var(--line);margin-bottom:44px}
.vc-eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.16em;font-weight:800;
  color:var(--red);text-transform:uppercase;position:relative;padding:0 0 12px}
.vc-eyebrow:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:46px;height:3px;border-radius:2px;background:var(--red)}
.vc-hero h1{font-size:clamp(26px,4.2vw,44px);line-height:1.18;font-weight:800;color:var(--ink);
  margin:18px 0 14px;letter-spacing:-.4px}
.vc-hero h1 span{color:var(--red)}
.vc-hero p{max-width:680px;margin:0 auto;font-size:15.5px;line-height:1.72;color:var(--muted)}

/* ---- two column ---- */
.vc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
@media(max-width:940px){.vc-grid{grid-template-columns:1fr;gap:32px}}

.vc-sec-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--red);
  text-transform:uppercase;margin-bottom:8px}
.vc-h2{font-size:24px;font-weight:800;color:var(--ink);margin:0 0 26px;letter-spacing:-.2px}

/* contact rows */
.vc-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.vc-row:last-of-type{border-bottom:none}
.vc-ic{flex:0 0 44px;height:44px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:#fdeceD;color:var(--red)}
.vc-rt{font-size:10.8px;letter-spacing:.13em;font-weight:800;color:var(--muted);
  text-transform:uppercase;margin-bottom:5px}
.vc-rv{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55;word-break:break-word}
.vc-rv a{color:var(--ink);text-decoration:none}
.vc-rv a:hover{color:var(--red)}
.vc-rv small{display:block;font-size:13.2px;font-weight:500;color:var(--muted);
  line-height:1.62;margin-top:3px}
.vc-map{display:inline-block;margin-top:7px;font-size:12.8px;font-weight:700;
  color:var(--red);text-decoration:none}
.vc-map:hover{text-decoration:underline}

/* business hours */
.vc-hours{margin-top:26px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:12px;padding:20px 22px}
.vc-hours h4{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--ink)}
.vc-hours p{margin:0;font-size:13.6px;line-height:1.9;color:var(--muted)}
.vc-hours b{color:var(--ink);font-weight:700}
.vc-note{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--muted);line-height:1.7}

/* ---- form card ---- */
.vc-form{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:32px 30px 28px;box-shadow:0 4px 24px rgba(20,30,45,.06)}
@media(max-width:560px){.vc-form{padding:24px 18px 22px}}
.vc-form h3{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--ink)}
.vc-form>p.vc-sub{margin:0 0 24px;font-size:13.8px;line-height:1.7;color:var(--muted)}
.vc-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
@media(max-width:560px){.vc-fgrid{grid-template-columns:1fr}}
.vc-f{display:flex;flex-direction:column}
.vc-f.full{grid-column:1/-1}
.vc-f label{font-size:11.6px;letter-spacing:.06em;font-weight:800;color:var(--ink);
  text-transform:uppercase;margin-bottom:7px}
.vc-f label i{color:var(--red);font-style:normal}
.vc-f input,.vc-f select,.vc-f textarea{
  font:inherit;font-size:14.4px;color:var(--ink);background:#fbfcfd;
  border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s}
.vc-f textarea{resize:vertical;min-height:118px;line-height:1.6}
.vc-f input:focus,.vc-f select:focus,.vc-f textarea:focus{
  outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(217,35,45,.11)}
.vc-f input::placeholder,.vc-f textarea::placeholder{color:#a9b2bc}
.vc-phone{display:grid;grid-template-columns:118px 1fr;gap:9px}
.vc-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* human check */
.vc-human{grid-column:1/-1;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:#fbfcfd;border:1.5px dashed var(--line);border-radius:10px;padding:14px 16px}
.vc-human .q{font-size:14.2px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.vc-human input{max-width:104px;text-align:center;font-weight:800;letter-spacing:.06em}
.vc-human button{background:none;border:none;cursor:pointer;font-size:16px;color:var(--muted);
  padding:4px 6px;line-height:1}
.vc-human button:hover{color:var(--red)}
.vc-human .lbl{font-size:11.4px;letter-spacing:.1em;font-weight:800;color:var(--muted);
  text-transform:uppercase;width:100%}

.vc-submit{grid-column:1/-1;margin-top:6px;width:100%;background:var(--red);color:#fff;
  border:none;border-radius:10px;padding:15px 18px;font-size:14.6px;font-weight:800;
  letter-spacing:.05em;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;
  box-shadow:0 4px 14px rgba(217,35,45,.24)}
.vc-submit:hover{background:var(--red-dark);box-shadow:0 6px 20px rgba(217,35,45,.3)}
.vc-submit:active{transform:translateY(1px)}
.vc-submit:disabled{background:#c8ced4;box-shadow:none;cursor:not-allowed}
.vc-priv{grid-column:1/-1;text-align:center;font-size:12.4px;color:var(--muted);margin-top:4px}
#vcStatus{grid-column:1/-1}

/* ---- quick action strip ---- */
.vc-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
@media(max-width:640px){.vc-quick{grid-template-columns:1fr}}
.vc-q{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;text-decoration:none;transition:border-color .15s,
  box-shadow .15s,transform .12s}
.vc-q:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(20,30,45,.08);transform:translateY(-2px)}
.vc-q .qi{flex:0 0 40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:17px;background:#fdeced;color:var(--red)}
.vc-q b{display:block;font-size:14.2px;color:var(--ink);font-weight:800}
.vc-q small{font-size:12.4px;color:var(--muted)}
.vc-q.wa .qi,.vc-q.call .qi{background:#e6f4ea;color:#0f9d58}


/* ====  id="vcomp-css" ==== */

/* ================= COMPLAINT PAGE (Indique layout, Vedika theme) ================= */
#page-complaint{background:#fbfcfd}
.vk-wrap{max-width:860px;margin:0 auto;padding:0 18px 60px}
.vk-hero{text-align:center;padding:30px 6px 34px}
.vk-hero h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;color:var(--ink);
  margin:16px 0 12px;letter-spacing:-.4px}
.vk-hero .lead{max-width:600px;margin:0 auto;font-size:16px;line-height:1.7;color:var(--muted)}
.vk-intro{font-size:14.8px;line-height:1.8;color:var(--muted);text-align:center;
  max-width:700px;margin:0 auto 26px}

/* notice band */
.vk-notice{background:#fdeced;border:1px solid #f5c6c9;border-left:4px solid var(--red);
  border-radius:12px;padding:18px 22px;font-size:14.2px;line-height:1.78;color:#5c2a2d;
  margin-bottom:32px}
.vk-notice b{color:var(--red);font-weight:800}
.vk-notice a{color:var(--red);font-weight:700;text-decoration:none}
.vk-notice a:hover{text-decoration:underline}

/* form card */
.vk-card{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:32px 30px 28px;box-shadow:0 4px 24px rgba(20,30,45,.06)}
@media(max-width:560px){.vk-card{padding:24px 18px 22px}}
.vk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.vk-grid{grid-template-columns:1fr}}
.vk-f{display:flex;flex-direction:column}
.vk-f.full{grid-column:1/-1}
.vk-f label{font-size:11.6px;letter-spacing:.06em;font-weight:800;color:var(--ink);
  text-transform:uppercase;margin-bottom:7px}
.vk-f label i{color:var(--red);font-style:normal}
.vk-f input,.vk-f select,.vk-f textarea{font:inherit;font-size:14.4px;color:var(--ink);
  background:#fbfcfd;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;
  width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
.vk-f textarea{resize:vertical;min-height:140px;line-height:1.6}
.vk-f input:focus,.vk-f select:focus,.vk-f textarea:focus{outline:none;border-color:var(--red);
  background:#fff;box-shadow:0 0 0 3px rgba(217,35,45,.11)}
.vk-f input::placeholder,.vk-f textarea::placeholder{color:#a9b2bc}
.vk-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.vk-human{grid-column:1/-1;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:#fbfcfd;border:1.5px dashed var(--line);border-radius:10px;padding:14px 16px}
.vk-human .lbl{font-size:11.4px;letter-spacing:.1em;font-weight:800;color:var(--muted);
  text-transform:uppercase;width:100%}
.vk-human .q{font-size:14.2px;font-weight:800;color:var(--ink)}
.vk-human input{max-width:104px;text-align:center;font-weight:800}
.vk-human button{background:none;border:none;cursor:pointer;font-size:16px;color:var(--muted);
  padding:4px 6px;line-height:1}
.vk-human button:hover{color:var(--red)}

.vk-submit{grid-column:1/-1;margin-top:6px;width:100%;background:var(--red);color:#fff;
  border:none;border-radius:10px;padding:15px 18px;font-size:14.6px;font-weight:800;
  letter-spacing:.05em;cursor:pointer;box-shadow:0 4px 14px rgba(217,35,45,.24);
  transition:background .15s,transform .1s,box-shadow .15s}
.vk-submit:hover{background:var(--red-dark);box-shadow:0 6px 20px rgba(217,35,45,.3)}
.vk-submit:active{transform:translateY(1px)}
.vk-priv{grid-column:1/-1;text-align:center;font-size:12.4px;color:var(--muted);margin-top:4px}
#vkStatus{grid-column:1/-1}

/* speak to us */
.vk-speak{margin-top:44px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:34px 24px}
.vk-speak h3{margin:0 0 10px;font-size:22px;font-weight:800;color:var(--ink)}
.vk-speak p{margin:0 0 20px;font-size:14.6px;line-height:1.7;color:var(--muted)}
.vk-speak p b{color:var(--ink)}
.vk-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.vk-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;
  font-size:14px;font-weight:800;text-decoration:none;border:1.5px solid var(--line);
  color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s,transform .12s}
.vk-btn:hover{border-color:var(--red);box-shadow:0 5px 16px rgba(20,30,45,.08);transform:translateY(-1px)}
.vk-btn.pri{background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 4px 14px rgba(217,35,45,.24)}
.vk-btn.pri:hover{background:var(--red-dark)}
.vk-btn.wa{color:#0f9d58;border-color:#bfe3cd}
.vk-btn.wa:hover{border-color:#0f9d58}


/* ====  id="vcatseo-css" ==== */
#page-product .vseo-outer,#page-category .vseo-outer{background:#fff;border-top:1px solid var(--line);margin-top:26px;padding:0 0 24px}

/* ====  id="vhelp-css" ==== */

/* ================= HELP & SUPPORT (mezux.in/help-support layout) ================= */
#page-help{background:#fbfcfd}
.vh-wrap{max-width:1180px;margin:0 auto;padding:0 18px 60px}

.vh-hero{text-align:center;padding:34px 8px 38px;border-bottom:1px solid var(--line);margin-bottom:42px}
.vh-hero h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;color:var(--ink);margin:16px 0 12px;letter-spacing:-.5px}
.vh-hero h1 span{color:var(--red)}
.vh-hero .sub{font-size:16px;color:var(--muted);margin:0}

.vh-intro{max-width:820px;margin:0 auto 34px;text-align:center}
.vh-intro h2{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 12px}
.vh-intro p{font-size:15px;line-height:1.75;color:var(--muted);margin:0}
.vh-intro p a{color:var(--red);font-weight:700;text-decoration:none}
.vh-intro p a:hover{text-decoration:underline}

/* the tile grid - the heart of the mezux layout */
.vh-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:52px}
@media(max-width:1050px){.vh-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.vh-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vh-tiles{grid-template-columns:1fr}}
.vh-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px 20px 18px;text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .14s}
.vh-tile:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .18s}
.vh-tile:hover{border-color:var(--red);box-shadow:0 10px 26px rgba(20,30,45,.09);transform:translateY(-3px)}
.vh-tile:hover:before{transform:scaleY(1)}
.vh-tile .kicker{font-size:10.4px;letter-spacing:.16em;font-weight:800;color:var(--red);
  text-transform:uppercase;margin-bottom:11px}
.vh-tile .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:#fdeced;color:var(--red);margin-bottom:13px}
.vh-tile b{font-size:16px;color:var(--ink);font-weight:800;margin-bottom:7px;line-height:1.3}
.vh-tile span.d{font-size:13.2px;color:var(--muted);line-height:1.62;flex:1}
.vh-tile .open{margin-top:14px;font-size:12.4px;font-weight:800;color:var(--red);
  letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px}
.vh-tile:hover .open{gap:9px}

/* stats strip */
.vh-strip{background:#0b1a2b;border-radius:16px;padding:28px 26px;margin-bottom:48px;color:#fff}
.vh-strip .lab{font-size:10.6px;letter-spacing:.18em;font-weight:800;color:#8fa3b8;
  text-transform:uppercase;text-align:center;margin-bottom:6px}
.vh-strip h3{text-align:center;font-size:21px;font-weight:800;margin:0 0 22px;color:#fff}
.vh-strip .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:700px){.vh-strip .nums{grid-template-columns:repeat(2,1fr);gap:22px}}
.vh-strip .n{text-align:center}
.vh-strip .n b{display:block;font-size:26px;font-weight:800;color:#fff;line-height:1.1}
.vh-strip .n small{display:block;font-size:11.8px;color:#9fb2c6;margin-top:6px;letter-spacing:.03em}

/* channels */
.vh-band{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;margin-bottom:48px}
.vh-band .row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:800px){.vh-band .row{grid-template-columns:1fr;gap:16px}}
.vh-ch{display:flex;gap:14px;align-items:flex-start}
.vh-ch .ic{flex:0 0 40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:17px;background:#e6f4ea;color:#0f9d58}
.vh-ch.mail .ic{background:#fdeced;color:var(--red)}
.vh-ch .t{font-size:10.8px;letter-spacing:.13em;font-weight:800;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.vh-ch .v{font-size:14.6px;font-weight:700;color:var(--ink);line-height:1.5;word-break:break-word}
.vh-ch .v a{color:var(--ink);text-decoration:none}
.vh-ch .v a:hover{color:var(--red)}
.vh-ch .v small{display:block;font-size:12.6px;font-weight:500;color:var(--muted);margin-top:3px}
.vh-hours{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);font-size:13.4px;
  color:var(--muted);line-height:1.8}
.vh-hours b{color:var(--ink)}

.vh-h2{font-size:21px;font-weight:800;color:var(--ink);margin:0 0 6px}
.vh-lead{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.65}

/* faq */
.vh-faq{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:40px}
.vh-faq details{border-bottom:1px solid var(--line)}
.vh-faq details:last-child{border-bottom:none}
.vh-faq summary{list-style:none;cursor:pointer;padding:16px 22px;font-size:14.6px;font-weight:700;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.vh-faq summary::-webkit-details-marker{display:none}
.vh-faq summary:hover{background:#fbfcfd;color:var(--red)}
.vh-faq summary:after{content:"+";font-size:21px;font-weight:600;color:#9aa7b3;flex:0 0 auto}
.vh-faq details[open] summary{color:var(--red)}
.vh-faq details[open] summary:after{content:"‘2";color:var(--red)}
.vh-faq .a{padding:0 22px 18px;font-size:13.8px;line-height:1.8;color:var(--muted)}
.vh-faq .a b{color:var(--ink)}

/* closing call */
.vh-foot{text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 22px}
.vh-foot h3{margin:0 0 9px;font-size:22px;font-weight:800;color:var(--ink)}
.vh-foot p{margin:0 0 20px;font-size:14.4px;color:var(--muted);line-height:1.7}
.vh-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}


/* ====  id="vside-css" ==== */

.vcl-side .subs a.vcl-prod{padding-left:34px;font-size:11.8px;color:#5b6773;border-left-color:transparent}
.vcl-side .subs a.vcl-prod:before{content:"\2022";margin-right:7px;color:#c3ccd5}
.vcl-side .subs a.vcl-prod:hover{color:var(--red);background:#fff;border-left-color:var(--red)}
.vcl-side .subs a.vcl-prod.on{background:#fff;color:var(--red);font-weight:700;border-left-color:var(--red)}
.vcl-side .subs a.vcl-prod.on:before{color:var(--red)}


/* ====  id="vt-team" ==== */

.vt-wrap{background:#fafafa;border-top:1px solid #ececec;padding:44px 16px 50px}
.vt-in{max-width:1180px;margin:0 auto}
.vt-head{text-align:center;margin-bottom:30px}
.vt-head h2{font-size:26px;color:#1a1a1c;margin:0 0 8px;font-weight:800;letter-spacing:-.3px}
.vt-head p{font-size:14.5px;color:#666;margin:0;line-height:1.6}
.vt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vt-c{background:#fff;border:1px solid #e8e8e8;border-radius:14px;padding:24px 16px 20px;
      text-align:center;text-decoration:none;display:block;color:inherit;
      transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
.vt-c:hover{box-shadow:0 10px 26px rgba(0,0,0,.09);transform:translateY(-3px);border-color:#d9232d}
.vt-ph{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 14px;
       border:3px solid #fff;box-shadow:0 0 0 2px #d9232d}
.vt-n{font-size:16.5px;font-weight:700;color:#1a1a1c;margin:0 0 3px}
.vt-d{font-size:13px;color:#d9232d;font-weight:600;margin:0 0 12px}
.vt-t{font-size:13px;color:#666;margin:0 0 14px;direction:ltr}
.vt-b{display:inline-block;font-size:12.5px;font-weight:700;color:#d9232d;
      border:1.5px solid #d9232d;border-radius:999px;padding:7px 18px;transition:.2s}
.vt-c:hover .vt-b{background:#d9232d;color:#fff}
.vt-note{text-align:center;font-size:12.5px;color:#888;margin:24px 0 0}
@media(max-width:900px){.vt-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:420px){
  .vt-wrap{padding:34px 12px 40px}
  .vt-head h2{font-size:21px}
  .vt-grid{gap:11px}
  .vt-c{padding:18px 10px 16px;border-radius:12px}
  .vt-ph{width:82px;height:82px;margin-bottom:11px}
  .vt-n{font-size:14.5px}
  .vt-d{font-size:11.5px}
  .vt-t{font-size:12px}
  .vt-b{font-size:11.5px;padding:6px 14px}
}


/* ====  id="bx-css" ==== */

.bx-page{
  --bx-ink:#0B1B26; --bx-deep:#0F2E44; --bx-cyan:#35A7D4;
  --bx-paper:#F4F7F9; --bx-line:#DCE4EA; --bx-red:#D9232D; --bx-amber:#E9A13B;
  --bx-body:#4A5A67; --bx-mute:#68757F;
  --bx-mono:ui-monospace,'SF Mono','Roboto Mono',Menlo,Consolas,monospace;
  --bx-cond:'Roboto Condensed','Arial Narrow',Roboto,sans-serif;
  background:#fff;
}
.bx-page *{box-sizing:border-box}
.bx-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.bx-sec{padding:58px 0}
.bx-grid{background-image:
  linear-gradient(rgba(53,167,212,.13) 1px,transparent 1px),
  linear-gradient(90deg,rgba(53,167,212,.13) 1px,transparent 1px),
  linear-gradient(rgba(53,167,212,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(53,167,212,.06) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px}

.bx-eyebrow{font-family:var(--bx-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bx-red);margin-bottom:20px}
/* on the dark bands the brand red drops to ~2.8:1 — amber reads at 6.4:1 */
.bx-eyebrow.light{color:var(--bx-amber)}
.bx-p{font-size:14.8px;line-height:1.8;color:var(--bx-body);margin:0 0 14px;max-width:64ch}
.bx-p-lead{font-size:16.5px;line-height:1.75;color:var(--bx-ink)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* image placeholders */
.bx-ph{position:relative;background:#F7F9FB;border:1px solid var(--bx-line);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;
  text-align:center;padding:22px}
.bx-ph::before{content:'';position:absolute;inset:9px;border:1px dashed #C6D2DA}
.bx-ph svg{width:32px;height:32px;color:#8E9BA6}
.bx-ph b{font-family:var(--bx-cond);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#5A6772}
.bx-ph span{font-family:var(--bx-mono);font-size:10.5px;letter-spacing:.06em;color:#68737F}
.bx-ph-tall{aspect-ratio:4/5}
.bx-ph-wide{aspect-ratio:16/6;margin-top:34px}

/* ---------- real figures ---------- */
.bx-fig{border:1px solid var(--bx-line);background:#fff;overflow:hidden;margin-left:auto;margin-right:auto}
/* B79: width is auto + capped, so a photo is never blown up past its own
   resolution AND the frame never changes size after the photo arrives.
   The old fix did this in JS after the load event, which made every
   picture jump from full width down to its real width on a cold load. */
.bx-fig img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.bx-fig figcaption{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.08em;color:#616D77;
  padding:10px 14px;border-top:1px solid var(--bx-line);background:#FAFCFD}
.bx-figwide{margin-top:34px}
.bx-stack{display:grid;gap:12px}
.bx-stack .bx-fig{transition:.22s;width:100%}
.bx-stack .bx-fig:hover{border-color:var(--bx-red);transform:translateY(-3px)}
.bx-strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.bx-strip3 .bx-fig{transition:.22s;width:100%;max-width:560px}
.bx-strip3 .bx-fig:hover{border-color:var(--bx-red);transform:translateY(-3px)}
@media(max-width:760px){.bx-strip3{grid-template-columns:1fr}}

/* ================= HERO ================= */
.bx-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 78% 10%,#164761 0%,rgba(22,71,97,0) 60%),
             linear-gradient(160deg,#0F2E44 0%,#0B1B26 100%)}
.bx-hero .bx-grid{position:absolute;inset:0;opacity:.55}
.bx-hero-in{position:relative;max-width:1180px;margin:0 auto;padding:40px 22px 48px;
  display:grid;grid-template-columns:1fr 440px;gap:44px;align-items:center}
.bx-crumb{display:flex;align-items:center;gap:9px;font-family:var(--bx-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#8FC0D9;margin-bottom:18px;flex-wrap:wrap}
.bx-crumb a{color:#8FC0D9;cursor:pointer}.bx-crumb a:hover{color:#fff}
.bx-crumb i{font-style:normal;opacity:.5}.bx-crumb span{color:#fff}
.bx-kicker{font-family:var(--bx-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bx-amber);margin-bottom:12px}
.bx-hero h1{font-family:var(--bx-cond);font-size:52px;line-height:1.02;text-transform:uppercase;
  margin:0;letter-spacing:-.005em}
.bx-hero h1 em{font-style:normal;color:var(--bx-cyan);display:block}
.bx-stats{display:flex;gap:34px;margin:28px 0 26px;flex-wrap:wrap}
.bx-stats b{display:block;font-family:var(--bx-cond);font-size:40px;line-height:1;color:var(--bx-cyan)}
.bx-stats span{display:block;font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.1em;
  text-transform:uppercase;color:#9EBDCF;margin-top:6px}
.bx-hero-cta{display:flex;gap:11px;flex-wrap:wrap}
.bx-b1,.bx-b2{font-family:var(--bx-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 24px;border:none;border-radius:2px;cursor:pointer;transition:.18s}
.bx-b1{background:var(--bx-red);color:#fff}
.bx-b1:hover{background:#b81d26;transform:translateY(-1px)}
.bx-b2{background:transparent;color:#DCE9F1;border:1px solid rgba(143,192,217,.5)}
.bx-b2:hover{border-color:var(--bx-cyan);color:#fff}

.bx-loop svg{width:100%;height:auto;display:block;overflow:visible}
.bx-loop .nd{fill:rgba(11,27,38,.86);stroke:#5E92AE;stroke-width:1.2}
.bx-loop .nd-hot{stroke:var(--bx-cyan)}
.bx-loop .lbl{font-family:var(--bx-mono);font-size:10px;letter-spacing:.1em;fill:#D3E3ED}
.bx-loop .sig{font-family:var(--bx-mono);font-size:13px;fill:#D3E3ED}
.bx-loop .lbl-s{font-family:var(--bx-mono);font-size:8.4px;fill:#9EBDCF;letter-spacing:.08em}
.bx-loop .wire{fill:none;stroke:#4E7F9E;stroke-width:1.3}
.bx-loop .wire-fb{stroke-dasharray:4 4}
.bx-loop .arw{fill:#4E7F9E}
@keyframes bxRun{to{offset-distance:100%}}
.bx-loop .pulse{fill:var(--bx-cyan);
  offset-path:path('M 74 62 H 128 M 172 62 H 226 M 306 62 H 360 M 400 62 V 128 H 150 V 84');
  offset-distance:0%;animation:bxRun 7s linear infinite}
.bx-eq{margin-top:16px;padding:13px 16px;border:1px solid rgba(143,192,217,.3);
  background:rgba(11,27,38,.55);border-radius:2px}
.bx-eq .m{font-family:var(--bx-mono);font-size:13px;color:#DCE9F1;overflow-x:auto;white-space:nowrap}
.bx-eq .m b{color:var(--bx-cyan)}

/* ================= INTRO ================= */
.bx-what-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.bx-defs{display:grid;gap:14px;margin-top:26px}
.bx-def{padding:18px 20px 18px 22px;background:var(--bx-paper);border-left:3px solid var(--bx-red);
  transition:.2s}
.bx-def:hover{background:#EEF3F7;transform:translateX(3px)}
.bx-def span{display:block;font-family:var(--bx-mono);font-size:10.6px;letter-spacing:.16em;
  color:var(--bx-red);text-transform:uppercase;margin-bottom:8px}
.bx-def p{font-size:13.8px;line-height:1.72;color:var(--bx-body);margin:0}

/* ================= APPLICATION LIST ================= */
.bx-applist{background:var(--bx-paper);border-top:1px solid var(--bx-line);
  border-bottom:1px solid var(--bx-line)}
.bx-alist{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bx-ac{background:#fff;border:1px solid var(--bx-line);padding:22px 20px;cursor:pointer;
  transition:.22s;display:flex;flex-direction:column;gap:12px}
.bx-ac:hover{transform:translateY(-4px);box-shadow:0 12px 26px -14px rgba(11,27,38,.4);
  border-color:var(--bx-red)}
.bx-ac .n{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.16em;color:var(--bx-red)}
.bx-ac b{font-family:var(--bx-cond);font-size:19px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.16}
.bx-ac .c{font-family:var(--bx-mono);font-size:10.6px;letter-spacing:.08em;color:var(--bx-mute);
  margin-top:auto;padding-top:6px;border-top:1px solid var(--bx-line)}

/* ================= APPLICATIONS, POINT BY POINT ================= */
.bx-tabwrap{position:relative}
.bx-tabs{display:flex;border-bottom:2px solid var(--bx-line);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.bx-tabs::-webkit-scrollbar{display:none}
.bx-tabwrap::after{content:'';position:absolute;right:0;top:0;bottom:2px;width:40px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);pointer-events:none;
  opacity:0;transition:opacity .2s}
.bx-tabwrap.more::after{opacity:1}
.bx-tab{flex:1 0 auto;min-width:158px;background:none;border:none;font-family:var(--bx-cond);
  font-size:16px;text-transform:uppercase;color:var(--bx-mute);padding:16px 18px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:.18s;text-align:left;
  display:flex;flex-direction:column;gap:4px}
.bx-tab s{text-decoration:none;font-family:var(--bx-mono);font-size:10px;letter-spacing:.14em;color:#68757F}
.bx-tab:hover{color:var(--bx-ink)}
.bx-tab.on{color:var(--bx-red);border-bottom-color:var(--bx-red)}
.bx-tab.on s{color:var(--bx-red)}
.bx-panel{display:grid;grid-template-columns:1fr 290px;gap:38px;padding-top:34px;align-items:start}
@keyframes bxFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bx-panel.anim .bx-pt,.bx-panel.anim .bx-ph{animation:bxFade .45s cubic-bezier(.22,1,.36,1) both}
.bx-pt{display:grid;grid-template-columns:52px 1fr;border-bottom:1px dashed #E2E9EE;padding:18px 0}
.bx-pt:first-child{padding-top:0}
.bx-pt:last-child{border-bottom:none}
.bx-pt .n{font-family:var(--bx-mono);font-size:12.5px;color:#66727E;padding-top:3px}
.bx-pt h3{font-family:var(--bx-cond);font-size:18px;text-transform:uppercase;color:var(--bx-ink);
  margin:0 0 6px}
.bx-pt p{font-size:13.8px;line-height:1.72;color:var(--bx-body);margin:0}
.bx-use{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;align-items:flex-start}
.bx-use em{font-style:normal;font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.1em;
  color:var(--bx-mute);text-transform:uppercase;padding:7px 0}
.bx-use span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid #F1C6C9;
  background:#FDF3F4;color:var(--bx-red);font-family:var(--bx-mono);font-size:11.2px;
  line-height:1.35;border-radius:2px}
.bx-use span::before{content:'';width:5px;height:5px;background:var(--bx-red);transform:rotate(45deg)}
.bx-way{margin-top:12px;display:grid;gap:8px}
.bx-way>div{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:10px 13px;background:var(--bx-paper);border:1px solid #E7EDF1}
.bx-way p{font-size:13px;color:#55636F}
.bx-way .bx-use{margin-top:0}

/* ================= PRODUCT INDEX ================= */
.bx-index{background:var(--bx-paper);border-top:1px solid var(--bx-line)}
.bx-idx{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bx-idx-c{background:#fff;border:1px solid var(--bx-line);padding:15px 17px;transition:.2s;
  display:flex;flex-direction:column;gap:8px}
.bx-idx-c:hover{border-color:var(--bx-red);transform:translateY(-2px)}
.bx-idx-c b{font-family:var(--bx-cond);font-size:16px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.2}
.bx-idx-c .zn{display:flex;flex-wrap:wrap;gap:5px}
.bx-idx-c .zn i{font-style:normal;font-family:var(--bx-mono);font-size:9.6px;letter-spacing:.06em;
  padding:3px 7px;background:var(--bx-paper);color:#5A6772;border:1px solid var(--bx-line)}

/* ================= CLOSE ================= */
.bx-end{position:relative;overflow:hidden;background:linear-gradient(160deg,#0F2E44,#0B1B26);
  color:#fff;padding:52px 22px;text-align:center}
.bx-end .bx-grid{position:absolute;inset:0;opacity:.45}
.bx-end-in{position:relative;max-width:660px;margin:0 auto}
.bx-end h3{font-family:var(--bx-cond);font-size:32px;text-transform:uppercase;margin:0 0 22px;line-height:1.12}
.bx-end .btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  .bx-hero-in{grid-template-columns:1fr;gap:30px;padding:28px 18px 36px}
  .bx-hero h1{font-size:40px}
  .bx-what-grid{grid-template-columns:1fr;gap:30px}
  .bx-ph-tall{aspect-ratio:16/9}
  .bx-alist{grid-template-columns:repeat(2,1fr)}
  .bx-panel{grid-template-columns:1fr;gap:26px}
  .bx-idx{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .bx-sec{padding:42px 0}
  .bx-wrap{padding:0 14px}
  .bx-hero h1{font-size:31px}
  .bx-p-lead{font-size:15px}
  .bx-stats{gap:22px}.bx-stats b{font-size:32px}
  .bx-alist{grid-template-columns:1fr}
  .bx-idx{grid-template-columns:1fr}
  .bx-ph-wide{aspect-ratio:16/9}
  .bx-tab{min-width:140px;font-size:14.5px;padding:13px 14px}
  .bx-pt{grid-template-columns:38px 1fr}
  .bx-pt h3{font-size:16px}
  .bx-way>div{grid-template-columns:1fr;gap:9px}
  .bx-eq .m{font-size:11px}
  .bx-end h3{font-size:25px}
}


/* ====  id="tv-css" ==== */

/* ---------- signature: concept -> commissioning chain ---------- */
.tv-chain svg{width:100%;height:auto;display:block;overflow:visible}
.tv-chain .rail{fill:none;stroke:#4E7F9E;stroke-width:1.4}
.tv-chain .box{fill:rgba(11,27,38,.86);stroke:#5E92AE;stroke-width:1.2}
.tv-chain .box.hot{stroke:var(--bx-cyan)}
.tv-chain .num{font-family:var(--bx-mono);font-size:8.6px;fill:#9EBDCF;letter-spacing:.12em}
.tv-chain .txt{font-family:var(--bx-cond);font-size:14px;fill:#DCE9F1;text-transform:uppercase;
  letter-spacing:.02em}
.tv-chain .dot{fill:var(--bx-cyan)}
@keyframes tvFlow{to{offset-distance:100%}}
.tv-chain .dot{offset-path:path('M 40 26 V 218');offset-distance:0%;
  animation:tvFlow 6s cubic-bezier(.6,0,.4,1) infinite}
@media(prefers-reduced-motion:reduce){.tv-chain .dot{animation:none}}

/* ---------- vision band ---------- */
.tv-vision{position:relative;overflow:hidden;padding:52px 0;
  background:linear-gradient(160deg,#0F2E44,#0B1B26);color:#fff}
.tv-vision .bx-grid{position:absolute;inset:0;opacity:.45}
.tv-vision .bx-wrap{position:relative}
.tv-quote{max-width:840px}
.tv-quote p{font-family:var(--bx-cond);font-size:29px;line-height:1.3;color:#fff;margin:0;
  text-transform:none;letter-spacing:.005em}
.tv-quote::before{content:'';display:block;width:46px;height:3px;background:var(--bx-red);
  margin-bottom:20px}

/* ---------- engineering split ---------- */
.tv-eng{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.bx-ph-sq{aspect-ratio:1/1}

/* ---------- objectives ---------- */
.tv-obj-sec{background:var(--bx-paper);border-top:1px solid var(--bx-line);
  border-bottom:1px solid var(--bx-line)}
.tv-obj{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 26px}
.tv-oc{background:#fff;border:1px solid var(--bx-line);padding:24px 22px;transition:.22s;
  display:flex;flex-direction:column;gap:12px}
.tv-oc:hover{transform:translateY(-4px);box-shadow:0 12px 26px -14px rgba(11,27,38,.4);
  border-color:var(--bx-red)}
.tv-oc .ic{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--bx-paper)}
.tv-oc .ic svg{width:21px;height:21px;color:var(--bx-red)}
.tv-oc b{font-family:var(--bx-cond);font-size:19px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.18}
.tv-edge{max-width:none;margin:0;padding-top:4px}
.tv-edge-row{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:center}
.tv-ph-edge{aspect-ratio:3/2}

/* ---------- real photographs ---------- */
.tv-fig{border:1px solid var(--bx-line);background:#fff;overflow:hidden;
  margin-left:auto;margin-right:auto;width:100%}
.tv-fig img{display:block;width:100%;height:auto}
.tv-fig figcaption{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.08em;color:#616D77;
  padding:10px 14px;border-top:1px solid var(--bx-line);background:#FAFCFD}
.tv-fig.wide{margin-top:34px}

/* ---------- fields of operations ---------- */
.tv-h2{font-family:var(--bx-cond);font-size:34px;line-height:1.1;text-transform:uppercase;
  color:var(--bx-ink);margin:0 0 24px}
.tv-sect{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tv-sc{position:relative;background:#fff;border:1px solid var(--bx-line);padding:20px 20px 20px 22px;
  display:flex;align-items:center;gap:14px;transition:.22s;overflow:hidden}
.tv-sc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bx-red);
  transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.tv-sc:hover::before{transform:scaleY(1)}
.tv-sc:hover{border-color:#BCCBD6;transform:translateX(4px)}
.tv-sc .n{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.14em;color:var(--bx-mute);
  flex:0 0 auto}
.tv-sc b{font-family:var(--bx-cond);font-size:18px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.2}

@media(max-width:1000px){
  .tv-eng{grid-template-columns:1fr;gap:28px}
  .bx-ph-sq{aspect-ratio:16/9}
  .tv-obj{grid-template-columns:1fr}
  .tv-edge-row{grid-template-columns:1fr;gap:24px}
  .tv-sect{grid-template-columns:repeat(2,1fr)}
  .tv-quote p{font-size:24px}
}
@media(max-width:620px){
  .tv-vision{padding:38px 0}
  .tv-quote p{font-size:20px}
  .tv-h2{font-size:25px}
  .tv-sect{grid-template-columns:1fr}
}


/* ====  id="fv-css" ==== */

/* the fire page runs the shared system with an amber accent instead of cyan */
#page-fire{--bx-cyan:#E9A13B}

/* ---------- signature: photoelectric chamber ---------- */
.fv-cham svg{width:100%;height:auto;display:block;overflow:visible}
.fv-cham .ch{fill:rgba(11,27,38,.6);stroke:#5E92AE;stroke-width:1.2}
.fv-cham .dev{fill:rgba(11,27,38,.9);stroke:var(--bx-cyan);stroke-width:1.3}
.fv-cham .cl{font-family:var(--bx-mono);font-size:10px;letter-spacing:.14em;fill:#BFD6E4;
  text-transform:uppercase}
.fv-cham .cs{font-family:var(--bx-mono);font-size:8.6px;letter-spacing:.1em;fill:#9EBDCF}
.fv-cham .cs.sm{fill:#C6D7E2}
.fv-cham .cl.al{fill:#F0A7AC}
.fv-cham .beam{stroke:var(--bx-cyan);stroke-width:1.6;fill:none;opacity:.55}
.fv-cham .drop{stroke:#8FB0C4;stroke-width:1.2;stroke-dasharray:3 4;fill:none}
.fv-cham .smoke circle{fill:#8FB0C4;opacity:.28}
.fv-cham .led{fill:#5A2226;stroke:#D9232D;stroke-width:1.4}

@keyframes fvDrift{
  0%{transform:translate(-26px,14px);opacity:0}
  25%{opacity:.34}
  75%{opacity:.34}
  100%{transform:translate(26px,-10px);opacity:0}}
@keyframes fvLed{0%,55%{fill:#5A2226}62%,100%{fill:#D9232D}}
@keyframes fvBeam{0%,55%{opacity:.55}70%,100%{opacity:1}}
.fv-cham .smoke circle{animation:fvDrift 6s ease-in-out infinite}
.fv-cham .smoke circle:nth-child(2){animation-delay:.7s}
.fv-cham .smoke circle:nth-child(3){animation-delay:1.4s}
.fv-cham .smoke circle:nth-child(4){animation-delay:2.1s}
.fv-cham .smoke circle:nth-child(5){animation-delay:2.8s}
.fv-cham .led{animation:fvLed 6s ease-in-out infinite}
.fv-cham .beam{animation:fvBeam 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .fv-cham .smoke circle,.fv-cham .led,.fv-cham .beam{animation:none}
  .fv-cham .smoke circle{opacity:.3}
}

/* ---------- product range ---------- */
.fv-range{background:var(--bx-paper);border-top:1px solid var(--bx-line);
  border-bottom:1px solid var(--bx-line)}
.fv-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fv-pc{background:#fff;border:1px solid var(--bx-line);padding:20px;transition:.22s;
  display:flex;flex-direction:column;gap:10px;min-height:118px}
.fv-pc:hover{transform:translateY(-4px);box-shadow:0 12px 26px -14px rgba(11,27,38,.4);
  border-color:var(--bx-red)}
.fv-pc .n{font-family:var(--bx-mono);font-size:10px;letter-spacing:.14em;color:var(--bx-red)}
.fv-pc b{font-family:var(--bx-cond);font-size:17.5px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.22}
.fv-more{font-family:var(--bx-mono);font-size:12px;letter-spacing:.06em;color:#616D77;
  margin:16px 0 0}

/* ---------- two-column prose ---------- */
.fv-two{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.fv-two .bx-p{max-width:none;margin:0}

/* ---------- panels ---------- */
.fv-pan{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fv-pcard{border:1px solid var(--bx-line);padding:26px 24px;background:#fff;transition:.22s;
  position:relative;overflow:hidden}
.fv-pcard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--bx-red);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.fv-pcard:hover::before{transform:scaleX(1)}
.fv-pcard:hover{border-color:#BCCBD6}
.fv-pcard .t{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.16em;color:var(--bx-red);
  text-transform:uppercase;margin-bottom:10px}
.fv-pcard b{display:block;font-family:var(--bx-cond);font-size:26px;text-transform:uppercase;
  color:var(--bx-ink);margin-bottom:12px;line-height:1.1}
.fv-pcard p{font-size:13.8px;line-height:1.7;color:var(--bx-body);margin:0}
.fv-zone{max-width:none;margin:24px 0 0;padding-top:22px;border-top:1px solid var(--bx-line)}

/* ---------- dark systems band ---------- */
.fv-dark{position:relative;overflow:hidden;padding:56px 0;
  background:linear-gradient(160deg,#0F2E44,#0B1B26);color:#fff}
.fv-dark .bx-grid{position:absolute;inset:0;opacity:.45}
.fv-dark .bx-wrap{position:relative}
.fv-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fv-dcard{border:1px solid rgba(143,192,217,.28);padding:28px 26px;
  background:rgba(11,27,38,.42);transition:.22s}
.fv-dcard:hover{border-color:var(--bx-cyan);transform:translateY(-3px)}
.fv-dcard p{font-size:13.8px;line-height:1.74;color:#C6D7E2;margin:0 0 12px}
.fv-dcard p:last-child{margin-bottom:0}

/* ---------- sensors ---------- */
.fv-sens-sec{background:var(--bx-paper);border-top:1px solid var(--bx-line)}
.fv-sens{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fv-sc{background:#fff;border:1px solid var(--bx-line);padding:20px;transition:.22s;
  display:flex;flex-direction:column;gap:9px}
.fv-sc:hover{border-color:var(--bx-red);transform:translateY(-3px)}
.fv-sc b{font-family:var(--bx-cond);font-size:17px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.2}
.fv-sc p{font-size:13.2px;line-height:1.62;color:var(--bx-body);margin:0}

/* ---------- alarm panel split ---------- */
.fv-panel-grid{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start}

/* ---------- real photographs ---------- */
.fv-fig{border:1px solid var(--bx-line);background:#fff;overflow:hidden}
.fv-fig img{display:block;width:100%;height:auto}
.fv-fig figcaption{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.08em;color:#616D77;
  padding:10px 14px;border-top:1px solid var(--bx-line);background:#FAFCFD}
.fv-strip{display:grid;gap:12px;margin-top:34px}
.fv-strip.n3{grid-template-columns:repeat(3,1fr)}
.fv-strip.n2{grid-template-columns:repeat(2,1fr)}
.fv-strip .fv-fig{transition:.22s;max-width:var(--fv-cap,560px);justify-self:center;width:100%}
.fv-strip .fv-fig:hover{border-color:var(--bx-red);transform:translateY(-3px)}
@media(max-width:760px){.fv-strip.n3,.fv-strip.n2{grid-template-columns:1fr}}

@media(max-width:1000px){
  .fv-prod{grid-template-columns:repeat(2,1fr)}
  .fv-two,.fv-pan,.fv-dgrid{grid-template-columns:1fr;gap:20px}
  .fv-sens{grid-template-columns:repeat(2,1fr)}
  .fv-panel-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:620px){
  .fv-prod{grid-template-columns:1fr}
  .fv-sens{grid-template-columns:1fr}
  .fv-pcard b{font-size:21px}
  .fv-dark{padding:40px 0}
}


/* ====  id="sv-css" ==== */

/* each service page keeps the shared system with its own accent */
/* --bx-cyan is the page accent; --sv-lt is the same hue lightened so it
   still clears 4.5:1 as small text on the dark project-data band */
#page-boiler{--bx-cyan:#E4703A;--sv-lt:#EC8352}
#page-cable {--bx-cyan:#2E9E8F;--sv-lt:#3FB3A3}
#page-amc   {--bx-cyan:#3DA35D;--sv-lt:#4EB870}

/* ---------- signature graphics ---------- */
.sv-sig svg{width:100%;height:auto;display:block;overflow:visible}
.sv-sig .rail{fill:none;stroke:#4E7F9E;stroke-width:1.4}
.sv-sig .nd{fill:rgba(11,27,38,.9);stroke:#5E92AE;stroke-width:1.2}
.sv-sig .nd.hot{stroke:var(--bx-cyan)}
.sv-sig .lb{font-family:var(--bx-cond);font-size:12.5px;fill:#DCE9F1;text-transform:uppercase}
.sv-sig .num{font-family:var(--bx-mono);font-size:8.4px;fill:#9EBDCF;letter-spacing:.12em}
.sv-sig .dot{fill:var(--bx-cyan)}

@keyframes svRun{to{offset-distance:100%}}
.sv-sig-track .dot{offset-path:path('M 34 24 V 226');offset-distance:0%;
  animation:svRun 7s cubic-bezier(.55,0,.45,1) infinite}

/* cable tray cross-section */
.sv-sig-tray .tray{fill:none;stroke:#5E92AE;stroke-width:2}
.sv-sig-tray .rung{stroke:#4E7F9E;stroke-width:1.4}
.sv-sig-tray .cab{fill:none;stroke-width:7;stroke-linecap:round;opacity:.85}
.sv-sig-tray .c1{stroke:#2E9E8F}.sv-sig-tray .c2{stroke:#4E7F9E}.sv-sig-tray .c3{stroke:#8FB0C4}
@keyframes svPull{0%{stroke-dashoffset:340}100%{stroke-dashoffset:0}}
.sv-sig-tray .cab{stroke-dasharray:340;animation:svPull 5s ease-in-out infinite}
.sv-sig-tray .c2{animation-delay:.5s}.sv-sig-tray .c3{animation-delay:1s}

/* AMC cycle */
.sv-sig-cycle .ring{fill:none;stroke:#3E6A87;stroke-width:1.6}
.sv-sig-cycle .arc{fill:none;stroke:var(--bx-cyan);stroke-width:3;stroke-linecap:round}
@keyframes svSpin{to{transform:rotate(360deg)}}
.sv-sig-cycle .spin{transform-origin:150px 118px;animation:svSpin 9s linear infinite}
.sv-sig-cycle .cl{font-family:var(--bx-mono);font-size:9px;fill:#BFD6E4;letter-spacing:.1em;
  text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  .sv-sig .dot,.sv-sig-tray .cab,.sv-sig-cycle .spin{animation:none}
  .sv-sig-tray .cab{stroke-dashoffset:0}
}

/* ---------- shared page body ---------- */
.sv-lede-note{font-family:var(--bx-mono);font-size:10.6px;letter-spacing:.1em;color:#9EBDCF;
  text-transform:uppercase;margin-top:16px}

.sv-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sv-sc{background:#fff;border:1px solid var(--bx-line);padding:20px;transition:.22s;
  display:flex;gap:14px;align-items:flex-start}
.sv-sc:hover{border-color:var(--bx-red);transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(11,27,38,.35)}
.sv-sc .n{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.12em;color:var(--bx-red);
  flex:0 0 auto;padding-top:2px}
.sv-sc b{font-family:var(--bx-cond);font-size:17px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.24;font-weight:700}

.sv-pkg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:34px}
.sv-pk{border:1px solid var(--bx-line);background:#fff;padding:26px 24px;position:relative;
  overflow:hidden;transition:.22s}
.sv-pk::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--bx-red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.sv-pk:hover::before{transform:scaleX(1)}
.sv-pk .t{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.16em;color:var(--bx-red);
  text-transform:uppercase;margin-bottom:10px}
.sv-pk b{display:block;font-family:var(--bx-cond);font-size:23px;text-transform:uppercase;
  color:var(--bx-ink);margin-bottom:11px;line-height:1.14}
.sv-pk p{font-size:13.8px;line-height:1.72;color:var(--bx-body);margin:0}

.sv-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sv-ap{position:relative;background:#fff;border:1px solid var(--bx-line);padding:20px 20px 20px 22px;
  transition:.22s;overflow:hidden}
.sv-ap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bx-red);
  transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.sv-ap:hover::before{transform:scaleY(1)}
.sv-ap:hover{transform:translateX(4px);border-color:#BCCBD6}
.sv-ap b{font-family:var(--bx-cond);font-size:16.5px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.24}

/* the photo in this block can be much taller than the copy, so centre the two
   columns instead of top-aligning them */
.sv-mdgrid{align-items:center;grid-template-columns:1fr 370px}
@media(max-width:1000px){.sv-mdgrid{grid-template-columns:1fr}}
.sv-suptitle{font-family:var(--bx-mono);font-size:10.6px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bx-mute);margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--bx-line)}
.sv-sup{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sv-sup li{display:grid;grid-template-columns:1fr;gap:2px;padding:11px 14px;
  background:var(--bx-paper);border-left:3px solid var(--bx-red);transition:.2s}
.sv-sup li:hover{background:#EEF3F7;transform:translateX(3px)}
.sv-sup b{font-family:var(--bx-cond);font-size:16px;text-transform:uppercase;color:var(--bx-ink);
  line-height:1.2}
.sv-sup span{font-size:12.9px;line-height:1.55;color:var(--bx-body)}
.sv-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.sv-badge{border:1px solid var(--bx-line);padding:13px 15px;background:#fff;transition:.2s}
.sv-badge:hover{border-color:var(--bx-red)}
.sv-badge b{display:block;font-family:var(--bx-cond);font-size:14.5px;text-transform:uppercase;
  color:var(--bx-ink);margin-bottom:4px}
.sv-badge span{font-size:12.2px;line-height:1.5;color:var(--bx-body)}
@media(max-width:620px){.sv-badges{grid-template-columns:1fr}}

.sv-mat-grid{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start}
.sv-mats{display:grid;gap:16px}
.sv-mat{border:1px solid var(--bx-line);background:#fff;padding:24px 24px 20px;transition:.22s;
  position:relative;overflow:hidden}
.sv-mat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bx-red);
  transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.sv-mat:hover::before{transform:scaleY(1)}
.sv-mat:hover{border-color:#BCCBD6}
.sv-mat b{display:block;font-family:var(--bx-cond);font-size:21px;text-transform:uppercase;
  color:var(--bx-ink);line-height:1.14}
.sv-mat .sub{font-family:var(--bx-mono);font-size:10.6px;letter-spacing:.1em;color:#616D77;
  text-transform:uppercase;margin:6px 0 11px}
.sv-mat p{font-size:13.8px;line-height:1.72;color:var(--bx-body);margin:0 0 14px}
.sv-mat ul{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px}
.sv-mat li{position:relative;padding-left:18px;font-size:13.2px;line-height:1.55;color:var(--bx-body)}
.sv-mat li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
  background:var(--bx-red);transform:rotate(45deg)}
.sv-mspec{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--bx-line)}
.sv-mspec div{padding:11px 0;border-bottom:1px solid #EEF2F5;padding-right:14px}
.sv-mspec .k{display:block;font-family:var(--bx-mono);font-size:9.6px;letter-spacing:.11em;
  color:#616D77;text-transform:uppercase;margin-bottom:3px}
.sv-mspec .v{font-size:13px;color:var(--bx-ink);line-height:1.4}
.sv-mat .go{display:inline-block;margin-top:15px;font-family:var(--bx-mono);font-size:11.2px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--bx-red);cursor:pointer;
  border-bottom:1px solid #F1C6C9;padding-bottom:2px}
.sv-mat .go:hover{border-bottom-color:var(--bx-red)}
@media(max-width:1000px){
  .sv-mat-grid{grid-template-columns:1fr;gap:26px}
  .sv-mspec{grid-template-columns:1fr}
}

.sv-fig{border:1px solid var(--bx-line);background:#fff;overflow:hidden;
  margin-left:auto;margin-right:auto;width:100%}
.sv-fig img{display:block;width:100%;height:auto}
.sv-fig figcaption{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.08em;color:#616D77;
  padding:10px 14px;border-top:1px solid var(--bx-line);background:#FAFCFD}
.sv-fig.wide{margin-top:34px}

.sv-specs-sec{position:relative;overflow:hidden;padding:56px 0;
  background:linear-gradient(160deg,#0F2E44,#0B1B26);color:#fff}
.sv-specs-sec .bx-grid{position:absolute;inset:0;opacity:.45}
.sv-specs-sec .bx-wrap{position:relative}
.sv-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid rgba(143,192,217,.28)}
.sv-sp{padding:20px 24px;border-bottom:1px solid rgba(143,192,217,.18);
  border-right:1px solid rgba(143,192,217,.18);display:grid;grid-template-columns:150px 1fr;gap:18px;
  align-items:baseline}
.sv-sp:nth-child(2n){border-right:none}
.sv-sp .k{font-family:var(--bx-mono);font-size:10.4px;letter-spacing:.12em;
  color:var(--sv-lt,var(--bx-cyan));text-transform:uppercase}
.sv-sp .v{font-size:13.8px;line-height:1.6;color:#DCE9F1}

@media(max-width:1000px){
  .sv-scope{grid-template-columns:repeat(2,1fr)}
  .sv-pkg{grid-template-columns:1fr}
  .sv-apps{grid-template-columns:repeat(2,1fr)}
  .sv-specs{grid-template-columns:1fr}
  .sv-sp{border-right:none}
}
@media(max-width:620px){
  .sv-scope,.sv-apps{grid-template-columns:1fr}
  .sv-sp{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .sv-pk b{font-size:20px}
  .sv-specs-sec{padding:40px 0}
}


/* ====  id="b31-css" ==== */

/* mobile-only containers stay hidden on desktop */
.b31-m{display:none}
.b31-fab{display:none}

@media(max-width:999px){

  /* ---------- 1. black "Vedika Business" strip — desktop only ---------- */
  .topstrip{display:none!important}
  /* the strip used to reserve space for the sticky header — reclaim it */
  .hdr{top:0!important}
  html{scroll-padding-top:calc(var(--hdrH,63px) + 8px)}
  .vcl-side{top:calc(var(--hdrH,63px) + 12px)!important;
    max-height:calc(100dvh - var(--hdrH,63px) - 26px)!important}

  /* ---------- 2. the promo banners under the hero — desktop only ---------- */
  .promos{display:none!important}

  /* ---------- 3. header: two rows, logo 50% larger, full-width search ---------- */
  .hdr-in{flex-wrap:wrap;row-gap:8px;padding:9px 10px 10px}
  .logo{order:1}
  .hdr-r{order:2;margin-left:auto;gap:14px}
  .srch{order:3;flex:1 0 100%;min-width:100%;max-width:none}
  .srch input{padding:9px 12px;font-size:13.5px}
  .srch button{padding:0 16px}

  .logo-mark{width:38px!important;height:38px!important;font-size:20px!important;border-radius:9px}
  .logo-flip{width:118px!important;height:44px!important}
  .logo-txt b{font-size:18.8px!important;line-height:1.05}          /* 12.5px -> +50% */
  .logo-txt small{font-size:9.2px!important;letter-spacing:1.1px!important}
  .yoi b{font-size:17px}
  .yoi span{font-size:8px;width:58px}

  /* ---------- 4. "Get a Quote" icon in the header ---------- */
  .b31-hq{display:flex!important;align-items:center;gap:6px;cursor:pointer;
    position:relative;color:#0b7d5a;font-weight:800;font-size:11.5px;line-height:1}
  .b31-hq svg{width:23px;height:23px;flex:0 0 auto}
  .b31-hq .t{display:none}
  @media(min-width:430px){.b31-hq .t{display:block}}

  /* ---------- 2/5. home page trimmed to 8 blocks ---------- */
  body:not(.b31-open) .b31-more{display:none!important}
  body.b31-open .b31-showmore{display:none}

  .b31-cut{display:block;padding:26px 14px 8px;background:#fff}
  .b31-cut .b31-btn{width:100%;background:var(--red);color:#fff;border:none;border-radius:10px;
    padding:15px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;
    box-shadow:0 4px 14px rgba(217,35,45,.28)}
  .b31-cut .b31-showmore{width:100%;background:#fff;color:#0b1a2b;border:1.5px solid #d7dee5;
    border-radius:10px;padding:13px;font-size:13.8px;font-weight:700;font-family:inherit;
    cursor:pointer;margin-top:10px}

  /* ---------- 5. Send us a Quick Message ---------- */
  .b31-qm{margin:18px 0 4px;border:1px solid #e2e8ee;border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg,#f7fbfa,#fff)}
  .b31-qm .qh{padding:14px 16px 10px;border-bottom:1px solid #eef2f6}
  .b31-qm .qh b{display:block;font-size:15.5px;font-weight:800;color:#0b1a2b}
  .b31-qm .qh small{display:block;font-size:11.8px;color:#6f7a86;margin-top:3px}
  .b31-qm .qb{padding:13px 16px 16px;display:grid;gap:9px}
  .b31-qm input,.b31-qm textarea{width:100%;border:1px solid #d7dee5;border-radius:9px;
    padding:11px 12px;font-size:14px;font-family:inherit;color:#1a2b3c;outline:none;background:#fff}
  .b31-qm input:focus,.b31-qm textarea:focus{border-color:var(--red)}
  .b31-qm textarea{min-height:74px;resize:vertical}
  .b31-qm .qsend{background:#0b7d5a;color:#fff;border:none;border-radius:9px;padding:13px;
    font-size:14.5px;font-weight:800;font-family:inherit;cursor:pointer}
  .b31-qm .qsend:disabled{opacity:.6}
  .b31-qm .qok{display:none;margin-top:4px;font-size:13px;line-height:1.6;color:#0b5d43;
    background:#e8f6f0;border:1px solid #bfe4d5;border-radius:9px;padding:11px 12px}
  .b31-qm .qok.bad{color:#8a2b2b;background:#fdeeee;border-color:#f2c7c7}
  .b31-qm .qok a{display:inline-block;margin:6px 8px 0 0;font-weight:800;color:#0b7d5a;
    border:1px solid #bfe4d5;border-radius:7px;padding:6px 10px;font-size:12.4px;background:#fff}

  /* ---------- 6. People Love Us — compact on phones ---------- */
  #loveSec .lv-cols,#loveSec .lv-head p,#loveSec .lv-dots{display:none!important}
  #loveSec{padding:26px 14px 30px}
  #loveSec .lv-head{margin-bottom:14px}
  #loveSec .lv-head h2{font-size:21px}
  .b31-rate{display:block}
  .b31-rate .rtop{display:flex;align-items:center;gap:12px;padding:2px 0 14px}
  .b31-rate .rnum{font-size:34px;font-weight:800;color:#111;line-height:1}
  .b31-rate .rnum sub{font-size:15px;font-weight:600;color:#8a97a4;bottom:0}
  .b31-rate .rstar{font-size:19px;color:#f5a623;letter-spacing:1px;line-height:1}
  .b31-rate .rcnt{margin-left:auto;font-size:12.8px;color:#5b6773;text-align:right;line-height:1.4}
  .b31-rate .rbar{display:flex;align-items:center;gap:10px;margin-bottom:7px}
  .b31-rate .rbar span:first-child{font-size:12.2px;color:#5b6773;width:48px;flex:0 0 auto}
  .b31-rate .rtr{flex:1;height:8px;border-radius:5px;background:#ece8e6;overflow:hidden}
  .b31-rate .rfl{height:100%;border-radius:5px;background:#0b9e83}
  .b31-rate .rpc{font-size:12.2px;color:#5b6773;width:36px;text-align:right;flex:0 0 auto}

  .b31-rv{margin-top:18px;border-top:1px solid #eef2f6;padding-top:14px}
  .b31-rv h4{font-size:15.5px;font-weight:800;color:#111;margin-bottom:10px}
  .b31-rvi{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid #f2f5f8}
  .b31-rvi .bdg{background:#0b9e83;color:#fff;font-size:12px;font-weight:800;border-radius:4px;
    padding:4px 7px;flex:0 0 auto;line-height:1}
  .b31-rvi .who b{display:block;font-size:14px;font-weight:700;color:#111;line-height:1.25}
  .b31-rvi .who small{display:block;font-size:11.6px;color:#8a97a4;margin-top:1px}
  .b31-rvi .who p{font-size:12.8px;color:#41505f;margin-top:5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .b31-rvi .dt{margin-left:auto;font-size:11.4px;color:#9aa6b2;flex:0 0 auto;white-space:nowrap}
  #loveSec .lv-cta{margin-top:18px}
  #loveSec .lv-btn{width:100%;padding:14px;font-size:14.5px}

  /* ---------- 7. floating "Get Quote" pill ---------- */
  .b31-fab{display:inline-flex!important;position:fixed;right:14px;
    bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:8200;
    align-items:center;gap:10px;background:#fff;border:2px solid #0b7d5a;border-radius:40px;
    padding:9px 18px 9px 12px;box-shadow:0 6px 20px rgba(11,26,43,.20);cursor:pointer;
    font-family:inherit}
  .b31-fab svg{width:26px;height:26px;flex:0 0 auto}
  .b31-fab b{font-size:14.5px;font-weight:800;color:#0b1a2b;letter-spacing:.2px}
  .vchat,.vchat-box{bottom:calc(128px + env(safe-area-inset-bottom,0px))!important}
  .vchat-box{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}

  /* ---------- "Chat with Us" floating icon — desktop only ----------
     The Chat tab in the bottom nav still opens the chat window, so nothing
     is lost. !important is needed because vchatClose() clears the inline
     style when the chat panel is dismissed. ------------------------------ */
  .vchat{display:none!important}

  /* ---------- footer link accordion — hidden on phones ----------
     Navigation lives in the bottom nav ("Our Range" / "Profile") instead.
     To bring it back: set B31_FOOTER_ACCORDION = true in the script below. */
  .b31-facc{display:none!important}

  /* ---------- Group Companies — plain block, styled like "Email Us" ---------- */
  .b31-gc{display:block;margin-top:16px;padding-top:14px;border-top:1px solid #edf0f3}

  /* ---------- Profile sheet ---------- */
  #mSheet .b31-psec .b31-fsec:first-child{border-top:none}
  #mSheet .b31-fh{padding:15px 16px}
  #mSheet .b31-fb{padding-bottom:8px}

  /* ---------- bottom nav: labels +25%, icons to match ---------- */
  .mnav{padding:6px 2px calc(5px + env(safe-area-inset-bottom,0px))}
  .mnav a span{font-size:13px!important;font-weight:700}
  .mnav a svg{width:26px!important;height:26px!important}
  .mnav .bdg{right:calc(50% - 22px)}
  @media(max-width:700px){
    .mnav a span{font-size:12.25px!important}
    .mnav a svg{width:24px!important;height:24px!important}
  }
  @media(max-width:360px){.mnav a span{font-size:11.4px!important}}

  /* ---------- 8. footer accordion ---------- */
  footer .ft-in,footer .ft-group{display:none!important}
  .b31-facc{display:block;border-top:1px solid var(--line)}
  .b31-fsec+.b31-fsec{border-top:1px solid #eef2f6}
  .b31-fh{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;
    padding:16px 16px;font-size:18.9px;font-weight:800;color:#0b1a2b;line-height:1.25}
                                        /* 13.5px -> +40% = 18.9px */
  .b31-fh i{font-style:normal;font-size:22px;font-weight:700;color:#b3bfca;flex:0 0 auto;
    transition:transform .22s}
  .b31-fh span{color:#0b1a2b;transition:color .18s}
  .b31-fsec.open .b31-fh span{color:#0b7d5a}
  .b31-fsec.open .b31-fh i{transform:rotate(45deg);color:#0b7d5a}
  .b31-fb{display:none;background:#fff;padding:2px 0 14px}
  .b31-fsec.open .b31-fb{display:block}
  /* one continuous hairline rail down the left of the whole list */
  .b31-fb .rail{border-left:2px solid var(--red);margin-left:18px}
  .b31-fb a{display:block;padding:15px 16px 15px 22px;font-size:15.6px;color:#4a5563;
    line-height:1.35;font-weight:400;background:none;border:none}
  .b31-fb a:active{color:var(--red)}

  /* leave room for the bottom nav + the quote pill */
  footer .ft-bot{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* ==================================================================
   PHONE (<=700px) — bigger, clearer imagery
   A. category tiles : 1 wide tile on top, 2 below
   B. product rows   : exactly ONE card per screen, with scroll snap
   ================================================================== */
@media(max-width:700px){

  /* ---------- A. colourful category tiles ----------
     Two tiles only, both full width, stacked one above the other. The old
     "1 wide + 2 narrow" row made the bottom pair too small to read. */
  .cat-tiles{grid-template-columns:1fr!important;gap:12px!important}
  /* contain (not cover) so the whole product stays visible instead of being
     cropped top-and-bottom by the wider box */
  .cat-tiles .ctile .ci2{aspect-ratio:16/9;background:#fff}
  .cat-tiles .ctile .ci2 img{width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center bottom!important}
  .cat-tiles .ctile .ci2 svg{width:132px;height:132px}
  .cat-tiles .ctile b{font-size:17px;min-height:0}
  .cat-tiles .ctile small{font-size:13.5px}
  .cat-tiles .ctile:nth-child(n+3){display:none}

  /* ---------- B. one product card per screen ----------
     The 42px side gutters existed only to park the scroll arrows, and those
     are already hidden on touch devices, so we reclaim that space. -------- */
  .mega-prods{margin-left:0!important;margin-right:0!important}
  .mega-prods,.shadow-row,.gprod-row{
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:14px!important;padding-left:2px;padding-right:2px}
  .mega-prods>.spc,.shadow-row>.spc,.gprod-row>.gpc{
    flex:0 0 100%!important;width:100%;max-width:100%;scroll-snap-align:center}

  /* a full-width card deserves a much taller image */
  .mega-prods>.spc .simg,.shadow-row>.spc .simg{height:250px}
  .gprod-row>.gpc .gimg{height:250px}
  .mega-prods>.spc .simg svg,.shadow-row>.spc .simg svg{width:170px;height:170px}
  .gprod-row>.gpc .gimg svg{width:170px;height:170px}

  /* text scales up with the card */
  .mega-prods>.spc .gname,.shadow-row>.spc .gname{font-size:15.5px;min-height:0;
    -webkit-line-clamp:2}
  .gprod-row>.gpc .gname{font-size:15.5px;min-height:0}
  .mega-prods>.spc .now,.shadow-row>.spc .now{font-size:21px}
  .gprod-row>.gpc .gprice .now{font-size:21px}
  .mega-prods>.spc,.shadow-row>.spc{padding:14px 15px 17px}

  /* swipe hint under each one-card row */
  .b31-swipe{display:flex;align-items:center;justify-content:center;gap:7px;
    font-size:11.6px;color:#8a97a4;font-weight:600;padding:2px 0 10px;letter-spacing:.2px}
  .b31-swipe i{font-style:normal;font-size:14px;color:#b3bfca}
}


/* ====  id="pgal-css" ==== */

/* One image set, two sizes.

   The photos are cropped tight to the product, so on the product page they
   fill the gallery frame — that is where the customer wants to see detail.
   Everywhere the product appears small (home tiles, listing cards, the
   related strip) the *container* supplies the breathing space instead, so
   nothing has to be stored twice. */

/* --- product page: as large as the frame allows --- */
#pdMain img{width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important}
#pdThumbs .th img{object-fit:contain!important;padding:6%}

/* --- small contexts: margin comes from the container --- */
.ctile .ci2{padding:2%!important;background:#fff}
.ctile .ci2 img{width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important}
.gimg img,.simg img,.vrel-img img{object-fit:contain!important;
  object-position:center!important;padding:7%}
@media(max-width:700px){ .ctile .ci2{padding:2%!important} }


/* ====  id="vone-css" ==== */

/* A product page carries the product, then ratings & reviews, then
   Related / Other Products. Nothing else. */
.cmpsec,          /* Similar Products To Compare */
.pdfast,          /* 2-3 Working Days Delivery in Delhi-NCR */
.pdtrust          /* trust badges strip */
{display:none!important}

/* Related / Other Products — the photos were rendering too small */
.vrel-card{flex:0 0 280px!important}
.vrel-img{height:190px!important;padding:8px!important}
.vrel-img img{padding:0!important;object-fit:contain!important}
@media(max-width:700px){
  .vrel-card{flex:0 0 228px!important}
  .vrel-img{height:158px!important}
}


/* ====  id="b65-css" ==== */


/* ---------- 3. HOME MEGA BLOCKS: SMALLER, ALL THE SAME HEIGHT ----------
   The row was reserving 360px because the tallest panel measured 356px.
   Trimming the paddings, the fact boxes and the tile image frame brings the
   tallest panel under 300px, so the row is set to 300px and every section
   on the page now ends on exactly the same line.                        */

.mega-panel{padding:16px!important}
.mega-top{gap:16px!important;margin-bottom:16px!important;
  grid-auto-rows:minmax(300px,auto)!important}

.mega-left{padding:14px 14px!important}
.mega-left h3{font-size:17px!important;line-height:1.22!important;margin:0 0 5px!important}
.mega-left .mp-sub{font-size:12.3px!important;line-height:1.5!important;margin:0 0 10px!important}

.mp-facts{gap:6px!important;margin-bottom:10px!important}
.mp-fact{padding:6px 10px!important;border-radius:8px!important}
.mp-fact b{font-size:13.4px!important;line-height:1.2!important}
.mp-fact small{font-size:11px!important;line-height:1.35!important;margin-top:1px!important}

.mp-tag-h{margin-bottom:7px!important}
.mp-tags{gap:6px!important;margin-bottom:10px!important}
.mp-tags span{padding:5px 10px!important;font-size:11.6px!important}

.mp-why{gap:7px!important;margin-bottom:10px!important}
.mp-w{gap:8px!important}
.mp-w i{width:18px!important;height:18px!important;font-size:11px!important}
.mp-w b{font-size:12.8px!important;line-height:1.28!important}
.mp-w small{font-size:11.2px!important;line-height:1.4!important}

.mp-cta{padding:9px 18px!important;font-size:12.6px!important;border-radius:8px!important}

/* the panel modifier classes share their names with the inner blocks, so the
   margin above must be cancelled on the panel itself (as before) */
.mega-left.mp-why,.mega-left.mp-range,.mega-left.mp-industries{
  margin-bottom:0!important;gap:0!important}

/* tiles: shorter image frame and a tighter caption block */
.cat-tiles{gap:12px!important}
.ctile{padding-bottom:10px!important}
.ctile .ci2{min-height:120px!important}
.ctile .shelf{height:12px!important;margin:-1px 0 8px!important}
.ctile b{font-size:13.4px!important;min-height:2.6em!important;margin-bottom:1px!important;padding:0 6px!important}
.ctile small{font-size:12px!important}

@media(max-width:1340px){ .mega-top{grid-auto-rows:minmax(290px,auto)!important} }
@media(max-width:1000px){
  .mega-top{grid-auto-rows:auto!important}
  .ctile .ci2{min-height:150px!important}
}

/* ---------- 4. RELATED / OTHER PRODUCTS: IMAGE FILLS THE FRAME ----------
   The photo was drawn with object-fit:contain plus a 7% inset inside a frame
   that was 280 x 190, while the photographs themselves are 1000 x 545. Two
   different shapes, so a white band opened down both sides of every card.
   The frame now carries the photograph's own 1000:545 shape and the image
   covers it, so it reaches all four edges — and because the shapes match,
   nothing is actually cropped off a correctly sized photo.                  */

.vrel-img{padding:0!important;overflow:hidden;
  height:auto!important;aspect-ratio:1000/545}
.vrel-img img{width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;
  padding:0!important;display:block}
.vrel-img svg{width:100%!important;height:100%!important}

/* ---------- 2. a small hint that the gallery is playing ---------- */
#pdThumbs .th.on,.vth.on{outline:1.6px solid var(--red);outline-offset:-1.6px}


/* ====  id="b66-css" ==== */


/* 1. Left panel thoda patla -> chaaron tile thodi chaudi ho gayin.
      Photo width se fit hoti hai, isliye tile chaudi = photo badi.      */
.mega-top{grid-template-columns:minmax(280px,320px) 1fr!important;
  gap:14px!important;
  grid-auto-rows:minmax(342px,auto)!important}

/* 2. Tiles ke beech ka gap kam -> har tile aur chaudi                   */
.cat-tiles{gap:10px!important}

/* 3. Image frame wapas bada, aur andar ka 2% khaali border hataya
      taki photo frame ke kinare tak jaaye                              */
.ctile .ci2{min-height:186px!important;padding:7px 8px!important}
.ctile .ci2 img{padding:0!important}

/* 4. Shelf aur caption thoda saans le lein                             */
.ctile{padding-bottom:11px!important}
.ctile .shelf{height:14px!important;margin:-1px 0 9px!important}
.ctile b{font-size:13.6px!important;min-height:2.6em!important}

@media(max-width:1340px){
  .mega-top{grid-template-columns:minmax(260px,300px) 1fr!important;
    grid-auto-rows:minmax(302px,auto)!important}
}

/* mobile / tablet — yahan panel upar-neeche stack hota hai              */
@media(max-width:1000px){
  .mega-top{grid-template-columns:1fr!important;
    grid-auto-rows:auto!important}
  .ctile .ci2{min-height:175px!important;padding:0!important}
}
@media(max-width:700px){
  .ctile .ci2{padding:0!important}
}


/* ====  id="b67-css" ==== */


/* ---------- 1. TILE KA FRAME FIX ----------
   Ab ci2 ki height uski apni chaudai se banti hai (aspect-ratio), photo
   se nahi. Isliye chaahe photo chaudi ho ya khadi, box hamesha ek jaisa.
   flex:0 0 auto zaroori hai — warna box khud ko stretch kar leta tha.   */

.ctile .ci2{
  aspect-ratio:1.2!important;
  flex:0 0 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:6px 8px!important;
  overflow:hidden!important;
  background:#fff}

.ctile .ci2 img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  padding:0!important;display:block}

/* tile apni natural height rakhe, row ke saath khinche nahi */
.cat-tiles{align-items:start!important;grid-auto-rows:auto!important;
  gap:10px!important}

.mega-top{grid-template-columns:minmax(300px,350px) 1fr!important;
  gap:14px!important;
  grid-auto-rows:minmax(302px,auto)!important}

/* ---------- left panel ko bhi ek jaisa rakha ----------
   Har section ka panel alag lamba tha (kisi me 5 chip, kisi me 3).
   Description 3 line par, chips 4 par, why-points 3 par cap kar diye —
   ab har section ka panel bhi lagbhag ek hi height ka hai.            */

.mega-left .mp-sub{display:-webkit-box!important;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.mp-tags{gap:5px!important;margin-bottom:9px!important}
.mp-tags span{padding:4px 9px!important;font-size:11.2px!important}
.mp-tags span:nth-child(n+5){display:none!important}
.mp-why .mp-w:nth-child(n+4){display:none!important}
.mp-facts .mp-fact:nth-child(n+4){display:none!important}

/* ---------- 2. PRODUCT CARD KI PHOTO BADI ----------
   Frame 7% border chhod raha tha aur photo bhi apne andar safed border
   liye hui thi — dono milkar product chhota kar dete the. Ab trim ki hui
   photo lagti hai aur border 3% hai.                                  */

.simg img{padding:3%!important;object-fit:contain!important;
  object-position:center!important}

/* ---------- responsive ---------- */
@media(max-width:1340px){
  .mega-top{grid-template-columns:minmax(280px,320px) 1fr!important;
    grid-auto-rows:minmax(294px,auto)!important}
}
@media(max-width:1000px){
  .mega-top{grid-template-columns:1fr!important;
    grid-auto-rows:auto!important}
  .ctile .ci2{aspect-ratio:1.25!important}
}
/* phone par layout alag hai (ek chaudi tile upar, do neeche) — wahan
   16:9 frame hi rehne diya */
@media(max-width:700px){
  .ctile .ci2{aspect-ratio:16/9!important;padding:6px!important}
}


/* ====  id="b74-mobile-fixes" ==== */

/* =================================================================
   BUILD 74 — corrections from the mobile responsiveness audit.
   Appended last so nothing above needs editing; delete this block
   to return to Build 73 behaviour exactly.
   ================================================================= */

/* 1. iPhone zooms the whole page when a field under 16px is focused,
      and never zooms back out. Every field on the site was 12–15px. */
@media(max-width:999px){
  input,select,textarea,
  .srch input,
  .fld input,.fld select,.fld textarea,
  .vb-form input,.vb-form select,.vb-form textarea,
  .vmd-f input,.vmd-f textarea,
  .b31-qm input,.b31-qm textarea{ font-size:16px !important; }
  input::placeholder,textarea::placeholder{ font-size:15px; }
}

/* 2. the fixed bottom bar is ~57px plus the home-indicator inset, but only
      60px of clearance was reserved, so the foot of every page sat under it */
@media(max-width:999px){
  body{ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important; }
}

/* 3. touch targets that were smaller than a fingertip. The icon keeps its
      size — only the area that responds to a tap grows. */
@media(max-width:999px){
  .dr-qty button,.stepper button,.vb-step button,
  .vrel-ar button,.cs-pager button{ min-width:40px; min-height:40px; }
}

/* 4. the smallest body text on the site, lifted to a readable floor.
      Numeric badges are left alone — they sit inside fixed circles. */
@media(max-width:700px){
  .vc-cmp th,.spc .rpill,.mp-w small,.mp-tags span,
  .bx-use span,.vblk-badges span,.sv-mat .go{ font-size:12px; }
}

/* 5. a table that still will not fit gets a sideways scroll rather than
      losing its last column off the edge of the screen */
@media(max-width:700px){
  .tbl-scroll table{ min-width:460px; }
}

/* 6. the category menu stayed on screen after you picked something from it.
      On a mouse, the menu is shown by :hover \u2014 so choosing a sub-category
      opened the page underneath but the menu stayed up, because the pointer
      was still sitting on the same heading. This locks it shut until the
      pointer leaves that heading. */
.citem.dd-lock .cat-dd{ display:none !important; }