/* 
Theme Name: Berly22
Theme URI: https://berly22.mx/
Description: Tema nativo personalizado desarrollado a medida para berly22.mx
Author: Berly22 Team
Author URI: https://berly22.mx/
Version: 3.0.0
Text Domain: berly22-theme
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-theme, e-commerce, woocommerce, responsive, modern, fast
*/

/* ==========================================================================
   1. VARIABLES GLOBALES (Optimizado)
   ========================================================================== */
:root {
    --b22-color-1: #fafafa;
    --b22-black: #000000;
    --b22-white: #ffffff;
    --b22-cyan: #00ffbb;
    --b22-color-5: #eeeeee;
    --b22-dark: #111827;
    --b22-color-7: #00b383;
    --b22-color-8: #0d0d0d;
    --b22-color-9: #e5e5e5;
    --b22-color-10: #666666;
    --b22-gray-300: #d1d5db;
    --b22-color-12: #18181b;
    --b22-color-13: #52525b;
    --b22-color-14: #e4e4e7;
    --b22-color-15: #3f3f46;
    --b22-gray-200: #e5e7eb;
    --b22-color-18: #6b7280;
    --b22-gray-700: #374151;
    --b22-gray-100: #f3f4f6;
    --b22-gray-400: #9ca3af;
    --b22-color-22: #f9fafb;
    --b22-gray-600: #4b5563;
    --b22-hdr-bg: #000000;
    --b22-hdr-text: #ffffff;
    --b22-hdr-accent: #00ffbb;
    --b22-hdr-border: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   1. RESET GLOBAL & CONTENEDOR ANCHO COMPLETO (100% WIDTH)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #fafafa;
    color: #000000;
    font-family: 'Montserrat', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

h2 {
    font-size: 0.75rem;
}



.b22-global-wrapper,
#page-wrapper {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: clip;
}

.b22-main-content,
#main-content {
    flex: 1 0 auto;
    width: 100%;
}

/* ==========================================================================
   2. ESTILOS DEL HEADER
   ========================================================================== */



.b22-hdr-cintillo {
    background-color: #000000 !important;
    color: #ffffff !important;
    text-align: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    width: 100%;
    position: relative;
    z-index: 1001;
    min-height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El cintillo superior sólo aparece en móvil; en escritorio desaparece */
@media (min-width: 900px) {
    .b22-hdr-cintillo {
        display: none !important;
    }
}

.b22-cintillo-slider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b22-cintillo-slide {
    margin: 0 !important;
    display: none;
}

.b22-cintillo-slide.active {
    display: block;
}

.b22-cintillo-slide i {
    margin-right: 0.45rem;
    font-size: 0.95em;
    vertical-align: -0.05em;
}

.b22-hdr-cintillo span {
    color: #00ffbb !important;
    font-weight: 700;
}

/* Cintillo informativo central en escritorio (entre menú y carrito) */
.b22-hdr-center-cintillo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    overflow: hidden;
    min-width: 0;
}

.b22-hdr-center-cintillo .b22-cintillo-slide {
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
}

.b22-hdr-center-cintillo .b22-cintillo-slide span {
    color: #00ffbb !important;
    font-weight: 700;
}

.b22-hdr-center-cintillo .b22-cintillo-slide i {
    color: #00ffbb;
    margin-right: 0.45rem;
}

@media (max-width: 899px) {
    .b22-hdr-center-cintillo {
        display: none !important;
    }
}

/* Soporte para la barra superior de administrador de WordPress */
body.admin-bar .b22-site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .b22-site-header {
        top: 46px !important;
    }
}

/* ==========================================================================
   HEADER PRINCIPAL & VARIACIONES POR PÁGINA
   ========================================================================== */

/* 1. HEADER GLOBAL (Fondo Negro, Contenedor Negro, Texto Blanco con Acentos) */
.b22-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease;
}

.b22-hdr-container {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #000000 !important;
}

.b22-hdr-left-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex: 0 0 auto;
}

.b22-hdr-nav-left {
    display: none;
}

@media (min-width: 900px) {
    .b22-hdr-nav-left {
        display: flex;
    }
}

.b22-hdr-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.b22-hdr-menu a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: color 0.2s ease;
    position: relative;
}

.b22-hdr-menu a:hover {
    color: #00ffbb !important;
}

.b22-hdr-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.b22-hdr-logo-wrap img {
    max-height: 27px;
    width: auto;
    display: block;
    filter: none !important;
}

.b22-hdr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    flex: 0 0 auto;
}

.b22-hdr-action-link {
    color: #ffffff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.b22-hdr-action-link:hover {
    color: #00ffbb !important;
}

.b22-hdr-action-link svg,
.b22-hdr-toggle-btn svg {
    fill: #ffffff !important;
    transition: fill 0.2s ease;
}

.b22-hdr-action-link:hover svg {
    fill: #00ffbb !important;
}

.b22-cart-subtotal {
    color: #ffffff !important;
}

/* 2. CONSISTENCIA EN HOME Y AL HACER SCROLL (Se mantiene negro elegante) */
body.home .b22-site-header,
body.front-page .b22-site-header,
body.home.b22-scrolled .b22-site-header,
body.front-page.b22-scrolled .b22-site-header {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

body.home .b22-hdr-menu a,
body.front-page .b22-hdr-menu a,
body.home.b22-scrolled .b22-hdr-menu a,
body.front-page.b22-scrolled .b22-hdr-menu a,
body.home .b22-hdr-action-link,
body.front-page .b22-hdr-action-link,
body.home.b22-scrolled .b22-hdr-action-link,
body.front-page.b22-scrolled .b22-hdr-action-link {
    color: #ffffff !important;
}

body.home .b22-hdr-menu a:hover,
body.front-page .b22-hdr-menu a:hover,
body.home.b22-scrolled .b22-hdr-menu a:hover,
body.front-page.b22-scrolled .b22-hdr-menu a:hover,
body.home .b22-hdr-action-link:hover,
body.front-page .b22-hdr-action-link:hover,
body.home.b22-scrolled .b22-hdr-action-link:hover,
body.front-page.b22-scrolled .b22-hdr-action-link:hover {
    color: #00ffbb !important;
}

body.home .b22-hdr-action-link svg,
body.front-page .b22-hdr-action-link svg,
body.home.b22-scrolled .b22-hdr-action-link svg,
body.front-page.b22-scrolled .b22-hdr-action-link svg,
body.home .b22-hdr-toggle-btn svg,
body.front-page .b22-hdr-toggle-btn svg,
body.home.b22-scrolled .b22-hdr-toggle-btn svg,
body.front-page.b22-scrolled .b22-hdr-toggle-btn svg {
    fill: #ffffff !important;
}

body.home .b22-hdr-logo-wrap img,
body.front-page .b22-hdr-logo-wrap img,
body.home.b22-scrolled .b22-hdr-logo-wrap img,
body.front-page.b22-scrolled .b22-hdr-logo-wrap img {
    filter: none !important;
}

.b22-hdr-action-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.b22-cart-badge-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.b22-cart-qty {
    background-color: var(--b22-hdr-accent);
    color: #000000;
    font-size: 0.6875rem;
    font-weight: 800;
    border-radius: 9999px;
    padding: 2px 6px;
    margin-left: 4px;
}

.b22-hdr-toggle-btn {
    display: flex;
    background: none;
    border: none;
    color: var(--b22-hdr-text);
    cursor: pointer;
    padding: 0.5rem;
}

@media (min-width: 900px) {
    .b22-hdr-toggle-btn {
        display: none;
    }
}

/* En móvil, el carrito y mi cuenta están dentro del menú lateral; se ocultan de la barra principal */
@media (max-width: 899px) {
    .b22-hdr-actions .b22-hdr-action-link {
        display: none !important;
    }
}

.b22-hdr-toggle-btn svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* ==========================================================================
   MENÚ MÓVIL FULLSCREEN (PANTALLA NEGRA, FANTASMA ARRIBA Y COMIENZO SUPERIOR)
   ========================================================================== */

.b22-mobile-dropdown {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #000000;
    z-index: 999999;
    padding: 1.25rem 1.5rem 3rem 1.5rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.b22-mobile-dropdown.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.b22-menu-open {
    overflow: hidden !important;
}

/* Header con Carrito arriba a la izquierda y X de cerrar a la derecha */
.b22-mobile-menu-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.b22-mobile-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.b22-mobile-header-cart svg {
    width: 22px;
    height: 22px;
    fill: #ffffff !important;
    transition: fill 0.2s ease;
}

.b22-mobile-header-cart:hover,
.b22-mobile-header-cart:hover svg {
    color: #00ffbb !important;
    fill: #00ffbb !important;
}

.b22-mobile-header-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.b22-mobile-header-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.b22-mobile-header-account svg {
    width: 22px;
    height: 22px;
    fill: #ffffff !important;
    transition: fill 0.2s ease;
}

.b22-mobile-header-account:hover svg {
    fill: #00ffbb !important;
}

.b22-mobile-close-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.25s ease;
}

.b22-mobile-close-btn:hover {
    color: #00ffbb;
    transform: rotate(90deg);
}

/* Contenedor del fantasma + links que arranca más arriba */
.b22-mobile-menu-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 1.5rem;
}

/* Fantasma justo arriba del primer enlace */
.b22-mobile-ghost-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.b22-mobile-ghost-icon {
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.b22-mobile-ghost-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

.b22-mobile-menu-center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.b22-mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    max-width: 320px;
}

.b22-mobile-menu-list li {
    margin-bottom: 1.35rem;
}

.b22-mobile-menu-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
}

.b22-mobile-menu-list a:hover {
    color: #00ffbb;
    transform: scale(1.05);
}

/* Último link diferente: con borde arriba, en mayúscula y sin bold (normal) */
.b22-mobile-menu-list li:last-child {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: 0;
}

.b22-mobile-menu-list li:last-child a {
    font-style: normal !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: #00ffbb !important;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
}

.b22-mobile-menu-list li:last-child a:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   3. LAYOUT DE PRODUCTO INDIVIDUAL (50% / 50% SOBRE FONDO GRIS SUTIL)
   ========================================================================== */

.b22-single-product-section {
    padding: 2.5rem 0 5rem 0 !important;
    background-color: #fafafa !important;
    /* Gris sutil */
}

