/* =================================================================
   PRODUCTO — resumen
   ================================================================= */
/* Tres áreas: encabezado (título + marca), galería y datos.
   En escritorio la foto ocupa la columna izquierda entera y el encabezado va
   arriba de la derecha —el mismo aspecto de siempre—; en móvil se reordenan
   sin tocar el marcado. `row-gap: 0` porque encabezado y datos se leen como un
   bloque continuo: el hueco de 40 px es solo entre columnas. */
.jri-product-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "galeria encabezado"
    "galeria info";
  column-gap: var(--space-8);
  row-gap: 0;
  align-items: start;
  margin-bottom: var(--space-8);
}
.jri-product-head    { grid-area: encabezado; }
.jri-product-gallery { grid-area: galeria; }
.jri-product-info    { grid-area: info; }
.jri-gallery-main {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: grid;
  place-items: center;
}
.jri-gallery-main img { width: 100%; max-width: 440px; aspect-ratio: 1; object-fit: contain; }
.jri-zoom-hint {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--text-muted-2);
  display: grid;
  place-items: center;
}
.jri-gallery-thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.jri-gallery-thumb {
  width: 74px; height: 74px;
  border: 2px solid var(--gray-150);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 4px;
}
.jri-gallery-thumb.jri-is-active { border-color: var(--brand-yellow); }
.jri-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }

.jri-product-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted-2);
}
.jri-product-name { font-size: 24px; font-weight: 700; line-height: 1.25; margin: var(--space-2) 0 var(--space-3); }
.jri-product-sku { color: var(--text-muted-2); font-size: 13px; margin: 0 0 var(--space-5); }
.jri-product-price-block { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-5); }
.jri-product-price-block .jri-price-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted-2); }
.jri-product-price-block .jri-price-now { font-size: 30px; font-weight: 700; color: var(--near-black); }

.jri-product-form { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
/* `.jri-field`, `.jri-buy-row` y `.jri-qty` se retiraron: venían del
   diseño estático y ninguna plantilla las usa. El formulario lo pinta
   WooCommerce y se estiliza más abajo por sus propias clases. */



/* ---------------- Paneles desplegables y relacionados ----------------
   Recuperados del original: la plantilla los sigue usando. */
/* Paneles de información (acordeón producto) */
.jri-info-panel {
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
  overflow: hidden;
}
.jri-info-panel summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: var(--gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jri-info-panel summary::-webkit-details-marker { display: none; }
/* Cabeza de flecha negra, como en el Figma: antes era un «+» amarillo
   que no correspondía. Se dibuja con bordes para poder girarla. */
.jri-info-panel summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--near-black);
  border-bottom: 2px solid var(--near-black);
  transform: rotate(45deg);
  transition: transform .2s;
}
.jri-info-panel[open] summary::after { transform: rotate(-135deg); }
.jri-info-body { padding: var(--space-5); }
.jri-info-body > .jri-info-title:first-child { margin-top: 0; }
.jri-info-body p { color: var(--text-muted-2); margin: 0 0 var(--space-3); }
/* Ficha técnica */
.jri-product-ficha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
  text-decoration: underline;
}
.jri-product-ficha:hover { color: var(--brand-gold); }
.jri-product-ficha { display: flex; width: fit-content; }
.jri-related-wrap { margin-top: var(--space-8); }

/* =================================================================
   Ajustes al diseño de Figma (2026-08-02)
   ================================================================= */

/* La marca va DEBAJO del título, no como antetítulo. */
.jri-product-brandline {
  display: inline-block;
  margin: 0 0 var(--space-4);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}
.jri-product-brandline:hover { color: var(--brand-gold); }

/* ---------------- Pastillas de variación ----------------
   Los `<select>` siguen en el DOM: solo se ocultan cuando el script ha
   podido construir las pastillas (`.jri-variations-listo`). Sin JS se
   siguen viendo y la ficha funciona igual. */
.jri-variations-listo .variations select { display: none; }
.jri-variations-listo .variations .reset_variations { font-size: 12px; }

