/*
 * The default skin (B6a, "Deep Water"): fonts, base elements, the layout (header, navigation, footer, sidebar, home
 * hero) and the main page types. Colours, fonts and shadows come only from the theme's custom properties
 * (theme.css, generated from docs/design/DESIGN.md), so the light and dark themes and a re-branded install all use
 * this file unchanged. site.css (loaded after it) holds the older modules' pagelet styles.
 * Mobile first; breakpoints at 40em (tablet) and 60em (desktop navigation).
 */

/* Fonts: self-hosted (no request to a font service before consent, B29), Latin subsets, OFL (fonts/*-OFL.txt) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Tinos"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tinos-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Tinos"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/tinos-latin-700-normal.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); line-height: 1.2; margin: 1.4em 0 .5em; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--font-weight-display); }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); margin-top: .4em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }
p, ul, ol, dl, table, figure, blockquote, pre { margin: 0 0 1em; }
a { color: var(--color-link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
img, video, svg, iframe { max-width: 100%; }
img, video { height: auto; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; }
small, .muted { color: var(--color-muted); }
blockquote { margin-left: 0; padding: .25em 0 .25em 1em; border-left: 3px solid var(--color-border); color: var(--color-muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
pre { overflow-x: auto; padding: .75em 1em; background: var(--color-sunken); border-radius: 8px; }
table { border-collapse: collapse; max-width: 100%; }
th, td { padding: .5em .65em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
thead th { color: var(--color-heading); background: var(--color-sunken); }
dt { font-weight: 600; color: var(--color-heading); }
dd { margin: 0 0 .5em; }
::selection { background: var(--color-callout); color: var(--color-on-callout); }

/* Forms. B62 (VIFE QA T5): every field has a visible edge from --color-input-border (3:1 or more on page, surface
   and sunken, light and dark; SkinTest checks it), even where its fill matches the panel behind it; no rule may take
   a field's border away (SkinTest), and the focus ring (2 px --color-focus) stays stronger than this 1 px edge. */
input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"],
input[type="week"], input:not([type]), select, textarea {
    max-width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: .5em .7em;
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}
textarea { min-height: 7em; width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 1.15em; height: 1.15em; accent-color: var(--color-action); vertical-align: -.15em; }
label { font-weight: 500; }
fieldset { border: 1px solid var(--color-border); border-radius: 10px; padding: .75em 1em 1em; margin: 0 0 1em; min-width: 0; }
legend { font-weight: 600; color: var(--color-heading); padding: 0 .3em; }
button, .button, .button_submit, input[type="submit"], input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-height: 2.75rem;
    padding: .55em 1.2em;
    border: 1px solid var(--color-action);
    border-radius: 10px;
    background: var(--color-action);
    color: var(--color-on-action);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .button:hover, .button_submit:hover, input[type="submit"]:hover { filter: brightness(1.08); }
button[disabled], input[disabled], select[disabled], textarea[disabled] { opacity: .6; cursor: not-allowed; }
.button-secondary, button.secondary { background: transparent; color: var(--color-link); border-color: var(--color-link); }
.link-button { min-height: 0; display: inline; background: none; border: 0; padding: 0; color: var(--color-link); font-weight: inherit; text-decoration: underline; }
.link-button:hover { filter: none; text-decoration-thickness: 2px; }
.red, .required { color: var(--color-danger); }
p.red { font-size: .9em; }
.site-form p { margin: 0 0 1em; }
.site-form input[type="text"], .site-form input[type="email"], .site-form input[type="tel"], .site-form input[type="password"],
.site-form select, .site-form textarea { width: 100%; max-width: 32rem; }

/* Messages and states */
.ws_message, .notice {
    margin: 0 0 1em;
    padding: .75em 1em;
    border: 1px solid var(--color-success);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--color-success-bg);
    color: var(--color-text);
}
.ws_message p:last-child { margin-bottom: 0; }
.ws_message.ws_error { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-text); }
p.notice[role="alert"] { border-color: var(--color-danger); background: var(--color-danger-bg); }
/* B37a: a member under review (open reports from several members), on their listings and profile */
.notice.member-under-review { border-color: var(--color-danger); background: var(--color-warning-bg); color: var(--color-text); font-weight: 600; }
/* B30: the legal pages' draft notice and their placeholders, to fill in before launch */
.notice.legal-draft { border-color: var(--color-border); background: var(--color-warning-bg); }
mark.legal-placeholder { padding: 0 .2em; border-radius: 4px; background: var(--color-warning-bg); color: var(--color-text); font-weight: 600; }
.legal-document { max-width: 46rem; }
.legal-document .table-scroll { overflow-x: auto; }
.legal-document table { width: 100%; }
.terms-field label { display: block; }
.empty { color: var(--color-muted); font-style: italic; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 1.25rem; }
.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .6em 1em; border-radius: 8px;
    background: var(--color-surface); color: var(--color-link); font-weight: 700;
}
.skip-link:focus { top: 1rem; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { display: block; flex: 1 0 auto; padding: 1.5rem 0 3rem; }
.site-main:focus { outline: none; }
.page-content > :first-child { margin-top: 0; }

/* Header: the brand band */
.site-header { background: var(--color-band); color: var(--color-on-band); border-bottom: 1px solid var(--color-band-edge); }
.site-header a { color: var(--color-on-band); }
.site-header :focus-visible { outline-color: var(--color-on-band-muted); }
.site-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding-top: .75rem; padding-bottom: .75rem; }
/* The logo: the Theme screen's one image, or the skin's emblem and wordmark PNGs (2026-10-23); the link takes the row's
   free space on small screens so the menu button and the switch stay beside it, and the wordmark shrinks, then hides */
.site-logo { display: flex; align-items: center; gap: .5rem; line-height: 0; min-width: 0; flex: 1 1 0; text-decoration: none; }
.site-logo img { display: block; height: 2.25rem; width: auto; max-width: 100%; }
.site-logo .logo-emblem { height: 2.5rem; flex: none; }
.site-logo .logo-wordmark { height: 1.1rem; min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left center; }
@media (max-width: 22em) {
    .site-logo .logo-wordmark { display: none; }
}
@media (max-width: 30em) {
    .site-header-inner:has(.notification-bell) .site-logo .logo-wordmark { display: none; }
}
@media (min-width: 40em) {
    .site-logo { gap: .6rem; }
    .site-logo img { height: 2.75rem; }
    .site-logo .logo-emblem { height: 3.25rem; }
    .site-logo .logo-wordmark { height: 1.95rem; }
}
.site-logo-text { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.site-header-tools { display: flex; align-items: center; gap: .5rem; }

.icon-button {
    width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; flex: none;
    border: 1px solid var(--color-band-edge); border-radius: 50%;
    background: transparent; color: var(--color-on-band-muted);
}
.icon-button:hover { filter: none; background: var(--color-band-alt); }
.icon-button svg { width: 1.15rem; height: 1.15rem; }
.nav-toggle { display: none; border-radius: 10px; width: auto; padding: 0 .9rem; gap: .5em; font-weight: 600; color: var(--color-on-band); }

/* B26: the notifications bell (js/site/notifications.js shows the unread count on it) */
.notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.notification-bell:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.notification-count {
    position: absolute; top: -.3rem; right: -.3rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--color-action); color: var(--color-on-action);
    font-size: .75rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}
.notification-count[hidden] { display: none; }

