/* ─────────────────────────────────────────────────────────────
   p9.5 — Product image fill + a11y sr-only helper.

   Bootstrap 4 ships `.sr-only` but theme.css doesn't always include
   it. Define explicitly so pagination's screen-reader labels work.
   ───────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Product card image fill — `.left-product` (the image wrapper) had
   `background-color: rgb(245, 245, 245)` from the legacy theme, AND
   the inner `<img>` overflows the 315x230 wrapper (natural sizes
   like 380x225 / 380x270 don't match the slot ratio). Result: the
   gray bg shows around/behind the image and the image clips weirdly.
   Fix: kill the gray bg, clip overflow, force image to cover the
   wrapper exactly. */
.product-miniature .left-product {
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
}

/* The legacy theme pins `.thumbnail.product-thumbnail` and `.cover_image`
   to a fixed 380px width (designed for the home_default thumbnail) while
   `.left-product` (the grid-cell wrapper) follows the responsive column
   width (e.g. 400px in our 3-col layout). Result: a 20px gap on the right
   that revealed the legacy gray bg before. Force the whole chain to 100%
   of the wrapper so the image always touches both edges. */
.product-miniature .thumbnail.product-thumbnail,
.product-miniature .cover_image {
    display: block;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    height: 230px !important; /* keep the fixed listing-photo height */
    background: transparent !important;
}

.product-miniature .cover_image img,
.product-miniature .thumbnail.product-thumbnail img,
.product-miniature .hover_image img,
.product-miniature .left-product img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   0. Sticky enabler — field_style.css:1521 sets `main { overflow:
   hidden }` which kills position:sticky on ANY descendant. Override
   to `clip` (modern equivalent — clips painting but preserves the
   containing block chain for sticky positioning). Scoped to body
   classes that exist on listing pages only so we don't regress
   other pages that may have intentionally hidden overflow.
   ───────────────────────────────────────────────────────────── */
body.page-category main,
body.page-search main,
body.page-manufacturer main,
body.page-best-sales main,
body.page-prices-drop main,
body.page-new-products main,
body.page-supplier main {
    overflow: clip !important;
}

/* ─────────────────────────────────────────────────────────────
   0b. Breadcrumb + sort top bar — white background, larger sort
   font. The breadcrumb's gray bg comes from theme.css with no
   single overridable selector — `.breadcrumb { background-color:
   #f0f0f0 }` — so we override on the listing body classes.
   ───────────────────────────────────────────────────────────── */
body.page-category nav.breadcrumb,
body.page-search nav.breadcrumb,
body.page-manufacturer nav.breadcrumb,
body.page-best-sales nav.breadcrumb,
body.page-prices-drop nav.breadcrumb,
body.page-new-products nav.breadcrumb,
body.page-supplier nav.breadcrumb {
    background-color: #fff !important;
    border: none !important;
    padding: 16px 0 !important;
    margin-bottom: 8px !important;
}

body.page-category nav.breadcrumb a,
body.page-search nav.breadcrumb a {
    color: #555;
    font-size: 13px;
    text-decoration: none;
}

body.page-category nav.breadcrumb a:hover,
body.page-search nav.breadcrumb a:hover {
    color: #6FA72F;
}

/* `.products-selection` wraps the breadcrumb-row sort dropdown and
   has a legacy `background-color: #f0f0f0` that paints a gray pill
   around the "Sort by:" label. Flatten to transparent. */
