/* ============================================
   COMPONENTES ESPECÍFICOS DAS PÁGINAS
   ============================================ */

/* ===== HEADER V2 — FLOATING + BLUR ON SCROLL ===== */

/* Page wrapper: gives positioning context for .page__botanical */
.page {
    position: relative;
    isolation: isolate;
}

/* Lift all direct children above the botanical layer */
.page > :not(.page__botanical) {
    position: relative;
    z-index: 1;
}

/* Botanical photo layer: covers header + hero as a single visual piece */
.page__botanical {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 880px;
    max-height: 100vh;
    background: url("/assets/hero-botanical.jpg") center right / cover;
    opacity: 0.42;
    mix-blend-mode: multiply;
    mask-image: linear-gradient(to left, #000 0%, #000 35%, transparent 95%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 35%, transparent 95%);
    pointer-events: none;
    z-index: 0;
}

/* Inner layout row */
.hdr__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(0.9rem, 3.8vw, 2rem);
    min-height: 56px;
}

/* Logo */
.hdr__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.hdr__logo:hover {
    opacity: 0.88;
}

.hdr__logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    transition: width .28s ease, height .28s ease;
}

.nav.is-scrolled .hdr__logo img {
    width: 42px;
    height: 42px;
}

/* Wordmark */
.hdr__wordmark {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    transition: font-size .28s ease;
}

.hdr__name {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--brand-ink);
    transition: font-size .28s ease;
}

.nav.is-scrolled .hdr__name {
    font-size: 1.45rem;
}

.hdr__sub {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-olive);
    font-weight: 700;
    line-height: 1;
    transition: opacity .28s ease;
}

/* Desktop nav links */
.hdr__nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    justify-content: center;
}

.hdr__nav a,
.hdr__nav li a {
    display: inline-flex;
    align-items: center;
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--brand-ink);
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
    white-space: nowrap;
}

.hdr__nav a:hover,
.hdr__nav li a:hover {
    color: var(--brand-ink);
    background: rgba(253, 238, 224, 0.72);
    border-color: var(--line-botanical);
}

.hdr__nav a.active,
.hdr__nav li a.active {
    color: var(--brand-terracotta);
}

/* Actions group */
.hdr__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

/* CTA button override */
.hdr__cta.btn {
    white-space: nowrap;
}

/* Icon button (search, comparator) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-botanical);
    background: rgba(255, 250, 242, 0.7);
    color: var(--brand-ink);
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: rgba(253, 238, 224, 0.9);
    border-color: rgba(107, 142, 78, 0.38);
    transform: translateY(-1px);
}

/* Comparator icon badge (terracota number overlay) */
.icon-btn.comparison-badge::after,
.comparison-badge.icon-btn::after {
    content: attr(data-count);
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--brand-terracotta);
    color: #fffaf2;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Hide badge when count is 0 */
.icon-btn.comparison-badge[data-count="0"]::after,
.comparison-badge.icon-btn[data-count="0"]::after {
    display: none;
}

/* Desktop-only elements hide on mobile */
.desktop-only {
    display: inline-flex;
}

/* Mobile-only elements show only in drawer (≤820px) */
.mobile-only {
    display: none;
}

/* ===== PAGE BOTANICAL — RESPONSIVE ===== */
@media (max-width: 820px) {
    .page__botanical {
        display: none;
    }
}

/* ===== HEADER RESPONSIVE ===== */
@media (max-width: 1180px) {
    .hdr__nav a,
    .hdr__nav li a {
        font-size: 0.9rem;
        padding: 0.5rem 0.6rem;
    }

    .hdr__sub {
        display: none;
    }

    .hdr__logo img {
        width: 44px;
        height: 44px;
    }

    .hdr__name {
        font-size: 1.55rem;
    }
}

@media (max-width: 1000px) {
    .hdr__actions .desktop-only {
        display: none;
    }

    .hdr__nav a,
    .hdr__nav li a {
        padding: 0.5rem 0.5rem;
    }
}

@media (max-width: 820px) {
    /* ═══════════════════════════════════════════════════════
       MOBILE MENU — IDENTIDADE PENSATIVA
       Fundo escuro #0A1F14 · texto #F7F2E8 · z-index alto
       ═══════════════════════════════════════════════════════ */

    /*
     * HOTFIX STACKING CONTEXT
     * .page { isolation: isolate } cria um stacking context isolado.
     * O .nav-overlay é inserido dentro do .page pelo JS (não no body),
     * então tudo se compara no mesmo contexto. O .nav precisa de z-index
     * maior que o overlay (99990) para ficar na frente.
     */
    .nav {
        z-index: 100010 !important;
    }

    /* Show hamburger at 820px (extends main.css's 768px default) */
    .hdr__actions .nav-toggle {
        display: grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1.5px solid rgba(44, 51, 38, 0.18);
        background: rgba(255, 255, 255, 0.7);
        color: var(--brand-ink);
        font-size: 1.1rem;
        cursor: pointer;
        z-index: 1; /* dentro do contexto do .nav (100010) */
    }

    /* ─── DRAWER MOBILE: FUNDO SÓLIDO ESCURO ─── */
    .hdr__nav.nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        /* Padding top acomoda a altura do header */
        padding: calc(var(--nav-height, 74px) + 1.25rem) 1.25rem 2rem;
        /* Fundo sólido escuro — identidade Pensativa */
        background: #0A1F14;
        /* Sem backdrop-filter: evita criar stacking context extra e
           garante que o fundo seja 100% opaco em todos os browsers */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        min-height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.7);
        margin: 0;
        /* z-index dentro do contexto do .nav (que está em 100010) */
        z-index: 1;
        /* Estado inicial: oculto */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, visibility 0s linear 0.22s;
        list-style: none;
    }

    /* Linha decorativa sutil no topo do drawer */
    .hdr__nav.nav-links::before {
        content: '';
        position: absolute;
        top: var(--nav-height, 74px);
        left: 1.25rem;
        right: 1.25rem;
        height: 1px;
        background: rgba(247, 242, 232, 0.12);
        pointer-events: none;
    }

    /* Estado ABERTO */
    .hdr__nav.nav-links.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .hdr__nav.nav-links li {
        width: 100%;
        text-align: center;
    }

    /* Links: grandes, centralizados, cor clara */
    .hdr__nav.nav-links a,
    .hdr__nav.nav-links li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 60px;
        padding: 0.9rem 1rem;
        border-radius: 12px;
        border: none;
        background: transparent;
        color: #F7F2E8;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
        /* Garantir que cliques funcionem */
        pointer-events: auto;
        cursor: pointer;
    }

    .hdr__nav.nav-links a:hover,
    .hdr__nav.nav-links li a:hover,
    .hdr__nav.nav-links a:active,
    .hdr__nav.nav-links li a:active {
        background: rgba(247, 242, 232, 0.10);
        color: #F7F2E8;
        border-color: transparent;
    }

    .hdr__nav.nav-links a.active,
    .hdr__nav.nav-links li a.active {
        color: var(--brand-apricot, #f5a962);
    }

    /* Botão fechar */
    .nav-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 0 0.5rem auto;
        border: 1px solid rgba(247, 242, 232, 0.30);
        border-radius: 999px;
        background: transparent;
        color: #F7F2E8;
        font-size: 1.4rem;
        cursor: pointer;
        pointer-events: auto;
        transition: background 0.15s ease;
    }

    .nav-close:hover {
        background: rgba(247, 242, 232, 0.10);
    }

    .hdr__cta.btn {
        height: 40px;
        min-height: 40px;
        padding: 0 1rem;
        font-size: 0.88rem;
        width: auto;
    }

    .desktop-only {
        display: none !important;
    }

    /* Itens mobile-only visíveis no drawer */
    .mobile-only {
        display: list-item;
    }

    /* ─── BACKDROP OVERLAY ─── */
    /* O overlay é inserido dentro de .page pelo JS (hotfix do stacking context).
       position: fixed relativo ao viewport é mantido porque .page não tem
       transform/filter — apenas isolation: isolate, que não muda o containing block. */
    .nav-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 31, 20, 0.72);
        /* z-index dentro do contexto de .page, abaixo do .nav (100010) */
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        border: none;
        cursor: default;
        -webkit-tap-highlight-color: transparent;
    }

    body.menu-open .nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Bloquear scroll do body quando menu mobile estiver aberto */
    body.menu-open {
        overflow: hidden;
    }
}

