/* ============================================
   0. GLOBAL RESET & RESPONSIVE FOUNDATION
   (added — makes every element size predictably
   and stops any horizontal overflow/cut-off)
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   1. TOKENS
   ============================================ */
:root {
    --paper:        #F4EFE2;
    --paper-soft:   #FBF8F1;
    --card:         #FFFFFF;
    --ink:          #2C2018;
    --ink-soft:     #7A6C5D;
    --walnut:       #3D2B1F;
    --amber:        #BE7A3D;
    --amber-deep:   #9C632E;
    --amber-wash:   #F7ECDD;
    --pistachio:    #74815A;
    --pistachio-wash: #EEF1E4;
    --cranberry:    #AE3B3B;
    --cranberry-wash: #FBEAEA;
    --plum:         #6A4C7D;
    --line:         rgba(61, 43, 31, 0.12);
    --shadow-sm:    0 2px 10px rgba(61, 43, 31, 0.07);
    --shadow-md:    0 10px 30px rgba(61, 43, 31, 0.10);
    --shadow-lg:    0 16px 44px rgba(61, 43, 31, 0.16);
    --radius-lg:    22px;
    --radius-md:    14px;
    --radius-sm:    10px;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Inter', -apple-system, sans-serif;

    /* responsive spacing tokens (added) — scale fluidly
       between mobile and desktop with clamp() so we don't
       need a media query for every small nudge */
    --gutter: clamp(16px, 4vw, 40px);
    --section-gap: clamp(20px, 4vw, 34px);
}

/* ============================================
   2. BASE & CONTAINER STYLES
   ============================================ */
.product-list-container {
    padding: 0 0 60px;
    background: var(--paper);
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--ink);
    width: 100%;
    overflow-x: hidden;
}

.product-list-wrapper {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ============================================
   3. DYNAMIC CATEGORY HEADER
   ============================================ */
.dynamic-category-header {
    background: var(--paper-soft);
    border-radius: 0 0 28px 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--section-gap);
    overflow: hidden;
    width: 100%;
}

.category-banner-wrapper {
    width: 100%;
    /* fluid height instead of a fixed 250px so the banner
       never looks oversized on short mobile viewports and
       never gets cropped awkwardly on desktop */
    height: clamp(120px, 32vw, 250px);
    overflow: hidden;
}

.category-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-header-content {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 24px) var(--gutter) clamp(20px, 4vw, 40px);
}

/* Breadcrumbs */
.site-breadcrumbs {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 16px;
    overflow-wrap: break-word;
}

.site-breadcrumbs a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-breadcrumbs a:hover {
    color: var(--amber-deep);
}

.site-breadcrumbs .current-page {
    color: var(--amber-deep);
}

/* Title & Description */
.category-text-area h1 {
    font-family: var(--font-display);
    font-size: clamp(22px, 4.2vw, 36px);
    font-weight: 700;
    color: var(--walnut);
    margin: 0 0 10px 0;
    word-wrap: break-word;
}

.category-text-area .category-description {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 0 30px 0;
}

.read-more {
    color: var(--walnut);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
}

.read-more:hover {
    text-decoration: underline;
}

/* ============================================
   4. CATEGORY SCROLLER
   ============================================ */
.category-scroller-container {
    display: flex;
    align-items: center;
    position: relative;
    gap: clamp(16px, 3vw, 50px);
    padding-left: clamp(16px, 3vw, 30px);
    width: 100%;
}

.category-scroller {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 50px);
    overflow-x: auto;
    overflow-y: visible;
    /* IMPORTANT: setting overflow-x to 'auto' makes the browser
       also clip the y-axis, and the pill images are absolutely
       positioned to pop out above/below the pill on purpose.
       Vertical padding must always be >= half the largest
       (image height - pill height) so nothing gets sliced off. */
    padding: clamp(44px, 9vw, 64px) 16px;
    scroll-behavior: smooth;
    scroll-padding: 0 16px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
    /* momentum scroll on touch devices */
    -webkit-overflow-scrolling: touch;
}

.category-scroller::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.scroll-arrow {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ink);
    padding: 10px;
    z-index: 10;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.scroll-arrow:hover {
    transform: scale(1.2);
    color: var(--amber-deep);
}

