/* ===== ONE MEGA IMAGENES – CLASES NUEVAS DESDE CERO ===== */

/* 1) Ocultar flechas del header (evita duplicados) */
.one-mega-imagenes .one-mega-imagenes-header .one-mega-imagenes-arrows{
  display: none !important;
}

/* Estilos para spans del header - solo estructura, sin font-size/font-weight/color hardcodeados */
.one-mega-imagenes .one-mega-imagenes-header span[data-elemento="14"],
.one-mega-imagenes .one-mega-imagenes-header span[data-elemento="15"] {
  display: block;
  margin-bottom: 20px;
  /* font-size, font-weight, color vienen desde la BD via estilo inline */
}

/* 2) Contenedor principal */
#one-mega-imagenes-otherpages{ position: relative; }
.one-mega-imagenes{ position: relative; }

/* 3) PRODUCTO - Contenedor principal */
/* NOTA: NO usar color: inherit para que los estilos inline de los hijos funcionen */
.one-mega-product{
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  text-decoration: none;
  /* color: inherit; ELIMINADO - interfiere con estilos inline de hijos */
  width: 100%;
}
/* Enlaces dentro del producto */
.one-mega-product,
.one-mega-product:link,
.one-mega-product:visited{
  /* color: inherit; ELIMINADO - interfiere con estilos inline de hijos */
  text-decoration: none;
}
.one-mega-product:hover{
  /* color: inherit; ELIMINADO - interfiere con estilos inline de hijos */
  text-decoration: none;
}

/* 4) CAJA DE IMAGEN */
.one-mega-img-box{
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.one-mega-img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Para cuadrantes de imágenes: sin aspect-ratio forzado */
.one-cuadrante-imagenes .one-mega-img-box{
  aspect-ratio: unset !important;
  height: auto !important;
}
.one-cuadrante-imagenes .one-mega-img-box img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 5) DESCRIPCIÓN - Contenedor de texto */
.one-mega-description{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;  /* SIN ESPACIO entre elementos */
  padding: 12px 12px 0 12px !important;  /* padding-bottom: 0 - SIN ESPACIO DESPUÉS */
  background: #fff;
  flex-grow: 0;
  height: auto !important;
}

/* 6) CÓDIGO */
/* NOTA: font-size, color, line-height vienen desde la BD via estilo inline */
.one-mega-code{
  /* font-size, color, line-height: desde BD via inline */
  margin: 0 !important;  /* SIN MARGIN */
  padding: 0 !important;
  display: block;
}

/* 7) TÍTULO - SOBRESCRIBIR ESTILOS GLOBALES DE h2 */
/* NOTA: font-size, color, font-weight, line-height vienen desde la BD via estilo inline */
h2.one-mega-title,
.one-mega-title{
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;  /* Sobrescribir padding-bottom de h2 global */
  padding-top: 0 !important;
  padding-bottom: 0 !important;  /* Forzar padding-bottom a 0 */
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* font-size, color, font-weight, line-height: desde BD via inline */
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  height: auto !important;
  min-height: unset !important;
}
/* Enlaces dentro del título */
.one-mega-title a{
  /* color viene desde la BD via estilo inline */
  text-decoration: none;
  display: block;
}
.one-mega-title a:hover{
  text-decoration: underline;
  /* color viene desde la BD via estilo inline */
}
/* Tamaños según columnas - ELIMINADOS: vienen desde BD */

/* 8) PRECIO - SIN ESPACIO DESPUÉS */
/* NOTA: font-size, color, font-weight, line-height vienen desde la BD via estilo inline */
.one-mega-price{
  margin: 0 !important;  /* SIN MARGIN - sin espacio antes ni después */
  padding: 0 !important;
  padding-top: 0 !important;  /* Forzar padding-top a 0 */
  padding-bottom: 0 !important;  /* Forzar padding-bottom a 0 */
  /* font-size, color, font-weight, line-height: desde BD via inline */
  display: block;
}
/* Precio con clases de nuevo/precio viejo si existen */
/* NOTA: color y font-weight vienen desde la BD via estilo inline */
.one-mega-price .new-price{
  /* color viene desde la BD via estilo inline */
}
.one-mega-price .old-price{
  /* color y font-weight vienen desde la BD via estilo inline */
  text-decoration: line-through;
}

