/* ============================================================================
   LIVE YOUR DREAMS — WooCommerce ficha de producto (single) · RE-SKIN "Salomón".
   Referencia: design/assets/explorations/05-ficha-producto-simple-salomon-light.html
   Lenguaje: alto contraste B/N, angular (radios 0), líneas 1px, tipografía
   condensada en MAYÚSCULAS (--font-display), sombras mínimas. Teal = acento
   PUNTUAL; el negro (--ink) es el color de acción. Verde = único semántico
   (stock). Solo light. Desktop-first: breakpoints max-width 1024px y 767px.
   Se estila el markup nativo de Woo desde su jerarquía (.woocommerce div.product…).
   Prefijo propio: .lyd-*.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) Layout del hero: galería (~58%) + info sticky (~42%)
   --------------------------------------------------------------------------- */
.woocommerce div.product.lyd-pdp {
  margin: 0;
}
.lyd-pdp__shell {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-10);
  padding-block: var(--space-6) var(--space-12);
}
/* La foto ocupaba 58 % y el cliente la vio "super grande": baja a 48 % y el
   texto se queda con el resto. */
.lyd-pdp__gallery {
  width: 48%;
  flex: 0 0 48%;
  min-width: 0;
  position: relative;
}
.lyd-pdp__info {
  width: 52%;
  flex: 0 0 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: calc(var(--topnav-h) + var(--space-4));
  float: none; /* anula el float por defecto de .summary */
  margin: 0;
}

@media (max-width: 1024px) {
  .lyd-pdp__shell { flex-direction: column; gap: var(--space-6); }
  .lyd-pdp__gallery,
  .lyd-pdp__info { width: 100%; flex-basis: auto; }
  .lyd-pdp__info { position: static; top: auto; }
}
@media (max-width: 767px) {
  .lyd-pdp__shell { padding-block: var(--space-4) var(--space-8); }
}

/* ---------------------------------------------------------------------------
   2) Galería Woo (flexslider + zoom/lightbox ya activos por el tema)
      Miniaturas verticales cuadradas a la izquierda (≥1024). Todo angular.
   --------------------------------------------------------------------------- */
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  float: none;
  width: 100%;
}
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product .lyd-pdp__gallery .flex-viewport {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-elevated);
}
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__image,
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__image a {
  display: block;
}
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__image:hover img { transform: scale(1.04); }

/* Red de seguridad. La plantilla de core saca la galería con opacity:0 en línea
   y es el JS de Woo el que la revela; como aquí se desregistra la hoja
   woocommerce-general, si ese JS falla la galería quedaría invisible. */
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery { opacity: 1 !important; }

/* Mientras flexslider no ha inicializado, el wrapper es hijo DIRECTO de la
   galería y contiene todas las imágenes apiladas. Al inicializar, flexslider
   inserta .flex-viewport en medio, así que este selector se desactiva solo y
   vuelven a verse todos los slides. Evita el flash de imágenes apiladas. */
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
  display: none;
}

/* Miniaturas verticales cuadradas (.flex-control-thumbs de flexslider) */
.woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs {
  flex: 0 0 84px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs li {
  margin: 0;
  width: 84px;
  list-style: none;
}
.woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
  opacity: 1;
  transition: border-color 180ms ease, transform 160ms ease;
}
.woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs img:hover {
  border-color: var(--border-default);
  transform: translateY(-1px);
}
.woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs img.flex-active,
.woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs .flex-active img {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Trigger de zoom (lupa) que añade Woo → chip cuadrado arriba-derecha */
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  color: var(--text-secondary);
  transition: background 160ms ease, color 160ms ease;
}
.woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__trigger:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Etiqueta de oferta sobre la galería = etiqueta negra sólida angular.
   Solo se usa cuando no hay porcentaje que enseñar; con porcentaje manda el
   círculo de más abajo. */
.woocommerce div.product .lyd-pdp__gallery .onsale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  min-height: 0;
  padding: 6px 12px;
  background: var(--badge-sale-bg);
  color: var(--badge-sale-text);
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Descuento en círculo arriba a la derecha, el mismo gesto que en el catálogo.
   Se aparta del disparador del zoom, que vive en esa esquina. */
.woocommerce div.product .lyd-pdp__gallery .onsale--pct {
  top: var(--space-3);
  right: var(--space-3);
  left: auto;
  width: 68px;
  height: 68px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product .lyd-pdp__gallery .onsale--pct ~ .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  top: calc(var(--space-3) + 76px);
}
@media (max-width: 767px) {
  .woocommerce div.product .lyd-pdp__gallery .onsale--pct { width: 56px; height: 56px; font-size: 1rem; }
  .woocommerce div.product .lyd-pdp__gallery .onsale--pct ~ .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    top: calc(var(--space-3) + 64px);
  }
}

