/* ================================================================
   Plantbaes Archive Filters — Phase 1 chrome
   ================================================================ */

/* ─── Design tokens ───────────────────────────────────────────────────────── */
#pbaf-chrome {
 --pb-mauve:  #775973;
 --pb-bg:     #faf7f9;
 --pb-card:   #ffffff;
 --pb-border: #e8e2e6;
 --pb-text:   #2a2127;
 --pb-muted:  #8a7e86;
}

/* ─── Chrome wrapper ──────────────────────────────────────────────────────── */
#pbaf-chrome {
 position: sticky;
 top: 0;
 z-index: 90;
 background: var(--pb-card);
 border-bottom: 1px solid var(--pb-border);
 width: 100%;
}

body.admin-bar #pbaf-chrome {
 top: 32px;
}

@media (max-width: 782px) {
 body.admin-bar #pbaf-chrome {
  top: 46px;
 }
}

/* Hide when Cook Mode is open */
body.pbcm-cook-active #pbaf-chrome {
 display: none;
}

/* ─── Chrome inner ────────────────────────────────────────────────────────── */
.pbaf-chrome-inner {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 16px;
}

@media (min-width: 768px) {
 #pbaf-chrome .pbaf-chrome-inner {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 30px;
 }
 #pbaf-chrome .pbaf-search { flex: 1 1 auto; max-width: none; }
 #pbaf-chrome .pbaf-pills  { flex: 0 0 auto; }
}

@media (max-width: 767px) {
 .pbaf-chrome-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
 }
}

/* ─── Search ──────────────────────────────────────────────────────────────── */
#pbaf-chrome .pbaf-search {
 position: relative;
 display: flex;
 align-items: center;
 width: 100%;
}

#pbaf-chrome .pbaf-search-icon {
 position: absolute;
 left: 14px;
 top: 50%;
 transform: translateY(-50%);
 z-index: 1;
 color: var(--pb-text, #2a2127);
 pointer-events: none;
}

#pbaf-chrome .pbaf-search .facetwp-facet,
#pbaf-chrome .pbaf-search .facetwp-facet-search {
 margin: 0 !important;
 padding: 0 !important;
 width: 100% !important;
 display: block;
}

#pbaf-chrome .pbaf-search .facetwp-input-wrap {
 width: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
}

#pbaf-chrome .pbaf-search input.facetwp-search {
 width: 100% !important;
 margin: 0 !important;
 padding: 10px 14px 10px 42px !important;
 border: 1px solid var(--pb-border, #e8e2e6);
 border-radius: 8px;
 font-size: 14px;
 background: #fff !important;
 color: var(--pb-text, #2a2127) !important;
 box-shadow: none !important;
 line-height: 1.4;
 font-family: inherit;
 box-sizing: border-box;
}

#pbaf-chrome .pbaf-search input.facetwp-search::placeholder {
 color: var(--pb-muted, #8a7e86);
}

#pbaf-chrome .pbaf-search input.facetwp-search:focus {
 outline: 2px solid var(--pb-mauve, #775973);
 outline-offset: 1px;
 border-color: transparent;
}

#pbaf-chrome .pbaf-search .facetwp-icon {
 display: none !important;
}

/* ─── Pill row ────────────────────────────────────────────────────────────── */
.pbaf-pills {
 display: flex;
 align-items: center;
 gap: 8px;
 overflow-x: auto;
 padding: 4px 0;
 flex: 1 1 auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.pbaf-pills::-webkit-scrollbar {
 display: none;
}

@media (max-width: 767px) {
 #pbaf-chrome .pbaf-pills {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
 }
}

