/* ═══════════════════════════════════════════════════════════════════════════
   CATALOG.CSS  —  Catalog page styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav active state ─────────────────────────────────────────────────────── */

.nav-link--active {
    color: #363636 !important;
}

.nav-link--active::after {
    width: 100% !important;
}

/* ── Search hero ──────────────────────────────────────────────────────────── */

.cat-hero {
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 52px 0 44px;
    text-align: center;
}

.cat-hero-title {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 40px;
    color: #363636;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.cat-hero-sub {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 15px;
    color: #aaa;
    margin-bottom: 32px;
}

.cat-search-outer {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.cat-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 6px 6px 6px 18px;
    gap: 10px;
    transition: border-color 0.22s, box-shadow 0.22s;
}

.cat-search-box:focus-within {
    border-color: #FFBC00;
    box-shadow: 0 0 0 4px rgba(255,188,0,0.12);
}

.cat-search-icon {
    flex-shrink: 0;
    stroke: #bbb;
    transition: stroke 0.22s;
}

.cat-search-box:focus-within .cat-search-icon {
    stroke: #FFBC00;
}

.cat-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 15px;
    color: #363636;
    background: transparent;
    min-width: 0;
}

.cat-search-input::placeholder {
    color: #bbb;
}

.cat-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #bbb;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.cat-search-clear:hover {
    background: #f0f0f0;
    color: #555;
}

.cat-search-btn {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 11px;
    background: #363636;
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.22s, transform 0.18s;
}

.cat-search-btn:hover {
    background: #FFBC00;
    color: #000;
    transform: translateY(-1px);
}

/* ── Search suggestions dropdown ──────────────────────────────────────────── */

.cat-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.sug-section-label {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #bbb;
    padding: 12px 16px 6px;
}

.sug-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.sug-item:hover {
    background: #fafafa;
}

.sug-item-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f0f0f0;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sug-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sug-item-no-img {
    color: #ccc;
}

.sug-item-info {
    flex: 1;
    min-width: 0;
}

.sug-item-name {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #363636;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sug-item-meta {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
}

.sug-item-price {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 13px;
    color: #363636;
    white-space: nowrap;
    flex-shrink: 0;
}

.sug-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.sug-cat-item:hover {
    background: #fafafa;
}

.sug-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,188,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sug-cat-label {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #363636;
}

.sug-cat-hint {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 12px;
    color: #FFBC00;
    margin-left: auto;
    flex-shrink: 0;
}

.sug-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}

.sug-empty {
    padding: 20px 16px;
    text-align: center;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #bbb;
}

/* ── Page body layout ─────────────────────────────────────────────────────── */

.cat-page-body {
    padding: 40px 0 80px;
    min-height: 60vh;
}

.cat-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

/* Overview mode — full-width content, no sidebar */
.cat-layout--overview {
    grid-template-columns: 1fr;
}

/* ── Breadcrumb row (back button in product view) ─────────────────────────── */

.cat-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
    white-space: nowrap;
}

.cat-back-btn:hover {
    color: #363636;
}

.cat-back-btn svg {
    flex-shrink: 0;
}

.cat-breadcrumb-sep {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #ddd;
}

.cat-breadcrumb-cur {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 20px;
    color: #363636;
}

/* ── Category overview tiles ──────────────────────────────────────────────── */

.cat-overview {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cat-overview-group {}

.cat-overview-group-title {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.cat-overview-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px 20px;
    border-radius: 16px;
    background: #f7f7f7;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
    text-decoration: none;
}

.cat-tile:hover {
    background: #fff;
    border-color: #FFBC00;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.cat-tile-icon {
    font-size: 32px;
    line-height: 1;
    display: block;
    /* Prevent color emoji filters on some OSes */
    font-style: normal;
}

.cat-tile-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255,188,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    transition: background 0.22s;
}

.cat-tile:hover .cat-tile-icon-wrap {
    background: rgba(255,188,0,0.18);
}

