/* ============================================================
   FICHA DE PRODUCTO
   Override de `woocommerce/single-product.php` y
   `content-single-product.php`.

   En A es el template de Elementor 333770 «Single product –
   Rediseño». Las medidas salen de su `_elementor_data`, leído
   el 2026-09-23.

   Entregas 1 a 3: estructura, bloque de compra y relacionados.

   Ningún color literal: todo sale de tokens.css.
   Todo prefijado con `.t-ficha`, incluidos los media queries,
   porque mientras Elementor siga activo su CSS carga después.
   ============================================================ */

/* ---------- La grilla ----------
   A: fila de 1400 px con `padding: 0 60px` y 60 px de aire
   arriba y abajo; la columna de la galería al 50 % y la caja al
   47 %, repartidas con `space-between`.

   Acá es una grilla y no dos columnas flex, por una sola razón:
   la descripción. En desktop va debajo de la galería y en mobile
   debajo de la caja, y con áreas de grilla eso es el mismo markup
   ordenado distinto — sin duplicar la descripción, que es lo que
   hace A.
   ------------------------------------------------- */

.t-ficha .t-ficha__inner {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  grid-template-areas:
    "media info"
    "desc  info";
  grid-template-columns: 50% 47%;
  grid-template-rows: auto 1fr;
  justify-content: space-between;
  margin: 60px auto;
  max-width: var(--t-container-wide);
  padding-inline: 60px;
  width: 100%;
}

.t-ficha .t-ficha__media {
  grid-area: media;
  min-width: 0;
  position: relative;
}

/* La galería: 94 % de la columna y centrada. Medido en A a 1280 px: 538
   px de ancho, con 30 px de aire abajo que pone el propio plugin.

   El ancho lo lleva el envoltorio y no la galería: la galería es la del
   plugin de slider (`wcgs`), y su JS le escribe `min-width: 100%` inline.
   Adentro, la galería ocupa todo su contenedor; Astra la flota al 48 %
   para su propio layout, y eso se apaga. */
.t-ficha .t-ficha__media .t-ficha__galeria {
  margin-inline: auto;
  position: relative;
  width: 94%;
}

.t-ficha .t-ficha__galeria div.images,
.t-ficha .t-ficha__galeria .woocommerce-product-gallery {
  float: none;
  width: 100%;
}

/* ---------- El badge «¡Oferta!» ----------
   Medido en A: Georama 12/15, 7,5 × 15 px de relleno, sobre el azul del
   badge de oferta, con la esquina de abajo a la derecha redondeada a 30
   px. WooCommerce le pone `line-height: 3.5em` y un alto mínimo: con el
   selector del core, `.woocommerce-js div.product span.onsale`, empata;
   por eso lleva `.product`.
   ------------------------------------------------- */

.t-ficha.product .t-ficha__galeria span.onsale {
  background-color: var(--t-offer-badge);
  border-radius: 0 0 30px 0;
  color: var(--t-white);
  font-family: var(--t-font-body);
  font-size: var(--t-caption-size);
  font-weight: var(--t-weight-regular);
  left: 0;
  line-height: 15px;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 7.5px 15px;
  position: absolute;
  top: 0;
  z-index: 2;
}

/* ---------- La caja de información ----------
   A: borde de 1 px, radio 20, `padding: 40px 36px` y alto al
   contenido. El borde en A es #DDDDDD; acá sale del token de
   borde de cards, #E0E0E0, que es la misma función y un tono de
   diferencia.
   ------------------------------------------------- */

.t-ficha .t-ficha__info {
  border: 1px solid var(--t-border-soft);
  border-radius: var(--t-radius-card);
  box-sizing: border-box;
  grid-area: info;
  min-width: 0;
  padding: 40px 36px;
}

/* El ancho va con el `id` de la caja y un selector largo, y está medido:
   Astra imprime inline `.woocommerce-page #content .ast-woocommerce-container
   div.product div.summary { width: 46% }`, que **lleva un id** y pesa
   (1,4,2). La caja quedaba en 247 px; este pesa (1,5,1). Medido en B el
   2026-09-23. La columna ya la da la grilla: acá solo se le devuelve el
   ancho entero de su celda.

   El `float: left !important` que le pone el plugin de la galería no se
   pelea: dentro de una grilla el flotado no tiene efecto. */
.t-ficha.product .t-ficha__inner div#prod-info.t-ficha__info.summary {
  float: none;
  margin: 0;
  width: auto;
}

/* ---------- La miga de pan ----------
   Georama 14 px con 16 px de aire abajo. El gris #777777 lo pone
   el core de WooCommerce en A; acá, el de texto secundario, que es
   el que el design system reservó para las migas (§1.7.1).
   ------------------------------------------------- */

.t-ficha .t-ficha__info .woocommerce-breadcrumb {
  color: var(--t-text-muted);
  font-family: var(--t-font-body);
  font-size: var(--t-body-sm-size);
  /* 24,75 px: el interlineado **heredado** de la caja, ya calculado en px
     sobre 15 px de cuerpo, que es lo que mide A. Con el de texto chico (21)
     todo lo de abajo subía 4 px, y con `1.65` —recalculado sobre 14— 1 px. */
  line-height: inherit;
  margin: 0 0 16px;
}

/* Los enlaces van en 500 y el último tramo —el producto— en 400: medido
   en A. */
.t-ficha .t-ficha__info .woocommerce-breadcrumb a {
  color: var(--t-text-muted);
  font-weight: var(--t-weight-medium);
  text-decoration: none;
  transition: color 0.2s;
}

