.elementor-735 .elementor-element.elementor-element-b68d482{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:22px;--padding-bottom:22px;--padding-left:0px;--padding-right:0px;}.elementor-735 .elementor-element.elementor-element-a1484e3 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:16px;text-transform:uppercase;color:#686765;}.elementor-735 .elementor-element.elementor-element-ef24e80 .elementor-icon-wrapper{text-align:center;}.elementor-735 .elementor-element.elementor-element-ef24e80.elementor-view-stacked .elementor-icon{background-color:#686765;}.elementor-735 .elementor-element.elementor-element-ef24e80.elementor-view-framed .elementor-icon, .elementor-735 .elementor-element.elementor-element-ef24e80.elementor-view-default .elementor-icon{color:#686765;border-color:#686765;}.elementor-735 .elementor-element.elementor-element-ef24e80.elementor-view-framed .elementor-icon, .elementor-735 .elementor-element.elementor-element-ef24e80.elementor-view-default .elementor-icon svg{fill:#686765;}.elementor-735 .elementor-element.elementor-element-ef24e80 .elementor-icon{font-size:13px;}.elementor-735 .elementor-element.elementor-element-ef24e80 .elementor-icon svg{height:13px;}.elementor-735 .elementor-element.elementor-element-5b1d6fa .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;color:#817364;}.elementor-735 .elementor-element.elementor-element-4cad3a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--margin-top:48px;--margin-bottom:24px;--margin-left:0px;--margin-right:0px;}.elementor-735 .elementor-element.elementor-element-583b43f .elementor-heading-title{font-size:40px;font-weight:400;line-height:52px;}.elementor-735 .elementor-element.elementor-element-03416bd .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:20px;font-weight:400;line-height:24px;}.elementor-735 .elementor-element.elementor-element-ef3c8f9{--display:flex;--min-height:520px;--justify-content:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-735 .elementor-element.elementor-element-ef3c8f9.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-735 .elementor-element.elementor-element-6004482{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-735 .elementor-element.elementor-element-4cad3a9{--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-735 .elementor-element.elementor-element-ef3c8f9{--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}}@media(min-width:768px){.elementor-735 .elementor-element.elementor-element-b68d482{--content-width:1280px;}}@media(max-width:767px){.elementor-735 .elementor-element.elementor-element-b68d482{--gap:2px 2px;--row-gap:2px;--column-gap:2px;}.elementor-735 .elementor-element.elementor-element-a1484e3 .elementor-heading-title{font-size:15px;}.elementor-735 .elementor-element.elementor-element-5b1d6fa .elementor-heading-title{font-size:15px;}.elementor-735 .elementor-element.elementor-element-4cad3a9{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-735 .elementor-element.elementor-element-583b43f .elementor-heading-title{font-size:21px;}.elementor-735 .elementor-element.elementor-element-03416bd .elementor-heading-title{font-size:16px;}.elementor-735 .elementor-element.elementor-element-ef3c8f9{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for shortcode, class: .elementor-element-6b6ce77 *//*/////DESKTOP/////*/

/* --- TABLA DE PRODUCTOS --- */

/* 1. Ocultar columna Precio Unitario (tu ref solo tiene Total) */
.woocommerce-cart .product-price {
    display: none !important; 
}

/* 2. Estilo de la X (Eliminar) */
.woocommerce-cart .product-remove a.remove {
    color: #b91d1d !important; /* Rojo oscuro */
    background: transparent !important;
    font-size: 22px !important;
    border: none !important;
    font-weight: bold;
}
.woocommerce-cart .product-remove a.remove:hover {
    color: red !important;
}

/* 3. Centrar verticalmente el contenido de la tabla */
.woocommerce-cart table.cart td {
    vertical-align: middle !important;
}

/* --- SECCIÓN DE TOTALES (El bloque gris abajo) --- */

/* Mover los totales para que ocupen todo el ancho */
.cart-collaterals {
    width: 100% !important;
    display: block !important;
}

.cart_totals {
    width: 100% !important;
    float: none !important;
    background-color: #f9f9f9; /* Fondo Gris muy suave */
    padding: 30px !important;
    margin-top: 30px;
    border-radius: 4px; /* Opcional: bordes redondeados */
}

/* Ocultar título "Totales del carrito" para que quede limpio como la foto */
.cart_totals h2 {
    display: none; 
}

/* Estilos de la fila del Total */
.cart_totals table.shop_table {
    border: none !important;
    width: 100%;
}
.cart_totals table.shop_table th, 
.cart_totals table.shop_table td {
    border-top: none !important; /* Quitar lineas */
    padding: 10px 0;
}

/* Texto "Total" a la izquierda, grande y gris */
.cart_totals table.shop_table tr.order-total th {
    text-align: left;
    font-size: 28px;
    color: #aeaeae; /* Color de tu referencia */
    font-family: serif; /* O la fuente de tus titulos */
    font-weight: normal;
}

/* Precio Total a la derecha, grande y gris */
.cart_totals table.shop_table tr.order-total td {
    text-align: right;
    font-size: 28px;
    color: #aeaeae;
}

