/* أُعيدت من الملف المشترك: للمحدد أكثر من نسخة في المشروع،
   والمشاركة كانت ستفرض نسخة صفحة أخرى على هذه. */
.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; }

/* ════════════════════════════════════════════
   نفس تصميم صفحة الأقسام (categories.blade.php):
   Hero موبايل + هيدر بطاقة (breadcrumb+عنوان) + ترقيم دائري
════════════════════════════════════════════ */

/* 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:130px;border-radius:0 0 var(--r-lg) var(--r-lg);margin-bottom:14px;
}
.lx-hero-content { position:relative;z-index:2;padding:22px 18px 18px;color:#fff; }
.lx-hero-title { font-family:'Cormorant Garamond',serif;font-size:26px;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; }

/* تخطيط الصفحة — نفس lx-page/lx-prod-area بصفحة الأقسام */
.lx-page { max-width:1400px;margin:20px auto;padding:0 20px;display:flex;gap:22px; }
.lx-sb-body { display:none;padding:4px 0 10px;max-height:260px;overflow-y:auto; }
.lx-sb-cnt { color:var(--text-m);font-size:11px; }
.lx-tree-label {
    display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 14px;
    cursor:pointer;font-size:13px;color:var(--text-b);text-decoration:none;transition:background .15s;
}
.lx-sb-empty { padding:10px 14px;font-size:12px;color:var(--text-m); }

/* ════ شريط الفلاتر بالموبايل (Pills) — نفس تصميم صفحة الأقسام ════ */
.lx-mob-fbar {
    display:none;align-items:center;gap:8px;
    padding:2px 0 14px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
}
.lx-mob-fbar::-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;
    text-decoration:none;
}

.lx-mob-cat-list { max-height:55vh;overflow-y:auto; }
.lx-mob-cat-item {
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:13px 4px;border-bottom:1px solid var(--border);
    font-size:14.5px;color:var(--text-b);text-decoration:none;
}
.lx-mob-cat-item:last-child { border-bottom:none; }
.lx-mob-cat-item.selected { color:var(--brand-primary);font-weight:700; }
.lx-mob-cat-item .cnt { font-size:12px;color:var(--text-m); }

@media (max-width:968px) {
    .lx-cat-hero { display:block !important; }
    /* ⚠️ overflow-x:hidden على body يجعله حاوية التمرير، فيفقد الهيدر
       (.m-header, position:sticky) تثبيته في الموبايل. القيمة clip تمنع
       التمرير الأفقي دون إنشاء حاوية تمرير، فيبقى sticky عاملاً.
       hidden أولاً كبديل للمتصفحات التي لا تعرف clip. */
    body, .luxe { overflow-x:hidden; overflow-x:clip; }
    .lx-page { flex-direction:column;padding:0 10px;margin-top:0;max-width:100%;overflow-x:hidden; }
    .lx-sidebar { display:none !important; }
    .lx-mob-fbar { display:flex; }
    .lx-prod-hd { border-radius:0;margin-bottom:12px; }
}
.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-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; }
.lx-empty i { display:block;margin-bottom:12px; }
.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;pointer-events:none; }

@media (max-width:640px) {
    .lx-grid { grid-template-columns:repeat(2,1fr);gap:10px; }
    .lx-pagination { gap:5px;margin-top:20px;padding-bottom:10px; }
    .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; }
}