/* ==========================================================================
   WC-CART.CSS - Beta Repuestos
   Child Theme: Hello Elementor Child
   Template: carrito de compras WooCommerce

   INDICE:
   1.  Pagina y header del carrito
   2.  Layout wrapper (grid 2 columnas)
   3.  Tabla de productos
   4.  Items del carrito (filas)
   5.  Boton eliminar
   6.  Imagen del producto
   7.  Nombre y SKU del producto
   8.  Precio unitario
   9.  Cantidad (input)
   10. Subtotal del item
   11. Cupon
   12. Boton actualizar carrito
   13. Resumen del pedido (sidebar)
   14. Boton proceder al pago
   15. Carrito vacio
   16. Mensajes WooCommerce en carrito
   17. Responsive tablet (max 1024px)
   18. Responsive mobile (max 767px)
   19. Responsive mobile pequeno (max 374px)
   20. Accesibilidad (prefers-reduced-motion)
   ========================================================================== */


/* ==========================================================================
   1. PAGINA Y HEADER DEL CARRITO
   ========================================================================== */

.br-cart-page {
    width: 100%;
    max-width: var(--br-width-full);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--br-space-section-x) 60px;
}

/* Contenedor WC cuando carrito vacio (no tiene .br-cart-page) */
body.woocommerce-cart .woocommerce {
    max-width: var(--br-width-full);
    margin: 0 auto;
    padding: 20px var(--br-space-section-x, 30px) 60px;
}

.br-cart-header {
    margin-bottom: 30px;
}

.br-cart-title {
    font-family: var(--br-font-primary);
    font-size: var(--br-text-section);
    font-weight: var(--br-weight-bold);
    color: var(--br-text-dark);
    line-height: var(--br-leading-heading);
    margin: 0 0 12px 0;
}

.br-cart-count {
    font-size: var(--br-text-body);
    font-weight: var(--br-weight-regular);
    color: var(--br-text-light);
    margin-left: 8px;
}

.br-cart-line {
    width: 60px;
    height: 4px;
    background: var(--br-gradient-primary);
    border-radius: 2px;
}


/* ==========================================================================
   2. LAYOUT WRAPPER (GRID 2 COLUMNAS)
   ========================================================================== */

.br-cart-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.br-cart-main {
    min-width: 0; /* Prevenir overflow en grid */
}

.br-cart-sidebar {
    position: sticky;
    top: 30px;
}


/* ==========================================================================
   3. TABLA DE PRODUCTOS
   ========================================================================== */

.br-cart-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--br-bg-white);
    border-radius: var(--br-radius-md);
    overflow: hidden;
    box-shadow: var(--br-shadow-card);
    border: none !important;
}

.br-cart-table thead tr {
    background: var(--br-secondary);
}

.br-cart-table thead th {
    background: var(--br-secondary) !important;
    color: var(--br-text-white) !important;
    font-family: var(--br-font-primary);
    font-size: 13px;
    font-weight: var(--br-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border: none !important;
    text-align: left;
    white-space: nowrap;
}

/* Columna de eliminar: estrecha */
.br-cart-table thead th.product-remove {
    width: 40px;
    padding: 14px 8px;
}

/* Columna de imagen */
.br-cart-table thead th.product-thumbnail {
    width: 100px;
}

/* Columna de cantidad */
.br-cart-table thead th.product-quantity {
    text-align: center;
}

/* Columna de total */
.br-cart-table thead th.product-subtotal {
    text-align: right;
}


/* ==========================================================================
   4. ITEMS DEL CARRITO (FILAS)
   ========================================================================== */

.br-cart-table tbody tr.br-cart-item {
    border-bottom: 1px solid var(--br-border);
    transition: background-color var(--br-transition-fast);
}

.br-cart-table tbody tr.br-cart-item:last-of-type {
    border-bottom: none;
}

.br-cart-table tbody tr.br-cart-item:hover {
    background-color: rgba(var(--br-primary-rgb), 0.02);
}

.br-cart-table tbody td {
    padding: 16px;
    border: none !important;
    border-bottom: 1px solid var(--br-border) !important;
    vertical-align: middle;
    font-size: var(--br-text-small);
    color: var(--br-text-dark);
    background: transparent !important;
}


/* ==========================================================================
   5. BOTON ELIMINAR
   ========================================================================== */

.br-cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--br-text-light) !important;
    font-size: 20px;
    font-weight: var(--br-weight-bold);
    line-height: 1;
    text-decoration: none !important;
    border-radius: var(--br-radius-full);
    transition: all var(--br-transition-fast);
    background: transparent !important;
}

