/**
 * FilterCraft PRO — Frontend Styles
 *
 * Uses CSS custom properties (design tokens) set via wp_head.
 * Override variables with the Design settings panel.
 *
 * @package FilterCraft
 * @version 1.0.0
 */

/* ── Token defaults (overridden by Settings → Design via inline <style>) ── */
/* Defaults are set here only as fallback; the inline style in <head> takes
   precedence because it is printed AFTER this stylesheet is enqueued. */

/* ── Widget wrapper ───────────────────────────────────────── */
.fc-widget {
  font-family: var(--fc-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fc-text);
  position: relative;
}

.fc-widget--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  border-radius: var(--fc-radius);
  pointer-events: none;
  animation: fcPulse 1s ease-in-out infinite;
}

@keyframes fcPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* ── Grid layout ──────────────────────────────────────────── */
.fc-widget__grid {
  display: grid;
  gap: 16px;
}
.fc-widget__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fc-widget__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fc-widget__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.fc-widget__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Filter section ───────────────────────────────────────── */
.fc-filter-section {
  margin-bottom: 16px;
  border: var(--fc-filter-border);
  border-radius: var(--fc-radius);
  background: var(--fc-bg);
  overflow: visible !important;
  transition: box-shadow var(--fc-transition);
}

.fc-filter-section--collapsed {
  overflow: hidden !important;
}

.fc-filter-section:hover {
  box-shadow: var(--fc-shadow);
}

/* ── Filter header (collapsible) ──────────────────────────── */
.fc-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fc-title-size);
  color: var(--fc-text);
  user-select: none;
  transition: background var(--fc-transition);
}

.fc-filter-header:hover {
  background: var(--fc-bg-hover);
}

.fc-filter-header::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fc-text-muted);
  border-bottom: 2px solid var(--fc-text-muted);
  transform: rotate(45deg);
  transition: transform var(--fc-transition);
  flex-shrink: 0;
  margin-left: 8px;
}

.fc-filter-section--collapsed .fc-filter-header::after {
  transform: rotate(-135deg);
}

/* ── Filter body ──────────────────────────────────────────── */
.fc-filter-body {
  padding: 8px 16px 16px;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.fc-filter-section--collapsed .fc-filter-body {
  max-height: 0;
  opacity: 0;
  padding: 0 16px;
  overflow: hidden;
}

/* ── Flat (non-collapsible) mode ──────────────────────────── */
.fc-widget--flat .fc-filter-section {
  border: none !important;
  border-radius: 0;
  background: transparent;
  margin-bottom: 24px;
  box-shadow: none !important;
}

.fc-widget--flat .fc-filter-section:hover {
  box-shadow: none !important;
}

.fc-widget--flat .fc-filter-header {
  padding: 0 0 10px 0;
  font-size: 15px;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
  border-bottom: 1px solid var(--fc-border);
  margin-bottom: 6px;
  background: transparent !important;
}

.fc-widget--flat .fc-filter-header::after {
  display: none;
}

.fc-widget--flat .fc-filter-body {
  padding: 8px 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.fc-widget--flat .fc-filter-section--collapsed .fc-filter-body {
  max-height: none !important;
  opacity: 1 !important;
  padding: 8px 0 !important;
  overflow: visible !important;
}

/* ── Borderless collapsible mode (competitor-style) ───────── */
/* Keeps the chevron + collapse/expand but removes the box/card */
.fc-widget--borderless .fc-filter-section {
  border: none !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  margin-bottom: 0;
  border-bottom: 1px solid var(--fc-border);
}

.fc-widget--borderless .fc-filter-section:last-child {
  border-bottom: none;
}

.fc-widget--borderless .fc-filter-section:hover {
  box-shadow: none !important;
}

.fc-widget--borderless .fc-filter-header {
  padding: 14px 0;
  background: transparent !important;
}

.fc-widget--borderless .fc-filter-header:hover {
  background: transparent !important;
}

.fc-widget--borderless .fc-filter-body {
  padding: 2px 0 14px;
}

.fc-widget--borderless .fc-filter-section--collapsed .fc-filter-body {
  padding: 0;
}

/* ── Filter search input ──────────────────────────────────── */
.fc-filter-search {
  margin-bottom: 10px;
}

.fc-filter-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--fc-border);
  border-radius: calc(var(--fc-radius) - 2px);
  font-size: 13px;
  color: var(--fc-text);
  background: var(--fc-bg);
  outline: none;
  transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-filter-search-input:focus {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.fc-filter-search-input::placeholder {
  color: #D1D5DB;
}

/* ── Filter items list ────────────────────────────────────── */
.fc-filter-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Checkbox & Radio items ───────────────────────────────── */
.fc-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--fc-text);
  cursor: pointer;
  transition: color var(--fc-transition);
}

