/**
 * CSS Personalizado - DoceVoltios Camper
 * Sobrescribe todos los estilos del tema y módulos
 * Este archivo se carga al final para tener máxima prioridad
 */

/* ==========================================================================
   GOOGLE FONTS - FIRA SANS CONDENSED
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   VARIABLES DE COLOR - PALETA DOCEVOLTIOS CAMPER
   ========================================================================== */

:root {
    /* Fuente principal */
    --dv-font: 'Fira Sans Condensed', sans-serif;

    /* Colores principales de marca */
    --dv-yellow: #ffcd00;
    --dv-yellow-dark: #e6b800;
    --dv-yellow-light: #ffe44d;

    --dv-green: #5fad48;
    --dv-green-dark: #4a8a39;
    --dv-green-light: #7bc466;

    --dv-black: #000000;
    --dv-dark: #1a1a1a;
    --dv-gray-dark: #3a3a3a;
    --dv-gray: #666666;
    --dv-gray-light: #999999;

    --dv-white: #ffffff;
    --dv-off-white: #f5f5f5;

    /* Colores de acento */
    --dv-accent: var(--dv-yellow);
    --dv-accent-hover: var(--dv-yellow-dark);

    /* Sombras */
    --dv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --dv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --dv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Transiciones */
    --dv-transition: all 0.3s ease;
}

/* ==========================================================================
   APLICAR FUENTE FIRA SANS CONDENSED
   ========================================================================== */

body,
html,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
input,
button,
select,
textarea,
a {
    font-family: 'Fira Sans Condensed', sans-serif !important;
}

/* Megamenu y navegación */
.cbp-hrmenu,
.cbp-hrmenu .nav-link,
.cbp-hrmenu a,
.iqitmegamenu,
.hamburger-btn,
.categories-sidebar,
.search-widget input {
    font-family: 'Fira Sans Condensed', sans-serif !important;
}

/* ==========================================================================
   LOGO RESPONSIVE
   ========================================================================== */

#desktop_logo img.logo,
#desktop_logo .logo.img-fluid,
.header-top .logo.img-fluid {
    max-width: 670px !important;
    width: auto !important;
    height: auto !important;
}

.header-top {
    padding: 0;
}

#desktop_logo {
    max-width: 670px !important;
}

#desktop_logo a {
    display: inline-block !important;
}

@media (max-width: 992px) {

    #desktop_logo img.logo,
    #desktop_logo .logo.img-fluid,
    .header-top .logo.img-fluid {
        max-width: 450px !important;
    }

    #desktop_logo {
        max-width: 450px !important;
    }
}

@media (max-width: 768px) {

    #desktop_logo img.logo,
    #desktop_logo .logo.img-fluid,
    .header-top .logo.img-fluid,
    #mobile_logo img.logo,
    .mobile-header .logo.img-fluid {
        max-width: 280px !important;
    }

    #desktop_logo,
    #mobile_logo {
        max-width: 280px !important;
    }
}

@media (max-width: 480px) {

    #desktop_logo img.logo,
    #desktop_logo .logo.img-fluid,
    .header-top .logo.img-fluid,
    #mobile_logo img.logo,
    .mobile-header .logo.img-fluid {
        max-width: 200px !important;
    }

    #desktop_logo,
    #mobile_logo {
        max-width: 200px !important;
    }
}

/* ==========================================================================
   MEGAMENU CON BUSCADOR - FULL WIDTH BACKGROUND
   ========================================================================== */

.megamenu-fullwidth-bg {
    background: #000000 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.megamenu-search-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 50px !important;
}

.megamenu-search-row .megamenu-nav-col {
    flex: 1 !important;
    min-width: 0 !important;
}

.megamenu-fullwidth-bg .sticky-desktop-wrapper,
.megamenu-fullwidth-bg #iqitmegamenu-wrapper,
.megamenu-fullwidth-bg .iqitmegamenu-wrapper,
.megamenu-fullwidth-bg .container-iqitmegamenu,
.megamenu-fullwidth-bg #iqitmegamenu-horizontal,
.megamenu-fullwidth-bg .iqitmegamenu {
    background: transparent !important;
    padding: 0 !important;
}

/* ==========================================================================
   OCULTAR CASITA (HOME ICON) DEL MENÚ
   ========================================================================== */

/* Ocultar ítem de Home con casita */
.cbp-hrmenu-tab.cbp-onlyicon,
.cbp-hrmenu-tab-1.cbp-onlyicon,
#cbp-hrmenu-tab-1 {
    display: none !important;
}

/* ==========================================================================
   ESTILOS DEL MENÚ
   ========================================================================== */

.megamenu-fullwidth-bg .cbp-hrmenu .nav-link,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li>a,
.megamenu-nav-col .cbp-hrmenu .nav-link,
.megamenu-nav-col .cbp-hrmenu>ul>li>a {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 15px 14px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.megamenu-fullwidth-bg .cbp-hrmenu .nav-link:hover,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li>a:hover,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li:hover>a,
.megamenu-nav-col .cbp-hrmenu .nav-link:hover,
.megamenu-nav-col .cbp-hrmenu>ul>li:hover>a {
    background: #ffcd00 !important;
    color: #000000 !important;
}

.megamenu-fullwidth-bg .cbp-hrmenu>ul,
.megamenu-fullwidth-bg .cbp-hrmenu ul,
.megamenu-nav-col .cbp-hrmenu>ul {
    background: transparent !important;
}

.megamenu-fullwidth-bg .cbp-mainlink-icon,
.megamenu-nav-col .cbp-mainlink-icon {
    color: #ffcd00 !important;
}


/* ==========================================================================
   HAMBURGER BUTTON - CATEGORÍAS
   ========================================================================== */

.hamburger-categories-col {
    flex: 0 0 auto !important;
    padding-right: 15px !important;
}

.hamburger-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffcd00 !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 4px !important;
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.hamburger-btn:hover {
    background: #5fad48 !important;
    color: #ffffff !important;
}

.hamburger-btn i {
    font-size: 18px !important;
}

.hamburger-text {
    display: inline-block;
}

@media (max-width: 1100px) {
    .hamburger-text {
        display: none;
    }

    .hamburger-btn {
        padding: 12px 14px !important;
    }
}

/* ==========================================================================
   BUSCADOR DENTRO DEL MEGAMENU - MÁS ANCHO
   ========================================================================== */

.megamenu-search-row .megamenu-search-col {
    flex: 0 0 auto !important;
    width: 300px !important;
    /* Aumentado de 350px a 450px */
    padding: 8px 0 8px 20px !important;
    display: flex !important;
    align-items: center !important;
}

.megamenu-search-col #search_widget,
.megamenu-search-col .search-widget {
    width: 100% !important;
    margin: 0 !important;
}

.megamenu-search-col .search-widget form {
    margin: 0 !important;
}

.megamenu-search-col .search-widget .input-group {
    background: #ffffff !important;
    border-radius: 25px !important;
    /* Más redondeado */
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: stretch !important;
}

.megamenu-search-col .search-widget .input-group:hover,
.megamenu-search-col .search-widget .input-group:focus-within {
    border-color: #ffcd00 !important;
    box-shadow: 0 4px 15px rgba(255, 205, 0, 0.3) !important;
}

.megamenu-search-col .search-widget .form-control,
.megamenu-search-col .search-widget .form-search-control,
.megamenu-search-col .search-widget input[type="text"] {
    border: none !important;
    background: transparent !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    color: #272929 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 44px !important;
    flex: 1 !important;
}

.megamenu-search-col .search-widget .form-control::placeholder,
.megamenu-search-col .search-widget input[type="text"]::placeholder {
    color: #888888 !important;
    font-style: italic !important;
}

.megamenu-search-col .search-widget .search-btn,
.megamenu-search-col .search-widget button[type="submit"] {
    background: #ffcd00 !important;
    border: none !important;
    padding: 12px 22px !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 25px 25px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.megamenu-search-col .search-widget .search-btn:hover,
.megamenu-search-col .search-widget button[type="submit"]:hover {
    background: #5fad48 !important;
    color: #ffffff !important;
}

.megamenu-search-col .search-widget .search-btn i,
.megamenu-search-col .search-widget button[type="submit"] i {
    font-size: 18px !important;
}

.megamenu-search-col .autocomplete-suggestions {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 0 15px 15px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    margin-top: 5px !important;
}

/* ==========================================================================
   CATEGORIES SIDEBAR
   ========================================================================== */

.categories-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.categories-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.categories-sidebar {
    position: fixed;
    top: 0;
    left: -350px;
    width: 350px;
    max-width: 90vw;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.categories-sidebar.active {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.categories-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #000000;
    color: #ffffff;
    flex-shrink: 0;
}

.categories-sidebar-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffcd00;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.categories-sidebar-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.categories-sidebar-close:hover {
    color: #ffcd00;
    transform: rotate(90deg);
}

.categories-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.categories-sidebar-content .block-categories,
.categories-sidebar-content #ps_categorytree,
.categories-sidebar-content .block_newsletter {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.categories-sidebar-content .block-categories .category-top-menu,
.categories-sidebar-content .category-sub-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.categories-sidebar-content .block-categories a,
.categories-sidebar-content .category-sub-menu a {
    display: block !important;
    padding: 14px 20px !important;
    color: #272929 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.2s ease !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.categories-sidebar-content .block-categories a:hover,
.categories-sidebar-content .category-sub-menu a:hover {
    background: #fff8e0 !important;
    color: #000000 !important;
    padding-left: 25px !important;
}

.categories-sidebar-content .category-sub-menu .category-sub-menu a {
    padding-left: 35px !important;
    font-size: 14px !important;
    color: #666666 !important;
    font-weight: 400 !important;
}

.categories-sidebar-content .category-sub-menu .category-sub-menu a:hover {
    padding-left: 40px !important;
    background: #f5f5f5 !important;
}

.categories-sidebar-content .category-sub-menu .category-sub-menu .category-sub-menu a {
    padding-left: 50px !important;
    font-size: 13px !important;
}

.categories-sidebar-content .arrows,
.categories-sidebar-content .collapse-icons {
    float: right;
    cursor: pointer;
    padding: 0 10px;
    color: #999999;
    transition: all 0.2s ease;
}

.categories-sidebar-content .arrows:hover,
.categories-sidebar-content .collapse-icons:hover {
    color: #ffcd00;
}

.categories-sidebar-content .block-categories .h6,
.categories-sidebar-content .block-categories h5 {
    display: none !important;
}

body.sidebar-open {
    overflow: hidden;
}

/* ==========================================================================
   ESTILOS ADICIONALES DEL HEADER
   ========================================================================== */

.header-top .fa,
.header-top .icon {
    color: #ffcd00 !important;
}

.header-top a:hover .fa,
.header-top a:hover .icon {
    color: #5fad48 !important;
}

.header-cart-btn .cart-products-count-btn {
    background: #ffcd00 !important;
    color: #272929 !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1400px) {
    .megamenu-search-row .megamenu-search-col {
        width: 380px !important;
    }

    /* FIX: El #main debe respetar el ancho de su contenedor padre */
    #main {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* FIX: Subcategorías - hacer scrollable en vez de desbordar */
    .subcategories-circular-block,
    .subcategories-container,
    .subcategories,
    .category-subcategories {
        max-width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Subcategoría individual más pequeña en laptop */
    .subcategory-link,
    .subcategories-circular-block .subcategory-item {
        min-width: 120px !important;
        max-width: 140px !important;
        flex-shrink: 0 !important;
    }

    /* Contenedor de productos respetar ancho del padre */
    .products-grid,
    .products.row {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Content wrapper no debe desbordarse */
    #content-wrapper,
    #wrapper {
        overflow-x: hidden !important;
    }
}

@media (max-width: 1200px) {
    .megamenu-search-row .megamenu-search-col {
        width: 320px !important;
    }
}

@media (max-width: 992px) {
    .megamenu-search-row {
        flex-wrap: wrap !important;
    }

    .megamenu-search-row .megamenu-nav-col {
        width: 100% !important;
        order: 2 !important;
    }

    .megamenu-search-row .megamenu-search-col {
        width: 100% !important;
        padding: 10px 15px !important;
        order: 1 !important;
        background: #1a1a1a !important;
    }

    .hamburger-categories-col {
        order: 0 !important;
        width: auto !important;
        padding: 10px 15px 10px 0 !important;
    }
}

@media (max-width: 768px) {
    .megamenu-fullwidth-bg {
        display: none !important;
    }

    .hamburger-categories-col {
        display: none !important;
    }

    .categories-sidebar {
        width: 300px;
    }
}

/* ==========================================================================
   AÑADE TUS ESTILOS PERSONALIZADOS AQUÍ ABAJO
   ========================================================================== */
/* ==========================================================================
   HEADER ICONS BAR - ESTILO GRID CON ICONOS + TEXTO
   ========================================================================== */

/* Ocultar widgets originales del tema */
.header-top #user_info,
.header-top #ps-shoppingcart-wrapper,
.header-top .ps-shoppingcart {
    display: none !important;
}

/* Barra de iconos */
.header-icons-bar {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* Cada ítem de icono */
.header-icon-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    color: #272929 !important;
    transition: all 0.3s ease !important;
    min-width: 90px !important;
}

.header-icon-item:first-child {
    border-left: none !important;
}

.header-icon-item:hover {
    color: #fff !important;
}

.header-icon-item:hover i {
    color: #5fad48 !important;
    transform: scale(1.1) !important;
}

/* Icono */
.header-icon-item i {
    font-size: 32px !important;
    color: #272929 !important;
    margin-bottom: 5px !important;
    transition: all 0.3s ease !important;
}

/* Texto debajo del icono */
.header-icon-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: #666666 !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

.header-icon-item:hover .header-icon-label {
    color: #fff !important;
}

/* ==========================================================================
   CARRITO PERSONALIZADO CON BADGE
   ========================================================================== */

.header-cart-custom {
    position: relative !important;
}

.header-cart-custom .cart-icon-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    color: #272929 !important;
    transition: all 0.3s ease !important;
    min-width: 90px !important;
    position: relative !important;
}

.header-cart-custom .cart-icon-link i {
    font-size: 32px !important;
    color: #ffcd00 !important;
    margin-bottom: 5px !important;
    transition: all 0.3s ease !important;
}

.desktop-header-style-1 .search-widget,
.desktop-header-style-2 .search-widget {
    max-width: 100%;
}

.header-cart-custom .cart-icon-link:hover i {
    color: #5fad48 !important;
    transform: scale(1.1) !important;
}

/* Badge del carrito */
.cart-badge {
    position: absolute !important;
    top: 5px !important;
    right: 15px !important;
    background: #ffcd00 !important;
    color: #000000 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 5px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.cart-badge:empty,
.cart-badge.d-none {
    display: none !important;
}

/* Dropdown del carrito */
.cart-dropdown-custom {
    min-width: 320px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
}

.cart-dropdown-custom .blockcart-content {
    padding: 15px !important;
}

/* RESPONSIVE - HEADER ICONS BAR */
@media (max-width: 1200px) {
    .header-icon-item {
        padding: 10px 15px !important;
        min-width: 80px !important;
    }

    .header-cart-custom .cart-icon-link {
        padding: 10px 15px !important;
        min-width: 80px !important;
    }

    .header-icon-label {
        font-size: 11px !important;
    }
}

@media (max-width: 992px) {
    .header-icon-item {
        padding: 8px 12px !important;
        min-width: 70px !important;
    }

    .header-cart-custom .cart-icon-link {
        padding: 8px 12px !important;
        min-width: 70px !important;
    }

    .header-icon-item i,
    .header-cart-custom .cart-icon-link i {
        font-size: 20px !important;
    }

    .header-icon-label {
        font-size: 10px !important;
    }
}

@media (max-width: 768px) {
    .header-icons-bar {
        display: none !important;
    }
}

/* ==========================================================================
   CORRECCIONES DE ALINEACIÓN HEADER
   ========================================================================== */

/* Header row - alinear iconos a la derecha */
.header-top .row.align-items-center {
    justify-content: space-between !important;
}

/* Columna derecha - alinear a la derecha */
.header-top .col-header-right {
    margin-left: auto !important;
}

/* Más espacio entre logo e iconos */
.header-top .col-header-left {
    flex: 0 0 auto !important;
}

/* Barra de iconos con borde izquierdo */
.header-icons-bar {
    margin-left: 30px !important;
}

/* Primer ítem sin borde adicional */
.header-icon-item:first-child {
    border-left: none !important;
}

/* ==========================================================================
   INFORMACIÓN DE ENVÍOS (Reemplaza Wishlist)
   ========================================================================== */

.header-shipping-info {
    display: flex !important;
    align-items: center !important;
    padding: 5px 20px !important;
    border-left: 1px solid #f0f0f0 !important;
    min-width: 220px !important;
}

.header-shipping-info i {
    font-size: 24px !important;
    color: #272929 !important;
    margin-right: 12px !important;
}

.header-shipping-info .shipping-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

.header-shipping-info .shipping-main {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #272929 !important;
    text-transform: uppercase !important;
}

.header-shipping-info .shipping-sub {
    font-size: 12px !important;
    color: #666666 !important;
}

.header-shipping-info .shipping-link {
    color: #ffcd00 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    margin-left: 3px !important;
    font-size: 11px !important;
}

.header-shipping-info .shipping-link:hover {
    color: #5fad48 !important;
}

/* Ajustes responsive para info de envíos */
@media (max-width: 1300px) {
    .header-shipping-info {
        padding: 5px 10px !important;
        min-width: 180px !important;
    }

    .header-shipping-info .shipping-main {
        font-size: 11px !important;
    }

    .header-shipping-info .shipping-sub {
        font-size: 10px !important;
    }
}

@media (max-width: 992px) {
    .header-shipping-info {
        display: none !important;
        /* Ocultar en tablet/móvil si falta espacio */
    }
}

/* ==========================================================================
   INFORMACIÓN DE ENVÍOS EN TOP BAR
   ========================================================================== */

.header-shipping-info-top {
    display: inline-block !important;
    font-size: 13px !important;
    color: #ffffff !important;
    /* Asumiendo fondo oscuro del top bar, ajustar si es claro */
}

.header-shipping-info-top .shipping-main {
    font-weight: 600 !important;
    margin-right: 5px !important;
}

.header-shipping-info-top .shipping-link {
    color: var(--dv-gray) !important;
    background-color: var(--dv-yellow-dark);
    padding: 2px 5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 5px !important;
    text-transform: uppercase !important;
}

.header-shipping-info-top .shipping-link:hover {
    color: #5fad48 !important;
}

/* Ajuste si el fondo del topbar es claro (por defecto en Warehouse suele serlo) */
.header-nav .header-shipping-info-top {
    color: #666666 !important;
}

/* ==========================================================================
   ESTILOS PARA AMBJOLISEARCH (Reemplaza iqitsearch)
   ========================================================================== */

/* Contenedor principal */
.megamenu-search-col #search_block_top,
.megamenu-search-col .jolisearch {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Formulario */
.megamenu-search-col #searchbox {
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    position: relative !important;
}

.megamenu-search-col #searchbox:hover,
.megamenu-search-col #searchbox:focus-within {
    border-color: #ffcd00 !important;
    box-shadow: 0 4px 15px rgba(255, 205, 0, 0.3) !important;
}

/* Input de búsqueda */
.megamenu-search-col #search_query_top,
.megamenu-search-col .search_query {
    border: none !important;
    background: transparent !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    color: #272929 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 44px !important;
    flex: 1 !important;
    width: auto !important;
    outline: none !important;
}

.megamenu-search-col #search_query_top::placeholder {
    color: #888888 !important;
    font-style: italic !important;
}

/* Botón de búsqueda */
.megamenu-search-col .button-search {
    background: #ffcd00 !important;
    border: none !important;
    padding: 0 22px !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 25px 25px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    height: auto !important;
    top: 0 !important;
    right: 0 !important;
    position: relative !important;
}

.megamenu-search-col .button-search:hover {
    background: #5fad48 !important;
    color: #ffffff !important;
}

.megamenu-search-col .button-search span {
    display: block !important;
}

/* Autocomplete resultados */
.ac_results {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 0 15px 15px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    margin-top: 5px !important;
    width: 450px !important;
    /* Forzar ancho igual al input */
}

.ac_results li {
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #333 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.ac_results li.ac_over {
    background: #fff8e0 !important;
    color: #000 !important;
}

/* Ocultar botón original si se superpone mal */
.megamenu-search-col .button-search:before {
    display: none !important;
}

/* ==========================================================================
   CORRECCIONES FINALES AMBJOLISEARCH
   ========================================================================== */

/* Forzar contenedor del buscador a comportarse como bloque flexible */
.megamenu-search-col {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
}

/* Resetear estilos de bootstrap/modulo que rompen el layout */
.megamenu-search-col #search_block_top {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* Asegurar que el formulario ocupe todo el espacio */
.megamenu-search-col #searchbox {
    width: 100% !important;
}

/* Corregir altura del input y botón */
.megamenu-search-col .search_query {
    height: 44px !important;
    line-height: 44px !important;
}

.megamenu-search-col .button-search {
    height: 44px !important;
}

/* Eliminar cualquier float residual */
.megamenu-search-col .clearfix:before,
.megamenu-search-col .clearfix:after {
    display: none !important;
}

/* ==========================================================================
   CORRECCIONES VISUALES AMBJOLISEARCH (Icono y Fondo)
   ========================================================================== */

/* Formulario en flex y fondo blanco */
.megamenu-search-col form,
.megamenu-search-col #searchbox {
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border-radius: 25px !important;
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
}

/* Input con fondo blanco */
.megamenu-search-col input.search_query,
.megamenu-search-col #search_query_top {
    background: #ffffff !important;
    border: none !important;
    border-radius: 25px 0 0 25px !important;
}

/* Botón con icono de lupa */
.megamenu-search-col .button-search {
    font-size: 0 !important;
    /* Ocultar texto "Buscar" */
    background: #ffcd00 !important;
    border-radius: 0 25px 25px 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
}

/* Añadir icono FontAwesome */
.megamenu-search-col .button-search::before {
    content: "\f002" !important;
    /* Icono lupa */
    font-family: "FontAwesome" !important;
    font-size: 18px !important;
    color: #000000 !important;
    display: block !important;
}

.megamenu-search-col .button-search:hover {
    background: #5fad48 !important;
}

.megamenu-search-col .button-search:hover::before {
    color: #ffffff !important;
}

/* ==========================================================================
   BUSCADOR ESTILO "ICONO DENTRO DEL INPUT"
   ========================================================================== */

/* Contenedor relativo para posicionar el botón */
.megamenu-search-col #searchbox {
    position: relative !important;
    border: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    border-radius: 25px !important;
}

/* Input ocupa todo el ancho y tiene padding a la derecha para el icono */
.megamenu-search-col input.search_query,
.megamenu-search-col #search_query_top {
    width: 100% !important;
    border-radius: 25px !important;
    padding-right: 50px !important;
    /* Espacio para el icono */
    border: none !important;
    background: transparent !important;
}

/* Botón posicionado absolutamente a la derecha */
.megamenu-search-col .button-search {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 50px !important;
    background: transparent !important;
    /* Fondo transparente */
    border: none !important;
    padding: 0 !important;
    border-radius: 0 25px 25px 0 !important;
    min-width: auto !important;
}

/* Icono del botón (FontAwesome) */
.megamenu-search-col .button-search::before {
    content: "\f002" !important;
    /* fa-search */
    font-family: "FontAwesome" !important;
    font-size: 18px !important;
    color: #999999 !important;
    /* Color gris suave inicial */
    transition: all 0.3s ease !important;
}

/* Hover en el botón */
.megamenu-search-col .button-search:hover {
    background: transparent !important;
}

.megamenu-search-col .button-search:hover::before {
    color: #ffcd00 !important;
    /* Color amarillo al pasar el ratón */
    transform: scale(1.1);
}

/* Eliminar estilos anteriores que daban fondo al botón */
.megamenu-search-col .button-search {
    box-shadow: none !important;
}

/* ==========================================================================
   CORRECCIÓN FINAL BUSCADOR (Soporte para estructura estándar PS)
   ========================================================================== */

/* Atacar al botón genérico dentro de la columna de búsqueda */
.megamenu-search-col button[type="submit"] {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 50px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

/* Ocultar el icono Material Icons original y el texto */
.megamenu-search-col button[type="submit"] i.material-icons,
.megamenu-search-col button[type="submit"] span {
    display: none !important;
}

/* Añadir icono FontAwesome al botón */
.megamenu-search-col button[type="submit"]::after {
    content: "\f002" !important;
    /* fa-search */
    font-family: "FontAwesome" !important;
    font-size: 18px !important;
    color: #999999 !important;
    transition: all 0.3s ease !important;
}

/* Hover effect */
.megamenu-search-col button[type="submit"]:hover::after {
    color: #ffcd00 !important;
    transform: scale(1.1);
}

/* Asegurar que el input tenga espacio para el botón */
.megamenu-search-col input[type="text"] {
    padding-right: 50px !important;
}

/* ==========================================================================
   CORRECCIÓN FOCUS BUSCADOR (Icono desaparece)
   ========================================================================== */

/* Asegurar que el botón esté siempre encima del input */
.megamenu-search-col button[type="submit"] {
    z-index: 100 !important;
    /* Z-index alto para estar encima del input */
    pointer-events: auto !important;
    /* Asegurar que sea clickeable */
}

/* Evitar que el input tape el botón al tener focus */
.megamenu-search-col input[type="text"]:focus {
    z-index: 1 !important;
    position: relative !important;
}

/* Asegurar que el contenedor mantenga el contexto de apilamiento */
.megamenu-search-col #searchbox {
    z-index: 0 !important;
}

/* ==========================================================================
   CORRECCIÓN BORDE AZUL (OUTLINE) AL HACER FOCUS
   ========================================================================== */

/* Eliminar outline del navegador en todos los elementos del buscador */
.megamenu-search-col,
.megamenu-search-col form,
.megamenu-search-col #searchbox,
.megamenu-search-col input,
.megamenu-search-col button {
    outline: none !important;
    box-shadow: none !important;
}