.cat-tile-name {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #363636;
    line-height: 1.35;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.cat-sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-sidebar-box {
    background: #fff;
    border: 1.5px solid #eeeeee;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}

.cat-sidebar-title {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

/* ── Category list ────────────────────────────────────────────────────────── */

.cat-cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-cat-list .cat-group-label {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ccc;
    padding: 10px 8px 4px;
    cursor: default;
}

.cat-cat-list li a,
.cat-cat-list li button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    text-align: left;
}

.cat-cat-list li a:hover,
.cat-cat-list li button:hover {
    background: #f5f5f5;
    color: #363636;
}

.cat-cat-list li.active a,
.cat-cat-list li.active button {
    background: rgba(255,188,0,0.12);
    color: #363636;
    font-family: 'CenturyGothicBold', sans-serif;
}

.cat-cat-badge {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 11px;
    color: #bbb;
    background: #f0f0f0;
    border-radius: 20px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cat-cat-list li.active .cat-cat-badge {
    background: rgba(255,188,0,0.2);
    color: #a07700;
}

/* ── Filters ──────────────────────────────────────────────────────────────── */

.cat-filter-group {
    margin-bottom: 20px;
}

.cat-filter-group:last-child {
    margin-bottom: 0;
}

.cat-filter-label {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cat-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
}

.cat-radio-label input[type="radio"] {
    accent-color: #FFBC00;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.cat-radio-label span {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #555;
}

.cat-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cat-price-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 7px 10px;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #363636;
    outline: none;
    transition: border-color 0.2s;
}

.cat-price-input:focus {
    border-color: #FFBC00;
}

.cat-price-input::-webkit-inner-spin-button,
.cat-price-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cat-price-sep {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #ccc;
    flex-shrink: 0;
}

.cat-price-apply {
    width: 100%;
    padding: 9px;
    border-radius: 10px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cat-price-apply:hover {
    background: #363636;
    border-color: #363636;
    color: #fff;
}

/* ── Content area ─────────────────────────────────────────────────────────── */

.cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.cat-breadcrumb {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 20px;
    color: #363636;
}

.cat-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cat-count {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #bbb;
    white-space: nowrap;
}

.cat-sort-select {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #555;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 7px 30px 7px 12px;
    background: #fff;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
}

.cat-sort-select:focus {
    border-color: #FFBC00;
}

/* ── Product grid ─────────────────────────────────────────────────────────── */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ── Product card ─────────────────────────────────────────────────────────── */

.cat-card {
    border-radius: 16px;
    overflow: hidden;
    background: #f7f7f7;
    transition: transform 0.28s cubic-bezier(.25,.8,.25,1), box-shadow 0.28s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0,0,0,0.1);
}

.cat-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ececec;
    flex-shrink: 0;
}

.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.42s ease;
    display: block;
}

.cat-card:hover .cat-card-img img {
    transform: scale(1.05);
}

.cat-card-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ccc;
}

.cat-card-no-photo span {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 11px;
}