/* ─── Pills — ID-scoped to outrank Kadence button cascade ─────────────────── */
#pbaf-chrome .pbaf-pill,
#pbaf-chrome .pbaf-pill:link,
#pbaf-chrome .pbaf-pill:visited {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 7px 14px;
 border: 1px solid var(--pb-border, #e8e2e6);
 background: #fff;
 color: var(--pb-text, #2a2127);
 font-size: 14px;
 font-weight: 500;
 font-family: inherit;
 white-space: nowrap;
 cursor: pointer;
 flex-shrink: 0;
 transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

#pbaf-chrome .pbaf-pill:hover,
#pbaf-chrome .pbaf-pill:focus {
 color: var(--pb-text, #2a2127);
 background: #fff;
 border-color: var(--pb-mauve, #775973);
}

#pbaf-chrome .pbaf-pill svg {
 stroke: currentColor;
 color: inherit;
 fill: none;
}

/* Active state — Phase 2 */
#pbaf-chrome .pbaf-pill.is-active {
 background: var(--pb-mauve, #775973);
 border-color: var(--pb-mauve, #775973);
 color: #fff;
}

/* All-filters pill — icon only */
#pbaf-chrome .pbaf-pill-all {
 padding: 7px 10px;
}

.pbaf-pill-chevron {
 color: var(--pb-muted, #8a7e86);
 flex-shrink: 0;
}

/* ─── Exclusive facet — FacetWP checkbox styled as a pill ────────────────── */
#pbaf-chrome .pbaf-pill-facet {
 display: inline-flex;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-facet {
 margin: 0 !important;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin: 0;
 padding: 7px 14px;
 height: auto;
 background: #fff !important;
 background-image: none !important; /* kill FacetWP's inline checkmark SVG */
 border: 1px solid var(--pb-border, #e8e2e6) !important;
 border-radius: 999px !important;
 font-size: 14px;
 font-weight: 500;
 font-family: inherit;
 line-height: 1.4;
 color: var(--pb-text, #2a2127) !important;
 text-transform: capitalize;
 cursor: pointer;
 white-space: nowrap;
 user-select: none;
 flex-shrink: 0;
 transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox:hover {
 background: rgba(107, 76, 94, 0.12) !important;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox.checked {
 background: var(--pb-mauve, #775973) !important;
 border-color: var(--pb-mauve, #775973);
 color: #fff !important;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox.checked .facetwp-counter {
 color: #fff !important;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox.checked:hover {
 background: var(--pb-mauve, #775973) !important;
}

#pbaf-chrome .pbaf-pill-facet .facetwp-counter {
 color: inherit;
 opacity: 0.75;
 font-weight: 400;
}

/* ─── Defensive — WPCode "FacetWP show labels above facets" snippet guard ─── */
/* If the snippet fires inside the chrome despite the early-return guard,
   hide the label heading and force wrappers to fill width. */
#pbaf-chrome .facet-wrap {
 display: block !important;
 width: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
}

#pbaf-chrome .pbaf-search .facet-label,
#pbaf-chrome .pbaf-search h3.facet-label {
 display: none !important;
}

/* FacetWP's bundled CSS sets min-width: 240px on the search input — kill it
   so our width: 100% chain can actually collapse the input to fit. */
#pbaf-chrome .pbaf-search input.facetwp-search {
 min-width: 0 !important;
 max-width: none !important;
}

/* .facetwp-input-wrap is a <span> (inline by default) — force block so
   the child input's width: 100% resolves against the full parent width. */
#pbaf-chrome .pbaf-search .facetwp-input-wrap {
 display: block !important;
}

/* ─── Kill Kadence hover box-shadow on all chrome interactive elements ─────── */
#pbaf-chrome .pbaf-pill,
#pbaf-chrome .pbaf-pill:hover,
#pbaf-chrome .pbaf-pill:focus,
#pbaf-chrome .pbaf-pill:active,
#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox,
#pbaf-chrome .pbaf-pill-facet .facetwp-checkbox:hover {
 box-shadow: none !important;
}

/* ================================================================
   Modal shell — Phase 2
   Sheet (mobile) + dropdown (desktop)
   ================================================================ */

body.pbaf-modal-open { overflow: hidden; }

/* Ensure hidden attribute always wins regardless of mode-specific display overrides */
#pbaf-modal[hidden],
#pbaf-modal-backdrop[hidden] { display: none !important; }

/* Hide floating search button while filter modal is open */
body.pbaf-modal-open .plantbaes-search-fav-counter { display: none !important; }

/* ─── Backdrop ────────────────────────────────────────────────────────────── */
#pbaf-modal-backdrop {
 position: fixed;
 inset: 0;
 z-index: 100020 !important;
 background: rgba(0, 0, 0, 0.4);
}

#pbaf-modal-backdrop[hidden] { display: none; }

#pbaf-modal-backdrop.pbaf-backdrop-clear { background: transparent; }

/* ─── Modal base ──────────────────────────────────────────────────────────── */
#pbaf-modal {
 position: fixed;
 z-index: 100021 !important;
 background: var(--pb-card, #fff);
 display: flex;
 flex-direction: column;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 font-size: 15px;
 color: var(--pb-text, #2a2127);
}

#pbaf-modal[hidden] { display: none; }

/* ─── Sheet mode (mobile, default) ───────────────────────────────────────── */
#pbaf-modal[data-pbaf-mode="sheet"],
#pbaf-modal[data-pbaf-mode="sheet-tall"] {
 bottom: 0;
 left: 0;
 right: 0;
 border-radius: 16px 16px 0 0;
 animation: pbaf-slide-up 220ms ease-out both;
}

#pbaf-modal[data-pbaf-mode="sheet"] {
 max-height: 85vh;
}

#pbaf-modal[data-pbaf-mode="sheet-tall"] {
 max-height: 92vh;
}

@keyframes pbaf-slide-up {
 from { transform: translateY(100%); }
 to   { transform: translateY(0); }
}

/* ─── Dropdown mode (desktop) ─────────────────────────────────────────────── */
#pbaf-modal[data-pbaf-mode="dropdown"] {
 width: 360px;
 max-height: 480px;
 border-radius: 12px;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
 animation: pbaf-fade-in 150ms ease both;
}

