/*
 * Appliance Spotlight — page styles
 *
 * GENERATED FILE — do not edit in place. Edits here are overwritten on the next build.
 * Source:  hostinger/plugin-base/base.css
 *          + sites/appliance-spotlight/data/site.json → plugin.palette
 *          + sites/appliance-spotlight/wordpress/wp-content/plugins/_src/site.css (appended below, if present)
 * Rebuild: node hostinger/src/build-plugin.js --site=appliance-spotlight
 */

/* ─── Design tokens ─────────────────────────────────────── */
/*
 * Values come from this site's palette in data/site.json; the rules that consume them are shared.
 *
 * Two of these are layout rather than colour, and are worth understanding before changing:
 *
 *   --asp-container  The Hostinger AI theme sets --wp--style--global--content-size to 700px,
 *                    and block themes cap every direct child of an .is-layout-constrained
 *                    wrapper at that value. Our <article> is such a child, so it rendered at
 *                    700px inside a 1313px parent — roughly 600px of dead space, and a
 *                    six-column comparison table squeezed into 652px. Widened here, with
 *                    running prose held to a readable measure separately, so the extra width
 *                    goes to tables and cards rather than to 110-character lines.
 *
 *   --asp-measure    Text fills the container by default. Set this to a ch value (~78ch) to
 *                    reintroduce a narrower reading column. At a 1120px container, body text
 *                    runs to roughly 110 characters per line — wider than the classic 50-75
 *                    optimum, and a deliberate choice: the container was widened precisely so
 *                    content could use it.
 */

:root {
    --asp-accent: #4338ca; /* indigo-700 — 7.2:1 on white */
    --asp-accent-deep: #3730a3; /* indigo-800 — the button ground */
    --asp-accent-hover: #312e81; /* indigo-900 */
    --asp-accent-dark: #1e1b4b; /* indigo-950 */
    --asp-accent-soft: #e0e7ff; /* indigo-100 */
    --asp-accent-glow: #c7d2fe; /* indigo-200 */
    --asp-accent-mid: #a5b4fc; /* indigo-300 */
    --asp-hero-bg: #eef2ff; /* indigo-50 */
    --asp-page-bg: #fcfcfd; /* near-white, cool */
    --asp-surface: #ffffff;
    --asp-border: #e2e8f0; /* slate-200 */
    --asp-border-soft: #f1f5f9; /* slate-100 */
    --asp-heading: #0f172a; /* slate-900 */
    --asp-heading-accent: #b45309; /* amber-700 */
    --asp-subheading: #b45309; /* amber-700 */
    --asp-body: #1e293b; /* slate-800 */
    --asp-body-mid: #334155; /* slate-700 */
    --asp-muted: #475569; /* slate-600 */
    --asp-muted-light: #64748b; /* slate-500 */
    --asp-neutral-border: #e2e8f0; /* slate-200 */
    --asp-table-head-bg: #e0e7ff; /* indigo-100 */
    --asp-table-head-text: #1e1b4b; /* indigo-950 */
    --asp-table-row-alt: #fcfcfd;
    --asp-callout-bg: #fffbeb; /* amber-50 */
    --asp-callout-border: #fbbf24; /* amber-400 */
    --asp-decision-bg: #fcfcfd;
    --asp-badge: #3730a3;
    --asp-badge-text: #ffffff;
    --asp-container: 1148px; /* the theme's 1100px wide size plus the article's 2×24px padding, so page content sits on the same edge as the header and the grids */
    --asp-measure: 100%; /* set to ~78ch on prose blocks by the shared layout rules */
}


/* ─── Force full-width layout (override theme sidebar) ───── */
/*
 * Most WordPress themes reserve space for a sidebar even on pages with no
 * sidebar content, leaving a blank column on the right. These rules expand
 * the theme's primary content area to fill the full container so our
 * article can center itself correctly.
 */

body.appliance-spotlight #primary,
body.appliance-spotlight .content-area,
body.appliance-spotlight #content,
body.appliance-spotlight .site-content,
body.appliance-spotlight .content-wrap,
body.appliance-spotlight .entry-content-wrap,
body.appliance-spotlight .entry-content,
body.appliance-spotlight .single-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}

