/* =====================================================================
qaleb4 — "Vivid Market": a bright, fast, product-first storefront.
All colours come from the admin palette (partials/site_head → --site-*).
===================================================================== */
:root{
--q4-p:var(--site-primary,#ff3d57);--q4-pd:var(--site-primary-dark,#e0263f);--q4-prgb:var(--site-primary-rgb,255,61,87);
--q4-a:var(--site-accent,#ffb800);--q4-argb:var(--site-accent-rgb,255,184,0);
--q4-ink:var(--site-footer,#12142b);
--q4-bg:#f3f4f8;--q4-card:#fff;--q4-line:#e8eaf2;--q4-text:#171a2f;--q4-mute:#6b7089;
--q4-r:16px;--q4-r2:24px;--q4-sh:0 1px 2px rgba(18,20,43,.04),0 14px 30px -18px rgba(18,20,43,.22);
--q4-disp:black_iransans,bold_iransans,tahoma,sans-serif;--q4-dw:400;
}
html[dir=ltr]{--q4-disp:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--q4-dw:800}
body.q4{margin:0;background:var(--q4-bg);color:var(--q4-text);font-size:14px;line-height:1.8}
html[dir=rtl] body.q4{font-family:regular_iransans,tahoma,sans-serif}
html[dir=ltr] body.q4{font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.q4 *,.q4 *:before,.q4 *:after{box-sizing:border-box}
.q4 a{color:inherit;text-decoration:none}
.q4 img{max-width:100%}
.q4 :focus-visible{outline:3px solid rgba(var(--q4-prgb),.55);outline-offset:2px;border-radius:8px}
.q4-w{max-width:1280px;margin:0 auto;padding:0 20px}
.q4-ic{display:inline-flex;vertical-align:middle}
/* ------------------------------ header ------------------------------ */
.q4-top{background:#fff;border-bottom:1px solid var(--q4-line);font-size:12px;color:var(--q4-mute)}
.q4-top .q4-w{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:14px}
.q4-top a{margin-inline-end:20px}.q4-top a:hover{color:var(--q4-p)}
.q4-top .site-lang-link{margin:0;font-weight:700;color:var(--q4-text)}
.q4-hd{background:#fff;position:sticky;top:0;z-index:900;transition:box-shadow .2s}
.q4-hd.stuck{box-shadow:0 10px 24px -16px rgba(18,20,43,.35)}
.q4-hd-in{display:flex;align-items:center;gap:22px;min-height:80px}
.q4-logo{display:flex;align-items:center;flex:0 0 auto}
.q4-logo img{display:block;max-height:52px;width:auto}
.q4-logo b{font:var(--q4-dw) 25px/1 var(--q4-disp);color:var(--q4-p);letter-spacing:-.01em}
.q4-search{flex:1;max-width:700px;position:relative}
body.q4 .q4-search input[type=text]{width:100%;height:52px;border:1.5px solid transparent;background:var(--q4-bg);border-radius:16px;padding:0 20px;padding-inline:50px 20px;font:inherit;font-size:14px;color:var(--q4-text);outline:none;transition:.2s}
body.q4 .q4-search input[type=text]:focus{background:#fff;border-color:var(--q4-p);box-shadow:0 0 0 4px rgba(var(--q4-prgb),.12)}
.q4-search .ic{position:absolute;inset-inline-start:17px;top:50%;margin-top:-10px;color:var(--q4-mute);pointer-events:none}
.q4-search button{position:absolute;inset-block:6px;inset-inline-end:6px;border:0;border-radius:11px;background:var(--q4-p);color:#fff;padding:0 18px;font:inherit;font-weight:800;cursor:pointer}
.q4-search button:hover{background:var(--q4-pd)}
.q4-acts{display:flex;gap:10px;margin-inline-start:auto;align-items:center}
.q4-ib{height:50px;border-radius:15px;border:1.5px solid var(--q4-line);padding:0 16px;display:inline-flex;align-items:center;gap:9px;font-weight:800;background:#fff;position:relative;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--q4-text)}
.q4-ib:hover{border-color:var(--q4-p);color:var(--q4-p)}
.q4-ib.cart{background:var(--q4-ink);border-color:var(--q4-ink);color:#fff}
.q4-ib.cart:hover{background:var(--q4-p);border-color:var(--q4-p);color:#fff}
.q4-badge{min-width:24px;height:24px;border-radius:99px;background:var(--q4-p);color:#fff;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;line-height:1}
.q4-ib.cart .q4-badge{background:var(--q4-a);color:#171a2f}
body.q4 #header_cart{display:block;margin:0}
body.q4 #header_cart>a>div{display:flex;align-items:center}
.q4-menu-btn{display:none}
.q4-nav{border-top:1px solid var(--q4-line);background:#fff}
.q4-nav .q4-w{display:flex;align-items:center;gap:4px;min-height:54px}
.q4-mega{position:relative;margin-inline-end:10px}
.q4-mega-btn{height:42px;border:0;border-radius:12px;background:var(--q4-p);color:#fff;padding:0 18px;font:inherit;font-weight:800;display:inline-flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 12px 22px -14px rgba(var(--q4-prgb),.9)}
.q4-mega-panel{display:none;position:absolute;top:100%;inset-inline-start:0;margin-top:0;width:min(940px,92vw);height:430px;background:#fff;border-radius:0 0 22px 22px;box-shadow:0 30px 60px -24px rgba(18,20,43,.45);border:1px solid var(--q4-line);border-top:0;z-index:50}
.q4-mega:hover .q4-mega-panel,.q4-mega:focus-within .q4-mega-panel{display:block}
.q4-mega-l{list-style:none;margin:0;padding:12px;width:270px;height:100%;overflow-y:auto;border-inline-end:1px solid var(--q4-line);background:var(--q4-bg);border-radius:0 0 0 22px}
html[dir=rtl] .q4-mega-l{border-radius:0 0 22px 0}
.q4-mega-l>li>a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:700;font-size:13.5px}
.q4-mega-l>li>a img{width:26px;height:26px;object-fit:contain}
.q4-mega-l>li:hover>a{background:#fff;color:var(--q4-p);box-shadow:var(--q4-sh)}
.q4-mega-sub{display:none;position:absolute;inset-block:0;inset-inline-start:270px;inset-inline-end:0;padding:22px 28px;overflow:auto;columns:2;column-gap:30px;background:#fff;border-radius:0 0 22px 0}
html[dir=rtl] .q4-mega-sub{border-radius:0 0 0 22px}
.q4-mega-l>li:hover>.q4-mega-sub,.q4-mega-l:not(:hover)>li:first-child>.q4-mega-sub{display:block}
.q4-mega-sub h5{margin:0 0 10px;font:var(--q4-dw) 15px/1.5 var(--q4-disp);break-after:avoid}
.q4-mega-sub a{display:block;padding:4px 0;font-size:13px;color:var(--q4-mute)}.q4-mega-sub a:hover{color:var(--q4-p)}
.q4-mega-sub .grp{break-inside:avoid;margin-bottom:16px}
.q4-nl{padding:0 14px;height:42px;display:inline-flex;align-items:center;border-radius:11px;font-weight:700;font-size:13.5px}
.q4-nl:hover{background:var(--q4-bg);color:var(--q4-p)}
.q4-nl-end{margin-inline-start:auto;color:var(--q4-mute);font-size:12.5px;display:inline-flex;gap:8px;align-items:center}
/* ------------------------------ drawer / tab bar (mobile) ------------------------------ */
.q4-drawer{position:fixed;inset:0;z-index:2000;display:none}
.q4-drawer.open{display:block}
.q4-drawer .bg{position:absolute;inset:0;background:rgba(18,20,43,.6);backdrop-filter:blur(3px)}
.q4-drawer .pn{position:absolute;inset-block:0;inset-inline-start:0;width:min(340px,88vw);background:#fff;overflow-y:auto;padding:18px 16px 30px;box-shadow:0 0 50px rgba(0,0,0,.4)}
.q4-drawer h4{margin:0 0 12px;font:var(--q4-dw) 18px/1.4 var(--q4-disp)}
.q4-drawer details{border-bottom:1px solid var(--q4-line)}
.q4-drawer summary{list-style:none;padding:13px 4px;font-weight:800;display:flex;justify-content:space-between;cursor:pointer}
.q4-drawer summary::-webkit-details-marker{display:none}
.q4-drawer details a{display:block;padding:8px 14px;color:var(--q4-mute);font-size:13px}
.q4-drawer .top{display:block;padding:13px 4px;border-bottom:1px solid var(--q4-line);font-weight:800}
.q4-tabbar{display:none}
/* ------------------------------ hero ------------------------------ */
.q4-hero{display:grid;grid-template-columns:1fr 340px;gap:16px;margin:20px 0 0}
.q4-slider{position:relative;border-radius:var(--q4-r2);overflow:hidden;min-height:410px;background:linear-gradient(135deg,var(--q4-p),var(--q4-pd));isolation:isolate}
.q4-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s;display:block}
.q4-slide.on{opacity:1;z-index:1}
.q4-slide img{width:100%;height:100%;object-fit:cover;display:block}
.q4-slide .cap{position:absolute;inset-inline:0;bottom:0;padding:80px 32px 34px;background:linear-gradient(transparent,rgba(10,12,30,.72));color:#fff;font:var(--q4-dw) 24px/1.5 var(--q4-disp)}
.q4-sl-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--q4-text);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.q4-sl-nav.prev{inset-inline-start:16px}.q4-sl-nav.next{inset-inline-end:16px}
.q4-dots{position:absolute;bottom:16px;inset-inline:0;z-index:3;display:flex;gap:7px;justify-content:center}
.q4-dots i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.6);cursor:pointer;transition:.3s}.q4-dots i.on{width:30px;background:#fff}
.q4-intro{position:absolute;inset:0;z-index:2;padding:50px 52px;display:flex;flex-direction:column;justify-content:center;gap:18px;color:#fff;max-width:620px}
.q4-intro .kick{align-self:flex-start;background:rgba(255,255,255,.18);border-radius:99px;padding:4px 16px;font-size:12.5px;font-weight:800}
.q4-intro h1{margin:0;font:var(--q4-dw) clamp(38px,5.2vw,66px)/1.2 var(--q4-disp);letter-spacing:-.015em}
.q4-intro p{margin:0;font-size:16px;line-height:2;opacity:.92;max-width:34ch}
.q4 .q4-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:16px;background:#fff;color:var(--q4-ink);font-weight:800;font-size:15px;box-shadow:0 18px 30px -16px rgba(0,0,0,.5);transition:.2s}
.q4 .q4-cta:hover{background:var(--q4-a);transform:translateY(-2px)}
.q4-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.q4-deco i{position:absolute;border-radius:34px;background:rgba(255,255,255,.12);transform:rotate(14deg)}
.q4-deco i:nth-child(1){width:300px;height:300px;inset-inline-end:-70px;top:-60px}
.q4-deco i:nth-child(2){width:210px;height:210px;inset-inline-end:90px;bottom:-70px;background:rgba(255,255,255,.09);transform:rotate(-10deg)}
.q4-deco i:nth-child(3){width:96px;height:96px;inset-inline-end:44px;top:42%;background:rgba(var(--q4-argb),.9);border-radius:28px;transform:rotate(20deg)}
.q4-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.q4-side a{display:block;border-radius:var(--q4-r2);overflow:hidden;background:#e4e7f1;min-height:190px;position:relative}
.q4-side a img{width:100%;height:100%;object-fit:cover;display:block}
.q4-side .ph{display:flex;flex-direction:column;justify-content:flex-end;padding:22px;gap:4px}
.q4-side .ph.a{background:var(--q4-ink);color:#fff}.q4-side .ph.b{background:var(--q4-a);color:#171a2f}
.q4-side .ph b{font:var(--q4-dw) 20px/1.4 var(--q4-disp)}.q4-side .ph span{font-size:13px;opacity:.85}
.q4-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0 0}
.q4-svc>div{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);padding:14px 18px;display:flex;align-items:center;gap:14px}
.q4-svc i{width:46px;height:46px;border-radius:14px;background:rgba(var(--q4-prgb),.1);color:var(--q4-p);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.q4-svc b{display:block;font-size:14px;line-height:1.5}.q4-svc small{color:var(--q4-mute);font-size:12px}
/* ------------------------------ sections / rails ------------------------------ */
.q4-sec{margin:38px 0}
.q4-sh{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.q4-sh h2{margin:0;font:var(--q4-dw) 22px/1.5 var(--q4-disp);position:relative;padding-inline-start:16px}
.q4-sh h2:before{content:"";position:absolute;inset-inline-start:0;top:50%;margin-top:-12px;width:6px;height:24px;border-radius:6px;background:var(--q4-p)}
.q4-sh .more{color:var(--q4-p);font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.q4-tools{display:flex;gap:10px;align-items:center}
.q4-arrows{display:flex;gap:8px}
.q4-arrows button{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--q4-line);background:#fff;color:var(--q4-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.q4-arrows button:hover{background:var(--q4-p);border-color:var(--q4-p);color:#fff}
.q4-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*14px)/5);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px;scroll-behavior:smooth}
.q4-rail::-webkit-scrollbar{display:none}
.q4-rail>*{scroll-snap-align:start;min-width:0}
.q4-cats{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;justify-content:start}
.q4-cats::-webkit-scrollbar{display:none}
.q4-cat{text-align:center;display:block}
.q4-cat .ring{width:92px;height:92px;margin:0 auto 10px;border-radius:50%;background:#fff;border:2px solid var(--q4-line);display:flex;align-items:center;justify-content:center;transition:.25s;overflow:hidden}
.q4-cat img{width:56px;height:56px;object-fit:contain}
.q4-cat:hover .ring{border-color:var(--q4-p);box-shadow:0 14px 24px -14px rgba(var(--q4-prgb),.8);transform:translateY(-3px)}
.q4-cat b{font-size:13px;font-weight:700;line-height:1.6;display:block}
/* amazing-offer band */
.q4-hot{background:linear-gradient(115deg,var(--q4-p) 0%,var(--q4-pd) 100%);border-radius:var(--q4-r2);padding:24px 22px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.q4-hot:before{content:"";position:absolute;z-index:-1;width:360px;height:360px;border-radius:70px;background:rgba(255,255,255,.09);transform:rotate(18deg);inset-inline-start:-110px;bottom:-190px}
.q4-hot-t{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.q4-hot-t .bolt{width:60px;height:60px;border-radius:20px;background:var(--q4-a);color:#171a2f;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 26px -12px rgba(0,0,0,.5)}
.q4-hot-t h2{margin:0;font:var(--q4-dw) 26px/1.35 var(--q4-disp)}
.q4-hot-t p{margin:0;font-size:13px;opacity:.9;line-height:1.9}
.q4-hot-t .q4-more2{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--q4-pd);border-radius:12px;padding:8px 18px;font-weight:800;font-size:13px}
.q4-hot .q4-rail{grid-auto-columns:calc((100% - 3*14px)/4)}
.q4-banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.q4-banners a{border-radius:var(--q4-r2);overflow:hidden;display:block;background:#e4e7f1}.q4-banners img{width:100%;display:block;transition:transform .5s}
.q4-banners a:hover img{transform:scale(1.03)}
.q4-brands{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r2);padding:22px}
.q4-brands-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.q4-brand{height:84px;border-radius:14px;border:1px solid var(--q4-line);display:flex;align-items:center;justify-content:center;padding:14px;transition:.2s}
.q4-brand img{max-height:48px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.65;transition:.25s}
.q4-brand:hover{border-color:var(--q4-p);box-shadow:var(--q4-sh)}.q4-brand:hover img{filter:none;opacity:1}
.q4-blogs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.q4-blog{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r2);overflow:hidden;display:block;transition:.25s}
.q4-blog:hover{box-shadow:var(--q4-sh);transform:translateY(-3px)}
.q4-blog img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.q4-blog div{padding:16px 18px 18px}.q4-blog b{display:block;line-height:1.9;font-size:15px}.q4-blog small{color:var(--q4-mute)}
.q4-empty{background:#fff;border:2px dashed var(--q4-line);border-radius:var(--q4-r2);padding:50px;text-align:center;color:var(--q4-mute)}
/* ------------------------------ product card ------------------------------ */
.q4-card{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);padding:12px;display:flex;flex-direction:column;position:relative;height:100%;transition:box-shadow .25s,transform .25s,border-color .25s}
.q4-card:hover{box-shadow:var(--q4-sh);transform:translateY(-3px);border-color:transparent}
.q4-pic{display:block;aspect-ratio:1/1;border-radius:12px;background:#f6f7fb;overflow:hidden;position:relative}
.q4-pic img{width:100%;height:100%;object-fit:contain;padding:10px;display:block;transition:transform .5s}
.q4-card:hover .q4-pic img{transform:scale(1.06)}
.q4-off{position:absolute;top:10px;inset-inline-start:10px;z-index:2;background:var(--q4-p);color:#fff;border-radius:10px;font-size:12.5px;font-weight:800;padding:2px 10px;line-height:1.7}
.q4-tools2{position:absolute;top:10px;inset-inline-end:10px;z-index:2;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(6px);transition:.2s}
html[dir=rtl] .q4-tools2{transform:translateX(-6px)}
.q4-card:hover .q4-tools2,.q4-card:focus-within .q4-tools2{opacity:1;transform:none}
.q4-tools2 button{width:34px;height:34px;border-radius:11px;border:0;background:#fff;color:var(--q4-text);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -8px rgba(0,0,0,.35)}
.q4-tools2 button:hover{background:var(--q4-p);color:#fff}
.q4-sold{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--q4-mute)}
.q4-card .bd{padding:12px 4px 0;display:flex;flex-direction:column;gap:8px;flex:1}
.q4-name{font-size:13.5px;line-height:1.9;font-weight:700;min-height:52px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.q4-name:hover{color:var(--q4-p)}
.q4-pr{margin-top:auto;display:flex;flex-direction:column;gap:2px;min-height:52px;justify-content:flex-end}
.q4-pr .o{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--q4-mute)}
.q4-pr .o s{color:var(--q4-mute)}
.q4-pr .n{display:flex;align-items:baseline;justify-content:flex-end;gap:6px}
.q4-pr .n b{font:var(--q4-dw) 20px/1.3 var(--q4-disp)}.q4-pr .n em{font-style:normal;font-size:12px;color:var(--q4-mute)}
.q4-buy{margin-top:10px;height:44px;border:0;border-radius:12px;background:var(--q4-bg);color:var(--q4-text);font:inherit;font-weight:800;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s}
.q4-buy:hover{background:var(--q4-p);color:#fff}
.q4-buy[disabled]{opacity:.5;pointer-events:none}
.q4-hot .q4-card{border-color:transparent;color:var(--q4-text)}
/* ------------------------------ footer ------------------------------ */
.q4-foot{background:var(--q4-ink);color:rgba(255,255,255,.78);margin-top:60px;position:relative}
.q4-foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.q4-foot-top .t{font:var(--q4-dw) 22px/1.5 var(--q4-disp);color:#fff}
.q4-foot-top .up{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;border:1.5px solid rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:13px;cursor:pointer;background:transparent;font-family:inherit}
.q4-foot-top .up:hover{background:#fff;color:var(--q4-ink)}
.q4-foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding:44px 0 32px}
.q4-foot h4{color:#fff;margin:0 0 16px;font:var(--q4-dw) 16px/1.4 var(--q4-disp)}
.q4-foot a{display:block;padding:5px 0;color:rgba(255,255,255,.74);font-size:13.5px}.q4-foot a:hover{color:var(--q4-a)}
.q4-foot p{margin:0 0 10px;line-height:2;font-size:13.5px}
.q4-foot .site-namad{justify-content:flex-start;margin-top:14px}
.q4-copy{border-top:1px solid rgba(255,255,255,.1);padding:18px 0 22px;font-size:12.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.q4-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:48px 0 0}
.q4-strip>div{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);padding:16px 18px;display:flex;align-items:center;gap:14px}
.q4-strip i{width:48px;height:48px;border-radius:15px;background:rgba(var(--q4-prgb),.1);color:var(--q4-p);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.q4-strip b{display:block;font-size:14px;line-height:1.5}.q4-strip small{color:var(--q4-mute);font-size:12px}
/* ------------------------------ responsive ------------------------------ */
@media(max-width:1180px){.q4-rail{grid-auto-columns:calc((100% - 3*14px)/4)}.q4-hero{grid-template-columns:1fr 280px}.q4-hot{grid-template-columns:1fr}.q4-hot-t{flex-direction:row;align-items:center;flex-wrap:wrap}}
@media(max-width:920px){
.q4-rail,.q4-hot .q4-rail{grid-auto-columns:calc((100% - 2*14px)/3)}
.q4-hero{grid-template-columns:1fr}.q4-side{grid-template-columns:1fr 1fr;grid-template-rows:none}
.q4-svc{grid-template-columns:1fr 1fr}.q4-foot-in{grid-template-columns:1fr 1fr}
.q4-nav{display:none}.q4-menu-btn{display:inline-flex}
.q4-hd-in{flex-wrap:wrap;min-height:0;padding-block:12px;gap:12px}
.q4-search{order:3;flex:1 1 100%;max-width:none}
.q4-ib span.t{display:none}.q4-ib{padding:0 14px}
.q4-top .q4-w>div:first-child a:not(:first-child){display:none}
}
@media(max-width:600px){
.q4-w{padding:0 14px}.q4-top{display:none}
.q4-slider{min-height:300px}.q4-intro{padding:30px 26px}.q4-intro h1{font-size:36px}
.q4-rail,.q4-hot .q4-rail{grid-auto-columns:calc((100% - 14px)/2.15)}
.q4-side{grid-template-columns:1fr}.q4-side a{min-height:150px}
.q4-svc{grid-template-columns:1fr}.q4-sec{margin:28px 0}.q4-hot{padding:18px 14px}
.q4-foot-in{grid-template-columns:1fr;padding-top:34px}.q4-arrows{display:none}
.q4-tools2{opacity:1;transform:none}
body.q4{padding-bottom:78px}
.q4-tabbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:950;background:#fff;border-top:1px solid var(--q4-line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;box-shadow:0 -10px 30px -18px rgba(18,20,43,.4)}
.q4-tabbar a,.q4-tabbar button{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--q4-mute);font:inherit;font-size:10.5px;font-weight:700;padding:5px 12px;border:0;background:transparent;border-radius:12px;position:relative;cursor:pointer}
.q4-tabbar a.on,.q4-tabbar a:hover,.q4-tabbar button:hover{color:var(--q4-p)}
.q4-tabbar .q4-badge{position:absolute;top:0;inset-inline-end:6px;min-width:18px;height:18px;font-size:10px;padding:0 5px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* ---------- legacy cart button (older sheet styles #header_cart) ---------- */
body.q4 #header_cart{display:block;margin:0}
body.q4 #header_cart>a{height:50px;background:var(--q4-ink);color:#fff;border-radius:15px;overflow:visible;padding:0 16px;display:inline-flex;align-items:center;gap:9px;font-size:13.5px}
body.q4 #header_cart>a:hover{background:var(--q4-p)}
body.q4 #header_cart>a>div:nth-child(1){display:flex!important;width:auto;background:none;padding:0;text-align:start}
body.q4 #header_cart>a>div:nth-child(2){padding:0!important}
body.q4 #header_cart>a>div:nth-child(2) span{margin:0;width:auto;min-width:24px;height:24px;line-height:24px;border-radius:99px;background:var(--q4-a);color:#171a2f;padding:0 7px;display:inline-block;font-weight:800;font-size:11.5px}
/* =====================================================================
Inner pages (category, product, cart, forms, panel ...) — the shared
page markup is restyled here so every page matches the new design.
===================================================================== */
body.q4 .section{max-width:1280px;padding:0 20px;margin:0 auto}
body.q4 input[type=text],body.q4 input[type=password],body.q4 input[type=email],body.q4 input[type=tel],body.q4 input[type=number],body.q4 input[type=search],body.q4 select,body.q4 textarea{border:1.5px solid #dfe3ee;border-radius:12px;background:#fff;font-family:inherit;font-size:14px;color:var(--q4-text);outline:none;transition:border-color .15s,box-shadow .15s;max-width:100%}
body.q4 input[type=text],body.q4 input[type=password],body.q4 input[type=email],body.q4 input[type=tel],body.q4 input[type=number],body.q4 select{height:48px;padding:0 14px}
body.q4 textarea{padding:12px 14px;min-height:120px}
body.q4 input:focus,body.q4 select:focus,body.q4 textarea:focus{border-color:var(--q4-p);box-shadow:0 0 0 4px rgba(var(--q4-prgb),.12)}
body.q4 .page_window{margin:22px 0 34px;border:1px solid var(--q4-line);border-radius:var(--q4-r2);padding:36px;background:#fff;box-shadow:var(--q4-sh)}
body.q4 .page_title{margin-bottom:34px;font-size:11pt;color:var(--q4-mute)}
body.q4 .page_title>span{font:var(--q4-dw) 22pt/1.5 var(--q4-disp);color:var(--q4-text)}
body.q4 .page_image>img{border-radius:var(--q4-r)}
body.q4 .table_holder>table{border:1px solid var(--q4-line);border-radius:var(--q4-r);border-collapse:separate;border-spacing:0;overflow:hidden;font-size:13px}
body.q4 .table_holder>table th{background:var(--q4-bg);border-color:var(--q4-line);padding:13px 12px;font-weight:800}
body.q4 .table_holder>table td{border-color:var(--q4-line);padding:11px 12px}
body.q4 .table_holder>table tr:hover td{background:#fafbfe}
/* listing */
body.q4 #cat_cols{margin:22px 0;border-spacing:0}
body.q4 #cat_cols>div:nth-child(1){width:290px;padding-left:18px;padding-right:0;position:relative}
html[dir=ltr] body.q4 #cat_cols>div:nth-child(1){padding-right:18px;padding-left:0}
body.q4 .cat_window{padding:20px;background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);margin-bottom:14px}
body.q4 .cat_window>div:nth-child(1){font:var(--q4-dw) 14pt/1.5 var(--q4-disp);margin-bottom:16px}
body.q4 .main_cat_link{display:block;font-weight:800;padding:6px 0 10px;color:var(--q4-p)}
body.q4 .sub_cat_link,body.q4 .filter_row{display:block;margin-top:8px;background:var(--q4-bg);color:var(--q4-text);border-radius:10px;padding:9px 12px;transition:.15s;font-size:13px}
body.q4 .sub_cat_link:hover,body.q4 .filter_row:hover{background:rgba(var(--q4-prgb),.1);color:var(--q4-p)}
body.q4 #category_detail{padding:20px;background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);margin:0 7px 14px}
body.q4 .list_title{margin:0 0 10px}
body.q4 .list_title>div:nth-child(1){font:var(--q4-dw) 16pt/1.5 var(--q4-disp);padding:0 7px}
body.q4 .list_title>div:nth-child(2)>*{padding:6px 16px;border-radius:99px;background:#fff;color:var(--q4-mute);border:1.5px solid var(--q4-line);cursor:pointer;font-size:13px;font-weight:700}
body.q4 .list_title>div:nth-child(2)>*.selected{background:var(--q4-ink);border-color:var(--q4-ink);color:#fff}
body.q4 .category_product_item{box-sizing:border-box}
body.q4 .product_item{margin:7px;padding:12px;background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);transition:box-shadow .25s,transform .25s,border-color .25s}
body.q4 .product_item:hover{box-shadow:var(--q4-sh);transform:translateY(-3px);border-color:transparent}
body.q4 .bs_image{height:auto!important;aspect-ratio:1/1;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#f6f7fb;border-radius:12px;margin-bottom:12px}
body.q4 .bs_name{font:700 13.5px/1.9 inherit;font-family:bold_iransans,tahoma;color:var(--q4-text);height:52px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[dir=ltr] body.q4 .bs_name{font-family:inherit;font-weight:700}
body.q4 .bs_name:hover{color:var(--q4-p)}
body.q4 .bs_price{color:var(--q4-text);font-size:13px;font-weight:800;margin:4px 0 6px}
body.q4 .bs_price strike{color:var(--q4-mute);font-weight:400}
body.q4 .bs_soon,body.q4 .bs_offer,body.q4 .bs_unavailable{width:60px;height:60px;inset-inline-start:0;left:auto;top:6px}
html[dir=rtl] body.q4 .bs_soon,html[dir=rtl] body.q4 .bs_offer,html[dir=rtl] body.q4 .bs_unavailable{left:6px}
html[dir=ltr] body.q4 .bs_soon,html[dir=ltr] body.q4 .bs_offer,html[dir=ltr] body.q4 .bs_unavailable{right:6px;left:auto}
body.q4 .bs_footer{margin-top:8px}
body.q4 .bs_ico{width:36px;height:36px;border-radius:11px;background-color:var(--q4-bg);background-size:55%;background-repeat:no-repeat;background-position:center;transition:.15s}
body.q4 .bs_ico:hover{background-color:rgba(var(--q4-prgb),.14)}
body.q4 .bs_ico1{background-image:url("data:image/svg+xml;utf8,")}
body.q4 .bs_ico2{background-image:url("data:image/svg+xml;utf8,")}
body.q4 .page_holder{padding-top:26px}
body.q4 .page_i{width:40px;height:40px;line-height:38px;border-radius:12px;background:#fff;border:1.5px solid var(--q4-line);font-weight:700;cursor:pointer;transition:.15s}
body.q4 .page_i:hover{border-color:var(--q4-p);color:var(--q4-p)}
body.q4 .selected_page,body.q4 .page_i.selected_page{background:var(--q4-p);border-color:var(--q4-p);color:#fff}
body.q4 .image_box{border-radius:var(--q4-r);border:1px solid var(--q4-line)}
/* product page */
body.q4 #product_link{padding:18px 0 8px;font-size:12.5px;color:var(--q4-mute)}
body.q4 #product_link a:hover{color:var(--q4-p)}
body.q4 #product_window{margin:8px 0 18px;border:1px solid var(--q4-line);border-radius:var(--q4-r2);background:#fff;box-shadow:var(--q4-sh);overflow:hidden}
body.q4 #product_window>div{padding:30px 0}
body.q4 #product_window>div:nth-child(1){width:400px;padding-inline:28px}
body.q4 #product_window>div:nth-child(2){padding-inline:30px;line-height:2}
body.q4 #main_product_image_holder{border-radius:var(--q4-r);background:#f6f7fb;overflow:hidden;text-align:center}
body.q4 #main_product_image{max-width:100%;border-radius:var(--q4-r)}
body.q4 #main_product_sliders>div>div{border-radius:12px;border:1.5px solid var(--q4-line);background-color:#f6f7fb;background-size:cover}
body.q4 #main_pro_title{font:var(--q4-dw) 19pt/1.7 var(--q4-disp);margin-bottom:6px}
body.q4 .product_form>select{height:48px;border-radius:12px}
body.q4 .product_price{max-width:none;background:var(--q4-bg);border-radius:14px;padding:16px 20px;margin-top:22px;font-size:12pt;color:var(--q4-text)}
body.q4 #pro_end_price{font:var(--q4-dw) 24pt/1.3 var(--q4-disp);margin-inline:6px}
body.q4 .product_button{max-width:none;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--q4-p);color:#fff;border-radius:14px;padding:15px 20px;margin-top:16px;font-weight:800;font-size:13pt;cursor:pointer;box-shadow:0 18px 30px -16px rgba(var(--q4-prgb),.85);transition:.2s;text-align:center}
body.q4 .product_button:hover{background:var(--q4-pd);transform:translateY(-2px)}
body.q4 .product_not_exist{max-width:none;border-radius:14px;background:var(--q4-bg);color:var(--q4-mute);padding:14px 20px;margin-top:22px}
body.q4 #product_action>div{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0 14px;padding:8px 14px;border-radius:12px;background:var(--q4-bg);cursor:pointer;font-size:13px;font-weight:700}
body.q4 #product_action>div:hover{background:rgba(var(--q4-prgb),.1);color:var(--q4-p)}
body.q4 #pro_tab{margin:14px 0 30px;background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r2);overflow:hidden}
body.q4 #pro_tab>div:nth-child(1){padding:16px 18px 0;background:var(--q4-bg)}
body.q4 #pro_tab>div:nth-child(1)>div{display:inline-block;padding:11px 20px;border-radius:12px 12px 0 0;cursor:pointer;font-weight:800;color:var(--q4-mute)}
body.q4 #pro_tab>div:nth-child(1)>div.selected{background:#fff;color:var(--q4-p)}
body.q4 .pro_detail{border-bottom:1px solid var(--q4-line)}
body.q4 .pro_comment{border:1px solid var(--q4-line);border-radius:var(--q4-r);padding:14px;margin-bottom:12px}
/* cart & checkout */
body.q4 .cart_n,body.q4 input.cart_n{width:80px;text-align:center}
body.q4 #cart_button{margin-top:22px;text-align:end}
body.q4 #cart_button span{display:inline-block;background:var(--q4-p);color:#fff;border-radius:14px;padding:14px 38px;font-weight:800;font-size:13pt;cursor:pointer;box-shadow:0 18px 30px -16px rgba(var(--q4-prgb),.85);transition:.2s}
body.q4 #cart_button span:hover{background:var(--q4-pd);transform:translateY(-2px)}
/* account panel */
body.q4 #panel_window{margin:22px 0}
body.q4 #panel_window>div:nth-child(1){width:290px}
body.q4 #panel_window>div:nth-child(1)>div{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r);padding:18px;margin-bottom:14px}
body.q4 #panel_window>div:nth-child(1)>div>a{display:block;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--q4-bg);font-weight:700;font-size:13px}
body.q4 #panel_window>div:nth-child(1)>div>a:hover,body.q4 #panel_window a.selected_menu{background:var(--q4-p);color:#fff}
body.q4 #panel_window>div:nth-child(2)>div{background:#fff;border:1px solid var(--q4-line);border-radius:var(--q4-r2);padding:26px}
@media(max-width:920px){body.q4 #cat_cols>div:nth-child(1){width:auto;padding:0}body.q4 #product_window>div:nth-child(1){width:auto}body.q4 .page_window{padding:20px}}
@media(max-width:600px){body.q4 .category_product_item{width:50%}body.q4 .product_item{margin:4px;padding:8px}body.q4 .bs_name{font-size:12.5px}}
/* account / order forms */
body.q4 #account_window{border:1px solid var(--q4-line);border-radius:var(--q4-r2);background:#fff;box-shadow:var(--q4-sh);overflow:hidden}
body.q4 #account_title{font:var(--q4-dw) 20pt/1.6 var(--q4-disp);color:var(--q4-text)}
body.q4 #account_foot{background:var(--q4-bg);border-top:1px solid var(--q4-line)}
body.q4 #account_foot a{color:var(--q4-p);font-weight:800}
body.q4 #account_button{display:block;border:0;border-radius:14px;background:var(--q4-p);color:#fff;font-weight:800;box-shadow:0 18px 30px -16px rgba(var(--q4-prgb),.85);transition:.2s;cursor:pointer}
body.q4 #account_button:hover{background:var(--q4-pd);transform:translateY(-2px)}
body.q4 .form_input>div label{font-weight:800;color:var(--q4-text)}
body.q4 .form_input>div input,body.q4 .form_input>div textarea,body.q4 .form_input>div select{border:1.5px solid #dfe3ee;border-radius:12px;padding:5px 14px}
body.q4 .form_input>div textarea{height:140px;padding:12px 14px}
body.q4 .form_button>span{display:inline-block;padding:13px 34px;border-radius:14px;background:var(--q4-p);color:#fff;font-weight:800;font-size:12pt;box-shadow:0 16px 28px -16px rgba(var(--q4-prgb),.85);transition:.2s}
body.q4 .form_button>span:hover{background:var(--q4-pd);transform:translateY(-2px)}