/* ---Preloader--- */


.preloader-active {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
}

.preloader-active .preloader-area-wrap {
    background-color: #ffffff;
    position: absolute;
    left: 0;
    display: block;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 999999;
}


.preloader-area-wrap {
    display: none;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.open_tm_preloader {
    position: fixed;
    background-color: transparent;
    z-index: 9999;
    height: 100%;
    width: 100%;
    -webkit-transition: 0.2s all ease;
    -o-transition: 0.2s all ease;
    transition: 0.2s all ease;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.open_tm_preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.open_tm_preloader.loaded:before, .open_tm_preloader.loaded:after {
    width: 0%;
}

.open_tm_preloader:before, .open_tm_preloader:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 50%;
    background-color: #ffffff;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.open_tm_preloader:before {
    top: 0;
    left: 0;
}

.open_tm_preloader:after {
    bottom: 0;
    right: 0;
}

/** Cart **/
.product-add-action {
    transition: all 0.3s ease 0s;
    position: absolute;
    bottom: 0;
    left: -170px;
}

.product-add-action ul {
    display: flex;
}

.product-add-action ul li:not(:last-child) {
    padding-right: 5px;
}

.product-add-action ul li a i {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    background-color: #abd373;
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    transition: all 0.3s ease 0s;
}

.product-add-action ul li a i:hover {
    background-color: #abd373;
    color: #ffffff;
}

.product-tab-nav.tab-style-1 {
    padding-top: 60px;
    padding-bottom: 55px;
    justify-content: center;
}

@media (max-width: 767px) {
    .product-tab-nav.tab-style-1 {
        padding-top: 30px;
        padding-bottom: 25px;
    }
}

@media (max-width: 479px) {
    .product-tab-nav.tab-style-1 {
        margin-bottom: -30px;
    }
}

.product-tab-nav.tab-style-1 li:not(:last-child) {
    padding-right: 25px;
}

@media (max-width: 479px) {
    .product-tab-nav.tab-style-1 li {
        padding-right: 15px;
        margin-bottom: 15px;
    }
}
.no-scroll {
    overflow: hidden;
}

.blue-card-header {
    background-color: #007bff; /* Esto es un azul estándar, ajusta según tus necesidades */
    color: white;
}

.bio-card-header {
    background-color: #22998e; /* Esto es un azul estándar, ajusta según tus necesidades */
    color: white;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.dropdown-menu {
    background-color: white;
    border: 1px solid #22998e;
}

.dropdown-menu a {
    background-color: white;
}

#header-login-form {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
}

/* Estilos para pantallas medianas (tabletas) */
@media (max-width: 768px) {
    .footer-area {
        padding: 20px;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-widget-item {
        margin-bottom: 20px;
    }

    .footer-widget-logo img {
        max-width: 100px;
    }

    .footer-widget-list-item {
        list-style: none;
        padding: 0;
    }

    .footer-widget-list-item li {
        margin: 10px 0;
    }

    .footer-contact-info {
        text-align: center;
    }

    .social-link ul {
        display: flex;
        justify-content: center;
        padding: 0;
        list-style: none;
    }

    .social-link ul li {
        margin: 0 10px;
    }
}

/* Ajustes generales para mejorar la apariencia */
.footer-area {
    background-color: #f8f9fa;
    color: #333;
    padding: 40px 0;
}

.footer-widget-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.footer-widget-desc {
    font-size: 1rem;
    line-height: 1.5;
}

.footer-contact-info .number {
    font-size: 1.5rem;
    font-weight: bold;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    background-color: #e9ecef;
}

.footer-bottom .copyright {
    font-size: 0.9rem;
}

/* Estilos personalizados para el formulario de inicio de sesión */
.dropdown-menu {
    padding: 20px;
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.dropdown-menu input[type="text"],
.dropdown-menu input[type="password"] {
    margin-bottom: 15px;
}
.dropdown-menu .btn-primary {
    width: 100%;
    margin-bottom: 10px;
}
.dropdown-menu .btn-secondary {
    width: 100%;
}
.form-check-label {
    margin-left: 5px;
}
.dropdown-menu h5 {
    text-align: center;
    margin-bottom: 20px;
}

/* Cookie Consent Backdrop */


#reconfigureCookies {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
}


.footer-logo img {
    max-width: 150px;
    margin-bottom: 20px;
}

.separator-li {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.separator-li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.htmx_products_list .product-image {
    width: 100%;          /* antes: 240px hardcodeado → desbordaba en col-6 mobile */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0 auto; /* Centra las imágenes horizontalmente */
}

.footer-bottom {
    background-color: #00796B; /* Color Primario del logo */
    color: #ffffff; /* Blanco para el texto */
    padding: 15px 0;
    font-size: 0.875rem;
}

.footer-area {
    background-color: rgba(162, 222, 214, 0.29); /* Fondo semitransparente */
    border-top: 15px solid #00796B; /* Cambia a color primario del logo de Biopompas */
    padding-top: 40px;
    padding-bottom: 40px;

}


/* Test Web UI */

a {
    color: #00796B; /* Color Primario */
}

a:hover {
    color: #8BC34A; /* Color Secundario */
}

.btn-pronia-primary {
    background-color: #00796B;
    border-color: #00796B;
    color: #fff;
}

.btn-pronia-primary:hover,
.btn-pronia-primary:focus,
.btn-pronia-primary:active {
    background-color: #005F5F;
    border-color: #004D40;
    color: #fff;
}

.btn-pronia-secondary {
    background-color: #8BC34A;
    border-color: #8BC34A;
    color: #fff;
}

.btn-pronia-secondary:hover,
.btn-pronia-secondary:focus,
.btn-pronia-secondary:active {
    background-color: #7CB342;
    border-color: #689F38;
    color: #fff;
}

.btn-white {
    background-color: #ffffff;
    color: #00796B; /* Color Primario */
}

.btn-white:hover {
    background-color: #8BC34A; /* Color Secundario */
    border-color: #00796B; /* Color Primario */
    color: #ffffff;
}

.text-pronia-primary * {
    color: #00796B; /* Color Primario */
}

.text-pronia-secondary * {
    color: #8BC34A; /* Color Secundario */
}

.bg-pronia-primary {
    background-color: #00796B; /* Color Primario */
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: #8BC34A; /* Color Secundario */
    color: #ffffff;
}

.swiper-pagination-bullet:before {
    background-color: #00796B; /* Color Primario */
}

.swiper-pagination-bullet-active {
    border-color: #8BC34A; /* Color Secundario */
}

.dropdown-menu li a:hover, .dropdown-menu li a:focus {
    background-color: #00796B; /* Color Primario */
    color: #ffffff;
}

.social-link ul li a {
    color: #00796B; /* Color Primario */
}

.social-link ul li a:hover {
    color: #8BC34A; /* Color Secundario */
}

/* Test Web UI Bootstrap 5 */

.btn-primary {
    background-color: #00796B; /* Color Primario */
    border-color: #00796B; /* Color Primario */
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #005F5F; /* Un poco más oscuro para hover/active */
    border-color: #005F5F; /* Un poco más oscuro para hover/active */
}

.btn-secondary {
    background-color: #8BC34A; /* Color Secundario */
    border-color: #8BC34A; /* Color Secundario */
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #7CB342; /* Un poco más oscuro para hover/active */
    border-color: #7CB342; /* Un poco más oscuro para hover/active */
}

.bg-primary {
    background-color: #00796B !important; /* Color Primario */
}

.bg-secondary {
    background-color: #8BC34A !important; /* Color Secundario */
}

.text-primary {
    color: #00796B !important; /* Color Primario */
}

.text-secondary {
    color: #8BC34A !important; /* Color Secundario */
}

.border-primary {
    border-color: #00796B !important; /* Color Primario */
}

.border-secondary {
    border-color: #8BC34A !important; /* Color Secundario */
}

.alert-primary {
    background-color: #E0F2F1; /* Fondo claro del color primario */
    border-color: #00796B; /* Borde del color primario */
    color: #00796B; /* Texto del color primario */
}

.alert-secondary {
    background-color: #F1F8E9; /* Fondo claro del color secundario */
    border-color: #8BC34A; /* Borde del color secundario */
    color: #8BC34A; /* Texto del color secundario */
}

/* Botones Deshabilitados */
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
    background-color: #cccccc; /* Gris claro para fondo deshabilitado */
    border-color: #cccccc; /* Gris claro para borde deshabilitado */
}

.btn-default .badge {
    color: #fff;
    background-color: #333;
}

/* Botones Primarios */
.btn-primary {
    color: #fff;
    background-color: #00796B; /* Color Primario */
    border-color: #00796B; /* Color Primario */
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #005F5F; /* Un poco más oscuro para focus */
    border-color: #005F5F; /* Un poco más oscuro para focus */
}

.btn-primary:hover {
    color: #fff;
    background-color: #005F5F; /* Un poco más oscuro para hover */
    border-color: #004D40; /* Un poco más oscuro para hover */
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #005F5F; /* Un poco más oscuro para active */
    border-color: #004D40; /* Un poco más oscuro para active */
}

/* Animación de resplandor */
@keyframes radial-glow-internal {
    60% {
        box-shadow: inset 0 0 5px #00796B, inset 0 0 10px #00796B;
    }
    0% {
        box-shadow: inset 0 0 15px #00796B, inset 0 0 30px #00796B;
    }
    0% {
        box-shadow: inset 0 0 5px #00796B, inset 0 0 10px #00796B;
    }
}

.radio-glow {
    animation: radial-glow-internal 1.0s infinite;
}

/* Reparación color header y del footer */
.header-top.bg-pronia-primary {
    background-color: #008080; /* Fondo verde similar al logo */
    color: #FFFFFF; /* Texto en blanco */
}

.header-top.bg-pronia-primary a {
    color: #FFFFFF; /* Enlaces en blanco */
}

.header-top.bg-pronia-primary .icon {
    color: #FFFFFF; /* Iconos en blanco */
}

.header-top.bg-pronia-primary .phone-icon {
    background-color: #008080; /* Fondo del icono del teléfono */
    border-radius: 50%;
    padding: 5px;
}

.header-top.bg-pronia-primary .phone-icon i {
    color: #FFFFFF; /* Color del icono del teléfono */
}

/* ── Barra superior compacta y centrada (2026-08-30) ──
   Altura reducida + banderas/idioma y texto centrados verticalmente. */
.header-top {
    font-size: 14px;
    padding: 4px 0 !important;
    line-height: 1.2;
}
.header-top .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.header-top .row {
    min-height: 22px;
    align-items: center;
}
/* Fix apilado: el padding lateral del col-6 hacía sumar >100% y el 2º col saltaba de línea */
.header-top .col-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 50%;
    max-width: 50%;
}
.header-top .header-top-left,
.header-top .header-top-right {
    display: flex;
    align-items: center;
    height: 22px;
    min-height: 22px;
}
.header-top .header-top-right { justify-content: flex-end; }
.header-top .pronia-offer {
    font-size: 13px;
    letter-spacing: .4px;
    line-height: 1.2;
}
.header-top .language-selector {
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.header-top .language-selector li {
    margin-right: 0 !important; /* neutraliza el margin inline del HTML */
    display: flex;
    align-items: center;
}
.header-top .language-selector a { display: flex; align-items: center; }
.header-top .language-selector img { display: block; }

.footer-area .login-section {
    background-color: #F0F8FF; /* Fondo ligero para diferenciar */
    border: 2px solid #008080; /* Borde que coincide con los colores del logo */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para resaltar */
    padding: 20px;
    margin-top: 20px;
}

.footer-area .login-section h2 {
    color: #008080; /* Color de texto que coincide con el logo */
    margin-bottom: 20px;
}

.footer-area .login-section input[type="email"],
.footer-area .login-section input[type="password"] {
    border: 1px solid #008080;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.footer-area .login-section input[type="checkbox"] {
    margin-right: 10px;
}

.footer-area .login-section button {
    background-color: #008080;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.footer-area .login-section button:hover {
    background-color: #005f5f; /* Color más oscuro al pasar el mouse */
}

.footer-area .login-section .form-check-label {
    margin-bottom: 10px;
}

/* Rediseño de las imagenes-boton del home ELIMINADO (2026-08-30):
   el layout flex de banners se quitó para unificar con el grid del tema
   (row/col bootstrap + aspect-ratios en style.min.css, bloqueantes).
   Evita el dual-layout que causaba CLS en móvil. */

/* Reparación header-middle */

.header-middle-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Cabecera de contacto: píldora de marca única (icono WhatsApp + número) ── */
/* El box redondeado es el contenedor; los enlaces internos son contenido plano */
.header-contact {
    gap: 10px;
    background: linear-gradient(135deg, var(--sp-light) 0%, #f4fbfa 100%);
    border: 1px solid #cfe8e4;
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sdark);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: all var(--stransition);
}

.header-contact a,
.header-right a {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
}

.header-contact > a { color: var(--sdark); }
.header-contact > a:first-child { flex-shrink: 0; }

/* Icono en círculo sólido de marca */
.header-contact a i {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 50%;
    background: var(--sp);
    color: #fff;
    font-size: 15px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 121, 107, .35);
    transition: background var(--stransition), transform var(--stransition);
    margin-right: 0 !important; /* anula el margin del tema */
}

.header-contact:hover {
    color: var(--sp-dark);
    border-color: var(--sp);
    box-shadow: 0 4px 14px rgba(0, 121, 107, .18);
    transform: translateY(-1px);
}

.header-contact a:hover i {
    background: var(--sp-dark);
    transform: scale(1.08);
}

.header-right a:hover {
    text-decoration: underline;
}

.header-contact object,
.header-right object,
.mobile-menu_btn object {
    margin-right: 8px;
    pointer-events: none; /* Para evitar que el objeto interfiera con los clics */
}

.header-logo img {
    max-width: 100%;
    height: auto;
}

.dropdown-menu {
    width: 250px;
}

.dropdown-menu .list-group {
    padding: 10px;
}

.dropdown-menu .list-group a,
.dropdown-menu .list-group button {
    width: 100%;
    margin-bottom: 10px;
}

/* Mejora menu movil */

/* Mejora páginas menus de cuenta */

/* Estilos para las páginas específicas */
.biopompas-tab-button {
    background-color: #34a853; /* Color verde de Biopompas */
    color: white;
    border: none;
    border-radius: 0;
    padding: 10px 20px;
    margin-bottom: 10px;
}

.biopompas-tab-button.active {
    background-color: #128C7E; /* Color verde oscuro de Biopompas */
}

.biopompas-tab-button:hover {
    background-color: #128C7E;
    color: white;
}

.biopompas-form-label {
    font-weight: bold;
}

.biopompas-text-danger {
    color: red;
}

.biopompas-invalid-feedback {
    color: red;
    display: none;
}

.biopompas-form-control:invalid + .biopompas-invalid-feedback {
    display: block;
}

.biopompas-btn-primary {
    background-color: #34a853;
    border-color: #34a853;
    color: white;
    padding: 10px 20px;
}

.biopompas-btn-primary:hover {
    background-color: #128C7E;
    border-color: #128C7E;
    color: white;
}

/* Estilos específicos para el listado de facturas */
.invoice-list .card-header {
    background-color: #34a853;
    color: white;
    font-weight: bold;
}

.invoice-list .table th {
    background-color: #128C7E;
    color: white;
}

.invoice-list .table tbody tr:hover {
    background-color: #f1f1f1;
}

.invoice-list .badge-success {
    background-color: #34a853;
}

.invoice-list .badge-info {
    background-color: #128C7E;
}

.invoice-list .badge-danger {
    background-color: #d9534f;
}

.invoice-list .btn-primary {
    background-color: #34a853;
    border-color: #34a853;
}

.invoice-list .btn-primary:hover {
    background-color: #128C7E;
    border-color: #128C7E;
}

.page-contents {
    padding-top: 30px;
    padding-bottom: 30px;
}

.card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.card-header {
    background-color: #4CAF50; /* Color principal de Biopompas */
    color: #ffffff;
    padding: 15px;
    font-size: 18px;
    border-bottom: 1px solid #e9ecef;
}

.card-body {
    padding: 20px;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background-color: #4CAF50; /* Color principal de Biopompas */
    color: #ffffff;
}

.btn-primary {
    color: #fff;
    background-color: #4CAF50; /* Color principal de Biopompas */
    border-color: #4CAF50;
}

.btn-primary:hover {
    background-color: #45a049;
    border-color: #45a049;
}

.margin-top-lg {
    margin-top: 30px;
}

.margin-bottom-no {
    margin-bottom: 0;
}

.text-bold {
    font-weight: bold;
}

@media (max-width: 991.98px) {
    .cart-totals {
        margin-top: 20px;
    }
}

/* General styling adjustments */
.card-header {
    background-color: #227C3E; /* Verde Biopompas */
    color: white;
    font-weight: bold;
}

.card-body {
    padding: 20px;
}

.table-borderless tbody+tbody, .table-borderless td, .table-borderless th, .table-borderless thead th {
    border: 0;
}

.cart-totals {
    margin-bottom: 0;
}

#sticky-con {
    position: sticky;
    top: 20px;
}

