/* =========================================================================
   SUNQU — Checkout
   ========================================================================= */
.sq-checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.sq-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  font-size: 13px;
}
.sq-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sq-muted);
  list-style: none;
}
.sq-steps li + li::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--sq-line);
  display: block;
}
.sq-steps li b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eae3d9;
  color: var(--sq-muted);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.sq-steps li.is-active {
  color: var(--sq-navy);
  font-weight: 600;
}
.sq-steps li.is-active b {
  background: var(--sq-gold);
  color: var(--sq-white);
}
.sq-fieldset {
  border: 0;
  margin: 0 0 34px;
  padding: 0;
}
.sq-fieldset legend {
  font-family: var(--sq-font-title);
  font-size: 19px;
  color: var(--sq-navy);
  margin-bottom: 18px;
  padding: 0;
}
.sq-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.sq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sq-field--full {
  grid-column: 1 / -1;
}
.sq-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sq-navy);
  letter-spacing: 0.01em;
}
.sq-field label em {
  color: var(--sq-gold-text);
  font-style: normal;
}
.sq-field textarea.sq-input {
  min-height: 96px;
  resize: vertical;
}
.sq-field select.sq-input {
  appearance: none;
  background: var(--sq-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%237c7671' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;
  background-size: 11px;
  padding-right: 40px;
  cursor: pointer;
}
.sq-radios {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--sq-line);
}
.sq-radio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.sq-radio + .sq-radio {
  border-top: 1px solid var(--sq-line);
}
.sq-radio:hover {
  background: var(--sq-cream);
}
.sq-radio input {
  margin-top: 3px;
  accent-color: var(--sq-gold);
}
.sq-radio.is-active {
  background: var(--sq-gold-pale);
}
.sq-radio__body strong {
  display: block;
  color: var(--sq-navy);
  font-size: 15px;
  margin-bottom: 3px;
}
.sq-radio__body span {
  font-size: 13px;
  color: var(--sq-muted);
  line-height: 1.5;
}
.sq-radio__price {
  margin-left: auto;
  font-weight: 600;
  color: var(--sq-navy);
  white-space: nowrap;
  font-size: 14px;
}
.sq-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--sq-body);
  line-height: 1.55;
  cursor: pointer;
}
.sq-check input {
  margin-top: 3px;
  accent-color: var(--sq-gold);
}
.sq-mini {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.sq-mini li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--sq-line);
  align-items: center;
}
.sq-mini img {
  width: 54px;
  height: 66px;
  object-fit: cover;
  background: var(--sq-white);
}
.sq-mini__name {
  font-size: 14px;
  line-height: 1.35;
  color: var(--sq-navy);
}
.sq-mini__qty {
  font-size: 12.5px;
  color: var(--sq-muted);
}
.sq-mini__price {
  margin-left: auto;
  font-weight: 600;
  font-size: 14px;
  color: var(--sq-navy);
  white-space: nowrap;
}
/* Confirmación */
.sq-thanks {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding: 20px 0 10px;
}
.sq-thanks__icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--sq-gold-pale);
  color: var(--sq-gold-text);
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  font-size: 34px;
  line-height: 1;
}
.sq-order-box {
  border: 1px solid var(--sq-line);
  background: var(--sq-cream);
  padding: 26px 28px;
  margin-top: 34px;
  text-align: left;
}
.sq-order-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.sq-order-meta div span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sq-muted);
  margin-bottom: 4px;
}
.sq-order-meta div strong {
  color: var(--sq-navy);
  font-size: 15px;
}
@media (max-width: 1024px) {
  .sq-checkout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sq-order-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .sq-fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .sq-order-meta {
    grid-template-columns: 1fr;
  }
}
/* =========================================================================
   Checkout real de WooCommerce ([woocommerce_checkout], shortcode clásico)
   No se sobrescriben form-checkout.php / form-billing.php / form-shipping.php
   / review-order.php (son justo los que el checkout.js nativo usa para
   refrescar el resumen por AJAX) — aquí solo se re-pintan por CSS las
   clases que WooCommerce ya genera. La clase sq-field/sq-input SÍ se añade
   a cada campo vía el filtro woocommerce_form_field_args (inc/woocommerce.php),
   así que .sq-field / .sq-input de abajo ya definidos en 04-components.less
   se aplican tal cual sin duplicar reglas; aquí solo lo que es exclusivo
   del layout de checkout.
   ========================================================================= */