/* ===== ASSOCIATIONS PAGE ===== */
#associations-list {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.filters-bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.7rem 1.5rem;
    background: white;
    border: 2px solid var(--cream);
    border-radius: var(--radius-soft);
    cursor: pointer;
    font-weight: 600;
    color: var(--dark-text);
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--burnt-orange);
    color: var(--burnt-orange);
}

.filter-btn.active {
    background: var(--burnt-orange);
    color: white;
    border-color: var(--burnt-orange);
}

.association-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 320px;
}

.association-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.association-price {
    font-size: 1.2rem;
    color: var(--burnt-orange);
    font-weight: 700;
}

.association-fee {
    font-size: 0.95rem;
    color: var(--soft-gray);
}

.association-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: var(--space-sm) 0;
}

.community-note {
    padding: var(--space-sm);
    background: rgba(245, 169, 98, 0.1);
    border-radius: var(--space-sm);
    border-left: 3px solid var(--tangerine);
    font-size: 0.9rem;
}

.association-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: auto;
}

.association-actions .btn {
    flex: 1;
}

/* ===== ASSOCIATION DETAIL PAGE ===== */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.detail-grid {
    display: grid;
    gap: var(--space-md);
}

.detail-section {
    background: white;
    padding: var(--space-md);
    border-radius: var(--radius-soft);
    border-left: 4px solid var(--burnt-orange);
}

.detail-section h3 {
    color: var(--burnt-orange);
    margin-bottom: var(--space-sm);
    font-size: 1.3rem;
}

.community-section {
    border-left-color: var(--tangerine);
    background: rgba(245, 169, 98, 0.05);
}

.disclaimer {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.85rem;
    color: var(--soft-gray);
    font-style: italic;
}

.product-item {
    padding: var(--space-sm);
    background: var(--cream);
    border-radius: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.product-item:last-child {
    margin-bottom: 0;
}

/* ===== COMPARISON PAGE ===== */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.comparison-card {
    position: relative;
    padding: var(--space-md);
}

.btn-remove {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: rgba(217, 115, 66, 0.1);
    border: none;
    color: var(--burnt-orange);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-remove:hover {
    background: var(--burnt-orange);
    color: white;
}

.comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--cream);
}

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

.comparison-row strong {
    color: var(--dark-text);
    font-size: 0.9rem;
}

.comparison-row span {
    text-align: right;
}

.empty-state {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}

.empty-state p {
    font-size: 1.2rem;
    color: var(--soft-gray);
    margin-bottom: var(--space-md);
}

/* ===== DISCOVER PAGE (Wizard) ===== */
.wizard-container {
    max-width: 800px;
    margin: 0 auto;
}

.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.progress-step {
    flex: 1;
    height: 4px;
    background: var(--cream);
    margin: 0 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.progress-step.active {
    background: var(--burnt-orange);
}

.discover-step {
    background: white;
    padding: var(--space-lg);
    border-radius: var(--radius-soft);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.discover-step h2 {
    margin-bottom: var(--space-md);
    color: var(--burnt-orange);
}

.option-grid {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.option-card {
    padding: var(--space-md);
    background: var(--cream);
    border: 2px solid transparent;
    border-radius: var(--radius-soft);
    cursor: pointer;
    transition: all 0.3s ease;
}

.option-card:hover {
    border-color: var(--burnt-orange);
    background: white;
}

.option-card.selected {
    border-color: var(--burnt-orange);
    background: rgba(217, 115, 66, 0.1);
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.wizard-actions .btn {
    flex: 1;
}

.discover-results {
    margin-top: var(--space-lg);
}

.result-card {
    margin-bottom: var(--space-md);
}

/* ===== GUIDE PAGE ===== */
.guide-category {
    margin-bottom: var(--space-xl);
}

.guide-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.guide-card:hover {
    transform: translateY(-6px);
}

.guide-card h3 {
    color: var(--burnt-orange);
    margin-bottom: var(--space-sm);
}

.guide-card p {
    color: var(--soft-gray);
    margin-bottom: var(--space-sm);
}

.btn-read-more {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 51, 38, 0.8);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: white;
    border-radius: var(--radius-soft);
    padding: var(--space-lg);
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--cream);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--dark-text);
}

.modal-close:hover {
    background: var(--burnt-orange);
    color: white;
}

.modal-body {
    margin-top: var(--space-md);
    line-height: 1.8;
}

.modal-body h3 {
    color: var(--burnt-orange);
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.modal-body ul {
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
}

.modal-body li {
    margin-bottom: 0.5rem;
}

.modal-body p {
    margin-bottom: var(--space-sm);
}

.modal-body strong {
    color: var(--dark-text);
}

/* ===== CHAT / ASSISTANT ===== */
.chat-container {
    background: white;
    border-radius: var(--radius-soft);
    padding: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.chat-messages {
    height: 400px;
    overflow-y: auto;
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--warm-white);
    border-radius: var(--space-sm);
}

.chat-message {
    margin-bottom: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    animation: messageIn 0.3s ease;
}

@keyframes messageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--burnt-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.chat-message.user .chat-avatar {
    background: var(--leaf-green);
}

.chat-bubble {
    background: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: 20px 20px 20px 4px;
    max-width: 70%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chat-message.user .chat-bubble {
    background: var(--burnt-orange);
    color: white;
    border-radius: 20px 20px 4px 20px;
}

.chat-input-container {
    display: flex;
    gap: var(--space-sm);
}

.chat-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--cream);
    border-radius: var(--radius-soft);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--burnt-orange);
}