.b22-single-product-container {
    max-width: 95%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .b22-single-product-section {
        padding: 0 0 4rem 0 !important;
    }

    .b22-single-product-section .b22-container,
    .b22-single-product-section .b22-single-product-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .b22-single-product-section .b22-product-gallery-col {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .b22-single-product-section .b22-product-gallery-col .woocommerce-product-gallery,
    .b22-single-product-section .b22-product-gallery-col div.images,
    .b22-single-product-section .b22-product-gallery-col .flex-viewport,
    .b22-single-product-section .b22-product-gallery-col .woocommerce-product-gallery__wrapper,
    .b22-single-product-section .b22-product-gallery-col .woocommerce-product-gallery__image,
    .b22-single-product-section .b22-product-gallery-col .woocommerce-product-gallery__image img {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .b22-single-product-section .flex-control-thumbs {
        padding: 0.5rem 1rem !important;
        box-sizing: border-box !important;
    }

    .b22-single-product-section .b22-breadcrumbs,
    .b22-single-product-section .b22-product-summary-col,
    .b22-single-product-section .b22-product-buybox-col {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box !important;
    }
}

.b22-breadcrumbs {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #b3b3b4 !important;
    margin-bottom: 1rem !important;
    padding: 0.6rem 1.25rem !important;

}

.b22-breadcrumbs a {
    color: #7c7c7c !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.b22-breadcrumbs a:hover {
    color: #00b383 !important;
}

.b22-breadcrumbs .b22-sep {
    color: #a1a1aa !important;
    font-weight: 400 !important;
    margin: 0 0.2rem !important;
}

/* Layout de Producto: 3 Columnas (Mercado Libre / Amazon Style) */

.b22-single-product-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

.b22-single-product-grid .b22-product-gallery-col,
.b22-single-product-grid .b22-product-summary-col,
.b22-single-product-grid .b22-product-buybox-col {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablet (768px a 1023px): 2 columnas */
@media (min-width: 768px) and (max-width: 1023px) {
    .b22-single-product-grid {
        display: grid !important;
        grid-template-columns: 40% 1fr !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    .b22-single-product-grid .b22-product-summary-col {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 90px !important;
        align-self: flex-start !important;
        z-index: 9 !important;
    }

    .b22-single-product-grid .b22-product-buybox-col {
        grid-column: 1 / -1 !important;
    }
}

/* Desktop (>= 1024px): 3 Columnas (Galería reducida 20% | Info Central Sticky | Buy Box Sticky) */
@media (min-width: 1024px) {
    .b22-single-product-grid {
        display: grid !important;
        grid-template-columns: 40% 1fr 340px !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }

    .b22-single-product-grid .b22-product-gallery-col {
        position: relative !important;
        top: auto !important;
        align-self: flex-start !important;
        z-index: 2 !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .b22-single-product-grid .b22-product-summary-col {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 90px !important;
        align-self: flex-start !important;
        z-index: 9 !important;
        min-width: 0 !important;
    }

    .b22-single-product-grid .b22-product-buybox-col {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 90px !important;
        align-self: flex-start !important;
        z-index: 10 !important;
    }

    /* Ajuste de sticky con la barra superior de administrador de WordPress activa */
    body.admin-bar .b22-single-product-grid .b22-product-summary-col,
    body.admin-bar .b22-single-product-grid .b22-product-buybox-col {
        top: 122px !important;
    }

    @media (max-width: 782px) {

        body.admin-bar .b22-single-product-grid .b22-product-summary-col,
        body.admin-bar .b22-single-product-grid .b22-product-buybox-col {
            top: 136px !important;
        }
    }
}

/* Columna Imagen / Galería (Reducida ~20% para proporción perfecta) */
.b22-product-gallery-col {
    width: 100% !important;
}

.b22-product-gallery-col .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    opacity: 1 !important;
}

.b22-product-gallery-col .flex-control-thumbs {
    list-style: none !important;
    margin: 0 !important;
}

.b22-product-gallery-col .flex-control-thumbs li {
    width: 75px !important;
    flex: 0 0 75px !important;
}

.b22-product-gallery-col .flex-control-thumbs li img {
    cursor: pointer !important;
    border: 0px solid #e5e5e5 !important;
    box-shadow: none !important;
}

/* Columna Info (50%) */

.b22-product-summary-col {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.b22-single-product-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.5rem 0 !important;
    color: #000000 !important;
    line-height: 1.2 !important;
}

.b22-single-product-price {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #000000 !important;
    margin-bottom: 1.5rem !important;
}

.b22-single-product-short-desc {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    margin-bottom: 2rem !important;
}


.b22-single-product-tabs {
    margin-top: 4rem !important;
    background: transparent !important;
    border-top: 1px solid #e5e5e5 !important;
    padding-top: 3rem !important;
}

/* ==========================================================================
   4. ESTILOS DE LA PÁGINA DE TIENDA (/TIENDA/ ARCHIVE-PRODUCT.PHP)
   ========================================================================== */

.b22-page-header {
    color: #0d0d0d;
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    text-align: center !important;
    border-bottom: 0px solid #222222;
}

.b22-page-header .b22-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.b22-page-title {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    text-align: center !important;
    width: 100%;
}

.b22-page-desc {
    font-size: 1.15rem;
    color: #a1a1aa;
    max-width: 680px;
    margin: 0 auto 1.5rem auto !important;
    text-align: center !important;
    line-height: 1.5;
    width: 100%;
}

.b22-shop-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 0px solid #eeeeee;
}

@media (min-width: 640px) {
    .b22-shop-toolbar {
        flex-direction: row;
    }
}

.b22-shop-result-count {
    font-size: 0.875rem;
    color: #666666;
    text-transform: uppercase;
    font-weight: 600;
}

.b22-shop-ordering select {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border: 1px solid #cccccc;
    border-radius: 0.375rem;
    background-color: #ffffff;
    outline: none;
    cursor: pointer;
}

@media (min-width: 1200px) {
    .b22-shop-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================================================
   5. ESTILOS DEL SLIDER / HERO CAROUSEL
   ========================================================================== */

.b22-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden !important;
    background-color: #0d0d0d;
    margin-top: 0 !important;
    margin-bottom: 0rem;
}

.b22-slider-wrapper {
    display: flex;
    width: 100%;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.b22-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.b22-slide {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    position: relative;
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-size: cover;
    background-position: center top !important;
    color: #ffffff;
    text-align: left;
    padding: 0;
}

@media (min-width: 768px) {
    .b22-slide {
        min-height: calc(100vh - 60px);
        background-position: center top !important;
    }
}

.b22-slide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}

/* Contenedor del Slide Card (Top-Left y Sticky dentro del Slider) */
.b22-slide-content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    flex: 1 1 auto;
    min-height: calc(100vh - 60px);
    padding: 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    pointer-events: none;
}

.b22-slide-card-box {
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    align-self: flex-start;
    background: rgba(25, 25, 25, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    border-radius: 4px;
    max-width: 380px;
    text-align: left;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: auto;
}

.b22-slide-card-box-ecos {
    position: relative !important;
    margin: auto !important;
    background: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    max-width: 580px;
    text-align: center;
    color: #ffffff;
    border: 0px;
    z-index: 10;
    pointer-events: auto;
    transform: translateY(-5vh) !important;
}

body.admin-bar .b22-slide-card-box {
    top: 107px;
}

.b22-slide-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 1rem 0;
    color: #00ffbb;
    line-height: 1.25;
    text-transform: uppercase;
}

.b22-slide-card-title span {
    font-weight: 800;
}

.b22-slide-card-desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: #f4f4f5;
    margin-bottom: 1.25rem;
}

.b22-btn-outline {
    display: inline-block;
    padding: 0.85rem 2.25rem;
    border: 1.5px solid #ffffff;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.b22-btn-outline:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

@media (max-width: 768px) {
    .b22-slide-content-container {
        padding: 1.25rem 1rem !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .b22-slide-card-box {
        padding: 1.25rem 1.25rem;
        max-width: 310px;
        text-align: left !important;
        top: 60px !important;
    }

    body.admin-bar .b22-slide-card-box {
        top: 106px !important;
    }

    .b22-slide-card-title {
        font-size: 1.15rem;
    }

    .b22-slide-card-desc {
        font-size: 0.85rem;
    }
}

.b22-slide-tag {
    display: inline-block;
    background-color: #00ffbb;
    color: #000000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.b22-slide-title {
    font-size: 2.25rem;
    font-weight: 900;
    margin: 0 0 1rem 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .b22-slide-title {
        font-size: 3.5rem;
    }
}

.b22-slide-desc {
    font-size: 1rem;
    color: #d1d5db;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.b22-btn-primary {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    font-size: 0.875rem;
    font-weight: 800;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.b22-btn-primary:hover {
    background-color: #00ffbb;
    color: #000000;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. SECCIÓN DE PRODUCTOS DESTACADOS
   ========================================================================== */

.b22-products-section {
    padding: 0rem 0;
}

.b22-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.b22-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.b22-section-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    color: #000000;
}

.b22-section-subtitle {
    font-size: 0.875rem;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.b22-products-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0rem;
}

@media (min-width: 640px) {
    .b22-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .b22-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}

.b22-product-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 0rem;
}

.b22-product-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
    aspect-ratio: 3 / 4;
}

.b22-product-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.b22-product-card:hover .b22-product-img-wrap img {
    transform: scale(1.06);
}

/* Card flotante sutil sobre la imagen con Glassmorphism (estilo Slider Home) */
.b22-product-info {

    bottom: 0rem;
    left: 0rem;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: 2;
    background: #000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.55rem 0.5rem;
    display: flex;
    flex-direction: column;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
    margin-top: -3px;
}

.b22-product-card:hover .b22-product-info {
    background: rgba(15, 15, 15, 1);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

.b22-product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.68rem;
    font-weight: 700;
    margin: .35rem 0 0.35rem 0;
    line-height: 1.3;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
}

.b22-product-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.b22-product-title a:hover {
    color: #00ffbb;
}

.b22-product-price {
    font-size: 0.85rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.85rem;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    margin: 0 auto;
}

.b22-product-price del {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    font-weight: 400;
}

.b22-product-price ins {
    text-decoration: none;
    color: #00ffbb;
}

.b22-product-btn-wrap {
    width: 100%;
    margin: 0;
}

.b22-product-btn-wrap a.button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.65rem 0.85rem;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    border: none;
    box-sizing: border-box;
}

.b22-product-btn-wrap a.button:hover {
    background-color: #00ffbb;
    color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 187, 0.35);
}

@media (max-width: 768px) {
    /* Contenedor de productos al 100% de ancho sin bordes laterales en móvil */
    .b22-products-section .b22-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Barra de conteo y filtros de archivo con margen cómodo */
    .b22-shop-toolbar {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box !important;
    }

    .b22-page-header {
        padding: 0.75rem 1rem 1.5rem 1rem !important;
        text-align: center !important;
    }

    .b22-page-header .b22-container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        text-align: center !important;
        align-items: center !important;
    }

    .b22-page-header .b22-page-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        text-align: center !important;
    }

    .b22-page-header .b22-page-desc {
        font-size: 0.95rem !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Grid al 100% en columna única */
    .b22-products-grid,
    .b22-shop-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Cada tarjeta ocupa el 100% del ancho del dispositivo */
    .b22-product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* Las imágenes ocupan toda la pantalla de borde a borde */
    .b22-product-img-wrap {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        display: block !important;
    }

    .b22-product-img-wrap img,
    .b22-product-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
    }

    /* Pleca negra 100% de pantalla exacta en todos los celulares */
    .b22-product-info {
        position: relative !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #000000 !important;
        box-sizing: border-box !important;
        padding: 0.9rem 1rem !important;
        text-align: center !important;
    }

    .b22-product-title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.85rem !important;
        text-align: center !important;
        margin: 0 0 0.4rem 0 !important;
        color: #ffffff !important;
    }

    .b22-product-price {
        font-size: 0.9rem !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        color: #ffffff !important;
    }

    .b22-product-btn-wrap a.button {
        padding: 0.65rem 0.85rem !important;
        font-size: 0.72rem !important;
    }
}

/* ==========================================================================
   7. ESTILOS DEL FOOTER
   ========================================================================== */

.b22-ftr-footer {
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    font-size: 0.75rem;
    line-height: 1.5;
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid #e5e5e5;
    text-transform: uppercase;
    margin-top: auto;
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}

.b22-ftr-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 2rem;
}

.b22-ftr-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.5rem;
    margin-bottom: 4rem;
}

@media (min-width: 640px) {
    .b22-ftr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .b22-ftr-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }
}

/* Estilos base de columnas del footer */
.b22-ftr-grid > div {
    display: flex;
    flex-direction: column;
}

.b22-ftr-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #000000;
}

.b22-ftr-help-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 0px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.b22-ftr-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #000000;
    text-decoration: none;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.b22-ftr-contact-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.b22-ftr-status {
    font-size: 0.6875rem;
    color: #b45309;
    font-weight: 700;
    margin-left: 0.35rem;
}

.b22-ftr-schedule {
    font-size: 0.6875rem;
    color: #666666;
    margin: 0;
    text-transform: uppercase;
}