body.appliance-spotlight #secondary,
body.appliance-spotlight .widget-area,
body.appliance-spotlight .sidebar {
    display: none !important;
}

/* ─── Layout width ───────────────────────────────────────── */
/*
 * The Hostinger AI theme sets --wp--style--global--content-size to 700px, and block
 * themes cap every direct child of an .is-layout-constrained wrapper at that value.
 * Our <article> is such a child, so it rendered at 700px inside a 1313px parent —
 * about 600px of dead space, and a six-column comparison table squeezed into 652px.
 *
 * Measured in-browser at 1440px viewport after this change:
 *   article 1120 · table 1072 · card grid 1072 · prose 835 (~78 characters)
 *
 * !important is needed because the theme's cap comes from the generated global
 * stylesheet at higher specificity.
 */
body.appliance-spotlight .entry-content > .page-content,
body.appliance-spotlight .entry-content > .pillar-page,
body.appliance-spotlight .page-content,
body.appliance-spotlight .pillar-page {
    max-width: var(--asp-container) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Prose is LEFT-aligned rather than centred, so headings, body copy and callouts all
 * share one left edge. Centring a narrower column inside the wider container gave them
 * three different left edges, which read as broken alignment.
 *
 * Width is governed by --asp-measure, currently 100% so text fills the container.
 */
.page-content > h1,
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > blockquote,
.page-content > .asp-callout,
.pillar-page > h1,
.pillar-page > p,
.pillar-page > ul,
.pillar-page > ol,
.pillar-page > h2,
.pillar-page > h3,
.pillar-page > h4,
.pillar-page > blockquote,
.pillar-page > .asp-callout,
.asp-faq > h2,
.asp-faq > h3,
.asp-faq > p {
    max-width: var(--asp-measure);
    margin-left: 0;
    margin-right: auto;
}

/* The elements the extra width was reclaimed for. */
.page-content > table,
.pillar-page > table,
.page-content > .asp-hero,
.pillar-page > .asp-hero,
.page-content > .asp-card-grid,
.pillar-page > .asp-card-grid,
.page-content > nav,
.pillar-page > nav {
    max-width: 100%;
}

/*
 * The theme prints the post title as its own <h1> above our content, which already
 * opens with an <h1>. That is two H1s with near-identical text on every page. Ours is
 * the one to keep — it carries the fuller, keyword-bearing headline ("…Compared: 9
 * Sensors by Hub Compatibility" against the theme's bare page title).
 */
/*
 * Matched on the bare block class, NOT on a theme-specific modifier. The original selector
 * required `.hostinger-ai-page-title`, which only exists because water-leak-hub's custom page
 * template adds it — so the rule silently did nothing on any site running a different theme.
 * campgeardata.com is on twentytwentyfive, which emits a plain `.wp-block-post-title`, and shipped
 * two H1s on every page until this was widened.
 *
 * Safe against our own markup: page-pack headings are bare <h1> inside .page-content /
 * .pillar-page and never carry the block class, so only the theme's duplicate is hidden.
 */
body.appliance-spotlight .wp-block-post-title,
body.appliance-spotlight .wp-block-post-title.hostinger-ai-page-title {
    display: none !important;
}

/* The front page is the one place the theme title is the *only* H1 worth keeping if our own
 * hero somehow fails to render — but our home fragment always opens with an <h1>, so it is
 * hidden there too for consistency. Revisit only if a page ships without its own H1. */

/* Below the container width there is nothing to reclaim — let prose use the room. */
@media (max-width: 1180px) {
    .page-content > h1,
    .page-content > p,
    .page-content > ul,
    .page-content > ol,
    .page-content > h2,
    .page-content > h3,
    .page-content > h4,
    .page-content > blockquote,
    .page-content > .asp-callout,
    .pillar-page > h1,
    .pillar-page > p,
    .pillar-page > ul,
    .pillar-page > ol,
    .pillar-page > h2,
    .pillar-page > h3,
    .pillar-page > h4,
    .pillar-page > blockquote,
    .pillar-page > .asp-callout,
    .asp-faq > h2,
    .asp-faq > h3,
    .asp-faq > p {
        max-width: 100%;
    }
}

/* ─── Featured image banner ──────────────────────────────── */
/*
 * The theme's page template shipped with only post-title and post-content — no
 * post-featured-image block at all — so featured images were set in the database and
 * never rendered. The template now includes one; these rules make it a banner rather
 * than a 640px-tall wall of image (the sources are 1344x768, which at container width
 * would otherwise push all content below the fold).
 */
.asp-page-hero {
    /* Match the content column exactly. The article carries 1.5rem of horizontal
       padding, so the banner has to subtract 3rem from the container or it sits 24px
       proud on each side — close enough to alignment to look like a mistake rather
       than a choice. Measured: banner 1120 at x=153 against content 1072 at x=201. */
    max-width: calc(var(--asp-container) - 3rem);
    margin-left: auto;
    margin-right: auto;
}

.asp-page-hero img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* The hero and the page's h1 sat 72px apart: the figure's 16px bottom margin collapsed
   into the following group's 40px theme block-gap, then the article added 32px of top
   padding on top of that (measured on dreammattress home and a specbaseline hub alike,
   2026-09-17). With a hero above it the article needs neither; the figure's own margin is
   the whole gap, lifted to 24px so the h1 does not touch the banner. */
.asp-page-hero + .wp-block-group {
    margin-top: 0 !important;
}
.asp-page-hero {
    margin-bottom: 1.5rem !important;
}
.asp-page-hero + .wp-block-group .entry-content > .page-content,
.asp-page-hero + .wp-block-group .entry-content > .pillar-page {
    padding-top: 0;
}

/* On the posts-index front the hero is followed by the tinted title card, whose own 36px
   top padding put the h1 60px under the image while every other page has it at 24px.
   With a hero above it the card keeps just enough tint over the heading. */
.asp-page-hero + .asp-front-hero {
    padding-top: 1.25rem !important;
}

/* The front page shows its banner above the gradient hero card. An earlier version
   hid it here on the theory that two heroes was one too many — that was the wrong
   call for the site's most important page, which was left as the only page with no
   image at all. */

@media (max-width: 640px) {
    .asp-page-hero img {
        max-height: 180px;
        border-radius: 8px;
    }
}

/* ─── Product thumbnails in comparison tables ────────────── */
/*
 * The thumbnail sits inside the affiliate anchor, so it inherits the rel="nofollow
 * sponsored" already on that link and reads to Amazon as imagery presented in
 * connection with the link it belongs to.
 *
 * Sources are Amazon CDN renders at _AC_SL320_ (~10 KB). Fixed box + object-fit
 * contain keeps a row height stable regardless of the source aspect ratio, and
 * white background matches Amazon's cut-outs so odd-shaped products do not show a
 * grey block behind them.
 */
.asp-product-cell a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.asp-product-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--asp-border-soft);
    border-radius: 6px;
    padding: 3px;
}

