/* ═════════ وِصال — التصميم الزجاجي (Liquid Glass) ═════════
   الألوان تتبع هويات الموقع الأحد عشر عبر المتغيرات:
   --wine --wine-deep --wine-mid --gold --gold-soft --cream
   لتبديل صورة الكعبة: غيّر --bg-img (جوال) و --bg-img-wide (سطح المكتب) فقط.
   الملف مبني بطبقتين: طبقة أساسية تعمل في كل المتصفحات، ثم طبقة تتبع الهوية
   داخل @supports لا تُطبَّق إلا حيث يدعم المتصفح color-mix.               */
:root{
  --bg-img:url("/assets/img/kaaba-bg-m.webp");        /* جوال (750px) */
  --bg-img-wide:url("/assets/img/kaaba-bg.webp");     /* سطح المكتب */
  --glass-blur:14px;
  --wash-strength:.40;
}
@media (min-width:900px){:root{--bg-img:var(--bg-img-wide);--glass-blur:18px}}

/* ─── 1) الخلفية الثابتة ─── */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:var(--bg-img) 50% 100%/cover no-repeat;
  filter:saturate(1.12) contrast(1.05) brightness(.95);
  transform:scale(1.18);transform-origin:50% 100%;
}
@media (min-width:900px){
  body::before{transform:none;background-position:50% 58%}   /* يُظهر الكعبة في المنتصف على الشاشات العريضة */
}
html::after{                         /* صبغة الهوية فوق الصورة */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--wine-mid);mix-blend-mode:color;opacity:var(--wash-strength);
}
body::after{                         /* تعتيم متدرّج (أساسي) */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,6,22,.64) 0%,rgba(26,6,22,.40) 30%,rgba(26,6,22,.46) 60%,rgba(20,4,14,.82) 100%);
}
.hero-bg{display:none}

/* ─── 2) الزجاج (أساسي) ─── */
.g,.blur{
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 46%,rgba(255,255,255,.08)),rgba(20,6,18,.40);
  border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 26px rgba(255,255,255,.04),0 14px 38px rgba(8,0,6,.32);
}
.btn-glass{background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(20,6,18,.55))!important;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ib{border-radius:18px}
.mainnav{border-radius:30px}

/* ─── 3) شريط التبويب السفلي (جوال) ─── */
.tabbar{display:none}
@media (max-width:899px){
  body{padding-bottom:calc(112px + var(--sb))}
  .fab{bottom:calc(104px + var(--sb));width:46px;height:46px;opacity:.92}
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    position:fixed;z-index:1100;inset-inline:12px;bottom:calc(10px + var(--sb));
    height:78px;padding:6px 6px 8px;border-radius:38px;
    background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07)),rgba(20,6,18,.62);
  }
  .tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
    background:none;border:0;padding:0 0 4px;color:var(--cream);
    font:500 12px/1 var(--f-ar);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .tab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tab svg use{pointer-events:none}
  .tab[aria-current="true"]{color:var(--gold-soft)}
  .tab.home{color:var(--cream)}
  .tab.home .orb{
    display:grid;place-items:center;width:64px;height:64px;margin-top:-34px;border-radius:50%;
    background:linear-gradient(145deg,var(--gold-soft),var(--gold));color:var(--wine-deep);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 22px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.12);
  }
  .tab.home .orb svg{width:30px;height:30px;stroke:var(--wine-deep)}
  .tab.home span.lbl{font-weight:700;font-size:13px}
  .tab.home[aria-current="true"] span.lbl{color:var(--gold-soft)}
  .tab.home::before{content:"";position:absolute;top:-46px;width:6px;height:6px;rotate:45deg;background:var(--gold-soft);opacity:0}
  .tab.home[aria-current="true"]::before{opacity:1}
}

