, así que woocommerce-general aplica: .woocommerce button.button (0,2,1) y .woocommerce button.button.alt (0,3,1) — p.ej. "Aplicar cupón", "Actualizar carrito" (cart.php) y #place_order (payment.php, button.alt) — se vencen con (0,3,1)/(0,4,1) sin !important. MISMOS tokens que components.css/shop.css §13: cero drift. Las variantes llevan .vc-btn.vc-btn--x (0,4,1) para ganarle también al bloque base .alt. */ .woocommerce-cart a.button.vc-btn, .woocommerce-cart button.button.vc-btn, .woocommerce-cart input.button.vc-btn, .woocommerce-cart a.button.alt.vc-btn, .woocommerce-cart button.button.alt.vc-btn, .woocommerce-checkout a.button.vc-btn, .woocommerce-checkout button.button.vc-btn, .woocommerce-checkout input.button.vc-btn, .woocommerce-checkout a.button.alt.vc-btn, .woocommerce-checkout button.button.alt.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; line-height: 1; text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer; background: var(--cta-bg); color: var(--cta-ink); border: var(--border-w) solid transparent; border-radius: var(--radius-pill); } .woocommerce-cart a.button.vc-btn:hover, .woocommerce-cart button.button.vc-btn:hover, .woocommerce-cart input.button.vc-btn:hover, .woocommerce-cart a.button.alt.vc-btn:hover, .woocommerce-cart button.button.alt.vc-btn:hover, .woocommerce-checkout a.button.vc-btn:hover, .woocommerce-checkout button.button.vc-btn:hover, .woocommerce-checkout input.button.vc-btn:hover, .woocommerce-checkout a.button.alt.vc-btn:hover, .woocommerce-checkout button.button.alt.vc-btn:hover { background: var(--cta-bg-hover); color: var(--cta-ink); } .woocommerce-cart a.button.vc-btn:focus-visible, .woocommerce-cart button.button.vc-btn:focus-visible, .woocommerce-cart input.button.vc-btn:focus-visible, .woocommerce-checkout a.button.vc-btn:focus-visible, .woocommerce-checkout button.button.vc-btn:focus-visible, .woocommerce-checkout input.button.vc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Variante fantasma. */ .woocommerce-cart a.button.vc-btn.vc-btn--ghost, .woocommerce-cart button.button.vc-btn.vc-btn--ghost, .woocommerce-cart input.button.vc-btn.vc-btn--ghost, .woocommerce-checkout a.button.vc-btn.vc-btn--ghost, .woocommerce-checkout button.button.vc-btn.vc-btn--ghost, .woocommerce-checkout input.button.vc-btn.vc-btn--ghost { background: transparent; color: var(--brand-strong); border-color: var(--brand); } .woocommerce-cart a.button.vc-btn.vc-btn--ghost:hover, .woocommerce-cart button.button.vc-btn.vc-btn--ghost:hover, .woocommerce-cart input.button.vc-btn.vc-btn--ghost:hover, .woocommerce-checkout a.button.vc-btn.vc-btn--ghost:hover, .woocommerce-checkout button.button.vc-btn.vc-btn--ghost:hover, .woocommerce-checkout input.button.vc-btn.vc-btn--ghost:hover { background: var(--brand); color: var(--cta-ink); } /* Tamaños / block. */ .woocommerce-cart a.button.vc-btn.vc-btn--sm, .woocommerce-cart button.button.vc-btn.vc-btn--sm, .woocommerce-cart input.button.vc-btn.vc-btn--sm, .woocommerce-checkout a.button.vc-btn.vc-btn--sm, .woocommerce-checkout button.button.vc-btn.vc-btn--sm, .woocommerce-checkout input.button.vc-btn.vc-btn--sm { padding: 0.6rem 1rem; font-size: var(--fs-xs); } .woocommerce-cart a.button.vc-btn.vc-btn--lg, .woocommerce-cart button.button.vc-btn.vc-btn--lg, .woocommerce-checkout a.button.vc-btn.vc-btn--lg, .woocommerce-checkout button.button.vc-btn.vc-btn--lg { padding: 1rem 1.8rem; font-size: var(--fs-body); min-height: 52px; } .woocommerce-cart a.button.vc-btn.vc-btn--block, .woocommerce-cart button.button.vc-btn.vc-btn--block, .woocommerce-checkout a.button.vc-btn.vc-btn--block, .woocommerce-checkout button.button.vc-btn.vc-btn--block { display: flex; width: 100%; } /* Estados del add-to-cart AJAX del core (cross-sells del carrito). */ .woocommerce-cart a.button.vc-btn.added, .woocommerce-checkout a.button.vc-btn.added { background: var(--cta-bg-hover); } .woocommerce-cart a.button.vc-btn.loading, .woocommerce-checkout a.button.vc-btn.loading { opacity: 0.7; pointer-events: none; } /* ============================ 3. DINERO: UNA SOLA VERDAD ================ */ /* Toda cifra en la sans del contrato con lining+tabular: las columnas de importes alinean dígito a dígito (mecánica del recibo v1 §9.0). */ .vc-cart .woocommerce-Price-amount, .vc-checkout .woocommerce-Price-amount, .vc-thankyou .woocommerce-Price-amount, .vc-cart .amount, .vc-checkout .amount, .vc-thankyou .amount { font-family: var(--font-sans); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; } /* $ atenuado en líneas de cuerpo: el número manda (v1 §9.3). */ .vc-cart .woocommerce-Price-currencySymbol, .vc-checkout .woocommerce-Price-currencySymbol, .vc-thankyou .woocommerce-Price-currencySymbol { color: var(--ink-3); font-weight: inherit; margin-right: 0.1em; } /* ============================ 4. TABLA DEL CARRITO ====================== */ /* cart/cart.php: table.shop_table.vc-cart__table > tr.vc-cart__row con celdas product-remove/thumbnail/name/price/quantity/subtotal (+ fila .vc-cart__actions). Sin marco propio: los ítems flotan sobre el lienzo (editorial); el marco queda reservado para el recibo (§6). Neutralización del core: .woocommerce table.shop_table llega a (0,2,1) en la tabla, (0,2,2) en th/td y (0,2,3) en tbody th — un body class solo (0,2,0) NO alcanza. Se suma .shop_table (clase que el template conserva) y .cart_item en las filas: (0,3,x)+ le gana al core en todos los niveles, igual que el bloque del thankyou (§14, table.shop_table). */ .woocommerce-cart .vc-cart__table.shop_table { width: 100%; border-collapse: collapse; border: 0; border-radius: 0; margin: 0; background: transparent; } .woocommerce-cart .vc-cart__table.shop_table th, .woocommerce-cart .vc-cart__table.shop_table td { border: 0; background: transparent; line-height: var(--lh-snug); } /* --- Base (mobile-first): tarjetas apiladas, sin thead --- */ .woocommerce-cart .vc-cart__table.shop_table, .woocommerce-cart .vc-cart__table.shop_table tbody { display: block; width: 100%; } .woocommerce-cart .vc-cart__table.shop_table thead { display: none; } /* Reset de filas a bloque EXCEPTO las de producto: .cart_item es grid (abajo) / table-row (980–1099). Sin el :not, esta regla (0,3,2) le ganaba a .cart_item{display:grid} (0,3,0) y el grid del recibo NUNCA se aplicaba → el ítem caía a table-cell y se veía desprolijo (bug del motor). */ .woocommerce-cart .vc-cart__table.shop_table tbody tr:not(.cart_item) { display: block; } .woocommerce-cart .vc-cart__row.cart_item { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); align-items: start; padding: var(--sp-5) 0; border-bottom: var(--border-w) solid var(--line); } .woocommerce-cart .vc-cart__row.cart_item td { padding: 0; text-align: left; } .woocommerce-cart .vc-cart__row.cart_item td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; width: auto; align-self: start; } .woocommerce-cart .vc-cart__row.cart_item td.product-name { grid-column: 2; padding-right: var(--sp-7); /* aire para el botón quitar absoluto */ } /* Precio unitario: susurro bajo el nombre. */ .woocommerce-cart .vc-cart__row.cart_item td.product-price { grid-column: 2; display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 3px; white-space: normal; } /* Cantidad y subtotal: aire arriba para separar del bloque nombre/precio. */ .woocommerce-cart .vc-cart__row.cart_item td.product-quantity { grid-column: 2; margin-top: var(--sp-3); } /* Stepper alineado a la izquierda (con nombre/precio/subtotal). En la tabla real 980–1099 se re-centra (margin-inline:auto) más abajo, que gana por orden. */ .woocommerce-cart .vc-cart__row.cart_item td.product-quantity .vc-qty { margin-inline: 0; } .woocommerce-cart .vc-cart__row.cart_item td.product-subtotal { grid-column: 2; display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); white-space: normal; } /* Etiqueta de la celda apilada (data-title): versalita calma, editorial. */ .woocommerce-cart .vc-cart__row.cart_item td.product-price::before, .woocommerce-cart .vc-cart__row.cart_item td.product-subtotal::before { content: attr(data-title); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .woocommerce-cart .vc-cart__row.cart_item td.product-remove { position: absolute; top: var(--sp-5); right: 0; width: auto; } /* --- 980–1099px: tabla real (recibo a columnas). SOLO en single-column con contenedor ancho. En 2-col (≥1100px) la columna del form NO llega al ancho mínimo de la tabla (~905px; contenedor capado en 1240 − resumen ~380), y por debajo de ~980px el contenedor tampoco → ahí la tabla se queda en tarjetas apiladas (el layout base), que caben en cualquier ancho. Fix del scroll-H. --- */ @media (min-width: 980px) and (max-width: 1099px) { .woocommerce-cart .vc-cart__table.shop_table { display: table; } .woocommerce-cart .vc-cart__table.shop_table thead { display: table-header-group; } .woocommerce-cart .vc-cart__table.shop_table tbody { display: table-row-group; } .woocommerce-cart .vc-cart__table.shop_table tbody tr { display: table-row; } .woocommerce-cart .vc-cart__row.cart_item { display: table-row; padding: 0; border: 0; } .woocommerce-cart .vc-cart__row.cart_item td { display: table-cell; padding: var(--sp-5) var(--sp-3); border-bottom: var(--border-w) solid var(--line); vertical-align: middle; } /* Encabezados de columna: versalita calma con tracking abierto (v1 §9.2). */ .woocommerce-cart .vc-cart__table.shop_table thead th { padding: 0 var(--sp-3) var(--sp-3); border-bottom: var(--border-w) solid var(--line); text-align: left; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .woocommerce-cart .vc-cart__table.shop_table thead th.product-price, .woocommerce-cart .vc-cart__table.shop_table thead th.product-quantity, .woocommerce-cart .vc-cart__table.shop_table thead th.product-subtotal { text-align: center; } .woocommerce-cart .vc-cart__row.cart_item td.product-remove { position: static; width: 36px; padding-left: 0; } .woocommerce-cart .vc-cart__row.cart_item td.product-thumbnail { width: 96px; } .woocommerce-cart .vc-cart__row.cart_item td.product-name { padding-right: var(--sp-3); } .woocommerce-cart .vc-cart__row.cart_item td.product-price, .woocommerce-cart .vc-cart__row.cart_item td.product-quantity, .woocommerce-cart .vc-cart__row.cart_item td.product-subtotal { display: table-cell; text-align: center; white-space: nowrap; } .woocommerce-cart .vc-cart__row.cart_item td.product-price::before, .woocommerce-cart .vc-cart__row.cart_item td.product-subtotal::before { content: none; } .woocommerce-cart .vc-cart__row.cart_item td.product-subtotal { padding-right: 0; } .woocommerce-cart .vc-cart__row.cart_item td.product-quantity .vc-qty { margin-inline: auto; } } /* Miniatura: plana, solo hairline (editorial). El core fija table.cart img en 32px (0,1,3): se vence con (0,4,2). */ .woocommerce-cart .vc-cart__table.shop_table td.product-thumbnail img { width: 96px; height: 112px; max-width: none; object-fit: cover; border-radius: var(--radius-md); border: var(--border-w) solid var(--line); background: var(--surface-2); box-shadow: none; } @media (min-width: 880px) { .woocommerce-cart .vc-cart__table.shop_table td.product-thumbnail img { width: 96px; height: 116px; } } /* Nombre del producto: pieza display; jerarquía por peso en los importes (precio unitario muted, subtotal en tinta plena — v1 §9.3). */ .vc-cart__name { font-family: var(--font-display); font-size: 1.15em; font-weight: 600; color: var(--ink); line-height: var(--lh-snug); text-decoration: none; } .vc-cart__name:hover { color: var(--brand-strong); } .woocommerce-cart .vc-cart__row td.product-price { color: var(--ink-2); font-size: var(--fs-sm); } .woocommerce-cart .vc-cart__row td.product-subtotal { color: var(--ink); font-weight: 700; font-size: 1.05em; } /* Variación / backorder bajo el nombre. El core flota los dt de dl.variation (0,2,3): se vence con (0,3,4). */ .woocommerce-cart .vc-cart__row td.product-name dl.variation { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--ink-3); } .woocommerce-cart .vc-cart__row td.product-name dl.variation dt, .woocommerce-cart .vc-cart__row td.product-name dl.variation dd { float: none; display: inline; margin: 0; padding: 0; font-weight: inherit; } .woocommerce-cart .vc-cart__row td.product-name dl.variation dt { font-weight: 500; } .woocommerce-cart .vc-cart__row td.product-name dl.variation dd::after { content: " "; display: block; height: 0.15em; } .woocommerce-cart .vc-cart__row td.product-name dl.variation dd p { margin: 0; display: inline; } .woocommerce-cart .vc-cart__row .backorder_notification { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--warn); } /* --- Botón quitar: reposo casi invisible, hover de alerta suave; el ícono (tacho) inclina apenas en hover — micro-gesto, solo transform (v1 §9.4; transición en §13). El core pinta a.remove en rojo con !important sobre el : el color del ícono se fija en el propio de un gateway externo mantiene el max-height flexible por si su logo no es cuadrado. */ .vc-checkout__method-icon svg { height: 24px; } .woocommerce-checkout #payment.vc-checkout__payment div.payment_box.vc-checkout__method-box { position: static; flex-basis: 100%; width: auto; margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--info-soft); color: var(--ink); border: var(--border-w) solid color-mix(in srgb, var(--info) 30%, var(--line)); border-radius: var(--radius-md); font-size: var(--fs-sm); } .woocommerce-checkout #payment.vc-checkout__payment div.payment_box.vc-checkout__method-box::before { content: none; display: none; } .vc-checkout__method-box p { margin: 0; max-width: none; } .vc-checkout__method-box p + p { margin-top: var(--sp-2); } .vc-checkout__no-payment { padding: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); } /* Realizar pedido (button#place_order ya lleva vc-btn--primary --block --lg; solo se limpia el contenedor que el core rellena). */ .woocommerce-checkout #payment.vc-checkout__payment div.form-row.place-order { display: block; background: transparent; margin: 0; padding: 0; float: none; width: 100%; } .woocommerce-checkout #payment.vc-checkout__payment .place-order noscript { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); } /* Términos y condiciones. */ .vc-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); } .vc-checkout .woocommerce-terms-and-conditions { margin-top: var(--sp-3); padding: var(--sp-4); border: var(--border-w) solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); max-height: 180px; overflow-y: auto; } /* ============================ 14. GRACIAS (thankyou) ==================== */ /* thankyou.php + order-received.php: .woocommerce-order.vc-thankyou > .vc-thankyou__head (__check + __title) + ul.vc-thankyou__overview + [.vc-thankyou__pay de inc/woocommerce.php para BACS] + detalle del pedido (templates del CORE: section.woocommerce-order-details con table.woocommerce-table--order-details + woocommerce-customer-details) + p.vc-thankyou__cta. */ .vc-thankyou { max-width: var(--container-narrow); margin-inline: auto; } /* --- Encabezado: check + título. El pop del check se anima en §16. --- */ .vc-thankyou__head { text-align: center; margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-6)); } .vc-thankyou__check { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto var(--sp-4); border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok-soft) 55%, transparent); } .vc-thankyou__check svg { width: 38px; height: 38px; } .woocommerce-checkout .vc-thankyou__title { margin: 0; padding: 0; border: 0; background: transparent; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; } .woocommerce-checkout .vc-thankyou__title::before { display: none; } .vc-thankyou__head--failed .woocommerce-thankyou-order-failed { color: var(--error); font-size: var(--fs-body); margin: 0 0 var(--sp-3); } .vc-thankyou__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin: var(--sp-4) 0 0; } /* --- Resumen rápido (overview): tira centrada con los datos clave. El clearfix del core sobre ul.order_details metía una "celda fantasma" en la tira flex: se anula (gotcha conocido). --- */ .woocommerce-checkout .vc-thankyou__overview::before, .woocommerce-checkout .vc-thankyou__overview::after { content: none; } .woocommerce-checkout ul.order_details.vc-thankyou__overview { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) clamp(var(--sp-5), 4vw, var(--sp-7)); margin: 0 0 clamp(var(--sp-5), 4vw, var(--sp-6)); padding: clamp(var(--sp-4), 3vw, var(--sp-5)); border: var(--border-w) solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); text-align: center; } .woocommerce-checkout .vc-thankyou__overview li { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; border: 0; float: none; min-width: 0; /* el email largo se parte, no desborda */ font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .woocommerce-checkout .vc-thankyou__overview li strong { min-width: 0; display: block; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; } .woocommerce-checkout .vc-thankyou__overview .total strong { font-variant-numeric: lining-nums tabular-nums; } /* El $ del Total del overview: alzado y en acento (firma del recibo). */ .vc-thankyou__overview .total .woocommerce-Price-currencySymbol { color: var(--accent-strong); font-size: 0.62em; font-weight: 700; vertical-align: 0.36em; margin-right: 0.06em; } /* --- Panel BACS "qué sigue" (inc/woocommerce.php envuelve la salida real del gateway en .vc-thankyou__pay). --- */ .vc-thankyou__pay { margin: 0 0 clamp(var(--sp-5), 4vw, var(--sp-6)); padding: clamp(var(--sp-5), 3vw, var(--sp-6)) clamp(var(--sp-4), 3vw, var(--sp-5)); border: var(--border-w) solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--radius-lg); background: var(--accent-soft); } .vc-thankyou__pay-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); } .vc-thankyou__pay-head svg { width: 18px; height: 18px; flex: none; } .vc-thankyou__pay p { margin: 0 0 var(--sp-2); color: var(--ink); line-height: var(--lh-body); } .vc-thankyou__pay p:last-child { margin-bottom: 0; } .vc-thankyou__pay strong { color: var(--ink); font-weight: 600; } .vc-thankyou__pay h2, .vc-thankyou__pay .wc-bacs-bank-details-heading { font-size: var(--fs-h3); margin: var(--sp-3) 0 var(--sp-2); } .vc-thankyou__pay ul.wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--ink); } /* --- Detalle del pedido: recibo editorial (mata la grilla/zebra del core en table.shop_table con especificidad (0,3,x): body class + .vc-thankyou + selectores del core). Cubre también order-downloads. --- */ .vc-thankyou .woocommerce-order-details, .vc-thankyou .woocommerce-customer-details { margin-top: clamp(var(--sp-5), 4vw, var(--sp-6)); } .vc-thankyou .woocommerce-order-details__title, .vc-thankyou .woocommerce-column__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-4); } .woocommerce-checkout .vc-thankyou table.shop_table { width: 100%; border-collapse: collapse; border: var(--border-w) solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: transparent; margin: 0; font-size: var(--fs-sm); } .woocommerce-checkout .vc-thankyou table.shop_table th, .woocommerce-checkout .vc-thankyou table.shop_table td { background: transparent; border: 0; border-bottom: var(--border-w) solid var(--line); padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; line-height: var(--lh-snug); } .woocommerce-checkout .vc-thankyou table.shop_table thead th { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .woocommerce-checkout .vc-thankyou table.shop_table thead th:last-child, .woocommerce-checkout .vc-thankyou table.shop_table td.product-total, .woocommerce-checkout .vc-thankyou table.shop_table tfoot td { text-align: right; } .woocommerce-checkout .vc-thankyou table.shop_table tfoot th { font-weight: 500; color: var(--ink-2); } .woocommerce-checkout .vc-thankyou table.shop_table tfoot tr:last-child th, .woocommerce-checkout .vc-thankyou table.shop_table tfoot tr:last-child td { border-bottom: 0; } .woocommerce-checkout .vc-thankyou table.shop_table .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; } .woocommerce-checkout .vc-thankyou table.shop_table .product-name a:hover { color: var(--brand-strong); } .woocommerce-checkout .vc-thankyou table.shop_table .product-quantity { color: var(--ink-3); } .woocommerce-checkout .vc-thankyou table.shop_table .wc-item-meta { list-style: none; margin: var(--sp-1) 0 0; padding: 0; font-size: var(--fs-xs); color: var(--ink-3); } .woocommerce-checkout .vc-thankyou table.shop_table .wc-item-meta p { display: inline; margin: 0; } /* Total del recibo como pieza. WooCommerce no marca la fila del Total con clase propia: se aísla como "la última fila del tfoot con un importe" vía :has() (la de Método de pago no tiene importe) — mecánica heredada del recibo v1. */ .woocommerce-checkout .vc-thankyou table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) th { font-family: var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink); } .woocommerce-checkout .vc-thankyou table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) td { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .woocommerce-checkout .vc-thankyou table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) .woocommerce-Price-currencySymbol { color: var(--accent-strong); font-size: 0.62em; font-weight: 700; vertical-align: 0.36em; margin-right: 0.06em; } /* Método de envío entre paréntesis, discreto. */ .woocommerce-checkout .vc-thankyou table.shop_table .shipped_via { font-size: var(--fs-xs); color: var(--ink-3); } /* --- Direcciones del cliente (core: .woocommerce-columns--addresses). Clearfix del core anulado (celda fantasma en el grid). --- */ .vc-thankyou .woocommerce-customer-details .woocommerce-columns--addresses::before, .vc-thankyou .woocommerce-customer-details .woocommerce-columns--addresses::after, .vc-thankyou .woocommerce-customer-details .addresses::before, .vc-thankyou .woocommerce-customer-details .addresses::after { content: none; } .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .woocommerce-columns--addresses, .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .addresses { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; } .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .woocommerce-column { float: none; width: auto; } .woocommerce-checkout .vc-thankyou .woocommerce-customer-details address { font-style: normal; padding: clamp(var(--sp-4), 2.5vw, var(--sp-5)); border: var(--border-w) solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-body); } .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .woocommerce-customer-details--email { margin: var(--sp-2) 0 0; padding: 0; } .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .woocommerce-customer-details--phone::before, .woocommerce-checkout .vc-thankyou .woocommerce-customer-details .woocommerce-customer-details--email::before { display: none; } /* CTA final. */ .vc-thankyou__cta { text-align: center; margin: clamp(var(--sp-5), 4vw, var(--sp-6)) 0 0; } /* Densidad mobile del recibo. */ @media (max-width: 639.98px) { .woocommerce-checkout .vc-thankyou table.shop_table th, .woocommerce-checkout .vc-thankyou table.shop_table td { padding: var(--sp-3) var(--sp-2); } .woocommerce-checkout .vc-thankyou table.shop_table .shipped_via { display: block; margin-top: 0.15rem; } } /* ============================ 15. IMPRESIÓN (gracias) =================== */ /* El comprobante de la compra se imprime limpio: sin chrome del sitio (header/topbar/footer/FAB/drawers/toasts) ni acciones de navegación. */ @media print { .vc-topbar, .vc-header, .vc-footer, .vc-whatsapp-fab, .vc-drawer, .vc-toasts, .vc-breadcrumbs, .vc-thankyou__cta, .vc-thankyou__actions { display: none; } .vc-thankyou { max-width: none; } .vc-thankyou__check { box-shadow: none; } /* Hairlines visibles en papel; nada de fondos que gasten tinta. */ .woocommerce-checkout .vc-thankyou table.shop_table, .vc-thankyou__pay, .woocommerce-checkout ul.order_details.vc-thankyou__overview { background: transparent; box-shadow: none; } } /* ============================ 16. MOTION ================================ */ /* Todas las transiciones/animaciones de esta hoja viven acá: con prefers-reduced-motion: reduce, nada se mueve. */ @media (prefers-reduced-motion: no-preference) { .woocommerce-cart .vc-cart__remove, .woocommerce-cart .vc-cart__remove svg { transition: background var(--tr) var(--ease-out), border-color var(--tr) var(--ease-out), color var(--tr) var(--ease-out), transform var(--tr) var(--ease-out); } .vc-cart__name { transition: color var(--tr) var(--ease-out); } .vc-cart.is-updating .vc-cart__totals, .vc-cart.is-updating .vc-cart__table tbody { transition: opacity var(--tr) var(--ease-out); } .woocommerce-cart .vc-cart__proceed a.checkout-button { transition: background var(--tr) var(--ease-out); } .vc-checkout .input-text, .vc-checkout textarea, .vc-checkout select, .vc-checkout .select2-container .select2-selection { transition: border-color var(--tr) var(--ease-out); } /* Festejo discreto: el check aparece UNA vez (frecuencia: 1 por compra). Desaceleración suave (--ease-out), sin rebote. */ .vc-thankyou__check { animation: vc-thanks-pop 520ms var(--ease-out) both; } .vc-thankyou__check svg { animation: vc-thanks-pop 560ms var(--ease-out) 140ms both; } } @keyframes vc-thanks-pop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }