/*
 * ============================================================
 *  FindItTnT — Phase 2 Brand & Layout CSS
 *  Prepared by: Claude (AI-generated — review before uploading)
 *  Note to Uma: Please review every section carefully before
 *  applying to the live site. Test on a staging/dev copy first
 *  if possible. Each section is labelled for easy reference.
 * ============================================================
 *
 *  HOW TO APPLY IN FLYNAX:
 *  Admin Panel → Templates → [Your Active Template] → Custom CSS
 *  Paste the entire contents of this file and Save.
 * ============================================================
 *
 *  BRAND COLORS
 *  Navy   : #0A2540  (header, nav, primary buttons)
 *  Gold   : #F59E0B  (CTA buttons, active tabs, highlights)
 *  Teal   : #1D9E75  (success states, badges, verified icons)
 *  Sky    : #E8F4FF  (light backgrounds, info areas)
 *  White  : #FFFFFF  (cards, form fields)
 *  Off-white: #F8F6F2 (page background)
 * ============================================================
 */


/* ============================================================
   1. PAGE BACKGROUND
   ============================================================ */

/* 06-07-2026 */
.feature-strip {
    background: #071f4d;
    border: 2px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    text-align: left !important;
    margin-top: 16px !important;
    transform: translateY(40px);
}

.feature-item {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 12px;
    text-align: left !important;
}

#homeCarousel .carousel-caption a {
    display: none !important;
}

#homeCarousel .carousel-caption a.view-details-btn {
    display: inherit !important;
    align-content: space-evenly !important;
}

.feature-icon {
    width: 44px;
    height: 44px;
    border: 2px solid #2ecc714a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2ecc71;
    /* font-size:20px; */
    flex-shrink: 0;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-content h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.feature-content p {
    margin: 0;
    color: #c9d4e7;
    font-size: 14px;
    line-height: 1.5;
}

.divider {
    width: 1px;
    height: 70px;
    background: rgba(255, 190, 70, .55);
}

@media(max-width:991px) {

    .feature-strip {
        flex-wrap: wrap;
        padding: 16px;
        transform: translateY(0px);
    }

    .divider {
        display: none;
    }

    .feature-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media(max-width: 576px) {
    .home-page .header-tabs .horizontal-search {
        margin: 0px 15px 16px !important;
    }
}

/* @media screen and (min-width: 480px) and (max-width: 576px) {
    .home-page .header-tabs.point1 {
        max-width: 380px;
    }
} */

@media(max-width:576px) {

    .feature-item {
        flex: 0 0 100%;
    }

    .feature-content h4 {
        font-size: 12px;
    }

    .feature-content p {
        font-size: 14px;
    }
}

/* 06-07-2026 */
/* 04-07-2026 */
.sidebar-ad {
    background: linear-gradient(160deg, #01183a 0%, #0e3d6b 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 0px;
}

.sidebar-ad .s-ad-label {
    font-size: 14px;
    color: rgba(232, 244, 255, .55);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.sidebar-ad .s-ad-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sidebar-ad .s-ad-title span {
    color: #F59E0B;
}

.sidebar-ad .s-ad-sub {
    font-size: 14px;
    color: rgba(232, 244, 255, .7);
    margin-bottom: 14px;
    line-height: 1.5;
}

.sidebar-ad .s-ad-btn {
    background: #F59E0B;
    color: #01183a;
    border-radius: 7px;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
}

.sidebar-card {
    background: #fff;
    border: 1px solid rgba(10, 37, 64, .12);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 0px;
    box-shadow: 0 4px 14px rgba(10, 37, 64, .04);
}

.sidebar-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #0A2540;
    border-bottom: 2px solid #F59E0B;
    padding-bottom: 7px;
    margin-bottom: 14px;
}

.sidebar-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(10, 37, 64, .06);
    font-size: 14px;
    color: #0A2540;
    font-weight: 500;
}

.sidebar-cat-link span {
    background: #E8F4FF;
    color: #0A2540;
    font-size: 14px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

.sidebar-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(10, 37, 64, .06);
    font-size: 13px;
}

.sidebar-stat-num {
    font-size: 16px;
    font-weight: 800;
    color: #F59E0B;
    min-width: 54px;
}

.sidebar-stat-name {
    color: #5a6a7a;
}

.test123 {
    padding: 0px !important;
    background: transparent !important;
}

.test123 h3 {
    font-size: 0px !important;
}

.quick_links {
    padding: 0px !important;
    background: transparent !important;
}

.quick_links h3 {
    font-size: 0px !important;
}

.findittnt_today {
    padding: 0px !important;
    background: transparent !important;
}

.findittnt_today h3 {
    font-size: 0px !important;
}

.ready_to_get_seen {
    padding: 0px !important;
    background: transparent !important;
}

.ready_to_get_seen h3 {
    font-size: 0px !important;
}

.ready-get {
    background: #F59E0B;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.ready-get h4 {
    font-size: 16px;
    font-weight: 800;
    color: #0A2540;
    margin-bottom: 6px;
}

.ready-get p {
    font-size: 14px;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.5;
}

.ready-get-btn:hover {
    background: #0A2540;
    color: #fff !important;
}

.ready-get-btn {
    background: #0A2540;
    color: #fff !important;
    border-radius: 7px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px !important;
    display: inline-block;
}

/* 04-07-2026 */
#homeCarousel .carousel-caption a {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #01183a;
    background: #f7b218 !important;
    border-radius: 5px !important;
    text-transform: capitalize !important;
}

#homeCarousel .carousel-caption a:hover {
    color: #fff !important;
}

#homeCarousel .carousel-caption a::before {
    content: "🚀";
    margin-right: 8px;
}

.add-property:before {
    margin-top: 0px !important;
}

.add-property:hover {
    color: #fff !important;
}

/* 18-06-2026 */
.main-menu .menu a.active {
    background: #f59e0b24;
    color: #F59E0B !important;
    box-shadow: none !important;
}

.main-menu .menu .menu-content a {
    padding: 14px 8px !important;
}

.category-menu__button {
    background: #ffffff17 !important;
    border: 1px solid rgba(232, 244, 255, .2) !important;
}

.smart-search .smart-search__input {
    background: #fff !important;
    border: 1px solid rgba(232, 244, 255, .2) !important;
}

.add-property {
    background: #F59E0B !important;
    color: #01183a !important;
    font-weight: 500 !important;
}

.field-bound-box-text-pic>li {
    padding: 16px;
    background: #fff;
    margin: 5px;
    border: 1px solid rgba(10, 37, 64, .17) !important;
    border-radius: 10px;

}

/* .listing-fit-contain div.picture img {
    object-fit: inherit !important;
} */

ul.featured>li img {
    position: relative !important;
}

ul.featured>li>.picture {
    padding-bottom: 0% !important;
}

section#controller_area {
    padding-bottom: 0px !important;
}

.inside-container {
    padding-top: 2rem !important;
}

.fieldBoundBoxes div {
    padding-bottom: 0px !important;
}

.categories-box-nav:not(.no-style)>div {
    padding-bottom: 0px !important;
}

.listings_box a {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.listings_box a img {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.listings_box .card-info {
    padding: 16px !important;
    background: #fff !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.no-sidebar section.content_block {
    padding-top: 0px;
}

body.home-page.no-sidebar aside.top>section:first-child:before {
    content: inherit;
}

section.content_block:not(.no-style)>div {
    padding: 0px !important;
}

.listing_box_3 {
    margin-bottom: 0px !important;
}

.latest_jobs {
    margin-bottom: 0px !important;
}

.bringtogether h3 {
    display: none;
}

body.home-page section.content_block>h3 {
    color: #000;
    /* border-bottom: 2px solid #f59e0b; */
    padding-bottom: 16px;
    text-decoration: underline;
    text-decoration-color: #f59e0b;
    text-decoration-thickness: 2px;
    text-underline-offset: 16px;
}

:root {

    --button-color: #F59E0B !important;
    --button-hover-color: #F59E0B !important;
    --navy: #082a48;
    --gold: #ffb51b;
    --green: #2f9f62;
    --soft: #f4f7f9;
    --line: #dfe5ea;
    --text: #0b2944;
    --muted: #748696;
    --shadow: 0 12px 28px rgba(14, 42, 67, .08);
}

.horizontal-search {
    background: #fff;
    padding: 12px;
    margin-bottom: 20px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.search_tab_area select {
    background: #ffffff17 !important;
    border: 1px solid rgba(10, 37, 64, .17) !important;
    box-shadow: none !important;
    color: #0A2540;
}

.search_tab_area input {
    background: #ffffff17 !important;
    border: 1px solid rgba(10, 37, 64, .17) !important;
}

.search_tab_area .select2-selection--single {
    background: #ffffff17 !important;
    border: 1px solid rgba(10, 37, 64, .17) !important;
    box-shadow: none !important;
    color: #0A2540;
}

.header-tabs .tabs {
    padding: 10px;
    justify-content: left !important;
    border: solid #fff !important;
    border-width: 2px 2px 0 2px !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;

}

.search_tab_area .search-form-cell>div>span {
    color: #0A2540 !important;
    text-transform: uppercase;
}

.header-tabs ul.tabs>li.active>a {
    box-shadow: 0 -2px 0 var(--button-color) inset !important;
}

.header-tabs .tabs li a {
    font-size: 13px !important;
    font-weight: 500;
}

.header-tabs .tabs li.more {

    background: #ffffff17 !important;
    border: 1px solid rgba(232, 244, 255, .2) !important;
}

.no-sidebar section.content_block {
    padding-bottom: 0px !important;
}

.why_we_built_findittnt:not(.no-style)>div {
    padding-bottom: 0px !important;
}

.carousel-slide-description {
    color: #f1f1f1;
    max-width: 500px !important;
    text-align: left !important;
}

.carousel-slide-description span:first-of-type {
    color: #ffb400;
    font-weight: 700;
}

.carousel-slide-description span:last-of-type {
    color: #3d8a55;
    font-weight: 500;
}

/* .carousel .carousel-caption {
    margin: inherit !important;
} */

@media (max-width:768px) {
    .carousel-slide-description {
        font-size: 16px;
        line-height: 1.7;
    }

}

/* .horizontal-search {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(10,37,64,.13);
    overflow: hidden;
} */
/* 18-06-2026 */
/* 19-06-2026 */
/* .categories-box__slide .categories-box__item{background: #fff !important;  border: 1px solid rgba(10,37,64,.17) !important; padding: 16px !important; margin: 5px !important; border-radius: 10px;} */
/* 19-06-2026 */
/* 24-06-2026 */
.why-band {
    background: #0A2540;
    border-radius: 14px;
    padding: 32px;
}

.why-band h3 {
    color: rgba(232, 244, 255, .78);
    font-size: 15px !important;
    line-height: 1.75;
    margin-bottom: 8px !important;

}

.why-band p {
    color: rgba(232, 244, 255, .78);
    font-size: 15px !important;
    line-height: 1.75;

}

/* 24-06-2026 */

body {
    background-color: #F8F6F2 !important;
}


/* ============================================================
   2. HEADER & TOP NAVIGATION BAR
   ============================================================ */
#header,
.header,
header,
.top-bar,
#top-bar {
    background-color: #0A2540 !important;
    border-bottom: 2px solid #F59E0B !important;
}

/* Logo text color */
#logo a,
.logo a,
#header .logo {
    color: #FFFFFF !important;
}

/* Nav links */
#header nav a,
#header .nav a,
.top-bar a,
header nav a {
    color: rgba(232, 244, 255, 0.85) !important;
    text-decoration: none !important;
}

#header nav a:hover,
.top-bar a:hover,
header nav a:hover {
    color: #F59E0B !important;
}


/* ============================================================
   3. SEARCH TABS (Real Estate / Jobs / Electronics etc.)
   ============================================================ */

/* Tab container */
.quick-search-tabs,
.search-tabs,
.tabs-nav,
#quick-search .nav-tabs {
    background-color: #0A2540 !important;
    border-bottom: 2px solid #F59E0B !important;
}

/* Individual tab */
.quick-search-tabs li a,
.search-tabs li a,
.tabs-nav li a,
#quick-search .nav-tabs li a {
    color: rgba(232, 244, 255, 0.75) !important;
    background-color: transparent !important;
    border: none !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
}

/* Tab hover */
.quick-search-tabs li a:hover,
.search-tabs li a:hover,
#quick-search .nav-tabs li a:hover {
    color: #F59E0B !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Active / selected tab */
.quick-search-tabs li.active a,
.search-tabs li.active a,
.tabs-nav li.active a,
#quick-search .nav-tabs li.active a,
.quick-search-tabs li a.active,
.search-tabs li a.active {
    color: #F59E0B !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 3px solid #F59E0B !important;
    font-weight: 500 !important;
}


/* ============================================================
   4. SEARCH FORM / FILTER PANEL
   ============================================================ */

/* Search form container */
.quick-search-form,
#quick-search .tab-content,
.search-form-wrap {
    background-color: #FFFFFF !important;
    border: 0.5px solid rgba(10, 37, 64, 0.15) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 16px !important;
}

/* Form labels */
.quick-search-form label,
.search-form-wrap label {
    font-size: 12px !important;
    color: #5a6a7a !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
}

/* Input fields and select dropdowns */
.quick-search-form input[type="text"],
.quick-search-form input[type="number"],
.quick-search-form select,
.search-form-wrap input,
.search-form-wrap select {
    background-color: #F8F6F2 !important;
    border: 0.5px solid rgba(10, 37, 64, 0.2) !important;
    border-radius: 6px !important;
    color: #0A2540 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    width: 100% !important;
}

.quick-search-form input:focus,
.quick-search-form select:focus,
.search-form-wrap input:focus,
.search-form-wrap select:focus {
    border-color: #0A2540 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(10, 37, 64, 0.12) !important;
}

/* Disabled / greyed-out fields */
.quick-search-form input:disabled,
.quick-search-form select:disabled,
.search-form-wrap input:disabled,
.search-form-wrap select:disabled {
    background-color: #e9e9e9 !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}


/* ============================================================
   5. SALE / RENT TOGGLE BUTTONS
   ============================================================ */

/* Button group container */
.property-for-btns,
.sale-rent-toggle,
.btn-group.sale-rent {
    display: flex !important;
    gap: 6px !important;
}

/* Default (unselected) state */
.property-for-btns .btn,
.sale-rent-toggle .btn,
.btn-group.sale-rent .btn {
    background-color: #F8F6F2 !important;
    color: #0A2540 !important;
    border: 0.5px solid rgba(10, 37, 64, 0.25) !important;
    border-radius: 6px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* Active/selected button */
.property-for-btns .btn.active,
.sale-rent-toggle .btn.active,
.btn-group.sale-rent .btn.active,
.property-for-btns .btn-primary,
.sale-rent-toggle .btn-primary {
    background-color: #0A2540 !important;
    color: #FFFFFF !important;
    border-color: #0A2540 !important;
}

.property-for-btns .btn:hover,
.sale-rent-toggle .btn:hover {
    background-color: #E8F4FF !important;
    border-color: #0A2540 !important;
}


/* ============================================================
   6. SEARCH / SUBMIT BUTTONS
   ============================================================ */
.btn-search,
.search-submit,
button[type="submit"],
input[type="submit"],
.quick-search-form .btn-primary,
.search-form-wrap .btn-primary {
    background-color: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.btn-search:hover,
.search-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #D97706 !important;
}


/* ============================================================
   7. POST AD / CTA BUTTONS (sitewide)
   ============================================================ */
.btn-post-ad,
.post-ad-btn,
a.btn-primary,
.btn.btn-primary:not(.sale-rent-toggle .btn):not(.property-for-btns .btn) {
    background-color: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
}

.btn-post-ad:hover,
a.btn-primary:hover {
    background-color: #D97706 !important;
    color: #0A2540 !important;
}

/* Secondary / outline buttons */
.btn-default,
.btn.btn-default,
a.btn-default {
    background-color: #FFFFFF !important;
    color: #0A2540 !important;
    border: 0.5px solid rgba(10, 37, 64, 0.3) !important;
    border-radius: 6px !important;
}

.btn-default:hover,
a.btn-default:hover {
    background-color: #E8F4FF !important;
}


/* ============================================================
   8. HOMEPAGE CATEGORY GRID (icons + labels)
   ============================================================ */
.category-box,
.cat-box,
.categories-grid .item,
.homepage-categories .category-item {
    background-color: #FFFFFF !important;
    border: 0.5px solid rgba(10, 37, 64, 0.12) !important;
    border-radius: 10px !important;
    text-align: center !important;
    padding: 16px 10px !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.category-box:hover,
.cat-box:hover,
.categories-grid .item:hover,
.homepage-categories .category-item:hover {
    border-color: #F59E0B !important;
    box-shadow: 0 2px 8px rgba(10, 37, 64, 0.1) !important;
}

/* Category icon */
.category-box .icon,
.cat-box .icon,
.categories-grid .item .icon,
.category-box i,
.cat-box i {
    font-size: 28px !important;
    color: #0A2540 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Category label */
.category-box .title,
.cat-box .title,
.category-box span,
.categories-grid .item .title {
    font-size: 12px !important;
    color: #0A2540 !important;
    font-weight: 500 !important;
    display: block !important;
}


/* ============================================================
   9. LISTING CARDS (grid view)
   ============================================================ */
.listing-card,
.ad-box,
.listing-item,
.listings-grid .item {
    background-color: #FFFFFF !important;
    border: 0.5px solid rgba(10, 37, 64, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}

.listing-card:hover,
.ad-box:hover,
.listing-item:hover {
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.1) !important;
}

/* Listing card image */
.listing-card .photo,
.ad-box .photo,
.listing-item .thumb {
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    display: block !important;
}

/* Listing card body */
.listing-card .info,
.ad-box .info,
.listing-item .details {
    padding: 10px 12px !important;
}

/* Title */
.listing-card .title a,
.ad-box .title a,
.listing-item .title a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0A2540 !important;
    text-decoration: none !important;
}

.listing-card .title a:hover,
.ad-box .title a:hover {
    color: #F59E0B !important;
}

/* Price */
.listing-card .price,
.ad-box .price,
.listing-item .price {
    color: #0A2540 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 4px 0 !important;
}

/* Location */
.listing-card .location,
.ad-box .location,
.listing-item .location {
    font-size: 12px !important;
    color: #5a6a7a !important;
}

/* Category badge on card */
.listing-card .category-badge,
.ad-box .category,
.listing-item .cat-tag {
    display: inline-block !important;
    background-color: #E8F4FF !important;
    color: #0A2540 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-top: 4px !important;
}


/* ============================================================
   10. HERO / BANNER SECTION (top of homepage)
   ============================================================ */
.homepage-banner,
.hero-section,
.main-banner,
#banner {
    background-color: #0A2540 !important;
    padding: 32px 20px !important;
    text-align: center !important;
}

.homepage-banner h1,
.hero-section h1,
.main-banner h1,
#banner h1 {
    color: #E8F4FF !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

.homepage-banner p,
.hero-section p,
.main-banner p,
#banner p {
    color: rgba(232, 244, 255, 0.7) !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}


/* ============================================================
   11. FOOTER
   ============================================================ */
#footer,
footer,
.footer {
    background-color: #0A2540 !important;
    color: rgba(232, 244, 255, 0.75) !important;
    border-top: 3px solid #F59E0B !important;
    padding: 24px 20px !important;
}

.page-footer .footer-menu-title {
    color: #F59E0B !important;
    text-transform: uppercase !important;

}

.footer-data a {
    color: #fff !important;
}

.footer-data .icons a svg {
    fill: #fff !important;
}

#footer a,
footer a,
.footer a {
    color: rgba(232, 244, 255, 0.75) !important;
    text-decoration: none !important;
}

#footer a:hover,
footer a:hover,
.footer a:hover {
    color: #F59E0B !important;
}

#footer .footer-title,
footer .footer-title,
.footer-section-title {
    color: #F59E0B !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 10px !important;
}


/* ============================================================
   12. VERIFIED / SUCCESS BADGES (Teal)
   ============================================================ */
.badge-verified,
.verified-badge,
.badge-success,
.label-success {
    background-color: #1D9E75 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.header-tabs ul li a,
.header-tabs ul li a .tab-icon {
    color: #fff !important;
}

.header-tabs ul li a span {
    display: none !important;
}

.carousel-slide-heading {
    font-size: 42px !important;
    font-weight: 800;
    line-height: 1.15 !important;
    color: #ffffff;
    margin: 0;
    text-transform: capitalize;
    letter-spacing: -1px;
}

/* .carousel-slide-heading span{
    display: block;
} */

.carousel-slide-heading span:nth-child(1) {
    color: #ffffff;
    font-size: 70px;
}

.carousel-slide-heading span:nth-child(2) {
    color: #f8f9fa
}

.solution-band {
    background: #fff;
    border-left: 5px solid #ffb400;
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(10, 37, 64, .08);
}

.solution-band h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111111;
}

.solution-band p {
    color: #111111;
    line-height: 1.7;
}

.carousel-slide-heading span:nth-of-type(3) {
    color: #ffb400;
    text-shadow: 0 4px 15px rgba(255, 180, 0, .35);
    margin-left: 10px;
}

#mf-location-selector .default>span {
    color: #fff !important;
}

ul.tabs>li.overflowed>ul {
    background: #2F2F2F !important;
}

ul.tabs>li.overflowed>ul>li>a {
    background: #2F2F2F !important;
}

ul.card-info>li.price_tag>div>span {
    color: #000 !important;
}

ul.card-info>li.price_tag>*:last-child {
    color: #000 !important;
}

ul.card-info li.useful {
    color: #000 !important;
}

ul.featured.with-pictures ul.card-info>li.title a {
    color: #111111 !important;
}

ul.card-info>li.services>span {
    color: #111 !important;
}

header.page-header div.top-header {
    box-shadow: inset 0 -1px 0 var(--top-navigation-menu-border-color) !important;
}

/* Responsive */
@media (max-width:768px) {
    .test123 h3 {
        display: none !important;
    }

    .quick_links h3 {
        display: none !important;
    }

    .findittnt_today h3 {
        display: none !important;
    }

    .ready_to_get_seen h3 {
        display: none !important;
    }

    .main-menu span.menu-button>svg {
        filter: brightness(0) invert(1) !important;
    }

    .your_path .col-md-4 {
        margin-bottom: 8px !important;
    }

    body.home-page .header-tabs .tabs>li.more>span {
        background: #fff !important;
    }

    .carousel-slide-heading {
        font-size: 38px;
        line-height: 1.2;
    }

    .carousel-slide-heading span:nth-child(1) {
        color: #ffffff;
        font-size: 30px;

    }

    .carousel-slide-heading {
        font-size: 30px !important;
    }

    #homeCarousel .carousel .carousel-slide-description {
        display: block !important;
    }

    #homeCarousel .carousel-caption {
        text-align: left !important;
    }
}

@media (max-width:480px) {
    .carousel-slide-heading {
        font-size: 28px;
    }
}


.categories-box__item {
    background: #fff;
    box-shadow: 0 0 0 5px #f5f5f5;
}

/* #categories_box_ltcb_property categories_box_ltcb_jobs*/
#categories_box_ltcb_property .categories-box__item .categories-box__parent {
    border-bottom: 1px solid rgba(10, 37, 64, .12) !important;
}

#categories_box_ltcb_property .categories-box__item .categories-box__parent div {
    width: 100% !important;
    display: contents;
}

#categories_box_ltcb_property .categories-box__item .categories-box__parent div a.categories-box__parent-link {
    flex: auto !important;
}

#categories_box_ltcb_property .categories-box__item .categories-box__parent div .categories-box__parent-counter span {
    color: #000 !important;
    background: #E8F4FF !important;
    padding: 1px 7px !important;
    border-radius: 20px !important;
}

#categories_box_ltcb_property .categories-box__item {
    background: #fff;
    width: 24.2% !important;
    margin: 10px 4px;
    padding: 15px 22px;
    border-radius: 10px;
}

#categories_box_ltcb_property .categories-box__subcategory a {
    color: #000 !important;
}

#categories_box_ltcb_property a.categories-box__parent-link {
    font-weight: 600;
    color: #000 !important;
}

/* 23-06-2026 */
.html-block .pc-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0A2540;
    color: #F59E0B;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.html-block .pc:hover {
    border-color: #F59E0B;
    transform: translateY(-2px);
}

.html-block .pc {
    background: #fff;
    border: 1px solid rgba(10, 37, 64, .12);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 8px 28px rgba(10, 37, 64, .08);
    transition: .2s;
    height: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
}

