/* Kalio Property Listing - Frontend Styles */

/* ── Material Symbols base ── */

.kpl-card .material-symbols-outlined,
.kpl-single .material-symbols-outlined,
.kpl-filters .material-symbols-outlined,
.kpl-properties .material-symbols-outlined,
.kpl-pagination .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    font-size: inherit;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

.kpl-card__arrow .material-symbols-outlined {
    font-size: 20px !important;
}

.kpl-properties__arrow .material-symbols-outlined {
    font-size: 18px !important;
}

.kpl-pagination__btn .material-symbols-outlined {
    font-size: 16px !important;
}

.kpl-filters__chevron.material-symbols-outlined {
    font-size: 18px !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
}

.kpl-single__hero-arrow .material-symbols-outlined {
    font-size: 22px !important;
    color: #fff !important;
}

.kpl-single__gallery-arrow .material-symbols-outlined {
    font-size: 24px !important;
    color: #fff !important;
}

.kpl-single__includes-icon .material-symbols-outlined {
    font-size: 24px !important;
    color: #444 !important;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24 !important;
}

/* ── Filter Bar ── */

.kpl-filters {
    background: #fff !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}

/* Tablet/desktop: wrapper is layout-transparent so #kpl-filters grid is unchanged (use 768px so 768px-wide viewports still get grid) */
@media (min-width: 768px) {
    .kpl-filters__sheet-body {
        display: contents !important;
    }
}

/* 6-column unified grid: 3 × 1fr fields, 1fr spacer, auto Search, auto Toggle */
#kpl-filters {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: auto 0fr !important;
    align-items: end !important;
    column-gap: 20px !important;
    row-gap: 0px !important;
    padding: 14px 24px !important;
    transition: grid-template-rows 0.35s ease, row-gap 0.35s ease !important;
}

/* Search button: col 5, row 1 (collapsed) */
#kpl-filters > .kpl-filters__btn {
    grid-column: 5 !important;
    grid-row: 1 !important;
}

/* Toggle button: col 6, row 1 (collapsed) */
#kpl-filters .kpl-filters__toggle {
    grid-column: 6 !important;
    grid-row: 1 !important;
}

/* Refine fields: row 2, hidden by default */
.kpl-filters__field--refine {
    grid-row: 2 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    padding: 0 !important;
    transition: opacity 0.3s ease, max-height 0.35s ease, visibility 0.35s ease !important;
}

/* Expanded state */
#kpl-filters.kpl-filters--expanded {
    grid-template-rows: auto auto !important;
    row-gap: 20px !important;
}

#kpl-filters.kpl-filters--expanded > .kpl-filters__btn {
    grid-column: 6 !important;
}

#kpl-filters.kpl-filters--expanded .kpl-filters__toggle {
    grid-row: 2 !important;
}

#kpl-filters.kpl-filters--expanded .kpl-filters__field--refine {
    opacity: 1 !important;
    overflow: visible !important;
    max-height: 200px !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.kpl-filters__field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.kpl-filters__label {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
    line-height: 1 !important;
}

.kpl-filters select.kpl-filters__select,
.kpl-filters input[type="text"].kpl-filters__input,
#kpl-filters input[type="text"].kpl-filters__input,
.kpl-filters .kpl-filters__field input,
.kpl-filters .kpl-filters__field select {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #ccc !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1b2d4b !important;
    padding: 6px 0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    cursor: text !important;
    transition: border-color 0.2s ease !important;
}

.kpl-filters .kpl-filters__field select,
.kpl-filters select.kpl-filters__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231b2d4b' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    padding-right: 19px !important;
    cursor: pointer !important;
}

.kpl-filters .kpl-filters__field select:focus,
.kpl-filters .kpl-filters__field input:focus {
    border-bottom-color: #1b2d4b !important;
}

.kpl-filters .kpl-filters__field input::placeholder {
    color: #999 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.kpl-filters .kpl-filters__btn,
.kpl-filters .kpl-filters__btn:focus,
.kpl-filters .kpl-filters__btn:active,
.kpl-filters .kpl-filters__btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1d2a0e !important;
    color: #fff !important;
    border: 1px solid #1d2a0e !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 12px 35px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.kpl-filters .kpl-filters__btn:hover {
    background: #17220b !important;
    color: #fff !important;
    border: 1px solid #17220b !important;
    box-shadow: none !important;
}

/* Refine / Collapse toggle button */
.kpl-filters .kpl-filters__toggle,
.kpl-filters .kpl-filters__toggle:focus,
.kpl-filters .kpl-filters__toggle:active,
.kpl-filters .kpl-filters__toggle:visited {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #1d2a0e !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    padding: 12px 0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    line-height: 1.2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.kpl-filters .kpl-filters__toggle:hover {
    background: #f9fafb !important;
    color: #1d2a0e !important;
}

.kpl-filters .kpl-filters__toggle .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* ── Ancestor overflow overrides (sticky requires no scroll-container ancestors) ── */

html:has(.kpl-layout),
html:has(.kpl-layout) body,
html:has(.kpl-listings-page),
html:has(.kpl-listings-page) body,
html:has(.kpl-single),
html:has(.kpl-single) body {
    overflow-x: clip !important;
}

