/* ========================================
   1. IMPORTS Y FUENTES
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600&display=swap');

/* ========================================
   2. VARIABLES Y ROOT
   ======================================== */
:root {
    /* Aquí puedes agregar variables CSS custom */
}

[data-bs-theme="dark"] {
    /* Variables para modo oscuro */
}

/* ========================================
   3. ESTILOS GLOBALES
   ======================================== */
/* Loading Cursor - Dot Pulse */
.loading-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

[data-bs-theme="light"] .loading-cursor {
    background: rgba(30, 30, 30, 0.85);
}

.loading-cursor.show {
    opacity: 1;
    visibility: visible;
}

.loading-cursor .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1877f2;
    animation: dotPulse 1s ease-in-out infinite;
}

.loading-cursor .dot:nth-child(1) {
    animation-delay: 0s;
}

.loading-cursor .dot:nth-child(2) {
    animation-delay: 0.12s;
}

.loading-cursor .dot:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}
.pesoArs {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
}
.arrowDown-svg {
    width: 14px;
    height: 14px;
}
.pac-container {
    z-index: 999999 !important;
}

.flatpickr-day {
    color: inherit !important;
}

body[data-theme="dark"] .flatpickr-monthDropdown-months {
    color: #fff !important;
}

body[data-theme="light"] .flatpickr-monthDropdown-months {
    color: #000 !important;
}

/* Prevenir scroll cuando modales están abiertos */
body.cart-open,
body.promociones-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* Sticky footer: el footer siempre queda al fondo aunque el contenido sea corto */
main.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#ecom-footer{
    border-radius: 40px 40px 0 0;
}
.ecommerce-homepage {
    flex: 1;
    padding: 1.2rem 0 !important;
}

/* ========================================
   4. COMPONENTES UI - NAVBAR
   ======================================== */
ul#navbarIcons svg {
    height: 23px;
    width: 23px;
    margin: 0 6px;
}
.categorias-ver-todas {
    position: fixed;
    top: 7px;
    right: 9px;
    background: var(--phoenix-body-bg);
}

.marcas-ver-todas {
    position: fixed;
    bottom: 0;
    text-align: center;
    left: 0;
    width: 100%;
    background: var(--phoenix-body-bg);
}
ul#navbarIcons i {
    font-size: 20px;
}
.icon-indicator-number {
    right: 2.5px;
    top: 0.5px;
}

.icon-indicator::before {
    position: absolute;
    content: "";
    right: 2px;
    top: -2px;
}

/* ========================================
   5. CATEGORÍAS Y MARCAS
   ======================================== */
/* Mega-menu Categorias — layout masonry (CSS columns).
   Cada card se alinea verticalmente y rellena huecos automaticamente,
   eliminando el espacio vacio que dejaba el flexbox cuando hay categorias
   con cantidades muy distintas de subcategorias. */
.categorias-masonry {
    column-count: 4;
    column-gap: 20px;
    column-fill: balance;
    width: 920px;
    max-height: 660px;
    overflow-y: auto;
    padding: 8px 12px 8px 4px;
    margin-bottom: 0;
}

/* Responsive: en pantallas mas chicas reducimos columnas */
@media (max-width: 1199px) {
    .categorias-masonry {
        column-count: 3;
        width: 720px;
    }
}
@media (max-width: 991px) {
    .categorias-masonry {
        column-count: 2;
        width: 520px;
    }
}

.category-main {
    /* Evita que la card se parta entre columnas */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    /* inline-block + width:100% es el truco para que break-inside funcione consistentemente
       en Chrome/Firefox/Safari */
    display: inline-block;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 10px 14px 8px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    background: var(--phoenix-body-bg);
    /* Reset de los borders dotted del layout viejo */
    min-width: 0;
}

/* Lista de subcategorias dentro de la card: sin scroll interno (la card se expande lo que necesite). */
.category-main .ms-n2 {
    max-height: none;
    overflow: visible;
    width: auto;
}

div#contenedor-marcas a {
    padding: 4px 0;
    font-size: 15px;
    margin: 0 auto;
}

/* ========================================
   6. BUSCADOR Y SUGERENCIAS
   ======================================== */
div#sugerenciasBusqueda {
    left: 0;
    margin-top: 3px;
    height: 706px;
    max-height: 88vh;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
}

#search-context-filter {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

#search-context-filter .form-check {
    margin-bottom: 0;
}

#search-context-filter .form-check-label {
    color: #495057;
    cursor: pointer;
    user-select: none;
}

#search-context-filter .form-check-label strong {
    color: #0d6efd;
}

.search-suggestion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease-in-out;
}

.search-suggestion-item:last-of-type {
    border-bottom: none;
}

.search-suggestion-item:hover {
    background-color: #f8f9fa;
}

#search-results-container {
    /* Sin scroll propio: el scroll vive en .search-dropdown-modern (padre).
       Asi se evita el doble-scrollbar visualmente feo. */
    overflow: visible;
    position: relative;
}

#sugerenciasBusqueda.show {
    animation: fadeInDown 0.2s ease-out;
}

