/* =============================================================================
   MARINER FILTER — replaces the mo_filter sidebar UI on landing-page templates
   Loaded only on template-landing.php (see functions.php enqueue).
   The plugin's #filters element is hidden off-screen (kept interactive so
   daterangepicker math doesn't break); our .mariner-filter renders the new UI
   and a JS controller bridges state changes back to #filters.
   ============================================================================= */

/* ---------- Hide the plugin's UI; Mariner renders as a child of #filters - */
/* Keep #filters itself in flow (preserves the sidebar slot's width) but hide
   its plugin-emitted children. The JS controller injects .mariner-filter as
   the first child of #filters; we whitelist it back to visible. Children
   stay focusable & keep their values so daterangepicker math doesn't break. */
.dma-landing #filters.mo_filters > *,
#dma-filter-target #filters.mo_filters > * {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: 0 !important;
}
.dma-landing #filters.mo_filters > .mariner-filter,
#dma-filter-target #filters.mo_filters > .mariner-filter {
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
}
/* Reset the wrapper's own padding/border that's set elsewhere — Mariner
   provides its own shell. */
.dma-landing #filters.mo_filters,
#dma-filter-target #filters.mo_filters {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ---------- Hide the shortcode's duplicate page title -------------------- *
 * [mo_landing_page23] prints its own <h1>the_title()</h1> inside .mo_header
 * when the page's page_show_title meta is "yes". The new theme already shows
 * the title in the styled hero (.dma-landing__title), so the shortcode copy is
 * a duplicate — hide just the heading (keep .mo_header's intro/content text). */
.dma-landing .mo_header > h1 {
    display: none !important;
}

/* ---------- Container shell ---------------------------------------------- */
.mariner-filter {
    --mar-radius:    6px;
    --mar-radius-lg: 12px;
    --mar-shadow:    0 30px 60px -30px rgba(14,27,42,0.18);
    --mar-shadow-md: 0 16px 36px -12px rgba(31,26,22,0.18);
    --mar-shadow-pill: 0 4px 14px -6px rgba(14,27,42,0.4);
    --mar-shadow-cta:  0 8px 20px -10px rgba(14,27,42,0.4);
    --mar-font:        var(--sans, 'Inter', system-ui, sans-serif);
    --mar-serif:       var(--serif, 'Cormorant Garamond', serif);
    --mar-card:        #FFFFFF;

    width: 100%;
    max-width: 420px;
    background: var(--ivory-2);
    border: 0;
    border-radius: 0;
    /* visible (not hidden/clip) so the sticky "View results" footer anchors to
       #filters' scrollport rather than being captured by this element */
    overflow: visible;
    box-shadow: none;
    color: var(--txt);
    font-family: var(--mar-font);
    align-self: start;
    position: sticky;
    top: 24px;
}
/* While JS hasn't bootstrapped, keep the placeholder hidden. */
.mariner-filter[data-mariner-pending] { visibility: hidden; }
.mariner-filter * { box-sizing: border-box; }
.mariner-filter button { font-family: inherit; cursor: pointer; }
.mariner-filter input { font-family: inherit; }
.mariner-filter input::placeholder { color: var(--txt-3); }

/* ---------- Header ------------------------------------------------------- */
.mariner-filter .filter__header {
    padding: 24px 20px 8px;
    background: transparent;
    border-bottom: 0;
}
.mariner-filter .filter__header-row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.mariner-filter .filter__header-row > div:first-child { flex: 1; min-width: 0; }
.mariner-filter .filter__eyebrow {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.mariner-filter .filter__eyebrow::before {
    content: ''; width: 16px; height: 1px; background: var(--gold);
}
.mariner-filter .filter__eyebrow span {
    font-size: 9px; letter-spacing: 0.3em; color: var(--gold-deep); font-weight: 700;
}
.mariner-filter .filter__title {
    font-family: var(--mar-serif); font-size: 26px; font-weight: 400;
    line-height: 1.1; color: var(--txt); margin: 0;
}
.mariner-filter .filter__clear {
    padding: 6px 10px; background: transparent;
    border: 1px solid var(--rule); border-radius: 4px;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--txt-3);
}
.mariner-filter .filter__clear:hover { background: var(--ivory-2); color: var(--txt); }

/* ---------- Search ------------------------------------------------------- */
.mariner-filter .search {
    margin-top: 14px;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px;
    background: var(--mar-card);
    border: 1px solid var(--rule);
    border-radius: var(--mar-radius);
    transition: border-color .2s;
}
.mariner-filter .search:focus-within { border-color: var(--navy); }
.mariner-filter .search svg { flex-shrink: 0; }
.mariner-filter .search input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: 0; height: 100%; line-height: 1;
    font-size: 13px; color: var(--txt);
}
.mariner-filter .search__clear {
    background: transparent; border: none;
    color: var(--txt-3); font-size: 16px; padding: 0;
}