/* Ocultar Subtotal y Envío si solo quieres ver el TOTAL final como en la foto */
/* Si necesitas mostrar envío, borra estas lineas */
.cart_totals table.shop_table tr.cart-subtotal,
.cart_totals table.shop_table tr.shipping {
    display: none; 
}

/* Botón Finalizar Compra a la derecha y abajo */
.wc-proceed-to-checkout {
    text-align: right;
    padding-top: 20px;
}
.wc-proceed-to-checkout a.checkout-button {
    background-color: #8c7d70 !important; /* Marrón */
    color: white !important;
    padding: 15px 40px !important;
    font-size: 16px;
    border-radius: 2px;
}

/* --- LIMPIEZA DEL CARRITO --- */

/* 1. Ocultar botón "Actualizar carrito" */
/* Lo ocultamos visualmente pero el Script de arriba lo sigue "clicando" invisiblemente */
button[name='update_cart'] {
    display: none !important;
}

/* 2. Ocultar toda la fila de Cupones */
.coupon {
    display: none !important;
}



/* OPCIONAL: Ajuste final de limpieza */
/* A veces queda un espacio vacío donde estaba el cupón, esto lo ajusta */
.woocommerce-cart table.cart td.actions {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
}

/* --- ESTILOS DE TABLA LIMPIA (Sin líneas) --- */

/* 1. Quitar TODOS los bordes de la tabla principal */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-cart table.shop_table tr {
    border: none !important; /* Quita las líneas grises */
    border-collapse: collapse !important;
}

/* Asegurar que no queden líneas encima de las filas */
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tbody td {
    border-top: none !important;
}

/* 2. Mejorar el espaciado y estilo de los encabezados */
/* En tu referencia los títulos (Producto, Cantidad...) no son negrita */
.woocommerce-cart table.shop_table th {
    font-weight: normal !important;
    font-size: 16px; /* Ajusta el tamaño si lo necesitas */
    color: #222; /* Color oscuro para los títulos */
    padding: 20px 0 !important; /* Más espacio vertical */
    text-align: left; /* Alineados a la izquierda */
}

/* 3. Mejorar espaciado de las celdas de productos */
.woocommerce-cart table.shop_table td {
    padding: 25px 0 !important; /* Dar aire arriba y abajo de cada producto */
    vertical-align: middle !important; /* Centrar todo verticalmente */
}

/* 4. Arreglar la columna de imagen (estaba muy apretada en image_2.png) */
.woocommerce-cart table.shop_table .product-thumbnail {
    width: 120px !important; /* Darle un ancho fijo a la columna de imagen */
    text-align: center;
}
/* Quitar cualquier borde extraño en la imagen misma */
.woocommerce-cart table.shop_table .product-thumbnail img {
    border: none !important;
    box-shadow: none !important;
    width: auto; /* Que la imagen use el ancho que necesite hasta el máximo de la columna */
    max-height: 100px; /* Limitar la altura para que no sean gigantes */
}

/* 5. Arreglar la columna de la X (Eliminar) - ACTUALIZADO */
.woocommerce-cart table.shop_table td.product-remove {
    width: 120px !important;        /* Espacio suficiente */
    text-align: center !important;
    padding-left: 20px !important; 
    padding-right: 20px !important;
    
    /* --- CAMBIO AQUÍ: ALINEACIÓN ABAJO --- */
    vertical-align: bottom !important; /* Lo empuja al fondo */
    padding-bottom: 50px !important;   /* Mismo padding que tienen los otros elementos para que queden alineados */
}


/* Darle un ancho fijo a la columna ELIMINAR para que no choque */
.woocommerce-cart table.shop_table td.product-remove {
    width: 120px !important; /* Espacio suficiente para la palabra */
    text-align: center !important;
    padding-left: 20px !important; 
    padding-right: 20px !important;
}

/* Asegurar que el precio (Subtotal) se mantenga a la derecha */
.woocommerce-cart table.shop_table td.product-subtotal {
    text-align: right !important;
    width: 150px !important; /* Ancho fijo para el precio */
}

/* --- QUITAR FONDOS GRISES DE LA LISTA DE PRODUCTOS --- */

/* Forzar fondo transparente en todas las filas y celdas de la tabla de productos */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table tbody,
.woocommerce-cart table.shop_table tr,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
    background-color: transparent !important;
}

/* Asegurarnos de quitar el estilo "cebra" (filas pares/impares) si el tema lo tiene */
.woocommerce-cart table.shop_table tr:nth-child(odd),
.woocommerce-cart table.shop_table tr:nth-child(even) {
    background-color: transparent !important;
}

/* Si prefieres que sea blanco puro en lugar de transparente, cambia 'transparent' por '#fff' */



/*BOTON DE VOLVER*/

/* Contenedor para ubicar el botón a la izquierda */
.contenedor-boton-volver {
    float: left; /* Lo empuja a la izquierda */
    margin-top: 30px; /* Alinearlo con la caja de totales */
    width: 50%; /* Ocupa la mitad izquierda */
}