.e-con:has(.kpl-layout),
.e-con:has(.kpl-listings-page),
.e-con:has(.kpl-single),
.elementor-widget:has(.kpl-layout),
.elementor-widget:has(.kpl-listings-page),
.elementor-widget:has(.kpl-single),
.elementor-widget-container:has(.kpl-layout),
.elementor-widget-container:has(.kpl-listings-page),
.elementor-widget-container:has(.kpl-single),
.elementor-shortcode:has(.kpl-layout),
.elementor-shortcode:has(.kpl-listings-page),
.elementor-shortcode:has(.kpl-single) {
    overflow: visible !important;
}

/* ── Layout: Listings + Map ── */

.kpl-layout {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
}

/* ── Wrapper (listings panel) ── */

.kpl-wrapper {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    padding: 20px 20px 32px !important;
}

/* Listings shortcode: align grid with hero/filter container width */
.kpl-listings-page .kpl-layout .kpl-wrapper {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Full-width map below listings pagination */
.kpl-map-section {
    margin-top: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kpl-map-canvas,
#kpl-map.kpl-map-canvas {
    height: min(480px, 55vh) !important;
    width: 100% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f4f1eb !important;
    border: 1px solid #ede4d6 !important;
    box-shadow: 0 2px 12px rgba(27, 45, 75, 0.06) !important;
    z-index: 1 !important;
}

/* OSM fallback: nudge tiles toward site warm neutrals */
.kpl-map-section .leaflet-tile-pane img {
    filter: sepia(0.06) saturate(0.88) hue-rotate(-6deg) brightness(1.02) !important;
}

/* Zoom (+/−): match filter bar / primary UI */
.kpl-map-section .leaflet-bar {
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.kpl-map-section .leaflet-bar a {
    background: #fff !important;
    color: #1d2a0e !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 600 !important;
    line-height: 28px !important;
}

.kpl-map-section .leaflet-bar a:hover {
    background: #f9fafb !important;
    color: #17220b !important;
}

.kpl-map-section .leaflet-bar a:last-child {
    border-bottom: none !important;
}

.kpl-map-section .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #8b7a5e !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
}

.kpl-map-section .leaflet-control-attribution a {
    color: #1b2d4b !important;
}

/* Property card inside Leaflet popup (listings map) */
.kpl-map-popup-card .leaflet-popup-content-wrapper {
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
    overflow: visible !important;
}

.kpl-map-popup-card .leaflet-popup-content {
    margin: 0 !important;
    width: min(380px, calc(100vw - 48px)) !important;
    max-width: min(380px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
}

.kpl-map-popup-card .leaflet-popup-tip {
    box-shadow: none !important;
}

.kpl-map-card-wrap {
    max-width: 380px !important;
}

.kpl-map-card-wrap .kpl-card {
    max-width: 100% !important;
    margin: 0 !important;
}

/* Map popup only: inset subtitle, title, and meta row (grid cards unchanged) */
.kpl-map-popup-card .kpl-map-card-wrap .kpl-card__body {
    padding: 10px 20px 14px !important;
}

.kpl-map-card-popup--loading {
    padding: 24px 32px !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    color: #8b7a5e !important;
    text-align: center !important;
}

/* ── Map panel ── */

.kpl-map {
    flex: 0 0 35% !important;
    position: sticky !important;
    top: 79px !important;
    height: calc(100vh - 79px) !important;
    min-width: 0 !important;
    z-index: 1 !important;
}

.kpl-map-pin {
    background: none !important;
    border: none !important;
}

.kpl-cluster {
    background: none !important;
    border: none !important;
}

.kpl-cluster-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #1d2a0e !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(29, 42, 14, 0.4) !important;
    border: 3px solid rgba(255, 255, 255, 0.85) !important;
}

.kpl-map-popup .leaflet-popup-content-wrapper {
    border-radius: 2px !important;
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 14px !important;
    color: #1b2d4b !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.kpl-map-popup .leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.5 !important;
}

.kpl-map-popup .leaflet-popup-tip {
    box-shadow: none !important;
}

.kpl-map-popup__inner {
    padding: 12px 16px !important;
}

.kpl-map-popup__name {
    font-weight: 500 !important;
    margin: 0 0 3px !important;
    font-size: 14px !important;
    color: #1b2d4b !important;
}

.kpl-map-popup__location {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    color: #8b7a5e !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 8px !important;
}

.kpl-map-popup__btn {
    display: block !important;
    width: 100% !important;
    background: #1d2a0e !important;
    color: #fff !important;
    border: none !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background 0.2s ease !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}

.kpl-map-popup__btn:hover {
    background: #17220b !important;
}

/* ── Map collapse toggle ── */

.kpl-map-toggle {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 48px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0 !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    transition: background 0.2s ease !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08) !important;
}

.kpl-map-toggle:hover {
    background: #f3f4f6 !important;
}

.kpl-map-toggle .material-symbols-outlined {
    font-size: 18px !important;
    color: #1d2a0e !important;
    transition: transform 0.3s ease !important;
}

.kpl-layout--map-collapsed .kpl-map-toggle .material-symbols-outlined {
    transform: rotate(180deg) !important;
}

/* Collapsed map state */
.kpl-layout--map-collapsed .kpl-map {
    flex: 0 0 0px !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    transition: flex 0.4s ease, width 0.4s ease !important;
}

.kpl-layout--map-collapsed .kpl-map .leaflet-container,
.kpl-layout--map-collapsed .kpl-map .leaflet-control-container {
    opacity: 0 !important;
    pointer-events: none !important;
}

