/* ==========================================================================
   RN.MATES - Capa de compatibilidad sobre el CSS por defecto de WooCommerce.
   Gana especificidad/orden para que manden el design system y la grilla rn-.
   Se carga DESPUÉS de woocommerce.css (depende de rnmates-woocommerce).
   ========================================================================== */

/* --- Botones de WooCommerce con el look RN.MATES (verde por defecto) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--c-verde-600) !important;
  color: var(--c-crema) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--r-pill) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--c-verde-700) !important;
  color: var(--c-crema) !important;
}

/* Variantes del design system ganan sobre el verde por defecto (mayor specificity). */
.woocommerce a.button.rn-btn--accent,
.woocommerce button.button.rn-btn--accent,
.woocommerce input.button.rn-btn--accent {
  background-color: var(--c-acento-600) !important;
  color: #fff !important;
}
.woocommerce a.button.rn-btn--accent:hover,
.woocommerce button.button.rn-btn--accent:hover {
  background-color: var(--c-acento-700) !important;
}
.woocommerce a.button.rn-btn--ghost,
.woocommerce button.button.rn-btn--ghost,
.woocommerce input.button.rn-btn--ghost {
  background-color: transparent !important;
  color: var(--c-verde-700) !important;
  border-color: var(--c-verde-600) !important;
}
.woocommerce a.button.rn-btn--ghost:hover,
.woocommerce button.button.rn-btn--ghost:hover {
  background-color: var(--c-verde-600) !important;
  color: var(--c-crema) !important;
}

/* Estado "agregado al carrito". */
.woocommerce a.button.added,
.woocommerce a.added_to_cart {
  background-color: var(--c-verde-700) !important;
  color: var(--c-crema) !important;
}

/* --- Grilla de productos: usar nuestra grid y neutralizar los floats de WC --- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* --- Mi cuenta: neutralizar el clearfix de woocommerce-layout ---
   woocommerce-layout.css agrega .woocommerce::before/::after (clearfix). Al
   convertir .woocommerce-account .woocommerce en grid, esos pseudo-elementos
   se vuelven ítems del grid y descuadran la barra lateral (nav angosto, mal
   ubicado). Se anulan SOLO en la cuenta (carrito/checkout no se tocan). */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  content: none;
  display: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

/* --- Imágenes de tablas (carrito / detalle de pedido) ---
   woocommerce-general fija .woocommerce table.cart img en 32px (gana por
   especificidad). Las llevamos al tamaño del design system. */
.woocommerce table.cart td.product-thumbnail img,
.woocommerce-page table.cart td.product-thumbnail img,
.woocommerce .rn-cart__row .product-thumbnail img {
  width: 72px !important;
  height: 88px !important;
  max-width: none !important;
  object-fit: cover;
}

/* --- "Finalizar compra": botón a ancho completo (evita que el texto envuelva
       y el pill se vea como un círculo). --- */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block !important;
  width: 100% !important;
  margin-top: 1rem;
  text-align: center;
}

/* --- Form-rows en 2 columnas (se repone tras quitar woocommerce-layout) --- */
@media (min-width: 600px) {
  .woocommerce form .form-row-first { float: left; width: 48%; }
  .woocommerce form .form-row-last { float: right; width: 48%; }
  .woocommerce form .form-row-wide { clear: both; width: 100%; }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper,
  .woocommerce-account-fields {
    display: flow-root;
  }
}