.cat-card-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.cat-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-card-name {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #555;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.cat-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}

.cat-card-price {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 17px;
    color: #363636;
    white-space: nowrap;
    flex-shrink: 0;
}

.cat-card-price-na {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #bbb;
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */

/* Cat-card: show buy button on hover */
/* buy button always visible in catalog cards */
.cat-card .hot-card-buy { position: static; width: 100%; margin-top: 10px; backdrop-filter: none; }

.cat-card-body { position: relative; padding-bottom: 4px; }

.cat-skeleton {
    height: 260px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
    background-size: 300% 100%;
    animation: skeleton-shine 1.6s infinite ease-in-out;
    cursor: default;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.cat-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}

.cat-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.cat-empty-title {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 18px;
    color: #363636;
    margin-bottom: 8px;
}

.cat-empty-sub {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #bbb;
}

/* ── Load more button ─────────────────────────────────────────────────────── */

.cat-load-more-wrap {
    text-align: center;
    margin-top: 36px;
}

.cat-load-more {
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 14px;
    padding: 13px 44px;
    border-radius: 13px;
    border: 2px solid #363636;
    background: transparent;
    color: #363636;
    cursor: pointer;
    transition: background 0.22s, color 0.22s, transform 0.18s;
}

.cat-load-more:hover {
    background: #363636;
    color: #fff;
    transform: translateY(-2px);
}

/* Product modal styles come from css/index.css (linked first in catalog.html) */

/* ── Characteristic filter boxes ─────────────────────────────────────────── */

.cat-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 10px 20px;
    margin: 0;
    border-top: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.cat-filter-header:hover {
    background: #fafafa;
}

.cat-filter-header .cat-sidebar-title {
    margin-bottom: 0;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #555;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.2s;
}

.cat-filter-header:hover .cat-sidebar-title {
    color: #363636;
}

.cat-filter-chevron {
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.cat-filter-header.is-collapsed .cat-filter-chevron {
    transform: rotate(-90deg);
}

/* Static filter headers — no top border (they're the first items in their box) */
.cat-filter-header--static {
    border-top: none;
}

/* Static filter headers (Наличие, Цена) use bold title on desktop */
@media (min-width: 769px) {
    .cat-filter-header--static .cat-sidebar-title {
        font-family: 'CenturyGothicBold', sans-serif;
        font-size: 12px;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Give the static filter body content proper padding */
    #avail-body,
    #price-body {
        padding: 0 16px 14px;
    }
}

/* Char filter boxes — no extra border-radius, tight fit */
.cat-char-filter-box {
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 0 !important;
}

/* First char filter box gets no top border (already has one from the button) */
.cat-char-filter-box:first-child {
    border-top: none !important;
}

.cat-char-options {
    padding: 0 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 0.2s;
}

/* Checkbox option */
.cat-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    cursor: pointer;
    line-height: 1.3;
}

.cat-checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #FFBC00;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
}

.cat-checkbox-label span {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #555;
    transition: color 0.15s;
}

.cat-checkbox-label:hover span {
    color: #363636;
}

.cat-checkbox-label:has(input:checked) span {
    color: #363636;
    font-family: 'CenturyGothicBold', sans-serif;
}

/* Range hint ("от X до Y") */
.cat-range-hint {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 11px;
    color: #bbb;
    margin-bottom: 6px;
}

/* Remove number input spinners for range fields */
.cat-char-range-min::-webkit-inner-spin-button,
.cat-char-range-min::-webkit-outer-spin-button,
.cat-char-range-max::-webkit-inner-spin-button,
.cat-char-range-max::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Search input — suppress browser autofill/password UI */
.cat-search-input::-webkit-search-cancel-button,
.cat-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* ── Desktop: static filters always open ─────────────────────────────────── */

@media (min-width: 769px) {
    /* Force Наличие, Цена and Тип (cooling) body always visible on desktop */
    #avail-body,
    #price-body,
    #cooling-subtype-body {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }

    /* Hide chevron and disable pointer on static headers (desktop) */
    .cat-filter-header--static .cat-filter-chevron {
        display: none;
    }

    .cat-filter-header--static {
        cursor: default;
        pointer-events: none;
        margin-bottom: 10px;
    }
}

/* ── Extra characteristic filters toggle button ───────────────────────────── */

.cat-extra-filters-btn {
    display: none; /* shown via JS after char filters build */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 20px;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    cursor: pointer;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 13px;
    color: #555;
    gap: 8px;
    transition: background 0.2s, color 0.2s;
}

.cat-extra-filters-btn:hover {
    background: #f0f0f0;
    color: #363636;
}

#extra-filters-label {
    flex: 1;
    text-align: left;
}

.cat-extra-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    stroke: #aaa;
}

/* ── Char filters wrap: hidden until opened ───────────────────────────────── */

.cat-char-filters-wrap {
    display: none;
    flex-direction: column;
}

.cat-char-filters-wrap.is-open {
    display: flex;
}

/* On mobile: always show char filters (no "extra" button) */
@media (max-width: 768px) {
    .cat-extra-filters-btn {
        display: none !important;
    }

    .cat-char-filters-wrap {
        display: flex;
        flex-direction: column;
    }
}

/* ── Mobile filter button (toolbar) ──────────────────────────────────────── */

.mob-filter-btn {
    display: none; /* shown only on mobile via media query */
    align-items: center;
    gap: 7px;
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 14px;
    padding: 9px 18px;
    border-radius: 11px;
    border: 1.5px solid #363636;
    background: #fff;
    color: #363636;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.mob-filter-btn:hover {
    background: #363636;
    color: #fff;
}

.mob-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50px;
    background: #FFBC00;
    color: #363636;
    font-family: 'CenturyGothicBold', sans-serif;
    font-size: 11px;
    line-height: 1;
}

/* ── Mobile sidebar drawer ────────────────────────────────────────────────── */

.mob-sidebar-header {
    display: none; /* shown only on mobile */
}

.mob-filter-footer {
    display: none; /* shown only on mobile */
}

/* ── Mobile filter overlay backdrop ──────────────────────────────────────── */

.mob-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 850;
    transition: background 0.35s ease;
}