.kpl-layout--map-collapsed .kpl-map .kpl-map-toggle {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 4px 0 0 4px !important;
    border: 1px solid #e5e7eb !important;
    border-right: none !important;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08) !important;
    z-index: 1000 !important;
}

.kpl-layout--map-collapsed .kpl-wrapper {
    flex: 1 1 100% !important;
}

/* Smooth transitions for map expand/collapse */
.kpl-map {
    transition: flex 0.4s ease, width 0.4s ease !important;
}

.kpl-wrapper {
    transition: flex 0.4s ease !important;
}

/* Header */
.kpl-header {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.kpl-header__title {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    color: #1b2d4b !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

.kpl-header__count {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    color: #8b7a5e !important;
    font-weight: 400 !important;
}

/* Grid */
.kpl-listings-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--kpl-columns, 3), minmax(0, 1fr)) !important;
    gap: 52px 42px !important
}

/* Card */
.kpl-card {
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    position: relative !important;
    font-family: 'Libre Baskerville', Georgia, serif !important;
}

.kpl-card__link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    text-decoration: none !important;
    pointer-events: none !important;
}

.kpl-card__arrow,
.kpl-card__dot,
.kpl-card__badge {
    position: relative !important;
    z-index: 2 !important;
}

/* Image wrapper */
.kpl-card__image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    background: #eee !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Slider track: stacks all slides absolutely */
.kpl-card__slider-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.kpl-card__slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
    max-width: none !important;
    max-height: none !important;
}

.kpl-card__slide--active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.kpl-card__slide--placeholder {
    background: linear-gradient(135deg, #ddd 0%, #c5c5c5 100%) !important;
}

/* Arrow buttons */
.kpl-card__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1d2a0e !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, background 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.kpl-card__arrow--prev {
    left: 10px !important;
}

.kpl-card__arrow--next {
    right: 10px !important;
}

.kpl-card__image-wrap:hover .kpl-card__arrow {
    opacity: 1 !important;
}

.kpl-card__arrow:hover {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Badges (top-left) */
.kpl-card__badges {
    position: absolute !important;
    top: 12px !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    z-index: 3 !important;
}

.kpl-card__badge {
    display: inline-block !important;
    background: #fff !important;
    color: #1b2d4b !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 5px 11px 5px 10px !important;
    line-height: 1 !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%) !important;
}

.kpl-card__badge:nth-child(2) {
    background: #e8909a !important;
    color: #fff !important;
}

/* Image dots (carousel indicator) */
.kpl-card__dots {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 5px !important;
    z-index: 3 !important;
}

.kpl-card__dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    transition: width 0.3s ease, border-radius 0.3s ease, background 0.2s ease !important;
}

.kpl-card__dot--active {
    width: 14px !important;
    border-radius: 3px !important;
    background: #fff !important;
}

/* Card body */
.kpl-card__body {
    position: relative !important;
    z-index: 2 !important;
    padding: 10px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    pointer-events: auto !important;
}

.kpl-card__subtitle {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
    margin: 0 0 4px !important;
    line-height: 1.4 !important;
    font-family: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.kpl-card__title {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin: 0 0 7px !important;
    line-height: 1.3 !important;
    color: #1b2d4b !important;
    letter-spacing: 0px !important;
}

/* Meta row */
.kpl-card__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-top: 10px !important;
    margin-top: auto !important;
}

.kpl-card__meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    color: #4a5568 !important;
    white-space: nowrap !important;
    position: relative !important;
    outline: none !important;
}

/* Tooltip (caret + label); shown on hover / focus for keyboard */
.kpl-card__meta-item::after {
    content: attr(data-kpl-tooltip) !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 10px) !important;
    transform: translateX(-50%) !important;
    padding: 10px 14px !important;
    background: #ede4d6 !important;
    color: #1a1a1a !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 50 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.kpl-card__meta-item::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 4px) !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 7px solid #ede4d6 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 51 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

@media (hover: hover) {
    .kpl-card__meta-item:hover::before,
    .kpl-card__meta-item:hover::after {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .kpl-card__meta-item:hover {
        z-index: 52 !important;
    }
}

.kpl-card__meta-item:focus-visible::before,
.kpl-card__meta-item:focus-visible::after {
    opacity: 1 !important;
    visibility: visible !important;
}

.kpl-card__meta-item:focus-visible {
    z-index: 52 !important;
}

.kpl-card__meta-item .material-symbols-outlined {
    color: #1b2d4b !important;
    flex-shrink: 0 !important;
    font-size: 22px !important;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
}

/* Paw: SVG stroke (Lucide paw-print) matches thin outlined Material meta icons better than the MS “pets” glyph */
.kpl-card__meta-icon--paw {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #1b2d4b !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
}

.kpl-card__meta-icon--paw svg {
    display: block !important;
}

.kpl-card__meta-item--highlight {
    color: #8b7a5e !important;
}

.kpl-card__meta-item--highlight .material-symbols-outlined,
.kpl-card__meta-item--highlight .kpl-card__meta-icon--paw {
    color: #1b2d4b !important;
}

.kpl-card__meta-item--muted {
    color: #a0aec0 !important;
}

.kpl-card__meta-item--muted .material-symbols-outlined,
.kpl-card__meta-item--muted .kpl-card__meta-icon--paw {
    color: #1b2d4b !important;
}

/* ── Pagination ── */

.kpl-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e5e5e5 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}