/* Estilo del Botón */
a.mi-boton-continuar {
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid #8c7d70 !important; /* Borde gris como la referencia */
    background-color: transparent;
    color: #8c7d70; /* Color marrón del texto */
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el mouse (Hover) */
a.mi-boton-continuar:hover {
    background-color: #fff!important;
    color: #A6A39D;
    border-color: #A6A39D!important;
}

/* AJUSTE MOVIL: Que se vea bien en celular */
@media (max-width: 768px) {
    .contenedor-boton-volver {
        float: none;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
}

/* --- ALINEACIÓN DE BOTONES LADO A LADO --- */

/* 1. Convertir el contenedor en una caja flexible */
.wc-proceed-to-checkout {
    display: flex !important;
    justify-content: flex-end; /* Alinearlos a la DERECHA */
    align-items: center;       /* Centrarlos verticalmente */
    gap: 15px;                 /* Espacio entre los dos botones */
    width: 100%;
}

/* 2. Ajustar botón Finalizar Compra (El Marrón) */
/* Importante: Le quitamos el ancho 100% para que deje espacio al otro */
.wc-proceed-to-checkout a.checkout-button {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    flex-shrink: 0; /* Evita que se aplaste */
}

/* 3. Estilo botón Continuar Comprando (El Blanco) */
a.mi-boton-continuar {
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid #aeaeae;
    background-color: #fff; /* Fondo blanco */
    color: #8c7d70;         /* Letra Marrón */
    text-transform: uppercase;
    font-size: 16px;        /* Mismo tamaño que el de finalizar */
    font-weight: bold;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

a.mi-boton-continuar:hover {
    background-color: #fff;
    color: #A6A39D;
    border-color: #A6A39D;
}

/* AJUSTE PARA MÓVIL (Celulares) */
/* En pantallas chicas, mejor que vuelvan a estar uno arriba del otro */
@media (max-width: 600px) {
    .wc-proceed-to-checkout {
        flex-direction: column-reverse; /* Continuar abajo, Finalizar arriba */
        gap: 10px;
    }
    .wc-proceed-to-checkout a.checkout-button,
    a.mi-boton-continuar {
        width: 100% !important; /* Botones anchos en celular */
        text-align: center;
    }
}

/* --- QUITAR FONDO GRIS DE TOTALES --- */

.cart-collaterals, 
.cart_totals {
    background-color: transparent !important; /* Quita el gris */
    border: none !important; /* Quita bordes si los hubiera */
    padding: 20px 0 !important; /* Quitamos el relleno lateral, dejamos solo vertical */
    box-shadow: none !important; /* Quita sombras si el tema las agrega */
}

/* --- LÍNEA DIVISORA ENTRE PRODUCTOS --- */

/* Aplicar borde solo abajo de las celdas de los productos */
.woocommerce-cart table.shop_table tr.cart_item td {
    border-bottom: 1px solid #E9E3D7 !important;
}

/* --- RECUADRO PARA IMÁGENES DE PRODUCTO --- */

.woocommerce-cart table.shop_table .product-thumbnail img {
    border: 1px solid #E9E3D7 !important; /* Color y grosor solicitado */
    border-radius: 2px !important;       /* Radio de borde solicitado */
    padding: 3px;                        /* Opcional: Un pequeño espacio interior para que parezca un marco */
    background-color: #fff;              /* Fondo blanco para el marco por si la imagen es transparente */
}

/* --- ESTILO DEL NOMBRE DEL PRODUCTO --- */

/* Importar la fuente Crimson Text de Google Fonts (por seguridad) */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* Aplicar estilos al enlace del nombre */
.woocommerce-cart table.shop_table td.product-name a {
    font-family: "Crimson Text", serif !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    font-size: 25px !important;
    color: #1C1C1C !important;
    text-decoration: none !important; /* Quita el subrayado si lo tuviera */
}

/* Efecto hover opcional (cuando pasas el mouse) */
.woocommerce-cart table.shop_table td.product-name a:hover {
    color: #555 !important; /* Un gris un poco más claro al pasar el mouse */
}


/* --- ESTILOS DE CAMPOS PERSONALIZADOS (Lato) --- */

/* 1. Importamos la fuente Lato (Pesos 400 y 600) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600&display=swap');

/* 2. Estilo para el primer campo (Descripción) */
/* Fuente: Lato, Peso: 600, Altura: 22px, Tamaño: 18px, Color: #1C1C1C */
.scf-descripcion {
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    font-size: 18px !important;
    color: #1C1C1C !important;
}

/* 3. Estilo para el segundo campo (Detalle) */
/* Fuente: Lato, Peso: 400, Altura: 19px, Tamaño: 16px, Color: #686765 */
.scf-detalle {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400 !important;
    line-height: 19px !important;
    font-size: 16px !important;
    color: #686765 !important;
    margin-left: 4px; /* Un pequeño ajuste para separarlo del anterior si es necesario */
}

/* --- ESTILO TEXTO "ELIMINAR" --- */

.woocommerce-cart table.shop_table td.product-remove a {
    font-family: 'Lato', sans-serif !important; /* Fuente Lato */
    font-weight: 700 !important;                /* Peso 700 (Bold) */
    line-height: 19px !important;               /* Altura 19px */
    font-size: 16px !important;                 /* Tamaño 16px */
    color: #A35B52 !important;                  /* Color exacto */
    
    text-transform: uppercase;                  /* Mantiene mayúsculas */
    text-decoration: none !important;           /* Sin subrayado */
    background: transparent !important;         /* Fondo transparente */
    border: none !important;
}

/* Opcional: Un pequeño cambio al pasar el mouse para que se sienta interactivo */
.woocommerce-cart table.shop_table td.product-remove a:hover {
    opacity: 0.8; 
    text-decoration: underline !important;
}

/* --- ESTILO DEL PRECIO DE CADA PRODUCTO --- */

/* Aplicamos estilo a la celda del subtotal y al monto dentro de ella */
.woocommerce-cart table.shop_table td.product-subtotal,
.woocommerce-cart table.shop_table td.product-subtotal .woocommerce-Price-amount {
    font-family: 'Crimson Text', serif !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    font-size: 25px !important;
    color: #686765 !important;
}

/* --- ESTILO DE LA ETIQUETA "TOTAL" --- */

.cart-collaterals .cart_totals table.shop_table tr.order-total th {
    font-family: 'Crimson Text', serif !important;
    font-weight: 400 !important;
    line-height: 39px !important;
    font-size: 30px !important;
    color: #817364 !important;
    text-align: left !important; /* Asegura que esté a la izquierda */
}

/* --- ESTILO DEL VALOR (PRECIO) DEL TOTAL --- */

.cart-collaterals .cart_totals table.shop_table tr.order-total td,
.cart-collaterals .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount {
    font-family: 'Crimson Text', serif !important;
    font-weight: 400 !important;
    line-height: 39px !important;
    font-size: 30px !important;
    color: #817364 !important;
    text-align: right !important; /* Mantiene el precio alineado a la derecha */
}

/* --- ESTILO BOTÓN FINALIZAR COMPRA (Lato + Mayúsculas) --- */

/* Estado Normal */
.wc-proceed-to-checkout a.checkout-button {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    line-height: 19px !important;
    font-size: 16px !important;
    text-transform: uppercase !important; /* <--- ESTO PONE TODO EN MAYÚSCULAS */
    
    /* Colores Iniciales */
    color: #FFFFFF !important;
    background-color: #817364 !important;
    
    /* Dimensiones y Bordes */
    padding: 14px 24px !important;
    border-radius: 2px !important;
    border: 1px solid #817364 !important;
    
    /* Ajustes de ubicación */
    width: auto !important;
    display: inline-block !important;
    transition: all 0.3s ease;
}

/* --- CORRECCIÓN FINAL: ESTADO HOVER (BLINDADO) --- */
/* Usamos 'body' al principio para que pese más que el tema */
body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #A6A39D !important; /* EL GRIS QUE QUIERES */
    color: #FFFFFF !important;            /* LETRAS BLANCAS */
    border: 1px solid #A6A39D !important;
    text-decoration: none !important;
    opacity: 1 !important;                /* Evita transparencias raras */
}

/* --- CORRECCIÓN FINAL: ESTADOS FOCUS/ACTIVE --- */
/* Esto evita que se ponga blanco al hacer clic */
.wc-proceed-to-checkout a.checkout-button:focus,
.wc-proceed-to-checkout a.checkout-button:active,
.wc-proceed-to-checkout a.checkout-button:visited {
    background-color: #817364 !important; /* Mantiene tu Marrón */
    color: #FFFFFF !important;            /* Mantiene texto Blanco */
    border: 1px solid #817364 !important;
    outline: none !important;             
    box-shadow: none !important;          
}

.mi-boton-continuar {
    text-decoration: none !important;
    border-radius: 2px !important;
    padding: 14px 24px !important;
    display: inline-block !important; /* Vital para que el padding funcione bien */
    line-height: normal !important;   /* A veces los temas fuerzan una altura de línea rara */
}

.mi-boton-continuar:hover {
    text-decoration: none !important;
    opacity: 0.8; /* Opcional: para ver si reacciona al mouse */
}


/*BOTONES + Y -*/


/* 1. ELIMINAR FLECHAS NATIVAS */
.qty::-webkit-inner-spin-button, 
.qty::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.qty { -moz-appearance: textfield; }

/* 2. EL CONTENEDOR (La caja externa) */
.cantidad-custom-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #E9E3D7 !important;  /* Borde general beige */
    border-radius: 2px !important;         /* Radio solicitado */
    background-color: #fff !important;
    line-height: normal !important;        /* Evita alturas raras */
    box-shadow: none !important;           /* Quita sombras del tema */
    padding: 0 !important;                 /* Sin relleno interno */
    width: auto !important;                /* Que se ajuste al contenido */
}

/* 3. RESETEO GENERAL PARA LOS 3 ELEMENTOS */
.cantidad-custom-wrapper .qty-btn,
.cantidad-custom-wrapper input.qty {
    display: block !important;
    margin: 0 !important;            /* CLAVE: Elimina espacios entre ellos */
    padding: 0 !important;
    border: none !important;         /* CLAVE: Elimina bordes rojos individuales */
    box-shadow: none !important;     /* Elimina brillos o sombras */
    border-radius: 0 !important;     /* Cuadrados por dentro */
    height: 44px !important;         /* Altura forzada */
    line-height: 44px !important;    /* Centrado vertical del texto */
    background: transparent !important;
    
    /* Tipografía */
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: #1C1C1C !important;
}

/* 4. BOTONES (+ y -) */
.cantidad-custom-wrapper .qty-btn {
    width: 40px !important;         /* Ancho solicitado */
    cursor: pointer !important;
    text-align: center !important;
}

.cantidad-custom-wrapper .qty-btn:hover {
    background-color: #f7f7f7 !important; /* Gris muy sutil al pasar mouse */
}

/* 5. EL INPUT DEL NÚMERO (Centro) */
.cantidad-custom-wrapper input.qty {
    width: 52px !important;         /* Ancho solicitado */
    text-align: center !important;
    
    /* Las líneas divisorias internas */
    border-left: 1px solid #E9E3D7 !important;
    border-right: 1px solid #E9E3D7 !important;
    
    /* Aseguramos que el input no tenga fondo que tape las líneas */
    background-color: transparent !important; 
}


/*BORDES FILA TOTAL*/

/* Bordes superior e inferior para la fila del Total */
.cart_totals tr.order-total th, 
.cart_totals tr.order-total td {
    border-top: 1px solid #817364 !important;
    border-bottom: 1px solid #817364 !important;
    border-left: none !important;  /* Aseguramos que no salgan bordes laterales */
    border-right: none !important;
}

/* Opcional: Ajuste de espaciado para que la línea no toque el texto */
.cart_totals tr.order-total th, 
.cart_totals tr.order-total td {
    padding-top: 15px !important;    /* Espacio arriba del texto */
    padding-bottom: 15px !important; /* Espacio abajo del texto */
}


.cart_totals {margin-top:0px!important;
    padding-top:0px!important;
}

.cart-collaterals{padding-top:0px!important;
    
    margin-top:-20px!important;
}


/* 1. Volvemos al comportamiento natural de tabla para no romper filas */
td.product-quantity {
    display: table-cell !important;  /* CRUCIAL: Esto arregla las líneas rotas */
    vertical-align: middle !important; /* Centra verticalmente respecto a la imagen y el precio */
    text-align: center !important;     /* Centra horizontalmente el contenido */
    padding-top: 20px !important;      /* Un poco de aire extra */
    padding-bottom: 20px !important;
    border-top: none !important;       /* Limpieza de bordes extraños */
}

/* 2. Agregamos el texto "Cantidad" encima */
td.product-quantity::before {
    content: "Cantidad";
    display: block;        /* Hace que ocupe su propia línea */
    margin-bottom: 8px;    /* Espacio antes de los botones */
    
    /* Estilos del texto */
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #1C1C1C;
    font-weight: 400;
}

/* 3. Aseguramos que el .elementor-735 .elementor-element.elementor-element-6b6ce77 se centre bien */
.cantidad-custom-wrapper {
    display: inline-flex !important;
    margin: 0 auto !important;
}

/* 4. AJUSTE EXTRA: Alinear verticalmente el resto de la fila */
/* Esto asegura que la imagen, el nombre, el botón eliminar y el precio queden alineados al centro */
tr.woocommerce-cart-form__cart-item td {
    vertical-align: middle !important;
}

/* Ocultar los encabezados de la tabla del carrito */
.woocommerce-cart .shop_table thead {
    display: none !important;
}

/* Texto "Cantidad" encima del .elementor-735 .elementor-element.elementor-element-6b6ce77 */
td.product-quantity::before {
    content: "Cantidad";
    display: block;
    margin-bottom: 8px; /* Espacio para que no se pegue a los botones */
    
    /* Estilos actualizados */
    font-family: 'Lato', sans-serif !important;
    font-weight: 400 !important;    /* Peso solicitado */
    font-size: 18px !important;     /* Tamaño solicitado */
    color: #1C1C1C !important;      /* Color solicitado */
    
    /* Aseguramos que se centre */
    text-align: center !important;
    width: 100%;
}

/*IMAGENES*/

/* 1. Ajustamos la celda de la tabla para darle espacio */
.woocommerce-cart table.cart td.product-thumbnail {
    width: 110px !important;       /* Ancho de la columna */
    min-width: 110px !important;
    text-align: center !important; /* Centramos la imagen en su celda */
    padding-right: 20px !important;/* Espacio con el nombre del producto */
    vertical-align: middle !important; /* Alineación vertical */
}

/* 2. Definimos el contenedor cuadrado (generalmente el enlace <a> que envuelve la imagen) */
.woocommerce-cart table.cart td.product-thumbnail a {
    display: inline-block !important; /* Necesario para aplicarle medidas */
    width: 90px !important;           /* ANCHO del cuadrado */
    height: 90px !important;          /* ALTO del cuadrado */
    border-radius: 2px !important;    /* Bordes redondeados suaves */
    overflow: hidden !important;      /* Asegura que el radio recorte la imagen */
    border: 1px solid #f0f0f0 !important; /* Opcional: un borde finito muy sutil */
}

/* 3. La MAGIA para la imagen (object-fit) */
.woocommerce-cart table.cart td.product-thumbnail img {
    width: 100% !important;           /* Llena el ancho del contenedor <a> */
    height: 100% !important;          /* Llena el alto del contenedor <a> */
    
    /* ESTA ES LA CLAVE: 'cover' recorta la imagen para llenar el cuadrado sin deformar */
    object-fit: contain !important;     
    
    /* Centra la imagen para que el recorte sea equilibrado */
    object-position: center center !important; 
    
    padding: 20 !important;
    box-shadow: none !important;
    border-radius: 0 !important;      /* El radio ya lo tiene el contenedor padre */
}

/*ANCHOS DE COLUMNAS*/



/* 1. Columna del Nombre (La más ancha para empujar el resto) */
.woocommerce-cart table.cart td.product-name {
    width: 40% !important;       /* Ocupa casi la mitad de la tabla */
    padding-left: 30px !important; /* Un poco más de aire junto a la foto */
    text-align: left !important;
}

/* 2. Columna de Cantidad (El centro) */
.woocommerce-cart table.cart td.product-quantity {
    width: 25% !important;       /* Ancho suficiente para que tenga aire a los lados */
    /* El centrado ya lo hicimos con el código anterior */
}

/* 3. Columna de Eliminar (El botón rojo) */
.woocommerce-cart table.cart td.product-remove {
    width: 20% !important;
    text-align: left !important; /* Lo empuja hacia la derecha */
    padding-right: 15px !important; /* Separación con el precio */
}

/* 4. Columna de Precio (Subtotal) */
.woocommerce-cart table.cart td.product-subtotal {
    width: 15% !important;
    text-align: right !important; /* Alineado a la derecha */
}


.woocommerce-cart table.cart td.product-remove a.remove:hover {
    color: #000 !important;       /* Color al pasar el mouse */
    background: transparent !important;
}


/*/////MOBILE/////*/


/* =========================================
   VERSIÓN MÓVIL (Menos de 769px - Incluye 768px) - FINAL
   ========================================= */
@media only screen and (max-width: 768px) {

    /* 1. RESET Y LIMPIEZA */
    .woocommerce-cart table.cart, 
    .woocommerce-cart table.cart tbody, 
    .woocommerce-cart table.cart tr, 
    .woocommerce-cart table.cart td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        position: relative;
    }

    /* Ocultar cabeceras y etiquetas automáticas */
    .woocommerce-cart table.cart thead { display: none !important; }
    .woocommerce-cart table.cart td::before { content: none !important; }

    /* --- CORRECCIÓN CLAVE: OCULTAR PRECIO UNITARIO --- */
    /* Esto mata el precio que aparece duplicado bajo el nombre */
    .woocommerce-cart table.cart td.product-price {
        display: none !important; 
    }

    /* 2. ESTRUCTURA DE TARJETA (GRID) */
    .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
        display: grid !important;
        /* [FOTO 48px] [CONTENIDO] [DERECHA] */
        grid-template-columns: 48px 1fr auto !important; 
        grid-template-rows: auto auto !important; 
        gap: 10px;
        padding: 20px 0 !important;
        border-bottom: 1px solid #E9E3D7 !important;
        align-items: center;
        
    }

    /* A) FOTO (Izquierda - Ocupa las 2 filas de alto) */
    .woocommerce-cart table.cart td.product-thumbnail {
        grid-column: 1 / 2;
        grid-row: 1 / 3; 
        width: 48px !important;
        margin: 0 !important;
    }
    .woocommerce-cart table.cart td.product-thumbnail a {
        display: block !important;
        width: 70px !important;
        height: 100px !important;
    }
    .woocommerce-cart table.cart td.product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* B) NOMBRE (Centro Arriba) */
    .woocommerce-cart table.cart td.product-name {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        align-self: start !important;
        padding-top: 5px !important;
    }
    .woocommerce-cart table.cart td.product-name a {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.2;
    }

    /* C) ICONO BORRAR (Derecha Arriba) */
    .woocommerce-cart table.cart td.product-remove {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        align-self: start !important;
        text-align: right !important;
        width: auto !important;
    }
    .woocommerce-cart table.cart td.product-remove a.remove {
        font-size: 0 !important; /* Oculta texto */
        display: block !important;
    }
    .woocommerce-cart table.cart td.product-remove a.remove::before {
        content: "\1F5D1" !important; /* Icono 🗑 */
        font-size: 20px !important;
        color: #A05A4E !important;
    }

    /* D) CANTIDAD (Centro Abajo) */
    .woocommerce-cart table.cart td.product-quantity {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        align-self: end !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin-bottom: 5px !important;
    }
    /* Ocultar la palabra "Cantidad" extra si aparece */
    td.product-quantity::before { content: none !important; }
    .cantidad-custom-wrapper { margin: 0 !important; }

    /* E) TOTAL (Derecha Abajo) */
    .woocommerce-cart table.cart td.product-subtotal {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        align-self: end !important;
        text-align: right !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #666 !important;
        margin-bottom: 12px !important; /* Alineación visual */
    }

    /* 3. BOTONES DEL FINAL (ORDENADOS) */
    .cart_totals .wc-proceed-to-checkout {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        width: 100% !important;
        padding-top: 20px;
    }

    /* Orden: Continuar (1) arriba, Finalizar (2) abajo */
    /* AQUI ESTÁ EL CAMBIO DE CLASE: .mi-boton-continuar */
    .mi-boton-continuar { 
        order: 1 !important; 
        width: 100% !important;
        display: block !important;
        margin-bottom: 0 !important;
    }
    
    .checkout-button { 
        order: 2 !important; 
        width: 100% !important;
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    /* Quitar bordes a las celdas individuales dentro de la tarjeta */
    .woocommerce-cart table.cart tr.cart_item td,
    .woocommerce-cart table.cart td {
        border-top: none !important;
        border-bottom: none !important;
    }

    /* Mantener SOLO la línea inferior que separa un producto de otro */
    .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
        border-bottom: 1px solid #E9E3D7 !important;
    }
}