/* Si quieres un efecto de foco, usa border-color o box-shadow personalizado */
.megamenu-search-col #searchbox:focus-within {
    border-color: #ffcd00 !important;
    /* Borde amarillo al hacer foco */
    box-shadow: 0 0 0 2px rgba(255, 205, 0, 0.2) !important;
    /* Resplandor amarillo suave */
}

/* ==========================================================================
   MODERNIZACIÓN HOVER MENÚ (Overrides)
   ========================================================================== */

/* Añadir position relative a los enlaces para el pseudo-elemento */
.megamenu-fullwidth-bg .cbp-hrmenu .nav-link,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li>a,
.megamenu-nav-col .cbp-hrmenu .nav-link,
.megamenu-nav-col .cbp-hrmenu>ul>li>a {
    position: relative !important;
}

/* Quitar fondo amarillo y poner texto amarillo en hover */
.megamenu-fullwidth-bg .cbp-hrmenu .nav-link:hover,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li>a:hover,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li:hover>a,
.megamenu-nav-col .cbp-hrmenu .nav-link:hover,
.megamenu-nav-col .cbp-hrmenu>ul>li:hover>a {
    background: transparent !important;
    color: #ffcd00 !important;
    text-decoration: none !important;
}

/* Línea animada debajo (crece desde el centro) */
.megamenu-fullwidth-bg .cbp-hrmenu .nav-link::after,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li>a::after,
.megamenu-nav-col .cbp-hrmenu .nav-link::after,
.megamenu-nav-col .cbp-hrmenu>ul>li>a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 5px !important;
    left: 20px !important;
    right: 20px !important;
    height: 2px !important;
    background-color: #ffcd00 !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.3s ease-out !important;
}

.megamenu-fullwidth-bg .cbp-hrmenu .nav-link:hover::after,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li>a:hover::after,
.megamenu-fullwidth-bg .cbp-hrmenu>ul>li:hover>a::after,
.megamenu-nav-col .cbp-hrmenu .nav-link:hover::after,
.megamenu-nav-col .cbp-hrmenu>ul>li:hover>a::after {
    transform: scaleX(1) !important;
}

/* ==========================================================================
   DISEÑO MODERNO DE TARJETAS DE PRODUCTOS
   Basado en diseño de referencia - DoceVoltios Camper
   ========================================================================== */

/* Contenedor principal del layout (GRID/COL) */
.product-miniature {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px !important;
    /* ESTE ES EL GAP/ESPACIADO REAL */
    margin: 0 !important;
    /* Reset de márgenes que daban problemas */
    height: 100% !important;
}

