/*
 * Ficha de producto Govee — solo se carga en view.blade.php (no cart/checkout).
 * Scope: .govee-product-page + #app:has(.govee-product-page) para header.
 */

/* Canvas principal */
#main:has(.govee-product-page) {
    background: #07111F !important;
    color: #F5F7FB;
    /* Defensa: clip no crea scroll container (sticky OK), a diferencia de hidden. */
    overflow-x: clip;
}

.govee-product-page {
    background: #07111F;
    color: #F5F7FB;
    /* Contenedor de query para full-bleed sin 100vw (evita overflow por scrollbar). */
    container-name: govee-product;
    container-type: inline-size;
    overflow-x: clip;
    padding-bottom: 0;
}

/* Header integrado (solo cuando existe .govee-product-page en #main) */
#app:has(.govee-product-page) header {
    background: #07111F !important;
    border-color: #1B2A44 !important;
    box-shadow: none !important;
}

#app:has(.govee-product-page) header .border-b,
#app:has(.govee-product-page) header .border-t,
#app:has(.govee-product-page) header .border {
    border-color: #1B2A44 !important;
}

#app:has(.govee-product-page) v-topbar .flex.w-full,
#app:has(.govee-product-page) v-topbar > div {
    background: #07111F !important;
    border-color: #1B2A44 !important;
    color: #A9B4C7 !important;
}

#app:has(.govee-product-page) header a,
#app:has(.govee-product-page) header p,
#app:has(.govee-product-page) header span:not([class*="icon-"]) {
    color: #F5F7FB;
}

#app:has(.govee-product-page) header .text-navyBlue,
#app:has(.govee-product-page) header .font-medium.text-navyBlue {
    color: #18C8FF !important;
}

#app:has(.govee-product-page) header .text-black,
#app:has(.govee-product-page) header .text-gray-900 {
    color: #F5F7FB !important;
}

#app:has(.govee-product-page) header .text-zinc-600,
#app:has(.govee-product-page) header .text-gray-600 {
    color: #A9B4C7 !important;
}

#app:has(.govee-product-page) header .hover\:border-navyBlue:hover,
#app:has(.govee-product-page) header .border-navyBlue {
    border-color: #18C8FF !important;
}

#app:has(.govee-product-page) header input[type="text"] {
    background: #101D33 !important;
    border-color: #1B2A44 !important;
    color: #F5F7FB !important;
}

#app:has(.govee-product-page) header input[type="text"]::placeholder {
    color: #A9B4C7 !important;
}

#app:has(.govee-product-page) header .bg-zinc-100 {
    background: #101D33 !important;
}

#app:has(.govee-product-page) header .icon-search,
#app:has(.govee-product-page) header [class^="icon-"],
#app:has(.govee-product-page) header [class*=" icon-"] {
    color: #A9B4C7 !important;
}

#app:has(.govee-product-page) header .lg\:hidden.shadow-sm,
#app:has(.govee-product-page) header .flex-wrap.gap-4.px-4 {
    background: #07111F !important;
    box-shadow: none !important;
}

/*
 * Mega menú de categorías (desktop, ficha producto) — panel oscuro.
 * Mismo alcance que govee-shell.css (.bg-white.p-9 = solo categorías).
 */