@keyframes pbaf-fade-in {
 from { opacity: 0; transform: translateY(-4px); }
 to   { opacity: 1; transform: translateY(0); }
}

/* ─── Drag handle ─────────────────────────────────────────────────────────── */
.pbaf-modal-handle {
 width: 40px;
 height: 4px;
 background: var(--pb-border, #e8e2e6);
 border-radius: 999px;
 margin: 12px auto 4px;
 flex-shrink: 0;
}

#pbaf-modal[data-pbaf-mode="dropdown"] .pbaf-modal-handle {
 display: none;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
.pbaf-modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px 20px 12px;
 border-bottom: 1px solid var(--pb-border, #e8e2e6);
 flex-shrink: 0;
}

.pbaf-modal-title {
 font-size: 17px;
 font-weight: 600;
 color: var(--pb-text, #2a2127);
 margin: 0;
}

.pbaf-modal-close {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 border: none;
 background: transparent;
 color: var(--pb-muted, #8a7e86);
 border-radius: 6px;
 cursor: pointer;
 padding: 0;
 flex-shrink: 0;
}

.pbaf-modal-close:hover { background: rgba(107, 76, 94, 0.1); color: var(--pb-text, #2a2127); }

/* ─── Body ────────────────────────────────────────────────────────────────── */
.pbaf-modal-body {
 flex: 1 1 auto;
 overflow-y: auto;
 padding: 16px 20px;
 overscroll-behavior: contain;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.pbaf-modal-footer {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 padding: 12px 20px 16px;
 border-top: 1px solid var(--pb-border, #e8e2e6);
 flex-shrink: 0;
 gap: 8px;
}

.pbaf-modal-actions {
 display: flex;
 align-items: center;
 gap: 8px;
}

.pbaf-modal-cancel {
 background: transparent;
 border: none;
 color: var(--pb-mauve, #775973);
 font-size: 14px;
 font-family: inherit;
 cursor: pointer;
 padding: 8px 12px;
}

.pbaf-modal-cancel:hover { text-decoration: underline; }

.pbaf-modal-apply {
 background: var(--pb-mauve, #775973);
 color: #fff;
 border: none;
 border-radius: 8px;
 padding: 10px 20px;
 font-size: 14px;
 font-weight: 600;
 font-family: inherit;
 cursor: pointer;
}

.pbaf-modal-apply:hover { background: #6b4c5e; }

/* Box-shadow kill for modal buttons (Kadence override) */
.pbaf-modal-reset,
.pbaf-modal-cancel,
.pbaf-modal-apply,
.pbaf-modal-close {
 box-shadow: none !important;
}

/* ─── Modal buttons — beat Kadence theme cascade on every state ─────────── */
#pbaf-modal .pbaf-modal-apply,
#pbaf-modal .pbaf-modal-apply:link,
#pbaf-modal .pbaf-modal-apply:visited,
#pbaf-modal .pbaf-modal-apply:hover,
#pbaf-modal .pbaf-modal-apply:focus,
#pbaf-modal .pbaf-modal-apply:active {
 background: var(--pb-mauve, #775973) !important;
 color: #fff !important;
 border: 0 !important;
 text-decoration: none !important;
 box-shadow: none !important;
 text-transform: none !important;
 letter-spacing: normal !important;
 border-radius: 8px !important;
 padding: 10px 20px !important;
 font-weight: 600 !important;
 font-size: 14px !important;
 cursor: pointer !important;
}
#pbaf-modal .pbaf-modal-apply:hover,
#pbaf-modal .pbaf-modal-apply:focus {
 background: #5d3959 !important;
}

#pbaf-modal .pbaf-modal-cancel,
#pbaf-modal .pbaf-modal-cancel:link,
#pbaf-modal .pbaf-modal-cancel:visited,
#pbaf-modal .pbaf-modal-cancel:hover,
#pbaf-modal .pbaf-modal-cancel:focus,
#pbaf-modal .pbaf-modal-cancel:active {
 background: transparent !important;
 color: var(--pb-mauve, #775973) !important;
 border: 0 !important;
 text-decoration: none !important;
 box-shadow: none !important;
 text-transform: none !important;
 letter-spacing: normal !important;
 padding: 10px 16px !important;
 font-weight: 500 !important;
 font-size: 14px !important;
 cursor: pointer !important;
}
#pbaf-modal .pbaf-modal-cancel:hover,
#pbaf-modal .pbaf-modal-cancel:focus {
 color: #5d3959 !important;
 text-decoration: underline !important;
 text-underline-offset: 3px !important;
}

#pbaf-modal .pbaf-modal-close,
#pbaf-modal .pbaf-modal-close:link,
#pbaf-modal .pbaf-modal-close:visited,
#pbaf-modal .pbaf-modal-close:hover,
#pbaf-modal .pbaf-modal-close:focus,
#pbaf-modal .pbaf-modal-close:active {
 background: transparent !important;
 color: var(--pb-text, #2a2127) !important;
 border: 0 !important;
 text-decoration: none !important;
 box-shadow: none !important;
 padding: 6px !important;
 cursor: pointer !important;
 border-radius: 999px !important;
}
#pbaf-modal .pbaf-modal-close:hover,
#pbaf-modal .pbaf-modal-close:focus {
 background: rgba(107, 76, 94, 0.12) !important;
}
#pbaf-modal .pbaf-modal-close svg {
 stroke: currentColor !important;
 fill: none !important;
}

/* ================================================================
   Phase 3 — Hidden facets container + modal checkbox list
   ================================================================ */

/* ─── Hidden facets (off-screen; holds real FacetWP-rendered markup) ─────── */
.pbaf-hidden-facets {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 clip-path: inset(50%);
 white-space: nowrap;
 border: 0;
}

/* ─── Modal facet checkbox list ───────────────────────────────────────────── */
#pbaf-modal .pbaf-facet-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

#pbaf-modal .pbaf-facet-row {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 border-radius: 8px;
 cursor: pointer;
 user-select: none;
 transition: background 120ms ease;
}

#pbaf-modal .pbaf-facet-row:hover {
 background: rgba(107, 76, 94, 0.06);
}

#pbaf-modal .pbaf-facet-row.is-checked {
 background: rgba(119, 89, 115, 0.08);
}

#pbaf-modal .pbaf-facet-checkbox {
 width: 18px;
 height: 18px;
 min-width: 18px;
 border: 1.5px solid var(--pb-border, #e8e2e6);
 border-radius: 4px;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 120ms ease, border-color 120ms ease;
 position: relative;
}

#pbaf-modal .pbaf-facet-row.is-checked .pbaf-facet-checkbox {
 background: var(--pb-mauve, #775973);
 border-color: var(--pb-mauve, #775973);
}

#pbaf-modal .pbaf-facet-row.is-checked .pbaf-facet-checkbox::after {
 content: '';
 display: block;
 width: 5px;
 height: 9px;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 transform: rotate(45deg);
 position: relative;
 top: -1px;
}

#pbaf-modal .pbaf-facet-label {
 flex: 1 1 auto;
 font-size: 14px;
 color: var(--pb-text, #2a2127);
 line-height: 1.4;
 text-transform: capitalize;
}

/* ─── Global Reset filters link ──────────────────────────────────────────── */
#pbaf-chrome .pbaf-reset-all,
#pbaf-chrome .pbaf-reset-all:link,
#pbaf-chrome .pbaf-reset-all:visited {
 background: transparent !important;
 border: 0 !important;
 padding: 7px 10px !important;
 color: var(--pb-muted, #8a7e86) !important;
 font: inherit !important;
 font-size: 14px !important;
 font-weight: 500 !important;
 text-transform: none !important;
 letter-spacing: normal !important;
 text-decoration: underline !important;
 text-underline-offset: 3px !important;
 cursor: pointer !important;
 box-shadow: none !important;
 flex-shrink: 0;
 white-space: nowrap;
}

#pbaf-chrome .pbaf-reset-all:hover,
#pbaf-chrome .pbaf-reset-all:focus {
 color: var(--pb-text, #2a2127) !important;
 background: transparent !important;
 box-shadow: none !important;
}

@media (max-width: 767px) {
 #pbaf-chrome .pbaf-reset-all,
 #pbaf-chrome .pbaf-reset-all:link,
 #pbaf-chrome .pbaf-reset-all:visited {
  padding: 0 10px !important;
 }
}

/* ─── Pill count badge ────────────────────────────────────────────────────── */
#pbaf-chrome .pbaf-pill-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 background: var(--pb-mauve, #775973);
 color: #fff;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 600;
 line-height: 1;
}

#pbaf-chrome .pbaf-pill.is-active .pbaf-pill-count {
 background: rgba(255, 255, 255, 0.25);
 color: #fff;
}

