/* الهيدر زي إيكيا (قرار منصور 29 سبتمبر): شريط إعلان، شعار + بحث كبير + أيقونات، سطر روابط، وشريط سفلي على الجوال. */
:root,:root[data-skin=shop]{--rh-bg:#fff;--rh-ink:#1c1b19;--rh-soft:#f1f0ec;--rh-line:#e4e1da;--rh-mute:#6b665c;--rh-brand:#83601f;--rh-ann:#f1f0ec;--rh-ann-ink:#45413a;--rh-on:#6a4327;--rh-on-soft:#f3ebe0}
:root[data-skin=night]{--rh-bg:#0c0c0f;--rh-ink:#f2efe8;--rh-soft:#1a191f;--rh-line:#26252c;--rh-mute:#8e8898;--rh-brand:#d4a859;--rh-ann:#121216;--rh-ann-ink:#cbc4b5;--rh-on:#e2be74;--rh-on-soft:#2a2215}

.rh{--hdr:var(--rh-bg);--hdr-ink:var(--rh-ink);--brand:var(--rh-brand);position:sticky;top:0;z-index:40;background:var(--rh-bg);color:var(--rh-ink);border-bottom:1px solid var(--rh-line)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
.rh .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* شريط الإعلان */
.rh__ann{background:var(--rh-ann);color:var(--rh-ann-ink);font:500 12.5px/1 var(--fb);overflow:hidden}
.rh__ann-in{position:relative;height:32px;max-width:1240px;margin:0 auto;display:grid;place-items:center}
.rh__ann-i{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);white-space:nowrap}
.rh__ann-i.on{opacity:1;transform:none}
.rh__ann b{font-weight:700;color:var(--rh-ink)}

/* السطر الرئيسي */
.rh__main{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand icons" "search search";align-items:center;column-gap:8px;padding:0 12px}
.rh__brand{grid-area:brand;height:56px;margin:0!important;padding:0!important}
.rh__icons{grid-area:icons;display:flex;align-items:center;justify-content:flex-end;gap:2px}
.rh__search{grid-area:search;padding:0 0 10px;margin:0;min-width:0}
.rh__sbox{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:var(--rh-soft);border:1.5px solid transparent;color:var(--rh-mute);cursor:text;transition:border-color .2s,background .2s}
.rh__sbox:focus-within{border-color:var(--rh-ink);background:var(--rh-bg);color:var(--rh-ink)}
.rh__sbox input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;color:var(--rh-ink);font:500 15px/1 var(--fb)}
.rh__sbox input::placeholder{color:var(--rh-mute)}
.rh__sbox input::-webkit-search-cancel-button{-webkit-appearance:none}
.rh .hdr__ic{width:42px;height:42px;color:var(--rh-ink)}
.rh .hdr__ic:hover{background:var(--rh-soft)}
.rh .hdr__ic i,.rh__n{position:absolute;top:0;inset-inline-end:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--rh-on);color:var(--rh-bg);font:700 9.5px/16px var(--fb);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--rh-bg)}
.rh__lab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rh__dk,.rh__sbtn{display:none!important}
.rh .hdr__mode{height:34px;padding:0 9px;border-color:var(--rh-line);border-radius:999px;color:var(--rh-ink)}

/* الجوال لما تنزل: الإعلان والبحث بيختفوا والعدسة تظهر */
.rh.is-compact .rh__ann,.rh.is-compact .rh__search{display:none}
.rh.is-compact .rh__sbtn{display:grid!important}

/* سطر الروابط (الكمبيوتر بس) */
.rh__nav{display:none!important}

/* الشريط السفلي */
.rh__tab{position:fixed;inset:auto 0 0 0;z-index:42;display:grid;grid-template-columns:repeat(5,1fr);height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--rh-bg);border-top:1px solid var(--rh-line)}
.rh__tab>a,.rh__tab>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--rh-mute);text-decoration:none;font:600 11px/1 var(--fb);padding:0}
.rh__tab .ico{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rh__tab [aria-current=page],.rh__tab [aria-expanded=true]{color:var(--rh-ink)}
.rh__tab [aria-current=page]::before,.rh__tab [aria-expanded=true]::before{content:"";position:absolute;top:0;width:28px;height:2.5px;border-radius:0 0 3px 3px;background:var(--rh-on)}
.rh__tab .rh__n{top:6px;inset-inline-end:calc(50% - 20px)}
.rh__tab:has([aria-expanded=true]) [aria-current=page]{color:var(--rh-mute)}
.rh__tab:has([aria-expanded=true]) [aria-current=page]::before{display:none}
body:has(.rh__tab) .menu{bottom:calc(60px + env(safe-area-inset-bottom))}
body:has(.rh__tab) .wa{bottom:calc(72px + env(safe-area-inset-bottom))}

/* القائمة على الجوال */
.menu__quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu__quick a{display:flex;align-items:center;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);color:var(--ink);text-decoration:none;font:700 15px/1.3 var(--fb)}
.menu__quick .menu__track{background:var(--rh-on-soft);border-color:transparent;color:var(--rh-on)}
.menu__more{display:flex;flex-wrap:wrap;gap:4px 18px;padding:10px 4px 4px}
.menu__more a{color:var(--mute);text-decoration:none;font:600 14px/2 var(--fb)}

