/* ===================================================================
   CATEGORY SEO — PER-BRAND CONSOLIDATED STYLES
   Fáza 450.11 (master merge — A defensive NOBAMO clean cream + B comprehensive structure)
   ===================================================================

   ZODPOVEDNOSŤ:
     Single stylesheet pre 3 brandy (IZMAEL / NOBAMO / HARAHU) ktoré renderujú
     `intro_html` / `long_html` / `buying_guide_html` z CATEGORY_SEO_TEXTS cez
     `app/Views/category/partials/seo-content.php`.

   MASTER MERGE DECISIONS (best-of-both):
     • B's konsolidovaný stylesheet (single-source-of-truth, ľahší rollback)
     • A's NOBAMO clean cream (BEZ SVG noise — premium tone per
       memory feedback_nobamo_blog_tone_calibration.md)
     • B's IZMAEL premium overlay (DM Serif + drop-cap + gradient divider)
     • B's HARAHU table-wrap mobile fix (F-10.1 z 450.10)
     • B's a11y media queries (reduced-motion + forced-colors + print)
     • A's WCAG self-audit values (preserved in NOTES.md, NIE v CSS)

   SCOPING:
     IZMAEL  → `.izmael-cat-seo-*` (default brand — žiadny body. prefix lebo class
              applies len pri IZMAEL render cez partial BrandConfig switch)
     NOBAMO  → `body.brand-nobamo .nobamo-cat-seo-*` (cez BrandConfig::bodyClass())
     HARAHU  → `body.brand-harahu .harahu-cat-seo-*` (cez BrandConfig::bodyClass())
              + `.harahu-cat-seo-table` content-class (partial generated)

   ACCESSIBILITY:
     WCAG AA contrast ≥ 4.5:1 pre body text, ≥ 3:1 pre large (≥ 18.66px bold / ≥ 24px).
     Per-brand kontrast values v drafty NOTES.md (verified manual hex compare).

   PRE LOAD:
     Importované cez `app/Views/layouts/main.php` (hlavička, za blokom TONEXA).
     Cache-bust automaticky (filemtime, od 786.7). Always-load pre všetky brandy (body.brand-X scope safe).

   @since Fáza 450.11 (2026-05-15)
   =================================================================== */


/* ===================================================================
   1. SPOLOČNÉ PRIMITIVY — Použité cross-brand
   =================================================================== */

/* Skip-to-content target pre buying guide (deep-link cez fragment #cat-seo-buying-guide-<id>) */
[id^="cat-seo-buying-guide-"]:target {
    scroll-margin-top: 80px;
}
[id^="cat-seo-bottom-"]:target {
    scroll-margin-top: 80px;
}


/* ===================================================================
   2. IZMAEL — PREMIUM OVERLAY (Burgundy + Forest Green + Cream)
   ===================================================================

   FILOZOFIA: "Affluent gifting" — refined editorial typography, serif headings,
   gold accent, generous breathing room. Default Tailwind `prose` extended.

   FONT STACK:
     headings → "DM Serif Display" (Google), fallback "Playfair Display", "Georgia", serif
     body     → "Outfit" (existing loaded via /public/fonts/outfit.css), fallback system-ui

   PALETA (z BrandConfig theme_colors.primary + accent + cream):
     bg     → #FAFAF8 (cream-100, generic page bg)
     intro  → text #3D484F / lead-italic #6D3F27 accent
     H2     → #800020 (primary-900, burgundy)
     H3     → #2D5A3D (accent-600, forest green)
     table  → th bg #FAF7F2 (secondary-100), border #EBE3D4 (secondary-300)
     accent → #800020 → #2D5A3D linear gradient pre dividers
*/

.izmael-cat-seo-intro {
    /* ── Page-bg neutral, dôraz na text ── */
    margin-bottom: 1.5rem;
    padding: 0;
}

.izmael-cat-seo-intro p:first-of-type {
    /* Lead paragraph — slightly larger, italic, refined */
    font-size: 1.0625rem; /* 17px */
    line-height: 1.65;
    color: #44403c; /* stone-700 — 8.4:1 on white */
    letter-spacing: -0.005em;
}

.izmael-cat-seo-intro p:first-of-type::first-letter {
    /* Subtle drop-cap (LEN intro, len 1. paragraph) */
    font-family: "DM Serif Display", "Playfair Display", Georgia, serif;
    font-size: 2.5em;
    line-height: 0.85;
    float: left;
    margin-right: 0.08em;
    margin-top: 0.05em;
    color: #800020; /* burgundy */
    font-weight: 400;
}

.izmael-cat-seo-section,
.izmael-cat-seo-buying-guide {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #EBE3D4; /* secondary-300 */
    position: relative;
}

/* Gold accent divider above section heading — subtle premium signal */
.izmael-cat-seo-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, #800020 0%, #2D5A3D 100%);
}

