/* ============================================================
   HEIRLOOM GOLD — category.css
   Category landing page: hero, sidebar filters, product grid.
   Palette: Ivory #faf8f4 · Regal blue #1a2f5e · Gold #b5924c
   Type: Cormorant Garamond (display) · DM Sans (body)
   Mobile-first. Sidebar becomes a bottom drawer on mobile.
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul[role="list"] { list-style: none; }

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --c-bg:       #faf8f4;
    --c-surface:  #ffffff;
    --c-blue:     #1a2f5e;
    --c-blue-mid: #2a4a8e;
    --c-gold:     #b5924c;
    --c-gold-lt:  #d4af72;
    --c-text:     #2c2c2c;
    --c-muted:    #6b6b6b;
    --c-border:   #e8e2d9;
    --c-rule:     #d4c9b8;

    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-body:    'DM Sans', system-ui, sans-serif;

    --max-w:      1300px;
    --gap:        clamp(14px, 2.5vw, 28px);
    --sidebar-w:  240px;
    --radius:     6px;
    --shadow:     0 2px 12px rgba(26,47,94,.08);
    --shadow-h:   0 6px 24px rgba(26,47,94,.15);
    --trans:      220ms ease;
}

/* ── Page shell ──────────────────────────────────────────── */
body {
    font-family:            var(--ff-body);
    font-size:              16px;
    line-height:            1.65;
    color:                  var(--c-text);
    background:             var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

.cat-page {
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   0 var(--gap);
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px 6px;
    padding:     18px 0 0;
    font-size:   13px;
    color:       var(--c-muted);
    list-style:  none;
}
.breadcrumb a             { color: var(--c-blue); text-decoration: none; }
.breadcrumb a:hover       { text-decoration: underline; }
.breadcrumb__sep          { color: var(--c-rule); }

/* ── Hero ─────────────────────────────────────────────────── */
.cat-hero {
    padding:       32px 0 24px;
    border-bottom: 1px solid var(--c-rule);
    max-width:     760px;
}
.cat-hero__h1 {
    font-family:   var(--ff-display);
    font-size:     clamp(26px, 4vw, 44px);
    font-weight:   400;
    color:         var(--c-blue);
    line-height:   1.15;
    margin-bottom: 16px;
}
.cat-hero__intro          { font-size: 15px; color: var(--c-text); max-width: 640px; }
.cat-hero__intro p        { margin-bottom: 10px; }
.cat-hero__intro p:last-child { margin-bottom: 0; }
.cat-hero__intro h2 {
    font-family:   var(--ff-display);
    font-size:     clamp(17px, 2.2vw, 22px);
    font-weight:   400;
    color:         var(--c-blue);
    margin:        20px 0 6px;
}

/* ── Layout: sidebar + main ──────────────────────────────── */
.cat-layout {
    display:    flex;
    gap:        var(--gap);
    align-items: flex-start;
    padding:    20px 0 0;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.cat-sidebar {
    flex:          0 0 var(--sidebar-w);
    width:         var(--sidebar-w);
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: var(--radius);
    padding:       20px 18px 18px;
    position:      sticky;
    top:           24px;
}

.sidebar__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
    padding-bottom:  12px;
    border-bottom:   1px solid var(--c-rule);
}
.sidebar__title {
    font-family: var(--ff-display);
    font-size:   18px;
    font-weight: 400;
    color:       var(--c-blue);
}
.sidebar__clear {
    background:  none;
    border:      none;
    color:       var(--c-gold);
    font-family: var(--ff-body);
    font-size:   12px;
    cursor:      pointer;
    padding:     0;
    text-decoration: underline;
}
.sidebar__clear:hover { color: var(--c-blue); }

/* ── Filter groups ───────────────────────────────────────── */
.filter-group {
    padding:       14px 0;
    border-bottom: 1px solid var(--c-border);
}
.filter-group:last-of-type { border-bottom: none; }

.filter-group__label {
    font-family:   var(--ff-body);
    font-size:     11px;
    font-weight:   500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:         var(--c-muted);
    margin-bottom: 10px;
}

/* ── Checkbox list ───────────────────────────────────────── */
.filter-list { display: flex; flex-direction: column; gap: 6px; }

.filter-check {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   14px;
    color:       var(--c-text);
    user-select: none;
}
.filter-check input[type="checkbox"] {
    position:    absolute;
    opacity:     0;
    width:       0;
    height:      0;
}
.filter-check__box {
    flex-shrink: 0;
    width:       16px;
    height:      16px;
    border:      1.5px solid var(--c-border);
    border-radius: 3px;
    background:  var(--c-bg);
    transition:  border-color var(--trans), background var(--trans);
    position:    relative;
}
.filter-check input:checked + .filter-check__box {
    background:    var(--c-blue);
    border-color:  var(--c-blue);
}
.filter-check input:checked + .filter-check__box::after {
    content:     '';
    position:    absolute;
    left:        4px; top: 1px;
    width:       5px; height: 9px;
    border:      1.5px solid #fff;
    border-top:  none; border-left: none;
    transform:   rotate(45deg);
}
.filter-check:hover .filter-check__box { border-color: var(--c-gold); }
.filter-check input:focus-visible + .filter-check__box {
    outline:        2px solid var(--c-gold);
    outline-offset: 2px;
}
.filter-check__label { flex: 1; line-height: 1.3; }
.filter-check__count { font-size: 11px; color: var(--c-muted); min-width: 24px; text-align: right; }

/* ── Price range slider ──────────────────────────────────── */
.price-range { margin-top: 4px; }

.price-range__track {
    position:   relative;
    height:     4px;
    background: var(--c-border);
    border-radius: 2px;
    margin:     20px 0 8px;
}
.price-range__fill {
    position:      absolute;
    height:        100%;
    background:    var(--c-gold);
    border-radius: 2px;
    pointer-events:none;
}

.price-range__input {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    width:      100%;
    height:     100%;
    opacity:    0;
    cursor:     pointer;
    margin:     0;
    padding:    0;
    z-index:    2;
    -webkit-appearance: none;
    appearance: none;
}
/* Render thumbs via pseudo on the track wrapper instead */
.price-range__track::before,
.price-range__track::after {
    content:       '';
    position:      absolute;
    top:           50%;
    transform:     translate(-50%, -50%);
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--c-surface);
    border:        2px solid var(--c-gold);
    box-shadow:    var(--shadow);
    pointer-events:none;
    z-index:       3;
    /* JS sets left via priceFill, so we use CSS vars set by JS */
    left: var(--thumb-lo, 0%);
}
.price-range__track::after  { left: var(--thumb-hi, 100%); }

