/* ═══════════════════════════════════════════════════════════════════
   PAGO — carrito y finalizar compra

   WooCommerce arma el checkout con flotantes y anchos en porcentaje de
   los suyos, y el resultado era el de cualquier tienda de WordPress: los
   datos de facturacion empujados a la mitad derecha, media pagina en
   blanco a la izquierda y el resumen del pedido perdido hasta el fondo.

   Aca se rehace la pagina con una reticula explicita: el formulario a la
   izquierda y el resumen fijo a la derecha, que es donde el comprador lo
   busca para revisar antes de pagar. Se mantiene el lenguaje del
   catalogo: filete visible, esquina de 2px, rotulo monoespaciado en
   versalitas y el azul de la marca reservado a lo que se puede pulsar.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reticula general ──────────────────────────────────────────── */
.woocommerce-checkout form.checkout.woocommerce-checkout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 23rem;
  /* Dos filas explicitas. Sin esto la colocacion automatica manda el
     resumen a una segunda fila que empieza donde termina el formulario,
     y el total aparecia al fondo con media columna en blanco encima. */
  grid-template-rows:auto 1fr;
  gap:0 var(--s6);
}
.woocommerce-checkout form.checkout #customer_details{ grid-column:1; grid-row:1 / 3; }
.woocommerce-checkout form.checkout #order_review_heading{ grid-column:2; grid-row:1; margin:0; }
.woocommerce-checkout form.checkout #order_review{ grid-column:2; grid-row:2; align-self:start; }

/* El resumen acompana al comprador mientras llena el formulario, que es
   largo: son catorce campos y sin esto el total queda fuera de pantalla. */
@media(min-width:1001px){
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{ position:sticky; }
  .woocommerce-checkout form.checkout #order_review_heading{ top:var(--s5); z-index:2; }
  .woocommerce-checkout form.checkout #order_review{ top:calc(var(--s5) + 2.6rem); }
}
@media(max-width:1000px){
  .woocommerce-checkout form.checkout.woocommerce-checkout{ grid-template-columns:1fr; grid-template-rows:none; }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{ grid-column:1; grid-row:auto; }
  .woocommerce-checkout form.checkout #order_review_heading{ margin-top:var(--s6); }
}

/* Las dos columnas internas de WooCommerce se apilan: facturacion y luego
   las notas del pedido. Antes competian por el ancho y ninguna cabia. */
.woocommerce-checkout #customer_details.col2-set{ display:block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  width:100%; float:none; max-width:none; padding:0;
}
.woocommerce-checkout #customer_details .col-2{ margin-top:var(--s5); }

/* ── Bloques del formulario ────────────────────────────────────── */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  border:1px solid var(--rule);
  border-top:2px solid var(--ink);
  background:var(--paper);
  padding:var(--s5);
}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3{
  margin:0 0 var(--s4);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
  font-size:var(--t-md);
  letter-spacing:-.01em;
}

/* ── Campos: dos por fila, sin flotantes ───────────────────────── */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4) var(--s4);
}
.woocommerce-checkout #customer_details .form-row{
  float:none; width:auto; padding:0; margin:0;
}
.woocommerce-checkout #customer_details .form-row-wide,
.woocommerce-checkout #customer_details #billing_address_1_field,
.woocommerce-checkout #customer_details #billing_address_2_field,
.woocommerce-checkout #customer_details .notes{ grid-column:1 / -1; }
@media(max-width:560px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{ grid-template-columns:1fr; }
  .woocommerce-checkout #customer_details .form-row{ grid-column:1 / -1; }
}

/* Rotulo: el mismo monoespaciado en versalitas de las fichas tecnicas */
.woocommerce-checkout #customer_details .form-row label{
  font-family:var(--f-mono);
  font-size:var(--t-3xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.35rem;
}
.woocommerce-checkout #customer_details .form-row .required{
  color:var(--volt); text-decoration:none; border:0;
}
.woocommerce-checkout #customer_details .form-row .optional{
  color:var(--ink-3); font-weight:400;
}

.woocommerce-checkout #customer_details .form-row input.input-text,
.woocommerce-checkout #customer_details .form-row textarea,
.woocommerce-checkout #customer_details .form-row select{
  width:100%;
  border:1px solid var(--rule-2);
  border-radius:var(--radius);
  background:var(--paper);
  padding:.7rem .8rem;
  font-family:var(--f-ui);
  font-size:var(--t-sm);
  color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.woocommerce-checkout #customer_details .form-row textarea{ min-height:6.5rem; resize:vertical; }
