/* Puente entre el CSS del prototipo y lo que genera WooCommerce.
   Todo usa los tokens de vitrina.css: si cambia la paleta allá, esto la sigue. */

/* En el prototipo estos elementos eran <button>; en WordPress son enlaces. */
.marca, .nav__enlace, .nav__carro, .nav__cuenta, .producto__ir, .producto__rapido,
.hero__pieza, .enuso__pieza, .categoria, .boton, .enlace-texto, .chat-abrir,
.pie__lista a {
  text-decoration: none;
}
/* Solo el subrayado: el color ya lo define vitrina.css. Un «color: inherit»
   acá pisaba el de .hero__pieza y el precio heredaba el blanco del hero. */
.marca { color: var(--tinta); }
.nav__enlace[aria-current="page"] { color: var(--tinta); }

/* WordPress mete la barra de administración arriba: la barra fija la sigue. */
.admin-bar .barra { top: 32px; }
@media (max-width: 782px) { .admin-bar .barra { top: 46px; } }

/* ---------- Catálogo ---------- */

.woocommerce-products-header__title,
.woocommerce .page-title,
.product_title {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: var(--tinta);
}

.woocommerce-result-count {
  color: var(--gris);
  font-size: var(--t-s);
  margin: 0 0 20px;
  float: left;
}

.woocommerce-ordering { float: right; margin: 0 0 20px; }
.woocommerce-ordering select {
  font: inherit;
  font-size: var(--t-s);
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--tinta);
}
.grilla { clear: both; }

.woocommerce-breadcrumb {
  font-size: var(--t-xs);
  color: var(--gris);
  margin-bottom: 14px;
}
.woocommerce-breadcrumb a { color: var(--gris); }

/* El enlace «Ver carrito» que WooCommerce agrega tras sumar por AJAX: el
   contador de la barra ya lo avisa, y en la tarjeta ensuciaba el botón. */
.producto__accion .added_to_cart { display: none; }
.producto__rapido.loading { opacity: 0.6; pointer-events: none; }
.producto__rapido.added::after { content: " ✓"; }

.woocommerce-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  justify-content: center;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-flex;
  min-width: var(--tap);
  min-height: var(--tap);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  border-radius: 10px;
  color: var(--tinta);
  text-decoration: none;
}
.woocommerce-pagination .current { background: var(--marca-solida); color: var(--sobre-marca); border-color: transparent; }

/* ---------- Ficha de producto ---------- */

.single-product div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.single-product div.product .woocommerce-product-gallery img {
  width: 100%;
  border-radius: 16px;
  background: var(--humo);
}
.single-product div.product .price {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--tinta);
  margin: 6px 0 14px;
}
.single-product .woocommerce-product-details__short-description { color: var(--gris); }
.single-product .related, .single-product .woocommerce-tabs { grid-column: 1 / -1; }
.single-product .related > h2, .woocommerce-tabs h2 {
  font-family: var(--display);
  font-size: var(--t-xl);
  margin: 24px 0 16px;
}
.woocommerce-tabs ul.tabs { list-style: none; padding: 0; display: flex; gap: 18px; border-bottom: 1px solid var(--linea); }
.woocommerce-tabs ul.tabs a { color: var(--gris); text-decoration: none; padding-bottom: 8px; display: inline-block; }
.woocommerce-tabs ul.tabs li.active a { color: var(--tinta); border-bottom: 2px solid var(--tinta); }
@media (max-width: 760px) { .single-product div.product { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Botones, campos y avisos de WooCommerce ---------- */

.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce input.button, .woocommerce #place_order, .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--marca-solida);
  color: var(--sobre-marca);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.woocommerce .button:hover { filter: brightness(1.08); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem; /* 16 px: iOS no hace zoom al enfocar */
}
.woocommerce .quantity .qty { width: 5em; }
.woocommerce form .form-row { margin: 0 0 14px; }
.woocommerce form .form-row label { display: block; font-size: var(--t-s); margin-bottom: 4px; }
.woocommerce form .form-row .required { color: var(--error); text-decoration: none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none;
  padding: 14px 16px;
  margin: 0 0 20px;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: var(--tarjeta);
  color: var(--tinta);
}
.woocommerce-message { border-color: var(--marca); }
.woocommerce-error { border-color: var(--error); }
.woocommerce-message .button, .woocommerce-info .button { float: right; min-height: 0; padding: 6px 14px; }

/* ---------- Carrito y checkout ---------- */

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
}
.woocommerce table.shop_table img { width: 64px; border-radius: 8px; }
.woocommerce a.remove { color: var(--gris); text-decoration: none; font-size: 1.3rem; }
.cart-collaterals { margin-top: 24px; }
.cart_totals { max-width: 420px; margin-left: auto; }

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 20px; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 { font-family: var(--display); font-size: var(--t-l); margin: 20px 0 12px; }
#payment { background: var(--humo); border-radius: 12px; padding: 16px; margin-top: 16px; }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 12px; }

/* El bloque que ofrece crear cuenta tras pagar (plugin reglas-tienda). */
.tnd-crear-cuenta { border: 1px solid var(--linea); border-radius: 12px; padding: 18px; margin-top: 24px; background: var(--tarjeta); }
.tnd-crear-cuenta h2 { margin-top: 0; font-size: var(--t-l); }

/* Barra de envío gratis (shortcode del tema anterior, ahora acá). */
.tnd-envio-gratis { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: var(--t-s); background: var(--tarjeta); }
.tnd-envio-gratis__pista { height: 6px; background: var(--linea); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.tnd-envio-gratis__avance { height: 100%; background: var(--marca); transform: scaleX(var(--tnd-avance, 0)); transform-origin: left center; transition: transform 0.3s ease; }
.tnd-envio-gratis--logrado { color: var(--marca); font-weight: 600; }
.tnd-envio-gratis--voluminoso { color: var(--gris); }
@media (prefers-reduced-motion: reduce) { .tnd-envio-gratis__avance { transition: none; } }

.contenido-pagina { max-width: 72ch; line-height: 1.65; }
.woocommerce-cart .contenido-pagina,
.woocommerce-checkout .contenido-pagina,
.woocommerce-account .contenido-pagina { max-width: none; }

/* WooCommerce pinta la ficha con sus propios colores (boton morado, precio verde oliva). Estos los igualan a la marca. */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt,
.woocommerce button.button.alt, .woocommerce a.button.alt {
  background: var(--marca-solida);
  color: var(--sobre-marca);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--tinta); }
.woocommerce div.product .product_meta a { color: var(--marca); }