/* =================================================================
   FICHA DE PRODUCTO — portada de `savisafety-design-v3-3` (11/09/2026)

   Hoja SUSTITUIDA (la de JR Implementos —acordeones, pastillas de variación,
   bloque del asesor— se borró). Es el bloque FICHA DE PRODUCTO de `styles.css`
   de v3 con las clases traducidas, aplicado sobre el marcado NATIVO de
   WooCommerce: la galería (`.woocommerce-product-gallery`, con las miniaturas
   de flexslider) y el formulario de compra (`form.cart`, `table.variations`,
   `.quantity`, `.single_add_to_cart_button`). No se reescribe ninguno: de ellos
   cuelgan las variaciones, el carrito, B2B y Culqi.

   Medidas de la referencia (`layout.md` §2): galería 8/12 con miniaturas de
   110×110 en columna a la izquierda e imagen 1:1 · resumen 4/12 · logo de
   marca 70×35 · h1 34/40,8 peso 500 (20/24 en móvil) · precio con el tachado
   a la derecha (`row-reverse`, 12 px de hueco) · tabla de atributos con
   filetes · relacionados en carrusel de 4.
   ================================================================= */

.jri-ficha-producto {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 80px;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-texto);
  padding-bottom: var(--space-9);
}
.jri-ficha-producto :is(h1, h2, h3, h5, p) { margin: 0; }

/* ---------------- Contenedor ----------------
   En el sitio el contenido de la ficha va de x=105 a x=1382 con la ventana a 1502 (1487
   útiles): 105 px a cada lado —el contenedor de Woodmart (60) más la fila y la columna—,
   no los 30 de la cabecera. La ruta de la ficha (`jri-ruta`) se alinea igual. */
.jri-ficha-producto .jri-container,
.single-product .jri-breadcrumb .jri-container { padding-inline: 105px; }
@media (max-width: 1199px) {
  .jri-ficha-producto .jri-container,
  .single-product .jri-breadcrumb .jri-container { padding-inline: 60px; }
}
@media (max-width: 1024px) {
  .jri-ficha-producto .jri-container,
  .single-product .jri-breadcrumb .jri-container { padding-inline: var(--pad-x); }
}

/* ---------------- Dos columnas: 8/4 ---------------- */
.jri-ficha {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-7);
  align-items: start;
  padding-top: var(--space-4);
}
.jri-ficha > * { min-width: 0; }

/* ---------------- Galería de WooCommerce con la forma de v3 ----------------
   flexslider mete la imagen en `.flex-viewport` y las miniaturas en
   `ol.flex-control-thumbs`. Una rejilla de 110 px + resto las coloca a los
   lados; sin JavaScript (sin flexslider) se ve la imagen principal sola. */
.jri-galeria { position: relative; }
.jri-galeria .woocommerce-product-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  width: 100%;
  float: none;
  opacity: 1 !important; /* WooCommerce la esconde hasta que flexslider arranca */
}
/* Columna de miniaturas solo si las hay: con una imagen sola (el lente Spy) la principal
   ocupa todo el ancho, como en el sitio. */
.jri-galeria .woocommerce-product-gallery:has(.flex-control-thumbs) { grid-template-columns: 110px minmax(0, 1fr); }
.jri-galeria .flex-viewport,
.jri-galeria .woocommerce-product-gallery__wrapper { grid-column: -2; grid-row: 1; min-width: 0; }
.jri-galeria .woocommerce-product-gallery__wrapper { margin: 0; }
/* La imagen del sitio: VELO GRIS encima (`.product-image-wrap::before`, rgba(137,155,172,.1),
   el mismo de la tarjeta) y 50 px de aire alrededor de la foto. */