/* Category Pill */
.cat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 20px;
    /* fluid padding keeps room for the overlapping image
       at every viewport instead of a single fixed value */
    padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 30px) clamp(10px, 2vw, 12px) clamp(45px, 8vw, 65px);
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: clamp(13px, 2.4vw, 15px);
    min-width: clamp(100px, 20vw, 130px);
    height: clamp(42px, 8vw, 50px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.cat-pill:hover,
.cat-pill.active {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Auto-assign colors to pills */
.cat-pill:nth-child(5n+1) { background-color: #997368; } /* Almond Brown */
.cat-pill:nth-child(5n+2) { background-color: #126A87; } /* Cashew Blue */
.cat-pill:nth-child(5n+3) { background-color: #6C725B; } /* Pista Green */
.cat-pill:nth-child(5n+4) { background-color: #AF8154; } /* Raisin Tan */
.cat-pill:nth-child(5n+5) { background-color: #8C1C45; } /* Walnut Magenta */

/* Overlapping Image */
.cat-pill-img {
    position: absolute;
    left: clamp(-24px, -5vw, -35px);
    top: 50%;
    transform: translateY(-50%);
    /* fluid size so the overlap effect scales with the pill
       instead of a fixed 150px that dwarfs small pills on mobile */
    width: clamp(64px, 13vw, 150px);
    height: clamp(64px, 13vw, 150px);
    z-index: 10;
    filter: drop-shadow(3px 5px 6px rgba(0,0,0,0.3));
    pointer-events: none;
}

.cat-pill-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   5. PAGE HEADER (SORT ONLY - NO DUPLICATES)
   ============================================ */
.page-header {
    position: relative;
    background: var(--paper-soft);
    padding: 16px var(--gutter);
    margin-bottom: var(--section-gap);
    border-radius: 0 0 28px 28px;
    border-bottom: 1px solid var(--line);
    width: 100%;
}

.page-header-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
}

.page-header-right label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-soft);
    white-space: nowrap;
}

.sort-select {
    padding: 12px 40px 12px 18px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    font-weight: 600;
    color: var(--walnut);
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 190px;
    max-width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BE7A3D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    box-shadow: var(--shadow-sm);
}

.sort-select:hover { border-color: var(--amber); }
.sort-select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 4px var(--amber-wash);
}

.page-header-shell {
    height: 16px;
    background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--paper) 9.5px);
    background-size: 20px 16px;
    background-repeat: repeat-x;
    margin-bottom: 20px;
}

/* ============================================
   6. SIDEBAR FILTERS
   ============================================ */
.product-list-grid {
    display: grid;
    grid-template-columns: 272px 1fr;
    gap: 32px;
    align-items: start;
    width: 100%;
}

.filters-sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
    min-width: 0; /* prevents sidebar from forcing horizontal overflow */
}

.filters-card {
    background: var(--card);
    padding: 26px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
}

.filters-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--walnut);
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.filters-title svg {
    flex-shrink: 0;
    color: var(--amber);
}

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

.filter-group:last-of-type {
    margin-bottom: 22px;
}

.filter-label {
    font-weight: 700;
    display: block;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-price-inputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-price-inputs input {
    width: 50%;
    min-width: 0;
    flex: 1 1 100px;
    padding: 11px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-body);
    transition: all 0.25s ease;
    background: var(--paper-soft);
    color: var(--ink);
}

.filter-price-inputs input:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 4px var(--amber-wash);
    background: var(--card);
}

.filter-price-inputs input::placeholder {
    color: #b8ac9c;
}

.filter-select {
    width: 100%;
    padding: 11px 40px 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--paper-soft);
    color: var(--ink);
    transition: all 0.25s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6C5D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.filter-select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 4px var(--amber-wash);
    background: var(--card);
}

.filter-apply-btn {
    width: 100%;
    padding: 14px;
    background: var(--walnut);
    color: var(--paper-soft);
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font-body);
}

