/* ============================================================
   The Plumbing Directory — Shared Design System
   Matched to Brilliant Directories theme
   ============================================================
   Color Palette (from BD site):
     Primary:        #205081  rgb(32, 80, 129)
     Accent Cyan:    #27c5f4  rgb(39, 197, 244)
     CTA Red:        #d9534f  rgb(217, 83, 79)
     CTA Green:      #2ab27b  rgb(42, 178, 123)
     Nav Dark:       #231f20  rgb(35, 31, 32)
     Text:           #292929  rgb(41, 41, 41)
     Text Muted:     #777777
     Link:           #337ab7  rgb(51, 122, 183)
     Link Hover:     #23527c  rgb(35, 82, 124)
     Module BG:      #fafafa  rgb(250, 250, 250)
     Border:         #eeeeee  rgb(238, 238, 238)
     Footer BG:      #232323  rgb(35, 35, 35)
     Footer Text:    #efefef  rgb(239, 239, 239)
     Body Font:      'Open Sans', sans-serif
     Nav Font:       'Archivo Black', sans-serif
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #232323;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #292929;
    background-color: #fff;
}

a {
    color: #337ab7;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #23527c;
    text-decoration: underline;
}

/* ── Layout ───────────────────────────────────────────────── */

.container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

main {
    padding: 30px 0 40px;
}

/* ── Header ──────────────────────────────────────────────── */

.header {
    background: #fff;
    border-bottom: none;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
    opacity: 0.95;
}

.logo-img {
    height: 80px;
    width: auto;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.btn:hover {
    text-decoration: none;
}

.btn-get-listed {
    background-color: #27c5f4;
    border-color: #27c5f4;
    color: #fff !important;
}

.btn-get-listed:hover {
    background-color: rgba(39, 197, 244, 0.9);
    color: #fff !important;
}

/* ── Main Navigation (Cyan Bar) ──────────────────────────── */

.main-nav {
    background-color: #27c5f4;
}

.main-nav .container {
    display: flex;
    align-items: center;
    position: relative;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: #231f20;
    font-size: 22px;
    cursor: pointer;
    padding: 12px 0;
}

.nav-list {
    display: flex;
    list-style: none;
    width: 100%;
}

.nav-list li {
    flex: 1;
    text-align: center;
}

.nav-list li a {
    display: block;
    padding: 14px 20px;
    color: #231f20;
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-list li a:hover {
    color: #000;
    text-decoration: none;
}

/* ── Category Dropdown ───────────────────────────────────── */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    cursor: pointer;
}

.nav-dropdown-trigger i {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.2s;
}

.nav-dropdown:hover .nav-dropdown-trigger i,
.nav-dropdown:focus-within .nav-dropdown-trigger i {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    padding: 8px 0;
    min-width: 220px;
    flex-direction: column;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
}

.nav-cat-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    color: #333;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.nav-cat-link:hover {
    background: #f5f5f5;
    color: #205081;
    text-decoration: underline;
}