/* Custom layout for checkout page */
@media (min-width: 992px) {
    .checkout-layout {
        display: flex;
        justify-content: space-between;
    }

    .checkout-form {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .checkout-totals {
        flex: 0 0 35%;
        max-width: 35%;
    }
}

@media (min-width: 2560px) {
    /* Reglas banner flex 4K ELIMINADAS (2026-08-30): el grid del tema manda. */
    .shipping-area, .footer-area, .counter-area {
        padding-left: 50px;
        padding-right: 50px; /* Ajusta el padding para más espacio en los lados en 4K */
    }
}


/* Clase que aplica la fuente lighter solo en pantallas de tamaño tableta o superior */
@media (min-width: 768px) {
    .texto-ligero {
        font-weight: lighter;
    }
}

/* ---Megamenu--- */
.megamenu {
    display: flex !important;   /* filas horizontales */
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 900px;
    width: max-content;
    padding: 24px 30px;
    gap: 0;
}

.megamenu .title {
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 13px;
    color: #383838;
    font-weight: 600;
    display: block;
    text-align: center;
}

.megamenu.drop-menu {
    left: auto;
    right: 0;
}

.megamenu.drop-menu > li {
    padding-bottom: 0;
}

.megamenu > li {
    width: auto;
    min-width: 110px;
    max-width: 140px;
    flex: 1 1 110px;
    text-align: center;
    padding: 10px 12px;
}

.megamenu > li:not(:last-child) {
    border-right: 1px solid #e7e7e7;
    border-bottom: none;
}

.megamenu > li img {
    width: 60px; height: 60px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
}

.megamenu > li > a,
.megamenu > li > span.title > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--sdark, #333);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: color .2s;
}
.megamenu > li > a:hover,
.megamenu > li > span.title > a:hover { color: var(--sp, #00796B); }

.megamenu > li > ul li:not(:last-child) {
    padding-bottom: 10px;
}

.megamenu > li > ul li a {
    display: block;
    transition: all 0.3s ease 0s;
    font-size: 14px;
}

.main-nav {
    position: relative;
}

/* Path: assets/custom/shop.css */

/* Paginador estable — min-height evita CLS (Cumulative Layout Shift) al hacer swap HTMX */
#pagination-area {
    min-height: 56px;
}

/* Cuando el OOB div está dentro de #product-list en carga inicial, ocultarlo
   (htmx.process lo moverá al #pagination-area estático) */
#product-list > #pagination-area {
    display: none !important;
}
#pagination-area .product-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

/* ===== btn-primary — definición canónica única (antes 3×, sobreescribiéndose con distintos colores) ===== */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #00796B;
    border-color: #00796B;
}
.btn-primary:hover {
    color: #fff;
    background-color: #005F5F;
    border-color: #004D40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #005F5F;
    border-color: #004D40;
}
.btn-primary .badge { color: #00796B; background-color: #fff; }


/* ── Minicart: botón eliminar ítem ───────────────────────────────────────── */
.btn-minicart-remove {
    position: absolute;
    top: auto;
    right: 15px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    color: inherit;
}
.btn-minicart-remove i {
    font-size: 20px;
}
.btn-minicart-remove:hover i { color: #e53935; }
.btn-minicart-remove:disabled { opacity: .5; cursor: not-allowed; }

/* ── Wishlist: icono toolbar header ─────────────────────────────────────── */
.wishlist-toolbar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--sp, #22998e);
    text-decoration: none;
    font-size: 18px;
    transition: color .2s;
}
.wishlist-toolbar-btn:hover { color: #e53935; }
.wishlist-count-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    background: #e53935;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* ==============================================================
   NEUTRALIZAR SweetAlert2 v6 CSS embebido en libs.min.css
   (conflictuaba con v11: semicírculos y rotaciones del v6
    se superponían al HTML generado por v11, creando X en vez de ✓)
   ============================================================== */

/* v6 coloca 2 semicírculos blancos con ::before/::after */
.swal2-icon.swal2-success::before,
.swal2-icon.swal2-success::after {
    display: none !important;
    content: none !important;
}

/* v6 usa .placeholder y .fix para el anillo decorativo */
.swal2-icon.swal2-success .placeholder,
.swal2-icon.swal2-success .fix {
    display: none !important;
}

/* v6 dibuja el checkmark con .line.tip y .line.long — en v11 no existen */
.swal2-icon.swal2-success .line {
    display: none !important;
}


/* ===== merged from shop-responsive.css ===== */
/* ================================================================
   SHOP RESPONSIVE — Mobile-first
   Breakpoint principal: 760px (alineado con admin)
   Autogenerado 2026-05-15
   ================================================================ */

/* ── Variables ── */
:root {
    --sp: #00796B;       /* primary */
    --sp-dark: #005F5F;
    --sp-light: #E0F2F1;
    --ss: #8BC34A;       /* secondary */
    --ss-dark: #7CB342;
    --sdark: #212529;
    --sgray: #6c757d;
    --sborder: #dee2e6;
    --sbg: #f8f9fa;
    --scard: #ffffff;
    --sshadow: 0 2px 12px rgba(0,0,0,.07);
    --sshadow-hover: 0 6px 24px rgba(0,121,107,.15);
    --sradius: 10px;
    --sradius-sm: 6px;
    --stransition: .22s ease;
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip — corta scroll horizontal SIN romper position:fixed ni sticky */
html { overflow-x: clip; }

img { max-width: 100%; height: auto; }

/* ── Layout: flex column — sticky header + footer flush al fondo ──
   Flex en body es más robusto que Grid cuando hay <script>/<style> sueltos
   como items hermanos de header/#main-content/.footer-area.
   Los elementos position:fixed (preloader, loading-bar) son out-of-flow
   y no participan en el reparto de espacio flex.
   ── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100svh;        /* svh = small viewport height (correcto en móvil con barra URL) */
    display: flex;
    flex-direction: column;
}

/* Header: position FIXED — más fiable que sticky en iOS Safari / flex containers.
   JS en shop.js compensa el gap con padding-top en #main-content usando
   la variable CSS --header-height (actualizada en resize). */
body > header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    /* will-change: transform — ELIMINADO: crea containing block para position:fixed hijos */
    transition: box-shadow .25s ease, padding .25s ease;
}

/* ── Header compacto al scroll (clase .header-scrolled añadida por JS tras 80px) ── */
body > header.header-scrolled .header-top     { display: none !important; }
body > header.header-scrolled .header-middle  { padding: 6px 0 !important; }
/* Logo proporcional: override del width:200px + aspect-ratio fijos del tema.
   Con width:auto + height fijo el logo escala según su ratio intrínseco. */
body > header.header-scrolled .header-logo img {
    width: auto !important;
    height: 34px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}
body > header.header-scrolled {
    box-shadow: 0 3px 14px rgba(0,0,0,.13);
}
/* Transición animada del logo — aplica a width Y height */
.header-logo img { transition: height .25s ease, width .25s ease; }

/* Contenido: padding-top dinámico via var(--header-height).
   NOTA 2026-08-29: la reserva crítica se define en header.php (inline BLOQUEANTE)
   con los mismos valores MEDIDOS (255/136/70). Aquí se repite para coherencia cuando
   shop.css (async) carga tarde; ambos usan la MISMA var para no descompensar. */
:root { --header-height: 237px; }
@media (max-width: 991px) { :root { --header-height: 136px; } }
@media (max-width: 759px) { :root { --header-height: 86px; } }
#main-content {
    flex: 1 0 auto;
    min-height: 0;
    padding-top: var(--header-height, 80px);
}

