/* ==========================================================================
   HomePezzo GD UI Color Overrides
   Scoped to .bsui (GeoDirectory/AUI Bootstrap 5 wrapper).
   Loaded after ayecode-ui-css so these rules always win the cascade.
   Old AUI blue: #3993d5  |  HomePezzo blue: var(--hp-blue) (defined in
   homepezzo-section-colors.css :root — single source of truth, Step 115).
   ========================================================================== */

/* ── Click-focus outline suppression ────────────────────────────────────────
   Browsers show a focus ring on any element activated by mouse click.
   :focus-visible fires only on keyboard/sequential navigation, so this rule
   removes the ring on click while keeping it fully intact for Tab users.
   Scoped to a and button — does not affect form inputs (which also receive
   :focus-visible on click, so their blue border/shadow is unaffected).
   ────────────────────────────────────────────────────────────────────────── */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Bricks container mobile width fix ──────────────────────────────────────
   Bricks sets .brxe-container { width: 1100px } as its global default.
   Containers with explicit #id { width:100% } in their _cssCustom override
   this correctly. Any container missing that override (e.g. hpft02 footer)
   would render at 1100px on mobile and cause horizontal scroll.
   !important beats the non-important Bricks class rule even though Bricks
   CSS loads after ours (cascade: !important > source order > specificity).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .brxe-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── Bootstrap 5 Primary Color Tokens (on .bsui scope) ──────────────────── */

.bsui {
    --bs-primary:           var(--hp-blue);
    --bs-primary-rgb:       var(--hp-blue-rgb);
    --bs-link-color:        var(--hp-blue);
    --bs-link-hover-color:  var(--hp-blue-hover);
    --bs-link-color-rgb:    var(--hp-blue-rgb);
    --bs-focus-ring-color:  rgba(49, 94, 158, 0.25);
}

/* ── btn-primary (Search submit button, Add Listing form, etc.) ──────────── */
/* Step 115: centralized via var(--hp-blue)/var(--hp-blue-hover). Because
   this rule and .btn-outline-primary below now use the central token
   directly, every consumer of these two Bootstrap classes sitewide — the
   archive search button, the filter/gear button, the Save Search trigger
   and modal submit button, the grid/list view toggle, and the logged-out
   modal's Login/Register buttons — automatically gets the same blue with
   no per-component override needed. The Step 113/114 narrow overrides for
   each of those (previously here) are now redundant and have been removed. */

.bsui .btn-primary {
    --bs-btn-color:                 #ffffff;
    --bs-btn-bg:                    var(--hp-blue);
    --bs-btn-border-color:          var(--hp-blue);
    --bs-btn-hover-color:           #ffffff;
    --bs-btn-hover-bg:              var(--hp-blue-hover);
    --bs-btn-hover-border-color:    var(--hp-blue-hover);
    --bs-btn-focus-shadow-rgb:      var(--hp-blue-rgb);
    --bs-btn-active-color:          #ffffff;
    --bs-btn-active-bg:             var(--hp-blue-hover);
    --bs-btn-active-border-color:   var(--hp-blue-hover);
    --bs-btn-disabled-color:        #ffffff;
    --bs-btn-disabled-bg:           var(--hp-blue);
    --bs-btn-disabled-border-color: var(--hp-blue);
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
    color:            #ffffff !important;
}

.bsui .btn-primary:hover,
.bsui .btn-primary:focus,
.bsui .btn-primary:active {
    background-color: var(--hp-blue-hover) !important;
    border-color:     var(--hp-blue-hover) !important;
}

/* ── btn-outline-primary (Save Search, grid toggle, All categories) ───────── */

.bsui .btn-outline-primary {
    --bs-btn-color:              var(--hp-blue);
    --bs-btn-border-color:       var(--hp-blue);
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           var(--hp-blue);
    --bs-btn-hover-border-color: var(--hp-blue);
    --bs-btn-focus-shadow-rgb:   var(--hp-blue-rgb);
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          var(--hp-blue);
    --bs-btn-active-border-color:var(--hp-blue);
    --bs-btn-disabled-color:     var(--hp-blue);
    --bs-btn-disabled-border-color:var(--hp-blue);
    color:        var(--hp-blue) !important;
    border-color: var(--hp-blue) !important;
}

