/* =====================================================================
   Loop Commercial — listings (DEFAULT structure + neutral chrome)
   =====================================================================
   Isolated from residential styles. This is the default look shipped to
   the whole fleet; a site can override per-surface later via
   partials/commercial/{surface}/ + its own CSS. Per the plugin doctrine
   this file is STRUCTURE + neutral chrome only — brand colour is the
   theme's to layer on top.

   The Sales/Lettings switch is driven entirely by a data-channel attribute
   on .commercial-listings (set by commercial-listings.js). All the show/hide
   is CSS below — the JS just flips the attribute.
   ===================================================================== */

.commercial-listings {
    --cc-radius: 10px;            /* default; a theme can override via its own rule */
    --cc-border: #e3e3e3;
    --cc-muted: #6b7280;
    --cc-ink: #1a1a1a;
    --cc-accent-bg: #1a1a1a;     /* neutral until a theme repaints */
    --cc-accent-ink: #ffffff;
    max-width: 100%;
}

/* --- Search bar ------------------------------------------------------- */
.commercial-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
}
.commercial-search__field { display: flex; flex-direction: column; gap: 6px; }
.commercial-search__field--location { flex: 1 1 320px; }
.commercial-search__field--type { flex: 0 1 260px; }
.commercial-search__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-muted);
}
.commercial-search__input,
.commercial-search__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: inherit;
    color: var(--cc-ink);
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
}
.commercial-search__filters,
.commercial-search__submit {
    appearance: none;
    font: inherit;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: var(--cc-radius);
    cursor: pointer;
}
.commercial-search__filters {
    background: #fff;
    border: 1px solid var(--cc-border);
    color: var(--cc-ink);
}
.commercial-search__submit {
    background: var(--cc-accent-bg);
    border: 1px solid var(--cc-accent-bg);
    color: var(--cc-accent-ink);
}

/* --- Channel tabs (underline style) ---------------------------------- */
.commercial-listings__tabs {
    display: flex;
    gap: 28px;
    margin: 24px 0 28px;
    border-bottom: 1px solid var(--cc-border);
}
.commercial-switch__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cc-muted);
    font: inherit;
    font-weight: 600;
    padding: 10px 2px;
    margin-bottom: -1px;                     /* sit the underline on the row line */
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.commercial-switch__btn:hover { color: var(--cc-ink); }
.commercial-switch__btn[aria-selected="true"] {
    color: var(--cc-ink);
    border-bottom-color: var(--cc-ink);
}
/* Colour the active archive tab by channel (sale = blue, let = green) — same
   language as the cards' badges + the single-page switch. */
