/* ============================================================
   Ficha de producto.

   B3 no tiene ficha individual, así que esta página es terreno nuevo. No se inventa ningún
   valor: todo sale de los tokens del prototipo y de sus mismas clases de botón, eyebrow,
   contenedor y titular.

   La ficha se compone con los bloques públicos de WooCommerce, así que aquí se visten **sus**
   clases —galería, precio, formulario de compra, tabla de atributos— con el lenguaje de B3.
   ============================================================ */

/*
 * El aire de arriba se recorta; el de abajo se retira del todo.
 *
 * Con la separación de sección completa, la galería empujaba «About this piece» hasta los
 * 1448 px, fuera de la primera pantalla. Y entre el final de las miniaturas y ese título
 * quedaban 115 px, porque se sumaban la separación inferior de este bloque y la superior del
 * siguiente. Como ambas zonas comparten fondo y se leen como una sola, basta con la de abajo.
 */
.b3-ficha {
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 0;
  background: var(--b3-warm-white);
  color: var(--b3-ink);
}

/*
 * El bloque principal usa el mismo ancho que la pareja de abajo. Con el contenedor general
 * —más ancho— la columna de la derecha se estiraba y quedaba un hueco grande a la derecha del
 * botón, porque el título, el precio y la descripción corta no dan para tanto.
 */
.b3-ficha > .b3-container {
  max-width: calc(1200px + var(--b3-gutter) * 2);
}

/*
 * La columna de la foto se acota en píxeles, no en fracciones. Antes era 6fr de 11 y daba 682 px
 * de ancho: una fotografía de reloj a ese tamaño no aporta más detalle, solo desplaza hacia
 * abajo el precio, la disponibilidad y el botón.
 */
.b3-ficha__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: var(--b3-pg-gap);
  align-items: start;
}

/* ---------- Galería ---------- */
.b3-ficha .b3-ficha__media .wp-block-woocommerce-product-image-gallery,
.b3-ficha .b3-ficha__media .woocommerce-product-gallery {
  margin: 0;
  width: 100%;
  max-width: none;
  float: none;
}

/*
 * «contain» y no «cover»: las fotografías de Citizen son verticales —867 × 1600— y recortarlas
 * a 4/5 cortaba la correa por arriba y por abajo. Con «contain» se ve la pieza entera, que es
 * lo que se está vendiendo, y el aire alrededor lo pone el propio marco.
 *
 * El marco es cuadrado porque un reloj vertical dentro de un cuadrado deja margen a los lados
 * sin estirar la columna hacia abajo.
 */
.b3-ficha__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  box-sizing: border-box;
  background: var(--b3-ivory);
}

/* Las miniaturas se quedan debajo, sin marco ni relleno: ahí sí conviene la foto ajustada. */
.b3-ficha__media .flex-control-thumbs img {
  padding: 0;
  background: none;
}

/* Las miniaturas de WooCommerce, con el mismo trazo que el resto */
.b3-ficha__media .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.b3-ficha__media .flex-control-thumbs li {
  flex: 0 0 5.5rem;
}

.b3-ficha__media .flex-control-thumbs img {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--b3-line);
  cursor: pointer;
}

/*
 * La insignia «Sale!» la pinta WooCommerce con sus propios colores: blanco sobre #958e09,
 * que da 3,41:1 y no llega al 4,5:1 que exige WCAG 2.1 AA para texto pequeño. Se reviste con
 * los tokens de B3 (blanco sobre champán profundo, 6,5:1) en lugar de ocultarla, porque la
 * rebaja es información real para quien compra.
 */
.b3-ficha .wp-block-woocommerce-product-image-gallery span.onsale {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.8rem;
  /* WooCommerce la dibuja como pastilla ovalada (border-radius 100% y min-height); B3 no usa
     formas redondeadas, así que se devuelve al rectángulo del resto de etiquetas. */
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  background: var(--b3-champagne-deep);
  color: var(--b3-white);
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.b3-ficha__media .woocommerce-product-gallery {
  position: relative;
}

/* Párrafos de la descripción corta: el espaciado lo pone el contenedor, no el primero. */
.b3-ficha__corta p {
  margin: 0 0 0.85rem;
}

.b3-ficha__corta p:last-child {
  margin-bottom: 0;
}

/* Sin fotografía: el mismo hueco propio que usa la tarjeta, a mayor tamaño. */
.b3-ficha__sinfoto {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--b3-ivory);
  border: 1px solid var(--b3-line);
  color: var(--b3-champagne-deep);
}

