/* ==========================================================================
   Cocomora Filters — toolbar
   ========================================================================== */

.rw-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* Softens the 3<->4 column jump when toggling filters open/closed — see
   the rw-grid-transitioning toggle in filters.js for why this is opacity
   rather than trying to animate grid-template-columns itself. Kept short:
   this only needs to be dim enough, for long enough, to hide the layout
   reflow underneath — not a leisurely cross-fade. filters.js's GRID_FADE_MS
   must match this duration. */
ul.products {
  transition: opacity .12s ease;
}

body.rw-grid-transitioning ul.products {
  opacity: 0.15;
}

.rw-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.rw-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1710;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.rw-filter-toggle:hover {
  background: #2c281d;
}

.rw-filter-icon {
  flex-shrink: 0;
}

.rw-filter-count {
  opacity: 0.75;
}

.rw-result-count {
  font-size: 15px;
  color: #4a4a4a;
}

.rw-result-count p {
  margin: 0;
}

/* ==========================================================================
   Filter panel
   ========================================================================== */

.rw-filter-panel {
  font-size: 14px;
}

.rw-filter-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.rw-filter-panel-top strong {
  font-size: 15px;
}

/* Only relevant for the mobile slide-in drawer — see the media query below. */
.rw-filter-close {
  display: none;
}

.rw-clear-all {
  font-size: 13px;
  text-decoration: underline;
  color: #4a4a4a;
}

.rw-active-filters {
  margin-bottom: 20px;
}

.rw-active-filters strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.rw-active-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rw-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f5f1eb;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #1a1710;
}

.rw-active-chip span {
  opacity: 0.6;
}

.rw-filter-group {
  border-top: 1px solid #e7e3da;
  padding: 16px 0;
}

.rw-filter-group:first-of-type {
  border-top: none;
}

.rw-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1710;
  cursor: pointer;
}

.rw-filter-heading-icon {
  font-weight: 400;
  color: #8a8577;
}

.rw-filter-group.is-collapsed .rw-filter-options {
  display: none;
}

.rw-filter-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.rw-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1710;
  text-decoration: none;
}

.rw-checkbox {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #c9c4b6;
  border-radius: 3px;
  flex-shrink: 0;
}

.rw-filter-option.is-active .rw-checkbox {
  background: #1a1710;
  border-color: #1a1710;
}

.rw-filter-option.is-active .rw-checkbox::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rw-option-label {
  flex: 1;
}

.rw-option-count {
  color: #8a8577;
  font-size: 13px;
}

.rw-sort-option {
  display: block;
  color: #1a1710;
  text-decoration: none;
  padding: 4px 0;
}

.rw-sort-option.is-active {
  font-weight: 600;
}

/* Intensity dots (shared: filter panel + product card + single product) */

.rw-intensiteit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #f5f1eb;
  border-radius: 5px;
  padding: 7px 10px;
}

.rw-int-label {
  font-size: 13px;
  font-weight: 400;
  color: #1a1710;
  white-space: nowrap;
}

.rw-int-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rw-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e7e7e7;
}

.rw-dot.is-active {
  background: #f2be7a;
}

.rw-filter-option-intensity {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.rw-filter-option-intensity .rw-int-dots {
  justify-self: end;
}

.rw-filter-option-intensity .rw-dot {
  width: 12px;
  height: 12px;
}

/* Product card badge */
ul.products li.product .rw-intensiteit {
  margin-top: 8px;
}

/* ==========================================================================
   Native Shoptimizer leftovers we replace with our own toolbar/panel.
   Shoptimizer prints its own ordering form + result count both above and
   below the loop, on hooks we don't control the name of — hide by class
   instead of trying to unhook every instance.
   ========================================================================== */

.shoptimizer-sorting .woocommerce-ordering,
.shoptimizer-sorting .woocommerce-result-count {
  display: none;
}

/* ==========================================================================
   Header order above the product grid: title, category chips, then our
   toolbar (result count / filter toggle), then the native sorting bar.
   Applies regardless of open/closed state — a flex column with explicit
   `order` per child, since we don't control (and can't safely guess) the
   hook priority the theme/child-theme uses for .rw-shop-filterbar.
   ========================================================================== */

#main.site-main {
  display: flex !important;
  flex-direction: column;
}

#main.site-main > .woocommerce-products-header__title {
  order: 1;
}

#main.site-main > .woocommerce-products-header {
  order: 2;
}

#main.site-main > .rw-shop-filterbar {
  order: 3;
}

#main.site-main > .rw-filter-toolbar {
  order: 4;
}

#main.site-main > .shoptimizer-sorting {
  order: 5;
}