/* Footer: no crece, no se encoge */
.footer-area {
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

/* ================================================================
   HEADER RESPONSIVE
   ================================================================ */
/* z-index del inner header: por debajo del wrapper sticky (1030) */
.main-header-area { z-index: 1029; }

/* Reducir header-middle en mobile */
@media (max-width: 759px) {
    .header-middle { padding: 12px 0 !important; }
    .header-middle-wrap { gap: 8px; }
    .header-logo img { max-height: 44px; width: auto; }
    .header-top { display: none !important; }
    .header-bottom { display: none !important; }
    .header-right { margin-left: auto; }
    .header-right ul { gap: 4px; }
    /* Minicart badge visible */
    .cart-total-items {
        position: absolute; top: -6px; right: -6px;
        background: var(--sp); color: #fff;
        font-size: 11px; min-width: 18px; height: 18px;
        border-radius: 100px;
        display: flex; align-items: center; justify-content: center;
        padding: 0 4px;
    }
}

/* ================================================================
   MOBILE MENU — Full-screen offcanvas desde izquierda
   Igual que minicart pero desde la izquierda y a pantalla completa
   ================================================================ */

/* Drawer: oculto fuera de pantalla a la izquierda */
.sp-mobile-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;               /* 100% del viewport, sin desbordamiento */
    height: 100dvh;             /* dvh: excluye barra URL del navegador móvil */
    max-width: 100%;            /* evita los 4px extra por padding/scroll del body */
    background: #fff;
    z-index: 10010;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    box-sizing: border-box;
}
.sp-mobile-nav.open { transform: translateX(0); }

/* Header del drawer */
.sp-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sborder);
    flex-shrink: 0;
    background: #fff;
}
.sp-mobile-nav__logo img { max-height: 40px; width: auto; }
.sp-mobile-nav__close {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sp-light); color: var(--sp);
    border: none; border-radius: 50%;
    font-size: 18px; cursor: pointer;
    transition: background var(--stransition), transform var(--stransition);
}
.sp-mobile-nav__close:hover { background: var(--sp); color: #fff; transform: rotate(90deg); }

/* Cuerpo scrolleable */
.sp-mobile-nav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

/* Footer del drawer */
.sp-mobile-nav__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--sborder);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--sbg);
}
.sp-mnav__phone {
    color: var(--sp); font-weight: 600; font-size: 15px;
    text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.sp-mnav__phone:hover { color: var(--sp-dark); }
.sp-mnav__lang { display: flex; gap: 8px; margin-left: auto; }
.sp-mnav__lang-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 20px;
    font-size: 13px; font-weight: 600; color: var(--sgray);
    text-decoration: none; border: 1.5px solid var(--sborder);
    transition: var(--stransition);
}
.sp-mnav__lang-btn.active, .sp-mnav__lang-btn:hover {
    border-color: var(--sp); color: var(--sp); background: var(--sp-light);
}
.sp-mnav__logout {
    color: #dc3545; font-size: 13px; text-decoration: none;
    display: flex; align-items: center; gap: 6px;
}
.sp-mnav__logout:hover { color: #a71d2a; }

/* ── Lista principal ── */
.sp-mnav__list {
    list-style: none;
    margin: 0; padding: 0;
}
.sp-mnav__link {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    color: var(--sdark); font-size: 16px; font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--sborder);
    transition: background var(--stransition), color var(--stransition);
}
.sp-mnav__link:hover { background: var(--sp-light); color: var(--sp); }
.sp-mnav__link i { color: var(--sp); width: 18px; text-align: center; }

/* Acordeón: botón toggle */
.sp-mnav__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 15px 20px;
    background: none; border: none; border-bottom: 1px solid var(--sborder);
    color: var(--sdark); font-size: 16px; font-weight: 500;
    cursor: pointer; text-align: left;
    transition: background var(--stransition), color var(--stransition);
}
.sp-mnav__toggle:hover { background: var(--sp-light); color: var(--sp); }
.sp-mnav__toggle span { display: flex; align-items: center; gap: 12px; }
.sp-mnav__toggle span i { color: var(--sp); width: 18px; text-align: center; }
.sp-mnav__chevron {
    transition: transform .25s ease;
    font-size: 12px; color: var(--sgray);
}
.sp-mnav__has-children.sp-open > .sp-mnav__toggle .sp-mnav__chevron { transform: rotate(-180deg); }

/* Sub-nivel 1 (categorías bajo Productos) */
.sp-mnav__sub {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
    background: var(--sbg);
}
.sp-mnav__has-children.sp-open > .sp-mnav__sub { max-height: 2000px; }

.sp-mnav__sublink {
    display: block;
    padding: 11px 20px 11px 52px;
    color: var(--sgray); font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: color var(--stransition), padding-left var(--stransition);
}
.sp-mnav__sublink:hover { color: var(--sp); padding-left: 58px; }
.sp-mnav__sublink--all {
    color: var(--sp); font-weight: 600;
    border-bottom: 1px solid var(--sborder);
    padding-left: 20px;
    margin-bottom: 4px;
}
.sp-mnav__sublink--promo { color: #e53935; font-weight: 600; }

/* Toggle de sub-nivel 2 (subcategorías de cada categoría) */
.sp-mnav__cat-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 11px 20px 11px 52px;
    background: none; border: none; border-bottom: 1px solid rgba(0,0,0,.04);
    color: var(--sgray); font-size: 14px; cursor: pointer; text-align: left;
    transition: color var(--stransition);
}
.sp-mnav__cat-toggle:hover { color: var(--sp); }
.sp-mnav__chevron2 {
    font-size: 11px; color: var(--sgray);
    transition: transform .2s ease;
}
.sp-mnav__has-sub2.sp-open2 > .sp-mnav__cat-toggle .sp-mnav__chevron2 { transform: rotate(90deg); }

/* Sub-nivel 2 */
.sp-mnav__sub2 {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
    background: #f0f7f6;
}
.sp-mnav__has-sub2.sp-open2 > .sp-mnav__sub2 { max-height: 800px; }
.sp-mnav__sub2 li a {
    display: block;
    padding: 9px 20px 9px 68px;
    color: var(--sgray); font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.03);
    transition: color var(--stransition);
}
.sp-mnav__sub2 li a:hover { color: var(--sp); }

/* Overlay global — minicart Y mobile menu */
.global-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 10000; /* entre drawer (10010) y el resto */
    cursor: pointer;
    transition: opacity .3s ease;
}
.global-overlay.active { display: block; }

/* ================================================================
   MEGA MENU DESKTOP — Solo visible en ≥ 992px
   ================================================================ */

/* Nav principal */
.sp-main-nav { position: static; }
.sp-main-nav > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0; padding: 0;
}
.sp-main-nav > ul > li > a,
.sp-main-nav > ul > li > button {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 16px;
    color: var(--sdark); font-size: 14px; font-weight: 500;
    text-decoration: none;
    border-radius: var(--sradius-sm);
    transition: color var(--stransition), background var(--stransition);
    cursor: pointer;
    background: none; border: none;
    white-space: nowrap;
}
.sp-main-nav > ul > li > a:hover,
.sp-main-nav > ul > li:hover > a {
    color: var(--sp);
    background: var(--sp-light);
}

/* Flecha chevron en triggers */
.sp-mega-arrow {
    font-size: 10px;
    transition: transform .25s ease;
    color: var(--sgray);
    margin-left: 1px;
}
.sp-mega-item:hover .sp-mega-arrow,
.sp-drop-item:hover .sp-mega-arrow { transform: rotate(-180deg); color: var(--sp); }

/* ── PANEL MEGA MENU ── */
.sp-mega-item { position: static; }
.sp-mega-panel {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    border-top: 3px solid var(--sp);
    border-radius: 0 0 var(--sradius) var(--sradius);
    box-shadow: 0 12px 40px rgba(0,121,107,.15);
    z-index: 9999;
    /* Estado inicial: invisible + desplazado hacia arriba */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.sp-mega-item:hover .sp-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Force-hide temporal para paneles al navegar con HTMX ──
   El megamenu/dropdown se abren por CSS :hover, que no se desactiva
   al hacer click en un enlace. Estas clases fuerzan el cierre inmediato. */
.sp-mega-item.sp-panel-force-hide .sp-mega-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
}
.sp-drop-item.sp-panel-force-hide .sp-drop-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(-8px) !important;
    pointer-events: none !important;
}

.sp-mega-inner {
    padding: 28px 24px 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Promo badge */
.sp-mega-promo {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sborder);
}
.sp-mega-promo__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px;
    background: #fff3e0; color: #e65100; border-radius: 20px;
    font-weight: 600; font-size: 14px; text-decoration: none;
    border: 1px solid #f9a825;
    transition: background .2s, color .2s;
}
.sp-mega-promo__link:hover { background: #e65100; color: #fff; border-color: #e65100; }

/* Grid de categorías */
.sp-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px 16px;
}

/* Tarjeta de categoría */
.sp-mega-col { display: flex; flex-direction: column; gap: 8px; }

.sp-mega-cat {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none;
    padding: 10px 6px;
    border-radius: var(--sradius-sm);
    border: 1.5px solid transparent;
    transition: border-color .2s, background .2s, transform .2s;
    text-align: center;
}
.sp-mega-cat:hover {
    border-color: var(--sp);
    background: var(--sp-light);
    transform: translateY(-2px);
}
.sp-mega-cat__img-wrap {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--sborder);
    background: #f5f5f5;
    transition: border-color .2s;
    flex-shrink: 0;
}
.sp-mega-cat:hover .sp-mega-cat__img-wrap { border-color: var(--sp); }
.sp-mega-cat__img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.sp-mega-cat:hover .sp-mega-cat__img-wrap img { transform: scale(1.08); }
.sp-mega-cat__name {
    font-size: 12px; font-weight: 600;
    color: var(--sdark); line-height: 1.2;
}
.sp-mega-cat:hover .sp-mega-cat__name { color: var(--sp); }

/* Subcategorías bajo cada tarjeta */
.sp-mega-subs {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.sp-mega-subs li a {
    display: block;
    font-size: 11.5px; color: var(--sgray);
    padding: 3px 4px;
    text-decoration: none; border-radius: 3px;
    text-align: center;
    transition: color .2s, background .2s;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-mega-subs li a:hover { color: var(--sp); background: var(--sp-light); }

/* Footer del megamenu: "Ver todos" */
.sp-mega-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sborder);
    text-align: right;
}
.sp-mega-footer__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--sp); text-decoration: none;
    padding: 5px 12px; border-radius: 20px;
    border: 1.5px solid var(--sp);
    transition: background .2s, color .2s;
}
.sp-mega-footer__link:hover { background: var(--sp); color: #fff; }

/* ── Dropdown simple (Nuestra Tienda) ── */
.sp-drop-item { position: relative; }
.sp-drop-panel {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 200px;
    background: #fff;
    border-top: 3px solid var(--sp);
    border-radius: 0 0 var(--sradius-sm) var(--sradius-sm);
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    list-style: none;
    margin: 0; padding: 8px 0;
    z-index: 9999;
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    white-space: nowrap;
}
.sp-drop-item:hover .sp-drop-panel {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.sp-drop-panel li a {
    display: block;
    padding: 9px 18px;
    color: var(--sdark); font-size: 14px; text-decoration: none;
    transition: background .2s, color .2s;
}
.sp-drop-panel li a:hover { background: var(--sp-light); color: var(--sp); }

/* ================================================================
   SHOP AREA — GRID PRINCIPAL
   ================================================================ */

/* Layout wrapper */
.shop-layout { padding: 32px 0 48px; }

/* Grid: sidebar + columna de productos */
.shop-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 767px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-layout { padding: 16px 0 32px; }
}

/* Sidebar */
.shop-sidebar {
    position: sticky;
    top: 80px;
}

/* Columna de productos */
.shop-products-col { min-width: 0; }

/* Buscador inline */
.shop-search-box { margin-bottom: 18px; }
.shop-search-box .input-group { display: flex; }
.shop-search-box .form-control {
    flex: 1;
    border: 1px solid var(--sborder);
    border-right: none;
    border-radius: var(--sradius-sm) 0 0 var(--sradius-sm) !important;
    padding: 8px 14px;
    font-size: 14px;
    outline: none;
}
.shop-search-box .form-control:focus { border-color: var(--sp); box-shadow: none; }
.shop-search-box .btn-search {
    background: var(--sp); border: 1px solid var(--sp); color: #fff;
    border-radius: 0 var(--sradius-sm) var(--sradius-sm) 0 !important;
    padding: 0 18px;
    cursor: pointer;
    transition: var(--stransition);
    display: flex; align-items: center;
}
.shop-search-box .btn-search:hover { background: var(--sp-dark); }

/* Products grid dentro del target HTMX */
.products-grid { row-gap: 20px; }

/* ── Topbar: contador + paginador superior ── */
.products-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sborder);
}
.products-count { font-size: 14px; color: var(--sgray); }
.products-count strong { color: var(--sdark); }

/* Paginador wrapper — solo arriba (el paginador se movió al topbar) */
.products-pagination { display: flex; justify-content: center; }
.products-pagination--top  { margin: 0; }

/* ================================================================
   PAGINADOR SP — 100% propio, sin BS .pagination
   ================================================================ */