body.page-category .products-selection,
body.page-search .products-selection,
body.page-manufacturer .products-selection,
body.page-best-sales .products-selection,
body.page-prices-drop .products-selection,
body.page-new-products .products-selection,
body.page-supplier .products-selection,
.products-selection {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Sort-by dropdown — bigger font (was 12px), aligned right of
   breadcrumb row. The widget renders as `.box-sort-by` containing
   `Sort by:` label + a dropdown button. */
.box-sort-by,
.box-sort-by .sort-by-row {
    font-size: 14px !important;
}

.box-sort-by .select-title,
.box-sort-by .btn,
.box-sort-by .dropdown-toggle {
    font-size: 14px !important;
    color: #1a1a1a !important;
    padding: 8px 14px !important;
    border: 1px solid #e5e5e5;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.box-sort-by .select-title:hover,
.box-sort-by .btn:hover,
.box-sort-by .dropdown-toggle:hover {
    border-color: #6FA72F;
}

.box-sort-by .sort-by {
    color: #666;
    font-weight: 400;
    margin-right: 8px;
}

/* ============================================================
   Sprint p9 — Category page redesign (msofas-style minimalist).
   Three regions:
     1. TOP intro       — H1 + meta_description tagline
     2. LEFT sidebar    — facets (filters) + category tree, modernised
     3. BOTTOM content  — extended SEO description + FAQ accordion

   The product grid itself flips 4→3 cols at ≥768 — see the listing
   breakpoint block in redesign-p2-product-card.css.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. TOP intro — msofas reference: large sans heading + thin green
   accent rule + light grey tagline; flush-left, generous whitespace.
   ───────────────────────────────────────────────────────────── */
#content-wrapper .category-intro {
    padding: 16px 0 28px;
    margin: 0 0 24px;
    border-bottom: 1px solid #f0f0f0;
}

#content-wrapper .category-intro__title {
    margin: 0 0 8px;
    padding: 0;
    border: none;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    line-height: 1.2;
}

#content-wrapper .category-intro__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin: 12px 0 0;
}

#content-wrapper .category-intro__tagline {
    margin: 20px 0 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: #444;
    line-height: 1.5;
    max-width: 720px;
}

#content-wrapper .category-intro__description {
    margin: 14px 0 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    color: #666;
    line-height: 1.7;
    max-width: 820px;
}

@media (max-width: 767px) {
    #content-wrapper .category-intro {
        padding: 12px 0 20px;
        margin-bottom: 18px;
    }
    #content-wrapper .category-intro__title {
        font-size: 24px;
    }
    #content-wrapper .category-intro__tagline {
        font-size: 15px;
    }
    #content-wrapper .category-intro__description {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ─────────────────────────────────────────────────────────────
   2. LEFT sidebar — modernise the legacy widget chrome.

   Targets actual rendered class names from PrestaShop's blockreassurance/
   blockcategories/ps_facetedsearch modules. Goal: flat surfaces, no boxed
   borders, lots of breathing room, brand-green on hover/active.

   The `!important` flags target inline styles that ps_categorytree's PHP
   sets directly on the heading span (display:table, border-bottom, etc.)
   — without !important the inline rule wins specificity.
   ───────────────────────────────────────────────────────────── */
#left-column {
    padding-right: 32px;
    /* Sticky on desktop only — sidebar tracks the viewport as the user
       scrolls through long product lists.
       `top: 56px` clears the 43px-tall fixed megamenu (#header_menu.
       fieldmegamenu-sticky which pins to top:0 with z-index 1030) plus
       13px breathing room. If the megamenu height changes, bump this
       value to match. The matching `max-height` deducts the same offset
       so the sidebar's inner scrollbar fits between megamenu bottom and
       viewport bottom (with a touch of bottom air). */
    position: sticky;
    top: 56px;
    align-self: flex-start; /* so sticky has a bounded height inside the flex row */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    /* Hide the scrollbar visually but keep scroll behaviour (Firefox/WebKit) */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
#left-column::-webkit-scrollbar {
    width: 4px;
}
#left-column::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 0;
}

/* Wipe the boxed-container look on every sidebar widget. Theme.css gives
   .block-categories and #search_filters a 1px #f0f0f0 border + white bg
   that reads as a heavy outlined card. Flatten the lot. */
#left-column .block-categories,
#left-column #search_filters_wrapper,
#left-column #search_filters,
#left-column .block {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
}

/* ── Categories tree ── */

/* Heading span has aggressive inline styles set by ps_categorytree PHP
   (display:table, padding:16px 20px, border-bottom) — override with
   !important and rebuild the look from scratch. */
