/* ════ Brand Profile Header (.bp-*) ════ */
/* ⚠️ يطابق حاوية .lx-page بالصفحة نفسها (max-width:1400px + padding:0 20px)
   حتى لا يمتد الرأس بعرض الشاشة كاملاً بينما بقية المحتوى داخل هوامش. */
.bp-wrap {
    max-width: 1400px;
    margin: 20px auto 18px;
    padding: 0 20px;
}
.bp-cover {
    position: relative;
    border-radius: var(--r-lg, 18px);
    overflow: hidden;
    padding: 34px 24px 26px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--bp-color) 0%, rgba(0,0,0,.55) 100%);
}
.bp-cover.has-img::before {
    content: ''; position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-image: var(--bp-cover-img);
    opacity: .38;
}
.bp-cover > * { position: relative; z-index: 1; }
.bp-logo {
    width: 92px; height: 92px; margin: 0 auto 14px;
    border-radius: 24px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* ⚠️ cover لا contain: الشعار يملأ البطاقة كاملة بلا هوامش بيضاء.
   المقابل أن الشعارات الطويلة أفقياً قد تُقصّ من الجانبين — وهو
   مقبول هنا لأن البطاقة مربّعة والشعار مركزي في معظم الحالات. */
.bp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* خلفية بيضاء خلف الشعار فقط — بلا شعار نُبقي الشفافية والحرفين.
   صنف صريح بدل :has() لتفادي المتصفحات الأقدم. */
.bp-logo.has-logo { background: #fff; border-color: rgba(255,255,255,.5); }
.bp-logo span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px; font-weight: 600; letter-spacing: 1px;
}
.bp-name { font-size: 23px; font-weight: 800; line-height: 1.3; }
.bp-name-en { font-size: 14px; opacity: .82; margin-top: 3px; }
.bp-rating {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px; font-size: 13px; font-weight: 700;
}
.bp-rating .bp-star { color: #FFC53D; }

/* شريط الإحصائيات */
.bp-stats {
    display: grid; grid-auto-flow: column; justify-content: center;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border, #EBE4F2);
    border-radius: var(--r-lg, 18px);
    margin-top: -18px; position: relative; z-index: 2;
    /* ⚠️ حد أقصى + توسيط: بدونه يتمدد العمودان لطرفَي شاشة عريضة
       فيصير بينهما فراغ هائل ويفقد الشريط قابلية القراءة. */
    max-width: 520px; margin-inline: auto; padding: 16px 8px;
}
.bp-stat { min-width: 128px; }
.bp-stat { text-align: center; padding-inline: 18px; }
.bp-stat + .bp-stat { border-inline-start: 1.5px solid var(--border, #EBE4F2); }
.bp-stat-val { font-size: 17px; font-weight: 800; color: var(--text-h, #1F1A28); }
.bp-stat-lbl { font-size: 11.5px; color: var(--text-m, #8A7E9F); margin-top: 3px; }

/* زر المتابعة */
.bp-follow {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    /* حد أقصى مثل شريط الإحصائيات — زر بعرض 1900px لا يُقرأ كزر */
    width: 100%; max-width: 340px; margin: 16px auto 0;
    padding: 13px; border-radius: 999px;
    border: 1.5px solid var(--brand-primary, #5D4A7E);
    background: var(--brand-primary, #5D4A7E); color: #fff;
    font-family: inherit; font-size: 14.5px; font-weight: 800;
    cursor: pointer; transition: background .18s, color .18s, transform .12s;
}
.bp-follow:hover { transform: translateY(-1px); }
.bp-follow:disabled { opacity: .6; cursor: default; transform: none; }
/* حالة "متابَع" — معكوسة بصرياً حتى يفهم المستخدم أن الضغط يُلغي */
.bp-follow.is-following {
    background: transparent; color: var(--brand-primary, #5D4A7E);
}
.bp-follow svg, .bp-follow i { width: 17px; height: 17px; }

/* رافع صورة البراند — يظهر فقط للموظف صاحب الصلاحية أسفل زر المتابعة */
.bp-uploader-wrap { display: flex; justify-content: center; margin-top: 14px; }

/* التبويبات */
.bp-tabs {
    display: flex; gap: 4px; margin-top: 18px;
    border-bottom: 1.5px solid var(--border, #EBE4F2);
}
.bp-tab {
    flex: 1; padding: 12px 6px; background: none; border: none;
    border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    color: var(--text-m, #8A7E9F); cursor: pointer;
}
.bp-tab.active { color: var(--brand-primary, #5D4A7E); border-bottom-color: var(--brand-primary, #5D4A7E); }
.bp-panel { padding-top: 16px; }
.bp-panel[hidden] { display: none; }

.bp-about p { font-size: 14px; line-height: 1.9; color: var(--text-h, #1F1A28); }
.bp-about .bp-empty, .bp-reviews .bp-empty {
    text-align: center; padding: 34px 16px;
    color: var(--text-m, #8A7E9F); font-size: 13.5px;
}
.bp-meta-row {
    display: flex; gap: 8px; align-items: center;
    margin-top: 14px; font-size: 13px; color: var(--text-m, #8A7E9F);
}
.bp-review {
    border: 1.5px solid var(--border, #EBE4F2);
    border-radius: var(--r-md, 14px);
    padding: 14px; margin-bottom: 10px;
}
.bp-review-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bp-review-user { font-size: 13.5px; font-weight: 800; color: var(--text-h, #1F1A28); }
.bp-review-stars { font-size: 12.5px; color: #FFC53D; letter-spacing: 1px; }
.bp-review-product { font-size: 11.5px; color: var(--text-m, #8A7E9F); margin-top: 2px; }
.bp-review-body { font-size: 13.5px; line-height: 1.75; color: var(--text-h, #1F1A28); margin-top: 8px; }

/* ⚠️ إخفاء عنوان القسم المكرر: شريط المنتجات يعرض #catTitle الذي تملؤه
   دالة loadBrandProducts باسم البراند — فيظهر الاسم مرتين (مرة في الرأس
   ومرة أسفله مباشرة). نُبقي مسار التنقّل وعدّاد المنتجات ونخفي العنوان
   وحده. هذا التنسيق يُحمَّل من هذا الجزء فقط، أي على صفحة البراند حصراً
   ولا يمسّ صفحة القسم إطلاقاً. */
#catTitle { display: none; }

/* ⚠️ الجوال: الصفحة تملك رأسها الخاص أصلاً (.lx-cat-hero) الذي يظهر
   عند ≤968px ويعرض اسم البراند وعدد منتجاته على خلفية شعاره. إظهار
   غلافنا معه يعني رأسين فوق بعض. لذا نُخفي الغلاف هنا ونُبقي ما لا
   يوفّره الرأس القديم: الإحصائيات، زر المتابعة، والتبويبات.
   عند ≥969px ينعكس الأمر: الرأس القديم مخفي بقاعدة الصفحة نفسها،
   فيظهر غلافنا وحده. */
@media (max-width: 968px) {
    .bp-cover { display: none; }
    .bp-wrap { padding: 0 14px; margin: 0 0 14px; }
    /* الإزاحة السالبة كانت لتداخل الشريط مع الغلاف — بلا غلاف تصير
       تداخلاً مع الرأس القديم، وهو أثر مقصود ومقبول بصرياً */
    .bp-stats { max-width: none; margin: -18px 14px 0; }
    .bp-stat { min-width: 0; padding-inline: 8px; }
    .bp-follow { max-width: none; width: calc(100% - 28px); margin-inline: 14px; }
}
@media (max-width: 480px) {
    .bp-cover { padding: 26px 16px 24px; }
    .bp-logo { width: 76px; height: 76px; }
    .bp-name { font-size: 20px; }
}