/* =====================================================================
   MASTERLED — FICHA DE PRODUCTO (theme master_beta)
   =====================================================================
   Generado extrayendo el CSS que vivía en línea en:
     - catalog/product.tpl                       (bloque head_seo + overrides)
     - catalog/_partials/product-add-to-cart.tpl (stock, cantidad y CTA)

   ORDEN DE CARGA — IMPORTANTE
   PrestaShop 1.7 sirve assets/css/custom.css el ÚLTIMO de forma automática.
   Esta hoja se engancha con {block name='stylesheets' append} en product.tpl,
   de modo que se carga DESPUÉS de custom.css y puede reescribir sus reglas
   sin recurrir a !important. Si se mueve antes, las secciones 1..9 dejarán
   de aplicar.

   Todo está acotado a body#product, así que no afecta a otras páginas.

   ÍNDICE
     A. Base ....... sistema de color, rejilla, galería, panel, ficha inferior
     B. CTA ........ disponibilidad, selector de cantidad y añadir al carrito
     C. Overrides .. correcciones sobre custom.css y componentes nuevos
   ===================================================================== */

/* =====================================================================
   A. BASE
   ===================================================================== */
/* ════════════════════════════════════════════════════════════
 MASTERLED — PRODUCT PAGE STYLES (scoped to body#product)
 ════════════════════════════════════════════════════════════ */
:root {
  /* Alto real de la cabecera sticky (#header). Se afina en runtime. */
  --ml-header-h: 80px;
  /* Holgura extra para que el contenido no bese la cabecera */
  --ml-header-gap: 16px;
  --ml-sticky-top: calc(var(--ml-header-h) + var(--ml-header-gap));
  /* Ancho máximo de la ficha en escritorio */
  --ml-page-max: 1880px;
  --ml-c-ink: #101215;
  --ml-c-mist: #7f868c;
  --ml-c-sand: #d4dce6;
  --ml-c-warm: #eaedf3;
  --ml-c-danger: #b03a2e;
}

body#product {
  --ml-ink: #101215;
  --ml-paper: #f8f8fa;
  --ml-warm: #eaedf3;
  --ml-sand: #d4dce6;
  --ml-amber: #2354f5;
  --ml-pine: #2b4a35;
  --ml-mist: #7f868c;
  --ml-danger: #b03a2e;
  --ml-radius: 10px;
}

/* OJO: no acotar `#wrapper div` a `body#product`. Subiría la
   especificidad a 2 ids y esta regla pasaría a pisar los fondos propios de
   los componentes (.ml-more-overlay, .ml-dbox, .ml-cell-zoom, .pill…), que
   se definen con un solo id. Debe quedarse "débil" a propósito. */
body#product #wrapper,
#wrapper div,
#wrapper section {
  background: var(--ml-paper);
}

body#product .ml-bottom div,
body#product .ml-bottom section {
  background: transparent;
}

body#product h1.product-name {
  background-color: transparent !important;
}

html {
  scroll-behavior: smooth;
  /* Los anclas (#product-details-info, etc.) no quedan bajo la cabecera */
  scroll-padding-top: var(--ml-sticky-top);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body#product {
  background: var(--ml-paper);
  color: var(--ml-ink);
}

body#product #main,
body#product #content-wrapper,
body#product #content {
  background: transparent;
}

body#product .breadcrumb {
  background: transparent;
  padding: 12px 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ml-mist);
}

body#product .breadcrumb a {
  color: var(--ml-mist);
}

body#product .breadcrumb a:hover {
  color: var(--ml-ink);
}

/* ─── PAGE GRID ─── */
body#product .ml-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 700px;
  align-items: start;
  gap: 0;
  /* Sin márgenes negativos: provocaban scroll horizontal de 3px */
  max-width: var(--ml-page-max) !important;
  margin-inline: auto;
  /* Separación del footer o de lo que venga a continuación.
     Interpolación lineal entre los dos extremos pedidos:
       480px de viewport  -> 4rem (64px)
       1920px de viewport -> 5rem (80px)
     pendiente = (80-64)/(1920-480) = 1.111vw ; corte = 3.667rem */
  margin-bottom: clamp(4rem, 3.667rem + 1.111vw, 5rem);
}

body#product .ml-gallery-col {
  padding: 16px 32px 32px 16px;
  position: relative;
  min-width: 0;
}

body#product .ml-product-panel {
  padding: 20px 16px 36px 28px;
  /* Único sticky que se conserva: el panel de compra en escritorio.
     Lleva fondo propio y z-index para no transparentarse al solaparse.

     El anclaje se adelanta --ml-panel-lead (distancia del borde del panel
     al <h1>, que mide el JS: padding + referencia + margen). Así la
     referencia se esconde tras la cabecera al hacer scroll y lo primero
     que se ve es el nombre del producto, con --ml-panel-gap de aire. */
  position: sticky;
  --ml-panel-gap: 8px;
  --ml-panel-lead: 43px;
  top: calc(var(--ml-header-h) + var(--ml-panel-gap) - var(--ml-panel-lead));
  z-index: 3;
  background: var(--ml-paper);
  scroll-margin-top: var(--ml-sticky-top);
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ml-sand) transparent;
}

/* ─── MOSAIC GALLERY ─── */
/* Todas las celdas en 1:1 (las fotos de producto son cuadradas).
   Con celda = C y hueco = 8px, la geometría queda determinada:
       tira   = 1 columna de C, dos celdas apiladas -> alto 2C + 8
       hero   = cuadrado del mismo alto -> lado 2C + 8
       ancho  = (2C + 8) + 8 + C = 3C + 16  ->  C = (100% - 16px) / 3
   El alto de la fila lo fija el aspect-ratio del hero; así se evita meter
   porcentajes en grid-template-rows (resolverían contra una altura auto). */
body#product .ml-mosaic {
  --ml-cell: calc((100% - 16px) / 3);
  display: grid;
  grid-template-columns: calc(var(--ml-cell) * 2 + 8px) var(--ml-cell);
  grid-template-rows: auto;
  gap: 8px;
  /*border-radius: 14px;*/
  border-radius: 6px;
  overflow: hidden;
}

body#product .ml-cell {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--ml-sand);
}

body#product .ml-cell.hero {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 1 / 1;
}

body#product .ml-cell.c2 {
  grid-column: 3;
  grid-row: 1;
}

body#product .ml-cell.c3 {
  grid-column: 3;
  grid-row: 2;
}

body#product .ml-bottom-strip {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body#product .ml-bottom-strip .ml-cell {
  border-radius: 0;
  /* Sin esto, la altura intrínseca de las fotos de la tira (tan anchas como
     su columna) haría crecer la fila del grid por encima del hero y el
     mosaico dejaría de medir lo que mide el hero. Posicionándolas en
     absoluto no aportan altura: la fila la fija el hero cuadrado. */
  min-height: 0;
}

body#product .ml-bottom-strip .ml-cell > img {
  position: absolute;
  inset: 0;
}

body#product .ml-cell img,
body#product .ml-cell .imagen-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.3s;
  filter: brightness(1);
}

body#product .ml-cell:hover img {
  transform: scale(1.06);
  filter: brightness(0.93);
}

body#product .ml-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 19, 16, 0);
  transition: background 0.3s;
  pointer-events: none;
}

body#product .ml-cell:hover::after {
  background: rgba(21, 19, 16, 0.12);
}

body#product .ml-cell-zoom {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8) translateY(4px);
  transition:
    opacity 0.25s,
    transform 0.25s;
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(4px);
}

body#product .ml-cell:hover .ml-cell-zoom {
  opacity: 1;
  transform: scale(1) translateY(0);
}

body#product .ml-hero-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--ml-ink);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
}

body#product .ml-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 19, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  z-index: 3;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

body#product .ml-more-overlay span:first-child {
  font-size: 24px;
  font-weight: 600;
}

body#product .ml-more-overlay span:last-child {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Mosaic "standard" variant when there are few images (≤3) */
body#product .ml-mosaic.standard .ml-cell.c2,
body#product .ml-mosaic.standard .ml-cell.c3 {
  display: none;
}

body#product .ml-mosaic.standard .ml-bottom-strip {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  min-height: 0;
  /*border-bottom-right-radius: 14px;*/
  border-bottom-right-radius: 6px;
  overflow: hidden;
}

body#product .ml-mosaic.standard .ml-cell.hero {
  border-top-right-radius: 0;
}

/* Thumb strip */
body#product .ml-thumbs {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  padding: 0 2px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body#product .ml-thumbs::-webkit-scrollbar {
  display: none;
}

body#product .ml-thumbs .ml-tt {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.55;
  transition:
    opacity 0.2s,
    border-color 0.2s;
  flex-shrink: 0;
}

body#product .ml-thumbs .ml-tt:hover {
  opacity: 0.8;
}

