/* FiboFilters archive — sidebar, drawer, in-filter UI, and product-card swatch fixes.
 *
 * Owns the CSS surface around the FiboFilters block on shop/category archives.
 * Replaces the prior inline <style id="ms-fibofilters-sidebar-css"> block.
 *
 * @since 2026-05-15 (Phase D blocker bundle — 4 of 5 UX P0s fixed via this file).
 */

/* Mount padding — was inline (ms-fibofilters-sidebar-css). 16px mobile top adds
 * breathing room between the drawer's "Filtruj" header (p-8 + border-b) and the
 * first filter block, which otherwise sit flush. */
.ms-fibofilters-mount { padding: 1rem 1.5rem 2rem; }

@media (min-width: 768px) {
  .ms-fibofilters-mount { padding: 1.5rem 1rem 0; }
}

/* Mobile drawer scroll — make the filter list actually reach the bottom filter.
 *
 * Theme markup gives the inner panel (`.flex > .bg-white` inside .flineo-filters)
 * a `h-full` Tailwind class which is `height: 100%` of the drawer wrapper.
 * Inside it the drawer header (`p-8 + border-b`) takes ~93px, and the mount
 * itself has `h-[100%]` = 100% of the same parent. That double-100% pushes
 * total content to viewport + 93px, so the bottom filters (Ocieplenie, etc.)
 * scroll off the bottom of the viewport with no way to reach them.
 *
 * Fix: make the inner panel a flex column, let the drawer header sit at its
 * natural height, and let the mount flex-grow into the remaining space so its
 * internal `overflow-y: scroll` actually has a bounded height to scroll within. */
@media (max-width: 767px) {
  .flineo-filters > .flex > div > .bg-white,
  .flineo-filters .flex > .bg-white {
    display: flex;
    flex-direction: column;
  }
  .flineo-filters .ms-fibofilters-mount {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
  }
}

/* #1 — Desktop sticky sidebar.
 *
 * On md+ the flex parent (.flex.flex-col.md:flex-row) renders the sidebar as a
 * normal flex row child; without sticky, customers Load-More-deep have to scroll
 * the whole page back up to reach a filter. align-self: flex-start prevents the
 * default "stretch" behavior on flex items, which would otherwise make the
 * sticky element as tall as the products column and cancel the sticky effect.
 *
 * Header.shadow is now sticky too (set in Customizer Additional CSS, 2026-05-16).
 * Desktop header height varies by viewport (223px @ 1440, 339px @ 900, etc.)
 * because the categories sub-nav wraps at smaller widths. header-height.js
 * sets --ms-header-height on every resize so the sidebar offset stays correct
 * across breakpoints. Fallback 240px handles the no-JS edge case. */
@media (min-width: 768px) {
  .flineo-filters {
    align-self: flex-start;
    position: sticky;
    top: calc(var(--ms-header-height, 240px) + 1rem);
    max-height: calc(100vh - var(--ms-header-height, 240px) - 2rem);
  }

  .ms-fibofilters-mount {
    max-height: calc(100vh - var(--ms-header-height, 240px) - 2rem);
    overflow-y: auto;

    /* Thin, subtle scrollbar so the internal scroll (needed because the filter
     * list is taller than the viewport when sticky kicks in) doesn't draw the
     * eye. Firefox uses the standard properties; Chromium/WebKit uses the
     * vendored pseudo-elements. Both apply only to the sticky desktop case. */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  }

  .ms-fibofilters-mount::-webkit-scrollbar { width: 6px; }
  .ms-fibofilters-mount::-webkit-scrollbar-track { background: transparent; }
  .ms-fibofilters-mount::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
  }
  .ms-fibofilters-mount::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.30);
  }
}

/* Normalize collapsed-state filter block heights.
 *
 * Plugin renders different padding for different filter types:
 *   - Cena (range, price source): padding 0 0 15px   → block ~44px
 *   - Insole (range): padding 15px 0                 → block ~59px (but wraps to 87px because long label "Długość wkładki (mm)" splits to 2 lines)
 *   - Checkboxes/buttons/color/toggle: block ~59px
 *
 * Force consistent vertical padding + min-height on every collapsible block so
 * the sidebar reads as a uniform list when everything is closed. Label is
 * pinned to single-line with ellipsis fallback (paired with min-width: 0 so
 * the flex parent actually allows shrinkage). */