.br-cart-remove:hover {
    color: var(--br-error) !important;
    background: rgba(var(--br-error-rgb), 0.08) !important;
}


/* ==========================================================================
   6. IMAGEN DEL PRODUCTO
   ========================================================================== */

.br-cart-table td.product-thumbnail {
    width: 100px;
    padding: 16px 8px 16px 16px;
}

.br-cart-thumb-link {
    display: block;
}

.br-cart-table td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--br-radius-sm);
    border: 1px solid var(--br-border);
    transition: opacity var(--br-transition-fast);
}

.br-cart-thumb-link:hover img {
    opacity: 0.85;
}


/* ==========================================================================
   7. NOMBRE Y SKU DEL PRODUCTO
   ========================================================================== */

.br-cart-table td.product-name {
    padding-left: 8px;
}

.br-cart-product-name {
    display: block;
    font-family: var(--br-font-primary);
    font-size: 15px;
    font-weight: var(--br-weight-semibold);
    color: var(--br-text-dark);
    text-decoration: none;
    transition: color var(--br-transition-fast);
    line-height: 1.4;
    margin-bottom: 4px;
}

.br-cart-product-name:hover {
    color: var(--br-primary);
}

.br-cart-sku {
    display: block;
    font-family: var(--br-font-secondary);
    font-size: 12px;
    color: var(--br-text-light);
    margin-top: 2px;
    line-height: 1.4;
}

/* Meta data (variaciones) */
.br-cart-table td.product-name .variation {
    display: block;
    margin-top: 4px;
}

.br-cart-table td.product-name .variation dt,
.br-cart-table td.product-name .variation dd {
    display: inline;
    font-size: 12px;
    color: var(--br-text-gray);
    margin: 0;
}

.br-cart-table td.product-name .variation dt {
    font-weight: var(--br-weight-semibold);
}

.br-cart-table td.product-name .variation dd p {
    display: inline;
    margin: 0;
}

/* Aviso de backorder */
.br-cart-table td.product-name .backorder_notification {
    font-size: 12px;
    color: var(--br-warning);
    font-weight: var(--br-weight-medium);
    margin-top: 4px;
}


/* ==========================================================================
   8. PRECIO UNITARIO
   ========================================================================== */

.br-cart-price {
    font-family: var(--br-font-primary);
    font-size: 16px;
    font-weight: var(--br-weight-semibold);
    color: var(--br-text-dark);
}

/* Precio tachado (en descuento) */
.br-cart-price del {
    color: var(--br-text-light);
    font-weight: var(--br-weight-regular);
    font-size: 13px;
}

.br-cart-price ins {
    text-decoration: none;
    font-weight: var(--br-weight-semibold);
}


/* ==========================================================================
   9. CANTIDAD (INPUT)
   ========================================================================== */

.br-cart-table td.product-quantity {
    text-align: center;
}

.br-cart-table td.product-quantity .quantity {
    display: inline-flex;
    align-items: center;
}

.br-cart-table td.product-quantity .quantity .qty,
.br-cart-table td.product-quantity .quantity .br-cart-qty {
    width: 60px;
    height: 44px;
    text-align: center;
    border: 2px solid var(--br-border);
    border-radius: var(--br-radius-sm);
    font-family: var(--br-font-primary);
    font-size: var(--br-text-body);
    font-weight: var(--br-weight-semibold);
    color: var(--br-text-dark);
    background: var(--br-bg-white);
    padding: 0 4px;
    -moz-appearance: textfield;
    transition: border-color var(--br-transition-fast);
}

.br-cart-table td.product-quantity .quantity .qty:focus,
.br-cart-table td.product-quantity .quantity .br-cart-qty:focus {
    border-color: var(--br-primary);
    box-shadow: 0 0 0 3px rgba(var(--br-primary-rgb), 0.15);
    outline: none;
}

