Clave: valor.
Se le saca la viñeta y el margen del que WooCommerce mete adentro. */
.cl-thankyou-item-meta-list {
list-style: none;
margin: 0.25rem 0 0;
padding: 0;
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.5;
}
.cl-thankyou-item-meta-list li { margin: 0; }
.cl-thankyou-item-meta-list p { display: inline; margin: 0; }
.cl-thankyou-item-meta-list strong { font-weight: 600; }
.cl-checkout-order-review dl.variation {
margin: 0.375rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--text-muted);
/* La celda del producto es un GRID (foto · nombre/cantidad), medido: 244px
de ancho con la foto en una columna de 56. Sin esto el bloque cae en la
columna de la foto y "Con grabado personalizado" sale partido en cuatro
líneas de 56px, debajo de la imagen.
grid-column: 1/-1 lo hace ocupar todas las columnas. El flex-basis queda
por si la celda cambia a flex; en grid no molesta. */
grid-column: 1 / -1;
flex: 1 0 100%;
min-width: 0;
}
/* Las etiquetas del meta SE MUESTRAN. Estaban en display:none, que para una
variación común era defendible —"Habano" se entiende sin el rótulo "Color"—
pero para una gift card dejaba cuatro valores sueltos, uno debajo del otro,
sin decir cuál era cuál:
P.cantenys@gmail.com
Pato
Te amo mucho
19-08-2026
El destinatario, el comprador, el mensaje y la fecha de entrega, todos
iguales. Lo detectó Pato en el pedido #94. El carrito ya lo hacía bien
(.cl-cart-row .variation dt, más arriba), así que eran dos pantallas del
mismo pedido con distinto criterio.
Va en grilla y no inline: el mensaje del comprador puede ser largo y con
`display: inline` se enredaba con la línea siguiente. Con dos columnas la
etiqueta queda fija a la izquierda y el valor envuelve prolijo. */
.cl-checkout-order-review dl.variation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.125rem 0.35rem;
}
.cl-checkout-order-review dl.variation dt {
display: block;
font-weight: 600;
margin: 0;
}
.cl-checkout-order-review dl.variation dd {
margin: 0;
min-width: 0;
}
.cl-checkout-order-review dl.variation dd p {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
font-size: inherit;
font-weight: 400;
color: inherit;
line-height: inherit;
/* Un mensaje de gift card puede ser largo: que corte y no desborde.
`break-word` y NO `anywhere`: anywhere también reduce el ancho mínimo del
elemento, y en la celda del producto eso colapsaba la columna — "Con
grabado personalizado" salía partido en cuatro líneas de 55px. */
overflow-wrap: break-word;
}
/* Métodos de envío */
.cl-checkout-order-review .woocommerce-shipping-methods {
list-style: none;
margin: 0.375rem 0 0;
padding: 0;
}
.cl-checkout-order-review .woocommerce-shipping-methods li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8125rem;
line-height: 1.45;
padding: 0.4375rem 0;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.cl-checkout-order-review .woocommerce-shipping-methods li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cl-checkout-order-review .woocommerce-shipping-methods li input[type="radio"] {
margin-top: 0.2em;
flex-shrink: 0;
accent-color: var(--color-primary);
}
.cl-checkout-order-review .woocommerce-shipping-methods li label {
flex: 1;
cursor: pointer;
/* Sin versalita: `.woocommerce-checkout label` (línea 1931) pone MAYÚSCULAS
y 0.2em de tracking a TODA etiqueta del checkout. Sirve para "NOMBRE";
con el nombre completo de una operativa de OCA queda
"ENTREGA A DOMICILIO VÍA OCA — 1 DÍA HÁBIL - $10110.8: GRATIS", que es
justo el renglón que el cliente necesita leer bien. Es el mismo criterio
que ya se aplicó a las etiquetas de checkbox más abajo. */
text-transform: none;
letter-spacing: normal;
font-size: 0.8125rem;
font-weight: 400;
color: var(--text-primary);
margin-bottom: 0;
}
/* ── MEDIOS DE PAGO: misma lista, mismo trato ─────────────────────
La lista de pasarelas NO tenía ninguna regla de layout, así que heredaba el
`display:block` de `.woocommerce-checkout label` y cada radio quedaba solo en
su renglón con el texto debajo, en mayúsculas. Se le da la misma estructura
que a la de envío —flex, radio arriba a la izquierda, etiqueta ocupando el
resto— para que las dos listas de opciones de la pantalla se lean igual. */
.cl-checkout-order-review .wc_payment_methods {
list-style: none;
margin: 0;
padding: 0;
}
.cl-checkout-order-review .wc_payment_methods > li {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.4375rem 0;
border-bottom: 1px solid var(--border);
}
.cl-checkout-order-review .wc_payment_methods > li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cl-checkout-order-review .wc_payment_methods > li > input[type="radio"] {
margin-top: 0.2em;
flex-shrink: 0;
accent-color: var(--color-primary);
}
.cl-checkout-order-review .wc_payment_methods > li > label {
flex: 1;
cursor: pointer;
display: inline;
text-transform: none;
letter-spacing: normal;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0;
line-height: 1.45;
}
/* La descripción y el logo de la pasarela van debajo, ocupando el ancho entero
y alineados con la etiqueta, no con el radio. */
.cl-checkout-order-review .wc_payment_methods .payment_box {
flex-basis: 100%;
margin: 0.5rem 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-muted);
}
.cl-checkout-order-review .wc_payment_methods > li > label img {
max-height: 20px;
width: auto;
vertical-align: middle;
margin-left: 0.375rem;
}
.cl-checkout-order-review .woocommerce-shipping-destination {
font-size: 0.8125rem;
color: var(--text-muted);
margin: 0.5rem 0 0;
line-height: 1.4;
}
/* Selector de sucursal OCA */
#oca-branches-selection-wrapper {
background: var(--bg-mid) !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--radius-card) !important;
box-shadow: none !important;
padding: 0.75rem !important;
margin: 0.5rem 0 0 !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#oca-branches-selection-wrapper .oca-select-office-message {
font-size: 0.75rem !important;
color: var(--text-muted) !important;
margin: 0 0 0.5rem !important;
display: block !important;
}
#oca-branches-selection-wrapper select {
width: 100% !important;
max-width: 100% !important;
border: 1.5px solid var(--border) !important;
border-radius: 0 !important;
padding: 0.4375rem 0.625rem !important;
font-size: 0.8125rem !important;
background-color: #fff !important;
color: var(--color-primary) !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Gift card */
#pwgc-redeem-gift-card-form {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
#pwgc-redeem-gift-card-form label {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
/* La caja de canje es NEGRA (#pwgc-redeem-gift-card-form, arriba), así que el
campo va translúcido sobre ella, no blanco. Había dos definiciones para el
mismo input —una acotada al carrito y esta global— y ganaba la global por
especificidad (id + atributo + elemento), dejando un bloque blanco de
esquinas rectas contra el negro: el campo y el botón se veían disparejos.
Queda una sola, la que corresponde al fondo oscuro. Mismo problema que ya
habían consolidado con el botón, ver el comentario de abajo. */
#pwgc-redeem-gift-card-form input[type="text"] {
width: 100%;
height: 2.75rem;
border: 1.5px solid rgba(235, 204, 194, 0.3);
/* Recto como el botón que va al lado y como el resto de los botones del
sitio. Con var(--radius-card) el campo quedaba redondeado y el botón no:
el mismo desparejo, al revés. */
border-radius: 0;
padding: 0 0.875rem;
font-size: 0.875rem;
font-family: var(--font-sans);
color: #fff;
background: rgba(255, 255, 255, 0.08);
box-sizing: border-box;
transition: border-color var(--ease), background var(--ease);
}
#pwgc-redeem-gift-card-form input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.4);
}
#pwgc-redeem-gift-card-form input[type="text"]:focus {
outline: none;
border-color: var(--color-blush);
background: rgba(255, 255, 255, 0.12);
}
/* El botón de canjear gift card lo imprime el plugin PW Gift Cards, así que no
puede llevar nuestras clases. Hasta el 2026-08-11 tenía TRES definiciones
pisándose —una global, una en el carrito y otra en el checkout— y ninguna
estaba completa: la del carrito cambiaba el fondo en hover pero no el color,
así que ganaba el `color:#fff` del bloque global y quedaba blanco sobre blush
oscuro, 1,96:1. En el checkout el mismo cruce daba blanco sobre dorado, 2,42:1.
Además era el único "Aplicar" del sitio con aspecto propio: el del cupón, al
lado, es .cl-btn--primary.
Ahora hereda de .cl-btn / .cl-btn--primary / .cl-btn--sm (main.css lo suma a
esas listas, como ya hacía con .wpcf7-submit y .oca-tracking-form-submit).
Acá queda sólo lo que es disposición, no color. */
/* El plugin imprime SIEMPRE su
, vacío mientras no
haya error. El contenedor es flex con gap:8px, así que ese div de 0px de
ancho seguía siendo un ítem del flex y se comía su gap: empujaba el campo 8px
a la derecha y lo dejaba 8px más angosto que el botón de abajo. Medido en el
checkout: label y botón en x=840 con 505px, campo en x=848 con 497.
Con display:none deja de ocupar lugar en el flex. Las reglas de :not(:empty)
de más abajo siguen pintándolo cuando sí hay un error. */
#pwgc-redeem-error:empty {
display: none;
}
#pwgc-redeem-button {
width: 100%;
margin: 0 !important; /* el plugin trae un margin inline */
/* Misma altura que el campo de al lado, que mide 2.75rem. Es el mismo
recurso que usa el par del cupón (.cl-cart-coupon__input y su botón, los
dos en 44px): el contenedor del plugin es flex con align-items:center, y
sin una altura explícita el botón se queda en los 36px de .cl-btn--sm y
los bordes no coinciden. `align-self: stretch` no sirve — estira a la
caja del contenedor, que en el carrito incluye el mensaje de error. */
height: 2.75rem;
}
/* ── Mobile: resumen de orden en checkout ≤600px ── */
@media (max-width: 600px) {
/* Tabla → layout de bloque sin overflow horizontal */
.cl-checkout-order-review table {
display: block;
overflow: hidden;
}
.cl-checkout-order-review thead { display: none; }
.cl-checkout-order-review tbody,
.cl-checkout-order-review tfoot { display: block; width: 100%; }
/* Cada fila: flex row con separador inferior */
.cl-checkout-order-review tbody tr,
.cl-checkout-order-review tfoot tr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.cl-checkout-order-review tfoot .order-total { border-bottom: none; }
/* Celdas: sin borde propio (lo separa el tr) */
.cl-checkout-order-review table tbody td,
.cl-checkout-order-review table tfoot td,
.cl-checkout-order-review table tfoot th {
display: block;
padding: 0;
border: none !important;
vertical-align: unset;
font-size: 0.875rem;
}
/* Totales: label izquierda, monto derecha */
.cl-checkout-order-review tfoot th {
flex-shrink: 0;
padding-right: 0;
}
.cl-checkout-order-review tfoot td {
flex: 1;
min-width: 0;
text-align: right;
}
/* Fila ENVÍO: label arriba ancho completo, métodos abajo */
.cl-checkout-order-review .woocommerce-shipping-totals {
flex-direction: column;
align-items: stretch;
}
.cl-checkout-order-review .woocommerce-shipping-totals th,
.cl-checkout-order-review .woocommerce-shipping-totals td {
width: 100%;
text-align: left;
}
.cl-checkout-order-review .woocommerce-shipping-totals th {
margin-bottom: 0.375rem;
}
/* Etiquetas de método de envío: sin herencia de uppercase del th */
.cl-checkout-order-review .woocommerce-shipping-methods li label {
text-transform: none;
}
/* Producto: nombre flex, precio derecha */
.cl-checkout-order-review .product-name {
flex: 1;
min-width: 0;
}
.cl-checkout-order-review .product-total {
flex-shrink: 0;
text-align: right;
}
/* OCA list items: ancho completo */
.cl-checkout-order-review .woocommerce-shipping-methods li {
width: 100%;
}
}
/* Botón place order.
El color, la tipografía, el foco de teclado y el :disabled los hereda de
.cl-btn / .cl-btn--primary en main.css: este botón entró al sistema de
botones y dejó de pintarse solo.
Antes vivía entero acá, en DORADO. Y el dorado es el color al que llega el
hover de casi todos los botones del sitio, así que el botón más importante
se veía, quieto, igual que cualquier otro mientras lo estás tocando — y su
propio hover no tenía a dónde ir: iba a #b8902a, que no es un dorado más
oscuro sino un mostaza (el tono rota hacia el amarillo en vez de hacia el
rojo). De paso arrastraba su propio letter-spacing y no tenía :disabled.
Queda sólo lo que es propio de ESTE botón: ocupa todo el ancho de la columna
del resumen y lleva más aire vertical que un botón normal, porque es el
último clic de la compra. */
#place_order {
width: 100%;
padding: 1rem;
}
/* Back-to-cart link at the bottom of the billing fields column */
.cl-checkout-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: var(--color-blush);
text-underline-offset: 3px;
transition: color var(--ease), text-decoration-color var(--ease);
}
.cl-checkout-back:hover {
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
.cl-checkout-secure {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.75rem;
justify-content: center;
}
.cl-checkout-login-notice {
padding: 1rem 1.25rem;
background-color: rgba(235,204,194,0.1);
border-left: 3px solid var(--color-blush);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
margin-bottom: 1.5rem;
font-size: 0.9375rem;
}
@media (max-width: 480px) {
.cl-checkout-hero { padding-block: 1.75rem 1.5rem; }
.cl-checkout-steps { gap: 0; }
.cl-checkout-step__num { width: 32px; height: 32px; font-size: 0.6875rem; }
}
@media (min-width: 1025px) {
.cl-checkout-layout {
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: stretch;
}
.cl-checkout-summary {
border-left: 1px solid var(--border);
padding-left: 3rem;
}
}
/* ── Login toggle banner ── */
.woocommerce-form-login-toggle {
margin-bottom: 0;
}
.woocommerce-form-login-toggle .woocommerce-info {
background: rgba(201,160,96,0.07);
border-left-color: var(--color-gold);
font-size: 0.875rem;
color: var(--text-muted);
}
.woocommerce-form-login-toggle .showlogin {
color: var(--color-gold);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--ease);
}
.woocommerce-form-login-toggle .showlogin:hover {
color: var(--color-primary);
}
/* ── Login form (se despliega al hacer clic) ──────────────────────────────
* Acá había un comentario diciendo que estos estilos se habían sacado porque
* "el estilo de la caja ahora vive en .cl-login-box (form-login.php)". Eso es
* cierto para /mi-cuenta/, que tiene template propio del tema — pero NO es el
* único lugar donde aparece este formulario: WooCommerce lo emite también en
* el checkout, con su propio checkout/form-login.php, que el tema no
* sobrescribe. Ahí no existen ni .cl-login-page ni .cl-field, así que los
* campos quedaban con el reset y nada más: medidos, 178x27 sin borde, sin
* relleno y sin fondo, contra los 648x52 con filete de los demás campos del
* checkout. Y "Acceder" era texto plano.
*
* Se replica el estilo de los campos del checkout (mismo filete inferior,
* mismo relleno, mismo foco). El botón hereda de .cl-btn--primary sumándose a
* sus listas en main.css, como ya se hace con .wpcf7-submit y
* #pwgc-redeem-button. Va en tinta y no en dorado —el de /mi-cuenta/ es
* dorado— porque en esta página el dorado ya es de "Realizar el pedido", y
* acceder es una acción secundaria. */
.woocommerce-checkout .woocommerce-form-login {
/* Sin tope, los dos campos se estiran a los 1344px del contenedor: un
renglón de 1344px para escribir un usuario. Se acota al ancho de
formulario del sitio. */
max-width: var(--container-form);
margin: 0 0 1.5rem;
}
/* WooCommerce ya marca los dos campos como form-row-first / form-row-last:
están pensados para compartir renglón. El checkout no los pone en grilla
porque sus propios campos usan otro contenedor. */
@media (min-width: 641px) {
.woocommerce-checkout .woocommerce-form-login .form-row-first,
.woocommerce-checkout .woocommerce-form-login .form-row-last {
width: calc(50% - 0.75rem);
float: left;
}
.woocommerce-checkout .woocommerce-form-login .form-row-last {
margin-left: 1.5rem;
}
.woocommerce-checkout .woocommerce-form-login .form-row:not(.form-row-first):not(.form-row-last) {
clear: both;
}
}
.woocommerce-checkout .woocommerce-form-login > p:first-child {
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.woocommerce-checkout .woocommerce-form-login .input-text {
width: 100%;
padding: 0.75rem 0;
border: none;
border-bottom: 1.5px solid var(--border);
border-radius: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-primary);
transition: border-color var(--ease);
}
.woocommerce-checkout .woocommerce-form-login .input-text:focus {
outline: none;
border-bottom-color: var(--color-primary);
}
/* El ojo de "ver contraseña" se apoya sobre el campo; sin posición se iba al
renglón siguiente y empujaba el filete. */
.woocommerce-checkout .woocommerce-form-login .form-row {
position: relative;
margin-bottom: 1.25rem;
}
.woocommerce-checkout .woocommerce-form-login .show-password-input {
position: absolute;
right: 0;
bottom: 0.85rem;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--text-muted);
}
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit {
margin-top: 0.5rem;
}
.woocommerce-checkout .woocommerce-form-login .lost_password {
margin: 1rem 0 0;
font-size: 0.8125rem;
}
.woocommerce-checkout .woocommerce-form-login .lost_password a {
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--ease);
}
.woocommerce-checkout .woocommerce-form-login .lost_password a:hover {
color: var(--color-primary);
}
/* ── Coupon toggle banner ── */
/* Override the default WC gold-left-border info box so the link reads as a
clear CTA rather than a system notice. */
.woocommerce-form-coupon-toggle {
margin-bottom: 1.5rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
background: rgba(201,160,96,0.07);
border-left-color: var(--color-gold);
font-size: 0.875rem;
color: var(--text-muted);
}
.woocommerce-form-coupon-toggle .showcoupon {
color: var(--color-gold);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--ease);
}
.woocommerce-form-coupon-toggle .showcoupon:hover {
color: var(--color-primary);
}
/* ── Coupon form (revealed on click) ── */
.checkout_coupon.woocommerce-form-coupon {
display: flex;
gap: 0.5rem;
align-items: stretch;
margin-bottom: 1.5rem;
padding: 1rem 1.25rem;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}
.checkout_coupon .form-row {
margin: 0;
flex: 1;
}
.checkout_coupon input[type="text"] {
width: 100%;
height: 44px;
padding: 0 0.875rem;
border: 1.5px solid var(--border);
border-radius: 0;
font-size: 0.9375rem;
font-family: inherit;
transition: border-color var(--ease);
}
.checkout_coupon input[type="text"]:focus {
outline: none;
border-color: var(--color-primary);
}
.checkout_coupon .button {
height: 44px;
padding: 0 1.25rem;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: var(--radius-card);
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background var(--ease);
}
.checkout_coupon .button:hover {
background: var(--color-gold);
}
/* ── Privacy policy text ── */
.woocommerce-privacy-policy-text {
padding: 0.875rem 1rem;
margin-bottom: 1rem;
background: var(--bg-light);
border-left: 3px solid var(--border);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.woocommerce-privacy-policy-text p {
margin: 0;
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.6;
}
.woocommerce-privacy-policy-text a {
color: var(--color-primary);
font-weight: 400;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── TyC checkbox row ── */
.woocommerce-terms-and-conditions-wrapper .form-row {
margin: 0 0 1rem;
}
.woocommerce-form__label-for-checkbox {
display: flex;
align-items: flex-start;
gap: 0.625rem;
cursor: pointer;
}
/* Hide native checkbox — also covers .input-checkbox used in login "Recordarme" */
.woocommerce-form__input-checkbox,
.input-checkbox {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.0625rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-card);
background: #fff;
cursor: pointer;
transition: background var(--ease), border-color var(--ease);
position: relative;
}
.woocommerce-form__input-checkbox:checked,
.input-checkbox:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* El tilde se dibuja con dos bordes de un cuadrado rotado 45°. La versión
anterior usaba `inset` con cuatro valores distintos y bordes izquierdo+abajo:
a 18px la figura salía deformada y se leía como un borrón oscuro, no como un
check. Con alto/ancho fijos y proporción 6×11 el trazo queda parejo. */
.woocommerce-form__input-checkbox:checked::after,
.input-checkbox:checked::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translateY(-1px);
}
/* Que se note sin tener que mirar el cuadradito: al marcar, la frase pasa de
gris apagado a negro de texto. Es la señal que faltaba — el cambio de 18 a
20px ayuda, pero el contraste del texto es lo que se ve de reojo. */
.woocommerce-form__label-for-checkbox:has(input:checked),
.woocommerce-form__label-for-checkbox:has(input:checked) span,
.woocommerce-form__label-for-checkbox:has(input:checked) .woocommerce-terms-and-conditions-checkbox-text {
color: var(--text-primary);
}
/* .woocommerce-checkout label pone versalita y tracking a TODAS las etiquetas
del checkout, que es correcto para "NOMBRE" o "EMAIL" pero no para una oración
entera: "HE LEÍDO Y ESTOY DE ACUERDO CON LOS TÉRMINOS…" en mayúscula con
2.2px de tracking se lee mucho peor que en minúscula, y es justo el texto que
conviene que se lea. Lo mismo para el "¿Crear una cuenta?".
Se acota a las etiquetas de checkbox, que son frases; las de los campos
siguen igual. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox span,
.woocommerce-terms-and-conditions-checkbox-text {
font-size: 0.8125rem;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
color: var(--text-muted);
line-height: 1.55;
}
.woocommerce-terms-and-conditions-link {
color: var(--color-primary);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.woocommerce-terms-and-conditions-link:hover {
color: var(--color-gold);
}
/* ── Gift card redeem form on checkout — negro + blush ──
En checkout el plugin NO genera el wrapper #pwgc-redeem-gift-card-form;
el