.search-box.has-context #main-searcher {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.25);
}

.search-context-badge {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-size: 0.75rem;
    background-color: #e7f3ff;
    color: #0d6efd;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    pointer-events: none;
    z-index: 5;
}

/* ========================================
   7. WISHLIST / FAVORITOS
   ======================================== */
div#wishlist-list {
    max-height: 500px;
    overflow: auto;
}

.wishlist-item {
    position: relative;
}

button.btn.btn-sm.btn-link.text-danger.remove-wish {
    position: absolute;
    right: 0;
    top: 7px;
}

button.btn.btn-wish.btn-wish-primary.z-2.d-toggle-container.active {
    background: #be3434c2 !important;
    color: #ffe1e1 !important;
    border: 0;
}

button.wish-it.active {
    background: #842626;
}

/* ========================================
   8. PROFILE DROPDOWN
   ======================================== */
.profile-dropdown-menu {
    min-width: 320px;
}

.profile-dropdown-menu .avatar-name {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-dropdown-menu .list-group-item {
    border: none;
    transition: all 0.2s;
}

.profile-dropdown-menu .list-group-item:hover {
    background-color: var(--phoenix-gray-100);
}

.profile-dropdown-menu .list-group-item i {
    text-align: center;
}
.avatar-name svg {
    height: 40px !important;
    width: 40px !important;
}

.profile-dropdown-menu .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}
#profile-level-points svg{
    height: 14px !important;
    width: 14px !important;
}
/* ========================================
   8. CARRITO WIDGET
   ======================================== */
.cart-dropdown-menu {
    min-width: 420px;
}

.cart-dropdown-menu svg {
    width: 15px !important;
    margin: 0 !important;
}
.cart-widget-item.border-bottom {
    border-color: #2e2e2e !important;
}

.widget-qty-group svg {
    height: 14px !important;
    width: 14px !important;
}

.cart-widget-card {
    max-width: 100%;
}

.cart-widget-body {
    max-height: 400px;
    overflow-y: auto;
}

.cart-widget-item:hover {
    background-color: var(--bs-gray-100);
}

.cart-widget-item .widget-qty-input {
    max-width: 40px;
    padding: 0.25rem 0.25rem;
}

.cart-widget-item .input-group-sm .btn {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
}

.widget-product-img {
    width: 60px;
    height: 60px;
}
a#widget-btn-checkout svg{
    height: 12px !important;
}
/* ========================================
   9. PROMOCIONES
   ======================================== */
.promociones-dropdown-menu {
    width: 400px;
    max-width: 90vw;
}

.promociones-widget-body {
    max-height: 533px;
    overflow-y: auto;
}

.promociones-widget-body .promo-bar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-bottom: 0;
}

.promociones-widget-body .promo-bar:last-child {
    border-bottom: none;
}

.promo-bar {
    background: var(--phoenix-body-bg);
    border: 1px solid #dee2e6 !important;
    transition: all 0.3s ease;
}

.promo-bar:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transform: translateY(-2px);
}

.promo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 50%;
}

.promociones-producto {
    background: rgba(25, 135, 84, 0.05);
    border-left: 3px solid #198754;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    overflow: hidden;
}

.promociones-producto .fa-layer-group {
    color: #198754;
}

.promociones-producto .fs-10 {
    font-size: 0.7rem;
    opacity: 0.9;
}

.dbm-product:hover .promociones-producto {
    background: rgba(25, 135, 84, 0.1);
}

.promociones-producto[data-bs-toggle="tooltip"] {
    cursor: help;
}

.promocion-no-aplicable {
    opacity: 0.6;
    font-style: italic;
}

.producto-con-promos-acumuladas {
    position: relative;
}

.producto-con-promos-acumuladas::before {
    content: "🎉";
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1.2rem;
    z-index: 10;
    animation: bounce 2s ease-in-out infinite;
}

.btn-promos-toggle {
    background: #ff0d0d87;
    color: #f66;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #b70000;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    transition: background .4s, transform .4s;
}

.btn-promos-toggle:hover {
    transform: scale(1.03);
    filter: hue-rotate(254deg);
}

/* ========================================
   10. PRODUCTOS
   ======================================== */
img.m-prd-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 36px;
}

.product-ranking span {
    max-width: 100%;
    white-space: normal;
    text-align: right;
    filter: opacity(0.8);
}

.precio-producto .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    font-weight: 600;
}

.swiper-zoom-container {
    cursor: zoom-in;
}