/* Ocultar spinners nativos del input number */
.br-cart-table td.product-quantity .quantity .qty::-webkit-outer-spin-button,
.br-cart-table td.product-quantity .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ==========================================================================
   10. SUBTOTAL DEL ITEM
   ========================================================================== */

.br-cart-table td.product-subtotal {
    text-align: right;
}

.br-cart-subtotal {
    font-family: var(--br-font-primary);
    font-size: 16px;
    font-weight: var(--br-weight-bold);
    color: var(--br-primary);
}


/* ==========================================================================
   11. CUPON
   ========================================================================== */

.br-cart-actions {
    padding: 20px 16px !important;
    border-bottom: none !important;
}

.br-cart-coupon {
    display: inline-flex;
    align-items: stretch;
    float: left;
}

.br-cart-coupon-input {
    width: 220px !important;
    min-height: 44px;
    padding: 12px 16px !important;
    border: 2px solid var(--br-border) !important;
    border-radius: var(--br-radius-sm) 0 0 var(--br-radius-sm) !important;
    border-right: none !important;
    font-family: var(--br-font-secondary);
    font-size: var(--br-text-small);
    color: var(--br-text-dark);
    background: var(--br-bg-white);
    transition: border-color var(--br-transition-fast);
}

.br-cart-coupon-input:focus {
    border-color: var(--br-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--br-primary-rgb), 0.15);
    outline: none;
}

.br-cart-coupon-input::placeholder {
    color: var(--br-text-light);
}

.br-cart-coupon-btn {
    min-height: 44px;
    padding: 12px 20px !important;
    background: var(--br-secondary) !important;
    color: var(--br-text-white) !important;
    border: 2px solid var(--br-secondary) !important;
    border-radius: 0 var(--br-radius-sm) var(--br-radius-sm) 0 !important;
    font-family: var(--br-font-primary);
    font-size: var(--br-text-small);
    font-weight: var(--br-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--br-transition-fast);
}

.br-cart-coupon-btn:hover {
    background: var(--br-secondary-light) !important;
    border-color: var(--br-secondary-light) !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   12. BOTON ACTUALIZAR CARRITO
   ========================================================================== */

.br-cart-update-btn {
    float: right;
    min-height: 44px;
    padding: 12px 24px !important;
    background: transparent !important;
    color: var(--br-text-gray) !important;
    border: 2px solid var(--br-border) !important;
    border-radius: var(--br-radius-sm) !important;
    font-family: var(--br-font-primary);
    font-size: var(--br-text-small);
    font-weight: var(--br-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--br-transition-fast);
    box-shadow: none !important;
}

.br-cart-update-btn:hover {
    border-color: var(--br-primary) !important;
    color: var(--br-primary) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.br-cart-update-btn:disabled,
.br-cart-update-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.br-cart-update-btn i {
    font-size: 13px;
    margin-right: 4px;
}


/* ==========================================================================
   13. RESUMEN DEL PEDIDO (SIDEBAR)
   ========================================================================== */

.br-cart-summary {
    background: var(--br-bg-ultra-light);
    border-radius: var(--br-radius-md);
    padding: 30px;
    border: 1px solid var(--br-border);
}

.br-cart-summary-title {
    font-family: var(--br-font-primary);
    font-size: 20px;
    font-weight: var(--br-weight-bold);
    color: var(--br-text-dark);
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--br-border);
}

.br-cart-summary-rows {
    margin-bottom: 24px;
}

/* Fila de resumen */
.br-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--br-border);
}

.br-cart-summary-row:last-child {
    border-bottom: none;
}

.br-cart-summary-label {
    font-family: var(--br-font-secondary);
    font-size: var(--br-text-small);
    font-weight: var(--br-weight-regular);
    color: var(--br-text-gray);
}

.br-cart-summary-value {
    font-family: var(--br-font-primary);
    font-size: 16px;
    font-weight: var(--br-weight-semibold);
    color: var(--br-text-dark);
    text-align: right;
}

/* Cupon aplicado */
.br-cart-summary-row--coupon .br-cart-summary-value {
    color: var(--br-success);
}

.br-cart-summary-row--coupon .br-cart-summary-value a {
    color: var(--br-text-light);
    font-size: 12px;
    margin-left: 4px;
}