body#product .ml-thumbs .ml-tt.on {
  border-color: var(--ml-ink);
  opacity: 1;
}

body#product .ml-thumbs .ml-tt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body#product .ml-accent {
  height: 2px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--ml-pine);
}
@media (max-width: 1000px) {
  body#product .ml-accent {
    display: none;
  }
}

/* ─── LIGHTBOX ─── */
body#product .ml-lb {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
}

body#product .ml-lb.open {
  opacity: 1;
  pointer-events: all;
}

body#product .ml-lb-inner {
  position: relative;
  max-width: 88vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

body#product .ml-lb-img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s;
}

body#product .ml-lb-close {
  position: absolute;
  top: -42px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}

body#product .ml-lb-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

body#product .ml-lb-arrows {
  display: flex;
  gap: 12px;
  align-items: center;
}

body#product .ml-lb-arr {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

body#product .ml-lb-arr:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

body#product .ml-lb-counter {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.1em;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

body#product .ml-lb-thumbs {
  display: flex;
  gap: 8px;
}

body#product .ml-lb-tn {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.4;
  border: 1.5px solid transparent;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}

body#product .ml-lb-tn:hover {
  opacity: 0.7;
}

body#product .ml-lb-tn.on {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.6);
}

body#product .ml-lb-tn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── PRODUCT PANEL ─── */
body#product .ml-pref {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ml-mist);
  margin-bottom: 8px;
}

body#product .ml-product-panel .product-manufacturer {
  display: inline-block;
  margin-right: 12px;
  vertical-align: middle;
}

body#product .ml-product-panel .product-manufacturer img {
  max-height: 24px;
  width: auto;
  opacity: 0.75;
}

body#product .ml-product-panel .product-reference {
  display: inline-block;
}

body#product .ml-product-panel .product-reference span[itemprop="sku"] {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ml-mist);
}

body#product .ml-product-panel .product-reference .label {
  display: none;
}

body#product .ml-product-panel h1.product-name,
body#product .ml-product-panel .h1.product-name {
  font-family: "Quicksand", "Outfit", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ml-ink);
}

body#product .ml-psub {
  font-size: 12px;
  color: var(--ml-mist);
  margin-bottom: 20px;
}

/* Stars row (PrestaShop renders its own stars block via hook) */
body#product .ml-product-panel .star-content,
body#product .ml-product-panel .product-comments {
  margin: 0 0 18px;
}

/* ─── FEATURE PILLS (#product-features-top) ─── */
body#product .ml-product-panel #product-features-top {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
}

body#product .ml-product-panel #product-features-top > div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--ml-sand);
  border-radius: 20px;
  background: var(--ml-warm);
  font-size: 11px;
  color: var(--ml-mist);
  letter-spacing: 0.04em;
  flex-direction: row-reverse;
}

/* La regla que ocultaba .ttipbox se retiró: ahora es el tooltip con el
   nombre de la feature. Su estilo está más abajo, en el bloque de
   componentes nuevos (sección 3). */

body#product .ml-product-panel #product-features-top .masdatos {
  background: var(--ml-warm);
  color: #fff;
  border-color: var(--ml-ink);
}

body#product .ml-product-panel #product-features-top .masdatos .wholelink {
  color: #fff;
  text-decoration: none;
}

/* ─── DELIVERY/STOCK BOX ─── */
body#product .ml-dbox {
  background: var(--ml-warm);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ml-mist);
  line-height: 1.65;
  margin: 6px 0 22px;
}

body#product .ml-dbox > div {
  background-color: transparent !important;
}

body#product .ml-dbox b {
  color: var(--ml-ink);
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
}

body#product .ml-dbox .ml-dico {
  color: var(--ml-pine);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── SPECS LINES + TOGGLE ─── */
body#product .ml-specs {
  margin-top: 8px;
}

body#product .ml-specline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 12px;
}

body#product .ml-sk {
  color: var(--ml-mist);
}

body#product .ml-sv {
  font-weight: 500;
}

body#product .ml-stoggle {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--ml-sand);
  padding: 16px 0;
  cursor: pointer;
  font:
    10.5px "Outfit",
    "Helvetica",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ml-mist);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}

body#product .ml-stoggle:hover {
  color: var(--ml-ink);
}

body#product .ml-stoggle svg {
  transition: transform 0.25s;
}

body#product .ml-stoggle.open svg {
  transform: rotate(180deg);
}

body#product .ml-shidden {
  display: none;
}

body#product .ml-shidden.open {
  display: block;
}

/* --- SPEC LINES --- */
.ficha_tecnica {
  margin-bottom: 1rem !important;
}
/* Specs */
.specline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 12px;
}

.sk {
  color: var(--mist);
}

.sv {
  font-weight: 500;
}

.stoggle {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--sand);
  padding: 16px 0;
  cursor: pointer;
  font:
    10.5px "Outfit",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}

.stoggle:hover {
  color: var(--ink);
}

.stoggle svg {
  transition: transform 0.25s;
}

.stoggle.open svg {
  transform: rotate(180deg);
}

.shidden {
  display: none;
}

.shidden.open {
  display: block;
}

/* ─── TRUST ICONS ─── */
body#product .ml-trust {
  display: flex;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--ml-sand);
  margin-top: 6px;
  justify-content: space-between;
}

body#product .ml-trust .ml-ti {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-size: 10px;
  color: var(--ml-mist);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

body#product .ml-trust .ml-ti svg {
  opacity: 0.55;
}

/* Feature pills */
.pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--sand);
  border-radius: 20px;
  font-size: 11px;
  color: var(--mist);
  background: var(--warm);
  letter-spacing: 0.04em;
}

/* ─── BOTTOM (datasheet + description + related) ─── */
body#product .ml-bottom {
  grid-column: 1 / 2;
  padding: 10px 0px 28px;
}

body#product .ml-shead,
.clasificacion-wrap h3 {
  font-family: "Quicksand", "Outfit", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  margin: 0 0 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  border-bottom: none !important;
}

body#product .ml-shead::after,
.clasificacion-wrap h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ml-sand);
}

body#product .ml-details-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0 20px;
  margin-bottom: 64px;
}

body#product .ml-details-grid h3 {
  font-family: "Quicksand", "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 14px;
}

body#product .ml-details-grid .data-sheet {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--ml-sand);
  border-radius: 10px;
  overflow: hidden;
}

body#product .ml-details-grid .data-sheet li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ml-warm);
  font-size: 12.5px;
}

body#product .ml-details-grid .data-sheet li:last-child {
  border-bottom: none;
}

body#product .ml-details-grid .data-sheet .nombre-car {
  color: var(--ml-mist);
}

body#product .ml-details-grid .data-sheet .valor-car {
  font-weight: 500;
  text-align: right;
}

body#product .ml-details-grid .product-description {
  font-size: 13.5px;
  line-height: 1.7;
  color: #2a2d31;
}

body#product .ml-details-grid .medidas figure {
  margin: 0;
}

body#product .ml-details-grid .medidas img {
  border-radius: 10px;
  border: 1px solid var(--ml-sand);
}

body#product .ml-details-grid .clasificacion-wrap {
  margin-bottom: 16px;
}

#product-details-container {
  margin-top: 0 !important;
}

body#product .ml-details-grid .attachment {
  background: #fff;
  border: 0px solid var(--ml-sand);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

body#product .ml-details-grid .attachment h4 {
  font-size: 13px;
  margin: 0 0 2px;
}

body#product .ml-details-grid .attachment a {
  color: var(--ml-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

body#product .ml-details-grid .attachment p {
  font-size: 11px;
  color: var(--ml-mist);
  margin: 0;
}

body#product .ml-rel-grid .product-miniature,
body#product .ml-rel-grid .rcard {
  background: var(--ml-warm) !important;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

body#product .ml-rel-grid .product-miniature:hover,
body#product .ml-rel-grid .rcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.rcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.rcard:hover .rcard-img img {
  transform: scale(1.07);
}

.rcard-body {
  padding: 14px;
}

.rcard-body h4 {
  font-size: 13px;
  font-weight: 500 !important;
  margin-bottom: 3px;
}

.rcard-body p {
  font-size: 11.5px;
  color: var(--mist);

  & .price-current {
    font-size: 17px !important;
  }
}

.rcard-price {
  font-family: "Quicksand", serif;
  font-size: 17px !important;
  margin-top: 8px;
}

/* ─── ANIMATIONS ─── */
@keyframes mlFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

body#product .ml-product-panel > * {
  animation: mlFadeUp 0.5s ease both;
}

body#product .ml-product-panel > *:nth-child(1) {
  animation-delay: 0.05s;
}

body#product .ml-product-panel > *:nth-child(2) {
  animation-delay: 0.1s;
}

body#product .ml-product-panel > *:nth-child(3) {
  animation-delay: 0.15s;
}

