/* ══════════════ Infinity Store · Theme ══════════════ */
/* color-scheme:dark tells browsers that force a night mode (Samsung
   Internet, Mi Browser, …) that this page is ALREADY dark — so they
   must not remap its colors (gold button → brown, gradient title
   → invisible). Chrome never force-darkens page content, which is
   why it always showed the true colors. */
:root{
  color-scheme:dark;
  --bg:#0A0A2E;
  --bg-soft:#12123a;
  --bg-card:#161644;
  --bg-card-2:#1b1b4f;
  --text:#f2f2ff;
  --muted:#a9a9cf;
  --gold:#F2B33D;
  --gold-soft:#ffcf6e;
  --teal:#2DD4A8;
  --pink:#E94F6E;
  --line:rgba(255,255,255,.09);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --grad:linear-gradient(135deg,var(--teal),var(--pink),var(--gold));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* ── fix13: حماية المحتوى — منع تحديد/نسخ النصوص والصور ──
   حقول الإدخال مستثناة لتبقى النماذج قابلة للاستعمال */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;
  user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}
body{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(45,212,168,.12),transparent 60%),
             radial-gradient(1000px 500px at 10% 10%,rgba(233,79,110,.10),transparent 60%),
             var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{width:min(1200px,92%);margin:0 auto}
[dir="rtl"] body, body[dir="rtl"]{direction:rtl}

