/* Cuentella — checkout de WooCommerce (bloques). Solo apariencia: no cambia campos ni lógica.
 * Usa los tokens de marca.css (--cu-*). Se apaga en WooCommerce → Cuentella → «Diseño del checkout». */

.wc-block-checkout { font-family: var(--cu-fuente); color: var(--cu-tinta); }
.wc-block-checkout a { color: var(--cu-primario); }

/* Columna del formulario: una tarjeta */
.wc-block-checkout .wc-block-checkout__main { padding: clamp(20px, 3vw, 30px); background: #fff; border: 1px solid var(--cu-borde); border-radius: var(--cu-radio); overflow: hidden; }
.wc-block-checkout .wc-block-components-checkout-step { margin: 0 0 8px; padding: 0 0 28px; }
.wc-block-checkout .wc-block-components-checkout-step:not(:last-of-type) { border-bottom: 1px solid var(--cu-borde); margin-bottom: 28px; }
.wc-block-checkout .wc-block-components-checkout-step__title { font: 400 26px/1.15 var(--cu-fuente-titulo); letter-spacing: 1px; color: var(--cu-tinta); }
.wc-block-checkout .wc-block-components-checkout-step__description { margin-top: 4px; font-size: 13px; color: var(--cu-suave); }

/* Campos (la cadena de clases es larga a propósito: tiene que ganarle a los estilos del tema y de los bloques) */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type=text],
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type=email],
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type=tel],
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type=number],
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type=password],
.wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
.wc-block-checkout .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select {
  min-height: 52px; border: 1px solid var(--cu-borde); border-radius: 14px; background-color: #FBFDFF;
  font: 500 16px/1.3 var(--cu-fuente); color: var(--cu-tinta); box-shadow: none;
}
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input:not(.is-active) label { font-size: 16px; }
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select__label { color: var(--cu-suave); font-weight: 600; }
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-textarea:focus,
.wc-block-checkout .wc-block-components-form .wc-blocks-components-select__select:focus {
  border-color: #7AA6D4; box-shadow: 0 0 0 4px #E8F3FC; outline: none;
}
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input.has-error input { border-color: var(--cu-error); }
.wc-block-checkout .wc-block-components-validation-error { color: var(--cu-error); }
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input { accent-color: var(--cu-primario); border-radius: 6px; }
.wc-block-checkout .wc-block-components-checkbox__label { color: var(--cu-suave); font-size: 14px; }
.wc-block-checkout .wc-block-checkout__guest-checkout-notice, .wc-block-checkout .wc-block-components-address-form__address_2-toggle { font-size: 13px; color: var(--cu-suave); }

/* Medio de pago: UN solo borde por opción. WooCommerce dibuja además un ::after con borde en el grupo y en la opción
 * marcada, y el tema suma outlines; se anulan todos y se deja un único borde redondeado que cambia de color al elegir. */
.wc-block-checkout .wc-block-components-radio-control,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked { border: 0; box-shadow: none; outline: 0; }
.wc-block-checkout .wc-block-components-radio-control::after,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
.wc-block-checkout .wc-block-components-radio-control__option::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted::after,
.wc-block-checkout .wc-block-components-radio-control__option-checked::after { display: none !important; content: none !important; }
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
  margin: 0 0 12px; border: 1px solid var(--cu-borde); border-radius: 18px; background: #fff; box-shadow: none; outline: 0; overflow: hidden; }
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { margin: 0; border: 0; border-radius: 0; background: transparent; }
.wc-block-checkout .wc-block-components-radio-control__option { padding: 16px 16px 16px 52px; font-weight: 700; }
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { padding: 16px 16px 16px 52px; }
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option-checked { border-color: var(--cu-primario); background: #F6FBFF; box-shadow: 0 0 0 1px var(--cu-primario); }
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked { box-shadow: none; background: transparent; }
.wc-block-checkout .wc-block-components-radio-control__input { border: 2px solid var(--cu-borde); background: #fff; box-shadow: none; }
.wc-block-checkout .wc-block-components-radio-control__input:checked { border-color: var(--cu-primario); }
.wc-block-checkout .wc-block-components-radio-control__input:checked::before { background: var(--cu-primario); }
.wc-block-checkout .wc-block-components-radio-control-accordion-content { padding: 0 16px 16px 52px; font-size: 13px; color: var(--cu-suave); border: 0; }

/* Casilla «Agregá una nota a tu pedido»: cuadrada y del tamaño del texto, sin el círculo grande del tema */
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
  width: 22px; height: 22px; min-width: 22px; margin: 0; border: 1px solid var(--cu-borde); border-radius: 6px; background: #fff; box-shadow: none; }
.wc-block-checkout .wc-block-checkout__add-note { margin: 4px 0 0; padding-top: 12px; }

/* Términos */
.wc-block-checkout .wc-block-checkout__terms { font-size: 13px; color: var(--cu-suave); }

/* Botón de pagar y volver */
.wc-block-checkout .wc-block-checkout__actions { align-items: center; gap: 12px; }
.wc-block-checkout .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { display: none; } /* un cuento por compra: no hay carrito al que volver */
.wc-block-checkout .wc-block-checkout__actions_row { justify-content: stretch; }
.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
  width: 100%; min-height: 56px; padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--cu-acento) !important; color: #fff !important;
  font: 800 16px/1.2 var(--cu-fuente); box-shadow: 0 12px 28px rgba(255, 91, 110, .28); transition: transform .15s, box-shadow .15s;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(255, 91, 110, .34); }
.wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible { outline: 3px solid var(--cu-primario); outline-offset: 3px; }
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: inherit; }

/* Resumen del pedido: tarjeta fija a la derecha */
.wc-block-checkout .wc-block-checkout__sidebar { position: sticky; top: 24px; align-self: flex-start; height: fit-content;
  padding: 0; background: #fff; border: 1px solid var(--cu-borde); border-radius: 28px; box-shadow: var(--cu-sombra); overflow: hidden; }
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { padding-left: 24px; padding-right: 24px; }
.wc-block-checkout .wc-block-components-checkout-order-summary__title { padding: 24px 24px 4px; }
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text { font: 400 26px/1.15 var(--cu-fuente-titulo); letter-spacing: 1px; }
.wc-block-checkout .wc-block-components-order-summary-item { gap: 14px; padding: 8px 0; }
.wc-block-checkout .wc-block-components-order-summary-item__image { width: 72px; flex: none; }
.wc-block-checkout .wc-block-components-order-summary-item__image img { width: 72px; height: 72px; object-fit: cover; border-radius: 16px; }
.wc-block-checkout .wc-block-components-order-summary-item__quantity { display: none; } /* siempre es 1 */
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices { display: none; } /* repite el precio de la derecha */
.wc-block-checkout .wc-block-components-product-name { font: 800 15px/1.3 var(--cu-fuente); color: var(--cu-tinta); text-decoration: none; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.wc-block-checkout .wc-block-components-order-summary__content { display: block; width: 100%; }
.wc-block-checkout .wc-block-components-order-summary-item { box-sizing: border-box; width: 100%; flex-wrap: nowrap; align-items: flex-start; }
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 6px; }
.wc-block-checkout .wc-block-components-order-summary-item__total-price { flex: none; margin-left: 8px; font-weight: 800; }

/* Datos del cuento (protagonista, temática, estilo, narración) en filas compactas */
.wc-block-checkout .wc-block-components-product-details { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--cu-suave); }
.wc-block-checkout .wc-block-components-product-details li { display: block; margin: 2px 0; }
.wc-block-checkout .wc-block-components-product-details__name { display: inline; font-weight: 800; color: var(--cu-tinta); }
.wc-block-checkout .wc-block-components-product-details__name::after { content: " "; }
.wc-block-checkout .wc-block-components-product-details__value { display: inline; }

/* Totales */
.wc-block-checkout .wc-block-components-totals-item { font-size: 14px; }
.wc-block-checkout .wc-block-components-totals-footer-item { font-size: 18px; font-weight: 800; padding-top: 6px; }
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 22px; letter-spacing: -.02em; }
.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button { font-size: 14px; font-weight: 700; color: var(--cu-primario); }

@media (max-width: 782px) {
  .wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { padding-left: 16px; padding-right: 16px; }
  .wc-block-checkout .wc-block-components-order-summary-item__image { width: 56px; }
  .wc-block-checkout .wc-block-components-product-name { font-size: 14px; }
  .wc-block-checkout .wc-block-components-order-summary-item__image img { width: 56px; height: 56px; border-radius: 14px; }
  .wc-block-checkout .wc-block-checkout__sidebar { position: static; border-radius: 22px; }
  .wc-block-checkout .wc-block-checkout__main { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-block-checkout .wc-block-components-checkout-place-order-button { transition: none; }
}

/* ── Carrito, finalizar compra y «Pedido recibido»: aire arriba y abajo + títulos con la fuente de la marca ── */
body.woocommerce-cart main, body.woocommerce-checkout main, body.woocommerce-order-received main,
body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main, body.woocommerce-order-received .site-main,
body.woocommerce-cart #content, body.woocommerce-checkout #content {
  padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); box-sizing: border-box; }
body.woocommerce-cart h1, body.woocommerce-checkout h1, body.woocommerce-order-received h1,
body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title, body.woocommerce-order-received .entry-title {
  font-family: var(--cu-fuente-titulo); font-weight: 400; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: 1px;
  color: var(--cu-tinta); margin: 0 0 clamp(20px, 3vw, 32px); }
body.woocommerce-cart h2, body.woocommerce-checkout h2, body.woocommerce-order-received h2,
body.woocommerce-cart h3, body.woocommerce-order-received h3,
.woocommerce-order-details__title, .woocommerce-column__title, .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--cu-fuente-titulo); font-weight: 400; letter-spacing: 1px; color: var(--cu-tinta); }
@media (max-width: 782px) {
  body.woocommerce-cart main, body.woocommerce-checkout main, body.woocommerce-order-received main,
  body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main, body.woocommerce-order-received .site-main {
    padding-top: 32px; padding-bottom: 48px; }
}

/* ── Carrito vacío: tarjeta centrada con llamado a crear el cuento ── */
.cu-vacio { max-width: 560px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px); text-align: center; box-sizing: border-box;
  background: #fff; border: 1px solid var(--cu-borde); border-radius: var(--cu-radio-grande); box-shadow: var(--cu-sombra); }
.cu-vacio__icono { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 0 20px;
  border-radius: 50%; background: var(--cu-cielo); color: var(--cu-primario); }
.cu-vacio__titulo { margin: 0 0 12px; font-family: var(--cu-fuente-titulo); font-weight: 400; letter-spacing: 1px; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; color: var(--cu-tinta); }
.cu-vacio__texto { margin: 0 auto 28px; max-width: 42ch; font: 400 1rem/1.6 var(--cu-fuente); color: var(--cu-suave); }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block { max-width: 100%; }
body.woocommerce-cart .cu-vacio .cu-boton { color: #fff; text-decoration: none; }
/* Carrito vacío clásico: mismo botón de la marca y sin productos sugeridos */
body.woocommerce-cart .cart-empty { text-align: center; font: 600 1.0625rem/1.5 var(--cu-fuente); color: var(--cu-tinta); background: #fff; border: 1px solid var(--cu-borde); border-radius: var(--cu-radio); padding: 28px 20px 12px; margin: 0; }
body.woocommerce-cart .cart-empty::before { display: none; }
body.woocommerce-cart .return-to-shop { text-align: center; background: #fff; border: 1px solid var(--cu-borde); border-top: 0; border-radius: 0 0 var(--cu-radio) var(--cu-radio); margin: 0; padding: 0 20px 28px; }
body.woocommerce-cart .return-to-shop .button { background: var(--cu-acento); color: #fff; border-radius: 999px; padding: 16px 28px; font: 800 15px/1.2 var(--cu-fuente); }
body.woocommerce-cart .cart-empty ~ .cross-sells, body.woocommerce-cart .cart-empty ~ .products { display: none; }

/* ── Ancho máximo común (--cu-ancho = 1280 px, como el header y el footer): título y contenido del carrito, checkout y pedido recibido ── */
body.woocommerce-cart :is(h1, .entry-title, .wp-block-post-title, .wp-block-woocommerce-cart, .woocommerce-cart-form, .cart-collaterals, .woocommerce-notices-wrapper, .cart-empty, .return-to-shop),
body.woocommerce-checkout :is(h1, .entry-title, .wp-block-post-title, .wp-block-woocommerce-checkout, form.woocommerce-checkout, .woocommerce-notices-wrapper),
body.woocommerce-order-received :is(h1, .entry-title, .wp-block-post-title, .woocommerce-order, .woocommerce-notices-wrapper) {
  width: 100%; max-width: var(--cu-ancho, 1280px); margin-left: auto; margin-right: auto; padding-left: var(--cu-margen, 16px); padding-right: var(--cu-margen, 16px); box-sizing: border-box; }
body.woocommerce-cart main :is(.entry-content, .wp-block-post-content, .woocommerce), body.woocommerce-checkout main :is(.entry-content, .wp-block-post-content, .woocommerce), body.woocommerce-order-received main :is(.entry-content, .wp-block-post-content, .woocommerce) {
  max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