.jri-product-form .variations label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted-2);
}
/* El Figma pone las pastillas **debajo** del nombre del atributo. WooCommerce
   las emite en una tabla, con la etiqueta en `<th>` y el valor en `<td>`: en la
   misma fila, o sea a la derecha. Se aplanan a bloques para que apilen. */
.jri-product-form .variations,
.jri-product-form .variations tbody,
.jri-product-form .variations tr,
.jri-product-form .variations th,
.jri-product-form .variations td {
  display: block;
  width: 100%;
  padding-left: 0;
  text-align: left;
}
.jri-product-form .variations tr + tr { margin-top: var(--space-4); }

.jri-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.jri-swatch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 46px;
  padding: 8px 14px;
  justify-content: center;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.jri-swatch:hover:not(:disabled) { border-color: var(--near-black); }

.jri-swatch.is-activa {
  border-color: var(--brand-gold);
  border-width: 2px;
  padding: 7px 13px;
}

/* Deshabilitada = combinación imposible. Lo decide WooCommerce, no
   nosotros: el script solo copia el estado de la opción. */
.jri-swatch:disabled {
  background: var(--gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* El punto de color de las pastillas de color.

   **El color lo pone `producto.js` en línea**, con lo que le manda
   `Woo\Color_Swatches` desde el servidor. Aquí no puede haber un color de
   verdad: el que había —el amarillo de la marca— es justo el fallo que se
   corrigió, todas las pastillas salían iguales. El gris es solo el relleno del
   instante entre que se crea el elemento y se le asigna el fondo.

   El borde tenue no es adorno: sin él «Blanco» sobre fondo blanco desaparece. */
.jri-swatch--color i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  background: var(--gray-150);
  flex: none;
}

/* ---------------- El bloque que WooCommerce pinta al elegir variación ----
   Trae tres cosas: la descripción, el precio otra vez y las unidades en stock.

   El precio se quita porque ya se actualiza arriba (`producto.js`), y las
   unidades porque esto es un sistema de cotización: cuántas hay en almacén no
   es información que le corresponda al cliente. **Solo se oculta de cara al
   público** — el stock sigue igual en el administrador, en los informes y en
   las importaciones. `.reset_variations` («Limpiar») sí se conserva. */
.jri-product-form .woocommerce-variation-price,
.jri-product-form .woocommerce-variation-availability {
  display: none;
}

/* ---------------- Fila de cantidad + botón ----------------
   WooCommerce los emite como bloques en línea, así que se alineaban por la
   línea base y el botón salía desplazado respecto al selector. En flex se
   centran de verdad. «Disponible» va antes, ocupando su propia línea.
   La variante simple se excluye del selector de variaciones para no romper
   la tabla de atributos, que también cuelga de `form.cart`. */
.jri-product-form form.cart .woocommerce-variation-add-to-cart,
.jri-product-form form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.jri-product-stock {
  flex: 0 0 100%;
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------------- Botón de cotización ----------------
   En el Figma es negro con el texto en amarillo, en caja normal —solo la
   primera mayúscula, no versalitas como el resto de botones del sitio— y
   con las esquinas algo más redondeadas. Por eso pisa aquí lo que `.jri-btn`
   pone por defecto en `base.css`. */
/* El selector lleva `form.cart` a propósito. Bricks trae
   `.woocommerce .button { min-height: 40px; padding: 7px 15px }`, que tiene la
   MISMA especificidad (0,2,0) que `.jri-product-form .single_add_to_cart_button`
   y gana por orden de carga: de ahí que el botón se quedara en 40 px por más
   que se le pidiera 46. Con `form.cart` delante sube a (0,3,1) y manda. */
.jri-product-form form.cart .single_add_to_cart_button {
  background: var(--brand-dark);
  color: var(--brand-yellow);
  text-transform: none;
  letter-spacing: 0;
  /* 5 px: cae entre `--radius-sm` (4) y `--radius-md` (6), pero es lo que
     pide el Figma para este botón. Único valor suelto de la hoja. */
  border-radius: 5px;
  font-size: 14px;
  /* Misma altura que el selector de cantidad (44 px de alto + 2 de borde).
     Centrarlos no bastaba: el botón se quedaba en los ~36 px que le da su
     relleno y quedaba visiblemente más bajo que la caja de al lado.
     `stretch` lo iguala a la fila; el `min-height` es la reserva por si esta
     regla se leyera fuera de un contenedor flex. */
  align-self: stretch;
  height: 46px;
  min-height: 46px;
  /* Bricks trae `form.cart .quantity+button { margin-top: 10px }` (0,2,2),
     pensada para cuando el botón cae DEBAJO del selector. En nuestra fila va
     al lado, y con `align-items: center` esos 10 px lo bajaban 5: las dos
     cajas medían 46 px, pero el botón empezaba en 551 y la caja en 546. */
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}
.jri-product-form form.cart .single_add_to_cart_button:hover:not(.disabled) {
  background: var(--brand-yellow);
  color: var(--near-black);
}
.jri-product-form form.cart .single_add_to_cart_button.disabled,
.jri-product-form form.cart .single_add_to_cart_button:disabled {
  opacity: 1;
  background: var(--brand-dark);
  color: var(--brand-yellow);
  cursor: not-allowed;
}

/* ---------------- Aviso del asesor ---------------- */
.jri-product-advisor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-150);
  font-size: 13px;
  color: var(--text-muted-2);
}
/* Tres piezas, como en el Figma: icono azul, aviso en negrita y llamada a la
   acción en cursiva subrayada. El aviso no es enlace. */