/* 9) SUBTEXTO - SIN ESPACIO DESPUÉS */
/* NOTA: font-size, color, line-height vienen desde la BD via estilo inline */
.one-mega-subtext{
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;  /* Forzar padding-top a 0 */
  padding-bottom: 0 !important;  /* Forzar padding-bottom a 0 */
  /* font-size, color, line-height: desde BD via inline */
  display: block;
}

/* 10) ELIMINAR ESPACIO DEL ÚLTIMO ELEMENTO */
.one-mega-description > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 11) ASEGURAR QUE LOS ESTILOS INLINE DE LA BD SE APLIQUEN */
/* NO aplicar ningún estilo que pueda interferir con los estilos inline */
.one-mega-description > span,
.one-mega-description > div {
  /* Solo estructura, NO estilos visuales - vienen desde BD via inline */
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* 11) ROWS - Altura natural */
.one-mega-imagenes .row{
  align-items: flex-start !important;
}
.one-mega-imagenes .row > div{
  height: auto !important;
  min-height: unset !important;
}

/* ===== ESTILOS PARA CUADRANTES DE IMÁGENES ===== */
.one-cuadrante-imagenes .row{
  align-items: flex-start !important;
}
.one-cuadrante-imagenes .row > div{
  height: auto !important;
  min-height: unset !important;
  align-self: flex-start !important;
}
.one-cuadrante-imagenes .one-mega-product{
  height: auto !important;
  min-height: unset !important;
}
/* Padding según columnas */
.one-cuadrante-imagenes .row.one-img-cols-3 .one-mega-description{ 
  padding: 12px 12px 0 12px !important;
}
.one-cuadrante-imagenes .row.one-img-cols-2 .one-mega-description{ 
  padding: 12px 14px 0 14px !important;
}
.one-cuadrante-imagenes .row.one-img-cols-1 .one-mega-description{ 
  padding: 12px 16px 0 16px !important;
}

/* ===== ESTILOS PARA CUADRANTES DE PRODUCTOS ===== */
.one-cuadrante-productos .row{
  display: flex !important;
  align-items: flex-start !important;
}
.one-cuadrante-productos .row > div{
  display: flex !important;
  height: auto !important;
  min-height: unset !important;
}
.one-cuadrante-productos .one-mega-product{
  height: auto !important;
}
.one-cuadrante-productos .one-mega-img-box{
  aspect-ratio: 3/4 !important;
  height: auto !important;
  flex-shrink: 0;
}
.one-cuadrante-productos .one-mega-img-box img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.one-cuadrante-productos .one-mega-description{
  flex-grow: 0;
  height: auto !important;
}
/* Padding según columnas */
.one-cuadrante-productos .row.one-prod-cols-3 .one-mega-description{ 
  padding: 12px 12px 0 12px !important;
}
.one-cuadrante-productos .row.one-prod-cols-2 .one-mega-description{ 
  padding: 12px 14px 0 14px !important;
}
.one-cuadrante-productos .row.one-prod-cols-1 .one-mega-description{ 
  padding: 12px 16px 0 16px !important;
}

/* ===== CARRUSELES (SLIDERS) ===== */
.one-mega-imagenes .slick-track{
  display: flex !important;
  align-items: stretch !important;
}
.one-mega-imagenes .slick-slide{
  height: auto !important;
}
.one-mega-imagenes .slick-slide > div{
  height: 100% !important;
}
.one-mega-imagenes .one-mega-imagenes-slider .slick-list{
  overflow: hidden;
  margin: 0 -10px;
}
.one-mega-imagenes .one-mega-imagenes-slider .slick-slide{
  padding: 0 10px;
  box-sizing: border-box;
}