.pc h4 {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    margin-bottom: 8px;
}

.pc p {
    font-size: 15px;
    color: #5a6a7a;
    line-height: 1.6;
}

.pc-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 0px !important;
}

.pc-list li {
    font-size: 15px;
    color: #0A2540;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.pc-list li::before {
    content: "✔";
    color: #28a745;
    font-weight: bold;
    flex-shrink: 0;
}

.pc-note {
    font-size: 14px;
    color: #5a6a7a;
    font-style: italic;
    border-top: 1px dashed rgba(10, 37, 64, .12);
    padding-top: 8px;
    margin-top: 4px;
}

#homeCarousel .carousel-caption {
    align-items: flex-start !important;
    margin: 0 !important;
}

#homeCarousel .carousel-slide-description {
    margin: 28px 0 0 0 !important;
}

#homeCarousel a.button:hover {
    background-color: #B35FFF !important;
}

.ad-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 20px 28px;
    border-radius: 14px;
    gap: 20px;
    border: 1.5px dashed rgba(245, 158, 11, .4);
    background: linear-gradient(135deg, #fff 0%, #E8F4FF 100%);

}

.ad-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ad-label {
    font-size: 14px;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.ad-headline {
    font-size: 18px;
    font-weight: 800;
    color: #0A2540;
}

.ad-headline span {
    color: #F59E0B;
}

.ad-sub {
    font-size: 15px;
    color: #5a6a7a;
    max-width: 480px;
}

.ad-cta {
    background: #F59E0B;
    color: #fff !important;
    border-radius: 7px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .ad-banner-inner {
        flex-direction: column;
        padding: 16px;
        gap: 10px;
        text-align: center;
    }
}

.ad-cta:hover {
    background: #B35FFF;
}

.header-banner-cont #header-banner {
    width: inherit !important;
    height: inherit !important;
}

/* 23-06-2026 */
body.home-page section.content_block:not(.no-header)>div {
    margin: 10px 0 0 0;
}

div#logo img {
    filter: brightness(0) invert(1);
}


body.home-page section.content_block>h3 {
    font-size: 1.5em;
}

.carousel .carousel-item {
    height: 600px !important;
}


ul#listing_box_82 .card-info {
    padding: 16px !important;
    background: #fff !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

ul#listing_box_81 .card-info {
    padding: 16px !important;
    background: #fff !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

#ads-block-82,
#ads-block-81 {
    display: none;
}


/* ============================================================
   13. MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 768px) {

    /* Stack search filters vertically on mobile */
    .quick-search-form .row,
    .search-form-wrap .row {
        flex-direction: column !important;
    }

    .quick-search-form .col,
    .quick-search-form [class*="col-"],
    .search-form-wrap [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 !important;
    }

    /* Full-width inputs on mobile */
    .quick-search-form input,
    .quick-search-form select,
    .search-form-wrap input,
    .search-form-wrap select {
        width: 100% !important;
    }

    /* Full-width search button */
    .btn-search,
    .search-submit {
        width: 100% !important;
        margin-top: 8px !important;
    }

    /* Two-column category grid on mobile */
    .categories-grid,
    .homepage-categories {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Single column listing grid on small screens */
    .listings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Nav links hidden on mobile (rely on Flynax's own mobile menu) */
    #header nav,
    header nav {
        display: none !important;
    }

    /* Hero text sizing */
    .homepage-banner h1,
    .hero-section h1 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {

    .category-box,
    .cat-box {
        padding: 12px 6px !important;
    }

    .category-box .title,
    .cat-box .title {
        font-size: 11px !important;
    }

    #categories_box_ltcb_property .categories-box__item {
        width: 100% !important;
    }
}


/* ============================================================
   14. BREADCRUMBS & PAGE TITLES
   ============================================================ */
.breadcrumb,
.breadcrumbs {
    background-color: #E8F4FF !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.breadcrumb a,
.breadcrumbs a {
    color: #0A2540 !important;
}

.breadcrumb .active,
.breadcrumbs .current {
    color: #5a6a7a !important;
}

.page-title h1,
.page-heading h1 {
    color: #0A2540 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    border-bottom: 2px solid #F59E0B !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}


/* ============================================================
   END OF FINDITTNT PHASE 2 CSS
   Version: 1.0  |  Generated: June 2026
   Review all selectors against your live Flynax template
   before uploading. Some selectors may need adjustment
   depending on your exact Flynax theme and version.
   ============================================================ */



/* ============================================================ */
/* CLEANUP: Superseded Legacy Footer, Header & Cards styles removed.
   All layout elements are styled in sections below. */
/* ============================================================ */

/* ============================================================
   19. HEADER EXACT MATCH (Same as Screenshot)
       Navy top bar · Text logo · Clean search · Pill buttons
       Fully responsive across all screen sizes
    ============================================================ */

/* --- Top Bar --- */
.custom-top-bar {
    background-color: #0A2540 !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
}

body.home-page .header-nav .custom-top-bar {
    display: none !important;
}

.custom-top-bar .highlight-yellow {
    color: #F59E0B !important;
}

.custom-top-bar .text-light {
    color: rgba(255, 255, 255, 0.9) !important;
}

.custom-top-bar-right {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 12px !important;
}

/* --- Logo Text --- */
.custom-logo a {
    text-decoration: none !important;
}

/* ============================================================
   PROTOTYPE EXACT MATCH: HEADER & NAVBAR STYLES
   ============================================================ */

body.home-page .sticky-navbar-wrapper .point1,
.sticky-navbar-wrapper .point1 {
    width: min(1420px, calc(100% - 28px)) !important;
    max-width: 1420px !important;
    margin: 0 auto !important;
}

body.home-page header.page-header,
header.page-header {
    position: relative !important;
    background: transparent !important;
    border: none !important;
}

.sticky-navbar-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid #e4e9ef !important;
}

.custom-top-bar {
    position: relative !important;
    z-index: 1 !important;
    background: #08233f !important;
    color: #dfeaf4 !important;
    font-size: 13px !important;
}

.custom-top-bar .highlight-yellow {
    color: #ffd76a !important;
    font-weight: 800 !important;
}

.custom-header-wrapper {
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: auto minmax(360px, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 !important;
}

.custom-logo span {
    font-size: 29px !important;
    font-weight: 900 !important;
    letter-spacing: -1.2px !important;
    line-height: 1 !important;
    font-family: Onest, Inter, system-ui, -apple-system, sans-serif !important;
    white-space: nowrap !important;
}

.custom-logo .logo-navy {
    color: #08233f !important;
}

.custom-logo .logo-gold {
    color: #f4b51f !important;
}

/* --- Search Bar (Exact Prototype Match) --- */
.custom-search-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

.custom-header-search-form {
    display: grid !important;
    grid-template-columns: 1fr 180px 160px auto !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 1px solid #d4dbe0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    height: 46px !important;
    min-height: 46px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.custom-search-input {
    min-width: 0 !important;
    border: 0 !important;
    border-right: 1px solid #e4e9ef !important;
    padding: 0 12px !important;
    outline: 0 !important;
    color: #17273b !important;
    background: #ffffff !important;
    height: 38px !important;
    font-size: 14px !important;
}

.custom-search-input::placeholder {
    color: #66768a !important;
}

.custom-search-divider {
    display: none !important;
}

.custom-search-select {
    min-width: 0 !important;
    border: 0 !important;
    border-right: 1px solid #e4e9ef !important;
    padding: 0 28px 0 12px !important;
    outline: 0 !important;
    color: #17273b !important;
    background: #ffffff !important;
    height: 38px !important;
    font-size: 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2366768a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    cursor: pointer !important;
}

.custom-search-select[name="f[location]"] {
    border-right: 0 !important;
}

.custom-search-btn {
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffb51b !important;
    color: #111111 !important;
    padding: 0 20px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    height: 38px !important;
    min-height: 38px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    margin: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-search-btn:hover {
    background-color: #e6a316 !important;
    background: #e6a316 !important;
    border-color: #e6a316 !important;
    color: #111111 !important;
}

/* --- Nav Action Buttons (Exact Prototype Match) --- */
.custom-header-actions {
    display: flex !important;
    gap: 9px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.custom-sign-in-btn,
.custom-sign-in-link,
a.custom-sign-in-btn,
a.login.custom-sign-in-btn {
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 17px !important;
    border-radius: 999px !important;
    border: 1px solid #ccd5dc !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #08233f !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: none !important;
    white-space: nowrap !important;
}

/* Prototype Hover: Sign In does NOT change background color on hover */
.custom-sign-in-btn:hover,
.custom-sign-in-link:hover,
a.custom-sign-in-btn:hover,
a.login.custom-sign-in-btn:hover {
    background: #ffffff !important;
    color: #08233f !important;
    border-color: #b9c8d7 !important;
    text-decoration: none !important;
}

.custom-post-ad-btn,
.add-property.custom-post-ad-btn,
a.custom-post-ad-btn {
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 17px !important;
    border-radius: 999px !important;
    border: 1px solid #ffb51b !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    background: #ffb51b !important;
    color: #08233f !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.custom-post-ad-btn::before,
.add-property.custom-post-ad-btn::before {
    content: none !important;
}

.custom-post-ad-btn:hover,
.add-property.custom-post-ad-btn:hover,
a.custom-post-ad-btn:hover {
    background-color: #e0a417 !important;
    border-color: #e0a417 !important;
    color: #08233f !important;
    text-decoration: none !important;
}

/* Hide old logo image if any */
#logo img {
    display: none !important;
}

/* --- Mobile Search Toggle --- */
.custom-mobile-search-trigger {
    display: none !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(10, 37, 64, 0.2) !important;
    border-radius: 30px !important;
    color: #0A2540 !important;
    background: #fff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-mobile-search-trigger:hover {
    background: #f8f9fa !important;
    border-color: rgba(10, 37, 64, 0.4) !important;
}

.custom-mobile-search-trigger.active {
    background: #f8f9fa !important;
    border-color: #F59E0B !important;
}

/* --- Mobile Search Bar (hidden by default) --- */
.custom-mobile-search-bar {
    display: none !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(10, 37, 64, 0.08) !important;
}

.custom-mobile-search-bar.active {
    display: block !important;
}

/* ============================================================
   RESPONSIVE - ALL SCREEN SIZES
   ============================================================ */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .custom-search-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Desktop Large (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .custom-search-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .custom-search-select {
        padding: 8px 24px 8px 10px !important;
        font-size: 12px !important;
    }

    .custom-search-btn {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }

    .custom-header-wrapper {
        gap: 14px !important;
    }

    .custom-header-actions {
        gap: 8px !important;
    }
}

/* Desktop Medium (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .custom-search-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .custom-search-input {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    .custom-search-select {
        padding: 6px 22px 6px 8px !important;
        font-size: 12px !important;
    }

    .custom-search-btn {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }

    .custom-sign-in-btn,
    .custom-sign-in-link {
        padding: 8px 18px !important;
        font-size: 13px !important;
        height: 36px !important;
    }

    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 8px 18px !important;
        font-size: 13px !important;
        height: 36px !important;
    }

    .custom-logo span {
        font-size: 22px !important;
    }

    .custom-header-wrapper {
        gap: 12px !important;
    }

    .custom-header-actions {
        gap: 8px !important;
    }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .custom-header-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .custom-search-container {
        display: none !important;
    }

    .custom-mobile-search-trigger {
        display: inline-flex !important;
    }

    .custom-sign-in-btn,
    .custom-sign-in-link {
        padding: 8px 16px !important;
        font-size: 12px !important;
        height: 36px !important;
    }

    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
        height: 36px !important;
    }

    .custom-logo span {
        font-size: 20px !important;
    }

    .custom-header-actions {
        gap: 6px !important;
    }
}

/* Mobile search bar visible when triggered */
@media (max-width: 991px) {
    .custom-mobile-search-bar.active {
        display: block !important;
    }
}

/* Tablet Portrait & Mobile (max-width: 767px) - Clean Fluid Layout */
@media (max-width: 767px) {
    .custom-header-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .custom-logo {
        order: 1 !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .custom-logo span {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        font-size: 19px !important;
    }

    .custom-header-actions {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .custom-header-actions .custom-post-ad-btn,
    .custom-header-actions .add-property.custom-post-ad-btn {
        flex-shrink: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .custom-search-container {
        display: none !important;
    }

    .custom-mobile-search-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
    }

    .custom-mobile-search-trigger svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Beautiful vertical stack form for mobile search */
    .custom-header-search-form {
        flex-direction: column !important;
        height: auto !important;
        padding: 12px !important;
        border-radius: 16px !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .custom-search-divider {
        display: none !important;
    }

    .custom-search-input {
        width: 100% !important;
        background-color: #f3f4f6 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        height: 44px !important;
    }

    .custom-search-select {
        width: 100% !important;
        background-color: #f3f4f6 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        height: 44px !important;
        background-position: right 14px center !important;
    }

    .custom-search-btn {
        width: 100% !important;
        margin-left: 0 !important;
        height: 44px !important;
        border-radius: 11px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .custom-sign-in-btn,
    .custom-sign-in-link {
        padding: 6px 10px !important;
        font-size: 11px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   MOBILE: Match Screenshot — Logo + Post Free Ad + Search Bar (≤767px)
   ============================================================ */
@media (max-width: 767px) {

    /* Show header actions (Post Free Ad) but hide Sign In + search toggle */
    .custom-header-actions {
        display: flex !important;
        gap: 6px !important;
    }

    /* Hide Sign In button on mobile */
    .custom-sign-in,
    .custom-sign-in-btn,
    .custom-sign-in-link,
    .user-navbar-container {
        display: none !important;
    }

    /* Hide mobile search toggle icon (search bar always visible) */
    .custom-mobile-search-trigger {
        display: none !important;
    }

    /* Logo left, Post Ad right */
    .custom-header-wrapper {
        justify-content: space-between !important;
    }

    /* Mobile search bar: ALWAYS visible */
    .custom-mobile-search-bar {
        display: block !important;
        margin-top: 12px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid #f0f2f5 !important;
    }

    /* Mobile search: single row — input + Search button only */
    .custom-mobile-search-bar .custom-header-search-form,
    .custom-mobile-search-bar .smart-search__form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        border-radius: 999px !important;
        border: 1px solid #d4dbe0 !important;
        padding: 4px 4px 4px 0 !important;
        min-height: 48px !important;
        background: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    /* Hide category and location dropdowns + dividers on mobile */
    .custom-mobile-search-bar .custom-search-select,
    .custom-mobile-search-bar .custom-search-divider {
        display: none !important;
    }

    /* Search input — clean and wide */
    .custom-mobile-search-bar .custom-search-input,
    .custom-mobile-search-bar .smart-search__input {
        flex: 1 1 auto !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 16px !important;
        height: 40px !important;
        font-size: 14px !important;
        color: #17273b !important;
        outline: none !important;
        min-width: 0 !important;
        border-right: none !important;
        border-radius: 0 !important;
    }

    .custom-mobile-search-bar .custom-search-input::placeholder,
    .custom-mobile-search-bar .smart-search__input::placeholder {
        color: #93a3b5 !important;
        font-weight: 400 !important;
    }

    /* Search button — yellow pill matching screenshot */
    .custom-mobile-search-bar .custom-search-btn {
        border-radius: 999px !important;
        background: #ffb51b !important;
        border: 1px solid #ffb51b !important;
        color: #111 !important;
        font-weight: 700 !important;
        padding: 0 20px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Post Free Ad button sizing on mobile (pill shaped) */
    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(244, 181, 31, 0.2) !important;
        margin-right: 12px !important;
        /* Move button slightly to the left */
    }

    /* Tweak mobile logo to match screenshot's cleaner sans-serif */
    .custom-logo,
    #logo,
    .logo {
        font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-weight: 900 !important;
        /* Make logo bold */
        letter-spacing: -0.5px !important;
    }

    .custom-logo a,
    #logo a,
    .logo a {
        font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-weight: 900 !important;
        /* Make logo bold */
    }

    /* Hide old Flynax hamburger */
    .main-menu span.menu-button {
        display: none !important;
    }
}

/* Very Small Mobile (< 360px) - keep Post Ad button visible but smaller */
@media (max-width: 359px) {
    .custom-header-wrapper {
        gap: 4px !important;
        padding: 8px 6px !important;
    }

    .custom-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .custom-logo span {
        font-size: 16px !important;
    }

    .custom-header-actions {
        gap: 4px !important;
        margin-left: auto !important;
    }

    .custom-sign-in-btn,
    .custom-sign-in-link {
        padding: 4px 6px !important;
        font-size: 10px !important;
        height: 28px !important;
    }

    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 0 10px !important;
        font-size: 12px !important;
        height: 32px !important;
        min-height: 32px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .custom-header-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .custom-search-container {
        display: none !important;
    }

    .custom-mobile-search-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .custom-sign-in-btn,
    .custom-sign-in-link {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .custom-post-ad-btn::before,
    .add-property.custom-post-ad-btn::before {
        font-size: 16px !important;
    }

    .custom-logo span {
        font-size: 20px !important;
    }

    .custom-header-actions {
        gap: 6px !important;
    }
}

/* ============================================================
   20. LOGIN MODAL STYLES (Matches Screenshot)
       Rounded inputs · Gold buttons · Clean spacing
    ============================================================ */

/* Modal Overlay */
#login_modal .modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(10, 37, 64, 0.25) !important;
    overflow: hidden !important;
}

#login_modal .modal-header {
    background: #fff !important;
    border-bottom: 1px solid rgba(10, 37, 64, 0.08) !important;
    padding: 20px 24px !important;
}

#login_modal .modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0A2540 !important;
}

#login_modal .modal-body {
    padding: 24px !important;
    background: #fff !important;
}

#login_modal .modal-footer {
    border-top: none !important;
    padding: 0 24px 24px !important;
    background: #fff !important;
}

/* Close button */
#login_modal .close {
    color: #5a6a7a !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

#login_modal .close:hover {
    opacity: 1 !important;
}

/* Form inputs */
#login_modal .login-form input[type="text"],
#login_modal .login-form input[type="password"],
#login_modal .login-form input[type="email"] {
    width: 100% !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(10, 37, 64, 0.15) !important;
    border-radius: 8px !important;
    background: #f5f7fa !important;
    color: #0A2540 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

#login_modal .login-form input:focus {
    outline: none !important;
    border-color: #F59E0B !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

#login_modal .login-form input::placeholder {
    color: #9ca3af !important;
}

/* Login button */
#login_modal .login-form input[type="submit"] {
    width: 100% !important;
    padding: 12px 24px !important;
    background: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-bottom: 12px !important;
}

#login_modal .login-form input[type="submit"]:hover {
    background: #d97706 !important;
}

/* Remember me checkbox */
#login_modal .remember-me {
    margin-bottom: 16px !important;
}

#login_modal .remember-me label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #5a6a7a !important;
    cursor: pointer !important;
}

#login_modal .remember-me input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #F59E0B !important;
    cursor: pointer !important;
}

/* Forgot password link */
#login_modal .text-center {
    text-align: center !important;
    margin-top: 16px !important;
}

#login_modal .text-center a {
    color: #0A2540 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(10, 37, 64, 0.2) !important;
    border-radius: 8px !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
}

#login_modal .text-center a:hover {
    background: #f8f9fa !important;
    border-color: rgba(10, 37, 64, 0.4) !important;
}

/* Registration link */
#login_modal .mt-1 {
    margin-top: 8px !important;
}

#login_modal .mt-1 a {
    color: #0A2540 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(10, 37, 64, 0.2) !important;
    border-radius: 8px !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
}

#login_modal .mt-1 a:hover {
    background: #f8f9fa !important;
    border-color: rgba(10, 37, 64, 0.4) !important;
}

/* Attention/error messages */
#login_modal .attention {
    padding: 12px 16px !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    color: #991b1b !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
}

/* Responsive modal */
@media (max-width: 576px) {
    #login_modal .modal-dialog {
        margin: 10px !important;
    }

    #login_modal .modal-body {
        padding: 16px !important;
    }

    #login_modal .login-form input[type="text"],
    #login_modal .login-form input[type="password"] {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    #login_modal .login-form input[type="submit"] {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   21. EXTRA HEADER RESPONSIVE FIXES
   ============================================================ */

/* Ensure header doesn't break sticky - NO overflow hidden on ancestors */
html,
body,
body > div.main-wrapper {
    overflow: visible !important;
    overflow-x: clip !important;
    /* clip prevents horizontal scroll without breaking sticky */
}

/* Fix sticky header on inner pages:
   Since sticky-navbar-wrapper is INSIDE header.page-header, it can only stick within the header's height.
   Using display: contents makes it stick relative to .main-wrapper which spans the whole page. */
body:not(.home-page):not(.search-on-map-page) header.page-header {
    display: contents !important;
}

body:not(.home-page):not(.search-on-map-page) .custom-top-bar {
    background: #0A2540 !important;
}

/* Sticky Navbar - stays at top on scroll (all screen sizes) */
.sticky-navbar-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.top-navigation {
    overflow-x: hidden !important;
}



/* Fix for very small screens */
@media (max-width: 480px) {
    .custom-header-wrapper {
        display: flex !important;
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .custom-header-actions {
        gap: 4px !important;
    }

    .custom-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .custom-sign-in-btn,
    .custom-sign-in-link {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .custom-post-ad-btn,
    .add-property.custom-post-ad-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .custom-logo span {
        font-size: 18px !important;
    }
}

/* ============================================================
   22. HIDE OLD HEADER & FORCE LIGHT THEME ON HOME PAGE
   ============================================================ */

/* Hide default Flynax header elements on Home Page */
body.home-page header.page-header>div.top-header {
    display: none !important;
}

/* Force Light Theme colors on Home Page */
body.home-page {
    background-color: #F8F6F2 !important;
    color: #0A2540 !important;
    --body-background-color: #F8F6F2 !important;
    --content-background-color: #F8F6F2 !important;
    --header-background-color: #ffffff !important;
    --top-navigation-background-color: #ffffff !important;
}

body.home-page #wrapper,
body.home-page #main_container,
body.home-page section#content {
    background-color: #F8F6F2 !important;
    display: none !important;
}

body.home-page header.page-header,
body.home-page .custom-header-outer-wrapper {
    background-color: #ffffff !important;
    color: #0A2540 !important;
}

/* Ensure the header navigation bar is solid white on home page */
body.home-page .custom-header-outer-wrapper {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(10, 37, 64, 0.08) !important;
}

/* ============================================================
   23. PREMIUM TYPOGRAPHY & TEXT STYLES (Matches Screenshot)
   ============================================================ */

/* Global Home Page Font Override for custom header/banner */
body.home-page .custom-top-bar,
body.home-page .custom-header-outer-wrapper,
body.home-page .custom-hero-banner {
    font-family: 'Onest', 'Inter', 'Segoe UI', -apple-system, sans-serif !important;
}

/* Custom Search dropdown and input fonts */
body.home-page .custom-header-search-form input,
body.home-page .custom-header-search-form select,
body.home-page .custom-header-search-form button {
    font-family: 'Onest', 'Inter', 'Segoe UI', sans-serif !important;
}

/* Force hero title, badge, and descriptions to show cleanly on dark background with exact text styles */
body.home-page .custom-hero-banner h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
    /* Matches screenshot extremely bold title */
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
}

body.home-page .custom-hero-banner p {
    color: #E8F4FF !important;
    font-weight: 400 !important;
    /* Regular font weight for description */
    font-size: 1.1rem !important;
    opacity: 0.9 !important;
}

/* Checkmarks list style - bold and clear */
body.home-page .hero-feature-list div {
    color: #ffffff !important;
    font-weight: 600 !important;
    /* Semi-bold checkmark text */
    font-size: 0.95rem !important;
}

/* Logo styling matching the screenshot */
body.home-page .custom-logo span {
    font-family: 'Onest', 'Inter', sans-serif !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    letter-spacing: -1.2px !important;
}

body.home-page .custom-logo .logo-navy {
    color: #08233f !important;
}

body.home-page .custom-logo .logo-gold {
    color: #f4b51f !important;
}

/* Navigation Top Bar text weights */
body.home-page .custom-top-bar {
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    background: #08233f !important;
}

body.home-page .custom-top-bar .highlight-yellow {
    font-weight: 800 !important;
    color: #ffd76a !important;
}

/* Navigation buttons weights */
body.home-page .custom-sign-in-btn,
body.home-page .custom-sign-in-link {
    font-weight: 800 !important;
    font-size: 14px !important;
}

