/* ===========================================================================
   fastkart — صفحهٔ دسته و برند (Product Listing Page)
   ===========================================================================

   «صفحهٔ دسته‌بندی و برند از تمِ رنگی پشتیبانی می‌کند و خیلی بد شده. مثلِ صفحهٔ محصول
   طراحیِ خاصِ خودش را بزن، در حدِ سایت‌های بزرگ مثلِ دیجی‌کالا.»

   همان تصمیمِ `products-detail.css`: خاکستری‌ها ثابت‌اند (پالتِ slate، کنتراستِ ≥ ۴٫۵) و
   از تنظیماتِ قالب («رنگ زمینه»، «رنگ متن»، ته‌رنگِ گرادیان) چیزی نمی‌گیرند؛ رنگِ اصلیِ
   فروشگاه فقط برای تأکید است، و همیشه در نسخهٔ تیره‌شده‌اش (`--plp-brand-strong`) تا روی
   سفید خوانا بماند — پیش‌فرضِ فست‌کارت `#3dcfff` است و متنِ هم‌رنگش دیده نمی‌شد.

   این پرونده بعد از `listing.css` و `category.css`/`brand.css` بار می‌شود و فقط ظاهر را
   بازنویسی می‌کند؛ رفتار (فیلتر، ترتیب، «بیشتر»، کشوی موبایل) همان
   `_shared/js/catalog-filters.js` است. هر انتخابگر زیرِ `.plp` است تا صفحه‌های دیگر دست
   نخورند.
   =========================================================================== */

