/*
 * SEO Pro Directory: Directory pages (archive, listing, Listing Part and
 * Listing Card Part blocks). Loaded only where they show.
 *
 * Colours follow the theme palette (Kadence's --global-paletteN), read on
 * <body>, where the Kadence Pro dark mode switcher redefines them, never on
 * :root (STANDARDS.md → Front-end styling and dark mode). Text on the
 * accent (hero, primary buttons) uses the theme's button text colour, and
 * the dark palette's text colour in dark mode (below).
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2026 Marcus Quinn
 * Additional terms (GPL-3.0 section 7(b)): ATTRIBUTION.txt
 * Provenance: wpas-11fc97ca9348a13b. Copies, even of part, keep these lines.
 */

body {
    --spd-ink: var(--global-palette3, #182230);
    --spd-muted: var(--global-palette5, #5c6877);
    --spd-accent: var(--global-palette1, #176b5b);
    --spd-accent-dark: var(--global-palette2, #0d4d42);
    --spd-on-accent: var(--global-palette-btn, #fff);
    --spd-surface: var(--global-palette9, #fff);
    --spd-soft: var(--global-palette8, rgba(127, 127, 127, 0.08));
    --spd-border: rgba(127, 127, 127, 0.24);
    --spd-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    --spd-radius: 18px;
    --spd-shell: 1240px;
    /* Links to another site: a bold arrow, as a mask in the text colour. */
    --spd-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6.5 17.5l11-11M8.5 6.5h9v9'/%3E%3C/svg%3E");
    /* The smallest text: notes, meta, labels and help at 18px, and compact
       labels (uppercase eyebrows, chips, badges, counts) at 16px (owner
       review, 23 October 2026: no text smaller than 18px). A theme can set
       these on body. */
    --spd-text-small: 1.125rem;
    --spd-text-compact: 1rem;
    --spd-listing-panel-gap: clamp(1.25rem, 2.5vw, 1.75rem);
    --spd-listing-panel-padding: clamp(1.5rem, 3vw, 2rem);
    /* A listing's hero: its padding below, and on wide screens how far the
       photo reaches below the hero's content (it hangs over the hero's edge
       by this less the padding), and where the details below then start. */
    --spd-listing-hero-end: clamp(2.25rem, 4vw, 3.75rem);
    --spd-hero-overlap: clamp(7rem, 11vw, 10rem);
    --spd-listing-layout-start: 2rem;
    /* A listing's breadcrumbs: one line, and the space under it. */
    --spd-crumbs-line: 1.4rem;
    --spd-crumbs-gap: clamp(1.25rem, 3vw, 2.25rem);
    /* A hero holding the "Send a message" form (wide screens): the same
       space above the breadcrumbs, under the hero's tallest column and
       between the hero and the details below it. */
    --spd-listing-message-hero-gap: clamp(1.75rem, 2.5vw, 2.25rem);
    /* Accents as text on the page (eyebrows, links); dark mode: below. */
    --spd-accent-text: var(--spd-accent);
    --spd-accent-dark-text: var(--spd-accent-dark);
    /* Badges (a listing's or a question's services): the palette's subtle
       background (palette 8) behind the strong text colour at rest; the
       button hover fill (palette 2) behind the text on it when hovered
       (owner reviews, 23 October 2026: black on pink, blue on hover, then
       the next more subtle palette colour). Badges sit on cards and panels
       in the page colour (palette 9), so the tint still shows; Kadence's
       dark palettes keep a dark shade in slot 8, so the light text there
       reads too. The text colours are the Customizer's (Title → Category
       colours, includes/frontend/theme-styles.php); a theme can set all
       four. */
    --spd-badge-background: var(--global-palette8, rgba(127, 127, 127, 0.1));
    --spd-badge-hover-background: var(--spd-accent-dark);
}

/*
 * Dark mode: a palette's accents are picked for buttons and backgrounds and
 * can be too dark to read as text on a dark page (navy on charcoal). Text in
 * an accent colour uses the theme's link colour mixed with its text colour
 * there, which reads on the dark page (WCAG AA); without color-mix(), the
 * text colour alone.
 *
 * The accents stay saturated in dark mode, but the theme's button text
 * usually follows a palette slot that turns dark there (palette 9, the page
 * background), which would put dark text on the hero and on primary buttons.
 * Text on the accent uses the dark palette's text colour (palette 3, light)
 * instead, as the light palette's button text is light on the same accents.
 */
body.color-switch-dark {
    --spd-accent-text: var(--global-palette3, #fff);
    --spd-accent-dark-text: var(--global-palette3, #fff);
    --spd-on-accent: var(--global-palette3, #fff);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    body.color-switch-dark {
        --spd-accent-text: color-mix(in srgb, var(--global-palette-highlight, var(--global-palette1, #176b5b)) 45%, var(--global-palette3, #fff));
        --spd-accent-dark-text: var(--spd-accent-text);
    }
}

.spd-directory-main {
    max-width: 100%;
    overflow-x: clip;
    color: var(--spd-ink);
    background: var(--spd-surface);
}

.spd-directory-main *,
.spd-directory-main *::before,
.spd-directory-main *::after {
    box-sizing: border-box;
}

.spd-directory-shell {
    width: var(--spd-shell);
    max-width: calc(100% - 2rem);
    margin-inline: auto;
}

.spd-directory-hero,
.spd-listing-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.16), transparent 26rem),
        linear-gradient(135deg, var(--spd-accent-dark), var(--spd-accent));
    color: var(--spd-on-accent);
}

.spd-directory-hero {
    padding: clamp(2rem, 4vw, 3.5rem) 0 0;
}

.spd-directory-hero h1,
.spd-listing-hero h1 {
    max-width: 900px;
    margin: 0;
    color: var(--spd-on-accent);
    font-size: var(--spd-h1-size, clamp(2.5rem, 6vw, 5.2rem));
    line-height: var(--spd-h1-line-height, 0.98);
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* A listing's name: the Customizer's listing Title → Title font where it
   is set (theme-styles.php); the hero keeps its colour. */
.spd-listing-hero h1 {
    font-family: var(--spd-listing-title-family, var(--global-heading-font-family, inherit));
    font-size: var(--spd-listing-title-size, var(--spd-h1-size, clamp(2.5rem, 6vw, 5.2rem)));
    font-style: var(--spd-listing-title-style, normal);
    font-weight: var(--spd-listing-title-weight, var(--spd-h1-weight, 700));
    line-height: var(--spd-listing-title-line-height, var(--spd-h1-line-height, 0.98));
    letter-spacing: var(--spd-listing-title-letter-spacing, -0.045em);
    text-transform: var(--spd-listing-title-transform, none);
}

.spd-directory-intro,
.spd-listing-subheading {
    max-width: 720px;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.6;
}

.spd-directory-intro {
    text-wrap: balance;
}

.spd-directory-eyebrow {
    margin: 0 0 0.65rem;
    color: var(--spd-accent-text);
    font-size: var(--spd-text-compact, 1rem);
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.spd-directory-hero .spd-directory-eyebrow,
.spd-listing-hero .spd-directory-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.spd-directory-filters {
    display: grid;
    width: 100%;
    min-width: 0;
    /* The search and the first filter (the main category, whose names run
       longest) share the room; the place and sort keep to their words. */
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) repeat(2, minmax(130px, 0.7fr)) auto;
    gap: 0.75rem;
    align-items: end;
    margin-top: clamp(1.25rem, 3vw, 2.25rem);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--spd-radius) var(--spd-radius) 0 0;
    background: var(--spd-surface);
    box-shadow: var(--spd-shadow);
    color: var(--spd-ink);
}

.spd-directory-filter label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: var(--spd-text-compact, 1rem);
    font-weight: 750;
    letter-spacing: 0.04em;
}

.spd-directory-filter {
    min-width: 0;
}

.spd-directory-filter input,
.spd-directory-filter select {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-button-radius, 10px);
    background: var(--spd-surface);
    color: var(--spd-ink);
    font: inherit;
}

.spd-directory-filter input:focus,
.spd-directory-filter select:focus,
.spd-directory-button:focus-visible,
.spd-directory-empty-reset .wp-block-button__link:focus-visible,
.spd-directory-card a:focus-visible,
.spd-directory-single-page a:focus-visible,
.spd-listing a:focus-visible {
    outline: 3px solid var(--spd-accent-text);
    outline-offset: 3px;
}

/* On the accent (hero), the ring takes the text colour there. */
.spd-directory-hero .spd-directory-button:focus-visible,
.spd-listing-hero a:focus-visible {
    outline-color: var(--spd-on-accent);
}

/* Buttons and the fields beside them take the theme's button corners
   (Customizer: Buttons → Border Radius, --spd-button-radius), so every
   button on a page has one shape (owner review, 23 October 2026). */
.spd-directory-button,
.spd-directory-empty-reset .wp-block-button__link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--spd-button-radius, 10px);
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.spd-directory-button:hover,
.spd-directory-empty-reset .wp-block-button__link:hover {
    transform: translateY(-1px);
}

.spd-directory-button-primary {
    border-color: var(--spd-accent);
    background: var(--spd-accent);
    color: var(--spd-on-accent);
}

.spd-directory-button-primary:hover {
    border-color: var(--spd-accent-dark);
    background: var(--spd-accent-dark);
    color: var(--spd-on-accent);
}

.spd-directory-button-secondary,
.spd-directory-empty-reset .wp-block-button__link {
    border-color: var(--spd-border);
    background: var(--spd-surface);
    color: var(--spd-ink);
}

.spd-directory-button-secondary:hover,
.spd-directory-empty-reset .wp-block-button__link:hover {
    border-color: var(--spd-accent);
    color: var(--spd-accent-dark-text);
}

.spd-directory-results {
    padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(3.5rem, 7vw, 6rem);
}

.spd-directory-results-header {
    display: flex;
    gap: 1.5rem;
    align-items: end;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Above a Kadence query, whose first line is its result count ("Showing
   1–2 of 2 …"): "Clear filters" floats to that line's end, so the count
   and the link share one line (owner review, 23 October 2026). */
.spd-directory-results-header.spd-directory-results-header-inline {
    position: relative;
    z-index: 1;
    float: right;
    margin: 0 0 0 1.5rem;
}

/* A query without a count: its cards start below the link. */
.spd-directory-results-header-inline ~ .spd-directory-kadence-query .kb-query-grid-wrap {
    clear: both;
}

.spd-directory-results > .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.spd-directory-results-header h2 {
    margin: 0;
    color: var(--spd-ink);
    font-size: var(--spd-h2-size, clamp(1.7rem, 3vw, 2.6rem));
    letter-spacing: -0.035em;
}

.spd-listing-section h2 {
    max-width: 24ch;
    margin: 0;
    color: var(--spd-ink);
    font-size: var(--spd-h2-size, clamp(1.85rem, 3vw, 2.45rem));
    line-height: var(--spd-h2-line-height, 1.12);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* The same space under every section's heading as under the others
   (owner review, 24 October 2026): Kadence's ".single-content h2 + *"
   took it from the About text and the FAQs. */
.spd-listing-section > h2 + .spd-listing-prose,
.spd-listing-section > h2 + .spd-listing-faqs {
    margin-top: 1.35rem;
}

.spd-directory-clear,
.spd-directory-card-link,
.spd-listing-review-link,
.spd-listing-back a {
    color: var(--spd-accent-dark-text);
    font-weight: 750;
    text-underline-offset: 0.22em;
}

.spd-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.spd-directory-kadence-query .kb-query-grid-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spd-directory-kadence-query .kb-query-item,
.spd-directory-card-layout,
.spd-directory-card-layout > .kt-row-column-wrap {
    min-width: 0;
    height: 100%;
}

.spd-directory-kadence-query .kb-query-item {
    margin: 0;
    /* Kadence marks result overflow hidden, which clips lifted card shadows. */
    overflow: visible !important;
}

.spd-directory-kadence-query .spd-directory-card-layout > .kt-row-column-wrap {
    /* Fill the equal-height outer track instead of sizing this row to content. */
    grid-auto-rows: minmax(0, 1fr) !important;
}

.spd-directory-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-surface);
    box-shadow: 0 12px 30px rgba(24, 34, 48, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.spd-directory-card > .kt-inside-inner-col,
.spd-directory-card-body-row,
.spd-directory-card-body-row > .kt-row-column-wrap,
.spd-directory-card-body,
.spd-directory-card-body > .kt-inside-inner-col {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.spd-directory-card .spd-directory-card-body-row > .kt-row-column-wrap {
    /* Kadence centres a row's content with auto side margins; in this flex
       column they would shrink it to its text, so each card's inset would
       differ. Fill the row instead. */
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.spd-directory-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--spd-shadow);
}

.spd-directory-card-media {
    display: block;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 16 / 10;
    background: var(--spd-soft);
}

.spd-directory-card-media img,
.spd-listing-hero-media img,
.spd-listing-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.spd-directory-card:hover .spd-directory-card-media img {
    transform: scale(1.035);
}

.spd-directory-card-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--spd-accent-dark), var(--spd-accent));
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.spd-directory-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem;
}

.spd-directory-card-meta,
.spd-listing-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
}

/* A card's meta: the Customizer's listing Archive → Meta font and colour. */
.spd-directory-card-meta {
    color: var(--spd-card-meta-color, var(--spd-muted));
    font-family: var(--spd-card-meta-family, inherit);
    font-size: var(--spd-card-meta-size, var(--spd-text-small, 1.125rem));
    font-style: var(--spd-card-meta-style, normal);
    line-height: var(--spd-card-meta-line-height, inherit);
    letter-spacing: var(--spd-card-meta-letter-spacing, normal);
    text-transform: var(--spd-card-meta-transform, none);
}

.spd-directory-state {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    background: var(--spd-soft);
    color: var(--spd-accent-dark-text);
    font-size: var(--spd-text-compact, 1rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.spd-directory-state-featured {
    background: rgba(245, 166, 35, 0.2);
    color: var(--spd-ink);
}

.spd-directory-rating {
    color: var(--spd-ink);
    font-weight: 800;
}

/* The star only: decorative, mid amber reads on light and dark surfaces. */
.spd-directory-rating > [aria-hidden="true"] {
    color: #e39a0f;
}

.spd-directory-review-count {
    color: var(--spd-muted);
    font-weight: 600;
}

/* A business's name in a list: the h3 heading's size, or the Customizer's
   listing Archive → Title font where it is set (theme-styles.php). */
.spd-directory-card h3,
.spd-directory-card-title {
    margin: 0.8rem 0 0;
    color: var(--spd-card-title-color, var(--spd-ink));
    font-family: var(--spd-card-title-family, var(--global-heading-font-family, inherit));
    font-size: var(--spd-card-title-size, var(--spd-h3-size, 1.35rem));
    font-style: var(--spd-card-title-style, normal);
    font-weight: var(--spd-card-title-weight, var(--spd-h3-weight, 700));
    line-height: var(--spd-card-title-line-height, var(--spd-h3-line-height, 1.2));
    letter-spacing: var(--spd-card-title-letter-spacing, -0.025em);
    text-transform: var(--spd-card-title-transform, none);
}

.spd-directory-card h3 a {
    color: inherit;
    text-decoration: none;
}

.spd-directory-card-title a {
    color: inherit;
    text-decoration: none;
}

.spd-directory-card-summary {
    margin: 0.55rem 0 0;
    color: var(--spd-muted);
    line-height: 1.55;
}

.spd-directory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

/* A Query Card's term links (Listing Card Part) in a page's content: two
   classes, as themes indent lists there (Kadence: .single-content ul, 2em).
   Only the indent and markers; the theme's space above and below stays. */
.spd-directory-tags.wp-block-spd-listing-card-part {
    padding-inline-start: 0;
    margin-inline-start: 0;
    list-style: none;
}

/* A badge: the badge colours (top of the file) and the Customizer's
   listing Title → Category font. A linked badge's link fills the pill, so
   the whole pill takes the hover colours. */
.spd-directory-tags li {
    --spd-tag-pad-block: 0.32rem;
    --spd-tag-pad-inline: 0.58rem;
    padding: var(--spd-tag-pad-block) var(--spd-tag-pad-inline);
    border-radius: 999px;
    background: var(--spd-badge-background);
    color: var(--spd-badge-color, var(--spd-ink));
    font-family: var(--spd-badge-family, inherit);
    font-size: var(--spd-badge-size, var(--spd-text-compact, 1rem));
    font-style: var(--spd-badge-style, normal);
    font-weight: var(--spd-badge-weight, 700);
    line-height: var(--spd-badge-line-height, inherit);
    letter-spacing: var(--spd-badge-letter-spacing, normal);
    text-transform: var(--spd-badge-transform, none);
}

.spd-directory-tags li > a {
    display: block;
    margin: calc(-1 * var(--spd-tag-pad-block)) calc(-1 * var(--spd-tag-pad-inline));
    padding: var(--spd-tag-pad-block) var(--spd-tag-pad-inline);
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

/* The badge's colours win over a link colour set on the block (a Query
   Card's terms often take the brand accent, under 4.5:1 on the pill). */
.spd-directory-tags li > a:not(:hover):not(:focus-visible) {
    color: inherit;
}

.spd-directory-tags li > a:hover,
.spd-directory-tags li > a:focus-visible {
    background: var(--spd-badge-hover-background);
    color: var(--spd-badge-hover, var(--spd-on-accent));
}

.spd-directory-card-link {
    margin-top: auto;
}

.spd-directory-card-link:hover,
.spd-directory-card-link:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Dark mode: one pair of colours for a card's links. At rest the title
   and "View business" take the card's text colour; hovered or focused,
   they take the readable accent (about 8:1 on the card), underlined. A
   builder's link hover colour (often the brand accent, near 3:1 on the
   dark card) does not apply. The tags keep the badge colours. */
body.color-switch-dark .spd-directory-card .spd-directory-card-link {
    color: var(--spd-ink);
}

body.color-switch-dark .spd-directory-card .spd-directory-card-title a:hover,
body.color-switch-dark .spd-directory-card .spd-directory-card-title a:focus-visible,
body.color-switch-dark .spd-directory-card .spd-directory-card-link:hover,
body.color-switch-dark .spd-directory-card .spd-directory-card-link:focus-visible {
    color: var(--spd-accent-text);
}

body.color-switch-dark .spd-directory-card .spd-directory-card-title a:hover,
body.color-switch-dark .spd-directory-card .spd-directory-card-title a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

/* The card's link with Like and Save (SEO Pro Stack), at its foot. */
.spd-directory-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.spd-directory-card-footer .spd-directory-card-link {
    margin-top: 0;
}

.spd-directory-card .sps-reactions.spd-directory-card-reactions,
.spd-directory-card-meta .sps-reactions.spd-directory-card-reactions {
    gap: 0.4rem;
    margin: 0;
}

.spd-directory-card-meta .spd-directory-card-reactions {
    margin-left: auto;
}

/* A card's Like and Save: the theme's button corners, as every other
   directory button (SEO Pro Stack's own are pills). */
.spd-directory-card-reactions .sps-reactions__button {
    min-height: 44px;
    padding: 0.3em 0.8em;
    border-radius: var(--spd-button-radius, 999px);
    font-size: var(--spd-text-small, 1.125rem);
}

/* Like and Save as their own Query Card part: at the card's foot, just
   above its link. */
.spd-directory-card-reactions-part {
    margin-top: auto;
}

.spd-directory-card-reactions-part + .spd-directory-card-link {
    margin-top: 0.75rem;
}

.spd-directory-kadence-query .wp-block-read-more.spd-directory-card-link::after {
    content: " →";
}

.spd-directory-pagination {
    margin-top: 2.5rem;
}

.spd-directory-query-count {
    margin-bottom: 1.25rem;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 700;
}

.spd-directory-query-pagination {
    margin-top: 2.5rem;
}

.spd-directory-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    list-style: none;
}

.spd-directory-pagination a,
.spd-directory-pagination span {
    display: inline-flex;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--spd-border);
    border-radius: 9px;
    text-decoration: none;
}

.spd-directory-pagination .current {
    border-color: var(--spd-accent);
    background: var(--spd-accent);
    color: var(--spd-on-accent);
}

/* Kadence's query pagination colours the current page with the button text
   slot, which turns dark in dark mode (dark on the accent): the same light
   text on the accent as in light mode. Kadence Blocks Pro does not print the
   block's extra class on its wrapper, so this keys on the results section. */
.spd-directory-results .wp-block-kadence-query-pagination .pagination .page-numbers.current,
.spd-directory-results .wp-block-kadence-query-pagination .pagination .page-numbers.current:hover,
.wp-block-kadence-query-pagination.spd-directory-query-pagination .pagination .page-numbers.current,
.wp-block-kadence-query-pagination.spd-directory-query-pagination .pagination .page-numbers.current:hover {
    color: var(--spd-on-accent);
}

.spd-directory-empty {
    padding: clamp(2rem, 7vw, 5rem);
    border: 1px dashed var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-soft);
    text-align: center;
}

.spd-directory-empty-actions {
    margin-top: 1.25rem;
}

.spd-listing-hero {
    padding-block: 0.75rem var(--spd-listing-hero-end);
}

.spd-directory-single-page .content-area {
    margin-block: 0;
}

.spd-listing-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: var(--spd-crumbs-gap);
    color: rgba(255, 255, 255, 0.66);
    font-size: var(--spd-text-small, 1.125rem);
    line-height: var(--spd-crumbs-line);
}

.spd-listing-breadcrumbs a {
    color: rgba(255, 255, 255, 0.9);
}

.spd-listing-hero > .spd-directory-shell > .spd-listing-hero-grid,
.wp-block-columns.spd-listing-hero-grid,
.spd-listing-hero-grid > .kt-row-column-wrap,
.kt-row-column-wrap.spd-listing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    margin-bottom: 0;
}

/* The hero's second column holds the image or the enquiry form. */
.spd-listing-hero > .spd-directory-shell > .spd-listing-hero-grid-no-media,
.wp-block-columns.spd-listing-hero-grid:not(:has(.spd-listing-hero-media, .spd-listing-enquiry)),
.spd-listing-hero-grid > .kt-row-column-wrap:not(:has(.spd-listing-hero-media, .spd-listing-enquiry)),
.kt-row-column-wrap.spd-listing-hero-grid:not(:has(.spd-listing-hero-media, .spd-listing-enquiry)) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
}

