/*
 * Skin: "Teal & man".
 * Sections 1-8: LIGHT MODE recolour of the whole site (parent theme +
 * sd-coupon-core .sdc pages) via token overrides, every rule wrapped in
 * html[data-theme="light"] so dark mode stays untouched.
 * Sections 9-11 (08/07/2026): homepage redesign - theme-agnostic structure
 * plus light colour AND a dark "Dem man" block scoped to .sdc-home only.
 *
 * Strategy: override the design tokens the parent (:root) and the plugin (.sdc)
 * already use, so most surfaces/text/borders follow automatically. Only the
 * places that hard-code a colour or need a gradient get a selector override.
 * No DOM/markup/heading/schema changes; colour + gradient only (no CLS).
 *
 * Tokens (source of truth):
 *   bg #F7F4EB | surface #FFFFFF | text #2D302E | text-muted #6B706C
 *   border #E8E2D0 | teal #0E7568 | man #8A0729 (fixed, never a gradient)
 *   CTA grad   linear-gradient(135deg,#8A0729,#B5123E)
 *   text grad  linear-gradient(90deg,#0E7568,#8A0729)
 */

/* ==========================================================================
   1. Reusable gradients + parent :root token overrides (light)
   ========================================================================== */
html[data-theme="light"] {
    --cta-grad: linear-gradient(135deg, #8A0729, #B5123E);
    --text-grad: linear-gradient(90deg, #0E7568, #8A0729);
    --man: #8A0729;
    --teal: #0E7568;
    --hero-bg:
        radial-gradient(700px 400px at 92% -14%, rgba(14, 117, 104, .46), transparent 70%),
        radial-gradient(580px 360px at 0% -2%, rgba(138, 7, 41, .36), transparent 68%),
        linear-gradient(160deg, #FCF6E6, #E4E7CF);

    /* parent tokens */
    --color-bg: #F7F4EB;
    --color-bg-alt: #F1EEDF;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-hover: #F5F2E9;

    --color-text: #2D302E;
    --color-text-secondary: #565A56;
    --color-text-muted: #6B706C;

    --color-border: #E8E2D0;
    --color-border-subtle: #EFEADB;
    --color-border-strong: #DCD4BE;

    --color-primary: #0E7568;
    --color-primary-hover: #0A5F54;
    --color-primary-dark: #094E46;
    --color-primary-light: #E3F0EC;
    --color-primary-rgb: 14, 117, 104;

    --color-accent: #8A0729;
    --color-accent-hover: #B5123E;
    --color-accent-light: #F6E1E7;
}

/* ==========================================================================
   2. Plugin .sdc token overrides (light)
   ========================================================================== */
html[data-theme="light"] .sdc {
    --sdc-bg: #F7F4EB;
    --sdc-surface: #FFFFFF;
    --sdc-text: #2D302E;
    --sdc-text-2: #565A56;
    --sdc-muted: #6B706C;
    --sdc-border: #E8E2D0;
    --sdc-border-subtle: #EFEADB;
    --sdc-primary: #2D302E;
    --sdc-primary-light: #EFEADB;
    --sdc-accent: #8A0729;
    --sdc-accent-hover: #B5123E;
    --sdc-success: #0E7568;      /* verified = teal */
    --sdc-success-light: #E3F0EC;
}

/* ==========================================================================
   3. Header (parent .site-header; header-skin.css sets paper tones on it,
      so override the same tokens with higher specificity) -> white surface.
   ========================================================================== */
html[data-theme="light"] .site-header {
    --color-surface: #FFFFFF;
    --color-surface-hover: #F5F2E9;
    --color-text: #2D302E;
    --color-text-muted: #6B706C;
    --color-border: #E8E2D0;
    --color-border-subtle: #EFEADB;
    background-color: #FFFFFF;
    border-bottom-color: #E8E2D0;
}

/* nav hover + current -> teal (was red in header-skin.css) */
html[data-theme="light"] .site-header .header__menu > .menu-item > a:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item.current-menu-item > a,
html[data-theme="light"] .site-header .header__menu .sub-menu li a:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item--more .more-menu__dropdown li a:hover {
    color: var(--teal);
    background-color: #E3F0EC;
}
html[data-theme="light"] .site-header .header__action-btn:hover,
html[data-theme="light"] .site-header .header__icon-btn:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item--more > button:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item--more.is-open > button {
    color: var(--teal);
}
/* affiliate disclosure "Learn more" link -> teal */
html[data-theme="light"] .post-disclosure__link {
    color: var(--teal);
}

/* ==========================================================================
   4. Homepage wash: the hero gradient now spans the WHOLE page (was hero-only),
      so the hero blends in as a normal section (its box + radius are dropped
      in section 9). Search field styling below.
   ========================================================================== */
html[data-theme="light"] .sdc-home {
    background: var(--hero-bg);
}
/* Phones: the fixed-size radials cover a much bigger share of the narrow hero,
   so the wash reads darker than on desktop. Shrink them and lower the alpha so
   the box matches the desktop look. */
@media (max-width: 768px) {
    html[data-theme="light"] {
        --hero-bg:
            radial-gradient(420px 300px at 96% -12%, rgba(14, 117, 104, .26), transparent 62%),
            radial-gradient(360px 260px at -6% -4%, rgba(138, 7, 41, .18), transparent 60%),
            linear-gradient(165deg, #FCF7E9, #EFF0DF);
    }
}
html[data-theme="light"] .sdc-find input {
    background: #FFFFFF;
    border-color: #E8E2D0;
}
html[data-theme="light"] .sdc-find input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 117, 104, .15);
}

/* ==========================================================================
   5. CTAs -> gradient man (keep size/padding; text white)
   ========================================================================== */
html[data-theme="light"] .btn--primary,
html[data-theme="light"] .header__cta,
html[data-theme="light"] .sdc-btn--deal,
html[data-theme="light"] .sdc-btn--visit,
html[data-theme="light"] .sdc-btn--code,
html[data-theme="light"] .sdc-btn--copy,
html[data-theme="light"] .sdc-reviews .form-submit .submit,
html[data-theme="light"] .sdc-find__go,
html[data-theme="light"] .sdc-pill.is-active {
    background: var(--cta-grad);
    border-color: transparent;
    color: #fff;
}
/* keep the gradient on hover (the home teal-hover rule would otherwise win) */
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .sdc-btn--deal:hover,
html[data-theme="light"] .sdc-btn--visit:hover,
html[data-theme="light"] .sdc-btn--code:hover,
html[data-theme="light"] .sdc-find__go:hover,
html[data-theme="light"] .sdc-home .sdc-btn--visit:hover,
html[data-theme="light"] .sdc-home .sdc-find__go:hover {
    background: var(--cta-grad);
    border-color: transparent;
    filter: brightness(.94);
    color: #fff;
}

/* Dark mode CTA family: light defined --cta-grad only, so dark solid buttons
   fell back to the flat salmon --sdc-accent. Reuse the night-red gradient the
   homepage already uses for its search button, site-wide so the store page (and
   /stores/) match the homepage. The base rule outspecifies the base :hover, so
   the gradient survives hover; brightness gives the hover feedback. */
html[data-theme="dark"] .sdc-btn--deal,
html[data-theme="dark"] .sdc-btn--visit,
html[data-theme="dark"] .sdc-btn--code,
html[data-theme="dark"] .sdc-btn--copy,
html[data-theme="dark"] .sdc-reviews .form-submit .submit,
html[data-theme="dark"] .sdc-find__go {
    background: linear-gradient(135deg, #9C0F35, #D0596F);
    border-color: transparent;
    color: #fff;
}
html[data-theme="dark"] .sdc-btn--deal:hover,
html[data-theme="dark"] .sdc-btn--visit:hover,
html[data-theme="dark"] .sdc-btn--code:hover,
html[data-theme="dark"] .sdc-btn--copy:hover,
html[data-theme="dark"] .sdc-reviews .form-submit .submit:hover {
    filter: brightness(1.08);
}

/* ==========================================================================
   6. Kicker + big title -> gradient text (short labels only, never body text)
   ========================================================================== */
html[data-theme="light"] .sdc-kicker {
    color: #8A0729; /* fallback if background-clip:text unsupported */
    background: var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* gradient underline only on the underlined kicker (not the diamond variant) */
html[data-theme="light"] .sdc-kicker:not(.sdc-kicker--diamond) {
    border-bottom: 2px solid transparent;
    border-image: var(--cta-grad) 1;
}
html[data-theme="light"] .sdc-dir__title {
    color: #2D302E; /* fallback */
    background: var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   7. Progress bars, pills, verified marks
   ========================================================================== */
html[data-theme="light"] .sdc-rank__fill,
html[data-theme="light"] .sdc-bar__fill {
    background: var(--cta-grad);
}
html[data-theme="light"] .sdc-rank__track,
html[data-theme="light"] .sdc-bar {
    background: #E8E2D0;
}

html[data-theme="light"] .sdc-pill {
    background: #FFFFFF;
    border-color: #E8E2D0;
    color: #6B706C;
}

html[data-theme="light"] .sdc-storecard__stat {
    color: var(--teal);
}
html[data-theme="light"] .sdc-storecard__stat .sdc-dot {
    background: var(--teal);
}

/* ==========================================================================
   8. Live stats: gradient border + gradient numbers
   ========================================================================== */
html[data-theme="light"] .sdc-livestats {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--cta-grad) border-box;
}
html[data-theme="light"] .sdc-livestats__tile b {
    color: #8A0729; /* fallback */
    background: var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   9. Teal & man homepage redesign (08/07/2026) - STRUCTURE (theme-agnostic,
      token driven). Split hero, full-width featured + flat blog rows, flipped
      shelf, thin rank bars, verified-icon cards, scroll-snap Most popular.
      Loads after sdc.css so these win over the base "Home 5" layout.
      Light colour = section 10, dark "Dem man" = section 11.
   ========================================================================== */

/* Section headings: serif, sentence case. Only "New on the Shelf" stays an
   uppercase eyebrow (.sdc-kicker--diamond). */
.sdc-home .sdc-h2 { font-family: var(--sdc-serif); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0 0 20px; color: var(--sdc-text); }
.sdc-home .sdc-h3 { font-family: var(--sdc-serif); font-size: .95rem; font-weight: 700; margin: 0 0 4px; color: var(--sdc-text); }

/* Hero: single column, centered (live panel removed 09/07, stats moved to the
   shelf sidebar). No box (page-wide gradient): drop background/radius and the
   horizontal padding so it aligns with the sections below. Sub + search box use
   margin auto so their capped widths stay centred under the H1. */
.sdc-home .sdc-home__hero--split { text-align: center; padding: 44px 0 46px; background: none; border-radius: 0; }
.sdc-home__herogrid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.sdc-home__hero--split h1 { font-family: var(--sdc-serif); font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; }
.sdc-home__hero--split .sdc-home__sub { max-width: 46ch; margin: 0 auto 22px; font-size: 1.02rem; }
.sdc-home__hero--split .sdc-find { margin: 0 auto; max-width: 480px; }

/* Site totals: moved out of the hero into the sidebar, under Most used stores.
   Bare (matches the rank list), divided off by a top rule, compact numbers. */
.sdc-home__sidestats { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sdc-border); }
.sdc-home__sidestats .sdc-h3 { margin-bottom: 10px; }
.sdc-home__side .sdc-livestats { margin: 0; padding: 0; background: none; border: 0; }
.sdc-home__side .sdc-livestats__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sdc-home__side .sdc-livestats__tile b { font-size: 1.2rem; line-height: 1; }
.sdc-home__side .sdc-livestats__tile span { font-size: .64rem; display: block; margin-top: 1px; }

/* Blog: full-width featured (image left / text right) + flat 2-col rows */
.sdc-home__blog { margin: 44px 0 0; }
.sdc-home__blog .sdc-feature { display: grid; grid-template-columns: 6fr 5fr; gap: 32px; align-items: center; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; margin: 0 0 28px; }
.sdc-home__blog .sdc-feature:hover { transform: none; box-shadow: none; }
.sdc-home__blog .sdc-feature__media { border: 1px solid var(--sdc-border); border-radius: 14px; overflow: hidden; background: var(--sdc-surface); }
.sdc-home__blog .sdc-feature__media img { width: 100%; height: 300px; object-fit: contain; padding: 14px; box-sizing: border-box; }
.sdc-home__blog .sdc-feature__body { padding: 0; gap: 10px; }
.sdc-home__blog .sdc-feature__body > b { font-size: 1.5rem; line-height: 1.25; }
.sdc-postrows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.sdc-prow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--sdc-border); text-decoration: none; color: var(--sdc-text); }
.sdc-prow__ph { flex: 0 0 auto; width: 70px; height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: 10px; }
.sdc-prow__ph img { max-width: 86%; max-height: 86%; object-fit: contain; }
.sdc-prow__ph-txt { font-family: var(--sdc-serif); font-weight: 800; font-size: .8rem; color: var(--sdc-muted); }
.sdc-prow__body { min-width: 0; }
.sdc-prow__body b { display: block; font-family: var(--sdc-serif); font-size: .95rem; line-height: 1.4; font-weight: 700; }
.sdc-prow__body em { display: block; margin-top: 3px; font-size: .74rem; color: var(--sdc-muted); font-style: normal; }
.sdc-home .sdc-prow:hover b { color: var(--sdc-teal); }

/* Shelf: sidebar (300px) LEFT, directory RIGHT on PC; 1 col under 981 (spec) */
.sdc-home__shelf--flip { margin-top: 48px; }
@media (min-width: 861px) and (max-width: 980px) {
    .sdc-home .sdc-home__shelf--flip { grid-template-columns: 1fr; }
}
@media (min-width: 981px) {
    .sdc-home .sdc-home__shelf--flip { grid-template-columns: 300px 1fr; }
    .sdc-home .sdc-home__shelf--flip .sdc-home__side { order: 0; }
    .sdc-home .sdc-home__shelf--flip .sdc-home__new { order: 0; }
}
.sdc-home__note--top { margin: 2px 0 12px; }
.sdc-rankbox--bare { background: none; border: 0; border-radius: 0; padding: 0; }
.sdc-rankbox--bare .sdc-rank { border-bottom: 0; gap: 10px; padding: 8px 0; }
.sdc-rankbox--bare .sdc-rank__num { font-family: inherit; font-weight: 600; font-size: .8rem; color: var(--sdc-muted); width: 16px; }
.sdc-rankbox--bare .sdc-rank__main b { font-size: .85rem; margin-bottom: 5px; }
.sdc-rankbox--bare .sdc-rank__track { height: 3px; }
.sdc-rankbox--bare .sdc-rank__used { font-size: .72rem; }

/* Directory: verified icon, no progress bar (bar markup removed in template) */
.sdc-home .sdc-dir__title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.15; }
.sdc-home .sdc-dir__title em { font-style: normal; }
.sdc-storecard--dir .sdc-storecard__stat { align-items: center; }
.sdc-storecard--dir .sdc-storecard__stat .bi { font-size: .95rem; line-height: 1; }

/* Most popular: 2-up grid (~5 rows) of horizontal cards (media left; title,
   excerpt and date right). Drops to one column on phones so the media + text
   never gets crushed. */
.sdc-home__reviews { margin-top: 44px; }
.sdc-home__reviews .sdc-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.sdc-home__reviews .sdc-pop__card { display: flex; gap: 14px; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--sdc-text); transition: transform .15s ease, box-shadow .15s ease; }
.sdc-home__reviews .sdc-pop__card:hover { transform: translateY(-2px); box-shadow: var(--sdc-shadow-lift); color: var(--sdc-text); }
.sdc-home__reviews .sdc-pop__media,
.sdc-home__reviews .sdc-pop__ph { flex: 0 0 118px; height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: 8px; }
.sdc-home__reviews .sdc-pop__media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.sdc-home__reviews .sdc-pop__ph { font-weight: 800; font-size: 1rem; color: var(--sdc-muted); }
.sdc-home__reviews .sdc-pop__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sdc-home__reviews .sdc-pop__title { font-size: .9rem; font-weight: 700; line-height: 1.35; }
.sdc-home__reviews .sdc-pop__excerpt { font-size: .8rem; line-height: 1.5; color: var(--sdc-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sdc-home__reviews .sdc-pop__date { font-size: .72rem; color: var(--sdc-muted); font-style: normal; margin-top: auto; }
@media (max-width: 720px) { .sdc-home__reviews .sdc-reviews__grid { grid-template-columns: 1fr; } }
.sdc-home__more--left { justify-content: flex-start; margin-top: 12px; }
.sdc-tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--sdc-teal); text-decoration: none; }
.sdc-tlink .bi { font-size: .82rem; }
.sdc-home .sdc-tlink:hover { color: var(--sdc-teal); text-decoration: underline; }