#app:has(.govee-product-page) header .group-hover\:opacity-100.bg-white,
#app:has(.govee-product-page) header .bg-white.p-9 {
    background: var(--govee-card, #0C1728) !important;
    border-color: var(--govee-border, #1B2A44) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    color: var(--govee-text, #F5F7FB);
}

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

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

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

#app:has(.govee-product-page) header .bg-white.p-9 a:hover {
    color: var(--govee-cyan, #18C8FF) !important;
}

/*
 * Breadcrumb — mismo eje que .govee-product-top (Bagisto .container: max-width 1440 + margin auto).
 * No anular margin/max-width del .container (antes margin:0 + max-width:100% lo pegaba al borde).
 */
.govee-product-page__breadcrumb.govee-product-breadcrumb {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
    padding-bottom: 0.5rem;
    padding-top: 1.25rem;
    width: 100%;
}

/* El partial de Bagisto oculta breadcrumbs bajo lg; en ficha Govee sí se muestran. */
.govee-product-page__breadcrumb.govee-product-breadcrumb > div {
    display: flex !important;
    justify-content: flex-start;
    margin-top: 0 !important;
}

.govee-product-page__breadcrumb.govee-product-breadcrumb nav {
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
}

.govee-product-page__breadcrumb.govee-product-breadcrumb ol {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    row-gap: 0.25rem;
}

.govee-product-page__breadcrumb.govee-product-breadcrumb a,
.govee-product-page__breadcrumb.govee-product-breadcrumb li {
    color: #A9B4C7 !important;
}

.govee-product-page__breadcrumb.govee-product-breadcrumb li[aria-current="page"] {
    color: #F5F7FB !important;
}

.govee-product-page__breadcrumb.govee-product-breadcrumb .icon-arrow-right,
.govee-product-page__breadcrumb.govee-product-breadcrumb .icon-arrow-left {
    color: #1B2A44 !important;
}

@media (max-width: 1179px) {
    .govee-product-page__breadcrumb.govee-product-breadcrumb {
        padding-bottom: 0.25rem;
        padding-top: 0.875rem;
    }
}

@media (max-width: 639px) {
    .govee-product-page__breadcrumb.govee-product-breadcrumb {
        padding-bottom: 0.125rem;
        padding-top: 0.75rem;
    }

    /* Trail largo: wrap a varias líneas (sin scroll ni texto cortado). */
    .govee-product-page__breadcrumb.govee-product-breadcrumb nav {
        overflow-x: visible;
    }

    .govee-product-page__breadcrumb.govee-product-breadcrumb ol {
        align-items: center;
        column-gap: 0;
        flex-wrap: wrap;
        font-size: 0.75rem;
        line-height: 1.35;
        margin: 0;
        max-width: 100%;
        row-gap: 0.35rem;
        width: 100%;
    }

    .govee-product-page__breadcrumb.govee-product-breadcrumb li {
        flex-shrink: 1;
        font-size: 0.75rem !important; /* anula text-base del partial */
        font-weight: 500;
        gap: 0.375rem !important; /* anula gap-x-2.5 */
        line-height: 1.35;
        max-width: 100%;
        min-width: 0;
    }

    .govee-product-page__breadcrumb.govee-product-breadcrumb a,
    .govee-product-page__breadcrumb.govee-product-breadcrumb li[aria-current="page"] {
        overflow-wrap: anywhere;
        white-space: normal;
        word-break: break-word;
    }

    /* Separadores: visibles y con espacio al wrap; tamaño/contraste móvil. */
    .govee-product-page__breadcrumb.govee-product-breadcrumb .icon-arrow-right,
    .govee-product-page__breadcrumb.govee-product-breadcrumb .icon-arrow-left {
        color: #8B9BB0 !important;
        flex-shrink: 0;
        font-size: 0.8125rem !important; /* anula text-2xl */
        line-height: 1 !important;
        opacity: 1;
    }
}

/* Continuidad: zona superior ↔ Ficha Govee V3 */
.govee-product-page .govee-product-top {
    padding-bottom: 1rem !important;
    padding-top: 0 !important;
}

.govee-product-page .govee-product-top__layout {
    margin-top: 0 !important;
}

.govee-product-page .govee-body-v3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 2rem;
    padding-top: 0;
}

