/* =====================================================================
   Carrito y resumen de compra - 16/09/2026
   Las dos páginas son shortcodes clásicos de WooCommerce y no tenían ni una
   regla propia: títulos en Unna, terracota claro a 2,28:1, tablas y campos
   cuadrados con bordes grises y botones rosas con el texto en «Capitalize».
   Se carga solo en carrito y pago, desde el mu-plugin hz-carrito.php.
   ===================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout {
  --hzp-acento: #9c5b38;
  --hzp-acento-hover: #864b2c;
  --hzp-tinta: #160105;
  --hzp-texto: #453437;
  --hzp-apoyo: #6f6264;
  --hzp-crema: #fff3e8;
  --hzp-linea: rgba(22, 1, 5, .12);
  --hzp-radio: 16px;
  --hzp-radio-campo: 12px;
  --hzp-sombra: 0 1px 2px rgba(22, 1, 5, .04), 0 12px 32px -18px rgba(22, 1, 5, .2);
  --hzp-curva: cubic-bezier(.16, 1, .3, 1);
  --hzp-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hzp-cuerpo: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ---------- Titulares ---------- */

body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
  font-family: var(--hzp-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.8rem) !important;
  line-height: 1.1 !important;
  color: var(--hzp-acento) !important;
  margin-bottom: 1.5rem !important;
}

body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cross-sells h2,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-family: var(--hzp-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem) !important;
  color: var(--hzp-acento) !important;
  margin-bottom: 1rem !important;
}

/* Enlaces del contenido: el nombre del producto y los avisos iban a 2,28:1 */
body.woocommerce-cart td.product-name a,
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-checkout .showcoupon,
body.woocommerce-checkout .showlogin {
  color: var(--hzp-acento) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .25em;
}

body.woocommerce-cart td.product-name a:hover,
body.woocommerce-checkout .woocommerce-info a:hover {
  color: var(--hzp-acento-hover) !important;
}

/* ---------- Avisos ---------- */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
  background: var(--hzp-crema) !important;
  border-top: 0 !important;
  border-left: 3px solid var(--hzp-acento) !important;
  border-radius: var(--hzp-radio-campo) !important;
  color: var(--hzp-texto) !important;
  font-family: var(--hzp-cuerpo);
  padding: 1rem 1.25rem !important;
}

/* WooCommerce coloca el icono en posición absoluta: sin sitio reservado se
   monta encima de la primera palabra */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
  padding-left: 3.25rem !important;
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before {
  color: var(--hzp-acento) !important;
  left: 1.25rem !important;
  top: 1.05rem !important;
}

/* ---------- Tablas ---------- */

body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
  border: 1px solid var(--hzp-linea) !important;
  border-radius: var(--hzp-radio) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  font-family: var(--hzp-cuerpo);
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-checkout table.shop_table th {
  font-family: var(--hzp-cuerpo) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase !important;
  color: var(--hzp-apoyo) !important;
  background: var(--hzp-crema) !important;
  border-bottom: 1px solid var(--hzp-linea) !important;
  padding: .9rem 1rem !important;
}

body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--hzp-linea) !important;
  padding: 1.1rem 1rem !important;
  color: var(--hzp-texto) !important;
  font-size: .98rem;
}

body.woocommerce-cart table.shop_table tr:last-child td,
body.woocommerce-checkout table.shop_table tr:last-child td {
  border-bottom: 0 !important;
}

body.woocommerce-cart td.product-thumbnail img {
  width: 68px;
  border-radius: var(--hzp-radio-campo);
}

body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal,
body.woocommerce-checkout td.product-total,
body.woocommerce-cart .cart_totals .amount,
body.woocommerce-checkout .order-total .amount {
  color: var(--hzp-tinta) !important;
  font-weight: 600;
}

/* La equis de quitar producto */
body.woocommerce-cart td.product-remove a.remove {
  color: var(--hzp-apoyo) !important;
  font-weight: 400;
}

body.woocommerce-cart td.product-remove a.remove:hover {
  background: var(--hzp-acento) !important;
  color: #fff !important;
}

