/* =========================================================
   Filterpress — Frontend Styles
   ========================================================= */

:root {
  --fp-primary:      #2563eb;
  --fp-primary-dark: #1d4ed8;
  --fp-success:      #16a34a;
  --fp-error:        #dc2626;
  --fp-gray-50:      #f9fafb;
  --fp-gray-100:     #f3f4f6;
  --fp-gray-200:     #e5e7eb;
  --fp-gray-400:     #9ca3af;
  --fp-gray-600:     #4b5563;
  --fp-gray-700:     #374151;
  --fp-gray-900:     #111827;
  --fp-radius:       8px;
  --fp-radius-lg:    12px;
  --fp-shadow:       0 4px 24px rgba(0,0,0,.12);
  --fp-transition:   .2s ease;
}

/* ── Buttons ──────────────────────────────────────────────── */

.fp-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .65em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--fp-radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fp-transition), color var(--fp-transition), border-color var(--fp-transition), transform var(--fp-transition);
  white-space: nowrap;
  user-select: none;
}
.fp-btn:focus-visible { outline: 3px solid var(--fp-primary); outline-offset: 3px; }
.fp-btn--primary  { background: var(--fp-primary); color: #fff; }
.fp-btn--primary:hover { background: var(--fp-primary-dark); }
.fp-btn--secondary { background: var(--fp-gray-100); color: var(--fp-gray-900); border-color: var(--fp-gray-200); }
.fp-btn--secondary:hover { background: var(--fp-gray-200); }
.fp-btn--outline { background: transparent; color: var(--fp-primary); border-color: var(--fp-primary); }
.fp-btn--outline:hover { background: var(--fp-primary); color: #fff; }
.fp-btn--full { width: 100%; justify-content: center; }
.fp-btn--loading    { opacity: .7; pointer-events: none; }
.fp-btn--downloaded { background: var(--fp-gray-200) !important; color: var(--fp-gray-400) !important; border-color: var(--fp-gray-200) !important; cursor: not-allowed !important; pointer-events: none; transform: none !important; }
.fp-btn__icon { font-style: normal; line-height: 1; }

/* ── Modal ────────────────────────────────────────────────── */

.fp-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.fp-modal[hidden] { display: none; }
.fp-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px); cursor: pointer;
}
.fp-modal__dialog {
  position: relative; background: #fff;
  border-radius: var(--fp-radius-lg); box-shadow: var(--fp-shadow);
  padding: 2.25rem 2rem; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
  animation: fp-modal-in .22s cubic-bezier(.34,1.26,.64,1);
}
@keyframes fp-modal-in {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.fp-modal__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem;
  padding: 0; border: none; background: #dc2626;
  border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex-shrink: 0; aspect-ratio: 1 / 1;
  transition: background var(--fp-transition), transform var(--fp-transition);
}
.fp-modal__close:hover,
.fp-modal__close:focus,
.fp-modal__close:active { background: #b91c1c; color: #fff !important; transform: scale(1.08); }
.fp-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fp-modal__icon  { font-size: 2.5rem; text-align: center; margin-bottom: .75rem; }
.fp-modal__title { font-size: 1.35rem; font-weight: 700; color: var(--fp-gray-900); margin: 0 0 .5rem; text-align: center; }
.fp-modal__desc  { color: var(--fp-gray-600); font-size: .95rem; text-align: center; margin: 0 0 1.5rem; }
.fp-modal__privacy { font-size: .78rem; color: var(--fp-gray-400); text-align: center; margin: .75rem 0 0; }

/* ── Form ─────────────────────────────────────────────────── */

.fp-subscribe-form { display: flex; flex-direction: column; gap: .85rem; }
.fp-form-group { display: flex; flex-direction: column; gap: .35rem; }
.fp-form-group label { font-size: .875rem; font-weight: 600; color: var(--fp-gray-700); }
.fp-required { color: var(--fp-error); }
.fp-input {
  padding: .65rem .85rem; border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  font-size: .95rem; color: var(--fp-gray-900); background: var(--fp-gray-50);
  transition: border-color var(--fp-transition), box-shadow var(--fp-transition);
  width: 100%; box-sizing: border-box;
}
.fp-input:focus { outline: none; border-color: var(--fp-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); background: #fff; }
.fp-input.fp-input--error { border-color: var(--fp-error); }
.fp-form-message { padding: .65rem .9rem; border-radius: var(--fp-radius); font-size: .9rem; font-weight: 500; }
.fp-form-message--error   { background: #fef2f2; color: var(--fp-error);   border: 1px solid #fecaca; }
.fp-form-message--success { background: #f0fdf4; color: var(--fp-success); border: 1px solid #bbf7d0; }

/* ── Success state ────────────────────────────────────────── */

.fp-success-state { text-align: center; padding: .5rem 0; animation: fp-modal-in .25s ease; }
.fp-success-icon {
  width: 3.5rem; height: 3.5rem; background: #dcfce7; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--fp-success); margin: 0 auto .9rem;
}
.fp-success-msg { font-size: 1rem; font-weight: 600; color: var(--fp-gray-900); margin: 0 0 .75rem; }
.fp-download-hint { font-size: .82rem; color: var(--fp-gray-400); text-align: center; margin: 0 0 .85rem; }
.fp-download-link::before { content: "↓"; font-weight: 700; margin-right: .3em; }
.fp-countdown-msg { font-size: .78rem; color: var(--fp-gray-400); text-align: center; margin: .85rem 0 0; }

/* ── Filter container ───────────────────────────────────── */

.fp-filter {
  margin-bottom: 1.5rem;
}
/* Two filters side-by-side need breathing room. Covers BOTH layout patterns:
   (a) direct .fp-filter siblings — when the [filterpress_filter] shortcodes
       sit inline-block next to each other.
   (b) each filter wrapped in its own <div> by a page builder (GenerateBlocks
       does this for every shortcode inside a flex container) — targets the
       wrapper divs via :has(). Modern browsers all support this. */
.fp-filter + .fp-filter,
:where(div):has(> .fp-filter) + :where(div):has(> .fp-filter) {
  margin-left: 1.5rem;
}
/* On phones the filters usually stack vertically — no left margin needed. */
@media (max-width: 600px) {
  .fp-filter + .fp-filter,
  :where(div):has(> .fp-filter) + :where(div):has(> .fp-filter) { margin-left: 0; }
}
.fp-filter__label {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fp-gray-600); margin-bottom: .6rem;
}

/* ── Checkboxes / Radio list ─────────────────────────────── */

.fp-filter__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .25rem;
}
.fp-filter__item label {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .9rem; color: var(--fp-gray-700);
  padding: .3rem .4rem; border-radius: 6px;
  transition: background var(--fp-transition);
}
.fp-filter__item label:hover { background: var(--fp-gray-100); }
.fp-filter__item input[type="checkbox"],
.fp-filter__item input[type="radio"] {
  accent-color: var(--fp-primary); width: 1rem; height: 1rem; flex-shrink: 0;
}
.fp-filter__count {
  margin-left: auto; background: var(--fp-gray-100); color: var(--fp-gray-400);
  border-radius: 99px; font-size: .75rem; padding: .1em .55em;
}

/* ── Select / Dropdown ───────────────────────────────────── */

.fp-filter__select,
.fp-filter__sort {
  width: 100%; padding: .6rem .8rem;
  border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  font-size: .9rem; background: var(--fp-gray-50); color: var(--fp-gray-900);
  cursor: pointer;
}
.fp-filter__select:focus,
.fp-filter__sort:focus { outline: none; border-color: var(--fp-primary); }

/* ── Search filter ────────────────────────────────────────── */

.fp-filter--search .fp-filter__search-wrap,
.fp-filter--autocomplete .fp-filter__search-wrap {
  position: relative;
}
.fp-filter__search-input,
.fp-filter__ac-input {
  width: 100%; padding: .6rem .8rem .6rem 2.2rem;
  border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  font-size: .9rem; background: var(--fp-gray-50); box-sizing: border-box;
}
.fp-filter__search-input:focus,
.fp-filter__ac-input:focus { outline: none; border-color: var(--fp-primary); background: #fff; }
.fp-filter__search-icon {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--fp-gray-400); font-size: .9rem; pointer-events: none;
}

/* ── Autocomplete dropdown ───────────────────────────────── */

.fp-ac-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
  background: #fff; border: 1px solid var(--fp-gray-200); border-top: none;
  border-radius: 0 0 var(--fp-radius) var(--fp-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto;
}
.fp-ac-item {
  padding: .55rem .8rem; font-size: .9rem; color: var(--fp-gray-700);
  cursor: pointer; transition: background var(--fp-transition);
}
.fp-ac-item:hover { background: var(--fp-gray-100); color: var(--fp-primary); }
.fp-ac-empty { color: var(--fp-gray-400); cursor: default; font-style: italic; }

/* ── Slider (dual-range) ─────────────────────────────────── */

.fp-filter--slider .fp-slider-wrap,
.fp-filter--number_range .fp-slider-wrap {
  padding: .5rem 0 .25rem;
}
.fp-slider__track {
  position: relative; height: 4px; background: var(--fp-gray-200);
  border-radius: 99px; margin: .75rem 0;
}
.fp-slider__track-fill {
  position: absolute; top: 0; bottom: 0;
  background: var(--fp-primary); border-radius: 99px;
}
.fp-slider-thumb {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem;
  background: #fff; border: 2px solid var(--fp-primary); border-radius: 50%;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  pointer-events: all; margin: 0; padding: 0;
  transition: box-shadow var(--fp-transition);
}
.fp-slider-thumb:hover,
.fp-slider-thumb:focus { box-shadow: 0 0 0 4px rgba(37,99,235,.2); outline: none; }

/* Native range reset — rendered as overlay. */
.fp-slider__inputs {
  position: relative; height: 1.1rem;
}
.fp-slider__inputs input[type="range"] {
  position: absolute; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none; margin: 0;
}
.fp-slider__inputs input[type="range"].fp-slider-thumb--min,
.fp-slider__inputs input[type="range"].fp-slider-thumb--max {
  pointer-events: all;
}

.fp-slider__labels {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--fp-gray-600); margin-top: .25rem;
}

/* ── Number range ─────────────────────────────────────────── */

.fp-filter__num-row {
  display: flex; align-items: center; gap: .5rem;
}
.fp-filter__num-input {
  flex: 1; padding: .55rem .6rem;
  border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  font-size: .875rem; background: var(--fp-gray-50); text-align: center;
  box-sizing: border-box;
}
.fp-filter__num-input:focus { outline: none; border-color: var(--fp-primary); }
.fp-filter__num-sep { color: var(--fp-gray-400); font-size: .8rem; }

/* ── Date range ──────────────────────────────────────────── */

.fp-filter__date-row {
  display: flex; flex-direction: column; gap: .4rem;
}
.fp-filter__date-label {
  font-size: .78rem; color: var(--fp-gray-600); font-weight: 600;
}
.fp-filter__date {
  width: 100%; padding: .55rem .7rem;
  border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  font-size: .875rem; background: var(--fp-gray-50); box-sizing: border-box;
}
.fp-filter__date:focus { outline: none; border-color: var(--fp-primary); }

/* ── Star rating ─────────────────────────────────────────── */

.fp-star-row {
  display: flex; gap: .15rem; align-items: center;
}
.fp-star {
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--fp-gray-200);
  transition: color var(--fp-transition), transform var(--fp-transition);
  user-select: none;
}
.fp-star:hover,
.fp-star--fill { color: #f59e0b; }
.fp-star:hover  { transform: scale(1.15); }
.fp-star--active { color: #d97706; }
.fp-star-hint {
  font-size: .8rem; color: var(--fp-gray-400); margin-left: .4rem;
}

/* ── Reset button ────────────────────────────────────────── */

.fp-reset-btn {
  font-size: .85rem;
  /* Padding: per-instance CSS vars with fp-btn defaults (.65em 1.4em) */
  padding: var(--fp-reset-pt, .65em) var(--fp-reset-pr, 1.4em) var(--fp-reset-pb, .65em) var(--fp-reset-pl, 1.4em);
  /* Base custom colors come from inline CSS variables set per-instance */
  color:            var(--fp-reset-text,   var(--fp-primary));
  background-color: var(--fp-reset-bg,     transparent);
  border-color:     var(--fp-reset-border, var(--fp-primary));
  border-radius:    var(--fp-reset-radius, var(--fp-radius));
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  /* Center vertically whenever the parent is a flex/grid container
     (e.g. filter bar, GenerateBlocks column, Bricks div block).
     No-op in plain block parents. */
  align-self: center;
}
/* Hover: reads per-instance variables with !important to beat fp-btn--outline:hover */
.fp-reset-btn:hover {
  color:            var(--fp-reset-hover-text,   #fff)                  !important;
  background-color: var(--fp-reset-hover-bg,     var(--fp-primary))     !important;
  border-color:     var(--fp-reset-hover-border, var(--fp-primary))     !important;
}
/* Remove all focus/active visual states — blur() in JS handles focus removal on click */
.fp-reset-btn:focus,
.fp-reset-btn:focus-visible,
.fp-reset-btn:active        { outline: 0 !important; box-shadow: none !important; }

/* ── Legacy inline filters (.fp-filter) ─────────────────── */

.fp-filter { margin-bottom: 1.5rem; }
.fp-filter__label {
  font-size: .875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fp-gray-600); margin-bottom: .6rem;
}
.fp-filter__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.fp-filter__item label {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .9rem; color: var(--fp-gray-700);
  padding: .3rem .4rem; border-radius: 6px;
  transition: background var(--fp-transition);
}
.fp-filter__item label:hover { background: var(--fp-gray-100); }
.fp-filter__item input[type="checkbox"],
.fp-filter__item input[type="radio"] { accent-color: var(--fp-primary); width: 1rem; height: 1rem; flex-shrink: 0; }
.fp-filter__count {
  margin-left: auto; background: var(--fp-gray-100); color: var(--fp-gray-400);
  border-radius: 99px; font-size: .75rem; padding: .1em .55em;
}

/* ── Unavailable filter options (zero results with current selection) ─── */
.fp-filter__item--empty { opacity: .35; pointer-events: none; }
.fp-filter__item--empty label { cursor: not-allowed; }

.fp-filter__select {
  width: 100%; padding: .6rem .8rem;
  border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  font-size: .9rem; background: var(--fp-gray-50);
}

/* ── Named listing wrap ──────────────────────────────────── */

.fp-listing-wrap {
  position: relative;
}
.fp-listing-wrap.fp-loading::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,.65); border-radius: var(--fp-radius);
  backdrop-filter: blur(2px); z-index: 10;
}