.govee-product-page .govee-body-v3__inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 1360px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1180px) {
    .govee-product-page .govee-body-v3__inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Tabs desktop */
.govee-product-page__tabs {
    margin-top: 0 !important;
    padding-bottom: 3rem;
    padding-top: 2rem;
}

.govee-product-page__tabs .mt-\[60px\] {
    margin-top: 1.5rem !important;
}

.govee-product-page__tabs .bg-zinc-100 {
    background: #0C1728 !important;
    border-bottom: 1px solid #1B2A44;
    border-radius: 1rem 1rem 0 0;
}

.govee-product-page__tabs [role="button"] {
    color: #A9B4C7 !important;
}

.govee-product-page__tabs [role="button"].border-navyBlue,
.govee-product-page__tabs [role="button"][class*="border-b-2"] {
    border-bottom-color: #18C8FF !important;
    color: #F5F7FB !important;
}

.govee-product-page__tabs .container {
    background: transparent !important;
}

.govee-product-page__tabs p.text-lg,
.govee-product-page__tabs .text-zinc-500 {
    color: #A9B4C7 !important;
}

.govee-product-page__tabs .text-black {
    color: #F5F7FB !important;
}

.govee-product-page__tabs .text-base {
    color: #A9B4C7;
}

.govee-product-page__tabs a {
    color: #18C8FF !important;
}

.govee-product-page__tabs .icon-download {
    color: #18C8FF !important;
}

/* Contenido tabs: descripción HTML */
.govee-product-page__tabs [id$="-tab"] p,
.govee-product-page__tabs [id$="-tab"] li,
.govee-product-page__tabs [id$="-tab"] td {
    color: #A9B4C7 !important;
}

.govee-product-page__tabs [id$="-tab"] h1,
.govee-product-page__tabs [id$="-tab"] h2,
.govee-product-page__tabs [id$="-tab"] h3,
.govee-product-page__tabs [id$="-tab"] h4,
.govee-product-page__tabs [id$="-tab"] strong {
    color: #F5F7FB !important;
}

/* Reseñas dentro de tabs */
.govee-product-page__tabs .bg-white,
.govee-product-page__tabs .bg-gray-100,
.govee-product-page__tabs .bg-zinc-100 {
    background: #101D33 !important;
}

.govee-product-page__tabs .border-zinc-200,
.govee-product-page__tabs .border-gray-200 {
    border-color: #1B2A44 !important;
}

.govee-product-page__tabs input,
.govee-product-page__tabs textarea,
.govee-product-page__tabs select {
    background: #101D33 !important;
    border-color: #1B2A44 !important;
    color: #F5F7FB !important;
}

.govee-product-page__tabs .primary-button {
    background: linear-gradient(90deg, #18C8FF, #7A5CFF) !important;
    border: none !important;
    color: #07111F !important;
}

.govee-product-page__tabs .secondary-button {
    background: transparent !important;
    border: 2px solid #18C8FF !important;
    color: #F5F7FB !important;
}

/* Acordeones mobile */
.govee-product-page__tabs-mobile {
    padding-bottom: 2.5rem;
    padding-top: 1rem;
}

.govee-product-page__tabs-mobile .border-zinc-200 {
    border-color: #1B2A44 !important;
}

.govee-product-page__tabs-mobile .bg-gray-100 {
    background: #0C1728 !important;
    border: 1px solid #1B2A44;
    border-radius: 0.85rem;
}

.govee-product-page__tabs-mobile .bg-gray-100 p {
    color: #F5F7FB !important;
}

.govee-product-page__tabs-mobile .bg-white {
    background: #101D33 !important;
    border-radius: 0 0 0.85rem 0.85rem;
}

.govee-product-page__tabs-mobile .text-zinc-500,
.govee-product-page__tabs-mobile .text-black {
    color: #A9B4C7 !important;
}

.govee-product-page__tabs-mobile [class*="text-black"] {
    color: #F5F7FB !important;
}

.govee-product-page__tabs-mobile .icon-arrow-up,
.govee-product-page__tabs-mobile .icon-arrow-down {
    color: #18C8FF !important;
}

.govee-product-page__tabs-mobile a {
    color: #18C8FF !important;
}

/* Zona superior de producto Govee (.govee-product-top) */

.govee-product-top {
    --govee-bg: #07111F;
    --govee-card: #0C1728;
    --govee-card-2: #101D33;
    --govee-border: #1B2A44;
    --govee-text: #F5F7FB;
    --govee-muted: #A9B4C7;
    --govee-cyan: #18C8FF;
    --govee-violet: #7A5CFF;
    background: transparent !important;
    color: #F5F7FB !important;
    isolation: isolate;
    padding-bottom: 2.5rem !important;
    padding-top: 2rem !important;
    position: relative;
}

.govee-product-top::before {
    /* Full-bleed del propio .govee-product-top (mismo color que #main / .govee-product-page).
     * Antes: width 100vw + translateX(-50%) desbordaba ~scrollbar en desktop clásico. */
    background: #07111F;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: -1;
}

.govee-product-top * {
    box-sizing: border-box;
}

/* Layout */
.govee-product-top__layout {
    align-items: flex-start;
    gap: 2rem !important;
}

@media (max-width: 1179px) {
    .govee-product-top__layout {
        gap: 1.25rem !important;
    }
}

/* Galería — card oscura vía wrapper (sin tocar gallery.blade.php) */
.govee-product-top__layout > v-product-gallery,
.govee-product-top__layout > *:first-child:not(.govee-product-top__details) {
    background: #0C1728 !important;
    border: 1px solid #1B2A44 !important;
    border-radius: 1.25rem !important;
    flex: 1 1 auto;
    max-width: 100%;
    padding: 1.25rem !important;
}

.govee-product-top .sticky {
    top: 5rem;
}

.govee-product-top .icon-arrow-up,
.govee-product-top .icon-arrow-down {
    color: #A9B4C7 !important;
}

.govee-product-top .border-white {
    border-color: #1B2A44 !important;
}

.govee-product-top .border-navyBlue {
    border-color: #18C8FF !important;
    box-shadow: 0 0 0 1px rgba(24, 200, 255, 0.25);
}

.govee-product-top .bg-zinc-200,
.govee-product-top .shimmer {
    background: #101D33 !important;
    background-image: linear-gradient(
        to right,
        #101D33 8%,
        #1B2A44 18%,
        #101D33 33%
    ) !important;
}

.govee-product-top img.rounded-xl,
.govee-product-top video.rounded-xl {
    border: 1px solid #1B2A44;
}

/* Panel detalles / compra */
.govee-product-top__details {
    background: #0C1728 !important;
    border: 1px solid #1B2A44 !important;
    border-radius: 1.25rem !important;
    padding: 1.75rem 2rem !important;
}

@media (max-width: 1180px) {
    .govee-product-top__details {
        padding: 1.25rem 1.5rem !important;
    }
}

@media (max-width: 640px) {
    .govee-product-top__details {
        padding: 1.15rem 1rem !important;
    }
}

/* Tipografía */
.govee-product-top h1,
.govee-product-top__details h1 {
    color: #F5F7FB !important;
}

.govee-product-top__details p,
.govee-product-top__details span,
.govee-product-top__details label {
    color: inherit;
}

.govee-product-top__details .text-zinc-500,
.govee-product-top__details .text-black,
.govee-product-top__details [class*="text-zinc"],
.govee-product-top__details [class*="text-gray"] {
    color: #A9B4C7 !important;
}

.govee-product-top__details .text-2xl,
.govee-product-top__details .text-lg,
.govee-product-top__details [class*="font-medium"]:not(.primary-button):not(.secondary-button) {
    color: #F5F7FB !important;
}

/* Precio destacado */
.govee-product-top__details p.mt-\[22px\],
.govee-product-top__details .mt-\[22px\] {
    color: #F5F7FB !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.govee-product-top__details p.mt-\[22px\] .text-zinc-500,
.govee-product-top__details p.mt-\[22px\] span {
    color: #F5F7FB !important;
}

.govee-product-top__details .text-zinc-500.max-sm\:text-xs {
    color: #A9B4C7 !important;
}

/*
 * Resumen superior (short_description / teaser).
 * No competir con el H1: tipografía menor, muted, lectura cómoda.
 */
.govee-product-top__summary {
    margin-top: 1.25rem;
    max-width: 36rem;
    color: var(--govee-muted, #A9B4C7);
    font-family: var(--govee-font-sans, Poppins, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--govee-text-sm, 0.875rem);
    font-weight: var(--govee-weight-regular, 400);
    line-height: var(--govee-leading-loose, 1.65);
    letter-spacing: 0.01em;
}

.govee-product-top__summary p,
.govee-product-top__summary ul,
.govee-product-top__summary ol {
    margin: 0 0 0.65rem;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.govee-product-top__summary p:last-child,
.govee-product-top__summary ul:last-child,
.govee-product-top__summary ol:last-child {
    margin-bottom: 0;
}

.govee-product-top__summary ul,
.govee-product-top__summary ol {
    padding-left: 1.1rem;
}

.govee-product-top__summary li {
    margin: 0 0 0.35rem;
    color: inherit;
}

.govee-product-top__summary li:last-child {
    margin-bottom: 0;
}

.govee-product-top__summary strong,
.govee-product-top__summary b {
    color: var(--govee-text, #F5F7FB);
    font-weight: var(--govee-weight-medium, 500);
}

.govee-product-top__summary a {
    color: var(--govee-cyan, #18C8FF);
    text-decoration: none;
}

.govee-product-top__summary a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .govee-product-top__summary {
        margin-top: 0.65rem;
        max-width: 100%;
        font-size: 0.8125rem;
        line-height: 1.6;
    }
}

/* Wishlist */
.govee-product-top__details .rounded-full.border.bg-white {
    background: #101D33 !important;
    border-color: #1B2A44 !important;
    color: #A9B4C7 !important;
}

.govee-product-top__details .icon-heart-fill.text-red-600 {
    color: #7A5CFF !important;
}

.govee-product-top__details .icon-heart {
    color: #18C8FF !important;
}

/* Rating */
.govee-product-top__details .text-amber-500 {
    color: #18C8FF !important;
}

.govee-product-top__details .border-zinc-300,
.govee-product-top__details .border-l {
    border-color: #1B2A44 !important;
}

.govee-product-top__details .icon-star-fill + span,
.govee-product-top__details .text-sm.font-medium.text-black {
    color: #F5F7FB !important;
}

/* Opciones configurables / tipos de producto */
.govee-product-top__details select,
.govee-product-top__details input[type="text"],
.govee-product-top__details input[type="number"] {
    background: #101D33 !important;
    border-color: #1B2A44 !important;
    color: #F5F7FB !important;
}

.govee-product-top__details .bg-white {
    background: #101D33 !important;
}

/* Acciones: cantidad + botones */
.govee-product-top__actions {
    margin-top: 0.25rem;
    max-width: 470px;
    width: 100%;
}

.govee-product-top__actions .border-navyBlue {
    background: #101D33 !important;
    border-color: #1B2A44 !important;
    border-radius: 0.85rem !important;
    color: #F5F7FB !important;
}

.govee-product-top__actions .icon-minus,
.govee-product-top__actions .icon-plus {
    color: #18C8FF !important;
}

.govee-product-top__actions p.text-center {
    color: #F5F7FB !important;
    font-weight: 600;
}

.govee-product-top__actions .primary-button {
    background: linear-gradient(90deg, #18C8FF, #7A5CFF) !important;
    border: none !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 8px 24px rgba(24, 200, 255, 0.2);
    color: #07111F !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.govee-product-top__actions .primary-button:hover {
    opacity: 0.92 !important;
}

.govee-product-top__actions .secondary-button {
    background: transparent !important;
    border: 2px solid #18C8FF !important;
    border-radius: 0.85rem !important;
    color: #F5F7FB !important;
    font-weight: 600 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.govee-product-top__actions .secondary-button:hover {
    background: rgba(24, 200, 255, 0.08) !important;
}

@media (max-width: 640px) {
    .govee-product-top__actions > .flex {
        flex-direction: column;
    }

    .govee-product-top__actions .primary-button,
    .govee-product-top__actions .secondary-button {
        min-height: 2.75rem;
    }
}

/* Comparar / acciones secundarias */
.govee-product-top__details .mt-10.flex {
    border-top: 1px solid #1B2A44;
    color: #A9B4C7 !important;
    margin-top: 2rem !important;
    padding-top: 1.25rem;
}

.govee-product-top__details .mt-10.flex .icon-compare {
    color: #18C8FF !important;
}

.govee-product-top__details .mt-10.flex [role="button"] {
    color: #A9B4C7 !important;
}

.govee-product-top__details .mt-10.flex [role="button"]:hover {
    color: #F5F7FB !important;
}

/* Enlaces dentro del panel */
.govee-product-top__details a:not(.govee-body-v3__btn) {
    color: #18C8FF !important;
}

/* Ofertas grupo cliente */
.govee-product-top__details .mt-2\.5 p {
    color: #A9B4C7 !important;
}

.govee-product-top__details .mt-2\.5 p * {
    color: #F5F7FB !important;
}

/* Mobile gallery (dentro del mismo wrapper) */
@media (max-width: 1179px) {
    .govee-product-top__layout > v-product-gallery,
    .govee-product-top__layout > *:first-child:not(.govee-product-top__details) {
        overflow: hidden;
        padding: 1rem !important;
        width: 100%;
    }
}

/* Navegación compacta por secciones (ficha Govee) */
html:has(.govee-product-page) {
    scroll-behavior: smooth;
}

.govee-section-nav {
    --govee-section-nav-height: 44px;
    background: #07111F;
    border-bottom: 1px solid #1B2A44;
    margin: 0 auto;
    max-width: 1280px;
    position: static;
    width: 100%;
}

.govee-section-nav__inner {
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 1.25rem;
}

@media (min-width: 768px) {
    .govee-section-nav {
        --govee-section-nav-height: 46px;
    }

    .govee-section-nav__inner {
        padding: 0 2.5rem;
    }
}

@media (min-width: 1180px) {
    .govee-section-nav__inner {
        padding: 0 3.75rem;
    }
}

.govee-section-nav__links {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    height: var(--govee-section-nav-height);
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
}

.govee-section-nav__links::-webkit-scrollbar {
    display: none;
}

.govee-section-nav__link {
    border-bottom: 2px solid transparent;
    color: #A9B4C7 !important;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.35rem 0;
    text-decoration: none !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}

@media (min-width: 768px) {
    .govee-section-nav__link {
        font-size: 14px;
        gap: 1.5rem;
    }
}

.govee-section-nav__link:hover,
.govee-section-nav__link:focus-visible {
    border-bottom-color: #18C8FF;
    color: #F5F7FB !important;
    outline: none;
}