.fc-filter-item:hover {
  color: var(--fc-primary);
}

.fc-filter-item--empty {
  opacity: 0.4;
  pointer-events: none;
}

/* Custom checkbox */
.fc-filter-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--fc-border);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all var(--fc-transition);
}

.fc-filter-item input[type="checkbox"]:checked {
  background: var(--fc-primary);
  border-color: var(--fc-primary);
}

.fc-filter-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fc-filter-item input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.2);
}

/* Custom radio */
.fc-filter-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--fc-border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all var(--fc-transition);
}

.fc-filter-item input[type="radio"]:checked {
  border-color: var(--fc-primary);
}

.fc-filter-item input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  background: var(--fc-primary);
  border-radius: 50%;
}

/* ── Count badge ──────────────────────────────────────────── */
.fc-filter-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--fc-text-muted);
  background: var(--fc-bg-hover);
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

/* ── Label items (clickable text) ─────────────────────────── */
.fc-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--fc-border);
  border-radius: 20px;
  font-size: var(--fc-label-size);
  cursor: pointer;
  transition: all var(--fc-transition);
  user-select: none;
  margin: 0 6px 6px 0;
}

.fc-filter-label:hover {
  border-color: var(--fc-primary);
  color: var(--fc-primary);
}

.fc-filter-label--active {
  background: var(--fc-primary);
  border-color: var(--fc-primary);
  color: #fff;
}

/* ── Dropdown ─────────────────────────────────────────────── */
.fc-filter-dropdown select {
  width: 100%;
  padding: 9px 32px 9px 12px;
  border: 1px solid var(--fc-border);
  border-radius: calc(var(--fc-radius) - 2px);
  font-size: 13px;
  color: var(--fc-text);
  background: var(--fc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-filter-dropdown select:focus {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

/* ── Range slider ─────────────────────────────────────────── */
/* The two <input type="range"> elements must overlay the .fc-range-track
   element (same coordinate space, both absolutely positioned at top:0 / left:0
   with width:100%). Many themes (Motta, Storefront child themes, several
   page-builder bundles, etc.) ship aggressive global rules like
   `input { position: static !important; width: 100% !important; height: auto
   !important; padding: ...; }` that strip our positioning. When that happens
   the range inputs flow as static block elements BELOW the track and their
   thumbs render on top of the numeric inputs instead of on the slider. We
   therefore use !important on every property that matters for layout and we
   raise the selector specificity with `.fc-filter-range .fc-range-input` so
   theme CSS that targets generic `input` cannot win. The thumbs also reserve
   space inside `.fc-filter-range` (11px of horizontal padding) so they never
   spill outside the widget at min/max. */
.fc-filter-range,
.fc-filter-body .fc-filter-range {
  position: relative !important;
  padding: 4px 0 8px !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.fc-filter-range .fc-range-track {
  /* The track spans the full width of .fc-filter-range. The track's left and
     right edges align with the numeric inputs' left and right edges below.
     We do NOT inset the track here because the inset has been moved to the
     slider INPUT itself (see below) so that the thumb travel is constrained
     to keep the thumb visually inside the track at min/max — which is the
     natural look users expect from a range slider. */
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  background: #E5E7EB !important;
  border: 0 !important;
  border-radius: 2px !important;
  margin: 22px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.fc-filter-range .fc-range-fill {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  background: var(--fc-primary) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* The slider input is inset 11px from each side of the track. With Chrome's
   `-webkit-appearance: none`, the thumb is rendered with its CENTRE at the
   value's pixel position along the input's width. By shrinking the input by
   22px (11px on each side), the value=min position lands at track-left + 11,
   which puts the thumb's LEFT edge exactly at the track's LEFT edge (and at
   the numeric input's LEFT edge, since they share the same horizontal
   bounds). The thumb is therefore always visually contained inside the
   track at the extremes — the slider "fits" perfectly inside every filter
   section regardless of theme. */
.fc-filter-range .fc-range-input,
.fc-filter-range input[type="range"].fc-range-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 11px !important;
  right: 11px !important;
  bottom: auto !important;
  width: auto !important;
  height: 4px !important;
  min-height: 0 !important;
  max-height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: none;        /* enabled on the thumb below */
  display: block !important;
  z-index: 2;
}

.fc-filter-range .fc-range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  height: 4px;
}

.fc-filter-range .fc-range-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: -9px;            /* centres the 22px thumb on the 4px track */
  background: #ffffff !important;
  border: 2px solid var(--fc-primary) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform var(--fc-transition), box-shadow var(--fc-transition);
  position: relative;
  z-index: 3;
}

.fc-filter-range .fc-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(26, 86, 219, 0.3) !important;
}

.fc-filter-range .fc-range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.2) !important;
}