.jri-galeria .woocommerce-product-gallery__image { position: relative; }
.jri-galeria .woocommerce-product-gallery__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(137 155 172 / 10%);
  pointer-events: none;
}
.jri-galeria .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 50px;
  object-fit: contain;
  background: var(--c-blanco);
}
/* Etiquetas arriba a la derecha de la imagen (12 px / 600, «AGOTADO» sobre blanco). */
.jri-galeria__etiquetas {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.jri-galeria__etiquetas .jri-label {
  height: auto;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 14.4px;
  font-weight: var(--fw-semibold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.jri-galeria__etiquetas .jri-label--agotado { background: var(--c-blanco); color: #242424; }
.jri-galeria .flex-control-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jri-galeria .flex-control-thumbs li { width: 100% !important; margin: 0 !important; float: none !important; }
.jri-galeria .flex-control-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--c-blanco);
  /* Sin marco: el sitio no lo lleva (v3-3 sí; manda el sitio, medido el 11/09). */
  border: 0;
  opacity: .7;
  cursor: pointer;
  transition: opacity var(--t-base);
}
.jri-galeria .flex-control-thumbs img.flex-active,
.jri-galeria .flex-control-thumbs img:hover { opacity: 1; }
/* La lupa de ampliación, arriba a la derecha de la imagen principal. */
/* La lupa, abajo a la izquierda, en círculo blanco (como en el sitio). */
.jri-galeria .woocommerce-product-gallery__trigger {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 15px;
  left: 15px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-blanco);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
.jri-galeria .woocommerce-product-gallery:has(.flex-control-thumbs) .woocommerce-product-gallery__trigger { left: calc(110px + var(--space-4) + 15px); }

/* ---------------- Resumen ---------------- */
.jri-resumen { display: flex; flex-direction: column; gap: var(--space-4); }
.jri-resumen__marca img { width: 70px; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.jri-resumen h1 {
  font-size: 34px;
  font-weight: var(--fw-medium);
  line-height: 40.8px;
  color: #333333;
}

/* Precio. WooCommerce escribe `<del>` antes que `<ins>`; con `row-reverse` el
   actual queda a la izquierda y el tachado a su derecha, como en el sitio. Solo
   cuando hay tachado: un rango «S/ 10 – S/ 20» se leería al revés. */
.jri-precio-grande {
  font-size: 21.7px;
  font-weight: var(--fw-medium);
  color: var(--c-negro);
}
.jri-precio-grande:has(del) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--space-3);
}
.jri-precio-grande ins { text-decoration: none; }
.jri-precio-grande del { font-size: .8em; font-weight: var(--fw-regular); color: var(--c-tachado); }

/* Tabla de atributos: etiqueta a la izquierda, valor en gris a la derecha. */
.jri-atributos { width: 100%; border-collapse: collapse; margin: 0; }
.jri-atributos th,
.jri-atributos td {
  padding: 4px 0;
  border: 0;
  border-bottom: var(--border) solid var(--c-hairline);
  background: none;
  text-align: left;
  font-size: var(--fs-body);
  vertical-align: top;
}
.jri-atributos th { width: 40%; font-weight: var(--fw-semibold); }
.jri-atributos td { color: var(--c-texto); text-align: right; }

/* ---------------- Formulario de WooCommerce con la forma de v3 ---------------- */
.jri-resumen__form form.cart { margin: 0; }
.jri-resumen__form table.variations { width: 100%; border: 0; margin: 0 0 var(--space-3); border-collapse: collapse; }
/* Bricks da a cada fila filetes arriba y abajo y a cada celda `width: 50%` y 15 px de
   relleno, con `form.cart table.variations …` (0,2,3 / 0,3,3): de ahí los desplegables
   a media anchura y las rayas entre filas que v3 no tiene. Con `form.cart` delante y la
   clase del contenedor, estas pesan más. */
.jri-resumen__form form.cart table.variations tr,
.jri-resumen__form form.cart table.variations tr:not(:has(.reset_variations)) {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-bottom: var(--space-3);
  border: 0;
}
.jri-resumen__form form.cart table.variations th,
.jri-resumen__form form.cart table.variations td { width: auto; padding: 0; border: 0; background: none; text-align: left; vertical-align: middle; }
/* Con `td.value`/`th.label` y el formulario delante: Bricks dejaba los desplegables a su
   ancho natural y el rótulo en gris con reglas de más peso que las de la clase sola. */
.jri-resumen__form table.variations th.label label { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-texto); margin: 0; }
.jri-resumen__form form.variations_form table.variations td.value select {
  width: 100%;
  height: 42px;
  padding: 0 30px 0 15px;
  /* Solo el color: `background` a secas borraba la flecha que dibuja WooCommerce. */
  background-color: var(--c-blanco);
  border: var(--border) solid var(--c-hairline-form);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
}
.jri-resumen__form .reset_variations {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--c-mute);
}
.jri-resumen__form .woocommerce-variation-price { margin-bottom: var(--space-3); }
.jri-resumen__form .woocommerce-variation-price .price { font-size: 18px; font-weight: var(--fw-semibold); }
.jri-resumen__form .stock { margin: 0 0 var(--space-3); font-size: var(--fs-body); color: var(--c-mute); }
.jri-resumen__form .stock.out-of-stock { color: var(--c-error); }

.jri-resumen__form .woocommerce-variation-add-to-cart,
.jri-resumen__form form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}
/* Cantidad [− 1 +]. Bricks pinta `input` + `span.minus` + `span.plus`: se
   ordenan con `order` para que el menos quede a la izquierda. El `label` accesible de
   WooCommerce va dentro y se oculta, o ocuparía una casilla. */