/* البحث */
.srch{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--rh-bg);color:var(--rh-ink)}
.srch[hidden]{display:none}
.srch__bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid var(--rh-line)}
.srch__box{flex:1;min-width:0}
.srch__x{border:0;background:none;color:var(--rh-ink);font:700 14px/1 var(--fb);padding:10px 4px}
.srch__body{flex:1;overflow:auto;padding:6px 16px 24px;overscroll-behavior:contain}
.srch__sec{padding:14px 0 4px}
.srch__h{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font:700 13px/1 var(--fb);color:var(--rh-mute)}
.srch__h button{border:0;background:none;color:var(--rh-on);font:600 13px/1 var(--fb);padding:4px}
.srch__chips{display:flex;flex-wrap:wrap;gap:8px}
.srch__chips a,.srch__chips button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--rh-line);border-radius:999px;background:var(--rh-bg);color:var(--rh-ink);text-decoration:none;font:600 14px/1 var(--fb);cursor:pointer}
.srch__chips .ico{width:16px;height:16px;color:var(--rh-mute)}
.srch__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.srch__cat{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--rh-line);color:var(--rh-ink);text-decoration:none;font:600 15px/1.3 var(--fb)}
.srch__cat small{color:var(--rh-mute);font-weight:500}
.srch__p{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:8px 4px;border-radius:10px;color:var(--rh-ink);text-decoration:none}
.srch__p:hover,.srch__p:focus-visible,.srch__cat:focus-visible{background:var(--rh-soft);outline:0}
.srch__p img,.srch__p .srch__ph{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--rh-soft)}
.srch__p b{display:block;font:600 14.5px/1.35 var(--fb);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srch__p em{font:700 14px/1.6 var(--fb);font-style:normal;font-variant-numeric:tabular-nums}
.srch__all{display:flex;align-items:center;justify-content:center;margin-top:14px;min-height:46px;border-radius:999px;background:var(--rh-ink);color:var(--rh-bg);text-decoration:none;font:700 14.5px/1 var(--fb)}
.srch__none{padding:18px 4px;color:var(--rh-mute);font:500 14.5px/1.7 var(--fb)}
.srch mark{background:none;color:inherit;font-weight:800}
body.srch-open{overflow:hidden}

/* المفضلة */
.wlp{max-width:1240px;margin:0 auto;padding:18px 16px 40px}
.wlp h1{margin:0;font:800 28px/1.2 var(--fd)}
.wlp__lead{margin:6px 0 18px;color:var(--mute)}
.wlp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wlc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);overflow:hidden}
.wlc a.wlc__img{display:block;aspect-ratio:1;background:var(--bg2)}
.wlc a.wlc__img img{width:100%;height:100%;object-fit:cover}
.wlc__b{display:grid;gap:4px;padding:10px 12px 12px}
.wlc__b a{color:var(--ink);text-decoration:none;font:600 14px/1.4 var(--fb);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wlc__b em{font:700 15px/1.4 var(--fb);font-style:normal;font-variant-numeric:tabular-nums}
.wlc__x{position:absolute;top:8px;inset-inline-end:8px;width:36px;height:36px;border:0;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--rh-on);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.wlc__x svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.6}
.wlp__empty{padding:30px 0;text-align:center;color:var(--mute)}
.wlp__btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--btn);color:var(--on-btn);text-decoration:none;font:700 15px/1 var(--fb)}