.b3-ficha__sinfoto .b3-icon {
  width: 64px;
  height: 64px;
  opacity: 0.75;
}

/* ---------- Columna de información ---------- */
.b3-ficha__titulo {
  margin-bottom: 1rem;
}

.b3-ficha__precio,
.b3-ficha__precio .price {
  font-family: var(--b3-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--b3-ink);
}

.b3-ficha__precio del {
  margin-right: 0.6rem;
  font-size: 1.1rem;
  color: var(--b3-ink-muted);
  text-decoration: line-through;
}

.b3-ficha__precio ins {
  text-decoration: none;
}

.b3-ficha .b3-ficha__stock {
  margin-top: 0.85rem;
}

.b3-ficha__corta {
  max-width: 52ch;
  margin-top: 1.25rem;
  line-height: 1.7;
  color: var(--b3-ink-muted);
}

/* ---------- Formulario de compra, el nativo de WooCommerce ---------- */
.b3-ficha__compra form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.b3-ficha__compra .quantity {
  display: flex;
  align-items: center;
}

.b3-ficha__compra .quantity label {
  font-size: var(--b3-fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.b3-ficha__compra .quantity input[type='number'],
.b3-ficha__compra input.qty {
  width: 5.5rem;
  min-height: 3.375rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgb(29 25 20 / 0.28);
  border-radius: 0;
  background: var(--b3-white);
  font: inherit;
  font-size: 1rem;
  color: var(--b3-ink);
  text-align: center;
  transition: border-color 350ms var(--b3-ease);
}

.b3-ficha__compra input.qty:hover {
  border-color: rgb(29 25 20 / 0.5);
}

.b3-ficha__compra input.qty:focus {
  border-color: var(--b3-champagne-deep);
}

/* El botón de WooCommerce, con el aspecto del botón oscuro de B3 */
.b3-ficha__compra button[type='submit'],
.b3-ficha__compra .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.375rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--b3-ink);
  border-radius: 0;
  background: var(--b3-ink);
  font-family: var(--b3-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b3-white);
  cursor: pointer;
  transition: background-color 350ms var(--b3-ease), border-color 350ms var(--b3-ease);
}

.b3-ficha__compra button[type='submit']:hover,
.b3-ficha__compra .single_add_to_cart_button:hover {
  background: var(--b3-champagne-deep);
  border-color: var(--b3-champagne-deep);
}

.b3-ficha__compra button[type='submit']:disabled,
.b3-ficha__compra .single_add_to_cart_button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Avisos de WooCommerce ---------- */
.b3-ficha .woocommerce-message,
.b3-ficha .woocommerce-error,
.b3-ficha .woocommerce-info {
  margin: 0 0 1.75rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--b3-champagne-deep);
  background: var(--b3-ivory);
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink);
  list-style: none;
}

.b3-ficha .woocommerce-error {
  border-left-color: #8f2b20;
  color: #8f2b20;
}

.b3-ficha .woocommerce-message a,
.b3-ficha .woocommerce-error a,
.b3-ficha .woocommerce-info a {
  color: var(--b3-champagne-deep);
  font-weight: 600;
}

/* ---------- Descripción completa ---------- */
.b3-ficha-detalle {
  padding-block: var(--b3-pg-section);
  background: var(--b3-white);
}

.b3-ficha-detalle__texto {
  max-width: 62ch;
  line-height: 1.7;
  color: var(--b3-ink-muted);
}

.b3-ficha-detalle__texto p {
  margin: 0 0 1rem;
}

.b3-ficha-detalle__texto :is(h2, h3) {
  font-family: var(--b3-display);
  color: var(--b3-ink);
}

/* ---------- SKU, categorías y ficha técnica ---------- */
.b3-ficha-datos {
  padding-block: var(--b3-pg-section);
  background: var(--b3-ivory);
}

.b3-ficha-datos__titulo {
  font-family: var(--b3-display);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

.b3-ficha-datos__lista {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  max-width: 44rem;
}

.b3-ficha-datos__lista dt {
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.b3-ficha-datos__lista dd {
  margin: 0;
  color: var(--b3-ink);
}

.b3-ficha-datos__lista a {
  color: var(--b3-ink);
}

.b3-ficha-datos__lista a:hover {
  color: var(--b3-champagne-deep);
}

/* La tabla de atributos de WooCommerce */
.b3-ficha-datos__tabla {
  margin-top: 1.5rem;
  max-width: 44rem;
  overflow-x: auto;
}

.b3-ficha-datos__tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--b3-fs-small);
}