.plp {
    --plp-ink: #0f172a;
    --plp-text: #334155;
    --plp-muted: #64748b;
    --plp-line: #e2e8f0;
    --plp-line-soft: #eef2f6;
    --plp-canvas: #f8fafc;
    --plp-surface: #ffffff;
    --plp-sale: #d92d20;
    --plp-sale-bg: #fef3f2;
    --plp-brand: var(--theme-accent, #0da487);
    --plp-brand-strong: color-mix(in srgb, var(--plp-brand) 55%, #0b1220);
    --plp-brand-soft: color-mix(in srgb, var(--plp-brand) 8%, #fff);
    --plp-r-sm: 8px; --plp-r: 12px; --plp-r-lg: 16px;
    --plp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --plp-shadow-lg: 0 14px 34px -16px rgba(15, 23, 42, .22);
    color: var(--plp-text);
}
@supports (color: oklch(from red l c h)) {
    .plp { --plp-brand-strong: oklch(from var(--plp-brand) min(l, 0.5) c h); }
}
.plp :focus-visible { outline: 2px solid var(--plp-brand-strong); outline-offset: 2px; }

/* ---------- سرِ صفحه ---------- */
.plp .lst-hero {
    background: var(--plp-surface);
    border: 1px solid var(--plp-line);
    border-radius: var(--plp-r-lg);
    box-shadow: var(--plp-shadow);
}
.plp .lst-hero__media { background: var(--plp-canvas); color: var(--plp-ink); box-shadow: inset 0 0 0 1px var(--plp-line); }
.plp .lst-hero__media.has-image { background: var(--plp-surface); }
.plp .lst-hero__initial { color: var(--plp-ink); }
.plp .lst-hero__title { color: var(--plp-ink); }
.plp span.lst-chip { background: var(--plp-canvas); color: var(--plp-text); border: 1px solid var(--plp-line); font-weight: 700; }
.plp .lst-hero__more { color: var(--plp-brand-strong); }
.plp .lst-hero__excerpt { color: var(--plp-muted); }
.plp .lst-hero__filter { background: var(--plp-ink); color: #fff; }

/* ---------- زیردسته‌ها و صفحه‌های ویژه: دایره‌های تصویر با نام زیرش، مثلِ ویترینِ دسته‌های بزرگ ----------
   ستون‌ها **پهنای ثابت** دارند (`repeat(auto-fill, 104px)`) و نه `1fr`: کارتِ ۱۱۲پیکسلی در خانهٔ
   «دست‌کم ۱۷۰» پیش از این وسطِ فضای خالی می‌نشست و فاصلهٔ دو زیردسته از خودِ کارت بیشتر بود.
   حالا نوار به‌اندازهٔ محتوایش است و از راست شروع می‌شود؛ فاصله همان ۴ پیکسلِ میانِ کارت‌هاست
   و کارت خودش ۸ پیکسل حاشیهٔ درونی دارد که نام‌های دوخطی به هم نچسبند. */
.plp .lst-subcats { margin-bottom: 16px; }
.plp .lst-subcats__list { grid-template-columns: repeat(auto-fill, 104px); justify-content: start; gap: 4px; }
.plp .lst-subcat {
    position: relative; flex-direction: column; justify-content: flex-start; gap: 8px; width: 100%; min-height: 0;
    padding: 10px 6px 8px; text-align: center; border: 1px solid transparent; border-radius: var(--plp-r);
    background: transparent; box-shadow: none; color: var(--plp-ink);
}
.plp .lst-subcat:hover { border-color: var(--plp-line); background: var(--plp-surface); box-shadow: var(--plp-shadow); }
.plp span.lst-subcat__media {
    width: 72px; height: 72px; border-radius: 50%; background: var(--plp-canvas);
    box-shadow: inset 0 0 0 1px var(--plp-line); color: var(--plp-ink); font-size: 24px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.plp .lst-subcat:hover span.lst-subcat__media { transform: scale(1.04); }
.plp .lst-subcat__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.plp span.lst-subcat__name {
    font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--plp-ink); white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* صفحهٔ ویژه: حلقهٔ رنگِ قالب دورِ تصویر و نشانِ «ویژه» رویش — جدا از زیردسته، بی‌عنوانِ دیگر. */
.plp .lst-subcat--special span.lst-subcat__media {
    box-shadow: 0 0 0 2px var(--plp-surface), 0 0 0 4px var(--theme-color);
    color: var(--theme-color); background: rgba(var(--theme-accent-rgb), .08);
}
.plp span.lst-subcat__badge {
    position: absolute; top: 66px; inset-inline-start: 50%; transform: translateX(50%);
    padding: 1px 8px; border-radius: 999px; background: var(--theme-color); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1.7; box-shadow: 0 0 0 2px var(--plp-surface);
}
.plp .lst-subcat--special span.lst-subcat__name { margin-top: 4px; }
@media (max-width: 575.98px) {
    .plp .lst-subcats__list { display: flex; gap: 2px; }
    .plp .lst-subcats__list > li { flex: 0 0 96px; }
}

/* ---------- نوارِ ترتیب ---------- */
.plp .lst-toolbar { border-bottom: 1px solid var(--plp-line); padding-bottom: 0; }
.plp span.lst-toolbar__label { color: var(--plp-ink); }
.plp .lst-sort__item {
    position: relative; border-radius: 0; background: transparent; color: var(--plp-muted);
    padding: 12px 10px; font-weight: 600;
}
.plp .lst-sort__item:hover { background: transparent; color: var(--plp-ink); }
.plp .lst-sort__item.is-active { background: transparent; color: var(--plp-brand-strong); font-weight: 800; }
.plp .lst-sort__item.is-active::after {
    content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px;
    border-radius: 2px; background: var(--plp-brand-strong);
}

/* ---------- شبکهٔ کارت‌ها ---------- */
.plp .plp-grid {
    display: grid; gap: 12px; margin-top: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media (max-width: 575.98px) { .plp .plp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

.plp-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--plp-surface); border: 1px solid var(--plp-line); border-radius: var(--plp-r);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.plp-card:hover { border-color: #cbd5e1; box-shadow: var(--plp-shadow-lg); transform: translateY(-2px); }
.plp-card__media { display: block; aspect-ratio: 1 / 1; padding: 14px; background: var(--plp-surface); }
.plp-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.plp-card:hover .plp-card__media img { transform: scale(1.04); }
.plp-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 4px 14px 14px; border-top: 1px solid var(--plp-line-soft); }
.plp span.plp-card__kicker { display: block; padding-top: 10px; min-height: 18px; font-size: 11.5px; color: var(--plp-muted); }
.plp-card__name {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 3em; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--plp-ink);
}
.plp-card__name:hover { color: var(--plp-brand-strong); }
.plp-card__price { margin-top: auto; display: grid; justify-items: end; gap: 2px; min-height: 46px; }
.plp-card__was { display: flex; align-items: center; gap: 8px; }
.plp-card__was del { font-size: 12px; color: #94a3b8; }
.plp span.plp-badge {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
    background: var(--plp-sale); color: #fff; font-size: 11.5px; font-weight: 800;
}
.plp-card__now { font-size: 12px; color: var(--plp-muted); }
.plp-card__now b { font-size: 16px; font-weight: 800; color: var(--plp-ink); font-variant-numeric: tabular-nums; }
.plp span.plp-card__out { display: inline-flex; align-items: center; gap: 6px; align-self: end; font-size: 12.5px; color: var(--plp-muted); }

/* ---------- ستونِ فیلترها ---------- */
.plp :is(.cat-sidebar, .br-sidebar) {
    border: 1px solid var(--plp-line); border-radius: var(--plp-r-lg); box-shadow: var(--plp-shadow); background: var(--plp-surface);
}
.plp :is(.cat-filter-block, .br-filter-block) { border-bottom: 1px solid var(--plp-line-soft); }
.plp :is(.cat-filter-title, .br-filter-title) { color: var(--plp-ink); font-weight: 800; }
.plp :is(.cat-toggle-row, .br-toggle-row) span { color: var(--plp-text); }
.plp :is(.cat-switch, .br-switch) input:checked + .slide { background: var(--plp-brand-strong); }
.plp :is(.cat-side-search, .br-side-search) input { border-color: var(--plp-line); background: var(--plp-canvas); }
.plp :is(.cat-side-search, .br-side-search) input:focus { border-color: var(--plp-brand-strong); background: var(--plp-surface); }
.plp :is(.cat-brand-list, .cat-attr-list, .cat-cat-list, .br-brand-list, .br-attr-list, .br-cat-list) label { color: var(--plp-text); }
.plp :is(.cat-brand-list, .cat-attr-list, .cat-cat-list, .br-brand-list, .br-attr-list, .br-cat-list) label:hover { background: var(--plp-canvas); color: var(--plp-ink); }
.plp :is(.cat-brand-list, .cat-attr-list, .cat-cat-list, .br-brand-list, .br-attr-list, .br-cat-list) input[type="checkbox"] { accent-color: var(--plp-brand-strong); }

/* ---------- «محصولاتِ بیشتر»، حالتِ خالی و متنِ معرفی ---------- */
.plp :is(.cat-load-more, .br-load-more) {
    border: 1px solid var(--plp-line); background: var(--plp-surface); color: var(--plp-ink);
    border-radius: 999px; font-weight: 700; box-shadow: var(--plp-shadow);
}
.plp :is(.cat-load-more, .br-load-more):hover { background: var(--plp-ink); border-color: var(--plp-ink); color: #fff; }
.plp .lst-empty { border-color: var(--plp-line); background: var(--plp-canvas); }
.plp .lst-empty > i { color: var(--plp-muted); }
.plp .lst-empty__title { color: var(--plp-ink); }
.plp .lst-empty__text { color: var(--plp-muted); }
.plp .lst-about { border-color: var(--plp-line); box-shadow: var(--plp-shadow); background: var(--plp-surface); }
.plp .lst-about__title { color: var(--plp-ink); }
.plp .lst-about__title::after { background: var(--plp-ink); }
.plp .lst-about__toggle { border-color: var(--plp-line); color: var(--plp-ink); }
.plp .lst-about__toggle:hover { background: var(--plp-canvas); }

@media (prefers-reduced-motion: reduce) {
    .plp-card, .plp-card__media img { transition: none; }
    .plp-card:hover { transform: none; }
    .plp-card:hover .plp-card__media img { transform: none; }
}