/* ================================================================
   Phase 4 — All Filters panel + sheet-tall
   ================================================================ */

/* Desktop: slide in from right, full viewport height */
#pbaf-modal[data-pbaf-mode="panel"] {
 position: fixed !important;
 top: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 left: auto !important;
 width: min(420px, 90vw) !important;
 max-height: 100vh !important;
 height: 100vh !important;
 border-radius: 0 !important;
 box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18) !important;
 animation: pbaf-slide-in-right 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
 display: flex !important;
 flex-direction: column !important;
}

@keyframes pbaf-slide-in-right {
 from { transform: translateX(100%); }
 to   { transform: translateX(0); }
}

/* Panel hides drag handle (no swipe-down concept on desktop) */
#pbaf-modal[data-pbaf-mode="panel"] .pbaf-modal-handle {
 display: none !important;
}

/* Body scroll for both panel modes */
#pbaf-modal[data-pbaf-mode="panel"] .pbaf-modal-body,
#pbaf-modal[data-pbaf-mode="sheet-tall"] .pbaf-modal-body {
 flex: 1 1 auto;
 overflow-y: auto;
 padding: 0 20px;
}

/* ─── All Filters section structure ──────────────────────────────────────── */
#pbaf-modal .pbaf-all-filters-section {
 border-bottom: 1px solid var(--pb-border, #e8e2e6);
 padding: 0;
}