.price-range__labels {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    color:           var(--c-text);
    margin-top:      14px;
}

/* ── Mobile sidebar close button ─────────────────────────── */
.sidebar__close-btn {
    display:       none; /* shown on mobile only */
    width:         100%;
    margin-top:    18px;
    padding:       10px;
    background:    var(--c-blue);
    color:         #fff;
    border:        none;
    border-radius: var(--radius);
    font-family:   var(--ff-body);
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    text-align:    center;
}

/* ── Main column ─────────────────────────────────────────── */
.cat-main { flex: 1 1 0; min-width: 0; }

/* ── Toolbar ─────────────────────────────────────────────── */
.cat-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    padding-bottom:  14px;
    font-size:       14px;
    color:           var(--c-muted);
}
.cat-toolbar__left {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}
.cat-toolbar__count strong { color: var(--c-text); }

/* Filter toggle button (visible on mobile; desktop uses persistent sidebar) */
.filter-toggle-btn {
    display:       none; /* shown on mobile via media query */
    align-items:   center;
    gap:           6px;
    padding:       7px 14px;
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: var(--radius);
    font-family:   var(--ff-body);
    font-size:     13px;
    color:         var(--c-blue);
    cursor:        pointer;
    font-weight:   500;
    transition:    border-color var(--trans);
}
.filter-toggle-btn:hover { border-color: var(--c-gold); }

.filter-toggle-btn__badge {
    display:       inline-flex;
    align-items:   center;
    justify-content:center;
    min-width:     18px;
    height:        18px;
    padding:       0 4px;
    background:    var(--c-gold);
    color:         #fff;
    border-radius: 9px;
    font-size:     11px;
    font-weight:   600;
    line-height:   1;
}

/* Sort select */
.cat-sort { display: flex; align-items: center; gap: 8px; }
.cat-sort label { color: var(--c-muted); font-size: 13px; }
.cat-sort select {
    border:            1px solid var(--c-border);
    border-radius:     var(--radius);
    padding:           6px 28px 6px 10px;
    font-family:       var(--ff-body);
    font-size:         13px;
    color:             var(--c-text);
    background:        var(--c-surface)
                       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a2f5e'/%3E%3C/svg%3E")
                       no-repeat right 10px center;
    appearance:        none;
    cursor:            pointer;
}
.cat-sort select:focus {
    outline:     none;
    border-color:var(--c-gold);
    box-shadow:  0 0 0 2px rgba(181,146,76,.2);
}

/* ── Active filter chips ─────────────────────────────────── */
.active-filters {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 14px;
}
.active-filters__list {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    list-style:none;
}
.active-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 10px;
    background:    #eef1f8;
    border:        1px solid #c8d0e0;
    border-radius: 20px;
    font-size:     12px;
    color:         var(--c-blue);
    white-space:   nowrap;
}
.active-chip__remove {
    background:  none;
    border:      none;
    color:       var(--c-blue);
    cursor:      pointer;
    font-size:   14px;
    line-height: 1;
    padding:     0 0 0 2px;
    opacity:     .7;
}
.active-chip__remove:hover { opacity: 1; }