body#product .ml-product-panel > *:nth-child(4) {
  animation-delay: 0.2s;
}

body#product .ml-product-panel > *:nth-child(5) {
  animation-delay: 0.25s;
}

body#product .ml-product-panel > *:nth-child(6) {
  animation-delay: 0.3s;
}

body#product .ml-cell {
  animation: mlFadeUp 0.6s ease both;
}

body#product .ml-cell.hero {
  animation-delay: 0.05s;
}

body#product .ml-cell.c2 {
  animation-delay: 0.12s;
}

body#product .ml-cell.c3 {
  animation-delay: 0.18s;
}

body#product .ml-bottom-strip .ml-cell:first-child {
  animation-delay: 0.22s;
}

body#product .ml-bottom-strip .ml-cell:last-child {
  animation-delay: 0.28s;
}

body#product .current-price span {
  font-weight: 300 !important;
}

/* ─── RESPONSIVE ─── */

/* ≥1001px: dos columnas (1fr | 700px) — ver .ml-page arriba */

/* Paneles intermedios: la galería se estrecha bastante con 700px fijos */
@media (max-width: 1400px) {
  body#product .ml-page {
    grid-template-columns: minmax(0, 1fr) 500px;
  }
}

@media (max-width: 1200px) {
  body#product .ml-gallery-col {
    padding: 16px 16px 32px 16px;
  }
}

/* Colapso a una columna */
@media (max-width: 1000px) {
  body#product .ml-page {
    grid-template-columns: 1fr;
  }
  .ml-product-panel,
  .ml-bottom {
    background: var(--ml-paper) !important;
  }

  body#product .ml-product-panel {
    position: static;
    padding: 8px 0 28px 0;
    z-index: auto;
  }

  body#product .ml-gallery-col {
    padding: 16px 0 0 0;
  }

  body#product .ml-details-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── MÓVIL: hero único ──
   Una sola imagen grande; las celdas secundarias se ocultan y la
   navegación entre imágenes queda en la tira de miniaturas + lightbox. */
@media (max-width: 767px) {
  body#product .ml-mosaic,
  body#product .ml-mosaic.standard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  body#product .ml-mosaic .ml-bottom-strip,
  body#product .ml-mosaic .ml-cell.c2,
  body#product .ml-mosaic .ml-cell.c3 {
    display: none;
  }

  body#product .ml-mosaic .ml-cell.hero {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 1 / 1;
    /*border-radius: 14px;*/
    border-radius: 6px;
  }

  body#product .ml-cell.hero img {
    object-fit: contain;
    background: #fff;
  }
}

/* Tablet pequeña / móvil grande */
@media (max-width: 700px) {
  body#product .ml-product-panel h1.product-name {
    font-size: 28px;
  }

  body#product .ml-pmain {
    font-size: 36px;
  }

  body#product .ml-dbox {
    flex-direction: column;
    gap: 8px;
  }

  body#product .ml-trust {
    gap: 8px;
  }

  body#product .ml-trust .ml-ti {
    flex: 0 0 calc(50% - 4px);
  }
}

/* Móvil estándar */
@media (max-width: 480px) {
  body#product .ml-product-panel h1.product-name {
    font-size: 24px;
  }

  body#product .ml-pmain {
    font-size: 32px;
  }

  body#product .ml-bottom {
    padding: 40px 0px 20px;
  }
  img.ml-eprel-badge__img {
    height: 22px !important;
  }
  body#product .ml-product-panel .control-label,
  body#product .ml-product-panel .color-selector-label,
  body#product .ml-product-panel .ml-vlabel {
    margin-bottom: 0.5rem !important;
    display: block;
  }
  .product-variants .input-container {
    margin: 0 !important;
  }
  body#product .product-quantity > div:nth-of-type(1),
  body#product .product-quantity > div:nth-of-type(2) {
    flex: 1 0 50% !important;
  }
}

/* Móvil pequeño */
@media (max-width: 360px) {
  body#product .ml-product-panel h1.product-name {
    font-size: 22px;
  }
}

/* =====================================================================
   B. CTA — disponibilidad, cantidad y añadir al carrito
   ===================================================================== */
/* ─── STOCK STATUS ─── */
body#product .ml-product-panel #product-availability,
body#product .ml-product-panel .product_availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0px 0 14px !important;
  font-size: 12px !important;
  /*  font: 500 12px/1 'Outfit','Helvetica',sans-serif; letter-spacing: 0;*/
}
body#product .ml-product-panel #product-availability::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ml-pine);
  box-shadow: 0 0 0 3px rgba(43, 74, 53, 0.18);
}
body#product .ml-product-panel #product-availability.lowstock::before {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* ─── QTY + CART BUTTON ─── */
body#product .ml-product-panel .product-add-to-cart {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 4px 0 12px;
}
body#product .ml-product-panel .product-add-to-cart > .control-label {
  display: none;
}

body#product .ml-product-panel .product-quantity {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: nowrap;
}
body#product .ml-product-panel .product-quantity .qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ml-sand);
  border-radius: 8px;
  overflow: hidden;
  min-width: 110px;
  max-width: 130px;
  background: var(--ml-paper);
}
body#product .ml-product-panel .product-quantity .qty-count {
  width: 36px;
  height: 100%;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ml-ink);
  font-weight: 300;
  transition: background 0.15s;
  padding: 0;
}
body#product .ml-product-panel .product-quantity .qty-count:hover {
  background: var(--ml-warm);
}
body#product .ml-product-panel .product-quantity input.product-qty {
  flex: 1;
  min-width: 0;
  width: 40px;
  text-align: center;
  font:
    500 14px/1 "Outfit",
    "Helvetica",
    sans-serif;
  border: none;
  background: none;
  outline: none;
  padding: 0;
  height: 100%;
  -moz-appearance: textfield;
}
body#product
  .ml-product-panel
  .product-quantity
  input.product-qty::-webkit-outer-spin-button,
body#product
  .ml-product-panel
  .product-quantity
  input.product-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body#product .ml-product-panel .product-quantity .add {
  flex: 1 !important;
  display: flex;
}
body#product .ml-product-panel .product-quantity .add-to-cart {
  flex: 1;
  height: 50px;
  background: #1d2a55;
  color: #fff;
  border: none;
  border-radius: 8px;
  font:
    500 12px/1 "Outfit",
    "Helvetica",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.15s,
    background 0.25s;
}
body#product .ml-product-panel .product-quantity .add-to-cart:hover {
  background: #3750a3;
}
body#product .ml-product-panel .product-quantity .add-to-cart:active {
  transform: scale(0.98);
}
body#product .ml-product-panel .product-quantity .add-to-cart[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
body#product .ml-product-panel .product-quantity .add-to-cart .material-icons {
  font-size: 16px;
}
body#product .ml-product-panel .product-quantity .add-to-cart span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── CTA a todo el ancho del panel ───
   custom.css (L4771, dentro de @media min-width:768px) capa .product-quantity
   a 419px !important. Es una cota heredada del tema anterior: dejaba el CTA
   desalineado con TODO lo demás del panel (stock, garantías, accesorios,
   iconos de confianza), que va al 100%. En móvil esa regla ni se aplica, así
   que el 100% ya era el comportamiento en la mitad de los casos.

   Hace falta !important porque el original lo lleva. Si algún día el panel se
   vuelve demasiado ancho en pantallas 2K+, la cota va en el PANEL, nunca aquí:
   una restricción por elemento es justo lo que produjo esta desalineación. */
@media (min-width: 768px) {
  body#product .ml-product-panel .product-quantity {
    max-width: none !important;
  }
}

/* El selector de cantidad no se estira con el contenedor: su max-width de
   130px lo mantiene igual y el botón se queda con todo el resto. */

/* ─── Checkout express de Stripe (Apple/Google Pay, Link, PayPal…) ───
   El contenedor lo pinta displayProductActions dentro de .product-add-to-cart,
   justo debajo del conjunto cantidad + añadir. Comparte padre con
   .product-quantity y ninguno de los dos tiene padding horizontal, así que el
   100% los deja alineados al píxel.

   Los botones viven en un iframe de Stripe: desde aquí NO se puede tocar su
   aspecto ni su altura. Lo único nuestro es el hueco que ocupan. */