.fc-filter-range .fc-range-input::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  background: #ffffff !important;
  border: 2px solid var(--fc-primary) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform var(--fc-transition);
}

.fc-filter-range .fc-range-input::-moz-range-track {
  background: transparent !important;
  border: 0 !important;
  height: 4px !important;
}

/* IE / old Edge */
.fc-filter-range .fc-range-input::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
  height: 4px;
}
.fc-filter-range .fc-range-input::-ms-thumb {
  width: 22px;
  height: 22px;
  background: #ffffff;
  border: 2px solid var(--fc-primary);
  border-radius: 50%;
}

.fc-range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  }

.fc-range-values input[type="number"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--fc-border);
  border-radius: calc(var(--fc-radius) - 2px);
  font-size: 13px;
  text-align: center;
  color: var(--fc-text);
  background: var(--fc-bg);
  outline: none;
  transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
  -moz-appearance: textfield;
  }

.fc-range-values input[type="number"]::-webkit-inner-spin-button,
.fc-range-values input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  }

.fc-range-values input[type="number"]:focus {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
  }

.fc-range-separator {
  flex-shrink: 0;
  color: var(--fc-text-muted);
  font-size: 14px;
  line-height: 1;
  }

  .fc-range-input:focus,
  .fc-range-input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  
  /* ── Color swatches ───────────────────────────────────────── */
.fc-filter-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--fc-radius);
  border: 2px solid var(--fc-border);
  cursor: pointer;
  transition: all var(--fc-transition);
  position: relative;
}

.fc-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fc-swatch--active {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 2px var(--fc-primary);
}

.fc-swatch--active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.fc-swatch--rounded {
  border-radius: 50%;
}

/* ── Image swatches ───────────────────────────────────────── */
.fc-filter-image-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fc-img-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  transition: all var(--fc-transition);
}

.fc-img-swatch__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--fc-radius);
  border: 2px solid var(--fc-border);
  transition: all var(--fc-transition);
  display: block;
}

.fc-img-swatch__fallback {
  width: 48px;
  height: 48px;
  border-radius: var(--fc-radius);
  border: 2px solid var(--fc-border);
  background: var(--fc-bg-hover, #F9FAFB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--fc-text-muted);
  transition: all var(--fc-transition);
}

.fc-img-swatch__label {
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  color: var(--fc-text);
  max-width: 56px;
  word-break: break-word;
}

.fc-img-swatch__label .fc-filter-count {
  display: block;
  font-size: 10px;
  color: var(--fc-text-muted);
  margin-top: 1px;
}

.fc-img-swatch:hover .fc-img-swatch__img,
.fc-img-swatch:hover .fc-img-swatch__fallback {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--fc-primary);
}

