/* ═══════════════════════════════════════════════════════════════
   ⭐ إعادة بناء كاملة (2026): صفحة واحدة موحّدة بدل نسختين منفصلتين
   (categories-browse لسطح المكتب + mobile-categories للهاتف، كل
   وحدة تخفي نفسها بـmedia query وتعرض رسالة "افتح بالجهاز الثاني").
   هذي النسخة تعمل بنفس الآلية على كل المقاسات — بلا أي تفريع، بلا أي
   إخفاء لصفحة كاملة — بنفس ميكانيكية تبويب "الأقسام" بتطبيق الجوال
   بالضبط:
   - عمود جانبي (Rail) يعرض دائمًا "إخوة" العنصر النشط حاليًا: بالجذر
     كل الأقسام الرئيسية + "البراندات"، وبأي عمق أعمق إخوة العنصر
     المختار (نفس القائمة التي كانت باللوحة الرئيسية قبل الدخول لهذا
     المستوى) — تصفّح "متسلسل" (Cascading) بلا حدّ لعدد المستويات.
   - اللوحة الرئيسية: مسار (Breadcrumb) قابل للضغط + بطاقة "عرض كل
     منتجات [العنصر الحالي]" تعكس العنصر المختار دائمًا (لا رابط ثابت
     أبدًا) + قائمة أبناء العنصر الحالي — الضغط على ابن له أبناء يدخل
     مستوى أعمق، والضغط على ابن بلا أبناء (ورقة) يذهب مباشرة لمنتجاته.
   - حقل البحث بالأعلى ينقل لصفحة البحث الكاملة مباشرة (بالضبط كتطبيق
     الجوال) بدل نتائج مصغّرة هنا.
   - بلا أي إشارة لعدد الفروع/المنتجات بجانب كل عنصر (بالضبط كالتطبيق).
   ═══════════════════════════════════════════════════════════════ */
.cbp-page{background:var(--bg-soft);min-height:calc(100vh - 80px);display:flex;flex-direction:column}

.cbp-hero{
  background:var(--bg-card);border-bottom:1px solid var(--border);
  padding:22px 16px 26px;position:relative;overflow:hidden;flex-shrink:0
}
.cbp-hero-inner{max-width:1240px;margin:0 auto;position:relative;z-index:1}
.cbp-hero-title{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:22px;font-weight:700;color:var(--text-h);margin-bottom:14px;text-align:center}
.cbp-search{
  max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;
  background:var(--bg-soft);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:12px 16px;cursor:pointer;transition:border-color .2s ease
}
.cbp-search:hover{border-color:var(--brand-primary)}
.cbp-search span{color:var(--text-m);font-size:13.5px}

.cbp-bc{max-width:1240px;width:100%;margin:0 auto;padding:20px 16px;font-size:12.5px;color:var(--text-m);display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0}
.cbp-bc a{color:var(--text-m);text-decoration:none;cursor:pointer}
.cbp-bc a:hover{color:var(--brand-primary)}
.cbp-bc .cur{font-weight:700;color:var(--text-h)}
.cbp-bc .sep{opacity:.5}

/* ── Body: rail + main، بنفس التناسب على كل المقاسات ── */
.cbp-body{max-width:1240px;width:100%;margin:0 auto;padding:0 16px 40px;display:flex;align-items:stretch;gap:16px;flex:1;min-height:0}