.asp-product-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.asp-product-cell a:hover .asp-product-name {
    color: var(--asp-accent-hover);
}

@media (max-width: 640px) {
    .asp-product-cell a { gap: 0.5rem; }
    .asp-product-thumb { width: 40px; height: 40px; }
}

/* ─── Contact form (Contact Form 7) ──────────────────────── */
/*
 * CF7 ships almost no styling — raw browser inputs and a default grey submit button,
 * which on this site looked like an unfinished page. These rules put the form in a
 * card that matches the callout treatment used elsewhere and size the controls to the
 * body text rather than the browser default.
 */
.asp-contact-form {
    background: var(--asp-page-bg);
    border: 1px solid var(--asp-border-soft);
    border-radius: 12px;
    padding: 1.75rem 1.75rem 1.5rem;
    margin: 1.5rem 0 2.5rem;
    max-width: 640px;
}

.asp-contact-form .wpcf7-form p {
    margin: 0 0 1.15rem;
    max-width: 100%;
}

.asp-contact-form label {
    display: block;
    font-weight: 600;
    color: var(--asp-heading-accent);
    font-size: 0.9375rem;
    margin-bottom: 0.35rem;
}

.asp-contact-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0.35rem;
}

.asp-contact-form input[type="text"],
.asp-contact-form input[type="email"],
.asp-contact-form input[type="url"],
.asp-contact-form input[type="tel"],
.asp-contact-form select,
.asp-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;
    color: var(--asp-body);
    background: var(--asp-surface);
    border: 1px solid var(--asp-border);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Height is set here rather than left to CF7's rows attribute. The shortcode takes its
 * size as COLSxROWS, so a transposed `8x40` yields rows="40" — a 1047px textarea that
 * pushes the submit button off-screen. Fixing it in CSS makes the layout immune to that
 * whichever way round the shortcode is written.
 */