.woocommerce-checkout #customer_details .form-row input.input-text::placeholder,
.woocommerce-checkout #customer_details .form-row textarea::placeholder{
  color:var(--ink-3); opacity:1;
}
.woocommerce-checkout #customer_details .form-row input.input-text:focus,
.woocommerce-checkout #customer_details .form-row textarea:focus,
.woocommerce-checkout #customer_details .form-row select:focus{
  border-color:var(--volt);
  outline:none;
  box-shadow:0 0 0 3px var(--volt-wash);
}

/* La flecha propia del select: la del navegador rompe la linea del resto */
.woocommerce-checkout #customer_details .form-row select,
.woocommerce-checkout #customer_details .form-row select.country_select,
.woocommerce-checkout #customer_details .form-row select.state_select{
  /* Pais y departamento los pinta WooCommerce de gris y rompian la linea
     con los demas campos, que van sobre papel. */
  background-color:var(--paper);
  appearance:none;
  padding-right:2.2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234a5568' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:.7rem;
}

/* Campo con error: el aviso tiene que verse sin leer el texto */
.woocommerce-checkout #customer_details .woocommerce-invalid input.input-text,
.woocommerce-checkout #customer_details .woocommerce-invalid select{ border-color:var(--out); }
.woocommerce-checkout #customer_details .woocommerce-validated input.input-text{ border-color:var(--rule-2); }

/* ── Resumen del pedido ────────────────────────────────────────── */
.woocommerce-checkout #order_review_heading{
  font-size:var(--t-md);
  padding:var(--s3) var(--s4);
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-bottom:0;
}
.woocommerce-checkout #order_review{
  border:1px solid var(--rule);
  background:var(--paper);
}
.woocommerce-checkout #order_review .shop_table{
  width:100%;
  border:0;
  border-collapse:collapse;
  margin:0;
  font-size:var(--t-sm);
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td{
  border:0;
  border-bottom:1px solid var(--rule);
  padding:var(--s3) var(--s4);
  text-align:left;
  vertical-align:top;
}
.woocommerce-checkout #order_review .shop_table thead th{
  font-family:var(--f-mono);
  font-size:var(--t-3xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:var(--paper-2);
  padding-top:var(--s2); padding-bottom:var(--s2);
}
.woocommerce-checkout #order_review .shop_table td,
.woocommerce-checkout #order_review .shop_table th:last-child,
.woocommerce-checkout #order_review .shop_table td:last-child{ text-align:right; }
.woocommerce-checkout #order_review .shop_table .product-name{ text-align:left; font-weight:500; color:var(--ink); }
.woocommerce-checkout #order_review .shop_table .product-quantity{
  font-family:var(--f-mono); font-weight:600; color:var(--volt-ink);
}
.woocommerce-checkout #order_review .shop_table .cart-subtotal th,
.woocommerce-checkout #order_review .shop_table .cart-subtotal td,
.woocommerce-checkout #order_review .shop_table .tax-rate th,
.woocommerce-checkout #order_review .shop_table .tax-rate td{
  font-family:var(--f-mono);
  font-size:var(--t-3xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:500;
}
.woocommerce-checkout #order_review .shop_table .order-total th,
.woocommerce-checkout #order_review .shop_table .order-total td{
  border-top:2px solid var(--ink);
  border-bottom:0;
  padding-top:var(--s4); padding-bottom:var(--s4);
  font-size:var(--t-md);
  font-weight:700;
  color:var(--ink);
}
.woocommerce-checkout #order_review .shop_table .order-total td{ color:var(--volt-ink); }
.woocommerce-checkout #order_review .shop_table .amount,
.woocommerce-checkout #order_review .shop_table bdi{ font-variant-numeric:tabular-nums; }

/* ── Medios de pago ────────────────────────────────────────────── */
.woocommerce-checkout #payment{
  background:var(--paper-2);
  border:0;
  border-top:1px solid var(--rule);
  border-radius:0;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--rule);
  padding:var(--s4);
  margin:0;
  list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{ margin:0; }