body.home-page .custom-post-ad-btn,
body.home-page .add-property.custom-post-ad-btn {
    font-weight: 700 !important;
    /* Bold Post Free Ad */
    font-size: 14px !important;
}

body.home-page .custom-search-btn,
body.home-page .custom-header-search-form button,
body.home-page button.custom-search-btn {
    font-weight: 900 !important;
    background-color: #ffb51b !important;
    background: #ffb51b !important;
    color: #111111 !important;
    border-radius: 999px !important;
    border: 1px solid #ffb51b !important;
    padding: 0 24px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.home-page .custom-search-btn:hover,
body.home-page .custom-header-search-form button:hover,
body.home-page button.custom-search-btn:hover {
    background-color: #e6a316 !important;
    background: #e6a316 !important;
    border-color: #e6a316 !important;
    color: #111111 !important;
}

/* Premium styling for search dropdown options inside browser default selects */
body.home-page .custom-search-select option {
    font-family: 'Onest', 'Inter', sans-serif !important;
    color: #0A2540 !important;
    background: #ffffff !important;
}

/* ============================================================
   24. STICKY NAVBAR OVERRIDES (Sticky on Scroll)
   ============================================================ */

/* Make the header element overflow visible so position: sticky can trigger if needed */
body.home-page header.page-header {
    overflow: visible !important;
}

body.home-page .header-nav {
    overflow: visible !important;
}

/* Sticky class triggered by scroll event */
body.home-page .custom-header-outer-wrapper.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08) !important;
    /* Premium shadow on scroll */
    z-index: 2000 !important;
    animation: slideDown 0.3s ease-out forwards;
}

/* Smooth sticky drop-down animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ============================================================
   25. QUICK LINKS SECTION (Pill-Shaped Tags Row)
   ============================================================ */

.fitt-quick-links {
    padding: 17px 0 4px !important;
    background-color: #F8F6F2 !important;
}

.fitt-quick-row {
    width: min(1320px, calc(100% - 28px)) !important;
    margin: auto !important;
    display: flex !important;
    gap: 9px !important;
    overflow: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
}

.fitt-quick-row::-webkit-scrollbar {
    display: none !important;
}

.fitt-quick {
    white-space: nowrap !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    color: #0A2540 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.fitt-quick:hover {
    border-color: #b9c8d7 !important;
    text-decoration: none !important;
    color: #0A2540 !important;
    box-shadow: 0 2px 8px rgba(10, 37, 64, 0.08) !important;
}

/* ============================================================
   26. EXPLORE CATEGORIES SECTION (12-Column Grid)
   ============================================================ */

.fitt-section {
    padding: 32px 0 !important;
    background-color: #F8F6F2 !important;
}

.fitt-section-wrap {
    width: min(1320px, calc(100% - 28px)) !important;
    margin: auto !important;
}

.fitt-section-title {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 16px !important;
}