#left-column .category-top-menu > li:first-child > span {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border: none !important;
    border-bottom: 1px solid #1a1a1a !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1a1a1a;
    line-height: 1.3;
}

#left-column .category-top-menu > li:first-child > span strong {
    font-weight: 700;
}

#left-column .category-top-menu,
#left-column .category-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#left-column .category-top-menu > li {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

#left-column .category-sub-menu > li[data-depth="0"] {
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

#left-column .category-sub-menu > li[data-depth="0"]:last-child {
    border-bottom: none;
}

#left-column .category-sub-menu > li[data-depth="0"] > a {
    display: block;
    padding: 12px 32px 12px 0;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: color 0.18s ease, padding-left 0.18s ease;
}

#left-column .category-sub-menu > li[data-depth="0"] > a:hover,
#left-column .category-sub-menu > li[data-depth="0"] > a:focus-visible {
    color: #6FA72F;
    padding-left: 4px;
    outline: none;
}

/* Current category — brand-green bold */
#left-column .category-sub-menu > li[data-depth="0"].current > a,
#left-column .category-sub-menu > li[data-depth="0"] > a.current {
    color: #6FA72F;
    font-weight: 700;
}

/* Replace the heavy FontAwesome fa-plus-square / fa-minus-square boxes
   with a minimal '+' / '−' glyph. The boxed icons clashed with the flat
   minimalist sidebar style and looked like a 2014 Bootstrap admin. */
#left-column .category-sub-menu .navbar-toggler.collapse-icons {
    position: absolute;
    top: 8px;
    right: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide the FontAwesome icons */
#left-column .category-sub-menu .navbar-toggler .fa-plus-square,
#left-column .category-sub-menu .navbar-toggler .fa-minus-square {
    display: none !important;
}

/* Draw our own '+' via a pseudo element on the toggle */
#left-column .category-sub-menu .navbar-toggler.collapse-icons::before {
    content: "+";
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #999;
    line-height: 1;
    transition: transform 0.22s ease, color 0.18s ease;
}

#left-column .category-sub-menu .navbar-toggler.collapse-icons[aria-expanded="true"]::before,
#left-column .category-sub-menu li[data-depth="0"]:has(.collapse.in) .navbar-toggler.collapse-icons::before,
#left-column .category-sub-menu li[data-depth="0"]:has(.collapse.show) .navbar-toggler.collapse-icons::before {
    transform: rotate(45deg); /* + → × on open */
    color: #6FA72F;
}

#left-column .category-sub-menu .navbar-toggler.collapse-icons:hover::before {
    color: #6FA72F;
}

/* Nested sub-menu (data-depth=1) — indented, smaller, plain */
#left-column .category-sub-menu .category-sub-menu {
    padding: 4px 0 8px 12px;
}

#left-column .category-sub-menu li[data-depth="1"] {
    border: none;
}

#left-column .category-sub-menu li[data-depth="1"] > a {
    display: block;
    padding: 6px 0;
    color: #555;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    transition: color 0.15s ease;
}

#left-column .category-sub-menu li[data-depth="1"] > a:hover,
#left-column .category-sub-menu li[data-depth="1"] > a:focus-visible {
    color: #6FA72F;
    outline: none;
}

#left-column .category-sub-menu li[data-depth="1"] > a.current {
    color: #6FA72F;
    font-weight: 600;
}

/* ── Klarna banner image dropped between widgets ── */
#left-column > p:has(img) {
    margin: 0 0 32px;
    padding: 0;
}

#left-column > p > img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Filter By heading (ps_facetedsearch top label) ── */
#left-column #search_filters .text-uppercase.h6 {
    display: block;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #1a1a1a;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1a1a1a;
    line-height: 1.3;
}

/* ── Each .facet section (Availability, Price, etc.) ── */
#left-column #search_filters .facet {
    margin: 0 !important;
    padding: 16px 0 !important;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}