.asp-contact-form textarea {
    height: 190px;
    min-height: 190px;
    max-height: 60vh;
    resize: vertical;
    line-height: 1.6;
}

.asp-contact-form input:focus,
.asp-contact-form select:focus,
.asp-contact-form textarea:focus {
    outline: none;
    border-color: var(--asp-accent);
    box-shadow: 0 0 0 3px var(--asp-accent-glow);
}

.asp-contact-form .asp-req {
    font-weight: 500;
    color: var(--asp-muted);
    font-size: 0.8125rem;
}

.asp-contact-form .asp-opt {
    font-weight: 400;
    color: var(--asp-muted-light);
    font-size: 0.8125rem;
}

.asp-contact-form .asp-form-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--asp-muted);
}

.asp-contact-form .wpcf7-submit {
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    /* accent-deep, not accent: white on the 500 shade is ~2.5-2.8:1 in every palette here. */
    background: var(--asp-accent-deep);
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.6rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.asp-contact-form .wpcf7-submit:hover {
    background: var(--asp-accent-hover);
}

.asp-contact-form .wpcf7-submit:focus-visible {
    outline: 3px solid var(--asp-accent-glow);
    outline-offset: 2px;
}

/* Validation and submission feedback. CF7's defaults are unstyled red text with a
   full-width border that reads as a broken layout. */
.asp-contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #b91c1c;
}

.asp-contact-form input.wpcf7-not-valid,
.asp-contact-form select.wpcf7-not-valid,
.asp-contact-form textarea.wpcf7-not-valid {
    border-color: #dc2626;
}

.asp-contact-form .wpcf7-response-output {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border-width: 1px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.asp-contact-form form.sent .wpcf7-response-output {
    border-color: var(--asp-accent);
    background: var(--asp-callout-bg);
    color: var(--asp-heading-accent);
}

.asp-contact-form form.invalid .wpcf7-response-output,
.asp-contact-form form.failed .wpcf7-response-output {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.asp-contact-form .wpcf7-spinner {
    margin: 0 0 0 0.75rem;
}

@media (max-width: 640px) {
    .asp-contact-form {
        padding: 1.25rem 1rem 1rem;
        border-radius: 8px;
    }
    .asp-contact-form .wpcf7-submit { width: 100%; }
}

/* ─── Header lockup: logo + site name ────────────────────── */
/*
 * The Hostinger AI theme hides the site title as soon as a site logo is set — a
 * "logo OR wordmark" pattern. That is a reasonable default for a logo that already
 * contains the brand name, but ours is a bare droplet mark, so setting it silently
 * removed the site's name from the header entirely.
 *
 * Both are shown here: the mark scaled down to sit beside the name rather than
 * dominating at the theme's 80px.
 */
body.appliance-spotlight .wp-block-site-title,
body.appliance-spotlight .hostinger-ai-site-title {
    display: block !important;
}

body.appliance-spotlight .wp-block-site-title a {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--asp-heading) !important;
}

body.appliance-spotlight .wp-block-site-title a:hover {
    color: var(--asp-accent-hover) !important;
}

/*
 * Constrain the logo by HEIGHT, never by forcing a square.
 *
 * This was `width: 44px; height: 44px`, which is correct only for a bare square mark like
 * water-leak-hub's droplet. campgeardata.com's logo is a 4.75:1 horizontal lockup carrying the
 * wordmark, and the square rule crushed it to 44px wide — unreadable, and it looked like the logo
 * had failed to load rather than been mis-styled.
 *
 * Height-only with `width: auto` serves both: a square mark still renders 44x44, and a wide lockup
 * scales proportionally instead of being squashed. max-width stops an extreme lockup pushing the
 * navigation off the row.
 */
body.appliance-spotlight .wp-block-site-logo img {
    height: 44px !important;
    width: auto !important;
    max-width: 300px;
    border-radius: 8px;
}

body.appliance-spotlight .hostinger-ai-menu-wrapper > .wp-block-group:first-child {
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    body.appliance-spotlight .wp-block-site-title a { font-size: 1.05rem; }
    body.appliance-spotlight .wp-block-site-logo img { height: 36px !important; width: auto !important; }
}

/* ─── Base ───────────────────────────────────────────────── */

.page-content,
.pillar-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--asp-body);
    background-color: var(--asp-surface);
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 3.5rem;
    box-sizing: border-box;
}