.mob-filter-overlay.mob-open {
    display: block;
    background: rgba(0, 0, 0, 0.45);
}

/* ── Active filter indicator ──────────────────────────────────────────────── */

.cat-filter-active-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cat-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'CenturyGothic', sans-serif;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,188,0,0.12);
    color: #a07700;
    cursor: pointer;
    transition: background 0.2s;
}

.cat-filter-tag:hover {
    background: rgba(255,188,0,0.25);
}

/* ── Search results heading ───────────────────────────────────────────────── */

.cat-search-heading {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 14px;
    color: #888;
    margin-bottom: 6px;
}

.cat-search-heading strong {
    color: #363636;
    font-family: 'CenturyGothicBold', sans-serif;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cat-layout {
        grid-template-columns: 220px 1fr;
        gap: 24px;
    }

    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cat-hero {
        padding: 36px 0 28px;
    }

    .cat-hero-title {
        font-size: 28px;
    }

    .cat-layout {
        grid-template-columns: 1fr;
    }

    /* ── Mobile filter drawer ─────────────────────────────────────────────── */

    .mob-filter-btn {
        display: flex;
    }

    /* Sidebar becomes a slide-in left drawer on mobile */
    .cat-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100%;
        width: min(88vw, 360px);
        z-index: 900;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        box-shadow: 6px 0 40px rgba(0,0,0,0.16);
        transform: translateX(-110%);
        transition: transform 0.36s cubic-bezier(.25,.8,.25,1);
        border-radius: 0 20px 20px 0;
        flex-direction: column;
        gap: 0;
        padding: 0;
        padding-bottom: 90px; /* space for sticky footer */
    }

    .cat-sidebar.mob-open {
        transform: translateX(0) !important;
    }

    .cat-sidebar-box {
        border: none;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
        padding: 0;
    }

    /* Mobile drawer header */
    .mob-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 16px;
        border-bottom: 1.5px solid #f0f0f0;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
        gap: 12px;
    }

    .mob-sidebar-title {
        font-family: 'CenturyGothicBold', sans-serif;
        font-size: 18px;
        color: #363636;
        flex: 1;
    }

    .mob-sidebar-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mob-reset-all {
        font-family: 'CenturyGothic', sans-serif;
        font-size: 13px;
        color: #aaa;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        white-space: nowrap;
        transition: color 0.2s;
    }

    .mob-reset-all:hover {
        color: #363636;
    }

    .mob-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #f5f5f5;
        border: none;
        cursor: pointer;
        color: #555;
        flex-shrink: 0;
        transition: background 0.2s, color 0.2s;
    }

    .mob-sidebar-close:hover {
        background: #363636;
        color: #fff;
    }

    /* Make filter headers look like DNS list items on mobile */
    .cat-filter-header {
        padding: 16px 20px;
        margin-bottom: 0;
        border-radius: 0;
    }

    .cat-filter-header .cat-sidebar-title {
        font-family: 'CenturyGothic', sans-serif;
        font-size: 15px;
        color: #363636;
        text-transform: none;
        letter-spacing: 0;
    }

    .cat-filter-header.is-collapsed .cat-sidebar-title {
        color: #555;
    }

    .cat-char-options {
        padding: 0 20px 16px;
    }

    /* Mobile drawer footer with apply button — sticks to bottom inside the drawer */
    .mob-filter-footer {
        display: flex;
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 14px 20px;
        background: #fff;
        border-top: 1px solid #f0f0f0;
        z-index: 10;
        margin-top: auto;
    }

    .mob-filter-apply-btn {
        width: 100%;
        padding: 14px;
        border-radius: 13px;
        border: none;
        background: #363636;
        color: #fff;
        font-family: 'CenturyGothicBold', sans-serif;
        font-size: 15px;
        cursor: pointer;
        transition: background 0.22s, transform 0.18s;
    }

    .mob-filter-apply-btn:hover {
        background: #FFBC00;
        color: #000;
    }

    .mob-filter-apply-btn:active {
        transform: scale(0.98);
    }

    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pv-content {
        grid-template-columns: 1fr;
    }

    .pv-gallery {
        border-radius: 24px 24px 0 0;
    }
}

@media (max-width: 480px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cat-search-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .cat-card-name {
        font-size: 12px;
    }

    .cat-card-price {
        font-size: 15px;
    }
}