/* ---------- Section ------------------------------------------------------ */
.mariner-filter .section {
    padding: 14px 20px;
    border-bottom: 0;
}
.mariner-filter .section__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px;
}
.mariner-filter .section__label {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 600;
}
.mariner-filter .section__hint {
    font-size: 10px; color: var(--gold); letter-spacing: 0.06em;
}

/* ---------- Select (custom dropdown) ------------------------------------- */
.mariner-filter .select { position: relative; }
.mariner-filter .select__btn {
    width: 100%; height: 44px; box-sizing: border-box;
    padding: 0 14px;
    background: var(--mar-card);
    border: 1px solid var(--rule); border-radius: var(--mar-radius);
    font-size: 13px; color: var(--txt);
    display: flex; align-items: center; gap: 10px;
    transition: border-color .2s;
    text-align: left;
}
.mariner-filter .select__btn[data-empty="true"] { color: var(--txt-3); }
.mariner-filter .select__btn:hover { border-color: var(--txt-3); }
.mariner-filter .select__btn[aria-expanded="true"] { border-color: var(--navy); }
.mariner-filter .select__icon { color: var(--gold); font-size: 12px; display: inline-flex; align-items: center; }
.mariner-filter .select__icon svg { display: block; }
.mariner-filter .select__value {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mariner-filter .select__chev {
    font-size: 10px; color: var(--txt-3);
    transition: transform .25s;
}
.mariner-filter .select__btn[aria-expanded="true"] .select__chev { transform: rotate(180deg); }
.mariner-filter .select__menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: var(--mar-card); border: 1px solid var(--rule);
    border-radius: var(--mar-radius); max-height: 260px; overflow-y: auto;
    box-shadow: var(--mar-shadow-md);
    display: none;
    padding: 4px 0;
}
.mariner-filter .select__btn[aria-expanded="true"] + .select__menu { display: block; }
.mariner-filter .select__opt {
    width: 100%; padding: 10px 14px; text-align: left;
    background: transparent; border: none;
    border-left: 2px solid transparent;
    font-size: 13px; color: var(--txt);
    display: flex; align-items: center; gap: 10px;
}
.mariner-filter .select__opt:hover { background: rgba(31,26,22,.04); }
.mariner-filter .select__opt[aria-selected="true"] {
    background: var(--ivory-2);
    border-left-color: var(--navy);
}
.mariner-filter .select__opt-mark {
    width: 14px; height: 14px; flex: 0 0 auto;
    border: 1px solid var(--rule); border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: transparent;
    transition: all .15s;
}
.mariner-filter .select__opt[aria-selected="true"] .select__opt-mark {
    background: var(--navy); border-color: var(--navy); color: #fff;
}
.mariner-filter .select__opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-select chips */
.mariner-filter .select__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.mariner-filter .select__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 6px 5px 10px;
    background: var(--ivory-2);
    border: 1px solid var(--rule); border-radius: 999px;
    font-size: 11px; color: var(--txt);
    line-height: 1.2;
}
.mariner-filter .select__chip-x {
    width: 16px; height: 16px;
    background: transparent; border: none; padding: 0;
    color: var(--txt-3); font-size: 14px; line-height: 1;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.mariner-filter .select__chip-x:hover { background: var(--navy); color: #fff; }

/* ---------- Segment (boat type / hulls) ---------------------------------- */
.mariner-filter .segment {
    position: relative;
    display: grid;
    background: var(--mar-card);
    border: 1px solid var(--rule);
    border-radius: var(--mar-radius);
    padding: 4px;
}
.mariner-filter .segment__pill {
    position: absolute; top: 4px; bottom: 4px;
    background: var(--navy);
    border-radius: 4px;
    transition: left .35s cubic-bezier(.5,.1,.2,1), opacity .2s, width .35s cubic-bezier(.5,.1,.2,1);
    box-shadow: var(--mar-shadow-pill);
    pointer-events: none;
}
.mariner-filter .segment__pill[data-hidden="true"] { opacity: 0; }
.mariner-filter .segment__btn {
    position: relative; z-index: 1;
    padding: 10px 8px; background: transparent; border: none;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--txt);
    transition: color .25s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 4px;
}
.mariner-filter .segment__btn[aria-pressed="true"] { color: #ffffff; }
.mariner-filter .segment__btn .segment__icon { font-size: 12px; }
.mariner-filter .segment + .segment { margin-top: 8px; }

/* ---------- Counter (guests) --------------------------------------------- */
.mariner-filter .counter {
    display: flex; align-items: center; justify-content: space-between;
}
.mariner-filter .counter__btn {
    width: 36px; height: 36px;
    background: var(--mar-card);
    border: 1px solid var(--rule); border-radius: var(--mar-radius);
    font-size: 16px; color: var(--txt);
    transition: all .2s;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.mariner-filter .counter__btn:hover:not(:disabled) {
    background: var(--navy); color: #ffffff; border-color: var(--navy);
}
.mariner-filter .counter__btn:disabled {
    color: var(--txt-3); cursor: not-allowed; opacity: 0.6;
}
.mariner-filter .counter__value {
    display: flex; align-items: baseline; gap: 8px;
}
.mariner-filter .counter__num {
    font-family: var(--mar-serif);
    font-size: 32px; font-weight: 300; color: var(--txt); letter-spacing: -.02em;
}
.mariner-filter .counter__label {
    font-size: 10px; color: var(--txt-3);
    letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Price slider + histogram ------------------------------------- */
.mariner-filter .price__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
}
.mariner-filter .price__caption { font-size: 11px; color: var(--txt-3); letter-spacing: 0.06em; }
.mariner-filter .price__value   { font-size: 22px; font-weight: 500; color: var(--txt); font-family: var(--mar-serif); }
.mariner-filter .price__unit    {
    font-size: 10px; color: var(--txt-3);
    letter-spacing: 0.1em; text-transform: uppercase;
}
.mariner-filter .price__hist {
    display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-bottom: 6px;
}
.mariner-filter .price__bar {
    flex: 1; background: rgba(20,32,46,.12); border-radius: 1px;
    transition: background .15s;
}
.mariner-filter .price__bar[data-on="true"] { background: var(--navy); }
.mariner-filter .price__track {
    position: relative; height: 24px;
    display: flex; align-items: center;
    cursor: pointer; touch-action: none;
}
.mariner-filter .price__line {
    position: absolute; left: 0; right: 0; height: 2px;
    background: rgba(20,32,46,.12); border-radius: 1px;
}
.mariner-filter .price__fill {
    position: absolute; left: 0; height: 2px;
    background: var(--navy); border-radius: 1px;
    transition: width .2s;
}
.mariner-filter .price__fill[data-drag="true"] { transition: none; }
.mariner-filter .price__thumb {
    position: absolute; transform: translateX(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--navy); border: 3px solid var(--ivory);
    box-shadow: 0 2px 6px rgba(14,27,42,.22);
    transition: left .2s, box-shadow .2s;
}
.mariner-filter .price__thumb[data-drag="true"] {
    transition: none;
    box-shadow: 0 0 0 6px rgba(14,27,42,.14);
}

/* ---------- Amenities ---------------------------------------------------- */
.mariner-filter .amenities {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.mariner-filter .amenity {
    padding: 10px 12px;
    background: var(--mar-card);
    border: 1px solid var(--rule); border-radius: var(--mar-radius);
    font-size: 12px; color: var(--txt);
    display: flex; align-items: center; gap: 8px; text-align: left;
    transition: all .2s;
}
.mariner-filter .amenity:hover { background: var(--ivory-2); }
.mariner-filter .amenity__glyph {
    width: 12px; height: 12px; flex: 0 0 auto;
    border: 1.5px solid var(--txt-3);
    border-radius: 50%;
    background: transparent;
    transition: background .2s, border-color .2s;
}
.mariner-filter .amenity__label { flex: 1; }
.mariner-filter .amenity__check { font-size: 10px; color: var(--gold); display: none; }
.mariner-filter .amenity[aria-pressed="true"],
.mariner-filter .amenity[aria-pressed="true"] .amenity__label,
.mariner-filter .amenity[aria-pressed="true"] .amenity__check {
    color: var(--ivory) !important;     /* !important + 4-class specificity beats the plugin's `.mo_filters span` color override */
}
/* Doubled-class + button tag selector to outscore any unknown-source rule
   that's keeping the active chip white. */
button.amenity.amenity[aria-pressed="true"],
.mariner-filter button.amenity[aria-pressed="true"] {
    background: #0E1B2A !important;
    background-color: #0E1B2A !important;
    border-color: #0E1B2A !important;
}
.mariner-filter .amenity[aria-pressed="true"] {
    background: var(--navy) !important;
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
}
.mariner-filter .amenity[aria-pressed="true"] .amenity__glyph {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}
.mariner-filter .amenity[aria-pressed="true"] .amenity__check { display: inline !important; }

/* ---------- Footer ------------------------------------------------------- */
.mariner-filter .filter__footer {
    padding: 14px 20px;
    background: var(--mar-card);
    border-top: 1px solid var(--rule);
}
.mariner-filter .submit {
    width: 100%; padding: 14px 18px;
    background: var(--navy); color: var(--ivory);
    border: none; border-radius: var(--mar-radius);
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: var(--mar-shadow-cta);
    transition: background .2s;
}
.mariner-filter .submit:hover { background: var(--navy-2); }
.mariner-filter .submit__arrow { font-size: 16px; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 991px) {
    .mariner-filter {
        max-width: none;
        position: static;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }
}

/* ---------- Drawer leakage shield ---------------------------------------- */
/* When #filters is moved into #dma-filter-target, the legacy plugin-reset
   block in style.css uses generic selectors like `.mo_filters input[type=text]`
   that bleed onto Mariner's own inputs/buttons. Neutralize those generic
   resets so Mariner controls render identically to desktop. */
#dma-filter-target .mariner-filter input[type="text"],
#dma-filter-target .mariner-filter input[type="search"] {
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
#dma-filter-target .mariner-filter .search input {
    flex: 1 !important;
    height: 100% !important;
    line-height: 1 !important;
}
#dma-filter-target .mariner-filter .select__btn {
    background: var(--mar-card) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--mar-radius) !important;
    padding: 0 14px !important;
    height: 44px !important;
}
#dma-filter-target .mariner-filter .search {
    background: var(--mar-card) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--mar-radius) !important;
    padding: 0 14px !important;
    height: 44px !important;
}
#dma-filter-target .mariner-filter button {
    box-shadow: none !important;
}