body#product .ml-product-panel #stripe-express-checkout-element {
  width: 100%;
  margin: 10px 0 0;

  /* Sin altura fija: `.__PrivateStripeElement` lleva margin -4px arriba y
     abajo, así que la altura automática del contenedor sale como
     `iframe - 8`, que es exactamente el alto visible del botón (52 -> 44).
     Imponer 52 devolvería 8px de fondo muerto y volvería a tapar el radio
     de las esquinas inferiores.

     Pero el min-height NO puede ser 0 ni auto: hay una dependencia circular.
     Stripe monta el iframe en un placeholder de 8px, cuya caja de margen mide
     8-8 = 0; si el contenedor se queda en 0, Stripe no despliega la cartera y
     el iframe se queda en 8px para siempre (medido: 15s clavado en 0).
     Necesita altura REAL en el momento de montar: 1px no sirve, comprobado.

     44px es justo el alto visible del botón ya montado, asi que el suelo
     desaparece en cuanto el contenido manda: ni espacio muerto ni salto.

     Afecta sobre todo a Google Pay, que se resuelve de forma asíncrona; en
     Safari con Apple Pay la comprobación es síncrona y pinta igualmente.

     !important para ganar al min-height:58px de custom.css L8821, que además
     dejaba 14px de fondo sobrante bajo el botón. */
  min-height: 44px !important;

  overflow: hidden;
  border-radius: 8px;
}

/* Sin carteras disponibles Stripe deja el div vacío; sin esto quedaría el
   margen suelto bajo el CTA. */
body#product .ml-product-panel #stripe-express-checkout-element:empty {
  margin: 0;
}

/* Sustituye a custom.css L8743 (@media min-width:768px), que lo capaba a
   418px !important — la misma cota heredada que quitamos del CTA. Necesita
   !important porque el original lo lleva; la especificidad ya la ganamos. */
@media (min-width: 768px) {
  body#product .ml-product-panel #stripe-express-checkout-element {
    max-width: calc(100% - 10px) !important;
  }
}

/* El min-height de custom.css L8821 (58px por debajo de 575px) ya lo anula la
   declaración de arriba, que lleva !important y más especificidad. No hace
   falta media query: el problema del contenedor colapsado se da en TODOS los
   anchos, no solo en móvil. */

body#product .ml-product-panel #stripe-error-message:empty {
  display: none;
}

/* =====================================================================
   C. OVERRIDES SOBRE custom.css + COMPONENTES NUEVOS
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────
   0. PARIDAD CON LA CASCADA ANTERIOR
   Antes de externalizar, este CSS se imprimía ANTES de custom.css y
   perdía frente a él. Al pasar la hoja después, estas declaraciones de
   custom.css dejarían de aplicarse y cambiarían el render. Se replican
   aquí para que la extracción sea puramente un refactor, sin cambios
   visuales. Si algún día se quiere el valor "propio", basta con borrar
   la regla correspondiente de este bloque.
   ───────────────────────────────────────────────────────────── */

/* custom.css @media(min-width:768px): body#product .product-data-right */
@media (min-width: 768px) {
  body#product .ml-product-panel.product-data-right {
    padding-bottom: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   1. FIN DE LOS SOLAPAMIENTOS: fuera fixed/sticky de la ficha
   Se conserva únicamente .ml-product-panel (escritorio), que ya
   lleva fondo propio y z-index.
   ───────────────────────────────────────────────────────────── */
body#product #images-column,
body#product .product-data-right > div:nth-of-type(1) {
  position: static;
  top: auto;
}

/* ─────────────────────────────────────────────────────────────
   2. SIN SCROLL HORIZONTAL
   overflow-x: clip (no `hidden`) para no romper position: sticky.
   ───────────────────────────────────────────────────────────── */
body#product #wrapper {
  overflow-x: clip;
}

body#product .ml-page,
body#product .ml-bottom,
body#product .ml-details-grid,
body#product .ml-product-panel,
body#product .ml-gallery-col {
  min-width: 0;
  max-width: 100%;
}

body#product .ml-details-grid > * {
  min-width: 0;
}

/* Medios y tablas legadas de la descripción: nunca desbordan */
body#product .ml-desc-wrapper img,
body#product .ml-desc-wrapper iframe,
body#product .ml-desc-wrapper video,
body#product .product_faq img {
  max-width: 100%;
  height: auto;
}

body#product .ml-desc-wrapper table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ─────────────────────────────────────────────────────────────
   3. DATOS CLAVE: etiqueta EPREL + pills con tooltip
   ───────────────────────────────────────────────────────────── */
body#product .ml-key-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

body#product .ml-key-facts #product-features-top {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Pill moderna (resetea el diseño heredado de cajas de 60×65px) */
body#product #product-features-top > div {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 6px 13px;
  margin: 0;
  border: 1px solid var(--ml-sand);
  border-radius: 999px;
  background: var(--ml-warm);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--ml-mist);
  text-align: left;
  cursor: help;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

body#product #product-features-top > div:hover,
body#product #product-features-top > div:focus-visible {
  border-color: var(--ml-ink);
  color: var(--ml-ink);
  background: #fff;
}

body#product #product-features-top > div:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

/* El ::after heredado aporta el glifo de unidad (W, lúmenes…) */
body#product #product-features-top > div::after {
  display: inline;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-size: 1rem;
  line-height: 1;
}

body#product #product-features-top > div > span:not(.ttipbox) {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  transform: none;
  text-align: left;
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}

/* ── Tooltip: nombre de la feature ──
   Ojo con el .ttipbox heredado de custom.css: fija `top: 0` y
   `transform: translate(-50%,-110%)`. Hay que anular AMBOS:
   con `top` y `bottom` a la vez y `height:auto`, la altura resuelta
   sale negativa (se clampa a 0) y la caja queda en solo el padding. */
body#product #product-features-top .ttipbox {
  position: absolute;
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: none;
  translate: -50% 4px;
  height: auto;
  z-index: 20;
  display: block;
  width: max-content;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--ml-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow: 0 8px 22px rgba(16, 18, 21, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease,
    visibility 0.18s;
}

body#product #product-features-top .ttipbox::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  border: 5px solid transparent;
  border-top-color: var(--ml-ink);
}

body#product #product-features-top > div:hover > .ttipbox,
body#product #product-features-top > div:focus-visible > .ttipbox {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

@media (prefers-reduced-motion: reduce) {
  body#product #product-features-top .ttipbox {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. ETIQUETA ENERGÉTICA EPREL — dos variantes, misma plantilla
   ───────────────────────────────────────────────────────────── */
body#product .ml-eprel .ml-eprel-out {
  display: contents;
}

/* Si la variante no tiene nada que enseñar, el contenedor desaparece
   (evita huecos de `gap` vacíos en la fila de datos y en la lista). */
body#product .ml-eprel--badge:not(:has(.ml-eprel-badge)),
body#product .ml-eprel--doc:not(:has(.ml-eprel-fiche)) {
  display: none;
}

/* (a) Badge junto a las features */
body#product .ml-eprel--badge {
  flex: 0 0 auto;
}

body#product .ml-eprel--badge .ml-eprel-fiche {
  display: none;
}

body#product .ml-eprel--badge .ml-eprel-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  /*border: 1px solid var(--ml-sand);*/
  border-radius: 8px;
  /*background: #fff;*/
  line-height: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

body#product .ml-eprel--badge .ml-eprel-badge:hover {
  border-color: var(--ml-ink);
  box-shadow: 0 4px 14px rgba(16, 18, 21, 0.1);
}

body#product .ml-eprel--badge .ml-eprel-badge__img {
  width: auto;
  height: 30px;
  max-width: none;
}

/* (b) Fila de descarga dentro de Documentos */
body#product .ml-eprel--doc .ml-eprel-badge {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   5. DOCUMENTOS / DESCARGAS — una sola tipología de fila
   ───────────────────────────────────────────────────────────── */
body#product .ml-downloads {
  margin-bottom: 32px;
}

body#product .ml-dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body#product .ml-dl-li:empty {
  display: none;
}

/* Fila base — la comparten enlaces <a> y el <button> de ficha técnica */
body#product .ml-dl-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ml-sand);
  border-radius: 10px;
  background: #fff;
  color: var(--ml-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

body#product .ml-dl-link:hover {
  border-color: var(--ml-ink);
  box-shadow: 0 8px 22px rgba(16, 18, 21, 0.08);
  transform: translateY(-1px);
  color: var(--ml-ink);
}

body#product .ml-dl-link:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

body#product .ml-dl-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ml-warm);
  color: var(--ml-ink);
}

body#product .ml-dl-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

body#product .ml-dl-name {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body#product .ml-dl-meta {
  font-size: 11px;
  color: var(--ml-mist);
  letter-spacing: 0.02em;
}

body#product .ml-dl-arrow {
  flex: 0 0 auto;
  color: var(--ml-mist);
  display: grid;
  place-items: center;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

body#product .ml-dl-link:hover .ml-dl-arrow {
  transform: translateX(3px);
  color: var(--ml-ink);
}

/* Ficha técnica (módulo productfeaturespdf): el override del tema emite
   ya la estructura .ml-dl-link, así que hereda el formato de fila. */
body#product .ml-dl-form {
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   6. "TAMBIÉN TE PUEDE GUSTAR" — raíl horizontal
   ───────────────────────────────────────────────────────────── */
body#product .ml-rail-wrap {
  margin-bottom: 64px;
}