/* En tablet/móvil: una sola imagen visible (slider) + tira de miniaturas debajo.
 * Se usa `display: block` en lugar de `flex-direction: column` para que el
 * wrapper mida el 100 % real del contenedor: flexslider calcula el ancho de
 * slide en línea al inicializarse, y en columna se quedaba con la medida de
 * desktop y desbordaba la página. El recálculo lo remata el `resize` sintético
 * de assets/js/main.js. */
@media (max-width: 1024px) {
  .woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery {
    display: block;
  }
  .woocommerce div.product .lyd-pdp__gallery .woocommerce-product-gallery__wrapper,
  .woocommerce div.product .lyd-pdp__gallery .flex-viewport {
    width: 100%;
  }
  /* Miniaturas en fila scrollable bajo la imagen principal. */
  .woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs {
    flex-direction: row;
    flex-basis: auto;
    margin-top: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
  .woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs li { width: 64px; flex: 0 0 64px; }
  .woocommerce div.product .lyd-pdp__gallery .flex-control-thumbs img { width: 64px; height: 64px; }
}

/* ---------------------------------------------------------------------------
   3) Columna info: marca (etiqueta negra), título display, sub, meta
   --------------------------------------------------------------------------- */
.lyd-pdp__head { display: flex; flex-direction: column; gap: var(--space-2); }
/* Descripción corta + meta, agrupadas bajo precio y disponibilidad. Cierra con
   la misma línea fina que enmarca el precio, para separarla del bloque de
   compra (tallas, cantidad y añadir al carrito). */
.lyd-pdp__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

/* Marca = etiqueta NEGRA sólida, no pill */
.lyd-pdp__brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 12px;
  background: var(--ink);
  border-radius: 0;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
/* Ahora la marca lleva a su listado: se comporta como lo que es, un enlace. */
a.lyd-pdp__brand:hover,
a.lyd-pdp__brand:focus-visible { background: var(--accent); color: var(--accent-on); }

/* Con logo, la chapa negra estorba: el logo manda y se pinta limpio. Alto fijo
   para que marcas con logos de proporciones distintas no descoloquen la ficha. */
.lyd-pdp__brand--logo {
  padding: 0;
  background: none;
}
.lyd-pdp__brand--logo:hover,
.lyd-pdp__brand--logo:focus-visible { background: none; opacity: 0.7; }
.lyd-pdp__brand-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* Título display en MAYÚSCULAS, line-height compacto */
.woocommerce div.product .lyd-pdp__info .product_title,
.woocommerce div.product .lyd-pdp__info h1.product_title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  line-height: 1.02;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}
.woocommerce div.product .lyd-pdp__info .woocommerce-product-details__short-description {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 52ch;
}
.woocommerce div.product .lyd-pdp__info .woocommerce-product-details__short-description p {
  margin: 0 0 var(--space-2);
}

.lyd-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.woocommerce div.product .lyd-pdp__meta .woocommerce-product-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  line-height: 1;
  font-size: var(--text-small);
}
.woocommerce div.product .lyd-pdp__meta .woocommerce-review-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-bold);
}
.woocommerce div.product .lyd-pdp__meta .woocommerce-review-link:hover { color: var(--accent-on); }
.lyd-pdp__sku {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
  color: var(--text-tertiary);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}
.lyd-pdp__sku strong { color: var(--text-muted); font-weight: var(--fw-bold); }

/* Estrellas sin depender de la fuente 'star' de Woo (usa glifos ★, negro) */
.woocommerce .lyd-pdp__info .star-rating,
.woocommerce .lyd-crosssell .star-rating {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 1.15em;
  line-height: 1.15;
  font-size: 1em;
  width: 5.8em;
  letter-spacing: 2px;
  font-family: inherit;
  margin: 0;
}
.woocommerce .lyd-pdp__info .star-rating::before,
.woocommerce .lyd-crosssell .star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--rating-empty);
  float: left;
  top: 0; left: 0;
  position: absolute;
}
.woocommerce .lyd-pdp__info .star-rating span,
.woocommerce .lyd-crosssell .star-rating span {
  overflow: hidden;
  float: left;
  top: 0; left: 0;
  position: absolute;
  padding-top: 1.5em;
}
.woocommerce .lyd-pdp__info .star-rating span::before,
.woocommerce .lyd-crosssell .star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  top: 0; left: 0;
  position: absolute;
  color: var(--rating-filled);
}