.t-ficha .t-ficha__info .woocommerce-breadcrumb a:hover,
.t-ficha .t-ficha__info .woocommerce-breadcrumb a:focus-visible {
  color: var(--t-link-hover);
}

/* ---------- El título ----------
   A: 26/34, 600, navy, MAYÚSCULAS y 20 px de aire abajo; en
   mobile 20/28. Las mayúsculas las pone el CSS: el nombre del
   producto se guarda en caja natural.

   Con `#prod-info` y `h1`: el margen de abajo lo pisaban `.entry-title`
   de Astra y otras reglas del theme padre, y quedaba en 13 px. Medido
   en B el 2026-09-23.
   ------------------------------------------------- */

.t-ficha #prod-info h1.product_title {
  color: var(--t-navy);
  font-family: var(--t-font-display);
  font-size: 26px;
  font-weight: var(--t-weight-semibold);
  line-height: 34px;
  margin: 0 0 20px;
  text-transform: uppercase;
}

/* ---------- El precio ----------
   Medido en A a 1280 px: Georama 26/26, 600, en el naranja del precio,
   con 5 px de aire abajo. En oferta, el tachado va a 0,8 em —20,8 px— y
   opacidad .5, con la línea del mismo naranja, y hay 20 px entre el
   tachado y el actual. En mobile **también 26**: el template de Elementor
   declara 20, pero su propio CSS lo pisa, y lo que se ve —medido en A a
   390 px— es 26.

   ⚠️ El selector lleva `.product` y `p` a propósito: el `style.css` del
   theme trae del andamiaje inicial `.woocommerce .ast-article-single.product
   p.price { font-size: 2.5rem }`, que pesa (0,3,1), y el precio salía en
   37,5 px. Esa regla se borró de `style.css` el 2026-09-23, al aprobarse
   la ficha; el selector se deja como está.
   ------------------------------------------------- */

/* Flex alineado **arriba**, como A. Alineado por la línea de base, el
   tachado —más chico— bajaba 3 px y el renglón medía 31 en vez de 29. El
   `gap` va solo entre columnas: en tablet, donde los dos precios no entran
   en un renglón, A los apila sin aire entre medio. */
.t-ficha.product .t-ficha__info > p.price {
  align-items: flex-start;
  color: var(--t-price);
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  font-family: var(--t-font-body);
  font-size: 26px;
  font-weight: var(--t-weight-semibold);
  line-height: 26px;
  margin: 0 0 5px;
}

.t-ficha.product .t-ficha__info > p.price .woocommerce-Price-amount {
  color: var(--t-price);
}

.t-ficha.product .t-ficha__info > p.price del {
  font-size: 0.8em;
  opacity: 0.5;
  text-decoration-color: var(--t-price);
}

.t-ficha.product .t-ficha__info > p.price ins {
  text-decoration: none;
}

/* ⚠️ El número, a 1,3 em y en 700 —33,8 px el actual y 27 el tachado—, y no
   a 26/600 como mide A. En B la ficha se aprobó así: `custom-css-js`
   (ccj 143806) agranda el `<bdi>` con `.price .woocommerce-Price-amount.amount
   bdi`. Absorbido tal cual el 2026-09-28; si se prefiere el tamaño de A, es
   borrar esta regla. */
.t-ficha.product .t-ficha__info > p.price .woocommerce-Price-amount bdi {
  font-size: 1.3em;
  font-weight: var(--t-weight-bold);
}

/* ============================================================
   ENTREGA 2 — EL BLOQUE DE COMPRA
   Todo cuelga de `#prod-info`: acá compiten Astra, WooCommerce,
   los plugins de talles, cantidad y envío, y el CSS suelto de
   `custom-css-js`, y varios de ellos traen `#content` o
   `!important`. Medidas de A a 1280 px, el 2026-09-23, con
   `buzo-salida-2026-le-coq-sportif`.
   ============================================================ */

/* ---------- «Precio sin impuestos nacionales» ----------
   Lo emite el plugin `cat-*` debajo del precio. Medido en A: 10 px, 300,
   #615A5A, que el design system ya pasó a --t-price-muted (§1.7.1).
   ------------------------------------------------- */

.t-ficha #prod-info .precio-sin-iva,
.t-ficha #prod-info .precio-sin-iva .woocommerce-Price-amount {
  color: var(--t-price-muted);
  font-family: var(--t-font-body);
  font-size: 10px;
  font-weight: var(--t-weight-light);
}

/* El importe en 400, no en 300: lo fijaba `custom-css-js` (ccj 364659). */
.t-ficha #prod-info .precio-sin-iva .woocommerce-Price-amount {
  font-weight: var(--t-weight-regular);
}

/* ---------- «Descuentos para socios» ----------
   Solo en productos con descuento por rol. Lo emite el plugin `cat-*`
   pegado al precio. Medido en A con la bombilla: línea de 1 px #BBBBBB
   arriba, 20 px de aire y 20 de relleno; el título en 18/700 y 8 px
   abajo.

   El ancho va al contenido: en A la línea mide lo que mide el bloque
   —255 px en la bombilla— porque el widget de Elementor que lo envuelve
   se achica a su contenido. A todo el ancho de la caja se leía como otro
   divisor.

   El título llega sin su `style` inline —con Montserrat y `!important`—
   porque se lo saca `talleres_wc_socios_sin_estilo()`; acá va en Georama
   y en --t-ink (§1.7.4).
   ------------------------------------------------- */

.t-ficha #prod-info section.discounted-prices-per-role {
  border-top: 1px solid var(--t-border-strong);
  margin-top: 20px;
  padding-top: 20px;
  width: fit-content;
}

