/* أُعيدت من الملف المشترك: للمحدد أكثر من نسخة في المشروع،
   والمشاركة كانت ستفرض نسخة صفحة أخرى على هذه. */
.lx-card { background:var(--bg-card);border:1.5px solid var(--border); border-radius:var(--r-md);padding:14px;cursor:pointer; transition:box-shadow .3s,transform .3s,border-color .3s; position:relative;text-decoration:none;color:inherit; display:flex;flex-direction:column; animation:lxCardIn .3s ease both; }

/* ════════════════════════════════════════════
   MOBILE HERO & STYLES (تم تعديل الألوان)
════════════════════════════════════════════ */
.lx-cat-hero {
    display:none;
    position:relative;
    overflow:hidden;
    background:var(--bg-soft);
    min-height:160px;
}
/* شكل البانر = مقاس صورة العرض المضبوط (--promo-ar-d/-m من offers.blade) —
   كان ارتفاعاً ثابتاً 160–260px فتُقصّ الصورة المرفوعة بمقاسها الصحيح */
.lx-hero-banner-img {
    width:100%;height:auto;aspect-ratio:var(--promo-ar-d, 16/7);
    object-fit:cover;object-position:center;display:block;
}
.lx-cat-hero picture { display:block; }
.lx-hero-placeholder {
    display:flex;align-items:center;justify-content:center;
    min-height:160px;
    background:linear-gradient(135deg, #5D4A7E 0%, #8E72B0 100%);
    font-size:64px;opacity:.15;
}

/* Promo type pills (mobile) */
.lx-subcat-pills {
    display:flex;gap:10px;
    padding:14px 16px 10px;overflow-x:auto;scrollbar-width:none;
    border-bottom:1px solid var(--border);background:var(--bg-card);
}
.lx-subcat-pills::-webkit-scrollbar { display:none; }
.lx-pill {
    display:flex;flex-direction:column;align-items:center;gap:6px;
    flex-shrink:0;cursor:pointer;transition:transform .2s;
}
.lx-pill:hover { transform:translateY(-2px); }
.lx-pill-circle {
    width:58px;height:58px;border-radius:50%;
    background:var(--bg-soft);border:2.5px solid var(--border);
    overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:22px;
    transition:border-color .2s;
}
.lx-pill.active .lx-pill-circle { border-color:var(--brand-primary, #5D4A7E);border-width:3px; }
.lx-pill-label {
    font-size:11px;font-weight:600;color:var(--text-m);
    text-align:center;max-width:62px;line-height:1.3;
}
.lx-pill.active .lx-pill-label { color:var(--brand-primary, #5D4A7E);font-weight:800; }

/* ══ Offers gallery — بانرات كبيرة (سطر واحد بالهاتف، صف باثنين بسطح
   المكتب)، بلا صندوق/خلفية مميّزة — خلفية القسم نفسها خلفية الصفحة،
   والصورة تملأ البانر بالكامل حافة لحافة ══════════════════════════ */
.lx-promo-rail {
    display:grid;grid-template-columns:1fr;
    gap:16px;padding:20px;margin:0 auto;max-width:1400px;
    background:transparent;
}
.lx-promo-card {
    cursor:pointer;transition:transform .2s;
    background:var(--bg-soft);border:none;padding:0;
    aspect-ratio:var(--promo-ar-d, 16/7);border-radius:var(--r-lg,16px);overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    font-size:48px;
}
.lx-promo-card:hover { transform:scale(1.008); }
.lx-promo-card picture { display:block;width:100%;height:100%; }
.lx-promo-card img { width:100%;height:100%;object-fit:cover;display:block; }
@media (min-width:641px) {
    .lx-promo-rail { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
    .lx-promo-rail { padding:14px;gap:12px; }
}
/* ⚠️ نقطة واحدة للجوال (768px) للشكل واختيار الصورة معاً (<picture> في
   luxe-offers.js) — كان الشكل يتغيّر عند 640 والصورة عند 768 فتظهر صورة
   الجوال في شكل سطح المكتب بينهما */
@media (max-width:768px) {
    .lx-promo-card { aspect-ratio:var(--promo-ar-m, 16/9); }
    .lx-hero-banner-img { aspect-ratio:var(--promo-ar-m, 16/9); }
}

/* ════ MOBILE STICKY BAR ════ */
.lx-mob-sticky {
    display:none;position:sticky;top:0;z-index:145;
    background:var(--bg-card);box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.lx-mob-search { padding:10px 16px;border-bottom:1px solid var(--border); }
.lx-search-box {
    display:flex;align-items:center;gap:10px;
    background:var(--bg-soft);border:1.5px solid var(--border);
    border-radius:var(--r-xl);padding:9px 16px;transition:border-color .2s;
}
.lx-search-box:focus-within { border-color:var(--brand-primary, #5D4A7E); }
.lx-search-box input {
    border:none;background:transparent;outline:none;
    font-size:14px;color:var(--text-h);flex:1;
    font-family:var(--font-primary,'Tajawal',sans-serif);
}
.lx-filter-row {
    display:flex;align-items:center;gap:8px;
    padding:10px 16px;overflow-x:auto;white-space:nowrap;
    scrollbar-width:none;border-bottom:1px solid var(--border);
}
.lx-filter-row::-webkit-scrollbar { display:none; }
.lx-fpill {
    display:inline-flex;align-items:center;gap:5px;
    padding:7px 14px;border:1px solid var(--border);border-radius:var(--r-lg);
    font-size:12.5px;cursor:pointer;color:var(--text-m);
    background:var(--bg-card);white-space:nowrap;flex-shrink:0;transition:all .2s;
}
.lx-fpill:hover,.lx-fpill.active,.lx-fpill.has-filter {
    background:rgba(93,74,126,.12);border-color:var(--brand-primary, #5D4A7E);
    color:var(--brand-primary, #5D4A7E);font-weight:700;
}
.lx-badge-pill {
    display:none;background:var(--brand-primary, #5D4A7E);color:#fff;
    font-size:10px;font-weight:800;padding:1px 6px;border-radius:var(--r-sm);
}
.lx-badge-pill.on { display:inline-block; }
.brand-badge {
    display:none;background:var(--brand-primary, #5D4A7E);color:#fff;
    font-size:10px;font-weight:800;padding:1px 6px;border-radius:var(--r-sm);
}
.brand-badge.on { display:inline-block; }

/* ════ LAYOUT ════ */
.lx-page { display:flex;max-width:1400px;margin:20px auto;gap:22px;padding:0 20px; }
.lx-sb-title {
    font-size:11px;font-weight:800;color:var(--text-m);
    text-transform:uppercase;letter-spacing:.5px;
    margin-bottom:8px;padding:0 2px;
}
.lx-sb-body { display:none;padding:4px 0 8px;max-height:260px;overflow-y:auto; }
.lx-sb-opt:hover { background:rgba(93,74,126,.08); }
.lx-sb-opt input { width:15px;height:15px;accent-color:var(--brand-primary, #5D4A7E);flex-shrink:0; }

/* Subcats in sidebar */
.lx-sb-subcat {
    display:flex;align-items:center;gap:8px;
    padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;
    font-size:13px;color:var(--text-b);transition:background .15s;
    margin:0 6px;
}
.lx-sb-subcat::before { content:'›';color:var(--text-m);font-size:16px;flex-shrink:0; }
.lx-sb-subcat:hover { background:rgba(93,74,126,.1); }
.lx-sb-subcat.active { background:rgba(93,74,126,.16);color:var(--brand-primary, #5D4A7E);font-weight:700; }
.lx-sb-subcat.active::before { color:var(--brand-primary, #5D4A7E); }

/* Brand search in sidebar */
.lx-brand-search {
    margin:4px 12px 8px;padding:7px 10px;
    border:1px solid var(--border);border-radius:var(--r-sm);
    font-size:12px;background:var(--bg-soft);outline:none;
    width:calc(100% - 24px);font-family:var(--font-primary,'Tajawal',sans-serif);
    transition:border-color .2s;
}
.lx-brand-search:focus { border-color:var(--brand-primary, #5D4A7E); }

.lx-apply-btn {
    display:block;width:calc(100% - 24px);
    margin:8px 12px 4px;padding:10px;
    background:var(--brand-primary, #5D4A7E);color:#fff;border:0;
    border-radius:var(--r-sm);font-size:13px;font-weight:700;
    cursor:pointer;font-family:var(--font-primary,'Tajawal',sans-serif);transition:opacity .2s;
}
.lx-apply-btn:hover { opacity:.88; }
.lx-bc a:hover { color:var(--brand-primary, #5D4A7E); }
.lx-bc .cur { color:var(--brand-primary, #5D4A7E);font-weight:600; }
.lx-vbtn:hover,.lx-vbtn.active {
    border-color:var(--brand-primary, #5D4A7E);
    background:var(--brand-primary, #5D4A7E);color:#fff;
}
.lx-sort {
    padding:7px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
    font-size:13px;font-family:var(--font-primary,'Tajawal',sans-serif);
    background:var(--bg-soft);color:var(--text-h);cursor:pointer;outline:none;
    transition:border-color .2s;
}
.lx-sort:focus { border-color:var(--brand-primary, #5D4A7E); }

/* ── بحث الصفحة · 2026-10-22 ── */
.lx-offers-search {
    display:flex; align-items:center; gap:7px;
    padding:0 10px; height:34px; min-width:230px;
    border:1px solid var(--border); border-radius:var(--r-sm);
    background:var(--bg-soft); color:var(--text-m);
    transition:border-color .2s, background .2s;
}
.lx-offers-search:focus-within { border-color:var(--brand-primary, #5D4A7E); background:var(--bg-card, #fff); }
.lx-offers-search input {
    flex:1; min-width:0; border:0; outline:none; background:transparent;
    font:inherit; font-size:13px; font-family:var(--font-primary,'Tajawal',sans-serif);
    color:var(--text-h);
}
/* ⚠️ زرّ المسح الأصليّ للمتصفّح مخفيّ: لنا زرّنا الذي يُعيد تحميل النتائج،
   وزرّان متجاوران يفعلان شيئين مختلفين فخٌّ للعميل. */
.lx-offers-search input::-webkit-search-cancel-button { display:none; }
.lx-offers-search button {
    border:0; background:transparent; color:var(--text-m);
    cursor:pointer; font-size:13px; line-height:1; padding:2px 4px;
}
.lx-offers-search button:hover { color:var(--brand-primary, #5D4A7E); }

/* ⚠️ الجوّال: الحقل يأخذ سطره كاملاً — 230px بجانب الفرز ومبدّل العرض
   تدفع الشريط للالتفاف فيقفز التخطيط. */
@media (max-width: 640px) {
    .lx-hd-ctrl { flex-wrap:wrap; }
    .lx-offers-search { order:-1; width:100%; min-width:0; }
}

/* Active filters bar */
.lx-af-bar { display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0 4px; }
.lx-af-bar.on { display:flex; }
.lx-af-chip {
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;background:rgba(93,74,126,.14);
    border:1px solid rgba(93,74,126,.4);border-radius:var(--r-lg);
    font-size:12px;color:var(--brand-primary, #5D4A7E);font-weight:600;cursor:pointer;
}
.lx-af-chip:hover { background:rgba(93,74,126,.24); }
.lx-af-clear { font-size:12px;color:var(--text-m);cursor:pointer;transition:color .2s; }
.lx-af-clear:hover { color:var(--brand-primary, #5D4A7E); }
/* ⭐ إصلاح: بانر "خصم نسبة/ثابت" كان شريط منفصل مستقل بأعلى الكارد (grid-
   row:3 تحت الاسم) بوضع القائمة — الآن يجلس بجانب اسم البراند بنفس السطر
   (grid-row:1) عبر التفاف .lx-brand-line المشترك؛ شكله بوضع الشبكة العادي
   يبقى كما هو تمامًا (شريط على الصورة) لأنه ما زال absolute نسبةً لـ.lx-card
   بغض النظر عن مكانه بالـDOM. */
.lx-grid.list-view .lx-card .lx-brand-line { grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px;min-width:0; }
.lx-grid.list-view .lx-card .lx-brand  { font-size:11px;margin-bottom:0; }
.lx-grid.list-view .lx-card .lx-offer-badge {
    position:static;top:auto;inset-inline-start:auto;z-index:auto;
    padding:2px 8px;font-size:9.5px;border-radius:var(--r-full);
    box-shadow:none;flex-shrink:0;
}
.lx-grid.list-view .lx-card .lx-pricing { grid-column:3;grid-row:1/span 4;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;min-width:95px; }
@keyframes lxCardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.lx-card:hover {
    box-shadow:0 8px 30px rgba(93,74,126,.15);
    transform:translateY(-4px);
    border-color:var(--brand-primary, #5D4A7E)40;
}

/* ── شارة المنتج (البانر) الموحّدة — ملاصقة لطرف الكارد نفسه، وليس طرف الصورة ── */
/* ── شارة العرض/الأكثر مبيعاً — زواياها حادة وملاصقة تماماً لزاوية الكارد، مطابقة للتصميم المرجعي ── */
.lx-offer-badge {
    position:absolute;top:-1.5px;inset-inline-start:-1.5px;z-index:6;
    font-size:11px;font-weight:800;letter-spacing:.02em;padding:7px 14px 7px 12px;line-height:1.3;
    background:linear-gradient(135deg,#e6394f,#c81430);
    color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18);pointer-events:none;
    border-start-start-radius:0;
    border-start-end-radius:0;
    border-end-start-radius:0;
    border-end-end-radius:var(--r-md);
}
.lx-img-wrap img { width:100%;height:100%;object-fit:cover; }
.lx-brand { font-size:12px;font-weight:800;color:var(--brand-primary, #5D4A7E);margin-bottom:4px;cursor:pointer; }
.lx-add-btn:hover {
    background:var(--brand-primary-dark, #3D2F5C);
    border-color:var(--brand-primary-dark, #3D2F5C);color:#fff;
}
.lx-qty {
    display:none;align-items:center;justify-content:space-between;
    background:linear-gradient(135deg, var(--brand-primary, #5D4A7E), #3D2F5C);
    border-radius:var(--r-sm,8px);padding:3px 4px;
    height:34px;width:100%;flex-shrink:0;
    animation:lxPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lxPop { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.lx-qty-btn {
    width:22px;height:22px;border-radius:50%;border:none;
    background:rgba(255,255,255,.28);color:#fff;font-size:16px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s;padding:0;
}

/* Skeleton */
.lx-skel { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px; }
.skel-img { width:100%;aspect-ratio:1/1;background:linear-gradient(90deg,#e8e8e8 25%,#f3f3f3 50%,#e8e8e8 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm);margin-bottom:12px; }
.skel-txt { height:13px;background:linear-gradient(90deg,#e8e8e8 25%,#f3f3f3 50%,#e8e8e8 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;margin-bottom:8px; }
.skel-txt.sm { width:60%; }
.skel-txt.xs { width:40%;height:18px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.lx-pg-btn {
    min-width:36px;height:36px;padding:0 8px;border:1.5px solid var(--border);
    background:var(--bg-card);color:var(--text-b);border-radius:var(--r-sm);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
    font-family:var(--font-primary,'Tajawal',sans-serif);transition:all .18s;
}
.lx-pg-btn:hover:not(:disabled):not(.active) { border-color:var(--brand-primary, #5D4A7E);color:var(--brand-primary, #5D4A7E); }
.lx-pg-btn.active { background:var(--brand-primary, #5D4A7E);color:#fff;border-color:var(--brand-primary, #5D4A7E);box-shadow:0 3px 10px rgba(93,74,126,.4); }
.lx-pg-btn:disabled { opacity:.35;cursor:not-allowed; }

/* ════ MOBILE SHEETS ════ */
.lx-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; }
.lx-mob-sheet {
    position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);
    border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px;max-height:80vh;overflow-y:auto;
    z-index:1000;box-shadow:0 -4px 20px rgba(0,0,0,.2);
    transform:translateY(100%);transition:transform .3s ease;
}
.lx-sheet-reset { background:none;border:none;font-size:14px;color:var(--text-m);cursor:pointer;font-family:var(--font-primary,'Tajawal',sans-serif);padding:0; }
.lx-sheet-reset:hover { color:var(--brand-primary, #5D4A7E); }
.lx-sheet-apply {
    width:100%;background:linear-gradient(135deg, var(--brand-primary, #5D4A7E), #3D2F5C);color:#fff;
    padding:14px;border:none;border-radius:var(--r-sm);font-size:15px;
    font-family:var(--font-primary,'Tajawal',sans-serif);cursor:pointer;margin-top:16px;font-weight:700;
}
.lx-sort-opt {
    display:flex;align-items:center;gap:12px;padding:13px 4px;
    border-bottom:1px solid var(--border);cursor:pointer;font-size:15px;color:var(--text-b);
}
.lx-sort-opt input { width:18px;height:18px;accent-color:var(--brand-primary, #5D4A7E); }
.lx-sort-opt.selected label { color:var(--brand-primary, #5D4A7E);font-weight:700; }
.lx-avail-opt {
    display:flex;align-items:center;gap:12px;padding:14px 4px;
    border-bottom:1px solid var(--border);cursor:pointer;font-size:15px;color:var(--text-b);
}
.lx-avail-opt:last-child { border-bottom:none; }
.lx-avail-opt input { width:18px;height:18px;accent-color:var(--brand-primary, #5D4A7E); }
.lx-avail-opt label { cursor:pointer;flex:1; }
.lx-mob-brand-search:focus { border-color:var(--brand-primary, #5D4A7E); }
.lx-mob-brand-item input { width:18px;height:18px;accent-color:var(--brand-primary, #5D4A7E);cursor:pointer; }

/* Responsive */
@media (max-width:968px) {
    .lx-sidebar { display:none !important; }
    .lx-mob-sticky { display:block !important; }
    .lx-cat-hero { display:block !important; }
    .lx-page { padding:0 10px;margin-top:0; }
    .lx-grid { grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px; }
    .lx-prod-hd { border-radius:0;margin-bottom:12px; }
}
@media (min-width:969px) {
    .lx-mob-sticky { display:none !important; }
    .lx-cat-hero { display:none !important; }
}
/* ⭐ إصلاح: القاعدة أعلاه (.lx-cat-hero { display:block !important }) كانت
   تتجاوز أي display:none نضبطه من الجافاسكربت (inline style)، فيبقى
   البانر الثابت العام ظاهراً بالهاتف حتى لو أخفيناه صراحةً — لأن
   !important على الـ class يتغلّب على inline style عادي بلا !important.
   الحل: قاعدة أكثر تحديداً (id + class) تتغلّب على قاعدة الـ class وحدها
   بصرف النظر عن ترتيبها بالملف. */
#offersHeroWrap.lx-hero-hidden { display:none !important; }
@media (max-width:640px) {
    .lx-grid { grid-template-columns:repeat(2,1fr);gap:10px; }
    .lx-price { font-size:17px; }
}
@media (max-width:768px) {
    .lx-grid.list-view { grid-template-columns:1fr !important;gap:10px; }
    .lx-grid.list-view .lx-card {
        display:grid !important;
        grid-template-columns:88px 1fr auto !important;
        gap:0 10px !important;padding:10px !important;min-height:100px !important;
    }
    .lx-grid.list-view .lx-card .lx-img-wrap {
        width:88px !important;height:88px !important;aspect-ratio:1/1 !important;
        margin-bottom:0 !important;grid-row:1/span 4 !important;grid-column:1 !important;
    }
    .lx-grid.list-view .lx-card .lx-brand-line {
        grid-column:2 !important;grid-row:1 !important;
        display:flex !important;align-items:center !important;gap:5px !important;min-width:0 !important;
    }
    .lx-grid.list-view .lx-card .lx-brand  { font-size:10px !important;margin-bottom:0 !important; }
    .lx-grid.list-view .lx-card .lx-name   { grid-column:2 !important;grid-row:2 !important;font-size:11.5px !important;min-height:32px !important; }
    .lx-grid.list-view .lx-card .lx-offer-badge {
        position:static !important;top:auto !important;inset-inline-start:auto !important;
        padding:2px 7px !important;font-size:9px !important;border-radius:var(--r-full) !important;
        box-shadow:none !important;flex-shrink:0 !important;
    }
    .lx-grid.list-view .lx-card .lx-pricing {
        grid-column:3 !important;grid-row:1/span 4 !important;
        flex-direction:column !important;align-items:stretch !important;
        justify-content:center !important;gap:6px !important;min-width:70px !important;
    }
    /* ⚠️ نفس إصلاح القلب العائم — راجع التعليق بالقاعدة الأساسية أعلاه. */
    .lx-grid.list-view .lx-card .lx-wish {
        position:absolute !important;top:4px !important;
        inset-inline-start:4px !important;inset-inline-end:auto !important;
    }
    .lx-view-toggle { display:flex !important; }
}