/*
Theme Name: Energi Press
Theme URI: https://rankwatt.com
Author: RankWatt
Description: Lightweight SEO-optimized theme for RankWatt — Korea Energy Label appliance TCO comparison. Zero external font requests. System font stack only.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: energi-press
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    /* Typography */
    --ep-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ep-font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* Colour palette — WCAG AA compliant */
    --ep-text:         #1a1a1a;   /* contrast ≥ 12:1 on white */
    --ep-text-muted:   #555555;   /* contrast ≥ 7:1 on white */
    --ep-text-faint:   #767676;   /* contrast ≥ 4.5:1 on white (AA minimum) */
    --ep-bg:           #ffffff;
    --ep-bg-alt:       #f7f7f7;
    --ep-border:       #e5e5e5;
    --ep-primary:      #1a6ed8;   /* contrast ≥ 4.5:1 on white */
    --ep-primary-dark: #1558b0;

    /* Spacing scale (multiples of 0.25 rem / 4 px) */
    --ep-s1:  0.25rem;   /*  4 px */
    --ep-s2:  0.5rem;    /*  8 px */
    --ep-s3:  0.75rem;   /* 12 px */
    --ep-s4:  1rem;      /* 16 px */
    --ep-s5:  1.5rem;    /* 24 px */
    --ep-s6:  2rem;      /* 32 px */
    --ep-s8:  3rem;      /* 48 px */
    --ep-s10: 4rem;      /* 64 px */

    /* Layout */
    --ep-container:        1120px;
    --ep-container-narrow:  760px;
    --ep-radius:            4px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ep-font);
    color: var(--ep-text);
    background: var(--ep-bg);
    line-height: 1.65;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--ep-primary); }
a:hover { color: var(--ep-primary-dark); }

code, kbd, pre, samp {
    font-family: var(--ep-font-mono);
    font-size: 0.875em;
}

pre {
    overflow-x: auto;
    background: var(--ep-bg-alt);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: var(--ep-s4) var(--ep-s5);
}

/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */

.ep-skip-link {
    position: absolute;
    top: -999px;
    left: var(--ep-s4);
    z-index: 9999;
    padding: var(--ep-s3) var(--ep-s4);
    background: var(--ep-bg);
    border: 2px solid var(--ep-primary);
    border-radius: var(--ep-radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ep-primary);
}
.ep-skip-link:focus { top: var(--ep-s4); }

/* Screen-reader only */
.ep-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Focus ring (keyboard nav) */
:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

.ep-container {
    max-width: var(--ep-container);
    margin-inline: auto;
    padding-inline: var(--ep-s5);
}

.ep-container--narrow {
    max-width: var(--ep-container-narrow);
    margin-inline: auto;
    padding-inline: var(--ep-s5);
}

/* ============================================================
   5. SITE HEADER
   ============================================================ */

.ep-site-header {
    background: var(--ep-bg);
    border-bottom: 1px solid var(--ep-border);
    padding-block: var(--ep-s3);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ep-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ep-s4);
}

/* Brand */
.ep-site-brand { flex-shrink: 0; }

.ep-site-logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0; padding: 0;
    line-height: 1.2;
}
.ep-site-logo a {
    color: var(--ep-text);
    text-decoration: none;
}
.ep-site-logo a:hover { color: var(--ep-primary); }

.ep-site-tagline {
    font-size: 0.6875rem;
    color: var(--ep-text-faint);
    margin: var(--ep-s1) 0 0;
}

/* ── Nav wrapper (desktop: flex row; mobile: hidden until .is-open) ─── */
.ep-nav-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ep-s5);
}