/* Beside a form, which is taller, the listing's name starts at the top. */
.spd-listing-hero > .spd-directory-shell > .spd-listing-hero-grid:has(.spd-listing-message),
.wp-block-columns.spd-listing-hero-grid:has(.spd-listing-message),
.spd-listing-hero-grid > .kt-row-column-wrap:has(.spd-listing-message),
.kt-row-column-wrap.spd-listing-hero-grid:has(.spd-listing-message) {
    align-items: start;
}

/* Empty builder columns must not reserve a media row or a vertical gap. */
.wp-block-columns.spd-listing-hero-grid > .wp-block-column:empty,
.spd-listing-hero-grid > .kt-row-column-wrap > .wp-block-kadence-column:has(> .kt-inside-inner-col:empty),
.kt-row-column-wrap.spd-listing-hero-grid > .wp-block-kadence-column:has(> .kt-inside-inner-col:empty) {
    display: none;
}

.spd-listing-hero > .spd-directory-shell > .spd-listing-hero-grid > *,
.spd-listing > .spd-listing-layout > *,
.spd-listing-hero-grid > .wp-block-column,
.spd-listing-layout > .wp-block-column {
    min-width: 0;
}

.spd-listing-hero-content h1 {
    font-size: var(--spd-h1-size, clamp(2.6rem, 6vw, 5rem));
}

