/* ============================================================
   HEIRLOOM GOLD — collection.css
   Design layer for the collection pages: shop-by-price.php,
   category.php and search.php. Loads after category.css (and
   heirloom.css on shop-by-price) so it wins the cascade; every
   rule is scoped under .cat-page.

   White page, near-black type, no second heading colour.
     Noto Serif Display  — page title, card titles + prices
                           (cards use the condensed width)
     Inter Tight         — everything else

   Filters: on desktop each .filter-group is a rounded button
   whose list/range drops down beneath it (include/collection.js
   opens and closes them). Under 900px the same aside is the
   slide-up drawer from category.css, with the groups stacked.
   One set of inputs serves both, so the page's inline filter
   script is unchanged.
   ============================================================ */

:root {
    --cx-ink    : #0b0b0b;
    --cx-ink2   : #3d3d3d;
    --cx-mute   : #767676;
    --cx-line   : #ebebeb;
    --cx-soft   : #f5f5f4;
    --cx-tile   : #f3f3f2;
    --cx-serif  : 'Noto Serif Display', Didot, Georgia, serif;
    --cx-sans   : 'Inter Tight', system-ui, sans-serif;
    --cx-r      : 14px;
    --cx-ease   : cubic-bezier(.2, .7, .2, 1);
}

body:has(.cat-page) { background: #fff; }

.cat-page {
    max-width:   1320px;
    padding:     0 40px;
    font-family: var(--cx-sans);
    color:       var(--cx-ink);
}


/* ── Breadcrumb ────────────────────────────────────────────── */
.cat-page .breadcrumb {
    background:  none;
    border:      0;
    padding:     26px 0 0;
    gap:         4px 8px;
    font:        400 12px/1.4 var(--cx-sans);
    letter-spacing: 0;
    text-transform: none;
    color:       var(--cx-mute);
}
.cat-page .breadcrumb a                 { color: var(--cx-mute); text-decoration: none; }
.cat-page .breadcrumb a:hover           { color: var(--cx-ink); }
.cat-page .breadcrumb [aria-current]    { color: var(--cx-ink); }
.cat-page .breadcrumb__sep              { color: #c8c8c8; font-size: 12px; }


/* ── Title block ───────────────────────────────────────────── */
.cat-page .cat-hero {
    max-width: none;
    border:    0;
    padding:   18px 0 0;
}
.cat-page .cat-hero__head {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             24px 40px;
}
.cat-page .cat-hero__h1 {
    font-family:    var(--cx-serif);
    font-size:      54px;
    font-weight:    300;
    font-stretch:   100%;
    line-height:    1.02;
    letter-spacing: -.015em;
    color:          var(--cx-ink);
    margin:         0;
}
.cat-page .cat-hero__lead,
.cat-page .cat-hero__lead p {
    max-width:   880px;
    margin:      14px 0 0;
    font:        400 14.5px/1.7 var(--cx-sans);
    color:       var(--cx-ink2);
}
.cat-page .cat-hero__lead p { margin: 0; }
.cat-page .cat-hero__lead a {
    color:                 var(--cx-ink);
    text-decoration:       underline;
    text-decoration-color: #cfcfcf;
    text-underline-offset: 3px;
    white-space:           nowrap;
}
.cat-page .cat-hero__lead a:hover { text-decoration-color: var(--cx-ink); }

/* Price ranges: one quiet segmented control beside the title */
.cat-page .price-switcher {
    display:       inline-flex;
    flex:          0 0 auto;
    flex-wrap:     nowrap;
    gap:           2px;
    margin:        0;
    padding:       4px;
    border:        0;
    border-radius: 999px;
    background:    var(--cx-soft);
}
.cat-page .price-pill {
    padding:        7px 14px;
    border:         0;
    border-radius:  999px;
    background:     none;
    font:           500 12.5px/1.2 var(--cx-sans);
    letter-spacing: 0;
    text-transform: none;
    color:          var(--cx-ink2);
    white-space:    nowrap;
    transition:     color .2s, background .2s, box-shadow .2s;
}
.cat-page .price-pill:hover { color: var(--cx-ink); border: 0; }
.cat-page .price-pill--on,
.cat-page .price-pill--on:hover {
    background: #fff;
    color:      var(--cx-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
}

/* Search page: refine box under the title */
.cat-page .search-refine {
    display:       flex;
    max-width:     520px;
    margin:        20px 0 0;
    padding:       4px;
    border:        1px solid var(--cx-line);
    border-radius: 999px;
    background:    #fff;
}
.cat-page .search-refine__input {
    flex:        1;
    min-width:   0;
    border:      0;
    outline:     0;
    padding:     0 16px;
    background:  none;
    font:        400 14px var(--cx-sans);
    color:       var(--cx-ink);
}
.cat-page .search-refine__btn {
    border:        0;
    border-radius: 999px;
    padding:       10px 20px;
    background:    var(--cx-ink);
    color:         #fff;
    font:          500 12.5px var(--cx-sans);
    cursor:        pointer;
}


/* ── Toolbar pieces (layout per breakpoint below) ─────────── */
.cat-page .cat-toolbar {
    display:     flex;
    align-items: center;
    gap:         22px;
    padding:     0;
    font:        400 13px var(--cx-sans);
    color:       var(--cx-mute);
}
.cat-page .cat-toolbar__left  { gap: 16px; }
.cat-page .cat-toolbar__count { margin: 0; }
.cat-page .cat-toolbar__count strong { color: var(--cx-ink); font-weight: 600; }

.cat-page .cat-sort       { gap: 4px; }
.cat-page .cat-sort label { font: 400 13px var(--cx-sans); color: var(--cx-mute); letter-spacing: 0; text-transform: none; }
.cat-page .cat-sort select {
    border:     0;
    padding:    6px 18px 6px 2px;
    font:       500 13px var(--cx-sans);
    color:      var(--cx-ink);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767676' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center;
    cursor:     pointer;
}
.cat-page .cat-sort select:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; box-shadow: none; }

/* Rounded buttons: filter groups, mobile "Filters" */
.cat-page .filter-pill,
.cat-page .filter-toggle-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    height:        36px;
    padding:       0 14px;
    border:        1px solid var(--cx-line);
    border-radius: 999px;
    background:    #fff;
    font:          500 13px/1 var(--cx-sans);
    color:         var(--cx-ink);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    border-color .2s;
}
.cat-page .filter-pill:hover,
.cat-page .filter-toggle-btn:hover { border-color: #c9c9c9; }
.cat-page .filter-pill::after {
    content:      '';
    width:        5px;
    height:       5px;
    margin:       -3px 0 0 2px;
    border-right: 1.3px solid var(--cx-mute);
    border-bottom:1.3px solid var(--cx-mute);
    transform:    rotate(45deg);
    transition:   transform .2s;
}
.cat-page .filter-group.is-open .filter-pill::after { transform: rotate(-135deg); margin-top: 3px; }
.cat-page .filter-group.is-open .filter-pill,
.cat-page .filter-group.has-value .filter-pill { border-color: var(--cx-ink); }
.cat-page .filter-pill__n,
.cat-page .filter-toggle-btn__badge {
    display:         inline-grid;
    place-items:     center;
    min-width:       18px;
    height:          18px;
    padding:         0 4px;
    border-radius:   999px;
    background:      var(--cx-ink);
    color:           #fff;
    font:            600 10px/1 var(--cx-sans);
}
.cat-page .filter-pill__n[hidden],
.cat-page .filter-toggle-btn__badge[hidden] { display: none; }

.cat-page .sidebar__clear {
    font:            500 13px var(--cx-sans);
    color:           var(--cx-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cat-page .sidebar__clear:hover { color: var(--cx-mute); }

/* Checkboxes */
.cat-page .filter-list  { gap: 2px; }
.cat-page .filter-check {
    gap:         10px;
    padding:     5px 0;
    font:        400 13.5px/1.3 var(--cx-sans);
    color:       var(--cx-ink2);
}
.cat-page .filter-check__box {
    width:         16px;
    height:        16px;
    border:        1px solid #cfcfcf;
    border-radius: 4px;
    background:    #fff;
}
.cat-page .filter-check:hover .filter-check__box { border-color: var(--cx-ink); }
.cat-page .filter-check input:checked + .filter-check__box { background: var(--cx-ink); border-color: var(--cx-ink); }
.cat-page .filter-check input:checked ~ .filter-check__label { color: var(--cx-ink); }
.cat-page .filter-check input:focus-visible + .filter-check__box { outline: 2px solid var(--cx-ink); }
.cat-page .filter-check__count { font-size: 11.5px; color: var(--cx-mute); }

/* Price range — native thumbs at every width. The old pseudo
   thumbs never followed the handles, and two stacked range
   inputs only both work when the track ignores the pointer. */
.cat-page .price-range__track          { height: 2px; background: var(--cx-line); margin: 18px 8px 10px; }
.cat-page .price-range__fill           { background: var(--cx-ink); }
.cat-page .price-range__track::before,
.cat-page .price-range__track::after   { display: none; }
.cat-page .price-range__input {
    opacity:            1;
    height:             2px;
    background:         transparent;
    pointer-events:     none;
}
.cat-page .price-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              18px;
    height:             18px;
    border-radius:      50%;
    background:         #fff;
    border:             1.5px solid var(--cx-ink);
    box-shadow:         0 1px 4px rgba(0, 0, 0, .15);
    pointer-events:     auto;
    cursor:             pointer;
}
.cat-page .price-range__input::-moz-range-thumb {
    width:              16px;
    height:             16px;
    border-radius:      50%;
    background:         #fff;
    border:             1.5px solid var(--cx-ink);
    box-shadow:         0 1px 4px rgba(0, 0, 0, .15);
    pointer-events:     auto;
    cursor:             pointer;
}
.cat-page .price-range__labels { margin-top: 16px; font: 500 13px var(--cx-sans); color: var(--cx-ink); }

/* Active filter chips */
.cat-page .active-filters { margin: 16px 0 0; }
.cat-page .active-filters[hidden] { display: none; } /* category.css's display:flex beat [hidden] */
.cat-page .active-chip {
    gap:           6px;
    padding:       6px 8px 6px 12px;
    border:        0;
    border-radius: 999px;
    background:    var(--cx-soft);
    font:          500 12.5px/1 var(--cx-sans);
    color:         var(--cx-ink);
}
.cat-page .active-chip__remove { color: var(--cx-ink); font-size: 15px; }


/* ── Desktop: filter row + dropdowns ───────────────────────── */
@media (min-width: 900px) {
    .cat-page .cat-layout {
        display:               grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items:           center;
        gap:                   0 24px;
        margin-top:            30px;
        padding:               0;
    }
    /* hairlines above and below the filter row */
    .cat-page .cat-layout::before {
        content:       '';
        grid-row:      1;
        grid-column:   1 / -1;
        align-self:    stretch;
        border-top:    1px solid var(--cx-line);
        border-bottom: 1px solid var(--cx-line);
    }
    .cat-page .cat-main { display: contents; }

    .cat-page .cat-sidebar {
        grid-row:      1;
        grid-column:   1;
        position:      static;
        display:       flex;
        flex-wrap:     wrap;
        align-items:   center;
        gap:           8px;
        width:         auto;
        padding:       14px 0;
        border:        0;
        border-radius: 0;
        background:    none;
        transform:     none;
    }
    .cat-page .sidebar__header {
        order:   99;
        margin:  0 0 0 8px;
        padding: 0;
        border:  0;
    }
    .cat-page .sidebar__title { display: none; }

    .cat-page .filter-group {
        position: relative;
        padding:  0;
        border:   0;
    }
    .cat-page .filter-group__label {
        margin:         0;
        font:           inherit;
        letter-spacing: 0;
        text-transform: none;
    }

    /* the dropdown: whatever follows the button in the group */
    .cat-page .filter-group > .filter-list,
    .cat-page .filter-group > .price-range {
        display:       none;
        position:      absolute;
        top:           calc(100% + 8px);
        left:          0;
        z-index:       40;
        min-width:     250px;
        max-height:    340px;
        overflow-y:    auto;
        margin:        0;
        padding:       12px 18px;
        background:    #fff;
        border:        1px solid var(--cx-line);
        border-radius: var(--cx-r);
        box-shadow:    0 20px 44px -16px rgba(0, 0, 0, .22);
    }
    .cat-page .filter-group > .price-range { width: 290px; padding: 16px 22px 18px; }
    .cat-page .filter-group.is-open > .filter-list  { display: flex; }
    .cat-page .filter-group.is-open > .price-range  { display: block; }

    .cat-page .cat-toolbar {
        grid-row:        1;
        grid-column:     2;
        justify-content: flex-end;
        padding:         14px 0;
    }
    .cat-page .filter-toggle-btn { display: none; }

    .cat-page .active-filters     { grid-column: 1 / -1; grid-row: 2; }
    .cat-page .cat-main > section { grid-column: 1 / -1; grid-row: 3; padding-top: 28px; }
}


/* ── Tablet & phone: toolbar row + slide-up drawer ─────────── */
@media (max-width: 899px) {
    .cat-page .cat-main    { padding-top: 22px; }
    .cat-page .cat-toolbar {
        justify-content: space-between;
        padding:         12px 0;
        border-top:      1px solid var(--cx-line);
        border-bottom:   1px solid var(--cx-line);
    }
    .cat-page .filter-toggle-btn { display: inline-flex; }

    /* Slide-up drawer. top:auto undoes category.css's sticky
       top:24px, which otherwise pins the drawer's top edge on
       screen; the transforms are restated because heirloom.css
       (loaded on shop-by-price) resets them. */
    .cat-page .cat-sidebar {
        position:      fixed;
        top:           auto;
        bottom:        0;
        left:          0;
        right:         0;
        width:         100%;
        max-height:    80vh;
        overflow-y:    auto;
        z-index:       200;
        padding:       22px 22px 20px;
        background:    #fff;
        border:        0;
        border-radius: 20px 20px 0 0;
        transform:     translateY(100%);
        transition:    transform 260ms ease;
    }
    .cat-page .cat-sidebar.is-open { transform: translateY(0); }
    .cat-page .sidebar__header { border-bottom: 1px solid var(--cx-line); padding-bottom: 14px; margin-bottom: 4px; }
    .cat-page .sidebar__title  { font: 300 26px/1 var(--cx-serif); color: var(--cx-ink); }
    .cat-page .filter-group    { padding: 16px 0; border-bottom: 1px solid var(--cx-line); }
    .cat-page .filter-group__label { margin: 0 0 8px; }
    .cat-page .filter-pill {
        height:         auto;
        padding:        0;
        border:         0;
        background:     none;
        font:           600 11px/1 var(--cx-sans);
        letter-spacing: .14em;
        text-transform: uppercase;
        color:          var(--cx-mute);
        pointer-events: none;
    }
    .cat-page .filter-pill::after,
    .cat-page .filter-pill__n { display: none; }
    .cat-page .sidebar__close-btn {
        margin-top:    18px;
        padding:       14px;
        border-radius: 999px;
        background:    var(--cx-ink);
        font:          500 14px var(--cx-sans);
    }
}


/* ── Product grid + cards ──────────────────────────────────── */
.cat-page .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   44px 24px;
    padding-bottom:        72px;
}
.cat-page .cat-grid__item { display: flex; }

.cat-page .card {
    flex:           1;
    display:        flex;
    flex-direction: column;
    background:     none;
    border-radius:  0;
    box-shadow:     none;
    overflow:       visible;
    transform:      none;
}
.cat-page .card:hover         { box-shadow: none; transform: none; }
.cat-page .card:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 4px; border-radius: var(--cx-r); }

.cat-page .card__img-wrap {
    aspect-ratio:  1 / 1;
    border-radius: var(--cx-r);
    overflow:      hidden;
    background:    var(--cx-tile);
}
.cat-page .card__img-wrap picture { display: block; height: 100%; }
.cat-page .card__img              { transition: transform .9s var(--cx-ease); }
.cat-page .card:hover .card__img  { transform: scale(1.04); }

.cat-page .card__badge,
.cat-page .card__era,
.cat-page .card__meta { display: none; }

/* Title, then price — the price sits on the card's bottom edge,
   and grid rows stretch every card to the tallest, so prices
   line up across a row whatever the title length. */
.cat-page .card__body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0;
    padding:        16px 2px 0;
    background:     none;
}
.cat-page .card__title {
    margin:         0 0 14px;
    font-family:    var(--cx-serif);
    font-size:      21px;
    font-weight:    300;
    font-stretch:   62.5%;
    line-height:    1.22;
    letter-spacing: .01em;
    color:          var(--cx-ink);
}
.cat-page .card__price {
    margin-top:     auto;
    padding-top:    0;
    font-family:    var(--cx-serif);
    font-size:      22px;
    font-weight:    500;
    font-stretch:   62.5%;
    line-height:    1;
    letter-spacing: .02em;
    color:          var(--cx-ink);
}