/* La tarjeta visual real (dentro del padding) */
.product-card-visual {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.product-miniature:hover .product-card-visual {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: #ffcd00 !important;
}

/* ==========================================================================
   ÁREA DE LA IMAGEN
   ========================================================================== */

.product-miniature .thumbnail-container {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.product-miniature .thumbnail-container .thumbnail {
    display: block !important;
    text-align: center !important;
    position: relative !important;
}

.product-miniature .thumbnail-container img {
    transition: transform 0.4s ease !important;
    max-height: 280px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

.product-miniature:hover .thumbnail-container img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   BADGES Y FLAGS
   ========================================================================== */

.product-miniature .product-flags {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.product-miniature .product-flag {
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
}

/* Badge "Novedad" - Naranja */
.product-miniature .product-flag.new,
.product-miniature .product-flag.nuevo,
.product-miniature .product-flag.novedad {
    background: #ff8c00 !important;
}

/* Badge "Disponible" - Verde */
.product-miniature .product-flag.available,
.product-miniature .product-flag.disponible,
.product-miniature .badge-success.product-available {
    background: #5fad48 !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    margin: 0 !important;
}

/* Badge "En oferta" - Rojo */
.product-miniature .product-flag.on-sale,
.product-miniature .product-flag.discount {
    background: #e31e24 !important;
}

/* Ocultar badge de disponibilidad si no está en stock */
.product-miniature .badge-danger.product-unavailable {
    display: none !important;
}

/* ==========================================================================
   DESCRIPCIÓN DEL PRODUCTO
   ========================================================================== */

.product-miniature .product-description {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Categoría del producto */
.product-miniature .product-category-name {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #999999 !important;
    margin-bottom: 8px !important;
}

/* Nombre del producto */
.product-miniature .product-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #272929 !important;
    margin-bottom: 12px !important;
    min-height: 44px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.product-miniature .product-title a {
    color: #272929 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.product-miniature .product-title a:hover {
    color: #ffcd00 !important;
}

/* Referencia del producto */
.product-miniature .product-reference {
    font-size: 13px !important;
    color: #666666 !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

.product-miniature .product-reference-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.product-miniature .product-reference::before {
    content: "REF: " !important;
    font-weight: 700 !important;
    color: #272929 !important;
}

/* EAN13 styles */
.product-miniature .product-ean13 {
    font-size: 11px !important;
    color: #999999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.product-miniature .product-ean13 i {
    font-size: 14px !important;
}

/* Código de barras - Añadido con CSS si existe en datos */
.product-miniature .product-reference a,
.product-miniature .product-ean13 a {
    color: inherit !important;
    text-decoration: none !important;
}

/* ==========================================================================
   PRECIO Y BOTÓN
   ========================================================================== */

.product-miniature .product-price-and-shipping {
    margin: 10px 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    /* Alineación a la derecha como en la foto */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.product-miniature .product-price {
    font-size: 48px !important;
    /* Reducido un poco (de 58 a 48) */
    font-weight: 900 !important;
    font-style: italic !important;
    color: #000000 !important;
    line-height: 0.9 !important;
    display: inline-block !important;
    /* Necesario para transform */
    letter-spacing: -2px !important;
    font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif !important;
    transform: scale(1, 0.9) rotate(-2deg) !important;
    /* Rotación ligera para efecto "pegatina" dinámico */
    transform-origin: right center !important;
    margin-right: -5px !important;
    /* Compensar la rotación */
    /* Borde blanco grueso conseguido con múltiples sombras + Sombra exterior para contraste */
    text-shadow:
        3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
        2px 2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff,
        5px 5px 0 rgba(0, 0, 0, 0.15) !important;
    z-index: 1 !important;
}

/* Etiqueta Impuestos */
.product-miniature .tax-included-label {
    font-size: 11px !important;
    color: #666666 !important;
    font-style: italic !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.5px !important;
}

/* Precio regular (tachado) */
.product-miniature .regular-price {
    font-size: 16px !important;
    color: #999999 !important;
    text-decoration: line-through !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   BOTÓN "AÑADIR AL CARRITO" ESTILO #MELOMANDO
   ========================================================================== */

/* Forzar visibilidad y estilo del contenedor del botón - ALTA ESPECIFICIDAD */
.product-miniature .product-functional-buttons-bottom,
.product-miniature .product-add-cart,
.products-grid .product-miniature .product-add-cart,
.featured-products .product-miniature .product-add-cart,
.product-carousel .product-miniature .product-add-cart,
.product-accessories .product-miniature .product-add-cart,
.crossselling-products .product-miniature .product-add-cart,
.category-products .product-miniature .product-add-cart {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
}

.product-miniature .input-group-add-cart {
    display: flex !important;
    width: 100% !important;
    gap: 5px !important;
}

/* Selector de Cantidad - Visible y Estilizado */
.product-miniature .qty-input-wrapper {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin-right: 5px !important;
}

.product-miniature .input-qty {
    display: block !important;
    width: 60px !important;
    min-width: 60px !important;
    margin: 0 !important;
    padding: 5px 20px 5px 5px !important;
    /* Espacio para flechas */
    text-align: center !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    height: 42px !important;
    font-weight: 600 !important;
    color: #272929 !important;
    -moz-appearance: textfield !important;
    /* Quitar spinbutton nativo Firefox */
    appearance: textfield !important;
}

/* Quitar spinbutton nativo Chrome/Safari */
.product-miniature .input-qty::-webkit-outer-spin-button,
.product-miniature .input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Botón Solicita este producto - Estilo igual al de compra pero otro color */
.product-miniature .btn-request-stock {
    flex: 1 !important;
    width: 100% !important;
    background: #4a4a4a !important;
    /* Gris oscuro para diferenciar */
    color: #ffffff !important;
    border: none !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    height: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
}

.product-miniature .btn-request-stock:hover {
    background: #2b2b2b !important;
    /* Más oscuro al hover */
    transform: translateY(-2px) !important;
    color: #ffcd00 !important;
    /* Texto amarillo al hover */
}

/* Flechas Custom UX */
.product-miniature .qty-arrows {
    position: absolute !important;
    right: 1px !important;
    top: 1px !important;
    bottom: 1px !important;
    width: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: 1px solid #f0f0f0 !important;
}

.product-miniature .qty-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f9f9f9 !important;
    color: #666 !important;
    font-size: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    padding: 0 !important;
}

.product-miniature .qty-up {
    border-bottom: 1px solid #f0f0f0 !important;
    border-top-right-radius: 3px !important;
}

.product-miniature .qty-down {
    border-bottom-right-radius: 3px !important;
}

.product-miniature .qty-btn:hover {
    background: #ffcd00 !important;
    color: #000 !important;
}

/* Estilo del botón */
.product-miniature .product-add-to-cart,
.product-miniature .add-to-cart,
.product-miniature .btn-add-to-cart,
.product-miniature button.btn-product-list,
.product-miniature form[action*="cart"] button[type="submit"] {
    flex: 1 !important;
    width: auto !important;
    background: #ffcd00 !important;
    /* Amarillo marca */
    color: #272929 !important;
    border: none !important;
    padding: 10px 5px !important;
    /* Reducir padding lateral para que quepa */
    font-size: 13px !important;
    /* Reducir fuente ligeramente */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    /* Menos gap */
    box-shadow: none !important;
    margin: 0 !important;
    height: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
    /* Forzar una sola línea */
}

.product-miniature .product-add-to-cart:hover,
.product-miniature .add-to-cart:hover,
.product-miniature button.btn-product-list:hover {
    background: #5fad48 !important;
    /* Verde al hover */
    color: #ffffff !important;
}

.product-miniature .product-add-to-cart i,
.product-miniature .add-to-cart i,
.product-miniature button.btn-product-list i {
    font-size: 16px !important;
}

/* Texto del botón - Restaurar original */
.product-miniature .add-to-cart span,
.product-miniature button.btn-product-list {
    font-size: 14px !important;
}

.product-miniature .add-to-cart::after,
.product-miniature button.btn-product-list::after {
    content: none !important;
}

/* Efecto LOADING */
.product-miniature .spinner-icon {
    display: none !important;
}

/* Cuando PRESTASHOP añade la clase disabled o similar al procesar */
.product-miniature .add-to-cart[disabled] .bag-icon,
.product-miniature .add-to-cart.disabled .bag-icon,
.product-miniature .add-to-cart.loading .bag-icon {
    display: none !important;
}

.product-miniature .add-to-cart[disabled] .spinner-icon,
.product-miniature .add-to-cart.disabled .spinner-icon,
.product-miniature .add-to-cart.loading .spinner-icon {
    display: inline-block !important;
    animation: fa-spin 2s infinite linear !important;
}

/* Ocultar texto al cargar para dejar solo el spinner si se desea, o dejarlo */
.product-miniature .add-to-cart[disabled],
.product-miniature .add-to-cart.disabled {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
    background: #e6b800 !important;
}

/* Ocultar botones funcionales flotantes (quick view, etc) para limpiar la vista */
.product-miniature .product-functional-buttons-links {
    display: none !important;
}


/* ==========================================================================
   RESPONSIVE - AJUSTES PARA MÓVILES Y TABLETS
   ========================================================================== */

@media (max-width: 768px) {
    .product-miniature .thumbnail-container img {
        max-height: 200px !important;
    }

    .product-miniature .product-title {
        font-size: 14px !important;
        min-height: 38px !important;
    }

    .product-miniature .product-price {
        font-size: 32px !important;
    }

    .product-miniature .product-description {
        padding: 15px !important;
    }

    .product-miniature .product-add-to-cart,
    .product-miniature .add-to-cart,
    .product-miniature .btn-add-to-cart {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .product-miniature .product-flags {
        top: 8px !important;
        left: 8px !important;
    }

    .product-miniature .product-flag {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }

    .product-miniature .badge-success.product-available {
        top: 8px !important;
        right: 8px !important;
    }
}

@media (max-width: 576px) {
    .product-miniature .thumbnail-container {
        padding: 15px !important;
    }

    .product-miniature .thumbnail-container img {
        max-height: 180px !important;
    }

    .product-miniature .product-price {
        font-size: 28px !important;
    }

    .product-miniature:hover {
        transform: translateY(-2px) !important;
    }
}

/* ==========================================================================
   AJUSTES PARA CAROUSELS Y GRIDS
   ========================================================================== */

/* Productos en carousel */
.product-carousel .product-miniature {
    margin: 0 !important;
}

/* Ajustes para lista de productos */
.products-grid .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature {
    margin-bottom: 30px !important;
}

/* Asegurar que las tarjetas tengan la misma altura en grids */
.products-grid .js-product-miniature-wrapper,
.featured-products .js-product-miniature-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

/* ==========================================================================
   TITULOS CATEGORIAS - ESTILO CAMPER RENOVADO
   ========================================================================== */

.camper-categories-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 10px;
    position: relative;
    background: transparent;
}

.camper-title-wrapper {
    display: inline-block;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.camper-title {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #4a8a39 !important;
    /* Verde oscuro camper */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px !important;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 0px #fff, 4px 4px 0px rgba(0, 0, 0, 0.1);
    line-height: 1.2 !important;
}

/* Efecto de subrayado/resaltado estilo "marker" */
.camper-title::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: -10px;
    width: calc(100% + 20px);
    height: 15px;
    background: #ffcd00;
    /* Amarillo camper */
    opacity: 0.6;
    z-index: -1;
    transform: rotate(-1deg);
    border-radius: 20px;
}

.camper-subtitle {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 1.3rem !important;
    color: #666666 !important;
    font-weight: 500 !important;
    max-width: 700px;
    margin: 15px auto 0;
    line-height: 1.5 !important;
}

.camper-subtitle strong {
    color: #4a8a39;
}

/* Responsive */
@media (max-width: 768px) {
    .camper-title {
        font-size: 2.2rem !important;
    }

    .camper-subtitle {
        font-size: 1.1rem !important;
        padding: 0 15px;
    }
}

/* ==========================================================================
   OVERRIDES PARA IQITTHEMEEDITOR (custom_s_1.css)
   Este bloque DEBE estar al final para anular los display:none generados
   ========================================================================== */

/* Forzar visibilidad de elementos ocultos por el Theme Editor */
.products-grid .product-miniature .product-category-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.products-grid .product-miniature .product-reference {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.products-grid .product-miniature .product-brand {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.products-grid .product-miniature .product-description-short {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.products-grid .product-miniature .product-add-cart {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.products-grid .product-miniature .flag-discount-value {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.product-miniature .input-qty,
.product-miniature .input-group-add-cart .bootstrap-touchspin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Estilos adicionales para categoría, alerta stock, referencia/EAN */
.product-category-name a {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #999999 !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 2px !important;
}

.product-category-name a:hover {
    color: #ffcd00 !important;
    border-bottom-color: #ffcd00 !important;
}

/* Badge de Stock Bajo - Posicionado sobre la imagen */
.thumbnail-wrapper {
    position: relative !important;
}

.low-stock-badge {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: linear-gradient(135deg, #e31e24 0%, #ff6b00 100%) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(227, 30, 36, 0.4) !important;
    animation: pulse-badge 2s infinite !important;
}

.low-stock-badge i {
    margin-right: 3px !important;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes flicker {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Ajuste para contenedor Info Técnica (Ref, Stock, EAN) */
.product-info-container {
    margin-top: 8px !important;
    padding: 5px 0 !important;
    border-top: 1px dashed #e5e5e5 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 11px !important;
    color: #777777 !important;
}

#product .product-info-container {
    justify-content: end;
}

.product-ref-info,
.product-stock-info,
.product-ean-info {
    font-family: 'Consolas', 'Monaco', monospace !important;
    background: #f5f5f5 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    display: inline-block !important;
}

.product-stock-info {
    color: #5fad48 !important;
    /* Verde para stock disponible */
    font-weight: 600 !important;
}

/* Ocultar el .product-reference del tema para evitar duplicados */
.products-grid .product-miniature .product-reference:not(.product-ref-info) {
    display: none !important;
}

/* ==========================================================================
   BOTONES FUNCIONALES - DEBUG MODE
   ========================================================================== */

/* BOTONES FUNCIONALES - DISEÑO FINAL */

/* Asegurar que el contenedor de imagen tenga position relative */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-wrapper,
.product-card-visual .thumbnail-container {
    position: relative !important;
    overflow: visible !important;
}

.product-functional-buttons,
.product-functional-buttons-links,
div.product-functional-buttons,
div.product-functional-buttons-links,
.product-miniature .product-functional-buttons-links,
.product-miniature .product-functional-buttons,
.products-grid .product-miniature .product-functional-buttons-links,
.product-miniature-grid .product-functional-buttons-links,
.product-miniature-grid .product-functional-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: absolute !important;
    top: 10px !important;
    left: auto !important;
    right: 10px !important;
    z-index: 999 !important;
    visibility: visible !important;
    opacity: 0 !important;
    transform: none !important;
    transition: opacity 0.3s ease !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mostrar al hover */
.product-miniature:hover .product-functional-buttons-links,
.product-miniature:hover .product-functional-buttons,
.product-card-visual:hover .product-functional-buttons-links,
.product-card-visual:hover .product-functional-buttons,
.thumbnail-wrapper:hover .product-functional-buttons-links,
.thumbnail-container:hover .product-functional-buttons-links {
    opacity: 1 !important;
}

/* Estilo de cada botón */
.product-functional-buttons a,
.product-functional-buttons-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50% !important;
    color: #555555 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    margin: 0 !important;
}

.product-functional-buttons a:hover,
.product-functional-buttons-links a:hover {
    background: #ffcd00 !important;
    color: #000000 !important;
    border-color: #ffcd00 !important;
    transform: scale(1.1) !important;
}

/* ==========================================================================
   BOTONES CARRUSEL SWIPER - DISEÑO MODERNO
   ========================================================================== */

.swiper-button-next,
.swiper-button-prev,
.elementor-swiper-button-next,
.elementor-swiper-button-prev,
.swiper-button-next.swiper-button,
.swiper-button-prev.swiper-button {
    width: 48px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.elementor-swiper-button-next:hover,
.elementor-swiper-button-prev:hover {
    background: #ffcd00 !important;
    border-color: #ffcd00 !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
    box-shadow: 0 6px 20px rgba(255, 205, 0, 0.3) !important;
}

/* Iconos de flecha */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #333333 !important;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #000000 !important;
}

/* Posición más pegada a los bordes */
.swiper-button-next {
    right: -10px !important;
}

.swiper-button-prev {
    left: -10px !important;
}

/* Cuando está deshabilitado */
.swiper-button-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* Variante para Elementor */
.elementor-swiper-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

.block-links ul>li a::before {
    display: none;
}

.block-categories .collapse-icons {
    top: 15px;
}

/* ==========================================================================
   TITULO ESTILO STICKER/CARTOON - CAMPER
   ========================================================================== */

.camper-sticker-title {
    font-family: 'Fira Sans Condensed', 'Impact', sans-serif !important;
    font-size: 4rem !important;
    font-weight: 900 !important;
    color: #ffcd00 !important;
    /* Amarillo */
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1 !important;
    letter-spacing: 1px;
    /* Borde verde oscuro + sombra 3D */
    text-shadow:
        /* Contorno verde oscuro grueso */
        -3px -3px 0 #3d6b2e,
        3px -3px 0 #3d6b2e,
        -3px 3px 0 #3d6b2e,
        3px 3px 0 #3d6b2e,
        -3px 0 0 #3d6b2e,
        3px 0 0 #3d6b2e,
        0 -3px 0 #3d6b2e,
        0 3px 0 #3d6b2e,
        /* Sombra 3D offset */
        5px 5px 0 #2a4d1f,
        6px 6px 0 #2a4d1f,
        7px 7px 0 #2a4d1f;
    margin: 20px 0 !important;
}

@media (max-width: 768px) {
    .camper-sticker-title {
        font-size: 2.5rem !important;
    }
}

/* ==========================================================================
   STICKY DESKTOP MENU - ESTILO PREMIUM CON ANIMACIÓN
   ========================================================================== */

/* Wrapper contenedor del sticky */
.sticky-desktop-wrapper {
    position: relative;
    z-index: 5000;
}

/* Cuando el menú está pegado (stuck) */
.sticky-desktop-wrapper .stuck,
#iqitmegamenu-wrapper.stuck-menu,
#desktop-header.stuck-header {
    background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.35),
        0 8px 40px rgba(0, 0, 0, 0.2),
        inset 0 -3px 0 0 var(--dv-yellow, #ffcd00) !important;
    animation: stickySlideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    border-bottom: none !important;
}

/* Animación de aparición desde arriba */
@keyframes stickySlideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Contenedor del megamenu cuando está sticky */
#iqitmegamenu-wrapper.stuck-menu .container-iqitmegamenu,
.stuck-menu .container-iqitmegamenu {
    padding: 0 20px !important;
    max-width: 100% !important;
    position: relative;
}

/* Estilos del menú horizontal en modo sticky */
#iqitmegamenu-wrapper.stuck-menu #iqitmegamenu-horizontal,
.stuck-menu #iqitmegamenu-horizontal {
    background: transparent !important;
}

#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul,
.stuck-menu .cbp-hrmenu>ul {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

/* Links del menú cuando está sticky */
#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul>li>a,
.stuck-menu .cbp-hrmenu>ul>li>a,
.stuck-menu .cbp-hrmenu .nav-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 22px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-wrap: nowrap;
}

/* Efecto hover en links sticky */
#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul>li:hover>a,
.stuck-menu .cbp-hrmenu>ul>li:hover>a,
.stuck-menu .cbp-hrmenu .nav-link:hover {
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 205, 0, 0.4) !important;
}

/* Underline animado en hover */
#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul>li>a::after,
.stuck-menu .cbp-hrmenu>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--dv-yellow, #ffcd00);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul>li:hover>a::after,
.stuck-menu .cbp-hrmenu>ul>li:hover>a::after {
    width: 0;
}

/* Iconos del menú sticky */
#iqitmegamenu-wrapper.stuck-menu .cbp-mainlink-icon,
.stuck-menu .cbp-mainlink-icon {
    color: var(--dv-yellow, #ffcd00) !important;
    margin-right: 6px !important;
    transition: all 0.3s ease !important;
}

#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul>li:hover .cbp-mainlink-icon,
.stuck-menu .cbp-hrmenu>ul>li:hover .cbp-mainlink-icon {
    color: #000000 !important;
}

/* Logo pequeño opcional en sticky (si existe) */
.stuck-menu .sticky-logo,
#iqitmegamenu-wrapper.stuck-menu .sticky-logo {
    max-height: 40px !important;
    width: auto !important;
    margin-right: 30px !important;
}

/* Carrito sticky */
#sticky-cart-wrapper {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 5005;
}

#sticky-cart-wrapper .ps-shoppingcart {
    background: rgba(255, 205, 0, 0.15) !important;
    border-radius: 50px !important;
    padding: 8px 15px !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

#sticky-cart-wrapper .ps-shoppingcart:hover {
    background: rgba(255, 205, 0, 0.25) !important;
    border-color: var(--dv-yellow, #ffcd00) !important;
}

#sticky-cart-wrapper .cart-toogle i {
    color: var(--dv-yellow, #ffcd00) !important;
    font-size: 22px !important;
}

#sticky-cart-wrapper .cart-products-count-btn {
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: 2px solid #000000 !important;
}

/* Barra superior de highlight en sticky */
#iqitmegamenu-wrapper.stuck-menu::before,
.sticky-desktop-wrapper .stuck::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--dv-green, #5fad48) 0%,
            var(--dv-yellow, #ffcd00) 25%,
            var(--dv-yellow, #ffcd00) 75%,
            var(--dv-green, #5fad48) 100%);
    animation: gradientMove 3s ease-in-out infinite;
}

@keyframes gradientMove {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Submenu desplegable en sticky */
#iqitmegamenu-wrapper.stuck-menu .cbp-hrsub,
.stuck-menu .cbp-hrsub {
    margin-top: 0 !important;
    border-top: 3px solid var(--dv-yellow, #ffcd00) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* RESPONSIVE - Ocultar sticky en móvil */
@media (max-width: 991px) {
    .sticky-desktop-wrapper {
        display: none !important;
    }
}

/* Ajustes para pantallas medianas */
@media (min-width: 992px) and (max-width: 1200px) {

    #iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu>ul>li>a,
    .stuck-menu .cbp-hrmenu>ul>li>a {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   MEGAMENU PERSONALIZADO - DOCEVOLTIOS CAMPER
   ========================================================================== */

/* ==========================================================================
   ESTRATEGIA DE POSICIONAMIENTO MEGAMENU - HÍBRIDA (DESKTOP vs LAPTOP)
   ========================================================================== */

/* ========== ESTILOS BASE DEL SUBMENU ========== */
.cbp-hrmenu .cbp-hrsub {
    background: #ffffff !important;
    border: none !important;
    border-top: 4px solid var(--dv-yellow, #ffcd00) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out !important;
}

/* ========== ESCRITORIO (>1400px): Position Absolute con ancho fijo centrado ========== */
@media (min-width: 1401px) {
    .cbp-hrmenu .cbp-hrsub {
        position: absolute !important;
        width: 1270px !important;
        max-width: 95vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 100% !important;
    }

    /* En desktop, los contenedores intermedios pueden ser static */
    .cbp-hrmenu>ul>li {
        position: static !important;
    }

    nav#cbp-hrmenu,
    nav.cbp-hrmenu {
        position: static !important;
    }

    #iqitmegamenu-wrapper {
        position: relative !important;
    }
}

/* ========== PORTÁTIL/TABLET (<1400px): Submenu full width ========== */
@media (max-width: 1400px) {

    /* Estado normal (NO sticky): fixed con top calculado por JS */
    .cbp-hrmenu .cbp-hrsub {
        position: fixed !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--submenu-top, 230px) !important;
    }

    /* Evitar scroll horizontal */
    body {
        overflow-x: hidden !important;
    }
}

/* ========== SUBMENU EN MODO STICKY (todas las resoluciones) ========== */
/* Cuando el menú está sticky, el submenu va justo debajo con 100% width */
#iqitmegamenu-horizontal.cbp-sticky .cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-horizontal.stuck .cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-wrapper.stuck .cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-wrapper.stuck-menu .cbp-hrmenu .cbp-hrsub,
.stuck .cbp-hrmenu .cbp-hrsub,
.stuck-menu .cbp-hrmenu .cbp-hrsub {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
}

/* Necesario para que el fondo no cubra el padding invisible */
.cbp-hrmenu .cbp-hrsub-inner {
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    padding: 0 !important;
    /* Reset del inner */
}

/* ========== STICKY MENU FIX ========== */
/* El tema usa varias clases para sticky: .cbp-sticky, .stuck, .stuck-menu */
/* IMPORTANTE: No poner position:relative en el wrapper cuando es sticky */

/* Wrapper normal (NO sticky) - relative para posicionar submenu */
#iqitmegamenu-wrapper:not(.stuck):not(.stuck-menu),
#iqitmegamenu-horizontal:not(.cbp-sticky):not(.stuck) {
    position: relative !important;
}

/* Contenedores intermedios static cuando NO es sticky */
.container-iqitmegamenu,
nav#cbp-hrmenu,
nav.cbp-hrmenu,
.cbp-hrmenu>ul,
.cbp-hrmenu>ul>li {
    position: static !important;
}

/* STICKY MENU: Fixed cuando está activo */
/* Soportamos todas las clases que el tema puede usar */
#iqitmegamenu-horizontal.cbp-sticky,
#iqitmegamenu-horizontal.stuck,
#iqitmegamenu-wrapper.stuck,
#iqitmegamenu-wrapper.stuck-menu,
.megamenu-fullwidth-bg.stuck,
.stuck-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    background: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Asegurar que el nav dentro del sticky siga siendo static */
#iqitmegamenu-horizontal.cbp-sticky nav#cbp-hrmenu,
.stuck nav#cbp-hrmenu,
.stuck-menu nav#cbp-hrmenu {
    position: static !important;
}

/* 5. Ajustes de Delays */
.cbp-hrmenu>ul>li .cbp-hrsub {
    transition-delay: 0.1s !important;
}

.cbp-hrmenu>ul>li:hover .cbp-hrsub {
    transition-delay: 0s !important;
}

/* Eliminar bridges antiguos que puedan interferir */
.cbp-hrmenu>ul>li.cbp-has-submeu::after {
    display: none !important;
}



/* Para submenus que están en items al borde derecho, evitar que se salgan */


.cbp-hrsub-inner {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.iqitmegamenu-submenu-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.iqitmegamenu-submenu-container .menu_row {
    margin: 0 !important;
}

/* ========================================
   COLUMNA INTRO (IZQUIERDA)
======================================== */
.mm-col-intro {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    padding: 35px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 320px !important;
    max-height: 400px !important;
    /* FIX: Limitar altura máxima */
    overflow: hidden !important;
    /* FIX: Evitar que el contenido se salga */
    border-right: 1px solid #eee !important;
}

.mm-col-intro .mm-icon {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--dv-yellow, #ffcd00) 0%, #e6b800 100%) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 20px rgba(255, 205, 0, 0.3) !important;
}

.mm-col-intro .mm-icon i {
    font-size: 28px !important;
    color: #000000 !important;
}

.mm-col-intro h3 {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.mm-col-intro p {
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

.mm-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 50px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    width: fit-content !important;
}

.mm-btn:hover {
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 205, 0, 0.4) !important;
    text-decoration: none !important;
}

.mm-btn i {
    font-size: 12px !important;
    transition: all 0.3s ease !important;
}

.mm-btn:hover i {
    transform: translateX(4px) !important;
}

/* ========================================
   COLUMNAS DE CATEGORÍAS
======================================== */
.mm-col {
    padding: 30px 25px !important;
    border-right: 1px solid #f0f0f0 !important;
    min-height: 320px !important;
}

.cbp-menu-column:last-child .mm-col,
.cbp-menu-column:last-child .mm-col-featured {
    border-right: none !important;
}

.mm-section {
    margin-bottom: 25px !important;
}

.mm-section:last-child {
    margin-bottom: 0 !important;
}

.mm-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--dv-yellow, #ffcd00) !important;
}

.mm-section-title i {
    color: var(--dv-green, #5fad48) !important;
    font-size: 14px !important;
}

/* Lista de links */
.mm-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mm-links li {
    margin-bottom: 8px !important;
}

.mm-links li:last-child {
    margin-bottom: 0 !important;
}

.mm-links a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    color: #666666 !important;
    text-decoration: none !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    background: transparent !important;
}

.mm-links a::before {
    content: '' !important;
    width: 4px !important;
    height: 4px !important;
    background: #999999 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.mm-links a:hover {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    padding-left: 18px !important;
    text-decoration: none !important;
}

.mm-links a:hover::before {
    background: var(--dv-yellow, #ffcd00) !important;
    width: 6px !important;
    height: 6px !important;
}

/* Badges para links */
.mm-badge {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.mm-badge.new {
    background: var(--dv-green, #5fad48) !important;
    color: #ffffff !important;
}

.mm-badge.top {
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000000 !important;
}

.mm-badge.offer {
    background: #ff4757 !important;
    color: #ffffff !important;
}

/* ========================================
   COLUMNA "QUIERO..." (ATAJOS/SHORTCUTS)
======================================== */
.mm-shortcuts .mm-section-title {
    border-bottom-color: var(--dv-green, #5fad48) !important;
}

.mm-shortcuts .mm-links a {
    background: linear-gradient(to right, transparent 0%, transparent 100%) !important;
    border: 1px solid #eeeeee !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
}

.mm-shortcuts .mm-links a::before {
    content: '→' !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    color: var(--dv-yellow, #ffcd00) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.mm-shortcuts .mm-links a:hover {
    background: linear-gradient(to right, rgba(255, 205, 0, 0.15) 0%, transparent 100%) !important;
    border-color: var(--dv-yellow, #ffcd00) !important;
    padding-left: 20px !important;
}

.mm-shortcuts .mm-links a:hover::before {
    background: none !important;
    width: auto !important;
    height: auto !important;
    color: #1a1a1a !important;
}

/* ========================================
   COLUMNA PRODUCTO DESTACADO
======================================== */
.mm-col-featured {
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%) !important;
    padding: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 320px !important;
}

.featured-product {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.featured-product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

.featured-badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000000 !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    z-index: 2 !important;
}

.featured-badge i {
    font-size: 10px !important;
}

.featured-product img {
    width: 100% !important;
    height: 140px !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

.featured-product:hover img {
    transform: scale(1.05) !important;
}

.featured-product h4,
.mm-col-featured h4 {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
}

.featured-product p,
.mm-col-featured p {
    font-size: 12px !important;
    color: #666666 !important;
    line-height: 1.5 !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
}

.featured-price {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #eeeeee !important;
}

.featured-price .price {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dv-green, #5fad48) !important;
}

.featured-price .btn-view {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.featured-product:hover .btn-view {
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000000 !important;
}

/* ========================================
   AJUSTES PARA COLUMNAS DEL MEGAMENU
======================================== */
.cbp-menu-column .cbp-menu-column-inner {
    height: 100% !important;
}

.cbp-menu-column .mm-col,
.cbp-menu-column .mm-col-intro,
.cbp-menu-column .mm-col-featured,
.cbp-menu-column .mm-shortcuts {
    height: 100% !important;
}

/* Quitar estilos por defecto del tema que puedan interferir */
.cbp-hrsub .cbp-menu-column-inner>div {
    margin: 0 !important;
}

.cbp-hrsub a {
    padding: 0 !important;
}

.cbp-hrsub .mm-links a {
    padding: 8px 12px !important;
}

.cbp-hrsub .mm-shortcuts .mm-links a {
    padding: 12px 15px !important;
}

.cbp-hrsub .mm-btn {
    padding: 12px 24px !important;
}

/* ========================================
   RESPONSIVE MEGAMENU
======================================== */
@media (max-width: 1400px) {
    .mm-col-intro {
        padding: 25px 20px !important;
    }

    .mm-col {
        padding: 25px 20px !important;
    }

    .mm-col-intro h3 {
        font-size: 20px !important;
    }

    .mm-section-title {
        font-size: 12px !important;
    }

    .mm-links a {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 1200px) {
    .mm-col-intro {
        padding: 20px 15px !important;
        min-height: 280px !important;
    }

    .mm-col {
        padding: 20px 15px !important;
        min-height: 280px !important;
    }

    .mm-col-featured {
        padding: 20px 15px !important;
        min-height: 280px !important;
    }

    .mm-col-intro .mm-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .mm-col-intro .mm-icon i {
        font-size: 22px !important;
    }

    .mm-col-intro h3 {
        font-size: 18px !important;
    }

    .mm-col-intro p {
        font-size: 13px !important;
    }

    .mm-btn {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }

    .featured-product img {
        height: 100px !important;
    }
}

@media (max-width: 991px) {
    .cbp-hrsub {
        border-radius: 0 !important;
    }

    .iqitmegamenu-submenu-container .menu_row {
        flex-direction: column !important;
    }

    .iqitmegamenu-submenu-container .col-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .mm-col-intro,
    .mm-col,
    .mm-col-featured,
    .mm-shortcuts {
        min-height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
    }

    .mm-col-featured {
        border-bottom: none !important;
    }
}

.categories-sidebar-content #PM_ASBlockOutput_1 {
    display: none;
}

#left-column .block-categories.block-links {
    display: none;
}

/* ==========================================================================
   FOOTER PERSONALIZADO - DOCEVOLTIOS CAMPER
   ========================================================================== */

/* ========================================
   SECCIÓN NEWSLETTER
======================================== */
.footer-newsletter-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8f5f0 100%);
    padding: 40px 0 30px;
    border-top: 1px solid #eee;
}

.newsletter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.newsletter-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.newsletter-stars {
    color: var(--dv-yellow, #ffcd00);
    font-size: 20px;
}

.newsletter-title {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    text-align: center;
}

.newsletter-form {
    width: 100%;
    max-width: 500px;
}

.newsletter-form-inner {
    display: flex;
    justify-content: center;
}

.newsletter-input-wrapper {
    display: flex;
    width: 100%;
    max-width: 450px;
    border: 2px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.newsletter-input-wrapper:focus-within {
    border-color: var(--dv-yellow, #ffcd00);
    box-shadow: 0 4px 20px rgba(255, 205, 0, 0.2);
}

.newsletter-input {
    flex: 1;
    border: none;
    padding: 14px 25px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 15px;
    color: #333;
    background: transparent;
    outline: none;
}

.newsletter-input::placeholder {
    color: #999;
}

.newsletter-btn {
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.newsletter-btn:hover {
    background: var(--dv-yellow, #ffcd00);
    color: #000000;
}

/* ========================================
   SECCIÓN PRINCIPAL DEL FOOTER
======================================== */
.footer-container.footer-style-custom {
    background: #fdfdfd;
    padding: 50px 0 40px;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
}

.footer-col {
    margin-bottom: 30px;
}

.footer-block {
    padding: 0 15px;
}

.footer-block-title {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
}

.footer-block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--dv-yellow, #ffcd00);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    color: #666666;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.footer-links a:hover {
    color: #1a1a1a;
    padding-left: 8px;
}

.footer-links a::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    width: 0;
    height: 2px;
    background: var(--dv-yellow, #ffcd00);
    transition: all 0.3s ease;
    transform: translateY(-50%);
}

.footer-links a:hover::before {
    width: 10px;
}

/* ========================================
   IMAGEN DECORATIVA DEL FOOTER
======================================== */
.footer-decoration {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

.footer-decoration-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ========================================
   FRANJA DE COPYRIGHT
======================================== */
.footer-copyright-section {
    background: #3b140c;
    padding: 20px 0;
}

.copyright-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    color: #ffffff;
    opacity: 0.9;
}

.payment-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.payment-icons i {
    font-size: 24px;
    color: #ffffff;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.payment-icons i:hover {
    opacity: 1;
    transform: scale(1.1);
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--dv-yellow, #ffcd00);
    color: #000000;
    transform: translateY(-3px);
}

.social-icons i {
    font-size: 18px;
}

/* ========================================
   RESPONSIVE FOOTER
======================================== */
@media (max-width: 991px) {
    .newsletter-title {
        font-size: 20px;
    }

    .newsletter-content {
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-stars {
        display: none;
    }

    .footer-container.footer-style-custom {
        padding: 40px 0 20px;
    }

    .copyright-wrapper {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .footer-newsletter-section {
        padding: 30px 15px;
    }

    .newsletter-input-wrapper {
        flex-direction: column;
        border-radius: 12px;
    }

    .newsletter-input {
        text-align: center;
        padding: 15px;
    }

    .newsletter-btn {
        border-radius: 0 0 10px 10px;
        padding: 15px;
    }

    .footer-col {
        margin-bottom: 25px;
    }

    .footer-block {
        text-align: center;
        padding: 0 10px;
    }

    .footer-block-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links a::before {
        display: none;
    }

    .footer-links a:hover {
        padding-left: 0;
        color: var(--dv-yellow, #ffcd00);
    }

    .copyright-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .payment-icons {
        order: 2;
    }

    .social-icons {
        order: 1;
    }

    .copyright-text {
        order: 3;
        font-size: 12px;
    }
}

/* Ocultar footer original del tema */
#footer-container-main:not(.footer-style-custom) {
    display: none !important;
}

/* Ocultar copyright original */
#footer-copyrights {
    display: none !important;
}

/* ==========================================================================
   PÁGINA DE PRODUCTO - REDISEÑO DOCEVOLTIOS CAMPER
   ========================================================================== */

/* Ocultar sidebar derecho que muestra "custom html" */
.product-sidebar,
.col-product-sidebar,
#right-column-product,
.sidebar.product-sidebar {
    display: none !important;
}

/* Hacer que la columna de info ocupe más espacio sin sidebar */
.col-product-info {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

/* ========================================
   TÍTULO DEL PRODUCTO
======================================== */
.product_header_container .page-title,
.product_header_container h1.page-title {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 15px;
    text-align: right !important;
}

/* ========================================
   PRECIOS - Estilo limpio
======================================== */
.product-prices {
    margin: 15px 0 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.product-prices .current-price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.product-prices .current-price-value,
.product-prices .product-price {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--dv-green, #5fad48);
}

.product-prices .regular-price {
    font-size: 18px;
    color: #999;
    text-decoration: line-through;
}

.product-prices .discount-percentage,
.product-prices .discount {
    background: #ff4757;
    color: #fff;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 700;
}

.product-prices .tax-shipping-delivery-label {
    font-size: 13px;
    color: #888;
    display: block;
    margin-top: 5px;
}

/* ========================================
   DESCRIPCIÓN CORTA
======================================== */
.product-information .product-description,
#product-description-short {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid var(--dv-yellow, #ffcd00);
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
}

/* ========================================
   CANTIDAD + BOTÓN AÑADIR
======================================== */
.product-add-to-cart {
    margin: 20px 0;
}

.product-quantity {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.product-quantity .qty-label,
.product-quantity label {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}

/* Input cantidad */
#quantity_wanted {
    width: 70px;
    height: 45px;
    text-align: center;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

#quantity_wanted:focus {
    border-color: var(--dv-yellow, #ffcd00);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 205, 0, 0.2);
}

/* Botones +/- */
.bootstrap-touchspin .btn {
    height: 45px;
    border: 2px solid #ddd;
    background: #f8f9fa;
    color: #1a1a1a;
}

.bootstrap-touchspin .btn:hover {
    background: var(--dv-yellow, #ffcd00);
    border-color: var(--dv-yellow, #ffcd00);
}

/* Botón añadir al carrito */
.product-add-to-cart .add-to-cart,
button.add-to-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 35px;
    background: var(--dv-yellow, #ffcd00);
    color: #000;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 205, 0, 0.3);
}

.product-add-to-cart .add-to-cart:hover,
button.add-to-cart:hover {
    background: #1a1a1a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.product-add-to-cart .add-to-cart i {
    font-size: 16px;
}

/* Wishlist y Compare en la misma línea */
.product-quantity-button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Botones de wishlist/compare */
.js-iqitwishlist-add,
.js-iqitcompare-add,
.wishlist-button-add,
.compare-button-add {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 50%;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.js-iqitwishlist-add:hover,
.wishlist-button-add:hover {
    border-color: #ff4757;
    color: #ff4757;
    background: #fff5f5;
}

.js-iqitcompare-add:hover,
.compare-button-add:hover {
    border-color: var(--dv-yellow, #ffcd00);
    color: #1a1a1a;
    background: #fffbe6;
}

/* ========================================
   THUMBNAILS
======================================== */
.product-images .thumb-container,
.product-cover-thumbnails .thumb-container {
    border: 2px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px;
}

.product-images .thumb-container:hover,
.product-images .thumb-container.selected,
.product-cover-thumbnails .thumb-container:hover,
.product-cover-thumbnails .thumb-container.selected {
    border-color: var(--dv-yellow, #ffcd00);
    box-shadow: 0 2px 8px rgba(255, 205, 0, 0.3);
}

/* ========================================
   TABS
======================================== */
.product-tabs .nav-tabs,
.tabs .nav-tabs {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
}

.product-tabs .nav-tabs .nav-link,
.tabs .nav-tabs .nav-link {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    padding: 12px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    transition: all 0.3s ease;
}

.product-tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:hover {
    color: #1a1a1a;
    border-bottom-color: #ddd;
}

.product-tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active {
    color: #1a1a1a;
    border-bottom-color: var(--dv-yellow, #ffcd00);
}

.product-tabs .tab-content,
.tabs .tab-content {
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
}

.product-tabs .tab-pane {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

/* ========================================
   BOTÓN WHATSAPP - Ocultar o estilizar
======================================== */
.whatsapp-button,
[class*="whatsapp"],
#wh-widget-send-button {
    /* Si quieres ocultarlo: display: none !important; */
}

.whatsapp-button.position-right {
    right: 70px;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 991px) {
    .col-product-info {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 30px;
    }

    .product_header_container .page-title,
    .product_header_container h1.page-title {
        font-size: 24px;
    }

    .product-prices .current-price-value,
    .product-prices .product-price {
        font-size: 28px;
    }
}

@media (max-width: 767px) {

    .product_header_container .page-title,
    .product_header_container h1.page-title {
        font-size: 22px;
    }

    .product-prices .current-price-value,
    .product-prices .product-price {
        font-size: 24px;
    }

    .product-add-to-cart .add-to-cart,
    button.add-to-cart {
        width: 100%;
        padding: 14px 20px;
    }

    .product-tabs .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .product-tabs .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 13px;
        white-space: nowrap;
    }
}

#main-product-wrapper {
    background: #ffffff;
    padding: 30px 0;
}

.product-info-row {
    margin: 0 -15px;
}

/* ========================================
   GALERÍA DE IMÁGENES
======================================== */
.col-product-image {
    padding: 0 30px;
}

/* Imagen principal */
.product-cover-wrapper {
    position: relative;
    background: #f8f9fa;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.product-cover-wrapper .product-cover {
    border-radius: 16px;
    overflow: hidden;
}

.product-cover-wrapper .product-cover img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.product-cover-wrapper:hover .product-cover img {
    transform: scale(1.03);
}

/* Thumbnails */
.product-images-thumbs,
.product-thumbs-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.product-images-thumbs .product-thumb,
.product-thumbs-grid .product-thumb,
.thumb-container {
    width: 80px;
    height: 80px;
    border: 2px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.product-images-thumbs .product-thumb:hover,
.product-thumbs-grid .product-thumb:hover,
.thumb-container:hover,
.thumb-container.active,
.product-thumb.active {
    border-color: var(--dv-yellow, #ffcd00);
    box-shadow: 0 4px 12px rgba(255, 205, 0, 0.3);
}

.product-images-thumbs .product-thumb img,
.product-thumbs-grid .product-thumb img,
.thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Flags/Badges en imagen */
.product-flags {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-flag {
    display: inline-block;
    padding: 8px 16px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    color: #fff;
}

.product-flag.new {
    background: var(--dv-green, #5fad48);
}

.product-flag.on-sale,
.product-flag.discount {
    background: #ff4757;
}

/* ========================================
   INFORMACIÓN DEL PRODUCTO
======================================== */
.col-product-info {
    padding: 0 30px;
}

#col-product-info {
    position: sticky;
    top: 120px;
}

/* Título del producto */
.product_header_container {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.product_header_container .page-title,
.product_header_container h1 {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
}

/* Referencia y stock */
.product-reference,
.product-quantities {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    color: #999;
    margin-bottom: 5px;
}

.product-quantities .stock-available {
    color: var(--dv-green, #5fad48);
    font-weight: 600;
}

/* ========================================
   PRECIOS
======================================== */
.product-prices {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #fffbe6 0%, #fff9d6 100%);
    border-radius: 12px;
    border: 2px solid var(--dv-yellow, #ffcd00);
}

.product-prices .product-price {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--dv-green, #5fad48);
    display: block;
    margin-bottom: 5px;
}

.product-prices .regular-price {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 20px;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
}

.product-prices .discount-percentage,
.product-prices .discount-amount {
    background: #ff4757;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
}

.product-prices .tax-shipping-delivery-label {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}

/* ========================================
   DESCRIPCIÓN CORTA
======================================== */
#product #main-product-wrapper .product-description {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid var(--dv-yellow, #ffcd00);
}

.product-miniature .product-description-short {
    margin-bottom: 10px;
}

.product-description p {
    margin-bottom: 10px;
}

.product-description p:last-child {
    margin-bottom: 0;
}

/* ========================================
   VARIANTES / ATRIBUTOS
======================================== */
.product-variants {
    margin-bottom: 25px;
}

.product-variants>.row {
    margin-bottom: 15px;
}

.product-variants .attribute-label {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ========================================
   CANTIDAD Y BOTÓN AÑADIR AL CARRITO
======================================== */
.product-add-to-cart {
    margin: 25px 0;
    padding: 0 25px;
    background: #f8f9fa;
    border-radius: 16px;
}

.product-quantity {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.product-quantity .qty-label {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
}

/* Input de cantidad */
.product-quantity .qty,
.product-quantity #quantity_wanted,
.product-quantity input[type="number"] {
    width: 80px !important;
    height: 50px !important;
    text-align: center !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
}

.product-quantity .qty:focus,
.product-quantity #quantity_wanted:focus,
.product-quantity input[type="number"]:focus {
    border-color: var(--dv-yellow, #ffcd00) !important;
    box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.2) !important;
    outline: none !important;
}

/* Bootstrap touchspin */
.bootstrap-touchspin {
    display: flex;
    align-items: center;
}

.bootstrap-touchspin .btn {
    width: 40px;
    height: 50px;
    border: 2px solid #ddd;
    background: #fff;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.bootstrap-touchspin .btn:hover {
    background: var(--dv-yellow, #ffcd00);
    border-color: var(--dv-yellow, #ffcd00);
}

.bootstrap-touchspin .btn-touchspin-down {
    border-radius: 10px 0 0 10px;
    border-right: none;
}

.bootstrap-touchspin .btn-touchspin-up {
    border-radius: 0 10px 10px 0;
    border-left: none;
}

/* Botón añadir al carrito */
.add-to-cart,
.btn.add-to-cart,
button.add-to-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 18px 30px !important;
    background: linear-gradient(135deg, var(--dv-yellow, #ffcd00) 0%, #e6b800 100%) !important;
    color: #000000 !important;
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    box-shadow: 0 8px 25px rgba(255, 205, 0, 0.4) !important;
}

.add-to-cart:hover,
.btn.add-to-cart:hover,
button.add-to-cart:hover {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}

.add-to-cart:disabled,
.btn.add-to-cart:disabled,
button.add-to-cart:disabled {
    background: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.add-to-cart i,
.btn.add-to-cart i {
    font-size: 20px !important;
}

/* ========================================
   BADGES DE CONFIANZA (añadir cerca del botón)
======================================== */
.product-reassurance,
.blockreassurance {
    margin-top: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
}

.product-reassurance .block-content,
.blockreassurance .block-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-reassurance .reassurance-item,
.blockreassurance li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.product-reassurance .reassurance-item:last-child,
.blockreassurance li:last-child {
    border-bottom: none;
}

.product-reassurance .reassurance-icon i,
.blockreassurance img,
.blockreassurance .icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dv-yellow, #ffcd00);
    border-radius: 50%;
    font-size: 18px;
    color: #000;
}

.product-reassurance .reassurance-text,
.blockreassurance span {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    color: #555;
}

/* ========================================
   TABS DE DESCRIPCIÓN
======================================== */
.product-tabs,
.tabs.product-tabs,
#product-tabs {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

/* Navegación de tabs */
.product-tabs .nav-tabs,
.tabs-nav {
    border-bottom: 2px solid #eee;
    margin-bottom: 25px;
    display: flex;
    gap: 5px;
}

.product-tabs .nav-tabs .nav-link,
.product-tabs .nav-tabs .nav-item a,
.tabs-nav a {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #666 !important;
    padding: 15px 25px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.product-tabs .nav-tabs .nav-link:hover,
.product-tabs .nav-tabs .nav-item a:hover,
.tabs-nav a:hover {
    color: #1a1a1a !important;
    border-bottom-color: #ddd !important;
}

.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-item.active a,
.tabs-nav a.active {
    color: #1a1a1a !important;
    border-bottom-color: var(--dv-yellow, #ffcd00) !important;
}

/* Contenido de tabs */
.product-tabs .tab-content,
.tabs-content {
    padding: 30px;
    background: #f8f9fa;
    border-radius: 16px;
}

.product-tabs .tab-pane {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

.product-tabs .tab-pane h2,
.product-tabs .tab-pane h3,
.product-tabs .tab-pane h4 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 700;
    color: #1a1a1a;
    margin: 20px 0 10px;
}

.product-tabs .tab-pane ul {
    padding-left: 20px;
}

.product-tabs .tab-pane li {
    margin-bottom: 8px;
}

/* Detalles del producto */
.product-details-table,
.data-sheet {
    width: 100%;
    margin: 0;
}

.product-details-table tr,
.data-sheet li {
    display: flex;
    border-bottom: 1px solid #eee;
}

.product-details-table td,
.data-sheet .name,
.data-sheet .value {
    padding: 12px 15px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
}

.product-details-table td:first-child,
.data-sheet .name {
    font-weight: 600;
    color: #1a1a1a;
    width: 40%;
    background: #f0f0f0;
}

.product-details-table td:last-child,
.data-sheet .value {
    color: #555;
    width: 60%;
}

/* ========================================
   INFO ADICIONAL (Share, Wishlist, etc)
======================================== */
.product-additional-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-sharing {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-sharing span {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}

.social-sharing a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 50%;
    color: #666;
    transition: all 0.3s ease;
}

.social-sharing a:hover {
    background: var(--dv-yellow, #ffcd00);
    color: #000;
    transform: translateY(-2px);
}

/* Wishlist button */
.wishlist-button-add,
.wishlist-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid #ddd;
    border-radius: 50px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wishlist-button-add:hover,
.wishlist-btn:hover {
    border-color: #ff4757;
    color: #ff4757;
}

.wishlist-button-add i,
.wishlist-btn i {
    font-size: 16px;
}

/* ========================================
   PRODUCTOS RELACIONADOS
======================================== */
.product-accessories {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid #eee;
}

.product-accessories .section-title,
.product-accessories .block-title {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    position: relative !important;
}

.product-accessories .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--dv-yellow, #ffcd00);
    border-radius: 2px;
}

/* ========================================
   RESPONSIVE - PÁGINA DE PRODUCTO
======================================== */
@media (max-width: 991px) {

    .col-product-image,
    .col-product-info {
        padding: 0 15px;
    }

    #col-product-info {
        position: static;
    }

    .product_header_container .page-title,
    .product_header_container h1 {
        font-size: 26px !important;
    }

    .product-prices .product-price {
        font-size: 30px;
    }

    .product-tabs .nav-tabs .nav-link,
    .product-tabs .nav-tabs .nav-item a {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    #main-product-wrapper {
        padding: 20px 0;
    }

    .product-cover-wrapper {
        border-radius: 12px;
        margin-bottom: 15px;
    }

    .product-images-thumbs .product-thumb,
    .product-thumbs-grid .product-thumb,
    .thumb-container {
        width: 60px;
        height: 60px;
    }

    .product_header_container .page-title,
    .product_header_container h1 {
        font-size: 22px !important;
    }

    .product-prices {
        padding: 15px;
    }

    .product-prices .product-price {
        font-size: 26px;
    }

    .product-add-to-cart {
        padding: 15px;
        margin: 15px 0;
    }

    .add-to-cart,
    .btn.add-to-cart,
    button.add-to-cart {
        padding: 15px 20px !important;
        font-size: 16px !important;
    }

    .product-tabs .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-tabs .nav-tabs .nav-link,
    .product-tabs .nav-tabs .nav-item a {
        padding: 10px 15px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    .product-tabs .tab-content {
        padding: 20px;
        border-radius: 12px;
    }

    .product-additional-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   SELECTOR DE CANTIDAD - DISEÑO SIMPLIFICADO
   ========================================================================== */

/* Toda la fila de botones en línea */
.product-add-to-cart .product-quantity.row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Columnas auto para que se ajusten al contenido */
.product-add-to-cart .product-quantity .col,
.product-add-to-cart .product-quantity .col-add-qty,
.product-add-to-cart .product-quantity .col-add-btn,
.product-add-to-cart .product-quantity .col-add-wishlist,
.product-add-to-cart .product-quantity .col-add-compare {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Contenedor del qty */
.product-add-to-cart .qty {
    display: flex !important;
    align-items: center !important;
}

/* Input group - sobreescribir estilos del tema base */
.product-add-to-cart .bootstrap-touchspin,
.product-add-to-cart .input-group.bootstrap-touchspin {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    width: auto !important;
}

/* Input de cantidad */
.product-add-to-cart #quantity_wanted,
.product-add-to-cart .bootstrap-touchspin input[type="number"] {
    width: 50px !important;
    height: 44px !important;
    min-width: 50px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    color: #1a1a1a !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-add-to-cart #quantity_wanted:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Ocultar spinners nativos del input number */
.product-add-to-cart #quantity_wanted::-webkit-outer-spin-button,
.product-add-to-cart #quantity_wanted::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

/* Contenedor de botones - SOBREESCRIBIR display:table-cell del tema */
.product-add-to-cart .input-group-btn-vertical,
.product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: auto !important;
    vertical-align: unset !important;
    white-space: normal !important;
    border-left: 1px solid #ddd !important;
}

/* Botones +/- - SOBREESCRIBIR estilos del tema */
.product-add-to-cart .btn-touchspin,
.product-add-to-cart .bootstrap-touchspin-up,
.product-add-to-cart .bootstrap-touchspin-down,
.product-add-to-cart .input-group-btn-vertical>.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    border: none !important;
    background: #f5f5f5 !important;
    color: #555 !important;
    font-size: 10px !important;
    cursor: pointer !important;
    position: static !important;
    float: none !important;
    border-radius: 0 !important;
}

.product-add-to-cart .bootstrap-touchspin-up {
    border-bottom: 1px solid #ddd !important;
    border-radius: 0 6px 0 0 !important;
}

.product-add-to-cart .bootstrap-touchspin-down {
    margin-top: 0 !important;
    border-radius: 0 0 6px 0 !important;
}

.product-add-to-cart .btn-touchspin:hover,
.product-add-to-cart .bootstrap-touchspin-up:hover,
.product-add-to-cart .bootstrap-touchspin-down:hover {
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000 !important;
}

/* Iconos de los botones - ANULAR position:absolute del tema */
.product-add-to-cart .input-group-btn-vertical i,
.product-add-to-cart .btn-touchspin i,
.product-add-to-cart .touchspin-up,
.product-add-to-cart .touchspin-down {
    position: static !important;
    top: unset !important;
    left: unset !important;
    font-size: 10px !important;
}

/* Ocultar prefix/postfix vacíos */
.product-add-to-cart .bootstrap-touchspin-prefix,
.product-add-to-cart .bootstrap-touchspin-postfix {
    display: none !important;
}

/* Botón añadir al carrito */
.product-add-to-cart .add-to-cart {
    padding: 12px 25px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    height: 48px !important;
}

/* Botones wishlist y compare */
.product-add-to-cart .btn-iqitwishlist-add,
.product-add-to-cart .btn-iqitcompare-add {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 2px solid #eee !important;
    border-radius: 50% !important;
    color: #999 !important;
    transition: all 0.3s ease !important;
}

.product-add-to-cart .btn-iqitwishlist-add:hover {
    border-color: #ff4757 !important;
    color: #ff4757 !important;
    background: #fff5f5 !important;
}

.product-add-to-cart .btn-iqitcompare-add:hover {
    border-color: var(--dv-yellow, #ffcd00) !important;
    color: #1a1a1a !important;
    background: #fffbe6 !important;
}

/* Responsive - en móvil */
@media (max-width: 575px) {
    .product-add-to-cart .product-quantity.row {
        flex-wrap: wrap !important;
    }

    .product-add-to-cart .col-add-qty {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .product-add-to-cart .col-add-btn {
        flex: 1 !important;
    }

    .product-add-to-cart .add-to-cart {
        width: 100% !important;
    }
}

/* ==========================================================================
   PRECIOS PÁGINA DE PRODUCTO - ESTILO MINIATURA
   ========================================================================== */

/* Contenedor de info técnica - REF, EAN, Stock */
.product-prices .product-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.product-prices .product-info-container span {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 4px;
}

.product-prices .product-ref-info {
    color: #888 !important;
}

.product-prices .product-stock-info {
    color: #5fad48 !important;
    background: #e8f5e3 !important;
}

.product-prices .product-ean-info {
    color: #666 !important;
}

/* Contenedor de precio */
.product-prices .product-price-and-shipping {
    margin: 0;
    padding: 0;
    text-align: right;
}

/* Precio principal - estilo CATÁLOGO/REVISTA */
.product-prices .product-price,
.product-prices .current-price-value {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 52px;
    font-weight: 700;
    font-style: italic;
    color: #2a2a2a;
    display: inline-block;
    line-height: 1;
    letter-spacing: -1px;
    transform: skewX(-5deg);
    /* Borde blanco + sombra más visible */
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        2px 2px 4px rgba(0, 0, 0, 0.15);
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.8);
}

/* Impuestos incluidos - estilo revista */
.product-prices .tax-included-label {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: #888;
    display: block;
    margin-top: 3px;
    text-align: right;
    letter-spacing: 0;
}

/* Precio regular tachado */
.product-prices .regular-price {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 18px;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
}

/* Badge de descuento */
.product-prices .badge-discount,
.product-prices .discount-percentage,
.product-prices .discount-amount {
    background: #e53935 !important;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
}

/* Badge de disponibilidad */
.product-prices #product-availability {
    display: inline-block;
    margin-bottom: 15px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
}

.product-prices .badge-success {
    background: #5fad48 !important;
}

.product-prices .badge-warning {
    background: #ffc107 !important;
    color: #1a1a1a !important;
}

.product-prices .badge-danger {
    background: #e53935 !important;
}

/* Quitar estilos anteriores que no queremos */
.product-prices.js-product-prices {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
}

/* Responsive */
@media (max-width: 767px) {
    .product-prices .product-price {
        font-size: 28px;
    }

    .product-prices .product-info-container {
        gap: 8px;
    }

    .product-prices .product-info-container span {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* ==========================================================================
   THUMBNAILS DE PRODUCTO - SEPARACIÓN
   ========================================================================== */

/* Contenedor de thumbnails */
.product-images .js-thumb,
.product-thumbs .thumb-container,
.product-thumbs-grid .thumb-container,
#product-images-thumbs .thumb-container,
.product-cover-thumbnails .thumb-container {
    margin: 5px !important;
}

/* Galería con gap */
.product-images,
.product-thumbs,
.product-thumbs-grid,
#product-images-thumbs,
.product-cover-thumbnails {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Thumbnails individuales */
.product-images .js-thumb img,
.thumb-container img {
    border-radius: 6px;
}

/* ==========================================================================
   SUBCATEGORÍAS CIRCULARES EN CATEGORÍAS PADRE
   ========================================================================== */

/* Contenedor principal */
.subcategories-circular-block {
    padding: 30px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}

/* Título "Subcategorías de X" */
.subcategories-title {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #333;
    margin-bottom: 25px;
}

.subcategories-title em {
    font-style: italic;
}

/* Grid de subcategorías */
.subcategories-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px;
}

/* Cada item de subcategoría */
.subcategory-item {
    flex: 0 0 auto;
    text-align: center;
    width: 140px;
}

/* Enlace */
.subcategory-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.subcategory-link:hover {
    transform: translateY(-5px);
}

/* Imagen circular */
.subcategory-image-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    background: #f8f8f8;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.subcategory-image-circle:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.subcategory-image-circle img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Placeholder sin imagen */
.subcategory-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9e9e9;
    border-radius: 50%;
}

.subcategory-no-image i {
    font-size: 30px;
    color: #bbb;
}

/* Nombre de subcategoría */
.subcategory-name-text {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 5px;
    line-height: 1.3;
}

/* Enlace Ver Todo */
.subcategory-view-all {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 12px;
    color: #c96d14;
    font-weight: 400;
    transition: color 0.2s ease;
}

.subcategory-link:hover .subcategory-view-all {
    color: #a85a0f;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 991px) {
    .subcategories-grid {
        gap: 20px;
    }

    .subcategory-item {
        width: 120px;
    }

    .subcategory-image-circle {
        width: 100px;
        height: 100px;
        padding: 12px;
    }
}

@media (max-width: 575px) {
    .subcategories-grid {
        gap: 15px;
        justify-content: center;
    }

    .subcategory-item {
        width: 100px;
    }

    .subcategory-image-circle {
        width: 80px;
        height: 80px;
        padding: 10px;
    }

    .subcategory-name-text {
        font-size: 12px;
    }

    .subcategory-view-all {
        font-size: 10px;
    }
}

/* ==========================================================================
   SLIDER DE SUBCATEGORÍAS - SWIPER
   ========================================================================== */

/* Wrapper del slider */
.subcategories-slider-wrapper {
    position: relative;
    padding: 0 40px;
}

/* Container del swiper */
.subcategories-swiper {
    overflow: hidden;
}

/* Slide individual - resetear width */
.subcategories-swiper .swiper-slide {
    width: auto !important;
}

.subcategories-swiper .subcategory-item {
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
}

/* Botones de navegación */
.subcategories-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.subcategories-nav:hover {
    background: var(--dv-yellow, #ffcd00);
    border-color: var(--dv-yellow, #ffcd00);
}

.subcategories-nav i {
    font-size: 14px;
    color: #555;
}

.subcategories-nav:hover i {
    color: #000;
}

.subcategories-nav-prev {
    left: 0;
}

.subcategories-nav-next {
    right: 0;
}

/* Responsive slider */
@media (max-width: 767px) {
    .subcategories-slider-wrapper {
        padding: 0 30px;
    }

    .subcategories-nav {
        width: 28px;
        height: 28px;
    }

    .subcategories-nav i {
        font-size: 12px;
    }

    .subcategories-swiper .subcategory-item {
        max-width: 100px;
    }
}

/* ==========================================================================
   CARRITO HEADER - INTEGRACIÓN CON ICONOS
   ========================================================================== */

/* CRÍTICO: Ocultar el contenido del carrito por defecto */
.header-cart-wrapper #_desktop_blockcart-content,
.header-cart-wrapper .dropdown-menu,
.header-cart-wrapper .dropdown-menu-custom {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

/* Mostrar dropdown cuando se hace click (Bootstrap añade clase .show) */
.header-cart-wrapper .dropdown-menu.show,
.header-cart-wrapper .dropdown-menu-custom.show,
.header-cart-wrapper #_desktop_blockcart-content.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

/* Ocultar subtotales, botones que se muestran fuera del dropdown */
.header-cart-wrapper .cart-subtotals,
.header-cart-wrapper .cart-totals,
.header-cart-wrapper .cart-buttons {
    display: none !important;
}

/* Solo mostrar dentro del dropdown cuando está abierto */
.header-cart-wrapper .dropdown-menu.show .cart-subtotals,
.header-cart-wrapper .dropdown-menu.show .cart-totals,
.header-cart-wrapper .dropdown-menu.show .cart-buttons,
.header-cart-wrapper .dropdown-menu-custom.show .cart-subtotals,
.header-cart-wrapper .dropdown-menu-custom.show .cart-totals,
.header-cart-wrapper .dropdown-menu-custom.show .cart-buttons {
    display: block !important;
}

/* Contenedor del carrito en la barra de iconos */
.header-cart-wrapper {
    position: relative;
}

/* Estilo del carrito para que coincida con los otros iconos */
.header-cart-wrapper .cart-toogle,
.header-cart-wrapper .header-cart-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: var(--dv-yellow, #ffcd00) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.header-cart-wrapper .cart-toogle:hover,
.header-cart-wrapper .header-cart-btn:hover {
    color: #fff !important;
}

/* Icono del carrito */
.header-cart-wrapper .cart-toogle .icon,
.header-cart-wrapper .header-cart-btn .icon {
    font-size: 24px !important;
    margin-bottom: 5px !important;
    position: relative !important;
}

/* Badge del contador de productos */
.header-cart-wrapper .cart-products-count-btn {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    background: var(--dv-yellow, #ffcd00) !important;
    color: #000 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Título "Carrito" debajo del icono */
.header-cart-wrapper .info-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.header-cart-wrapper .info-wrapper .title {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Ocultar detalles extra del carrito en el header */
.header-cart-wrapper .cart-toggle-details,
.header-cart-wrapper .cart-separator {
    display: none !important;
}

/* Dropdown del carrito */
.header-cart-wrapper .dropdown-menu,
.header-cart-wrapper .dropdown-menu-custom {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    min-width: 320px !important;
    max-width: 380px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 15px !important;
    z-index: 9999 !important;
}

/* Contenido del carrito */
.header-cart-wrapper .blockcart-content {
    padding: 15px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Título del carrito en dropdown */
.header-cart-wrapper .cart-title {
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
}

.header-cart-wrapper .cart-title .modal-title {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

/* Botón cerrar */
.header-cart-wrapper #js-cart-close {
    font-size: 24px !important;
    color: #999 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
}

.header-cart-wrapper #js-cart-close:hover {
    color: #333 !important;
}

/* Lista de productos */
.header-cart-wrapper .cart-products {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-cart-wrapper .cart-products li {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.header-cart-wrapper .cart-products li:last-child {
    border-bottom: none !important;
}

/* Imagen del producto */
.header-cart-wrapper .product-image img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #f8f8f8 !important;
}

/* Nombre del producto */
.header-cart-wrapper .col-info a {
    font-size: 13px !important;
    color: #333 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.header-cart-wrapper .col-info a:hover {
    color: var(--dv-yellow, #c96d14) !important;
}

/* Ocultar formulario de añadir al carrito en dropdown */
.header-cart-wrapper [id^="updated-add-cart-btn-"],
.header-cart-wrapper .product-add-cart,
.header-cart-wrapper .input-group-add-cart {
    display: none !important;
}

/* Input de cantidad simplificado */
.header-cart-wrapper .bootstrap-touchspin {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

.header-cart-wrapper .block-cart-product-quantity {
    width: 35px !important;
    text-align: center !important;
    border: none !important;
    font-size: 13px !important;
    padding: 4px !important;
}

.header-cart-wrapper .input-group-btn-vertical {
    display: flex !important;
    flex-direction: column !important;
}

.header-cart-wrapper .btn-touchspin {
    width: 22px !important;
    height: 16px !important;
    padding: 0 !important;
    border: none !important;
    border-left: 1px solid #ddd !important;
    background: #f8f8f8 !important;
    font-size: 9px !important;
    cursor: pointer !important;
}

.header-cart-wrapper .btn-touchspin:hover {
    background: #eee !important;
}

/* Botón eliminar y precio */
.header-cart-wrapper .remove-from-cart {
    color: #999 !important;
    font-size: 14px !important;
    margin-left: 10px !important;
}

.header-cart-wrapper .remove-from-cart:hover {
    color: #e53935 !important;
}

/* Totales */
.header-cart-wrapper .cart-subtotals,
.header-cart-wrapper .cart-totals {
    padding: 10px 15px !important;
    background: #f9f9f9 !important;
}

.header-cart-wrapper .cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    padding: 3px 0 !important;
}

.header-cart-wrapper .cart-totals .clearfix {
    display: flex !important;
    justify-content: space-between !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* Botones del carrito */
.header-cart-wrapper .cart-buttons {
    padding: 15px !important;
    background: #fff !important;
}

.header-cart-wrapper .cart-buttons .btn-primary {
    background: var(--dv-yellow, #ffcd00) !important;
    border-color: var(--dv-yellow, #ffcd00) !important;
    color: #000 !important;
    font-weight: 600 !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
}

.header-cart-wrapper .cart-buttons .btn-primary:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.header-cart-wrapper .cart-buttons .btn-secondary {
    background: transparent !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
}

.header-cart-wrapper .cart-buttons .btn-secondary:hover {
    background: #f5f5f5 !important;
}

/* Responsive */
@media (max-width: 991px) {

    .header-cart-wrapper .dropdown-menu,
    .header-cart-wrapper .dropdown-menu-custom {
        min-width: 280px !important;
    }
}

@media (max-width: 767px) {

    .header-cart-wrapper .dropdown-menu,
    .header-cart-wrapper .dropdown-menu-custom {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   SIDEBAR DEL CARRITO - NUEVO
   ========================================================================== */

/* Icono del carrito en el header */
.cart-icon-trigger {
    position: relative;
}

.cart-icon-trigger a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--dv-yellow, #ffcd00);
    cursor: pointer;
}

.cart-icon-trigger a:hover {
    color: #fff;
}

.cart-icon-trigger>a>i {
    font-size: 24px;
    margin-bottom: 5px;
}

.floating-wpp {
    right: 75px !important;
}

/* Badge del contador */
.cart-count-badge {
    position: absolute;
    top: 0px;
    right: 20px;
    background: var(--dv-yellow, #ffcd00);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Overlay del sidebar */
.cart-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Sidebar del carrito */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
}

.cart-sidebar.active {
    right: 0;
}

/* Header del sidebar */
.cart-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #1a1a1a;
    color: #fff;
    flex-shrink: 0;
}

.cart-sidebar-title {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-sidebar-title i {
    color: var(--dv-yellow, #ffcd00);
}

.cart-sidebar-count {
    font-weight: 400;
    opacity: 0.7;
}

.cart-sidebar-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.cart-sidebar-close:hover {
    opacity: 1;
}

/* Contenido del sidebar */
.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Lista de productos */
.cart-sidebar-products {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-product-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

/* Imagen del producto */
.cart-product-image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
}

.cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: #f8f8f8;
}

/* Info del producto */
.cart-product-info {
    flex: 1;
    min-width: 0;
}

.cart-product-name {
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 5px;
}

.cart-product-name:hover {
    color: var(--dv-yellow, #c96d14);
}

/* Precios */
.cart-product-prices {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.cart-product-price,
.cart-product-price-new {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.cart-product-price-old {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.cart-product-price-new {
    color: #e53935;
}

/* Cantidad */
.cart-product-quantity {
    font-size: 13px;
    color: #666;
}

.cart-product-quantity .qty-value {
    font-weight: 600;
    color: #1a1a1a;
}

/* Botón eliminar */
.cart-product-actions {
    flex-shrink: 0;
}

.cart-product-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #999;
    text-decoration: none;
    transition: all 0.2s;
}

.cart-product-remove:hover {
    background: #e53935;
    color: #fff;
}

/* Carrito vacío */
.cart-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.cart-sidebar-empty i {
    font-size: 60px;
    color: #ddd;
    margin-bottom: 20px;
}

.cart-sidebar-empty p {
    font-size: 16px;
    color: #999;
    margin-bottom: 20px;
}

.btn-cart-continue {
    background: var(--dv-yellow, #ffcd00);
    color: #000;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
}

.btn-cart-continue:hover {
    background: #000;
    color: #fff;
}

/* Footer del sidebar */
.cart-sidebar-footer {
    border-top: 1px solid #eee;
    background: #f9f9f9;
    flex-shrink: 0;
}

/* Totales */
.cart-sidebar-totals {
    padding: 15px 20px;
}

.cart-total-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
    color: #666;
}

.cart-total-line.cart-total-main {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.cart-tax-info {
    font-size: 12px;
    color: #999;
    text-align: right;
    padding-top: 5px;
}

/* Botones */
.cart-sidebar-buttons {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-cart-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--dv-yellow, #ffcd00);
    color: #000;
    padding: 14px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
}

.btn-cart-checkout:hover {
    background: #000;
    color: #fff;
}

.btn-cart-view {
    display: block;
    background: transparent;
    color: #555;
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid #ddd;
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
}

.btn-cart-view:hover {
    background: #f0f0f0;
}

/* Bloquear scroll del body cuando sidebar está abierto */
body.cart-sidebar-open {
    overflow: hidden;
}

/* Responsive */
@media (max-width: 480px) {
    .cart-sidebar {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    .cart-product-item {
        padding: 12px 15px;
    }

    .cart-product-image {
        width: 60px;
        height: 60px;
    }
}

/* ==========================================================================
   SISTEMA DE RESEÑAS CARTOON - DOCEVOLTIOS CAMPER
   ========================================================================== */

/* Contenedor Principal */
.dv-reviews-container {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: 20px;
    padding: 30px;
    margin: 30px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 2px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.dv-reviews-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dv-yellow), var(--dv-green), var(--dv-yellow));
    border-radius: 20px 20px 0 0;
}

/* Sin Reseñas - CTA Atractivo */
.dv-reviews-empty {
    text-align: center;
    padding: 40px 20px;
}

.dv-reviews-empty-icon {
    font-size: 60px;
    margin-bottom: 20px;
    display: inline-block;
}

.dv-star-bounce {
    display: inline-block;
    animation: starBounce 2s ease-in-out infinite;
}

@keyframes starBounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(-5deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

.dv-reviews-empty-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dv-dark);
    margin-bottom: 10px;
    font-family: var(--dv-font) !important;
}

.dv-reviews-empty-text {
    font-size: 16px;
    color: var(--dv-gray);
    margin-bottom: 25px;
    font-family: var(--dv-font) !important;
}

/* Botones de Reseña Cartoon */
.dv-btn-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: var(--dv-font) !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.dv-btn-review:hover {
    transform: translateY(-3px);
    text-decoration: none !important;
}

.dv-btn-review:active {
    transform: translateY(-1px);
}

.dv-btn-icon {
    font-size: 18px;
}

.dv-btn-review-primary {
    background: linear-gradient(135deg, var(--dv-yellow), var(--dv-yellow-dark));
    color: var(--dv-black) !important;
    box-shadow: 0 4px 15px rgba(255, 205, 0, 0.4);
}

.dv-btn-review-primary:hover {
    background: linear-gradient(135deg, var(--dv-yellow-light), var(--dv-yellow));
    box-shadow: 0 6px 20px rgba(255, 205, 0, 0.5);
    color: var(--dv-black) !important;
}

.dv-btn-review-secondary {
    background: linear-gradient(135deg, var(--dv-green), var(--dv-green-dark));
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(95, 173, 72, 0.4);
}

.dv-btn-review-secondary:hover {
    background: linear-gradient(135deg, var(--dv-green-light), var(--dv-green));
    box-shadow: 0 6px 20px rgba(95, 173, 72, 0.5);
    color: #fff !important;
}

.dv-btn-review-outline {
    background: transparent;
    color: var(--dv-gray-dark) !important;
    border: 2px solid var(--dv-gray-light);
    box-shadow: none;
}

.dv-btn-review-outline:hover {
    background: var(--dv-off-white);
    border-color: var(--dv-yellow);
    color: var(--dv-black) !important;
}

/* Prompt de Login */
.dv-login-prompt {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(145deg, #fff8e0, #fff);
    border-radius: 15px;
    border: 2px dashed var(--dv-yellow);
}

.dv-login-text {
    font-size: 15px;
    color: var(--dv-gray-dark);
    margin-bottom: 15px;
    font-family: var(--dv-font) !important;
}

.dv-login-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.dv-login-mini {
    margin-top: 15px;
}

/* Header de Reseñas */
.dv-reviews-header {
    padding: 0 0 20px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 20px;
}

.dv-reviews-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.dv-reviews-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dv-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--dv-font) !important;
}

.dv-reviews-emoji {
    font-size: 28px;
}

.dv-reviews-count {
    color: var(--dv-gray);
    font-weight: 500;
}

.dv-reviews-average {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Lista de Reseñas */
.dv-reviews-list {
    padding: 0;
}

.dv-reviews-list .product-comment-list-item {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.dv-reviews-list .product-comment-list-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Footer de Reseñas */
.dv-reviews-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    margin-top: 20px;
}

/* Paginación Cartoon */
.dv-reviews-pagination ul {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dv-reviews-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f5f5f5;
    color: var(--dv-gray-dark);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dv-reviews-pagination ul li span:hover {
    background: var(--dv-yellow);
    color: var(--dv-black);
}

.dv-reviews-pagination ul li.active span {
    background: var(--dv-yellow);
    color: var(--dv-black);
}

/* Empty Review Item */
.dv-review-empty-item {
    text-align: center;
    padding: 30px 20px;
}

.dv-empty-review-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.dv-empty-icon {
    font-size: 50px;
}

.dv-empty-text {
    font-size: 16px;
    color: var(--dv-gray);
    margin: 0;
    font-family: var(--dv-font) !important;
}

/* ==========================================================================
   MODAL DE RESEÑA CARTOON
   ========================================================================== */

.dv-modal-cartoon .modal-dialog {
    max-width: 700px;
    margin: 30px auto;
}

.dv-modal-content {
    border-radius: 20px !important;
    border: none !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

.dv-modal-header {
    background: linear-gradient(135deg, var(--dv-yellow), var(--dv-yellow-dark)) !important;
    padding: 20px 25px !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dv-modal-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dv-modal-emoji {
    font-size: 32px;
}

.dv-modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dv-black) !important;
    margin: 0 !important;
    font-family: var(--dv-font) !important;
}

.dv-modal-close {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 1 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.dv-modal-close:hover {
    background: rgba(0, 0, 0, 0.2) !important;
}

.dv-modal-close span {
    font-size: 24px;
    line-height: 1;
    color: var(--dv-black);
}

.dv-modal-body {
    padding: 25px !important;
}

/* Producto Info en Modal */
.dv-review-product-info {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 25px;
}

.dv-review-product-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dv-review-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dv-review-product-details {
    flex: 1;
}

.dv-review-product-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--dv-dark);
    margin: 0 0 8px;
    font-family: var(--dv-font) !important;
}

.dv-review-product-desc {
    font-size: 13px;
    color: var(--dv-gray);
    line-height: 1.5;
    font-family: var(--dv-font) !important;
}

/* Sección de Calificación */
.dv-rating-section {
    margin-bottom: 25px;
}

.dv-rating-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--dv-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dv-font) !important;
}

.dv-rating-emoji {
    font-size: 20px;
}

.dv-criterions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dv-criterion-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.dv-criterion-item:last-child {
    border-bottom: none;
}

.dv-criterion-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.dv-criterion-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--dv-gray-dark);
    margin: 0;
    font-family: var(--dv-font) !important;
}

/* Estrellas Interactivas */
.dv-grade-stars {
    display: flex;
    gap: 5px;
}

.dv-grade-stars .star-content div.star,
.dv-grade-stars .star-content div.star-on,
.dv-grade-stars .star-content div.star-hover {
    width: 28px !important;
    height: 28px !important;
    transition: transform 0.2s ease;
}

.dv-grade-stars .star-content div.star-hover {
    transform: scale(1.2);
}

/* Formulario de Reseña */
.dv-form-section {
    margin-bottom: 20px;
}

.dv-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dv-form-group {
    margin-bottom: 15px;
}

.dv-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dv-dark);
    margin-bottom: 8px;
    font-family: var(--dv-font) !important;
}

.dv-required {
    color: #e74c3c;
}

.dv-form-input,
.dv-form-textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-family: var(--dv-font) !important;
    background: #fff;
}

.dv-form-input:focus,
.dv-form-textarea:focus {
    outline: none;
    border-color: var(--dv-yellow);
    box-shadow: 0 0 0 4px rgba(255, 205, 0, 0.2);
}

.dv-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.dv-form-input::placeholder,
.dv-form-textarea::placeholder {
    color: #aaa;
}

/* Acciones del Formulario */
.dv-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.dv-required-note {
    font-size: 12px;
    color: var(--dv-gray);
    margin: 0;
    font-family: var(--dv-font) !important;
}

.dv-action-buttons {
    display: flex;
    gap: 12px;
}

/* Ocultar el header original del módulo si está vacío */
#product-comments-list-header:not(.dv-reviews-header) {
    display: none !important;
}

/* ==========================================================================
   RESPONSIVE - SISTEMA DE RESEÑAS
   ========================================================================== */

@media (max-width: 768px) {
    .dv-reviews-container {
        padding: 20px 15px;
        border-radius: 15px;
        margin: 20px 0;
    }

    .dv-reviews-empty-title {
        font-size: 20px;
    }

    .dv-reviews-empty-text {
        font-size: 14px;
    }

    .dv-reviews-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dv-reviews-title {
        font-size: 18px;
    }

    .dv-reviews-footer {
        flex-direction: column;
        align-items: center;
    }

    .dv-login-buttons {
        flex-direction: column;
        width: 100%;
    }

    .dv-btn-review {
        width: 100%;
        justify-content: center;
    }

    .dv-modal-cartoon .modal-dialog {
        margin: 15px;
    }

    .dv-review-product-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dv-form-row-2col {
        grid-template-columns: 1fr;
    }

    .dv-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dv-action-buttons {
        flex-direction: column;
        width: 100%;
    }
}

/* ==========================================================================
   FORMULARIO DE NOTIFICACIÓN - PS_EMAILALERTS (Stock Notification)
   ========================================================================== */

/* Contenedor principal del formulario */
.js-mailalert {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff8e0 100%) !important;
    border: 2px solid var(--dv-yellow) !important;
    border-radius: 16px !important;
    padding: 25px 30px !important;
    margin: 20px 0 !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(255, 205, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.js-mailalert::before {
    content: "\f0f3";
    font-family: "FontAwesome" !important;
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    font-size: 80px !important;
    color: rgba(255, 205, 0, 0.15) !important;
    pointer-events: none !important;
    transform: rotate(15deg) !important;
}

.js-mailalert:hover {
    box-shadow: 0 6px 25px rgba(255, 205, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Título visual (añadido vía CSS) */
.js-mailalert .tabs {
    position: relative !important;
}

/* Contenedor del formulario */
.js-mailalert form,
.js-mailalert .form-inline {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    max-width: 450px !important;
    margin: 0 auto !important;
}

/* Input de email modernizado */
.js-mailalert input[type="email"],
.js-mailalert .form-control {
    width: 100% !important;
    max-width: 400px !important;
    padding: 14px 20px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 30px !important;
    font-size: 15px !important;
    font-family: var(--dv-font) !important;
    color: var(--dv-dark) !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
}

.js-mailalert input[type="email"]:focus,
.js-mailalert .form-control:focus {
    border-color: var(--dv-yellow) !important;
    box-shadow: 0 4px 15px rgba(255, 205, 0, 0.3) !important;
    outline: none !important;
}

.js-mailalert input[type="email"]::placeholder,
.js-mailalert .form-control::placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

/* Ocultar input-group wrappers vacíos */
.js-mailalert .input-group {
    margin: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.js-mailalert .input-group:empty,
.js-mailalert .input-group:has(> input[type="hidden"]:only-child) {
    display: none !important;
}

/* Quitar los br innecesarios */
.js-mailalert br {
    display: none !important;
}

/* Botón Principal - Notificarme */
.js-mailalert input[type="submit"],
.js-mailalert .btn.js-mailalert-add,
.js-mailalert .btn-primary.js-mailalert-add,
.js-mailalert .btn-secondary {
    width: 100% !important;
    max-width: 400px !important;
    padding: 15px 30px !important;
    background: linear-gradient(135deg, var(--dv-yellow) 0%, var(--dv-yellow-dark) 100%) !important;
    border: none !important;
    border-radius: 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--dv-font) !important;
    color: var(--dv-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(255, 205, 0, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
}

.js-mailalert input[type="submit"]::before,
.js-mailalert .btn.js-mailalert-add::before,
.js-mailalert .btn-secondary::before {
    content: "\f0e0";
    font-family: "FontAwesome" !important;
    margin-right: 10px !important;
}

.js-mailalert input[type="submit"]:hover,
.js-mailalert .btn.js-mailalert-add:hover,
.js-mailalert .btn-secondary:hover {
    background: linear-gradient(135deg, var(--dv-green) 0%, var(--dv-green-dark) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(95, 173, 72, 0.4) !important;
}

.js-mailalert input[type="submit"]:active,
.js-mailalert .btn.js-mailalert-add:active,
.js-mailalert .btn-secondary:active {
    transform: translateY(0) !important;
}

/* Alerta de respuesta */
.js-mailalert .js-mailalert-response,
.js-mailalert .alert {
    width: 100% !important;
    max-width: 400px !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-family: var(--dv-font) !important;
    text-align: center !important;
    margin: 10px 0 0 !important;
    border: none !important;
}

.js-mailalert .alert-info {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6eaf8 100%) !important;
    color: #1a5276 !important;
    border-left: 4px solid #3498db !important;
}

.js-mailalert .alert-success {
    background: linear-gradient(135deg, #e8f8f0 0%, #d4efdf 100%) !important;
    color: #1e7e34 !important;
    border-left: 4px solid var(--dv-green) !important;
}

.js-mailalert .alert-danger,
.js-mailalert .alert-error {
    background: linear-gradient(135deg, #fdedec 0%, #f5b7b1 100%) !important;
    color: #943126 !important;
    border-left: 4px solid #e74c3c !important;
}

/* Mensaje de ya suscrito */
.js-mailalert article.alert-info {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    color: var(--dv-green-dark) !important;
    border-left: 4px solid var(--dv-green) !important;
    padding: 18px 25px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.js-mailalert article.alert-info::before {
    content: "\f00c";
    font-family: "FontAwesome" !important;
    font-size: 20px !important;
    color: var(--dv-green) !important;
}

/* GDPR Consent Wrapper */
.js-mailalert .gdpr_consent_wrapper {
    width: 100% !important;
    max-width: 400px !important;
    margin: 10px auto !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: var(--dv-gray) !important;
    text-align: left !important;
}

.js-mailalert .gdpr_consent_wrapper label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
}

.js-mailalert .gdpr_consent_wrapper input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--dv-yellow) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* Contenedor .tabs dentro de mailalert */
.js-mailalert .tabs {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Área de alertas */
.js-mailalert .js-mailalert-alerts {
    width: 100% !important;
    max-width: 400px !important;
}

/* ==========================================================================
   RESPONSIVE - FORMULARIO DE NOTIFICACIÓN
   ========================================================================== */

@media (max-width: 768px) {
    .js-mailalert {
        padding: 20px 15px !important;
        border-radius: 12px !important;
        margin: 15px 0 !important;
    }

    .js-mailalert::before {
        font-size: 50px !important;
        top: -10px !important;
        right: -10px !important;
    }

    .js-mailalert input[type="email"],
    .js-mailalert .form-control,
    .js-mailalert input[type="submit"],
    .js-mailalert .btn.js-mailalert-add,
    .js-mailalert .btn-secondary,
    .js-mailalert .alert,
    .js-mailalert .gdpr_consent_wrapper {
        max-width: 100% !important;
    }

    .js-mailalert input[type="submit"],
    .js-mailalert .btn.js-mailalert-add,
    .js-mailalert .btn-secondary {
        font-size: 14px !important;
        padding: 14px 20px !important;
    }
}

@media (max-width: 480px) {
    .js-mailalert {
        padding: 15px 12px !important;
    }

    .js-mailalert input[type="email"],
    .js-mailalert .form-control {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    .js-mailalert input[type="submit"],
    .js-mailalert .btn.js-mailalert-add,
    .js-mailalert .btn-secondary {
        font-size: 13px !important;
        padding: 12px 15px !important;
    }
}

/* ==========================================================================
   ETS ONE PAGE CHECKOUT - ESTILOS PERSONALIZADOS DOCEVOLTIOS
   Layout de 3 columnas mejorado
   ========================================================================== */

/* Contenedor principal del formulario */
#form_ets_onepagecheckout {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%) !important;
    padding: 30px !important;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 40px !important;
    font-family: var(--dv-font) !important;
}

#form_ets_onepagecheckout * {
    font-family: var(--dv-font) !important;
}

/* Bloques principales */
#form_ets_onepagecheckout .block-onepagecheckout {
    border: none !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout .block-onepagecheckout:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Títulos de bloques */
#form_ets_onepagecheckout .block-onepagecheckout .title-heading {
    background: linear-gradient(135deg, var(--dv-yellow) 0%, var(--dv-yellow-dark) 100%) !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--dv-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}

#form_ets_onepagecheckout .block-onepagecheckout .title-heading .ets_icon_svg {
    width: 22px !important;
    height: 22px !important;
}

#form_ets_onepagecheckout .block-onepagecheckout .title-heading .ets_icon_svg svg {
    fill: var(--dv-dark) !important;
    width: 100% !important;
    height: 100% !important;
}

/* Contenido de bloques */
#form_ets_onepagecheckout .block-onepagecheckout .block-content {
    padding: 20px !important;
}

#form_ets_onepagecheckout .block-onepagecheckout.block-shopping-cart .block-content {
    padding: 20px 15px !important;
}

/* ==========================================================================
   FORMULARIOS E INPUTS
   ========================================================================== */

#form_ets_onepagecheckout input.form-control,
#form_ets_onepagecheckout select.form-control,
#form_ets_onepagecheckout textarea.form-control {
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    color: var(--dv-dark) !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    min-height: 45px !important;
}

#form_ets_onepagecheckout input.form-control:focus,
#form_ets_onepagecheckout select.form-control:focus,
#form_ets_onepagecheckout textarea.form-control:focus {
    border-color: var(--dv-yellow) !important;
    box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.2) !important;
    outline: none !important;
}

#form_ets_onepagecheckout input.form-control::placeholder,
#form_ets_onepagecheckout textarea.form-control::placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

/* Labels */
#form_ets_onepagecheckout label.form-control-label {
    font-weight: 500 !important;
    color: var(--dv-gray-dark) !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

#form_ets_onepagecheckout label.form-control-label.required:after {
    color: #e74c3c !important;
    margin-left: 4px !important;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

/* Botón principal - Completar pedido */
#form_ets_onepagecheckout button[name="submitCompleteMyOrder"],
#form_ets_onepagecheckout .btn-primary {
    background: linear-gradient(135deg, var(--dv-yellow) 0%, var(--dv-yellow-dark) 100%) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 16px 40px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--dv-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(255, 205, 0, 0.4) !important;
    min-width: auto !important;
}

#form_ets_onepagecheckout button[name="submitCompleteMyOrder"]:hover,
#form_ets_onepagecheckout .btn-primary:hover {
    background: linear-gradient(135deg, var(--dv-green) 0%, var(--dv-green-dark) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(95, 173, 72, 0.4) !important;
}

/* Botón login */
#form_ets_onepagecheckout button[name="submitCustomerLogin"] {
    background: linear-gradient(135deg, var(--dv-yellow) 0%, var(--dv-yellow-dark) 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--dv-dark) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout button[name="submitCustomerLogin"]:hover {
    background: linear-gradient(135deg, var(--dv-green) 0%, var(--dv-green-dark) 100%) !important;
    color: #ffffff !important;
}

/* Botón de añadir dirección */
#form_ets_onepagecheckout button.add_new_address {
    color: var(--dv-green) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout button.add_new_address:hover {
    color: var(--dv-yellow-dark) !important;
}

/* ==========================================================================
   CARRITO DE COMPRAS
   ========================================================================== */

#form_ets_onepagecheckout .cart-item {
    padding: 15px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#form_ets_onepagecheckout .cart-item:last-child {
    border-bottom: none !important;
}

#form_ets_onepagecheckout .product-line-info .label {
    font-weight: 600 !important;
    color: var(--dv-dark) !important;
    font-size: 14px !important;
}

#form_ets_onepagecheckout .product-line-info a {
    color: var(--dv-dark) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#form_ets_onepagecheckout .product-line-info a:hover {
    color: var(--dv-yellow-dark) !important;
}

/* Precios */
#form_ets_onepagecheckout .product-price,
#form_ets_onepagecheckout .cart-line-product-actions .price {
    color: var(--dv-green) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Cantidad - Touchspin */
#form_ets_onepagecheckout .input-group.bootstrap-touchspin {
    border: 2px solid #e0e0e0 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    max-width: 120px !important;
    background: #ffffff !important;
}

#form_ets_onepagecheckout .bootstrap-touchspin input.js-cart-line-product-quantity {
    border: none !important;
    font-weight: 600 !important;
    color: var(--dv-dark) !important;
    font-size: 15px !important;
}

#form_ets_onepagecheckout .bootstrap-touchspin .bootstrap-touchspin-up,
#form_ets_onepagecheckout .bootstrap-touchspin .bootstrap-touchspin-down {
    background: #f5f5f5 !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout .bootstrap-touchspin .bootstrap-touchspin-up:hover,
#form_ets_onepagecheckout .bootstrap-touchspin .bootstrap-touchspin-down:hover {
    background: var(--dv-yellow-light) !important;
}

#form_ets_onepagecheckout .bootstrap-touchspin .bootstrap-touchspin-up:before,
#form_ets_onepagecheckout .bootstrap-touchspin .bootstrap-touchspin-down:before {
    color: var(--dv-dark) !important;
    font-weight: 700 !important;
}

/* Eliminar producto */
#form_ets_onepagecheckout a.remove-from-cart i:before {
    color: #999999 !important;
    transition: color 0.3s ease !important;
}

#form_ets_onepagecheckout a.remove-from-cart:hover i:before {
    color: #e74c3c !important;
}

/* ==========================================================================
   TOTALES DEL CARRITO
   ========================================================================== */

#form_ets_onepagecheckout .cart-detailed-totals {
    background: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-top: 15px !important;
}

#form_ets_onepagecheckout .cart-summary-line span {
    font-size: 14px !important;
    color: var(--dv-gray-dark) !important;
}

#form_ets_onepagecheckout .cart-summary-line.cart-total .label,
#form_ets_onepagecheckout .cart-summary-line.cart-total .value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dv-green) !important;
}

/* ==========================================================================
   CUPONES / DESCUENTOS
   ========================================================================== */

#form_ets_onepagecheckout .block-promo .promo-input {
    border: 2px dashed var(--dv-yellow) !important;
    border-radius: 10px !important;
    background: #fffef5 !important;
    font-size: 14px !important;
    padding: 12px 15px !important;
    height: 45px !important;
}

#form_ets_onepagecheckout .block-promo .promo-input:focus {
    border-color: var(--dv-green) !important;
    background: #ffffff !important;
}

#form_ets_onepagecheckout .promo-code .btn-primary {
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    min-height: 45px !important;
}

/* Icono de tijeras */
#form_ets_onepagecheckout .ets_icon_scices svg {
    fill: var(--dv-yellow-dark) !important;
}

/* ==========================================================================
   OPCIONES DE ENVÍO
   ========================================================================== */

#form_ets_onepagecheckout .delivery-option {
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout .delivery-option:hover {
    border-color: var(--dv-yellow) !important;
    background: #fffef5 !important;
}

#form_ets_onepagecheckout .delivery-option .carrier-name {
    font-weight: 600 !important;
    color: var(--dv-dark) !important;
}

#form_ets_onepagecheckout .delivery-option .carrier-delay {
    color: var(--dv-gray) !important;
    font-size: 13px !important;
}

#form_ets_onepagecheckout .delivery-option .carrier-price {
    color: var(--dv-green) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   OPCIONES DE PAGO
   ========================================================================== */

#form_ets_onepagecheckout .ets_payment_method {
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout .ets_payment_method:hover {
    border-color: var(--dv-yellow) !important;
    background: #fffef5 !important;
}

#form_ets_onepagecheckout .payment-option label {
    font-weight: 500 !important;
    color: var(--dv-dark) !important;
}

#form_ets_onepagecheckout .payment-option img {
    max-width: 50px !important;
    margin-right: 10px !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   RADIO BUTTONS Y CHECKBOXES PERSONALIZADOS
   ========================================================================== */

#form_ets_onepagecheckout .custom-radio {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--dv-gray-light) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout .custom-radio input[type=radio]:checked+span {
    background-color: var(--dv-yellow) !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
}

#form_ets_onepagecheckout .ets_checkbox {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--dv-gray-light) !important;
    border-radius: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

#form_ets_onepagecheckout input[type="checkbox"]:checked+.ets_checkbox,
#form_ets_onepagecheckout input[type="checkbox"]:checked~.ets_checkbox {
    background: var(--dv-yellow) !important;
    border-color: var(--dv-yellow) !important;
}

/* ==========================================================================
   TÉRMINOS Y CONDICIONES
   ========================================================================== */

#form_ets_onepagecheckout #conditions-to-approve {
    background: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

#form_ets_onepagecheckout #conditions-to-approve label {
    font-size: 14px !important;
    color: var(--dv-gray-dark) !important;
}

#form_ets_onepagecheckout #conditions-to-approve a {
    color: var(--dv-green) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

#form_ets_onepagecheckout #conditions-to-approve a:hover {
    color: var(--dv-yellow-dark) !important;
}

/* ==========================================================================
   COMENTARIOS Y REGALO
   ========================================================================== */

#form_ets_onepagecheckout textarea#delivery_message,
#form_ets_onepagecheckout textarea#gift_message {
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    min-height: 80px !important;
    resize: vertical !important;
}

#form_ets_onepagecheckout textarea#delivery_message:focus,
#form_ets_onepagecheckout textarea#gift_message:focus {
    border-color: var(--dv-yellow) !important;
    box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.2) !important;
}

/* ==========================================================================
   ALERTAS Y MENSAJES
   ========================================================================== */

#form_ets_onepagecheckout .alert {
    border-radius: 10px !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    border: none !important;
}

#form_ets_onepagecheckout .alert-info {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6eaf8 100%) !important;
    color: #1a5276 !important;
    border-left: 4px solid #3498db !important;
}

#form_ets_onepagecheckout .alert-danger {
    background: linear-gradient(135deg, #fdedec 0%, #f5b7b1 100%) !important;
    color: #943126 !important;
    border-left: 4px solid #e74c3c !important;
}

#form_ets_onepagecheckout .alert-success {
    background: linear-gradient(135deg, #e8f8f0 0%, #d4efdf 100%) !important;
    color: #1e7e34 !important;
    border-left: 4px solid var(--dv-green) !important;
}

/* Error de validación */
#form_ets_onepagecheckout .ets_opc_error {
    color: #e74c3c !important;
    font-size: 12px !important;
    margin-top: 5px !important;
}

/* ==========================================================================
   FOOTER DEL CHECKOUT
   ========================================================================== */

#form_ets_onepagecheckout .onepagecheckout-footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-top: 2px solid #f0f0f0 !important;
    padding-top: 25px !important;
    margin-top: 20px !important;
}

#form_ets_onepagecheckout .onepagecheckout-footer .checkout.card-block {
    text-align: center !important;
}

/* Icono de seguridad */
#form_ets_onepagecheckout img.safe_icon {
    max-width: 250px !important;
    margin-top: 25px !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   ESTILOS DE LOADING
   ========================================================================== */

#form_ets_onepagecheckout .block-onepagecheckout.loading>.title-heading:before {
    border-top-color: var(--dv-yellow) !important;
    border-bottom-color: var(--dv-yellow) !important;
}

#form_ets_onepagecheckout button.loading:before {
    border-top-color: var(--dv-dark) !important;
    border-bottom-color: var(--dv-dark) !important;
}

/* ==========================================================================
   RESPONSIVE - ONE PAGE CHECKOUT
   ========================================================================== */

@media (max-width: 1199px) {
    #form_ets_onepagecheckout {
        padding: 20px !important;
    }
}

@media (max-width: 991px) {

    #form_ets_onepagecheckout .onepagecheckout-left,
    #form_ets_onepagecheckout .onepagecheckout-center,
    #form_ets_onepagecheckout .onepagecheckout-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 767px) {
    #form_ets_onepagecheckout {
        padding: 15px !important;
        border-radius: 12px !important;
    }

    #form_ets_onepagecheckout .block-onepagecheckout .title-heading {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }

    #form_ets_onepagecheckout .block-onepagecheckout .block-content {
        padding: 15px !important;
    }

    #form_ets_onepagecheckout button[name="submitCompleteMyOrder"] {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 25px !important;
    }

    #form_ets_onepagecheckout .cart-summary-line.cart-total .label,
    #form_ets_onepagecheckout .cart-summary-line.cart-total .value {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    #form_ets_onepagecheckout {
        padding: 10px !important;
        margin-bottom: 20px !important;
    }

    #form_ets_onepagecheckout .block-onepagecheckout {
        margin-bottom: 15px !important;
    }

    #form_ets_onepagecheckout input.form-control,
    #form_ets_onepagecheckout select.form-control {
        font-size: 16px !important;
        /* Evita zoom en iOS */
    }
}

/* ==========================================================================
   BOTÓN COMPLETAR PEDIDO - STICKY/FIXED
   Siempre visible en la parte inferior de la pantalla
   ========================================================================== */

/* Footer del checkout como sticky */
#form_ets_onepagecheckout .onepagecheckout-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%) !important;
    padding-bottom: 20px;
}

/* Ajustar el contenedor del botón */
#form_ets_onepagecheckout .onepagecheckout-footer .checkout.card-block {
    padding: 0 !important;
    margin: 0 !important;
}

/* El botón de completar pedido dentro del sticky */
#form_ets_onepagecheckout .onepagecheckout-footer button[name="submitCompleteMyOrder"] {
    width: auto !important;
    min-width: 300px !important;
    max-width: 100% !important;
    padding: 18px 50px !important;
    font-size: 18px !important;
    animation: pulseButton 2s infinite !important;
}

/* Animación sutil de pulso para llamar la atención */
@keyframes pulseButton {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(255, 205, 0, 0.4) !important;
    }

    50% {
        box-shadow: 0 4px 30px rgba(255, 205, 0, 0.6) !important;
    }
}

/* Términos y condiciones dentro del sticky */
#form_ets_onepagecheckout .onepagecheckout-footer #conditions-to-approve {
    background: transparent !important;
    padding: 10px 0 15px 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* Icono de seguridad más pequeño en sticky */
#form_ets_onepagecheckout .onepagecheckout-footer img.safe_icon {
    max-width: 180px !important;
    margin-top: 15px !important;
}

/* ==========================================================================
   RESPONSIVE - BOTÓN STICKY
   ========================================================================== */

@media (max-width: 991px) {
    #form_ets_onepagecheckout .onepagecheckout-footer {
        margin: 20px -20px -20px -20px !important;
        padding: 15px !important;
    }
}