/* El descuento y el precio de socio, grandes y en el acento, sin la
   etiqueta navy que trae el plugin en su `<style>`. Así se aprobó la ficha,
   con el CSS de la plantilla de Elementor de la ficha (post-333770) y
   `custom-css-js` pisando al plugin. Absorbido el 2026-09-28 con los valores
   medidos en B; los `!important` son los del plugin, que llegan en línea. */
.t-ficha #prod-info section.discounted-prices-per-role {
  padding-bottom: 0.5rem;
}

.t-ficha #prod-info .descuentos-socios {
  list-style: none;
  padding: 0;
}

.t-ficha #prod-info .descuentos-socios li {
  margin: 0 !important;
}

.t-ficha #prod-info section.financiacion-3-cuotas-socio {
  margin: 12px 0 0;
}

/* El título «Descuentos para socios» cuando llega con su `style` en línea:
   en los productos simples `talleres_wc_socios_sin_estilo()` no lo alcanza
   —el plugin lo imprime después de ese filtro—, así que no recibe la clase
   `t-ficha__socios-titulo`. Hasta la Fase 4 lo medía el CSS de la plantilla
   de Elementor de la ficha; estos son sus valores. La familia no se puede
   pisar: el plugin la declara en línea con `!important`. 2026-09-28.
   El color, en cambio, llega en línea **sin** `!important` —el navy viejo de
   Astra, `#0E204D`— y hasta el 2026-09-29 lo tapaban Elementor y
   `custom-css-js` (ccj 143806). Sin ellos ganaba el `style`: de ahí el
   `!important`, medido en B ya sin Elementor. */
.t-ficha #prod-info section.discounted-prices-per-role > p:first-child {
  color: var(--t-ink) !important;
  font-size: 18px;
  margin: 0 0 8px;
}

/* El asterisco que remite a la nota «*Los descuentos para socios se verán
   reflejados al finalizar la compra». Lo agregaba la plantilla de Elementor. */
.t-ficha #prod-info section.discounted-prices-per-role > p:first-child::after {
  content: "*";
}

.t-ficha #prod-info .descuentos-socios .ddiscount {
  background: transparent !important;
  color: var(--t-accent) !important;
  display: inline-flex;
  font-family: var(--t-font-body);
  font-size: 22px !important;
  font-weight: var(--t-weight-semibold) !important;
  gap: 0.25rem;
  justify-content: flex-start !important;
  margin-right: -8px;
  padding: 0 !important;
  width: 8em !important;
}

.t-ficha #prod-info .descuentos-socios .ddiscount b {
  color: var(--t-accent) !important;
  font-weight: var(--t-weight-display);
}

.t-ficha #prod-info .descuentos-socios li > b bdi {
  color: var(--t-accent) !important;
  font-family: var(--t-font-body) !important;
  font-size: 22px !important;
  font-weight: var(--t-weight-semibold) !important;
}

@media (max-width: 767px) {
  .t-ficha #prod-info .descuentos-socios .ddiscount {
    font-size: 18px !important;
    margin-right: -6px;
  }
}

.t-ficha #prod-info section.discounted-prices-per-role p.t-ficha__socios-titulo {
  color: var(--t-ink);
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-bold);
  margin: 0 0 8px;
}

/* ---------- Cuotas, nota, divisor ----------
   A: las cuotas arrancan 26 px debajo del «precio sin impuestos»; la
   nota, 12 px debajo de las cuotas; la línea, 23 px debajo de la nota,
   y el formulario, 18 px debajo de la línea. En A esos aires salen de
   márgenes negativos entre widgets; acá, de un solo margen por bloque.
   ------------------------------------------------- */

.t-ficha #prod-info .t-ficha__precios {
  margin-top: 26px;
}

/* `display` y `font-size` se declaran porque el `style.css` del theme le
   ponía a `.single-product .summary .installments` un `inline-flex` y 2
   rem. Esa regla se borró el 2026-09-23; esto queda como valor explícito. */
.t-ficha #prod-info .t-ficha__cuotas ul.installments {
  display: block;
  font-size: var(--t-body-size);
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

/* A: Georama 16 px en #6D6D6D, que pone el template de Elementor; acá, el
   gris de texto corrido (§1.7.1). El texto va en MAYÚSCULAS porque así lo
   guarda el plugin, no por CSS. */
/* `text-align` a la izquierda, como en A: en B las cuotas salían centradas
   por una regla de fuera del theme sobre el `li`. */
.t-ficha #prod-info .t-ficha__cuotas li.installment {
  color: var(--t-text-body);
  text-align: left;
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-weight-regular);
  /* Heredado, como en A: 24,75 px en desktop y 22,6 en mobile, donde Astra
     achica el cuerpo. Fijo en 24,75, mobile medía 6 px de más por bloque. */
  line-height: inherit;
  margin: 0;
}

/* El tamaño y el margen se declaran a propósito: el `style.css` del theme
   traía del andamiaje inicial —borrado el 2026-09-23— `.single-product .summary .installments b {
   font-size: 1.15em; margin-right: .25rem }`, y cada renglón medía 26 px en
   vez de 25. Medido en B el 2026-09-23. */
.t-ficha #prod-info .t-ficha__cuotas li.installment b {
  font-size: inherit;
  font-weight: var(--t-weight-bold);
  margin: 0;
}

.t-ficha #prod-info .t-ficha__nota {
  color: var(--t-text-body);
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  line-height: inherit;
  margin: 0;
}