.kpl-pagination__pages {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.kpl-pagination__btn,
.kpl-pagination__num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #1d2a0e !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
}

.kpl-pagination__btn:hover:not(:disabled),
.kpl-pagination__num:hover:not(.kpl-pagination__num--active) {
    background: #f5f5f5 !important;
    border-color: #1d2a0e !important;
}

.kpl-pagination__num--active {
    background: #1d2a0e !important;
    color: #fff !important;
    border-color: #1d2a0e !important;
    cursor: default !important;
}

.kpl-pagination__btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.kpl-pagination__ellipsis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    color: #999 !important;
    letter-spacing: 2px !important;
}

/* No listings */
.kpl-no-listings {
    text-align: center !important;
    padding: 64px 16px !important;
    color: #a0aec0 !important;
    font-size: 16px !important;
    letter-spacing: 0px !important;
}

/* Grid loading state */
.kpl-listings-grid {
    transition: opacity 0.2s ease !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .kpl-wrapper {
        flex: none !important;
    }

    .kpl-listings-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px 14px !important;
    }
}

@media (max-width: 768px) {
}

@media (max-width: 640px) {
    .kpl-wrapper {
        padding: 20px 12px !important;
    }

    .kpl-header {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .kpl-header__title {
        font-size: 20px !important;
    }

    .kpl-listings-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ══════════════════════════════════════════════════
   SINGLE PROPERTY PAGE
   ══════════════════════════════════════════════════ */

.kpl-single {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px 64px !important;
    font-family: 'Libre Baskerville', Georgia, serif !important;
    color: #1b2d4b !important;
}

/* Breadcrumb */
.kpl-single__breadcrumb {
    font-family: 'Hanken Grotesk', sans-serif !important;
    padding: 20px 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
}

.kpl-single__breadcrumb a {
    color: #8b7a5e !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.kpl-single__breadcrumb a:hover {
    color: #1b2d4b !important;
}

.kpl-single__breadcrumb-sep {
    margin: 0 6px !important;
    opacity: 0.5 !important;
}

.kpl-single__breadcrumb-current {
    color: #1b2d4b !important;
}

/* Header */
.kpl-single__header {
    margin-bottom: 20px !important;
}

.kpl-single__header .kpl-single__specs {
    margin-top: 10px !important;
}

.kpl-single__heading {
    display: block !important;
}

.kpl-single__title {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    letter-spacing: 0px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    color: #1b2d4b !important;
}

.kpl-single__location {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
    margin: 0 0 8px !important;
}

.kpl-single__specs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: #1b2d4b !important;
    margin: 0 !important;
}

.kpl-single__spec::after {
    content: "\00b7" !important;
    margin: 0 10px !important;
    font-weight: 700 !important;
    color: #999 !important;
}

.kpl-single__spec:last-child::after {
    display: none !important;
}

/* ── Hero Slider ── */
.kpl-single__hero {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    height: 65vh !important;
    min-height: 400px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    background-color: #eee !important;
}

/* Top sand gradient: same as [kalio_hero] — header visibility over slider */
.kpl-single__hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        rgba(237, 228, 214, 0.92) 0%,
        rgba(232, 218, 198, 0.55) 22%,
        rgba(228, 212, 188, 0.2) 42%,
        transparent 58%
    ) !important;
}

.kpl-single__hero-slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease-in-out !important;
    z-index: 0 !important;
}

.kpl-single__hero-slide--active {
    opacity: 1 !important;
    z-index: 1 !important;
}

.kpl-single__hero-arrow {
    all: unset !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.kpl-single__hero-arrow:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

.kpl-single__hero-arrow--prev {
    left: 24px !important;
}

.kpl-single__hero-arrow--next {
    right: 24px !important;
}

.kpl-single__hero-inner {
    position: absolute !important;
    inset: 0 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.kpl-single__hero-gallery-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin-bottom: 24px !important;
    backdrop-filter: blur(4px) !important;
    pointer-events: auto !important;
}

.kpl-single__hero-gallery-btn .material-symbols-outlined {
    font-size: 18px !important;
}

.kpl-single__hero-gallery-btn:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

.kpl-single__hero-badges {
    position: absolute !important;
    top: 16px !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    z-index: 3 !important;
}

.kpl-single__hero-badge {
    display: inline-block !important;
    background: #fff !important;
    color: #1b2d4b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 5px 11px 5px 10px !important;
    line-height: 1 !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%) !important;
}

.kpl-single__hero-badge--alt {
    background: #e8909a !important;
    color: #fff !important;
}

/* ── Info bar ── */
.kpl-single__info-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

.kpl-single__subtitle {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
    margin: 0 !important;
}

.kpl-single__stats {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
}

.kpl-single__stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    color: #555 !important;
}

.kpl-single__stat strong {
    color: #1b2d4b !important;
    font-weight: 600 !important;
}

.kpl-single__stat .material-symbols-outlined {
    color: #8b7a5e !important;
    font-size: 20px !important;
    position: relative !important;
    top: -1px !important;
}

/* ── Two-column layout ── */
.kpl-single__layout {
    display: flex !important;
    gap: 48px !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    margin-top: 30px !important;
}

.kpl-single__main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.kpl-single__sidebar {
    flex: 0 0 380px !important;
    position: sticky !important;
    top: 32px !important;
    align-self: flex-start !important;
    z-index: 10 !important;
}