#left-column #search_filters .facet:last-of-type {
    border-bottom: none;
}

#left-column #search_filters .facet .facet-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
    line-height: 1.2;
}

/* Hide the mobile-only collapsible title pair PS renders on facets — at
   desktop we always show the desktop title. The .title.hidden-md-up is
   already display:none at our breakpoint via PS classes; this is belt
   and braces. */
@media (min-width: 768px) {
    #left-column #search_filters .facet .title.hidden-md-up {
        display: none !important;
    }
}

/* Facet items list */
#left-column #search_filters .facet ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#left-column #search_filters .facet ul.collapse {
    display: block !important; /* PS marks collapsed by default on mobile; force open on desktop */
}

#left-column #search_filters .facet ul li {
    padding: 4px 0;
    margin: 0;
    background: transparent;
    border: none;
}

/* Facet label (checkbox row) — PS renders the .facet-label with literal
   whitespace text nodes between the <span class="custom-checkbox"> and
   the <a class="search-link">, which become anonymous flex/grid items
   and break vertical centering math. We sidestep the problem entirely:
   flex layout + explicit `align-items: center`, and the link gets a
   compensating padding-top to neutralise the inherited `_gray-darker`
   theme rule that ads a baseline shift. */
#left-column #search_filters .facet .facet-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    cursor: pointer;
    color: #444;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    transition: color 0.15s ease;
    min-height: 28px;
}

#left-column #search_filters .facet .facet-label:hover {
    color: #6FA72F;
}

#left-column #search_filters .facet .facet-label a.search-link {
    color: inherit;
    text-decoration: none;
    flex: 1 1 auto;
    align-self: center;
    /* Theme legacy `.search-link` rule sets margin-top: 7px; reset all
       inherited spacing + flex align-self to center so text baseline
       lines up with the checkbox visual centre. */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
}

#left-column #search_filters .facet .facet-label .magnitude {
    color: #999;
    font-size: 12px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* Custom checkbox — overrides PS Material-icon default with a clean
   18×18 square that gets a brand-green tick on check. `flex: 0 0 18px`
   pins the width as a flex item so it doesn't get stretched by the
   parent's align-items rule. `align-self: center` neutralises any
   parent flex/grid alignment quirks (the .search-link inherits a
   baseline shift from `_gray-darker`, so we force align-self here too). */
#left-column #search_filters .facet .custom-checkbox {
    position: relative;
    /* Theme.css legacy: `.custom-checkbox { position: relative; top: -7px }`
       — that -7px shift was for the old Material-icons checkbox layout and
       breaks flex align-items: center for us. Reset to 0 explicitly. */
    top: 0 !important;
    left: 0 !important;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 18px;
    align-self: center;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #ccc;
    border-radius: 0;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

#left-column #search_filters .facet .custom-checkbox input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

#left-column #search_filters .facet .custom-checkbox:hover {
    border-color: #6FA72F;
}

/* Kill the inner `.ps-shown-by-js` box entirely — PrestaShop's JS adds
   `style="display: inline"` inline on this span at page load, AND
   theme.css gives it `border: 1px solid #cdcdcd` + bg, which paints a
   SECOND visible square inside our custom checkbox. Visual result was
   a stacked double-border on every unchecked filter. Force it to take
   no space + no border via !important (beats the JS inline style). */
#left-column #search_filters .facet .custom-checkbox .ps-shown-by-js {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#left-column #search_filters .facet .custom-checkbox .ps-shown-by-js .material-icons {
    display: none !important; /* hide PS's Material Icons glyph */
}

/* Checked state — solid green box. The "✓" mark is rendered via a
   pseudo-element on `.custom-checkbox` itself (NOT on `.ps-shown-by-js`)
   so the visual doesn't depend on PS's JS-managed inline styles. */
#left-column #search_filters .facet .custom-checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform-origin: center;
    transition: transform 0.15s ease;
    opacity: 0;
}

#left-column #search_filters .facet .custom-checkbox:has(input[type="checkbox"]:checked) {
    background: #6FA72F !important;
    border-color: #6FA72F !important;
}