.bsui .btn-outline-primary:hover,
.bsui .btn-outline-primary:focus,
.bsui .btn-outline-primary:active,
.bsui .btn-outline-primary.active {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* btn-check + outline (grid/list view toggle active state) */
.bsui .btn-check:checked + .btn-outline-primary,
.bsui .btn-check:active + .btn-outline-primary {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── text-primary and link-primary ────────────────────────────────────────── */

.bsui .text-primary,
.bsui .link-primary {
    color: var(--hp-blue) !important;
}

.bsui a.text-primary:hover,
.bsui a.text-primary:focus,
.bsui .link-primary:hover,
.bsui .link-primary:focus {
    color: var(--hp-blue-hover) !important;
}

/* ── bg-primary ───────────────────────────────────────────────────────────── */

.bsui .bg-primary {
    background-color: var(--hp-blue) !important;
}

/* ── Form control focus ────────────────────────────────────────────────────── */

.bsui .form-control:focus,
.bsui .form-select:focus {
    border-color: var(--hp-blue) !important;
    box-shadow:   0 0 0 0.2rem rgba(49, 94, 158, 0.2) !important;
}

/* ── Checkboxes and radios (search filters) ──────────────────────────────── */

.bsui .form-check-input:checked {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
}

.bsui .form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.bsui .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
}

/* ── Select2 (search form dropdowns) ────────────────────────────────────── */

.select2-container--bootstrap-5 .select2-dropdown
.select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown
.select2-results__option.select2-results__option--selected {
    background-color: var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── Flatpickr date picker (search date filters) ─────────────────────────── */

.bsui .flatpickr-day.selected,
.bsui .flatpickr-day.selected:hover,
.bsui .flatpickr-day.startRange,
.bsui .flatpickr-day.endRange {
    background:   var(--hp-blue) !important;
    border-color: var(--hp-blue) !important;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

.bsui .page-link {
    color: var(--hp-blue);
}

.bsui .page-link:hover {
    color: var(--hp-blue-hover);
}

.bsui .page-item.active .page-link {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── Nav pills active (category/location tabs) ───────────────────────────── */

.bsui .nav-pills .nav-link.active {
    background-color: var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── Dropdown active item ─────────────────────────────────────────────────── */

.bsui .dropdown-menu .active > .dropdown-item {
    background-color: var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── GD-specific: Save this Search button ────────────────────────────────── */
/* Lower specificity than ".bsui .btn-outline-primary" above (1 class vs 2),
   so this rule never actually wins in practice — kept in sync anyway since
   it's a real selector that could start applying if the modal markup ever
   changes (e.g. losing the .btn-outline-primary class). */

.geodir-save-search-btn {
    color:        var(--hp-blue) !important;
    border-color: var(--hp-blue) !important;
}

.geodir-save-search-btn:hover,
.geodir-save-search-btn:focus {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── GD-specific: Location page category cards and All link ──────────────── */

.bsui .card-body.btn-outline-primary,
.bsui .card-body.btn.btn-outline-primary,
.bsui .geodir-all-link {
    color:        var(--hp-blue) !important;
    border-color: var(--hp-blue) !important;
}

.bsui .card-body.btn-outline-primary:hover,
.bsui .card-body.btn.btn-outline-primary:hover,
.bsui .geodir-all-link:hover {
    background-color: var(--hp-blue) !important;
    border-color:     var(--hp-blue) !important;
    color:            #ffffff !important;
}

/* ── Range slider / noUI handle ─────────────────────────────────────────── */

.bsui .range-slider-ui .noUi-handle {
    border-color: var(--hp-blue) !important;
}

/* ── Badge bg-faded-primary ──────────────────────────────────────────────── */

.bsui .badge.bg-faded-primary {
    background-color: rgba(49, 94, 158, 0.15) !important;
    color:            var(--hp-blue) !important;
}

/* ==========================================================================
   Add Listing form — vendor-facing cleanup
   Scoped to body.geodir-page-add (GD body class, add-listing page only).
   ========================================================================== */

/* ── Hide Uncategorized radio option (term_id 2, id gd-cat-2) ──────────── */
/* GD includes the WP default Uncategorized term in the category picker.      */
/* Vendors must only see the 4 HomePezzo sections. The :has() selector        */
/* targets the parent <span> that wraps both the input and its text label.   */
/* The term is NOT deleted — existing data integrity is preserved.            */

body.geodir-page-add #gd_placecategory_wrap span:has(#gd-cat-2) {
    display: none !important;
}

/* ── Hide Address Latitude / Address Longitude field rows ────────────────── */
/* GD renders lat/lng as visible number inputs (data-argument attribute).     */
/* These are geocoding internals — vendors should not see or fill them.       */
/* The inputs remain in the DOM for GD's geocoding JS; only the rows are      */
/* hidden so the map/address workflow continues to function correctly.        */

body.geodir-page-add div[data-argument=address_latitude],
body.geodir-page-add div[data-argument=address_longitude] {
    display: none !important;
}

/* ── Advanced search expanded fields layout fix ──────────────────────────── */

/* Constrain expanded filter fields to match search bar input width */
.bsui .geodir-more-filters .geodir-filter-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.bsui .geodir-more-filters .gd-field-hp_condition {
    flex: 0 0 auto;
    width: auto;
    min-width: 200px;
    max-width: 320px;
}

/* Constrain the full-width search button in expanded mode */
.bsui .geodir-advance-search .geodir_submit_search {
    width: auto !important;
    min-width: 120px;
    max-width: 200px;
}

.bsui .geodir-advance-search {
    display: flex;
    justify-content: flex-start;
}

/* ── Add-listing form: hide Country field (HomePezzo is US-only) ─────────── */
[id$="country_row"] { display: none !important; }

/* ── Hide country row — more specific override ───────────────────────────── */
div#geodir_country_row,
.bsui div#geodir_country_row { display: none !important; }

/* ── Header search bar ([hp_header_search] shortcode) ───────────────────── */
.hp-header-search {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 480px;
    margin: 0 24px 0 0;
}

.hp-search-input {
    flex: 1;
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
    color: #111827;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-right: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.hp-search-input:focus {
    background: #ffffff;
    border-color: var(--hp-blue);
}

.hp-search-btn {
    height: 38px;
    width: 40px;
    background: var(--hp-blue);
    border: 1px solid var(--hp-blue);
    border-radius: 0 8px 8px 0;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.hp-search-btn:hover { background: var(--hp-blue-hover); border-color: var(--hp-blue-hover); }

/* ── Add Listing page — extra breathing room above the title ─────────────── */
.geodir-page-add-listing #brx-content,
.page-id-15 #brx-content {
    padding-top: 40px;
}

/* ── Add Listing page — mobile polish (≤ 575px) ───────────────────────────── */
/* #brx-content.wordpress has no horizontal padding by default, so the title  */
/* and hero text sit flush against the screen edge on phones. The default H1  */
/* (rendered via bricks/default_page_title, 2.4em ≈ 38px) also reads oversize */
/* at this width — both are trimmed here without touching the desktop layout. */

@media (max-width: 575px) {

    .geodir-page-add-listing #brx-content,
    .page-id-15 #brx-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.page-id-15 #brx-content > h1 {
        font-size: 28px;
    }

    /* ── Submit/Preview buttons: equal width, stacked, centered ──────────── */
    /* GD's label_type defaults to "horizontal" (see                         */
    /* class-geodir-widget-add-listing.php), so #geodir-add-listing-submit's  */
    /* actual children are an empty <label class="col-sm-2"> and a           */
    /* <div class="col-sm-10"> — the Submit <button> and Preview <a> are     */
    /* grandchildren, nested inside that col-sm-10.                          */

    body.geodir-page-add #geodir-add-listing-submit,
    body.geodir-page-add #geodir-add-listing-submit .col-sm-10 {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    body.geodir-page-add #geodir-add-listing-submit .geodir_button {
        display: block;
        width: 100% !important;
        max-width: 320px;
        min-width: 0;
        margin: 0 !important;
        font-size: 14px;
        padding: 10px 14px;
        text-align: center;
        white-space: normal;
    }

}

/* ── GeoDirectory alert-info: replace teal with HomePezzo blue ───────────── */
.bsui .alert-info {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: var(--hp-blue-hover) !important;
}

.bsui .alert-info .fas,
.bsui .alert-info .fa,
.bsui .alert-info i {
    color: var(--hp-blue) !important;
}

/* ── Add Your Product — unified vendor landing column (desktop) ───────────── */
/* The H1, hero block, alert, and login buttons all share one max-width column */
/* centered in the GD Bootstrap container. Without this, the Bricks page title */
/* rendered outside GD's container and mis-aligned with the hero content.      */

.page-id-15 .hp-listing-hero {
    max-width: 660px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Page title — moved inside .hp-listing-hero for logged-out users so it sits  */
/* inside the same container as the rest of the landing content.               */
.hp-listing-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    color: #111827;
    margin: 0 0 32px;
}

/* FOR VENDORS eyebrow */
.hp-listing-hero__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-blue);
    margin: 0 0 8px;
}

/* Section sub-heading */
.hp-listing-hero__heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin: 0 0 10px;
}

/* Intro paragraph */
.hp-listing-hero__sub {
    font-size: 15px;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

/* Steps container */
.hp-listing-hero__steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 28px 0 28px;
}

/* Individual step row */
.hp-listing-hero__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.hp-listing-hero__step-body strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.3;
}

