/* ==========================================================================
   Kevstore — pegamento para el marcado propio de WooCommerce
   ==========================================================================

   assets/css/style.css es el CSS APROBADO del prototipo y NO se toca: ahí
   viven .campo, .campos, .pago, .resumen, .btn… Este archivo no inventa
   diseño nuevo, solo amarra el HTML que WooCommerce genera por su cuenta
   —y que el prototipo nunca tuvo— a esas clases que ya existen.

   Los estilos de WooCommerce están apagados a propósito (ver
   kevstore_sin_css_de_woo en functions.php), así que sin este archivo su
   marcado sale crudo: eso es lo que hacía que el checkout se viera, con
   todas sus letras, horrible.

   Regla de oro para quien venga después: si algo se puede resolver poniendo
   una clase del prototipo en la plantilla, se hace allá. Aquí solo entra lo
   que WooCommerce imprime y no deja cambiar.
   ========================================================================== */


/* ─── 1 · Campos de formulario ──────────────────────────────────────────
   Woo pinta cada campo como <p class="form-row"> y mete el control dentro
   de un <span class="woocommerce-input-wrapper">. Ese <span> era el que
   dejaba las cajas de texto con el ancho de fábrica del navegador (unos
   150px) en vez de llenar su columna: por eso el formulario se veía como
   una lista de cajitas chiquitas pegadas a la izquierda. */
p.campo,
.campo p {
  margin: 0;
}
.campo .woocommerce-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  box-sizing: border-box;
}
/* Las casillas y los radios no: esos llevan su tamaño puesto a mano. */
.campo input[type="checkbox"],
.campo input[type="radio"] {
  width: auto;
}

/* El asterisco de obligatorio. Woo lo mete como <abbr class="required"> al
   pintar, y address-i18n.js lo vuelve a poner como <span class="required">
   cuando cambias de país; hay que cubrir los dos. El prototipo lo tiene
   rojo, con un <i>. */
.campo label .required,
.campo label abbr.required {
  color: var(--rojo);
  text-decoration: none;
  border: 0;
  font-style: normal;
}
.campo label .optional {
  color: var(--gris);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Campo con error: el borde se pone rojo, que es lo único que el cliente
   alcanza a ver sin leer el aviso de arriba. */
.campo.woocommerce-invalid input,
.campo.woocommerce-invalid select,
.campo.woocommerce-invalid textarea,
.campo.woocommerce-invalid .select2-selection {
  border-color: #b32d2e;
}

/* El Estado. En el prototipo es una caja de texto ("Sinaloa"); en la tienda
   de verdad tiene que ser una lista, porque WooCommerce guarda la CLAVE del
   estado y con eso calcula el envío. Un <select> mide 2px más que un
   <input>, y esos 2px empujaban hacia abajo todo lo que venía después:
   envío, pago, botón y pie quedaban desfasados contra el prototipo. Se los
   quitamos solo a este campo. El País sí es <select> en los dos, así que ese
   no se toca. */
.campo select.state_select {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* País y Estado: Woo los reemplaza con select2 (selectWoo), que trae su
   propia caja. Se le da la misma pinta que a `.campo select` del prototipo
   para que la fila no desentone. */
.campo .select2-container {
  width: 100% !important;
}
.campo .select2-container--default .select2-selection--single {
  height: auto;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #fff;
}
.campo .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 13px;
  line-height: 1.2;
  font-size: 14px;
  color: var(--negro);
}
.campo .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
}
.campo .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--negro);
}


/* ─── 2 · Métodos de pago ───────────────────────────────────────────────
   La lista sigue siendo <ul><li> porque el checador funcional busca
   `.wc_payment_methods li` y varias pasarelas cuelgan de ese marcado. Se le
   quitan las viñetas y el sangrado: cada <li> ya es una tarjeta `.pago`. */
.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wc_payment_methods .pago > label {
  margin: 0;
}
/* La descripción de la pasarela la abre y la cierra el JavaScript de Woo
   con display en línea, así que solo hay que quitarle los márgenes de <p>. */
.pago .payment_box p {
  margin: 0;
}
.pago .payment_box p + p {
  margin-top: 8px;
}


/* ─── 3 · Botones ───────────────────────────────────────────────────────
   `.btn` del prototipo se escribió para <a> y <span>. En un <button> el
   navegador impone su propia tipografía; sin esto, "Pagar $5,194" salía en
   la fuente del sistema. */
button.btn,
input.btn {
  font-family: inherit;
}
/* La altura de renglón va SOLO en el botón de pagar, no en todos los
   <button class="btn">. El navegador le pone `line-height:normal` a los
   botones y el prototipo usa un <span>, que hereda la del cuerpo: son 4px de
   diferencia. Se corrige aquí y no en la regla de arriba para no moverle la
   altura al botón de agregar al carrito ni a los del carrito, que son de
   otras pantallas y ya están medidos. */
#place_order.btn {
  line-height: inherit;
}
.form-row.place-order {
  margin: 0;
}


/* ─── 4 · Avisos ────────────────────────────────────────────────────────
   Los errores de validación, "cupón aplicado", "producto agregado"… Woo los
   imprime como <ul class="woocommerce-error"> sin ningún estilo propio una
   vez apagado su CSS. Se les da la misma forma que a `.aviso-doc`. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--hueso);
  border-left: 4px solid var(--gris);
}
.woocommerce-error {
  background: #fdecec;
  border-color: #b32d2e;
  color: #7a1c1d;
}
.woocommerce-message {
  background: #eaf7f0;
  border-color: var(--verde);
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin: 0 0 4px;
}
.woocommerce-error li:last-child,
.woocommerce-message li:last-child,
.woocommerce-info li:last-child {
  margin: 0;
}
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
  border-bottom: 1px solid;
  font-weight: 700;
}

/* Cuando el checkout falla por AJAX, checkout.js NO usa el hueco de arriba:
   mete el aviso al principio de <form>, o sea fuera de la rejilla `.wrap`.
   Aquí se le devuelve el ancho y el centrado de la página para que no se
   pegue al borde izquierdo de la pantalla. */
.woocommerce-NoticeGroup {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px 0;
}

/* ─────────────────────────────────────────────────────────────────
   "Solo con existencia" del lateral del catálogo
   ─────────────────────────────────────────────────────────────────
   El prototipo lo dibuja como <label class="f-check"><input type="checkbox">,
   pero aquí quien filtra es un enlace GET (así funciona sin JavaScript, igual
   que los demás filtros) y la casilla solo enseña el estado. Sin esto, un clic
   sobre la casilla no llega al enlace y el filtro parece no responder. */
.f-check input {
  pointer-events: none;
}
.f-check.on {
  color: var(--negro);
  font-weight: 700;
}

/* Los chips de talla.
   En el prototipo son <button>; aquí son enlaces, porque el filtro trabaja por
   GET y así sigue funcionando sin JavaScript igual que los demás. Pero un
   <button> trae `line-height:normal` del navegador y un <a> hereda el 1.5 del
   cuerpo: 4.4px más de alto cada chip. Con las tallas en dos renglones eso
   corría 9px hacia abajo TODO lo que va debajo — la disponibilidad, la rejilla
   y el pie entero. */
.f-tallas .chip-f {
  line-height: normal;
  text-align: center;
}