/* ============================================================
   BOMORESA SINGLE PRODUCT CUSTOM STYLESHEET
   Campaña: Julio 2026
   ============================================================ */

/* --- 1. Variables de Marca --- */
:root {
  --bm-heading: #151920;
  --bm-price: #0057A8;
  --bm-body: #2E3440;
  --bm-muted: #5F6B7A;
  --bm-faint: #8A939F;
  --bm-link: #003B73;
  --bm-link-hover: #002244;
  --bm-bg-light: #F6F7F9;
  --bm-border-radius: 8px;

  /* --- Escala tipográfica normalizada (9 pasos, rem) --- */
  --bm-fs-xs: 0.8125rem;   /* 13px  - meta, sku, breadcrumb, captions, contador, "Limpiar", th specs */
  --bm-fs-sm: 0.9375rem;   /* 15px  - cuerpo de tabla specs, label de variación, texto del botón */
  --bm-fs-base: 1rem;      /* 16px  - texto general, descripción corta, select, cantidad */
  --bm-fs-lg: 1.125rem;    /* 18px  - título y precio de productos relacionados */
  --bm-fs-xl: 1.6rem;      /* ~26px - h3 de secciones técnicas */
  --bm-fs-2xl: 1.9rem;     /* ~30px - precio principal */
  --bm-fs-title: clamp(1.85rem, 3vw, 2.35rem); /* título del producto */
}

/* --- 2. Tipografía General de Producto --- */
.single-product .woocommerce {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: var(--bm-fs-base) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--bm-body) !important;
}

.single-product h1, 
.single-product h2, 
.single-product h3, 
.single-product h4, 
.single-product h5, 
.single-product h6 {
  font-family: "Outfit", sans-serif !important;
  color: var(--bm-heading) !important;
}

.single-product .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb,
.rank-math-breadcrumb {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-xs) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--bm-faint) !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.rank-math-breadcrumb a {
  color: var(--bm-faint) !important;
  font-weight: 500 !important;
  transition: color 0.2s;
}

.rank-math-breadcrumb a:hover {
  color: var(--bm-link) !important;
}

.rank-math-breadcrumb .separator {
  margin: 0 6px !important;
  color: var(--bm-faint) !important;
}

/* --- 3. Titulo y Precios --- */
.single-product .product_title,
.woocommerce div.product .product_title {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-title) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  color: var(--bm-heading) !important;
  text-transform: none !important;
  margin-top: 5px !important;
  margin-bottom: 12px !important;
}

.single-product p.price,
.single-product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price .amount,
.woocommerce div.product span.price .amount,
.product-price-container,
.product-price-container .woocommerce-Price-amount,
.product-price-container .amount,
.product-price-container bdi,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .price .amount {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-2xl) !important;
  font-weight: 800 !important;
  color: var(--bm-price) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
}

/* Contenedor del precio principal: respiración + símbolo y separador del rango */
.product-price-container {
  margin: 0 0 22px !important;
}
.product-price-container .woocommerce-Price-currencySymbol {
  font-weight: 700 !important;
}
.product-price-container > span[aria-hidden="true"] {
  color: var(--bm-faint) !important;
  font-weight: 500 !important;
  margin: 0 4px !important;
}

.single-product .price .woocommerce-price-suffix,
.product-price-container .woocommerce-price-suffix,
.product-price-container small,
.single-product .woocommerce-variation-price .woocommerce-price-suffix {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-xs) !important;
  font-weight: 500 !important;
  color: var(--bm-muted) !important;
  letter-spacing: 0 !important;
  margin-left: 6px !important;
}

/* --- 4. Estructura de Dos Columnas (Grid principal) --- */
.single-product-main {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 50px !important;
  margin-bottom: 60px !important;
}

@media (min-width: 768px) {
  .single-product-main {
    grid-template-columns: 1fr 2fr !important; /* 33% Galería, 67% Información */
  }
}