.fitt-section-title h2 {
    margin: 0 !important;
    color: #0A2540 !important;
    font-size: clamp(25px, 3vw, 36px) !important;
    letter-spacing: -1px !important;
    font-weight: 900 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.fitt-section-title p {
    margin: 4px 0 0 !important;
    color: #6b7280 !important;
    font-size: 15px !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.fitt-view-all-link {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #1D9E75 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.fitt-view-all-link:hover {
    color: #167a5b !important;
    text-decoration: underline !important;
}

/* Category Cards Grid */
.fitt-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 11px !important;
}

.fitt-category-card {
    background: #fff !important;
    border: 1px solid #dfe5ea !important;
    border-radius: 16px !important;
    min-height: 145px !important;
    padding: 13px 8px !important;
    text-align: center !important;
    box-shadow: 0 12px 28px rgba(14, 42, 67, 0.08) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

.fitt-category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(8, 35, 63, 0.12) !important;
    text-decoration: none !important;
}

/* 3D Neumorphic Icon Circle */
.fitt-icon3d {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 10px !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #fff, #e9eef4) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 31px !important;
    box-shadow: 8px 8px 18px #dfe5eb, -8px -8px 18px #fff, inset 0 0 0 1px rgba(8, 35, 63, 0.03) !important;
}

.fitt-category-card b {
    font-size: 12px !important;
    line-height: 1.15 !important;
    display: block !important;
    color: #0A2540 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.fitt-category-card small {
    display: block !important;
    color: #8895a5 !important;
    font-size: 10px !important;
    margin-top: 5px !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Responsive: Categories Grid */
@media (max-width: 1150px) {
    .fitt-categories-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .fitt-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .fitt-section-title {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   27. FEATURED LISTINGS SECTION (Matches Prototype Exactly)
   ============================================================ */

/* Section wrapper - light blue-gray background like prototype */
.opportunity-section {
    background: var(--soft) !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 38px 0 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Section header - flex between title and "See all" link */
.opportunity-header {
    width: min(1320px, calc(100% - 28px)) !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

/* Replace header text via CSS to match prototype "Featured listings" */
.opportunity-title {
    font-size: 0px !important;
    line-height: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    position: relative !important;
}

.opportunity-title::after {
    content: "Featured listings" !important;
    font-size: clamp(25px, 3vw, 36px) !important;
    letter-spacing: -1px !important;
    font-weight: 900 !important;
    color: #0A2540 !important;
    visibility: visible !important;
    display: block !important;
    line-height: 1.2 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Replace subtitle text */
.opportunity-subtitle {
    font-size: 0px !important;
    line-height: 0 !important;
    visibility: hidden !important;
    position: relative !important;
    margin: 4px 0 0 !important;
}

.opportunity-subtitle::after {
    content: "Premium placements that still feel native to the marketplace." !important;
    font-size: 15px !important;
    color: #6b7280 !important;
    visibility: visible !important;
    display: block !important;
    line-height: 1.4 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* "See all featured" link */
.opportunity-more-link {
    font-size: 0px !important;
    visibility: hidden !important;
    position: relative !important;
    white-space: nowrap !important;
}

.opportunity-more-link::after {
    content: "See all featured →" !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #1D9E75 !important;
    visibility: visible !important;
    display: block !important;
    text-decoration: none !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-more-link:hover::after {
    color: #167a5b !important;
    text-decoration: underline !important;
}

/* 4-column card grid */
.opportunity-grid {
    width: min(1320px, calc(100% - 28px)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}

/* Card styling */
.opportunity-card {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 17px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.opportunity-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 36px rgba(8, 35, 63, 0.12) !important;
}

/* Card Image / Thumbnail */
.opportunity-card-image {
    position: relative !important;
    aspect-ratio: 4/3 !important;
    background: #e8edf2 !important;
    overflow: hidden !important;
}

.opportunity-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Placeholder icon when no photo */
.opportunity-card-icon {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #dcecff, #f8fbff) !important;
}

.opportunity-card-icon svg {
    width: 64px !important;
    height: 64px !important;
}

/* Badge (top-left of card image) */
.opportunity-card-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px !important;
    z-index: 5 !important;
}

.opportunity-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    background: var(--navy) !important;
    box-shadow: none !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Tier badges (Platinum / Gold / Silver / Bronze) shown on featured cards */
.opportunity-badge.platinum {
    background: #5c6570 !important;
}

.opportunity-badge.goldtier {
    background: #c78d11 !important;
}

.opportunity-badge.silver {
    background: #7d8791 !important;
}

.opportunity-badge.bronze {
    background: #9a6640 !important;
}

/* Heart/Favorite icon */
.opportunity-favorite {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(8, 35, 63, 0.09) !important;
    cursor: pointer !important;
    color: #8a96a4 !important;
    font-size: 14px !important;
}

.opportunity-favorite .icon {
    width: 14px !important;
    height: 12px !important;
    fill: none !important;
    stroke: #8a96a4 !important;
    stroke-width: 1.5 !important;
}

/* Card Body */
.opportunity-card-body {
    padding: 14px !important;
    flex: 1 !important;
}

.opportunity-card-price {
    color: var(--text) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-card-title {
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 6px 0 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-card-title a {
    color: var(--text) !important;
    text-decoration: none !important;
}

.opportunity-card-title a:hover {
    color: #1D9E75 !important;
}

/* Card Meta (location + time) */
.opportunity-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 8px !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-card-meta span {
    display: inline-flex !important;
    align-items: center !important;
}

.opportunity-card-location svg,
.opportunity-card-date svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
    fill: #aab3bd !important;
}

/* Bullet separator between meta items */
.opportunity-card-meta .opportunity-card-date::before {
    content: "•" !important;
    margin-right: 7px !important;
    color: #aab3bd !important;
}

/* Card Footer */
.opportunity-card-footer {
    border-top: 1px solid #e5e7eb !important;
    padding: 9px 13px !important;
    display: flex !important;
    justify-content: space-between !important;
    color: #8a96a4 !important;
    font-size: 10px !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-card-category {
    font-weight: 600 !important;
    color: #8a96a4 !important;
    text-transform: capitalize !important;
}

.opportunity-card-link {
    color: #8a96a4 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.opportunity-card-link:hover {
    color: #1D9E75 !important;
}

/* No listings state */
.opportunity-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 40px 20px !important;
    color: #6b7280 !important;
}

/* ============================================================
   28. SPONSORED BUSINESS SPOTLIGHT AD STRIP (Below Listings)
   ============================================================ */

.opportunity-ad-banner {
    width: min(1320px, calc(100% - 28px)) !important;
    margin: 12px auto 0 !important;
}

.opportunity-ad-content {
    background: linear-gradient(100deg, #fff8e7, #edf6ff) !important;
    border: 1px solid #dce5ed !important;
    border-radius: 19px !important;
    min-height: 96px !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

/* Replace ad label text to match prototype */
.opportunity-ad-label {
    font-size: 0px !important;
    visibility: hidden !important;
    position: relative !important;
}

.opportunity-ad-label::after {
    content: "SPONSORED BUSINESS SPOTLIGHT" !important;
    text-transform: uppercase !important;
    letter-spacing: 0.11em !important;
    color: #8a6b1c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    visibility: visible !important;
    display: block !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Replace ad title text */
.opportunity-ad-title {
    font-size: 0px !important;
    visibility: hidden !important;
    position: relative !important;
    margin: 3px 0 0 !important;
}

.opportunity-ad-title::after {
    content: "Your business could be seen here." !important;
    display: block !important;
    color: #0A2540 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    visibility: visible !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Replace ad description text */
.opportunity-ad-desc {
    font-size: 0px !important;
    visibility: hidden !important;
    position: relative !important;
    margin: 4px 0 0 !important;
}

.opportunity-ad-desc::after {
    content: "Reach people actively browsing products, services, property and opportunities." !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    visibility: visible !important;
    display: block !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Replace ad button text and style */
.opportunity-ad-btn {
    font-size: 0px !important;
    visibility: hidden !important;
    position: relative !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    border: none !important;
    display: inline-block !important;
}

.opportunity-ad-btn::after {
    content: "Advertise on FindItTnT" !important;
    background-color: #F59E0B !important;
    color: #0A2540 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    visibility: visible !important;
    display: inline-block !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
    transition: all 0.2s ease !important;
}

.opportunity-ad-btn:hover::after {
    background-color: #e69009 !important;
    text-decoration: none !important;
}

/* ============================================================
   29. FEATURED LISTINGS RESPONSIVE
   ============================================================ */

@media (max-width: 1150px) {
    .opportunity-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 14px;
    }

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

    .opportunity-ad-content {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* ============================================================
   30. LAYOUT WIDTH OVERRIDES (Full Width Sections & Duplicate Hide)
   ============================================================ */

/* Force page header and navigation containers to be full width with no padding on Home Page */
body.home-page header.page-header,
body.home-page section.header-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide duplicate native Flynax featured block on the home page (only inside sidebar/aside/content, not header) */
body.home-page aside .featured,
body.home-page #content .featured {
    display: none !important;
}

/* ============================================================
   31. NEWLY ADDED LISTINGS SECTION (Matches Prototype Exactly)
   ============================================================ */

/* Newly added section wrapper - off-white background like prototype */
.fitt-newly-added-section {
    background: var(--soft) !important;
    border-top: none !important;
}

.opportunity-title-newly {
    font-size: clamp(25px, 3vw, 36px) !important;
    letter-spacing: -1px !important;
    font-weight: 900 !important;
    color: #0A2540 !important;
    margin: 0 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-subtitle-newly {
    font-size: 15px !important;
    color: #6b7280 !important;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-more-link-newly {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #1D9E75 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-more-link-newly:hover {
    color: #167a5b !important;
    text-decoration: underline !important;
}

/* Hide duplicate native Flynax recently added block on the home page */
body.home-page aside .recently,
body.home-page #content .recently {
    display: none !important;
}

/* ============================================================
   32. COMMUNITY STRIP SECTION (Matches Prototype Exactly)
   ============================================================ */

/* Section wrapper - matches prototype off-white/light background */
.fitt-community-section {
    background: #F8F6F2 !important;
    padding: 0 0 36px !important;
}

/* Inner wrap to center content */
.fitt-community-wrap {
    width: min(1320px, calc(100% - 28px)) !important;
    margin: 0 auto !important;
}

/* The dark navy rounded strip card */
.fitt-community-strip {
    background: linear-gradient(135deg, #08233f, #0d365d) !important;
    color: #fff !important;
    border-radius: 24px !important;
    padding: 27px !important;
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: 24px !important;
    align-items: center !important;
    box-shadow: 0 16px 42px rgba(8, 35, 63, .09) !important;
}

/* Heading */
.fitt-community-heading {
    margin: 0 0 8px !important;
    font-size: 29px !important;
    letter-spacing: -0.8px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.15 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Description paragraph */
.fitt-community-desc {
    margin: 0 !important;
    color: rgba(255, 255, 255, .77) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Steps grid - 3 columns */
.fitt-community-steps {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 9px !important;
}

/* Individual step */
.fitt-community-step {
    padding: 14px 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Step bold title - gold color */
.fitt-community-step b {
    display: block !important;
    color: #ffd76a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Step description text */
.fitt-community-step span {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .72) !important;
    line-height: 1.4 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
    .fitt-community-strip {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }

    .fitt-community-heading {
        font-size: 24px !important;
    }

    .fitt-community-steps {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* Responsive: Mobile */
@media (max-width: 460px) {
    .fitt-community-strip {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .fitt-community-heading {
        font-size: 20px !important;
    }

    .fitt-community-desc {
        font-size: 13px !important;
    }
}

/* ============================================================
   33. PROPERTY JOBS SERVICES SECTION (Matches Prototype Exactly)
   ============================================================ */

/* Section wrapper - light blue-gray background like prototype */
.fitt-pjs-section {
    background: var(--soft) !important;
    border-top: none !important;
    border-bottom: none !important;
}

.opportunity-title-pjs {
    font-size: clamp(25px, 3vw, 36px) !important;
    letter-spacing: -1px !important;
    font-weight: 900 !important;
    color: #0A2540 !important;
    margin: 0 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-subtitle-pjs {
    font-size: 15px !important;
    color: #6b7280 !important;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-more-link-pjs {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #1D9E75 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

.opportunity-more-link-pjs:hover {
    color: #167a5b !important;
    text-decoration: underline !important;
}

/* ============================================================
   34. NATIVE ADVERTISEMENT STRIP (Matches Prototype Exactly)
   ============================================================ */

.fitt-native-ad-strip {
    margin: 12px 0 0 !important;
    background: #082a48 !important;
    border: none !important;
    border-radius: 19px !important;
    min-height: 96px !important;
    padding: 28px 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/* Uppercase gold label */
.fitt-native-ad-label {
    text-transform: uppercase !important;
    letter-spacing: 0.11em !important;
    color: #8a6b1c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Bold heading */
.fitt-native-ad-title {
    display: block !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    margin-top: 0 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
    letter-spacing: -0.5px !important;
}

/* Description */
.fitt-native-ad-desc {
    margin: 6px 0 0 !important;
    color: #dce5ed !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
}

/* Pill button */
.fitt-native-ad-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #ffb51b !important;
    color: #111 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: 'Onest', 'Inter', sans-serif !important;
    transition: background 0.2s ease !important;
}

.fitt-native-ad-btn:hover {
    background: #e6a316 !important;
    color: #111 !important;
    text-decoration: none !important;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
    .fitt-native-ad-strip {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Responsive: Mobile */
@media (max-width: 460px) {
    .fitt-native-ad-strip {
        padding: 14px 16px !important;
        border-radius: 14px !important;
    }

    .fitt-native-ad-title {
        font-size: 15px !important;
    }

    .fitt-native-ad-btn {
        width: 100% !important;
        min-height: 40px !important;
    }
}

/* ============================================================
   35. HIDE DEFAULT CONTENT/SIDEBARS BELOW OUR CUSTOM SECTIONS
   ============================================================ */
body.home-page #content,
body.home-page aside,
body.home-page .header-banner-cont {
    display: none !important;
}


/* ============================================================ */
/* CLEANUP: Superseded Legacy Footer Overrides (Section 36) removed.
   Footer styling is handled in the section below. */
/* ============================================================ */

/* ============================================================
   HERO BANNER — PROTOTYPE EXACT MATCH (Screenshot 1)
   ============================================================ */

.fitt-hero-section {
    padding: 22px 0 0;
}

.fitt-hero-card {
    min-height: 500px;
    display: grid;
    grid-template-columns: 57% 43%;
    background:
        radial-gradient(circle at 72% 64%, rgba(10, 64, 93, .34), transparent 35%),
        linear-gradient(125deg, #102f4b 0%, #082844 58%, #031b31 100%);
    border-radius: 25px;
    overflow: hidden;
    color: #fff;
    position: relative;
    box-shadow: 0 12px 35px rgba(8, 42, 72, .18);
    max-width: 1420px;
    margin: 0 auto;
}

/* ── LEFT COPY ── */
.fitt-hero-copy {
    padding: 48px 28px 42px 38px;
    position: relative;
    z-index: 5 !important;
    color: #fff;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

/* Eyebrow badge */
.fitt-eyebrow {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 9px 13px;
    color: #ffd461;
    font-weight: 800 !important;
    letter-spacing: .05em;
    font-size: 12px;
    margin-bottom: 20px;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

/* Headline */
.fitt-hero-h1 {
    margin: 0 !important;
    max-width: 670px;
    font-size: 62px !important;
    line-height: 1.02 !important;
    letter-spacing: -2.2px !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.fitt-hero-h1 em {
    color: #ffb51b;
    font-style: normal;
    font-weight: 900 !important;
}

/* Paragraph */
.fitt-hero-desc {
    max-width: 590px;
    color: #e0edf6;
    font-size: 18px;
    line-height: 1.55;
    margin: 22px 0 24px;
    font-weight: 400;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

/* CTA buttons */
.fitt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    position: relative;
    z-index: 10 !important;
}

.fitt-btn {
    min-height: 50px;
    border-radius: 12px;
    padding: 0 21px;
    font-weight: 800 !important;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    text-decoration: none !important;
    cursor: pointer;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.fitt-btn-gold {
    background: #ffb51b !important;
    border-color: #ffb51b !important;
    color: #111 !important;
    font-weight: 900 !important;
}

.fitt-btn-outline {
    background: rgba(255, 255, 255, .04) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

.fitt-btn-directory {
    background: #2f9f62 !important;
    border-color: #2f9f62 !important;
    color: #fff !important;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 16px;
    min-width: 235px;
}

.fitt-btn-directory .icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.fitt-btn-directory .copy {
    text-align: left;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.fitt-btn-directory strong {
    font-size: 13px;
    font-weight: 900 !important;
    letter-spacing: -0.2px;
}

.fitt-btn-directory small {
    color: rgba(255, 255, 255, .82);
    font-size: 10px;
    font-weight: 500;
    margin-top: 3px;
}

/* Microproof checkmarks */
.fitt-microproof {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
    color: #d7e7f2;
    font-size: 13px;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.fitt-microproof span::before {
    content: "✓";
    color: #ffb51b;
    font-weight: 900;
    margin-right: 7px;
}

/* ── RIGHT MEDIA ── */
.fitt-hero-media,
.hero-media {
    position: relative;
    min-height: 500px;
}

/* Green & Gold curved swoosh overlay (EXACT prototype match) */
.fitt-hero-media::before,
.hero-media::before {
    content: "" !important;
    position: absolute !important;
    left: -95px !important;
    top: -60px !important;
    width: 205px !important;
    height: 640px !important;
    border-left: 20px solid #ffb51b !important;
    border-radius: 50% !important;
    transform: rotate(10deg) !important;
    background: linear-gradient(180deg, transparent 20%, rgba(47, 159, 98, .95) 72%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hero banner image */
.fitt-hero-img,
.hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
}

/* Top-right brand balance mark — HIDDEN per client request */
.fitt-balance-mark {
    display: none !important;
}

/* Floating info note on the bottom-right corner */
.fitt-hero-note,
.hero-note {
    position: absolute;
    right: 28px;
    bottom: 22px;
    width: 230px;
    background: #fff;
    color: #0b2944;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 28px rgba(14, 42, 67, .08);
    z-index: 3 !important;
}

.fitt-hero-note b {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: #0b2944;
}

.fitt-hero-note small {
    display: block;
    color: #768899;
    margin-top: 7px;
    line-height: 1.45;
}

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
    .fitt-hero-card {
        grid-template-columns: 1fr;
    }

    .fitt-hero-media,
    .hero-media {
        min-height: 320px;
    }

    .fitt-hero-h1 {
        font-size: 40px !important;
    }

    .fitt-balance-mark {
        right: 18px;
        top: 22px;
    }

    .fitt-hero-note {
        right: 22px;
        bottom: 22px;
        max-width: 225px;
    }
}

@media (max-width: 700px) {
    .fitt-hero-copy {
        padding: 35px 24px;
    }

    .fitt-hero-media {
        min-height: 300px;
    }
}

@media (max-width: 460px) {
    .fitt-hero-h1 {
        font-size: 39px !important;
        letter-spacing: -1px !important;
    }

    .fitt-hero-desc {
        font-size: 15px;
    }

    .fitt-microproof {
        gap: 10px;
        font-size: 12px;
    }

    .fitt-hero-note {
        max-width: 225px;
    }
}


/* ============================================================
   FOOTER — PROTOTYPE EXACT MATCH
   ============================================================ */

.fitt-footer {
    background: var(--navy);
    color: #fff;
    padding: 34px 0;
    margin-top: 40px;
    font-family: 'Onest', 'Inter', system-ui, sans-serif;
    border-top: none !important;
}

#wrapper,
#main_container,
.inside-container {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

#wrapper::after,
#wrapper::before,
#main_container::after,
#main_container::before,
.inside-container::after,
.inside-container::before {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.fitt-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 28px;
}

.fitt-footer p,
.fitt-footer a {
    color: #d6e4ed;
    font-size: 13px;
    line-height: 1.6;
}

.fitt-footer a {
    display: block;
    margin: 7px 0;
    text-decoration: none;
    transition: color 0.2s;
}

.fitt-footer a:hover {
    color: #ffffff !important;
}

.fitt-footer h4 {
    margin: 0 0 11px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* Footer menu (non-home pages) — match home page columns */
.fitt-footer .footer-menu-list {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fitt-footer .footer-menu-col {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fitt-footer .footer-menu-title {
    display: block;
    margin: 0 0 11px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.fitt-footer .footer-menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fitt-footer .footer-menu-items li {
    list-style: none;
}

/* Footer logo (reuses .logo styles from header) */
.fitt-footer .logo,
#logo a {
    font-size: 29px;
    font-weight: 900;
}

.fitt-footer .logo span,
#logo a span {
    color: var(--gold);
}

.fitt-footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 13px;
    color: #d6e4ed;
}

@media (max-width: 850px) {
    .fitt-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fitt-footer-brand {
        grid-column: 1 / -1;
    }

    .fitt-footer .footer-menu-list {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 14px;
    }

    .fitt-footer-grid {
        grid-template-columns: 1fr;
    }

    .fitt-footer .footer-menu-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   BUSINESS DIRECTORY CTA BANNER (Matches Prototype)
   ============================================================ */
.fitt-directory-banner-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    background-color: #F8F6F2 !important;
}

.fitt-directory-banner-section .fitt-section-title {
    margin-bottom: 16px !important;
}

.fitt-directory-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 12px 28px rgba(14, 42, 67, 0.08);
}

.fitt-directory-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.fitt-directory-banner-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f0f4f8, #e2e9f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    box-shadow: 6px 6px 14px #dce2e8, -6px -6px 14px #fff, inset 0 0 0 1px rgba(10, 37, 64, 0.04);
}

.fitt-directory-banner-copy {
    flex: 1;
    min-width: 0;
}

.fitt-directory-banner-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #d9534f;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: 'Onest', 'Inter', sans-serif;
}

.fitt-directory-banner-heading {
    font-size: 20px;
    font-weight: 800;
    color: #0A2540;
    margin: 0 !important;
    line-height: 1.3;
    font-family: 'Onest', 'Inter', sans-serif;
}

.fitt-directory-banner-desc {
    font-size: 13px;
    color: #6b7a8a;
    margin: 0 !important;
    line-height: 1.5;
    font-family: 'Onest', 'Inter', sans-serif;
}

.fitt-directory-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1D9E75;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(29, 158, 117, 0.25);
    font-family: 'Onest', 'Inter', sans-serif;
    flex-shrink: 0;
}

.fitt-directory-banner-btn:hover {
    background: #178a66;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(29, 158, 117, 0.35);
    color: #fff !important;
    text-decoration: none !important;
}

/* Responsive: Directory Banner */
@media (max-width: 768px) {
    .fitt-directory-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }

    .fitt-directory-banner-left {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .fitt-directory-banner-heading {
        font-size: 18px;
    }

    .fitt-directory-banner-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   NAVBAR BRAND LOGO STYLING (Prototype Match)
   ============================================================ */
.custom-logo,
#logo,
.logo {
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-family: "Arial Black", Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.custom-logo a,
#logo a,
.logo a {
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
    text-decoration: none !important;
    color: #082a48 !important;
    display: inline-block !important;
    font-family: "Arial Black", Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.custom-logo .logo-navy,
#logo .logo-navy {
    color: #082a48 !important;
    font-weight: 900 !important;
}

.custom-logo .logo-gold,
#logo .logo-gold,
.logo span {
    color: #ffb51b !important;
    font-weight: 900 !important;
}

/* ============================================================
   HEADER NAVBAR SEARCH & PILL BUTTONS (Prototype Match)
   ============================================================ */
/* Search bar container */
.custom-header-search-form,
.smart-search__form {
    border-radius: 999px !important;
    border: 1px solid #d6dde3 !important;
    min-height: 48px !important;
    overflow: hidden !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
}

.custom-search-input,
.smart-search__input {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0b2944 !important;
    padding: 0 18px !important;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.custom-search-select {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0b2944 !important;
    padding: 0 28px 0 14px !important;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
    border-left: 1px solid #dfe5ea !important;
    min-width: 125px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%230b2944" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 10px !important;
    cursor: pointer !important;
}

/* Search yellow pill button (Matches Post Free Ad button) */
.custom-search-btn,
button.custom-search-btn {
    border-radius: 999px !important;
    background: #ffb51b !important;
    border: 1px solid #ffb51b !important;
    color: #111111 !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    padding: 10px 24px !important;
    min-height: 42px !important;
    margin: 3px !important;
    cursor: pointer !important;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.custom-search-btn:hover {
    background: #e6a316 !important;
    border-color: #e6a316 !important;
    color: #111111 !important;
}

/* Sign In pill button */
.custom-sign-in-btn,
.custom-sign-in-link,
.user-navbar-container a.login {
    border-radius: 999px !important;
    border: 1px solid #cfd7de !important;
    padding: 10px 22px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    color: #0b2944 !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
}

.custom-sign-in-btn:hover,
.custom-sign-in-link:hover {
    background: #f4f7f9 !important;
    border-color: #b0bec5 !important;
    color: #0b2944 !important;
}

/* Post Free Ad yellow pill button */
.custom-post-ad-btn,
.button.add-property {
    border-radius: 999px !important;
    background: #ffb51b !important;
    border: 1px solid #ffb51b !important;
    color: #111111 !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    padding: 10px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.2px !important;
}

.custom-post-ad-btn:hover,
.button.add-property:hover {
    background: #e6a316 !important;
    border-color: #e6a316 !important;
    color: #111111 !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS & PADDING (Screenshot 3 & 4 Prototype Match)
   Navbar, Search Bar, Hero Section & Grids for Mobile & Tablet
   ============================================================ */
@media (max-width: 980px) {
    .fitt-hero-card {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .fitt-hero-copy {
        padding: 32px 20px 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .fitt-hero-h1 {
        font-size: 40px !important;
        line-height: 1.08 !important;
        letter-spacing: -1.5px !important;
    }

    .fitt-hero-desc {
        font-size: 16px !important;
        margin: 16px 0 20px !important;
    }

    .fitt-hero-actions {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .fitt-btn,
    .fitt-btn-directory {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .fitt-hero-media,
    .hero-media {
        min-height: 380px !important;
        width: 100% !important;
        position: relative !important;
    }

    .fitt-hero-media::before,
    .hero-media::before {
        left: -45px !important;
        top: -30px !important;
        width: 135px !important;
        height: 420px !important;
    }

    /* Hero note card floats over bottom of media image on mobile (Screenshot 1 match) */
    .fitt-hero-note,
    .hero-note {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 18px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        width: calc(100% - 36px) !important;
        max-width: 320px !important;
        z-index: 10 !important;
        box-shadow: 0 12px 28px rgba(14, 42, 67, .08) !important;
    }

    /* Mobile Search Bar (Screenshot Match) */
    .custom-mobile-search-bar {
        display: block !important;
        margin: 8px 0 !important;
        width: 100% !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid #f0f2f5 !important;
    }

    .custom-mobile-search-bar .custom-header-search-form,
    .custom-mobile-search-bar .smart-search__form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        border-radius: 999px !important;
        border: 1px solid #d4dbe0 !important;
        padding: 4px 4px 4px 0 !important;
        min-height: 48px !important;
        background: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .custom-mobile-search-bar .custom-search-input,
    .custom-mobile-search-bar .smart-search__input {
        flex: 1 1 auto !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 16px !important;
        height: 40px !important;
        font-size: 14px !important;
        color: #17273b !important;
        min-width: 0 !important;
        border-right: none !important;
    }

    .custom-mobile-search-bar .custom-search-input::placeholder,
    .custom-mobile-search-bar .smart-search__input::placeholder {
        color: #93a3b5 !important;
        font-weight: 400 !important;
    }

    .custom-mobile-search-bar .custom-search-select,
    .custom-mobile-search-bar .custom-search-divider {
        display: none !important;
    }

    .custom-mobile-search-bar .custom-search-btn {
        border-radius: 999px !important;
        background: #ffb51b !important;
        border: 1px solid #ffb51b !important;
        color: #111 !important;
        font-weight: 700 !important;
        padding: 0 20px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
    }
}

@media (max-width: 480px) {
    .fitt-hero-h1 {
        font-size: 32px !important;
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
    }

    .fitt-eyebrow {
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    .custom-logo,
    #logo,
    .logo {
        font-size: 28px !important;
    }

    .custom-logo a,
    #logo a,
    .logo a {
        font-size: 28px !important;
    }

    .fitt-hero-media,
    .hero-media {
        min-height: 340px !important;
    }
}

/* ================================================================
   STEP PROGRESS BAR — matches .sequence from mockup
   ================================================================ */
.breadcrumb,
.detail-container .breadcrumb {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
}

.breadcrumb a {
    color: var(--muted) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

.breadcrumb a:hover {
    color: var(--navy) !important;
    text-decoration: underline !important;
}

.fitt-step-bar {
    display: none !important;
}

/* ================================================================
   itINDITTNT — LISTINGS RESULTS PAGE REDESIGN
   Styles listings and layouts to match target mockups.
   ================================================================ */

:root {
    --navy: #082a48;
    --gold: #ffb51b;
    --green: #2f9f62;
    --line: #dfe5ea;
    --soft: #f5f7f9;
    --muted: #738596;
    --text: #0b2944;
    --platinum: #5c6570;
    --goldtier: #c78d11;
    --silver: #7d8791;
    --bronze: #9a6640;
}

/* ── Filter sidebar (aside.left) ─────────────────────────────── */
/* ── Global Font & Prototype Layout ───────────────────────────── */
body, body input, body select, body button, body textarea,
#listings, #listings *, .filters, .filters *, .results-panel, .results-panel * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ── Filter sidebar (aside.left) ─────────────────────────────── */
aside.left {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 250px;
    max-width: 250px;
}

@media (min-width: 992px) {
    aside.left {
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
    }
}

aside.left .filters,
aside.left .filter-panel,
aside.left .side_block,
.filters {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 4px rgba(14, 42, 67, .04) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide extra clutter widgets on result pages so sidebar matches prototype 02_results_list_grid.html */
.row.browse-layout aside.left .categories_block,
.row.browse-layout aside.left .map_block,
.row.browse-layout aside.left .side_block:has(#search_map),
.row.browse-layout aside.left .side_block.categories {
    display: none !important;
}

aside.left h3,
aside.left .side_block h3,
aside.left .filters h3,
.filters h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    color: var(--navy) !important;
    margin: 0 0 12px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--line) !important;
}

/* filter form fields */
aside.left .search-item,
aside.left .field,
.filter {
    margin: 11px 0 !important;
}

aside.left .search-item .field,
aside.left .search-item>label,
aside.left .field>label,
aside.left label,
.filter label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    margin-bottom: 5px !important;
}

aside.left .search-item input[type="text"],
aside.left .search-item input[type="number"],
aside.left .search-item select,
aside.left select,
aside.left input[type="text"],
aside.left input[type="number"],
.filter select {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #d5dce2 !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    background: #fff !important;
    font-size: 13px !important;
    color: var(--text) !important;
    box-shadow: none !important;
    outline: none !important;
}

aside.left input[type="submit"],
aside.left .button,
aside.left button[type="submit"],
aside.left .filter-btn,
.filters button.btn.navy,
.btn.navy {
    width: 100% !important;
    background: var(--navy) !important;
    color: #fff !important;
    border: 1px solid var(--navy) !important;
    border-radius: 999px !important;
    height: 40px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s ease !important;
}

aside.left input[type="submit"]:hover,
aside.left .button:hover,
aside.left button[type="submit"]:hover,
aside.left .filter-btn:hover,
.filters button.btn.navy:hover,
.btn.navy:hover {
    background: #123d61 !important;
}

/* ── BROWSE PAGE CONTAINER — FULL WIDTH ─────────────────────────
   Override .point1 max-width so the 3-col layout never gets
   squeezed regardless of zoom level.
────────────────────────────────────────────────────────────────── */
body:not(.home-page) #main_container>.inside-container.point1 {
    max-width: 97% !important;
    width: 97% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

@media (min-width: 1200px) {
    body:not(.home-page) #main_container>.inside-container.point1 {
        max-width: 97% !important;
        width: 97% !important;
    }
}

@media (min-width: 1440px) {
    body:not(.home-page) #main_container>.inside-container.point1 {
        max-width: 97% !important;
        width: 97% !important;
    }
}

/* ── RESPONSIVE 3-COLUMN BROWSE LAYOUT ────────────────────────── */
/* Desktop 1280px+ — full 3-col */
@media (min-width: 1280px) {
    .row.browse-layout {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) !important;
        gap: 24px !important;
        align-items: start !important;
    }

    .row.browse-layout>aside.left {
        grid-column: 1 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    .row.browse-layout>#content {
        grid-column: 2 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    .row.browse-layout>aside.right-rail-col {
        grid-column: 3 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }
}

/* Tablet-Large 992px-1279px — 3-col but narrower rails */
@media (min-width: 992px) and (max-width: 1279px) {
    .row.browse-layout {
        display: grid !important;
        grid-template-columns: 200px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .row.browse-layout>aside.left {
        grid-column: 1 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    .row.browse-layout>#content {
        grid-column: 2 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    .row.browse-layout>aside.right-rail-col {
        grid-column: 3 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }
}

/* Tablet 768px-991px — 2-col: filter + content, hide right rail */
@media (min-width: 768px) and (max-width: 991px) {
    .row.browse-layout {
        display: grid !important;
        grid-template-columns: 200px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .row.browse-layout>aside.left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    .row.browse-layout>#content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    .row.browse-layout>aside.right-rail-col {
        display: none !important;
    }
}

/* Mobile <768px — single column, filter on top then content */
@media (max-width: 767px) {
    .row.browse-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .row.browse-layout>aside.left,
    .row.browse-layout>#content,
    .row.browse-layout>aside.right-rail-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .row.browse-layout>aside.left {
        order: 1 !important;
    }

    .row.browse-layout>#content {
        order: 2 !important;
    }

    .row.browse-layout>aside.right-rail-col {
        order: 3 !important;
    }
}

/* ── Results layout (2-column within #content) ────────────────── */
.results-layout-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 20px !important;
    align-items: start !important;
}

.right-rail {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.ad-box {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(14, 42, 67, .06) !important;
    overflow: hidden !important;
    text-align: center !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
}

.ad-label {
    background: #eef2f5 !important;
    color: #82909b !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 7px !important;
}

.ad-creative {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: linear-gradient(145deg, #eef9f2, #fff8dc) !important;
}

.ad-creative.dark {
    background: linear-gradient(145deg, #0b2d4b, #174f72) !important;
    color: #fff !important;
}

.ad-creative h4 {
    margin: 10px 0 6px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: inherit !important;
}

.ad-creative p {
    margin: 0 !important;
    color: #667b8c !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.ad-creative.dark p {
    color: #d7e7f1 !important;
}

.ad-creative .ad-icon {
    font-size: 32px !important;
}

.ad-creative .ad-cta {
    margin-top: 13px !important;
    background: var(--green) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* -- Results panel wrapper ------------------------------------------------ */
.results-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* rp-head: flex row — H1+meta left, controls right */
.results-panel .rp-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: min-content !important;
    overflow: visible !important;
}

.results-panel .rp-head-left {
    flex: 1 1 auto !important;
    min-width: 200px !important;
}

.results-panel .rp-head-right {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* When .grid_navbar is inside .rp-head-right, strip its own border/spacing */
.results-panel .rp-head-right .grid_navbar {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* H1 title */
.results-panel .rp-title,
.results-panel h1 {
    margin: 0 0 5px !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.2 !important;
}

/* Meta text */
.results-panel .rp-meta,
.results-panel .meta {
    color: var(--muted) !important;
    font-size: 12px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Tier-order info box */
.tier-order {
    background: #fff8df !important;
    border: none !important;
    border-left: 4px solid #efd474 !important;
    border-radius: 4px !important;
    padding: 11px 13px !important;
    margin-bottom: 15px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--text) !important;
}

.tier-order strong {
    color: #765500 !important;
}

/* ── grid_navbar header controls ───────────────────────── */
.grid_navbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.grid_navbar .switcher .hook {
    display: none !important;
}

.grid_navbar .switcher {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* view-switch buttons group */
.grid_navbar .buttons.view-switch {
    display: inline-flex !important;
    border: 1px solid #dfe5ea !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    height: 38px !important;
    background: #f8fafc !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.grid_navbar .buttons.view-switch a {
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: transparent !important;
    color: var(--text) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

.grid_navbar .buttons.view-switch a.active {
    background: var(--navy) !important;
    color: #fff !important;
}

/* 60 listings per page pill */
.grid_navbar .per-page-pill {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    border: 1px solid #dfe5ea !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Tier priority select dropdown */
.grid_navbar .sorting {
    display: flex !important;
    align-items: center !important;
}

.grid_navbar .sorting select.tier-select-dropdown,
.grid_navbar .sorting select {
    height: 38px !important;
    border: 1px solid #dfe5ea !important;
    border-radius: 10px !important;
    padding: 0 32px 0 14px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
}

   LISTINGS CONTAINER — override Bootstrap .row interference
   ═══════════════════════════════════════════════════════════ */
#listings.listings-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* kill Bootstrap row margins/gutters */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   LIST VIEW  — Horizontal card: [Image | Content | Price+CTA]
   ═══════════════════════════════════════════════════════════ */
#listings.listings-list>article.item {
    display: grid !important;
    grid-template-columns: 225px minmax(0, 1fr) 155px !important;
    gap: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: #fff !important;
    position: relative !important;
    min-height: 170px !important;
    padding: 0 !important;
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-shadow: 0 1px 4px rgba(14, 42, 67, .05) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

#listings.listings-list>article.item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(14, 42, 67, .08) !important;
}

/* ── Image ── */
#listings.listings-list article.item .picture-wrap {
    width: 225px !important;
    min-height: 170px !important;
    height: 100% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #e8ecf0 !important;
    position: relative !important;
    border-radius: 15px 0 0 15px !important;
}

#listings.listings-list article.item .picture-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

#listings.listings-list article.item .picture-wrap .no-image-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 60px !important;
    background: #eef2f5 !important;
}

#listings.listings-list article.item .picture-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    min-height: 170px !important;
}

/* Favourite heart */
#listings.listings-list article.item .favorite {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
}

/* ── Center content ── */
#listings.listings-list article.item .listing-main {
    padding: 16px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: hidden !important;
}

#listings.listings-list article.item .listing-main h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 4px 0 7px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

#listings.listings-list article.item .listing-main h3 a {
    color: inherit !important;
    text-decoration: none !important;
}

#listings.listings-list article.item .listing-main h3 a:hover {
    color: var(--navy) !important;
}

#listings.listings-list article.item .listing-main p {
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1.55 !important;
    margin: 7px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#listings.listings-list article.item .location {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #456176 !important;
    margin-bottom: 0 !important;
}

#listings.listings-list article.item .features {
    display: flex !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
}

#listings.listings-list article.item .feature {
    font-size: 10px !important;
    background: #f1f5f7 !important;
    border-radius: 999px !important;
    padding: 6px 8px !important;
    color: #536a7c !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ── Right side: price + agency + CTA ── */
#listings.listings-list article.item .listing-side {
    border-left: 1px solid var(--line) !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    background: #fff !important;
    min-width: 0 !important;
    gap: 0 !important;
}

#listings.listings-list article.item .price {
    font-size: 19px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    color: var(--navy) !important;
    text-align: right !important;
}

#listings.listings-list article.item .agency {
    font-size: 10px !important;
    color: var(--muted) !important;
    text-align: right !important;
    line-height: 1.45 !important;
}

#listings.listings-list article.item .view-btn {
    background: var(--navy) !important;
    color: #fff !important;
    padding: 9px 18px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
}

#listings.listings-list article.item .view-btn:hover {
    color: #fff !important;
    background: #0d2238 !important;
}

/* ── Tier badges ── */
#listings.listings-list article.item .tier-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    color: #000 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    width: fit-content !important;
    margin-bottom: 0 !important;
}

#listings.listings-list article.item .tier-badge,
#listings.listings-list article.item .tier,
.tier-badge,
.tier {
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    z-index: 2 !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #000000 !important;
    box-shadow: none !important;
}

#listings.listings-list article.item .tier-badge.platinum,
#listings.listings-list article.item .platinum,
.tier-badge.platinum, .tier.platinum {
    background: #d8e2ec !important;
    color: #000000 !important;
}

#listings.listings-list article.item .tier-badge.goldtier,
#listings.listings-list article.item .goldtier,
.tier-badge.goldtier, .tier.goldtier {
    background: #ffe69b !important;
    color: #000000 !important;
}

#listings.listings-list article.item .tier-badge.silvertier,
#listings.listings-list article.item .silver,
.tier-badge.silvertier, .tier.silvertier {
    background: #e9edf1 !important;
    color: #000000 !important;
}

#listings.listings-list article.item .tier-badge.bronzetier,
#listings.listings-list article.item .bronze,
.tier-badge.bronzetier, .tier.bronzetier {
    background: #f1d2bb !important;
    color: #000000 !important;
}

#listings.listings-list article.item .tier-badge.freetier,
#listings.listings-list article.item .free,
.tier-badge.freetier, .tier.freetier {
    background: #eef1f3 !important;
    color: #000000 !important;
}

/* ── Divider / tier section headers ── */
#listings.listings-list>div.fieldset.divider {
    padding: 0 !important;
    margin: 10px 0 20px !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

#listings.listings-list div.fieldset.divider header {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #6e7c87 !important;
    padding: 0 !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
}

#listings.listings-list div.fieldset.divider header::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--line) !important;
    margin-left: 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID VIEW — 2 column card grid
   ═══════════════════════════════════════════════════════════ */
#listings.listings-list.grid-view {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    flex-direction: unset !important;
}

/* Make dividers span full width in grid */
#listings.listings-list.grid-view>div.fieldset.divider {
    grid-column: 1 / -1 !important;
}

#listings.listings-list.grid-view>article.item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 320px !important;
    border-radius: 15px !important;
    grid-template-columns: unset !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#listings.listings-list.grid-view article.item .picture-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 180px !important;
}

#listings.listings-list.grid-view article.item .picture-wrap img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
}

#listings.listings-list.grid-view article.item .listing-main {
    padding: 14px 15px 10px !important;
    flex: 1 !important;
    justify-content: flex-start !important;
}

#listings.listings-list.grid-view article.item .listing-main h3 {
    font-size: 15px !important;
    margin: 6px 0 5px !important;
}

#listings.listings-list.grid-view article.item .listing-main p {
    -webkit-line-clamp: 2 !important;
    font-size: 11px !important;
}

#listings.listings-list.grid-view article.item .listing-side {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-height: unset !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#listings.listings-list.grid-view article.item .listing-side .price {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: var(--navy) !important;
    text-align: left !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}

#listings.listings-list.grid-view article.item .listing-side .agency {
    font-size: 11px !important;
    color: var(--muted) !important;
    text-align: left !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    display: block !important;
}

#listings.listings-list.grid-view article.item .listing-side .view-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    background: var(--navy) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border: 1px solid var(--navy) !important;
    text-decoration: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
ul.paging,
.paging-block ul {
    display: flex !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 20px !important;
    list-style: none !important;
    padding: 0 !important;
}

ul.paging li a,
ul.paging li span,
.paging-block ul li a {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    color: var(--text) !important;
}

ul.paging li.active a,
ul.paging li.current a,
ul.paging li.current span {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--navy) !important;
}

/* Paging Note */
.paging-note {
    text-align: center !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-top: 12px !important;
    line-height: 1.5 !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .results-layout-content {
        grid-template-columns: 1fr !important;
    }

    .right-rail {
        display: none !important;
    }
}

@media (max-width: 900px) {
    #listings.listings-list.grid-view {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #listings.listings-list.grid-view {
        grid-template-columns: 1fr !important;
    }

    #listings.listings-list>article.item {
        grid-template-columns: 130px 1fr !important;
        min-height: 130px !important;
    }

    #listings.listings-list article.item .picture-wrap {
        width: 130px !important;
        min-height: 130px !important;
    }

    #listings.listings-list article.item .picture-wrap img {
        min-height: 130px !important;
        height: 100% !important;
    }

    #listings.listings-list article.item .listing-main {
        padding: 10px 12px !important;
    }

    #listings.listings-list article.item .listing-side {
        grid-column: 1 / -1 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
        padding: 10px 12px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

@media (max-width: 480px) {
    #listings.listings-list>article.item {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }

    #listings.listings-list article.item .picture-wrap {
        width: 100% !important;
        height: 200px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   TOOLBAR / GRID NAVBAR (List/Grid toggle & Sorting)
   ═══════════════════════════════════════════════════════════════ */

/* Position toolbar to the right of H1 on desktop */
.row.browse-layout>#content {
    position: relative !important;
}

.row.browse-layout .grid_navbar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* List / Grid Toggle Buttons */
.row.browse-layout .grid_navbar .switcher {
    display: flex !important;
    align-items: center !important;
}

.row.browse-layout .grid_navbar .buttons.view-switch {
    display: inline-flex !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.row.browse-layout .grid_navbar .buttons.view-switch a {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border-right: 1px solid var(--line) !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
}

.row.browse-layout .grid_navbar .buttons.view-switch a:last-child {
    border-right: none !important;
}

.row.browse-layout .grid_navbar .buttons.view-switch a.active {
    background: var(--navy) !important;
    color: #fff !important;
}

/* Sorting Dropdown */
.row.browse-layout .grid_navbar .sorting {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.row.browse-layout .grid_navbar .sorting .current {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    cursor: pointer !important;
}

.row.browse-layout .grid_navbar .sorting .current:hover {
    border-color: #c9d2d9 !important;
}

/* Hide the "Sort by:" text if possible, or just style it */
.row.browse-layout .grid_navbar .sorting .current .link {
    color: var(--navy) !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

.row.browse-layout .grid_navbar .sorting .current .arrow {
    margin-left: 8px !important;
    border-top-color: var(--navy) !important;
}

/* Notice Box (Yellow) */
.row.browse-layout .results-panel>.text-notice,
.row.browse-layout .results-panel>.yellow-notice {
    background: #fff8e1 !important;
    /* light yellow */
    border: 1px solid #ffe082 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 12px !important;
    color: #5c4000 !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

@media (max-width: 900px) {
    .row.browse-layout .grid_navbar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        justify-content: flex-start !important;
        margin-bottom: 20px !important;
        flex-wrap: wrap !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3-COLUMN LAYOUT: [Filter Sidebar] [Listings] [Advertisements]
   Applied on listing_type & search result pages via .browse-layout
   ═══════════════════════════════════════════════════════════════ */


@media (min-width: 992px) {
    .row.browse-layout {
        display: grid !important;
        grid-template-columns: 250px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 0 20px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    /* Column 1 – Filter sidebar */
    .row.browse-layout>aside.left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
        flex: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }

    /* Column 2 – Main listings content */
    .row.browse-layout>#content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Column 3 – Right Advertisements */
    .row.browse-layout>aside.right-rail-col,
    .row.browse-layout>aside.right {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
}

/* Format Toolbar Container (.rp-head) matching prototype 02_results_list_grid.html line 22 */
.results-panel .rp-head,
.rp-head,
.toolbar {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 13px !important;
    padding: 11px 13px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rp-head-left h1.rp-title,
.rp-head-left h1,
.row.browse-layout>#content>h1,
h1.rp-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.2 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.row.browse-layout>#content .results-panel>.subtitle {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 0 0 20px 0 !important;
}

/* Adjust Toolbar Switcher Position */
.rp-head-right .grid_navbar,
.row.browse-layout .grid_navbar {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Column 3 – Right-rail advertisements */
.row.browse-layout>.right-rail-col {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

/* ── Right-Rail Advertisement Card Styles ───────────────────── */
.right-rail-col .right-rail {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: sticky !important;
    top: 80px !important;
}

.ad-box {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(8, 42, 72, 0.10) !important;
}

.ad-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    padding: 6px 12px 4px !important;
    background: #f0f2f5 !important;
    border-bottom: 1px solid var(--line) !important;
}

.ad-creative {
    background: #fff !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ad-creative.dark {
    background: var(--navy) !important;
}

.ad-creative .ad-icon {
    font-size: 24px !important;
}

.ad-creative h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--text) !important;
}

.ad-creative.dark h4 {
    color: #fff !important;
}

.ad-creative p {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

.ad-creative.dark p {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ad-cta {
    display: inline-block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    letter-spacing: .02em !important;
    transition: background .2s, color .2s !important;
}

.ad-cta:hover {
    background: var(--goldtier) !important;
    color: #fff !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .row.browse-layout {
        grid-template-columns: 180px minmax(0, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .row.browse-layout {
        grid-template-columns: 180px minmax(0, 1fr) !important;
    }

    .row.browse-layout>.right-rail-col {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .row.browse-layout {
        grid-template-columns: 1fr !important;
    }

    .row.browse-layout>aside.left {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .row.browse-layout>#content {
        grid-row: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FILTER PANEL SIDEBAR  (content.tpl .filter-panel)
   Matches the provided mockup HTML exactly
   ═══════════════════════════════════════════════════════════════ */

/* Outer wrapper — sticky white card */
.row.browse-layout>aside.left .filter-panel {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(14, 42, 67, .06) !important;
    padding: 19px !important;
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
}

.row.browse-layout>aside.left .filter-panel h3 {
    margin: 0 0 15px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Each field row */
.row.browse-layout>aside.left .filter-panel .field {
    margin-bottom: 14px !important;
}

.row.browse-layout>aside.left .filter-panel .field label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin-bottom: 7px !important;
}

/* Inputs and selects */
.row.browse-layout>aside.left .filter-panel .field input[type="text"],
.row.browse-layout>aside.left .filter-panel .field select {
    width: 100% !important;
    height: 42px !important;
    border: 1px solid #d3dbe1 !important;
    border-radius: 20px !important;
    padding: 0 16px !important;
    background: #fff !important;
    font-size: 13px !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
}

.row.browse-layout>aside.left .filter-panel .field input[type="text"]::placeholder {
    color: var(--muted) !important;
}

/* Location field with pin icon */
.row.browse-layout>aside.left .filter-panel .location-input {
    position: relative !important;
}

.row.browse-layout>aside.left .filter-panel .location-input input {
    padding-right: 40px !important;
}

.row.browse-layout>aside.left .filter-panel .location-input span {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    font-size: 18px !important;
    pointer-events: none !important;
}

/* Map picker tile */
.row.browse-layout>aside.left .filter-panel .map-picker {
    height: 120px !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
    border: 1px solid #d8e0e5 !important;
    background:
        linear-gradient(35deg, rgba(65, 135, 88, .18) 25%, transparent 25%) 0 0/34px 34px,
        linear-gradient(-35deg, rgba(65, 135, 88, .14) 25%, transparent 25%) 0 0/34px 34px,
        #edf3f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 15px !important;
    cursor: pointer !important;
}

/* Min/Max price side-by-side */
.row.browse-layout>aside.left .filter-panel .two {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* Checkboxes 2-column grid */
.row.browse-layout>aside.left .filter-panel .checks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #506677 !important;
}

.row.browse-layout>aside.left .filter-panel .checks label {
    font-weight: 400 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

/* Apply Filters button */
.row.browse-layout>aside.left .filter-panel .filter-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 5px !important;
    background: var(--navy) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 20px !important;
    height: 44px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    letter-spacing: .02em !important;
}

.row.browse-layout>aside.left .filter-panel .filter-btn:hover {
    background: #0d2238 !important;
}

/* Left-rail ad boxes below filter */
.row.browse-layout>aside.left>.ad-box {
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(14, 42, 67, .06) !important;
}

.row.browse-layout>aside.left .side_block h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: transparent !important;
}

.row.browse-layout>aside.left .side_block .search-item {
    margin-bottom: 18px !important;
}

.row.browse-layout>aside.left .side_block .search-item .field {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Inputs and Selects */
.row.browse-layout>aside.left .side_block .search-item input[type="text"],
.row.browse-layout>aside.left .side_block .search-item select {
    width: 100% !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    background: #fff !important;
    color: var(--navy) !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.row.browse-layout>aside.left .side_block .search-item input[type="text"]::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}

.row.browse-layout>aside.left .side_block .search-item input[type="text"]:focus,
.row.browse-layout>aside.left .side_block .search-item select:focus {
    border-color: #c9d2d9 !important;
}

/* Min / Max Split fields */
.row.browse-layout>aside.left .side_block .search-item.three-field {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.row.browse-layout>aside.left .side_block .search-item.three-field .field {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
}

.row.browse-layout>aside.left .side_block .search-item.three-field input[type="text"] {
    width: 100% !important;
}

/* Hide the currency select in the price field if it exists, to match the mockup */
.row.browse-layout>aside.left .side_block .search-item.three-field select {
    display: none !important;
}

/* ── BUSINESS DIRECTORY BLOCKS (HOME PAGE) ───────────────────── */

/* Big Dark Blue Directory Banner */
.fitt-promo-banner-section {
    padding: 0 !important;
}

.fitt-promo-banner-card {
    background: #0A2540 !important;
    border-radius: 12px !important;
    padding: 32px 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff !important;
    margin-bottom: 48px !important;
    box-shadow: 0 10px 24px rgba(10, 37, 64, 0.15) !important;
}

.fitt-promo-left {
    flex: 1 !important;
    max-width: 600px !important;
}

.fitt-promo-label {
    color: #f5b211 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.fitt-promo-left h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
}

.fitt-promo-left p {
    font-size: 14px !important;
    color: #8ba0b5 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.fitt-promo-right {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
}

.fitt-promo-illustration {
    width: 120px !important;
    height: 80px !important;
}

.fitt-promo-illustration img {
    width: 100% !important;
    height: auto !important;
}

.fitt-promo-btn-yellow {
    background: #f5b211 !important;
    color: #0A2540 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.fitt-promo-btn-yellow:hover {
    background: #e5a40c !important;
    color: #0A2540 !important;
}

/* Business Directory Preview */
.fitt-preview-categories-section {
    padding: 0 0 48px !important;
}

.text-green {
    color: #1d9e75 !important;
}

.text-green:hover {
    color: #157959 !important;
}

.fitt-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.fitt-preview-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 20px 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 12px 28px rgba(14, 42, 67, 0.08) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.fitt-preview-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(8, 35, 63, 0.12) !important;
    text-decoration: none !important;
}

.fitt-preview-more-card {
    position: relative !important;
    overflow: hidden !important;
}

.fitt-preview-more-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    background: #fef3d6 !important;
    border-bottom-left-radius: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.fitt-preview-card .fitt-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    background: #f0f4f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    box-shadow: inset 0 0 0 1px rgba(10, 37, 64, 0.05) !important;
    transition: all 0.2s ease !important;
}

.fitt-preview-card .fitt-icon-wrap.fitt-icon-more {
    width: 58px !important;
    height: 58px !important;
    background: #0b2a45 !important;
    color: #a855f7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(11, 42, 69, 0.2) !important;
    z-index: 2 !important;
}

.fitt-preview-card .fitt-icon-wrap.fitt-icon-more svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #a855f7 !important;
    stroke-width: 3.5px !important;
    display: block !important;
}

.fitt-preview-card .fitt-icon-wrap img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.fitt-preview-card .fitt-icon-wrap i {
    font-size: 24px !important;
    color: #0A2540 !important;
}

.fitt-preview-card b {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0A2540 !important;
    margin-bottom: 4px !important;
    z-index: 2 !important;
}

.fitt-preview-card small {
    font-size: 11px !important;
    color: #6e7c87 !important;
    z-index: 2 !important;
}

.fitt-explore-badge {
    display: inline-block !important;
    background: #fef3d6 !important;
    color: #8a6200 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    margin-top: 6px !important;
    z-index: 2 !important;
}

/* View All Business Categories CTA Button */
.fitt-preview-cta {
    text-align: center !important;
    margin-top: 22px !important;
    margin-bottom: 10px !important;
}

.fitt-btn-navy-pill {
    display: inline-block !important;
    background: #0A2540 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Onest', 'Inter', system-ui, sans-serif !important;
    padding: 12px 32px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    letter-spacing: 0.3px !important;
}

.fitt-btn-navy-pill:hover {
    background: #163a5e !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.fitt-preview-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: #8a96a0 !important;
}

/* Responsive for Preview and Banner */
@media (max-width: 1024px) {
    .fitt-preview-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .fitt-promo-banner-card {
        flex-direction: column !important;
        padding: 24px !important;
        text-align: center !important;
    }

    .fitt-promo-right {
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 24px !important;
    }

    .fitt-promo-btn-yellow {
        width: 100% !important;
        text-align: center !important;
    }

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

/* ═══════════════════════════════════════════════════════════════════
   FINAL NUCLEAR OVERRIDES
   These rules must be LAST in the file to win over all Flynax defaults.
   Fixes: featured item dark overlay, location badge background,
   text highlights, improper padding, item.col spacing etc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── #listings CONTAINER — force vertical stack, kill Bootstrap .row ── */
#listings.listings-list,
#listings.listings-list.row,
#listings.list.listings-list,
#listings.list.listings-list.row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Kill ALL default Flynax item styling — we use our own grid card */
#listings.listings-list>article.item,
#listings.listings-list>article.item.featured,
#listings.listings-list>article.item.col,
#listings.listings-list>article.item.col-sm-12,
#listings.listings-list>article.item.no-image,
body #listings.listings-list>article.item {
    display: grid !important;
    grid-template-columns: 200px minmax(0, 1fr) 180px !important;
    gap: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    position: relative !important;
    min-height: 170px !important;
    padding: 0 !important;
    float: none !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-shadow: 0 1px 4px rgba(14, 42, 67, .05) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    color: var(--text) !important;
}

/* Reset featured item — Flynax gives it a special dark style */
#listings.listings-list>article.item.featured {
    border-color: var(--line) !important;
    background: #fff !important;
}

#listings.listings-list>article.item.featured::before,
#listings.listings-list>article.item.featured::after {
    display: none !important;
}

/* ── Picture wrap — prototype house icon placeholder matching 02_results_list_grid.html ── */
#listings.listings-list article.item .picture-wrap,
#listings.listings-list article.item.featured .picture-wrap,
.pic {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
    min-height: 170px !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #e8eff4 !important;
    position: relative !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#listings.listings-list article.item .picture-wrap img,
#listings.listings-list article.item.featured .picture-wrap img {
    width: 100% !important;
    height: 100% !important;
    min-height: 170px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    position: static !important;
}

#listings.listings-list article.item .no-image-placeholder,
#listings.listings-list article.item .picture-wrap a,
.no-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 170px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 55px !important;
    background: #e8eff4 !important;
    color: var(--text) !important;
    text-decoration: none !important;
}

/* ── Center content — PURE white/clean, no highlights ── */
#listings.listings-list article.item .listing-main,
#listings.listings-list article.item.featured .listing-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    color: var(--text) !important;
}

/* h3 title — plain dark text, no highlight */
#listings.listings-list article.item .listing-main h3,
#listings.listings-list article.item.featured .listing-main h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 4px 0 7px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    text-shadow: none !important;
}

#listings.listings-list article.item .listing-main h3 a,
#listings.listings-list article.item.featured .listing-main h3 a {
    color: var(--text) !important;
    background: transparent !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

#listings.listings-list article.item .listing-main h3 a:hover {
    color: var(--navy) !important;
}

/* Location — just a small bold teal label, NO background box */
#listings.listings-list article.item .listing-main .location,
#listings.listings-list article.item.featured .listing-main .location,
#listings.listings-list article.item .location {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #456176 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
    display: block !important;
    text-transform: none !important;
}

/* Description paragraph */
#listings.listings-list article.item .listing-main p,
#listings.listings-list article.item.featured .listing-main p {
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1.55 !important;
    margin: 7px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 0 !important;
    text-shadow: none !important;
}

/* Feature pills */
#listings.listings-list article.item .features,
#listings.listings-list article.item.featured .features {
    display: flex !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
}

#listings.listings-list article.item .feature,
#listings.listings-list article.item.featured .feature {
    font-size: 10px !important;
    background: #f1f5f7 !important;
    border-radius: 999px !important;
    padding: 6px 8px !important;
    color: #536a7c !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Right side column ── */
#listings.listings-list article.item .listing-side,
#listings.listings-list article.item.featured .listing-side {
    grid-column: 3 !important;
    grid-row: 1 !important;
    border-left: 1px solid var(--line) !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    background: #fff !important;
    width: 180px !important;
    min-width: 180px !important;
    box-sizing: border-box !important;
    float: none !important;
}

#listings.listings-list article.item .price,
#listings.listings-list article.item.featured .price {
    font-size: 18px !important;
    font-weight: 900 !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
    color: var(--navy) !important;
    text-align: right !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

#listings.listings-list article.item .agency,
#listings.listings-list article.item.featured .agency {
    font-size: 10px !important;
    color: var(--muted) !important;
    text-align: right !important;
    line-height: 1.45 !important;
    background: transparent !important;
}

#listings.listings-list article.item .view-btn,
#listings.listings-list article.item.featured .view-btn,
.view-btn,
a.view-btn {
    background: var(--navy) !important;
    color: #fff !important;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    border: 1px solid var(--navy) !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#listings.listings-list article.item .view-btn:hover,
#listings.listings-list article.item.featured .view-btn:hover,
.view-btn:hover,
a.view-btn:hover {
    background: #123d61 !important;
    border-color: #123d61 !important;
    color: #fff !important;
}

/* ── Tier badges ── */
#listings.listings-list article.item .tier-badge,
#listings.listings-list article.item.featured .tier-badge,
.tier-badge,
.tier {
    display: inline-flex !important;
    border-radius: 999px !important;
    padding: 5px 8px !important;
    color: #000000 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background-clip: unset !important;
    width: auto !important;
    margin: 0 !important;
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    z-index: 2 !important;
}

/* ── Tier Divider headers ── */
#listings.listings-list>div.fieldset.divider,
#listings.listings-list>div.fieldset.divider.col,
#listings.listings-list>div.fieldset.divider.col-sm-12 {
    padding: 0 !important;
    margin: 8px 0 12px !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    background: transparent !important;
    border: 0 !important;
}

#listings.listings-list div.fieldset.divider header {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #6e7c87 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#listings.listings-list div.fieldset.divider header::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--line) !important;
}

/* ── Results panel H1 area ── */
.results-panel>h1,
.results-panel .results-head h1 {
    font-size: 29px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.2 !important;
}

/* Grid navbar (List/Grid/Sort bar) inside rp-head */
.results-panel .rp-head-right .grid_navbar {
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Results head row: H1+meta left, controls right */
.results-panel .rp-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
    height: auto !important;
    overflow: visible !important;
}

/* #listings container: always vertical stack (overrides Bootstrap .row) */
#listings.listings-list.row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px !important;
}

#listings.listings-list.row>article.item.col-sm-12,
#listings.listings-list.row>article.item.col,
#listings.listings-list.row>div.fieldset.divider.col-sm-12,
#listings.listings-list.row>div.fieldset.col-sm-12 {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Grid view: 3 column card grid */
#listings.listings-list.grid-view {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    flex-direction: unset !important;
}

#listings.listings-list.grid-view>div.fieldset.divider {
    grid-column: 1 / -1 !important;
}

#listings.listings-list.grid-view>article.item,
#listings.listings-list.grid-view>article.item.featured {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 340px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#listings.listings-list.grid-view article.item .picture-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    aspect-ratio: unset !important;
    background: #e8eff4 !important;
    position: relative !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

#listings.listings-list.grid-view article.item .picture-wrap img {
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
}

#listings.listings-list.grid-view article.item .listing-main {
    padding: 15px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

#listings.listings-list.grid-view article.item .listing-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 15px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-column: unset !important;
    grid-row: unset !important;
    grid-template-columns: unset !important;
}

#listings.listings-list.grid-view article.item .listing-side .price {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: var(--navy) !important;
    white-space: nowrap !important;
    text-align: left !important;
    overflow: visible !important;
    margin: 0 !important;
    display: block !important;
    grid-column: unset !important;
    grid-row: unset !important;
    line-height: 1.2 !important;
}

#listings.listings-list.grid-view article.item .listing-side .agency {
    font-size: 11px !important;
    color: var(--muted) !important;
    text-align: left !important;
    display: block !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

#listings.listings-list.grid-view article.item .listing-side .view-btn {
    width: auto !important;
    height: auto !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--navy) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border: 1px solid var(--navy) !important;
    text-decoration: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
    #listings.listings-list.grid-view {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {

    #listings.listings-list>article.item,
    #listings.listings-list>article.item.featured {
        grid-template-columns: 130px 1fr !important;
        min-height: 130px !important;
    }

    #listings.listings-list article.item .picture-wrap {
        width: 130px !important;
        min-height: 130px !important;
    }

    #listings.listings-list.grid-view {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {

    #listings.listings-list>article.item,
    #listings.listings-list>article.item.featured {
        grid-template-columns: 1fr !important;
    }

    #listings.listings-list article.item .picture-wrap {
        width: 100% !important;
        height: 200px !important;
    }

    #listings.listings-list article.item .listing-side {
        grid-column: 1 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE ORDER FIX (browse/search pages only)
   Filter panel FIRST, then the listings results.
   Desktop / tablet layouts are untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .row.browse-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .row.browse-layout>aside.left {
        display: block !important;
        position: static !important;
        overflow: visible !important;
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .row.browse-layout>aside.left .filter-panel {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .row.browse-layout>aside.left .filter-menu-header,
    .row.browse-layout>aside.left .mobile-menu-header {
        display: none !important;
    }

    .row.browse-layout>#content {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .row.browse-layout>aside.right-rail-col {
        order: 3 !important;
        display: none !important;
    }

    /* Filter icon is useless now that the panel is always visible */
    .row.browse-layout .filter-icon {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — complete responsive fix  ≤ 767px
   Matches 2nd and 3rd reference images exactly.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Step bar: small on mobile ───────────────────────────── */
    .fitt-step-bar {
        font-size: 11px !important;
        padding: 8px 10px !important;
        margin: 10px 0 8px !important;
        border-radius: 8px !important;
        display: block !important;
    }

    /* ── Inside container: no extra top padding + full width on mobile ── */
    .inside-container.point1,
    body:not(.home-page) #main_container > .inside-container.point1 {
        padding-top: 10px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Results panel ───────────────────────────────────────── */
    .results-panel {
        padding: 12px !important;
        border-radius: 14px !important;
        border: 1px solid var(--line) !important;
    }

    /* rp-head: title on top, controls below */
    .results-panel .rp-head {
        display: block !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .results-panel .rp-head-left {
        margin-bottom: 10px !important;
    }

    /* Title */
    .results-panel .rp-title,
    .results-panel h1 {
        font-size: 22px !important;
        margin: 0 0 4px !important;
    }

    /* Meta */
    .results-panel .rp-meta,
    .results-panel .meta {
        font-size: 11px !important;
        white-space: normal !important;
    }

    /* Controls: right side becomes full-width */
    .results-panel .rp-head-right {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* grid_navbar: ROW 1 = List+Grid + 60/page, ROW 2 = dropdown */
    .grid_navbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* switcher (List/Grid buttons) stays on row 1 */
    .grid_navbar .switcher {
        flex: 0 0 auto !important;
        order: 1 !important;
    }

    /* per-page pill stays on row 1 */
    .grid_navbar .per-page-pill,
    .grid_navbar .per-page {
        flex: 0 0 auto !important;
        order: 2 !important;
        font-size: 12px !important;
        height: 36px !important;
        padding: 0 12px !important;
    }

    /* sorting dropdown goes to row 2 (full width) */
    .grid_navbar .sorting {
        order: 3 !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .grid_navbar .sorting select,
    .grid_navbar select {
        height: 36px !important;
        font-size: 12px !important;
        width: auto !important;
        min-width: 130px !important;
    }

    /* view-switch button sizes */
    .grid_navbar .buttons.view-switch {
        height: 36px !important;
    }

    .grid_navbar .buttons.view-switch a {
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    /* ── Tier-order yellow info box ──────────────────────────── */
    .tier-order {
        font-size: 11px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
        line-height: 1.55 !important;
    }

    /* ── LIST VIEW cards → vertical stack on mobile ──────────── */
    /* Image on top, content below, price+btn in bottom bar      */
    #listings.listings-list > article.item,
    #listings.listings-list > article.item.featured {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        min-height: unset !important;
        border-radius: 14px !important;
    }

    /* Image: full width on top */
    #listings.listings-list article.item .picture-wrap {
        width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
        flex-shrink: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        overflow: hidden !important;
    }

    #listings.listings-list article.item .picture-wrap img {
        width: 100% !important;
        height: 100% !important;
        min-height: 200px !important;
        object-fit: cover !important;
    }

    /* Center content */
    #listings.listings-list article.item .listing-main {
        padding: 14px 14px 10px !important;
        flex: 1 !important;
    }

    #listings.listings-list article.item .listing-main h3 {
        font-size: 16px !important;
        margin: 6px 0 6px !important;
    }

    #listings.listings-list article.item .listing-main p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 12px !important;
    }

    /* Right side: becomes bottom bar (price left, btn right) */
    #listings.listings-list article.item .listing-side {
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
        padding: 10px 14px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #listings.listings-list article.item .price {
        font-size: 17px !important;
        text-align: left !important;
    }

    #listings.listings-list article.item .agency {
        font-size: 10px !important;
        text-align: left !important;
        margin-top: 2px !important;
    }

    #listings.listings-list article.item .view-btn {
        flex-shrink: 0 !important;
        padding: 9px 14px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }

    /* ── GRID VIEW cards → single column on mobile ───────────── */
    #listings.listings-list.grid-view {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #listings.listings-list.grid-view article.item {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 14px !important;
    }

    #listings.listings-list.grid-view article.item .picture-wrap {
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        border-radius: 14px 14px 0 0 !important;
    }

    #listings.listings-list.grid-view article.item .listing-main {
        padding: 14px 14px 10px !important;
        flex: 1 !important;
    }

    #listings.listings-list.grid-view article.item .listing-side {
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
        padding: 10px 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        grid-template-columns: unset !important;
    }

    #listings.listings-list.grid-view article.item .listing-side .price {
        font-size: 17px !important;
        text-align: left !important;
        grid-column: unset !important;
    }

    #listings.listings-list.grid-view article.item .listing-side .agency {
        display: none !important;
    }

    #listings.listings-list.grid-view article.item .listing-side .view-btn {
        grid-column: unset !important;
        grid-row: unset !important;
        flex-shrink: 0 !important;
    }

    /* ── Tier divider ────────────────────────────────────────── */
    .tier-divider {
        font-size: 10px !important;
        margin: 8px 0 4px !important;
        letter-spacing: .05em !important;
    }

    /* ── Pagination ──────────────────────────────────────────── */
    .pagination {
        gap: 5px !important;
        margin-top: 18px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .pagination a {
        width: 34px !important;
        height: 34px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    /* ── Filter sidebar on mobile ────────────────────────────── */
    .filter-panel {
        border-radius: 14px !important;
        padding: 15px !important;
    }

    .filter-panel h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 400px) {
    /* Very small phones */
    .fitt-step-bar {
        display: block !important;
    }

    .results-panel .rp-title,
    .results-panel h1 {
        font-size: 18px !important;
    }

    #listings.listings-list article.item .picture-wrap {
        height: 180px !important;
        min-height: 180px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL MOBILE FIX — RESULTS PANEL + LISTING CARDS
   Placed LAST so it beats every earlier rule in this file.
   Mobile (≤ 767px): panel → head (title/meta) → toolbar (2 rows) →
   tier box → vertical cards (image / content / bottom bar) → paging.
   ═══════════════════════════════════════════════════════════════════ */

/* Search page: grid_navbar sits directly inside .results-panel —
   neutralise the absolute-position override so it stays in-flow. */
.results-panel > .grid_navbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    justify-content: flex-end !important;
    margin: 0 0 16px !important;
}

/* Cards without photos: drop the empty grey picture box entirely */
#listings.listings-list article.item.no-image .picture-wrap,
#listings.listings-list article.item.no-image .picture-wrap a,
#listings.listings-list article.item.no-image .picture-wrap img {
    display: none !important;
}