/* ─── Hero ───────────────────────────────────────────────── */

.asp-hero {
    background: linear-gradient(140deg, var(--asp-hero-bg) 0%, var(--asp-accent-soft) 100%);
    border: 1px solid var(--asp-accent-glow);
    border-radius: 12px;
    padding: 3rem 2.25rem;
    margin-bottom: 3rem;
    text-align: center;
}

.asp-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--asp-heading-accent);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.asp-hero p {
    font-size: 1.125rem;
    color: var(--asp-body-mid);
    margin: 0 0 1.75rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

.asp-btn {
    display: inline-block;
    /* accent-deep, not accent: white on the 500 shade is ~2.5-2.8:1 in every palette here. */
    background-color: var(--asp-accent-deep);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem 1.875rem;
    border-radius: 6px;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease;
}

.asp-btn:hover {
    background-color: var(--asp-accent-hover) !important;
}

/* ─── Typography ─────────────────────────────────────────── */

.page-content h1,
.pillar-page h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--asp-heading);
    margin: 0 0 0.625rem;
    line-height: 1.28;
}

.page-content h2,
.pillar-page h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--asp-heading-accent);
    margin: 2.75rem 0 0.875rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--asp-accent-glow);
    line-height: 1.35;
}

.page-content h3,
.pillar-page h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--asp-subheading);
    margin: 1.875rem 0 0.5rem;
}

.page-content h4,
.pillar-page h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--asp-heading);
    margin: 1.5rem 0 0.375rem;
}

.page-content p,
.pillar-page p {
    margin: 0 0 1.125rem;
}

.asp-note {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--asp-muted-light);
    margin-top: -0.5rem;
    margin-bottom: 2rem;
}

.asp-updated {
    font-size: 0.875rem;
    color: var(--asp-muted-light);
    margin-bottom: 1.625rem;
}

.asp-lead {
    font-size: 1.125rem;
    color: var(--asp-body-mid);
    line-height: 1.72;
    margin-bottom: 2rem;
    border-left: 4px solid var(--asp-accent-mid);
    padding-left: 1rem;
    background: var(--asp-hero-bg);
    border-radius: 0 6px 6px 0;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* ─── Links ──────────────────────────────────────────────── */

.page-content a,
.pillar-page a {
    color: var(--asp-accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.12s;
}

.page-content a:hover,
.pillar-page a:hover {
    color: var(--asp-accent-hover);
}

/* ─── Lists ──────────────────────────────────────────────── */

.page-content ul,
.pillar-page ul {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.375rem;
}

.page-content ol,
.pillar-page ol {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.5rem;
}

.page-content li,
.pillar-page li {
    margin-bottom: 0.4rem;
}

.page-content ul > li::marker,
.pillar-page ul > li::marker {
    color: var(--asp-accent);
}

.page-content ol > li::marker,
.pillar-page ol > li::marker {
    color: var(--asp-accent-deep);
    font-weight: 700;
}

/* ─── Category cards ─────────────────────────────────────── */

.asp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.125rem;
    margin: 1.5rem 0 2.25rem;
}

.asp-card {
    background: var(--asp-hero-bg);
    border: 1px solid var(--asp-accent-glow);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.asp-card:hover {
    border-color: var(--asp-accent-mid);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.14);
}

.asp-card h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--asp-accent-deep);
    font-weight: 700;
}

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

.asp-card h3 a:hover {
    color: var(--asp-accent-hover);
}

.asp-card p {
    font-size: 0.9375rem;
    color: var(--asp-body-mid);
    margin: 0;
    line-height: 1.6;
}

/* ─── Tables ─────────────────────────────────────────────── */