/* ---------------------------------------------------------------------------
   4) Precio (Woo <p class="price"> con del/ins en oferta) = "isla" con
      líneas 1px arriba/abajo. Precio actual grande, display, NEGRO.
   --------------------------------------------------------------------------- */
.woocommerce div.product .lyd-pdp__info > .price,
.woocommerce div.product .lyd-pdp__info .woocommerce-variation-price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  color: var(--price-discount);
  font-size: 1.9rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1;
}
.woocommerce div.product .lyd-pdp__info .price .woocommerce-Price-amount { font-weight: var(--fw-bold); }
/* "Was" tachado, sans, menor */
.woocommerce div.product .lyd-pdp__info .price del,
.woocommerce div.product .lyd-pdp__info .price del .woocommerce-Price-amount {
  font-family: var(--font-sans);
  color: var(--price-strike);
  text-decoration: line-through;
  font-weight: var(--fw-medium);
  font-size: var(--text-body-lg);
  opacity: 1;
}
/* "Now" en oferta: sigue NEGRO y grande */
.woocommerce div.product .lyd-pdp__info .price ins,
.woocommerce div.product .lyd-pdp__info .price ins .woocommerce-Price-amount {
  color: var(--price-discount);
  text-decoration: none;
  font-weight: var(--fw-bold);
}
.woocommerce div.product .lyd-pdp__info .price .woocommerce-price-suffix {
  flex: 1 0 100%;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
/* La variación inyecta su propio bloque de precio: sin doble borde */
.woocommerce div.product .lyd-pdp__info .woocommerce-variation-price .price {
  border: 0;
  padding: 0;
  font-size: var(--text-h3);
}

/* ---------------------------------------------------------------------------
   5) Stock chip (verde = único semántico)
   --------------------------------------------------------------------------- */
.lyd-pdp__stock {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.lyd-pdp__stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
}
.lyd-pdp__stock-chip svg { width: 14px; height: 14px; stroke-width: 2.4; }
.lyd-pdp__stock-chip--out { background: var(--bg-subtle); color: var(--text-primary); }
/* Últimas unidades: ámbar, no verde. Es un aviso de urgencia, no de
   "todo bien", y tiene que distinguirse del chip normal de un vistazo. */
.lyd-pdp__stock-chip--low { background: var(--warning-bg); color: var(--warning); }
/* Aviso de stock nativo (out of stock / backorder) */
.woocommerce div.product .lyd-pdp__buybox p.stock {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
}
.woocommerce div.product .lyd-pdp__buybox p.stock.out-of-stock { color: var(--error); }
.woocommerce div.product .lyd-pdp__buybox p.stock.in-stock { color: var(--success); }
/* Últimas unidades de la variación elegida: mismo ámbar que el chip de la
   ficha. La clase la añade el filtro woocommerce_get_availability_class. */
.woocommerce div.product .lyd-pdp__buybox p.stock.lyd-stock-low { color: var(--warning); }

/* ---------------------------------------------------------------------------
   6) Buybox: formulario add-to-cart (simple + variable), qty stepper, CTA
   --------------------------------------------------------------------------- */
.woocommerce div.product .lyd-pdp__buybox form.cart {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Fila cantidad + botón (simple.php y variation-add-to-cart-button.php) */
.woocommerce div.product .lyd-pdp__buybox form.cart:not(.variations_form) > .quantity,
.woocommerce div.product .lyd-pdp__buybox .woocommerce-variation-add-to-cart .quantity {
  float: none;
  margin: 0;
}
.woocommerce div.product .lyd-pdp__buybox form.cart:not(.variations_form),
.woocommerce div.product .lyd-pdp__buybox .woocommerce-variation-add-to-cart {
  display: flex;
  /* En fila explícita: `form.cart` de arriba deja flex-direction en column, y
   * sin revertirlo aquí el selector de cantidad se estiraba a todo el ancho en
   * los productos sin combinaciones. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}
/* En variable, la tabla de variaciones ocupa toda la fila y el add-to-cart va aparte */
.woocommerce div.product .lyd-pdp__buybox form.variations_form { display: block; }
.woocommerce div.product .lyd-pdp__buybox .single_variation_wrap { margin-top: var(--space-4); }
.woocommerce div.product .lyd-pdp__buybox .single_variation { margin-bottom: var(--space-3); }

/* Cantidad fija (una unidad en stock, o venta de uno en uno): Woo emite el
   input como type="hidden" y deja el .quantity vacío, que con el borde de abajo
   se veía como un recuadro de 56px sin nada dentro. Fuera; el botón de añadir
   ocupa toda la fila. La clase la pone lyd-variations.js y el :has() cubre el
   caso de que el JS no cargue. */
.woocommerce div.product .lyd-pdp__buybox .quantity.lyd-qty--fija,
.woocommerce div.product .lyd-pdp__buybox .quantity:has( > input.qty[type="hidden"] ) {
  display: none;
}

/* Stepper de cantidad: caja cuadrada con borde NEGRO (56px). El input nativo
   se estila y lyd-variations.js añade los botones −/+ (que invierten a negro). */
.woocommerce div.product .lyd-pdp__buybox .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-base);
  min-height: 56px;
  flex: 0 0 auto;
}
.woocommerce div.product .lyd-pdp__buybox .quantity .qty {
  width: 56px;
  height: 54px;
  border: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: transparent;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product .lyd-pdp__buybox .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product .lyd-pdp__buybox .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lyd-qty__btn {
  width: 52px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  transition: background 160ms ease, color 160ms ease;
}
.lyd-qty__btn:hover { background: var(--ink); color: #fff; }
.lyd-qty__btn:disabled { color: var(--text-tertiary); cursor: not-allowed; background: transparent; }
.lyd-qty__btn svg { width: 18px; height: 18px; stroke-width: 2; }
/* Separadores 1px entre botones e input (refuerza la retícula angular) */
.lyd-qty .lyd-qty__btn--minus { border-right: 1px solid var(--border-strong); }
.lyd-qty .lyd-qty__btn--plus { border-left: 1px solid var(--border-strong); }

/* CTA principal: botón nativo de Woo → look .lyd-btn primario grande
   (negro → hover teal). */
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 18px 32px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 120ms ease;
}
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button:active { transform: scale(0.98); }
/* Esperando a que se elija combinación. Estaba al 40 % de opacidad y en un
   producto variable ese es el PRIMER estado que se ve: gris claro sobre blanco,
   que es justo lo que el cliente describió como "me cuesta encontrar el botón".
   Ahora se lee como un botón de verdad que aún no está armado: fondo claro,
   borde negro sólido y texto negro. */
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button.disabled,
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--bg-base);
  border-color: var(--ink);
  color: var(--ink);
  cursor: not-allowed;
}
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button.disabled:hover,
.woocommerce div.product .lyd-pdp__buybox .single_add_to_cart_button.wc-variation-selection-needed:hover {
  background: var(--bg-base);
  border-color: var(--ink);
  color: var(--ink);
}