/* Primary nav list */
.ep-nav__list {
    display: flex;
    list-style: none;
    margin: 0; padding: 0;
    gap: var(--ep-s5);
}
.ep-nav__list li a {
    color: var(--ep-text-muted);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding-block: var(--ep-s2);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.ep-nav__list li a:hover,
.ep-nav__list li.current-menu-item > a,
.ep-nav__list li.current-menu-ancestor > a {
    color: var(--ep-primary);
    border-bottom-color: var(--ep-primary);
}

/* ── Search form ─── */
.ep-search-form {
    display: flex;
    align-items: center;
    border: 1px solid var(--ep-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--ep-bg-alt);
    transition: border-color 0.15s;
}
.ep-search-form:focus-within { border-color: var(--ep-primary); }

.ep-search-form__input {
    border: none;
    background: transparent;
    padding: var(--ep-s2) var(--ep-s3);
    font-size: 0.875rem;
    font-family: var(--ep-font);
    color: var(--ep-text);
    outline: none;
    width: 160px;
    min-width: 0;
}
.ep-search-form__input::placeholder { color: var(--ep-text-faint); }

.ep-search-form__btn {
    border: none;
    background: transparent;
    padding: var(--ep-s2) var(--ep-s3);
    cursor: pointer;
    color: var(--ep-text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ep-search-form__btn:hover { color: var(--ep-primary); }
.ep-search-form__btn svg { display: block; }

/* ── Mobile toggle ─── */
.ep-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    cursor: pointer;
    color: var(--ep-text);
    flex-shrink: 0;
}

/* Hamburger bars */
.ep-nav-toggle__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}
.ep-nav-toggle__bars span {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
/* X when open */
.ep-nav-toggle[aria-expanded="true"] .ep-nav-toggle__bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ep-nav-toggle[aria-expanded="true"] .ep-nav-toggle__bars span:nth-child(2) {
    opacity: 0;
}
.ep-nav-toggle[aria-expanded="true"] .ep-nav-toggle__bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile nav ─── */
@media (max-width: 767px) {
    .ep-nav-toggle { display: flex; }

    .ep-nav-wrapper {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--ep-bg);
        border-bottom: 1px solid var(--ep-border);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--ep-s4) var(--ep-s5);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        z-index: 99;
    }
    .ep-nav-wrapper.is-open { display: flex; }

    .ep-nav__list {
        flex-direction: column;
        gap: 0;
    }
    .ep-nav__list li a {
        display: block;
        padding: var(--ep-s3) 0;
        border-bottom: 1px solid var(--ep-border);
        font-size: 1rem;
    }
    .ep-nav__list li:last-child a { border-bottom: none; }

    .ep-search-form {
        margin-top: var(--ep-s4);
    }
    .ep-search-form__input { width: 100%; }
}

/* ============================================================
   6. MAIN CONTENT
   ============================================================ */

.ep-main {
    flex: 1;
    padding-block: var(--ep-s8);
}

/* ============================================================
   7. SITE FOOTER
   ============================================================ */

.ep-site-footer {
    border-top: 1px solid var(--ep-border);
    padding-block: var(--ep-s6);
    background: var(--ep-bg-alt);
    color: var(--ep-text-muted);
    font-size: 0.875rem;
}

.ep-site-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ep-s5);
}

.ep-footer-left { display: flex; flex-direction: column; gap: var(--ep-s2); }

.ep-footer-copy { margin: 0; font-weight: 500; }

.ep-footer-data-source { margin: 0; font-size: 0.8125rem; color: var(--ep-text-faint); }
.ep-footer-data-source a { color: var(--ep-text-faint); text-decoration: underline; }
.ep-footer-data-source a:hover { color: var(--ep-primary); }

.ep-footer-nav__list {
    display: flex;
    list-style: none;
    margin: 0; padding: 0;
    gap: var(--ep-s4);
    flex-wrap: wrap;
}
.ep-footer-nav__list li a {
    color: var(--ep-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
}
.ep-footer-nav__list li a:hover { color: var(--ep-primary); text-decoration: underline; }

/* ============================================================
   8. TYPOGRAPHY — PROSE CONTENT
   ============================================================ */

.ep-prose h1, .ep-prose h2, .ep-prose h3,
.ep-prose h4, .ep-prose h5, .ep-prose h6 {
    line-height: 1.25;
    font-weight: 700;
    margin-block: var(--ep-s6) var(--ep-s3);
    color: var(--ep-text);
}
.ep-prose h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.ep-prose h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.ep-prose h3 { font-size: 1.25rem; }

.ep-prose p        { margin-block: 0 var(--ep-s4); }
.ep-prose ul,
.ep-prose ol       { padding-left: var(--ep-s6); margin-block: 0 var(--ep-s4); }
.ep-prose li       { margin-bottom: var(--ep-s2); }
.ep-prose blockquote {
    border-left: 4px solid var(--ep-border);
    padding-left: var(--ep-s4);
    margin: var(--ep-s5) 0;
    color: var(--ep-text-muted);
    font-style: italic;
}

/* Tables inside prose */
.ep-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--ep-s5); }
.ep-prose th,
.ep-prose td {
    padding: var(--ep-s2) var(--ep-s4);
    border: 1px solid var(--ep-border);
    text-align: left;
    font-size: 0.9375rem;
}
.ep-prose th { background: var(--ep-bg-alt); font-weight: 600; }