body#product .ml-rail-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

body#product .ml-shead--rail {
  flex: 1 1 auto;
  margin-bottom: 20px !important;
}

body#product .ml-rail-nav {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

body#product .ml-rail-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ml-sand);
  border-radius: 50%;
  background: #fff;
  color: var(--ml-ink);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

body#product .ml-rail-btn:hover:not([disabled]) {
  background: var(--ml-ink);
  border-color: var(--ml-ink);
  color: #fff;
}

body#product .ml-rail-btn:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

body#product .ml-rail-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

body#product .ml-rail {
  --ml-rail-cols: 5;
  --ml-rail-gap: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--ml-rail-cols) - 1) * var(--ml-rail-gap)) /
      var(--ml-rail-cols)
  );
  gap: var(--ml-rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

body#product .ml-rail::-webkit-scrollbar {
  display: none;
}

body#product .ml-rail:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 4px;
}

body#product .ml-rail > * {
  scroll-snap-align: start;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  body#product .ml-rail {
    scroll-behavior: auto;
  }
}

@media (max-width: 1500px) {
  body#product .ml-rail {
    --ml-rail-cols: 4;
  }
}

@media (max-width: 1150px) {
  body#product .ml-rail {
    --ml-rail-cols: 3;
  }
}

@media (max-width: 820px) {
  body#product .ml-rail {
    --ml-rail-cols: 2;
  }
}

/* En móvil se asoma la siguiente tarjeta: afordancia de swipe */
@media (max-width: 520px) {
  body#product .ml-rail {
    --ml-rail-cols: 2.35;
    --ml-rail-gap: 12px;
  }
  body#product .ml-rail-wrap {
    margin-bottom: 30px;
  }

  body#product .ml-rail-nav {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. DESCRIPCIÓN — plegado sin el degradado blanco heredado
   ───────────────────────────────────────────────────────────── */
body#product .product-description {
  position: relative;
}

body#product .ml-desc-wrapper {
  position: relative;
  overflow: hidden;
  max-height: 220px;
  margin-bottom: 50px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #2a2d31;
  /* Desvanecido por máscara: independiente del color de fondo */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  transition: max-height 0.45s ease;
}

body#product #expandir-custom-text:checked ~ .ml-desc-wrapper {
  max-height: 4000px;
  padding-bottom: 1rem;
  -webkit-mask-image: none;
  mask-image: none;
}

body#product .ml-desc-wrapper h2 {
  font-size: clamp(1.3rem, 0.5rem + 3.65vw, 1.7rem);
  margin-top: 1ch;
}

@media (prefers-reduced-motion: reduce) {
  body#product .ml-desc-wrapper {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   7 bis. MÓVIL: SIN PLEGADO ANIDADO
   En móvil las secciones de .ml-details-grid ya son un acordeón
   (ver ml-mobile-fold en product.tpl), así que el segundo plegado
   interno sobra: abrir una sección solo para encontrar otro botón
   es fricción de más.

   El umbral es 767px a propósito: es el mismo de mobileDetailsMq,
   así que el plegado interno se desactiva EXACTAMENTE cuando el
   acordeón entra en juego, sin ventana de solape.

   Todo se resuelve aquí, sin tocar plantilla ni JS: toggleSpecs()
   y el checkbox siguen intactos y vuelven a mandar en escritorio,
   incluso al redimensionar o girar el dispositivo.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Ficha técnica: todas las specs visibles. #stoggle lleva
     border-top; ocultarlo evita dejar una raya suelta a media lista. */
  body#product .ficha_tecnica .shidden {
    display: block;
  }

  body#product .ficha_tecnica #stoggle {
    display: none;
  }

  /* Descripción: hay que anular las DOS formas de la máscara, o el
     degradado a transparente se seguiría comiendo el final del texto.
     El margin-bottom solo reservaba hueco para el botón absoluto. */
  body#product .ml-desc-wrapper {
    max-height: none;
    margin-bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body#product .boton-expandir-custom-text {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   7 ter. MÓVIL: ORDEN DE LOS BLOQUES DE DETALLE
   En escritorio .ml-details-grid es una rejilla de dos columnas y el orden
   del marcado es el bueno. En móvil pasa a una sola columna, y ahí interesa
   otra secuencia: relacionados, luego descripción + ficha técnica, y al final
   documentos/medidas.

   `order` funciona en grid igual que en flex, así que no hace falta tocar la
   plantilla.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* El bloque de accesorios no tiene id ni clase propios —es un div suelto
     con grid-column en línea— y además solo existe {if $accessories}. Se
     selecciona por descarte para no depender de ese estilo. */
  body#product .ml-details-grid
    > div:not(#product-attachments-and-extra-data):not(#product-description-and-datasheet) {
    order: 1;
  }

  body#product .ml-details-grid > #product-description-and-datasheet {
    order: 2;
  }

  body#product .ml-details-grid > #product-attachments-and-extra-data {
    order: 3;
    /* Mismos 12px que separan los plegados entre sí (.desc_wrapper,
       .medidas): en móvil la rejilla va a gap 0, así que la separación la
       pone cada bloque. */
    margin-top: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. ACCESORIOS (módulo relatedproducts) SOBRE EL CTA
   Estética minimalista tomada de facileds-modern.
   ───────────────────────────────────────────────────────────── */
body#product .ml-related-slot {
  margin: 4px 0 18px;
}

/* Cabecera igual que la del raíl de "También te puede gustar" */
body#product .ml-rel__head {
  display: flex;
  align-items: center;
  gap: 18px;
}

body#product .ml-rel__nav {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  margin-bottom: 20px;
}

body#product .ml-rel__navbtn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ml-sand);
  border-radius: 50%;
  background: #fff;
  color: var(--ml-ink);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

body#product .ml-rel__navbtn:hover:not([disabled]) {
  background: var(--ml-ink);
  border-color: var(--ml-ink);
  color: #fff;
}

body#product .ml-rel__navbtn:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

body#product .ml-rel__navbtn[disabled] {
  opacity: 0.3;
  cursor: default;
}

body#product .ml-rel__viewport {
  overflow: hidden;
}

body#product .ml-rel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body#product .ml-rel__track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body#product .ml-rel__track {
    scroll-behavior: auto;
  }
}

/* Página = rejilla 2×2 */
body#product .ml-rel__page {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  align-content: start;
  scroll-snap-align: start;
}

@media (max-width: 420px) {
  body#product .ml-rel__page {
    grid-template-columns: minmax(0, 1fr);
  }
}
.products.ml-rel-grid > .rcard .regular_price {
  font-size: 0.8em;
  text-decoration: line-through;
  opacity: 0.8;
}
.products.ml-rel-grid > .rcard .discount-product {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ml-c-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
}
/* Tarjeta compacta horizontal */
body#product .ml-rel__card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--ml-warm);
  min-width: 0;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

body#product .ml-rel__card:hover {
  border-color: var(--ml-sand);
  background: #fff;
}

body#product .ml-rel__thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
}

body#product .ml-rel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body#product .ml-rel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

body#product .ml-rel__name {
  margin: 0;
  font-size: 11.5px;
  /* !important: custom.css fija font-weight:200 !important en h1..h6 */
  font-weight: 500 !important;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body#product .ml-rel__name a {
  color: var(--ml-ink);
  text-decoration: none;
}

body#product .ml-rel__attr {
  font-size: 10.5px;
  color: var(--ml-mist);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body#product .ml-rel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

body#product .ml-rel__price {
  font-family: "Quicksand", "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ml-ink);
  white-space: nowrap;
}

/* El botón conserva .btn-add-related-cart para el JS del módulo */
body#product .ml-rel__add.btn-add-related-cart {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--ml-ink);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.18s ease,
    transform 0.12s ease;
}

body#product .ml-rel__add.btn-add-related-cart:hover {
  background: #1d2a55;
  transform: none;
}

body#product .ml-rel__add.btn-add-related-cart:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

body#product .ml-rel__add.btn-add-related-cart[disabled] {
  opacity: 0.5;
  cursor: default;
}

body#product .ml-rel__add .spinner svg {
  animation: mlRelSpin 0.7s linear infinite;
}

@keyframes mlRelSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────────────────────────
   9. TARJETA DE ACCESORIO (miniatures/product-related.tpl)
   Estas reglas vivían en un bloque "head append" dentro de la propia
   miniatura, así que se reimprimían una vez por accesorio (34 copias
   en esta ficha). Centralizadas aquí, se emiten una sola vez.
   ───────────────────────────────────────────────────────────── */
body#product .etiquetas_producto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  body#product .etiquetas_producto p.tag {
    margin-top: 0;
  }

  body#product .etiquetas_producto {
    gap: 0.6rem;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  body#product .product-responsive-card .discount-percentage.discount-product {
    float: right;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.3rem 0.55rem;
    background-color: #e30000;
    color: var(--clr-neutral-100, #fff);
    border-radius: 0.5rem;
    line-height: 1.3;
  }
}