/* Product cards — mobile optimization */
@media (max-width: 575.98px) {
    .dbm-product {
        padding: 0.4rem !important;
    }
    .dbm-product .m-prd {
        margin-bottom: 0.5rem !important;
        border-radius: 0.5rem !important;
    }
    .dbm-product .product-name {
        font-size: 0.78rem !important;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }
    .dbm-product .fs-9 {
        font-size: 0.7rem !important;
        margin-bottom: 0.25rem !important;
    }
    .dbm-product .precio-producto {
        margin-bottom: 0.25rem;
    }
    .dbm-product .precio-producto h5 {
        font-size: 1rem !important;
    }
    .dbm-product .precio-producto .text-decoration-line-through {
        font-size: 0.7rem;
    }
    .dbm-product .precio-producto .badge {
        font-size: 0.65rem;
        padding: 0.2em 0.45em;
    }
    .dbm-product .promociones-producto {
        padding: 0.3rem;
        margin-top: 0.25rem !important;
    }
    .dbm-product .btn-wish {
        width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dbm-product .btn-wish i {
        font-size: 0.85rem;
    }
}

/* ========================================
   11. BANNERS Y THEMES
   ======================================== */
.banner-section-banner2,
.banner-section-banner3 {
    border-radius: 22px;
}

img.banner-section-footer {
    max-height: 484px;
}

.banner-section-banner2,
.banner-section-banner3,
.banner-section-banner_principal,
.banner-section-footer {
    max-width: 100%;
    transition: opacity 0.3s ease-in-out;
}

.banner-section-banner_principal,
.banner-section-footer {
    width: 100%;
}



.banner-section-publi2 {
    min-height: 200px;
}

/* ========================================
   12. SKELETON LOADERS
   ======================================== */
.skeleton-loader {
    position: relative;
    overflow: hidden;
    background-color: #27313a54;
    border-radius: 4px;
}

.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
}

.skeleton-banner-main {
    min-height: 500px;
}

.skeleton-banner {
    min-height: 360px;
}

.skeleton-publi {
    min-height: 200px;
}

.skeleton-footer {
    min-height: 400px;
}

.image-error-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
}

/* ========================================
   13. SWEETALERT2 DARK MODE
   ======================================== */
html[data-bs-theme=dark] .swal2-html-container,
html[data-bs-theme=dark] .swal2-title {
    color: #f0f0f0 !important;
}

html[data-bs-theme=dark] div:where(.swal2-container) div:where(.swal2-popup),
html[data-bs-theme=dark] div:where(.swal2-container) .swal2-select {
    background-color: #211e1e;
}

/* ========================================
   14. UTILIDADES
   ======================================== */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badge.bg-danger {
    animation: pulse-badge 2s ease-in-out infinite;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* ========================================
   15. ANIMACIONES
   ======================================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ========================================
   16. MEDIA QUERIES - MOBILE
   ======================================== */
@media (max-width: 575.98px) {
    /* Promociones mobile (only when bottom nav NOT active) */
    body:not(.bottomnav-active) .promociones-dropdown-menu {
        border: none !important;
        box-shadow: none !important;
    }
    body:not(.bottomnav-active) .navbar .dropdown-menu.dropdown-menu-end.navbar-dropdown-caret{
        right: 0 !important;
        left: auto !important;
    }
    body:not(.bottomnav-active) .promociones-widget-card {
        border-radius: 0;
        height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
    }

    body:not(.bottomnav-active) .promociones-widget-body {
        max-height: none;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Carrito mobile (only when bottom nav NOT active) */
    body:not(.bottomnav-active) .cart-dropdown-menu {
        min-width: 100vw;
        max-width: 100vw;
        border: none;
        border-radius: 0;
    }

    body:not(.bottomnav-active) .cart-widget-card {
        border-radius: 0;
        height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
    }

    body:not(.bottomnav-active) .cart-widget-body {
        flex: 1;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .widget-product-img {
        width: 50px;
        height: 50px;
    }

    .cart-widget-item .widget-qty-group {
        width: 90px;
    }

    .cart-widget-item .btn {
        padding: 0.125rem 0.375rem;
    }

    /* Font sizes mobile */
    .fs-sm-5 { font-size: 1.25rem !important; }
    .fs-sm-6 { font-size: 1rem !important; }
    .fs-sm-7 { font-size: 0.875rem !important; }
    .fs-sm-8 { font-size: 0.8125rem !important; }
    .fs-sm-9 { font-size: 0.75rem !important; }
    .fs-sm-10 { font-size: 0.625rem !important; }
}

/* ========================================
   17. MEDIA QUERIES - TABLET
   ======================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .cart-dropdown-menu {
        min-width: 380px;
    }

    .promo-bar:hover {
        background-color: var(--bs-gray-100);
    }
}

@media (max-width: 768px) {
    #sugerenciasBusqueda {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        margin-left: 1rem;
        margin-right: 1rem;
        width: calc(100% - 2rem);
    }

    #search-results-container {
        /* Mobile: idem desktop, scroll en el padre (.search-dropdown-modern) */
        max-height: none;
    }
}
/* ========================================
   17. NAVBAR STICKY
   ======================================== */
.ecommerce-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--phoenix-body-bg);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.navbar-spacing {
    height: 80px; /* Compensar el espacio del navbar fijo */
}

/* Navbar: no ocultar en scroll (deshabilitado) */

.navbar-mobile-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1031;
    background: #3030307d;
    color: white;
    border: none;
    border-radius: 24px;
    width: 61px;
    height: 61px;;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: all 0.3s ease;
}