@media (max-width: 980px) {
    .sdc-home__herogrid { grid-template-columns: 1fr; gap: 26px; }
    .sdc-home .sdc-home__hero--split { padding: 30px 0 32px; }
    .sdc-home__blog .sdc-feature { grid-template-columns: 1fr; gap: 16px; }
    .sdc-home__blog .sdc-feature__media img { height: 220px; }
    .sdc-postrows { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Homepage redesign - LIGHT colour (Teal & man). teal #0E7568 = info,
       links, verified, selection; man #8A0729 = commerce emphasis only.
   ========================================================================== */
html[data-theme="light"] .sdc-home { --sdc-teal: #0E7568; --sdc-surface: #FFFEFB; }
/* Site totals numbers: teal to sit with the rank bars (override the man gradient
   from section 8, which still targets any .sdc-livestats in light mode). */
html[data-theme="light"] .sdc-home__side .sdc-livestats__tile b { background: none; -webkit-text-fill-color: currentColor; color: #0E7568; }
html[data-theme="light"] .sdc-home .sdc-kicker--diamond,
html[data-theme="light"] .sdc-home .sdc-kicker--diamond::before { color: #0E7568; background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .sdc-home .sdc-dir__title { color: var(--sdc-text); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .sdc-home .sdc-dir__title em { color: #8A0729; }
html[data-theme="light"] .sdc-home .sdc-rankbox--bare .sdc-rank__fill { background: #0E7568; opacity: .6; }
html[data-theme="light"] .sdc-home .sdc-rankbox--bare .sdc-rank__track { background: transparent; }
html[data-theme="light"] .sdc-home .sdc-storecard__stat { color: #0E7568; }

/* ==========================================================================
   11. Homepage redesign - DARK "Dem man" (plum night). Scoped to .sdc-home so
       store/article dark pages keep the warm Paper & Red night unchanged.
       teal #0E7568 -> lifted #4FA396 for links; man -> lifted #C96A7B.
   ========================================================================== */
html[data-theme="dark"] .sdc-home {
    --sdc-teal: #4FA396;
    --sdc-bg: #1C1318;
    --sdc-surface: #281C22;
    --sdc-text: #ECE4E2;
    --sdc-text-2: #CBB9BF;
    --sdc-muted: #A6989D;
    --sdc-border: #3B2C33;
    --sdc-border-subtle: #2C2027;
    --sdc-accent: #C96A7B;
    --sdc-accent-hover: #D97F8E;
}
html[data-theme="dark"] .sdc-home {
    background:
        radial-gradient(520px 280px at 88% -12%, rgba(79, 163, 150, .12), transparent 62%),
        radial-gradient(420px 240px at 2% 4%, rgba(201, 106, 123, .12), transparent 60%),
        linear-gradient(168deg, #241820, #1A1116);
}
html[data-theme="dark"] .sdc-home__side .sdc-livestats__tile b { color: #4FA396; }
html[data-theme="dark"] .sdc-home .sdc-kicker--diamond,
html[data-theme="dark"] .sdc-home .sdc-kicker--diamond::before { color: #4FA396; background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="dark"] .sdc-home .sdc-dir__title { color: var(--sdc-text); }
html[data-theme="dark"] .sdc-home .sdc-dir__title em { color: #C96A7B; }
html[data-theme="dark"] .sdc-home .sdc-rankbox--bare .sdc-rank__fill { background: #4FA396; opacity: .7; }
html[data-theme="dark"] .sdc-home .sdc-storecard__stat { color: #4FA396; }
html[data-theme="dark"] .sdc-home .sdc-find__go { background: linear-gradient(135deg, #9C0F35, #D0596F); color: #fff; }

/* Motion: single hero entrance, gated (no scroll listeners) */
@media (prefers-reduced-motion: no-preference) {
    .sdc-home__herogrid > * { animation: sdcHomeRise .5s cubic-bezier(.16, 1, .3, 1) both; }
    .sdc-home__herogrid > *:last-child { animation-delay: .08s; }
    @keyframes sdcHomeRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   12. Homepage typography (09/07/2026): serif headings + system-ui body.
       PT Serif 700 headings = "serious journalism" voice for E-E-A-T (Trust);
       system-ui body, line-height 1.7. Homepage only (scoped .sdc-home) - the
       store/article pages keep Zilla Slab + Inter. Base font-size is already
       16px (html reset). Ink #1A1A1A is LIGHT ONLY; dark keeps its lifted
       --sdc-text so text stays readable on the dark wash.
   ========================================================================== */
.sdc-home {
    --sdc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
}
/* Hero deck + feature excerpt are body copy: follow the system-ui body, not serif */
.sdc-home .sdc-home__sub,
.sdc-home .sdc-feature__excerpt { font-family: inherit; }
/* Base body ink (light mode only) */
html[data-theme="light"] .sdc-home { color: #1A1A1A; }

/* ==========================================================================
   13. Store page typography (09/07/2026): same treatment as the homepage,
       scoped to the store single page (body.single-store). Headings = PT Serif
       700; the reading body (prose paragraphs, review text, hero deck) = system
       UI, line-height 1.7, ink #1A1A1A. Ink is LIGHT ONLY; dark keeps its
       lifted --sdc-text-2 so the prose stays readable on the dark paper.
       /stores/, /categories/, blog stay Zilla Slab + Inter.
   ========================================================================== */
body.single-store .sdc {
    --sdc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
}
/* These use --sdc-serif in the base = body copy, so pull them back to sans.
   Headings inside prose keep their own .sdc-prose h2/h3 serif rule. */
body.single-store .sdc-prose,
body.single-store .sdc-review__text,
body.single-store .sdc-hero__sub {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Reading-body ink #1A1A1A (light only); prose sets its own colour so override
   it here too, not just the inheriting container. Muted meta/byline keep their
   softer grey. */
/* Light-mode ink for ALL non-CMS content (09/07). Widened from store-only to
   every page EXCEPT CMS/blog/article (body.ddh-cms-content keeps the theme ink).
   Fixes the real faint text site-wide: --sdc-muted #807A6F was ~3.9:1 (fails
   WCAG AA). Finding: the brief's #241F1A / #5C554C were actually LIGHTER than the
   site's own #191714 / #45413A, so this follows the brief's INTENT (dark, not
   faint), not its exact numbers. Same scope as the typography in section 15. */
html[data-theme="light"] body:not(.ddh-cms-content) .site-main {
    --sdc-text: #241F1A;
    --sdc-text-2: #3F3931;
    --sdc-muted: #5C554C;
    color: #241F1A;
}
/* Long-form reading text defaults to the secondary token -> pull to body ink.
   (.sdc-hero__sub is handled per-context: cream on the store plum hero, dark on
   the light category hero via its own --sdc-text-2.) */
html[data-theme="light"] body:not(.ddh-cms-content) .site-main :is(.sdc-prose, .sdc-review__text) {
    color: #241F1A;
}

/* ==========================================================================
   14. Store page buttons -> teal & man, matching the homepage (09/07/2026).
       Solid CTAs (Get code / Visit / Copy / Submit review) are man via the
       block in section on line ~146. Here the leftover secondary buttons/links
       that were still red (--sdc-accent) go teal. --sdc-teal was scoped to
       .sdc-home, so define it for the store page too (light + dark).
   ========================================================================== */
body.single-store .sdc { --sdc-teal: #0E7568; }
[data-theme="dark"] body.single-store .sdc { --sdc-teal: #4FA396; }

/* "View all N offers" pill + its count badge */
body.single-store .sdc-morebtn { color: var(--sdc-teal); }
body.single-store .sdc-morebtn:hover { border-color: var(--sdc-teal); }
body.single-store .sdc-morebtn__count { background: var(--sdc-teal); color: #fff; }
/* Hero section anchors + the "N reviews" byline link */
body.single-store .sdc-hero__anchors a,
body.single-store .sdc-byline__rlink { color: var(--sdc-teal); }

/* ==========================================================================
   15. Typography site-wide EXCEPT blog / article / CMS-generated content
       (09/07/2026). Those pages carry body.ddh-cms-content (child functions.php)
       and are skipped, so AI article type is untouched. Scoped to .site-main
       (content) so the shared header/footer keep the theme font on every page.
       Headings = PT Serif via --sdc-serif token (+ parent/Gutenberg headings on
       static pages); body = system-ui, line-height 1.7. Ink stays per-context
       (store gets the darker #241F1A in section 13); home + store already had
       this from sections 12-13, this just widens it to /stores/, /categories/,
       static pages, etc.
   ========================================================================== */
body:not(.ddh-cms-content) .site-main {
    --sdc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
}
/* Body-copy blocks that use the serif token stay system-ui (prose/deck/review) */
body:not(.ddh-cms-content) .site-main :is(.sdc-prose, .sdc-review__text, .sdc-hero__sub, .sdc-feature__excerpt, .sdc-home__sub) {
    font-family: inherit;
}
/* Static-page + Gutenberg headings -> PT Serif (they inherit sans, no token) */
body:not(.ddh-cms-content) .site-main :is(.page-header__title, .wp-block-heading),
body:not(.ddh-cms-content) .site-main .page-content :is(h1, h2, h3, h4) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   16. Store hero -> plum gradient block (Change 2, 09/07). Store pages only;
       content below the hero stays flat cream. Dark hero variant included (from
       the brief's dark hero line) so dark mode is not left as a light card; the
       full dark token palette ("Change 4") is separate and still pending.
   ========================================================================== */
body.single-store .sdc-hero {
    background:
        radial-gradient(800px 400px at 88% -10%, rgba(200, 40, 90, .28) 0%, rgba(200, 40, 90, 0) 60%),
        linear-gradient(135deg, #3D0413 0%, #8A0729 55%, #B5123E 100%);
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(61, 4, 19, .28);
    color: #FBF6EC; /* primary text; title + plain byline inherit this */
}
html[data-theme="dark"] body.single-store .sdc-hero {
    background:
        radial-gradient(800px 400px at 88% -10%, rgba(200, 40, 90, .15) 0%, rgba(200, 40, 90, 0) 60%),
        linear-gradient(160deg, #3D0715 0%, #6B0A22 100%);
}
/* Lead paragraph + meta -> translucent cream; names/verified -> solid cream */
body.single-store .sdc-hero .sdc-hero__sub,
body.single-store .sdc-hero .sdc-byline,
body.single-store .sdc-hero .sdc-byline__rlink,
body.single-store .sdc-hero .sdc-hero__anchors a { color: rgba(251, 246, 236, .82); }
/* H1 needs an explicit colour: the parent theme sets h1{color:var(--color-text)}
   directly, so it does NOT inherit the hero's cream (dark ink -> unreadable on
   plum in light mode). */
body.single-store .sdc-hero .sdc-hero__title,
body.single-store .sdc-hero .sdc-byline a,
body.single-store .sdc-hero .sdc-byline strong,
body.single-store .sdc-hero .sdc-verified { color: #FBF6EC; }
body.single-store .sdc-hero .sdc-hero__anchors a { border-bottom-color: rgba(251, 246, 236, .4); }
body.single-store .sdc-hero .sdc-dot { background: rgba(251, 246, 236, .5); }
body.single-store .sdc-hero .sdc-avatar { background: rgba(251, 246, 236, .18); color: #FBF6EC; }

/* Visit Store button inside the hero -> white bg, plum text (both modes) */
body.single-store .sdc-hero .sdc-btn--visit {
    background: #fff;
    border-color: transparent;
    color: #8A0729;
    font-weight: 700;
}
body.single-store .sdc-hero .sdc-btn--visit:hover {
    background: #FBF6EC;
    color: #8A0729;
    filter: none;
}

/* Stats bar: elevated white cards sitting cleanly BELOW the hero. The earlier
   negative-margin "tuck under the hero" overlapped the hero box (the stats sit
   in .sdc-layout's main column, so the pull-up landed on top of the hero on
   short/narrow layouts), so it was removed. A proper overlap would need moving
   .sdc-stats out of .sdc-layout in the template. */
body.single-store .sdc-stats { margin-top: 8px; }
body.single-store .sdc-stats__item { box-shadow: 0 6px 18px rgba(61, 4, 19, .12); }
html[data-theme="light"] body.single-store .sdc-stats__item { background: #fff; }

/* ==========================================================================
   17. Author page: Stores | Articles two-column lists (child author.php).
       Uses the parent --color-* tokens (defined for light + dark on every page)
       so there is no sdc.css dependency on author archives.
   ========================================================================== */
.author-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1040px; margin: 0 auto; }
.author-lists__col { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E8E2D0); border-radius: 14px; padding: 22px 24px; }
[data-theme="dark"] .author-lists__col { background: var(--color-bg-alt); }
.author-lists__title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.author-lists__title .bi { color: var(--color-primary); font-size: 1.05rem; }
.author-lists__count { margin-left: auto; font-size: .9rem; font-weight: 800; color: var(--color-primary); }
.author-lists__list { list-style: none; margin: 0; padding: 0; }
.author-lists__item { padding: 9px 0; border-top: 1px solid var(--color-border, #E8E2D0); }
.author-lists__item:first-child { border-top: 0; }
.author-lists__row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.author-lists__thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--color-border, #E8E2D0); display: flex; align-items: center; justify-content: center; }
.author-lists__thumb img { width: 100%; height: 100%; display: block; }
.author-lists__thumb--logo img { object-fit: contain; padding: 5px; box-sizing: border-box; }
.author-lists__thumb--photo img { object-fit: cover; }
.author-lists__initial { font-weight: 800; font-size: 1.2rem; color: var(--color-primary); }
.author-lists__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.author-lists__name { font-weight: 600; line-height: 1.3; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.author-lists__row:hover .author-lists__name { color: var(--color-primary); }
.author-lists__meta { font-size: .76rem; color: var(--color-text-muted); }
.author-lists__empty { margin: 4px 0 0; font-size: .9rem; color: var(--color-text-muted); }
.author-lists__pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border, #E8E2D0); }
.author-lists__page { font-size: .82rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.author-lists__page:hover { text-decoration: underline; }
.author-lists__page.is-disabled { color: var(--color-text-muted); opacity: .5; pointer-events: none; }
.author-lists__page-info { font-size: .78rem; color: var(--color-text-muted); }
@media (max-width: 700px) { .author-lists { grid-template-columns: 1fr; } }

/* ==========================================================================
   18. Editorial headings on CMS/blog pages -> Playfair Display (10/07/2026).
       Positive counterpart to section 15: those pages carry
       body.ddh-cms-content so 15 skips them; serif is now site-wide by
       request. Only editorial headings: post H1, archive/search H1, prose
       h2/h3 (Gutenberg or classic), blog post cards. The acms product-card
       headings ([class*="acms-"]), TOC label, Pros/Cons h4 and the
       sidebar/comment UI stay Inter. --sdc-serif is undefined on
       single/archive/search (sdc.css not enqueued there) so the family is
       literal, same value as section 15.
   ========================================================================== */
body.ddh-cms-content .post-hero__title,
body.ddh-cms-content .cat-header__title,
body.ddh-cms-content .category-header__title,
body.ddh-cms-content .post-card__title,
body.ddh-cms-content .post-content :is(h2, h3):not([class*="acms-"]) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}