/* ── Header ── */
.topbar{background:rgba(10,10,46,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.topbar .container{display:flex;align-items:center;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.25rem}
.brand img{width:44px;height:44px;border-radius:12px;object-fit:cover;
  box-shadow:0 0 18px rgba(242,179,61,.45)}
.brand .tag{font-size:.72rem;color:var(--muted);font-weight:400;display:block;line-height:1.2}
.nav{display:flex;gap:1.1rem;margin-inline-start:auto;align-items:center}
.nav a{padding:.35rem .2rem;color:var(--muted);font-weight:600;position:relative;transition:.2s}
.nav a:hover,.nav a.active{color:var(--gold-soft)}
.nav a.active::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:2px;
  background:var(--grad);border-radius:2px}
.header-tools{display:flex;gap:.5rem;align-items:center;flex:1}
/* fix31: two separated groups — locale on one side, account on the other, empty middle */
.locale-group{display:flex;gap:.5rem;align-items:center}
.account-group{display:flex;gap:.5rem;align-items:center;margin-inline-start:auto}
.select{background:var(--bg-card);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:.4rem .6rem;font-size:.85rem;cursor:pointer}
.cart-btn,.locale-btn{position:relative;background:var(--bg-card);border:1px solid var(--line);
  border-radius:12px;padding:.45rem .8rem;font-weight:700;transition:.2s}
.cart-btn:hover,.locale-btn:hover{border-color:var(--gold);box-shadow:0 0 14px rgba(242,179,61,.35)}
/* fix32: locale buttons smaller + white (keep cart-btn silhouette, slimmer) */
.locale-btn{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;color:#fff;
  font:inherit;font-size:.92rem;font-weight:700;padding:.45rem .8rem;letter-spacing:.01em}
.locale-btn .ic{display:flex;color:#fff}
.locale-btn .ic svg{width:1.45em;height:1.45em}
.locale-btn .locale-val{color:#fff;font-weight:700}
.locale-group{gap:.4rem}
.locale-val{line-height:1;white-space:nowrap}
.cart-count{position:absolute;top:-8px;inset-inline-end:-8px;background:var(--pink);
  color:#fff;font-size:.7rem;min-width:20px;height:20px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:0 5px}
.btn{display:inline-block;border:none;cursor:pointer;font-weight:700;border-radius:12px;
  padding:.7rem 1.6rem;transition:.25s;font-size:1rem}
.btn-grad{background:var(--grad);color:#0A0A2E;background-size:150% 150%}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(233,79,110,.4)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#0A0A2E}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(242,179,61,.45)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{padding:.4rem .9rem;font-size:.85rem}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:.4rem .7rem;font-size:1.2rem;cursor:pointer}

/* ── Hero ── */
.hero{padding:4.5rem 0 3.5rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 0%,rgba(242,179,61,.14),transparent 70%);
  pointer-events:none}
.hero-badge{display:inline-block;background:rgba(45,212,168,.12);border:1px solid rgba(45,212,168,.4);
  color:var(--teal);border-radius:999px;padding:.3rem 1.1rem;font-size:.85rem;font-weight:700;margin-bottom:1.2rem}
.hero h1{font-size:clamp(1.8rem,4.5vw,3.2rem);line-height:1.4;margin-bottom:1rem;
  background:linear-gradient(120deg,#fff,var(--gold-soft));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:640px;margin:0 auto 2rem;font-size:1.1rem}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── Sections ── */
.section{padding:3rem 0}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.section-title h2{font-size:1.6rem}
.section-title h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.link-more{color:var(--gold);font-weight:700}
.link-more:hover{text-decoration:underline}

/* ── Product cards ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.card{background:linear-gradient(160deg,var(--bg-card),var(--bg-card-2));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.3s;position:relative;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);border-color:rgba(242,179,61,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px rgba(242,179,61,.18)}
.card-img{aspect-ratio:16/10;min-height:150px;background:linear-gradient(135deg,#1c1c55,#2a2a6e);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-img .ph{font-size:3rem;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.badge-featured{position:absolute;top:10px;inset-inline-start:10px;background:var(--grad);
  color:#0A0A2E;font-size:.72rem;font-weight:800;border-radius:8px;padding:.2rem .6rem}
.badge-off{position:absolute;top:10px;inset-inline-end:10px;background:var(--pink);
  color:#fff;font-size:.72rem;font-weight:800;border-radius:8px;padding:.2rem .6rem}
.card-body{padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-cat{font-size:.75rem;color:var(--teal);font-weight:700}
.card-title{font-size:1.05rem;font-weight:700;line-height:1.5}
.card-price{margin-top:auto;display:flex;align-items:center;gap:.6rem}
.price{color:var(--gold);font-weight:800;font-size:1.2rem}
.old-price{color:var(--muted);text-decoration:line-through;font-size:.9rem}
.card-actions{display:flex;gap:.5rem;margin-top:.4rem}

/* ── Categories: glowing circles ── */
/* ── v18: شبكة 3×2 منظمة (بدون سلايدر) ── */
.cat-hero-sub{text-align:center;color:var(--muted);max-width:640px;
  margin:-.4rem auto 1.2rem;font-size:.95rem;line-height:1.9}
.cat-grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:1.9rem .8rem;
  max-width:560px;margin-inline:auto;padding:1rem 0 .6rem;justify-items:center}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:120px;
  text-decoration:none;opacity:0;animation:catFadeUp .55s ease forwards}
.cat-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 26%,#20205c,#0a0a2e 72%);
  border:2px solid rgba(242,179,61,.55);
  box-shadow:0 0 18px rgba(242,179,61,.22),inset 0 0 20px rgba(242,179,61,.08);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;overflow:hidden}
/* ── v25: luxury SVG icons ── */
.ic{display:inline-flex;vertical-align:-.18em}
.ic svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cart-btn .ic svg{width:1.3em;height:1.3em}
.menu-toggle .ic svg{width:1.4em;height:1.4em}
.fi .ic svg{width:2rem;height:2rem;stroke:#f2b33d}
.pay-opt .pi .ic svg{width:2rem;height:2rem}
.empty .big .ic svg{width:3rem;height:3rem}
.success-hero .ok .ic svg{width:4.5rem;height:4.5rem}
.badge-featured .ic svg,.badge-new .ic svg{width:1em;height:1em}
.cat-ico{display:inline-flex;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.cat-ico .ic svg{width:1.9rem;height:1.9rem;stroke:#f2b33d}
.cat-grid6.cc-s .cat-ico .ic svg{width:1.5rem;height:1.5rem}
.cat-grid6.cc-l .cat-ico .ic svg{width:2.4rem;height:2.4rem}
.cat-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:.92;
  box-shadow:0 0 14px rgba(242,179,61,.35);
  transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease}
.cat-item:hover .cat-circle img,.cat-item:focus-visible .cat-circle img{opacity:1;transform:scale(1.1);
  box-shadow:0 0 22px rgba(242,179,61,.55)}
/* ── v24: أحجام دوائر التصنيفات (m=72px هو الافتراضي أعلاه) ── */
.cat-grid6.cc-s .cat-circle{width:56px;height:56px}
.cat-grid6.cc-l .cat-circle{width:88px;height:88px}
.cat-item:hover .cat-circle,.cat-item:focus-visible .cat-circle{transform:translateY(-7px);
  border-color:var(--gold);
  box-shadow:0 0 32px rgba(242,179,61,.5),0 12px 26px rgba(0,0,0,.5),inset 0 0 24px rgba(242,179,61,.15)}
/* ── لمسة احترافية على الهاتف: بلا وميض أبيض، ضغط ناعم متجاوب ── */
.cat-item{-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;outline:none}
.cat-item:focus{outline:none}
.cat-item:focus-visible{outline:none}
.cat-item:focus-visible .cat-circle{border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(242,179,61,.35),0 0 26px rgba(242,179,61,.45)}
.cat-item:active .cat-circle{transform:scale(.9);
  border-color:var(--gold);
  box-shadow:0 0 14px rgba(242,179,61,.55),inset 0 0 30px rgba(242,179,61,.28);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.cat-name{font-family:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif;font-weight:700;
  font-size:.93rem;color:var(--text);text-align:center;line-height:1.45}
.cat-count{font-size:.74rem;color:var(--muted)}
@keyframes catFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* ── v17: شريط الثقة + بطاقة CTA ── */
.trust-strip-sec{text-align:center}
.trust-title{font-family:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif;font-weight:800;
  font-size:1.25rem;color:var(--text);margin:0 0 1.4rem}
/* ── fix12: عنوان أنيق بخطين ذهبيين ── */
.trust-title{display:flex;align-items:center;justify-content:center;gap:.9rem;
  font-size:1rem;letter-spacing:2.5px;color:#f2b33d;margin-bottom:1.5rem}
.trust-title::before,.trust-title::after{content:"";height:1px;width:80px}
.trust-title::before{background:linear-gradient(90deg,transparent,rgba(242,179,61,.75))}
.trust-title::after{background:linear-gradient(90deg,rgba(242,179,61,.75),transparent)}
/* ── fix12: شبكة ثقة فاخرة — ظهور سينمائي متدرج ──
   ظاهرة افتراضيًا دون JS؛ الحركة فقط مع .trust-anim وتحترم تقليل الحركة */
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem 1.4rem;
  max-width:920px;margin-inline:auto;text-align:start}
.trust-item{display:flex;align-items:center;gap:.7rem}
.trust-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  position:relative;
  border:1px solid rgba(242,179,61,.55);
  background:radial-gradient(circle at 50% 35%,rgba(242,179,61,.25),rgba(242,179,61,.05) 72%);
  box-shadow:0 0 14px rgba(242,179,61,.18),inset 0 0 10px rgba(242,179,61,.12)}
.trust-ic svg{width:20px;height:20px;fill:none;stroke:#f2b33d;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.trust-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(242,179,61,.16)}
.trust-item .tt{font-size:.9rem;font-weight:700;color:#f5f1e6}
@media (prefers-reduced-motion:no-preference){
  .trust-grid.trust-anim .trust-item{opacity:0;filter:blur(9px);transform:translateY(20px)}
  .trust-grid.trust-anim .trust-item.in{opacity:1;filter:blur(0);transform:none;
    transition:opacity .75s ease,filter .75s ease,transform .75s cubic-bezier(.2,.8,.3,1)}
  /* تنفس ذهبي متسلسل على الأيقونات */
  .trust-grid.trust-anim .trust-item.in .trust-ic{animation:trustBreathe 6s ease-in-out infinite}
  .trust-grid.trust-anim .trust-item:nth-child(1).in .trust-ic{animation-delay:0s}
  .trust-grid.trust-anim .trust-item:nth-child(2).in .trust-ic{animation-delay:1s}
  .trust-grid.trust-anim .trust-item:nth-child(3).in .trust-ic{animation-delay:2s}
  .trust-grid.trust-anim .trust-item:nth-child(4).in .trust-ic{animation-delay:3s}
  .trust-grid.trust-anim .trust-item:nth-child(5).in .trust-ic{animation-delay:4s}
  .trust-grid.trust-anim .trust-item:nth-child(6).in .trust-ic{animation-delay:5s}
  .trust-item:hover .trust-ic{border-color:rgba(242,179,61,.95);
    box-shadow:0 0 32px rgba(242,179,61,.5),inset 0 0 14px rgba(242,179,61,.2)}
  .trust-item .trust-ic{transition:border-color .3s,box-shadow .3s}
}
@keyframes trustBreathe{
  0%,100%{box-shadow:0 0 18px rgba(242,179,61,.2),inset 0 0 12px rgba(242,179,61,.12)}
  50%{box-shadow:0 0 34px rgba(242,179,61,.5),inset 0 0 16px rgba(242,179,61,.22)}}
/* ── v18: قسم المنتجات المميزة الفاخر ── */
.sec-title-lux{position:relative}
.sec-title-lux h2::after{content:"";display:block;width:72px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),transparent);margin-top:.5rem;
  box-shadow:0 0 12px rgba(242,179,61,.55)}
.grid.grid-lux{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.7rem}
.grid-lux .card{border:1px solid rgba(242,179,61,.35);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 20px rgba(242,179,61,.10)}
.grid-lux .card:hover{transform:translateY(-8px);border-color:var(--gold);
  box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 34px rgba(242,179,61,.28)}
.grid-lux .badge-featured{background:linear-gradient(135deg,#f6c453,#d99a26);color:#221503;
  box-shadow:0 0 14px rgba(242,179,61,.55)}
/* ── v18: قسم وصل حديثًا — هوية فيروزية مميزة ── */
.sec-title-new h2::after{content:"";display:block;width:72px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),transparent);margin-top:.5rem;
  box-shadow:0 0 12px rgba(45,212,168,.5)}
.grid-new .card{border-top:2px solid rgba(45,212,168,.55)}
.grid-new .card:hover{border-color:rgba(45,212,168,.6);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 24px rgba(45,212,168,.16)}
.badge-new{position:absolute;top:10px;inset-inline-end:10px;
  background:linear-gradient(135deg,#2dd4a8,#1a9e78);color:#06281e;
  font-size:.72rem;font-weight:800;border-radius:8px;padding:.2rem .6rem;
  box-shadow:0 0 12px rgba(45,212,168,.5)}
.card-img:has(> .badge-off) > .badge-new{top:40px}

/* ── Features ── */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.feature{background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem;transition:.25s}
.feature:hover{border-color:rgba(45,212,168,.5);transform:translateY(-4px)}
.feature .fi{font-size:2rem;margin-bottom:.6rem;display:block}
.feature h3{margin-bottom:.4rem;color:var(--gold-soft)}
.feature p{color:var(--muted);font-size:.92rem}

/* ── v24: «لماذا إنفينيتي ستور» — ظهور متسلسل مبهر ──
   البطاقات ظاهرة افتراضيًا دون JS؛ الحركة تُفعَّل فقط عند إضافة
   JS لكلاس why-play، وتُلغى تمامًا مع prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .why-play .feature{position:relative;overflow:hidden;
    animation:whyUp .7s cubic-bezier(.22,.8,.32,1.12) backwards}
  .why-play .feature:nth-child(1){animation-delay:.05s}
  .why-play .feature:nth-child(2){animation-delay:.25s}
  .why-play .feature:nth-child(3){animation-delay:.45s}
  .why-play .feature:nth-child(4){animation-delay:.65s}
  .why-play .feature .fi{animation:whyIcon .9s ease backwards}
  .why-play .feature:nth-child(1) .fi{animation-delay:.4s}
  .why-play .feature:nth-child(2) .fi{animation-delay:.6s}
  .why-play .feature:nth-child(3) .fi{animation-delay:.8s}
  .why-play .feature:nth-child(4) .fi{animation-delay:1s}
  .why-play .feature::after{content:"";position:absolute;top:-25%;bottom:-25%;
    width:45%;left:-70%;transform:skewX(-18deg);pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,236,190,.13),transparent);
    animation:whyShine 1.1s ease backwards}
  .why-play .feature:nth-child(1)::after{animation-delay:1.2s}
  .why-play .feature:nth-child(2)::after{animation-delay:1.35s}
  .why-play .feature:nth-child(3)::after{animation-delay:1.5s}
  .why-play .feature:nth-child(4)::after{animation-delay:1.65s}
}
@keyframes whyUp{
  0%{opacity:0;transform:translateY(32px) scale(.96)}
  55%{opacity:1;transform:translateY(-4px) scale(1.015);
    border-color:rgba(242,179,61,.75);
    box-shadow:0 0 36px rgba(242,179,61,.5),0 14px 30px rgba(0,0,0,.45),
      inset 0 0 24px rgba(242,179,61,.12)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes whyIcon{
  0%{transform:scale(.7)}
  50%{transform:scale(1.28);filter:drop-shadow(0 0 12px rgba(242,179,61,.85))}
  100%{transform:scale(1)}
}
@keyframes whyShine{
  0%{left:-70%;opacity:0}
  18%{opacity:1}
  100%{left:135%;opacity:0}
}

/* ── CTA banner ── */
.cta{background:linear-gradient(135deg,rgba(45,212,168,.15),rgba(233,79,110,.15),rgba(242,179,61,.15));
  border:1px solid var(--line);border-radius:24px;padding:3rem 2rem;text-align:center;margin:3rem 0}
.cta h2{font-size:1.8rem;margin-bottom:.6rem}
.cta p{color:var(--muted);margin-bottom:1.6rem}

/* ── Forms ── */
.form-card{background:var(--bg-card);border:1px solid var(--line);border-radius:20px;
  padding:2.2rem;max-width:480px;margin:2.5rem auto;box-shadow:var(--shadow)}
.form-card h2{margin-bottom:.4rem}
.form-card .sub{color:var(--muted);margin-bottom:1.6rem;font-size:.95rem}
.field{margin-bottom:1.1rem}
.field label{display:block;margin-bottom:.4rem;font-weight:700;font-size:.9rem}
.input,textarea.input,select.input{width:100%;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:12px;color:var(--text);
  padding:.7rem 1rem;font-size:1rem;font-family:inherit;transition:.2s}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,179,61,.2)}
textarea.input{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.check{display:flex;align-items:center;gap:.6rem;font-weight:600}
.check input{width:18px;height:18px;accent-color:var(--gold)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:.8rem 1rem;text-align:start;border-bottom:1px solid var(--line)}
th{background:rgba(255,255,255,.04);color:var(--gold-soft);font-size:.85rem}
tr:hover td{background:rgba(255,255,255,.02)}

/* ── Badges / status ── */
.st{display:inline-block;border-radius:999px;padding:.2rem .8rem;font-size:.78rem;font-weight:800}
.st-pending{background:rgba(242,179,61,.15);color:var(--gold)}
.st-paid{background:rgba(45,212,168,.15);color:var(--teal)}
.st-processing{background:rgba(80,140,255,.15);color:#6ea8ff}
.st-fulfilled{background:rgba(45,212,168,.2);color:var(--teal)}
.st-cancelled,.st-failed{background:rgba(233,79,110,.15);color:var(--pink)}

/* ── Alerts ── */
.alert{border-radius:12px;padding:.8rem 1.1rem;margin-bottom:1rem;font-weight:600}
.alert-success{background:rgba(45,212,168,.12);border:1px solid rgba(45,212,168,.4);color:var(--teal)}
.alert-error{background:rgba(233,79,110,.12);border:1px solid rgba(233,79,110,.4);color:var(--pink)}
.alert-info{background:rgba(80,140,255,.12);border:1px solid rgba(80,140,255,.4);color:#6ea8ff}

/* ── Cart / checkout ── */
.cart-line{display:flex;gap:1rem;align-items:center;background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.cart-line .thumb{width:70px;height:70px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#1c1c55,#2a2a6e);display:flex;align-items:center;
  justify-content:center;font-size:1.8rem;overflow:hidden}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover}
.cart-line .grow{flex:1}
.cart-line .rm{background:none;border:none;color:var(--pink);cursor:pointer;font-size:.85rem}
.summary{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;position:sticky;top:90px}
.summary .row{display:flex;justify-content:space-between;margin-bottom:.7rem;color:var(--muted)}
.summary .row.grand{color:var(--text);font-weight:800;font-size:1.2rem;
  border-top:1px solid var(--line);padding-top:.8rem}
.pay-opt{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;
  margin-bottom:1rem;cursor:pointer;transition:.2s;display:flex;gap:1rem;align-items:center}
.pay-opt:hover{border-color:var(--gold)}
.pay-opt input{accent-color:var(--gold);width:20px;height:20px}
.pay-opt .pi{font-size:2rem}
.pay-opt small{color:var(--muted);display:block}

/* ── Product detail · v12 professional buy card ── */
.pd-wrap{max-width:1000px;margin:0 auto;padding:2rem 1rem}
.buy-card{background:var(--bg-card);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);padding:2.2rem;margin-bottom:2rem}
.pd-grid{display:grid;grid-template-columns:320px 1fr;gap:2.5rem;align-items:start}
/* small uniform image, thin gold frame, centered */
.pd-img{width:320px;height:320px;max-width:100%;aspect-ratio:1/1;flex:none;
  background:linear-gradient(135deg,#1c1c55,#2a2a6e);
  border:2px solid rgba(242,179,61,.55);border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;color:#F4F6FB;margin-inline:auto}
.pd-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd-cat{display:inline-block;background:rgba(242,179,61,.12);color:var(--gold-soft);
  border:1px solid rgba(242,179,61,.35);border-radius:999px;
  padding:.25rem .9rem;font-size:.8rem;font-weight:700;margin-bottom:.6rem}
.pd-info h1{font-size:1.8rem;margin:0 0 .8rem;color:#F4F6FB;line-height:1.5}
.pd-price-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.pd-price{font-size:2rem;color:var(--gold);font-weight:800}
.pd-old{color:var(--muted);text-decoration:line-through;font-size:1.15rem}
.pd-off{background:#b3261e;color:#fff;border-radius:8px;
  padding:.15rem .55rem;font-size:.85rem;font-weight:800}
.pd-short{color:var(--muted);margin:.8rem 0;line-height:1.9}
.perks{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0}
.perk{background:rgba(45,212,168,.08);border:1px solid rgba(45,212,168,.3);color:var(--teal);
  border-radius:10px;padding:.4rem .9rem;font-size:.85rem;font-weight:700}
.buy-box{background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-radius:16px;padding:1.3rem;margin-top:1rem}
.qty-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.qty-row label{font-weight:700;color:#F4F6FB}
.qty-ctl{display:flex;align-items:center;gap:.4rem}
.qty-ctl button{width:40px;height:40px;border-radius:12px;border:1px solid var(--gold);
  background:transparent;color:var(--gold);font-size:1.3rem;font-weight:800;cursor:pointer}
.qty-ctl button:hover{background:rgba(242,179,61,.15)}
.qty-ctl input{width:60px;height:40px;text-align:center;border:1px solid var(--line);
  border-radius:12px;background:var(--bg-soft);color:#F4F6FB;font-weight:800;font-size:1.05rem}
.qty-total{margin-inline-start:auto;color:var(--muted)}
.qty-total strong{color:var(--gold);font-size:1.25rem}
.buy-actions{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.btn-buy{width:100%;padding:.95rem;font-size:1.05rem}
/* full description card */
.pd-desc-card{background:var(--bg-card);border:1px solid var(--line);border-radius:24px;
  padding:2rem 2.2rem;margin-bottom:2rem}
.pd-desc-card h2{font-size:1.3rem;color:#F4F6FB;margin:0 0 1rem}
.pd-desc-full{color:var(--muted);line-height:2.1;white-space:pre-line}

/* ── v13 · Horizontal-overflow defense (product page) ──
   Supplier descriptions often contain long unbroken tokens
   (URLs, license keys, SKUs). These rules guarantee nothing
   inside the product page can push the page wider than the
   phone screen. */
.pd-info h1,.pd-short,.pd-desc-full{overflow-wrap:anywhere;word-break:break-word}
.pd-desc-full img,.pd-desc-full iframe,.pd-desc-full video{max-width:100%;height:auto;display:block}
.pd-desc-full table{display:block;max-width:100%;overflow-x:auto}
.pd-desc-full pre,.pd-desc-full code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.pd-wrap,.buy-card,.pd-desc-card,.pd-grid,.pd-info{min-width:0}

/* ── Admin ── */
.admin-layout{display:grid;grid-template-columns:230px 1fr;gap:1.5rem;padding:2rem 0;min-height:70vh}
.sidebar{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;align-self:start;position:sticky;top:90px}
.sidebar a{display:block;padding:.65rem .9rem;border-radius:10px;color:var(--muted);
  font-weight:600;margin-bottom:.2rem;transition:.2s}
.sidebar a:hover,.sidebar a.active{background:rgba(242,179,61,.12);color:var(--gold-soft)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;margin-bottom:2rem}
.stat{background:linear-gradient(160deg,var(--bg-card),var(--bg-card-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad)}
.stat .num{font-size:1.9rem;font-weight:800;color:var(--gold)}
.stat .lbl{color:var(--muted);font-size:.88rem}
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;margin-bottom:1.5rem}
.panel h3{margin-bottom:1rem}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;gap:.8rem}
.tabs{display:flex;gap:.5rem;margin-bottom:1.4rem;flex-wrap:wrap}
.tabs button{background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:.55rem 1.2rem;cursor:pointer;font-weight:700}
.tabs button.active{background:rgba(242,179,61,.15);color:var(--gold-soft);border-color:var(--gold)}
.tabpane{display:none}.tabpane.active{display:block}

/* ── Footer ── */
footer{border-top:1px solid var(--line);margin-top:3rem;background:rgba(10,10,46,.7)}
footer .container{display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem 0;flex-wrap:wrap;gap:1rem}
footer .flinks{display:flex;gap:1.2rem;color:var(--muted);font-size:.9rem}
footer .flinks a:hover{color:var(--gold-soft)}

/* ── Search / filters ── */
.filters{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem;align-items:center}
.searchbar{display:flex;background:var(--bg-card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;flex:1;min-width:220px}
.searchbar input{flex:1;background:none;border:none;color:var(--text);padding:.65rem 1rem;font-size:1rem}
.searchbar input:focus{outline:none}
.searchbar button{background:var(--grad);border:none;padding:0 1.2rem;cursor:pointer;font-size:1.1rem}

/* ── Misc ── */
.center{text-align:center}
.mt{margin-top:1.5rem}.mb{margin-bottom:1.5rem}
.empty{background:var(--bg-card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:3rem;text-align:center;color:var(--muted)}
.empty .big{font-size:3rem;display:block;margin-bottom:.8rem}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:start}
.success-hero{text-align:center;padding:4rem 0}
.success-hero .ok{font-size:4.5rem;display:block;margin-bottom:1rem}
.page-head{padding:2.2rem 0 .6rem}
.page-head h1{font-size:1.9rem}

/* ── Responsive ── */
@media(max-width:900px){
  .pd-grid{grid-template-columns:1fr}
  .pd-img{margin-inline:auto}
  .two-col{grid-template-columns:1fr}
  .admin-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:720px){
  .menu-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;background:var(--bg-soft);
    border-radius:12px;padding:.6rem}
  .nav.open{display:flex}
  .nav a{padding:.6rem .8rem}
  .header-tools{margin-inline-start:auto}
}

/* ══════════════ v6 · Hero slider ══════════════ */
.hero-slider{position:relative;overflow:hidden;border-radius:24px;margin:1.6rem 0 0;
  border:1px solid var(--line);background:var(--bg-soft);min-height:340px}
.hs-track{position:relative;min-height:340px}
.hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;
  display:flex;align-items:center}
.hs-slide.active{opacity:1;visibility:visible;z-index:2}
.hs-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 260px at 20% 20%,rgba(45,212,168,.16),transparent 60%),
             radial-gradient(500px 260px at 80% 80%,rgba(233,79,110,.14),transparent 60%),
             radial-gradient(400px 220px at 60% 10%,rgba(242,179,61,.12),transparent 60%)}
.hs-inner{position:relative;z-index:2;display:flex;align-items:center;gap:2.5rem;
  width:min(1060px,90%);margin:0 auto;padding:3rem 3.5rem}
.hs-media{flex:0 0 240px}
.hs-media img{width:240px;height:240px;object-fit:cover;border-radius:24px;
  box-shadow:0 0 40px rgba(242,179,61,.35),0 18px 44px rgba(0,0,0,.5);
  animation:hsFloat 5s ease-in-out infinite}
@keyframes hsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ── فقاعات عائمة صغيرة في السلايدر: أشهر المنتجات/التطبيقات ── */
.hero-bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bubble{position:absolute;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(52,52,120,.92),rgba(12,12,50,.94));
  border:1.5px solid rgba(242,179,61,.45);
  box-shadow:0 0 18px rgba(242,179,61,.28),inset 0 0 12px rgba(242,179,61,.12);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  animation:bubbleFloat var(--d,7s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.bubble img{width:72%;height:72%;object-fit:contain;border-radius:50%}
.b0{top:15%;inset-inline-start:5%}
.b1{top:63%;inset-inline-start:11%}
.b2{top:21%;inset-inline-end:6%}
.b3{top:65%;inset-inline-end:12%}
@keyframes bubbleFloat{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(7px)}}
@media(max-width:560px){.bubble{width:42px;height:42px;font-size:1.2rem}
  .b1{inset-inline-start:4%}.b3{inset-inline-end:5%}}
@media(prefers-reduced-motion:reduce){.bubble{animation:none}}
.hs-text{flex:1}
.hs-text h1{font-size:clamp(1.7rem,4vw,2.9rem);line-height:1.45;margin-bottom:.8rem;
  background:linear-gradient(120deg,#fff,var(--gold-soft));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hs-text p{color:var(--muted);font-size:1.08rem;max-width:560px;margin-bottom:1.6rem}
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(18,18,58,.7);color:var(--text);font-size:1.5rem;backdrop-filter:blur(6px);
  transition:.25s;display:flex;align-items:center;justify-content:center;line-height:1}
.hs-arrow:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(242,179,61,.4);color:var(--gold-soft)}
.hs-prev{inset-inline-start:16px}
.hs-next{inset-inline-end:16px}
.hs-dots{position:absolute;bottom:16px;inset-inline:0;z-index:3;display:flex;gap:.5rem;justify-content:center}
.hs-dot{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.25);transition:.25s;padding:0}
.hs-dot.active{background:var(--grad);width:28px;border-radius:6px;
  box-shadow:0 0 12px rgba(242,179,61,.5)}

/* ══════════════ v6 · Product card refresh ══════════════ */
.card-img{height:205px}
.card-hover-cta{position:absolute;inset-inline:12px;bottom:12px;z-index:2;
  background:rgba(10,10,46,.82);backdrop-filter:blur(6px);border:1px solid rgba(242,179,61,.55);
  color:var(--gold-soft);font-weight:800;font-size:.85rem;text-align:center;
  border-radius:10px;padding:.55rem;opacity:0;transform:translateY(10px);transition:.3s;
  box-shadow:0 0 18px rgba(242,179,61,.3)}
.card:hover .card-hover-cta{opacity:1;transform:translateY(0)}
.card-form{margin-top:.5rem}
.card-add-btn{width:100%}
@media(hover:none){
  .card-hover-cta{display:none}
}

/* ══════════════ v6 · Product detail buy box ══════════════ */
.stock-line{margin:.6rem 0 1rem}
.buy-box{background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.3rem;margin:1.2rem 0}
.qty-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.1rem}
.qty-row label{font-weight:700}
.qty-ctl{display:flex;align-items:center;gap:0;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qty-ctl button{width:42px;height:42px;background:none;border:none;color:var(--gold);
  font-size:1.3rem;cursor:pointer;transition:.2s}
.qty-ctl button:hover{background:rgba(242,179,61,.15)}
.qty-ctl input{width:52px;text-align:center;background:none;border:none;color:var(--text);
  font-size:1.1rem;font-weight:800;-moz-appearance:textfield}
.qty-ctl input::-webkit-outer-spin-button,.qty-ctl input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.qty-total{margin-inline-start:auto;font-size:1.05rem;color:var(--muted)}
.qty-total strong{color:var(--gold);font-size:1.35rem}
.buy-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.buy-actions .btn{flex:1;min-width:170px}

/* ══════════════ v6 · Pagination ══════════════ */
.pager{display:flex;gap:.5rem;justify-content:center;margin:2.2rem 0 1rem;flex-wrap:wrap}
.pg-btn{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-card);color:var(--text);
  font-weight:700;padding:0 .9rem;transition:.2s}
.pg-btn:hover{border-color:var(--gold);color:var(--gold-soft)}
.pg-btn.active{background:var(--grad);color:#0A0A2E;border-color:transparent}
.pg-gap{color:var(--muted);align-self:center}

/* ══════════════ v6 · Floating promo card ══════════════ */
.promo-float{position:fixed;bottom:18px;inset-inline-end:18px;z-index:200;width:290px;
  background:linear-gradient(160deg,#1a1a4e,#141438);border:1px solid rgba(242,179,61,.45);
  border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 24px rgba(242,179,61,.22);
  animation:promoIn .5s ease}
@keyframes promoIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.promo-close{position:absolute;top:6px;inset-inline-end:8px;background:none;border:none;
  color:var(--muted);font-size:1.2rem;cursor:pointer;z-index:2;line-height:1;padding:.2rem .4rem}
.promo-close:hover{color:var(--pink)}
.promo-body{display:flex;gap:.8rem;align-items:center;padding:.9rem;text-decoration:none}
.promo-img{width:64px;height:64px;flex-shrink:0;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#1c1c55,#2a2a6e);display:flex;align-items:center;
  justify-content:center;font-size:1.6rem;color:var(--gold)}
.promo-img img{width:100%;height:100%;object-fit:cover}
.promo-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.promo-tag{font-size:.68rem;color:var(--teal);font-weight:800}
.promo-name{font-size:.88rem;font-weight:700;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo-price{color:var(--gold);font-weight:800;font-size:.95rem}
.promo-cta{margin-top:.35rem;padding:.35rem .8rem;font-size:.78rem;align-self:flex-start}
/* ══════════════ v7 · Mobile polish + slider fix + WhatsApp ══════════════ */
.wa-float{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-start:18px;
  z-index:210;width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 8px 26px rgba(37,211,102,.45),0 0 20px rgba(37,211,102,.5);
  animation:waPulse 2.6s ease-in-out infinite;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff;flex-shrink:0}
@keyframes waPulse{0%,100%{box-shadow:0 8px 26px rgba(37,211,102,.45),0 0 14px rgba(37,211,102,.4)}
  50%{box-shadow:0 8px 30px rgba(37,211,102,.6),0 0 32px rgba(37,211,102,.75)}}

@media(max-width:560px){
  /* v13 · last-resort guard: nothing may scroll the page horizontally on phones */
  body{overflow-x:clip}
  /* promo card: keep clear of WhatsApp button (opposite side) */
  .promo-float{width:min(250px,calc(100vw - 96px));bottom:calc(12px + env(safe-area-inset-bottom,0px));inset-inline-end:12px}
  .wa-float{width:54px;height:54px;bottom:calc(14px + env(safe-area-inset-bottom,0px));inset-inline-start:14px}
  .wa-float svg{width:28px;height:28px}

  /* ── Slider: flexible height, full logo, no cropping ── */
  .hero-slider{min-height:0;border-radius:18px}
  .hs-track{min-height:0}
  .hs-slide.active{position:relative} /* active slide defines natural height */
  .hs-inner{flex-direction:column;text-align:center;gap:1.1rem;
    padding:1.8rem 1.2rem 3.4rem;width:min(1060px,94%)}
  .hs-media{flex:none}
  .hs-media img{width:min(190px,55vw);height:auto;object-fit:contain;border-radius:18px}
  .hs-text h1{font-size:clamp(1.28rem,6.5vw,1.65rem);line-height:1.5;margin-bottom:.6rem}
  .hs-text p{font-size:.93rem;line-height:1.7;margin-bottom:1.1rem}
  .hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
  .hero-cta .btn{min-height:44px}
  .hs-arrow{width:34px;height:34px;font-size:1.2rem;top:auto;bottom:14px;transform:none}
  .hs-prev{inset-inline-start:12px}
  .hs-next{inset-inline-end:12px}
  .hs-dots{bottom:22px}

  /* ── Touch-friendly buttons ── */
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .buy-actions{flex-direction:column}
  .buy-actions .btn{flex:1 1 auto;width:100%;min-width:0}
  .qty-ctl button{width:46px;height:46px}

  /* ── Product grid: comfortable 2 columns ── */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
  .card-img{height:132px}
  .card-body{padding:.8rem;gap:.35rem}
  .card-title{font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
  .card-price{font-size:.95rem}
  .cat-grid6{gap:1.5rem .4rem;max-width:100%;padding:.8rem 0 .4rem}
  .cat-item{width:96px;gap:.4rem}
  .cat-circle{width:60px;height:60px}
  /* ── v24: أحجام الدوائر على الهاتف بنسب متناسقة ── */
  .cat-grid6.cc-s .cat-circle{width:46px;height:46px}
  .cat-grid6.cc-s .cat-ico .ic svg{width:1.3rem;height:1.3rem}
  .cat-grid6.cc-l .cat-circle{width:74px;height:74px}
  .cat-grid6.cc-l .cat-ico .ic svg{width:1.9rem;height:1.9rem}
  .cat-ico .ic svg{width:1.6rem;height:1.6rem}
  .cat-name{font-size:.85rem}
  .cat-count{font-size:.7rem}
  .cat-hero-sub{font-size:.88rem;padding-inline:.8rem}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem}
  .trust-ic{width:38px;height:38px}
  .trust-ic svg{width:18px;height:18px}
  .trust-item .tt{font-size:.82rem}
  .trust-item{gap:.6rem}

  /* ── Compact header ── */
  .topbar .container{flex-wrap:wrap;gap:.55rem;padding:.7rem 0}
  .brand img{width:34px;height:34px}
  .brand span{font-size:.92rem}
  .brand .tag{display:none}
  .header-tools{gap:.4rem;flex-wrap:wrap}
  .select{padding:.45rem .5rem;font-size:.82rem;min-height:40px;max-width:110px}
  .cart-btn{min-width:42px;min-height:42px}
  .locale-btn{min-height:40px;font-size:.85rem;font-weight:700;padding:.35rem .65rem}

  /* ── Filters & rhythm ── */
  .searchbar{min-width:100%;order:-1}
  .searchbar input,.searchbar button{min-height:44px}
  .page-head{padding:1.4rem 0 .4rem}
  .page-head h1{font-size:clamp(1.3rem,6vw,1.6rem)}
  .section{padding:1.8rem 0}
  .section-title h2{font-size:1.15rem}
  .pd-wrap{padding:1.2rem .6rem}
  .buy-card,.pd-desc-card{padding:1.3rem;border-radius:18px}
  .pd-grid{gap:1.5rem}
  .pd-img{width:100%;max-width:300px;height:auto}
  .buy-actions{grid-template-columns:1fr}
  .buy-box{padding:1rem}
  .pager{margin:1.6rem 0 .5rem}
}

/* ══════════════ v8 · Formal identity: fonts, white text, solid gold buttons ══════════════ */

/* 1) Fonts — Cairo for headings, Tajawal for body */
body{font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif}
h1,h2,h3,h4,.brand,.brand span,.btn,.pg-btn,.nav a,.section-title h2,.card-title,.price{font-family:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif}

/* 2) Text colors — professional solid white, calm muted */
:root{--text:#F4F6FB;--muted:#9AA3B2}
.hero h1,.hs-text h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#F4F6FB}
.section-title h2 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#F4F6FB}
.card-img .ph{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#F4F6FB}

/* 3) Buttons — formal solid gold, unified radius */
.btn{border-radius:12px}
.btn-grad{background:#D9A441;color:#0A0A2E;background-size:auto}
.btn-grad:hover{background:#e2b156;color:#0A0A2E;transform:translateY(-2px);box-shadow:0 8px 24px rgba(217,164,65,.45)}
.btn-gold{background:#D9A441;color:#0A0A2E}
.btn-gold:hover{background:#e2b156;transform:translateY(-2px);box-shadow:0 8px 22px rgba(217,164,65,.45)}
.btn-ghost{border-color:rgba(255,255,255,.22)}
.badge-featured{background:#D9A441}
.nav a.active::after{background:#D9A441}
.hs-dot.active{background:#D9A441;box-shadow:0 0 12px rgba(217,164,65,.5)}
.pg-btn.active{background:#D9A441;color:#0A0A2E;border-color:transparent}
.searchbar button{background:#D9A441;color:#0A0A2E}
.stat::before{background:#D9A441}
.card-cat{color:var(--muted)}
.promo-tag{color:var(--gold)}
.cart-count{background:#D9A441;color:#0A0A2E}

/* 4) Slider — uniform height on all screens, logo never cropped */
.hero-slider,.hs-track{height:380px;min-height:380px}
.hs-slide{position:absolute;inset:0}
.hs-inner{height:100%}
.hs-media img{object-fit:contain}

/* 5) Faint professional lighting — gold/navy whispers only */
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(217,164,65,.06),transparent 60%),radial-gradient(1000px 500px at 10% 10%,rgba(45,212,168,.03),transparent 60%),var(--bg)}
.hs-glow{background:radial-gradient(500px 260px at 20% 20%,rgba(45,212,168,.04),transparent 60%),radial-gradient(500px 260px at 80% 80%,rgba(233,79,110,.03),transparent 60%),radial-gradient(400px 220px at 60% 10%,rgba(217,164,65,.09),transparent 60%)}
.hero::before{background:radial-gradient(600px 300px at 50% 0%,rgba(217,164,65,.08),transparent 70%)}
.hero-badge{background:rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.35);color:var(--gold-soft)}
.cta{background:linear-gradient(135deg,rgba(217,164,65,.10),rgba(217,164,65,.03))}
.card:hover{box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px rgba(217,164,65,.12)}

/* Gentle float for section titles */
.section-title h2{animation:titleFloat 7s ease-in-out infinite}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 6) WhatsApp button in the header — glowing */
.wa-head{width:42px;height:42px;border-radius:50%;background:#25D366;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 16px rgba(37,211,102,.55);animation:waPulse 2.6s ease-in-out infinite}
.wa-head:hover{transform:scale(1.08)}
.wa-head svg{width:22px;height:22px;fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.85))}

@media(max-width:560px){
  /* Slider: fixed uniform height on mobile too */
  .hero-slider,.hs-track{height:520px;min-height:520px}
  .hs-slide,.hs-slide.active{position:absolute;inset:0}
  .hs-inner{height:100%;justify-content:center}
  .wa-head{width:40px;height:40px}
}

/* ══════════════ v19 · Hero slider: rock-solid uniform height, logo never cropped ══════════════ */
/* Single authoritative block — overrides all earlier slider rules. Every slide is
   exactly the same height on every screen; title/sub always reserve 2 lines;
   the logo lives in a fixed box with object-fit:contain so it can never be cut. */
.hero-slider,.hs-track{height:400px;min-height:400px;max-height:400px}
.hs-slide,.hs-slide.active{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hs-inner{height:100%;display:flex;align-items:center;gap:2.5rem;
  width:min(1060px,90%);margin:0 auto;padding:2rem 3rem}
.hs-media{flex:0 0 220px;width:220px;height:220px;display:flex;align-items:center;justify-content:center}
.hs-media img{width:100%;height:100%;object-fit:contain;border-radius:24px;
  box-shadow:0 0 40px rgba(242,179,61,.35),0 18px 44px rgba(0,0,0,.5);
  animation:hsFloat 5s ease-in-out infinite}
.hs-text{flex:1;min-width:0}
.hs-text h1{font-size:clamp(1.7rem,4vw,2.9rem);line-height:1.45;margin-bottom:.8rem;
  background:linear-gradient(120deg,#fff,var(--gold-soft));-webkit-background-clip:text;
  background-clip:text;color:transparent;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;min-height:calc(1.45em * 2)}
.hs-text p{color:var(--muted);font-size:1.08rem;line-height:1.7;max-width:560px;margin-bottom:1.6rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;min-height:calc(1.7em * 2)}

/* ══════════════ v19 · Featured products: elegant horizontal carousel ══════════════ */
.feat-wrap{position:relative}
.feat-carousel{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:.4rem .2rem 1rem;scroll-padding-inline:1rem}
.feat-carousel::-webkit-scrollbar{display:none}
.feat-track{display:flex;gap:1rem;width:max-content;padding-inline:.2rem}
.feat-card{scroll-snap-align:start;flex:0 0 180px;width:180px;border-radius:16px;
  background:linear-gradient(160deg,rgba(32,32,92,.55),rgba(10,10,46,.85));
  border:1px solid rgba(242,179,61,.28);overflow:hidden;position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  -webkit-tap-highlight-color:transparent}
.feat-card:hover{transform:translateY(-5px);border-color:var(--gold);
  box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 22px rgba(242,179,61,.22)}
.feat-img{display:block;aspect-ratio:1/1;overflow:hidden;background:rgba(10,10,46,.5)}
.feat-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.feat-card:hover .feat-img img{transform:scale(1.06)}
.feat-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:2.4rem;color:rgba(242,179,61,.4)}
.feat-info{padding:.7rem .8rem .85rem;display:flex;flex-direction:column;gap:.4rem}
.feat-name{font-weight:700;font-size:.86rem;color:var(--text);line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;min-height:calc(1.5em * 2);text-decoration:none}
.feat-name:hover{color:var(--gold-soft)}
.feat-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto}
.feat-price{font-weight:800;color:var(--gold-soft);font-size:.95rem}
.feat-add{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid rgba(242,179,61,.5);
  background:rgba(242,179,61,.12);color:var(--gold-soft);font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
  -webkit-tap-highlight-color:transparent}
.feat-add:hover{background:var(--gold);color:#0a0a2e;box-shadow:0 0 14px rgba(242,179,61,.5)}
.feat-add:active{transform:scale(.88)}
.feat-arrow{position:absolute;top:38%;z-index:2;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:rgba(18,18,58,.8);color:var(--text);
  font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px);transition:.2s;
  display:flex;align-items:center;justify-content:center;line-height:1}
.feat-arrow:hover{border-color:var(--gold);color:var(--gold-soft);box-shadow:0 0 14px rgba(242,179,61,.4)}
.feat-prev{inset-inline-start:-8px}
.feat-next{inset-inline-end:-8px}
.feat-dots{display:flex;gap:.45rem;justify-content:center;margin-top:.2rem}
.feat-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);transition:.25s}
.feat-dot.active{background:var(--gold);width:24px;border-radius:5px;box-shadow:0 0 10px rgba(242,179,61,.5)}
/* ── تلميح التمرير: يوضح للعميل أن الشريط يُسحب ── */
.feat-carousel{-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.feat-hint{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:.6rem;
  color:var(--gold-soft);font-size:.83rem;font-weight:700;transition:opacity .5s ease;
  text-shadow:0 0 14px rgba(242,179,61,.65),0 0 34px rgba(242,179,61,.3);
  animation:fhGlow 2.6s ease-in-out infinite}
@keyframes fhGlow{0%,100%{text-shadow:0 0 10px rgba(242,179,61,.45),0 0 26px rgba(242,179,61,.22)}
  50%{text-shadow:0 0 18px rgba(242,179,61,.85),0 0 44px rgba(242,179,61,.4)}}
.feat-hint.hide{opacity:0;pointer-events:none;height:0;margin:0;overflow:hidden}
.fh-chevs{display:inline-flex;color:var(--gold-soft);font-weight:800;font-size:1rem;letter-spacing:1px;
  animation:fhSlide 1.7s ease-in-out infinite}
@keyframes fhSlide{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(-9px);opacity:1}}
html[dir="ltr"] .fh-chevs{animation-name:fhSlideL}
@keyframes fhSlideL{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(9px);opacity:1}}

@media(max-width:560px){
  /* v19 · slider: fixed uniform height on phones too — content always fits */
  .hero-slider,.hs-track{height:470px;min-height:470px;max-height:470px}
  .hs-slide,.hs-slide.active{position:absolute;inset:0}
  .hs-inner{flex-direction:column;text-align:center;gap:.85rem;height:100%;
    justify-content:center;padding:1.5rem 1.2rem 3.2rem;width:min(1060px,94%)}
  .hs-media{flex:none;width:148px;height:148px}
  .hs-media img{width:100%;height:100%;object-fit:contain;border-radius:18px}
  .hs-text h1{font-size:clamp(1.28rem,6.5vw,1.65rem);line-height:1.5;margin-bottom:.55rem;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    overflow:hidden;min-height:calc(1.5em * 2)}
  .hs-text p{font-size:.93rem;line-height:1.7;margin-bottom:1rem;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    overflow:hidden;min-height:calc(1.7em * 2)}
  .hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
  .hero-cta .btn{min-height:44px}
  /* v19 · featured carousel on phones */
  .feat-card{flex-basis:150px;width:150px}
  .feat-arrow{display:none}
  .feat-carousel{scroll-padding-inline:.8rem}
}
.sec-sub{text-align:center;color:var(--muted);font-size:.95rem;margin:-.4rem 0 1.1rem;max-width:640px;margin-inline:auto}

/* ══════════════ v21 · تبويب الفقاعات في الإعدادات ══════════════ */
.bubble-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:.6rem}
.bubble-up{border:1px solid var(--line);border-radius:14px;padding:.9rem;background:rgba(255,255,255,.02)}
.bubble-up-preview{width:84px;height:84px;border-radius:50%;margin:0 auto .7rem;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid rgba(242,179,61,.5);box-shadow:0 0 14px rgba(242,179,61,.25);
  background:radial-gradient(circle at 32% 28%,rgba(52,52,120,.9),rgba(12,12,50,.94))}
.bubble-up-preview img{width:100%;height:100%;object-fit:cover}
.bubble-up-empty{font-size:2rem;opacity:.5}

/* ══════════════ v21 · أحجام الفقاعات في الواجهة ══════════════ */
.bubble.sz-s{width:44px;height:44px;font-size:1.3rem}
.bubble.sz-m{width:54px;height:54px;font-size:1.6rem}
.bubble.sz-l{width:68px;height:68px;font-size:2rem}
@media(max-width:560px){
  .bubble.sz-s{width:36px;height:36px;font-size:1rem}
  .bubble.sz-m{width:42px;height:42px;font-size:1.2rem}
  .bubble.sz-l{width:52px;height:52px;font-size:1.5rem}
}

/* ═══════════ v22: المخصّص المرئي ═══════════ */
.cz-wrap{max-width:1400px;margin:0 auto}
.cz-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.cz-title{margin:0;font-size:1.4rem}
.cz-top-actions{display:flex;align-items:center;gap:.7rem}
.cz-unsaved{color:#ffb020;font-size:.85rem;font-weight:700;animation:czBlink 1.2s infinite}
@keyframes czBlink{50%{opacity:.35}}
.cz-hint{opacity:.75;font-size:.9rem;margin:.2rem 0 .9rem}
.cz-toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.cz-tool-group{display:flex;gap:.25rem;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(242,179,61,.25);border-radius:12px;padding:.3rem .4rem}
.cz-tool-label{font-size:.8rem;opacity:.7;padding:0 .3rem}
.cz-tool-group button{background:transparent;border:0;color:#fff;font-size:.85rem;padding:.35rem .7rem;border-radius:8px;cursor:pointer;font-family:inherit}
.cz-tool-group button:hover{background:rgba(242,179,61,.15)}
.cz-tool-group button.active{background:var(--gold,#F2B33D);color:#1a1206;font-weight:700}
.cz-layout{display:flex;gap:1rem;align-items:flex-start}
.cz-side{width:350px;flex:none;max-height:calc(100vh - 230px);overflow-y:auto;position:sticky;top:1rem;scrollbar-width:thin}
.cz-preview{flex:1;min-width:0;position:relative}
.cz-stage{background:#0b1220;border:1px solid rgba(242,179,61,.3);border-radius:16px;overflow:auto;height:calc(100vh - 250px);min-height:560px;padding:14px}
.cz-framewrap{margin:0 auto;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.cz-framewrap.cz-mobile{border-radius:26px;box-shadow:0 0 0 10px #141c33,0 12px 40px rgba(0,0,0,.5)}
#czFrame{border:0;display:block;transform-origin:top left;background:#fff}
.cz-group{margin-bottom:.7rem;border:1px solid rgba(242,179,61,.25)}
.cz-group summary{cursor:pointer;font-weight:800;padding:.7rem .9rem;list-style:none;font-size:1rem}
.cz-group summary::-webkit-details-marker{display:none}
.cz-group summary:hover{color:var(--gold,#F2B33D)}
.cz-group-body{padding:0 .9rem .9rem}
.cz-field{margin-bottom:.7rem}
.cz-field label{display:block;font-size:.85rem;margin-bottom:.3rem;opacity:.9}
.cz-field .check{margin:0}
.cz-color .input{height:44px;padding:4px;cursor:pointer}
.cz-bubup{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cz-bubprev{width:52px;height:52px;border-radius:50%;border:2px dashed rgba(242,179,61,.6);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1.4rem;flex:none;background:rgba(255,255,255,.04)}
.cz-bubprev img{width:100%;height:100%;object-fit:cover}
.cz-bubup input[type=file]{font-size:.8rem;max-width:180px}
.cz-note{font-size:.82rem;opacity:.8;line-height:1.9;background:rgba(242,179,61,.08);border-radius:8px;padding:.5rem .7rem}
.cz-save-bottom{width:100%;margin-top:.4rem}
.cz-flash{animation:czFlash 1.9s ease;border-radius:8px}
@keyframes czFlash{0%,100%{box-shadow:0 0 0 0 rgba(242,179,61,0)}25%,75%{box-shadow:0 0 0 3px rgba(242,179,61,.95)}}
.cz-linkcard{position:absolute;top:14px;inset-inline-start:14px;background:#141c33;border:1px solid var(--gold,#F2B33D);border-radius:12px;padding:.8rem 1rem;max-width:320px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:5}
.cz-linkcard p{margin:0 0 .6rem;font-size:.9rem;line-height:1.8}
.cz-linkcard div{display:flex;gap:.5rem}
/* عناصر التمييز داخل المعاينة (تُحقن في الـ iframe — نفس النطاق) */
.cz-hl{outline:2px dashed #F2B33D !important;outline-offset:3px;cursor:pointer !important}
.cz-tip{position:fixed;z-index:99999;display:none;background:#141c33;color:#fff;border:1px solid #F2B33D;border-radius:8px;padding:.3rem .7rem;font-size:.8rem;pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.5)}
@media(max-width:900px){
  .cz-layout{flex-direction:column}
  .cz-side{width:100%;max-height:none;position:static}
  .cz-stage{height:70vh;min-height:480px}
}

/* ═══ v27: admin filter bar ═══ */
.filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem;
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem}
.filter-search{position:relative;flex:1 1 240px;display:flex;align-items:center}
.filter-search-ic{position:absolute;inset-inline-start:.7rem;width:18px;height:18px;color:var(--gold);pointer-events:none}
.filter-search input{width:100%;padding:.55rem 2.4rem .55rem .6rem;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:.92rem}
[dir="ltr"] .filter-search input{padding:.55rem .6rem .55rem 2.4rem}
.filter-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,179,61,.15)}
.filter-search input::placeholder{color:var(--muted)}
.filter-spinner{position:absolute;inset-inline-end:.7rem;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(242,179,61,.25);border-top-color:var(--gold);animation:fspin .7s linear infinite}
@keyframes fspin{to{transform:rotate(360deg)}}
.filter-bar select{padding:.55rem .6rem;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:.88rem;cursor:pointer;max-width:220px}
.filter-bar select option{background:#1a1f3a;color:#fff}
.filter-bar select:focus{outline:none;border-color:var(--gold)}
.filter-count{margin-inline-start:auto;color:var(--muted);font-size:.85rem;white-space:nowrap}
.pager{display:flex;gap:.35rem;justify-content:center;align-items:center;margin-top:1rem;flex-wrap:wrap}
.pager-dots{color:var(--muted);padding:0 .3rem}
#products-result{transition:opacity .15s ease}

/* ═══ fix28: compact header search + luxury menus ═══ */
.hdr-mini{position:relative;display:flex;gap:.45rem;align-items:center}
.tool-btn{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;color:var(--gold);
  background:rgba(242,179,61,.07);border:1px solid rgba(242,179,61,.35);
  box-shadow:0 0 10px rgba(242,179,61,.12), inset 0 0 8px rgba(242,179,61,.06);
  transition:border-color .25s,box-shadow .25s,transform .2s,background .25s}
.tool-btn .ic{display:flex;animation:toolGlow 3s ease-in-out infinite}
.tool-btn .ic svg{width:18px;height:18px}
.tool-btn:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(242,179,61,.35);transform:translateY(-1px)}
.tool-btn[aria-expanded="true"]{background:rgba(242,179,61,.16);border-color:var(--gold);
  box-shadow:0 0 18px rgba(242,179,61,.45)}
@keyframes toolGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(242,179,61,.35))}
  50%{filter:drop-shadow(0 0 6px rgba(242,179,61,.8))}}

/* expanding search popover (no permanent space) */
.hdr-search-pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:80;
  width:min(340px,calc(100vw - 2rem));animation:popIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.hdr-search-pop form{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem .3rem 1rem;
  background:rgba(13,16,38,.96);border:1px solid rgba(242,179,61,.5);border-radius:999px;
  box-shadow:0 14px 44px rgba(0,0,0,.55),0 0 24px rgba(242,179,61,.22);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hdr-search-ic{display:flex;color:var(--gold);flex:none}
.hdr-search-ic svg{width:18px;height:18px;animation:toolGlow 3s ease-in-out infinite}
.hdr-search-pop input{flex:1;min-width:0;background:transparent;border:0;color:#fff;
  font-family:inherit;font-size:.92rem;padding:.55rem .3rem}
.hdr-search-pop input:focus{outline:none}
.hdr-search-pop input::placeholder{color:var(--muted)}
.hdr-search-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#cfd3ea;background:rgba(255,255,255,.06);
  transition:background .2s,color .2s}
.hdr-search-x:hover{background:rgba(242,179,61,.2);color:var(--gold)}
.hdr-search-x svg{width:14px;height:14px}

/* instant suggestions dropdown (inside the popover) */
.hdr-search-pop .search-suggest{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:81;
  background:rgba(12,15,36,.98);border:1px solid rgba(242,179,61,.4);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);overflow:hidden;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:popIn .2s ease}
.sg-item{display:flex;gap:.7rem;align-items:center;padding:.55rem .8rem;text-decoration:none;transition:background .15s}
.sg-item:hover{background:rgba(242,179,61,.08)}
.sg-item + .sg-item{border-top:1px solid rgba(255,255,255,.05)}
.sg-img{width:44px;height:44px;flex:none;border-radius:10px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.sg-img img{width:100%;height:100%;object-fit:cover}
.sg-ph{display:flex;color:var(--gold)}
.sg-ph svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.sg-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sg-name{color:#fff;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-price{color:var(--gold);font-weight:700;font-size:.85rem}

/* luxury dropdown menus */
.lux-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:80;
  min-width:235px;max-width:290px;padding:.4rem;overflow:hidden;
  background:rgba(12,15,36,.97);border:1px solid rgba(242,179,61,.45);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 26px rgba(242,179,61,.15);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:luxIn .22s cubic-bezier(.2,.9,.3,1.15)}
@keyframes luxIn{from{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:none}}
.lux-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:10px;
  color:#eef0fa;text-decoration:none;font-size:.88rem;transition:background .15s}
.lux-item:hover{background:rgba(242,179,61,.1)}
.lux-item .ic{color:var(--gold);flex:none;display:flex}
.lux-item .ic svg{width:17px;height:17px}
.lux-item > span:nth-child(2){flex:1}
.lux-check{display:none;color:var(--gold)}
.lux-check svg{width:15px;height:15px}
.lux-item.is-active{background:rgba(242,179,61,.12)}
.lux-item.is-active .lux-check{display:flex}

@media(max-width:720px){
  .tool-btn{width:32px;height:32px}
  .tool-btn .ic svg{width:16px;height:16px}
  .hdr-search-pop{width:min(360px,calc(100vw - 1.5rem))}
  /* fix29: the buttons row is centered now — center the popups under it
     (individual `translate` keeps clear of the popIn/luxIn `transform` animations) */
  .hdr-mini .hdr-search-pop,.hdr-mini .lux-menu{inset-inline-end:auto;left:50%;translate:-50% 0}
}
@media(prefers-reduced-motion:reduce){
  .tool-btn,.tool-btn .ic,.hdr-search-ic svg{animation:none}
  .hdr-search-pop,.hdr-search-pop .search-suggest,.lux-menu{animation:none}
  .tool-btn,.lux-item{transition:none}
}

/* ═══ fix29: slim tools strip below the header (above the slider on home) ═══ */
.tools-strip{background:rgba(255,255,255,.015);border-bottom:1px solid rgba(242,179,61,.12)}
.tools-strip-inner{display:flex;justify-content:center;padding:.3rem 0}

/* ═══ fix30: header lang/currency icon buttons + golden hint labels ═══ */
/* header icon-button wrappers: positioned anchor for the luxury menus */
.hc-wrap{position:relative;display:flex}
.hc-wrap .lux-menu{top:calc(100% + 10px);inset-inline-end:0}

/* tool button + golden shimmer hint label (vertical mini-column) */
.tool-item{display:flex;flex-direction:column;align-items:center;gap:.22rem}
.tool-hint{font-size:10px;line-height:1.35;white-space:nowrap;letter-spacing:.01em;
  color:#c9982f;filter:drop-shadow(0 0 4px rgba(242,179,61,.35))}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .tool-hint{
    background:linear-gradient(100deg,#a87b1e 8%,#f2b33d 32%,#ffedbb 50%,#f2b33d 68%,#a87b1e 92%);
    background-size:220% auto;color:transparent;
    -webkit-background-clip:text;background-clip:text;
    animation:hintShimmer 4.5s linear infinite}
}
@keyframes hintShimmer{to{background-position:220% center}}
/* strip grows slightly to fit the labels — stays slim and airy */
.tools-strip-inner{padding:.42rem 0 .34rem}
.hdr-mini{gap:.9rem}
@media(max-width:720px){
  .tool-hint{font-size:9px}
  .hdr-mini{gap:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .tool-hint{animation:none}
}

/* ═══ fix31: locale buttons = cart-btn look · separated header groups · mobile-safe menus ═══ */
@media(max-width:720px){
  /* Header luxury menus become a full-width sheet under the header:
     always fully visible, never clipped by screen edges, touch-friendly. */
  .topbar .header-tools .hc-wrap{position:static}
  .topbar .header-tools .lux-menu{
    top:100%;inset-inline:0;margin:.35rem .75rem 0;
    min-width:0;max-width:none;width:auto}
  .topbar .header-tools .lux-item{min-height:46px;padding:.75rem .9rem;font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
  .locale-btn{transition:none}
}

/* ═══ fix31b: tools strip relocated — home only, above featured section ═══ */
.tools-strip-home{margin:1.4rem 0 .3rem;border:1px solid rgba(242,179,61,.14);
  border-radius:16px;background:rgba(255,255,255,.02)}
.tools-strip-home .tools-strip-inner{padding:.55rem 0}

/* ═══ fix32: luxury glass profile page ═══ */
.pf-hero{position:relative;display:flex;justify-content:center;padding:2.2rem 0 1.6rem;overflow:hidden}
.pf-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none;
  animation:pfFloat 9s ease-in-out infinite}
.pf-glow-1{width:280px;height:280px;background:radial-gradient(circle,rgba(242,179,61,.5),transparent 70%);
  top:-60px;inset-inline-start:6%}
.pf-glow-2{width:220px;height:220px;background:radial-gradient(circle,rgba(45,212,168,.35),transparent 70%);
  bottom:-40px;inset-inline-end:8%;animation-delay:-4.5s}
@keyframes pfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
.pf-card{position:relative;width:100%;max-width:640px;
  background:rgba(16,16,48,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(242,179,61,.35);border-radius:20px;padding:2.2rem 1.6rem;text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 40px rgba(242,179,61,.08);
  animation:pfIn .7s ease both}
@keyframes pfIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.pf-avatar{width:84px;height:84px;margin:0 auto 1rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Cairo,sans-serif;font-size:2rem;font-weight:800;color:#0b0b2e;
  background:linear-gradient(135deg,#f7d774,#d99420);
  box-shadow:0 0 0 4px rgba(242,179,61,.18),0 0 28px rgba(242,179,61,.5)}
.pf-hello{font-family:Cairo,sans-serif;font-size:1.5rem;margin:0 0 .35rem;font-weight:800}
.pf-name{background:linear-gradient(90deg,#f7d774,#f2b33d);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.pf-phrases{position:relative;min-height:1.7em;margin:0 0 1.4rem;color:var(--gold-soft);font-size:.95rem}
.pf-phrase{position:absolute;inset:0;opacity:0;transform:translateY(8px);
  transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.pf-phrase.is-on{opacity:1;transform:none}
.pf-stats{display:flex;gap:.7rem;justify-content:center;margin-bottom:1.4rem;flex-wrap:wrap}
.pf-stat{flex:1;min-width:110px;background:rgba(242,179,61,.07);border:1px solid rgba(242,179,61,.25);
  border-radius:14px;padding:.8rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.pf-stat .ic{color:var(--gold)}
.pf-stat .ic svg{width:1.3em;height:1.3em}
.pf-stat strong{font-size:1.02rem}
.pf-stat span{font-size:.74rem;color:var(--muted)}
.pf-info{display:flex;flex-direction:column;gap:.6rem;text-align:start}
.pf-row{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.pf-row .ic{color:var(--gold);flex:none;display:flex}
.pf-row .ic svg{width:1.25em;height:1.25em}
.pf-row>div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pf-row span{font-size:.72rem;color:var(--muted)}
.pf-row strong{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-orders-title{display:flex;align-items:center;gap:.6rem;font-family:Cairo,sans-serif;
  font-size:1.25rem;margin:0 0 1rem;font-weight:800}
.pf-orders-ic{display:inline-flex;color:var(--gold)}
.pf-orders-ic svg{width:1.2em;height:1.2em}
.pf-orders{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem}
.pf-order{display:block;background:rgba(16,16,48,.5);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.1rem;transition:border-color .25s,box-shadow .25s,transform .25s;
  color:inherit;text-decoration:none}
.pf-order:hover{border-color:rgba(242,179,61,.6);box-shadow:0 0 22px rgba(242,179,61,.15);
  transform:translateY(-2px)}
.pf-order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.pf-order-id{color:var(--gold);font-weight:800}
.pf-order-items{color:var(--muted);font-size:.88rem;margin-bottom:.5rem;line-height:1.7}
.pf-order-meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;gap:.5rem}
.pf-order-date{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted)}
.pf-order-date .ic{display:inline-flex;color:var(--gold)}
.pf-order-date .ic svg{width:1em;height:1em}
.pf-order-meta .price{font-weight:800;color:var(--gold-soft)}
@media (max-width:720px){
  .pf-hero{padding:1.4rem 0 1.1rem}
  .pf-card{padding:1.6rem 1rem;border-radius:16px}
  .pf-avatar{width:68px;height:68px;font-size:1.6rem}
  .pf-hello{font-size:1.25rem}
  .pf-stat{min-width:96px}
  .pf-stat strong{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .pf-glow,.pf-card{animation:none}
  .pf-phrase{transition:none}
}

/* ── v28: أشهر منتجاتنا — luxurious paginated card ── */
.sec-popular .popular-card{
  background:rgba(14,14,52,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(242,179,61,.28);
  border-radius:18px;
  padding:1.6rem 1.4rem 1.2rem;
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 34px rgba(242,179,61,.08);
  position:relative;overflow:hidden}
.sec-popular .popular-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 160px at 15% 0%,rgba(242,179,61,.10),transparent 70%),
             radial-gradient(420px 160px at 85% 100%,rgba(242,179,61,.07),transparent 70%)}
.grid-popular{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;position:relative;
  transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.grid-popular.is-fading{opacity:0}
/* fix35: luxurious glassy page transition + offset for sticky header */
#popularSection{scroll-margin-top:84px}
.grid-popular.is-leaving{opacity:0;filter:blur(8px);transform:scale(.985)}
.grid-popular.is-entering{animation:popGlassIn .55s cubic-bezier(.22,.9,.3,1)}
@keyframes popGlassIn{from{opacity:0;filter:blur(8px);transform:translateY(12px) scale(.99)}
  to{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion:reduce){
  .grid-popular{transition:none}
  .grid-popular.is-entering{animation:none}
}
/* fix38: small comfortable stacked buttons — button under button, buy-now glowing */
.card-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.card-actions .card-form{display:flex;margin:0}
.card-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.52rem .6rem;border-radius:10px;font:inherit;font-size:.8rem;font-weight:700;
  white-space:nowrap;min-height:40px;
  cursor:pointer;color:#fff;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-btn .cb-ic{display:inline-flex;color:var(--gold)}
.card-btn .cb-ic svg{width:1.3em;height:1.3em}
.card-cart-btn:hover{border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 0 12px rgba(242,179,61,.25)}
.card-bn-btn{color:var(--gold);border-color:rgba(242,179,61,.55);
  background:rgba(242,179,61,.09);
  box-shadow:0 0 10px rgba(242,179,61,.28);
  animation:bnBtnGlow 2.6s ease-in-out infinite}
.card-bn-btn:hover{transform:translateY(-1px);border-color:var(--gold)}
@keyframes bnBtnGlow{0%,100%{box-shadow:0 0 8px rgba(242,179,61,.22)}
  50%{box-shadow:0 0 22px rgba(242,179,61,.55)}}
@media (prefers-reduced-motion:reduce){.card-bn-btn{animation:none}}
.card-mini-btn{width:42px;height:42px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;background:rgba(242,179,61,.06);
  border:1px solid rgba(242,179,61,.35);cursor:pointer;padding:0;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-mini-btn:hover{transform:translateY(-2px);border-color:var(--gold)}
.card-mini-btn .cmb-ic{display:inline-flex;color:var(--gold)}
.card-mini-btn .cmb-ic svg{width:1.4em;height:1.4em}
/* cart: soft glow */
.card-cart-btn .cmb-ic{filter:drop-shadow(0 0 4px rgba(242,179,61,.5))}
.card-cart-btn:hover{box-shadow:0 0 12px rgba(242,179,61,.35)}
/* buy-now: STRONGER glow */
.card-bn-btn{border-color:rgba(242,179,61,.6);box-shadow:0 0 10px rgba(242,179,61,.25)}
.card-bn-btn .cmb-ic{filter:drop-shadow(0 0 7px rgba(242,179,61,.85));
  animation:bnGlow 2.2s ease-in-out infinite}
.card-bn-btn:hover{box-shadow:0 0 20px rgba(242,179,61,.55);border-color:var(--gold)}
@keyframes bnGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(242,179,61,.6))}
  50%{filter:drop-shadow(0 0 14px rgba(242,179,61,1))}}
@keyframes buyGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(242,179,61,.45))}
  50%{filter:drop-shadow(0 0 11px rgba(242,179,61,.95))}}
@media (prefers-reduced-motion:reduce){
  .card-bn-btn .cmb-ic{animation:none}
}
.popular-pages{display:flex;align-items:center;justify-content:center;gap:.55rem;
  margin-top:1.3rem;position:relative}
.pp-btn{min-width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;font-size:1.25rem;font-weight:800;color:var(--gold);
  background:rgba(242,179,61,.08);border:1px solid rgba(242,179,61,.4);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.pp-btn:hover:not(:disabled){transform:translateY(-2px);
  box-shadow:0 0 16px rgba(242,179,61,.35);border-color:var(--gold)}
.pp-btn:disabled{opacity:.3;cursor:default}
.pp-nums{display:flex;align-items:center;gap:.4rem}
.pp-num{min-width:40px;height:40px;padding:0 .5rem;border-radius:11px;font-weight:700;
  font-size:.95rem;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.14);
  cursor:pointer;transition:all .18s ease}
.pp-num:hover{border-color:var(--gold);color:var(--gold)}
.pp-num.is-active{background:linear-gradient(135deg,#f6c453,#d99a26);color:#221503;
  border-color:transparent;box-shadow:0 0 14px rgba(242,179,61,.45)}
.pp-dots{color:var(--muted);padding:0 .2rem}
@media (max-width:720px){
  .sec-popular .popular-card{padding:1.1rem .8rem .9rem}
  .grid-popular{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .pp-btn{min-width:38px;height:38px}
  .pp-num{min-width:36px;height:36px;font-size:.85rem}}
@media (prefers-reduced-motion:reduce){
  .grid-popular{transition:none}
  .pp-btn,.pp-num{transition:none}}

/* ══ v29: «اشترِ الآن» luxury modal — أجمل بطاقة بالموقع ══ */
body.bn-lock{overflow:hidden}
.bn-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(5,6,20,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:bnFadeIn .3s ease}
.bn-overlay[hidden]{display:none}
@keyframes bnFadeIn{from{opacity:0}to{opacity:1}}
.bn-card{position:relative;width:min(430px,100%);max-height:92vh;overflow-y:auto;
  background:linear-gradient(160deg,rgba(22,26,58,.96),rgba(10,12,34,.97));
  border:1px solid rgba(242,179,61,.5);border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 44px rgba(242,179,61,.16),inset 0 1px 0 rgba(255,255,255,.08);
  padding:1.8rem 1.5rem 1.4rem;text-align:center;overflow:hidden;
  animation:bnPulse 4.5s ease-in-out infinite}
.bn-card.bn-in{animation:bnEnter .55s cubic-bezier(.2,.9,.25,1.15),bnPulse 4.5s ease-in-out .55s infinite}
@keyframes bnEnter{from{opacity:0;transform:translateY(36px) scale(.92)}
  to{opacity:1;transform:none}}
@keyframes bnPulse{0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 30px rgba(242,179,61,.12),inset 0 1px 0 rgba(255,255,255,.08)}
  50%{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(242,179,61,.28),inset 0 1px 0 rgba(255,255,255,.08)}}
.bn-shimmer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:22px}
.bn-shimmer::before{content:"";position:absolute;top:-20%;bottom:-20%;width:90px;left:-120px;
  background:linear-gradient(105deg,transparent,rgba(255,225,150,.16),transparent);
  transform:skewX(-18deg);animation:bnShimmer 5.5s ease-in-out infinite}
@keyframes bnShimmer{0%,55%{left:-120px}90%,100%{left:130%}}
.bn-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:22px}
.bn-particles span{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#ffe9b0 0%,rgba(242,179,61,.15) 70%,transparent 100%);
  opacity:0;animation:bnRise 7s linear infinite}
.bn-particles span:nth-child(1){left:12%;animation-delay:0s;animation-duration:6.5s}
.bn-particles span:nth-child(2){left:28%;animation-delay:1.4s;width:4px;height:4px}
.bn-particles span:nth-child(3){left:46%;animation-delay:2.8s;animation-duration:8s}
.bn-particles span:nth-child(4){left:63%;animation-delay:.8s;width:5px;height:5px}
.bn-particles span:nth-child(5){left:78%;animation-delay:3.6s}
.bn-particles span:nth-child(6){left:88%;animation-delay:2.1s;width:4px;height:4px;animation-duration:6s}
.bn-particles span:nth-child(7){left:36%;animation-delay:4.4s;width:5px;height:5px}
.bn-particles span:nth-child(8){left:70%;animation-delay:5.2s;animation-duration:7.4s}
@keyframes bnRise{0%{transform:translateY(0);opacity:0}
  12%{opacity:.9}85%{opacity:.5}100%{transform:translateY(-460px);opacity:0}}
.bn-close{position:absolute;top:.8rem;inset-inline-end:.8rem;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;z-index:2;
  transition:border-color .2s,box-shadow .2s}
.bn-close:hover{border-color:var(--gold);box-shadow:0 0 12px rgba(242,179,61,.4)}
.bn-close .ic svg{width:1.1em;height:1.1em}
.bn-logo{margin:.2rem auto .8rem;width:74px;height:74px}
.bn-logo img{width:74px;height:74px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(242,179,61,.7);box-shadow:0 0 26px rgba(242,179,61,.5)}
.bn-profile{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.9rem}
.bn-avatar{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.25rem;color:#221503;
  background:linear-gradient(135deg,#f6c453,#d99a26);
  box-shadow:0 0 16px rgba(242,179,61,.55)}
.bn-avatar-guest{color:var(--gold);background:rgba(242,179,61,.1);border:1px solid rgba(242,179,61,.5)}
.bn-avatar-guest .ic svg{width:1.4em;height:1.4em}
.bn-hello{font-size:1.02rem;font-weight:700;color:#fff}
.bn-title{font-size:1.35rem;font-weight:800;margin:.2rem 0 .4rem;
  background:linear-gradient(120deg,#f6c453,#ffe9b0,#f6c453);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
  filter:drop-shadow(0 0 12px rgba(242,179,61,.35))}
.bn-sub{color:var(--muted);font-size:.92rem;margin:0 0 1rem;line-height:1.7}
.bn-trust{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.bn-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--gold);
  background:rgba(242,179,61,.08);border:1px solid rgba(242,179,61,.35);border-radius:999px;
  padding:.35rem .75rem;box-shadow:inset 0 0 12px rgba(242,179,61,.06)}
.bn-chip .ic svg{width:1.15em;height:1.15em}
.bn-order{display:flex;align-items:center;gap:.8rem;text-align:start;
  background:rgba(255,255,255,.045);border:1px solid rgba(242,179,61,.3);border-radius:15px;
  padding:.8rem;margin-bottom:1rem;box-shadow:inset 0 0 20px rgba(242,179,61,.05)}
.bn-order img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:none;
  border:1px solid rgba(242,179,61,.45);box-shadow:0 0 12px rgba(242,179,61,.25)}
.bn-order-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.bn-order-info strong{font-size:.92rem;color:#fff;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn-qty{font-size:.8rem;color:var(--muted)}
.bn-qty b{color:var(--gold)}
.bn-price{font-size:1.05rem;font-weight:800;color:var(--gold);white-space:nowrap;
  text-shadow:0 0 12px rgba(242,179,61,.5)}
.bn-pay{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;color:#ffe9b0;line-height:1.8;
  background:rgba(242,179,61,.07);border:1px dashed rgba(242,179,61,.4);border-radius:12px;
  padding:.7rem .85rem;margin:0 0 1.1rem;text-align:start}
.bn-pay .ic{flex:none;color:var(--gold);margin-top:.15rem}
.bn-pay .ic svg{width:1.3em;height:1.3em}
.bn-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:inherit;font-size:1.08rem;font-weight:800;color:#221503;cursor:pointer;border:0;border-radius:14px;
  padding:.95rem;background:linear-gradient(135deg,#f6c453,#d99a26);
  box-shadow:0 8px 26px rgba(242,179,61,.4);
  animation:bnCta 2.6s ease-in-out infinite;transition:transform .18s ease}
.bn-cta:hover{transform:translateY(-2px)}
.bn-cta .ic svg{width:1.35em;height:1.35em}
@keyframes bnCta{0%,100%{box-shadow:0 8px 26px rgba(242,179,61,.35)}
  50%{box-shadow:0 8px 38px rgba(242,179,61,.65)}}
.bn-later{margin-top:.7rem;background:transparent;border:0;cursor:pointer;
  color:var(--muted);font:inherit;font-size:.85rem;text-decoration:underline dotted}
.bn-later:hover{color:#fff}
@media (max-width:480px){
  .bn-card{padding:1.5rem 1.1rem 1.2rem;border-radius:18px}
  .bn-title{font-size:1.18rem}
  .bn-logo,.bn-logo img{width:62px;height:62px}
}
@media (prefers-reduced-motion:reduce){
  .bn-overlay,.bn-card,.bn-card.bn-in{animation:none}
  .bn-shimmer::before,.bn-particles span,.bn-cta{animation:none}
}

/* ── fix40: luxurious glowing add-to-cart toast (side, auto-dismiss 5s) ── */
.cart-toast{position:fixed;bottom:1.3rem;inset-inline-end:1.3rem;z-index:400;
  display:flex;align-items:center;gap:.75rem;
  max-width:min(350px,calc(100vw - 2.6rem));
  background:rgba(11,11,38,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(242,179,61,.55);border-radius:14px;padding:.85rem 1rem;
  box-shadow:0 14px 44px rgba(0,0,0,.55),0 0 26px rgba(242,179,61,.28);
  transform:translateY(22px) scale(.96);opacity:0;pointer-events:none;overflow:hidden;
  transition:transform .38s cubic-bezier(.22,.9,.3,1.25),opacity .3s ease}
.cart-toast.is-show{transform:none;opacity:1;pointer-events:auto}
.ct-ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#0c0c26;
  background:linear-gradient(135deg,#f6c453,#d99a26);
  box-shadow:0 0 16px rgba(242,179,61,.65)}
.ct-ic svg{width:1.25em;height:1.25em}
.ct-tx{min-width:0;flex:1}
.ct-tx strong{display:block;font-size:.87rem;color:#fff;font-weight:700}
.ct-tx small{display:block;font-size:.76rem;color:var(--gold);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-x{flex:0 0 auto;background:none;border:0;color:#fff;opacity:.55;cursor:pointer;
  font-size:1.25rem;line-height:1;padding:.15rem}
.ct-x:hover{opacity:1}
.ct-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;
  background:linear-gradient(90deg,#f6c453,var(--gold));
  box-shadow:0 0 10px rgba(242,179,61,.7);
  animation:ctBar 5s linear forwards}
[dir="rtl"] .ct-bar{transform-origin:right center}
[dir="ltr"] .ct-bar{transform-origin:left center}
@keyframes ctBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:720px){
  .cart-toast{bottom:1rem;inset-inline-end:1rem;padding:.75rem .9rem}
}
@media (prefers-reduced-motion:reduce){
  .cart-toast{transition:none}
  .ct-bar{animation:none;display:none}
}

/* ── fix41: luxurious reviews ── */
.rev-lux{position:relative;overflow:hidden}
.rev-avg-lux{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
  background:rgba(242,179,61,.05);border:1px solid rgba(242,179,61,.22);
  border-radius:16px;padding:1.1rem 1.3rem;margin-bottom:1.2rem}
.rev-score{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:110px}
.rev-score strong{font-size:2rem;color:var(--gold);
  text-shadow:0 0 14px rgba(242,179,61,.5);line-height:1}
.rev-stars-lg{color:var(--gold);letter-spacing:3px;font-size:1.15rem;
  filter:drop-shadow(0 0 6px rgba(242,179,61,.55))}
.rev-stars-lg .ic{color:inherit}
.rev-score small{color:var(--muted);font-size:.75rem}
.rev-dist{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.35rem}
.rev-dist-row{display:flex;align-items:center;gap:.6rem;font-size:.78rem}
.rev-dist-n{color:var(--gold);white-space:nowrap;min-width:34px;font-weight:700}
.rev-dist-n .ic svg{width:1em;height:1em;vertical-align:-.1em}
.rev-dist-bar{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.rev-dist-bar span{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#d99a26,#f6c453);
  box-shadow:0 0 8px rgba(242,179,61,.5)}
.rev-dist-c{color:var(--muted);min-width:20px;text-align:end}
.rev-list{display:flex;flex-direction:column;gap:.8rem;margin-bottom:.4rem}
.rev-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:.9rem 1rem;backdrop-filter:blur(6px)}
.rev-card-head{display:flex;align-items:center;gap:.7rem}
.rev-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;color:#221503;font-size:1rem;
  background:linear-gradient(135deg,#f6c453,#d99a26);
  box-shadow:0 0 12px rgba(242,179,61,.4)}
.rev-who{flex:1;min-width:0;display:flex;flex-direction:column}
.rev-who strong{font-size:.9rem}
.rev-who small{color:var(--muted);font-size:.72rem}
.rev-stars{color:var(--gold);letter-spacing:2px;font-size:.95rem;
  filter:drop-shadow(0 0 5px rgba(242,179,61,.45))}
.rev-text{margin:.6rem 0 0;color:#e9e9f2;font-size:.9rem;line-height:1.7}
.rev-empty{color:var(--muted);display:flex;align-items:center;gap:.5rem}
/* interactive glowing stars */
.lux-stars{display:flex;gap:.3rem;align-items:center;padding:.2rem 0}
.lux-star{background:none;border:0;cursor:pointer;padding:.15rem;color:rgba(255,255,255,.22);
  transition:transform .15s ease,color .15s ease;line-height:0}
.lux-star .ic svg{width:2.1rem;height:2.1rem;transition:filter .15s ease}
.lux-star:hover{transform:scale(1.2)}
.lux-star:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.lux-star.is-on{color:var(--gold)}
.lux-star.is-on .ic svg{filter:drop-shadow(0 0 9px rgba(242,179,61,.85))}
.lux-star.is-pop .ic svg{animation:starPop .45s ease}
@keyframes starPop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(8deg)}100%{transform:scale(1)}}
.lux-rate-label{min-height:1.4em;font-weight:800;color:var(--gold);font-size:.95rem;
  text-shadow:0 0 10px rgba(242,179,61,.5);margin-top:.15rem}
@media (max-width:720px){
  .lux-star .ic svg{width:1.8rem;height:1.8rem}
  .rev-avg-lux{gap:1rem;padding:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .lux-star,.lux-star .ic svg{transition:none}
  .lux-star.is-pop .ic svg{animation:none}
}

/* ═══════════ v30: smart payments ═══════════ */
/* ── grouped payment methods (luxurious accordion) ── */
.pay-group{border:1px solid rgba(255,255,255,.1);border-radius:14px;margin-bottom:.7rem;
  background:rgba(255,255,255,.025);overflow:hidden}
.pay-group-head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;cursor:pointer;
  list-style:none;font-size:1rem}
.pay-group-head::-webkit-details-marker{display:none}
.pg-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--gold);
  background:rgba(242,179,61,.1);border:1px solid rgba(242,179,61,.35);
  filter:drop-shadow(0 0 6px rgba(242,179,61,.35))}
.pg-ic svg{width:1.35em;height:1.35em}
.pay-group-head strong{flex:1}
.pg-count{font-size:.75rem;background:rgba(242,179,61,.14);color:var(--gold);
  border-radius:999px;padding:.15rem .6rem;font-weight:700}
.pg-chev{color:var(--gold);opacity:.7;transition:transform .25s ease;display:inline-flex}
.pg-chev svg{width:1.1em;height:1.1em}
.pay-group[open] .pg-chev{transform:rotate(180deg)}
.pay-group-body{padding:.2rem 1rem 1rem;border-top:1px solid rgba(255,255,255,.07)}
.pay-opt-lux{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);margin-top:.7rem;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease}
.pay-opt-lux:hover{border-color:rgba(242,179,61,.5)}
.pay-opt-lux:has(input:checked){border-color:var(--gold);
  box-shadow:0 0 16px rgba(242,179,61,.22);background:rgba(242,179,61,.05)}
.pay-opt-lux input[type=radio]{margin-top:.3rem;accent-color:var(--gold)}
.pay-opt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.pay-opt-tx strong{font-size:.98rem}
.pay-bank{color:var(--gold);font-size:.82rem;font-weight:700}
.pay-acct{display:flex;flex-direction:column;gap:.3rem}
.pay-rib{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pay-rib code{background:rgba(255,255,255,.07);padding:.35rem .7rem;border-radius:8px;
  font-size:.92rem;letter-spacing:.03em;border:1px dashed rgba(242,179,61,.4)}
.copy-btn{display:inline-flex;align-items:center;gap:.35rem;background:rgba(242,179,61,.1);
  border:1px solid rgba(242,179,61,.45);color:var(--gold);border-radius:8px;
  padding:.3rem .7rem;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit}
.copy-btn:hover{background:rgba(242,179,61,.2)}
.copy-btn svg{width:1.1em;height:1.1em}
.pay-steps{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.pay-steps li{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:#dfe0ea}
.ps-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#221503;
  background:linear-gradient(135deg,#f6c453,#d99a26);
  box-shadow:0 0 10px rgba(242,179,61,.5)}
.pay-steps-hero{margin-top:1rem;background:rgba(242,179,61,.05);border-radius:12px;padding:.9rem}
.pay-acct-panel{background:rgba(255,255,255,.04);border:1px solid rgba(242,179,61,.25);
  border-radius:12px;padding:.9rem;margin-bottom:.8rem}
/* ── unavailable badge ── */
.unavail-badge{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.6rem;padding:.55rem;border-radius:10px;font-size:.82rem;font-weight:700;
  color:#ffb3ab;background:rgba(255,107,107,.08);border:1px dashed rgba(255,107,107,.4)}
.unavail-badge svg{width:1.2em;height:1.2em}
.unavail-lg{font-size:1rem;padding:1rem;margin-top:1rem}
/* ── luxury tracking card ── */
.track-card{background:rgba(13,13,42,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(242,179,61,.3);border-radius:20px;padding:1.4rem;
  margin-bottom:1.2rem;position:relative;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 30px rgba(242,179,61,.08)}
.track-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 150px at 12% 0%,rgba(242,179,61,.1),transparent 70%)}
.track-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem;position:relative}
.track-total{font-size:1.05rem}
.ord-num{color:var(--gold)}
.st-lg{font-size:.95rem;padding:.45rem 1.1rem}
/* vertical timeline */
.tl-vert{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.tlv-step{display:flex;align-items:center;gap:.9rem;padding:.55rem 0;position:relative}
.tlv-step::before{content:"";position:absolute;inset-inline-start:21px;top:52px;bottom:-8px;
  width:2px;background:rgba(255,255,255,.1)}
.tlv-step:last-child::before{display:none}
.tlv-step.done::before{background:rgba(45,212,168,.5)}
.tlv-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);color:var(--muted);z-index:1}
.tlv-ic svg{width:1.3em;height:1.3em}
.tlv-step.done .tlv-ic{color:#0c0c26;background:linear-gradient(135deg,#5eeabb,#2dd4a8);
  border-color:transparent;box-shadow:0 0 14px rgba(45,212,168,.5)}
.tlv-step.cur .tlv-ic{color:#221503;background:linear-gradient(135deg,#f6c453,#d99a26);
  border-color:transparent;box-shadow:0 0 18px rgba(242,179,61,.65)}
.tlv-tx{font-weight:700;font-size:.95rem}
.tlv-step.todo .tlv-tx{color:var(--muted);font-weight:400}
.tlv-step.cur .tlv-tx{color:var(--gold)}
.tlv-pulse{width:10px;height:10px;border-radius:50%;background:var(--gold);
  margin-inline-start:auto;animation:tlvPulse 1.8s ease-in-out infinite}
@keyframes tlvPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,179,61,.6)}50%{box-shadow:0 0 0 9px rgba(242,179,61,0)}}
/* ── receipt panels ── */
.receipt-panel{margin-top:1.3rem;background:rgba(255,255,255,.03);
  border:1px dashed rgba(242,179,61,.4);border-radius:14px;padding:1.1rem;position:relative}
.receipt-panel h3{color:var(--gold);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.receipt-current{margin-bottom:.9rem}
.receipt-form .form-row{display:flex;gap:.8rem;flex-wrap:wrap}
.receipt-form .form-row .field{flex:1;min-width:140px}
.receipt-admin{background:rgba(255,255,255,.03);border:1px solid rgba(242,179,61,.35);
  border-radius:12px;padding:1rem;margin:1rem 0}
.receipt-admin h4{color:var(--gold);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.receipt-img{max-width:260px;border-radius:10px;border:1px solid rgba(255,255,255,.15);
  display:block;margin-bottom:.5rem}
.btn-accept{width:100%;font-size:1.05rem;padding:.85rem;
  animation:bnBtnGlow 2.6s ease-in-out infinite}
.st-awaiting_verification{color:var(--gold);background:rgba(242,179,61,.12);
  border:1px solid rgba(242,179,61,.4)}
@media (max-width:720px){
  .track-card{padding:1rem}
  .tlv-ic{width:38px;height:38px}
  .tlv-step::before{inset-inline-start:18px}
}
@media (prefers-reduced-motion:reduce){
  .tlv-pulse,.btn-accept{animation:none}
}

/* fix44: admin payment-method visibility badges */
.badge{display:inline-block;padding:.28em .7em;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.badge-ok{background:rgba(46,204,113,.15);color:#2ecc71;border:1px solid rgba(46,204,113,.4)}
.badge-warn{background:rgba(241,196,15,.13);color:#f1c40f;border:1px solid rgba(241,196,15,.4)}
.badge-err{background:rgba(231,76,60,.13);color:#e74c3c;border:1px solid rgba(231,76,60,.4)}

/* fix46: unified PayPal card section in Settings */
.pay-card-box{border:1px solid rgba(217,164,65,.35);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1.4rem;background:rgba(217,164,65,.05)}
.pay-card-box h3{margin:0 0 .4rem;color:var(--gold,#d9a441)}
.pay-card-box .muted{color:var(--muted);font-size:.9rem;margin:0 0 .8rem}
.row-flex{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

/* v31: embedded card form (Temu-like) */
.cardpay-panel{max-width:560px}
.cardpay-loading{display:flex;align-items:center;justify-content:center;gap:.7rem;
  padding:3rem 1rem;color:var(--muted)}
.cardpay-loading .spin{width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(217,164,65,.25);border-top-color:#d9a441;
  animation:cardpaySpin 1s linear infinite}
@keyframes cardpaySpin{to{transform:rotate(360deg)}}
.hf-field{min-height:48px;display:flex;align-items:center;cursor:text}
.hf-field iframe{width:100%!important}
.cardpay-note{display:flex;align-items:center;justify-content:center;gap:.4rem;
  color:var(--muted);font-size:.85rem;margin-top:.9rem}
.cardpay-note .ic{color:#d9a441}
.cardpay-fallback{text-align:center;padding:1.5rem .5rem}
.cardpay-fallback h3{color:#d9a441;margin-bottom:.6rem}
.cardpay-fallback p{color:var(--muted);margin-bottom:1.2rem}
#cardpay-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:480px){#cardpay-form .form-row{grid-template-columns:1fr}}

/* fix49: redirect spinner on card page */
.cardpay-spinner{width:34px;height:34px;margin:.9rem auto;border:3px solid rgba(217,164,65,.25);border-top-color:#d9a441;border-radius:50%;animation:cpspin .8s linear infinite}
@keyframes cpspin{to{transform:rotate(360deg)}}

/* ── manual products (Canva Pro): duration choices + activation ── */
.pd-from{color:var(--gold);font-size:.95rem;font-weight:600}
.manual-variants{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.8rem}
.manual-variants-title{font-weight:700;color:var(--gold-soft);display:flex;align-items:center;gap:.4rem}
.variant-card{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border:1px solid rgba(242,179,61,.35);border-radius:12px;cursor:pointer;background:rgba(255,255,255,.03);transition:border-color .2s,box-shadow .2s}
.variant-card:hover{border-color:var(--gold)}
.variant-card:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(242,179,61,.25);background:rgba(242,179,61,.08)}
.variant-card input{accent-color:var(--gold)}
.variant-label{flex:1;font-weight:700}
.variant-price{font-weight:800;color:var(--gold)}
.warranty-line{display:flex;align-items:center;gap:.4rem;color:var(--gold-soft);font-size:.92rem;margin-bottom:.9rem}
.variant-tag{display:inline-flex;align-items:center;gap:.3rem;color:var(--gold-soft);font-size:.85rem;font-weight:600}
.badge-manual{display:inline-block;margin-inline-start:.4rem;padding:.1rem .5rem;border:1px solid var(--gold);border-radius:20px;color:var(--gold);font-size:.75rem;font-weight:700}
.activation-field{border:1px solid rgba(242,179,61,.45);border-radius:14px;padding:1rem;margin-bottom:1.2rem;background:rgba(242,179,61,.06)}
.activation-field label{display:flex;align-items:center;gap:.4rem;font-weight:700;margin-bottom:.5rem}
.activation-field .req{color:var(--pink)}
.activation-hint{display:flex;align-items:flex-start;gap:.4rem;color:var(--gold-soft);font-size:.9rem;margin:.6rem 0 0}
.activation-panel{border:1px solid rgba(242,179,61,.5);background:rgba(242,179,61,.06)}

/* ── sticky mini pay button (checkout): small gold pill fixed at the
   bottom of the viewport, visible only while the real pay button is
   off-screen. Kept small and distinctive; hover keeps it centered. ── */
.pay-float{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:300;display:none;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(217,164,65,.5);animation:payFloatGlow 2.6s ease-in-out infinite}
.pay-float.is-visible{display:inline-flex}
.pay-float:hover{transform:translateX(-50%) translateY(-2px)}
.pay-float svg{width:1.15em;height:1.15em}
.pay-float .ic svg{animation:payFloatNudge 1.6s ease-in-out infinite}
@keyframes payFloatGlow{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(217,164,65,.5)}50%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 22px 3px rgba(217,164,65,.55)}}
@keyframes payFloatNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}

/* ── In-site notifications (bells) ────────────────────────────────
   Customer bell floats on the WhatsApp side, stacked ABOVE the
   WhatsApp button (same side, clear gap) so it covers nothing.
   Admin bell lives in the topbar; its panel drops fixed below it. */
.notif-bell{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,179,61,.5);background:rgba(242,179,61,.1);color:var(--gold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-bell svg{width:1.35em;height:1.35em}
.notif-bell:hover{background:rgba(242,179,61,.22)}
.notif-badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:#e24b4b;color:#fff;font-size:.7rem;font-weight:800;display:none;align-items:center;justify-content:center}
.notif-badge.show{display:flex}
.notif-float{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom,0px));inset-inline-start:18px;z-index:290}
.notif-float .notif-bell{width:54px;height:54px;background:linear-gradient(160deg,#1a1a4e,#141438);box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 20px rgba(242,179,61,.35)}
.notif-panel{display:none;flex-direction:column;background:linear-gradient(160deg,#1a1a4e,#141438);border:1px solid rgba(242,179,61,.45);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 24px rgba(242,179,61,.22);overflow:hidden}
.notif-panel.open{display:flex}
.notif-panel--float{position:fixed;bottom:calc(158px + env(safe-area-inset-bottom,0px));inset-inline-start:18px;width:min(340px,calc(100vw - 36px));max-height:55vh;z-index:295}
.notif-panel--drop{position:fixed;top:70px;inset-inline-end:16px;width:min(360px,calc(100vw - 32px));max-height:60vh;z-index:400}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.notif-panel-foot{padding:.6rem 1rem;border-top:1px solid rgba(255,255,255,.1)}
.notif-list{overflow-y:auto}
.notif-empty{color:var(--muted);font-size:.9rem;text-align:center;padding:1.2rem .5rem;margin:0}
.notif-item{display:block;padding:.7rem 1rem;text-decoration:none;color:var(--text);border-inline-start:3px solid var(--gold);background:rgba(242,179,61,.07)}
.notif-item + .notif-item{border-top:1px solid rgba(255,255,255,.07)}
.notif-item.is-read{border-inline-start-color:transparent;background:transparent;opacity:.75}
.notif-item-title{display:block;font-size:.92rem}
.notif-item-body{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem}
.notif-item-time{display:block;color:var(--muted);font-size:.75rem;margin-top:.25rem}
@media (max-width:640px){
  .notif-float{bottom:calc(80px + env(safe-area-inset-bottom,0px));inset-inline-start:14px}
  .notif-panel--float{bottom:calc(146px + env(safe-area-inset-bottom,0px));inset-inline-start:14px}
}

/* ── Web Push section inside the admin bell panel ── */
.push-section{border-top:1px solid rgba(242,179,61,.35);margin-top:.9rem;padding-top:.9rem}
.push-section strong{display:block;margin-bottom:.35rem}
.push-status{color:var(--gold-soft);font-size:.9rem;margin:0 0 .5rem}
.push-ios-hint{color:var(--muted);font-size:.85rem;margin:0 0 .5rem}
.push-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.push-note{color:var(--muted);font-size:.82rem;margin:.6rem 0 0}

/* ══════════════ Mobile admin + PWA install ══════════════ */

/* Grid blowout fix: a wide table must never force the layout wider
   than the phone screen (grid children default to min-width:auto). */
.admin-layout > *{min-width:0}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}

/* Hamburger toggle (visible on phones only, see media queries below) */
.admin-menu-toggle{display:none;background:var(--bg-card);border:1px solid var(--line);
  border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;
  color:var(--gold-soft);cursor:pointer;flex:0 0 auto}
.admin-menu-toggle .ic svg{width:22px;height:22px}

/* Footer install row + instructions modal */
.install-row{flex-basis:100%;display:flex;justify-content:center;padding:0 0 1.4rem}
.install-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem}
.install-modal[hidden]{display:none}
.install-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.install-modal-card{position:relative;background:var(--bg-card);border:1px solid rgba(242,179,61,.45);
  border-radius:18px;padding:1.5rem;width:min(420px,calc(100vw - 2rem));box-shadow:var(--shadow)}
.install-modal-card h3{margin:0 0 .8rem;color:var(--gold-soft);font-size:1.15rem}
.install-modal-card p{color:var(--muted);line-height:1.9;margin:0 0 .8rem}
.install-modal-note{font-size:.85rem}

@media(max-width:768px){
  /* Sidebar becomes a hamburger dropdown instead of a long list
     pushing the content down the page */
  .admin-menu-toggle{display:inline-flex}
  .admin-layout{grid-template-columns:1fr;padding:1rem 0;gap:1rem}
  .sidebar{display:none}
  .sidebar.open{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;width:100%}
  .sidebar.open a{padding:.8rem .9rem;margin-bottom:0;text-align:center}
  /* The notification dropdown sits below the (possibly wrapped) topbar */
  .notif-panel--drop{top:128px}
  /* Topbar + headings, moderately smaller without losing readability */
  .topbar .brand{font-size:1.05rem}
  .topbar .brand img{width:36px;height:36px}
  .toolbar h2{font-size:1.3rem}
  .panel h3{font-size:1.05rem}
  .page-head{padding:1.4rem 0 .4rem}
  .page-head h1{font-size:1.5rem}
  /* Stats stack 2-up, panels breathe less */
  .stat-grid{grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.2rem}
  .stat{padding:1rem}
  .stat .num{font-size:1.5rem}
  .panel{padding:1rem;margin-bottom:1rem}
  /* Toolbars + forms stack full-width; touch-friendly actions */
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar form,.toolbar .select{width:100%}
  .toolbar .select{max-width:none}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem}
  .admin-layout .btn{min-height:44px}
  .admin-layout .input,.admin-layout select.input,.admin-layout textarea.input{font-size:1rem}
  .admin-layout .filters{flex-direction:column;align-items:stretch}
  .admin-layout .searchbar{width:100%;min-width:0}
  /* Tables: smaller text, tighter cells, horizontal scroll inside
     the wrapper (no column or action button is ever cut off) */
  .admin-layout table{font-size:.85rem}
  .admin-layout th,.admin-layout td{padding:.6rem .7rem}
}

@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr}
  .sidebar.open{grid-template-columns:1fr}
  .sidebar.open a{text-align:start}
  .panel{padding:.85rem}
  .toolbar h2{font-size:1.15rem}
  .admin-layout table{font-size:.82rem}
  .admin-layout th,.admin-layout td{padding:.55rem .6rem}
  .topbar .brand{font-size:.95rem}
  .topbar .brand img{width:32px;height:32px}
}

/* ══════════════ overflow fix · الهاتف: الصفحة لا تتجاوز عرض الشاشة أبدًا ══════════════ */
/* (محفوظ من تحديث انزياح الهاتف — مستقل عن تحديث الطلبات المُرجع) */
html, body { overflow-x: clip; }
footer .container { flex-wrap: wrap; gap: 1rem; }
footer .flinks { flex-wrap: wrap; }
@media(max-width:560px){
  footer .container { flex-direction: column; align-items: center;
    text-align: center; gap: .8rem; padding-block: 1.2rem; }
  footer .flinks { justify-content: center; gap: .8rem 1.2rem; }
  footer .install-row { width: 100%; display: flex; justify-content: center; }
}
@media(max-width:560px){
  .cat-grid6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cat-item { width: auto; }
}
.cart-line .grow { min-width: 0; }
.cart-line { overflow-wrap: anywhere; }
.pay-rib code { max-width: 100%; overflow-wrap: anywhere; }
.card-title, .feat-name { overflow-wrap: anywhere; }

/* ══════════ Orders page, luxury edition — SCOPED to .orders-page only ══════════ */
/* كل قاعدة هنا تبدأ بـ .orders-page، فلا تمسّ أبدًا رأس واجهة المتجر
   (.topbar/.header-tools) ولا شريط لوحة التحكم ولا أي صفحة أخرى.
   مبدأ الصفحة: صف واحد منظم، قائمة منسدلة واحدة للحالات، زر إجراءات
   واحد لكل طلب — بلا تكديس وبلا أزرار كثيرة. */
.orders-page .orders-total{color:var(--muted);font-size:.9rem}
.orders-page .orders-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;align-items:center}
.orders-page .orders-tools .select{min-height:44px}
.orders-page .orders-tools .select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(242,179,61,.25)}
.orders-page .orders-search{flex:1;min-width:220px;display:flex;align-items:center;gap:.5rem;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:0 .8rem}
.orders-page .orders-search .input{flex:1;border:none;background:transparent;padding:.7rem 0}
.orders-page .orders-search .input:focus{outline:none}
.orders-page .bulk-panel{border-color:rgba(233,79,110,.35)}
.orders-page .bulk-note{color:var(--muted);font-size:.85rem;margin:0 0 .8rem}
.orders-page .bulk-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}
.orders-page .bulk-field{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.orders-page .bulk-field .select{min-height:44px}
.orders-page .bulk-match{color:var(--gold-soft);font-size:.85rem;margin:.8rem 0 0}
.orders-page .btn-danger{background:rgba(233,79,110,.14);border:1px solid rgba(233,79,110,.55);color:var(--pink)}
.orders-page .btn-danger:hover{border-color:var(--pink);background:rgba(233,79,110,.25)}
.orders-page .order-cards{display:none}
.orders-page .order-card{background:var(--bg-card);border:1px solid rgba(242,179,61,.28);border-radius:18px;padding:1rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.orders-page .order-card-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.orders-page .order-card-id{font-size:1.05rem}
.orders-page .order-card-date{margin-inline-start:auto;color:var(--muted);font-size:.8rem}
.orders-page .order-card-customer{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem;color:var(--text)}
.orders-page .order-card-name{font-weight:600}
.orders-page .order-card-email{color:var(--muted);font-size:.85rem}
.orders-page .order-card-items{list-style:none;margin:0 0 .7rem;padding:0;display:flex;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.9rem}
.orders-page .order-card-qty{color:var(--gold-soft);white-space:nowrap}
.orders-page .order-card-meta{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;font-size:.9rem}
.orders-page .order-receipt-badge{display:inline-flex;align-items:center;gap:.3rem;color:var(--teal);font-size:.85rem}
/* One elegant actions dropdown per card — the only button on the card */
.orders-page .order-card-actions{display:flex}
.orders-page .actions-drop{position:relative;flex:1}
.orders-page .actions-drop-btn{width:100%;justify-content:center;min-height:44px}
.orders-page .actions-drop-menu{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:50;background:var(--bg-card);border:1px solid rgba(242,179,61,.4);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:.4rem;overflow:hidden}
.orders-page .actions-drop-menu a,.orders-page .actions-drop-menu button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.7rem .9rem;background:none;border:none;border-radius:10px;color:var(--text);font:inherit;font-size:.9rem;text-decoration:none;text-align:start;cursor:pointer}
.orders-page .actions-drop-menu a:hover,.orders-page .actions-drop-menu button:hover{background:rgba(242,179,61,.12);color:var(--gold-soft)}
.orders-page .admin-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem}
.orders-page .admin-modal[hidden]{display:none}
.orders-page .admin-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.orders-page .admin-modal-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:18px;padding:1.2rem;width:min(480px,100%);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.orders-page .admin-modal-card h3{margin:0 0 .8rem}
.orders-page .modal-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.orders-page .modal-actions .btn{min-height:44px}
@media(max-width:768px){
  .orders-page .orders-table{display:none}
  .orders-page .order-cards{display:grid;gap:1rem}
  .orders-page .orders-tools .orders-search{flex-basis:100%}
  .orders-page .orders-tools .select{flex:1}
  .orders-page .bulk-form .bulk-field{flex:1;min-width:140px}
  .orders-page .bulk-form .btn-danger{flex-basis:100%}
}

/* orders4: bulk wipe follows the single filter dropdown — status line + disabled state */
.orders-page .bulk-status-line{color:var(--muted);font-size:.9rem;margin:0 0 .8rem}
.orders-page .bulk-status-line strong{color:var(--gold-soft)}
.orders-page .bulk-form .btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── delivery pack: product-only box (copy + download) ── */
.delivery-panel .delivery-item{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(217,164,65,.25)}
.delivery-panel .delivery-item:first-of-type{margin-top:.5rem;padding-top:0;border-top:0}
.delivery-product{font-weight:700;margin-bottom:.5rem}
.delivery-content{background:rgba(0,0,0,.35);border:1px solid rgba(217,164,65,.45);border-radius:12px;padding:.8rem 1rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;line-height:1.7;word-break:break-all;white-space:pre-wrap;user-select:text}
.delivery-soon{color:var(--muted);margin:.3rem 0 0}

/* ══════════════ mobilefix · One fixed mobile layout on every phone ══════════════
   Problem (seen on S24 Ultra vs Redmi): the mobile header wrapped
   differently per phone, because it used flex-wrap and the wrap point
   depends on each phone's width and font metrics. Fix: on phones
   (<=560px) the header has ONE fixed arrangement that never depends on
   width — brand row, locale row, account row — plus fixed (non-vw)
   title sizes, so every phone renders the same arrangement. Desktop
   (>560px) is untouched. Also stops mobile browsers from inflating
   text from the system font size, so authored sizes are identical. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:560px){
  /* Header: tools always take their own full-width row, stacked as two
     fixed rows (locale / account). Each row alone fits any phone width,
     so the arrangement can never wrap differently per device. */
  .header-tools{flex:none;width:100%;flex-basis:100%;flex-direction:column;align-items:stretch;gap:.45rem;flex-wrap:nowrap}
  .header-tools .locale-group{flex-wrap:nowrap}
  .header-tools .account-group{margin-inline-start:auto;flex-wrap:nowrap}
  /* Titles: fixed sizes (were vw-based clamps, so they wrapped
     differently per phone width). */
  .hs-text h1{font-size:1.5rem}
  .page-head h1{font-size:1.45rem}
  /* Slider media: pinned box (was min(190px,55vw) — identical on most
     phones, but pinned so it can never differ on any width). */
  .hs-media img{width:190px;height:190px}
}

/* ══════════════ compact · One-row mobile tools with smaller locale buttons ══════════════
   Owner's permission (2026-10-29): shrinking the language/currency
   buttons is fine. So on phones (<=560px) the tools row goes back to
   ONE row — locale group + account group side by side — with compact
   buttons sized by budget to fit even a 320px phone (container 294px):
   locale buttons ~147px + account buttons ~125px + gaps ~12px = ~284px.
   This block comes after mobilefix, so it overrides only the tools
   direction (column -> row) and the button sizes; the fixed titles,
   pinned slider media and text-size-adjust from mobilefix stay. */
@media (max-width:560px){
  .header-tools{flex-direction:row;align-items:center;gap:.35rem}
  .header-tools .locale-group{gap:.3rem}
  .header-tools .account-group{gap:.3rem}
  .locale-btn{font-size:.78rem;padding:.3rem .5rem;gap:.3rem;min-height:40px}
  .locale-btn .ic svg{width:1.25em;height:1.25em}
  .cart-btn{min-width:38px;min-height:40px;padding:.35rem .55rem}
  .cart-btn .ic svg{width:1.2em;height:1.2em}
}

/* ══════════════ fix-logo · Restore the central slide logo box agreement ══════════════
   Defect found (2026-10-29): mobilefix set .hs-media img to 190x190,
   but the slide media BOX on phones is 148x148 (the later 148px rule
   wins over the older 190px rule). A 190px image inside a 148px box
   warps/overflows the big central floating logo — that is the defect
   the owner saw after the latest pack. The 148px box is already
   identical on every phone, so the fix is to restore the image to
   100%x100% (contained in its box), i.e. the known-good state
   before mobilefix. This block comes last, so it wins over mobilefix. */
@media (max-width:560px){
  .hs-media img{width:100%;height:100%}
}