/* ── About this collection (long intro, below the grid) ───── */
.cat-page .cat-about {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap:                   64px;
    padding:               56px 0 72px;
    border-top:            1px solid var(--cx-line);
    scroll-margin-top:     24px;
}
.cat-page .cat-about__title {
    margin:      0;
    font:        300 36px/1.1 var(--cx-serif);
    color:       var(--cx-ink);
}
.cat-page .cat-about__body {
    columns:    2;
    column-gap: 44px;
    font:       400 14px/1.75 var(--cx-sans);
    color:      var(--cx-ink2);
}
.cat-page .cat-about__body p  { margin: 0 0 14px; }
.cat-page .cat-about__body h2,
.cat-page .cat-about__body h3 {
    margin:       4px 0 8px;
    font:         400 20px/1.25 var(--cx-serif);
    color:        var(--cx-ink);
    break-after:  avoid;
}
.cat-page .cat-about__body a  { color: var(--cx-ink); text-decoration: underline; text-underline-offset: 3px; }


/* ── Price hub (/shop/) ────────────────────────────────────── */
.cat-page .price-hub {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   16px;
    margin:                30px 0 72px;
    background:            none;
}
.cat-page .price-hub-card {
    height:        100%;
    padding:       26px 24px 22px;
    background:    #fff;
    border:        1px solid var(--cx-line);
    border-radius: var(--cx-r);
    transition:    border-color .2s;
}
.cat-page .price-hub-card:hover   { background: #fff; border-color: var(--cx-ink); }
.cat-page .price-hub-card__label  { font: 300 30px/1 var(--cx-serif); color: var(--cx-ink); }
.cat-page .price-hub-card__sub    { font: 400 13px/1.5 var(--cx-sans); color: var(--cx-mute); letter-spacing: 0; }
.cat-page .price-hub-card__arrow,
.cat-page .price-hub-card:hover .price-hub-card__arrow { color: var(--cx-ink); }


/* ── Empty states ──────────────────────────────────────────── */
.cat-page .cat-empty          { color: var(--cx-mute); }
.cat-page .cat-empty__icon    { color: #cfcfcf; }
.cat-page .cat-empty h2       { font: 300 28px/1.2 var(--cx-serif); color: var(--cx-ink); }
.cat-page .link-btn           { color: var(--cx-ink); }


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .cat-page .cat-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cat-page .price-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
    .cat-page             { padding: 0 24px; }
    .cat-page .cat-hero__head { flex-direction: column; align-items: flex-start; }
    .cat-page .cat-about  { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
    .cat-page                   { padding: 0 18px; }
    .cat-page .breadcrumb       { padding-top: 18px; }
    .cat-page .cat-hero         { padding-top: 12px; }
    .cat-page .cat-hero__head   { gap: 16px; }
    .cat-page .cat-hero__h1     { font-size: 40px; }
    .cat-page .price-switcher   { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .cat-page .price-switcher::-webkit-scrollbar { display: none; }
    .cat-page .cat-hero__lead   { font-size: 14px; }
    .cat-page .cat-sort label   { display: none; }
    .cat-page .cat-grid         { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
    .cat-page .card__img-wrap   { border-radius: 10px; }
    .cat-page .card__body       { padding-top: 12px; }
    .cat-page .card__title      { font-size: 17px; margin-bottom: 10px; }
    .cat-page .card__price      { font-size: 18px; }
    .cat-page .cat-about        { padding: 40px 0 56px; }
    .cat-page .cat-about__title { font-size: 28px; }
    .cat-page .cat-about__body  { columns: 1; }
    .cat-page .price-hub        { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cat-page .price-hub-card   { padding: 20px 16px 16px; }
    .cat-page .price-hub-card__label { font-size: 24px; }
}

@media (max-width: 360px) {
    .cat-page .cat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-page .card__img { transition: none; }
}