...filters...
====================================================== */
#filtersToggle{ display:none; }
@media (max-width: 767.98px){
#filtersToggle{
display:flex;
align-items:center; justify-content:center; gap:.5rem;
width:100%;
border:1px solid var(--ay-gray-300);
background:#fff; color:var(--ay-text);
padding:.55rem .9rem; border-radius:.6rem;
margin-bottom: .75rem;
}
#filtersToggle .badge{
display:inline-block;
min-width:1.5rem; padding:.15rem .45rem; border-radius:999px;
background:var(--ay-primary); color:#fff; font-weight:600;
text-align:center;
}
#filtersPanel.is-collapsed{ display:none; }
.show-ayg-trigger{
margin-right:0;
}
}
/* =========================================================
Loader overlay
====================================================== */
.inv-loading {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
}
.inv-spinner{
width:46px; height:46px;
border:4px solid rgba(0,0,0,0.18);
border-top-color: var(--ay-primary);
border-radius:50%;
animation: inv-spin .8s linear infinite;
}
@keyframes inv-spin{ to{ transform:rotate(360deg); } }
/* =========================================================
Detail page typography + broker card
====================================================== */
.product-detail .vessel-meta .title{
color:#333;
font-family:"Poppins", Sans-serif;
font-size:30px; font-weight:700; line-height:1.4; letter-spacing:1px;
}
.product .meta dl{
color:#151515;
font-family:"Poppins", Sans-serif;
font-size:15px; line-height:1.4; letter-spacing:1px;
}
.product .meta a.btn{
background-color: var(--ay-primary);
border:1px solid var(--ay-primary);
color:#fff;
font-family:"Poppins", Sans-serif;
font-size:15px; letter-spacing:1px;
text-transform:capitalize;
padding:16px 36px;
border-radius:0;
line-height:1;
}
/* Center broker box on phones only */
@media (max-width: 767.98px){
.listing-meta .contact-box,
.listing-meta{ text-align:center; }
.listing-meta .avatar img{ margin:0 auto; }
}
/* =========================================================
Astra layout helpers (detail page full width)
====================================================== */
.boat-detail-page .site-content .ast-container{ display:block !important; }
.boat-detail-page #primary.content-area{ width:100% !important; margin:0 !important; }
.boat-detail-page #secondary,
.boat-detail-page .ast-sidebar{ display:none !important; }
#long-offer .elementor-field,
#long-offer input,
#long-offer textarea { text-transform: none !important; }
/* 3:2 thumbnails inside the inventory list */
#listingholder .inv-card .inv-thumb {
aspect-ratio: 3 / 2; /* 1200x800 */
display: block; /* works for or */
width: 100%;
overflow: hidden;
background: #eef2f5; /* placeholder color */
border-radius: 8px 8px 0 0; /* match your card, optional */
}
#listingholder .inv-card .inv-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* Fallback for older browsers */
@supports not (aspect-ratio: 1 / 1) {
#listingholder .inv-card .inv-thumb { position: relative; }
#listingholder .inv-card .inv-thumb::before {
content: "";
display: block;
padding-top: calc(100% * 2 / 3); /* 3:2 */
}
#listingholder .inv-card .inv-thumb > img { position: absolute; inset: 0; }
}
#thumbCarousel .f-carousel__slide { width:110px; height:70px; overflow:hidden; border-radius:4px; }
#thumbCarousel img, #thumbCarousel .thumb-video { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-video { position:relative; background:#000; color:#fff; }
.thumb-video__badge { position:absolute; bottom:4px; left:4px; font-size:11px; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:3px; }
.thumb-video__play { position:absolute; font-size:28px; line-height:1; opacity:.85; }
.filters-panel {
position: fixed !important;
top: 0;
left: 0;
width: 360px;
max-width: 90vw;
height: 100vh;
background: #fff;
transform: translateX(-100%);
transition: transform 0.4s ease;
z-index: 1050;
overflow-y: auto;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.sticky-filters {
position: sticky;
top: 90px; /* ← adjust if needed */
z-index: 3;
background: #fff;
}
body.admin-bar .sticky-filters {
top: 122px; /* header + WP admin bar */
}
.dropdown-menu {
z-index: 1060;
}
.filter-dropdown .checkbox-list{
margin-top: 1rem;
}
.filter-dropdown .dropdown-menu{
width:315px
}
.filter-dropdown .dropdown-menu {
position: relative;
padding-bottom: 50px; /* space for sticky footer */
}
.filter-dropdown .apply-footer {
position: sticky;
bottom: -14px;
background: #fff;
padding: 0;
border-top: 1px solid #ddd;
text-align: right;
z-index: 66;
height: 43px;
}
.applyBtn{
padding: 8px 10px !important;
margin-top: 10px;
float: right;
font-size: 12px !important;
}
/* Sticky filter bar */
.filters-bar {
position: sticky;
top: 0;
z-index: 1020;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
/* Filter buttons */
.filter-btn {
border: 1px solid #d0d5dd;
border-radius: 30px;
padding: 8px 16px;
background: #fff;
color: #0b2a4a;
font-weight: 600;
cursor: pointer;
transition: 0.2s ease;
}
.filter-btn.active {
background: #0b2a4a;
color: #fff;
}
/* Inventory scroll behavior */
#listingholdermain {
position: relative;
overflow-y: visible; /* allow page scroll */
max-height: none; /* remove height restriction */
padding-top: 1rem;
}
#listingholder {
overflow-x: hidden;
}
#filtersOverlay{
z-index:999;
}
/* Match dropdown buttons to form-select appearance */
.sticky-filters .dropdown-toggle {
background-color: #fff !important;
border: 1px solid #ced4da !important;
color: #212529 !important;
font-weight: 400;
text-align: left;
padding: 0.5rem 2rem 0.5rem 0.75rem;
border-radius: 0.5rem;
line-height: 1.5;
position: relative;
}
.sticky-filters .dropdown-toggle::after {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
}
/* On hover/focus: same as Bootstrap inputs */
.sticky-filters .dropdown-toggle:hover,
.sticky-filters .dropdown-toggle:focus {
background-color: #fff !important;
border-color: #86b7fe !important;
box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
color: #212529 !important;
}
/* Ensure dropdown menu aligns visually */
.sticky-filters .dropdown-menu {
margin-top: 0.25rem;
border-radius: 0.25em;
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
max-height: 400px; /* 👈 fixed height */
overflow-y: auto;
}
/* Input fields inside dropdowns */
.sticky-filters .dropdown-menu input.form-control {
background-color: #fff;
border: 1px solid #ced4da;
font-size: 0.875rem;
height: 2rem;
}
#quick-search{
padding: 12px;
}
.sticky-filters .filter-dropdown label {
display: flex;
align-items: center;
padding: 4px 8px;
gap: 8px; /* 👈 adds spacing between checkbox + label */
cursor: pointer;
font-size: 14px;
border-radius: 4px;
}
.filter-dropdown .dropdown-menu {
max-height: 320px;
overflow-y: auto;
position: relative;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 0 1rem 1rem;
}
/* Wrapper for the search input */
.filter-dropdown .search-wrapper {
position: sticky;
top: 0;
z-index: 5;
background: #fff; /* hides checkboxes underneath */
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #eee;
}
/* Search input styling */
.filter-dropdown .search-input {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 8px;
font-size: 0.9rem;
background-color: #fff;
}
.filters-panel__header{
display: flex;
align-items: center;
gap: 24px;
flex-wrap: nowrap;
}
.filters-panel__header h5{
flex: 0 0 auto;
margin: 0;
margin-left: 8px;
}
.filters-panel__header #reset-filters-flyout{
flex: 0 0 auto;
line-height: 1;
min-height: 28px;
padding: 0 14px;
display: inline-flex;
align-items: center;
white-space: nowrap;
margin: 0;
}
.filters-panel__header #reset-filters-flyout strong{
margin-left: .28em;
}
.filters-panel__close,
#closeFilters{
background: none;
background-color: transparent !important;
border: none;
color: #3f4650;
font-size: 36px;
position: static;
line-height: 1;
padding: 0;
min-width: 0;
min-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
text-decoration: none;
box-shadow: none !important;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.filters-panel__close:hover,
.filters-panel__close:focus,
#closeFilters:hover,
#closeFilters:focus{
text-decoration: none;
color: #111;
background: transparent !important;
box-shadow: none !important;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.sticky-filters{
top:0;
}
#quick-search{
margin-bottom: 12px;
}
#boats-inventory {
margin-top: 0;
}
.sticky-filters {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sticky-filters .search-input,
.sticky-filters select.form-select,
.sticky-filters .filters-button {
width: 100%;
}
.sticky-filters .dropdown-toggle,
.sticky-filters .dropdown {
display: none; /* hide secondary filters */
}
.sticky-filters .filters-button {
display: inline-block;
background-color: #0c2239;
color: #fff;
font-weight: 600;
border-radius: 0.25rem;
padding: 0.75rem;
border: none;
text-align: center;
}
#listingholdermain {
overflow-x: hidden; /* Prevent sideways scroll */
width: 100%;
}
#listingholder {
margin: 0;
padding: 0 5px;
width: 100%;
overflow-x: hidden;
}
.product-list > li,
.product-list .col,
.product-list .listing-item {
max-width: 100%;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
display: block; /* Prevent inline image spacing */
}
#boats-inventory .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* === Fix mobile centering & prevent horizontal slide === */
#listingholdermain,
#listingholder,
.boats-wrap,
#boats-inventory,
body {
overflow-x: hidden !important;
margin: 0;
padding: 0;
width: 100%;
max-width: 100vw;
}
/*#listingholder {*/
/* min-height: 300px; !* adjust to average card size *!*/
/*}*/
#listingholdermain {
overscroll-behavior: contain;
}
#listingholdermain {
transform: translateZ(0);
will-change: contents;
backface-visibility: hidden;
}
/* Remove Bootstrap row negative margins in this context */
#listingholder .row,
#listingholder.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure each listing item fits cleanly inside */
#listingholder .col,
.product-list > li {
max-width: 100%;
flex: 0 0 100%;
box-sizing: border-box;
}
/* --- Prevent mobile bounce and Safari overflow --- */
html, body {
overflow-x: hidden !important;
position: relative;
width: 100%;
}
/* Contain translated sidebar on iOS */
#filtersPanel {
transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000;
-webkit-perspective: 1000;
}
/* Prevent sticky filter rounding overflow */
#stickyFilters {
overflow-x: clip; /* better than hidden, keeps scroll smooth */
contain: paint; /* isolates rendering to avoid Safari jitter */
}
/* Optional: normalize container width rounding */
.container-fluid,
#boats-inventory,
#listingholdermain {
overflow-x: hidden !important;
}
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
position: relative;
}
/* Contain layout rounding errors from sticky or transformed sections */
#listingholdermain,
#boats-inventory,
.container-fluid,
.row,
section {
overflow-x: clip !important;
contain: paint;
}
/* GPU-promote and hide transformed off-screen elements */
#filtersPanel {
transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Normalize images & cards */
img, .card-img, .card-img-top {
max-width: 100%;
display: block;
height: auto;
}
#filtersPanel .range-filters .col-6 {
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
#filtersPanel .range-filters .col-6:nth-child(odd) {
padding-right: 5px !important; /* small inner gap */
}
#filtersPanel .range-filters .col-6:nth-child(even) {
padding-left: 5px !important;
}
}
/* Image wrapper maintains aspect ratio */
.img-wrapper {
position: relative;
width: 100%;
padding-bottom: 75%; /* 4:3 aspect ratio */
overflow: hidden;
background: #f0f0f0;
}
.img-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease-in;
z-index: 2;
}
.img-wrapper img.loaded {
opacity: 1;
}
/* Skeleton sits behind image */
.skeleton-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
background-size: 200% 100%;
z-index: 1;
transition: opacity 0.3s ease-out;
}
.skeleton-pulse {
animation: skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes skeleton-loading {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@media (max-width: 767px) {
.img-wrapper {
padding-bottom: 65%;
}
}
/* ── New / Brokerage condition toggle ── */
.bh-condition-toggle { text-align: center; padding: 16px 0 12px; background: #fff; }
.bh-toggle-btn {
display: inline-block;
padding: 10px 32px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
border: 2px solid #0a2240;
background: #fff;
color: #0a2240;
transition: background 0.2s, color 0.2s;
}
.bh-toggle-btn:first-of-type { border-radius: 6px 0 0 6px; border-right: none; }
.bh-toggle-btn:last-of-type { border-radius: 0 6px 6px 0; }
.bh-toggle-btn.active { background: #0a2240; color: #fff; }
.bh-toggle-btn:hover:not(.active) { background: #e8edf2; }
@media (max-width: 576px) {
.bh-condition-toggle { padding: 12px 16px; }
.bh-toggle-btn {
display: block;
width: 80%;
margin: 0 auto 8px;
border-radius: 6px !important;
border: 2px solid #0a2240 !important;
}
.bh-toggle-btn:last-of-type { margin-bottom: 0; }
}