/* The theme switch (js/site/skin.js): a button and a small menu of Light / Dark / System */
.theme-switch { display: none; position: relative; }
.js .theme-switch { display: block; }
.theme-switch-button .theme-icon { display: none; }
.theme-switch[data-current="light"] .theme-icon-light,
.theme-switch[data-current="dark"] .theme-icon-dark,
.theme-switch[data-current="system"] .theme-icon-system { display: block; }
.theme-menu {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
    min-width: 10rem; margin: 0; padding: .35rem; list-style: none;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-raised);
}
.theme-menu button {
    width: 100%; justify-content: flex-start; min-height: 2.75rem; padding: .4em .75em;
    border: 0; border-radius: 8px; background: transparent; color: var(--color-text); font-weight: 500;
}
.theme-menu button:hover { filter: none; background: var(--color-sunken); }
.theme-menu button[aria-pressed="true"] { color: var(--color-heading); font-weight: 700; background: var(--color-sunken); }
.theme-menu button[aria-pressed="true"]::after { content: "\2713" / ""; margin-left: auto; }

/* Main navigation: level 1 in the band, levels 2 and 3 as drop-downs on desktop, nested lists in the phone menu */
.site-nav { flex: 1 1 100%; order: 3; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: .7rem .75rem; border-radius: 8px; font-weight: 500; text-decoration: none; }
.site-nav a:hover, .site-nav a.active, .site-nav a.active-trail { background: var(--color-band-alt); }
.site-nav a.active { box-shadow: inset 0 -3px 0 var(--color-band-accent); }
.site-nav .subnav { padding-left: 1rem; }
.site-nav li { position: relative; }
.subnav-toggle { display: none; }
.site-nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .25rem; }

/* Phone and tablet with the script: the menu folds behind the Menu button */
@media (max-width: 59.99em) {
    .js .nav-toggle { display: inline-flex; }
    .js .site-nav { display: none; }
    .js .site-header.nav-open .site-nav { display: block; padding-bottom: .5rem; }
    .js .site-nav .subnav { display: none; }
    .js .site-nav li.is-open > .subnav { display: block; }
    .js .site-nav .subnav-toggle {
        display: inline-flex; position: absolute; right: 0; top: .25rem; width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0;
        background: transparent; border: 0; color: var(--color-on-band);
    }
    .js .site-nav li.has-children > a { padding-right: 3rem; }
}

/* Desktop: one row; level 2 drops down, level 3 flies out */
@media (min-width: 60em) {
    .site-header-inner { flex-wrap: nowrap; gap: 1.5rem; }
    .site-logo { flex: none; gap: .7rem; }
    .site-logo img { height: 3.5rem; }
    .site-logo .logo-emblem { height: 3rem; }
    .site-logo .logo-wordmark { height: 1.8rem; }
    .site-nav { flex: 1 1 auto; order: 0; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
    .site-nav > ul, .site-nav > div > ul { display: flex; flex-wrap: wrap; gap: .1rem; }
    .site-nav-actions { margin-top: 0; flex-wrap: nowrap; }
    .site-nav .subnav {
        display: none; position: absolute; left: 0; top: 100%; z-index: 40; min-width: 14rem; padding: .35rem;
        background: var(--color-band); border: 1px solid var(--color-band-edge); border-radius: 10px; box-shadow: var(--shadow-raised);
    }
    .site-nav .subnav .subnav { left: 100%; top: -.4rem; }
    .site-nav li:hover > .subnav, .site-nav li:focus-within > .subnav, .site-nav li.is-open > .subnav { display: block; }
    .js .site-nav .subnav-toggle {
        display: inline-flex; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; min-height: 0;
        padding: 0; border: 0; background: transparent; color: var(--color-on-band-muted);
    }
    .js .site-nav li.has-children > a { padding-right: 1.8rem; }
    .site-nav .subnav li.has-children > .subnav-toggle { transform: translateY(-50%) rotate(-90deg); }
}
/* The full-size logo once the row has room for it beside the menu (between 60em and 75em it stays a step smaller) */
@media (min-width: 75em) {
    .site-logo { gap: .75rem; }
    .site-logo .logo-emblem { height: 3.75rem; }
    .site-logo .logo-wordmark { height: 2.25rem; }
}
.subnav-toggle svg { width: 1rem; height: 1rem; }
.subnav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Breadcrumb */
.breadcrumb { margin: 0 0 1rem; font-size: .9rem; color: var(--color-muted); }

/* Sidebar layout (template-01) */
.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
/* The sidebar column only when the sidebar holds something (a page with no menu or pagelets there is full width) */
#sidebar:not(:has(> *)) { display: none; }
@media (min-width: 60em) {
    .layout-sidebar:has(> #sidebar > *) { grid-template-columns: 16rem minmax(0, 1fr); }
}
#sidebar-nav { list-style: none; margin: 0 0 1.5rem; padding: .5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
#sidebar-nav ul { list-style: none; margin: 0; padding: 0 0 0 .9rem; }
#sidebar-nav a { display: block; padding: .5rem .65rem; border-radius: 8px; text-decoration: none; color: var(--color-text); }
#sidebar-nav a:hover { background: var(--color-sunken); }
#sidebar-nav a.active { background: var(--color-sunken); color: var(--color-heading); font-weight: 700; }
#sidebar-nav a.active-trail { font-weight: 600; }

/* Home: the hero band, the page body over it, the emblem beside */
.home-hero { background: var(--color-band); color: var(--color-on-band); }
.home-hero-inner {
    display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 2rem;
    padding-top: clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.home-hero-text { flex: 999 1 30rem; min-width: 0; }
.home-hero-text h1, .home-hero-text h2, .home-hero-text h3 { color: var(--color-on-band); }
.home-hero-text h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1.04; margin: .2em 0 .4em; }
.home-hero-text p { color: var(--color-on-band-muted); font-size: clamp(1rem, .9rem + .5vw, 1.2rem); max-width: 36rem; }
.home-hero-text a { color: var(--color-on-band); }
.home-hero-text .kicker, .kicker {
    display: block; margin: 0 0 .5rem; font-size: .82rem; font-weight: 600; letter-spacing: var(--tracking-kicker);
    text-transform: uppercase; color: var(--color-band-accent);
}
.home-hero-emblem { flex: 1 1 14rem; display: flex; justify-content: center; }
.home-hero-emblem img { display: block; width: min(100%, 22rem); height: auto; }
.home-hero .listing-search-box { background: var(--color-surface); color: var(--color-text); border-radius: 14px; padding: .5rem; max-width: 40rem; }
.home-hero .listing-search-box label { color: var(--color-muted); }
.page-home .site-main { padding-top: 0; }
.page-home .site-main > .container > .breadcrumb { display: none; }

/* Footer: the deep band */
.site-footer { background: var(--color-band-deep); color: var(--color-on-band-muted); font-size: .95rem; }
.site-footer a { color: var(--color-on-band-muted); }
.site-footer a:hover { color: var(--color-on-band); }
.site-footer :focus-visible { outline-color: var(--color-on-band-muted); }
.site-footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 2.5rem; padding-top: 2.25rem; padding-bottom: 1.25rem; }
.site-footer-logo { display: flex; align-items: center; gap: .6rem; line-height: 0; text-decoration: none; }
.site-footer-logo img { display: block; height: 3.25rem; width: auto; max-width: 100%; }
.site-footer-logo .logo-wordmark { height: 1.95rem; min-width: 0; object-fit: contain; object-position: left center; }
.site-footer .region-links { flex: 1 1 26rem; }
.site-footer .region-links ul { gap: .35rem 1.1rem; margin: 0; }
@media (min-width: 60em) {
    .site-footer .region-links ul { justify-content: flex-end; }
}
.site-footer .region-links a { display: inline-block; padding: .25rem 0; }
.site-footer .region-links a[aria-current="true"] { color: var(--color-on-band); font-weight: 700; }
.site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.25rem; padding-top: 1rem; padding-bottom: 1.75rem; border-top: 1px solid var(--color-band-edge); }
.site-footer-bottom p { margin: 0; }
.site-footer-bottom ul, #footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-footer .ws-snippet p:last-child { margin-bottom: 0; }