.sp-paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
/* Botón base — tamaño cómodo para ratón y táctil */
.sp-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--sborder);
    border-radius: var(--sradius-sm);
    background: #fff;
    color: var(--sdark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--stransition), border-color var(--stransition), color var(--stransition);
    user-select: none;
    line-height: 1;
}
.sp-page:hover:not(.disabled):not(.sp-current) {
    background: var(--sp-light);
    border-color: var(--sp);
    color: var(--sp);
}
.sp-page.sp-current {
    background: var(--sp);
    border-color: var(--sp);
    color: #fff;
    cursor: default;
    pointer-events: none;
}
.sp-page.disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
/* Prev/Next más anchos */
.sp-prev, .sp-next {
    min-width: 50px;
    font-size: 22px;
    font-weight: 700;
}
.sp-ellipsis {
    color: var(--sgray);
    font-size: 15px;
    line-height: 44px;
    padding: 0 3px;
    user-select: none;
}
/* Móvil — área táctil no menor de 42px */
@media (max-width: 759px) {
    .products-topbar { flex-direction: column; align-items: flex-start; }
    .products-topbar .products-pagination--top { align-self: center; width: 100%; justify-content: center; }
    .sp-page { min-width: 42px; height: 42px; font-size: 14px; padding: 0 12px; }
    .sp-prev, .sp-next { min-width: 46px; font-size: 20px; }
    .sp-ellipsis { line-height: 42px; }
}

/* Fix: en 768-991px el sidebar se quedaba 100% (faltaban col-md clases) */
.shop-area .row > [class*='col-']:first-child { /* sidebar */ }

/* ── Sidebar sticky — también aplica al .sidebar-area legacy ── */
.sidebar-area, .shop-sidebar {
    position: sticky; top: 80px;
    padding-right: 8px;
}
@media (max-width: 759px) {
    .sidebar-area { display: none; }
}

/* ── Filtro móvil: categorías en scroll horizontal — centrado ── */
.mobile-category-bar-wrap {
    background: #fff;
    border-bottom: 1px solid var(--sborder);
    padding: 0 16px;
}
.mobile-category-bar {
    display: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 10px 0;
    scrollbar-width: none;
    justify-content: center;   /* centrado cuando caben todos */
}
/* Cuando hay scroll horizontal el justify-content no aplica,
   pero sí los chips quedan centrados si no hay overflow */
.mobile-category-bar::-webkit-scrollbar { display: none; }
.mobile-category-bar a {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: var(--sp-light); color: var(--sp);
    border: 1px solid var(--sp); border-radius: 100px;
    font-size: 13px; text-decoration: none; white-space: nowrap;
    transition: var(--stransition);
}
.mobile-category-bar a:hover,
.mobile-category-bar a.active {
    background: var(--sp); color: #fff;
}
@media (max-width: 759px) {
    .mobile-category-bar { display: flex; }
}

/* ── Barra topbar (contador + paginador) ── */
#pagination-area { min-height: 48px; }
.product-topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--sborder);
    margin-bottom: 16px;
}
.product-topbar .page-count {
    font-size: 14px; color: var(--sgray);
}
.product-topbar .page-count strong { color: var(--sdark); }

/* ── Buscador en listing ── */
.widgets-searchbox { margin-bottom: 16px; }
.widgets-searchbox .input-group .form-control {
    border-color: var(--sborder);
    border-radius: var(--sradius-sm) 0 0 var(--sradius-sm) !important;
}
.widgets-searchbox .btn-search {
    background: var(--sp); border-color: var(--sp); color: #fff;
    border-radius: 0 var(--sradius-sm) var(--sradius-sm) 0 !important;
    padding: 0 16px;
    transition: var(--stransition);
}
.widgets-searchbox .btn-search:hover { background: var(--sp-dark); }

/* ================================================================
   PRODUCT CARDS — Modern
   ================================================================ */
.product-grid-view.row { row-gap: 20px; }

.product-item {
    border: 1px solid var(--sborder);
    border-radius: var(--sradius);
    background: var(--scard);
    overflow: hidden;
    transition: box-shadow var(--stransition), transform var(--stransition);
    height: 100%;
    display: flex; flex-direction: column;
}
.product-item:hover {
    box-shadow: var(--sshadow-hover);
    transform: translateY(-3px);
}

/* Imagen */
.product-img a {
    display: block;
    overflow: hidden;
    background: var(--sbg);
}
.product-img img.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.product-item:hover .product-img img.product-image {
    transform: scale(1.05);
}

/* Contenido */
.product-content {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex; flex-direction: column; gap: 6px;
}
.product-name {
    font-size: 14px; font-weight: 600;
    color: var(--sdark); line-height: 1.35;
    text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.product-name:hover { color: var(--sp); }

.price-box {
    margin-top: auto;
    display: flex; align-items: baseline; gap: 8px;
}
.new-price {
    font-size: 16px; font-weight: 700;
    color: var(--sp);
}
.old-price {
    font-size: 9px; color: #5a6268;
    text-decoration: line-through;
    font-weight: 400;
    opacity: .8;
    margin-left: 3px;
}

/* Acciones rápidas del ProductCard: vista previa + añadir a cesta (derecha del precio) */
.price-box {
    justify-content: space-between;
    align-items: center;
}
.price-txt {
    display: flex; flex-direction: column; gap: 1px;
}
.product-actions {
    display: flex; gap: 6px;
}
.product-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--sborder);
    border-radius: var(--sradius-sm);
    background: #fff;
    color: var(--sgray);
    font-size: 14px;
    cursor: pointer;
    transition: var(--stransition);
    padding: 0;
    line-height: 1;
}
.product-action-btn:hover {
    background: var(--sp); border-color: var(--sp); color: #fff;
}
@media (max-width: 575px) {
    .product-action-btn { width: 30px; height: 30px; font-size: 13px; }
}

/* Modal vista previa de producto (desde grid) — imagen + nombre + descripción web */
.sp-preview-body { display: flex; gap: 16px; align-items: flex-start; }
.sp-preview-img {
    width: 130px; height: 130px; object-fit: cover;
    border-radius: var(--sradius-sm); border: 1px solid var(--sborder); flex-shrink: 0;
}
.sp-preview-desc { font-size: 14px; color: var(--sdark); line-height: 1.6; white-space: pre-line; }
@media (max-width: 575px) {
    .sp-preview-body { flex-direction: column; }
    .sp-preview-img { width: 100%; height: auto; }
}

/* Badge "Promo" */
.product-badge {
    position: absolute; top: 10px; left: 10px;
    background: #e53935; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 100px;
    pointer-events: none;
}

/* Badge esquinero de descuento de caja (OFFERTA): "-10%" resaltado en esquina sobre la foto */
.product-badge--disc {
    position: absolute; top: 10px; left: 10px;
    z-index: 5;
    background: #d32f2f;
    box-shadow: 0 2px 6px rgba(211, 47, 47, .35);
    font-size: 12px;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Grid responsive: 1 col mobile → 2 col tablet → 3 col desktop */
@media (max-width: 575px) {
    .product-grid-view .col-lg-4,
    .product-grid-view .col-md-6,
    .product-grid-view .col-sm-6,
    .product-grid-view .col-6 {
        width: 50%;   /* 2 columnas en mobile */
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .product-grid-view .col-sm-6 { width: 50%; }
}
/* En 768px+ ya tiene col-md-6 → 2 cols en sidebar visible */
@media (min-width: 992px) {
    /* Con sidebar: 3 productos por fila son suficientes (col-lg-4) */
}

/* ================================================================
   PAGINADOR — BS5 estilado
   ================================================================ */
.pagination-wrap nav { display: flex; justify-content: flex-end; }

.pagination {
    gap: 4px;
    flex-wrap: wrap;
}
.page-item .page-link {
    border: 1px solid var(--sborder);
    border-radius: var(--sradius-sm) !important;
    color: var(--sp); font-weight: 500; font-size: 14px;
    min-width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 10px;
    transition: var(--stransition);
    line-height: 1;
}
.page-item .page-link:hover {
    background: var(--sp-light); border-color: var(--sp);
}
.page-item.active .page-link,
.page-item.active span.page-link {
    background: var(--sp); border-color: var(--sp); color: #fff;
}
.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

@media (max-width: 759px) {
    .pagination-wrap nav { justify-content: center; margin-top: 8px; }
    .page-item .page-link { min-width: 32px; height: 32px; font-size: 13px; }
}

/* ================================================================
   SIDEBAR (categorías y filtros)
   ================================================================ */
.sidebar-title {
    font-size: 15px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--sdark);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sp);
    margin-bottom: 14px;
}
.sidebar-list li { list-style: none; }
.sidebar-list li a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 6px;
    border-bottom: 1px solid var(--sborder);
    color: var(--sdark); font-size: 14px;
    text-decoration: none;
    transition: var(--stransition);
}
.sidebar-list li a:hover { color: var(--sp); padding-left: 12px; }
.sidebar-list li a.active { color: var(--sp); font-weight: 600; }
.sidebar-list .count {
    background: var(--sp-light); color: var(--sp);
    font-size: 12px; padding: 1px 6px; border-radius: 100px;
}

/* ================================================================
   HOME — SECCIONES
   ================================================================ */

/* Título de sección */
.section-title {
    text-align: center;
    margin-bottom: 32px;
}
/* Cuando h2 ES el section-title (ej: reseñas, instagram) */
h2.section-title {
    font-size: clamp(18px, 5vw, 36px);
    line-height: 1.25;
}
/* Cuando section-title es wrapper con h2 hijo */
.section-title h2 {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700; color: var(--sdark);
    position: relative; display: inline-block;
    padding-bottom: 10px;
}
.section-title h2::after {
    content: ''; position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50px; height: 3px;
    background: linear-gradient(90deg, var(--sp), var(--ss));
    border-radius: 2px;
}
.section-title p { color: #5a6268; font-size: 15px; margin-top: 8px; }

/* Sección general */
.shop-section { padding: 48px 0; }
.shop-section.bg-light-green { background: var(--sp-light); }

/* Grid secciones home */
.home-products-grid .row { row-gap: 20px; }
/* Promociones: menos aire bajo los productos (2026-08-31, el theme deja 48px) */
.promotions-section { padding-bottom: 16px !important; }

/* Featured / Bestseller badge */
.badge-featured {
    position: absolute; top: 10px; right: 10px;
    background: var(--sp); color: #fff;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 3px 8px; border-radius: 100px;
}

/* ================================================================
   CATEGORÍA HERO (página de productos — usa --cat-bg dinámica)
   ================================================================ */
.cat-hero {
    position: relative;
    min-height: 140px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background-image: var(--cat-bg);
    background-size: cover;
    background-position: center;
    background-color: var(--sdark);
}
.cat-hero-overlay {
    width: 100%;
    background: linear-gradient(135deg, rgba(0,80,70,.75) 0%, rgba(0,121,107,.6) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
}
.cat-hero-title {
    color: #fff;
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 700;
    margin: 4px 0 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cat-breadcrumb ol.breadcrumb {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    gap: 0 !important;
}
.cat-breadcrumb .breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}
.cat-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0 !important;
}
.cat-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: rgba(255,255,255,.45) !important;
    padding: 0 8px !important;
    float: none !important;
    display: inline !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.cat-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,.9) !important;
    text-decoration: none !important;
}
.cat-breadcrumb .breadcrumb-item a:hover { color: #fff !important; text-decoration: underline !important; }
.cat-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.7) !important; }