@media only screen and (max-width: 768px) {
    /* Ajuste tipográfico del Nombre del Producto */
    .woocommerce-cart table.cart td.product-name a {
        font-family: 'Crimson Text', serif !important;
        font-weight: 600 !important;
        font-size: 18px !important;
        line-height: 23px !important;
        color: #1C1C1C !important; /* Aseguramos el color negro suave */
        text-decoration: none !important;
    }
    
    @media only screen and (max-width: 768px) {
        .woocommerce-cart table.cart td.product-thumbnail a,
        .woocommerce-cart table.cart td.product-thumbnail img {
            border: none !important;      /* Elimina bordes sólidos */
            box-shadow: none !important;  /* Elimina sombras que parezcan bordes */
            padding: 0 !important;        /* Asegura que no haya espacio interno raro */
        }
        /*DARLE ESPACIO AL TEXTO*/
        .product-name {min-width:180px!important}
    }
}

@media only screen and (max-width: 768px) {
    .woocommerce-cart table.cart td.product-quantity {
        padding-left: 30px !important;
    }
}

@media only screen and (max-width: 768px) {
    /* ... tus otras reglas móviles ... */

    /* REEMPLAZO DEL ÍCONO DE BORRAR POR SVG PROPIO */
    .woocommerce-cart table.cart td.product-remove a.remove::before {
        /* 1. Quitamos el emoji anterior */
        content: "" !important;

        /* 2. Definimos el tamaño del nuevo ícono */
        display: block !important;
        width: 18px !important;  /* Ajusta este valor si lo quieres más grande o chico */
        height: 18px !important;

        /* 3. Ponemos tu SVG como fondo */
        background-image: url('https://allendelopezwines.com.ar/wp-content/uploads/2026/01/delete.svg') !important;
        background-size: contain !important; /* Asegura que el SVG entre entero en la caja */
        background-repeat: no-repeat !important;
        background-position: center center !important;

        /* 4. Limpieza de estilos anteriores */
        color: transparent !important; /* Oculta cualquier rastro de color de texto */
        font-size: 0 !important;
    }
}