.fc-img-swatch--active .fc-img-swatch__img,
.fc-img-swatch--active .fc-img-swatch__fallback {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 2px var(--fc-primary);
}

.fc-img-swatch--active .fc-img-swatch__img::after,
.fc-img-swatch--active .fc-img-swatch__fallback::after {
  content: '✓';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--fc-radius);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.fc-img-swatch--rounded .fc-img-swatch__img,
.fc-img-swatch--rounded .fc-img-swatch__fallback {
  border-radius: 50%;
}

/* ── Rating stars ─────────────────────────────────────────── */
  .fc-filter-rating .fc-filter-item {
    gap: 8px;
    align-items: center;
  }

  .fc-rating-stars {
    display: flex;
    gap: 3px;
    align-items: center;
  }

  .fc-star {
    width: 22px;
    height: 22px;
    color: var(--fc-primary);
    flex-shrink: 0;
  }

  .fc-star--filled {
    color: var(--fc-primary);
  }

/* ── Show more ────────────────────────────────────────────── */
.fc-filter-items:not(.fc-filter-items--expanded) .fc-filter-item:nth-child(n+6) {
  display: none;
}

.fc-show-more-btn {
  display: inline-block;
  padding: 4px 0;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fc-primary);
  cursor: pointer;
  border: none;
  background: none;
  font-weight: 500;
  transition: opacity var(--fc-transition);
}

.fc-show-more-btn:hover {
  opacity: 0.7;
}

/* ── Chips ────────────────────────────────────────────────── */
.fc-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--fc-primary-light);
  border: 1px solid rgba(26, 86, 219, 0.15);
  border-radius: 20px;
  font-size: 12px;
  color: var(--fc-primary);
  animation: fcScaleIn 0.2s ease-out;
}

@keyframes fcScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.fc-chip__label {
  font-weight: 500;
}

.fc-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fc-transition);
  color: var(--fc-primary);
}

.fc-chip__remove:hover {
  background: rgba(26, 86, 219, 0.15);
}

/* ── Buttons ──────────────────────────────────────────────── */
.fc-widget__actions {
  display: flex;
  gap: 8px;
  padding: 16px 0 0;
  position: sticky;
  bottom: 0;
  background: var(--fc-bg);
  z-index: 5;
}

.fc-btn {
  padding: 10px 20px;
  border-radius: var(--fc-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fc-transition);
  border: none;
  text-align: center;
}

.fc-btn--apply {
  flex: 1;
  background: var(--fc-primary);
  color: #fff;
}

.fc-btn--apply:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3);
}

.fc-btn--reset {
  padding: 10px 16px;
  background: transparent;
  color: var(--fc-text-muted);
  border: 1px solid var(--fc-border);
}

.fc-btn--reset:hover {
  background: var(--fc-bg-hover);
  color: var(--fc-text);
}

/* ── Posts loading overlay ────────────────────────────────── */
.fc-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* ── Posts found count ────────────────────────────────────── */
.fc-posts-count {
  font-size: 13px;
  color: var(--fc-text-muted);
  padding: 8px 0;
}

/* ── Mobile popup / drawer ────────────────────────────────── */
.fc-mobile-open-btn {
  display: none;
  width: 100%;
  padding: 12px;
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-text);
  cursor: pointer;
  text-align: center;
}

.fc-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fc-mobile-overlay--visible {
  opacity: 1;
}

.fc-mobile-close-btn {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fc-bg-hover);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  border: none;
  color: var(--fc-text);
}

