/* ============================================================================
   JAKOMI · WooCommerce skin  (자코미)
   Mapea los tokens --jk-* sobre las clases reales de WooCommerce.
   Requiere jakomi-tokens.css cargado antes (define las variables y las fuentes).
   Pensado para ser theme-agnóstico; usa !important con criterio donde los temas
   suelen pelear la especificidad (botones, precios, badges).
============================================================================ */

/* ---------- Base / tipografía de marca ----------------------------------- */
body.woocommerce,
body.woocommerce-page,
.woocommerce, .woocommerce-page{
  font-family:var(--jk-font-sans);
  color:var(--jk-text);
}
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3,
.wc-block-grid__product-title,.product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--jk-font-display);
  font-weight:600;letter-spacing:var(--jk-tracking-display);
  color:var(--jk-cacao);
}
.woocommerce a{color:var(--jk-primary);}
.woocommerce a:hover{color:var(--jk-primary-press);}

/* ---------- Botones ------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button,
.wp-block-button__link{
  font-family:var(--jk-font-ui)!important;
  font-weight:600!important;
  letter-spacing:.01em;
  color:var(--jk-on-primary)!important;
  background:var(--jk-primary)!important;
  border:0!important;
  border-radius:var(--jk-r-md)!important;
  padding:.7em 1.25em!important;
  box-shadow:var(--jk-shadow-sm), var(--jk-inner-hi);
  transition:transform var(--jk-dur) var(--jk-ease-out-quint),
             box-shadow var(--jk-dur) var(--jk-ease-out-quint),
             background-color var(--jk-dur-fast) var(--jk-ease-out-quint)!important;
  text-shadow:none!important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover{
  background:var(--jk-primary-press)!important;
  transform:translateY(-2px);
  box-shadow:var(--jk-shadow-md), var(--jk-inner-hi);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce .single_add_to_cart_button:active{transform:translateY(0) scale(.985);}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible{
  outline:none;box-shadow:var(--jk-ring-shadow);
}
/* Botón secundario (p.ej. "Ver carrito" tras añadir) */
.woocommerce a.added_to_cart,
.woocommerce a.button.wc-backward{
  background:transparent!important;color:var(--jk-primary)!important;
  box-shadow:inset 0 0 0 1.5px var(--jk-border-strong)!important;
}
.woocommerce a.added_to_cart:hover,
.woocommerce a.button.wc-backward:hover{
  background:var(--jk-surface-2)!important;
  box-shadow:inset 0 0 0 1.5px var(--jk-primary)!important;
}

