/* =====================================================================
   BaderLR — المظهر 4.4: رأس زجاجي مائي + ألوان متدرّجة لكل تصنيف
   مظهر فقط: لا يغيّر عناصر القائمة ولا روابطها ولا ترتيبها.
   الألوان مشتقّة من «اللون المميّز» و«اللون الثاني» في المخصّص.
   ===================================================================== */

/* ---------- 1) درجات متناسقة مع لون الموقع (تدوير زاوية اللون) ---------- */
:root{
  --tone-0-a:var(--brand); --tone-0-b:var(--brand-2);
  /* احتياطي للمتصفحات القديمة: مزج مع ألوان ثابتة متناسقة */
  --tone-1-a:color-mix(in oklab,var(--brand) 55%,#6D28D9); --tone-1-b:color-mix(in oklab,var(--brand-2) 55%,#A78BFA);
  --tone-2-a:color-mix(in oklab,var(--brand) 50%,#0F9F7A); --tone-2-b:color-mix(in oklab,var(--brand-2) 55%,#5EEAD4);
  --tone-3-a:color-mix(in oklab,var(--brand) 45%,#C026D3); --tone-3-b:color-mix(in oklab,var(--brand-2) 50%,#F0ABFC);
  --tone-4-a:color-mix(in oklab,var(--brand) 50%,#0E7490); --tone-4-b:color-mix(in oklab,var(--brand-2) 55%,#67E8F9);
  --tone-5-a:color-mix(in oklab,var(--brand) 50%,#4338CA); --tone-5-b:color-mix(in oklab,var(--brand-2) 55%,#93C5FD);
  --tone-6-a:color-mix(in oklab,var(--brand) 45%,#DB2777); --tone-6-b:color-mix(in oklab,var(--brand-2) 50%,#FDA4AF);
  --tone-7-a:color-mix(in oklab,var(--brand) 45%,#D97706); --tone-7-b:color-mix(in oklab,var(--brand-2) 50%,#FCD34D);
}
@supports (color:hsl(from red h s l)){
  :root{
    --tone-1-a:hsl(from var(--brand) calc(h + 42) s l);  --tone-1-b:hsl(from var(--brand-2) calc(h + 42) s l);
    --tone-2-a:hsl(from var(--brand) calc(h - 38) s l);  --tone-2-b:hsl(from var(--brand-2) calc(h - 38) s l);
    --tone-3-a:hsl(from var(--brand) calc(h + 84) s l);  --tone-3-b:hsl(from var(--brand-2) calc(h + 84) s l);
    --tone-4-a:hsl(from var(--brand) calc(h - 76) s l);  --tone-4-b:hsl(from var(--brand-2) calc(h - 76) s l);
    --tone-5-a:hsl(from var(--brand) calc(h + 22) s l);  --tone-5-b:hsl(from var(--brand-2) calc(h + 22) s l);
    --tone-6-a:hsl(from var(--brand) calc(h + 120) s l); --tone-6-b:hsl(from var(--brand-2) calc(h + 120) s l);
    --tone-7-a:hsl(from var(--brand) calc(h - 120) s l); --tone-7-b:hsl(from var(--brand-2) calc(h - 120) s l);
  }
}
.blr-tone-0{--tone-a:var(--tone-0-a); --tone-b:var(--tone-0-b)}
.blr-tone-1{--tone-a:var(--tone-1-a); --tone-b:var(--tone-1-b)}
.blr-tone-2{--tone-a:var(--tone-2-a); --tone-b:var(--tone-2-b)}
.blr-tone-3{--tone-a:var(--tone-3-a); --tone-b:var(--tone-3-b)}
.blr-tone-4{--tone-a:var(--tone-4-a); --tone-b:var(--tone-4-b)}
.blr-tone-5{--tone-a:var(--tone-5-a); --tone-b:var(--tone-5-b)}
.blr-tone-6{--tone-a:var(--tone-6-a); --tone-b:var(--tone-6-b)}
.blr-tone-7{--tone-a:var(--tone-7-a); --tone-b:var(--tone-7-b)}

/* ---------- 2) التصنيفات بألوان متدرّجة ---------- */
.blr-badge[class*="blr-tone-"]{color:#fff; background:linear-gradient(120deg,var(--tone-a),var(--tone-b)); box-shadow:0 6px 16px -8px var(--tone-a)}
a.blr-cat-link[class*="blr-tone-"]{font-weight:700; background:linear-gradient(90deg,var(--tone-a),var(--tone-b)); -webkit-background-clip:text; background-clip:text; color:transparent}
/* شرائح تصنيفات المتجر وتصنيف بطاقة المنتج */
.bbl-chip[class*="blr-tone-"]{border-color:color-mix(in srgb,var(--tone-a) 30%,var(--line)); background:linear-gradient(120deg,color-mix(in srgb,var(--tone-a) 9%,var(--surface)),var(--surface) 70%)}
.bbl-chip[class*="blr-tone-"] .bbl-chip__ic{background:linear-gradient(135deg,var(--tone-a),var(--tone-b)); color:#fff; display:grid; place-items:center; font-weight:800}
.bbl-chip[class*="blr-tone-"] img{outline:2px solid color-mix(in srgb,var(--tone-a) 55%,transparent); outline-offset:1px}
.bbl-chip[class*="blr-tone-"]:hover{border-color:var(--tone-a); color:var(--tone-a); box-shadow:0 12px 26px -14px var(--tone-a)}
.bbl-card__cat[class*="blr-tone-"]{display:inline-block; font-weight:700; background:linear-gradient(90deg,var(--tone-a),var(--tone-b)); -webkit-background-clip:text; background-clip:text; color:transparent}
/* شبكة تصنيفات WooCommerce */
.woocommerce ul.products li.product-category[class*="blr-tone-"] > a{display:block; border-radius:var(--r-md); padding:8px; background:linear-gradient(150deg,color-mix(in srgb,var(--tone-a) 12%,var(--surface)),var(--surface) 70%); border:1px solid color-mix(in srgb,var(--tone-a) 22%,var(--line))}
.woocommerce ul.products li.product-category[class*="blr-tone-"] h2{background:linear-gradient(90deg,var(--tone-a),var(--tone-b)); -webkit-background-clip:text; background-clip:text; color:transparent}
/* رأس صفحة التصنيف: شريط متدرّج بلون التصنيف */
body[class*="blr-tone-"] .blr-page-head,body[class*="blr-tone-"] .woocommerce-products-header{position:relative}
body[class*="blr-tone-"] .blr-page-head::after,body[class*="blr-tone-"] .woocommerce-products-header::after{content:""; display:block; height:4px; width:min(220px,40%); margin-top:14px; border-radius:4px; background:linear-gradient(90deg,var(--tone-a),var(--tone-b))}

/* ---------- 3) الرأس الزجاجي المائي ---------- */
body.blr-glass .blr-header{
  background:transparent; border-bottom:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  padding-block:10px; transition:padding var(--dur) var(--ease);
}
body.blr-glass .blr-header.is-stuck{background:transparent; box-shadow:none; padding-block:6px}
body.blr-glass .blr-header__bar{
  --gx:50%; --gy:0%;
  position:relative; isolation:isolate; padding-inline:clamp(10px,1.4vw,18px);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34)),
    color-mix(in srgb,var(--surface) 40%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(185%); backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 color-mix(in srgb,var(--brand) 10%,transparent),
    0 1px 2px rgba(11,27,51,.05),
    0 14px 36px -18px color-mix(in srgb,var(--brand) 45%,rgba(11,27,51,.35));
  transition:min-height var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}
/* طبقة الماء: انعكاسات لونية متموّجة + بريق يتبع المؤشّر */
body.blr-glass .blr-header__bar::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120px 60px at var(--gx) var(--gy),rgba(255,255,255,.75),transparent 70%),
    radial-gradient(38% 140% at 12% 120%,color-mix(in srgb,var(--brand-2) 26%,transparent),transparent 70%),
    radial-gradient(34% 140% at 88% -30%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%),
    radial-gradient(30% 120% at 55% 130%,color-mix(in srgb,var(--tone-3-a) 14%,transparent),transparent 70%);
  background-size:100% 100%,200% 100%,200% 100%,200% 100%;
  animation:blr-water 16s ease-in-out infinite alternate;
}
/* حافة لامعة متدرّجة (سطح الماء) */
body.blr-glass .blr-header__bar::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; padding:1px;
  background:linear-gradient(115deg,rgba(255,255,255,.95),color-mix(in srgb,var(--brand-2) 55%,transparent) 35%,rgba(255,255,255,.2) 55%,color-mix(in srgb,var(--brand) 50%,transparent) 85%,rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75;
}
@keyframes blr-water{
  0%{background-position:50% 50%,0% 0%,100% 0%,30% 0%}
  50%{background-position:50% 50%,60% 0%,40% 0%,80% 0%}
  100%{background-position:50% 50%,100% 0%,0% 0%,10% 0%}
}
body.blr-glass .blr-header.is-stuck .blr-header__bar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -18px color-mix(in srgb,var(--brand) 55%,rgba(11,27,51,.45));
}

/* عناصر القائمة: فقاعة زجاجية عند المرور بدل الخط السفلي */
body.blr-glass .blr-header .blr-menu > li > a{border-radius:14px; transition:color var(--dur), background var(--dur), box-shadow var(--dur)}
body.blr-glass .blr-header .blr-menu > li > a::after{inset-inline:1.1em; bottom:.2em; height:2px; opacity:.9}
body.blr-glass .blr-header .blr-menu > li:hover > a,
body.blr-glass .blr-header .blr-menu > li.is-open > a,
body.blr-glass .blr-header .blr-menu > .current-menu-item > a,
body.blr-glass .blr-header .blr-menu > .current-menu-ancestor > a{
  background:linear-gradient(180deg,rgba(255,255,255,.7),color-mix(in srgb,var(--brand-soft) 80%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent),0 6px 16px -10px var(--brand-ring);
}
/* الأزرار الدائرية في الرأس بنفس الزجاج */
body.blr-glass .blr-header .blr-icon-btn,body.blr-glass .blr-header .blr-lang__btn{
  background:rgba(255,255,255,.45); border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.blr-glass .blr-cta-head{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -10px var(--brand-ring)}

/* القوائم المنسدلة والضخمة: لوح زجاجي */
body.blr-glass .blr-header .blr-menu ul{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6)),color-mix(in srgb,var(--surface) 55%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -24px color-mix(in srgb,var(--brand) 40%,rgba(11,27,51,.4));
}
body.blr-glass .blr-header .blr-menu > li.blr-mega > ul{
  border-radius:24px;
  background:
    radial-gradient(50% 120% at 100% 0%,color-mix(in srgb,var(--brand-2) 16%,transparent),transparent 60%),
    radial-gradient(40% 120% at 0% 100%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.62));
}
body.blr-glass .blr-header .blr-menu ul a:hover{background:rgba(255,255,255,.65); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 16%,transparent)}
body.blr-glass .blr-header .blr-menu > li.blr-mega > ul > li > a{background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.6)}
body.blr-glass .blr-header .blr-menu > li.blr-mega > ul > li > a:hover{background:rgba(255,255,255,.8); border-color:color-mix(in srgb,var(--brand) 22%,transparent)}

/* درج الجوال */
body.blr-glass .blr-drawer__panel{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 82%,transparent),color-mix(in srgb,var(--surface) 70%,transparent));
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
}

/* الوضع الليلي ونمط Onyx: زجاج داكن */
body.blr-glass.blr-dark .blr-header__bar,body.blr-glass.blr-v-onyx .blr-header__bar{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),color-mix(in srgb,var(--surface) 55%,transparent);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px -18px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent);
}
body.blr-glass.blr-dark .blr-header__bar::before,body.blr-glass.blr-v-onyx .blr-header__bar::before{opacity:.8;
  background:
    radial-gradient(120px 60px at var(--gx) var(--gy),rgba(255,255,255,.12),transparent 70%),
    radial-gradient(38% 140% at 12% 120%,color-mix(in srgb,var(--brand-2) 22%,transparent),transparent 70%),
    radial-gradient(34% 140% at 88% -30%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 70%),
    radial-gradient(30% 120% at 55% 130%,color-mix(in srgb,var(--tone-3-a) 16%,transparent),transparent 70%);
  background-size:100% 100%,200% 100%,200% 100%,200% 100%}