/* El enlace, en 500 y en el color de enlace, sin subrayado: la regla del
   theme (`CLAUDE.md` → Enlaces). */
.t-ficha #prod-info .t-ficha__nota a {
  color: var(--t-link);
  font-weight: var(--t-weight-medium);
  text-decoration: none;
  transition: color 0.2s;
}

.t-ficha #prod-info .t-ficha__nota a:hover,
.t-ficha #prod-info .t-ficha__nota a:focus-visible {
  color: var(--t-link-hover);
}

/* A: 1 px en #BBBBBB; acá, el borde de controles, #B2B2B2. */
.t-ficha #prod-info hr.t-ficha__divisor {
  background: none;
  border: 0;
  border-top: 1px solid var(--t-border-strong);
  height: 0;
  margin: 23px 0 18px;
}

/* ---------- Talles ----------
   El selector lo dibuja `woo-variation-swatches`, que se queda. Del
   theme es solo el rótulo y el color del texto: Georama 18/30, 600, en
   el gris de títulos de sección, y el texto de cada talle en --t-ink en
   vez del negro puro de A (§1.7.1). El agotado queda como en A —el
   texto más claro— por decisión de la usuaria del 2026-09-23.
   ------------------------------------------------- */

.t-ficha #prod-info table.variations {
  border: 0;
  margin: 0;
}

.t-ficha #prod-info table.variations .label label {
  color: var(--t-heading-alt);
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-semibold);
  /* Heredado, no 30 px fijo: en A sale del `line-height: 2em` que
     WooCommerce le da a la celda, o sea el doble del cuerpo —30 px en
     desktop y 27,36 en mobile—. Con 30 fijo, en mobile todo lo de abajo
     bajaba 3 px. Medido en la entrega 4, el 2026-09-23. */
  line-height: inherit;
}

/* «Elegí tu Talle»: el «Elegí tu» no viene del plugin, lo agregaba
   `custom-css-js` (ccj 143806) con un `::before`. 2026-09-28. */
.t-ficha #prod-info table.variations .label label::before {
  content: "Elegí tu ";
}

/* ---------- Títulos del bundle y del estampado ----------
   En A salen en blanco sobre blanco: el nombre de cada ítem del bundle y
   «¿Querés personalizar la camiseta?». Existen en la página pero no se ven.
   Acá, con el mismo tratamiento que el rótulo «Talle»: diferencia
   deliberada con A, decidida por la usuaria el 2026-09-23.
   ------------------------------------------------- */

.t-ficha #prod-info .bundled_product_title,
.t-ficha #prod-info .bundled_product_title .item_title,
.t-ficha #prod-info .opciones-estampas h5.titulo-personalizar {
  color: var(--t-heading-alt);
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-semibold);
  line-height: 30px;
}

.t-ficha #prod-info li.variable-item span {
  color: var(--t-ink);
}

/* El talle elegido lleva el texto en blanco sobre el naranja: no se pisa.
   El naranja lo ponía `custom-css-js` (ccj 143806) sobre `.selected:not(.no-stock)`,
   y al sacarlo el fondo quedó en el blanco del plugin, con el número blanco
   encima: ilegible. No lo vio ninguna medición porque el estado aparece recién
   al elegir un talle. 2026-09-29. */
.t-ficha #prod-info li.variable-item.button-variable-item.selected:not(.no-stock) {
  background-color: var(--t-accent);
}

.t-ficha #prod-info li.variable-item.selected span {
  color: var(--t-white);
}

/* ---------- «Borrar» — estampas ----------
   El botón que vacía nombre y número. `DESIGN-SYSTEM.md` §1.1ter,
   decidido: el bordó #B11E47 de un secundario anterior —lo pone la capa
   `custom-css-js`— pasa al acento, y el hover al hover del acento, como
   cualquier enlace. El interlineado es el de A: 18 px, 38 de alto.

   ⚠️ Con `!important`, y está medido: la regla de `custom-css-js` lo trae
   en el color y en el del hover, que además subraya —y en el theme los
   enlaces no se subrayan—. Se puede quitar al desinstalar esa capa, en la
   Fase 4.
   ------------------------------------------------- */

.t-ficha #prod-info .opciones-estampas button.resetear-numeros {
  color: var(--t-accent) !important;
  line-height: 18px;
  transition: color 0.2s;
}

.t-ficha #prod-info .opciones-estampas button.resetear-numeros:hover,
.t-ficha #prod-info .opciones-estampas button.resetear-numeros:focus-visible {
  color: var(--t-accent-hover) !important;
  text-decoration: none;
}

/* ---------- El formulario de la estampa ----------
   Nombre, número y jugador de la camiseta personalizable: lo dibuja un
   plugin y aparece recién al tildar «Personalizar». Todo su aspecto lo ponía
   `custom-css-js` (ccj 362146); absorbido el 2026-09-28 con los mismos
   valores y los colores en tokens: el gris de borde `#d5d8dc` es --t-border
   y el `#202020` del total, --t-heading-alt. El color de «Borrar» ya lo
   decide la regla de arriba.
   ------------------------------------------------- */

/* La separación entre cantidad y botón va con `column-gap`, como en el simple
   (ver «Cantidad y botón en una fila»): con los 10 px a cada lado del botón
   sumaban 338 y a 390 la columna mide 337, así que el botón bajaba. Solo
   `column-gap`: en las camisetas arriba va `.opciones-estampas` a todo el
   ancho, y su aire con la fila sigue siendo el que era. 2026-10-01. */
.t-ficha #prod-info .woocommerce-variation-add-to-cart.variations_button {
  flex-wrap: wrap;
  column-gap: 10px;
}