.filter-apply-btn:hover {
    background: var(--amber-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.filter-apply-btn:active {
    transform: translateY(0);
}

.filter-clear-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.filter-clear-link:hover {
    color: var(--cranberry);
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--amber-wash);
    color: var(--amber-deep);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(190, 122, 61, 0.25);
    max-width: 100%;
    overflow-wrap: break-word;
}

.active-filter-tag .remove {
    cursor: pointer;
    font-weight: 700;
    color: var(--amber-deep);
    transition: all 0.2s ease;
    line-height: 1;
}

.active-filter-tag .remove:hover {
    color: var(--cranberry);
    transform: scale(1.2);
}

/* ============================================
   7. PRODUCTS AREA
   ============================================ */
.products-area {
    min-height: 400px;
    min-width: 0; /* lets the grid column shrink instead of overflowing */
}

.products-count {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 22px;
    padding: 6px 6px 6px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.products-count .count-number {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--walnut);
    font-size: 20px;
    margin-right: 4px;
}

.view-toggle {
    display: flex;
    gap: 2px;
    background: var(--card);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    flex-shrink: 0;
}

.view-toggle button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle button:hover {
    color: var(--amber-deep);
}

.view-toggle button.active {
    background: var(--walnut);
    color: var(--paper-soft);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 24px;
    width: 100%;
}

/* List View */
.products-grid.list-view {
    grid-template-columns: 1fr;
    gap: 14px;
}

.products-grid.list-view .product-card {
    flex-direction: row;
    align-items: stretch;
}

.products-grid.list-view .product-image-wrapper {
    width: 160px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

.products-grid.list-view .product-info {
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.products-grid.list-view .product-title {
    -webkit-line-clamp: 1;
    min-height: unset;
}

.products-grid.list-view .add-to-cart-btn {
    max-width: 220px;
}

/* ============================================
   8. PRODUCT CARD
   ============================================ */
.product-card {
    background: var(--card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background 0.3s ease;
    z-index: 3;
}

.product-card.accent-premium::before { background: var(--plum); }
.product-card.accent-bestseller::before { background: var(--amber); }
.product-card.accent-sale::before { background: var(--cranberry); }

.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(190, 122, 61, 0.35);
}

.product-image-wrapper {
    position: relative;
    background: var(--paper-soft);
    padding: 18px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.product-card:hover .product-image-wrapper img {
    transform: scale(1.06);
}

.product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
    max-width: calc(100% - 24px);
}

.badge {
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    white-space: nowrap;
    width: fit-content;
}

.badge-premium { background: var(--plum); }
.badge-bestseller { background: var(--amber-deep); }
.badge-sale { background: var(--cranberry); }
.badge-new { background: var(--pistachio); }

.product-info {
    padding: 16px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.product-brand {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    overflow-wrap: break-word;
}

.product-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

.product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-title a:hover {
    color: var(--amber-deep);
}

.product-pricing {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin: 3px 0;
}

.product-price {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--walnut);
}

.product-compare {
    font-size: 13px;
    color: #ada192;
    text-decoration: line-through;
}

.product-discount-badge {
    background: var(--cranberry-wash);
    color: var(--cranberry);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.product-stock {
    font-size: 12px;
    font-weight: 600;
    margin: 1px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-stock::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.product-stock.in-stock { color: var(--pistachio); }
.product-stock.in-stock::before { background: var(--pistachio); }
.product-stock.out-of-stock { color: var(--cranberry); }
.product-stock.out-of-stock::before { background: var(--cranberry); }

.add-to-cart-btn {
    width: 100%;
    padding: 12px;
    background: var(--walnut);
    color: var(--paper-soft);
    border: none;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 8px;
    font-family: var(--font-body);
}

.add-to-cart-btn:hover:not(:disabled) {
    background: var(--amber-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.add-to-cart-btn:disabled {
    background: #d9d0c3;
    color: #948873;
    cursor: not-allowed;
}

.add-to-cart-btn.added {
    background: var(--pistachio);
}

/* ============================================
   9. PAGINATION
   ============================================ */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 46px;
    padding-top: 32px;
    border-top: 1px dashed var(--line);
}

.pagination-wrapper .page-link {
    padding: 11px 18px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.25s ease;
    background: var(--card);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    justify-content: center;
}

.pagination-wrapper .page-link:hover {
    background: var(--amber-wash);
    border-color: var(--amber);
    color: var(--amber-deep);
}

.pagination-wrapper .page-link.active {
    background: var(--walnut);
    color: var(--paper-soft);
    border-color: var(--walnut);
}

.pagination-wrapper .page-link.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pagination-wrapper .page-link.disabled:hover {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

/* ============================================
   10. EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: clamp(48px, 10vw, 90px) 20px;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

.empty-state .empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    color: var(--amber);
}

.empty-state h3 {
    font-family: var(--font-display);
    font-size: clamp(20px, 4vw, 26px);
    color: var(--walnut);
    margin-bottom: 10px;
    font-weight: 600;
}

.empty-state p {
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.empty-state .reset-link {
    display: inline-block;
    padding: 13px 32px;
    background: var(--walnut);
    color: var(--paper-soft);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.25s ease;
}

.empty-state .reset-link:hover {
    background: var(--amber-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   11. SCROLL TO TOP
   ============================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--walnut);
    color: var(--paper-soft);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.25s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
}

.scroll-top-btn.show { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { background: var(--amber-deep); transform: translateY(-4px); }

/* ============================================
   12. RESPONSIVE BREAKPOINTS
   (expanded to cover large desktop, laptop, tablet,
   large phone and small phone tiers, 320px and up)
   ============================================ */

/* ---- Large desktop / wide monitors ---- */
@media (min-width: 1440px) {
    .product-list-wrapper { max-width: 1360px; }
    .category-header-content,
    .page-header-inner { max-width: 1360px; }
}

/* ---- Laptop / small desktop ---- */
@media (max-width: 1200px) {
    .product-list-wrapper { max-width: 100%; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ---- Tablet landscape / narrow laptop ---- */
@media (max-width: 992px) {
    .product-list-grid { grid-template-columns: 1fr; gap: 24px; }
    .filters-sidebar { position: static; }
    .page-header { padding: 28px 24px 22px; }
    .category-scroller-container { padding-left: 20px; }
}

/* ---- Tablet portrait ---- */
@media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
    .category-text-area h1 { font-size: 28px; }
    .page-header-right { flex-direction: column; align-items: stretch; width: 100%; }
    .page-header-inner { justify-content: center; }
    .sort-select { width: 100%; min-width: unset; }
    .products-count { flex-direction: row; }
    .product-price { font-size: 17px; }
    .products-grid.list-view .product-card { flex-direction: column; }
    .products-grid.list-view .product-image-wrapper { width: 100%; aspect-ratio: 1/1; }
    .filters-card { padding: 20px; }
    .scroll-top-btn { bottom: 20px; right: 20px; width: 44px; height: 44px; }
}

/* ---- Large phones ---- */
@media (max-width: 576px) {
    .product-list-wrapper { padding: 0 14px; }
    .category-header-content { padding: 16px 14px 24px; }
    .page-header { padding: 20px 14px; }
    .filters-card { padding: 16px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-title { font-size: 13.5px; }
    .empty-state { padding: 48px 16px; }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-title { font-size: 13px; min-height: 36px; }
    .product-price { font-size: 15px; }
    .add-to-cart-btn { font-size: 12px; padding: 10px; }
    .category-text-area h1 { font-size: 25px; }
    .product-info { padding: 12px 14px 16px; }
    .product-image-wrapper { padding: 12px; }
    .filter-price-inputs { flex-direction: row; }
}

/* ---- Very small / 320px devices ---- */
@media (max-width: 360px) {
    .products-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cat-pill { min-width: 90px; }
    .product-list-wrapper { padding: 0 10px; }
    .page-header { padding: 16px 10px; }
}

/* ============================================
   13. ANIMATIONS
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .product-card { animation: fadeInUp 0.4s ease forwards; opacity: 0; }
    .product-card:nth-child(1) { animation-delay: 0.03s; }
    .product-card:nth-child(2) { animation-delay: 0.06s; }
    .product-card:nth-child(3) { animation-delay: 0.09s; }
    .product-card:nth-child(4) { animation-delay: 0.12s; }
    .product-card:nth-child(5) { animation-delay: 0.15s; }
    .product-card:nth-child(6) { animation-delay: 0.18s; }
    .product-card:nth-child(7) { animation-delay: 0.21s; }
    .product-card:nth-child(8) { animation-delay: 0.24s; }
}

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }