/**
 * File: assets/css/conditional/wc-archive-filters.css
 * Description: Filter sidebar + product grid styles (responsive, sticky, off-canvas).
 *
 * @package Cheetah
 */

/* ==========================================================================
   Shop Archive Layout
   ========================================================================== */

/*
 * Shop archive main wrapper.
 *
 * The shop template does not render a `<main class="cheetah-main">` element
 * — it uses this `.cheetah-shop-wrap` div as the outer page wrapper instead
 * (see woocommerce/archive-product.php). The vertical padding here is
 * therefore the shop's counterpart to the shared `.cheetah-main` padding
 * declared in assets/css/core/layout.css, and the two values MUST stay in
 * sync so every page in the theme has the same top and bottom rhythm.
 *
 *   padding-top    — small; the shop has no page title above the toolbar,
 *                    so this is the entire gap between the sticky header
 *                    and the first shop control (filter toggle on mobile,
 *                    toolbar on desktop).
 *   padding-bottom — generous; the same 4rem gap before the footer that
 *                    every other page gets via `.cheetah-main`.
 */
.cheetah-shop-wrap {
    padding-top: var(--cheetah-space-md, 1rem);
    padding-bottom: var(--cheetah-space-3xl, 4rem);
}

.cheetah-shop-header {
    margin-bottom: var(--cheetah-space-xl, 2rem);
    padding-bottom: var(--cheetah-space-lg, 1.5rem);
    border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
}

.cheetah-shop-title {
    margin: 0 0 var(--cheetah-space-sm, 0.5rem);
    font-size: var(--font-size-h1, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--cheetah-heading, #0f172a);
}

/* --------------------------------------------------------------------------
   Layout Grid — Sidebar + Main
   -------------------------------------------------------------------------- */
.cheetah-shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--cheetah-space-xl, 2rem);
    align-items: start;
}

/* --------------------------------------------------------------------------
   Mobile Filter Toggle
   -------------------------------------------------------------------------- */
