.vidasa-pf-filters {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border-top: 1px solid var( --border-light, rgba(0,0,0,.1) );
    margin-top: 6px;
}

/* ── Category pages: tighten the theme's own real sidebar layout
   (our panel renders directly inside .vd-cat-sidebar via the theme's
   own hook there — this is the actual gap source on those pages,
   frontend.js applies the same values inline as a safety net). ── */
.vd-shop-layout {
    gap: 12px !important;
}
.vd-cat-sidebar {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
}
.vd-shop-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

.vidasa-pf-title {
    padding: 14px 18px 6px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var( --text-gray, #888 );
}
.vidasa-pf-group {
    display: block !important;
    border-bottom: 1px solid var( --border-light, rgba(0,0,0,.1) );
    padding: 12px 18px;
}
.vidasa-pf-group-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.85rem;
    color: var( --text-light, #222 );
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}
.vidasa-pf-group-head i { font-size: 0.7rem; color: var( --text-gray, #888 ); transition: transform 0.2s ease; }
.vidasa-pf-group.is-open .vidasa-pf-group-head i { transform: rotate(180deg); }
.vidasa-pf-group-body {
    display: none !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.vidasa-pf-group.is-open .vidasa-pf-group-body { display: flex !important; }

.vidasa-pf-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: var( --text-gray, #666 );
    cursor: pointer;
    text-align: left !important;
    justify-content: flex-start !important;
}
.vidasa-pf-check input { accent-color: var( --primary-color, #E36F1E ); width: 15px; height: 15px; flex-shrink: 0; }
.vidasa-pf-check-inert { opacity: 0.55; cursor: default; }

.vidasa-pf-price { flex-direction: row; align-items: center; gap: 8px; }
.vidasa-pf-price input {
    width: 0;
    flex: 1;
    background: var( --card-bg, #fff );
    border: 1px solid var( --border-light, rgba(0,0,0,.15) );
    border-radius: 6px;
    padding: 7px 8px;
    color: var( --text-light, #222 );
    font-size: 0.82rem;
}
.vidasa-pf-price span { color: var( --text-gray, #888 ); }

.vidasa-pf-actions { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.vidasa-pf-apply {
    background: var( --primary-color, #E36F1E );
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.vidasa-pf-clear {
    text-align: center;
    color: var( --text-gray, #888 );
    font-size: 0.8rem;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .vidasa-pf-filters { border-top: none; }
}

/* ── Fallback layout wrapper — created by frontend.js around the
   panel and WooCommerce's product grid so they sit side by side
   (this theme's shop template has no sidebar column of its own,
   just the products in normal block flow, so we build the two-column
   row ourselves rather than depending on theme markup). ── */
.vidasa-pf-layout {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px;
    width: 100%;
}
.vidasa-pf-layout > .vidasa-pf-toolbar {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px;
    margin: 0 !important;
}
/* The right-hand column — everything that followed the toolbar on the
   page (a results-count/sort row, the product grid, a "no products
   found" notice, in whatever combination this page prints), collected
   into one wrapper by frontend.js so the whole thing sits beside the
   toolbar as a single flex column instead of only the first element
   pairing up and the rest falling out below it. */
.vidasa-pf-layout > .vidasa-pf-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
}
.vidasa-pf-content .products,
.vd-shop-content .products {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}
/* The grid's own column count (display:grid, grid-template-columns,
   gap) and phantom-tile removal are entirely the Vidasa Shop Grid Fix
   plugin's job now — configurable from Settings → Shop Grid Fix. This
   used to be hardcoded here too (4 desktop / 2 mobile columns), which
   duplicated and disagreed with that plugin's own JS-set columns and
   raced it on every page load. Keeping only the flex sizing above,
   which positions the grid as a column next to the filter panel and
   is unrelated to the grid's own internal layout. */

/* Strip the width/margin/float WooCommerce's or the theme's legacy
   float-based grid puts on each product tile — those percentage
   widths and margins are still honored inside a grid cell (float
   itself becomes a no-op once the parent is display:grid, but the
   sizing isn't), which was shrinking/offsetting tiles inside their
   column. frontend.js applies the same reset inline as well. */
.vidasa-pf-content .products > *,
.vd-shop-content .products > * {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    /* Grid items default to min-width:auto, meaning a grid track
       won't shrink below the intrinsic (unconstrained) size of its
       content — a product image with a large native/attribute size
       was forcing its whole column wider than its 1fr share, which
       is what pushed the grid right (the real cause of the leftover
       gap) and broke the mobile 2-per-row split (2 oversized tracks
       don't fit the viewport, so the browser collapses to fewer
       columns / lets them overflow). This lets the track actually
       shrink to the 1fr share instead of the image's native size. */
    min-width: 0 !important;
    overflow: hidden;
    box-sizing: border-box !important;
}
/* Product images/thumbnails must fit their column, not their native
   pixel size — this is what actually shrinks the desktop image size
   and lets 2 real (not overflowing) columns fit on mobile. */
.vidasa-pf-content .products img,
.vd-shop-content .products img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}
/* Safety net: WooCommerce subcategory tiles are unhooked in PHP so
   they never render in the grid (see includes/frontend.php), but in
   case a page cache still has an old copy, or a theme re-adds this
   hook, keep them out of the layout here too — they were occupying
   the first grid cell(s) ahead of the real products.

   Widened from `.product-category` only to `:not(li.product)` —
   the grid gives every direct child its own track regardless of tag,
   so ANY stray element (WooCommerce's legacy row-end `<div
   class="clear">`, a leftover widget node, etc.) still eats a cell
   even while hidden by a narrower selector, which is what was
   pushing row 1's real first product out of the left column. */
.vidasa-pf-content .products > *:not(li.product),
.vd-shop-content .products > *:not(li.product) {
    display: none !important;
}
/* Hard pin: the first real product tile always lands in column 1 of
   row 1, no matter what (hidden or not) sits ahead of it in the DOM. */
.vidasa-pf-content .products > li.product:first-child,
.vd-shop-content .products > li.product:first-child {
    grid-column: 1 !important;
}

/* ── Mobile hamburger toggle — replaces the always-visible panel with
   a button (added by frontend.js) so filters don't eat the whole
   screen above the products on small screens. ── */
.vidasa-pf-hamburger-row { display: none; }
.vidasa-pf-hamburger {
    display: none;
    align-items: center;
    gap: 8px;
    background: var( --primary-color, #E36F1E );
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .vidasa-pf-layout { flex-direction: column; }
    .vidasa-pf-layout > .vidasa-pf-toolbar {
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100%;
    }
}

.vidasa-pf-toolbar {
    position: relative;
    display: block !important;
    text-align: left !important;
    /* Matches the 200px column frontend.js applies once it wraps this
     * in .vidasa-pf-layout. Set here too as a plain CSS default so the
     * panel is never briefly (or permanently, if JS fails to find a
     * partner element to pair it with — see vpfFindToolbarPartner)
     * full-width instead of a left-hand sidebar column. Only applies
     * on desktop; the mobile rule further down still governs <=900px. */
    max-width: 200px;
}
@media (max-width: 900px) {
    .vidasa-pf-toolbar { max-width: 100%; }
}
.vidasa-pf-toolbar .vidasa-pf-filters {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static;
    width: 100% !important;
    max-width: 100%;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box;
    background: var( --card-bg, #fff );
    border: 1px solid var( --border-light, rgba(0,0,0,.15) );
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    z-index: auto;
    margin-top: 0;
}
/* Belt-and-suspenders: if the panel still ends up inside some theme
   collapse wrapper we didn't manage to escape in JS, these force it
   open regardless of whatever hidden/collapsed state that wrapper
   tries to apply directly to it. */
.vidasa-pf-toolbar,
.vidasa-pf-toolbar .vidasa-pf-filters {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
}

/* ── Mobile: filter panel becomes a hidden drawer, toggled open by the
   hamburger button instead of sitting open above the products. This
   has to come after the "always visible" rules above so it wins the
   display:none vs display:block tie (equal specificity, both
   !important — last one in the file wins). ── */
@media (max-width: 900px) {
    .vidasa-pf-hamburger-row {
        display: flex !important;
        justify-content: flex-end;
        width: 100%;
        order: -1;
    }
    .vidasa-pf-hamburger { display: inline-flex !important; }
    /* Only the plugin's OWN fallback toolbar (pages with no theme
     * sidebar column) gets this hidden-drawer treatment. `.vd-cat-sidebar`
     * is the theme's real sidebar column and must NEVER be touched here —
     * the theme already has its own complete, working mobile drawer for
     * it (#vd-mobile-filter-btn -> .vd-shop-layout.vd-sidebar-open ->
     * .vd-cat-sidebar { transform: translateX(0) }, see main.js). Forcing
     * `display:none !important` on it unconditionally — as this rule
     * used to do — permanently hid the ENTIRE category+filter sidebar
     * at <=900px, because the theme's own button only ever adds
     * `.vd-sidebar-open` to the layout, never the `.vidasa-pf-open`
     * class this rule required to undo the hide. Two independent mobile
     * drawer implementations fighting over the same element is also why
     * a second, redundant "Filters" hamburger used to appear alongside
     * the theme's real one. */
    .vidasa-pf-toolbar {
        display: none !important;
    }
    .vidasa-pf-toolbar.vidasa-pf-open {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px;
    }
}