/* ============================================================
The Good Shisha — 60 · Carrito y checkout
Se carga solo en carrito, checkout y "pedido recibido".
Mobile-first; escritorio en @media (min-width:980px).
Nota: var(--tgs-card) es el blanco puro del sistema; se usa también como
color de texto sobre superficies negras.
============================================================ */
/* ------------------------------------------------------------
1 · Barra de progreso hacia el envío gratis (informativa)
------------------------------------------------------------ */
.tgs-shipbar {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 12px;
padding: 14px 16px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: 16px;
}
.tgs-shipbar[hidden] { display: none; }
.tgs-shipbar__msg {
margin: 0;
font-size: 12.5px;
font-weight: 800;
line-height: 1.35;
color: var(--tgs-text);
}
.tgs-shipbar[data-state="coal"] .tgs-shipbar__msg { color: var(--tgs-amber-text); }
.tgs-shipbar[data-state="reached"] .tgs-shipbar__msg { color: var(--tgs-green-text); }
.tgs-shipbar__track {
height: 8px;
border-radius: var(--tgs-r-pill);
background: var(--tgs-sep);
overflow: hidden;
}
.tgs-shipbar__fill {
display: block;
height: 100%;
border-radius: var(--tgs-r-pill);
background: linear-gradient(90deg, var(--tgs-green), var(--tgs-green-text));
transition: width .4s ease;
}
.tgs-shipbar[data-state="coal"] .tgs-shipbar__fill {
background: linear-gradient(90deg, var(--tgs-amber-bg), var(--tgs-amber-text));
}
/* La copia "live" vive dentro de la tabla de totales (la refresca WooCommerce
por AJAX): en móvil manda la de arriba, en escritorio la del resumen. */
.tgs-shipbar--live { display: none; }
.tgs-shipbar-row,
.tgs-shipbar-row > td {
display: block;
padding: 0;
border: 0;
background: none;
}
/* ------------------------------------------------------------
2 · Notas compartidas (plazos, puntos, métodos, SSL)
------------------------------------------------------------ */
.tgs-extra-row,
.tgs-extra-row > td {
display: block;
padding: 0;
border: 0;
background: none;
}
.tgs-extra-note {
margin: 4px 0 0;
color: var(--tgs-text-meta);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
}
.tgs-pay-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 14px 0 0;
color: var(--tgs-text-meta);
font-size: 11px;
font-weight: 700;
}
.tgs-ssl-note {
margin: 8px 0 0;
text-align: center;
color: var(--tgs-text-meta);
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
}
/* ------------------------------------------------------------
3 · Carrito: la tabla se convierte en tarjetas
------------------------------------------------------------ */
.woocommerce-cart .woocommerce-cart-form { margin: 0 0 14px; }
.woocommerce-cart .shop_table.cart,
.woocommerce-cart .shop_table.cart tbody {
display: block;
width: 100%;
margin: 0;
border: 0;
background: none;
border-collapse: separate;
}
.woocommerce-cart .shop_table.cart thead { display: none; }
.woocommerce-cart .shop_table.cart tr.cart_item {
display: grid;
grid-template-columns: 74px minmax(0, 1fr) auto 34px;
grid-template-areas:
"img name name x"
"img qty total x";
align-items: center;
column-gap: 10px;
row-gap: 6px;
margin: 0 0 10px;
padding: 12px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: var(--tgs-r-card);
}
.woocommerce-cart .shop_table.cart tr.cart_item td {
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
/* shop_table_responsive alinea a la derecha con !important en móvil. */
text-align: left !important;
}
/* Neutraliza los "Producto:", "Precio:"… de shop_table_responsive. */
.woocommerce-cart .shop_table.cart tr.cart_item td::before {
display: none !important;
content: none !important;
}
.woocommerce-cart .shop_table.cart td.product-thumbnail {
grid-area: img;
display: grid !important;
place-items: center;
width: 74px;
height: 74px;
overflow: hidden;
background: var(--tgs-bg);
border-radius: 12px;
}
.woocommerce-cart .shop_table.cart td.product-thumbnail img {
width: auto;
height: auto;
max-width: 85%;
max-height: 85%;
object-fit: contain;
}
.woocommerce-cart .shop_table.cart td.product-name {
grid-area: name;
font-size: 12.5px;
font-weight: 800;
line-height: 1.25;
}
.woocommerce-cart .shop_table.cart td.product-name a {
color: var(--tgs-text);
text-decoration: none;
}
.woocommerce-cart .shop_table.cart td.product-name .variation,
.woocommerce-cart .shop_table.cart td.product-name dl.variation {
display: flex;
flex-wrap: wrap;
gap: 0 6px;
margin: 3px 0 0;
color: var(--tgs-text-meta);
font-size: 11px;
font-weight: 600;
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dt,
.woocommerce-cart .shop_table.cart td.product-name dl.variation dd,
.woocommerce-cart .shop_table.cart td.product-name dl.variation p {
margin: 0;
padding: 0;
font-weight: 600;
}
/* En móvil basta con el total de línea (igual que el prototipo). */
.woocommerce-cart .shop_table.cart td.product-price { display: none; }
.woocommerce-cart .shop_table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart .shop_table.cart td.product-subtotal {
grid-area: total;
color: var(--tgs-text);
font-size: 14.5px;
font-weight: 900;
white-space: nowrap;
text-align: right !important;
}
.woocommerce-cart .shop_table.cart td.product-remove {
grid-area: x;
align-self: start;
justify-self: end;
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: var(--tgs-r-pill);
background: none !important;
color: var(--tgs-text-disabled) !important;
font-size: 17px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove:hover,
.woocommerce-cart .shop_table.cart td.product-remove a.remove:focus-visible {
background: var(--tgs-danger-bg) !important;
color: var(--tgs-red) !important;
}
/* ------------------------------------------------------------
4 · Stepper de cantidad
------------------------------------------------------------ */
.woocommerce-cart .shop_table.cart .quantity {
display: inline-flex;
align-items: center;
overflow: hidden;
background: var(--tgs-bg);
border: 1.5px solid var(--tgs-bd-input);
border-radius: var(--tgs-r-pill);
}
.tgs-qty-btn {
display: grid;
place-items: center;
min-width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--tgs-text);
font-family: var(--tgs-font);
font-size: 17px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.tgs-qty-btn:active { background: var(--tgs-sep); }
.woocommerce-cart .shop_table.cart .quantity input.qty {
width: 34px;
min-width: 34px;
height: 44px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: var(--tgs-text);
font-family: var(--tgs-font);
font-size: 13px;
font-weight: 800;
text-align: center;
-moz-appearance: textfield;
}
.woocommerce-cart .shop_table.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .shop_table.cart .quantity input.qty::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.woocommerce-cart .shop_table.cart .quantity .screen-reader-text { display: none; }
/* ------------------------------------------------------------
5 · Fila de acciones del carrito (cupón + actualizar)
------------------------------------------------------------ */
.woocommerce-cart .shop_table.cart tr:not(.cart_item) { display: block; }
.woocommerce-cart .shop_table.cart td.actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 0;
padding: 12px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: var(--tgs-r-card);
text-align: left !important;
}
.woocommerce-cart .shop_table.cart td.actions::before { content: none !important; }
.woocommerce-cart .shop_table.cart td.actions .coupon {
display: flex;
flex: 1 1 100%;
gap: 8px;
float: none;
}
.woocommerce-cart .shop_table.cart td.actions .coupon label { display: none; }
.woocommerce-cart .shop_table.cart td.actions .coupon .input-text {
flex: 1;
width: auto;
min-height: 44px;
padding: 12px 14px;
background: var(--tgs-card);
border: 1.5px solid var(--tgs-bd-input);
border-radius: var(--tgs-r-input);
color: var(--tgs-text);
font-family: var(--tgs-font);
font-size: 13px;
font-weight: 600;
}
.woocommerce-cart .shop_table.cart td.actions .button {
min-height: 44px;
padding: 12px 18px;
border: 1.5px solid var(--tgs-bd-input);
border-radius: var(--tgs-r-pill);
background: var(--tgs-card);
color: var(--tgs-text);
font-family: var(--tgs-font);
font-size: 12px;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
}
.woocommerce-cart .shop_table.cart td.actions .button:disabled {
opacity: .45;
cursor: default;
}
/* WooCommerce fuerza width:48% al botón del cupón por debajo de 768px:
lo dejamos al ancho de su texto para que el campo respire. */
.woocommerce-cart .shop_table.cart td.actions .coupon .button {
flex: none;
width: auto;
border-color: var(--tgs-ink);
background: var(--tgs-ink);
color: var(--tgs-card);
}
/* ------------------------------------------------------------
6 · Totales del carrito
------------------------------------------------------------ */
.woocommerce-cart .cart-collaterals {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.woocommerce-cart .cart-collaterals .cart_totals {
float: none;
width: 100%;
padding: 16px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: var(--tgs-r-card);
}
.woocommerce-cart .cart_totals > h2 {
margin: 0 0 10px;
color: var(--tgs-text);
font-size: 14px;
font-weight: 900;
font-style: italic;
letter-spacing: .02em;
text-transform: uppercase;
}
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody {
display: block;
width: 100%;
margin: 0;
border: 0;
background: none;
}
.woocommerce-cart .cart_totals table.shop_table tr {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--tgs-sep);
}
.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td {
display: block;
width: auto;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--tgs-text-body);
font-size: 13px;
font-weight: 600;
text-align: right;
}
.woocommerce-cart .cart_totals table.shop_table tr th {
color: var(--tgs-text-body);
font-weight: 700;
text-align: left;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total {
border-bottom: 0;
padding-top: 12px;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
color: var(--tgs-text);
font-size: 18px;
font-weight: 900;
}
/* La tabla de totales es shop_table_responsive: por debajo de 768px WooCommerce
oculta los | y pinta el data-title como ::before. Nosotros sí mostramos los
| , así que hay que matar el ::before o sale "Subtotal: Subtotal" (y un ": "
suelto en nuestras filas, que no llevan data-title). */
.woocommerce-cart .cart_totals table.shop_table tr td::before,
.woocommerce-cart .cart_totals table.shop_table tr th::before {
display: none !important;
content: none !important;
}
/* La fila de envío contiene la lista de métodos: necesita todo el ancho. */
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals { display: block; }
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th {
margin: 0 0 8px;
text-align: left;
}
/* !important porque shop_table_responsive fuerza text-align:right !important. */
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td { text-align: left !important; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
padding: 12px 0 0;
margin: 0;
}
/* Botón principal (tramitar pedido / pagar). */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 52px;
margin: 0;
padding: 14px 22px;
border: 0;
border-radius: var(--tgs-r-pill);
background: var(--tgs-ink);
color: var(--tgs-card);
font-family: var(--tgs-font);
font-size: 14px;
font-weight: 900;
letter-spacing: .05em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: transform .1s ease;
float: none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce-checkout #place_order:active { transform: scale(.98); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
background: var(--tgs-black-2);
color: var(--tgs-card);
}
/* Calculadora de envío del carrito. */
.woocommerce-cart .shipping-calculator-button {
color: var(--tgs-text-meta);
font-size: 11.5px;
font-weight: 700;
text-decoration: underline;
}
/* ------------------------------------------------------------
7 · Carrito vacío
------------------------------------------------------------ */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message {
margin: 0 0 14px;
padding: 30px 20px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: var(--tgs-r-card);
color: var(--tgs-text-meta);
font-size: 13px;
font-weight: 600;
line-height: 1.6;
text-align: center;
}
.woocommerce-cart .return-to-shop { text-align: center; }
.woocommerce-cart .return-to-shop .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 14px 24px;
border: 0;
border-radius: var(--tgs-r-pill);
background: var(--tgs-ink);
color: var(--tgs-card);
font-family: var(--tgs-font);
font-size: 13px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ------------------------------------------------------------
8 · Checkout: pasos 1-2-3 (solo móvil)
------------------------------------------------------------ */
.tgs-steps {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 2px 0;
list-style: none;
}
.tgs-step {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.tgs-step:not(:last-child)::after {
content: "";
display: block;
width: 100%;
min-width: 8px;
height: 1.5px;
background: var(--tgs-bd-input);
}
.tgs-step:not(:last-child) { flex: 1; }
.tgs-step__n {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border: 1.5px solid var(--tgs-bd-input);
border-radius: var(--tgs-r-pill);
background: var(--tgs-card);
color: var(--tgs-text-disabled);
font-size: 11px;
font-weight: 900;
}
.tgs-step__l {
color: var(--tgs-text-disabled);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.tgs-step.is-on .tgs-step__n {
border-color: var(--tgs-ink);
background: var(--tgs-ink);
color: var(--tgs-card);
}
.tgs-step.is-on .tgs-step__l { color: var(--tgs-text); }
/* Pantallas muy estrechas (≤359px): las etiquetas van con nowrap, así que
apretamos un punto para que la fila no desborde. */
@media (max-width: 359px) {
.tgs-steps { gap: 6px; }
.tgs-step { gap: 6px; }
.tgs-step__l { font-size: 11px; }
}
/* ------------------------------------------------------------
9 · Checkout: bloques y formulario
------------------------------------------------------------ */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
margin: 0 0 12px;
padding: 12px 14px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: var(--tgs-r-card);
font-size: 12.5px;
font-weight: 600;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout #order_review {
margin: 0 0 14px;
padding: 16px;
background: var(--tgs-card);
border: 1px solid var(--tgs-card-bd);
border-radius: var(--tgs-r-card);
}
.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout .woocommerce-additional-fields:empty,
.woocommerce-checkout .woocommerce-account-fields:empty { display: none; }
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
margin: 0 0 12px;
color: var(--tgs-text);
font-size: 14px;
font-weight: 900;
font-style: italic;
letter-spacing: .02em;
text-transform: uppercase;
}
.woocommerce-checkout #order_review_heading { margin: 0 0 10px; }
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 100%;
float: none;
max-width: none;
}
.woocommerce-checkout .form-row {
margin: 0 0 10px;
padding: 0;
}
.woocommerce-checkout .form-row label {
display: block;
margin: 0 0 5px;
color: var(--tgs-text-meta);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .02em;
}
.woocommerce-checkout .form-row .required { color: var(--tgs-red); }
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
width: 100%;
min-height: 46px;
padding: 13px 14px;
background: var(--tgs-card);
border: 1.5px solid var(--tgs-bd-input);
border-radius: var(--tgs-r-input);
box-shadow: none;
color: var(--tgs-text);
font-family: var(--tgs-font);
font-size: 13.5px;
font-weight: 600;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
outline: none;
border-color: var(--tgs-ink);
}
.woocommerce-checkout .form-row textarea { min-height: 88px; }
/* Select2 (país/provincia) con el mismo aspecto que el resto de campos. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
height: 46px;
padding: 6px 6px 6px 8px;
background: var(--tgs-card);
border: 1.5px solid var(--tgs-bd-input);
border-radius: var(--tgs-r-input);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--tgs-text);
font-size: 13.5px;
font-weight: 600;
line-height: 32px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
/* Casillas (crear cuenta, condiciones…). */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--tgs-text-body);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.woocommerce-checkout .woocommerce-form__input-checkbox {
flex: none;
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--tgs-ink);
}
/* ------------------------------------------------------------
10 · Métodos de envío como opciones radio
------------------------------------------------------------ */
.woocommerce ul#shipping_method,
.woocommerce-checkout ul#shipping_method {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce ul#shipping_method li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
min-height: 56px;
margin: 0;
padding: 13px 14px;
background: var(--tgs-card);
border: 2px solid var(--tgs-bd-input);
border-radius: 14px;
text-indent: 0;
list-style: none;
}
.woocommerce ul#shipping_method li:has(input[type="radio"]:checked) {
border-color: var(--tgs-ink);
background: var(--tgs-sep-2);
}
.woocommerce ul#shipping_method li input[type="radio"] {
flex: none;
width: 19px;
height: 19px;
margin: 0;
accent-color: var(--tgs-ink);
}
.woocommerce ul#shipping_method li label {
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 10px;
margin: 0;
color: var(--tgs-text);
font-size: 13px;
font-weight: 800;
line-height: 1.3;
cursor: pointer;
}
.woocommerce ul#shipping_method li label .amount {
color: var(--tgs-text);
font-weight: 900;
white-space: nowrap;
}
.tgs-ship-free {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--tgs-r-pill);
background: var(--tgs-green-bg);
color: var(--tgs-green-text);
font-size: 11px;
font-weight: 900;
letter-spacing: .03em;
}
.tgs-ship-sub {
flex: 1 1 100%;
color: var(--tgs-text-meta);
font-size: 11px;
font-weight: 600;
line-height: 1.35;
}
/* ------------------------------------------------------------
11 · Resumen del pedido (tabla de review)
------------------------------------------------------------ */
.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot {
display: block;
width: 100%;
margin: 0;
border: 0;
background: none;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--tgs-sep-2);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:last-child { border-bottom: 0; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th {
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td::before,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th::before {
display: none !important;
content: none !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
flex: 1;
min-width: 0;
color: var(--tgs-text);
font-size: 12px;
font-weight: 800;
line-height: 1.3;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .variation,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation {
margin: 3px 0 0;
color: var(--tgs-text-meta);
font-size: 11px;
font-weight: 600;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dt,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dd,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation p {
margin: 0;
font-weight: 600;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
color: var(--tgs-text-meta);
font-size: 11.5px;
font-weight: 700;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
color: var(--tgs-text);
font-size: 13.5px;
font-weight: 900;
text-align: right;
white-space: nowrap;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 9px 0;
border-top: 1px solid var(--tgs-sep);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr th {
color: var(--tgs-text-body);
font-size: 13px;
font-weight: 700;
text-align: left;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr td {
color: var(--tgs-text-body);
font-size: 13px;
font-weight: 600;
text-align: right;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
color: var(--tgs-text);
font-size: 18px;
font-weight: 900;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals { display: block; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
margin: 0 0 8px;
text-align: left;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.tgs-shipbar-row,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.tgs-extra-row {
display: block;
padding: 0;
border-top: 0;
}
/* ------------------------------------------------------------
12 · Métodos de pago (2 tarjetas radio) y avisos
------------------------------------------------------------ */
.woocommerce-checkout #payment {
margin: 14px 0 0;
padding: 0;
background: none;
border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 0 0 12px;
padding: 0;
border: 0;
list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods > li {
margin: 0;
padding: 12px 14px;
background: var(--tgs-card);
border: 2px solid var(--tgs-bd-input);
border-radius: 14px;
list-style: none;
transition: border-color .15s ease, background .15s ease;
}
.woocommerce-checkout #payment ul.payment_methods > li:has(> input[type="radio"]:checked) {
border-color: var(--tgs-ink);
background: var(--tgs-sep-2);
}
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] {
flex: none;
width: 19px;
height: 19px;
margin: 0 10px 0 0;
accent-color: var(--tgs-ink);
vertical-align: middle;
}
.woocommerce-checkout #payment ul.payment_methods > li > label {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
width: calc(100% - 34px);
min-width: 0;
min-height: 44px;
margin: 0;
color: var(--tgs-text);
font-size: 13px;
font-weight: 800;
line-height: 1.3;
overflow-wrap: anywhere;
vertical-align: middle;
cursor: pointer;
}
/* Iconos de las 2 pasarelas del negocio (detección por clase, sin asumir ID). */
.woocommerce-checkout #payment ul.payment_methods > li[class*="redsys"] > label::before {
content: "💳";
font-size: 18px;
line-height: 1;
}
.woocommerce-checkout #payment ul.payment_methods > li[class*="sequra"] > label::before {
content: "🗓️";
font-size: 18px;
line-height: 1;
}
.woocommerce-checkout #payment ul.payment_methods > li label img {
max-height: 22px;
width: auto;
margin: 0 0 0 auto;
float: none;
}
/* Descripción/campos que pinta cada pasarela: se muestran siempre, solo se
ajusta el aspecto (nunca ocultar campos de pago). */
.woocommerce-checkout #payment div.payment_box {
margin: 10px 0 0;
padding: 12px 14px;
background: var(--tgs-bg);
border-radius: 12px;
color: var(--tgs-text-body);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.tgs-pay-notices {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 12px;
}
.tgs-pay-notice {
display: block;
width: 100%;
margin: 0;
padding: 12px 14px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
}
.tgs-pay-notice[hidden] { display: none; }
.woocommerce-checkout #payment .form-row.place-order {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0; }
/* ------------------------------------------------------------
13 · Nuestras filas dentro de las tablas de totales
(van al final para ganar a las reglas genéricas de arriba)
------------------------------------------------------------ */
.woocommerce-cart .cart_totals table.shop_table tr.tgs-shipbar-row,
.woocommerce-cart .cart_totals table.shop_table tr.tgs-extra-row,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.tgs-shipbar-row,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.tgs-extra-row {
display: block;
padding: 0;
border: 0;
}
/* text-align con !important: shop_table_responsive alinea a la derecha con
!important por debajo de 768px y nuestras filas son texto corrido. */
.woocommerce-cart .cart_totals table.shop_table tr.tgs-shipbar-row > td,
.woocommerce-cart .cart_totals table.shop_table tr.tgs-extra-row > td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.tgs-shipbar-row > td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.tgs-extra-row > td {
display: block;
width: 100%;
padding: 0;
border: 0;
font-size: 11.5px;
text-align: left !important;
}
/* ------------------------------------------------------------
14 · Pedido recibido
------------------------------------------------------------ */
.tgs-points-note {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 14px 0;
padding: 12px 18px;
background: var(--tgs-green-bg);
border-radius: var(--tgs-r-pill);
color: var(--tgs-green-text);
font-size: 13px;
font-weight: 900;
}
/* ============================================================
ESCRITORIO (>= 980px)
============================================================ */
@media (min-width: 980px) {
/* En escritorio la barra vive dentro del resumen. */
.tgs-shipbar--top { display: none; }
.tgs-shipbar--live {
display: flex;
margin: 10px 0;
padding: 12px 14px;
border-radius: 14px;
}
.tgs-steps { display: none; }
/* --- carrito --- */
.woocommerce-cart .shop_table.cart tr.cart_item {
grid-template-columns: 84px minmax(0, 1fr) auto auto 40px;
grid-template-areas: "img name qty price x";
align-items: center;
column-gap: 16px;
padding: 16px;
border-radius: var(--tgs-r-card-desk);
}
.woocommerce-cart .shop_table.cart td.product-thumbnail {
width: 84px;
height: 84px;
}
.woocommerce-cart .shop_table.cart td.product-name { font-size: 13.5px; }
.woocommerce-cart .shop_table.cart td.product-price {
display: block;
grid-area: price;
min-width: 92px;
color: var(--tgs-text);
font-size: 14.5px;
font-weight: 900;
white-space: nowrap;
text-align: right !important;
}
/* Con las dos columnas visibles, el subtotal de línea sobra. */
.woocommerce-cart .shop_table.cart td.product-subtotal { display: none; }
.woocommerce-cart .shop_table.cart td.actions {
padding: 16px;
border-radius: var(--tgs-r-card-desk);
}
.woocommerce-cart .shop_table.cart td.actions .coupon { flex: 1 1 auto; }
/* Cesta a la izquierda y resumen pegajoso a la derecha, como el prototipo.
Solo cuando hay resumen: con la cesta vacía la página sigue a todo ancho. */
.woocommerce-cart .woocommerce:has(> .cart-collaterals) {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 380px);
gap: 0 24px;
}
.woocommerce-cart .woocommerce:has(> .cart-collaterals) > * { grid-column: 1; }
.woocommerce-cart .woocommerce:has(> .cart-collaterals) > .woocommerce-cart-form { grid-row: 2; }
.woocommerce-cart .woocommerce:has(> .cart-collaterals) > .cart-collaterals {
grid-column: 2;
grid-row: 2;
}
.woocommerce-cart .cart-collaterals { gap: 20px; }
/* El contenedor se estira con la fila: así el resumen tiene recorrido para pegarse. */
.woocommerce-cart .cart-collaterals .cart_totals {
position: sticky;
top: 16px;
padding: 22px;
border-radius: var(--tgs-r-card-desk);
}
.woocommerce-cart .cart_totals > h2 { font-size: 15px; }
/* --- checkout en 2 columnas con resumen pegajoso --- */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: 1.5fr minmax(320px, 1fr);
align-items: start;
gap: 24px;
}
.woocommerce-checkout form.checkout > * { grid-column: 1; }
.woocommerce-checkout form.checkout > #customer_details {
grid-column: 1;
grid-row: 1 / span 2;
}
.woocommerce-checkout form.checkout > #order_review_heading {
grid-column: 2;
grid-row: 1;
}
.woocommerce-checkout form.checkout > #order_review {
grid-column: 2;
grid-row: 2;
position: sticky;
top: 16px;
align-self: start;
padding: 22px;
border-radius: var(--tgs-r-card-desk);
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-account-fields {
padding: 22px;
border-radius: var(--tgs-r-card-desk);
}
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading { font-size: 15px; }
/* Rejilla de 2 columnas para los campos que WooCommerce marca como mitad. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: 1 / -1;
width: 100%;
margin: 0;
float: none;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }
.woocommerce ul#shipping_method li { padding: 14px 16px; }
.woocommerce ul#shipping_method li label { font-size: 13.5px; }
/* En el checkout clásico #payment vive dentro de #order_review, que aquí es
la columna estrecha: auto-fit para que caiga a 1 columna si no cabe. */
.woocommerce-checkout #payment ul.payment_methods {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.tgs-pay-notice {
padding: 14px 16px;
font-size: 13px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
min-height: 54px;
font-size: 14.5px;
}
}
|