/*
 * Compatibilidad visual con WooCommerce.
 *
 * Solo se carga si el plugin está activo (functions.php comprueba
 * class_exists('WooCommerce') antes de encolar esto). Misma regla de la
 * casa que dlt-theme.css: ningún color literal, todo sale de las custom
 * properties que genera theme.json.
 *
 * Cubre la tienda/relacionados (tarjetas, botones, precio, notificaciones,
 * formularios clásicos) y la ficha de producto (templates/single-product.html)
 * — esta última probada contra un WooCommerce real con productos reales,
 * ver el LEEME.md de wp-content para el detalle de qué se corrigió viéndolo
 * en vivo (el botón de compra salía verde, el precio no traía la tipografía
 * del sitio). El carrito y el checkout por bloques (templates/page-tienda.html)
 * están cubiertos más abajo pero SIN esa misma verificación en vivo — el
 * LEEME.md también explica por qué.
 */

/* Botones: mismo look que .wp-block-button__link en vez del botón gris de
   WooCommerce por defecto. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--superficie);
  border: 1.5px solid var(--wp--preset--color--terracota);
  border-radius: 999px;
  padding: 11px 24px;
  font-weight: 600;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wp--preset--color--terracota-ink);
  color: var(--wp--preset--color--superficie);
  transform: translateY(-2px);
}

/*
 * A propósito NO se recolorea `.alt` a verde: WooCommerce le pone esa
 * clase a los botones de "Añadir al carrito" y "Finalizar compra" —
 * probado en vivo, ver testingcardknox—, que aquí son la acción principal
 * de su pantalla, no una alternativa. El criterio de todo el sitio es un
 * solo CTA primario por pantalla (home-hero.php, puerta-experiencias.php);
 * el verde queda reservado para Puerta 2, no para el flujo de compra.
 */

.woocommerce a.added_to_cart {
  color: var(--wp--preset--color--terracota-ink);
}

/* Precio ------------------------------------------------------------------- */

.woocommerce .price {
  color: var(--wp--preset--color--tinta);
  font-weight: 600;
}

.woocommerce del .woocommerce-Price-amount {
  color: var(--wp--preset--color--texto-suave);
  opacity: 0.7;
}

.woocommerce ins {
  text-decoration: none;
}

.woocommerce span.onsale {
  background: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--superficie);
  border-radius: 999px;
  font-weight: 700;
  min-height: 3.2em;
  min-width: 3.2em;
}

/* Tarjeta de producto (tienda, relacionados, upsells) — mismo lenguaje que
   .is-style-dlt-tarjeta del resto del sitio. */