.page-content table,
.pillar-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.9375rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--asp-border-soft);
}

.page-content thead,
.pillar-page thead {
    background-color: var(--asp-table-head-bg);
}

.page-content th,
.pillar-page th {
    color: var(--asp-table-head-text);
    font-weight: 700;
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--asp-accent-mid);
}

.page-content td,
.pillar-page td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--asp-border-soft);
    color: var(--asp-body);
    vertical-align: top;
}

.page-content tr:last-child td,
.pillar-page tr:last-child td {
    border-bottom: none;
}

.page-content tbody tr:nth-child(even) td,
.pillar-page tbody tr:nth-child(even) td {
    background-color: var(--asp-table-row-alt);
}

/* ─── Callouts ───────────────────────────────────────────── */

.asp-callout,
blockquote {
    background: var(--asp-callout-bg);
    border-left: 4px solid var(--asp-callout-border);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.375rem;
    margin: 1.75rem 0;
    color: var(--asp-body-mid);
}

.asp-callout p:last-child,
blockquote p:last-child {
    margin-bottom: 0;
}

blockquote {
    font-style: italic;
}

/* ─── Decision box ───────────────────────────────────────── */

.asp-decision {
    background: var(--asp-hero-bg);
    border: 1px solid var(--asp-accent-mid);
    border-radius: 8px;
    padding: 1.375rem 1.5rem;
    margin: 2rem 0;
}

.asp-decision h3 {
    margin-top: 0;
    color: var(--asp-accent-hover);
    font-size: 1.0625rem;
}

.asp-decision p:last-child,
.asp-decision ul:last-child {
    margin-bottom: 0;
}

/* ─── FAQ section ────────────────────────────────────────── */

.asp-faq h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--asp-heading);
    border-top: 1px solid var(--asp-border-soft);
    padding-top: 1.125rem;
    margin-top: 1.375rem;
}

/* ─── Related pages nav ──────────────────────────────────── */

.asp-related {
    background: var(--asp-hero-bg);
    border: 1px solid var(--asp-accent-glow);
    border-radius: 8px;
    padding: 1.375rem 1.5rem;
    margin-top: 3rem;
}

/* The finder section that precedes the related nav. The hub page packs opened
 * <nav class="asp-related"> around this heading and did not close it until after the link
 * list, so the tinted box wrapped the entire finder and the "Related Pages" heading - which has no
 * top margin by design - butted straight against the last row of results. */
.asp-compare {
    margin-top: 2.5rem;
}

.asp-related h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--asp-accent-deep);
    margin: 0 0 0.875rem;
    border: none !important;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.asp-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* The li carries the pill's TYPOGRAPHY; the anchor inside carries its box.
 *
 * nlr_unlink_unpublished_internal_links unwraps any link whose target is still a draft, keeping
 * the label so prose still reads. That is right for a sentence and wrong for this nav: the label
 * arrives as a bare li, falls back to display:list-item at the inherited 17px with no padding,
 * and sits at a different height and baseline from the pills beside it. On waterleakhub's
 * standalone-detectors hub, three of seven items rendered that way.
 *
 * Setting the type here means an unlinked item lines up with its neighbours even if the rule
 * below is never applied. */
