/*
 * Compatibilidad del tema oscuro con las plantillas por defecto de
 * WooCommerce que este tema NO sustituye (carrito, checkout, "Mi cuenta").
 * El diseño original (prototipo HTML) no incluía estas pantallas, así que
 * aquí solo se adaptan los colores base para que sean legibles sobre el
 * fondo oscuro del tema, sin rediseñarlas por completo.
 */

.woocommerce-cart .page-inner,
.woocommerce-checkout .page-inner,
.woocommerce-account .page-inner {
  padding-top: 7rem;
}

.woocommerce table.shop_table {
  border-color: var(--border);
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--border);
  color: var(--foreground);
}

.woocommerce .quantity input.qty,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: .6rem 1rem;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.75rem;
  background: var(--primary);
  color: var(--primary-fg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  opacity: .88;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  color: var(--foreground);
  border-radius: var(--radius-card);
  padding: 1rem 1.5rem;
  list-style: none;
}
.woocommerce-error { border-left-color: #e57373; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: .6rem 0;
  color: var(--muted-foreground);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  color: var(--accent);
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-checkout .woocommerce {
  color: var(--muted-foreground);
}

/*
 * ── Carrito y checkout con el mismo lenguaje visual que Contacto/
 * Distribuidores (misma familia de inputs .input, mismas tarjetas
 * .card) — solo CSS, sobre las clases nativas de WooCommerce, sin
 * ningún override de plantilla.
 */

/* Los inputs de checkout ya heredaban fondo/borde/radio de la regla de
   arriba; aquí se completa con ancho y el mismo anillo de foco que usa
   .input en Contacto/Distribuidores. */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-cart .quantity input.qty {
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow .2s;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}

/* Corrige el conflicto entre el .form-row genérico del tema (grid de 2
   columnas, usado en Contacto/Distribuidores) y el .form-row propio de
   WooCommerce (form-row-first/-last con su propio ancho/flotado
   nativo). Se neutraliza SOLO dentro del checkout — no se toca la regla
   original .form-row, así que Contacto y Distribuidores no cambian. */
.woocommerce-checkout .form-row {
  display: block;
}

/* Tarjetas: mismo tratamiento .card que el resto del sitio para la
   tabla de repaso del pedido y el bloque de métodos de pago. */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout #payment {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.woocommerce-checkout #payment {
  padding: 1.5rem;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: none;
  padding: 0;
}

/* Casillas (privacidad/crear cuenta) con el mismo acento que
   .checkbox-row en Contacto. */
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ── Imágenes de producto en carrito/checkout (checkout CLÁSICO) ──
   Las reglas de arriba (.woocommerce-checkout, .form-row, tablas,
   .product-thumbnail...) están escritas para el checkout clásico de
   WooCommerce (shortcode/plantilla). Se dejan tal cual, inertes y sin
   quitar nada, por si alguna pantalla puntual (p. ej. "Pagar pedido")
   llegase a usar ese renderizado clásico — pero el checkout y el
   carrito REALES de esta tienda son el Checkout Block y el Cart Block
   de WooCommerce (confirmado en directo: /finalizar-compra/ y
   /carrito/ renderizan wp-block-woocommerce-checkout /
   wp-block-woocommerce-cart), que usan una estructura y unas clases
   completamente distintas — de ahí el bloque siguiente. */
.woocommerce-cart .product-thumbnail img,
.woocommerce-checkout-review-order-table img,
.bv-cart-thumb {
  object-fit: contain;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
 * CHECKOUT BLOCK Y CART BLOCK (los que usa realmente esta tienda)
 * ═══════════════════════════════════════════════════════════════════
 * Mismo lenguaje visual que Contacto/Distribuidores (.input/.card/
 * .btn-primary), aplicado sobre las clases reales que genera el
 * bloque de WooCommerce — confirmadas inspeccionando en directo el
 * HTML de /finalizar-compra/ y /carrito/ (wp-block-woocommerce-checkout-*
 * para la composición de secciones; wc-block-components-* para los
 * controles individuales, la familia de nombres estándar y estable de
 * WooCommerce Blocks). Solo CSS, sin tocar ninguna plantilla ni la
 * lógica nativa del bloque.
 */

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-cart .wc-block-components-text-input input {
  background: var(--secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--foreground) !important;
  padding: .75rem 1rem !important;
  box-sizing: border-box;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea:focus {
  box-shadow: 0 0 0 2px var(--accent) !important;
  outline: none;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control label {
  color: var(--muted-foreground);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"],
.wp-block-woocommerce-checkout input[type="radio"] {
  accent-color: var(--accent);
}

/* Tarjetas: resumen del pedido y bloque de pago con el mismo
   tratamiento .card que el resto del sitio. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout .wc-block-components-panel,
.wp-block-woocommerce-checkout .wc-block-components-address-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* Botón principal ("Realizar pedido"/"Ir a pagar") con el mismo
   lenguaje que .btn-primary. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-button:not(.wc-block-components-button--plain) {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  border: none !important;
}

.wp-block-woocommerce-checkout .wc-block-components-validation-error,
.wp-block-woocommerce-cart .wc-block-components-validation-error {
  color: #e57373;
}

/* ── Imagen de producto en Cart/Checkout Block: sin círculo, sin fondo
   blanco añadido por el contenedor. wc-block-components-product-image
   es el wrapper con el que WooCommerce Blocks envuelve por defecto la
   miniatura (con su propio fondo claro y borde redondeado) — se
   neutraliza SOLO ese tratamiento, dejando la imagen (la misma PNG
   transparente de la tienda) a tamaño completo dentro, sin recortar ni
   deformar. */
.wp-block-woocommerce-cart .wc-block-components-product-image,
.wp-block-woocommerce-checkout .wc-block-components-product-image {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-components-product-image img,
.wp-block-woocommerce-checkout .wc-block-components-product-image img {
  object-fit: contain;
  background: transparent;
}