.t-ficha #prod-info .woocommerce-variation-add-to-cart.variations_button > button.single_add_to_cart_button.button.alt {
  margin: 0;
}

.t-ficha #prod-info .opciones-estampas {
  width: 100%;
}

.t-ficha #prod-info .opciones-estampas h5.titulo-personalizar {
  margin-bottom: 6px;
}

.t-ficha #prod-info .opciones-estampas ul {
  margin-left: 30px;
}

.t-ficha #prod-info div#campos_vinilo {
  border-color: var(--t-border) !important;
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 20px 16px 10px !important;
}

.t-ficha #prod-info input#nombre_estampa,
.t-ficha #prod-info input#numero_jugador {
  border: 1px solid var(--t-border) !important;
  line-height: 18px;
  max-width: none;
  width: 100% !important;
}

.t-ficha #prod-info section.vinilo-form {
  margin-bottom: 12px;
}

.t-ficha #prod-info section.vinilo-form > div {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

.t-ficha #prod-info section.vinilo-form > div > label {
  font-weight: var(--t-weight-medium);
}

.t-ficha #prod-info .opciones-estampas button.resetear-numeros {
  background: transparent !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: var(--t-weight-semibold);
  padding: 10px 24px 10px 0 !important;
}

.t-ficha #prod-info select#select_jugador {
  padding: 11px 24px;
}

.t-ficha #prod-info section.select-nobletransfer > div {
  margin-bottom: 14px;
}

.t-ficha #prod-info p.total-mensaje-vinilo {
  color: var(--t-heading-alt);
  font-size: 18px;
  font-weight: var(--t-weight-semibold);
  margin-bottom: 10px !important;
}

@media (max-width: 768px) {
  .t-ficha #prod-info .opciones-estampas p.select-estampa,
  .t-ficha #prod-info .opciones-estampas label {
    font-size: 15px !important;
  }
}

/* ---------- Cantidad ----------
   La dibuja `qty-increment-buttons` (clases `qib-`). A: 45 px de alto;
   el número en Poppins 18 —una tercera familia, que además no se carga—
   y acá en Georama, que es una de las dos del design system; los
   botones − y + en 22/500 gris de controles, y el borde de controles.
   ------------------------------------------------- */

.t-ficha #prod-info .qib-button-wrapper input.qty {
  border-color: var(--t-border-strong);
  color: var(--t-ink);
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-regular);
  height: 45px;
}

/* En A el «−» lleva 10 px a la izquierda y el «+» no, y la cantidad queda
   10 px más adentro que el resto de la caja. Acá arranca en el mismo borde:
   diferencia deliberada, decidida por la usuaria el 2026-09-23. */
.t-ficha #prod-info .qib-button-wrapper button.qib-button.minus {
  margin-left: 0;
}

/* La caja del número, al alto de los botones. El plugin la deja en 41 px
   (`.qib-button-wrapper div.quantity.wqpmb_quantity`) y el campo de 45 se
   salía por abajo: el número quedaba 2 px más abajo que el − y el +. Lo
   tapaba el CSS de la plantilla de Elementor de la ficha; apareció al
   apagarlo, el 2026-09-29. */
.t-ficha #prod-info .qib-button-wrapper div.quantity {
  height: 45px;
}

/* Las tres piezas como un solo control: el número sin radio ni bordes a los
   costados, y los botones con el radio solo del lado de afuera. Venía de
   `custom-css-js` (ccj 143806). 2026-09-28. */
.t-ficha #prod-info .qib-button-wrapper input.qty {
  border-left: none;
  border-radius: 0 !important;
  border-right: none;
}

.t-ficha #prod-info .qib-button-wrapper button.qib-button.minus {
  border-radius: 4px 0 0 4px !important;
}

.t-ficha #prod-info .qib-button-wrapper button.qib-button.plus {
  border-radius: 0 4px 4px 0 !important;
}

.t-ficha #prod-info .qib-button-wrapper button.qib-button {
  background-color: var(--t-white);
  border-color: var(--t-border-strong);
  box-shadow: none;
  color: var(--t-text-subtle);
  font-family: var(--t-font-body);
  font-size: 22px;
  font-weight: var(--t-weight-medium);
  height: 45px;
}

/* ---------- El botón «Añadir al carrito» ----------
   A: Georama 18, 700, blanco sobre el naranja, radio 4, `14px 20px`, 44
   px de alto y 10 px de aire a cada lado.

   Sin talle elegido, **A lo deja igual de naranja** y solo cambia el
   cursor: se copia. WooCommerce lo pasaba a gris con opacidad, y eso
   hacía que la ficha pareciera rota antes de tocar nada.

   El hover, en cambio, **no es el de A**: en A el hover es el mismo
   naranja, o sea que el botón no reacciona. Acá oscurece al hover del
   acento, que es lo que ya hacen todos los botones del theme (`CLAUDE.md`
   → Movimiento).

   `button` y `.alt` en el selector a propósito: el CSS de `custom-css-js`
   le pone `padding` y `border-radius` con `!important` a
   `button.single_add_to_cart_button.button.alt`, y con el mismo
   `!important` gana el más específico.
   ------------------------------------------------- */

.t-ficha #prod-info form.cart button.single_add_to_cart_button.button.alt {
  appearance: none;
  background-color: var(--t-accent);
  border: 1px solid var(--t-accent);
  border-radius: var(--t-radius-input) !important;
  box-shadow: none;
  color: var(--t-white);
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-bold);
  line-height: 15px;
  margin: 0 10px;
  opacity: 1;
  padding: 14px 20px !important;
  text-transform: capitalize;
  transition: background-color 0.2s, border-color 0.2s;
}