@container product-responsive-card (width < 180px) {
  body#product .product-responsive-card .price-current {
    font-size: 1.4rem;
  }

  body#product .product-responsive-card .regular_price {
    font-size: 0.8rem;
  }
}

/* Tarjeta dentro del raíl: altura homogénea */
body#product .ml-rail .rcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

body#product .ml-rail .rcard-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}

body#product .ml-rail .rcard-img figure {
  margin: 0;
  height: 100%;
}

body#product .ml-rail .rcard-img a {
  display: block;
  height: 100%;
}

body#product .ml-rail .rcard-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body#product .ml-rail .rcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 2px;
}

body#product .ml-rail .rcard-body h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body#product .ml-rail .rcard-price {
  margin-top: auto;
}

@media (max-width: 480px) {
  body#product .rcard .rcard-body {
    padding: 10px 8px 8px 8px;
  }
  body#product .rcard .rcard-body h4 {
    margin-bottom: 3px !important;
    + p {
      font-size: 11.5px !important;
    }
  }
  body#product .rcard .rcard-body .rcard-price {
    margin-bottom: 0 !important;
  }
  body#product .rcard .rcard-body .rcard-price > p {
    margin-bottom: 0 !important;
  }
  body#product .rcard .rcard-body .rcard-price > p > span {
    margin-bottom: 0 !important;
  }
  body#product .ml-shead, .clasificacion-wrap h3 {
   margin: 0 0 0.5rem !important;
  }

  .ficha_tecnica {
    margin-top: 12px !important
  }
  body#product .desc_wrapper {
    margin-top: 12px !important;
  }
}
/* =====================================================================
   D. ITERACIÓN: miga en la imagen, fila de stock, raíles de una línea
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────
   D1. MIGA DE PAN SOBRE LA IMAGEN PRINCIPAL
   Sustituye al antiguo .ml-hero-badge (que sólo mostraba la categoría).
   Se conserva el marcado schema.org que emite _partials/breadcrumb.tpl.
   ───────────────────────────────────────────────────────────── */
/* El "pill" vive en el <nav>, no en el <ol>: custom.css tiene un reset
   global `ul, ol { padding: 0 !important }` (L18) que haría imposible
   darle padding a la lista sin recurrir también a !important. */
body#product .ml-hero-crumb {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 18, 21, 0.6);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  font-size: 10px;
}

body#product .ml-hero-crumb::-webkit-scrollbar {
  display: none;
}

body#product .ml-hero-crumb ol {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  background: none;
  white-space: nowrap;
}

body#product .ml-hero-crumb li {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}

/* Fuera el chevron heredado de #wrapper .breadcrumb li::after */
body#product .ml-hero-crumb li::after {
  content: none;
  display: none;
}

body#product .ml-hero-crumb li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin: 0 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

body#product .ml-hero-crumb a {
  display: inline-flex;
  align-items: center;
  float: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.18s ease;
}

body#product .ml-hero-crumb a:hover,
body#product .ml-hero-crumb a:focus-visible {
  color: #fff !important;
}

/* El icono "home" trae fill="#666" como atributo; se repinta en blanco
   sin tocar el <path fill="none"> que hace de caja de recorte. */
body#product .ml-hero-crumb svg {
  width: 13px;
  height: 13px;
}

body#product .ml-hero-crumb svg path:not([fill="none"]) {
  fill: currentColor;
}

body#product .ml-hero-crumb .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 767px) {
  body#product .ml-hero-crumb {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 11px;
  }

  body#product .ml-hero-crumb a {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  body#product .ml-hero-crumb li + li::before {
    margin: 0 7px;
  }
}

/* ─────────────────────────────────────────────────────────────
   D2. TERCERA FOTO — overlay al 30% de alto, contenido centrado
   ───────────────────────────────────────────────────────────── */
body#product .ml-more-overlay {
  inset: auto 0 0 0;
  height: 30%;
  min-height: 44px;
  flex-direction: row;
  gap: 7px;
  background: rgba(21, 19, 16, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
}

body#product .ml-more-overlay span:first-child {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

body#product .ml-more-overlay span:last-child {
  font-size: 9px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   D3. FILA DE STOCK — disponibilidad + descuentos por volumen
   ───────────────────────────────────────────────────────────── */
body#product .ml-stock-row {
  /* Vive dentro de .product-add-to-cart, que ya es flex column con gap */
  margin: 0 0 0px;
}

body#product .ml-stock-row--split {
  display: flex;
  gap: 0px;
  flex-direction: column;
  justify-content: flex-start;
  align-content: stretch;
}

body#product .ml-stock-row__stock {
  
}

body#product .ml-stock-row--split > .ml-stock-row__stock {
  order:2;
  transform: translate(4px, 4px);
}

body#product .ml-stock-row__disc {
  order:1;
  & .volume-discount-box {
    margin-bottom: 0 !important;
  }
}

body#product .ml-stock-row--split > .ml-stock-row__disc {
}

body#product .ml-stock-row .product-discounts {
  margin: 0;
}

/* Punto de stock: verde con pulso */
body#product .ml-product-panel #product-availability::before {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
  animation: mlStockPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes mlStockPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(22, 163, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

/* Sin stock: ámbar y sin pulso, para que el verde signifique "disponible" */
body#product .ml-product-panel #product-availability.lowstock::before {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  body#product .ml-product-panel #product-availability::before {
    animation: none;
  }
}

/* Descuentos por volumen, versión compacta */
body#product .volume-discount-box {
  padding: 8px 11px;
  border: 1px solid var(--ml-sand);
  border-radius: 10px;
  background: #fff;
}

body#product .volume-discount-box .discount-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

body#product .volume-discount-box .discount-header svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ml-mist);
}

body#product .volume-discount-box .discount-header h3 {
  margin: 0 !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ml-mist);
}

body#product .volume-discount-box .discount-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body#product .volume-discount-box .discount-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--ml-warm);
  font-size: 11px;
  line-height: 1.3;
}

body#product .volume-discount-box .tier {
  color: var(--ml-mist);
  white-space: nowrap;
}

body#product .volume-discount-box .price_volume {
  font-weight: 600;
  color: var(--ml-ink);
  white-space: nowrap;
}

body#product .volume-discount-box .note {
  margin: 7px 0 0;
  font-size: 10px;
  color: var(--ml-mist);
}

/* En columna estrecha se apila */
@media (max-width: 620px) {
  body#product .ml-stock-row--split {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body#product .ml-stock-row--split > .ml-stock-row__stock,
  body#product .ml-stock-row--split > .ml-stock-row__disc {
    flex: 0 0 auto;
    max-width: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   D4. GARANTÍAS DE SERVICIO — los cuatro siempre visibles
   Sin swipe, scroll ni flechas: en escritorio caben los cuatro en
   una línea (idéntico a como estaba) y en móvil pasan a 2×2. Al
   permitir el salto de línea el desbordamiento deja de ser posible.
   ───────────────────────────────────────────────────────────── */
body#product .ml-trust-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--ml-sand);
}

body#product .ml-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

body#product .ml-trust .ml-ti {
  flex: 1 0 auto;
  min-width: 86px;
  & > svg {
    width:auto !important;
    height:30px !important;
    stroke: #666 !important;
  }
}

/* Va después del bloque de arriba a propósito: las media queries no suman
   especificidad, así que una regla móvil situada antes se quedaría por
   detrás y no llegaría a aplicarse. */
@media (max-width: 700px) {
  body#product .ml-trust {
    /* Más aire entre filas que entre columnas. */
    gap: 16px 10px;
  }

  /* Los cuatro en una sola línea. min-width:0 anula los 86px de escritorio,
     que impedirían que encogieran lo suficiente. */
  body#product .ml-trust .ml-ti {
    flex: 0 0 calc(24% - 5px);
    min-width: 0;
    gap: 4px;
    font-size: 9.5px;
    & > svg {
      height: 22px !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   D5. CARACTERÍSTICAS PRINCIPALES — una sola línea con swipe
   El padding-top reserva sitio para el tooltip: un contenedor con
   overflow-x:auto recorta también en vertical, pero lo que cae dentro
   del padding sí se ve. El margin negativo devuelve la maquetación.
   ───────────────────────────────────────────────────────────── */
body#product .ml-key-facts {
  flex-wrap: nowrap;
  align-items: center;
}

body#product .ml-key-facts #product-features-top {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 42px;
  margin-top: -42px;
  padding-bottom: 4px;
}

body#product .ml-key-facts #product-features-top::-webkit-scrollbar {
  display: none;
}