/* ============================================================
   9. ARCHIVE / CARD GRID
   ============================================================ */

.ep-archive-header {
    margin-bottom: var(--ep-s8);
}
.ep-archive-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--ep-s3);
}
.ep-archive-desc {
    color: var(--ep-text-muted);
    font-size: 1.0625rem;
    margin: 0;
}

.ep-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--ep-s5);
}

.ep-card {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: var(--ep-s5);
    background: var(--ep-bg);
    transition: box-shadow 0.15s;
}
.ep-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }

.ep-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 var(--ep-s2);
    line-height: 1.3;
}
.ep-card__title a { color: var(--ep-text); text-decoration: none; }
.ep-card__title a:hover { color: var(--ep-primary); }

.ep-card__meta {
    font-size: 0.8125rem;
    color: var(--ep-text-faint);
    margin-bottom: var(--ep-s3);
}

.ep-card__excerpt {
    color: var(--ep-text-muted);
    font-size: 0.9375rem;
    margin: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   10. ENTRY (single post / page)
   ============================================================ */

.ep-entry-header { margin-bottom: var(--ep-s6); }

.ep-entry-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--ep-s4);
}

.ep-entry-meta {
    font-size: 0.875rem;
    color: var(--ep-text-faint);
    display: flex;
    gap: var(--ep-s4);
    flex-wrap: wrap;
    margin-bottom: var(--ep-s3);
}

/* ============================================================
   11. PAGINATION
   ============================================================ */

.ep-pagination {
    display: flex;
    gap: var(--ep-s2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--ep-s8);
}
.ep-pagination a,
.ep-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: var(--ep-s2) var(--ep-s3);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    color: var(--ep-text);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
}
.ep-pagination a:hover { border-color: var(--ep-primary); color: var(--ep-primary); }
.ep-pagination .current {
    background: var(--ep-primary);
    border-color: var(--ep-primary);
    color: #fff;
}
.ep-pagination .dots { border-color: transparent; }

/* ============================================================
   12. NOTICES
   ============================================================ */

.ep-notice {
    padding: var(--ep-s4) var(--ep-s5);
    border-radius: var(--ep-radius);
    margin-block: var(--ep-s5);
    font-size: 0.9375rem;
}
.ep-notice--warning {
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    color: #78350f;
}
.ep-notice--warning p { margin: 0; }

/* ============================================================
   13. 404 PAGE
   ============================================================ */

.ep-404 {
    text-align: center;
    padding-block: var(--ep-s10);
}
.ep-404__code {
    font-size: clamp(4rem, 15vw, 8rem);
    font-weight: 700;
    color: var(--ep-border);
    line-height: 1;
    margin-bottom: var(--ep-s4);
}
.ep-404__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    margin-bottom: var(--ep-s4);
}
.ep-404__text { color: var(--ep-text-muted); margin-bottom: var(--ep-s6); }
.ep-404__link {
    display: inline-block;
    padding: var(--ep-s3) var(--ep-s6);
    background: var(--ep-primary);
    color: #fff;
    border-radius: var(--ep-radius);
    text-decoration: none;
    font-weight: 600;
}
.ep-404__link:hover { background: var(--ep-primary-dark); color: #fff; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .ep-container,
    .ep-container--narrow { padding-inline: var(--ep-s4); }

    .ep-site-footer__inner { flex-direction: column; }
    .ep-entry-meta        { flex-direction: column; gap: var(--ep-s2); }
}

/* ============================================================
   15. HOMEPAGE
   ============================================================ */

.ep-home { padding-block: 0; }

/* ── Hero ─── */
.ep-hero {
    background: linear-gradient(160deg, #f0f6ff 0%, var(--ep-bg) 70%);
    padding-block: var(--ep-s10) var(--ep-s8);
    border-bottom: 1px solid var(--ep-border);
    text-align: center;
}

.ep-hero__title {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--ep-s4);
    color: var(--ep-text);
}

.ep-hero__subtitle {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    color: var(--ep-text-muted);
    margin: 0 0 var(--ep-s6);
}