/* ---------- Fichas de producto (loop) ------------------------------------ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--jk-surface);
  border:1px solid var(--jk-border);
  border-radius:var(--jk-r-xl);
  padding:var(--jk-3) var(--jk-3) var(--jk-5);
  box-shadow:var(--jk-shadow-md);
  transition:transform var(--jk-dur-slow) var(--jk-ease-out-quint),
             box-shadow var(--jk-dur-slow) var(--jk-ease-out-quint);
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:var(--jk-shadow-lg);
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  border-radius:var(--jk-r-lg);
  margin-bottom:var(--jk-3);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.05rem;padding-top:0;
}
.woocommerce ul.products li.product .button{
  margin-top:var(--jk-2);
}

/* ---------- Precios ------------------------------------------------------- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount{
  color:var(--jk-cacao)!important;
  font-family:var(--jk-font-display);
  font-weight:600;
}
.woocommerce .price del,
.woocommerce del .woocommerce-Price-amount{
  color:var(--jk-text-subtle)!important;
  font-weight:400;opacity:.8;
}
.woocommerce .price ins,
.woocommerce ins .woocommerce-Price-amount{
  color:var(--jk-primary-press)!important;text-decoration:none;
}

/* ---------- Badge de oferta (uso quirúrgico del coral) -------------------- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background:var(--jk-pop)!important;
  color:var(--jk-on-pop)!important;
  font-family:var(--jk-font-ui);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--jk-r-full)!important;
  min-height:0;min-width:0;line-height:1;
  padding:.45em .8em!important;
  box-shadow:var(--jk-shadow-sm);
  top:12px;left:12px;
}

/* ---------- Estrellas / rating ------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before{color:var(--jk-caramel);}

/* ---------- Avisos (notices) --------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius:var(--jk-r-lg);
  border:1px solid var(--jk-border);
  border-top:3px solid var(--jk-primary);
  background:var(--jk-surface)!important;
  color:var(--jk-text);
  box-shadow:var(--jk-shadow-sm);
}
.woocommerce-message{border-top-color:var(--jk-matcha);}
.woocommerce-error{border-top-color:var(--jk-pop);}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--jk-primary);}
.woocommerce-error::before{color:var(--jk-pop);}

/* ---------- Formularios / inputs ----------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce-page form .form-row input.input-text,
.woocommerce select,
.select2-container--default .select2-selection--single{
  background:var(--jk-surface)!important;
  color:var(--jk-text)!important;
  border:1.5px solid var(--jk-border)!important;
  border-radius:var(--jk-r-md)!important;
  padding:.6em .8em;
  transition:border-color var(--jk-dur-fast) var(--jk-ease-out-quint),
             box-shadow var(--jk-dur-fast) var(--jk-ease-out-quint);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .quantity input.qty:focus,
.woocommerce select:focus{
  outline:none!important;
  border-color:var(--jk-primary)!important;
  box-shadow:var(--jk-ring-shadow)!important;
}

/* ---------- Carrito & checkout ------------------------------------------- */
.woocommerce table.shop_table{
  border-radius:var(--jk-r-xl);
  border:1px solid var(--jk-border);
  box-shadow:var(--jk-shadow-sm);
  overflow:hidden;
}
.woocommerce table.shop_table th{font-family:var(--jk-font-ui);color:var(--jk-cacao);}
.cart-collaterals .cart_totals>h2,
.woocommerce-checkout #order_review_heading{
  font-family:var(--jk-font-display);color:var(--jk-cacao);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order{
  background:var(--jk-primary)!important;color:var(--jk-on-primary)!important;
  font-family:var(--jk-font-ui)!important;font-weight:700!important;
  border-radius:var(--jk-r-md)!important;font-size:1.05rem!important;
  box-shadow:var(--jk-shadow-md), var(--jk-inner-hi);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover{
  background:var(--jk-primary-press)!important;
  transform:translateY(-2px);box-shadow:var(--jk-shadow-lg);
}

/* ---------- Pestañas de producto ----------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--jk-surface-2);border-radius:var(--jk-r-md) var(--jk-r-md) 0 0;
  border:1px solid var(--jk-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:var(--jk-surface);border-bottom-color:var(--jk-surface);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--jk-cacao);font-family:var(--jk-font-ui);}

/* ---------- Paginación ---------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul{border:0;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:0;background:var(--jk-surface);color:var(--jk-text);
  border-radius:var(--jk-r-md);margin:0 3px;box-shadow:var(--jk-shadow-xs);
  transition:background var(--jk-dur-fast) var(--jk-ease-out-quint);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--jk-primary);color:var(--jk-on-primary);
}

/* ---------- Estado de stock ---------------------------------------------- */
.woocommerce .stock.in-stock{color:var(--jk-matcha);font-weight:700;}
.woocommerce .stock.out-of-stock{color:var(--jk-pop);font-weight:700;}

/* ---------- Breadcrumb ---------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--jk-font-ui);font-size:.8rem;
  letter-spacing:.04em;color:var(--jk-text-muted);
}

/* ---------- Respeta reduce-motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .woocommerce ul.products li.product:hover,
  .woocommerce a.button:hover,
  .woocommerce .single_add_to_cart_button:hover{transform:none;}
}