/* 1.Fuente */
/*@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');*/

/* Confortaa LIGHT (300) */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/comfortaa-v47-latin-300.woff2') format('woff2');
}

/* Comfortaa REGULAR (400) */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/comfortaa-v47-latin-regular.woff2') format('woff2');
}

/* Comfortaa MEDIUM (500) */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/comfortaa-v47-latin-500.woff2') format('woff2');
}

/* Comfortaa SEMIBOLD (600) */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/comfortaa-v47-latin-600.woff2') format('woff2');
}

/* Comfortaa BOLD (700) */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/comfortaa-v47-latin-700.woff2') format('woff2');
}

/* --- APLICAR LA FUENTE DE MANERA GLOBAL --- */
body, h1, h2, h3, h4, h5, h6, .products {
  font-family: 'Comfortaa', sans-serif !important;
}

@media (min-width: 1200px) {
  #wrapper .container {
    max-width: 95%; /* Cambia el 1140px por defecto a un 95% del ancho */
	width:90%;
  }
}

html, body, div, p, a, h1, h2, h3, h4, h5, h6, ul, li, ol, span, input, button, select, textarea {
    font-family: 'Comfortaa', sans-serif !important;
}

/* Exclusión para asegurar que los iconos sigan funcionando */
[class^="fa-"], [class*=" fa-"], .fas, .far, .fab, .dashicons, [class^="icon-"] {
    font-family: inherit !important; /* O el nombre de la fuente de iconos si se rompen */
}

.top-menu a[data-depth="0"] {
    padding: .625rem;
    font-size: 0.9rem;
    font-weight: 900;
}


div#contact-link {
    color: #d0ff50;
}

.header-nav {
	  /*  background: #115B93;	*/
	  background: #683DFF;
}
#header a {
	color:white;
}
a.dropdown-item.dropdown-submenu {
    color: grey !important;
}
#subcategories {
    display: none !important;
}
.product-manufacturer {
	display:none!important
}
/* Estilos para las pestañas al 100% de ancho */
.product-tabs-fullwidth {
    width: 100% !important;
    clear: both;
    margin-top: 40px;
    margin-bottom: 30px;
    display: block;
}
/* Ocultar "Precio: de más bajo a más alto" y "Precio: de más alto a más bajo" */
.products-sort-order .dropdown-menu .select-list[href*="order=product.price.asc"],
.products-sort-order .dropdown-menu .select-list[href*="order=product.price.desc"],
.products-sort-order .dropdown-menu a[href*="product.price.asc"],
.products-sort-order .dropdown-menu a[href*="product.price.desc"] {
    display: none !important;
}

/* Forzar que las columnas del footer tengan el mismo tamaño en pantallas de escritorio */
@media (min-width: 768px) {
    .footer-container .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* Apunta a los bloques principales del footer (Información, Cuenta, Tienda) */
    .footer-container .row > .wrapper, 
    .footer-container .row > div[class*="col-"] {
        flex: 1 1 0% !important;
        max-width: 100% !important;
    }
}


/*FOOTER*/

#footer {
    background-color: #cfcece;
}

/* Cambiar a negro toda la tipografía del footer en Prestashop */
#footer,
#footer a,
.footer-container,
.footer-container a,
.footer-container .block-categories,
.footer-container .block-contact,
.footer-container h1, .footer-container h2, .footer-container h3, .footer-container h4 {
    color: #000000 !important;
}

#footer a:hover,
.footer-container a:hover {
    color: #683DFF !important;
}
.footer-container .h3, .footer-container .h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: #683DFF;
}
div#contact-link a{
    color: white!important;
}
div#contact-link a:hover {
    color: #d0ff50!important;
}

/* --- Redes sociales--- */

.block-social ul li {
    background-color: #683dff!important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.block-social ul li:hover {
    background-color: #d0ff50 !important;
}
.facebook:hover{
background-image: url(https://chollo.smythsys.es/themes/chollo_classic/assets/css/04be689c12d686c59503_purple.svg);
}

.instagram:hover{
background-image: url(https://chollo.smythsys.es/themes/chollo_classic/assets/css/3a94078d659136527abf_purple.svg);
}
.twitter:hover{
background-image: url(https://chollo.smythsys.es/themes/chollo_classic/assets/css/f56d95737d55e2bdba95_purple.svg);
}



/* Separación en las filas de banners la portada Index  */

.filasportada {
    margin-top: 1.5em;
	margin-right: 2em;
	margin-left: 3.5em;
}

.filasportada11 {
	/*margin-left:15%;*/
	display: flex;
    justify-content: center;
    align-items: center;
	margin-left: 10%;
}
.filasportada12 {
	display: flex;
    justify-content: center;
    align-items: center;
}
img.banner-chollos-izq {
    max-width: 99% !important;
}
.carousel .carousel-inner {
margin-left: 6%;
}
#_desktop_contact_link {
		 float:right;
}
.block-social {
    width: 3%;
}
/* Cubre iPad Mini y iPad Air (y la mayoría de tablets del mercado) */
@media only screen and (min-width: 744px) and (max-width: 1180px) {
    /* Estilos base para tablets */
	.carousel .carousel-inner {
		margin-left:0%!Important;
    }
    .block-social {
        max-width: 2%;
     }
	 .row {
		 margin-left:-45px;
         margin-right: -45px;

	 }
	 #header .header-nav{
		 font-size: 0.7em;
	 }
	 #_desktop_contact_link {
		 font-size: 0.8em;
	 }
}

/*  SUBMENUS EN COLUMNAS */
/* Aseguramos el ancho completo del contenedor del submenú */
.header-top .menu .popover {
    width: 100vw !important;
    max-width: 1140px !important;
    left: 0 !important;
    right: 0 !important;
}

/* Convertimos el contenedor en una cuadrícula (Grid) rígida */
.header-top .menu .popover .top-menu {
    display: grid !important;
    
    /* DEFINICIÓN DE COLUMNAS: Creamos exactamente 5 columnas del mismo tamaño (1fr) */
    grid-template-columns: repeat(5, 1fr) !important;
    
    /* Espacio fijo entre columnas (horizontal) y filas (vertical) */
    gap: 20px 15px !important; 
    padding: 20px !important;
	font-size:0.95em;
}

/* Reseteamos los elementos hijos para que no usen flexbox ni floten */
.header-top .menu .popover .top-menu > li {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Si tienes sub-enlaces dentro de cada columna, los mantenemos en lista vertical */
.header-top .menu .popover .top-menu > li ul {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-top .menu .popover .top-menu > li ul li {
    display: block !important;
    width: 100% !important;
}
.header-top .menu .popover .top-menu > li > a {
	border-bottom: 1px solid #ebebeb;
}
#header .menu a:hover {
    color: #683DFF !important;
}
/* FIN SUBMENUS EN COLUMNAS */
/* Iniciar sesión (texto e icono) */
#_desktop_user_info .user-info a {
    color: #fff; /* Color normal */
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color .3s ease;
}

#_desktop_user_info .user-info a i.material-icons {
    color: inherit; /* El icono hereda el color del enlace */
    transition: color .3s ease;
}

#_desktop_user_info .user-info a:hover,
#_desktop_user_info .user-info a:hover i.material-icons {
    color: #d0ff50 !important;
}