.woocommerce ul.products li.product {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 20px;
  padding: 16px 16px 20px;
  box-shadow: 0 1px 3px rgb(30 19 14 / 8%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgb(30 19 14 / 9%);
}

.woocommerce ul.products li.product img {
  border-radius: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--wp--preset--color--tinta);
  font-family: var(--wp--preset--font-family--pangram, Pangram, 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

/* Notificaciones: mismo tratamiento que .dlt-aviso. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background: var(--wp--preset--color--crema-alt);
  border-top: 0;
  border-left: 4px solid var(--wp--preset--color--verde);
  border-radius: 14px;
  color: var(--wp--preset--color--texto);
  padding: 18px 20px 18px 24px;
}

.woocommerce-error {
  border-left-color: var(--wp--preset--color--terracota);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

/* Formularios: mismo criterio que formularios.css (dlt-core) — campos con
   16px de fuente para que iOS no haga zoom al enfocar, borde y foco en los
   colores de marca. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.shop_table td select {
  border: 1.5px solid var(--wp--preset--color--borde);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--wp--preset--color--crema);
  color: var(--wp--preset--color--tinta);
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
  outline: 2px solid var(--wp--preset--color--terracota);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--terracota);
}

/* Tabla de carrito / checkout: bordes en el tono del sitio en vez del gris
   por defecto. */
.woocommerce table.shop_table {
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 14px;
}

.woocommerce table.shop_table th {
  color: var(--wp--preset--color--tinta);
}

/* Menos ruido visual: quita el degradado de estrellas por defecto del
   admin bar de WooCommerce cuando no hace falta reforzar la marca. */
.woocommerce .star-rating span::before {
  color: var(--wp--preset--color--terracota);
}

/* Ficha de producto (single-product.html) -----------------------------------
 *
 * Todo lo de aquí abajo viste bloques de WooCommerce (woocommerce/*), no
 * el shortcode/plantilla clásica — ver templates/single-product.html.
 */

.woocommerce-breadcrumb {
  color: var(--wp--preset--color--texto-suave);
}

.woocommerce-breadcrumb a {
  color: var(--wp--preset--color--texto-suave);
}

.woocommerce-breadcrumb a:hover {
  color: var(--wp--preset--color--terracota-ink);
}

/*
 * Galería: mismo radio que el marco de foto del resto del sitio. El
 * `max-width: 100%` va con el mismo prefijo `.woocommerce` que trae el CSS
 * general de WooCommerce (`.woocommerce .wp-block-woocommerce-product-image-gallery`
 * en woocommerce.css) porque esa regla ya trae un ancho fijo de escritorio
 * pensado para la maqueta clásica de dos columnas flotadas — sin igualar
 * esa especificidad la galería se queda angosta en vez de llenar su
 * columna de 50% en single-product.html.
 */
.woocommerce-product-gallery,
.wp-block-woocommerce-product-image-gallery,
.woocommerce .wp-block-woocommerce-product-image-gallery {
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  border-radius: 8px;
  overflow: hidden;
}

.woocommerce-product-gallery__trigger {
  background: var(--wp--preset--color--superficie);
  border-radius: 50%;
}

/*
 * Precio grande de la ficha (no el de las tarjetas de la tienda, que ya
 * está cubierto arriba por .woocommerce .price). Probado en vivo: el
 * bloque woocommerce/product-price NO envuelve en `.price` como la
 * plantilla clásica — su clase real es `.wc-block-components-product-price`
 * dentro de `.wp-block-woocommerce-product-price` — así que van las dos,
 * la del bloque y `.price` por si una integración futura sí la trae.
 */
.wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-price .price {
  font-family: var(--wp--preset--font-family--pangram, Pangram, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--wp--preset--color--barro-oscuro);
}

.wp-block-woocommerce-product-price .woocommerce-Price-currencySymbol {
  font-size: 0.8em;
}

/* Resumen corto: mismo tono que el resto de los párrafos de introducción
   del sitio (.hero .lead, la descripción del carrusel de productos…). */
.wp-block-woocommerce-product-summary {
  color: var(--wp--preset--color--texto-suave);
  font-size: var(--wp--preset--font-size--medio, 18px);
  line-height: 1.6;
}

/* Selector de cantidad + botón "Añadir al carrito" ------------------------- */

.quantity .qty,
.wc-block-components-quantity-selector__input {
  border: 1.5px solid var(--wp--preset--color--borde);
  border-radius: 10px;
  height: 48px;
  font-size: 16px;
  color: var(--wp--preset--color--tinta);
  background: var(--wp--preset--color--crema);
}

.wc-block-components-quantity-selector {
  border: 1.5px solid var(--wp--preset--color--borde);
  border-radius: 999px;
  overflow: hidden;
  background: var(--wp--preset--color--crema);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wc-block-components-quantity-selector__button {
  color: var(--wp--preset--color--terracota-ink);
}

.wp-block-woocommerce-add-to-cart-form .quantity {
  margin-right: 12px;
}

/* Ficha de meta (SKU / categoría / etiquetas): discreta, como un pie de
   dato, no como cuerpo de texto. */
.wp-block-woocommerce-product-meta,
.product_meta {
  font-size: 13px;
  color: var(--wp--preset--color--texto-suave);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--crema-alt);
}

.wp-block-woocommerce-product-meta a,
.product_meta a {
  color: var(--wp--preset--color--terracota-ink);
}

/* Insignia de "agotado": mismo tratamiento que la insignia del carrusel de
   productos (dlt-carrusel-productos), terracota oscuro sobre superficie. */
.stock.out-of-stock,
.wc-block-components-product-stock-indicator {
  display: inline-block;
  background: var(--wp--preset--color--terracota-ink);
  color: var(--wp--preset--color--superficie);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 2px;
}

.stock.in-stock {
  color: var(--wp--preset--color--verde);
  font-weight: 600;
}

/*
 * Pestañas de detalles (Descripción / Valoraciones) — mismo criterio que
 * .is-style-dlt-chips: activa = pastilla llena, no la pestaña de carpeta
 * gris de WooCommerce por defecto.
 *
 * Probado en vivo: WooCommerce trae su propio estilo de pestaña con la
 * cadena `.woocommerce div.product .woocommerce-tabs ul.tabs li` —cuatro
 * clases— que le gana en especificidad a `.woocommerce-tabs ul.tabs li`
 * —dos clases—, así que la pestaña de carpeta (fondo gris, borde,
 * márgenes negativos) se imponía encima de esto, incluyendo el `<a>` de
 * adentro (su propio padding y su borde de la pestaña activa). Se repite
 * esa misma cadena en el `<li>` y en el `<a>`, base y `.active`, para
 * igualar la especificidad en los dos niveles — no para duplicar look, ni
 * hace falta `!important` en ningún lado.
 */
.wp-block-woocommerce-product-details ul.tabs,
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--40);
  border-bottom: 0;
}

