/**
 * Header chrome drawers — always dark.
 *
 * Scope:
 *   - .govee-mini-cart (cart preview)
 *   - .govee-mobile-nav (hamburger category drawer) — always dark on ALL routes
 *   - Desktop mega-menu helpers (categories / rooms panels)
 *   - .govee-header__bar (desktop header content width = site 1440)
 *
 * Does NOT style /checkout/cart or /checkout/onepage page bodies.
 *
 * Loaded on every shop page (global header chrome), including product
 * pages without main.govee-dark, so the hamburger drawer stays dark.
 */

/**
 * Desktop header content row: same 1440px centered as .container / --govee-container-max.
 * Sticky <header> keeps full-bleed bg + shadow; border-b lives on the outer w-full wrapper.
 * Mobile header (lg:hidden / separate blade) does not use .govee-header__bar.
 */
.govee-header__bar {
    max-width: var(--govee-container-max, 1440px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/**
 * Desktop primary nav (Vue categories + rooms + recursos):
 * - Sentence case (override Tailwind .uppercase on all top-level items)
 * - nowrap so labels stay on one line
 * - Tighter horizontal pad + logo↔nav gap so 4 items + search fit in 1440
 */
.govee-header__bar > .flex.items-center.gap-x-10 {
    column-gap: 0.75rem;
}

@media (max-width: 1180px) {
    .govee-header__bar > .flex.items-center.gap-x-10 {
        column-gap: 0.5rem;
    }
}

.govee-header__bar .group > span > a.inline-block,
.govee-header__bar .govee-rooms-nav > span > a.inline-block,
.govee-header__bar .govee-recursos-nav > span > a.inline-block,
.govee-header__bar .group > span.flex.items-center {
    text-transform: none;
    white-space: nowrap;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

/* Panel shell */
.govee-mini-cart .fixed.z-\[1000\] {
    background: var(--govee-card) !important;
    border-left: 1px solid var(--govee-border) !important;
    color: var(--govee-text) !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}

.govee-mini-cart .fixed.z-\[1000\] .pointer-events-auto.bg-white,
.govee-mini-cart .fixed.z-\[1000\] .bg-white {
    background: var(--govee-card) !important;
    color: var(--govee-text) !important;
}

/* Typography */
.govee-mini-cart .fixed.z-\[1000\] p,
.govee-mini-cart .fixed.z-\[1000\] a,
.govee-mini-cart .fixed.z-\[1000\] span:not([class*="icon-"]),
.govee-mini-cart .fixed.z-\[1000\] div {
    color: var(--govee-text);
}

.govee-mini-cart .fixed.z-\[1000\] .text-zinc-500,
.govee-mini-cart .fixed.z-\[1000\] .text-gray-600,
.govee-mini-cart .fixed.z-\[1000\] .text-zinc-400,
.govee-mini-cart .fixed.z-\[1000\] .max-md\:text-zinc-500 {
    color: var(--govee-muted) !important;
}

.govee-mini-cart .fixed.z-\[1000\] .text-black,
.govee-mini-cart .fixed.z-\[1000\] .font-medium.text-black {
    color: var(--govee-text) !important;
}

/* Prices / subtotal accent */
.govee-mini-cart .fixed.z-\[1000\] .text-3xl.font-semibold,
.govee-mini-cart .fixed.z-\[1000\] .text-lg,
.govee-mini-cart .fixed.z-\[1000\] .max-md\:font-semibold {
    color: var(--govee-cyan) !important;
}

.govee-mini-cart .fixed.z-\[1000\] .border-zinc-200,
.govee-mini-cart .fixed.z-\[1000\] .border-b,
.govee-mini-cart .fixed.z-\[1000\] .border-t,
.govee-mini-cart .fixed.z-\[1000\] .max-md\:border-b,
.govee-mini-cart .fixed.z-\[1000\] .max-md\:border-t {
    border-color: var(--govee-border) !important;
}

/* Icons */
.govee-mini-cart .fixed.z-\[1000\] [class^="icon-"],
.govee-mini-cart .fixed.z-\[1000\] [class*=" icon-"],
.govee-mini-cart .fixed.z-\[1000\] .icon-cancel {
    color: var(--govee-muted) !important;
}

.govee-mini-cart .fixed.z-\[1000\] .icon-cancel:hover,
.govee-mini-cart .fixed.z-\[1000\] .icon-plus:hover,
.govee-mini-cart .fixed.z-\[1000\] .icon-minus:hover {
    color: var(--govee-cyan) !important;
}

/* Quantity +/- */
.govee-mini-cart .fixed.z-\[1000\] .border-navyBlue,
.govee-mini-cart .fixed.z-\[1000\] v-quantity-changer,
.govee-mini-cart .fixed.z-\[1000\] [class*="border-navyBlue"] {
    border-color: var(--govee-border) !important;
    background: var(--govee-card-2) !important;
    color: var(--govee-text) !important;
    border-radius: 0.5rem;
}

.govee-mini-cart .fixed.z-\[1000\] .icon-minus,
.govee-mini-cart .fixed.z-\[1000\] .icon-plus {
    color: var(--govee-text) !important;
}

/* Remove link */
.govee-mini-cart .fixed.z-\[1000\] .cursor-pointer.text-base {
    color: var(--govee-muted) !important;
}

.govee-mini-cart .fixed.z-\[1000\] .cursor-pointer.text-base:hover {
    color: var(--govee-cyan) !important;
}

/* Primary CTA — Continuar con el Pago */
.govee-mini-cart .fixed.z-\[1000\] a.bg-navyBlue,
.govee-mini-cart .fixed.z-\[1000\] .bg-navyBlue {
    background: linear-gradient(90deg, var(--govee-cyan), var(--govee-violet)) !important;
    color: var(--govee-bg) !important;
    border: none !important;
    font-weight: 600;
}

.govee-mini-cart .fixed.z-\[1000\] a.bg-navyBlue:hover,
.govee-mini-cart .fixed.z-\[1000\] .bg-navyBlue:hover {
    filter: brightness(1.08);
    color: var(--govee-bg) !important;
}

/* Ver Carrito */
.govee-mini-cart .fixed.z-\[1000\] .text-center a {
    color: var(--govee-muted) !important;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.govee-mini-cart .fixed.z-\[1000\] .text-center a:hover {
    color: var(--govee-cyan) !important;
}

/* Product thumbs */
.govee-mini-cart .fixed.z-\[1000\] img {
    border-radius: 0.5rem;
    background: var(--govee-card-2);
}

/* Empty state */
.govee-mini-cart .fixed.z-\[1000\] .text-xl {
    color: var(--govee-muted) !important;
}

/**
 * Desktop category mega-menu — always-loaded header chrome.
 * Closed panels used opacity-0 but still expanded document scrollWidth (~91px at 1280).
 * Hide with display:none until hover so they do not contribute to overflow;
 * hover restores the panel (existing opacity/transform classes still apply).
 */
header .group:not(:hover):not(:focus-within) > .govee-mega-panel {
    display: none !important;
}

header .group:hover > .govee-mega-panel,
header .group:focus-within > .govee-mega-panel {
    display: block !important;
    /* 100vw incluye scrollbar; restamos ~17px típicos de scrollbar clásica. */
    max-width: min(1260px, calc(100vw - 17px - 1.5rem));
}

/**
 * Category mega panels (Interior/Exterior): 2-column grid, viewport-capped.
 * Do not use overflow-x:auto here — that + w-max previously forced page scrollWidth.
 */
header .govee-mega-panel--categories {
    width: max-content;
    max-width: min(40rem, calc(100vw - 17px - 1.5rem)) !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    max-height: min(70vh, 720px);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--govee-border, #f3f3f3);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    background: #fff;
    box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.govee-mega-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 16rem));
    gap: 1.35rem 1.75rem;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.govee-mega-cat-cell {
    min-width: 0;
}

.govee-mega-cat-children {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

/**
 * Hover bridge — close the trigger→panel blind spot.
 * Panel is flush (top:100%); ::before extends upward so the mouse never
 * leaves .group while moving from the nav label into the panel.
 * Keep display:none when closed (do NOT use opacity-only; that reopens page overflow).
 */
header .group > .govee-mega-panel {
    top: 100% !important;
    transform: none !important;
}

header .group > .govee-mega-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

/* Subcategory rows: halo icon in rounded card frame + name */
.govee-mega-cat-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    min-width: 0;
}

.govee-mega-cat-media {
    flex: 0 0 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    padding: 6px;
    background: var(--govee-card-2, #101d33);
    border: 1px solid var(--govee-border, #1b2a44);
    border-radius: var(--govee-radius-md, 0.75rem);
    box-sizing: border-box;
    line-height: 0;
}

.govee-mega-cat-icon {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    object-position: center;
}

.govee-mega-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: break-word;
}

/**
 * Luces por Ambiente — panel estrecho (lista de rooms).
 * Mismo patrón display:none/hover vía .govee-mega-panel.
 * Acotar ancho y sin overflow-x para no empujar scrollWidth.
 */
header .govee-rooms-panel.govee-mega-panel {
    width: max-content;
    max-width: min(280px, calc(100vw - 17px - 1.5rem)) !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    max-height: min(480px, 70vh);
}

.govee-rooms-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
    min-width: 11rem;
    max-width: 100%;
}

.govee-rooms-panel__item {
    margin: 0;
    min-width: 0;
}

.govee-rooms-panel__link {
    display: block;
    font-family: var(--govee-font-sans, inherit);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
}

.govee-rooms-panel__link:hover,
.govee-rooms-panel__link:focus-visible {
    outline: none;
}

/* Mobile drawer rooms block */
.govee-mobile-rooms {
    margin: 0;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--govee-border, #1b2a44);
}

.govee-mobile-rooms__title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--govee-text, #f5f7fb);
}

a.govee-mobile-rooms__title {
    display: block;
    text-decoration: none;
    color: var(--govee-text, #f5f7fb);
}

a.govee-mobile-rooms__title:hover,
a.govee-mobile-rooms__title:focus-visible {
    color: var(--govee-cyan, #18c8ff);
    outline: none;
}

.govee-mobile-rooms__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.govee-mobile-rooms__link {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--govee-text, #f5f7fb);
}

.govee-mobile-rooms__link:hover,
.govee-mobile-rooms__link:focus-visible {
    color: var(--govee-cyan, #18c8ff);
    outline: none;
}

/**
 * Mobile hamburger drawer (.govee-mobile-nav) — ALWAYS dark.
 * Loaded globally (same pattern as .govee-mini-cart) so product pages and
 * other routes without main.govee-dark still get a dark panel.
 * Do NOT gate these rules on #app:has(main.govee-dark).
 */
.govee-mobile-nav .fixed.z-\[1000\] {
    background: var(--govee-card, #0b1628) !important;
    border-color: var(--govee-border, #1b2a44) !important;
    color: var(--govee-text, #f5f7fb) !important;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

@supports not (height: 100dvh) {
    .govee-mobile-nav .fixed.z-\[1000\] {
        height: 100vh;
        max-height: 100vh;
    }
}

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

/* Flex chain: panel fills viewport; one scrollable column for header+body+footer */
.govee-mobile-nav .fixed.z-\[1000\] > .pointer-events-auto.h-full {
    height: 100% !important;
    max-height: 100%;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

.govee-mobile-nav .fixed.z-\[1000\] .flex.h-full.w-full.flex-col {
    height: 100%;
    min-height: 0;
}

.govee-mobile-nav .fixed.z-\[1000\] .min-h-0.min-w-0.flex-1.overflow-auto {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Let inner column grow with content so the parent scrolls (do not lock to viewport) */
.govee-mobile-nav .fixed.z-\[1000\] .min-h-0 .flex.h-full.flex-col {
    height: auto !important;
    min-height: 100%;
}

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

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

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

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

.govee-mobile-nav .fixed.z-\[1000\] .icon-cancel:hover,
.govee-mobile-nav .fixed.z-\[1000\] a:hover {
    color: var(--govee-cyan, #18c8ff) !important;
}

.govee-mobile-nav .fixed.bottom-0.bg-white {
    background: var(--govee-card-2, #101d33) !important;
    border-color: var(--govee-border, #1b2a44) !important;
    color: var(--govee-text, #f5f7fb) !important;
}

/* Content slot: scroll body includes categories + rooms; pad for fixed footer if present */
.govee-mobile-nav .fixed.z-\[1000\] .flex-1.overflow-auto {
    padding-bottom: 4.5rem;
}

/* Hierarchy + halo icons (no card frame on mobile) */
.govee-mobile-cats__group {
    margin: 0 0 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--govee-border, #1b2a44);
}

.govee-mobile-cats__group:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.govee-mobile-cats__parent {
    margin: 0;
}

.govee-mobile-cats__parent-link {
    display: block;
    padding: 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--govee-text, #f5f7fb) !important;
}

.govee-mobile-cats__parent-link:hover {
    color: var(--govee-cyan, #18c8ff) !important;
}

.govee-mobile-cats__children {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    display: grid;
    gap: 0;
}

.govee-mobile-cats__child {
    margin: 0;
    min-width: 0;
}

.govee-mobile-cats__child-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.govee-mobile-cats__child-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.22rem 0;
    text-decoration: none;
}

/* Icon only — no rounded card frame (desktop mega menu keeps its frame) */
.govee-mobile-cats__media {
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    line-height: 0;
}

.govee-mobile-cats__icon {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    object-position: center;
}

.govee-mobile-cats__child-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
}

.govee-mobile-cats__back-label {
    font-size: 1rem;
    font-weight: 600;
}

.govee-mobile-rooms {
    margin: 0;
    padding: 0.75rem 1.5rem 1.25rem;
}

.govee-mobile-rooms__title {
    margin: 0 0 0.4rem;
}

.govee-mobile-rooms__link {
    padding: 0.35rem 0;
}