/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ====== Barra superior fija y responsive ====== */
/* Hacer que TODO el header sea fijo al hacer scroll */
#header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1031 !important;
  background-color: transparent !important; /* Mantiene transparencia si la tienes */
}
.header-top {
  background-color: transparent !important;
  transition: background-color 0.3s ease !important;
}

.header-nav {
  background-color: transparent !important;
  transition: background-color 0.3s ease !important;
}

/* === Estados al hacer scroll === */
.header-top.scrolled,
.header-nav.scrolled {
  background-color: #2c3e50 !important;
}

/* Si quieres colores distintos: */
.header-top.scrolled {
  background-color: #2c3e50 !important; /* Azul oscuro */
}

.header-nav.scrolled {
  background-color: #34495e !important; /* Gris azulado */
}

/* Asegurar que el texto se vea bien en modo scrolled */
.header-top.scrolled a,
.header-top.scrolled span,
.header-top.scrolled i,
.header-nav.scrolled a {
  color: #ffffff !important;
}

/* Asegurar que .header-top herede el fondo deseado */
.header-top {
  background-color: #2c3e50 !important;
  color: #ecf0f1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Si quieres que el fondo se aplique solo al .header-top, pero el sticky en #header, así está bien */

/* Asegurar compatibilidad en móviles */
@media (max-width: 767px) {
  .header-top {
    padding: 8px 0 !important;
    font-size: 14px;
  }
}
#wrapper {
    padding-top: 0.1rem !important; 
    background: #fcfcfc !important
}
.header-top a,
.header-top span,
.header-top i {
  color: #ecf0f1 !important;
  text-decoration: none;
}

.header-top a:hover {
  color: #1abc9c !important;
}

@media (max-width: 767px) {
  .header-top {
    padding: 8px 0 !important;
    font-size: 14px;
  }

  .header-top .account,
  .header-top .search-widget,
  .header-top .cart-preview {
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-top .material-icons {
    font-size: 20px;
  }
}

/* ====== Barra de navegación (header-nav) ====== */
.header-nav {
    background-color: #2c3e50 !important;
    border-bottom: #f6f6f6 0px solid  !important;
}
 
.header-nav .menu a,
.header-nav a {
  color: #ffffff !important;
}

.header-nav .menu a:hover,
.header-nav a:hover {
  color: #1abc9c !important;
}
#header .header-nav {
    max-height: 50px;
    border-bottom: #f6f6f6 0px solid;
}

/* ====== Carrusel full width ====== */
/* === Carrusel full width (escritorio + móvil) === */
#imageslider,
.ps_imageslider,
.carousel,
.homepage-carousel {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Asegurar que las imágenes dentro también sean 100% */
#imageslider img,
.ps_imageslider img,
.carousel img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* === Corrección específica para móviles === */
@media (max-width: 767px) {
  /* Forzar que el contenedor del cuerpo no restrinja el ancho */
  body,
  #wrapper,
  #page,
  #content-wrapper {
    overflow-x: hidden !important;
  }

  /* Remover padding/margin en el cuerpo */
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Si el carrusel está dentro de un .container, salir de él visualmente */
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ajustar tamaño en móvil si es necesario */
  #imageslider,
  .ps_imageslider,
  .carousel {
    height: auto !important;
    min-height: 200px; /* ajusta según necesites */
  }
  
  
  #imageslider,
.ps_imageslider,
.carousel,
.homepage-carousel {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(0% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}
}
/* ====== Footer con curva y degradado ====== */
footer#footer {
  
  border-radius: 24px 24px 0 0 !important;
  padding: 40px 0 !important;
  margin-top: 20px !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
  
    margin-top: 60px;
    padding-top: 27px;
     
    background-color: #171717;
}

footer#footer .container,
footer#footer .row {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  footer#footer {
    border-radius: 16px 16px 0 0 !important;
  }
}

.block-contact, .footer-container li a {
    
    color: #f2e2e2  !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

 
#block_myaccount_infos .myaccount-title a {

     color: #eeebeb !important;
    font-size: 20px  !important;
    font-weight: 400  !important;
    font-family: Roboto  !important;
}
.footer-container .h3, .footer-container .h4{
        color: #eeebeb !important;
    font-size: 20px  !important;
    font-weight: 400  !important;
    font-family: Roboto  !important;
}
@media (max-width: 767px) {
  #footer .footer-container {
    margin: 10px !important;
    padding: 10px !important;
  } 
}
/* Ajustar altura de las tarjetas de producto */
.product-miniature {
  height: 500px !important; /* Cambia este valor según lo que necesites */
  display: flex;
  flex-direction: column;
}

/* Asegurar que la imagen dentro del producto ocupe todo el alto disponible */
.product-miniature .thumbnail-container img {
  height: 350px !important;
  object-fit: cover;
  width: 100% !important;
}

/* Asegurar que el contenido (nombre, precio) se ajuste al espacio restante */
.product-miniature .product-description {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Opcional: ajustar padding para evitar desbordamientos */
.product-miniature .product-description {
  padding: 10px 15px !important;
}
@media (max-width: 767px) {
  .product-miniature {
    height: 300px !important;
  }

  .product-miniature .thumbnail-container img {
    height: 180px !important;
  }
}

#search_widget form input { 
       
    margin-top: 2px !important;
     border-radius: 0px !important;
}
#search_widget form i { 
    padding: .8rem  !important;
}

.carousel .carousel-inner {
    height: 500px;
}

.dropdown-menu {
 
    background-color: #16a085;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;
}

 #header .header-nav .user-info {
    margin-left: 0.9rem; 
}
 
/* Contenedor del submenú: asegurar posición absoluta */
.top-menu .js-sub-menu {
  position: absolute !important;
  left: 0 !important;
  z-index: 1000 !important;
}

/* Estilo base del submenú: completamente invisible al inicio */
.top-menu .sub-menu.collapse {
  opacity: 0;
  visibility: hidden; /* asegura que no ocupe espacio ni sea interactuable */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 8px 0 !important;
  background-color: #16a085 !important;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

/* Cuando está activo (.show), aparece con fade-in */
.top-menu .sub-menu.collapse.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Estilo de los enlaces */
.top-menu .sub-menu a {
  color: #ffffff !important;
  padding: 8px 16px !important;
  display: block;
  text-decoration: none;
}

.top-menu .sub-menu a:hover {
  background-color: #2c3e50 !important;
}