/* ─── 4) طبقة الهوية (تُطبَّق فقط إن دعم المتصفح color-mix) ─── */
@supports (color:color-mix(in srgb,red 50%,blue)){
  body::after{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--wine-deep) 64%,transparent) 0%,
      color-mix(in srgb,var(--wine-deep) 36%,transparent) 30%,
      color-mix(in srgb,var(--wine-deep) 42%,transparent) 60%,
      color-mix(in srgb,var(--wine-deep) 82%,transparent) 100%);
  }
  .g,.blur{
    background:linear-gradient(150deg,
      color-mix(in srgb,var(--cream) 17%,transparent),
      color-mix(in srgb,var(--cream) 4%,transparent) 46%,
      color-mix(in srgb,var(--cream) 8%,transparent)),
      color-mix(in srgb,var(--wine-deep) 44%,transparent);
    border-color:color-mix(in srgb,var(--cream) 34%,transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cream) 50%,transparent),
               inset 0 0 26px color-mix(in srgb,var(--cream) 5%,transparent),
               0 14px 38px color-mix(in srgb,var(--wine-deep) 55%,transparent);
  }
  .btn-glass{background:linear-gradient(150deg,color-mix(in srgb,var(--cream) 15%,transparent),
             color-mix(in srgb,var(--wine-deep) 60%,transparent))!important}
  .note{color:rgba(255,255,255,.9)}
  .more{color:color-mix(in srgb,var(--gold-soft) 72%,#fff)}
  @media (max-width:899px){
    .tabbar{background:linear-gradient(150deg,color-mix(in srgb,var(--cream) 14%,transparent),
             color-mix(in srgb,var(--cream) 3%,transparent) 50%,color-mix(in srgb,var(--cream) 7%,transparent)),
             color-mix(in srgb,var(--wine-deep) 66%,transparent)}
    .tab.home .orb{background:linear-gradient(145deg,var(--gold-soft),var(--gold) 68%,color-mix(in srgb,var(--gold) 72%,#000));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 22px rgba(0,0,0,.4),0 0 0 4px color-mix(in srgb,var(--cream) 12%,transparent)}
  }
}

/* ─── 5) تقليل الشفافية / عدم دعم الضبابية ─── */
@media (prefers-reduced-transparency:reduce){
  .g,.blur,.tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--wine-deep)}
  html::after{opacity:0}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .g,.blur,.tabbar{background:var(--wine-deep)}
}

/* ─── مسار التنقل المرئي (فتات الخبز) ─── */
.bc{max-width:820px;margin:10px auto 0;font:500 13px/1.5 var(--f-ar)}
.bc[hidden]{display:none}
.bc ol{list-style:none;margin:0;padding:5px 14px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 8px;border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(20,6,18,.42);
  border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bc li{display:inline-flex;align-items:center;gap:8px;color:var(--cream)}
.bc li+li::before{content:"\2039";opacity:.7}
html[dir="ltr"] .bc li+li::before{content:"\203A"}
.bc a{color:var(--cream);text-decoration:none;display:inline-block;min-height:24px;line-height:24px}
.bc a:hover,.bc a:focus-visible{text-decoration:underline}
.bc [aria-current]{color:var(--gold-soft);font-weight:700}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .bc ol{background:linear-gradient(150deg,color-mix(in srgb,var(--cream) 13%,transparent),color-mix(in srgb,var(--cream) 3%,transparent)),color-mix(in srgb,var(--wine-deep) 52%,transparent);
    border-color:color-mix(in srgb,var(--cream) 28%,transparent)}
}
@media (prefers-reduced-transparency:reduce){.bc ol{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--wine-deep)}}

/* ===== P6 إمكانية الوصول — بلا تغيير بصري ===== */
/* نقاط الشريحة: منطقة لمس 24×24 (WCAG 2.5.8) والنقطة المرئية كما هي؛ الهوامش تحفظ موضعها العمودي */
.dots{gap:0;margin-top:3.5px;margin-bottom:-8.5px}
.dots button{position:relative;width:24px;height:24px;border-radius:0;background:none}
.dots button[aria-current="true"]{width:24px;border-radius:0;background:none}
.dots button::before{content:"";position:absolute;inset:8.5px;border-radius:50%;background:rgba(255,255,255,.35);transition:inset .3s var(--ease),background .3s}
.dots button[aria-current="true"]::before{inset:8.5px 2px;border-radius:5px;background:var(--gold-soft)}
/* روابط عناوين المنتجات: توسيع منطقة اللمس عمودياً دون أثر على التخطيط */
h3>a{padding-block:2px}
/* هدف رابط التخطي يستقبل التركيز برمجياً دون إطار */
[tabindex="-1"]:focus{outline:none}
/* P6 تباين روابط «المزيد» فوق صورة الخلفية: هالة داكنة خفيفة خلف الحروف فقط (لا خلفية ولا تغيير تخطيط) */
.more{text-shadow:0 0 5px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.6)}
@supports (color:color-mix(in srgb,red,blue)){
  .more{text-shadow:0 0 5px color-mix(in srgb,var(--wine-deep) 55%,#000),0 0 12px color-mix(in srgb,var(--wine-deep) 55%,#000),0 1px 1px color-mix(in srgb,var(--wine-deep) 45%,#000)}
}