/* Hero search */
.ep-hero-search {
    display: flex;
    max-width: 560px;
    margin-inline: auto;
    border: 2px solid var(--ep-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ep-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-hero-search:focus-within {
    border-color: var(--ep-primary);
    box-shadow: 0 2px 16px rgba(26,110,216,0.15);
}

.ep-hero-search__input {
    flex: 1;
    border: none;
    padding: var(--ep-s4) var(--ep-s5);
    font-size: 1rem;
    font-family: var(--ep-font);
    color: var(--ep-text);
    outline: none;
    min-width: 0;
}
.ep-hero-search__input::placeholder { color: var(--ep-text-faint); }

.ep-hero-search__btn {
    border: none;
    background: var(--ep-primary);
    color: #fff;
    padding: var(--ep-s4) var(--ep-s6);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--ep-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.ep-hero-search__btn:hover { background: var(--ep-primary-dark); }

/* Quick links */
.ep-quick-links {
    display: flex;
    justify-content: center;
    gap: var(--ep-s3);
    flex-wrap: wrap;
    margin-top: var(--ep-s5);
}

.ep-quick-link {
    display: inline-block;
    padding: var(--ep-s2) var(--ep-s4);
    border: 1px solid var(--ep-border);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    text-decoration: none;
    background: var(--ep-bg);
    transition: border-color 0.15s, color 0.15s;
}
.ep-quick-link:hover {
    border-color: var(--ep-primary);
    color: var(--ep-primary);
}
.ep-quick-link--disabled {
    color: var(--ep-text-faint);
    background: var(--ep-bg-alt);
    cursor: default;
    border-color: var(--ep-border);
}

/* ── Home sections ─── */
.ep-home-section {
    padding-block: var(--ep-s8);
    border-bottom: 1px solid var(--ep-border);
}
.ep-home-section:last-child { border-bottom: none; }

.ep-home-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ep-s4);
    margin-bottom: var(--ep-s5);
    flex-wrap: wrap;
}

.ep-home-section__title {
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    margin: 0 0 var(--ep-s5);
}
.ep-home-section__header .ep-home-section__title { margin: 0; }

.ep-home-section__desc {
    color: var(--ep-text-muted);
    font-size: 0.9375rem;
    margin: calc(-1 * var(--ep-s3)) 0 var(--ep-s5);
}

.ep-home-section__more {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Category tiles ─── */
.ep-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--ep-s4);
}

.ep-tile {
    display: flex;
    flex-direction: column;
    gap: var(--ep-s2);
    padding: var(--ep-s5);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-bg);
    text-decoration: none;
    color: var(--ep-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-tile:not(.ep-tile--disabled):hover {
    border-color: var(--ep-primary);
    box-shadow: 0 2px 10px rgba(26,110,216,0.1);
}
.ep-tile--disabled {
    background: var(--ep-bg-alt);
    color: var(--ep-text-faint);
    cursor: default;
}

.ep-tile__label {
    font-size: 1.125rem;
    font-weight: 700;
}
.ep-tile__desc {
    font-size: 0.875rem;
    color: var(--ep-text-muted);
}
.ep-tile--disabled .ep-tile__desc { color: var(--ep-text-faint); }

/* ── Top compares list ─── */
.ep-compare-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--ep-s2);
}
.ep-compare-list__item {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-bg);
}
.ep-compare-list__link {
    display: block;
    padding: var(--ep-s3) var(--ep-s4);
    color: var(--ep-text);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s, background 0.15s;
}
.ep-compare-list__link:hover {
    color: var(--ep-primary);
    background: var(--ep-bg-alt);
}

/* ── Trust block ─── */
.ep-trust-block {
    background: var(--ep-bg-alt);
    padding-block: var(--ep-s8);
}
.ep-trust-block__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--ep-s5);
}
.ep-trust-item { }
.ep-trust-item__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 var(--ep-s2);
}
.ep-trust-item__body {
    font-size: 0.875rem;
    color: var(--ep-text-muted);
    margin: 0;
    line-height: 1.6;
}
.ep-trust-item__body a { color: var(--ep-text-muted); }
.ep-trust-item__body a:hover { color: var(--ep-primary); }
.ep-trust-item--disclosure {
    grid-column: 1 / -1;
    padding-top: var(--ep-s4);
    border-top: 1px solid var(--ep-border);
}

@media (max-width: 640px) {
    .ep-hero { padding-block: var(--ep-s8) var(--ep-s6); }
    .ep-hero-search { border-radius: var(--ep-radius); }
    .ep-hero-search__btn { padding-inline: var(--ep-s4); }
}

/* ============================================================
   16. BREADCRUMB
   ============================================================ */

