/*
 * Shop shelf — toolbar, filter sidebar, product grid, pagination.
 *
 * Lifted verbatim out of the <style> block that [sr_shop_collection] used to
 * print inside the page body on every request (inc/shortcodes/
 * sr-shop-collection.php, lines 445-1242). Same rules, one rename:
 * .sr-shop-collection -> .sr-shop-shelf. Pagination rules are appended at the
 * bottom; everything above them is the original file.
 *
 * Enqueued by page-shop.php via sr_child_asset( 'css', 'shop-shelf' ), so it
 * lands in <head>, gets cached, and stays off every page that has no shelf.
 */

    .sr-shop-shelf {
        --sr-bg: #080605;
        --sr-panel: #0C0A08;
        --sr-line: rgba(230, 222, 207, .09);
        --sr-line-strong: rgba(182, 152, 105, .24);
        --sr-text: #BBB09A;
        --sr-text-hi: #E6DECF;
        --sr-text-fade: #756B5A;
        --sr-gold: #9C7E48;
        --sr-gold-bright: #B69869;
        --sr-serif: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
        --sr-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--sr-text);
        font-family: var(--sr-sans);
    }

    .sr-shop-shelf,
    .sr-shop-shelf * {
        box-sizing: border-box;
    }

    .sr-shop-shelf a {
        color: inherit;
        text-decoration: none;
    }

    .sr-shop-shelf .s-toolbar {
        padding: 28px 0 22px;
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) auto auto;
        gap: 22px;
        align-items: center;
        border-bottom: 1px solid rgba(156,126,72,.14);
    }

    .sr-shop-shelf .s-search {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 18px 14px 0;
        border-bottom: 1px solid rgba(230,222,207,.16);
        transition: border-color .35s ease;
        min-width: 0;
    }

    .sr-shop-shelf .s-search:focus-within {
        border-bottom-color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-search svg {
        width: 18px;
        height: 18px;
        stroke: var(--sr-gold-bright);
        flex: 0 0 18px;
    }

    .sr-shop-shelf .s-search input {
        flex: 1;
        width: 100%;
        min-width: 0;
        background: transparent;
        border: 0;
        outline: none;
        font-family: var(--sr-sans);
        font-size: 16px;
        font-weight: 400;
        color: var(--sr-text-hi);
        letter-spacing: .01em;
        padding: 0;
        border-radius: 0;
    }

    .sr-shop-shelf .s-search input::placeholder {
        font-family: var(--sr-serif);
        font-size: 22px;
        letter-spacing: 0;
        color: var(--sr-text-fade);
        font-style: italic;
    }

    .sr-shop-shelf .s-search kbd {
        font-family: var(--sr-sans);
        font-size: 12px;
        line-height: 1;
        color: var(--sr-text-fade);
        min-width: 30px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(230,222,207,.14);
        border-radius: 3px;
        font-weight: 500;
        white-space: nowrap;
        transition: color .25s ease, border-color .25s ease, background .25s ease;
    }

    .sr-shop-shelf .s-search:focus-within kbd {
        color: var(--sr-gold-bright);
        border-color: rgba(182,152,105,.34);
        background: rgba(156,126,72,.08);
    }

    .sr-shop-shelf .s-sort {
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

    .sr-shop-shelf .s-sort label {
        font-size: 9.5px;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--sr-text-fade);
        font-weight: 600;
    }

    .sr-shop-shelf .s-sort select {
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid rgba(230,222,207,.18);
        color: var(--sr-text-hi);
        font-family: var(--sr-serif);
        font-size: 17px;
        padding: 6px 28px 8px 4px;
        appearance: none;
        cursor: pointer;
        outline: none;
        transition: border-color .35s ease;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23B69869' stroke-width='1.4' stroke-linecap='round'/></svg>");
        background-repeat: no-repeat;
        background-position: right 4px center;
    }

    .sr-shop-shelf .s-sort select:focus {
        border-bottom-color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-sort select option {
        background: #0C0A08;
        color: var(--sr-text-hi);
    }

    .sr-shop-shelf .s-view {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px;
        border: 1px solid rgba(230,222,207,.14);
        border-radius: 2px;
    }

    .sr-shop-shelf .s-view a,
    .sr-shop-shelf .s-view span {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        background: transparent;
        border: 0;
        color: var(--sr-text-fade);
        transition: color .3s ease, background .3s ease;
        border-radius: 2px;
    }

    .sr-shop-shelf .s-view a:hover {
        color: var(--sr-text-hi);
    }

    .sr-shop-shelf .s-view .active {
        color: var(--sr-gold-bright);
        background: rgba(156,126,72,.1);
    }

    .sr-shop-shelf .s-view svg {
        width: 16px;
        height: 16px;
    }

    .sr-shop-shelf .s-mobile-filter-toggle {
        display: none;
    }

    .sr-shop-shelf .s-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: clamp(36px, 4vw, 64px);
        padding: 56px 0 120px;
        align-items: start;
    }

    .sr-shop-shelf .s-sidebar {
        position: sticky;
        top: 112px;
        max-height: none;
        overflow: visible;
        padding-right: 14px;
        align-self: start;
    }

    .sr-shop-shelf .s-side-group {
        padding: 22px 0 26px;
        border-bottom: 1px solid rgba(230,222,207,.07);
    }

    .sr-shop-shelf .s-side-group:first-child {
        padding-top: 6px;
    }

    .sr-shop-shelf .s-side-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 18px;
        font-size: 10px;
        letter-spacing: .32em;
        text-transform: uppercase;
        color: var(--sr-gold-bright);
        font-weight: 600;
    }

    .sr-shop-shelf .s-side-label em {
        font-style: italic;
        font-family: var(--sr-serif);
        color: var(--sr-text-fade);
        letter-spacing: 0;
        font-size: 13px;
        font-weight: 400;
        text-transform: none;
    }

    .sr-shop-shelf .s-cat-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 4px;
    }

    .sr-shop-shelf .s-cat-list a {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        color: var(--sr-text);
        font-family: var(--sr-serif);
        font-size: 19px;
        letter-spacing: 0;
        line-height: 1;
        position: relative;
        transition: color .3s ease, padding .3s ease;
    }

    .sr-shop-shelf .s-cat-list a span.count {
        font-family: var(--sr-sans);
        font-size: 11px;
        color: var(--sr-text-fade);
        letter-spacing: .1em;
        font-weight: 500;
        transition: color .3s ease;
    }

    .sr-shop-shelf .s-cat-list a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleX(0);
        transform-origin: left;
        width: 6px;
        height: 1px;
        background: var(--sr-gold-bright);
        transition: transform .35s ease;
    }

    .sr-shop-shelf .s-cat-list a:hover,
    .sr-shop-shelf .s-cat-list a.active {
        color: var(--sr-text-hi);
        padding-left: 14px;
    }

    .sr-shop-shelf .s-cat-list a:hover::before,
    .sr-shop-shelf .s-cat-list a.active::before {
        transform: translateY(-50%) scaleX(1);
    }

    .sr-shop-shelf .s-cat-list a.active,
    .sr-shop-shelf .s-cat-list a.active span.count {
        color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sr-shop-shelf .s-chip {
        cursor: pointer;
        position: relative;
    }

    .sr-shop-shelf .s-chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .sr-shop-shelf .s-chip span {
        display: inline-flex;
        align-items: center;
        padding: 8px 13px;
        border: 1px solid rgba(230,222,207,.14);
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--sr-text);
        font-weight: 500;
        transition: border-color .3s ease, color .3s ease, background .3s ease;
    }

    .sr-shop-shelf .s-chip:hover span {
        border-color: rgba(182,152,105,.42);
        color: var(--sr-text-hi);
    }

    .sr-shop-shelf .s-chip input:checked + span {
        background: rgba(156,126,72,.12);
        border-color: var(--sr-gold-bright);
        color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-price-slider {
        display: grid;
        gap: 16px;
    }

    .sr-shop-shelf .s-price-values,
    .sr-shop-shelf .s-price-bounds {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        font-family: var(--sr-serif);
    }

    .sr-shop-shelf .s-price-values {
        color: var(--sr-text-hi);
        font-size: 18px;
    }

    .sr-shop-shelf .s-price-bounds {
        color: var(--sr-text-fade);
        font-size: 13px;
    }

    .sr-shop-shelf .s-price-range {
        position: relative;
        height: 28px;
    }

    .sr-shop-shelf .s-price-track,
    .sr-shop-shelf .s-price-fill {
        position: absolute;
        left: 0;
        right: 0;
        top: 13px;
        height: 2px;
        border-radius: 999px;
    }

    .sr-shop-shelf .s-price-track {
        background: rgba(230,222,207,.12);
    }

    .sr-shop-shelf .s-price-fill {
        left: var(--sr-price-left, 0%);
        right: var(--sr-price-right, 0%);
        background: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-price-input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 28px;
        margin: 0;
        background: transparent;
        pointer-events: none;
        appearance: none;
        -webkit-appearance: none;
    }

    .sr-shop-shelf .s-price-input::-webkit-slider-runnable-track {
        height: 2px;
        background: transparent;
    }

    .sr-shop-shelf .s-price-input::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        margin-top: -6px;
        border-radius: 999px;
        border: 1.5px solid var(--sr-gold-bright);
        background: #0C0A08;
        cursor: pointer;
        pointer-events: auto;
        appearance: none;
        -webkit-appearance: none;
    }

    .sr-shop-shelf .s-price-input::-moz-range-track {
        height: 2px;
        background: transparent;
    }

    .sr-shop-shelf .s-price-input::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1.5px solid var(--sr-gold-bright);
        background: #0C0A08;
        cursor: pointer;
        pointer-events: auto;
    }

    .sr-shop-shelf .s-filter-actions {
        display: grid;
        gap: 10px;
    }

    .sr-shop-shelf .s-filter-submit,
    .sr-shop-shelf .s-filter-reset {
        width: 100%;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(182,152,105,.38);
        background: rgba(156,126,72,.14);
        color: var(--sr-gold-bright);
        font-size: 10px;
        letter-spacing: .26em;
        text-transform: uppercase;
        font-weight: 700;
        cursor: pointer;
        border-radius: 0;
        transition: background .25s ease, color .25s ease, border-color .25s ease;
    }

    .sr-shop-shelf .s-filter-reset {
        background: transparent;
        color: var(--sr-text-fade);
        border-color: rgba(230,222,207,.12);
    }

    .sr-shop-shelf .s-filter-submit:hover {
        background: var(--sr-gold-bright);
        color: #0A0807;
        border-color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-filter-reset:hover {
        color: var(--sr-text-hi);
        border-color: rgba(230,222,207,.24);
    }

    .sr-shop-shelf .s-results {
        min-width: 0;
    }

    .sr-shop-shelf .s-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
    }

    .sr-shop-shelf.s-view-list .s-grid {
        grid-template-columns: 1fr;
    }

    .sr-shop-shelf .s-loop-card {
        min-width: 0;
    }

    .sr-shop-shelf .s-editorial-slot {
        grid-column: 1 / -1;
        min-width: 0;
        margin: 28px 0 54px;
    }

    .sr-shop-shelf .s-empty {
        min-height: 360px;
        display: grid;
        place-items: center;
        text-align: center;
        border: 1px solid rgba(230,222,207,.08);
        background: rgba(12,10,8,.42);
        padding: 44px 24px;
    }

    .sr-shop-shelf .s-empty h2 {
        margin: 0 0 12px;
        font-family: var(--sr-serif);
        color: var(--sr-text-hi);
        font-size: 42px;
        font-weight: 400;
        line-height: 1;
    }

    .sr-shop-shelf .s-empty p {
        margin: 0 0 22px;
        color: var(--sr-text);
        font-size: 14px;
        line-height: 1.6;
    }

    .sr-shop-shelf .s-empty a {
        color: var(--sr-gold-bright);
        font-size: 10px;
        letter-spacing: .28em;
        text-transform: uppercase;
        font-weight: 700;
        border-bottom: 1px solid rgba(182,152,105,.38);
        padding-bottom: 6px;
    }

    .sr-shop-shelf .s-pending-filter-bar {
        position: fixed;
        left: 50%;
        bottom: 24px;
        z-index: 999;
        width: min(680px, calc(100vw - 32px));
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 12px;
        align-items: center;
        padding: 14px;
        border: 1px solid rgba(182,152,105,.34);
        background:
            linear-gradient(180deg, rgba(15,12,10,.96), rgba(8,6,5,.98));
        box-shadow: 0 24px 70px rgba(0,0,0,.42);
        transform: translate(-50%, 18px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease, transform .28s ease;
    }

    .sr-shop-shelf.s-has-pending-filters .s-pending-filter-bar {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .sr-shop-shelf .s-pending-filter-copy {
        min-width: 0;
    }

    .sr-shop-shelf .s-pending-filter-kicker {
        display: block;
        margin-bottom: 4px;
        color: var(--sr-gold-bright);
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .28em;
        text-transform: uppercase;
    }

    .sr-shop-shelf .s-pending-filter-text {
        display: block;
        color: var(--sr-text-hi);
        font-family: var(--sr-serif);
        font-size: 19px;
        font-weight: 400;
        line-height: 1.1;
    }

    .sr-shop-shelf .s-pending-filter-reset,
    .sr-shop-shelf .s-pending-filter-submit {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .24em;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
    }

    .sr-shop-shelf .s-pending-filter-reset {
        padding: 0 18px;
        border: 1px solid rgba(230,222,207,.14);
        background: transparent;
        color: var(--sr-text);
    }

    .sr-shop-shelf .s-pending-filter-submit {
        padding: 0 24px;
        border: 1px solid var(--sr-gold-bright);
        background: var(--sr-gold-bright);
        color: #0A0807;
    }

    .sr-shop-shelf .s-pending-filter-reset:hover {
        color: var(--sr-text-hi);
        border-color: rgba(230,222,207,.26);
    }

    .sr-shop-shelf .s-pending-filter-submit:hover {
        background: transparent;
        color: var(--sr-gold-bright);
    }

    @media (max-width: 1024px) {
        .sr-shop-shelf .s-toolbar {
            grid-template-columns: 1fr;
        }

        .sr-shop-shelf .s-sort {
            width: 100%;
            justify-content: space-between;
        }

        .sr-shop-shelf .s-mobile-filter-toggle {
            display: block;
            border-bottom: 1px solid rgba(156,126,72,.14);
            padding: 18px 0;
        }

        .sr-shop-shelf .s-mobile-filter-button {
            width: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 18px;
            align-items: center;
            text-align: left;
            cursor: pointer;
        }

        .sr-shop-shelf .s-mobile-filter-title {
            display: block;
            margin-bottom: 8px;
            font-size: 10px;
            letter-spacing: .32em;
            text-transform: uppercase;
            color: var(--sr-gold-bright);
            font-weight: 700;
        }

        .sr-shop-shelf .s-mobile-filter-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .sr-shop-shelf .s-mobile-filter-chip {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 6px 9px;
            border: 1px solid rgba(230,222,207,.13);
            background: rgba(156,126,72,.06);
            color: var(--sr-text);
            border-radius: 999px;
            font-size: 9px;
            line-height: 1;
            letter-spacing: .16em;
            text-transform: uppercase;
            font-weight: 600;
        }

        .sr-shop-shelf .s-mobile-filter-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 104px;
            min-height: 40px;
            border: 1px solid rgba(182,152,105,.34);
            color: var(--sr-gold-bright);
            font-size: 10px;
            letter-spacing: .22em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .sr-shop-shelf .s-layout {
            grid-template-columns: 1fr;
            gap: 28px;
            padding-top: 0;
        }

        .sr-shop-shelf .s-sidebar {
            position: relative;
            top: auto;
            max-height: 0;
            overflow: hidden;
            padding-right: 0;
            opacity: 0;
            border-bottom: 1px solid rgba(156,126,72,.14);
            transition: max-height .45s cubic-bezier(.22,.7,.2,1), opacity .25s ease;
        }

        .sr-shop-shelf.s-filters-open .s-sidebar {
            max-height: 1800px;
            opacity: 1;
            overflow: visible;
            padding-bottom: 18px;
        }

        .sr-shop-shelf .s-sidebar .s-side-group:last-child {
            position: sticky;
            bottom: 0;
            z-index: 4;
            margin-top: 18px;
            padding: 18px 0 0;
            border-bottom: 0;
            background:
                linear-gradient(
                    180deg,
                    rgba(8, 6, 5, 0) 0%,
                    rgba(8, 6, 5, .92) 22%,
                    #080605 100%
                );
        }

        .sr-shop-shelf .s-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sr-shop-shelf.s-view-list .s-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 700px) {
        .sr-shop-shelf .s-toolbar {
            padding: 22px 0;
        }

        .sr-shop-shelf .s-search input {
            font-size: 16px;
        }

        .sr-shop-shelf .s-search input::placeholder {
            font-size: 18px;
        }

        .sr-shop-shelf .s-search kbd {
            display: none;
        }

        .sr-shop-shelf .s-mobile-filter-button {
            grid-template-columns: 1fr;
        }

        .sr-shop-shelf .s-mobile-filter-action {
            width: 100%;
        }

        .sr-shop-shelf .s-layout {
            padding: 0 0 84px;
        }

        .sr-shop-shelf .s-grid {
            grid-template-columns: 1fr;
        }

        .sr-shop-shelf .s-empty h2 {
            font-size: 34px;
        }

        .sr-shop-shelf .s-pending-filter-bar {
            bottom: 14px;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 14px;
        }

        .sr-shop-shelf .s-pending-filter-reset,
        .sr-shop-shelf .s-pending-filter-submit {
            width: 100%;
        }
    }

    /* ---------------------------------------------------------------------
     * NEW IN THE SHELF REBUILD (24 Aug 2026)
     *
     * Nested collection children, the result count, and pagination. Nothing
     * above this line was changed, only the .sr-shop-collection -> .sr-shop-shelf
     * rename. Tokens are the ones already declared on .sr-shop-shelf.
     * ------------------------------------------------------------------ */

    /* Collection children — Executive under Saunas, EmotionWood under Timbers.
       Smaller and quieter than the parent so the tree reads as a hierarchy. */
    .sr-shop-shelf .s-cat-sub {
        list-style: none;
        margin: 0 0 2px;
        padding: 0 0 0 14px;
        display: grid;
        gap: 0;
        border-left: 1px solid var(--sr-line);
    }

    .sr-shop-shelf .s-cat-sub a {
        padding: 7px 0;
        font-family: var(--sr-sans);
        font-size: 12.5px;
        font-weight: 400;
        letter-spacing: .04em;
        color: var(--sr-text-fade);
    }

    .sr-shop-shelf .s-cat-sub a:hover {
        color: var(--sr-text-hi);
    }

    .sr-shop-shelf .s-cat-sub a.active {
        color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-cat-sub .count {
        font-size: 10px;
        letter-spacing: .12em;
    }

    /* "Showing 1-24 of 36" */
    .sr-shop-shelf .s-count {
        margin: 0 0 18px;
        color: var(--sr-text-fade);
        font-family: var(--sr-sans);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .28em;
        text-transform: uppercase;
    }

    /* Pagination */
    .sr-shop-shelf .s-pager {
        margin: 44px 0 0;
        padding: 26px 0 0;
        border-top: 1px solid var(--sr-line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
    }

    .sr-shop-shelf .s-pager-step {
        font-family: var(--sr-sans);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--sr-text);
        transition: color .3s ease;
        white-space: nowrap;
    }

    .sr-shop-shelf a.s-pager-step:hover {
        color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-pager-step.is-off {
        color: var(--sr-text-fade);
        opacity: .45;
        cursor: default;
    }

    .sr-shop-shelf .s-pager-nums {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .sr-shop-shelf .s-pager-num {
        min-width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border: 1px solid transparent;
        color: var(--sr-text);
        font-family: var(--sr-serif);
        font-size: 16px;
        line-height: 1;
        transition: color .3s ease, border-color .3s ease, background .3s ease;
    }

    .sr-shop-shelf a.s-pager-num:hover {
        color: var(--sr-text-hi);
        border-color: var(--sr-line-strong);
    }

    .sr-shop-shelf .s-pager-num.is-current {
        color: var(--sr-bg);
        background: var(--sr-gold-bright);
        border-color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-pager-gap {
        color: var(--sr-text-fade);
        padding: 0 2px;
        font-size: 13px;
    }

    @media (max-width: 700px) {
        .sr-shop-shelf .s-pager {
            justify-content: center;
        }

        .sr-shop-shelf .s-pager-nums {
            order: -1;
            width: 100%;
            justify-content: center;
        }
    }

    /* ---------------------------------------------------------------------
     * Loading state (added 24 Aug 2026)
     *
     * A cached fetch answers in ~235ms. A spinner that appears and vanishes
     * inside that window reads as a flicker, not as feedback — so the JS only
     * adds .is-loading after a 220ms delay, and holds it for 320ms once shown.
     * On a cache hit you see nothing at all; on the slow uncached path (~1.1s)
     * you get the skeleton cards. The CSS here just reacts to the class.
     *
     * A thin gold progress bar used to sit at the top of the results as well.
     * Removed 24 Aug at Francis's request — the skeleton is the whole loading
     * signal now. Two indicators for one wait read as clutter.
     * ------------------------------------------------------------------ */

    .sr-shop-shelf .s-results {
        position: relative;
    }

    /* Dim what stays on screen while the new results are fetched. The grid
       itself is not listed: it is display:none for the duration, with the
       skeleton grid standing in its place. */
    .sr-shop-shelf.is-loading .s-count,
    .sr-shop-shelf.is-loading .s-pager,
    .sr-shop-shelf.is-loading .s-empty {
        opacity: .4;
        pointer-events: none;
    }

    .sr-shop-shelf .s-count,
    .sr-shop-shelf .s-pager,
    .sr-shop-shelf .s-empty {
        transition: opacity .28s ease;
    }

    /* ---------------------------------------------------------------------
     * Skeleton cards, shown while a new shelf is fetched (24 Aug 2026)
     *
     * Geometry is copied from .sr-pcard in product-card.css so the placeholder
     * grid occupies the same space as the real one and nothing shifts when the
     * results land: 5:4 media, 17px 22px 22px body, 16px foot padding, a 44px
     * round CTA, 14px radius.
     *
     * The JS builds ONE skeleton per card currently on screen, so the page
     * height holds steady and the scroll position never jumps mid-filter.
     * ------------------------------------------------------------------ */

    .sr-shop-shelf .s-skel-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0;
        border: 1px solid rgba(182, 152, 105, .10);
        border-radius: 14px;
        /* MUST stay hidden. The sweep below is a full-size ::after translated by
           -100% to +100%, so without this it paints a card-width band outside
           the card — over the sidebar on the left column, which is exactly the
           bug Francis caught on 24 Aug after a bad edit dropped this rule. */
        overflow: hidden;
        background: radial-gradient(122% 82% at 50% 0%, #16110b 0%, #0c0907 58%);
    }

    .sr-shop-shelf .s-skel-media {
        aspect-ratio: 5 / 4;
        width: 100%;
    }

    .sr-shop-shelf .s-skel-body {
        padding: 17px 22px 22px;
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .sr-shop-shelf .s-skel-line {
        border-radius: 3px;
    }

    .sr-shop-shelf .s-skel-eyebrow {
        height: 8px;
        width: 46%;
        margin-bottom: 13px;
    }

    .sr-shop-shelf .s-skel-title {
        height: 17px;
        width: 80%;
        margin-bottom: 9px;
    }

    .sr-shop-shelf .s-skel-title-2 {
        height: 17px;
        width: 54%;
        margin-bottom: 9px;
    }

    .sr-shop-shelf .s-skel-foot {
        margin-top: auto;
        padding-top: 16px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
    }

    .sr-shop-shelf .s-skel-price {
        height: 24px;
        width: 92px;
    }

    .sr-shop-shelf .s-skel-cta {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(182, 152, 105, .16);
    }

    /* Blank shapes are STATIC fills. Nothing animates per shape. */
    .sr-shop-shelf .s-skel-media,
    .sr-shop-shelf .s-skel-line {
        background-color: #15110E;
    }

    /* ONE sweep per card, not one per shape.
     *
     * The first version animated background-position on every shape: 5 shapes a
     * card x 24 cards = 120 elements repainting each frame, and background
     * position is a PAINT property, so none of it could go to the compositor.
     * That is the classic skeleton-shimmer performance trap, and it would have
     * landed during first paint, when the page is already busy fetching images.
     *
     * This runs one translateX over the whole card instead. Transform is
     * compositor-only, so a sweep costs no paint at all, and there is one
     * animating element per card rather than five. Same look, ~24 layers instead
     * of 120 repaints. */
    .sr-shop-shelf .s-skel-card {
        position: relative;
    }

    .sr-shop-shelf .s-skel-card::after,
    .sr-shop-shelf .s-skel-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            100deg,
            transparent 32%,
            rgba(230, 222, 207, .055) 46%,
            rgba(230, 222, 207, .085) 52%,
            rgba(230, 222, 207, .055) 58%,
            transparent 72%
        );
        transform: translateX(-100%);
        /* LINEAR, not ease-in-out. Measured 24 Aug: with easing over a
           -100% -> 100% travel the sheen crawls 17px in the first eighth of the
           cycle and 113px in the fourth. Both slow ends sit OFF the card where
           nothing is visible, so the whole visible pass was a fast blur followed
           by a long dead pause — the "quick flash then it disappears" Francis
           reported. Linear spends the same time per pixel the whole way. */
        animation: sr-skel-sweep 1.8s linear infinite;
    }

    /* Stagger by column so the grid ripples instead of flashing as one sheet.
       Both the placeholder cards AND the covers over real cards need this. The
       covers were missed first time round, so every cover on the page swept in
       perfect unison and the grid read as one big wash rather than per-card. */
    .sr-shop-shelf .s-skel-card:nth-child(3n + 2)::after,
    .sr-shop-shelf .s-loop-card:nth-child(3n + 2) .s-skel-cover::after {
        animation-delay: .15s;
    }

    .sr-shop-shelf .s-skel-card:nth-child(3n + 3)::after,
    .sr-shop-shelf .s-loop-card:nth-child(3n + 3) .s-skel-cover::after {
        animation-delay: .3s;
    }

    /* Crosses in the first 60%, rests for the last 40%. The rest is deliberate:
       a shimmer with no gap reads as agitated. */
    @keyframes sr-skel-sweep {
        0%   { transform: translateX(-100%); }
        60%  { transform: translateX(100%); }
        100% { transform: translateX(100%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .sr-shop-shelf .s-skel-card::after,
        .sr-shop-shelf .s-skel-cover::after {
            animation: none;
            opacity: .5;
            transform: none;
        }
    }

    /* ---------------------------------------------------------------------
     * Whole-card skeleton while a card's image loads (24 Aug 2026)
     *
     * Product images are native loading="lazy". On a slow line the server-
     * rendered card paints instantly with its eyebrow, title and price, while
     * the media window stays an empty black box until the file lands and then
     * snaps to a light cream plate. Half a card is uglier than no card.
     *
     * So the whole card is covered by a skeleton until ITS OWN image is ready,
     * then the cover fades and the finished card is revealed in one piece.
     * Francis's call, 24 Aug: skeleton the card, not just the picture.
     *
     * The cover is an overlay, so the real card underneath is untouched — same
     * markup, same text, same link, still there for anything that does not run
     * this JS. It is only added to cards whose image has NOT already arrived,
     * so a cached grid never flashes a skeleton it does not need.
     * ------------------------------------------------------------------ */

    .sr-shop-shelf .sr-pcard {
        position: relative;
    }

    .sr-shop-shelf .s-skel-cover {
        position: absolute;
        inset: 0;
        z-index: 6;
        display: flex;
        flex-direction: column;
        border-radius: 14px;
        overflow: hidden;
        background: radial-gradient(122% 82% at 50% 0%, #16110b 0%, #0c0907 58%);
        opacity: 1;
        transition: opacity .4s ease;
        pointer-events: none;
    }

    .sr-shop-shelf .s-skel-cover.is-gone {
        opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .sr-shop-shelf .s-skel-cover {
            transition: none;
        }
    }

    /* ---------------------------------------------------------------------
     * Touch feedback (24 Aug 2026)
     *
     * The OS paints its own highlight over any control you touch, in the system
     * accent colour, so it looks different on every handset and matches the site
     * palette on none of them.
     *
     * NOTE: this is NOT what caused the pink filter drawer. That was a global
     * button:hover / button:focus rule, handled below. This block was written
     * while chasing that bug down the wrong path — it is kept because clearing
     * the OS highlight is worth doing on its own, not because it fixed anything.
     *
     * -webkit-tap-highlight-color INHERITS, so one declaration on the shelf root
     * covers every link, button, chip and card inside it.
     *
     * It is replaced, not just removed. Killing the flash outright would leave a
     * touch user with no confirmation that a tap registered, which is worse than
     * the wrong colour. Each control below gets a short pressed state in the
     * site's own gold instead.
     * ------------------------------------------------------------------ */

    .sr-shop-shelf {
        -webkit-tap-highlight-color: transparent;
    }

    /* THE PINK BLOCK.
     *
     * A global rule in the stacked stylesheets does this to every button on the
     * site:
     *
     *   [type="button"]:focus, [type="button"]:hover,
     *   [type="submit"]:focus,  [type="submit"]:hover,
     *   button:focus, button:hover {
     *       background-color: rgb(204, 51, 102);   #CC3366
     *       color: #fff;
     *   }
     *
     * On a desktop it flashes past on hover. On a phone the hover state STICKS
     * after a tap, so the whole filter drawer stayed magenta — which is the bug
     * Francis reported. It was never the OS tap highlight; that was a wrong
     * first guess, and clearing it did not help because focus and hover, not
     * touch, are what trigger this.
     *
     * Restated here for every button in the shelf. Three classes beats the
     * global rule's (0,1,1) comfortably, and :focus-visible keeps a real
     * keyboard outline for anyone tabbing through. */
    .sr-shop-shelf button:hover,
    .sr-shop-shelf button:focus,
    .sr-shop-shelf button:active,
    .sr-shop-shelf [type="button"]:hover,
    .sr-shop-shelf [type="button"]:focus,
    .sr-shop-shelf [type="submit"]:hover,
    .sr-shop-shelf [type="submit"]:focus {
        background-color: transparent;
        color: inherit;
    }

    /* The apply-filters bar is the one button that SHOULD carry a fill, so it
       gets its own colours back rather than inheriting the blanket reset. */
    .sr-shop-shelf .s-pending-filter-submit:hover,
    .sr-shop-shelf .s-pending-filter-submit:focus,
    .sr-shop-shelf .s-pending-filter-submit:active {
        background-color: var(--sr-gold-bright);
        color: var(--sr-bg);
    }

    .sr-shop-shelf button:focus-visible,
    .sr-shop-shelf a:focus-visible {
        outline: 2px solid var(--sr-gold-bright);
        outline-offset: 3px;
    }

    .sr-shop-shelf .s-mobile-filter-button:active {
        background: rgba(156, 126, 72, .1);
    }

    .sr-shop-shelf .s-mobile-filter-button:active .s-mobile-filter-action {
        background: rgba(156, 126, 72, .18);
        border-color: rgba(182, 152, 105, .55);
    }

    .sr-shop-shelf .s-cat-list a:active,
    .sr-shop-shelf .s-cat-sub a:active {
        color: var(--sr-gold-bright);
    }

    .sr-shop-shelf .s-pager-num:active,
    .sr-shop-shelf .s-pager-step:active,
    .sr-shop-shelf .s-filter-reset:active,
    .sr-shop-shelf .s-view a:active {
        color: var(--sr-gold-bright);
        border-color: var(--sr-line-strong);
    }

    .sr-shop-shelf .s-pending-filter-submit:active {
        filter: brightness(.92);
    }

    /* The card is a shared component, so its pressed state stays inside the
       shelf scope rather than going into product-card.css. */
    .sr-shop-shelf .sr-pcard:active {
        border-color: rgba(182, 152, 105, .42);
    }
