:root{
--indigo:#2A2166; --blue:#1E81C5; --navy:#0B1F3A;
--grad:linear-gradient(100deg,#2A2166 0%,#1E81C5 100%);
--bg-blue:#EAF6FC; --bg-indigo:#F2F0FA; --bg-page:#F6F8FC; --surface:#FFFFFF;
--text:#101828; --text-2:#667085; --border:#DDE5EE;
--success:#16A36A; --warning:#F4A340; --error:#E5484D;
--r-card:16px; --r-btn:11px;
--shadow-s:0 1px 2px rgba(11,31,58,.05);
--shadow-m:0 6px 20px -6px rgba(11,31,58,.12);
--shadow-l:0 16px 40px -12px rgba(42,33,102,.18);
--tr:190ms cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'Plus Jakarta Sans','Noto Sans Bengali',system-ui,sans-serif;background:var(--bg-page);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none;transition:color var(--tr)}
ul{list-style:none}
[id]{scroll-margin-top:106px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.sec-title{font-size:clamp(28px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.18;color:var(--text)}
.sec-sub{color:var(--text-2);font-size:17px;margin-top:10px;max-width:560px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
section{padding:96px 0}
@media(max-width:1024px){section{padding:72px 0}}
@media(max-width:640px){section{padding:56px 0}}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-btn);font-weight:600;font-size:15px;padding:0 22px;height:48px;transition:transform var(--tr),box-shadow var(--tr),background var(--tr),color var(--tr),border-color var(--tr);white-space:nowrap}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px -6px rgba(30,129,197,.5)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(30,129,197,.6)}
.btn-secondary{background:var(--indigo);color:#fff}
.btn-secondary:hover{background:#221a54;transform:translateY(-1px);box-shadow:var(--shadow-m)}
.btn-outline{border:1.5px solid var(--border);color:var(--indigo);background:var(--surface)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow-s)}
.btn-ghost{color:var(--indigo)}
.btn-ghost:hover{background:var(--bg-indigo);transform:translateY(-1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ── 01 Announcement bar ── */
.announce{background:var(--navy);color:rgba(255,255,255,.88);font-size:13px}
.announce .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.announce a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.88)}
.announce a:hover{color:#fff}
.announce .right{display:flex;align-items:center;gap:20px}
.announce .icon{width:14px;height:14px}
.announce select{background:transparent;color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.25);border-radius:6px;font:inherit;padding:2px 6px}
.announce select option{color:var(--text)}
.mq{flex:1;min-width:0;overflow:hidden;margin-right:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mqScroll 22s linear infinite}
.mq-track:hover{animation-play-state:paused}
.mq-half{display:flex;align-items:center;gap:26px;flex:none;padding-right:110px;white-space:nowrap}
.mq-item{display:inline-flex;align-items:center;gap:7px}
.mq-dot{opacity:.45}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
@media(max-width:900px){.announce .right a span{display:none}}
/* ── 02 Header ── */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:box-shadow var(--tr)}
.header.scrolled{box-shadow:var(--shadow-m)}
.header .wrap{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:40px;width:auto;display:block}
.search{position:relative;flex:1;max-width:660px;margin:0 auto}
.search-box{display:flex;align-items:center;background:var(--bg-page);border:1.5px solid var(--border);border-radius:12px;height:48px;transition:border-color var(--tr),box-shadow var(--tr)}
.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,129,197,.12);background:#fff}
.search-box .icon{margin-left:14px;color:var(--text-2)}
.search-box input{flex:1;border:none;background:none;font:inherit;font-size:14.5px;padding:0 12px;min-width:0}
.search-box input:focus{outline:none}
.search-box select{border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--indigo);border-left:1px solid var(--border);padding:0 12px;height:26px}
.search-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-l);padding:14px;display:none;z-index:70}
.search.open .search-drop{display:block}
.search-drop h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:6px 0 8px}
.search-drop .tags{display:flex;flex-wrap:wrap;gap:8px}
.search-drop .tags button{background:var(--bg-indigo);color:var(--indigo);font-size:13px;font-weight:600;padding:7px 12px;border-radius:99px;transition:background var(--tr)}
.search-drop .tags button:hover{background:var(--bg-blue);color:var(--blue)}
.search-drop .recent button{display:flex;gap:10px;align-items:center;width:100%;padding:8px 6px;border-radius:8px;font-size:14px;color:var(--text)}
.search-drop .recent button:hover{background:var(--bg-page)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>li{position:relative}
.nav a,.nav .navbtn{display:flex;align-items:center;gap:5px;padding:10px 13px;font-size:14.5px;font-weight:600;color:var(--text);border-radius:9px;transition:color var(--tr),background var(--tr)}
.nav a:hover,.nav .navbtn:hover,.nav .navbtn[aria-expanded="true"]{color:var(--blue);background:var(--bg-blue)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:540px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-l);padding:18px;display:none;grid-template-columns:1fr 1fr;gap:8px;z-index:70}
.mega.open{display:grid}
.mega a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px}
.mega a:hover{background:var(--bg-page)}
.mega .mi{width:40px;height:40px;border-radius:11px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;flex:none}
.mega b{display:block;font-size:14.5px;font-weight:700;color:var(--text)}
.mega span{font-size:12.5px;color:var(--text-2)}
.utils{display:flex;align-items:center;gap:6px}
.iconbtn{position:relative;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:var(--text);transition:background var(--tr),color var(--tr)}
.iconbtn:hover{background:var(--bg-blue);color:var(--blue)}
.iconbtn .badge{position:absolute;top:4px;right:3px;min-width:18px;height:18px;border-radius:99px;background:var(--error);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.iconbtn .badge.b-blue{background:var(--blue)}
.hamburger{display:none}
.hdr-seller{margin-left:4px}
@media(max-width:1240px){.nav{display:none}}
@media(max-width:860px){
#searchDesk{display:none}
.hamburger{display:grid}
.header .wrap{height:64px;gap:8px}
.logo img{height:30px}
.iconbtn{width:40px;height:40px}
.utils{gap:2px}
.m-search{display:block!important}
}
@media(max-width:480px){
.logo img{height:27px}
}
@media(max-width:350px){
.logo img{height:24px}
.utils a[aria-label^="Wishlist"]{display:none}
}
.m-search{display:none;padding:8px 24px 10px;background:rgba(255,255,255,.92)}
.m-search .search{max-width:none}
/* Drawer */
.drawer-veil{position:fixed;inset:0;background:rgba(11,31,58,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity var(--tr)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:81;transform:translateX(102%);transition:transform .28s ease,visibility .28s;display:flex;flex-direction:column;padding:20px;visibility:hidden}
body.drawer-open .drawer{visibility:visible}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-veil{opacity:1;pointer-events:auto}
.drawer nav a{display:flex;justify-content:space-between;align-items:center;padding:14px 8px;font-weight:600;font-size:16px;border-bottom:1px solid var(--bg-page)}
.drawer .dr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer .btn{margin-top:18px}
/* ── 03 Hero ── */
.hero-outer{padding:28px 0 0}
.hero{position:relative;overflow:hidden;border-radius:24px;background:
radial-gradient(900px 480px at 88% -10%,rgba(30,129,197,.16),transparent 60%),
radial-gradient(700px 420px at -8% 110%,rgba(42,33,102,.12),transparent 55%),
linear-gradient(135deg,#F2F0FA 0%,#EAF6FC 100%);
border:1px solid #E4E9F4}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 64px}
.hero h1{font-size:clamp(30px,4vw,58px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:18px 0 20px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:17.5px;color:var(--text-2);max-width:520px;margin-bottom:30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:14px;font-weight:600;color:var(--text-2)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust .icon{width:17px;height:17px;color:var(--success)}
/* hero visual */
.hero-vis{position:relative;min-height:430px}
.hero-ring{position:absolute;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;height:420px;pointer-events:none}
.hv-card{position:absolute;background:#fff;border:1px solid #E4E9F4;border-radius:18px;box-shadow:var(--shadow-l);overflow:hidden}
.hv-card .ph{display:grid;place-items:center;background:linear-gradient(160deg,#F6F8FC,#EAF6FC);color:var(--blue)}
.hv-card .ph .icon{width:44px;height:44px;stroke-width:1.4;opacity:.85}
.hv-card figcaption{padding:10px 14px 12px;font-size:12.5px;font-weight:700;color:var(--text)}
.hv-card figcaption span{display:block;font-weight:600;color:var(--blue);font-size:12px;margin-top:1px}
.hv-1{width:218px;top:24px;left:34px}.hv-1 .ph{height:150px}
.hv-2{width:190px;bottom:30px;left:0}.hv-2 .ph{height:126px}
.hv-3{width:200px;top:96px;right:0}.hv-3 .ph{height:138px}
.chip{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid #E4E9F4;border-radius:12px;box-shadow:var(--shadow-m);padding:9px 13px;font-size:12.5px;font-weight:700;color:var(--text);z-index:2}
.chip .ci{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.chip .icon{width:15px;height:15px}
.chip-1{top:6px;right:44px}.chip-1 .ci{background:var(--success)}
.chip-2{bottom:96px;right:52px}.chip-2 .ci{background:var(--blue)}
.chip-3{bottom:-6px;left:150px}.chip-3 .ci{background:var(--indigo)}
@media(max-width:1024px){.hero-grid{grid-template-columns:1fr;padding:52px 40px;gap:40px}.hero-vis{min-height:400px;max-width:520px;margin:0 auto;width:100%}}
@media(max-width:640px){
.hero-outer .wrap{padding:0 14px}
.hero-grid{padding:40px 22px 48px;gap:32px}
.hero-vis{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hv-card{position:static;width:auto}
.hv-3{display:none}
.hero-ring,.chip-1,.chip-2{display:none}
.chip-3{position:static;justify-content:center;grid-column:1/-1}
.hero-ctas .btn{flex:1}
}
/* Hero ambient float */
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes ringDrift{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hv-1{animation:floatA 6.5s ease-in-out infinite}
.hv-2{animation:floatB 7.5s ease-in-out 1.1s infinite}
.hv-3{animation:floatA 8.5s ease-in-out .6s infinite}
.chip-1{animation:floatB 5.2s ease-in-out .4s infinite}
.chip-2{animation:floatA 6.8s ease-in-out 1.4s infinite}
.chip-3{animation:floatB 5.8s ease-in-out .8s infinite}
.hero-ring{animation:ringDrift 90s linear infinite}
@media(max-width:640px){.hv-card,.chip{animation:none}}
/* ── 04 Trust cards ── */
.trust{padding:56px 0 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:22px;display:flex;gap:15px;align-items:flex-start;box-shadow:var(--shadow-s);transition:transform var(--tr),box-shadow var(--tr)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.tcard .ti{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none}
.tcard:nth-child(odd) .ti{background:var(--bg-blue);color:var(--blue)}
.tcard:nth-child(even) .ti{background:var(--bg-indigo);color:var(--indigo)}
.tcard b{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px}
.tcard span{font-size:13.5px;color:var(--text-2);line-height:1.5}
@media(max-width:1024px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr 1fr;gap:12px}.tcard{flex-direction:column;padding:18px}}
/* ── 05 Categories ── */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ccard{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px;overflow:hidden;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);display:flex;flex-direction:column;gap:0;min-height:210px}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:#cfe3f5}
.ccard .ci{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.ccard .ci .icon{width:27px;height:27px;stroke-width:1.6}
.ccard b{font-size:17.5px;font-weight:700}
.ccard span{font-size:13.5px;color:var(--text-2);margin-top:4px}
.ccard .arrow{position:absolute;right:20px;bottom:20px;width:38px;height:38px;border-radius:99px;border:1.5px solid var(--border);display:grid;place-items:center;color:var(--indigo);transition:all var(--tr)}
.ccard:hover .arrow{background:var(--grad);border-color:transparent;color:#fff;transform:translateX(3px)}
.ccard.c-all{background:var(--grad);color:#fff;border:none}
.ccard.c-all b,.ccard.c-all span{color:#fff}
.ccard.c-all span{opacity:.85}
.ccard.c-all .ci{background:rgba(255,255,255,.16);color:#fff}
.ccard.c-all .arrow{border-color:rgba(255,255,255,.4);color:#fff}
.ccard.c-all:hover .arrow{background:#fff;color:var(--indigo)}
@media(max-width:1024px){.cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr 1fr;gap:12px}.ccard{padding:20px;min-height:180px}}
/* ── Product cards ── */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--tr),box-shadow var(--tr)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.pimg{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#F6F8FC,#EAF6FC);display:grid;place-items:center;overflow:hidden}
.pimg .icon{width:52px;height:52px;color:var(--blue);opacity:.8;stroke-width:1.3;transition:transform var(--tr)}
.pcard:hover .pimg .icon{transform:scale(1.03)}
.pbadge{position:absolute;top:12px;left:12px;background:var(--error);color:#fff;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:8px;letter-spacing:.02em}
.wish{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:99px;background:rgba(255,255,255,.92);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2);transition:all var(--tr)}
.wish:hover{color:var(--error);border-color:#f2c6c8}
.wish.on{color:#fff;background:var(--error);border-color:var(--error)}
.wish.on .icon{fill:currentColor}
.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pcat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pname{font-size:16.5px;font-weight:700;line-height:1.35;margin:6px 0 2px}
.pmeta{font-size:13px;color:var(--text-2)}
.prow{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.price{font-size:19px;font-weight:800;color:var(--indigo)}
.was{font-size:13.5px;color:var(--text-2);text-decoration:line-through}
.save{font-size:12px;font-weight:700;color:var(--error);background:#FDECEC;padding:3px 7px;border-radius:6px}
.stock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;margin-top:10px;color:var(--success)}
.stock::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--success)}
.stock.low{color:var(--warning)}.stock.low::before{background:var(--warning)}
.pacts{display:flex;gap:9px;margin-top:15px}
.pacts .btn{flex:1;height:44px}
.qview{width:44px;height:44px;border-radius:var(--r-btn);border:1.5px solid var(--border);display:grid;place-items:center;color:var(--indigo);flex:none;transition:all var(--tr)}
.qview:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:1024px){.prod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.prod-grid{grid-template-columns:1fr;gap:16px}}
/* ── 07 B2B ── */
.b2b .card{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-s)}
.b2b .left{padding:60px 56px}
.b2b h2{margin:14px 0 14px}
.b2b p{color:var(--text-2);max-width:480px}
.b2b ul{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:26px 0 30px}
.b2b ul li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600}
.b2b ul .icon{color:var(--success);width:19px;height:19px}
.b2b .right{background:radial-gradient(600px 400px at 80% 20%,rgba(30,129,197,.25),transparent 60%),linear-gradient(150deg,var(--indigo),#173a63 65%,var(--blue));position:relative;display:grid;place-items:center;padding:48px;min-height:420px}
.b2b-shelf{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(340px,100%)}
.b2b-item{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:18px 14px;color:#fff;backdrop-filter:blur(4px)}
.b2b-item .icon{width:26px;height:26px;margin-bottom:10px;opacity:.95}
.b2b-item b{display:block;font-size:13.5px;font-weight:700}
.b2b-item span{font-size:11.5px;opacity:.75}
@media(max-width:1024px){.b2b .card{grid-template-columns:1fr}.b2b .left{padding:44px 32px}.b2b .right{min-height:320px}}
@media(max-width:560px){.b2b .left{padding:34px 22px}.b2b ul{grid-template-columns:1fr}.b2b .hero-ctas .btn{flex:1}}
/* ── 08 Carousel ── */
.car-wrap{position:relative}
.car{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*22px)/4);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.car .pcard{scroll-snap-align:start}
.car .pname{font-size:15px;min-height:2.7em}
.car .price{font-size:17px}
.car-nav{display:flex;gap:10px}
.car-btn{width:44px;height:44px;border-radius:99px;border:1.5px solid var(--border);background:#fff;display:grid;place-items:center;color:var(--indigo);transition:all var(--tr)}
.car-btn:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.car-btn[disabled]{opacity:.35;pointer-events:none}
@media(max-width:1240px){.car{grid-auto-columns:calc((100% - 2*22px)/3)}}
@media(max-width:820px){.car{grid-auto-columns:calc((100% - 22px)/2)}}
@media(max-width:540px){.car{grid-auto-columns:82%;gap:14px}}
/* ── 09 Why choose ── */
.why{background:#fff;border-block:1px solid var(--border)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.wblock .wi{width:52px;height:52px;border-radius:15px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
.wblock:nth-child(even) .wi{background:var(--bg-indigo);color:var(--indigo)}
.wblock b{font-size:16.5px;font-weight:700;display:block;margin-bottom:6px}
.wblock p{font-size:14px;color:var(--text-2)}
@media(max-width:1024px){.why-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
/* ── 10 Brands ── */
.brands{padding:64px 0}
.brands h2{font-size:clamp(22px,2.4vw,28px);text-align:center;font-weight:800;letter-spacing:-.01em}
.brand-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px}
.bcell{min-height:74px;background:#fff;border:1px solid var(--border);border-radius:13px;display:grid;place-items:center;color:var(--indigo);font-size:13.5px;font-weight:700;text-align:center;padding:12px 14px;line-height:1.35;transition:border-color var(--tr),color var(--tr),box-shadow var(--tr)}
.bcell:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-s)}
.brand-note{text-align:center;font-size:12.5px;color:var(--text-2);margin-top:14px}
@media(max-width:900px){.brand-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.brand-strip{grid-template-columns:1fr 1fr}}
/* ── 11 Catalog table ── */
.catalog .panel{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-s)}
.cat-tools{display:flex;gap:12px;padding:18px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.cat-tools .search-box{height:44px;flex:1;min-width:220px;max-width:360px}
.cat-tools select{height:44px;border:1.5px solid var(--border);border-radius:11px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--text);padding:0 12px}
.cat-tools .count{margin-left:auto;font-size:13.5px;color:var(--text-2);font-weight:600}
table.cat-table{width:100%;border-collapse:collapse}
.cat-table th{background:var(--bg-page);text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:700;padding:13px 18px;border-bottom:1px solid var(--border)}
.cat-table td{padding:14px 18px;border-bottom:1px solid #EEF2F8;font-size:14.5px;vertical-align:middle}
.cat-table tr:last-child td{border-bottom:none}
.cat-table tbody tr{transition:background var(--tr)}
.cat-table tbody tr:hover{background:#FAFCFF}
.tprod{display:flex;gap:13px;align-items:center}
.thumb{width:46px;height:46px;border-radius:11px;background:linear-gradient(160deg,#F6F8FC,#EAF6FC);display:grid;place-items:center;color:var(--blue);flex:none;border:1px solid #E9EEF6}
.thumb .icon{width:22px;height:22px;stroke-width:1.5}
.tprod b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.tprod span{font-size:12.5px;color:var(--text-2)}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px}
.pill.cat-a{background:var(--bg-blue);color:var(--blue)}
.pill.cat-e{background:var(--bg-indigo);color:var(--indigo)}
.spill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:99px;background:#E9F7F0;color:var(--success)}
.spill::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--success)}
.spill.low{background:#FEF3E4;color:#C77A17}.spill.low::before{background:var(--warning)}
.tprice b{font-size:15px;font-weight:800;color:var(--indigo);display:block}
.tprice s{font-size:12.5px;color:var(--text-2)}
.tacts{display:flex;gap:8px;justify-content:flex-end}
.cat-list{display:none}
@media(max-width:860px){
table.cat-table{display:none}
.cat-list{display:grid;gap:12px;padding:16px}
.clcard{border:1px solid var(--border);border-radius:14px;padding:14px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.clcard .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.clcard .btn{grid-column:1/-1}
}
.cat-foot{display:flex;justify-content:center;padding:20px;border-top:1px solid var(--border)}
/* ── 12 Impact ── */
.impact .card{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(120deg,#F2F0FA,#EAF6FC);border:1px solid #E4E9F4;padding:64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.impact h2{margin:14px 0}
.impact p{color:var(--text-2);max-width:520px}
.impact .one{font-size:120px;font-weight:800;letter-spacing:-.04em;background:linear-gradient(120deg,var(--indigo),var(--blue) 70%,var(--warning));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;text-align:center}
.impact .one small{display:block;font-size:15px;letter-spacing:.08em;color:var(--text-2);-webkit-text-fill-color:var(--text-2);font-weight:600;margin-top:10px;text-transform:uppercase}
@media(max-width:900px){.impact .card{grid-template-columns:1fr;padding:44px 28px;text-align:center}.impact p{margin:0 auto}.impact .btn{margin-top:8px}}
/* ── 13 Stats ── */
.stats{background:var(--grad);color:#fff;position:relative;overflow:hidden;padding:76px 0}
.stats::before{content:"";position:absolute;width:560px;height:560px;border:60px solid rgba(255,255,255,.06);border-radius:50%;right:-140px;top:-220px}
.stats::after{content:"";position:absolute;width:380px;height:380px;border:44px solid rgba(255,255,255,.05);border-radius:50%;left:-120px;bottom:-190px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.stat{text-align:center;padding:8px 20px}
.stat+.stat{border-left:1px solid rgba(255,255,255,.18)}
.stat b{display:block;font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.02em}
.stat span{font-size:14px;opacity:.85;font-weight:600}
@media(max-width:860px){.stats-grid{grid-template-columns:1fr 1fr;gap:28px 0}.stat:nth-child(3){border-left:none}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr}.stat b{font-size:30px}}
/* ── 14 Seller CTA ── */
.seller .card{position:relative;overflow:hidden;border-radius:24px;background:radial-gradient(700px 500px at 85% 0%,rgba(30,129,197,.35),transparent 55%),var(--indigo);color:#fff;padding:72px 64px;text-align:center}
.seller .card::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;border:80px solid rgba(255,255,255,.05);left:-260px;top:-260px;transform:rotate(-12deg)}
.seller h2{color:#fff;max-width:640px;margin:14px auto 14px}
.seller p{color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 32px}
.seller .btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.seller .btn-outline:hover{border-color:#fff}
.seller .btn-primary{background:#fff;color:var(--indigo);box-shadow:none}
.seller .eyebrow{color:#8FC7EC}
@media(max-width:640px){.seller .card{padding:48px 24px}}
/* ── 15 Footer ── */
.footer{background:linear-gradient(170deg,var(--navy) 30%,#1b1650 100%);color:rgba(255,255,255,.78);font-size:14.5px}
.footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:48px;padding:72px 0 56px}
.f-logo{margin-bottom:22px}
.f-logo img{height:38px;width:auto;display:block}
.footer p{line-height:1.7;font-size:14px}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background var(--tr)}
.socials a:hover{background:var(--blue);transform:translateY(-2px)}
.socials a{transition:background var(--tr),transform var(--tr)}
.footer h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.footer li{margin-bottom:11px}
.footer li a{display:inline-block;transition:color var(--tr),transform var(--tr)}
.footer li a:hover{color:#fff;transform:translateX(4px)}
.f-contact li{display:flex;gap:12px;margin-bottom:16px}
.f-contact .icon{color:#8FC7EC;margin-top:2px}
.f-contact b{color:#fff;font-weight:600;display:block;font-size:14px}
.f-contact span span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.f-contact b{text-transform:none;letter-spacing:0}
.footer .bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.footer .bottom nav{display:flex;gap:20px}
.footer .bottom nav a{position:relative}
.footer .bottom nav a:hover{color:#fff}
.announce a{transition:color var(--tr),transform var(--tr)}
.announce .right a:hover{transform:translateY(-1px)}
@media(max-width:1024px){.footer .top{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:560px){.footer .top{grid-template-columns:1fr;padding:52px 0 40px}}
/* Extra-small devices */
@media(max-width:420px){
.wrap{padding:0 16px}
section{padding:48px 0}
.hero-outer .wrap{padding:0 10px}
.hero-ctas{flex-direction:column}
.hero-ctas .btn{width:100%}
.cat-tools{flex-direction:column;align-items:stretch}
.cat-tools .search-box{max-width:none}
.cat-tools .count{margin-left:0;text-align:center}
.b2b .hero-ctas{flex-direction:column}
.impact .one{font-size:88px}
.footer .bottom{flex-direction:column;text-align:center}
.footer .bottom nav{flex-wrap:wrap;justify-content:center}
.pay{justify-content:center}
.announce .wrap{gap:8px}
.announce .right{gap:12px}
.trust-grid{grid-template-columns:1fr}
.tcard{flex-direction:row}
}
@media(max-width:360px){
.cat-grid,.prod-grid{grid-template-columns:1fr}
.ccard{min-height:150px}
.sec-title{font-size:24px}
.stats-grid{grid-template-columns:1fr 1fr}
}
/* ── Inner pages (About / Contact) ── */
.page-hero{background:radial-gradient(700px 380px at 85% -20%,rgba(30,129,197,.16),transparent 60%),linear-gradient(135deg,#F2F0FA,#EAF6FC);border-bottom:1px solid #E4E9F4;padding:72px 0 60px}
.page-hero h1{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.02em;margin-top:14px}
.page-hero .tagline{color:var(--text-2);font-size:17px;margin-top:10px;font-style:italic}
.page-body{padding:72px 24px 96px}
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
.about-grid h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
.about-grid h2:not(:first-child){margin-top:40px}
.about-grid p{color:var(--text-2);margin-bottom:14px}
.facts{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow-s);position:sticky;top:104px}
.facts h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:18px}
.facts dl{display:grid;gap:14px}
.facts dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);font-weight:700}
.facts dd{font-weight:600;font-size:15px;margin-top:2px}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cat-chips span{background:var(--bg-blue);color:var(--blue);font-size:13.5px;font-weight:700;padding:8px 15px;border-radius:99px}
.partner-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 6px}
.partner-list li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.partner-list .icon{color:var(--success);width:18px;height:18px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.ccards{display:grid;gap:14px}
.ccard-i{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;transition:transform var(--tr),box-shadow var(--tr)}
.ccard-i:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.ccard-i .ci{width:46px;height:46px;border-radius:13px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;flex:none}
.ccard-i b{display:block;font-size:15.5px}
.ccard-i span{font-size:13.5px;color:var(--text-2)}
.ccard-i a{color:var(--blue);font-weight:600;font-size:14.5px}
.ccard-i a:hover{text-decoration:underline}
.cform{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--shadow-s)}
.cform h2{font-size:22px;font-weight:800;margin-bottom:20px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:13.5px;font-weight:700}
.field input,.field textarea{font:inherit;font-size:15px;border:1.5px solid var(--border);border-radius:11px;padding:12px 14px;background:var(--bg-page);transition:border-color var(--tr),box-shadow var(--tr)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,129,197,.12);background:#fff}
.field textarea{min-height:130px;resize:vertical}
@media(max-width:900px){.about-grid,.contact-grid{grid-template-columns:1fr}.facts{position:static}.partner-list{grid-template-columns:1fr}}
@media(max-width:560px){.frow{grid-template-columns:1fr}.page-body{padding:52px 16px 72px}.cform{padding:22px}}
/* ── Products / Cart / Wishlist / Auth pages ── */
.pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.pp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.pp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pp-grid{grid-template-columns:1fr}}
.pp-empty{text-align:center;color:var(--text-2);padding:56px 0;font-weight:600}
.empty-state{text-align:center;padding:56px 20px;background:#fff;border:1px solid var(--border);border-radius:18px;display:grid;justify-items:center;gap:10px}
.empty-state .es-ic{width:64px;height:64px;border-radius:99px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center}
.empty-state .es-ic .icon{width:28px;height:28px}
.empty-state b{font-size:19px;font-weight:800}
.empty-state p{color:var(--text-2)}
.empty-state .btn{margin-top:8px}
.cart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
@media(max-width:900px){.cart-grid{grid-template-columns:1fr}}
.cart-list{display:grid;gap:12px}
.cartrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.cartrow .thumb{width:54px;height:54px}
.cartrow .nm b{display:block;font-size:15px;line-height:1.3}
.cartrow .nm span{font-size:12.5px;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cartrow .pr{font-weight:800;color:var(--indigo);font-size:15px}
.cart-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.qty button{width:34px;height:36px;font-size:17px;font-weight:700;color:var(--indigo);transition:background var(--tr)}
.qty button:hover{background:var(--bg-indigo)}
.qty output{min-width:34px;text-align:center;font-weight:700;font-size:14px}
.rm{color:var(--error);font-size:13px;font-weight:700;transition:opacity var(--tr)}
.rm:hover{opacity:.75}
.sumrow{display:flex;justify-content:space-between;align-items:center;font-size:15px;padding-top:6px}
.sumrow b{font-size:20px;font-weight:800;color:var(--indigo)}
.policy{max-width:820px}
.policy h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:30px 0 10px}
.policy p{color:var(--text-2);margin-bottom:6px}
.draft-note{display:inline-block;background:#FEF3E4;color:#C77A17;font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;margin-bottom:8px}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--shadow-s);width:min(460px,100%)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-page);border-radius:12px;padding:5px;margin-bottom:24px}
.auth-tab{border-radius:9px;height:42px;font-weight:700;font-size:14.5px;color:var(--text-2);transition:all var(--tr)}
.auth-tab.on{background:#fff;color:var(--indigo);box-shadow:var(--shadow-s)}
.auth-alt{text-align:center;margin-top:14px;font-size:13.5px}
.auth-alt a{color:var(--blue);font-weight:600}
.auth-alt a:hover{text-decoration:underline}
@media(max-width:560px){.policy{max-width:820px}
.policy h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:30px 0 10px}
.policy p{color:var(--text-2);margin-bottom:6px}
.draft-note{display:inline-block;background:#FEF3E4;color:#C77A17;font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;margin-bottom:8px}
.auth-card{padding:22px}}
/* Support fab — speed dial */
.fabwrap{position:fixed;right:22px;bottom:22px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:13px}
.fab{width:56px;height:56px;border-radius:99px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(30,129,197,.7);transition:transform var(--tr),box-shadow var(--tr)}
.fab:hover{transform:translateY(-3px)}
.fab .icon{width:24px;height:24px}
.fab .f-close{display:none}
.fabwrap.open .f-open{display:none}
.fabwrap.open .f-close{display:block}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.fab-pill{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:14px;padding:9px 20px 9px 10px;border-radius:99px;box-shadow:var(--shadow-l);opacity:0;transform:translateY(14px) scale(.92);transition:opacity .24s ease,transform .24s ease;white-space:nowrap}
.fabwrap.open .fab-menu{pointer-events:auto}
.fabwrap.open .fab-pill{opacity:1;transform:none}
.fabwrap.open .fab-pill:nth-child(1){transition-delay:.1s}
.fabwrap.open .fab-pill:nth-child(2){transition-delay:.05s}
.fabwrap.open .fab-pill:nth-child(3){transition-delay:0s}
.fab-pill .pi{width:32px;height:32px;border-radius:99px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.fab-pill .pi .icon{width:16px;height:16px}
.fab-pill:hover{filter:brightness(1.08)}
.p-wa{background:linear-gradient(100deg,#128C4B,#25D366)}
.p-call{background:linear-gradient(100deg,var(--indigo),var(--blue))}
.p-agent{background:linear-gradient(100deg,#6D28D9,#A855F7)}
/* Modal */
.modal-veil{position:fixed;inset:0;background:rgba(11,31,58,.55);z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.modal-veil.open{display:flex}
.modal{background:#fff;border-radius:20px;max-width:720px;width:100%;box-shadow:var(--shadow-l);display:grid;grid-template-columns:1fr 1.1fr;overflow:hidden;position:relative;max-height:90vh}
.modal .mimg{background:linear-gradient(160deg,#F6F8FC,#EAF6FC);display:grid;place-items:center;min-height:300px}
.modal .mimg .icon{width:80px;height:80px;color:var(--blue);opacity:.8;stroke-width:1.2}
.modal .mbody{padding:32px}
.modal .close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:99px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2)}
.modal .close:hover{color:var(--error)}
@media(max-width:640px){.modal{grid-template-columns:1fr;overflow:auto}.modal .mimg{min-height:200px}}
/* Toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;z-index:100;opacity:0;transition:all .3s ease;display:flex;gap:9px;align-items:center;box-shadow:var(--shadow-l)}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast .icon{color:var(--success);width:18px;height:18px}
/* ============================================================
v2.0 additions — PHP build only
Everything below extends the v1.12 design with the pieces the
static file did not need: real product images inside cards,
product-details page, pagination, alerts, checkout, order
confirmation, breadcrumbs. All values reuse the tokens above.
============================================================ */
/* Real product images inside the existing card / thumb shells */
.pimg .pimg-link{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
/* v2.1 — the image link above covers the whole tile, so the badge and the
wishlist button need to sit on a higher layer or they disappear behind it */
.pimg .pbadge{z-index:2}
.pimg .wish{z-index:2}
.pimg img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform var(--tr)}
.pcard:hover .pimg img{transform:scale(1.04)}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6px;border-radius:11px}
.hv-card .ph img{width:100%;height:100%;object-fit:contain;padding:10px}
.hv-card a{display:block;color:inherit}
.pname a{color:inherit}
.pname a:hover{color:var(--blue)}
.cartrow .nm b a{color:inherit}
.cartrow .nm b a:hover{color:var(--blue)}
.stock.out{background:#FDECEC;color:var(--error)}
.stock.out::before{background:var(--error)}
.add-cart.is-busy{opacity:.65;pointer-events:none}
/* Search suggestion links inherit the old button styling */
.search-drop .tags a{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--text);
background:var(--bg-page);border:1px solid var(--border);border-radius:99px;padding:7px 14px;transition:all var(--tr)}
.search-drop .tags a:hover{background:var(--bg-blue);border-color:var(--blue);color:var(--indigo)}
/* Alerts */
.alert{display:flex;gap:11px;align-items:flex-start;border-radius:13px;padding:14px 18px;font-size:14.5px;font-weight:600;line-height:1.5}
.alert .icon{width:19px;height:19px;flex:none;margin-top:1px}
.alert-success{background:#E9F7F0;color:#0E7A50;border:1px solid #C7EBD9}
.alert-success .icon{color:var(--success)}
.alert-error{background:#FDECEC;color:#A82B2F;border:1px solid #F5CFD0}
.alert-error .icon{color:var(--error)}
.alert-info{background:var(--bg-blue);color:var(--indigo);border:1px solid #CBE6F6}
/* Pagination */
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:44px}
.pg{min-width:42px;height:42px;padding:0 14px;display:inline-grid;place-items:center;border:1.5px solid var(--border);
border-radius:11px;background:#fff;font-size:14.5px;font-weight:700;color:var(--text);transition:all var(--tr)}
.pg:hover{border-color:var(--blue);color:var(--indigo);transform:translateY(-1px)}
.pg.on{background:var(--grad);border-color:transparent;color:#fff}
.pg.off{opacity:.45;pointer-events:none}
.pg-gap{color:var(--text-2);font-weight:700;padding:0 2px}
/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--text-2);font-weight:600}
.crumbs a{color:var(--text-2);transition:color var(--tr)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{opacity:.5}
.crumbs b{color:var(--indigo);font-weight:700}
/* Product details */
.pd-body{padding:34px 24px 96px}
.pd-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start}
.pd-stage{position:relative;background:linear-gradient(160deg,#F6F8FC,#EAF6FC);border:1px solid var(--border);
border-radius:20px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.pd-stage img{width:100%;height:100%;object-fit:contain;padding:36px}
.pd-stage .icon{width:96px;height:96px;color:var(--blue);opacity:.8;stroke-width:1.1}
.pd-stage .pbadge{position:absolute;top:16px;left:16px}
.pd-assure{list-style:none;display:grid;gap:10px;margin-top:20px}
.pd-assure li{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600;color:var(--text-2)}
.pd-assure .icon{width:18px;height:18px;color:var(--success)}
.pd-info h1{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;margin-top:10px;line-height:1.22}
.pd-meta{color:var(--text-2);font-size:15px;margin-top:8px}
.pd-buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.qty-lg{height:52px}
.qty-lg button{width:44px;height:100%;font-size:19px}
.qty-lg input{width:56px;height:100%;border:none;text-align:center;font:inherit;font-weight:700;font-size:15px;background:#fff;-moz-appearance:textfield}
.qty-lg input::-webkit-outer-spin-button,.qty-lg input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wish-lg.on{border-color:var(--error);color:var(--error)}
.wish-lg.on .icon{fill:var(--error)}
.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:32px;padding-top:28px;border-top:1px solid var(--border)}
.pd-specs dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);font-weight:700}
.pd-specs dd{font-weight:700;font-size:15px;margin-top:3px}
.pd-desc{margin-top:34px}
.pd-desc h2{font-size:19px;font-weight:800;margin-bottom:10px}
.pd-desc p,.pd-desc li{color:var(--text-2);font-size:15px;line-height:1.65}
.pd-desc ul,.pd-desc ol{padding-left:20px;margin-top:8px}
.pd-note{display:flex;gap:10px;align-items:flex-start;margin-top:30px;background:var(--bg-indigo);border-radius:13px;
padding:14px 16px;font-size:13.5px;color:var(--text-2);line-height:1.55}
.pd-note .icon{width:18px;height:18px;color:var(--indigo);flex:none;margin-top:1px}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr;gap:32px}.pd-specs{grid-template-columns:1fr}}
@media(max-width:560px){.pd-body{padding:24px 16px 72px}.pd-buy .btn{flex:1 1 100%}}
/* Checkout */
.checkout-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:32px;align-items:start}
.ck-lines{display:grid;gap:10px}
.ck-line{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--text-2);line-height:1.45}
.ck-line b{color:var(--text);font-weight:700}
.pay-opts{display:grid;gap:12px}
.pay-opt{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--border);border-radius:13px;
padding:14px 16px;cursor:pointer;transition:all var(--tr);background:var(--bg-page)}
.pay-opt:hover{border-color:var(--blue);background:#fff}
.pay-opt input{margin-top:3px;accent-color:var(--blue);width:18px;height:18px;flex:none}
.pay-opt b{display:block;font-size:14.5px}
.pay-opt span span{font-size:13px;color:var(--text-2);font-weight:500}
.pay-opt:has(input:checked){border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(30,129,197,.1)}
@media(max-width:900px){.checkout-grid{grid-template-columns:1fr}}
/* Order confirmation + order history table */
.order-done{background:#fff;border:1px solid var(--border);border-radius:20px;padding:36px;box-shadow:var(--shadow-s);max-width:900px}
.od-ic{width:56px;height:56px;border-radius:99px;background:#E9F7F0;color:var(--success);display:grid;place-items:center;margin-bottom:18px}
.od-ic .icon{width:28px;height:28px}
.order-done h2{font-size:24px;font-weight:800;letter-spacing:-.01em}
.order-done>p{color:var(--text-2);font-size:14.5px;margin-top:6px}
.order-table{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px}
.order-table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
font-weight:700;padding:0 12px 12px;border-bottom:1px solid var(--border)}
.order-table td{padding:14px 12px;border-bottom:1px solid #EEF2F8}
.order-table tfoot td{border:none;padding:8px 12px;color:var(--text-2);font-weight:600}
.order-table tfoot tr:first-child td{padding-top:16px}
.order-table tfoot .grand td{font-size:17px;font-weight:800;color:var(--indigo);border-top:1px solid var(--border);padding-top:14px}
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:32px}
.od-grid h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:8px}
.od-grid p{color:var(--text-2);font-size:14.5px;line-height:1.6}
@media(max-width:640px){.order-done{padding:22px}.od-grid{grid-template-columns:1fr}
.order-table{font-size:13.5px}.order-table th,.order-table td{padding:10px 8px}}
/* Empty state text width (base rules live in the v1.12 block above) */
.empty-state p{font-size:15px;max-width:420px}
/* Filter toolbar as a real form */
.cat-tools form,.cat-tools .btn{flex:none}
.cat-tools{flex-wrap:wrap}
/* v2.3 — image fallback: the icon sits in the same box as the ![]()
and is only
revealed when the image fails to load, so a broken path never shows alt text.
The base rule `img{display:block}` is author-level, so it beats the browser's
own [hidden] rule — the hidden image needs an author-level rule of its own. */
img[hidden]{display:none}
.pimg .img-fallback,.thumb .img-fallback,.pd-stage .img-fallback,.hv-card .ph .img-fallback{display:none}
.pimg .img-fallback:not([hidden]),.thumb .img-fallback:not([hidden]),
.pd-stage .img-fallback:not([hidden]),.hv-card .ph .img-fallback:not([hidden]){display:block}
/* ============================================================
v2.4 — auth controls
============================================================ */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:48px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:9px;
display:grid;place-items:center;color:var(--text-2);transition:color var(--tr),background var(--tr)}
.pw-eye:hover{color:var(--indigo);background:var(--bg-indigo)}
.pw-eye .icon{width:19px;height:19px}
.pw-eye svg[hidden]{display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2);font-weight:600;
line-height:1.5;cursor:pointer;margin-bottom:14px}
.check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.check a{color:var(--blue);font-weight:700}
.check a:hover{text-decoration:underline}
.check-agree{background:var(--bg-page);border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.auth-row .check{margin-bottom:0}
.auth-row>a{font-size:13.5px;font-weight:700;color:var(--blue)}
.auth-row>a:hover{text-decoration:underline}
.auth-note{font-size:13px;color:var(--text-2);text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.auth-note a{color:var(--blue);font-weight:700}
.alert span a{word-break:break-word}
.iconbtn.signed-in{color:var(--indigo)}
.iconbtn.signed-in::after{content:"";position:absolute;bottom:6px;right:6px;width:8px;height:8px;border-radius:99px;
background:var(--success);border:2px solid #fff}
/* v2.8 — free delivery note on the cart */
.free-note{display:flex;gap:9px;align-items:center;background:#E9F7F0;color:#0E7A50;border:1px solid #C7EBD9;
border-radius:11px;padding:11px 13px;font-size:13.5px;font-weight:700;margin-top:14px}
.free-note.near{background:var(--bg-blue);color:var(--indigo);border-color:#CBE6F6}
.free-note .icon{width:18px;height:18px;flex:none}
/* ============================================================
v2.9 — the richer product fields on the storefront
============================================================ */
/* NEW badge sits under the discount badge when both are shown */
.pbadge-new{background:var(--indigo);top:auto}
.pimg .pbadge-new{top:44px}
.pd-stage .pbadge-new{top:56px}
/* one-line summary on the card, clamped so every card stays the same height */
.psnip{font-size:12.5px;color:var(--text-2);line-height:1.45;margin-top:6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* quick view */
.qv-short{font-size:14px;color:var(--text-2);line-height:1.55;margin-top:10px}
.qv-short[hidden]{display:none}
/* product page: lead paragraph */
.pd-lead{font-size:15.5px;color:var(--text-2);line-height:1.6;margin-top:14px;padding-left:14px;
border-left:3px solid var(--blue)}
/* product page: gallery thumbnails */
.pd-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pd-thumb{width:66px;height:66px;border:1.5px solid var(--border);border-radius:11px;overflow:hidden;
background:linear-gradient(160deg,#F6F8FC,#EAF6FC);padding:0;transition:border-color var(--tr),transform var(--tr)}
.pd-thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.pd-thumb:hover{transform:translateY(-2px)}
.pd-thumb.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,129,197,.14)}
/* product page: composition block */
.pd-comp{background:var(--bg-page);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
font-size:14.5px;line-height:1.7;color:var(--text)}
/* product page: dealer / bulk pricing */
.pd-bulk{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
background:var(--bg-indigo);border:1px solid #DCD6F0;border-radius:14px;padding:16px 18px;margin-top:26px}
.pd-bulk b{display:block;font-size:17px;font-weight:800;color:var(--indigo);margin-top:6px}
.pd-bulk>div>span:last-child{display:block;font-size:13px;color:var(--text-2);margin-top:3px}
@media(max-width:560px){.pd-bulk{flex-direction:column;align-items:stretch}.pd-bulk .btn{width:100%}}
/* v3.0 — editable policy pages */
.policy [data-lang][hidden]{display:none}
.policy-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--text-2)}
.policy-foot a{color:var(--blue);font-weight:700}
.policy h3{font-size:17px;font-weight:800;margin:22px 0 8px}
.policy ul,.policy ol{padding-left:22px;margin:10px 0;color:var(--text-2)}
.policy li{margin-bottom:6px;line-height:1.65}
.policy table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.policy th,.policy td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
.policy blockquote{border-left:3px solid var(--blue);padding-left:14px;color:var(--text-2);margin:14px 0}
.ttl-bn{display:block}
/* ════════════════════════════════════════════════════════════════════
MOBILE POLISH v3.2
Med Prax Pharma — append this at the VERY END of assets/css/style.css
Date: 2026-07-28
CHANGELOG
3.2.0 Header blur removed on mobile (scroll judder), compact mobile
search row, hero fits one screen, real 52px tap targets,
drawer locks body scroll, marquee stopped below 640px,
anchor scroll offset corrected for the real mobile header.
════════════════════════════════════════════════════════════════════ */
/* ── 1. SCROLL JUDDER ────────────────────────────────────────────────
backdrop-filter on a STICKY element forces the browser to re-blur
everything behind it on every single scroll frame. This is the number
one cause of the juddering. Desktop GPUs absorb it, phones do not.
Solid background instead: visually almost identical, no repaint cost. */
@media(max-width:1024px){
.header{
backdrop-filter:none;
-webkit-backdrop-filter:none;
background:rgba(255,255,255,.98);
}
.m-search{background:rgba(255,255,255,.98)}
/* Same problem, smaller scale: 4 blurred B2B tiles + the hero chip */
.chip{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
.b2b-item{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.13)}
}
/* Reveal animation: shorter distance and duration = less compositing
while the user is actively scrolling */
@media(max-width:640px){
.reveal{transform:translateY(10px);transition-duration:.38s}
}
/* ── 2. ANCHOR SCROLL OFFSET ─────────────────────────────────────────
[id]{scroll-margin-top:106px} is tuned for the 72px desktop header.
The real mobile header is 64px + the search row, so anchor links land
with the section title hidden underneath. Corrected per breakpoint. */
@media(max-width:860px){ [id]{scroll-margin-top:130px} }
@media(max-width:640px){ [id]{scroll-margin-top:124px} }
/* ── 3. ANNOUNCEMENT BAR ─────────────────────────────────────────────
The marquee is a permanently running animation. On a 390px screen it
only ever shows half a sentence (that mid-word cut in your screenshot)
and it keeps the compositor busy for the whole session.
Below 640px: drop the marquee, keep the useful controls. */
@media(max-width:640px){
.announce .mq{display:none}
.announce .wrap{justify-content:flex-end;gap:16px;min-height:38px}
.announce .right{gap:16px}
.announce select{padding:4px 8px;font-size:12.5px}
}
/* ── 4. MOBILE SEARCH ROW ────────────────────────────────────────────
Now that STEP 1 makes this row actually render, keep it compact.
Search is the main navigation on a commerce site, so it earns its
space, but 60px was too much. 54px total. */
@media(max-width:860px){
.m-search{padding:8px 16px 10px}
.m-search .search-box{height:44px;border-radius:11px}
.m-search .search-box input{font-size:15px} /* 15px+ stops iOS zoom-on-focus */
}
/* ── 5. TAP TARGETS ──────────────────────────────────────────────────
.btn used a fixed height:48px. Fixed height cannot grow, so a label
that wraps overflows its own box. min-height grows, height does not. */
.btn{
height:auto;
min-height:48px;
padding:12px 22px;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation; /* removes the 300ms tap delay */
}
.btn:active{transform:scale(.985)} /* tap feedback, so it feels registered */
.btn-sm{height:auto;min-height:40px;padding:8px 16px}
.pacts .btn{height:auto;min-height:44px} /* product cards keep their 44px */
/* ── 6. HERO — ONE SCREEN ────────────────────────────────────────────
The reason the hero was two screens tall: at max-width:640px the CSS
turns .hero-vis into a 2-column grid and keeps rendering the product
card collage BELOW the text block. On a phone that collage is the
"hijibiji" part, and it is pure decoration — real products appear in
the next two sections anyway. Hidden, not shrunk. */
@media(max-width:640px){
.hero-outer{padding:14px 0 0}
.hero{border-radius:18px}
.hero-grid{padding:28px 20px 32px;gap:0}
.hero-vis{display:none}
.hero .eyebrow{font-size:11.5px;letter-spacing:.12em}
.hero .eyebrow::before{width:18px}
/* clamp(30px, 4vw, 58px) never scales on mobile: at 390px wide, 4vw is
15.6px, so the clamp locks to its 30px floor on every phone from
320px to 640px. 7.4vw actually tracks the viewport. */
.hero h1{font-size:clamp(26px,7.4vw,34px);line-height:1.14;margin:12px 0 12px}
.hero p{font-size:15px;margin-bottom:20px;max-width:46ch}
/* flex:1 relied on white-space:nowrap to force a wrap — fragile.
flex-basis 100% puts each button on its own row deliberately. */
.hero-ctas{gap:10px}
.hero-ctas .btn{flex:1 1 100%;min-height:52px;font-size:16px}
.hero-trust{margin-top:18px;gap:8px 16px;font-size:12.5px}
.hero-trust .icon{width:15px;height:15px}
}
/* Short phones (iPhone SE, 667px tall) need a little more trimming */
@media(max-width:640px) and (max-height:700px){
.hero-grid{padding:22px 20px 26px}
.hero h1{font-size:clamp(25px,6.8vw,30px)}
.hero p{font-size:14.5px;margin-bottom:16px}
.hero-ctas .btn{min-height:48px}
}
/* ── 7. B2B SECTION (your third screenshot) ─────────────────────────── */
@media(max-width:560px){
.b2b .left{padding:30px 20px}
.b2b h2{margin:12px 0 12px}
.b2b p{font-size:15px}
.b2b ul{margin:20px 0 24px;gap:11px}
.b2b ul li{font-size:14px}
.b2b .hero-ctas .btn{flex:1 1 100%;min-height:52px;font-size:16px}
.b2b .right{min-height:0;padding:26px 20px}
}
/* ── 8. SECTION RHYTHM ───────────────────────────────────────────────
96px desktop → 56px at 640px was still a lot on a phone, which is why
the page felt endless. 44px reads tighter without feeling cramped. */
@media(max-width:640px){
section{padding:44px 0}
.wrap{padding:0 16px}
.sec-head{margin-bottom:24px}
.sec-title{font-size:clamp(22px,5.8vw,28px)}
.sec-sub{font-size:15px}
}
/* ── 9. DRAWER — LOCK THE PAGE BEHIND IT ─────────────────────────────
setDrawer() only toggles body.drawer-open, and nothing in the CSS ever
locked the body. So with the menu open the page scrolled underneath.
That is a big part of "scroll feels broken". */
body.drawer-open{overflow:hidden}
.drawer{
overflow-y:auto;
overscroll-behavior:contain; /* drawer scroll never leaks to the page */
-webkit-overflow-scrolling:touch;
padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px));
}
.drawer nav a{min-height:50px} /* was 14px padding = ~48px, now guaranteed */
/* ── 10. SUPPORT FAB — iOS SAFE AREA ─────────────────────────────────
bottom:22px sits under the iPhone home bar. env() lifts it clear. */
.fabwrap{
right:16px;
bottom:calc(16px + env(safe-area-inset-bottom,0px));
}
@media(max-width:640px){
.fab{width:52px;height:52px}
.fab .icon{width:22px;height:22px}
.footer{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
/* ── 11. SMALL PHONES (320–360px) ───────────────────────────────────── */
@media(max-width:360px){
.header .wrap{gap:6px}
.utils{gap:0}
.iconbtn{width:38px;height:38px}
.hero-grid{padding:24px 16px 28px}
.b2b .left{padding:26px 16px}
}
@media(display-mode:standalone){
.announce{padding-top:env(safe-area-inset-top,0px)}
}
/* ════════════════════════════════════════════════════════════════════
MOBILE POLISH v3.3
Med Prax Pharma — append at the VERY END of assets/css/style.css
(goes AFTER the v3.2 block you already pasted)
Date: 2026-07-28
CHANGELOG
3.3.0 Header icons pushed flush right (.utils had no auto margin, so
on mobile they sat mid-row with ~68px dead space on the right).
Marquee restored on mobile (v3.2 hid it — wrong call).
Category card arrow no longer overlaps the card text.
Account icon restored with a proper dropdown menu.
════════════════════════════════════════════════════════════════════ */
/* ── 1. HEADER ICON ALIGNMENT (the real bug) ─────────────────────────
On desktop, #searchDesk has flex:1 and that is what pushes .utils to
the right edge. Below 860px the search is hidden, and .utils has NO
margin-left:auto of its own — so the icon cluster just sits next to
the logo with a big empty gap on the right. That is what you saw.
The empty