/* ===== CATEGORY PAGE ===== */
*, *::before, *::after { box-sizing: border-box; }

.cat-page { max-width: 80rem; margin: 0 auto; padding: 0.75rem 1rem 2rem; }

/* Breadcrumb */
.cat-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:0.375rem; font-size:0.8125rem; color:#9ca3af; margin-bottom:0.875rem; }
.cat-breadcrumb a { color:#6b7280; text-decoration:none; }
.cat-breadcrumb a:hover { color:#e0457b; }
.cat-breadcrumb .sep { color:#d1d5db; }
.cat-breadcrumb .current { color:#374151; font-weight:500; }

/* Header */
.cat-header { margin-bottom:1rem; }
.cat-title { font-size:1.25rem; font-weight:700; color:#111827; margin:0 0 0.25rem; }
.cat-desc { font-size:0.875rem; color:#6b7280; line-height:1.6; margin:0; }

/* Sub-categories strip */
.cat-subs-strip {
    display:flex;
    gap:0.5rem;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0.25rem 0 0.75rem;
    margin-bottom:0.5rem;
    -webkit-overflow-scrolling:touch;
}
.cat-subs-strip::-webkit-scrollbar { display:none; }
.cat-sub-chip {
    display:inline-flex;
    align-items:center;
    padding:0.3125rem 0.875rem;
    border:1px solid #e5e7eb;
    border-radius:9999px;
    font-size:0.8125rem;
    color:#4b5563;
    text-decoration:none;
    white-space:nowrap;
    background:#fff;
    flex-shrink:0;
    transition:all 0.15s;
}
.cat-sub-chip:hover { border-color:#e0457b; color:#e0457b; background:#fef2f7; }

/* Sort bar - mobile scrollable chips */
.cat-sort-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
    gap: 6px;
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cat-sort-bar::-webkit-scrollbar { display: none; }
.sort-label {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 8px;
    border-left: 1px solid #e5e7eb;
    margin-left: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sort-label svg { color: #9ca3af; }
.sort-opt {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
    background: transparent;
    flex-shrink: 0;
    font-family: inherit;
    border: none;
    cursor: pointer;
}
.sort-opt:hover { background: #f3f4f6; color: #111827; }
.sort-opt.active { background: #fce7f3; color: #e0457b; font-weight: 700; }

/* Active filters */
.active-filters { display:flex; flex-wrap:wrap; gap:0.375rem; margin-bottom:0.875rem; }
.filter-chip { display:inline-flex; align-items:center; gap:0.375rem; padding:0.25rem 0.75rem; background:#fce7f3; color:#be185d; border-radius:9999px; font-size:0.75rem; font-weight:500; }
.filter-chip button { background:none; border:none; cursor:pointer; color:#be185d; font-size:1rem; line-height:1; padding:0; display:flex; align-items:center; }
.btn-clear-filters { font-size:0.75rem; color:#6b7280; text-decoration:underline; background:none; border:none; cursor:pointer; font-family:inherit; }

/* Filter toggle (mobile) */
.btn-filter-toggle { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; border:1px solid #e5e7eb; border-radius:9999px; font-size:0.875rem; color:#374151; background:#fff; cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0; transition:all 0.15s; }
.btn-filter-toggle:hover { border-color:#e0457b; color:#e0457b; }
.btn-filter-toggle svg { flex-shrink:0; }
.filter-badge { background:#e0457b; color:#fff; border-radius:50%; width:1.125rem; height:1.125rem; font-size:0.6875rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

/* Grid/List toggle */
.view-toggle { display:flex; border:1px solid #e5e7eb; border-radius:0.5rem; overflow:hidden; margin-right:auto; }
.view-btn { width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; background:#fff; border:none; cursor:pointer; color:#9ca3af; transition:all 0.15s; }
.view-btn.active { background:#f3f4f6; color:#374151; }
.view-btn:hover { background:#f9fafb; color:#374151; }

/* Layout */
.cat-body { display:grid; grid-template-columns:1fr; gap:1.25rem; }

/* Sidebar - hidden on mobile, slide-up */
.cat-sidebar { display:none; }

/* Mobile filter drawer */
.filter-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9997; }
.filter-overlay.open { display:block; }
.filter-drawer { position:fixed; bottom:0; right:0; left:0; background:#fff; z-index:9998; border-radius:1rem 1rem 0 0; padding:1.25rem 1rem; max-height:85vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.filter-drawer.open { transform:translateY(0); }
.filter-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid #f3f4f6; }
.filter-drawer-head h3 { font-size:1rem; font-weight:700; color:#111827; margin:0; }
.filter-drawer-close { background:none; border:none; cursor:pointer; font-size:1.25rem; color:#6b7280; }
.filter-footer { display:flex; gap:0.75rem; margin-top:1rem; padding-top:1rem; border-top:1px solid #f3f4f6; position:sticky; bottom:0; background:#fff; }
.btn-apply { flex:1; padding:0.75rem; background:#e0457b; color:#fff; border:none; border-radius:0.75rem; font-size:0.9375rem; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-apply:hover { background:#c73d6e; }
.btn-reset { padding:0.75rem 1.25rem; border:1px solid #e5e7eb; border-radius:0.75rem; font-size:0.9375rem; color:#6b7280; background:#fff; cursor:pointer; font-family:inherit; }

/* Filter groups */
.filter-group { margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid #f3f4f6; }
.filter-group:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.filter-title { font-size:0.875rem; font-weight:600; color:#374151; margin-bottom:0.625rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.filter-title svg { transition:transform 0.2s; }
.filter-title.collapsed svg { transform:rotate(-90deg); }
.filter-items { display:flex; flex-direction:column; gap:0.25rem; }
.filter-item { display:flex; align-items:center; gap:0.625rem; padding:0.375rem 0.25rem; border-radius:0.5rem; cursor:pointer; transition:background 0.12s; }
.filter-item:hover { background:#fef2f7; }
.filter-item input[type="checkbox"] { width:1.125rem; height:1.125rem; accent-color:#e0457b; cursor:pointer; flex-shrink:0; }
.filter-item-label { font-size:0.875rem; color:#374151; flex:1; }
.filter-count { font-size:0.75rem; color:#9ca3af; }

/* Price range slider */
.price-slider-wrap { position:relative; height:1.5rem; margin:1.25rem 0 0.25rem; }
.price-slider-track { position:absolute; top:50%; left:0; right:0; height:4px; background:#e5e7eb; border-radius:9999px; transform:translateY(-50%); }
.price-slider-range { position:absolute; height:100%; background:#e0457b; border-radius:9999px; }
.price-thumb { position:absolute; top:50%; width:100%; height:4px; background:none; border:none; outline:none; pointer-events:none; -webkit-appearance:none; appearance:none; transform:translateY(-50%); }
.price-thumb::-webkit-slider-thumb { -webkit-appearance:none; width:1.125rem; height:1.125rem; background:#e0457b; border:2px solid #fff; border-radius:50%; cursor:pointer; pointer-events:all; box-shadow:0 1px 4px rgba(224,69,123,0.4); }
.price-thumb::-moz-range-thumb { width:1.125rem; height:1.125rem; background:#e0457b; border:2px solid #fff; border-radius:50%; cursor:pointer; pointer-events:all; box-shadow:0 1px 4px rgba(224,69,123,0.4); }
.price-values { display:flex; justify-content:space-between; font-size:0.8125rem; color:#374151; margin-top:0.5rem; font-weight:500; }

/* Availability */
.toggle-wrap { display:flex; align-items:center; gap:0.75rem; }
.toggle { position:relative; width:2.5rem; height:1.375rem; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#e5e7eb; border-radius:9999px; cursor:pointer; transition:background 0.2s; }
.toggle-slider::before { content:''; position:absolute; width:1.125rem; height:1.125rem; right:0.125rem; top:0.125rem; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.toggle input:checked + .toggle-slider { background:#e0457b; }
.toggle input:checked + .toggle-slider::before { transform:translateX(-1.125rem); }
.toggle-label { font-size:0.875rem; color:#374151; cursor:pointer; }

/* Products area */
.cat-products {}
.cat-toolbar { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.875rem; flex-wrap:wrap; }
.cat-toolbar-count { font-size:0.8125rem; color:#6b7280; }

/* Grid */
.cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; }
.cat-grid.list-view { grid-template-columns:1fr; }

/* Product Card */
.pcard { background:#fff; border-radius:0.875rem; overflow:hidden; border:1px solid #f3f4f6; transition:box-shadow 0.2s, transform 0.2s; position:relative; display:flex; flex-direction:column; }
.pcard:hover { box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.pcard.out-of-stock { opacity:0.7; }

.pcard__badges { position:absolute; top:0.5rem; right:0.5rem; z-index:2; display:flex; flex-direction:column; gap:0.25rem; }
.badge { display:inline-flex; align-items:center; padding:0.15rem 0.5rem; border-radius:9999px; font-size:0.6875rem; font-weight:700; white-space:nowrap; }
.badge-discount { background:#ef4444; color:#fff; }
.badge-new      { background:#3b82f6; color:#fff; }
.badge-best     { background:#f97316; color:#fff; }
.badge-out      { background:#9ca3af; color:#fff; }

.pcard__wish { position:absolute; top:0.5rem; left:0.5rem; z-index:2; width:2rem; height:2rem; background:#fff; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.12); color:#9ca3af; transition:color 0.15s, transform 0.15s; opacity:0; }
.pcard:hover .pcard__wish, .pcard__wish.active { opacity:1; }
.pcard__wish:hover, .pcard__wish.active { color:#e0457b; transform:scale(1.1); }

.pcard__img-wrap { display:block; background:#f9fafb; overflow:hidden; aspect-ratio:1; }
.pcard__img { width:100%; height:100%; object-fit:contain; padding:0.75rem; transition:transform 0.3s; }
.pcard:hover .pcard__img { transform:scale(1.06); }
.pcard__img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#d1d5db; }

.pcard__body { padding:0.75rem; display:flex; flex-direction:column; gap:0.375rem; flex:1; }
.pcard__name { font-size:0.8125rem; font-weight:500; color:#1f2937; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-decoration:none; }
.pcard__name:hover { color:#e0457b; }

.pcard__rating { display:flex; align-items:center; gap:0.25rem; font-size:0.75rem; }
.stars { color:#fbbf24; letter-spacing:0.05em; }
.pcard__rating-count { color:#9ca3af; }

.pcard__price { margin-top:auto; }
.pcard__price-old { font-size:0.75rem; color:#9ca3af; text-decoration:line-through; }
.pcard__price-main { font-size:0.9375rem; font-weight:700; color:#111827; }
.pcard__price-out { font-size:0.875rem; color:#9ca3af; }

.pcard__footer { display:flex; align-items:center; justify-content:space-between; margin-top:0.5rem; }
.btn-add { width:2.25rem; height:2.25rem; background:#e0457b; color:#fff; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s, transform 0.1s; flex-shrink:0; }
.btn-add:hover { background:#c73d6e; }
.btn-add:active { transform:scale(0.92); }
.btn-notify { font-size:0.75rem; color:#6b7280; border:1px solid #e5e7eb; border-radius:0.5rem; padding:0.25rem 0.5rem; background:none; cursor:pointer; font-family:inherit; }
.btn-notify:hover { border-color:#e0457b; color:#e0457b; }

/* List view card */
.cat-grid.list-view .pcard { flex-direction:row; }
.cat-grid.list-view .pcard__img-wrap { width:7rem; height:7rem; aspect-ratio:unset; flex-shrink:0; }
.cat-grid.list-view .pcard__body { padding:0.875rem; }

/* Empty */
.cat-empty { grid-column:1/-1; text-align:center; padding:3rem 1rem; color:#9ca3af; }

/* Pagination */
.cat-pagination { display:flex; justify-content:center; gap:0.375rem; margin-top:1.5rem; flex-wrap:wrap; }
.page-btn { display:flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 0.5rem; border-radius:0.5rem; font-size:0.875rem; text-decoration:none; transition:all 0.15s; border:1px solid #e5e7eb; color:#374151; }
.page-btn:hover { border-color:#e0457b; color:#e0457b; }
.page-btn.active { background:#e0457b; color:#fff; border-color:#e0457b; font-weight:600; }

/* Desktop */
@media (min-width: 768px) {
    .cat-body { grid-template-columns:15rem 1fr; align-items:start; }
    .cat-sidebar { display:block; background:#fff; border:1px solid #e5e7eb; border-radius:0.875rem; padding:1.25rem; position:sticky; top:5rem; }
    .btn-filter-toggle { display:none; }
    .filter-drawer, .filter-overlay { display:none !important; }
    .cat-grid { grid-template-columns:repeat(3,1fr); gap:1rem; }
    .pcard__wish { opacity:0; }
}
@media (min-width: 1024px) {
    .cat-grid { grid-template-columns:repeat(4,1fr); }
    .cat-title { font-size:1.5rem; }
}

/* ===== MOBILE FIXES ===== */
@media (max-width: 767px) {
    .cat-page { padding: 0.5rem 0.75rem 2rem; }

    /* sort bar بهتر */
    .cat-sort-bar { padding: 0.5rem 0; gap: 0.375rem; }
    .sort-opt { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

    /* کارت‌ها در موبایل */
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .pcard__body { padding: 0.5rem; gap: 0.25rem; }
    .pcard__name { font-size: 0.75rem; -webkit-line-clamp: 2; }
    .pcard__price-main { font-size: 0.875rem; }
    .pcard__img-wrap { aspect-ratio: 1; }

    /* breadcrumb موبایل */
    .cat-breadcrumb { font-size: 0.75rem; gap: 0.25rem; }

    /* header موبایل */
    .cat-title { font-size: 1.125rem; }

    /* toolbar */
    .cat-toolbar { gap: 0.375rem; }
    .cat-toolbar-count { font-size: 0.75rem; }
}