.izmael-cat-seo-section summary,
.izmael-cat-seo-buying-guide summary {
    font-family: "DM Serif Display", "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: 1.25rem; /* 20px */
    line-height: 1.35;
    color: #1c1917; /* stone-900 — 18:1 contrast */
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    transition: color 200ms ease-out;
}

.izmael-cat-seo-section summary:hover,
.izmael-cat-seo-buying-guide summary:hover {
    color: #800020; /* burgundy hover */
}

.izmael-cat-seo-section summary:focus-visible,
.izmael-cat-seo-buying-guide summary:focus-visible {
    outline: 2px solid #800020;
    outline-offset: 3px;
    border-radius: 2px;
}

.izmael-cat-seo-section summary::-webkit-details-marker,
.izmael-cat-seo-buying-guide summary::-webkit-details-marker {
    display: none;
}

/* Body — serif/sans mix, refined */
.izmael-cat-seo-body {
    margin-top: 1rem;
    font-size: 1rem; /* 16px */
    line-height: 1.7;
    color: #44403c; /* stone-700 */
    /* max-width removed — Fáza category-typo: full-width policy */
}

.izmael-cat-seo-body h2 {
    font-family: "DM Serif Display", "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
    color: #800020; /* burgundy */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.015em;
}

.izmael-cat-seo-body h3 {
    font-family: "DM Serif Display", "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: 1.1875rem; /* 19px */
    line-height: 1.35;
    color: #2D5A3D; /* forest green */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.izmael-cat-seo-body p {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.izmael-cat-seo-body ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0.75rem;
}

.izmael-cat-seo-body ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.izmael-cat-seo-body ul li::before {
    content: "\2726"; /* ✦ */
    position: absolute;
    left: 0;
    top: 0;
    color: #800020; /* burgundy */
    font-size: 0.875rem;
    line-height: 1.7;
}

.izmael-cat-seo-body a {
    color: #800020;
    text-decoration: underline;
    text-decoration-color: rgba(128, 0, 32, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 200ms ease-out;
}

.izmael-cat-seo-body a:hover {
    text-decoration-color: rgba(128, 0, 32, 1);
}

/* Table — premium editorial */
.izmael-cat-seo-body table,
.izmael-cat-seo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9375rem; /* 15px */
    border: 1px solid #EBE3D4; /* secondary-300 */
}

.izmael-cat-seo-body th,
.izmael-cat-seo-table th {
    background-color: #FAF7F2; /* secondary-100 */
    color: #1c1917; /* stone-900 */
    font-weight: 600;
    font-family: "Outfit", system-ui, sans-serif;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #D4C4A8; /* secondary-400 */
    letter-spacing: 0.005em;
}

.izmael-cat-seo-body td,
.izmael-cat-seo-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid #F5F0E6; /* secondary-200 */
    color: #44403c; /* stone-700 */
    vertical-align: top;
}

.izmael-cat-seo-body tr:nth-child(even) td,
.izmael-cat-seo-table tr:nth-child(even) td {
    background-color: #FDFCF9; /* secondary-50 */
}


/* ===================================================================
   3. NOBAMO — CLEAN CREAM (Candlelight Gold + Cream + Nordic Green)
   ===================================================================

   FILOZOFIA: Premium luxury candle brand — clean cream paper feel BEZ
   noise textures (per master decision + memory NOBAMO tone calibration).
   Serif/sans mix s gold accent flames pre dividers + bullets.

   FONT STACK:
     headings → "Cinzel" (existing loaded, logo-grade serif), fallback Lato + Georgia
     body     → "Lato" (existing loaded /public/fonts/nobamo-body.css)

   PALETA:
     bg paper    → #FDFAF5 (cream-100, clean — NO SVG noise overlay)
     text body   → #4A3728 (primary-900, warm brown — 10.8:1 on #FDFAF5)
     H2 headings → #5A4215 (primary-900, deep gold) — 9.07:1
     H3 headings → #3A6248 (accent-700, nordic green) — 6.68:1
     accent      → #E8B84D (gold) — used iba pre dividers / bullets / hover
     table th    → #F8F5ED (cream-200), border #DBD4C5 (cream-500)
*/

body.brand-nobamo .nobamo-cat-seo-intro {
    /* Clean cream — master merge decision: NO SVG noise (premium luxury tone) */
    background-color: #FDFAF5;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.25rem;
    border-radius: 4px;
    border: 1px solid #F1ECE2; /* cream-300 — barely-there warm border */
    box-shadow: 0 1px 2px rgba(74, 55, 21, 0.04);
}

body.brand-nobamo .nobamo-cat-seo-intro p {
    font-family: "Lato", "Outfit", system-ui, sans-serif;
    font-size: 1.0625rem; /* 17px */
    line-height: 1.7;
    color: #4A3728; /* warm brown — 10.8:1 on paper */
    letter-spacing: 0.005em;
    margin: 0;
}

body.brand-nobamo .nobamo-cat-seo-intro p + p {
    margin-top: 0.75rem;
}

