@import url('https://fonts.googleapis.com/css2?family=Qwigley&display=swap');
/* 🔹 Ajustar el fondo del encabezado */
.header-container {
    background-color: white !important;
    padding: 10px 0;
    display: flex;
    align-items: center; /* Centrar verticalmente */
    justify-content: space-between; /* Distribuir elementos correctamente */
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 80px; /* 🔥 Asegura que todos los elementos compartan la misma altura */
}

/* 🔹 Fondo negro en la parte superior */
.top-header {
    background-color: black !important;
}

/* 🔹 Evitar que el fondo blanco se extienda arriba */
.top-header + .header-container {
    margin-top: 0 !important;
}

/* 🔹 Logo centrado y MÁS GRANDE */
.h-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Permite que el logo ocupe el espacio necesario */
    text-align: center;
    height: 100%;
    position: relative; /* 🔥 Asegura que el logo tenga prioridad en la estructura */
    /*z-index: 1005 !important;  🔥 Un número más alto que la hamburguesa */
}

.h-logo a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1005 !important; /* 🔥 Asegura que el enlace esté por encima */
    position: relative; 
    pointer-events: auto !important; /* 🔥 Asegura que detecte el click */
    touch-action: manipulation !important; /* 🔥 Asegura que el toque funcione bien */
}

.h-logo img {
    max-width: 350px !important; /* Tamaño más grande */
    height: auto !important; /* Mantiene la proporción */
    max-height: 130px !important; /* Permite que crezca en altura */
}

/* 🔹 Menú hamburguesa alineado correctamente */
.menu-hamburguesa {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000 !important; /* 🔥 Ahora la hamburguesa está por debajo del logo */
}

/* 🔹 Ajuste del margen inferior del encabezado */
.header-container {
    margin-bottom: 20px;
}

/* 🔹 Asegurar que el encabezado pegajoso mantenga el diseño correcto */
.header-container.fixed {
    background-color: white !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 🔹 Ajustes específicos para móviles */
@media screen and (max-width: 768px) {
    .header-container {
        flex-direction: row;
        padding: 15px 10px;
        height: auto;
    }

    .h-logo img {
        max-width: 300px !important; /* Más grande en móvil */
        max-height: 120px !important;
    }

    .menu-hamburguesa {
        left: 15px;
    }
}

/* 🔹 Estilos para el texto sobre las imágenes */
.texto-sobre-imagen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-family: 'Cinzel', serif; /* Fuente elegante */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Mejora la visibilidad */
    line-height: 1.2;
    width: 90%;
}

/* 🔹 Centramos la descripción de la imagen */
.box-pebanner .ApImage .image_description {
display: flex;
align-items: center;
justify-content: center;
}

/* 🔹 Primera línea de texto: "VISITA NUESTRA TIENDA" */
.titulo-escritorio {
font-family: 'Qwigley', Arial, sans-serif;
font-size: 75px;
line-height:40px;
font-weight: 400;
margin: 0 0 6px 0;
text-align: center;
display: block;
color:#fff;
text-transform: none;
}

/* 🔹 Segunda línea: "ESTAMOS EN GALDAKAO (BIZKAIA)" */
.subtexto-escritorio {
font-size: 24px;
font-weight: bold;
display: block;
text-align: center;
color:#fff;
 margin-top: 5px; /* Espacio entre las dos líneas */
}

.texto-mujer-escritorio{
font-size: 30px;
font-weight: bold;
display: block;
text-align: center;
color:#fff;
}

.texto-hombre-escritorio{
font-size: 30px;
font-weight: bold;
display: block;
text-align: center;
color:#fff;
}

.texto-nina-escritorio{
font-size: 30px;
font-weight: bold;
display: block;
text-align: center;
color:#fff;
}