.ms-fibofilters-mount .fibofilters-block--collapsible {
  padding: 14px 0 !important;
  min-height: 56px;
  box-sizing: border-box;
}

/* Plugin's first-child:padding-top:0 fights our normalized 14px top — beat it.
 * The combined `:not(:first-of-type)` is a slightly higher-specificity hammer
 * to override the plugin's `:first-child{padding-top:0}` for THE first block
 * (Cena) which would otherwise render with 0 top padding and look shorter. */
.ms-fibofilters-mount .fibofilters-block--collapsible:first-child {
  padding-top: 14px !important;
}

.ms-fibofilters-mount .fibofilters-block__headline-box-inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Force collapsed block's slider/list inner content to be clipped.
 *
 * Range filters (Cena, Długość wkładki) keep their slider content rendered
 * with an explicit height: 90px on .fibofilters-block__content-inner even
 * when the block is "collapsed". Chromium correctly treats it as overflowing
 * content with no layout impact, but iOS Safari appears to reserve layout
 * space for the overflowing inner, producing the visible vertical gap below
 * those two filters that Mariusz reported. overflow: hidden on the content
 * box during collapsed state forces every browser to clip — no more iOS gap. */
.ms-fibofilters-mount .fibofilters-block--collapsed .fibofilters-block__content {
  overflow: hidden !important;
}

/* #3 — Tooltip ?-icon vs. collapse chevron collision.
 *
 * Plugin CSS pins .fibofilters-block__chevron-btn-icon at position:absolute;
 * right:0 of its parent — but the parent .fibofilters-block__chevron-btn has
 * no explicit width and contains only the abs-positioned icon, so it collapses
 * to width:0. With margin-left:auto pushing the 0-width container to the row's
 * right edge, the icon ends up overlapping the .__headline-box-icon (?-icon)
 * by ~10px on filters that have a tooltip (Szerokość, Amortyzacja, Długość
 * wkładki, Wodoodporność). Reserving width on the chevron-btn fixes the layout
 * without changing the visual position of either icon. */
.ms-fibofilters-mount .fibofilters-block__chevron-btn {
  flex: 0 0 28px;
  min-width: 28px;
  min-height: 14px;
}

/* #4 — Variation swatches overflow product card.
 *
 * VillaTheme Variation Swatches renders the loop swatch row as a `<table>` with
 * the `<tr>` using `display: grid` to lay out swatches + the "+N more" chip.
 * The table's intrinsic width comes from the grid's content total — on cards
 * with 4-5 colors the table sits at ~160px inside a 138px form wrapper,
 * overflowing the card right edge by ~5px. Constraining via `max-width: 100%`
 * on the form wrapper doesn't help because tables (display: table) ignore
 * parent flex constraints when computing their own width.
 *
 * The fix that actually works: pin the table to the form's width with
 * `table-layout: fixed`. That forces the inner grid to redistribute swatches
 * within the parent's bounds instead of growing the table to fit content. */
li.product .vi_wpvs_loop_variation_form {
  flex-wrap: wrap;
  max-width: 100%;
}

li.product .vi_wpvs_loop_variation_form table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

/* Applied-filters chips — push the products grid down so wrapped chip rows
 * never visually overlap the cards underneath.
 *
 * `ul.products { position: relative; z-index: 1 }` (set in functions.php line
 * ~1250) creates a stacking context. Combined with iOS Safari's chip-wrap
 * rendering (chips can wrap to 3+ rows when on a narrow viewport with brand
 * + multi-color filters), the chips visually clip the top of the first card
 * row even though they paint on top of it. The z-index keeps them readable,
 * but the real fix is laying out so the grid starts BELOW the entire chips
 * area:
 *   - position: relative + z-index: 2 (chips on top of grid stacking-wise)
 *   - explicit margin-bottom (forces a gap between last chip row and grid)
 *   - clear: both (cancels any float interactions)
 *   - block-level display on the inner list (so wrap pushes layout, not
 *     just paint) */
