/* ============================================
   KFNE — WordPress / WooCommerce additions
   Appended on top of main.css to handle WP/WC-specific markup.
   ============================================ */

/* Cart count badge */
header.home section.top nav.top-links ul.nav.nav-tl li a.shoppingcart {
    position: relative;
}
header.home section.top nav.top-links ul.nav.nav-tl li a.shoppingcart .cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--kfneblue);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
}
header.home section.top nav.top-links ul.nav.nav-tl li a.shoppingcart[data-count="0"] .cart-count {
    display: none;
}

/* WooCommerce loop — keep the existing .product-list styling but ensure
   each <li> inherits the same layout when WooCommerce adds extra classes */
ul.products.product-list li.product {
    width: 25%;
}

/* WooCommerce: standard buttons, fields, etc. Use brand colors. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--kfneblue);
    color: var(--white);
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: var(--1br);
    text-decoration: none;
    transition: var(--transition-all);
    border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background: var(--black);
}

/* Single product page */
.woocommerce div.product {
    max-width: var(--inwidth);
    margin: 4rem auto;
}
.woocommerce div.product .product_title {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: -1pt;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--dark-gray);
    font-size: 1.8rem;
    font-weight: 600;
}

/* Shop archive — header */
.woocommerce-products-header {
    max-width: var(--inwidth);
    margin: 4rem auto 2rem;
    text-align: center;
}
.woocommerce-products-header .page-title {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: -5%;
}

/* WooCommerce content wrapper */
section.content.woocommerce-page {
    /* padding: 2rem 0 var(--section-margin); */
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border: 1px solid var(--dark-gray-border);
    background: var(--main-bg);
    margin: 2rem auto;
    max-width: var(--inwidth);
}

/* Result count + ordering on shop page */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    color: var(--gray);
    font-size: 1rem;
    margin: 2rem 0;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    gap: 0.5rem;
    display: flex;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: 1px solid var(--gray-border);
    border-radius: var(--1br);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--dark-gray);
    color: var(--white);
}

/* Comment / review form alignment */
.comment-respond,
.comments-area {
    max-width: var(--inwidth);
    margin: 4rem auto;
}

/* Search form */
.search-form {
    display: flex;
    gap: 1rem;
    max-width: 600px;
    margin: 2rem auto;
}
.search-form .search-field {
    flex: 1;
    padding: 1rem;
    border: 1px solid var(--gray-border);
    border-radius: var(--1br);
    font-size: 1rem;
}
.search-form .search-submit {
    background: var(--dark-gray);
    color: var(--white);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--1br);
    cursor: pointer;
}

/* Single page/post styles */
section.content.single-page,
section.content.single-post {

}
section.content.single-page .entry-title,
section.content.single-post .entry-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 2rem;
}
section.content.single-post .entry-meta {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}
section.content.single-page .entry-content,
section.content.single-post .entry-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* 404 page */
section.content.error-404 {
    text-align: center;
    padding: 8rem 2rem;
    max-width: 800px;
}
section.content.error-404 h3 {
    font-size: 6rem;
    font-weight: 900;
}

/* Screen reader text utility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* WP admin bar fix
body.admin-bar header.home section.top {
    margin-top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar header.home section.top {
        margin-top: 46px;
    }
}
*/
/* ============================================
   Single product page — variation swatches & selectors
   ============================================ */