@media (max-width: 767px) {
    #form_ets_onepagecheckout .onepagecheckout-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 15px 20px !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15) !important;
    }

    /* Ocultar términos en el sticky móvil para ahorrar espacio */
    #form_ets_onepagecheckout .onepagecheckout-footer #conditions-to-approve {
        display: none !important;
    }

    /* Ocultar icono de seguridad en móvil */
    #form_ets_onepagecheckout .onepagecheckout-footer img.safe_icon {
        display: none !important;
    }

    /* Botón 100% ancho en móvil */
    #form_ets_onepagecheckout .onepagecheckout-footer button[name="submitCompleteMyOrder"] {
        width: 100% !important;
        min-width: auto !important;
        padding: 16px 25px !important;
        font-size: 16px !important;
    }

    /* Añadir espacio al final del formulario para que no quede oculto por el sticky */
    #form_ets_onepagecheckout {
        padding-bottom: 100px !important;
    }
}

/* ==========================================================================
   MENSAJE DE ENVÍO - AVISO MEJORADO
   Cuando el usuario no ha iniciado sesión o no tiene dirección
   ========================================================================== */

.dv-shipping-notice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #fff8e0 0%, #fffef5 100%) !important;
    border: 2px solid var(--dv-yellow) !important;
    border-radius: 12px !important;
    color: var(--dv-dark) !important;
    margin: 10px 0 !important;
}

