/* =========================================================
   BLOOOW PUBLIC EXPERIENCE POLISH V1
   Final public-facing visual system. Loaded after all page CSS.
========================================================= */

:root {
    --bg: #060607;
    --surface: #0d0d0f;
    --surface-2: #141417;
    --surface-3: #1a1a1e;
    --text: #f7f7f5;
    --muted: #9b9ba2;
    --muted-strong: #b9b9be;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.22);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);

    --blue: #5a7dff;
    --blue-strong: #7390ff;
    --blue-soft: rgba(90, 125, 255, 0.13);
    --blue-line: rgba(90, 125, 255, 0.45);

    --red: #ff566e;
    --red-strong: #ff6c80;
    --red-soft: rgba(255, 86, 110, 0.12);
    --red-line: rgba(255, 86, 110, 0.42);

    --success: #72e8ad;
    --success-soft: rgba(114, 232, 173, 0.12);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Compatibility with the existing stylesheet stack. */
    --page-bg: var(--bg);
    --page-text: var(--text);
    --black: var(--bg);
    --white: var(--text);
    --gold: var(--text);
    --surface-soft: var(--surface-2);
    --border: var(--line);
    --border-strong: var(--line-strong);
    --border-dark: var(--line);
    --header-bg: var(--bg);
    --footer-bg: var(--bg);
}

:root[data-theme="light"] {
    --bg: #f5f5f2;
    --surface: #ffffff;
    --surface-2: #ededeb;
    --surface-3: #e5e5e1;
    --text: #0b0b0d;
    --muted: #68686e;
    --muted-strong: #4e4e54;
    --line: rgba(11, 11, 13, 0.10);
    --line-strong: rgba(11, 11, 13, 0.20);
    --shadow: 0 18px 48px rgba(20, 20, 25, 0.10);
    --shadow-soft: 0 10px 28px rgba(20, 20, 25, 0.075);

    --blue: #3158df;
    --blue-strong: #2349cf;
    --blue-soft: rgba(49, 88, 223, 0.09);
    --blue-line: rgba(49, 88, 223, 0.32);

    --red: #d83d57;
    --red-strong: #c82d48;
    --red-soft: rgba(216, 61, 87, 0.08);
    --red-line: rgba(216, 61, 87, 0.28);

    --success: #118554;
    --success-soft: rgba(17, 133, 84, 0.09);

    color-scheme: light;
}

html {
    background: var(--bg);
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}

body {
    background: var(--bg);
    color: var(--text);
}

::selection {
    background: var(--blue);
    color: #ffffff;
}

img {
    max-width: 100%;
}

button,
a,
input,
textarea,
select {
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--blue) !important;
    outline-offset: 3px;
}

/* =========================================================
   GLOBAL HEADER
========================================================= */

.blooow-header {
    width: 100%;
    padding: 0 clamp(14px, 3vw, 34px);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    color: var(--text);
}

.blooow-header-frame {
    width: min(100%, 1280px);
    min-height: 78px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 22px;
}

.blooow-header-brand {
    width: 130px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
}

.blooow-header-portrait {
    width: 58px;
    height: 52px;
    object-fit: contain;
    object-position: center bottom;
}

.blooow-header-wordmark {
    width: 112px;
    height: auto;
    margin-top: -5px;
    object-fit: contain;
}

:root[data-theme="dark"] .blooow-header-wordmark {
    filter: invert(1);
}

:root[data-theme="light"] .blooow-header-wordmark {
    filter: none;
}