.woocommerce-checkout #payment ul.payment_methods label{
  font-family:var(--f-mono);
  font-size:var(--t-3xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
/* La caja lavanda con pico que trae WooCommerce es lo que mas delata a
   la plantilla: se cambia por una nota con filete, como el resto del sitio. */
.woocommerce-checkout #payment div.payment_box{
  background:var(--paper);
  border:1px solid var(--rule);
  border-left:3px solid var(--volt);
  border-radius:0;
  margin:var(--s3) 0 0;
  padding:var(--s3) var(--s4);
  color:var(--ink-2);
  font-size:var(--t-xs);
  line-height:1.55;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment div.form-row.place-order{ padding:var(--s4); margin:0; }
.woocommerce-checkout .woocommerce-privacy-policy-text{
  padding:var(--s4) var(--s4) 0;
  font-size:var(--t-2xs);
  line-height:1.55;
  color:var(--ink-3);
}
.woocommerce-checkout .woocommerce-privacy-policy-text p{ margin:0; }

/* ── Boton de pagar ────────────────────────────────────────────── */
.woocommerce-checkout #payment #place_order{
  display:block;
  width:100%;
  border:0;
  border-radius:var(--radius);
  background:var(--volt);
  color:var(--paper);
  padding:.95rem 1rem;
  font-family:var(--f-mono);
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .12s ease;
}
.woocommerce-checkout #payment #place_order:hover{ background:var(--volt-ink); }
.woocommerce-checkout #payment #place_order:focus-visible{
  outline:2px solid var(--volt-ink); outline-offset:2px;
}

/* ── Cupon ─────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--paper-2);
  border-left-color:var(--rule-2);
  font-size:var(--t-xs);
  color:var(--ink-2);
  padding:var(--s2) var(--s4);
  margin-bottom:var(--s5);
}
.woocommerce-checkout form.checkout_coupon{ margin-bottom:var(--s5); }

/* ── Pais y departamento ───────────────────────────────────────────
   WooCommerce esconde esos dos <select> y monta select2 encima, asi que
   las reglas de arriba no los alcanzaban: quedaban grises y con la flecha
   del navegador, desalineados con el resto de los campos. Se le da a la
   caja de select2 la misma piel de los demas. */
.woocommerce-checkout #customer_details .select2-container--default .select2-selection--single{
  height:auto;
  border:1px solid var(--rule-2);
  border-radius:var(--radius);
  background:var(--paper);
  padding:.7rem .8rem;
}
.woocommerce-checkout #customer_details .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0; line-height:1.3;
  font-family:var(--f-ui); font-size:var(--t-sm); color:var(--ink);
}
.woocommerce-checkout #customer_details .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--ink-3); }
.woocommerce-checkout #customer_details .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%; top:0; right:.65rem; width:1rem;
}
.woocommerce-checkout #customer_details .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--ink-3) transparent transparent; border-width:5px 4px 0;
}
.woocommerce-checkout #customer_details .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-wash);
}
.woocommerce-checkout #customer_details .select2-container--default.select2-container--open .select2-selection__arrow b{
  border-color:transparent transparent var(--ink-3); border-width:0 4px 5px;
}
.select2-dropdown{ border-color:var(--volt); border-radius:var(--radius); }
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid var(--rule-2); border-radius:var(--radius); padding:.45rem .6rem; font-size:var(--t-sm);
}
.select2-container--default .select2-results__option{ font-size:var(--t-sm); padding:.45rem .8rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--volt); color:var(--paper); }

/* ── La lista de medios de pago ────────────────────────────────────
   WooCommerce pone el radio y su etiqueta como hermanos sueltos, asi que
   caian en renglones distintos: el circulito arriba y el nombre debajo.
   Con una reticula de dos columnas quedan en la misma linea y la nota del
   medio elegido ocupa el ancho completo abajo. */
.woocommerce-checkout #payment ul.payment_methods li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.15rem .6rem;
  align-items:center;
  padding:var(--s3) 0;
  border-bottom:1px solid var(--rule);
}
.woocommerce-checkout #payment ul.payment_methods li:first-child{ padding-top:0; }
.woocommerce-checkout #payment ul.payment_methods li:last-child{ padding-bottom:0; border-bottom:0; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{
  width:1.05rem; height:1.05rem; margin:0; accent-color:var(--volt); cursor:pointer;
}
.woocommerce-checkout #payment ul.payment_methods li label{
  margin:0; cursor:pointer; line-height:1.3;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box{
  grid-column:1 / -1; margin-top:var(--s2);
}