/*
 * ============================================================
 * Vetanique Main Stylesheet — Brown + Tan + White Theme
 * Version: 5.0.0
 *
 * COLOUR ZONES:
 *   Hero / Footer / Hub section  →  --dark  (#3B2A1A warm brown)
 *   Stats strip                  →  --tan   (#C9A96E golden tan)
 *   Nav / Body / Cards           →  #FFFFFF white
 *   Module section bg            →  #FFFFFF white
 *   Module cards                 →  --tan-pale (#FBF3E2 warm cream)
 * ============================================================
 */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
    /* === BRAND COLORS === */
    --gold:          #C9A96E;   /* logo gold — badges, accents */
    --gold-light:    #DEC08A;   /* lighter gold — hover */
    --gold-dark:     #A8873F;   /* darker gold — links on white */
    --gold-pale:     #FBF5EA;   /* very light gold — TOC, author box */
    --gold-pale2:    #F5EDD8;   /* slightly deeper cream */

    /* === DARK ZONES (hero, footer, hub section) === */
    --black:         #3B2A1A;   /* warm dark brown — hero & footer bg */
    --dark:          #3B2A1A;   /* same — used as .vet-section background */
    --dark-2:        #4A3522;   /* slightly lighter brown — cards on dark bg */
    --dark-3:        #5A4230;   /* elevated panels on dark bg */
    --dark-4:        #6A5040;   /* borders on dark bg */

    /* === LIGHT ZONES (body, nav, cards) === */
    --cream:         #FFFFFF;   /* body background — pure white */
    --white:         #FFFFFF;   /* white */
    --tan-pale:      #FBF3E2;   /* warm cream — module card background */

    /* === TEXT === */
    --text-light:    #F5F0E8;   /* Light text on dark/brown bg */
    --text-muted:    #C4A882;   /* Muted text on dark/brown bg */
    --text-body:     #1A1510;   /* Body text on white bg */
    --text-heading:  #1A1510;   /* Headings on white bg */
    --text-sub:      #6B5A48;   /* Secondary text on white bg */

    /* === UI === */
    --border-dark:   #6A5040;   /* Border on dark bg */
    --border-light:  #EDE0CC;   /* Border on white bg */
    --bg-light:      #FFFFFF;   /* Light section background */
    --bg-alt:        #FBF3E2;   /* Warm cream alt bg */

    /* === Species accent colors (gold-toned) === */
    --c-dog:         #C9A96E;
    --c-cat:         #B8956A;
    --c-cattle:      #A87F45;
    --c-poultry:     #C4944A;
    --c-goats:       #9B8060;
    --c-general:     #7A9E8A;
    --c-others:      #8A7A6A;

    /* === Shadows === */
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.15);
    --shadow-md:     0 4px 20px rgba(0,0,0,0.2);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.25);
    --shadow-gold:   0 4px 20px rgba(201,169,110,0.3);

    /* === Shape === */
    --radius:        10px;
    --radius-lg:     16px;
    --radius-xl:     24px;
    --transition:    all 0.25s ease;
}

/* ============================================================
   2. GLOBAL BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', -apple-system, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    background: var(--cream);
}

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

a {
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition);
}
a:hover { color: var(--gold-light); }

/* ============================================================
   3. HEADER — WHITE background (nav bar)
   ============================================================ */