/* Flechas de Slick */
.one-mega-imagenes .slick-prev,
.one-mega-imagenes .slick-next{
  position: absolute;
  top: -62px;
  right: 12px;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: #f1f3f5; color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; z-index: 2;
}
.one-mega-imagenes .slick-prev{ right: 52px; }
.one-mega-imagenes .slick-prev:hover,
.one-mega-imagenes .slick-next:hover{ background:#e0e0e0; }
.one-mega-imagenes .slick-prev:active,
.one-mega-imagenes .slick-next:active{ transform: scale(.9); }
.one-mega-imagenes .slick-prev::before{ content:'\2039'; font-size:20px; line-height:1; opacity:1; }
.one-mega-imagenes .slick-next::before{ content:'\203A'; font-size:20px; line-height:1; opacity:1; }

/* ===== ESTILOS PARA CUADRANTES DE CATEGORÍAS ===== */
.one-cuadrante-categorias > .row > div{
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  min-width: 0;
}
/* Cambiar h6 por div para evitar problemas con estilos globales */
.one-cuadrante-categorias > .row > div > div{
  margin: 0 0 15px 0;
  /* font-size, font-weight, color vienen desde la BD via estilo inline */
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  min-width: 0;
}
.one-cuadrante-categorias > .row > div > div a{
  text-decoration: none;
  /* font-size, font-weight, color vienen desde la BD via estilo inline - NO hardcodear aquí */
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  min-width: 0;
  position: relative;
  overflow: visible;
}
/* Los estilos inline tienen máxima especificidad y deberían funcionar */
.one-cuadrante-categorias > .row > div > div a span{
  display: block;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* font-size, font-weight, color vienen desde BD via estilo inline con !important */
}
/* Elemento 5: igual que elemento 3 - el span tiene los estilos */
.one-cuadrante-categorias > .row > div > div a span[data-elemento="5"] {
  /* font-size, font-weight, color vienen desde BD via estilo inline con !important */
}
.one-mega-imagenes span[data-elemento="3"],
.one-mega-imagenes span[data-elemento="11"],
.one-mega-imagenes span[data-elemento="13"],
.one-mega-imagenes span[data-elemento="22"],
.one-mega-imagenes span[data-elemento="25"],
.one-mega-imagenes span[data-elemento="14"],
.one-mega-imagenes span[data-elemento="15"] {
  /* NO aplicar font-size, font-weight, color aquí - vienen desde BD via inline */
}

/* Estilos-li ELIMINADOS - solo usar estilos inline desde BD */

/* Estilos-li ELIMINADOS - solo usar estilos inline desde BD */

.one-cuadrante-categorias .pt-megamenu-submenu{
  list-style: none;
  padding: 0;
  margin: 0;
}
.one-cuadrante-categorias .pt-megamenu-submenu li{
  margin-bottom: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.one-cuadrante-categorias .pt-megamenu-submenu li a{
  text-decoration: none;
  /* color, font-size, line-height vienen desde la BD via estilo inline */
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
}
.one-cuadrante-categorias .pt-megamenu-submenu li a:hover{
  /* color viene desde la BD via estilo inline (hover) */
}

.one-cuadrante-categorias .pt-megamenu-submenu ul{
  list-style: none;
  padding: 0;
  margin: 5px 0 5px 15px;
}
.one-cuadrante-categorias .pt-megamenu-submenu ul li{
  margin-bottom: 6px;
}

.one-cuadrante-categorias .icono-nivel{
  display: inline-block;
  /* color viene desde la BD via estilo inline */
}

/* Estilos para imagen hover - aplicar al div */
.one-cuadrante-categorias > .row > div > div a {
  position: relative !important;
  overflow: visible !important;
}

.one-cuadrante-categorias > .row > div > div a > img {
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  width: 200px !important;
  height: auto !important;
  display: block !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translate(-15px, -15px) !important;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

.one-cuadrante-categorias > .row > div > div:hover a > img {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

.one-cuadrante-categorias .one-badge-promo,
.one-cuadrante-categorias .one-badge-subcategoria{
  display: inline-block !important;
  padding: 4px 8px !important;
  /* font-size y font-weight vienen desde la BD via estilo inline */
  text-transform: uppercase !important;
  border-radius: 3px !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
}