/*
 * banaa-flatsome-fixes.css  v2.0
 * ─────────────────────────────────────────────────────────────────────────────
 * MỤC ĐÍCH: CHỈ neutralize những gì Flatsome reset/override
 * mà phá vỡ CSS gốc của Bana'A. KHÔNG viết lại CSS gốc.
 *
 * NGUYÊN TẮC:
 *  - Dùng specificity tối thiểu cần thiết
 *  - Prefix tất cả rules bằng body.banaa-theme để cô lập
 *  - Chỉ fix những class thực sự bị Flatsome ghi đè
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. RESET FLATSOME BODY OVERRIDES ─────────────────────── */
body.banaa-theme {
    background-color: var(--ink) !important;
    background: linear-gradient(180deg, rgba(255,138,0,0.025) 0%, transparent 28rem), var(--ink) !important;
    color: var(--parchment) !important;
    font-family: var(--sans) !important;
    overflow-x: hidden;
}

/* Flatsome thêm padding-top vào body cho sticky header */
body.banaa-theme {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── 2. RESET FLATSOME TYPOGRAPHY OVERRIDES ───────────────── */
body.banaa-theme h1,
body.banaa-theme h2,
body.banaa-theme h3,
body.banaa-theme h4,
body.banaa-theme h5,
body.banaa-theme h6 {
    font-family: var(--serif) !important;
    color: var(--cream) !important;
    line-height: inherit;
    letter-spacing: inherit;
}

/* Flatsome override link color mạnh */
body.banaa-theme a {
    color: inherit;
    text-decoration: none;
}

/* ── 3. RESET FLATSOME SECTION/ROW LAYOUT ─────────────────── */
/* Flatsome dùng .row với max-width, cần reset cho các section Bana'A */
body.banaa-theme .hero,
body.banaa-theme section.product-detail-hero,
body.banaa-theme section.detail-cta-band,
body.banaa-theme .ticker-wrap,
body.banaa-theme footer.footer-container {
    max-width: none !important;
    width: 100% !important;
}

/* Flatsome .container thường bị .row override — đảm bảo .container gốc hoạt động */
body.banaa-theme .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    body.banaa-theme .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (max-width: 600px) {
    body.banaa-theme .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── 4. RESET FLATSOME NAV OVERRIDES ──────────────────────── */
/* Flatsome header đã fixed position — nav gốc cũng fixed, tắt Flatsome header */
body.banaa-theme #main-header,
body.banaa-theme #header,
body.banaa-theme .header-wrapper,
body.banaa-theme #wpadminbar + #main-header {
    display: none !important;
}

/* Nav gốc Bana'A */
body.banaa-theme nav.nav-bar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
}

/* ── 5. RESET FLATSOME FOOTER OVERRIDE ────────────────────── */
body.banaa-theme #footer,
body.banaa-theme .footer-wrapper:not(.footer-container) {
    display: none !important;
}

body.banaa-theme footer.footer-container {
    display: block !important;
}

/* ── 6. RESET FLATSOME BUTTON OVERRIDES ───────────────────── */
/* Flatsome override .button, cần bảo vệ .btn-ember và .btn-ghost gốc */
body.banaa-theme .btn-ember {
    background: var(--ember) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    font-family: var(--sans) !important;
    padding: 1.1rem 2.5rem !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: .2em !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

body.banaa-theme .btn-ember:hover {
    background: #f02423 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(229,25,24,.35) !important;
}

body.banaa-theme .btn-ghost {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(250,247,242,0.82) !important;
    font-family: var(--sans) !important;
    text-transform: uppercase !important;
    letter-spacing: .2em !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 0 !important;
}

/* ── 7. FLATSOME WP ADMIN BAR OFFSET ─────────────────────── */
/* Khi đăng nhập, WP admin bar thêm 32px top — offset nav gốc */
body.admin-bar.banaa-theme nav.nav-bar {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.banaa-theme nav.nav-bar {
        top: 46px !important;
    }
}

/* ── 8. FIX FLATSOME SECTION PADDING RESET ────────────────── */
/* Flatsome reset padding section trong UX Builder content */
body.banaa-theme section:not([class*="ux"]):not([class*="flatsome"]) {
    padding: 8rem 0;
}

body.banaa-theme .product-detail-hero {
    padding: 9rem 0 5rem !important;
}

body.banaa-theme .detail-cta-band {
    padding: 6rem 0 !important;
}

/* ── 9. FIX FLATSOME GRID INTERFERENCE ───────────────────── */
/* Flatsome .row có margin-left/right negative từ column system */
/* Cần isolate Bana'A grids khỏi Flatsome row system */
body.banaa-theme .products-grid,
body.banaa-theme .about-grid,
body.banaa-theme .sensory-grid,
body.banaa-theme .origin-grid,
body.banaa-theme .wholesale-benefits-grid,
body.banaa-theme .process-grid-8,
body.banaa-theme .detail-card-grid,
body.banaa-theme .detail-related-grid,
body.banaa-theme .footer-grid {
    display: grid !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── 10. FIX FLATSOME IMAGE RESET ─────────────────────────── */
/* Flatsome override img max-width:100% nhưng Bana'A cần object-fit */
body.banaa-theme .detail-image-card img,
body.banaa-theme .about-visual-img,
body.banaa-theme .cert-icon-container img,
body.banaa-theme .detail-related-card img {
    max-width: 100% !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* ── 11. FLATSOME WOOCOMMERCE ELEMENTS — ẨN ĐI ──────────── */
/* Tắt các WooCommerce widgets của Flatsome không dùng */
body.banaa-theme .woocommerce-notices-wrapper,
body.banaa-theme .onsale,
body.banaa-theme .added_to_cart {
    display: none !important;
}

/* ── 12. FIX GRAIN OVERLAY Z-INDEX ───────────────────────── */
/* Đảm bảo grain overlay của Bana'A render đúng trên Flatsome */
body.banaa-theme::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: .04;
    pointer-events: none;
    z-index: 9999;
}

/* ── 13. FIX FLATSOME PAGE WRAPPER ───────────────────────── */
/* Flatsome #page hoặc .page-wrapper có overflow:hidden — reset */
body.banaa-theme #page,
body.banaa-theme .page-wrapper {
    overflow-x: hidden;
    background: var(--ink) !important;
}

/* ── 14. FIX HERO SLIDESHOW (Flatsome lazy-load) ─────────── */
/* Flatsome lazy-load script có thể hide slides với visibility:hidden */
body.banaa-theme .hero-slide {
    visibility: visible !important;
}

/* ── 15. TICKER ANIMATION — Flatsome preference-reduced-motion fix */
@media (prefers-reduced-motion: no-preference) {
    body.banaa-theme .ticker-track {
        animation: ticker 30s linear infinite !important;
    }
}