.single-product-gallery {
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Galería: solo fijar ancho/alto en el img — NO tocar display ni float del wrapper/slides
   porque flexslider los necesita libres para animar el intercambio de miniaturas */
.woocommerce-product-gallery {
  width: 100% !important;
  max-width: 100% !important;
}

/* La imagen principal ocupa todo el ancho de la columna */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-post-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.single-product-summary {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.product-short-description {
  margin-top: 0 !important;
  margin-bottom: 8px !important; /* Reducido a 8px para compactar */
  padding-bottom: 0 !important;
  font-size: var(--bm-fs-base) !important;
  line-height: 1.6 !important;
  color: var(--bm-body) !important;
}

.product-short-description p {
  margin-bottom: 0 !important;
}

/* Resetear completamente márgenes/rellenos entre descripción y tabla */
.single-product-summary .product-action-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.single-product form.cart.variations_form {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === 5. Formulario de Variaciones y Añadir al Carrito (Restaurado y Compactado) === */

.single-product table.variations,
.woocommerce div.product form.cart table.variations {
  border: none !important;
  margin: 0 !important; /* Reducido a 0 de margen inferior */
  padding: 0 !important;
  width: 100% !important;
  background: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.single-product table.variations tbody {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product table.variations tr {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
  border: none !important;
  background: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important; /* Reducido a 0 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.single-product table.variations th.label,
.single-product table.variations td.value {
  display: block !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.single-product table.variations th.label {
  width: auto !important;
  min-width: 90px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important; /* Reducido de 50px a 40px */
}

.single-product table.variations th.label label {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--bm-heading) !important;
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.single-product table.variations td.value {
  flex: 1 1 220px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Selector: quitar flecha nativa (evita DOBLE flecha) + look premium */
.single-product form.cart .variations select,
.woocommerce div.product form.cart .variations select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 40px !important; /* Reducido de 50px a 40px */
  height: auto !important;
  margin: 0 !important;
  padding: 8px 46px 8px 15px !important; /* Reducido de 12px a 8px */
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-base) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--bm-body) !important;
  background-color: #fff !important;
  border: 1.5px solid #D4DAE2 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.single-product form.cart .variations select:hover {
  border-color: #AEB8C6 !important;
}

.single-product form.cart .variations select:focus {
  border-color: var(--bm-price) !important;
  box-shadow: 0 0 0 3px rgba(0,87,168,0.15) !important;
  outline: none !important;
}

/* Ocultar la flecha de Divi */
.single-product .variations td.value span::after {
  display: none !important;
  border: 0 !important;
  content: none !important;
}

/* Enlace "Limpiar" */
.single-product .reset_variations {
  flex: 0 0 auto !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-xs) !important;
  font-weight: 700 !important;
  color: #A0AEC0 !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.single-product .reset_variations:hover {
  color: var(--bm-price) !important;
}

/* Ocultar contenedores de variación vacíos para evitar que sumen altura */
.single-product .woocommerce-variation-description:empty,
.single-product .woocommerce-variation-availability:empty {
  display: none !important;
}

.single-product .woocommerce-variation-description,
.single-product .woocommerce-variation-availability {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Resetear tablas y ocultar alertas de accesibilidad invisibles que toman espacio */
.single-product table.variations {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.single-product .reset_variations_alert {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Control estricto de la separación del precio dinámico de variación */
.single-product .woocommerce-variation-price {
  margin-top: 0px !important; /* Reducido a cero para pegar al selector */
  margin-bottom: 10px !important; /* Separación arriba de cantidad/botones */
  line-height: 1 !important;
}

.single-product .woocommerce-variation-price .price {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

/* Fila cantidad + botón */
.single-product-summary .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 0 !important; /* Espaciado controlado por el margen del precio */
  margin-bottom: 12px !important; /* Reducido para compactar */
}

/* Campo de cantidad */
.single-product form.cart .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty {
  width: 74px !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 8px !important;
  text-align: center !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-base) !important;
  font-weight: 600 !important;
  color: var(--bm-heading) !important;
  background-color: #fff !important;
  border: 1.5px solid #D4DAE2 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.single-product form.cart .quantity input.qty:focus {
  border-color: var(--bm-price) !important;
  box-shadow: 0 0 0 3px rgba(0,87,168,0.15) !important;
  outline: none !important;
}

/* Boton anadir al carrito */
.single-product button.single_add_to_cart_button {
  min-height: 52px !important;
  padding: 0 34px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.02em !important;
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-sm) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background-color: var(--bm-heading) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: background-color 0.2s, transform 0.1s;
}

.single-product button.single_add_to_cart_button:hover {
  background-color: var(--bm-price) !important;
  transform: translateY(-1px);
}

/* Estado deshabilitado */
.single-product button.single_add_to_cart_button.disabled,
.single-product button.single_add_to_cart_button:disabled,
.single-product button.single_add_to_cart_button.wc-variation-selection-needed {
  background-color: #C2C9D4 !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Meta Detalles (SKU, etc) */
.product-meta-details {
  border-top: none !important; /* Elimina la doble línea */
  margin-top: 0 !important;
  padding-top: 8px !important; /* Reducido de 25px a 8px */
  padding-bottom: 12px !important;
}

.product_meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important; /* Separación horizontal */
  font-size: var(--bm-fs-xs) !important;
  line-height: 1.4 !important;
  color: var(--bm-muted) !important;
}

.product_meta span,
.product_meta .sku {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--bm-fs-xs) !important;
  color: var(--bm-muted) !important;
}

/* Separador dinámico (punto central) entre elementos de metadatos */
.product_meta span:not(:last-child)::after {
  content: "•" !important;
  margin-left: 12px !important;
  color: #CBD5E1 !important; /* Gris claro suave */
  font-weight: 700 !important;
}

.product_meta a {
  color: var(--bm-link) !important;
  font-weight: 500 !important;
}

/* --- 6. Ficha Técnica y Secciones de Detalles (Inferiores) --- */
.product-technical-details {
  border-top: 1px solid #E2E8F0;
  margin-top: 60px;
  padding-top: 50px;
}

.product-narrative-section,
.product-specs-section,
.product-attributes-section {
  margin-bottom: 55px;
}

.product-technical-details h2,
.product-technical-details h3 {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-heading) !important;
  margin-bottom: 25px !important;
  position: relative;
  padding-bottom: 10px;
}

.product-technical-details h2::after,
.product-technical-details h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 3px;
  background-color: var(--bm-price);
  border-radius: 2px;
}

.product-description-content p {
  font-size: var(--bm-fs-base) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--bm-body) !important;
  margin-bottom: 20px;
}

/* Tablas Técnicas Premium */
.product-specs-table-container {
  overflow-x: auto;
  border-radius: var(--bm-border-radius);
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.product-specs-table-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--bm-fs-sm);
  text-align: left;
}

.product-specs-table-container table th {
  font-family: "Outfit", sans-serif !important;
  background-color: var(--bm-bg-light) !important;
  color: var(--bm-heading) !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid #CBD5E1 !important;
  text-transform: uppercase;
  font-size: var(--bm-fs-xs);
  letter-spacing: 0.05em;
}

.product-specs-table-container table td {
  padding: 14px 18px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  color: var(--bm-body) !important;
  line-height: 1.5;
}

.product-specs-table-container table tr:last-child td {
  border-bottom: none !important;
}