/* Etiqueta "Cantidad" sobre el selector: la imprime
   `woocommerce_before_add_to_cart_quantity` (functions.php). Ocupa toda la fila
   para caer encima de la caja y del botón, no al lado. */
.lyd-qty-label {
  flex: 0 0 100%;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
/* En variable el botón ocupa el ancho bajo el precio de la variante */
.woocommerce div.product .lyd-pdp__buybox .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 220px;
}

/* ---------------------------------------------------------------------------
   7) Selector de variaciones: fallback <select> + swatches/pills (JS)
      Angular (radios 0). Seleccionado = NEGRO sólido (teal solo puntual).
   --------------------------------------------------------------------------- */
.lyd-variants {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.lyd-variant-group { display: flex; flex-direction: column; gap: var(--space-3); }
.lyd-variant-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.lyd-variant-group__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
/* Select nativo (fallback sin JS): estilado y visible, angular */
.woocommerce div.product .lyd-variant-group__control select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}
.lyd-variant-group__control .reset_variations {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.lyd-variant-group__control .reset_variations:hover { border-bottom-color: var(--accent); color: var(--accent-on); }
/* Cuando el JS construye la capa visual, se oculta el select nativo */
.lyd-variant-group--enhanced .lyd-variant-group__control select { display: none; }

/* ----- Swatches de color (cuadrados angulares) ----- */
.lyd-swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lyd-swatch {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 0;
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  background-clip: padding-box;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.lyd-swatch:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.lyd-swatch__fill {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.10);
}
.lyd-swatch.is-selected { border-color: var(--ink); }
.lyd-swatch.is-selected::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 0;
  border: 2px solid var(--ink);
  pointer-events: none;
}
.lyd-swatch.is-out { cursor: not-allowed; opacity: 0.5; }
.lyd-swatch.is-out::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--text-secondary);
  transform: rotate(-30deg);
  pointer-events: none;
}
.lyd-swatch__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: var(--fw-bold);
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  z-index: 2;
}
.lyd-swatch:hover .lyd-swatch__tooltip { opacity: 1; }