.b22-ftr-list {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.b22-ftr-list li {
    margin-bottom: 0.625rem;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
}

.b22-ftr-list a {
    color: #000000;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

.b22-ftr-list a:hover {
    color: #666666;
}

.b22-ftr-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* En Escritorio (>= 640px): Todo alineado a la izquierda */
@media (min-width: 640px) {
    .b22-ftr-grid > div {
        align-items: flex-start;
        text-align: left;
    }

    .b22-ftr-grid img,
    .b22-ftr-logo-white {
        margin: 0 !important;
        display: block !important;
    }

    .b22-ftr-title {
        text-align: left !important;
        width: 100%;
    }

    .b22-ftr-help-block {
        align-items: flex-start;
        text-align: left;
    }

    .b22-ftr-schedule {
        text-align: left;
    }

    .b22-ftr-list {
        text-align: left !important;
        align-items: flex-start;
    }

    .b22-ftr-list li {
        text-align: left !important;
    }

    .b22-ftr-socials {
        justify-content: flex-start;
    }
}

/* En Celular (< 640px): Todo perfectamente centrado */
@media (max-width: 639px) {
    .b22-ftr-footer {
        text-align: center !important;
    }

    .b22-ftr-grid {
        text-align: center !important;
        gap: 3rem;
    }

    .b22-ftr-grid > div {
        align-items: center !important;
        text-align: center !important;
    }

    .b22-ftr-grid img,
    .b22-ftr-logo-white {
        margin: 0 auto !important;
        display: block !important;
    }

    .b22-ftr-title {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    .b22-ftr-help-block {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .b22-ftr-schedule {
        text-align: center !important;
        width: 100% !important;
    }

    .b22-ftr-list {
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .b22-ftr-list li {
        text-align: center !important;
        width: 100% !important;
    }

    .b22-ftr-socials {
        justify-content: center !important;
        width: 100% !important;
    }

    .b22-ftr-bottom {
        text-align: center !important;
        align-items: center !important;
    }

    .b22-ftr-legal-links {
        justify-content: center !important;
        text-align: center !important;
    }

    .b22-ftr-right-meta {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center !important;
        text-align: center !important;
    }
}

.b22-ftr-social-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.b22-ftr-social-icon:hover {
    opacity: 0.75;
    transform: scale(1.05);
}

.b22-ftr-social-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.b22-ftr-bottom {
    border-top: 1px solid #e5e5e5;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .b22-ftr-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.b22-ftr-legal-links {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.b22-ftr-legal-links li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.b22-ftr-legal-links a {
    color: #71717a;
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
}

.b22-ftr-legal-links a:hover {
    color: #000000;
}

.b22-ftr-country {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

/* ==========================================================================
   8. ESTILOS PARA PÁGINAS ESTÁTICAS DE WORDPRESS (PAGE.PHP Y OTROS TEMPLATES)
   ========================================================================== */

.b22-content-section {
    max-width: 1360px;
    margin: 0 auto;
    padding: 1rem 1.5rem 5rem 1.5rem;
    background-color: transparent;
    width: 100%;
}

.b22-page-main {
    background-color: #fafafa;
    min-height: 60vh;
}

.b22-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.b22-page-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.b22-page-content h1,
.b22-page-content h2,
.b22-page-content h3,
.b22-page-content h4 {
    color: #18181b;
    font-weight: 800;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Legal & FAQ Styling */

.b22-legal-content h2,
.b22-legal-content h3,
.b22-faq-content h2,
.b22-faq-content h3 {
    color: #000000;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.b22-legal-content p,
.b22-faq-content p {
    margin-bottom: 1.5rem;
}


/* ==========================================================================
   9. ESTILOS PARA LA PÁGINA DE CONTACTO (PAGE-CONTACTO.PHP)
   ========================================================================== */

.b22-contact-page {
    background-color: #fafafa;
    padding-bottom: 5rem;
}

.b22-contact-hero {
    padding: 2.5rem 0 1.5rem 0;
}

.b22-contact-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #18181b;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.b22-contact-subtitle {
    font-size: 1rem;
    color: #52525b;
    max-width: 650px;
    line-height: 1.6;
}

.b22-contact-main-section {
    padding-top: 1rem;
}

.b22-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .b22-contact-grid {
        grid-template-columns: 1.25fr 1fr;
        gap: 3.5rem;
        align-items: start;
    }
}

/* Tarjeta de Formulario y Tarjetas de Información */

.b22-contact-card,
.b22-info-card {
    background-color: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 1rem;
    padding: 2.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.75rem;
}

.b22-card-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: #000000;
    margin: 0 0 0.4rem 0;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.b22-card-subheading {
    font-size: 0.875rem;
    color: #71717a;
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

/* Campos de Formulario Nativo */

.b22-form-row-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .b22-form-row-2col {
        grid-template-columns: 1fr 1fr;
    }
}

.b22-form-group {
    margin-bottom: 1.25rem;
}

.b22-form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #18181b;
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}

.b22-form-group input,
.b22-form-group select,
.b22-form-group textarea {
    width: 100%;
    border: 1px solid #d4d4d8;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #18181b;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    font-family: inherit;
}

.b22-form-group input:focus,
.b22-form-group select:focus,
.b22-form-group textarea:focus {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.b22-btn-submit-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.b22-btn-submit-contact:hover {
    background-color: #27272a;
    transform: translateY(-2px);
}

/* Tarjeta Destacada WhatsApp */

.b22-highlight-card {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    display: flex !important;
    gap: 1.25rem !important;
    align-items: flex-start !important;
}

.b22-info-icon-wrap {
    background-color: #25d366;
    color: #ffffff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b22-info-text h3 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #065f46;
    margin: 0 0 0.35rem 0;
    letter-spacing: 0.02em;
}

.b22-info-text p {
    font-size: 0.8125rem;
    color: #047857;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.b22-whatsapp-btn {
    display: inline-block;
    background-color: #25d366;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.b22-whatsapp-btn:hover {
    background-color: #1eb854;
    transform: translateY(-1px);
}

/* Filas de Información de Correo y Horario */

.b22-info-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.b22-info-row-icon {
    color: #000000;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.b22-info-row-body h4 {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #000000;
    margin: 0 0 0.25rem 0;
    letter-spacing: 0.03em;
}

.b22-info-row-body p {
    font-size: 0.875rem;
    color: #52525b;
    margin: 0 0 0.2rem 0;
}

.b22-info-row-body a {
    color: #000000;
    font-weight: 700;
    text-decoration: none;
}

.b22-info-row-body a:hover {
    text-decoration: underline;
}

.b22-info-divider {
    height: 1px;
    background-color: #e4e4e7;
    margin: 1.25rem 0;
}

/* Tarjeta Preguntas Frecuentes Rápidas */

.b22-faq-link-card h4 {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #000000;
    margin: 0 0 1rem 0;
    letter-spacing: 0.03em;
}

.b22-contact-quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.b22-contact-quick-links li {
    border-bottom: 1px solid #f4f4f5;
}

.b22-contact-quick-links li:last-child {
    border-bottom: none;
}

.b22-contact-quick-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    color: #27272a;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.b22-contact-quick-links a:hover {
    color: #00b383;
}

/* ==========================================================================
   Página Legal (Política de Privacidad, Términos, etc.)
   ========================================================================== */

.b22-legal-page {
    background-color: #fafafa;
    min-height: 60vh;
    padding: 4rem 1.5rem;
}

.b22-legal-container {
    max-width: 850px;
    margin: 0 auto;
    /* Sin contenedor blanco ni sombras según requerimiento */
}

.b22-legal-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #3f3f46;
}

.b22-legal-content h2,
.b22-legal-content h3 {
    color: #18181b;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Acordeón de Preguntas Frecuentes (FAQ) Minimalista
   ========================================================================== */

.b22-accordion {
    max-width: 900px;
    margin: 0 auto;
    font-family: inherit;
}

.b22-accordion-item {
    border-bottom: 1px solid #e4e4e7;
}

.b22-accordion-title {
    padding: 0.3rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #18181b;
    cursor: pointer;
    list-style: none;
    /* Oculta la flecha por defecto en Safari/Firefox */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
    text-transform: uppercase;
}

.b22-accordion-title h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

.b22-accordion-title h2 i {
    font-size: 0.95rem;
    color: #111827;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

/* Ocultar la flecha por defecto en Chrome */

.b22-accordion-title::-webkit-details-marker {
    display: none;
}

/* Icono de "+" personalizado */
.b22-accordion-title::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: #71717a;
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.b22-accordion-item[open] .b22-accordion-title {
    color: #000000;
}

/* El '+' rota 45 grados de forma suave y fluida */
.b22-accordion-item[open] .b22-accordion-title::after {
    transform: rotate(45deg);
    color: #18181b;
}

.b22-accordion-content {
    padding-bottom: 1.25rem;
    color: #52525b;
    font-size: 0.92rem;
    line-height: 1.7;
}

.b22-accordion-content p {
    margin: 0;
    font-size: 0.85rem;
}

.b22-accordion-content p:last-child {
    margin-bottom: 0;
}

.b22-accordion-content a {
    color: #18181b;
    text-decoration: underline;
}

/* ==========================================================================
   Estilos de Producto Individual (Diseño tipo Berly22)
   ========================================================================== */

/* 1. Layout Principal (Dos columnas) */

.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
    margin-top: 2rem;
}

.woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}

@media (max-width: 768px) {

    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary.entry-summary {
        width: 100% !important;
    }
}

/* 2. Textos (Título, SKU, Precio, Descripción) */

.woocommerce div.product .product_title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.2rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.woocommerce div.product .product_meta .sku_wrapper {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 2rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 0rem;
}

.woocommerce div.product p.price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
    margin: 0.5rem 0;
}

/* Separador horizontal debajo del precio */

/* 3. Plugin de Personalización (Advanced Product Fields WAPF) */

.single_variation_wrap,
.wapf,
.wapf-wrapper,
.wapf-field-group,
.wapf-field-row {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    float: none !important;
}

.woocommerce-variation-add-to-cart,
.variations_button,
.b22-field-add-to-cart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0rem;
}

.b22-image-upload-wrap {
    width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    margin: 0.75rem 0 1rem 0 !important;
    background: #fafafa !important;
    border: 1.5px dashed #d1d5db !important;
    border-radius: 10px !important;
    padding: 2.75rem 1rem 1rem 1rem !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Badge header "✏ Personaliza tu pedido aquí" */
.b22-image-upload-wrap::before {
    content: '✏  Personaliza tu pedido aquí';
    display: flex;
    align-items: center;
    background: #111827;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}

.b22-upload-label {
    display: block !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #111827 !important;
    margin-bottom: 0.3rem !important;
}

.b22-upload-hint {
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

.b22-upload-input {
    width: 100% !important;
    cursor: pointer !important;
    font-size: 0.82rem !important;
}

.wapf-wrapper {
    margin-bottom: 1rem;
    background: #fafafa;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    padding: 2.75rem 0.5rem 0.5rem 0.5rem;
    position: relative;
    overflow: hidden;
}

/* Badge header "✏ Personaliza tu pedido" */
.wapf-wrapper::before {
    content: '✏  Personaliza tu pedido';
    display: flex;
    align-items: center;
    gap: 6px;
    background: #111827;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}

/* Ocultar título duplicado que genera WAPF */
.wapf-wrapper .wapf-section-title,
.wapf-wrapper .wapf-field-html h3,
.wapf-wrapper .wapf-field-html h4,
.wapf-wrapper .wapf-field-heading h3,
.wapf-wrapper .wapf-field-heading h4 {
    display: none !important;
}

/* Filas y contenedores de campos WAPF */
.wapf-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    width: 100% !important;
}

.wapf-field-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    padding: 0 5px 10px 5px;
}


/* Etiquetas de los campos */
.wapf-field-label label {
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.3rem !important;
    display: block !important;
}

.wapf-field-label abbr.required {
    color: #ef4444 !important;
    text-decoration: none !important;
    margin-left: 2px;
}

/* Inputs y Selects dentro de WAPF */
input.wapf-input[type="text"],
select.wapf-input,
textarea.wapf-input {
    width: 100% !important;
    height: 42px !important;
    min-height: unset !important;
    padding: 0 12px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    color: #111827 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: inherit !important;
    resize: none !important;
    line-height: 42px !important;
}

input.wapf-input[type="text"]:focus,
select.wapf-input:focus,
textarea.wapf-input:focus {
    border-color: #111827 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.07) !important;
}

/* Descripción / Texto de ayuda */
.wapf-field-description {
    font-size: 0.72rem !important;
    color: #7d8289 !important;
    margin-top: 0.25rem !important;
    font-style: italic !important;
    line-height: 1.3 !important;
}







/* 4. Botón de Agregar al carrito y Cantidad */

.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0rem;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0em;
}

.woocommerce div.product form.cart .quantity {
    margin: 0 !important;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 64px !important;
    height: 48px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 6px !important;
    text-align: center !important;
    background: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-right: 30px;
}

.woocommerce div.product form.cart .quantity input.qty:focus {
    border-color: #111827 !important;
    outline: none !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.button,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
    flex: 1 !important;
    height: 48px !important;
    background: #111827 !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover {
    background: #00ffbb !important;
    background-color: #00ffbb !important;
    color: #000000 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* 5. Pestañas de WooCommerce (Convertidas a un diseño más vertical) */

.woocommerce div.product .woocommerce-tabs {
    margin-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    list-style: none;
    border-bottom: 1px solid #eee;
    margin: 0;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 1rem 0;
    color: #000;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

/* Añadir un signo + antes del texto de la pestaña */

.woocommerce div.product .woocommerce-tabs ul.tabs li a::before {
    content: '+';
    margin-right: 10px;
    font-weight: bold;
}

/* Corrección de columnas 50/50 - Layout Específico Berly22 */

/* ==========================================================================
   Diseño de Documento Legal / Texto Plano (Términos y Condiciones / FAQ)
   ========================================================================== */

.b22-legal-doc {
    max-width: 900px;
    margin: 0 auto;
    color: #3f3f46;
    font-family: inherit;
}

.b22-legal-intro {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e4e4e7;
}

.b22-legal-intro h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #18181b;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.b22-legal-intro p {
    font-size: 1.1rem;
    color: #52525b;
}

.b22-legal-intro a {
    color: #18181b;
    font-weight: 600;
    text-decoration: underline;
}

.b22-legal-section {
    margin-bottom: 3rem;
}

.b22-legal-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.b22-legal-section p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.b22-legal-section p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Tipografía General
   ========================================================================== */
h1,
.product_title,
.b22-slide-title,
.b22-legal-title,
.b22-section-title,
.elementor-heading-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Estilos Extraídos (Limpieza de estilos inline)
   ========================================================================== */

/* --- 404 Page --- */

.b22-404-page {
    background-color: #fafafa;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.b22-404-container {
    text-align: center;
    max-width: 600px;
}

.b22-ghost-wrapper {
    margin-bottom: 2rem;
}

.b22-ghost-svg {
    animation: floatGhost 3s ease-in-out infinite;
}

.b22-404-btn {
    display: inline-block;
    background-color: #18181b;
    color: #ffffff;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: 2px;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.b22-404-btn:hover {
    background-color: #3f3f46;
}



.oculto {
    display: none !important;
}

/* ==========================================================================
   Jerarquía y Diseño del Producto Individual (Single Product)
   ========================================================================== */

/* 1. Título */
.b22-field-title h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.3rem 0;
    color: #111827;
    letter-spacing: -0.01em;
}

/* 2. Meta Row (SKU + Categoría en línea) */
.b22-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.2rem;
}

.b22-field-sku,
.b22-field-category {
    margin-bottom: 0;
}

.b22-meta-row strong {
    color: #111827;
    font-weight: 700;
}

.b22-meta-row a {
    color: #00e676;
    text-decoration: none;
}

.b22-meta-row a:hover {
    text-decoration: underline;
}

/* 3. Extracto (Descripción Corta) */
.b22-field-excerpt,
.b22-field-excerpt .woocommerce-product-details__short-description,
.b22-field-excerpt p {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #374151;
    margin-top: 5px;
    margin-bottom: 0rem;
}

/* 4. Precio */
.b22-field-price,
.b22-field-price .price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 0.25rem 0;
    display: block;
    letter-spacing: -0.01em;
}

/* Ranura para TALLA / Variaciones (Debajo del precio en Columna Central) */
.b22-talla-slot {
    width: 100% !important;
    margin: 1rem 0 1.25rem 0 !important;
}

.b22-talla-slot:empty {
    display: none !important;
    margin: 0 !important;
}

.b22-reset-proxy {
    display: none;
    text-align: right !important;
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    margin-top: 0.25rem !important;
}

.b22-talla-slot .b22-color-swatches-box,
.b22-talla-slot .b22-size-swatches-box {
    background: #f4f4f6 !important;
    border-radius: 0px !important;
    padding: 0.5rem 1rem !important;
    margin-bottom: 0rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.b22-talla-slot .b22-swatches-label {
    min-width: 60px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #111827 !important;
    margin-right: 10px;
}

/* Ocultar tabla de variaciones vaciada en la Buy Box */
.b22-product-buybox-col table.variations,
.b22-product-buybox-col .reset_variations {
    display: none !important;
}

/* ==========================================================================
   CAJA DE COMPRA (BUY BOX) - ESTILO MERCADO LIBRE / AMAZON
   ========================================================================== */

.b22-product-buybox-col {
    width: 100% !important;
}

.b22-buybox-card {
    background: #ffffff !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    box-sizing: border-box !important;
}

/* Envío en Buy Box */
.b22-buybox-shipping {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.b22-buybox-icon {
    color: #00b383 !important;
    font-size: 1.25rem !important;
    margin-top: 0.2rem !important;
    flex-shrink: 0 !important;
}

.b22-shipping-info {
    display: flex !important;
    flex-direction: column !important;
}

.b22-shipping-highlight {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #00b383 !important;
    display: block !important;
}

.b22-shipping-sub {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    margin-top: 0.15rem !important;
    display: block !important;
}

/* Stock disponible */
.b22-buybox-stock {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #111827 !important;

}

.b22-stock-icon {
    color: #00b383 !important;
    font-size: 0.95rem !important;
}

/* Evitar que WooCommerce colapse el buy box al limpiar variación */
.b22-product-buybox-col .single_variation_wrap {
    display: block !important;
}

/* Beneficios y sellos de confianza */
.b22-buybox-benefits {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f3f4f6 !important;
}

.b22-benefit-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    color: #4b5563 !important;
}

.b22-benefit-icon {
    color: #6b7280 !important;
    font-size: 0.95rem !important;
    margin-top: 0.15rem !important;
    flex-shrink: 0 !important;
}

.b22-benefit-item strong {
    color: #111827 !important;
}

/* 6. Botón Agregar a Carrito y Formulario en Buy Box */
.b22-field-add-to-cart {
    margin-top: 0rem !important;
    padding-top: 0 !important;
    border: none !important;
    width: 100% !important;
}

/* 7. Acordeón de Características Generales (Reusa el CSS global de .b22-accordion) */
.b22-product-accordion {
    margin-top: 0.5rem;
    width: 100%;
}

/* Grilla de 2 columnas para el acordeón de Detalles */
.b22-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.b22-details-col-left,
.b22-details-col-right {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #52525b;
}

.b22-details-col-left p,
.b22-details-col-right p {
    margin: 0 0 0.4rem 0 !important;
    font-size: 0.85rem !important;
}

.b22-details-col-left p:last-child,
.b22-details-col-right p:last-child {
    margin-bottom: 0 !important;
}

.b22-details-col-right strong {
    color: #111827;
    font-weight: 600;
}

@media (max-width: 768px) {
    .b22-details-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Columnas del Grid - Layout */
.b22-product-gallery-col,
.b22-product-summary-col {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* ===== FIX DEFINITIVO: Imagen de producto al 100% de su columna ===== */
.b22-product-gallery-col .woocommerce-product-gallery,
.b22-product-gallery-col div.images,
.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.b22-product-gallery-col .flex-viewport {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0px !important;
}

.b22-product-gallery-col .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    margin: 0 !important;
}

/* Desactivar clic, lupa y zoom en las fotos de producto */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

.woocommerce-product-gallery__image a {
    pointer-events: none !important;
    cursor: default !important;
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
    cursor: default !important;
}

/* ==========================================================================
   ESTILOS SWATCHES DE COLOR (Banderola gris + Círculos + Tooltip)
   ========================================================================== */

.b22-color-swatches-box {
    background: #f3f4f6;
    border-radius: 0px;
    padding: 0.4rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.4rem;
    width: 100%;
    box-sizing: border-box;
}

.b22-swatches-label {
    font-weight: 700;
    font-size: 0.88rem;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 60px;
}

.b22-swatches-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.b22-swatch-item {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.b22-swatch-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Hover y Estado Activo del Círculo */
.b22-swatch-item:hover .b22-swatch-circle {
    transform: scale(1.1);
    border-color: #9ca3af;
}

.b22-swatch-item.active .b22-swatch-circle {
    transform: scale(1.1);
    border: 2.5px solid #111827 !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.15) !important;
}

/* Tooltip sobre el Círculo de Color o Figura */
.b22-swatch-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #111827;
    color: #ffffff;
    padding: 5px 11px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.b22-swatch-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}

/* Mostrar tooltip ÚNICAMENTE al pasar el cursor (hover) */
.b22-swatch-item:hover .b22-swatch-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Swatches de Figuras de Póker */
.b22-swatch-circle.b22-swatch-poker {
    background-color: #ffffff;
}

.b22-swatch-poker-item.active .b22-swatch-circle {
    border-color: #111827 !important;
    border-width: 2.5px !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    transform: scale(1.1) !important;
}

.b22-poker-icon {
    display: block;
    pointer-events: none;
    line-height: 1;
}

.b22-poker-red {
    color: #ef4444;
}

.b22-poker-black {
    color: #111827;
}

.b22-poker-letter {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: #111827;
    font-family: inherit;
    user-select: none;
}

/* Ocultar la etiqueta repetida de la tabla de variaciones cuando se muestran los swatches */
.woocommerce div.product form.cart table.variations th.label {
    display: none !important;
}

.woocommerce div.product form.cart table.variations td.value {
    padding: 0 !important;
}

/* Ocultar el dropdown select de variaciones de color cuando los swatches están activos */
.b22-hidden-select-wrap,
.b22-hidden-select-wrap select,
.woocommerce div.product form.cart table.variations select#pa_color,
.woocommerce div.product form.cart table.variations tr select[name*="color"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ==========================================================================
   ESTILOS PARA PRODUCTOS DÚO / PAQUETES (SUB-SECCIONES EN WAPF)
   ========================================================================== */

/* Tarjetas separadas para cada prenda dentro del producto Dúo */
.wapf-wrapper .wapf-field-group {
    border: 0px solid #e5e7eb;
    border-radius: 0px;
    padding: 0.2rem;

    box-sizing: border-box;
}

.wapf-wrapper .wapf-field-group:last-child {
    margin-bottom: 0;
}

/* Encabezados de Sub-sección (Ej: 👕 PLAYERA 1 / 👕 PLAYERA 2) */
.wapf-field-group-title,
.wapf-section-title,
.wapf-field-heading h3,
.wapf-field-heading h4,
.wapf-field-html h3,
.wapf-field-html h4 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid #111827 !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   ESTILOS SWATCHES DE TALLA (Banderola gris + Círculos con Texto)
   ========================================================================== */

.b22-size-swatches-box {
    background: #f3f4f6;
    padding: 0.3rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.b22-size-circle {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 19px;
    white-space: nowrap;
    border: 2px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    text-transform: uppercase;
    user-select: none;
}

.b22-swatch-size:hover .b22-size-circle {
    border-color: #111827;
    background: #f9fafb;
    transform: scale(1.08);
}

.b22-swatch-size.active .b22-size-circle {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.2) !important;
}

/* Ocultar dropdowns de talla sobrantes */
.woocommerce div.product form.cart table.variations select#pa_talla,
.woocommerce div.product form.cart table.variations tr select[name*="talla"],
.woocommerce div.product form.cart table.variations select#pa_size,
.woocommerce div.product form.cart table.variations tr select[name*="size"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Encabezado separador visual para productos Dúo (Prenda 1 / Prenda 2) */
.b22-duo-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #111827;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bloque de Variación — completamente oculto (WooCommerce lo necesita en el DOM pero no lo mostramos) */
.b22-product-buybox-col .woocommerce-variation.single_variation,
.b22-product-buybox-col .single_variation_wrap .single_variation {
    display: none !important;
}

.single_variation .woocommerce-variation-price .price {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

.single_variation .woocommerce-variation-availability,
.single_variation .woocommerce-variation-availability .stock {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    margin-top: 0.25rem !important;
}

.b22-ftr-footer img {
    height: 40px;
}

/* All WooCommerce buttons hover */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #content input.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #00ffbb !important;
    background: #00ffbb !important;
    color: #000000 !important;
    border-color: #00ffbb !important;
}

/* Asegurar que el botón inactivo se vea igual de oscuro */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled:hover {
    opacity: 1 !important;
    background: #111827 !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

/* ==========================================================================
   PAGINACIÓN GLOBAL (WooCommerce y Blog)
   ========================================================================== */

.woocommerce nav.woocommerce-pagination,
.b22-pagination {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
    text-align: center !important;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.b22-pagination ul.page-numbers {
    display: inline-flex !important;
    gap: 0.75rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    /* Quita el borde feo por defecto de WC */
    align-items: center;
    justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li,
.b22-pagination ul.page-numbers li {
    border: none !important;
    /* Quita los bordes entre LIs de WC */
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.b22-pagination ul.page-numbers li a,
.b22-pagination ul.page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 0.5rem !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.b22-pagination ul.page-numbers li span.current {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.2) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.b22-pagination ul.page-numbers li a:hover {
    background-color: #00ffbb !important;
    color: #000000 !important;
    border-color: #00ffbb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 255, 187, 0.3) !important;
}

.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
.b22-pagination ul.page-numbers li a.next,
.b22-pagination ul.page-numbers li a.prev {
    font-size: 1.2rem !important;
}

/* Iconos de Pago en el Footer (Blanco y Negro Minimalista) */
.b22-payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
}

.b22-payment-icons span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.b22-payment-icons span img,
.b22-payment-icons span svg {
    display: block;
    height: 22px;
    width: auto;
    filter: grayscale(100%);
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.b22-payment-icons span:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* ==========================================================================
   ALERTAS Y MENSAJES DE WOOCOMMERCE (Añadido al carrito, Errores, Info)
   ========================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    color: #111827 !important;
    padding: 1.25rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 2rem !important;
    display: block !important;
    clear: both !important;
    word-break: break-word !important;
}

/* Colores de acento según el tipo de mensaje */
.woocommerce-message {
    border-left: 5px solid #00ffbb !important;
    /* Éxito: Cyan de la marca */
}

.woocommerce-error {
    border-left: 5px solid #ef4444 !important;
    /* Error: Rojo suave */
}

.woocommerce-info {
    border-left: 5px solid #111827 !important;
    /* Info: Negro */
}

/* Ocultar iconos default anticuados de WC */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none !important;
}

/* Diseño del botón dentro de las alertas (Ej. "Ver carrito") */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    float: right;
    background-color: #111827 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.6rem 1.2rem !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: -0.3rem !important;
    /* Alineación vertical con el texto */
    margin-left: 1rem !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
    background-color: #00ffbb !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 187, 0.3) !important;
}

/* Ajustes para listas de errores (WC genera <ul> nativamente) */
ul.woocommerce-error {
    list-style: none !important;
    margin: 0 0 2rem 0 !important;
}

ul.woocommerce-error li {
    margin-bottom: 0.5rem !important;
}

ul.woocommerce-error li:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   ENLACES GLOBALES Y TABLAS DE WOOCOMMERCE
   ========================================================================== */

/* Limpiar enlaces globales (evitar el azul por defecto) */
a {
    color: #111827;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
    color: #00ffbb;
    text-decoration: none;
}

/* Forzar estilos en enlaces dentro de WooCommerce (Tablas, Carrito, Checkout, Pedidos) */
.woocommerce table.shop_table a,
.woocommerce-table a,
.woocommerce-cart-form a,
.woocommerce-checkout a,
.woocommerce-order a,
ul.order_details a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.woocommerce table.shop_table a:hover,
.woocommerce-table a:hover,
.woocommerce-cart-form a:hover,
.woocommerce-checkout a:hover,
.woocommerce-order a:hover,
ul.order_details a:hover {
    color: #00ffbb !important;
    text-decoration: none !important;
}

/* ==========================================================================
   DISEÑO PLANO TIPO SHOPIFY - RECIBO DE COMPRA (PÁGINA DE GRACIAS)
   ========================================================================== */

/* Ancho máximo en la página de Gracias / Pedido recibido */
body.woocommerce-order-received .b22-container,
body.woocommerce-order-received .b22-content-section,
body.woocommerce-order-received .woocommerce-order {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* Nombres de las secciones (Títulos H2) */
.woocommerce-order h2.woocommerce-column__title,
.woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-order h2 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    margin-top: 2.5rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: none !important;
}

/* 1. Cajas de resumen (Listas y Dirección) estilo tarjeta con borde fino */
.woocommerce-order ul.order_details,
.woocommerce-order ul.bacs_details,
.woocommerce-customer-details address {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 1rem 1.25rem !important;
    margin: 0 0 1rem 0 !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    /* Borde gris fino idéntico a la foto */
    border-radius: 6px !important;
    box-shadow: none !important;
    /* Sin sombras */
    font-style: normal !important;
    line-height: 1.6;
}

.woocommerce-order ul.order_details li,
.woocommerce-order ul.bacs_details li {
    flex: 1 1 180px;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    font-size: 0.8rem;
    color: #4b5563;
    text-transform: none !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

.woocommerce-order ul.order_details li strong,
.woocommerce-order ul.bacs_details li strong {
    display: block;
    font-size: 1rem;
    color: #111827;
    margin-top: 0.2rem;
    font-weight: 400;
}

/* Etiquetas más sutiles */
.woocommerce-order ul.order_details li::first-line,
.woocommerce-order ul.bacs_details li::first-line {
    font-size: 0.8rem;
    color: #6b7280;
}

/* 2. Tabla de Detalles del Pedido (Borde contenedor) */
.woocommerce-order table.shop_table {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 2rem !important;
    overflow: hidden;
    width: 100% !important;
}

.woocommerce-order table.shop_table thead th {
    background: #f9fafb !important;
    border: none !important;
    border-bottom: 1px solid #d1d5db !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 1rem 1.25rem !important;
}

.woocommerce-order table.shop_table tbody td {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1.25rem !important;
    vertical-align: top;
}

/* Detalles de las variaciones dentro de la tabla */
.woocommerce-order table.shop_table .wc-item-meta {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.woocommerce-order table.shop_table .wc-item-meta li {
    margin-bottom: 0.25rem;
}

.woocommerce-order table.shop_table .wc-item-meta li p {
    display: inline;
    margin: 0;
}

.woocommerce-order table.shop_table .wc-item-meta li strong {
    color: #111827;
    font-weight: 500;
}

/* 3. Zona inferior de la tabla (Subtotal, Total, etc) */
.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1rem 1.25rem !important;
    background: #ffffff !important;
}

.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
    border-bottom: none !important;
    font-size: 1.1rem;
    color: #111827;
    font-weight: 500;
}

.woocommerce-order table.shop_table tfoot th {
    font-weight: 400;
    color: #4b5563;
    text-align: right;
    /* Alineado a la derecha como en Shopify */
}

/* Limpiar estilos feos de WC por defecto */
.woocommerce-order ul.order_details li,
.woocommerce-order ul.bacs_details li {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Force H1 Notice specific rules to avoid theme conflict */
h1.woocommerce-notice.woocommerce-thankyou-order-received {
    font-size: 1.25rem !important;
    margin-top: 0 !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   UNIFICACIÓN DE CAJAS DE VARIACIONES (UNIFIED SWATCHES BOX)
   ========================================================================== */

/* 1. Convertir la tabla entera en una sola caja unificada gris */
.woocommerce div.product form.cart table.variations {
    background: #f3f4f6 !important;
    padding: 0.5rem 0 !important;
    display: none !important;
    width: 100% !important;
    margin-bottom: 0rem !important;
}

.woocommerce div.product form.cart table.variations tbody {
    display: block !important;
    width: 100% !important;
}

.woocommerce div.product form.cart table.variations tr {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    /* Línea divisoria súper tenue entre atributos */
}

.woocommerce div.product form.cart table.variations tr:last-child {
    border-bottom: none !important;
}

/* 2. Quitar el fondo gris y radio de las cajas individuales para que se fusionen */
.b22-color-swatches-box,
.b22-size-swatches-box {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.4rem 1rem !important;
    margin: 0 !important;
}

/* 3. Asegurar que el label y los botones se alineen bien dentro de la nueva estructura */
.b22-swatches-label {
    min-width: 120px;
    /* Consistencia en el ancho de la etiqueta izquierda */
}

/* ==========================================================================
   DISEÑO CARACTERÍSTICAS DEL BORDADO (ACF)
   ========================================================================== */
.b22-field-acf-bordado {
    width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 2rem !important;
    row-gap: 0.5rem !important;
    padding: 0rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
}

.b22-field-acf-bordado h3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-top: 0 !important;
    margin-bottom: 0rem !important;
}

.b22-field-acf-bordado .b22-bordado-item {
    font-size: 0.75rem;
    color: #4b5563;
    margin-bottom: 0 !important;
}

.b22-field-acf-bordado .b22-bordado-item strong {
    color: #111827;
    font-weight: 600;
}

editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 1.1rem;
}

.wp-block-woocommerce-checkout-order-summary-block {
    background-color: #ffffff;
    border-radius: 0;
}

/* Estilos para el encabezado de Gracias y Tu Pedido en el Recibo */
.b22-thankyou-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2.5rem !important;
}

.b22-thankyou-header h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

.b22-thankyou-header h2 {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   PÁGINA FILOSOFÍA (ESTILO DICCIONARIO)
   ========================================================================== */
.b22-page-filosofia {
    padding: 4rem 1rem;
    background-color: transparent;
    /* Hereda el fondo general de la web */
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.b22-custom-card {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    margin-top: -4rem;

    /* Contenedor estilo tarjeta minimalista tipo Shopify */

}


.b22-custom-width {
    max-width: 1200px;
    padding: 4rem 1rem;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;


    /* Contenedor estilo tarjeta minimalista tipo Shopify */

}


.dict-word {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    font-style: italic !important;
    color: #111827 !important;
    margin: 0 0 2rem 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
}

.dict-meanings {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2.5rem 0 !important;
}

.dict-meanings li {
    font-size: 1.35rem;
    font-weight: 400;
    color: #374151;
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 2rem;
    letter-spacing: -0.01em;
}

/* Números del diccionario */
.dict-meanings li:nth-child(1)::before {
    content: "1.";
}

.dict-meanings li:nth-child(2)::before {
    content: "2.";
}

.dict-meanings li::before {
    position: absolute;
    left: 0;
    color: #9ca3af;
    font-weight: 600;
}

.dict-separator {
    width: 50px;
    height: 4px;
    background: #111827;
    margin: 3rem 0;
    border-radius: 2px;
}

.dict-description p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 1.5rem;
}



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

.dict-description strong {
    color: #111827;
    font-weight: 700;
}

.dict-description em {
    font-style: italic;
    color: #374151;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .b22-custom-card {
        padding: 2.5rem 1.5rem;
    }

    .dict-word {
        font-size: 2.5rem !important;
    }

    .dict-meanings li {
        font-size: 1.15rem;
    }

    .dict-description p {
        font-size: 1rem;
    }
}

/* ==========================================================================
   BOTÓN CTA - PÁGINA FILOSOFÍA
   ========================================================================== */
.dict-cta {
    margin-top: 3rem;
    text-align: left;
}

.b22-dict-btn {
    display: inline-block;
    background-color: #111827;
    /* Dark matching the receipt button */
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 2.5rem;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.b22-dict-btn:hover {
    background-color: #374151;
    /* Lighter dark gray */
    color: #00ffbb !important;
    /* Brand cyan accent on hover */
    transform: translateY(-2px);
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .dict-cta {
        text-align: center;
    }

    .b22-dict-btn {
        width: 100%;
        box-sizing: border-box;
    }
}



/* ==========================================================================
   SECCIÓN DE LOGOS (MARKETPLACES)
   ========================================================================== */
.b22-marketplaces-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.b22-marketplace-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    height: 80px;
    /* Altura fija para uniformidad */
}

.b22-marketplace-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.b22-marketplace-logo {
    max-width: 100%;
    max-height: 40px;
    /* Tamaño máximo para que no se vean gigantes */
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    /* Los hace ver grises y elegantes como en tu foto */
    transition: filter 0.3s ease;
}

.b22-marketplace-card:hover .b22-marketplace-logo {
    filter: grayscale(0%) opacity(1);
    /* Toman color al pasar el ratón */
}

@media (max-width: 768px) {
    .b22-marketplaces-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móviles */
    }
}

/* ==========================================================================
   LAYOUT EXCLUSIVO PARA PÁGINAS INFORMATIVAS (Título + Subtítulo alineados sobre las tarjetas)
   ========================================================================== */
.b22-info-page-main {
    background-color: #fafafa !important;
    min-height: 65vh;
    padding: 2.5rem 1.5rem 5rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5%;
}

.b22-info-page-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.b22-info-page-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 0;
}

.b22-info-page-header .b22-page-title {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.75rem 0;
    color: #111827;
    line-height: 1.2;
}

.b22-info-page-header .b22-page-desc {
    font-size: 1.125rem;
    color: #6b7280;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .b22-info-page-main {
        padding: 1.5rem 1rem 3.5rem 1rem;
    }

    .b22-info-page-header {
        margin-bottom: 1.75rem;
    }

    .b22-info-page-header .b22-page-title {
        font-size: 1.75rem;
    }

    .b22-info-page-header .b22-page-desc {
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   GRILLA DE PREGUNTAS (TARJETAS)
   ========================================================================== */
.b22-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Forzar exactamente 2 columnas */
    gap: 1.5rem;
    margin-bottom: 4rem;
}

@media (max-width: 768px) {
    .b22-faq-grid {
        grid-template-columns: 1fr;
        /* 1 columna en celulares */
    }
}

/* ==========================================================================
   ESTILOS PÁGINA "TODO SOBRE TU BORDADO"
   ========================================================================== */

/* Contenedores Principales */
.b22-page-bordado-main {
    padding: 4rem 1rem;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.b22-faq-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 2.5rem;
    text-align: center;
    text-transform: none;
    letter-spacing: -0.02em;
}

/* Tarjetas FAQ */
.b22-faq-card {
    background: #ffffff;
    padding: 2rem;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.09);
}

.b22-faq-icon {
    font-size: 2rem;
    color: #111827;
    margin-bottom: 1rem;
}

.b22-faq-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-top: 0;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.b22-faq-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* Sección Marketplaces */
.b22-marketplaces-section {
    margin-top: 5rem;
    text-align: center;
    border-top: 1px solid #f3f4f6;
    padding-top: 3rem;
}

.b22-marketplaces-title {
    font-size: 0.9rem;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.b22-logo-sm {
    height: 30px !important;
}

/* ==========================================================================
   ESTILOS DESCRIPCIÓN POÉTICA (CHAT BUBBLE)
   ========================================================================== */
.b22-poetic-description {
    margin-top: 2rem;
    /* Sube la caja para invadir la foto principal */
    position: relative;
    z-index: 10;
    max-width: 100%;
    /* Más angosta para que quede al lado de los thumbnails */
    /* La empuja a la derecha */
    margin-right: 0.5rem;
}

.b22-poetic-header {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 0;
}

.b22-poetic-icon {
    color: #000000;
    /* Gris muy clarito para que contraste con la foto oscura 
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    Sombrita por si la foto es blanca */
}

.b22-poetic-label {
    font-size: 0.75rem;
    color: #000000;
    /* Gris muy clarito */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Sombrita para legibilidad */
}

.b22-poetic-bubble {

    padding: 0.6rem 1.25rem;
    border-radius: 0 20px 20px 20px;
    font-size: 0.85rem;
    /* Un poco más estilizado */
    color: #000000;
    line-height: 1.6;
    text-align: left;
    font-style: italic;
    position: relative;
    border: 1px solid #000;
    text-align: center;
    /* Sombra elegante para despegarla del fondo */
}

/* ==========================================================================
   VISIBILIDAD Y RESPONSIVIDAD PARA LA BURBUJA (MOBILE / DESKTOP)
   ========================================================================== */

@media (max-width: 768px) {
    .b22-hide-mobile {
        display: none !important;
    }

    /* Reseteo de estilos para la burbuja en móvil (sin efecto flotante, texto gris normal) */
    .b22-poetic-description.b22-hide-desktop {
        margin: 2rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    .b22-poetic-description.b22-hide-desktop .b22-poetic-label,
    .b22-poetic-description.b22-hide-desktop .b22-poetic-icon {
        color: #9ca3af !important;
        text-shadow: none !important;
    }
}

@media (min-width: 769px) {
    .b22-hide-desktop {
        display: none !important;
    }
}

/* ==========================================================================
   PANEL DE MI CUENTA (WOOCOMMERCE MY ACCOUNT - DISEÑO LIMPIO Y MINIMALISTA)
   ========================================================================== */

/* 1. Estructura y Distribución Principal */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

/* Limpiar floats heredados de WooCommerce */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-MyAccount-navigation::before,
.woocommerce-MyAccount-navigation::after,
.woocommerce-MyAccount-content::before,
.woocommerce-MyAccount-content::after {
    display: none !important;
}

.woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
}

.woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}

/* 2. Menú Lateral de Navegación */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--b22-white);
    border: 1px solid var(--b22-gray-300);
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--b22-gray-200);
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    padding: 0.95rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--b22-gray-700);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
    background: var(--b22-gray-100);
    color: var(--b22-dark);
    padding-left: 1.5rem;
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--b22-gray-100);
    color: var(--b22-dark);
    font-weight: 700;
    border-left: 4px solid var(--b22-dark);
}