.product-specs-table-container table tr:nth-child(even) {
  background-color: #FAFAFA;
}

/* Contenedor de Atributos de Producto */
.product-attrs-container {
  background-color: var(--bm-bg-light);
  border-radius: var(--bm-border-radius);
  padding: 30px;
  border: 1px solid #EDF2F7;
}

.product-attrs-content table {
  width: 100%;
  border-collapse: collapse;
}

.product-attrs-content table td {
  padding: 10px 15px;
  border-bottom: 1px solid #E2E8F0;
}

.product-attrs-content table tr:last-child td {
  border-bottom: none;
}

.product-attrs-content table td.label {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  color: var(--bm-heading);
  width: 35%;
}

.product-attrs-content table td.value {
  color: var(--bm-body);
}

/* --- 7. Productos Relacionados --- */
.single-product .related.products {
  border-top: 1px solid #E2E8F0;
  margin-top: 60px;
  padding-top: 50px;
}

/* Relacionados: exactamente 4 por fila (2 filas con 8 productos) */
.single-product .related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px !important;
  margin: 0 !important;
}
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after {
  display: none !important;
  content: none !important;
}
.single-product .related.products ul.products li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}
@media (max-width: 980px) {
  .single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .single-product .related.products ul.products { grid-template-columns: 1fr !important; }
}

.single-product .related.products > h2 {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-heading) !important;
  text-transform: none !important;
  margin-bottom: 30px !important;
}

.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .related.products ul.products li.product h2 {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-heading) !important;
  text-transform: none !important;
}

.single-product .related.products ul.products li.product .price,
.single-product .related.products ul.products li.product .price .amount {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-lg) !important;
  font-weight: 800 !important;
  color: var(--bm-price) !important;
}

/* --- 8. Eliminar sidebar y hacer layout fullwidth --- */
.single-product #sidebar {
  display: none !important;
}

.single-product #left-area {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Quitar la linea vertical de Divi */
.single-product #main-content .container::before {
  display: none !important;
}

/* Hacer el contenedor fullwidth y con fondo azul semitransparente para medir area */
.single-product #main-content .container {
  width: 95% !important;
  max-width: 1400px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  border-radius: 12px;
}

/* ============================================================
   PHOTOSWIPE LIGHTBOX — Fondo blanco + controles azul BOMORESA
   Afecta la galeria fullscreen de productos (WooCommerce)
   ============================================================ */

/* Fondo: negro -> blanco */
.pswp__bg {
  background: rgba(255, 255, 255, 0.98) !important;
}

/* Barra superior: semi-blanca, sin linea */
.pswp__top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* X de cierre SIEMPRE arriba-derecha (movil = desktop). Fix Julio 2026 */
.pswp__counter { margin-inline-end: auto !important; }
.pswp__button--close {
  order: 99 !important;
  float: none !important;
  margin: 0 !important;
}

/* Contador "2 / 3" */
.pswp__counter {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-xs) !important;
  font-weight: 700 !important;
  color: #0057A8 !important;
  opacity: 1 !important;
}

/* Filtro azul BOMORESA: convierte iconos blancos del sprite al color del sitio.
   Aplica a: boton cerrar, zoom, y el ::before de las flechas (que usan sprite) */
.pswp__button--close,
.pswp__button--zoom {
  filter: brightness(0) saturate(100%)
          invert(27%) sepia(89%) saturate(1193%)
          hue-rotate(196deg) brightness(87%) contrast(104%) !important;
  opacity: 1 !important;
  transition: opacity 0.2s ease !important;
}
.pswp__button--close:hover,
.pswp__button--zoom:hover {
  opacity: 1 !important;
}

/* Flechas de navegacion: el icono viene del sprite (background-image),
   se aplica el mismo filtro de color al pseudo-elemento ::before que lo contiene */
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  filter: brightness(0) saturate(100%)
          invert(27%) sepia(89%) saturate(1193%)
          hue-rotate(196deg) brightness(87%) contrast(104%) !important;
  opacity: 1 !important;
}

/* Area de click de las flechas: sin fondo propio, hover sutil */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none !important;
  transition: background 0.2s ease !important;
}
.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
  background: rgba(0, 87, 168, 0.07) !important;
}

/* Caption / pie de foto */
.pswp__caption {
  background: rgba(255, 255, 255, 0.9) !important;
}
.pswp__caption__center {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-xs) !important;
  color: #0057A8 !important;
  text-align: center !important;
}

/* ============================================================
   PHOTOSWIPE — Animaciones de entrada y salida
   ============================================================ */

/* Keyframe: imagen — solo opacidad, SIN transform
   PhotoSwipe usa translate3d() en .pswp__zoom-wrap para centrar la imagen.
   Si animamos transform ahi tambien, pierde el centrado. */
@keyframes pswp-image-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Keyframe: controles aparecen desde arriba con fade */
@keyframes pswp-ui-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fondo: transicion de opacidad prolongada y suave */
.pswp__bg {
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.22, 1) !important;
}

/* Imagen: fade suave — PhotoSwipe sigue controlando el transform/centrado */
.pswp--open .pswp__zoom-wrap {
  animation: pswp-image-in 380ms cubic-bezier(0.4, 0, 0.22, 1) forwards !important;
}

/* Barra superior: aparece con leve retraso despues de la imagen */
.pswp--open .pswp__top-bar {
  animation: pswp-ui-in 300ms ease 80ms both !important;
}

/* Caption: aparece con retraso mayor para efecto en cascada */
.pswp--open .pswp__caption {
  animation: pswp-ui-in 300ms ease 140ms both !important;
}

/* Transicion de salida: fade del fondo al cerrar */
.pswp--animated-in .pswp__bg {
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.22, 1) !important;
}