@media only screen and (max-width: 768px) {
    .woocommerce-cart table.cart td.product-remove a.remove::before {
        padding-left:90px;
        margin-top: 20px;
    }
}
    
@media only screen and (max-width: 768px) {
    /* ... reglas anteriores ... */

    /* AJUSTE PARA PEGAR LAS LÍNEAS DE DESCRIPCIÓN */
    .woocommerce-cart table.cart td.product-name .scf-info-extra span,
    .woocommerce-cart table.cart td.product-name .scf-info-extra div,
    .woocommerce-cart table.cart td.product-name dl {
        display: block !important;
        width: 100% !important;
        
        /* CAMBIOS AQUÍ: */
        margin-bottom: 0 !important;   /* Eliminamos el espacio entre renglones */
        margin-top: 0 !important;      /* Aseguramos que no haya espacio arriba */
        line-height: 1.2 !important;   /* Altura de línea compacta */
        padding: 0 !important;         /* Limpieza final */
    }
    
    /* Opcional: Si el contenedor general tiene margen extra, se lo quitamos también */
    .woocommerce-cart table.cart td.product-name .scf-info-extra {
        gap: 0 !important; /* Si usa flexbox, quita el hueco */
    }
}

@media only screen and (max-width: 768px) {
    
    /* 1. TRUCO: Matamos el espacio fantasma (&nbsp;) */
    .woocommerce-cart table.cart td.product-name .scf-info-extra {
        font-size: 0 !important;    /* Hace que el espacio mida 0px */
        line-height: 0 !important;  /* Elimina la altura de línea del espacio */
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-top: 5px !important; /* Ajuste fino de separación con el título principal */
    }

    /* 2. RESUCITAMOS el texto real */
    .woocommerce-cart table.cart td.product-name .scf-info-extra span,
    .woocommerce-cart table.cart td.product-name .scf-info-extra div {
        font-size: 13.5px !important; /* Restauramos el tamaño original (según tu captura) */
        line-height: 1.2 !important;  /* Altura de línea compacta */
        display: block !important;
        margin: 0 !important;
    }
}


