/*
Theme Name: Zota Child
Description: This is a child theme for Zota
Author: Thembay
Author URI: https://thembay.com/
Version: 2.0
Template: zota
*/
/* OPTIMIZED: 2026-03-28 — consolidated from 1976 lines, all duplications removed */

/* =================================================================
   0. CRITICAL FIXES — parsed first to prevent FOUC & layout shift
   ================================================================= */





/* Textos del Checkout ahora manejados nativamente por PHP */
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout h1.page-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 24px !important;
    line-height: 1.3 !important;
}

body.woocommerce-checkout h3#order_review_heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 28px 0 16px 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

/* 0e. FOUC — Prevent giant logo flash */
.tbay-mainmenu .custom-logo,
.site-header .custom-logo,
.tbay-logo img,
a.custom-logo-link img {
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 0f. Header stability — reserve space for Elementor search bar that lazy loads.
   The search section is elementor-element-41fc* (same across home and checkout).
   Measured: starts at 0px, grows to 113px when loaded. Reserve full height.
   Added: skeleton shimmer effect so empty space doesn't look like a gap. */
@media (max-width: 768px) {
    [class*="elementor-element-41fc"] {
        min-height: 113px !important;
        position: relative !important;
    }

    .elementor-top-section.elementor-hidden-desktop.elementor-hidden-tablet {
        min-height: 113px !important;
        position: relative !important;
    }

    /* Skeleton placeholder: shows a fake search bar shape while Elementor loads */
    [class*="elementor-element-41fc"]:empty::before,
    .elementor-top-section.elementor-hidden-desktop.elementor-hidden-tablet>.elementor-container:empty::before {
        content: "" !important;
        display: block !important;
        margin: 16px auto !important;
        width: calc(100% - 32px) !important;
        height: 44px !important;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
        background-size: 200% 100% !important;
        animation: mp-skeleton-shimmer 1.5s infinite !important;
        border-radius: 8px !important;
    }
}

@keyframes mp-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* 0g. iPhone touch fix — comprehensive approach.
   Previous version had conflicting transforms that broke iOS hit-testing.
   This version uses: touch-action, min-height for tap targets, cursor hints,
   and ensures no parent steals touch events. JS handles programmatic focus. */
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout textarea {
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: text;
    min-height: 44px;
}

body.woocommerce-checkout select {
    touch-action: manipulation;
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    min-height: 44px;
}

/* Ensure WooCommerce input wrappers don't steal touch events */
body.woocommerce-checkout .woocommerce-input-wrapper {
    pointer-events: auto !important;
    position: relative !important;
    display: block !important;
}

body.woocommerce-checkout .form-row {
    position: relative !important;
    z-index: auto !important;
}

/* Labels must not overlay inputs on iOS */
body.woocommerce-checkout .form-row label {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

body.woocommerce-checkout .form-row input,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
    position: relative !important;
    z-index: 2 !important;
}





/* =================================================================
   1. CARRITO (página /cart/) — Desktop + Mobile
   ================================================================= */

/* Desktop: miniatura completa sin recorte */
.woocommerce-cart-form__contents td.product-thumbnail img,
.woocommerce-cart-form__contents td.product-thumbnail .mp-cart-thumb {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    object-fit: contain !important;
    background: #f5f5f5 !important;
    border-radius: 6px !important;
}

/* Desktop: forzar tabla real (Zota la convierte a flex, lo que rompe columnas) */
@media (min-width: 768px) {
    .woocommerce-cart-form__contents {
        display: table !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

    .woocommerce-cart-form__contents thead {
        display: table-header-group !important;
    }

    .woocommerce-cart-form__contents thead tr {
        display: table-row !important;
    }

    .woocommerce-cart-form__contents thead th {
        display: table-cell !important;
    }

    .woocommerce-cart-form__contents tbody {
        display: table-row-group !important;
    }

    .woocommerce-cart-form__contents tbody tr {
        display: table-row !important;
    }

    .woocommerce-cart-form__contents tbody td {
        display: table-cell !important;
        vertical-align: middle !important;
    }

    /* Anchos de columnas con table-layout:fixed (porcentajes) */
    .woocommerce-cart-form__contents th.product-remove,
    .woocommerce-cart-form__contents td.product-remove {
        width: 3% !important;
        padding: 10px 4px !important;
        text-align: center !important;
    }

    .woocommerce-cart-form__contents th.product-thumbnail,
    .woocommerce-cart-form__contents td.product-thumbnail {
        width: 8% !important;
        padding: 10px 5px !important;
    }

    /* "Producto" header está en th.product-thumbnail — mover visualmente al name */
    .woocommerce-cart-form__contents th.product-thumbnail {
        font-size: 0 !important;
    }

    .woocommerce-cart-form__contents th.product-name::after {
        content: "Producto" !important;
        font-size: 14px !important;
    }

    .woocommerce-cart-form__contents th.product-name,
    .woocommerce-cart-form__contents td.product-name {
        width: 39% !important;
        padding: 10px 12px !important;
    }

    .woocommerce-cart-form__contents th.product-price,
    .woocommerce-cart-form__contents td.product-price {
        width: 17% !important;
        padding: 10px 8px !important;
        text-align: center !important;
    }

    .woocommerce-cart-form__contents td.product-price,
    .woocommerce-cart-form__contents td.product-subtotal {
        white-space: nowrap !important;
    }

    .woocommerce-cart-form__contents th.product-quantity,
    .woocommerce-cart-form__contents td.product-quantity {
        width: 13% !important;
        padding: 10px 8px !important;
        text-align: center !important;
    }

    .woocommerce-cart-form__contents th.product-subtotal,
    .woocommerce-cart-form__contents td.product-subtotal {
        width: 17% !important;
        padding: 10px 8px !important;
        text-align: center !important;
    }
}

/* Variación en cart: más sutil */
.woocommerce-cart-form__contents td.product-name .variation {
    margin-top: 4px !important;
    font-size: 12px !important;
    color: #64748b !important;
}

.woocommerce-cart-form__contents td.product-name .variation dt,
.woocommerce-cart-form__contents td.product-name .variation dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
}

.woocommerce-cart-form__contents td.product-name .variation dd p {
    display: inline !important;
    margin: 0 !important;
}

/* Precio tachado en cart — misma estética que checkout (aplica a precio unitario y subtotal) */
body.woocommerce-cart table.shop_table .cart_item td.product-price del.mp-checkout-del,
body.woocommerce-cart table.shop_table .cart_item td.product-price del.mp-checkout-del .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table .cart_item td.product-subtotal del.mp-checkout-del,
body.woocommerce-cart table.shop_table .cart_item td.product-subtotal del.mp-checkout-del .woocommerce-Price-amount {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-right: 4px !important;
}

body.woocommerce-cart table.shop_table .cart_item td.product-price ins.mp-checkout-ins,
body.woocommerce-cart table.shop_table .cart_item td.product-subtotal ins.mp-checkout-ins {
    text-decoration: none !important;
}

body.woocommerce-cart table.shop_table .cart_item td.product-price ins.mp-checkout-ins .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table .cart_item td.product-subtotal ins.mp-checkout-ins .woocommerce-Price-amount {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* =================================================================
   1b. CARRITO — Botón remove (X) gris como side cart
   ================================================================= */
body.woocommerce-cart table.shop_table td.product-remove a.remove {
    color: #bbb !important;
    font-size: 18px !important;
    transition: color 0.2s ease !important;
}

body.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
    color: #e74c3c !important;
    background: transparent !important;
}

/* =================================================================
   1c. CARRITO — Sección Totales del carrito (moderna)
   ================================================================= */
.cart_totals {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 10px !important;
}

.cart_totals h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.cart_totals table.shop_table {
    border: none !important;
    margin-bottom: 0 !important;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    border: none !important;
    padding: 10px 0 !important;
}

.cart_totals table.shop_table th {
    font-weight: 500 !important;
    color: #64748b !important;
    font-size: 14px !important;
}

.cart_totals table.shop_table td {
    font-weight: 600 !important;
    color: #1e293b !important;
    text-align: right !important;
}

.cart_totals .order-total th {
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.cart_totals .order-total td {
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.cart_totals .order-total td .woocommerce-Price-amount {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* =================================================================
   1d. CARRITO — CTA "Continuar al envío" flotante (fixed bottom)
   ================================================================= */
body.woocommerce-cart .wc-proceed-to-checkout {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1) !important;
}

body.woocommerce-cart .wc-proceed-to-checkout .mp-cart-cta {
    margin: 0 auto !important;
    max-width: 600px !important;
}

/* Transición suave al ocultar/mostrar */
body.woocommerce-cart .wc-proceed-to-checkout {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}

body.woocommerce-cart .wc-proceed-to-checkout.mp-hidden {
    transform: translateY(120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Espacio inferior mínimo — el CTA se oculta al llegar al footer */
body.woocommerce-cart .cart_totals {
    margin-bottom: 16px !important;
}

/* WhatsApp: subir sobre el CTA en cart */
body.woocommerce-cart .joinchat {
    bottom: 90px !important;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Cuando el CTA se oculta al llegar al footer, bajar WhatsApp */
body.woocommerce-cart.mp-cart-btn-hidden .joinchat {
    bottom: 24px !important;
}

/* =================================================================
   1e. CARRITO — Cupón y acciones
   ================================================================= */
body.woocommerce-cart .woocommerce-cart-form .actions {
    padding: 16px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Cupón: input-group unificado — input + botón pegados como una sola unidad */
body.woocommerce-cart .coupon {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
}

/* Ocultar la etiqueta — el placeholder ya lo explica */
body.woocommerce-cart .coupon label {
    display: none !important;
}

body.woocommerce-cart .coupon .input-text {
    border: 1.5px solid #cbd5e1 !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    height: 44px !important;
    width: 220px !important;
    float: none !important;
    margin: 0 !important;
    background: #fff !important;
    color: #334155 !important;
    transition: border-color 0.2s !important;
}

body.woocommerce-cart .coupon .input-text:focus {
    border-color: #4a7c59 !important;
    outline: none !important;
    box-shadow: none !important;
    z-index: 1 !important;
    position: relative !important;
}

body.woocommerce-cart .coupon .button {
    background: #4a7c59 !important;
    color: #fff !important;
    border: 1.5px solid #4a7c59 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 44px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
    transition: background 0.2s, border-color 0.2s !important;
}

body.woocommerce-cart .coupon .button:hover {
    background: #3a6a49 !important;
    border-color: #3a6a49 !important;
}

body.woocommerce-cart button[name="update_cart"] {
    background: transparent !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

body.woocommerce-cart button[name="update_cart"]:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

/* =================================================================
   1f. CARRITO — Eliminar espacio vacío
   ================================================================= */
.wc-proceed-to-checkout:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Quitar padding-bottom del body que agrega espacio blanco al final.
   El tema padre Zota agrega `html body { padding-bottom: 56px }` en mobile.
   Override aplica a todas las páginas donde no queremos ese espacio.
   KNOWN ISSUE (no fix por ser solo admin testing): cuando el usuario está
   logueado como admin de WP, el tema padre aplica `top:-46px` al body
   (regla `html body.admin-bar.tbay-body-default`), creando un gap de 46px
   debajo del footer. Esto solo afecta a vista admin para QA — los clientes
   nunca lo ven. Documentado para no volver a chasing. */
body.woocommerce-cart,
body.home,
body.woocommerce-checkout,
body.woocommerce-order-received {
    padding-bottom: 0 !important;
}

@media (max-width: 767px) {

    .woocommerce-cart-form__contents thead,
    button[name="update_cart"],
    .woocommerce-cart-form__contents td::before,
    .woocommerce-cart-form__contents td.product-subtotal {
        display: none !important;
    }

    .woocommerce-cart-form__contents tr.cart_item {
        display: block !important;
        padding: 15px 15px 15px 115px !important;
        margin-bottom: 15px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        background: #fff !important;
        position: relative !important;
        min-height: 130px !important;
    }

    .woocommerce-cart-form__contents td.product-thumbnail {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        width: 85px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        display: block !important;
    }

    .woocommerce-cart-form__contents td.product-thumbnail img {
        width: 85px !important;
        height: 85px !important;
        max-width: 85px !important;
        object-fit: contain !important;
        background: #f5f5f5 !important;
        border-radius: 6px !important;
    }

    .woocommerce-cart-form__contents td:not(.product-thumbnail):not(.product-remove):not(.product-subtotal) {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        border: none !important;
        padding: 0 0 8px 0 !important;
        margin: 0 !important;
    }

    .woocommerce-cart-form__contents td.product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        padding: 0 !important;
        border: none !important;
        z-index: 10 !important;
        display: block !important;
    }

    .product-name a {
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        display: block !important;
        padding-right: 25px !important;
    }

    /* Precio sin descuento: bold grande */
    .product-price .amount {
        font-weight: bold !important;
        color: #000 !important;
        font-size: 1.15rem !important;
    }

    /* Precio tachado mobile: inline en la misma línea */
    .woocommerce-cart-form__contents td.product-price del.mp-checkout-del {
        display: inline !important;
    }

    .woocommerce-cart-form__contents td.product-price del.mp-checkout-del .woocommerce-Price-amount {
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        display: inline !important;
    }

    .woocommerce-cart-form__contents td.product-price ins.mp-checkout-ins {
        text-decoration: none !important;
        display: inline !important;
    }

    .woocommerce-cart-form__contents td.product-price ins.mp-checkout-ins .woocommerce-Price-amount {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        display: inline !important;
    }

    .woocommerce-cart-form__contents td.product-quantity .quantity {
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .woocommerce-cart-form .actions .coupon {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;
    }

    .woocommerce-cart-form .actions .coupon label {
        display: none !important;
    }

    .woocommerce-cart-form .actions .coupon .input-text {
        width: 58% !important;
        margin: 0 !important;
        height: 48px !important;
        border-radius: 8px !important;
        border: 1px solid #ccc !important;
        padding: 0 15px !important;
    }

    .woocommerce-cart-form .actions .coupon .button {
        width: 38% !important;
        margin: 0 !important;
        height: 48px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* CTA mobile: ancho completo */
    .wc-proceed-to-checkout .mp-cart-cta {
        width: 100% !important;
    }

    /* Totales mobile: padding reducido */
    .cart_totals {
        padding: 16px !important;
        margin-top: 8px !important;
    }

    .cart_totals h2 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }
}

/* El título del carrito ahora se gestiona nativamente desde PHP */
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart h1.page-title {
    font-size: 26px !important;
    font-weight: bold !important;
    color: #111 !important;
    margin-bottom: 20px !important;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
    border-left: 4px solid #A4CC94 !important;
    border-radius: 8px !important;
    animation: palpitarAviso 0.4s ease-out !important;
}

/* Cart page notices (remove product, coupon, etc.) */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
    display: block !important;
    position: relative !important;
    padding: 14px 16px 14px 44px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: #f0f9f0 !important;
    border: 1px solid #c8e6c9 !important;
    border-left: 4px solid #A4CC94 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Ícono check: verde, alineado a la izquierda */
body.woocommerce-cart .woocommerce-message::before {
    content: "✓" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #27ae60 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body.woocommerce-cart .woocommerce-error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    border-left-color: #ef4444 !important;
}

body.woocommerce-cart .woocommerce-error::before {
    color: #ef4444 !important;
}

body.woocommerce-cart .woocommerce-message a.restore-item,
body.woocommerce-cart .woocommerce-message .button {
    font-weight: 600 !important;
    color: #27ae60 !important;
    text-decoration: underline !important;
}

@keyframes palpitarAviso {
    0% {
        opacity: 0.5;
        transform: scale(0.98);
    }

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

/* =================================================================
   2. CHECKOUT — Secciones del formulario
   ================================================================= */

/* Checkout title spacing */
body.woocommerce-checkout .page-title-wrapper {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
}



/* =================================================================
   3. BOTÓN MAESTRO — Add to Cart (producto) 
   ================================================================= */
.woocommerce div.product form.cart button.single_add_to_cart_button {
    background-color: #A4CC94 !important;
    color: #0b2e13 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    height: 62px !important;
    min-height: 62px !important;
    font-size: 17px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 5px 0 #7eab6b, 0 8px 15px rgba(0, 0, 0, 0.15) !important;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out !important;
    border: none !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:active {
    transform: translateY(4px) !important;
    box-shadow: 0 1px 0 #7eab6b, 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* =================================================================
   3b. BOTÓN CHECKOUT — "Proceder al Pago" (ONE definition — was 4x)
   Estilo 3D consistente con side cart, color de marca #A4CC94
   ================================================================= */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout #payment #place_order {
    background: #4a7c59 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    width: 100% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 0 #2d5238, 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out !important;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #payment #place_order:hover {
    background: #3a6a49 !important;
    box-shadow: 0 4px 0 #2d5238, 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

body.woocommerce-checkout #place_order:active,
body.woocommerce-checkout #payment #place_order:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #2d5238, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile: sticky at bottom but as a floating button (not full-width bar) */
@media (max-width: 768px) {

    body.woocommerce-checkout #place_order,
    body.woocommerce-checkout #payment #place_order {
        position: fixed !important;
        bottom: 16px !important;
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
        z-index: 9999 !important;
        margin: 0 auto !important;
        height: 60px !important;
        box-shadow: 0 4px 0 #2d5238, 0 -4px 20px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
    }

    /* Hide when scrolled to footer — high specificity to win over all other rules */
    body.woocommerce-checkout #place_order.mp-hidden,
    body.woocommerce-checkout #payment #place_order.mp-hidden {
        transform: translateY(120%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Space at bottom of form so button doesn't cover content */
    body.woocommerce-checkout form.checkout {
        padding-bottom: 100px !important;
    }

    body.woocommerce-checkout #payment {
        padding-bottom: 85px !important;
    }
}

/* =================================================================
   4. BARRA FLOTANTE PRODUCTO (móvil)
   ================================================================= */
@media (max-width: 768px) {

    .tbay-sticky-add-to-cart,
    #sticky-custom-add-to-cart,
    .xoo-wsc-basket {
        display: none !important;
    }

    /*
     * PRODUCTOS SIMPLES: esconder form.cart completo fuera del viewport.
     * La sticky bar reemplaza qty + botón en su totalidad.
     */
    body.single-product:not(.mp-product-variable) form.cart {
        position: fixed !important;
        bottom: -9999px !important;
        left: -9999px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /*
     * PRODUCTOS VARIABLES: form.cart permanece en el flujo normal del DOM
     * para que la tabla .variations (selectores de color/talla/etc.) sea
     * visible e interactiva. Solo se esconde la fila de acción
     * (.woocommerce-variation-add-to-cart) que contiene qty + botón,
     * ya que la sticky bar los reemplaza.
     * Sin esto, el usuario no puede seleccionar variante en móvil y
     * WooCommerce nunca habilita el botón de compra.
     */
    body.mp-product-variable.single-product .woocommerce-variation-add-to-cart {
        display: none !important;
    }

    .joinchat,
    .wa-chat-box {
        transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    body.single-product .joinchat,
    body.single-product .wa-chat-box {
        bottom: 100px !important;
    }

    body.single-product {
        padding-bottom: 100px !important;
    }

    body.single-product.mp-bar-hidden {
        padding-bottom: 0 !important;
    }
}

/* Hide native spin buttons on mobile */
@media (max-width: 768px) {

    .quantity input[type="number"]::-webkit-inner-spin-button,
    .quantity input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

/* =================================================================
   5. SIDE CART OVERHAUL (Xootix)
   ================================================================= */
.xoo-wsc-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.xoo-wsc-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 16px !important;
    -webkit-overflow-scrolling: touch !important;
}

.xoo-wsc-product {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: relative !important;
}

.xoo-wsc-product:last-child {
    border-bottom: none !important;
}

/* Fallback para layout "sm" del side cart (si el plugin lo usa) */
.xoo-wsc-sm-col {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex-shrink: 0 !important;
}

.xoo-wsc-sm-col img {
    border-radius: 6px !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    background: #f5f5f5 !important;
    display: block !important;
}

/* Protección global: NINGUNA imagen en el side cart puede desbordar */
.xoo-wsc-product img {
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

.xoo-wsc-pname {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.xoo-wsc-qty-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 2px !important;
}

.xoo-wsc-qty-price del {
    color: #999 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

.xoo-wsc-psavings {
    margin-top: 4px !important;
}

.xoo-wsc-psavings .xoo-wsc-psalabel {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #2d7a2d !important;
}

.xoo-wsc-smr-del {
    color: #bbb !important;
    font-size: 16px !important;
    transition: color 0.2s !important;
}

.xoo-wsc-smr-del:hover {
    color: #e74c3c !important;
}

/* Side Cart qty controls (ONE definition — was duplicated with conflicts) */
.mp-qty-row {
    margin-top: 8px !important;
    display: block !important;
    width: 100% !important;
}

.mp-qty-ctrl {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 120px !important;
    height: 42px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 3px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
}

.mp-qty-btn {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #374151 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: none !important;
    border: 1px solid #e0e0e0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mp-qty-btn:active {
    background: #e5e7eb !important;
}

.mp-qty-val {
    width: 38px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border: none !important;
    background: transparent !important;
    color: #111827 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    outline: none !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.mp-qty-val::-webkit-outer-spin-button,
.mp-qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.mp-qty-ctrl.mp-loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Simple price display */
.mp-simple-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 2px !important;
    display: block !important;
}

.mp-simple-price del {
    color: #999 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* Coupon section */
.mp-coupon-section {
    padding: 12px 16px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.mp-coupon-toggle {
    font-size: 13px !important;
    color: #666 !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mp-coupon-toggle::before {
    content: "+" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #999 !important;
    transition: transform 0.3s !important;
    display: inline-block !important;
}

.mp-coupon-toggle.mp-open::before {
    transform: rotate(45deg) !important;
}

.mp-coupon-form {
    display: none;
    margin-top: 10px !important;
    gap: 8px !important;
    align-items: center !important;
}

.mp-coupon-form.mp-visible {
    display: flex !important;
}

.mp-coupon-input {
    flex: 1 !important;
    height: 38px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    color: #333 !important;
    background: #fafafa !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
}

.mp-coupon-input:focus {
    border-color: #A4CC94 !important;
    background: #fff !important;
}

.mp-coupon-apply {
    height: 38px !important;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mp-coupon-apply:active {
    background: #555 !important;
}

.mp-coupon-apply.mp-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.mp-coupon-msg {
    font-size: 12px !important;
    margin-top: 6px !important;
    padding: 0 !important;
}

.mp-coupon-msg.mp-success {
    color: #2d7a2d !important;
}

.mp-coupon-msg.mp-error {
    color: #e74c3c !important;
}

.mp-applied-coupons {
    margin-top: 8px !important;
}

.mp-applied-coupon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f1f8f1 !important;
    border: 1px solid #c8e6c9 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2d7a2d !important;
}

.mp-remove-coupon {
    cursor: pointer !important;
    color: #999 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.mp-remove-coupon:hover {
    color: #e74c3c !important;
}

/* Side cart footer */
.xoo-wsc-ft-buttons-cont {
    display: none !important;
}

.xoo-wsc-footer {
    padding: 0 !important;
    border-top: 1px solid #eee !important;
    background: #fff !important;
    flex-shrink: 0 !important;
}

.xoo-wsc-ft-totals {
    padding: 16px 16px 0 16px !important;
}

.xoo-wsc-footer-txt {
    font-size: 12px !important;
    color: #999 !important;
    padding: 8px 16px 0 16px !important;
    display: block !important;
}

.mp-cta-wrapper {
    padding: 24px 16px 16px 16px !important;
}

.mp-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    background-color: #A4CC94 !important;
    color: #0b2e13 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 0 #7eab6b, 0 6px 12px rgba(0, 0, 0, 0.12) !important;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mp-cta-btn:hover {
    box-shadow: 0 4px 0 #7eab6b, 0 8px 18px rgba(0, 0, 0, 0.18) !important;
    color: #0b2e13 !important;
    text-decoration: none !important;
}

.mp-cta-btn:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #7eab6b, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.xoo-wsc-header {
    padding: 18px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* =================================================================
   6. SIDE CART TOTALS
   ================================================================= */
.xoo-wsc-ft-amt-subtotal,
.xoo-wsc-ft-amt-savings {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.xoo-wsc-ft-amt-savings {
    color: #2d7a2d !important;
    font-size: 15px !important;
}

.xoo-wsc-ft-amt-subtotal {
    color: #1a1a1a !important;
    font-size: 16px !important;
}

.mp-ft-label {
    font-weight: 500 !important;
}

.mp-ft-value {
    font-weight: 800 !important;
}

/* =================================================================
   7. BARRA FLOTANTE STICKY BAR (producto single)
   ================================================================= */
#mp-sticky-bar {
    display: none;
}

@media (max-width: 768px) {
    #mp-sticky-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        padding: 8px 18px !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1) !important;
        margin: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        transform: translateY(0) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #mp-sticky-bar.hidden-bar {
        transform: translateY(110%) !important;
    }

    #mp-qty-widget {
        display: flex !important;
        width: 110px !important;
        min-width: 110px !important;
        height: 50px !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
        background: #eef2f5 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mp-qty-widget .mp-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        font-size: 24px !important;
        font-weight: bold !important;
        color: #333333 !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #mp-qty-widget .mp-btn:active {
        background: #dde3e8 !important;
    }

    #mp-qty-widget .mp-val {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        height: 100% !important;
        font-weight: bold !important;
        font-size: 18px !important;
        line-height: normal !important;
        color: #111111 !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        text-align: center !important;
        outline: none !important;
        -moz-appearance: textfield !important;
        box-shadow: none !important;
        width: 38px !important;
    }

    #mp-qty-widget .mp-val::-webkit-outer-spin-button,
    #mp-qty-widget .mp-val::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    #mp-qty-widget .mp-val:focus {
        background: #e0e6eb !important;
    }

    #mp-sticky-bar #mp-agregar-btn {
        flex: 1 !important;
        height: 50px !important;
        min-height: 50px !important;
        background-color: #A4CC94 !important;
        color: #0b2e13 !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        text-transform: uppercase !important;
        border: none !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 0 #7eab6b, 0 6px 12px rgba(0, 0, 0, 0.12) !important;
        transition: box-shadow 0.15s, transform 0.15s !important;
        white-space: nowrap !important;
        padding: 0 16px !important;
        letter-spacing: 0.5px !important;
    }

    /* Estado: ninguna variante seleccionada — indicar al usuario que debe elegir */
    #mp-sticky-bar #mp-agregar-btn.mp-btn-needs-variation {
        background-color: #e8e8e8 !important;
        color: #666 !important;
        box-shadow: none !important;
        cursor: default !important;
        font-size: 13px !important;
        letter-spacing: 0 !important;
    }

    /* Estado: variante seleccionada pero sin stock.
     * Tono rojizo suave — comunica "no disponible" sin alarmar.
     * Distinto del gris neutro de "Selecciona un X" para que el usuario
     * entienda que el problema es stock, no una selección pendiente. */
    #mp-sticky-bar #mp-agregar-btn.mp-btn-agotado {
        background-color: #fde8e8 !important;
        color: #b91c1c !important;
        box-shadow: none !important;
        cursor: default !important;
        font-size: 13px !important;
        letter-spacing: 0 !important;
    }

    #mp-sticky-bar #mp-agregar-btn.mp-btn-needs-variation:active,
    #mp-sticky-bar #mp-agregar-btn.mp-btn-agotado:active {
        transform: none !important;
        box-shadow: none !important;
    }

    #mp-sticky-bar #mp-agregar-btn:active {
        transform: translateY(3px) !important;
        box-shadow: 0 1px 0 #7eab6b, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
}

/* "Ver todo en [Categoría]" — primer ítem del sub-menú offcanvas */
.mp-nav-ver-todo>a {
    font-weight: 700 !important;
    color: #00a650 !important;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 4px;
    padding-bottom: 10px !important;
}

.mp-nav-ver-todo>a:hover {
    color: #007a3c !important;
}

/* =================================================================
   8. CHECKOUT PREMIUM FORM FIELDS
   ================================================================= */

/* Kill all select arrows (ONE definition — was duplicated) */
.woocommerce-checkout select,
.woocommerce select,
.select2-selection--single {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

.woocommerce form .form-row::after,
.woocommerce form .form-row::before,
.woocommerce-checkout .form-row::after,
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-selection__arrow::after,
.select2-selection__arrow::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Premium field labels */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label,
body.woocommerce-checkout .woocommerce-additional-fields .form-row label,
body.woocommerce-checkout #billing_documento_field label,
body.woocommerce-checkout #billing_rut_field label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label .required,
body.woocommerce-checkout .woocommerce-additional-fields .form-row label .required {
    color: #ef4444 !important;
}

/* Premium inputs */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="text"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="email"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="tel"],
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper select,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper textarea,
body.woocommerce-checkout #billing_documento_field select,
body.woocommerce-checkout #billing_rut_field input {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input:focus,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper select:focus,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper textarea:focus,
body.woocommerce-checkout #billing_documento_field select:focus,
body.woocommerce-checkout #billing_rut_field input:focus {
    border-color: #00a650 !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 80, 0.12) !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Force native selects on mobile — kill Select2 (ONE definition — was duplicated) */
@media screen and (max-width: 767px) {
    body.woocommerce-checkout .select2-container {
        display: none !important;
    }

    /* IMPORTANT: Do NOT hide .select2-hidden-accessible — 
       that class goes on the real <select> and hiding it breaks iOS touch */
    body.woocommerce-checkout select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: 50px !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        width: 100% !important;
    }
}

/* Select2 styling for desktop */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
    padding: 14px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    height: auto !important;
    min-height: 50px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #00a650 !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 80, 0.12) !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    font-size: 15px !important;
    color: #0f172a !important;
    padding-left: 0 !important;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    width: 30px !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 20px !important;
}

body.woocommerce-checkout .select2-selection__arrow b {
    display: none !important;
}

/* RUT field spacing */
body.woocommerce-checkout #billing_rut_field {
    margin-top: 8px !important;
}

/* =================================================================
   9. PROGRESSIVE DISCLOSURE (ONE definition — was in CSS + PHP)
   ================================================================= */
body.woocommerce-checkout.mp-waiting-logistics #customer_details,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce-checkout-review-order-wrap,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce-checkout-review-order,
body.woocommerce-checkout.mp-waiting-logistics #order_review_heading,
body.woocommerce-checkout.mp-waiting-logistics #order_review,
body.woocommerce-checkout.mp-waiting-logistics #payment,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce-checkout-payment,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce-additional-fields,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce-account-fields,
body.woocommerce-checkout.mp-waiting-logistics .mp-notes-toggle,
body.woocommerce-checkout.mp-waiting-logistics .mp-security-notice,
body.woocommerce-checkout.mp-waiting-logistics .col-1,
body.woocommerce-checkout.mp-waiting-logistics .col-2,
body.woocommerce-checkout.mp-waiting-logistics .col2-set,
body.woocommerce-checkout.mp-waiting-logistics .shop_table,
body.woocommerce-checkout.mp-waiting-logistics table.shop_table,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce-checkout-review-order-table,
body.woocommerce-checkout.mp-waiting-logistics h3#order_review_heading {
    display: none !important;
}

/* Catch all headings during progressive disclosure */
body.woocommerce-checkout.mp-waiting-logistics .entry-content h2,
body.woocommerce-checkout.mp-waiting-logistics .entry-content h3,
body.woocommerce-checkout.mp-waiting-logistics .entry-content h4,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce h2,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce h3,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce h4 {
    display: none !important;
}

/* JS-driven hide for orphan elements */
body.woocommerce-checkout .mp-hide-until-logistics {
    display: none !important;
}

/* No spacing when form hidden */
body.woocommerce-checkout.mp-waiting-logistics form.checkout {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.woocommerce-checkout.mp-waiting-logistics #place_order {
    display: none !important;
}

/* Eliminate extra space below content */
body.woocommerce-checkout.mp-waiting-logistics {
    padding-bottom: 0 !important;
}

body.woocommerce-checkout.mp-waiting-logistics .site-content,
body.woocommerce-checkout.mp-waiting-logistics .main-content,
body.woocommerce-checkout.mp-waiting-logistics #main,
body.woocommerce-checkout.mp-waiting-logistics #primary,
body.woocommerce-checkout.mp-waiting-logistics .woocommerce {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    body.woocommerce-checkout.mp-waiting-logistics #payment {
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Reducir gap entre toggle/feedback y formulario en desktop */
body.woocommerce-checkout:not(.mp-waiting-logistics) form.checkout {
    padding-top: 12px !important;
}

body.woocommerce-checkout .wrapper-login-coupon {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =================================================================
   10. SHIPPING TOGGLE (Envío / Retiro)
   ================================================================= */
body.woocommerce-checkout .mp-shipping-section {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px 20px 20px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

body.woocommerce-checkout .mp-shipping-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}

body.woocommerce-checkout #mp-envio-retiro-toggle {
    display: flex !important;
    background: #e8ecf0 !important;
    padding: 5px !important;
    border-radius: 14px !important;
    border: none !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    gap: 4px !important;
}

body.woocommerce-checkout .mp-shipping-opt {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 14px 10px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: #64748b !important;
    font-size: 14px !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.woocommerce-checkout .mp-shipping-opt .mp-opt-icon {
    font-size: 22px !important;
    line-height: 1 !important;
}

body.woocommerce-checkout .mp-shipping-opt .mp-opt-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

body.woocommerce-checkout .mp-shipping-opt.active {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
}

body.woocommerce-checkout .mp-shipping-opt.active .mp-opt-label {
    font-weight: 700 !important;
}

/* Feedback messages */
body.woocommerce-checkout .mp-shipping-feedback {
    margin-bottom: 20px !important;
    animation: mp-fade-in 0.3s ease !important;
}

body.woocommerce-checkout .mp-feedback-box {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

body.woocommerce-checkout .mp-feedback-retiro strong {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 14px !important;
}

body.woocommerce-checkout .mp-feedback-envio strong {
    display: inline !important;
    font-size: inherit !important;
}

body.woocommerce-checkout .mp-feedback-box span {
    font-size: 12.5px !important;
    opacity: 0.8 !important;
}

body.woocommerce-checkout .mp-feedback-envio {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

body.woocommerce-checkout .mp-feedback-retiro {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

@keyframes mp-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Validación de campos — RUT (replica el comportamiento nativo del email de WooCommerce) */
body.woocommerce-checkout .form-row.woocommerce-validated #billing_rut,
body.woocommerce-checkout .form-row.woocommerce-validated input#billing_rut {
    border-color: #4caf50 !important;
    outline: none !important;
}

body.woocommerce-checkout .form-row.woocommerce-invalid #billing_rut,
body.woocommerce-checkout .form-row.woocommerce-invalid input#billing_rut {
    border-color: #d33 !important;
    outline: none !important;
}

body.woocommerce-checkout .mp-field-error {
    display: block !important;
    color: #d33 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}

/* =================================================================
   11. RESUMEN DE COMPRA — Tarjeta cohesiva v4
   Compacta, sin truncamiento, eje de precios limpio.
   ================================================================= */

/* Contenedor principal */
body.woocommerce-checkout .woocommerce-checkout-review-order {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
}

/* Producto — fila compacta sin borde propio */
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item {
    display: flex !important;
    align-items: center !important;
    padding: 0 0 10px 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* Último cart_item: sin padding-bottom extra antes del tfoot */
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item:last-of-type {
    padding-bottom: 0 !important;
}

/* Separador entre productos (solo si hay más de uno) */
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item+.cart_item {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 12px !important;
}

/* Eliminar CUALQUIER borde residual de Zota */
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item td,
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item td::before,
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item td::after {
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    background: transparent !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item td.product-name {
    flex: 1 !important;
    min-width: 0 !important;
}

body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item td.product-total {
    flex-shrink: 0 !important;
    padding-left: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* .checkout-item-wrapper */
body.woocommerce-checkout table.shop_table .checkout-item-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
}

/* Imagen del producto — borde sutil para definición */
body.woocommerce-checkout table.shop_table .checkout-prod-img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0 !important;
}

body.woocommerce-checkout table.shop_table .checkout-prod-img img,
body.woocommerce-checkout table.shop_table .checkout-prod-img .checkout-mini-img {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Descripción */
body.woocommerce-checkout table.shop_table .checkout-prod-desc {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Título SIN truncamiento — el usuario debe ver qué paga */
body.woocommerce-checkout table.shop_table .checkout-prod-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    text-overflow: unset !important;
}

/* Variante (Color, Talla) — peso menor que título */
body.woocommerce-checkout table.shop_table .checkout-prod-variation {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.3 !important;
}

/* Cantidad — solo visible si qty > 1 */
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table .checkout-prod-qty {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

/* Ocultar qty x1 redundante (como ML/Falabella: no se muestra "x1") */
body.woocommerce-checkout table.shop_table .cart_item.qty-is-1 .checkout-prod-qty {
    display: none !important;
}

/* Precio tachado en checkout — regular tachado + sale en negrita */
body.woocommerce-checkout table.shop_table .cart_item td.product-total del.mp-checkout-del,
body.woocommerce-checkout table.shop_table .cart_item td.product-total del.mp-checkout-del .woocommerce-Price-amount {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-right: 4px !important;
}

body.woocommerce-checkout table.shop_table .cart_item td.product-total ins.mp-checkout-ins {
    text-decoration: none !important;
}

body.woocommerce-checkout table.shop_table .cart_item td.product-total ins.mp-checkout-ins .woocommerce-Price-amount {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* Ocultar el pill viejo .product-quantity si aún se renderiza */
body.woocommerce-checkout table.shop_table .product-quantity {
    display: none !important;
}

/* ---- MOBILE: Reestructuración producto en resumen (estilo ML/Falabella) ---- */
@media (max-width: 768px) {

    /* Tarjeta: padding reducido en mobile para maximizar ancho útil */
    body.woocommerce-checkout .woocommerce-checkout-review-order {
        padding: 12px !important;
    }

    /* Fila producto: lado a lado, precio a la derecha arriba */
    body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item {
        align-items: flex-start !important;
    }

    /* Precio: columna derecha compacta, apilado vertical */
    body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .cart_item td.product-total {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        padding-left: 6px !important;
        white-space: nowrap !important;
        gap: 0px !important;
        max-width: 80px !important;
    }

    /* Thumbnail: subir a 64px */
    body.woocommerce-checkout table.shop_table .checkout-prod-img {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
    }

    body.woocommerce-checkout table.shop_table .checkout-prod-img img,
    body.woocommerce-checkout table.shop_table .checkout-prod-img .checkout-mini-img {
        width: 56px !important;
        height: 56px !important;
    }

    /* Wrapper: imagen alineada arriba, no al centro */
    body.woocommerce-checkout table.shop_table .checkout-item-wrapper {
        align-items: flex-start !important;
    }

    /* Desc: expandirse al máximo entre imagen y precio */
    body.woocommerce-checkout table.shop_table .checkout-prod-desc {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    /* Título: 2 líneas máximo, white-space normal para permitir wrap.
       Especificidad alta para ganarle al selector desktop. */
    body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table .checkout-prod-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Variante y qty: tamaño coherente */
    body.woocommerce-checkout table.shop_table .checkout-prod-variation,
    body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table .checkout-prod-qty {
        font-size: 12px !important;
    }

    /* Precio tachado: regular pequeño arriba, sale prominente abajo */
    body.woocommerce-checkout table.shop_table .cart_item td.product-total del.mp-checkout-del {
        display: block !important;
    }

    body.woocommerce-checkout table.shop_table .cart_item td.product-total del.mp-checkout-del,
    body.woocommerce-checkout table.shop_table .cart_item td.product-total del.mp-checkout-del .woocommerce-Price-amount {
        font-size: 10px !important;
        margin-right: 0 !important;
    }

    body.woocommerce-checkout table.shop_table .cart_item td.product-total ins.mp-checkout-ins {
        display: block !important;
    }

    body.woocommerce-checkout table.shop_table .cart_item td.product-total ins.mp-checkout-ins .woocommerce-Price-amount {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }
}

/* ---- TFOOT: Subtotal / Envío / Total ---- */
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot {
    display: block !important;
    width: 100% !important;
    border-top: 1.5px solid #cbd5e1 !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
}

/* Subtotal — discreto, gris, sin bold */
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.order-total):not(.shipping) th {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.order-total):not(.shipping) td,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.order-total):not(.shipping) td .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr:not(.order-total):not(.shipping) td .woocommerce-Price-amount bdi {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    text-align: right !important;
}

/* Envío — label + nota debajo, dash a la derecha para mantener eje de precios */
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping th {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping td {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    text-align: right !important;
}

/* Nota "Calculado según tu dirección" debajo del label Envío */
body.woocommerce-checkout .mp-shipping-pending-note {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    font-style: italic !important;
    line-height: 1.3 !important;
}

/* Dash en la columna de precio para mantener eje vertical limpio */
body.woocommerce-checkout .mp-shipping-dash {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #cbd5e1 !important;
}

/* Texto "Calculado según tu dirección" en fila de envío */
body.woocommerce-checkout .mp-shipping-pending {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

/* =================================================================
   MÉTODOS DE ENVÍO — Card style (estándar ML/Falabella/Amazon)
   Transforma los radio buttons nativos de WC en tarjetas seleccionables
   ================================================================= */

/* La fila tr.shipping no debe actuar como tabla cuando hay cards */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td {
    text-align: left !important;
    padding: 8px 0 !important;
}

/* Reset del UL nativo */
body.woocommerce-checkout #shipping_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

body.woocommerce-checkout #shipping_method li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar radio nativo sin perder accesibilidad */
body.woocommerce-checkout #shipping_method input[type="radio"].shipping_method {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* Label = card completo */
body.woocommerce-checkout #shipping_method label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #374151 !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout #shipping_method label:hover {
    border-color: #4a7c59 !important;
    background: #f0fdf4 !important;
}

/* Círculo radio custom — izquierda */
body.woocommerce-checkout #shipping_method label::before {
    content: '' !important;
    flex-shrink: 0 !important;
    width: 17px !important;
    height: 17px !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: border-color 0.15s, background 0.15s !important;
}

/* Estado seleccionado — card (clase JS porque :checked + label falla con display:none en Chrome) */
body.woocommerce-checkout #shipping_method label.mp-shipping-selected {
    border-color: #4a7c59 !important;
    background: #f0fdf4 !important;
    color: #1a3a28 !important;
    font-weight: 500 !important;
}

/* Estado seleccionado — círculo relleno */
body.woocommerce-checkout #shipping_method label.mp-shipping-selected::before {
    border-color: #4a7c59 !important;
    background: #4a7c59 !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* Precio dentro de la label — push a la derecha */
body.woocommerce-checkout #shipping_method label .woocommerce-Price-amount {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #0f172a !important;
}

body.woocommerce-checkout #shipping_method label.mp-shipping-selected .woocommerce-Price-amount {
    color: #4a7c59 !important;
}

/* ── MOBILE: apilar fila tr.shipping para que la card ocupe 100% ────────── */
@media (max-width: 600px) {
    body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping {
        display: block !important;
    }
    body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping th {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 0 6px 0 !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }
    body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping td {
        display: block !important;
        width: 100% !important;
        padding: 0 0 8px 0 !important;
        text-align: left !important;
    }
    body.woocommerce-checkout #shipping_method label {
        padding: 12px 14px !important;
        min-height: 56px !important;
        line-height: 1.35 !important;
        flex-wrap: wrap !important;
    }
    /* Texto de la label se expande; precio sigue a la derecha */
    body.woocommerce-checkout #shipping_method label .woocommerce-Price-amount {
        font-size: 15px !important;
    }
}

/* Total — PROTAGONISTA */
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total {
    border-top: 1.5px solid #cbd5e1 !important;
    margin-top: 6px !important;
    padding-top: 12px !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: left !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount bdi {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: right !important;
    letter-spacing: -0.3px !important;
}

/* Payment section min-height */
body.woocommerce-checkout #payment .wc_payment_methods:empty~.place-order,
body.woocommerce-checkout #payment .wc_payment_methods:empty {
    min-height: 60px !important;
}

/* =================================================================
   12. VIP CARD (Crear Cuenta) - NATIVA SIN CHECKBOX VISIBLE
   ================================================================= */
/* Contenedor principal de la tarjeta */
body.woocommerce-checkout .woocommerce-account-fields .create-account {
    background: #ffffff !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.3s ease !important;
}

body.woocommerce-checkout .woocommerce-account-fields .create-account:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* El label nativo (que ahora actúa como toda la tarjeta clickable) */
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox {
    display: flex !important;
    flex-direction: column !important;
    /* Título arriba, descripción abajo */
    cursor: pointer !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 1. OCULTAMOS EL CHECKBOX REAL, pero lo mantenemos clickeable nativamente */
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Destruimos el check falso del tema Zota (Zota lo dibuja en el span::before) */
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox::before,
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox span::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* 2. El título "Crear una cuenta VIP" (modificado por PHP) */
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox span {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. La insignia RECOMENDADO */
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox span::after {
    content: "RECOMENDADO" !important;
    background: #00a650 !important;
    color: #fff !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

/* 4. La descripción debajo del título */
body.woocommerce-checkout .woocommerce-account-fields .create-account>label.checkbox::after {
    content: "Guarda tus datos de forma segura para comprar en 1 clic en el futuro y rastrea tu pedido al instante." !important;
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 6px 0 0 0 !important;
    /* Sin margen izquierdo porque no hay checkbox */
    font-weight: normal !important;
}

/* Asegurar que los campos de contraseña aparezcan bien alineados */
body.woocommerce-checkout .woocommerce-account-fields>.create-account {
    margin-top: 0 !important;
    padding-top: 10px !important;
}

/* =================================================================
   13. WHATSAPP POSITIONING (ONE definition — was 3 conflicting)
   ================================================================= */

/* During progressive disclosure: normal position (no sticky button)
   IMPORTANT: Only target the root .joinchat wrapper — NOT child elements
   like .joinchat__tooltip which need their own natural layout. */
body.woocommerce-checkout.mp-waiting-logistics .joinchat {
    position: fixed !important;
    bottom: 24px !important;
    right: 16px !important;
    transform: none !important;
    z-index: 9998 !important;
}

/* After logistics chosen: raise above sticky button (button bottom:16px + h:60px = 76px, add gap) */
@media (max-width: 768px) {

    body.woocommerce-checkout:not(.mp-waiting-logistics) .joinchat {
        bottom: 90px !important;
        right: 16px !important;
        transform: none !important;
        transition: bottom 0.3s ease !important;
        z-index: 9998 !important;
    }

    /* When sticky button hides at footer, drop WhatsApp back down */
    body.woocommerce-checkout.mp-checkout-btn-hidden .joinchat {
        bottom: 24px !important;
    }
}

/* Product page: raise WhatsApp above sticky bar */
body.has-mp-sticky-bar:not(.mp-bar-hidden) .joinchat-app,
body.has-mp-sticky-bar:not(.mp-bar-hidden) .whatsapp-btn,
body.has-mp-sticky-bar:not(.mp-bar-hidden) [id*="whatsapp"] {
    transform: translateY(-80px) !important;
    transition: transform 0.3s ease-in-out !important;
}

body.mp-bar-hidden .joinchat-app,
body.mp-bar-hidden .whatsapp-btn,
body.mp-bar-hidden [id*="whatsapp"] {
    transform: translateY(0) !important;
}

/* =================================================================
   14. MÉTODOS DE PAGO
   ================================================================= */
body.woocommerce-checkout #payment h3,
body.woocommerce-checkout #payment .wc_payment_methods_heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout .wc_payment_method {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    background: #fff !important;
}

body.woocommerce-checkout .wc_payment_method:has(input:checked) {
    border-color: #00a650 !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 80, 0.1) !important;
}

body.woocommerce-checkout .wc_payment_method label {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
}

body.woocommerce-checkout .wc_payment_method label img {
    margin-left: 10px !important;
    max-height: 32px !important;
    width: auto !important;
    vertical-align: middle !important;
    object-fit: contain !important;
}

body.woocommerce-checkout .wc_payment_method .payment_box {
    background: #f8fafc !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

/* =================================================================
   15. SEARCHABLE COMMUNE PICKER (mobile modal)
   ================================================================= */
.mp-picker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    justify-content: center;
    align-items: flex-end;
    padding: 0;
}

.mp-picker-overlay.mp-picker-active {
    display: flex !important;
}

.mp-picker-container {
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mp-picker-slide-up 0.3s ease-out;
}

@keyframes mp-picker-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.mp-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.mp-picker-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.mp-picker-close {
    font-size: 28px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
}

.mp-picker-search-wrap {
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.mp-picker-search {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s;
}

.mp-picker-search:focus {
    border-color: #00a650;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 166, 80, 0.1);
}

.mp-picker-search::placeholder {
    color: #94a3b8;
}

.mp-picker-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding: 8px 12px 30px;
}

.mp-picker-item {
    padding: 14px 16px;
    font-size: 15px;
    color: #334155;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.mp-picker-item:active {
    background: #f1f5f9;
}

.mp-picker-item.mp-picker-selected {
    background: #f0fdf4;
    color: #166534;
    font-weight: 700;
}

.mp-picker-item.mp-picker-selected::after {
    content: " ✔";
    color: #00a650;
    font-size: 14px;
}

.mp-picker-empty {
    padding: 30px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

/* =================================================================
   16. CONTADOR DE URGENCIA (Llega Hoy/Mañana)
   ================================================================= */

/*
    * CONTROL DE VISIBILIDAD EN CHECKOUT:
    * Oculto por defecto. JS añade/quita clase mp-urgency-visible.
    * CSS animation da la entrada suave sin conflictos de especificidad.
    */
body.woocommerce-checkout .mp-urgency-box {
    display: none !important;
}

body.woocommerce-checkout .mp-urgency-box.mp-urgency-visible {
    display: flex !important;
    animation: mp-urgency-appear 0.35s ease both !important;
}

@keyframes mp-urgency-appear {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.mp-urgency-box {
    background-color: #f6fbf7 !important;
    border: 1px solid #c3e6cb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 2px 4px rgba(0, 166, 80, 0.06) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.mp-urgency-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

.mp-urgency-content {
    flex: 1 !important;
}

.mp-urgency-text {
    color: #333 !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.mp-urgency-badge {
    color: #00a650 !important;
    font-weight: 800 !important;
    background: #e6f6eb !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    display: inline-block !important;
}

.mp-urgency-note {
    display: block !important;
    font-size: 11px !important;
    color: #888 !important;
    font-style: italic !important;
    margin-top: 4px !important;
}

/* =================================================================
   ESTABILIZACIÓN SIDE-CART (ANTI-JUMP & REDUNDANCY) - FIX V4
   ================================================================= */

/* 1. Contenedor de imagen: tamaño fijo, sin desbordamiento */
html body .xoo-wsc-container .xoo-wsc-img-col {
    align-self: flex-start !important;
    padding-top: 10px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

/* Imagen dentro del side cart: contain para no recortar, fondo neutro.
   Alta especificidad para ganar a los estilos del plugin (xoo-wsc-style.css). */
html body .xoo-wsc-container .xoo-wsc-img-col img,
html body .xoo-wsc-container .xoo-wsc-img-col a img,
html body .xoo-wsc-container .xoo-wsc-product img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #f5f5f5 !important;
    display: block !important;
}

/* 2. Reserva de espacio en la columna de info */
.xoo-wsc-sm-info {
    min-height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding-right: 0 !important;
    /* Espacio liberado, basurero usa flexbox */
}

/* 3. Reubicación del Basurero Original (Flexbox alineado con controles) */
.xoo-wsc-smr-del {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    color: #cbd5e1 !important;
    font-size: 22px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    z-index: 10 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Convertir la fila de controles nativa en un Flex container para el basurero */
.mp-qty-row {
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Forzar que el precio nativo de WooCommerce sea verde dentro de la insignia */
.mp-native-line-savings .woocommerce-Price-amount,
.mp-native-line-savings .woocommerce-Price-currencySymbol,
.mp-native-line-savings bdi {
    color: #00a650 !important;
}

.xoo-wsc-smr-del:hover {
    color: #ef4444 !important;
}

/* 4. Ocultar remanentes nativos del plugin y JS residual */
.xoo-wsc-psavings,
.mp-line-savings {
    display: none !important;
    /* Destruye el ahorro del plugin para evitar doble etiqueta */
}


/* Ocultar redundancia de texto cuando cantidad es 1 (Nativo de Xootix) */
.qty-is-1 .xoo-wsc-qty-price>span:nth-child(1),
.qty-is-1 .xoo-wsc-qty-price>span:nth-child(2),
.qty-is-1 .xoo-wsc-qty-price>span:nth-child(4),
.qty-is-1 .xoo-wsc-qty-price>span:nth-child(5),
.xoo-wsc-product:has(.mp-qty-val[value="1"]) .xoo-wsc-qty-price>span:nth-child(1),
.xoo-wsc-product:has(.mp-qty-val[value="1"]) .xoo-wsc-qty-price>span:nth-child(2),
.xoo-wsc-product:has(.mp-qty-val[value="1"]) .xoo-wsc-qty-price>span:nth-child(4),
.xoo-wsc-product:has(.mp-qty-val[value="1"]) .xoo-wsc-qty-price>span:nth-child(5) {
    display: none !important;
}

/* =================================================================
   18. MENÚ OFF-CANVAS NATIVO (PARCHE #13)
   ================================================================= */
body.mp-nav-open #mp-sticky-bar {
    display: none !important;
}

#mp-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#mp-nav-overlay.mp-nav-active {
    display: block;
    opacity: 1;
}

#mp-nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    height: 100%;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    overflow: hidden;
}

#mp-nav-panel.mp-nav-active {
    transform: translateX(0);
    visibility: visible;
}

.mp-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
    min-height: 58px;
    box-sizing: border-box;
}

.mp-nav-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    max-width: 160px;
    overflow: hidden;
}

.mp-nav-logo {
    height: 30px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.mp-nav-sitename {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.mp-nav-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mp-nav-close-btn:active {
    background: #f1f5f9;
    color: #0f172a;
}

.mp-nav-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mp-nav-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.mp-nav-list li {
    border-bottom: 1px solid #f1f5f9;
    margin: 0;
}

.mp-nav-list li a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mp-nav-list li a:active {
    background: #f8fafc;
    color: #00a650;
}

.mp-nav-list li.current-menu-item>a {
    color: #00a650;
    background: #f0fdf4;
    border-left: 3px solid #A4CC94;
    padding-left: 17px;
}

.mp-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fafafa;
    display: none;
}

.mp-nav-list .menu-item-has-children.mp-submenu-open>.sub-menu {
    display: block;
}

.mp-nav-list .sub-menu li a {
    padding-left: 32px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.mp-nav-list .sub-menu .sub-menu li a {
    padding-left: 48px;
    font-size: 13px;
    color: #64748b;
}

.mp-nav-list .menu-item-has-children>a::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mp-nav-list .menu-item-has-children.mp-submenu-open>a::after {
    transform: rotate(-135deg);
}

.mp-nav-footer {
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 8px 0;
    flex-shrink: 0;
}

.mp-nav-util-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mp-nav-util-link:active {
    background: #f1f5f9;
}

.mp-nav-util-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
}

/* ELIMINADO en Sesión 3 (05-04-2026):
   Reglas CSS que ocultaban elementos de Royal (nav.wpr-mobile-nav-menu-container,
   .wpr-offcanvas-overlay, .wpr-nav-overlay) con display:none !important.
   Violaban la Regla de Oro. Ya no son necesarias porque:
   - ob_start elimina nav.wpr-mobile-nav-menu-container del HTML del servidor
   - El interceptor capture-phase (mp-offcanvas-interceptor en wp_head) impide
     que Royal procese el click — su offcanvas-wrap nunca se muestra
   Ningún elemento de Royal llega a renderizarse en pantalla. */



/* =================================================================
   MEJORAS UX PÁGINA DE PRODUCTO
   ================================================================= */

/* --- Galería: ocultar Previous/Next y eliminar espacio en blanco --- */
/* Previous/Next son elementos <li> dentro de un <ul> generado por el
   tema Zota. No hay hook PHP limpio para eliminarlos — el tema los
   imprime directamente en su template de galería sin filtro disponible.
   CSS es la única capa correcta aquí ya que es presentación pura. */
.woocommerce-product-gallery~ul.slides-navigation,
.woocommerce-product-gallery+ul,
.flex-direction-nav,
.woocommerce div.product .woocommerce-product-gallery__wrapper+ul,
.tbay-product-thumbnails ul.slides-navigation,
ul.slides-navigation {
    display: none !important;
}

/* Eliminar el espacio en blanco entre imagen principal y miniaturas */
.woocommerce-product-gallery {
    margin-bottom: 0 !important;
}

.woocommerce-product-gallery__wrapper {
    margin-bottom: 0 !important;
}

.flex-viewport {
    margin-bottom: 0 !important;
}

/* Contener imagen principal de producto en un aspect-ratio consistente */
.woocommerce-product-gallery .flex-viewport {
    max-height: 420px;
    overflow: hidden;
}

.woocommerce-product-gallery .flex-viewport img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
}

@media(min-width: 769px) {
    .woocommerce-product-gallery .flex-viewport {
        max-height: 520px;
    }

    .woocommerce-product-gallery .flex-viewport img {
        max-height: 520px;
    }
}

/* =================================================================
   ESPACIADO COMPACTO — Resumen de producto (móvil)
   Reduce el aire innecesario entre precio, urgencia, variantes
   y disponibilidad para que más info quede above the fold.
   Añade padding inferior para evitar colisión con botón de WhatsApp.
   ================================================================= */
@media (max-width: 768px) {
    .single-product .summary.entry-summary {
        padding-bottom: 60px !important;
    }

    .single-product .summary.entry-summary>* {
        margin-bottom: 12px !important;
    }

    /* Eliminar separadores innecesarios en la cabecera del producto */
    .single-product .summary.entry-summary>hr,
    .single-product .summary.entry-summary .price {
        border: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 10px !important;
    }

    .single-product .summary.entry-summary .mp-urgency-box {
        margin-top: 4px !important;
        margin-bottom: 16px !important;
    }

    .single-product .summary.entry-summary .variations {
        margin-bottom: 8px !important;
    }

    .single-product .summary.entry-summary .woocommerce-variation-availability {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* =================================================================
   DESCRIPCIÓN "VER MÁS" — Colapsa la descripción larga en el tab
   a ~5 líneas con botón expandible. Evita scroll innecesario.
   ================================================================= */
.woocommerce-Tabs-panel--description.mp-desc-collapsed {
    max-height: 120px !important;
    overflow: hidden !important;
    position: relative !important;
}

.woocommerce-Tabs-panel--description.mp-desc-collapsed::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background: linear-gradient(transparent, #fff) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.woocommerce-Tabs-panel--description.mp-desc-expanded {
    max-height: none !important;
    overflow: visible !important;
}

.woocommerce-Tabs-panel--description.mp-desc-expanded::after {
    display: none !important;
}

.mp-desc-toggle {
    display: block;
    position: relative;
    z-index: 2;
    margin: 12px auto 0;
    padding: 8px 24px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}

.mp-desc-toggle:hover {
    background: #f5f5f5;
}


/* --- Breadcrumb de producto --- */
.mp-product-breadcrumb {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.4;
}

.mp-product-breadcrumb a {
    color: #999;
    text-decoration: none;
}

.mp-product-breadcrumb a:hover {
    color: #00a650;
    text-decoration: underline;
}

.mp-product-breadcrumb .mp-bc-sep {
    margin: 0 4px;
    color: #ccc;
}

.mp-product-breadcrumb span:last-child {
    color: #555;
    font-weight: 500;
}

/* --- Ocultar "Categoría:" del bloque product_meta en producto ---
   El breadcrumb ya muestra esta información arriba del título.
   Mantener la categoría en product_meta es redundante. */
.single-product .product_meta .posted_in {
    display: none !important;
}

/* =================================================================
   PARCHE: Eliminar separador y espacio muerto entre urgency/precio y variantes
   Viene de Zota: .singular-shop div.product .cart { border-top: 1px solid #dcdcdc }
   ================================================================= */
.singular-shop div.product .cart {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 8px !important;
}



/* =================================================================
   NUEVO BLOQUE LOGÍSTICO (Estilo Tarjeta Vectorial) - BLINDADO
   ================================================================= */
.mp-logistics-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 16px 0 24px 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.mp-log-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    position: relative !important;
}

.mp-log-item:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 36px !important;
    right: 0 !important;
    height: 1px !important;
    background: #f1f5f9 !important;
}

.mp-log-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mp-icon-flex {
    color: #00a650 !important;
}

.mp-icon-blue {
    color: #2563eb !important;
}

.mp-icon-store {
    color: #64748b !important;
}

.mp-log-icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

.mp-log-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.mp-log-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}

.mp-log-desc {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
}

.mp-log-address {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-top: 4px !important;
    background: #f8fafc !important;
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.mp-log-badge {
    display: inline-block !important;
    color: #00a650 !important;
    font-weight: 800 !important;
    margin-left: 4px !important;
}

/* <--- ESTA ES LA LLAVE QUE TE FALTÓ CERRAR */

/* =================================================================
   19. AUTOAJUSTE DE IMÁGENES EN GRILLAS (COBERTURA ZOTA V4)
   ================================================================= */
/* 1. Forzar contenedor padre a cuadrado perfecto (Geometría estricta) */
.product-block .image,
.tbay-product .image,
.woocommerce ul.products li.product .product-thumbnail,
.wpr-grid-image-wrap {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important;
    /* Truco infalible: crea un aspecto 1:1 forzado */
    height: 0 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    display: block !important;
    margin-bottom: 0 !important;
}

/* 2. Obligar al enlace <a> a ocupar toda la caja geométrica */
.product-block .image a,
.tbay-product .image a,
.woocommerce ul.products li.product .product-thumbnail a,
.wpr-grid-image-wrap a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 3. La imagen ajustada (contain) dentro del enlace */
.product-block .image img,
.tbay-product .image img,
.woocommerce ul.products li.product .product-thumbnail img,
.wpr-grid-image-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 10px !important;
    /* Margen de respiro para que no toque los bordes */
    background-color: transparent !important;
}

/* =================================================================
   20. PÁGINA DE BÚSQUEDA Y GRILLAS DE PRODUCTOS — OPTIMIZACIÓN
   ================================================================= */

/* --- Header de resultados --- */
.woocommerce-products-header {
    margin-bottom: 8px !important;
}

/* --- Ocultar WOOF completamente (reemplazado por filtros custom) --- */
.woof_autohide_wrapper,
.woof_products_top_panel,
.woof_products_top_panel_content {
    display: none !important;
}

/* =================================================================
   21. BARRA DE FILTROS CUSTOM (mp-filters-bar)
   ================================================================= */
.mp-filters-bar {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Toggle button: visible solo en mobile */
.mp-filters-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: border-color 0.2s;
}
.mp-filters-toggle:hover {
    border-color: #999;
}
.mp-filters-toggle svg {
    flex-shrink: 0;
}
.mp-filter-count {
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}
.mp-filters-active {
    border-color: #4a7c59 !important;
    color: #4a7c59;
}

/* Content: horizontal en desktop */
.mp-filters-content {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

/* Cada grupo de filtro */
.mp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-filter-select {
    padding: 7px 32px 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.2s;
}
.mp-filter-select:focus {
    border-color: #4a7c59;
    outline: none;
}
.mp-filter-select:hover {
    border-color: #999;
}

/* Inputs de precio */
.mp-filter-price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mp-filter-input {
    width: 90px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    transition: border-color 0.2s;
}
.mp-filter-input:focus {
    border-color: #4a7c59;
    outline: none;
}
.mp-filter-input::placeholder {
    color: #bbb;
}
.mp-filter-price-sep {
    color: #ccc;
    font-size: 14px;
}

/* Checkbox de ofertas */
.mp-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    padding: 7px 0;
    white-space: nowrap;
}
.mp-filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4a7c59;
    cursor: pointer;
}

/* Botón aplicar */
.mp-filter-apply {
    padding: 8px 20px;
    background: #4a7c59;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.mp-filter-apply:hover {
    background: #3a6a49;
}

/* Limpiar filtros */
.mp-filter-clear {
    font-size: 12px;
    color: #999;
    text-decoration: underline;
    padding: 7px 0;
    white-space: nowrap;
    transition: color 0.2s;
}
.mp-filter-clear:hover {
    color: #c0392b;
}

/* ---- MOBILE: Filtros colapsables ---- */
@media (max-width: 767px) {
    .mp-filters-bar {
        padding: 10px 12px;
    }
    .mp-filters-toggle {
        display: flex;
    }
    .mp-filters-content {
        display: none;
        flex-direction: column;
        gap: 12px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #eee;
    }
    .mp-filters-content.mp-filters-open {
        display: flex;
    }
    .mp-filter-group {
        width: 100%;
    }
    .mp-filter-select {
        width: 100%;
        min-width: unset;
    }
    .mp-filter-price-inputs {
        width: 100%;
    }
    .mp-filter-input {
        flex: 1;
    }
    .mp-filter-apply {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }
    .mp-filter-clear {
        text-align: center;
        width: 100%;
        display: block;
    }
}

/* --- Toolbar (grid/list toggle + resultados + ordenar) --- */
.tbay-filter {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eee !important;
}

/* --- Cards de producto en grillas --- */
.display-products .row {
    gap: 0 !important;
    align-items: flex-start !important;
}
.display-products .row > div {
    margin-bottom: 24px !important;
}
/* Evitar que product-content se estire con flex-grow */
.display-products .product-block.grid {
    overflow: visible !important;
}
.display-products .product-content {
    flex-grow: 0 !important;
    flex-basis: auto !important;
}

/* --- Badge de descuento: más compacto --- */
.display-products .onsale,
.archive-shop .onsale {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    min-height: unset !important;
    line-height: 1.5 !important;
}

/* --- Caption (título + precio) compacta --- */
.display-products .caption {
    padding: 8px 4px 0 !important;
}
.display-products .caption .name {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.display-products .caption .name a {
    color: #333 !important;
    text-decoration: none !important;
}
.display-products .caption .name a:hover {
    color: #4a7c59 !important;
}

/* --- Precios visibles y claros --- */
.display-products .caption .price {
    font-size: 14px !important;
    margin-top: 2px !important;
}
.display-products .caption .price del {
    color: #999 !important;
    font-size: 12px !important;
    margin-right: 4px !important;
}
.display-products .caption .price ins {
    color: #c0392b !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* --- Container: menos padding vertical --- */
.shop-left .container {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
.archive-shop {
    margin-top: 20px !important;
}

/* --- Paginación --- */
.tbay-pagination {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #eee !important;
}

/* ---- MOBILE: Búsqueda y grillas ---- */
@media (max-width: 767px) {
    .display-products .row > div.product {
        margin-bottom: 16px !important;
        padding: 0 6px !important;
    }
    .display-products .caption .name {
        font-size: 12px !important;
    }
    .display-products .caption .price {
        font-size: 13px !important;
    }
    .display-products .caption .price del {
        font-size: 11px !important;
    }
    .shop-left .container {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .archive-shop {
        margin-top: 12px !important;
    }
    .woocommerce-products-header h1 {
        font-size: 20px !important;
    }
    .woof_products_top_panel {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}
/* =================================================================
   CARRITO — Mejoras UI/UX (ecommerce-ux + ui-ux-pro-max)
   ================================================================= */

/* --- Nombre producto: máx 2 líneas en desktop --- */
@media (min-width: 768px) {
    .woocommerce-cart-form__contents td.product-name a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.35 !important;
        max-height: 2.7em !important;
    }
    /* Imagen más grande en desktop */
    .woocommerce-cart-form__contents td.product-thumbnail img,
    .woocommerce-cart-form__contents td.product-thumbnail .mp-cart-thumb {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
    }
    .woocommerce-cart-form__contents th.product-thumbnail,
    .woocommerce-cart-form__contents td.product-thumbnail {
        width: 9% !important;
    }
}

/* --- Layout 2 columnas en desktop (productos izq, totales der sticky) --- */
@media (min-width: 992px) {
    body.woocommerce-cart .woocommerce {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 28px !important;
        align-items: flex-start !important;
    }
    /* Barra de envío gratis y notices: ancho completo sobre las 2 columnas */
    body.woocommerce-cart .woocommerce > .mp-flex-progress,
    body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
    body.woocommerce-cart .woocommerce > .woocommerce-message,
    body.woocommerce-cart .woocommerce > .woocommerce-info,
    body.woocommerce-cart .woocommerce > .woocommerce-error {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    body.woocommerce-cart form.woocommerce-cart-form {
        flex: 1 1 500px !important;
        min-width: 500px !important;
    }
    body.woocommerce-cart .cart-collaterals {
        flex: 0 0 300px !important;
        width: 300px !important;
        position: sticky !important;
        top: 90px !important;
    }
}

/* --- Fila "Ahorraste" en totales --- */
.mp-cart-savings-row th,
.mp-cart-savings-row td {
    color: #27ae60 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    border-top: 1px dashed #d1fae5 !important;
}
.mp-cart-savings-row td .woocommerce-Price-amount,
.mp-cart-savings-row td bdi {
    color: #27ae60 !important;
    font-weight: 700 !important;
}

/* --- Trust signals bajo el CTA --- */
.mp-trust-signals {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 9px 0 2px !important;
    flex-wrap: wrap !important;
}
.mp-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.mp-trust-item svg {
    flex-shrink: 0 !important;
    color: #94a3b8 !important;
}
/* En mobile, el fondo blanco del fixed CTA envuelve las trust signals */
@media (max-width: 991px) {
    body.woocommerce-cart .wc-proceed-to-checkout {
        padding-bottom: 8px !important;
    }
}

/* =================================================================
   CHECKOUT UX — Mejoras de conversión
   ================================================================= */

/* ── 1. Indicador de pasos ── */
.mp-checkout-steps {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 0 28px 0 !important;
    padding: 16px 24px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.mp-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.mp-step-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: all 0.2s !important;
}

/* Step "Carrito" es un <a> link */
a.mp-step-done {
    cursor: pointer !important;
    text-decoration: none !important;
    transition: opacity 0.15s !important;
}
a.mp-step-done:hover {
    opacity: 0.75 !important;
}

.mp-step-done .mp-step-icon {
    background: #4a7c59 !important;
    color: #fff !important;
}

.mp-step-active .mp-step-icon {
    background: #4a7c59 !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.2) !important;
}

.mp-step-pending .mp-step-icon {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}

.mp-step-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.mp-step-done .mp-step-label,
.mp-step-active .mp-step-label {
    color: #0f172a !important;
}

.mp-step-pending .mp-step-label {
    color: #94a3b8 !important;
}

.mp-step-line {
    flex: 1 !important;
    height: 2px !important;
    background: #e2e8f0 !important;
    margin: 0 8px !important;
    margin-bottom: 18px !important;
    min-width: 40px !important;
}

.mp-step-line-done {
    background: #4a7c59 !important;
}

/* ── 3. Trust signals bajo el botón de pago ── */
.mp-checkout-trust {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
    padding: 10px 0 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
}

.mp-checkout-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.mp-checkout-trust-item svg {
    color: #4a7c59 !important;
    flex-shrink: 0 !important;
}

/* ── 4. Sección VIP colapsable ── */
.mp-vip-toggle {
    margin: 16px 0 !important;
}

.mp-vip-toggle-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-align: left !important;
    transition: background 0.15s !important;
}

.mp-vip-toggle-btn:hover {
    background: #f1f5f9 !important;
}

.mp-vip-badge {
    background: #dcfce7 !important;
    color: #166534 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
}

.mp-vip-arrow {
    margin-left: auto !important;
    transition: transform 0.2s !important;
}

.mp-vip-toggle-btn.mp-vip-open .mp-vip-arrow {
    transform: rotate(180deg) !important;
}

.mp-vip-toggle .woocommerce-account-fields {
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 16px !important;
    background: #fafafa !important;
}

/* ── Mobile checkout ── */
@media (max-width: 767px) {
    .mp-checkout-steps {
        padding: 12px 16px !important;
        margin: 0 0 20px 0 !important;
    }

    .mp-step-line {
        min-width: 20px !important;
    }

    .mp-step-label {
        font-size: 10px !important;
    }

    .mp-checkout-trust {
        gap: 10px !important;
    }

    .mp-checkout-trust-item {
        font-size: 10px !important;
    }
}


/* REQ [MKT] 26/jul/2026 - Contraste de la descripcion corta en la ficha.
   El mismo texto se veia gris claro (#707070) arriba del selector y casi negro
   (#1d1d1d) en el bloque de la variante. Decision (Antonio + MKT): el estilo
   bueno es el de la variante. Es tipografia (legibilidad), no un parche para
   tapar salida del backend. Comprador tipo: mayoria en celular. */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
    color: #1d1d1d;
}


/* REQ [MKT] 27/jul/2026 - contraste tambien en las descripciones con VINETAS.
   El fix del 26/jul solo cubrio el contenedor y los <p>. El tema padre tiene
   reglas propias para `ul li` y su `::marker` en #707070, asi que las fichas
   cuya descripcion corta viene como lista (formato tecnico del Hub:
   "- Acabado: Cromado") seguian grises: 106 de 559 productos, y creciendo
   porque ese es el formato que se esta estandarizando. Medicion [MKT]. */
.woocommerce div.product .woocommerce-product-details__short-description ul li,
.woocommerce div.product .woocommerce-product-details__short-description ol li {
    color: #1d1d1d;
}
.woocommerce div.product .woocommerce-product-details__short-description ul li::marker,
.woocommerce div.product .woocommerce-product-details__short-description ol li::marker {
    color: #1d1d1d;
}