/* ---------- Drawer parity — match the actual rendered desktop look ------ */
/* On desktop the rules `.dma-landing .mo_filters * { font-family: var(--sans) !important }`
   and `.dma-landing .mo_filters { color: #0E182A !important }` override Mariner's
   intended typography, so everything renders in Inter / navy (verified via
   DevTools). The drawer lives outside .dma-landing and doesn't inherit those
   rules — re-apply them inside the drawer so mobile renders identically. */
.dma-drawer--filter .offcanvas-body,
.dma-drawer--filter .dma-drawer__body {
    display: block !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0 !important;
}
/* Mirror the desktop cascade: force Inter on every Mariner descendant. */
#dma-filter-target .mariner-filter,
#dma-filter-target .mariner-filter *,
#dma-filter-target .mariner-filter p,
#dma-filter-target .mariner-filter span,
#dma-filter-target .mariner-filter div,
#dma-filter-target .mariner-filter a,
#dma-filter-target .mariner-filter label,
#dma-filter-target .mariner-filter button,
#dma-filter-target .mariner-filter input {
    font-family: var(--sans, 'Inter', system-ui, sans-serif) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Mirror the desktop color override: all text navy. */
#dma-filter-target .mariner-filter,
#dma-filter-target .mariner-filter p,
#dma-filter-target .mariner-filter span,
#dma-filter-target .mariner-filter div,
#dma-filter-target .mariner-filter a,
#dma-filter-target .mariner-filter label {
    color: #0E182A !important;
}
/* Re-apply the explicit element sizes (font-family is Inter via the rule
   above; sizes/weights from .mariner-filter need to win over MDB body). */