body#product #product-features-top > div {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* =====================================================================
   E. RESEÑAS (mlreviews) — versión compacta
   Override de marcado en modules/mlreviews/.../displayProductReviews.tpl.
   Se respeta el contrato de opener.js: #expandir-reviews añade .show-more
   a #review-list-container. El plegado se resuelve aquí.
   ===================================================================== */
body#product .ml-rv {
  margin: 8px 0 56px;
}

body#product .ml-rv-body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ── Resumen ── */
body#product .ml-rv-summary {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--ml-sand);
  border-radius: 12px;
  background: #fff;
}

body#product .ml-rv-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ml-warm);
}

body#product .ml-rv-score__num {
  font-family: "Quicksand", "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--ml-ink);
}

body#product .ml-rv-score__count {
  font-size: 11px;
  color: var(--ml-mist);
  letter-spacing: 0.02em;
}

body#product .ml-rv-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #f5a524;
  line-height: 1;
}

body#product .ml-rv-stars .material-icons {
  font-size: 17px;
}

body#product .ml-rv-star--off {
  color: var(--ml-sand);
}

/* Distribución */
body#product .ml-rv-dist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body#product .ml-rv-dist__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 2.5ch;
  align-items: center;
  gap: 9px;
}

body#product .ml-rv-dist__label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--ml-mist);
  font-variant-numeric: tabular-nums;
}

body#product .ml-rv-dist__label .material-icons {
  font-size: 12px;
  color: #f5a524;
}

body#product .ml-rv-dist__track {
  height: 6px;
  border-radius: 999px;
  background: var(--ml-warm);
  overflow: hidden;
}

body#product .ml-rv-dist__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #f5a524;
}

body#product .ml-rv-dist__count {
  font-size: 10.5px;
  color: var(--ml-mist);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Listado ── */
body#product .ml-rv-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body#product .ml-rv-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--ml-sand);
  border-radius: 12px;
  background: #fff;
}

body#product .ml-rv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body#product .ml-rv-card__date {
  font-size: 10.5px;
  color: var(--ml-mist);
  white-space: nowrap;
}

body#product .ml-rv-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ml-ink);
}

body#product .ml-rv-card__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2a2d31;
  overflow-wrap: anywhere;
}

body#product .ml-rv-card__reply {
  margin: 2px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--ml-warm);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ml-mist);
}

body#product .ml-rv-card__reply-tag {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ml-ink);
}

/* ── Plegado (contrato de opener.js) ──
   reviewsproduct.css del módulo colapsa con `height:0; opacity:0` todo lo
   que va a partir de la 2ª reseña; primero se neutraliza y luego se aplica
   el plegado propio: 4 visibles y el resto tras pulsar "Ver más". */
body#product .ml-rv-list ul > li:nth-of-type(2) ~ li {
  height: auto;
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
  padding: 14px 16px;
}

body#product .ml-rv-list ul > li:nth-of-type(n + 5) {
  display: none;
}

body#product .ml-rv-list.show-more ul > li:nth-of-type(n + 5) {
  display: flex;
}

body#product .ml-rv-more {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: 1px solid var(--ml-sand);
  border-radius: 10px;
  background: #fff;
  color: var(--ml-ink);
  font:
    500 10.5px/1 "Outfit",
    "Helvetica",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

/* Sólo aparece si hay reseñas ocultas */
body#product .ml-rv-list:has(ul > li:nth-of-type(5)) .ml-rv-more {
  display: inline-flex;
}

body#product .ml-rv-list.show-more .ml-rv-more {
  display: none;
}

body#product .ml-rv-more:hover {
  border-color: var(--ml-ink);
  background: var(--ml-warm);
}

body#product .ml-rv-more:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  body#product .ml-rv-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* -------------------------------------------------------------
  Estrellas Review, Top
  -------------------------------------------------------------*/

body#product .ml-stars > span {
  color: #ffc000;
  font-size: 16px !important;
}
@media (max-width: 575px) {
  body#product .ml-product-panel .ml-stars {
    transform-origin: left center;
    transform: scale(0.95);
  }
}

body#product .ml-product-panel .ml-stars {
  display: flex;
  align-items: center;
  align-content: center;
}

body#product .ml-product-panel .ml-stars > .total_reviews {
  color: #222 !important;
  font-size: 0.76rem !important;
}
/* ─────────────────────────────────────────────────────────────
   D6. VARIANTE ÚNICA
   product-variants.tpl sustituye el selector por un input oculto cuando
   el grupo tiene una sola opción. Si no queda ningún grupo visible, el
   contenedor no debe dejar hueco.
   ───────────────────────────────────────────────────────────── */
body#product
  .ml-product-panel
  .product-variants:not(:has(.product-variants-item)) {
  display: none;
}

/* Sin pills ni etiqueta EPREL no hay nada que enseñar: fuera el hueco
   (el padding-top del raíl de pills reserva sitio para el tooltip). */
body#product .ml-key-facts:not(:has(.pill)):not(:has(.ml-eprel-badge)) {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   D7. FONDOS HEREDADOS
   La sección A trae `#wrapper div { background: var(--ml-paper) }`, que
   pinta CUALQUIER <div>, y dentro de .ml-bottom hay además un
   `background: transparent !important`. Los componentes nuevos que viven
   sobre una tarjeta tienen que declarar su fondo explícitamente.
   ───────────────────────────────────────────────────────────── */
body#product .volume-discount-box .discount-header,
body#product .ml-rel__body,
body#product .ml-rel__foot,
body#product .ml-rv-score,
body#product .ml-rv-card__head,
body#product .ml-rv-dist {
  background: transparent;
}

/* .ml-rv-summary es un <div> dentro de .ml-bottom → el transparent
   !important de la sección A le gana; aquí se reafirma. */
body#product .ml-bottom .ml-rv-summary {
  background: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   D8. ACCESORIOS DEBAJO DEL CTA
   Vuelven al panel de compra, justo bajo "Añadir al carrito", con el
   slider paginado 2×2 que ya define la sección 8.
   ───────────────────────────────────────────────────────────── */
body#product .ml-related-slot > .ml-rel {
  margin: 16px 0 4px;
}

/* ─────────────────────────────────────────────────────────────
   D9. FONDOS QUE TAPABAN CONTENIDO
   `body#product #wrapper div { background: var(--ml-paper) }` (sección A)
   pinta cualquier <div>. El raíl de pills se sube 42px con margin-top
   negativo para reservar el hueco del tooltip, así que ese fondo se
   dibujaba ENCIMA del borde inferior de .ml-price-wrap y lo tapaba
   (quedaba visible sólo el tramo a la izquierda del badge EPREL).
   La fila de datos clave no necesita fondo propio: hereda el del panel.
   ───────────────────────────────────────────────────────────── */

body#product .ml-price-wrap {
  padding-bottom: 12px !important;
}
body#product .ml-key-facts,
body#product .ml-key-facts #product-features-top {
  background: transparent;
}

/* El margin-top negativo del raíl dejaba las pills arrancando justo en la
   línea del precio. Se recupera la separación. */
body#product .ml-key-facts {
  margin-top: 18px;
}

/* =====================================================================
   F. PRESENTACIÓN 360 (orbitvushn)
   No se usa la galería del módulo: sólo su visor, inyectado con
   inject_orbitvu() dentro de NUESTRO hueco de imagen principal.
   El hero alterna entre visor (.is-360) e imagen normal.
   ===================================================================== */
body#product .ml-cell.hero .ml-360-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  cursor: grab;
  display: none;
}

body#product .ml-cell.hero .ml-360-stage:active {
  cursor: grabbing;
}

body#product .ml-cell.hero.is-360 .ml-360-stage {
  display: block;
}

/* Con el visor activo, la foto de portada se oculta pero sigue en el DOM
   (la reutiliza mlSwapHero al pinchar una miniatura). */
body#product .ml-cell.hero.is-360 > img,
body#product .ml-cell.hero.is-360 .ml-cell-zoom {
  visibility: hidden;
}

body#product .ml-360-container {
  width: 100%;
  height: 100%;
}

/* El visor trae estilos propios; se contiene dentro de la celda */
body#product .ml-360-container canvas,
body#product .ml-360-container img,
body#product .ml-360-container > div {
  max-width: 100%;
}

/* Sin hover-zoom ni oscurecido cuando manda el visor */
body#product .ml-cell.hero.is-360:hover img {
  transform: none;
  filter: none;
}

body#product .ml-cell.hero.is-360:hover::after {
  background: transparent;
}

/* ── Miniatura 360, primera de la tira ── */
body#product .ml-thumbs .ml-tt--360 {
  position: relative;
}

body#product .ml-thumbs .ml-tt--360 .ml-tt-360 {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2px 0 3px;
  background: rgba(16, 18, 21, 0.72);
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  pointer-events: none;
}