/* 3. Avisos y Notificaciones */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
    background: var(--b22-white);
    border: 1px solid var(--b22-gray-300);
    border-left: 4px solid var(--b22-dark);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    color: var(--b22-dark);
    margin-bottom: 2rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: none;
}

/* 4. Tablas de Pedidos y Descargas */
.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--b22-white);
    border: 1px solid var(--b22-gray-300) !important;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.woocommerce-MyAccount-content table.shop_table th {
    background: var(--b22-gray-100);
    color: var(--b22-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--b22-gray-200);
    text-align: left;
}

.woocommerce-MyAccount-content table.shop_table td {
    padding: 1.15rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--b22-gray-200);
    color: var(--b22-dark);
    font-size: 0.9rem;
    vertical-align: middle;
}

.woocommerce-MyAccount-content table.shop_table tr:last-child td {
    border-bottom: none;
}

/* 5. Botones de Acción dentro de Tablas y Formularios */
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--b22-white) !important;
    color: var(--b22-dark) !important;
    border: 1px solid var(--b22-gray-300) !important;
    padding: 0.45rem 1rem !important;
    border-radius: 4px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    margin: 0.2rem !important;
}

.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content input.button:hover {
    background: var(--b22-dark) !important;
    color: var(--b22-white) !important;
    border-color: var(--b22-dark) !important;
}