/* Shoptimizer names this wrapper "columns-N" where N is the configured
   products-per-row (can vary per category) — match on that prefix instead
   of a hardcoded number so this keeps working regardless of N. */
#main.site-main > [class*="columns-"] {
  order: 6;
}

/* ==========================================================================
   Layout: filters open/closed
   Shoptimizer here renders #primary and our .rw-filter-panel as direct
   siblings inside .col-full — there is no .secondary-wrapper/#secondary
   wrapper (that markup belongs to woocommerce_get_sidebar(), which we
   removed). ".shoptimizer-archive > .col-full" scopes to that specific
   wrapper so we don't also grid-ify the breadcrumb's .col-full.
   ========================================================================== */

body:not(.rw-filters-open) .rw-filter-panel {
  display: none !important;
}

body:not(.rw-filters-open) #primary.content-area {
  width: 100% !important;
  max-width: 100% !important;
}

/* Shoptimizer sets li.product's width via a rule keyed to the columns-N
   class on ul.products (border-box, no horizontal margin/gap — confirmed
   live), which we no longer swap. Closed state just overrides the width
   directly instead; open state is left untouched so it always matches
   whatever Shoptimizer's own per-category default is. Desktop only —
   at 992px and below, Shoptimizer switches ul.products to display:grid
   with its own working 2-column grid-template-columns, and a % width on
   li.product there resolves against the grid CELL, not the container,
   silently shrinking things further (a 25% width inside a 457px cell gave
   114px-wide products). Confirmed live: with no override at all, that
   range already renders correctly on its own. The 992px boundary is
   Shoptimizer's, not ours — keep every breakpoint here (and
   MOBILE_BREAKPOINT in filters.js) matched to it, or the mismatched band
   in between breaks the grid again. */
@media (min-width: 993px) {
  body:not(.rw-filters-open) ul.products li.product {
    width: 25% !important;
  }
}

/*
 * #primary > #main wraps everything: title, our toolbar, category chips,
 * the native sorting bar, AND the product grid (the columns-N wrapper). We only want
 * the sidebar beside the product grid, not spanning the full height of
 * #primary — so both #primary and #main are unwrapped (display:contents)
 * so their children become direct grid items of .col-full. Each header-ish
 * child gets pinned to its own full-width row; only the columns-N wrapper shares an
 * explicit row with the sidebar. Rows are numbered explicitly rather than
 * left to grid auto-placement — empirically, auto-placement (even with
 * grid-auto-flow:dense) put the columns-N wrapper in row 1 and pushed the full-width
 * items after it instead of before, so don't rely on it here.
 */
body.rw-filters-open .shoptimizer-archive > .col-full {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 32px;
  align-items: start;
}

body.rw-filters-open #primary.content-area,
body.rw-filters-open #main.site-main {
  display: contents !important;
}

body.rw-filters-open #main.site-main > .woocommerce-products-header__title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

body.rw-filters-open #main.site-main > .woocommerce-products-header {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.rw-filters-open #main.site-main > .rw-shop-filterbar {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body.rw-filters-open #main.site-main > .rw-filter-toolbar {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

body.rw-filters-open #main.site-main > .shoptimizer-sorting {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
}

body.rw-filters-open .rw-filter-panel {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 6 !important;
}

body.rw-filters-open #main.site-main > [class*="columns-"] {
  grid-column: 2 !important;
  grid-row: 6 !important;
}

body.rw-filters-open #primary {
  float: none !important;
}

@media (max-width: 992px) {
  body.rw-filters-open .shoptimizer-archive > .col-full {
    display: block !important;
  }

  body.rw-filters-open #primary.content-area {
    display: block !important;
  }

  body.rw-filters-open #main.site-main {
    display: flex !important;
  }

  .rw-filter-panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 360px);
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    /* Extra top padding clears the absolutely-positioned close (X) button
       (top:16px, 32px tall, see .rw-filter-close below) — with uniform
       24px padding it overlapped "Clear all" in .rw-filter-panel-top. */
    padding: 56px 24px 24px;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  body.rw-filters-open .rw-filter-panel {
    display: block !important;
    transform: translateX(0);
  }

  .rw-filter-close {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #1a1710;
    cursor: pointer;
  }

  /* Backdrop behind the drawer — tapping it closes the panel (see filters.js).
     Sits below the panel's z-index:9999 so the panel stays on top. */
  body.rw-filters-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
  }

  /* No product-width override here on purpose — see the @media (min-width:
     993px) note above the desktop width rule. Shoptimizer's own mobile CSS
     already switches ul.products to display:grid with a working 2-column
     grid-template-columns; touching li.product's width here would resolve
     against the grid cell rather than the container and shrink it further. */
}