/* ============================================================
   FASE B - MEJORAS DE DISENO (2026-07-11)
   Bloque ADITIVO y reversible. Para revertir: borrar desde este comentario hasta el final.
   ============================================================ */

/* B1. Galeria sticky en desktop: la imagen acompana el scroll de la ficha larga */
@media (min-width: 980px) {
  .single-product-gallery {
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
  }
}

/* APAGADO 2026-09-17 - lo gobierna bm-producto-v2.css, que copia el look de categorias
(* B2. Tarjetas de "Productos relacionados": sensacion clicable (elevacion + zoom sutil) *)
.single-product .related.products ul.products li.product {
  border: 1px solid #EAEDF1 !important;
  border-radius: var(--bm-border-radius) !important;
  padding: 14px !important;
  background: #fff !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.single-product .related.products ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(21,25,32,0.08) !important;
  border-color: #D4DAE2 !important;
}
.single-product .related.products ul.products li.product a img,
.single-product .related.products ul.products li.product img {
  border-radius: 6px !important;
  transition: transform .25s ease !important;
}
.single-product .related.products ul.products li.product:hover img {
  transform: scale(1.03) !important;
}

*/

/* B3. Accesibilidad: contraste del texto tenue (breadcrumb/meta) + foco visible por teclado */
:root { --bm-faint: #6B7480; } /* antes #8A939F (rozaba AA); ahora AA solido a 13px */
.single-product a:focus-visible,
.single-product button:focus-visible,
.single-product select:focus-visible,
.single-product input:focus-visible {
  outline: 3px solid rgba(0,87,168,0.45) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}


/* ============================================================
   FASE C - Buy-box de COTIZACION (placeholder) (2026-07-11)
   Se muestra en productos SIN precio (catalogo de cotizacion).
   El formulario real reemplazara a .product-quote-form-placeholder.
   ============================================================ */
.product-quote-box {
  border: 1px solid #E2E8F0;
  border-radius: var(--bm-border-radius);
  background: var(--bm-bg-light);
  padding: 22px 24px;
  margin: 0 0 12px;
}
.product-quote-title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--bm-fs-lg) !important;
  color: var(--bm-heading) !important;
  margin: 0 0 6px !important;
}
.product-quote-text {
  font-size: var(--bm-fs-base) !important;
  color: var(--bm-body) !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
}
.product-quote-form-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border: 2px dashed #C2CCD8;
  border-radius: var(--bm-border-radius);
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #F1F4F8 10px, #F1F4F8 20px);
  color: var(--bm-muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--bm-fs-sm);
  font-weight: 600;
  text-align: center;
  padding: 12px;
}


/* ============================================================
   FASE D - MANITA DE GATO (2026-07-11)
   Relacionados, caja de detalles, boton+modal de specs, form CF7.
   Bloque aditivo/reversible. Usa los mismos tokens (sin tamanos nuevos).
   ============================================================ */

/* APAGADO 2026-09-17 - lo gobierna bm-producto-v2.css, que copia el look de categorias
(* D1. Productos relacionados: quitar overlay blanco + icono "+" de Divi,
   quitar borde gris de la imagen, mantener elevacion/sombra (Fase B), zoom recortado *)
.single-product .related.products .et_overlay { display: none !important; }
.single-product .related.products li.product .et_shop_image {
  display: block !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 14px !important;
  background: #fff !important;
}
.single-product .related.products li.product .et_shop_image img {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  transition: transform .35s cubic-bezier(.2,.7,.3,1) !important;
}
.single-product .related.products li.product:hover .et_shop_image img { transform: scale(1.04) !important; }
.single-product .related.products ul.products li.product {
  border-color: #EEF1F5 !important;
  padding: 12px 12px 16px !important;
  overflow: hidden !important;
}

*/

/* D2. "Detalles del Producto" (atributos): de caja gris pesada a tarjeta limpia */
.single-product .product-attrs-container {
  background: #fff !important;
  border: 1px solid #E6EBF1 !important;
  border-radius: 12px !important;
  padding: 6px 26px !important;
  box-shadow: 0 1px 2px rgba(21,25,32,0.03) !important;
}
.product-attrs-content h3 {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-xs) !important;
  font-weight: 700 !important;
  color: var(--bm-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 18px 0 4px !important;
  padding: 0 !important;
}
.product-attrs-content h3::after { display: none !important; content: none !important; }
.product-attrs-content p {
  font-size: var(--bm-fs-base) !important;
  color: var(--bm-heading) !important;
  margin: 0 0 14px !important;
  line-height: 1.6 !important;
}

