/*
 * [oms-products-list-with-filter]
 *
 * Everything here is scoped under .oms-filtered-products so the existing
 * [oms-products-list] output and the product category archives are untouched.
 * The product cards deliberately reuse .card, .product-card, .product-info,
 * .product-title, .product-actions, .btn-show-product and .btn-phone from
 * stylesheet.css, so the card look and feel is inherited rather than restated.
 */

.oms-filtered-products {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    background-color: #ffffff;
}

/*
 * Divi runs wpautop over module content, which injects empty <p> and <br> nodes
 * between the block-level children of shortcode output. As direct children of a
 * grid those stray nodes consume cells and shunt the results column onto a
 * second row. Two defences: hide them, and pin our own two columns explicitly
 * so nothing that slips through can displace them.
 */
.oms-filtered-products > p,
.oms-filtered-products > br,
.oms-filtered-products > div:not([class]) > p:empty,
.oms-filtered-products > div:not([class]) > br {
    display: none;
}

.oms-filtered-products .oms-ofp-toggle {
    grid-area: 1 / 1 / 2 / -1;
}

.oms-filtered-products .oms-ofp-sidebar {
    grid-area: 1 / 1 / 2 / 2;
}

.oms-filtered-products .oms-ofp-results {
    grid-area: 1 / 2 / 2 / 3;
}

/* Same defence inside the results column and the card grid. */
.oms-ofp-results > p:empty,
.oms-ofp-results > br,
.oms-ofp-results-body > p:empty,
.oms-ofp-results-body > br,
.oms-ofp-grid > p,
.oms-ofp-grid > br {
    display: none;
}

/* --- Filter column ---------------------------------------------------- */

/* Filter controls read better ranged left. */
.oms-ofp-sidebar {
    text-align: left;
    position: sticky;
    top: 100px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    font-size: 14px;
}

.oms-ofp-sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.oms-ofp-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.oms-ofp-clear {
    background: none;
    border: none;
    padding: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #2e3282;
    text-decoration: underline;
    cursor: pointer;
}

.oms-ofp-clear:hover {
    color: #1f2358;
}

.oms-ofp-group {
    border: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.oms-ofp-group > legend,
.oms-ofp-search-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 8px;
    padding: 0;
}

.oms-ofp-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oms-ofp-group li {
    list-style: none;
    margin: 0;
}

/* Only top level categories show by default, so this rarely engages. It stays as
   a safety net if depth is raised. Tabbing to a checkbox inside scrolls it into
   view, so it remains keyboard accessible. */
.oms-ofp-group > .oms-ofp-cat-list {
    max-height: 620px;
    overflow-y: auto;
}

/* Nested category levels */
.oms-ofp-cat-list .oms-ofp-cat-list {
    margin-left: 14px;
    padding-left: 8px;
    border-left: 1px solid #e5e7eb;
}

.oms-ofp-option {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 24px minimum target height for WCAG 2.2 AA (2.5.8 Target Size) */
    min-height: 24px;
    padding: 3px 0;
    cursor: pointer;
    color: #1f2937;
    line-height: 1.35;
}

.oms-ofp-option:hover .oms-ofp-option-label {
    color: #2e3282;
}

.oms-ofp-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #2e3282;
    cursor: pointer;
}

.oms-ofp-option input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.oms-ofp-option:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.oms-ofp-option-label {
    flex: 1;
}

.oms-ofp-count {
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.oms-ofp-count::before { content: "("; }
.oms-ofp-count::after  { content: ")"; }

/* --- Numeric range facets --------------------------------------------- */

.oms-ofp-range {
    padding-bottom: 4px;
}

.oms-ofp-range > legend .oms-ofp-range-unit {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.oms-ofp-range-fields {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.oms-ofp-range-num {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    background-color: #ffffff;
    text-align: center;
    /* Spinners waste width in a 280px column and are redundant next to a slider. */
    -moz-appearance: textfield;
}

.oms-ofp-range-num::-webkit-outer-spin-button,
.oms-ofp-range-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.oms-ofp-range-num:focus {
    border-color: #2e3282;
    outline: none;
}

.oms-ofp-range-to {
    font-size: 12px;
    color: #6b7280;
    flex-shrink: 0;
}

.oms-ofp-range-sliders {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/*
 * Native range inputs are used deliberately. They are keyboard operable, and the
 * track can be clicked to move the thumb, so the facet does not depend on a
 * dragging gesture (WCAG 2.2 SC 2.5.7). The thumb is enlarged to 24px to satisfy
 * SC 2.5.8 target size.
 */
.oms-ofp-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.oms-ofp-range-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background-color: #e5e7eb;
}

.oms-ofp-range-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background-color: #e5e7eb;
}

.oms-ofp-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: #2e3282;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    cursor: pointer;
}

.oms-ofp-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: #2e3282;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    cursor: pointer;
}

.oms-ofp-range-slider:focus-visible::-webkit-slider-thumb {
    outline: 3px solid #65adde;
    outline-offset: 2px;
}

.oms-ofp-range-slider:focus-visible::-moz-range-thumb {
    outline: 3px solid #65adde;
    outline-offset: 2px;
}

.oms-ofp-range-note {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
}

/* Shown when the current selection leaves nothing further to filter by. */
.oms-ofp-no-facets {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

.oms-ofp-group-search input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #1f2937;
    background-color: #ffffff;
}

.oms-ofp-group-search input[type="search"]:focus {
    border-color: #2e3282;
    outline: none;
}