.navbar-mobile-toggle img {
    width: 60px;
    height: 61px;
    border-radius: 0;
    object-fit: contain;
}
.navbar-nav .nav-link.show {
    background: #424242;
    border-radius: 13px;
    color: white;
}

.ecommerce-topbar img.banner-section-logo {
    width: 80px;
}
.navbar-mobile-toggle.show {
    display: flex;
    animation: fadeInDown 0.3s ease;
}

/* Navbar expandido móvil */
.navbar-mobile-expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--phoenix-body-bg);
    z-index: 1030;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.navbar-mobile-expanded.show {
    transform: translateX(0);
}

/* Header del navbar móvil */
.navbar-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--phoenix-border-color);
    position: sticky;
    top: 0;
    background: var(--phoenix-body-bg);
    z-index: 10;
}

.navbar-mobile-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--phoenix-body-color);
    padding: 0.5rem;
}

/* Contenido móvil */
.navbar-mobile-content {
    padding: 1rem;
}

.navbar-mobile-section {
    margin-bottom: 2rem;
}

.navbar-mobile-section h6 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: var(--phoenix-text-muted);
}
/* Mobile promociones */
.promociones-mobile-list {
    max-height: 300px;
    overflow-y: auto;
}

.promociones-mobile-list .promo-bar {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
}

.promociones-mobile-list .promo-icon {
    width: 32px;
    height: 32px;
}

/* Theme switcher mobile */
.navbar-mobile-section .form-switch {
    transform: scale(0.9);
}

/* Badge de promociones */
#mobile-promo-toggle .badge {
    font-size: 0.625rem;
    min-width: 18px;
    padding: 0.2em 0.4em;
}
/* Desktop - hacer sticky el navbar inferior también */
@media (min-width: 992px) {
    .navbar-responsive-navitems {
        position: fixed;
        top: var(--topbar-height, 85px);
        left: 0;
        right: 0;
        z-index: 1029;
        background: var(--phoenix-body-bg);
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
        transition: all 0.3s ease;
    }

    .navbar-spacing {
        height: var(--navbar-total-height, 130px);
    }

}

/* Mobile */
@media (max-width: 991.98px) {
    .navbar-responsive-navitems {
        display: none !important; /* Ocultar navbar inferior en móvil */
    }

    .navbar-spacing {
        height: 70px;
    }

    /* Ajustar padding del navbar en móvil */
    .ecommerce-topbar .container-small {
        padding: 0.5rem 1rem;
    }

    /* navbar-collapsed deshabilitado */
}

/* Animación suave para transiciones */
.navbar-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================
   18. MEDIA QUERIES - DESKTOP
   ======================================== */
@media (min-width: 576px) {
    .promo-bar:hover {
        background-color: var(--bs-gray-100);
    }
}

/* ========================================
   19. GALLERY EMBLA
   ======================================== */
.embla--listado .embla__slide:last-child{
    padding-right: 10px !important;
}.embla--similares .embla__slide:last-child {
     padding-right: 10px !important;
 }
.embla--similares .product-card-image{
    height: 170px;
}
.embla--listado .product-card-image{
    height: 170px;
}

/* ========================================
   20. BUSCADOR PRINCIPAL - SISTEMA MODERNO
   ======================================== */

/* Botón de filtros en el buscador */
.search-filters-btn {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 6px;
    color: var(--phoenix-body-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    z-index: 10;
}

.search-filters-btn:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: rgba(24, 119, 242, 0.4);
    color: #1877f2;
}

.search-filters-btn.active {
    background: rgba(24, 119, 242, 0.15);
    border-color: #1877f2;
    color: #1877f2;
}

/* Ajustar input para dar espacio al botón */
#main-searcher {
    padding: 10px 30px 10px 50px !important;
}

/* Dropdown moderno del buscador.
   Altura generosa, scrollbar interno discreto. Cuando esta abierto bloqueamos
   el scroll del body (clase .search-open en body) para evitar el doble-scrollbar. */
.search-dropdown-modern {
    border-radius: 12px !important;
    border: 1px solid rgba(24, 119, 242, 0.2) !important;
    background: var(--phoenix-body-bg) !important;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    padding: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,0.4) transparent;
}
.search-dropdown-modern::-webkit-scrollbar { width: 6px; }
.search-dropdown-modern::-webkit-scrollbar-track { background: transparent; }
.search-dropdown-modern::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.4); border-radius: 3px; }
.search-dropdown-modern::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.6); }

/* Cuando el dropdown del buscador esta abierto, bloquear scroll del body para evitar
   que se vea la scrollbar de la pagina junto a la del dropdown (doble scrollbar). */
body.search-dropdown-open {
    overflow: hidden;
}

/* Panel de filtros de búsqueda */
.search-filters-panel {
    padding: 12px 16px;
    background: rgba(24, 119, 242, 0.05);
    border-bottom: 1px solid rgba(24, 119, 242, 0.1);
}

.search-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--phoenix-body-color);
    opacity: 0.6;
}

.search-filter-chip input {
    display: none;
}

.search-filter-chip i {
    font-size: 0.7rem;
}