/* ── SP-BREADCRUMB — componente propio, sin Bootstrap, sin float ── */
.sp-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 13px;
    line-height: 1.5;
}
.sp-breadcrumb a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.sp-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.sp-bc-sep {
    color: rgba(255,255,255,.4);
    padding: 0 7px;
    font-size: 12px;
    user-select: none;
    flex-shrink: 0;
}
.sp-bc-current,
.sp-bc-active {
    color: rgba(255,255,255,.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Alias legacy (por si alguna vista aún usa .category-header) */
.category-header { position: relative; min-height: 140px; display: flex; align-items: stretch; overflow: hidden; background: var(--sdark) center/cover no-repeat; }
.category-header-overlay { width: 100%; background: linear-gradient(135deg, rgba(0,80,70,.75) 0%, rgba(0,121,107,.6) 100%); display: flex; align-items: center; padding: 24px 0; }
.category-header-title { color: #fff; font-size: clamp(20px,4vw,30px); font-weight: 700; margin: 0 0 6px; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.category-header .breadcrumb { background: none; padding: 0; margin: 0; }
.category-header .breadcrumb-item a { color: rgba(255,255,255,.85); text-decoration: none; }
.category-header .breadcrumb-item.active { color: rgba(255,255,255,.7); }

@media (max-width: 759px) {
    .cat-hero { min-height: 90px; }
    .cat-hero-title { font-size: 18px; }
    .category-header { min-height: 90px; }
    .category-header-title { font-size: 18px; }
}

/* ================================================================
   VISTA PRODUCTO INDIVIDUAL
   ================================================================ */

/* ── Selector Caja / Granel ── */
.purchase-mode-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-tab {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 2px solid var(--sborder);
    border-radius: var(--sradius);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color var(--stransition), background var(--stransition), box-shadow var(--stransition);
    position: relative;
    background: var(--scard);
    user-select: none;
}
.pm-tab input[type="radio"] { display: none; }
.pm-tab:hover { border-color: var(--sp); box-shadow: 0 2px 10px rgba(0,121,107,.1); }
.pm-tab--active {
    border-color: var(--sp);
    background: #E8F5E9;
    box-shadow: 0 2px 14px rgba(0,121,107,.15);
}
.pm-tab-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pm-tab-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sdark);
}
.pm-tab--active .pm-tab-title { color: var(--sp-dark); }
.pm-tab-price-block {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pm-tab-original {
    font-size: 13px;
    color: var(--sgray);
    text-decoration: line-through;
}
.pm-tab-final {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-dark);
}
.pm-tab-badge {
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
}
.pm-tab-savings {
    font-size: 12px;
    color: #27ae60;
    font-weight: 600;
    background: #eafaf1;
    border-radius: 4px;
    padding: 2px 8px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pm-tab-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sborder);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--stransition), border-color var(--stransition);
    margin-top: 2px;
    color: transparent;
    font-size: 11px;
}
.pm-tab--active .pm-tab-check {
    background: var(--sp);
    border-color: var(--sp);
    color: #fff;
}

/* Breadcrumb producto — fondo claro, sobreescribe los colores blancos del .sp-breadcrumb base */
.product-breadcrumb {
    background: var(--sp-light);
    padding: 10px 0;
    border-bottom: 1px solid var(--sborder);
}
.product-breadcrumb .sp-breadcrumb a {
    color: var(--sp);
}
.product-breadcrumb .sp-breadcrumb a:hover {
    color: var(--sp-dark);
    text-decoration: underline;
}
.product-breadcrumb .sp-bc-sep {
    color: var(--sgray);
}
.product-breadcrumb .sp-bc-active,
.product-breadcrumb .sp-bc-current {
    color: var(--sdark);
}

/* Sección producto */
.section-space-top-60 { padding-top: 60px; }
.section-space-bottom-60 { padding-bottom: 60px; }

/* Imagen principal */
.single-product-img {
    border-radius: var(--sradius);
    overflow: hidden;
    background: #f8f9fa;
    text-align: center;
}
.product-main-img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    transition: transform .35s ease;
}
/* Hover zoom en imagen — sin wrapper <a> */
.product-img-zoom:hover { transform: scale(1.03); }

/* ================================================================
   LIGHTBOX PROPIO — sin Bootstrap Modal, sin Magnific Popup
   ================================================================ */
#sp-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: none; /* JS cambia a flex */
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity .28s ease;
}
#sp-lightbox.sp-lb-open { opacity: 1; }

#sp-lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(10,10,10,.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#sp-lightbox-wrap {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center;
    max-width: min(92vw, 900px);
    width: 100%;
    transform: scale(.93);
    transition: transform .28s ease;
}
#sp-lightbox.sp-lb-open #sp-lightbox-wrap { transform: scale(1); }

#sp-lightbox-inner {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    line-height: 0;
    width: 100%;
}
#sp-lightbox-img {
    display: block;
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    background: #111;
}
#sp-lightbox-caption {
    margin: 10px 0 0;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    text-align: center;
    font-style: italic;
    min-height: 18px;
}
/* Botón cerrar */
#sp-lightbox-close {
    position: absolute;
    top: -14px; right: -14px;
    width: 40px; height: 40px;
    background: var(--sp);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .18s, transform .18s;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#sp-lightbox-close:hover {
    background: #c0392b;
    transform: scale(1.12) rotate(90deg);
}
@media (max-width: 759px) {
    #sp-lightbox-close { top: -12px; right: -6px; width: 36px; height: 36px; }
    #sp-lightbox-img   { max-height: 75vh; }
}

/* Contenido lado derecho */
.product-detail-title {
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 700;
    color: var(--sdark);
    line-height: 1.25;
    margin-bottom: 14px;
}
.product-short-desc {
    color: var(--sgray);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
    border-left: 3px solid var(--sp);
    padding-left: 12px;
}
.product-section-block { margin-bottom: 14px; }
.product-section-title {
    font-size: 14px; font-weight: 700;
    color: var(--sdark); margin-bottom: 4px;
}
.ingredients-text { font-size: 13px; color: var(--sgray); }
.product-bio-claim { font-size: 13px; color: var(--sp); margin-top: 8px; }

/* Buy box */
.product-buy-box {
    border: 1px solid var(--sborder);
    border-radius: var(--sradius);
    padding: 20px; margin-top: 20px;
    background: #fcfcfc;
}
.variant-label {
    font-size: 13px; font-weight: 600;
    color: var(--sdark); margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: .4px;
}

/* ── Tarjetas de variantes ── */
.sp-variant-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.sp-variant-card {
    flex: 1 1 140px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    border: 1.5px solid var(--sborder);
    border-radius: var(--sradius-sm);
    padding: 12px 14px;
    cursor: pointer;
    background: #fff;
    transition: border-color .2s, background .2s, box-shadow .2s;
    position: relative;
    user-select: none;
}
.sp-variant-card:hover {
    border-color: var(--sp);
    background: var(--sp-light);
    box-shadow: 0 2px 8px rgba(0,121,107,.1);
}
/* Tarjeta seleccionada */
.sp-variant-card:has(input:checked) {
    border-color: var(--sp);
    background: var(--sp-light);
    box-shadow: 0 2px 12px rgba(0,121,107,.15);
}
/* Input oculto — la tarjeta entera es el label */
.sp-variant-card input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.sp-vc-body {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
}
.sp-vc-name  { font-size: 14px; font-weight: 600; color: var(--sdark); line-height: 1.3; }
.sp-vc-price { font-size: 15px; font-weight: 700; color: var(--sp); }
.sp-vc-perkg { font-size: 12px; color: var(--sgray); }
/* Check circle */
.sp-vc-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sborder);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    color: transparent;
    background: #fff;
    transition: all .18s;
    margin-top: 1px;
}
.sp-variant-card:has(input:checked) .sp-vc-check {
    background: var(--sp);
    border-color: var(--sp);
    color: #fff;
}

/* Precio con descuento en tarjeta de variante */
.sp-vc-price-original { font-size: 12px; color: var(--sgray); text-decoration: line-through; margin-top: 1px; }
.sp-vc-price--dto { display: flex; align-items: center; gap: 5px; }
.sp-vc-badge { background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; line-height: 1.5; }
.sp-vc-savings { font-size: 11px; color: #27ae60; font-weight: 600; margin-top: 1px; }

/* Desglose de descuento en el buy-box (generado dinámicamente por JS) */
.buy-box-price-breakdown {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 0; border-top: 1px dashed var(--sborder);
}
.buy-box-original { display: flex; align-items: center; gap: 8px; }
.bpb-label { font-size: 13px; color: var(--sgray); }
.bpb-val { font-size: 14px; }
.bpb-strikethrough { text-decoration: line-through; color: var(--sgray); }
.buy-box-dto-badge {
    display: inline-block; background: #e74c3c; color: #fff;
    font-size: 12px; font-weight: 700; padding: 2px 10px;
    border-radius: 4px; width: fit-content;
}
.buy-box-final { display: flex; align-items: baseline; gap: 10px; }
.buy-box-savings {
    font-size: 13px; color: #27ae60; font-weight: 600;
    background: #eafaf1; border-radius: 4px;
    padding: 4px 10px; width: fit-content;
}

.total-price-block {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed var(--sborder);
}
.total-price-label { font-size: 14px; color: var(--sgray); }
.total-price-value { font-size: 22px; font-weight: 700; color: var(--sp); }

.btn-add-cart { background: var(--sp); border-color: var(--sp); }
.btn-add-cart:hover { background: var(--sp-dark); border-color: var(--sp-dark); }
.btn-add-cart:disabled { opacity: .55; cursor: not-allowed; }

/* Compartir */
.product-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-label { font-size: 13px; color: var(--sgray); font-weight: 600; }
.share-link { text-decoration: none; transition: opacity .2s; }
.share-link:hover { opacity: .75; }

/* Principios activos */
.activos-card {
    background: var(--sp-light);
    border-radius: var(--sradius);
    border: 1px solid color-mix(in srgb, var(--sp) 20%, transparent);
    padding: 20px;
}
.activos-title { font-size: 16px; font-weight: 700; color: var(--sdark); margin-bottom: 0; }
.activo-item { font-size: 14px; color: var(--sdark); margin-bottom: 4px; }

/* Iconos certificados */
.product-icons-area img {
    transition: transform .3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.product-icons-area img:hover { transform: scale(1.08); }

/* Mobile */
@media (max-width: 759px) {
    .single-product-area { padding-top: 20px !important; }
    .single-product-img { margin-bottom: 16px; }
    .product-detail-title { font-size: 20px; }
    .product-buy-box { padding: 14px; }
    .product-icons-area img { width: 72px; height: 72px; }
    .sp-variant-grid { gap: 8px; }
    .sp-variant-card { flex: 1 1 120px; padding: 10px 12px; }
    .sp-vc-name  { font-size: 13px; }
    .sp-vc-price { font-size: 14px; }
}

/* ================================================================
   MINICART
   ================================================================ */
/* El wrapper en línea no debe ocupar espacio en el flujo */
#mini-cart-fragment { display: contents; }

/* Panel fijo que desliza desde la derecha.
   (2026-09-07) En tablet el panel a 10vh/80vh cortaba el primer producto y dejaba
   el scroll inútil: ahora ocupa toda la parte derecha, de arriba a abajo (100dvh
   para barras móviles) y el scroll es GLOBAL del panel, no solo de la lista. */
#miniCart {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    background: #fff;
    z-index: 10005;   /* por encima del overlay (10000) y por debajo del drawer (10010) */
    box-shadow: -4px 0 24px rgba(0,0,0,.18);
    transform: translateX(110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
}
#miniCart.open { transform: translateX(0); }

/* Neutralizar estilos fijos del tema */
#miniCart .offcanvas-body {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
    transition: none !important;
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden;
    overflow-y: auto;          /* scroll GLOBAL del panel (items + totales + botones) */
    padding: 0 !important;
}

.minicart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sborder);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    background: #fff;
    position: sticky; top: 0; z-index: 3;   /* con scroll global, la X de cerrar siempre visible */
}
.minicart-heading .button-close {
    color: var(--sgray); font-size: 20px;
    text-decoration: none; line-height: 1;
    transition: color .15s;
}
.minicart-heading .button-close:hover { color: var(--sp); }

/* Área de items: con scroll global del panel ya no necesita scroll propio */
.minicart-content {
    flex: 0 0 auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* Lista de items: crece natural; el scroll lo hace #miniCart .offcanvas-body */
#miniCart .offcanvas-body .minicart-content .minicart-list {
    flex: 0 0 auto;
    max-height: none !important;   /* anula los 595px del tema */
    overflow: visible !important;
    padding: 0 14px;
    margin: 0;
    list-style: none;
}

.minicart-item_total {
    padding: 8px 20px;
    border-top: 1px solid var(--sborder);
    flex-shrink: 0;
}
.mini-cart-totals {
    margin: 0; font-size: 14px; width: 100%; border-collapse: collapse;
}
.mini-cart-totals td { padding: 6px 8px; vertical-align: middle; }
.mini-cart-totals td:first-child { color: var(--sgray); }
.mini-cart-totals td:last-child {
    text-align: right; font-weight: 600; color: var(--sdark); white-space: nowrap;
}

.group-btn_wrap { padding: 12px 18px; flex-shrink: 0; }

/* ================================================================
   CARRITO / CHECKOUT
   ================================================================ */