#left-column #search_filters .facet .custom-checkbox:has(input[type="checkbox"]:checked)::after {
    opacity: 1;
    transform: translate(-50%, -65%) rotate(-45deg);
}

/* Safety: PS sometimes leaves an active class on the .custom-checkbox
   when checked (legacy markup); also hide any residual checkbox-checked
   text content / styles. */
#left-column #search_filters .facet .custom-checkbox .checkbox-checked {
    display: none !important;
}

/* Price slider — flat brand-green */
#left-column .ui-slider {
    height: 4px;
    background: #e8e8e8;
    border: none;
    border-radius: 0;
    margin: 16px 0 12px;
    position: relative;
}

#left-column .ui-slider-range {
    background: #6FA72F;
    height: 4px;
    position: absolute;
}

#left-column .ui-slider-handle {
    width: 14px;
    height: 14px;
    background: #6FA72F;
    border: 2px solid #fff;
    border-radius: 50%;
    top: -5px;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    position: absolute;
}

#left-column .ui-slider-handle:active {
    cursor: grabbing;
}

/* ── Active filters bar (above product grid) ──────────────────
   PS renders the active-filters strip ABOVE the grid as a wide
   horizontal bar (`#js-active-search-filters.active_filters`)
   with the legacy gray bg. Flatten it: no bg, no border, black
   chip text, brand-green close-X. */
#js-active-search-filters.active_filters,
.active_filters {
    background: #fff !important;
    background-color: #fff !important;
    border: none !important;
    padding: 12px 0 !important;
    margin: 8px 0 16px !important;
    border-radius: 0 !important;
}

#js-active-search-filters .active-filter-title,
.active_filters .active-filter-title {
    color: #1a1a1a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-right: 12px;
}

#js-active-search-filters .filter-block,
.active_filters .filter-block {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px !important;
    margin: 0 6px 6px 0 !important;
    background: #f8f8f8 !important;
    background-color: #f8f8f8 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 13px !important;
    font-weight: 500;
    transition: border-color 0.15s ease;
}

#js-active-search-filters .filter-block:hover,
.active_filters .filter-block:hover {
    border-color: #6FA72F !important;
}

#js-active-search-filters .filter-block .close,
.active_filters .filter-block .close {
    color: #999 !important;
    opacity: 1 !important;
    margin-left: 4px !important;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    transition: color 0.15s ease;
}

#js-active-search-filters .filter-block .close:hover,
.active_filters .filter-block .close:hover {
    color: #6FA72F !important;
}

/* Sidebar variant (older PS markup may still emit this inside #left-column) */
#left-column .active_filters .filter-block {
    background: #f8f8f8 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}

#left-column .active_filters .filter-block .close {
    color: #999 !important;
}

/* Clear all button — left-aligned (was floating right or auto),
   styled as a black-text link with × icon. */
.js-search-filters-clear-all,
.clear-all,
button.clear-all,
a.clear-all {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px 0 !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    float: none !important;
}

.js-search-filters-clear-all:hover,
.clear-all:hover {
    color: #6FA72F !important;
    text-decoration-color: #6FA72F;
}

/* Wrap container for clear-all so it sits flush-left in the sidebar
   (some PS versions wrap in `.clear-all-wrapper` with `text-align: right`) */
.clear-all-wrapper {
    text-align: left !important;
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    #left-column {
        padding-right: 0;
        margin-top: 32px;
        /* Sticky disabled on mobile — sidebar drops below content and
           there's no value in tracking the viewport. */
        position: static;
        max-height: none;
        overflow: visible;
    }
    #left-column .block-categories,
    #left-column #search_filters {
        margin-bottom: 24px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   4. Pagination — minimalist black/gray. Theme + field_style.css emit
   a heavy filled-color box on the active page, a left border-right
   per item, and a thin bottom border around the whole nav.
   Selectors below are aggressive (high specificity + !important) so
   they beat the legacy `.pagination .current a` rules in theme.css
   and field_style.css that fill the active page with a coloured box.
   Final look: no boxes, no borders, plain page numbers, BLACK active
   page centred with a brand-green 2px underline, clean ›/‹ icons.
   ───────────────────────────────────────────────────────────── */