@media only screen and (max-width: 768px) {

    /* 1. Aseguramos que el contenedor de los botones no tenga límites */
    .cart-collaterals, 
    .cart_totals, 
    .wc-proceed-to-checkout {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Forzamos al botón "Finalizar Compra" a ocupar todo el ancho */
    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
        display: block !important;       /* Comportamiento de bloque */
        width: 100% !important;          /* Ancho total */
        margin-left: 0 !important;       /* Sin márgenes laterales */
        margin-right: 0 !important;
        box-sizing: border-box !important; /* Para que el padding no rompa el ancho */
        text-align: center !important;
    }

    /* 3. Forzamos al botón "Continuar Comprando" a ocupar todo el ancho */
    /* AQUI ESTÁ EL CAMBIO FINAL */
    .mi-boton-continuar {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}

@media only screen and (max-width: 768px) {

    /* Hacemos que AMBOS botones sean de ancho completo */
    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
    .mi-boton-continuar {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important; /* Evita que el padding rompa el ancho */
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Aseguramos que el contenedor padre no los apriete */
    .wc-proceed-to-checkout {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important; /* Uno arriba del otro */
        gap: 15px !important; /* Espacio vertical entre los dos botones */
    }
}


/*CARRITO VACIO*/


/* =========================================
   DISEÑO CARRITO VACÍO (Minimalista)
   ========================================= */

/* 1. Ocultar Título "Productos" (para limpieza total como en tu referencia) */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
    display: none !important;
}

/* 2. Transformar la caja de alerta amarilla en texto limpio */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-cart .cart-empty {
    background-color: transparent !important; /* Quita el fondo mostaza */
    border: none !important;                  /* Quita bordes */
    box-shadow: none !important;              /* Quita sombras */
    color: #1C1C1C !important;                /* Color de texto gris oscuro */
    
    font-family: 'Lato', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-align: center !important;            /* Centrado */
    
    padding: 40px 0 20px 0 !important;        /* Espacio vertical */
    margin: 0 !important;
}

/* 3. Ocultar el ícono o botón de cerrar que trae por defecto */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .close {
    display: none !important;
}

/* 4. Estilo del botón "VER TIENDA" */
.woocommerce-cart p.return-to-shop {
    text-align: center !important; /* Centra el contenedor del botón */
    margin-bottom: 60px !important;
    margin-top: 40px !important;
}

.woocommerce-cart p.return-to-shop a.button {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important; /* Mayúsculas */
    letter-spacing: 1px !important;
    
    background-color: #8c7d70 !important; /* Tu color Marrón */
    color: #ffffff !important;
    border: 1px solid #8c7d70 !important;
    border-radius: 2px !important;
    
    padding: 15px 40px !important;
    transition: all 0.3s ease !important;
}

.woocommerce-cart p.return-to-shop a.button:hover {
    background-color: #ffffff !important;
    color: #8c7d70 !important;
}

/* =========================================
   ELIMINAR CUADRADO AZUL (ÍCONO INFO)
   ========================================= */

/* Ocultar el pseudo-elemento 'before' que crea el cuadrado azul */
.woocommerce-cart .cart-empty.woocommerce-info::before,
.woocommerce-cart .woocommerce-info::before {
    display: none !important;
    content: none !important; /* Asegura que no se genere nada */
}

/* Ajuste extra: A veces el texto queda con sangría donde estaba el ícono */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .woocommerce-info {
    padding-left: 0 !important; /* Alineación perfecta al centro */
}


/* =========================================
   ESTILO TEXTO MENSAJE VACÍO (Centrado Forzado)
   ========================================= */

.woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-info {
    /* 1. Estilos de Fuente solicitados */
    font-family: 'Lato', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 38px !important;
    color: #1C1C1C !important;
    
    /* 2. FORZAR CENTRADO (Matando el Flexbox) */
    display: block !important;       /* Cambiamos flex por block para que el texto se centre fácil */
    text-align: center !important;   /* Centra el texto */
    width: 100% !important;          /* Ocupa todo el ancho */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 3. Limpieza visual */
    background-color: transparent !important;
    border: none !important;

    box-shadow: none !important;
}

@media only screen and (max-width: 768px) {
    .woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-info {
    font-size: 16px !important;
}
}

/* 1. Eliminar los elementos fantasma que estorban en Flexbox */
.woocommerce-cart .wc-proceed-to-checkout::before,
.woocommerce-cart .wc-proceed-to-checkout::after {
    display: none !important;
    content: none !important;
}

/* 2. Asegurar la alineación a la derecha */
.woocommerce-cart .wc-proceed-to-checkout {
    display: flex !important;
    justify-content: flex-end !important; /* Empuja todo a la derecha */
    gap: 15px; /* Espacio entre el botón de 'Continuar' y 'Finalizar' */
}
@media only screen and (max-width: 768px) {
.order-total {padding-bottom:30px}}/* End custom CSS */