/* B29: the footer's "Cookies" and the cookie notice (sticks to the window's bottom until the visitor chooses) */
.cookie-settings { flex-basis: 100%; }
.cookie-settings summary { cursor: pointer; display: inline-block; padding: .25rem 0; text-decoration: underline; }
.cookie-settings form, .cookie-settings p { margin: .5rem 0 0; max-width: 46rem; }
.cookie-settings label { display: block; margin: .5rem 0 .75rem; }
.site-footer .cookie-settings button { border-color: var(--color-on-band-muted); }
.cookie-notice { position: sticky; bottom: 0; z-index: 20; background: var(--color-surface); color: var(--color-text); border-top: 2px solid var(--color-action); box-shadow: var(--shadow-raised); }
.cookie-notice-form { padding-top: 1rem; padding-bottom: 1rem; max-height: 70vh; overflow-y: auto; }
.cookie-notice-title { font-size: 1.15rem; margin: 0 0 .35rem; }
.cookie-notice p { margin: 0 0 .75rem; max-width: 60rem; }
.cookie-notice-actions { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.cookie-notice-actions button { flex: 1 1 12rem; max-width: 18rem; }
.cookie-notice-settings { margin-top: .75rem; }
.cookie-notice-settings summary { cursor: pointer; color: var(--color-link); text-decoration: underline; display: inline-block; padding: .35rem 0; }
.cookie-notice-settings label { display: block; margin: .35rem 0; }
.cookie-notice-settings fieldset { margin: .5rem 0 .75rem; }

/* ---------- Components ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.chip-list, .classified-subcategories ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.chip-list a, .classified-subcategories a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: .45rem 1rem;
    border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
    color: var(--color-heading); font-weight: 600; text-decoration: none;
}
.chip-list a:hover, .classified-subcategories a:hover { border-color: var(--color-link); }
.chip-list a[aria-current], .classified-subcategories a[aria-current] { background: var(--color-band); color: var(--color-on-band); border-color: var(--color-band); }

/* Pagers: numbered pages (galleries and the listing pages) */
.gallery_pages { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1.5rem 0; }
.gallery_pages a, .gallery_pages strong, .ws-pager a, .ws-pager [aria-current="page"] {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem;
    border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); text-decoration: none;
}
.gallery_pages strong, .ws-pager [aria-current="page"] { background: var(--color-band); border-color: var(--color-band); color: var(--color-on-band); }

/* ---------- Regions (B15): the chooser as a raised card, a region's page, the region links ---------- */
.region-chooser {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-raised);
    padding: clamp(1.1rem, 3vw, 2rem); margin: 0 0 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
}
.page-home .region-chooser { margin-top: -2.75rem; position: relative; }
.region-chooser .region-chooser-title { order: 1; flex: 1 1 auto; margin: 0; font-size: 1.75rem; }
.region-chooser .region-locate { order: 2; margin: 0; display: flex; align-items: center; gap: .5rem; }
.region-chooser .region-current, .region-chooser > .notice, .region-chooser > .empty { order: 0; flex: 1 1 100%; margin: 0; }
.region-chooser .region-list { order: 3; flex: 1 1 100%; }
.region-locate-button { background: transparent; color: var(--color-link); border-color: var(--color-link); border-radius: 999px; font-size: .95rem; }
.region-locate-status { color: var(--color-muted); font-size: .9rem; }
.region-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .5rem;
    list-style: none; margin: 0; padding: 0;
}
.region-list a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .7rem .9rem;
    border-radius: 10px; background: var(--color-sunken); color: var(--color-heading); font-weight: 500; text-decoration: none;
}
.region-list a::after { content: "\203A"; font-size: 1.3em; line-height: 1; }
.region-list a:hover { outline: 2px solid var(--color-border); }
.region-list a[aria-current="true"] { background: var(--color-band); color: var(--color-on-band); }
/* B66b: the chooser's "Other regions" link, after its list; the Other regions page's groups */
.region-chooser .region-other { order: 4; flex: 1 1 100%; margin: 0; font-weight: 600; }
.other-regions-group { margin: 2rem 0; }
.other-regions-group h2 { font-size: 1.35rem; margin: 0 0 .75rem; }
.other-regions-group h2 a { color: var(--color-heading); text-decoration: none; }
.other-regions-group h2 a:hover { text-decoration: underline; }
/* B67a: an island region's places (its communities), under its name inside its tile (map fine-tuning, 2026-10-29: they
   were outside the tile) */
.other-regions-group .region-places { display: block; margin-top: .2rem; font-size: .85rem; font-weight: 400; color: var(--color-muted); }
.other-regions-group a[aria-current="true"] .region-places { color: inherit; }
/* Map fine-tuning (owner, 2026-10-29): the Charters pages' "Other regions" link and the region's Add / Join button */
.charter-other-regions { margin: .5rem 0; font-weight: 600; }
.charter-join { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .75rem 0 1rem; }
/* B67b: the nearby region links at the bottom of a region's pages */
.nearby-regions { margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.nearby-regions-heading { font-size: 1.15rem; margin: 0 0 .6rem; color: var(--color-heading); }
.nearby-regions ul { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.nearby-regions a { display: inline-block; padding: .3rem 0; }
.region-parent { color: var(--color-muted); }
.region-links ul { display: flex; flex-wrap: wrap; gap: .3em 1em; list-style: none; margin: 0 0 1em; padding: 0; }
.region-page > h1 { margin-bottom: .2em; }
.region-change { color: var(--color-muted); }
.region-category { margin: 2rem 0; }
/* B60 (VIFE QA R9): the category's name, then its "Add Listing" link on the same line (wrapping on a phone) */
.region-category-heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: .25rem; margin: 0 0 .75rem; }
.region-category-heading h3 { font-size: 1.5rem; margin: 0; }
.region-category-heading h3 a { color: var(--color-heading); text-decoration: none; }
.region-category-heading h3 a:hover { text-decoration: underline; }
.add-listing-link { font-weight: 600; white-space: nowrap; }
/* B60 (R14): the Listings page's categories, each with its newest listings (the home page's cards) */
.listings-by-category { margin: 2rem 0; }
.listings-category { margin: 1.5rem 0; }
.listings-category .region-category-heading h2, .listings-category .region-category-heading h3 { font-size: 1.35rem; }
.region-category-all { margin-top: .75rem; font-weight: 600; }

/* The listings search box (region and category pages, the home hero) */
.listing-search-box { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; max-width: 40rem; }
.listing-search-box label { flex: 1 1 100%; font-weight: 600; }
.listing-search-box input[type="search"] { flex: 1 1 14rem; min-height: 3rem; }
.listing-search-box button { min-height: 3rem; }
.listing-search-more { margin: -.75rem 0 1.5rem; font-size: .95rem; }
.listing-search-box .listing-search-more { flex: 1 1 100%; margin: 0; }

/* ---------- Classifieds (B21): listing cards, a category's page, the search, a listing's page ---------- */
.listing-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.1rem; margin: 0 0 1rem; }
.listing-card {
    position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; padding: 0 0 1rem;
}
.listing-card-photo { display: block; aspect-ratio: 4 / 3; background: var(--color-photo-placeholder); }
.listing-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listing-card-no-photo { display: grid; place-items: center; color: var(--color-on-band-muted); }
.listing-card-no-photo svg { width: 2.5rem; height: 2.5rem; }
.listing-card-title { margin: .8rem 1rem 0; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.listing-card-title a { color: var(--color-text); text-decoration: none; }
.listing-card-title a::after { content: ""; position: absolute; inset: 0; }
.listing-card-title a:hover { text-decoration: underline; }
.listing-card:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.listing-card-title a:focus-visible { outline: none; }
.listing-card-price { margin: .1rem 1rem 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-heading); }
.listing-card-meta { margin: 0 1rem; font-size: .85rem; color: var(--color-muted); }
.listing-card .sponsored, .sponsored-label {
    display: inline-block; padding: .15rem .5rem; border-radius: 4px; background: var(--color-sponsored-bg); color: var(--color-sponsored-text);
    font-size: .75rem; font-weight: 700;
}
/* B27a: the sponsored listings at the top of a category's page, each labelled "Sponsored" */
.sponsored-listings { margin: 0 0 1.5rem; }
.sponsored-listings-heading { font-size: 1.15rem; margin: 0 0 .6rem; }
.listing-card-sponsor { margin: .7rem 1rem 0; line-height: 1; }
/* B56: a business seller's featured listing on their business page */
.featured-label {
    display: inline-block; padding: .15rem .5rem; border-radius: 4px; background: var(--color-callout); color: var(--color-on-callout);
    font-size: .75rem; font-weight: 700;
}