/* Container layout for variation options */
section.content.product-details .description-container ul.swatches-select,
section.content.product-details .description-container ul.quantity-select {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Swatches (Color / Metal / Finish) — circular chips */
section.content.product-details .description-container ul.swatches-select li {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--gray-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-all);
    background: var(--main-bg);
}
section.content.product-details .description-container ul.swatches-select li.selected {
    border: 2px solid var(--kfneblue);
}
section.content.product-details .description-container ul.swatches-select li label {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: block;
}
section.content.product-details .description-container ul.swatches-select li input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Quantity / non-swatch options — text chips */
section.content.product-details .description-container ul.quantity-select li {
    list-style: none;
}
section.content.product-details .description-container ul.quantity-select li label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--gray-border);
    cursor: pointer;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 8%;
    transition: var(--transition-all);
}
section.content.product-details .description-container ul.quantity-select li label:hover {
    border-color: var(--dark-gray);
}
section.content.product-details .description-container ul.quantity-select li input[type="radio"] {
    accent-color: var(--kfneblue);
    margin: 0;
}
section.content.product-details .description-container ul.quantity-select li.selected label,
section.content.product-details .description-container ul.quantity-select li:has(input:checked) label {
    border-color: var(--kfneblue);
    color: var(--kfneblue);
}

/* Hidden WC variation info bubble — not used in this design but keep it out of the way */
section.content.product-details .woocommerce-variation {
    margin: 1rem 0;
}
section.content.product-details .woocommerce-variation-availability,
section.content.product-details .woocommerce-variation-description {
    color: var(--gray);
    font-size: 1rem;
    margin: 0.5rem 0;
}