body.blr-glass.blr-dark .blr-header__bar::after,body.blr-glass.blr-v-onyx .blr-header__bar::after{opacity:.45}
body.blr-glass.blr-dark .blr-header .blr-menu > li:hover > a,body.blr-glass.blr-dark .blr-header .blr-menu > li.is-open > a,
body.blr-glass.blr-dark .blr-header .blr-menu > .current-menu-item > a,body.blr-glass.blr-dark .blr-header .blr-menu > .current-menu-ancestor > a,
body.blr-glass.blr-v-onyx .blr-header .blr-menu > li:hover > a,body.blr-glass.blr-v-onyx .blr-header .blr-menu > .current-menu-item > a{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08)}
body.blr-glass.blr-dark .blr-header .blr-icon-btn,body.blr-glass.blr-dark .blr-header .blr-lang__btn,
body.blr-glass.blr-v-onyx .blr-header .blr-icon-btn{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
body.blr-glass.blr-dark .blr-header .blr-menu ul,body.blr-glass.blr-v-onyx .blr-header .blr-menu ul{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),color-mix(in srgb,var(--surface) 78%,transparent);
  border-color:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -24px rgba(0,0,0,.75)}
body.blr-glass.blr-dark .blr-header .blr-menu > li.blr-mega > ul,body.blr-glass.blr-v-onyx .blr-header .blr-menu > li.blr-mega > ul{
  background:
    radial-gradient(50% 120% at 100% 0%,color-mix(in srgb,var(--brand-2) 14%,transparent),transparent 60%),
    radial-gradient(40% 120% at 0% 100%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),
    color-mix(in srgb,var(--surface) 86%,transparent)}