body.brand-nobamo .nobamo-cat-seo-section,
body.brand-nobamo .nobamo-cat-seo-buying-guide {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #F1ECE2; /* cream-300 */
    position: relative;
}

/* Gold flame accent above section heading — NOBAMO signature */
body.brand-nobamo .nobamo-cat-seo-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 56px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #C9A84C 25%,
        #E8B84D 50%,
        #C9A84C 75%,
        transparent 100%
    );
}

body.brand-nobamo .nobamo-cat-seo-section summary,
body.brand-nobamo .nobamo-cat-seo-buying-guide summary {
    font-family: "Cinzel", "Lato", Georgia, serif;
    font-weight: 600;
    font-size: 1.1875rem; /* 19px */
    line-height: 1.4;
    color: #5A4215; /* deep gold — 9.07:1 */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem 0;
    transition: color 200ms ease-out;
}

body.brand-nobamo .nobamo-cat-seo-section summary:hover,
body.brand-nobamo .nobamo-cat-seo-buying-guide summary:hover {
    color: #C9A84C; /* gold-dark hover */
}

body.brand-nobamo .nobamo-cat-seo-section summary:focus-visible,
body.brand-nobamo .nobamo-cat-seo-buying-guide summary:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 4px;
    border-radius: 2px;
}

body.brand-nobamo .nobamo-cat-seo-section summary::-webkit-details-marker,
body.brand-nobamo .nobamo-cat-seo-buying-guide summary::-webkit-details-marker {
    display: none;
}

/* Flame icon before summary text (decorative) — using teardrop gradient */
body.brand-nobamo .nobamo-cat-seo-section summary::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50% 0 50% 50%;
    background: radial-gradient(circle at 50% 60%, #FFE4A0, #E8B84D 60%, #C9A84C);
    transform: rotate(-45deg);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(232, 184, 77, 0.5);
}