.search-filter-chip.active {
    background: rgba(24, 119, 242, 0.15);
    border-color: rgba(24, 119, 242, 0.4);
    color: #1877f2;
    opacity: 1;
}

.search-filter-chip:hover {
    border-color: rgba(24, 119, 242, 0.5);
    opacity: 1;
}

/* Context filter */
.search-context-filter {
    padding: 10px 16px;
    background: rgba(255, 193, 7, 0.08);
    border-bottom: 1px solid rgba(255, 193, 7, 0.15);
}

.search-context-filter .form-check-label {
    font-size: 0.8rem;
}

/* Quick matches section */
#search-quick-matches {
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.search-section {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

.search-section:last-child {
    border-bottom: none;
}

.search-section-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-section-header i {
    color: #1877f2;
    font-size: 0.65rem;
}

.search-section-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-section-inline {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px !important;
}

/* Match items (categorías, marcas) */
.search-match-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--phoenix-body-color);
    transition: all 0.15s ease;
}

.search-match-item:hover {
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
}

.search-match-item i {
    width: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.search-match-item:hover i {
    color: #1877f2;
}

.search-match-name {
    flex: 1;
    font-size: 0.85rem;
}

.search-match-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.search-brand-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    background: white;
    padding: 2px;
}

/* Atributos chips */
.search-attr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 15px;
    text-decoration: none;
    color: var(--phoenix-body-color);
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.search-attr-chip:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: rgba(24, 119, 242, 0.4);
    color: #1877f2;
}

.search-attr-chip .attr-type {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
}

.search-attr-chip .attr-value {
    font-weight: 500;
}

.search-attr-chip .attr-count {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
}

/* Modelos chips */
.search-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(100, 100, 255, 0.1);
    border: 1px solid rgba(100, 100, 255, 0.2);
    border-radius: 15px;
    text-decoration: none;
    color: var(--phoenix-body-color);
    font-size: 0.75rem;
    font-family: monospace;
    transition: all 0.15s ease;
}

.search-model-chip:hover {
    background: rgba(100, 100, 255, 0.2);
    border-color: rgba(100, 100, 255, 0.4);
}

.search-model-chip .model-count {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
}

/* Productos header */
.search-products-header {
    padding: 12px 16px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

.search-products-header i {
    color: #1877f2;
    font-size: 0.65rem;
}

.search-products-header .text-muted {
    font-weight: 400;
    text-transform: none;
}

/* Producto item en búsqueda */
.search-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--phoenix-body-color);
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(128, 128, 128, 0.05);
}

.search-product-item:hover {
    background: rgba(24, 119, 242, 0.08);
}

.search-product-item:last-of-type {
    border-bottom: none;
}

.search-product-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.search-product-info {
    flex: 1;
    min-width: 0;
}

.search-product-title {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-product-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.search-product-brand {
    font-size: 0.7rem;
    color: #1877f2;
    font-weight: 500;
}

.search-product-model {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
}

.search-product-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1877f2;
    margin-top: 4px;
    display: block;
}

/* Ver todos link — sticky bottom para no requerir scroll */
.search-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--phoenix-body-bg, #1a1d29);
    text-decoration: none;
    color: #1877f2;
    font-weight: 600;
    font-size: 0.85rem;
    border-top: 1px solid rgba(24, 119, 242, 0.25);
    transition: all 0.2s ease;
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}

.search-view-all:hover {
    background: rgba(24, 119, 242, 0.15);
    color: #1877f2;
}

.search-view-all i {
    transition: transform 0.2s ease;
}

.search-view-all:hover i {
    transform: translateX(4px);
}

/* No results */
.search-no-results {
    padding: 30px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.search-no-results i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.3;
}

.search-no-results p {
    margin: 0 0 4px;
    font-size: 0.9rem;
}

