/*
 * VIVAYASA Unified Page Design System
 * Applies consistent premium styling across ALL content pages
 * without requiring HTML changes — targets all existing card class names
 * Version: 1.0 | 2026
 */

/* ================================================
   SECTION 1: HERO PANEL (shared nl-hero)
   Used by: ALL pages
   ================================================ */

.nl-hero {
    position: relative;
    border-radius: 28px;
    padding: 44px 28px;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.22) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
    margin-bottom: 28px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.nl-hero-content { position: relative; z-index: 1; }

/* Light theme */
html[data-theme="light"] .nl-hero {
    background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,245,255,0.7) 100%);
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* Zen theme */
html[data-theme="zen"] .nl-hero {
    background: linear-gradient(145deg, rgba(220,210,190,0.15) 0%, rgba(160,145,115,0.08) 100%);
    border-color: rgba(160,145,115,0.2);
    box-shadow: 0 12px 32px rgba(100,85,65,0.15);
}

/* Section header panel (the colored sub-headers inside pages) */
.nl-hero[style*="text-align: left"],
.nl-hero[style*="padding: 20px"] {
    border-radius: 20px;
    padding: 20px 24px !important;
    margin-bottom: 16px;
}

/* ================================================
   SECTION 2: CARD LIST (shared nl-list)
   ================================================ */

.nl-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

/* ================================================
   SECTION 3: UNIVERSAL CONDITION CARD CONTAINER
   Targets ALL page-specific card classes at once
   ================================================ */

.hbp-card,
.tea-card,
.plant-card,
.spice-card,
.edema-card,
.sleep-card,
.fatigue-card,
.muscle-card,
.musculo-card,
.prostate-card,
.headache-card,
.mh-card,
.metabolic-card,
.digestive-card,
.eczema-card,
.salt-card,
.bristol-card,
.vv-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    padding: 18px;
    transition: all 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
    position: relative;
}

/* Top shine line */
.hbp-card::before,
.tea-card::before,
.plant-card::before,
.spice-card::before,
.edema-card::before,
.sleep-card::before,
.fatigue-card::before,
.muscle-card::before,
.musculo-card::before,
.prostate-card::before,
.headache-card::before,
.mh-card::before,
.metabolic-card::before,
.digestive-card::before,
.eczema-card::before,
.salt-card::before,
.bristol-card::before,
.vv-card::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}

/* Hover states */
.hbp-card:hover,
.tea-card:hover,
.plant-card:hover,
.spice-card:hover,
.edema-card:hover,
.sleep-card:hover,
.fatigue-card:hover,
.muscle-card:hover,
.musculo-card:hover,
.prostate-card:hover,
.headache-card:hover,
.mh-card:hover,
.metabolic-card:hover,
.digestive-card:hover,
.eczema-card:hover,
.salt-card:hover,
.bristol-card:hover,
.vv-card:hover {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.06) inset;
    transform: translateY(-2px);
}

/* Active (tap) feedback */
.hbp-card:active,
.tea-card:active,
.plant-card:active,
.spice-card:active,
.edema-card:active,
.sleep-card:active,
.fatigue-card:active,
.muscle-card:active,
.musculo-card:active,
.prostate-card:active,
.headache-card:active,
.mh-card:active,
.metabolic-card:active,
.digestive-card:active,
.eczema-card:active,
.salt-card:active,
.bristol-card:active,
.vv-card:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}



/* ================================================
   Light theme card overrides
   ================================================ */
html[data-theme="light"] .hbp-card,
html[data-theme="light"] .tea-card,
html[data-theme="light"] .plant-card,
html[data-theme="light"] .spice-card,
.tea-card,
.plant-card,
.spice-card,
html[data-theme="light"] .edema-card,
html[data-theme="light"] .sleep-card,
html[data-theme="light"] .fatigue-card,
html[data-theme="light"] .muscle-card,
html[data-theme="light"] .musculo-card,
html[data-theme="light"] .prostate-card,
html[data-theme="light"] .headache-card,
html[data-theme="light"] .mh-card,
html[data-theme="light"] .metabolic-card,
html[data-theme="light"] .digestive-card,
html[data-theme="light"] .eczema-card,
html[data-theme="light"] .salt-card,
html[data-theme="light"] .bristol-card,
html[data-theme="light"] .vv-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

