/* ===== Mobile-first ajustes base ===== */
.header-wrap {
    z-index: 2000;
}

.header-inner {
    background: transparent;
}

#row1 {
    background: var(--gradientMain);
    opacity: 1;
}

#row2 {
    background: var(--gradientSecondary);
}

.logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#row1 .container-fluid {
    min-height: 70px;
}

/* El mega menú a pantalla completa en mobile */
#menuCategorias {
    position: fixed !important;
    top: 70px !important; /* coincide con altura mobile de row1 */
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    padding-bottom: 80px;
}

/* Offcanvas móvil simple (sin Bootstrap Offcanvas para no agregar dependencias extra) */
.offcanvas-nav {
    position: fixed;
    inset: 0 0 0 0; /* ocupa 70% ancho */
    transform: translateX(-100%);
    background: #555;
    color: #fff;
    z-index: 3000;
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}

    .offcanvas-nav.open {
        transform: translateX(0);
    }

.offcanvas-header {
    padding: 12px 14px;
    border-bottom: 1px solid #555;
}

.offcanvas-body {
    padding: 12px;
    overflow-y: auto;
}

.no-scroll {
    overflow: hidden;
}

/* Botones dentro del offcanvas */
.offcanvas-nav .bt {
    width: 100%;
    text-align: left;
}

/* Inputs en mobile un poco más altos */
input, .form-control, .bt.static {
    min-height: 40px;
}

/* El search desktop se oculta en mobile (ya tenemos el del offcanvas) */
@media (max-width: 991.98px) {
    .header-right {
        display: none !important;
    }

    nav.d-lg-block {
        display: none !important;
    }

    /* Fundir visualmente las dos filas: se apilan y parecen una sola barra */
    #row1 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #row2 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* Logo más chico en mobile */
    .logo-center img {
        height: 48px !important;
    }

    /* Cards de categorías en 2 por fila */
    #menuCategorias .row .col-sm-6,
    #menuCategorias .row .col-md-3,
    #menuCategorias .row .col-lg-2 {
        width: 45%;
        flex: 0 0 45%;
       
    }



    #menuCategorias .p15 {
        font-size: 11px !important;
    }
    /* Botones más compactos */
    .bt {
        padding: 10px 14px;
        margin: 0.3em;
      
    }

        .bt.static {
            padding: 8px 10px;
     
        }
}

/* ===== Desktop (≥992px) ===== */
@media (min-width: 992px) {
    /* Restaurar tus alturas/efectos originales */
    #row1 {
        height: 110px;
        background: var(--gradientMainTransparent);
        transition: background .3s;
    }

    #row2 {
        height: 55px;
        opacity: 1;
    }

    .row1-full {
        background: var(--gradientMain) !important;
    }

    .row2-full {
        opacity: 1 !important;
    }

    /* Logo centrado en desktop */
    .logo-center {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -10%);
    }

        .logo-center img {
            height: 80px !important;
        }

    /* Menú categorías como mega menú horizontal */
    #menuCategorias {
        top: 110px !important; /* encaja con row1 desktop */
        max-height: calc(100dvh - 110px);
    }

    /* Offcanvas no se usa en desktop */
    .offcanvas-nav {
        display: none !important;
    }

    /* Ajuste del main para el header fijo alto */
    body #mainContent {
        padding-top: 165px;
    }
    /* 110 + 55 */
}














/* ===== Correcciones puntuales ===== */

/* Evitar bug: este estilo rompía el color de links */
a {
    color: inherit;
}

/* Asegurar que los iconos no salten en móvil */
.bi {
    line-height: 1;
    display: inline-block;
}

/* Mega menú categorías en mobile por encima de todo */
#menuCategorias {
    position: fixed !important;
    top: 80px !important; /* ajustá a la altura real del header en móvil */
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    z-index: 4000; /* por encima del header (que tiene z-index:2000) y del offcanvas (3000) */
}

    #menuCategorias.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
/* Asegurate que NO quede con display:none; Bootstrap ya hace display:block con .show */

/* Popovers por encima de todo */
.popover {
    z-index: 4000 !important;
}

/* Botón hamburguesa mayor área táctil */
#btnMobileMenu {
    padding: 10px 12px;
    
}

/* Mejor scroll para contenedores grandes */
#menuCategorias::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar {
    width: 8px;
}

#menuCategorias::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 6px;
}