.asp-related ul li {
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* An unlinked item gets the pill's shape in a muted, dashed form: it reads as a place that exists
 * but is not reachable yet, rather than as a link that failed. Written as :not(:has(a)) so that a
 * browser without :has() drops ONLY this rule and still gets the alignment fix above - the
 * inverse (styling every li, then unstyling linked ones) would put a dashed border on every pill. */
.asp-related ul li:not(:has(a)) {
    padding: 0.325rem 0.875rem;
    border: 1px dashed var(--asp-accent-mid);
    border-radius: 999px;
    color: var(--asp-muted-light);
    background: transparent;
}

.asp-related ul li a {
    display: inline-block;
    background: var(--asp-surface);
    border: 1px solid var(--asp-accent-mid);
    color: var(--asp-accent-deep);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.325rem 0.875rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.13s, color 0.13s, border-color 0.13s;
}

.asp-related ul li a:hover {
    background-color: var(--asp-accent-deep);
    color: #fff;
    border-color: var(--asp-accent-deep);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .page-content,
    .pillar-page {
        padding: 1.25rem 1rem 2.5rem;
    }

    .asp-hero {
        padding: 2rem 1.25rem;
    }

    .asp-hero h1 {
        font-size: 1.5rem;
    }

    .asp-hero p {
        font-size: 1rem;
    }

    .page-content h1,
    .pillar-page h1 {
        font-size: 1.5rem;
    }

    .page-content h2,
    .pillar-page h2 {
        font-size: 1.25rem;
    }

    .asp-card-grid {
        grid-template-columns: 1fr;
    }

    .page-content table,
    .pillar-page table {
        font-size: 0.875rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .asp-lead {
        font-size: 1rem;
    }
}

/* ═══ Page-pack conventions ════════════════════════════════════════════════
 * Emitted by the per-site page generators. These classes are shared across every
 * spec-baseline site's page pack, so they belong in the base rather than in one
 * site.css — the builder's own rule for a rule that turns up everywhere.
 *
 * Class names are prefixed because a bare `.num` or `.note` would collide with a
 * WordPress theme's utility classes, and the theme usually loads after us.
 */

.page-content > .asp-lede,
.pillar-page > .asp-lede {
    font-size: 1.15em;
    line-height: 1.55;
    color: var(--asp-body-mid);
    max-width: var(--asp-measure);
}

.asp-table {
    width: 100%;
    border-collapse: collapse;
}

/* Wide tables scroll inside their own container so the page body never scrolls sideways. */
.page-content .asp-table,
.pillar-page .asp-table {
    display: table;
}

.asp-table caption {
    caption-side: top;
    text-align: left;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--asp-muted);
    padding-bottom: 0.6em;
}

/* Figures line up column-wise only with tabular figures; proportional digits wander. */
.asp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.asp-note {
    color: var(--asp-muted);
    font-style: italic;
}

.asp-meta {
    margin-top: 2.5em;
    padding-top: 1em;
    border-top: 1px solid var(--asp-border-soft);
    font-size: 0.85em;
    color: var(--asp-muted);
}

/* ─── Sites whose content is POSTS (the novicelinks subdomains) ───────────────────────────────
 * The specbaseline sites are pages only; these rules are inert there. On a post site the render
 * plugin wraps post_content in .page-content, so the page-pack link rule above lands on the
 * Amazon CTA buttons the posts carry (a 12px underlined "button", vacuumwise 2026-09-12), and the
 * theme's single.html puts the title in a 700px constrained group while the content is alignwide.
 */
body.appliance-spotlight.single-post .wp-block-post-title,
body.appliance-spotlight .wp-block-post-template .wp-block-post-title {
    display: block !important;
}
body.appliance-spotlight.single-post .wp-block-post-title {
    max-width: var(--wp--style--global--wide-size, var(--asp-container));
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    /* The theme balances title lines, so a title that fits one line is split into two even halves
       and stops well short of the content's width (freezer-focus, 2026-09-12). Wrap normally. */
    text-wrap: wrap;
    font-size: 2rem;
    line-height: 1.2;
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--30);
    color: var(--asp-heading);
}
body.appliance-spotlight.single-post .wp-block-post-featured-image img {
    max-height: 420px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
body.appliance-spotlight .wp-block-post-template .wp-block-post-featured-image img {
    background: var(--asp-surface);
    object-fit: contain;
}
/* The Ad Inserter disclosure ("As an Amazon Associate…") is injected into .entry-content
   BEFORE our article wrapper, so it spanned the full entry width beside 1100px content
   (dream-mattress, 2026-09-12). Its margins are inline, hence the !important. */
body.appliance-spotlight .entry-content > .code-block {
    max-width: calc(var(--asp-container) - 3rem);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
/* …and the article after it drops its top padding and its first heading's top margin, or
   the disclosure floats 96px above the first line. */
body.appliance-spotlight .entry-content > .code-block + .page-content {
    padding-top: 0;
}
body.appliance-spotlight .entry-content > .code-block + .page-content > :first-child {
    margin-top: 0;
}
/* A hand-written hub's review grid is APPENDED after its article (append-review-grid.js);
   the article's 56px bottom padding plus the group's 40px top margin left the grid's heading
   floating 116px under the last line (dream-mattress, 2026-09-12). */
body.appliance-spotlight .entry-content > .page-content:has(+ .wp-block-group),
body.appliance-spotlight .entry-content > .pillar-page:has(+ .wp-block-group) {
    padding-bottom: 0;
}
body.appliance-spotlight .entry-content > .page-content + .wp-block-group,
body.appliance-spotlight .entry-content > .pillar-page + .wp-block-group {
    margin-top: 1.5rem;
}
/* On a page-front home the Latest reviews grid follows the article; its bottom padding goes. */
body.appliance-spotlight.home .entry-content > .page-content {
    padding-bottom: 0;
}
/* Buttons in post content are buttons, whatever the page-pack link rule says. */
body.appliance-spotlight .page-content .wp-block-button__link,
body.appliance-spotlight .page-content a.wp-element-button {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.8em 1.5em;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
    /* The theme supplies no button background on these sites, so white text sat on white
       (dream-mattress home, 2026-09-12). */
    background: var(--asp-accent-deep);
    border: 2px solid var(--asp-accent-deep);
}
body.appliance-spotlight .page-content .wp-block-button__link:hover {
    color: #ffffff;
    filter: brightness(0.92);
}
body.appliance-spotlight .page-content .is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--asp-accent-deep);
}
body.appliance-spotlight .page-content .is-style-outline .wp-block-button__link:hover {
    color: var(--asp-accent-deep);
    background: var(--asp-accent-soft);
}
body.appliance-spotlight .page-content .wp-block-button {
    margin: 1.25rem 0;
}
/* The posts-index front page and the category archives. */
body.appliance-spotlight .asp-front-hero {
    background: var(--asp-hero-bg);
    border-bottom: 1px solid var(--asp-border-soft);
}
body.appliance-spotlight .asp-front-hero h1,
body.appliance-spotlight .asp-front-hero .wp-block-query-title {
    color: var(--asp-heading);
    margin: 0 0 0.6rem;
}
body.appliance-spotlight .asp-front-hero p {
    color: var(--asp-body-mid);
    max-width: 62ch;
}
/* The front-page hero, headings and grids all sit on the wide width (the user, 2026-09-12:
   a 700px heading beside an 1100px grid looked indented). The intro loses its 62ch cap. */