.spd-listing-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    align-items: center;
    margin-top: 1.4rem;
    color: rgba(255, 255, 255, 0.78);
}

.spd-listing-location {
    overflow-wrap: anywhere;
}

.spd-directory-rating-large {
    color: #ffd166;
    font-size: var(--spd-text-small, 1.125rem);
}

.spd-directory-rating-large span:last-child {
    margin-left: 0.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.spd-listing-status {
    padding: 0.3rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--spd-on-accent);
    font-weight: 700;
}

/* The listing's own actions (template, Listing Part, shortcode), or a
   Kadence row given the class (its inner wrap holds the buttons). */
.spd-listing-actions:not(.kb-row-layout-wrap),
.spd-listing-actions > .kt-row-column-wrap,
.kt-row-column-wrap.spd-listing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.spd-listing-hero .spd-directory-button-primary {
    border-color: var(--spd-on-accent);
    background: var(--spd-on-accent);
    color: var(--spd-accent-dark);
}

.spd-listing-hero .spd-directory-button-secondary {
    border-color: rgba(255, 255, 255, 0.42);
    background: transparent;
    color: var(--spd-on-accent);
}

/* The hero's call, website and shortlist buttons: the page's main actions,
   so larger, and the same height; narrow enough for two in a row beside
   the enquiry form. */
.spd-listing-hero .spd-listing-actions .spd-directory-button,
.spd-listing-hero .spd-listing-actions .sps-shortlist {
    min-width: 10rem;
    min-height: 64px;
    padding: 1rem 1.5rem;
    border-radius: var(--spd-button-radius, 12px);
    font-size: 1.12rem;
}

/* Like and "Add to shortlist", with their tallies, take the first line;
   call and website share the next, so neither is left on a line of its
   own (owner review, 24 October 2026). */
.spd-listing-actions > .spd-listing-shortlist {
    flex-basis: 100%;
    margin: 0;
}

/* "Add to shortlist" (SEO Pro Stack): large on the listing page, a list
   button in landing pages' lists. */
.spd-listing-shortlist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    margin-top: 0.75rem;
}

.spd-listing-shortlist .sps-shortlist {
    min-width: 12rem;
    min-height: 56px;
    border-radius: var(--spd-button-radius, 12px);
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 750;
}

/* In the hero, "Add to shortlist" is the solid main action; call and
   website are outline buttons after it. */
.spd-listing-hero .spd-listing-shortlist .sps-shortlist,
.spd-listing-hero .spd-listing-shortlist .sps-shortlist:hover,
.spd-listing-hero .spd-listing-shortlist .sps-shortlist:focus-visible {
    border-color: var(--spd-on-accent);
    background: var(--spd-on-accent);
    color: var(--spd-accent-dark);
}

.spd-listing-hero .spd-listing-shortlist .sps-shortlist:hover {
    filter: brightness(0.94);
}

.spd-listing-hero .spd-listing-shortlist .sps-shortlist[aria-pressed="true"] {
    border-color: var(--spd-on-accent);
}

/* The listing page's heart-only Like before "Add to shortlist", the same
   height, square; "12 Likes · 3 Shortlists" on a line under both. */
.spd-listing-actions:not(.kb-row-layout-wrap),
.spd-listing-actions > .kt-row-column-wrap,
.kt-row-column-wrap.spd-listing-actions {
    align-items: flex-start;
}

.spd-listing-shortlist > .spd-listing-like {
    display: flex;
    margin: 0;
}

.spd-listing-like .sps-reactions__like {
    min-width: 56px;
    min-height: 56px;
    border-radius: var(--spd-button-radius, 12px);
}

.spd-listing-like .sps-reactions__icon {
    width: 24px;
    height: 24px;
}

/* SEO Pro Stack sizes the tallies from their parent (0.9em), which in the
   hero's large buttons was 29px: the size of the rating's "642 reviews"
   instead (owner review, 24 October 2026). */
.spd-listing-shortlist > .sps-tallies {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--spd-text-small, 1.125rem);
    line-height: 1.4;
}