.search-no-results small {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Highlight de búsqueda */
.search-dropdown-modern mark {
    background: rgba(24, 119, 242, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* ========================================
   21. BUSCADOR - RESPONSIVE MÓVIL
   ======================================== */
@media (max-width: 767px) {
    .search-dropdown-modern {
        position: fixed !important;
        top: 126px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 140px);
        border-radius: 12px !important;
        z-index: 1050;
        /* Override del transform de Bootstrap dropdown — sino se desplaza a la derecha */
        transform: none !important;
        margin: 0 !important;
        inset: auto !important;
    }

    /* When bottomnav active, navbar is compact ~56px */
    body.bottomnav-active .search-dropdown-modern {
        top: 60px !important;
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
    }

    .search-filters-panel {
        padding: 10px 12px;
    }

    .search-filter-chip {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    .search-section {
        padding: 10px 12px;
    }

    .search-product-item {
        padding: 8px 12px;
        gap: 10px;
    }

    .search-product-img {
        width: 45px;
        height: 45px;
    }

    .search-product-title {
        font-size: 0.8rem;
    }

    .search-attr-chip,
    .search-model-chip {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .search-match-item {
        padding: 6px 10px;
    }

    .search-match-name {
        font-size: 0.8rem;
    }

    .search-filters-btn {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
        right: 26px;
        left: unset;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .search-dropdown-modern {
        max-width: 500px;
    }
}

/* ========================================
   NAVBAR AVATAR
   ======================================== */
.nav-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--phoenix-primary), #6366f1);
    color: white;
    font-size: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-avatar.has-avatar {
    background: transparent;
    border: 2px solid var(--phoenix-primary);
}

.nav-avatar.has-inicial {
    font-weight: 600;
}

.nav-avatar-inicial {
    line-height: 1;
}

/* Dropdown avatar */
#dropdown-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

#dropdown-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 767px) {
    .nav-avatar {
        font-size: 0.7rem;
    }
}

/* ========================================
   25. MOBILE BOTTOM NAVIGATION BAR
   ======================================== */

/* Bottom Nav Bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: 56px;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    background: var(--phoenix-body-bg);
    border-top: 1px solid var(--phoenix-border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding-top: 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    /* GPU layer + prevent Chrome mobile browser chrome gap */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s ease;
}

/* Items */
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 4px 8px;
    min-width: 56px;
    cursor: pointer;
    color: var(--phoenix-tertiary-color);
    transition: color 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item.active,
.bottom-nav-item:active {
    color: var(--phoenix-primary);
}

.bottom-nav-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.15rem;
}

.bottom-nav-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

/* Elevated item (carrito) */
.bottom-nav-item-elevated .bottom-nav-icon-wrap {
    width: 44px;
    height: 44px;
    margin-top: -18px;
    background: var(--phoenix-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: 0 2px 12px rgba(var(--phoenix-primary-rgb, 59, 130, 246), 0.35);
}

.bottom-nav-item-elevated.active .bottom-nav-icon-wrap,
.bottom-nav-item-elevated:active .bottom-nav-icon-wrap {
    background: var(--phoenix-primary);
    filter: brightness(1.15);
}

.bottom-nav-item-elevated .bottom-nav-label {
    margin-top: -2px;
}

/* Badges */
.bottom-nav-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #e63946;
    border-radius: 8px;
}

.bottom-nav-item-elevated .bottom-nav-badge {
    top: -2px;
    right: -2px;
}

/* Bottom Nav Avatar */
.bottom-nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--phoenix-primary), #6366f1);
    color: white;
    font-size: 0.55rem;
}

.bottom-nav-avatar.has-avatar {
    background: transparent;
    border: 2px solid var(--phoenix-primary);
}

.bottom-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bottom-nav-avatar .nav-avatar-inicial {
    font-weight: 600;
    font-size: 0.65rem;
}