@media (min-width:900px){
 .rh__ann-in{display:flex;justify-content:center;gap:28px}
 .rh__ann-i{grid-area:auto;opacity:1;transform:none}
 .rh__ann-i+.rh__ann-i::before{content:"·";margin-inline-end:28px;color:var(--rh-mute)}
 .rh__main{grid-template-columns:auto minmax(0,640px) 1fr;grid-template-areas:"brand search icons";column-gap:28px;padding:0 24px}
 .rh__brand{height:72px}
 .rh__search{padding:0}
 .rh__sbox{height:46px}
 .rh__dk{display:grid!important}
 .rh.is-compact .rh__ann,.rh.is-compact .rh__search{display:block}
 .rh.is-compact .rh__search{display:block}
 .rh.is-compact .rh__sbtn{display:none!important}
 .rh__nav{display:block!important;border-top:1px solid var(--rh-line)}
 .rh__nav-in{max-width:1240px;margin:0 auto;height:48px;padding:0 16px;display:flex;align-items:center;gap:2px}
 .rh__nav a,.rh__nav .mega__b{height:36px;display:inline-flex;align-items:center;gap:5px;padding:0 14px;border-radius:999px!important;color:var(--rh-ink)!important;text-decoration:none;font:600 14.5px/1 var(--fb);background:none}
 .rh__nav a:hover,.rh__nav .mega__b:hover,.rh__nav .mega__b[aria-expanded=true]{background:var(--rh-soft)}
 .rh__nav a.on,.rh__nav .mega__b.on{background:var(--rh-soft);font-weight:700}
 .rh__nav .rh__track{margin-inline-start:auto;background:var(--rh-on-soft);color:var(--rh-on)!important;font-weight:700}
 .rh__nav .rh__track .ico{width:18px;height:18px}
 .rh__tab{display:none}
 .srch{inset:var(--srch-top,120px) auto auto var(--srch-x,0);width:var(--srch-w,640px);max-height:min(70vh,640px);border:1px solid var(--rh-line);border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.35)}
 .srch__bar{display:none}
 .srch__body{padding:4px 20px 20px}
 .wlp{padding:28px 32px 60px}
 .wlp__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