/* =====================================================================
   G. MINIATURAS EN VERTICAL, A LA DERECHA DEL MOSAICO
   El ancho total no cambia: la tira de dos celdas cede el ancho de la
   columna de miniaturas, así que el hero sigue siendo cuadrado y con la
   misma altura, y las dos celdas de la derecha quedan algo más estrechas.
   ===================================================================== */
body#product .images-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

body#product .images-container > .ml-mosaic {
  grid-column: 1;
  grid-row: 1;
}

body#product .images-container > .js-qv-mask {
  grid-column: 2;
  grid-row: 1;
  /* Se estira a la altura del mosaico; si sobran miniaturas, hacen scroll */
  align-self: stretch;
  min-height: 0;
  margin-top: 0;
}

body#product .images-container > .ml-accent {
  grid-column: 1 / -1;
  grid-row: 2;
}

body#product .images-container .ml-thumbs {
  flex-direction: column;
  height: 100%;
  margin-top: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body#product .images-container .ml-thumbs .ml-tt {
  width: 64px;
  height: 64px;
}

/* En móvil vuelven abajo y en horizontal */
@media (max-width: 767px) {
  body#product .images-container {
    display: block;
  }

  body#product .images-container .ml-thumbs {
    flex-direction: row;
    height: auto;
    margin-top: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body#product .images-container .ml-thumbs .ml-tt {
    width: 60px;
    height: 60px;
  }
}

/* =====================================================================
   H. OFERTA: precio anterior, porcentaje y etiqueta sobre la imagen
   ===================================================================== */
body#product .ml-oldprice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

body#product .ml-oldprice {
  font-size: 15px;
  color: var(--ml-mist);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

body#product .ml-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ml-danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}

/* Etiqueta sobre la imagen principal, justo bajo la miga de pan */
body#product .ml-cell.hero .ml-sale-flag {
  position: absolute;
  top: 52px;
  left: 14px;
  z-index: 4;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ml-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 767px) {
  body#product .ml-cell.hero .ml-sale-flag {
    top: 44px;
    left: 10px;
    font-size: 9px;
    padding: 4px 10px;
  }
}

/* =====================================================================
   I. ENVÍO GRATIS CON ASTERISCO + MODAL DE CONDICIONES
   La etiqueta sólo se imprime cuando el cliente alcanza el umbral de su
   grupo (ver _partials/product-prices.tpl).
   ===================================================================== */
body#product .ml-freeship {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

body#product .ml-freeship:hover {
  color: var(--ml-ink);
}

body#product .ml-freeship:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}

body#product .ml-freeship__ast {
  margin-left: 1px;
  font-weight: 700;
  font-size: 0.85rem !important;
}
@media (max-width: 767px) {
  body#product .current-price span:nth-of-type(1).ml-freeship__ast {
    font-size: 0.85rem !important;
  }
}

/* Modal nativo <dialog> */
body#product .ml-modal {
  /* Ancho al contenido, con tope para que el texto envuelva en vez de
     desbordar. white-space: normal resetea el `nowrap` que hereda del tema
     y que era lo que forzaba el scroll horizontal dentro de la caja. */
  width: fit-content;
  max-width: min(92vw, 460px);
  padding: 0;
  border: 0;
  /*border-radius: 14px;*/
  border-radius: 6px;
  background: transparent;
  color: var(--ml-ink);
  white-space: normal;
  overflow: visible;
}

body#product .ml-modal::backdrop {
  background: rgba(16, 18, 21, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

body#product .ml-modal__box {
  white-space: normal;
  padding: 22px 24px 18px;
  /*border-radius: 14px;*/
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 18, 21, 0.3);
}

body#product .ml-modal__title {
  margin: 0 0 8px !important;
  font-family: "Quicksand", "Outfit", sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ml-ink);
}

body#product .ml-modal__text {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #2a2d31;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

body#product .ml-modal__close {
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 9px;
  background: var(--ml-ink);
  color: #fff;
  font:
    500 11px/1 "Outfit",
    "Helvetica",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease;
}

body#product .ml-modal__close:hover {
  background: #1d2a55;
}

body#product .ml-modal__close:focus-visible {
  outline: 2px solid var(--ml-amber);
  outline-offset: 2px;
}
body#product .medidas {
  margin-top: 34px !important;
}
body#product .desc_wrapper {
  margin-top: 32px !important;
}
/* ============================================================
   MOBILE — acordeón de detalles de producto
   ============================================================ */
@media (max-width: 767px) {
  .ml-details-grid {
    gap: 0 !important;
  }
  .ml-downloads.ml-mobile-fold {
    margin-bottom: 0 !important;
  }
  body#product .desc_wrapper {
    margin-top: 12px !important;
  }
  body#product .medidas {
    margin-top: 12px !important;
  }
  body#product .ml-mobile-fold > .ml-fold-head {
    position: relative;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 14px !important;
  }
  body#product .ml-mobile-fold {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: white !important;
    padding: 8px 14px 14px 14px !important;
  }
  /* Línea existente: texto ───────── chevron */
  body#product .ml-mobile-fold > .ml-fold-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: transparent;

    /* Después del texto, antes del chevron */
    order: 1;
  }

  /* Chevron */
  body#product .ml-mobile-fold > .ml-fold-head::before {
    content: "";
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    background: transparent;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.25s ease;

    /* Después de la línea */
    order: 2;
  }

  /* Abierto: ↓ pasa a ↑ */
  body#product .ml-mobile-fold.is-open > .ml-fold-head::before {
    transform: rotate(225deg);
  }

  /* Contenido plegado */
  body#product .ml-mobile-fold:not(.is-open) > :not(.ml-fold-head) {
    display: none !important;
  }

  body#product .ml-mobile-fold:not(.is-open) > .ml-fold-head {
    margin-bottom: 0 !important;
  }

  body#product .ml-mobile-fold.is-open > .ml-fold-head {
    margin-bottom: 14px !important;
  }
  body#product .mlreviews-product {
    padding: 0.5rem 0 !important;
  }
  body#product .ml-details-grid {
    margin-bottom: 36px !important;
  }
}
body#product .ml-product-panel .control-label, body#product .ml-product-panel .color-selector-label, body#product .ml-product-panel .ml-vlabel {
  display: block !important;
}
.ml-stock-row__stock {
  background-color: transparent !important;
}

/*---------------------------------------------------------------------------------------
  Box de customer reassurance
----------------------------------------------------------------------------------------*/

body#product .product-additional-info .warranties_box {
  display:flex;
  background: var(--ml-warm, #ccc);
  border-radius: 8px;
  padding:10px 6px;
  justify-content: space-between;
  & > div {
    display:flex;
    gap: 10px;
    align-items: stretch;
    background-color: transparent;
    flex: 0 0 33%;
  }
  & > div > svg {
    flex: 0 0 30%;
    max-width: 42px;
    fill:#666; stroke:#666;
  }
  & > div > div {
    flex: 0 0 70%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: transparent;
    gap:6px;
  }
  & > div > div > span.whead {
    font-size: clamp(0.65rem, 0.55rem + 0.208vw, 0.8rem);
    font-weight: 500;
    display: block;
  }
  & > div > div > span.wcopy {
    font-size:clamp(0.55rem, 0.483rem + 0.139vw, 0.65rem);
  }
}
@media (min-width:1001px) and (max-width:1400px) {
  body#product .product-additional-info .warranties_box {
    & > div {
      flex: 0 0 50%;
    }
    & div.reviews_warranty {
      display: none;
      pointer-events: none;
      visibility: hidden;
    }
  }

}

@media (min-width:600px) and (max-width:1000px) {

  body#product .product-additional-info .warranties_box {
    & > div {
      flex: 0 0 30%;
    }
    & div.reviews_warranty {
      display: flex;
      pointer-events: all;
      visibility: visible;
    }
  }
}
@media (max-width:599px) {

  body#product .product-additional-info .warranties_box {
    /* Con dos elementos al 50% exacto no queda holgura entre ellos: el
       hueco sale de descontar la separación al ancho de cada columna. */
    gap: 12px;
    & > div {
      flex: 0 0 calc(50% - 6px);
      gap: 8px;
    }
    & > div > svg {
      flex: 0 0 auto;
      max-width: 30px;
    }
    & > div > div {
      flex: 1 1 auto;
    }
    & div.reviews_warranty {
      display: none;
      pointer-events: none;
      visibility: hidden;
    }
  }
}

/*
 OTHER TEXT MEDIA QUERIES 
*/
@media(min-width:768px) and (max-width:1400px) {
  body#product .ml-product-panel {
    --ml-panel-lead: 142px !important
  }
  body#product .ml-product-panel h1.product-name, body#product .ml-product-panel .h1.product-name {
    font-size:20px;
  }
  body#product .ml-shead, .clasificacion-wrap h3 {
    font-size:14px !important;
  }
  body#product .ml-product-panel .product-variants {
    margin: 0 0 12px !important;
  }
}