.hp-listing-hero__step-body p {
    font-size: 14px;
    color: #64748B;
    line-height: 1.55;
    margin: 0;
}

/* Divider line between steps and the GD alert */
.hp-listing-hero__divider {
    height: 1px;
    background: #E2E8F0;
    margin: 4px 0 0;
    border: none;
}

/* Category chips (step 2) — soft pills using brand accent-soft palette */
.hp-listing-hero__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.hp-listing-hero__cat {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid;
}

.hp-listing-hero__cat--interior    { background: #EFF6FF; color: var(--hp-blue); border-color: #BFDBFE; }
.hp-listing-hero__cat--exterior    { background: #FDF6F0; color: #8B5E3C; border-color: #E8D5C4; }
.hp-listing-hero__cat--green-power { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
.hp-listing-hero__cat--plumbing    { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }

/* Constrain GD alert to match hero column width */
.page-id-15 .bsui .alert {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}

/* ── Add Listing page — breathing room + centering for Login/Register ────── */
/* Without margin-bottom, .gd-login-links sits flush against the page bottom  */
/* and the footer crowds the buttons, especially on mobile where content is   */
/* shorter. The buttons (Bootstrap .btn, display:inline-block) are centered   */
/* via text-align on the wrapper rather than flex, matching GD's markup.      */

/* GD renders Login first (btn-primary) then Register (btn-outline-primary).    */
/* Flex row-reverse puts Register visually first; style overrides swap the fill */
/* so Register = filled primary and Login = outline secondary.                  */
.geodir-page-add-listing .gd-login-links,
.page-id-15 .gd-login-links {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
}

/* Login → outline (returning user, secondary action) */
.page-id-15 .gd-login-links .btn-primary {
    background-color: transparent !important;
    color: var(--hp-blue) !important;
    border-color: var(--hp-blue) !important;
}

.page-id-15 .gd-login-links .btn-primary:hover,
.page-id-15 .gd-login-links .btn-primary:focus {
    background-color: var(--hp-blue) !important;
    color: #ffffff !important;
}

/* Register → filled (new vendor, primary action) */
.page-id-15 .gd-login-links .btn-outline-primary {
    background-color: var(--hp-blue) !important;
    color: #ffffff !important;
    border-color: var(--hp-blue) !important;
}

.page-id-15 .gd-login-links .btn-outline-primary:hover,
.page-id-15 .gd-login-links .btn-outline-primary:focus {
    background-color: var(--hp-blue-hover) !important;
    border-color: var(--hp-blue-hover) !important;
    color: #ffffff !important;
}

/* ── Vendor contact bar ([hp_vendor_contact] shortcode) ──────────────────── */
.hp-vendor-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding: 20px 0;
}

.hp-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: color 0.15s;
}

.hp-contact-item:hover { color: var(--hp-accent, var(--hp-blue)); }

.hp-contact-icon {
    font-size: 14px;
    color: var(--hp-accent, var(--hp-blue));
    width: 16px;
    text-align: center;
}

/* ── More from this Vendor grid ([hp_more_from_vendor] shortcode) ────────── */
.hp-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .hp-more-grid { grid-template-columns: repeat(2, 1fr); }
}