body.page-category nav.pagination,
body.page-search nav.pagination,
body.page-manufacturer nav.pagination,
body.page-best-sales nav.pagination,
body.page-prices-drop nav.pagination,
body.page-new-products nav.pagination,
body.page-supplier nav.pagination,
nav.pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 24px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Reset Bootstrap col widths on the nav children so flex space-between
   actually places them correctly — pagination.tpl uses `col-md-4` and
   `col-md-8` wrappers that would otherwise pin both at fixed Bootstrap
   widths and the flex layout couldn't justify them. */
nav.pagination > div {
    flex: 0 1 auto;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
}

nav.pagination #pag {
    color: #888 !important;
    font-size: 13px !important;
    flex: 1 1 auto;
    line-height: 1.5;
}

nav.pagination .page-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
    text-align: right;
    justify-content: flex-end;
    border: none !important;
}

nav.pagination .page-list > li {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    line-height: 1 !important;
}

/* Every <a> + <span> inside the pagination list — flat 36×36 slots,
   no borders, BLACK text. Resets field_style.css `.pagination a {
   border-right: 1px solid #f0f0f0; line-height: 30px; ... }` */
nav.pagination .page-list > li > a,
nav.pagination .page-list > li > span.spacer,
nav.pagination .page-list > li > .spacer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    float: none !important;
    line-height: 1 !important;
    transition: color 0.15s ease !important;
}

nav.pagination .page-list > li > a:hover,
nav.pagination .page-list > li > a:focus-visible {
    color: #6FA72F !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
}

/* Active page — BLACK text, brand-green 2px underline only. The current
   <a> also carries `.disabled` (you can't click the page you're on), so
   we explicitly cover both selectors. The hover rule (`.pagination
   a:not(.disabled):hover`) doesn't match here because .current IS
   .disabled — no override needed for that path. */
nav.pagination .page-list > li.current > a,
nav.pagination .page-list > li.current > a.disabled,
nav.pagination .page-list > li.current > span {
    color: #1a1a1a !important;
    background: transparent !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: inset 0 -2px 0 #6FA72F !important;
    pointer-events: none;
}

/* Spacer dots */
nav.pagination .page-list > li > .spacer,
nav.pagination .page-list > li > span.spacer {
    color: #ccc !important;
    cursor: default;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* Previous / Next links — same flat treatment. The tpl emits
   <i class="material-icons">&#xE314;</i> (chevron_left) before Previous
   and <i class="material-icons">&#xE315;</i> (chevron_right) after Next.
   field_style.css adds ANOTHER »/« via ::after on .next/.previous, which
   is why the screenshot shows ">>" — we hide that pseudo. */
nav.pagination .page-list > li > a.previous,
nav.pagination .page-list > li > a.next {
    color: #1a1a1a !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    gap: 4px;
    min-width: auto !important;
}

nav.pagination .page-list > li > a.previous .material-icons,
nav.pagination .page-list > li > a.next .material-icons {
    font-size: 18px !important;
    line-height: 1 !important;
    vertical-align: middle;
}

/* Kill any ::before/::after pseudo arrows the theme stacks on top */
nav.pagination .page-list > li > a.previous::before,
nav.pagination .page-list > li > a.previous::after,
nav.pagination .page-list > li > a.next::before,
nav.pagination .page-list > li > a.next::after {
    content: none !important;
    display: none !important;
}

/* Disabled (greyed-out) link — for boundary cases */
nav.pagination .page-list > li > a.disabled {
    color: #ccc !important;
    pointer-events: none;
}

@media (max-width: 767px) {
    nav.pagination {
        margin: 28px 0 12px !important;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    nav.pagination #pag {
        text-align: left;
    }
    nav.pagination .page-list {
        justify-content: flex-start;
        width: 100%;
    }
    nav.pagination .page-list > li > a,
    nav.pagination .page-list > li > .spacer {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   3. BOTTOM — extended SEO description chrome + FAQ accordion.
   The legacy hardcoded H2/<p> blocks in products.tpl stay intact;
   we just give them a consistent wrapper + typography.
   ───────────────────────────────────────────────────────────── */
#js-product-list #category-description,
#js-product-list .category-description {
    margin: 40px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid #f0f0f0;
    color: #444;
    font-size: 15px;
    line-height: 1.7;
    max-width: 920px;
}

#js-product-list #category-description h1,
#js-product-list #category-description h2,
#js-product-list .category-description h1,
#js-product-list .category-description h2 {
    margin: 28px 0 12px;
    padding: 0;
    border: none;
    font-size: 22px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1a1a;
    line-height: 1.3;
}

#js-product-list #category-description h1:first-child,
#js-product-list #category-description h2:first-child,
#js-product-list .category-description h1:first-child,
#js-product-list .category-description h2:first-child {
    margin-top: 0;
}