.classified-category > h1, .classified-search > h1 { margin-bottom: .2em; }
.classified-category-region { display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--color-muted); margin-top: .35rem; }
.classified-category-up { font-size: .95rem; color: var(--color-muted); }
.classified-category-description { max-width: 46rem; }
.classified-filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 1.25rem; padding: 1rem;
    background: var(--color-sunken); border-radius: 12px;
}
.classified-filters p { margin: 0; display: flex; flex-direction: column; gap: .25rem; min-width: 0; max-width: 100%; }
/* A long option ("Saltwater Fishing Gear › Rods") never widens the page (B6c: 431 px at 390) */
.classified-filters :is(select, input:not([type="checkbox"]):not([type="radio"])) { max-width: 100%; min-width: 0; }
.classified-filters p:last-of-type { flex-direction: row; align-items: center; gap: .75rem; }
.classified-filters fieldset { margin: 0; padding: .4rem .75rem .6rem; border-color: var(--color-input-border); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.classified-filters fieldset input { width: 6rem; }
.classified-filters label { font-size: .9rem; }
.classified-count { color: var(--color-muted); font-weight: 500; }
.classified-out-of-area { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.classified-search-locate { margin: -.5rem 0 1rem; }
.classified-search-locate .region-locate-button { font-size: .95rem; }

.classified-listing { display: grid; gap: 0 2.5rem; }
.classified-listing > * { min-width: 0; }
.classified-listing > h1 { margin-bottom: .1em; }
.classified-listing-price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--color-heading); margin: 0 0 1rem; }
.classified-listing-photos { margin: 0 0 1.5rem; }
.classified-listing-photos img { display: block; width: 100%; border-radius: 10px; background: var(--color-photo-placeholder); }
.classified-listing-photo-main { height: auto; max-height: 75vh; object-fit: contain; }
.classified-listing-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6rem), 1fr)); gap: .5rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.classified-listing-thumbs a { display: block; border-radius: 10px; }
.classified-listing-thumbs img { height: auto; aspect-ratio: 1; object-fit: cover; }
.classified-listing-thumbs a[aria-current="true"] { outline: 3px solid var(--color-link); outline-offset: 1px; }
#search-results { scroll-margin-top: 1rem; }
.classified-listing-details, .business-facts, .member-profile-facts, .plans-combination dl {
    display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .4rem 1.25rem; margin: 0 0 1.5rem;
}
.classified-listing-details dd, .business-facts dd, .member-profile-facts dd, .plans-combination dd { margin: 0; min-width: 0; }
.classified-listing-description { max-width: 46rem; margin: 0 0 1.5rem; }
.classified-listing-seller, .classified-listing-safety {
    padding: 1.1rem 1.25rem; margin: 0 0 1.25rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border);
}
.classified-listing-seller h2, .classified-listing-safety h2 { margin-top: 0; font-size: 1.3rem; }
.classified-listing-seller dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.classified-listing-seller dd { margin: 0; }
/* B56: the seller's business page, under their name */
.classified-listing-seller-business { margin-top: 0; overflow-wrap: anywhere; }
.classified-listing-safety { background: var(--color-callout); color: var(--color-on-callout); border-color: var(--color-callout); }
.classified-listing-safety h2 { color: var(--color-on-callout); }
.classified-listing-safety a { color: var(--color-on-callout); }
.classified-listing-safety ul { margin-bottom: 0; }
.classified-listing-masked { color: var(--color-muted); }
/* B42: a page's location map, square, with a translucent circle over the approximate area and the caption under it.
   Its box shows only with JavaScript (location-map.js draws it); Leaflet's own stylesheet comes after this one, so
   these rules are scoped under .location-map to win. */
.location-map { max-width: 28rem; margin: 0 0 1.5rem; }
.location-map-canvas { display: none; }
.js .location-map-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-sunken); }
.js .location-map-canvas.location-map-failed { display: none; }
.location-map .leaflet-container { font: inherit; background: var(--color-sunken); }
.location-map-caption { margin: .5rem 0 0; color: var(--color-muted); }
.location-map .location-map-area { stroke: var(--color-action); stroke-width: 2; fill: var(--color-action); fill-opacity: .2; }
.location-map .leaflet-bar { border: 1px solid var(--color-border); box-shadow: none; }
.location-map .leaflet-bar a { background: var(--color-surface); color: var(--color-text); border-bottom-color: var(--color-border); }
.location-map .leaflet-bar a:hover, .location-map .leaflet-bar a:focus-visible { background: var(--color-sunken); color: var(--color-heading); }
.location-map .leaflet-bar a.leaflet-disabled { background: var(--color-surface); color: var(--color-muted); }
.location-map .leaflet-bar a:focus-visible, .location-map .location-map-info-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.location-map .location-map-info { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .35rem; }
.location-map .location-map-info-button {
    width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 50%;
    background: var(--color-surface); color: var(--color-text); font: 700 .9rem/1 var(--font-body); cursor: pointer;
}
.location-map .location-map-attribution { margin: 0; padding: .25rem .5rem; border-radius: 6px; background: var(--color-surface); color: var(--color-text); font-size: .8rem; }
.location-map .location-map-attribution a { color: var(--color-link); }
/* B42b: the List / Map switch on the result pages (results-map.js; nothing of it without JavaScript), the map's panel
   (full width; at phone size taller, with "Show List" over it), its markers (an area's count in a circle, a cluster's
   larger) and popups. The info button and zoom bar share the location map's rules. */