/* ----- Pills de talla (cuadradas) ----- */
.lyd-sizes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 64px));
  gap: var(--space-2);
}
.lyd-size {
  position: relative;
  min-height: 56px;
  padding: 8px 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
  font-variant-numeric: tabular-nums;
}
/* Variante para etiquetas largas (sabores, "Talla 12 (99cm)"…): en vez de la
   retícula de cuadrados, fichas que se ajustan a su texto y saltan de línea.
   La aplica assets/js/lyd-variations.js según la longitud de las opciones. */
.lyd-sizes--texto {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
}
.lyd-sizes--texto .lyd-size {
  width: auto;
  min-height: 44px;
  padding: 10px 14px;
  font-size: var(--text-small);
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
}
.lyd-sizes--texto .lyd-size__num { white-space: normal; overflow-wrap: anywhere; }

.lyd-size__num { display: block; line-height: 1; }
.lyd-size__hint {
  display: block;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-muted);
}
.lyd-size:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
/* seleccionada = NEGRO sólido */
.lyd-size--selected {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.lyd-size--selected .lyd-size__hint { color: rgba(255, 255, 255, 0.7); }
.lyd-size--selected:hover { transform: none; background: #000; }
/* pocas unidades (presentacional) */
.lyd-size--low { border-color: var(--accent); }
.lyd-size--low .lyd-size__hint { color: var(--accent-on); }
.lyd-size--low::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  border: 1.5px solid var(--bg-base);
}
/* agotada */
.lyd-size--out {
  cursor: not-allowed;
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
  border-style: dashed;
  background: var(--bg-elevated);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.lyd-size--out:hover { transform: none; border-color: var(--border-subtle); }
/* avísame (presentacional) */
.lyd-size--notify {
  cursor: pointer;
  color: var(--text-muted);
  border-style: dashed;
  border-color: var(--border-default);
  background: var(--bg-base);
}
.lyd-size--notify:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 767px) {
  .lyd-sizes:not(.lyd-sizes--texto) { grid-template-columns: repeat(5, 1fr); }
  .lyd-swatch { width: 52px; height: 52px; }
}

/* ---------------------------------------------------------------------------
   8) Confianza en la ficha: toda en la banda oscura
   Aquí vivieron dos bloques claros —.lyd-trust-grid (envíos / devoluciones /
   pago) y .lyd-pdp__usp (garantía, envío neutro, atención, compra protegida)—
   y el cliente señaló los dos como duplicado de .lyd-trust-strip (punto 9).
   Se eliminaron: los argumentos de confianza van solo en la banda.
   --------------------------------------------------------------------------- */

/* Sharing / meta nativo (si algún plugin lo inyecta) */
.woocommerce div.product .lyd-pdp__info .woocommerce-product-sharing,
.woocommerce div.product .lyd-pdp__info .product_meta {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   9) Trust-strip: banda NEGRA full-width (bleed) con iconos teal sutiles
   --------------------------------------------------------------------------- */
.lyd-trust-strip {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  /* Full-bleed dentro del .lyd-container centrado (max-width). */
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-6);
  margin-block: var(--space-4) var(--space-10);
}
.lyd-trust-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  text-align: center;
}
.lyd-trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  font-size: var(--text-small);
}
.lyd-trust-strip__icon {
  width: 38px; height: 38px;
  border-radius: 0;
  background: rgba(0, 233, 203, 0.14);
  color: var(--brand-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.lyd-trust-strip__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.lyd-trust-strip__title {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-bold);
  color: #fff;
}
.lyd-trust-strip__hint { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: var(--text-micro); }

@media (max-width: 1024px) {
  .lyd-trust-strip__row { padding-inline: var(--gutter-tablet); }
}
/* En móvil, 2×2: el cliente pidió expresamente que esta banda salga "en dos
   líneas" en lugar de las cuatro filas apiladas que había antes. */
@media (max-width: 767px) {
  .lyd-trust-strip__row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-3);
    padding-inline: var(--gutter-mobile);
    text-align: left;
  }
  .lyd-trust-strip__item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-2);
    font-size: var(--text-micro);
  }
  .lyd-trust-strip__icon { width: 30px; height: 30px; }
  .lyd-trust-strip__icon svg { width: 15px; height: 15px; }
}

/* ---------------------------------------------------------------------------
   10) Pestañas de detalle (woocommerce_output_product_data_tabs)
       .is-active (Woo usa li.active) → borde inferior NEGRO 2px
   --------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs {
  padding-block: var(--space-8) var(--space-12);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--text-primary); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--text-primary);
  border-bottom-color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: 1.65;
  max-width: 72ch;
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}
.woocommerce div.product .woocommerce-tabs .panel p { margin: 0 0 var(--space-4); }
/* Tabla de "Información adicional" (atributos) → tabla de specs angular */
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  border-top: 1px solid var(--border-subtle);
  text-align: left;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:first-child th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:first-child td { border-top: 0; }
