/*
Theme Name: Astra Child Mexico
Description: CSS PRECISION UI - V5 Final (Mobile Fixes: Header, Cart Counter, Typography, Search Overlay & Qty Buttons, Gpay Fix, Mobile Cart Fix)
Template: astra
Version: 1.3
*/

/* =========================================
   ZARA-STYLE MINIMALIST ECOMMERCE CSS
   ========================================= */

/* -----------------------------------------
   1. GLOBAL & TYPOGRAPHY
   ----------------------------------------- */
:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey: #f5f5f5;
    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    color: var(--color-black) !important;
    font-family: var(--font-primary) !important;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.woocommerce-loop-product__title {
    color: var(--color-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

/* -----------------------------------------
   2. LAYOUT & MARGINS (STRICT RULES)
   ----------------------------------------- */
.alignfull,
.entry-content .alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

@media (min-width: 769px) {

    .site-content>.ast-container,
    .responsive-container,
    .custom-product-grid,
    .woocommerce-products-header,
    .ast-woocommerce-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .widget-area {
        padding-left: 20px !important;
    }
}

@media (max-width: 768px) {

    .site-content>.ast-container,
    .responsive-container,
    .custom-product-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1px !important;
        margin-bottom: 40px !important;
    }

    ul.products li.product {
        margin-bottom: 20px !important;
    }
}

/* Regla exclusiva para móvil y tablet para empujar todo el bloque de la tienda (filtro + productos) */
@media (max-width: 921px) {
    body.woocommerce-shop .ast-woocommerce-container,
    body.archive.woocommerce .ast-woocommerce-container,
    body.tax-product_cat .ast-woocommerce-container {
        margin-top: 120px !important; /* Desplaza el filtro y los productos juntos a tu medida perfecta */
    }
}

/* =========================================
   3. MOBILE MENU (APP STYLE - OPTIMIZADO)
   ========================================= */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    background-color: #ffffff !important;
    height: 100vh !important;
}

.ast-builder-menu-mobile {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    width: 100% !important;
}