.br-cart-summary-row--coupon .br-cart-summary-value a:hover {
    color: var(--br-error);
}

/* Envio */
.br-cart-summary-row--shipping .br-cart-summary-value {
    font-size: var(--br-text-small);
}

.br-cart-summary-row--shipping .woocommerce-shipping-methods {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.br-cart-summary-row--shipping .woocommerce-shipping-methods li {
    margin-bottom: 4px;
    font-size: var(--br-text-small);
}

.br-cart-summary-row--shipping .woocommerce-shipping-methods li label {
    font-size: var(--br-text-small);
    font-weight: var(--br-weight-regular);
    color: var(--br-text-gray);
    cursor: pointer;
    display: inline;
    margin: 0;
}

.br-cart-summary-row--shipping .woocommerce-shipping-methods li input[type="radio"] {
    margin-right: 4px;
    width: auto;
    min-height: auto;
}

/* Fila de total */
.br-cart-summary-row--total {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 2px solid var(--br-secondary);
    border-bottom: none;
}

.br-cart-summary-label--total {
    font-family: var(--br-font-primary) !important;
    font-size: 18px !important;
    font-weight: var(--br-weight-bold) !important;
    color: var(--br-text-dark) !important;
    text-transform: uppercase;
}

.br-cart-summary-value--total,
.br-cart-summary-value--total .woocommerce-Price-amount,
.br-cart-summary-value--total .amount {
    font-family: var(--br-font-primary);
    font-size: 24px !important;
    font-weight: var(--br-weight-extrabold) !important;
    color: var(--br-primary) !important;
}


/* ==========================================================================
   14. BOTON PROCEDER AL PAGO
   ========================================================================== */

.br-cart-checkout-actions {
    margin-top: 0;
    padding: 0 !important;
}

.br-cart-checkout-actions .checkout-button,
.br-cart-checkout-actions .wc-proceed-to-checkout a,
.wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 52px;
    padding: 16px 24px !important;
    background: var(--br-primary) !important;
    color: var(--br-text-white) !important;
    border: none !important;
    border-radius: var(--br-radius-sm) !important;
    font-family: var(--br-font-primary);
    font-size: 16px !important;
    font-weight: var(--br-weight-semibold) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--br-transition-base);
}

.br-cart-checkout-actions .checkout-button:hover,
.br-cart-checkout-actions .wc-proceed-to-checkout a:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--br-primary-dark) !important;
    color: var(--br-text-white) !important;
    box-shadow: var(--br-shadow-button);
    transform: translateY(-2px);
}

.br-cart-checkout-actions .checkout-button:active,
.wc-proceed-to-checkout a.checkout-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Icono flecha al final del boton */
.br-cart-checkout-actions .checkout-button::after,
.wc-proceed-to-checkout a.checkout-button::after {
    content: "\f061"; /* fa-arrow-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 10px;
    font-size: 14px;
}


/* ==========================================================================
   15. CARRITO VACIO
   ========================================================================== */

/* Carrito vacio: usa body.woocommerce-cart porque nuestro wrapper
   .br-cart-page solo existe en cart.php (carrito con items).
   Cuando esta vacio, WC carga cart-empty.php sin nuestro wrapper. */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .woocommerce-info {
    text-align: center;
    padding: 80px 20px;
    background: var(--br-bg-light);
    border-radius: var(--br-radius-md);
    border: none;
    max-width: 500px;
    margin: 40px auto;
}

body.woocommerce-cart .cart-empty::before,
body.woocommerce-cart .woocommerce-info::before {
    content: "\f07a"; /* fa-shopping-cart */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    font-size: 64px;
    color: var(--br-text-light);
    margin-bottom: 20px;
    line-height: 1;
}

body.woocommerce-cart .cart-empty.woocommerce-info {
    font-family: var(--br-font-primary);
    font-size: var(--br-text-body-large);
    font-weight: var(--br-weight-semibold);
    color: var(--br-text-dark);
}

/* Boton "Volver a la tienda" en carrito vacio */
body.woocommerce-cart .return-to-shop .button,
body.woocommerce-cart .wc-empty-cart-message ~ .return-to-shop .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 32px;
    margin-top: 24px;
    background: var(--br-primary);
    color: var(--br-text-white);
    border: none;
    border-radius: var(--br-radius-sm);
    font-family: var(--br-font-primary);
    font-size: var(--br-text-small);
    font-weight: var(--br-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--br-transition-base);
    width: auto;
}