/* Out-of-stock state */
section.content.product-details .description-container .stock.out-of-stock {
    color: var(--kfneblue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Hide WC quantity input by default (the design uses the "1 Piece / Pair"
   radios instead); themes that need a numeric input can override this. */
section.content.product-details .description-container form.cart .quantity {
    display: none;
}

/* Active thumbnail */
section.content.product-details .photo-contatiner ul.thumbs li {
    cursor: pointer;
    transition: var(--transition-all);
}
section.content.product-details .photo-contatiner ul.thumbs li.active,
section.content.product-details .photo-contatiner ul.thumbs li:hover {
    background: rgba(0, 24, 123, 0.04);
}
section.content.product-details .photo-contatiner ul.thumbs li img {
    max-width: 80px;
    height: auto;
    display: block;
}

/* Reviews block — keep the WC comment form quiet */
section.content.additional.reviews ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
}
section.content.additional.reviews .comment-form {
    max-width: 700px;
}
section.content.additional.reviews .comment-form input[type="text"],
section.content.additional.reviews .comment-form input[type="email"],
section.content.additional.reviews .comment-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--gray-border);
    border-radius: var(--1br);
    font-family: var(--mainfont);
    font-size: 1rem;
    margin-top: 0.5rem;
}
section.content.additional.reviews .comment-form .submit {
    background: var(--kfneblue);
    color: var(--white);
    border: 0;
    padding: 1rem 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

/* Hidden canonical WC variation selects — kept in DOM for WC's JS to read. */
section.content.product-details .description-container .kfne-variation {
    position: relative;
    margin-bottom: 2rem;
}
section.content.product-details .description-container .kfne-variation select.kfne-variation-select {
    /* belt-and-suspenders: PHP also sets inline style; this hides it from
       AT readers that ignore offscreen positioning. */
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* "Clear" link rendered by WC when a variation is chosen */
section.content.product-details .description-container .reset_variations {
    display: inline-block;
    color: var(--gray);
    font-size: 0.9rem;
    text-decoration: underline;
    margin-top: 0.5rem;
    transition: var(--transition-all);
}
section.content.product-details .description-container .reset_variations:hover {
    color: var(--kfneblue);
}

/* ============================================
   Single product — restore original .btnBlue treatment
   The generic .woocommerce button.button.alt rule above intentionally styles
   regular WC buttons (cart, checkout) in dark-gray; the product page's
   add-to-cart keeps the original blue look from main.css. We re-assert
   .btnBlue here with higher specificity than the generic WC rule.
   ============================================ */
.woocommerce button.btnBlue,
.woocommerce button.btnBlue.alt,
.woocommerce input.btnBlue,
.woocommerce input.btnBlue.alt,
section.content.product-details button.btnBlue,
section.content.product-details input.btnBlue {
    background: var(--kfneblue);
    color: var(--white);
    font-family: var(--mainfont);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2rem 3rem;
    border: 0;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    transition: var(--transition-all);
}
.woocommerce button.btnBlue:hover,
.woocommerce button.btnBlue.alt:hover,
.woocommerce input.btnBlue:hover,
section.content.product-details button.btnBlue:hover {
    background: var(--dark-gray);
    color: var(--white);
}
.woocommerce button.btnBlue:disabled,
.woocommerce button.btnBlue.alt:disabled,
.woocommerce button.btnBlue.disabled {
    background: var(--light-gray) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hide the duplicate price WooCommerce renders inside .single_variation —
   we already update the main h5.price in the .head via JS. */
section.content.product-details .single_variation_wrap .woocommerce-variation-price,
section.content.product-details .woocommerce-variation-price {
    display: none !important;
}

/* The .woocommerce-variation container itself can stay (it holds availability
   notices etc.), but tighten its spacing so it doesn't add visual noise when empty. */
section.content.product-details .woocommerce-variation:empty {
    display: none;
}

/* ============================================
   Language switcher slot
   Outputs whatever shortcode the user pasted in Customizer. We don't style
   the inner markup — that's the plugin's job — but we keep the wrapper LI
   from messing up the inline flex layout of the .top-links list.
   ============================================ */

/*

   header.home .lang-switcher.has-dropdown {
       position: relative;
   }
   header.home .lang-dropdown {
       position: absolute;
       top: calc(100% + 0.5rem);
       right: 0;
       background: var(--white);
       border: 1px solid var(--gray-border);
       list-style: none;
       margin: 0;
       padding: 0.5rem 0;
       min-width: 140px;
       display: none;
       z-index: 100;
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   }
   header.home .lang-switcher.is-open .lang-dropdown {
       display: block;
   }
   header.home .lang-dropdown li {
       list-style: none;
       margin: 0;
   }
   header.home .lang-dropdown li a {
       display: block;
       padding: 0.75rem 1rem;
       color: var(--dark-gray);
       text-decoration: none;
       font-size: 0.95rem;
       text-transform: none;
       letter-spacing: normal;
       transition: var(--transition-all);
   header.home .top-links ul.nav-tl li.lang-slot {
       display: flex;
       align-items: center;
   }
   header.home .lang-dropdown li a:hover {
       background: var(--main-bg);
       color: var(--kfneblue);



*/

.trp-language-item {
    padding:0 !important;
    gap:0 !important;
}

li.lang-slot .trp-shortcode-switcher .trp-current-language-item__wrapper {
    width:40px;
}






header.home .top-links ul.nav-tl li.lang-slot {
    display: flex;
    align-items: center;
}
header.home .top-links ul.nav-tl li.lang-slot > * {
    /* Plugins sometimes wrap their switcher in <div> or <span>; make sure
       it sits on the baseline of the other icons. */
    display: inline-flex;
    align-items: center;
}
.trp-shortcode-switcher__wrapper {
  max-height:40px !important;
}

/* ============================================
   Product gallery — lightbox integration
   The .photo wrapper now carries .woocommerce-product-gallery so WC's
   wc-single-product.js can inject the magnifier trigger and open the
   PhotoSwipe overlay. Reset WC's column-based width rules so our flex
   layout in main.css still drives sizing.
   ============================================ */
section.content.product-details .photo.woocommerce-product-gallery {
    /* override WC's default float/width which would break our flex layout */
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    position: relative;   /* needed so zoom lens positions correctly */
}
section.content.product-details .photo .woocommerce-product-gallery__wrapper {
    margin: 0;
    width: 100%;
}
section.content.product-details .photo .woocommerce-product-gallery__image {
    margin: 0;
    width: 100%;
    display: block;
    position: relative;
}
section.content.product-details .photo .woocommerce-product-gallery__image a {
    display: block;
    line-height: 0;
}
section.content.product-details .photo .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    max-height:80vh;
}

/* Lightbox magnifier trigger.
   WC's single-product.js injects this as the first child of
   .woocommerce-product-gallery when wc-product-gallery-lightbox support is on.
   The icon is a default magnifying-glass emoji; we replace it with a clean
   SVG to match the rest of the iconography. */
section.content.product-details .photo .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: block;
    width: 44px;
    height: 44px;
    background: var(--white);
    color: transparent;          /* hide the default 🔍 emoji text */
    font-size: 0;                /* belt-and-suspenders for the emoji */
    line-height: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: var(--transition-all);
    text-decoration: none;
    overflow: hidden;
}
section.content.product-details .photo .woocommerce-product-gallery__trigger::before {
    content: "";
    position: absolute;
    inset: 0;
    /* inline SVG of a magnifier glyph, currentColor */
    background:
        center / 22px 22px no-repeat
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
    transition: var(--transition-all);
}
section.content.product-details .photo .woocommerce-product-gallery__trigger:hover {
    background: var(--kfneblue);
}
section.content.product-details .photo .woocommerce-product-gallery__trigger:hover::before {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
}

/* Cursor over the main image hints at the lightbox affordance. */
section.content.product-details .photo .woocommerce-product-gallery__image {
    cursor: pointer;
}

/* =====================================================================
   SHOP / CATEGORY ARCHIVE — Filter strip & active-filter chips
   =====================================================================
   Used on the shop archive and product category pages, rendered by
   kfne_render_shop_filters() in inc/shop-filters.php.
   Markup:
     <section class="filters"> form > .inner > .filter-bar
       └── <details> per attribute + price + availability + .sort
     <section class="active-filters"> .inner with .chip / .clear

   The strip is a single bordered row of dropdown <details> elements.
   Each panel anchors to the bottom-left of its parent <details>. The
   "Sort" select sits on the right with no panel.
   ===================================================================== */

/* --- Filter strip container --- */
section.filters {
   /* margin: calc(var(--section-margin) / 2) auto 2rem;*/
}
section.filters .inner {
    width: var(--inwidth);
    max-width: var(--mainwidth);
    margin: 0 auto;
    border: 1px solid var(--dark-gray-border);
}
section.filters .filter-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
}
section.filters .filter-bar > * {
    border-right: 1px solid var(--dark-gray-border);
}
section.filters .filter-bar > *:last-child {
    border-right: none;
}

