/* ===== ONE MEGA IMAGENES – FIX FLECHAS Y PRECIO ===== */

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

/* 2) Tarjeta a columna - sin altura fija para minimizar espacio en blanco */
#one-mega-imagenes-otherpages{ position: relative; }
.one-mega-imagenes{ position: relative; }
.one-mega-imagenes .pt-product{
  display: flex !important;
  flex-direction: column !important;
  /* height: 100% removido para evitar espacio en blanco innecesario */
  text-decoration: none;
  color: inherit;
}

/* Imagen pegada a la descripción */
.one-mega-imagenes .pt-img-blox{
  background:#fff;                 /* mismo color que el bloque de texto */
  border-radius:0;                 /* sin bordes redondeados */
  overflow:hidden;
  aspect-ratio:3/4;
  margin-bottom: 0 !important;           /* sin espacio entre imagen y desc. */
}
.one-mega-imagenes .pt-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Para cuadrantes: eliminar todos los heights - solo usar aspect-ratio */
.one-cuadrante-imagenes .pt-img-blox{
  /* aspect-ratio:3/4 ya está en línea 24, suficiente para mantener proporción */
}
.one-cuadrante-imagenes .pt-img img{
  width: 100%;
  height: auto;                    /* altura automática, sin forzar */
  object-fit: cover;
  display: block;
}

/* 3) Descripción flexible: el precio queda abajo SIEMPRE */
.one-mega-imagenes .pt-description{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
}
.one-mega-imagenes .pt-description .pt-title{
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: #333;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
/* Ajustes de tamaño del título según cantidad de imágenes del cuadrante */
.one-mega-imagenes .row.one-img-cols-2 .pt-description .pt-title{ font-size: 18px; }
.one-mega-imagenes .row.one-img-cols-1 .pt-description .pt-title{ font-size: 20px; font-weight: 600; }
.one-mega-imagenes .pt-description .pt-price{
  margin-top: auto !important;           /* empuja el precio al fondo */
  font-weight: 700;
  color: var(--theme-accent, #35b297);   /* usa color del template, fallback */
  font-size: 16px;
}

/* Subtexto debajo de la imagen (opcional, galería) */
.one-mega-imagenes .pt-description .pt-subtext{
  font-size: 12px;
  color: #6b6b6b;
}

/* Separación entre código y nombre */
.one-mega-imagenes .pt-description .pt-code{
  color:#666;
  font-size: 12px;
  line-height: 1.2;
  margin: 0 0 6px;               /* deja una línea libre antes del nombre */
}

/* 4) Misma altura entre slides: que Slick estire todas */
.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;               /* wrapper interno de Slick */
}

/* 5) Separación entre slides: gutter simétrico para 3 columnas al 100% */
.one-mega-imagenes .one-mega-imagenes-slider .slick-list{
  overflow: hidden;
  margin: 0 -10px;              /* gutter total = 20px (10px por lado) */
}
.one-mega-imagenes .one-mega-imagenes-slider .slick-slide{
  padding: 0 10px;              /* respeta ancho calculado por Slick */
  box-sizing: border-box;
}

/* 6) Flechas de Slick (únicas) arriba a la derecha con ‹ › */
.one-mega-imagenes .slick-prev,
.one-mega-imagenes .slick-next{
  position: absolute;
  top: -62px;               /* subido 18px más desde -44px */
  right: 12px;              /* alineado al borde derecho del contenedor */
  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; } /* separación entre flechas */
.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; }

