/* Infinity Shopping — v7 storefront: modern "bento" (flat, soft, compact). Loaded only by index.html, after style.css. */
:root{
  --bg:#f6f3ea;--surface:#fff;--ink:#16130a;--muted:#8a8571;--rule:#ebe6d6;--edge:#e9e4d3;
  --y1:#ffe46b;--y2:#ffd23f;--amber:#ffd23f;--deep:#e0b300;--orange:#16130a;--red:#d12f2f;
  --font-display:"Poppins","Tajawal",sans-serif;--font-ar-display:"Tajawal","Poppins",sans-serif;
}
body{padding-inline:14px}
.demo{margin-inline:-14px}
/* shared: kill 3D buttons */
.add,.primary,.send,.bar button,.welcome button,.close,.alt,.qty,.seg,.seg button[aria-pressed=true]{box-shadow:none}
.top{padding-block:14px 4px}
.logo .mk{width:40px;height:40px;filter:none}
.logo .word b{font-family:"Poppins",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.5px;text-shadow:none}
.logo .word i{background:var(--y2);color:var(--ink);border-radius:5px}
.seg{background:#fff}.seg button[aria-pressed=true]{background:var(--ink);color:var(--y2)}
/* search */
.search{margin-top:10px}
.search input{border:0!important;background:#fff!important;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.04)!important;padding:13px 44px}
.search input:focus{outline:2px solid var(--y2);outline-offset:0}
.search .clr{background:var(--rule);box-shadow:none}
/* bento hero */
.bento{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:10px;margin-block:14px 6px}
.hero{grid-row:span 2;margin:0;min-height:236px;padding:20px 16px 16px;border-radius:26px;background:var(--y2);box-shadow:none}
.hero .ghost{inset-inline-end:-30px;inset-block-start:-10px;width:170px;filter:none;opacity:.22;transform:none}
html[dir=rtl] .hero .ghost{transform:scaleX(-1)}
.hero .en{margin:0;font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(28px,8.4vw,40px);line-height:1;letter-spacing:-1.5px;text-shadow:none}
.hero .ar{margin-top:8px;font-family:"Tajawal",sans-serif;font-weight:700;font-size:17px;opacity:1;text-shadow:none}
.wacta{align-self:flex-start;margin-top:14px;display:inline-block;background:var(--ink);color:var(--y2);font-weight:700;font-size:13px;padding:9px 16px;border-radius:99px;text-decoration:none}
.b1{border:0;text-align:start;background:var(--ink);color:var(--y2);border-radius:26px;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.b1 b{font-size:clamp(26px,8vw,34px);line-height:1;font-weight:800;letter-spacing:-1px}
.b1 small{color:#fff;font-size:12px;font-weight:500}
.b2{border:0;text-align:start;background:#fff;color:var(--ink);border-radius:26px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;font-weight:600;font-size:12.5px;line-height:1.35}
.b2 i{font-style:normal;font-size:22px;align-self:flex-end}
/* banners */
.bslide{border-radius:24px;box-shadow:none!important;min-height:150px}
.btxt h3{font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:-.5px;font-size:26px;text-shadow:none}
html[dir=rtl] .btxt h3{font-family:"Tajawal",sans-serif}
.bcta{box-shadow:none;border-radius:99px}
.bbadge{box-shadow:none;background:var(--y2)}
.dots i{box-shadow:none;background:var(--rule)}.dots i.on{background:var(--ink);box-shadow:none}
/* category pills */
.cats{gap:8px;padding:8px 2px 12px;margin:0 -2px}
.ct{width:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.ct .ic{width:auto;height:auto;margin:0;background:none!important;box-shadow:none!important;font-size:15px;display:inline}
.ct[aria-pressed=true]{background:var(--ink);color:var(--y2)}
/* headings */
.sec,.sh h2{font-family:"Poppins",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.4px;margin-block:16px 8px}
html[dir=rtl] .sec,html[dir=rtl] .sh h2{font-family:"Tajawal",sans-serif}
.sh{margin:14px 0 0}.sec .num{background:var(--ink);color:var(--y2);font-size:12px;padding:0 10px}
/* compact product tiles */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-block:8px 28px}
@media(min-width:640px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.card,.card:nth-child(even){transform:none;border-radius:18px;padding:7px;box-shadow:none;background:#fff}
.hs{gap:9px;padding:10px 2px 14px;margin:0 -2px}
.hs .card{width:122px}.hs .card:hover{transform:none}
.pic{border-radius:13px;box-shadow:none;background:var(--rule)}
.ph{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(34px,11vw,60px);text-shadow:none}
.info{padding:7px 3px 2px;gap:4px}
.name{font-size:12.5px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pr{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:2px}
.pp{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.card .price{position:static;transform:none;background:none;box-shadow:none;color:var(--ink);padding:0;border-radius:0;font-size:14px;font-weight:800}
.card .was{font-size:10.5px;font-weight:700;color:var(--red);margin:0}
.card .was{text-decoration:line-through;text-decoration-thickness:1.5px}
.card .add{width:26px;height:26px;min-width:26px;padding:0;border-radius:50%;background:var(--ink);color:var(--y2);font-size:18px;line-height:1;font-weight:700;display:grid;place-items:center;flex:none}
.card .qty{background:var(--ink);color:var(--y2);border-radius:99px;box-shadow:none;flex:none}
.card .qty button{width:22px;height:26px;font-size:16px;color:var(--y2)}
.card .qty span{min-width:14px;font-size:12px}
.card .out{background:none;box-shadow:none;color:var(--muted);padding:0;font-size:10.5px;font-weight:600}
.card>.off{inset-block-start:11px;inset-inline-start:11px;transform:none;background:var(--red);box-shadow:none;font-size:9.5px;padding:1px 6px;border-radius:6px}
html[dir=rtl] .card>.off{transform:none}
.oos{font-size:11px;padding:3px 0}
.pic .cnt{font-size:10px;padding:0 6px}
/* generic buttons */
.add,.primary{background:var(--ink);color:var(--y2)}
.primary,.send,.bar button{border-radius:99px}
.primary[disabled]{background:var(--rule);color:var(--muted);box-shadow:none}
.send{background:#25d366;color:#062b14}
.bar{background:linear-gradient(180deg,rgba(246,243,234,0),var(--bg) 45%)}
.bar button{background:var(--ink);color:#fff;padding:14px 20px;font-size:15px;box-shadow:0 10px 24px rgba(22,19,10,.25)}
.bar button .num{color:var(--y2)}
.bar button[disabled]{background:#d9d4c2;color:#fff;box-shadow:none}
.bar button[disabled] .num{color:#fff}
/* sheets & detail */
.sheet{border-radius:26px 26px 0 0}
.sheet h2{font-family:"Poppins",sans-serif;font-weight:800;font-size:22px}
html[dir=rtl] .sheet h2{font-family:"Tajawal",sans-serif}
.close{box-shadow:none;background:var(--rule)}
.big,.thumbs button{box-shadow:none}
.detrow .price{background:none;box-shadow:none;color:var(--ink);padding:0;font-size:22px;font-weight:800;border-radius:0}
.detrow .was{font-size:15px}
.detrow .add{width:auto;height:auto;border-radius:99px;padding:11px 26px;font-size:15px;display:inline-block}
.qty{background:var(--rule)}
.line .qty button{font-size:20px}
.pay label{box-shadow:none;background:var(--bg)}
.pay label:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink);background:#fff7cf}
.alt{box-shadow:none;background:var(--rule)}
input[type=text],input[type=tel],input[type=password],textarea,select{box-shadow:none;background:var(--bg)}
.hint{border-inline-start-color:var(--y2)}
.done .ok{box-shadow:none}
.toast{background:var(--ink);color:var(--y2)}
/* pbox */
.pbox{box-shadow:none}
/* whatsapp + footer */
.waoffers{border-radius:24px;background:#25d366;box-shadow:none}
.waoffers a{box-shadow:none;border-radius:99px}
.ftr{border-radius:26px;box-shadow:none;background:var(--ink)}
.soc a{box-shadow:none;background:var(--y2)}
/* welcome */
.welcome{background:var(--y2)}
.welcome button{box-shadow:none;border-radius:99px;font-size:20px}
.welcome button.ar{font-family:"Tajawal",sans-serif;font-weight:800;font-size:22px}
.off,.b1 b,.bbadge,.card .price,.card .was{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .b1 b{align-self:flex-start}
html[dir=rtl] .card .was{text-align:end}

.wstag{background:var(--ink);color:var(--y2);font-weight:800;font-size:11px;padding:3px 10px;border-radius:99px;letter-spacing:.04em;margin-inline-start:-4px}
.wshello{margin:6px 0 0;font-weight:700;font-size:14px}
.wslogin{max-width:420px;margin:40px auto 0;background:#fff;border-radius:26px;padding:24px 20px}
.wslogin h1{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.5px}
.wslogin p{margin:0 0 10px;color:var(--muted);font-size:14px}
.wslogin .primary{margin-top:16px}
.top .langbtn{white-space:nowrap;padding:7px 12px;font-size:12.5px;box-shadow:none;background:#fff;border:0}
.top .acts{gap:6px;flex-wrap:nowrap}
.top .wsbadge,.top .badge{white-space:nowrap}
body[data-mode=wholesale] .top{gap:6px}
body[data-mode=wholesale] .logo .mk{width:32px;height:32px}
body[data-mode=wholesale] .logo .word b{font-size:18px}
body[data-mode=wholesale] .wstag{font-size:11px;padding:3px 8px}
body[data-mode=wholesale] .seg button{padding:6px 10px}

/* الشارة: بالعربي تروح لليسار وما تغطّي النص */
html[dir=rtl] .bbadge{inset-inline-end:auto;inset-inline-start:auto;left:16px;right:auto}
html[dir=ltr] .bbadge{left:auto;right:16px}
.bslide:has(.bbadge) .btxt{max-width:calc(100% - 118px)}