/**
 * Govee dark shell — shared chrome for premium catalog pages.
 * Activate by putting class "govee-dark" on <main>.
 *
 * Product pages still use govee-product-view.css (#app:has(.govee-product-page))
 * until that file is migrated in a separate step. Both can coexist:
 * a page never has both .govee-product-page and main.govee-dark at once.
 */

/* Gap under sticky header: first-child margin used to expose white #app */
#app:has(main.govee-dark) {
    background: var(--govee-bg);
}

main.govee-dark {
    background: var(--govee-bg) !important;
    color: var(--govee-text);
    font-family: var(--govee-font-sans);
    min-height: 40vh;
    overflow-x: clip;
    padding-top: 0.25rem;
}

/* ---- Header ---- */
#app:has(main.govee-dark) header {
    background: var(--govee-bg) !important;
    border-color: var(--govee-border) !important;
    box-shadow: none !important;
}

#app:has(main.govee-dark) header .border-b,
#app:has(main.govee-dark) header .border-t,
#app:has(main.govee-dark) header .border {
    border-color: var(--govee-border) !important;
}

#app:has(main.govee-dark) v-topbar .flex.w-full,
#app:has(main.govee-dark) v-topbar > div,
#app:has(main.govee-dark) .max-lg\:hidden > div.flex.w-full {
    background: var(--govee-bg) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) header a,
#app:has(main.govee-dark) header p,
#app:has(main.govee-dark) header span:not([class*="icon-"]) {
    color: var(--govee-text);
}

#app:has(main.govee-dark) header .text-navyBlue,
#app:has(main.govee-dark) header .font-medium.text-navyBlue {
    color: var(--govee-cyan) !important;
}

#app:has(main.govee-dark) header .text-black,
#app:has(main.govee-dark) header .text-gray-900 {
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) header .text-zinc-600,
#app:has(main.govee-dark) header .text-gray-600 {
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) header .hover\:border-navyBlue:hover,
#app:has(main.govee-dark) header .border-navyBlue {
    border-color: var(--govee-cyan) !important;
}

#app:has(main.govee-dark) header input[type="text"] {
    background: var(--govee-card-2) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) header input[type="text"]::placeholder {
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) header .bg-zinc-100 {
    background: var(--govee-card-2) !important;
}

#app:has(main.govee-dark) header .icon-search,
#app:has(main.govee-dark) header [class^="icon-"],
#app:has(main.govee-dark) header [class*=" icon-"] {
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) header .icon-cart:hover,
#app:has(main.govee-dark) header .icon-heart:hover,
#app:has(main.govee-dark) header .icon-compare:hover,
#app:has(main.govee-dark) header .icon-users:hover,
#app:has(main.govee-dark) header .icon-hamburger:hover,
#app:has(main.govee-dark) header .icon-search:hover {
    color: var(--govee-cyan) !important;
}

#app:has(main.govee-dark) header .bg-navyBlue {
    background: linear-gradient(90deg, var(--govee-cyan), var(--govee-violet)) !important;
    color: var(--govee-bg) !important;
}

#app:has(main.govee-dark) header .lg\:hidden.shadow-sm,
#app:has(main.govee-dark) header .flex-wrap.gap-4.px-4 {
    background: var(--govee-bg) !important;
    box-shadow: none !important;
}

/*
 * Mega menú de categorías (desktop) — panel oscuro.
 * Selectores acotados a .bg-white.p-9 (solo el desplegable de categorías
 * en v-desktop-category). No toca cuenta (.govee-account-dropdown) ni
 * locale/currency (topbar, sin p-9).
 */
#app:has(main.govee-dark) header .group-hover\:opacity-100.bg-white,
#app:has(main.govee-dark) header .bg-white.p-9 {
    background: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    color: var(--govee-text);
}

#app:has(main.govee-dark) header .bg-white.p-9 a,
#app:has(main.govee-dark) header .bg-white.p-9 p,
#app:has(main.govee-dark) header .bg-white.p-9 li,
#app:has(main.govee-dark) header .bg-white.p-9 span:not([class*="icon-"]) {
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) header .bg-white.p-9 .text-navyBlue,
#app:has(main.govee-dark) header .bg-white.p-9 .text-navyBlue a {
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) header .bg-white.p-9 .text-zinc-500,
#app:has(main.govee-dark) header .bg-white.p-9 .text-zinc-500 a {
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) header .bg-white.p-9 a:hover {
    color: var(--govee-cyan) !important;
}

/*
 * Menú hamburguesa (.govee-mobile-nav) — distinto del mini-cart (.govee-mini-cart).
 * Selectores acotados a .govee-mobile-nav; el mini-cart se estila en govee-mini-cart.css.
 * Footer oscuro sigue en govee-footer.css vía GoveeFooterResolver.
 */
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] {
    background: var(--govee-card) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .bg-white,
#app:has(main.govee-dark) .govee-mobile-nav .pointer-events-auto.bg-white {
    background: var(--govee-card) !important;
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] a,
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] p,
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] span:not([class*="icon-"]),
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] li {
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .text-zinc-500,
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .text-gray-600 {
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .border-zinc-200,
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .border-b,
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .border-t {
    border-color: var(--govee-border) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] [class^="icon-"],
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] [class*=" icon-"],
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .icon-cancel {
    color: var(--govee-muted) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] .icon-cancel:hover {
    color: var(--govee-cyan) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.bottom-0.bg-white {
    background: var(--govee-card-2) !important;
    border-color: var(--govee-border) !important;
    color: var(--govee-text) !important;
}

/* Subcategorías mobile (2º/3º nivel): texto claro + hover cyan */
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] a.text-sm,
#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] a.text-base {
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) .govee-mobile-nav .fixed.z-\[1000\] a:hover {
    color: var(--govee-cyan) !important;
}