.commercial-listings__tabs .commercial-switch__btn[data-channel="sale"][aria-selected="true"] {
    color: var(--cc-pill-sale-ink, #1A5CEF);
    border-bottom-color: var(--cc-pill-sale-ink, #1A5CEF);
}
.commercial-listings__tabs .commercial-switch__btn[data-channel="let"][aria-selected="true"] {
    color: var(--cc-pill-let-ink, #1C806C);
    border-bottom-color: var(--cc-pill-let-ink, #1C806C);
}

/* --- Results header (title + count · sort) ---------------------------- */
.commercial-listings__results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 24px;
}
.commercial-listings__title {
    margin: 0 0 4px;
    line-height: 1.15;
}
.commercial-listings__count {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.95rem;
}
.commercial-listings__sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.commercial-listings__sort-label {
    font-size: 0.9rem;
    color: var(--cc-muted);
}
.commercial-listings__sort-select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    padding: 8px 30px 8px 12px;
    color: var(--cc-ink);
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    cursor: pointer;
}

/* --- Grid ------------------------------------------------------------- */
.commercial-listings__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

/* --- Card ------------------------------------------------------------- */
.commercial-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.commercial-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}
.commercial-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

/* Media — image with the availability badge (top-left) + units pill (bottom-left) */
.commercial-card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    background-color: #eef0f2;   /* shows while a map/photo loads, or if neither resolves */
    background-size: cover;
    background-position: center;
}
.commercial-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    /* Family colours: the wrapper sets --cc-pill-* inline (theme-overridable via
       the loop_commercial/pill_colours filter); these literals are the stock
       fallback so it can never be unstyled / fatal. */
    background: var(--cc-pill-sale-bg, #F4F7FE);
    color: var(--cc-pill-sale-ink, #1A5CEF);
}
.commercial-card__badge--sale { background: var(--cc-pill-sale-bg, #F4F7FE); color: var(--cc-pill-sale-ink, #1A5CEF); }
.commercial-card__badge--let  { background: var(--cc-pill-let-bg, #F5FDFB);  color: var(--cc-pill-let-ink, #1C806C); }
.commercial-card__badge--both { background: var(--cc-pill-both-bg, #ece3fb); color: var(--cc-pill-both-ink, #4a2b86); }

/* Classification badge — top-right of the media, neutral chip (distinct from the
   sale/let availability badge top-left). Shows the classification-type label. */
.commercial-card__class-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.commercial-card__units {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--cc-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Head — price title, then address + full address */
.commercial-card__head { padding: 16px 16px 14px; }
.commercial-card__price {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cc-ink);
}
.commercial-card__price-from { font-size: 0.95rem; font-weight: 600; color: var(--cc-muted); }
.commercial-card__price-qual { font-size: 0.8rem; font-weight: 500; color: var(--cc-muted); }
.commercial-card__address {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cc-ink);
}
.commercial-card__addr-full { margin: 0; font-size: 0.85rem; color: var(--cc-muted); }

/* Body — Size | Tenure, ruled top + bottom (the "lines between areas") */
.commercial-card__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    padding: 14px 16px;
    border-top: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border);
}
.commercial-card__spec { display: flex; flex-direction: column; gap: 2px; }
.commercial-card__spec-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-muted);
}
.commercial-card__spec-value { font-size: 0.95rem; color: var(--cc-ink); }

/* Footer — type · location, and View → */
.commercial-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-top: auto;
}
.commercial-card__tags { font-size: 0.85rem; color: var(--cc-muted); }
.commercial-card__view { font-weight: 600; color: var(--cc-ink); white-space: nowrap; }
.commercial-card__view-arrow { display: inline-block; transition: transform 0.15s ease; }
.commercial-card:hover .commercial-card__view-arrow { transform: translateX(3px); }

/* --- Channel show/hide (pure CSS, driven by [data-channel]) ----------- */
/* In "sale" view: hide let-only cards, and hide the let price on dual cards. */
.commercial-listings[data-channel="sale"] .commercial-card[data-for-sale="0"],
.commercial-listings[data-channel="sale"] .commercial-card__price--let {
    display: none;
}
/* In "let" view: hide sale-only cards, and hide the sale price on dual cards. */
.commercial-listings[data-channel="let"] .commercial-card[data-for-rent="0"],
.commercial-listings[data-channel="let"] .commercial-card__price--sale {
    display: none;
}

.commercial-listings__notice,
.commercial-listings__empty {
    color: var(--cc-muted);
}
.commercial-listings__empty {
    text-align: center;
    padding: 40px 20px;
}
.commercial-listings__empty p { margin: 0 0 16px; }
.commercial-listings__clear-filters {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--cc-radius);
    background: var(--cc-accent-bg, #1a1a1a);
    color: var(--cc-accent-ink, #fff);
    border: 1px solid var(--cc-accent-bg, #1a1a1a);
    cursor: pointer;
}
.commercial-listings__clear-filters:hover { filter: brightness(1.15); }

/* --- Archive page wrapper (the Commercial Listings page template) ----- */
/* padding-top clears a fixed site header — commercial-page-clear.js measures it
   at runtime and sets --cc-header-clear (80px fallback before the script runs).
   Theme-agnostic: works whatever the theme's header height/markup. */
.commercial-archive {
    padding-top: var(--cc-header-clear, 80px);
}
.commercial-archive__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px 64px;
}
.commercial-archive__header { margin: 0 0 20px; }
.commercial-archive__title { margin: 0; }

/* =====================================================================
   Single listing (/listing/{id}/{slug}/) — DEFAULT structure + neutral chrome.
   Same doctrine: layout + neutral tones only; a surface repaints via its own
   templates/commercial/{surface}/single-listing.php + CSS.
   ===================================================================== */
.commercial-single {
    --cc-radius: 10px;
    --cc-border: #e3e3e3;
    --cc-muted: #6b7280;
    --cc-ink: #1a1a1a;
    --cc-soft: #f6f7f8;
    --cc-accent-bg: #1a1a1a;
    --cc-accent-ink: #ffffff;
    --cc-cta-bg: #4a4a4a;      /* neutral default; the theme repaints it via SCSS */
    --cc-cta-ink: #ffffff;
    --cc-cta-bg-hover: #2f2f2f;
    max-width: 1120px;
    margin: 0 auto;
    /* padding-top clears a fixed site header (commercial-page-clear.js sets
       --cc-header-clear; 80px fallback). Same treatment as the archive. */
    padding: var(--cc-header-clear, 80px) 16px 64px;
    color: var(--cc-ink);
}

.commercial-single__topbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; }
.commercial-single__back { font-size: 0.9rem; color: var(--cc-muted); text-decoration: none; }
.commercial-single__back:hover { color: var(--cc-ink); }

/* --- Gallery --------------------------------------------------------- */
.commercial-single__gallery {
    position: relative;
    margin: 0 0 28px;
    border-radius: var(--cc-radius);
    overflow: hidden;
    background: #eef0f2;
}
.commercial-single__hero { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.commercial-single__hero--placeholder { aspect-ratio: 16 / 8; }
.commercial-single__gallery-badge {
    position: absolute; top: 14px; left: 14px;
    font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
    background: var(--cc-pill-sale-bg, #F4F7FE); color: var(--cc-pill-sale-ink, #1A5CEF);
}
.commercial-single__gallery-stage { position: relative; }

/* "View all N photos" — top-right pill. */
.commercial-single__gallery-viewall {
    position: absolute; top: 14px; right: 14px;
    font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border: 0; border-radius: 999px;
    background: rgba(20,24,28,0.82); color: #fff; cursor: pointer;
}
.commercial-single__gallery-viewall:hover { background: rgba(20,24,28,0.95); }

/* Prev/next arrows. */
.commercial-single__gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(20,24,28,0.55); color: #fff; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.commercial-single__gallery-nav:hover { background: rgba(20,24,28,0.8); }
.commercial-single__gallery-nav--prev { left: 14px; }
.commercial-single__gallery-nav--next { right: 14px; }

/* 2x2 thumbnail cluster, bottom-right. */
.commercial-single__gallery-thumbs {
    position: absolute; bottom: 16px; right: 16px;
    display: grid; grid-template-columns: repeat(2, 56px); grid-auto-rows: 44px; gap: 8px;
}
.commercial-single__gallery-thumb {
    padding: 0; border: 2px solid #fff; border-radius: 6px; cursor: pointer;
    background-color: #ccc; background-size: cover; background-position: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.commercial-single__gallery-thumb.is-active { border-color: var(--cc-cta-bg, #4a4a4a); }

/* Dots. */
.commercial-single__gallery-dots {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
}
.commercial-single__gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; }
.commercial-single__gallery-dot.is-active { background: #fff; }

@media (max-width: 560px) {
    .commercial-single__gallery-thumbs { display: none; }  /* too tight on phones */
}

/* --- Lightbox (View all photos) -------------------------------------- */
body.commercial-lightbox-open { overflow: hidden; }
.commercial-lightbox {
    position: fixed; inset: 0; z-index: 100000; display: none;
    flex-direction: column; background: #10161b; color: #fff;
}
.commercial-lightbox.is-open { display: flex; }
.commercial-lightbox__bar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.commercial-lightbox__back { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; }
.commercial-lightbox__meta { display: flex; flex-direction: column; line-height: 1.2; }
.commercial-lightbox__title { font-weight: 700; }
.commercial-lightbox__sub { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.commercial-lightbox__actions { margin-left: auto; display: flex; gap: 8px; }
.commercial-lightbox__action {
    font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 999px; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3); color: #fff;
}
.commercial-lightbox__action--primary { border-color: transparent; }
:where(.commercial-lightbox__action--primary) { background: var(--cc-cta-bg, #4a4a4a); color: var(--cc-cta-ink, #ffffff); }
.commercial-lightbox__stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 16px 72px; min-height: 0; }
/* Fill the available stage (scaling up as needed) while preserving aspect
   ratio — each photo shows as big as it can within the modal. */
.commercial-lightbox__img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.commercial-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 20px;
}
.commercial-lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.commercial-lightbox__nav--prev { left: 16px; }
.commercial-lightbox__nav--next { right: 16px; }
.commercial-lightbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.commercial-lightbox__gallerybtn { background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff; font: inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.commercial-lightbox__counter { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.commercial-lightbox__footnav { display: flex; gap: 8px; }
.commercial-lightbox__footnav button { background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.commercial-lightbox__grid {
    position: absolute; inset: 64px 0 64px 0; overflow-y: auto; padding: 20px;
    background: #10161b;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start;
}
/* display:grid above overrides the UA [hidden]{display:none}; restore it so the
   grid only shows when the Gallery toggle opens it (else it covers the image). */
.commercial-lightbox__grid[hidden] { display: none; }
.commercial-lightbox__gridimg { height: 130px; border: 0; border-radius: 8px; cursor: pointer; background-color: #333; background-size: cover; background-position: center; }
@media (max-width: 560px) {
    .commercial-lightbox__stage { padding: 8px 12px; }
    .commercial-lightbox__nav { display: none; }
    .commercial-lightbox__actions .commercial-lightbox__action { padding: 8px 12px; }
}

/* --- Two-column layout (main + sticky contact aside) ----------------- */
.commercial-single__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 901px) {
    /* Was 320px — too narrow for a phone number + email on one line (Kane,
       2026-07-31, from a real agent's details wrapping to two lines). 360px
       gives the contact card ~324px of inner width after its 18px padding
       either side, enough for a realistic phone+email combo; a genuinely long
       one still wraps gracefully at the middle dot rather than mid-word,
       since the line is centred (see .commercial-single__contact-lines). */
    .commercial-single__layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .commercial-single__aside { position: sticky; top: calc(var(--cc-header-clear, 90px) + 16px); }
}
.commercial-single__main { min-width: 0; }

/* --- Header ---------------------------------------------------------- */
.commercial-single__header { margin: 0 0 8px; padding: 0 0 20px; border-bottom: 1px solid var(--cc-border); }
.commercial-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.commercial-single__tag {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    background: var(--cc-soft); color: var(--cc-muted); border: 1px solid var(--cc-border);
}
/* Still a real <h1> (one per page, right for SEO/accessibility) — Kane,
   2026-07-31, wants it SIZED like the theme's Heading 3, not its default H1
   scale. Values copied from g2com's own compiled .h3 (assets/css/above.min.css)
   rather than guessed, so this tracks the theme's actual heading 3 exactly:
   600 weight, 1.2 line-height, -0.015em tracking, and the same fluid clamp
   between its mobile and desktop sizes. */
.commercial-single__title {
    margin: 0 0 6px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-size: clamp(2.1875rem, calc(1.9375rem + 1.25vw), 3.0625rem);
}
.commercial-single__addr { margin: 0 0 16px; color: var(--cc-muted); }
.commercial-single__pin { color: var(--cc-muted); font-size: 0.7em; vertical-align: middle; }

.commercial-single__prices { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 18px; }
.commercial-single__price-label {
    display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--cc-muted); margin: 0 0 2px;
}
.commercial-single__price-fig { font-size: 1.4rem; font-weight: 700; }

.commercial-single__specrow { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }
.commercial-single__specitem { margin: 0; }
.commercial-single__specitem dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-muted); }
.commercial-single__specitem dd { margin: 2px 0 0; font-weight: 600; }

/* --- Sections -------------------------------------------------------- */
.commercial-single__section { margin: 28px 0 0; }
.commercial-single__h2 { font-size: 1.15rem; margin: 0 0 14px; }
.commercial-single__count { color: var(--cc-muted); font-weight: 400; }

/* Units table */
.commercial-single__table-wrap { overflow-x: auto; }
.commercial-single__table { width: 100%; border-collapse: collapse; }
.commercial-single__table th, .commercial-single__table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cc-border); white-space: nowrap; }
.commercial-single__table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cc-muted); background: var(--cc-soft); }
.commercial-single__pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cc-pill-both-bg, #ece3fb); color: var(--cc-pill-both-ink, #4a2b86); }
.commercial-single__avail { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cc-soft); color: var(--cc-muted); }
.commercial-single__avail--available { background: #e6f4e6; color: #1e5b28; }
.commercial-single__avail--under_offer { background: #fbf0d8; color: #7a5510; }
.commercial-single__avail--let, .commercial-single__avail--sold { background: #efefef; color: #666; }

/* Tick lists (amenities + key features) */
.commercial-single__ticklist {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 28px;
}
.commercial-single__ticklist li { position: relative; padding-left: 24px; }
.commercial-single__ticklist li::before {
    content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cc-ink); font-weight: 700;
}

.commercial-single__desc { line-height: 1.6; }
.commercial-single__desc p { margin: 0 0 12px; }

/* Accordions (native <details>) */
.commercial-single__accordion { border-top: 1px solid var(--cc-border); }
.commercial-single__accordion summary {
    list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
}
.commercial-single__accordion summary::-webkit-details-marker { display: none; }
.commercial-single__accordion summary::after { content: "\25BE"; color: var(--cc-muted); transition: transform 0.15s ease; }
.commercial-single__accordion[open] summary::after { transform: rotate(180deg); }
.commercial-single__accordion-body { padding: 0 0 16px; color: var(--cc-muted); line-height: 1.6; }

/* Brochure */
.commercial-single__brochure-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px; background: var(--cc-soft); border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
}
.commercial-single__brochure-name { font-weight: 600; }

/* Location map */
.commercial-single__map { margin-top: 12px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); overflow: hidden; }
.commercial-single__map img { display: block; width: 100%; height: auto; }