/* Visible focus for keyboard users; Divi strips these by default. */
.oms-filtered-products :focus-visible {
    outline: 3px solid #2e3282;
    outline-offset: 2px;
}

/* --- Results column --------------------------------------------------- */

/*
 * The existing cards inherit text-align: center from .product-list, so the
 * results column mirrors that to keep the card look identical.
 */
.oms-ofp-results {
    text-align: center;
}

.oms-ofp-results-head {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    margin-bottom: 16px;
}

.oms-ofp-count-summary {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.oms-ofp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.oms-filtered-products[data-oms-columns="2"] .oms-ofp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oms-filtered-products[data-oms-columns="4"] .oms-ofp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oms-ofp-grid > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * The card keeps every visual property from stylesheet.css, including its
 * 280x480 size. Measured against the existing category listing, the cards there
 * are exactly 280px wide, so stretching them to fill the grid cell was the one
 * visible difference. Only the outer margin changes, so the grid gap controls
 * spacing rather than margin-bottom, and the card is centred in its cell.
 */
.oms-filtered-products .product-card {
    width: 280px;
    max-width: 100%;
    margin: 0 auto;
}

.oms-ofp-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
}

.oms-ofp-empty a {
    color: #2e3282;
    font-weight: 600;
}

/* Loading state: dim the results but keep them in place so the layout does not
   jump and focus is never lost. */
.oms-filtered-products.is-loading .oms-ofp-results-body {
    opacity: 0.45;
    transition: opacity 0.15s linear;
    pointer-events: none;
}

/* --- Pagination ------------------------------------------------------- */

.oms-ofp-pagination {
    margin-top: 40px;
}

.oms-ofp-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.oms-ofp-pagination li {
    list-style: none;
    margin: 0;
}

.oms-ofp-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
}

a.oms-ofp-page:hover {
    border-color: #2e3282;
    color: #2e3282;
}

.oms-ofp-page.is-current {
    background-color: #2e3282;
    border-color: #2e3282;
    color: #ffffff;
}

/* --- Mobile filter toggle --------------------------------------------- */

.oms-ofp-toggle {
    display: none;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 16px;
    background-color: #2e3282;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.oms-ofp-toggle:hover {
    background-color: #1f2358;
}

.oms-ofp-submit {
    display: block;
    margin-top: 16px;
}

/* Screen reader only, in case the theme does not already define it. */
.oms-filtered-products .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Breakpoints ------------------------------------------------------ */

@media all and (max-width: 1100px) {
    .oms-filtered-products {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Release the explicit placement so the three blocks stack in source order.
       Descendant combinator, to survive the injected wrapper. */
    .oms-filtered-products .oms-ofp-toggle,
    .oms-filtered-products .oms-ofp-sidebar,
    .oms-filtered-products .oms-ofp-results {
        grid-area: auto;
    }

    .oms-ofp-toggle {
        display: block;
    }

    .oms-ofp-sidebar {
        position: static;
        margin-bottom: 24px;
    }

    /* Collapsed by default on small screens; the toggle button controls it. */
    .oms-ofp-sidebar[hidden] {
        display: none;
    }

    .oms-ofp-grid,
    .oms-filtered-products[data-oms-columns="4"] .oms-ofp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media all and (max-width: 767px) {
    .oms-ofp-grid,
    .oms-filtered-products[data-oms-columns="2"] .oms-ofp-grid,
    .oms-filtered-products[data-oms-columns="4"] .oms-ofp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .oms-filtered-products .product-card {
        width: 280px;
        max-width: 100%;
    }
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .oms-filtered-products.is-loading .oms-ofp-results-body {
        transition: none;
    }
}

/* -------------------------------------------------------------------------
 * Structural hardening
 *
 * The layout previously collapsed because Divi ships salvattore.js, a masonry
 * library that runs querySelectorAll('[data-columns]') on load and moves the
 * matched element's children into a generated wrapper div. The root attribute is
 * therefore named data-oms-columns. See the note in products-filter.php.
 *
 * Divi still loads a lot of high-specificity CSS, including deferred Dynamic
 * CSS, so the few properties that hold the two columns and the card grid
 * together are pinned. Everything cosmetic above remains overridable.
 * ---------------------------------------------------------------------- */

.oms-filtered-products.oms-filtered-products {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    float: none !important;
}

.oms-filtered-products > .oms-ofp-sidebar {
    grid-area: 1 / 1 / 2 / 2 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
}

.oms-filtered-products > .oms-ofp-results {
    grid-area: 1 / 2 / 2 / 3 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

.oms-filtered-products .oms-ofp-grid.oms-ofp-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.oms-filtered-products .oms-ofp-grid.oms-ofp-grid > li {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Match the existing listing exactly: 280px fixed, centred in its grid cell. */
.oms-filtered-products .oms-ofp-grid .product-card {
    display: flex !important;
    width: 280px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
}

@media all and (max-width: 1100px) {
    .oms-filtered-products.oms-filtered-products {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .oms-filtered-products > .oms-ofp-toggle,
    .oms-filtered-products > .oms-ofp-sidebar,
    .oms-filtered-products > .oms-ofp-results {
        grid-area: auto !important;
        position: static !important;
    }

    .oms-filtered-products .oms-ofp-grid.oms-ofp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media all and (max-width: 767px) {
    .oms-filtered-products .oms-ofp-grid.oms-ofp-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}