.dv-shipping-notice-icon {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--dv-yellow) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--dv-dark) !important;
}

.dv-shipping-notice-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.dv-shipping-notice-content {
    flex: 1 !important;
}

.dv-shipping-notice-content strong {
    display: block !important;
    font-size: 16px !important;
    color: var(--dv-dark) !important;
    margin-bottom: 12px !important;
}

.dv-shipping-steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
}

.dv-shipping-steps li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    color: var(--dv-gray-dark) !important;
    border-bottom: 1px dashed #e0e0e0 !important;
}

.dv-shipping-steps li:last-child {
    border-bottom: none !important;
}

.dv-step-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: var(--dv-green) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.dv-step-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.dv-shipping-note {
    font-size: 13px !important;
    color: var(--dv-gray) !important;
    font-style: italic !important;
    margin: 0 !important;
    padding-top: 5px !important;
}

/* Responsive */
@media (max-width: 576px) {
    .dv-shipping-notice {
        flex-direction: column !important;
        text-align: center !important;
    }

    .dv-shipping-notice-icon {
        margin: 0 auto !important;
    }

    .dv-shipping-steps li {
        justify-content: center !important;
    }
}

/* ==========================================================================
   BARRA DE PROGRESO ENVÍO GRATIS - CHECKOUT
   ========================================================================== */