.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-micro);
  width: 34%;
  background: var(--bg-elevated);
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes td { color: var(--text-primary); }
/* Filas alternas para lectura tipo specs */
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:nth-child(even) td,
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:nth-child(even) th { background: var(--bg-elevated); }

/* ---------------------------------------------------------------------------
   10 bis) Valoraciones: listado + formulario
   Se desregistra woocommerce-general, así que este bloque salía con los
   estilos por defecto del navegador. Se rehace entero con el lenguaje del
   re-skin: cantos rectos, etiquetas condensadas en mayúsculas y CTA negro.
   --------------------------------------------------------------------------- */
.woocommerce div.product #reviews { max-width: 72ch; }
.woocommerce div.product #reviews #comments { margin-bottom: var(--space-10); }
.woocommerce div.product #reviews .woocommerce-noreviews {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border-left: 3px solid var(--ink);
  color: var(--text-secondary);
}

/* Listado de valoraciones publicadas */
.woocommerce div.product #reviews ol.commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.woocommerce div.product #reviews ol.commentlist li { margin: 0; }
.woocommerce div.product #reviews .comment_container {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
}
.woocommerce div.product #reviews .comment_container img.avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  margin: 0;
  position: static;
  padding: 0;
  background: var(--bg-elevated);
}
.woocommerce div.product #reviews .comment-text { margin: 0; border: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.woocommerce div.product #reviews .comment-text .meta {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}
.woocommerce div.product #reviews .comment-text .woocommerce-review__author {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.woocommerce div.product #reviews .comment-text .description p:last-child { margin-bottom: 0; }
/* Estrellas de una valoración publicada: mismo truco de glifos que la ficha. */
.woocommerce div.product #reviews .comment-text .star-rating {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 1.15em;
  line-height: 1.15;
  width: 5.8em;
  letter-spacing: 2px;
  font-family: inherit;
  margin: 0 0 var(--space-2);
  float: none;
}
.woocommerce div.product #reviews .comment-text .star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--rating-empty);
  position: absolute;
  top: 0;
  left: 0;
}
.woocommerce div.product #reviews .comment-text .star-rating span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 1.5em;
}
.woocommerce div.product #reviews .comment-text .star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--rating-filled);
  position: absolute;
  top: 0;
  left: 0;
}

/* Formulario */
.woocommerce div.product #review_form_wrapper { border-top: 1px solid var(--border-subtle); padding-top: var(--space-8); }
.woocommerce div.product #reviews #respond { margin: 0; border: 0; padding: 0; }
.woocommerce div.product #reviews .comment-reply-title {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}
.woocommerce div.product #reviews .comment-reply-title small { display: block; margin-top: var(--space-2); }
.woocommerce div.product #reviews .comment-reply-title small a {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce div.product #reviews .comment-notes {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
.woocommerce div.product #reviews .comment-form { display: flex; flex-direction: column; gap: var(--space-5); }
.woocommerce div.product #reviews .comment-form > p { margin: 0; }
.woocommerce div.product #reviews .comment-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.woocommerce div.product #reviews .comment-form .required { color: var(--error); }

.woocommerce div.product #reviews .comment-form input[type="text"],
.woocommerce div.product #reviews .comment-form input[type="email"],
.woocommerce div.product #reviews .comment-form textarea,
.woocommerce div.product #reviews .comment-form select {
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  font: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.woocommerce div.product #reviews .comment-form textarea { min-height: 132px; resize: vertical; }
.woocommerce div.product #reviews .comment-form input:focus,
.woocommerce div.product #reviews .comment-form textarea:focus,
.woocommerce div.product #reviews .comment-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* Selector de puntuación. El JS de Woo convierte el select en estos enlaces y
   oculta el select; si el JS no llega, el select sigue siendo usable. */
.woocommerce div.product #reviews .comment-form-rating { margin: 0; }
.woocommerce div.product #reviews p.stars {
  display: inline-flex;
  gap: var(--space-1);
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
}
.woocommerce div.product #reviews p.stars span { display: inline-flex; gap: var(--space-1); }
.woocommerce div.product #reviews p.stars a {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  text-indent: -999em;
  overflow: hidden;
  text-decoration: none;
}
.woocommerce div.product #reviews p.stars a::before {
  content: "\2605";
  position: absolute;
  inset: 0;
  text-indent: 0;
  line-height: 1;
  color: var(--rating-empty);
  transition: color 120ms ease;
}
/* Al pasar el ratón se rellenan hasta la estrella señalada. */
.woocommerce div.product #reviews p.stars:hover a::before { color: var(--rating-filled); }
.woocommerce div.product #reviews p.stars:hover a:hover ~ a::before { color: var(--rating-empty); }
/* Ya elegida: Woo marca el enlace con .active y el contenedor con .selected. */
.woocommerce div.product #reviews p.stars.selected a:not(.active)::before { color: var(--rating-filled); }
.woocommerce div.product #reviews p.stars.selected a.active::before { color: var(--rating-filled); }
.woocommerce div.product #reviews p.stars.selected a.active ~ a::before { color: var(--rating-empty); }