.cbp-rail{
  width:96px;flex-shrink:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  padding:4px 0 24px;display:flex;flex-direction:column;gap:10px;
  /* ⭐ إصلاح: كان بلا أي حدّ لارتفاعه — عند وجود أقسام فرعية كثيرة
     يطول العمود الجانبي بلا نهاية ويسحب طول الصفحة كاملة معه (فراغ
     أبيض طويل جدًا كما بالصورة). الآن محصور بارتفاع الشاشة المرئي مع
     تمرير داخلي خاص به بدل تمديد الصفحة. */
  max-height:calc(100vh - 220px);position:sticky;top:96px
}
.cbp-rail::-webkit-scrollbar{width:4px}
.cbp-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.cbp-rail-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 4px;border-radius:16px;transition:background .16s ease}
.cbp-rail-item.active{background:var(--brand-primary-dark,#4a3660);box-shadow:0 4px 14px rgba(74,54,96,.28)}
.cbp-rail-ico{
  width:46px;height:46px;border-radius:50%;background:var(--bg-soft);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0
}
.cbp-rail-item.active .cbp-rail-ico{background:#fff;border-color:#fff}
.cbp-rail-ico img{width:100%;height:100%;object-fit:cover}
.cbp-rail-lbl{font-size:11px;font-weight:700;text-align:center;line-height:1.3;color:var(--text-b);word-break:break-word}
.cbp-rail-item.active .cbp-rail-lbl{color:#fff}

.cbp-main{flex:1;min-width:0;padding-top:4px}
.cbp-main-cta{
  display:flex;align-items:center;gap:10px;width:100%;text-align:right;
  background:var(--bg-card);border:1.5px solid var(--border);border-radius:16px;
  padding:14px 14px;margin-bottom:14px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;
  font-family:inherit;color:inherit
}
.cbp-main-cta:hover{border-color:var(--brand-primary);box-shadow:0 8px 20px rgba(93,74,126,.1)}
.cbp-main-cta .back-ic{color:var(--brand-primary);flex-shrink:0}
.cbp-main-cta .lbl{flex:1;font-weight:700;font-size:14px;color:var(--text-h)}
.cbp-main-cta .grid-ic{width:30px;height:30px;border-radius:10px;background:var(--brand-primary-mist,rgba(93,74,126,.1));display:flex;align-items:center;justify-content:center;color:var(--brand-primary);flex-shrink:0}

.cbp-child-row{
  display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1.5px solid var(--border);
  border-radius:14px;padding:12px 14px;margin-bottom:10px;text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .15s ease
}
.cbp-child-row:hover{border-color:var(--brand-primary)}
.cbp-child-row .chev{color:var(--text-m);flex-shrink:0}
.cbp-child-row .nm{flex:1;font-weight:700;font-size:13.5px;color:var(--text-h);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbp-child-ico{width:42px;height:42px;border-radius:11px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.cbp-child-ico img{width:100%;height:100%;object-fit:cover}

.cbp-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:60px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  color:var(--text-m);text-align:center
}
.cbp-empty .ic{font-size:40px;opacity:.18}

/* Skeleton */
.cbp-skel{background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:cbpShimmer 1.3s ease-in-out infinite;border-radius:var(--r-sm)}
@keyframes cbpShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── من هنا فما فوق: تحسينات بحتة لسطح المكتب — نفس الآلية، مساحة
     أوسع فقط. لا إخفاء لأي شيء، لا رسالة "استخدم جهاز آخر". ── */
@media(min-width:768px){
  .cbp-hero{padding:32px 24px 38px}
  .cbp-hero-title{font-size:28px}
  .cbp-bc{padding:24px 24px}
  .cbp-body{padding:0 24px 56px;gap:22px}
  .cbp-rail{width:112px;gap:12px}
  .cbp-rail-ico{width:52px;height:52px}
  .cbp-main-cta{padding:16px 18px}
}
@media(min-width:1100px){
  .cbp-rail{width:130px}
}

.cbp-search input{min-width:0;flex:1;width:100%;border:0;outline:none;background:transparent;color:var(--text-h);font:inherit;font-size:16px}
.cbp-search input::placeholder{color:var(--text-m);opacity:1}
.cbp-search:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 15%,transparent)}
.cbp-search button{display:grid;place-items:center;flex-shrink:0;min-width:40px;min-height:40px;border:0;border-radius:8px;background:var(--brand-primary);color:white;cursor:pointer}