.dv-free-shipping-bar {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}

.dv-free-shipping-bar::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--dv-yellow) 0%, var(--dv-green) 100%) !important;
}

.dv-shipping-bar-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.dv-shipping-bar-icon {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--dv-yellow) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: truckBounce 2s ease-in-out infinite !important;
}

@keyframes truckBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.dv-shipping-bar-icon svg {
    width: 26px !important;
    height: 26px !important;
    color: var(--dv-dark) !important;
}

.dv-shipping-bar-text {
    flex: 1 !important;
    min-width: 200px !important;
}

.dv-shipping-message {
    font-size: 16px !important;
    color: #ffffff !important;
    font-family: var(--dv-font) !important;
    line-height: 1.4 !important;
}

.dv-shipping-message strong {
    color: var(--dv-yellow) !important;
    font-weight: 700 !important;
}

.dv-shipping-bar-progress-wrapper {
    flex: 1 !important;
    min-width: 200px !important;
    max-width: 300px !important;
}

.dv-shipping-bar-progress {
    height: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
}

.dv-shipping-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--dv-yellow) 0%, var(--dv-yellow-dark) 100%) !important;
    border-radius: 20px !important;
    transition: width 0.5s ease-out !important;
    position: relative !important;
}

.dv-shipping-bar-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%) !important;
    animation: shimmer 2s infinite !important;
}

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

    100% {
        transform: translateX(100%);
    }
}

.dv-shipping-bar-labels {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    font-family: var(--dv-font) !important;
}

.dv-current-amount {
    color: var(--dv-yellow) !important;
    font-weight: 700 !important;
}

.dv-target-amount {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
}

/* Estado: Envío gratis conseguido */
.dv-free-shipping-bar.dv-free-shipping-achieved {
    background: linear-gradient(135deg, var(--dv-green-dark) 0%, var(--dv-green) 100%) !important;
}

.dv-free-shipping-bar.dv-free-shipping-achieved::before {
    background: linear-gradient(90deg, #ffffff 0%, var(--dv-yellow) 100%) !important;
}

.dv-free-shipping-bar.dv-free-shipping-achieved .dv-shipping-bar-icon {
    background: #ffffff !important;
    animation: celebrateTruck 0.5s ease-in-out infinite alternate !important;
}

@keyframes celebrateTruck {
    0% {
        transform: scale(1) rotate(-5deg);
    }

    100% {
        transform: scale(1.1) rotate(5deg);
    }
}

.dv-free-shipping-bar.dv-free-shipping-achieved .dv-shipping-bar-icon svg {
    color: var(--dv-green) !important;
}

.dv-free-shipping-bar.dv-free-shipping-achieved .dv-shipping-message strong {
    color: #ffffff !important;
}

.dv-free-shipping-bar.dv-free-shipping-achieved .dv-shipping-bar-fill {
    background: linear-gradient(90deg, #ffffff 0%, var(--dv-yellow) 100%) !important;
}

.dv-free-shipping-bar.dv-free-shipping-achieved .dv-current-amount {
    color: #ffffff !important;
}

.dv-free-shipping-bar.dv-free-shipping-achieved .dv-target-amount {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Confeti para celebración */
.dv-free-shipping-bar.dv-free-shipping-achieved::after {
    content: '🎉' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 30px !important;
    animation: confettiPop 1s ease-out !important;
}

@keyframes confettiPop {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.3);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* ==========================================================================
   RESPONSIVE - BARRA DE ENVÍO GRATIS
   ========================================================================== */

@media (max-width: 991px) {
    .dv-shipping-bar-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    .dv-shipping-bar-text {
        min-width: auto !important;
    }

    .dv-shipping-bar-progress-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dv-free-shipping-bar.dv-free-shipping-achieved::after {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .dv-free-shipping-bar {
        padding: 15px 18px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }

    .dv-shipping-bar-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .dv-shipping-bar-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .dv-shipping-message {
        font-size: 14px !important;
    }

    .dv-shipping-bar-progress {
        height: 10px !important;
    }

    .dv-shipping-bar-labels {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   PAYPAL EXPRESS CHECKOUT Y BNPL - PÁGINA DE PRODUCTO
   Botones lado a lado y alineados a la izquierda
   ========================================================================== */

/* Contenedor padre de los botones PayPal - usar flexbox */
.product-add-to-cart.js-product-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

/* El row de cantidad y botón añadir al carrito - ocupa 100% */
.product-add-to-cart>.product-quantity {
    flex: 1 0 100% !important;
    order: 1 !important;
}

/* *** CLAVE: Ocultar los clearfix entre los botones PayPal *** */
.product-add-to-cart>.clearfix {
    display: none !important;
}

/* Contenedor Express Checkout - lado a lado */
.product-add-to-cart>[data-container-express-checkout] {
    float: none !important;
    margin: 0 !important;
    order: 3 !important;
    flex: 0 0 auto !important;
}

/* Contenedor BNPL (Paga a plazos) - lado a lado */
.product-add-to-cart>[data-container-bnpl] {
    float: none !important;
    margin: 0 !important;
    order: 4 !important;
    flex: 0 0 auto !important;
}

/* El mensaje de PayPal "Compra ahora y paga después" - en su propia línea */
.product-add-to-cart>div:not(.product-quantity):not(.clearfix):not([data-container-express-checkout]):not([data-container-bnpl]):not(.product-minimal-quantity) {
    flex: 1 0 100% !important;
    order: 2 !important;
}

/* Limitar anchos de los botones */
[data-container-express-checkout] [paypal-button-container] {
    min-width: 150px !important;
    max-width: 200px !important;
}

[data-container-bnpl] [paypal-bnpl-button-container] {
    min-width: 140px !important;
    max-width: 180px !important;
}

/* Mensaje de cantidad mínima al final */
.product-add-to-cart>.product-minimal-quantity {
    flex: 1 0 100% !important;
    order: 10 !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {

    .product-add-to-cart>[data-container-express-checkout],
    .product-add-to-cart>[data-container-bnpl] {
        flex: 1 1 100% !important;
    }

    [data-container-express-checkout] [paypal-button-container],
    [data-container-bnpl] [paypal-bnpl-button-container] {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   PAYPAL EN ETS_ONEPAGECHECKOUT - Mejoras de visualización
   ========================================================================== */

/* Ocultar los botones de PayPal en el checkout - se mostrarán en popup */
#form_ets_onepagecheckout .ets_payment_method .paypal-buttons {
    display: none !important;
}

/* Mejorar el texto de las opciones de pago PayPal */
#form_ets_onepagecheckout .ets_payment_method label span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Estilo para el logo de PayPal en la lista de pagos */
#form_ets_onepagecheckout .ets_payment_method label img {
    max-height: 25px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Contenedor de información adicional de PayPal */
#form_ets_onepagecheckout .js-additional-information {
    padding: 15px !important;
    background: #f9f9f9 !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
}

/* Información de PayPal - ocultar botones pero mostrar texto */
#form_ets_onepagecheckout .js-additional-information .paypal-button-container,
#form_ets_onepagecheckout .js-additional-information [paypal-button-container] {
    min-height: auto !important;
}

/* Mejorar visualización del texto de PayPal */
#form_ets_onepagecheckout .payment-option label {
    font-weight: 500 !important;
}

/* Si PayPal aparece con botones inline en la additional-information, ocultarlos */
#form_ets_onepagecheckout .additional-information .paypal-buttons.paypal-buttons-context-iframe {
    display: none !important;
}

/* Mostrar botón PayPal solo cuando está en modo popup */
#form_ets_onepagecheckout.paypal_popup .paypal-buttons.paypal-buttons-context-iframe,
body .block-onepagecheckout.block-payment.popup .paypal-buttons {
    display: block !important;
}

/* ========== OCULTAR ELEMENTOS DUPLICADOS DE PAYPAL ========== */

/* Ocultar los paypal-marks duplicados que se añaden automáticamente */
#form_ets_onepagecheckout .ets_payment_method [paypal-mark-container],
#form_ets_onepagecheckout .ets_payment_method .paypal-marks {
    display: none !important;
}

/* Ocultar el popover de información de PayPal (el icono info) */
#form_ets_onepagecheckout .ets_payment_method [data-paypal-info] {
    display: none !important;
}

/* Asegurar que el label de PayPal sea limpio y simple */
#form_ets_onepagecheckout .ets_payment_method .payment-option label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ocultar todo lo que esté fuera del label dentro del payment-option */
#form_ets_onepagecheckout .ets_payment_method .payment-option>span[paypal-mark-container] {
    display: none !important;
}

/* Limpiar estilos inline de table-cell que añade PayPal JS */
#form_ets_onepagecheckout .ets_payment_method span[style*="table-cell"] {
    display: none !important;
}

/* ==========================================================================
   HEADER MÓVIL REDISEÑADO - 2 FILAS
   Fila 1: Logo (ancho completo)
   Fila 2: Hamburger + Buscador + Usuario + Carrito
   ========================================================================== */

/* Contenedor principal del header móvil */
.mobile-header-redesign {
    background: #000000 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* === FILA 1: LOGO === */
.mobile-header-logo-row {
    background: #272929 !important;
    /* Fondo gris oscuro del logo */
    border-bottom: 1px solid #222 !important;
}

.mobile-header-logo-row .container {
    text-align: center !important;
}

.mobile-logo-link {
    display: inline-block !important;
}

.mobile-logo-img {
    max-width: 100% !important;
    width: auto !important;
    max-height: 120px !important;
    height: auto !important;
}

/* === FILA 2: NAVEGACIÓN === */
.mobile-header-nav-row {
    background: #000000 !important;
    padding: 10px 0 !important;
}

.mobile-nav-flex {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* === BOTÓN HAMBURGUESA === */
.mobile-hamburger-btn {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffcd00 !important;
    border: none !important;
    border-radius: 8px !important;
    color: #000000 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mobile-hamburger-btn:hover,
.mobile-hamburger-btn:active {
    background: #5fad48 !important;
    color: #ffffff !important;
}

/* === BUSCADOR CENTRAL === */
.mobile-search-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
}

.mobile-search-input-group {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.mobile-search-input-group:focus-within {
    border-color: #ffcd00 !important;
    box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.2) !important;
}

.mobile-search-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #333333 !important;
    outline: none !important;
    min-width: 0 !important;
}

.mobile-search-input::placeholder {
    color: #999999 !important;
}

.mobile-search-btn {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: #666666 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mobile-search-btn:hover,
.mobile-search-btn:active {
    color: #ffcd00 !important;
}

/* === ICONOS DERECHA (USUARIO + CARRITO) === */
.mobile-icons-group {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mobile-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.mobile-icon-btn:hover,
.mobile-icon-btn:active {
    background: #ffcd00 !important;
    border-color: #ffcd00 !important;
    color: #000000 !important;
}

/* Badge del carrito */
.mobile-cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #ffcd00 !important;
    color: #000000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 4px !important;
}

.mobile-cart-badge:empty {
    display: none !important;
}

/* === SIDEBAR DEL CARRITO - ESTILOS === */
.cart-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    max-width: 90vw;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active {
    right: 0;
}

.cart-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #000000;
    color: #ffffff;
    flex-shrink: 0;
}

.cart-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.cart-sidebar-title i {
    color: #ffcd00;
    margin-right: 8px;
}

.cart-sidebar-count {
    color: #ffcd00;
    font-size: 14px;
    margin-left: 5px;
}

.cart-sidebar-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-sidebar-close:hover {
    color: #ffcd00;
    transform: rotate(90deg);
}

.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* Carrito vacío */
.cart-sidebar-empty {
    text-align: center;
    padding: 40px 20px;
}

.cart-sidebar-empty i {
    font-size: 60px;
    color: #e0e0e0;
    margin-bottom: 15px;
}

.cart-sidebar-empty p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.btn-cart-continue {
    background: #ffcd00 !important;
    color: #000 !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.btn-cart-continue:hover {
    background: #5fad48 !important;
    color: #fff !important;
}

/* Productos en el carrito */
.cart-sidebar-products {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-product-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart-product-image {
    flex: 0 0 70px;
}

.cart-product-image img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

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

.cart-product-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #272929;
    text-decoration: none;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-product-name:hover {
    color: #5fad48;
}

.cart-product-prices {
    margin-bottom: 5px;
}

.cart-product-price,
.cart-product-price-new {
    font-size: 15px;
    font-weight: 700;
    color: #ffcd00;
}

.cart-product-price-old {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-right: 5px;
}

.cart-product-quantity {
    font-size: 12px;
    color: #666;
}

.cart-product-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.cart-product-remove {
    color: #999;
    font-size: 16px;
    padding: 5px;
    transition: all 0.3s ease;
}

.cart-product-remove:hover {
    color: #e74c3c;
}

/* Footer del carrito */
.cart-sidebar-footer {
    padding: 15px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.cart-sidebar-totals {
    margin-bottom: 15px;
}

.cart-total-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: #666;
}

.cart-total-main {
    font-size: 16px;
    font-weight: 700;
    color: #272929;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-top: 5px;
}

.cart-total-main .value {
    color: #ffcd00;
}

.cart-tax-info {
    font-size: 11px;
    color: #999;
    text-align: right;
}

.cart-sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-cart-checkout {
    background: #5fad48 !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-cart-checkout:hover {
    background: #4a8a39 !important;
}

.btn-cart-view {
    background: transparent !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-cart-view:hover {
    border-color: #ffcd00 !important;
    color: #ffcd00 !important;
}

/* === BLOQUEAR SCROLL CUANDO SIDEBAR ESTÁ ABIERTO === */
body.cart-sidebar-open {
    overflow: hidden !important;
}

/* === RESPONSIVE PARA MÓVIL === */
@media (max-width: 375px) {
    .mobile-nav-flex {
        gap: 6px !important;
    }

    .mobile-hamburger-btn,
    .mobile-icon-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .mobile-search-input {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .mobile-search-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .mobile-icons-group {
        gap: 5px !important;
    }
}

/* Asegurar que el header rediseñado se muestre */
.mobile-header-redesign {
    display: block !important;
}

/* ==========================================================================
   DROPDOWN DE USUARIO MÓVIL
   ========================================================================== */

/* Wrapper del dropdown */
.mobile-user-dropdown-wrapper {
    position: relative !important;
}

/* Botón trigger del dropdown */
.mobile-user-trigger {
    cursor: pointer !important;
}

/* Dropdown oculto por defecto */
.mobile-user-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    min-width: 180px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    padding: 8px 0 !important;
    z-index: 9999 !important;

    /* Animación de entrada */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) scale(0.95) !important;
    transform-origin: top right !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Flecha del dropdown */
.mobile-user-dropdown-arrow {
    position: absolute !important;
    top: -8px !important;
    right: 15px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid #ffffff !important;
}

/* Dropdown visible */
.mobile-user-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* Links del dropdown */
.mobile-user-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.mobile-user-link i {
    font-size: 16px !important;
    color: #ffcd00 !important;
    width: 20px !important;
    text-align: center !important;
}

.mobile-user-link:hover {
    background: #fff8e0 !important;
    color: #000000 !important;
}

.mobile-user-link:hover i {
    color: #5fad48 !important;
}

/* Separador visual entre opciones */
.mobile-user-login {
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Estilo especial para registrarse */
.mobile-user-register {
    color: #5fad48 !important;
    font-weight: 600 !important;
}

.mobile-user-register:hover {
    background: #e8f5e3 !important;
}

/* ==========================================================================
   BUSCADOR AMBJOLISEARCH EN HEADER MÓVIL - DISEÑO MEJORADO
   ========================================================================== */

/* Contenedor del buscador en móvil */
.mobile-search-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
}

.mobile-search-wrapper #search_block_top,
.mobile-search-wrapper .jolisearch {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Formulario de búsqueda - Diseño compacto */
.mobile-search-wrapper #searchbox {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    height: 38px !important;
}

.mobile-search-wrapper #searchbox:focus-within {
    box-shadow: 0 0 0 2px rgba(255, 205, 0, 0.4) !important;
}

/* Input de búsqueda */
.mobile-search-wrapper .search_query,
.mobile-search-wrapper #search_query_top {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    color: #333333 !important;
    outline: none !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

.mobile-search-wrapper .search_query::placeholder,
.mobile-search-wrapper #search_query_top::placeholder {
    color: #888888 !important;
    font-size: 12px !important;
}

/* Botón de búsqueda - FORZAR UN SOLO ICONO */
.mobile-search-wrapper .button-search {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    background: #ffcd00 !important;
    border: none !important;
    color: #000000 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 0 20px 20px 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Ocultar TODO dentro del botón */
.mobile-search-wrapper .button-search * {
    display: none !important;
}

/* Ocultar cualquier pseudo elemento existente */
.mobile-search-wrapper .button-search::after,
.mobile-search-wrapper.megamenu-search-col button[type="submit"]::after,
.mobile-search-wrapper button[type="submit"]::after {
    display: none !important;
    content: "" !important;
    visibility: hidden !important;
}

/* Crear nuestro propio icono con ::before */
.mobile-search-wrapper .button-search::before {
    content: "\f002" !important;
    font-family: "FontAwesome" !important;
    font-size: 14px !important;
    color: #000000 !important;
    display: block !important;
}

.mobile-search-wrapper .button-search:hover {
    background: #5fad48 !important;
}

.mobile-search-wrapper .button-search:hover::before {
    color: #ffffff !important;
}

.mobile-search-wrapper .button-search span {
    display: none !important;
}

/* === AUTOCOMPLETE DROPDOWN EN MÓVIL === */
.mobile-search-wrapper .ui-autocomplete,
.mobile-search-wrapper .autocomplete-suggestions,
.mobile-search-wrapper .ambjoli-results {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    z-index: 99999 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding: 10px 0 !important;
}

/* Asegurar que el dropdown se muestre encima de todo en móvil */
.mobile-header-redesign .ui-autocomplete,
.mobile-header-nav-row .ui-autocomplete {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    top: auto !important;
}

/* Estilos para items del autocomplete */
.mobile-search-wrapper .ui-menu-item,
.mobile-search-wrapper .autocomplete-suggestion {
    padding: 10px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
}

.mobile-search-wrapper .ui-menu-item:hover,
.mobile-search-wrapper .autocomplete-suggestion:hover,
.mobile-search-wrapper .ui-menu-item.ui-state-active {
    background: #fff8e0 !important;
}

/* Cabeceras de sección (PRODUCTOS, CATEGORÍAS) */
.mobile-search-wrapper .ui-autocomplete-category,
.mobile-search-wrapper .autocomplete-group {
    background: #ffcd00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    padding: 8px 15px !important;
    letter-spacing: 0.5px !important;
}

/* Ocultar elementos no deseados del módulo en móvil */
.mobile-search-wrapper .jolisearch-grid-btn,
.mobile-search-wrapper .ambjoli-grid,
.mobile-search-wrapper [class*="grid-btn"],
.mobile-search-wrapper [class*="grid-icon"],
.mobile-search-wrapper input[type="hidden"]+button:not(.button-search),
.mobile-search-wrapper .jolisearch .fa-th,
.mobile-search-wrapper #searchbox .fa-search:not(:first-child),
.mobile-search-wrapper #searchbox i.fa-search+i.fa-search {
    display: none !important;
}

/* Ocultar texto del botón y mantener solo un icono */
.mobile-search-wrapper .button-search span {
    display: none !important;
}

/* Solo mostrar el primer icono del botón */
.mobile-search-wrapper .button-search i:not(:first-child) {
    display: none !important;
}

/* Icono del botón de búsqueda */
.mobile-search-wrapper .button-search i,
.mobile-search-wrapper .button-search .fa-search {
    font-size: 14px !important;
    color: #000000 !important;
}

/* Ajuste del scroll de resultados */
.mobile-search-wrapper .ui-autocomplete {
    -webkit-overflow-scrolling: touch !important;
}

/* Eliminar bordes extra */
.mobile-search-wrapper #searchbox input {
    box-shadow: none !important;
}

/* ==========================================================================
   HEADER NAV MÓVIL - Barra Superior COMPACTA
   ========================================================================== */