/* Consentimiento de cookies: casilla y texto en línea, sin mayúsculas. */
.woocommerce div.product #reviews .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.woocommerce div.product #reviews .comment-form-cookies-consent input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  flex: 0 0 18px;
  accent-color: var(--ink);
}
.woocommerce div.product #reviews .comment-form-cookies-consent label {
  margin: 0;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

/* Botón de envío: mismo primario negro que el añadir al carrito. */
.woocommerce div.product #reviews .form-submit { margin: 0; }
.woocommerce div.product #reviews .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 56px;
  padding: 18px 32px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 120ms ease;
}
.woocommerce div.product #reviews .form-submit input[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.woocommerce div.product #reviews .form-submit input[type="submit"]:active { transform: scale(0.98); }

@media (max-width: 767px) {
  .woocommerce div.product #reviews .comment_container { flex-direction: column; }
  .woocommerce div.product #reviews .form-submit input[type="submit"] { width: 100%; }
}

/* ---------------------------------------------------------------------------
   11) Cross-sell / relacionados (grid de tarjetas .lyd-card estilo Salomón)
   Nota: woo-archive.css NO se encola en la ficha, así que replicamos aquí el
   estilo de card (incl. badges) acotado a .lyd-crosssell.
   --------------------------------------------------------------------------- */
.woocommerce .lyd-crosssell {
  padding-block: var(--space-12);
  border-top: 1px solid var(--border-subtle);
}
/* Título accesible generado por Woo (usamos nuestra cabecera propia) */
.woocommerce .lyd-crosssell > h2:not(.lyd-crosssell__title) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lyd-crosssell__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.lyd-crosssell__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.lyd-crosssell__kicker::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--accent);
}
.lyd-crosssell__title {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  color: var(--text-primary);
}

/* Grid: 4 / 3 / 2 columnas, líneas finas entre cards (gap 2px sobre subtle) */
.woocommerce .lyd-crosssell ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.woocommerce .lyd-crosssell ul.products::before,
.woocommerce .lyd-crosssell ul.products::after { content: none; display: none; }