body.appliance-spotlight .asp-front-hero p.alignwide {
    max-width: var(--wp--style--global--wide-size, 1100px);
}
body.appliance-spotlight .asp-cat-card {
    background: var(--asp-surface);
    border: 1px solid var(--asp-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--asp-muted);
}
body.appliance-spotlight .asp-cat-card a {
    color: var(--asp-accent-deep);
    text-decoration: none;
    font-size: 1.05rem;
}
body.appliance-spotlight .asp-cat-card a:hover {
    color: var(--asp-accent-hover);
    text-decoration: underline;
}
body.appliance-spotlight .asp-post-grid {
    gap: 1.5rem;
}
/* Review-card thumbnails are Amazon product shots, mostly portrait on white, in a 4:3 box.
   The block's default object-fit: cover took the top and bottom off every appliance; contain
   shows the whole product, on the white the photo already carries, with a hairline so the
   box reads as a card rather than a floating cut-out. */
body.appliance-spotlight .asp-post-grid .wp-block-post-featured-image {
    background: #ffffff;
    border: 1px solid var(--asp-border-soft);
    border-radius: 10px;
    overflow: hidden;
}
body.appliance-spotlight .asp-post-grid .wp-block-post-featured-image img {
    /* The block writes object-fit and the radius inline on the img, hence !important. */
    object-fit: contain !important;
    padding: 6%;
    box-sizing: border-box;
    border-radius: 0 !important;
}
body.appliance-spotlight .asp-post-grid .wp-block-post-title a {
    color: var(--asp-heading);
    text-decoration: none;
}
body.appliance-spotlight .asp-post-grid .wp-block-post-title a:hover {
    color: var(--asp-accent-deep);
}
body.appliance-spotlight .asp-post-grid .wp-block-post-excerpt {
    color: var(--asp-muted);
}
@media (max-width: 781px) {
    body.appliance-spotlight .asp-post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
    body.appliance-spotlight .asp-post-grid { grid-template-columns: 1fr; }
}