.fp-listing {
  display: grid; gap: 1.5rem;
}
.fp-listing--cols-1 { grid-template-columns: 1fr; }
.fp-listing--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fp-listing--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fp-listing--cols-4 { grid-template-columns: repeat(4, 1fr); }

.fp-listing--list { grid-template-columns: 1fr !important; }
.fp-listing--list .fp-listing-item {
  display: grid; grid-template-columns: 180px 1fr;
  overflow: hidden; background: #fff;
}

.fp-listing-item {
  overflow: hidden; background: #fff;
}

/* Listing fields */
.fp-field--image { overflow: hidden; border-radius: inherit; }
.fp-field--image a { display: block; overflow: hidden; border-radius: inherit; }
.fp-field--image img { width: 100%; height: auto; display: block; transform: none; transition: none; }

/* "Zoom on hover" toggle — opt-in. When enabled, the featured image gets a
   smooth natural zoom + soft brightness lift on either card or image hover. */
.fp-field--image.fp-img--zoom img {
  transform-origin: center center;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), filter .35s ease;
  will-change: transform;
}
.fp-listing-item:hover .fp-field--image.fp-img--zoom img,
.fp-field--image.fp-img--zoom:hover img {
  transform: scale(1.07);
  filter: brightness(1.04);
}
/* Honor reduced-motion users — no animation at all even with the toggle on. */
@media (prefers-reduced-motion: reduce) {
  .fp-field--image.fp-img--zoom img,
  .fp-listing-item:hover .fp-field--image.fp-img--zoom img,
  .fp-field--image.fp-img--zoom:hover img {
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Button hover animations — opt-in via builder select */
.fp-btn.fp-btn-anim--slide-up { transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.fp-btn.fp-btn-anim--slide-up:hover { transform: translateY(-4px); }
.fp-btn.fp-btn-anim--zoom { transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.fp-btn.fp-btn-anim--zoom:hover { transform: scale(1.06); }

/* Neutralize any theme hover transforms on cards */
.fp-listing-item { transform: none !important; }
.fp-listing-item:hover { transform: none !important; box-shadow: none !important; }

.fp-field--title,
.fp-field--excerpt,
.fp-field--date,
.fp-field--author,
.fp-field--taxonomy,
.fp-field--meta,
.fp-field--button { padding: 5px 0; }
.fp-field--title:first-child { padding-top: 5px; }

/* Each text-field's color is exposed as a CSS variable on the wrapper. The
   inline style on the wrapper sets `--fp-field-color`, and the inner element
   reads it (falling back to the previous theme default). This lets the
   admin's per-field "Text color" picker actually win over these rules. */
.fp-listing-item__title { font-size: var(--fp-field-fs, 1.05rem); font-weight: var(--fp-field-fw, 700); font-style: var(--fp-field-fst, normal); margin: 0; line-height: 1.35; }
.fp-listing-item__title a { color: var(--fp-field-color, var(--fp-gray-900)); text-decoration: none; }
.fp-listing-item__title a:hover { color: var(--fp-primary); }

.fp-field--excerpt p { font-size: var(--fp-field-fs, .875rem); font-weight: var(--fp-field-fw, normal); font-style: var(--fp-field-fst, normal); color: var(--fp-field-color, var(--fp-gray-600)); margin: 0; line-height: 1.6; }
.fp-field--date time { font-size: var(--fp-field-fs, .78rem); font-weight: var(--fp-field-fw, normal); font-style: var(--fp-field-fst, normal); color: var(--fp-field-color, var(--fp-gray-400)); }
.fp-field--author { font-size: var(--fp-field-fs, .82rem); font-weight: var(--fp-field-fw, normal); font-style: var(--fp-field-fst, normal); color: var(--fp-field-color, var(--fp-gray-600)); }
.fp-field--taxonomy { font-size: var(--fp-field-fs, .82rem); font-weight: var(--fp-field-fw, normal); font-style: var(--fp-field-fst, normal); color: var(--fp-field-color, inherit); }
.fp-field--meta { font-size: var(--fp-field-fs, .85rem); font-weight: var(--fp-field-fw, normal); font-style: var(--fp-field-fst, normal); color: var(--fp-field-color, var(--fp-gray-700)); }
.fp-field--button { padding-top: 0; margin-top: 5px; margin-bottom: 5px; }

.fp-term {
  display: inline;
  color: var(--fp-pill-text, var(--fp-gray-600));
  text-decoration: none;
  margin-right: .3rem;
  transition: color var(--fp-transition);
}
.fp-term:hover { color: var(--fp-primary); }

.fp-listing__empty {
  grid-column: 1 / -1; text-align: center; padding: 3rem 1rem;
  color: var(--fp-gray-400); font-size: 1rem;
}

/* ── Clickable card ─────────────────────────────────────── */

.fp-listing-item--clickable { position: relative; cursor: pointer; }
.fp-item-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
/* Keep inner interactive elements above the stretched link */
.fp-listing-item--clickable .fp-field--button,
.fp-listing-item--clickable .fp-field--title a,
.fp-listing-item--clickable .fp-field--taxonomy a,
.fp-listing-item--clickable .fp-locked-btn,
.fp-listing-item--clickable .fp-unlocked-btn,
.fp-listing-item--clickable .fp-btn--downloaded { position: relative; z-index: 1; }

/* ── Listing alignment ───────────────────────────────────── */

.fp-listing--align-center .fp-listing-item { text-align: center; }
.fp-listing--align-center .fp-listing-item .fp-field--button { text-align: center; }
.fp-listing--align-center .fp-listing-item .fp-field--image { display: flex; justify-content: center; }
.fp-listing--align-center .fp-listing-item .fp-field--taxonomy { text-align: center; }

.fp-listing--align-right .fp-listing-item { text-align: right; }
.fp-listing--align-right .fp-listing-item .fp-field--button { text-align: right; }
.fp-listing--align-right .fp-listing-item .fp-field--image { display: flex; justify-content: flex-end; }
.fp-listing--align-right .fp-listing-item .fp-field--taxonomy { text-align: right; }

/* ── Inline results grid ─────────────────────────────────── */

.fp-results-wrap {
  position: relative;
}
.fp-results-wrap.fp-loading::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,.65); border-radius: var(--fp-radius); backdrop-filter: blur(2px);
}
.fp-results { display: grid; gap: 1.5rem; }
.fp-results--cols-1 { grid-template-columns: 1fr; }
.fp-results--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fp-results--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fp-results--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .fp-results--cols-3, .fp-results--cols-4,
  .fp-listing--cols-3, .fp-listing--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .fp-results--cols-2, .fp-results--cols-3, .fp-results--cols-4,
  .fp-listing--cols-2, .fp-listing--cols-3, .fp-listing--cols-4 { grid-template-columns: 1fr; }
}

.fp-results--card .fp-result-item {
  border: 1px solid var(--fp-gray-200); border-radius: var(--fp-radius-lg);
  overflow: hidden; background: #fff;
  transition: box-shadow var(--fp-transition), transform var(--fp-transition);
}
.fp-results--card .fp-result-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.fp-result-item__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.fp-result-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fp-result-item:hover .fp-result-item__thumb img { transform: scale(1.04); }
.fp-result-item__body { padding: 1.1rem 1.25rem 1.25rem; }
.fp-result-item__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.35; }
.fp-result-item__title a { color: var(--fp-gray-900); text-decoration: none; }
.fp-result-item__title a:hover { color: var(--fp-primary); }
.fp-result-item__excerpt { color: var(--fp-gray-600); font-size: .875rem; line-height: 1.6; margin: 0 0 .85rem; }
.fp-result-item__meta { font-size: .78rem; color: var(--fp-gray-400); margin-bottom: .75rem; }
.fp-result-item__link { font-size: .875rem; font-weight: 600; color: var(--fp-primary); text-decoration: none; }
.fp-result-item__link:hover { text-decoration: underline; }
.fp-results--list .fp-result-item { display: grid; grid-template-columns: 180px 1fr; border: 1px solid var(--fp-gray-200); border-radius: var(--fp-radius); overflow: hidden; background: #fff; }
.fp-results--list .fp-result-item__thumb { aspect-ratio: auto; height: 100%; min-height: 120px; }
.fp-results--minimal .fp-result-item { padding: .9rem 0; border-bottom: 1px solid var(--fp-gray-100); }
.fp-results__empty { grid-column: 1/-1; text-align: center; padding: 3rem 1rem; color: var(--fp-gray-400); font-size: 1rem; }

/* ── Pagination ───────────────────────────────────────────── */

.fp-pagination {
  display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap;
}
.fp-page-btn {
  padding: .5rem .85rem; border: 1.5px solid var(--fp-gray-200); border-radius: var(--fp-radius);
  background: #fff; font-size: .875rem; font-weight: 500; color: var(--fp-gray-700);
  cursor: pointer; transition: all var(--fp-transition);
}
.fp-page-btn:hover,
.fp-page-btn--active { background: var(--fp-primary); border-color: var(--fp-primary); color: #fff; }

/* ── Filter bar ([filterpress_filter_bar]) ────────────────── */

.fp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 1rem;
  align-items: stretch; /* all items same height */
}
.fp-filter-bar__item {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* labels + inputs sit at the bottom */
}
/* Reset button: center vertically in the row height */
.fp-filter-bar .fp-filter--reset {
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
/* Remove bottom margin from other filters inside the bar */
.fp-filter-bar .fp-filter { margin-bottom: 0; }
/* Ensure selects/inputs inside the bar stretch to fill their column */
.fp-filter-bar .fp-filter__select,
.fp-filter-bar .fp-filter__search-input,
.fp-filter-bar .fp-filter__sort { width: 100%; box-sizing: border-box; }

/* ── Spinner ──────────────────────────────────────────────── */

@keyframes fp-spin { to { transform: rotate(360deg); } }
.fp-spinner {
  display: inline-block; width: 1em; height: 1em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: fp-spin .6s linear infinite; vertical-align: middle;
}