.b3-ficha-datos__tabla th,
.b3-ficha-datos__tabla td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--b3-line);
  text-align: left;
  vertical-align: top;
}

.b3-ficha-datos__tabla th {
  width: 12rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.b3-ficha-datos__tabla td p {
  margin: 0;
}

/* ---------- Relacionados ---------- */
.b3-ficha-rel {
  padding-block: var(--b3-pg-section);
  background: var(--b3-warm-white);
}

.b3-ficha-rel__head .b3-h2 {
  margin-top: 0.75rem;
}

.b3-ficha-rel__grid {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Igual que en el catálogo: la tarjeta se estira al alto de su fila y el botón se apoya abajo. */
.b3-ficha-rel__grid .b3-product {
  align-content: stretch;
  grid-template-rows: auto 1fr;
}

.b3-ficha-rel__grid .b3-product__info {
  align-content: start;
}

.b3-ficha-rel__grid .b3-product__cta {
  margin-top: auto;
  align-self: end;
}

.b3-ficha-rel__grid .b3-product__name {
  min-height: calc(2 * 1.35em);
}

/* ============================================================
   Adaptación a pantallas estrechas.
   ============================================================ */
@media (max-width: 1023px) {
  .b3-ficha__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .b3-ficha__media img,
  .b3-ficha__sinfoto {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  /* Los relacionados, en rejilla y no en carrusel, como en el catálogo. */
  .b3-ficha-rel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    overflow-x: visible;
  }

  .b3-ficha-rel__grid .b3-product {
    flex: initial;
  }

  .b3-ficha__compra form.cart {
    align-items: stretch;
    flex-direction: column;
  }

  .b3-ficha__compra button[type='submit'],
  .b3-ficha__compra .single_add_to_cart_button {
    width: 100%;
  }

  .b3-ficha-datos__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .b3-ficha-datos__lista dd {
    margin-bottom: 0.75rem;
  }

  .b3-ficha-datos__tabla th {
    width: auto;
  }
}

@media (max-width: 559px) {
  .b3-ficha-rel__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Galería sin fotografía ----------
   WooCommerce dibuja aquí su marcador gris con una URL de imagen, no con HTML, así que no hay
   filtro que sustituirlo; se viste su propio contenedor con el hueco de B3. El icono va en el
   CSS como dato, de modo que no depende de ningún archivo generado. */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--b3-ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236f5935' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='19' r='8.5'/%3E%3Ccircle cx='16' cy='19' r='6'/%3E%3Cpath d='M12.5 8.5h7l2 2.5-5.5 5-5.5-5z'/%3E%3Cpath d='M10.5 11h11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px 64px;
  border: 1px solid var(--b3-line);
}

/* La imagen gris del plugin se retira, pero su texto alternativo sigue ahí para quien no ve. */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder img {
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 1023px) {
  .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Tamaño de la fotografía en «Related Pieces» ---------- */

/*
 * Los relacionados van un punto por debajo del catálogo: son una sugerencia al final de la
 * ficha, no el escaparate. Mismo marco cuadrado, pero con más aire alrededor de la pieza, que
 * es lo que la hace ver algo más pequeña sin tocar el ancho ni romper las cuatro columnas.
 */
.b3-ficha-rel__grid .b3-product__media {
  aspect-ratio: 1 / 1;
  --b3-foto-aire: 12%;
}

/* ============================================================
   Distribución de la ficha: descripción y especificaciones, lado a lado.
   ============================================================ */

/*
 * El problema que resuelve: la descripción y la ficha técnica ocupaban dos franjas completas,
 * una debajo de otra, cada una con su fondo. Como ninguno de los dos textos es largo, cada
 * franja quedaba medio vacía y la página se estiraba sin necesidad.
 *
 * En escritorio van en dos columnas dentro del mismo contenedor: el texto a la izquierda, donde
 * se lee, y los datos a la derecha, donde se consultan. En móvil se apilan, que es lo único que
 * cabe.
 *
 * Las alturas las decide el contenido: aquí no se fija ninguna.
 */
.b3-ficha-doble {
  box-sizing: border-box;
  width: 100%;
  /* El contenedor pedido: 1200 px de contenido más los márgenes laterales del diseño. */
  max-width: calc(1200px + var(--b3-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--b3-gutter);
  /* Móvil: 36 px. La altura de la separación se sube en escritorio más abajo. */
  padding-block: 2.25rem;
  /*
   * Sin fondo propio.
   *
   * Con un fondo blanco, la diferencia de alto entre las dos columnas —la ficha técnica es
   * bastante más alta que una descripción corta— se veía como un recuadro vacío debajo del
   * texto. Compartiendo el fondo del bloque de producto, ese hueco pasa a ser aire de página,
   * que es lo que realmente es, y la ficha se lee como una sola zona continua.
   */
  background: var(--b3-warm-white);
}

/*
 * Cada bloque trae su propia sección con fondo y aire propios, pensados para ir a lo ancho.
 * Dentro de esta pareja sobran los dos: el fondo lo pone el contenedor y la separación también.
 */
.b3-ficha-doble > .b3-ficha-detalle,
.b3-ficha-doble > .b3-ficha-datos {
  padding-block: 0;
  background: none;
}

/* El contenedor interno de cada bloque deja de limitar el ancho: ya lo hace la pareja. */
.b3-ficha-doble > section > .b3-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* La descripción se lee mejor con medida corta, pero dentro de su columna, no de la página. */
.b3-ficha-doble .b3-ficha-detalle__texto {
  max-width: none;
}

@media (min-width: 768px) {
  .b3-ficha-doble {
    display: grid;
    /* La descripción pide más ancho que una tabla de ocho filas. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
    /* Escritorio: 60 px, dentro del margen pedido. */
    padding-block: 3.75rem;
  }

  /*
   * Las especificaciones se quedan sobre el marfil del diseño, pero como panel y no como
   * franja: así se siguen distinguiendo del texto sin partir la página en dos bandas.
   */
  .b3-ficha-doble > .b3-ficha-datos {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--b3-ivory);
  }
}

/*
 * El título de cada columna es el primer elemento de la pareja, así que su margen superior se
 * suma al relleno del contenedor y no aporta nada: solo aleja el texto de la galería. Se retira,
 * y la separación la marca el contenedor, que es donde está decidida.
 */
.b3-ficha-doble > section > .b3-container > .b3-ficha-datos__titulo:first-child {
  margin-top: 0;
}

/*
 * Reserva del alto de la galería desde el primer render.
 *
 * La galería de WooCommerce es un carrusel que se monta con JavaScript. Hasta que se monta, sus
 * diapositivas **se apilan una debajo de otra**: con dos fotografías la galería medía 2431 px en
 * lugar de 582, y al arrancar el carrusel todo lo que venía debajo daba un salto de unos 1850 px.
 * Era el 0,32 de desplazamiento de diseño que medíamos, y venía de aquí, no del bloque que se
 * movía.
 *
 * Se deja visible solo la primera diapositiva, que es la que se ve de todas formas. Así el hueco
 * que ocupa la galería es el definitivo desde el principio.
 *
 * No hace falta deshacerlo después: flexslider escribe `display: block` **en el atributo style**
 * de cada diapositiva al montarse, y el estilo en línea gana a esta regla. Si el JavaScript no
 * llega a ejecutarse, se ve la fotografía principal, que es el comportamiento correcto.
 *
 * El selector va cargado de clases a propósito: WooCommerce oculta y muestra estas
 * diapositivas con «.woocommerce div.product div.images .woocommerce-product-gallery__image:
 * nth-child(n+2)», que pesa más que un selector corto. Se iguala por especificidad, no con
 * «!important», para que siga siendo una regla normal que otra pueda ajustar.
 */
.b3 .b3-ficha .b3-ficha__media .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n + 2) {
  display: none;
}

/*
 * El hueco del carrusel, reservado desde que existe.
 *
 * Flexslider crea «.flex-viewport» alrededor de las diapositivas y **le fija el alto un momento
 * después**. En ese intervalo el contenedor crece hasta apilar todas las fotografías —1840 px en
 * lugar de 460—, y todo lo que hay debajo salta. Ese intervalo es el desplazamiento de diseño
 * que quedaba.
 *
 * Con la proporción reservada, el contenedor mide lo correcto desde el instante en que aparece,
 * en cualquier ancho de pantalla: la fotografía es cuadrada, así que el alto es el ancho de la
 * columna. Cuando flexslider escribe su alto en línea, ese valor manda y aquí ya no se nota.
 *
 * No es una animación ni un retardo: es el espacio final, reservado antes de necesitarlo.
 */
.b3 .b3-ficha .b3-ficha__media .flex-viewport {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}