.woocommerce-MyAccount-content a.button.pay,
.woocommerce-MyAccount-content button.button.pay {
    background: var(--b22-dark) !important;
    color: var(--b22-white) !important;
    border-color: var(--b22-dark) !important;
}

.woocommerce-MyAccount-content a.button.pay:hover {
    background: var(--b22-cyan) !important;
    color: var(--b22-dark) !important;
    border-color: var(--b22-cyan) !important;
}

/* Botón de Guardar en Formularios (Detalles de Cuenta y Direcciones) */
.woocommerce-MyAccount-content button[name="save_account_details"],
.woocommerce-MyAccount-content button[name="save_address"] {
    background: var(--b22-dark) !important;
    color: var(--b22-white) !important;
    border: none !important;
    padding: 0.85rem 2rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem !important;
}

.woocommerce-MyAccount-content button[name="save_account_details"]:hover,
.woocommerce-MyAccount-content button[name="save_address"]:hover {
    background: var(--b22-cyan) !important;
    color: var(--b22-dark) !important;
}

/* 6. Bloques de Direcciones */
.woocommerce-Address {
    background: var(--b22-white);
    border: 1px solid var(--b22-gray-300);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--b22-gray-200);
    padding-bottom: 0.75rem;
}

.woocommerce-Address-title h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--b22-dark);
    margin: 0;
}

