/**
 * 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.
 * .govee-mega-panel--categories = Interior/Exterior (3 columnas).
 * Legacy .bg-white.p-9 kept for any residual Bagisto markup.
 */
#app:has(main.govee-dark) header .group-hover\:opacity-100.bg-white,
#app:has(main.govee-dark) header .bg-white.p-9,
#app:has(main.govee-dark) header .govee-mega-panel--categories {
    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-"]),
#app:has(main.govee-dark) header .govee-mega-panel--categories a,
#app:has(main.govee-dark) header .govee-mega-panel--categories .govee-mega-cat-name {
    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,
#app:has(main.govee-dark) header .govee-mega-panel--categories a:hover,
#app:has(main.govee-dark) header .govee-mega-panel--categories a:hover .govee-mega-cat-name {
    color: var(--govee-cyan) !important;
}

/* Luces por Ambiente dropdown (lista compacta) */
#app:has(main.govee-dark) header .govee-rooms-panel {
    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 .govee-rooms-panel .govee-rooms-panel__link {
    color: var(--govee-text) !important;
}

#app:has(main.govee-dark) header .govee-rooms-panel .govee-rooms-panel__link:hover,
#app:has(main.govee-dark) header .govee-rooms-panel .govee-rooms-panel__link:focus-visible {
    color: var(--govee-cyan) !important;
}

/*
 * Mobile hamburger drawer (.govee-mobile-nav) dark styles live in
 * govee-mini-cart.css (always loaded) so product pages without
 * main.govee-dark still get a dark drawer. Do not re-gate on dark shell.
 */