/* =========================================================
   CATEGORY PAGE
   Uses design tokens from Nav.css :root
   ========================================================= */

.category-page {
    max-width: var(--container, 1400px);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Header ---- */
.category-header {
    padding: 56px 0 32px;
    text-align: center;
    border-bottom: 1px solid var(--line, #e5e7eb);
    margin-bottom: 32px;
}
.category-header .eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--jb-blue, #00a9eb);
    margin-bottom: 14px;
}
.category-header h1,
.category-header .category-title,
.category-header h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink, #1a1a1a);
    margin-bottom: 12px;
    line-height: 1.1;
}
.category-header h1.category-title { margin-top: 0; }
.category-blurb {
    font-size: 1rem;
    color: var(--ink-3, #64748b);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
}

.main-container { padding-bottom: 80px; }
/* ============================================================
   SAVE PRODUCT BUTTON — sits on top of product card image
   ============================================================ */
.product-card { position: relative; } /* ensure stacking context */

.save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    color: var(--ink-2, #555);
    cursor: pointer;
    transition: background 0.18s ease,
                color 0.18s ease,
                transform 0.18s ease,
                border-color 0.18s ease;
}
.save-btn:hover {
    background: #fff;
    color: var(--jb-blue, #3aa3ce);
    border-color: var(--jb-blue, #3aa3ce);
    transform: scale(1.06);
}
.save-btn:active { transform: scale(0.94); }

.save-btn.is-saved {
    background: var(--jb-blue, #3aa3ce);
    border-color: var(--jb-blue, #3aa3ce);
    color: #fff;
}
.save-btn.is-saved:hover {
    background: #fff;
    color: var(--jb-blue, #3aa3ce);
}

/* Brief pulse when state changes */
.save-btn.is-pulsing {
    animation: jb-save-pulse 0.4s ease;
}
@keyframes jb-save-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Dark theme — soften the white pill */
[data-theme="trade"] .save-btn {
    background: rgba(40, 40, 40, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}
[data-theme="trade"] .save-btn:hover {
    background: #2a2a2a;
    color: var(--jb-blue, #3aa3ce);
}


/* =========================================================
   FILTER / SEARCH BAR
   ========================================================= */
.controls-wrapper {
    background: #fff;
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px solid var(--line, #e5e7eb);
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}

/* Top row: search + (mobile) filters button. On desktop the button is hidden. */
.controls-top {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}

.controls-flex {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.search-mini {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.search-mini input {
    width: 100%;
    padding: 11px 38px 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--line, #e5e7eb);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--paper, #f4f4f7);
    color: var(--ink, #1a1a1a);
    outline: none;
    transition: border-color 180ms ease,
                background 180ms ease,
                box-shadow 180ms ease;
}
.search-mini input:focus {
    border-color: var(--jb-blue, #00a9eb);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 169, 235, 0.12);
}
.search-mini i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3, #64748b);
    font-size: 0.9rem;
    pointer-events: none;
}

/* Filters toggle button — desktop hides it via @media query below */
.filters-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
    position: relative;
    flex-shrink: 0;
}
.filters-toggle:hover {
    border-color: var(--jb-blue, #00a9eb);
    color: var(--jb-blue, #00a9eb);
}
.filters-toggle.is-active {
    background: var(--jb-blue, #00a9eb);
    color: #fff;
    border-color: var(--jb-blue, #00a9eb);
}
.filters-toggle i { font-size: 0.95rem; }
.filters-badge {
    background: var(--jb-blue, #00a9eb);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.filters-toggle.is-active .filters-badge {
    background: #fff;
    color: var(--jb-blue, #00a9eb);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 140px;
    min-width: 130px;
}
.filter-group label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--ink-3, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.filter-group select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line, #e5e7eb);
    background: var(--paper, #f4f4f7);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
    transition: border-color 180ms ease, background-color 180ms ease;
}
.filter-group select:hover { border-color: var(--ink-3, #64748b); }
.filter-group select:focus {
    border-color: var(--jb-blue, #00a9eb);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 169, 235, 0.12);
}

.btn-reset {
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jb-blue, #00a9eb);
    background: #fff;
    border: 2px solid var(--jb-blue, #00a9eb);
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 180ms ease, color 180ms ease;
    margin-bottom: 1px;
}
.btn-reset:hover { background: var(--jb-blue, #00a9eb); color: #fff; }

/* =========================================================
   COUNT STRIP
   ========================================================= */
.count-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: var(--ink-3, #64748b);
    margin: 16px 4px 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.count-strip strong { color: var(--ink, #1a1a1a); font-weight: 700; }
.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jb-blue, #00a9eb);
    font-weight: 700;
    font-size: 0.85rem;
    transition: gap 180ms ease;
}
.view-all-link:hover { gap: 10px; }

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

/* =========================================================
   PRODUCT CARD
   Card structure ensures equal heights:
   - title:       fixed min-height (~2 lines)
   - price-row:   fixed height
   - specs-list:  fixed height (regardless of how many rows)
   - view-btn:    pinned at bottom via margin-top: auto
   ========================================================= */
.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 320ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 320ms ease,
                border-color 320ms ease;
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--jb-blue, #00a9eb);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}

/* Image area */
.img-container {
    position: relative;
    aspect-ratio: 4 / 3;
/*    background: var(--paper, #f4f4f7);*/
    background: #fff;
    overflow: hidden;
}
.img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2rem 1rem 0px 1rem;
    transition: transform 480ms ease;
}
.product-card:hover .img-container img { transform: scale(1.04); }

.img-placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 2.75rem;
}

/* Fire rating overlay */
.product-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    padding: 6px 10px 6px 8px;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid var(--spec-fire-text, #c83e30);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.product-tag i {
    display: none;   /* drop the flame — the stripe carries the meaning */
}

/* Card body */
.product-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 22px;
}

.product-details h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink, #1a1a1a);
    margin: 0 0 16px;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   PRICE — now the dominant element
   ========================================================= */
.price-row {
    background: linear-gradient(135deg, rgba(0,169,235,0.06), rgba(0,169,235,0.02));
    border: 1px solid rgba(0,169,235,0.15);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
    line-height: 1.15;
    transition: background 200ms ease, border-color 200ms ease;
}
.product-card:hover .price-row {
    background: linear-gradient(135deg, rgba(0,169,235,0.12), rgba(0,169,235,0.04));
    border-color: rgba(0,169,235,0.3);
}

.price-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--jb-blue-deep, #084278);
    font-weight: 800;
    margin-bottom: 4px;
}
.big-price {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--ink, #1a1a1a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color 180ms ease;
}
.product-card:hover .big-price { color: var(--jb-blue, #00a9eb); }
.vat-small {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-3, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;

    margin-left: 8px;
    vertical-align: middle;
}
.big-price-poa {
    font-size: 1.4rem;
    color: var(--jb-blue-deep, #084278);
    letter-spacing: 0.04em;
}

/* =========================================================
   BESPOKE FLAG — "made to measure" status line under the price box.
   Same visual language as the fire-rating tag: a thin coloured stripe
   + micro-uppercase, no filled block. Blue = status/information;
   orange stays reserved for actionable controls.
   ========================================================= */
.bespoke-flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -6px 0 12px;
    padding: 2px 0 2px 9px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3, #64748b);
    background: transparent;
    border: 0;
    border-left: 3px solid var(--jb-blue, #00a9eb);
    border-radius: 0;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.bespoke-flag i {
    font-size: 0.7rem;
    flex-shrink: 0;
    color: var(--jb-blue, #00a9eb);
}

/* =========================================================
   SPECS LIST — fixed height for consistent card alignment
   ========================================================= */
.specs-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line-soft, rgba(0, 0, 0, 0.06));

    /* Reserve space for up to 4 spec rows so cards align regardless of content */
    min-height: 108px;
}
.specs-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--ink-3, #64748b);
    padding: 3px 0;
    line-height: 1.35;
}
.specs-list i {
    width: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.specs-list .spec-highlight {
    color: var(--jb-blue, #00a9eb);
    font-weight: 700;
}
.specs-list .spec-highlight i { color: var(--jb-blue, #00a9eb); }

/* =========================================================
   VIEW BUTTON — pinned to bottom of card
   ========================================================= */
.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--paper, #f4f4f7);
    color: var(--ink, #1a1a1a);
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid var(--line, #e5e7eb);
    margin-top: auto; /* pushes button to bottom */
    transition: background 180ms ease,
                color 180ms ease,
                border-color 180ms ease,
                gap 180ms ease;
}
.view-btn i {
    font-size: 0.78rem;
    transition: transform 320ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-card:hover .view-btn {
    background: var(--jb-blue, #00a9eb);
    color: #fff;
    border-color: var(--jb-blue, #00a9eb);
    gap: 12px;
}
.product-card:hover .view-btn i { transform: translateX(2px); }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 72px 24px;
    background: var(--paper-2, #f8f8fa);
    border-radius: 24px;
    border: 1px dashed var(--line, #e5e7eb);
}
.empty-state i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 18px;
    display: block;
}
.empty-state h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--ink, #1a1a1a);
}
.empty-state p {
    color: var(--ink-3, #64748b);
    margin-bottom: 22px;
    font-size: 0.95rem;
}
.empty-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jb-blue, #00a9eb);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    transition: transform 180ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 180ms ease;
}
.empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 169, 235, 0.35);
}
.empty-cta-secondary {
    background: #fff;
    color: var(--ink, #1a1a1a);
    border: 1px solid var(--line, #e5e7eb);
}
.empty-cta-secondary:hover {
    background: var(--paper, #f4f4f7);
    box-shadow: none;
    color: var(--jb-blue, #00a9eb);
    border-color: var(--jb-blue, #00a9eb);
}

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination {
    margin-top: 36px;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line, #e5e7eb);
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink, #1a1a1a);
    font-weight: 700;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    transition: background 180ms ease,
                color 180ms ease,
                border-color 180ms ease,
                transform 180ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.page-link:hover {
    background: var(--paper, #f4f4f7);
    border-color: var(--jb-blue, #00a9eb);
    color: var(--jb-blue, #00a9eb);
}
.page-link.active {
    background: var(--jb-blue, #00a9eb);
    color: #fff;
    border-color: var(--jb-blue, #00a9eb);
    cursor: default;
}
.page-link.active:hover { transform: none; }
.page-nav i { font-size: 0.75rem; }
.page-ellipsis {
    padding: 0 6px;
    color: var(--ink-3, #64748b);
    font-weight: 700;
    user-select: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    /* Show the Filters toggle button */
    .filters-toggle { display: inline-flex; }

    /* Tighten the top row: search keeps shrinking, button is fixed */
    .controls-top { margin-bottom: 0; }

    /* Hide all filter dropdowns until toggled open */
    .controls-flex {
        max-height: 0;
        overflow: hidden;
        margin: 0;
        opacity: 0;
        gap: 12px;
        transition: max-height 320ms ease,
                    opacity 240ms ease,
                    margin-top 320ms ease,
                    padding-top 320ms ease;
        padding-top: 0;
    }
    .controls-flex.is-open {
        max-height: 1200px;
        opacity: 1;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line, #e5e7eb);
    }

    .filter-group { flex-basis: calc(50% - 6px); }
}

@media (max-width: 600px) {
    .category-page { padding: 0 16px; }
    .category-header { padding: 32px 0 20px; margin-bottom: 24px; }
    .controls-wrapper { padding: 14px; }
    .filter-group { flex-basis: 100%; }

    .filters-toggle span { display: none; } /* icon + badge only on tiny screens */
    .filters-toggle { padding: 0 14px; }

    .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 14px;
}
    .product-details { padding: 16px; }
    .product-details h3 { font-size: 0.92rem; min-height: 0; -webkit-line-clamp: 3; line-clamp: 3; }
    .specs-list { min-height: 80px; }
    .specs-list li { font-size: 0.75rem; }
    .big-price { font-size: 1.4rem; }
    .price-row { padding: 10px 12px; }
    .view-btn { padding: 10px; font-size: 0.8rem; }
    .count-strip { font-size: 0.8rem; }
}

/* =========================================================
   DARK THEME (trade) — product cards
   Cards are light by default. The title/price use var(--ink),
   which flips light on trade — so the fix is to give the card a
   dark surface (not to re-pin the text). The image tile stays
   white so product shots keep their backdrop.
   ========================================================= */
[data-theme="trade"] .product-card {
    background: var(--paper-2, #232323);
    border-color: var(--line, #2c2c2c);
}
[data-theme="trade"] .product-card:hover {
    border-color: var(--jb-blue, #3aa3ce);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
}

/* Fire-rating tag sits on the white image tile — keep its text dark */
[data-theme="trade"] .product-tag {
    color: #1a1a1a;
}

/* Price box: the faint light-blue tint disappears on dark — strengthen it */
[data-theme="trade"] .price-row {
    background: rgba(58, 163, 206, 0.12);
    border-color: rgba(58, 163, 206, 0.28);
}
[data-theme="trade"] .product-card:hover .price-row {
    background: rgba(58, 163, 206, 0.20);
    border-color: rgba(58, 163, 206, 0.40);
}
[data-theme="trade"] .price-label { color: var(--jb-blue, #3aa3ce); }

/* Bespoke flag: stripe treatment on dark — lift the text, keep the blue rule */
[data-theme="trade"] .bespoke-flag {
    background: transparent;
	border-left-color: var(--jb-blue, #3aa3ce);
	color: var(--ink-2, #a8a8a8);
}

/* Specs: lift the hairline + text for legibility on the dark card */
[data-theme="trade"] .specs-list {
    border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="trade"] .specs-list li { color: var(--ink-2, #a8a8a8); }

/* =========================================================
   DARK THEME (trade) — filter / search bar
   The wrapper was hardcoded white, so it stayed white behind the
   dark inputs (the "zebra" look). Give it the raised dark surface;
   inputs keep var(--paper) so they read as inset.
   ========================================================= */
[data-theme="trade"] .controls-wrapper {
    background: var(--paper-2, #232323);
    border-color: var(--line, #2c2c2c);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Inputs flash to #fff on focus by default — white-on-white while
   typing on dark. Keep the focused field dark. */
[data-theme="trade"] .search-mini input:focus {
    background: var(--paper, #1a1a1a);
}
[data-theme="trade"] .filter-group select:focus {
    background-color: var(--paper, #1a1a1a);
}

/* Mobile filters toggle + reset button: drop the white fill.
   Guarded with :not() so the active / hover states still win. */
[data-theme="trade"] .filters-toggle:not(.is-active) {
    background: var(--paper, #1a1a1a);
}
[data-theme="trade"] .btn-reset:not(:hover) {
    background: transparent;
}

/* =========================================================
   DARK THEME (trade) — pagination
   Inactive page links were hardcoded white. Give them the dark
   surface; the .active link keeps its blue fill (guarded by :not).
   ========================================================= */
[data-theme="trade"] .page-link:not(.active) {
    background: var(--paper-2, #232323);
    border-color: var(--line, #2c2c2c);
}
[data-theme="trade"] .page-link:not(.active):hover {
    background: var(--paper, #1a1a1a);
    border-color: var(--jb-blue, #3aa3ce);
}

/* =============================================================
   Category SEO content — intro (above grid), body + FAQ (below).
   Populated from category_seo via manage_category_seo.php.
   ============================================================= */
.category-intro {
    font-size: 1.05rem;
    color: var(--ink-3, #64748b);
    /* Full width to line up with the product grid (no narrow cap). */
    margin: 0;
    line-height: 1.65;
}
.category-intro p { margin: 0 0 0.6em; }
.category-intro p:last-child { margin-bottom: 0; }

.category-seo-body {
    /* Full width, flush with the product grid above (top & bottom match). */
    margin: 56px 0 8px;
    padding-top: 40px;
    border-top: 1px solid var(--line, #e5e7eb);
}
.category-body-copy {
    color: var(--ink-2, #4b4b4b);
    line-height: 1.7;
    font-size: 1rem;
}
.category-body-copy h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink, #1a1a1a);
    margin: 1.6em 0 0.5em;
    line-height: 1.2;
}
.category-body-copy h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink, #1a1a1a);
    margin: 1.3em 0 0.4em;
}
.category-body-copy p { margin: 0 0 1em; }
.category-body-copy ul,
.category-body-copy ol { margin: 0 0 1em 1.2em; padding: 0; }
.category-body-copy li { margin: 0 0 0.35em; }
.category-body-copy a { color: var(--jb-blue-deep, #084278); text-decoration: underline; }
.category-body-copy a:hover { color: var(--jb-blue, #00a9eb); }
.category-body-copy table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; }
.category-body-copy th,
.category-body-copy td { border: 1px solid var(--line, #e5e7eb); padding: 8px 10px; text-align: left; }

/* FAQ accordion (native <details>) — also powers FAQPage schema. */
.category-faq { margin-top: 44px; }
.category-faq > h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink, #1a1a1a);
    margin: 0 0 16px;
}
.category-faq .faq-item {
    border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--r-sm, 10px);
    padding: 4px 16px;
    margin-bottom: 10px;
    background: var(--paper-2, #f8f8fa);
}
.category-faq .faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink, #1a1a1a);
    padding: 12px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.category-faq .faq-item summary::-webkit-details-marker { display: none; }
.category-faq .faq-item summary::after {
    content: "+";
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--jb-blue, #00a9eb);
    line-height: 1;
}
.category-faq .faq-item[open] summary::after { content: "\2212"; }
.category-faq .faq-a {
    padding: 0 0 14px;
    color: var(--ink-2, #4b4b4b);
    line-height: 1.65;
}
@media (max-width: 600px) {
    .category-seo-body { margin-top: 40px; padding-top: 28px; }
}

/* =========================================================
   SIZE SLIDER  (migration 0030)
   ---------------------------------------------------------
   Two handles either side of a fixed centre: width sweeps
   left, height sweeps right, and the rectangle between them
   is the opening being described. Sits inside the filter
   card, below the dropdowns.

   The width track is reversed (direction: rtl) so dragging
   AWAY from the centre widens the opening — the handle and
   the rectangle move the same way, which is the whole point
   of the layout.
   ========================================================= */
.size-slider {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--line, #e2e8f0);
}

.size-slider__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}
.size-slider__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3, #64748b);
}
.size-slider__title i { color: var(--jb-blue, #3aa3ce); margin-right: 4px; }
.size-slider__readout {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #1e293b);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.size-slider.is-active .size-slider__readout { color: var(--jb-blue, #3aa3ce); }
.size-slider__clear {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--ink-3, #64748b);
    cursor: pointer;
    text-decoration: underline;
}
.size-slider__clear:hover { color: var(--jb-blue, #3aa3ce); }
.size-slider__clear[hidden] { display: none; }

.size-slider__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

.size-slider__axis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Label and value ride together at the CENTRE end of their track, either side
   of the preview box, so the two numbers read as a pair rather than being flung
   out to opposite edges of the filter card. */
.size-slider__axis-head { display: flex; align-items: baseline; gap: 6px; }
.size-slider__axis--w .size-slider__axis-head { justify-content: flex-end; }
.size-slider__axis--h .size-slider__axis-head { justify-content: flex-start; }
.size-slider__axis-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-4, #94a3b8);
}
/* The thumb stops short of the centre rather than running into the preview
   box — at the innermost stop it would otherwise sit right on top of it. */
.size-slider__axis--w .size-slider__range { margin-right: 13px; }
.size-slider__axis--h .size-slider__range { margin-left: 13px; }
.size-slider__axis--w .size-slider__range { direction: rtl; }
.size-slider__val {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-2, #4b4b4b);
    font-variant-numeric: tabular-nums;
}

/* The opening, drawn to scale against the largest size stocked. */
.size-slider__stage {
    position: relative;
    width: 74px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.size-slider__rect {
    border: 2px solid var(--jb-blue, #3aa3ce);
    border-radius: 3px;
    background: rgba(58, 163, 206, 0.09);
    transition: width 0.12s ease-out, height 0.12s ease-out;
    min-width: 12px;
    min-height: 12px;
}
.size-slider__centre {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--jb-blue, #3aa3ce);
}

/* Range inputs need their appearance resetting per-engine; the thumb
   selectors cannot be combined in one rule or the whole block is dropped. */
.size-slider__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--line, #e2e8f0);
    outline: none;
    margin: 3px 0 1px;
    cursor: pointer;
}
.size-slider__range:focus-visible { outline: 2px solid var(--jb-blue, #3aa3ce); outline-offset: 4px; }
.size-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--jb-blue, #3aa3ce);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    cursor: grab;
}
.size-slider__range::-webkit-slider-thumb:active { cursor: grabbing; }
.size-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--jb-blue, #3aa3ce);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    cursor: grab;
}


/* An axis the other one has narrowed to a single stop: this width is only made
   in that one height, so there is nothing left to drag. Dimmed rather than
   disabled, so it stays focusable and Clear is still the way back out. */
.size-slider__range.is-locked { opacity: 0.45; cursor: default; }
.size-slider__range.is-locked::-webkit-slider-thumb { cursor: default; }
.size-slider__range.is-locked::-moz-range-thumb { cursor: default; }

/* Stacked on narrow screens: the left/right metaphor needs the width. */
@media (max-width: 640px) {
    .size-slider__body { grid-template-columns: 1fr; gap: 10px; }
    .size-slider__axis--w .size-slider__axis-head { justify-content: flex-start; }
    .size-slider__axis--w .size-slider__range { direction: ltr; margin-right: 0; }
    .size-slider__axis--h .size-slider__range { margin-left: 0; }
    .size-slider__stage { order: -1; margin: 0 auto 4px; }
}