) — antes rompía a
* 2-3 líneas junto al importe ("se ve mal", bug reportado). Se mantiene
* (es la única indicación de si el Total lleva IVA incluido o no, según
* "Precios con/sin IVA" de la tienda) pero como línea propia, pequeña y
* muda, debajo del importe en vez de en el mismo renglón.
*/
body.spwsv-simple.spwsv-page-cart:not(.spwsv-cart-empty):is(.sp-wsv-distribution-shopify, .sp-wsv-distribution-woocommerce-steps, .sp-wsv-distribution-minimal-steps) .cart_totals table.shop_table tr.order-total td .includes_tax{
display: block;
font-size: var(--spwsv-font-size-xs);
font-weight: 500;
color: var(--spwsv-muted);
white-space: nowrap;
}
/*
* "We accept" (trust badges) se inyecta por PHP dentro de
* .wc-proceed-to-checkout, hermano del botón (hook
* woocommerce_proceed_to_checkout, prioridad 30 — ver
* maybe_render_cart_trust_badges()). Sin ocultarlo aquí, la barra fija
* crecía hasta tapar media pantalla (bug reportado). Sigue viéndose en
* el resto del flujo (checkout, sidebar de escritorio); aquí solo se
* quita de la barra de acción fija del carrito en móvil.
*/
body.spwsv-simple.spwsv-page-cart:not(.spwsv-cart-empty):is(.sp-wsv-distribution-shopify, .sp-wsv-distribution-woocommerce-steps, .sp-wsv-distribution-minimal-steps) .cart_totals .wc-proceed-to-checkout .spwsv-trust-badges{
display: none;
}
/* Botón en su propia línea, ancho completo, debajo del Total. */
body.spwsv-simple.spwsv-page-cart:not(.spwsv-cart-empty):is(.sp-wsv-distribution-shopify, .sp-wsv-distribution-woocommerce-steps, .sp-wsv-distribution-minimal-steps) .cart_totals .wc-proceed-to-checkout{
margin: 0;
width: 100%;
}
body.spwsv-simple.spwsv-page-cart:not(.spwsv-cart-empty):is(.sp-wsv-distribution-shopify, .sp-wsv-distribution-woocommerce-steps, .sp-wsv-distribution-minimal-steps) .cart_totals .wc-proceed-to-checkout a.checkout-button{
display: block;
width: 100%;
text-align: center;
margin: 0;
white-space: nowrap;
}
}
@media (max-width: 720px){
body.spwsv-simple.spwsv-page-cart .spwsv-steps-nav .spwsv-steps-list{
gap: var(--spwsv-space-md);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
body.spwsv-simple.spwsv-page-cart .spwsv-steps-nav .spwsv-step-label{
font-size: var(--spwsv-font-size-xs);
white-space: nowrap;
}
}
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .woocommerce{
grid-template-columns: 1.1fr 0.9fr;
gap: 0;
}
body.spwsv-simple.spwsv-page-cart.spwsv-cart-empty.sp-wsv-distribution-minimal-steps .woocommerce{
grid-template-columns: 1fr;
gap: var(--spwsv-space-xl);
}
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .woocommerce-cart-form,
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .cart-collaterals{
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
}
@media (min-width: 981px){
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .spwsv-simple-main .spwsv-simple-container{
max-width: 100%;
padding: 0;
}
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .woocommerce-cart-form{
padding: 26px 26px 26px max(16px, calc((100vw - var(--spwsv-container-width)) / 2));
}
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .cart-collaterals{
padding: 26px max(16px, calc((100vw - var(--spwsv-container-width)) / 2)) 26px 26px;
}
}
@media (min-width: 981px){
body.spwsv-simple.spwsv-page-cart.spwsv-cart-empty .spwsv-simple-main .spwsv-simple-container,
body.spwsv-simple.sp-wsv-checkout-login-required .spwsv-simple-main .spwsv-simple-container{
max-width: var(--spwsv-container-width);
padding: var(--spwsv-space-2xl) 0 var(--spwsv-space-5xl)
}
}
@media (max-width: 980px){
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .woocommerce{
grid-template-columns: 1fr;
gap: var(--spwsv-space-xl);
}
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .woocommerce-cart-form,
body.spwsv-simple.spwsv-page-cart.sp-wsv-distribution-minimal-steps .cart-collaterals{
grid-column: 1 / -1;
}
}
body.spwsv-simple.spwsv-page-cart table.shop_table{
border: 0;
}
body.spwsv-simple.spwsv-page-cart table.shop_table th,
body.spwsv-simple.spwsv-page-cart table.shop_table td{
border-color: var(--spwsv-border-soft);
}
body.spwsv-simple.spwsv-page-cart .cart_totals{ width: 100%; }
body.spwsv-simple.spwsv-page-cart .cart_totals > h2{ display: none; }
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table thead th{
font-size: var(--spwsv-font-size-xs);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--spwsv-muted);
font-weight: 600;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td{
vertical-align: middle;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td.product-thumbnail img{
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--spwsv-radius-sm);
border: 1px solid var(--spwsv-border-soft);
background: rgba(0,0,0,.02);
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td.product-name a{
color: var(--spwsv-text);
font-weight: 700;
text-decoration: none;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td.product-name a:hover{
color: var(--spwsv-accent);
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td.product-remove a{
color: var(--spwsv-muted) ;
text-decoration: none;
font-weight: 700;
padding-bottom: 4px;
height: 20px;
width: 20px;
line-height: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td.product-remove a:hover{
background-color: var(--spwsv-danger);
color: #fff ;
}
/*
* Fila "Coupon / Update basket" (| , ver
* cart.php core) — antes sin ningún separador visual respecto a la lista
* de productos de encima, y "Update basket" con el mismo peso visual que
* "Apply coupon" (ambos botones .button por defecto). Se añade una
* división clara (borde superior) y "Update basket" pasa a estilo
* "ghost"/texto — es una acción secundaria (recalcular totales tras
* cambiar cantidades a mano), no debería competir con "Apply coupon" ni
* con "Proceed to checkout" (ahora en la barra fija inferior, ver bloque
* de abajo).
*/
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table td.actions{
border-top: 1px solid var(--spwsv-border-soft);
margin-top: var(--spwsv-space-lg);
padding-top: var(--spwsv-space-lg);
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spwsv-space-sm);
align-items: center;
}
/*
* Error de coupon inválido (ver cart.js core, show_coupon_error()):
* WooCommerce añade un como hijo directo de
* .coupon, que al ser flex-row quedaba como una 3ª columna angosta junto al
* input/botón (bug reportado: "el cupón se ve mal cuando aplicas un
* cupón"). flex-basis:100% lo baja a su propia línea.
*/
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon .coupon-error-notice{
flex: 1 0 100%;
margin: 0;
color: var(--spwsv-danger);
font-size: var(--spwsv-font-size-sm);
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon #coupon_code.has-error{
border-color: var(--spwsv-danger);
box-shadow: 0 0 0 1px var(--spwsv-danger);
}
/*
* El selector de cantidad por clic (+/-, ver sp-checkout-steps-cart.js)
* auto-actualiza el carrito solo — el botón nativo "Update basket" ya no
* hace falta como acción visible, pero se mantiene en el DOM (oculto, no
* eliminado) porque el JS le sigue disparando un click programático para
* reutilizar el flujo AJAX nativo de WooCommerce.
*/
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .actions button[name="update_cart"]{
display: none;
}
@media (max-width: 720px){
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .actions{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon{
width: 100%;
align-items: stretch;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon button{
width: unset;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon input{
flex: 1;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon :where(input, button){
width: 100%;
}
}
@media (max-width: 720px){
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table, table.shop_table_responsive){
border: 0;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive thead){
display: none;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tbody){
display: block;
}
/*
* Rediseño de "fila apilada con label" (patrón responsive-table
* estándar de WooCommerce: imagen grande arriba + una línea entera por
* cada Price/Quantity/Subtotal) a "fila compacta tipo card de
* carrito": miniatura pequeña + nombre a la izquierda, precio×cantidad
* y subtotal a la derecha, todo en una sola franja horizontal. Se
* ocultan Price (redundante con el precio unitario en el subtotal) y
* los labels ::before de Quantity/Subtotal — el layout ya deja claro
* qué es cada dato sin repetirlo en texto.
*/
/*
* :not(:has(> td.actions)) excluye la fila de "Coupon code / Update
* cart" ( | | … |
, ver
* cart.php): NO es una fila de producto, así que forzarla al mismo
* grid de 4 columnas rompía su propio layout (.actions{flex-direction:
* column}, ver más abajo) — el botón "Update cart" se veía angosto
* porque quedaba encogido dentro de una de las areas del grid en vez
* de ocupar el ancho completo de su fila.
*/
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr):not(:has(> td.actions)){
display: grid;
grid-template-columns: 56px 1fr auto auto;
grid-template-areas:
"thumb name qty remove"
"thumb subtotal subtotal subtotal";
align-items: center;
column-gap: var(--spwsv-space-sm);
row-gap: 4px;
padding: var(--spwsv-space-sm) 0;
border-bottom: 1px solid var(--spwsv-border-soft);
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr):not(:has(> td.actions)):last-child{
border-bottom: 0;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td):not(.actions){
display: flex;
padding: 0;
text-align: left;
border: 0;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td)::before{
content: none;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-thumbnail){
grid-area: thumb;
align-items: center;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-thumbnail img){
width: 48px;
height: 48px;
object-fit: cover;
border-radius: var(--spwsv-radius-sm);
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-price{
display: none;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-name){
grid-area: name;
align-items: center;
font-weight: 600;
min-width: 0;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-name) a{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-quantity){
grid-area: qty;
justify-content: flex-end;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-quantity input.qty){
max-width: 64px;
text-align: center;
padding: 4px;
min-height: 32px;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-remove){
grid-area: remove;
justify-content: flex-end;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-subtotal){
grid-area: subtotal;
justify-content: flex-end;
align-items: baseline;
gap: 6px;
color: var(--spwsv-muted);
font-size: var(--spwsv-font-size-sm);
}
/* Sin ningún label, ese número queda ambiguo (¿precio unitario o
subtotal?) — se reintroduce como prefijo discreto en vez del label
::before de fila completa que había antes. */
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form :where(table.shop_table_responsive tr td.product-subtotal)::before{
content: attr(data-title) ":";
font-weight: 600;
text-transform: lowercase;
}
}
/*
* Selector de cantidad (-, número, +) — ver sp-checkout-steps-cart.js
* (initQuantitySteppers). Sustituye el input numérico "borrar y escribir"
* por botones de clic (bug reportado: UX confusa en móvil). El input
* original se deja en readonly (sigue enviándose en el form/serialize, y
* WooCommerce lo sigue leyendo igual) en vez de disabled, para no perder
* su valor al hacer submit.
*/
body.spwsv-simple.spwsv-page-cart .spwsv-qty-stepper{
display: inline-flex;
align-items: center;
gap: 2px;
border: 1px solid var(--spwsv-border);
border-radius: var(--spwsv-radius-xs);
overflow: hidden;
}
body.spwsv-simple.spwsv-page-cart .spwsv-qty-stepper .spwsv-qty-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
background: var(--spwsv-panel-bg);
color: var(--spwsv-text);
font-size: var(--spwsv-font-size-md);
font-weight: 700;
line-height: 1;
cursor: pointer;
}
body.spwsv-simple.spwsv-page-cart .spwsv-qty-stepper .spwsv-qty-btn:hover:not(:disabled){
background: var(--spwsv-border-soft);
}
body.spwsv-simple.spwsv-page-cart .spwsv-qty-stepper .spwsv-qty-btn:disabled{
color: var(--spwsv-muted);
cursor: not-allowed;
}
body.spwsv-simple.spwsv-page-cart .spwsv-qty-stepper input.qty{
width: 32px;
min-width: 0;
border: 0;
padding: 0;
text-align: center;
background: transparent;
cursor: default;
}
/*
* Coupon: oculto por defecto, se revela con un clic (ver
* sp-checkout-steps-cart.js, initCouponToggle) en vez de ocupar espacio
* fijo siempre (bug reportado: "cupón y update basket" desordenados).
*/
body.spwsv-simple.spwsv-page-cart .spwsv-coupon-toggle{
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0 0 var(--spwsv-space-sm);
padding: 0;
border: 0;
background: transparent;
color: var(--spwsv-text);
font-weight: 600;
font-size: var(--spwsv-font-size-sm);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
body.spwsv-simple.spwsv-page-cart .woocommerce-cart-form .coupon{
margin-bottom: var(--spwsv-space-sm);
}
body.spwsv-simple.spwsv-page-cart .woocommerce :where(a.button, button.button, input.button, input#submit){
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--spwsv-button-min-height);
padding: var(--spwsv-space-md) var(--spwsv-space-xl);
border-radius: var(--spwsv-radius-xs);
cursor: pointer;
}
.woocommerce-cart .wc-proceed-to-checkout{
margin-bottom: 0;
padding-bottom: 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
margin-bottom: 0em;
}
body.spwsv-simple.spwsv-page-cart .cart-collaterals .cart_totals > h2{
font-size: var(--spwsv-font-size-sm);
font-weight: 800;
margin: 0 0 var(--spwsv-space-md);
color: var(--spwsv-text);
}
body.spwsv-simple :where(button, [type="button"], [type="submit"], a, input[type="submit"], input[type="button"]){
-webkit-tap-highlight-color: transparent;
}
body.spwsv-simple :where(button, [type="button"], [type="submit"], input[type="submit"], input[type="button"], a.button, button.button, input.button, #place_order){
cursor: pointer;
}
body.spwsv-simple :where(button[disabled], [type="button"][disabled], [type="submit"][disabled], input[disabled], a.button[aria-disabled="true"]){
cursor: not-allowed;
}
/* Shopify/minimal: cart más “clean” */
body.spwsv-simple.sp-wsv-distribution-minimal-steps.spwsv-page-cart .woocommerce-cart-form,
body.spwsv-simple.sp-wsv-distribution-minimal-steps.spwsv-page-cart .cart-collaterals{
border-radius: var(--spwsv-radius);
}
.spwsv-anchor{ position: relative; top: -10px; }
body.spwsv-simple .alignwide{
margin-inline: 0px;
}
table td, table th {
border: none;
}
body.spwsv-simple.woocommerce-order-received .woocommerce-order,
body.spwsv-simple.woocommerce-order-pay .spwsv-simple-container{
background: var(--spwsv-panel-bg);
border: 1px solid var(--spwsv-border);
border-radius: var(--spwsv-radius);
padding: var(--spwsv-space-xl);
}
body.spwsv-simple.woocommerce-order-received.sp-wsv-distribution-minimal-steps .woocommerce-order,
body.spwsv-simple.woocommerce-order-pay.sp-wsv-distribution-minimal-steps .spwsv-simple-container{
background: var(--spwsv-panel-bg);
border: none;
}
body.spwsv-simple.woocommerce-order-received.sp-wsv-distribution-minimal-steps,
body.spwsv-simple.woocommerce-order-pay.sp-wsv-distribution-minimal-steps{
background: var(--spwsv-panel-bg);
}
body.spwsv-simple.woocommerce-order-received.sp-wsv-distribution-minimal-steps .spwsv-simple-main{
background: var(--spwsv-page-bg);
}
body.spwsv-simple.woocommerce-order-pay .shop_table{
padding: 1em;
}
body.spwsv-simple.woocommerce-order-pay .spwsv-steps-nav{
display: none;
}
body.spwsv-simple.woocommerce-order-pay .spwsv-simple-main{
max-width: var(--spwsv-container-width);
margin: 20px auto;
}
body.spwsv-simple.woocommerce-order-pay .woocommerce-order-pay{
max-width: 760px;
margin: 0 auto;
}
body.spwsv-simple :where(.woocommerce-order, .woocommerce-order-pay) :where(h2, h3){
margin-top: 0;
}
body.spwsv-simple .woocommerce-order-overview{
list-style: none;
padding: 0;
margin: 0 0 var(--spwsv-space-xl);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spwsv-space-sm);
}
body.spwsv-simple .woocommerce-order-overview:before{
content: none;
}
@media (max-width: 640px){
body.spwsv-simple .woocommerce-order-overview{
grid-template-columns: 1fr;
}
}
body.spwsv-simple .woocommerce-order-overview li{
background: rgba(0,0,0,.02);
border: 1px solid var(--spwsv-border-soft);
border-radius: var(--spwsv-radius-sm);
padding: var(--spwsv-space-md);
margin: 0;
}
body.spwsv-simple .woocommerce-order-overview li strong{
display: block;
margin-top: 6px;
font-weight: 800;
}
body.spwsv-simple .woocommerce-order-details,
body.spwsv-simple .woocommerce-customer-details{
margin-top: var(--spwsv-space-xl);
}
body.spwsv-simple .woocommerce-table--order-details{
width: 100%;
border-collapse: collapse;
}
body.spwsv-simple .woocommerce-table--order-details th{
text-align: left;
font-weight: 800;
color: var(--spwsv-text);
padding: var(--spwsv-space-sm) 0;
border-bottom: 1px solid var(--spwsv-border-soft);
}
body.spwsv-simple .woocommerce-table--order-details td{
text-align: right;
padding: var(--spwsv-space-sm) 0;
border-bottom: 1px solid var(--spwsv-border-soft);
color: var(--spwsv-text);
}
body.spwsv-simple .woocommerce-table--order-details tfoot tr:last-child th,
body.spwsv-simple .woocommerce-table--order-details tfoot tr:last-child td{
border-bottom: 0;
}
body.spwsv-simple .woocommerce-customer-details address{
background: rgba(0,0,0,.02);
border: 1px solid var(--spwsv-border-soft);
border-radius: var(--spwsv-radius);
padding: var(--spwsv-space-md);
font-style: normal;
}
body.spwsv-simple.woocommerce-order-received .spwsv-simple-main {
max-width: var(--spwsv-container-width);
margin: 20px auto;
}
.sp-wsv-thankyou-back{
display: flex;
justify-content: flex-end;
}
.sp-wsv-thankyou-back a{
display: flex;
align-items: center;
justify-content: center;
max-width: 200px;
}
/* ==========================================================================
ASTERISCOS OBLIGATORIOS (Universales para cualquier diseño de Checkout)
========================================================================== */
/* 1. Ocultar el asterisco nativo de WooCommerce para evitar duplicados en cualquier vista */
body.sp-wsv-simple .woocommerce-checkout label.required_field .required,
body.sp-wsv-simple .woocommerce-checkout label.required_field abbr {
display: none;
}
/* 2. Crear nuestro propio asterisco rojo al final del label universalmente */
.woocommerce-checkout label.required_field::after {
content: '*';
color: #d22d3d; /* Rojo clásico. Puedes usar var(--spwsv-danger) si existe */
margin-left: 4px;
font-weight: bold;
font-size: 1.1em;
}