/* ⚠️ Con `!important`, y está medido: aunque la ficha la dibuje el theme,
   se sigue cargando el CSS del template de Elementor (`post-333770.css`), que
   le pone al hover el naranja del color secundario con `!important` —el mismo
   del reposo— y el botón no reaccionaba. Contra un `!important` solo gana
   otro más específico. Se puede quitar en la Fase 4, con Elementor apagado. */
.t-ficha #prod-info form.cart button.single_add_to_cart_button.button.alt:hover,
.t-ficha #prod-info form.cart button.single_add_to_cart_button.button.alt:focus-visible {
  background-color: var(--t-accent-hover) !important;
  border-color: var(--t-accent-hover) !important;
  color: var(--t-white);
}

/* Sin selector de cantidad —producto con una sola unidad o vendido de a
   uno—, WooCommerce deja la caja `.quantity.hidden` en el flujo con 15 px de
   margen, y el botón quedaba 25 px adentro del borde. A lo compensa con un
   margen de −18 y queda 3 px afuera. Acá, alineado al borde, igual que la
   cantidad (decisión de la usuaria del 2026-09-23). */
.t-ficha #prod-info form.cart .quantity.hidden {
  display: none;
}

.t-ficha #prod-info form.cart .quantity.hidden + button.single_add_to_cart_button.button.alt {
  margin-left: 0;
}

/* Cantidad y botón en una fila, en ese orden y centrados, en el producto
   simple y en el bundle. En A el `form.cart` es flex por el CSS del widget de
   Elementor; apagado Elementor quedaba en bloque, y mandaban los floats de
   Astra y de `qty-increment-buttons`: en celular la cantidad se iba a la
   derecha y el botón bajaba a la línea siguiente —se leía al revés—, y en
   desktop el margen de 3 px del selector lo dejaba más abajo que el botón.
   El variable no entra: su caja, `.variations_button`, ya es flex.

   La separación es `gap` y no los márgenes del botón: los 10 px que tenía a
   la derecha no separaban nada y a 390 hacían bajar el botón por 1 px.
   Pedido de la usuaria el 2026-10-01. */
.t-ficha #prod-info form.cart:not(.variations_form):not(.bundle_form),
.t-ficha #prod-info form.cart .bundle_button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* El clearfix de WooCommerce: en flex sus dos pseudos pasan a ser ítems, y
   con el `gap` cada uno sumaba 10 px de aire —la cantidad arrancaba corrida y
   el botón volvía a bajar—. Con flex ya no hay floats que despejar. */
.t-ficha #prod-info form.cart:not(.variations_form):not(.bundle_form)::before,
.t-ficha #prod-info form.cart:not(.variations_form):not(.bundle_form)::after,
.t-ficha #prod-info form.cart .bundle_button::before,
.t-ficha #prod-info form.cart .bundle_button::after {
  display: none;
}

.t-ficha #prod-info form.cart:not(.variations_form):not(.bundle_form) > .qib-button-wrapper,
.t-ficha #prod-info form.cart .bundle_button > .qib-button-wrapper {
  float: none;
  margin: 0;
}

.t-ficha #prod-info form.cart:not(.variations_form):not(.bundle_form) > button.single_add_to_cart_button.button.alt,
.t-ficha #prod-info form.cart .bundle_button > button.single_add_to_cart_button.button.alt {
  float: none;
  margin: 0;
}

.t-ficha #prod-info form.cart button.single_add_to_cart_button.button.alt.disabled {
  cursor: not-allowed;
}

.t-ficha #prod-info form.cart button.single_add_to_cart_button.button.alt.disabled:hover {
  background-color: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
}

/* ---------- Disponibilidad ----------
   §1.7.2, decidido: con stock, «Disponibilidad: N disponibles» en el verde
   del core, solo acá. Sin stock, «Temporalmente sin stock» en rojo y a
   16 px: pedido de la usuaria del 2026-09-24, que reemplaza el --t-ink del
   2026-09-08. El #FF0000 de A y el gris azulado #334155 se retiran.
   ------------------------------------------------- */

.t-ficha #prod-info .stock.in-stock {
  color: var(--t-stock-count);
}

/* El rótulo «Disponibilidad:» lo pone Astra (`.ast-stock-avail`), en negrita
   y en el gris azulado #334155, que §1.7.1 manda a --t-ink. */
.t-ficha #prod-info .ast-stock-detail .ast-stock-avail {
  color: var(--t-ink);
}

.t-ficha #prod-info .stock.available-on-backorder {
  color: var(--t-ink);
}

.t-ficha #prod-info .stock.out-of-stock {
  color: var(--t-stock-out);
  font-size: 16px;
}

/* El ítem agotado del bundle. El override le agrega `stock out-of-stock`
   para que tome el color de arriba, pero con esas clases también le llega el
   interlineado de 1.3 de WooCommerce y medía 18 px en vez de los 25 de A,
   que hereda el del cuerpo. */
.t-ficha #prod-info p.bundled_item_unavailable {
  line-height: inherit;
}

/* ---------- «Calcular el precio del envío» ----------
   Lo dibuja el plugin de envío (`scpp-`). A: 25 px arriba, 18/26 en 500
   y el azul #223C52 de la hoja del plugin, que sobrevive a Elementor; acá
   va al acento, que es lo que propuso el design system (§1.7.1).
   ------------------------------------------------- */

.t-ficha #prod-info .scpp-shipping-calculator-container {
  margin-top: 25px;
}