.spd-listing-hero .spd-listing-actions .spd-listing-like .sps-reactions__like {
    min-width: 64px;
    min-height: 64px;
    border-color: rgba(255, 255, 255, 0.42);
    background: transparent;
    color: var(--spd-on-accent);
}

.spd-listing-hero .spd-listing-actions .spd-listing-like .sps-reactions__like:hover,
.spd-listing-hero .spd-listing-actions .spd-listing-like .sps-reactions__like:focus-visible {
    border-color: var(--spd-on-accent);
}

.spd-listing-hero .spd-listing-shortlist > .sps-tallies {
    color: var(--spd-on-accent);
    opacity: 0.9;
}

.spd-listing-shortlist.spd-listing-shortlist-compact {
    flex: 1 1 10rem;
    margin: 0;
}

.spd-listing-shortlist-compact .sps-shortlist {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border-radius: var(--spd-button-radius, 10px);
    font-size: var(--spd-text-small, 1.125rem);
}

/* Inside the hero's enquiry panel, buttons take the page's colours again. */
.spd-listing-hero .spd-listing-message .spd-directory-button-primary,
.spd-listing-hero .spd-listing-enquiry-panel .spd-directory-button-primary {
    border-color: var(--spd-accent);
    background: var(--spd-accent);
    color: var(--spd-on-accent);
}

.spd-listing-hero .spd-listing-message .spd-directory-button-primary:hover,
.spd-listing-hero .spd-listing-enquiry-panel .spd-directory-button-primary:hover {
    border-color: var(--spd-accent-dark);
    background: var(--spd-accent-dark);
}

