/**
 * Yacht Search Page Styles
 *
 * Covers the redesigned yachts-for-sale listing page:
 * sidebar filters, card grid, FEATURED badge, SEO content
 * sections, and responsive breakpoints.
 *
 * Existing card styles (.card-yacht, .card-yacht-listings, .meta,
 * .spec, etc.) live in the theme SCSS and are NOT overridden here.
 */

/* ==========================================================================
   0. jQuery UI structural base (slider + autocomplete)
   ==========================================================================

   yacht-search.js declares `jquery-ui-slider` and `jquery-ui-autocomplete` as
   SCRIPT dependencies, but WordPress core registers no jQuery UI STYLESHEET,
   so these widgets need their structural CSS supplied by us.

   The skin rules further down restyle both widgets (gold handles, custom
   dropdown), but a skin alone is not enough: a slider handle is a <span>, so
   without `position: absolute` it stays static and inline and its width,
   height and top are ignored outright — the draggable dots collapse to 0x0.
   The autocomplete menu likewise needs `position: absolute` or it renders in
   the document flow instead of anchored under the input.

   Until 2026-08-03 these rules came for free from the theme's global jQuery UI
   copy in main.css. That moved into a conditionally-loaded bundle which these
   page templates do not receive, so the dependency is now declared explicitly
   here, next to the skin that relies on it. Only the widgets this file
   actually uses are included: ~600 bytes, versus 28.6KB for the full jQuery UI
   smoothness theme.

   Source: jQuery UI 1.13 base. Keep this before the skin rules below.
   ========================================================================== */