body.woocommerce-cart .return-to-shop .button:hover {
    background: var(--br-primary-dark);
    box-shadow: var(--br-shadow-button);
    transform: translateY(-2px);
}


/* ==========================================================================
   16. MENSAJES WOOCOMMERCE EN CARRITO
   Avisos de cupon aplicado, producto eliminado, etc.
   ========================================================================== */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info:not(.cart-empty) {
    margin-bottom: 20px;
    border-radius: var(--br-radius-sm);
}


/* ==========================================================================
   17. RESPONSIVE TABLET (MAX 1024PX)
   ========================================================================== */

@media (max-width: 1024px) {

    .br-cart-page {
        padding: 0 24px 40px;
    }

    .br-cart-wrapper {
        grid-template-columns: 1fr;
    }

    .br-cart-sidebar {
        position: static;
    }

    .br-cart-title {
        font-size: var(--br-text-section-mobile);
    }

    /* Tabla: ajustar columnas */
    .br-cart-table thead th,
    .br-cart-table tbody td {
        padding: 12px 10px;
    }

    .br-cart-table thead th {
        font-size: 12px !important;
    }

    .br-cart-table td.product-thumbnail img {
        width: 70px;
        height: 70px;
    }

    .br-cart-product-name {
        font-size: 14px;
    }

    .br-cart-price {
        font-size: 14px;
    }

    .br-cart-subtotal {
        font-size: 14px;
    }

    /* Cupon en bloque */
    .br-cart-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .br-cart-coupon {
        float: none;
        flex: 1 1 auto;
        min-width: 280px;
    }

    .br-cart-coupon-input {
        flex: 1;
        min-width: 0;
    }

    .br-cart-update-btn {
        float: none;
        width: auto;
    }
}


/* ==========================================================================
   18. RESPONSIVE MOBILE (MAX 767PX)
   Cards apilados: cada producto es un bloque
   ========================================================================== */

