.page-template-nav-search .body {
  margin-right: 0 !important;
  border-right: none !important;
}

.page-template-nav-search .sidebar-right {
  display: none !important;
}

.search-page {
  display: grid;
  gap: var(--spacing-4);
}

.search-page__form-shell {
  display: grid;
  gap: var(--spacing-4);
}

.search-page__hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--border-subtle);
}

.search-page__hero-copy {
  display: grid;
  gap: 6px;
}

.search-page__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(218, 180, 135, 0.78);
}

.search-page__title {
  margin: 0;
  color: var(--text-primary);
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.search-page__hero-actions {
  display: flex;
  align-items: center;
}

.search-page__filter-toggle {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.search-page__filter-toggle:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.search-page__results-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 2px;
}

.search-page__results-grid {
  display: flow-root;
  margin-top: var(--spacing-2);
}

.search-page__pagination {
  margin-top: var(--spacing-3);
}

.search-page__pagination::after {
  content: "";
  display: block;
  clear: both;
}

.search-page__empty-state {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
  margin-top: var(--spacing-3);
}

/* ==========================================================================
   PRIVATE-EDITORIAL REFINEMENT — THE FIELD GRID
   plans/private-editorial-ui-refinement-2026-09-18/plan.html, step 4.

   Search stays the dedicated, indexable precision surface: same URL, same
   POST names, same processor, same copy. What changes is that the form reads
   as one connected instrument instead of a stack of label/control pairs.

   Four groups set the rhythm — identity, location, attributes, flags. They
   are `role="group"` divs with an `aria-label` and NO visible heading, because
   this page's heading sequence and visible copy are frozen by the SEO
   contract. Grouping is carried by spacing and one hairline, which is the same
   grammar the rails use.

   The grid auto-flows, so a field whose `insearch()`/`showfield()` gate is off
   emits nothing and leaves no hole. That is what makes the two-level
   (country -> city) and three-level (country -> state -> city) location chains
   both correct without a second layout.
   ========================================================================== */

.search-page .ex-search {
  display: grid;
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  border: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
  border-radius: var(--ex-radius-panel-lg, 14px);
  background: var(--ex-surface-1, rgba(255, 255, 255, 0.025));
  font-family: var(--ex-font-product, 'Manrope', 'Inter', sans-serif);
}

/*
 * One boundary for the form; groups are separated by a rule, never boxed.
 * The identity group is deliberately first and deliberately narrow — a name
 * is the one thing a visitor types rather than picks.
 */
.search-page .ex-search__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--spacing-4);
}

.search-page .ex-search__group + .ex-search__group {
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
}

.search-page .ex-search__group--identity {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}