.jri-resumen__form .quantity .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jri-resumen__form form.cart .quantity {
  /* Bricks la fija a 200 px (`form.cart .quantity`). */
  width: auto;
  display: flex;
  align-items: stretch;
  height: 42px;
  margin: 0;
  border: var(--border) solid var(--c-hairline-form);
}
.jri-resumen__form .quantity .minus { order: 0; }
.jri-resumen__form .quantity .qty { order: 1; }
.jri-resumen__form .quantity .plus { order: 2; }
.jri-resumen__form .quantity .action {
  width: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.jri-resumen__form .quantity .action svg { width: 14px; height: 14px; }
/* `form.cart` delante: Bricks ensancha el campo con una regla de más peso. */
.jri-resumen__form form.cart .quantity .qty {
  flex: none;
  width: 44px;
  height: auto;
  height: 100%;
  padding: 0;
  border: 0;
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
}
.jri-resumen__form .quantity .qty::-webkit-inner-spin-button,
.jri-resumen__form .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.jri-resumen__form .single_add_to_cart_button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 12px 20px;
  background: var(--c-boton);
  color: var(--c-blanco);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-boton);
  font-size: var(--fs-boton);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-base);
}
.jri-resumen__form .single_add_to_cart_button:hover { background: var(--c-boton-hover); }
/* El botón salía 10 px POR DEBAJO de la caja de cantidad, midiendo los dos 42 px: lo bajaba
   `form.cart .quantity+button { margin-top: 10px }` de Bricks
   (`assets/css/integrations/woocommerce-layer.min.css`), que separa las dos piezas cuando se
   apilan. Aquí van en la misma fila y esa separación ya la da el `gap` del contenedor —que
   vale para los dos ejes, así que al envolverse en pantallas estrechas sigue habiendo aire.

   ⚠️ No basta con añadir clases: el selector de Bricks vale (0,2,2) y
   `.jri-resumen__form .single_add_to_cart_button` solo (0,2,0). Hay que **repetir el hermano
   adyacente** para ganarle. No se ve en producción porque allí no hay Bricks. */
.jri-resumen__form form.cart .quantity + button.single_add_to_cart_button { margin-top: 0; }
/* Sin variación elegida WooCommerce la deja `.disabled` (sigue siendo pulsable y
   avisa de que falta elegir). En v3 el botón se ve negro también en ese estado: no
   se atenúa. Bricks sí lo atenúa, con más peso que la clase sola. */
.jri-resumen__form form.cart .single_add_to_cart_button.disabled { opacity: 1; cursor: pointer; }

/* Ficha técnica y vídeo: los botones del sitio (`.box-info-boton-producto-pdf`): amarillo
   a ANCHO COMPLETO, 45 px de alto, 12 px / 500 en versalitas con 1,25 px de tracking. */
.jri-producto-botones { display: grid; gap: var(--space-3); }
.jri-boton-ficha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 45px;
  padding: 0 50px;
  background: #F4EC09;
  color: #000000;
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t-base);
}
.jri-boton-ficha:hover { background: var(--c-amarillo-oscuro); color: var(--c-negro); }

.jri-meta {
  display: grid;
  gap: 4px;
  padding-top: 20px;
  border-top: var(--border) solid var(--c-hairline);
  font-size: var(--fs-body);
  line-height: 22.4px;
  color: var(--c-texto);
}
.jri-meta span { color: var(--c-texto); font-weight: var(--fw-semibold); }
.jri-meta a { color: inherit; }
.jri-meta a:hover { color: var(--c-texto); }

/* ---------------- Descripción: la pestaña única «Descripción larga» ----------------
   Filete a lo ancho y la pestaña centrada con su raya de 3 px encima (16 px / 600 en
   versalitas). El texto va a todo el ancho del contenedor: h1 28 / h2 24, 600; párrafo
   14/22,4. Los títulos del contenido son del cliente: sin estas reglas salían con los de
   Bricks, mucho más grandes. */
.jri-ficha-pestana {
  margin: var(--space-7) 90px 0;
  border-top: var(--border) solid var(--c-hairline);
  text-align: center;
}
.jri-ficha-pestana h2 {
  display: inline-block;
  margin: -1px 0 0 !important;
  padding: 30px 0 10px;
  border-top: 3px solid var(--c-negro);
  font-size: 16px;
  line-height: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: #333333;
}
.jri-ficha-descripcion { padding-block: var(--space-6) var(--space-7); }
.jri-prosa { font-size: 14px; line-height: 22.4px; }
/* 20 px bajo cada bloque, como el sitio. Con `.jri-ficha-producto` delante: el reinicio de
   márgenes de arriba (`.jri-ficha-producto :is(h1…p)`, 0,1,1) le ganaba a la regla sola
   (0,1,0) y los títulos salían pegados al texto. */