@media (max-width: 767px) {

    /* ── Browse Layout & Column Order on Mobile ─────────────── */
    .row.browse-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .browse-layout #content,
    .browse-layout > #content,
    #content.col-lg-7,
    #content.order-2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        order: 1 !important;
    }

    .browse-layout .left,
    .browse-layout aside.left,
    aside.left {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        position: static !important;
        top: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        order: 2 !important;
    }

    /* ── Responsive Filter Sidebar Card ──────────────────────── */
    aside.left .filters,
    aside.left .filter-panel,
    aside.left .side_block,
    .filters {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 18px 16px !important;
        border-radius: 14px !important;
        background: #fff !important;
        border: 1px solid var(--line) !important;
        box-shadow: 0 2px 8px rgba(14, 42, 67, .04) !important;
        margin: 0 !important;
    }

    aside.left h3,
    .filters h3 {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--navy) !important;
        margin: 0 0 12px 0 !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--line) !important;
    }

    aside.left .filter,
    .filter {
        width: 100% !important;
        margin: 12px 0 !important;
        box-sizing: border-box !important;
    }

    aside.left .filter label,
    .filter label,
    aside.left label {
        display: block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--muted) !important;
        margin-bottom: 6px !important;
    }

    aside.left .filter select,
    aside.left .filter input,
    .filter select,
    .filter input,
    aside.left select,
    aside.left input {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        box-sizing: border-box !important;
        border: 1px solid #d5dce2 !important;
        border-radius: 8px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        background: #fff !important;
        color: var(--text) !important;
        outline: none !important;
    }

    aside.left .btn.navy,
    .filters .btn.navy,
    .filters button[type="submit"],
    .filters a.btn {
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        border-radius: 999px !important;
        margin-top: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--navy) !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
    }

    /* ── Panel Wrapper (Results Header & Container) ───────────── */
    .results-panel {
        padding: 14px 12px !important;
        border-radius: 14px !important;
        border: 1px solid var(--line) !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(14, 42, 67, .04) !important;
        background: #fff !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .results-panel .rp-head {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 0 12px 0 !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid var(--line) !important;
        background: transparent !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    .results-panel .rp-head-left {
        margin: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .results-panel .rp-title,
    .results-panel h1 {
        font-size: 20px !important;
        font-weight: 900 !important;
        color: var(--navy) !important;
        margin: 0 0 4px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.25 !important;
    }

    .results-panel .rp-meta,
    .results-panel .meta {
        font-size: 12px !important;
        color: var(--muted) !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    .results-panel .rp-head-right {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* ── Toolbar / View Switcher (List / Grid) ───────────────── */
    .grid_navbar,
    .results-panel .rp-head-right .grid_navbar,
    .results-panel > .grid_navbar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .grid_navbar .switcher {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    .grid_navbar .buttons.view-switch {
        height: 36px !important;
        display: inline-flex !important;
        border: 1px solid #dfe5ea !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #f8fafc !important;
        padding: 2px !important;
    }

    .grid_navbar .buttons.view-switch a {
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
    }

    .grid_navbar .per-page-pill {
        order: 2 !important;
        flex: 0 0 auto !important;
        height: 36px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
    }

    .grid_navbar .sorting {
        order: 3 !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .grid_navbar .sorting select,
    .grid_navbar select.tier-select-dropdown {
        width: auto !important;
        min-width: 140px !important;
        height: 36px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* ── Tier-order info box ──────────────────────────────── */
    .tier-order {
        font-size: 11px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 14px !important;
        line-height: 1.5 !important;
        background: #fff8e5 !important;
        border-left: 4px solid var(--gold) !important;
        color: #5c4400 !important;
    }

    /* ── LISTINGS CONTAINER (Mobile ≤ 767px) ─────────────────── */
    #listings.listings-list,
    #listings.list,
    #listings.grid,
    #listings.grid-view,
    #listings {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ══════════════════════════════════════════════════════════════
       1. LIST VIEW (Mobile ≤ 767px):
       Row 1: [ Image (~130px) | Content (Title, Location, Desc) ]
       Row 2: [ Bottom Bar (Price left | View Details right) ]
       ═══════════════════════════════════════════════════════════ */
    #listings.list > article.item,
    #listings.listings-list:not(.grid-view):not(.grid) > article.item {
        display: grid !important;
        grid-template-columns: 130px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(14, 42, 67, .04) !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    /* Picture (Row 1, Column 1) */
    #listings.list article.item .picture-wrap,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .picture-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        height: 100% !important;
        min-height: 130px !important;
        max-height: none !important;
        border-radius: 14px 0 0 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
        background: #e8eff4 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #listings.list article.item .picture-wrap a,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .picture-wrap a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    #listings.list article.item .picture-wrap img,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .picture-wrap img {
        width: 100% !important;
        height: 100% !important;
        min-height: 130px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 14px 0 0 0 !important;
    }

    #listings.list article.item .picture-wrap .no-image-placeholder,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .picture-wrap .no-image-placeholder {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 42px !important;
        background: #e8eff4 !important;
    }

    /* Tier Badge inside picture */
    #listings.list article.item .tier,
    #listings.list article.item .tier-badge,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .tier,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .tier-badge {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 2 !important;
        padding: 3px 8px !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        border-radius: 999px !important;
    }

    /* Main Content on the RIGHT of the image (Row 1, Column 2) */
    #listings.list article.item .listing-main,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 12px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #listings.list article.item .listing-main h3,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-main h3 {
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin: 0 0 2px 0 !important;
        color: var(--text) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #listings.list article.item .listing-main h3 a,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-main h3 a {
        color: inherit !important;
        text-decoration: none !important;
    }

    #listings.list article.item .location,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .location {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #456176 !important;
        margin: 0 !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #listings.list article.item .listing-main p,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-main p {
        font-size: 11px !important;
        color: var(--muted) !important;
        line-height: 1.45 !important;
        margin: 2px 0 0 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Bottom Bar across full width (Row 2, Column 1 to 2) */
    #listings.list article.item .listing-side,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-side {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
        padding: 10px 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #fafbfc !important;
        border-radius: 0 0 14px 14px !important;
        gap: 8px !important;
    }

    #listings.list article.item .listing-side .price,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-side .price {
        font-size: 16px !important;
        font-weight: 900 !important;
        color: var(--navy) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    #listings.list article.item .listing-side .agency,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-side .agency {
        font-size: 10px !important;
        color: var(--muted) !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #listings.list article.item .listing-side .view-btn,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-side .view-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--navy) !important;
        color: #fff !important;
        padding: 7px 15px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border: 1px solid var(--navy) !important;
        margin: 0 !important;
    }

    /* ══════════════════════════════════════════════════════════════
       2. GRID VIEW (Mobile ≤ 767px): Vertical Full-Width Card
       ═══════════════════════════════════════════════════════════ */
    #listings.grid,
    #listings.grid-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    #listings.grid > article.item,
    #listings.grid-view > article.item {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(14, 42, 67, .04) !important;
        box-sizing: border-box !important;
    }

    #listings.grid article.item .picture-wrap,
    #listings.grid-view article.item .picture-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        border-radius: 14px 14px 0 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
        background: #e8eff4 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #listings.grid article.item .picture-wrap a,
    #listings.grid-view article.item .picture-wrap a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    #listings.grid article.item .picture-wrap img,
    #listings.grid-view article.item .picture-wrap img {
        width: 100% !important;
        height: 100% !important;
        min-height: 190px !important;
        max-height: 190px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 14px 14px 0 0 !important;
    }

    #listings.grid article.item .picture-wrap .no-image-placeholder,
    #listings.grid-view article.item .picture-wrap .no-image-placeholder {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 55px !important;
        background: #e8eff4 !important;
    }

    #listings.grid article.item .tier-badge,
    #listings.grid article.item .tier,
    #listings.grid-view article.item .tier-badge,
    #listings.grid-view article.item .tier {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 2 !important;
        padding: 4px 10px !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        border-radius: 999px !important;
    }

    #listings.grid article.item .listing-main,
    #listings.grid-view article.item .listing-main {
        padding: 14px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
    }

    #listings.grid article.item .listing-main h3,
    #listings.grid-view article.item .listing-main h3 {
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        margin: 0 0 2px 0 !important;
        color: var(--text) !important;
        word-wrap: break-word !important;
    }

    #listings article.item .listing-main h3 a {
        color: inherit !important;
        text-decoration: none !important;
    }

    #listings article.item .location {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #456176 !important;
        margin: 0 !important;
        display: block !important;
    }

    #listings article.item .listing-main p {
        font-size: 12px !important;
        color: var(--muted) !important;
        line-height: 1.55 !important;
        margin: 4px 0 0 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #listings.grid article.item .listing-side,
    #listings.grid-view article.item .listing-side {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #fff !important;
        border-radius: 0 0 14px 14px !important;
        gap: 10px !important;
    }

    #listings.grid article.item .listing-side .price,
    #listings.grid-view article.item .listing-side .price {
        font-size: 18px !important;
        font-weight: 900 !important;
        color: var(--navy) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    #listings.grid article.item .listing-side .agency,
    #listings.grid-view article.item .listing-side .agency {
        font-size: 11px !important;
        color: var(--muted) !important;
        margin: 2px 0 0 0 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        display: block !important;
    }

    #listings.grid article.item .listing-side .view-btn,
    #listings.grid-view article.item .listing-side .view-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--navy) !important;
        color: #fff !important;
        padding: 9px 18px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border: 1px solid var(--navy) !important;
        margin: 0 !important;
    }

    /* ── Pagination (real markup is ul.paging) ────────────── */
    ul.paging,
    .paging-block ul {
        gap: 5px !important;
        flex-wrap: wrap !important;
        margin-top: 18px !important;
        justify-content: center !important;
        display: flex !important;
    }

    ul.paging li a,
    ul.paging li span,
    .paging-block ul li a {
        width: 34px !important;
        height: 34px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .paging-note {
        font-size: 11px !important;
        line-height: 1.5 !important;
        margin-top: 12px !important;
        text-align: center !important;
    }
}