.spd-listing-hero .spd-listing-message {
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.spd-listing-hero .spd-listing-message a:focus-visible,
.spd-listing-hero .spd-listing-enquiry-panel a:focus-visible {
    outline-color: var(--spd-accent-text);
}

.spd-listing-hero-media {
    overflow: hidden;
    min-height: 300px;
    margin: 0;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: calc(var(--spd-radius) + 6px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.spd-listing-hero-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    cursor: zoom-in;
}

.spd-listing-hero-link:focus-visible {
    outline: 3px solid var(--spd-on-accent, #fff);
    outline-offset: -6px;
}

.spd-listing-hero-link:hover img {
    transform: scale(1.02);
}

/* The listing's image as a panel above About. The themes' figure margin
   would add to the gap between panels. */
.spd-listing-photo,
.spd-listing-content .spd-listing-photo {
    overflow: hidden;
    margin: 0;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-soft);
    box-shadow: 0 16px 42px rgba(24, 34, 48, 0.055);
}

.spd-listing-photo .spd-listing-hero-link:focus-visible {
    outline-color: var(--spd-accent-text);
}

.spd-listing-content > .spd-listing-photo + .spd-listing-section {
    margin-top: var(--spd-listing-panel-gap);
}

/* The photo in the hero, after its buttons. Wide screens: it hangs over the
   hero's lower edge (below); the details beside the contact card start one
   panel gap under it. Stacked layouts keep it inside the hero, as the
   enquiry form follows it there. */
.spd-listing-hero .spd-listing-photo {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

@media (min-width: 1025px) {
    .spd-listing-hero:has(.spd-listing-photo) {
        overflow: visible;
        overflow-x: clip;
    }

    .spd-listing-hero .spd-listing-photo {
        margin-bottom: calc(-1 * var(--spd-hero-overlap));
    }

    /* The plugin's layout, and a builder's row (Kadence pads its own). */
    .spd-listing-hero:has(.spd-listing-photo) + .spd-listing-layout,
    .spd-listing-hero:has(.spd-listing-photo) ~ .spd-listing-layout > .kt-row-column-wrap {
        padding-top: var(--spd-listing-layout-start);
    }

    .spd-listing-hero:has(.spd-listing-photo) ~ .spd-listing-layout .spd-listing-content {
        margin-top: calc(var(--spd-hero-overlap) - var(--spd-listing-hero-end) - var(--spd-listing-layout-start) + var(--spd-listing-panel-gap));
    }

    /* A hero with the "Send a message" form and no photo (the image is the
       first panel under it): the form sits inside the hero, its top level
       with the breadcrumbs, and the same space lies above the breadcrumbs,
       under the taller column and between the hero and the details. The
       photo and the contact card beside it then start level. */
    .spd-listing-hero:has(.spd-listing-message):not(:has(.spd-listing-photo)) {
        padding-block: var(--spd-listing-message-hero-gap);
    }

    /* Kadence pads its row's inner wrap too; the hero's own padding is the
       whole space. */
    .spd-listing-hero:has(.spd-listing-message):not(:has(.spd-listing-photo)) > .kt-row-column-wrap {
        padding-top: 0;
    }

    /* The breadcrumbs share the form's row: they stay in the left column. */
    .spd-listing-hero:has(.spd-listing-message):not(:has(.spd-listing-photo)) .spd-listing-breadcrumbs {
        max-width: 55%;
    }

    /* The form rises by the breadcrumbs' line and the space under it. */
    .spd-listing-hero:not(:has(.spd-listing-photo)) .spd-listing-hero-grid > .kt-row-column-wrap > :has(.spd-listing-message),
    .spd-listing-hero:not(:has(.spd-listing-photo)) .kt-row-column-wrap.spd-listing-hero-grid > :has(.spd-listing-message),
    .spd-listing-hero:not(:has(.spd-listing-photo)) .wp-block-columns.spd-listing-hero-grid > :has(.spd-listing-message) {
        position: relative;
        z-index: 2;
        margin-top: calc(-1 * (var(--spd-crumbs-line) + var(--spd-crumbs-gap)));
    }

    .spd-listing-hero:has(.spd-listing-message):not(:has(.spd-listing-photo)) ~ .spd-listing-layout > .kt-row-column-wrap {
        padding-top: var(--spd-listing-message-hero-gap);
    }

    .spd-listing-hero:has(.spd-listing-message):not(:has(.spd-listing-photo)) ~ .spd-listing-layout .spd-listing-sidebar {
        margin-top: 0;
    }
}

.spd-listing > .spd-listing-layout,
.wp-block-columns.spd-listing-layout,
.spd-listing-layout > .kt-row-column-wrap,
.kt-row-column-wrap.spd-listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    margin-bottom: 0;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.spd-listing-section + .spd-listing-section {
    margin-top: var(--spd-listing-panel-gap);
    padding-top: 0;
    border-top: 0;
}

.spd-listing-content > .kt-inside-inner-col {
    display: grid;
    gap: var(--spd-listing-panel-gap);
}

.spd-listing-content > .kt-inside-inner-col > * {
    min-width: 0;
    margin: 0;
}

.spd-listing-content > .kt-inside-inner-col > * + * {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.spd-listing-content .spd-listing-section {
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-surface);
    box-shadow: 0 16px 42px rgba(24, 34, 48, 0.055);
}

.spd-listing-part > .spd-listing-section,
.spd-listing-content > .spd-listing-section:not(.wp-block-kadence-rowlayout) {
    padding: var(--spd-listing-panel-padding);
}

.spd-listing-content .spd-directory-eyebrow,
.spd-listing-contact-card .spd-directory-eyebrow {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin: 0 0 0.75rem;
    color: var(--spd-accent-dark-text);
    font-size: var(--spd-text-compact, 1rem);
    font-weight: 800;
    letter-spacing: 0.085em;
    line-height: 1.35;
}

.spd-listing-content .spd-directory-eyebrow::before,
.spd-listing-contact-card .spd-directory-eyebrow::before {
    width: 1.35rem;
    height: 2px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    content: "";
    opacity: 0.55;
}

.spd-listing-prose {
    margin-top: 1.25rem;
    max-width: 65ch;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
    line-height: 1.75;
}

.spd-directory-tags-large {
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.spd-directory-tags-large li {
    --spd-tag-pad-block: 0.55rem;
    --spd-tag-pad-inline: 0.8rem;
}

/* With their section as parent: themes pad and space lists in content
   (Kadence: .single-content ul), which left a Featured listing's Gallery,
   Videos and Testimonials indented under their headings. */
.spd-listing-expertise-list,
.spd-listing-gallery,
.spd-listing-testimonials,
.spd-listing-jobs,
.spd-listing-social-links,
.spd-listing-section :is(.spd-listing-expertise-list, .spd-listing-gallery, .spd-listing-testimonials, .spd-listing-jobs, .spd-listing-social-links) {
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.spd-listing-content .spd-listing-expertise-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0;
}

.spd-listing-expertise-list li {
    display: flex;
    min-height: 3.5rem;
    flex-direction: column;
    justify-content: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--spd-border);
    border-radius: 12px;
    background: var(--spd-soft);
}

.spd-listing-expertise-name {
    color: var(--spd-accent-dark-text);
    font-weight: 750;
}

/* On the dark panel the tinted accent can sit too close to the panel's
   own colour: the page's text colour reads plainly. */
body.color-switch-dark .spd-listing-expertise-list .spd-listing-expertise-name {
    color: var(--global-palette3, #fff);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.spd-listing-expertise-list p {
    margin: 0.45rem 0 0;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
    line-height: 1.55;
}

/* One Gallery: up to six large images, then a horizontal scroller of
   thumbnails; all open in Kadence's lightbox (listing-block-view.js). */
.spd-listing-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.spd-listing-section .spd-listing-gallery-strip,
.spd-listing-section .spd-listing-video-strip {
    display: flex;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    padding: 0 0 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.spd-listing-gallery-strip li,
.spd-listing-video-strip li {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
}

.spd-listing-gallery-strip li {
    width: clamp(5.5rem, 16%, 8rem);
}

.spd-listing-video-strip li {
    width: clamp(9rem, 30%, 12rem);
}

.spd-listing-gallery-strip:focus-visible,
.spd-listing-video-strip:focus-visible {
    outline: 3px solid var(--spd-focus, var(--global-palette1, #2563eb));
    outline-offset: 3px;
}

.spd-listing-gallery a,
.spd-listing-gallery-strip a,
.spd-listing-video-section a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: var(--spd-soft);
    color: var(--spd-ink);
    text-decoration: none;
}

.spd-listing-gallery img,
.spd-listing-gallery-strip img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.spd-listing-gallery a:hover img,
.spd-listing-gallery-strip a:hover img,
.spd-listing-video-section a:hover img {
    transform: scale(1.03);
}

/* Videos: the first as one large cover, the rest in a scroller. */
.spd-listing-video-feature {
    margin-top: 1.35rem;
}

.spd-listing-video-section a > img,
.spd-listing-video-poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.25s ease;
}

/* Without a cover image: a dark panel, so nothing loads from the host. */
.spd-listing-video-poster {
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--global-palette1, #2563eb) 45%, transparent), transparent 60%),
        linear-gradient(135deg, #1f2937, #0b1220);
}

.spd-listing-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.spd-listing-video-strip .spd-listing-video-play {
    width: 2.75rem;
    height: 2.75rem;
}

.spd-listing-video-strip .spd-listing-video-play svg {
    width: 20px;
    height: 20px;
}

.spd-listing-video-section a:hover .spd-listing-video-play,
.spd-listing-video-section a:focus-visible .spd-listing-video-play {
    background: var(--global-palette1, #2563eb);
    transform: translate(-50%, -50%) scale(1.06);
}

.spd-listing-video-label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2rem 1rem 0.8rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
    color: #fff;
    font-weight: 750;
}

.spd-listing-video-strip .spd-listing-video-label {
    padding: 1.25rem 0.6rem 0.45rem;
    font-size: var(--spd-text-small, 1rem);
}

/* Kadence's lightbox (skin "kadence-dark spd-glightbox"): videos at 16:9,
   as large as the screen allows. */
.spd-glightbox .gslide-external {
    /* Its own width: GLightbox sizes the slide's box from its content. */
    width: min(92vw, calc(85vh * 16 / 9));
    min-width: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.spd-glightbox .gslide-external iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.spd-listing-lightbox {
    width: min(92vw, 1100px);
    max-width: none;
    max-height: 90vh;
    padding: 3rem 1rem 1rem;
    border: 0;
    border-radius: var(--spd-radius);
    /* A photo viewer: dark in light and dark mode alike. */
    background: #111;
    box-shadow: var(--spd-shadow);
    color: #fff;
}

.spd-listing-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.82);
}

.spd-listing-lightbox:not([open]) {
    display: none;
}

.spd-listing-lightbox[open] {
    display: grid;
    place-items: center;
}

.spd-listing-lightbox img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(90vh - 4rem);
    object-fit: contain;
}

/* An X icon button; the dialog's class keeps theme button colours, borders
   and shadows off it. */
.spd-listing-lightbox .spd-listing-lightbox-close,
.spd-listing-lightbox .spd-listing-lightbox-close:hover,
.spd-listing-lightbox .spd-listing-lightbox-close:focus {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 0;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    appearance: none;
}

.spd-listing-lightbox .spd-listing-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.spd-listing-lightbox .spd-listing-lightbox-close svg {
    display: block;
    width: 22px;
    height: 22px;
}

.spd-listing-lightbox .spd-listing-lightbox-close:focus-visible {
    /* The viewer is dark in both modes. */
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.spd-listing-testimonials,
.spd-listing-jobs {
    display: grid;
    gap: 1rem;
}

.spd-listing-testimonials figure,
.spd-listing-jobs article {
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--spd-border);
    border-radius: 14px;
    background: var(--spd-soft);
}

.spd-listing-testimonials h3,
.spd-listing-jobs h3 {
    margin-top: 0;
    font-size: var(--spd-h5-size, 1.1rem);
}

.spd-listing-testimonials blockquote {
    margin: 0.75rem 0;
    color: var(--spd-muted);
}

.spd-listing-testimonials figcaption {
    font-weight: 700;
}

.spd-listing-faqs {
    margin-top: 1.35rem;
    border-top: 1px solid var(--spd-border);
}

.spd-listing-faqs details {
    border-bottom: 1px solid var(--spd-border);
}

.spd-listing-faqs summary {
    padding: 1rem 2rem 1rem 0;
    cursor: pointer;
    font-weight: 750;
}

.spd-listing-faqs summary:focus-visible {
    outline: 3px solid var(--spd-accent-text);
    outline-offset: 3px;
}

.spd-listing-faqs details > div {
    padding: 0 0 1rem;
    color: var(--spd-muted);
}

.spd-listing-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.spd-listing-social-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--spd-border);
    border-radius: 999px;
    background: var(--spd-soft);
    color: var(--spd-accent-dark-text);
    font-weight: 700;
    text-decoration: none;
}

.spd-listing-location-panel > .kt-row-column-wrap,
.kt-row-column-wrap.spd-listing-location-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    padding: var(--spd-listing-panel-padding) !important;
}

.spd-listing-location-panel > .kt-row-column-wrap > .wp-block-kadence-column,
.kt-row-column-wrap.spd-listing-location-panel > .wp-block-kadence-column {
    width: 100%;
    min-width: 0;
}

.spd-listing-location-panel address,
.spd-listing-address {
    margin-top: 0.8rem;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
    font-style: normal;
    line-height: 1.65;
}

.spd-listing-map {
    overflow: hidden;
    width: calc(100% + var(--spd-listing-panel-padding) + var(--spd-listing-panel-padding)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 1.5rem calc(0px - var(--spd-listing-panel-padding)) 0;
    aspect-ratio: 1 / 1;
    border-block: 1px solid var(--spd-border);
    border-inline: 0;
    border-radius: 0;
    background: var(--spd-soft);
}

.spd-listing-map iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Google's keyless embed has no dark style: in dark mode, invert its
   lightness and turn the hues back, so roads, water and parks keep their
   colours on a dark map. */
body.color-switch-dark .spd-listing-map iframe {
    filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* A consent plugin's wrapper round the map (Complianz: .cmplz-placeholder-parent) fills the box too, before and after consent. */
.spd-listing-map > div {
    width: 100%;
    height: 100%;
}

a.spd-listing-map-action {
    display: inline-flex;
    min-height: 48px;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin-top: 1.25rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-button-radius, 10px);
    background: var(--spd-surface);
    color: var(--spd-ink);
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Links that open another site in a new tab: a bold arrow drawn at the
   text's size and colour, rather than the thin "↗" character (owner review,
   24 October 2026). Also the business's website, and the Privacy Policy
   link after a message form's agreement (owner review, 25 October 2026). */
a.spd-listing-map-action::after,
.spd-listing-social-links a::after,
a.spd-listing-review-link::after,
a.spd-listing-website-link::after,
a.spd-listing-website-button::after,
a.spd-new-tab-link::after {
    content: "";
    display: inline-block;
    flex: none;
    width: 0.72em;
    height: 0.72em;
    margin-inline-start: 0.35em;
    background-color: currentColor;
    vertical-align: -0.02em;
    -webkit-mask: var(--spd-external-icon) center / contain no-repeat;
    mask: var(--spd-external-icon) center / contain no-repeat;
}

/* Flex links: their gap spaces the arrow. */
a.spd-listing-map-action::after,
a.spd-listing-review-link::after {
    margin-inline-start: 0;
}

@media (forced-colors: active) {
    a.spd-listing-map-action::after,
    .spd-listing-social-links a::after,
    a.spd-listing-review-link::after,
    a.spd-listing-website-link::after,
    a.spd-listing-website-button::after,
    a.spd-new-tab-link::after {
        background-color: LinkText;
        forced-color-adjust: none;
    }
}

a.spd-listing-map-action:hover {
    transform: translateY(-1px);
    border-color: var(--spd-accent);
    color: var(--spd-accent-dark-text);
}

a.spd-listing-map-action > .spd-listing-map-action {
    margin: 0;
    color: inherit;
    font: inherit;
}

/* Two classes: a theme's content rule for dl (Kadence: .single-content dl) sets its top margin to 0. Same gap under the heading as Questions & answers. */
.spd-listing-section .spd-listing-hours,
.spd-listing-hours {
    overflow: hidden;
    margin: 1.25rem 0 0;
    border: 1px solid var(--spd-border);
    border-radius: 14px;
    background: var(--spd-surface);
}

.spd-listing-hours div,
.spd-listing-contact-list div {
    display: grid;
    grid-template-columns: minmax(100px, 0.55fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--spd-border);
}

.spd-listing-hours div:nth-child(even) {
    background: var(--spd-soft);
}

.spd-listing-hours div:last-child {
    border-bottom: 0;
}

.spd-listing-hours dt,
.spd-listing-contact-list dt {
    color: var(--spd-muted);
    font-weight: 700;
}

.spd-listing-hours dd,
.spd-listing-contact-list dd {
    margin: 0;
    color: var(--spd-ink);
}

.spd-listing-hours dd {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    text-align: right;
}

.spd-listing-sidebar {
    position: sticky;
    top: 2rem;
}

.spd-listing-contact-card {
    padding: clamp(1.5rem, 3vw, 1.85rem);
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-surface);
    box-shadow: inset 0 4px 0 var(--spd-accent), var(--spd-shadow);
}

.spd-listing-contact-card h2 {
    margin: 0;
    color: var(--spd-ink);
    font-size: var(--spd-h4-size, clamp(1.35rem, 2.2vw, 1.6rem));
    line-height: var(--spd-h4-line-height, 1.25);
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.spd-listing-contact-list {
    margin: 1rem 0 1.25rem;
}

.spd-listing-contact-list div {
    display: block;
    padding-inline: 0;
}

.spd-listing-contact-list dd {
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

.spd-listing-contact-list a {
    color: var(--spd-accent-dark-text);
}

.spd-listing-review-link {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

/* Listing enquiries: a button that opens the form (<details>). */
.spd-listing-contact-card + .spd-listing-enquiry,
.spd-listing-part-contact + .spd-listing-part-enquiry {
    margin-top: 1rem;
}

/* Fluent Forms' own bottom margins would double the panel's padding. */
.spd-listing-enquiry .frm-fluent-form,
.spd-listing-enquiry .frm-fluent-form .ff_submit_btn_wrapper {
    margin-bottom: 0;
}

/* An open form is taller than the screen: let it scroll with the page. */
.spd-listing-sidebar:has(.spd-listing-enquiry details[open]),
.spd-listing-sidebar:has(.spd-listing-message) {
    position: static;
}

/* Listing enquiries, "Send a message": an open panel (beside the listing's
   name in the plugin's layout). Placeholders stand in for its labels, which
   stay for screen readers. */
.spd-listing-message .spd-enquiry-field:not(.spd-enquiry-consent) > label,
.spd-listing-message .ff-el-input--label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.spd-listing-message .ff-el-group {
    margin-bottom: 0.9rem;
}

/* The agreement and the newsletter tick box under it: the same muted text at
   one size (18px), as in the built-in form. Smaller agreement text read as a
   different kind of tick box (owner review, 23 October 2026). */
.spd-listing-message .ff-el-tc .ff_t_c,
.spd-listing-message .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label,
.spd-listing-message .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label span {
    color: var(--spd-muted);
    font-size: 1.125rem;
    line-height: 1.5;
}

.spd-listing-message input::placeholder,
.spd-listing-message textarea::placeholder {
    color: var(--spd-muted);
    opacity: 1;
}

.spd-listing-message {
    padding: clamp(1.5rem, 3vw, 1.85rem);
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-surface);
    color: var(--spd-ink);
    box-shadow: var(--spd-shadow);
}

.spd-listing-message h2 {
    margin: 0 0 1rem;
    color: var(--spd-ink);
    font-size: var(--spd-h4-size, clamp(1.25rem, 2vw, 1.45rem));
    line-height: var(--spd-h4-line-height, 1.25);
    letter-spacing: -0.02em;
}

.spd-listing-message .spd-listing-enquiry-intro {
    margin-top: -0.5rem;
}

.spd-listing-enquiry summary {
    display: flex;
    width: 100%;
    cursor: pointer;
    list-style: none;
}

.spd-listing-enquiry summary::-webkit-details-marker {
    display: none;
}

.spd-listing-enquiry summary:focus-visible,
.spd-enquiry-form input:focus-visible,
.spd-enquiry-form select:focus-visible,
.spd-enquiry-form textarea:focus-visible,
.spd-enquiry-form button:focus-visible {
    outline: 3px solid var(--spd-accent-text);
    outline-offset: 3px;
}

.spd-listing-enquiry-panel {
    margin-top: 0.75rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-surface);
    color: var(--spd-ink);
}

.spd-listing-enquiry-panel h2 {
    margin: 0;
    color: var(--spd-ink);
    font-size: var(--spd-h4-size, clamp(1.25rem, 2vw, 1.45rem));
    line-height: var(--spd-h4-line-height, 1.25);
    letter-spacing: -0.02em;
}

.spd-listing-enquiry-intro {
    margin: 0.5rem 0 1rem;
    color: var(--spd-muted);
    line-height: 1.55;
}

.spd-enquiry-status {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--spd-border);
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.08);
    line-height: 1.5;
}