/* Force WHITE header for Hello Elementor */
.site-header,
header.site-header,
#masthead {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EDE0CC !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Fix giant logo — constrain to sensible size */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-branding img,
.site-logo img,
img.custom-logo,
.wp-site-logo img,
.e-site-logo img,
header img:not(.vet-hero__logo) {
    height: 44px !important;
    width: auto !important;
    max-width: 150px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Site title — dark on WHITE header */
.site-title,
.site-title a {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1A1510 !important;
    letter-spacing: -0.3px;
}
.site-title a:hover { color: var(--gold-dark) !important; }

/* Tagline — dark on white header */
.site-description {
    font-size: 0.72rem !important;
    color: #6B5A48 !important;
    margin-top: 1px !important;
}

/* Nav links — dark on white header */
.main-navigation a,
.nav-primary a,
.elementor-nav-menu a {
    color: #1A1510 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}
.main-navigation a:hover,
.nav-primary a:hover {
    color: var(--gold-dark) !important;
    background: var(--gold-pale) !important;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.vet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* Gold primary button */
.vet-btn-primary {
    background: var(--gold);
    color: var(--dark);
    border-color: var(--gold);
}
.vet-btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* Outline gold */
.vet-btn-outline {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
}
.vet-btn-outline:hover {
    background: var(--gold);
    color: var(--dark);
}

/* Dark button */
.vet-btn-dark {
    background: var(--dark);
    color: var(--gold);
    border-color: var(--dark-4);
}
.vet-btn-dark:hover {
    background: var(--dark-3);
    color: var(--gold-light);
}

/* Amazon */
.vet-btn-amazon {
    background: #FF9900;
    color: var(--dark);
    border-color: #FF9900;
}
.vet-btn-amazon:hover { background: #e68a00; border-color: #e68a00; color: var(--dark); }

/* Redbubble */
.vet-btn-redbubble {
    background: #E41321;
    color: #fff;
    border-color: #E41321;
}
.vet-btn-redbubble:hover { background: #c40f1c; color: #fff; }

/* Gumroad */
.vet-btn-gumroad {
    background: #36a9ae;
    color: #fff;
    border-color: #36a9ae;
}
.vet-btn-gumroad:hover { background: #2d9095; color: #fff; }

/* Download */
.vet-btn-download {
    background: var(--dark-3);
    color: var(--gold);
    border-color: var(--gold);
}
.vet-btn-download:hover { background: var(--dark-4); color: var(--gold-light); }

/* View All link */
.vet-view-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--gold);
    text-decoration: none;
}
.vet-view-all::after { content: '→'; transition: var(--transition); }
.vet-view-all:hover::after { transform: translateX(5px); }

/* ============================================================
   5. SPECIES BADGES
   ============================================================ */
.vet-species-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--dark);
    background: var(--gold);
    text-decoration: none;
    border: none;
}

/* Individual species - all gold variations */
.vet-species-dog     { background: #C9A96E; color: #0D0D0D; }
.vet-species-cat     { background: #B8956A; color: #0D0D0D; }
.vet-species-cattle  { background: #A87F45; color: #fff; }
.vet-species-poultry { background: #C4944A; color: #0D0D0D; }
.vet-species-goats   { background: #9B8060; color: #fff; }
.vet-species-general { background: #7A9E8A; color: #fff; }
.vet-species-others  { background: #8A7A6A; color: #fff; }

.vet-topic-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #FBF3E2;
    color: #6B5A48;
    border: 1px solid #EDE0CC;
}

/* ============================================================
   6. CARD COMPONENT — WHITE style (all sections)
   ============================================================ */
.vet-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid #EDE0CC;
    box-shadow: 0 2px 10px rgba(59,42,26,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    color: #1A1510;
}
.vet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 28px rgba(59,42,26,0.13);
    border-color: var(--gold);
}

.vet-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.vet-card__placeholder {
    width: 100%;
    height: 200px;
    background: #F5EFE0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
}

.vet-card__body {
    padding: 1.15rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vet-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vet-card__title {
    font-size: 0.975rem;
    font-weight: 700;
    color: #1A1510;
    line-height: 1.4;
    margin: 0;
}
.vet-card__title a { color: inherit; }
.vet-card__title a:hover { color: var(--gold-dark); }

.vet-card__meta {
    font-size: 0.78rem;
    color: #6B5A48;
}

.vet-card__excerpt {
    font-size: 0.85rem;
    color: #6B5A48;
    line-height: 1.6;
    flex: 1;
}

.vet-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 0.85rem;
    margin-top: auto;
    border-top: 1px solid #EDE0CC;
    flex-wrap: wrap;
}

/* Dark card — for use inside brown sections (hub preview etc.) */
.vet-card-dark {
    background: #4A3522;
    border-color: #6A5040;
    color: #F5F0E8;
}
.vet-card-dark .vet-card__title { color: #F5F0E8; }
.vet-card-dark .vet-card__title a:hover { color: var(--gold); }
.vet-card-dark .vet-card__meta,
.vet-card-dark .vet-card__excerpt { color: #C4A882; }
.vet-card-dark .vet-card__footer { border-color: #6A5040; }
.vet-card-dark .vet-card__placeholder { background: #5A4230; }
.vet-card-dark:hover { border-color: var(--gold); box-shadow: 0 8px 28px rgba(201,169,110,0.2); }

/* ============================================================
   7. CARDS GRID
   ============================================================ */
.vet-cards-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 1.5rem; }
.vet-cards-grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }

/* ============================================================
   8. SPECIES CARD GRID
   ============================================================ */
.vet-species-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
}

.vet-species-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.75rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-heading);
    font-weight: 700;
    font-size: 0.85rem;
    gap: 10px;
    border: 2px solid var(--border-light);
    transition: var(--transition);
    text-align: center;
    background: var(--white);
}
.vet-species-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
    color: var(--gold-dark);
}
.vet-species-card .species-emoji { font-size: 2.5rem; line-height: 1; }
.vet-species-card .species-name  { line-height: 1.2; color: var(--text-heading); font-size: 0.85rem; }

/* ============================================================
   9. SECTION WRAPPERS
   ============================================================ */
.vet-container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* vet-section = DEEP DARK BROWN (hero, hub, footer sections) */
.vet-section          { padding: 5rem 0; background: #2C1F0E; }
/* vet-section-cream = WHITE (main content sections) */
.vet-section-cream    { padding: 5rem 0; background: #FFFFFF; }
/* vet-section-alt = WARM CREAM (e-books, products alternating sections) */
.vet-section-alt      { padding: 5rem 0; background: #FBF3E2; }
/* vet-section-dark2 = slightly lighter brown (blog articles section) */
.vet-section-dark2    { padding: 5rem 0; background: #4A3522; }

.vet-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.vet-section-title {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.vet-section-title span { color: var(--gold-dark); }

/* On dark BROWN sections — white title */
.vet-section .vet-section-title,
.vet-section-dark2 .vet-section-title { color: #FFFFFF; }
.vet-section .vet-section-title span,
.vet-section-dark2 .vet-section-title span { color: var(--gold); }

/* On white / cream sections — dark title */
.vet-section-cream .vet-section-title,
.vet-section-alt .vet-section-title { color: #1A1510; }

.vet-section-sub { font-size: 0.9rem; margin-bottom: 2rem; }
/* Sub on dark bg */
.vet-section .vet-section-sub,
.vet-section-dark2 .vet-section-sub { color: #C4A882; }
/* Sub on light bg */
.vet-section-cream .vet-section-sub,
.vet-section-alt .vet-section-sub { color: #6B5A48; }

/* View all link */
.vet-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--gold-dark);
}
.vet-view-all::after { content: '→'; transition: var(--transition); }
.vet-view-all:hover::after { transform: translateX(4px); }
/* View all on dark bg */
.vet-section .vet-view-all,
.vet-section-dark2 .vet-view-all { color: var(--gold); }

/* ============================================================
   10. HERO — DEEP DARK BROWN (same as footer)
   ============================================================ */
.vet-hero {
    background: #2C1F0E;
    color: #FFFFFF;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-bottom: none;
}

/* Subtle warm glow at center top */
.vet-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.vet-hero__inner {
    position: relative;
    z-index: 1;
    padding: 5rem 0 4rem;
    text-align: center;
}

/* ===== LOGO IN HERO — fixed size ===== */
.vet-hero__logo-wrap {
    margin-bottom: 2rem;
}
.vet-hero__logo {
    height: 72px !important;
    width: auto !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    /* Do NOT filter invert — logo is already dark background compatible */
}

.vet-hero h1 {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: var(--white);
}
.vet-hero h1 span { color: var(--gold); }

.vet-hero p {
    font-size: 1.1rem;
    color: #C4A882;   /* warm muted on brown bg */
    max-width: 560px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

/* Search bar — brown bg variant */
.vet-hero__search {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 50px;
    overflow: hidden;
    border: 1.5px solid rgba(201,169,110,0.4);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.vet-hero__search input {
    flex: 1;
    padding: 14px 22px;
    border: none;
    font-size: 0.95rem;
    color: #FFFFFF;
    background: transparent;
    outline: none;
}
.vet-hero__search input::placeholder { color: #C4A882; }
.vet-hero__search button {
    padding: 14px 26px;
    background: var(--gold);
    color: #3B2A1A;
    border: none;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.vet-hero__search button:hover { background: var(--gold-light); }

/* Quick species pills in hero — brown bg */
.vet-hero__species {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}
.vet-hero__species a {
    background: rgba(255,255,255,0.1);
    color: #F5F0E8;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(201,169,110,0.35);
    text-decoration: none;
    transition: var(--transition);
}
.vet-hero__species a:hover {
    background: var(--gold);
    color: #3B2A1A;
    border-color: var(--gold);
}

/* Stats Strip — TAN/GOLD background */
.vet-stats-strip {
    background: #C9A96E;
    border-top: none;
    border-bottom: none;
    padding: 1.75rem 0;
}
.vet-stats-strip__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
.vet-stat-item__number {
    font-size: 2.25rem;
    font-weight: 900;
    color: #3B2A1A;    /* dark brown number on gold/tan strip */
    display: block;
    line-height: 1;
}
.vet-stat-item__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(59,42,26,0.72);  /* muted dark brown */
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   11. SPECIES HUB PAGE — WARM BROWN background
   ============================================================ */
.vet-hub-hero {
    padding: 4rem 0;
    color: #FFFFFF;
    text-align: center;
    background: #2C1F0E;
    border-bottom: none;
    position: relative;
}
.vet-hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.vet-hub-hero > * { position: relative; z-index: 1; }
.vet-hub-hero h1 { font-size: 2.5rem; font-weight: 900; color: #FFFFFF; margin-bottom: 0.5rem; }
.vet-hub-hero p  { font-size: 1rem; color: #C4A882; max-width: 560px; margin: 0 auto; }

/* All hub hero pages use the warm brown */
.hub-dog, .hub-cat, .hub-cattle, .hub-poultry,
.hub-goats, .hub-general, .hub-others {
    background: #2C1F0E !important;
}

.vet-hub-stats {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.vet-hub-stat {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(201,169,110,0.25);
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius);
    text-align: center;
    min-width: 90px;
}
.vet-hub-stat__n { font-size: 1.8rem; font-weight: 900; color: var(--gold); display: block; }
.vet-hub-stat__l { font-size: 0.75rem; color: #C4A882; }

/* ============================================================
   12. SINGLE BLOG ARTICLE
   ============================================================ */
.vet-article-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.vet-article__title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-heading);
    line-height: 1.25;
    margin: 0.75rem 0;
}

.vet-article__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.83rem;
    color: #888;
    margin: 0.75rem 0;
}
.vet-article__meta span::before { content: '·'; margin-right: 6px; }
.vet-article__meta span:first-child::before { content: ''; margin: 0; }

.vet-author-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--gold-pale);
    border-left: 4px solid var(--gold);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0 2rem;
}
.vet-author-box__name  { font-weight: 700; color: var(--text-heading); font-size: 0.95rem; }
.vet-author-box__creds { font-size: 0.8rem; color: #888; margin-top: 2px; }

.vet-toc {
    background: var(--gold-pale);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--gold);
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 2rem 0;
}
.vet-toc__heading { font-weight: 800; color: var(--gold-dark); margin-bottom: 0.75rem; font-size: 0.95rem; }
.vet-toc ol { margin: 0; padding-left: 1.25rem; }
.vet-toc li { margin-bottom: 0.3rem; font-size: 0.9rem; }
.vet-toc li a { color: var(--gold-dark); }

.vet-article-content { font-size: 1.05rem; line-height: 1.85; color: var(--text-body); }
.vet-article-content h2 { font-size: 1.55rem; font-weight: 800; color: var(--text-heading); margin: 2.5rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--gold-pale2); }
.vet-article-content h3 { font-size: 1.2rem; font-weight: 700; color: var(--gold-dark); margin: 2rem 0 0.75rem; }
.vet-article-content p  { margin-bottom: 1.25rem; }
.vet-article-content ul, .vet-article-content ol { margin-bottom: 1.25rem; padding-left: 1.75rem; }
.vet-article-content li { margin-bottom: 0.4rem; }
.vet-article-content blockquote { border-left: 4px solid var(--gold); margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--gold-pale); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; }
.vet-article-content img { border-radius: var(--radius); box-shadow: var(--shadow-md); margin: 1.5rem auto; }

.vet-article__featured-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; box-shadow: var(--shadow-md); }
.vet-article__featured-image img { width: 100%; height: 400px; object-fit: cover; }

/* ============================================================
   13. EBOOK PAGE
   ============================================================ */
.vet-ebook-page { padding: 3rem 0; }

.vet-ebook-hero {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: start;
    background: var(--dark-2);
    border: 1px solid var(--border-dark);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 3rem;
}

.vet-ebook-cover {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.vet-ebook-cover-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--dark-3);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.vet-ebook-info h1 { font-size: 1.85rem; font-weight: 900; color: var(--white); line-height: 1.25; margin: 0.75rem 0 0.5rem; }
.vet-ebook-by { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.25rem; }
.vet-ebook-by strong { color: var(--text-light); }

.vet-ebook-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; margin: 1.25rem 0; font-size: 0.875rem; }
.vet-ebook-detail-row { display: flex; gap: 8px; }
.vet-ebook-detail-row .label { color: var(--text-muted); }
.vet-ebook-detail-row .value { color: var(--text-light); font-weight: 600; }

.vet-ebook-price { font-size: 2.25rem; font-weight: 900; color: var(--gold); margin: 1.25rem 0; }
.vet-ebook-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.vet-ebook-toc {
    background: var(--dark-2);
    border: 1px solid var(--border-dark);
    border-left: 4px solid var(--gold);
    padding: 1.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    position: sticky;
    top: 90px;
}
.vet-ebook-toc h4 { font-weight: 800; color: var(--gold); margin-bottom: 1rem; font-size: 1rem; }
.vet-ebook-toc__chapters { font-size: 0.875rem; line-height: 1.9; color: var(--text-muted); white-space: pre-line; }

/* ============================================================
   14. DESIGN PAGE
   ============================================================ */
.vet-design-page { padding: 3rem 0; }

.vet-design-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; align-items: start; }
.vet-design-image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.vet-design-image img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.vet-product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
.vet-product-tag { padding: 5px 14px; background: var(--dark-3); border: 1px solid var(--border-dark); border-radius: 20px; font-size: 0.78rem; color: var(--text-muted); }

.vet-store-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 1.5rem; }

/* ============================================================
   15. PRODUCT PAGE
   ============================================================ */
.vet-product-page { padding: 3rem 0; }

.vet-product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; align-items: start; }
.vet-product-image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.vet-product-image img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.vet-product-info h1 { font-size: 1.8rem; font-weight: 900; color: var(--text-heading); line-height: 1.25; margin: 0.75rem 0 0.5rem; }
.vet-product-brand { color: #888; font-size: 0.9rem; margin-bottom: 0.75rem; }
.vet-product-rating { display: flex; align-items: center; gap: 8px; margin: 0.5rem 0; }
.vet-stars { font-size: 1.35rem; letter-spacing: 2px; }
.vet-stars .star.filled { color: var(--gold); }
.vet-stars .star.empty  { color: var(--dark-4); }
.vet-product-price { font-size: 1.5rem; font-weight: 800; color: var(--gold); margin: 1rem 0; padding: 0.75rem 1.25rem; background: var(--gold-pale); border-radius: var(--radius); display: inline-block; color: var(--gold-dark); }
.vet-buy-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.5rem; }
.vet-affiliate-note { font-size: 0.72rem; color: #888; margin-top: 0.75rem; font-style: italic; }

.vet-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }
.vet-pros { background: #0D1F0D; border: 1px solid #1A3D1A; border-top: 4px solid #16A34A; padding: 1.25rem 1.5rem; border-radius: var(--radius); }
.vet-cons { background: #1F0D0D; border: 1px solid #3D1A1A; border-top: 4px solid #DC2626; padding: 1.25rem 1.5rem; border-radius: var(--radius); }
.vet-pros h4 { color: #4ADE80; margin-bottom: 0.75rem; font-size: 1rem; }
.vet-cons h4 { color: #F87171; margin-bottom: 0.75rem; font-size: 1rem; }
.vet-pros ul, .vet-cons ul { margin: 0; padding-left: 1.25rem; }
.vet-pros ul li { margin-bottom: 0.4rem; font-size: 0.9rem; color: #86EFAC; }
.vet-cons ul li { margin-bottom: 0.4rem; font-size: 0.9rem; color: #FCA5A5; }

/* ============================================================
   16. ARCHIVE PAGES
   ============================================================ */
.vet-archive-header {
    background: #2C1F0E;
    color: #FFFFFF;
    padding: 3.5rem 0 2.5rem;
    margin-bottom: 3rem;
    border-bottom: none;
}
.vet-archive-title { font-size: 2.25rem; font-weight: 900; color: #FFFFFF; }
.vet-archive-title span { color: var(--gold); }
.vet-archive-desc { color: #C4A882; font-size: 1rem; margin-top: 0.5rem; }
.vet-archive-count { display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(201,169,110,0.3); padding: 4px 14px; border-radius: 20px; font-size: 0.78rem; color: var(--gold); margin-top: 0.75rem; }

.vet-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-light); }
.vet-filter-tab { padding: 7px 18px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; background: var(--bg-alt); color: var(--text-body); border: 2px solid transparent; }
.vet-filter-tab:hover, .vet-filter-tab.is-active { background: var(--gold); color: var(--dark); border-color: var(--gold); }

.vet-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 3rem; flex-wrap: wrap; }
.vet-pagination a, .vet-pagination span { padding: 8px 14px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; background: var(--white); border: 1px solid var(--border-light); color: var(--text-body); text-decoration: none; transition: var(--transition); }
.vet-pagination a:hover, .vet-pagination .current { background: var(--gold); color: var(--dark); border-color: var(--gold); }

/* ============================================================
   17. BREADCRUMBS
   ============================================================ */
.vet-breadcrumb { font-size: 0.8rem; color: #888; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vet-breadcrumb a { color: var(--gold-dark); }
.vet-breadcrumb__sep { color: var(--border-light); }

/* ============================================================
   18. RELATED CONTENT
   ============================================================ */
.vet-related { padding: 3rem 0; border-top: 1px solid var(--border-light); margin-top: 3rem; }
.vet-related__title { font-size: 1.5rem; font-weight: 800; color: var(--text-heading); margin-bottom: 1.75rem; }

/* ============================================================
   19. FOOTER — WARM BROWN (same as hero)
   ============================================================ */
.vet-footer {
    background: #2C1F0E;
    color: #C4A882;
    padding: 4rem 0 0;
    border-top: none;
}
.vet-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(201,169,110,0.18); }
.vet-footer__brand-logo { height: 42px; width: auto; max-width: 140px; margin-bottom: 1rem; display: block; filter: brightness(1.1); }
.vet-footer__tagline { font-size: 0.875rem; line-height: 1.6; color: #C4A882; }
.vet-footer h4 { color: var(--gold); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1.25rem; font-weight: 700; }
.vet-footer-links { list-style: none; padding: 0; margin: 0; }
.vet-footer-links li { margin-bottom: 0.55rem; }
.vet-footer-links li a { color: #C4A882; font-size: 0.875rem; text-decoration: none; transition: var(--transition); }
.vet-footer-links li a:hover { color: var(--gold); }
.vet-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; font-size: 0.78rem; flex-wrap: wrap; gap: 10px; color: rgba(196,168,130,0.5); }

/* ============================================================
   20. SOURCES BOX
   ============================================================ */
.vet-sources-box { background: var(--bg-alt); border: 1px solid var(--border-light); border-left: 4px solid var(--gold); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; margin-top: 2.5rem; font-size: 0.875rem; }
.vet-sources-box h4 { color: var(--gold-dark); margin-bottom: 0.5rem; }

/* ============================================================
   21. NOTICES
   ============================================================ */
.vet-notice { padding: 1rem 1.25rem; border-radius: var(--radius); font-size: 0.875rem; margin: 1rem 0; }
.vet-notice-info    { background: var(--dark-3); border-left: 4px solid var(--gold); color: var(--text-light); }
.vet-notice-success { background: #0D1F0D; border-left: 4px solid #4ADE80; color: #86EFAC; }
.vet-notice-warn    { background: #1F1200; border-left: 4px solid var(--gold); color: var(--gold-light); }

/* ============================================================
   22. RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 900px) {
    .vet-species-grid { grid-template-columns: repeat(4, 1fr); }
    .vet-cards-grid   { grid-template-columns: repeat(2, 1fr); }
    .vet-cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .vet-hero h1      { font-size: 2.25rem; }
    .vet-ebook-hero   { grid-template-columns: 180px 1fr; gap: 1.75rem; }
    .vet-design-hero, .vet-product-hero { grid-template-columns: 1fr; }
    .vet-pros-cons    { grid-template-columns: 1fr; }
    .vet-footer__grid { grid-template-columns: 1fr 1fr; }
    .vet-stats-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .vet-ebook-details { grid-template-columns: 1fr; }
}

/* ============================================================
   23. RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 480px) {
    .vet-species-grid   { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .vet-species-card   { padding: 1rem 0.5rem; }
    .vet-species-card .species-emoji { font-size: 2rem; }
    .vet-cards-grid, .vet-cards-grid-4 { grid-template-columns: 1fr; }
    .vet-hero h1        { font-size: 1.75rem; }
    .vet-hero p         { font-size: 0.95rem; }
    .vet-hero__search   { flex-direction: column; border-radius: var(--radius); }
    .vet-hero__search input, .vet-hero__search button { border-radius: var(--radius); width: 100%; }
    .vet-ebook-hero     { grid-template-columns: 1fr; }
    .vet-ebook-cover    { max-width: 180px; margin: 0 auto; }
    .vet-footer__grid   { grid-template-columns: 1fr; }
    .vet-footer__bottom { flex-direction: column; text-align: center; }
    .vet-article__title { font-size: 1.6rem; }
    .vet-hub-hero h1    { font-size: 1.8rem; }
    .vet-stats-strip__inner { grid-template-columns: repeat(2, 1fr); }
    .vet-hub-stats { gap: 0.75rem; }
    .vet-hub-stat { padding: 0.65rem 1rem; }
}

/* ============================================================
   24. UTILITY
   ============================================================ */
.vet-text-center { text-align: center; }
.vet-text-gold   { color: var(--gold); }
.vet-fw-bold     { font-weight: 700; }
.vet-mt-sm { margin-top: 0.5rem; } .vet-mt-md { margin-top: 1rem; } .vet-mt-lg { margin-top: 2rem; }
.vet-mb-sm { margin-bottom: 0.5rem; } .vet-mb-md { margin-bottom: 1rem; } .vet-mb-lg { margin-bottom: 2rem; }
.screen-reader-text { border:0; clip:rect(1px,1px,1px,1px); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }