/* ============================================================
   HEADER KADENCE — FloresGrow Carmen
   Espeja el Header React para páginas WooCommerce nativas
   (carrito, checkout, mi cuenta)
   ============================================================ */

html {
    scroll-behavior: smooth;
}

/* ── 1. RESET — Kadence añade fondos verdes por defecto ───── */

.main-navigation .primary-menu-container > ul > li > a,
.main-navigation ul li a,
.primary-menu-container > ul > li > a,
.site-header .main-navigation ul li a,
.kadence-sticky-header .main-navigation ul li a,
.search-toggle-wrap .search-toggle,
.site-header .search-toggle-wrap .search-toggle,
.kadence-sticky-header .search-toggle-wrap .search-toggle {
    background:       transparent !important;
    background-color: transparent !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
}

.main-navigation .sub-menu,
.main-navigation .sub-menu li {
    background:       #ffffff !important;
    background-color: #ffffff !important;
}

/* ── 2. TOP BAR DESKTOP (gris, 30px) ─────────────────────── */

.custom-top-bar {
    background:    #dddddd;
    height:        30px;
    padding:       0;
    border-bottom: none;
}

.custom-top-bar-inner {
    max-width:       1400px;
    margin:          0 auto;
    padding:         0 40px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
}

.custom-top-bar-left {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.custom-top-bar-social {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.custom-top-bar-social a {
    display:         inline-flex;
    align-items:     center;
    color:           #555;
    transition:      color 200ms;
    text-decoration: none;
    background:      transparent;
    border:          none;
    box-shadow:      none;
}

.custom-top-bar-social a svg       { width: 18px; height: 18px; }
.custom-top-bar-social .social-facebook:hover { color: #1877F2; }
.custom-top-bar-social .social-instagram:hover{ color: #E4405F; }
.custom-top-bar-social .social-tiktok:hover   { color: #000000; }

.custom-top-bar-left .contact-link,
.custom-top-bar-left .contact-email {
    color:           #333;
    text-decoration: none;
    font-size:       13px;
    font-weight:     500;
    background:      transparent;
}

.custom-top-bar-left .contact-link:hover,
.custom-top-bar-left .contact-email:hover { color: #2d6a4f; }

.custom-top-bar-center-right {
    display:     flex;
    align-items: center;
}

.custom-top-bar-center-right .shipping-text {
    font-size:   13px;
    color:       #333;
    font-weight: 500;
}

.custom-top-bar-right {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.custom-top-bar-lang {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.lang-option {
    font-size:       13px;
    font-weight:     500;
    color:           #666;
    text-decoration: none;
    transition:      color 200ms;
}

.lang-option:hover,
.lang-option.active { color: #2d6a4f; }

/* ── 3. TOP BAR MÓVIL: verde con solo texto de envío ─────── */

@media (max-width: 1024px) {
    .custom-top-bar {
        background: #2d6a4f;
        height:     30px;
    }

    .custom-top-bar-left,
    .custom-top-bar-right {
        display: none;
    }

    .custom-top-bar-center-right {
        flex:            1;
        justify-content: center;
    }

    .custom-top-bar-center-right .shipping-text {
        color:     #ffffff;
        font-size: 12px;
    }
}

/* ── 4. HEADER STICKY — 64px blanco ──────────────────────── */

.site-header {
    position:      sticky !important;
    top:           0 !important;
    z-index:       1000 !important;
    background:    #ffffff !important;
    border-bottom: 1px solid #E5E7EB;
    box-shadow:    0 1px 4px rgba(0,0,0,0.06) !important;
}

.site-header-inner-wrap,
.site-main-header-wrap {
    padding:    0 !important;
    margin:     0 !important;
    background: #ffffff !important;
    min-height: 64px !important;
}

.site-main-header-wrap {
    height: 64px !important;
}

/* Sombra más pronunciada al hacer scroll */
.item-is-fixed .site-header,
.kadence-sticky-header.item-is-fixed {
    box-shadow:    0 4px 20px rgba(0,0,0,0.10) !important;
    border-bottom: none;
}

#wrapper { margin-top: 0 !important; }

/* ── 5. LOGO — burbuja centrada colgante ─────────────────── */
/*
   Replica exactamente el LogoContainer del Header React:
   - 160×150px, fondo blanco, border-radius 0 0 50% 50% (media cápsula hacia abajo)
   - position absolute, top -30px (sube hasta cubrir la top bar)
   - Desaparece al hacer scroll (clase .item-is-fixed de Kadence)
*/

.site-branding {
    position:        absolute !important;
    left:            50% !important;
    transform:       translateX(-50%) !important;
    background:      #ffffff !important;
    border-radius:   0 0 50% 50% !important;
    box-shadow:      0 4px 16px rgba(0,0,0,0.10) !important;
    width:           160px !important;
    height:          150px !important;
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    z-index:         50 !important;
    top:             -30px !important;
    padding:         0 !important;
    pointer-events:  auto !important;
    transition:      opacity 400ms ease, transform 400ms ease !important;
}

/* Ocultar logo al scroll (Kadence añade .item-is-fixed al header) */
.item-is-fixed .site-branding {
    opacity:    0 !important;
    transform:  translateX(-50%) translateY(-30px) !important;
    pointer-events: none !important;
}

.custom-logo {
    width:       120% !important;
    height:      auto !important;
    display:     block !important;
    object-fit:  contain !important;
}

.site-title { display: none !important; }

/* Logo en móvil: pequeño y centrado, sin burbuja */
@media (max-width: 1024px) {
    .site-branding {
        width:         auto !important;
        height:        56px !important;
        border-radius: 0 !important;
        box-shadow:    none !important;
        background:    transparent !important;
        top:           50% !important;
        transform:     translateX(-50%) translateY(-50%) !important;
        padding:       4px !important;
    }

    .item-is-fixed .site-branding {
        opacity:    1 !important;
        transform:  translateX(-50%) translateY(-50%) !important;
        pointer-events: auto !important;
    }

    .custom-logo {
        width:  auto !important;
        height: 48px !important;
    }
}

/* ── 6. NAV LINKS DESKTOP ────────────────────────────────── */

.main-navigation ul li a {
    color:           #2d6a4f !important;
    font-weight:     700 !important;
    font-size:       16px !important;
    text-decoration: none !important;
    background:      transparent !important;
    padding:         6px 8px !important;
    border-bottom:   2px solid transparent;
    transition:      color 200ms, border-color 200ms;
}

.main-navigation ul li a:hover {
    color:              #1a5c3a !important;
    background:         transparent !important;
    border-bottom-color: #2d6a4f;
}

.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
    border-bottom-color: #2d6a4f !important;
}

/* ── 7. DROPDOWN ─────────────────────────────────────────── */

.main-navigation .sub-menu {
    background:    #ffffff !important;
    border:        1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    box-shadow:    0 16px 56px rgba(0,0,0,0.10) !important;
    padding:       8px !important;
}

.main-navigation .sub-menu li a {
    color:         #404040 !important;
    font-weight:   500 !important;
    font-size:     14px !important;
    border-radius: 8px !important;
    padding:       9px 14px !important;
    border-bottom: none !important;
    transition:    background 150ms, color 150ms !important;
}

.main-navigation .sub-menu li a:hover {
    background:    #F5F5F4 !important;
    color:         #111827 !important;
    border-bottom: none !important;
}

/* ── 8. ICONOS (wishlist, cuenta, buscador) ──────────────── */

.deseos > a,
.carrito > a,
.perfil > a,
.xoo-el-login-tgr > a,
.search-toggle-wrap .search-toggle {
    color:      #2d6a4f !important;
    background: transparent !important;
    transition: color 250ms;
}

.deseos > a:hover,
.carrito > a:hover,
.perfil > a:hover,
.search-toggle-wrap .search-toggle:hover {
    color: #1a5c3a !important;
}

/* Iconos Dashicons */
.deseos > a::before,
.carrito > a::before,
.perfil > a::before,
.xoo-el-login-tgr > a::before {
    font-family: dashicons !important;
    font-size:   22px !important;
    color:       #2d6a4f !important;
    background:  transparent !important;
    box-shadow:  none !important;
    border-radius: 0 !important;
}

.deseos > a::before          { content: "\f487" !important; }
.carrito > a::before         { content: "\f174" !important; }
.perfil > a::before          { content: "\f110" !important; }
.xoo-el-login-tgr > a::before { content: "\f110" !important; }

/* Ocultar perfil si no hay sesión */
body:not(.logged-in) .perfil { display: none !important; }

/* ── 9. BUSCADOR ─────────────────────────────────────────── */

#search-drawer .drawer-inner input.search-field {
    background:    #fafafa !important;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 9999px !important;
    color:         #374151 !important;
    padding:       11px 46px 11px 16px !important;
    font-size:     15px !important;
    outline:       none !important;
    box-shadow:    none !important;
}

.drawer-overlay {
    background:     rgba(0,0,0,0.20) !important;
    backdrop-filter: blur(2px) !important;
}

.popup-drawer .drawer-header .drawer-toggle   { display: none !important; }
#search-drawer .drawer-inner .kadence-search-icon-wrap { display: none !important; }

/* ── 10. NAV MÓVIL ───────────────────────────────────────── */

@media (max-width: 1024px) {
    .main-navigation ul li a {
        color:         #404040 !important;
        font-weight:   500 !important;
        font-size:     14px !important;
        border-bottom: none !important;
        padding:       11px 12px !important;
        border-radius: 10px !important;
    }

    .main-navigation ul li a:hover,
    .main-navigation ul li.current-menu-item > a {
        background: #f0f7f4 !important;
        color:      #2d6a4f !important;
    }
}