/* OJO: "woocommerce-checkout" NO identifica solo al formulario — WooCommerce
   la añade también al <body> de la página de finalizar compra
   (wc_body_class(), includes/wc-template-functions.php). Usarla sin acotar
   convertía el <body> entero en un grid 1fr/380px: el <main> caía en la
   segunda pista y toda la página se veía dentro de una columna de 380px a la
   derecha, con el header y el footer a la izquierda. Por eso el selector va
   siempre acotado al <form class="checkout woocommerce-checkout"> — igual que
   `form.checkout .form-row` más abajo. */
form.checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
/* Sin grid-column/grid-row explícitos a propósito: los hijos del formulario
   se colocan por orden de documento (#customer_details → .sq-summary), y así
   el aviso de errores que checkout.js inserta con .prepend() al fallar la
   validación cabe solo con decirle que ocupe toda la fila — con filas fijas
   habría que renumerarlo todo, o quedaría una fila fantasma de 48px cuando
   no hay errores (que es lo normal). */
form.checkout > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
}
/* Los campos del checkout llevan select2, que mide muy ancho: sin min-width
   el mínimo automático de un ítem de grid es su contenido y la columna se
   desborda en vez de encogerse. */
#customer_details {
  min-width: 0;
}
/* El resumen (título + #order_review) va envuelto en .sq-summary — el mismo
   componente que ya usa el carrito (07-cart.less: fondo crema, borde,
   padding 28px y sticky), con el <h3> DENTRO de la caja igual que en el
   mockup. El envoltorio lo añaden dos hooks nativos en inc/woocommerce.php,
   no una plantilla sobrescrita, así que el refresco AJAX de review-order.php
   sigue intacto: solo reemplaza fragmentos de dentro de #order_review. */
form.checkout > .sq-summary {
  min-width: 0;
}
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  margin: 0 0 34px;
}
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3,
#ship-to-different-address {
  font-family: var(--sq-font-title);
  font-weight: 400;
  font-size: 19px;
  color: var(--sq-navy);
  margin: 0 0 18px;
}
#ship-to-different-address {
  cursor: pointer;
}
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
/* form-row es la clase real de WooCommerce para cada <p> de campo; sq-field
   (añadida por el filtro) reutiliza el mismo look que el resto del tema. */
.sq-field,
form.checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}
.form-row-wide {
  grid-column: 1 / -1;
}
/* "Notas del pedido" es el único campo al que WooCommerce no le pone
   form-row-wide (su clase es solo "notes"), así que se quedaba a media fila
   mientras el mockup lo tiene a ancho completo (.sq-field--full). */
.form-row.notes {
  grid-column: 1 / -1;
}
/* Campos que van emparejados en dos columnas, como en el mockup
   (checkout.html: nombre|apellido, departamento|ciudad, correo|celular).
   Nombre y apellidos ya lo hacen solos (WooCommerce les pone
   form-row-first/-last); al resto les pone form-row-wide y la rejilla de dos
   columnas de arriba quedaba inerte.

   Va por CSS y no por el filtro woocommerce_checkout_fields a propósito:
   address-i18n.js reescribe estas clases en el navegador al aplicar el locale
   del país (`field.removeClass('form-row-first form-row-last form-row-wide')`
   + addClass del locale), así que cualquier cambio hecho en PHP se pierde en
   cuanto carga el JS. La especificidad de un ID sí gana a .form-row-wide
   pase lo que pase. Como el orden de los campos es país, dirección 1 y 2
   (anchos), ciudad, departamento, código postal (ancho), teléfono y correo,
   el emparejamiento sale solo del auto-placement de la rejilla. */