/* ---------- Campos ---------- */

body.woocommerce-cart .quantity .qty,
body.woocommerce-cart #coupon_code,
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout .select2-container .select2-selection--single {
  font-family: var(--hzp-cuerpo) !important;
  font-size: 1rem !important;
  color: var(--hzp-tinta) !important;
  background: #fff !important;
  border: 1px solid var(--hzp-linea) !important;
  border-radius: var(--hzp-radio-campo) !important;
  padding: .75rem .9rem !important;
  min-height: 46px;
  box-shadow: none !important;
  transition: border-color .2s var(--hzp-curva), box-shadow .2s var(--hzp-curva);
}

body.woocommerce-checkout .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

body.woocommerce-cart .quantity .qty:focus,
body.woocommerce-cart #coupon_code:focus,
body.woocommerce-checkout form.checkout input.input-text:focus,
body.woocommerce-checkout form.checkout textarea:focus,
body.woocommerce-checkout form.checkout select:focus {
  outline: none;
  border-color: var(--hzp-acento) !important;
  box-shadow: 0 0 0 3px rgba(156, 91, 56, .18) !important;
}

body.woocommerce-checkout form.checkout label {
  font-family: var(--hzp-cuerpo) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  color: var(--hzp-apoyo) !important;
  margin-bottom: .4rem !important;
}

/* El asterisco de obligatorio iba en rojo puro */
body.woocommerce-checkout .required,
body.woocommerce-checkout abbr.required {
  color: var(--hzp-acento) !important;
  border: 0 !important;
  text-decoration: none !important;
}

/* Botones de cantidad (los pone Astra) */
body.woocommerce-cart .quantity button,
body.woocommerce-cart .quantity .minus,
body.woocommerce-cart .quantity .plus {
  border: 1px solid var(--hzp-linea) !important;
  border-radius: var(--hzp-radio-campo) !important;
  background: #fff !important;
  color: var(--hzp-acento) !important;
  min-width: 40px;
}

/* ---------- Botones ---------- */

/* Principal: terracota con texto blanco (5,3:1). Antes: rosa con texto oscuro
   y «capitalize», que escribía «Realizar El Pedido» y «¡Lo Quiero!». */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order,
body.woocommerce-cart .woocommerce button.button.alt,
body.woocommerce-checkout .woocommerce button.button.alt {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-family: var(--hzp-cuerpo) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: #fff !important;
  background: var(--hzp-acento) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .9rem 2rem !important;
  box-shadow: 0 10px 24px -12px rgba(156, 91, 56, .7);
  transition: background-color .3s var(--hzp-curva), transform .3s var(--hzp-curva);
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover {
  background: var(--hzp-acento-hover) !important;
  color: #fff !important;
}

/* Secundarios: seguir comprando, aplicar cupón, actualizar carrito */
body.woocommerce-cart .woocommerce a.button:not(.checkout-button):not(.alt),
body.woocommerce-cart .woocommerce button.button:not(.alt),
body.woocommerce-cart .woocommerce-message a.button {
  font-family: var(--hzp-cuerpo) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--hzp-acento) !important;
  background: transparent !important;
  border: 1px solid var(--hzp-acento) !important;
  border-radius: 999px !important;
  padding: .7rem 1.4rem !important;
  min-height: 44px;
  transition: background-color .3s var(--hzp-curva), color .3s var(--hzp-curva);
}

body.woocommerce-cart .woocommerce a.button:not(.checkout-button):not(.alt):hover,
body.woocommerce-cart .woocommerce button.button:not(.alt):hover {
  background: var(--hzp-acento) !important;
  color: #fff !important;
}

body.woocommerce-cart .woocommerce button.button:disabled,
body.woocommerce-cart .woocommerce button.button:disabled[disabled] {
  opacity: .45 !important;
  background: transparent !important;
  color: var(--hzp-apoyo) !important;
  border-color: var(--hzp-linea) !important;
}

/* ---------- Cajas de totales y de pedido ---------- */