/* ── Extra-small phones ──────────────────────────────────────────── */
@media (max-width: 400px) {
    .results-panel .rp-title,
    .results-panel h1 {
        font-size: 18px !important;
    }

    /* List View adjustments for narrow phones (320px–375px) */
    #listings.list > article.item,
    #listings.listings-list:not(.grid-view):not(.grid) > article.item {
        grid-template-columns: 115px minmax(0, 1fr) !important;
    }

    #listings.list article.item .picture-wrap,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .picture-wrap {
        width: 115px !important;
        min-width: 115px !important;
        max-width: 115px !important;
        min-height: 115px !important;
    }

    #listings.list article.item .listing-main,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-main {
        padding: 10px 10px !important;
    }

    #listings.list article.item .listing-main h3,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-main h3 {
        font-size: 13px !important;
    }

    #listings.list article.item .listing-side .price,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-side .price {
        font-size: 15px !important;
    }

    #listings.list article.item .listing-side .view-btn,
    #listings.listings-list:not(.grid-view):not(.grid) article.item .listing-side .view-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    /* Grid View adjustments */
    #listings.grid article.item .picture-wrap,
    #listings.grid-view article.item .picture-wrap {
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
    }

    #listings.grid article.item .listing-side .price,
    #listings.grid-view article.item .listing-side .price {
        font-size: 16px !important;
    }

    #listings.grid article.item .listing-side .view-btn,
    #listings.grid-view article.item .listing-side .view-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ================================================================
   REAL ESTATE SUBCATEGORY LANDING PAGE
   ================================================================ */

/* ── Hero ──────────────────────────────────────────────────────── */
.re-hero {
    background: #0d2340;
    border-radius: 16px;
    padding: 48px 40px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.re-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(30,80,140,0.5) 0%, transparent 70%);
    pointer-events: none;
}

.re-hero-inner {
    position: relative;
    max-width: 600px;
}

.re-hero-title {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
}

.re-hero-sub {
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    margin: 0 0 28px;
    line-height: 1.55;
}

.re-hero-btn {
    display: inline-block;
    background: #F59E0B;
    color: #0d2340 !important;
    font-weight: 800;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s;
}

.re-hero-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ── Section heading ────────────────────────────────────────────── */
.re-cats-wrap {
    padding: 4px 0 32px;
}

.re-cats-title {
    font-size: 22px;
    font-weight: 800;
    color: #0d2340;
    margin: 0 0 4px;
}

.re-cats-sub {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 22px;
}

/* ── 4-column grid ──────────────────────────────────────────────── */
.re-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ── Individual card ────────────────────────────────────────────── */
.re-cat-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 18px 18px;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.re-cat-card:hover {
    border-color: #F59E0B;
    box-shadow: 0 4px 18px rgba(245,158,11,0.14);
    transform: translateY(-2px);
    text-decoration: none !important;
}

.re-cat-icon {
    font-size: 32px;
    margin-bottom: 12px;
    line-height: 1;
}

.re-cat-name {
    font-size: 15px;
    font-weight: 700;
    color: #0d2340;
    margin-bottom: 6px;
    display: block;
    line-height: 1.3;
}

.re-cat-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.5;
    flex: 1;
}

.re-cat-count {
    font-size: 13px;
    font-weight: 600;
    color: #16a34a;
    margin-top: auto;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .re-cats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .re-hero {
        padding: 32px 20px;
        border-radius: 12px;
    }

    .re-hero-title {
        font-size: 22px;
    }

    .re-cats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .re-cat-card {
        padding: 16px 14px 14px;
    }

    .re-cat-icon {
        font-size: 26px;
    }

    .re-cat-name {
        font-size: 14px;
    }
}

@media (max-width: 479px) {
    .re-cats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .re-hero-btn {
        width: 100%;
        text-align: center;
    }
}

/* ================================================================
   BUSINESS DIRECTORY SYSTEM (PROTOTYPE MATCH)
   ================================================================ */
:root {
  --fitt-navy: #0b2a45;
  --fitt-navy2: #123c5f;
  --fitt-gold: #f5a800;
  --fitt-green: #19a978;
  --fitt-text: #172536;
  --fitt-muted: #6c7887;
  --fitt-line: #e3e7eb;
  --fitt-soft: #f6f7f8;
  --fitt-shadow: 0 10px 30px rgba(18,40,62,.08);
  --fitt-max: 1420px;
}

.fitt-directory-page {
  max-width: var(--fitt-max);
  margin: auto;
  padding-top: 15px;
  padding-bottom: 54px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--fitt-text);
}

.fitt-directory-page .hero {
  background: linear-gradient(125deg, var(--fitt-navy), #0f4a6d);
  color: #fff;
  border-radius: 22px;
  padding: 42px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 10px 28px rgba(11,42,69,.18);
}

.fitt-directory-page .eyebrow {
  display: inline-block;
  color: #ffd56b;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.fitt-directory-page .hero h1 {
  font-size: 44px;
  line-height: 1.08;
  margin: 0 0 14px;
  color: #fff !important;
}

.fitt-directory-page .hero p {
  color: #dce9f4;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.fitt-directory-page .hero-card {
  background: #fff;
  color: var(--fitt-text);
  border-radius: 18px;
  padding: 22px;
}

.fitt-directory-page .hero-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--fitt-navy);
}

.fitt-directory-page .hero-card p,
.fitt-directory-page .hero-card li {
  color: var(--fitt-muted);
  font-size: 14px;
  line-height: 1.6;
}

.fitt-directory-page .section {
  padding-top: 40px;
}

.fitt-directory-page .section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
}

.fitt-directory-page .section-head h1,
.fitt-directory-page .section-head h2 {
  margin: 0;
  font-size: 31px;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .section-head p {
  margin: 6px 0 0;
  color: var(--fitt-muted);
  font-size: 15px;
}

.fitt-directory-page .directory-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.fitt-directory-page .directory-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--fitt-line);
  border-radius: 16px;
  padding: 17px;
  min-height: 164px;
  box-shadow: 0 4px 18px rgba(18,40,62,.05);
  transition: .18s ease;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.fitt-directory-page .directory-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fitt-shadow);
  text-decoration: none !important;
}

.fitt-directory-page .directory-card.active {
  border: 2px solid var(--fitt-gold) !important;
  background: #fff9e8 !important;
}

.fitt-directory-page .directory-card.active::after {
  content: "SELECTED";
  position: absolute;
  right: 10px;
  top: 10px;
  background: var(--fitt-gold);
  color: var(--fitt-navy);
  font-size: 9px;
  font-weight: 900;
  padding: 4px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.fitt-directory-page .icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eef4f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px;
}

.fitt-directory-page .directory-card h3 {
  font-size: 15px;
  margin: 13px 0 5px;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .directory-card p {
  font-size: 12px;
  line-height: 1.42;
  color: var(--fitt-muted);
  margin: 0;
}

.fitt-directory-page .count {
  color: var(--fitt-green);
  font-size: 11px;
  font-weight: 900;
  margin-top: 12px;
}

.fitt-directory-page .breadcrumb {
  font-size: 13px;
  color: var(--fitt-muted);
  margin-bottom: 15px;
}

.fitt-directory-page .breadcrumb a {
  color: var(--fitt-navy);
  font-weight: 600;
  text-decoration: none;
}

.fitt-directory-page .category-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  gap: 20px;
  align-items: start;
}

.fitt-directory-page .adrail {
  position: sticky;
  top: 145px;
  border: 1px dashed #bbc4cd;
  background: #fff;
  border-radius: 14px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fitt-muted);
  font-size: 12px;
  padding: 15px;
}

.fitt-directory-page .category-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.fitt-directory-page .category-top h1 {
  font-size: 34px;
  margin: 0 0 6px;
  color: var(--fitt-navy);
  font-weight: 900;
}

.fitt-directory-page .category-top p {
  margin: 0;
  color: var(--fitt-muted);
  font-size: 15px;
}

.fitt-directory-page .filterbar {
  display: grid;
  grid-template-columns: 1fr 170px 180px auto;
  gap: 9px;
  padding: 13px;
  background: var(--fitt-soft);
  border-radius: 14px;
  margin-bottom: 16px;
}

.fitt-directory-page .filterbar input,
.fitt-directory-page .filterbar select {
  min-height: 44px;
  border: 1px solid #d6dce2;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
}

.fitt-directory-page .subcat {
  background: #fff;
  border: 1px solid var(--fitt-line);
  border-radius: 14px;
  padding: 17px;
  margin-bottom: 17px;
}

.fitt-directory-page .subcat h3 {
  margin: 0 0 11px;
  font-size: 16px;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .subcat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px 18px;
  font-size: 13px;
}

.fitt-directory-page .subcat-grid a {
  color: var(--fitt-navy);
  text-decoration: none;
  font-weight: 600;
}

.fitt-directory-page .subcat-grid a::before {
  content: "›";
  color: #9aa6b2;
  margin-right: 7px;
  font-weight: 900;
}

.fitt-directory-page .priority-note {
  background: #fff8e5;
  border-left: 4px solid var(--fitt-gold);
  padding: 13px 15px;
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  margin-bottom: 15px;
  color: #5c4400;
  line-height: 1.5;
}

.fitt-directory-page .business-list {
  display: grid;
  gap: 14px;
}

.fitt-directory-page .business-card {
  position: relative;
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 165px;
  gap: 17px;
  background: #fff;
  border: 1px solid var(--fitt-line);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 4px 16px rgba(18,40,62,.04);
}

.fitt-directory-page .business-card.platinum {
  border: 2px solid #9aaabd !important;
  box-shadow: 0 9px 25px rgba(70,90,115,.13) !important;
}