.chat-send {
    padding: var(--space-sm) var(--space-md);
    background: var(--burnt-orange);
    color: white;
    border: none;
    border-radius: var(--radius-soft);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.chat-send:hover {
    background: var(--brand-terracotta-dark);
}

.chat-suggestions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.chat-suggestion {
    padding: 0.5rem 1rem;
    background: var(--cream);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.chat-suggestion:hover {
    background: var(--burnt-orange);
    color: white;
}

/* ===== NOTIFICATION ===== */
.notification {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    background: var(--leaf-green);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-soft);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: slideInRight 0.3s ease, slideOutRight 0.3s ease 1.7s;
    z-index: 10000;
}

@keyframes slideInRight {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(400px); opacity: 0; }
}

/* ===== COMPARISON BADGE ===== */
.comparison-badge {
    position: relative;
}

.comparison-badge::after {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--burnt-orange);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* ===== AJUSTES RESPONSIVOS ===== */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .wizard-actions {
        flex-direction: column;
    }
    
    .chat-bubble {
        max-width: 85%;
    }
    
    .detail-header {
        flex-direction: column;
    }
    
    .association-actions {
        flex-direction: column;
    }
    
    .filters-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-sm);
    }
    
    .filter-btn {
        white-space: nowrap;
    }
}

/* ===== ASSOCIATION LIST: ALTERNATING ROWS ===== */
#associations-list .association-card:nth-child(odd) {
    background: rgba(255, 250, 242, 0.98);
}

#associations-list .association-card:nth-child(even) {
    background: rgba(253, 238, 224, 0.72);
}

.chat-message.assistant .chat-bubble {
    background: var(--cream);
}

.chat-message.user .chat-bubble {
    background: rgba(107, 142, 78, 0.18);
}

/* ===== MEDICAL NETWORK SECTION ===== */
.medical-network-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.medical-card {
    background: #fff;
    padding: var(--space-md);
    border: 3px solid var(--dark-text);
    box-shadow: 8px 8px 0 var(--dark-text);
}

.medical-badge {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    background: var(--leaf-green);
    color: white;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

.medical-card h3 {
    color: var(--burnt-orange);
    margin-bottom: var(--space-sm);
}

.medical-coupon {
    margin: var(--space-sm) 0 var(--space-md);
    padding: 0.75rem;
    background: rgba(245, 169, 98, 0.2);
    border: 2px dashed var(--burnt-orange);
    font-weight: 600;
}

/* ===== MOBILE UX UPGRADE ===== */
.mobile-catalog-intro {
    margin-bottom: .85rem;
    background: linear-gradient(145deg, rgba(245, 237, 215, 0.76), #fff);
}

.filters-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .3rem;
    margin-bottom: 1rem;
    scrollbar-width: thin;
}

.filter-btn {
    white-space: nowrap;
    min-height: 44px;
    border-radius: 999px;
    border-color: rgba(107, 142, 78, 0.3);
    padding: .62rem 1rem;
}

#associations-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .95rem;
}

.association-card {
    min-height: 0;
    gap: .75rem;
}

.association-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.association-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: .28rem .68rem;
    border-radius: 999px;
    background: rgba(245, 237, 215, 0.9);
    border: 1px solid rgba(107, 142, 78, 0.25);
    font-size: .82rem;
}

.association-kpis {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.association-kpi {
    border: 1px solid rgba(107, 142, 78, 0.22);
    border-radius: 14px;
    padding: .58rem;
    background: rgba(255, 255, 255, 0.7);
}

.association-kpi strong {
    display: block;
    font-size: .76rem;
    opacity: .7;
    margin-bottom: .2rem;
}

.association-actions {
    gap: .55rem;
}

.association-actions .btn {
    min-height: 44px;
}

.mobile-compare-cta {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    background: var(--dark-text);
    color: #fff;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    box-shadow: 0 10px 24px rgba(44, 51, 38, 0.3);
}

.mobile-compare-cta .comparison-badge::after {
    position: static;
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: .16rem .45rem;
    margin-left: .35rem;
}

.association-skeleton {
    min-height: 340px;
    background: linear-gradient(110deg, rgba(245, 237, 215, 0.45) 8%, rgba(255,255,255,.9) 18%, rgba(245, 237, 215, 0.45) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.25s linear infinite;
}

#associations-list {
    min-height: 760px;
    align-content: start;
}

.association-card {
    min-height: 340px;
}

.strain-shell-skeleton {
    min-height: 920px;
}

#strains-content {
    min-height: 920px;
}

.strain-loading-grid {
    margin-top: 1rem;
}

.strain-loading-card {
    min-height: 270px;
    background: linear-gradient(110deg, rgba(245, 237, 215, 0.45) 8%, rgba(255,255,255,.9) 18%, rgba(245, 237, 215, 0.45) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.25s linear infinite;
}

.strain-loading-line,
.strain-loading-block {
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(245, 237, 215, 0.45) 8%, rgba(255,255,255,.9) 18%, rgba(245, 237, 215, 0.45) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.25s linear infinite;
}

.strain-loading-line {
    height: 16px;
    margin-bottom: .75rem;
}

.strain-loading-line.w-60 { width: 60%; }
.strain-loading-line.w-40 { width: 40%; }
.strain-loading-line.w-30 { width: 30%; }

.strain-loading-block {
    min-height: 320px;
    margin-top: 1rem;
}

@keyframes shimmer { to { background-position-x: -200%; } }

/* strain detail mobile-first */
.strain-detail {
    display: grid;
    gap: .9rem;
}

.strain-hero {
    display: grid;
    gap: .8rem;
}

.strain-hero-media {
    border-radius: 20px;
    overflow: hidden;
    background: #e9dfcd;
    aspect-ratio: 4 / 3;
}

.strain-hero-carousel {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    max-height: 430px;
}

.strain-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.strain-hero-media .detail-fallback {
    display: none;
    z-index: 1;
}
.strain-hero-media.has-image-error .detail-fallback {
    display: flex;
}
.strain-hero-media.has-image-error img {
    display: none;
}

.strain-carousel-counter {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 2;
    background: rgba(0,0,0,.55);
    color: #fff;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .82rem;
}

.strain-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
}