.spd-enquiry-status-sent {
    border-color: var(--spd-accent);
}

.spd-enquiry-form {
    display: grid;
    gap: 0.9rem;
}

.spd-enquiry-field {
    min-width: 0;
    margin: 0;
}

.spd-enquiry-field > label,
.spd-enquiry-choices legend {
    display: block;
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: var(--spd-text-small, 1.125rem);
    font-weight: 700;
}

.spd-enquiry-form input[type="text"],
.spd-enquiry-form input[type="email"],
.spd-enquiry-form input[type="tel"],
.spd-enquiry-form select,
.spd-enquiry-form textarea {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-button-radius, 10px);
    background: var(--spd-surface);
    color: var(--spd-ink);
    font: inherit;
}

.spd-enquiry-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.spd-enquiry-choices {
    margin: 0;
    padding: 0;
    border: 0;
}

.spd-enquiry-choices label {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0 1rem 0.25rem 0;
    font-size: inherit;
    font-weight: 400;
}

.spd-enquiry-field.spd-enquiry-consent > label {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 0;
    color: var(--spd-muted);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}

.spd-enquiry-consent input {
    margin-top: 0.2rem;
}

.spd-enquiry-consent a,
.spd-enquiry-required {
    color: var(--spd-accent-dark-text);
}

.spd-enquiry-submit {
    margin: 0;
}