.ep-breadcrumb {
    font-size: 0.8125rem;
    color: var(--ep-text-faint);
    margin-bottom: var(--ep-s5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ep-s1);
}
.ep-breadcrumb a {
    color: var(--ep-text-faint);
    text-decoration: none;
}
.ep-breadcrumb a:hover { color: var(--ep-primary); }
.ep-breadcrumb__sep { color: var(--ep-border); }

/* ============================================================
   17. SINGLE — GUIDE
   ============================================================ */

.ep-single-guide__wrap {
    max-width: var(--ep-container-narrow);
    margin-inline: auto;
}
.ep-single-guide__header { margin-bottom: var(--ep-s6); }
.ep-single-guide__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.3;
    margin: 0 0 var(--ep-s3);
}
.ep-single-guide__thumb {
    margin-bottom: var(--ep-s5);
    border-radius: var(--ep-radius);
    overflow: hidden;
}
.ep-single-guide__thumb img { width: 100%; height: auto; }

/* ── Table of contents ── */
.ep-toc {
    background: var(--ep-bg-alt);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: var(--ep-s4) var(--ep-s5);
    margin-bottom: var(--ep-s6);
}
.ep-toc__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 var(--ep-s3);
    border: none;
}
.ep-toc__list {
    margin: 0;
    padding-left: var(--ep-s5);
    display: flex;
    flex-direction: column;
    gap: var(--ep-s2);
}
.ep-toc__list li { font-size: 0.875rem; }
.ep-toc__list a { color: var(--ep-primary); text-decoration: none; }
.ep-toc__list a:hover { text-decoration: underline; }
.ep-toc__sub { padding-left: var(--ep-s4); }

/* ============================================================
   18. SINGLE — MODEL
   ============================================================ */

.ep-single-model {
    max-width: var(--ep-container-narrow);
    margin-inline: auto;
}
.ep-single-model__header { margin-bottom: var(--ep-s5); }
.ep-single-model__title {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    line-height: 1.3;
    margin: 0 0 var(--ep-s4);
}
.ep-model-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ep-s3) var(--ep-s5);
    margin: 0;
    padding: var(--ep-s4);
    background: var(--ep-bg-alt);
    border-radius: var(--ep-radius);
    border: 1px solid var(--ep-border);
}
.ep-model-quick-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--ep-s1);
}
.ep-model-quick-stats dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ep-model-quick-stats dd {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--ep-text);
}
.ep-single-model__calc { margin-bottom: var(--ep-s8); }