.strain-carousel-arrow.prev { left: .55rem; }
.strain-carousel-arrow.next { right: .55rem; }

.strain-hero-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: .45rem;
}

.strain-gallery-thumb {
    border: 1px solid rgba(44, 51, 38, 0.14);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    min-height: 68px;
}

.strain-gallery-thumb img {
    width: 100%;
    height: 100%;
    min-height: 68px;
    object-fit: cover;
    display: block;
}

.strain-topline {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.strain-pill {
    border: 1px solid rgba(107, 142, 78, 0.36);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: .2rem .58rem;
    font-size: .8rem;
}

.strain-badges,
.strain-quick-stats {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.strain-summary-box {
    border-radius: 18px;
    border: 1px solid rgba(107, 142, 78, 0.3);
    padding: .8rem;
    background: rgba(245, 237, 215, 0.54);
}

.strain-rating-hero {
    display: grid;
    gap: .15rem;
    padding: .65rem .75rem;
    border-radius: 14px;
    background: rgba(107, 142, 78, 0.12);
    border: 1px solid rgba(107, 142, 78, 0.36);
}

.strain-rating-hero strong {
    font-size: 1.2rem;
}

.strain-block {
    background: #fff;
    border: 1px solid rgba(44, 51, 38, 0.12);
    border-radius: 20px;
    padding: 1rem;
}

.strain-block h3 {
    margin-bottom: .55rem;
}

.rating-distribution {
    display: grid;
    gap: .35rem;
    margin-bottom: .7rem;
}

.rating-row {
    display: grid;
    grid-template-columns: 36px 1fr 26px;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
}

.rating-row div {
    height: 8px;
    border-radius: 999px;
    background: rgba(44, 51, 38, 0.1);
    overflow: hidden;
}

.rating-row i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #d97342, #6b8e4e);
}

.review-list {
    display: grid;
    gap: .65rem;
}

.review-card {
    border: 1px solid rgba(107, 142, 78, 0.26);
    border-radius: 16px;
    padding: .75rem;
    background: linear-gradient(160deg, rgba(245, 237, 215, 0.35), #fff);
}

.community-gallery {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-photo {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(107, 142, 78, 0.2);
    background: #fff;
}

.community-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.community-photo p {
    padding: .45rem .55rem .6rem;
    font-size: .85rem;
    margin: 0;
}

.empty-community {
    padding: .95rem;
    border: 1px dashed rgba(107, 142, 78, 0.45);
    border-radius: 15px;
    background: rgba(245, 237, 215, 0.55);
}

.contrib-cta-row {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.contrib-cta-row .btn {
    flex: 1;
    min-width: 170px;
}

.community-note-muted {
    opacity: .78;
    font-size: .92rem;
}

.confidence-pill {
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .78rem;
    border: 1px solid transparent;
}

.confidence-pill.is-confirmed {
    background: rgba(107, 142, 78, 0.15);
    border-color: rgba(107, 142, 78, 0.5);
}

.confidence-pill.is-community {
    background: rgba(217, 115, 66, 0.12);
    border-color: rgba(217, 115, 66, 0.46);
}

.confidence-pill.is-incomplete {
    background: rgba(70, 70, 70, 0.08);
    border-color: rgba(70, 70, 70, 0.25);
}

.community-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(19, 24, 16, 0.45);
    z-index: 120;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: .5rem;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity .22s ease, background .22s ease;
}

.community-drawer {
    width: min(720px, 100%);
    max-height: min(92dvh, 760px);
    border-radius: 20px 20px 0 0;
    background: #FAF7F0;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -16px 36px rgba(19, 24, 16, 0.28);
    transform: translateY(24px);
    transition: transform .24s ease;
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
}

.community-drawer-overlay.is-open {
    opacity: 1;
}

.community-drawer-overlay.is-open .community-drawer {
    transform: translateY(0);
}

.community-drawer-overlay.is-closing {
    opacity: 0;
}

.community-drawer-handle {
    display: flex;
    justify-content: center;
    padding: .5rem 0 .35rem;
}

.community-drawer-handle span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(44, 51, 38, 0.24);
}

.community-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .15rem 1rem .55rem;
    border-bottom: 1px solid rgba(44, 51, 38, 0.12);
    position: sticky;
    top: 0;
    background: #FAF7F0;
    z-index: 2;
}

.community-drawer-kicker {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(44, 51, 38, 0.7);
}

.community-drawer-close {
    border: 0;
    background: rgba(44, 51, 38, 0.08);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.community-drawer-content {
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.contribution-feedback {
    margin: .35rem 0 .7rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    font-size: .86rem;
}

.contribution-feedback.is-info {
    background: rgba(107, 142, 78, 0.13);
    border: 1px solid rgba(107, 142, 78, 0.32);
}

.contribution-feedback.is-warning {
    background: rgba(245, 169, 98, 0.2);
    border: 1px solid rgba(217, 115, 66, 0.35);
}

.contribution-feedback.is-error {
    background: rgba(191, 82, 61, 0.15);
    border: 1px solid rgba(191, 82, 61, 0.35);
}

.contribution-feedback.is-success {
    background: rgba(86, 162, 95, 0.16);
    border: 1px solid rgba(86, 162, 95, 0.36);
}

.photo-preview-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

.photo-preview-list img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(44, 51, 38, 0.16);
}

.community-drawer-subtitle {
    margin: .1rem 0 0;
    font-size: .86rem;
    opacity: .8;
}

.community-form {
    display: grid;
    gap: .7rem;
}

.community-form label,
.community-form legend {
    font-size: .92rem;
    color: var(--dark-text);
}

.community-form label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.community-form input,
.community-form textarea,
.community-form select {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: .28rem;
    padding: .65rem .7rem;
    border-radius: 12px;
    border: 1px solid rgba(44, 51, 38, 0.2);
}

.community-form textarea {
    resize: vertical;
}

.community-form input[type="file"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-form input[type="file"]::file-selector-button {
    max-width: 52%;
    margin-right: .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.community-form-optional {
    border: 1px solid rgba(44, 51, 38, 0.16);
    border-radius: 12px;
    padding: .55rem .65rem;
    background: rgba(255, 255, 255, 0.75);
}

.community-form-optional summary {
    cursor: pointer;
    font-weight: 600;
}

.community-form-optional-grid {
    margin-top: .55rem;
    display: grid;
    gap: .62rem;
}

.moderation-summary p {
    margin-bottom: .55rem;
}

.moderation-counter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .75rem 0;
}

.moderation-storage-box {
    background: rgba(107, 142, 78, 0.08);
    border: 1px solid rgba(107, 142, 78, 0.2);
    border-radius: 12px;
    padding: .75rem;
}

.moderation-storage-box code {
    font-size: .85rem;
}

.moderation-filters {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.moderation-filters select {
    width: 100%;
    margin-top: .35rem;
    padding: .58rem .66rem;
    border-radius: 10px;
    border: 1px solid rgba(44, 51, 38, 0.24);
}

.moderation-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.chip-option {
    border: 1px solid rgba(107, 142, 78, 0.35);
    border-radius: 999px;
    padding: .32rem .62rem;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
}

.chip-option input {
    margin: 0;
    width: auto;
}

.consent-row {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}

@media (max-width: 640px) {
    .community-drawer-overlay {
        padding: .35rem;
    }

    .community-drawer {
        width: min(720px, calc(100vw - .7rem));
        max-height: min(90dvh, 760px);
        border-radius: 18px 18px 0 0;
    }

    .community-drawer-header {
        padding: .85rem .85rem .5rem;
    }

    .community-drawer-content {
        padding: 0 .85rem .9rem;
    }

    .community-form {
        gap: .62rem;
    }

    .community-form input,
    .community-form textarea,
    .community-form select {
        padding: .58rem .62rem;
        border-radius: 11px;
    }

    .community-form input[type="file"] {
        font-size: .94rem;
    }

    .community-form input[type="file"]::file-selector-button {
        max-width: 48%;
    }
}

.consent-row input {
    width: auto;
    margin-top: .1rem;
}

.community-footnote {
    margin: 0;
    font-size: .83rem;
    opacity: .76;
}

.submission-success {
    border: 1px solid rgba(107, 142, 78, 0.35);
    background: rgba(245, 237, 215, 0.4);
    border-radius: 16px;
    padding: 1rem;
}

.duplicate-warning {
    margin: 0;
    border-radius: 10px;
    padding: .55rem .65rem;
    background: rgba(245, 169, 98, 0.2);
    border: 1px solid rgba(217, 115, 66, 0.4);
    font-size: .88rem;
}

.moderation-actions {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}

.moderation-edit-field {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(44, 51, 38, 0.2);
    padding: .5rem;
}

@media (max-width: 768px) {
    .mobile-compare-cta {
        display: flex;
    }

    #associations-list {
        grid-template-columns: 1fr;
    }

    .association-actions {
        flex-direction: row;
    }

    .association-actions .btn {
        padding-inline: .65rem;
        font-size: .92rem;
    }

    .detail-section,
    .discover-step {
        padding: 1rem;
    }
}

@media (max-width: 430px) {
    .association-kpis {
        grid-template-columns: 1fr;
    }

    .community-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .contrib-cta-row {
        flex-direction: column;
    }
}

/* premium refresh strains catalog/detail */
.strain-search-card{border-radius:20px; background:#fbf7ef; box-shadow:0 10px 30px rgba(40,58,38,.08); border:1px solid rgba(78,96,65,.12); transition:transform .2s ease, box-shadow .2s ease;}
.strain-search-card:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(40,58,38,.14);} 
.strain-search-media{aspect-ratio:4/3; background:#f3ecde; overflow:hidden; border-radius:18px 18px 0 0;}
.strain-search-media img{width:100%;height:100%;object-fit:cover;}
.strain-image-placeholder.editorial{background:linear-gradient(135deg,#f4ecd8 0%,#d9d0a8 55%,#c87b59 100%);} 
.strain-image-placeholder .placeholder-kicker{letter-spacing:.06em; text-transform:uppercase; font-size:.72rem;}
.strain-card-primary-action{font-weight:700;}
.strain-hero-media{border-radius:22px; overflow:hidden; box-shadow:0 16px 36px rgba(28,42,29,.16);}

/* ===== EDITORIAL CONTENT + PROFESSIONALS ===== */
.editorial-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 6rem) 0 var(--space-lg);
    background: linear-gradient(135deg, var(--petal-peach), var(--sand));
}

.editorial-hero::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: 18%;
    border-radius: var(--radius-organic);
    background: radial-gradient(circle, rgba(140, 166, 114, 0.28), transparent 68%);
    pointer-events: none;
}

.editorial-grid,
.professional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-md);
}

.editorial-card,
.professional-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 100%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 237, 215, 0.56));
}