.results-map { display: none; }
.js .results-map.results-map-on { display: block; margin: 0 0 1rem; }
.results-map-switch { display: inline-flex; border: 1px solid var(--color-link); border-radius: 999px; overflow: hidden; }
.results-map-switch .results-map-view { min-height: 2.25rem; padding: .35rem 1.1rem; border: 0; border-radius: 0; background: transparent; color: var(--color-link); font-weight: 600; }
.results-map-switch .results-map-view[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); }
.results-map-switch .results-map-view:focus-visible, .results-map-show-list:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.results-map-panel { position: relative; margin-top: .75rem; }
.results-map-summary { margin: 0 0 .5rem; color: var(--color-muted); }
/* Map fine-tuning (owner, 2026-10-29): above the map when it has nothing to show without a search term */
.results-map-needs-search { margin: 0 0 .75rem; padding: .7rem .9rem; border-left: 4px solid var(--color-action); border-radius: 8px; background: var(--color-sunken); color: var(--color-heading); font-weight: 600; }
.results-map-needs-search[hidden] { display: none; }
.results-map-locate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
/* B68b: the map's search (a centre and a distance) and "Search this area", over the map's top edge once it is moved */
.results-map-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: 0 0 .5rem; }
.results-map-search p { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.results-map-search label { color: var(--color-text); font-weight: 600; font-size: .9rem; }
.results-map-area { position: absolute; z-index: 500; left: 50%; transform: translateX(-50%); margin: .5rem 0 0; }
.results-map-area .results-map-area-button {
    min-height: 2.25rem; padding: .35rem 1rem; border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-surface); color: var(--color-link); font-weight: 700; box-shadow: 0 1px 4px var(--color-overlay); cursor: pointer;
}
.results-map-area .results-map-area-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.results-map-canvas { width: 100%; height: 32rem; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-sunken); }
.results-map-canvas.results-map-failed { display: none; }
.results-map .leaflet-container { font: inherit; background: var(--color-sunken); }
.results-map .results-map-radius { stroke: var(--color-action); stroke-width: 2; stroke-dasharray: 6 6; fill: var(--color-action); fill-opacity: .06; }
.results-map .results-map-marker {
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); border-radius: 50%;
    background: var(--color-action); color: var(--color-on-action); font: 700 .85rem/1 var(--font-body); box-shadow: 0 1px 4px var(--color-overlay); cursor: pointer;
}
.results-map .results-map-cluster { background: var(--color-link); color: var(--color-surface); font-size: .95rem; }
/* B68c: a region's count (zoomed out): a pill wide enough for its number */
.results-map .results-map-group { border-radius: 999px; background: var(--color-heading); color: var(--color-surface); font-size: .95rem; }
/* B68a: an area at its region's centre (no rough location): hollow, so it isn't read as a real place */
.results-map .results-map-marker-region { background: var(--color-surface); color: var(--color-action); border: 2px dashed var(--color-action); }
.results-map .results-map-marker:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.results-map .leaflet-bar { border: 1px solid var(--color-border); box-shadow: none; }
.results-map .leaflet-bar a { background: var(--color-surface); color: var(--color-text); border-bottom-color: var(--color-border); }
.results-map .leaflet-bar a:hover, .results-map .leaflet-bar a:focus-visible { background: var(--color-sunken); color: var(--color-heading); }
.results-map .leaflet-bar a.leaflet-disabled { background: var(--color-surface); color: var(--color-muted); }
.results-map .leaflet-bar a:focus-visible, .results-map .location-map-info-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.results-map .location-map-info { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .35rem; }
.results-map .location-map-info-button {
    width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 50%;
    background: var(--color-surface); color: var(--color-text); font: 700 .9rem/1 var(--font-body); cursor: pointer;
}
.results-map .location-map-attribution { margin: 0; padding: .25rem .5rem; border-radius: 6px; background: var(--color-surface); color: var(--color-text); font-size: .8rem; }
.results-map .location-map-attribution a { color: var(--color-link); }
.results-map .leaflet-popup-content-wrapper, .results-map .leaflet-popup-tip { background: var(--color-surface); color: var(--color-text); box-shadow: 0 2px 10px var(--color-overlay); }
.results-map .leaflet-popup-content { margin: .75rem .9rem; font-size: .9rem; line-height: 1.35; }
.results-map .leaflet-container a.leaflet-popup-close-button { color: var(--color-muted); }
.results-map-popup-area { margin: 0 0 .4rem; font-weight: 700; color: var(--color-heading); }
.results-map-region-note { font-weight: 400; font-size: .85rem; color: var(--color-muted); }
.results-map-popup ul { margin: 0 0 .5rem; padding: 0; list-style: none; }
.results-map-popup li + li { margin-top: .4rem; }
.results-map .results-map-item { display: grid; grid-template-columns: 56px 1fr; grid-auto-flow: dense; column-gap: .6rem; color: var(--color-link); text-decoration: none; }
.results-map .results-map-item img { grid-row: span 3; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--color-photo-placeholder); }
.results-map-item > span { grid-column: 2; }
.results-map-item-title { text-decoration: underline; }
.results-map-item-price { color: var(--color-text); font-weight: 600; }
.results-map-item .sponsored-label { justify-self: start; }
.results-map .results-map-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.results-map-show-list { display: none; }
@media (max-width: 39.99em) {
    /* A portrait phone: tall enough to use, in scale with its width */
    .results-map-canvas { height: min(70vh, 130vw); border-radius: 0; border-left: 0; border-right: 0; }
    .results-map-show-list {
        display: block; position: absolute; z-index: 1000; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
        padding: .55rem 1.25rem; border: 0; border-radius: 999px; background: var(--color-action); color: var(--color-on-action);
        font-weight: 700; box-shadow: 0 2px 8px var(--color-overlay);
    }
}
/* B21ca: the listing's Favourite button, a toggle: outlined when off, filled when on (aria-pressed), the same label */
.classified-listing-favourite { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.classified-listing-favourite p, .favourite-form { margin: 0; }
.favourite-button { background: transparent; color: var(--color-link); border-color: var(--color-link); }
.favourite-button[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.favourite-button:focus-visible, .classified-listing-favourite a:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.favourite-icon { font-size: 1.2em; line-height: 1; }
.favourite-error { color: var(--color-danger); font-weight: 600; }
/* B36: the Follow button on a seller's profile, listings and business page: the same toggle as Save */
.follow-seller { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; }
.follow-seller p, .follow-form { margin: 0; }
.follow-button { background: transparent; color: var(--color-link); border-color: var(--color-link); }
.follow-button[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.follow-button:focus-visible, .follow-seller a:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.follow-icon { display: inline-block; min-width: 1em; font-weight: 700; line-height: 1; }
.follow-error { color: var(--color-danger); font-weight: 600; }
/* Charter fine-tuning F7: the heart that saves a charter, beside Follow on its page and over a Charters page card's photo */
.charter-save { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.charter-save p, .charter-save-form { margin: 0; }
.charter-save-button {
    display: inline-flex; align-items: center; gap: .35rem; background: transparent; color: var(--color-link);
    border: 1px solid var(--color-link); text-decoration: none;
}
.charter-save-button[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.charter-save-button:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.charter-save-icon { flex: none; width: 1.2rem; height: 1.2rem; }
.charter-save-error { color: var(--color-danger); font-weight: 600; }
.charter-save-compact { position: absolute; top: .6rem; right: .6rem; z-index: 1; flex-direction: column; align-items: flex-end; max-width: calc(100% - 1.2rem); }
.charter-save-compact .charter-save-button {
    justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
    background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border); box-shadow: var(--shadow-raised);
}
.charter-save-compact .charter-save-button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-border); }
.charter-save-compact .charter-save-icon { width: 1.35rem; height: 1.35rem; }
.charter-save-compact .charter-save-error { padding: .3rem .6rem; border-radius: 8px; background: var(--color-surface); font-size: .85rem; }
/* B21cb: "Save this search" on the search page */
.classified-save-search { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: 10px; }
.save-search-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; }
.save-search-form p, .classified-save-search > p { margin: 0; }
.save-search-form input[type="text"] { min-width: min(100%, 22rem); }
.classified-save-search > .save-search-hint, .classified-save-search > .save-search-note, .classified-save-search > .save-search-error { margin-top: .5rem; }
.save-search-hint { color: var(--color-muted); }
.classified-save-search a:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.save-search-error { color: var(--color-danger); font-weight: 600; }
/* B31: "Continue with Google / Facebook" on the login and registration pages (each provider's own branding) */
.sign-in-providers { display: grid; gap: .75rem; max-width: 24rem; margin: 0 0 1.5rem; }
.sign-in-button { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: 4px; font-weight: 600;
    text-decoration: none; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-input-border); }
