/* أُعيدت من الملف المشترك: للمحدد أكثر من نسخة في المشروع،
   والمشاركة كانت ستفرض نسخة صفحة أخرى على هذه. */
.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
════════════════════════════════════════════ */
.lx-cat-hero {
    display:none;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--brand-dark,#3a2d5c) 0%,var(--brand-primary) 100%);
    min-height:160px;
}
.lx-hero-bg {
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    opacity:.3;transition:all .4s;
}
.lx-hero-content {
    position:relative;z-index:2;padding:22px 18px 14px;color:#fff;
}
.lx-hero-title { font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;margin-bottom:4px;text-shadow:0 2px 12px rgba(0,0,0,.35); }
.lx-hero-sub   { font-size:12.5px;opacity:.82;margin-bottom:12px; }

/* Sub-category 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-circle img { width:100%;height:100%;object-fit:cover; }
.lx-pill.active .lx-pill-circle { border-color:var(--brand-primary);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);font-weight:800; }

/* ════ 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); }
.lx-search-box input {
    border:none;background:transparent;outline:none;
    font-size:14px;color:var(--text-h);flex:1;
    font-family:'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;
}
.brand-badge {
    display:none;background:var(--brand-primary);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; }
#sbSubcatsList {
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.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-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;
}
.lx-sb-subcat::before { content:'›';color:var(--text-m);font-size:16px;flex-shrink:0; }
.lx-sb-subcat:hover { background:var(--brand-primary)12; }
.lx-sb-subcat.active { background:var(--brand-primary)18;color:var(--brand-primary);font-weight:700; }
.lx-sb-subcat.active::before { color:var(--brand-primary); }
.lx-sb-body { display:none;padding:4px 0 8px;max-height:260px;overflow-y:auto; }

.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:'Tajawal',sans-serif;
    transition:border-color .2s;
}
.lx-brand-search:focus { border-color:var(--brand-primary); }
.lx-apply-btn {
    display:block;width:calc(100% - 24px);
    margin:8px 12px 4px;padding:10px;
    background:var(--brand-primary);color:#fff;border:0;
    border-radius:var(--r-sm);font-size:13px;font-weight:700;
    cursor:pointer;font-family:'Tajawal',sans-serif;transition:opacity .2s;
}
.lx-apply-btn:hover { opacity:.88; }

/* Tree nav */
.lx-tree-label {
    display:flex;align-items:center;gap:6px;padding:7px 14px;
    cursor:pointer;font-size:13px;color:var(--text-b);transition:background .15s;
}
.lx-sort {
    padding:7px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
    font-size:13px;font-family:'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); }

/* 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:var(--brand-primary)18;
    border:1px solid var(--brand-primary)50;border-radius:var(--r-lg);
    font-size:12px;color:var(--brand-primary);font-weight:600;cursor:pointer;
}
.lx-af-chip:hover { background:var(--brand-primary)28; }
.lx-af-clear { font-size:12px;color:var(--text-m);cursor:pointer;transition:color .2s; }
.lx-af-clear:hover { color:var(--brand-primary); }
.lx-grid.list-view .lx-card .lx-brand { grid-column:2;grid-row:1;font-size:11px; }
.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;margin-top:0; }
@keyframes lxCardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
/* ── زر المفضّلة — بالطرف الآخر من الكارد، مربّع الشكل بزوايا مدوّرة متوسطة (ليس دائرياً وليس حاد الزوايا) ── */
.lx-wish {
    position:absolute;top:10px;inset-inline-end:10px;z-index:6;
    width:28px;height:28px;padding:0;border-radius:10px;
    border:1.5px solid var(--border);background:var(--bg-card);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .2s;color:var(--text-m);
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.lx-img-wrap img { width:100%;height:100%;object-fit:contain; }
.lx-brand { font-size:12px;font-weight:800;color:var(--brand-primary);margin-bottom:4px;cursor:pointer; }
.lx-avail { font-size:11px;color:var(--text-m);background:var(--bg-soft);padding:2px 8px;border-radius:var(--r-lg); }
.lx-avail.low  { background:#fff3cd;color:#856404; }
.lx-avail.zero { background:#fee2e2;color:#991b1b; }
/* زر "نبّهني عند التوفر" — outline بدل تعبئة، مع نص واضح، حتى لا يبدو
   المنتج غير المتوفر متاحاً للشراء الفوري */
.lx-notify-btn {
    width:100%;height:34px;border-radius:var(--r-sm,8px);
    border:1.5px solid var(--brand-primary);background:transparent;color:var(--brand-primary);
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
    font-size:11px;font-weight:700;flex-shrink:0;transition:all .2s;padding:0 6px;
}
.lx-notify-btn:hover { background:var(--brand-primary);color:#fff; }
.lx-notify-btn.subscribed { background:var(--brand-primary);color:#fff; }
.lx-notify-btn.loading { opacity:.6;pointer-events:none; }
.lx-qty {
    display:none;align-items:center;justify-content:space-between;
    background:var(--brand-primary);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;
}
/* ── نجوم التقييم ── */
.lx-stars {
    display:flex;align-items:center;gap:2px;
    margin-bottom:6px;
    font-size:13px;
    line-height:1;
}
.lx-star { color:#ddd; transition:color .2s; }
.lx-star.full  { color:#f59e0b; }
.lx-star.half  { color:#f59e0b;opacity:.55; }
.lx-star-count { font-size:10px;color:var(--text-m);margin-right:3px; }

/* 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:'Tajawal',sans-serif;transition:all .18s;
}
.lx-pg-btn:hover:not(:disabled):not(.active) { border-color:var(--brand-primary);color:var(--brand-primary); }
.lx-pg-btn:disabled { opacity:.35;cursor:not-allowed; }

/* Sort sheet */
.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);transition:color .2s;
}
.lx-sort-opt input { width:18px;height:18px;accent-color:var(--brand-primary); }
.lx-sort-opt.selected label { color:var(--brand-primary);font-weight:700; }

/* Stock/Availability sheet */
.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);transition:color .2s;
}
.lx-avail-opt:last-child { border-bottom:none; }
.lx-avail-opt input { width:18px;height:18px;accent-color:var(--brand-primary); }
.lx-avail-opt label { cursor:pointer;flex:1; }

/* Active pill indicator */
.lx-fpill.has-filter {
    background:var(--brand-primary)18;
    border-color:var(--brand-primary);
    color:var(--brand-primary);
    font-weight:700;
}
.lx-empty i { display:block;margin-bottom:12px; }

/* 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; }
}
@media (max-width:640px) {
    .lx-grid { grid-template-columns:repeat(2,1fr);gap:10px; }
    .lx-price { font-size:17px; }
    #paginationWrap { display:block !important; }
    .lx-pagination { display:flex !important;flex-wrap:wrap;gap:5px;margin-top:20px; }
    .lx-pg-btn { min-width:34px;height:34px;font-size:12px; }
}

/* ════ MOBILE LIST-VIEW ════ */
@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;
        align-items: start !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;
        border-radius: var(--r-sm) !important;
    }
    .lx-grid.list-view .lx-card .lx-brand {
        grid-column: 2 !important; grid-row: 1 !important;
        font-size: 10px !important; margin-bottom: 2px !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;
        -webkit-line-clamp: 2 !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; margin-top: 0 !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-grid.list-view .lx-card .lx-price { font-size: 15px !important; }
    .lx-view-toggle { display: flex !important; }
}