.editorial-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.editorial-type {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(217, 115, 66, 0.12);
    color: var(--burnt-orange);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: capitalize;
}

.editorial-date {
    color: rgba(44, 51, 38, 0.66);
    font-size: 0.95rem;
    margin-top: auto;
}

.editorial-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.editorial-actions .btn {
    white-space: normal;
}

.editorial-source-link {
    font-size: 0.9rem;
    padding: 0.62rem 0.85rem;
}

.editorial-disclaimer {
    margin-top: var(--space-md);
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--leaf-green);
    border-radius: 16px;
    background: rgba(140, 166, 114, 0.13);
    color: rgba(44, 51, 38, 0.88);
    font-weight: 600;
}

.editorial-detail-card h1,
.professional-profile h1 {
    margin: 0.45rem 0 0.75rem;
}

.editorial-body {
    display: grid;
    gap: 0.35rem;
    margin: 1.5rem 0;
    font-size: 1.08rem;
}

.professional-card {
    flex-direction: row;
    align-items: flex-start;
}

.professional-card-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
}

.professional-title {
    color: var(--brand-forest);
    font-weight: 700;
    line-height: 1.45;
}

.professional-avatar {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 34% 66% 48% 52% / 56% 44% 56% 44%;
    background: linear-gradient(135deg, var(--cream), rgba(217, 115, 66, 0.2));
    border: 2px solid rgba(44, 51, 38, 0.12);
    color: var(--burnt-orange);
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
}