/* ── Energy grade badge ── */
.ep-grade-badge {
    display: inline-block;
    padding: 0.1em 0.45em;
    border-radius: 3px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: var(--ep-text-muted);
}
.ep-grade-1 { background: #1a6ed8; }
.ep-grade-2 { background: #2e9e5b; }
.ep-grade-3 { background: #f0a020; }
.ep-grade-4 { background: #e06030; }
.ep-grade-5 { background: #c02020; }

/* ============================================================
   19. SINGLE — COMPARE
   ============================================================ */

.ep-single-compare__header { margin-bottom: var(--ep-s5); }
.ep-single-compare__title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.3;
    margin: 0;
}

/* ── Spec table ── */
.ep-compare-specs { margin-bottom: var(--ep-s6); }
.ep-compare-specs h2 { font-size: 1.125rem; margin-bottom: var(--ep-s4); }
.ep-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ep-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    white-space: nowrap;
}
.ep-compare-table th,
.ep-compare-table td {
    padding: var(--ep-s3) var(--ep-s4);
    border: 1px solid var(--ep-border);
    text-align: left;
}
.ep-compare-table thead th {
    background: var(--ep-bg-alt);
    font-weight: 600;
    font-size: 0.875rem;
}
.ep-compare-table tbody th {
    background: var(--ep-bg-alt);
    font-weight: 500;
    white-space: normal;
    max-width: 140px;
}
.ep-compare-table tbody tr:nth-child(even) td { background: #fafafa; }
.ep-spec-label { width: 30%; }
.ep-model-col  { width: 35%; }
.ep-compare-winner {
    background: #edf6ff !important;
    font-weight: 600;
    color: var(--ep-primary);
}
.ep-compare-winner__badge {
    display: inline-block;
    margin-left: var(--ep-s1);
    font-size: 0.75rem;
    color: var(--ep-primary);
}

/* ── Model link cards (inside compare page) ── */
.ep-compare-model-links { margin-bottom: var(--ep-s6); }
.ep-compare-model-links h2 { font-size: 1.125rem; margin-bottom: var(--ep-s4); }
.ep-compare-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--ep-s4);
}
.ep-model-link-card {
    display: flex;
    flex-direction: column;
    gap: var(--ep-s1);
    padding: var(--ep-s4);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    text-decoration: none;
    color: var(--ep-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-model-link-card:hover {
    border-color: var(--ep-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.ep-model-link-card__brand { font-size: 0.8125rem; color: var(--ep-text-muted); }
.ep-model-link-card__name  { font-size: 0.9375rem; font-weight: 600; }
.ep-model-link-card__cta   { font-size: 0.8125rem; color: var(--ep-primary); margin-top: auto; }

/* ── Coupang CTAs ── */
.ep-compare-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ep-s3);
    padding: var(--ep-s5);
    background: var(--ep-bg-alt);
    border-radius: var(--ep-radius);
    border: 1px solid var(--ep-border);
    margin-bottom: var(--ep-s6);
}
.ep-buy-btn {
    display: inline-block;
    padding: var(--ep-s3) var(--ep-s5);
    background: #e85c2e; /* Coupang rocket red */
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--ep-radius);
    text-decoration: none;
    transition: opacity 0.15s;
}
.ep-buy-btn:hover { opacity: 0.88; color: #fff; }
.ep-buy-btn--secondary {
    background: var(--ep-text-muted);
}
.ep-affiliate-disclosure {
    width: 100%;
    font-size: 0.75rem;
    color: var(--ep-text-faint);
    margin: 0;
}

/* ── Data source ── */
.ep-data-source {
    font-size: 0.8125rem;
    color: var(--ep-text-faint);
    border-top: 1px solid var(--ep-border);
    padding-top: var(--ep-s4);
    margin-top: var(--ep-s8);
}
.ep-data-source p { margin: 0; }
.ep-data-source a { color: var(--ep-text-faint); }
.ep-data-source a:hover { color: var(--ep-primary); }

/* ── Compare analysis prose ── */
.ep-compare-analysis { margin-bottom: var(--ep-s6); }

/* ============================================================
   20. RELATED SECTIONS
   ============================================================ */

.ep-related {
    margin-top: var(--ep-s8);
    padding-top: var(--ep-s5);
    border-top: 1px solid var(--ep-border);
}
.ep-related__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--ep-s4);
}
.ep-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ep-related__list .ep-related__item { margin-bottom: var(--ep-s2); }
.ep-related__link {
    font-size: 0.9375rem;
    color: var(--ep-primary);
    text-decoration: none;
}
.ep-related__link:hover { text-decoration: underline; }

/* ── Related guides as cards ── */
.ep-related__list--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--ep-s4);
}
.ep-related__list--cards .ep-related__item { margin: 0; }
.ep-related__list--cards .ep-card__inner {
    display: flex;
    flex-direction: column;
    gap: var(--ep-s2);
    padding: var(--ep-s3);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    text-decoration: none;
    color: var(--ep-text);
    height: 100%;
    transition: border-color 0.15s;
}
.ep-related__list--cards .ep-card__inner:hover { border-color: var(--ep-primary); }
.ep-related__list--cards .ep-card__thumb img {
    border-radius: var(--ep-radius);
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.ep-related__list--cards .ep-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ep-related__list--cards .ep-card__excerpt {
    font-size: 0.8125rem;
    color: var(--ep-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   21. RESPONSIVE — single pages
   ============================================================ */

@media (max-width: 640px) {
    .ep-model-quick-stats { flex-direction: column; gap: var(--ep-s3); }
    .ep-compare-table { font-size: 0.8125rem; }
    .ep-compare-table th,
    .ep-compare-table td { padding: var(--ep-s2) var(--ep-s3); }
    .ep-compare-cta { flex-direction: column; align-items: stretch; }
    .ep-buy-btn { text-align: center; }
    .ep-related__list--cards { grid-template-columns: 1fr; }
}

/* ============================================================
   22. ARCHIVE — SHARED
   ============================================================ */

.ep-archive-header { margin-bottom: var(--ep-s5); }
.ep-archive-title  { font-size: clamp(1.375rem, 2.5vw, 1.875rem); margin: 0 0 var(--ep-s2); }
.ep-archive-desc   { color: var(--ep-text-muted); margin: 0; font-size: 0.9375rem; }
.ep-archive-count  { font-size: 0.875rem; color: var(--ep-text-faint); margin: 0 0 var(--ep-s4); }
.ep-no-results     { color: var(--ep-text-muted); padding: var(--ep-s8) 0; text-align: center; }

/* ============================================================
   23. ARCHIVE — FILTER BAR (model archive)
   ============================================================ */

.ep-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ep-s4) var(--ep-s5);
    padding: var(--ep-s4) var(--ep-s5);
    background: var(--ep-bg-alt);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    margin-bottom: var(--ep-s5);
}
.ep-filter-form {
    display: contents; /* renders children directly inside filter-bar flex */
}
.ep-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--ep-s1);
}
.ep-filter-group__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ep-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ep-s1);
}
.ep-filter-chip {
    display: inline-block;
    padding: var(--ep-s1) var(--ep-s3);
    border: 1px solid var(--ep-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--ep-text-muted);
    background: var(--ep-bg);
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    white-space: nowrap;
}
.ep-filter-chip:hover {
    border-color: var(--ep-primary);
    color: var(--ep-primary);
}
.ep-filter-chip--active {
    background: var(--ep-primary);
    border-color: var(--ep-primary);
    color: #fff;
    font-weight: 600;
}
.ep-filter-chip--active:hover { color: #fff; }

/* Grade-coloured chips (accent border when not active) */
.ep-filter-chip--grade.ep-grade-chip-1:not(.ep-filter-chip--active) { border-color: #1a6ed8; color: #1a6ed8; }
.ep-filter-chip--grade.ep-grade-chip-2:not(.ep-filter-chip--active) { border-color: #2e9e5b; color: #2e9e5b; }
.ep-filter-chip--grade.ep-grade-chip-3:not(.ep-filter-chip--active) { border-color: #f0a020; color: #c07000; }
.ep-filter-chip--grade.ep-grade-chip-4:not(.ep-filter-chip--active) { border-color: #e06030; color: #c04000; }
.ep-filter-chip--grade.ep-grade-chip-5:not(.ep-filter-chip--active) { border-color: #c02020; color: #a00000; }

.ep-sort-select {
    height: 34px;
    padding: 0 var(--ep-s3);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    font-size: 0.8125rem;
    background: var(--ep-bg);
    color: var(--ep-text);
    cursor: pointer;
}
.ep-sort-select:focus { outline: 2px solid var(--ep-primary); outline-offset: 1px; }
.ep-filter-btn {
    height: 34px;
    padding: 0 var(--ep-s4);
    background: var(--ep-primary);
    color: #fff;
    border: none;
    border-radius: var(--ep-radius);
    font-size: 0.875rem;
    cursor: pointer;
}
.ep-filter-clear {
    font-size: 0.8125rem;
    color: var(--ep-text-faint);
    text-decoration: none;
    align-self: flex-end;
    padding-bottom: 2px;
}
.ep-filter-clear:hover { color: var(--ep-primary); }

/* ============================================================
   24. ARCHIVE — MODEL CARD GRID
   ============================================================ */

.ep-model-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: var(--ep-s4);
    margin-bottom: var(--ep-s6);
}
.ep-related--models .ep-model-card-grid {
    margin-bottom: 0;
}
.ep-model-card {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-bg);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ep-model-card:hover {
    border-color: var(--ep-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ep-model-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--ep-s2);
    padding: var(--ep-s4);
    text-decoration: none;
    color: var(--ep-text);
    height: 100%;
}
.ep-model-card__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ep-model-card__brand {
    font-size: 0.75rem;
    color: var(--ep-text-faint);
}
.ep-model-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ep-model-card__stats {
    display: flex;
    gap: var(--ep-s4);
    margin: auto 0 0;
}
.ep-model-card__stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ep-model-card__stats dt {
    font-size: 0.6875rem;
    color: var(--ep-text-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ep-model-card__stats dd {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
    color: var(--ep-primary);
}
.ep-model-card__cta {
    font-size: 0.8125rem;
    color: var(--ep-primary);
    margin-top: auto;
    white-space: nowrap;
    align-self: flex-end;
}

/* ============================================================
   25. ARCHIVE — COMPARE GROUPS
   ============================================================ */

.ep-compare-group {
    margin-bottom: var(--ep-s8);
    padding-bottom: var(--ep-s6);
    border-bottom: 1px solid var(--ep-border);
}
.ep-compare-group:last-child { border-bottom: none; }
.ep-compare-group__title {
    font-size: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: var(--ep-s2);
    margin-bottom: var(--ep-s4);
}
.ep-compare-group__count {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ep-text-faint);
}
.ep-compare-list--archive { gap: 0; }
.ep-compare-list--archive .ep-compare-list__item {
    border-bottom: 1px solid var(--ep-border);
}
.ep-compare-list--archive .ep-compare-list__item:first-child {
    border-top: 1px solid var(--ep-border);
}
.ep-compare-group__more {
    margin: var(--ep-s3) 0 0;
    font-size: 0.875rem;
}
.ep-compare-group__more a { color: var(--ep-primary); text-decoration: none; }
.ep-compare-group__more a:hover { text-decoration: underline; }

/* ============================================================
   26. ARCHIVE — GUIDE CATEGORY NAV
   ============================================================ */

.ep-guide-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ep-s2);
    margin-bottom: var(--ep-s5);
    padding-bottom: var(--ep-s4);
    border-bottom: 1px solid var(--ep-border);
}
.ep-guide-cat-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ep-s1);
    padding: var(--ep-s1) var(--ep-s3);
    border: 1px solid var(--ep-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--ep-text-muted);
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
}
.ep-guide-cat-nav__link:hover {
    border-color: var(--ep-primary);
    color: var(--ep-primary);
}
.ep-guide-cat-nav__link--active {
    background: var(--ep-primary);
    border-color: var(--ep-primary);
    color: #fff;
    font-weight: 600;
}
.ep-guide-cat-nav__link--active:hover { color: #fff; }
.ep-guide-cat-nav__count {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ============================================================
   27. RESPONSIVE — archive pages
   ============================================================ */

@media (max-width: 768px) {
    .ep-filter-bar    { gap: var(--ep-s3); padding: var(--ep-s3) var(--ep-s4); }
    .ep-filter-chips  { gap: var(--ep-s1); }
    .ep-model-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
}
@media (max-width: 480px) {
    .ep-model-card-grid { grid-template-columns: 1fr 1fr; }
    .ep-filter-bar      { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   28. STATIC LEGAL PAGES
   ============================================================ */

.ep-legal-page {
    max-width: 760px;
}

/* Article wrapper */
.ep-legal-content {
    margin-top: var(--ep-s6);
}

/* Section spacing */
.ep-legal-section {
    margin-bottom: var(--ep-s7);
}
.ep-legal-section h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ep-text);
    margin-bottom: var(--ep-s3);
    padding-bottom: var(--ep-s2);
    border-bottom: 2px solid var(--ep-primary);
}

/* Lists */
.ep-legal-list {
    list-style: disc;
    padding-left: var(--ep-s5);
    line-height: 1.8;
    color: var(--ep-text);
}
.ep-legal-list li {
    margin-bottom: var(--ep-s2);
}
.ep-legal-list a {
    color: var(--ep-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Footnote / note text */
.ep-legal-note {
    font-size: 0.875rem;
    color: var(--ep-text-muted);
    margin-top: var(--ep-s3);
    padding: var(--ep-s3) var(--ep-s4);
    background: var(--ep-surface);
    border-left: 3px solid var(--ep-border);
    border-radius: 0 var(--ep-radius) var(--ep-radius) 0;
}

/* Affiliate disclosure banner */
.ep-disclosure-banner {
    background: #fff8e1;
    border: 1px solid #f9a825;
    border-radius: var(--ep-radius);
    padding: var(--ep-s4) var(--ep-s5);
    margin-bottom: var(--ep-s6);
    font-weight: 600;
    color: #5d4037;
    line-height: 1.6;
}

/* Contact email link */
.ep-contact-email {
    margin: var(--ep-s4) 0;
}
.ep-contact-email__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ep-s2);
    padding: var(--ep-s3) var(--ep-s5);
    background: var(--ep-primary);
    color: #fff;
    border-radius: var(--ep-radius);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.12s;
}
.ep-contact-email__link:hover { opacity: 0.88; }

/* Footer nav list (static fallback + assigned menu) */
.ep-footer-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ep-s2) var(--ep-s5);
}
.ep-footer-nav__list li a,
.ep-footer-nav__list a {
    font-size: 0.875rem;
    color: var(--ep-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.ep-footer-nav__list li a:hover,
.ep-footer-nav__list a:hover {
    color: var(--ep-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   29. RESPONSIVE — legal pages
   ============================================================ */

@media (max-width: 600px) {
    .ep-disclosure-banner { padding: var(--ep-s3) var(--ep-s4); }
    .ep-legal-section h2  { font-size: 1rem; }
    .ep-footer-nav__list  { gap: var(--ep-s2) var(--ep-s3); }
}