.sign-in-button img { flex: none; width: 20px; height: 20px; }
.sign-in-button-google { background: var(--color-google-bg); color: var(--color-google-text); border: 1px solid var(--color-google-border); }
.sign-in-button-facebook { background: var(--color-facebook-bg); color: var(--color-facebook-text); border: 1px solid var(--color-facebook-bg); }
.sign-in-button:hover { filter: brightness(.96); text-decoration: none; }
.sign-in-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.sign-in-or { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 0; color: var(--color-muted); }
.sign-in-or::before, .sign-in-or::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
@media (min-width: 60em) {
    .classified-listing { grid-template-columns: minmax(0, 1fr) 20rem; }
    .classified-listing > * { grid-column: 1; }
    .classified-listing > .classified-listing-seller, .classified-listing > .classified-listing-safety { grid-column: 2; }
    .classified-listing > .classified-listing-seller { grid-row: 1 / span 3; align-self: start; }
    .classified-listing > .classified-listing-safety { grid-row: 4 / span 4; align-self: start; }
}

/* ---------- Businesses (B22) and members' public profiles (B16a) ---------- */
.business-page, .member-profile { max-width: 60rem; }
.business-preview { padding: .75rem 1rem; border-radius: 8px; background: var(--color-warning-bg); color: var(--color-text); border: 1px solid var(--color-border); }
.business-logo { display: block; width: 7rem; height: 7rem; object-fit: contain; padding: .5rem; margin: 0 0 1rem; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.business-page > h1 { margin-bottom: .15em; }
.business-listing-title { font-size: 1.15rem; color: var(--color-muted); margin-top: 0; }
.business-description { font-size: 1.05rem; max-width: 46rem; }
/* B25: "Message seller" under a listing's seller, "Message this business" under a business page's facts */
.message-link { margin: 1rem 0 0; }
/* B24: the "Report this ..." link under a listing's seller, a business page and a profile */
.report-link { margin: 1rem 0 0; font-size: .9rem; }
.report-link a { color: var(--color-muted); }
/* VIFE fine-tuning: an item's own member on its public page: Edit under the listing (or the business page's details),
   and its statistics in a panel at the end (Pages\OwnerPanel) */
.owner-edit { margin: 0 0 1.5rem; }
.owner-panel { padding: 1.1rem 1.25rem; margin: 1.5rem 0 1.25rem; border-radius: 14px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-left: 4px solid var(--color-action); }
.owner-panel h2 { margin-top: 0; font-size: 1.3rem; }
.owner-panel-note { margin: 0 0 .75rem; color: var(--color-muted); }
.owner-panel-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.owner-panel-figures div { padding: .6rem .75rem; border-radius: 10px; background: var(--color-sunken); }
.owner-panel-figures dt { font-size: .9rem; color: var(--color-muted); }
.owner-panel-figures dd { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--color-heading); }
.owner-panel-links { margin: 0; }
.report-link a:hover, .report-link a:focus-visible { color: var(--color-link); }
.business-facts, .member-profile-facts { padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.business-page-content { max-width: 46rem; }
.business-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .6rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.business-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--color-photo-placeholder); }
.business-products-group h3 { font-size: 1.25rem; }
.business-pages ul, .member-profiles ul { list-style: none; padding: 0; }
/* B22d: the directory's and the region pages' business cards, the charter mark */
.business-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.1rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.business-card {
    position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: 1rem 1.1rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
}
.business-card:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.business-card-name { margin: 0; font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.business-card-name a { color: var(--color-heading); text-decoration: none; }
.business-card-name a::after { content: ""; position: absolute; inset: 0; }
.business-card-name a:hover { text-decoration: underline; }
.business-card-name a:focus-visible { outline: none; }
.business-card p { margin: 0; overflow-wrap: anywhere; }
.business-card-title { color: var(--color-muted); }
.business-card-summary { font-size: .95rem; }
.business-card-region { font-size: .85rem; color: var(--color-muted); }
.business-charter {
    align-self: flex-start; display: inline-block; margin: 0 0 .5rem; padding: .15rem .6rem; border-radius: 999px;
    background: var(--color-callout); color: var(--color-on-callout); font-size: .8rem; font-weight: 700;
}
.business-card .business-charter { margin: 0; }
.business-card-highlights { font-size: .85rem; font-weight: 600; color: var(--color-heading); }
/* Charter fine-tuning F5 (owner, 2026-10-28): the charters directory, one charter per row as the owner's reference
   listing: Showing and Sort by (a segmented row of links), then each charter's card: the photo on the left (a third of
   the row, its facts over its bottom edge), the details on the right; on a phone the photo on top */
.charter-list-bar { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.25rem; }
.charter-list-showing { margin: 0; color: var(--color-muted); }
.charter-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.charter-sort-label { color: var(--color-text); }
.charter-sort-options {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; flex: 1 1 20rem; min-width: 0; margin: 0; padding: 0;
    list-style: none; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden;
}
.charter-sort-options li { display: flex; min-width: 0; }
.charter-sort-options a {
    display: flex; align-items: center; justify-content: center; width: 100%; padding: .35rem .5rem; text-align: center;
    font-size: .85rem; font-weight: 700; line-height: 1.3; color: var(--color-link); background: var(--color-surface); text-decoration: none;
}
.charter-sort-options a:hover { background: var(--color-sunken); }
.charter-sort-options a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.charter-sort-options a[aria-current="true"] { background: var(--color-callout); color: var(--color-on-callout); }
.charter-rows { display: flex; flex-direction: column; gap: 1.25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.charter-row {
    display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; min-width: 0;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; transition: box-shadow .15s ease;
}
.charter-row:hover, .charter-row:focus-within { box-shadow: var(--shadow-raised); }
.charter-row-media { position: relative; padding-bottom: 1.1rem; }
.charter-row-photo { display: block; height: 100%; aspect-ratio: 16 / 10; background: var(--color-photo-placeholder); text-decoration: none; }
.charter-row-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.charter-row-photo-logo { background: var(--color-sunken); }
.charter-row-photo-logo img { object-fit: contain; padding: 1rem; box-sizing: border-box; }
.charter-row-initials {
    display: grid; place-items: center; width: 100%; height: 100%; background: var(--color-callout); color: var(--color-on-callout);
    font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 2.5rem; letter-spacing: .05em;
}
.charter-row-facts {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; margin: 0;
    padding: .3rem .4rem; max-width: calc(100% - 1.5rem); white-space: nowrap; border-radius: 999px;
    background: var(--color-surface); color: var(--color-heading); box-shadow: var(--shadow-raised); font-size: .9rem;
}
.charter-row-fact { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .6rem; }
.charter-row-fact + .charter-row-fact { border-left: 1px solid var(--color-border); }
.charter-row-icon { flex: none; width: 1.1rem; height: 1.1rem; color: currentColor; }
.charter-row-star { color: var(--color-star); }
.charter-row-count { color: var(--color-muted); }
.charter-row-body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: .75rem 1.1rem 1.1rem; }
.charter-row-body p { margin: 0; overflow-wrap: anywhere; }
.charter-row-name { margin: 0; font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.charter-row-name a { color: var(--color-heading); text-decoration: none; }
.charter-row-name a:hover { text-decoration: underline; }
.charter-row-location { display: flex; align-items: center; gap: .35rem; color: var(--color-muted); font-size: .9rem; }
.charter-row-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--color-text); }
.charter-row-more a { color: var(--color-text); font-size: .9rem; text-decoration: underline; }
.charter-row-more a:hover { color: var(--color-link); }
.charter-row-highlights .charter-chip { font-size: .8rem; padding: .15rem .6rem; }
.charter-row-body .charter-row-from { margin-top: auto; padding-top: .4rem; color: var(--color-text); }
.charter-row-from .charter-price { font-size: 1.2rem; }
@media (min-width: 40em) {
    .charter-list-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .charter-sort { flex: 1 1 32rem; justify-content: flex-end; }
    .charter-sort-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .charter-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .charter-row-media { padding: 0; }
    .charter-row-photo { aspect-ratio: auto; min-height: 13rem; }
    .charter-row-facts { bottom: .75rem; }
    .charter-row-body { padding: 1.1rem 1.25rem; }
}
/* B58: a charter's details on its page: chip groups, then the features in two columns, "See all features" for the rest */
.charter-details { margin: 2rem 0; }
.charter-details h3 { margin: 1.25rem 0 .5rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--color-heading); }
.charter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.charter-chip {
    padding: .25rem .75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
    color: var(--color-text); font-size: .9rem; overflow-wrap: anywhere;
}
.charter-chip-comment { color: var(--color-muted); }
.charter-feature-list { display: grid; grid-template-columns: 1fr; gap: .75rem 2rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .charter-feature-list { grid-template-columns: 1fr 1fr; } }
.charter-feature { display: flex; gap: .75rem; align-items: flex-start; }
.charter-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-heading); }
.charter-feature-text { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.charter-feature-name { color: var(--color-text); }
.charter-feature-comment { color: var(--color-muted); font-size: .9rem; }
.charter-features-more { margin-top: 1rem; }
.charter-features-more summary { cursor: pointer; color: var(--color-link); font-weight: 600; }
.charter-features-more summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* B59a: a charter's trips on its page; B63: each a card (the trip on the left, its price and button on the right from
   40em), then its next open dates as chips */