@media (max-width: 767px) {

    .br-cart-page {
        padding: 0 16px 30px;
    }

    .br-cart-header {
        margin-bottom: 20px;
    }

    .br-cart-title {
        font-size: 22px;
    }

    .br-cart-count {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: var(--br-text-small);
    }

    /* Ocultar encabezado de tabla */
    .br-cart-table thead {
        display: none;
    }

    /* Cada fila se convierte en card */
    .br-cart-table,
    .br-cart-table tbody {
        display: block;
        width: 100%;
    }

    .br-cart-table tbody tr.br-cart-item {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto auto;
        gap: 0 12px;
        padding: 16px;
        margin-bottom: 12px;
        border: 1px solid var(--br-border);
        border-radius: var(--br-radius-md);
        background: var(--br-bg-white);
        box-shadow: var(--br-shadow-card);
        position: relative;
    }

    .br-cart-table tbody tr.br-cart-item td {
        padding: 0 !important;
        border: none !important;
    }

    /* Boton eliminar: esquina superior derecha */
    .br-cart-table tbody tr.br-cart-item td.product-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        grid-column: auto;
        grid-row: auto;
    }

    .br-cart-table tbody tr.br-cart-item td.product-remove::before {
        display: none;
    }

    /* Imagen: columna izquierda, fila 1-2 */
    .br-cart-table tbody tr.br-cart-item td.product-thumbnail {
        grid-column: 1;
        grid-row: 1 / 3;
        display: flex;
        align-items: flex-start;
    }

    .br-cart-table tbody tr.br-cart-item td.product-thumbnail img {
        width: 80px;
        height: 80px;
    }

    /* Nombre: columna derecha, fila 1 */
    .br-cart-table tbody tr.br-cart-item td.product-name {
        grid-column: 2;
        grid-row: 1;
        padding-right: 32px !important; /* Espacio para boton eliminar */
    }

    .br-cart-product-name {
        font-size: 14px;
        margin-bottom: 2px;
    }

    /* Precio y cantidad en la misma fila */
    .br-cart-table tbody tr.br-cart-item td.product-price {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        padding-top: 8px !important;
    }

    .br-cart-table tbody tr.br-cart-item td.product-price::before {
        content: none;
    }

    .br-cart-table tbody tr.br-cart-item td.product-quantity {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 8px !important;
    }

    .br-cart-table tbody tr.br-cart-item td.product-quantity::before {
        content: none;
    }

    .br-cart-table tbody tr.br-cart-item td.product-quantity .quantity .qty {
        width: 50px;
        height: 38px;
        font-size: var(--br-text-small);
    }

    /* Total: fila completa abajo */
    .br-cart-table tbody tr.br-cart-item td.product-subtotal {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px !important;
        margin-top: 12px;
        border-top: 1px solid var(--br-border) !important;
        text-align: left;
    }

    .br-cart-table tbody tr.br-cart-item td.product-subtotal::before {
        content: attr(data-title) ": ";
        font-family: var(--br-font-primary);
        font-weight: var(--br-weight-semibold);
        font-size: var(--br-text-small);
        color: var(--br-text-gray);
    }

    .br-cart-subtotal {
        font-size: 18px;
    }

    /* Fila de acciones */
    .br-cart-table tbody tr:not(.br-cart-item) {
        display: block;
    }

    .br-cart-table tbody tr td.actions {
        display: block !important;
        padding: 16px 0 !important;
    }

    .br-cart-coupon {
        display: flex;
        width: 100%;
        float: none;
        min-width: 0;
    }

    .br-cart-coupon-input {
        flex: 1;
        width: auto !important;
        min-width: 0;
        font-size: var(--br-text-small);
    }

    .br-cart-coupon-btn {
        padding: 12px 16px !important;
        font-size: 12px !important;
    }

    .br-cart-update-btn {
        float: none;
        width: 100% !important;
        margin-top: 12px;
        justify-content: center;
    }

    /* Resumen sidebar */
    .br-cart-summary {
        padding: 20px;
    }

    .br-cart-summary-title {
        font-size: 18px;
    }

    .br-cart-summary-value--total,
    .br-cart-summary-value--total .woocommerce-Price-amount,
    .br-cart-summary-value--total .amount {
        font-size: 22px !important;
    }

    /* Carrito vacio */
    body.woocommerce-cart .cart-empty,
    body.woocommerce-cart .woocommerce-info {
        padding: 50px 16px;
    }

    body.woocommerce-cart .cart-empty::before,
    body.woocommerce-cart .woocommerce-info::before {
        font-size: 48px;
    }

    body.woocommerce-cart .return-to-shop .button {
        width: 100%;
    }
}


/* ==========================================================================
   19. RESPONSIVE MOBILE PEQUENO (MAX 374PX)
   ========================================================================== */

@media (max-width: 374px) {

    .br-cart-page {
        padding: 0 12px 24px;
    }

    .br-cart-title {
        font-size: 20px;
    }

    .br-cart-table tbody tr.br-cart-item {
        grid-template-columns: 64px 1fr;
        padding: 12px;
        gap: 0 10px;
    }

    .br-cart-table tbody tr.br-cart-item td.product-thumbnail img {
        width: 64px;
        height: 64px;
    }

    .br-cart-product-name {
        font-size: 13px;
    }

    .br-cart-price {
        font-size: 13px;
    }

    .br-cart-summary {
        padding: 16px;
    }

    .br-cart-summary-title {
        font-size: 16px;
    }

    .br-cart-summary-value--total,
    .br-cart-summary-value--total .woocommerce-Price-amount,
    .br-cart-summary-value--total .amount {
        font-size: 20px !important;
    }
}


/* ==========================================================================
   20. ACCESIBILIDAD (PREFERS-REDUCED-MOTION)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .br-cart-remove,
    .br-cart-thumb-link img,
    .br-cart-product-name,
    .br-cart-coupon-input,
    .br-cart-coupon-btn,
    .br-cart-update-btn,
    .br-cart-checkout-actions .checkout-button,
    .wc-proceed-to-checkout a.checkout-button,
    .br-cart-table tbody tr.br-cart-item,
    .br-cart-table td.product-quantity .quantity .qty,
    body.woocommerce-cart .return-to-shop .button {
        transition: none !important;
        transform: none !important;
    }
}