.t-ficha #prod-info .scpp-shipping-calculator-container a.scpp-calculator-open-button {
  color: var(--t-accent);
  font-family: var(--t-font-body);
  font-size: 18px;
  font-weight: var(--t-weight-medium);
  line-height: 26px;
  text-decoration: none;
  transition: color 0.2s;
}

.t-ficha #prod-info .scpp-shipping-calculator-container a.scpp-calculator-open-button:hover,
.t-ficha #prod-info .scpp-shipping-calculator-container a.scpp-calculator-open-button:focus-visible {
  color: var(--t-accent-hover);
}

/* ---------- La descripción ----------
   A: Georama 16/22 en #4E4E4E, que lo pone el template de
   Elementor; acá, el gris de texto corrido (§1.7.1).
   ------------------------------------------------- */

.t-ficha .t-ficha__descripcion {
  color: var(--t-text-body);
  font-family: var(--t-font-body);
  font-size: var(--t-body-size);
  grid-area: desc;
  line-height: 22px;
  /* 20 más los 30 que la galería ya deja abajo: 50 px, medido en A. */
  margin-top: 20px;
  min-width: 0;
}

.t-ficha .t-ficha__descripcion > :last-child {
  margin-bottom: 0;
}

/* ---------- Tablet ----------
   Sin reglas propias, a propósito: A deja las dos columnas con la misma
   sangría de 60 px y el mismo relleno de la caja que en desktop. Medido
   en A a 768 px el 2026-09-23: galería y caja de 297 px cada una.
   ------------------------------------------------- */

/* ---------- Mobile ----------
   Una columna: galería, caja y descripción. A: 20 px arriba, sin
   sangría en la fila y 18 px en cada bloque; la caja pierde el
   borde de arriba y el radio de arriba —queda pegada a la galería
   como una tarjeta abierta— y deja 40 px antes de lo que sigue.
   ------------------------------------------------- */

@media (max-width: 767px) {
  .t-ficha .t-ficha__inner {
    grid-template-areas:
      "media"
      "info"
      "desc";
    grid-template-columns: 100%;
    grid-template-rows: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-inline: 0;
  }

  .t-ficha .t-ficha__media {
    padding-inline: 18px;
  }

  .t-ficha .t-ficha__media .t-ficha__galeria {
    width: 100%;
  }

  .t-ficha .t-ficha__info {
    border-radius: 0 0 var(--t-radius-card) var(--t-radius-card);
    border-top-width: 0;
    padding: 0 18px 20px;
  }

  .t-ficha #prod-info h1.product_title {
    font-size: 20px;
    line-height: 28px;
  }

  .t-ficha .t-ficha__descripcion {
    margin-top: 40px;
    padding-inline: 18px;
  }
}

/* ============================================================
   RELACIONADOS — entrega 3
   `woocommerce/single-product/related.php`. Medido en A con
   `buzo-salida-2026-le-coq-sportif` a 1280, 768 y 390 px el
   2026-09-23.

   La banda: navy a todo el ancho, 80 px arriba y abajo y 40 a
   los costados, con el contenido a 1400 como máximo. En mobile,
   60 y 18. A mide #04162B; acá va --t-navy-surface, el navy de
   las bandas de sección del sistema, que es casi el mismo.

   Las tarjetas son las del theme (`content-product.php`), las
   mismas del listado: acá solo cambian los colores para leerse
   sobre oscuro, y el marco pasa al naranja, como en A.

   Todo prefijado con `.t-ficha .t-relacionados`: además del CSS
   de la tarjeta compiten Astra y el template 333770, que también
   carga en previsualización.
   ============================================================ */

.t-ficha .t-relacionados {
  background-color: var(--t-navy-surface);
  box-sizing: border-box;
  margin: 0;
  padding: 80px 40px;
  width: 100%;
}

.t-ficha .t-relacionados .t-relacionados__inner {
  margin-inline: auto;
  max-width: var(--t-container-wide);
}

/* El título. A: TT Travels 600, 32/40, mayúsculas, centrado, con 0,7 em
   de aire abajo. El texto es el de WooCommerce («Productos
   relacionados»), en caja natural: las mayúsculas las pone el CSS. */
