/* ==========================================================================
   صِلَة — واجهة المتجر العام /store/{slug} (v6.4، لارافل وحده). لغة تصميم /shop نفسها: حبر #0B1F3A وبرتقالي #C2410C وCairo.
   الخط من fonts.css المحلي. خصائص منطقية (inline-*) فتعمل RTL وLTR. بلا إطار خارجي.
   ========================================================================== */
.sf{
  --ink:#0B1F3A; --ink-2:#0D2749; --text:#33445C; --muted:#56677F;
  --bg:#F5F7FB; --card:#FFFFFF; --tint:#EEF2F9; --tint-2:#E3EAF5;
  --line:#E2E8F0; --line-2:#CBD5E1;
  --or:#C2410C; --or-dk:#9A3412; --or-tint:#FFF1E6; --gr:#0F6E56; --gr-tint:#E1F5EE; --red:#B91C1C;
  --r:16px; --r-sm:12px; --sh:0 14px 34px -22px rgba(11,31,58,.45); --sh-sm:0 6px 16px -10px rgba(11,31,58,.35);
  --top:60px;
  margin:0; background:var(--bg); color:var(--text); font:400 16px/1.7 Cairo,sans-serif; -webkit-font-smoothing:antialiased; min-height:100dvh;
}
.sf *,.sf *::before,.sf *::after{box-sizing:border-box}
.sf h1,.sf h2,.sf h3,.sf p,.sf ul{margin:0}
.sf ul{padding:0;list-style:none}
:where(.sf) a{color:inherit}
:where(.sf) :is(button,input,select){font:inherit;color:inherit}
:where(.sf) button{cursor:pointer;background:none;border:0;padding:0}
.sf :focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:8px}
:where(.sf) .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sf [hidden]{display:none!important}
.sf-wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
.sf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sf-skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:3000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none}
.sf-skip:focus{top:10px}

