/* Variantes aisladas del encabezado. La lógica y el contenido son compartidos. */
body[class*="cc-template-demo"] .header {
    position: relative;
    z-index: 1000;
}

body[class*="cc-template-demo"] .header .logo img {
    max-height: 58px;
    object-fit: contain;
}

/* Diseño con acceso principal al catálogo por departamentos. */
.cc-template-demo22 .header-bottom { background: #fff; border-top: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; }
.cc-template-demo22 .header-bottom .menu > li:first-child > a {
    background: var(--cc-action-blue, #24c2ff);
    border-radius: 5px;
    color: var(--cc-action-blue-text, #102a3a);
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}
.cc-template-demo22 .header-bottom .menu > li:first-child > a::before {
    content: "\f0c9";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: .7rem;
}
.cc-template-demo22 .header-middle { box-shadow: none; }

/* Diseño con buscador amplio y acciones resaltadas. */
@media (min-width: 992px) {
    .cc-template-demo35 .header-middle .header-left { flex: 0 0 18%; max-width: 18%; }
    .cc-template-demo35 .header-middle .header-right { flex: 1; }
    .cc-template-demo35 .header-middle .header-search { flex: 1; margin-right: 2rem; max-width: none; }
    .cc-template-demo35 .header-middle .header-search-wrapper { width: 100%; }
}
.cc-template-demo35 .header-middle { background: #f8fafc; padding-top: 1rem; padding-bottom: 1rem; }
.cc-template-demo35 .header-search-wrapper { border: 2px solid var(--cc-action-blue, #24c2ff); border-radius: 7px; }
.cc-template-demo35 .header-bottom { box-shadow: 0 4px 12px rgba(31,45,61,.07); }


/* Estructura estable para submenús simples en todos los diseños admitidos. */
.header-bottom .menu > li:not(.megamenu-container) { position: relative; }
.header-bottom .menu > li:not(.megamenu-container) > ul {
    background: var(--cc-menu-submenu-background, #fff);
    border: 1px solid var(--cc-menu-submenu-border, #eee);
    box-shadow: 0 8px 24px rgba(31, 45, 61, .12) !important;
    left: 0;
    min-width: 220px;
    padding: .7rem 0;
    top: 100%;
    transform: translateY(8px);
}
.header-bottom .menu > li:not(.megamenu-container):hover > ul,
.header-bottom .menu > li:not(.megamenu-container):focus-within > ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.header-bottom .menu > li:not(.megamenu-container) > ul > li > a {
    display: block;
    line-height: 1.35;
    padding: .9rem 1.5rem;
    white-space: normal;
}

/* En móvil todas las variantes conservan una estructura estable y usable. */
@media (max-width: 991px) {
    body[class*="cc-template-demo"] .header-middle { min-height: 62px; }
    body[class*="cc-template-demo"] .header-middle .logo { position: static; transform: none; }
    body[class*="cc-template-demo"] .header-middle .logo img { max-height: 42px; width: auto; }
}

/* La barra inferior se ancla al borde real del viewport móvil. Evita el salto
 * de top: 100% + translateY cuando el navegador cambia su altura al desplazarse. */
@media (max-width: 575px) {
    .sticky-navbar,
    .sticky-navbar.fixed {
        bottom: 0;
        top: auto;
        transform: none;
    }

    .sticky-navbar {
        backface-visibility: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transition: opacity .15s ease, visibility .15s ease, left .25s ease;
    }
}

/* Acciones compactas y simétricas en el aviso de carrito para escritorio. */
@media (min-width: 992px) {
    .minipopup-box .product-action {
        display: flex;
        gap: 8px;
    }

    .minipopup-box .product-action .btn {
        flex: 1 1 0;
        float: none !important;
        font-size: 10px !important;
        letter-spacing: .01em;
        min-width: 0;
        padding: 10px 6px;
        white-space: nowrap;
    }
}

/* Aviso visible únicamente en la vista previa firmada. */
.cc-template-preview-notice {
    background: #172331;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: .65rem 1rem;
    position: relative;
    text-align: center;
    z-index: 1100;
}