/* D3. Especificaciones tecnicas: caja "launcher" con boton que abre el modal */
.product-specs-launch {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px;
  background: linear-gradient(180deg, #F8FAFC, #F2F5F9);
  border: 1px solid #E6EBF1; border-radius: 12px;
}
.product-specs-launch .psl-text { margin: 0; flex: 1 1 240px; color: var(--bm-body); font-size: var(--bm-fs-base); line-height: 1.5; }
.product-specs-launch .psl-text strong { color: var(--bm-heading); font-family: "Outfit", sans-serif; font-weight: 700; }
.btn-specs {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: var(--bm-fs-sm);
  letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: var(--bm-price);
  padding: 13px 24px; border: none; border-radius: 8px; cursor: pointer;
  transition: background .18s ease, transform .1s ease, box-shadow .18s ease;
  box-shadow: 0 2px 6px rgba(0,87,168,.20);
}
.btn-specs:hover { background: var(--bm-link); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,87,168,.25); }
.btn-specs:focus-visible { outline: 3px solid rgba(0,87,168,.45); outline-offset: 2px; }
.btn-specs svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* D4. Modal de especificaciones (elemento <dialog> nativo) */
dialog.bm-modal {
  width: min(920px, 92vw); max-width: 92vw; max-height: 86vh;
  padding: 0; border: none; border-radius: 16px; color: var(--bm-body);
  box-shadow: 0 30px 80px rgba(21,25,32,.35); overflow: hidden;
}
dialog.bm-modal::backdrop { background: rgba(21,25,32,.55); }
.bm-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid #EDF1F6;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.bm-modal-head h3 {
  margin: 0; font-family: "Outfit", sans-serif; font-size: var(--bm-fs-xl);
  font-weight: 800; color: var(--bm-heading); letter-spacing: -.02em;
}
.bm-modal-close {
  border: none; background: #F1F4F8; color: var(--bm-heading);
  width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; flex: 0 0 auto;
}
.bm-modal-close:hover { background: #E2E8F0; }
.bm-modal-body { padding: 20px 24px 28px; overflow-y: auto; max-height: calc(86vh - 76px); }
.bm-modal-body table {
  width: 100% !important; border-collapse: collapse !important; margin: 0 0 18px !important;
  font-size: var(--bm-fs-sm) !important; text-align: left !important;
}
.bm-modal-body table th {
  font-family: "Outfit", sans-serif !important; background: #F6F7F9 !important; color: var(--bm-heading) !important;
  font-weight: 700 !important; padding: 12px 15px !important; border: none !important;
  border-bottom: 2px solid #CBD5E1 !important; text-transform: uppercase; font-size: var(--bm-fs-xs) !important; letter-spacing: .04em;
  white-space: nowrap;
}
.bm-modal-body table td { padding: 12px 15px !important; border: none !important; border-bottom: 1px solid #F1F5F9 !important; color: var(--bm-body) !important; }
.bm-modal-body table tr:nth-child(even) td { background: #FAFBFC !important; }

/* D5. Formulario de cotizacion (CF7) dentro del quote-box */
.product-quote-box { padding: 22px 24px 24px !important; }
.product-quote-box .product-quote-text { margin-bottom: 18px !important; }
.bm-cf7 .bm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 520px) { .bm-cf7 .bm-form-grid { grid-template-columns: 1fr; } }
.bm-cf7 .bm-field { margin: 0 0 12px; display: flex; flex-direction: column; }
.bm-cf7 .bm-field-full { grid-column: 1 / -1; }
.bm-cf7 label { font-family: "Outfit", sans-serif; font-size: var(--bm-fs-xs); font-weight: 700; color: var(--bm-heading); margin: 0 0 5px; }
.bm-cf7 .bm-req { color: var(--bm-price); }
.bm-cf7 input[type=text], .bm-cf7 input[type=email], .bm-cf7 input[type=tel], .bm-cf7 textarea {
  width: 100%; font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--bm-fs-base); color: var(--bm-body);
  background: #fff; border: 1.5px solid #D4DAE2; border-radius: 8px; padding: 10px 13px; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bm-cf7 textarea { resize: vertical; min-height: 82px; }
.bm-cf7 input:focus, .bm-cf7 textarea:focus { border-color: var(--bm-price); box-shadow: 0 0 0 3px rgba(0,87,168,.15); outline: none; }
.bm-cf7 .bm-producto, .bm-cf7 input.bm-producto { background: #F6F7F9; color: var(--bm-muted); cursor: default; font-weight: 600; }
.bm-cf7 .bm-submit-row { margin: 4px 0 0; grid-column: 1 / -1; }
.bm-cf7 .wpcf7-submit {
  width: 100%; font-family: "Outfit", sans-serif; font-weight: 800; font-size: var(--bm-fs-sm);
  text-transform: uppercase; letter-spacing: .02em; color: #fff; background: var(--bm-heading);
  border: none; border-radius: 8px; padding: 14px 20px; cursor: pointer; transition: background .2s ease, transform .1s ease; box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.bm-cf7 .wpcf7-submit:hover { background: var(--bm-price); transform: translateY(-1px); }
.wpcf7 .wpcf7-response-output { border-radius: 8px !important; font-size: var(--bm-fs-sm) !important; margin: 14px 0 0 !important; padding: 10px 14px !important; }
.wpcf7-not-valid-tip { font-size: var(--bm-fs-xs) !important; color: #c0392b !important; }


/* ============================================================
   FASE E - PULIDO (2026-07-11)
   Ancho 90%, spacing superior, animacion del modal, boton PDF,
   banner placeholder, y detalles tecnicos movidos a la columna derecha.
   Bloque aditivo/reversible. Usa los mismos tokens.
   ============================================================ */

/* E1. Contenedor: 90% centrado + menos aire arriba */
.single-product #main-content .container {
  width: 90% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}
/* Menos margen sobre el bloque principal (mas pegado arriba, ligero) */
.single-product-main { margin-top: 0 !important; }

/* E2. Detalles tecnicos ahora viven en la columna derecha (junto a la galeria sticky).
   Se ajusta el ritmo vertical dentro de la columna. */
.single-product-summary .product-technical-details {
  margin-top: 34px !important;
  padding-top: 30px !important;
}
.single-product-summary .product-narrative-section,
.single-product-summary .product-specs-section,
.single-product-summary .product-attributes-section {
  margin-bottom: 40px !important;
}

/* E3. Animacion de entrada del modal de especificaciones (cool) */
@keyframes bm-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bm-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
dialog.bm-modal[open] { animation: bm-modal-in .30s cubic-bezier(.2,.8,.25,1) both; }
dialog.bm-modal[open]::backdrop { animation: bm-backdrop-in .30s ease both; }

/* E4. Boton "Ficha tecnica (PDF)" - campo editable ficha_tecnica_pdf */
.product-ficha-row { margin: 14px 0 4px; }
.btn-ficha {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: var(--bm-fs-sm);
  color: var(--bm-link); background: #fff; border: 1.5px solid #D4DAE2; border-radius: 10px;
  padding: 11px 18px; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-ficha:hover { border-color: var(--bm-price); color: var(--bm-price); box-shadow: 0 6px 16px rgba(0,87,168,.12); transform: translateY(-1px); }
.btn-ficha:focus-visible { outline: 3px solid rgba(0,87,168,.45); outline-offset: 2px; }
.btn-ficha svg { width: 22px; height: 22px; flex: 0 0 auto; color: #D0342C; }
.btn-ficha .bf-text { display: flex; flex-direction: column; align-items: flex-start; }
.btn-ficha .bf-sub { color: var(--bm-faint); font-weight: 500; font-size: var(--bm-fs-xs); }

/* E5. Banner placeholder antes de productos relacionados */
.product-promo-banner {
  margin: 56px 0 0;
  min-height: 150px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #C2CCD8; border-radius: 14px;
  background: repeating-linear-gradient(45deg, #fff, #fff 12px, #F5F7FA 12px, #F5F7FA 24px);
  color: var(--bm-muted); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: var(--bm-fs-sm);
  text-align: center; padding: 22px;
}


/* ============================================================
   FASE F - PULIDO 2 (2026-07-12)
   Linea azul bajo precio, salida del modal, drawer de cotizacion,
   logos de pago, texto promo, fix meta categorias, spacing superior.
   Bloque aditivo/reversible. Mismos tokens.
   ============================================================ */

/* F1. Linea azul bajo el precio (igual que los encabezados) */
.product-price-container {
  position: relative !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}
.product-price-container::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 45px; height: 3px; background: var(--bm-price); border-radius: 2px;
}

/* F2. Menos aire arriba del layout */
.single-product #main-content .container { padding-top: 10px !important; }
.single-product .product-breadcrumbs { margin-top: 0 !important; }

/* F3. Animacion de SALIDA del modal (misma vibra que la entrada) + Esc/backdrop animado.
   La clase .bm-closing la agrega el JS del template antes de cerrar. */
@keyframes bm-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(18px) scale(.965); }
}
@keyframes bm-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
dialog.bm-modal.bm-closing { animation: bm-modal-out .26s cubic-bezier(.4,0,.6,1) both; }
dialog.bm-modal.bm-closing::backdrop { animation: bm-backdrop-out .26s ease both; }

/* F4. DRAWER de cotizacion (panel lateral derecho estilo checkout Shopify) */
dialog.bm-drawer {
  margin: 0 0 0 auto !important;
  height: 100vh; max-height: 100vh;
  width: min(440px, 94vw); max-width: 94vw;
  padding: 0; border: none; border-radius: 0; color: var(--bm-body);
  box-shadow: -22px 0 70px rgba(21,25,32,.30); overflow: hidden;
}
dialog.bm-drawer::backdrop { background: rgba(21,25,32,.45); }
@keyframes bm-drawer-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes bm-drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
dialog.bm-drawer[open] { animation: bm-drawer-in .34s cubic-bezier(.2,.8,.25,1) both; }
dialog.bm-drawer.bm-closing { animation: bm-drawer-out .30s cubic-bezier(.4,0,.7,1) both; }
dialog.bm-drawer[open]::backdrop { animation: bm-backdrop-in .34s ease both; }
dialog.bm-drawer.bm-closing::backdrop { animation: bm-backdrop-out .30s ease both; }
.bm-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-bottom: 1px solid #EDF1F6;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.bm-drawer-head h3 {
  margin: 0; font-family: "Outfit", sans-serif; font-size: var(--bm-fs-xl);
  font-weight: 800; color: var(--bm-heading); letter-spacing: -.02em;
}
.bm-drawer-body { padding: 20px 22px 34px; overflow-y: auto; height: calc(100vh - 74px); }
.bm-drawer-body .product-quote-text { margin: 0 0 18px; color: var(--bm-body); font-size: var(--bm-fs-base); }

/* Boton que dispara el drawer (mismo look que el de tablas, full width en cotizacion) */
.btn-quote { width: 100%; justify-content: center; }

/* F5. Logos de metodos de pago (grises -> color al hover) */
.product-payments {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 16px 0 2px;
}
.product-payments .pay-label {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--bm-fs-xs);
  font-weight: 600; color: var(--bm-faint); letter-spacing: .01em;
}
.product-payments img {
  height: 28px; width: auto; display: block;
  filter: grayscale(1); opacity: .6;
  transition: filter .25s ease, opacity .25s ease;
}
.product-payments:hover img { filter: grayscale(0); opacity: 1; }

/* F6. Texto promo breve antes del banner */
.product-promo-text {
  text-align: center; margin: 54px 0 16px;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: var(--bm-fs-lg);
  color: var(--bm-heading); letter-spacing: -.01em; line-height: 1.4;
}
.product-promo-text span { color: var(--bm-price); }
.product-promo-banner { margin-top: 0 !important; }

/* F7. FIX meta (SKU / Categorias): que las categorias fluyan inline con sus comas
   (el problema era display:inline-flex convirtiendo comas/links en flex items) */
.product_meta { align-items: baseline !important; gap: 6px 14px !important; }
.product_meta .sku_wrapper,
.product_meta .posted_in {
  display: inline-block !important;
  align-items: initial !important;
  line-height: 1.6 !important;
}
.product_meta .posted_in a,
.product_meta .sku_wrapper a { display: inline !important; }
/* En movil: apilar SKU y Categorias limpio, sin bullet colgando */
@media (max-width: 600px) {
  .product_meta { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .product_meta span:not(:last-child)::after { content: none !important; }
}


/* F8. EXTRA (manita de gato no pedida): galeria con esquinas redondeadas suaves = toque premium */
.single-product-gallery .woocommerce-product-gallery__image img,
.single-product-gallery .wp-post-image {
  border-radius: 12px !important;
}
.single-product-gallery .flex-control-thumbs li img,
.single-product-gallery .woocommerce-product-gallery__image--placeholder img {
  border-radius: 8px !important;
}


/* ============================================================
   FASE G - PULIDO 3 (2026-07-12)
   Form inline de vuelta, reorden movil (breadcrumb+titulo arriba),
   titulo de modal no-heading, line-height de descripcion + tarjeta
   gris sutil. Bloque aditivo/reversible. Mismos tokens.
   ============================================================ */

/* G1. La caja de cotizacion ahora contiene el formulario inline (mejor conversion) */
.product-quote-box { padding: 22px 24px 24px !important; }
.product-quote-box .product-quote-text { margin-bottom: 16px !important; }

/* G2. Reorden en MOVIL: breadcrumb + titulo ARRIBA (antes de la galeria).
   Se usa :has() para que SOLO aplique con el template nuevo (que tiene
   .single-product-header); el template viejo no se ve afectado. */
.single-product-main:has(.single-product-header) {
  grid-template-columns: 1fr 2fr !important;
  grid-template-areas: "gallery header" "gallery summary" !important;
  column-gap: 50px !important;
  row-gap: 0 !important;
  align-items: start !important;
}
.single-product-main:has(.single-product-header) .single-product-header  { grid-area: header; }
.single-product-main:has(.single-product-header) .single-product-gallery { grid-area: gallery; }
.single-product-main:has(.single-product-header) .single-product-summary { grid-area: summary; }
.single-product-header .product_title { margin-top: 6px !important; }
.single-product-header .product-breadcrumbs { margin-bottom: 6px !important; }

@media (max-width: 767px) {
  .single-product-main:has(.single-product-header) {
    grid-template-columns: 1fr !important;
    grid-template-areas: "header" "gallery" "summary" !important;
  }
  .single-product-main:has(.single-product-header) .single-product-header { margin-bottom: 16px; }
}

/* G3. Titulo del modal como NO-heading (evita duplicar <h> y saltos de nivel h2->h3) */
.bm-modal-head .bm-modal-title {
  margin: 0; font-family: "Outfit", sans-serif; font-size: var(--bm-fs-xl);
  font-weight: 800; color: var(--bm-heading); letter-spacing: -.02em; line-height: 1.2;
}

/* G4. Descripcion principal: line-height consistente + tarjeta gris apenitas visible */
.product-description-content {
  background: #F8FAFC;
  border: 1px solid #EEF2F6;
  border-radius: 12px;
  padding: 20px 24px;
}
.product-description-content,
.product-description-content p,
.product-description-content li,
.product-description-content ul {
  line-height: 1.65 !important;
}
.product-description-content p:last-child,
.product-description-content ul:last-child { margin-bottom: 0 !important; }
.product-description-content ul { margin-bottom: 0 !important; padding-left: 22px; }


/* ============================================================
   FASE H - PULIDO 4 (2026-07-14)
   Quitar lineas grises "improvisadas", linea azul = sello de
   seccion consistente (incluye Relacionados, fuera del precio),
   y ritmo vertical. Bloque aditivo/reversible. Mismos tokens.
   ============================================================ */

/* H1. Quitar las 3 lineas grises (dividers). La separacion va por espacio + la linea azul de encabezados. */
.single-product .product_meta { border-top: none !important; padding-top: 0 !important; }
.single-product .product-technical-details { border-top: none !important; }
.single-product-summary .product-technical-details {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 36px !important;
}
.single-product .related.products {
  border-top: none !important;
  padding-top: 6px !important;
  margin-top: 56px !important;
}

/* H2. La linea azul = SELLO DE SECCION consistente. */
/* Se quita del precio (redundante con el precio azul; el precio no es encabezado de seccion). */
.product-price-container::after { display: none !important; }
.product-price-container { padding-bottom: 0 !important; margin-bottom: 20px !important; }
/* Se agrega bajo "Productos relacionados" (igual que Descripcion / Especificaciones / Detalles). */
.single-product .related.products > h2 { position: relative !important; padding-bottom: 12px !important; }
.single-product .related.products > h2::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 45px !important;
  height: 3px !important;
  background: var(--bm-price) !important;
  border-radius: 2px !important;
}

/* H3. Ritmo vertical: meta sin bordes, con respiracion propia. */
.product-meta-details {
  margin-top: 4px !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
}


/* ============================================================
   FASE I - RESENAS DE GOOGLE (Trustindex) (2026-09-05)
   Banda a ancho completo que CIERRA la pagina, despues de
   "Productos relacionados". Cae igual en los dos disenos de
   producto porque vive en el tramo compartido del template.
   Bloque aditivo/reversible. Mismos tokens.
   ============================================================ */

/* I1. La banda. Cierra la pagina: mismo respiro (56px) con que arrancan los
   relacionados, para que la separacion de secciones sea consistente. */
.product-reviews-band {
  margin: 56px 0 0;
  padding: 0;
}

/* I2. Encabezado con el mismo sello de seccion (linea azul de 45x3) */
.product-reviews-band .product-reviews-title {
  font-family: "Outfit", sans-serif !important;
  font-size: var(--bm-fs-xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bm-heading) !important;
  text-transform: none !important;
  position: relative !important;
  padding-bottom: 12px !important;
  margin: 0 0 10px !important;
}
.product-reviews-band .product-reviews-title::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 45px !important;
  height: 3px !important;
  background: var(--bm-price) !important;
  border-radius: 2px !important;
}
.product-reviews-band .product-reviews-sub {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--bm-fs-sm) !important;
  font-weight: 500 !important;
  color: var(--bm-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 22px !important;
}

/* I3. Contenedor del widget.
   Trustindex envuelve su salida en <pre class="ti-widget">; hay que anular el
   estilo de <pre> del tema (monospace, fondo gris, borde, scroll) o se ve roto
   en el instante previo a que su JS lo reemplace. */
.product-reviews-widget pre.ti-widget,
.product-reviews-widget pre {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  max-height: none !important;
  display: block !important;
}

/* El tema fuerza Outfit + color de marca en TODO h1-h6 dentro de .single-product;
   aqui se libera para que el widget conserve su propia tipografia. */
.single-product .product-reviews-widget h1,
.single-product .product-reviews-widget h2,
.single-product .product-reviews-widget h3,
.single-product .product-reviews-widget h4,
.single-product .product-reviews-widget h5,
.single-product .product-reviews-widget h6 {
  font-family: inherit !important;
  color: inherit !important;
}

/* Divi pone bullets/margenes en las listas; el slider usa <ul> internamente. */
.product-reviews-widget ul,
.product-reviews-widget ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-reviews-widget ul li { list-style: none !important; }

/* El slider mide su ancho al montar. NO se le pone overflow:hidden porque las
   flechas del carrusel van medio fuera de la caja y se recortaban. */
.product-reviews-widget { max-width: 100% !important; }

/* I4. Movil: mismo ritmo que el resto de secciones */
@media (max-width: 767px) {
  .product-reviews-band { margin-top: 40px; }
  .product-reviews-band .product-reviews-sub { margin-bottom: 18px !important; }
}


/* ============================================================
   FASE J - TABLAS DE ESPECIFICACIONES (2026-09-06)
   Las tablas anchas se recortaban en seco: .bm-modal-body no tenia
   overflow-x y los th van en nowrap. Se agrega scroll horizontal,
   encabezado a dos lineas y soporte para varias tablas por modal.
   ============================================================ */

/* J1. Red de seguridad para las tablas que siguen con el markup viejo */
.bm-modal-body { overflow-x: auto; }

/* J2. Envoltura con scroll propio (markup nuevo) */
.bm-modal-body .bm-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px;
}
.bm-modal-body .bm-tablewrap table { margin: 0 !important; }