/* Botones de icono compactos en Row2 */
.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: transparent;
    text-decoration: none !important;
    transition: background .2s ease, transform .1s ease, opacity .2s ease;
}

    .icon-link:hover {
        background: rgba(255,255,255,.12);
        transform: translateY(-1px);
    }

    .icon-link:active {
        transform: translateY(0);
    }

    .icon-link i {
        line-height: 1;
    }

/* Un pelín más grandes en mobile para mejor tocabilidad */
@media (max-width: 991.98px) {
    .icon-link {
        width: 44px;
        height: 44px;
    }

  
}

.bt {
    max-width: 240px !important;
    font-size: 13px;
}

.buy {
    margin-right: 22px;
}

/* Carrito compacto en mobile: esconder texto y dejar icono/badge visibles */
/* Cart compacto en mobile: mostramos icono/badge y "apagamos" el texto */
@media (max-width: 991.98px) {
    .cart-compact {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0; /* oculta texto genérico sin tocar layout */
        line-height: 1;
    }
        /* Aseguramos visibilidad de íconos y badges */
        .cart-compact i,
        .cart-compact svg,
        .cart-compact img {
            font-size: 22px; /* restaura tamaño del icono si es fuente */
            width: auto;
            height: 22px; /* si es svg/img le damos alto estándar */
        }

        .cart-compact .badge,
        .cart-compact .count,
        .cart-compact [data-badge] {
            font-size: 12px !important; /* vuelve a mostrar el número */
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }
}

/* ==== PATCH VISUAL HEADER ==== */

/* 1) Carrito: que no se corte el monto y quede alineado */
@media (max-width: 991.98px) {
    /* el contenedor del carrito no limita ancho ni recorta */
    .cart-compact {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        overflow: visible;
        max-width: none;
        white-space: nowrap;
        font-size: 0; /* oculta textos "extra" sin tocar iconos */
    }
        /* icono del carrito */
        .cart-compact i,
        .cart-compact svg,
        .cart-compact img {
            font-size: 22px; /* si es icon font */
            height: 22px; /* si es svg/img */
            width: auto;
            line-height: 1;
        }
        /* vuelve a MOSTRAR el monto (cubre nombres habituales) */
        .cart-compact .cart-amount,
        .cart-compact .amount,
        .cart-compact .total,
        .cart-compact .price,
        .cart-compact .cart-total,
        .cart-compact [data-amount],
        .cart-compact [data-total] {
            font-size: 13px !important;
            line-height: 1;
            letter-spacing: .2px;
            padding-left: 6px; /* un poquito de aire – evita “corte visual” */
            display: inline-block;
        }
}

/* 2) Bajar 5px los 3 iconitos de la IZQ (Row2) */
#row2 .icon-link {
    margin-top: 7px !important;
    padding-top: 5px;
}

/* 3) Burger 15% más grande */
#btnMobileMenu {
    width: 48px; /* área táctil cómoda */
    height: 44px;
}

    #btnMobileMenu i {
        font-size: 1.6rem; /* ~15% mayor que el default */
        line-height: 1;
    }

/* 4) Logo 20% más grande (mobile + desktop) */
@media (max-width: 991.98px) {
    .logo-center img {
        height: 58px !important; /* antes ~48px */
    }
}

@media (min-width: 992px) {
    .logo-center img {
        height: 96px !important; /* antes 80px */
    }
}

/* (extra) asegura que el contenedor de la derecha no aplaste el carrito */
@media (max-width: 991.98px) {
    #row2 .d-flex.d-lg-none.align-items-center {
        flex: 0 0 auto; /* no lo contraigas demasiado */
    }
}

/* === Ajustes finos header === */

/* a) Bajamos 4px extra los 3 íconos de la IZQ (total: ~9px) */
#row2 .icon-link {
    margin-top: 9px;
}

/* b) Quitar hover feo de TODOS los iconos (incluye login/registro) */
.icon-link {
    transition: none !important;
}

    .icon-link:hover,
    .icon-link:focus {
        background: transparent !important;
        transform: none !important;
        opacity: 1 !important;
    }

/* c) Mover el logo 25px a la izquierda */
.logo-center {
    left: calc(50% - 5px) !important;
}
/* anula .start-50 de Bootstrap */

/* ===== FOOTER – patch responsive & polish ===== */

/* 0) Fix color de fondo (variable correcta) */
.site-footer {
    background: var(--gradientMain) !important;
    color: #fff;
}

/* 1) Grid responsive */
.footer-columns {
    display: grid;
    grid-template-columns: 1fr; /* mobile: 1 columna */
    gap: 24px;
}