.professional-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.professional-avatar-large {
    width: min(220px, 48vw);
    height: min(220px, 48vw);
    flex-basis: min(220px, 48vw);
    font-size: 3rem;
}

.professional-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.3rem 0 0.6rem;
}

.professional-profile {
    display: grid;
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: flex-start;
}

.professional-profile h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.65rem;
}

.related-content-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0.75rem;
}

.related-content-card {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
}

.related-content-card span {
    color: var(--burnt-orange);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (max-width: 760px) {
    .editorial-actions,
    .editorial-actions .btn {
        width: 100%;
    }

    .professional-card,
    .professional-profile {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .home-editorial-grid {
        grid-template-columns: 1fr;
    }
}

.editorial-body h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.35rem;
}

.editorial-body h3 {
    margin-top: 1.15rem;
    margin-bottom: 0.2rem;
    color: var(--brand-forest);
    font-size: 1.05rem;
}

.editorial-body ul {
    margin: 0.25rem 0 0.65rem;
    padding-left: 1.25rem;
}

.editorial-body li + li {
    margin-top: 0.35rem;
}

.editorial-body blockquote {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--burnt-orange);
    background: rgba(245, 237, 215, 0.72);
    color: var(--brand-forest);
    font-weight: 600;
}

.editorial-body a {
    color: var(--burnt-orange);
    font-weight: 700;
}

/* ===== HOTFIX: RENDERIZAÇÃO EDITORIAL SEM MARKDOWN CRU ===== */
.article-content {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.75;
    background: linear-gradient(145deg, rgba(255, 252, 246, 0.98), rgba(245, 237, 215, 0.64));
    border: 1px solid rgba(107, 142, 78, 0.14);
    box-shadow: 0 18px 50px rgba(44, 51, 38, 0.08);
}

.article-content h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--dark-text);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 0;
    background: transparent;
    border-left: 0;
}

.article-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(245, 237, 215, 0.9);
    color: rgba(44, 51, 38, 0.82);
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: capitalize;
}

.article-excerpt {
    margin-bottom: 2rem;
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--burnt-orange);
    border-radius: 0 18px 18px 0;
    background: rgba(253, 238, 224, 0.72);
    font-size: clamp(1.08rem, 2vw, 1.24rem);
    line-height: 1.65;
}

.article-content .editorial-body {
    display: block;
    margin: 0;
    font-size: clamp(1.04rem, 1.5vw, 1.13rem);
}

.article-content .editorial-body h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.15;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--dark-text);
}

.article-content .editorial-body h3 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.25;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--brand-forest);
}

.article-content .editorial-body p {
    margin-bottom: 1.2rem;
}

.article-content .editorial-body ul {
    margin: 1rem 0 1.5rem;
    padding-left: 1.4rem;
}

.article-content .editorial-body li {
    margin-bottom: 0.5rem;
    padding-left: 0.15rem;
}

.article-content .editorial-body blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--burnt-orange);
    border-radius: 0 1rem 1rem 0;
    background: rgba(245, 237, 215, 0.72);
    color: var(--brand-forest);
    font-weight: 600;
}

.content-disclaimer,
.content-transparency {
    display: block;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: #f1e6d4;
    color: rgba(44, 51, 38, 0.92);
    font-weight: 600;
}

.content-transparency {
    border: 1px solid rgba(217, 115, 66, 0.18);
}

.content-disclaimer {
    border: 1px solid rgba(107, 142, 78, 0.2);
}

.content-transparency-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.85rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(217, 115, 66, 0.34);
    border-radius: 999px;
    color: var(--burnt-orange);
    font-size: 0.92rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .article-content {
        padding: 1.35rem;
        border-radius: 18px;
    }

    .article-meta {
        gap: 0.4rem;
    }

    .article-meta span {
        font-size: 0.8rem;
    }

    .article-excerpt {
        padding: 0.9rem 1rem;
    }

    .article-content .editorial-body h2 {
        margin-top: 2.25rem;
    }
}

/* ===== BOTANICAL EDITORIAL VISUAL REFRESH =====
   Camada exclusivamente estética: tokens, superfícies, respiro e estados visuais.
   Não altera dados, rotas, IDs, scripts ou regras de renderização.
   ============================================ */
.nav-logo img {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.nav-links a {
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(44, 51, 38, 0.82);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--brand-ink);
    background: rgba(253, 238, 224, 0.72);
    border-color: var(--line-botanical);
    box-shadow: none;
    transform: translateY(-1px);
}

.hero,
.editorial-hero {
    background:
        radial-gradient(circle at 86% 20%, rgba(140, 166, 114, 0.18), transparent 23rem),
        radial-gradient(circle at 8% 78%, rgba(217, 115, 66, 0.11), transparent 18rem);
}

.hero {
    min-height: 78vh;
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.hero-content,
.strains-hero {
    max-width: 820px;
}

.hero-eyebrow,
.section-eyebrow,
.blog-kicker {
    color: var(--brand-olive);
    letter-spacing: 0.16em;
    font-weight: 700;
}

.hero-title,
.section-title,
.editorial-detail-card h1,
.professional-profile h1 {
    text-wrap: balance;
}

.hero-subtitle,
.section-description {
    color: rgba(44, 51, 38, 0.72);
}

.hero-search-row input,
.nav-search input,
input,
select,
textarea,
.newsletter-prompt-form input,
.strain-search-filters input[type="search"] {
    border: 1px solid var(--line-botanical);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    background: rgba(255, 250, 242, 0.88);
    color: var(--brand-ink);
}

.hero-search-row input:focus,
.nav-search input:focus,
input:focus,
select:focus,
textarea:focus,
.strain-search-filters input[type="search"]:focus {
    outline: none;
    border-color: rgba(217, 115, 66, 0.55);
    box-shadow: 0 0 0 4px rgba(217, 115, 66, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.btn,
.filter-btn,
.strain-tag-list .strain-effect-btn,
.strain-card-link-action,
.content-transparency-link {
    border-radius: 999px;
    box-shadow: none;
    letter-spacing: 0.01em;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.btn {
    border: 1px solid var(--line-soft);
}

.btn:hover,
.filter-btn:hover,
.strain-tag-list .strain-effect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(44, 51, 38, 0.11);
}

.btn-primary,
.filter-btn.active,
.strain-tag-list .strain-effect-btn.active {
    background: var(--brand-terracotta);
    border-color: var(--brand-terracotta);
    color: #fffaf2;
}

.btn-primary:hover {
    background: var(--brand-terracotta-dark);
    border-color: var(--brand-terracotta-dark);
}

.btn-secondary,
.btn-ghost {
    background: rgba(255, 250, 242, 0.74);
    color: var(--brand-ink);
    border-color: var(--line-botanical);
}

.btn-secondary:hover,
.btn-ghost:hover {
    background: rgba(107, 142, 78, 0.12);
    border-color: rgba(107, 142, 78, 0.42);
    color: var(--brand-ink);
}

.card,
.card-organic,
.association-card,
.comparison-card,
.option-card,
.result-card,
.guide-card,
.chat-container,
.chat-message .chat-bubble,
.filter-chip,
.quiz-option,
.discover-step,
.stat-card,
.product-card,
.medical-card,
.editorial-card,
.professional-card,
.article-content,
.detail-section,
.strain-block,
.strain-search-card,
.newsletter-prompt-card {
    background: linear-gradient(145deg, rgba(255, 250, 242, 0.98), rgba(253, 238, 224, 0.54));
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-paper);
}

.card:hover,
.association-card:hover,
.comparison-card:hover,
.option-card:hover,
.result-card:hover,
.guide-card:hover,
.quiz-option:hover,
.product-card:hover,
.editorial-card:hover,
.professional-card:hover,
.strain-search-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-paper-hover);
}