.fitt-directory-page .business-photo {
  width: 145px;
  height: 124px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(135deg,#dfe7ee,#f7fafc);
}

.fitt-directory-page .photo-placeholder {
  width: 145px;
  height: 124px;
  border-radius: 12px;
  background: linear-gradient(135deg,#d9e4ed,#eef4f8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.fitt-directory-page .business-card h3 {
  font-size: 20px;
  margin: 8px 0 4px;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .rating {
  color: #df9800;
  font-weight: 900;
  font-size: 13px;
}

.fitt-directory-page .meta {
  color: var(--fitt-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 7px;
}

.fitt-directory-page .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.fitt-directory-page .tag {
  font-size: 10px;
  background: #edf5f9;
  color: #35627e;
  border-radius: 7px;
  padding: 5px 7px;
  font-weight: 700;
}

.fitt-directory-page .business-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.fitt-directory-page .badges {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}

.fitt-directory-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.fitt-directory-page .verified {
  background: #e5f7ee;
  color: #16814c;
}

.fitt-directory-page .tier-platinum {
  background: linear-gradient(135deg,#f7f9fc,#c7d2df);
  color: #334155;
  border: 1px solid #a9b8c8;
}

.fitt-directory-page .tier-gold {
  background: #fff2b9;
  color: #755700;
}

.fitt-directory-page .tier-silver {
  background: #eef1f5;
  color: #586372;
}

.fitt-directory-page .tier-bronze {
  background: #f5dfcd;
  color: #865126;
}

.fitt-directory-page .tier-free {
  background: #f2f3f5;
  color: #717985;
}

.fitt-directory-page .rank {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 10px;
  font-weight: 900;
  color: #8b98a5;
}

.fitt-directory-page .owner-cta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background: var(--fitt-navy);
  color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 20px 0;
}

.fitt-directory-page .owner-cta p {
  margin: 5px 0 0;
  color: #d7e4ee;
  font-size: 13px;
}

.fitt-directory-page .profile-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}

.fitt-directory-page .profile-main,
.fitt-directory-page .profile-side {
  background: #fff;
  border: 1px solid var(--fitt-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(18,40,62,.05);
}

.fitt-directory-page .cover {
  height: 230px;
  background: linear-gradient(90deg,rgba(11,42,69,.82),rgba(11,42,69,.18)),linear-gradient(135deg,#88a9bd,#e4edf3);
}

.fitt-directory-page .profile-head {
  padding: 0 24px 22px;
  margin-top: -46px;
  position: relative;
}

.fitt-directory-page .profile-logo {
  width: 96px;
  height: 96px;
  background: #fff;
  border: 5px solid #fff;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
}

.fitt-directory-page .profile-title {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-end;
  margin-top: 11px;
}

.fitt-directory-page .profile-title h1 {
  font-size: 30px;
  margin: 8px 0 4px;
  color: var(--fitt-navy);
  font-weight: 900;
}

.fitt-directory-page .tabs {
  display: flex;
  gap: 5px;
  border-top: 1px solid var(--fitt-line);
  border-bottom: 1px solid var(--fitt-line);
  background: #fafbfc;
  padding: 0 22px;
  overflow-x: auto;
}

.fitt-directory-page .tabs button {
  border: 0;
  background: transparent;
  padding: 14px 14px;
  font-weight: 800;
  color: var(--fitt-muted);
  cursor: pointer;
}

.fitt-directory-page .tabs button.active {
  color: var(--fitt-navy);
  border-bottom: 3px solid var(--fitt-gold);
}

.fitt-directory-page .profile-content {
  padding: 23px;
}

.fitt-directory-page .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.fitt-directory-page .info-card {
  border: 1px solid var(--fitt-line);
  border-radius: 14px;
  padding: 16px;
}

.fitt-directory-page .info-card h3,
.fitt-directory-page .info-card h4 {
  margin-top: 0;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .info-card p {
  font-size: 13px;
  color: var(--fitt-muted);
  line-height: 1.55;
}

.fitt-directory-page .profile-side {
  padding: 19px;
  position: sticky;
  top: 145px;
}

.fitt-directory-page .profile-side .btn {
  width: 100%;
  margin-bottom: 9px;
  box-sizing: border-box;
}

.fitt-directory-page .profile-side h3 {
  margin-top: 0;
  color: var(--fitt-navy);
}

.fitt-directory-page .plan-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.fitt-directory-page .plan {
  background: #fff;
  border: 1px solid var(--fitt-line);
  border-radius: 17px;
  padding: 20px;
  position: relative;
}

.fitt-directory-page .plan h3 {
  margin: 0 0 7px;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .plan p {
  color: var(--fitt-muted);
  font-size: 13px;
  line-height: 1.55;
}

.fitt-directory-page .plan ul {
  padding-left: 17px;
  color: var(--fitt-muted);
  font-size: 12px;
  line-height: 1.65;
}

.fitt-directory-page .plan.platinum {
  border: 2px solid #9facba;
  box-shadow: 0 9px 25px rgba(70,90,115,.12);
}

.fitt-directory-page .plan-label {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  margin-bottom: 10px;
}

.fitt-directory-page .plan .btn {
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

.fitt-directory-page .journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.fitt-directory-page .step {
  background: #fff;
  border: 1px solid var(--fitt-line);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
}

.fitt-directory-page .stepnum {
  width: 38px;
  height: 38px;
  background: var(--fitt-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 11px;
  font-weight: 900;
}

.fitt-directory-page .step h3 {
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--fitt-navy);
  font-weight: 800;
}

.fitt-directory-page .step p {
  color: var(--fitt-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.fitt-directory-page .flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}

.fitt-directory-page .flow a,
.fitt-directory-page .flow span {
  background: #fff !important;
  border: 1px solid var(--fitt-line) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0b2a45 !important;
  text-decoration: none !important;
}

.fitt-directory-page .flow a:hover,
.fitt-directory-page .flow a:visited,
.fitt-directory-page .flow a:focus {
  color: #0b2a45 !important;
  text-decoration: none !important;
}

.fitt-directory-page .flow .arrow {
  border: 0 !important;
  background: transparent !important;
  padding: 5px !important;
  color: #8b98a5 !important;
}

/* Directory Page Responsive Rules */
@media(max-width:1150px) {
  .fitt-directory-page .directory-grid { grid-template-columns: repeat(4,1fr) !important; }
  .fitt-directory-page .category-layout { grid-template-columns: 1fr !important; }
  .fitt-directory-page .adrail { display: none !important; }
  .fitt-directory-page .plan-grid { grid-template-columns: repeat(3,1fr) !important; }
}

@media(max-width:900px) {
  .fitt-directory-page .hero { grid-template-columns: 1fr !important; }
  .fitt-directory-page .directory-grid { grid-template-columns: repeat(3,1fr) !important; }
  .fitt-directory-page .filterbar { grid-template-columns: 1fr 1fr !important; }
  .fitt-directory-page .business-card { grid-template-columns: 120px minmax(0,1fr) !important; }
  .fitt-directory-page .business-actions { grid-column: 1/-1 !important; flex-direction: row !important; justify-content: flex-start !important; }
  .fitt-directory-page .profile-shell { grid-template-columns: 1fr !important; }
  .fitt-directory-page .profile-side { position: static !important; }
  .fitt-directory-page .journey { grid-template-columns: repeat(2,1fr) !important; }
}

@media(max-width:620px) {
  .fitt-directory-page .hero { padding: 27px 20px !important; }
  .fitt-directory-page .hero h1 { font-size: 34px !important; }
  .fitt-directory-page .directory-grid { grid-template-columns: repeat(2,1fr) !important; }
  .fitt-directory-page .filterbar { grid-template-columns: 1fr !important; }
  .fitt-directory-page .subcat-grid { grid-template-columns: 1fr !important; }
  .fitt-directory-page .business-card { grid-template-columns: 1fr !important; }
  .fitt-directory-page .business-photo,
  .fitt-directory-page .photo-placeholder { width: 100% !important; height: 190px !important; }
  .fitt-directory-page .info-grid { grid-template-columns: 1fr !important; }
  .fitt-directory-page .plan-grid { grid-template-columns: 1fr !important; }
  .fitt-directory-page .journey { grid-template-columns: 1fr !important; }
  .fitt-directory-page .owner-cta { display: block !important; }
  .fitt-directory-page .owner-cta .btn { margin-top: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   DIRECTORY PAGE — BUTTON OVERRIDES (Prototype-exact)
   Fixes: Flynax/Bootstrap .btn class conflicts
   ═══════════════════════════════════════════════════════════════════ */

.fitt-directory-page .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 17px !important;
  border-radius: 999px !important;
  border: 1px solid #ccd4dc !important;
  background: #fff !important;
  color: #0b2a45 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.fitt-directory-page .btn:hover {
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.fitt-directory-page .btn.primary {
  background: #f5a800 !important;
  border-color: #f5a800 !important;
  color: #0b2a45 !important;
}

.fitt-directory-page .btn.primary:hover {
  background: #e09800 !important;
}

.fitt-directory-page .btn.navy {
  background: #0b2a45 !important;
  border-color: #0b2a45 !important;
  color: #fff !important;
}

.fitt-directory-page .btn.navy:hover {
  background: #163a5e !important;
}

.fitt-directory-page .btn.green {
  background: #19a978 !important;
  border-color: #19a978 !important;
  color: #fff !important;
}

.fitt-directory-page .btn.green:hover {
  background: #148a63 !important;
}

.fitt-directory-page .btn.small {
  font-size: 13px !important;
  padding: 8px 13px !important;
}

/* ================================================================
   CATEGORY LANDING & SUBCATEGORY GRID SYSTEM
   ================================================================ */
.category-landing {
    padding: 10px 0 30px;
}

.category-hero {
    background: transparent;
    padding: 0 0 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.category-hero-content h1 {
    color: #0d2340 !important;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
}

.category-hero-content p {
    color: #6b7280;
    font-size: 15px;
    margin: 0;
}

.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.subcategory-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none !important;
    color: #0d2340 !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.subcategory-card:hover {
    border-color: #2f9f62;
    box-shadow: 0 6px 18px rgba(47, 159, 98, 0.12);
    transform: translateY(-2px);
    text-decoration: none !important;
}

.subcategory-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.subcategory-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2340;
}

@media (max-width: 1200px) {
    .subcategory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .category-hero-content h1 {
        font-size: 22px;
    }
    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .subcategory-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .subcategory-icon {
        font-size: 22px;
    }
    .subcategory-name {
        font-size: 13px;
    }
}

@media (max-width: 479px) {
    .subcategory-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   LIST & GRID VIEW LAYOUTS (MILESTONE 4 REQUIREMENTS)
   List View: 1 full-width listing per row
   Grid View: Exactly 3 listings per row on desktop
   ================================================================ */
#listings.list > article {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    #listings.grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    #listings.grid > article {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ================================================================
   1:1 PROTOTYPE LISTING DETAILS PAGE (03_listing_detail.html)
   ================================================================ */
.detail-page-layout {
    width: 100% !important;
    margin: 0 !important;
}

.detail-page-layout #content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.detail-container {
    width: 100% !important;
    max-width: var(--max, 1380px) !important;
    margin: 0 auto !important;
}

.detail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 20px !important;
    width: 100% !important;
    align-items: start !important;
}

.detail .main,
.detail .contact {
    background: #fff !important;
    border: 1px solid var(--line, #e2e7eb) !important;
    border-radius: 15px !important;
    padding: 24px !important;
    box-shadow: 0 1px 4px rgba(14, 42, 67, .04) !important;
}

.detail .gallery {
    height: 380px !important;
    background: #e8eff4 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 78px !important;
    overflow: hidden !important;
    position: relative !important;
}

.detail .gallery .main-photo-wrap {
    width: 100% !important;
    height: 100% !important;
}

.detail .gallery .main-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
}

.detail .gallery .no-photo-icon {
    font-size: 78px !important;
    line-height: 1 !important;
}

.detail .main h1.listing-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--navy, #0b2a45) !important;
    margin: 16px 0 6px 0 !important;
    line-height: 1.25 !important;
}

.detail .listing-top-meta {
    font-size: 14px !important;
    color: var(--muted, #6c7887) !important;
    margin-bottom: 20px !important;
}

.detail .listing-top-meta b {
    color: var(--navy, #0b2a45) !important;
    font-size: 16px !important;
}

.detail .facts {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin: 20px 0 !important;
}

.detail .fact {
    background: var(--soft, #f5f7f8) !important;
    padding: 12px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.detail .fact .fact-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: var(--muted, #6c7887) !important;
    font-weight: 700 !important;
}

.detail .fact b {
    color: var(--navy, #0b2a45) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.detail .main h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--navy, #0b2a45) !important;
    margin: 28px 0 14px 0 !important;
    border-bottom: 1px solid var(--line, #e2e7eb) !important;
    padding-bottom: 8px !important;
}

.detail .spec {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 24px !important;
}

.detail .spec div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border-top: 1px solid var(--line, #e2e7eb) !important;
    padding: 11px 0 !important;
    font-size: 13px !important;
}

.detail .spec span {
    color: var(--muted, #6c7887) !important;
}

.detail .spec b {
    color: var(--text, #172536) !important;
    font-weight: 700 !important;
}

.detail .listing-desc-text {
    font-size: 14px !important;
    color: #4f5e6d !important;
    line-height: 1.7 !important;
}

.detail .video {
    height: 240px !important;
    border-radius: 14px !important;
    background: #101820 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* Contact Sidebar */
.detail .contact h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--navy, #0b2a45) !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--line, #e2e7eb) !important;
}

.detail .contact-lock,
.contact-lock {
    background: linear-gradient(145deg, #f7fafc, #eef4f7) !important;
    border: 1px solid #dce5eb !important;
    border-radius: 15px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 8px 22px rgba(11, 42, 69, .06) !important;
    text-align: left !important;
}

.detail .contact-lock .lock-icon,
.contact-lock .lock-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    box-shadow: 0 6px 16px rgba(11, 42, 69, .08) !important;
    margin: 0 0 10px 0 !important;
}

.detail .contact-lock .hidden-label,
.contact-lock .hidden-label {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--navy, #0b2a45) !important;
    text-align: left !important;
}

.detail .contact-lock .hidden-note,
.contact-lock .hidden-note {
    font-size: 11px !important;
    color: var(--muted, #6c7887) !important;
    line-height: 1.45 !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Hide Sign In button from navbar matching prototype */
.custom-sign-in,
.custom-sign-in-btn {
    display: none !important;
}

.detail .contact a.btn,
.detail .contact button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 11px 16px !important;
    border: 1px solid #ccd4dc !important;
    background: #fff !important;
    color: var(--text, #172536) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
    box-sizing: border-box !important;
}

.detail .contact a.btn:hover {
    background: #f5f7f8 !important;
}

.detail .contact .btn.navy,
.detail .contact button.btn.navy {
    background: var(--navy, #0b2a45) !important;
    color: #fff !important;
    border-color: var(--navy, #0b2a45) !important;
}

.detail .contact .btn.navy:hover {
    background: #123d61 !important;
}

/* Rule Div (Phone privacy rule) */
.rule,
.contact .rule,
aside.contact .rule,
.detail .contact .rule {
    background: #fff8e5 !important;
    border-left: 4px solid #f5a800 !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 12px 14px !important;
    margin: 14px 0 0 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #172536 !important;
    display: block !important;
    text-align: left !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.rule b,
.rule strong,
.contact .rule b,
.contact .rule strong,
.detail .contact .rule b {
    color: #172536 !important;
    font-weight: 800 !important;
}

/* Similar Listings Section Head */
.section {
    padding-top: 36px !important;
    width: 100% !important;
}

.section-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.section-head h2,
.detail-container .section-head h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #172536 !important;
    margin: 0 0 6px 0 !important;
}

.section-head p,
.detail-container .section-head p {
    font-size: 13px !important;
    color: #172536 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Hide lingering bottom contact forms and duplicate breadcrumbs on detail page */
.detail-page-layout aside.middle,
.detail-page-layout aside.two-middle,
.detail-page-layout aside.bottom,
.detail-page-layout .seller-short,
.detail-page-layout #area_tell_friend,
.detail-page-layout .tab_area,
.detail-page-layout #bread_crumbs {
    display: none !important;
}

/* Similar Listings Section */
.similar {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
}

.sim {
    background: #fff !important;
    border: 1px solid var(--line, #e2e7eb) !important;
    border-radius: 13px !important;
    padding: 12px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
}

.sim .spic {
    height: 110px !important;
    border-radius: 9px !important;
    background: #e8eff4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    overflow: hidden !important;
}

.sim h3 {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--navy, #0b2a45) !important;
    margin: 9px 0 4px 0 !important;
    line-height: 1.3 !important;
}

.sim p {
    font-size: 10px !important;
    color: var(--muted, #6c7887) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

@media (max-width: 950px) {
    .detail {
        grid-template-columns: 1fr !important;
    }
    .detail .facts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .similar {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 620px) {
    .detail .spec {
        grid-template-columns: 1fr !important;
    }
    .similar {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   1:1 PROTOTYPE CATEGORY LANDING PAGES (01_category_landing.html)
   ================================================================ */
.category-landing-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.category-landing-wrap .hero {
    background: linear-gradient(125deg, var(--navy, #0b2a45), #104d71) !important;
    color: #fff !important;
    border-radius: 22px !important;
    padding: 38px 40px !important;
    display: grid !important;
    grid-template-columns: 1.2fr .8fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
    box-shadow: 0 8px 30px rgba(11, 42, 69, .12) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.category-landing-wrap .hero h1 {
    font-size: 36px !important;
    font-weight: 900 !important;
    margin: 8px 0 13px 0 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}

.category-landing-wrap .hero p {
    color: #dce8f2 !important;
    line-height: 1.62 !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.category-landing-wrap .eyebrow {
    color: #ffd56b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    display: inline-block !important;
}

.category-landing-wrap .hero .btn.gold {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gold, #f5a800) !important;
    color: #172536 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(245, 168, 0, .35) !important;
}

.category-landing-wrap .hero .btn.gold:hover {
    background: #e69d00 !important;
    transform: translateY(-1px) !important;
}

.category-landing-wrap .hero-card {
    background: #fff !important;
    color: var(--text, #172536) !important;
    border-radius: 17px !important;
    padding: 20px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08) !important;
}

.category-landing-wrap .hero-card h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--navy, #0b2a45) !important;
    margin: 0 0 12px 0 !important;
}

.category-landing-wrap .hero-card ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.category-landing-wrap .hero-card li {
    font-size: 13px !important;
    color: var(--muted, #6c7887) !important;
    line-height: 1.6 !important;
    margin-bottom: 5px !important;
}

.category-landing-wrap .cat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.category-landing-wrap .cat {
    background: #fff !important;
    border: 1px solid var(--line, #e2e7eb) !important;
    border-radius: 17px !important;
    padding: 20px !important;
    min-height: 150px !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    box-shadow: 0 2px 8px rgba(11, 42, 69, .03) !important;
    box-sizing: border-box !important;
}

.category-landing-wrap .cat:before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--gold, #f5a800), var(--green, #1da56f)) !important;
    opacity: .85 !important;
}

.category-landing-wrap .cat:hover {
    transform: translateY(-4px) !important;
    border-color: #cad6df !important;
    box-shadow: 0 12px 28px rgba(11, 42, 69, .10) !important;
}

.category-landing-wrap .cat .icon {
    font-size: 34px !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, #f7fafc, #e9f1f6) !important;
    box-shadow: 0 7px 18px rgba(11, 42, 69, .08) !important;
    margin-bottom: 12px !important;
}

.category-landing-wrap .cat h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--navy, #0b2a45) !important;
    margin: 8px 0 4px 0 !important;
    line-height: 1.25 !important;
}

.category-landing-wrap .cat p {
    font-size: 12px !important;
    color: var(--muted, #6c7887) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

@media (max-width: 950px) {
    .category-landing-wrap .hero {
        grid-template-columns: 1fr !important;
        padding: 28px 24px !important;
    }
    .category-landing-wrap .cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 620px) {
    .category-landing-wrap .cat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   AUTO-HIDE SIDEBAR WHEN CATEGORY LANDING PAGE IS DISPLAYED
   Uses CSS :has() to detect .category-landing-wrap inside #content
   ================================================================ */
.browse-layout:has(.category-landing-wrap) > aside.left {
    display: none !important;
}

.browse-layout:has(.category-landing-wrap) > #content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Responsive: Hero banner on small screens */
@media (max-width: 768px) {
    .category-landing-wrap .hero {
        grid-template-columns: 1fr !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
    .category-landing-wrap .hero h1 {
        font-size: 26px !important;
    }
    .category-landing-wrap .cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .category-landing-wrap .cat {
        padding: 16px !important;
        min-height: 120px !important;
    }
    .category-landing-wrap .cat .icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 28px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 480px) {
    .category-landing-wrap .hero {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }
    .category-landing-wrap .hero h1 {
        font-size: 22px !important;
    }
    .category-landing-wrap .cat-grid {
        grid-template-columns: 1fr !important;
    }
    .category-landing-wrap .section-head h2 {
        font-size: 22px !important;
    }
}

/* ===================================================================
   TABLET & IPAD RESPONSIVE SYSTEM (iPad Mini 768px, iPad Air 820px, iPad Pro 1024px)
   Provides 100% fluid, perfectly proportioned layouts on all tablet screens.
   =================================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* ── 1. GLOBAL CONTAINERS: 100% FLUID WIDTH ON IPAD ── */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body > div.main-wrapper,
    div#wrapper,
    section#main_container,
    section#main_container > div.inside-container,
    .inside-container,
    .inside-container.point1,
    .point1,
    body:not(.home-page) #main_container > .inside-container.point1,
    div.top-header > div.point1,
    header.page-header > div.point1,
    .sticky-navbar-wrapper .point1,
    .header-nav .point1,
    .detail-container,
    .category-landing-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ── 2. HEADER & SEARCH BAR ON TABLETS ── */
    .custom-header-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        padding: 10px 0 !important;
    }

    .custom-header-wrapper .custom-logo {
        flex: 0 0 auto !important;
    }

    .custom-header-wrapper .custom-search-container,
    .custom-header-wrapper .search-form-wrap {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .custom-header-wrapper .custom-header-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 8px !important;
    }

    .custom-header-wrapper .custom-post-ad-btn,
    .custom-header-wrapper a.custom-post-ad-btn {
        padding: 9px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* ── 3. BROWSE / SEARCH RESULTS LAYOUT (2-COLUMN GRID) ── */
    .row.browse-layout {
        display: grid !important;
        grid-template-columns: 230px minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .row.browse-layout > aside.left,
    .browse-layout aside.left,
    aside.left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .row.browse-layout > aside.left .filters,
    .row.browse-layout > aside.left .filter-panel,
    .row.browse-layout > aside.left .side_block,
    aside.left .filters,
    .filters {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        background: #fff !important;
        border: 1px solid var(--line, #e2e7eb) !important;
        box-shadow: 0 1px 4px rgba(14, 42, 67, .04) !important;
    }

    .row.browse-layout > #content,
    .browse-layout > #content,
    #content.col-lg-7,
    #content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .row.browse-layout > aside.right-rail-col {
        display: none !important;
    }

    /* ── 4. RESULTS PANEL & TOOLBAR ON TABLETS ── */
    .results-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .results-panel .rp-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .results-panel .rp-head-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .results-panel .rp-title,
    .results-panel h1 {
        font-size: 22px !important;
    }

    .results-panel .rp-head-right {
        flex: 0 0 auto !important;
    }

    /* ── 5. LISTING CARDS ON IPAD MINI / IPAD AIR (768px - 899px) ── */
    #listings.listings-list > article.item,
    #listings.listings-list > article.item.featured,
    #listings.listings-list > article.item.no-image {
        display: grid !important;
        grid-template-columns: 140px minmax(0, 1fr) 145px !important;
        min-height: 135px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #listings.listings-list article.item .picture-wrap,
    #listings.listings-list article.item.featured .picture-wrap {
        width: 140px !important;
        max-width: 140px !important;
        min-width: 140px !important;
        min-height: 135px !important;
        height: 100% !important;
    }

    #listings.listings-list article.item .picture-wrap img,
    #listings.listings-list article.item.featured .picture-wrap img {
        min-height: 135px !important;
        height: 100% !important;
    }

    #listings.listings-list article.item .listing-main {
        padding: 12px 14px !important;
        min-width: 0 !important;
    }

    #listings.listings-list article.item .listing-main h3 {
        font-size: 15px !important;
        margin: 0 0 4px 0 !important;
    }

    #listings.listings-list article.item .listing-main p {
        font-size: 11px !important;
        margin: 4px 0 !important;
        -webkit-line-clamp: 2 !important;
    }

    #listings.listings-list article.item .listing-side {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
        padding: 12px 10px !important;
        box-sizing: border-box !important;
    }

    #listings.listings-list article.item .listing-side .price {
        font-size: 14px !important;
    }

    #listings.listings-list article.item .listing-side .agency {
        font-size: 10px !important;
    }

    #listings.listings-list article.item .listing-side .view-btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }

    /* Grid view on Tablet */
    #listings.listings-list.grid-view {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    /* ── 6. LISTING DETAILS PAGE ON TABLETS ── */
    .detail {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 280px !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .detail .gallery {
        height: 320px !important;
    }

    .detail .facts {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .detail .spec {
        grid-template-columns: 1fr 1fr !important;
        gap: 0 16px !important;
    }

    .similar {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}

/* ── IPAD PRO / LARGE TABLET SPECIFICS (900px - 1024px) ── */
@media screen and (min-width: 900px) and (max-width: 1024px) {
    .row.browse-layout {
        grid-template-columns: 250px minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    #listings.listings-list > article.item,
    #listings.listings-list > article.item.featured,
    #listings.listings-list > article.item.no-image {
        grid-template-columns: 170px minmax(0, 1fr) 170px !important;
        min-height: 150px !important;
    }

    #listings.listings-list article.item .picture-wrap,
    #listings.listings-list article.item.featured .picture-wrap {
        width: 170px !important;
        max-width: 170px !important;
        min-width: 170px !important;
        min-height: 150px !important;
    }

    #listings.listings-list article.item .listing-side {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        padding: 14px !important;
    }

    #listings.listings-list article.item .listing-side .price {
        font-size: 16px !important;
    }

    .detail {
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 20px !important;
    }

    .similar {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================================
   FINDITTNT REAL ESTATE PROTOTYPE ARCHITECTURE STYLES
   Matching 00_real_estate_master_flow & 02_residential_sale_results
   ============================================================ */

/* 1. Subcategory Pill Navigation (.section-tabs) */
.section-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 18px 0 24px 0 !important;
}

.section-tabs a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #0A2540 !important;
    text-decoration: none !important;
    transition: all 0.18s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.03) !important;
}

.section-tabs a:hover {
    border-color: #0A2540 !important;
    color: #0A2540 !important;
    transform: translateY(-1px) !important;
}

.section-tabs a.active {
    background: #0A2540 !important;
    color: #ffffff !important;
    border-color: #0A2540 !important;
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15) !important;
}

/* 2. Filter Panel */
.panel.fitt-filters-panel {
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 15px !important;
    padding: 18px 20px !important;
    box-shadow: 0 8px 28px rgba(10, 37, 64, 0.06) !important;
    margin-bottom: 20px !important;
}

.filters.fitt-filter-form {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1.2fr !important;
    gap: 10px !important;
    align-items: center !important;
}

.filters.fitt-filter-form select,
.filters.fitt-filter-form input {
    width: 100% !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 9px !important;
    padding: 11px 12px !important;
    background: #ffffff !important;
    color: #102A43 !important;
    font-size: 13px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.filters.fitt-filter-form select:focus,
.filters.fitt-filter-form input:focus {
    border-color: #0A2540 !important;
    box-shadow: 0 0 0 2px rgba(10, 37, 64, 0.1) !important;
}

.filters.fitt-filter-form button.fitt-filter-submit {
    background: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 11px 16px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    height: 44px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}

.filters.fitt-filter-form button.fitt-filter-submit:hover {
    background: #d98200 !important;
    transform: translateY(-1px) !important;
}

/* 3. Results Toolbar & View Switcher */
.toolbar.fitt-results-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 20px 0 16px 0 !important;
}

.grid_navbar .switcher .buttons.toggle,
.toggle.fitt-view-toggle .buttons {
    display: inline-flex !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.grid_navbar .switcher .buttons.toggle a,
.toggle.fitt-view-toggle a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #0A2540 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.grid_navbar .switcher .buttons.toggle a.active,
.toggle.fitt-view-toggle a.active {
    background: #0A2540 !important;
    color: #ffffff !important;
}

/* 4. Tier Order Sub-heading */
.tier-order {
    background: #fdfbf7 !important;
    border-left: 3px solid #F59E0B !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    color: #637381 !important;
    margin-bottom: 16px !important;
    border-radius: 0 8px 8px 0 !important;
}

/* 5. 3-Column Desktop Grid Layout & 1-Column List Layout */
#listings.listings-list.grid-view,
#listings.listings-list.grid,
.results:not(.list) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

#listings.listings-list.list,
.results.list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

/* 6. Card Item in Grid View */
#listings.listings-list.grid-view article.card.item,
#listings.listings-list.grid article.card.item,
.results:not(.list) article.card {
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 18px rgba(10, 37, 64, 0.05) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    margin: 0 !important;
    height: 100% !important;
}

#listings.listings-list.grid-view article.card.item:hover,
#listings.listings-list.grid article.card.item:hover,
.results:not(.list) article.card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(10, 37, 64, 0.09) !important;
}

/* Card in List View */
#listings.listings-list.list article.card.item,
.results.list article.card {
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 18px rgba(10, 37, 64, 0.05) !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    margin: 0 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

/* 7. Card Photo Container */
#listings.listings-list article.card.item .photo.picture-wrap {
    height: 190px !important;
    background: linear-gradient(135deg, #dce9f1, #f9d991) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 52px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

#listings.listings-list.list article.card.item .photo.picture-wrap {
    height: 100% !important;
    min-height: 190px !important;
}

#listings.listings-list article.card.item .photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 8. Tier Badges (Platinum, Gold, Silver, Bronze, Free) */
.tier.tier-badge {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    z-index: 5 !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
}

.tier.platinum {
    background: #0A2540 !important;
    color: #ffffff !important;
}

.tier.goldtier,
.tier.gold {
    background: #F59E0B !important;
    color: #0A2540 !important;
}

.tier.silvertier,
.tier.silver {
    background: #d9e1e8 !important;
    color: #0A2540 !important;
}

.tier.bronzetier,
.tier.bronze {
    background: #bf7a3d !important;
    color: #ffffff !important;
}

.tier.freetier,
.tier.free {
    background: #ffffff !important;
    color: #637381 !important;
    border: 1px solid #D8E1E8 !important;
}

/* 9. Favorite Button */
#listings.listings-list article.card.item button.fav {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #0A2540 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}

#listings.listings-list article.card.item button.fav:hover {
    background: #fdf2e9 !important;
    color: #e63946 !important;
    transform: scale(1.08) !important;
}

/* 10. Card Body & Typography */
#listings.listings-list article.card.item .body.listing-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

#listings.listings-list article.card.item .body .price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0A2540 !important;
    margin-bottom: 4px !important;
}

#listings.listings-list article.card.item .body .title,
#listings.listings-list article.card.item .body h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 4px 0 6px 0 !important;
    line-height: 1.3 !important;
}

#listings.listings-list article.card.item .body .title a,
#listings.listings-list article.card.item .body h3 a {
    color: #0A2540 !important;
    text-decoration: none !important;
}

#listings.listings-list article.card.item .body .title a:hover {
    color: #F59E0B !important;
}

#listings.listings-list article.card.item .body .meta {
    color: #637381 !important;
    font-size: 13px !important;
}

/* 11. Features & Chips */
#listings.listings-list article.card.item .features {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin: 10px 0 !important;
}

#listings.listings-list article.card.item .chip {
    background: #F8F6F2 !important;
    border: 1px solid #eee4d5 !important;
    border-radius: 999px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    color: #102A43 !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* 12. Responsive Breakpoints */
@media (max-width: 991px) {
    #listings.listings-list.grid-view,
    #listings.listings-list.grid,
    .results:not(.list) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .filters.fitt-filter-form {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    #listings.listings-list.grid-view,
    #listings.listings-list.grid,
    #listings.listings-list.list,
    .results,
    .results.list {
        grid-template-columns: 1fr !important;
    }

    #listings.listings-list.list article.card.item,
    .results.list article.card {
        grid-template-columns: 1fr !important;
    }

    .filters.fitt-filter-form {
        grid-template-columns: 1fr !important;
    }

    .section-tabs a {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   13. FINDITTNT 5-TIER PACKAGE SELECTION (15_package_selection.html)
   Platinum -> Gold -> Silver -> Bronze -> Free
   ============================================================ */
.plans,
ul.plans-chart,
.plans-chart ul.plans,
#plans.plans {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.plan,
ul.plans-chart > li,
.plans-chart ul.plans > li {
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.04) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.plan:hover,
ul.plans-chart > li:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08) !important;
}

.plan.recommended,
.plan.featured,
ul.plans-chart > li.featured {
    border: 2px solid #F59E0B !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 26px rgba(245, 158, 11, 0.15) !important;
}

.plan .badge,
.plan-badge-popular {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    background: #F59E0B !important;
    color: #0A2540 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    position: absolute !important;
    top: -10px !important;
    right: 14px !important;
}

.plan h3,
.plan .name {
    margin: 6px 0 !important;
    color: #0A2540 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.plan .amt,
.plan .price {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #0A2540 !important;
    margin-bottom: 8px !important;
}

.plan ul {
    padding-left: 18px !important;
    color: #637381 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 10px 0 !important;
}

.plan .btn,
.plan button,
.plan .button {
    border: 0 !important;
    border-radius: 9px !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
}

.plan .btn.gold,
.plan.recommended .btn,
.plan.featured .button {
    background: #F59E0B !important;
    color: #0A2540 !important;
}

.plan .btn.ghost,
.plan:not(.recommended) .btn,
.plan:not(.featured) .button {
    background: #ffffff !important;
    border: 1px solid #D8E1E8 !important;
    color: #0A2540 !important;
}

/* ============================================================
   14. POST AD SELLER STEPS & FORM GRIDS (08-13 post ad prototypes)
   ============================================================ */
.step-sequence {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 20px 0 !important;
}

.step-card {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

.step-num {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #0A2540 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}

.post-ad-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.post-ad-form-grid .span2 {
    grid-column: 1 / -1 !important;
}

.upload-box-prototype {
    border: 2px dashed #b9c7d2 !important;
    border-radius: 13px !important;
    padding: 30px !important;
    text-align: center !important;
    background: #fbfcfd !important;
}

@media (max-width: 991px) {
    .plans,
    ul.plans-chart,
    .plans-chart ul.plans,
    #plans.plans {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .plans,
    ul.plans-chart,
    .plans-chart ul.plans,
    #plans.plans {
        grid-template-columns: 1fr !important;
    }

    .post-ad-form-grid {
        grid-template-columns: 1fr !important;
    }

    .step-card {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   RENTAL PERIOD & RENTAL PRICE STYLES (REAL ESTATE RENTALS)
   ============================================================ */
.rental-period-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.rental-period-options {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 6px !important;
}

.rental-period-option {
    position: relative !important;
}

.rental-period-option input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.rental-period-option label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 10px 8px !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0A2540 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all .18s ease !important;
    margin: 0 !important;
    user-select: none !important;
}

.rental-period-option input:checked + label {
    border: 2px solid #F59E0B !important;
    background: #FFF8E7 !important;
    color: #0A2540 !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12) !important;
}

.rental-period-option label:hover {
    border-color: #F59E0B !important;
    background: #fdfaf3 !important;
}

.rental-period-help {
    margin-top: 7px !important;
    color: #637381 !important;
    font-size: 12px !important;
}

.rental-price-preview {
    grid-column: 1 / -1 !important;
    background: #F8F6F2 !important;
    border: 1px solid #eee4d5 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: #637381 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

.rental-price-preview strong {
    color: #0A2540 !important;
}

@media (max-width: 900px) {
    .rental-period-options {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 620px) {
    .rental-period-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── GAP FIX #1: PRICE + CURRENCY INLINE ROW ── */
.fitt-price-currency-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: center !important;
}

.fitt-price-input-col,
.fitt-currency-col {
    width: 100% !important;
}

.fitt-price-input-col input.numeric.price-full {
    width: 100% !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 9px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    color: #102A43 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.fitt-currency-col select,
.fitt-currency-select {
    width: 100% !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 9px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    color: #102A43 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

@media (max-width: 620px) {
    .fitt-price-currency-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ── GAP FIX #2: NUMBERED STEP SECTIONS ── */
.fitt-step-card-wrap {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    margin-bottom: 24px !important;
}

.fitt-step-badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #0A2540 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15) !important;
    margin-top: 4px !important;
}

.fitt-step-content-panel {
    background: #fff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 15px !important;
    padding: 22px !important;
    box-shadow: 0 8px 28px rgba(10, 37, 64, 0.06) !important;
}

@media (max-width: 620px) {
    .fitt-step-card-wrap {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .fitt-step-badge {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

/* ── FindItTnT Real Estate & Category Filter Panel ── */
.fitt-filters-panel {
    background: #fff !important;
    border: 1px solid #D8E1E8 !important;
    border-radius: 15px !important;
    padding: 18px !important;
    box-shadow: 0 8px 28px rgba(10, 37, 64, 0.06) !important;
    margin-bottom: 20px !important;
}

.fitt-filter-form {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

.fitt-select,
.fitt-input {
    border: 1px solid #D8E1E8 !important;
    border-radius: 9px !important;
    padding: 11px 12px !important;
    background: #fff !important;
    color: #102A43 !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fitt-select:focus,
.fitt-input:focus {
    border-color: var(--navy, #0A2540) !important;
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1) !important;
}

.fitt-filter-submit {
    background: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 11px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.fitt-filter-submit:hover {
    background: #e08e06 !important;
    color: #0A2540 !important;
}

/* ── Results Toolbar Responsive ── */
.fitt-results-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 18px 0 !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.fitt-results-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--navy, #0A2540) !important;
}

/* ── Filter & Toolbar Tablet Responsive (768px - 991px) ── */
@media (max-width: 991px) {
    .fitt-filter-form {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fitt-filter-submit {
        grid-column: 1 / -1 !important;
    }
}

/* ── Filter & Toolbar Mobile Responsive (< 768px) ── */
@media (max-width: 767px) {
    .fitt-filter-form {
        grid-template-columns: 1fr !important;
    }
    .fitt-filter-submit {
        grid-column: auto !important;
    }
    .fitt-results-toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .fitt-view-toggle {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
}
/* ============================================================
   FindItTnT — Subcategories Directory Premium Hero
   Source: client prototype "Premium Real Estate Hero"
   Scoped strictly under .fitt-sub-hero class
   ============================================================ */

.fitt-sub-hero {
    --fitt-sub-navy: #0A3557;
    --fitt-sub-navy-2: #0F4B72;
    --fitt-sub-navy-3: #123F62;
    --fitt-sub-gold: #FFB51B;
    --fitt-sub-gold-soft: #FFD66E;
    --fitt-sub-white: #FFFFFF;
    --fitt-sub-muted: #D9E7F0;
    position: relative;
    min-height: 390px;
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.7fr);
    align-items: center;
    gap: 36px;
    padding: 72px 52px 48px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 22%, rgba(255, 181, 27, 0.10), transparent 25%),
        linear-gradient(135deg, var(--fitt-sub-navy) 0%, var(--fitt-sub-navy-3) 58%, var(--fitt-sub-navy-2) 100%) !important;
    box-shadow: 0 18px 42px rgba(10, 53, 87, 0.18);
    margin: 18px 0 30px;
    font-family: Arial, Helvetica, sans-serif !important;
    color: var(--fitt-sub-white) !important;
    box-sizing: border-box !important;
}

.fitt-sub-hero *,
.fitt-sub-hero *::before,
.fitt-sub-hero *::after {
    box-sizing: border-box;
}

.fitt-sub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 68%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 68%);
    pointer-events: none;
}

.fitt-sub-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 980px;
}

.fitt-sub-hero__title {
    margin: 0 0 20px !important;
    color: var(--fitt-sub-white) !important;
    font-size: clamp(46px, 4.7vw, 72px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}

.fitt-sub-hero__statement {
    margin: 0 0 8px !important;
    color: var(--fitt-sub-white) !important;
    font-size: clamp(28px, 2.55vw, 40px) !important;
    line-height: 1.13 !important;
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;
}

.fitt-sub-hero__support {
    margin: 0 0 26px !important;
    color: var(--fitt-sub-muted) !important;
    font-size: clamp(19px, 1.65vw, 27px) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    max-width: 860px;
}

.fitt-sub-hero__keywords {
    display: block !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    color: var(--fitt-sub-gold) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    line-height: 1.6;
    white-space: normal;
}

.fitt-sub-hero__cta-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.fitt-sub-hero__cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px !important;
    border-radius: 999px !important;
    background: var(--fitt-sub-gold) !important;
    color: #0B2F4C !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    box-shadow: 0 6px 0 #D49100, 0 14px 28px rgba(255, 181, 27, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: none !important;
    cursor: pointer;
    line-height: 1;
}

.fitt-sub-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #D49100, 0 18px 34px rgba(255, 181, 27, 0.32);
}

.fitt-sub-hero__cta:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #D49100, 0 6px 16px rgba(255, 181, 27, 0.22);
}

.fitt-sub-hero__visual {
    position: relative;
    z-index: 2;
    min-height: 300px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

.fitt-sub-hero__signature {
    width: min(100%, 520px) !important;
    height: auto !important;
    opacity: 0.98;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.12));
}

.fitt-stroke-gold { stroke: var(--fitt-sub-gold, #FFB51B) !important; }
.fitt-stroke-white { stroke: rgba(255, 255, 255, 0.92) !important; }
.fitt-stroke-soft { stroke: rgba(255, 255, 255, 0.34) !important; }
.fitt-fill-gold { fill: rgba(255, 181, 27, 0.22) !important; }
.fitt-fill-white { fill: rgba(255, 255, 255, 0.035) !important; }

/* Tablet */
@media (max-width: 980px) {
    .fitt-sub-hero {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 34px 28px;
    }
    .fitt-sub-hero__visual {
        order: -1;
        min-height: 180px;
        justify-content: flex-start;
    }
    .fitt-sub-hero__signature {
        width: 300px !important;
    }
}

/* Phone */
@media (max-width: 600px) {
    .fitt-sub-hero {
        min-height: auto;
        padding: 24px 18px 28px;
        border-radius: 20px;
        margin: 10px 0 18px;
    }
    .fitt-sub-hero__title { font-size: 36px !important; }
    .fitt-sub-hero__statement { font-size: 25px !important; }
    .fitt-sub-hero__support { font-size: 18px !important; }
    .fitt-sub-hero__keywords { font-size: 15px !important; }
    .fitt-sub-hero__cta { width: 100% !important; }
    .fitt-sub-hero__visual { min-height: 140px; }
    .fitt-sub-hero__signature { width: 220px !important; }
}

/* ============================================================
   Subcategories Section Heading — Bold Navy H1
   ============================================================ */
.section .section-head h1,
.fitt-subcategories-page .title h1 {
    color: #0B2F4C !important;
    font-size: clamp(28px, 3.2vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    background: none !important;
    border: none !important;
    text-shadow: none !important;
}

/* FindItTnT Add Listing checkbox/radio colours */
#category_container input[type="checkbox"]:not(.default) + label > span,
#category_container input[type="radio"]:not(.default) + label > span,
#category_container input[type="checkbox"]:not(.default):hover + label > span,
#category_container input[type="radio"]:not(.default):hover + label > span,
#category_container input[type="checkbox"]:not(.default):active + label > span,
#category_container input[type="radio"]:not(.default):active + label > span {
    background: #f2cf7d !important;
    border-color: #f2cf7d !important;
}

#category_container input[type="checkbox"]:not(.default):checked + label > span,
#category_container input[type="radio"]:not(.default):checked + label > span,
#category_container input[type="checkbox"]:not(.default):checked:hover + label > span,
#category_container input[type="radio"]:not(.default):checked:hover + label > span,
#category_container input[type="checkbox"]:not(.default):checked:active + label > span,
#category_container input[type="radio"]:not(.default):checked:active + label > span {
    background: #ffb51b !important;
    border-color: #ffb51b !important;
    box-shadow: none !important;
}

#category_container input[type="radio"]:not(.default):checked + label > span:before {
    background: #6b7d8d !important;
}

#category_container input[type="checkbox"]:not(.default):checked + label > span:before {
    background: #6b7d8d !important;
    box-shadow:
        2px 0 0 #6b7d8d,
        4px 0 0 #6b7d8d,
        4px -2px 0 #6b7d8d,
        4px -4px 0 #6b7d8d,
        4px -6px 0 #6b7d8d,
        4px -8px 0 #6b7d8d !important;
}

/* FindItTnT Add Listing controls — contrast refinement */
#category_container input[type="checkbox"]:not(.default) + label > span,
#category_container input[type="radio"]:not(.default) + label > span,
#category_container input[type="checkbox"]:not(.default):hover + label > span,
#category_container input[type="radio"]:not(.default):hover + label > span,
#category_container input[type="checkbox"]:not(.default):active + label > span,
#category_container input[type="radio"]:not(.default):active + label > span {
    background: #fffaf0 !important;
    border-color: #d69a10 !important;
}

#category_container input[type="checkbox"]:not(.default):checked + label > span,
#category_container input[type="radio"]:not(.default):checked + label > span,
#category_container input[type="checkbox"]:not(.default):checked:hover + label > span,
#category_container input[type="radio"]:not(.default):checked:hover + label > span,
#category_container input[type="checkbox"]:not(.default):checked:active + label > span,
#category_container input[type="radio"]:not(.default):checked:active + label > span {
    background: #ffb51b !important;
    border-color: #ffb51b !important;
}

#category_container input[type="radio"]:not(.default):checked + label > span:before {
    background: #263343 !important;
}

#category_container input[type="checkbox"]:not(.default):checked + label > span:before {
    background: #263343 !important;
    box-shadow:
        2px 0 0 #263343,
        4px 0 0 #263343,
        4px -2px 0 #263343,
        4px -4px 0 #263343,
        4px -6px 0 #263343,
        4px -8px 0 #263343 !important;
}

/* Stronger action-link purple in light surfaces */
#category_container .checkbox_bar a,
#category_container .upload-zone mark {
    color: #5f2397 !important;
}

/* Dark-mode media area: keep Browse Media highly visible */
@media (prefers-color-scheme: dark) {
    #category_container .form-media .upload-zone mark {
        color: #d8b4fe !important;
    }

    #category_container input[type="checkbox"]:not(.default) + label > span,
    #category_container input[type="radio"]:not(.default) + label > span {
        background: #3b3526 !important;
        border-color: #f2cf7d !important;
    }

    #category_container input[type="checkbox"]:not(.default):checked + label > span,
    #category_container input[type="radio"]:not(.default):checked + label > span {
        background: #ffb51b !important;
        border-color: #ffb51b !important;
    }
}

/* FindItTnT Add Listing — Location fields */
#category_container #fs_location .select2-container {
    width: 100% !important;
}

#category_container #fs_location .select2-container .select2-selection--single {
    height: 48px !important;
    min-height: 48px !important;
    background: #ffffff !important;
    border: 1px solid #c8d4de !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#category_container #fs_location .select2-container .select2-selection--single .select2-selection__rendered {
    height: 46px !important;
    line-height: 46px !important;
    padding-left: 12px !important;
    padding-right: 38px !important;
    color: #263b4c !important;
}

#category_container #fs_location .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 8px !important;
}

#category_container #fs_location .select2-container--focus .select2-selection--single,
#category_container #fs_location .select2-container--open .select2-selection--single {
    border-color: #ffb51b !important;
    box-shadow: 0 0 0 3px rgba(255,181,27,.13) !important;
}

#category_container #fs_location .select2-container--disabled .select2-selection--single {
    background: #f3f6f8 !important;
    border-color: #d7e0e6 !important;
}

#category_container #fs_location .select2-container--disabled .select2-selection__rendered {
    color: #71808d !important;
}

#category_container #fs_location #sf_field_address input[type="text"] {
    background: #ffffff !important;
    color: #263b4c !important;
    border: 1px solid #c8d4de !important;
    border-radius: 10px !important;
}

#category_container #fs_location #sf_field_address input[type="text"]:focus {
    border-color: #ffb51b !important;
    box-shadow: 0 0 0 3px rgba(255,181,27,.13) !important;
    outline: none !important;
}

/* Location fields in dark mode */
@media (prefers-color-scheme: dark) {
    #category_container #fs_location .select2-container .select2-selection--single,
    #category_container #fs_location #sf_field_address input[type="text"] {
        background: #162b3d !important;
        border-color: #526777 !important;
        color: #f3f6f8 !important;
    }

    #category_container #fs_location .select2-selection__rendered {
        color: #f3f6f8 !important;
    }

    #category_container #fs_location .select2-container--disabled .select2-selection--single {
        background: #263846 !important;
        border-color: #465b6b !important;
    }

    #category_container #fs_location .select2-container--disabled .select2-selection__rendered {
        color: #aebbc5 !important;
    }
}

/* FindItTnT Location — keep light and brand-aligned on Add Listing */
#category_container #fs_location .select2-container .select2-selection--single,
#category_container #fs_location #sf_field_address input[type="text"] {
    background: #fffdf7 !important;
    border-color: #d8c58b !important;
    color: #082a48 !important;
}

#category_container #fs_location .select2-selection__rendered {
    color: #082a48 !important;
}

#category_container #fs_location .select2-container--disabled .select2-selection--single {
    background: #f3f1ea !important;
    border-color: #d9d3c3 !important;
}