@media (max-width: 759px) {
    .cart-area .row > [class*='col-'] { width: 100%; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ================================================================
   ALERTAS FLASH
   ================================================================ */
.sa-alert-wrap { position: fixed; top: 70px; right: 16px; z-index: 99000; width: 320px; max-width: calc(100vw - 32px); }
.sa-alert {
    padding: 12px 16px; border-radius: var(--sradius-sm);
    box-shadow: var(--sshadow); margin-bottom: 8px;
    font-size: 14px; display: flex; align-items: flex-start; gap: 10px;
    animation: slideInRight .25s ease;
}
@keyframes slideInRight {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.sa-alert.success { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
.sa-alert.error   { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }
.sa-alert.info    { background: var(--sp-light); border-left: 4px solid var(--sp); color: var(--sp-dark); }

/* ================================================================
   HTMX — Loading indicator
   ================================================================ */
#htmx-loading-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--sp), var(--ss));
    z-index: 99999; transition: width .3s ease;
}
.htmx-request #htmx-loading-bar { width: 70%; }
.htmx-settling #htmx-loading-bar { width: 100%; opacity: 0; transition: opacity .4s .1s; }

/* ================================================================
   FOOTER
   ================================================================ */

/* Logo footer — reducido para alinearse visualmente con columnas adyacentes */
.footer-widget-title img,
.footer-widget-title .img-fluid {
    max-width: 160px !important;
    width: 160px;
    height: auto;
    display: block;
    margin-bottom: 12px;
}

@media (max-width: 759px) {
    .footer-widget-title img,
    .footer-widget-title .img-fluid { max-width: 130px !important; width: 130px; }
    .footer-top .row > [class*='col-'] { width: 100%; }
    .footer-widget { margin-bottom: 24px; }
    .footer-widget-title { font-size: 1rem; margin-bottom: 10px; }
}

/* ================================================================
   MISC / UTILITIES
   ================================================================ */

/* Hover suave en cualquier enlace con clase */
.shop-link {
    color: var(--sp); text-decoration: none;
    transition: color var(--stransition);
}
.shop-link:hover { color: var(--ss); }

/* Botón verde shop */
.btn-shop {
    background: var(--sp); color: #fff;
    border: 2px solid var(--sp);
    border-radius: var(--sradius-sm);
    padding: 10px 22px; font-weight: 600;
    transition: var(--stransition); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-shop:hover { background: var(--sp-dark); border-color: var(--sp-dark); color: #fff; }
.btn-shop-outline {
    background: transparent; color: var(--sp);
    border: 2px solid var(--sp);
    border-radius: var(--sradius-sm);
    padding: 10px 22px; font-weight: 600;
    transition: var(--stransition); cursor: pointer;
}
.btn-shop-outline:hover { background: var(--sp); color: #fff; }

/* Precio tachado + descuento */
.price-discount { color: #e53935; font-size: 12px; font-weight: 700; }

/* Chip de categoría */
.category-chip {
    display: inline-flex; align-items: center;
    background: var(--sp-light); color: var(--sp);
    border: 1px solid color-mix(in srgb, var(--sp) 30%, transparent);
    border-radius: 100px; padding: 4px 12px;
    font-size: 13px; text-decoration: none;
    transition: var(--stransition);
}
.category-chip:hover { background: var(--sp); color: #fff; }

/* Espaciado de página responsive */
@media (max-width: 759px) {
    .section-space-y-axis-100 { padding-top: 40px !important; padding-bottom: 40px !important; }
    .section-space-top-100 { padding-top: 32px !important; }
    .pt-5 { padding-top: 1rem !important; }
}

/* Fix: no scroll horizontal en mobile */
@media (max-width: 759px) {
    .container { padding-left: 12px; padding-right: 12px; }
    [class*='section-space'] { overflow-x: hidden; }
}

/* ================================================================
   DROPDOWN USUARIO — header (logged in + login form)
   ================================================================ */

/* Contenedor base */
.sp-user-dropdown {
    min-width: 210px;
    max-width: 220px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--sborder);
    border-radius: var(--sradius);
    box-shadow: 0 8px 32px rgba(0,0,0,.13);
    overflow: hidden;
    right: 0;
    left: auto !important;
}
/* eliminar padding por defecto de Bootstrap dropdown-menu */
.sp-user-dropdown > * { box-sizing: border-box; }

/* — HEADER usuario loggeado — */
.sp-udrop-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--sp);
    color: #fff;
}
.sp-udrop-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.sp-udrop-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
}

/* — Links menú usuario — */
.sp-udrop-links { padding: 6px 0; }
.sp-udrop-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    color: var(--sdark);
    text-decoration: none;
    transition: background var(--stransition), color var(--stransition);
}
.sp-udrop-link i { width: 16px; text-align: center; color: var(--sp); font-size: 13px; }
.sp-udrop-link:hover { background: var(--sp-light); color: var(--sp-dark); }

/* — Footer logout — */
.sp-udrop-footer {
    border-top: 1px solid var(--sborder);
    padding: 6px 0;
}
.sp-udrop-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    color: #c0392b;
    text-decoration: none;
    transition: background var(--stransition);
}
.sp-udrop-logout i { width: 16px; text-align: center; }
.sp-udrop-logout:hover { background: #fdf0ef; color: #a93226; }

/* ── FORMULARIO LOGIN compacto ── */
.sp-udrop-login { padding: 8px !important; }

#header-login-form,
.sp-login-form {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sp-lf-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
}
.sp-lf-group label { font-size: 11px; font-weight: 600; color: var(--sgray); text-transform: uppercase; letter-spacing: .4px; }

.sp-lf-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    font-size: 13px;
    border: 1px solid var(--sborder);
    border-radius: var(--sradius-sm);
    background: var(--sbg);
    color: var(--sdark);
    transition: border-color var(--stransition), box-shadow var(--stransition);
    outline: none;
}
.sp-lf-input:focus {
    border-color: var(--sp);
    box-shadow: 0 0 0 3px rgba(0,121,107,.12);
    background: #fff;
}

.sp-lf-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sgray);
}
.sp-lf-remember input { accent-color: var(--sp); cursor: pointer; }
.sp-lf-remember label { cursor: pointer; margin: 0; }

.sp-lf-btn {
    width: 100%;
    padding: 8px;
    background: var(--sp);
    color: #fff;
    border: none;
    border-radius: var(--sradius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--stransition), transform var(--stransition);
}
.sp-lf-btn:hover { background: var(--sp-dark); transform: translateY(-1px); }
.sp-lf-btn:disabled { opacity: .65; transform: none; cursor: default; }

/* — Link registrarse — */
.sp-udrop-register-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp);
    border: 1.5px solid var(--sp);
    border-radius: var(--sradius-sm);
    text-decoration: none;
    transition: background var(--stransition), color var(--stransition);
}
.sp-udrop-register-link:hover { background: var(--sp); color: #fff; }

/* ================================================================
   BOTONES — estilos canónicos shop
   ================================================================ */

/* Botón ver pedido en tabla */
.sp-btn-view {
    background: var(--sp);
    color: #fff !important;
    border: none;
    border-radius: var(--sradius-sm);
    font-size: 12px;
    padding: 5px 12px;
    transition: background var(--stransition), transform var(--stransition);
    white-space: nowrap;
}
.sp-btn-view:hover {
    background: var(--sp-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

/* btn-outline-secondary — texto legible en hover */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--sgray) !important;
    border-color: var(--sgray) !important;
    color: #fff !important;
}

/* btn-outline-primary — override shop */
.btn-outline-primary {
    color: var(--sp) !important;
    border-color: var(--sp) !important;
}
.btn-outline-primary:hover {
    background-color: var(--sp) !important;
    border-color: var(--sp) !important;
    color: #fff !important;
}

/* Tablas de páginas de usuario (orders, quotes, addresses) */
.page-contents table thead th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}
.page-contents table tbody td { font-size: 13px; vertical-align: middle; }

/* ================================================================
   ¿POR QUÉ BIOPOMPAS?
   ================================================================ */
.porque-area {
    background: linear-gradient(180deg, var(--sp-light) 0%, #E6F5F3 100%);
    padding: 48px 0;
}
.porque-grid { margin-top: 8px; }
.porque-item {
    text-align: center;
    padding: 30px 20px 28px;
    background: #fff;
    border: 1px solid rgba(0,121,107,.12);
    border-radius: var(--sradius);
    box-shadow: 0 2px 14px rgba(0,121,107,.06);
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.porque-item:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,121,107,.14); border-color: rgba(0,121,107,.28); }
.porque-icon {
    width: 88px; height: 88px;
    background: var(--sp);
    color: #fff;                       /* currentColor de los SVGs FA → blanco */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 6px 16px rgba(0,121,107,.28);
    border: 3px solid #fff;
    outline: 1px solid rgba(0,121,107,.15);
}
.porque-icon i { font-size: 59px; color: #fff; }
/* Los iconos se renderizan como SVG FA con fill="currentColor" → heredan de .porque-icon.
   Se usa !important para vencer el width/height que Font Awesome 6 inline mete en el <svg>. */
.porque-icon svg { width: 59px !important; height: 59px !important; color: #fff; }
.porque-icon svg path { fill: currentColor; }
.porque-item h5 { font-size: 15px; font-weight: 700; color: var(--sdark); margin-bottom: 8px; }
.porque-item p  { font-size: 14px; color: #3c4b44; line-height: 1.6; margin: 0; }

/* ================================================================
   PRODUCTOS RELACIONADOS
   ================================================================ */
.related-products-area { background: var(--sp-light); padding-bottom: 40px; }

/* ================================================================
   NEWSLETTER
   ================================================================ */
.newsletter-area {
    background: linear-gradient(135deg, var(--sp) 0%, var(--ss) 100%);
    padding: 40px 0;
    color: #fff !important;
}
.newsletter-inner { padding: 8px 0; }
.newsletter-text h3 { color: #fff !important; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.newsletter-text p  { color: rgba(255,255,255,.9) !important; font-size: 14px; margin: 0; }
.newsletter-input-wrap {
    display: flex;
    gap: 0;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.newsletter-input-wrap input {
    flex: 1;
    border: none;
    padding: 14px 20px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--sdark);
}
.newsletter-input-wrap input::placeholder { color: #aaa; }
.btn-newsletter {
    background: var(--sdark);
    color: #fff;
    border: none;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: background .2s;
    white-space: nowrap;
}
.btn-newsletter:hover { background: #000; }
.btn-newsletter:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 760px) {
    .newsletter-text { text-align: center; margin-bottom: 16px; }
    .newsletter-text h3 { font-size: 18px; }
    .newsletter-input-wrap { border-radius: 8px; flex-direction: column; }
    .newsletter-input-wrap input { border-radius: 8px 8px 0 0; }
    .btn-newsletter { border-radius: 0 0 8px 8px; justify-content: center; }
}

/* ================================================================
   FOOTER — métodos de pago + layout bottom
   ================================================================ */
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-copy { font-size: 13px; }

/* Bloque "Pago seguro" */
.payment-methods {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.payment-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.95);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.payment-label .fas { font-size: 12px; }

/* Icono separador visual */
.payment-methods::before {
    content: '';
    display: block;
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.25);
}

/* Grupo de iconos */
.pay-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Iconos FA tarjetas */
.payment-methods .fab {
    font-size: 30px;
    color: rgba(255,255,255,.80);
    transition: color .2s, transform .15s;
    cursor: default;
}
.payment-methods .fa-cc-visa:hover       { color: #fff; transform: scale(1.12); }
.payment-methods .fa-cc-mastercard:hover { color: #ff9f00; transform: scale(1.12); }
.payment-methods .fa-cc-paypal:hover     { color: #69b3f7; transform: scale(1.12); }

/* Badges texto (Bizum, Transferencia) */
.pay-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1.5px solid rgba(255,255,255,.40);
    border-radius: 20px;
    padding: 3px 10px;
    color: rgba(255,255,255,.95);
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.pay-badge:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.75);
    color: #fff;
}
.pay-badge .fas { font-size: 11px; margin-right: 3px; }

/* Variantes de color en hover */
.pay-badge--bizum:hover     { background: rgba(83,190,255,.25); border-color: #53beff; color: #fff; }
.pay-badge--transfer:hover  { background: rgba(255,255,255,.15); }

@media (max-width: 760px) {
    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }
    .payment-methods::before { display: none; }
    .payment-methods { justify-content: center; }
}

/* ================================================================
   SCROLL TO TOP
   ================================================================ */
#scroll-top {
    position: fixed;
    bottom: 28px;
    left: 20px;
    width: 40px; height: 40px;
    background: var(--sp);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s;
    z-index: 990;
    pointer-events: none;
}
#scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scroll-top:hover   { background: var(--ss); }

/* ================================================================
   SEPARADOR DE OLAS entre secciones de producto
   ================================================================ */
.section-divider-wave {
    line-height: 0;
    overflow: hidden;
    margin: 40px 0 0;
}
.section-divider-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

/* ================================================================
   MINICART — botón vaciar carrito
   ================================================================ */
#btn-clear-cart {
    font-size: 12px;
    padding: 5px 10px;
    opacity: .75;
    transition: opacity .2s;
}
#btn-clear-cart:hover { opacity: 1; }

/* SweetAlert2 por encima del minicart (z-index 10005) y del overlay (10000) */
.swal2-container { z-index: 10100 !important; }

/* ================================================================
   CHECKOUT
   ================================================================ */

/* ── Tabs ── */
.checkout-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--sborder);
    width: 100%;
}
.checkout-tab {
    flex: 1;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sgray);
    cursor: pointer;
    transition: color var(--stransition), border-color var(--stransition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.checkout-tab:hover { color: var(--sp); }
.checkout-tab.active { color: var(--sp); border-bottom-color: var(--sp); }

/* Panel activo: siempre ancho completo */
.checkout-tab-panel { width: 100%; }

/* ── Cards ── */
.checkout-card {
    width: 100%;
    background: #fff;
    border: 1px solid var(--sborder);
    border-radius: var(--sradius);
    overflow: hidden;
    box-shadow: var(--sshadow);
}
.checkout-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--sp) 0%, var(--sp-dark) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}
.checkout-card__header i { font-size: 15px; opacity: .9; }
.checkout-card__optional {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
}
.checkout-card__body { padding: 18px; }
.checkout-card__body.p-0 { padding: 0; }