.fibofilters-applied-filters-container {
  position: relative;
  z-index: 2;
  clear: both;
  margin-bottom: 1rem;
  /* Plugin sets explicit height: 46px on this container (probably for some
   * pre-init animation state), but the value gets stuck on URL-restored
   * pages — leaves the container at 1-row height while inner chips wrap to
   * 3 rows of natural content, which then visually bleeds onto the products
   * grid below. Force auto so the box always sizes to the chips. */
  height: auto !important;
  min-height: 0;
}

.fibofilters-applied-filters {
  display: block;
  position: relative;
  z-index: 2;
  height: auto !important;
}

/* Loading-state product-card placeholder (FiboFilters skeleton + WC fallback).
 *
 * The lisek SVG installed via inc/wc-placeholder.php scaled to fill its
 * container by default — too loud for a loading-state mark. Constrain to
 * ~33% width, centered with breathing room, and dim it slightly so it reads
 * as "loading…" rather than "missing image". */
.fibofilters-product-placeholder img,
li.product img.woocommerce-placeholder {
  width: 33% !important;
  max-width: 33% !important;
  height: auto !important;
  display: block;
  margin: 2.5rem auto;
  opacity: 0.35;
}

/* Range-slider polish — hide histogram bars + style end labels.
 *
 * Default FiboFilters render shows a value-density histogram above the slider
 * track and "min." / "maks." text placeholders on the ends. Mariusz wants the
 * clean shape: `145 mm O——O 310 mm` — actual bounds at the ends, no histogram.
 *
 * - Histogram: display: none.
 * - Labels: aligned to track ends via flex spread (parent already flex), text
 *   is replaced with actual values by fibofilters-range-labels.js. */
.ms-fibofilters-mount .fibofilters-slider-histogram {
  display: none !important;
}

.ms-fibofilters-mount .fibofilters-range__label-wrapper {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #555;
}

.ms-fibofilters-mount .fibofilters-range__label--min,
.ms-fibofilters-mount .fibofilters-range__label--max {
  white-space: nowrap;
}

/* Even with the table constrained, the inner .vi-wpvs-variation-wrap-wrap div
 * (inside td, which is display: flex) keeps its natural width of ~160px and
 * overflows the now-138px table by 22px. Flex children default to
 * min-width: auto which prevents shrinking below content width — explicit
 * min-width: 0 + max-width: 100% lets every layer respect the table's clamp. */
li.product .vi_wpvs_loop_variation_form td,
li.product .vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap-wrap,
li.product .vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap {
  min-width: 0;
  max-width: 100%;
}

/* Pin variant miniatures at a fixed 32x32 so they don't shrink as the variant
 * count grows. VillaTheme's default `flex: 0 1 auto` on `.vi-wpvs-option-wrap`
 * lets flex shrink kick in once total content (swatches + "See More" chip)
 * approaches the wrap's width — 3 swatches + chip drops each to ~27px. Locking
 * basis + width keeps every card visually consistent regardless of N. The 4px
 * gap on the wrap parent stays plugin-default. */
li.product .vi_wpvs_loop_variation_form .vi-wpvs-variation-wrap > .vi-wpvs-option-wrap {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
}

/* Mobile FILTRUJ/SORTUJ sticky bar — stack below the sticky header.
 *
 * archive-product.php:72 renders `<div class="sticky top-0 md:hidden ...">`
 * with inline z-index 9999. Tailwind's `top-0` puts it at viewport top, where
 * it collides with the now-sticky header.shadow. Override top to read from
 * --ms-header-height (set by header-height.js) so the bar sticks just below
 * the header. !important needed because we're overriding a Tailwind utility
 * class with the same specificity. */
.sticky.top-0.md\:hidden.bg-white.container {
  top: var(--ms-header-height, 56px) !important;
}

/* Mobile: recoup the products-grid side gutter.
 *
 * `.container` adds 16px left/right padding sitewide — necessary for the
 * breadcrumbs/title block but wasteful on the 2-column grid (each card loses
 * 8px). Pulling the grid out with negative horizontal margins gives each card
 * +8px of width and the swatch row +16px of breathing room. Scoped to mobile
 * + the WC products grid class so other usages of `.container` are unaffected.
 * Net card width on iPhone-class viewports: 171px → 179px. */
@media (max-width: 767px) {
  ul.products.grid.grid-cols-2 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}