@media (max-width: 768px) {

    /* Reorganizar el layout del header-nav */
    .header-nav>.container>.row {
        flex-direction: column !important;
        padding: 0 !important;
    }

    /* === SECCIÓN IZQUIERDA - Todo en UNA línea === */
    .header-nav .left-nav {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        background: #1a1a1a !important;
        padding: 5px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        order: 1 !important;
    }

    /* Contenedores inline */
    .header-nav .left-nav .d-inline-block {
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Redes sociales compactas */
    .header-nav .left-nav .social-links._topbar {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-nav .left-nav .social-links._topbar li {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .header-nav .left-nav .social-links._topbar li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .header-nav .left-nav .social-links._topbar li a i {
        font-size: 12px !important;
        color: #ffcd00 !important;
    }

    .header-nav .left-nav .social-links._topbar li a:hover i {
        color: #ffffff !important;
    }

    /* Separador visual */
    .header-nav .left-nav .block-links-inline::before {
        content: "|" !important;
        color: #444 !important;
        margin-right: 5px !important;
        font-size: 10px !important;
    }

    /* Enlaces inline compactos */
    .header-nav .left-nav .block-links-inline {
        display: inline-flex !important;
        align-items: center !important;
    }

    .header-nav .left-nav .block-links-inline ul {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .header-nav .left-nav .block-links-inline ul li {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .header-nav .left-nav .block-links-inline ul li::after {
        content: none !important;
    }

    .header-nav .left-nav .block-links-inline ul li a {
        color: #999 !important;
        font-size: 10px !important;
        text-decoration: none !important;
        padding: 0 !important;
    }

    .header-nav .left-nav .block-links-inline ul li a:hover {
        color: #ffcd00 !important;
    }

    /* === OCULTAR SECCIÓN CENTRAL === */
    .header-nav .center-nav {
        display: none !important;
    }

    /* === SECCIÓN DERECHA - Info Envío Compacta === */
    .header-nav .right-nav {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        background: #ffcd00 !important;
        padding: 4px 10px !important;
        order: 2 !important;
    }

    /* Info de envío en línea */
    .header-nav .header-shipping-info-top {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px 8px !important;
        text-align: center !important;
    }

    .header-nav .header-shipping-info-top .shipping-main {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #000 !important;
    }

    .header-nav .header-shipping-info-top .shipping-sub {
        font-size: 10px !important;
        font-weight: 500 !important;
        color: rgba(0, 0, 0, 0.7) !important;
    }

    .header-nav .header-shipping-info-top .shipping-link {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #000 !important;
        text-decoration: underline !important;
        background: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    .header-nav .header-shipping-info-top .shipping-link:hover {
        color: #333 !important;
    }

    #header .header-nav {
        padding-top: 0 !important;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 420px) {
    .header-nav .left-nav {
        padding: 4px 8px !important;
        gap: 6px !important;
    }

    .header-nav .left-nav .social-links._topbar li a {
        width: 20px !important;
        height: 20px !important;
    }

    .header-nav .left-nav .social-links._topbar li a i {
        font-size: 11px !important;
    }

    .header-nav .left-nav .block-links-inline ul li a {
        font-size: 9px !important;
    }

    .header-nav .right-nav {
        padding: 3px 8px !important;
    }

    .header-nav .header-shipping-info-top .shipping-main {
        font-size: 10px !important;
    }

    .header-nav .header-shipping-info-top .shipping-sub {
        font-size: 9px !important;
    }

    #header .header-nav {
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   PRODUCT MINIATURE - MOBILE OPTIMIZADO UX
   ========================================================================== */

/* Contenedor de REF + Cantidad en la misma línea */
.product-miniature .product-info-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 5px 0 8px 0 !important;
    padding: 4px 0 !important;
    border-bottom: 1px dashed #e5e5e5 !important;
}

.product-miniature .product-ref-info,
.product-miniature .product-stock-info {
    font-size: 11px !important;
    color: #888 !important;
    font-weight: 500 !important;
}

.product-miniature .product-ref-info {
    color: #ff8c00 !important;
}

.product-miniature .product-stock-info {
    color: #5fad48 !important;
}

/* ============================================
   MOBILE RESPONSIVE - TARJETAS COMPACTAS
   ============================================ */

@media (max-width: 768px) {

    /* Tarjeta más compacta */
    .product-miniature .product-description {
        padding: 8px 10px 10px !important;
    }

    /* Espaciado entre categoría y nombre */
    .product-miniature .product-category-name {
        font-size: 9px !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.5px !important;
    }

    /* Título más compacto */
    .product-miniature .product-title {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 3px !important;
        min-height: auto !important;
        max-height: 32px !important;
        overflow: hidden !important;
    }

    /* REF y Cantidad en línea */
    .product-miniature .product-info-container {
        flex-wrap: nowrap !important;
        margin: 4px 0 6px 0 !important;
        padding: 3px 0 !important;
        gap: 5px !important;
    }

    .product-miniature .product-ref-info,
    .product-miniature .product-stock-info {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    /* OCULTAR DESCRIPCIÓN CORTA en móvil - Alta especificidad */
    .product-miniature .product-description-short,
    .product-miniature .product-description .product-description-short,
    .product-carousel .product-miniature .product-description-short,
    article.product-miniature .product-description-short {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Precio MÁS GRANDE y visible - ALINEADO A LA IZQUIERDA */
    .product-miniature .product-price-and-shipping {
        margin: 5px 0 8px 0 !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .product-miniature .product-price {
        font-size: 38px !important;
        letter-spacing: -1px !important;
        transform: scale(1, 0.9) rotate(-2deg) !important;
        transform-origin: left center !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        text-shadow:
            2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
            1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
            3px 3px 0 rgba(0, 0, 0, 0.1) !important;
    }

    .product-miniature .tax-included-label {
        font-size: 9px !important;
        margin-top: 0 !important;
    }

    /* Botón y cantidad optimizados */
    .product-miniature .input-group-add-cart {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    /* Contenedor cantidad - POSICION RELATIVA */
    .product-miniature .qty-input-wrapper {
        margin-right: 0 !important;
        position: relative !important;
        display: flex !important;
    }

    .product-miniature .input-qty {
        width: 44px !important;
        min-width: 44px !important;
        height: 36px !important;
        padding: 4px 18px 4px 6px !important;
        font-size: 13px !important;
        border-radius: 4px !important;
    }

    /* Flechas de cantidad - POSICION ABSOLUTA FORZADA */
    .product-miniature .qty-arrows,
    .product-carousel .product-miniature .qty-arrows,
    article.product-miniature .qty-arrows {
        position: absolute !important;
        width: 16px !important;
        right: 1px !important;
        top: 1px !important;
        bottom: 1px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        border-left: 1px solid #e0e0e0 !important;
        background: #f5f5f5 !important;
        border-radius: 0 3px 3px 0 !important;
        overflow: hidden !important;
        transform: none;
    }

    .product-miniature .qty-btn,
    .product-carousel .product-miniature .qty-btn {
        font-size: 8px !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 50% !important;
        background: #f5f5f5 !important;
        color: #666 !important;
        text-decoration: none !important;
    }

    .product-miniature .qty-up,
    .product-carousel .product-miniature .qty-up {
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .product-miniature .qty-btn:hover {
        background: #ffcd00 !important;
        color: #000 !important;
    }

    /* Botón añadir al carrito compacto */
    .product-miniature .add-to-cart,
    .product-miniature .btn-product-list,
    .product-miniature button.btn-product-list {
        height: 36px !important;
        font-size: 10px !important;
        padding: 6px 8px !important;
        letter-spacing: 0 !important;
        gap: 3px !important;
    }

    .product-miniature .add-to-cart i,
    .product-miniature .btn-product-list i {
        font-size: 12px !important;
    }

    /* Ocultar texto del botón, solo mostrar icono en muy pequeño */
    .product-miniature .btn-product-list .spinner-icon {
        font-size: 11px !important;
    }
}

/* Ultra compacto para pantallas muy pequeñas */
@media (max-width: 480px) {

    .product-miniature .product-description {
        padding: 6px 8px 8px !important;
    }

    .product-miniature .product-category-name {
        font-size: 8px !important;
    }

    .product-miniature .product-title {
        font-size: 11px !important;
        max-height: 28px !important;
    }

    .product-miniature .product-ref-info,
    .product-miniature .product-stock-info {
        font-size: 8px !important;
    }

    .product-miniature .product-price {
        font-size: 32px !important;
    }

    .product-miniature .input-qty {
        width: 35px !important;
        min-width: 35px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    .product-miniature .add-to-cart,
    .product-miniature .btn-product-list {
        height: 32px !important;
        font-size: 9px !important;
        padding: 5px 6px !important;
    }

    /* Versión ultra-compacta: solo icono en botón */
    .product-miniature .btn-product-list {
        min-width: 0 !important;
    }
}

/* Para sliders específicamente - ajustar ancho de tarjeta */
@media (max-width: 768px) {
    .swiper-slide .product-miniature {
        min-height: auto !important;
    }

    .js-product-miniature-wrapper {
        min-height: auto !important;
    }
}

/* ==========================================================================
   ORDEN DE COLUMNAS - LEFT COLUMN PRIMERO
   ========================================================================== */

/* Asegurar que el row padre sea flex */
#inner-wrapper>.row,
#content-wrapper.left-column,
.container>.row:has(#left-column) {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Left column aparece primero */
#left-column {
    order: 1 !important;
}

/* Content wrapper aparece después */
#content-wrapper.js-content-wrapper {
    order: 2 !important;
}

/* ==========================================================================
   FIX BOTÓN X - PM ADVANCED SEARCH MOBILE
   ========================================================================== */

/* Contenedor del filtro - position relative */
.PM_ASBlockOutput.PM_ASMobileMode .PM_ASBlock {
    position: relative !important;
}

/* Título del filtro - position relative para el ::after */
.PM_ASBlockOutput.PM_ASMobileMode .PM_ASBlockTitle,
.PM_ASBlockOutput.PM_ASMobileMode .PM_ASearchTitle,
.PM_ASBlockOutput.PM_ASMobileMode #PM_ASBlock_1>.card-header {
    position: relative !important;
    padding-right: 45px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 45px !important;
}

/* Ocultar icono por defecto cuando filtro está cerrado */
.PM_ASBlockOutput.PM_ASMobileMode .PM_ASBlockTitle::after,
.PM_ASBlockOutput.PM_ASMobileMode .PM_ASearchTitle::after {
    display: none !important;
}

/* Botón X cuando el filtro está visible - dentro del título */
.PM_ASBlockOutput.PM_ASMobileMode.PM_ASMobileVisible .PM_ASBlockTitle::after,
.PM_ASBlockOutput.PM_ASMobileMode.PM_ASMobileVisible .PM_ASearchTitle::after,
.PM_ASBlockOutput.PM_ASMobileVisible .card-header::after {
    content: "\f00d" !important;
    /* FontAwesome: X */
    font-family: "FontAwesome" !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 35px !important;
    height: 35px !important;
    color: #333 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    transition: all 0.2s ease !important;
}

.PM_ASBlockOutput.PM_ASMobileMode.PM_ASMobileVisible .PM_ASBlockTitle:hover::after,
.PM_ASBlockOutput.PM_ASMobileMode.PM_ASMobileVisible .PM_ASearchTitle:hover::after {
    background: #e0e0e0 !important;
    color: #000 !important;
}

/* ==========================================================================
   TOAST NOTIFICACIÓN - AÑADIDO AL CARRITO
   ========================================================================== */

.cart-toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, #5fad48 0%, #4a9638 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 50px;
    box-shadow: 0 6px 25px rgba(95, 173, 72, 0.4);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.cart-toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.cart-toast-notification i {
    font-size: 18px;
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .cart-toast-notification {
        bottom: 80px;
        /* Por encima del nav inferior si lo hay */
        padding: 12px 20px;
        font-size: 13px;
        max-width: calc(100% - 40px);
    }
}

/* ==========================================================================
   PÁGINA DE PRODUCTO - OPTIMIZACIÓN MÓVIL
   ========================================================================== */

@media (max-width: 768px) {

    /* === TÍTULO DEL PRODUCTO === */
    .product_header_container {
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    .product_header_container .page-title,
    .product_header_container h1,
    #product h1.product-name,
    .product-name {
        font-size: 20px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
        color: #1a1a1a !important;
    }

    /* === REF Y STOCK EN LÍNEA === */
    .product-reference,
    .product-quantities,
    .product-availability {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 12px !important;
        gap: 5px !important;
        margin-right: 12px !important;
    }

    .product-reference .label,
    .product-quantities .label {
        color: #888 !important;
        font-weight: 500 !important;
    }

    .product-reference .value,
    .product-quantities .value {
        color: #333 !important;
        font-weight: 600 !important;
    }

    /* Badge de stock - más compacto */
    #product-availability .product-availability,
    .product-availability .product-last-items,
    .badge.product-last-items {
        display: inline-flex !important;
        align-items: center !important;
        padding: 5px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 15px !important;
        gap: 5px !important;
    }

    /* === PRECIO DESTACADO === */
    .product-prices {
        background: transparent !important;
        padding: 10px 0 !important;
        margin: 10px 0 !important;
        text-align: right !important;
    }

    .product-prices .current-price,
    .product-prices .product-price,
    .product-prices .current-price-value {
        font-size: 36px !important;
        font-weight: 800 !important;
        color: #ff6600 !important;
        letter-spacing: -1px !important;
    }

    .product-prices .tax-shipping-delivery-label,
    .product-prices .tax-included-label {
        font-size: 11px !important;
        color: #888 !important;
        margin-top: 2px !important;
    }

    .product-prices .regular-price {
        font-size: 16px !important;
        color: #999 !important;
        text-decoration: line-through !important;
        margin-right: 8px !important;
    }

    .product-prices .discount-percentage,
    .product-prices .discount-amount {
        font-size: 13px !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        background: #ff4444 !important;
        color: #fff !important;
        font-weight: 700 !important;
    }

    /* === DESCRIPCIÓN CORTA - MÁS LIMPIA === */
    .product-description-short,
    #product-description-short {
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        border-left: 3px solid #ffcd00 !important;
        padding: 12px 15px !important;
        border-radius: 0 8px 8px 0 !important;
        margin: 15px 0 !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #555 !important;
    }

    .product-description-short p {
        margin: 0 !important;
    }

    /* === SELECTOR DE CANTIDAD Y BOTÓN === */
    .product-add-to-cart {
        padding: 0 !important;
        margin: 10px 0 5px 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .product-add-to-cart .product-quantity.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* TODOS EN UNA FILA */
        gap: 8px !important;
        align-items: center !important;
    }

    /* Cantidad - más compacto */
    .product-add-to-cart .qty,
    .product-add-to-cart .col-add-qty {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .product-add-to-cart .bootstrap-touchspin,
    .product-add-to-cart .input-group.bootstrap-touchspin {
        width: 90px !important;
        height: 44px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .product-add-to-cart #quantity_wanted {
        height: 44px !important;
        width: 40px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        border: none !important;
        background: transparent !important;
        -moz-appearance: textfield !important;
    }

    .product-add-to-cart #quantity_wanted::-webkit-outer-spin-button,
    .product-add-to-cart #quantity_wanted::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* Botones +/- del touchspin */
    .product-add-to-cart .input-group-btn-vertical {
        display: flex !important;
        flex-direction: column !important;
        width: 25px !important;
        position: relative !important;
    }

    .product-add-to-cart .btn-touchspin,
    .product-add-to-cart .bootstrap-touchspin-up,
    .product-add-to-cart .bootstrap-touchspin-down {
        width: 25px !important;
        height: 22px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-left: 1px solid #ddd !important;
        cursor: pointer !important;
        font-size: 12px !important;
        color: #333 !important;
    }

    .product-add-to-cart .btn-touchspin:hover,
    .product-add-to-cart .bootstrap-touchspin-up:hover,
    .product-add-to-cart .bootstrap-touchspin-down:hover {
        background: #ffcd00 !important;
        color: #000 !important;
    }

    .product-add-to-cart .bootstrap-touchspin-up {
        border-bottom: 1px solid #ddd !important;
    }

    /* Botón añadir - se expande para ocupar espacio disponible */
    .product-add-to-cart .col-add-btn {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .product-add-to-cart .add-to-cart,
    .product-add-to-cart button.add-to-cart,
    #add-to-cart-or-refresh .add-to-cart {
        width: 100% !important;
        height: 44px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #ffcd00 0%, #ffc000 100%) !important;
        border: none !important;
        color: #000 !important;
        box-shadow: 0 3px 10px rgba(255, 205, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 12px !important;
    }

    .product-add-to-cart .add-to-cart:hover,
    .product-add-to-cart .add-to-cart:active {
        background: linear-gradient(135deg, #5fad48 0%, #4a9638 100%) !important;
        color: #fff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px rgba(95, 173, 72, 0.4) !important;
    }

    /* === WISHLIST Y COMPARAR - EN LA MISMA LÍNEA === */
    .product-add-to-cart .col-add-wishlist,
    .product-add-to-cart .col-add-compare {
        flex: 0 0 44px !important;
        width: 44px !important;
        padding: 0 !important;
    }

    .product-add-to-cart .btn-iqitwishlist-add,
    .product-add-to-cart .btn-iqitcompare-add {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        color: #666 !important;
        font-size: 16px !important;
    }

    .product-add-to-cart .btn-iqitwishlist-add:hover,
    .product-add-to-cart .btn-iqitcompare-add:hover {
        background: #ffcd00 !important;
        border-color: #ffcd00 !important;
        color: #000 !important;
    }

    /* Ocultar texto en botones pequeños */
    .product-add-to-cart .btn-iqitwishlist-add span,
    .product-add-to-cart .btn-iqitcompare-add span {
        display: none !important;
    }

    /* === PAYPAL AL 100% - SIN ESPACIOS === */
    .paypal-buttons,
    .paypal-button-container,
    #paypal-button-container,
    [class*="paypal"] .paypal-buttons,
    .paypal-express-checkout,
    #product .paypal-buttons {
        margin-top: 8px !important;
        margin-bottom: 5px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Pago a plazos - al 100% también */
    .paypal-apm-buttons,
    .paypal-messages,
    [data-pp-message],
    .paypal-button-label-container {
        margin-top: 5px !important;
        padding: 10px !important;
        font-size: 12px !important;
    }

    /* === TABS DE PRODUCTO === */
    .product-tabs {
        margin-top: 20px !important;
    }

    .product-tabs .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 3px !important;
        gap: 5px !important;
        border-bottom: 2px solid #e0e0e0 !important;
    }

    .product-tabs .nav-tabs::-webkit-scrollbar {
        height: 3px !important;
    }

    .product-tabs .nav-tabs::-webkit-scrollbar-thumb {
        background: #ffcd00 !important;
        border-radius: 3px !important;
    }

    .product-tabs .nav-tabs .nav-link,
    .product-tabs .nav-tabs .nav-item a {
        padding: 10px 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        border: none !important;
        background: #f5f5f5 !important;
        border-radius: 8px 8px 0 0 !important;
        color: #666 !important;
    }

    .product-tabs .nav-tabs .nav-link.active,
    .product-tabs .nav-tabs .nav-item.active a,
    .product-tabs .nav-tabs .nav-link:hover {
        background: #ffcd00 !important;
        color: #000 !important;
    }

    .product-tabs .tab-content {
        padding: 15px !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 0 0 12px 12px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* === GALERÍA DE IMÁGENES === */
    .product-cover-wrapper {
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
    }

    .product-images-thumbs,
    .product-thumbs-grid {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 5px 0 !important;
    }

    .product-images-thumbs .product-thumb,
    .product-thumbs-grid .product-thumb,
    .thumb-container {
        flex: 0 0 55px !important;
        width: 55px !important;
        height: 55px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        border: 2px solid transparent !important;
    }

    .product-images-thumbs .product-thumb.active,
    .product-thumbs-grid .product-thumb.selected,
    .thumb-container.selected {
        border-color: #ffcd00 !important;
    }
}

/* ==========================================================================
   PAYPAL - PLACEHOLDER MIENTRAS CARGA
   ========================================================================== */

/* Placeholder para botones PayPal mientras cargan */
[data-container-express-checkout]:empty::before,
[paypal-button-container]:empty::before,
.paypal-buttons:empty::before {
    content: "";
    display: block;
    width: 100%;
    height: 45px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: paypal-shimmer 1.5s infinite;
    border-radius: 5px;
}

@keyframes paypal-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Hacer que los botones de PayPal aparezcan más rápido */
.paypal-buttons iframe,
[paypal-button-container] iframe {
    display: block !important;
    opacity: 1 !important;
}

/* Forzar tamaño mínimo para evitar saltos de layout */
[data-container-express-checkout],
.paypal-button-container,
#paypal-button-container {
    min-height: 45px;
}

/* Ocultar placeholder cuando PayPal está cargado */
[data-container-express-checkout]:not(:empty)::before,
[paypal-button-container]:not(:empty)::before,
.paypal-buttons:not(:empty)::before {
    display: none !important;
}

/* Estilos específicos para móvil */
@media (max-width: 768px) {
    [data-container-express-checkout] {
        float: none !important;
        margin: 8px 0 !important;
        width: 100% !important;
    }

    [data-container-express-checkout]:empty::before,
    [paypal-button-container]:empty::before {
        height: 40px;
    }
}

/* ==========================================================================
   CONDICIONES DE ENVÍO - PÁGINA CMS
   ========================================================================== */

.condiciones-envio {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.condiciones-envio h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--dv-dark);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.condiciones-envio .subtitulo {
    font-size: 16px;
    color: var(--dv-gray);
    margin-bottom: 30px;
}

.condiciones-envio .alerta-canarias {
    background: var(--dv-yellow);
    padding: 15px 20px;
    border-radius: 8px;
    color: var(--dv-black);
    font-weight: 600;
    margin-bottom: 30px;
}

.condiciones-envio h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dv-dark);
    margin: 30px 0 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--dv-yellow);
}

.condiciones-envio h2 span {
    display: inline-block;
    background: var(--dv-yellow);
    color: var(--dv-black);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    margin-right: 10px;
}

.condiciones-envio p {
    margin-bottom: 15px;
    color: var(--dv-gray-dark);
    line-height: 1.7;
}

.condiciones-envio ul {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.condiciones-envio ul li {
    padding: 10px 15px;
    margin-bottom: 8px;
    background: var(--dv-off-white);
    border-left: 4px solid var(--dv-yellow);
    border-radius: 0 6px 6px 0;
}

.condiciones-envio .nota {
    background: #fff8e6;
    padding: 15px 20px;
    border-left: 4px solid var(--dv-yellow);
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
}

.condiciones-envio .nota strong {
    color: var(--dv-dark);
}

.condiciones-envio .islas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.condiciones-envio .islas-grid span {
    padding: 12px 15px;
    background: var(--dv-off-white);
    border-left: 4px solid var(--dv-green);
    border-radius: 0 6px 6px 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .condiciones-envio h1 {
        font-size: 22px;
    }

    .condiciones-envio h2 {
        font-size: 18px;
    }

    .condiciones-envio .islas-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   FOOTER - MÉTODOS DE PAGO
   ========================================================================== */

.payment-methods {
    display: flex;
    align-items: center;
    gap: 15px;
}

.payment-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.payment-secure .lock-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.payment-icons-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.payment-icons-row .payment-icon {
    height: 20px;
    width: auto;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
    /* Hace los iconos blancos */
}

.payment-icons-row .payment-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Iconos que mantienen sus colores originales */
.payment-icons-row .payment-icon[title="Mastercard"],
.payment-icons-row .payment-icon[title="Google Pay"],
.payment-icons-row .payment-icon[title="Sequra"],
.payment-icons-row .payment-icon[title="PayPal"] {
    filter: none;
    /* Mantener colores originales */
    opacity: 0.85;
}

/* Ajuste para el icono de Sequra */
.payment-icons-row .payment-icon[title="Sequra"] {
    height: 20px;
    border-radius: 3px;
}

/* Estilos del copyright wrapper - UNA SOLA LÍNEA */
.copyright-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 205, 0, 0.15);
    border-radius: 50%;
    color: #999;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--dv-yellow);
    color: #000;
}

.social-icons a i {
    font-size: 16px;
}

@media (max-width: 992px) {
    .copyright-wrapper {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .copyright-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .payment-methods {
        flex-wrap: wrap;
        justify-content: center;
    }

    .payment-icons-row {
        justify-content: center;
    }

    .payment-icons-row .payment-icon {
        height: 16px;
    }

    .payment-icons-row .payment-icon[title="Sequra"] {
        height: 18px;
    }
}

/* ==========================================================================
   HICOOKIELAW - MEJORAS POPUP COOKIES
   ========================================================================== */

/* Panel principal con altura máxima y scroll */
.hi-preference-panel {
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Contenedor de cookies con scroll */
.hi-cookie-selects {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 15px 0 !important;
}

/* Scrollbar personalizado */
.hi-cookie-selects::-webkit-scrollbar {
    width: 6px;
}

.hi-cookie-selects::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.hi-cookie-selects::-webkit-scrollbar-thumb {
    background: var(--dv-yellow);
    border-radius: 3px;
}

.hi-cookie-selects::-webkit-scrollbar-thumb:hover {
    background: var(--dv-yellow-dark);
}

/* Switch toggle más pequeño */
.hi-checkbox-toggle {
    transform: scale(0.75) !important;
    flex-shrink: 0 !important;
}

/* Ítem de cookie - mejor alineación */
.hi-cookie-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    gap: 10px !important;
}

/* Descripción de cookie - evitar overflow */
.hi-cookie-item-desc {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 13px !important;
    word-break: break-word !important;
}

/* Tabla de detalles de cookies */
.hi-cookie-item-details {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 10px 0 0 0 !important;
}

.hi-cookie-item-details table {
    width: 100% !important;
    font-size: 11px !important;
    border-collapse: collapse !important;
}

.hi-cookie-item-details table th,
.hi-cookie-item-details table td {
    padding: 6px 8px !important;
    text-align: left !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.hi-cookie-item-details table th {
    background: #f8f8f8 !important;
    font-weight: 600 !important;
}

/* Botones con estilo DoceVoltios */
.hi-cookie-btn {
    font-family: var(--dv-font) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.hi-cookie-btn.hi-cookie-btn-accept-selected,
.hi-cookie-btn-accept-all {
    background: var(--dv-yellow) !important;
    color: var(--dv-black) !important;
}

.hi-cookie-btn.hi-cookie-btn-accept-selected:hover,
.hi-cookie-btn-accept-all:hover {
    background: var(--dv-yellow-dark) !important;
}

.hi-cookie-btn-reject-all {
    background: #f0f0f0 !important;
    color: #666 !important;
}

.hi-cookie-btn-reject-all:hover {
    background: #e0e0e0 !important;
}

/* Icono de categoría más pequeño */
.hi-cookie-item-icon {
    flex-basis: 35px !important;
    margin-right: 8px !important;
}

.hi-cookie-item-icon img {
    max-width: 30px !important;
}

/* Responsive móvil */
@media (max-width: 480px) {
    .hi-preference-panel {
        max-width: 95vw !important;
        margin: 10px !important;
    }

    .hi-cookie-selects {
        max-height: 250px !important;
    }

    .hi-checkbox-toggle {
        transform: scale(0.65) !important;
    }

    .hi-cookie-item {
        padding: 8px 10px !important;
    }

    .hi-cookie-item-desc {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   PÁGINA SOBRE NOSOTROS - DOCE VOLTIOS CAMPER (REFORZADO)
   ========================================================================== */

/* ===== CONTENEDOR PRINCIPAL ===== */
.dv-about-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    background: transparent !important;
}

.dv-about-container * {
    box-sizing: border-box !important;
}

.dv-text-center {
    text-align: center !important;
}

/* ===== TIPOGRAFÍA ===== */
.dv-about-container h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 1rem !important;
    line-height: 1.1 !important;
    background: transparent !important;
    padding: 0 !important;
}

.dv-about-container h2 .highlight {
    color: #ffcd00 !important;
    position: relative !important;
    display: inline-block !important;
}

.dv-about-container h2 .highlight::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 6px !important;
    background: #ffcd00 !important;
    opacity: 0.3 !important;
    border-radius: 3px !important;
}

.dv-section-subtitle {
    font-size: 1.15rem !important;
    color: #666666 !important;
    max-width: 600px !important;
    margin: 0 auto 2.5rem !important;
}

/* ===== HERO SECTION ===== */
.dv-about-container .dv-hero {
    position: relative !important;
    background: #1a1a1a !important;
    border-radius: 24px !important;
    margin-bottom: 80px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

.dv-about-container .dv-hero-banner {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    position: relative !important;
    z-index: 1 !important;
}


.dv-about-container .dv-hero-overlay {
    position: relative !important;
    padding: 40px !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%) !important;
    margin-top: -60px !important;
    padding-top: 80px !important;
}

.dv-about-container .dv-hero-content {
    max-width: 700px !important;
}

.dv-about-container .dv-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffcd00 !important;
    color: #000000 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 16px !important;
}

.dv-about-container .dv-hero-badge i {
    animation: dv-pulse-icon 2s infinite !important;
}

@keyframes dv-pulse-icon {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.dv-about-container .dv-hero-title {
    font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
}

.dv-about-container .dv-hero-title strong {
    color: #ffcd00 !important;
    font-weight: 700 !important;
}

/* ===== BOTONES ===== */
.dv-about-container .dv-btn-group {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.dv-about-container .dv-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
}

.dv-about-container .dv-btn-primary {
    background: #ffcd00 !important;
    color: #000000 !important;
    box-shadow: 0 4px 20px rgba(255, 205, 0, 0.3) !important;
}

.dv-about-container .dv-btn-primary:hover {
    background: #5fad48 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
}

.dv-about-container .dv-btn-outline {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
}

.dv-about-container .dv-btn-outline:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1a1a1a !important;
    transform: translateY(-3px) !important;
}

/* ===== SECCIÓN QUIÉNES SOMOS ===== */
.dv-about-container .dv-section {
    padding: 80px 0 !important;
    background: transparent !important;
}

.dv-about-container .dv-about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.dv-about-container .dv-about-text p {
    font-size: 1.1rem !important;
    margin-bottom: 1.2rem !important;
    color: #3a3a3a !important;
    line-height: 1.7 !important;
}

.dv-about-container .dv-about-text p strong {
    color: #1a1a1a !important;
}

.dv-about-container .dv-about-image {
    position: relative !important;
}

.dv-about-container .dv-about-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

.dv-about-container .dv-about-image::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 100% !important;
    height: 100% !important;
    border: 4px solid #ffcd00 !important;
    border-radius: 24px !important;
    z-index: -1 !important;
}

.dv-about-container .dv-about-badge {
    position: absolute !important;
    bottom: -20px !important;
    left: 30px !important;
    background: #5fad48 !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 5 !important;
}

.dv-about-container .dv-about-badge i {
    font-size: 1.5rem !important;
}

/* ===== SECCIÓN SERVICIOS (FONDO OSCURO) ===== */
.dv-about-container .dv-section-dark {
    background: #1a1a1a !important;
    border-radius: 24px !important;
    padding: 80px 40px !important;
    margin-bottom: 0 !important;
}

.dv-about-container .dv-section-dark h2 {
    color: #ffffff !important;
}

.dv-about-container .dv-section-dark .dv-section-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dv-about-container .dv-section-dark h2 .highlight::after {
    background: #5fad48 !important;
}

.dv-about-container .dv-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-top: 40px !important;
}

.dv-about-container .dv-card {
    background: #252525 !important;
    padding: 32px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.dv-about-container .dv-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, #ffcd00, #5fad48) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s ease !important;
}

.dv-about-container .dv-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 205, 0, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.dv-about-container .dv-card:hover::before {
    transform: scaleX(1) !important;
}

.dv-about-container .dv-card-icon {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #ffcd00, #e6b800) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.6rem !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
}

.dv-about-container .dv-card h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

.dv-about-container .dv-card p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ===== POR QUÉ NOSOTROS ===== */
.dv-about-container .dv-why-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 40px !important;
}

.dv-about-container .dv-why-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px !important;
    background: #f7f7f7 !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.dv-about-container .dv-why-item:hover {
    background: #ffffff !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    transform: translateX(8px) !important;
}

.dv-about-container .dv-why-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background: #ffcd00 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: #1a1a1a !important;
    flex-shrink: 0 !important;
}

.dv-about-container .dv-why-content h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
}

.dv-about-container .dv-why-content p {
    font-size: 0.9rem !important;
    color: #666666 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ===== TIMELINE - CÓMO TRABAJAMOS ===== */
.dv-about-container .dv-steps-wrapper {
    background: linear-gradient(135deg, #f7f7f7 0%, #eeeeee 100%) !important;
    padding: 60px 40px !important;
    border-radius: 24px !important;
    margin-top: 40px !important;
}

.dv-about-container .dv-steps-container {
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.dv-about-container .dv-steps-container::before {
    content: '' !important;
    position: absolute !important;
    top: 35px !important;
    left: 80px !important;
    right: 80px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #ffcd00, #5fad48, #1a1a1a) !important;
    border-radius: 2px !important;
    z-index: 0 !important;
}

.dv-about-container .dv-step {
    flex: 1 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.dv-about-container .dv-step-number {
    width: 70px !important;
    height: 70px !important;
    background: #ffffff !important;
    border: 4px solid #ffcd00 !important;
    color: #1a1a1a !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.dv-about-container .dv-step:nth-child(2) .dv-step-number {
    border-color: #5fad48 !important;
}

.dv-about-container .dv-step:nth-child(3) .dv-step-number {
    border-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #ffcd00 !important;
}

.dv-about-container .dv-step:hover .dv-step-number {
    transform: scale(1.1) !important;
}

.dv-about-container .dv-step h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

.dv-about-container .dv-step p {
    font-size: 0.9rem !important;
    color: #666666 !important;
    max-width: 200px !important;
    margin: 0 auto !important;
}

/* ===== FAQ ===== */
.dv-about-container .dv-faq-container {
    max-width: 800px !important;
    margin: 40px auto 0 !important;
}

.dv-about-container .dv-faq-item {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.dv-about-container .dv-faq-item:hover {
    border-color: #ffcd00 !important;
    box-shadow: 0 4px 20px rgba(255, 205, 0, 0.15) !important;
}

.dv-about-container .dv-faq-question {
    padding: 20px 24px !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f7f7f7 !important;
    transition: all 0.3s ease !important;
}

.dv-about-container .dv-faq-question:hover {
    background: #f0f0f0 !important;
}

.dv-about-container .dv-faq-question::after {
    content: '\f078' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    color: #5fad48 !important;
}

.dv-about-container .dv-faq-answer {
    padding: 16px 24px 20px !important;
    font-size: 1rem !important;
    color: #666666 !important;
    line-height: 1.7 !important;
    border-top: 1px solid #eeeeee !important;
    background: #ffffff !important;
}

/* ===== CTA FINAL ===== */
.dv-about-container .dv-cta-final,
.page-cms .dv-cta-final,
section.dv-cta-final {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-radius: 24px !important;
    padding: 80px 40px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 80px !important;
    color: #ffffff !important;
}

.dv-about-container .dv-cta-final::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255, 205, 0, 0.08) 0%, transparent 50%) !important;
    animation: dv-rotate 20s linear infinite !important;
}

@keyframes dv-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.dv-about-container .dv-cta-content {
    position: relative !important;
    z-index: 1 !important;
}

.dv-about-container .dv-cta-icon {
    width: 80px !important;
    height: 80px !important;
    background: #ffcd00 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    color: #1a1a1a !important;
    margin: 0 auto 24px !important;
    animation: dv-bounce 2s infinite !important;
}

@keyframes dv-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dv-about-container .dv-cta-final h2 {
    color: #ffffff !important;
    margin-bottom: 16px !important;
}

.dv-about-container .dv-cta-final p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.15rem !important;
    max-width: 500px !important;
    margin: 0 auto 32px !important;
}

.dv-about-container .dv-cta-final .dv-btn-outline {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.dv-about-container .dv-cta-final .dv-btn-outline:hover {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* ===== RESPONSIVE SOBRE NOSOTROS ===== */
@media (max-width: 992px) {
    .dv-about-container .dv-about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .dv-about-container .dv-about-image {
        order: -1 !important;
    }

    .dv-about-container .dv-about-image::before {
        display: none !important;
    }

    .dv-about-container .dv-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dv-about-container .dv-section-dark {
        border-radius: 0 !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .dv-about-container .dv-cta-final {
        border-radius: 0 !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
    }
}

@media (max-width: 768px) {
    .dv-about-container .dv-hero {
        border-radius: 0 !important;
        margin-bottom: 60px !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
    }

    .dv-about-container .dv-hero-overlay {
        position: relative !important;
        background: #1a1a1a !important;
        padding: 30px 24px !important;
    }

    .dv-about-container .dv-btn-group {
        flex-direction: column !important;
    }

    .dv-about-container .dv-section {
        padding: 60px 0 !important;
    }

    .dv-about-container .dv-services-grid {
        grid-template-columns: 1fr !important;
    }

    .dv-about-container .dv-section-dark {
        padding: 60px 24px !important;
    }

    .dv-about-container .dv-steps-wrapper {
        padding: 40px 24px !important;
    }

    .dv-about-container .dv-steps-container {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .dv-about-container .dv-steps-container::before {
        display: none !important;
    }

    .dv-about-container .dv-step-number {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.3rem !important;
    }

    .dv-about-container .dv-cta-final {
        padding: 60px 24px !important;
        margin-top: 60px !important;
    }

    .dv-about-container .dv-why-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Animación entrada */
@keyframes dv-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dv-about-container .dv-section,
.dv-about-container .dv-hero,
.dv-about-container .dv-section-dark,
.dv-about-container .dv-cta-final {
    animation: dv-fadeInUp 0.8s ease-out forwards !important;
}

/* ==========================================================================
   VIDEO BUTTON + POPUP - DESCRIPCIÓN DE PRODUCTO
   ========================================================================== */

/* Contenedor del botón de video */
.dv-video-btn-wrapper {
    display: inline-block;
    margin: 15px 0;
}

/* Botón de ver video */
.dv-video-btn {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: dv-gentle-pulse 3s ease-in-out infinite;
    border-radius: 8px;
    overflow: hidden;
}

.dv-video-btn img {
    display: block;
    max-width: 200px;
    height: auto;
    transition: all 0.3s ease;
}

/* Efecto hover */
.dv-video-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 25px rgba(255, 205, 0, 0.4);
    animation: none;
}

.dv-video-btn:hover img {
    filter: brightness(1.1);
}

/* Animación suave tipo "pulsación" continua */
@keyframes dv-gentle-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* ========== POPUP DE VIDEO ========== */

/* Overlay oscuro */
.dv-video-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dv-video-popup-overlay.active {
    display: flex;
    opacity: 1;
}

/* Contenedor del video */
.dv-video-popup-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dv-video-popup-overlay.active .dv-video-popup-content {
    transform: scale(1);
    opacity: 1;
}

/* Video dentro del popup */
.dv-video-popup-content video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

/* Botón de cerrar */
.dv-video-popup-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: #ffcd00;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    transition: all 0.3s ease;
    z-index: 100000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dv-video-popup-close:hover {
    background: #5fad48;
    color: #fff;
    transform: rotate(90deg) scale(1.1);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .dv-video-popup-content {
        width: 95%;
        max-width: none;
        border-radius: 8px;
    }

    .dv-video-popup-close {
        top: -12px;
        right: -12px;
        width: 35px;
        height: 35px;
        font-size: 20px;
    }

    .dv-video-btn img {
        max-width: 160px;
    }
}

/* ==========================================================================
   MODAL DE VIDEO IQITEXTENDEDPRODUCT - ESTILOS PERSONALIZADOS
   ========================================================================== */

/* Modal backdrop más oscuro */
.js-iqit-iqitvideos-modal.show~.modal-backdrop,
#iqit-iqitvideos-modal~.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
}

/* Modal más grande y centrado */
#iqit-iqitvideos-modal .modal-dialog {
    max-width: 900px !important;
    margin: 2rem auto !important;
}

#iqit-iqitvideos-modal .modal-content {
    background: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

#iqit-iqitvideos-modal .modal-header {
    background: linear-gradient(135deg, #ffcd00, #e6b800) !important;
    border-bottom: none !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
}

#iqit-iqitvideos-modal .modal-title {
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

#iqit-iqitvideos-modal .modal-header .dv-video-popup-close,
#iqit-iqitvideos-modal .modal-header .close,
#iqit-iqitvideos-modal .modal-header .btn-close {
    background: #000 !important;
    color: #ffcd00 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    position: static !important;
}

#iqit-iqitvideos-modal .modal-header .dv-video-popup-close:hover,
#iqit-iqitvideos-modal .modal-header .close:hover,
#iqit-iqitvideos-modal .modal-header .btn-close:hover {
    background: #5fad48 !important;
    color: #fff !important;
    transform: rotate(90deg) !important;
}

#iqit-iqitvideos-modal .modal-body {
    padding: 0 !important;
    background: #000 !important;
}

#iqit-iqitvideos-modal .iqitvideos-block video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain !important;
}

#iqit-iqitvideos-modal .iqitvideos-block iframe {
    display: block !important;
    width: 100% !important;
    min-height: 450px !important;
}

/* Responsive */
@media (max-width: 768px) {
    #iqit-iqitvideos-modal .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }

    #iqit-iqitvideos-modal .iqitvideos-block iframe {
        min-height: 280px !important;
    }
}

/* ==========================================================================
   MEGAMENU RESPONSIVE - EVITAR SALTO DE LÍNEA EN TABLETS
   ========================================================================== */

/* En tablets y laptops pequeñas: menú horizontal con scroll si no cabe */
@media (min-width: 768px) and (max-width: 1500px) {

    /* Hacer el contenedor del menú scrollable horizontalmente */
    .megamenu-nav-col .cbp-hrmenu>ul,
    #iqitmegamenu-horizontal .cbp-hrmenu>ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Firefox */
        -ms-overflow-style: none !important;
        /* IE/Edge */
        white-space: nowrap !important;
        padding-bottom: 5px !important;
    }

    /* Ocultar scrollbar en Chrome/Safari */
    .megamenu-nav-col .cbp-hrmenu>ul::-webkit-scrollbar,
    #iqitmegamenu-horizontal .cbp-hrmenu>ul::-webkit-scrollbar {
        display: none !important;
    }

    /* Asegurar que los tabs no se corten */
    .megamenu-nav-col .cbp-hrmenu>ul>li,
    #iqitmegamenu-horizontal .cbp-hrmenu>ul>li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Reducir padding de los links */
    .megamenu-nav-col .cbp-hrmenu .nav-link,
    #iqitmegamenu-horizontal .cbp-hrmenu .nav-link {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }

    /* Texto más compacto */
    .megamenu-nav-col .cbp-hrmenu .cbp-tab-title,
    #iqitmegamenu-horizontal .cbp-hrmenu .cbp-tab-title {
        font-size: 13px !important;
    }

    /* Ocultar iconos del menú en tablets pequeñas para ahorrar espacio */
    .megamenu-nav-col .cbp-hrmenu .cbp-mainlink-icon,
    #iqitmegamenu-horizontal .cbp-hrmenu .cbp-mainlink-icon {
        display: none !important;
    }
}