.woocommerce-Address-title a.edit {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--b22-dark);
    text-transform: uppercase;
    text-decoration: underline;
}

.woocommerce-Address address {
    font-style: normal;
    color: var(--b22-gray-700);
    line-height: 1.7;
    font-size: 0.92rem;
}

/* 7. Formularios de Edición de Cuenta y Direcciones */
.woocommerce-MyAccount-content .form-row {
    margin-bottom: 1.25rem;
}

.woocommerce-MyAccount-content .form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--b22-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
}

.woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-MyAccount-content .form-row select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--b22-gray-300);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--b22-dark);
    background: var(--b22-white);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.woocommerce-MyAccount-content .form-row input.input-text:focus,
.woocommerce-MyAccount-content .form-row select:focus {
    border-color: var(--b22-dark);
    outline: none;
}

/* 8. Responsividad para Pantallas Móviles */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-MyAccount-navigation li {
        border-bottom: none;
        border-right: 1px solid var(--b22-gray-200);
        flex-shrink: 0;
    }

    .woocommerce-MyAccount-navigation li:last-child {
        border-right: none;
    }

    .woocommerce-MyAccount-navigation li.is-active a {
        border-left: none;
        border-bottom: 3px solid var(--b22-dark);
    }

    .woocommerce-MyAccount-content table.shop_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

/* ==============================================================================
   FONDO CELESTIAL & TEMÁTICA ECOS (BERLY22)
   Extraído de https://berly22.mx/ecos/
   ============================================================================== */

/* 1. Canvas Celestial interactivo (Lienzo 2D + Viñeta) */
.celestial-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0 !important;
    pointer-events: none;
    background: #000000 !important;
}

.celestial-canvas #three-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.celestial-canvas #three-canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.celestial-canvas .vignette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, #090b0e 100%);
    opacity: 0.75;
}

/* 2. Adaptación general de fondo y envoltura para Ecos */
body.b22-ecos-theme,
body.page-template-page-ecos,
body.page-ecos {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.b22-ecos-theme .b22-global-wrapper,
body.b22-ecos-theme #page-wrapper,
body.b22-ecos-theme .b22-main-content,
body.b22-ecos-theme #main-content,
body.page-template-page-ecos .b22-global-wrapper,
body.page-template-page-ecos #page-wrapper,
body.page-template-page-ecos .b22-main-content,
body.page-template-page-ecos #main-content,
body.page-ecos .b22-global-wrapper,
body.page-ecos #page-wrapper,
body.page-ecos .b22-main-content,
body.page-ecos #main-content {
    background: transparent !important;
    background-color: transparent !important;
}

