/* ==========================================================================
   SALSAS CHILANGAS · WOOCOMMERCE
   --------------------------------------------------------------------------
   Aplica el sistema visual a la estructura NATIVA de WooCommerce SIN cambiar
   su markup. Solo mejora estético. Se evita !important salvo donde la
   especificidad de WooCommerce lo exige (botones, onsale).

   Modelado de datos recomendado (no requiere PHP):
     · Nivel de picante  → Atributo global "Picante" (pa_picante) valores 1..7
                           o campo ACF numérico "spice_level".
     · Tipo de chile     → Atributo global "Chile" (pa_chile).
     · Ingredientes dest. → Atributo global o ACF repeater.
     · Premios / sin conservantes / 100% natural / recomendado para
                           → Etiquetas de producto (product_tag) → se mapean
                             a badges con las clases .sc-badge--*.
   Para badges condicionales según etiqueta, ver functions.php (hook opcional).
   ========================================================================== */


/* ==========================================================================
   1. TIENDA · GRID DE PRODUCTOS
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; } /* mata el clearfix nativo */

.woocommerce ul.products li.product {
  width: auto !important;   /* anula el width % en línea de WooCommerce */
  margin: 0 !important;
  float: none !important;
  position: relative;
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

/* Imagen */
.woocommerce ul.products li.product a img {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 1;
  object-fit: cover;
  background: linear-gradient(150deg, var(--cream-100), var(--ink-100));
}

/* Título */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text-primary);
  padding: var(--space-4) var(--space-5) 0;
}

/* Precio */
.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 1.25rem;
  color: var(--text-price);
  padding: 0 var(--space-5);
  margin: var(--space-2) 0 var(--space-4);
}
.woocommerce ul.products li.product .price del {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-size: .9rem;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Botón "Añadir al carrito" en loop */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: auto var(--space-5) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--green-500);
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-cta);
  padding: 12px 20px;
  text-align: center;
  transition: transform var(--t-fast), background var(--t-base);
}
.woocommerce ul.products li.product .button:hover {
  background: var(--green-600);
  transform: translateY(-2px);
}

/* Sale badge (onsale) */
.woocommerce span.onsale {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  min-height: 0; min-width: 0;
  margin: 0; padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: 1;
  z-index: 2;
}


/* ==========================================================================
   2. SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  color: var(--text-price);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Botón principal Add to cart (single) */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--green-500) !important;  /* gana a estilos del tema/plugin */
  color: #fff !important;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  padding: 14px 28px;
  transition: transform var(--t-fast), background var(--t-base);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--green-600) !important;
  transform: translateY(-2px);
}

/* Cantidad */
.woocommerce .quantity .qty {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px;
}

/* Variaciones */
.woocommerce div.product form.cart .variations select {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

/* Tabs de producto */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: var(--space-2);
  border: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--ink-100); color: var(--ink-900); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* Productos relacionados / upsells: heredan el grid de arriba */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}


/* ==========================================================================
   3. CART
   ========================================================================== */
.woocommerce table.shop_table {
  border-radius: var(--radius-lg);
  border-color: var(--border-subtle);
  overflow: hidden;
}
.woocommerce table.shop_table th { font-family: var(--font-display); }
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}


/* ==========================================================================
   4. CHECKOUT · FORMULARIOS DE CUENTA · CUPÓN
   --------------------------------------------------------------------------
   Reaprovecha el estilo de .sc-form-control en los inputs nativos.
   ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text,
.woocommerce-checkout .input-text,
.woocommerce .coupon input.input-text {
  font-size: var(--fs-body);
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1.5px solid var(--border-default);
  color: var(--text-primary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout .input-text:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: var(--shadow-focus);
}
.woocommerce form .form-row label { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-primary); }

/* Botón aplicar cupón / botones secundarios */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: var(--radius-pill);
  background: var(--ink-800);
  color: var(--cream-50);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
}
.woocommerce .button:hover { background: var(--ink-900); }


/* ==========================================================================
   5. NOTICES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-md);
  border-top: 0;
  font-size: var(--fs-small);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-12);
}
.woocommerce-message { background: var(--success-bg); color: var(--green-700-solid); }
.woocommerce-message::before { color: var(--success); }
.woocommerce-info { background: var(--info-bg); color: var(--info); }
.woocommerce-info::before { color: var(--info); }
.woocommerce-error { background: var(--error-bg); color: var(--red-600); }
.woocommerce-error::before { color: var(--error); }


/* ==========================================================================
   6. ATRIBUTOS DE SALSA (helpers)
   --------------------------------------------------------------------------
   Bloques opcionales para mostrar picante/chile/ingredientes en la ficha.
   Pensados para insertarse vía HTML Widget de Elementor, shortcode o snippet.
   Reutilizan los componentes sc-spice-* y sc-badge--*.
   ========================================================================== */
.sc-product-attrs { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-5) 0; }
.sc-product-attrs__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sc-product-attrs__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 130px;
}


/* ==========================================================================
   RESPONSIVE (WooCommerce grid)
   ========================================================================== */
@media (max-width:1024px){
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:768px){
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr; }
}