.texto-nino-escritorio{
font-size: 30px;
font-weight: bold;
display: block;
text-align: center;
color:#fff;
}
/* 🔹 Ajuste para móviles pequeños (Reducir texto de fotos de página inicio") */
@media screen and (max-width: 600px) { 

.titulo-escritorio{ font-size: 40px;line-height:26px; }
.subtexto-escritorio{ font-size: 18px; }
.texto-hombre-escritorio{ font-size: 20px; }
.texto-mujer-escritorio{ font-size: 20px; }
.texto-nino-escritorio{ font-size: 20px; }
.texto-nina-escritorio{ font-size: 20px; }

}
/* 🔹 Ajuste para móviles pequeños (Reducir texto de fotos de página inicio") */
@media screen and (max-width: 400px) { 


.subtexto-escritorio{ font-size: 10px; }
.texto-hombre-escritorio{ font-size: 30px; }
.texto-mujer-escritorio{ font-size: 30px; }
.texto-nino-escritorio{ font-size: 30px; }
.texto-nina-escritorio{ font-size: 30px; }

}

/* 🔹 Ajustes para móviles */
@media screen and (max-width: 768px) {
    .texto-sobre-imagen .titulo {
        font-size: 24px; /* 🔥 Más pequeño en móviles para que quepa bien */
    }

    .texto-sobre-imagen .subtexto {
        font-size: 18px; /* 🔥 Asegura que sea legible en pantallas pequeñas */
    }
}

/* 🔹 Ajuste para móviles pequeños (Reducido solo el texto de "Visita Nuestra Tienda") */
@media screen and (max-width: 400px) { 
    .texto-sobre-imagen .titulo {
        font-size: 20px !important; /* 🔥 Ajustado para que no baje a dos líneas */
        white-space: nowrap !important;
    }

    .texto-sobre-imagen .subtexto {
        font-size: 16px !important; /* 🔥 También reducido proporcionalmente */
    }
}

/* 🔹 Estilos para el texto de Mujer, Hombre, Niña y Niño (Restaurado como estaba antes) */
.texto-mujer,
.texto-hombre,
.texto-nina,
.texto-nino {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-family: 'Cinzel', serif; /* Fuente original */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
    font-size: 72px !important; /* 🔥 Restaurado */
    font-weight: bold;
    text-transform: capitalize;
    width: 90%;
}

/* 🔹 Ajustes para móviles */
@media screen and (max-width: 768px) {
    .texto-mujer,
    .texto-hombre,
    .texto-nina,
    .texto-nino {
        font-size: 64px !important; /* 🔥 Restaurado sin cambios */
    }
.box-hnav3 .popup-over a.popup-title i[class^="ti-"] {
    font-size: 24px !important;
    margin: 20px 0px 0px 30px !important;
}
.box-hnav3 #leo_search_block_top {
        position: relative !important;         
         
		 margin-top: 22px !important;		 
    }
.box-hnav3 #leo_search_block_top .title_block:before {    
    font-size: 24px !important;
	font-weight: 500;
	}
#leo_search_block_top .block_content { 
    right: 200px;
}
.off-canvas-nav-megamenu .dropdown-menu ul li > a {    
    font-size: 16px;
}
}
@media screen and (max-width: 600px) {

}
@media (max-width: 480px) {
    .subcategory-block { 
        width: 50% !important;		
    }
	.subcategory-description {
	font-size: 10px;
	}
}
.block-category .category-cover {
    margin: 0px 10px 0px 0 !important;
    float: left !important;
}
/* 🔹 Ocultar el checkbox del boletín de noticias en el checkout */
#field-newsletter,
input[name="newsletter"],
label[for="field-newsletter"] {
  display: none !important;
}
/* --- OCULTAR/MOSTRAR MINIATURA DE CATEGORÍA --- */

/* Por defecto, ocultar miniatura */
.page-category .block-category .category-cover { 
  display: none !important; 
}