@media (min-width: 768px) {
    .footer-columns {
        grid-template-columns: 1.2fr 1fr; /* tablet: 2 columnas */
    }
}

@media (min-width: 1200px) {
    .footer-columns {
        grid-template-columns: 2fr 1.1fr 1.1fr; /* desktop: 3 columnas */
    }
}

/* 2) Espaciado y tamaños más amables en mobile */
.site-footer {
    padding: 48px 0 24px;
}

@media (max-width: 767.98px) {
    .site-footer {
        padding: 36px 0 20px;
        clip-path: polygon(0 3%, 100% 0%, 100% 100%, 0% 100%); /* menos “corte” en mobile */
    }

    .footer-columns > div > div {
        min-height: auto !important;
    }

    .site-footer img[alt="Logo"] {
        max-height: 80px !important;
    }
}

/* 3) Enlaces y listas */
.site-footer a {
    color: #ddd;
    text-decoration: none;
}

    .site-footer a:hover {
        color: #fff;
        text-decoration: underline;
    }

.site-footer .list-unstyled li + li {
    margin-top: 8px;
}

/* 4) Iconos de pago (más prolijos, con wrap) */
.payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

    .payment-icons img {
        max-height: 28px;
        filter: invert(1) contrast(1.05);
        opacity: .9;
        transition: opacity .2s ease;
    }

        .payment-icons img:hover {
            opacity: 1;
        }

/* 5) Iconos sociales (alineación y hover sutil) */
.social-icons a {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.social-icons i {
    line-height: 1;
}

.social-icons a:hover i {
    filter: brightness(1.2);
}

/* 6) Fila inferior centrada y limpia */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: 16px;
    text-align: center;
    font-size: .9rem;
}

/* 7) Email partido en 3 (alineación) */
.align-icon-text {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}


/* === Soporte fino para <= 399px === */

/* Ajustes generales para todo <400px */
@media (max-width: 399.98px) {
    /* Mega menú no tape el header en móviles chicos */
    #menuCategorias {
        top: 66px !important;
    }

    /* Offcanvas un poco más ancho para caber textos cómodos */
    .offcanvas-nav {
        inset: 0 16% 0 0;
    }
    /* ~84% ancho */

    /* Grilla de categorías a 2 por fila */
    #menuCategorias .row .col-sm-6,
    #menuCategorias .row .col-md-3,
    #menuCategorias .row .col-lg-2 {
        width: 50%;
        flex: 0 0 50%;
    }
}

/* Ultra-pequeños: 320–359px */
@media (max-width: 359.98px) {
    /* Logo un toque más contenido (ya lo subimos antes) */
    .logo-center img {
        height: 52px !important;
    }

    /* Burger con buen área táctil y legibilidad */
    #btnMobileMenu {
        width: 50px;
        height: 46px;
    }
    .icon-link {
        width: 30px;
        height: 32px;
    }

    .p18 {
        font-size: 14px;
    }

        #btnMobileMenu i {
            font-size: 1.8rem;
        }

    /* Offcanvas aun más ancho para no cortar textos */
    .offcanvas-nav {
        inset: 0 0 0 0;
    }
    /* ~92% ancho */

    /* Iconitos un pelín más abajo */
    #row2 .icon-link {
        margin-top: 10px;
    }

    .icon-link {
        width: 28px;
        height: 34px;
    }

    #menuCategorias {
        top: 80px !important;
    }

    .offcanvas-nav {
        inset: 0 0 0 0;
    }
}

/* iPhone 6/7/8/SE / 375px */
@media (min-width: 360px) and (max-width: 374.98px) {
    .logo-center img {
        height: 56px !important;
    }

    .icon-link {
        width: 32px ;
        height: 38px;
    }

    #menuCategorias {
        top: 80px !important;
    }

    .offcanvas-nav {
        inset: 0 0 0 0;
    }
    /* ~88% ancho */
    .p18 {
        font-size: 14px;
    }


    #menuCategorias .row .col-sm-6, #menuCategorias .row .col-md-3, #menuCategorias .row .col-lg-2 {
        width: 40%;
        flex: 0 0 40%;
    }
}

/* 375–399px (muchos iPhone/Android compactos) */
@media (min-width: 375px) and (max-width: 399.98px) {
    .logo-center img {
        height: 58px !important;
    }

    .offcanvas-nav {
        inset: 0 16% 0 0;
    }
    /* ~84% ancho */
}