/* =========================================================================
   HISTORICUM — SHOP NAV (FINAL, consolidated)
   Single source of truth for the AJAX shop navigation menu (categories +
   filters) and the section controls. Enqueued AFTER shop.css so it is the
   last word and the legacy scattered rules can't interrupt. Small file =
   deploys reliably.  Desktop + mobile.
   ========================================================================= */

/* ---- The whole catnav MENU is WHITE (desktop + mobile) ----------------- */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav,
body.historicum-shop-page .h-shop-catnav .h-catnav-group,
body.historicum-shop-page .h-shop-catnav .h-catnav-acc-item,
body.historicum-shop-page .h-shop-catnav .h-catnav-acc-sub,
body.historicum-shop-page .h-shop-catnav .h-filter-acc-sub,
body.historicum-shop-page .h-shop-catnav .h-catnav-rows,
body.historicum-shop-page .h-shop-catnav .h-shop-filter-group {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Rows themselves stay white (no cream/yellow fills), both categories and
   filter options. The black CATEGORIES / FILTERS header bars are left alone. */
body.historicum-shop-page .h-shop-catnav .h-catnav-row,
body.historicum-shop-page .h-shop-catnav .h-filter-acc-toggle,
body.historicum-shop-page .h-shop-catnav .h-subnav-link {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* =========================================================================
   Filters should LOOK like the category rows (same Cormorant 19px / weight
   700 / #141414, same 37px indent, count pushed to the right) WITHOUT changing
   the interactive flex layout the accordion relies on. We only restyle text,
   indent and count alignment — we do NOT change display/structure, so the
   Material/Type/Age toggles still expand and the option buttons still click.
   The repeated `.h-shop-catnav` only raises specificity so the text rules win
   over the scattered legacy ones; it changes nothing structural.
   ========================================================================= */

/* ---- Filter group headers (Material / Type / Age): indent + font -------- */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-shop-filter-group .h-filter-acc-toggle {
    padding-left: 37px !important;   /* align with category rows */
    padding-right: 18px !important;
}
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-shop-filter-group .h-filter-acc-toggle .h-shop-filter-group-label,
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-shop-filter-group .h-filter-acc-toggle .h-catnav-label {
    font-family: var(--h-font-cormorant, 'Cormorant Garamond', serif) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #141414 !important;
}

/* ---- Filter options (Steel, Titanium, XIII …): COMPACT chips ------------- *
   Each chip sizes to its own text ("Steel [294]"), they flow left-to-right and
   wrap onto as many rows as needed, left-aligned. The full chip is always
   visible (never clipped/cut off). White when not pressed, accent when active.
   Text size matches the category rows. ----------------------------------- */

/* The options container: a left-aligned wrapping row of chips. */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-catnav-rows {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 12px 12px 16px !important;   /* chips start near the left edge */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

/* The chip itself — width fits content, never clipped. */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-subnav-link {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 5px 13px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    border: 1px solid rgba(20, 20, 20, 0.28) !important;
    border-radius: 999px !important;
    font-family: var(--h-font-cormorant, 'Cormorant Garamond', serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #141414 !important;
    text-align: left !important;
}

/* White when NOT pressed (active keeps the accent below). */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-subnav-link:not(.is-active) {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Active/pressed chip — clearly highlighted. */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-subnav-link.is-active {
    background-color: var(--h-accent, #f2cc00) !important;
    border-color: var(--h-accent, #f2cc00) !important;
    color: #141414 !important;
}

/* Label: no clipping, full text visible. */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-subnav-link .h-catnav-label {
    font-family: var(--h-font-cormorant, 'Cormorant Garamond', serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: inherit !important;
    text-align: left !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Count sits right after the label (e.g. "Steel 294"). No brackets, and the
   number is styled EXACTLY like the category count — we add no font/opacity
   overrides, so it inherits the same `.h-catnav-count` look the categories use. */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-subnav-link .h-catnav-meta {
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
}
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-filter-acc-sub .h-subnav-link .h-catnav-count {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
}

/* ---- Categories rows (Swords, Axes, Polearms …): ONLY match the filter chip
        text (Cormorant 18px / weight 600). Layout is left exactly as it was —
        no display/grid/alignment overrides (those broke the row). ------------- */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-catnav-rows.h-catnav-accordion .h-catnav-row--category,
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-catnav-rows.h-catnav-accordion .h-catnav-row--category .h-catnav-label {
    font-family: var(--h-font-cormorant, 'Cormorant Garamond', serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* ---- Long dash before each category label — same 12px × 1px bar the filter
        rows use. Placed INSIDE the label (inline) so it doesn't disturb the
        row's grid layout. --------------------------------------------------- */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-catnav-rows.h-catnav-accordion .h-catnav-row--category .h-catnav-label::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 1px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    background: #141414 !important;
}

/* ---- Fix the indented SUB-ROWS (Swords, Axes, Polearms …). They use a
        3-column grid (dash | label | count), but the generic category rules
        force the label into column 1 and the count into column 2, which pushes
        the count onto a second line (bottom). Put them back in the right
        columns so the label and count sit on ONE vertically-centred line. ---- */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-catnav-rows.h-catnav-accordion .h-catnav-subrow > .h-catnav-label {
    grid-column: 2 !important;
    align-self: center !important;
}
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-catnav-rows.h-catnav-accordion .h-catnav-subrow > .h-catnav-meta {
    grid-column: 3 !important;
    align-self: center !important;
}
/* Suppress the sub-row's own (column-1) dash pseudo-element so we don't get two
   dashes — the single dash before the label (above) is the one that shows. */
body.historicum-shop-page .h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav.h-shop-catnav .h-catnav-rows.h-catnav-accordion .h-catnav-subrow::before {
    display: none !important;
}

/* ---- Desktop: more breathing room between the FILTERS header and the
        first filter group. ------------------------------------------------ */
@media (min-width: 1400px) and (hover: hover) and (pointer: fine) {
    body.historicum-shop-page .h-shop-catnav .h-catnav-filterby {
        display: block !important;
        margin-top: 24px !important;
        padding-top: 4px !important;
    }
}

/* ---- Mobile: stack the item-count above the Sort-by control so they line
        up nicely. ---------------------------------------------------------- */
@media (max-width: 1399px), (hover: none) and (pointer: coarse) {
    body.historicum-shop-page .h-shop-section-heading .h-shop-controls,
    body.historicum-shop-page .h-shop-section-heading .h-shop-section-controls {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}