html[data-theme="light"] .hbp-card:hover,
html[data-theme="light"] .tea-card:hover,
html[data-theme="light"] .plant-card:hover,
html[data-theme="light"] .spice-card:hover,
.tea-card:hover,
.plant-card:hover,
.spice-card:hover,
html[data-theme="light"] .edema-card:hover,
html[data-theme="light"] .sleep-card:hover,
html[data-theme="light"] .fatigue-card:hover,
html[data-theme="light"] .muscle-card:hover,
html[data-theme="light"] .musculo-card:hover,
html[data-theme="light"] .prostate-card:hover,
html[data-theme="light"] .headache-card:hover,
html[data-theme="light"] .mh-card:hover,
html[data-theme="light"] .metabolic-card:hover,
html[data-theme="light"] .digestive-card:hover,
html[data-theme="light"] .eczema-card:hover,
html[data-theme="light"] .salt-card:hover,
html[data-theme="light"] .bristol-card:hover,
html[data-theme="light"] .vv-card:hover {
    background: rgba(255,255,255,1);
    border-color: rgba(0,0,0,0.14);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ================================================
   Zen theme card overrides
   ================================================ */
html[data-theme="zen"] .hbp-card,
html[data-theme="zen"] .tea-card,
html[data-theme="zen"] .plant-card,
html[data-theme="zen"] .spice-card,
.tea-card,
.plant-card,
.spice-card,
html[data-theme="zen"] .edema-card,
html[data-theme="zen"] .sleep-card,
html[data-theme="zen"] .fatigue-card,
html[data-theme="zen"] .muscle-card,
html[data-theme="zen"] .musculo-card,
html[data-theme="zen"] .prostate-card,
html[data-theme="zen"] .headache-card,
html[data-theme="zen"] .mh-card,
html[data-theme="zen"] .metabolic-card,
html[data-theme="zen"] .digestive-card,
html[data-theme="zen"] .eczema-card,
html[data-theme="zen"] .salt-card,
html[data-theme="zen"] .bristol-card,
html[data-theme="zen"] .vv-card {
    background: rgba(140,130,110,0.06);
    border-color: rgba(140,130,110,0.15);
}

/* ================================================
   SECTION 4: ICON WRAPS (all page-specific names)
   ================================================ */

.hbp-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
.edema-icon-wrap,
.sleep-icon-wrap,
.fatigue-icon-wrap,
.muscle-icon-wrap,
.musculo-icon-wrap,
.prostate-icon-wrap,
.headache-icon-wrap,
.mh-icon-wrap,
.metabolic-icon-wrap,
.digestive-icon-wrap,
.eczema-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Hover icon bounce */
.hbp-card:hover .hbp-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
.tea-card:hover .hbp-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
.plant-card:hover .hbp-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
.spice-card:hover .hbp-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
.tea-card:hover .tea-icon-wrap,
.plant-card:hover .plant-icon-wrap,
.spice-card:hover .spice-icon-wrap,
.edema-card:hover .edema-icon-wrap,
.sleep-card:hover .sleep-icon-wrap,
.fatigue-card:hover .fatigue-icon-wrap,
.muscle-card:hover .muscle-icon-wrap,
.musculo-card:hover .musculo-icon-wrap,
.prostate-card:hover .prostate-icon-wrap,
.headache-card:hover .headache-icon-wrap,
.mh-card:hover .mh-icon-wrap,
.metabolic-card:hover .metabolic-icon-wrap,
.digestive-card:hover .digestive-icon-wrap,
.eczema-card:hover .eczema-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
    background: rgba(255,255,255,0.1);
}