/* About the agent */
.commercial-single__agentrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; background: var(--cc-soft); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
.commercial-single__agent-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.commercial-single__agent-name { margin: 0; font-weight: 700; }
.commercial-single__agent-role { margin: 0; font-size: 0.85rem; color: var(--cc-muted); }
.commercial-single__agentrow > .commercial-single__btn { margin-left: auto; }

/* --- Sticky contact card (aside) ------------------------------------- */
.commercial-single__contact {
    border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
    background: #fff; padding: 18px; box-shadow: 0 0 0 1px rgba(16,24,40,0.03), 0 6px 20px rgba(16,24,40,0.08);
}
.commercial-single__contact-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
/* Divider sits ABOVE this line only (under the agent name/role) — no rule
   below it into the buttons; Kane, 2026-07-30: "dont add lines where you
   think there are so... like underneath the type before the buttons". */
.commercial-single__contact-summary { margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--cc-border); color: var(--cc-muted); font-size: 0.9rem; }
.commercial-single__actions { display: flex; flex-direction: column; gap: 8px; }
/* Centred either way — with just an email (no phone) this is the only thing on
   the line, so text-align: center places it in the middle with no extra
   markup needed for that case. Deliberately understated (no underline, duller
   than the phone number) — Kane, 2026-07-31: "we want people using the system
   CRM buttons really", so this direct-contact fallback shouldn't outcompete
   Request a viewing / Request details / Request a callback / WhatsApp above it. */
.commercial-single__contact-lines { margin: 12px 0 0; font-size: 0.9rem; color: var(--cc-ink); text-align: center; }
.commercial-single__contact-lines a { color: inherit; text-decoration: none; }
.commercial-single__contact-lines .commercial-single__contact-email { color: var(--cc-muted); }

/* --- Buttons --------------------------------------------------------- */
.commercial-single__btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 600; padding: 12px 18px; border-radius: var(--cc-radius);
    border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.commercial-single__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Colour here is a FALLBACK ONLY. Commercial buttons now render with the
   theme's own classes (button button--primary / --secondary) via
   loop_commercial_button_classes(), so appearance comes from Giro Settings →
   Buttons like every other button on the site. These :where() rules are zero
   specificity, so they only ever apply on a build with no .button system and
   can never out-rank a theme rule.

   The animated ::before sweep was removed in 1.5.298: it painted at
   z-index: -1, so any theme background sat on top of it and the page CTA went
   dark-on-dark. Hover is now a plain background/ink change — and it sets BOTH,
   because setting only the background made an inverting theme hover impossible
   to express. These are
   defaults to stop a button being unstyled, not opinions to be fought. */
:where(.commercial-single__btn--primary) { background: var(--cc-cta-bg, #4a4a4a); color: var(--cc-cta-ink, #ffffff); }
:where(.commercial-single__btn--primary:hover),
:where(.commercial-single__btn--primary:focus-visible) { background: var(--cc-cta-bg-hover, #2f2f2f); color: var(--cc-cta-ink-hover, #ffffff); }
:where(.commercial-single__btn--ghost) { background: #fff; border-color: var(--cc-border); color: var(--cc-ink); }
:where(.commercial-single__btn--ghost:hover),
:where(.commercial-single__btn--ghost:focus-visible) { background: var(--cc-cta-bg-hover, #2f2f2f); border-color: var(--cc-cta-bg-hover, #2f2f2f); color: var(--cc-cta-ink-hover, #ffffff); }
/* g2com's own .button--whatsapp hover darkens the green (#1ebe5a) rather than
   sweeping black — kept brand-consistent here too rather than folding it into
   the matt-black sweep above. */
.commercial-single__btn--whatsapp { background: #25d366; color: #fff; font-weight: 700; }
.commercial-single__btn--whatsapp:hover,
.commercial-single__btn--whatsapp:focus-visible { background: #1ebe5a; }
.commercial-single__btn--dark { background: var(--cc-accent-bg); color: var(--cc-accent-ink); }
.commercial-single__btn--dark:hover,
.commercial-single__btn--dark:focus-visible { background: #1a1917; color: #fff; }

/* Enquiry card actions (Request a viewing / Request details / Request a
   callback / WhatsApp) — full-width, more rounded than the base button,
   matching the eXp reference (Kane, 2026-07-30). Scoped to this card only,
   so it doesn't reshape the "Contact agent" / lightbox buttons elsewhere. */
.commercial-single__enquiry-actions .commercial-single__btn,
.commercial-single__contact > .commercial-single__btn--whatsapp {
    width: 100%; border-radius: 14px; padding: 14px 18px;
}

/* Sales/Lettings switch in the contact card (both-listings only) — a compact
   segmented control (overrides the archive's underline-tab styling). */
.commercial-single__channel-switch {
    display: flex; gap: 4px; padding: 4px; margin: 0 0 14px;
    border: 1px solid var(--cc-border); border-radius: 999px;
}
.commercial-single__channel-switch .commercial-switch__btn {
    flex: 1; margin: 0; border: 0; border-radius: 999px;
    padding: 8px 12px; background: transparent; color: var(--cc-muted); font: inherit; font-weight: 600; cursor: pointer;
}
.commercial-single__channel-switch .commercial-switch__btn[aria-selected="true"] {
    background: var(--cc-accent-bg); color: var(--cc-accent-ink);
}
/* Colour-code the active tab by channel (same sale/let colours as the unit
   pills), so the switch itself signals sale vs let at a glance. */
.commercial-single__channel-switch .commercial-switch__btn[data-channel="sale"][aria-selected="true"] {
    background: var(--cc-pill-sale-bg, #F4F7FE); color: var(--cc-pill-sale-ink, #1A5CEF);
}
.commercial-single__channel-switch .commercial-switch__btn[data-channel="let"][aria-selected="true"] {
    background: var(--cc-pill-let-bg, #F5FDFB); color: var(--cc-pill-let-ink, #1C806C);
}
.commercial-single__enquiry-context { margin: 0 0 10px; font-size: 0.85rem; color: var(--cc-muted); }

/* Grey out units not in the active channel — so flicking For sale / To let
   instantly shows what's available. "both" units stay lit in both modes. */
.commercial-single[data-channel="sale"] .commercial-single__unit[data-marketed="let"],
.commercial-single[data-channel="sale"] .commercial-single__unit-detail[data-marketed="let"],
.commercial-single[data-channel="let"] .commercial-single__unit[data-marketed="sale"],
.commercial-single[data-channel="let"] .commercial-single__unit-detail[data-marketed="sale"] {
    opacity: 0.4;
}
.commercial-single[data-channel="sale"] .commercial-single__unit[data-marketed="let"],
.commercial-single[data-channel="let"] .commercial-single__unit[data-marketed="sale"] {
    transition: opacity 0.15s ease;
}

/* Colour-code the two prices by channel (sale = blue, let = teal): a channel
   accent bar + coloured label, so the switch highlights one or the other by
   colour — and the inactive one greys, so the active price clearly stands out. */
.commercial-single__price {
    padding-left: 12px;
    border-left: 3px solid transparent;
    transition: opacity 0.15s ease;
}
.commercial-single__price[data-channel="sale"] { border-left-color: var(--cc-pill-sale-border, #9DB9F8); }
.commercial-single__price[data-channel="let"]  { border-left-color: var(--cc-pill-let-border, #7EE5D1); }
.commercial-single__price[data-channel="sale"] .commercial-single__price-label { color: var(--cc-pill-sale-ink, #1A5CEF); }
.commercial-single__price[data-channel="let"]  .commercial-single__price-label { color: var(--cc-pill-let-ink, #1C806C); }

/* Grey the header price for the channel that isn't active (both-listings). */
.commercial-single[data-channel="sale"] .commercial-single__price[data-channel="let"],
.commercial-single[data-channel="let"] .commercial-single__price[data-channel="sale"] {
    opacity: 0.4;
}

/* Expandable unit rows */
.commercial-single__table--units .commercial-single__unit { cursor: pointer; }
.commercial-single__table--units .commercial-single__unit:hover { background: var(--cc-soft); }
.commercial-single__unit-chevcell { width: 36px; text-align: right; }
.commercial-single__unit-chev { display: inline-block; color: var(--cc-muted); transition: transform 0.15s ease; }
.commercial-single__unit.is-open .commercial-single__unit-chev { transform: rotate(180deg); }
.commercial-single__unit-detail > td { background: var(--cc-soft); padding: 16px 14px; }
.commercial-single__unit-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px;
}
.commercial-single__unit-field { display: flex; flex-direction: column; gap: 2px; }
.commercial-single__unit-fieldlabel { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cc-muted); }
.commercial-single__unit-fieldval { font-weight: 600; }
.commercial-single__unit-subhead { margin: 18px 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cc-muted); }
.commercial-single__unit-cta { margin-top: 14px; }

/* =====================================================================
   Sale / Let / Both CHIPS — designer spec (sale = blue, let = teal, both =
   purple). Applied wherever the family modifier appears: card availability
   badge, gallery badge, header tag, unit "Marketed" pill. Compound selectors
   so the chip colour + border + radius win over each element's own base styles;
   colours come from the theme-overridable --cc-pill-* vars (stock fallbacks are
   the designer values). This block is authoritative — keep it last.
   ===================================================================== */
.commercial-card__badge--sale,
.commercial-single__gallery-badge.commercial-card__badge--sale,
.commercial-single__tag.commercial-card__badge--sale,
.commercial-single__pill.commercial-card__badge--sale {
    background: var(--cc-pill-sale-bg, #F4F7FE);
    color: var(--cc-pill-sale-ink, #1A5CEF);
    border: 1px solid var(--cc-pill-sale-border, #9DB9F8);
    border-radius: 20px;
}
.commercial-card__badge--let,
.commercial-single__gallery-badge.commercial-card__badge--let,
.commercial-single__tag.commercial-card__badge--let,
.commercial-single__pill.commercial-card__badge--let {
    background: var(--cc-pill-let-bg, #F5FDFB);
    color: var(--cc-pill-let-ink, #1C806C);
    border: 1px solid var(--cc-pill-let-border, #7EE5D1);
    border-radius: 20px;
}
.commercial-card__badge--both,
.commercial-single__gallery-badge.commercial-card__badge--both,
.commercial-single__tag.commercial-card__badge--both,
.commercial-single__pill.commercial-card__badge--both {
    background: var(--cc-pill-both-bg, #ece3fb);
    color: var(--cc-pill-both-ink, #4a2b86);
    border: 1px solid var(--cc-pill-both-border, #c9b6f0);
    border-radius: 20px;
}

/* =====================================================================
   Enquiry form (sticky contact card). Structural + neutral chrome only —
   the theme/surface owns brand colour (buttons reuse the existing
   .commercial-single__btn* classes, so they inherit whatever the theme
   already styles those as). Kept low-specificity so a theme can override.
   ===================================================================== */
/* Three stacked entry-point buttons in the contact card ("Request a viewing" /
   "Request details" / "Request a callback") — all open the same modal below;
   see commercial-enquiry.js. */
.commercial-single__enquiry-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.commercial-single__contact > .commercial-single__btn--whatsapp {
    margin-top: 10px;
}
.commercial-single__enquiry {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.commercial-single__enquiry-row {
    display: flex;
    gap: 10px;
}
.commercial-single__enquiry-row .commercial-single__field {
    flex: 1 1 0;
    min-width: 0;
}
.commercial-single__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}
.commercial-single__field > span {
    font-weight: 500;
    opacity: 0.85;
}
.commercial-single__field input,
.commercial-single__field select,
.commercial-single__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    color: inherit;
}
.commercial-single__field textarea {
    resize: vertical;
    min-height: 68px;
}
.commercial-single__field input:focus,
.commercial-single__field select:focus,
.commercial-single__field textarea:focus {
    outline: 2px solid rgba(26, 92, 239, 0.35); /* neutral focus ring; theme may override */
    outline-offset: 1px;
    border-color: rgba(26, 92, 239, 0.55);
}
/* Same neutral grey default as the contact form's submit. It used to borrow
   .commercial-single__btn--primary, which meant the listing page's CTA styling
   could not be changed without changing this form too. */
.commercial-single__enquiry-submit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--cc-radius);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
:where(.commercial-single__enquiry-submit) {
    background: var(--cc-cta-bg, #4a4a4a);
    color: var(--cc-cta-ink, #ffffff);
}
:where(.commercial-single__enquiry-submit:hover),
:where(.commercial-single__enquiry-submit:focus-visible) {
    background: var(--cc-cta-bg-hover, #2f2f2f);
    color: var(--cc-cta-ink-hover, #ffffff);
}
.commercial-single__enquiry-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}
/* Honeypot — visually gone, still in the DOM for bots to fill. */
.commercial-single__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Inline status line under the submit button. */
.commercial-single__enquiry-status {
    margin: 4px 0 0;
    font-size: 0.85rem;
}
.commercial-single__enquiry-status[data-kind="pending"] { opacity: 0.75; }
.commercial-single__enquiry-status[data-kind="success"] { color: #1C806C; }
.commercial-single__enquiry-status[data-kind="error"]   { color: #b3261e; }

/* Submitted state: fields + button gone, the status line becomes the whole
   result rather than a small line under an empty, still-visible form (Kane,
   2026-07-31). Only reachable on success — the JS only adds .is-submitted
   there, so an error still leaves the fields in place to fix and retry. */
.commercial-single__enquiry.is-submitted [data-enquiry-fields],
.commercial-single__enquiry.is-submitted [data-enquiry-submit] {
    display: none;
}
.commercial-single__enquiry.is-submitted .commercial-single__enquiry-status {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}
.commercial-single__enquiry.is-submitted .commercial-single__enquiry-status::before {
    content: '\2713';
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #1C806C;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

/* ============================================================================
   General contact form ([commercial_contact_form]) — not tied to a listing.
   STRUCTURE ONLY: layout, field sizing, honeypot hiding. No brand colour, no
   card chrome — the theme's Contact module owns the surrounding panel and all
   colour, since this drops INTO a theme module rather than standing alone.
   ========================================================================== */
.commercial-contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* The fields wrapper had no layout of its own until 1.5.292, so field groups
   inside it stacked with nothing between them — an input's bottom edge sat
   directly against the next label. 12px matches the rhythm the form and rows
   already use. */
.commercial-contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.commercial-contact-form__row {
    display: flex;
    gap: 12px;
}
.commercial-contact-form__row .commercial-contact-form__field {
    flex: 1 1 0;
    min-width: 0;
}
.commercial-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}
.commercial-contact-form__field > span {
    font-weight: 500;
    opacity: 0.85;
}
.commercial-contact-form__field input,
.commercial-contact-form__field select,
.commercial-contact-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    color: inherit;
}
.commercial-contact-form__field textarea {
    resize: vertical;
    min-height: 96px;
}
/* Wrapper around the "How can we help?" <select>, so a theme can hang its own
   arrow on ::after without having to restyle the control. The native arrow is
   left in place deliberately — replacing it means shipping a colour, and
   colour on this surface is the theme's. */
.commercial-contact-form__select-wrap {
    position: relative;
    display: block;
}
.commercial-contact-form__select-wrap select {
    /* Room on the right for a theme-supplied arrow, if it adds one. */
    padding-right: 34px;
}
/* ----------------------------------------------------------------------------
   Stacked layout (layout="stacked", the auctions preset). Roomier spacing and
   stronger labels, matching the commercial design. Kept behind the modifier so
   the general contact form already live across the fleet does not move.
   Spacing and weight only — still no brand colour from here.
   -------------------------------------------------------------------------- */
.commercial-contact-form--stacked {
    /* Spaces __fields, the button and the privacy line from each other. */
    gap: 24px;
    /* No horizontal padding here on purpose. The card owns its inset — g2com's
       .com-contact-card--form is a flat 32px on all four sides — so padding
       from this side would only make it uneven. */
}
/* Base __fields is now a flex column (see above), so this only widens the gap.
   Bottom-of-input to next-label is the measurement the design is set by. */
.commercial-contact-form--stacked .commercial-contact-form__fields {
    gap: 24px;
}
.commercial-contact-form--stacked .commercial-contact-form__row {
    gap: 16px;
}
.commercial-contact-form--stacked .commercial-contact-form__field {
    gap: 8px;
    font-size: 0.95rem;
}
/* The label weight was already 500; opacity was what made it look lighter
   than the design. */
.commercial-contact-form--stacked .commercial-contact-form__field > span {
    opacity: 1;
}
.commercial-contact-form--stacked .commercial-contact-form__field input,
.commercial-contact-form--stacked .commercial-contact-form__field select,
.commercial-contact-form--stacked .commercial-contact-form__field textarea {
    padding: 12px 14px;
    font-size: 0.95rem;
}
.commercial-contact-form--stacked .commercial-contact-form__field textarea {
    min-height: 128px;
}

/* ----------------------------------------------------------------------------
   Per-field validation errors — shared by all four commercial forms, so these
   are deliberately NOT prefixed to one form's block. The handler names the
   field and writes the message; commercial-form-errors.js places it here.
   Red only, no other colour: the theme owns the rest of the surface.
   -------------------------------------------------------------------------- */
.commercial-form-error {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #b3261e;
}
.has-error input,
.has-error select,
.has-error textarea {
    border-color: #b3261e;
}

/* Privacy line under the submit button — opt-in via privacy="yes". */
.commercial-contact-form__privacy {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.72;
}
/* Neutral grey default, not a brand colour — enough that the button is never
   unstyled, and repainted by the theme either through --cc-cta-bg/--cc-cta-ink
   or by targeting this identifier. Hover is included so the theme has a state
   to override rather than one to invent. It no longer carries
   .commercial-single__btn--primary: that class is shared with the listing
   page's CTA, so the form could not be restyled without moving that too. */
.commercial-contact-form__submit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--cc-radius);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Zero specificity, so any theme rule wins no matter which stylesheet loads
   last. The grey is only here so the button is never unstyled. */
:where(.commercial-contact-form__submit) {
    background: var(--cc-cta-bg, #4a4a4a);
    color: var(--cc-cta-ink, #ffffff);
}
:where(.commercial-contact-form__submit:hover),
:where(.commercial-contact-form__submit:focus-visible) {
    background: var(--cc-cta-bg-hover, #2f2f2f);
    color: var(--cc-cta-ink-hover, #ffffff);
}
.commercial-contact-form__submit[disabled] {
    opacity: 0.6;
    cursor: default;
}
/* Honeypot — visually gone, still in the DOM for bots to fill. */
.commercial-contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.commercial-contact-form__status {
    margin: 0;
    font-size: 0.85rem;
}
.commercial-contact-form__status[data-kind="pending"] { opacity: 0.75; }
.commercial-contact-form__status[data-kind="success"] { color: #1C806C; }
.commercial-contact-form__status[data-kind="error"]   { color: #b3261e; }

/* Submitted state — same treatment as the listing enquiry modal above. */
.commercial-contact-form.is-submitted [data-contact-fields],
.commercial-contact-form.is-submitted [data-contact-submit],
.commercial-contact-form.is-submitted .commercial-contact-form__privacy {
    display: none;
}
.commercial-contact-form.is-submitted .commercial-contact-form__status {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}
.commercial-contact-form.is-submitted .commercial-contact-form__status::before {
    content: '\2713';
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #1C806C;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

/* ============================================================================
   Newsletter signup ([commercial_join_mailing_list]) — not tied to a listing.
   STRUCTURE ONLY, same philosophy as the contact form above: this drops into
   a theme's own newsletter panel (logo, heading, background), which owns the
   surrounding chrome and colour. The email+button row and the underline
   styling below are a workable DEFAULT so it doesn't look broken before a
   theme restyles it (Kane, 2026-07-31: "we can style it on the theme side") —
   not an attempt to exactly match any one theme's design.
   ========================================================================== */
.commercial-mailing-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.commercial-mailing-list__field {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding-bottom: 6px;
}
.commercial-mailing-list__field input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: inherit;
    padding: 8px 0;
    outline: none;
}
.commercial-mailing-list__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
:where(.commercial-mailing-list__submit) {
    background: var(--cc-cta-bg, #4a4a4a);
    color: var(--cc-cta-ink, #ffffff);
}
.commercial-mailing-list__submit svg { width: 18px; height: 18px; }
.commercial-mailing-list__submit[disabled] {
    opacity: 0.6;
    cursor: default;
}
.commercial-mailing-list__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}
.commercial-mailing-list__consent input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
}
/* Honeypot — visually gone, still in the DOM for bots to fill. */
.commercial-mailing-list__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.commercial-mailing-list__status {
    margin: 0;
    font-size: 0.85rem;
}
.commercial-mailing-list__status[data-kind="pending"] { opacity: 0.75; }
.commercial-mailing-list__status[data-kind="success"] { color: #1C806C; }
.commercial-mailing-list__status[data-kind="error"]   { color: #b3261e; }

/* Submitted state — same treatment as the other two commercial forms. */
.commercial-mailing-list.is-submitted [data-mailing-list-fields],
.commercial-mailing-list.is-submitted [data-mailing-list-submit] {
    display: none;
}
.commercial-mailing-list.is-submitted .commercial-mailing-list__status {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}
.commercial-mailing-list.is-submitted .commercial-mailing-list__status::before {
    content: '\2713';
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #1C806C;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .commercial-contact-form__row { flex-direction: column; }
}

/* AJAX search — dim + lock the grid while a request is in flight. */
.commercial-listings.is-loading .commercial-listings__results {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ============================================================================
   Filter modal (opened from the "Filters" button on the archive)
   Structure + neutral chrome only. Colour hooks read theme CSS vars with stock
   fallbacks so it can never render unstyled. Accent = --cc-accent.
   ========================================================================== */
body.fm-lock { overflow: hidden; }

.fm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Generous vertical padding so the dialog never sits hard against the
       top/bottom edges — the filter list is long enough that it would
       otherwise fill almost the entire viewport height. */
    padding: 48px 24px;
    background: rgba(16, 20, 26, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.fm-backdrop[hidden] { display: none; }

.fm {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    /* Cap well short of the full viewport (not just "minus the backdrop
       padding") so there's always visible clearance above and below, even on
       short viewports where the padding alone wouldn't be enough. */
    max-height: min(760px, calc(100vh - 96px));
    background: var(--surface-card, #fff);
    color: var(--text-primary, #1a1a1a);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 20, 26, 0.28);
    overflow: hidden;
}

/* Head */
.fm__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-hairline, #e5e7eb);
}
.fm__title { margin: 0; font-size: 18px; font-weight: 700; }
.fm__spacer { flex: 1; }
.fm__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-muted, #f2f4f7);
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
}
.fm__close:hover { background: var(--surface-muted-hover, #e7eaef); }

/* Body */
.fm__body { padding: 4px 20px 8px; overflow-y: auto; }
.fm-sec { padding: 18px 0; border-bottom: 1px solid var(--border-hairline, #e5e7eb); }
.fm-sec:last-child { border-bottom: 0; }
.fm-sec__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.fm-sec__label { font-size: 14px; font-weight: 700; }
.fm-sec__hint { margin-top: 2px; font-size: 12px; color: var(--text-secondary, #667085); }
.fm-clr {
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-accent-bg, #1a1a1a);
    cursor: pointer;
}

/* Type grid (classification) */
.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.type-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 14px 10px;
    border: 1px solid var(--border-hairline, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-card, #fff);
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.type-chip:hover { border-color: var(--cc-accent-bg, #1a1a1a); }
.type-chip__ic { color: var(--text-secondary, #667085); }
.type-chip__lbl { font-size: 12px; font-weight: 600; line-height: 1.2; }
.type-chip__tick {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--cc-accent-bg, #1a1a1a);
    color: #fff;
}
.type-chip.active {
    border-color: var(--cc-accent-bg, #1a1a1a);
    background: var(--cc-accent-soft, #f0f0f0);
    box-shadow: inset 0 0 0 1px var(--cc-accent-bg, #1a1a1a);
}
.type-chip.active .type-chip__ic { color: var(--cc-accent-bg, #1a1a1a); }
.type-chip.active .type-chip__tick { display: inline-flex; }

/* Pills (classes, amenities, single-selects) */
.fm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pillchip {
    padding: 8px 14px;
    border: 1px solid var(--border-hairline, #e5e7eb);
    border-radius: 999px;
    background: var(--surface-card, #fff);
    color: var(--text-primary, #1a1a1a);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.pillchip:hover { border-color: var(--cc-accent-bg, #1a1a1a); }
.pillchip.active {
    border-color: var(--cc-accent-bg, #1a1a1a);
    background: var(--cc-accent-bg, #1a1a1a);
    color: #fff;
}

/* Inputs */
.fm-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border-hairline, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-card, #fff);
}
.fm-input-wrap:focus-within { border-color: var(--cc-accent-bg, #1a1a1a); }
.fm-input-ic { display: inline-flex; color: var(--text-secondary, #667085); }
.fm-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    padding: 11px 0;
    font: inherit;
    font-size: 14px;
    color: inherit;
}
.fm-range { display: flex; align-items: center; gap: 10px; }
.fm-range .fm-input-wrap { flex: 1; }
.fm-range__sep { color: var(--text-secondary, #667085); }
.fm-caption { margin-top: 8px; font-size: 12px; color: var(--text-secondary, #667085); }
.fm-select-wrap { position: relative; }
.fm-select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-hairline, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-card, #fff);
    font: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
}
.fm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    cursor: pointer;
}

/* Foot */
.fm__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-hairline, #e5e7eb);
    background: var(--surface-card, #fff);
}
.fm__count { font-size: 13px; color: var(--text-secondary, #667085); }
.fm__foot-actions { display: flex; align-items: center; gap: 10px; }
.fm__clear-all {
    border: 0;
    background: none;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #667085);
    cursor: pointer;
}
.fm__apply {
    border: 0;
    border-radius: 10px;
    padding: 11px 20px;
    background: var(--cc-accent-bg, #1a1a1a);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.fm__apply:hover { filter: brightness(0.96); }

@media (max-width: 560px) {
    .fm-backdrop { padding: 0; align-items: flex-end; }
    .fm { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Greyed-out filter chips — would return zero results given the visitor's
   OTHER active filters. Never applied to an already-active chip (see
   commercial-search.js applyAvailability()), so deselecting your own choice
   always stays possible even when picking it fresh right now would not. */
.type-chip[data-unavailable],
.pillchip[data-unavailable] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
   "List your space" ([commercial_list_your_space]) — the seller/landlord
   enquiry. STRUCTURE ONLY, same philosophy as the other commercial forms:
   layout and spacing so it isn't broken out of the box, no colour or chrome,
   because the theme owns how it looks. Heading and intro are rendered by the
   shortcode (from Loop Forms → Commercial → Form Labels) rather than the
   theme, so the copy is editable per client.
   ========================================================================== */
.commercial-list-space {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.commercial-list-space__title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}
.commercial-list-space__intro {
    margin: 0;
    color: var(--cc-muted, #5b5b5b);
}
.commercial-list-space__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Name + phone share a row on anything wider than a phone. */
.commercial-list-space__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .commercial-list-space__row { grid-template-columns: 1fr; }
}
.commercial-list-space__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.commercial-list-space__field > span {
    font-size: 0.9rem;
    font-weight: 500;
}
.commercial-list-space__field input,
.commercial-list-space__field textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--cc-border, rgba(0, 0, 0, 0.18));
    border-radius: 8px;
    background: #fff;
    color: inherit;
}
.commercial-list-space__field textarea { resize: vertical; }
/* Honeypot — visually gone, still in the DOM for bots to fill. */
.commercial-list-space__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.commercial-list-space__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
:where(.commercial-list-space__submit) {
    background: var(--cc-cta-bg, #4a4a4a);
    color: var(--cc-cta-ink, #ffffff);
}
.commercial-list-space__submit[disabled] {
    opacity: 0.6;
    cursor: default;
}
.commercial-list-space__status {
    margin: 0;
    font-size: 0.85rem;
}
.commercial-list-space__status[data-kind="pending"] { opacity: 0.75; }
.commercial-list-space__status[data-kind="success"] { color: #1C806C; }
.commercial-list-space__status[data-kind="error"]   { color: #b3261e; }

/* Submitted state — same treatment as the other commercial forms: everything
   goes, the confirmation is all that's left. The heading and intro go too, so
   the panel doesn't still invite an enquiry that's already been sent. */
.commercial-list-space.is-submitted .commercial-list-space__title,
.commercial-list-space.is-submitted .commercial-list-space__intro,
.commercial-list-space.is-submitted [data-list-space-fields],
.commercial-list-space.is-submitted [data-list-space-submit] {
    display: none;
}
.commercial-list-space.is-submitted .commercial-list-space__status {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}
.commercial-list-space.is-submitted .commercial-list-space__status::before {
    content: '\2713';
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #1C806C;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}