/* ── Product grid ────────────────────────────────────────── */
.cat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap:                   var(--gap);
    padding-bottom:        48px;
}

/* ── Product card ────────────────────────────────────────── */
.card {
    background:     var(--c-surface);
    border-radius:  var(--radius);
    box-shadow:     var(--shadow);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    text-decoration:none;
    color:          inherit;
    transition:     box-shadow var(--trans), transform var(--trans);
}
.card:hover          { box-shadow: var(--shadow-h); transform: translateY(-3px); }
.card:focus-visible  { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.card__img-wrap {
    position:     relative;
    aspect-ratio: 1 / 1;
    overflow:     hidden;
    background:   #f0ece6;
}
.card__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 400ms ease;
}
.card:hover .card__img { transform: scale(1.04); }

.card__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-rule); font-size: 40px;
}

.card__badge {
    position:       absolute;
    top:            10px; left: 10px;
    background:     var(--c-gold);
    color:          #fff;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  3px;
}

.card__body {
    padding:        12px 14px 16px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            5px;
}
.card__era {
    font-size:      11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--c-gold);
    font-weight:    500;
}
.card__title {
    font-family: var(--ff-display);
    font-size:   16px;
    font-weight: 400;
    line-height: 1.3;
    color:       var(--c-blue);
}
.card__meta  { font-size: 12px; color: var(--c-muted); }
.card__price {
    font-family: var(--ff-display);
    font-size:   19px;
    color:       var(--c-text);
    margin-top:  auto;
    padding-top: 8px;
}

/* ── Empty states ────────────────────────────────────────── */
.cat-empty {
    grid-column:1 / -1;
    text-align: center;
    padding:    60px 20px;
    color:      var(--c-muted);
}
.cat-empty__icon { font-size: 40px; margin-bottom: 12px; }
.cat-empty h2 {
    font-family:   var(--ff-display);
    font-size:     22px;
    font-weight:   400;
    color:         var(--c-blue);
    margin-bottom: 8px;
}
.link-btn {
    background:  none;
    border:      none;
    color:       var(--c-gold);
    font-family: inherit;
    font-size:   inherit;
    cursor:      pointer;
    text-decoration: underline;
    padding:     0;
}

/* ── Mobile sidebar overlay ──────────────────────────────── */
.sidebar-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.4);
    z-index:    199;
}

/* ── Utility ─────────────────────────────────────────────── */
.sr-only {
    position:white-space:nowrap;
    position: absolute; width:1px; height:1px;
    padding:0; overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet and below: hide sidebar, show filter button ──── */
@media (max-width: 899px) {

    .cat-layout            { display: block; }

    .filter-toggle-btn     { display: inline-flex; }

    /* Sidebar becomes a bottom drawer */
    .cat-sidebar {
        position:      fixed;
        bottom:        0; left: 0; right: 0;
        width:         100%;
        max-height:    80vh;
        overflow-y:    auto;
        border-radius: var(--radius) var(--radius) 0 0;
        border:        none;
        border-top:    1px solid var(--c-border);
        z-index:       200;
        transform:     translateY(100%);
        transition:    transform 260ms ease;
        /* Hidden by default; toggled via JS */
    }
    .cat-sidebar.is-open   { transform: translateY(0); }

    .sidebar__close-btn    { display: block; }

    .price-range__track::before,
    .price-range__track::after { display: none; } /* thumbs via native input on mobile */
    .price-range__input    { opacity: 1; height: 4px; background: transparent; }
    .price-range__input::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px; height: 18px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 2px solid var(--c-gold);
        box-shadow: var(--shadow);
        cursor: pointer;
    }
    .price-range__input::-moz-range-thumb {
        width: 18px; height: 18px;
        border-radius: 50%;
        background: var(--c-surface);
        border: 2px solid var(--c-gold);
        box-shadow: var(--shadow);
        cursor: pointer;
    }
}

/* ── Small mobile: 2-col grid ────────────────────────────── */
@media (max-width: 640px) {
    .cat-grid              { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card__body            { padding: 9px 10px 12px; }
    .card__title           { font-size: 14px; }
    .card__price           { font-size: 16px; }
    .cat-hero              { padding: 20px 0 18px; }
}

/* ── Very small: 1-col ───────────────────────────────────── */
@media (max-width: 360px) {
    .cat-grid              { grid-template-columns: 1fr; }
}

/* ── Large desktop: wider sidebar, denser grid ───────────── */
@media (min-width: 1100px) {
    :root { --sidebar-w: 260px; }
    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}