.jri-product-advisor-ico { flex: none; color: var(--info-blue); }
.jri-advisor-lead { font-weight: 700; color: var(--near-black); }
.jri-advisor-link {
  font-style: italic;
  text-decoration: underline;
  font-weight: 400;
  color: var(--text-muted-2);
}
.jri-advisor-link:hover { color: var(--brand-gold); }

/* ---------------- Información general ----------------
   Lista de atributos a la izquierda y ficha técnica a la derecha. */
.jri-info-general {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-7);
  align-items: start;
}

.jri-attr-list { margin: 0; }
.jri-attr-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-muted-2);
  line-height: 1.6;
}
.jri-attr-list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  font-weight: 700;
  color: var(--text-muted);
}
.jri-attr-list span { color: var(--near-black); font-weight: 600; }

.jri-info-ficha { display: flex; justify-content: center; }
.jri-info-ficha .jri-product-ficha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--near-black);
}
.jri-info-ficha .jri-product-ficha:hover { border-color: var(--near-black); background: var(--gray-100); }

@media (max-width: 767px) {
  .jri-info-general { grid-template-columns: 1fr; }
  .jri-info-ficha { justify-content: flex-start; }

  /* Orden del Figma en móvil: título y marca, la foto, y después los datos. */
  .jri-product-summary {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "encabezado"
      "galeria"
      "info";
    row-gap: var(--space-5);
  }

  .jri-product-name { font-size: 22px; }

  /* El aviso del asesor va centrado. */
  .jri-product-advisor {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  /* ---------------- Relacionados en carrusel ----------------
     Los relacionados dejan de ser rejilla y pasan a una tira que se arrastra
     con el dedo. Va con `scroll-snap`, **sin JavaScript**: el navegador ya
     sabe hacer esto y un carrusel propio serían cien líneas y un fallo de
     accesibilidad esperando.

     El sangrado negativo saca la tira hasta el borde de la pantalla, así la
     tarjeta siguiente asoma y se ve que hay más. Solo afecta a los
     relacionados: la rejilla del catálogo sigue siendo rejilla. */
  .jri-related-wrap .jri-products-grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--space-3);
    margin-inline: calc(-1 * var(--space-5));
    padding-inline: var(--space-5);
    scroll-padding-inline: var(--space-5);
  }

  .jri-related-wrap .jri-product-card {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

/* =================================================================
   Correcciones sobre el tema (2026-08-03)
   ================================================================= */

/* ---------------- Galería ----------------
   Bricks impone `width: 50%` a `.woocommerce-product-gallery` desde su
   capa de WooCommerce, así que la foto ocupaba media columna y quedaba
   muy separada de los datos. Dentro de nuestra rejilla la columna ya la
   marca `.jri-product-summary`. */
.jri-product-gallery .woocommerce-product-gallery { width: 100%; }
.jri-product-gallery .woocommerce-product-gallery__wrapper { width: 100%; }
/* En el Figma la foto va enmarcada en un gris muy suave. */
.jri-product-gallery img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
}