/* Card (plana, angular; hover = fondo elevado + zoom de imagen) */
.woocommerce .lyd-crosssell ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 200ms ease;
}
.woocommerce .lyd-crosssell ul.products li.product:hover { background: var(--bg-elevated); }
.woocommerce .lyd-crosssell .lyd-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-elevated);
  overflow: hidden;
}
.woocommerce .lyd-crosssell .lyd-card__media-link { display: block; width: 100%; height: 100%; }
.woocommerce .lyd-crosssell .lyd-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.woocommerce .lyd-crosssell ul.products li.product:hover .lyd-card__media img { transform: scale(1.05); }
.woocommerce .lyd-crosssell .lyd-card__badges {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
/* Badges de card (sale = negro, new = teal, out = negro) — angular */
.woocommerce .lyd-crosssell .lyd-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.woocommerce .lyd-crosssell .lyd-badge--sale { background: var(--badge-sale-bg); color: var(--badge-sale-text); }
.woocommerce .lyd-crosssell .lyd-badge--new { background: var(--badge-new-bg); color: var(--badge-new-text); }
.woocommerce .lyd-crosssell .lyd-badge--out { background: var(--badge-out-bg); color: var(--badge-out-text); }
.woocommerce .lyd-crosssell .lyd-card__fav {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 38px; height: 38px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 180ms ease, color 180ms ease, background 180ms ease;
}
.woocommerce .lyd-crosssell ul.products li.product:hover .lyd-card__fav { opacity: 1; }
.woocommerce .lyd-crosssell .lyd-card__fav:hover { color: var(--ink); background: #fff; }
.woocommerce .lyd-crosssell .lyd-card__fav svg { width: 18px; height: 18px; stroke-width: 1.6; }
.woocommerce .lyd-crosssell ul.products li.product.outofstock .lyd-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}
/* Quick-add (add-to-cart AJAX nativo envuelto) → barra negra, hover teal */
.woocommerce .lyd-crosssell .lyd-card__quickadd {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.woocommerce .lyd-crosssell .lyd-card__quickadd a.button,
.woocommerce .lyd-crosssell .lyd-card__quickadd a.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: background 180ms ease, color 180ms ease;
}
.woocommerce .lyd-crosssell .lyd-card__quickadd a.button:hover,
.woocommerce .lyd-crosssell .lyd-card__quickadd a.add_to_cart_button:hover { background: var(--accent); color: var(--accent-on); }
.woocommerce .lyd-crosssell .lyd-card__quickadd a.added { display: none; }
.woocommerce .lyd-crosssell .lyd-card__quickadd a.loading { opacity: 0.7; }
.woocommerce .lyd-crosssell .lyd-card__quickadd .added_to_cart { display: none; }
@media (hover: hover) {
  .woocommerce .lyd-crosssell ul.products li.product:hover .lyd-card__quickadd { opacity: 1; transform: translateY(0); }
}
@media (hover: none) {
  .woocommerce .lyd-crosssell .lyd-card__quickadd { opacity: 1; transform: none; }
  .woocommerce .lyd-crosssell .lyd-card__fav { opacity: 1; }
}
/* Cuerpo de la card */
.woocommerce .lyd-crosssell .lyd-card__body {
  padding: var(--space-4) var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.woocommerce .lyd-crosssell .lyd-card__brand {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.woocommerce .lyd-crosssell .lyd-card__name {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce .lyd-crosssell .lyd-card__name:hover { color: var(--accent-on); }
.woocommerce .lyd-crosssell .lyd-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.woocommerce .lyd-crosssell .lyd-card__bottom .lyd-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.woocommerce .lyd-crosssell .lyd-card__bottom .lyd-price__now {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--price-discount);
  line-height: 1;
}
.woocommerce .lyd-crosssell .lyd-card__bottom .lyd-price__was { margin-left: 0; font-size: var(--text-small); }
.woocommerce .lyd-crosssell .lyd-card__bottom .lyd-price .price,
.woocommerce .lyd-crosssell .lyd-card__bottom .lyd-price ins {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--price-text);
}
.woocommerce .lyd-crosssell .lyd-card__bottom .lyd-price del { color: var(--price-strike); font-size: var(--text-small); }
.woocommerce .lyd-crosssell .lyd-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}
.woocommerce .lyd-crosssell .lyd-card__rating svg { width: 14px; height: 14px; color: var(--rating-filled); }

@media (max-width: 1024px) {
  .woocommerce .lyd-crosssell ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .woocommerce .lyd-crosssell ul.products { grid-template-columns: repeat(2, 1fr); }
  .lyd-crosssell__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ---------------------------------------------------------------------------
   12) Barra CTA sticky (solo móvil <768px) — banda NEGRA
   --------------------------------------------------------------------------- */
.lyd-sticky-cta { display: none; }
@media (max-width: 767px) {
  .lyd-sticky-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 92;
    background: var(--ink);
    border-top: 1px solid var(--ink);
    box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.16);
    padding: var(--space-3) var(--gutter-mobile) calc(var(--space-3) + env(safe-area-inset-bottom));
  }
  .lyd-sticky-cta__price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: var(--fw-bold);
    color: #fff;
    line-height: 1.1;
  }
  .lyd-sticky-cta__price del {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: var(--fw-medium);
  }
  .lyd-sticky-cta__price ins { text-decoration: none; color: #fff; }
  .lyd-sticky-cta__price .woocommerce-price-suffix { display: none; }
  /* El botón (.lyd-btn, negro por defecto) sobre banda negra → invertir a blanco */
  .lyd-sticky-cta__btn {
    flex: 1 1 auto;
    min-height: 52px;
    background: #fff;
    border-color: #fff;
    color: var(--ink);
  }
  .lyd-sticky-cta__btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
  }
  /* Deja aire al final del contenido para no quedar tapado por la barra */
  .woocommerce div.product.lyd-pdp { padding-bottom: calc(var(--sticky-cta-h, 84px)); }
}

/* ---------------------------------------------------------------------------
   13) Notices de WooCommerce dentro de la ficha — angular
   --------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce div.product .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce div.product .woocommerce-notices-wrapper .woocommerce-error {
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--ink);
  background: var(--bg-elevated);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
}

/* La galería responsive se resuelve en el bloque 2, dentro del
   @media (max-width: 1024px) que hay junto a los estilos de la galería.
   Antes había aquí un override que apagaba flexslider en móvil y apilaba todas
   las imágenes; el cliente lo señaló como problema (había que hacer scroll por
   toda la galería para llegar al botón de comprar). */