@media (max-width: 768px) {
  .fc-mobile-open-btn {
  display: block;
  }

  .fc-mobile-overlay {
  display: block;
  pointer-events: none;
  }

  .fc-mobile-overlay--visible {
  pointer-events: auto;
  }

  .fc-widget {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  background: var(--fc-bg);
  z-index: 99999;
  overflow-y: auto;
  padding: 56px 16px 16px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fc-widget--mobile-open {
  right: 0;
  }

  .fc-widget--mobile-open .fc-mobile-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .fc-widget__grid {
  grid-template-columns: 1fr !important;
  }

  .fc-widget__actions {
  padding: 12px 0;
  border-top: 1px solid var(--fc-border);
  }
}

/* ── Horizontal layout ────────────────────────────────────── */
/* In horizontal mode, each filter section is a compact pill-style
   header that opens its body as a floating popover anchored
   directly below the section.

   Many themes (Motta, Storefront, Flatsome, Astra Pro, Blocksy and
   page-builder bundles) wrap the widget area in containers with
   `overflow: hidden`, apply aggressive `position: static !important`
   to inputs/sections, or set high z-indexes on neighbouring cards.
   When that happens, our popover used to anchor to the document body
   (because `.fc-filter-section` was not `position: relative`) and
   ended up landing on top of the product grid in random places.

   The rules below force the layout to be theme-agnostic:
   - the section is the popover's containing block (position:relative)
   - the widget and section never clip the popover (overflow:visible)
   - only the active section is raised above its siblings
   - the popover is hard-hidden when collapsed so closed filters
     never accidentally render on top of products. */
.fc-widget--horizontal {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: visible !important;
}

/* When the wrapper template adds a column grid (cols 2-5) inside a
   horizontal widget, keep the grid as the layout owner but make
   sure it remains a positioned, non-clipping ancestor so popovers
   still anchor and escape correctly. */
.fc-widget--horizontal .fc-widget__grid {
  position: relative;
  overflow: visible !important;
  width: 100%;
}

.fc-widget--horizontal .fc-filter-section {
  /* Critical: the absolutely-positioned popover body uses this
     section as its containing block. Without position:relative the
     body drifts to the document body and lands in random spots —
     this is the "everything overlaps" bug seen on Motta. */
  position: relative !important;
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
  overflow: visible !important;
}

/* Closed sections must hide their popover entirely so it cannot
   render on top of the products grid. */
.fc-widget--horizontal .fc-filter-section--collapsed {
  overflow: hidden !important;
}

/* Raise the active (open) section above its siblings so the popover
   stacks on top of adjacent sections to its right/below. */
.fc-widget--horizontal .fc-filter-section:not(.fc-filter-section--collapsed) {
  z-index: 9999;
}

.fc-widget--horizontal .fc-filter-header {
  padding: 8px 12px;
  white-space: nowrap;
}

/* Floating popover body. */
.fc-widget--horizontal .fc-filter-body {
  position: absolute !important;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 220px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--fc-bg, #fff);
  border: 1px solid var(--fc-border, #e5e7eb);
  border-radius: var(--fc-radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  padding: 12px !important;
  /* Override the global collapse transition which would zero-out
     the popover and clash with the display:none rule below. */
  opacity: 1;
}

/* Hard-hide the popover when its section is collapsed. Using
   display:none (instead of just max-height:0) is what stops
   themes with overflow:hidden ancestors from leaking a 0-height
   strip onto the products area. */
.fc-widget--horizontal .fc-filter-section--collapsed .fc-filter-body {
  display: none !important;
}

/* Flip the popover to the right edge of the section when the
   section is close to the right side of the viewport. The class
   is applied by filtercraft.js once the popover opens. */
.fc-widget--horizontal .fc-filter-section.fc-filter-section--align-right .fc-filter-body {
  left: auto;
  right: 0;
}

/* On narrow screens (mobile, sidebar widget areas) the popover
   should fill the available width instead of overflowing. */
@media (max-width: 600px) {
  .fc-widget--horizontal .fc-filter-body {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ── Accessibility ────────────────────────────────────────── */
.fc-filter-item input:focus-visible,
.fc-filter-dropdown select:focus-visible,
.fc-btn:focus-visible,
.fc-filter-label:focus-visible,
.fc-swatch:focus-visible {
  outline: 2px solid var(--fc-primary);
  outline-offset: 2px;
}

/* ── Date Period ──────────────────────────────────────────── */
.fc-period-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.fc-period-btn {
  padding: 5px 12px;
  border: 1px solid var(--fc-border);
  border-radius: 20px;
  background: var(--fc-bg);
  color: var(--fc-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--fc-transition);
  font-family: var(--fc-font);
}

.fc-period-btn:hover { border-color: var(--fc-primary); color: var(--fc-primary); }

.fc-period-item--active .fc-period-btn {
  background: var(--fc-primary);
  border-color: var(--fc-primary);
  color: #fff;
}

.fc-period-custom { display: none; gap: 8px; flex-direction: column; margin: 8px 0; }
.fc-period-custom--visible { display: flex; }

.fc-period-custom-row { display: flex; align-items: center; gap: 8px; }

.fc-period-custom-label {
  width: 36px;
  font-size: 12px;
  color: var(--fc-text-muted);
  flex-shrink: 0;
}

.fc-period-date-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--fc-border);
  border-radius: calc(var(--fc-radius) - 2px);
  font-size: 13px;
  color: var(--fc-text);
  outline: none;
  transition: border-color var(--fc-transition);
}
.fc-period-date-input:focus { border-color: var(--fc-primary); }

.fc-period-clear,
.fc-drp-clear {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--fc-font);
  transition: border-color var(--fc-transition), color var(--fc-transition);
}
.fc-period-clear:hover,
.fc-drp-clear:hover { border-color: var(--fc-danger); color: var(--fc-danger); }

/* ── Date Range Calendar ──────────────────────────────────── */
.fc-date-range-picker { font-size: 13px; user-select: none; }

.fc-drp-months {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fc-drp-month { flex: 1; min-width: 180px; }

.fc-drp-separator {
  width: 1px;
  background: var(--fc-border);
  margin: 0 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.fc-drp-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 2px 0;
}

.fc-drp-month-label {
  font-weight: 700;
  font-size: 12px;
  color: var(--fc-text);
  flex: 1;
  text-align: center;
}

.fc-drp-nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--fc-border);
  border-radius: 5px;
  background: var(--fc-bg);
  color: var(--fc-text-muted);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fc-transition);
  flex-shrink: 0;
  line-height: 1;
}
.fc-drp-nav:hover {
  border-color: var(--fc-primary);
  color: var(--fc-primary);
  background: var(--fc-primary-light, #EBF5FF);
}

.fc-drp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.fc-drp-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-text-muted);
  padding: 3px 0 5px;
}

.fc-drp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--fc-text);
  transition: background var(--fc-transition), color var(--fc-transition);
}

.fc-drp-day--empty { cursor: default; }

.fc-drp-day:not(.fc-drp-day--empty):not(.fc-drp-day--disabled):hover {
  background: var(--fc-primary-light, #EBF5FF);
  color: var(--fc-primary);
}

.fc-drp-day--start,
.fc-drp-day--end {
  background: var(--fc-primary) !important;
  color: #fff !important;
  font-weight: 600;
  z-index: 1;
}

.fc-drp-day--in-range {
  background: var(--fc-primary-light, #EBF5FF);
  color: var(--fc-primary);
  border-radius: 0;
}

.fc-drp-day--start { border-radius: 5px 0 0 5px; }
.fc-drp-day--end   { border-radius: 0 5px 5px 0; }
.fc-drp-day--start.fc-drp-day--end { border-radius: 5px; }

.fc-drp-day--today { font-weight: 700; }
.fc-drp-day--today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.fc-drp-day--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.fc-drp-selected-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  font-size: 12px;
  color: var(--fc-text-muted);
  flex-wrap: wrap;
  min-height: 38px;
}

.fc-drp-date-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--fc-primary-light, #EBF5FF);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fc-primary);
}

.fc-drp-placeholder { font-style: italic; font-size: 12px; color: var(--fc-text-muted); }