.card-organic,
.partner-logo-card,
.partner-card-muted {
    overflow: hidden;
}

.card-organic::before {
    background: radial-gradient(circle, rgba(140, 166, 114, 0.16), transparent 54%);
    opacity: 0.55;
}

.tag,
.confidence-badge,
.association-meta-chip,
.strain-pill,
.strain-active-chip,
.strain-community-badge,
.strain-review-count,
.article-meta span,
.editorial-type {
    border: 1px solid var(--line-botanical);
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.78);
    color: rgba(44, 51, 38, 0.82);
    box-shadow: none;
}

.tag-thc,
.editorial-type,
.strain-review-count.has-review {
    background: rgba(217, 115, 66, 0.12);
    border-color: rgba(217, 115, 66, 0.24);
    color: var(--brand-terracotta-deep);
}

.tag-cbd,
.confidence-confirmado,
.strain-community-badge {
    background: rgba(107, 142, 78, 0.13);
    border-color: rgba(107, 142, 78, 0.28);
    color: var(--brand-forest);
}

.filters-bar {
    gap: 0.6rem;
    padding: 0.25rem 0 0.55rem;
}

.filter-btn {
    background: rgba(255, 250, 242, 0.8);
    border: 1px solid var(--line-botanical);
    color: rgba(44, 51, 38, 0.82);
}

.association-kpi,
.community-note,
.product-item,
.strain-summary-box,
.strain-rating-hero,
.strain-review-filter,
.strain-reason-copy,
.article-excerpt,
.content-disclaimer,
.content-transparency,
.editorial-disclaimer {
    background: rgba(253, 238, 224, 0.58);
    border: 1px solid var(--line-botanical);
    border-left-color: var(--brand-olive);
    border-radius: 18px;
}

.association-price,
.guide-card h3,
.medical-card h3,
.related-content-card span,
.editorial-body a,
.content-transparency-link {
    color: var(--brand-terracotta);
}

.editorial-grid,
.professional-grid,
.organic-grid,
.home-editorial-grid {
    gap: clamp(1rem, 2.2vw, 1.65rem);
}

.editorial-card,
.professional-card {
    padding: clamp(1.1rem, 2vw, 1.55rem);
}

.editorial-hero {
    background:
        radial-gradient(circle at 88% 22%, rgba(107, 142, 78, 0.19), transparent 20rem),
        linear-gradient(135deg, rgba(253, 238, 224, 0.78), rgba(241, 230, 212, 0.9));
}

.editorial-hero::after {
    background:
        radial-gradient(circle at 45% 45%, rgba(140, 166, 114, 0.22), transparent 62%),
        radial-gradient(circle at 60% 68%, rgba(217, 115, 66, 0.10), transparent 58%);
    opacity: 0.9;
}

.strain-search-filters {
    background: linear-gradient(160deg, rgba(255, 250, 242, 0.96), rgba(241, 230, 212, 0.82));
    border: 1px solid var(--line-botanical);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-paper);
}

.strain-search-results-header {
    border: 1px solid var(--line-botanical);
    border-left: 4px solid var(--brand-olive);
    background: linear-gradient(120deg, rgba(253, 238, 224, 0.78), rgba(140, 166, 114, 0.13));
    box-shadow: 0 12px 30px rgba(44, 51, 38, 0.06);
}

.strain-search-media,
.strain-hero-media {
    border-radius: 22px;
    background: var(--brand-paper);
}

.strain-search-media img,
.strain-hero-media img,
.strain-gallery-strip img,
.professional-avatar img {
    filter: saturate(0.92) contrast(1.02);
}

.strain-search-card-header h3,
.editorial-card h3,
.professional-card h3 {
    color: var(--brand-ink);
}

.table,
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    background: rgba(255, 250, 242, 0.82);
    box-shadow: var(--shadow-paper);
}

th,
td {
    border-bottom: 1px solid rgba(44, 51, 38, 0.09);
    padding: 0.85rem 1rem;
}

th {
    background: rgba(107, 142, 78, 0.12);
    color: var(--brand-ink);
    font-weight: 700;
}

tr:last-child td {
    border-bottom: 0;
}

.footer {
    background:
        radial-gradient(circle at 18% 0%, rgba(140, 166, 114, 0.16), transparent 22rem),
        var(--brand-ink-deep);
    color: var(--brand-blush);
    border-top: 1px solid rgba(255, 250, 242, 0.12);
}

.footer-section h4 {
    color: var(--brand-apricot);
}

.mobile-compare-cta {
    background: rgba(44, 51, 38, 0.94);
    border: 1px solid rgba(255, 250, 242, 0.18);
    box-shadow: 0 18px 40px rgba(44, 51, 38, 0.26);
}