/* Body padding when bottom nav is active */
@media (max-width: 991.98px) {
    body.bottomnav-active {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Hide top navbar items that are now in bottom nav */
    body.bottomnav-active [data-bottomnav-hide="true"] {
        display: none !important;
    }

    /* Hide floating mobile toggle when bottom nav active */
    body.bottomnav-active .navbar-mobile-toggle {
        display: none !important;
    }

    /* Hide entire topbar and spacing on mobile — replaced by bottom nav */
    body.bottomnav-active .ecommerce-topbar,
    body.bottomnav-active .navbar-spacing {
        display: none !important;
    }

    /* Logo icon in bottom nav */
    .bottom-nav-logo-img {
        width: 26px;
        height: 26px;
        object-fit: contain;
        border-radius: 4px;
    }

    /* Hide bottom nav when virtual keyboard is open */
    body.bottomnav-active.keyboard-open .mobile-bottom-nav {
        transform: translateY(100%);
        pointer-events: none;
    }

    body.bottomnav-active.keyboard-open {
        padding-bottom: 0;
    }

    /* Chatbot: hide floating trigger on mobile — accessed via "Mas" panel instead */
    body.bottomnav-active .chatbot-widget .chatbot-trigger-btn {
        display: none !important;
    }

    /* Chatbot window: full-screen over everything including bottom nav */
    body.bottomnav-active .chatbot-widget .chatbot-window-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        z-index: 1060;
    }

    /* ========================================
       FULLSCREEN SEARCH OVERLAY (mobile)
       ======================================== */
    .mobile-search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1055;
        background: var(--phoenix-body-bg, #fff);
        display: flex;
        flex-direction: column;
        animation: fadeIn 0.15s ease-out;
    }

    .mobile-search-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 12px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        border-bottom: 1px solid var(--phoenix-border-color, #e0e6ed);
        flex-shrink: 0;
    }

    .mobile-search-header .search-input-wrap {
        flex: 1;
        position: relative;
    }

    .mobile-search-header .search-input-wrap input {
        width: 100%;
        border: 1px solid var(--phoenix-border-color, #e0e6ed);
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 16px; /* Prevents iOS zoom */
        background: var(--phoenix-body-bg, #fff);
        color: var(--phoenix-body-color, #2c3e50);
        outline: none;
    }

    .mobile-search-header .search-input-wrap input:focus {
        border-color: var(--phoenix-primary, #3874ff);
        box-shadow: 0 0 0 2px rgba(56, 116, 255, 0.15);
    }

    .mobile-search-close-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        color: var(--phoenix-body-color, #2c3e50);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .mobile-search-close-btn:active {
        background: var(--phoenix-gray-200, #edf2f9);
    }

    .mobile-search-results {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    /* Reuse existing search-dropdown-modern styles inside overlay */
    .mobile-search-results .search-dropdown-modern {
        position: static !important;
        display: block !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        max-height: none !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* Theme toggle switch in Mas panel */
    .mas-theme-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        margin: 0 12px 12px;
        border-radius: 12px;
        background: var(--phoenix-gray-100, #f9fafd);
        border: 1px solid var(--phoenix-border-color, #e0e6ed);
    }


    .mas-theme-toggle-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 500;
        color: var(--phoenix-body-color);
    }

    .mas-theme-toggle-label i {
        font-size: 16px;
    }

    .mas-theme-switch {
        position: relative;
        width: 52px;
        height: 28px;
        flex-shrink: 0;
    }

    .mas-theme-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .mas-theme-switch .switch-track {
        position: absolute;
        inset: 0;
        border-radius: 14px;
        background: #fbbf24;
        transition: background 0.3s ease;
        cursor: pointer;
    }

    .mas-theme-switch input:checked + .switch-track {
        background: #6366f1;
    }

    .mas-theme-switch .switch-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .mas-theme-switch input:checked + .switch-track .switch-thumb {
        transform: translateX(24px);
    }

    .mas-theme-switch .switch-icon-sun,
    .mas-theme-switch .switch-icon-moon {
        transition: opacity 0.2s ease;
    }

    .mas-theme-switch .switch-icon-sun {
        color: #f59e0b;
        opacity: 1;
    }

    .mas-theme-switch input:checked + .switch-track .switch-icon-sun {
        opacity: 0;
    }

    .mas-theme-switch .switch-icon-moon {
        color: #818cf8;
        opacity: 0;
        position: absolute;
    }

    .mas-theme-switch input:checked + .switch-track .switch-icon-moon {
        opacity: 1;
    }
}

/* ========================================
   26. SLIDE-UP PANEL
   ======================================== */

/* Backdrop */
.slide-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slide-panel-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* Panel */
.slide-up-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 85vh;
    max-height: 85dvh;
    background: var(--phoenix-body-bg);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.slide-up-panel.open {
    transform: translateY(0);
}

/* Handle */
.slide-panel-handle {
    width: 36px;
    height: 4px;
    background: var(--phoenix-tertiary-color);
    border-radius: 2px;
    margin: 8px auto 0;
    opacity: 0.4;
}

/* Header */
.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--phoenix-border-color);
    flex-shrink: 0;
}

.slide-panel-title {
    font-size: 1rem;
    font-weight: 600;
}

/* Body */
.slide-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Body scroll lock when panel is open */
body.slide-panel-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
}

/* Hide chatbot when slide panel is open */
body.slide-panel-open .chatbot-widget {
    display: none;
}

/* Panel cart layout */
.slide-panel-cart {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide-panel-cart-items {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.slide-panel-cart-footer {
    border-top: 1px solid var(--phoenix-border-color);
    padding: 12px 16px;
    flex-shrink: 0;
    background: var(--phoenix-body-bg);
}

/* Panel categorias */
.slide-panel-categorias .categorias-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Panel promos */
.slide-panel-promos {
    max-height: 70vh;
    overflow-y: auto;
}

/* Panel marcas */
.slide-panel-marcas .marcas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Panel Más (Explorar) */
.mas-panel-section {
    padding: 0 16px 16px;
}

.mas-panel-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--phoenix-tertiary-color);
    padding: 12px 0 8px;
    margin: 0;
}

.mas-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mas-panel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 6px 12px;
    border-radius: 12px;
    background: var(--phoenix-body-highlight-bg);
    border: 1px solid var(--phoenix-border-color);
    text-decoration: none;
    color: var(--phoenix-body-color);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mas-panel-item:hover,
.mas-panel-item:active {
    background: var(--phoenix-primary-bg-subtle);
    border-color: var(--phoenix-primary);
    color: var(--phoenix-primary);
    text-decoration: none;
}

.mas-panel-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--phoenix-primary-bg-subtle);
    color: var(--phoenix-primary);
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
}

.mas-panel-item:hover .mas-panel-icon,
.mas-panel-item:active .mas-panel-icon {
    background: var(--phoenix-primary);
    color: #fff;
}

.mas-panel-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.mas-panel-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mas-panel-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    color: var(--phoenix-body-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.mas-panel-link:hover,
.mas-panel-link:active {
    background: var(--phoenix-body-highlight-bg);
    color: var(--phoenix-body-color);
    text-decoration: none;
}

.mas-panel-link i {
    width: 20px;
    text-align: center;
    color: var(--phoenix-tertiary-color);
}

.mas-panel-social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
}

.mas-panel-social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--phoenix-body-color);
    transition: transform 0.15s;
}

.mas-panel-social-item:hover {
    transform: scale(1.1);
    text-decoration: none;
    color: var(--phoenix-body-color);
}

