/* =====================================================================
Zeina "Souq" homepage redesign — logo-derived palette, RTL Arabic.
Scoped under .zsouq (content) + .zs-* components (header/footer global).
===================================================================== */
:root{
--zi-ink:#241b4d; --zi-ink2:#1c1540; --zi-indigo:#3b2a8f;
--zi-purple:#6a37cc; --zi-purple2:#5b21a8;
--zi-magenta:#bf2a80; --zi-magenta2:#e57ac0;
--zi-cyan:#1f97aa; --zi-cyan2:#62c2d0; --zi-cyan3:#00889c;
--zi-page:#f8f6fc; --zi-card:#ffffff; --zi-border:#ece6f8;
--zi-mut:#7d70b8; --zi-mut2:#8f83c9; --zi-star:#f5a623;
--zi-cta:#bf2a80;
--zi-brand:linear-gradient(140deg,#1f97aa 0%,#3b2a8f 45%,#6a37cc 70%,#bf2a80 100%);
--zi-cta-grad:linear-gradient(90deg,#6a37cc,#bf2a80);
--zi-disp:'Baloo Bhaijaan 2','Cairo',sans-serif;
--zi-body:'Cairo',sans-serif;
}
.msr{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;
letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;
direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;}
.msr-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
@keyframes zeinaPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes zeinaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ---- page shell ---- */
.zsouq{background:var(--zi-page);color:var(--zi-ink);font-family:var(--zi-body);}
.zsouq *{box-sizing:border-box;}
.zs-wrap{max-width:1280px;margin:0 auto;padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px);}
.zs-weave{height:6px;background:repeating-linear-gradient(90deg,#1f97aa 0 42px,var(--zi-page) 42px 50px,#6a37cc 50px 92px,var(--zi-page) 92px 100px,#bf2a80 100px 142px,var(--zi-page) 142px 150px);}
.zs-h2{font-family:var(--zi-disp);font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--zi-ink);margin:0;}
.zs-eyebrow{font-size:12.5px;color:var(--zi-mut2);font-weight:600;}
.zs-chip{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.zs-sec-head .zs-chip{ display:none; } /* removed: the badge added height to the header row and pushed «كل الحاجات» */
/* PHONES: turn the Top Products grid + Related list into swipable horizontal rows
(was a tall column), and compact the product attribute rows so the PDP is shorter. */
@media(max-width:767px){
.best-selling-items .row{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:0; }
.best-selling-items .row::-webkit-scrollbar{ display:none; }
.best-selling-items .row > [class*="col-"]{ flex:0 0 70%; max-width:70%; scroll-snap-align:start; }
.related-product{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; gap:12px;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.related-product::-webkit-scrollbar{ display:none; }
.related-product .product-categories-list{ flex:0 0 70%; max-width:70%; scroll-snap-align:start; }
/* vertical product cards: image on TOP, info + buy UNDER it (was side-by-side) */
.best-selling-item{ display:block !important; }
.best-selling-item .product-img img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:14px; }
.best-selling-item .product-info{ padding:12px 8px 4px !important; }
.product-categories-list{ display:block !important; border:1px solid var(--zi-border) !important; border-radius:16px; padding:10px !important; gap:0 !important; }
.product-categories-list .product-categories-list-img img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:12px; }
.product-categories-list .product-info{ padding:10px 6px 2px !important; }
/* slightly larger, more readable title under the card */
.best-selling-item .product-title, .best-selling-item .product-title a{ font-size:14.5px !important; line-height:1.45; }
.product-categories-list .product-title, .product-categories-list .product-title a{ font-size:14px !important; line-height:1.45; }
}
/* remove the coral bar beside the section heading («أفضل المنتجات») */
.title-left-content h3::before{ display:none !important; content:none !important; }
/* Top Products in a card container to match منتجات مشابهة (was sitting bare on the page) */
.zs-tp-card{ padding:18px 16px !important; border-radius:20px !important; border:1px solid var(--zi-border) !important;
box-shadow:0 10px 34px -20px rgba(36,27,77,.28) !important; background:#fff !important; }
.zs-tp-card .section-title{ margin-bottom:14px !important; }
/* out-of-stock add-to-cart → disabled, non-clickable (like the storefront) — site-wide */
.buy-now.buy-now--oos{ background:#efeaf6 !important; color:#8a7fb0 !important; cursor:not-allowed !important; pointer-events:none; box-shadow:none !important; border:none !important; }
.buy-now.buy-now--oos .buy-now-icon svg, .buy-now.buy-now--oos .msr{ color:#8a7fb0 !important; fill:#8a7fb0 !important; }
/* ── Unified "أضيفي للسلة" card button — SAME size/shape in every product grid
(top products, related/similar, new arrivals, best selling, flash deals, campaign).
Scoped to card CTAs only; the big product-detail button (.product-actions-type) is untouched. */
.product-action .buy-now,
.product-categories-list .product-info .buy-now{
flex:1 1 auto !important;
justify-content:center !important;
font-size:13.5px !important;
font-weight:700 !important;
line-height:1.15 !important;
padding:11px 12px !important;
border-radius:12px !important;
gap:7px;
}
.product-action .buy-now .buy-now-icon,
.product-categories-list .product-info .buy-now .buy-now-icon{ width:16px; height:16px; display:inline-flex; align-items:center; }
.product-action .buy-now .buy-now-icon svg,
.product-categories-list .product-info .buy-now .buy-now-icon svg{ width:15px; height:15px; }
.zs-chip .msr{font-size:21px;color:#fff;}
.zs-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:nowrap;}
.zs-sec-head .left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1 1 auto;min-width:0;}
.zs-sec-head .left .zs-h2{min-width:0;overflow-wrap:anywhere;}
.zs-sec-head .left .zs-eyebrow{flex:1 0 100%;}
.zs-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--zi-purple);white-space:nowrap;transition:color .15s;flex:0 0 auto;}
.zs-more:hover{color:var(--zi-magenta);}
.zs-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:none;}
.zs-rail::-webkit-scrollbar{display:none;}
/* Product rails: equal-card grid (no horizontal scroll / clipped peek).
"عرض المزيد" opens the full category for the rest. */
.zs-rail-sec .zs-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;overflow:visible;padding-bottom:0;}
.zs-rail-sec .zs-card{flex:none;width:auto;}
@media(max-width:1150px){.zs-rail-sec .zs-rail{grid-template-columns:repeat(4,1fr);}}
@media(max-width:900px){.zs-rail-sec .zs-rail{grid-template-columns:repeat(3,1fr);}}
/* Mobile: product rails become a single swipeable row (with a peek of the next
card) instead of a tall 2-col grid — shorter page, natural horizontal browse. */
@media(max-width:600px){
.zs-rail-sec .zs-rail{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:12px;}
.zs-rail-sec .zs-card{flex:0 0 44%;width:auto;scroll-snap-align:start;}
}
/* ---- top strip + header + nav ---- */
.zs-topstrip{background:linear-gradient(90deg,#241b4d,#3b2a8f 45%,#6b21c8);color:#e9e3ff;font-size:12.5px;
display:flex;align-items:center;justify-content:center;gap:26px;padding:9px 16px;flex-wrap:wrap;font-family:var(--zi-body);}
.zs-topstrip .lead{font-family:var(--zi-disp);font-weight:700;color:#62c2d0;}
.zs-topstrip span.item{display:flex;align-items:center;gap:7px;}
.zs-topstrip .item .msr{font-size:16px;}
.zs-topstrip .middle-left-item{border:0;} /* kill the inherited vertical divider line */
/* Free-delivery promo: static on desktop (it fits); a seamless marquee on mobile
so the full text is always readable on small / large-font screens. */
.zs-ship-vp{ display:inline-flex; align-items:center; min-width:0; }
.zs-ship-run{ display:inline-flex; }
.zs-ship-txt{ white-space:nowrap; }
.zs-ship-txt + .zs-ship-txt{ display:none; }
@keyframes zs-ship-marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* LTR: scrolls left */
@keyframes zs-ship-marq-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } } /* RTL: scrolls right */
@media(prefers-reduced-motion:reduce){ .zs-ship-run{ animation:none !important; } }
/* Desktop: center just the greeting across the strip; the functional items flank it. */
@media(min-width:992px){
.zs-topstrip{position:relative;}
.zs-topstrip .lead{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;}
}
.zs-topstrip .currency-dropdown, .zs-topstrip .Dropdown{position:relative;}
.zs-topstrip .dropdown__button{cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.zs-topstrip .dropdown__list{z-index:70 !important;left:auto;right:0;top:100%;margin-top:8px;text-align:right;min-width:140px;}
.zs-topstrip .dropdown__list-item{color:#241b4d !important;font-size:12.5px;padding:9px 16px;cursor:pointer;white-space:nowrap;}
.zs-topstrip .dropdown__list-item:hover{background:#f5f2fc;color:#bf2a80 !important;}
.zs-header{position:sticky;top:0;z-index:50;background:#fff;
border-bottom:1px solid var(--zi-border);padding:12px clamp(16px,4vw,48px);display:flex;align-items:center;
gap:clamp(12px,3vw,30px);flex-wrap:wrap;font-family:var(--zi-body);}
.zs-logo{display:flex;align-items:center;gap:12px;}
.zs-logo-img{height:46px;width:auto;max-width:150px;object-fit:contain;display:block;}
/* Arabic logo lockup: icon-only mark + زينة wordmark. In RTL the icon (first child)
sits on the RIGHT, the word on the left — a proper Arabic version of the logo. */
.zs-logo-lockup{display:inline-flex;align-items:center;gap:9px;}
.zs-logo-icon{height:42px;width:auto;display:block;}
.zs-logo-word-ar{font-family:'BalooBhaijaan2',var(--zi-disp);font-weight:800;font-size:31px;line-height:1;color:#2f2b45;}
.zs-footer-logo-ar{display:inline-flex;align-items:center;gap:11px;background:#fff;padding:9px 20px;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.28);}
.zs-footer-logo-ar .zs-logo-icon{height:46px;}
.zs-footer-logo-ar .zs-logo-word-ar{font-size:33px;}
.zs-logo-tile{width:48px;height:48px;border-radius:16px;background:var(--zi-brand);display:flex;align-items:center;
justify-content:center;font-family:var(--zi-disp);font-size:26px;font-weight:800;color:#fff;box-shadow:0 6px 16px rgba(123,47,247,.3);}
/* .zs-logo-word (a gradient-filled English wordmark) removed — it was left over
from an earlier header and no template referenced it. The live logo is the
image mark plus .zs-logo-word-ar in a solid colour. */
.zs-logo-tag{font-size:10px;color:var(--zi-mut2);letter-spacing:1px;font-weight:700;line-height:1.1;}
.zs-search{flex:1 1 280px;display:flex;align-items:center;background:#f5f2fc;border:1.5px solid #e3daf7;border-radius:999px;
padding:10px 18px;gap:10px;min-width:200px;}
.zs-search .msr{font-size:20px;color:var(--zi-purple);}
.zs-search input{border:none;background:transparent;outline:none;font-family:var(--zi-body);font-size:13.5px;color:var(--zi-ink);flex:1;width:100%;}
.zs-search .live-search-input{min-width:0;}
.zs-search input::placeholder{color:#9c90ce;}
.zs-hicons{display:flex;align-items:center;gap:6px;}
.zs-hicon{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:12px;color:var(--zi-indigo);transition:background .15s;}
.zs-hicon:hover{background:#f1ecfb;color:var(--zi-indigo);}
.zs-hicon .msr{font-size:22px;}
.zs-hicon span:last-child{font-size:10.5px;font-weight:700;}
.zs-cart{display:flex;align-items:center;gap:8px;background:var(--zi-cta-grad);color:#fff;padding:10px 18px;border-radius:999px;
margin-right:6px;box-shadow:0 6px 18px rgba(224,24,158,.3);}
.zs-cart:hover{color:#fff;}
.zs-cart .msr{font-size:20px;}
.zs-cart .lbl{font-size:13px;font-weight:700;}
.zs-cart .count{background:#1f97aa;color:#fff;font-size:11px;min-width:19px;height:19px;border-radius:10px;
display:inline-flex;align-items:center;justify-content:center;font-weight:800;}
.zs-nav{background:#fff;border-bottom:1px solid var(--zi-border);display:flex;gap:clamp(16px,2.6vw,30px);
justify-content:safe center;overflow-x:auto;padding:12px clamp(16px,4vw,48px);scrollbar-width:none;}
.zs-nav::-webkit-scrollbar{display:none;}
.zs-nav a{flex:0 0 auto;font-size:13.5px;font-weight:700;color:#5b4d99;white-space:nowrap;padding-bottom:2px;
border-bottom:2px solid transparent;transition:.15s;}
.zs-nav a:hover{color:var(--zi-magenta);border-bottom-color:var(--zi-magenta);}
/* ---- hero ---- */
.zs-hero{background:radial-gradient(1100px 640px at 85% -10%,#3b2a8f 0%,#2c2166 45%,#241b4d 100%);position:relative;overflow:hidden;}
.zs-hero .orb{position:absolute;border-radius:50%;}
.zs-hero .orb1{top:60px;left:8%;width:140px;height:140px;background:radial-gradient(circle at 35% 35%,#00d5e8,#0090a8);opacity:.35;filter:blur(4px);animation:zeinaFloat 7s ease-in-out infinite;}
.zs-hero .orb2{bottom:40px;left:30%;width:80px;height:80px;background:radial-gradient(circle at 35% 35%,#e57ac0,#b0107c);opacity:.4;filter:blur(3px);animation:zeinaFloat 5.5s ease-in-out infinite;}
.zs-hero .ring{position:absolute;top:30%;right:-60px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(123,47,247,.4);}
.zs-hero-inner{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:clamp(28px,4vw,60px);align-items:center;padding:clamp(44px,7vw,90px) clamp(20px,4vw,48px);}
.zs-hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(0,184,207,.14);border:1px solid rgba(63,216,232,.45);
color:#62c2d0;font-size:12.5px;font-weight:700;letter-spacing:1px;padding:8px 20px;border-radius:999px;margin-bottom:26px;}
.zs-hero-badge .msr{font-size:16px;}
.zs-hero h1{font-family:var(--zi-disp);font-weight:800;font-size:clamp(40px,5.8vw,72px);line-height:1.2;color:#fff;margin:0 0 8px;}
/* Solid, not a gradient. This was a three-stop cyan->violet->pink clip on a
HEADING — the same purple->pink treatment the app design deliberately dropped.
The brand cyan alone holds up against the dark hero and stays legible where a
gradient's mid-tones wash out. */
.zs-hero-sub{font-family:var(--zi-disp);font-weight:700;font-size:clamp(24px,3.4vw,40px);line-height:1.3;
color:#62c2d0;margin-bottom:18px;}
.zs-hero p{color:#b9aef5;font-size:clamp(14.5px,1.4vw,17px);line-height:1.95;max-width:52ch;margin:0 0 32px;}
.zs-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.zs-btn-cta{display:inline-flex;align-items:center;gap:9px;background:var(--zi-cta);color:#fff;font-weight:800;font-size:15px;
padding:14px 32px;border-radius:999px;box-shadow:0 10px 30px rgba(224,24,158,.4);transition:transform .15s;}
.zs-btn-cta:hover{color:#fff;transform:translateY(-2px);}
.zs-btn-ghost{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(63,216,232,.6);color:#62c2d0;
font-weight:700;font-size:15px;padding:13px 28px;border-radius:999px;}
.zs-btn-ghost:hover{color:#62c2d0;background:rgba(63,216,232,.1);}
.zs-hero-stats{display:flex;gap:clamp(20px,3vw,44px);margin-top:42px;justify-content:center;}
.zs-hero-stats > div{display:flex;flex-direction:column;align-items:center;text-align:center;}
.zs-hero-stats .num{font-family:var(--zi-disp);font-size:27px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;gap:5px;}
.zs-hero-stats .lbl{font-size:12px;color:var(--zi-mut2);}
.zs-hero-stats .sep{width:1px;background:rgba(123,47,247,.45);}
.zs-hero-media{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.zs-hero-card{position:relative;width:min(88%,380px);aspect-ratio:3/4;border-radius:36px;background:linear-gradient(160deg,#2c2166,#3b2a8f);
border:1px solid rgba(123,47,247,.5);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);display:block;text-decoration:none;}
.zs-hero-card img{width:100%;height:100%;object-fit:cover;}
/* hero carousel */
.zs-hero-swiper{width:min(88%,380px);border-radius:36px;}
.zs-hero-swiper .swiper-slide{height:auto;display:flex;justify-content:center;}
.zs-hero-swiper .zs-hero-card{width:100%;}
.zs-hero-slidebadge{position:absolute;top:18px;right:16px;left:auto;z-index:3;display:inline-flex;align-items:center;gap:5px;
background:linear-gradient(90deg,#bf2a80,#6a37cc);border-radius:14px;padding:7px 13px;color:#fff;font-size:12.5px;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.3);}
.zs-hero-slidebadge .msr{font-size:16px;color:#fff;}
.zs-hero-slidename{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:36px 18px 18px 150px;text-align:right;
background:linear-gradient(0deg,rgba(18,11,42,.92),rgba(18,11,42,.35) 55%,transparent);color:#fff;
font-family:var(--zi-disp);font-weight:700;font-size:15px;line-height:1.4;}
.zs-hero-dots{position:static;margin-top:18px;display:flex;justify-content:center;gap:7px;}
.zs-hero-dots .swiper-pagination-bullet{width:9px;height:9px;background:#8f83c9;opacity:.5;transition:.25s;}
.zs-hero-dots .swiper-pagination-bullet-active{opacity:1;background:var(--zi-magenta);width:22px;border-radius:5px;}
.zs-hero-verified{position:absolute;bottom:24px;left:clamp(0px,2vw,8px);right:auto;z-index:6;background:#241b4d;border:1px solid #5a3fb0;
border-radius:18px;padding:14px 20px;display:flex;align-items:center;gap:12px;isolation:isolate;box-shadow:0 10px 26px -10px rgba(0,0,0,.5);}
.zs-hero-verified .msr{font-size:22px;color:#62c2d0;}
.zs-hero-verified b{font-family:var(--zi-disp);font-size:17px;font-weight:700;color:#fff;display:block;}
.zs-hero-verified span{font-size:10.5px;color:var(--zi-mut2);}
.zs-hero-disc{position:absolute;top:20px;left:clamp(0px,2vw,4px);background:linear-gradient(90deg,#bf2a80,#6a37cc);border-radius:16px;
padding:10px 18px;display:flex;align-items:center;gap:9px;box-shadow:0 10px 26px rgba(224,24,158,.4);animation:zeinaFloat 6s ease-in-out infinite;}
.zs-hero-disc .msr{font-size:18px;color:#fff;}
.zs-hero-disc span{font-size:13px;font-weight:800;color:#fff;}
.zs-weave-hero{height:6px;background:repeating-linear-gradient(90deg,#1f97aa 0 42px,#241b4d 42px 50px,#6a37cc 50px 92px,#241b4d 92px 100px,#bf2a80 100px 142px,#241b4d 142px 150px);}
/* ---- categories ---- */
.zs-cats{padding:clamp(32px,4.4vw,56px) 0 6px;}
.zs-cat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:11px;width:108px;scroll-snap-align:start;}
.zs-cat-tile{width:98px;height:98px;border-radius:32px;display:flex;align-items:center;justify-content:center;position:relative;
overflow:hidden;transition:box-shadow .2s,transform .2s;}
.zs-cat:hover .zs-cat-tile{box-shadow:0 12px 28px rgba(123,47,247,.25);transform:translateY(-3px);}
.zs-cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.zs-cat-tile .msr{font-size:32px;color:#fff;position:relative;z-index:1;}
.zs-cat-name{font-size:12.5px;font-weight:700;color:#3d3374;text-align:center;line-height:1.4;}
/* ---- flash deals ---- */
.zs-flash{margin:clamp(20px,3vw,36px) auto;}
.zs-flash-band{background:linear-gradient(115deg,#241b4d,#3b2a8f 55%,#5b21a8);border-radius:28px;padding:clamp(22px,3.4vw,40px);position:relative;overflow:hidden;}
.zs-flash-band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,95,210,.05) 60px 64px,transparent 64px 124px,rgba(63,216,232,.05) 124px 128px);}
.zs-flash-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px;}
.zs-flash-head .l{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.zs-flash-tag{display:inline-flex;align-items:center;gap:7px;background:var(--zi-cta);color:#fff;font-weight:800;font-size:13px;
padding:9px 18px;border-radius:999px;animation:zeinaPulse 2.4s ease-in-out infinite;}
.zs-flash-tag .msr{font-size:17px;}
.zs-flash-band h2{font-family:var(--zi-disp);font-size:clamp(24px,3vw,34px);font-weight:800;color:#fff;margin:0;}
.zs-count{display:flex;align-items:center;gap:8px;}
.zs-count .msr{font-size:19px;color:#62c2d0;}
.zs-count .note{font-size:12px;color:#b9aef5;margin-left:4px;}
.zs-count .box{background:rgba(63,216,232,.14);border:1px solid rgba(63,216,232,.45);color:#62c2d0;font-weight:800;font-size:18px;
min-width:48px;text-align:center;padding:8px 6px;border-radius:12px;font-variant-numeric:tabular-nums;}
.zs-count .colon{color:#62c2d0;font-weight:800;}
.zs-flash-rail{position:relative;}
/* ---- product card (rails + flash) ---- */
.zs-card{flex:0 0 clamp(172px,44vw,228px);scroll-snap-align:start;background:#fff;border:1px solid var(--zi-border);border-radius:20px;
overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;}
.zs-card:hover{box-shadow:0 14px 34px rgba(59,42,143,.16);border-color:#d8c9f7;transform:translateY(-3px);}
.zs-card--flash{border:none;}
.zs-card-img{position:relative;aspect-ratio:3/4;background:#f1edf9;overflow:hidden;}
.zs-card-img img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.zs-card-off{position:absolute;top:10px;right:10px;background:var(--zi-cta);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px;}
.zs-card-fav{position:absolute;top:10px;left:10px;width:34px;height:34px;background:rgba(255,255,255,.94);border-radius:50%;
display:flex;align-items:center;justify-content:center;color:var(--zi-indigo);box-shadow:0 2px 8px rgba(0,0,0,.1);transition:color .15s;border:none;cursor:pointer;}
.zs-card-fav:hover{color:var(--zi-magenta);}
.zs-card-fav .msr{font-size:18px;}
.zs-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.zs-card-name{font-size:13.5px;font-weight:700;color:var(--zi-ink);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.zs-card-name a{color:var(--zi-ink);}
.zs-card-store{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--zi-mut);}
.zs-card-store .msr{font-size:14px;color:var(--zi-cyan);}
.zs-card-price{display:flex;align-items:baseline;gap:8px;}
.zs-card-price .now{color:var(--zi-magenta);font-weight:800;font-size:16px;}
.zs-card-price .old{color:#a89cd8;font-size:12px;text-decoration:line-through;}
.zs-card-add{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--zi-indigo);color:#fff;
font-size:12.5px;font-weight:800;padding:10px 0;border-radius:999px;border:none;cursor:pointer;transition:background .15s;width:100%;}
.zs-card-add:hover{background:var(--zi-cta);color:#fff;}
.zs-card-add .msr{font-size:17px;}
/* ---- interleaved promo band (between rails) ---- */
.zs-promo{ padding:clamp(20px,3vw,34px) 0 0; }
/* Clean branded graphic promo — no cropped photos; a large faded category icon
+ the toub-weave signature stripe carry the design so it always looks intentional. */
.zs-promoband{ position:relative; overflow:hidden; display:flex; align-items:center;
height:clamp(150px,17vw,200px); border-radius:22px; text-decoration:none;
padding:0 clamp(28px,5vw,64px); box-shadow:0 10px 30px rgba(36,27,77,.14);
transition:box-shadow .2s,transform .2s; }
.zs-promoband:hover{ box-shadow:0 16px 40px rgba(36,27,77,.22); transform:translateY(-2px); }
/* subtle vertical warp texture */
.zs-promoband::before{ content:""; position:absolute; inset:0;
background:repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.045) 52px 56px); }
/* large decorative category glyph, biased to the far side */
.zs-promo-deco{ position:absolute; top:50%; inset-inline-start:clamp(-14px,-1vw,-6px);
transform:translateY(-50%); font-size:clamp(120px,17vw,210px); line-height:1; color:#fff;
opacity:.09; pointer-events:none; }
.zs-promoband--rev{ } /* alternation kept for the icon side */
.zs-promoband--rev .zs-promo-deco{ inset-inline-start:auto; inset-inline-end:clamp(-14px,-1vw,-6px); }
.zs-promo-txt{ position:relative; z-index:1; display:flex; flex-direction:column;
align-items:flex-start; gap:12px; color:#fff; max-width:70%; }
.zs-promoband--rev .zs-promo-txt{ margin-inline-start:auto; align-items:flex-end; text-align:end; }
.zs-promo-eye{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:2px;
font-weight:800; color:#7fd0dc; }
.zs-promo-eye .msr{ font-size:16px; }
.zs-promo-txt h2{ font-family:var(--zi-disp); font-size:clamp(24px,3vw,38px); font-weight:800;
color:#fff; margin:0; line-height:1.2; }
.zs-promo-cta{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.5); color:#fff; font-family:var(--zi-body); font-size:14px;
font-weight:800; padding:9px 22px; border-radius:40px; transition:background .15s; }
.zs-promoband:hover .zs-promo-cta{ background:rgba(255,255,255,.32); }
/* toub-weave signature stripe along the bottom */
.zs-promo-weave{ position:absolute; left:0; right:0; bottom:0; height:5px; opacity:.55;
background:repeating-linear-gradient(90deg,#1f97aa 0 40px,transparent 40px 48px,#6a37cc 48px 88px,transparent 88px 96px,#bf2a80 96px 136px,transparent 136px 144px); }
@media(max-width:640px){
.zs-promoband{ height:clamp(130px,34vw,160px); padding:0 24px; }
.zs-promo-txt{ max-width:78%; }
.zs-promo-txt h2{ font-size:22px; }
}
/* ---- jirtig editorial banner ---- */
.zs-jirtig{padding:clamp(28px,4vw,50px) 0;}
.zs-jirtig-band{background:linear-gradient(115deg,#5b21a8,#bf2a80);border-radius:28px;display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));overflow:hidden;position:relative;}
.zs-jirtig-band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.05) 48px 52px);}
.zs-jirtig-txt{position:relative;padding:clamp(28px,4vw,54px);display:flex;flex-direction:column;justify-content:center;gap:14px;}
.zs-jirtig-eye{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;font-weight:800;color:#ffd6f2;}
.zs-jirtig-eye .msr{font-size:17px;}
.zs-jirtig-txt h2{font-family:var(--zi-disp);font-size:clamp(28px,3.4vw,42px);font-weight:800;color:#fff;margin:0;line-height:1.3;}
.zs-jirtig-txt p{color:#fbe4f4;font-size:14.5px;line-height:1.95;margin:0;max-width:46ch;}
.zs-jirtig-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#a3117a;font-weight:800;
font-size:14px;padding:12px 28px;border-radius:999px;margin-top:8px;}
.zs-jirtig-btn:hover{color:#a3117a;}
.zs-jirtig-media{position:relative;min-height:250px;overflow:hidden;}
.zs-jirtig-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
/* ---- featured stores ---- */
.zs-stores{background:#fff;border-top:1px solid var(--zi-border);border-bottom:1px solid var(--zi-border);}
.zs-stores-inner{padding:clamp(36px,4.8vw,62px) 0;}
.zs-stores-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;}
.zs-store{border:1px solid var(--zi-border);border-radius:24px;padding:24px 22px;display:flex;flex-direction:column;align-items:center;
gap:10px;text-align:center;background:var(--zi-page);transition:border-color .2s,box-shadow .2s;}
.zs-store:hover{border-color:#c9b3f5;box-shadow:0 12px 30px rgba(59,42,143,.12);}
.zs-store-av{position:relative;}
.zs-store-av .av{width:112px;height:112px;border-radius:32px;display:flex;align-items:center;justify-content:center;
font-family:var(--zi-disp);font-size:40px;font-weight:800;color:#fff;overflow:hidden;
border:1px solid var(--zi-border);box-shadow:0 10px 26px rgba(59,42,143,.12);background:#fff;}
.zs-store-av .av img{width:100%;height:100%;object-fit:cover;border-radius:32px;}
.zs-store-av .vf{position:absolute;bottom:-2px;left:-2px;font-size:24px;color:#1f97aa;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.zs-store-name{font-size:15.5px;font-weight:800;color:var(--zi-ink);}
.zs-store-spec{font-size:12px;color:var(--zi-mut);}
.zs-store-rate{display:flex;align-items:center;gap:7px;font-size:12.5px;flex-wrap:wrap;justify-content:center;}
.zs-store-rate .msr{font-size:16px;color:var(--zi-star);}
.zs-store-rate b{font-weight:800;color:#3d3374;}
.zs-store-rate .mut{color:var(--zi-mut2);}
.zs-store-rate .dot{color:#cfc5ec;}
/* `margin-top:auto` pins the buttons to the bottom of the card. Without it they
sit directly under the rating, so a shop whose name wraps to two lines pushes
its own buttons down while its neighbours' stay up — the row stops lining up.
The cards are already equal height (grid stretch), so auto is all it takes. */
.zs-store-btns{display:flex;gap:10px;margin-top:auto;padding-top:6px;width:100%;}
/* Grid items stretch by default, but the card is also rendered inside Bootstrap
columns elsewhere, where it would not. */
.zs-store{height:100%;}
.zs-store-follow{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid #1f97aa;color:#00889c;
font-size:12.5px;font-weight:800;padding:9px 0;border-radius:999px;background:#fff;cursor:pointer;transition:.15s;}
.zs-store-follow:hover{background:#1f97aa;color:#fff;}
.zs-store-follow .msr{font-size:16px;}
.zs-store-visit{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--zi-indigo);color:#fff;
font-size:12.5px;font-weight:800;padding:9px 0;border-radius:999px;transition:.15s;}
.zs-store-visit:hover{background:var(--zi-cta);color:#fff;}
/* ---- trust bar ---- */
.zs-trust{background:linear-gradient(90deg,#241b4d,#3b2a8f);}
/* Keep the newsletter's inner container on the SAME 1280 grid as the trust bar,
sell-CTA and footer so every section's left/right edges line up vertically. */
.newsletter .Container{ max-width:1280px !important; margin-inline:auto; padding-inline:clamp(16px,4vw,48px) !important; }
.zs-trust-grid{padding:clamp(28px,4vw,46px) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;}
.zs-trust-item{display:flex;align-items:center;gap:14px;}
.zs-trust-item .ic{width:48px;height:48px;border-radius:16px;background:rgba(123,47,247,.25);border:1px solid rgba(160,107,255,.5);
display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.zs-trust-item .ic .msr{font-size:23px;color:#62c2d0;}
.zs-trust-item b{font-size:14.5px;font-weight:800;color:#fff;display:block;}
.zs-trust-item span{font-size:12px;color:#9c90ce;}
/* ---- footer ---- */
.zs-footer{background:#1c1540;color:#b9aef5;font-family:var(--zi-body);}
.zs-weave-footer{height:6px;background:repeating-linear-gradient(90deg,#1f97aa 0 42px,#1c1540 42px 50px,#6a37cc 50px 92px,#1c1540 92px 100px,#bf2a80 100px 142px,#1c1540 142px 150px);}
.zs-footer-grid{max-width:1280px;margin:0 auto;padding:clamp(42px,5vw,66px) clamp(16px,4vw,48px) 28px;display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(24px,4vw,48px);}
.zs-footer-brand{display:flex;flex-direction:column;gap:14px;}
.zs-footer-brand .top{display:flex;align-items:center;gap:11px;}
.zs-footer-logo{height:58px;width:auto;max-width:190px;object-fit:contain;background:#fff;padding:10px 18px;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.28);}
.zs-footer-tile{width:44px;height:44px;border-radius:14px;background:var(--zi-brand);display:flex;align-items:center;justify-content:center;
font-family:var(--zi-disp);font-size:23px;font-weight:800;color:#fff;}
.zs-footer-word{font-family:var(--zi-disp);font-size:28px;font-weight:800;color:#fff;}
.zs-footer p{font-size:13px;line-height:1.95;margin:0;color:#9c90ce;max-width:38ch;}
/* "Follow us" — a labelled social row that sits under the brand text, above the
app buttons. Compact, intentional, identical across phone/tablet/desktop. */
.zs-footer-follow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;}
/* Desktop only: move the social row to the EMPTY side of the footer (opposite the
brand column) so it never collides. RTL brand sits right → social bottom-LEFT;
LTR brand sits left → social bottom-RIGHT. Phone/iPad keep it in flow. */
@media(min-width:992px){
.zs-footer-grid{ position:relative; }
.zs-footer-follow{ position:absolute; bottom:8px; margin:0; }
/* align the social row's outer edge with the last column (customer service),
which sits at the grid's content edge = inside the grid's own padding. */
html[dir="rtl"] .zs-footer-follow{ left:clamp(16px,4vw,48px); right:auto; justify-content:flex-start; }
html[dir="ltr"] .zs-footer-follow{ right:clamp(16px,4vw,48px); left:auto; justify-content:flex-start; }
}
.zs-follow-label{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#b6a9e6;}
.zs-footer-apps{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.zs-badge{display:inline-flex;align-items:center;gap:11px;direction:ltr;background:#000;color:#fff;
border:1px solid rgba(255,255,255,.22);border-radius:13px;padding:8px 18px 8px 14px;text-decoration:none;transition:.18s;min-width:172px;}
.zs-badge:hover{background:#151515;border-color:rgba(255,255,255,.55);transform:translateY(-1px);}
.zs-badge svg{width:26px;height:26px;flex:none;}
.zs-badge .txt{display:flex;flex-direction:column;line-height:1.12;text-align:left;}
.zs-badge .txt small{font-size:9.5px;letter-spacing:.5px;opacity:.85;text-transform:uppercase;}
.zs-badge .txt b{font-size:16px;font-weight:700;letter-spacing:.2px;}
.zs-footer-col .ttl{font-size:14px;font-weight:800;color:#fff;margin-bottom:14px;}
.zs-footer-col .lnks{display:flex;flex-direction:column;gap:10px;font-size:13px;}
.zs-footer-col .lnks a{color:#9c90ce;}
.zs-footer-col .lnks a:hover{color:#fff;}
.zs-footer-news p{font-size:12.5px;color:#9c90ce;line-height:1.85;margin:0 0 12px;}
.zs-news-box{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(160,107,255,.4);border-radius:999px;
padding:5px 5px 5px 6px;align-items:center;gap:8px;}
.zs-news-box input{flex:1;font-size:12.5px;color:#d5c9ff;padding-right:12px;background:transparent;border:none;outline:none;}
.zs-news-box input::placeholder{color:#8f83c9;}
.zs-news-btn{display:inline-flex;align-items:center;gap:6px;background:var(--zi-cta);color:#fff;font-size:12.5px;font-weight:800;
padding:9px 20px;border-radius:999px;border:none;cursor:pointer;}
.zs-footer-bottom{border-top:1px solid rgba(123,47,247,.3);}
.zs-footer-bottom .in{max-width:1280px;margin:0 auto;padding:18px clamp(16px,4vw,48px);display:flex;align-items:center;
justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#8f83c9;}
.zs-pay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.zs-pay .pay-badge{display:inline-flex;padding:0;border:0;line-height:0;}
.zs-pay .pay-badge svg{width:40px;height:27px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.25);}
/* Apple's Payment Mark ships as its own card (165.5x106, black border + white
fill), a wider box than our 48x32 badges. Match on HEIGHT and let the width
follow: forcing it to 40px would squash the mark, which Apple's marks
guidelines forbid. Radius drops to 3px so the shadow hugs the artwork's own
corners instead of shaving them. */
.zs-pay .pay-applepay svg{width:auto;height:27px;border-radius:3px;}
.zs-pay .pay-cod{background:#fff;border:0;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.25);height:27px;
display:inline-flex;align-items:center;gap:5px;padding:0 10px;color:#1B3A6B;font-size:10.5px;font-weight:700;line-height:1;}
.zs-pay .pay-cod svg{width:15px;height:15px;fill:#84BD00;}
.zs-pay .pay-cod b{font-weight:700;}
/* ---- responsive ---- */
@media(max-width:640px){
/* PHONES ONLY: free-delivery promo scrolls as a marquee (it truncates otherwise).
iPad/desktop keep it static since it fits there. */
.zs-topstrip span.item.zs-ship{ overflow:hidden; text-overflow:clip; }
.zs-topstrip .zs-ship-vp{ overflow:hidden; }
html[dir="ltr"] .zs-topstrip .zs-ship-run{ animation:zs-ship-marq 12s linear infinite; will-change:transform; } /* English → left */
html[dir="rtl"] .zs-topstrip .zs-ship-run{ animation:zs-ship-marq-r 12s linear infinite; will-change:transform; } /* Arabic → right */
.zs-topstrip .zs-ship-txt{ padding-inline-end:44px; }
.zs-topstrip .zs-ship-txt + .zs-ship-txt{ display:inline; }
.zs-topstrip .zs-cur-prefix{ display:none; } /* drop "العملة:" on phones for marquee room */
/* stats bar centred on phone: the whole row centres, and each stat's number +
label centre under one another. */
.zs-hero-stats{gap:16px;justify-content:center;}
.zs-hero-stats > div{display:flex;flex-direction:column;align-items:center;text-align:center;}
.zs-hero-stats .num{font-size:22px;justify-content:center;}
/* footer: single-column, CENTERED stack — avoids the lopsided right-hug that
leaves a big empty band on the left in RTL. Everything is symmetric. */
.zs-footer-grid{grid-template-columns:1fr;gap:28px;padding:38px 20px 24px;text-align:center;}
.zs-footer-brand{align-items:center;}
.zs-footer p{max-width:34ch;margin-inline:auto;}
.zs-footer-follow{justify-content:center;margin-top:18px;}
.zs-footer-social{justify-content:center;}
.zs-footer-apps{justify-content:center;gap:10px;}
.zs-badge{flex:0 0 auto;min-width:160px;justify-content:center;}
.zs-footer-col{text-align:center;}
.zs-footer-col .lnks{align-items:center;}
.zs-news-box{flex-wrap:nowrap;}
.zs-news-box input{min-width:0;}
/* bottom bar: stack copyright above the payment marks, centered */
.zs-footer-bottom .in{flex-direction:column;align-items:center;text-align:center;gap:14px;}
.zs-pay{justify-content:center;}
}
/* small tablets / large phones in landscape (641–991): the 3-across grid gets too
cramped and the brand column turns into a tall pillar. Instead the brand spans the
full top (centered, buttons side-by-side) and the two link lists sit side-by-side
below — symmetric, no empty band. */
@media(min-width:641px) and (max-width:991px){
.zs-footer-grid{grid-template-columns:1fr 1fr;gap:30px 44px;}
.zs-footer-brand{grid-column:1 / -1;align-items:center;text-align:center;}
.zs-footer p{max-width:56ch;margin-inline:auto;}
.zs-footer-follow,.zs-footer-social,.zs-footer-apps{justify-content:center;}
.zs-footer-col{text-align:center;}
.zs-footer-col .lnks{align-items:center;}
}
/* desktop / tablet-landscape (≥992): give the brand column the extra room it needs so
the two app buttons sit side-by-side instead of stacking into a tall pillar. */
@media(min-width:992px){
.zs-footer-grid{grid-template-columns:1.5fr 1fr 1fr;}
.zs-badge{min-width:158px;}
}
/* ===================== MOBILE ===================== */
html, body{ overflow-x:clip; max-width:100%; }
.zsouq{ overflow-x:clip; }
@media(max-width:991px){
/* top strip: one row on tablet + phone. iPad/tablet keep the promo STATIC (it fits);
phones (≤640) turn it into a scrolling marquee — see the max-width:640 block. */
.zs-topstrip{ gap:10px; font-size:11px; padding:8px 12px; justify-content:space-between; align-items:center; }
.zs-topstrip .lead{ display:none; } /* greeting is redundant with the logo */
.zs-topstrip a.item{ display:none; } /* seller link (also in footer CTA) */
.zs-topstrip span.item.zs-ship{ order:1; flex:1 1 auto; min-width:0; }
.zs-topstrip .zs-ship-vp{ flex:1 1 auto; min-width:0; }
.zs-topstrip .zs-lang-switch{ order:2; margin-inline-start:0 !important; flex:0 0 auto; }
.zs-topstrip .zs-currency-label{ order:3; flex:0 0 auto; white-space:nowrap; gap:3px; } /* keep currency (جنيه مصري) visible */
.zs-topstrip .zs-country-flag{ order:4; flex:0 0 auto; } /* browsing-country flag */
/* header wraps to 2 rows: logo + icons on top, search full-width below */
.zs-header{ gap:10px; padding:10px 14px; row-gap:10px; }
.zs-logo-tag{ display:none; }
.zs-logo-tile{ width:42px; height:42px; font-size:22px; }
.zs-logo-img{ height:38px; max-width:120px; }
.zs-logo-icon{ height:34px; }
.zs-logo-word-ar{ font-size:25px; }
.zs-search{ order:5; flex:1 1 100%; min-width:0; }
.zs-hicons{ margin-inline-start:auto; gap:2px; }
/* hide the text labels (not the icon or the count badge) so icons line up evenly */
.zs-hicon > span:not(.msr):not(.header-action-badge){ display:none; }
.zs-hicon{ padding:6px; }
.zs-cart{ padding:9px 14px; margin-right:2px; }
.zs-cart .lbl{ display:none; }
.zs-cart .count{ margin-inline-start:2px; }
.zs-nav{ padding:10px 14px; gap:16px; }
/* hero */
.zs-hero-inner{ padding:32px 18px; gap:22px; grid-template-columns:1fr; max-width:100%; }
.zs-hero-inner > *{ min-width:0; max-width:100%; }
.zs-header > *, .zs-topstrip > *, .zs-nav > *{ min-width:0; }
.zs-topstrip{ flex-wrap:nowrap; overflow:visible; } /* one row; visible keeps the language dropdown unclipped */
.zs-topstrip .lead{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zs-topstrip .dropdown__list{ z-index:2000 !important; }
.zs-wrap{ max-width:100%; }
.zs-hero h1{ font-size:32px; word-break:break-word; }
.zs-hero-sub{ font-size:21px; }
.zs-hero p{ font-size:14px; }
.zs-hero-media{ order:-1; }
.zs-hero-card{ width:min(78%,300px); }
.zs-btn-cta, .zs-btn-ghost{ padding:12px 20px; font-size:14px; }
.zs-hero-cta{ width:100%; }
.zs-hero-cta .zs-btn-cta, .zs-hero-cta .zs-btn-ghost{ flex:1 1 46%; justify-content:center; }
.zs-search .msr{ font-size:18px; }
.zs-search input::placeholder{ font-size:12px; }
/* section heads / rails */
.zs-h2{ font-size:22px; }
.zs-sec-head{ margin-bottom:14px; }
.zs-flash-band{ padding:18px; }
.zs-flash-head{ gap:12px; }
/* promo/jirtig bands stack (already handled) */
/* listing: sidebar hidden on mobile (offcanvas), grid 2-col */
.zs-listing-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
.zs-card-add{ font-size:11.5px; padding:9px 0; }
/* stores grid 1-2 col */
.zs-stores-grid{ grid-template-columns:1fr; }
}
@media(max-width:420px){
.zs-hero h1{ font-size:27px; }
.zs-hero-sub{ font-size:18px; }
.zs-hero-stats{ gap:12px; }
.zs-hero-stats .num{ font-size:18px; }
}
@media(max-width:820px){
/* cart table: scroll inside its card instead of breaking layout */
.zsouq .cart-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.zsouq .cart-table table{ min-width:520px; }
.zs-cart-card{ overflow:hidden; }
/* sort bar: stack count/label row, pills row */
.zs-sortbar{ flex-direction:column; align-items:stretch; gap:10px; }
.zs-sortbar .vsep{ display:none; }
.zs-sortbar .zs-sortpills{ width:100%; }
.zs-sortpills a{ font-size:11.5px; padding:6px 13px; flex:1 1 auto; text-align:center; }
/* product details: gallery + info stack, related rail scrolls */
.zsouq .product-details-container .row > [class*="col-"]{ width:100%; }
.zs-pdp-trust{ grid-template-columns:1fr 1fr; }
/* checkout: order summary stacks under form */
.zsouq .checkout-tab .nav-link{ padding:10px !important; font-size:12.5px; }
}
/* =====================================================================
GLOBAL RESKIN — carry the souq palette/fonts into every (inner) page.
Re-points the theme's colour variables; existing components that use
var(--primary)/var(--secondary) recolour automatically.
===================================================================== */
:root{
--primary:#bf2a80 !important; /* magenta CTA */
--primary-light:#e57ac0 !important;
--secondary:#6a37cc !important; /* purple */
--secondary-light:#8c6ae0 !important;
--text-primary:#241b4d !important;
}
body{ background:#f8f6fc !important; font-family:'Cairo','Tahoma',sans-serif; color:#241b4d; }
h1,h2,h3,h4,.section-title h3,.deal-title-area h3{ font-family:'Baloo Bhaijaan 2','Cairo',sans-serif; }
/* section titles get the gradient chip-bar accent in magenta (from zeina-editorial ::before) */
.section-title-left .title-left-content h3{ color:#241b4d; }
/* buttons / pills across inner pages -> souq gradient where the theme uses solid primary */
.view-more-btn, .btn--primary, .buy-now, .addtocartbtn, .btn-capsule.bg--primary,
.deal-title-area .view-more-btn{
background:linear-gradient(90deg,#6a37cc,#bf2a80) !important; border-color:transparent !important; color:#fff !important;
}
.view-more-btn:hover, .btn--primary:hover, .buy-now:hover, .addtocartbtn:hover{ filter:brightness(1.05); color:#fff !important; }
/* prices & discount tags */
.product-price span, .priceAndRatting .product-price span, .product-details-price .new-price{ color:#bf2a80 !important; }
.offer-tag{ background:#bf2a80 !important; color:#fff !important; }
/* breadcrumb / page banner -> indigo souq gradient */
.breadcrumb-banner, .breadcrumb-area, .page-banner{
background:linear-gradient(115deg,#241b4d,#3b2a8f 55%,#5b21a8) !important; position:relative;
min-height:150px !important; display:flex !important; align-items:center; justify-content:center;
padding:34px 16px !important;
}
.breadcrumb-banner-img, .breadcrumb-banner img{ display:none !important; }
.breadcrumb-banner .breadcrumb-title, .breadcrumb-banner .breadcrumb, .breadcrumb-banner a,
.breadcrumb-banner .breadcrumb-item, .breadcrumb-area *, .page-banner *{ color:#fff !important; }
.breadcrumb-banner .breadcrumb-title{ font-family:'Baloo Bhaijaan 2','Cairo',sans-serif; }
/* filter / sidebar accents */
.filter-widget .widget-title, .shop-sidebar h5{ color:#3b2a8f; }
.nice-select.open .list, .price-range .noUi-connect{ background:#6a37cc; }
/* card hover shadow to purple tint */
.product-item:hover .product-img{ box-shadow:0 14px 34px rgba(59,42,143,.16); }
/* country picker — souq polish (gradient header + weave; uses .z-country markup) */
.z-country-overlay{ background:rgba(24,16,48,.62) !important; backdrop-filter:blur(5px); }
.z-country-dialog{ border-radius:26px !important; box-shadow:0 34px 90px rgba(36,27,77,.42) !important;
overflow:hidden; padding:0 !important; text-align:start !important; width:min(430px,92vw) !important; }
/* gradient souq header band */
.z-country-head{ position:relative; background:linear-gradient(135deg,#3b2a8f 0%,#6a37cc 55%,#bf2a80 100%);
padding:30px 28px 30px; text-align:center; color:#fff; }
.z-country-head::before{ content:""; position:absolute; inset:0; opacity:.5;
background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.06) 46px 50px); }
.z-country-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
background:repeating-linear-gradient(90deg,#1f97aa 0 40px,transparent 40px 48px,#e57ac0 48px 88px,transparent 88px 96px,#62c2d0 96px 136px,transparent 136px 144px); }
.z-country-eyebrow{ position:relative; color:rgba(255,255,255,.9) !important; letter-spacing:.22em !important; font-size:.72rem !important; }
.z-country-head h3{ position:relative; font-family:'Baloo Bhaijaan 2','Cairo',sans-serif !important; color:#fff !important; font-size:1.6rem !important; margin:10px 0 4px !important; }
.z-country-head p{ position:relative; color:rgba(255,255,255,.82) !important; margin:0 !important; font-size:.95rem !important; }
.z-country-x{ color:#fff !important; opacity:.9; z-index:3; font-size:1.5rem !important; }
.z-country-x:hover{ opacity:1; }
.z-country-body{ padding:22px 24px 24px; }
.z-country-rule{ display:none !important; }
.z-country-item{ border-radius:14px !important; border-color:var(--zi-border) !important; padding:11px 15px !important;
transition:border-color .15s, background .15s, box-shadow .15s; }
.z-country-item .z-country-name{ font-family:'Cairo',sans-serif !important; color:#241b4d !important; font-weight:700 !important; font-size:1.08rem !important; }
.z-country-item.is-selected{ border-color:#bf2a80 !important; background:#fdf0f9 !important; box-shadow:0 4px 14px rgba(191,42,128,.14); }
.z-country-item:hover{ border-color:#d8c9f7 !important; background:#faf8ff; }
.z-country-item.is-soon{ opacity:1 !important; }
.z-country-tag{ font-family:'Cairo',sans-serif !important; }
.z-country-tag.current{ background:var(--zi-cta-grad) !important; color:#fff !important; border:none !important; }
.z-country-tag.soon{ background:#f1ecfb !important; color:#6a37cc !important; border:1px solid #e2d8fb !important; }
/* Same rem/10px trap across the rest of the dialog. */
.z-country-eyebrow{ font-size:11px !important; }
.z-country-head h3{ font-size:23px !important; }
.z-country-head p{ font-size:14px !important; }
.z-country-x{ font-size:24px !important; }
.z-country-continue{ font-size:16px !important; font-weight:700 !important; }
.z-country-soonmsg{ font-size:13.5px; }
/* ---- Shipment timeline ---- */
.zs-ship-track{ border:1px solid var(--zi-border); border-radius:18px; padding:16px 18px; margin:18px 0;
background:#fff; font-family:var(--zi-body); }
.zs-ship-track-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-bottom:14px; flex-wrap:wrap; }
.zs-ship-track-title{ font-weight:800; color:#241b4d; font-size:15px; }
.zs-ship-track-overall{ font-size:12.5px; font-weight:700; color:#0d7d8f; background:#e3f7fa;
border:1px solid #bfeaf1; border-radius:999px; padding:4px 12px; }
.zs-parcel{ border-top:1px solid #f1ecfb; padding-top:13px; margin-top:13px; }
.zs-parcel:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.zs-parcel-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.zs-parcel-seller{ font-weight:700; color:#241b4d; font-size:13.5px; }
.zs-parcel-company{ font-size:12.5px; color:#6f6690; margin-inline-start:8px; }
.zs-parcel-track{ font-family:monospace; font-size:13px; color:#6a37cc; font-weight:700; }
/* The rail is a background on the list, not a pseudo-element per step, so it
cannot drift out of alignment when a label wraps to two lines. */
.zs-steps{ list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:4px; position:relative; }
.zs-step{ text-align:center; position:relative; padding-top:20px; }
.zs-step::before{ content:""; position:absolute; top:7px; inset-inline-start:0; width:100%; height:2px;
background:#ece5f6; }
.zs-step:first-child::before{ inset-inline-start:50%; width:50%; }
.zs-step:last-child::before{ width:50%; }
.zs-step.is-done::before{ background:#3fd8e8; }
.zs-step-dot{ position:absolute; top:2px; inset-inline-start:calc(50% - 6px); width:12px; height:12px;
border-radius:50%; background:#ece5f6; border:2px solid #fff; box-shadow:0 0 0 1px #ece5f6; }
.zs-step.is-done .zs-step-dot{ background:#3fd8e8; box-shadow:0 0 0 1px #3fd8e8; }
.zs-step.is-current .zs-step-dot{ background:#bf2a80; box-shadow:0 0 0 3px rgba(191,42,128,.22); }
.zs-step-label{ display:block; font-size:11px; color:#6f6690; line-height:1.3; }
.zs-step.is-done .zs-step-label{ color:#241b4d; font-weight:600; }
.zs-step.is-current .zs-step-label{ color:#bf2a80; font-weight:800; }
.zs-parcel-eta{ margin-top:12px; font-size:12.5px; color:#6f6690; }
.zs-parcel-events{ margin-top:10px; font-size:12.5px; }
.zs-parcel-events summary{ cursor:pointer; color:#6a37cc; font-weight:700; }
.zs-parcel-events ul{ list-style:none; margin:9px 0 0; padding:0; }
.zs-parcel-events li{ padding:6px 0; border-bottom:1px solid #f6f2fc; color:#4a4266; }
.zs-event-at{ display:block; font-size:11.5px; color:#a99fc4; }
/* ---- Zeina verified mark (seller shops) ---- */
/* Zeina's own mark rather than a copy of a social-network tick: a rosette in
the brand cyan/violet, not the familiar blue, so it reads as "verified by
this store" and is never mistaken for a platform badge from elsewhere. */
.zss-verified{ display:inline-flex; align-items:center; justify-content:center;
width:1em; height:1em; vertical-align:-.08em; margin-inline-start:6px; }
.zss-verified svg{ width:100%; height:100%; display:block; }
.zss-verified svg path{ fill:#00b8cf; }
.zss-verified svg path.tick{ fill:#fff; }
/* ---- Country picker: live stores as tiles, the rest as a soon strip ---- */
/* The old layout gave every country a full-width row, so two live stores and
four aspirational ones read as one flat list of six equals. Live stores are
the actual choice, so they get side-by-side tiles; everything else drops to a
quiet strip underneath. */
.z-country-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px; margin-bottom:20px; }
.z-country-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:7px; text-align:center; padding:18px 12px !important; border:1.5px solid var(--zi-border);
border-radius:18px !important; background:#fff; cursor:pointer;
transition:border-color .15s, background .15s, box-shadow .15s, transform .12s; }
.z-country-tile:hover{ border-color:#d8c9f7; background:#faf8ff; transform:translateY(-2px);
box-shadow:0 10px 24px rgba(106,55,204,.12); }
/* px, NOT rem: this site sets html{font-size:10px}, so the theme's `.72rem`
rendered these at 7.2px — half the 15px body text and genuinely unreadable.
Every size in this modal is stated in px for that reason. */
/* Holds an , not an emoji: Windows ships no flag glyphs, so 🇸🇦/🇪🇬 used
to render as a boxed "SA"/"EG" for every Windows visitor. font-size:0 kills
the phantom line-box the old 38px emoji needed, so the tile hugs the image. */
.z-country-tile .z-tile-flag{ font-size:0; line-height:0; display:inline-flex; }
.z-country-tile .z-tile-flag img{ box-shadow:0 1px 3px rgba(36,27,77,.18); }
.z-country-tile .z-tile-name{ font-family:'Cairo',sans-serif; font-weight:800; font-size:17px; color:#241b4d; }
.z-country-tile .z-tile-tag{ font-family:'Cairo',sans-serif; font-size:12.5px; font-weight:700;
padding:6px 14px; border-radius:999px; background:#f1ecfb; color:#6a37cc; border:1px solid #e2d8fb; }
/* The store you are in is stated, not offered. */
.z-country-tile.is-current{ border-color:#bf2a80; background:#fdf0f9; cursor:default; }
.z-country-tile.is-current:hover{ transform:none; box-shadow:none; }
.z-country-tile.is-current .z-tile-tag{ background:var(--zi-cta-grad); color:#fff; border:none; }
.z-soon-block{ border-top:1px solid var(--zi-border); padding-top:15px; margin-bottom:16px; }
/* Legibility, not decoration: the heading was #a99fc4, about 2.5:1 against
white — well below the 4.5:1 AA floor. #6f6690 is ~5.3:1, which passes. */
.z-soon-title{ display:block; font-family:'Cairo',sans-serif; font-size:13.5px; font-weight:700;
letter-spacing:.4px; color:#6f6690; margin-bottom:11px; }
/* Grid, not flex-wrap: wrapping sized each chip to its own text, so four
countries broke 3 + 1 and left "الولايات المتحدة" orphaned on a ragged
second row. Equal-width cells always land in even rows. */
.z-soon-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
/* Chips are tappable, so they also need a comfortable hit target — 44px is the
platform minimum and the old 6px padding fell well short of it. */
.z-soon-chip{ display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
font-family:'Cairo',sans-serif; font-size:15px; font-weight:600; color:#4a4266;
background:#f7f4fd; border:1px solid #e2d8fb; border-radius:999px;
padding:9px 12px; min-height:44px; min-width:0; text-align:center;
/* Wrap, never ellipsis: at 320px "الولايات المتحدة" was being clipped, and a
truncated country name is worse than a taller chip. Grid stretches both
cells in a row to match, so a two-line name keeps the rows even. */
white-space:normal; line-height:1.25; overflow-wrap:anywhere;
transition:background .15s, color .15s, border-color .15s; }
.z-soon-chip:hover{ background:#f1ecfb; color:#6a37cc; border-color:#d8c9f7; }
.z-soon-chip .z-soon-flag{ font-size:0; line-height:0; display:inline-flex; margin-inline-end:6px; }
.z-country-soonmsg{ font-family:'Cairo',sans-serif; color:#6a37cc; background:#f6f2fe; border-radius:12px; padding:10px 14px; font-size:.85rem; margin-bottom:12px; }
.z-country-continue{ background:var(--zi-cta-grad) !important; border-radius:40px !important; font-family:'Cairo',sans-serif !important;
padding:14px !important; box-shadow:0 10px 24px rgba(191,42,128,.28) !important; transition:filter .15s; }
.z-country-continue:hover{ filter:brightness(1.05); background:var(--zi-cta-grad) !important; }
/* newsletter band (global — sits outside .zsouq) */
.newsletter{ background:linear-gradient(115deg,#241b4d,#3b2a8f 55%,#5b21a8) !important; position:relative; }
.newsletter .newsletter-left h2, .newsletter .need-help .content h2 a{ font-family:'Baloo Bhaijaan 2','Cairo',sans-serif; color:#fff !important; }
.newsletter .newsletter-left span, .newsletter .need-help p{ color:#b9aef5 !important; }
.newsletter .newsletter-email{ border-radius:999px !important; }
.newsletter .newsletter-submit{ background:var(--zi-cta) !important; border:none !important; color:#fff !important; }
.newsletter .need-help .icon svg path{ fill:#62c2d0 !important; }
/* ===================== PRODUCT LISTING / CATEGORY PAGE ===================== */
.zsouq .filter-sidebar{ background:#fff !important; border:1px solid var(--zi-border) !important; border-radius:20px !important; box-shadow:none !important; overflow:hidden; }
.zsouq .filter-sidebar .card-header{ border:none !important; background:transparent !important; }
.zsouq .filter-sidebar .card-title{ font-family:var(--zi-disp); font-weight:800; color:var(--zi-ink); }
.zsouq .filter-accordion .filter-by{ font-family:var(--zi-disp) !important; color:var(--zi-ink) !important; font-size:15px !important; letter-spacing:0 !important; }
.zsouq .cate-menu-active{ padding:8px 10px; border-radius:12px; transition:background .15s; }
.zsouq .cate-menu-active:hover{ background:#f5f2fc; }
.zsouq .filter-list a, .zsouq .filter-list span{ color:#3d3374; font-weight:700; font-size:13px; }
.zsouq .filter-sidebar .badge{ background:#f1ecfb !important; color:#8f83c9 !important; border-radius:8px !important; font-weight:800; }
.zsouq .address-btn{ background:var(--zi-indigo) !important; color:#fff !important; border-radius:999px !important; font-weight:800; border:none !important; }
.zsouq .address-btn:hover{ background:var(--zi-cta) !important; }
.zsouq .noUi-connect{ background:linear-gradient(90deg,#6a37cc,#bf2a80) !important; }
.zsouq .noUi-handle{ border:3px solid #6a37cc !important; border-radius:50% !important; box-shadow:none !important; background:#fff !important; }
.zsouq .formCost .form-control{ border:1.5px solid #e3daf7; border-radius:12px; color:#5b4d99; font-weight:700; text-align:center; }
/* sort bar */
.zs-sortbar{ background:#fff; border:1px solid var(--zi-border); border-radius:20px; padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.zs-sortbar .cnt{ font-size:13px; font-weight:800; color:var(--zi-ink); }
.zs-sortbar .vsep{ width:1px; height:18px; background:var(--zi-border); }
.zs-sortbar .lbl{ font-size:12px; color:var(--zi-mut2); font-weight:700; }
.zs-sortpills{ display:flex; gap:8px; flex-wrap:wrap; }
.zs-sortpills a{ font-size:12.5px; font-weight:800; padding:7px 16px; border-radius:999px; border:1.5px solid var(--zi-border); color:#5b4d99; background:#fff; transition:.15s; }
.zs-sortpills a.on{ background:var(--zi-cta); color:#fff; border-color:transparent; }
.zs-sortpills a:hover{ border-color:var(--zi-purple); color:var(--zi-purple); }
.zs-sortpills a.on:hover{ color:#fff; border-color:transparent; }
/* grid — reuse zs-card but full-width in grid cells */
.zs-listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.zs-listing-grid > .zs-card{ flex:none !important; width:100%; }
/* pagination */
.zsouq .pagination{ justify-content:center; gap:8px; flex-wrap:wrap; }
.zsouq .pagination .page-item .page-link{ min-width:40px; height:40px; border-radius:14px !important; border:1.5px solid #e3daf7; color:#5b4d99; display:flex; align-items:center; justify-content:center; font-weight:800; background:#fff; }
.zsouq .pagination .page-item.active .page-link{ background:var(--zi-cta); border-color:transparent; color:#fff; }
.zsouq .pagination .page-item .page-link:hover{ border-color:var(--zi-purple); color:var(--zi-purple); }
/* ===================== CART PAGE ===================== */
.zs-cart-card{ background:#fff; border:1px solid var(--zi-border); border-radius:20px; overflow:hidden; box-shadow:0 8px 26px rgba(59,42,143,.06); }
.zs-cart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--zi-border); }
.zs-cart-head h4{ margin:0; font-family:var(--zi-disp); font-weight:800; font-size:18px; color:var(--zi-ink); display:flex; align-items:center; gap:8px; }
.zs-cart-dash{ background:var(--zi-cta-grad); color:#fff !important; font-weight:800; font-size:13px; padding:8px 18px; border-radius:999px; }
.zsouq .cart-table table{ width:100%; }
.zsouq .cart-table thead th, .zsouq .cart-table th{ color:var(--zi-mut) !important; font-weight:700; font-size:12.5px; border-color:var(--zi-border) !important; }
.zsouq .cart-table td{ border-color:var(--zi-border) !important; vertical-align:middle; color:var(--zi-ink); }
.zsouq .cart-table .product-price, .zsouq .cart-table .cart-price, .zsouq .cart-table .subtotal{ color:var(--zi-magenta) !important; font-weight:800; }
.zsouq .cart-qty, .zsouq .quantity{ border:1.5px solid #e3daf7; border-radius:12px; }
.zsouq .cart-table .remove-cart, .zsouq .cart-table .delete-btn, .zsouq .cart-table .cart-remove{ color:var(--zi-magenta) !important; }
.zsouq .cart-summary, .zsouq .cart-total-area{ background:var(--zi-page); border:1px solid var(--zi-border); border-radius:16px; }
.zsouq .checkout-btn, .zsouq .btn-checkout{ background:var(--zi-cta) !important; border:none !important; color:#fff !important; border-radius:999px !important; font-weight:800; }
/* empty cart */
.zsouq .cart-empty, .zsouq .empty-cart{ text-align:center; padding:40px; }
/* ===================== PRODUCT DETAILS PAGE ===================== */
.zsouq .product-details{ background:var(--zi-page); }
.zsouq .product-details .route{ display:flex; gap:6px; list-style:none; padding:0; font-size:12.5px; color:var(--zi-mut2); font-weight:600; margin-bottom:18px; }
.zsouq .product-details .route a{ color:var(--zi-cyan3); }
.zsouq .product-details-container{ background:#fff; border:1px solid var(--zi-border); border-radius:24px; padding:clamp(16px,2.4vw,28px); box-shadow:0 8px 26px rgba(59,42,143,.06); }
.zsouq .product-thumbnail-slider img{ border-radius:18px; }
.zsouq .product-item-review .product-title, .zsouq .product-details h1, .zsouq .product-details h2, .zsouq .product-item-review h3{ font-family:var(--zi-disp); color:var(--zi-ink); }
.zsouq .varient-product-price, .zsouq .product-details-price, .zsouq .product-item-review .price{ color:var(--zi-magenta) !important; font-family:var(--zi-disp); font-weight:800; }
.zsouq .product-quantity, .zsouq .quantity-area, .zsouq .quantity{ border:1.5px solid #e3daf7 !important; border-radius:12px; }
.zsouq .product-item-review .buy-now, .zsouq .product-details .buy-now{ border-radius:999px !important; }
/* seller/store box */
.zsouq .product-seller, .zsouq .seller-info, .zsouq .product-details-seller{ background:var(--zi-page); border:1px solid var(--zi-border); border-radius:16px; }
/* tabs */
.zsouq .nav-tabs .nav-link.active, .zsouq .product-details-tab .active{ color:var(--zi-magenta) !important; border-color:var(--zi-magenta) !important; }
.zsouq .nav-tabs .nav-link{ font-family:var(--zi-disp); font-weight:700; color:var(--zi-mut); }
/* related products heading + cards inherit global reskin */
.zsouq .related-product .section-title h3, .zsouq .related-product h3{ font-family:var(--zi-disp); color:var(--zi-ink); }
/* review stars */
.zsouq .review-content .ratting i, .zsouq .rate-star i{ color:var(--zi-star); }
.zsouq .add-review-btn{ background:var(--zi-cta) !important; border:none !important; color:#fff !important; border-radius:999px !important; font-weight:800; }
/* ---- product details, design-matched reskin ---- */
.zsouq .product-details-container{ background:transparent; border:none; box-shadow:none; padding:0; }
.zsouq .qv-lg-image, .zsouq .product-thumbnail-slider .swiper-slide img, .zsouq .product-details .zoom-image, .zsouq .product-preview img{ border-radius:24px !important; }
.zsouq .product-thumbnail-slider, .zsouq .product-gallery-thumb img, .zsouq .gallery-thumb img{ border-radius:14px !important; }
.zsouq .product-item-review .ratting{ color:var(--zi-star); }
/* price block -> blush gradient card */
.zsouq .product-price.price-section{ background:linear-gradient(115deg,#fdf0f9,#f3ecfd); border:1px solid #f3d8ec; border-radius:18px;
padding:16px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.zsouq .product-price.price-section span, .zsouq .varient-product-price{ font-family:var(--zi-disp); font-size:30px; font-weight:800; color:var(--zi-magenta) !important; }
.zsouq .product-price.price-section del{ font-size:17px; color:#a89cd8 !important; }
/* variant groups */
.zsouq .product-colors{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.zsouq .product-colors > span:first-child{ font-size:13.5px; font-weight:800; color:#3d3374; }
.zsouq .product-colors .attribute-select + label, .zsouq .product-colors label.btn{ min-width:52px; text-align:center; padding:9px 16px !important;
border-radius:14px !important; font-size:13px; font-weight:800; border:1.5px solid var(--zi-border) !important; color:#3d3374 !important; background:#fff !important; margin:0 6px 6px 0; }
.zsouq .product-colors .attribute-select:checked + label, .zsouq .product-colors label.btn.active{ background:var(--zi-cta) !important; color:#fff !important; border-color:transparent !important; }
/* Compact, professional attribute rows: inline «label: value(s)» on one line with
smaller refined chips — instead of a tall stacked block (much shorter PDP). */
.zsouq .product-colors{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:8px; }
.zsouq .product-colors > span:first-child{ font-size:13px; font-weight:700; color:#5c5673; margin:0; white-space:nowrap; }
.zsouq .product-colors .variant{ display:inline-flex; flex-wrap:wrap; gap:6px; margin:0; }
.zsouq .product-colors .attribute-select + label, .zsouq .product-colors label.btn{
padding:5px 13px !important; border-radius:9px !important; font-size:12.5px !important; font-weight:700 !important;
min-width:auto !important; margin:0 !important; }
/* Product-page «كل الحاجات» links → same clean purple text style as the storefront
section headers (was a pink button on Top Products and a grey link on Related). */
.section-title .view-more-btn, .card-header .view-all-btn{
display:inline-flex !important; align-items:center; gap:6px;
background:none !important; background-image:none !important; box-shadow:none !important;
padding:0 !important; margin:0; border:0 !important; border-radius:0 !important;
font-family:var(--zi-body); font-size:13px !important; font-weight:800 !important;
color:var(--zi-purple) !important; white-space:nowrap; }
.section-title .view-more-btn:hover, .card-header .view-all-btn:hover{ color:var(--zi-magenta) !important; filter:none !important; }
.section-title .view-more-btn i, .card-header .view-all-btn i{ color:inherit; font-size:12px; }
html[dir="rtl"] .section-title .view-more-btn i{ transform:scaleX(-1); }
.section-title .view-more-btn::after, .section-title .view-more-btn::before{ display:none !important; }
/* qty */
.zsouq .quantity-area, .zsouq .product-quantity-area{ border:1.5px solid #e3daf7; border-radius:999px; overflow:hidden; }
.zsouq .product-quantity{ border:1.5px solid #e3daf7 !important; border-radius:12px; text-align:center; font-weight:800; color:var(--zi-ink); }
/* action buttons */
.zsouq .product-item-review .buy-now, .zsouq .buy-now-btn, .zsouq .quick-buy-btn{ border-radius:999px !important; font-weight:800 !important; padding:13px 26px !important; }
.zsouq .buy-now.addtocartbtn, .zsouq .quick-buy-btn{ background:var(--zi-cta) !important; color:#fff !important; border:none !important; box-shadow:0 8px 22px rgba(224,24,158,.3); }
.zsouq .buy-with-whatsapp{ background:#25D366 !important; color:#fff !important; border-radius:999px !important; font-weight:800 !important; }
/* tabs */
.zsouq .nav-tabs, .zsouq .product-tab-nav{ border-bottom:1px solid var(--zi-border); gap:4px; }
.zsouq .nav-tabs .nav-link{ font-family:var(--zi-disp); font-weight:800; color:var(--zi-mut); border:none; border-bottom:3px solid transparent; }
.zsouq .nav-tabs .nav-link.active{ color:var(--zi-magenta) !important; border-bottom-color:var(--zi-magenta) !important; background:transparent; }
.zsouq .product-details-tab, .zsouq .tab-content{ background:#fff; border:1px solid var(--zi-border); border-radius:24px; overflow:hidden; }
/* related products sidebar/rail cards inherit the global product-item reskin */
.zsouq .product-details-sidebar .product-item, .zsouq .related-product .product-item{ border-radius:20px; }
/* trust badges row (added markup) */
.zs-pdp-trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.zs-pdp-trust .it{ background:#fff; border:1px solid var(--zi-border); border-radius:16px; padding:12px; display:flex; align-items:center; gap:10px; }
.zs-pdp-trust .it .msr{ font-size:22px; color:var(--zi-cyan); }
.zs-pdp-trust .it b{ font-size:12px; font-weight:800; color:var(--zi-ink); display:block; }
.zs-pdp-trust .it span{ font-size:10.5px; color:var(--zi-mut2); }
/* seller card (added markup) */
.zs-pdp-seller{ background:#fff; border:1px solid var(--zi-border); border-radius:18px; padding:14px 16px; display:flex; align-items:center; gap:12px; margin-top:6px; }
.zs-pdp-seller .av{ width:52px; height:52px; border-radius:18px; background:linear-gradient(140deg,#3b2a8f,#6a37cc); display:flex; align-items:center; justify-content:center; font-family:var(--zi-disp); font-size:22px; font-weight:800; color:#fff; overflow:hidden; flex-shrink:0; }
.zs-pdp-seller .av img{ width:100%; height:100%; object-fit:cover; }
.zs-pdp-seller .nm{ flex:1; min-width:0; }
.zs-pdp-seller .nm b{ font-size:14px; font-weight:800; color:var(--zi-ink); display:block; }
.zs-pdp-seller .nm span{ font-size:11.5px; color:var(--zi-mut2); }
.zs-pdp-seller .visit{ background:var(--zi-indigo); color:#fff; font-size:12px; font-weight:800; padding:9px 18px; border-radius:999px; white-space:nowrap; }
.zs-pdp-seller .visit:hover{ background:var(--zi-cta); color:#fff; }
/* ===================== CHECKOUT PAGE ===================== */
.zsouq .card{ background:#fff !important; border:1px solid var(--zi-border) !important; border-radius:20px !important; box-shadow:0 8px 26px rgba(59,42,143,.06) !important; }
.zsouq .card-header{ background:transparent !important; border-bottom:1px solid var(--zi-border) !important; }
.zsouq .card-title, .zsouq .checkout-form-content h5{ font-family:var(--zi-disp); font-weight:800; color:var(--zi-ink); }
.zsouq .checkout-tab .nav-link{ font-family:var(--zi-disp); font-weight:800; color:var(--zi-mut) !important; border-radius:12px !important; border:1px solid var(--zi-border); }
.zsouq .checkout-tab .nav-link.active{ background:var(--zi-cta) !important; color:#fff !important; border-color:transparent !important; }
.zsouq .address-card{ border:1.5px solid var(--zi-border) !important; border-radius:16px !important; transition:border-color .15s; }
.zsouq .address-card:hover{ border-color:#c9b3f5 !important; }
.zsouq .user-address-input:checked + label .address-card, .zsouq .address-card.selected{ border-color:var(--zi-magenta) !important; }
.zsouq .form-control, .zsouq .form-select{ border-radius:12px !important; border:1.5px solid #e3daf7 !important; }
.zsouq .form-control:focus, .zsouq .form-select:focus{ border-color:var(--zi-purple) !important; box-shadow:0 0 0 3px rgba(123,47,247,.12) !important; }
.zsouq .place-order-btn, .zsouq .checkout-btn, .zsouq .form-submit-btn, .zsouq .confirm-order-btn{ background:var(--zi-cta) !important; border:none !important; color:#fff !important; border-radius:999px !important; font-weight:800; }
.zsouq .order-summary, .zsouq .checkout-summary, .zsouq .order-details, .zsouq .cart-summary{ background:var(--zi-page); border:1px solid var(--zi-border); border-radius:18px; }
.zsouq .payment-method-item, .zsouq .custom-payment, .zsouq .payment-card{ border:1.5px solid var(--zi-border) !important; border-radius:14px !important; }
.zsouq .payment-method-item:hover, .zsouq .custom-payment:hover{ border-color:#c9b3f5 !important; }
/* =========================================================================
Seller store page (.zss-) — souq styling for seller.store.visit
========================================================================= */
.zss-hero{position:relative;overflow:hidden;height:clamp(170px,24vw,290px);background:var(--zi-ink);}
.zss-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.zss-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,27,77,.12),rgba(36,27,77,.72));}
.zss-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}
.zss-card{position:relative;z-index:2;margin-top:clamp(-80px,-6vw,-60px);background:#fff;border:1px solid var(--zi-border);
border-radius:24px;box-shadow:0 16px 44px rgba(36,27,77,.15);padding:clamp(18px,3vw,26px);}
.zss-top{display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.zss-id{display:flex;align-items:center;gap:16px;flex:1;min-width:240px;}
.zss-logo{width:86px;height:86px;border-radius:22px;object-fit:cover;border:3px solid #fff;
box-shadow:0 8px 20px rgba(36,27,77,.16);background:#fff;flex:0 0 auto;}
.zss-name{font-family:var(--zi-disp);font-weight:800;font-size:clamp(20px,2.4vw,27px);color:var(--zi-ink);margin:0;line-height:1.2;}
.zss-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px;color:var(--zi-mut);font-size:13px;}
.zss-meta .rate{display:inline-flex;align-items:center;gap:4px;color:var(--zi-ink);font-weight:700;}
.zss-meta .rate .msr{color:var(--zi-star);font-size:17px;}
.zss-stats{display:flex;gap:10px;}
.zss-stat{background:var(--zi-page);border-radius:16px;padding:10px 20px;text-align:center;min-width:90px;}
.zss-stat b{display:block;font-size:20px;font-weight:800;color:var(--zi-ink);line-height:1;}
.zss-stat span{font-size:11.5px;color:var(--zi-mut);}
.zss-actions{display:flex;gap:10px;align-items:center;}
.zss-follow{display:inline-flex;align-items:center;gap:7px;background:var(--zi-cta-grad);color:#fff;font-family:var(--zi-body);
font-weight:800;font-size:14px;padding:12px 22px;border-radius:40px;border:none;box-shadow:0 8px 20px rgba(191,42,128,.28);}
.zss-follow:hover{color:#fff;filter:brightness(1.05);}
.zss-chat{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
border:1.5px solid var(--zi-border);color:var(--zi-purple);font-size:20px;background:#fff;}
.zss-chat:hover{background:var(--zi-purple);color:#fff;border-color:var(--zi-purple);}
.zss-desc{margin-top:16px;color:var(--zi-mut);font-size:14px;line-height:1.8;}
.zss-contact{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;padding-top:16px;border-top:1px solid var(--zi-border);}
.zss-contact a{display:inline-flex;align-items:center;gap:8px;color:var(--zi-ink);font-size:13.5px;font-weight:600;}
.zss-contact .msr{color:var(--zi-purple);font-size:18px;}
/* Bottom padding was 0, so a section's last card row butted straight into the
next section with nothing between them. */
.zss-sec{padding:clamp(28px,4vw,46px) 0 clamp(30px,4vw,48px);}
/* The white rounded panel holding the product grid had `padding:0`, so the
cards sat 1px from its border — flush against the panel edge on both sides
and along the top. Scoped to .zss-sec because `.tab-content` is a Bootstrap
class used all over the site. */
.zss-sec .tab-content{padding:clamp(16px,1.8vw,26px);}
.zss-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.zss-h2{font-family:var(--zi-disp);font-weight:800;font-size:clamp(20px,2.4vw,26px);color:var(--zi-ink);margin:0;
display:flex;align-items:center;gap:10px;}
.zss-h2::before{content:"";width:8px;height:26px;border-radius:6px;background:var(--zi-cta-grad);}
.zss-tabs{display:flex;gap:8px;}
.zss-tab{border:1.5px solid var(--zi-border);background:#fff;color:var(--zi-ink);font-family:var(--zi-body);font-weight:700;
font-size:13px;padding:8px 18px;border-radius:40px;cursor:pointer;}
.zss-tab.active{background:var(--zi-cta-grad);color:#fff;border-color:transparent;}
/* 18px between 212px cards read as a rigid lattice — the cards looked glued to
one another. Row gap is larger than column gap on purpose: rows carry a full
card's height between them and need more air to separate visually. */
.zss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
column-gap:clamp(16px,1.6vw,22px);row-gap:clamp(26px,2.6vw,34px);}
.zss-pag{display:flex;justify-content:center;margin-top:26px;}
@media(max-width:600px){
.zss-card{margin-top:-56px;}
.zss-logo{width:64px;height:64px;border-radius:16px;}
.zss-stats{width:100%;}
.zss-stat{flex:1;min-width:0;padding:8px;}
.zss-grid{grid-template-columns:repeat(2,1fr);column-gap:12px;row-gap:22px;}
.zss-head{flex-direction:column;align-items:flex-start;}
}
/* store page: digital product card + related-shop card */
.zss-dcard{background:#fff;border:1px solid var(--zi-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;}
.zss-dcard img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.zss-dcard .b{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.zss-dcard .nm{font-size:13.5px;font-weight:700;color:var(--zi-ink);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.zss-dcard .pr{color:var(--zi-magenta);font-weight:800;font-size:16px;}
.zss-dcard .dbtn{margin-top:auto;background:var(--zi-indigo);color:#fff;text-align:center;padding:10px;border-radius:12px;font-weight:700;font-size:13px;display:block;}
.zss-dcard .dbtn:hover{background:var(--zi-cta);color:#fff;}
.zss-shop{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--zi-border);border-radius:18px;padding:12px 14px;text-decoration:none;transition:box-shadow .2s,transform .2s;}
.zss-shop:hover{box-shadow:0 12px 30px rgba(36,27,77,.14);transform:translateY(-2px);}
.zss-shop-logo{width:54px;height:54px;border-radius:14px;object-fit:cover;border:1px solid var(--zi-border);flex:0 0 auto;background:#fff;}
.zss-shop b{color:var(--zi-ink);font-size:14px;display:block;line-height:1.3;}
.zss-shop .rate{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--zi-mut);}
.zss-shop .rate .msr{color:var(--zi-star);font-size:14px;}
.zss-shop .go{margin-inline-start:auto;color:var(--zi-purple);}
/* =========================================================================
Auth — sliding two-panel card (.zauth-) souq style
========================================================================= */
.zauth-sec{ min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center;
padding:clamp(24px,5vw,60px) 16px; background:
radial-gradient(900px 420px at 12% -10%, #efeafe 0%, transparent 60%),
radial-gradient(760px 420px at 90% 110%, #fdeaf5 0%, transparent 60%), var(--zi-page); }
/* z-index:0 is load-bearing, not cosmetic. It makes the card its OWN stacking
context, so the panes and the purple overlay stack against each other inside
it instead of against the page. Without it .zauth-overlay's z-index:100 beat
the sticky header's 50 and the promo panel scrolled over the search bar. */
.zauth-card{ position:relative; z-index:0; width:min(980px,96vw); min-height:600px; background:#fff;
border-radius:28px; overflow:hidden; box-shadow:0 30px 80px rgba(36,27,77,.22); }
/* form panes
Stacked in ONE grid cell rather than absolutely positioned. Absolute panes are
taken out of flow, so nothing could push the card past its min-height:600px —
the signup form needs 665px, and the last 65px, submit button included, was
simply clipped. The customer had to scroll INSIDE the card to find the button.
A taller fixed height would have been the obvious fix and the wrong one: this
form grows with the language, with a validation message under any field, and
with the password-strength bar appearing. The grid makes the card as tall as
its tallest pane, whatever that turns out to be, so it cannot clip again.
Sharing one cell also keeps the two panes exactly overlaid, which is what the
slide relies on — the transforms below are untouched. */
.zauth-forms{ display:grid; align-items:stretch; }
.zauth-pane{ grid-area:1 / 1; width:50%; min-height:100%;
display:flex; flex-direction:column; justify-content:center; gap:8px;
padding:clamp(28px,3.4vw,48px); transition:transform .6s ease-in-out, opacity .5s ease-in-out; }
.zauth-pane::-webkit-scrollbar{ width:0; }
.zauth-pane-signin{ z-index:2; opacity:1; }
.zauth-pane-signup{ z-index:1; opacity:0; }
.zauth-pane-forgot{ z-index:0; opacity:0; pointer-events:none; }
.zauth-card.is-signup .zauth-pane-signin{ transform:translateX(100%); opacity:0; z-index:1; }
.zauth-card.is-signup .zauth-pane-signup{ transform:translateX(100%); opacity:1; z-index:5; }
.zauth-card.is-forgot .zauth-pane-forgot{ opacity:1; z-index:6; pointer-events:auto; }
.zauth-card.is-forgot .zauth-pane-signin{ opacity:0; z-index:1; pointer-events:none; }
.zauth-logo{ display:block; margin-bottom:6px; }
.zauth-logo img{ height:40px; width:auto; }
.zauth-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.14em; color:#6a37cc; }
.zauth-title{ font-family:var(--zi-disp); font-weight:800; font-size:clamp(24px,2.6vw,32px); color:var(--zi-ink); margin:2px 0 0; }
.zauth-sub{ color:var(--zi-mut); font-size:14px; margin:0 0 6px; }
.zauth-form{ display:flex; flex-direction:column; gap:5px; }
.zauth-label{ font-size:12.5px; font-weight:700; color:var(--zi-ink); margin:8px 0 2px; }
.zauth-field{ position:relative; display:flex; align-items:center; }
.zauth-field .msr:not(.zauth-eye){ position:absolute; inset-inline-start:14px; color:var(--zi-mut2); font-size:20px; pointer-events:none; }
.zauth-field input{ width:100%; height:50px; border:1.5px solid var(--zi-border); border-radius:14px;
background:#fbfaff; padding:0 44px; font-family:var(--zi-body); font-size:14px; color:var(--zi-ink); transition:border-color .15s, background .15s; }
.zauth-field input:focus{ outline:none; border-color:#bf2a80; background:#fff; box-shadow:0 0 0 4px rgba(191,42,128,.08); }
.zauth-eye{ position:absolute; inset-inline-start:auto; inset-inline-end:12px; z-index:3; pointer-events:auto; background:none; border:none; color:var(--zi-mut2); font-size:20px; cursor:pointer; }
/* Arabic: mirror the field affordances — mail/lock icons on the RIGHT, eye on the
LEFT. (Logical inset props don't flip inside this nested-dir card, so force it.) */
html[dir="rtl"] .zauth-field .msr:not(.zauth-eye){ left:auto; right:14px; }
html[dir="rtl"] .zauth-eye{ right:auto; left:12px; }
/* Back button (forgot pane) */
.zauth-back{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; margin-bottom:16px;
color:#6a37cc; font-family:var(--zi-body); font-size:13px; font-weight:700; cursor:pointer; align-self:flex-start; }
.zauth-back:hover{ color:#bf2a80; }
.zauth-back .msr{ font-size:18px; transform:scaleX(-1); }
html[dir="rtl"] .zauth-back .msr{ transform:none; }
.zauth-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.zauth-row{ display:flex; justify-content:flex-start; margin:6px 0 2px; }
.zauth-link{ color:#6a37cc; font-size:12.5px; font-weight:700; }
.zauth-link:hover{ color:#bf2a80; }
.zauth-btn{ margin-top:14px; height:52px; border:none; border-radius:40px; background:var(--zi-cta-grad); color:#fff;
font-family:var(--zi-body); font-weight:800; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
cursor:pointer; box-shadow:0 10px 24px rgba(191,42,128,.26); transition:filter .15s, transform .1s; }
.zauth-btn:hover{ filter:brightness(1.05); } .zauth-btn:active{ transform:translateY(1px); }
.zauth-btn .msr{ font-size:19px; }
.zauth-or{ display:flex; align-items:center; gap:12px; color:var(--zi-mut); font-size:12.5px; margin:16px 0 12px; }
.zauth-or::before,.zauth-or::after{ content:""; flex:1; height:1px; background:var(--zi-border); }
.zauth-social{ display:flex; gap:10px; }
.zauth-soc{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; border:1.5px solid var(--zi-border);
border-radius:12px; color:var(--zi-ink); font-weight:700; font-size:13.5px; background:#fff; transition:border-color .15s, background .15s; }
.zauth-soc:hover{ border-color:#d8c9f7; background:#faf8ff; color:var(--zi-ink); }
.zauth-check{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--zi-mut); cursor:pointer; }
.zauth-check input{ width:17px; height:17px; accent-color:#bf2a80; }
.zauth-switch-m{ display:none; text-align:center; margin-top:16px; font-size:13.5px; color:var(--zi-mut); }
.zauth-switch-m a{ color:#bf2a80; font-weight:800; }
/* gradient CTA side */
.zauth-overlay{ position:absolute; top:0; left:50%; width:50%; height:100%; overflow:hidden; z-index:100;
transition:transform .6s ease-in-out; background:linear-gradient(140deg,#3b2a8f 0%,#6a37cc 52%,#bf2a80 100%); }
.zauth-card.is-signup .zauth-overlay{ transform:translateX(-100%); }
.zauth-ov-inner{ position:absolute; inset:0; }
.zauth-orb{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.35; }
.zauth-orb.o1{ width:200px; height:200px; background:#e57ac0; top:-50px; inset-inline-end:-40px; }
.zauth-orb.o2{ width:150px; height:150px; background:#62c2d0; bottom:20px; inset-inline-start:-30px; opacity:.28; }
.zauth-ov-panel{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:0 clamp(24px,3.4vw,52px); color:#fff; transition:opacity .5s ease-in-out; }
/* Both panels are stacked; the hidden one must not swallow clicks meant for the
visible one (this is what made "Create account" do nothing). */
.zauth-ov-signin{ opacity:1; pointer-events:auto; } .zauth-ov-signup{ opacity:0; pointer-events:none; }
.zauth-card.is-signup .zauth-ov-signin{ opacity:0; pointer-events:none; } .zauth-card.is-signup .zauth-ov-signup{ opacity:1; pointer-events:auto; }
.zauth-ov-eye{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; letter-spacing:.08em; color:#c9f0f6; }
.zauth-ov-panel h2{ font-family:var(--zi-disp); font-weight:800; font-size:clamp(24px,2.6vw,32px); color:#fff; margin:12px 0 8px; }
.zauth-ov-panel p{ color:rgba(255,255,255,.85); font-size:14px; line-height:1.8; max-width:320px; margin:0 0 22px; }
.zauth-ghost{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1.6px solid rgba(255,255,255,.65);
color:#fff; font-family:var(--zi-body); font-weight:800; font-size:14px; padding:13px 30px; border-radius:40px; cursor:pointer; transition:background .15s; }
.zauth-ghost:hover{ background:rgba(255,255,255,.26); }
.zauth-weave{ position:absolute; left:0; right:0; bottom:0; height:6px; opacity:.7;
background:repeating-linear-gradient(90deg,#62c2d0 0 40px,transparent 40px 48px,#e57ac0 48px 88px,transparent 88px 96px,#fff 96px 136px,transparent 136px 144px); }
@media(max-width:991px){
.zauth-card{ width:min(460px,96vw); min-height:0; box-shadow:0 20px 50px rgba(36,27,77,.18); }
.zauth-overlay{ display:none; }
.zauth-pane{ position:relative; width:100%; height:auto; opacity:1 !important; transform:none !important; overflow:visible; }
.zauth-pane-signup,.zauth-pane-forgot{ display:none; }
.zauth-card.is-signup .zauth-pane-signin{ display:none; }
.zauth-card.is-signup .zauth-pane-signup{ display:flex; }
.zauth-card.is-forgot .zauth-pane-forgot{ display:flex; }
.zauth-card.is-forgot .zauth-pane-signin{ display:none; }
.zauth-switch-m{ display:block; }
}
/* ---- Out of stock (auto) on product cards ---- */
.zs-card-oos{ position:absolute; top:10px; inset-inline-start:10px; z-index:3;
background:rgba(36,27,77,.82); color:#fff; font-family:var(--zi-body); font-weight:800;
font-size:11.5px; padding:5px 12px; border-radius:999px; letter-spacing:.02em; backdrop-filter:blur(2px); }
.zs-card--oos .zs-card-img img{ filter:grayscale(.7) opacity(.72); }
.zs-card--oos .zs-card-fav{ opacity:.7; }
.zs-card-add--oos{ background:#efeaf6 !important; color:#8a7fb0 !important; cursor:not-allowed;
box-shadow:none !important; }
.zs-card-add--oos:hover{ filter:none !important; }
/* ---- Sell with us (footer band) ---- */
.zs-sell-cta{ background:linear-gradient(120deg,#3b2a8f,#6a37cc 55%,#bf2a80); }
.zs-sell-cta .in{ max-width:1280px; margin:0 auto; padding:22px clamp(16px,4vw,48px); display:flex;
align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.zs-sell-cta .eye{ display:inline-flex; align-items:center; gap:7px; color:#c9f0f6; font-size:12px; font-weight:800; letter-spacing:.06em; }
.zs-sell-cta h3{ font-family:var(--zi-disp); color:#fff; font-size:clamp(18px,2.2vw,24px); font-weight:800; margin:6px 0 3px; }
.zs-sell-cta p{ color:rgba(255,255,255,.85); font-size:13.5px; margin:0; }
.zs-sell-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#6a37cc;
font-family:var(--zi-body); font-weight:800; font-size:14px; padding:13px 26px; border-radius:40px;
white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.18); transition:transform .12s; }
.zs-sell-btn:hover{ color:#bf2a80; transform:translateY(-2px); }
@media(max-width:640px){ .zs-sell-cta .in{ flex-direction:column; align-items:flex-start; } .zs-sell-btn{ width:100%; justify-content:center; } }
/* ---- Track order page ---- */
.zs-track-sec{ padding:48px 0 72px; }
.zs-track-hero{ text-align:center; max-width:640px; margin:0 auto 26px; }
.zs-track-eye{ display:inline-flex; align-items:center; gap:7px; color:#6a37cc; background:#efeaf9;
font-weight:800; font-size:12px; letter-spacing:.04em; padding:7px 16px; border-radius:999px; }
.zs-track-eye .msr{ font-size:17px; }
.zs-track-title{ font-family:var(--zi-disp); font-size:clamp(26px,4vw,40px); font-weight:800;
color:var(--zi-ink,#241b4d); margin:14px 0 8px; }
.zs-track-sub{ color:#6f6690; font-size:15px; line-height:1.7; margin:0; }
.zs-track-form{ max-width:820px; margin:0 auto; background:#fff; border:1px solid #efe9f7;
border-radius:22px; box-shadow:0 18px 46px rgba(58,34,120,.08); padding:22px clamp(18px,3vw,30px);
display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end; }
.zs-track-field{ display:flex; flex-direction:column; gap:8px; }
.zs-track-field label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#4a4266; }
.zs-track-field label .msr{ font-size:17px; color:#8a7fb0; }
.zs-track-field label .req{ color:#bf2a80; }
.zs-track-form input{ width:100%; height:52px; border:1.5px solid #e7e0f2; border-radius:14px;
padding:0 16px; font-family:var(--zi-body); font-size:15px; color:#241b4d; background:#faf8fe; transition:.15s; }
.zs-track-form input::placeholder{ color:#a99fc4; }
.zs-track-form input:focus{ outline:none; border-color:#6a37cc; background:#fff; box-shadow:0 0 0 4px rgba(106,55,204,.12); }
.zs-track-btn{ height:52px; padding:0 26px; border:none; border-radius:14px; cursor:pointer;
background:linear-gradient(120deg,#6a37cc,#bf2a80); color:#fff; font-family:var(--zi-body); font-weight:800;
font-size:15px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:transform .12s, box-shadow .12s; }
.zs-track-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(106,55,204,.32); }
@media(max-width:760px){ .zs-track-form{ grid-template-columns:1fr; } .zs-track-btn{ width:100%; justify-content:center; } }
/* ---- Password strength meter (auth) ---- */
.zauth-pw{ margin:-4px 0 6px; display:flex; align-items:center; gap:10px; }
.zauth-pw-bar{ flex:1; height:6px; border-radius:999px; background:#ece5f6; overflow:hidden; }
/* Scaled, not widened: this animates on every keystroke, and width forces a
layout pass each time where transform is composited. The span is a solid
colour block, so scaleX distorts nothing. */
.zauth-pw-bar span{ display:block; height:100%; width:100%; border-radius:999px;
transform:scaleX(0); transform-origin:left; transition:transform .25s, background .25s; }
/* The bar must still fill from the side the text starts on. */
html[dir="rtl"] .zauth-pw-bar span{ transform-origin:right; }
.zauth-pw-label{ font-size:12px; font-weight:700; min-width:64px; text-align:end; }
/* ---- Attribute filter facets (shop sidebar) ---- */
.zs-facet{ margin:6px 0 14px; }
.zs-facet .filter-by{ color:#6a37cc; }
.zs-facet-list{ display:flex; flex-direction:column; gap:2px; }
.zs-facet-scroll{ max-height:190px; overflow-y:auto; padding-inline-end:6px; }
.zs-facet-scroll::-webkit-scrollbar{ width:6px; }
.zs-facet-scroll::-webkit-scrollbar-thumb{ background:#e0d7f2; border-radius:999px; }
.zs-facet-item{ display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:9px;
cursor:pointer; font-size:13.5px; color:#4a4266; transition:background .12s; }
.zs-facet-item:hover{ background:#f6f2fc; }
.zs-facet-item input{ width:17px; height:17px; accent-color:#6a37cc; cursor:pointer; flex-shrink:0; }
.zs-facet-item span{ line-height:1.3; }
/* ---- "Use my location" button (checkout) ---- */
.zs-geo-btn{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; border:1.5px dashed #b79ee8;
background:#f7f2fe; color:#6a37cc; font-family:var(--zi-body); font-weight:700; font-size:13.5px;
padding:9px 16px; border-radius:12px; cursor:pointer; transition:background .15s, border-color .15s; }
.zs-geo-btn:hover:not(:disabled){ background:#efe7fc; border-color:#6a37cc; }
.zs-geo-btn:disabled{ opacity:.75; cursor:progress; }
.zs-geo-btn .msr{ font-size:18px; }
.zs-geo-spin{ animation:zsGeoSpin 1s linear infinite; }
@keyframes zsGeoSpin{ to{ transform:rotate(360deg); } }
/* ---- Personal coupon banner (abandoned-cart discount on cart/checkout) ---- */
.zs-personal-coupon{ display:flex; align-items:center; justify-content:space-between; gap:12px;
background:linear-gradient(120deg,#fdf2f9,#f3eefc); border:1.5px dashed #bf2a80; border-radius:16px;
padding:12px 14px; flex-wrap:wrap; }
.zs-pc-info{ display:flex; align-items:center; gap:10px; }
.zs-pc-gift{ font-size:26px; line-height:1; }
.zs-pc-title{ font-family:var(--zi-body); font-weight:800; color:#6a37cc; font-size:14.5px; }
.zs-pc-code{ font-size:12.5px; color:#7d6f9e; margin-top:2px; }
.zs-pc-code strong{ color:#bf2a80; letter-spacing:.5px; }
.zs-pc-apply{ display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer;
background:linear-gradient(120deg,#bf2a80,#6a37cc); color:#fff; font-family:var(--zi-body);
font-weight:800; font-size:13.5px; padding:10px 18px; border-radius:30px; white-space:nowrap;
transition:transform .12s, box-shadow .12s; }
.zs-pc-apply:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(191,42,128,.3); }
.zs-pc-apply .msr{ font-size:17px; }
@media(max-width:520px){ .zs-personal-coupon{ flex-direction:column; align-items:stretch; } .zs-pc-apply{ justify-content:center; } }
/* ---- Personal coupon banner on the cart page ---- */
.zs-cart-coupon{ display:flex; align-items:center; justify-content:space-between; gap:14px;
background:linear-gradient(120deg,#241b4d,#6a37cc); border-radius:18px; padding:16px 20px;
margin-bottom:18px; flex-wrap:wrap; }
.zs-cart-coupon .l{ display:flex; align-items:center; gap:12px; }
.zs-cart-coupon .g{ font-size:30px; }
.zs-cart-coupon .t{ color:#fff; font-family:var(--zi-disp); font-weight:800; font-size:16px; }
.zs-cart-coupon .s{ color:rgba(255,255,255,.82); font-size:13px; margin-top:2px; }
.zs-cart-coupon .s strong{ color:#ffd6ec; }
.zs-cart-coupon .b{ display:inline-flex; align-items:center; gap:7px; background:#fff; color:#6a37cc;
font-weight:800; font-size:14px; padding:11px 22px; border-radius:30px; white-space:nowrap; }
/* ---- Color swatches on the filter facet ---- */
.zs-swatch{ width:18px; height:18px; border-radius:50%; flex-shrink:0;
border:1.5px solid rgba(0,0,0,.12); box-shadow:inset 0 0 0 2px #fff; }
.zs-facet-item--color span:last-child{ flex:1; }
/* ===================== MOBILE OFFCANVAS MENU (souq polish) ===================== */
#menu-sidebar{ width:min(87vw,368px); background:#fff; border:0; }
#menu-sidebar .sidebar-top{ display:flex; align-items:center; justify-content:space-between;
padding:18px 20px; border-bottom:1px solid #efe9f8; }
#menu-sidebar .sidebar-logo img{ height:38px; width:auto; }
#menu-sidebar .sidebar-closer{ width:38px; height:38px; border-radius:50%; border:0; background:#f4f0fb;
color:var(--zi-ink); display:flex; align-items:center; justify-content:center; font-size:15px; }
#menu-sidebar .sidebar-closer:hover{ background:#ece3fa; }
#menu-sidebar .sidebar-middel-container{ padding:16px 16px 28px; }
/* language + currency row as neat pills */
#menu-sidebar .mt-4.mb-4{ margin:4px 0 18px !important; padding:0 !important; gap:10px !important; }
#menu-sidebar .lang-dropdown .dropdown__button,
#menu-sidebar .sidebar-cur-label{ display:inline-flex; align-items:center; gap:7px; width:100%;
background:#f6f2fd; border:1px solid #ece3fa; border-radius:12px; padding:10px 13px;
font-size:13px; font-weight:700; color:var(--zi-ink); cursor:pointer; }
#menu-sidebar .sidebar-cur-label .msr,
#menu-sidebar .lang-dropdown .msr{ font-size:17px; color:var(--zi-purple); }
#menu-sidebar .lang-dropdown .dropdown_button_icon{ margin-inline-start:auto; color:var(--zi-mut); }
#menu-sidebar .lang-dropdown, #menu-sidebar .currency-dropdown{ flex:1; }
#menu-sidebar .lang-dropdown .dropdown__list{ z-index:20; right:0; left:0; border-radius:12px;
box-shadow:0 12px 30px rgba(60,30,120,.14); border:1px solid #ece3fa; padding:6px; }
#menu-sidebar .lang-dropdown .dropdown__list-item a{ display:block; padding:9px 12px; border-radius:9px;
color:var(--zi-ink); font-weight:600; font-size:13px; }
#menu-sidebar .lang-dropdown .dropdown__list-item a:hover{ background:#f6f2fd; color:var(--zi-magenta); }
/* All Categories button */
#menu-sidebar .mobile-categoryBtn{ display:flex; align-items:center; justify-content:space-between;
background:linear-gradient(90deg,var(--zi-magenta),var(--zi-purple)); color:#fff; border:0;
border-radius:14px; padding:14px 16px; font-weight:800; font-size:14.5px; box-shadow:0 8px 20px rgba(191,42,128,.25); }
#menu-sidebar .mobile-categoryBtn .fa-border-all{ font-size:15px; }
#menu-sidebar .chevron-rotate{ transition:transform .25s; }
#menu-sidebar .mobile-categoryBtn[aria-expanded="true"] .chevron-rotate{ transform:rotate(180deg); }
/* category rows */
#menu-sidebar .browse-categories-items{ list-style:none; padding:8px 0 0; margin:0; }
#menu-sidebar .browse-categories-item > a{ display:flex; align-items:center; justify-content:space-between;
padding:9px 8px; border-radius:12px; color:var(--zi-ink); font-weight:600; font-size:13.5px; }
#menu-sidebar .browse-categories-item > a:hover{ background:#f6f2fd; }
#menu-sidebar .browse-categories-item > a > div{ display:flex; align-items:center; gap:11px; min-width:0; }
#menu-sidebar .browse-categories-item > a > div > span{ flex:0 0 auto; width:40px; height:40px; border-radius:11px;
overflow:hidden; background:#f4f0fb; display:flex; align-items:center; justify-content:center; }
#menu-sidebar .browse-categories-item > a > div > span img{ width:100%; height:100%; object-fit:cover; }
#menu-sidebar .browse-categories-item > a > div{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#menu-sidebar .browse-categories-item:last-child > a{ color:var(--zi-magenta); font-weight:800; }
/* bottom nav links */
#menu-sidebar .sidebar-nav{ list-style:none; padding:0; margin:0; }
#menu-sidebar .sidebar-nav-link{ display:flex; align-items:center; justify-content:space-between;
padding:13px 8px; border-radius:12px; color:var(--zi-ink); font-weight:600; font-size:14px; }
#menu-sidebar .sidebar-nav-link:hover{ background:#f6f2fd; color:var(--zi-magenta); }
#menu-sidebar .sidebar-nav-link > span{ display:flex; align-items:center; gap:12px; }
#menu-sidebar .mobile-nav-icon{ width:34px; height:34px; border-radius:10px; background:#f4f0fb; color:var(--zi-purple);
display:flex; align-items:center; justify-content:center; font-size:15px; }
#menu-sidebar .sidebar-nav-link .fa-chevron-right{ color:#cbbfe6; font-size:12px; }
#menu-sidebar .border-top{ border-top:1px solid #efe9f8 !important; }
/* direction follows ; guarantee RTL wrapper in Arabic */
html[dir="rtl"] .zsouq{ direction:rtl; } html[dir="ltr"] .zsouq{ direction:ltr; }
/* Directional "forward/more" arrows use the arrow_back glyph (points left = forward in RTL).
In English (LTR) flip them so they point right. Only components whose .msr is that arrow. */
html[dir="ltr"] .zs-more .msr,
html[dir="ltr"] .zs-btn-cta .msr,
html[dir="ltr"] .zs-sell-btn .msr{ transform:scaleX(-1); }
/* Hide the hero "quality guaranteed" badge on mobile — it overlaps the carousel and
its absolute-over-Swiper compositing caused a black-box ghost on some Android GPUs.
The trust strip under the hero already carries the message. */
/* "بضاعة مضمونة" badge stays visible on mobile — opaque bg + z-index:6 keep it
on top and prevent the earlier translucent-over-carousel black ghost. */
/* Phone/tablet hero furniture (owner's layout): trust badge floats over the
bottom-LEFT corner, the product name sits bottom-RIGHT (clear of the badge), and
the "خصومات" discount badge moves to the top-RIGHT. */
@media(max-width:991px){
.zs-hero-verified{ position:absolute; bottom:24px; left:2px; right:auto; margin:0; padding:9px 13px; }
.zs-hero-verified b{ font-size:14.5px; }
.zs-hero-verified span{ font-size:9.5px; }
.zs-hero-slidename{ text-align:right; padding:36px 18px 18px 150px; }
.zs-hero-slidebadge{ left:auto; right:16px; }
}
/* Footer social links (Facebook / Instagram / X / TikTok) — quiet circular chips
with brand-colour hover; wrap cleanly so they never crowd the footer. */
.zs-footer-bottom-end{display:flex;align-items:center;gap:clamp(14px,3vw,26px);flex-wrap:wrap;}
.zs-footer-social{display:flex;gap:10px;flex-wrap:wrap;}
.zs-footer-social .zs-social-ico{width:36px;height:36px;}
.zs-footer-social .zs-social-ico{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);border:1px solid rgba(160,107,255,.35);color:#c9bdf0;font-size:16px;text-decoration:none;transition:transform .18s,background .18s,color .18s,border-color .18s;}
.zs-footer-social .zs-social-ico:hover{transform:translateY(-2px);color:#fff;}
.zs-footer-social .zs-social-facebook:hover{background:#1877F2;border-color:#1877F2;}
.zs-footer-social .zs-social-instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;}
.zs-footer-social .zs-social-twitter:hover{background:#000;border-color:#000;}
.zs-footer-social .zs-social-tiktok:hover{background:#000;border-color:#000;}
@media(max-width:640px){ .zs-footer-social{ justify-content:flex-start; } }
/* Imported-stock badge — cross-border items in the Saudi store. Deliberately
a calm slate rather than the sale magenta: it is information, not a promo.
Lives in .zs-card-body (a flex column), no longer over the image, so it can
never cover the product. `align-self:flex-end` is the cross-axis end, which
is the physical LEFT under RTL and the right in English. */
.zs-card-intl{
align-self:flex-end;
position:relative; /* containing block for the tooltip */
cursor:help;
display:inline-flex; align-items:center; gap:4px;
background:rgba(35,27,77,.92); color:#fff;
font-size:10.5px; font-weight:700; line-height:1;
padding:4px 8px; border-radius:999px;
white-space:nowrap;
}
/* Explains what "عالمي" means on hover / focus / tap.
`.zs-card` is overflow:hidden, so the bubble MUST stay inside the card —
hence `inset-inline-end:0` (aligns the bubble's end with the badge's end so
it grows inward, correct in both RTL and LTR) and a max-width under the card
width. A bubble anchored the other way is clipped at the card edge. */
.zs-card-intl::after{
content:attr(data-ztip);
position:absolute; bottom:calc(100% + 6px); inset-inline-end:0;
width:max-content; max-width:148px;
background:#231b4d; color:#fff;
font-size:10px; font-weight:600; line-height:1.55;
text-align:start; white-space:normal;
padding:6px 8px; border-radius:8px;
box-shadow:0 6px 18px rgba(35,27,77,.3);
opacity:0; visibility:hidden; transform:translateY(3px);
transition:opacity .15s ease, transform .15s ease, visibility .15s;
pointer-events:none; z-index:5;
}
.zs-card-intl:hover::after,
.zs-card-intl:focus::after,
.zs-card-intl:focus-visible::after{
opacity:1; visibility:visible; transform:translateY(0);
}
.zs-card-intl:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
/* Mobile menu chips (language · currency · country) — an even wrapping row
instead of a two-column split, which stranded one chip beside a stacked pair. */
#menu-sidebar .zs-side-chips{
display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
}
#menu-sidebar .zs-side-chips > *{ flex:1 1 calc(50% - 5px); min-width:0; }
#menu-sidebar .zs-side-chips .lang-dropdown,
#menu-sidebar .zs-side-chips .currency-dropdown{ display:flex; }
#menu-sidebar .zs-side-chips .sidebar-cur-label{
width:100%; height:100%; justify-content:center; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
}
/* Language chip in the mobile menu — match the country chip exactly so the two
read as a matched pair of controls. */
#menu-sidebar .zs-side-chips .Dropdown{ position:relative; width:100%; }
#menu-sidebar .zs-side-chips .dropdown__button.sidebar-cur-label{
width:100%; justify-content:center; gap:7px; white-space:nowrap;
}
#menu-sidebar .zs-side-chips .dropdown__list{
position:absolute; inset-inline-start:0; top:calc(100% + 6px); z-index:30;
min-width:100%; background:#fff; border:1px solid #ece4f4; border-radius:12px;
box-shadow:0 10px 26px rgba(60,30,90,.14); padding:6px; margin:0; list-style:none;
display:none;
}
#menu-sidebar .zs-side-chips .dropdown__list.dropdown__list_visible{ display:block; }
#menu-sidebar .zs-side-chips .dropdown__list-item a{
display:block; padding:9px 12px; border-radius:8px; color:#2b1b3d; font-size:13.5px;
}
#menu-sidebar .zs-side-chips .dropdown__list-item a:hover{ background:#f3eafa; }
/* Checkout order summary — the totals list was a loose set of flex rows with
a stray colon, uneven padding and a large dead gap under the product. */
.order-summary ul{ list-style:none; padding:0; margin:0; }
.order-summary ul > li.subtotal{
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:10px 4px !important; margin:0; border-bottom:1px dashed #ece4f4;
}
.order-summary ul > li.subtotal:last-of-type{ border-bottom:0; }
.order-summary .zs-sum-lbl{ color:#5b6478; font-size:13.5px; font-weight:600; }
.order-summary .zs-sum-hint{
display:inline-block; margin-inline-start:6px; color:#9aa2b5; font-size:11.5px; font-weight:500;
}
/* amounts stay left-to-right inside the RTL row */
.order-summary ul > li.subtotal > span:last-child{
direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-weight:700; color:#2b1b3d;
}
/* kill the dead space between the product table and the totals */
.order-summary .table-responsive{ margin-bottom:0 !important; }
.order-summary table{ margin-bottom:0 !important; }
/* Dead gap between the product table and the totals: the summary's inner
wrapper carried bottom padding and the
its default block margin. (The
loader is position:absolute, so it was never the cause.) */
.order-summary > div{ padding-bottom:0; margin-bottom:0; }
.order-summary ul{ margin-top:0 !important; }
.order-summary .table-responsive + ul{ margin-top:0; }
/* Checkout form — headings and labels were clipped at the inline-end edge.
Bootstrap rows carry negative side margins; with no padding on the wrapper
they bleed past the card, and in RTL that lands on the right where the text
starts. Logical padding fixes it for both directions at once. */
.zsouq .checkout-form-content,
.zsouq .checkout-form-content > .tab-pane{
padding-inline: 20px;
padding-block: 22px 8px; /* top breathing room: the heading sat on the border */
}
/* the tab-pane is nested inside the content wrapper — only pad once */
.zsouq .checkout-form-content > .tab-pane{ padding-block-start: 0; padding-inline: 0; }
.zsouq .checkout-form-content .tab-header{
padding-inline: 0;
margin-bottom: 1.4rem;
}
.zsouq .checkout-form-content .tab-header > h5{ margin-bottom: .5rem; line-height:1.5; }
/* labels sat flush against the edge and lost their asterisk spacing */
.zsouq .checkout-form-content label,
.zsouq .checkout-form-content .form-label{
display:inline-flex; align-items:center; gap:4px;
margin-bottom:6px; line-height:1.6;
}
/* the required asterisk belongs after the label in RTL, not crushed against it */
.zsouq .checkout-form-content label .text-danger{ margin-inline-start:2px; }
@media (max-width: 575.98px){
.zsouq .checkout-form-content,
.zsouq .checkout-form-content{ padding-inline: 12px; padding-block-start: 16px; }
}
/* The order summary table carried `min-height:250px !important`, so a cart with
one or two items left a large dead gap above the totals. Height should follow
the contents; the max-height + scroll is kept so a big cart stays contained. */
.zsouq .order-summary-table{
min-height: 0 !important;
max-height: 340px !important;
overflow-y: auto !important;
margin-bottom: 0 !important;
}
.zsouq .order-summary-table table{ margin-bottom: 0 !important; }
.zsouq .order-summary ul{ margin-top: 14px !important; }
/* ── Checkout payment options ─────────────────────────────────────────────
The theme hides the radio (display:none) and styles the LABEL as the card,
with padding-bottom:55px (dead space), white-space:nowrap (truncated text)
and a Font Awesome tick that this theme never loads. Style the label as the
single card rather than wrapping it in a second bordered box. */
.zsouq .zs-pay-options{ margin-top:6px; }
.zsouq .zs-pay-options > [class*="col-"]{ display:flex; }
/* the outer wrapper is now just a positioning box — no border of its own */
.zsouq .zs-pay-options .card-radio{
width:100%; padding:0; border:0; background:transparent; display:block;
}
.zsouq .zs-pay-options .card-radio .form-check-label{
display:flex; align-items:center; gap:12px;
background:#fff; border:1.5px solid var(--zi-border) !important;
border-radius:14px; padding:14px 16px !important;
white-space:normal; overflow:visible; text-overflow:clip;
height:100%; transition:border-color .15s, box-shadow .15s, background .15s;
}
.zsouq .zs-pay-options .card-radio .form-check-label:hover{ border-color:#cbb6e8 !important; }
.zsouq .zs-pay-options .card-radio .form-check-input:checked + .form-check-label{
border-color:var(--zi-purple) !important;
background:#faf5ff !important;
box-shadow:0 0 0 3px rgba(122,47,190,.10);
}
/* replace the Font Awesome tick with a drawn checkmark that needs no font */
.zsouq .zs-pay-options .card-radio .form-check-input:checked + .form-check-label:before{
content:"" !important; font-family:inherit !important;
position:absolute; inset-inline-end:12px; top:12px;
width:16px; height:16px; border-radius:50%;
background:var(--zi-purple);
box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 3px var(--zi-purple);
}
.zsouq .zs-pay-options .card-radio{ position:relative; }
.zsouq .zs-pay-options .payment_icon img{
width:52px; height:34px; object-fit:contain; border-radius:6px; background:#f6f4fb;
}
.zsouq .zs-pay-options .card-radio label > span{ gap:12px !important; align-items:center; }
.zsouq .zs-pay-options .card-radio .fs-14{ line-height:1.5; white-space:normal; }
.zsouq .zs-pay-options .card-radio small{ display:block; margin-top:2px; white-space:normal; }
/* ── Cart footer buttons ──────────────────────────────────────────────────
`.btn-label previestab` is an anchor with no `.btn` class, so it inherited no
text colour and rendered light-on-light — unreadable until hover.
ONLY the colour is set here: the theme positions the icon absolutely with
physical `left:0`, so touching padding or display breaks the layout in RTL. */
/* Element-agnostic ON PURPOSE: the cart renders these as (ajax/cart_list)
and checkout renders the SAME pair as