/* =============================================================
   WOOCOMMERCE — Overrides completos para Mercedes Patallo
   ============================================================= */

/* Variables y reset */
.woocommerce, .woocommerce-page { color: var(--body); font-family: 'DM Sans', sans-serif; }

/* ── Botones WooCommerce ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
  background: var(--ink) !important;
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 20px !important;
  border-radius: 0 !important;
  border: none !important;
  transition: background .2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background: var(--rojo) !important;
  color: var(--white) !important;
}
.woocommerce a.button.add_to_cart_button { display: block; text-align: center; width: 100%; margin-top: 12px; }

/* ── Grid de productos (archive) ── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products li.product {
  border: 1px solid var(--rule);
  background: var(--white);
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .4s;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: 14px 16px 6px !important;
  line-height: 1.3 !important;
}
.woocommerce ul.products li.product .price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding: 0 16px 14px !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }
.woocommerce ul.products li.product .price del { color: var(--muted) !important; font-size: 14px !important; }
.woocommerce ul.products li.product .button { margin: auto 16px 16px !important; display: block !important; }

/* Badge "Oferta" */
.woocommerce span.onsale {
  background: var(--rojo) !important;
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 5px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
}

/* ── Página de tienda — título y filtros ── */
.woocommerce .woocommerce-products-header__title { font-size: 36px; color: var(--ink); margin-bottom: 8px; }
.woocommerce .woocommerce-result-count { font-size: 13px; color: var(--muted); }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--body);
  font-family: 'DM Sans', sans-serif;
  border-radius: 0;
}

/* ── Producto individual ── */
.woocommerce div.product div.images img { border: 1px solid var(--rule); }
.woocommerce div.product .product_title {
  font-family: 'Playfair Display', serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--rojo) !important;
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  margin: 16px 0 24px;
}
.woocommerce div.product form.cart .qty {
  border: 1px solid var(--rule);
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 0;
  width: 70px;
}
.woocommerce div.product form.cart .button {
  margin-left: 12px;
  padding: 13px 28px !important;
  font-size: 13px !important;
}

/* ── Carrito ── */
.woocommerce-cart table.cart th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--rojo);
}
.woocommerce-cart .cart-subtotal th,
.woocommerce-cart .order-total th { font-weight: 600; color: var(--ink); }
.woocommerce-cart .order-total .amount { color: var(--rojo) !important; font-size: 22px; font-weight: 700; }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin-left: auto; }

/* ── Checkout ── */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--rojo);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--rule);
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  border-radius: 0;
  color: var(--body);
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--rojo); outline: none; }
.woocommerce #payment #place_order { background: var(--rojo) !important; font-size: 15px !important; padding: 16px 32px !important; width: 100%; }
.woocommerce #payment #place_order:hover { background: var(--rojo-dk) !important; }

/* ── Responsive WooCommerce ── */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}