#category_container #fs_location .select2-container--disabled .select2-selection__rendered {
    color: #6b7d8d !important;
}

#category_container #fs_location .select2-container--focus .select2-selection--single,
#category_container #fs_location .select2-container--open .select2-selection--single,
#category_container #fs_location #sf_field_address input[type="text"]:focus {
    border-color: #ffb51b !important;
    box-shadow: 0 0 0 3px rgba(255,181,27,.13) !important;
}

/* FindItTnT Location — final Select2 brand override */
#category_container #fs_location .select2-selection--single {
    background-color: #fffdf7 !important;
    background-image: var(--dropdown-arrow) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 5px !important;
    border: 1px solid #d8c58b !important;
    color: #082a48 !important;
}

#category_container #fs_location .select2-selection--single .select2-selection__rendered {
    color: #082a48 !important;
}

#category_container #fs_location .select2-container--disabled .select2-selection--single {
    background-color: #f3f1ea !important;
    background-image: none !important;
    border: 1px solid #d9d3c3 !important;
    box-shadow: none !important;
}

#category_container #fs_location #sf_field_address input[type="text"] {
    background-color: #fffdf7 !important;
    color: #082a48 !important;
    border: 1px solid #d8c58b !important;
}

/* FindItTnT Location — restore native Select2 hidden source fields */
#category_container.fitt-page2-stage #fs_location select.select2-hidden-accessible,
#category_container.fitt-generic-page2-stage #fs_location select.select2-hidden-accessible {
    width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

/* FindItTnT Add Listing — restore native Flynax View Plans layout */
div.plans-chart ul.plans {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

div.plans-chart ul.plans > li {
    display: flex !important;
    flex: 1 0 0 !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: 33.33333% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

div.plans-chart ul.plans.more-5 > li {
    flex: 1 0 205px !important;
    width: 205px !important;
    min-width: 205px !important;
}

div.plans-chart ul.plans > li > div.frame {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
    div.plans-chart {
        width: 100% !important;
        max-width: 100% !important;
    }

    div.plans-chart ul.plans {
        display: block !important;
        white-space: normal !important;
    }

    div.plans-chart ul.plans > li,
    div.plans-chart ul.plans.more-5 > li {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}