/* ---------------- Miniaturas de la galería (2026-08-17) ----------------
   `Woo\Gallery_Images` pasa `woocommerce_gallery_thumbnail` a 150×150 **sin
   recorte**, así que a partir de aquí las miniaturas ya no son cuadradas: una
   foto vertical llega 138×150 y una apaisada 150×108.

   Bricks las pinta en una rejilla de cuatro con `img { width: 100% }` y alto
   automático, de modo que sin esto la fila saldría escalonada y cada miniatura
   de un tamaño. La caja cuadrada se mantiene aquí —`aspect-ratio` más
   `contain`—: **ocupan lo mismo que antes y se ven enteras**, que es exactamente
   lo que se pidió.

   `object-fit` sobre el `<img>` no recorta nada: encaja la foto dentro y deja
   aire a los lados. El recorte que se veía estaba en el fichero, no en el CSS. */
.jri-product-gallery .flex-control-thumbs img {
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--white);
}

/* ---------------- Cantidad ----------------
   Bricks ya añade sus propios `−` y `+` con
   `woocommerce_after_quantity_input_field`. Antes se añadían además los
   nuestros y salían cuatro botones. Ahora solo se estilan los suyos y se
   reordenan a «− valor +», que es como está en el diseño. */
.jri-product-form .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.jri-product-form .quantity .action {
  order: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  cursor: pointer;
  color: var(--near-black);
  /* En el Figma el «−» y el «+» van sobre un gris suave; solo la casilla del
     número queda en blanco. */
  background: var(--gray-100);
  transition: background .15s;
}
.jri-product-form .quantity .action:hover { background: var(--gray-150); }
.jri-product-form .quantity .action.minus { order: 0; }
.jri-product-form .quantity .action svg { width: 15px; height: 15px; }
.jri-product-form .quantity input.qty {
  order: 1;
  width: 54px;
  height: 44px;
  border: 0;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  -moz-appearance: textfield;
}
.jri-product-form .quantity input.qty::-webkit-outer-spin-button,
.jri-product-form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =================================================================
   AIRE AL PIE DE LA FICHA

   La ficha termina en la rejilla de relacionados y justo debajo empieza la
   barra CTA amarilla, que es un bloque saturado: las tarjetas se leían
   pegadas a ella.

   **En escritorio la ficha además perdía 28 px que ninguna otra página
   pierde.** Con el `padding-block: var(--space-9)` de `.jri-section` el archivo
   de categoría y el blog dejan sus 54 px enteros; aquí solo se veían **26**,
   porque `.jri-product-single` **desborda a su contenedor de Bricks**
   (`.brxe-jri-producto`, más bajo que la sección que contiene) y ese último
   tramo del relleno cae ya bajo el pie. No es un recorte visible —ahí solo hay
   relleno vacío—, pero explica por qué el número declarado no es el que se ve:
   en escritorio el aire visible es `padding-bottom − 28`; **en móvil no hay
   desborde** y sale entero.

   Ojo al medirlo: con la maquetación sin asentar salen otras cifras. Bricks
   difiere las imágenes, así que hay que recorrer la página en saltos antes de
   leer, y separar el cambio de estilo de la lectura en dos evaluaciones.

   Se sube el relleno en vez de perseguir el desborde: `flex-shrink: 0` en
   `#brx-content` **no lo corrige** —probado— y el origen está en el envoltorio
   que genera Bricks, que no controlamos desde aquí.

   El selector empata en especificidad con `.jri-section` (0,1,0) y gana por
   orden de carga: las hojas de sección dependen de `base.css` y van después.
   Por eso la variante de móvil hay que declararla también aquí: la del media
   query de `base.css` tampoco ganaría. */
.jri-product-single { padding-bottom: calc(var(--space-9) + var(--space-8)); }

@media (max-width: 767px) {
  .jri-product-single { padding-bottom: calc(var(--space-8) + var(--space-7)); }
}