#pbaf-modal .pbaf-all-filters-section:last-child {
 border-bottom: 0;
}

#pbaf-modal .pbaf-all-filters-toggle,
#pbaf-modal .pbaf-all-filters-toggle:link,
#pbaf-modal .pbaf-all-filters-toggle:visited,
#pbaf-modal .pbaf-all-filters-toggle:hover,
#pbaf-modal .pbaf-all-filters-toggle:focus,
#pbaf-modal .pbaf-all-filters-toggle:active {
 width: 100%;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 12px;
 padding: 16px 0 !important;
 background: transparent !important;
 border: 0 !important;
 cursor: pointer !important;
 font-family: inherit !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 text-transform: none !important;
 letter-spacing: normal !important;
 color: var(--pb-text, #2a2127) !important;
 box-shadow: none !important;
 text-align: left !important;
}

#pbaf-modal .pbaf-allf-label-wrap {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

#pbaf-modal .pbaf-allf-count {
 color: var(--pb-mauve, #775973);
 font-weight: 600;
 font-size: 13px;
}

#pbaf-modal .pbaf-allf-chevron {
 color: var(--pb-muted, #8a7e86);
 flex-shrink: 0;
 transition: transform 200ms ease;
 display: inline-flex;
}

#pbaf-modal .pbaf-all-filters-section.is-expanded .pbaf-allf-chevron {
 transform: rotate(180deg);
}

#pbaf-modal .pbaf-allf-section-body {
 display: none;
 padding: 0 0 16px;
}

#pbaf-modal .pbaf-all-filters-section.is-expanded .pbaf-allf-section-body {
 display: block;
}

/* ─── Exclusive inline checkbox row ──────────────────────────────────────── */
#pbaf-modal .pbaf-all-filters-inline-row {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 4px 0;
 cursor: pointer;
 user-select: none;
}

#pbaf-modal .pbaf-all-filters-inline-row input[type="checkbox"] {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 cursor: pointer;
 accent-color: var(--pb-mauve, #775973);
}

/* ================================================================
   Empty state — no results after filtering
   ================================================================ */

.pbaf-empty-state {
 max-width: 480px;
 margin: 60px auto;
 padding: 40px 24px;
 text-align: center;
 color: var(--pb-text, #2a2127);
}

.pbaf-empty-state .pbaf-empty-heading {
 font-size: 18px;
 font-weight: 600;
 margin: 0 0 8px;
 color: var(--pb-text, #2a2127);
}

.pbaf-empty-state .pbaf-empty-sub {
 font-size: 14px;
 color: var(--pb-muted, #8a7e86);
 margin: 0 0 24px;
}

.pbaf-empty-state .pbaf-empty-reset,
.pbaf-empty-state .pbaf-empty-reset:link,
.pbaf-empty-state .pbaf-empty-reset:visited,
.pbaf-empty-state .pbaf-empty-reset:hover,
.pbaf-empty-state .pbaf-empty-reset:focus,
.pbaf-empty-state .pbaf-empty-reset:active {
 background: var(--pb-mauve, #775973) !important;
 color: #fff !important;
 border: 0 !important;
 border-radius: 999px !important;
 padding: 12px 28px !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.05em !important;
 cursor: pointer !important;
 box-shadow: none !important;
 transition: background 150ms ease !important;
}

.pbaf-empty-state .pbaf-empty-reset:hover,
.pbaf-empty-state .pbaf-empty-reset:focus {
 background: #5d3959 !important;
}

/* ================================================================
   Template min-height — keep footer below viewport on sparse results
   ================================================================ */

.facetwp-template {
 min-height: 80vh;
}

@media (max-width: 767px) {
 .facetwp-template {
  min-height: 70vh;
 }
 .pbaf-empty-state {
  margin: 0 auto;
 }
}

/* ================================================================
   Mobile: remove Kadence content-area top margin on archive pages
   ================================================================ */

/* The chrome provides its own spacing; the default 2rem margin-top from
   Kadence creates an empty band above the search bar on mobile. Scoped to
   body.pbaf-loaded so it only fires on archives where the chrome is active. */
@media (max-width: 767px) {
 body.pbaf-loaded #primary.content-area,
 body.pbaf-loaded .content-area {
  margin-top: 0 !important;
 }
}

/* ================================================================
   FacetWP AJAX duplicate + empty-state layout fixes
   ================================================================ */

/* FacetWP injects Kadence column/row-layout wrappers (containing selections
   + sort) inside the listing on every AJAX render, duplicating the static
   Kadence Element rendered above. Hide the injected copies. */
.facetwp-template > .wp-block-kadence-column,
.facetwp-template > .kb-row-layout-wrap {
 display: none !important;
}

/* Empty state spans all grid columns so the heading has full row width
   and doesn't collapse into a single narrow grid cell. */
.facetwp-template > .pbaf-empty-state {
 grid-column: 1 / -1;
}

/* ─── Number range facet ──────────────────────────────────────────────────── */
#pbaf-modal .pbaf-numrange {
 display: flex;
 gap: 12px;
 padding: 16px 0;
}
#pbaf-modal .pbaf-numrange-field {
 flex: 1 1 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
}
#pbaf-modal .pbaf-numrange-label {
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--pb-muted, #8a7e86);
}
#pbaf-modal .pbaf-numrange-input {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid var(--pb-border, #e8e2e6);
 border-radius: 8px;
 font-size: 14px;
 background: #fff;
 color: var(--pb-text, #2a2127);
 box-sizing: border-box;
 font-family: inherit;
}
#pbaf-modal .pbaf-numrange-input:focus {
 outline: 2px solid var(--pb-mauve, #775973);
 outline-offset: 1px;
 border-color: transparent;
}

/* Single-select facets use circle indicators instead of squares */
#pbaf-modal .pbaf-facet-list.is-single .pbaf-facet-checkbox {
 border-radius: 50% !important;
}

/* iOS Safari (and other mobile browsers) auto-zoom on tap of any input where
   computed font-size is below 16px. Pin chrome and modal inputs to 16px on
   touch viewports. Desktop keeps 14px for the more compact look. */
@media (max-width: 767px) {
 #pbaf-chrome input.facetwp-search,
 #pbaf-chrome .pbaf-search input,
 #pbaf-modal input[type="text"],
 #pbaf-modal input[type="number"],
 #pbaf-modal input[type="search"],
 #pbaf-modal .pbaf-numrange-input {
  font-size: 16px !important;
 }
}