.blooow-header-center {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blooow-header-slogan {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.blooow-header-slogan span {
    color: var(--text);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.25rem, 1.7vw, 1.65rem);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.blooow-theme-toggle {
    position: relative;
    width: 54px;
    height: 30px;
    justify-self: end;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.blooow-theme-toggle:hover {
    border-color: var(--blue-line);
    box-shadow: 0 0 0 4px var(--blue-soft);
}

.blooow-theme-icon {
    width: 12px;
    height: 12px;
    opacity: .72;
}

.blooow-theme-sun { left: 8px; }
.blooow-theme-moon { right: 8px; }

.blooow-theme-knob {
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

:root[data-theme="dark"] .blooow-theme-knob {
    transform: translateX(26px);
}

:root[data-theme="light"] .blooow-theme-knob {
    transform: translateX(0);
}

/* Internal pages use the center rail for navigation instead of repeating
   the slogan above it. The slogan remains a homepage brand moment. */
.business-page .blooow-header-slogan {
    display: none;
}

.business-page .blooow-header-center {
    justify-content: flex-end;
}

.business-page .business-nav-shell {
    width: auto;
    margin: 0;
    padding: 0;
}

.business-page .business-primary-nav {
    min-height: auto;
    justify-content: flex-end;
    gap: 8px;
}

.business-page .business-primary-nav a {
    padding: 9px 12px;
    border-radius: 999px;
    color: var(--muted-strong);
    font-size: .76rem;
    font-weight: 750;
    opacity: 1;
}

.business-page .business-primary-nav a::after {
    display: none;
}

.business-page .business-primary-nav a:hover,
.business-page .business-primary-nav a:focus-visible {
    background: var(--surface-2);
    color: var(--text);
}

.business-page .business-primary-nav a.active {
    background: var(--blue-soft);
    color: var(--blue-strong);
}

/* =========================================================
   MARKETPLACE HEADER SEARCH
========================================================= */

.business-page .business-search-shell {
    width: min(calc(100% - 0px), 1280px);
    margin: 0 auto;
    padding: 0 0 12px;
}

.business-page .business-search-form {
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 220px 128px;
    gap: 8px;
}

.business-page .business-search-field,
.business-page .bw-dropdown-trigger,
.business-page .listing-sort-trigger {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

.business-page .business-search-field:hover,
.business-page .bw-dropdown-trigger:hover,
.business-page .listing-sort-trigger:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.business-page .business-search-field:focus-within {
    border-color: var(--blue-line);
    box-shadow: 0 0 0 4px var(--blue-soft);
}

.business-page .business-search-field input {
    color: var(--text);
    font-size: .82rem;
}

.business-page .business-search-field input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.business-page .field-icon {
    color: var(--muted-strong);
}

.business-page .bw-dropdown-label {
    color: var(--text);
    font-size: .79rem;
}

.business-page .business-search-button {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--blue);
    border-radius: 12px;
    background: var(--blue);
    color: #ffffff;
    font-size: .77rem;
    font-weight: 850;
    box-shadow: 0 8px 24px rgba(49, 88, 223, .18);
}

.business-page .business-search-button:hover,
.business-page .business-search-button:focus-visible {
    border-color: var(--blue-strong);
    background: var(--blue-strong);
    color: #ffffff;
    transform: translateY(-1px);
}

.bw-dropdown-menu {
    z-index: 600;
    max-height: 300px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

.bw-dropdown-option {
    min-height: 40px;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
}

.bw-dropdown-option:hover,
.bw-dropdown-option:focus-visible,
.bw-dropdown-option[aria-selected="true"] {
    background: var(--blue-soft);
    color: var(--blue-strong);
}

/* =========================================================
   HOMEPAGE
========================================================= */

.home-page .site-main {
    display: flex;
    align-items: center;
}

.home-portals {
    width: min(calc(100% - 40px), 1280px);
    margin: 0 auto;
    padding: 38px 0 52px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.portal-card {
    min-height: 410px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-xl);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    isolation: isolate;
}

.portal-card::before,
.portal-card::after {
    position: absolute;
    pointer-events: none;
}

.portal-card::before {
    content: "";
    inset: 0;
    z-index: -2;
    opacity: 1;
}

.portal-card::after {
    right: -20px;
    top: -55px;
    z-index: -1;
    font-size: clamp(11rem, 20vw, 18rem);
    font-weight: 900;
    line-height: 1;
    opacity: .045;
    transform: rotate(-8deg);
}

.portal-card-business {
    background: var(--surface) !important;
}

.portal-card-business::before {
    background:
        radial-gradient(circle at 12% 12%, rgba(90,125,255,.22), transparent 34%),
        linear-gradient(145deg, rgba(90,125,255,.08), transparent 62%);
}

.portal-card-business::after { content: "?"; color: var(--blue); }

.portal-card-advertise {
    background: var(--surface) !important;
}

.portal-card-advertise::before {
    background:
        radial-gradient(circle at 88% 16%, rgba(255,86,110,.20), transparent 34%),
        linear-gradient(145deg, rgba(255,86,110,.055), transparent 62%);
}

.portal-card-advertise::after { content: "+"; color: var(--red); }

:root[data-theme="light"] .portal-card-business,
:root[data-theme="light"] .portal-card-advertise {
    background: var(--surface) !important;
}

.portal-card:hover,
.portal-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.portal-card-business:hover,
.portal-card-business:focus-visible {
    border-color: var(--blue-line) !important;
    background: var(--surface) !important;
}

.portal-card-advertise:hover,
.portal-card-advertise:focus-visible {
    border-color: var(--red-line) !important;
    background: var(--surface) !important;
}

.portal-card-business:active,
.portal-card-advertise:active {
    background: var(--surface-2) !important;
    color: var(--text);
    transform: translateY(-1px);
}

.portal-card-inner {
    min-height: 410px;
    padding: clamp(30px, 4vw, 48px);
}

.portal-marker {
    min-width: 46px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    backdrop-filter: blur(8px);
}

.portal-card-business .portal-marker { color: var(--blue-strong); }
.portal-card-advertise .portal-marker { color: var(--red-strong); }

.portal-eyebrow {
    margin-bottom: 12px;
    color: var(--muted-strong);
    opacity: 1;
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .16em;
}

.portal-card h1 {
    max-width: 620px;
    font-size: clamp(2.75rem, 5.3vw, 4.7rem);
    letter-spacing: -.055em;
    line-height: .92;
}

.portal-card p {
    max-width: 500px;
    margin: 22px 0 28px;
    color: var(--muted-strong);
    opacity: 1;
    font-size: .96rem;
    line-height: 1.65;
}

.portal-action {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 74%, transparent);
    font-size: .67rem;
    letter-spacing: .12em;
}

.portal-card-business .portal-action { color: var(--blue-strong); }
.portal-card-advertise .portal-action { color: var(--red-strong); }

.portal-card:hover .portal-action {
    border-color: currentColor;
    transform: translateX(2px);
}

/* =========================================================
   MARKETPLACE DISCOVERY
========================================================= */

.business-marketplace {
    width: min(calc(100% - 40px), 1280px);
    padding: 22px 0 58px;
}

.category-discovery {
    padding: 0 0 14px;
    border-bottom: 0;
}

.category-rail {
    gap: 9px;
    padding: 2px;
}

.category-tile {
    width: 132px;
    height: 82px;
    padding: 10px 11px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    box-shadow: none;
}

.category-tile:hover,
.category-tile:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    transform: translateY(-1px);
}

.category-tile.selected {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--text);
}

.category-art {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.category-art img,
.category-card-icon img,
.subcategory-card-icon img {
    opacity: .88;
}

:root[data-theme="dark"] .category-art img,
:root[data-theme="dark"] .category-card-icon img,
:root[data-theme="dark"] .subcategory-card-icon img {
    filter: grayscale(1) invert(1);
}

:root[data-theme="dark"] .category-tile:hover .category-art img,
:root[data-theme="dark"] .category-tile:focus-visible .category-art img,
:root[data-theme="dark"] .category-tile.selected .category-art img,
:root[data-theme="dark"] .category-card:hover .category-card-icon img,
:root[data-theme="dark"] .category-card:focus-visible .category-card-icon img,
:root[data-theme="dark"] .category-card.selected .category-card-icon img,
:root[data-theme="dark"] .subcategory-card:hover .subcategory-card-icon img,
:root[data-theme="dark"] .subcategory-card:focus-visible .subcategory-card-icon img {
    filter: grayscale(1) invert(1);
}

:root[data-theme="light"] .category-art img,
:root[data-theme="light"] .category-card-icon img,
:root[data-theme="light"] .subcategory-card-icon img {
    filter: grayscale(1) invert(0);
}

:root[data-theme="light"] .category-tile:hover .category-art img,
:root[data-theme="light"] .category-tile:focus-visible .category-art img,
:root[data-theme="light"] .category-tile.selected .category-art img,
:root[data-theme="light"] .category-card:hover .category-card-icon img,
:root[data-theme="light"] .category-card:focus-visible .category-card-icon img,
:root[data-theme="light"] .category-card.selected .category-card-icon img,
:root[data-theme="light"] .subcategory-card:hover .subcategory-card-icon img,
:root[data-theme="light"] .subcategory-card:focus-visible .subcategory-card-icon img {
    filter: grayscale(1) invert(0);
}

.category-label {
    min-width: 0;
    color: currentColor;
    font-size: .68rem;
    font-weight: 780;
    line-height: 1.12;
    text-align: left;
}

.category-icon-fallback {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--muted-strong);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.category-icon-fallback[hidden] { display: none; }
.category-icon-fallback-small { width: 34px; height: 34px; }

.subcategory-rail {
    gap: 7px;
    margin-top: 2px;
    padding: 0 0 12px;
}

.subcategory-chip,
.listing-filter-chip {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: .72rem;
    font-weight: 760;
}

.subcategory-chip:hover,
.subcategory-chip:focus-visible,
.listing-filter-chip:hover,
.listing-filter-chip:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
}

.subcategory-chip.selected,
.listing-filter-chip.selected {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
}

.listing-toolbar {
    margin: 2px 0 16px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.listing-kind-tabs { gap: 7px; }
.listing-toolbar-right { gap: 12px; }
.listing-count { color: var(--muted); font-size: .7rem; }
.listing-sort-dropdown { min-width: 156px; }

/* =========================================================
   MARKETPLACE CARDS
========================================================= */

.listing-grid {
    gap: 16px;
}

.marketplace-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 0 rgba(255,255,255,.02);
}

.marketplace-card:hover,
.marketplace-card:focus-visible {
    border-color: var(--blue-line);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

.marketplace-card-media {
    aspect-ratio: 4 / 3;
    background: #0a0a0b;
}

.marketplace-card-media img {
    transition: transform 220ms ease, filter 220ms ease;
}

.marketplace-card:hover .marketplace-card-media img,
.marketplace-card:focus-visible .marketplace-card-media img {
    transform: scale(1.025);
}

.listing-verified {
    top: 10px;
    right: 10px;
    min-height: 25px;
    padding: 3px 8px 3px 5px;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(8, 10, 18, .82);
    color: #ffffff;
    backdrop-filter: blur(9px);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.verified-check {
    width: 16px;
    height: 16px;
    background: var(--blue);
    color: #ffffff;
    font-size: .56rem;
}

.marketplace-card-body {
    padding: 14px 15px 15px;
    background: var(--surface);
    color: var(--text);
}

.marketplace-card:hover .marketplace-card-body,
.marketplace-card:focus-visible .marketplace-card-body {
    background: var(--surface);
    color: var(--text);
}

.listing-type-label {
    margin-bottom: 7px;
    color: var(--blue-strong);
    opacity: 1;
    font-size: .57rem;
    font-weight: 850;
}

.listing-title {
    color: var(--text);
    font-size: .98rem;
    line-height: 1.22;
}

.listing-advertiser {
    margin: 5px 0 12px;
    color: var(--muted);
    opacity: 1;
    font-size: .73rem;
}

.listing-price {
    color: var(--text);
    font-size: .94rem;
    font-weight: 850;
}

.listing-location,
.listing-engagement {
    color: var(--muted);
    opacity: 1;
}

.listing-engagement {
    border-top: 1px solid var(--line);
}

.business-owner-cta {
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid var(--red-line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 22%, rgba(255,86,110,.13), transparent 35%),
        var(--surface);
    color: var(--text);
    box-shadow: none;
}

.business-owner-cta:hover,
.business-owner-cta:focus-visible {
    border-color: var(--red);
    background:
        radial-gradient(circle at 92% 22%, rgba(255,86,110,.18), transparent 38%),
        var(--surface-2);
    color: var(--text);
    transform: translateY(-2px);
}

.store-icon {
    border-color: var(--red-line);
    background: var(--red-soft);
    color: var(--red-strong);
}

.cta-eyebrow { color: var(--red-strong); opacity: 1; }
.business-owner-copy p { color: var(--muted); opacity: 1; }

.business-owner-button {
    border-color: var(--red);
    background: var(--red);
    color: #ffffff;
}

.business-owner-cta:hover .business-owner-button,
.business-owner-cta:focus-visible .business-owner-button {
    border-color: var(--red-strong);
    background: var(--red-strong);
    color: #ffffff;
}

.business-empty {
    padding: 46px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
}

.marketplace-pagination {
    border-color: var(--line);
}

.pagination-action,
.pagination-page {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

.pagination-action:hover,
.pagination-action:focus-visible,
.pagination-page:hover,
.pagination-page:focus-visible,
.pagination-page.current {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

/* =========================================================
   CATEGORY EXPLORER
========================================================= */

.categories-shell {
    width: min(calc(100% - 40px), 1280px);
    padding: 42px 0 58px;
}

.categories-intro {
    gap: 44px;
    padding: 10px 0 34px;
    border-bottom: 1px solid var(--line);
}

.categories-eyebrow,
.category-panel-eyebrow,
.categories-place-ad span:first-child {
    color: var(--blue-strong);
}

.categories-intro h1,
.agents-directory-heading h1 {
    color: var(--text);
    letter-spacing: -.035em;
}

.categories-intro p,
.agents-directory-heading p {
    color: var(--muted-strong);
    opacity: 1;
}

.category-search {
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text);
}

.category-search:hover { border-color: var(--line-strong); }
.category-search:focus-within {
    border-color: var(--blue-line);
    outline: 0;
    box-shadow: 0 0 0 4px var(--blue-soft);
}

.category-search input { color: var(--text); }
.category-search input::placeholder { color: var(--muted); opacity: 1; }
.category-search-clear { background: transparent; color: var(--muted); }
.category-search-clear:hover { background: var(--surface-2); color: var(--text); }

.category-root-section { padding-top: 28px; }
.category-root-heading h2 { color: var(--text); }
.category-root-heading > span { color: var(--muted); }

.category-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.category-card {
    min-height: 132px;
    padding: 18px 14px;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
}

.category-card:hover,
.category-card:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    transform: translateY(-2px);
}

.category-card.selected {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--text);
}

.category-card-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}

.category-card-name {
    color: currentColor;
    font-size: .8rem;
    font-weight: 800;
}

.category-explorer-panel {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px solid var(--blue-line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

.category-panel-header {
    border-color: var(--line);
}

.category-panel-header h2 { color: var(--text); }

.category-panel-all {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

.category-panel-all:hover,
.category-panel-all:focus-visible {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.subcategory-card-grid { gap: 10px; }

.subcategory-card {
    min-height: 112px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
}

.subcategory-card:hover,
.subcategory-card:focus-visible {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--text);
    transform: translateY(-1px);
}

.subcategory-card-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
}

.category-search-result,
.category-search-empty {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

.category-search-result:hover,
.category-search-result:focus-visible {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--text);
}

.categories-place-ad {
    border-color: var(--red-line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 20%, rgba(255,86,110,.12), transparent 35%),
        var(--surface);
    color: var(--text);
}

.categories-place-ad:hover,
.categories-place-ad:focus-visible {
    border-color: var(--red);
    background:
        radial-gradient(circle at 92% 20%, rgba(255,86,110,.17), transparent 38%),
        var(--surface-2);
    color: var(--text);
    transform: translateY(-2px);
}

.categories-place-ad p { color: var(--muted); }
.categories-place-ad-action {
    border-color: var(--red-line);
    background: var(--red-soft);
    color: var(--red-strong);
}

/* =========================================================
   AGENT DIRECTORY
========================================================= */

.agents-directory {
    width: min(calc(100% - 40px), 1120px);
    padding: 50px 0 66px;
}

.agents-directory-heading {
    max-width: 760px;
    padding-bottom: 30px;
}

.agents-eyebrow { color: var(--red-strong); }

.agents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.agent-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

.agent-card:hover,
.agent-card:focus-within {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.agent-card-bot {
    grid-column: span 2;
    border: 1px solid var(--blue-line);
    background:
        radial-gradient(circle at 15% 10%, rgba(90,125,255,.17), transparent 38%),
        var(--surface);
}

.agent-card-bot:hover,
.agent-card-bot:focus-within { border-color: var(--blue); }

.agent-card-brand {
    min-height: 138px;
    padding: 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
}

.agent-card-bot .agent-card-brand {
    background: transparent;
}

.agent-card-logo {
    width: min(100%, 200px);
}

.agent-card-portrait {
    width: 66px;
    height: 92px;
}

.agent-card-wordmark {
    width: 116px;
}

:root[data-theme="dark"] .agent-card-wordmark { filter: invert(1); }
:root[data-theme="light"] .agent-card-wordmark { filter: none; }

.agent-human-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    box-shadow: inset 0 0 0 6px var(--surface-2);
}

.agent-human-avatar span {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
}

.agent-human-label {
    margin-top: 10px;
    color: var(--muted);
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.agent-card-body {
    padding: 18px;
    background: transparent;
    color: var(--text);
}

.agent-card:hover .agent-card-body,
.agent-card:focus-within .agent-card-body {
    background: transparent;
    color: var(--text);
}

.agent-card-meta {
    color: var(--muted);
}

.agent-status.online { color: var(--success); }
.agent-status.offline { color: var(--muted); }

.agent-card h2 {
    margin: 0 0 5px;
    color: var(--text);
    font-size: 1.05rem;
    text-align: left;
}

.agent-card-location {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.45;
}

.agent-card-description {
    min-height: 44px;
    margin: 0 0 16px;
    color: var(--muted-strong);
    opacity: 1;
    font-size: .74rem;
}

.agent-call-button {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
}

.agent-call-button:hover,
.agent-call-button:focus-visible,
.agent-card:hover .agent-call-button,
.agent-card:focus-within .agent-call-button {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.agent-bot-button {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
}

.agent-bot-button:hover,
.agent-bot-button:focus-visible,
.agent-card-bot:hover .agent-bot-button,
.agent-card-bot:focus-within .agent-bot-button {
    border-color: var(--blue-strong);
    background: var(--blue-strong);
    color: #ffffff;
}

.bot-offline-notice {
    border: 1px solid var(--red-line);
    border-radius: 14px;
    background: var(--red-soft);
    color: var(--text);
}

/* =========================================================
   LISTING DETAIL
========================================================= */

.listing-detail-shell {
    width: min(calc(100% - 40px), 1280px);
    padding: 22px 0 68px;
}

.listing-breadcrumbs {
    margin-bottom: 14px;
    color: var(--muted);
}

.listing-breadcrumbs a { color: var(--muted-strong); }
.listing-breadcrumbs a:hover { color: var(--blue-strong); }

.listing-detail-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .72fr);
    gap: 16px;
    align-items: start;
}

.listing-gallery-card,
.listing-summary-card,
.listing-description-panel,
.detail-side-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

.listing-gallery-card {
    overflow: hidden;
}

.listing-main-media {
    background: #09090a;
    border-radius: 19px 19px 0 0;
}

.gallery-counter {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(5,5,7,.70);
    color: #fff;
    backdrop-filter: blur(10px);
}

.gallery-thumbnails {
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.gallery-thumbnail {
    border: 1px solid transparent;
    background: var(--surface-2);
}

.gallery-thumbnail:hover,
.gallery-thumbnail:focus-visible,
.gallery-thumbnail.selected {
    border-color: var(--blue);
    background: var(--surface-2);
}

.listing-summary-card {
    position: sticky;
    top: 18px;
    padding: 22px;
}

.listing-kind-pill {
    border: 1px solid var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.listing-reference { color: var(--muted); }

.listing-summary-card h1 {
    color: var(--text);
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    letter-spacing: -.035em;
    line-height: 1.02;
}

.detail-price {
    color: var(--text);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.listing-meta-grid {
    border-color: var(--line);
}

.meta-label,
.detail-eyebrow { color: var(--muted); }
.listing-meta-grid strong { color: var(--text); }

.verification-panel {
    border: 1px solid var(--blue-line);
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--text);
}

.verification-mark {
    border: 0;
    background: var(--blue);
    color: #fff;
}

.verification-panel strong { color: var(--blue-strong); }
.verification-panel p { color: var(--muted-strong); }

.engagement-row { color: var(--muted-strong); }

.detail-action-button {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
}

.detail-action-button:hover,
.detail-action-button:focus-visible,
.detail-action-button.selected {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.contact-button {
    border: 1px solid var(--blue);
    border-radius: 12px;
    background: var(--blue);
    color: #ffffff;
}

.contact-button:hover,
.contact-button:focus-visible {
    border-color: var(--blue-strong);
    background: var(--blue-strong);
    color: #ffffff;
    transform: translateY(-1px);
}

.listing-content-grid {
    margin-top: 16px;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .72fr);
    gap: 16px;
}

.listing-description-panel,
.detail-side-card { padding: 22px; }
.listing-description-panel h2,
.detail-side-card h2,
.related-heading h2 { color: var(--text); }
.listing-description { color: var(--muted-strong); }
.detail-side-card p,
.side-meta { color: var(--muted); }

.seller-verification { color: var(--blue-strong); }
.seller-verification span {
    border-color: var(--blue);
    background: var(--blue-soft);
}

.seller-business-link {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

.seller-business-link:hover,
.seller-business-link:focus-visible {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.related-section {
    border-color: var(--line);
}

.related-heading > a { color: var(--blue-strong); }

/* =========================================================
   BLOOOW-BOT / SUBMISSIONS
========================================================= */

.submission-page-body {
    background: var(--bg);
    color: var(--text);
}

.submission-shell {
    width: min(calc(100% - 40px), 1120px);
    padding-top: 46px;
}

.submission-hero,
.status-hero {
    border-color: var(--line);
}

.submission-eyebrow,
.submission-step-kicker,
.submission-fee-card span,
.submission-final-bar span,
.status-reference span,
.status-card > span,
.status-ad-summary > span,
.payment-ad-summary > span {
    color: var(--blue-strong);
}

.submission-hero h1,
.status-hero h1 { color: var(--text); }
.submission-hero p,
.status-hero p { color: var(--muted-strong); }

.submission-fee-card {
    border: 1px solid var(--blue-line);
    border-radius: 16px;
    background: var(--blue-soft);
    color: var(--text);
}

.submission-fee-card strong { color: var(--text); }
.submission-fee-card small { color: var(--muted); }

.bot-agent-context {
    border-color: var(--line);
    color: var(--muted-strong);
}
.bot-agent-context strong,
.bot-agent-context a { color: var(--blue-strong); }

.submission-progress {
    border-color: var(--line);
    background: var(--surface);
}

.submission-progress button {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.submission-progress button:hover,
.submission-progress button:focus-visible,
.submission-progress button.current,
.submission-progress button.complete {
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.submission-step {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: none;
}

.submission-step-number {
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--muted-strong);
}

.submission-step.complete .submission-step-number {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.submission-step-header h2 { color: var(--text); }
.submission-step-header p { color: var(--muted); }

.submission-form-v2 input[type="text"],
.submission-form-v2 input[type="email"],
.submission-form-v2 input[type="number"],
.submission-form-v2 select,
.submission-form-v2 textarea,
.payment-form-v2 input[type="text"],
.payment-form-v2 select,
.payment-form-v2 textarea {
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
}

.submission-form-v2 input:focus,
.submission-form-v2 select:focus,
.submission-form-v2 textarea:focus,
.payment-form-v2 input:focus {
    border-color: var(--blue-line);
    box-shadow: 0 0 0 4px var(--blue-soft);
}

.ad-type-card,
.submission-category-card,
.submission-subcategory-card,
.consent-card,
.image-upload-zone,
.receipt-upload-zone {
    border-color: var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
}

.ad-type-card:hover,
.ad-type-card:focus-visible,
.ad-type-card.selected,
.submission-category-card:hover,
.submission-category-card:focus-visible,
.submission-category-card.selected,
.submission-subcategory-card:hover,
.submission-subcategory-card:focus-visible,
.submission-subcategory-card.selected,
.consent-card:has(input:checked),
.image-upload-zone:hover,
.image-upload-zone:focus-within,
.receipt-upload-zone:hover,
.receipt-upload-zone:focus-within {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--text);
}

.submission-final-bar,
.payment-panel,
.payment-ad-summary,
.status-card,
.status-ad-summary,
.status-reference {
    border-color: var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
}

.submission-submit-button {
    border: 1px solid var(--blue);
    border-radius: 12px;
    background: var(--blue);
    color: #fff;
}

.submission-submit-button:hover,
.submission-submit-button:focus-visible {
    border-color: var(--blue-strong);
    background: var(--blue-strong);
    color: #fff;
    transform: translateY(-1px);
}

.bank-details-v2 > div,
.submission-review > div { border-color: var(--line); }

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 28px 18px 32px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
}

.footer-links { gap: 12px 22px; }
.footer-links a {
    color: var(--muted-strong);
    font-size: .67rem;
    letter-spacing: .09em;
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--text); }
.copyright { color: var(--muted); opacity: 1; }

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {
    .blooow-header-frame {
        grid-template-columns: 132px minmax(0, 1fr) 54px;
        gap: 14px;
    }

    .business-page .business-primary-nav { gap: 3px; }
    .business-page .business-primary-nav a { padding-inline: 9px; }

    .business-page .business-search-form {
        grid-template-columns: minmax(220px, 1fr) 190px 116px;
    }

    .category-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .agents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agent-card-bot { grid-column: span 2; }
}

@media (max-width: 820px) {
    .blooow-header {
        padding-inline: 14px;
    }

    .business-page .blooow-header-frame {
        min-height: 104px;
        grid-template-columns: minmax(0, 1fr) 54px;
        grid-template-areas:
            "brand theme"
            "nav nav";
        row-gap: 2px;
    }

    .business-page .blooow-header-brand {
        grid-area: brand;
        width: 112px;
    }

    .business-page .blooow-theme-toggle { grid-area: theme; }

    .business-page .blooow-header-center {
        grid-area: nav;
        width: 100%;
        justify-content: flex-start;
    }

    .business-page .business-nav-shell {
        width: 100%;
        overflow: hidden;
    }

    .business-page .business-primary-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 3px;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .business-page .business-search-shell { padding-bottom: 12px; }

    .business-page .business-search-form {
        grid-template-columns: minmax(0, 1fr) 190px 112px;
    }

    .listing-detail-layout,
    .listing-content-grid {
        grid-template-columns: 1fr;
    }

    .listing-summary-card { position: static; }

    .category-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
    .blooow-header {
        padding-inline: 10px;
    }

    .home-page .blooow-header-frame {
        min-height: 72px;
        grid-template-columns: 96px minmax(0, 1fr) 50px;
        gap: 6px;
    }

    .blooow-header-brand {
        width: 96px;
    }

    .blooow-header-portrait {
        width: 48px;
        height: 43px;
    }

    .blooow-header-wordmark {
        width: 88px;
        margin-top: -4px;
    }

    .home-page .blooow-header-slogan span {
        font-size: clamp(.84rem, 3.8vw, 1.04rem);
        line-height: 1.05;
        white-space: normal;
    }

    .blooow-theme-toggle {
        width: 48px;
        height: 28px;
    }

    .blooow-theme-knob {
        width: 20px;
        height: 20px;
    }

    :root[data-theme="dark"] .blooow-theme-knob {
        transform: translateX(22px);
    }

    .business-page .blooow-header-frame {
        min-height: 96px;
    }

    .business-page .business-primary-nav a {
        padding: 7px 10px;
        font-size: .72rem;
    }

    .business-page .business-search-shell {
        width: 100%;
    }

    .business-page .business-search-form {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .business-page .business-search-field {
        grid-column: 1 / -1;
    }

    .business-page .business-search-field,
    .business-page .bw-dropdown-trigger,
    .business-page .business-search-button {
        min-height: 42px;
    }

    .home-page .site-main { align-items: flex-start; }

    .home-portals {
        width: calc(100% - 20px);
        padding: 18px 0 28px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .portal-card,
    .portal-card-inner {
        min-height: 300px;
    }

    .portal-card { border-radius: 22px; }
    .portal-card-inner { padding: 26px; }
    .portal-card::after { font-size: 12rem; right: -12px; top: -36px; }
    .portal-card h1 { font-size: clamp(2.45rem, 13.3vw, 3.6rem); }
    .portal-card p { margin: 18px 0 22px; font-size: .88rem; }

    .business-marketplace,
    .categories-shell,
    .agents-directory,
    .listing-detail-shell,
    .submission-shell {
        width: calc(100% - 18px);
    }

    .business-marketplace { padding-top: 14px; }

    .category-tile {
        width: 116px;
        height: 70px;
        padding: 8px 9px;
        gap: 8px;
        border-radius: 12px;
    }

    .category-art {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .category-label { font-size: .63rem; }

    .listing-toolbar {
        gap: 10px;
        margin-bottom: 12px;
        padding-top: 10px;
    }

    .listing-kind-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .listing-filter-chip { flex: 0 0 auto; }

    .listing-grid { gap: 10px; }

    .marketplace-card {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        border-radius: 15px;
    }

    .marketplace-card-media {
        min-height: 168px;
        height: 100%;
        aspect-ratio: auto;
    }

    .marketplace-card-body {
        min-width: 0;
        padding: 12px;
    }

    .listing-verified {
        top: 7px;
        right: 7px;
        max-width: calc(100% - 14px);
        font-size: .48rem;
    }

    .listing-title { font-size: .91rem; }
    .listing-advertiser { margin-bottom: 9px; font-size: .68rem; }
    .listing-price { margin-bottom: 8px; font-size: .86rem; }
    .listing-location,
    .listing-engagement { font-size: .64rem; }
    .listing-engagement { margin-top: 8px; padding-top: 8px; }

    .business-owner-cta,
    .categories-place-ad {
        padding: 18px;
        border-radius: 16px;
    }

    .categories-shell { padding-top: 28px; }
    .categories-intro { gap: 18px; padding-bottom: 24px; }
    .categories-intro h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
    .category-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .category-card { min-height: 116px; padding: 14px 10px; gap: 8px; }
    .category-card-icon { width: 48px; height: 48px; flex-basis: 48px; }
    .category-card-name { font-size: .72rem; }
    .category-explorer-panel { padding: 16px; border-radius: 16px; }
    .subcategory-card { min-height: 102px; }

    .agents-directory { padding-top: 32px; }
    .agents-directory-heading h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
    .agents-grid { grid-template-columns: 1fr; gap: 10px; }
    .agent-card-bot { grid-column: auto; }
    .agent-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
    .agent-card-brand { min-height: 100%; padding: 12px; border-bottom: 0; border-right: 1px solid var(--line); }
    .agent-card-bot .agent-card-brand { background: var(--blue-soft); }
    .agent-card-logo { flex-direction: column; gap: 2px; }
    .agent-card-portrait { width: 52px; height: 70px; }
    .agent-card-wordmark { width: 84px; }
    .agent-human-avatar { width: 58px; height: 58px; }
    .agent-card-body { padding: 14px; }
    .agent-card h2 { font-size: .94rem; }
    .agent-card-description { min-height: 0; font-size: .69rem; }
    .agent-call-button { min-height: 42px; font-size: .7rem; }

    .listing-detail-shell {
        padding-top: 12px;
        padding-bottom: calc(106px + env(safe-area-inset-bottom));
    }

    .listing-detail-layout,
    .listing-content-grid { gap: 10px; }

    .listing-gallery-card,
    .listing-summary-card,
    .listing-description-panel,
    .detail-side-card { border-radius: 16px; }

    .listing-main-media { aspect-ratio: 4 / 4.4; border-radius: 15px 15px 0 0; }
    .listing-summary-card { padding: 17px; }
    .listing-summary-card h1 { font-size: clamp(1.55rem, 7.3vw, 2.05rem); }
    .listing-description-panel,
    .detail-side-card { padding: 17px; }

    .sticky-contact-bar {
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border: 1px solid var(--line-strong);
        border-radius: 16px;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        box-shadow: 0 16px 44px rgba(0,0,0,.34);
        backdrop-filter: blur(14px);
    }

    .sticky-contact-bar:has(.sticky-contact-action:only-child) {
        grid-template-columns: 1fr;
    }

    .sticky-contact-action {
        min-height: 48px;
        border: 1px solid var(--blue);
        border-radius: 11px;
        background: var(--blue);
        color: #fff;
    }

    .sticky-contact-action:hover,
    .sticky-contact-action:focus-visible {
        border-color: var(--blue-strong);
        background: var(--blue-strong);
        color: #fff;
    }

    .has-sticky-contact .site-footer {
        margin-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .submission-shell { padding-top: 28px; }
    .submission-step { border-radius: 16px; }
    .submission-progress { border-radius: 14px; }
}

@media (max-width: 390px) {
    .home-page .blooow-header-frame {
        grid-template-columns: 88px minmax(0, 1fr) 48px;
    }

    .home-page .blooow-header-brand { width: 88px; }
    .home-page .blooow-header-wordmark { width: 80px; }

    .business-page .business-primary-nav a {
        padding-inline: 8px;
        font-size: .69rem;
    }

    .business-page .business-search-form {
        grid-template-columns: minmax(0, 1fr) 108px;
    }

    .business-page .bw-dropdown { min-width: 0; }
    .business-page .business-search-button { min-width: 0; }

    .marketplace-card {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .marketplace-card-media { min-height: 158px; }
    .listing-title { font-size: .87rem; }

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

/* =========================================================
   LEGACY HEADER OVERRIDE GUARD
   Older Business Launch CSS positioned the brand absolutely.
   Reset those rules so the new header frame controls layout.
========================================================= */

@media (min-width: 821px) {
    .business-page .blooow-header-frame,
    .business-page .blooow-header-top {
        min-height: 72px;
        position: static;
    }

    .business-page .blooow-header-brand,
    .contact-page .blooow-header-brand {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        width: 130px;
        height: auto;
        align-items: flex-start;
        justify-content: center;
    }

    .business-page .blooow-header-portrait,
    .contact-page .blooow-header-portrait {
        width: 58px;
        height: 52px;
    }

    .business-page .blooow-header-wordmark,
    .contact-page .blooow-header-wordmark {
        width: 112px;
        margin-top: -5px;
    }
}

.submission-category-icon .category-icon-fallback,
.submission-subcategory-icon .category-icon-fallback {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

/* =========================================================
   HEADER REFINEMENT V1.1 — DESKTOP BRAND RAIL
   The BLOOOW mark owns the full left side of internal headers while
   navigation and search form a compact two-row stack on the right.
   The logo is sized *inside* that rail; it never drives header height.
========================================================= */

@media (min-width: 821px) {
    .business-page {
        --blooow-brand-rail: clamp(190px, 16vw, 224px);
        --blooow-nav-row: 54px;
    }

    .business-page .blooow-header {
        padding-inline: clamp(14px, 3vw, 34px);
    }

    .business-page .blooow-header-frame,
    .business-page .blooow-header-top {
        position: relative;
        min-height: var(--blooow-nav-row);
        grid-template-columns: var(--blooow-brand-rail) minmax(0, 1fr) 58px;
        gap: 16px;
    }

    /* The brand is visually dominant because it spans the entire two-row
       header zone, not because it makes either row taller. */
    .business-page:not(.contact-page) .blooow-header-brand {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        width: var(--blooow-brand-rail);
        height: calc(var(--blooow-nav-row) + 66px);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }

    .business-page:not(.contact-page) .blooow-header-portrait {
        width: 82px;
        height: 70px;
        object-fit: contain;
        object-position: center bottom;
    }

    .business-page:not(.contact-page) .blooow-header-wordmark {
        width: 158px;
        margin-top: -8px;
    }

    .business-page .blooow-header-center {
        grid-column: 2;
        min-width: 0;
        justify-content: flex-end;
    }

    .business-page .blooow-theme-toggle {
        grid-column: 3;
        align-self: center;
    }

    .business-page .business-nav-shell {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .business-page .business-primary-nav {
        min-height: var(--blooow-nav-row);
        justify-content: flex-end;
        gap: 4px;
    }

    .business-page .business-primary-nav a {
        padding: 8px 11px;
    }

    /* Search row shares the exact same 1280px frame as the row above.
       The subtle divider intentionally begins after the logo rail. */
    .business-page:not(.contact-page) .business-search-shell {
        position: relative;
        width: min(100%, 1280px);
        margin: 0 auto;
        padding: 10px 0 12px var(--blooow-brand-rail);
    }

    .business-page:not(.contact-page) .business-search-shell::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--blooow-brand-rail);
        right: 0;
        height: 1px;
        background: var(--line);
        pointer-events: none;
    }

    .business-page:not(.contact-page) .business-search-form {
        width: 100%;
        max-width: none;
        margin: 0;
        grid-template-columns: minmax(280px, 1fr) minmax(176px, 220px) 124px;
        gap: 8px;
    }

    /* Contact has no search row, so its logo still owns the left side of
       the header but remains bounded to the single navigation row. */
    .contact-page .blooow-header-frame,
    .contact-page .blooow-header-top {
        min-height: 76px;
        grid-template-columns: var(--blooow-brand-rail) minmax(0, 1fr) 58px;
    }

    .contact-page .blooow-header-brand {
        position: static;
        width: var(--blooow-brand-rail);
        height: 76px;
        align-items: center;
        justify-content: center;
    }

    .contact-page .blooow-header-portrait {
        width: 68px;
        height: 58px;
    }

    .contact-page .blooow-header-wordmark {
        width: 138px;
        margin-top: -7px;
    }
}

/* =========================================================
   HEADER REFINEMENT V1.2 — LOCKUP + MOBILE SIDE NAV

   The portrait and wordmark now live inside one fixed lockup instead of
   participating in flex flow with negative margins. This keeps their
   relationship stable at every breakpoint.
========================================================= */

.blooow-header-brand {
    position: relative;
    display: block;
    width: 148px;
    height: 94px;
    flex: 0 0 auto;
}

.blooow-brand-lockup {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.blooow-brand-lockup .blooow-header-portrait,
.blooow-brand-lockup .blooow-header-wordmark {
    position: absolute;
    left: 50%;
    display: block;
    margin: 0;
    transform: translateX(-50%);
    object-fit: contain;
}

.blooow-brand-lockup .blooow-header-portrait {
    top: 1px;
    width: 62px;
    height: 62px;
    object-position: center;
}

.blooow-brand-lockup .blooow-header-wordmark {
    bottom: 3px;
    width: 132px;
    height: auto;
}

/* Give the homepage brand moment enough room to feel intentional without
   letting the asset itself determine the header height. */
.home-page .blooow-header-frame {
    min-height: 104px;
    grid-template-columns: 160px minmax(0, 1fr) 58px;
    gap: 18px;
}

.home-page .blooow-header-brand {
    width: 150px;
    height: 94px;
    justify-self: start;
    align-self: center;
}

/* Internal desktop/tablet brand rail: centered lockup with a deliberate gap
   between portrait and wordmark. The rail still spans nav + search rows. */
@media (min-width: 821px) {
    .business-page:not(.contact-page) .blooow-header-brand {
        display: block;
        width: var(--blooow-brand-rail);
        height: calc(var(--blooow-nav-row) + 66px);
    }

    .business-page:not(.contact-page) .blooow-brand-lockup {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 172px;
        height: 112px;
        transform: translate(-50%, -50%);
    }

    .business-page:not(.contact-page) .blooow-brand-lockup .blooow-header-portrait {
        top: 4px;
        width: 70px;
        height: 70px;
    }

    .business-page:not(.contact-page) .blooow-brand-lockup .blooow-header-wordmark {
        bottom: 0;
        width: 160px;
    }

    .contact-page .blooow-header-brand {
        display: block;
        width: var(--blooow-brand-rail);
        height: 76px;
    }

    .contact-page .blooow-brand-lockup {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 146px;
        height: 72px;
        transform: translate(-50%, -50%);
    }

    .contact-page .blooow-brand-lockup .blooow-header-portrait {
        top: 0;
        width: 48px;
        height: 48px;
    }

    .contact-page .blooow-brand-lockup .blooow-header-wordmark {
        bottom: 1px;
        width: 128px;
    }
}

/* Mobile internal header: compact two-row rail. The brand stays a single
   portrait+wordmark lockup, while nav/theme grow slightly and the search row
   sits directly beneath the header without the previous dead space. */
@media (max-width: 820px) {
    .business-page .blooow-header-frame,
    .business-page .blooow-header-top {
        min-height: 80px;
        display: grid;
        grid-template-columns: 114px minmax(0, 1fr) 52px;
        grid-template-rows: 32px 48px;
        grid-template-areas:
            "brand spacer theme"
            "brand nav nav";
        column-gap: 7px;
        row-gap: 0;
        align-items: center;
    }

    .business-page .blooow-header-brand {
        grid-area: brand;
        position: relative;
        width: 110px;
        height: 80px;
        align-self: center;
        justify-self: start;
    }

    /* Keep the portrait + wordmark relationship intact. Increase both only
       enough to strengthen the lockup without making the two images collide. */
    .business-page .blooow-brand-lockup .blooow-header-portrait {
        top: 1px;
        width: 54px;
        height: 54px;
    }

    .business-page .blooow-brand-lockup .blooow-header-wordmark {
        bottom: 1px;
        width: 108px;
    }

    .business-page .blooow-theme-toggle {
        grid-area: theme;
        width: 52px;
        height: 30px;
        justify-self: end;
        align-self: center;
    }

    .business-page .blooow-theme-knob {
        width: 22px;
        height: 22px;
    }

    :root[data-theme="dark"] .business-page .blooow-theme-knob {
        transform: translateX(24px);
    }

    .business-page .blooow-header-center {
        grid-area: nav;
        width: 100%;
        min-width: 0;
        align-self: center;
        justify-content: flex-end;
    }

    .business-page .business-nav-shell {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .business-page .business-primary-nav {
        width: 100%;
        min-height: 42px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .business-page .business-primary-nav::-webkit-scrollbar {
        display: none;
    }

    .business-page .business-primary-nav a {
        flex: 0 0 auto;
        padding: 7px 7px;
        font-size: .69rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    /* Remove the old 8px spacer above the search controls. */
    .business-page .business-search-shell {
        padding-top: 0;
    }
}

/* Homepage mobile keeps the slogan, but uses the same stable logo lockup and
   gets a slightly taller, better-balanced brand header. */
@media (max-width: 640px) {
    .home-page .blooow-header-frame {
        min-height: 88px;
        grid-template-columns: 112px minmax(0, 1fr) 48px;
        gap: 7px;
    }

    .home-page .blooow-header-brand {
        width: 108px;
        height: 80px;
    }

    .home-page .blooow-brand-lockup .blooow-header-portrait {
        top: 0;
        width: 50px;
        height: 50px;
    }

    .home-page .blooow-brand-lockup .blooow-header-wordmark {
        bottom: 3px;
        width: 102px;
    }

    .home-page .blooow-header-slogan span {
        font-size: clamp(.9rem, 3.6vw, 1.05rem);
    }
}

@media (max-width: 420px) {
    .business-page .blooow-header-frame,
    .business-page .blooow-header-top {
        grid-template-columns: 106px minmax(0, 1fr) 48px;
        grid-template-rows: 30px 46px;
        min-height: 76px;
        column-gap: 4px;
    }

    .business-page .blooow-header-brand {
        width: 102px;
        height: 76px;
    }

    .business-page .blooow-brand-lockup .blooow-header-portrait {
        top: 1px;
        width: 50px;
        height: 50px;
    }

    .business-page .blooow-brand-lockup .blooow-header-wordmark {
        width: 98px;
        bottom: 1px;
    }

    .business-page .blooow-theme-toggle {
        width: 48px;
        height: 28px;
    }

    .business-page .blooow-theme-knob {
        width: 20px;
        height: 20px;
    }

    :root[data-theme="dark"] .business-page .blooow-theme-knob {
        transform: translateX(22px);
    }

    .business-page .business-primary-nav {
        gap: 0;
    }

    .business-page .business-primary-nav a {
        padding: 6px 5px;
        font-size: .64rem;
    }

    .home-page .blooow-header-frame {
        grid-template-columns: 104px minmax(0, 1fr) 44px;
        min-height: 86px;
        gap: 5px;
    }

    .home-page .blooow-header-brand {
        width: 100px;
        height: 76px;
    }

    .home-page .blooow-brand-lockup .blooow-header-portrait {
        width: 46px;
        height: 46px;
    }

    .home-page .blooow-brand-lockup .blooow-header-wordmark {
        width: 94px;
    }
}

/* =========================================================
   LISTING DETAIL ACTIONS V1.3
   Contact actions stay in-flow on every viewport.
========================================================= */

:root {
    --call-red: #e5484d;
    --call-red-hover: #c93f44;
    --whatsapp-green: #25d366;
    --whatsapp-green-hover: #1fb85a;
}

:root[data-theme="light"] {
    --call-red: #d93f45;
    --call-red-hover: #bf343a;
    --whatsapp-green: #1ebc59;
    --whatsapp-green-hover: #199f4c;
}

.desktop-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.contact-button.contact-button-call {
    border-color: var(--call-red);
    background: var(--call-red);
    color: #ffffff;
}

.contact-button.contact-button-call:hover,
.contact-button.contact-button-call:focus-visible {
    border-color: var(--call-red-hover);
    background: var(--call-red-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.contact-button.contact-button-whatsapp {
    border-color: var(--whatsapp-green);
    background: var(--whatsapp-green);
    color: #ffffff;
}

.contact-button.contact-button-whatsapp:hover,
.contact-button.contact-button-whatsapp:focus-visible {
    border-color: var(--whatsapp-green-hover);
    background: var(--whatsapp-green-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .listing-detail-shell {
        padding-bottom: 28px;
    }

    .desktop-contact-actions {
        display: grid;
        margin-top: 8px;
    }
}

@media (max-width: 380px) {
    .desktop-contact-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LISTING MEDIA REFINEMENT V1.4
   Preserve complete ad artwork inside marketplace cards.
========================================================= */

.marketplace-card-media {
    background: var(--surface-2);
}

.marketplace-card-media img {
    /*
       `scale-down` behaves like `contain`, but it also avoids enlarging an
       image beyond its intrinsic size. This keeps portrait/square ad artwork
       fully visible and reduces softness on smaller uploads.
    */
    object-fit: scale-down;
    object-position: center;
    image-rendering: auto;
    filter: none;
    transform: none;
}

.marketplace-card:hover .marketplace-card-media img,
.marketplace-card:focus-visible .marketplace-card-media img {
    /* Card elevation supplies the hover feedback; the image itself no longer
       zooms, so no artwork is cropped or resampled during interaction. */
    transform: none;
    filter: none;
}

/* =========================================================
   LISTING MEDIA COMPOSITION V1.5
   Full artwork + filled media canvas + denser wide desktop grid.
========================================================= */

.marketplace-card-media {
    /* A slightly more compact canvas keeps marketplace cards from feeling
       image-heavy while giving varied ad artwork one consistent frame. */
    aspect-ratio: 6 / 5;
    isolation: isolate;
    background: #07080a;
}

.marketplace-card-media.has-listing-art::before {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: 0;
    pointer-events: none;
    background-image: var(--listing-art);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(16px) saturate(.82) brightness(.48);
    opacity: .58;
    transform: scale(1.06);
}

.marketplace-card-media.has-listing-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(5, 6, 9, .16),
        rgba(5, 6, 9, .34)
    );
}

.marketplace-card-media img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    background: transparent;
    image-rendering: auto;
    filter: none;
    transform: none;
}

.marketplace-card .listing-verified {
    z-index: 3;
}

/* On large screens, slightly narrower cards match the predominantly square
   ad artwork much better and expose more listings without making the page
   feel cramped. Existing responsive rules remain unchanged below this size. */
@media (min-width: 1180px) {
    .listing-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }

    .marketplace-card-body {
        padding: 13px 14px 14px;
    }

    .listing-title {
        font-size: .94rem;
    }
}

/* Mobile uses the established horizontal card layout. Keep that layout's
   explicit media height rather than forcing the desktop aspect ratio. */
@media (max-width: 640px) {
    .marketplace-card-media {
        aspect-ratio: auto;
    }

    .marketplace-card-media.has-listing-art::before {
        filter: blur(12px) saturate(.78) brightness(.44);
        opacity: .5;
    }
}

/* =========================================================
   V1.6 — MARKETPLACE SUBCATEGORY MINI-CARDS
   Main category tiles are true toggles. Subcategories use
   compact cards rather than text pills.
========================================================= */

.marketplace-subcategory-rail {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    margin: 2px 0 0;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.marketplace-subcategory-rail::-webkit-scrollbar {
    display: none;
}

.marketplace-subcategory-card {
    flex: 0 0 148px;
    min-width: 0;
    min-height: 68px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    scroll-snap-align: start;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease;
}

.marketplace-subcategory-card:hover,
.marketplace-subcategory-card:focus-visible {
    outline: none;
    border-color: var(--blue-line);
    background: var(--surface-2);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    transform: translateY(-1px);
}

.marketplace-subcategory-card.selected {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.marketplace-subcategory-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.marketplace-subcategory-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}

:root[data-theme="dark"] .marketplace-subcategory-icon img {
    filter: grayscale(1) invert(1);
}

:root[data-theme="dark"] .marketplace-subcategory-card:hover .marketplace-subcategory-icon img,
:root[data-theme="dark"] .marketplace-subcategory-card:focus-visible .marketplace-subcategory-icon img,
:root[data-theme="dark"] .marketplace-subcategory-card.selected .marketplace-subcategory-icon img {
    filter: grayscale(1) invert(1);
}

:root[data-theme="light"] .marketplace-subcategory-icon img {
    filter: grayscale(1) invert(0);
}

.marketplace-subcategory-name,
.marketplace-subcategory-copy strong {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: currentColor;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.marketplace-subcategory-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marketplace-subcategory-copy small {
    color: currentColor;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
    opacity: .64;
}

/* Reinforce that an active main category can be clicked again to clear it. */
.category-tile.selected {
    cursor: pointer;
}

.category-tile.selected:hover,
.category-tile.selected:focus-visible {
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue-line);
}

@media (max-width: 640px) {
    .marketplace-subcategory-rail {
        gap: 8px;
        padding-top: 9px;
        padding-bottom: 12px;
    }

    .marketplace-subcategory-card {
        flex-basis: 132px;
        min-height: 62px;
        padding: 8px 9px;
        gap: 8px;
        border-radius: 12px;
    }

    .marketplace-subcategory-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .marketplace-subcategory-icon img {
        width: 27px;
        height: 27px;
    }

    .marketplace-subcategory-name,
    .marketplace-subcategory-copy strong {
        font-size: .64rem;
    }
}

/* =========================================================
   V1.7 — DISCOVERY RAIL AFFORDANCES + WORKING SORT CONTROL
   Make horizontally scrollable categories obvious to non-technical users.
========================================================= */

.discovery-scroll-shell {
    position: relative;
    isolation: isolate;
}

.discovery-scroll-shell::before,
.discovery-scroll-shell::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}

.discovery-scroll-shell::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg) 6%, rgba(6, 6, 7, 0) 100%);
}

.discovery-scroll-shell::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg) 6%, rgba(6, 6, 7, 0) 100%);
}

:root[data-theme="light"] .discovery-scroll-shell::before {
    background: linear-gradient(90deg, var(--bg) 6%, rgba(245, 245, 242, 0) 100%);
}

:root[data-theme="light"] .discovery-scroll-shell::after {
    background: linear-gradient(270deg, var(--bg) 6%, rgba(245, 245, 242, 0) 100%);
}

.discovery-scroll-shell.can-scroll-left::before,
.discovery-scroll-shell.can-scroll-right::after {
    opacity: 1;
}

.discovery-scroll-button {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.discovery-scroll-button[hidden] {
    display: none;
}

.discovery-scroll-button-left {
    left: -15px;
}

.discovery-scroll-button-right {
    right: -15px;
}

.discovery-scroll-button:hover,
.discovery-scroll-button:focus-visible {
    border-color: var(--blue-line);
    background: var(--blue);
    color: #fff;
    transform: translateY(-50%) scale(1.04);
}

.discovery-scroll-shell .category-rail,
.discovery-scroll-shell .marketplace-subcategory-rail {
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
}

.marketplace-subcategory-discovery {
    margin: 2px 0 0;
    border-bottom: 1px solid var(--line);
}

.marketplace-subcategory-discovery .marketplace-subcategory-rail {
    margin: 0;
    border-bottom: 0;
}

.discovery-scroll-shell-subcategories .discovery-scroll-button {
    width: 34px;
    height: 34px;
    font-size: .9rem;
}

/* The selected tile can be centered by JS without changing page position. */
.category-rail,
.marketplace-subcategory-rail {
    scroll-padding-inline: 48px;
}

@media (max-width: 720px) {
    .discovery-scroll-shell::before,
    .discovery-scroll-shell::after {
        width: 42px;
    }

    .discovery-scroll-button {
        width: 34px;
        height: 34px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    }

    .discovery-scroll-button-left {
        left: 4px;
    }

    .discovery-scroll-button-right {
        right: 4px;
    }

    .discovery-scroll-shell-subcategories .discovery-scroll-button {
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discovery-scroll-shell .category-rail,
    .discovery-scroll-shell .marketplace-subcategory-rail {
        scroll-behavior: auto;
    }
}

/* =========================================================
   AGENT DIRECTORY V1.8
   Equal agent cards + WhatsApp-first human contact
========================================================= */

.agents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.agent-card,
.agent-card-bot {
    grid-column: auto;
    display: grid;
    grid-template-rows: 138px minmax(0, 1fr);
    min-width: 0;
}

.agent-card-brand,
.agent-card-bot .agent-card-brand {
    min-height: 138px;
}

.agent-card-body {
    min-height: 196px;
    display: flex;
    flex-direction: column;
}

.agent-card-body .agent-call-button {
    margin-top: auto;
}

.agent-whatsapp-button {
    border-color: var(--whatsapp-green);
    background: var(--whatsapp-green);
    color: #ffffff;
}

.agent-whatsapp-button:hover,
.agent-whatsapp-button:focus-visible,
.agent-card:hover .agent-whatsapp-button,
.agent-card:focus-within .agent-whatsapp-button {
    border-color: var(--whatsapp-green-hover);
    background: var(--whatsapp-green-hover);
    color: #ffffff;
}

@media (max-width: 1000px) {
    .agents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-card-bot {
        grid-column: auto;
    }
}

@media (max-width: 820px) {
    .agents-grid {
        grid-template-columns: 1fr;
    }

    .agent-card,
    .agent-card-bot {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .agent-card-body {
        min-height: 168px;
    }
}


/* =========================================================
   THEME-AWARE BLOOOW BRAND ASSETS V1.10
   Dedicated light/dark exports replace CSS inversion.
========================================================= */

.blooow-logo-light {
    display: none !important;
}

.blooow-logo-dark {
    display: block !important;
}

:root[data-theme="light"] .blooow-logo-light {
    display: block !important;
}

:root[data-theme="light"] .blooow-logo-dark {
    display: none !important;
}

:root[data-theme="dark"] .blooow-logo-dark {
    display: block !important;
}

:root[data-theme="dark"] .blooow-logo-light {
    display: none !important;
}

/* Theme-specific files already contain the intended contrast. */
.blooow-header-wordmark,
.agent-card-wordmark,
.blooow-header-portrait,
.agent-card-portrait {
    filter: none !important;
}

/* =========================================================
   HOMEPAGE BRAND EMPHASIS V1.11
   Richer discovery/advertise color, stronger homepage brand moment,
   and CTA buttons that fully adopt each card's accent on hover.
========================================================= */

/* Keep the homepage identity more expressive than internal pages. */
.home-page .blooow-header-frame {
    min-height: 116px;
    grid-template-columns: 180px minmax(0, 1fr) 58px;
}

.home-page .blooow-header-brand {
    width: 174px;
    height: 106px;
}

.home-page .blooow-brand-lockup .blooow-header-portrait {
    top: 0;
    width: 72px;
    height: 72px;
}

.home-page .blooow-brand-lockup .blooow-header-wordmark {
    bottom: 2px;
    width: 154px;
}

.home-page .blooow-header-slogan span {
    /* Solid-color fallback first; the clipped gradient is intentionally
       restrained so the editorial slogan remains premium rather than loud. */
    color: var(--text);
    font-size: clamp(1.6rem, 2.15vw, 2.08rem);
    font-weight: 750;
    line-height: .98;
    letter-spacing: -.018em;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    background: linear-gradient(
        100deg,
        var(--blue-strong) 0%,
        var(--text) 47%,
        var(--red-strong) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Discovery card — confident cobalt depth instead of a neutral card with a
   nearly invisible blue tint. */
.home-page .portal-card-business {
    border-color: rgba(90, 125, 255, .42) !important;
    background:
        linear-gradient(145deg, rgba(42, 74, 168, .34) 0%, rgba(18, 24, 42, .94) 44%, rgba(12, 13, 17, .98) 100%) !important;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.home-page .portal-card-business::before {
    background:
        radial-gradient(circle at 8% 5%, rgba(90, 125, 255, .34), transparent 38%),
        radial-gradient(circle at 92% 88%, rgba(49, 88, 223, .13), transparent 42%);
}

/* Advertising card — warm coral/red depth, deliberately distinct from the
   discovery card while using the same visual grammar. */
.home-page .portal-card-advertise {
    border-color: rgba(255, 86, 110, .40) !important;
    background:
        linear-gradient(145deg, rgba(126, 38, 54, .34) 0%, rgba(35, 18, 23, .94) 44%, rgba(12, 13, 17, .98) 100%) !important;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.home-page .portal-card-advertise::before {
    background:
        radial-gradient(circle at 92% 7%, rgba(255, 86, 110, .31), transparent 38%),
        radial-gradient(circle at 12% 88%, rgba(216, 61, 87, .12), transparent 42%);
}

.home-page .portal-card-business:hover,
.home-page .portal-card-business:focus-visible {
    border-color: rgba(90, 125, 255, .78) !important;
    background:
        linear-gradient(145deg, rgba(49, 88, 223, .46) 0%, rgba(18, 25, 46, .97) 48%, rgba(12, 13, 17, 1) 100%) !important;
    box-shadow: 0 26px 66px rgba(34, 71, 190, .18);
}

.home-page .portal-card-advertise:hover,
.home-page .portal-card-advertise:focus-visible {
    border-color: rgba(255, 86, 110, .76) !important;
    background:
        linear-gradient(145deg, rgba(178, 47, 69, .44) 0%, rgba(43, 19, 25, .97) 48%, rgba(12, 13, 17, 1) 100%) !important;
    box-shadow: 0 26px 66px rgba(177, 47, 70, .16);
}

/* Keep content legible on the richer dark-theme card surfaces. */
:root[data-theme="dark"] .home-page .portal-card h1,
:root[data-theme="dark"] .home-page .portal-card p,
:root[data-theme="dark"] .home-page .portal-eyebrow {
    color: #f7f7f8;
}

:root[data-theme="dark"] .home-page .portal-card p {
    color: rgba(247, 247, 248, .78);
}

:root[data-theme="dark"] .home-page .portal-eyebrow {
    color: rgba(247, 247, 248, .70);
}

/* Light mode gets genuinely colored cards rather than pale white cards. */
:root[data-theme="light"] .home-page .portal-card-business {
    border-color: rgba(49, 88, 223, .28) !important;
    background:
        linear-gradient(145deg, #dbe5ff 0%, #edf2ff 45%, #fbfcff 100%) !important;
    box-shadow:
        0 22px 50px rgba(42, 72, 162, .13),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

:root[data-theme="light"] .home-page .portal-card-business::before {
    background:
        radial-gradient(circle at 5% 4%, rgba(49, 88, 223, .18), transparent 38%),
        radial-gradient(circle at 94% 92%, rgba(90, 125, 255, .12), transparent 42%);
}

:root[data-theme="light"] .home-page .portal-card-advertise {
    border-color: rgba(216, 61, 87, .27) !important;
    background:
        linear-gradient(145deg, #ffe0e7 0%, #ffedf1 45%, #fffafb 100%) !important;
    box-shadow:
        0 22px 50px rgba(164, 48, 68, .12),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

:root[data-theme="light"] .home-page .portal-card-advertise::before {
    background:
        radial-gradient(circle at 94% 5%, rgba(216, 61, 87, .17), transparent 38%),
        radial-gradient(circle at 8% 92%, rgba(255, 86, 110, .10), transparent 42%);
}

:root[data-theme="light"] .home-page .portal-card-business:hover,
:root[data-theme="light"] .home-page .portal-card-business:focus-visible {
    border-color: rgba(49, 88, 223, .52) !important;
    background:
        linear-gradient(145deg, #cedcff 0%, #e5ecff 48%, #f8faff 100%) !important;
    box-shadow: 0 28px 62px rgba(42, 72, 162, .18);
}

:root[data-theme="light"] .home-page .portal-card-advertise:hover,
:root[data-theme="light"] .home-page .portal-card-advertise:focus-visible {
    border-color: rgba(216, 61, 87, .50) !important;
    background:
        linear-gradient(145deg, #ffd2dc 0%, #ffe7ec 48%, #fff8fa 100%) !important;
    box-shadow: 0 28px 62px rgba(164, 48, 68, .17);
}

/* Card CTAs are accent-outline buttons at rest. Hovering/focusing the whole
   card turns the CTA into a decisive solid action, exactly matching its role. */
.home-page .portal-card-business .portal-action {
    border-color: rgba(90, 125, 255, .46);
    background: color-mix(in srgb, var(--blue-soft) 72%, transparent);
    color: var(--blue-strong);
}

.home-page .portal-card-advertise .portal-action {
    border-color: rgba(255, 86, 110, .44);
    background: color-mix(in srgb, var(--red-soft) 72%, transparent);
    color: var(--red-strong);
}

.home-page .portal-card-business:hover .portal-action,
.home-page .portal-card-business:focus-visible .portal-action {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(49, 88, 223, .30);
    transform: translateX(2px) translateY(-1px);
}

.home-page .portal-card-advertise:hover .portal-action,
.home-page .portal-card-advertise:focus-visible .portal-action {
    border-color: var(--red);
    background: var(--red);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(216, 61, 87, .27);
    transform: translateX(2px) translateY(-1px);
}

/* Slightly stronger decorative marks now that the card surfaces have enough
   color depth to support them. */
.home-page .portal-card::after {
    opacity: .085;
}

@media (max-width: 640px) {
    .home-page .blooow-header-frame {
        min-height: 96px;
        grid-template-columns: 122px minmax(0, 1fr) 48px;
    }

    .home-page .blooow-header-brand {
        width: 118px;
        height: 88px;
    }

    .home-page .blooow-brand-lockup .blooow-header-portrait {
        width: 54px;
        height: 54px;
    }

    .home-page .blooow-brand-lockup .blooow-header-wordmark {
        width: 112px;
    }

    .home-page .blooow-header-slogan span {
        font-size: clamp(1rem, 4.25vw, 1.22rem);
        line-height: 1;
    }
}

@media (max-width: 420px) {
    .home-page .blooow-header-frame {
        grid-template-columns: 112px minmax(0, 1fr) 44px;
        min-height: 92px;
    }

    .home-page .blooow-header-brand {
        width: 108px;
        height: 84px;
    }

    .home-page .blooow-brand-lockup .blooow-header-portrait {
        width: 50px;
        height: 50px;
    }

    .home-page .blooow-brand-lockup .blooow-header-wordmark {
        width: 102px;
    }

    .home-page .blooow-header-slogan span {
        font-size: clamp(.9rem, 4vw, 1.08rem);
    }
}