/* Mostrarla solo si hay subcategorías y no productos (como en "Hombre") */
.page-category:has(#subcategories):not(:has(#js-product-list .products))
  .block-category .category-cover {
  display: block !important;
}

/* --- CONTROL DE DESCRIPCIÓN DE CATEGORÍA --- */

/* Envolver el texto en un contenedor que se pueda expandir */
.category-description {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Altura inicial limitada (3 líneas aprox.) */
.category-description.collapsed {
  max-height: 4.5em;
}

/* Cuando se expande, se muestra completo */
.category-description.expanded {
  max-height: 100em;
}

/* Botón "Ver más / Ver menos" */
.show-more-btn {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: #b71c1c;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
}

/* --- Solo aplicar el colapsado en pantallas pequeñas --- */
@media (max-width: 768px) {
  .category-description.collapsed {
    max-height: 4.5em;
  }
  .show-more-btn {
    display: inline-block;
  }
}
@media (min-width: 769px) {
  .show-more-btn {
    display: none;
  }
}
#js-product-list-top .products-sort-order {
  display: none !important;
}
/* Ocultar SOLO EN MÓVIL el bloque superior (contador, paginación, ordenar, etc.) */
@media (max-width: 768px){
  /* versiones habituales en PrestaShop/Leo */
  #js-product-list-top,
  .leo-toolbar-top,
  .leo-product-toolbar-top,
  .products-selection-top {
    display: none !important;
  }

  /* por si el tema imprime solo el texto "Página 1–12..." dentro del top */
  #js-product-list-top .showing,
  #js-product-list-top .results,
  #js-product-list-top .total-products,
  #js-product-list-top .products-counter,
  #js-product-list-top .pagination,
  #js-product-list-top .page-list,
  #js-product-list-top .sort-by,
  #js-product-list-top .products-sort-order {
    display: none !important;
  }

  /* eliminar huecos del contenedor superior */
  #js-product-list-top{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    min-height:0 !important;
    height:0 !important;
  }
}
/* Más espacio entre la descripción de categoría y los productos en móvil */
@media (max-width: 768px){

  /* margen inferior del texto de categoría */
  .page-category .category-description {
    margin-bottom: 28px !important;  /* antes era 12px */
  }

  /* si tu plantilla usa este bloque, también separamos */
  .page-category .block-category {
    margin-bottom: 28px !important;
  }

  /* margen superior suave para el listado */
  #js-product-list {
    padding-top: 10px !important;
  }

  /* separa también el título del texto (mejor lectura) */
  .page-category h1 {
    margin-bottom: 10px !important;
  }
}
/* Ocultar el bloque "Ordenar por" solo en escritorio */
@media (min-width: 769px){
  #js-product-list-top .products-sort-order,
  #js-product-list-top .sort-by,
  #js-product-list-top .leo-sort-by,
  #js-product-list-top .products-selection,
  #js-product-list-top .leo-product-toolbar-top {
    display: none !important;
  }
}
/* ==== Ajustar espacio entre breadcrumb y título del producto ==== */

/* Reduce margen general del bloque superior del producto */
.page-product .product-container,
.page-product .product-information,
.page-product .product-detail,
.product-detail .product-information {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ajusta el margen del título */
.page-product h1.h1,
.product-detail h1.h1,
.product-detail .page-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Quitar el espacio extra del header en la ficha de producto */
.page-product .page-header,
.page-product .page-header-container,
.page-product .product-detail-header,
.page-product .product-detail .page-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ajuste del propio H1 */
.page-product .product-detail-name.h1,
.page-product h1.h1.product-detail-name {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reducir el margen del bloque superior del builder */
.ap-product-detail .block-title,
.ap-product-detail .page-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 767px) {
.cus-sticky .blockcart .header {
	line-height: 80px!important;
}
#_desktop_cart{
font-size: 22px;
}
.box-penav .popup-over {
    margin-left: -13px!important;
}
}
@media (max-width: 991px) {
.box-hnav3 #leo_search_block_top {        
        left: 30px!important;
}
.cart-products-count {
    background: #cc2121;
    color: #fff;
    line-height: 20px;
    min-width: 20px;
    border-radius: 10px;
    font-size: 10px;
	padding: 0px 4px 0px 4px;
    margin: -10px;
    
}
}