/* J3. Encabezado a dos lineas: con 8 columnas el nowrap no cabe en los 920px */
.bm-modal-body table.bm-spec-table th {
  white-space: normal !important; line-height: 1.25;
}
.bm-modal-body table.bm-spec-table td { white-space: nowrap; }
.bm-modal-body table.bm-spec-table td:first-child {
  font-weight: 700; color: var(--bm-heading) !important;
}
.bm-spec-ctrl { font-weight: 400; color: var(--bm-muted); }

/* J4. Subtitulo y nota al pie dentro del modal */
.bm-modal-body .bm-spec-subtitulo {
  margin: 4px 0 12px !important; font-family: "Outfit", sans-serif;
  font-size: var(--bm-fs-base); font-weight: 800; color: var(--bm-heading);
  letter-spacing: -.01em;
}
.bm-modal-body .bm-spec-nota {
  margin: 0 0 24px !important; font-size: var(--bm-fs-xs);
  color: var(--bm-muted); line-height: 1.55;
}

/* J5. Movil: el modal es angosto, la tabla se desliza */
@media (max-width: 767px) {
  .bm-modal-body table.bm-spec-table { font-size: var(--bm-fs-xs) !important; }
  .bm-modal-body table.bm-spec-table th,
  .bm-modal-body table.bm-spec-table td { padding: 10px 12px !important; }
}