/* --- Filter dropdown: <details> + <summary> --- */
section.filters details {
    flex: 1 1 auto;
    position: relative;
}
section.filters details > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    color: var(--gray);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: var(--transition-all);
}
section.filters details > summary::-webkit-details-marker { display: none; }
section.filters details > summary:hover { color: var(--dark-gray); }
section.filters details[open] > summary {
    color: var(--dark-gray);
    background: var(--white);
}

/* Chevron rotates 180° when panel is open. */
section.filters details > summary .chev {
    width: 8px; height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: var(--transition-all);
    margin-top: -3px;
}
section.filters details[open] > summary .chev {
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* Selected-count badge in the summary (hidden when empty). */
section.filters details > summary .count {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    color: var(--white);
    background: var(--kfneblue);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
}
section.filters details > summary .count:empty { display: none; }

/* --- Filter dropdown panel --- */
section.filters .panel {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    background: var(--white);
    border: 1px solid var(--dark-gray-border);
    border-top: none;
    padding: 2rem 1.5rem;
    z-index: 5;
}
section.filters .panel ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
section.filters .panel label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1rem;
    color: var(--dark-gray);
    cursor: pointer;
}
section.filters .panel label .qty {
    color: var(--gray);
    margin-left: auto;
    font-size: 0.9rem;
}

/* --- Custom checkbox / radio styling inside panels --- */
section.filters .panel input[type="checkbox"],
section.filters .panel input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border: 1px solid var(--dark-gray-border);
    border-radius: 0;
    background: var(--white);
    margin: 0;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