.charter-trips { margin: 2rem 0; scroll-margin-top: 1rem; }
.charter-trip-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.charter-trip {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 1.5rem; padding: 1rem 1.25rem;
    border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow-wrap: anywhere;
}
.charter-trip h3 { margin: 0 0 .5rem; font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; color: var(--color-heading); }
.charter-trip h4 { margin: 0 0 .4rem; font-family: var(--font-body); font-size: .95rem; font-weight: 700; color: var(--color-heading); }
.charter-trip-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; color: var(--color-text); }
.charter-trip-icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-muted); }
.charter-trip-description { margin: .6rem 0 0; color: var(--color-text); }
.charter-trip-offer p { margin: 0; }
.charter-price { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 1.5rem; line-height: 1.2; color: var(--color-link); }
.charter-price-basis { color: var(--color-muted); font-size: .9rem; }
.charter-trip-booking { color: var(--color-muted); font-size: .9rem; }
.charter-trip-request { margin-top: .75rem !important; }
.charter-trip-availability { border-top: 1px solid var(--color-border); padding-top: .75rem; }
@media (min-width: 40em) {
    .charter-trip { grid-template-columns: minmax(0, 1fr) auto; }
    .charter-trip-offer { text-align: right; }
    .charter-trip-availability { grid-column: 1 / -1; }
}
.charter-trip-dates { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.charter-trip-dates li { padding: .25rem .75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-sunken); font-size: .9rem; color: var(--color-text); }
.charter-trip-seats, .charter-trip-none { color: var(--color-muted); }
.charter-trip-none { margin: 0; }
/* B59b: each open date and "Request this trip" lead to the member app's request page */
.charter-trip-dates a { color: var(--color-link); }
/* B63: a charter's page, laid out as the owner's reference: the header, the photo mosaic, the intro and main column
   beside a sticky side column (from 56.25em), and on a phone a bar at the bottom with the price and Check availability */
.business-page.charter-page { max-width: none; }
.charter-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 1.25rem; }
.charter-header-identity { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; flex: 1 1 24rem; }
.charter-header-logo {
    flex: none; width: 4.5rem; height: 4.5rem; object-fit: contain; padding: .35rem; border-radius: 12px;
    background: var(--color-surface); border: 1px solid var(--color-border);
}
.charter-header-text { min-width: 0; }
.charter-header h1 { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.charter-header .business-listing-title { margin: 0 0 .25rem; }
.charter-rating-summary { margin: 0 0 .35rem; }
.charter-rating-summary a { color: var(--color-text); text-decoration: none; }
.charter-rating-summary a:hover .charter-rating-count { text-decoration: underline; }
.charter-rating-summary .review-stars { color: var(--color-star); letter-spacing: .05em; }
.charter-rating-count { color: var(--color-link); }
.charter-region-line { margin: 0; color: var(--color-text); }
.charter-region-line .business-charter { margin: 0 .25rem 0 0; vertical-align: .1em; }
.charter-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.charter-header-actions p, .charter-header-actions .follow-seller { margin: 0; }
.charter-from { margin: 0; color: var(--color-text); }
.charter-from .charter-price { font-size: 1.35rem; }
@media (min-width: 56.25em) {
    .charter-header-actions { flex-direction: column; align-items: flex-end; text-align: right; }
}
/* The mosaic: on a phone the first photo, then a strip; from 56.25em the first large beside a grid of the rest */
.charter-mosaic { margin: 0 0 1.75rem; }
.charter-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-photo-placeholder); }
.charter-mosaic a { display: block; position: relative; overflow: hidden; border-radius: 10px; }
.charter-mosaic a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.charter-mosaic-main { aspect-ratio: 4 / 3; }
.charter-mosaic-rest { display: flex; gap: .5rem; margin: .5rem 0 0; padding: 0 0 .25rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.charter-mosaic-rest li { flex: 0 0 42%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
.charter-mosaic-rest a { height: 100%; }
.charter-mosaic-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--color-overlay); color: var(--color-on-band); font-size: 1.5rem; font-weight: 700;
}
@media (min-width: 56.25em) {
    .charter-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; height: clamp(20rem, 34vw, 27rem); }
    .charter-mosaic-1 { grid-template-columns: 1fr; }
    .charter-mosaic-main { aspect-ratio: auto; height: 100%; }
    .charter-mosaic-rest { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; margin: 0; padding: 0; overflow: visible; }
    .charter-mosaic-rest li { aspect-ratio: auto; min-height: 0; }
    .charter-mosaic-2 .charter-mosaic-rest, .charter-mosaic-3 .charter-mosaic-rest { grid-template-columns: 1fr; }
    .charter-mosaic-4 .charter-mosaic-rest li:first-child { grid-column: 1 / -1; }
}
/* The intro and main column beside the side column */
.charter-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.5rem; }
.charter-intro > :first-child, .charter-main > :first-child { margin-top: 0; }
.charter-side { display: grid; gap: 1rem; align-content: start; margin: 1rem 0 0; }
.charter-side-card { padding: 1.1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); overflow-wrap: anywhere; }
.charter-side-heading { margin: 0 0 .75rem; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-muted); }
.charter-operator-name { display: flex; align-items: center; gap: .75rem; }
.charter-operator-name p { margin: 0; font-size: 1.1rem; color: var(--color-heading); }
.charter-operator-logo { flex: none; width: 3rem; height: 3rem; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); }
.charter-operator-facts { display: grid; gap: .5rem; margin: .9rem 0 0; }
.charter-operator-facts dt { color: var(--color-muted); font-size: .85rem; }
.charter-operator-facts dd { margin: 0; }
.charter-operator .message-link { margin: 1rem 0 0; }
.charter-popular-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.charter-popular-list li { display: flex; align-items: center; gap: .65rem; color: var(--color-text); }
.charter-popular-all { margin: .9rem 0 0; }
.charter-side .report-link { margin: 0; font-size: .9rem; }
@media (min-width: 56.25em) {
    .charter-layout { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "intro side" "main side"; grid-template-rows: auto 1fr; }
    .charter-intro { grid-area: intro; }
    .charter-main { grid-area: main; }
    .charter-side { grid-area: side; position: sticky; top: 1rem; margin: 0; }
}
/* The reviews from its trips' ratings: the average, a bar for each number of stars, the latest ratings */
.charter-reviews { margin: 2rem 0; scroll-margin-top: 1rem; }
.charter-reviews-summary { display: grid; gap: 1rem 2rem; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
@media (min-width: 40em) { .charter-reviews-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.charter-reviews-average { display: grid; justify-items: start; gap: .15rem; margin: 0; }
.charter-reviews-score { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 2.5rem; line-height: 1; color: var(--color-heading); }
.charter-reviews-average .review-stars, .charter-review .review-stars { color: var(--color-star); letter-spacing: .05em; }
.charter-reviews-count { color: var(--color-muted); font-size: .9rem; }
.charter-reviews-bars { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.charter-reviews-bars li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .6rem; font-size: .9rem; color: var(--color-text); }
.charter-reviews-bar { display: block; height: .55rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.charter-reviews-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-star); }
.charter-reviews-bar-count { color: var(--color-muted); text-align: right; }
.charter-review-list { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.charter-review { padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow-wrap: anywhere; }
.charter-review p { margin: 0 0 .35rem; }
.charter-review-heading strong { color: var(--color-heading); }
.charter-review-meta { color: var(--color-muted); font-size: .9rem; }
.charter-review-text { margin: .5rem 0 0; color: var(--color-text); }
.charter-review-removed { color: var(--color-muted); font-style: italic; }
/* B71: the guest's photo, a thumbnail that opens larger */
.charter-review-photo { margin: .6rem 0 0 !important; }
.charter-review-photo a { display: inline-block; border-radius: 8px; }
.charter-review-photo img { display: block; max-width: 160px; max-height: 160px; border: 1px solid var(--color-border); border-radius: 8px; }
.charter-review-reply { margin: .75rem 0 0; padding: .75rem 1rem; border-radius: 10px; background: var(--color-sunken); }
.charter-review-report { margin: .5rem 0 0 !important; font-size: .85rem; }
.charter-reviews-all { margin: 1rem 0 0; }
.charter-gallery { margin: 2rem 0; scroll-margin-top: 1rem; }
/* The phone's bar: fixed to the bottom of the screen, with room left under the page so it covers nothing */
.charter-book-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .6rem 1rem; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-raised);
}
.charter-book-bar p { margin: 0; }
body:has(.charter-book-bar) { padding-bottom: 4.5rem; }
@media (min-width: 56.25em) {
    .charter-book-bar { display: none; }
    body:has(.charter-book-bar) { padding-bottom: 0; }
}
/* B27b: a sponsored business page's card (a region's directory, the site-wide sponsors), labelled "Sponsored" */
.business-card-sponsor { line-height: 1; }
.site-sponsors { padding: 1.5rem 0 1rem; background: var(--color-sunken); border-top: 1px solid var(--color-border); }
.site-sponsors-band { padding: 0; background: none; border: 0; }
.site-sponsors-heading { font-size: 1.15rem; margin: 0 0 .75rem; }
.business-directory-count { font-weight: 400; color: inherit; opacity: .85; }
.business-directory-links { color: var(--color-muted); }
.business-directory-section, .region-businesses { margin: 2rem 0; }
.member-profile-business { font-weight: 600; }
.member-profile-hours { color: var(--color-muted); }