html[data-theme="light"] .hbp-icon-wrap,
html[data-theme="light"] .tea-icon-wrap,
html[data-theme="light"] .plant-icon-wrap,
html[data-theme="light"] .spice-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
html[data-theme="light"] .edema-icon-wrap,
html[data-theme="light"] .sleep-icon-wrap,
html[data-theme="light"] .fatigue-icon-wrap,
html[data-theme="light"] .muscle-icon-wrap,
html[data-theme="light"] .musculo-icon-wrap,
html[data-theme="light"] .prostate-icon-wrap,
html[data-theme="light"] .headache-icon-wrap,
html[data-theme="light"] .mh-icon-wrap,
html[data-theme="light"] .metabolic-icon-wrap,
html[data-theme="light"] .digestive-icon-wrap,
html[data-theme="light"] .eczema-icon-wrap {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ================================================
   SECTION 5: TYPOGRAPHY (all page-specific names)
   ================================================ */

/* Info containers */
.hbp-info,
.tea-info,
.plant-info,
.spice-info,
.edema-info,
.sleep-info,
.fatigue-info,
.muscle-info,
.musculo-info,
.prostate-info,
.headache-info,
.mh-info,
.metabolic-info,
.digestive-info,
.eczema-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

/* Title */
.hbp-title,
.tea-title,
.plant-title,
.spice-title,
.edema-title,
.sleep-title,
.fatigue-title,
.muscle-title,
.musculo-title,
.prostate-title,
.headache-title,
.mh-title,
.metabolic-title,
.digestive-title,
.eczema-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.25;
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

html[data-theme="dark"] .hbp-title,
.tea-title,
.plant-title,
.spice-title,
html[data-theme="dark"] .edema-title,
html[data-theme="dark"] .sleep-title,
html[data-theme="dark"] .fatigue-title,
html[data-theme="dark"] .muscle-title,
html[data-theme="dark"] .musculo-title,
html[data-theme="dark"] .prostate-title,
html[data-theme="dark"] .headache-title,
html[data-theme="dark"] .mh-title,
html[data-theme="dark"] .metabolic-title,
html[data-theme="dark"] .digestive-title,
html[data-theme="dark"] .eczema-title {
    color: #f4f4f5;
}

html[data-theme="light"] .hbp-title,
html[data-theme="light"] .tea-title,
html[data-theme="light"] .plant-title,
html[data-theme="light"] .spice-title,
.tea-title,
.plant-title,
.spice-title,
html[data-theme="light"] .edema-title,
html[data-theme="light"] .sleep-title,
html[data-theme="light"] .fatigue-title,
html[data-theme="light"] .muscle-title,
html[data-theme="light"] .musculo-title,
html[data-theme="light"] .prostate-title,
html[data-theme="light"] .headache-title,
html[data-theme="light"] .mh-title,
html[data-theme="light"] .metabolic-title,
html[data-theme="light"] .digestive-title,
html[data-theme="light"] .eczema-title {
    color: #18181b;
}

html[data-theme="zen"] .hbp-title,
html[data-theme="zen"] .tea-title,
html[data-theme="zen"] .plant-title,
html[data-theme="zen"] .spice-title,
.tea-title,
.plant-title,
.spice-title,
html[data-theme="zen"] .edema-title,
html[data-theme="zen"] .sleep-title,
html[data-theme="zen"] .fatigue-title,
html[data-theme="zen"] .muscle-title,
html[data-theme="zen"] .musculo-title,
html[data-theme="zen"] .prostate-title,
html[data-theme="zen"] .headache-title,
html[data-theme="zen"] .mh-title,
html[data-theme="zen"] .metabolic-title,
html[data-theme="zen"] .digestive-title,
html[data-theme="zen"] .eczema-title {
    color: #292524;
}

/* Subtitle (italic accent line) */
.hbp-subtitle,
.tea-subtitle,
.plant-subtitle,
.spice-subtitle,
.edema-subtitle,
.sleep-subtitle,
.fatigue-subtitle,
.muscle-subtitle,
.musculo-subtitle,
.prostate-subtitle,
.headache-subtitle,
.mh-subtitle,
.metabolic-subtitle,
.digestive-subtitle,
.eczema-subtitle {
    font-size: 0.88rem;
    font-style: italic;
    border-left: 2px solid currentColor;
    padding-left: 10px;
    opacity: 0.8;
    line-height: 1.45;
    margin-bottom: 6px;
}

/* Description */
.hbp-desc,
.tea-desc,
.plant-desc,
.spice-desc,
.edema-desc,
.sleep-desc,
.fatigue-desc,
.muscle-desc,
.musculo-desc,
.prostate-desc,
.headache-desc,
.mh-desc,
.metabolic-desc,
.digestive-desc,
.eczema-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 6px;
}