/* Attributes are the densest group and set the column rhythm for the rest. */
.search-page .ex-search__group--attributes {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.search-page .ex-search__field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

/* The label is a label, not a headline: one rank, one colour, one size. */
.search-page .ex-search__field .form-label,
.search-page .ex-search__flag .form-label {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.search-page .ex-search__field .form-label label,
.search-page .ex-search__flag .form-label label {
  display: block;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/*
 * The legacy form system floats `.form-input` and fixes its width. Inside the
 * grid it is a plain block that fills its cell — undoing the float here rather
 * than globally, because that float still holds every other form on the site
 * together.
 */
.search-page .ex-search__field .form-input,
.search-page .ex-search__flag .form-input {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.search-page .ex-search__field .form-input > input,
.search-page .ex-search__field .form-input > select:not(.select2-hidden-accessible),
.search-page .ex-search__field .form-input .select2-container {
  width: 100% !important;
  min-width: 0;
}

/*
 * Select2's container is capped at `max-width: 200px` by the legacy form
 * stylesheet, which is why the country dropdown sat as a 200px stub in a
 * 546px cell. The cap is released here rather than globally — every other
 * form on the site still wants it.
 *
 * `:not(.select2-hidden-accessible)` above matters as much: Select2 keeps the
 * real <select> in the page at 1px, absolutely positioned, for assistive
 * technology. Stretching it to 100% would have put a 1190px invisible element
 * in the layout and broken the horizontal-overflow guard.
 */
.search-page .ex-search__field .form-input .select2-container {
  display: block;
  max-width: none;
}

.search-page .ex-search__field .form-input > input,
.search-page .ex-search__field .form-input > select {
  min-height: var(--ex-field-height, 44px);
  border-radius: var(--ex-radius-control, 10px);
}

/* ------------------------------------------------- Dependent-location states

   A level that cannot be chosen yet says so, and says it the same way every
   time: same footprint, same radius, muted ink, `aria-disabled` for anyone not
   looking at it. Previously it was bare text in the flow, which changed the
   row height the moment a country was picked and shifted the fields below.
   -------------------------------------------------------------------------- */

.search-page .ex-search__field .form-input.inputstates,
.search-page .ex-search__field .form-input.inputcities {
  display: flex;
  align-items: center;
  min-height: var(--ex-field-height, 44px);
}

.search-page .ex-search__field .form-input.inputstates[aria-disabled="true"],
.search-page .ex-search__field .form-input.inputcities[aria-disabled="true"] {
  padding: 0 14px;
  border: 1px dashed var(--ex-hairline, rgba(255, 255, 255, 0.08));
  border-radius: var(--ex-radius-control, 10px);
  background: rgba(255, 255, 255, 0.015);
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.35;
}

/* Loading: the parent theme's own bar, inside a box that already holds the
   final shape — so nothing jumps when the real select arrives. */
.search-page .ex-search__field .form-input.is-loading {
  padding: 0 10px;
  border: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
  border-radius: var(--ex-radius-control, 10px);
  background: var(--ex-surface-2, rgba(255, 255, 255, 0.05));
}

.search-page .ex-search__field .form-input.is-loading .loader {
  width: 100%;
  margin: 0;
}

.search-page .ex-search__field .form-input.is-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-radius: var(--ex-radius-control, 10px);
  background: rgba(239, 68, 68, 0.07);
}

.ex-cascade__error-text {
  color: var(--error-ink, #F87171);
  font-size: 12.5px;
  line-height: 1.4;
}

.ex-cascade__retry {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ex-hairline-strong, rgba(255, 255, 255, 0.14));
  border-radius: var(--ex-radius-control-sm, 8px);
  background: var(--ex-surface-2, rgba(255, 255, 255, 0.05));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ex-motion-state, 150ms), border-color var(--ex-motion-state, 150ms);
}

.ex-cascade__retry:hover {
  border-color: var(--ex-hairline-strong, rgba(255, 255, 255, 0.14));
  background: var(--ex-surface-3, rgba(255, 255, 255, 0.075));
}

/*
 * The status line is the cascade's voice. It is a real, visible line rather
 * than a screen-reader-only region: "Loading locations…" and "No locations
 * available" are exactly as useful to someone watching the form as to someone
 * hearing it, and a visually hidden one would have left the sighted visitor
 * with an empty box and no explanation.
 */
.ex-cascade__status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1em;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.ex-cascade__status[data-tone="error"] { color: var(--error-ink, #F87171); }
.ex-cascade__status[data-tone="empty"] { color: var(--text-secondary); }
.ex-cascade__status:empty { display: none; }

/* ------------------------------------------------------------- Flag checkboxes

   Three yes/no questions that were three label-plus-question pairs stacked
   like text fields. They are one row of choices: the question stays as the
   field label, and the control beneath it is a real 44px target.
   -------------------------------------------------------------------------- */

.search-page .ex-search__group--flags {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.search-page .ex-search__flag {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.search-page .ex-search__flag .form-input > label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
  border-radius: var(--ex-radius-control, 10px);
  background: var(--ex-surface-2, rgba(255, 255, 255, 0.05));
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ex-motion-state, 150ms), border-color var(--ex-motion-state, 150ms), background-color var(--ex-motion-state, 150ms);
}

.search-page .ex-search__flag .form-input > label:hover {
  color: var(--text-primary);
  border-color: var(--ex-hairline-strong, rgba(255, 255, 255, 0.14));
}

/* A checked flag is a decision, so it reads as one — tint and ink, not gold. */
.search-page .ex-search__flag .form-input > label:has(input:checked) {
  color: var(--text-primary);
  border-color: rgba(139, 10, 26, 0.55);
  background: var(--ex-commit-soft, rgba(139, 10, 26, 0.16));
}

/*
 * A drawn checkbox rather than the native one. `accent-color` alone left
 * Chromium deriving a washed pink border for the unchecked state, which is
 * the exact magenta this product spent a whole phase removing. Drawing it
 * gives one square, one tick, the same 4px label radius as every other small
 * shape, and a checked state that is unmistakably the burgundy.
 */
.search-page .ex-search__flag .form-input input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--ex-hairline-strong, rgba(255, 255, 255, 0.14));
  border-radius: var(--ex-radius-label, 4px);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color var(--ex-motion-state, 150ms), background-color var(--ex-motion-state, 150ms);
}

.search-page .ex-search__flag .form-input > label:hover input[type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.28);
}

.search-page .ex-search__flag .form-input input[type="checkbox"]:checked {
  border-color: var(--ex-commit, #8B0A1A);
  background: var(--ex-commit, #8B0A1A);
}

/* The tick is drawn, so it inherits the control's ink and scales cleanly. */
.search-page .ex-search__flag .form-input input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--on-primary, #ECECEC);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------- Submit

   One dominant commit action, right-aligned at the end of the instrument, in
   normal document flow. No fixed bar: this page already has a member nav and
   a profile FAB, and a third fixed element would be a third thing competing
   for the same corner.
   -------------------------------------------------------------------------- */

.search-page .ex-search__submit {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
  text-align: right;
}

.search-page .ex-search__submit input[type="submit"] {
  float: none;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--ex-radius-control, 10px);
  background: var(--ex-commit, #8B0A1A);
  color: var(--on-primary, #ECECEC);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--ex-motion-state, 150ms), transform var(--ex-motion-state, 150ms);
}

.search-page .ex-search__submit input[type="submit"]:hover {
  background: var(--brand-primary-active, #6E0816);
}

.search-page .ex-search__submit input[type="submit"]:active {
  transform: translateY(1px);
}

/* The results summary loses its own container; it is a caption for the grid. */
.search-page__results-summary {
  padding: var(--spacing-3) 0;
  border: 0;
  border-top: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--ex-hairline, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  background: none;
}

.search-page__empty-state {
  border-radius: var(--ex-radius-panel, 12px);
  border-color: var(--ex-hairline, rgba(255, 255, 255, 0.08));
  background: var(--ex-surface-1, rgba(255, 255, 255, 0.025));
}

/* The filter toggle is a quiet control, not a second primary. */
.search-page__filter-toggle {
  border-radius: var(--ex-radius-control, 10px);
  border-color: var(--ex-hairline, rgba(255, 255, 255, 0.08));
  background: var(--ex-surface-2, rgba(255, 255, 255, 0.05));
}

.search-page__filter-toggle:hover {
  transform: none;
  border-color: var(--ex-hairline-strong, rgba(255, 255, 255, 0.14));
  background: var(--ex-surface-3, rgba(255, 255, 255, 0.075));
}

/* ------------------------------------------------------------------ Mobile

   Same field order, one column. Body text at 16px, every target at 44px, and
   the submit stays in flow.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {

  .search-page .ex-search {
    gap: var(--spacing-4);
    padding: var(--spacing-4);
  }

  .search-page .ex-search__group,
  .search-page .ex-search__group--attributes,
  .search-page .ex-search__group--flags {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-3);
  }

  .search-page .ex-search__group + .ex-search__group {
    padding-top: var(--spacing-4);
  }

  .search-page .ex-search__field .form-label label,
  .search-page .ex-search__flag .form-label label {
    font-size: 13px;
  }

  .search-page .ex-search__field .form-input > input,
  .search-page .ex-search__field .form-input > select,
  .search-page .ex-search__flag .form-input > label {
    font-size: 16px;
  }

  .search-page .ex-search__submit {
    justify-content: stretch;
  }

  .search-page .ex-search__submit input[type="submit"] {
    width: 100%;
  }
}