/* ================================
   Ajustes generales del Home Slider
   ================================ */

/* Ajustar todas las imágenes del slider al ancho del contenedor */
.an_homeslider img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;   /* mantiene proporción y rellena el espacio */
  display: block;
  margin: 0 auto;
}

/* Evitar scroll horizontal dentro del slider */
.an_homeslider {
  overflow: hidden;
  max-width: 100%;
}

/* Evitar scroll horizontal en toda la web */
body {
  overflow-x: hidden;
}

/* ================================
   Ajustes por dispositivo
   ================================ */

/* Escritorio (pantallas grandes) */
@media (min-width: 992px) {
  .an_homeslider img {
    height: 600px;       /* altura fija recomendada para desktop */
    object-position: center; /* centra la parte importante */
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .an_homeslider img {
    height: 400px;
    object-position: center;
  }
}

/* Móviles */
@media (max-width: 767px) {
  .an_homeslider img {
    height: 200px;
    object-position: left;
  }
}

@media (max-width: 767px) {
  .logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
  }
}

/* ===== Ajusta SOLO el comportamiento cuando el header está sticky ===== */

/* Alturas que puedes tocar si lo ves muy alto o bajo */
:root{
  --sticky-header-h: 68px;  /* altura total del header fijo */
  --sticky-logo-h:   44px;  /* altura máxima del logo en sticky */
}

/* Compacidad del logo cuando el header se fija */
#header.fixed .logo img,
#header.fixed .logo svg,
.header-sticky #header .logo img,
.header-sticky #header .logo svg,
.sticky #header .logo img,
.sticky #header .logo svg{
  max-height: var(--sticky-logo-h) !important;
  height: auto; width: auto;
}

/* Mantener el menú visible y NO pegado al logo en sticky.
   Incluyo varios selectores típicos de temas (header-nav / main-menu / header-bottom / menu) */
#header.fixed .header-nav,
#header.fixed .main-menu,
#header.fixed .header-bottom,
#header.fixed .menu,
.header-sticky #header .header-nav,
.header-sticky #header .main-menu,
.header-sticky #header .header-bottom,
.header-sticky #header .menu,
.sticky #header .header-nav,
.sticky #header .main-menu,
.sticky #header .header-bottom,
.sticky #header .menu{
  position: fixed !important;
  left: 0; right: 0;
  top: var(--sticky-logo-h) !important; /* coloca el menú justo debajo del logo */
  z-index: 999 !important;
  background: #fff;
  display: flex; align-items: center; justify-content: center; height: 44px;
}

/* El contenedor del header sticky: altura estable y por encima del contenido */
#header.fixed,
.header-sticky #header,
.sticky #header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; background: #fff;
  height: var(--sticky-header-h) !important;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Empujar el contenido para que NO quede debajo del sticky */
#header.fixed + #wrapper,
.header-sticky #header + #wrapper,
.sticky #header + #wrapper,
#header.fixed + main,
.header-sticky #header + main,
.sticky #header + main{
  margin-top: var(--sticky-header-h) !important;
}

/* Por si hiciera falta, el logo un “poco” por encima del menú */
#header .logo{ position: relative; z-index: 1001; }

.top-menu .sub-menu,
#top-menu .sub-menu,
.menu-container ul li ul {
    background-color: #FFFFFF !important;
}

/* Submenú blanco y sin sombra */
#header #top-menu .sub-menu,
#header .top-menu .sub-menu,
#header .top-menu .dropdown-menu {
  background:#FFFFFF !important;
  box-shadow:none !important;
  border:none !important;
}

/* Texto del submenú (verde oliva) */
#header #top-menu .sub-menu a,
#header .top-menu .sub-menu a,
#header .top-menu .dropdown-menu a {
  color:#496B3E !important;
}

/* Hover suave (beige clarito) */
#header #top-menu .sub-menu a:hover,
#header .top-menu .sub-menu a:hover,
#header .top-menu .dropdown-menu a:hover {
  background:#F5F2EA !important;
  color:#3F5E38 !important;
}

/* MÓVIL + TABLET (hasta 991px): 1 columna y fotos a borde-borde */
@media (max-width: 991px) {
  #js-product-list .product-miniature {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
  }

  #js-product-list .thumbnail-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  #js-product-list .product-miniature img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 0 !important;
  }

  #js-product-list .product-description {
    text-align: center;
    padding: 10px 15px;
  }
}

/* DESDE 992px (desktop): 2 columnas */
@media (min-width: 992px) {
  #js-product-list .product-miniature {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* OPCIONAL: 3 columnas en ≥1200px */
@media (min-width: 1200px) {
  #js-product-list .product-miniature {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}
/* Quitar padding del contenedor en páginas de categoría para que la foto sea borde a borde */
@media (max-width: 991px) {
  body.category #wrapper .container,
  body.category #content-wrapper .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Quitar padding de columnas Bootstrap en las tarjetas */
  #js-product-list .product-miniature[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* CATEGORY: quitar márgenes/paddings laterales en móvil y tablet */
@media (max-width: 991px) {
  /* contenedores generales */
  body.category .container,
  body.category .container-fluid,
  body.category #wrapper,
  body.category #content-wrapper,
  body.category .page-content,
  body.category .page-width,
  body.category #content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* filas Bootstrap */
  body.category .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* bloque del listado */
  body.category #js-product-list,
  body.category #js-product-list .products {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* tarjeta y contenedor de la imagen */
  body.category #js-product-list .product-miniature,
  body.category #js-product-list .product-miniature[class*="col-"],
  body.category #js-product-list .thumbnail-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* imagen a borde-borde */
  body.category #js-product-list .product-miniature img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 0 !important;
  }
}
@media (max-width: 991px) {
  body.category #js-product-list .thumbnail-container,
  body.category #js-product-list .product-thumbnail,
  body.category #js-product-list .product-cover {
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
  }
}
/* FULL-BLEED del listado en categoría: rompe el contenedor y ocupa todo el viewport */
@media (max-width: 991px) {
  /* saca el bloque del listado del .container */
  body.category #js-product-list {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* elimina gutters/márgenes internos típicos de Bootstrap */
  body.category #js-product-list .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.category #js-product-list [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* tarjeta e imagen a borde-borde */
  body.category #js-product-list .product-miniature,
  body.category #js-product-list .thumbnail-container {
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
  }
  body.category #js-product-list .product-miniature img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 0 !important;
  }

  /* sin marcos/sombras que aparenten “margen” */
  body.category #js-product-list .thumbnail-container,
  body.category #js-product-list .product-thumbnail,
  body.category #js-product-list .product-cover {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}
/* FULL-BLEED directo en la IMAGEN del listado (móvil/tablet) */
@media (max-width: 991px) {
  body.category { overflow-x: hidden; } /* evita scroll lateral */

  /* Permite que la imagen sobresalga del contenedor */
  body.category #js-product-list .thumbnail-container { 
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* La imagen ocupa todo el ancho del viewport, da igual el padding padre */
  body.category #js-product-list .product-miniature img {
    display: block;
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 0 !important;
  }
}