html[data-theme="dark"] .hbp-desc,
.tea-desc,
.plant-desc,
.spice-desc,
html[data-theme="dark"] .edema-desc,
html[data-theme="dark"] .sleep-desc,
html[data-theme="dark"] .fatigue-desc,
html[data-theme="dark"] .muscle-desc,
html[data-theme="dark"] .musculo-desc,
html[data-theme="dark"] .prostate-desc,
html[data-theme="dark"] .headache-desc,
html[data-theme="dark"] .mh-desc,
html[data-theme="dark"] .metabolic-desc,
html[data-theme="dark"] .digestive-desc,
html[data-theme="dark"] .eczema-desc { color: #a1a1aa; }

html[data-theme="light"] .hbp-desc,
html[data-theme="light"] .tea-desc,
html[data-theme="light"] .plant-desc,
html[data-theme="light"] .spice-desc,
.tea-desc,
.plant-desc,
.spice-desc,
html[data-theme="light"] .edema-desc,
html[data-theme="light"] .sleep-desc,
html[data-theme="light"] .fatigue-desc,
html[data-theme="light"] .muscle-desc,
html[data-theme="light"] .musculo-desc,
html[data-theme="light"] .prostate-desc,
html[data-theme="light"] .headache-desc,
html[data-theme="light"] .mh-desc,
html[data-theme="light"] .metabolic-desc,
html[data-theme="light"] .digestive-desc,
html[data-theme="light"] .eczema-desc { color: #52525b; }

html[data-theme="zen"] .hbp-desc,
html[data-theme="zen"] .tea-desc,
html[data-theme="zen"] .plant-desc,
html[data-theme="zen"] .spice-desc,
.tea-desc,
.plant-desc,
.spice-desc,
html[data-theme="zen"] .edema-desc,
html[data-theme="zen"] .sleep-desc,
html[data-theme="zen"] .fatigue-desc,
html[data-theme="zen"] .muscle-desc,
html[data-theme="zen"] .musculo-desc,
html[data-theme="zen"] .prostate-desc,
html[data-theme="zen"] .headache-desc,
html[data-theme="zen"] .mh-desc,
html[data-theme="zen"] .metabolic-desc,
html[data-theme="zen"] .digestive-desc,
html[data-theme="zen"] .eczema-desc { color: #78716c; }

/* ================================================
   SECTION 6: DETAIL ROWS (all page-specific names)
   ================================================ */

.hbp-detail-row,
.tea-detail-row,
.plant-detail-row,
.spice-detail-row,
.edema-detail-row,
.sleep-detail-row,
.fatigue-detail-row,
.muscle-detail-row,
.musculo-detail-row,
.prostate-detail-row,
.headache-detail-row,
.mh-detail-row,
.metabolic-detail-row,
.digestive-detail-row,
.eczema-detail-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 10px;
    transition: background 0.2s ease;
}

html[data-theme="light"] .hbp-detail-row,
html[data-theme="light"] .tea-detail-row,
html[data-theme="light"] .plant-detail-row,
html[data-theme="light"] .spice-detail-row,
.tea-detail-row,
.plant-detail-row,
.spice-detail-row,
html[data-theme="light"] .edema-detail-row,
html[data-theme="light"] .sleep-detail-row,
html[data-theme="light"] .fatigue-detail-row,
html[data-theme="light"] .muscle-detail-row,
html[data-theme="light"] .musculo-detail-row,
html[data-theme="light"] .prostate-detail-row,
html[data-theme="light"] .headache-detail-row,
html[data-theme="light"] .mh-detail-row,
html[data-theme="light"] .metabolic-detail-row,
html[data-theme="light"] .digestive-detail-row,
html[data-theme="light"] .eczema-detail-row {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

/* Detail labels */
.hbp-detail-label,
.tea-detail-label,
.plant-detail-label,
.spice-detail-label,
.edema-detail-label,
.fatigue-detail-label,
.muscle-detail-label,
.musculo-detail-label,
.prostate-detail-label,
.headache-detail-label,
.mh-detail-label,
.metabolic-detail-label,
.digestive-detail-label,
.eczema-detail-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    margin-bottom: 2px;
}

/* Detail text */
.hbp-detail-text,
.tea-detail-text,
.plant-detail-text,
.spice-detail-text,
.edema-detail-text,
.sleep-detail-text,
.fatigue-detail-text,
.muscle-detail-text,
.musculo-detail-text,
.prostate-detail-text,
.headache-detail-text,
.mh-detail-text,
.metabolic-detail-text,
.digestive-detail-text,
.eczema-detail-text {
    font-size: 0.85rem;
    line-height: 1.45;
    flex: 1;
}

html[data-theme="dark"] .hbp-detail-text,
.tea-detail-text,
.plant-detail-text,
.spice-detail-text,
html[data-theme="dark"] .edema-detail-text,
html[data-theme="dark"] .sleep-detail-text,
html[data-theme="dark"] .fatigue-detail-text,
html[data-theme="dark"] .muscle-detail-text,
html[data-theme="dark"] .musculo-detail-text,
html[data-theme="dark"] .prostate-detail-text,
html[data-theme="dark"] .headache-detail-text,
html[data-theme="dark"] .mh-detail-text,
html[data-theme="dark"] .metabolic-detail-text,
html[data-theme="dark"] .digestive-detail-text,
html[data-theme="dark"] .eczema-detail-text { color: #d4d4d8; }

html[data-theme="light"] .hbp-detail-text,
html[data-theme="light"] .tea-detail-text,
html[data-theme="light"] .plant-detail-text,
html[data-theme="light"] .spice-detail-text,
.tea-detail-text,
.plant-detail-text,
.spice-detail-text,
html[data-theme="light"] .edema-detail-text,
html[data-theme="light"] .sleep-detail-text,
html[data-theme="light"] .fatigue-detail-text,
html[data-theme="light"] .muscle-detail-text,
html[data-theme="light"] .musculo-detail-text,
html[data-theme="light"] .prostate-detail-text,
html[data-theme="light"] .headache-detail-text,
html[data-theme="light"] .mh-detail-text,
html[data-theme="light"] .metabolic-detail-text,
html[data-theme="light"] .digestive-detail-text,
html[data-theme="light"] .eczema-detail-text { color: #3f3f46; }

/* ================================================
   SECTION 7: BADGE PILLS (effectiveness levels)
   ================================================ */

.sleep-badge,
.edema-badge,
.fatigue-badge,
.hbp-badge,
.tea-badge,
.plant-badge,
.spice-badge,
.metabolic-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 99px;
    flex-shrink: 0;
}

.sleep-badge.high,
.edema-badge.high,
.fatigue-badge.high,
.hbp-badge.high { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }

.sleep-badge.medium,
.edema-badge.medium,
.fatigue-badge.medium,
.hbp-badge.medium { background: rgba(250,204,21,0.1); color: #facc15; border: 1px solid rgba(250,204,21,0.2); }

.sleep-badge.low,
.edema-badge.low,
.fatigue-badge.low,
.hbp-badge.low { background: rgba(248,113,113,0.1); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }

/* ================================================
   SECTION 8: NL-CARD HUB PAGE IMPROVEMENTS
   (exercises, flora-crystals, wellness-insights, life-balance)
   ================================================ */

.nl-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.nl-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(to right, transparent, var(--tc, rgba(201,168,76,0.35)), transparent);
    pointer-events: none;
}

.nl-card:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.06);
    transition-duration: 0.1s;
}

.nl-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.06) inset;
    background: rgba(255,255,255,0.05);
}