#js-product-list #category-description p,
#js-product-list .category-description p {
    margin: 0 0 14px;
}

#js-product-list #category-description strong,
#js-product-list .category-description strong {
    color: #1a1a1a;
    font-weight: 600;
}

#js-product-list #category-description a,
#js-product-list .category-description a {
    color: #6FA72F;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* FAQ accordion — same msofas-style as homepage esbfaq */
.category-faq {
    margin: 48px 0 24px;
    padding: 32px 0 0;
    border-top: 1px solid #f0f0f0;
    max-width: 920px;
}

.category-faq__title {
    margin: 0 0 24px;
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    line-height: 1.2;
    border: none;
}

.category-faq__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #6FA72F;
    margin: 10px 0 0;
}

.category-faq__item {
    border: 1px solid #e5e5e5;
    border-radius: 0;
    margin-bottom: 12px;
    background: #fff;
    transition: border-color 0.18s ease;
}

.category-faq__item:hover:not([open]) {
    border-color: #6FA72F;
}

.category-faq__item[open] {
    border-color: #6FA72F;
}

.category-faq__question {
    list-style: none;
    cursor: pointer;
    padding: 16px 56px 16px 18px;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
    user-select: none;
}

/* Hide the native marker triangle (Chrome/Safari + Firefox) */
.category-faq__question::-webkit-details-marker { display: none; }
.category-faq__question::marker { content: ''; }

.category-faq__icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: #6FA72F;
    line-height: 1;
    transition: transform 0.2s ease;
}

.category-faq__item[open] > .category-faq__question .category-faq__icon {
    transform: translateY(-50%) rotate(45deg);
}

.category-faq__question:focus-visible {
    outline: 2px solid #6FA72F;
    outline-offset: -2px;
}

.category-faq__answer {
    padding: 0 18px 18px;
    color: #555;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .category-faq {
        margin-top: 32px;
        padding-top: 24px;
    }
    .category-faq__title {
        font-size: 20px;
        margin-bottom: 18px;
    }
    .category-faq__question {
        font-size: 14px;
        padding: 14px 48px 14px 14px;
    }
    .category-faq__answer {
        padding: 0 14px 14px;
        font-size: 13px;
    }
}

/* ─── esbfaq block on category page — pin to the column's left edge ───
   The shared `#esbfaq_block` styles (homepage usage) center the title
   and accordion list with `margin: 0 auto` because the homepage FAQ
   takes the full page width. On the category page the FAQ sits inside
   the col-md-9 listing column next to the sidebar, so centering reads
   as misalignment vs. the products grid above it. Re-anchor to the
   left edge when the block is mounted inside #content-wrapper. */
#content-wrapper #esbfaq_block {
    padding-left: 0;
    padding-right: 0;
}
#content-wrapper #esbfaq_block .esbfaq-title,
#content-wrapper #esbfaq_block .esbfaq-list {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}