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

/* --- CUERPO ---*/
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Poner en ancho completa la tienda completa */
.container {
  width: 100% !important;
  max-width: 100% !important;

}

.columns-container {
  width: 100% !important;
}

.page-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* --- PÁGINA PRINCIPAL (LOADING PAGE) --- */

/*----------------------------- CABECERA (HEADER) --------------------------------------------------------*/
#header {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Selecciona los elementos del menú y aplica la transformación para que las opciones
de menú empiecen en mayúsculas*/
/* ul#top-menu.top-menu li a {} */

/* Modificaciones en el Menú Principal que está en el hook DisplayNavFullWidth */
/* div#_desktop_top_menu { padding-bottom: 8px; padding-top: 8px;} */

/* Colocar el Menú Principal en el centro y cambiar su color de fondo a gris */
#header .menu {
  display: flex;
  justify-content: center;
  /*background-color: #717171 ; */
  /*Gris claro*/
  /* background-color: #82003cff !important; */
}

/* Adaptar el Menú para que tenga 4 líneas arriba y 2 abajo. */
#header .menu>ul {
  display: flex;
  justify-content: center;
  /* padding-left: 40px; */
  margin-left: 340px;
  margin-right: 340px;
}

#header .menu>ul>li {
  display: inline-block;
}


/* Para quitar el borde que usa el header-nav y el header-top */
#header .header-nav {
  border-bottom: none;
}

/* Para evitar que salga el sub-menú (En Cátalogo) */
.popover.sub-menu.js-sub-menu.collapse {
  display: none;
}

/* Modificar el carrito de compra */
#header .header-nav .blockcart {
  margin-left: 0.9375rem;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  /*color: #000;*/
  display: flex;
  align-items: baseline;
}

/* No visualizar el marco de las Sub-categorías */
div#subcategories {
  display: none;
}

/* Bloque donde aparece el enunciado de Categorías. Está dentro de Catálogo */
.block-category {
  min-height: 0rem;
  margin-bottom: 1.563rem;
  background-color: #D0D8CC;
}

/* Menú Principal: para los enlaces al pasar el cursor (fondo blanco) */
/* #top-menu a:hover {background:  #ffffff;} */

/* Menú Principal: Color de las letras (gris) y la primera letra en mayúscula */
#header .menu>ul>li>a {
  color: #575756;
  /*text-transform: uppercase;*/

  font-weight: bold;
  color: #575756;
}

/* Inicio Sesión y Enlaces del Menú Principal: Al pasar el cursor se pintará de rojo-vino */
#header .top-menu a[data-depth="0"]:hover,
a:hover {
  color: #dd1f29 !important;
  text-decoration: none
}

/* hacer que el logo ocupe más espacio */
#header .logo {
  max-width: 300%;
  /* height: auto; */
}

/* Pone en rojo el último enlace del Menú Principal en rojo */
#category-40>a {
  color: #dd1f29 !important;
}

/* Estilos generales para el menú */
.top-menu {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-menu a {
  text-decoration: none;
  color: #7a7a7a;
}

/*----- CENTRALIZACIÓN DEL LOGOTIPO DE LA EMPRESA  -----*/

/* Cancelar el ancho fijo del grid */
/* #_desktop_logo {
  position: absolute !important;
  left: 35% !important;
  transform: translateX(-50%) !important;
  z-index: 10;
} */

/* Asegúrate de que el contenedor padre permita posicionamiento absoluta */
/* .header-top .container {
  position: relative !important;
} */

/* Para evitar que se solape con la barra de búsqueda */
/* .header-top-right {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
} */


/*----------------------------- SECCIÓN (SECTION)--------------------------------------------------------*/

#wrapper {
  padding-top: 1.563rem;
  background: #FFF;
}

/*----------------------------- FOOTER --------------------------------------------------------*/



/* --- PÁGINA DE PRODUCTOS --- */
/* Valor de "-4" que nos aparece al lado de el mensaje "Impuestos incluidos"  */
.product-prices .tax-shipping-delivery-label .delivery-information {
  display: none !important;
}


/*-------------------------------- CARRUSEL DE IMÁGENES --------------------------------*/

.homeslider-container {
  width: 100%;
  /* Ajusta al 100% del ancho de la pantalla */
  margin: 0 auto;
  /* Centra el contenedor */
  padding: 0;
  /* Elimina cualquier espacio extra */
  overflow: hidden;
  /* Evita desbordamiento */
}

.homeslider-image {
  width: 100%;
  /* Hace que las imágenes ocupen el ancho completo */
  height: auto;
  /* Mantiene las proporciones de las imágenes */
  object-fit: cover;
  /* Recorta las imágenes si es necesario */
}

/*-------------------------------- CARRUSEL DE IMÁGENES --------------------------------*/

/*----------------------- BANNER DE COOKIES (ets_cookie_banner) -----------------------*/


/*----------------------- BANNER DE COOKIES (ets_cookie_banner) -----------------------*/

/* --- MEDIAS QUERIES --- */

/* Pantallas pequeñas: hasta 768px */
@media (max-width: 768px) {

  .top-menu {
    flex-direction: column;
    align-items: center;
  }

  .top-menu li {
    margin: 5px 0;
  }

  .top-menu a[data-depth="0"] {
    font-size: 1.5rem !important;
  }

  .barra-divide-menu {
    display: none;
  }
}

/* Pantallas medianas: entre 768px y 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .top-menu {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .top-menu a[data-depth="0"],
  #header .menu>ul>li>a {
    font-size: 1.5rem !important;
  }
}

/* Pantallas grandes: desde 992px */
@media (min-width: 992px) {
  .top-menu {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .top-menu a[data-depth="0"] {
    font-size: 1.5rem !important;
  }
}

/* Ajustes extra grandes: desde 1280px */
@media (min-width: 1280px) {
  #header .menu>ul>li>a {
    font-size: 1.5rem;
  }
}

/* Ocultar barra del menú en cierto rango ancho: 1732px - 2085px */
@media (min-width: 1732px) and (max-width: 2085px) {
  #top-menu>li:nth-child(8) {
    display: none !important;
  }
}


/*--- Páginas CMS   ---*/
.store-location {
  width: 100%;
  margin: 0 auto;
}

.store-location div {
  padding: 10px;
}

.store-location iframe {
  border-radius: 8px;
}

.store-location h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.store-location p {
  font-size: 1.1em;
  line-height: 1.5;
}