body.brand-nobamo details[open] > summary.nobamo-cat-seo-summary::before,
body.brand-nobamo details[open] > .nobamo-cat-seo-section summary::before {
    background: radial-gradient(circle at 50% 60%, #FFD700, #FFE4A0 60%, #E8B84D);
}

/* Body — warm serif/sans mix */
body.brand-nobamo .nobamo-cat-seo-body {
    margin-top: 1rem;
    font-family: "Lato", "Outfit", system-ui, sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.75;
    color: #4A3728; /* warm brown */
    /* max-width removed — Fáza category-typo: full-width policy */
}

body.brand-nobamo .nobamo-cat-seo-body h2 {
    font-family: "Cinzel", "Lato", Georgia, serif;
    font-weight: 600;
    font-size: 1.375rem; /* 22px */
    line-height: 1.3;
    color: #5A4215; /* deep gold */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body.brand-nobamo .nobamo-cat-seo-body h3 {
    font-family: "Lato", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
    color: #3A6248; /* nordic green */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

body.brand-nobamo .nobamo-cat-seo-body p {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

body.brand-nobamo .nobamo-cat-seo-body ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0.75rem;
}

body.brand-nobamo .nobamo-cat-seo-body ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Flame bullet — warm gold */
body.brand-nobamo .nobamo-cat-seo-body ul li::before {
    content: "";
    position: absolute;
    left: 0.125rem;
    top: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 50% 0 50% 50%;
    background: radial-gradient(circle at 50% 60%, #FFE4A0, #E8B84D);
    transform: rotate(-45deg);
}

body.brand-nobamo .nobamo-cat-seo-body a {
    color: #5A4215;
    text-decoration: underline;
    text-decoration-color: rgba(201, 168, 76, 0.5);
    text-underline-offset: 3px;
    transition: text-decoration-color 200ms ease-out;
}

body.brand-nobamo .nobamo-cat-seo-body a:hover {
    text-decoration-color: rgba(201, 168, 76, 1);
    color: #C9A84C;
}

/* Table — clean cream paper editorial */
body.brand-nobamo .nobamo-cat-seo-body table,
body.brand-nobamo .nobamo-cat-seo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9375rem; /* 15px */
    border: 1px solid #DBD4C5; /* cream-500 */
    background-color: #FDFAF5;
}

body.brand-nobamo .nobamo-cat-seo-body th,
body.brand-nobamo .nobamo-cat-seo-table th {
    background-color: #F8F5ED; /* cream-200 */
    color: #5A4215; /* deep gold */
    font-family: "Cinzel", "Lato", Georgia, serif;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #DBD4C5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.brand-nobamo .nobamo-cat-seo-body td,
body.brand-nobamo .nobamo-cat-seo-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid #F1ECE2; /* cream-300 */
    color: #4A3728; /* warm brown */
    vertical-align: top;
}

body.brand-nobamo .nobamo-cat-seo-body tr:nth-child(even) td,
body.brand-nobamo .nobamo-cat-seo-table tr:nth-child(even) td {
    background-color: #FDFCFA;
}


/* ===================================================================
   4. HARAHU — INDUSTRIAL TABLE EXTENSION (F-10.1 fix from 450.10)
   ===================================================================

   Most HARAHU SEO styling už existuje v `public/css/harahu-ironforge.css`
   lines 11710-12281 (intro, section, summary, chevron, body, a:link).

   TU LEN PRIDÁVAME ČO CHÝBA:
     1. `.harahu-cat-seo-table` — industrial monospace, square borders, no rounded.
     2. Force-color override `harahu-cat-seo-body table` selector pre prose tables.
     3. Mobile responsive overflow-x wrapper.

   FILOZOFIA: "Tactical EDC tools / industrial spec sheet" — Barlow Condensed header,
   no rounded corners, amber accent (#C87941) borders, gunmetal bg (#2C3539),
   uppercase tracking-wide labels.

   PALETA (z harahu-ironforge.css :root vars):
     bg cell    → #2C3539 (harahu-800)
     bg header  → #1E2528 (harahu-900) — darker
     border     → #333C42 (harahu-700)
     accent     → #C87941 (harahu-accent, burnt amber)
     text body  → #D4D7DA (harahu-cream-dim) — 8.67:1 on #2C3539
     text head  → #F09A56 (harahu-accent-light) — 7.01:1 on #1E2528
*/

body.brand-harahu .harahu-cat-seo-table-wrap {
    /* Mobile scroll wrapper — prevent layout overflow */
    margin: 1rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--harahu-700, #333C42);
    border-radius: 2px;
}

body.brand-harahu .harahu-cat-seo-body table,
body.brand-harahu .harahu-cat-seo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
    font-size: 0.8125rem; /* 13px — monospace looks bigger */
    background-color: var(--harahu-800, #2C3539);
    border: 1px solid var(--harahu-700, #333C42);
    border-radius: 2px;
}

body.brand-harahu .harahu-cat-seo-table-wrap > .harahu-cat-seo-table {
    margin: 0; /* wrapper takes margin */
    border: 0; /* wrapper takes border */
    border-radius: 0;
}

body.brand-harahu .harahu-cat-seo-body th,
body.brand-harahu .harahu-cat-seo-table th {
    background-color: var(--harahu-900, #1E2528);
    color: var(--harahu-accent-light, #F09A56);
    font-weight: 700;
    font-family: 'Barlow Condensed', var(--font-mono, 'JetBrains Mono'), system-ui, sans-serif;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--harahu-accent, #C87941);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem; /* 12px */
    white-space: nowrap;
}

body.brand-harahu .harahu-cat-seo-body td,
body.brand-harahu .harahu-cat-seo-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--harahu-700, #333C42);
    color: var(--harahu-cream-dim, #D4D7DA);
    vertical-align: top;
    line-height: 1.55;
}

body.brand-harahu .harahu-cat-seo-body tr:hover td,
body.brand-harahu .harahu-cat-seo-table tr:hover td {
    background-color: rgba(200, 121, 65, 0.06); /* amber tint on hover */
    transition: background-color 150ms ease-out;
}

/* First column slight emphasis (typically "Typ použitia") */
body.brand-harahu .harahu-cat-seo-body td:first-child,
body.brand-harahu .harahu-cat-seo-table td:first-child {
    color: var(--harahu-cream, #F5F6F7);
    font-weight: 600;
}

/* HARAHU intro paragraph polish — full-width (max-width removed Fáza category-typo) */
/* body.brand-harahu .harahu-cat-seo-intro — no max-width cap */

/* Extend buying-guide details body.
   786.19 (audit 786.14 A7): pravidlo je zúžené na .is-dark — jeho špecificita
   (0,3,3) prebíjala svetlý override v ironforge (0,3,1) a „AKO VYBRAŤ…" bolo
   v svetlom režime accent-light na bielej (2,05:1, premerané naživo).
   V dark ostáva accent-light (7,01:1 na --harahu-900); vo svetlom teraz platí
   ironforge :not(.is-dark) → --harahu-light-text (14,37:1). */
body.brand-harahu.is-dark .harahu-cat-seo-section[data-section="buying_guide"] .harahu-cat-seo-summary,
body.brand-harahu.is-dark details.harahu-cat-buying-guide-details > summary.harahu-cat-seo-summary {
    color: var(--harahu-accent-light, #F09A56);
}

/* HARAHU summary focus-visible (per Agent A NOTES section 7 — explicit ring) */
body.brand-harahu .harahu-cat-seo-summary:focus-visible {
    outline: 2px solid var(--harahu-accent, #C87941);
    outline-offset: 2px;
}

/* Lists in HARAHU body — square bullets, accent color */
body.brand-harahu .harahu-cat-seo-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0.75rem 0;
}

body.brand-harahu .harahu-cat-seo-body ul li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

body.brand-harahu .harahu-cat-seo-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 8px;
    height: 8px;
    background-color: var(--harahu-accent, #C87941);
    border-radius: 0;
}

/* H2/H3 inside HARAHU body (long_html content) */
body.brand-harahu .harahu-cat-seo-body h2 {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--harahu-cream, #F5F6F7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--harahu-700, #333C42);
}

body.brand-harahu .harahu-cat-seo-body h2::before {
    content: "// ";
    color: var(--harahu-accent, #C87941);
    font-weight: 400;
}

body.brand-harahu .harahu-cat-seo-body h3 {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--harahu-accent-light, #F09A56);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Fáza 786.11 (audit 785 N-29): pravidlá vyššie sú ladené na TMAVÚ tému,
   ale HARAHU default je SVETLÁ (is-dark len z localStorage) — h2 cream na
   svetlom pozadí bol prakticky neviditeľný a h3 accent-light mal 2,05:1.
   Svetlé vetvy zrkadlia vzor harahu-ironforge.css (":not(.is-dark)"). */
body.brand-harahu:not(.is-dark) .harahu-cat-seo-body h2 {
    color: var(--harahu-light-text, #1E2528);
    border-bottom-color: var(--harahu-light-border, #E8E6E1);
}
body.brand-harahu:not(.is-dark) .harahu-cat-seo-body h3 {
    color: var(--harahu-accent-ink, #9C5C30);
}


/* ===================================================================
   5. MOBILE RESPONSIVE — Explicit breakpoints (per brand)
   ===================================================================
   sm  → 640px
   md  → 768px
   lg  → 1024px
*/

@media (max-width: 768px) {

    /* IZMAEL — reduce drop-cap on mobile (overlap hazard) */
    .izmael-cat-seo-intro p:first-of-type {
        font-size: 1rem; /* 16px */
        line-height: 1.6;
    }

    .izmael-cat-seo-intro p:first-of-type::first-letter {
        font-size: 2em;
    }

    .izmael-cat-seo-section summary,
    .izmael-cat-seo-buying-guide summary {
        font-size: 1.125rem; /* 18px */
    }

    .izmael-cat-seo-body {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.65;
    }

    .izmael-cat-seo-body h2 {
        font-size: 1.3125rem; /* 21px */
    }

    .izmael-cat-seo-body h3 {
        font-size: 1.0625rem; /* 17px */
    }

    /* IZMAEL table → mobile collapse */
    .izmael-cat-seo-body table,
    .izmael-cat-seo-table {
        font-size: 0.875rem; /* 14px */
    }

    .izmael-cat-seo-body th,
    .izmael-cat-seo-table th,
    .izmael-cat-seo-body td,
    .izmael-cat-seo-table td {
        padding: 0.625rem 0.75rem;
    }

    /* NOBAMO — reduce intro paper-card padding on mobile */
    body.brand-nobamo .nobamo-cat-seo-intro {
        padding: 1rem 1rem;
    }

    body.brand-nobamo .nobamo-cat-seo-intro p {
        font-size: 1rem;
        line-height: 1.65;
    }

    body.brand-nobamo .nobamo-cat-seo-section summary,
    body.brand-nobamo .nobamo-cat-seo-buying-guide summary {
        font-size: 1.0625rem; /* 17px */
        letter-spacing: 0.03em;
    }

    body.brand-nobamo .nobamo-cat-seo-body h2 {
        font-size: 1.1875rem;
    }

    body.brand-nobamo .nobamo-cat-seo-body h3 {
        font-size: 1.0625rem;
    }

    /* NOBAMO table — keep border edges crisp */
    body.brand-nobamo .nobamo-cat-seo-body th,
    body.brand-nobamo .nobamo-cat-seo-table th {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }

    body.brand-nobamo .nobamo-cat-seo-body td,
    body.brand-nobamo .nobamo-cat-seo-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    /* HARAHU table — force overflow on small (3-col can blow up viewport) */
    body.brand-harahu .harahu-cat-seo-body table,
    body.brand-harahu .harahu-cat-seo-table {
        min-width: 480px; /* enforce horizontal scroll on narrow */
    }

    body.brand-harahu .harahu-cat-seo-body th,
    body.brand-harahu .harahu-cat-seo-table th {
        padding: 0.5rem 0.75rem;
        font-size: 0.6875rem;
    }

    body.brand-harahu .harahu-cat-seo-body td,
    body.brand-harahu .harahu-cat-seo-table td {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    body.brand-harahu .harahu-cat-seo-body h2 {
        font-size: 1.125rem;
    }

    body.brand-harahu .harahu-cat-seo-body h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* Very narrow phones — extra trim */
    .izmael-cat-seo-intro p:first-of-type {
        font-size: 0.9375rem; /* 15px */
    }

    body.brand-nobamo .nobamo-cat-seo-intro {
        padding: 0.875rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0; /* full-bleed paper card on tiny screens */
        border-left: 0;
        border-right: 0;
    }
}

@media (min-width: 1024px) {
    /* Desktop — no max-width caps (full-width policy, Fáza category-typo) */
    /* .izmael-cat-seo-body max-width removed */
    /* body.brand-nobamo .nobamo-cat-seo-body max-width removed */
}


/* ===================================================================
   6. PRINT — Disable backgrounds, force ink
   =================================================================== */

@media print {
    body.brand-nobamo .nobamo-cat-seo-intro {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    body.brand-harahu .harahu-cat-seo-body,
    body.brand-harahu .harahu-cat-seo-table,
    body.brand-harahu .harahu-cat-seo-body table {
        background-color: #fff !important;
        color: #000 !important;
        border-color: #999 !important;
    }

    body.brand-harahu .harahu-cat-seo-body th,
    body.brand-harahu .harahu-cat-seo-table th {
        background-color: #eee !important;
        color: #000 !important;
    }

    body.brand-harahu .harahu-cat-seo-body td,
    body.brand-harahu .harahu-cat-seo-table td {
        color: #000 !important;
    }

    /* Always-open details for print */
    details.harahu-cat-buying-guide-details,
    details {
        display: block;
    }

    details > *:not(summary) {
        display: block !important;
    }
}


/* ===================================================================
   7. REDUCED MOTION — Disable transitions for users who prefer it
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .izmael-cat-seo-section summary,
    .izmael-cat-seo-buying-guide summary,
    .izmael-cat-seo-body a,
    body.brand-nobamo .nobamo-cat-seo-section summary,
    body.brand-nobamo .nobamo-cat-seo-buying-guide summary,
    body.brand-nobamo .nobamo-cat-seo-body a,
    body.brand-harahu .harahu-cat-seo-body tr:hover td {
        transition: none !important;
    }
}


/* ===================================================================
   8. FORCED-COLORS (Windows High Contrast Mode)
   =================================================================== */

@media (forced-colors: active) {
    .izmael-cat-seo-section,
    .izmael-cat-seo-buying-guide,
    body.brand-nobamo .nobamo-cat-seo-section,
    body.brand-nobamo .nobamo-cat-seo-buying-guide {
        border-top: 1px solid CanvasText;
    }

    .izmael-cat-seo-section::before,
    body.brand-nobamo .nobamo-cat-seo-section::before {
        background: Highlight;
    }

    body.brand-harahu .harahu-cat-seo-body th,
    body.brand-harahu .harahu-cat-seo-table th {
        border-bottom: 2px solid Highlight;
    }
}


/* ===================================================================
   9. SEASONAL BLOCK (Fáza 450.9) — per-brand + per-slot accent
   ===================================================================
   Rendered by app/Views/category/partials/seo-content.php (case 'seasonal')
   pre kategórie ktoré majú populated row v CATEGORY_SEO_SEASONAL.
   Slot rotation: xmas (11/15-1/6) / summer (6/1-8/31) / spring (3/20-5/31) / default.
   ─────────────────────────────────────────────────────────────────── */

/* IZMAEL — premium seasonal section with gold/green gradient divider */
.izmael-cat-seo-seasonal {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(120, 113, 108, 0.18);
    position: relative;
}

.izmael-cat-seo-seasonal::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #d4af37 0%, #6b8e3d 100%);
}

.izmael-cat-seo-seasonal summary {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.15rem;
    color: #44403c;
    padding: 0.6rem 0;
    cursor: pointer;
    list-style: none;
}

.izmael-cat-seo-seasonal summary::-webkit-details-marker {
    display: none;
}

.izmael-cat-seo-seasonal[open] summary {
    color: #1f1d1c;
}

.izmael-cat-seo-seasonal .izmael-cat-seo-body {
    margin-top: 0.75rem;
    line-height: 1.65;
    color: #44403c;
}

/* IZMAEL — per-slot subtle background tint */
.izmael-cat-seo-seasonal-xmas {
    background: linear-gradient(180deg, rgba(190, 18, 60, 0.025) 0%, transparent 50%);
}
.izmael-cat-seo-seasonal-summer {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.030) 0%, transparent 50%);
}
.izmael-cat-seo-seasonal-spring {
    background: linear-gradient(180deg, rgba(132, 204, 22, 0.035) 0%, transparent 50%);
}
.izmael-cat-seo-seasonal-default {
    background: transparent;
}

/* NOBAMO — clean cream paper, Cinzel UPPERCASE summary, flame accent */
body.brand-nobamo .nobamo-cat-seo-seasonal {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #faf6ee;
    border-top: 2px solid #d4af37;
    border-radius: 2px;
}

body.brand-nobamo .nobamo-cat-seo-seasonal summary {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6b4226;
    padding: 0.5rem 0;
    cursor: pointer;
    list-style: none;
}

body.brand-nobamo .nobamo-cat-seo-seasonal summary::-webkit-details-marker {
    display: none;
}

body.brand-nobamo .nobamo-cat-seo-seasonal summary::before {
    content: '\\01F525';
    margin-right: 0.5rem;
    font-size: 0.85em;
}

body.brand-nobamo .nobamo-cat-seo-seasonal .nobamo-cat-seo-body {
    margin-top: 0.75rem;
    font-family: 'Lato', system-ui, sans-serif;
    line-height: 1.65;
    color: #4b3621;
}

/* NOBAMO — per-slot border accent */
body.brand-nobamo .nobamo-cat-seo-seasonal-xmas {
    border-top-color: #be123c;
}
body.brand-nobamo .nobamo-cat-seo-seasonal-summer {
    border-top-color: #f59e0b;
}
body.brand-nobamo .nobamo-cat-seo-seasonal-spring {
    border-top-color: #84cc16;
}
body.brand-nobamo .nobamo-cat-seo-seasonal-default {
    border-top-color: #d4af37;
}

/* HARAHU — industrial seasonal with rust accent */
body.brand-harahu .harahu-cat-seo-seasonal {
    margin-top: 1.5rem;
    border-top: 1px solid #44403c;
}

body.brand-harahu .harahu-cat-seo-seasonal-body {
    padding: 1rem 1.25rem;
    border-left: 3px solid #b45309;
    background: #fafaf9;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    line-height: 1.55;
    color: #292524;
}

/* HARAHU — per-slot border-left color accent (industrial paint codes) */
body.brand-harahu .harahu-cat-seo-seasonal-xmas .harahu-cat-seo-seasonal-body {
    border-left-color: #991b1b;
}
body.brand-harahu .harahu-cat-seo-seasonal-summer .harahu-cat-seo-seasonal-body {
    border-left-color: #d97706;
}
body.brand-harahu .harahu-cat-seo-seasonal-spring .harahu-cat-seo-seasonal-body {
    border-left-color: #4d7c0f;
}
body.brand-harahu .harahu-cat-seo-seasonal-default .harahu-cat-seo-seasonal-body {
    border-left-color: #57534e;
}

/* a11y — reduce-motion + forced-colors integration */
@media (prefers-reduced-motion: reduce) {
    .izmael-cat-seo-seasonal summary,
    body.brand-nobamo .nobamo-cat-seo-seasonal summary {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .izmael-cat-seo-seasonal,
    body.brand-nobamo .nobamo-cat-seo-seasonal,
    body.brand-harahu .harahu-cat-seo-seasonal {
        border-top: 1px solid CanvasText;
    }
    .izmael-cat-seo-seasonal::before {
        background: Highlight;
    }
}


/* ===================================================================
   10. CATEGORY PAGE TITLE (H1) — PER-BRAND TYPOGRAPHY (Fáza category-typo)
   ===================================================================

   Riešenie: `.cat-page-title` semant. class na <h1> v index.php (zdieľaný IZMAEL+NOBAMO).
   HARAHU má vlastný `harahu-cat-title` v harahu-ironforge.css — nesahujeme naň.

   IZMAEL → DM Serif Display (fallback Playfair Display, Georgia, serif)
             — rovnaký ako izmael-cat-seo-summary → konzistencia × 4 nadpisov
   NOBAMO → Cinzel (fallback Lato, Georgia, serif), uppercase + letter-spacing
             — rovnaký ako nobamo-cat-seo-summary → konzistencia × 4 nadpisov

   HARAHU H1 — harahu-cat-title (Barlow Condensed) v harahu-ironforge.css:11683.
               Nepotrebuje zmenu — už OK.

   Kontrast (WCAG AA, verified):
     IZMAEL #111827 (text-gray-900) na white → 17.4:1 ✅ (oveľa nad 3:1 pre large text)
     NOBAMO #5A4215 na white → 9.07:1 ✅ (same ako nobamo-cat-seo-summary)
   =================================================================== */

/* IZMAEL default — DM Serif Display.
   `body` prefix dvíha špecificitu (0,1,1) nad Tailwind `.font-bold` (0,1,0)
   v app.css (load-order: app.css po category-seo-brands.css) → font-weight 400
   sa korektne aplikuje bez !important. */
body .cat-page-title {
    font-family: "DM Serif Display", "Playfair Display", Georgia, serif;
    font-weight: 400;
    /* font-size + color inherujeme z Tailwind text-2xl md:text-3xl text-gray-900 */
}

/* NOBAMO override — Cinzel uppercase */
body.brand-nobamo .cat-page-title {
    font-family: "Cinzel", "Lato", Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5A4215; /* deep gold — 9.07:1 na white */
}

/* HARAHU nemá .cat-page-title — používa harahu-cat-title (harahu-index.php) */


/* ===================================================================
   11. GPSR SECTION — PER-BRAND STYLING (Fáza category-typo)
   ===================================================================

   GPSR sekcia je teraz renderovaná cez seo-content.php case 'gpsr'.
   Summary elementy musia mať rovnaký font ako ostatné 3 nadpisy.

   IZMAEL → .izmael-cat-seo-section summary + .izmael-cat-seo-body
             (reuse existing classes, no new classes needed)
   NOBAMO → .nobamo-cat-seo-section summary + .nobamo-cat-seo-body
             (reuse existing classes)
   HARAHU → .harahu-cat-seo-section summary (harahu-cat-seo-summary)
             (reuse existing classes — already Barlow Condensed ✅)

   Žiadne nové CSS triedy — GPSR partial reuse existing section/summary/body
   classes z §2/§3/§4 tohto súboru.

   Táto sekcia slúži ako dokumentačný komentár pre budúce AI/dev sessions.
   =================================================================== */

/* GPSR section inherits full styling from §2/§3/§4 via shared class names:
   IZMAEL  : izmael-cat-seo-section + izmael-cat-seo-summary + izmael-cat-seo-body
   NOBAMO  : nobamo-cat-seo-section + nobamo-cat-seo-summary + nobamo-cat-seo-body
   HARAHU  : harahu-cat-seo-section + harahu-cat-seo-summary + harahu-cat-seo-body
   No additional CSS rules required. */


/* ===================================================================
   §7 — MOBILNÉ ZBALENIE SEO INTRA (Fáza 786.7, audit 785 N-14
        + zapracovaný review rev-786-7: P1-1 farba v svetlom režime,
        P1-2 CLS, P1-3 bez JS, P2-1 rotácia, P2-2 iniciálka)

   Na mobile stálo medzi H1 a produktmi ~450 px prózy — zákazník cez ňu
   scrolloval pri KAŽDEJ kategórii. Intro sa preto na mobile zbalí na
   3 riadky + „Zobraziť viac". Text ostáva v DOM CELÝ (line-clamp je
   čisto vizuálny) — SEO sa nemení.

   Riešenie je ČISTO CSS: <input type=checkbox> + <label> — funguje aj
   bez JS, tlačidlo je v HTML od prvého renderu (žiadny posun layoutu),
   rotácia mobil↔desktop je len media query.

   Markup: app/Views/category/partials/seo-content.php case 'top'
     .cat-seo-intro-collapse    obal
       .cat-seo-intro-cb        checkbox (vizuálne skrytý, fokusovateľný)
       .cat-seo-intro-txt       obal textu — clamp keď checkbox NIE je checked
       .cat-seo-intro-toggle    label = tlačidlo (len mobil)
   =================================================================== */

.cat-seo-intro-collapse {
    position: relative;
}

/* Checkbox: vizuálne skrytý, ale fokusovateľný (Space prepína).
   NIE display:none — stratil by fokusovateľnosť aj :checked štýlovanie
   v starých prehliadačoch by nebolo ovládateľné klávesnicou. */
.cat-seo-intro-cb {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .cat-seo-intro-cb:not(:checked) ~ .cat-seo-intro-txt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    /* IZMAEL iniciálka (drop-cap, float 2em — §base r. 86 + mobile r. 672)
       by v 3-riadkovom zbalení zožrala ~2 riadky (rev-786-7 P2-2) — na
       mobile ju vnútri zbaliteľného intra vypíname úplne (aj v rozbalenom
       stave, inak by text pri rozbalení „preskočil"). */
    .cat-seo-intro-txt .izmael-cat-seo-intro p:first-of-type::first-letter {
        float: none;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        margin: 0;
        color: inherit;
    }

    .cat-seo-intro-toggle {
        display: inline-block;
        margin: 2px 0 16px;
        padding: 8px 8px 8px 0; /* dotykový cieľ ≥ 30 px na výšku (WCAG 24 px min) */
        font: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1;
        text-decoration: underline;
        text-underline-offset: 3px;
        color: inherit;
        background: none;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    /* Prepínanie textov labelu podľa stavu checkboxu */
    .cat-seo-intro-cb:checked ~ .cat-seo-intro-toggle .cat-seo-intro-more {
        display: none;
    }
    .cat-seo-intro-cb:not(:checked) ~ .cat-seo-intro-toggle .cat-seo-intro-less {
        display: none;
    }

    /* Klávesnica: fokus na checkboxe zvýrazní label */
    .cat-seo-intro-cb:focus-visible ~ .cat-seo-intro-toggle {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    /* HARAHU brutal industrial — tón ako harahu-cat-seo-summary */
    body.brand-harahu .cat-seo-intro-toggle {
        padding-left: 8px; /* intro má na mobile padding 0 8px — tlačidlo lícuje s textom */
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    /* rev-786-7 P1-1: HARAHU default je SVETLÝ režim (is-dark len z localStorage)
       — cream-dim (#D4D7DA) by mal na cream pozadí kontrast ~1,4:1. Zrkadlí
       vzor harahu-ironforge.css r. 12551 (intro text má tie isté dve vetvy). */
    body.brand-harahu:not(.is-dark) .cat-seo-intro-toggle {
        color: var(--harahu-light-text, #1E2528);
    }
    body.brand-harahu.is-dark .cat-seo-intro-toggle {
        color: var(--harahu-cream-dim, inherit);
    }
}

/* Desktop: nič sa nezbaľuje — checkbox aj label úplne preč (ani tab-stop). */
@media (min-width: 768px) {
    .cat-seo-intro-cb,
    .cat-seo-intro-toggle {
        display: none;
    }
}