.spd-enquiry-submit .spd-directory-button,
.spd-listing-enquiry-panel .ff-btn-submit.spd-directory-button,
.spd-listing-message .ff-btn-submit.spd-directory-button {
    width: 100%;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

/* The honeypot field: hidden from people, filled only by bots. */
.spd-enquiry-trap {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.spd-listing-back {
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* Below 1200px the five-across bar cuts the sort words off, so it takes two
   rows: the search and the first filter, then the rest with the button. */
@media (max-width: 1199px) {
    .spd-directory-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spd-directory-filter-search,
    .spd-directory-filter-search + .spd-directory-filter,
    .spd-directory-filters .spd-directory-button {
        grid-column: span 2;
    }
}

/* Two across: the button sits beside the sort when the sort starts a row,
   so no cell is left empty (the filter count varies by directory type). */
@media (max-width: 860px) {
    .spd-directory-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spd-directory-filter-search + .spd-directory-filter,
    .spd-directory-filter-sort:nth-child(even) + .spd-directory-button {
        grid-column: auto;
    }
}

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

    .spd-directory-kadence-query .kb-query-grid-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wp-block-columns.spd-listing-hero-grid,
    .wp-block-columns.spd-listing-layout,
    .spd-listing-hero > .spd-directory-shell > .spd-listing-hero-grid,
    .spd-listing > .spd-listing-layout,
    .spd-listing-hero-grid > .kt-row-column-wrap,
    .kt-row-column-wrap.spd-listing-hero-grid,
    .spd-listing-layout > .kt-row-column-wrap,
    .kt-row-column-wrap.spd-listing-layout {
        grid-template-columns: 1fr !important;
    }

    .spd-listing-hero-media {
        max-height: 520px;
    }

    .spd-listing-sidebar {
        grid-row: 1;
        position: static !important;
    }

    .spd-listing-content {
        grid-row: 2;
    }

    .spd-listing-contact-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.5rem;
    }
}

@media (max-width: 640px) {
    .spd-directory-shell {
        max-width: calc(100% - 1.25rem);
    }

    .spd-directory-hero {
        padding-top: 1.75rem;
    }

    .spd-directory-filters {
        grid-template-columns: 1fr;
        margin-inline: -0.15rem;
        border-radius: 14px 14px 0 0;
    }

    .spd-directory-filter-search,
    .spd-directory-filter-search + .spd-directory-filter,
    .spd-directory-filters .spd-directory-button {
        grid-column: auto;
    }

    .spd-directory-results-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .spd-directory-grid {
        grid-template-columns: 1fr;
    }

    .spd-directory-kadence-query .kb-query-grid-wrap {
        grid-template-columns: 1fr;
    }

    .wp-block-columns.spd-listing-hero-grid,
    .spd-listing-hero > .spd-directory-shell > .spd-listing-hero-grid {
        gap: 2.5rem;
    }

    /* Rating, place and status wrap whole, as on wider screens: a place
       squeezed beside the rating broke as "Blackfoot / , Alberta". */
    .spd-listing-trust-row > * {
        min-width: 0;
        max-width: 100%;
    }

    .spd-listing-hero-media {
        min-height: 230px;
    }

    .spd-listing-actions,
    .spd-listing-actions .spd-directory-button,
    .spd-listing-actions > .spd-listing-shortlist,
    .spd-listing-shortlist .sps-shortlist,
    .spd-listing-location-panel .spd-directory-button,
    a.spd-listing-map-action {
        width: 100%;
    }

    /* The heart keeps its square beside "Add to shortlist", which takes
       the rest of the row. */
    .spd-listing-shortlist > .spd-listing-like + .sps-shortlist {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .spd-listing-content,
    .spd-listing-location-panel {
        --spd-listing-panel-padding: 1.25rem;
    }

    .spd-listing-contact-list {
        display: block;
    }

    .spd-listing-layout > .kt-row-column-wrap,
    .kt-row-column-wrap.spd-listing-layout {
        padding-inline: 0 !important;
    }

    .spd-listing-content .spd-listing-expertise-list {
        grid-template-columns: 1fr;
    }

    .spd-listing-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Editorial (SEO landing pages): under a term page's results, and around a
   landing page's content in the theme's layout. */
.spd-directory-editorial {
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.spd-editorial-intro,
.spd-editorial-prose {
    max-width: 65ch;
    color: var(--spd-muted);
    line-height: 1.75;
}

.spd-editorial-intro {
    margin-bottom: 1.5rem;
}

.spd-editorial-intro > :first-child,
.spd-editorial-prose > :first-child {
    margin-top: 0;
}

.spd-editorial-intro > :last-child,
.spd-editorial-prose > :last-child {
    margin-bottom: 0;
}

.spd-editorial-section {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.spd-editorial-section h2 {
    margin: 0 0 0.75rem;
    color: var(--spd-ink);
    font-size: var(--spd-h3-size, clamp(1.3rem, 2vw, 1.6rem));
    line-height: var(--spd-h3-line-height, 1.25);
    letter-spacing: -0.02em;
}

.spd-editorial-related {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.8;
}

/*
 * Featured listings (an assigned, active Featured membership: post class
 * spd-featured-listing) in a directory's results: they come first, take the
 * whole row, have a thicker border in the accent colour and show a row of
 * their extra photos under their details. Beside their photo where there is
 * room. A theme can set --spd-featured-border-width and
 * --spd-featured-border-color on body. A Kadence Query Loop with the
 * "Featured as a card" style (is-style-spd-featured-card) keeps them cards
 * like the others, with their border and badge but no extra photos.
 */
.spd-directory-grid > .spd-featured-listing,
.spd-directory-kadence-query .wp-block-kadence-query:not(.is-style-spd-featured-card) .kb-query-item.spd-featured-listing {
    grid-column: 1 / -1;
}

.wp-block-kadence-query.is-style-spd-featured-card .spd-featured-listing a.spd-featured-thumbs {
    display: none;
}

.spd-directory-card.spd-featured-listing,
.spd-featured-listing .spd-directory-card,
.spd-landing-results :is(ol, ul).spd-ranked-list > li.spd-ranked-item.spd-featured-listing {
    border: var(--spd-featured-border-width, 3px) solid var(--spd-featured-border-color, var(--spd-accent));
}

/* One link to the photos on the listing's page: a single row of squares
   that shrink to fit. */
a.spd-featured-thumbs {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0;
    border-radius: calc(var(--spd-radius) / 2);
    text-decoration: none;
}

/* What follows the photos keeps its place at the card's foot (margin-top:
   auto), so the room above it is padding: the auto margin is nothing when
   the photos fill the card. */
a.spd-featured-thumbs + :is(.spd-directory-card-reactions-part, .spd-directory-card-link) {
    padding-top: 1rem;
}

a.spd-featured-thumbs:focus-visible {
    outline: 2px solid var(--spd-accent-dark-text);
    outline-offset: 3px;
}

.spd-featured-thumbs .spd-featured-thumb {
    display: block;
    flex: 0 1 7rem;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: calc(var(--spd-radius) / 2);
    background: var(--spd-soft);
}

.spd-featured-thumbs .spd-featured-thumb img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

a.spd-featured-thumbs:hover .spd-featured-thumb img {
    transform: scale(1.05);
}

@media (min-width: 641px) {
    .spd-directory-card.spd-featured-listing,
    :where(.wp-block-kadence-query:not(.is-style-spd-featured-card)) .spd-featured-listing .spd-directory-card > .kt-inside-inner-col {
        display: grid;
        grid-template-columns: minmax(15rem, 2fr) minmax(0, 3fr);
    }

    .spd-directory-card.spd-featured-listing > .spd-directory-card-media,
    :where(.wp-block-kadence-query:not(.is-style-spd-featured-card)) .spd-featured-listing .spd-directory-card > .kt-inside-inner-col > .spd-directory-card-media {
        height: 100%;
        min-height: 16rem;
        aspect-ratio: auto;
    }

    /* The photo beside the details: the card stays put on hover. */
    .spd-directory-card.spd-featured-listing:hover,
    :where(.wp-block-kadence-query:not(.is-style-spd-featured-card)) .spd-featured-listing .spd-directory-card:hover {
        transform: none;
    }
}

@media (max-width: 640px) {
    .spd-featured-thumbs .spd-featured-thumb:nth-child(n+5) {
        display: none;
    }
}

/* A landing page's listings: a ranked list, cards where the theme's content
   is narrow (phones), rows where it is wide. Parent and element in the
   selectors: themes style lists, headings, paragraphs and links in content
   (Kadence: .single-content ul). */
.spd-landing-results {
    container: spd-landing-results / inline-size;
}

/* A generated page's introduction, written from its listings. */
.spd-landing-results .spd-landing-intro {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.spd-landing-results .spd-landing-intro p {
    margin: 0 0 1rem;
}

.spd-landing-results .spd-landing-intro a {
    color: var(--spd-accent-dark-text);
    text-underline-offset: 0.2em;
}

.spd-landing-results :is(ol, ul).spd-ranked-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spd-landing-results :is(ol, ul).spd-ranked-list > li.spd-ranked-item {
    position: relative;
    display: grid;
    grid-template-areas:
        "media"
        "body"
        "actions";
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--spd-border);
    border-radius: var(--spd-radius);
    background: var(--spd-surface);
    box-shadow: 0 12px 30px rgba(24, 34, 48, 0.06);
    transition: box-shadow 180ms ease;
}

.spd-landing-results :is(ol, ul).spd-ranked-list > li.spd-ranked-item:hover {
    box-shadow: var(--spd-shadow);
}

.spd-ranked-item .spd-ranked-position {
    position: absolute;
    z-index: 1;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--spd-accent);
    color: var(--spd-on-accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.spd-ranked-item a.spd-ranked-media {
    display: block;
    grid-area: media;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--spd-soft);
    text-decoration: none;
}

.spd-ranked-item .spd-ranked-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.spd-ranked-item .spd-ranked-media .spd-directory-card-fallback {
    font-size: 3rem;
}

.spd-ranked-item .spd-ranked-body {
    grid-area: body;
    min-width: 0;
    padding: 1.1rem 1.25rem 0;
}

.spd-ranked-item h3.spd-ranked-title {
    margin: 0;
    color: var(--spd-card-title-color, var(--spd-ink));
    font-family: var(--spd-card-title-family, var(--global-heading-font-family, inherit));
    font-size: var(--spd-card-title-size, var(--spd-h3-size, 1.25rem));
    font-style: var(--spd-card-title-style, normal);
    font-weight: var(--spd-card-title-weight, var(--spd-h3-weight, 700));
    line-height: var(--spd-card-title-line-height, var(--spd-h3-line-height, 1.25));
    letter-spacing: var(--spd-card-title-letter-spacing, -0.02em);
    text-transform: var(--spd-card-title-transform, none);
}

.spd-ranked-item .spd-ranked-title a {
    color: inherit;
    text-decoration: none;
}

.spd-ranked-item .spd-ranked-title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.spd-ranked-item .spd-directory-card-meta {
    margin-top: 0.45rem;
}

.spd-ranked-item p.spd-directory-card-summary {
    margin: 0.5rem 0 0;
}

.spd-ranked-item ul.spd-directory-tags {
    margin: 0.8rem 0 0;
    padding: 0;
}

.spd-ranked-item ul.spd-directory-tags li {
    margin: 0;
}

.spd-ranked-item .spd-ranked-actions {
    display: flex;
    grid-area: actions;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
}

.spd-ranked-item .spd-ranked-actions .spd-directory-button {
    flex: 1 1 10rem;
}

/* The arrow: an inline flex box drops the space before it. */
.spd-landing-results a.spd-directory-button {
    gap: 0.4em;
    text-decoration: none;
}

.spd-landing-results a.spd-directory-button-primary,
.spd-landing-results a.spd-directory-button-primary:hover {
    color: var(--spd-on-accent);
}

.spd-landing-results a.spd-directory-button-secondary {
    color: var(--spd-ink);
}

.spd-landing-results a.spd-directory-button-secondary:hover {
    color: var(--spd-accent-dark-text);
}

/* Auto side margins: a theme that narrows paragraphs to a reading measure
   still centres the button in the results. */
.spd-landing-results p.spd-landing-more {
    margin: 2rem auto 0;
    text-align: center;
}

.spd-landing-results .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@container spd-landing-results (min-width: 40rem) {
    /* Side columns: the buttons' column is as wide as its widest label, so
       a phone number or "On your shortlist" stays on one line (owner
       review, 23 October 2026). The rows share the list's columns
       (subgrid, below), so every row's photo and buttons line up. */
    .spd-landing-results :is(ol, ul).spd-ranked-list > li.spd-ranked-item {
        grid-template-areas: "position media body actions";
        grid-template-columns: 2.75rem 8.5rem minmax(0, 1fr) minmax(12.5rem, max-content);
        gap: 0 1.25rem;
        align-items: center;
        padding: 1rem 1.25rem 1rem 1rem;
    }

    @supports (grid-template-columns: subgrid) {
        .spd-landing-results :is(ol, ul).spd-ranked-list {
            grid-template-columns: 2.75rem 8.5rem minmax(0, 1fr) minmax(11rem, max-content);
            column-gap: 1.25rem;
        }

        .spd-landing-results :is(ol, ul).spd-ranked-list > li.spd-ranked-item {
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
        }
    }

    .spd-ranked-item .spd-ranked-actions .spd-directory-button,
    .spd-ranked-item .spd-ranked-actions .sps-shortlist {
        white-space: nowrap;
    }

    .spd-ranked-item .spd-ranked-position {
        position: static;
        grid-area: position;
        justify-self: center;
        box-shadow: none;
    }

    .spd-ranked-item a.spd-ranked-media {
        aspect-ratio: 1;
        border-radius: calc(var(--spd-radius) - 6px);
    }

    .spd-ranked-item .spd-ranked-media .spd-directory-card-fallback {
        font-size: 2rem;
    }

    .spd-ranked-item .spd-ranked-body {
        padding: 0;
    }

    .spd-ranked-item .spd-ranked-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0;
    }

    .spd-ranked-item .spd-ranked-actions .spd-directory-button,
    .spd-ranked-item .spd-ranked-actions .spd-listing-shortlist-compact {
        flex: 0 0 auto;
        padding-inline: 0.75rem;
    }

    .spd-ranked-item .spd-ranked-actions .spd-listing-shortlist-compact {
        padding-inline: 0;
    }

    /* A Featured row's photos: under its details, beside its photo. */
    .spd-ranked-item.spd-featured-listing a.spd-featured-thumbs {
        max-width: 44rem;
    }
}

/* A landing page's Featured group above its ranked list, and the labels
   naming each: small uppercase, as the page's eyebrows. */
.spd-landing-results p.spd-landing-group-label {
    margin: 0 0 0.75rem;
    color: var(--spd-accent-dark-text);
    font-size: var(--spd-text-compact, 1rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.spd-landing-results .spd-ranked-list-featured + p.spd-landing-group-label {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.spd-ranked-item .spd-ranked-position-featured {
    padding: 0;
    background: var(--spd-featured-border-color, var(--spd-accent));
}

.spd-ranked-item .spd-ranked-position-check {
    padding: 0;
}

.spd-ranked-item :is(.spd-ranked-position-featured, .spd-ranked-position-check) svg {
    display: block;
}

.spd-landing-results *,
.spd-directory-index *,
.spd-landing-links * {
    box-sizing: border-box;
}

/* Hub pages ([spd_directory_index]) and a term page's landing pages: names
   A to Z with listing counts. */
.spd-directory-index {
    color: var(--spd-ink);
}

/* Parent and element in the selectors: themes indent lists in content
   (Kadence: .single-content ul). */
.spd-directory-index .spd-directory-index-letters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.spd-directory-index-letters a {
    display: inline-flex;
    min-width: 2.5rem;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--spd-border);
    border-radius: 999px;
    color: var(--spd-accent-dark-text);
    font-weight: 750;
    text-decoration: none;
}

.spd-directory-index-letters a:hover {
    background: var(--spd-soft);
}

.spd-directory-index a:focus-visible,
.spd-landing-links a:focus-visible,
.spd-landing-results a:focus-visible {
    outline: 3px solid var(--spd-accent-text);
    outline-offset: 3px;
}

.spd-directory-index-group {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    scroll-margin-top: 6rem;
}

.spd-directory-index-letter {
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--spd-border);
    color: var(--spd-ink);
    font-size: var(--spd-h3-size, clamp(1.3rem, 2vw, 1.6rem));
    line-height: var(--spd-h3-line-height, 1.25);
}

.spd-directory-index ul.spd-directory-index-list,
.spd-landing-links ul.spd-directory-index-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Landing pages are named in full ("Plumber in Leeds"): wider columns. */
.spd-directory-index-find ul.spd-directory-index-list,
.spd-landing-links ul.spd-directory-index-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

/* Towns and areas: the letter groups in three columns, two on tablets, one
   on phones, read across: A, B, C on the first row (a town list has few
   names a letter, so columns inside each group would leave one thin
   column). The A to Z stays above. */
.spd-directory-index-locations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 2.5rem;
}

.spd-directory-index-locations > .spd-directory-index-letters {
    grid-column: 1 / -1;
}

.spd-directory-index-locations ul.spd-directory-index-list {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
    .spd-directory-index-locations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .spd-directory-index-locations {
        grid-template-columns: minmax(0, 1fr);
    }
}

.spd-directory-index-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--spd-border);
}

.spd-directory-index-list a {
    color: var(--spd-accent-dark-text);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-underline-offset: 0.22em;
}

.spd-directory-index-meta {
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
}

/* Guides (SEOProDirectory_Guides): the blog's service badges under its
   title, aligned as the title is (inline badges take the header's text
   alignment), the current one in the hover colours; and a guide's links to
   its services' landing pages after its content. */
.spd-guide-topics ul.spd-directory-tags {
    display: block;
    margin: 1.25rem 0 0;
}

.spd-guide-topics .spd-directory-tags li {
    display: inline-block;
    margin: 0.2rem;
}

.spd-guide-topics .spd-directory-tags li > a[aria-current="page"] {
    background: var(--spd-badge-hover-background);
    color: var(--spd-badge-hover, var(--spd-on-accent));
}

/* Kadence's archive header centres its content in a fixed minimum height
   with no padding of its own: the badges' row would take that space and
   leave the title against the menu, so the header keeps room above and
   below. */
.entry-header:has(> .spd-guide-topics) {
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* On phones the badges are one row that scrolls sideways, from edge to
   edge, so the posts are not pushed below a screen of badges; the next
   badge showing at the edge says there is more. */
@media (max-width: 767px) {
    .spd-guide-topics {
        align-self: stretch;
        max-width: none;
        margin-inline: calc(-1 * var(--global-content-edge-padding, 1.5rem));
    }

    .spd-guide-topics ul.spd-directory-tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--global-content-edge-padding, 1.5rem);
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 0.2rem var(--global-content-edge-padding, 1.5rem) 0.4rem;
    }

    .spd-guide-topics ul.spd-directory-tags::-webkit-scrollbar {
        display: none;
    }

    .spd-guide-topics .spd-directory-tags li {
        flex: 0 0 auto;
        margin: 0;
        scroll-snap-align: start;
    }
}

.spd-guide-links {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.spd-guide-links h2 {
    margin: 0 0 0.75rem;
}

.spd-editorial-reviewed {
    margin: 2rem 0 0;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
}

/* Messages need an account: the listing's message panel asks a visitor to
   log in (GH#147). */
.spd-enquiry-login {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.spd-enquiry-login p {
    margin: 0;
    color: var(--spd-muted);
    line-height: 1.55;
}

.spd-enquiry-login .spd-directory-button {
    justify-content: center;
    width: 100%;
}

.spd-enquiry-login .spd-enquiry-register {
    text-align: center;
}

.spd-enquiry-login a:not(.spd-directory-button) {
    color: var(--spd-accent-text);
    font-weight: 600;
}

/* My Account: Messages and My Listings (GH#147). */
.spd-account-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spd-account-list > li {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    border-radius: var(--spd-radius);
    background: var(--spd-soft);
    color: var(--spd-ink);
}

.spd-account-list > li::before {
    content: none;
}

.spd-account p {
    margin: 0;
}

.spd-account-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    color: var(--spd-muted);
    font-size: var(--spd-text-small, 1.125rem);
}

.spd-account-to {
    margin-top: 0.5rem !important;
    font-weight: 600;
}

.spd-account-to a,
.spd-account-action {
    color: var(--spd-accent-text);
}

.spd-account-message-text {
    margin-top: 0.5rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.spd-account-message-text p + p {
    margin-top: 0.75rem;
}

.spd-account-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--spd-surface);
    color: var(--spd-ink);
    font-size: var(--spd-text-compact, 1rem);
    font-weight: 700;
    line-height: 1.4;
}

.spd-account-status--sent,
.spd-account-status--featured {
    background: var(--spd-accent);
    color: var(--spd-on-accent);
}

.spd-account-note,
.spd-account-empty {
    color: var(--spd-muted);
    line-height: 1.55;
}

.spd-account-list + .spd-account-note {
    margin-top: 1.25rem !important;
    font-size: var(--spd-text-small, 1.125rem);
}

.spd-account-listing {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.spd-account-listing-image {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: calc(var(--spd-radius) / 2);
    object-fit: cover;
}

.spd-account-listing-body {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.spd-account-listing-title {
    font-size: var(--spd-h5-size, 1.1rem);
    font-weight: var(--spd-h5-weight, 700);
}

.spd-account-listing-meta {
    color: var(--spd-muted);
}

.spd-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.25rem !important;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .spd-directory-card,
    .spd-landing-results :is(ol, ul).spd-ranked-list > li.spd-ranked-item,
    .spd-directory-card-media img,
    .spd-directory-button,
    a.spd-listing-map-action,
    .spd-directory-empty-reset .wp-block-button__link {
        transition: none;
    }
}