/* ── Address cards ── */
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.address-card {
    cursor: pointer;
    display: block;
    margin: 0;           /* reset <label> margin */
    user-select: none;   /* evita selección de texto al hacer clic rápido */
}
.address-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.address-card__inner {
    border: 2px solid var(--sborder);
    border-radius: var(--sradius-sm);
    padding: 14px;
    background: var(--sbg);
    transition: border-color var(--stransition), background var(--stransition), box-shadow var(--stransition);
    display: flex;
    gap: 12px;
    height: 100%;
    min-height: 80px;
}
.address-card:hover .address-card__inner,
.address-card:focus-within .address-card__inner {
    border-color: var(--sp);
    background: var(--sp-light);
}
.address-card.selected .address-card__inner {
    border-color: var(--sp) !important;
    background: var(--sp-light) !important;
    box-shadow: 0 0 0 3px rgba(0,121,107,.18) !important;
}
.address-card__check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sborder);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    color: transparent;
    background: #fff;
    transition: all .18s;
    margin-top: 2px;
}
.address-card.selected .address-card__check {
    background: var(--sp) !important;
    border-color: var(--sp) !important;
    color: #fff !important;
}
.address-card__content p {
    font-size: 13px;
    color: var(--sdark);
    margin: 0 0 3px;
    line-height: 1.4;
}
.address-card__content p:last-child { margin: 0; }

/* ── Payment cards ── */
.payment-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.payment-card {
    cursor: pointer;
    flex: 1 1 120px;
}
.payment-card input[type="radio"] { display: none; }
.payment-card__inner {
    border: 2px solid var(--sborder);
    border-radius: var(--sradius-sm);
    padding: 14px 12px;
    background: var(--sbg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sdark);
    text-align: center;
    transition: border-color var(--stransition), background var(--stransition), box-shadow var(--stransition);
}
.payment-card__inner i { font-size: 24px; color: var(--sgray); transition: color var(--stransition); }
.payment-card:hover .payment-card__inner {
    border-color: var(--sp);
    background: var(--sp-light);
}
.payment-card.selected .payment-card__inner {
    border-color: var(--sp);
    background: var(--sp-light);
    box-shadow: 0 0 0 3px rgba(0,121,107,.12);
}
.payment-card.selected .payment-card__inner i { color: var(--sp); }

/* ── Bank details box ── */
.bank-details-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f0f7ff;
    border: 1px solid #b8d9f8;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: #1a4a7a;
    line-height: 1.5;
    white-space: pre-line;
}
.bank-details-box i { flex-shrink: 0; margin-top: 2px; color: #1a7abf; }

/* ── Form controls ── */
.sp-form-group { display: flex; flex-direction: column; gap: 5px; }
.sp-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sdark);
}
.sp-form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1.5px solid var(--sborder);
    border-radius: var(--sradius-sm);
    background: #fff;
    color: var(--sdark);
    outline: none;
    transition: border-color var(--stransition), box-shadow var(--stransition);
}
.sp-form-control:focus {
    border-color: var(--sp);
    box-shadow: 0 0 0 3px rgba(0,121,107,.1);
}
textarea.sp-form-control { resize: vertical; min-height: 80px; }

/* Toggle checkbox */
.sp-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.sp-toggle-label input[type="checkbox"] { accent-color: var(--sp); width: 16px; height: 16px; cursor: pointer; }
.sp-toggle-text { font-size: 14px; font-weight: 500; color: var(--sdark); }

/* ── Botones checkout ── */
.btn-checkout-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--sp), var(--sp-dark));
    color: #fff !important;
    border: none;
    border-radius: var(--sradius-sm);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--stransition), transform var(--stransition), box-shadow var(--stransition);
    box-shadow: 0 4px 16px rgba(0,121,107,.3);
}
.btn-checkout-primary:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,121,107,.4);
    color: #fff !important;
}
.btn-checkout-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    background: #fff;
    color: var(--sp) !important;
    border: 1.5px solid var(--sp);
    border-radius: var(--sradius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--stransition), color var(--stransition);
}
.btn-checkout-secondary:hover {
    background: var(--sp);
    color: #fff !important;
}

/* ── Sidebar resumen ── */
.checkout-summary {
    position: sticky;
    top: 90px;
}
/* Tabla de totales dentro del card — anula el flex rule de shop.css (.checkout-totals { max-width:35% }) */
.checkout-card__body .checkout-totals {
    flex: unset !important;
    max-width: 100% !important;
    width: 100% !important;
}
.checkout-totals {
    width: 100%;
    border-collapse: collapse;
}
.checkout-totals td {
    padding: 11px 18px;
    font-size: 14px;
    border-bottom: 1px solid var(--sborder);
    vertical-align: middle;
}
.checkout-totals td:first-child {
    color: var(--sgray);
    white-space: nowrap;   /* evita partir "base imponible" */
}
.checkout-totals td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--sdark);
    white-space: nowrap;
    width: 1%;             /* colapsa al mínimo → la columna label toma el resto */
}
.checkout-totals__note { font-size: 11px; color: var(--sgray); }
.checkout-totals__grand td {
    background: var(--sp-light);
    font-size: 16px;
    font-weight: 700;
    color: var(--sp);
    border-bottom: none;
}
.checkout-summary__note {
    font-size: 12px;
    color: var(--sgray);
    margin: 0;
    line-height: 1.4;
}

/* Trust badges */
.checkout-trust {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding: 14px;
    background: var(--sp-light);
    border-radius: var(--sradius-sm);
    border: 1px solid rgba(0,121,107,.15);
}
.checkout-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-dark);
    text-align: center;
}
.checkout-trust__item i { font-size: 18px; color: var(--sp); }

/* Alertas checkout */
.sp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--sradius-sm);
    font-size: 14px;
}
.sp-alert--error   { background: #fdf0f0; border-left: 4px solid #e74c3c; color: #c0392b; }
.sp-alert--warning { background: #fffbf0; border-left: 4px solid #f39c12; color: #856404; }
.sp-alert--success { background: #f0fdf4; border-left: 4px solid #27ae60; color: #155724; }

/* Responsive checkout */
@media (max-width: 759px) {
    .checkout-tab { font-size: 13px; padding: 10px 12px; }
    .address-grid { grid-template-columns: 1fr; }
    .payment-cards { gap: 8px; }
    .payment-card { flex: 1 1 100px; }
    .checkout-summary { position: static; }
    .checkout-totals td { padding: 9px 14px; font-size: 13px; }
    .checkout-card__body { padding: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   ICONO FAVORITOS — Header toolbar
   ══════════════════════════════════════════════════════════════════ */
.wishlist-icon-wrap a.wishlist-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: color var(--stransition), background var(--stransition);
}
.wishlist-icon-wrap a.wishlist-toolbar-btn i {
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* SVG object dentro del <i> — igual que user/cart */
.wishlist-icon-wrap a.wishlist-toolbar-btn i object {
    width: 22px;
    height: 22px;
    pointer-events: none;
}
.wishlist-icon-wrap a.wishlist-toolbar-btn:hover {
    color: var(--sp);
    background: var(--sp-light);
}
/* Móvil compacto */
@media (max-width: 760px) {
    .wishlist-icon-wrap a.wishlist-toolbar-btn {
        width: 32px;
        height: 32px;
    }
    .wishlist-icon-wrap a.wishlist-toolbar-btn i,
    .wishlist-icon-wrap a.wishlist-toolbar-btn i object {
        width: 20px;
        height: 20px;
        font-size: 19px;
    }
}
/* Badge contador */
.wishlist-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50px;
    background: var(--sp);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   BOTÓN FAVORITOS — Overlay en tarjetas de producto
   ══════════════════════════════════════════════════════════════════ */
/* El .product-img ya tiene position:relative por el tema */
.product-img { position: relative; overflow: hidden; }

.btn-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.88);
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background var(--stransition), color var(--stransition), transform var(--stransition);
    z-index: 2;
    opacity: 0;
    transform: translateY(-4px);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    line-height: 1;
}
/* Visible en hover de la tarjeta */
.product-item:hover .btn-wishlist,
.product-item:focus-within .btn-wishlist {
    opacity: 1;
    transform: translateY(0);
}
/* Siempre visible en móvil (no hay hover) */
@media (max-width: 760px) {
    .btn-wishlist { opacity: 1; transform: translateY(0); }
}
.btn-wishlist:hover { background: #fff; color: var(--sp); transform: scale(1.1); }
/* Estado activo: ya en favoritos */
.btn-wishlist.is-wishlisted { color: #e74c3c; opacity: 1; transform: translateY(0); }
.btn-wishlist.is-wishlisted:hover { background: #fff; color: #c0392b; }
/* Ficha de producto: icono de favoritos sobre la imagen, siempre visible */
.single-product-img .btn-wishlist {
    opacity: 1;
    transform: none;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 18px;
}
.single-product-img .btn-wishlist.is-wishlisted { opacity: 1; }

/* ── Lista de productos en sidebar checkout ── */
.checkout-items-list {
    padding: 8px 0 4px;
    max-height: 280px;
    overflow-y: auto;
}
.checkout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.checkout-item:last-child { border-bottom: none; }
.checkout-item__img {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #f9f9f9;
}
.checkout-item__img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.checkout-item__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 18px;
}
.checkout-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.checkout-item__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--sdark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkout-item__qty {
    font-size: 12px;
    color: #888;
}
.checkout-item__price {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-dark);
    white-space: nowrap;
}
.checkout-items-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
    margin: 4px 16px 0;
}

/* ── Botón CTA checkout móvil ── */
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(0,121,107,.35); }
    50%       { box-shadow: 0 6px 28px rgba(0,121,107,.6); }
}
.btn-checkout-cta {
    font-size: 17px;
    padding: 16px 24px;
    animation: ctaPulse 2.4s ease-in-out infinite;
    letter-spacing: .5px;
}
.btn-checkout-cta:hover,
.btn-checkout-cta:focus {
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,121,107,.5);
}
.checkout-cta-mobile {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    background: linear-gradient(to top, rgba(255,255,255,.98) 80%, transparent);
    padding: 10px 0 4px;
    border-radius: 8px;
}

/* ── Breadcrumb compacto para páginas de carrito/checkout ── */
@media (max-width: 991px) {
    .breadcrumb-height-sm { height: 120px; }
}
@media (min-width: 992px) {
    .breadcrumb-height-sm { height: 190px; }
}