.hp-more-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hp-more-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.hp-more-img {
    width: 100%;
    padding-top: 66%;
    background-size: cover;
    background-position: center;
    background-color: #F1F5F9;
}

.hp-more-img--empty { background-color: #F1F5F9; }

.hp-more-info { padding: 12px 14px 14px; }

.hp-more-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: var(--hp-accent, var(--hp-blue));
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 6px;
}

.hp-more-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.3;
}

.hp-more-price {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* ── Single listing image panel ([hp_product_images] shortcode) ──────────── */

/* Featured-image fallback: fill the sld004 panel without dead zones */
#brxe-sld005 .hp-listing-image-wrap {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #F8FAFC;
}

#brxe-sld005 .hp-listing-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* Desktop fix: single-image fallback — Bricks sets max-height:360px and        */
/* overflow-y:auto on sld004, but sld004 has no definite height, so the         */
/* height:100% chain above resolves to auto and object-fit:contain never gets   */
/* a box to contain into. The image then renders at its natural 4:3 height,     */
/* overflows the 360px cap, and gets clipped behind a scrollbar. Give the wrap   */
/* a definite aspect-ratio so object-fit:contain works, and drop the cap/scroll. */
/* Scoped to :has(.hp-listing-image-wrap) so .hp-product-gallery (multi-image)   */
/* listings are unaffected. Desktop-only — mobile "Fix C" handles ≤767px.       */
@media (min-width: 768px) {

    #brxe-sld004:has(.hp-listing-image-wrap) {
        max-height: none !important;
        overflow: hidden !important;
    }

    #brxe-sld005:has(.hp-listing-image-wrap) {
        height: auto;
    }

    #brxe-sld005 .hp-listing-image-wrap {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* GD gallery: 2-column grid, up to 10 images */