.ui-slider{
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle{
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-slider .ui-slider-range{
    position: absolute;
    z-index: 1;
    font-size: 0.7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-slider-horizontal{
    height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle{
    top: -0.3em;
    margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range{
    top: 0;
    height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min{
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max{
    right: 0;
}

.ui-autocomplete{
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
}

.ui-front{
    z-index: 100;
}

.ui-menu{
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
}

.ui-menu .ui-menu{
    position: absolute;
}

.ui-menu .ui-menu-item{
    margin: 0;
    cursor: pointer;
}

.ui-menu .ui-menu-item-wrapper{
    position: relative;
    padding: 3px 1em 3px 0.4em;
}

/* Screen-reader live region jQuery UI appends for autocomplete results.
   Without this it renders as visible text on the page. */
.ui-helper-hidden-accessible{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* ==========================================================================
   1. Search Section Layout
   ========================================================================== */

/* The grid had no width cap and a hard three columns, so the cards simply grew
   with the viewport: 1007px wide and 745px tall on a 3440px display, three of
   them to a row. Capping the container keeps the card in a sane band and lets
   the auto-fill grid below add COLUMNS on big monitors instead of inflating
   the cards. 2100 is the point where a fourth 400px column earns its place. */
.yacht-search{
    display: flex;
    max-width: 2100px;
    margin: 0 auto;
    padding: 40px 30px;
    gap: 30px;
}

/* ==========================================================================
   2. Sidebar
   ========================================================================== */

.yacht-search__sidebar{
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    padding: 24px 24px 24px 0;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    align-self: flex-start;
    border-right: 1px solid #eee;
}

.yacht-search__sidebar label,
.yacht-search__sidebar .filter-label{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    margin-bottom: 6px;
}

.yacht-search__sidebar input[type="text"],
.yacht-search__sidebar input[type="number"],
.yacht-search__sidebar select{
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.yacht-search__sidebar input[type="text"]:focus,
.yacht-search__sidebar input[type="number"]:focus,
.yacht-search__sidebar select:focus{
    border-color: #fdba2e;
    outline: none;
}

/* Yacht name autocomplete dropdown */
.ui-autocomplete.ui-menu{
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ui-autocomplete.ui-menu .ui-menu-item-wrapper{
    padding: 8px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border: none;
}

.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper:hover{
    background: #f5f5f5;
    color: #1a1a1a;
    border: none;
    margin: 0;
}

.yacht-search__sidebar .filter-group{
    margin-bottom: 20px;
}

/* Explains a filter whose behaviour isn't obvious from the label — the
   charter Guests control matches capacity, not an exact party size. */
.yacht-search__sidebar .filter-hint{
    margin: 16px 0 0; /* clears the slider handle, which overhangs the track */
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #666; /* 5.7:1 on white — #777 fails AA at this size */
}

/* Charter cards add a fourth spec (Guests) to the card meta row. The theme's
   .meta--grid is a hard three columns with !important, so this overrides it —
   specificity has to beat .card-yacht-listings .inner .meta.meta--grid.

   Four equal columns don't work here: at a quarter of the card the LENGTH and
   GUESTS labels wrap mid-word, and Builder ends up marooned in the middle with
   dead space beside a short value like 110'. So the three short specs are
   sized to their content (the label is always the widest part, which keeps the
   columns consistent card to card) and Builder absorbs the remainder — it
   starts immediately after Length and wraps instead of overflowing, which
   matters for yards like "Cerri Cantieri Navali CCN". */
.card-yacht-listings .inner .meta.meta--grid.meta--grid-4up{
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content !important;
}

.card-yacht-listings .inner .meta.meta--grid.meta--grid-4up .spec span.label{
    white-space: nowrap;
}

/* The theme clamps every spec value to one nowrap line with an ellipsis, which
   turns "Lazzara Yachts" into "LAZZARA YA…" once Guests takes a share of the
   row. Builder is the only value long enough to need the room, so it alone is
   allowed to wrap — to two lines, so a long yard name can't push the gold
   panel to an arbitrary height. Not run through autoprefixer (plugin CSS, no
   build step), so the -webkit-box display is safe to hand-write here. */
.card-yacht-listings .inner .meta.meta--grid.meta--grid-4up .spec--builder > span:not(.label){
    white-space: normal;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

.yacht-search__sidebar .type-pill{
    display: inline-block;
    padding: 6px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.yacht-search__sidebar .type-pill:hover{
    border-color: #fdba2e;
}

.yacht-search__sidebar .type-pill.active{
    background: #fdba2e;
    color: #000;
    border-color: #fdba2e;
}

/* jQuery UI slider overrides */
.yacht-search__sidebar .ui-slider{
    height: 6px;
    background: #ddd;
    border: none;
    border-radius: 3px;
    position: relative;
    margin: 0 9px; /* half the handle width so handles don't clip at edges */
}

.yacht-search__sidebar .ui-slider .ui-slider-range{
    background: #fdba2e;
    border-radius: 3px;
}

.yacht-search__sidebar .ui-slider .ui-slider-handle{
    width: 18px;
    height: 18px;
    background: #fdba2e;
    border: none;
    border-radius: 50%;
    top: -6px;
    cursor: pointer;
    outline: none;
}

.yacht-search__sidebar .ui-slider .ui-slider-handle:focus,
.yacht-search__sidebar .ui-slider .ui-slider-handle:active{
    box-shadow: 0 0 0 3px rgba(200, 168, 78, 0.25);
}

/* Select2 overrides — multiselect */
.yacht-search__sidebar .select2-container{
    margin-bottom: 0 !important;
    height: auto !important;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple{
    border: 1px solid #ddd;
    border-radius: 0;
    min-height: 40px;
    padding: 5px 8px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple:focus,
.yacht-search__sidebar .select2-container--default.select2-container--open .select2-selection--multiple{
    border-color: #fdba2e;
    outline: none;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    list-style: none;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background: #f0f0f0;
    border: none;
    border-radius: 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #333;
    padding: 3px 8px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: #999;
    margin-right: 4px;
    font-size: 14px;
    line-height: 1;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    color: #333;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-search--inline{
    margin: 0;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-search__field{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin-top: 0;
    padding: 0 4px;
    line-height: 28px;
}

.yacht-search__sidebar .select2-container--default .select2-selection--multiple .select2-search__field::placeholder{
    color: #333;
    font-size: 14px;
}

/* Hide the clear-all X when multiple items selected — pills have individual X */
.yacht-search__sidebar .select2-selection__clear{
    display: none;
}

/* Select2 dropdown — match the select2 container width exactly */
.yacht-search__sidebar .select2-container--open .select2-dropdown{
    border: 1px solid #ddd;
    border-top: none;
    box-sizing: border-box !important;
}

.yacht-search__sidebar .select2-results{
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.yacht-search__sidebar .select2-results__option{
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Select2 dropdown — checkbox style results */
.select2-results__option{
    padding: 6px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.select2-results__option[aria-selected="true"]{
    background: #fef9ed;
    color: #333;
}

/* Select2 overrides — single (other dropdowns) */
.yacht-search__sidebar .select2-container--default .select2-selection--single{
    border: 1px solid #ddd;
    border-radius: 0;
    height: 38px;
    padding: 4px 12px;
}

.yacht-search__sidebar .select2-container--default .select2-selection--single:focus,
.yacht-search__sidebar .select2-container--default.select2-container--open .select2-selection--single{
    border-color: #fdba2e;
}

.yacht-search__sidebar .select2-container--default .select2-selection--single .select2-selection__rendered{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 28px;
}

/* Clear all — framed so it reads as the button it is.
   It was a bare underlined link sitting under the filter stack, which made a
   destructive action look like body text. Outlined rather than filled: it is
   secondary to "View Results", and a second solid button would compete. */
.yacht-search__sidebar .clear-all{
    display: block;
    width: 100%;
    color: #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 14px;
    margin-top: 12px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.yacht-search__sidebar .clear-all:hover,
.yacht-search__sidebar .clear-all:focus-visible{
    color: #1a1a1a;
    border-color: #fdba2e;
    background: #fff;
    text-decoration: none;
}

/* ==========================================================================
   3. Grid Header
   ========================================================================== */

.yacht-search__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid #eee;
    padding: 16px 0;
    margin-left: -30px;  /* bleed left to sidebar border */
    padding-left: 30px;
    margin-right: -30px; /* bleed right to page edge */
    padding-right: 30px;
    margin-bottom: 20px;
    position: sticky;
    top: 100px;
    background: #fff;
    z-index: 90;
}

.yacht-search__count{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

.yacht-search__results{
    flex: 1;
    min-width: 0;
}

.yacht-search__sort{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666;
}

.yacht-search__sort select{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 0;
    background: #fff;
}

.yacht-search__toggles{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.yacht-search__toggles .selector{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #555;
}

.yacht-search__toggles .toggle{
    cursor: pointer;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.yacht-search__toggles .toggle.active{
    color: #1a1a1a;
    font-weight: 600;
}

.yacht-search__toggles .toggle:hover{
    color: #1a1a1a;
}

select.yacht-search__sort{
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    background: #fff;
    border-radius: 0;
}

/* ==========================================================================
   4. Yacht Card Grid
   ========================================================================== */

/* auto-fill rather than a fixed three: the column COUNT follows the available
   width while each card stays in a 400-580px band. Two up at laptop widths
   (bigger cards, bigger photography), three from ~1700, four once the 2100
   cap is reached. The narrower breakpoints below still pin explicit counts —
   they come later in the file and win. */
.yacht-search__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}

/* Keep larger screens to three substantial cards beside the sidebar. */
@media (min-width: 2000px) {
    .yacht-search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sidebar visible + 2 cols on smaller desktops */
@media (min-width: 1025px) and (max-width: 1200px) {
    .yacht-search__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Override theme card width/flex — theme sets 50% flex-basis but grid cells handle sizing */
.yacht-search__grid .card-yacht-listings{
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

/* Remove gold gap below cards — grid gap handles spacing, not inner margin */
.yacht-search__grid .card-yacht-listings .inner{
    margin-bottom: 0;
}

/* Prevent hover shadow from bleeding onto neighbors */
.yacht-search__grid .card-yacht-listings .inner{
    position: relative;
    z-index: 1;
}
.yacht-search__grid .card-yacht-listings .inner:hover{
    z-index: 2;
}

.yacht-search__results{
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   5. FEATURED Badge
   ========================================================================== */

.yacht-card__badge{
    position: absolute;
    top: 10px;
    left: 10px;
    background: #000;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    z-index: 2;
    line-height: 1;
}

/* Sold overlay — semi-transparent bar across the image */
.yacht-card__sold-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.yacht-card__sold-overlay span{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    padding: 8px 24px;
    border: 2px solid #fff;
}

/* Ensure card image wrapper is positioned for the badge */
.yacht-search__grid .featured-image{
    position: relative;
}

/* ==========================================================================
   6. Load More Button
   ========================================================================== */

.yacht-search__load-more{
    text-align: center;
    padding: 40px 0;
}

.yacht-search__load-more button{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid #fdba2e;
    background: transparent;
    color: #333;
    padding: 14px 40px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
}

.yacht-search__load-more button:hover{
    background: #fdba2e;
    color: #fff;
}

.yacht-search__load-more button:focus{
    outline: none;
}

.yacht-search__load-more button.loading{
    opacity: 0.5;
    pointer-events: none;
}

.process-step{
    text-align: center;
    position: relative;
    z-index: 1;
}

.process-step__number{
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 300;
    color: #fdba2e;
    line-height: 1;
    margin-bottom: 16px;
    background: #fff;
    display: inline-block;
    padding: 0 10px;
}

.process-step__title{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    margin-bottom: 10px;
}

.faq-icon{
    color: #fdba2e;
    font-size: 24px;
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.3s;
    line-height: 1;
}

/* ==========================================================================
   14. Responsive Breakpoints
   ========================================================================== */

/* -- Mobile/tablet filter toggle button (inside sticky header) -- */
.yacht-search__mobile-filter-btn{
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}

.yacht-search__mobile-filter-btn:hover{
    background: #1a1a1a;
}

/* Close button inside mobile drawer */
.yacht-search__sidebar-close{
    display: none;
    position: fixed;
    top: 14px;
    right: 16px;
    background: #000;
    border: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 8px 14px;
    z-index: 10001;
    border-radius: 0;
}

/* Mobile filter drawer state — !important to override media query display:none */
.yacht-search__sidebar.yacht-search__sidebar.yacht-search__sidebar--mobile-open{
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding: 60px 24px 140px;
    max-height: none;
    border-right: none;
}

.yacht-search__sidebar.yacht-search__sidebar--mobile-open .yacht-search__sidebar-close{
    display: block;
}

/* Apply Filters button — shown only in mobile drawer */
.yacht-search__sidebar-apply{
    display: none;
}

.yacht-search__sidebar.yacht-search__sidebar--mobile-open .yacht-search__sidebar-apply{
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 24px;
    background: #000;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    cursor: pointer;
    z-index: 10001;
    text-align: center;
}

/* Move Clear All into the fixed bottom area on mobile */
.yacht-search__sidebar.yacht-search__sidebar.yacht-search__sidebar--mobile-open .clear-all{
    position: fixed;
    bottom: 56px;
    left: 0;
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 12px 0;
    z-index: 10001;
    margin: 0;
    border-top: 1px solid #eee;
}

/* -- Tablet: max-width 1024px -- */
@media (max-width: 1024px) {
    .yacht-search{
        flex-direction: column;
        padding: 30px 20px;
    }

    .yacht-search__sidebar{
        display: none;
        width: 100%;
        position: static;
        max-height: none;
        border-right: none;
        padding: 24px 0;
    }

    .yacht-search__mobile-filter-btn{
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .yacht-search__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yacht-search__count{
        font-size: 16px;
    }
}

/* -- Mobile: max-width 768px -- */
@media (max-width: 768px) {
    .yacht-search{
        padding: 24px 12px;
    }

    .yacht-search__grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .yacht-search__header{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        top: 60px;
        margin-inline: -12px;
        padding-inline: 12px;
    }

    .yacht-search__header .yacht-search__toggles{ order: 1; }
    .yacht-search__header .yacht-search__mobile-filter-btn{ order: 2; }
    .yacht-search__header .yacht-search__count{ order: 3; width: 100%; text-align: center; }

    .yacht-search__toggles{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .yacht-search__toggles .selector{
        font-size: 11px;
        white-space: nowrap;
    }

    select.yacht-search__sort{
        font-size: 11px;
        padding: 4px 6px;
        max-width: 130px;
    }

    .process-step{
        padding-bottom: 24px;
    }
}

/* ==========================================================================
   15. Grid Loading State
   ========================================================================== */

.yacht-search__grid.loading{
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ── No results ───────────────────────────────────────────────────
   Shown when a filter combination matches nothing. Before this an
   over-narrow filter left a 0px-tall grid, which reads as a page that
   failed rather than a search that found nothing. */
.smls-no-results {
    grid-column: 1 / -1;
    width: 100%;
    padding: 64px 24px;
    margin: 0 0 40px;
    background: #f9f9f9;
    text-align: center;
}

.smls-no-results[hidden] {
    display: none;
}

.smls-no-results__title {
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    font-size: 24px;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.smls-no-results__hint {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0 0 24px;
}

.smls-no-results__reset {
    display: inline-block;
    padding: 13px 30px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #1a1a1a;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.smls-no-results__reset:hover,
.smls-no-results__reset:focus-visible {
    background: #fdba2e;
    border-color: #fdba2e;
    color: #1a1a1a;
}

@media (max-width: 767px) {
    .smls-no-results {
        padding: 44px 18px;
    }

    .smls-no-results__title {
        font-size: 20px;
    }
}