/* ---------- Ratings (B40): the profile's averages and ratings, the seller's average on a listing ---------- */
.member-ratings { margin-top: 2rem; }
.member-ratings-summary { font-weight: 600; }
.member-ratings-filter ul { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.member-ratings-filter a[aria-current="true"] { font-weight: 700; text-decoration: none; color: var(--color-text); }
.member-ratings-list { margin: 0; padding: 0; list-style: none; }
.member-rating { padding: .75rem 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }
.member-rating p { margin: 0 0 .3rem; }
.member-rating .review-stars, .classified-listing-seller-rating { color: var(--color-star); letter-spacing: .05em; }
.member-rating-role { margin-left: .5rem; font-weight: 600; }
.member-rating-meta, .member-ratings-none, .member-rating-removed { color: var(--color-muted); font-size: .9rem; }
.member-rating-removed { font-style: italic; }
.member-rating-reply { margin: .5rem 0 0 1rem; padding: .4rem .8rem; border-left: 3px solid var(--color-link); background: var(--color-sunken); border-radius: 0 8px 8px 0; }
.member-rating-report { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; }
.classified-listing-seller-rating { margin-top: 0; font-weight: 600; }
.classified-listing-seller-rating a { color: inherit; }

/* ---------- Plans (B19): the call-out, the table, "combine plans" ---------- */
.plans-promotion { padding: 1rem 1.25rem; border-radius: 14px; background: var(--color-callout); color: var(--color-on-callout); }
.plans .plans-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.plans .plans-table { border-collapse: collapse; min-width: 100%; }
.plans .plans-table caption { text-align: left; padding: .75rem 1rem; color: var(--color-muted); caption-side: top; }
.plans .plans-table th, .plans .plans-table td { border: 0; border-bottom: 1px solid var(--color-border); padding: .65rem .8rem; text-align: center; vertical-align: top; }
.plans .plans-table thead th { background: var(--color-band); color: var(--color-on-band); font-family: var(--font-display); font-size: 1.05rem; }
.plans .plans-table tbody th { text-align: left; font-weight: 500; color: var(--color-text); min-width: 11rem; }
.plans .plans-table tbody tr:nth-child(even) { background: var(--color-sunken); }
.plans .plans-table tr:last-child > * { border-bottom: 0; }
.plans-descriptions { padding-left: 1.25rem; }
.plans-add-on-price { font-weight: 600; white-space: nowrap; }
.plans .plans-combine fieldset { background: var(--color-surface); margin-bottom: 1rem; }
.plans .plans-combine label { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin: 0 1.25rem .25rem 0; }
/* Charter fine-tuning F8: a section an upgrade group, one plan at most; with Charter chosen the add-ons are greyed (the server leaves them out) */
.plans-combine-max, .plans-combine-price { color: var(--color-muted); font-weight: 400; }
.plans-combine-charter-note { color: var(--color-muted); margin-top: 0; }
.plans-combine:has(input[data-charter]:checked) .plans-combine-add-ons label { opacity: .5; pointer-events: none; }
.plans-combine:has(input[data-charter]:checked) .plans-combine-charter-note { color: var(--color-text); font-weight: 600; }
.plans-combination-note { font-weight: 600; }
.plans-combination { padding: 1rem 1.25rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
/* Charter fine-tuning F10: a gap below the form's button; the form opens the page here (#plans-combination), with room above it */
.plans .plans-combination { margin-top: 1.5rem; scroll-margin-top: 1.5rem; }
.plans-combination h2 { margin-top: 0; }

/* ---------- Account pages (login, register, the account menu) ---------- */
.login, #clientsignup, .account-forgot { max-width: 34rem; }
.login .site-form, #clientsignup .site-form {
    padding: 1.25rem 1.5rem; margin: 0 0 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px;
}
.login .site-form br, #clientsignup .site-form br { display: none; }
.login .site-form label, #clientsignup .site-form label { display: block; margin-bottom: .3rem; }
.account-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .6rem; list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.account-menu li { display: flex; }
.account-menu a, .account-menu .link-button {
    flex: 1; display: flex; align-items: center; min-height: 3.25rem; padding: .75rem 1rem;
    border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
    color: var(--color-heading); font-weight: 600; text-decoration: none;
}
.account-menu .inline-form { flex: 1; display: flex; }
.account-menu a:hover, .account-menu .link-button:hover { border-color: var(--color-link); }

/* ---------- Special pages (404, no access, restricted, form expired, verify email) ---------- */
.special-page { max-width: 40rem; padding: 1rem 0 2rem; }

/* ---------- Print: the content only, dark text on white ---------- */
@media print {
    .site-header, .site-footer, .cookie-notice, .skip-link, .theme-switch, .nav-toggle, .site-nav, .region-locate, #sidebar { display: none !important; }
    body { background: none; color: CanvasText; }
    .home-hero { background: none; color: CanvasText; }
    a { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}