/* Light theme nl-card */
html[data-theme="light"] .nl-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="light"] .nl-card:hover {
    background: rgba(255,255,255,1);
    border-color: rgba(0,0,0,0.14);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
html[data-theme="light"] .nl-card:active { background: rgba(0,0,0,0.03); }

/* Zen theme nl-card */
html[data-theme="zen"] .nl-card {
    background: rgba(140,130,110,0.05);
    border-color: rgba(140,130,110,0.15);
}
html[data-theme="zen"] .nl-card:hover {
    border-color: rgba(140,130,110,0.28);
    box-shadow: 0 8px 24px rgba(100,85,65,0.12);
}

.nl-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.nl-card-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--tb, rgba(201,168,76,0.1));
    border: 1px solid var(--tc, rgba(201,168,76,0.22));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px var(--ts, rgba(201,168,76,0.12));
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.nl-card:hover .nl-card-icon-wrap {
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 6px 20px var(--ts, rgba(201,168,76,0.25));
}

.nl-card-icon {
    width: 26px;
    height: 26px;
    color: var(--tc, #e8c97a);
    stroke-width: 1.6px;
}

.nl-card-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.nl-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.25;
}

html[data-theme="dark"] .nl-card-title { color: #f4f4f5; }
html[data-theme="light"] .nl-card-title { color: #18181b; }
html[data-theme="zen"] .nl-card-title { color: #292524; }

.nl-card-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html[data-theme="dark"] .nl-card-desc { color: #a1a1aa; }
html[data-theme="light"] .nl-card-desc { color: #71717a; }
html[data-theme="zen"] .nl-card-desc { color: #78716c; }

.nl-card-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.2s ease;
    opacity: 0.4;
}

.nl-card:hover .nl-card-chevron {
    transform: translateX(4px);
    opacity: 0.8;
}

html[data-theme="dark"] .nl-card-chevron { color: #71717a; }
html[data-theme="light"] .nl-card-chevron { color: #a1a1aa; }
html[data-theme="zen"] .nl-card-chevron { color: #a8a29e; }

/* Color themes for hub pages */
.t-gold  { --tc: rgba(201,168,76,0.9);  --tb: rgba(201,168,76,0.1);  --ts: rgba(201,168,76,0.15); }
.t-green { --tc: #34d399;  --tb: rgba(52,211,153,0.1);  --ts: rgba(52,211,153,0.14); }
.t-sky   { --tc: #38bdf8;  --tb: rgba(56,189,248,0.1);  --ts: rgba(56,189,248,0.14); }
.t-purple{ --tc: #c084fc;  --tb: rgba(192,132,252,0.1); --ts: rgba(192,132,252,0.14); }
.t-orange{ --tc: #fb923c;  --tb: rgba(251,146,60,0.1);  --ts: rgba(251,146,60,0.14); }
.t-rose  { --tc: #fb7185;  --tb: rgba(251,113,133,0.1); --ts: rgba(251,113,133,0.14); }
.t-teal  { --tc: #2dd4bf;  --tb: rgba(45,212,191,0.1);  --ts: rgba(45,212,191,0.14); }
.t-cyan  { --tc: #22d3ee;  --tb: rgba(34,211,238,0.1);  --ts: rgba(34,211,238,0.14); }
.t-amber { --tc: #f59e0b;  --tb: rgba(245,158,11,0.1);  --ts: rgba(245,158,11,0.14); }

/* ================================================
   SECTION 9: STAGGER ANIMATION ON PAGE LOAD
   ================================================ */

@keyframes vv-fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nl-list > *,
.nl-card {
    animation: vv-fade-in-up 0.45s ease both;
}

.nl-list > *:nth-child(1),  .nl-card:nth-child(1)  { animation-delay: 0.05s; }
.nl-list > *:nth-child(2),  .nl-card:nth-child(2)  { animation-delay: 0.10s; }
.nl-list > *:nth-child(3),  .nl-card:nth-child(3)  { animation-delay: 0.14s; }
.nl-list > *:nth-child(4),  .nl-card:nth-child(4)  { animation-delay: 0.18s; }
.nl-list > *:nth-child(5),  .nl-card:nth-child(5)  { animation-delay: 0.21s; }
.nl-list > *:nth-child(6),  .nl-card:nth-child(6)  { animation-delay: 0.24s; }
.nl-list > *:nth-child(7),  .nl-card:nth-child(7)  { animation-delay: 0.26s; }
.nl-list > *:nth-child(8),  .nl-card:nth-child(8)  { animation-delay: 0.28s; }
.nl-list > *:nth-child(9),  .nl-card:nth-child(9)  { animation-delay: 0.30s; }
.nl-list > *:nth-child(10), .nl-card:nth-child(10) { animation-delay: 0.32s; }
.nl-list > *:nth-child(11), .nl-card:nth-child(11) { animation-delay: 0.33s; }
.nl-list > *:nth-child(12), .nl-card:nth-child(12) { animation-delay: 0.34s; }

/* Hero also fades in */
.nl-hero {
    animation: vv-fade-in-up 0.4s ease both;
}

/* ================================================
   SECTION 10: BENEFITS BOX (used in fatigue, muscle, prostate pages)
   ================================================ */

.fatigue-benefits-box,
.muscle-benefits-box,
.prostate-benefits-box,
.headache-benefits-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

html[data-theme="light"] .fatigue-benefits-box,
html[data-theme="light"] .muscle-benefits-box,
html[data-theme="light"] .prostate-benefits-box,
html[data-theme="light"] .headache-benefits-box {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

/* ================================================
   SECTION 11: SALT / BRISTOL SPECIFIC CARDS
   (white-crystals.php, bristol-stool-scale.php)
   ================================================ */

/* Salt card image */
.salt-card img,
.bristol-card img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

html[data-theme="light"] .salt-card img,
html[data-theme="light"] .bristol-card img {
    border-color: rgba(0,0,0,0.08);
}

/* ================================================
   SECTION 12: RESPONSIVE TWEAKS
   ================================================ */

@media (max-width: 480px) {
    .nl-hero { padding: 32px 20px; border-radius: 20px; }
    
    .hbp-icon-wrap,
.tea-icon-wrap,
.plant-icon-wrap,
.spice-icon-wrap,
    .edema-icon-wrap,
    .sleep-icon-wrap,
    .fatigue-icon-wrap,
    .muscle-icon-wrap,
    .musculo-icon-wrap,
    .prostate-icon-wrap,
    .headache-icon-wrap,
    .mh-icon-wrap,
    .metabolic-icon-wrap,
    .digestive-icon-wrap,
    .eczema-icon-wrap {
        width: 60px;
        height: 60px;
        font-size: 1.9rem;
    }
    
    .nl-card-icon-wrap {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }
    
    .nl-card-icon { width: 22px; height: 22px; }
}

/* ================================================
   SECTION 13: ACCESSIBILITY & REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .nl-list > *,
    .nl-card,
    .nl-hero {
        animation: none !important;
    }
    
    .nl-card:hover,
    .hbp-card:hover,
.tea-card:hover,
.plant-card:hover,
.spice-card:hover,
    .edema-card:hover,
    .sleep-card:hover,
    .fatigue-card:hover,
    .muscle-card:hover,
    .musculo-card:hover,
    .prostate-card:hover,
    .headache-card:hover,
    .mh-card:hover,
    .metabolic-card:hover,
    .digestive-card:hover,
    .eczema-card:hover {
        transform: none !important;
    }
}

/* ================================================
   SECTION 14: BACK NAVIGATION BAR
   A subtle back-to-hub bar at top of content pages
   ================================================ */

.vv-back-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    animation: vv-fade-in-up 0.35s ease both;
}

.vv-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 99px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}

.vv-back-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.9);
    transform: translateX(-2px);
}

.vv-back-btn:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

.vv-back-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.vv-back-btn:hover svg {
    transform: translateX(-2px);
}

.vv-back-category {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 99px;
    opacity: 0.5;
}

html[data-theme="light"] .vv-back-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: #52525b;
}
html[data-theme="light"] .vv-back-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #18181b;
}
html[data-theme="zen"] .vv-back-btn {
    background: rgba(140,130,110,0.07);
    border-color: rgba(140,130,110,0.15);
    color: #78716c;
}
html[data-theme="zen"] .vv-back-btn:hover {
    background: rgba(140,130,110,0.14);
    color: #44403c;
}

/* ================================================
   SECTION 15: SECTION HEADER DIVIDER
   Replaces the hacky nl-hero used as section dividers
   ================================================ */

.vv-section-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px;
    border-radius: 18px;
    border-left: 3px solid var(--vv-accent, rgba(201,168,76,0.8));
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 16px;
    margin-top: 8px;
    animation: vv-fade-in-up 0.4s ease both;
}

.vv-section-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.25;
}

.vv-section-header p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.65;
}

html[data-theme="dark"]  .vv-section-header { background: rgba(255,255,255,0.025); }
html[data-theme="light"] .vv-section-header { background: rgba(0,0,0,0.025); border-color-left: rgba(0,0,0,0.3); }
html[data-theme="zen"]   .vv-section-header { background: rgba(140,130,110,0.07); }

/* ================================================
   SECTION 16: TAG PILLS
   For category/property labels on cards
   ================================================ */

.vv-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.vv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.vv-tag:hover { opacity: 1; }

.vv-tag-green  { color: #34d399; background: rgba(52,211,153,0.08); }
.vv-tag-gold   { color: #e8c97a; background: rgba(201,168,76,0.08); }
.vv-tag-sky    { color: #38bdf8; background: rgba(56,189,248,0.08); }
.vv-tag-rose   { color: #fb7185; background: rgba(251,113,133,0.08); }
.vv-tag-purple { color: #c084fc; background: rgba(192,132,252,0.08); }
.vv-tag-orange { color: #fb923c; background: rgba(251,146,60,0.08); }
.vv-tag-teal   { color: #2dd4bf; background: rgba(45,212,191,0.08); }

/* ================================================
   SECTION 17: TIP BOX
   Callout boxes for important notes / warnings
   ================================================ */

.vv-tip-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.18);
    margin: 16px 0;
    animation: vv-fade-in-up 0.5s ease both;
}

.vv-tip-box-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}

.vv-tip-box-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.vv-tip-box-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e8c97a;
    margin: 0;
}

.vv-tip-box-text {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

html[data-theme="dark"]  .vv-tip-box-text { color: #a1a1aa; }
html[data-theme="light"] .vv-tip-box-text { color: #52525b; }
html[data-theme="zen"]   .vv-tip-box-text { color: #78716c; }

.vv-tip-box.info   { background: rgba(56,189,248,0.06);  border-color: rgba(56,189,248,0.2); }
.vv-tip-box.info .vv-tip-box-title { color: #38bdf8; }
.vv-tip-box.success{ background: rgba(52,211,153,0.06);  border-color: rgba(52,211,153,0.2); }
.vv-tip-box.success .vv-tip-box-title { color: #34d399; }
.vv-tip-box.warning{ background: rgba(251,146,60,0.06);  border-color: rgba(251,146,60,0.2); }
.vv-tip-box.warning .vv-tip-box-title { color: #fb923c; }
.vv-tip-box.danger { background: rgba(251,113,133,0.06); border-color: rgba(251,113,133,0.2); }
.vv-tip-box.danger .vv-tip-box-title { color: #fb7185; }

/* ================================================
   SECTION 18: STAT ROW
   Key metric highlight strips
   ================================================ */

.vv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin: 16px 0 24px;
    animation: vv-fade-in-up 0.4s 0.08s ease both;
}

.vv-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    transition: transform 0.25s ease;
}

.vv-stat:hover { transform: translateY(-2px); }

.vv-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.vv-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
}

html[data-theme="light"] .vv-stat { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.07); }
html[data-theme="zen"]   .vv-stat { background: rgba(140,130,110,0.06); border-color: rgba(140,130,110,0.14); }

/* ================================================
   SECTION 19: INTRO IMAGE CARDS (Mobile Stacking Fix)
   Forces cards with !flex-col to stack vertically on mobile
   ================================================ */

@media (max-width: 768px) {
    .hbp-card.\!flex-col,
    .tea-card.\!flex-col,
    .plant-card.\!flex-col,
    .spice-card.\!flex-col,
    .edema-card.\!flex-col,
    .sleep-card.\!flex-col,
    .fatigue-card.\!flex-col,
    .muscle-card.\!flex-col,
    .musculo-card.\!flex-col,
    .prostate-card.\!flex-col,
    .headache-card.\!flex-col,
    .mh-card.\!flex-col,
    .metabolic-card.\!flex-col,
    .digestive-card.\!flex-col,
    .eczema-card.\!flex-col,
    .salt-card.\!flex-col,
    .bristol-card.\!flex-col,
    .vv-card.\!flex-col {
        flex-direction: column !important;
    }
}