:root {
    --heading-font: "Josefin Sans", sans-serif;
    --body-font: "Jost", sans-serif;
    --color-white: #fff;
    --color-black: #000;
    --color-primary: #1a1a1a;
    --color-secondary: #333;
    --color-text-muted: #8a8a8a;
    --color-text-light: #666;
    --color-border: #e8e8e8;
    --color-border-light: #f0f0f0;
    --color-bg-light: #f8f7f5;
    --color-bg-cream: #faf9f7;
    --color-accent: #b84646;
    --color-accent-hover: #9a3a3a;
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--body-font);
    color: var(--color-primary);
    background: var(--color-bg-cream);
    line-height: 1.6;
    min-height: 100vh;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--heading-font); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #bbb; }

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ── Views ── */
#categoryView, #subcategoryView { display: none; }
#categoryView.active, #subcategoryView.active { display: block; }

/* ── Product Card ── */
.product-card-wrap { transition: transform .3s ease, box-shadow .3s ease; }
.product-card-wrap:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.1); }
.product-card-wrap img { transition: transform .5s ease; }
.product-card-wrap:hover img { transform: scale(1.05); }

/* ── View-all link ── */
.view-all-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-text-light); font-size: 14px; font-weight: 500;
    transition: color .2s ease; text-decoration: none;
}
.view-all-link:hover { color: var(--color-primary); }
.view-all-link::after {
    content:''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 1px; background: var(--color-primary); transition: width .3s ease;
}
.view-all-link:hover::after { width: 100%; }

/* ── Custom checkbox ── */
.filter-checkbox {
    appearance: none; width: 18px; height: 18px;
    border: 1.5px solid #ddd; border-radius: 4px; cursor: pointer;
    transition: all .2s ease; position: relative; flex-shrink: 0;
}
.filter-checkbox:checked { background: var(--color-primary); border-color: var(--color-primary); }
.filter-checkbox:checked::after {
    content: '✓'; position: absolute; color: #fff;
    font-size: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%);
}

/* ── Dual-handle price slider ── */
.price-slider-wrap {
    position: relative; height: 36px; display: flex; align-items: center;
}
.price-slider-track {
    position: absolute; left: 0; right: 0; height: 4px;
    background: #e0e0e0; border-radius: 2px; pointer-events: none;
}
.price-slider-fill {
    position: absolute; height: 4px;
    background: var(--color-primary); border-radius: 2px; pointer-events: none;
}
.price-range {
    -webkit-appearance: none; appearance: none;
    position: absolute; width: 100%; height: 4px;
    background: transparent; outline: none; pointer-events: none; margin: 0;
}
.price-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; background: var(--color-primary);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
    border-radius: 50%; cursor: pointer; pointer-events: all; transition: transform .2s ease;
}
.price-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.price-range::-moz-range-thumb {
    width: 18px; height: 18px; background: var(--color-primary);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
    border-radius: 50%; cursor: pointer; pointer-events: all; transition: transform .2s ease;
}

/* ── Subcategory section animation ── */
.subcategory-section { opacity: 0; transform: translateY(30px); transition: all .5s ease; }
.subcategory-section.visible { opacity: 1; transform: translateY(0); }

/* ── Badges ── */
.prod-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; border-radius: 2px;
}
.prod-badge-discount {
    position: absolute; top: 12px; right: 12px;
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; border-radius: 2px;
}

/* ── Attribute buttons ── */
.size-btn {
    width: auto; height: 40px; padding: 0 10px; border: 1px solid var(--color-border);
    border-radius: 8px; font-size: 13px; cursor: pointer; background: #fff;
    transition: all .2s ease;
}
.size-btn:hover, .size-btn.active { border-color: var(--color-primary); background: #f0f0f0; }

/* ── Filter chip tags ── */
.filter-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; background: #f0f0f0; border-radius: 20px;
    font-size: 12px; cursor: pointer; transition: background .2s;
}
.filter-tag:hover { background: #e0e0e0; }

/* ── No product ── */
.no-product-msg { text-align: center; padding: 48px 0; color: var(--color-text-muted); }

/* ══════════════════════════════════════════
   GRIDS
   Category page: 6 desktop | 3 tablet | 2 mobile
   Subcategory page: 4 desktop | 3 tablet | 2 mobile
   ══════════════════════════════════════════ */
.subcat-products-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
@media(max-width:1100px){ .subcat-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:640px){  .subcat-products-grid { grid-template-columns: repeat(2, 1fr); } }

.sub-full-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media(max-width:900px){ .sub-full-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:640px){ .sub-full-grid { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════
   DESKTOP FILTER SIDEBAR (left, fixed)
   ══════════════════════════════════════════ */
#filterSidebar {
    position: fixed;
    left: 0; top: 64px;
    width: 272px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 40;
    background: #fff;
    border-right: 1px solid var(--color-border-light);
    transition: transform .3s ease, opacity .3s ease;
}
#filterSidebar.hidden-filter {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Show-filter button (desktop only, appears when sidebar is hidden) */
#showFilterBtn {
    display: none;
    position: fixed;
    left: 0; top: 88px;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════
   MOBILE FILTER DRAWER (right side)
   ══════════════════════════════════════════ */
@media(max-width:768px) {
    /* Override desktop left-sidebar behaviour completely */
    #filterSidebar,
    #filterSidebar.hidden-filter {
        left: auto;
        right: 0;
        top: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        z-index: 200;
        border-right: none;
        border-left: 1px solid var(--color-border-light);
        box-shadow: -4px 0 24px rgba(0,0,0,.12);
        opacity: 1;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform .3s ease;
    }
    /* When open: slide in from right */
    #filterSidebar.mobile-open {
        transform: translateX(0);
        pointer-events: all;
        opacity: 1;
    }

    #subcategoryContent { margin-left: 0 !important; }
    #showFilterBtn { display: none !important; }
}

/* ── Mobile Overlay (dark backdrop) ── */
.mobile-overlay {
    display: none; /* JS sets display:block when needed */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199; /* below sidebar (200), above everything else */
    pointer-events: auto;
}

/* ── Mobile filter button in top bar — hidden on desktop, shown on mobile ── */
#mobileFilterBtn {
    display: none; /* hidden on desktop */
}
@media(max-width:768px) {
    #mobileFilterBtn {
        display: inline-flex !important;
    }
}

.filter-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    margin-top:30px;
}

@media (max-width: 991px) {
    .filter-header{
        margin-top:80px;
    }
}