section.filters .panel input[type="radio"] { border-radius: 50%; }
section.filters .panel input:checked {
    background: var(--kfneblue);
    border-color: var(--kfneblue);
}
section.filters .panel input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 0;
    width: 5px; height: 10px;
    border-right: 1.5px solid var(--white);
    border-bottom: 1.5px solid var(--white);
    transform: rotate(45deg);
}
section.filters .panel input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--white);
}

/* --- Price range panel (special layout) --- */
section.filters .panel.range {
    padding: 2rem 2rem 1.5rem;
}
section.filters .panel.range .range-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
section.filters .panel.range input[type="number"] {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--gray-border);
    border-radius: var(--1br);
    font: inherit;
    font-size: 1rem;
    color: var(--dark-gray);
    background: var(--white);
}
section.filters .panel.range input[type="number"]:focus {
    outline: 1px solid var(--kfneblue);
    outline-offset: 1px;
}
section.filters .panel.range .sep { color: var(--gray); }
section.filters .panel.range .apply {
    display: block; width: 100%;
    padding: 0.8rem 1rem;
    background: var(--dark-gray);
    color: var(--white);
    border: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-all);
}
section.filters .panel.range .apply:hover { background: var(--kfneblue); }

/* --- Sort control (no panel, just an inline select) --- */
section.filters .sort {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    color: var(--gray);
    font-size: 1rem;
    gap: 0.7rem;
}
section.filters .sort label { letter-spacing: 0.05em; }
section.filters .sort select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark-gray);
    padding: 1.25rem 1.6rem 1.25rem 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232b2b2b' stroke-width='1.2'><path d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 10px 6px;
}
section.filters .sort select:focus {
    outline: 1px solid var(--kfneblue);
    outline-offset: 2px;
}

/* --- Active filter chips bar (below the strip) --- */
section.active-filters {
    margin: 0 auto 3rem;
}
section.active-filters .inner {
    width: var(--inwidth);
    max-width: var(--mainwidth);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-height: 1.6rem;
    align-items: center;
}
section.active-filters .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--gray-border);
    background: var(--white);
    color: var(--dark-gray);
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-all);
}
section.active-filters .chip:hover {
    border-color: var(--kfneblue);
    color: var(--kfneblue);
}
section.active-filters .chip::after {
    content: "×";
    font-size: 1.1rem;
    line-height: 1;
    color: var(--gray);
}
section.active-filters .clear {
    margin-left: 0.5rem;
    background: transparent;
    border: none;
    color: var(--gray);
    font: inherit;
    font-size: 0.95rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
section.active-filters .clear:hover { color: var(--kfneblue); }
section.active-filters .empty {
    color: var(--gray);
    font-size: 0.95rem;
}

/* --- Filter strip responsive (≤800px): wrap into 2 columns --- */
@media (max-width: 800px) {
    section.filters .filter-bar { flex-wrap: wrap; }
    section.filters .filter-bar > * {
        flex: 1 0 50%;
        border-bottom: 1px solid var(--gray-border);
    }
}

/* =====================================================================
   CATEGORY NAV — uses breadcrumb markup/styling
   =====================================================================
   Rendered by kfne_render_category_nav() in inc/category-nav.php.
   It reuses `section.breadcrumb` + `ul.nav-breadcrumb` from main.css so
   the styling is automatic. The `.category-nav` modifier on the section
   gives a small hook in case you want to override anything here later
   (margins, separators, etc.) without affecting the real breadcrumb.

   Only adjust spacing when the category-nav appears directly after a
   regular breadcrumb, so the two strips read as a pair. On pages where
   the category-nav is the only breadcrumb-styled section, default
   spacing applies.
   ===================================================================== */
section.breadcrumb + section.breadcrumb.category-nav {
    margin-top: -1rem;
}