.cheetah-filter-toggle--mobile {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: var(--cheetah-space-md, 1rem);
    padding: 0.625rem 1rem;
    font-family: inherit;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--cheetah-text, #1e293b);
    background: var(--cheetah-bg, #ffffff);
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: var(--cheetah-radius, 8px);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cheetah-filter-toggle--mobile:hover {
    background: var(--cheetah-bg-alt, #f8fafc);
    border-color: var(--cheetah-primary, #2563eb);
}

/* --------------------------------------------------------------------------
   Filter Sidebar
   -------------------------------------------------------------------------- */
.cheetah-filter-sidebar {
    position: sticky;
    top: calc(var(--cheetah-header-height, 82px) + var(--cheetah-space-lg, 1.5rem));
    height: fit-content;
}

.cheetah-filter-sidebar__inner {
    background: var(--cheetah-bg, #ffffff);
    border-radius: var(--cheetah-radius-lg, 12px);
    border: 1px solid var(--cheetah-border, #e2e8f0);
    padding: 1.5rem;
}

.cheetah-filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 0.75rem;
}

.cheetah-filter-sidebar__title {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: -0.01em;
    color: var(--cheetah-heading, #0f172a);
    margin: 0;
}

.cheetah-filter-sidebar__clear {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--cheetah-text-muted, #64748b);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
    font-family: inherit;
    font-weight: var(--font-weight-medium, 500);
}

.cheetah-filter-sidebar__clear:hover {
    color: var(--cheetah-primary, #2563eb);
    text-decoration: underline;
}

.cheetah-filter-sidebar__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cheetah-text-muted, #64748b);
    border-radius: var(--cheetah-radius-sm, 4px);
    transition: background-color 0.2s ease;
}

.cheetah-filter-sidebar__close:hover {
    background: var(--cheetah-bg-alt, #f8fafc);
    color: var(--cheetah-heading, #0f172a);
}

.cheetah-filter-sidebar__body {
    display: flex;
    flex-direction: column;
}

.cheetah-filter-sidebar__footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cheetah-border-light, #f1f5f9);
}

/* --------------------------------------------------------------------------
   Filter Groups (Accordion)
   -------------------------------------------------------------------------- */
.cheetah-filter__group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cheetah-border-light, #f1f5f9);
}

.cheetah-filter__group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cheetah-filter__group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cheetah-text-muted, #64748b);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--cheetah-radius-sm, 4px);
    transition: background-color 0.2s ease;
}

.cheetah-filter__group-title:hover {
    background-color: var(--cheetah-bg-alt, #f8fafc);
}

.cheetah-filter__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    color: var(--cheetah-text-muted, #64748b);
    transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
    pointer-events: none; /* ensures clicks pass to the parent button */
}

.cheetah-filter__group-title:hover .cheetah-filter__group-icon {
    background: var(--cheetah-bg-alt, #f8fafc);
    color: var(--cheetah-primary, #2563eb);
}

.cheetah-filter__group-title[aria-expanded="false"] .cheetah-filter__group-icon {
    transform: rotate(-90deg);
}

.cheetah-filter__group-title[aria-expanded="true"] .cheetah-filter__group-icon {
    transform: rotate(0deg);
}

.cheetah-filter__group-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 600px;
    opacity: 1;
    margin-top: 0.875rem;
}

.cheetah-filter__group-title[aria-expanded="false"] + .cheetah-filter__group-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Checkbox List
   -------------------------------------------------------------------------- */
.cheetah-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cheetah-filter__label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--cheetah-text, #1e293b);
    user-select: none;
    line-height: 1.4;
}

.cheetah-filter__input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #cfcbc4;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin: 0;
    background: #ffffff;
}

.cheetah-filter__input[type="checkbox"]:checked {
    background: var(--cheetah-primary, #2563eb);
    border-color: var(--cheetah-primary, #2563eb);
}

.cheetah-filter__input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cheetah-filter__label:hover .cheetah-filter__input[type="checkbox"] {
    border-color: var(--cheetah-primary, #2563eb);
}

.cheetah-filter__text {
    flex: 1;
}

.cheetah-filter__count {
    margin-left: auto;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--cheetah-text-muted, #64748b);
}

/* --------------------------------------------------------------------------
   Price Filter – Enhanced: labels and inputs side‑by‑side with refined hierarchy
   -------------------------------------------------------------------------- */
.cheetah-filter__price-inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}

/* Each price boundary (From / To) becomes a flex row: label + input wrapper */
.cheetah-filter__price-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Label is smaller than the price value, with a slight left indent for elegance */
.cheetah-filter__price-label {
    flex-shrink: 0;
    margin: 0;
    padding-left: 0.25rem;   /* subtle indent from container edge */
    font-size: 0.6875rem;    /* smaller than the input text (0.875rem) */
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cheetah-text-muted, #64748b);
    min-width: 3rem;         /* keeps both labels vertically aligned */
}

/* Container for currency + input + spinner – takes remaining space */
.cheetah-price-input-wrapper {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
    position: relative;
}

.cheetah-filter__price-currency {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    line-height: 1;
    color: var(--cheetah-text-muted, #64748b);
    pointer-events: none;
}

.cheetah-filter__price-input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.625rem 0.5rem 1.75rem;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: var(--cheetah-radius, 8px) 0 0 var(--cheetah-radius, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    background: var(--cheetah-bg, #ffffff);
    color: var(--cheetah-text, #1e293b);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    line-height: 1.5;
    /* Hide native spin buttons */
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.cheetah-filter__price-input::placeholder {
    color: var(--cheetah-text-muted, #94a3b8);
    opacity: 0.7;
}

.cheetah-filter__price-input:focus {
    border-color: var(--cheetah-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    z-index: 1;
}

/* Custom spinner buttons – seamlessly integrated */
.cheetah-price-spinner {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-left: 0;
    border-radius: 0 var(--cheetah-radius, 8px) var(--cheetah-radius, 8px) 0;
    overflow: hidden;
    flex: 0 0 28px;
    width: 28px;
    height: 44px;
    background: var(--cheetah-bg, #ffffff);
}

.cheetah-price-spinner button {
    background: transparent;
    border: none;
    width: 28px;
    height: 50%; /* exactly half of the container */
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--cheetah-text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
    flex: 1;
}

.cheetah-price-spinner button:first-child {
    border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
}

.cheetah-price-spinner button:hover {
    background: var(--cheetah-primary, #2563eb);
    color: #ffffff;
}

.cheetah-price-spinner button:active {
    background: var(--cheetah-primary-hover, #1d4ed8);
}

/* Retained for compatibility with older/custom filter markup that still
   outputs a standalone separator. The new two-row layout does not need it. */
.cheetah-filter__price-sep {
    display: none;
}

.cheetah-filter__price-unit {
    margin-left: 0.5rem;
    align-self: center;
    flex-shrink: 0;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--cheetah-text-muted, #64748b);
}

/* Dual-handle range slider */
.cheetah-price-slider {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 0.5rem;
}

.cheetah-price-slider__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cheetah-border, #e2e8f0);
    border-radius: 2px;
    transform: translateY(-50%);
}

.cheetah-price-slider__range {
    position: absolute;
    top: 50%;
    height: 4px;
    background: var(--cheetah-primary, #2563eb);
    border-radius: 2px;
    transform: translateY(-50%);
}

.cheetah-price-slider__input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: none;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.cheetah-price-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--cheetah-primary, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
    border: 2px solid #ffffff;
}

.cheetah-price-slider__input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.cheetah-price-slider__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--cheetah-primary, #2563eb);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cheetah-filter__price-apply-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
}

.cheetah-filter__price-apply-wrap .cheetah-price-apply {
    margin: 0;
}

/* Fine‑tuning for very small screens */
@media (max-width: 480px) {
    .cheetah-filter__price-input {
        font-size: 0.8125rem;
        padding-left: 1.625rem;
    }

    .cheetah-filter__price-currency {
        left: 0.625rem;
    }
}

/* --------------------------------------------------------------------------
   Active Filters
   --------------------------------------------------------------------------
   Layout: primary group (label + chips) on the left, "Clear all" pinned right.

   Vertical rhythm — why 1rem below, not 1.5rem
   --------------------------------------------
   The active-filters bar is a self-contained card (background, border,
   10px radius) that summarises the filters currently applied to the grid
   below it. The card chrome is what separates it from the product grid —
   not empty space.

   The previous rule applied a 1.5rem bottom margin, which was chosen
   when the bar was a plain row with no card treatment. With the card
   treatment in place, that margin stacked on top of the card's own
   visual weight and produced an oversized empty band between the chips
   and the first product row. 1rem restores the correct balance:

     • Above the bar — 0.5rem (from the shop toolbar's own margin).
       The toolbar and the bar read as one tight "controls" cluster.

     • Below the bar — 1rem. Enough to let the card breathe, tight
       enough that it reads as belonging to the grid beneath it. The
       grid's own 1.5rem column/row gap then provides the internal
       rhythm inside the products container itself.

   The card treatment (border + background + radius) is deliberately
   kept on the bar so the reduced spacing does not make it feel
   unfinished. Empty space is no longer what defines the card — its
   visual surface does.
   -------------------------------------------------------------------------- */
.cheetah-active-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cheetah-space-md, 1rem);
    flex-wrap: wrap;
    margin: 0 0 var(--cheetah-space-md, 1rem);
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 10px;
}

.cheetah-active-filters[hidden] {
    display: none !important;
}

.cheetah-active-filters__primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.cheetah-active-filters__label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cheetah-text-muted, #64748b);
    line-height: 1.4;
}

.cheetah-active-filters__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.cheetah-active-filters__item {
    margin: 0;
    padding: 0;
}

.cheetah-active-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.3125rem 0.625rem 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: #ffffff;
    background: var(--cheetah-primary, #2563eb);
    border: 1px solid transparent;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.cheetah-active-filters__chip:hover {
    background: var(--cheetah-primary-hover, #1d4ed8);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.cheetah-active-filters__chip:focus-visible {
    outline: 2px solid var(--cheetah-primary, #2563eb);
    outline-offset: 2px;
}

.cheetah-active-filters__chip--no-remove {
    padding-right: 0.75rem;
    cursor: default;
}

.cheetah-active-filters__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cheetah-active-filters__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 0.125rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background-color 0.15s ease;
}

.cheetah-active-filters__chip:hover .cheetah-active-filters__remove {
    background: rgba(255, 255, 255, 0.28);
}

.cheetah-active-filters__clear-all {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cheetah-text-muted, #64748b);
    background: #ffffff;
    border: 1px solid var(--cheetah-border, #e2e8f0);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.cheetah-active-filters__clear-all:hover,
.cheetah-active-filters__clear-all:focus {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
    text-decoration: none;
}

.cheetah-active-filters__clear-all:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Product Grid
   The grid lives on .cheetah-products itself.
   Both the normal archive template and the AJAX response output
   direct <li class="cheetah-product-loop-item"> children.
   -------------------------------------------------------------------------- */
.cheetah-products {
    display: grid;
    grid-template-columns: repeat(var(--cheetah-archive-cols, 3), 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0 0 var(--cheetah-space-xl, 2rem);
    padding: 0;
}

.cheetah-products::before,
.cheetah-products::after {
    display: none;
}

.cheetah-products > .cheetah-product-loop-item,
.cheetah-products > li.product {
    width: 100%;
    float: none;
    margin: 0;
    clear: none;
    list-style: none;
}

/* Column variants (controlled by the outer class) */
.cheetah-products--cols-2 { --cheetah-archive-cols: 2; }
.cheetah-products--cols-3 { --cheetah-archive-cols: 3; }
.cheetah-products--cols-4 { --cheetah-archive-cols: 4; }
.cheetah-products--cols-5 { --cheetah-archive-cols: 5; }

/* Notices, pagination and empty state that land inside the grid must span full width */
.cheetah-products > .woocommerce-notices-wrapper,
.cheetah-products > .woocommerce-pagination,
.cheetah-products > .cheetah-products-empty {
    grid-column: 1 / -1;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Skeleton / Loading State
   -------------------------------------------------------------------------- */
.cheetah-products.is-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
    min-height: 300px;
}

.cheetah-products.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--cheetah-border, #e2e8f0);
    border-top-color: var(--cheetah-primary, #2563eb);
    border-radius: 50%;
    animation: cheetah-spin 0.8s linear infinite;
}

@keyframes cheetah-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.cheetah-products-empty {
    text-align: center;
    padding: var(--cheetah-space-3xl, 4rem) var(--cheetah-space-lg, 1.5rem);
}

.cheetah-products-empty__message {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--cheetah-text-muted, #64748b);
    margin-bottom: var(--cheetah-space-md, 1rem);
}

.cheetah-products-empty__clear {
    margin-top: var(--cheetah-space-sm, 0.5rem);
}

/* --------------------------------------------------------------------------
   Overlay (Mobile Drawer Backdrop)
   -------------------------------------------------------------------------- */
.cheetah-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--cheetah-z-drawer, 300) - 1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cheetah-filter-overlay.is-active {
    display: block;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .cheetah-shop-layout {
        grid-template-columns: 220px 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .cheetah-shop-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cheetah-filter-toggle--mobile {
        display: flex;
    }

    .cheetah-filter-sidebar {
        position: static;
    }

    /*
     * The drawer begins where the fixed header ends and runs to the bottom
     * of the viewport. Using top + bottom (instead of top: 0 + bottom: 0)
     * makes it impossible for the header to overlap any part of the panel,
     * and it automatically accounts for the admin bar via
     * --cheetah-header-offset.
     */
    .cheetah-filter-sidebar__inner {
        position: fixed;
        top: var(--cheetah-header-offset, 82px);
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: var(--cheetah-z-drawer, 300);
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
        overflow-y: auto;
        padding-top: 1.25rem;
    }

    .cheetah-filter-sidebar.is-open .cheetah-filter-sidebar__inner {
        transform: translateX(0);
    }

    .cheetah-filter-sidebar__header {
        position: sticky;
        top: 0;
        background: var(--cheetah-bg, #ffffff);
        padding-bottom: 1rem;
        z-index: 1;
        margin-bottom: 1rem;
    }

    .cheetah-filter-sidebar__close {
        display: flex;
    }

    .cheetah-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .cheetah-active-filters {
        padding: 0.625rem 0.75rem;
        gap: 0.75rem;
    }

    .cheetah-active-filters__clear-all {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cheetah-products {
        grid-template-columns: 1fr;
    }

    .cheetah-shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    .cheetah-filter-sidebar,
    .cheetah-filter-toggle--mobile,
    .cheetah-active-filters {
        display: none !important;
    }

    .cheetah-shop-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   FIX: Force white text on active filter chips and remove icons
   ========================================================================== */
.cheetah-active-filters__text,
.cheetah-active-filters__text:hover,
.cheetah-active-filters__text:visited,
.cheetah-active-filters__text:active,
.cheetah-active-filters__remove,
.cheetah-active-filters__remove:hover,
.cheetah-active-filters__remove:visited,
.cheetah-active-filters__remove:active {
    color: #ffffff !important;
}