.jri-ficha-producto .jri-prosa > * { margin: 0 0 20px; }
.jri-ficha-producto .jri-prosa > :last-child { margin-bottom: 0; }
/* Los títulos del cliente llevan a veces `<strong>` dentro: en el sitio no engordan. */
.jri-prosa :is(h1, h2, h3, h4, h5) :is(strong, b) { font-weight: inherit; }
.jri-prosa h1 { font-size: 28px; line-height: 39.2px; font-weight: var(--fw-semibold); }
.jri-prosa h2 { font-size: 24px; line-height: 33.6px; font-weight: var(--fw-semibold); }
.jri-prosa h3 { font-size: 20px; line-height: 28px; font-weight: var(--fw-semibold); }
.jri-prosa h4 { font-size: 18px; font-weight: var(--fw-semibold); }
.jri-prosa h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }
.jri-prosa ol { list-style: decimal; padding-left: 1.25em; display: grid; gap: var(--space-2); }
.jri-prosa ul { list-style: disc; padding-left: 1.25em; display: grid; gap: var(--space-2); }
.jri-prosa a { color: var(--c-texto); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Relacionados: carrusel de 4 por vista ---------------- */
.jri-ficha-relacionados { padding-top: var(--space-7); border-top: var(--border) solid var(--c-hairline); }
/* 22 px / 600 en versalitas con la raya corta debajo (40 × 2, `#111110`), como en el sitio. */
.jri-ficha-relacionados > h3 {
  margin-bottom: var(--space-5);
  font-size: 22px;
  line-height: 30.8px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}
.jri-ficha-relacionados > h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 10px;
  background: var(--c-negro);
}
.jri-carrusel--4 .jri-carrusel-carril .jri-product-card { width: calc((100% - 3 * 20px) / 4); }
@media (max-width: 980px) { .jri-carrusel--4 .jri-carrusel-carril .jri-product-card { width: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 640px) { .jri-carrusel--4 .jri-carrusel-carril .jri-product-card { width: calc((100% - 12px) / 2); } }

/* `<summary>` con el mismo aspecto que tenía el `<div>` de la pestaña: fuera de móvil no se
   pliega nada (el JS le deja el `open`), así que el marcador sobra. */
.jri-ficha-desc > summary.jri-ficha-pestana { list-style: none; }
.jri-ficha-desc > summary.jri-ficha-pestana::-webkit-details-marker { display: none; }

/* ---------------- Móvil ---------------- */
@media (max-width: 1024px) {
  .jri-ficha { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .jri-ficha-pestana { margin-inline: var(--pad-x); }
}
@media (max-width: 640px) {
  /* Las miniaturas pasan a una fila bajo la imagen. */
  .jri-galeria .woocommerce-product-gallery { grid-template-columns: minmax(0, 1fr); }
  .jri-galeria .flex-control-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  .jri-galeria .flex-control-thumbs li { flex: 0 0 72px; width: 72px !important; }
  .jri-galeria .flex-viewport,
  .jri-galeria .woocommerce-product-gallery__wrapper { grid-column: 1; }
  .jri-resumen h1 { font-size: 20px; line-height: 24px; }

  /* Acordeón de «Descripción larga» (como el sitio en móvil). El marcador propio de
     `<details>` se sustituye por el signo del pie, a la derecha. */
  .jri-ficha-desc > summary.jri-ficha-pestana {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    list-style: none;
    cursor: pointer;
  }
  .jri-ficha-desc > summary.jri-ficha-pestana::-webkit-details-marker { display: none; }
  .jri-ficha-desc > summary.jri-ficha-pestana::after {
    content: '+';
    font-size: 20px;
    font-weight: var(--fw-medium);
    line-height: 1;
  }
  .jri-ficha-desc[open] > summary.jri-ficha-pestana::after { content: '–'; }

  /* En móvil el sitio apila el rótulo de la variación ENCIMA del desplegable, a ancho
     completo (v3 lo deja en dos columnas también aquí, y a 390 px el desplegable se
     quedaba en la mitad de la fila). */
  .jri-resumen__form form.cart table.variations tr,
  .jri-resumen__form form.cart table.variations tr:not(:has(.reset_variations)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .jri-resumen__form table.variations th.label label { font-weight: var(--fw-semibold); }
}