/* Laptops pequeñas y tablets: solo ocultar iconos para que quepa todo */
@media (min-width: 768px) and (max-width: 1440px) {

    /* SOLO ocultar iconos del menú para ganar espacio - mantener todos los elementos */
    .megamenu-nav-col .cbp-hrmenu .cbp-mainlink-icon,
    #iqitmegamenu-horizontal .cbp-hrmenu .cbp-mainlink-icon,
    .cbp-hrmenu .cbp-mainlink-icon {
        display: none !important;
    }

    /* Reducir padding de los links para que quepan mejor */
    .megamenu-nav-col .cbp-hrmenu .nav-link,
    #iqitmegamenu-horizontal .cbp-hrmenu .nav-link {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
}

/* Si prefieres mostrar un "Ver más" en lugar de scroll, descomenta esto: */
/*
@media (min-width: 768px) and (max-width: 1024px) {
    .cbp-hrmenu > ul > li.cbp-hrmenu-tab:nth-child(n+4) {
        display: none !important;
    }
    
    .cbp-hrmenu > ul::after {
        content: "Ver más ▼";
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px 15px !important;
        color: #ffffff !important;
        font-size: 12px !important;
        cursor: pointer !important;
        background: rgba(255, 205, 0, 0.2) !important;
        border-radius: 4px !important;
    }
}
*/

/* ==========================================================================
   BOTÓN GOOGLE SIGN-IN - ESTILO PREMIUM
   ========================================================================== */

/* Contenedor del social login - más prominente */
.opc_social_form {
    margin: 25px 0 !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e8e8e8 !important;
}

/* Lista de botones social */
ul.opc_social {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Etiqueta "O continúa con" */
.opc_social_form>label {
    display: block !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
}

.opc_social_form>label::before,
.opc_social_form>label::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 80px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #ddd) !important;
}

.opc_social_form>label::before {
    left: 10% !important;
    background: linear-gradient(90deg, transparent, #ddd) !important;
}

.opc_social_form>label::after {
    right: 10% !important;
    background: linear-gradient(90deg, #ddd, transparent) !important;
}

/* Botón de Google - GRANDE y VISIBLE */
.opc_social_item.google.active.light {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

.opc_social_item.google .opc_social_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 30px !important;
    background: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 30px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #3c4043 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto shimmer de fondo */
.opc_social_item.google .opc_social_btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent) !important;
    transition: left 0.5s ease !important;
}

.opc_social_item.google .opc_social_btn:hover::before {
    left: 100% !important;
}

/* Hover del botón Google */
.opc_social_item.google .opc_social_btn:hover {
    background: #f8f9fa !important;
    border-color: #4285f4 !important;
    box-shadow: 0 4px 20px rgba(66, 133, 244, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Active/Click del botón */
.opc_social_item.google .opc_social_btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2) !important;
}

/* Icono de Google - más grande */
.opc_social_item.google .opc_social_btn svg,
.opc_social_item.google .opc_social_btn img {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

.opc_social_item.google .opc_social_btn i {
    font-size: 24px !important;
    color: #4285f4 !important;
}

/* Texto "Sign in with Google" */
.opc_social_item.google .opc_social_btn::after {
    content: "Iniciar sesión con Google" !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #3c4043 !important;
    letter-spacing: 0.3px !important;
}

/* Ocultar el texto por defecto si existe */
.opc_social_item.google .opc_social_btn .ets_svg_icon+span,
.opc_social_item.google .opc_social_btn>span:not(.ets_svg_icon) {
    display: none !important;
}

/* Estilo específico para tema light */
li.opc_social_item.google.light {
    background: transparent !important;
    border-radius: 30px !important;
}

li.opc_social_item.google.light:hover {
    background: transparent !important;
}

/* Badge "Recomendado" */
.opc_social_item.google.active.light::before {
    content: "⚡ Rápido y seguro" !important;
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #34a853 !important;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(52, 168, 83, 0.15) !important;
}

/* Estilos para botones de Facebook y PayPal también */
.opc_social_item.facebook .opc_social_btn,
.opc_social_item.paypal .opc_social_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 50px !important;
    padding: 14px 25px !important;
    border-radius: 25px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.opc_social_item.facebook .opc_social_btn {
    background: #1877f2 !important;
    border: none !important;
    color: #ffffff !important;
}

.opc_social_item.facebook .opc_social_btn:hover {
    background: #166fe5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4) !important;
}

.opc_social_item.paypal .opc_social_btn {
    background: #ffc439 !important;
    border: none !important;
    color: #003087 !important;
}

.opc_social_item.paypal .opc_social_btn:hover {
    background: #f0b732 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 196, 57, 0.4) !important;
}

/* Responsive para móviles */
@media (max-width: 576px) {
    .opc_social_form {
        padding: 15px !important;
        margin: 20px 0 !important;
    }

    .opc_social_item.google .opc_social_btn {
        min-height: 50px !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        border-radius: 25px !important;
    }

    .opc_social_item.google .opc_social_btn::after {
        content: "Continuar con Google" !important;
        font-size: 14px !important;
    }

    .opc_social_item.google .opc_social_btn svg,
    .opc_social_item.google .opc_social_btn img {
        width: 24px !important;
        height: 24px !important;
    }

    .opc_social_form>label::before,
    .opc_social_form>label::after {
        width: 40px !important;
    }

    .opc_social_item.google.active.light::before {
        font-size: 10px !important;
        padding: 5px 12px !important;
    }
}

/* ==========================================================================
   FIX: CORRECCIONES PARA VERSIÓN PORTÁTIL/LAPTOP (992px - 1441px)
   Resuelve el problema del contenido cortado en pantallas medianas
   Solo afecta a tablets grandes y laptops, NO a móviles
   ========================================================================== */

/* === CONTENEDOR PRINCIPAL: Forzar ancho flexible en portátiles === */
@media (min-width: 992px) and (max-width: 1441px) {

    /* El contenedor Bootstrap no debe tener ancho fijo */
    .container,
    #inner-wrapper.container,
    #wrapper .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* El #main debe ser fluido */
    #main,
    section#main {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    /* Content wrapper debe respetar límites */
    #content-wrapper,
    #content-wrapper.js-content-wrapper {
        max-width: 100% !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    /* Row de Bootstrap no debe desbordar */
    #inner-wrapper>.row,
    #wrapper .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
}

/* === SUBCATEGORÍAS: Slider adaptativo en portátil === */
@media (min-width: 992px) and (max-width: 1441px) {

    /* Wrapper del slider debe respetar contenedor */
    .subcategories-circular-block {
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }

    .subcategories-slider-wrapper {
        max-width: 100% !important;
        padding: 0 35px !important;
        box-sizing: border-box !important;
    }

    /* Swiper debe usar todo el ancho disponible */
    .subcategories-swiper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Items más pequeños en portátil */
    .subcategory-item {
        max-width: 120px !important;
    }

    .subcategory-image-circle {
        width: 90px !important;
        height: 90px !important;
    }

    .subcategory-name-text {
        font-size: 12px !important;
    }
}

/* === PRODUCTOS GRID: Ajustar en portátil === */
@media (min-width: 992px) and (max-width: 1441px) {

    /* Grid de productos sin desbordamiento */
    #products,
    section#products,
    .products.row,
    .products-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Productos miniaturas más compactos */
    .product-miniature {
        padding: 10px !important;
    }
}

/* === CATEGORÍA CON FILTROS LATERALES === */
@media (min-width: 992px) and (max-width: 1441px) {

    /* Left column (filtros) más estrecho */
    #left-column {
        flex: 0 0 22% !important;
        max-width: 22% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Content wrapper más ancho */
    #content-wrapper.left-column,
    #content-wrapper.js-content-wrapper.left-column {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* === CORRECCIONES PARA 992px - 1300px (portátiles pequeños) === */
@media (min-width: 992px) and (max-width: 1300px) {

    /* Contenedor con padding reducido */
    .container,
    #inner-wrapper.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Subcategorías con 4 items visibles */
    .subcategory-item {
        max-width: 110px !important;
    }

    .subcategory-image-circle {
        width: 80px !important;
        height: 80px !important;
    }

    .subcategory-name-text {
        font-size: 11px !important;
    }

    /* Left column aún más estrecho */
    #left-column {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Content wrapper más grande */
    #content-wrapper.left-column,
    #content-wrapper.js-content-wrapper.left-column {
        flex: 0 0 80% !important;
        max-width: 80% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ajustar grid de productos */
    .products.row>.product-miniature {
        padding: 8px !important;
    }
}

/* === FIX CRÍTICO: Asegurar que nada desborde el viewport en portátil === */
@media (min-width: 992px) and (max-width: 1441px) {
    body {
        overflow-x: hidden !important;
    }

    #wrapper,
    #main-page-content,
    main#main-page-content {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Navegación de subcategorías dentro de límites */
    .subcategories-nav-prev {
        left: 0 !important;
    }

    .subcategories-nav-next {
        right: 0 !important;
    }
}

/* ==========================================================================
   PRODUCT INFO CONTAINER - MOBILE RESPONSIVE
   ========================================================================== */

/* Base styles for product info container */
.product-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    font-size: 12px;
    margin: 8px 0;
}

.product-info-container span {
    display: inline-block;
}

/* Mobile: Make EAN appear on its own line */
@media (max-width: 576px) {
    .product-info-container {
        flex-direction: column;
        gap: 3px;
    }

    .product-info-container .product-ref-info,
    .product-info-container .product-stock-info {
        display: inline;
    }

    .product-info-container .product-ean-info {
        display: block;
        width: 100%;
    }
}

/* ==========================================================================
   QUANTITY INPUT - MOBILE FIX
   ========================================================================== */

/* Base styles for qty input in product cards */
.product-miniature .qty-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.product-miniature .qty-input-wrapper .input-qty {
    width: 50px;
    text-align: center;
    padding-right: 20px;
    -moz-appearance: textfield;
}

/* Hide browser default number spinners */
.product-miniature .qty-input-wrapper .input-qty::-webkit-outer-spin-button,
.product-miniature .qty-input-wrapper .input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-miniature .qty-arrows {
    position: absolute;
    right: 2px;
    top: 50%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.product-miniature .qty-arrows .qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    font-size: 10px;
    color: #666;
    text-decoration: none;
}

.product-miniature .qty-arrows .qty-btn:hover {
    color: #000;
}

/* Mobile specific adjustments */
@media (max-width: 576px) {
    .product-miniature .input-group-add-cart {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: stretch;
    }

    .product-miniature .qty-input-wrapper {
        flex: 0 0 auto;
    }

    .product-miniature .qty-input-wrapper .input-qty {
        width: 45px;
        height: 38px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .product-miniature .qty-arrows {
        right: 1px;
    }

    .product-miniature .qty-arrows .qty-btn {
        width: 16px;
        height: 12px;
        font-size: 9px;
    }

    .product-miniature .btn.add-to-cart {
        flex: 1;
        font-size: 12px;
        padding: 8px 10px;
    }
}

.categories-sidebar-content #iqithtmlandbanners-block-2 {
    display: none;
}