grande "CALCULAR ENVÍO") que despliega el formulario de cálculo justo debajo. */
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
margin: 6px 0 0;
}
.woocommerce-cart .cart_totals .yagaro-calc-heading {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
text-transform: none;
}
.woocommerce-cart .cart_totals .yagaro-calc-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: #1a1a1a;
text-decoration: underline;
cursor: pointer;
}
.woocommerce-cart .cart_totals .yagaro-calc-toggle:hover {
opacity: .7;
color: #111;
}
.woocommerce-cart .cart_totals .yagaro-calc-toggle span {
font-size: 12px;
text-decoration: none;
transition: transform .2s ease;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator.is-open .yagaro-calc-toggle span {
transform: rotate(180deg);
}
.woocommerce-cart .cart_totals .shipping-calculator-form {
margin-top: 12px;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row {
margin: 0 0 10px;
padding: 0;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .input-text,
.woocommerce-cart .cart_totals .shipping-calculator-form select {
width: 100%;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .button {
margin-top: 4px;
}
/* --- Fila de envío del resumen: todo el contenido de la celda | a la derecha --- */
/* La celda | completa: right-align hereda hacia hijos inline */
body .woocommerce-cart .cart_totals .woocommerce-shipping-totals td {
text-align: right !important;
}
/* Lista de métodos */
body .woocommerce-cart .cart_totals .woocommerce-shipping-methods {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body .woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
margin: 0 0 4px !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
body .woocommerce-cart .cart_totals .woocommerce-shipping-methods li:last-child {
margin-bottom: 0 !important;
}
body .woocommerce-cart .cart_totals .woocommerce-shipping-methods label {
margin: 0 !important;
font-size: 14px !important;
line-height: 1.4 !important;
color: #1a1a1a !important;
/* normal (no nowrap): a 320px el nowrap impedía que la fila de envío
encogiera y desbordaba la tabla de totales por la derecha. */
white-space: normal !important;
text-align: right !important;
}
/* Destino: "Envía a …" — máx. 2 líneas, a la derecha */
body .woocommerce-cart .cart_totals p.yagaro-ship-dest,
body .woocommerce-cart .cart_totals .woocommerce-shipping-destination.yagaro-ship-dest {
margin: 6px 0 0 auto !important;
padding: 0 !important;
font-size: 12.5px !important;
line-height: 1.4 !important;
color: #8a8a8a !important;
font-weight: 400 !important;
text-align: right !important;
max-width: 200px !important;
display: block !important;
}
body .woocommerce-cart .cart_totals .yagaro-ship-dest strong {
font-weight: 500 !important;
color: #6a6a6a !important;
}
/* "Cambiar dirección" (.yagaro-calc-heading) → derecha */
body .woocommerce-cart .cart_totals .yagaro-calc-heading {
display: flex !important;
width: 100% !important;
justify-content: flex-end !important;
text-align: right !important;
margin: 5px 0 0 !important;
padding: 0 !important;
}
body .woocommerce-cart .cart_totals .yagaro-calc-toggle {
justify-content: flex-end !important;
white-space: nowrap !important;
}
/* Fallback: clase WC nativa por si acaso */
body .woocommerce-cart .cart_totals a.shipping-calculator-button {
display: block !important;
text-align: right !important;
font-size: 12px !important;
color: #8a8a8a !important;
text-decoration: underline !important;
margin-top: 5px !important;
}
/* --- Cabecera del carrito: "Bolsa · N piezas" + "Tu selección" ---
Se renderiza vía woocommerce_before_cart, primer hijo de .woocommerce.
En escritorio (grid 2 col) ocupa el ancho completo arriba; en móvil (flex
column) queda como primer ítem, sobre los productos, como en el mockup. */
.woocommerce-cart .yagaro-cart-head {
grid-column: 1 / -1;
order: -1; /* asegura que va el primero en el flex móvil */
margin: 0 0 6px;
}
.woocommerce-cart .yagaro-cart-head__eyebrow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8a8a8a;
}
.woocommerce-cart .yagaro-cart-head__count {
margin-left: auto;
letter-spacing: 0.08em;
}
.woocommerce-cart .yagaro-cart-head__title {
margin: 0 0 20px;
font-size: clamp(28px, 4.5vw, 42px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
color: #1a1a1a;
}
/* --- Barra de envío gratis (ahora al inicio del carrito) --- */
.woocommerce-cart .yagaro-freeship {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 22px;
}
.woocommerce-cart .yagaro-freeship__icon {
flex: 0 0 auto;
display: inline-flex;
}
.woocommerce-cart .yagaro-freeship__icon svg {
width: 22px;
height: 22px;
stroke: #111;
}
.woocommerce-cart .yagaro-freeship__body {
flex: 1 1 auto;
min-width: 0;
}
.woocommerce-cart .yagaro-freeship__txt {
font-size: 13px;
line-height: 1.35;
color: #111;
margin-bottom: 7px;
}
.woocommerce-cart .yagaro-freeship__txt .woocommerce-Price-amount {
font-weight: 700;
}
.woocommerce-cart .yagaro-freeship__bar {
height: 4px;
background: #ececec;
border-radius: 2px;
overflow: hidden;
}
.woocommerce-cart .yagaro-freeship__bar span {
display: block;
height: 100%;
background: #111;
border-radius: 2px;
transition: width .35s ease;
}
/* --- Cupón plegable "¿Tienes un código?" dentro del resumen --- */
.woocommerce-cart .cart_totals .yagaro-coupon-row td {
text-align: left !important;
padding: 14px 0 !important;
}
.woocommerce-cart .cart_totals .yagaro-coupon-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 14px;
color: #111;
text-decoration: none;
cursor: pointer;
}
.woocommerce-cart .cart_totals .yagaro-coupon-toggle:hover {
opacity: .7;
color: #111;
}
.woocommerce-cart .cart_totals .yagaro-coupon-toggle span {
font-size: 20px;
line-height: 1;
font-weight: 300;
transition: transform .2s ease;
}
.woocommerce-cart .cart_totals .yagaro-coupon.is-open .yagaro-coupon-toggle span {
transform: rotate(45deg);
}
.woocommerce-cart .cart_totals .yagaro-coupon-form {
display: flex;
gap: 8px;
margin-top: 12px;
}
.woocommerce-cart .cart_totals .yagaro-coupon-form .input-text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
height: 44px !important;
padding: 0 14px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 999px !important;
background: #fff !important;
font-size: 13px !important;
color: #1a1a1a !important;
box-shadow: none !important;
}
.woocommerce-cart .cart_totals .yagaro-coupon-form .input-text:focus {
outline: none;
border-color: #1a1a1a !important;
}
.woocommerce-cart .cart_totals .yagaro-coupon-form .button {
flex: 0 0 auto;
margin: 0;
background: #1a1a1a !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0 22px !important;
height: 44px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
cursor: pointer;
}
.woocommerce-cart .cart_totals .yagaro-coupon-form .button:hover {
opacity: .85;
background: #1a1a1a !important;
color: #fff !important;
}
/* ============================================================
Calculador de envío inline (País / Provincia / Ciudad / CP / Actualizar)
border-radius consistente con todo el resumen
============================================================ */
body .woocommerce-cart .shipping-calculator-form input,
body .woocommerce-cart .shipping-calculator-form input[type="text"],
body .woocommerce-cart .shipping-calculator-form select,
body .woocommerce-cart .shipping-calculator-form .input-text {
width: 100% !important;
height: 48px !important;
padding: 0 16px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 14px !important;
background: #fff !important;
font-size: 14px !important;
color: #1a1a1a !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
font-family: inherit !important;
font-style: normal !important;
}
body .woocommerce-cart .shipping-calculator-form input:focus,
body .woocommerce-cart .shipping-calculator-form select:focus {
outline: none;
border-color: #1a1a1a !important;
}
/* Select2 (cuando aplica) */
body .woocommerce-cart .shipping-calculator-form .select2-container .select2-selection,
body .woocommerce-cart .shipping-calculator-form .select2-container--default .select2-selection--single {
height: 48px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 14px !important;
background: #fff !important;
}
body .woocommerce-cart .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 46px !important;
padding: 0 16px !important;
color: #1a1a1a !important;
font-family: inherit !important;
font-style: normal !important;
}
body .woocommerce-cart .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px !important;
right: 8px;
}
/* Botón "ACTUALIZAR" → pill primary */
body .woocommerce-cart .shipping-calculator-form .button,
body .woocommerce-cart .shipping-calculator-form button[type="submit"] {
display: inline-block !important;
background: #1a1a1a !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 14px 28px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
cursor: pointer;
height: auto !important;
box-shadow: none !important;
transition: opacity .2s ease;
}
body .woocommerce-cart .shipping-calculator-form .button:hover {
opacity: .85;
background: #1a1a1a !important;
color: #fff !important;
}
/* --- Botón "Finalizar compra" dentro del resumen --- */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
padding: 0;
margin: 18px 0 0;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .cart_totals a.checkout-button.button {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 17px 24px !important;
height: auto !important;
min-height: 0 !important;
background: #111 !important;
color: #fff !important;
border: 0 !important;
border-radius: 40px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-align: center !important;
line-height: 1.2 !important;
box-shadow: none !important;
transition: opacity .2s ease;
position: relative !important;
overflow: hidden !important; /* clipa cualquier relleno interno al radio */
-webkit-appearance: none !important;
appearance: none !important;
}
/* Bridge inyecta un pseudo-relleno cuadrado (sin radio) en el hover de sus
.button/.qbutton → se ve como "rectángulo negro" asomando por las esquinas
de la pastilla. Aparece tanto en el botón como en su contenedor
.wc-proceed-to-checkout (este último NO recorta, por eso sobresale).
Los neutralizamos todos para que no pinten fondo ni tapen el texto. */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout::before,
.woocommerce-cart .cart_totals .wc-proceed-to-checkout::after,
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button::before,
.woocommerce-cart .cart_totals a.checkout-button.button::before {
display: none !important;
content: none !important;
background: transparent !important;
}
/* El contenedor no debe recortar ni pintar nada propio */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
overflow: visible;
background: transparent !important;
box-shadow: none !important;
}
.woocommerce-cart .cart_totals a.checkout-button.button::after {
content: " →";
white-space: pre;
background: transparent !important;
position: static !important;
}
.woocommerce-cart .cart_totals a.checkout-button.button:hover {
background: #111;
color: #fff;
opacity: .85;
}
/* --- Carrito vacío: ocultamos el wrapper antiguo + la frase WC default --- */
.woocommerce-cart .empty-cart-wrapper--hide-default {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
border: 0 !important;
}
/* ============================================================
Carrito vacío — diseño editorial completo
============================================================ */
.yagaro-cart-empty {
max-width: 1100px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.yagaro-cart-empty__hero {
text-align: center;
padding: 40px 20px 50px;
}
.yagaro-cart-empty__icon {
display: inline-flex;
width: 46px;
height: 46px;
margin-bottom: 26px;
color: #1a1a1a;
}
.yagaro-cart-empty__icon svg {
width: 46px !important;
height: 46px !important;
stroke: currentColor;
fill: none;
}
.yagaro-cart-empty__eyebrow {
margin: 0 0 14px;
font-size: 11px;
color: #888;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
}
.yagaro-cart-empty__title,
.woocommerce-cart .yagaro-cart-empty__title,
h2.yagaro-cart-empty__title {
margin: 0 0 18px !important;
font-size: 46px !important;
line-height: 1.05 !important;
font-weight: 400 !important;
color: #1a1a1a !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-family: inherit !important;
}
.yagaro-cart-empty__title em {
font-style: italic;
font-weight: 400;
}
.yagaro-cart-empty__sub {
margin: 0 auto 30px;
max-width: 480px;
font-size: 14px;
color: #555;
line-height: 1.5;
}
.yagaro-cart-empty__ctas {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin: 0 0 36px;
}
.yagaro-btn-primary--lg,
.yagaro-btn-outline--lg {
padding: 16px 30px !important;
font-size: 12px;
letter-spacing: 0.08em;
}
.yagaro-btn-outline--lg {
background: #fff;
}
.yagaro-cart-empty__badges {
display: flex;
gap: 28px;
justify-content: center;
flex-wrap: wrap;
color: #555;
font-size: 13px;
}
.yagaro-cart-empty__badge {
display: inline-flex;
align-items: center;
gap: 8px;
}
.yagaro-cart-empty__badge svg {
width: 18px !important;
height: 18px !important;
stroke: #1a1a1a;
fill: none;
}
/* ---- Sección "Lo más deseado" ---- */
.yagaro-cart-empty__more {
margin-top: 50px;
border-top: 1px solid #ececec;
padding-top: 36px;
}
.yagaro-cart-empty__more-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 16px;
}
.yagaro-cart-empty__more-head h3,
.woocommerce-cart .yagaro-cart-empty__more-head h3 {
margin: 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-family: inherit !important;
}
.yagaro-cart-empty__more-head .yagaro-cart-empty__eyebrow {
margin-bottom: 4px;
}
.yagaro-cart-empty__more-link {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #1a1a1a;
text-transform: uppercase;
text-decoration: none;
}
.yagaro-cart-empty__more-link:hover { opacity: .7; color: #1a1a1a; }
/* Grid productos */
.yagaro-cart-empty__products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.yagaro-cart-empty__product {
display: flex;
flex-direction: column;
}
.yagaro-cart-empty__product-img {
display: block;
overflow: hidden;
border-radius: 10px;
background: #f3f0e9;
aspect-ratio: 1 / 1;
margin-bottom: 12px;
}
.yagaro-cart-empty__product-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.yagaro-cart-empty__product-img:hover img { transform: scale(1.04); }
.yagaro-cart-empty__product-meta {
display: flex;
justify-content: space-between;
gap: 10px;
margin: 0 0 12px;
font-size: 14px;
}
.yagaro-cart-empty__product-name {
color: #1a1a1a;
font-weight: 600;
text-decoration: none;
flex: 1 1 auto;
}
.yagaro-cart-empty__product-name:hover { text-decoration: underline; }
.yagaro-cart-empty__product-price {
color: #1a1a1a;
font-weight: 600;
flex: 0 0 auto;
}
.yagaro-cart-empty__product-price .woocommerce-Price-amount { font-weight: 600; }
/* Botón "+ Añadir" pill outline a ancho completo (sobre la card) */
.yagaro-cart-empty__product .yagaro-add-btn,
.yagaro-cart-empty__product a.yagaro-add-btn {
display: block !important;
margin-top: auto;
text-align: center;
padding: 11px 16px !important;
border: 1px solid #1a1a1a !important;
border-radius: 999px !important;
color: #1a1a1a !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
background: transparent !important;
transition: background .2s ease, color .2s ease;
line-height: 1.2 !important;
height: auto !important;
width: 100% !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
.yagaro-cart-empty__product .yagaro-add-btn:hover {
background: #1a1a1a !important;
color: #fff !important;
}
.yagaro-cart-empty__product .yagaro-add-btn.loading,
.yagaro-cart-empty__product .yagaro-add-btn.added {
background: #1a1a1a !important;
color: #fff !important;
}
/* Responsive */
@media (max-width: 900px) {
.yagaro-cart-empty__products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.yagaro-cart-empty__title,
h2.yagaro-cart-empty__title { font-size: 32px !important; }
.yagaro-cart-empty__icon { width: 38px; height: 38px; }
.yagaro-cart-empty__icon svg { width: 38px !important; height: 38px !important; }
.yagaro-cart-empty__badges { gap: 16px; font-size: 12px; }
}
@media (max-width: 420px) {
.yagaro-cart-empty__products { grid-template-columns: 1fr; }
/* A ~320px el resumen desbordaba: Bridge fija un `width` inline por JS en
.cart_totals.calculated_shipping y la tabla de totales no se ceñía al
contenedor, dejando un ancho mínimo de ~331px (+56px de padding) mayor
que la pantalla. Lo forzamos a ceñirse al viewport y a partir el texto. */
.woocommerce-cart .woocommerce,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals.calculated_shipping {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals.calculated_shipping {
/* 16px en vez de 20 para ganar margen a 320px */
padding: 16px !important;
}
.woocommerce-cart .cart_totals table {
table-layout: fixed;
width: 100% !important;
max-width: 100% !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* La frase de WC "Tu carrito está vacío" lleva clase .woocommerce-info,
que por defecto se renderiza como pill (azul/negro). Aquí la desactivamos
y la presentamos como heading editorial centrado. */
body .woocommerce-cart .empty-cart-wrapper .cart-empty,
body.woocommerce-cart p.cart-empty,
body p.cart-empty.woocommerce-info,
.woocommerce-cart .empty-cart-wrapper .cart-empty,
.woocommerce-cart .empty-cart-wrapper p:first-of-type {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #1a1a1a !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
text-align: center !important;
line-height: 1.4 !important;
max-width: none !important;
}
/* Mata el icono ::before del pill (check) en este caso concreto */
body .woocommerce-cart .empty-cart-wrapper .cart-empty::before,
body p.cart-empty.woocommerce-info::before {
display: none !important;
content: none !important;
background: transparent !important;
mask: none !important;
-webkit-mask: none !important;
}
.woocommerce-cart .empty-cart-wrapper .return-to-shop {
margin: 26px 0 0 !important;
}
.woocommerce-cart .empty-cart-wrapper .return-to-shop a.button {
display: inline-block !important;
padding: 16px 36px !important;
background: #1a1a1a !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.06em;
font-size: 13px !important;
text-decoration: none;
transition: opacity .2s ease;
}
.woocommerce-cart .empty-cart-wrapper .return-to-shop a.button:hover {
opacity: .85;
background: #1a1a1a !important;
color: #fff !important;
}
/* Los gutters laterales del carrito los gestiona ahora el contenedor
global (.content_inner) en style.css, presente en todas las páginas. */
/* ============================================================
Carrito — apilado a 1 columna (≤900px)
A >900px se mantiene el grid de 2 columnas de style.css
(productos | resumen 360px); las tarjetas compactas de producto caben
de sobra junto al resumen. Por debajo de 900px apilamos en el orden del
mockup móvil: items → "Completa el look" → Resumen.
============================================================ */
@media (max-width: 900px) {
.woocommerce-cart .woocommerce {
display: flex !important;
flex-direction: column !important;
}
.woocommerce-cart .woocommerce > form.woocommerce-cart-form { order: 1; }
.woocommerce-cart .woocommerce > .yagaro-cross-sells { order: 2; }
.woocommerce-cart .woocommerce > .cart-collaterals { order: 3; }
.woocommerce-cart .woocommerce > .woocommerce-cart-form,
.woocommerce-cart .woocommerce > .cart-collaterals,
.woocommerce-cart .woocommerce > .yagaro-cross-sells,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
grid-column: auto !important;
position: static !important;
box-sizing: border-box !important;
}
.woocommerce-cart .cart-collaterals {
margin-top: 28px !important;
}
/* Tope de ancho del RESUMEN en todo el rango apilado (no solo ≤420).
Bridge fija un `width` inline por JS en .cart_totals.calculated_shipping;
con estos topes (incluida la propia clase y la tabla) la caja se ciñe al
contenedor a cualquier ancho < 900 y los importes dejan de recortarse por
la derecha. Antes el fix vivía solo en ≤420 y entre 421–900 se salía. */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals.calculated_shipping {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table.shop_table {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* ============================================================
Carrito — tarjeta por artículo (≤1200px)
Mientras los productos comparten fila con la columna del resumen (360px),
la tabla ancha del tema no cabe, así que cada fila se convierte en una
card compacta:
[ thumb ] [ nombre / variación ] [ × ]
[ thumb ] [ cantidad ] [ precio ]
============================================================ */
@media (max-width: 1200px) {
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table {
display: block;
width: 100%;
max-width: 100%;
/* Sin la caja con borde redondeado del tema (style.css la pone con
!important): en el layout de tarjetas solo queremos líneas finas
divisorias entre ítems, como en el mockup. */
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
border-collapse: collapse;
box-sizing: border-box;
}
.woocommerce-cart table.shop_table thead {
display: none;
}
.woocommerce-cart table.shop_table tbody {
display: block;
width: 100%;
}
/* La fila de "acciones" (cupón + actualizar) no es una card.
Los `!important` y el prefijo body.* son para ganar a la regla del tema
padre en ≤480px (.woocommerce-page.woocommerce-cart .woocommerce
table.cart tbody tr/td { display:block; text-align:center }), que si no
deshace el grid y centra el contenido. */
body.woocommerce-cart table.shop_table tbody tr.cart_item,
.woocommerce-cart table.shop_table tbody tr.cart_item,
.woocommerce-page.woocommerce-cart .woocommerce table.cart.shop_table tbody tr.cart_item,
.woocommerce-cart .woocommerce-cart-form table tbody tr.cart_item {
display: grid !important;
grid-template-columns: 88px minmax(0, 1fr) auto;
grid-template-areas:
"thumb name remove"
"thumb qty price";
column-gap: 14px;
row-gap: 12px;
align-items: center;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 16px !important;
margin: 0 0 12px !important;
border: 1px solid #ececec !important;
border-radius: 14px;
background: #fff;
text-align: left !important;
}
.woocommerce-cart table.shop_table tbody tr.cart_item:last-of-type {
margin-bottom: 0 !important;
}
/* Reset genérico de celdas */
body.woocommerce-cart table.shop_table tbody tr.cart_item td,
.woocommerce-cart table.shop_table tbody tr.cart_item td,
.woocommerce-page.woocommerce-cart .woocommerce table.cart.shop_table tbody tr.cart_item td {
display: block !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent;
}
/* Mata las etiquetas data-title (::before) del tema en móvil */
.woocommerce-cart table.shop_table tbody tr.cart_item td::before {
display: none !important;
content: none !important;
}
/* Thumbnail */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail {
grid-area: thumb;
width: 88px;
align-self: start;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-thumbnail img {
width: 88px !important;
height: 112px;
object-fit: cover;
border-radius: 12px;
display: block;
margin: 0 !important; /* Bridge lo centra con margin:0 auto en ≤480 */
}
/* Nombre + variación */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name,
.woocommerce-page.woocommerce-cart .woocommerce table.cart.shop_table tbody tr.cart_item td.product-name {
grid-area: name;
align-self: center;
min-width: 0;
text-align: left !important;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name a {
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: #1a1a1a;
text-decoration: none;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name dl.variation {
margin: 4px 0 0;
font-size: 12.5px;
line-height: 1.4;
color: #8a8a8a;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name dl.variation dt,
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name dl.variation dd {
display: inline;
margin: 0;
padding: 0;
font-weight: 400;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name dl.variation dd {
margin-right: 8px;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-name dl.variation p {
margin: 0;
}
/* Precio unitario: redundante en móvil (lo enseña el subtotal).
Selector reforzado para ganar al reset genérico de celdas (6 clases) que
ponía display:block y hacía reaparecer el 29.00€. */
.woocommerce-cart .cart_item td.product-price,
.woocommerce-page.woocommerce-cart .woocommerce table.cart.shop_table tbody tr.cart_item td.product-price {
display: none !important;
}
/* Cantidad */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-quantity {
grid-area: qty;
justify-self: start;
min-width: 0;
}
/* Subtotal */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-subtotal,
.woocommerce-page.woocommerce-cart .woocommerce table.cart.shop_table tbody tr.cart_item td.product-subtotal {
grid-area: price;
justify-self: end;
text-align: right !important;
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
/* Eliminar */
.woocommerce-cart table.shop_table tbody tr.cart_item td.product-remove {
grid-area: remove;
justify-self: end;
align-self: start;
}
/* Fila de acciones (cupón + actualizar carrito) a ancho completo */
.woocommerce-cart table.shop_table tbody tr td.actions {
display: block;
width: 100%;
padding: 16px 0 0;
border-top: 1px solid #ececec;
box-sizing: border-box;
}
/* El cupón nativo de la fila .actions es redundante (usamos el plegable
"¿Tienes un código?" del resumen) y su input tiene min-width:220px, que
sumado a los botones forzaba la tabla a ~390px y desbordaba a 320px. */
.woocommerce-cart table.shop_table tbody tr td.actions .coupon {
display: none !important;
}
/* --- Tabla del RESUMEN (totales) en móvil ---
Dos cosas rompían el ancho y recortaban los importes:
1) WooCommerce `shop_table_responsive` a ≤768px oculta el | y mete la
etiqueta con `td::before { content:attr(data-title); float:left }`,
duplicando etiquetas y forzando ancho. → matamos ese ::before.
2) El tema padre fija `td { padding:24px 16px !important; border-top !important }`,
y como nuestro padding no era !important ganaba el suyo (líneas sueltas
+ 16px de padding lateral que empuja el importe fuera). → !important.
Cada fila pasa a flex (etiqueta izquierda / importe derecha) respetando el
ancho del contenedor. */
.woocommerce-cart .cart_totals table.shop_table {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.woocommerce-cart .cart_totals table.shop_table tbody {
display: block !important;
width: 100% !important;
}
.woocommerce-cart .cart_totals table.shop_table tbody tr {
display: flex !important;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 2px 12px;
width: 100% !important;
padding: 14px 0 !important;
border: 0 !important;
border-top: 1px solid #ececec !important;
box-sizing: border-box;
}
.woocommerce-cart .cart_totals table.shop_table tbody tr:first-child {
border-top: 0 !important;
}
/* Mata la etiqueta automática data-title de WooCommerce (usamos el | ) */
.woocommerce-cart .cart_totals table.shop_table tbody tr td::before {
display: none !important;
content: none !important;
}
.woocommerce-cart .cart_totals table.shop_table tbody tr th {
display: block !important;
flex: 0 1 auto;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
text-align: left !important;
font-weight: 500;
}
.woocommerce-cart .cart_totals table.shop_table tbody tr td {
display: block !important;
flex: 1 1 auto;
width: auto !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
text-align: right !important;
word-break: break-word;
overflow-wrap: anywhere;
}
/* La celda de envío ya no necesita label en una sola línea: que envuelva */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods label {
white-space: normal !important;
}
/* Filas full-width (cupón, envío gratis): el td ocupa toda la fila */
.woocommerce-cart .cart_totals .yagaro-coupon-row td,
.woocommerce-cart .cart_totals tr td:only-child {
flex: 1 1 100%;
width: 100% !important;
text-align: left !important;
}
.woocommerce-cart .cart_totals .yagaro-coupon-row td {
padding: 0 !important;
}
}
/* Cross-sells ("Completa el look") movidos a assets/css/cross-sells.css
(compartido entre carrito y ficha de producto). En el carrito el espacio
superior por defecto (72px margin + 52px padding) queda excesivo; lo
compactamos SOLO aquí sin tocar la ficha de producto. */
.woocommerce-cart .yagaro-cross-sells {
margin-top: 28px;
padding-top: 28px;
}
@media (max-width: 480px) {
.woocommerce-cart .cart_totals .yagaro-garantias {
grid-template-columns: 1fr;
gap: 16px;
}
.woocommerce-cart .cart_totals .yagaro-coupon-form {
flex-direction: column;
}
}
/* ============================================================
Resumen plegable (móvil) — encabezado "Resumen · N piezas" + chevron
El cuerpo (.yagaro-resumen-body) lo crea el JS envolviendo la tabla de
totales y las garantías. En escritorio queda siempre abierto.
============================================================ */
.yagaro-resumen-count {
margin-left: 8px;
font-size: 13px;
font-weight: 500;
color: #8a8a8a;
text-transform: none;
letter-spacing: 0;
}
.yagaro-resumen-chevron {
display: none;
}
@media (max-width: 768px) {
.woocommerce-cart .cart_totals h2.yagaro-resumen-head {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 0;
padding: 6px 0;
user-select: none;
}
.woocommerce-cart .cart_totals h2.yagaro-resumen-head .yagaro-resumen-chevron {
display: inline-block;
width: 9px;
height: 9px;
margin-left: auto;
border-right: 2px solid #1a1a1a;
border-bottom: 2px solid #1a1a1a;
transform: rotate(45deg);
transition: transform .2s ease;
}
.woocommerce-cart .cart_totals.is-collapsed h2.yagaro-resumen-head .yagaro-resumen-chevron {
transform: rotate(-135deg);
}
.yagaro-resumen-body {
overflow: hidden;
max-height: 1500px;
transition: max-height .25s ease;
}
.woocommerce-cart .cart_totals.is-collapsed .yagaro-resumen-body {
max-height: 0;
}
}
/* ============================================================
Barra inferior fija (móvil) — "Total · Pagar →"
Sustituye al botón "Finalizar compra" del resumen en pantallas pequeñas.
============================================================ */
.yagaro-cartbar {
display: none;
}
@media (max-width: 768px) {
.yagaro-cartbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
/* Padding lateral = gutter del contenido (24/16/14px, ver style.css) para
que TOTAL y PAGAR queden alineados con los productos. */
padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #ececec;
box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
box-sizing: border-box;
}
.yagaro-cartbar__info {
display: flex;
flex-direction: column;
line-height: 1.1;
min-width: 0;
}
.yagaro-cartbar__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: #8a8a8a;
margin-bottom: 3px;
}
.yagaro-cartbar__total,
.yagaro-cartbar__total .woocommerce-Price-amount {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
white-space: nowrap;
}
.yagaro-cartbar__btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 28px;
background: #111;
color: #fff !important;
border-radius: 40px;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
transition: opacity .2s ease;
}
.yagaro-cartbar__btn:hover {
opacity: .85;
}
/* En móvil la barra sticky (.yagaro-cartbar → "Pagar") sustituye al botón
"Finalizar compra" del resumen. El tema padre puede renderizar el
directamente sin el wrapper .wc-proceed-to-checkout, así que ocultamos
AMBOS (wrapper + botón) para que no quede el botón duplicado en móvil. */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout,
.woocommerce-cart .cart_totals a.checkout-button,
.woocommerce-cart .cart_totals a.checkout-button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: none !important;
}
/* Hueco para que la barra fija no tape el último contenido.
SOLO en content_inner (96px ≈ alto de la barra). El container_inner del
tema padre añade ADEMÁS ~110px de padding-bottom, que se sumaba a estos 96
y dejaba un hueco enorme; lo anulamos en el carrito móvil para que el
espacio inferior sea solo el imprescindible para la barra. */
body.woocommerce-cart .content .content_inner {
padding-bottom: 96px !important;
}
body.woocommerce-cart .container_inner.page_container_inner,
body.woocommerce-cart .content_inner .container .container_inner {
padding-bottom: 0 !important;
}
}
/* Barra inferior: gutter lateral acompasado al del contenido (24→16→14). */
@media (max-width: 600px) {
.yagaro-cartbar {
padding-left: 16px;
padding-right: 16px;
}
}
@media (max-width: 380px) {
.yagaro-cartbar {
padding-left: 14px;
padding-right: 14px;
}
}
|