/* ==========================================================================
   CARRITO: EL CAJÓN Y LA PÁGINA /carrito/
   Copia de las maquetas del artifact «Carrito del Almacén»: mismas medidas, mismos colores. Lo que
   no es CSS (la barra de envío gratis, el retiro, el ahorro, «Deshacer», el «2 ×» del precio, los
   precios sin «,00») lo agrega cart-extras.js, con elementos y atributos cx-*. Los textos
   («Ahorrás», «Quitar», «Subtotal», «Ver carrito completo», el número del título) los pisa
   almacen_carrito_textos() en functions.php.

   Todo va bajo `body .wc-block-mini-cart__drawer` o `body .wp-block-woocommerce-cart` para ganarle
   a style.css, que tiene reglas de carrito en cinco lugares, y a WooCommerce, que ubica las celdas
   con selectores de cuatro clases. Los !important de acá contestan !important de allá.

   LA FILA ES UNA GRILLA
   WooCommerce arma cada producto como una fila de tabla con tres celdas, y el cuantificador vive
   dentro de la celda del nombre. Con `display: contents` en las celdas y sus envoltorios, cada pieza
   (nombre, total, precio, ahorro, peso, cuantificador) pasa a ser hija directa de la fila, y la
   grilla las ubica donde las tiene la maqueta. `order` sigue el orden de la maqueta, no el del HTML.
   Sin row-gap: una fila de la grilla que queda vacía (sin oferta, sin peso) no suma espacio.
   ========================================================================== */