.hp-product-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
}

.hp-gallery-item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #F8FAFC;
}

.hp-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.hp-gallery-item:hover img {
    transform: scale(1.04);
}

@media (max-width: 575px) {
    .hp-product-gallery { grid-template-columns: 1fr; }
    #brxe-sld005 .hp-listing-image-wrap { min-height: 200px; }
}

/* ── Product details section ([hp_product_details] shortcode) ─────────────── */
.hp-product-details { margin-top: 8px; }

.hp-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.hp-detail-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #E2E8F0;
}

.hp-detail-row:last-child { border-bottom: none; }
.hp-detail-row:nth-child(odd) { background: var(--hp-warm-white); }
.hp-detail-row:nth-child(even) { background: #ffffff; }

.hp-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 90px;
    flex-shrink: 0;
}

.hp-detail-value {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.hp-specs-heading {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 10px;
}

.hp-specs-pre {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    background: var(--hp-warm-white);
    /* Border intentionally left at #E2E8F0 (--hp-gray-border) — this is the
       same standard neutral border used by the adjacent .hp-details-grid/
       .hp-detail-row right above it, not the old cool-slate (#F1F5F9/
       #CBD5E1) family being replaced elsewhere. Changing only this box's
       border would make it mismatch its sibling table. */
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    white-space: pre-wrap;
    margin: 0;
}

@media (max-width: 575px) {
    /* Stack the two-column product details table into a single column */
    .hp-details-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Hero search bar ([hp_hero_search] shortcode, Page 54) ───────────────── */

.hp-hero-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 640px;
    position: relative;
    z-index: 2;
}

.hp-hero-search-input {
    flex: 1;
    height: 52px;
    padding: 0 20px;
    font-size: 16px;
    color: #111827;
    background: #ffffff;
    border: 1.5px solid #D1D5DB;
    border-right: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
}

.hp-hero-search-input::placeholder {
    color: #9CA3AF;
}

.hp-hero-search-input:focus {
    border-color: var(--hp-blue);
    box-shadow: 0 0 0 3px rgba(49, 94, 158, 0.12);
}

.hp-hero-search-btn {
    height: 52px;
    padding: 0 24px;
    background: var(--hp-blue);
    border: 1.5px solid var(--hp-blue);
    border-radius: 0 8px 8px 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.hp-hero-search-btn:hover,
.hp-hero-search-btn:focus {
    background: var(--hp-blue-hover);
    border-color: var(--hp-blue-hover);
    outline: none;
}

@media (max-width: 767px) {
    .hp-hero-search {
        max-width: 100%;
    }

    .hp-hero-search-input {
        height: 48px;
        font-size: 16px;
        padding: 0 14px;
    }

    .hp-hero-search-btn {
        height: 48px;
        padding: 0 18px;
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .hp-hero-search {
        max-width: 350px;
    }

    .hp-hero-search-input {
        flex: 1;
        min-width: 0;
        font-size: 16px;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hp-hero-search-btn {
        flex: 0 0 auto;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* ── Hero search field wrapper + GeoDirectory AJAX suggestion dropdown ───── */
/* .hp-hero-search-field wraps the keyword input so the auto-appended          */
/* .gdas-search-suggestions (position:absolute) positions relative to it,      */
/* not to the flex-row form or the hero container.                              */
/* All rules below are scoped to .hp-hero-search — they do not affect the      */
/* /places/ search widget which lives inside .bsui .geodir-search-container.   */

.hp-hero-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

/* Dropdown container */
.hp-hero-search .gdas-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    background: #ffffff;
    max-height: 360px !important; /* GD JS sets inline max-height: windowHeight-40; !important overrides */
    overflow-y: auto;
}

/* Remove browser-default bullets from GD's UL containers (list-unstyled class
   has no effect here — the form is outside .bsui scope). */
.hp-hero-search .gdas-search-suggestions ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

/* "Listings" / "Categories" section label
   (gdas-section-title + dropdown-header + h6 + bg-light — all inert without .bsui) */
.hp-hero-search .gdas-section-title {
    display: block;
    padding: 6px 12px 5px;
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
    margin: 0;
    font-family: inherit;
    line-height: 1.4;
    cursor: default;
}

/* Suggestion rows — restore flex row layout and add padding.
   Bootstrap d-flex / p-0 classes are inert without .bsui. */
.hp-hero-search .gdas-search-suggestions li:not(.gdas-section-title) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none !important;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.1s;
}

.hp-hero-search .gdas-search-suggestions li:not(.gdas-section-title):last-child {
    border-bottom: none;
}

.hp-hero-search .gdas-search-suggestions li:not(.gdas-section-title):hover {
    background: #F8FAFC;
}

/* Thumbnail / icon span — compact 40px square.
   GD sets height:38px;width:38px; inline so !important is required. */
.hp-hero-search .gdasac-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    color: #6B7280;
    font-size: 15px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Thumbnail image inside listing suggestions */
.hp-hero-search .gdasac-icon img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Category suggestion rows render no icon at all (the PHP filter emits an
   empty history string for $type=='category'), so the row's <b> label
   starts right at the row's left padding — no leftover icon gutter to hide.
   Text is colored per category instead, via a slug modifier class on <b>
   added by the same filter. Classnames are unique/namespaced so it's safe
   to leave unscoped: they render correctly on both the homepage hero search
   (.hp-hero-search) and the native GD search bar on /places/. Unknown/
   unmapped slugs (including --uncategorized) fall through to the neutral
   gray base rule on li b above. */
.hp-ac-category-label--interior      { color: var(--hp-blue, #315E9E) !important; }
.hp-ac-category-label--exterior      { color: #8B5E3C !important; }
.hp-ac-category-label--green-power   { color: #16A34A !important; }
.hp-ac-category-label--plumbing-fixtures { color: #D4A000 !important; }
.hp-ac-category-label--uncategorized { color: #64748B !important; }

/* Listing/category title text */
.hp-hero-search .gdas-search-suggestions li b {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .hp-hero-search .gdas-search-suggestions {
        max-height: 60vh !important;
        overflow-y: auto;
    }
}

/* ── Single listing CTA buttons (Template 45, sld006 details panel) ──────── */

/* Contact Vendor — primary filled button ([hp_contact_vendor_button] shortcode) */
.hp-contact-vendor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--hp-accent, var(--hp-blue));
    color: #ffffff;
    border: 2px solid var(--hp-accent, var(--hp-blue));
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
}

.hp-contact-vendor-btn:hover,
.hp-contact-vendor-btn:focus {
    opacity: 0.85;
    color: #ffffff;
    text-decoration: none;
}

/* View Vendor Profile — secondary outline (overrides Bricks inline for sld018) */
#brxe-sld018 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: transparent !important;
    color: var(--hp-accent, var(--hp-blue)) !important;
    border: 2px solid var(--hp-accent, var(--hp-blue)) !important;
    box-sizing: border-box !important;
}

#brxe-sld018:hover {
    background: var(--hp-accent, var(--hp-blue)) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Admin-only Buy Now test panel ([hp_admin_buy_now_test], Template 45 sld006).
   Dashed border + muted note clearly mark this as an internal test, distinct
   from the solid Contact Vendor / View Vendor Profile CTAs above. */
.hp-admin-buy-now-test {
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #CBD5E1;
    box-sizing: border-box;
}

.hp-admin-buy-now-note {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9A3412;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hp-admin-buy-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--hp-accent, var(--hp-blue));
    color: #ffffff;
    border: 2px dashed #9A3412;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
}

.hp-admin-buy-now-btn:hover,
.hp-admin-buy-now-btn:focus {
    opacity: 0.85;
    color: #ffffff;
    text-decoration: none;
}

/* ── Homepage hero tile grid ─────────────────────────────────────────────────
   Phase A scaffolding — dormant until .hp-hero-tiles / .hp-hero-tile classes
   are applied to Bricks elements. No visible change until then.
   Target structure: 4 columns × 2 rows, clean white product-catalog cards.
   ─────────────────────────────────────────────────────────────────────────── */

/* Grid container */
.hp-hero-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

/* Individual tile card */
.hp-hero-tile {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Bricks wraps Image elements in a figure — normalize it so it fills the tile */
.hp-hero-tile figure,
.hp-hero-tile .brxe-image {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Product image: centered, contained, never touching tile edges */
.hp-hero-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* Right-column wrapper — hidden on mobile so left content takes full width */
@media (max-width: 768px) {
    .hp-hero-right-col {
        display: none !important;
    }
}

/* ── Save Search modal: align logged-out Login/Register buttons ────────────
   GeoDir_Save_Search_Post::popup_content() wraps GeoDir_User::login_link()
   output in .geodir-ss-login-wrap > .gd-login-links. Both <a> tags get
   "w-100 mt-3" injected, but the Register link also carries Bootstrap's
   "ms-2 ml-2" margin classes meant for inline buttons. ayecode-ui-
   compatibility.css defines ".bsui .ms-2{margin-left:.5rem !important}" (and
   the .ml-2 equivalent), so a non-important margin-left:0 here can never
   win — !important is required specifically on the margin reset.
   ────────────────────────────────────────────────────────────────────────── */
.geodir-ss-login-wrap .gd-login-links a.uwp-login-link,
.geodir-ss-login-wrap .gd-login-links a.uwp-register-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
}

.geodir-ss-login-wrap .gd-login-links a.uwp-register-link {
    margin-top: 12px;
}

/* ── Save Search modal: balance icon/text in the login notice ──────────────
   AUI_Component_Alert::get() renders this notice as a bare <i> icon
   immediately followed by a text node inside .alert — no flex wrapper, so
   wrapped lines don't sit under the icon and the block reads left-heavy
   next to the centered button stack below it. Scoped to
   .geodir-ss-login-wrap so no other alert on the site is affected.
   ────────────────────────────────────────────────────────────────────────── */
.geodir-ss-login-wrap .alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    line-height: 1.55;
}

.geodir-ss-login-wrap .alert i {
    flex-shrink: 0;
    margin-top: 3px;
}

/* ── Save Search modal (logged-in): segmented tabs + badge color ───────────
   Logged-in markup: ul.nav.nav-tabs.nav-justified.m-0 > li.nav-item >
   button.nav-link (button.nav-link.active for "Save"); badge is
   span.badge.rounded-pill.bg-info.geodir-save-search-count on
   "Your Saved List". Scoped to .geodir-save-search-modal, which also wraps
   the logged-out .geodir-ss-login-wrap content (Steps 93-95) — that markup
   has no .nav-tabs/.badge, so it cannot be affected by these rules.
   ayecode-ui-compatibility.css sets ".m-0{margin:0!important}" and
   ".bg-info{background-color:...!important}", so !important is required
   only on the two declarations that override those two rules.
   ────────────────────────────────────────────────────────────────────────── */

.geodir-save-search-modal .nav-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 5px;
    background-color: #F1F5F9;
    border: none;
    border-bottom: none;
    border-radius: 12px;
    margin-bottom: 16px !important;
}

.geodir-save-search-modal .nav-tabs .nav-item {
    display: flex;
}

.geodir-save-search-modal .nav-tabs .nav-link {
    min-height: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #475569;
    box-shadow: none;
}

.geodir-save-search-modal .nav-tabs .nav-link.active {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #0F172A;
    box-shadow: none;
}

.geodir-save-search-modal .badge.bg-info {
    /* Step 115: was #2563EB, then --hp-blue-muted in Step 114. */
    background-color: var(--hp-blue) !important;
}

/* Mobile header v3: centred column layout, no overflow.
   Logged-out  <=767px: logo centred; Directory / Add Listing / Login in one centred row.
   Logged-in   <=767px: logo centred; Row2: Directory / Add Listing; Row3: My Account / Log out.
   CSS Grid on hphd06 for logged-in guarantees the 2-row split regardless of rendered text width.
   Root cause of My Account being hidden: Fix A2 in homepezzo-archive.css had
   display:none on #brxe-hpacl at <=575px — removed in v0.1.66 (lines 244-327 deleted).
   Template 53 IDs: hphd02=header container  hphd06=nav group  hphd07=Directory
   hphd08=Add Listing  hphd09=Login  hpacl=My Account  hplgt=Log out */
@media (max-width: 767px) {

    /* Stack: logo centred above, full-width nav row below */
    #brxe-hphd02 {
        flex-direction:  column     !important;
        justify-content: flex-start !important;
        align-items:     center     !important;
        gap:             8px 0      !important;
        padding-left:    24px       !important;
    }

    /* Logged-out base nav: flex row, centred, wraps if needed */
    #brxe-hphd06 {
        display:         flex       !important;
        flex-wrap:       wrap       !important;
        justify-content: center     !important;
        align-items:     center     !important;
        column-gap:      16px       !important;
        row-gap:         8px        !important;
        width:           100%       !important;
        box-sizing:      border-box !important;
    }

    /* Logged-in nav: 2-column grid; Row2: Dir/Add Listing  Row3: My Account/Log out */
    body.logged-in #brxe-hphd06 {
        display:               grid      !important;
        grid-template-columns: auto auto !important;
        justify-content:       center    !important;
        align-items:           center    !important;
        gap:                   8px 16px  !important;
    }

    /* Compact Add Listing pill on mobile */
    #brxe-hphd08 {
        padding-left:  12px !important;
        padding-right: 12px !important;
    }

    /* Restore My Account and Log out — previously hidden by archive.css Fix A2
       (display:none at <=575px, now removed). body.logged-in is a standard
       WordPress body class added for authenticated users. */
    body.logged-in #brxe-hpacl { display: inline-flex !important; }
    body.logged-in #brxe-hplgt { display: inline-flex !important; }
}