/* الهيدر مصمت في الوضعين: قواعد قديمة في site.css كانت بتخليه شفاف 66٪ في الليلي فالمحتوى بيبان من تحته وانت نازل */
:root[data-skin] .hdr.rh,:root .hdr.rh{background:var(--rh-bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* التلفونات الصغيرة (أقل من 400): اللوجو و6 أيقونات بـ42 كانوا محتاجين ~380 بكسل، فالصفحة كلها كانت بتعرض أعرض من الشاشة وتصغر */
@media (max-width:899px){.rh__main{grid-template-columns:minmax(0,auto) minmax(0,1fr)}}
.rh__brand,.rh__icons{min-width:0}
@media (max-width:399px){
 .rh__main{column-gap:4px;padding:0 8px}
 .rh__icons{gap:0}
 .rh .hdr__ic{width:36px;height:36px}
 .rh .hdr__ic svg{width:20px;height:20px}
 .rh .hdr__mode{height:32px;padding:0 7px}
 .rh__brand svg,.rh__brand img{max-width:100%;height:auto}
 .rh__brand{overflow:hidden}
}
@media (max-width:339px){.rh .hdr__ic{width:33px;height:36px}}
/* شريط التنقل السفلي على التابلت: الأعمدة بتنكمش بدل ما تعدّي الشاشة */
.rh__tab{grid-template-columns:repeat(5,minmax(0,1fr));max-width:100vw}
.rh__tab>a,.rh__tab>button{min-width:0}

/* إطار الكمبيوتر الموحّد: محتوى 1240 بحواف 32 زي الرئيسية */
@media (min-width:900px){.rh__main,.rh__nav-in,.rh__ann-in{max-width:1304px;padding-inline:32px}}

/* قائمة «الأقسام» على الجوال: بتغطي الشاشة كلها من فوق لحد الشريط اللي تحت بخلفية صريحة، والصفحة اللي وراها ماتتحركش
   (كانت بتبدأ من تحت الهيدر لحظة الضغط، فلو نازل في الصفحة يبان جزء منها فوق ويتحرك معاك) */
@media (max-width:899px){
 .menu{inset:0 0 0 0;padding-top:calc(16px + env(safe-area-inset-top));background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;overscroll-behavior:contain}
 body:has(.rh__tab) .menu{bottom:calc(60px + env(safe-area-inset-bottom))}
 html:has(body.menu-open),body.menu-open{overflow:hidden}
 body.menu-open .wa{display:none}
}
/* رأس القائمة: العنوان وزرار إغلاق (في صفحات المنتج مفيش الشريط اللي تحت يقفلها) */
.menu__hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.menu__hd b{font:800 18px/1.3 var(--fd);color:var(--ink)}
.menu__x{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.menu__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (min-width:900px){.menu__hd{display:none}}
/* عرض الشاشة كامل (انظر site.css) */
@media (min-width:900px){.rh__main,.rh__nav-in,.rh__ann-in,.wlp{max-width:var(--wrap-max);padding-inline:var(--wrap-pad)}}
@media (min-width:1600px){.wlp__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:2000px){.wlp__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* البحث بالصور: زرار الكاميرا في آخر خانة البحث + صورة العميل فوق النتايج */
.rh__cam{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-inline-end:-8px;border:0;border-radius:50%;background:transparent;color:var(--rh-ink);cursor:pointer}
.rh__cam:hover,.rh__cam:focus-visible{background:var(--rh-bg);outline:0}
.rh__cam svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vis__q{display:flex;align-items:center;gap:12px;padding:6px 4px;color:var(--rh-mute);font:600 14px/1.5 var(--fb)}
.vis__q img{width:72px;height:72px;border-radius:10px;object-fit:cover;border:1px solid var(--rh-line)}

/* شرح البحث بالصورة: لوح من تحت على الجوال، ومن الجنب على الكمبيوتر */
.visg{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.visg__bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.visg__in{position:relative;display:flex;flex-direction:column;width:100%;max-height:92dvh;background:var(--rh-bg);color:var(--rh-ink);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 40px -12px rgba(0,0,0,.35)}
.visg__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 10px}
.visg__hd h2{margin:0;font:800 19px/1.4 var(--fb)}
.visg__x{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-inline-end:-8px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.visg__x:hover,.visg__x:focus-visible{background:var(--rh-line);outline:0}
.visg__x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.visg__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 12px}
.visg__lead{margin:0 0 14px;font:500 15px/1.7 var(--fb);color:var(--rh-ink)}
.visg__tips{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.visg__tips li{display:flex;align-items:center;gap:10px;font:600 14px/1.5 var(--fb);color:var(--rh-mute)}
.visg__tips b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--rh-line);color:var(--rh-ink);font:800 13px/1 var(--fb)}
.visg__h{margin:0 0 10px;font:800 15px/1.5 var(--fb)}
.visg__try{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.visg__try button{display:block;aspect-ratio:1;padding:0;border:1px solid var(--rh-line);border-radius:12px;background:#fff;overflow:hidden;cursor:pointer}
.visg__try button:hover,.visg__try button:focus-visible{outline:2px solid var(--rh-ink);outline-offset:2px}
.visg__try img{width:100%;height:100%;object-fit:contain;display:block}
.visg__ft{padding:12px 20px 18px;border-top:1px solid var(--rh-line)}
.visg__priv{margin:0 0 12px;font:500 12.5px/1.7 var(--fb);color:var(--rh-mute)}
.visg__go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border:0;border-radius:999px;background:var(--rh-ink);color:var(--rh-bg);font:800 16px/1.3 var(--fb);cursor:pointer}
.visg__go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
html.visg-on,html.visg-on body{overflow:hidden}
.vis__again{display:block;margin:6px auto 14px;padding:10px 20px;border:1px solid var(--rh-line);border-radius:999px;background:transparent;color:var(--rh-ink);font:700 14px/1.3 var(--fb);cursor:pointer}
@media (min-width:900px){
  .visg{justify-content:flex-end;align-items:stretch}
  .visg__in{width:440px;max-height:none;height:100%;border-radius:0 20px 20px 0;box-shadow:12px 0 40px -12px rgba(0,0,0,.35)}
  .visg__hd{padding:24px 28px 12px}
  .visg__body{padding:0 28px 16px}
  .visg__ft{padding:14px 28px 24px}
}

/* لوحة «أكمل طلبك» بعد الإضافة للسلة */
.add__ok{width:24px;height:24px;margin-inline-end:8px;vertical-align:-5px;fill:none;stroke:#2f7a45;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.add__it{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--rh-line);border-radius:14px;margin:0 0 16px;font:700 14.5px/1.4 var(--fb)}
.add__it img{width:64px;height:64px;border-radius:10px;object-fit:contain;background:#f3f2ef}
.add__it:empty{display:none}
.add__sub{margin:-6px 0 10px;font:500 13px/1.5 var(--fb);color:var(--rh-mute)}
.add__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.add__p{display:grid;gap:6px;border:1px solid var(--rh-line);border-radius:12px;padding:8px;background:var(--rh-bg)}
.add__p a{display:grid;gap:4px;color:inherit;text-decoration:none;min-width:0}
.add__p img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;background:#f3f2ef}
.add__p b{font:700 13px/1.35 var(--fb);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.add__p em{font:700 13px/1.2 var(--fb);font-style:normal;color:var(--rh-mute)}
.add__b{min-height:36px;border:1px solid var(--rh-ink);border-radius:999px;background:transparent;color:var(--rh-ink);font:700 13px/1 var(--fb);cursor:pointer}
.add__b:disabled{border-color:var(--rh-line);color:var(--rh-mute)}
.add__ft{display:grid;gap:8px}
.visg__go--ghost{background:transparent;color:var(--rh-ink);border:1px solid var(--rh-line)}
a.visg__go{text-decoration:none}
@media (min-width:900px){.add__list{grid-template-columns:repeat(3,minmax(0,1fr))}.add__ft{grid-template-columns:1fr 1fr}}