@media (max-width: 979px) {
    .strain-search-mobile-controls {
        background: rgba(255, 250, 242, 0.9);
        border: 1px solid var(--line-botanical);
        box-shadow: 0 12px 28px rgba(44, 51, 38, 0.08);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 2.5rem 0 3.25rem;
    }

    .hero-tools,
    .editorial-actions {
        gap: 0.55rem;
    }

    .hero-tools .btn {
        width: auto;
        min-height: 40px;
        padding: 0.5rem 1rem;
    }

    .nav-links {
        background: #faf8f2;
        border-right: none;
    }

    .card,
    .card-organic,
    .association-card,
    .editorial-card,
    .professional-card,
    .strain-search-card,
    .article-content {
        border-radius: 20px;
    }
}

/* ============================================================
   FASE 3 — POLISH EDITORIAL + PROFUNDIDADE VISUAL
   ============================================================ */

/* --- Folha botânica no hero --------------------------------- */
.hero::after {
    content: '';
    position: absolute;
    right: -3%;
    top: 50%;
    transform: translateY(-52%) rotate(12deg);
    width: clamp(240px, 38vw, 460px);
    aspect-ratio: 10 / 13;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'><line x1='50' y1='125' x2='50' y2='78' stroke='%2342563a' stroke-width='2.5' stroke-linecap='round'/><path d='M50 78 C44 55 44 30 50 8 C56 30 56 55 50 78Z' fill='%2342563a'/><path d='M50 78 C38 62 22 42 12 22 C26 30 40 52 50 78Z' fill='%2342563a'/><path d='M50 78 C62 62 78 42 88 22 C74 30 60 52 50 78Z' fill='%2342563a'/><path d='M50 82 C34 70 14 60 2 48 C16 52 34 66 50 82Z' fill='%2342563a'/><path d='M50 82 C66 70 86 60 98 48 C84 52 66 66 50 82Z' fill='%2342563a'/><path d='M50 90 C36 83 18 79 6 73 C18 75 36 81 50 90Z' fill='%2342563a'/><path d='M50 90 C64 83 82 79 94 73 C82 75 64 81 50 90Z' fill='%2342563a'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.038;
    z-index: 1;
    pointer-events: none;
}

/* Ensure hero-content sits above the leaf layer */
.hero-content {
    position: relative;
    z-index: 2;
}

/* --- Nav: toggle button + brand polish ---------------------- */
.nav-toggle {
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 250, 242, 0.6);
    color: var(--brand-ink);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
    background: rgba(253, 238, 224, 0.85);
    border-color: var(--line-botanical);
    color: var(--brand-terracotta);
}

.nav-brand-title {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* --- Hero: search bar cohesion ----------------------------- */
.hero-search-row {
    background: rgba(255, 250, 242, 0.72);
    border: 1px solid var(--line-botanical);
    border-radius: 999px;
    padding: 4px 4px 4px 16px;
    gap: 0;
}

.hero-search-row input {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 46px;
    padding: 0;
    font-size: 0.97rem;
}

.hero-search-row input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}

.hero-search-row .btn {
    border-radius: 999px;
    min-height: 40px;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin: 0;
}

/* Wrap the whole search form in a focus ring on container focus */
.hero-search-row:focus-within {
    border-color: rgba(217, 115, 66, 0.5);
    box-shadow: 0 0 0 3px rgba(217, 115, 66, 0.1);
}

/* --- Eyebrow: add elegant marker line ---------------------- */
.hero-eyebrow,
.section-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.hero-eyebrow::before,
.section-eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0.65;
    flex-shrink: 0;
}

/* --- Cards: better depth + hover --------------------------- */
.card,
.card-organic {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}

.card:hover,
.card-organic:hover {
    transform: translateY(-4px);
}

/* --- Section alternate: more atmospheric ------------------- */
.section-alternate {
    background:
        radial-gradient(circle at 10% 80%, rgba(107, 142, 78, 0.07), transparent 36rem),
        rgba(253, 238, 224, 0.38);
}

/* --- Footer: depth ----------------------------------------- */
.footer-links a {
    opacity: 0.72;
    transition: opacity 0.18s ease;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--brand-apricot);
}

/* --- Improved link treatment in editorial content ---------- */
.editorial-body a,
.article-content a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(217, 115, 66, 0.42);
}

.editorial-body a:hover,
.article-content a:hover {
    text-decoration-color: var(--brand-terracotta);
    color: var(--brand-terracotta);
}

/* --- Priority grid: better proportions --------------------- */
.home-priority-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.priority-card {
    display: flex;
    flex-direction: column;
}

.priority-card .btn {
    margin-top: auto;
}

/* --- Path icon: decorative symbol in cards ----------------- */
.path-icon {
    font-size: 1.5rem;
    opacity: 0.72;
}

/* --- Mobile: hero leaf hidden at small sizes --------------- */
@media (max-width: 768px) {
    .hero::after {
        display: none;
    }

    .hero-search-row {
        border-radius: 18px;
        padding: 0;
        background: transparent;
        border: 0;
        gap: 0.55rem;
    }

    .hero-search-row input {
        border: 1px solid var(--line-botanical);
        border-radius: 18px;
        background: rgba(255, 250, 242, 0.88);
        min-height: 52px;
        padding: 0.85rem 0.95rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .hero-search-row:focus-within {
        box-shadow: none;
        border: 0;
    }

    .hero-search-row .btn {
        border-radius: 999px;
        min-height: var(--touch-target);
        width: 100%;
    }

}

/* === Strain card enhancements === */
.strain-search-card {
  border-radius: 20px;
  border: 1px solid rgba(44, 51, 38, 0.1);
  background: rgba(255, 255, 255, 0.72);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.strain-search-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(44, 51, 38, 0.12);
  border-color: rgba(107, 142, 78, 0.3);
}

/* Primary action button in cards */
.strain-card-primary-action.btn-primary {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.strain-card-primary-action.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(107, 142, 78, 0.3);
}
.strain-card-primary-action.btn-primary:active {
  transform: translateY(0);
}

/* Card image area */
.strain-search-media {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* Strain price line */
.strain-price-line {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0.25rem 0 0.5rem;
}

/* Community badges */
.strain-community-badge {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-weight: 700;
}

/* Patient tags */
.strain-patient-tags {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.78;
}

/* /geneticas performance pass: hover is visual only, no card movement. */
.strain-search-card,
.card-organic.strain-search-card {
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.strain-search-card:hover,
.card-organic.strain-search-card:hover {
  transform: none !important;
  border-color: rgba(107, 142, 78, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .strain-search-card,
  .card-organic.strain-search-card,
  .strain-search-card:hover,
  .card-organic.strain-search-card:hover {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}