.nav-cat-link i {
    display: none;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */

.breadcrumbs {
    background: #fff;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.breadcrumbs ul {
    list-style: none;
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #999;
    font-size: 13px;
}

.breadcrumbs a {
    color: rgba(119, 119, 119, 0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: #777;
    text-decoration: underline;
}

.breadcrumbs .current {
    color: #777;
}

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

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 34px;
    color: #3e3e3e;
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
    font-weight: 600;
}

h2 {
    font-size: 28px;
    color: #3e3e3e;
    margin-top: 30px;
    margin-bottom: 16px;
    padding-left: 0;
    border-left: none;
    font-weight: 600;
}

h3 {
    color: #3e3e3e;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

h4 {
    color: #3e3e3e;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.intro-text {
    color: #292929;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ── Content Sections (module/well style) ────────────────── */

.content-section {
    background: #fafafa;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-header h2 {
    margin: 0;
    font-size: 22px;
}

/* ── Category Hero Banner ─────────────────────────────────── */

.cat-hero {
    background: linear-gradient(135deg, #205081 0%, #2a6cb5 100%);
    border-radius: 6px;
    padding: 32px 30px 28px;
    margin-bottom: 25px;
    color: #fff;
}

.cat-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.cat-hero-icon {
    font-size: 36px;
    opacity: 0.7;
    margin-top: 4px;
    flex-shrink: 0;
}

.cat-hero h1 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 28px;
}

.cat-hero-desc {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.9;
    margin: 0;
}

.cat-hero-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.cat-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cat-hero-stat-num {
    font-size: 24px;
    font-weight: 700;
}

.cat-hero-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

@media (max-width: 600px) {
    .cat-hero {
        padding: 24px 20px;
    }

    .cat-hero-inner {
        flex-direction: column;
        gap: 12px;
    }

    .cat-hero h1 {
        font-size: 22px;
    }

    .cat-hero-stats {
        gap: 16px;
    }

    .cat-hero-stat-num {
        font-size: 20px;
    }
}

/* ── Item Card Badge Variants ────────────────────────────── */

.item-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.item-card-badge--low { background: #e8f5e9; color: #2e7d32; }
.item-card-badge--medium { background: #fff3e0; color: #e65100; }
.item-card-badge--high { background: #fbe9e7; color: #c62828; }
.item-card-badge--critical { background: #c62828; color: #fff; }
.item-card-badge--easy { background: #e8f5e9; color: #2e7d32; }
.item-card-badge--moderate { background: #fff3e0; color: #e65100; }
.item-card-badge--hard { background: #fbe9e7; color: #c62828; }

/* ── Category Section Distinct Treatments ────────────────── */

.cat-section--types { border-left: 4px solid #1565c0; }
.cat-section--brands { border-left: 4px solid #6a1b9a; }
.cat-section--problems { border-left: 4px solid #c62828; }
.cat-section--guides { border-left: 4px solid #2e7d32; }
.cat-section--buying { border-left: 4px solid #e65100; }
.cat-section--install { border-left: 4px solid #00838f; }
.cat-section--maint { border-left: 4px solid #558b2f; }
.cat-section--cost { border-left: 4px solid #f9a825; }

.cat-section--types .section-icon { color: #1565c0; }
.cat-section--brands .section-icon { color: #6a1b9a; }
.cat-section--problems .section-icon { color: #c62828; }
.cat-section--guides .section-icon { color: #2e7d32; }
.cat-section--buying .section-icon { color: #e65100; }
.cat-section--install .section-icon { color: #00838f; }
.cat-section--maint .section-icon { color: #558b2f; }
.cat-section--cost .section-icon { color: #f9a825; }

/* ── Related Resources Elevated Style ────────────────────── */

.cat-related-resources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.cat-related-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.cat-related-card:hover {
    border-color: #205081;
    box-shadow: 0 4px 16px rgba(32,80,129,0.12);
    transform: translateY(-2px);
    text-decoration: none;
}

.cat-related-card i {
    font-size: 24px;
    color: #205081;
    flex-shrink: 0;
    margin-top: 2px;
}

.cat-related-card h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.cat-related-card p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.cat-related-card:hover h3 { color: #205081; }

/* ── Hub Filter Bar ──────────────────────────────────────── */

.hub-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.hub-filter-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.hub-filter-btn:hover {
    border-color: #205081;
    color: #205081;
}

.hub-filter-active {
    background: #205081;
    border-color: #205081;
    color: #fff;
}

.hub-filter-active:hover {
    background: #1a4068;
    color: #fff;
}

/* ── Key Takeaway Box ────────────────────────────────────── */

.key-takeaway {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3f8ff 100%);
    border: 1px solid #bbdefb;
    border-left: 4px solid #1565c0;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.key-takeaway-header {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1565c0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.key-takeaway-header i {
    font-size: 14px;
}

.key-takeaway p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

/* ── Scroll-Spy Active TOC Link ──────────────────────────── */

.article-toc a.toc-active {
    color: #205081;
    font-weight: 700;
    border-left: 2px solid #205081;
    padding-left: 6px;
}

/* ── Comparison Table ────────────────────────────────────── */

.comparison-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
}

.comparison-table th {
    background: #f5f7fa;
    font-weight: 700;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 2px solid #ddd;
    white-space: nowrap;
}

.comparison-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.comparison-table tr:hover td {
    background: #f9fbff;
}

.comparison-table td a {
    color: #205081;
    text-decoration: none;
}

.comparison-table td a:hover {
    text-decoration: underline;
}

.comparison-table--stacked td {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
    border-left: 3px solid #e3f2fd;
}

.comparison-table--stacked tr:nth-child(odd) td {
    background: #fafbfc;
}

.comparison-table--stacked tr:nth-child(even) td {
    background: #fff;
}

/* ── Cost Guide Section Styling ──────────────────────────── */

.buying-guide-section h3 {
    font-size: 16px;
    margin-bottom: 6px;
    color: #292929;
}

.buying-guide-section {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.buying-guide-section:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .comparison-table {
        font-size: 12px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 8px 10px;
    }
}

/* ── Item Grid & Cards ────────────────────────────────────── */

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.item-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: all 0.2s ease;
}

.item-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #ddd;
}

a.item-card--link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.item-card--link:hover {
    border-color: #337ab7;
    box-shadow: 0 2px 12px rgba(51,122,183,0.15);
}

a.item-card--link:hover h3 {
    color: #337ab7;
}

.item-card h3 {
    color: #3e3e3e;
    font-size: 16px;
    margin-bottom: 8px;
}

.item-card h3 a {
    color: #337ab7;
}

.item-card h3 a:hover {
    color: #23527c;
}

.item-card p {
    color: #292929;
    font-size: 13px;
    line-height: 1.6;
}

.item-card a {
    display: inline-block;
    margin-top: 8px;
    color: #337ab7;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: color 0.2s;
}

.item-card a:hover {
    color: #23527c;
    text-decoration: underline;
}

.coming-soon-tag {
    display: inline-block;
    margin-top: 8px;
    color: #999;
    font-size: 12px;
    font-style: italic;
}

.item-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    margin-right: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #e8f5e9;
    color: #2e7d32;
}

.item-card-badge--price {
    background: #e3f2fd;
    color: #1565c0;
}

.item-card-badge i {
    font-size: 10px;
}

.item-card-tier {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.item-card-tier--budget { background: #e8f5e9; color: #2e7d32; }
.item-card-tier--mid-range { background: #e3f2fd; color: #1565c0; }
.item-card-tier--premium { background: #ede7f6; color: #5e35b1; }
.item-card-tier--luxury { background: #fce4ec; color: #ad1457; }

.item-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    font-weight: 600;
    color: #337ab7;
}

a.item-card--link:hover .item-card-cta {
    color: #205081;
}

.item-card-cta i {
    font-size: 11px;
    transition: transform 0.2s;
}

a.item-card--link:hover .item-card-cta i {
    transform: translateX(3px);
}

/* ── Article Layout ──────────────────────────────────────── */

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    align-items: start;
}

.article-content {
    min-width: 0;
}

.article-header h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 12px;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.article-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    background: #f0f0f0;
    color: #555;
}

.article-badge i {
    font-size: 11px;
}

.article-badge--low { background: #e8f5e9; color: #2e7d32; }
.article-badge--medium { background: #fff3e0; color: #e65100; }
.article-badge--high { background: #fbe9e7; color: #c62828; }
.article-badge--easy { background: #e8f5e9; color: #2e7d32; }
.article-badge--moderate { background: #fff3e0; color: #e65100; }
.article-badge--hard { background: #fbe9e7; color: #c62828; }

/* ── Article TOC ─────────────────────────────────────────── */

.article-toc {
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.article-toc strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.article-toc a {
    font-size: 13px;
    color: #205081;
    text-decoration: none;
}

.article-toc a:hover {
    text-decoration: underline;
}

/* ── Article Body & Lists ────────────────────────────────── */

.article-body p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 12px;
}

.article-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.article-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.article-list li:last-child {
    border-bottom: none;
}

.article-list--tips li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.article-list--tips li i {
    color: #2e7d32;
    margin-top: 3px;
    flex-shrink: 0;
}

.article-list--warnings li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.article-list--warnings li i {
    color: #e65100;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── Article Tools ───────────────────────────────────────── */

.article-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.article-tool-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.article-tool-tag i {
    font-size: 11px;
}

/* ── Article Steps ───────────────────────────────────────── */

.article-steps {
    margin: 8px 0 0 0;
    padding: 0 0 0 24px;
    counter-reset: step-counter;
}

.article-step {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.article-step:last-child {
    border-bottom: none;
}

.article-step strong {
    font-size: 15px;
    color: #333;
}

.article-step p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-top: 6px;
}

.article-step-tip {
    margin-top: 8px;
    padding: 10px 14px;
    background: #f1f8e9;
    border-left: 3px solid #4caf50;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #33691e;
}

.article-step-tip i {
    color: #4caf50;
    margin-right: 4px;
}

.article-step-warning {
    margin-top: 8px;
    padding: 10px 14px;
    background: #fff3e0;
    border-left: 3px solid #ff9800;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #e65100;
}

.article-step-warning i {
    color: #ff9800;
    margin-right: 4px;
}

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

.article-callout {
    padding: 16px 20px;
    border-radius: 6px;
    margin-top: 8px;
}

.article-callout p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.article-callout--pro {
    background: #e3f2fd;
    border-left: 4px solid #1565c0;
    color: #0d47a1;
}

/* ── Article Related Cards ───────────────────────────────── */

.article-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.article-related-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.article-related-card:hover {
    border-color: #205081;
    text-decoration: none;
}

.article-related-card > i {
    color: #205081;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.article-related-card strong {
    font-size: 14px;
    color: #333;
    display: block;
    margin-bottom: 4px;
}

.article-related-card p {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* ── Article Sidebar ─────────────────────────────────────── */

.article-sidebar {
    position: sticky;
    top: 20px;
}

.article-quick-facts {
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
}

.article-quick-facts h3 {
    font-size: 15px;
    margin-bottom: 12px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-quick-facts dl {
    margin: 0;
}

.article-quick-facts dt {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.article-quick-facts dt:first-child {
    margin-top: 0;
}

.article-quick-facts dd {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    margin: 2px 0 0 0;
}

.article-sidebar-section {
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.article-sidebar-section h3 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-sidebar-links li {
    padding: 4px 0;
}

.article-sidebar-links a {
    font-size: 13px;
    color: #205081;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-sidebar-links a:hover {
    text-decoration: underline;
}

.article-sidebar-links a i {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

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

@media (max-width: 768px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    .article-related-grid {
        grid-template-columns: 1fr;
    }

    .article-toc ul {
        flex-direction: column;
        gap: 6px;
    }
}

/* ── Brand Meta (founded, buyer type) ─────────────────────── */

.brand-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

.brand-meta-item {
    display: flex;
    align-items: center;
    color: #205081;
    font-weight: 600;
}

.brand-meta-item::before {
    content: "\2022";
    margin-right: 6px;
    color: #205081;
}

.brand-meta-item:first-child::before {
    content: none;
}


/* ── View All Button ──────────────────────────────────────── */

.view-all-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #205081;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-size: 13px;
}

.view-all-btn:hover {
    background: rgba(32, 80, 129, 0.9);
    color: #fff;
    text-decoration: none;
}

/* ── Table of Contents ────────────────────────────────────── */

.toc-section {
    background: #fafafa;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.toc-title {
    font-size: 18px;
    color: #3e3e3e;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 600;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.toc-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    color: #337ab7;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
    border: 1px solid #eee;
}

.toc-link:hover {
    background: #205081;
    color: #fff;
    text-decoration: none;
    border-color: #205081;
}

.toc-link::before {
    content: "\25B8";
    margin-right: 8px;
    font-size: 14px;
}

/* ── Section Icons ────────────────────────────────────────── */

.section-icon {
    color: #205081;
    margin-right: 6px;
    font-size: 0.85em;
}

.toc-icon {
    color: #205081;
    margin-right: 6px;
    font-size: 0.9em;
    width: 16px;
    text-align: center;
}

/* ── Category Section Accent Borders ─────────────────────── */

.cat-section--buying {
    border-left: 4px solid #205081;
}

.cat-section--install {
    border-left: 4px solid #2e7d32;
}

.cat-section--maint {
    border-left: 4px solid #e67e22;
}

.cat-section--cost {
    border-left: 4px solid #8e44ad;
}

/* ── Category Brands List Page ───────────────────────────── */

.catbrand-hero {
    background: linear-gradient(135deg, #205081 0%, #2a6cb5 100%);
    border-radius: 6px;
    padding: 32px 30px;
    margin-bottom: 25px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.catbrand-hero-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}

.catbrand-hero-icon {
    font-size: 32px;
    opacity: 0.8;
}

.catbrand-hero h1 {
    color: #fff;
    margin: 0;
    font-size: 26px;
}

.catbrand-hero-sub {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 4px;
    line-height: 1.5;
}

.catbrand-hero-stat {
    background: rgba(255,255,255,0.15);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
}

.catbrand-hero-stat strong {
    font-size: 22px;
    font-weight: 700;
}

.catbrand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.catbrand-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.catbrand-card:hover {
    border-color: #205081;
    box-shadow: 0 4px 16px rgba(32,80,129,0.12);
    text-decoration: none;
}

.catbrand-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.catbrand-card-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #f9fafb;
    border: 1px solid #eee;
    padding: 4px;
}

.catbrand-card-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #205081;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}

.catbrand-card-title {
    flex: 1;
    min-width: 0;
}

.catbrand-card-title h3 {
    font-size: 17px;
    color: #292929;
    margin: 0 0 3px;
}

.catbrand-card:hover .catbrand-card-title h3 {
    color: #205081;
}

.catbrand-card-meta {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: #888;
}

.catbrand-card-meta span:not(:last-child)::after {
    content: "·";
    margin-left: 6px;
}

.catbrand-card-tier {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

.catbrand-card-tier--budget { background: #e8f5e9; color: #2e7d32; }
.catbrand-card-tier--mid-range { background: #e3f2fd; color: #1565c0; }
.catbrand-card-tier--premium { background: #ede7f6; color: #5e35b1; }
.catbrand-card-tier--luxury { background: #fce4ec; color: #ad1457; }

.catbrand-card-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 14px;
    flex-grow: 1;
}

.catbrand-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #337ab7;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.catbrand-card:hover .catbrand-card-cta {
    color: #205081;
}

.catbrand-card-cta i {
    font-size: 11px;
    transition: transform 0.2s;
}

.catbrand-card:hover .catbrand-card-cta i {
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .catbrand-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .catbrand-hero-inner {
        flex-direction: column;
    }

    .catbrand-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Category Brand Cards ────────────────────────────────── */

.cat-brand-card {
    padding: 16px;
}

.cat-brand-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cat-brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.cat-brand-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #205081;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
}

.cat-brand-header h3 {
    margin-bottom: 0;
}

.cat-brand-country {
    font-size: 11px;
    color: #999;
}

/* ── FAQ Accordion ───────────────────────────────────────── */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.faq-item {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    overflow: hidden;
}

.faq-question {
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #3e3e3e;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: "\f078";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

details[open] .faq-question::after {
    transform: rotate(180deg);
    color: #205081;
}

.faq-question:hover {
    background: #f8f9fa;
}

details[open] .faq-question {
    border-bottom: 1px solid #eee;
    color: #205081;
}

.faq-answer {
    padding: 16px 18px;
    color: #292929;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* ── Type Cards ──────────────────────────────────────────── */

.type-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}

.type-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 22px;
    transition: all 0.2s;
}

.type-card:hover {
    border-color: #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.type-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.type-card-header h3 {
    margin: 0;
    color: #205081;
    font-size: 17px;
}

.type-card-desc {
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.type-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.type-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
    color: #555;
}

.type-meta-tag i {
    font-size: 11px;
}

.type-meta-tag--best {
    background: #e8f5e9;
    color: #2e7d32;
}

.type-meta-tag--best i {
    color: #2e7d32;
}

.type-meta-tag--price {
    background: #e3f2fd;
    color: #1565c0;
}

.type-meta-tag--price i {
    color: #1565c0;
}

.type-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.type-pros-label {
    display: block;
    font-size: 13px;
    color: #2e7d32;
    margin-bottom: 6px;
}

.type-pros-label i {
    margin-right: 4px;
}

.type-cons-label {
    display: block;
    font-size: 13px;
    color: #c62828;
    margin-bottom: 6px;
}

.type-cons-label i {
    margin-right: 4px;
}

.type-pros ul,
.type-cons ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

.type-card-cta {
    display: inline-block;
    margin-top: 12px;
    color: #337ab7;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.type-card-cta:hover {
    color: #23527c;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .type-pros-cons {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .type-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Problem Cards ───────────────────────────────────────── */

a.problem-card-link,
a.guide-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.problem-card-link:hover .problem-card,
a.guide-card-link:hover .guide-card {
    border-color: #205081;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

a.problem-card-link:hover .problem-card-header h3,
a.guide-card-link:hover .guide-card-header h3 {
    color: #205081;
}

.problem-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.problem-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;
    transition: all 0.2s;
}

.problem-card:hover {
    border-color: #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.problem-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.problem-card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.problem-card-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.problem-severity {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.problem-severity--low {
    background: #e8f5e9;
    color: #2e7d32;
}

.problem-severity--medium {
    background: #fff3e0;
    color: #e65100;
}

.problem-severity--high {
    background: #fce4ec;
    color: #c62828;
}

.problem-severity--critical {
    background: #c62828;
    color: #fff;
}

.problem-diy-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background: #e3f2fd;
    color: #1565c0;
}

.problem-card-desc {
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.problem-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.problem-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 10px;
    background: #f5f7fa;
    border: 1px solid #e8ecf0;
    border-radius: 4px;
    color: #555;
}

.problem-meta-tag i {
    color: #205081;
    font-size: 11px;
}

.problem-tools {
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.problem-tools strong {
    color: #555;
}

.problem-tools i {
    color: #205081;
    margin-right: 2px;
}

.problem-tool-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 11px;
    color: #555;
}

@media (max-width: 600px) {
    .problem-card-header {
        flex-direction: column;
    }
}

/* ── About Page ──────────────────────────────────────────── */

.about-hero {
    background: linear-gradient(135deg, #205081 0%, #2a6cb5 50%, #205081 100%);
    border-radius: 6px;
    padding: 40px 30px;
    margin-bottom: 30px;
    color: #fff;
}

.about-hero-inner {
    display: flex;
    align-items: center;
    gap: 24px;
}

.about-photo img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    object-fit: cover;
}

.about-photo--placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255,255,255,0.5);
}

.about-hero-text h1 {
    color: #fff;
    border-bottom: none;
    margin-bottom: 6px;
    font-size: 28px;
}

.about-role {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.about-experience {
    font-size: 14px;
    opacity: 0.8;
}

.about-experience i {
    margin-right: 4px;
}

.about-bio p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 12px;
}

.about-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.about-spec-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.about-spec-tag i {
    font-size: 11px;
}

.about-connect {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #205081;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.about-link:hover {
    text-decoration: underline;
}

.about-link i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.about-credentials {
    margin-top: 8px;
}

.about-credential-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.about-credential-img {
    width: 200px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.about-credential-text strong {
    font-size: 15px;
    color: #333;
}

.about-credential-text p {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.about-tagline {
    font-size: 17px;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 700px;
}

/* ── About Values Grid ──────────────────────────────────── */

.about-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 8px;
}

.about-value-card {
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.about-value-icon {
    font-size: 24px;
    color: #205081;
    margin-bottom: 10px;
}

.about-value-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.about-value-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* ── About Team Grid ────────────────────────────────────── */

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.about-team-card-link {
    text-decoration: none;
    color: inherit;
}

.about-team-card {
    text-align: center;
    padding: 24px 16px;
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.about-team-card:hover {
    border-color: #205081;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.about-team-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    display: block;
}

.about-team-photo--placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #999;
    margin: 0 auto 12px;
}

.about-team-card h3 {
    font-size: 15px;
    margin-bottom: 4px;
    color: #333;
}

.about-team-role {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.about-team-license {
    font-size: 12px;
    color: #2e7d32;
    font-weight: 600;
}

.about-team-license i {
    font-size: 11px;
    margin-right: 3px;
}

.about-back {
    text-align: center;
    padding: 10px 0;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid #205081;
    color: #205081;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
    background: #205081;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 600px) {
    .about-hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .about-hero-text h1 {
        font-size: 22px;
    }

    .about-values {
        grid-template-columns: 1fr;
    }

    .about-team-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-credential-card {
        flex-direction: column;
        text-align: center;
    }

    .about-credential-img {
        width: 100%;
        max-width: 280px;
    }

    .about-connect {
        flex-direction: column;
    }
}

/* ── Author Byline ───────────────────────────────────────── */

.author-byline {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.author-byline-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-byline-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-byline-photo--placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #999;
    flex-shrink: 0;
}

.author-byline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-byline-label {
    font-size: 13px;
    color: #555;
}

.author-byline-label a {
    color: #205081;
    font-weight: 600;
    text-decoration: none;
}

.author-byline-label a:hover {
    text-decoration: underline;
}

.author-byline-cred {
    font-size: 12px;
    color: #888;
}

/* ── Guide Cards ─────────────────────────────────────────── */

.guide-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.guide-card {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid #205081;
    border-radius: 6px;
    padding: 20px;
    transition: all 0.2s;
}

.guide-card:hover {
    border-color: #ddd;
    border-left-color: #205081;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.guide-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.guide-card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.guide-difficulty {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.guide-difficulty--easy {
    background: #e8f5e9;
    color: #2e7d32;
}

.guide-difficulty--moderate {
    background: #fff3e0;
    color: #e65100;
}

.guide-difficulty--hard {
    background: #fce4ec;
    color: #c62828;
}

.guide-card-desc {
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.guide-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.guide-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 10px;
    background: #f5f7fa;
    border: 1px solid #e8ecf0;
    border-radius: 4px;
    color: #555;
}

.guide-meta-tag i {
    color: #205081;
    font-size: 11px;
}

.guide-tools {
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.guide-tools strong {
    color: #555;
}

.guide-tools i {
    color: #205081;
    margin-right: 2px;
}

.guide-tool-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #e8f0f8;
    border-radius: 3px;
    font-size: 11px;
    color: #205081;
}

@media (max-width: 600px) {
    .guide-card-header {
        flex-direction: column;
    }
}

/* ── Brand-Category Page ─────────────────────────────────── */

.bc-hero {
    background: linear-gradient(135deg, #205081 0%, #2a6cb5 100%);
    border-radius: 6px;
    padding: 24px 28px;
    margin-bottom: 20px;
}

.bc-hero-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bc-hero-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
    flex-shrink: 0;
}

.bc-hero-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}

.bc-hero h1 {
    color: #fff;
    margin: 0;
    font-size: 22px;
}

.bc-hero-parent {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

.bc-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.bc-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 5px 12px;
    background: #f5f7fa;
    border: 1px solid #e8ecf0;
    border-radius: 4px;
    color: #555;
}

.bc-info-tag i {
    color: #205081;
    font-size: 11px;
}

.bc-info-link {
    text-decoration: none;
    color: #205081;
    font-weight: 600;
}

.bc-info-link:hover {
    background: #e8ecf0;
}

.bc-product-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bc-product-line {
    display: inline-block;
    padding: 6px 14px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.bc-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bc-cert-badge {
    display: inline-block;
    padding: 5px 12px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

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

.homepage-hero {
    background: linear-gradient(135deg, #205081 0%, #2a6cb5 50%, #205081 100%);
    color: #fff;
    padding: 48px 30px 40px;
    border-radius: 6px;
    margin-bottom: 30px;
    text-align: center;
}

.homepage-hero h1 {
    color: #fff;
    border-bottom: none;
    margin-bottom: 12px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.homepage-hero-sub {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 620px;
    margin: 0 auto 24px;
}

.homepage-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.homepage-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.homepage-stat-number {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.homepage-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* ── Homepage Category Stats ─────────────────────────────── */

.hp-cat-stats {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

.hp-cat-stats span:not(:last-child)::after {
    content: "·";
    margin-left: 8px;
}

/* ── Homepage Brand Grid ─────────────────────────────────── */

.hp-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.hp-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hp-brand-card:hover {
    border-color: #205081;
    box-shadow: 0 4px 12px rgba(32,80,129,0.1);
    text-decoration: none;
}

.hp-brand-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 4px;
}

.hp-brand-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.hp-brand-card:hover .hp-brand-name {
    color: #205081;
}

@media (max-width: 600px) {
    .homepage-hero {
        padding: 30px 15px;
    }

    .homepage-hero h1 {
        font-size: 24px;
    }

    .homepage-stats {
        gap: 16px;
    }

    .homepage-stat-number {
        font-size: 22px;
    }

    .hp-brand-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}

/* ── Hub Page Styles ──────────────────────────────────────── */

.hub-hero {
    background: linear-gradient(135deg, rgba(32, 80, 129, 0.9) 0%, rgba(32, 80, 129, 0.8) 100%);
    color: #fff;
    padding: 40px 30px;
    border-radius: 4px;
    margin-bottom: 25px;
    text-align: center;
}

.hub-hero h1 {
    color: #fff;
    border-bottom: none;
    margin-bottom: 12px;
    padding-bottom: 0;
    font-weight: 600;
}

.hub-hero p {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.hub-card {
    background: #fafafa;
    padding: 22px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: all 0.2s ease;
}

.hub-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #ddd;
}

.hub-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #3e3e3e;
}

.hub-card .card-icon {
    font-size: 1.6rem;
    margin-bottom: 10px;
    display: block;
    color: #205081;
}

.hub-card p {
    color: #292929;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
}

a.hub-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.hub-card-link:hover .hub-card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #205081;
}

.hub-card a.card-link {
    display: inline-block;
    color: #337ab7;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.hub-card a.card-link:hover {
    color: #23527c;
    text-decoration: underline;
}

/* ── Brands Hub — Filter Pills ───────────────────────────── */

.brands-hub-filters {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: all 0.2s;
}

.filter-pill:hover {
    background: #205081;
    color: #fff;
    border-color: #205081;
    text-decoration: none;
}

.filter-pill i {
    font-size: 11px;
}

.filter-count {
    background: #eee;
    color: #555;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s;
}

.filter-pill:hover .filter-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── Brands Hub — A-Z Navigation ─────────────────────────── */

.az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 25px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.az-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #205081;
    text-decoration: none;
    transition: all 0.15s;
}

.az-letter:hover {
    background: #205081;
    color: #fff;
    text-decoration: none;
}

/* ── Brands Hub — Letter Sections ────────────────────────── */

.brands-letter-section {
    margin-bottom: 30px;
}

.letter-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #205081;
    margin-bottom: 16px;
}

.letter-label {
    font-size: 28px;
    font-weight: 700;
    color: #205081;
    line-height: 1;
}

.letter-count {
    font-size: 12px;
    color: #999;
    font-weight: 600;
}

.back-to-top {
    margin-left: auto;
    font-size: 12px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.back-to-top:hover {
    color: #205081;
    text-decoration: none;
}

/* ── Brands Hub — Brand Cards ────────────────────────────── */

.brands-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.brand-hub-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 18px;
    transition: all 0.2s;
}

.brand-hub-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border-color: #ddd;
}

.brand-hub-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.brand-hub-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.brand-hub-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #205081;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
}

.brand-hub-title h3 {
    font-size: 16px;
    margin-bottom: 2px;
    color: #292929;
}

.brand-hub-parent {
    font-size: 11px;
    color: #999;
}

.brand-hub-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 12px;
    flex-grow: 1;
}

.brand-hub-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.brand-hub-cats {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.brand-hub-cat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f4f8;
    color: #205081;
    font-size: 11px;
    text-decoration: none;
    transition: all 0.2s;
}

.brand-hub-cat-pill:hover {
    background: #205081;
    color: #fff;
    text-decoration: none;
}

.cat-pill-wrap {
    position: relative;
}

.cat-pill-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 200;
}

.cat-pill-popup::after {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    transform: rotate(45deg);
}

.cat-pill-wrap:hover .cat-pill-popup {
    display: block;
}

.cat-pill-popup-header {
    font-size: 13px;
    font-weight: 700;
    color: #205081;
    margin-bottom: 6px;
}

.cat-pill-popup-header i {
    margin-right: 4px;
}

.cat-pill-popup-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 8px;
}

.cat-pill-popup-cta {
    font-size: 12px;
    font-weight: 600;
    color: #337ab7;
}

.brand-hub-price {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    cursor: default;
}

/* ── Brand Overview Page ──────────────────────────────────── */

.brand-page-header {
    margin-bottom: 16px;
}

.brand-header-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    padding: 8px;
    flex-shrink: 0;
}

.brand-title-block {
    flex: 1;
    min-width: 0;
}

.brand-title-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.brand-title-row h1 {
    margin-bottom: 4px;
}

.brand-parent {
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

.brand-tagline {
    font-size: 15px;
    color: #777;
    font-style: italic;
    margin-bottom: 8px;
}

/* ── Badge Bar ───────────────────────────────────────────── */

.brand-badge-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.brand-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: capitalize;
}

.brand-badge--neutral {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #eee;
}

.brand-badge--tier {
    color: #fff;
    border: none;
}

.brand-badge--tier-budget {
    background: #2ab27b;
}

.brand-badge--tier-mid-range {
    background: #337ab7;
}

.brand-badge--tier-premium {
    background: #205081;
}

.brand-badge--tier-luxury {
    background: #8e44ad;
}

/* ── Two-Column Layout ───────────────────────────────────── */

.brand-page-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 25px;
    align-items: start;
}

.brand-main {
    min-width: 0;
}

/* ── About Section ───────────────────────────────────────── */

.brand-known-for-text {
    font-size: 14px;
    line-height: 1.7;
    color: #292929;
    margin-top: 8px;
}

/* ── Category Cards ──────────────────────────────────────── */

.brand-category-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.brand-cat-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: box-shadow 0.2s ease;
}

.brand-cat-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.brand-cat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.brand-cat-card-header .card-icon {
    font-size: 1.3rem;
    color: #205081;
}

.brand-cat-card-header h3 {
    margin-bottom: 0;
}

a.brand-cat-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

a.brand-cat-card--link:hover {
    border-color: #205081;
    box-shadow: 0 4px 12px rgba(32,80,129,0.12);
    text-decoration: none;
}

a.brand-cat-card--link:hover h3 {
    color: #205081;
}

.brand-cat-card p {
    color: #292929;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.brand-product-lines {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.product-lines-label {
    font-size: 12px;
    color: #777;
    font-weight: 600;
}

.product-line-pill {
    display: inline-block;
    padding: 2px 10px;
    background: #eaf4fc;
    color: #205081;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.brand-cat-card .card-link {
    display: inline-block;
    color: #337ab7;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.brand-cat-card .card-link:hover {
    color: #23527c;
    text-decoration: underline;
}

/* ── Certification Badges ────────────────────────────────── */

.brand-cert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

a.cert-badge,
span.cert-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #c8e6c9;
    text-decoration: none;
    transition: all 0.2s;
}

a.cert-badge:hover {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
    text-decoration: none;
}

/* ── Sidebar ─────────────────────────────────────────────── */

.brand-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.brand-sidebar-panel {
    background: #fafafa;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.brand-sidebar-panel h4 {
    font-size: 15px;
    color: #3e3e3e;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #27c5f4;
}

/* ── Contact List ────────────────────────────────────────── */

.brand-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.contact-icon {
    font-size: 14px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    color: #205081;
}

.brand-contact-list a {
    color: #337ab7;
    text-decoration: none;
    font-weight: 600;
    word-break: break-word;
}

.brand-contact-list a:hover {
    color: #23527c;
    text-decoration: underline;
}

/* ── Quick Facts ─────────────────────────────────────────── */

.brand-facts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.brand-fact-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.brand-fact-row:last-child {
    border-bottom: none;
}

.brand-fact-row dt {
    font-size: 12px;
    color: #777;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.brand-fact-row dd {
    font-size: 13px;
    color: #292929;
    font-weight: 600;
    text-align: right;
}

/* ── Social Icon Row ─────────────────────────────────────── */

.brand-social-icons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s;
}

.social-icon-btn:hover {
    text-decoration: none;
    color: #fff;
}

.social-icon-btn--facebook:hover {
    background: #1877f2;
}

.social-icon-btn--instagram:hover {
    background: #e4405f;
}

.social-icon-btn--youtube:hover {
    background: #ff0000;
}

.social-icon-btn--linkedin:hover {
    background: #0a66c2;
}

.social-icon-btn--twitter:hover {
    background: #1da1f2;
}

/* ── List Page Styles (category sub-pages) ────────────────── */

.list-intro {
    background: #fafafa;
    padding: 20px 25px;
    border-radius: 4px;
    border: 1px solid #eee;
    margin-bottom: 25px;
}

.list-intro p {
    color: #292929;
    font-size: 14px;
    line-height: 1.7;
}

.list-count {
    display: inline-block;
    background: #205081;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

/* ── Empty State ──────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: 50px 25px;
    color: #999;
}

.empty-state p {
    font-size: 14px;
    margin-top: 8px;
}

/* ── Footer ──────────────────────────────────────────────── */

.footer {
    margin-top: 40px;
}

.footer-newsletter {
    background: #2ab27b;
    padding: 12px 0;
    text-align: center;
}

.footer-newsletter .container {
    display: flex;
    justify-content: center;
    gap: 0;
}

.btn-newsletter {
    background: #2ab27b;
    border: 2px solid #fff;
    border-right: 1px solid #fff;
    border-radius: 4px 0 0 4px;
    color: #fff !important;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
}

.btn-newsletter:hover {
    background: rgba(42, 178, 123, 0.85);
    color: #fff !important;
}

.btn-newsletter-subscribe {
    background: #fff;
    border: 2px solid #fff;
    border-left: 1px solid #eee;
    border-radius: 0 4px 4px 0;
    color: #2ab27b !important;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 14px;
}

.btn-newsletter-subscribe:hover {
    background: #f5f5f5;
    color: #2ab27b !important;
}

.footer-main {
    background: #232323;
    color: #efefef;
    padding: 35px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.footer-col p {
    font-size: 13px;
    line-height: 1.6;
    color: #efefef;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 6px;
}

.footer-col ul a {
    color: #efefef;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-col ul a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-cta {
    background: #232323;
    padding: 15px 0 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-cta-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-mail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2ab27b;
    color: #fff;
    font-size: 18px;
}

.btn-cta-listed {
    background: #d9534f;
    border-color: #d9534f;
    color: #fff !important;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
}

.btn-cta-listed:hover {
    background: rgba(217, 83, 79, 0.9);
    color: #fff !important;
}

.footer-bottom {
    background: #1a1a1a;
    padding: 14px 0;
}

.footer-bottom .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: rgba(239,239,239,0.7);
}

.footer-bottom span {
    color: rgba(239,239,239,0.7);
}

.footer-bottom a {
    color: rgba(239,239,239,0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom a:hover {
    color: #fff;
    text-decoration: none;
}

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

@media (max-width: 1100px) {
    .nav-list li a {
        padding: 12px 10px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    .header-inner {
        padding: 15px 0;
    }

    .logo-img {
        height: 60px;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list li {
        text-align: left;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    .nav-list li a {
        padding: 12px 15px;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-width: 100%;
        padding: 0;
        background: rgba(0,0,0,0.05);
        grid-template-columns: 1fr;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: grid;
    }

    .nav-cat-link {
        padding: 10px 20px;
        font-size: 13px;
    }

    .item-grid {
        grid-template-columns: 1fr;
    }

    .hub-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .view-all-btn {
        width: 100%;
        text-align: center;
    }

    .toc-grid {
        grid-template-columns: 1fr;
    }

    .brand-page-layout {
        grid-template-columns: 1fr;
    }

    .brand-sidebar {
        order: -1;
    }

    .brand-badge-bar {
        gap: 6px;
    }

    .hub-hero {
        padding: 25px 15px;
    }

    .hub-hero h1 {
        font-size: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-newsletter .container {
        flex-direction: column;
        gap: 0;
    }

    .btn-newsletter {
        border-radius: 4px 4px 0 0;
        border-right: 2px solid #fff;
        border-bottom: none;
    }

    .btn-newsletter-subscribe {
        border-radius: 0 0 4px 4px;
        border-left: 2px solid #fff;
        border-top: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .content-section {
        padding: 18px;
    }

    h1 {
        font-size: 22px;
    }

    .hub-card {
        padding: 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }

    .btn-cta-listed {
        padding: 10px 24px;
        font-size: 14px;
    }
}

/* ── Category Sub-Navigation ────────────────────────────── */

.category-subnav {
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.category-subnav .container {
    display: flex;
    gap: 0;
    white-space: nowrap;
}

.subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}

.subnav-link:hover {
    color: #205081;
    border-bottom-color: #205081;
    background: rgba(32, 80, 129, 0.04);
    text-decoration: none;
}

.subnav-link i {
    font-size: 11px;
}

.subnav-active {
    color: #205081;
    border-bottom-color: #205081;
    background: rgba(32, 80, 129, 0.06);
}

/* ── Find a Plumber CTA ─────────────────────────────────── */

.find-plumber-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #205081 0%, #2a6cb5 100%);
    border-radius: 6px;
    margin-top: 20px;
    color: #fff;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.find-plumber-cta:hover {
    box-shadow: 0 4px 16px rgba(32, 80, 129, 0.3);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.find-plumber-cta i {
    font-size: 24px;
    opacity: 0.85;
    flex-shrink: 0;
}

.find-plumber-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.find-plumber-cta-title {
    font-size: 15px;
    font-weight: 700;
}

.find-plumber-cta-sub {
    font-size: 12px;
    opacity: 0.85;
}

/* ── Article Date Line ──────────────────────────────────── */

.article-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.article-date i {
    margin-right: 4px;
}