/* Refuerzos */
.one-mega-imagenes .pt-product{ display:flex; flex-direction:column; }
.one-mega-imagenes .pt-img-blox{ margin-bottom:0; }
.one-mega-imagenes .pt-description{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; background:#fff; }

/* ===== ESTILOS EXCLUSIVOS PARA CUADRANTES DE IMÁGENES ===== */
/* Clase específica: .one-cuadrante-imagenes para NO afectar carruseles */

/* FORZAR que NO haya estiramiento - TODOS los elementos con altura auto */
.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 .pt-product{
  height: auto !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
}
.one-cuadrante-imagenes .pt-img-blox{
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: unset !important;  /* Quitar aspect-ratio que fuerza altura */
}
.one-cuadrante-imagenes .pt-description{
  height: auto !important;
  min-height: unset !important;
}

/* Solo padding: 12px top/bottom, laterales según columnas */
.one-cuadrante-imagenes .row.one-img-cols-3 .pt-description{ 
  padding: 12px !important; 
}
.one-cuadrante-imagenes .row.one-img-cols-2 .pt-description{ 
  padding: 12px 14px !important; 
}
.one-cuadrante-imagenes .row.one-img-cols-1 .pt-description{ 
  padding: 12px 16px !important; 
}

/* ===== ESTILOS PARA CUADRANTES DE PRODUCTOS ===== */
/* Comportamiento igual que carrusel: misma altura y mismo espacio */
.one-cuadrante-productos .row{
  display: flex !important;
  align-items: stretch !important;  /* Igual que slick-track - estira todas las columnas */
}
.one-cuadrante-productos .row > div{
  display: flex !important;
  height: auto !important;
  min-height: unset !important;
}
.one-cuadrante-productos .pt-product{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;  /* Llenar altura de la columna (igual que carrusel) */
  width: 100%;
}
.one-cuadrante-productos .pt-img-blox{
  /* Mismo aspect-ratio que carrusel */
  aspect-ratio: 3/4 !important;
  height: auto !important;
  min-height: unset !important;
  flex-shrink: 0;  /* No comprimir la imagen */
}
.one-cuadrante-productos .pt-img img{
  width: 100%;
  height: 100% !important;  /* Llenar contenedor (igual que carrusel) */
  object-fit: cover;
  display: block;
}
.one-cuadrante-productos .pt-description{
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1;  /* Ocupar espacio restante */
  height: auto !important;
  min-height: unset !important;
}
/* Padding para productos: 12px top/bottom, laterales según columnas */
.one-cuadrante-productos .row.one-prod-cols-3 .pt-description{ 
  padding: 12px !important; 
}
.one-cuadrante-productos .row.one-prod-cols-2 .pt-description{ 
  padding: 12px 14px !important; 
}
.one-cuadrante-productos .row.one-prod-cols-1 .pt-description{ 
  padding: 12px 16px !important; 
}

.one-mega-imagenes .pt-description .pt-price{ margin-top:auto; }

/* ===== 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;
}
.one-cuadrante-categorias h6{
  margin: 0 0 15px 0;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  min-width: 0;
  line-height: 1.8;
}
.one-cuadrante-categorias h6 a{
  text-decoration: none;
  color: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  min-width: 0;
  line-height: 1.8;
}
.one-cuadrante-categorias h6 a span{
  display: block;
  line-height: 1.8;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Estilos-li aplicados al h6 (título de columna) */
.one-cuadrante-categorias h6.one-estilo-li-0 {
  padding: 6px 0 !important;
}
.one-cuadrante-categorias h6.one-estilo-li-1 { 
  position: relative !important; 
  padding: 6px 0 !important; 
}
.one-cuadrante-categorias h6.one-estilo-li-1::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 0.5px !important;
  background: currentColor !important;
  transform: scaleY(0.3) !important;
  opacity: .8 !important;
}
.one-cuadrante-categorias h6.one-estilo-li-2 {
  border-bottom: 3px solid currentColor !important;
  padding-bottom: 5px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-4 {
  border-top: 2px solid currentColor !important;
  padding-top: 9px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-5 {
  border-bottom: 1px dotted currentColor !important;
  padding-bottom: 5px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-7 {
  border-left: 1px solid currentColor !important;
  border-bottom: 0.1px solid currentColor !important;
  padding: 8px 14px 10px 22px !important;
  margin-left: 2px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-7 > a span:not(.icono-nivel) {
  margin-left: 16px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-11 {
  border-bottom: 0.1px solid currentColor !important;
  padding: 8px 14px 10px 22px !important;
  margin-left: 2px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-11 > a {
  position: relative !important;
}
.one-cuadrante-categorias h6.one-estilo-li-11 > a span:not(.icono-nivel) {
  margin-left: 16px !important;
}
.one-cuadrante-categorias h6.one-estilo-li-11 > a::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: currentColor !important;
  border-radius: 50% !important;
}
.one-cuadrante-categorias h6.one-estilo-li-11:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
}

/* Estilos-li aplicados al h6 del carrusel (one-mega-imagenes-header) */
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-0 {
  padding: 6px 0 !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-1 { 
  position: relative !important; 
  padding: 6px 0 !important; 
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-1::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 0.5px !important;
  background: currentColor !important;
  transform: scaleY(0.3) !important;
  opacity: .8 !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-2 {
  border-bottom: 3px solid currentColor !important;
  padding-bottom: 5px !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-4 {
  border-top: 2px solid currentColor !important;
  padding-top: 9px !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-5 {
  border-bottom: 1px dotted currentColor !important;
  padding-bottom: 5px !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-7 {
  border-left: 1px solid currentColor !important;
  border-bottom: 0.1px solid currentColor !important;
  padding: 8px 14px 10px 22px !important;
  margin-left: 2px !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-7 > a span:not(.icono-nivel) {
  margin-left: 16px !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-11 {
  border-bottom: 0.1px solid currentColor !important;
  padding: 8px 14px 10px 22px !important;
  padding-bottom: 10px !important; /* Mismo espacio entre texto y línea que categorías */
  margin-left: 2px !important;
  margin-bottom: 20px !important; /* Mantener margin-bottom para separar del contenido siguiente */
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-11 > a {
  position: relative !important;
  line-height: 1.6 !important; /* Igual que categorías principales para respetar separación de línea de base */
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-11 > a span:not(.icono-nivel) {
  margin-left: 20px !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-11 > a::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: currentColor !important;
  border-radius: 50% !important;
}
.one-mega-imagenes .one-mega-imagenes-header h6.one-estilo-li-11:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
}

/* Margin-bottom para títulos del carrusel */
.one-mega-imagenes .one-mega-imagenes-header h6 {
  margin-bottom: 20px !important;
}

.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: #666;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
}
.one-cuadrante-categorias .pt-megamenu-submenu li a:hover{
  color: #333;
}

/* ===== ESTILOS PARA NIVELES ANIDADOS ===== */
.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;
}

/* ===== ICONO DE NIVEL (PREFIJO) ===== */
.one-cuadrante-categorias .icono-nivel{
  display: inline-block;
  color: inherit;
  /* Sin margin ni padding - el espacio se aplica al texto con span:not(.icono-nivel) */
}

/* Separar texto del prefijo para estilos que lo requieren (igual que tipo_menu = 3) */
/* Para subcategorías dentro de <li> */
.one-cuadrante-categorias .pt-megamenu-submenu li.one-estilo-li-7 > a span:not(.icono-nivel) {
  margin-left: 16px !important; /* margin-left solo al texto, no al prefijo */
}
.one-cuadrante-categorias .pt-megamenu-submenu li.one-estilo-li-11 > a span:not(.icono-nivel) {
  margin-left: 16px !important; /* margin-left solo al texto, no al prefijo */
}
/* Para títulos <h6> cuando tienen estilo-li */
.one-cuadrante-categorias h6.one-estilo-li-7 > a span:not(.icono-nivel) {
  margin-left: 16px !important; /* margin-left solo al texto, no al prefijo */
}
.one-cuadrante-categorias h6.one-estilo-li-11 > a span:not(.icono-nivel) {
  margin-left: 16px !important; /* margin-left solo al texto, no al prefijo */
}

/* ===== IMÁGENES DE CATEGORÍAS (aplicar_img_mini) ===== */
/* Estilos para imágenes de categorías en títulos h6 (igual que tipo_menu = 3) */
.one-cuadrante-categorias h6 a {
  position: relative !important;
  overflow: visible !important;
}

.one-cuadrante-categorias h6 a > img {
  position: absolute !important;
  top: -10px !important;
  left: 0 !important;
  width: 200px !important;
  height: auto !important;
  display: block !important;
  z-index: 999999 !important;        /* z-index extremo para estar por encima */
  pointer-events: none !important;
  
  /* FADE IN EFFECT CON DESPLAZAMIENTO DIAGONAL */
  opacity: 0 !important;
  transform: translate(-15px, -15px) !important;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

/* Imagen aparece al hacer hover */
.one-cuadrante-categorias h6:hover a > img {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Las subcategorías ya tienen el CSS de tipo_menu = 3 que se aplica automáticamente */

/* ===== BADGES PROMOCIONALES ===== */
.one-cuadrante-categorias .one-badge-promo,
.one-cuadrante-categorias .one-badge-subcategoria{
  display: inline-block !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
}