/* J6. Filas de grupo dentro de una tabla (variador CFW300, producto 2455).
   Gana al zebrado por especificidad: 3 clases contra 2. */
.bm-modal-body table.bm-spec-table tr.bm-spec-grupo td {
  background: #EDF1F6 !important; color: var(--bm-heading) !important;
  font-family: "Outfit", sans-serif; font-weight: 700;
  font-size: var(--bm-fs-xs) !important; text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 15px !important; border-bottom: 1px solid #CBD5E1 !important;
}

/* J7. Encabezados centrados verticalmente en TODAS las tablas del modal
   (2026-09-06, a peticion de Rodrigo). Aplica a los 59 productos con tabla,
   tengan el markup nuevo o el viejo con estilos en linea. Las celdas de datos
   tambien, para que una fila con texto de dos renglones no descuadre. */
.bm-modal-body table th,
.bm-modal-body table td { vertical-align: middle !important; }

/* J8. Alineacion de columnas (2026-09-07, lo pidio Rodrigo). Aplica a las 59 tablas.
   La 1a columna a la izquierda (es el identificador: codigo o modelo, texto largo);
   las demas centradas. Encabezado y dato van igual, para que cada titulo caiga
   sobre su columna. Las filas de grupo del CFW300 siguen a la izquierda: son
   etiquetas de seccion, no datos de columna.
   El !important es obligatorio: el markup viejo trae text-align:left en linea. */
.bm-modal-body table th,
.bm-modal-body table td { text-align: center !important; }
.bm-modal-body table th:first-child,
.bm-modal-body table td:first-child { text-align: left !important; }
.bm-modal-body table tr.bm-spec-grupo td { text-align: left !important; }