/* wishlist active (ficha y tarjeta) */
.add-to-wishlist.is-wishlisted, .add-to-cart.is-wishlisted { color:#e74c3c !important; }
.add-to-wishlist.is-wishlisted i, .add-to-cart.is-wishlisted i { color:#e74c3c !important; }

/* ═══ Autosuggest de búsqueda (FASE 2) ═══ */
.shop-search-box { position: relative; }
.autosuggest-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--sborder, #dee2e6);
    border-radius: var(--sradius, 10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    max-height: 320px;
    overflow-y: auto;
    display: none;
}
.autosuggest-dropdown.open { display: block; }
.asus-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--sdark, #212529);
    transition: background .15s;
    border-bottom: 1px solid #f1f1f1;
}
.asus-item:last-child { border-bottom: none; }
.asus-item:hover { background: var(--sp-light, #E0F2F1); }
.asus-thumb {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sp-light, #E0F2F1);
    display: flex; align-items: center; justify-content: center;
}
.asus-thumb img { width: 100%; height: 100%; object-fit: cover; }
.as-none-img { color: var(--sp, #00796B); font-size: 18px; }
.asus-name { font-size: 14px; font-weight: 600; color: var(--sdark, #212529); line-height: 1.3; }

/* ═══ Filtro por envase (FASE 3) ═══ */
.shop-filter-row { align-items: stretch; }
.shop-envase-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: 100%;
    align-items: center;
}
.shop-envase-filter--top {
    margin-bottom: 14px;
    padding: 10px 0;
    height: auto;
}
.envase-pill {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sdark, #212529);
    background: #fff;
    border: 1.5px solid var(--sborder, #dee2e6);
    border-radius: 999px;
    padding: 8px 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}
.envase-pill:hover {
    border-color: var(--sp, #00796B);
    color: var(--sp, #00796B);
    background: var(--sp-light, #E0F2F1);
}
.envase-pill.is-active {
    background: var(--sp, #00796B);
    border-color: var(--sp, #00796B);
    color: #fff;
}


/* ═══ Precio PVP/PVD por rol (FASE 6) ═══ */
.price-role-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
}
.price-role-block .entry-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sdark, #212529);
}
.price-role-block .pvp-label,
.price-role-block .pvd-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 6px;
}
.price-role-block .pvp-label {
    background: var(--sdark, #5a5a5a);
    color: #fff;
}
.price-role-block .pvd-label {
    background: var(--sp, #00796B);
    color: #fff;
}
.price-role-block .pvp-value {
    text-decoration: line-through;
    color: #8c8c8c;
    font-weight: 600;
}
.price-role-block .pvd-value {
    font-weight: 700;
    color: var(--sp, #00796B);
    font-size: 15px;
}


/* ═══ PVP/PVD en tarjetas (FASE 6) ═══ */
.product-badge--tarifa {
    position: absolute; top: 10px; left: 10px;
    z-index: 5;
    background: #00796B;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .4px;
    box-shadow: 0 2px 6px rgba(0, 121, 107, .35);
}
.price-discount--tarifa {
    color: var(--sp, #00796B);
    font-weight: 700;
    font-size: 12px;
}


.price-role-save {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #e53935;
    border-radius: 4px;
    padding: 2px 7px;
}


/* ═══ Aviso consentimiento Elfsight (testimonios / Instagram) ═══ */
.elfsight-consent-hint {
    background: #fdf3e7;
    border: 1px solid #f0d5b0;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #7a5a2e;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.elfsight-consent-hint a {
    color: #b5690f;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.elfsight-consent-hint a:hover { color: #8a4d0a; }

/* ═══ ELFSIGHT — secciones testimonios (#resenas) e Instagram (#instagram), 2026-08-31 ═══
   Margen superior, espacio bajo el título y altura mínima reservada para los widgets
   (evita que la sección colapse antes de que el iframe de Elfsight cargue → sin CLS). */
#resenas {
    padding-top: 60px !important; /* sin contadores (2026-08-31): menos aire tras promociones */
    padding-bottom: 30px !important; /* menos aire entre testimonios e Instagram */
}
#instagram {
    padding-top: 60px !important; /* menos aire entre testimonios e Instagram */
}
/* Espacio en blanco debajo de los títulos de sección (antes del widget) */
#resenas .section-title-wrap,
#instagram .section-title-wrap {
    margin-bottom: 28px;
}
/* Contenedor del widget: reserva de altura (el iframe se inyecta al hacer scroll) */
#resenas .container > [data-elfsight-app-lazy],
#resenas .container > .elfsight-embed {
    min-height: 750px;
}
#instagram .container > [data-elfsight-app-lazy],
#instagram .container > .elfsight-embed {
    min-height: 750px;
}
@media (max-width: 759px) {
    #resenas { padding-top: 48px !important; padding-bottom: 24px !important; }
    #instagram { padding-top: 48px !important; }
    #resenas .section-title-wrap,
    #instagram .section-title-wrap {
        margin-bottom: 20px;
    }
    #resenas .container > [data-elfsight-app-lazy],
    #resenas .container > .elfsight-embed {
        min-height: 400px;
    }
    #instagram .container > [data-elfsight-app-lazy],
    #instagram .container > .elfsight-embed {
        min-height: 460px;
    }
}

/* ═══ HERO: slider BS5 nativo (reescrito 2026-08-30, sin dependencias de Swiper) ═══
   Layout: 2 columnas desktop (texto 50% + imagen 50%), columna única móvil
   (imagen arriba, texto abajo). La imagen reserva altura con aspect-ratio → CLS 0. */
#mainSlider { background: #f4fbfa; }
#mainSlider .bp-slide__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 48px;
    padding: 44px 64px 44px 180px; /* izquierda ancha: el texto no pisa la flecha prev */
    /* Altura mínima estable: evita CLS entre slides con distinto texto (transición fade) */
    min-height: 700px;
}
#mainSlider .bp-slide__content {
    width: 50%;
    text-align: left;
}
#mainSlider .bp-slide__title {
    font-size: clamp(2.2rem, 3.3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sp-dark, #005F5F);
    margin: 0 0 14px;
}
#mainSlider .bp-slide__desc {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #4a5560;
    margin: 0 0 22px;
    max-width: 560px;
}
#mainSlider .bp-slide__btn {
    font-size: 1rem;
    padding: 10px 26px;
}
#mainSlider .bp-slide__media {
    width: 50%;
}
#mainSlider .bp-slide__media picture { display: block; }
#mainSlider .bp-slide__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 740;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 79, 64, .14);
}
/* Indicadores: puntos de marca */
#mainSlider .bp-indicators { margin-bottom: 12px; }
#mainSlider .bp-indicators button {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #b2dfdb;
    border: 0;
    opacity: 1;
    transition: background .2s, width .2s;
}
#mainSlider .bp-indicators button.active { background: var(--sp, #00796B); width: 22px; border-radius: 5px; }
/* Controles: flechas discretas, visibles al pasar el ratón */
#mainSlider .carousel-control-prev,
#mainSlider .carousel-control-next { width: 8%; opacity: 0; transition: opacity .2s; }
#mainSlider:hover .carousel-control-prev,
#mainSlider:hover .carousel-control-next { opacity: 1; }
#mainSlider .carousel-control-prev-icon,
#mainSlider .carousel-control-next-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

@media (max-width: 1199px) {
    #mainSlider .bp-slide__inner { gap: 24px; padding: 30px 36px 30px 120px; min-height: 520px; }
}
@media (max-width: 759px) {
    #mainSlider .bp-slide__inner { display: block; padding: 12px 12px 20px; min-height: 380px; }
    #mainSlider .bp-slide__content { width: 100%; text-align: center; padding: 14px 8px 0; }
    #mainSlider .bp-slide__title { font-size: 2.1rem; }
    #mainSlider .bp-slide__desc { font-size: 1.05rem; margin-left: auto; margin-right: auto; }
    /* En móvil no hay hover: las flechas invisibles se solapan con el texto centrado → ocultas */
    #mainSlider .carousel-control-prev,
    #mainSlider .carousel-control-next { display: none; }
    #mainSlider .bp-slide__media { width: 100%; }
    #mainSlider .bp-slide__media img { aspect-ratio: 16 / 10; border-radius: 10px; }
    #mainSlider .bp-indicators { margin-bottom: 6px; }
}

/* ════════════════════════════════════════════════════════════════
   BOTONES DE CATEGORÍA (botones de la home, 2026-08-30)
   Sustituyen a las fotos de banner por botones de gradiente de marca
   + icono Font Awesome + texto. Todos con el MISMO tamaño (resuelve
   el desajuste de aspect-ratios del tema). Súper ligeros: 0 imágenes.
   ════════════════════════════════════════════════════════════════ */
.cat-tile { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,79,64,.08); }
.cat-tile a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 110px;      /* botón BAJO (2026-08-30 v3): icono + texto en fila */
    min-height: 110px;
    padding: 14px 52px 14px 22px; /* margen derecho reservado para la flecha */
    border-radius: 14px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    background: linear-gradient(150deg, #00A396 0%, var(--sp) 50%, #004D40 100%);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cat-tile a:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,79,64,.22);
    filter: brightness(1.05);
}
.cat-tile .cat-btn__icon { font-size: 44px; opacity: .92; text-shadow: 0 3px 8px rgba(0,0,0,.18); }
.cat-tile .cat-btn__label {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
    font-weight: 700;
    letter-spacing: .3px;
    text-shadow: 0 1px 3px rgba(0,0,0,.16);
    text-transform: uppercase;
}
.cat-tile .cat-btn__arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    transition: transform .25s ease;
}
.cat-tile a:hover .cat-btn__arrow { transform: translateX(4px); }
.cat-tile .cat-btn__arrow i { font-size: 14px; }

/* Gradiente por categoría (2-4 colores dentro de la paleta verde/teal) */
.cat-tile--jabon    a { background: linear-gradient(150deg, #3E8E5A 0%, #1B5E20 55%, #0D3B12 100%); }
.cat-tile--ropa     a { background: linear-gradient(150deg, #00A396 0%, #00796B 50%, #005F5F 100%); }
.cat-tile--cosmetica a { background: linear-gradient(150deg, #66BB6A 0%, #2E7D32 55%, #1B5E20 100%); }
.cat-tile--limpieza a { background: linear-gradient(150deg, #26A69A 0%, #00838F 55%, #006064 100%); }
.cat-tile--higiene  a { background: linear-gradient(150deg, #00796B 0%, #00695C 55%, #004D40 100%); }
.cat-tile--cocina   a { background: linear-gradient(150deg, #2E7D32 0%, #00695C 55%, #004D40 100%); }

@media (max-width: 767px) {
    .cat-tile a { height: 84px; min-height: 84px; padding: 10px 44px 10px 16px; gap: 12px; }
    .cat-tile .cat-btn__icon { font-size: 34px; }
    .cat-tile .cat-btn__label { font-size: 1.05rem; }
    .cat-tile .cat-btn__arrow { width: 24px; height: 24px; right: 12px; }
}

/* ================================================================
   PERFORMANCE — animaciones compuestas (2026-09-07)
   ================================================================
   El tema base aplica `transition: all .3s ease` a a/button/.btn/img/input
   (style.min.purged.css). Con `all` se animan color, font-size, margins,
   paddings, border-width… (propiedades NO compuestas: fuerzan layout/paint
   y Lighthouse las marca como "Animaciones no compuestas").
   Limitamos la transición genérica a transform/opacity, que el compositor
   resuelve en GPU sin coste de layout. Al final del fichero para ganar
   cascada sobre las reglas del tema (misma especificidad, orden posterior).
   Las reglas concretas de componentes (hover de .btn-shop, chips, etc.)
   conservan sus transiciones propias de color si se declaran explícitamente
   con más especificidad; aquí solo se neutraliza el barrido global del tema. */
a, button, .btn, img, input, select, textarea {
    transition-property: transform, opacity;
    transition-duration: .25s;
    transition-timing-function: ease;
}

/* ================================================================
   CARRITO / CART — (2026-09-07) alineado con el lenguaje del checkout
   ================================================================
   Reutiliza las clases del checkout (.checkout-card/.btn-checkout-*/...)
   aplicadas al wrapper de /cart. Micro-pulidos específicos de la tabla. */
.sp-cart-root { padding-top: 12px; }

/* La fila del carrito reposa dentro de un .checkout-card__body */
.cart-table { margin: 0; font-size: 14px; }
.cart-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--sgray);
    border-bottom: 1px solid var(--sborder);
    background: transparent;
}
.cart-table tbody tr { border-bottom: 1px solid var(--sborder); }
.cart-table tbody tr:last-child { border-bottom: none; }

/* Miniatura + nombre de producto */
.cart-thumb {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--sborder);
    background: #f8faf9;
}
.cart-prod-name {
    font-weight: 600;
    color: var(--sdark);
    text-decoration: none;
}
.cart-prod-name:hover { color: var(--sp); }
.cart-prod-unit {
    display: block;
    font-size: 12px;
    color: var(--sgray);
    margin-top: 2px;
}

/* Botón eliminar línea (link rojo, sin caja) */
.cart-remove {
    background: none;
    border: none;
    color: #e53935;
    font-size: 16px;
    padding: 4px 6px;
    cursor: pointer;
    opacity: .7;
}
.cart-remove:hover { opacity: 1; }

/* Botón vaciar carrito (outline peligro) */
.cart-empty-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e53935;
    color: #e53935;
    background: #fff;
    border-radius: var(--sradius-sm);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--stransition), color var(--stransition);
}
.cart-empty-btn:hover { background: #e53935; color: #fff; }

/* El estado vacío */
.cart-table .cart-empty-msg,
#cart-fragment .cart-empty-msg { margin: 0; }

/* Total de la columna derecha ocupa su card completa (no solo la mitad) */
.checkout-summary__card { width: 100%; }