body.blr-glass.blr-dark .blr-header .blr-menu ul a:hover,body.blr-glass.blr-v-onyx .blr-header .blr-menu ul a:hover,
body.blr-glass.blr-dark .blr-header .blr-menu > li.blr-mega > ul > li > a:hover{background:rgba(255,255,255,.07)}
body.blr-glass.blr-dark .blr-header .blr-menu > li.blr-mega > ul > li > a,body.blr-glass.blr-v-onyx .blr-header .blr-menu > li.blr-mega > ul > li > a{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.06)}

/* الجوال */
@media (max-width:1024px){
  body.blr-glass .blr-header{padding-block:8px}
  body.blr-glass .blr-header__bar{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  body.blr-glass .blr-header__bar::before{animation:none}
}
/* لا دعم للضبابية: خلفية شبه معتمة */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  body.blr-glass .blr-header__bar,body.blr-glass .blr-header .blr-menu ul{background:var(--surface)}
}

/* شارة اللغة والعملة في الوضع الليلي: تباين أوضح */
body.blr-glass.blr-dark .blr-header .blr-lang__flag,body.blr-glass.blr-v-onyx .blr-header .blr-lang__flag{
  color:#fff; background:color-mix(in srgb,var(--brand-2,#22D3EE) 28%,transparent)}