.ast-builder-menu-mobile .menu-item {
    position: relative !important; /* Permite posicionar el botón de despliegue a la derecha */
    border: none !important;
    margin: 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.ast-builder-menu-mobile .menu-item a {
    text-align: left !important; /* Alineado a la izquierda */
    text-transform: uppercase !important;
    display: block !important;
    padding: 14px 20px !important; /* Espaciado táctil ideal */
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* --- JERARQUÍA AUTOMÁTICA PARA SUBCATEGORÍAS (SUB-MENÚ) --- */
.ast-builder-menu-mobile .sub-menu {
    padding-left: 20px !important; /* Sangría sutil */
    background-color: #fbfbfb !important; /* Fondo gris suave */
    list-style: none !important;
    margin: 0 !important;
}

.ast-builder-menu-mobile .sub-menu .menu-item {
    border-bottom: 1px solid #f0f0f0 !important;
}

.ast-builder-menu-mobile .sub-menu .menu-item a {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    padding: 10px 20px !important;
}

/* --- CONTENEDOR DEL BOTÓN DE DESPLIEGUE --- */
.ast-builder-menu-mobile .menu-item .ast-menu-toggle {
    display: flex !important;
    align-items: center !important; /* Centrado vertical exacto en la altura media del texto */
    justify-content: center !important;
    position: absolute !important;
    right: 15px !important; /* Alineación perfecta al extremo derecho */
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important; /* Ocupa el alto total de la celda de forma simétrica */
    width: 44px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar el SVG de la flecha nativa de Astra */
.ast-builder-menu-mobile .menu-item .ast-menu-toggle .ast-icon {
    display: none !important;
}

/* --- INYECCIÓN DEL SÍMBOLO "+" ELEGANTE Y ULTRAFINO --- */
.ast-builder-menu-mobile .menu-item .ast-menu-toggle::before {
    content: "+" !important; /* Icono inicial de más */
    font-family: var(--font-primary) !important;
    font-size: 18px !important; /* Tamaño limpio y sutil */
    font-weight: 300 !important; /* Grosor fino muy minimalista */
    color: #000000 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}

/* --- CAMBIO INTELIGENTE: PASA A SÍMBOLO "−" (MENOS) AL DESPLEGARSE (BLINDADO) --- */
.ast-builder-menu-mobile .menu-item.ast-submenu-expanded > .ast-menu-toggle::before,
.ast-builder-menu-mobile .menu-item.toggled > .ast-menu-toggle::before,
.ast-builder-menu-mobile .menu-item.active > .ast-menu-toggle::before,
.ast-builder-menu-mobile .menu-item .ast-menu-toggle.ast-submenu-expanded::before,
.ast-builder-menu-mobile .menu-item .ast-menu-toggle.toggled::before {
    content: "−" !important; /* Cambia a menos al estar desplegada en cualquier versión de Astra */
    font-size: 18px !important;
}

.ast-mobile-popup-header {
    border: none !important;
    padding: 10px 15px !important;
    text-align: right !important;
}

.ast-close-svg {
    fill: #000 !important;
    width: 20px !important;
    height: 20px !important;
}

/* -----------------------------------------
   4. HERO SECTION ("SHOP NOW")
   ----------------------------------------- */
.hero-fade-target .wp-block-button__link.hero-text-link {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 5px 0 !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 6px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    letter-spacing: 2px;
    box-shadow: none !important;
}

.hero-fade-target .wp-block-button__link.hero-text-link:hover {
    color: #e5e5e5 !important;
    background: transparent !important;
}

.hero-fade-target h1 {
    font-size: clamp(2.2rem, 6vw, 4rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
}

@media (max-width: 768px) {
    .hero-fade-target h1 {
        font-size: 2.2rem !important;
        line-height: 1 !important;
    }
}

/* -----------------------------------------
   5. SHOP & SORTING ALIGNMENT
   ----------------------------------------- */
.ast-woocommerce-shop-product-listings-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    padding-top: 20px !important;
}

/* Forzado de visibilidad ultra-específico de WooCommerce para móvil */
@media (max-width: 921px) {
    .woocommerce-ordering,
    .woocommerce-ordering select,
    .ast-woocommerce-shop-product-listings-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.woocommerce-result-count {
    display: none !important;
}

.woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
}

.woocommerce-ordering select {
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    text-transform: uppercase;
    font-weight: 600;
    padding-right: 20px !important;
    cursor: pointer;
}

/* =========================================
   6. PRODUCT CARD & GRID EQUALIZER
   ========================================= */
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-align: left !important;
    margin-bottom: 40px !important;
    padding-bottom: 10px !important;
}

.woocommerce ul.products li.product a {
    flex-grow: 0 !important;
    display: block !important;
}

.woocommerce ul.products li.product a img {
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block !important;
    box-shadow: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 2.8em !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: none !important;
}

.woocommerce ul.products li.product .price {
    color: #444444 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-bottom: 15px !important;
    flex-grow: 0 !important;
}

.woocommerce ul.products li.product .price del {
    display: none !important;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    display: block !important;
    border-radius: 0px !important;
    padding: 14px 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: auto !important;
    text-align: center !important;
    border: none !important;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #222222 !important;
    transform: translateY(-1px);
}

.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .star-rating {
    display: none !important;
}

.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
    display: none !important;
}

/* =========================================
   7. SINGLE PRODUCT & CART (CANTIDAD Y SELECTORES)
   ========================================= */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

.variations select {
    border: 1px solid #000000 !important;
    background-color: #ffffff !important;
    border-radius: 0px !important;
    height: 45px !important;
    padding: 0 15px !important;
    color: #000 !important;
    font-size: 14px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
}

.variations label {
    color: #000 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* CANTIDAD (+ / -) */
div.quantity,
.woocommerce div.product form.cart div.quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    height: 50px !important;
    width: 130px !important;
    padding: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* FIX: Ocultar si está forzado u oculto (Ej. Máximo 1 en stock) con ALTA ESPECIFICIDAD */
body div.quantity.force-hide,
body div.quantity:has(input.qty[max="1"]),
body div.quantity:has(input[type="hidden"]),
body div.quantity:empty,
.woocommerce div.product form.cart div.quantity:has(input.qty[max="1"]) {
    display: none !important;
}

div.quantity input.qty {
    width: 50px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    color: #000000 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

div.quantity input.qty::-webkit-inner-spin-button,
div.quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

div.quantity .minus,
div.quantity .plus,
div.quantity .qty_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #000000 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    width: 40px !important;
    height: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

div.quantity .minus:hover,
div.quantity .plus:hover,
div.quantity .qty_button:hover {
    background-color: #f5f5f5 !important;
}

.single_add_to_cart_button {
    background-color: #000000 !important;
    color: #ffffff !important;
    height: 50px !important;
    padding: 0 40px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0px !important;
    flex-grow: 1 !important;
    min-width: 200px !important;
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .woocommerce div.product form.cart .single_add_to_cart_button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        width: 100% !important;
        display: block !important;
    }
}

/* FIX EXPRESS CHECKOUT BUTTON (GPay / Apple Pay) */
.cpsw-express-checkout-button-overlay,
#cpsw-express-checkout-button-wrapper,
.cpsw-payment-request-button,
.cpsw-express-checkout-button-border {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px auto 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Forzar botones internos (Stripe/Apple) a quitar bordes redondeados si es posible mediante CSS global */
.cpsw-express-checkout-button-overlay *,
#cpsw-express-checkout-button-wrapper * {
    border-radius: 0 !important;
}

/* =========================================
   8. ACCORDIONS & MENUS
   ========================================= */
.woocommerce-tabs ul.tabs {
    display: none !important;
}

.accordion-toggle {
    border-top: 1px solid #e5e5e5;
    padding: 20px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000;
    transition: color 0.2s ease;
}

.accordion-toggle:hover {
    color: #555;
}

.woocommerce-tabs .panel:last-of-type {
    border-bottom: 1px solid #e5e5e5;
}

.accordion-toggle::after {
    content: "+";
    font-size: 18px;
    font-weight: 300;
    margin-left: 15px;
}

.accordion-toggle.active::after {
    content: "−";
}

.woocommerce-tabs .panel {
    display: none !important;
    padding-bottom: 30px;
    padding-top: 10px;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.woocommerce-tabs .panel.is-open {
    display: block !important;
    animation: fadeDown 0.3s ease-in-out;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ast-mobile-popup-content .menu-item a {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 25px 20px !important;
    font-size: 16px !important;
    text-align: left !important;
}

/* =========================================
   10. FOOTER
   ========================================= */
.site-footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
}

.site-content {
    margin-bottom: 0 !important;
}

.site-footer .ast-builder-grid-row-container {
    padding-top: 10 !important;
    padding-bottom: 10 !important;
}

.footer-widget-area h2.widget-title,
.site-footer .widget-title,
.site-footer h4 {
    color: #ffffff !important;
}

.ast-small-footer .ast-footer-copyright-wrap,
.ast-small-footer .ast-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* =========================================
   MOBILE HEADER: APP STYLE + SHOP FIX (FINAL) - SOLUCIÓN DEFINITIVA
   ========================================= */
@media (max-width: 921px) {
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important; /* Permite que la cabecera fija se adapte al buscador */
        z-index: 99999 !important;
        background-color: #ffffff !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ast-mobile-header-wrap,
    .main-header-bar,
    .ast-main-header-bar-alignment {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .site-header .ast-main-header-bar-alignment {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .main-header-menu-toggle,
    .ast-site-header-cart {
        padding: 0 10px !important;
        background: transparent !important;
        margin: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        z-index: 20 !important;
    }

    .site-branding {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10 !important;
        pointer-events: none !important;
        display: flex !important;
        justify-content: center !important;
        max-width: 45% !important;
    }

    .site-branding .custom-mobile-logo-link {
        display: block !important;
    }

    .site-branding img {
        max-height: 28px !important;
        width: auto !important;
    }

    .site-branding a {
        pointer-events: auto !important;
    }

    .site-branding .site-title,
    .site-branding .site-description,
    .ast-desktop-logo,
    .site-branding .custom-logo-link {
        display: none !important;
    }

    /* 1. Espaciado superior base en el body (mantiene el menú superior limpio) */
    body {
        padding-top: 60px !important;
    }

    /* 2. Empujamos el contenedor de contenido principal en toda la web excepto en el Home */
    body:not(.home) .site-content {
        padding-top: 55px !important; /* Compensa exactamente la altura de la barra de búsqueda */
    }

    /* 3. CORRECCIÓN CLAVE: Ajustamos el espaciado de la tienda para que coincida con los 55px */
    body.woocommerce-shop .site-content,
    body.archive.woocommerce .site-content,
    body.tax-product_cat .site-content {
        padding-top: 55px !important; /* Cambiado de 0px a 55px para empujar el contenido debajo del buscador */
        display: block !important;
    }
}

.ast-site-header-cart .ast-cart-menu-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-site-header-cart .ast-cart-menu-wrap .ast-cart-count,
.ast-site-header-cart .ast-addon-cart-wrap .ast-cart-count {
    position: absolute !important;
    top: -5px !important;
    right: -8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 10px !important;
    border-radius: 50% !important;
    background: #000 !important;
    color: #fff !important;
}

/* =========================================
   EXTRA COMPONENT STYLING
   ========================================= */
.woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.woocommerce-mini-cart__buttons .button:not(.checkout) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    padding: 12px 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.woocommerce-mini-cart__buttons .button.checkout {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    padding: 12px 0 !important;
}

/* SEARCH WIDGET */
.widget_search h2,
.widget_product_search h2,
.widget_search label,
.woocommerce-product-search label,
.screen-reader-text {
    display: none !important;
}

.widget_search form,
.woocommerce-product-search {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #000000 !important;
    background-color: #ffffff !important;
    border-radius: 0px !important;
    height: 45px !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.widget_search .search-field,
.woocommerce-product-search .search-field,
input[type="search"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    height: 100% !important;
    width: 100% !important;
    flex-grow: 1 !important;
    padding: 0 0 0 15px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.widget_search button,
.woocommerce-product-search button[type="submit"] {
    font-size: 0 !important;
    color: transparent !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    width: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* SLIDE CART */
.woocommerce-mini-cart-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-right: 35px !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-mini-cart-item img {
    border-radius: 6px !important;
    object-fit: cover !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 80px !important;
    margin-right: 35px !important;
    margin-left: 0 !important;
}

.woocommerce-mini-cart-item a:not(.remove) {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #000000 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-right: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.woocommerce-mini-cart-item .quantity {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #eeeeee !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #555 !important;
    margin: 0 !important;
}

.woocommerce-mini-cart-item .quantity input {
    display: none !important;
}

.woocommerce-mini-cart-item .remove {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 14px !important;
    padding: 0 !important;
    z-index: 5 !important;
}

@media (max-width: 768px) {
    .woocommerce-mini-cart-item img {
        width: 60px !important;
        height: 60px !important;
        margin-right: 15px !important;
    }

    .woocommerce-mini-cart-item a:not(.remove) {
        font-size: 12px !important;
        margin-right: 10px !important;
    }

    .woocommerce-mini-cart-item .quantity {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .woocommerce-mini-cart-item .remove {
        width: 22px !important;
        height: 22px !important;
    }

    .woocommerce-mini-cart-item {
        padding-right: 28px !important;
    }
}

/* =========================================
   AJUSTES RESPONSIVOS DEL CARRITO DESLIZANTE
   ========================================= */
@media (max-width: 921px) {
    
    /* Eliminar cualquier cabecera nativa de Astra que intente forzarse en móvil */
    .ast-site-header-cart-side-header {
        display: none !important;
    }

    /* 1. Comprimimos el espacio superior al mínimo seguro para que los productos suban de forma estética */
    ul.woocommerce-mini-cart {
        padding-top: 140px !important; /* Reducido de 150px a 140px para la máxima integración visual */
    }

    /* 2. Botón de cerrar como texto plano, elegante, sutil y minimalista (Estilo Zara) */
    .custom-cart-close-btn {
        display: block !important;
        position: absolute !important; /* Flota sobre el espacio libre de 140px */
        top: 124px !important; /* Posicionamiento flotante perfecto */
        right: 20px !important; /* Alineado a la derecha de la rejilla */
        left: auto !important;
        transform: none !important;
        
        /* Reset de cajas, fondos, bordes y redondeados */
        width: auto !important;
        height: auto !important;
        background: transparent !important; /* Sin color de fondo */
        background-color: transparent !important;
        border: none !important; /* Sin bordes */
        border-radius: 0px !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;

        /* Estilo Tipográfico Minimalista */
        color: #000000 !important; /* Texto negro absoluto */
        font-family: var(--font-primary) !important;
        font-size: 11px !important; /* Tamaño de letra sutil y elegante */
        font-weight: 600 !important; /* Peso seminegrita limpio */
        letter-spacing: 1.5px !important; /* Espaciado de letras ancho de alta gama */
        text-transform: uppercase !important; /* Mayúsculas completas */
        text-align: right !important;
        z-index: 2147483647 !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease !important;
        box-sizing: border-box !important;
    }

    /* Efecto al presionar la palabra */
    .custom-cart-close-btn:active {
        opacity: 0.5 !important; /* Atenuado elegante al tocar */
    }
}

/* CART PAGE MAKEOVER (DESKTOP) */
.woocommerce-cart .woocommerce-cart-form__contents {
    border: none !important;
}

.woocommerce-cart table.shop_table th {
    border-bottom: 2px solid #000000 !important;
    border-top: none !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 0 !important;
    font-weight: 700 !important;
    background: transparent !important;
}

.woocommerce-cart table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #eeeeee !important;
    padding: 25px 0 !important;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 90px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.woocommerce-cart table.shop_table td.product-name a {
    color: #000000 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
}

.woocommerce-cart table.shop_table td.product-remove a.remove {
    font-weight: 300 !important;
    color: #999 !important;
    background: transparent !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    margin: 0 auto !important;
    transition: all 0.2s;
}

.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* COUPON & UPDATE CART (DESKTOP) */
.woocommerce-cart .coupon {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.woocommerce-cart .coupon .input-text {
    flex: 1 !important;
    width: 50% !important;
    border: 1px solid #000000 !important;
    border-right: none !important;
    background-color: #ffffff !important;
    height: 55px !important;
    min-height: 55px !important;
    padding: 0 15px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: center !important;
}

.woocommerce-cart .coupon button.button {
    flex: 1 !important;
    width: 50% !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    height: 55px !important;
    min-height: 55px !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0 30px !important;
    margin: 0 !important;
    line-height: normal !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

button[name="update_cart"].button,
.woocommerce-cart table.shop_table .actions>button.button {
    background-color: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    height: 55px !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0 30px !important;
    margin-top: 10px !important;
}

.cart-collaterals .cart_totals {
    border: 1px solid #f0f0f0 !important;
    padding: 30px !important;
    background-color: #fafafa !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.cart-collaterals .cart_totals h2 {
    font-size: 18px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.wc-proceed-to-checkout .checkout-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 18px 0 !important;
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
}

/* FIX PAYPAL & EXPRESS BUTTONS (DESKTOP & MOBILE) */
.wc-proceed-to-checkout .paypal-buttons,
.wc-proceed-to-checkout .paypal-buttons-context,
.wc-proceed-to-checkout iframe[name^="zoid__paypal"],
.woocommerce-cart .paypal-buttons,
.woocommerce-checkout .paypal-buttons,
.wcppec-checkout-buttons__button-container,
#wc-paypal-checkout-express-checkout-button-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
}

/* CART PAGE MAKEOVER (MOBILE ASTRO OVERRIDES) */
@media (max-width: 768px) {

    .woocommerce-cart table.shop_table,
    .woocommerce-cart table.shop_table tbody,
    .woocommerce-cart table.shop_table tr,
    .woocommerce-cart table.shop_table td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        position: static !important;
    }

    .woocommerce-cart table.shop_table thead,
    .woocommerce-cart table.shop_table td.product-subtotal {
        display: none !important;
    }

    .woocommerce-cart table.shop_table tr.cart_item {
        display: grid !important;
        grid-template-columns: 85px 1fr !important;
        grid-template-areas:
            "image name"
            "image price"
            "image quantity";
        gap: 5px 15px !important;
        position: relative !important;
        padding: 25px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    .woocommerce-cart table.shop_table td.product-thumbnail {
        grid-area: image !important;
        text-align: left !important;
    }

    .woocommerce-cart table.shop_table td.product-thumbnail img {
        width: 85px !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 5px !important;
    }

    .woocommerce-cart table.shop_table td.product-name {
        grid-area: name !important;
        padding: 0 !important;
        display: block !important;
        text-align: left !important;
        padding-right: 25px !important;
    }

    .woocommerce-cart table.shop_table td.product-name::before {
        display: none !important;
    }

    .woocommerce-cart table.shop_table td.product-name a {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .woocommerce-cart table.shop_table td.product-price {
        grid-area: price !important;
        text-align: left !important;
        padding: 0 !important;
        display: block !important;
        font-weight: 600 !important;
    }

    .woocommerce-cart table.shop_table td.product-price::before {
        display: none !important;
    }

    .woocommerce-cart table.shop_table td.product-quantity {
        grid-area: quantity !important;
        text-align: left !important;
        display: block !important;
        margin-top: 5px !important;
    }

    .woocommerce-cart table.shop_table td.product-quantity::before {
        display: none !important;
    }

    /* FIX: Botón "X" en móvil Carrito para evitar sobreposición */
    .woocommerce-cart table.shop_table td.product-remove {
        position: absolute !important;
        top: 25px !important;
        right: 0px !important;
        z-index: 10 !important;
        display: block !important;
        border: none !important;
        width: auto !important;
    }

    .woocommerce-cart table.shop_table td.product-remove a.remove {
        font-size: 18px !important;
        border: 1px solid #e5e5e5 !important;
        background: #fff !important;
        color: #999 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    /* Mobile Coupon fields layout */
    .woocommerce-cart .coupon {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .woocommerce-cart .coupon .input-text {
        width: 100% !important;
        border-right: 1px solid #000 !important;
        text-align: center !important;
        height: 55px !important;
        min-height: 55px !important;
    }

    .woocommerce-cart .coupon button.button {
        width: 100% !important;
        height: 55px !important;
        min-height: 55px !important;
    }

    button[name="update_cart"].button {
        width: 100% !important;
        background: #fafafa !important;
    }
}

/* FLUID CHECKOUT */
body .fc-wrapper,
body .fc-wrapper *,
body .fc-wrapper input,
body .fc-wrapper button,
body .fc-wrapper .fc-step {
    border-radius: 0 !important;
    font-family: inherit !important;
}

body .fc-wrapper input[type="text"],
body .fc-wrapper input[type="email"],
body .fc-wrapper input[type="tel"],
body .fc-wrapper input[type="password"],
body .fc-wrapper select,
body .fc-wrapper textarea {
    border: 1px solid #000000 !important;
    background-color: #ffffff !important;
    height: 50px !important;
    padding: 0 15px !important;
    color: #000 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    outline: none !important;
}

body .fc-wrapper label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #000 !important;
}

body .fc-wrapper .fc-primary-button,
body .fc-wrapper button#place_order {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    height: 55px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    width: 100% !important;
}

body .fc-sidebar__inner {
    background-color: #fafafa !important;
    border: 1px solid #f0f0f0 !important;
    padding: 30px !important;
}

/* =========================================
   17. FULL SCREEN SEARCH OVERLAY (FIXED BLINDADO)
   ========================================= */
.moved-search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    margin: 0 !important;
}

.moved-search-overlay.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.moved-search-overlay label,
.moved-search-overlay .search-field-wrapper {
    width: 90vw !important;
    max-width: 600px !important;
    height: 70px !important;
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.moved-search-overlay input.search-field,
.moved-search-overlay input[type="search"] {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #000000 !important;
    padding: 0 30px !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
}

.moved-search-overlay button,
.moved-search-overlay input[type="submit"] {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 0 30px !important;
    height: 100% !important;
    cursor: pointer !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    display: block !important;
}

/* EXTRAS */
.category-pills-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.cat-pill {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #e5e5e5;
    border-radius: 30px;
    text-decoration: none !important;
    color: #000 !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cat-pill:hover,
.cat-pill.active {
    background-color: #000;
    color: #fff !important;
    border-color: #000;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* =========================================
   18. FLOATING ELEMENTS FIX (WHATSAPP & COOKIES)
   ========================================= */
@media (max-width: 768px) {

    .cmplz-cookiebanner,
    #cc-window,
    .cc-window,
    .cli-bar-btn_container,
    #cookie-law-info-bar,
    .wt-cli-cookie-bar-container,
    .cc-revoke,
    .cmplz-manage-consent,
    button[data-cky-tag="manage-consent"] {
        transform: scale(0.75) !important;
        transform-origin: bottom right !important;
        bottom: 10px !important;
        z-index: 9999 !important;
    }

    .joinchat,
    .ht-ctc-chat,
    .wa-chat-box,
    .sow-whatsapp,
    #whatsapp-widget {
        transform: scale(0.8) !important;
        transform-origin: bottom left !important;
        bottom: 10px !important;
        z-index: 9999 !important;
    }
}


/* ===============================
   Video Gallery (Optimized Premium)
   =============================== */
.mtc-video-gallery { background: transparent !important; padding: 20px 0; }
.mtc-video-swiper { position: relative; padding: 0 0 18px 0; overflow: hidden; width: 100%; }

.mtc-video-swiper .swiper-wrapper { align-items: stretch; }

.mtc-video-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    height: auto;
    
    /* Cero transiciones CSS para dejar que Swiper domine y no parpadee en móvil */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0); 
}

/* Transiciones dedicadas SOLO a escritorio, resguardando el móvil */
@media (min-width: 1024px) {
    .mtc-video-swiper .swiper-slide {
        transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .mtc-video-swiper .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.65;
        transform: scale(0.95);
    }
}

.mtc-video-card { display: flex; justify-content: center; width: 100%; position: relative; }

.mtc-video-frame {
    position: relative; width: 100%; aspect-ratio: 9 / 16 !important; background: #000000; 
    border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateZ(0);
}

.mtc-video {
    width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.35s ease-in;
}

.mtc-video.loaded { opacity: 1; }

.mtc-video-overlay {
    position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end;
    padding: 20px 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.85) 100%);
    color: #fff; pointer-events: none; z-index: 5;
}

.mtc-video-meta { max-width: 75%; z-index: 2; pointer-events: auto; }
.mtc-video-meta h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.mtc-video-meta p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #f1f1f1 !important; font-weight: 500; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.mtc-video-tags { font-size: 13px; color: #ffffff !important; opacity: 0.9; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

.mtc-video-actions { display: flex; flex-direction: column; gap: 16px; pointer-events: auto; margin-bottom: 24px; z-index: 2; align-items: center; }
.mtc-action { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; width: 38px; height: 38px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.4); }
.mtc-action:active { transform: scale(0.85); }
.mtc-action.heart-pop { animation: heartPopMini 0.4s ease-out; }
@keyframes heartPopMini { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
.mtc-action::before { content: ''; width: 28px; height: 28px; display: block; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.6)); transition: all 0.2s ease; }

/* Iconos */
.mtc-action.like::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); }
.mtc-action.like.active::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff2b54' stroke='%23ff2b54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); filter: drop-shadow(0px 0px 8px rgba(255, 43, 84, 0.5)); }
.mtc-action.save::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>"); }
.mtc-action.save.active::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23facc15' stroke='%23facc15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>"); filter: drop-shadow(0px 0px 8px rgba(250, 204, 21, 0.5)); }
.mtc-action.share::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/><polyline points='16 6 12 2 8 6'/><line x1='12' y1='2' x2='12' y2='15'/></svg>"); }
.mtc-action.sound::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'></polygon><line x1='23' y1='9' x2='17' y2='15'></line><line x1='17' y1='9' x2='23' y2='15'></line></svg>"); }
.mtc-action.sound.active::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'></polygon><path d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'></path></svg>"); }

.mtc-double-tap-heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 100px; height: 100px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff2b54' stroke='none'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; pointer-events: none; z-index: 10; }
.mtc-double-tap-heart.animate { animation: doubleTapGiant 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes doubleTapGiant { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }


/* =======================================================
   FLECHAS ELIMINADAS (Minimalismo Absoluto libre de Bugs)
   ======================================================= */
.mtc-video-prev,
.mtc-video-next {
    display: none !important;
}


/* ==========================================================
   PAGINACIÓN (Puntitos Funcionales)
   ========================================================== */
.mtc-video-pagination { margin-top: 24px; text-align: center; }
.mtc-video-pagination .swiper-pagination-bullet { background: #000; opacity: 0.2; }
.mtc-video-pagination .swiper-pagination-bullet-active { opacity: 0.8; }


/* ==========================================================
   MOBILE (Altura pequeña a 55%)
   ========================================================== */
@media (max-width: 768px) {
    .mtc-video-gallery, .mtc-video-gallery .responsive-container, .mtc-video-gallery .alignwide { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    .mtc-video-swiper { padding: 0 0 20px 0 !important; }
    .mtc-video-card { height: 55dvh !important; max-height: 600px; min-height: 380px; }
    .mtc-video-frame { height: 100% !important; width: 100% !important; aspect-ratio: auto !important; border-radius: 16px !important; }
    
    .mtc-action { width: 34px !important; height: 34px !important; }
    .mtc-action::before { width: 26px !important; height: 26px !important; }
}











/* Estilos para el video dinámico del producto (Plano sin Sombras ni Bordes Redondeados) */
.custom-product-video-container {
    width: 100%;
    margin: 30px 0; /* Mantener solo espaciado vertical arriba y abajo */
    padding: 0 !important; /* Elimina cualquier espaciado lateral en PC */
    clear: both;
    display: flex;
    justify-content: center;
}

.custom-product-video-container video {
    width: 100%;
    max-width: 1320px; /* Máximo ancho en PC */
    height: auto;
    max-height: 850px;
    object-fit: cover;
    border-radius: 0px !important; /* Bordes planos (sin curvas) en escritorio */
    box-shadow: none !important; /* Elimina la sombra para un diseño totalmente plano */
    display: block;
}

/* Ajustes para Móvil y Tablet */
@media (max-width: 768px) {
    .custom-product-video-container {
        margin: 15px 0; /* Reducción de margen vertical para móvil */
        padding: 0 !important; /* Elimina el margen lateral para un diseño de borde a borde (edge-to-edge) */
    }
    
    .custom-product-video-container video {
        border-radius: 0px !important; /* Bordes planos (sin curvas) en móvil */
        box-shadow: none !important; /* Asegurar eliminación de sombra en móvil */
        max-height: 500px; /* Altura máxima cómoda en móvil */
    }
}



/* =========================================
   MEJORA VISUAL DEL DISPARADOR DE BÚSQUEDA EN CABECERA MÓVIL
   (Estilo Minimalista: Fondo Blanco y Borde Negro)
   ========================================= */

@media (max-width: 921px) {

    /* Asegura que el fondo de la sección del buscador sea blanco y limpio como la segunda foto */
    .site-header-below-section-center,
    .ast-below-header-wrap,
    .ast-below-header-bar,
    .site-below-header-wrap {
        background-color: #ffffff !important;
        background: #ffffff !important;
        border: none !important;
    }

    .site-header-below-section-center .ast-header-search {
        padding: 10px 15px !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
    }

    .site-header-below-section-center .ast-search-menu-icon.slide-search,
    .site-header-below-section-center .ast-search-icon {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        background-color: #ffffff !important;
    }

    /* Estructura de la barra de búsqueda (Píldora) */
    .site-header-below-section-center a.slide-search.astra-search-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 500px !important;
        height: 36px !important; /* Reducido de 44px a 36px para hacerla más delgada y elegante */
        background-color: #ffffff !important; /* Fondo Blanco */
        border: 1px solid #000000 !important; /* Borde Negro Fino */
        border-radius: 30px !important; /* Redondeado idéntico a la foto */
        padding: 0 4px 0 16px !important; /* Ajustado el espacio interno para el nuevo tamaño */
        box-sizing: border-box !important;
        text-decoration: none !important;
        cursor: pointer !important;
        box-shadow: none !important; /* Sin sombras pesadas */
    }

    /* Texto guía simulado (Placeholder) */
    .site-header-below-section-center a.slide-search.astra-search-icon::before {
        content: "Search for anything..." !important;
        color: #888888 !important; /* Gris suave de la imagen */
        font-size: 13px !important; /* Reducido de 14px a 13px para balancear la altura */
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        font-family: var(--font-primary) !important;
        display: inline-block !important;
    }

    /* Ocultar el texto de accesibilidad nativo */
    .site-header-below-section-center a.slide-search.astra-search-icon .screen-reader-text {
        display: none !important;
    }

    /* Botón circular de la lupa */
    .site-header-below-section-center a.slide-search.astra-search-icon span.ast-icon.icon-search {
        background-color: #000000 !important; /* Botón Negro */
        width: 28px !important; /* Reducido de 32px a 28px para encajar proporcionalmente */
        height: 28px !important; /* Reducido de 32px a 28px */
        border-radius: 50% !important; /* Círculo perfecto */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        transition: opacity 0.2s ease !important;
    }

    /* Feedback visual al presionar el botón */
    .site-header-below-section-center a.slide-search.astra-search-icon:active span.ast-icon.icon-search {
        opacity: 0.8 !important;
    }

    /* SVG de la lupa */
    .site-header-below-section-center a.slide-search.astra-search-icon span.ast-icon.icon-search svg {
        width: 12px !important; /* Reducido de 14px a 12px para centrarlo estéticamente */
        height: 12px !important; /* Reducido de 14px a 12px */
        fill: #ffffff !important; /* Lupa Blanca */
        stroke: #ffffff !important;
        margin: 0 !important;
        display: block !important;
    }
}


/* Contenedor general para videos de YouTube */
.custom-youtube-container {
    width: 100%;
    max-width: 1320px;
    margin: 30px auto;
    aspect-ratio: 16 / 9; /* Proporción estándar horizontal */
    clear: both;
}

/* Adaptación específica para YouTube Shorts (Verticales) */
.custom-youtube-container.is-youtube-short {
    max-width: 380px; /* Ancho máximo sugerido para que no se vea gigante en PC */
    aspect-ratio: 9 / 16; /* Proporción vertical */
}

/* Estilos para el iframe */
.custom-youtube-container iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .custom-youtube-container {
        margin: 15px auto;
        padding: 0 10px; /* Pequeño margen para que no toque los bordes de la pantalla */
        box-sizing: border-box;
    }
    .custom-youtube-container.is-youtube-short {
        max-width: 85%; /* Se adapta al tamaño de la pantalla móvil */
    }
}