.wp-block-woocommerce-product-details ul.tabs li,
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.wp-block-woocommerce-product-details ul.tabs li a,
.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--texto);
  background: var(--wp--preset--color--crema-alt);
  border: 0;
  padding: 14px;
  border-radius: 999px;
}

.wp-block-woocommerce-product-details ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--superficie);
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  color: inherit;
  z-index: auto;
  border: 0;
  border-bottom-color: transparent;
}

.wp-block-woocommerce-product-details .panel h2,
.woocommerce-tabs .panel h2 {
  font-family: var(--wp--preset--font-family--pangram, Pangram, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--wp--preset--color--barro-oscuro);
}

/* Carrito y checkout (page-tienda.html) --------------------------------------
 *
 * Bloques woocommerce/cart y woocommerce/checkout. Sus botones principales
 * (`.wc-block-components-button`) ya heredan el estilo de core/button de
 * theme.json porque WooCommerce les añade la clase `wp-element-button` —
 * por eso no hace falta repetir el look del botón aquí, solo lo que
 * WooCommerce no cubre con esa herencia: tarjetas, tipografía, formularios.
 */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-size: var(--wp--preset--font-size--menor, 14.5px);
}

.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2,
.wc-block-cart__totals-title,
.wc-block-checkout__title {
  font-family: var(--wp--preset--font-family--pangram, Pangram, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--wp--preset--color--barro-oscuro);
}

/* Línea de producto dentro del carrito: separador suave en vez de la tabla
   con bordes grises por defecto. */
.wc-block-cart-items {
  border-top: 1px solid var(--wp--preset--color--borde);
}

.wc-block-cart-items__row {
  border-bottom: 1px solid var(--wp--preset--color--borde);
  padding-top: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--30);
}

.wc-block-cart-item__image img,
.wc-block-components-product-image img {
  border-radius: 10px;
}

.wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--pangram, Pangram, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--wp--preset--color--barro-oscuro);
}

.wc-block-components-product-name:hover {
  color: var(--wp--preset--color--terracota-ink);
}

.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata a {
  color: var(--wp--preset--color--terracota-ink);
}

/* Panel de totales / resumen del pedido: misma tarjeta que el resto del
   sitio (superficie + borde + radio 20px). */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 20px;
  padding: var(--wp--preset--spacing--30);
}

.wc-block-components-totals-item {
  border-top: 1px solid var(--wp--preset--color--crema-alt);
}

.wc-block-components-totals-footer-item {
  border-top: 1.5px solid var(--wp--preset--color--borde);
  font-weight: 600;
  color: var(--wp--preset--color--barro-oscuro);
}

/* Panel plegable del cupón: pastilla discreta, coherente con el resto de
   los "acordeones" del sitio. */
.wc-block-components-panel__button {
  color: var(--wp--preset--color--terracota-ink);
  font-weight: 600;
}

/* Formularios del checkout: mismo criterio que el resto de formularios del
   sitio (dlt-core/assets/css/formularios.css) — 16px para que iOS no haga
   zoom al enfocar, borde y foco en los colores de marca. Los campos del
   checkout por bloques no son <input class="input-text">, son
   .wc-block-components-text-input, así que van aparte de la regla clásica
   de más arriba. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-address-form input,
.wc-blocks-components-select select {
  border: 1.5px solid var(--wp--preset--color--borde);
  border-radius: 10px;
  font-size: 16px;
  background: var(--wp--preset--color--crema);
  color: var(--wp--preset--color--tinta);
}

.wc-block-components-text-input input:focus-visible,
.wc-block-components-address-form input:focus-visible,
.wc-blocks-components-select select:focus-visible {
  outline: 2px solid var(--wp--preset--color--terracota);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--terracota);
}

.wc-block-components-radio-control__option {
  border: 1.5px solid var(--wp--preset--color--borde);
  border-radius: 10px;
}

.wc-block-components-radio-control__option--checked {
  border-color: var(--wp--preset--color--terracota);
}

/* Carrito vacío: mismo lenguaje visual que .dlt-nota-foto / avisos del
   sitio, no el ícono gris por defecto. */
.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  color: var(--wp--preset--color--texto-suave);
}

.wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--wp--preset--font-family--pangram, Pangram, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--wp--preset--color--barro-oscuro);
}