@media (max-width: 480px) {
  .fc-drp-months { flex-direction: column; gap: 16px; }
  .fc-drp-separator { display: none; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .fc-widget,
  .fc-chips-container,
  .fc-mobile-open-btn,
  .fc-mobile-overlay {
  display: none !important;
  }
}

/* ── Chips clear-all button ───────────────────────────────── */
.fc-chips-clear-all {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: none;
  border: 1px solid var(--fc-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--fc-text-muted);
  cursor: pointer;
  transition: all var(--fc-transition);
  font-family: var(--fc-font);
}

.fc-chips-clear-all:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* ── Sorting ────────────────────────────────────────────── */
.fc-sorting-container {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fc-sorting-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fc-text);
  white-space: nowrap;
}

.fc-sorting-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  background-color: var(--fc-bg, #fff);
  color: var(--fc-text, #1F2937);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--fc-transition, 0.2s ease);
}

.fc-sorting-select:hover {
  border-color: var(--fc-primary, #2563EB);
}

.fc-sorting-select:focus {
  outline: none;
  border-color: var(--fc-primary, #2563EB);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ── Date Period Filter ────────────────────────────────────────────────── */

.fc-filter-section--date-period .fc-filter-body {
  padding: 8px 0;
}

.fc-period-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-period-item {
  flex: 0 0 auto;
}

.fc-period-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  background: var(--fc-bg, #FFFFFF);
  color: var(--fc-text, #374151);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--fc-transition, 0.2s ease),
            border-color var(--fc-transition, 0.2s ease),
            color var(--fc-transition, 0.2s ease);
  user-select: none;
  white-space: nowrap;
}

.fc-period-btn:hover {
  border-color: var(--fc-primary, #2563EB);
  color: var(--fc-primary, #2563EB);
}

.fc-period-btn:focus-visible {
  outline: 2px solid var(--fc-primary, #2563EB);
  outline-offset: 2px;
}

.fc-period-item--active .fc-period-btn,
.fc-period-btn[aria-pressed="true"] {
  background: var(--fc-primary, #2563EB);
  border-color: var(--fc-primary, #2563EB);
  color: #FFFFFF;
}

/* Custom date range panel */
.fc-period-custom {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--fc-bg-alt, #F9FAFB);
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
}

.fc-period-custom--visible {
  display: flex;
}

.fc-period-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fc-period-custom-label {
  min-width: 34px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fc-text-muted, #6B7280);
}

.fc-period-date-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  font-size: 13px;
  color: var(--fc-text, #374151);
  background: var(--fc-bg, #FFFFFF);
  transition: border-color var(--fc-transition, 0.2s ease);
}

.fc-period-date-input:focus {
  outline: none;
  border-color: var(--fc-primary, #2563EB);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Clear button */
.fc-period-clear {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  background: transparent;
  color: var(--fc-text-muted, #6B7280);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--fc-transition, 0.2s ease),
            color var(--fc-transition, 0.2s ease);
}

.fc-period-clear:hover {
  border-color: var(--fc-danger, #EF4444);
  color: var(--fc-danger, #EF4444);
}

/* ── Alphabet (A–Z) Filter ─────────────────────────────────────────────── */

.fc-filter-section--alphabet .fc-filter-body {
  padding: 8px 0;
}

.fc-alphabet-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-alphabet-item {
  flex: 0 0 auto;
}

.fc-alphabet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  background: var(--fc-bg, #FFFFFF);
  color: var(--fc-text, #374151);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fc-transition, 0.2s ease),
            border-color var(--fc-transition, 0.2s ease),
            color var(--fc-transition, 0.2s ease);
  user-select: none;
}

.fc-alphabet-btn:hover:not([aria-disabled="true"]) {
  border-color: var(--fc-primary, #2563EB);
  color: var(--fc-primary, #2563EB);
}

.fc-alphabet-btn:focus-visible {
  outline: 2px solid var(--fc-primary, #2563EB);
  outline-offset: 2px;
}

/* ── Toggle / Switch view ─────────────────────────────────── */
.fc-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-toggle-item + .fc-toggle-item {
  margin-top: 10px;
}

.fc-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  min-height: 28px;
}

.fc-toggle-label:hover .fc-toggle-track {
  border-color: var(--fc-primary, #2563EB);
}

.fc-toggle-text {
  flex: 1;
  font-size: 14px;
  color: var(--fc-text, #111827);
  line-height: 1.4;
}

.fc-toggle-control {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.fc-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fc-toggle-track {
  display: block;
  width: 40px;
  height: 22px;
  background: var(--fc-border, #E5E7EB);
  border: 1px solid var(--fc-border, #D1D5DB);
  border-radius: 11px;
  position: relative;
  transition: background var(--fc-transition, 0.2s ease),
            border-color var(--fc-transition, 0.2s ease);
}

.fc-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
  transition: transform var(--fc-transition, 0.2s ease),
            box-shadow var(--fc-transition, 0.2s ease);
}

.fc-toggle-input:checked + .fc-toggle-track {
  background: var(--fc-primary, #2563EB);
  border-color: var(--fc-primary, #2563EB);
}

.fc-toggle-input:checked + .fc-toggle-track .fc-toggle-thumb {
  transform: translateX(18px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.fc-toggle-input:focus-visible + .fc-toggle-track {
  outline: 2px solid var(--fc-primary, #2563EB);
  outline-offset: 2px;
}

/* Active / selected letter */
.fc-alphabet-item--active .fc-alphabet-btn,
.fc-alphabet-btn[aria-pressed="true"] {
  background: var(--fc-primary, #2563EB);
  border-color: var(--fc-primary, #2563EB);
  color: #FFFFFF;
}

/* Empty / no results letter */
.fc-alphabet-item--empty .fc-alphabet-btn,
.fc-alphabet-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Small count badge beneath the letter */
.fc-alphabet-count {
  display: block;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.7;
}

/* Clear button */
.fc-alphabet-clear {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  background: transparent;
  color: var(--fc-text-muted, #6B7280);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--fc-transition, 0.2s ease),
            color var(--fc-transition, 0.2s ease);
}

.fc-alphabet-clear:hover {
  border-color: var(--fc-danger, #EF4444);
  color: var(--fc-danger, #EF4444);
}

/* ═══════════════════════════════════════════════════════════════════
   Did You Mean — zero-result suggestions panel
═══════════════════════════════════════════════════════════════════ */

.fc-suggestions {
  margin-top: 24px;
  padding: 20px 20px 16px;
  border: 1px solid var(--fc-primary-alpha, rgba(99,102,241,.25));
  border-radius: var(--fc-radius, 6px);
  background: var(--fc-surface, #F9FAFB);
  font-size: 14px;
}

.fc-suggestions__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--fc-text, #1F2937);
}

.fc-suggestions__icon {
  flex-shrink: 0;
  color: var(--fc-primary, #6366F1);
}

.fc-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fc-suggestions__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--fc-border, #E5E7EB);
  border-radius: var(--fc-radius, 6px);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: border-color var(--fc-transition, .2s ease),
              background  var(--fc-transition, .2s ease),
              box-shadow  var(--fc-transition, .2s ease);
}

.fc-suggestions__btn:hover,
.fc-suggestions__btn:focus-visible {
  border-color: var(--fc-primary, #6366F1);
  background: var(--fc-primary-light, #EEF2FF);
  box-shadow: 0 0 0 2px var(--fc-primary-alpha, rgba(99,102,241,.2));
  outline: none;
}

.fc-suggestions__label {
  color: var(--fc-text, #1F2937);
  flex: 1 1 auto;
}

.fc-suggestions__count {
  flex-shrink: 0;
  margin-left: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fc-primary, #6366F1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Dark-mode support */
@media (prefers-color-scheme: dark) {
  .fc-suggestions {
    border-color: rgba(99,102,241,.3);
    background: rgba(17,24,39,.6);
  }
  .fc-suggestions__heading { color: #F3F4F6; }
  .fc-suggestions__btn {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #E5E7EB;
  }
  .fc-suggestions__btn:hover,
  .fc-suggestions__btn:focus-visible {
    border-color: var(--fc-primary, #6366F1);
    background: rgba(99,102,241,.15);
  }
  .fc-suggestions__label { color: #E5E7EB; }
}