#dma-filter-target .mariner-filter .filter__title {
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}
#dma-filter-target .mariner-filter .price__value,
#dma-filter-target .mariner-filter .counter__num {
    font-size: 22px !important;
    font-weight: 500 !important;
}
#dma-filter-target .mariner-filter .filter__eyebrow,
#dma-filter-target .mariner-filter .filter__eyebrow span,
#dma-filter-target .mariner-filter .section__label,
#dma-filter-target .mariner-filter .filter__clear,
#dma-filter-target .mariner-filter .counter__label,
#dma-filter-target .mariner-filter .price__unit,
#dma-filter-target .mariner-filter .segment__btn,
#dma-filter-target .mariner-filter .section__hint {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}
#dma-filter-target .mariner-filter .select__value,
#dma-filter-target .mariner-filter .select__btn,
#dma-filter-target .mariner-filter .search input,
#dma-filter-target .mariner-filter #mar-search {
    font-size: 13px !important;
}

/* =============================================================================
   AJAX FILTER NAVIGATION — loading state + manual "View results" button
   Added for the AJAX/pushState filter (replaces the full-page reload) and the
   optional manual-apply mode (?filtermode=manual). Purely additive; remove this
   block to drop the styling without affecting the original markup.
   ============================================================================= */

/* ---------- Loading state while a filtered fetch is in flight ----------- */
.mo_results.mar-loading > * {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
/* Slim top progress bar — visible no matter how far the user has scrolled. */
.mo_results.mar-loading::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 4000;
    background: linear-gradient(90deg,
        var(--gold, #b89253) 0%, var(--gold, #b89253) 40%,
        rgba(184,146,83,0.15) 40%, rgba(184,146,83,0.15) 100%);
    background-size: 250% 100%;
    animation: mar-bar 1.1s linear infinite;
}
@keyframes mar-bar {
    0%   { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

/* ---------- Manual-apply footer + button (manual mode only) ------------- */
.mariner-filter__apply {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule, rgba(20,30,46,0.10));
}
.mar-apply-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--mar-radius, 6px);
    background: var(--navy, #14202e);
    color: #ffffff;
    font-family: var(--mar-font, 'Inter', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--mar-shadow-cta, 0 8px 20px -10px rgba(14,27,42,0.4));
    transition: background 0.18s ease, color 0.18s ease, transform 0.06s ease;
}
.mar-apply-btn:hover  { background: var(--gold-deep, #9c7a3f); }
.mar-apply-btn:active { transform: translateY(1px); }
/* Pending = the user changed filters but hasn't applied yet — pull attention. */
.mar-apply-btn.is-pending {
    background: var(--gold, #b89253);
    color: var(--navy, #14202e);
    animation: mar-pulse 1.8s ease-in-out infinite;
}
.mar-apply-btn.is-pending::after {
    content: '';
    position: absolute;
    top: 10px; right: 12px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--navy, #14202e);
}
@keyframes mar-pulse {
    0%, 100% { box-shadow: 0 8px 20px -10px rgba(184,146,83,0.6); }
    50%      { box-shadow: 0 8px 26px -6px  rgba(184,146,83,0.85); }
}
/* The mount travels into the mobile drawer with #filters; hide this copy
   there — the drawer's own footer "View results" button handles mobile apply. */
#dma-filter-target .mariner-filter__apply { display: none !important; }

/* =============================================================================
   LIGHT DENSITY TRIM — keep the filter at nearly its original size, just ~30px
   shorter, by lightly tightening the inter-section padding only. Every control
   keeps its original size/spacing. Remove this block (or bump the padding back
   to 14px) to restore the exact original spacing.
   ============================================================================= */
.mariner-filter .section { padding: 6px 20px; }
.mariner-filter .section__head { margin-bottom: 8px; }
/* Collapse the multi-select chip row when nothing is selected — it otherwise
   reserves ~10px under the Shipyard/Destination dropdowns. */
.mariner-filter .select__chips:empty { margin-top: 0; }
/* Tighten the header so the search sits closer to the "REFINE SEARCH" label.
   The "Clear (N)" button is shrunk so it no longer makes the header row taller
   than the eyebrow (which was pushing the search box down). */
.mariner-filter .filter__header { padding: 16px 20px 6px; }
.mariner-filter .filter__eyebrow { margin-bottom: 2px; }
.mariner-filter .filter__clear { padding: 4px 8px; }
.mariner-filter .search { margin-top: 6px; }

/* Pin "View results" to the bottom of the sticky sidebar so it is ALWAYS
   visible without scrolling, on any laptop height. If the filter is taller than
   the viewport, the options scroll inside #filters while this button stays put.
   (The mobile drawer uses its own footer button; this in-mount copy is hidden
   there via the #dma-filter-target rule above.) */
.mariner-filter .mariner-filter__apply {
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--ivory-2);
    box-shadow: 0 -12px 16px -10px rgba(20, 32, 46, 0.16);
    z-index: 5;
}