body.b22-ecos-theme .b22-site-header,
body.page-template-page-ecos .b22-site-header,
body.page-ecos .b22-site-header {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 3. Badge y elementos de marca */
.b22-ecos-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.b22-ecos-brand-badge .b22-ecos-star {
    color: #46a088;
    text-shadow: 0 0 10px rgba(70, 160, 136, 0.6);
}

.b22-ecos-brand-badge .b22-ecos-sub {
    color: #a2aab8;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* 4. Plantilla Limpia para Página Ecos (Explicación / Filosofía) */
.b22-page-ecos-clean {
    position: relative;
    z-index: 2;
    padding: 3.5rem 1.5rem 6rem;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 768px) {
    .b22-page-ecos-clean {
        padding: 1rem 1.25rem 3rem !important;
    }

    .b22-page-ecos-clean .b22-ecos-clean-header {
        margin-bottom: 0.5rem !important;
    }

    .b22-page-ecos-clean .b22-custom-card {
        padding-top: 0.5rem !important;
        margin-top: 0 !important;
    }
}

.b22-ecos-clean-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.b22-ecos-clean-title {
    color: #ffffff !important;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.4rem 0 0;
    text-shadow: 0 0 35px rgba(70, 160, 136, 0.35);
}

.b22-ecos-clean-card {
    background: rgba(14, 17, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(70, 160, 136, 0.1);
    color: #cbd5e1;
    font-size: 1.125rem;
    line-height: 1.85;
}

@media (max-width: 640px) {
    .b22-ecos-clean-card {
        padding: 2rem 1.5rem;
        font-size: 1.05rem;
    }
}

.b22-ecos-clean-card p {
    margin-bottom: 1.5rem;
    color: #cbd5e1;
}

.b22-ecos-clean-card p:last-child {
    margin-bottom: 0;
}

.b22-ecos-clean-card strong {
    color: #ffffff;
    font-weight: 600;
}

.b22-ecos-clean-card h2,
.b22-ecos-clean-card h3 {
    color: #ffffff;
    font-weight: 600;
    margin: 2rem 0 1rem;
}

.b22-ecos-clean-card a {
    color: #46a088;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.b22-ecos-clean-card a:hover {
    color: #ffffff;
}

.b22-ecos-lead {
    font-size: 1.25rem;
    line-height: 1.75;
    color: #ffffff !important;
}

/* 5. Footer adaptado a la temática Ecos */
body.b22-ecos-theme .b22-ftr-footer,
body.page-template-page-ecos .b22-ftr-footer,
body.page-ecos .b22-ftr-footer {
    background-color: rgba(9, 11, 14, 0.92) !important;
    color: #a2aab8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.b22-ecos-theme .b22-ftr-title,
body.page-template-page-ecos .b22-ftr-title,
body.page-ecos .b22-ftr-title {
    color: #ffffff !important;
}

body.b22-ecos-theme .b22-ftr-list a,
body.page-template-page-ecos .b22-ftr-list a,
body.page-ecos .b22-ftr-list a {
    color: #a2aab8 !important;
}

body.b22-ecos-theme .b22-ftr-list a:hover,
body.page-template-page-ecos .b22-ftr-list a:hover,
body.page-ecos .b22-ftr-list a:hover {
    color: #ffffff !important;
}

body.b22-ecos-theme .b22-ftr-contact-btn,
body.page-template-page-ecos .b22-ftr-contact-btn,
body.page-ecos .b22-ftr-contact-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.b22-ecos-theme .b22-ftr-social-icon,
body.page-template-page-ecos .b22-ftr-social-icon,
body.page-ecos .b22-ftr-social-icon {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
}

body.b22-ecos-theme .b22-ftr-bottom,
body.page-template-page-ecos .b22-ftr-bottom,
body.page-ecos .b22-ftr-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ==============================================================================
   6. FOOTER EN TEXTOS BLANCOS (TEMPLATE FOOTER-ECOS.PHP)
   ============================================================================== */
.b22-ftr-footer.b22-ftr-white-theme {
    background-color: rgba(9, 11, 14, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative;
    z-index: 2;
}

.b22-ftr-white-theme .b22-ftr-logo-white {
    filter: brightness(0) invert(1) !important;
    display: inline-block;
}

.b22-ftr-white-theme .b22-ftr-title {
    color: #ffffff !important;
    letter-spacing: 0.08em;
}

.b22-ftr-white-theme .b22-ftr-contact-btn {
    color: #ffffff !important;
    transition: opacity 0.2s ease;
}

.b22-ftr-white-theme .b22-ftr-contact-btn:hover {
    color: #46a088 !important;
}

.b22-ftr-white-theme .b22-ftr-contact-btn svg {
    fill: currentColor !important;
}

.b22-ftr-white-theme .b22-ftr-schedule {
    color: #94a3b8 !important;
}

.b22-ftr-white-theme .b22-ftr-list a {
    color: #cbd5e1 !important;
    transition: all 0.2s ease;
}

.b22-ftr-white-theme .b22-ftr-list a:hover {
    color: #ffffff !important;
    padding-left: 4px;
}

.b22-ftr-white-theme .b22-ftr-social-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.25s ease;
}

.b22-ftr-white-theme .b22-ftr-social-icon:hover {
    background: #46a088 !important;
    color: #ffffff !important;
    border-color: #46a088 !important;
}

.b22-ftr-white-theme .b22-ftr-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.b22-ftr-white-theme .b22-ftr-legal-links a {
    color: #94a3b8 !important;
    transition: color 0.2s ease;
}

.b22-ftr-white-theme .b22-ftr-legal-links a:hover {
    color: #ffffff !important;
}

.b22-ftr-white-theme .b22-ftr-right-meta {
    color: #94a3b8 !important;
}





.dict-description-ecos {

    color: #ffffff !important;
    font-size: 1.1rem;
    line-height: 1.7;

}

.dict-description-ecos a {
    color: #ffffff !important;
    line-height: 1.9;
    font-weight: bold;

}

.dict-meanings a {

    color: #ffffff !important;
    font-weight: bold;
}


/* ==============================================================================
   7. SLIDE ECOS EN HERO SLIDER (FONDO CELESTIAL & CUADRO AL CENTRO)
   ============================================================================== */
.b22-slide-ecos {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

.b22-slider-stars-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.b22-slider-stars-bg canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.b22-slider-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #090b0e 100%);
    opacity: 0.8;
}

/* Centrado vertical y horizontal del contenido */
.b22-slide-content-container.b22-slide-center-layout {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
}

.b22-slide-card-box.b22-slide-card-center {
    position: static !important;
    margin: auto !important;
    text-align: center !important;
    align-self: center !important;
    max-width: 480px;
    background: rgba(14, 17, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 2.25rem 2.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(70, 160, 136, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 768px) {
    .b22-slide-content-container.b22-slide-center-layout {
        justify-content: flex-start !important;
        align-items: center !important;
        padding-top: 2.5rem !important;
    }

    .b22-slide-card-box-ecos,
    .b22-slide-card-box.b22-slide-card-center {
        margin-top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: auto !important;
        transform: none !important;
        max-width: 92% !important;
        padding: 1.5rem 1rem !important;
    }

    .b22-slide-card-box-ecos .b22-slide-card-title {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    }
}

.b22-slide-card-center .b22-slide-tag {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.b22-slide-btns-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.1rem 1.25rem;
    margin-top: 1.25rem;
    width: 100%;
}

.b22-slide-btns-wrap .b22-btn-ecos {
    margin: 0 !important;
}

@media (max-width: 640px) {
    .b22-slide-btns-wrap {
        gap: 0.85rem 1rem;
    }

    .b22-slide-btns-wrap .b22-btn-ecos {
        padding: 0.75rem 1.2rem !important;
        font-size: 0.72rem !important;
    }
}

.b22-btn-ecos {
    border: 0px solid #ffffff;
    color: #ffffff !important;
    background: rgba(70, 160, 136, 0.15) !important;
    transition: all 0.3s ease !important;
}

.b22-btn-ecos:hover {
    background: #46a088 !important;
    color: #000000 !important;
    box-shadow: 0 0 20px rgba(70, 160, 136, 0.5) !important;
}

/* Botones de navegación (Flechas) */
.b22-slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}

.b22-slider-nav-btn:hover {
    background: rgba(70, 160, 136, 0.85);
    border-color: #46a088;
    color: #ffffff;
}

.b22-slider-prev {
    left: 20px;
}

.b22-slider-next {
    right: 20px;
}

@media (max-width: 640px) {
    .b22-slider-nav-btn {
        display: none;
    }
}

/* Indicadores de puntos (Dots) */
.b22-slider-dots-container {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    gap: 10px;
}

.b22-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.b22-slider-dot.active {
    background: #46a088;
    width: 28px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(70, 160, 136, 0.6);
}

/* ==============================================================================
   8. PRODUCTO INDIVIDUAL ECOS (INVERSIÓN DE COLORES & FONDO ESPACIAL)
   Solo se aplica al producto que tiene la etiqueta o categoría 'ecos'
   ============================================================================== */

/* Fondo general y envoltura transparente */
body.b22-ecos-product-dark,
body.b22-ecos-product-dark .b22-global-wrapper,
body.b22-ecos-product-dark #page-wrapper,
body.b22-ecos-product-dark .b22-main-content,
body.b22-ecos-product-dark #main-content {
    background-color: #000000 !important;
    background: transparent !important;
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-single-product-section,
.b22-single-product-section.b22-ecos-single-product {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* Breadcrumbs / Migas de pan */
body.b22-ecos-product-dark .woocommerce-breadcrumb,
body.b22-ecos-product-dark .b22-breadcrumbs {
    color: #94a3b8 !important;
}

body.b22-ecos-product-dark .woocommerce-breadcrumb a,
body.b22-ecos-product-dark .b22-breadcrumbs a {
    color: #cbd5e1 !important;
}

body.b22-ecos-product-dark .woocommerce-breadcrumb a:hover,
body.b22-ecos-product-dark .b22-breadcrumbs a:hover {
    color: #46a088 !important;
}

/* SKU y Categoría */
body.b22-ecos-product-dark .b22-meta-row,
body.b22-ecos-product-dark .b22-field-sku,
body.b22-ecos-product-dark .b22-field-category {
    color: #94a3b8 !important;
}

body.b22-ecos-product-dark .b22-field-sku strong,
body.b22-ecos-product-dark .b22-field-category strong {
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-field-category a {
    color: #46a088 !important;
}

/* Título del producto */
body.b22-ecos-product-dark .b22-field-title .product_title,
body.b22-ecos-product-dark h1.product_title {
    color: #ffffff !important;
    text-shadow: 0 0 25px rgba(70, 160, 136, 0.35);
}

/* Precio */
body.b22-ecos-product-dark .b22-field-price,
body.b22-ecos-product-dark .b22-field-price .price,
body.b22-ecos-product-dark .b22-field-price .woocommerce-Price-amount {
    color: #46a088 !important;
}

body.b22-ecos-product-dark .b22-field-price del,
body.b22-ecos-product-dark .b22-field-price del .woocommerce-Price-amount {
    color: #64748b !important;
}

body.b22-ecos-product-dark .b22-field-price ins,
body.b22-ecos-product-dark .b22-field-price ins .woocommerce-Price-amount {
    color: #46a088 !important;
}

/* Descripción corta */
body.b22-ecos-product-dark .b22-field-excerpt,
body.b22-ecos-product-dark .b22-field-excerpt p {
    color: #cbd5e1 !important;
    line-height: 1.7;
}

/* Bloque ACF: Sobre el bordado */
body.b22-ecos-product-dark .b22-field-acf-bordado {
    background: rgba(16, 20, 28, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    padding: 1.25rem 1.5rem !important;
    color: #cbd5e1 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.b22-ecos-product-dark .b22-field-acf-bordado h3 {
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-bordado-item {
    color: #cbd5e1 !important;
}

body.b22-ecos-product-dark .b22-bordado-item strong {
    color: #ffffff !important;
}

/* Descripción Poética / La historia */
body.b22-ecos-product-dark .b22-poetic-description {
    display: none;
}

body.b22-ecos-product-dark .b22-poetic-label,
body.b22-ecos-product-dark .b22-poetic-icon {
    color: #46a088 !important;
}

body.b22-ecos-product-dark .b22-poetic-bubble {
    color: #e2e8f0 !important;
}

/* Acordeones de Producto */
body.b22-ecos-product-dark .b22-accordion-item {
    background: none !important;
    border: 0px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.b22-ecos-product-dark .b22-accordion-title {
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-accordion-title h2 {
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-accordion-title i {
    color: #46a088 !important;
}

body.b22-ecos-product-dark .b22-accordion-content {
    color: #cbd5e1 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.b22-ecos-product-dark .b22-accordion-content p,
body.b22-ecos-product-dark .b22-accordion-content li {
    color: #cbd5e1 !important;
}

/* Buy Box (Caja de compra lateral) */
body.b22-ecos-product-dark .b22-buybox-card {
    background: rgba(14, 17, 22, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(70, 160, 136, 0.15) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-buybox-shipping {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.b22-ecos-product-dark .b22-buybox-icon,
body.b22-ecos-product-dark .b22-stock-icon,
body.b22-ecos-product-dark .b22-benefit-icon {
    color: #46a088 !important;
}

body.b22-ecos-product-dark .b22-shipping-highlight {
    color: #ffffff !important;
}

body.b22-ecos-product-dark .b22-shipping-sub {
    color: #94a3b8 !important;
}

body.b22-ecos-product-dark .b22-buybox-stock {
    color: #46a088 !important;
}

body.b22-ecos-product-dark .b22-buybox-benefits {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.b22-ecos-product-dark .b22-benefit-item {
    color: #cbd5e1 !important;
}

body.b22-ecos-product-dark .b22-benefit-item strong {
    color: #ffffff !important;
}

/* Selector de cantidad y Botón de añadir al carrito */
body.b22-ecos-product-dark .quantity input.qty {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px;
}

body.b22-ecos-product-dark button.single_add_to_cart_button,
body.b22-ecos-product-dark .b22-btn-primary {
    background: #46a088 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(70, 160, 136, 0.4) !important;
    transition: all 0.3s ease !important;
}

body.b22-ecos-product-dark button.single_add_to_cart_button:hover,
body.b22-ecos-product-dark .b22-btn-primary:hover {
    background: #57bda1 !important;
    box-shadow: 0 0 30px rgba(70, 160, 136, 0.7) !important;
    transform: translateY(-2px);
}

/* Variaciones, Swatches y Campos de personalización WAPF */
body.b22-ecos-product-dark table.variations {
    color: #ffffff !important;
}

body.b22-ecos-product-dark table.variations label {
    color: #ffffff !important;
}

body.b22-ecos-product-dark table.variations select,
body.b22-ecos-product-dark .wapf-field-input select,
body.b22-ecos-product-dark .wapf-field-input input,
body.b22-ecos-product-dark .wapf-field-input textarea {
    background-color: rgba(16, 20, 28, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px;
}

body.b22-ecos-product-dark .b22-swatch,
body.b22-ecos-product-dark .b22-size-option,
body.b22-ecos-product-dark .wapf-checkable {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.b22-ecos-product-dark .b22-swatch.selected,
body.b22-ecos-product-dark .b22-size-option.selected,
body.b22-ecos-product-dark .wapf-checkable.checked {
    border-color: #46a088 !important;
    box-shadow: 0 0 10px rgba(70, 160, 136, 0.5) !important;
}

/* Galería de imágenes en producto Ecos: Recorte en Cuadrado (1:1) en móvil */
@media (max-width: 767px) {
    body.b22-ecos-product-dark .b22-product-gallery-col .flex-viewport,
    .b22-ecos-single-product .b22-product-gallery-col .flex-viewport,
    body.b22-ecos-product-dark .woocommerce-product-gallery__wrapper,
    .b22-ecos-single-product .woocommerce-product-gallery__wrapper {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   GALERÍA DE PRODUCTO EN ESCRITORIO: FOTOS APILADAS VERTICALMENTE
   (Sin slider en escritorio, todas las imágenes visibles una debajo de otra)
   ========================================================================== */
@media (min-width: 768px) {
    .b22-single-product-grid .b22-product-gallery-col {
        position: relative !important;
        top: auto !important;
        align-self: flex-start !important;
        z-index: 2 !important;
    }

    /* El contenedor y viewport no limitan la altura para permitir mostrar todas las fotos */
    .b22-product-gallery-col .woocommerce-product-gallery,
    .b22-product-gallery-col div.images,
    .b22-product-gallery-col .flex-viewport,
    body.b22-ecos-product-dark .b22-product-gallery-col .flex-viewport,
    .b22-ecos-single-product .b22-product-gallery-col .flex-viewport {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* El contenedor wrapper se convierte en columna vertical con espacio entre fotos */
    .b22-product-gallery-col .woocommerce-product-gallery__wrapper,
    body.b22-ecos-product-dark .woocommerce-product-gallery__wrapper,
    .b22-ecos-single-product .woocommerce-product-gallery__wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        transition: none !important;
        aspect-ratio: auto !important;
    }

    /* Cada foto se despliega a ancho completo en bloque vertical */
    .b22-product-gallery-col .woocommerce-product-gallery__image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        margin: 0 !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .b22-product-gallery-col .woocommerce-product-gallery__image a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        pointer-events: none !important;
        cursor: default !important;
    }

    .b22-product-gallery-col .woocommerce-product-gallery__image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* En productos Ecos cada foto de la pila mantiene proporción 1:1 */
    body.b22-ecos-product-dark .woocommerce-product-gallery__image,
    .b22-ecos-single-product .woocommerce-product-gallery__image {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background-color: rgba(16, 20, 28, 0.6) !important;
    }

    body.b22-ecos-product-dark .woocommerce-product-gallery__image a,
    .b22-ecos-single-product .woocommerce-product-gallery__image a {
        aspect-ratio: 1 / 1 !important;
        height: 100% !important;
        width: 100% !important;
    }

    body.b22-ecos-product-dark .woocommerce-product-gallery__image img,
    .b22-ecos-single-product .woocommerce-product-gallery__image img {
        aspect-ratio: 1 / 1 !important;
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    /* Ocultar las miniaturas de navegación del slider en escritorio */
    .b22-product-gallery-col .flex-control-thumbs,
    .b22-product-gallery-col .flex-direction-nav {
        display: none !important;
    }
}

/* Estilos de la galería móvil para productos Ecos (< 768px) */
@media (max-width: 767px) {
    body.b22-ecos-product-dark .woocommerce-product-gallery__image,
    .b22-ecos-single-product .woocommerce-product-gallery__image {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background-color: rgba(16, 20, 28, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.b22-ecos-product-dark .woocommerce-product-gallery__image a,
    .b22-ecos-single-product .woocommerce-product-gallery__image a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        cursor: default !important;
    }

    body.b22-ecos-product-dark .woocommerce-product-gallery__image img,
    .b22-ecos-single-product .woocommerce-product-gallery__image img,
    body.b22-ecos-product-dark .wp-post-image,
    .b22-ecos-single-product .wp-post-image {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        cursor: default !important;
    }

    body.b22-ecos-product-dark .woocommerce-product-gallery__image:hover img,
    .b22-ecos-single-product .woocommerce-product-gallery__image:hover img {
        transform: none !important;
    }

    /* Miniaturas cuadradas y centradas en móvil */
    body.b22-ecos-product-dark .flex-control-thumbs li,
    .b22-ecos-single-product .flex-control-thumbs li {
        aspect-ratio: 1 / 1 !important;
    }

    body.b22-ecos-product-dark .flex-control-thumbs li img,
    .b22-ecos-single-product .flex-control-thumbs li img {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        transition: all 0.2s ease;
    }

    body.b22-ecos-product-dark .flex-control-thumbs li img.flex-active,
    .b22-ecos-single-product .flex-control-thumbs li img.flex-active {
        border-color: #46a088 !important;
        box-shadow: 0 0 12px rgba(70, 160, 136, 0.5) !important;
    }
}

/* Campos personalizados WAPF (Personaliza tu pedido) en Producto Ecos */
body.b22-ecos-product-dark .wapf-wrapper,
.b22-ecos-single-product .wapf-wrapper {
    background: rgba(16, 20, 28, 0.8) !important;
    border: 1px solid rgba(70, 160, 136, 0.4) !important;
    border-radius: 12px !important;
    padding: 2.75rem 1rem 1rem 1rem !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) !important;
    margin-bottom: 1.25rem !important;
    overflow: hidden !important;
}

body.b22-ecos-product-dark .wapf-wrapper::before,
.b22-ecos-single-product .wapf-wrapper::before {
    background: rgba(10, 14, 20, 0.95) !important;
    color: #00ffbb !important;
    border-bottom: 1px solid rgba(70, 160, 136, 0.3) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.55rem 1rem !important;
    border-radius: 11px 11px 0 0 !important;
}

body.b22-ecos-product-dark .wapf-field-label label,
.b22-ecos-single-product .wapf-field-label label {
    color: #e2e8f0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}

body.b22-ecos-product-dark .wapf-field-label abbr.required,
.b22-ecos-single-product .wapf-field-label abbr.required {
    color: #00ffbb !important;
}

body.b22-ecos-product-dark input.wapf-input[type="text"],
body.b22-ecos-product-dark select.wapf-input,
body.b22-ecos-product-dark textarea.wapf-input,
.b22-ecos-single-product input.wapf-input[type="text"],
.b22-ecos-single-product select.wapf-input,
.b22-ecos-single-product textarea.wapf-input {
    background-color: rgba(9, 11, 15, 0.92) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: all 0.25s ease !important;
    line-height: normal !important;
}

body.b22-ecos-product-dark input.wapf-input[type="text"]:focus,
body.b22-ecos-product-dark select.wapf-input:focus,
body.b22-ecos-product-dark textarea.wapf-input:focus,
.b22-ecos-single-product input.wapf-input[type="text"]:focus,
.b22-ecos-single-product select.wapf-input:focus,
.b22-ecos-single-product textarea.wapf-input:focus {
    border-color: #46a088 !important;
    background-color: rgba(12, 16, 22, 0.98) !important;
    box-shadow: 0 0 12px rgba(70, 160, 136, 0.4) !important;
    outline: none !important;
}

body.b22-ecos-product-dark .wapf-field-description,
.b22-ecos-single-product .wapf-field-description {
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    margin-top: 0.45rem !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

/* Selector de Cantidad y Botón Añadir al Carrito en Buy Box Ecos */
body.b22-ecos-product-dark .woocommerce div.product form.cart .quantity input.qty,
.b22-ecos-single-product .woocommerce div.product form.cart .quantity input.qty {
    background-color: rgba(10, 14, 20, 0.92) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    height: 48px !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
}

body.b22-ecos-product-dark .woocommerce div.product form.cart .quantity input.qty:focus,
.b22-ecos-single-product .woocommerce div.product form.cart .quantity input.qty:focus {
    border-color: #46a088 !important;
    box-shadow: 0 0 10px rgba(70, 160, 136, 0.4) !important;
    outline: none !important;
}

body.b22-ecos-product-dark .woocommerce div.product form.cart button.single_add_to_cart_button,
.b22-ecos-single-product .woocommerce div.product form.cart button.single_add_to_cart_button {
    background: #46a088 !important;
    background-color: #46a088 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(70, 160, 136, 0.4) !important;
    transition: all 0.25s ease !important;
    height: 48px !important;
}

body.b22-ecos-product-dark .woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.b22-ecos-single-product .woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background: #00ffbb !important;
    background-color: #00ffbb !important;
    color: #000000 !important;
    box-shadow: 0 0 25px rgba(0, 255, 187, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* ==============================================================================
   PASTILLA FLOTANTE PARA PRODUCTO PERSONALIZADO (EXCLUSIVA CATEGORÍA ECOS)
   ============================================================================== */
.b22-ecos-pill-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.b22-floating-ecos-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #0a0d14;
    color: #ffffff !important;
    padding: 10px 18px;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    border: 1px solid rgba(70, 160, 136, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 16px rgba(70, 160, 136, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
}

/* En Desktop (>= 900px): Flotante fija en la esquina superior */
@media (min-width: 900px) {
    .b22-floating-ecos-pill {
        position: fixed;
        top: 85px;
        right: 24px;
        z-index: 999;
        max-width: 500px;
    }

    body.admin-bar .b22-floating-ecos-pill {
        top: 118px;
    }
}

/* En Móvil (< 900px): Debajo del título, centrada y sin tapar contenido */
@media (max-width: 899px) {
    .b22-ecos-pill-wrapper {
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .b22-floating-ecos-pill {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        padding: 8px 14px;
        font-size: 0.74rem;
        gap: 7px;
        max-width: calc(100vw - 28px);
        text-align: center;
    }
}

.b22-floating-ecos-pill .b22-pill-sparkle {
    color: #00ffbb;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
    animation: b22-sparkle-pulse 2.2s infinite ease-in-out;
}

.b22-floating-ecos-pill .b22-pill-text {
    color: #f0f4f8;
    line-height: 1.3;
}

.b22-floating-ecos-pill .b22-pill-arrow {
    color: #46a088;
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}

.b22-floating-ecos-pill:hover {
    background: #101520;
    border-color: #00ffbb;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 255, 187, 0.4);
    color: #ffffff !important;
}

.b22-floating-ecos-pill:hover .b22-pill-arrow {
    transform: translateX(4px);
    color: #00ffbb;
}

@keyframes b22-sparkle-pulse {

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

    50% {
        transform: scale(1.22);
        opacity: 1;
        text-shadow: 0 0 10px #00ffbb;
    }
}

/* Campo de inicial única (WAPF) */
.wapf-field-container.solo-inicial input.wapf-input,
.wapf-field-container.b22-solo-inicial input.wapf-input {
    max-width: 90px !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}