/* ---------- buttons ---------- */
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:1.5px solid transparent;font-weight:800;text-decoration:none;transition:transform .15s,background-color .15s,border-color .15s,box-shadow .15s}
.sf-btn:hover{transform:translateY(-1px)}
.sf-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.sf-btn--primary{background:var(--or);color:#fff;box-shadow:0 14px 28px -16px rgba(194,65,12,.8)}
.sf-btn--primary:hover{background:var(--or-dk)}
.sf-btn--ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.sf-btn--ghost:hover{border-color:var(--ink)}
.sf-btn--block{display:flex;width:100%}
.sf-link{color:var(--or);font-weight:800;text-decoration:none;font-size:15px}
.sf-link:hover{text-decoration:underline}
.sf-link--btn{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.sf-link--btn .ic{width:16px;height:16px}
.sf-x{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--ink)}
.sf-x:hover{background:var(--tint)}

/* ---------- top bar (sticky) ---------- */
.sf-top{position:sticky;top:0;z-index:1200;height:var(--top);display:flex;align-items:center;gap:14px;padding-inline:16px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.sf-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border-radius:12px;background:var(--tint);color:var(--ink);font-weight:800;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.sf-back:hover{background:var(--tint-2)}
.sf-back__ic{width:18px;height:18px}
[dir=rtl] .sf-back__ic{transform:scaleX(1)}        /* السهم يشير لليمين = «للخلف» في RTL */
[dir=ltr] .sf-back__ic{transform:scaleX(-1)}
.sf-top__name{flex:1;min-width:0;font-weight:900;color:var(--ink);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.sf-cartbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;position:relative}
.sf-cartbtn:hover{background:var(--ink-2)}
.sf-cartbtn__n{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--or);color:#fff;font-size:12.5px;display:grid;place-items:center;line-height:1}
.sf-cartbtn__t{font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.sf-hero{background:linear-gradient(135deg,#0B1F3A 0%,#12345F 100%);color:#fff;padding:22px 0 26px}
.sf-hero__in{display:flex;align-items:flex-start;gap:18px}
.sf-avatar{width:72px;height:72px;border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:34px;flex:none}
.sf-hero__txt{flex:1;min-width:0}
.sf-hero h1{font-size:clamp(24px,3.4vw,34px);font-weight:900;line-height:1.25;color:#fff}
.sf-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:14.5px;color:#CBD5E1;font-weight:700}
.sf-meta>span+span::before{content:"·";margin-inline-end:14px;color:#64748B}
.sf-rate{display:inline-flex;align-items:center;gap:5px;color:#fff}
.sf-rate .ic{width:15px;height:15px;color:#F59E0B;stroke:none;fill:currentColor}
.sf-about{margin-top:10px;max-width:70ch;color:#E2E8F0;font-size:15px}
.sf-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sf-badges li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:13.5px;font-weight:700}
.sf-badges .ic{width:16px;height:16px;color:#FDBA74}
.sf-hero__act{display:flex;flex-direction:column;gap:8px;flex:none}
.sf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:800;text-decoration:none;font-size:14.5px;transition:background-color .15s}
.sf-iconbtn:hover{background:rgba(255,255,255,.22)}

/* ---------- tools (sticky under the top bar) ---------- */
.sf-tools{position:sticky;top:var(--top);z-index:1100;background:rgba(245,247,251,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 0 10px}
.sf-tools__row{display:flex;gap:10px;align-items:center}
.sf-search{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:50px;padding-inline:14px 6px;background:#fff;border:1.5px solid var(--line-2);border-radius:14px;box-shadow:var(--sh-sm);transition:border-color .15s,box-shadow .15s}
.sf-search:focus-within{border-color:var(--or);box-shadow:0 0 0 4px rgba(234,88,12,.14),var(--sh-sm)}
.sf-search>.ic{color:var(--muted)}
.sf-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;font-weight:600;color:var(--ink)}
.sf-search input::placeholder{color:#5F6F86;font-weight:500}
.sf-search input::-webkit-search-cancel-button{display:none}
.sf-search__x{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--muted)}
.sf-search__x:hover{background:var(--tint)}
.sf-sortbox select{height:50px;padding-inline:14px 30px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;font-weight:700;color:var(--ink);box-shadow:var(--sh-sm);max-width:190px}
.sf-view{display:flex;border:1.5px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-sm)}
.sf-view button{width:48px;height:47px;display:grid;place-items:center;color:var(--muted)}
.sf-view button[aria-pressed=true]{background:var(--ink);color:#fff}
.sf-cats{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:none}
.sf-cats::-webkit-scrollbar{display:none}
.sf-chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.sf-chip:hover{border-color:var(--ink)}
.sf-chip i{font-style:normal;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--tint-2);font-size:12px;display:grid;place-items:center;line-height:1}
.sf-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.sf-chip[aria-pressed=true] i{background:rgba(255,255,255,.2);color:#fff}

/* ---------- list ---------- */
.sf-main{padding-block:18px 36px}
.sf-count{margin-bottom:12px;font-weight:800;color:var(--muted);font-size:14.5px;min-height:1.7em}
.sf-note{padding:14px;border-radius:12px;background:var(--or-tint);color:#7C2D12;font-weight:700}
.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sf-p{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.sf-p:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.sf-p.is-in{border-color:var(--or);box-shadow:0 0 0 2px rgba(194,65,12,.12)}
.sf-p__img{position:relative;aspect-ratio:4/3;background:var(--tint);display:grid;place-items:center;overflow:hidden}
.sf-p__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-p__img .ic{width:38px;height:38px;color:#94A3B8;stroke-width:1.5}
/* v6.5: صورة الصنف زرّ يفتح نافذة التكبير (button.sf-p__pic يملأ الإطار؛ الشارات فوقه لا تعترض النقر). زاوية الإطار: الكمية أعلى النهاية،
   «بقي n» أسفل البداية، وتلميح التكبير / شعار جوجل أعلى البداية (حالتان لا تجتمعان: بصورة ⇒ تكبير، بلا صورة أو فشلت ⇒ جوجل) فلا تتراكب */
.sf-p__pic{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;border:0;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.sf-p__pic:focus-visible{outline-offset:-4px;border-radius:var(--r)}
.sf-p__img .sf-p__zoom{position:absolute;inset-block-start:8px;inset-inline-start:8px;width:30px;height:30px;border-radius:999px;background:rgba(11,31,58,.66);color:#fff;display:grid;place-items:center;pointer-events:none;transition:opacity .15s,transform .15s}
.sf-p__img .sf-p__zoom .ic{width:16px;height:16px;color:#fff;stroke-width:2}
@media (hover:hover){
  .sf-p__img .sf-p__zoom{opacity:0;transform:scale(.9)}
  .sf-p:hover .sf-p__zoom,.sf-p__pic:focus-visible .sf-p__zoom{opacity:1;transform:none}
}
/* v5.10 → v6.6: زر بحث صورة صغير (أيقونة بحث محايدة لا شعار جوجل) على صنف بلا صورة — يفتح نافذة بحث الصور باسمه (على اللمس يتّسع هدف النقر بلا تكبير الأيقونة) */
.sf-g{position:absolute;inset-block-start:6px;inset-inline-start:6px;z-index:2;width:24px;height:24px;display:grid;place-items:center;background:#fff;border:1px solid #D9DEE4;border-radius:7px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.sf-p__img .sf-g .ic{width:14px;height:14px;display:block;color:var(--ink);stroke-width:2.2}
.sf-g:hover,.sf-g:focus-visible{border-color:var(--or);box-shadow:0 0 0 2px rgba(194,65,12,.18)}
.sf-g:focus-visible{outline:2px solid var(--or);outline-offset:2px}
@media (pointer:coarse){.sf-g{width:28px;height:28px}.sf-g::after{content:"";position:absolute;inset:-8px}}
.sf-p__qty{position:absolute;inset-block-start:8px;inset-inline-end:8px;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--or);color:#fff;font-weight:900;font-size:13px;display:grid;place-items:center;pointer-events:none}
.sf-p__low{position:absolute;inset-block-end:8px;inset-inline-start:8px;max-width:calc(100% - 16px);padding:2px 10px;border-radius:12px;background:rgba(185,28,28,.92);color:#fff;font-size:12px;font-weight:800;line-height:1.35;text-align:center;pointer-events:none}   /* في صورة القائمة الضيّقة (92-110px) ينزل «فقط» لسطر ثانٍ بدل قصّ العدد */
.sf-p__body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.sf-p h3{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-p__desc{font-size:13px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-p__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.sf-p__price{font-weight:900;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-p__price small{font-weight:600;color:var(--muted);font-size:12px}
.sf-add{height:40px;padding:0 16px;border-radius:12px;background:var(--or);color:#fff;font-weight:800;font-size:14.5px;white-space:nowrap;transition:background-color .15s}
.sf-add:hover{background:var(--or-dk)}
.sf-step{display:inline-flex;align-items:center;height:40px;border-radius:12px;background:var(--ink);color:#fff}
.sf-step button{width:38px;height:40px;font-size:20px;font-weight:800;line-height:1;display:grid;place-items:center;border-radius:12px;color:#fff}
.sf-step button:hover{background:rgba(255,255,255,.14)}
.sf-step b{min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
/* قائمة بدل شبكة */
.sf-grid.is-list{grid-template-columns:1fr;gap:10px}
.sf-grid.is-list .sf-p{flex-direction:row;align-items:stretch}
.sf-grid.is-list .sf-p__img{aspect-ratio:auto;width:110px;flex:none}
.sf-grid.is-list .sf-p h3{-webkit-line-clamp:1}
.sf-morewrap{display:grid;place-items:center;margin-top:22px}
.sf-state{display:grid;justify-items:center;gap:8px;text-align:center;padding:54px 18px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r)}
.sf-state[hidden],.sf-cart__empty[hidden]{display:none}
.sf-state__ic{width:64px;height:64px;border-radius:20px;background:var(--tint);display:grid;place-items:center;color:var(--muted)}
.sf-state__ic .ic{width:30px;height:30px}
.sf-state h2{font-size:20px;font-weight:900;color:var(--ink)}
.sf-state p{color:var(--muted);max-width:46ch}
.sf-state__act{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.sf-skel{height:292px;border-radius:var(--r);background:linear-gradient(90deg,#EEF2F9 0,#F8FAFD 50%,#EEF2F9 100%);background-size:200% 100%;animation:sfSk 1.2s linear infinite}
@keyframes sfSk{to{background-position:-200% 0}}

/* ---------- other stores ---------- */
.sf-others{padding:6px 0 30px}
.sf-others__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sf-others h2{font-size:20px;font-weight:900;color:var(--ink)}
.sf-others__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sf-os{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.sf-os:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--ink)}
.sf-os b{color:var(--ink);font-weight:800;line-height:1.35}
.sf-os span{font-size:13px;color:var(--muted);font-weight:600}
.sf-os .r{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:800}
.sf-os .r .ic{width:13px;height:13px;color:#D97706;stroke:none;fill:currentColor}

/* ---------- footer ---------- */
.sf-foot{border-top:1px solid var(--line);background:#fff;padding:18px 0 calc(18px + 70px);font-size:14px;color:var(--muted)}
.sf-foot .sf-wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
.sf-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.sf-foot a{text-decoration:none;font-weight:700}
.sf-foot a:hover{text-decoration:underline}

/* ---------- mobile cart bar ---------- */
.sf-bar{position:fixed;z-index:1150;inset-inline:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(245,247,251,1) 60%,rgba(245,247,251,0))}
.sf-bar[hidden]{display:none}
.sf-bar__btn{width:100%;max-width:560px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px;border-radius:16px;background:var(--or);color:#fff;font-weight:900;box-shadow:0 18px 34px -14px rgba(194,65,12,.85)}
.sf-bar__l{display:inline-flex;align-items:center;gap:8px}
.sf-bar__l span{min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:13.5px}
.sf-bar__p{font-variant-numeric:tabular-nums}

/* ---------- cart drawer ---------- */
.sf-backdrop{position:fixed;inset:0;background:rgba(11,31,58,.55);opacity:0;visibility:hidden;transition:opacity .22s;z-index:1900}
.sf-backdrop.show{opacity:1;visibility:visible}
.sf-cart{position:fixed;inset-block:0;inset-inline-end:0;width:min(440px,100vw);background:#fff;z-index:2000;display:flex;flex-direction:column;box-shadow:-24px 0 60px -30px rgba(11,31,58,.6);transform:translateX(110%);visibility:hidden;transition:transform .26s ease,visibility 0s .26s}
[dir=rtl] .sf-cart{transform:translateX(-110%);box-shadow:24px 0 60px -30px rgba(11,31,58,.6)}
.sf-cart.open{transform:none;visibility:visible;transition:transform .26s ease}
.sf-cart__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 12px;border-bottom:1px solid var(--line)}
.sf-cart__head h2{font-size:19px;font-weight:900;color:var(--ink)}
.sf-cart__body{flex:1;overflow-y:auto;padding:14px 16px 24px;overscroll-behavior:contain}
.sf-cart__empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:50px 10px;color:var(--muted)}
.sf-cart__empty strong{color:var(--ink);font-size:18px}
.sf-cart__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:800;color:var(--muted);font-size:14px}
.sf-cart__list{display:grid;gap:2px}
.sf-line{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sf-line__n{font-weight:800;color:var(--ink);line-height:1.4}
.sf-line__t{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-line__u{grid-column:1;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sf-line__c{grid-column:2;grid-row:2;display:inline-flex;align-items:center;gap:6px;justify-self:end}
.sf-line .sf-step{height:36px}
.sf-line .sf-step button{height:36px;width:34px}
.sf-line__rm{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--muted)}
.sf-line__rm:hover{background:#FEE2E2;color:var(--red)}
.sf-line__rm .ic{width:17px;height:17px}
.sf-sum{display:grid;gap:6px;margin:14px 0;padding:14px;border-radius:var(--r-sm);background:var(--tint);font-weight:700;font-size:14.5px}
.sf-sum>div{display:flex;justify-content:space-between;gap:10px}
.sf-sum>div[hidden]{display:none}
.sf-sum__tot{padding-top:8px;border-top:1px dashed var(--line-2);font-size:18px;font-weight:900;color:var(--ink)}
.sf-sum__note{font-size:12.5px;font-weight:600;color:var(--muted)}
.sf-form h3{font-size:17px;font-weight:900;color:var(--ink);margin-bottom:8px}
.sf-field{margin-bottom:10px}
.sf-field label{display:block;font-weight:800;font-size:14px;color:var(--ink);margin-bottom:4px}
.sf-field input{width:100%;height:50px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;font-weight:600;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.sf-field input:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 4px rgba(234,88,12,.14)}
.sf-field input[aria-invalid=true]{border-color:var(--red)}
.sf-field input[dir=ltr]{text-align:start}
.sf-err{min-height:0;font-size:13px;font-weight:700;color:var(--red)}
.sf-err:empty{display:none}
.sf-err--box{padding:10px 12px;border-radius:10px;background:#FEE2E2;margin-bottom:10px}
.sf-check{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;margin:4px 0 12px;cursor:pointer}
.sf-check input{width:18px;height:18px}
.sf-done{display:grid;gap:10px;justify-items:stretch;text-align:center;padding-top:10px}
.sf-done[hidden],#cartFilled[hidden]{display:none}
.sf-done__ic{width:72px;height:72px;margin-inline:auto;border-radius:50%;background:var(--gr-tint);color:var(--gr);display:grid;place-items:center}
.sf-done__ic .ic{width:36px;height:36px;stroke-width:2.6}
.sf-done h3{font-size:22px;font-weight:900;color:var(--ink)}
.sf-done__no{font-weight:700;color:var(--muted)}
.sf-done__no b{color:var(--ink);font-size:18px}
.sf-toast{position:fixed;z-index:3000;inset-inline:0;bottom:84px;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);padding:10px 18px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.sf-toast:empty{display:none}
.sf-toast.on{opacity:1;transform:none}

/* ---------- نافذة صورة الصنف (v6.5): الصورة الأولى كبيرة وحادّة، ألبوم بأسهم وشريط مصغّرات، ورقة سفلية على الهاتف ---------- */
html.sf-lock,html.sf-lock body{overflow:hidden}
html.sf-lock{padding-inline-end:var(--sf-sbw,0px)}
.sf-lb{position:fixed;inset:0;z-index:2600;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,31,58,.74);overscroll-behavior:contain;touch-action:none}
.sf-lb[hidden]{display:none}
.sf-lb__card{width:min(900px,100%);max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;background:#fff;border-radius:20px;box-shadow:0 30px 70px -20px rgba(11,31,58,.65);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;animation:sfLbIn .2s ease-out}
.sf-lb__card:focus{outline:none}
.sf-lb__head,.sf-lb__stage,.sf-lb__meta,.sf-lb__thumbs{flex:none}
.sf-lb__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sf-lb__head h2{flex:1;min-width:0;font-size:16px;font-weight:900;color:var(--ink);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-lb__stage{position:relative}
/* الإطار بارتفاع محدّد (≈72vh كحدّ أعلى 680px) والصورة بحجمها الأصلي محصورة داخله: لا تُكبَّر فوق دقّتها فلا تضبب */
.sf-lb__frame{position:relative;height:min(72vh,680px);height:min(72vh,680px,calc(92dvh - 11rem));min-height:200px;border-radius:14px;overflow:hidden;background:var(--tint);touch-action:pan-y}
.sf-lb__img{position:absolute;inset:0;margin:auto;display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.sf-lb__img[hidden]{display:none}
.sf-lb__spin{display:none;position:absolute;inset:0;pointer-events:none}
.sf-lb__spin::after{content:"";position:absolute;inset:0;margin:auto;width:38px;height:38px;border-radius:50%;border:4px solid var(--line-2);border-top-color:var(--or);animation:sfLbSp .8s linear infinite}
.sf-lb__frame.is-loading .sf-lb__spin{display:block}
.sf-lb__fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;font-size:14.5px;font-weight:800;color:var(--muted);background:var(--tint)}
.sf-lb__fb[hidden]{display:none}
.sf-lb__fb a{color:var(--or);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.sf-lb__nav{position:absolute;top:50%;z-index:2;width:46px;height:46px;margin-top:-23px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-sm);transition:background-color .15s,border-color .15s}
.sf-lb__nav:hover{background:#fff;border-color:var(--ink)}
.sf-lb__nav[hidden]{display:none}
.sf-lb__nav .ic{width:22px;height:22px;stroke-width:2.2}
.sf-lb__prev{inset-inline-start:10px}
.sf-lb__next{inset-inline-end:10px}
[dir=rtl] .sf-lb__next .ic,[dir=ltr] .sf-lb__prev .ic{transform:rotate(180deg)}   /* الرمز يشير يميناً: السابقة تتجه لجهة بداية القراءة والتالية لنهايتها */
.sf-lb__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;font-size:13.5px;font-weight:700;color:var(--muted)}
.sf-lb__meta .sf-link{font-size:14px}
.sf-lb__thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.sf-lb__th{flex:none;width:58px;height:58px;padding:0;border-radius:12px;overflow:hidden;border:2px solid transparent;background:var(--tint);transition:border-color .15s}
.sf-lb__th img{display:block;width:100%;height:100%;object-fit:cover}
.sf-lb__th[aria-current=true]{border-color:var(--or)}
.sf-lb__th.bad{background:repeating-linear-gradient(45deg,var(--tint),var(--tint) 6px,var(--tint-2) 6px,var(--tint-2) 12px)}
@keyframes sfLbIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sfLbUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes sfLbSp{to{transform:rotate(360deg)}}

/* ---------- نافذة بحث صورة الصنف (v6.6): بحث صور بنج في iframe داخل الصفحة، ورقة سفلية على الهاتف ---------- */
/* لا touch-action هنا عمداً: touch-action:none على أب الـiframe يعطّل تمرير النتائج داخله باللمس */
.sf-is{position:fixed;inset:0;z-index:2700;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,31,58,.74);overscroll-behavior:contain}
.sf-is[hidden]{display:none}
.sf-is__card{width:min(960px,96vw);height:86vh;height:86dvh;display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px;background:#fff;border-radius:20px;box-shadow:0 30px 70px -20px rgba(11,31,58,.65);overflow:hidden;overscroll-behavior:contain;animation:sfLbIn .2s ease-out}
.sf-is__card:focus{outline:none}
.sf-is__head{flex:none;display:flex;align-items:center;gap:8px}
.sf-is__head h2{flex:1;min-width:0;font-size:16px;font-weight:900;color:var(--ink);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-is__g{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap;transition:border-color .15s,background-color .15s}
.sf-is__g:hover{border-color:var(--ink);background:var(--tint)}
.sf-is__glogo{width:18px;height:18px;flex:none;display:block}
.sf-is .sf-x{flex:none;width:44px;height:44px}
.sf-is__body{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;background:var(--tint);border:1px solid var(--line)}
.sf-is__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff}
.sf-is__load{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--tint);color:var(--muted);font-weight:800;font-size:14.5px;pointer-events:none}
.sf-is__body.is-loading .sf-is__load{display:flex}
.sf-is__spin{width:38px;height:38px;border-radius:50%;border:4px solid var(--line-2);border-top-color:var(--or);animation:sfLbSp .8s linear infinite}
/* بعد 8 ثوانٍ بلا load: شريط عائم فوق أسفل الإطار (لا يغيّر حجم الإطار فلا تقفز النتائج) برسالة وزرّ بارز للتبويب الجديد */
.sf-is__slow{position:absolute;inset-inline:10px;inset-block-end:10px;z-index:2;display:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px;border-radius:14px;background:#fff;border:1.5px solid var(--or);box-shadow:var(--sh);font-weight:700;font-size:14px;color:var(--ink);line-height:1.6}
.sf-is__body.is-slow .sf-is__slow{display:flex}
.sf-is__slow span{flex:1 1 220px;min-width:0}
.sf-is__slow .sf-btn{flex:none;min-height:44px;font-size:14.5px}
.sf-is__foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px}
.sf-is__hint{flex:1 1 254px;min-width:0;font-size:13px;line-height:1.6;color:var(--muted);font-weight:600}
/* رابط التذييل هو الاحتياط الحقيقي حين يُمنع التضمين (كروم يطلق load على صفحة الخطأ فلا يظهر شريط البطء): زرّ ثانوي بارز بحدّ برتقالي، وارتفاعه 44px نفسه، وأساس التلميح 254px (كان 280px) يعوّض زيادة عرض الزرّ فيبقى الرابط على صفّ التلميح عند العرض نفسه فلا يتغيّر حجم التذييل ولا الإطار */
.sf-is__new{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--or);background:#fff;color:var(--or);font-weight:800;font-size:14.5px;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.sf-is__new:hover{background:var(--or-tint);border-color:var(--or-dk);color:var(--or-dk)}
.sf-is__new:focus-visible{border-radius:12px}   /* القاعدة العامة .sf :focus-visible تفرض 8px فتتبدّل زوايا الزرّ عند التركيز */

/* ---------- responsive ---------- */
@media (max-width:760px){
  .sf{--top:56px}
  .sf-wrap{padding-inline:14px}
  .sf-top{gap:8px;padding-inline:10px}
  .sf-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sf-back{padding:0 10px}
  .sf-top__name{font-size:16px}
  .sf-cartbtn__t{display:none}
  .sf-hero{padding:16px 0 18px}
  .sf-hero__in{flex-wrap:wrap}
  .sf-avatar{width:56px;height:56px;border-radius:18px;font-size:27px}
  .sf-hero__txt{flex-basis:calc(100% - 76px)}
  .sf-hero__act{flex-direction:row;flex:1 0 100%}
  .sf-iconbtn{flex:1}
  .sf-tools__row{flex-wrap:wrap}
  .sf-search{flex:1 0 100%}
  .sf-sortbox{flex:1}
  .sf-sortbox select{width:100%;max-width:none}
  .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sf-p__body{padding:10px 10px 12px}
  .sf-p h3{font-size:14.5px}
  .sf-p__price{font-size:15px;flex:1 0 100%}
  .sf-add{padding:0 12px;height:38px;flex:1}
  .sf-p .sf-step{flex:1;justify-content:space-between}
  .sf-grid.is-list .sf-p__price{flex:0 0 auto}
  .sf-grid.is-list .sf-add,.sf-grid.is-list .sf-p .sf-step{flex:0 1 auto}
  .sf-grid.is-list .sf-p__img{width:92px}
  .sf-cart{width:100vw}
  .sf-main{padding-bottom:90px}
  /* نافذة الصورة كورقة سفلية بعرض الشاشة */
  .sf-lb{align-items:flex-end;padding:0}
  .sf-lb__card{width:100%;max-height:94vh;max-height:94dvh;gap:8px;padding:8px 12px calc(14px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;animation-name:sfLbUp}
  .sf-lb__card::before{content:"";flex:none;align-self:center;width:42px;height:4px;border-radius:99px;background:var(--line-2)}
  .sf-lb__frame{height:min(64vh,520px);height:min(64vh,520px,calc(94dvh - 11rem))}
  .sf-lb__nav{width:42px;height:42px;margin-top:-21px}
  .sf-lb__prev{inset-inline-start:6px}
  .sf-lb__next{inset-inline-end:6px}
  /* نافذة بحث الصورة كورقة سفلية بعرض الشاشة */
  .sf-is{align-items:flex-end;padding:0}
  .sf-is__card{width:100%;height:92vh;height:92dvh;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;animation-name:sfLbUp}
  .sf-is__card::before{content:"";flex:none;align-self:center;width:42px;height:4px;border-radius:99px;background:var(--line-2)}
  .sf-is__g{padding:0 10px}
}
@media (max-width:400px){   /* أضيق الهواتف: العنوان بسطرين كاملاً فوق صفّ «افتح في جوجل» وX (ترتيب DOM = ترتيب القراءة) بدل أن يُعصَر بنقاط حذف قبل أن يُفهم */
  .sf-is__head{flex-wrap:wrap;justify-content:space-between;gap:0 8px}
  .sf-is__head h2{flex:1 1 100%;font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media (max-height:520px){.sf-is__hint{display:none}.sf-is__card{height:94vh;height:94dvh}}   /* أفقي قصير: يُترك للإطار أكبر مساحة، ورابط التبويب الجديد يبقى */
@media (min-width:761px){.sf-bar{display:none}}
@media (max-width:760px),(max-height:560px){.sf-tools{position:static}}
@media (min-width:900px){.sf-cats{flex-wrap:wrap;overflow:visible}}
html{scroll-padding-top:150px}
@media (max-width:330px){.sf-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .sf *,.sf *::before,.sf *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .sf-skel{animation:none}
  .sf-is__spin{animation:none!important;border-top-color:var(--or)}   /* دوّامة لا نهائية بمدّة .01ms تومض بسرعة جنونية ⇒ حلقة ثابتة */
}
@media print{.sf-top,.sf-tools,.sf-bar,.sf-cart,.sf-backdrop,.sf-toast,.sf-lb,.sf-is{display:none}.sf-hero{background:none;color:#000;padding:8px 0}.sf-hero h1,.sf-meta,.sf-about{color:#000}.sf-badges li{border-color:#999;background:none;color:#000}}

/* ==========================================================================
   v7.3 (parity/v73-update-spec.md §4.4–4.5، §7.3، §12.2، §12.4–12.6؛ «انحرافات التنفيذ» #storefront3): حبة البلد واللغة في الشريط العلوي،
   وعد التوصيل ولافتة مسار الشحن على الهيرو الكحلي، الخصم، خطوة الوزن، ملاحظة السطر، وضعا المسار والإغلاق، وإبراز رابط #p{id}.
   ========================================================================== */
.sf-top>.lc-wrap{flex:none}
.sf-incty{margin-top:6px;font-size:14px;font-weight:700;color:#FDBA74}
/* الجزئيات المشتركة (lanes.css) على الهيرو الكحلي: الرموز نفسها بقيم داكنة */
.sf-hero .ln{--ln-ink:#fff;--ln-text:#E2E8F0;--ln-muted:#CBD5E1;--ln-line:rgba(255,255,255,.22);--ln-card:rgba(255,255,255,.08);--ln-tint:rgba(255,255,255,.12);--ln-acc:#FDBA74;--ln-acc-tint:rgba(253,186,116,.16);--ln-ok:#6EE7B7;--ln-ok-tint:rgba(110,231,183,.16)}
.sf-hero .ln-promise--store{margin-top:12px}
.sf-hero .ln-link{color:#FDBA74}
.sf-lanebox{margin-top:14px;max-width:640px}
.sf-off{display:flex;align-items:flex-start;gap:10px;margin-top:14px;max-width:640px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff}
.sf-off .ic{width:22px;height:22px;margin-top:2px;color:#FDBA74}
.sf-off p{display:grid;gap:2px;font-size:14px;line-height:1.6}
.sf-off span{color:#CBD5E1;font-weight:600;font-size:13px}
/* السعر: قبل الخصم مشطوب، شارة الخصم أسفل نهاية الصورة، وفي وضع المسار السعر الأصلي صغيراً تحت المحوَّل */
.sf-p__was{margin-inline-start:8px;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration-thickness:1.5px}
.sf-p__off{position:absolute;inset-block-end:8px;inset-inline-end:8px;padding:2px 9px;border-radius:999px;background:var(--gr);color:#fff;font-size:12px;font-weight:800;line-height:1.5;pointer-events:none}
.sf-p__price--fx{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:4px;white-space:normal}
.sf-p__src{flex:1 0 100%;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sf-add[disabled]{background:var(--line-2);color:var(--muted);cursor:not-allowed}
.sf-step--w b{min-width:64px;font-size:13.5px;white-space:nowrap}
/* ملاحظة الزبون على السطر (≤ 250): زر «+ ملاحظة» ثم حقل صغير */
.sf-line__nt{grid-column:1/-1;display:flex}
.sf-line__nb{min-height:32px;padding:0 4px;color:var(--or);font-weight:800;font-size:13px}
.sf-line__nb:hover{text-decoration:underline}
.sf-line__note{width:100%;height:38px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink)}
.sf-line__note:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
/* السلة: سطر الوعد تحت الملخص، وإتمام طلب المسار */
.sf-cart .ln-promise--cart{margin:-4px 0 14px}
.sf-lanego{display:grid;gap:10px}
.sf-lanego__p{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:var(--or-tint);color:#7C2D12;font-weight:700;font-size:13.5px;line-height:1.6}
.sf-lanego__p .ic{width:18px;height:18px;margin-top:3px}
#laneBtn[aria-disabled=true]{opacity:.5;pointer-events:none}
.sf-lanego__terms{justify-self:center;font-size:14px}
/* الصنف المقصود برابط #p{id} */
.sf-p.is-spot{border-color:var(--or);box-shadow:0 0 0 3px rgba(194,65,12,.28),var(--sh);animation:sfSpot 1.6s ease-out 1}
@keyframes sfSpot{0%{box-shadow:0 0 0 0 rgba(194,65,12,.55)}100%{box-shadow:0 0 0 3px rgba(194,65,12,.28),var(--sh)}}
.sf--off .sf-bar{display:none}
@media (max-width:760px){
  .sf-top>.lc-wrap .lc-btn{padding:0 9px;gap:6px}
  .sf-step--w b{min-width:0;flex:1}
  .sf-hero .ln-promise--store{display:flex}
}
@media (max-width:359px){.sf-top>.lc-wrap .lc-btn__div{display:none}}