body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review {
  background: #fff;
  border: 1px solid var(--hzp-linea);
  border-radius: var(--hzp-radio);
  box-shadow: var(--hzp-sombra);
  padding: 1.5rem !important;
}

body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-checkout #order_review table.shop_table {
  border: 0 !important;
  border-radius: 0 !important;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table th {
  background: transparent !important;
  text-transform: none !important;
  font-size: .95rem !important;
  color: var(--hzp-texto) !important;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-checkout #order_review .order-total td {
  font-size: 1.05rem !important;
  color: var(--hzp-tinta) !important;
  font-weight: 600 !important;
}

/* ---------- Formas de pago ---------- */

body.woocommerce-checkout ul.payment_methods {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout ul.payment_methods li {
  border-bottom: 1px solid var(--hzp-linea);
  padding: .9rem 0;
  list-style: none;
}

body.woocommerce-checkout ul.payment_methods li:last-child {
  border-bottom: 0;
}

body.woocommerce-checkout .wc_payment_method label {
  font-family: var(--hzp-cuerpo) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  color: var(--hzp-tinta) !important;
  margin-bottom: 0 !important;
}

body.woocommerce-checkout .payment_box {
  background: var(--hzp-crema) !important;
  border-radius: var(--hzp-radio-campo) !important;
  color: var(--hzp-texto) !important;
  font-size: .92rem;
}

body.woocommerce-checkout .payment_box::before {
  border-bottom-color: var(--hzp-crema) !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: .88rem;
  color: var(--hzp-apoyo);
}

/* El enlace a las condiciones seguía en terracota claro (2,3:1) */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-checkout .woocommerce-privacy-policy-text a,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--hzp-acento) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart *,
  body.woocommerce-checkout * {
    transition: none !important;
  }
}

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
  /* En móvil la tabla se apila en filas «etiqueta: valor» */
  body.woocommerce-cart table.shop_table td::before {
    font-family: var(--hzp-cuerpo) !important;
    font-weight: 600 !important;
    color: var(--hzp-apoyo) !important;
  }

  body.woocommerce-cart table.shop_table td {
    padding: .85rem 1rem !important;
  }

  body.woocommerce-cart .cart_totals,
  body.woocommerce-checkout #order_review {
    padding: 1.25rem !important;
  }

  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  body.woocommerce-checkout #place_order,
  body.woocommerce-cart .woocommerce button.button:not(.alt) {
    width: 100%;
  }

  body.woocommerce-cart #coupon_code {
    width: 100% !important;
    margin-bottom: .6rem;
  }
}

/* ---------- El botón principal, a la misma anchura que los de PayPal ---------- */

/* Los botones de PayPal ocupan todo el ancho de la caja (526 px) y «¡Lo quiero!»
   se quedaba en 145 px pegado a la izquierda: descuadraba con el resto. */
body.woocommerce-cart .wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  margin: 0 !important;
}

body.woocommerce-checkout #place_order {
  width: 100%;
}

/* ---------- «Tu pedido»: una sola tarjeta, sin costura ---------- */

/* Astra pinta un borde gris de 2 px encima del título y otro debajo de la caja.
   Con la tarjeta redondeada quedaban dos marcos sueltos y sin continuidad.
   Se unen: el título cierra por arriba y la caja por abajo. */
body.woocommerce-checkout #order_review_heading {
  background: #fff !important;
  border: 1px solid var(--hzp-linea) !important;
  border-bottom: 0 !important;
  border-radius: var(--hzp-radio) var(--hzp-radio) 0 0 !important;
  margin: 0 !important;
  padding: 1.5rem 1.5rem .5rem !important;
}

body.woocommerce-checkout #order_review {
  border: 1px solid var(--hzp-linea) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--hzp-radio) var(--hzp-radio) !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 0 1.5rem 1.5rem !important;
}

/* La caja de totales del carrito es un solo bloque: mismo acabado, sin sombra */
body.woocommerce-cart .cart_totals {
  box-shadow: none !important;
}