#billing_city_field,
#billing_state_field,
#billing_phone_field,
#billing_email_field,
#shipping_city_field,
#shipping_state_field {
  grid-column: auto;
}
.form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sq-navy);
  letter-spacing: 0.01em;
}
.form-row label .required {
  color: var(--sq-gold-text);
  text-decoration: none;
}
.form-row label .optional {
  color: var(--sq-muted);
  font-weight: 400;
}
.woocommerce-input-wrapper {
  display: block;
}
textarea.sq-input {
  min-height: 96px;
  resize: vertical;
}
select.sq-input {
  appearance: none;
  background: var(--sq-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%237c7671' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;
  background-size: 11px;
  padding-right: 40px;
  cursor: pointer;
}
/* Checkboxes nativos (crear cuenta / enviar a otra dirección / notas). */
.woocommerce-form__label-for-checkbox,
.create-account label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--sq-body);
  cursor: pointer;
  font-weight: 400;
}
.woocommerce-form__input-checkbox {
  margin-top: 3px;
  accent-color: var(--sq-gold);
}
/* Términos y condiciones (woocommerce_checkout_terms_and_conditions()). */
.woocommerce-terms-and-conditions-wrapper {
  margin: 20px 0;
}
.woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
}
.woocommerce-terms-and-conditions-wrapper label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--sq-body);
  line-height: 1.55;
  cursor: pointer;
  font-weight: 400;
}
.woocommerce-terms-and-conditions-wrapper a {
  color: var(--sq-gold-text);
}
/* Aviso "¿Tienes un cupón?" sobre el resumen del pedido. */
.woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--sq-white);
  border: 1px solid var(--sq-line);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--sq-body);
  margin: 0 0 20px;
}
.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--sq-gold-text);
  font-weight: 600;
}
.checkout_coupon.woocommerce-form-coupon {
  margin: 0 0 20px;
  padding: 18px;
  background: var(--sq-white);
  border: 1px solid var(--sq-line);
}
.checkout_coupon .form-row {
  margin-bottom: 10px;
}
/* Resumen del pedido: tabla real (review-order.php), sin tocar su markup. */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px dashed var(--sq-line);
  font-size: 15px;
  color: var(--sq-body);
  font-weight: 400;
}
.woocommerce-checkout-review-order-table td {
  text-align: right;
}
.woocommerce-checkout-review-order-table thead th {
  /* Cabecera de tabla en mayúsculas = etiqueta: Jost (§02 guía). */
  font-family: var(--sq-font-text);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sq-muted);
  border-bottom: 1px solid var(--sq-line);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-bottom: 0;
  padding-top: 16px;
  font-family: var(--sq-font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--sq-navy);
}
.woocommerce-checkout-review-order-table tfoot .order-total td {
  color: var(--sq-gold-text);
  font-size: 22px;
}
/* Métodos de envío (comparten markup con el resumen del carrito). */
ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sq-line);
}
ul.woocommerce-shipping-methods li {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--sq-body);
  border-top: 1px solid var(--sq-line);
}
ul.woocommerce-shipping-methods li:first-child {
  border-top: 0;
}
ul.woocommerce-shipping-methods input[type='radio'] {
  margin-right: 10px;
  accent-color: var(--sq-gold);
}
ul.woocommerce-shipping-methods label {
  cursor: pointer;
}
/* Métodos de pago (payment.php), como tarjetas sq-radio. */
.wc_payment_methods {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  border: 1px solid var(--sq-line);
}
.wc_payment_method {
  border-top: 1px solid var(--sq-line);
}
.wc_payment_method:first-child {
  border-top: 0;
}
.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--sq-navy);
}
.wc_payment_method input[type='radio'] {
  accent-color: var(--sq-gold);
}
.wc_payment_method .payment_box {
  padding: 0 18px 18px 46px;
  font-size: 13px;
  color: var(--sq-muted);
  line-height: 1.55;
}
.wc_payment_method .payment_box p:first-child {
  margin-top: 0;
}
/* Botón real "Realizar el pedido" (#place_order). */
.form-row.place-order {
  margin-top: 20px;
}
/* Fondo dorado sólido = texto blanco (decisión de marca, 03-buttons.less). */
#place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 30px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: var(--sq-gold);
  color: var(--sq-white);
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.25s;
}
#place_order:hover {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
}
/* select2 (país/departamento): solo lo esencial para que no desentone. */
.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--single {
  height: 46px;
  border: 1px solid var(--sq-line);
  border-radius: 0;
  padding: 6px 15px;
}
.select2-container .select2-selection__rendered {
  line-height: 32px;
  padding-left: 0;
  color: var(--sq-ink);
}
.select2-container .select2-selection__arrow {
  height: 44px;
}
@media (max-width: 1024px) {
  /* Una sola columna: los datos primero y el resumen debajo. El
	   `position: static` del resumen ya lo aplica .sq-summary en 07-cart.less
	   a este mismo breakpoint, no hace falta repetirlo aquí. */
  form.checkout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 768px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}