body .wc-block-mini-cart__drawer,
body .wp-block-woocommerce-cart,
body .cart-page {
    --cx-ink: var(--warm-black, #2C3E2D);
    --cx-muted: var(--ink-muted, #4F5C4E);
    --cx-line: #E4DCCD;
    --cx-green: var(--forest-green, #4A6741);
    --cx-tint: #EDE6D8;
    --cx-cream: var(--warm-cream, #F5F0E8);
    --cx-paper: #FFFDF9;
    --cx-bar: #DCD3C2;
    --cx-sale: #8A4F24;      /* 5.6:1 sobre --cx-sale-bg */
    --cx-sale-bg: #F6E9DA;
    --cx-font: var(--f-body, 'Mulish', system-ui, sans-serif);
    --cx-disp: 'Cormorant Garamond', Georgia, serif;
    --cx-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5C4E' stroke-width='1.8'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
    --cx-trash-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3E2D' stroke-width='1.8'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
}

/* ---------- La fila: piezas comunes (cajón y página) ---------- */

body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 60px max-content minmax(0, 1fr) auto;
    grid-auto-flow: row;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    padding: 14px 0 !important;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--cx-line) !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row:last-child {
    border-bottom: 0 !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row[hidden] {
    display: none !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row :is(.wc-block-cart-item__product, .wc-block-cart-item__wrap, .wc-block-cart-item__total, .wc-block-cart-item__total-price-and-sale-badge-wrapper) {
    display: contents !important;
}

/* Foto: 60px, borde, fondo blanco. Si no carga, queda el cuadrado vacío y no el texto alternativo. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    order: 0 !important;
    width: 60px !important;
    min-width: 0 !important;
    height: 60px;
    padding: 0 !important;
    border: 1px solid var(--cx-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    font-size: 0;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-item__image a {
    display: block;
    width: 100%;
    height: 100%;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) table.wc-block-cart-items .wc-block-cart-item__image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain;
    border: 0;
    border-radius: 0;
}

/* Nombre: 14px, sin subrayado. Las mayúsculas son las del ERP (decisión A). */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-product-name {
    grid-column: 2 / 4 !important;
    grid-row: auto !important;
    order: 1 !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 0;
    font: 700 14px/1.3 var(--cx-font);
    letter-spacing: 0;
    color: var(--cx-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-product-name[hidden] {
    display: none;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-product-name:hover {
    color: var(--cx-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Total del renglón, arriba a la derecha. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
    grid-column: 4 !important;
    grid-row: auto !important;
    order: 2 !important;
    align-self: start !important;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value {
    font: 800 14.5px/1.3 var(--cx-font);
    color: var(--cx-ink);
}

/* Línea de precio: «2 × $ 3.491», el tachado y «Ahorrás $ 2.328» en el mismo renglón. El «2 ×» lo
   pone cart-extras.js en data-cx-qty; con una unidad y sin oferta la línea no sale. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices {
    grid-column: 2 !important;
    grid-row: auto !important;
    order: 3 !important;
    margin: 4px 0 0;
    font: 400 12.5px/1.55 var(--cx-font);
    color: var(--cx-muted);
    white-space: nowrap;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices .price:not([hidden]) {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices :is(ins, del, .wc-block-components-product-price__value) {
    margin: 0 !important;   /* WooCommerce separa el precio con oferta con un margen; acá separa el gap */
    font: inherit;
    color: var(--cx-muted);
    background: none;
    text-decoration: none;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices :is(ins, .wc-block-components-product-price__value) {
    order: 1 !important;
}
/* Los <span> vacíos de WooCommerce (texto antes y después del precio) contarían como piezas del flex
   y sumarían un hueco al principio. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices .price > span:empty {
    display: none;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices .price del {
    order: 2 !important;
    text-decoration: line-through !important;
    opacity: .8;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__prices [data-cx-qty]:not([data-cx-qty="1"])::before {
    content: attr(data-cx-qty) " × ";
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row[data-cx-qty="1"] .wc-block-cart-item__prices:not(:has(.price:not([hidden]) del)) {
    display: none;
}

/* «Ahorrás $ X» una sola vez: el de la celda del total, que es la plata real del renglón. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__product .wc-block-components-sale-badge {
    display: none !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge {
    display: block !important;   /* en la lista angosta WooCommerce lo esconde y muestra el de la unidad */
    grid-column: 3 / 5 !important;
    grid-row: auto !important;
    order: 4 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 5px 0 0;
    padding: 1px 7px;
    border: 0;
    border-radius: 5px;
    background: var(--cx-sale-bg);
    color: var(--cx-sale);
    font: 800 12px/1.5 var(--cx-font);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge[hidden] {
    display: none !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-sale-badge .wc-block-formatted-money-amount {
    font: inherit;
    color: inherit;
}

/* Peso del granel («Peso: 250 g») y avisos de stock: renglón propio, chico. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row :is(.wc-block-components-product-metadata, .wc-block-components-product-badge:not(.wc-block-components-sale-badge)) {
    grid-column: 2 / 5 !important;
    grid-row: auto !important;
    order: 5 !important;
    margin: 4px 0 0;
    font: 400 12.5px/1.55 var(--cx-font);
    color: var(--cx-muted);
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-product-metadata:not(:has(:is(.wc-block-components-product-metadata__description, .wc-block-components-product-details):not([hidden]):not(:empty))) {
    display: none;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-product-badge[hidden] {
    display: none !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-components-product-details {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cuantificador a la izquierda y «Quitar» contra el borde derecho, en el mismo renglón. El
   cuantificador se ve de 34px y responde en 44px: el ::before agranda el área del toque. */
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-items__row .wc-block-cart-item__quantity {
    grid-column: 2 / 5 !important;
    grid-row: auto !important;
    order: 6 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    min-width: 0;
    height: 34px;
    margin: 0;
    border: 1px solid var(--cx-line);
    border-radius: 99px;
    background: var(--cx-paper);
    overflow: visible;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector::after {
    display: none;   /* WooCommerce dibuja su propio borde con un ::after */
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 36px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: transparent;
    font: 400 17px/1 var(--cx-font);
    color: var(--cx-ink);
    opacity: 1;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button::before {
    content: "";
    position: absolute;
    inset: -6px -4px;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
    background: var(--cx-tint);
    color: var(--cx-ink);
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input {
    order: 0 !important;
    min-width: 24px;
    min-height: 0;
    width: 24px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font: 700 13.5px/1 var(--cx-font);
    color: var(--cx-ink);
    text-align: center;
    box-shadow: none;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button--minus {
    order: -1 !important;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button--plus {
    order: 1 !important;
}

body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__remove-link,
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__remove-link:hover {
    display: inline-flex !important;
    align-items: center;
    width: auto;
    min-width: 0;
    height: 44px;
    margin: 0 -8px 0 0 !important;
    padding: 0 8px 0 28px !important;   /* WooCommerce lo pone en 0 con un selector de cuatro clases */
    border: 0;
    border-radius: 6px;
    font: 500 12.5px/1 var(--cx-font) !important;
    color: var(--cx-muted) !important;
    background: var(--cx-trash) 8px center / 15px no-repeat !important;
    text-decoration: none !important;
    opacity: 1;
}
body :is(.wc-block-mini-cart__drawer, .wp-block-woocommerce-cart) .wc-block-cart-item__remove-link:hover {
    color: var(--cx-ink) !important;
    background-image: var(--cx-trash-hover) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ---------- Piezas de cart-extras.js ---------- */

.cx-ship {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 13px;
    border: 1px solid var(--cx-line);
    border-radius: 10px;
    background: var(--cx-paper);
    color: var(--cx-ink);
    font: 400 13px/1.55 var(--cx-font);
}
.cx-ship[hidden] {
    display: none;
}
.cx-ship__txt {
    margin: 0;
    font: inherit;
}
.cx-ship__txt b {
    font-weight: 800;
}
.cx-ship__track {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: var(--cx-bar);
    overflow: hidden;
}
.cx-ship__track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cx-green);
    transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.cx-ship.is-done {
    background: var(--cx-green);
    border-color: transparent;
    color: var(--cx-paper);
}

.cx-undo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 0 12px;
    min-height: 44px;
    border-radius: 10px;
    background: var(--cx-tint);
    font: 400 13px/1.55 var(--cx-font);
    color: var(--cx-ink);
    animation: cx-in .2s ease-out;
}
.cx-undo b {
    font-weight: 700;
}
.cx-undo__btn {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    font: 800 13px var(--cx-font);
    color: var(--cx-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cx-undo__btn:focus-visible {
    outline: 2px solid var(--golden-accent, #C9A961);
    outline-offset: 2px;
    border-radius: 6px;
}
@keyframes cx-in {
    from { opacity: 0; transform: translateY(4px); }
}

/* ---------- El cajón: 400px, costados de 20px ---------- */

@media (min-width: 481px) {
    body .wc-block-mini-cart__drawer.wc-block-components-drawer {
        width: 400px !important;
        max-width: 100vw;
    }
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__content,
body .wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents,
body .wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block {
    padding: 0 !important;
    background: var(--cx-cream);
}
body .wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body .wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block[hidden] {
    display: none;
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__close {
    position: static !important;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: var(--cx-ink);
    opacity: 1;
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
    background: var(--cx-tint) !important;
}
body .wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
    width: 20px;
    height: 20px;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    min-height: 66px;   /* 18 + el botón de cerrar (34) + 14, como la cabecera de la maqueta */
    box-sizing: border-box;
    padding: 18px 64px 14px 20px;
    font: 600 26px/1.1 var(--cx-disp) !important;
    color: var(--cx-ink);
    mask-image: none;
}
body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-label-block {
    font: inherit;
}
body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block {
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--cx-tint);
    font: 700 12.5px/1.55 var(--cx-font);
    color: var(--cx-muted);
}
body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block::after {
    content: " productos";
}
body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block.cx-uno::after {
    content: " producto";
}
body .wc-block-mini-cart__drawer .cx-ship {
    flex: none;
    margin: 0 20px 6px;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__items {
    flex: 1 1 auto;
    padding: 4px 20px !important;
    overflow-y: auto;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__products-table {
    margin: 0;
}
body .wc-block-mini-cart__drawer table.wc-block-cart-items {
    width: 100%;
    margin: 0;
    border: 0;
}
body .wc-block-mini-cart__drawer table.wc-block-cart-items :is(thead, caption) {
    display: none;
}
body .wc-block-mini-cart__drawer table.wc-block-cart-items tbody {
    display: block;
}
body .wc-block-mini-cart__drawer .cx-undo {
    flex: none;
    margin: 8px 20px;
}

/* Pie: fondo papel, el subtotal, una línea de retiro, «Finalizar compra» lleno y «Ver carrito
   completo» como link. */
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px 20px 14px !important;
    border-top: 1px solid var(--cx-line);
    background: var(--cx-paper);
    box-shadow: none;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer::before,
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer::after {
    display: none;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    font: 800 17px/1.55 var(--cx-font) !important;
    color: var(--cx-ink);
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) {
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
    display: none !important;
}
body .wc-block-mini-cart__drawer .cx-pick {
    margin: 0;
    font: 400 12.5px/1.45 var(--cx-font);
    color: var(--cx-muted);
}
body .wc-block-mini-cart__drawer .cx-pick b {
    color: var(--cx-ink);
    font-weight: 700;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions > a {
    flex: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout,
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-height: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--cx-green) !important;
    color: var(--cx-paper) !important;
    font: 500 15.5px/1 var(--cx-font);
    box-shadow: none;
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
    filter: brightness(1.07);
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart,
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover {
    align-self: center !important;
    width: auto !important;
    min-height: 0;
    height: auto;
    padding: 2px 4px;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;   /* el borde del botón «outline» es una sombra interior */
    color: var(--cx-ink) !important;
    font: 500 13.5px/1.55 var(--cx-font);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body .wc-block-mini-cart__drawer :is(.wc-block-mini-cart__footer-cart, .wc-block-mini-cart__footer-checkout) .wc-block-components-button__text {
    font: inherit;
}

/* ---------- La página del carrito ---------- */

/* Título, pastilla y lista separados como en la maqueta (18px): el espacio entre bloques de la página
   (19,2px arriba de cada uno) se lo sacan la pastilla y los avisos, que van en el mismo renglón o vacíos. */
body .cart-page .cart-title {
    display: inline-block;
    margin: 0 12px 0 0 !important;
    font: 600 38px/1.1 var(--cx-disp) !important;
    vertical-align: baseline;
}
body .cart-page .cx-count {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--cx-tint);
    font: 700 12.5px/1.55 var(--cx-font);
    color: var(--cx-muted);
    vertical-align: 8px;
    margin: 0 !important;
}
body .cart-page .cart-notices {
    margin-top: 0 !important;
}
body .cart-page .cart-content {
    margin-top: 18px !important;
}

@media (min-width: 783px) {
    body .wp-block-woocommerce-cart .wc-block-cart.wc-block-cart {
        gap: 24px !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
        flex: 0 0 340px !important;
        width: 340px !important;
        max-width: 340px !important;
    }
}

/* Las dos tarjetas: papel, borde fino, sin sombra. */
body .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__main,
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
    background: var(--cx-paper) !important;
    border: 1px solid var(--cx-line);
    border-radius: 14px !important;
    box-shadow: none !important;
}
body .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__main {
    container: cx-lista / inline-size;
    padding: 6px 22px !important;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items {
    width: 100%;
    margin: 0;
    border: 0;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items tbody {
    display: block;
}

/* Encabezado «Producto · Cantidad · Total», en la misma grilla que las filas. */
body .wp-block-woocommerce-cart table.wc-block-cart-items thead {
    display: block;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) var(--cx-qty-col, 120px) 110px;
    column-gap: 16px;
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--cx-line);
    font: 700 12px/1.55 var(--cx-font);
    color: var(--cx-muted);
    text-transform: none;
    letter-spacing: 0;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th {
    display: block;
    padding: 0 !important;
    border: 0;
    font: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: inherit;
    text-align: left;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th span {
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    font: inherit;
}
/* WooCommerce rotula «Producto» la columna de la foto y «Detalles» la del nombre: la foto va sin
   rótulo, el nombre lleva «Producto» y la columna nueva, «Cantidad». */
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-image {
    grid-column: 1 / 3 !important;
    padding-left: 92px !important;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-product {
    grid-column: 3 !important;
    visibility: visible;
    font-size: 0 !important;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-product span {
    display: none;
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-product::before {
    content: "Cantidad";
    font: 700 12px/1.55 var(--cx-font);
}
body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th.wc-block-cart-items__header-total {
    grid-column: 4 !important;
    text-align: right !important;
}

/* La fila en la lista ancha: foto de 76px, nombre y precio, la columna «Cantidad» (cuantificador y
   «Quitar» uno arriba del otro) y el total. */
@container cx-lista (min-width: 560px) {
    body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: 76px max-content minmax(0, 1fr) var(--cx-qty-col, 120px) 110px;
        column-gap: 16px;
        align-items: center;
        padding: 16px 0 !important;
    }
    body .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
        width: 76px !important;
        height: 76px;
        grid-row: 1 / span 3 !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-name {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
        align-self: end !important;
        font-size: 15px;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__prices {
        grid-row: 2 !important;
        align-self: start !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge {
        grid-row: 2 !important;
        grid-column: 3 !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row :is(.wc-block-components-product-metadata, .wc-block-components-product-badge:not(.wc-block-components-sale-badge)) {
        grid-column: 2 / 4 !important;
        grid-row: 3 !important;
        align-self: start !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__quantity {
        grid-column: 4 !important;
        grid-row: 1 / span 3 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px;
        margin: 0 !important;
        align-self: center !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link {
        margin: 0 0 0 -8px !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
        grid-column: 5 !important;
        grid-row: 1 / span 3 !important;
        align-self: center !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value {
        font-size: 15.5px;
    }
}
/* Con lugar, «Quitar» va al lado del cuantificador, como en el cajón y en el teléfono. */
@container cx-lista (min-width: 720px) {
    body .wp-block-woocommerce-cart table.wc-block-cart-items {
        --cx-qty-col: 190px;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__quantity {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px;
    }
    body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link {
        margin: 0 !important;
        padding-left: 30px !important;
        font-size: 13.5px !important;
        background-size: 16px !important;
    }
}
@container cx-lista (max-width: 559px) {
    body .wp-block-woocommerce-cart table.wc-block-cart-items thead {
        display: none;
    }
}

/* «Seguir comprando» y lo que falta para el envío gratis, al pie de la lista. */
.cx-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--cx-line);
    font: 400 13.5px/1.55 var(--cx-font);
}
.cx-more a {
    font-weight: 700;
    color: var(--cx-ink);
    text-underline-offset: 3px;
}
.cx-more span {
    font-size: 12.5px;
    color: var(--cx-muted);
}
.cx-more b {
    color: var(--cx-ink);
    font-weight: 700;
}
body .wp-block-woocommerce-cart .wc-block-cart__main .cx-undo {
    margin: 4px 0 12px;
}

/* Resumen: «Resumen», barra de envío, subtotal, ahorro, «Cómo te llega», el botón verde (el mismo del
   cajón) y los medios de pago. «El envío se calcula al finalizar la compra» y el «Retiro gratis ·
   Mercado Pago» fijo de style.css se reemplazan por lo de cart-extras.js. */
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px !important;
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block::before {
    content: "Resumen";
    margin: 0;
    font: 600 24px/1.1 var(--cx-disp);
    color: var(--cx-ink);
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block > * {
    margin: 0 !important;
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
    border: 0 !important;
    padding: 0 !important;
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block::before,
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block::after,
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper::after {
    display: none !important;
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block :is(.wc-block-components-totals-wrapper, .wc-block-components-totals-item) {
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper:empty {
    display: none;
}
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 400 13.5px/1.55 var(--cx-font) !important;
    color: var(--cx-ink);
}
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font: inherit !important;
    color: inherit !important;
}
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value * {
    font: 700 13.5px/1.55 var(--cx-font) !important;
    color: var(--cx-ink) !important;
}
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
    display: none !important;
}
.cx-save {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font: 400 13.5px/1.55 var(--cx-font);
    color: var(--cx-ink);
}
.cx-save b {
    font-weight: 800;
    color: var(--cx-green);
}
.cx-extra {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cx-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cx-opts__t {
    margin: 0;
    font: 800 10.5px/1.55 var(--cx-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cx-muted);
}
.cx-opt {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 10px;
    padding: 10px 12px;
    border: 1px solid var(--cx-line);
    border-radius: 10px;
    font: 400 13px/1.55 var(--cx-font);
    color: var(--cx-ink);
}
.cx-opt b {
    font-size: 13.5px;
    font-weight: 700;
}
.cx-opt em {
    grid-column: 2 / 4 !important;
    font-style: normal;
    color: var(--cx-muted);
}
.cx-opt__p {
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}
.cx-opt__ico {
    grid-row: 1 / 3 !important;
    width: 20px;
    height: 20px;
    background: var(--cx-green);
    -webkit-mask: var(--cx-ico) center / contain no-repeat;
    mask: var(--cx-ico) center / contain no-repeat;
}
.cx-opt__ico--envio {
    --cx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.6' fill='%23000'/%3E%3Ccircle cx='17' cy='17.5' r='1.6' fill='%23000'/%3E%3C/svg%3E");
}
.cx-opt__ico--retiro {
    --cx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 10l1.5-5h13L20 10M4 10v9h16v-9M4 10h16M9 19v-5h6v5'/%3E%3C/svg%3E");
}
.cx-pagas {
    margin: 0;
    text-align: center;
    font: 400 12px/1.55 var(--cx-font);
    color: var(--cx-muted);
}
:is(.cx-pagas, .cx-opts, .cx-pick, .cx-save, .cx-more span)[hidden] {
    display: none;
}
body .wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block::after {
    content: none !important;
    display: none !important;
}
body .wp-block-woocommerce-cart .wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky) {
    padding: 0;
}
/* El subtotal de .cx-barsub es de la barra fija del teléfono. WooCommerce usa la misma caja cuando la
   barra deja de estar fija (al llegar abajo), y ahí quedaba pegado al botón y repetía el «Subtotal»
   del resumen. */
body .wp-block-woocommerce-cart .wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky) .cx-barsub {
    display: none;
}
body .wp-block-woocommerce-cart .wc-block-cart__submit-button,
body .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: var(--cx-green) !important;
    color: var(--cx-paper) !important;
    font: 500 15.5px/1 var(--cx-font) !important;
    box-shadow: none !important;
    transform: none !important;
}
body .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
    filter: brightness(1.07);
}

/* Teléfono: la barra fija de WooCommerce lleva el subtotal a la izquierda, como la maqueta. */
body .wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px !important;
    background: var(--cx-paper) !important;
    border-top: 1px solid var(--cx-line);
    box-shadow: 0 -6px 18px rgba(44, 62, 45, .08) !important;
}
body .wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky::before {
    display: none;
}
body .wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky .wc-block-cart__submit-button {
    flex: 1;
}
.cx-barsub {
    display: flex;
    flex-direction: column;
    margin: 0;
    font: 400 12px/1.25 var(--cx-font);
    color: var(--cx-muted);
}
.cx-barsub b {
    font-size: 17px;
    font-weight: 700;
    color: var(--cx-ink);
}

@media (max-width: 782px) {
    body .cart-page .cart-title {
        font-size: 30px !important;
    }
    body .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__main {
        padding: 2px 14px !important;
    }
    body .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
        margin-top: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cx-ship__track i,
    .cx-undo {
        transition: none;
        animation: none;
    }
}