.t-ficha .t-relacionados h2.t-relacionados__titulo {
  color: var(--t-white);
  font-family: var(--t-font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  margin: 0 0 22.4px;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- La grilla ----------
   Cuatro columnas en desktop y en tablet, dos en mobile. A separa
   32 px entre columnas en desktop y 20 de 1024 para abajo, y 40
   entre filas siempre.

   Mismos arreglos que la grilla del listado (`archivo.css`), por las
   mismas razones: el clearfix de WooCommerce se lleva una celda, y
   Astra flota el `li`, le calcula un ancho y le suma márgenes —el
   `!important` del margen y del `overflow` están medidos ahí—.
   ------------------------------------------------- */

.t-ficha .t-relacionados ul.products {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.t-ficha .t-relacionados ul.products::before,
.t-ficha .t-relacionados ul.products::after {
  content: none;
}

/* El selector va largo porque WooCommerce tiene una regla solo para
   relacionados, `.woocommerce-js div.product .related.products ul.products
   li.product { width: calc(25% - 15px) }`: el porcentaje se calcula contra
   la celda y la tarjeta quedaba de 53 px. Medido en B el 2026-09-23.

   La sombra, el radio y el centrado los pone el `style.css` del theme a
   todo `li.product`. Esa regla no se borró al aprobar la ficha porque
   también le llega al listado. */
.t-ficha.product .t-relacionados.related.products ul.products li.product {
  border-radius: 0;
  box-shadow: none;
  float: none;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0;
  text-align: left;
  width: auto;
}

/* ---------- La tarjeta sobre navy ----------
   A: todo el texto en blanco —categoría, título, precio y letra
   chica— y el marco de la foto en el naranja del color secundario. La foto
   va sobre blanco, para que un PNG con transparencia no quede
   sobre el navy. */

.t-ficha .t-relacionados .t-card .t-card__media {
  background-color: var(--t-white);
  border-color: var(--t-accent);
}

/* La categoría, en blanco al 60 %: pedido de la usuaria el 2026-09-23. Es
   lo mismo que hace A con su gris sobre blanco —el color con `opacity: .6`—. */
.t-ficha .t-relacionados .t-card .t-card__categoria {
  color: var(--t-white);
  opacity: 0.6;
}

/* 18 px: una regla de Astra sobre el `li` lo dejaba en 15, igual que
   en el listado. */
.t-ficha .t-relacionados ul.products li.product .t-card__titulo,
.t-ficha .t-relacionados ul.products li.product .t-card__titulo a,
.t-ficha .t-relacionados ul.products li.product .t-card__titulo a:hover,
.t-ficha .t-relacionados ul.products li.product .t-card__titulo a:focus {
  color: var(--t-white);
  font-size: 18px;
  line-height: 1.3;
}

.t-ficha .t-relacionados .t-card .t-card__precio ins,
.t-ficha .t-relacionados .t-card .t-card__precio del,
.t-ficha .t-relacionados .t-card .t-card__precio .woocommerce-Price-amount,
.t-ficha .t-relacionados .t-card .t-card__precio .woocommerce-Price-amount bdi {
  color: var(--t-white);
}

/* La letra chica, en el blanco suave. En la práctica gana el blanco
   entero del template 333770, que la pinta con `!important`, igual que
   en A; esto queda para cuando se apague Elementor. */
.t-ficha .t-relacionados .t-card .t-card__precio .precio-sin-iva,
.t-ficha .t-relacionados .t-card .t-card__precio .precio-sin-iva .woocommerce-Price-amount,
.t-ficha .t-relacionados .t-card .t-card__precio .precio-sin-iva bdi {
  color: var(--t-white-soft);
  /* Sin cuotas abajo, el 2.3 de la tarjeta —que existe para separar la
     letra chica de las cuotas— deja el renglón flotando. Los valores del
     listado en mobile, que es donde tampoco hay cuotas. */
  line-height: 1.2;
}

.t-ficha .t-relacionados .t-card .t-card__precio .precio-sin-iva {
  margin-bottom: 6px;
}

/* Sin cuotas en ninguna pantalla: pedido de la usuaria el 2026-09-23. A
   tampoco las muestra en los relacionados. */
.t-ficha .t-relacionados ul.products li.product .t-card__cuotas {
  display: none;
}

/* Y sin el bloque «Descuentos para socios / Hasta 20% OFF $X», con su
   línea divisoria: el plugin `cat-*` lo mete **adentro del precio**, así
   que sale en los productos que tienen descuento de socios y en los otros
   no. Pedido de la usuaria el 2026-09-23; A también lo oculta en sus
   relacionados (`#related-products section.discounted-prices-per-role`). */
.t-ficha .t-relacionados ul.products li.product .t-card__precio section.discounted-prices-per-role {
  display: none;
}

/* ---------- Tablet y mobile ----------
   Lo mismo que el listado de 1024 para abajo: la foto cuadrada, porque
   Astra le pone `height: auto !important` a las fotos del loop y los 300
   px de la tarjeta no llegan. */

@media (max-width: 1024px) {
  .t-ficha .t-relacionados ul.products {
    column-gap: 20px;
  }

  .t-ficha .t-relacionados ul.products li.product .t-card__img {
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .t-ficha .t-relacionados {
    padding: 60px 18px;
  }

  .t-ficha .t-relacionados h2.t-relacionados__titulo {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 15.4px;
  }

  .t-ficha .t-relacionados ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Lo que se esconde ----------
   Dos cosas que la ficha nunca mostró y que escondían `custom-css-js`
   (ccj 143806) y el CSS adicional del Personalizador. 2026-09-28.

   - En los bundles, el bloque de variación repetido de cada ítem.
   - El país del calculador de envío: la tienda envía solo a Argentina.
   ------------------------------------------------- */

.t-ficha #prod-info .single_variation_wrap.bundled_item_wrap {
  display: none !important;
}

/* Los − y + de Astra: la cantidad ya trae los suyos (`qty-increment-buttons`),
   y con los dos se veían dos pares. Los escondía el CSS de la plantilla de
   Elementor de la ficha (post-333770). */
.t-ficha #prod-info .quantity a.ast-qty-placeholder {
  display: none;
}

.t-ficha select#calc_shipping_country {
  display: none;
}

/* Los avisos de WooCommerce de la ficha —el del bundle, por ejemplo— con
   borde de 2 px en el color de su texto y radio 15, como se aprobaron: lo
   ponía `custom-css-js` (ccj 143806). 2026-09-28. */
.t-ficha .woocommerce-info {
  border: 2px solid currentColor;
  border-radius: 15px;
}


/* Etiquetas de Advanced Woo Labels sobre la galería (cliente, 2026-10-07):
   sin pointer-events para no bloquear la galería, y 48 px a la derecha para
   no tapar la lupa del slider (wcgs). */
.t-ficha .t-ficha__galeria .advanced-woo-labels {
  padding-right: 48px;
  pointer-events: none;
}