.mas-panel-social-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--phoenix-primary-bg-subtle, rgba(59,130,246,0.1));
    color: var(--phoenix-primary);
    font-size: 1.1rem;
    transition: background 0.15s, color 0.15s;
}

.mas-panel-social-item:hover .mas-panel-social-icon {
    background: var(--phoenix-primary);
    color: #fff;
}

.mas-panel-social-label {
    font-size: 0.7rem;
    font-weight: 600;
}

/* Panel perfil */
.slide-panel-perfil .card-header {
    border-bottom: 1px solid var(--phoenix-border-color);
}

.slide-panel-perfil .card-footer {
    border-top: 1px solid var(--phoenix-border-color);
    padding: 12px;
}

.slide-panel-perfil .list-group-item {
    padding: 12px 16px;
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════
   Scroll to Top Button
   ═══════════════════════════════════════════ */
.scroll-to-top {
    position: fixed;
    bottom:90px;
    right: 16px;
    z-index: 1035;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--phoenix-primary, #3874ff);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.85);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top:active {
    transform: scale(0.9);
}

/* When bottom nav is active, raise above it */
@media (max-width: 991.98px) {
    body.bottomnav-active .scroll-to-top {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    }
}
/* ============================================================
   Navbar listados — scroll horizontal con flechas (refactor 2026-04-29)
   Reemplaza el flex desbordable por un viewport scrolleable con flechas
   adaptativas y fade gradient en los bordes para indicar overflow.
   Aplica solo a desktop (≥992px); mobile sigue usando dropdown "Más".
   ============================================================ */
/* Forzamos al <ul.navbar-nav> contenedor a permitir shrink — sin esto su flex-grow-1
   se expande según contenido y el scroller jamás detecta overflow. */
.navbar-responsive-navitems .navbar-nav {
    min-width: 0;
}
.navbar-listados-scroller {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    /* flex: 1 1 0 — clave para que el <li> ocupe el espacio disponible del padre
       sin expandirse según contenido interno. Sin esto, el <li> crece con el track. */
    flex: 1 1 0;
    gap: .25rem;
}
.navbar-listados-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / legacy Edge */
    /* flex: 1 1 0 + min-width:0 + width:0 — patrón estándar para que un flex-item
       NO se expanda con su contenido. Solo así el viewport detecta overflow del track. */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    /* Fade gradient en bordes — indica que hay más contenido en esa dirección.
       Se controla con clases .has-overflow-left / .has-overflow-right que
       el JS toggle según la posición de scroll. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 0, black 100%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 0, black 100%, transparent 100%);
}
.navbar-listados-viewport::-webkit-scrollbar {
    display: none; /* Chromium/WebKit */
}
.navbar-listados-scroller.has-overflow-left .navbar-listados-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black 100%, black 100%);
            mask-image: linear-gradient(to right, transparent 0, black 32px, black 100%, black 100%);
}
.navbar-listados-scroller.has-overflow-right .navbar-listados-viewport {
    -webkit-mask-image: linear-gradient(to right, black 0, black 100%, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black 100%, black calc(100% - 32px), transparent 100%);
}
.navbar-listados-scroller.has-overflow-left.has-overflow-right .navbar-listados-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}
.navbar-listados-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content; /* Permite que el contenido empuje el scroll horizontal */
}
.navbar-listados-track .nav-item {
    flex: 0 0 auto;
}
.navbar-listados-track .nav-link {
    white-space: nowrap;
    padding: .5rem .75rem;
}
/* Flechas — solo aparecen cuando hay overflow en esa dirección. */
.navbar-listados-arrow {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--phoenix-border-color, rgba(255,255,255,.12));
    background: var(--phoenix-body-emphasis-bg, var(--phoenix-emphasis-bg, rgba(0,0,0,.4)));
    color: var(--phoenix-body-color);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity .15s, background .15s;
    padding: 0;
    line-height: 1;
}
.navbar-listados-arrow:hover {
    background: var(--phoenix-tertiary-bg, rgba(255,255,255,.08));
}
.navbar-listados-arrow i {
    font-size: .75rem;
    pointer-events: none;
}
.navbar-listados-scroller.has-overflow-left .navbar-listados-arrow-left {
    display: flex;
}
.navbar-listados-scroller.has-overflow-right .navbar-listados-arrow-right {
    display: flex;
}

/* ============================================================
   Fondo personalizado de la web (refactor 2026-04-29)
   themes.js setea data-bg-mode="cover" + CSS variable --home-bg-image
   en el <body> cuando el theme tiene una sección 'bg'. Esto aplica a
   TODA la web (no solo el home), por eso vive en common.css.
   ============================================================ */
body[data-bg-mode="tile"] {
    background-image: var(--home-bg-image);
    background-repeat: repeat;
}
body[data-bg-mode="cover"] {
    background-image: var(--home-bg-image);
    background-size: cover;
    background-position: center top;
    background-attachment: scroll; /* fixed cripplea perf en mobile */
}
@media (min-width: 992px) {
    body[data-bg-mode="cover"] {
        background-attachment: fixed;
    }
}