/* ── Sidebar Card ── */
.kpl-single__sidebar-card {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    padding: 0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    margin-top: 0 !important;
}

.kpl-single__sidebar-name {
    font-size: 24px !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    color: #1b2d4b !important;
    line-height: 1.3 !important;
}

.kpl-single__sidebar-location {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
    margin: 0 0 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.kpl-single__sidebar-btn {
    display: block !important;
    width: 100% !important;
    background: #1d2a0e !important;
    color: #fff !important;
    text-align: center !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: background 0.2s ease !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.kpl-single__sidebar-btn:hover {
    background: #17220b !important;
    color: #fff !important;
}

.kpl-single__sidebar-times {
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.kpl-single__sidebar-time {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    color: #444 !important;
}

.kpl-single__sidebar-time-lbl {
    font-weight: 600 !important;
    color: #1b2d4b !important;
}

.kpl-single__sidebar-time-val {
    color: #555 !important;
}

/* ── Booking Widget ── */
.kpl-single__booking-widget {
    margin-top: 0 !important;
    background: none !important;
    padding: 0 !important;
}

.kpl-single__sidebar-name + .kpl-single__booking-widget {
    margin-top: 20px !important;
}

.kpl-single__booking-widget iframe {
    width: 100% !important;
    border: none !important;
    display: block !important;
    overflow: hidden !important;
}

/* ── Tab Navigation (sticky, scroll-to) ── */
.kpl-single__tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid #eee !important;
    position: sticky !important;
    top: 0 !important;
    background: unset !important;
    z-index: 50 !important;
    padding: 0 !important;
}

.kpl-single__tab {
    all: unset !important;
    padding: 16px 24px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #999 !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.2s, border-color 0.2s !important;
}

.kpl-single__tab:hover {
    color: #1d2a0e !important;
}

.kpl-single__tab--active {
    color: #1d2a0e !important;
    border-bottom-color: #1d2a0e !important;
}

/* ── Sections (always visible, scroll targets) ── */
.kpl-single__section {
    padding: 40px 0 16px !important;
}

.kpl-single__section:first-of-type {
    padding-top: 0 !important;
}

.kpl-single__section-title {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    margin: 0 0 24px !important;
    color: #1b2d4b !important;
}

.kpl-single__sub-title {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    margin: 32px 0 12px !important;
    color: #1b2d4b !important;
}

/* Description with read more (collapsed length is word-limited in JS; ellipsis in text) */
.kpl-single__description-text {
    position: relative !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #444 !important;
}

.kpl-single__description-text p {
    margin: 0 0 8px !important;
}

.kpl-single__description-text p:last-child {
    margin-bottom: 0 !important;
}

.kpl-single__read-more {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    margin-top: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1d2a0e !important;
    cursor: pointer !important;
    border-bottom: 1px solid #1d2a0e !important;
    padding-bottom: 2px !important;
    transition: color 0.2s !important;
}

.kpl-single__read-more .material-symbols-outlined {
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

.kpl-single__read-more--expanded .material-symbols-outlined {
    transform: rotate(180deg) !important;
}

.kpl-single__read-more:hover {
    color: #8b7a5e !important;
    border-color: #8b7a5e !important;
}

/* Rooms — structured cards (HomHero API), 3-up grid on desktop */
.kpl-single__rooms {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.kpl-single__room-card {
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.kpl-single__room-card-title {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 0 !important;
    line-height: 1.35 !important;
}

.kpl-single__room-card-divider {
    height: 0 !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    margin: 14px 0 16px !important;
}

.kpl-single__room-card-beds {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.kpl-single__room-card-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.kpl-single__room-card-icon.material-symbols-outlined {
    font-size: 22px !important;
    width: 26px !important;
    flex-shrink: 0 !important;
    color: #333 !important;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
}

.kpl-single__room-card-text {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
    line-height: 1.45 !important;
}

.kpl-single__room-card-bath {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.kpl-single__room-card-bath-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kpl-single__room-card-note {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 16px 0 0 !important;
}

/* Legacy room chips (pre-API shape) — full width under structured grid */
.kpl-single__rooms-legacy {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

.kpl-single__room--legacy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 24px 16px !important;
}

.kpl-single__room-icon.material-symbols-outlined {
    font-size: 32px !important;
    color: #333 !important;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 32 !important;
}

.kpl-single__room-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1d2a0e !important;
}

.kpl-single__room-desc {
    font-size: 13px !important;
    color: #888 !important;
    font-weight: 400 !important;
}

/* ── Your Stay Here Includes (grid) ── */
.kpl-single__includes-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 32px !important;
    margin-bottom: 40px !important;
}

.kpl-single__includes-card {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.kpl-single__includes-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

.kpl-single__includes-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: #444 !important;
    line-height: 1.6 !important;
}

/* Amenities */
.kpl-single__amenities-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.kpl-single__amenities-grid--collapsed {
    overflow: hidden !important;
}

.kpl-single__read-more--hidden {
    display: none !important;
}

.kpl-single__amenity {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #444 !important;
    border-bottom: none !important;
}

.kpl-single__amenity .material-symbols-outlined {
    flex-shrink: 0 !important;
    font-size: 18px !important;
    color: #1b2d4b !important;
}

/* Gallery */
.kpl-single__gallery {
    max-width: 100% !important;
    overflow: hidden !important;
}

.kpl-single__gallery-main {
    position: relative !important;
    width: 100% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.kpl-single__gallery-main img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.kpl-single__gallery-arrow {
    all: unset !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    z-index: 2 !important;
}

.kpl-single__gallery-arrow:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

.kpl-single__gallery-arrow--prev {
    left: 16px !important;
}

.kpl-single__gallery-arrow--next {
    right: 16px !important;
}

.kpl-single__gallery-counter {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 11px !important;
    border-radius: 3px !important;
    z-index: 2 !important;
    letter-spacing: 1px !important;
}

.kpl-single__gallery-thumbs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 0 10px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #8b7a5e #f5f0e8 !important;
}

.kpl-single__gallery-thumbs::-webkit-scrollbar {
    height: 4px !important;
}

.kpl-single__gallery-thumbs::-webkit-scrollbar-track {
    background: #f5f0e8 !important;
    border-radius: 4px !important;
}

.kpl-single__gallery-thumbs::-webkit-scrollbar-thumb {
    background: #8b7a5e !important;
    border-radius: 4px !important;
}

.kpl-single__gallery-thumbs::-webkit-scrollbar-thumb:hover {
    background: #6e6049 !important;
}

.kpl-single__gallery-thumb {
    width: 80px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    opacity: 0.5 !important;
    transition: opacity 0.25s ease, box-shadow 0.25s ease !important;
    flex-shrink: 0 !important;
    border: 2px solid transparent !important;
}

.kpl-single__gallery-thumb:hover {
    opacity: 0.85 !important;
}

.kpl-single__gallery-thumb--active {
    opacity: 1 !important;
    border-color: #8b7a5e !important;
    box-shadow: 0 1px 4px rgba(139, 122, 94, 0.35) !important;
}

/* Location map */
.kpl-single__map {
    width: 100% !important;
    height: 400px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* ── Similar properties ── */
.kpl-single__similar {
    margin-top: 64px !important;
    padding-top: 48px !important;
    border-top: 1px solid #eee !important;
}

.kpl-single__similar-label {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8b7a5e !important;
    margin: 0 0 6px !important;
}

.kpl-single__similar-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
}

.kpl-single__similar-title {
    font-size: 32px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: #1b2d4b !important;
}

.kpl-single__similar-link {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1d2a0e !important;
    text-decoration: none !important;
    border-bottom: 1px solid #1d2a0e !important;
    padding-bottom: 2px !important;
}

.kpl-single__similar-link:hover {
    color: #8b7a5e !important;
    border-color: #8b7a5e !important;
}

.kpl-single__similar-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

/* ── Other Properties by Interest ── */
.kpl-single__interests {
    margin-top: 48px !important;
    padding-top: 32px !important;
    border-top: 1px solid #eee !important;
}

.kpl-single__interests-title {
    font-size: 24px !important;
    font-weight: 400 !important;
    margin: 0 0 20px !important;
    color: #1b2d4b !important;
}

.kpl-single__interests-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.kpl-single__interest-pill {
    display: inline-block !important;
    padding: 8px 20px !important;
    border: 1px solid #ddd !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: #1d2a0e !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: background 0.2s, border-color 0.2s !important;
}

.kpl-single__interest-pill:hover {
    background: #1d2a0e !important;
    border-color: #1d2a0e !important;
    color: #fff !important;
}

/* ── Single page responsive ── */
@media (max-width: 960px) {
    .kpl-single__layout {
        flex-direction: column !important;
    }

    .kpl-single__sidebar {
        flex: none !important;
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin-top: 24px !important;
        margin-bottom: 0 !important;
        z-index: auto !important;
    }

    .kpl-single__similar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpl-single__rooms {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .kpl-single {
        padding: 0 20px 48px !important;
    }

    .kpl-single__title {
        font-size: 28px !important;
    }

    .kpl-single__hero {
        height: 50vh !important;
        min-height: 300px !important;
    }

    .kpl-single__amenities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpl-single__rooms {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpl-single__rooms-legacy {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpl-single__tab {
        padding: 12px 16px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .kpl-single {
        padding: 0 16px 40px !important;
    }

    .kpl-single__includes-grid {
        grid-template-columns: 1fr !important;
    }

    .kpl-single__amenities-grid {
        grid-template-columns: 1fr !important;
    }

    .kpl-single__rooms {
        grid-template-columns: 1fr !important;
    }

    .kpl-single__rooms-legacy {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kpl-single__similar-grid {
        grid-template-columns: 1fr !important;
    }

    .kpl-single__gallery-thumbs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: flex-start !important;
    }

    .kpl-single__gallery-thumb {
        width: 60px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
    }
}

/* ══════════════════════════════════════════════════
   PROPERTIES SLIDER ([kalio_properties])
   ══════════════════════════════════════════════════ */

.kpl-properties {
    position: relative !important;
    padding: 0 48px !important;
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    font-family: 'Libre Baskerville', Georgia, serif !important;
    margin-right: auto !important;
    scroll-margin-top: 96px !important;
}

.kpl-properties__track {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    padding-bottom: 48px !important;
}

.kpl-properties__track::-webkit-scrollbar {
    display: none !important;
}

.kpl-properties__track .kpl-card {
    flex: 0 0 calc(33.333% - 11px) !important;
    min-width: 0 !important;
}

.kpl-properties__arrow {
    all: unset !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(calc(-50% - 50px)) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #1d2a0e !important;
    border: 1px solid #ddd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 4 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.kpl-properties__arrow:hover {
    background: #1d2a0e !important;
    color: #fff !important;
    border-color: #1d2a0e !important;
    box-shadow: 0 2px 8px rgba(29, 42, 14, 0.25) !important;
}

.kpl-properties__arrow--prev {
    left: 0 !important;
}

.kpl-properties__arrow--next {
    right: 0 !important;
}

.kpl-properties__arrow--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.kpl-properties__dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 24px !important;
}

.kpl-properties__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #d4d4d4 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.kpl-properties__dot--active {
    width: 24px !important;
    border-radius: 4px !important;
    background: #1d2a0e !important;
}

@media (max-width: 1024px) {
    .kpl-properties__track .kpl-card {
        flex: 0 0 calc(50% - 8px) !important;
    }
}

@media (max-width: 640px) {
    .kpl-properties {
        padding: 0 16px !important;
    }

    .kpl-properties__track .kpl-card {
        flex: 0 0 85% !important;
    }

    .kpl-properties__arrow,
    .kpl-card__arrow {
        display: none !important;
    }

    .kpl-properties__dots {
        gap: 6px !important;
        margin-top: 20px !important;
    }
}

/* ══════════════════════════════════════════════════
   HERO SECTION ([kalio_hero])
   ══════════════════════════════════════════════════ */

.kpl-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Libre Baskerville', Georgia, serif !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
}

@media (min-width: 1025px) {
    .kpl-hero:not(.kpl-hero--listings) {
        padding-bottom: 100px !important;
    }
}

/* Top sand gradient: improves contrast for fixed/global header over the slider */
.kpl-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        rgba(237, 228, 214, 0.92) 0%,
        rgba(232, 218, 198, 0.55) 22%,
        rgba(228, 212, 188, 0.2) 42%,
        transparent 58%
    ) !important;
}

.kpl-hero__slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transition: opacity 1.5s ease-in-out !important;
    z-index: 0 !important;
}

.kpl-hero__slide--active {
    opacity: 1 !important;
}

.kpl-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.6)) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.kpl-hero__content {
    position: relative !important;
    z-index: 3 !important;
    padding: 0 32px !important;
    margin-bottom: 40px !important;
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.kpl-hero__title {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin: 0 0 24px !important;
    line-height: 1.15 !important;
    max-width: 1100px !important;
}

.kpl-hero__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
}

.kpl-hero__cta:hover {
    opacity: 0.75 !important;
}

.kpl-hero__cta-dash {
    display: inline-block !important;
    width: 30px !important;
    height: 1px !important;
    background: #fff !important;
}

.kpl-hero__filters {
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Listings page hero: edge-to-edge background, title + same filter row as homepage */

.kpl-listings-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

.kpl-hero.kpl-hero--listings {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
    display: block !important;
    justify-content: unset !important;
}

/* No transform here — transform on an ancestor breaks position:fixed (mobile bottom sheet). */
.kpl-hero--listings > .kpl-hero__filters {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 24px !important;
    transform: none !important;
    z-index: 100 !important;
    width: calc(100% - 64px) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.kpl-hero__content--listings {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.kpl-hero__title--listings {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 48px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: center !important;
    padding: 0 16px !important;
    pointer-events: auto !important;
}

.kpl-hero .kpl-filters {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: none !important;
    position: relative !important;
    margin: 0 32px 32px !important;
    border-radius: 4px !important;
}

/* Listings hero: no outer margin on white bar; padding only on #kpl-filters */
.kpl-hero.kpl-hero--listings .kpl-filters {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kpl-hero.kpl-hero--listings #kpl-filters {
    padding: 14px 20px !important;
}

.kpl-hero .kpl-filters .kpl-filters__label {
    color: #8b7a5e !important;
}

.kpl-hero .kpl-filters .kpl-filters__field input,
.kpl-hero .kpl-filters .kpl-filters__field select,
.kpl-hero .kpl-filters select.kpl-filters__select,
.kpl-hero .kpl-filters input[type="text"].kpl-filters__input {
    color: #1d2a0e !important;
    border-bottom-color: #ccc !important;
}

.kpl-hero .kpl-filters .kpl-filters__field select:focus,
.kpl-hero .kpl-filters .kpl-filters__field input:focus {
    border-bottom-color: #1d2a0e !important;
}

.kpl-hero .kpl-filters .kpl-filters__field input::placeholder {
    color: #999 !important;
}

.kpl-hero .kpl-filters .kpl-filters__field select,
.kpl-hero .kpl-filters select.kpl-filters__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231d2a0e' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.kpl-hero .kpl-filters .kpl-filters__toggle,
.kpl-hero .kpl-filters .kpl-filters__toggle:focus,
.kpl-hero .kpl-filters .kpl-filters__toggle:active {
    color: #1d2a0e !important;
}

@media (max-width: 1024px) {
    .kpl-hero {
        min-height: 100vh !important;
    }

    /* Homepage hero: vertically center title/CTA + filter row as a group */
    .kpl-hero:not(.kpl-hero--listings) {
        justify-content: center !important;
        gap: 28px !important;
    }

    .kpl-hero:not(.kpl-hero--listings) .kpl-hero__content {
        margin-bottom: 0 !important;
    }

    .kpl-hero.kpl-hero--listings {
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
    }

    .kpl-hero__title {
        font-size: 34px !important;
    }

    #kpl-filters {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 16px !important;
    }

    #kpl-filters > .kpl-filters__btn,
    #kpl-filters .kpl-filters__toggle {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
    }

    #kpl-filters.kpl-filters--expanded > .kpl-filters__btn {
        grid-column: auto !important;
    }

    #kpl-filters.kpl-filters--expanded .kpl-filters__toggle {
        grid-row: auto !important;
    }

    .kpl-filters__field--refine {
        opacity: 1 !important;
        overflow: visible !important;
        max-height: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 640px) {
    .kpl-hero {
        min-height: 100vh !important;
    }

    .kpl-hero.kpl-hero--listings {
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
    }

    .kpl-hero__content {
        padding: 0 16px !important;
        margin-bottom: 24px !important;
        margin-top: 50px !important;
    }

    .kpl-hero__title {
        font-size: 28px !important;
    }

    .kpl-hero__title--listings {
        font-size: 32px !important;
    }

}

/* ── Mobile trigger, close, backdrop: hidden on desktop ── */

.kpl-filters__mobile-trigger,
.kpl-filters__mobile-notch,
.kpl-filters__mobile-backdrop {
    display: none !important;
}

/* ── Mobile bottom-sheet search ── */

/* FAB: hidden on desktop */
.kpl-filters-fab {
    display: none !important;
}

@media (max-width: 768px) {

    /* ── Hero collapsed state: show trigger button ── */

    .kpl-hero #kpl-filters {
        margin: 0 16px 24px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        position: relative !important;
        overflow: visible !important;
        display: block !important;
    }

    .kpl-hero #kpl-filters .kpl-filters__mobile-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: #1d2a0e !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        padding: 16px 24px !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        transition: background 0.2s ease !important;
    }

    .kpl-hero #kpl-filters .kpl-filters__mobile-trigger:hover {
        background: #17220b !important;
    }

    .kpl-hero #kpl-filters .kpl-filters__field,
    .kpl-hero #kpl-filters .kpl-filters__btn,
    .kpl-hero #kpl-filters .kpl-filters__toggle,
    .kpl-hero #kpl-filters .kpl-filters__field--refine {
        display: none !important;
    }

    .kpl-hero #kpl-filters .kpl-filters__mobile-close {
        display: none !important;
    }

    /* ── Listings collapsed state: hide in-hero filter bar, show FAB (not when bottom sheet is open) ── */

    .kpl-listings-page .kpl-hero #kpl-filters:not(.kpl-filters--mobile-open),
    .kpl-layout ~ #kpl-filters:not(.kpl-filters--mobile-open),
    #kpl-filters:not(.kpl-filters--mobile-open):has(~ .kpl-layout) {
        display: none !important;
    }

    .kpl-filters-fab {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        bottom: 24px !important;
        right: 24px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 2px !important;
        background: #1d2a0e !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        z-index: 999 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
    }

    .kpl-filters-fab:hover {
        background: #17220b !important;
    }

    .kpl-filters-fab:active {
        transform: scale(0.95) !important;
    }

    .kpl-filters-fab .material-symbols-outlined {
        font-size: 24px !important;
        color: #fff !important;
    }

    /* Hide FAB when bottom sheet is open */
    body:has(.kpl-filters--mobile-open) .kpl-filters-fab {
        display: none !important;
    }

    /* ── Open state (shared: works for both hero and listings) ── */

    #kpl-filters.kpl-filters--mobile-open {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 10000 !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: 85vh !important;
        overflow: hidden !important;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.18) !important;
        transition: opacity 0.35s ease !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
    }

    /* Scrollable region; Search stays as flex footer (not position:fixed) so fields are never covered */
    #kpl-filters.kpl-filters--mobile-open .kpl-filters__sheet-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        gap: 16px !important;
        padding: 0 0 16px !important;
        box-sizing: border-box !important;
    }

    /* Listings hero: ensure sheet anchors to viewport (not hero) above theme headers */
    .kpl-listings-page #kpl-filters.kpl-filters--mobile-open {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        z-index: 100002 !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__mobile-trigger {
        display: none !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__mobile-notch {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 8px 0 4px !important;
        cursor: grab !important;
        touch-action: none !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__mobile-notch span {
        display: block !important;
        width: 40px !important;
        height: 4px !important;
        background: #ccc !important;
        border-radius: 2px !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field,
    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field--refine {
        display: flex !important;
        opacity: 1 !important;
        max-height: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
        min-height: auto !important;
        grid-row: auto !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field {
        min-width: 0 !important;
        flex: none !important;
        width: calc(50% - 8px) !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field:has(#kpl-f-destination),
    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field:has(#kpl-f-name) {
        width: 100% !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__label {
        font-size: 11px !important;
        color: #8b7a5e !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field select,
    #kpl-filters.kpl-filters--mobile-open .kpl-filters__field input {
        font-size: 15px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #ddd !important;
        color: #1d2a0e !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__btn {
        display: inline-flex !important;
        position: relative !important;
        flex: 0 0 auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 16px 24px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 14px !important;
        z-index: 1 !important;
        border-radius: 0 !important;
        border-top: 1px solid #e8e4dc !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #kpl-filters.kpl-filters--mobile-open .kpl-filters__toggle {
        display: none !important;
    }

    /* Backdrop */

    .kpl-filters__mobile-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.45) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }

    .kpl-filters__mobile-backdrop.kpl-filters__mobile-backdrop--visible {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}