/* style.css */

.banner {
            width: 100%;
            height: auto;
        }

.banner img {
            width: 100%;
            height: auto;
        }

/* Imagen para escritorio */
.desktop-banner {
            display: block;
}

/* Imagen para móvil */
.mobile-banner {
        display: none;
}


 /* Media query para dispositivos móviles */
        @media only screen and (max-width: 768px) {
            .desktop-banner {
                display: none;
            }
            .mobile-banner {
                display: block;
            }
        }



.expanded-view-container .expanded-view-grid .brand-item{
	    height:330px !important;	
}

/* Estilos para el botón de más información */
.info-button {
    background-color: #280071;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
}

.info-button:hover {
    background-color: #5a359e;
}


.discount-info{
	background-color: #7af1b56b;
    padding: 0.5rem 8px !important;
    margin: 0px !important;
    font-size: 14px;
    color: #1f9d5e;
}

.city-name{
	background-color: #27cd796b;
    padding: 1rem !important;
	margin:0px !important;
    font-size: 0.9rem; 
	text-transform:capitalize;
    
}

.city-name p{
	font-size:16px;
}

a{
	text-decoration: none !important;	
}

/* ... tus estilos existentes (incluyendo la carga de swiper-bundle.min.css) ... */

/* Definir algunas variables CSS comunes (opcional pero recomendado para consistencia) */
:root {
    --primary-color: #280071; /* Púrpura del botón "Mostrar Todas" */
    --secondary-color: #f0f0f0; /* Un gris claro para fondos o bordes sutiles */
    --border-color: #ccc;      /* Color de borde por defecto */
    --focus-color: #5a359e;    /* Un púrpura más claro o el primario */
}


/* --- Mejoras para el campo de búsqueda --- */

.search-container {
    margin: 20px auto;
    padding: 15px; /* Aumentar padding para un aspecto más espaciado */
    max-width: 90%; 
    font-family: sans-serif; 
    background-color: #fff; /* Fondo blanco para el contenedor del filtro */
    border: 1px solid var(--border-color); /* Borde alrededor del contenedor */
    border-radius: 8px; /* Bordes redondeados para el contenedor */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra suave */
    display: flex; /* Usar flexbox para alinear label e input si prefieres */
    flex-direction: column; /* Apilar label e input verticalmente */
    gap: 10px; /* Espacio entre label e input */
}

.search-container label {
    display: block; 
    margin-bottom: 0; /* Quitar margen inferior si usamos gap en el contenedor flex */
    font-weight: bold;
    font-size: 1em; /* Ajustar tamaño si es necesario */
    color: #333; /* Color de texto más oscuro */
}

.search-container input[type="text"] {
    width: 100%; 
    padding: 12px 15px; /* Ajustar padding interno del input */
    border: 1px solid var(--border-color); 
    border-radius: 4px; 
    box-sizing: border-box; 
    font-size: 1em; 
    color: #555; /* Color de texto para la entrada */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave al enfocar */
    outline: none; /* Eliminar el contorno de enfoque por defecto del navegador */
}

/* Estilos al enfocar el campo de búsqueda */
.search-container input[type="text"]:focus {
    border-color: var(--focus-color); /* Cambiar color del borde al enfocar */
    box-shadow: 0 0 5px rgba(var(--focus-color), 0.5); /* Sombra sutil con color primario */
}

/* Estilo para el placeholder del input */
.search-container input[type="text"]::placeholder {
    color: #999; /* Color más claro para el texto del placeholder */
    font-style: italic; /* Opcional: hacer el placeholder itálico */
}


/* --- Tus estilos generales de la galería (asegúrate de que el max-width sea el mismo) --- */
#brand-gallery-container {
    max-width: 100%; /* Asegúrate de que coincida con el contenedor de búsqueda */
    margin: 20px auto; 
    padding: 0 15px;
    font-family: sans-serif; 
    /* background-color: #f0f0f0; /* Opcional: un fondo gris claro para toda la galería */
}

/* ... Resto de tus estilos para categorías, swiper, brand-logo, expanded-view, etc. ... */


/********/
/***********/

.brand-item-content {
    display: flex; 
    flex-direction: column; /* Apilar verticalmente */
    align-items: center; 
    text-align: center; 
    padding: 10px; 
    border: 1px solid #eee; 
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: auto; 
    width: 100%; 
    box-sizing: border-box; 
    
    /* Opcional: Dar una altura mínima al contenido total del item si es necesario */
    /* min-height: 180px; */ 
}

.brand-logo { /* O .brand-logo a, .brand-logo span */
    display: flex; /* o block; */
    justify-content: center;
    align-items: center;
    /* ... otros estilos ... */
    /* Asegúrate de que tienen un tamaño definido o heredan bien */
    /* width: 100%; */ 
    /* height: 100%; */ 
}

.brand-logo-wrapper {
     position: relative; 
     display: flex; 
     justify-content: center;
     align-items: center;
     width: 100%; 
	 overflow:auto;
     
     /* *** CRUCIAL: Dar una altura definida al contenedor del logo *** */
     /* Esto asegura que la imagen tiene un espacio vertical limitado para no desbordarse */
     height: 140px; /* <<< Ajusta esta altura según el tamaño deseado para el área del logo */
     /* Opcional: Si el logo debe tener un tamaño máximo absoluto sin depender del wrapper */
     /* max-width: 80px; */ 

     margin-bottom: 10px; /* Espacio entre logo e info */
}

.brand-logo-wrapper img {
    display: block;
    max-width: 160px;
    max-height: 100%; /* Ocupa la altura del wrapper. Ahora height del wrapper está definido. */
    height: auto;
    object-fit: contain; /* <<< CRUCIAL: Asegura que la imagen se ajusta dentro del contenedor sin distorsionarse */
    transition: transform 0.3s ease;
}

.brand-logo-wrapper img:hover {
    transform: scale(1.05);
}

.discount-badge {
    position: absolute; 
    top: 5px; 
    right: 5px; 
    background-color: #ff0000; 
    color: white; 
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 1.1em;
    font-weight: bold;
    z-index: 1; 
    white-space: normal; 
	text-transform:capitalize;
}

.brand-info {
    width: 100%; 
    /* Opcional: Permitir que el texto ocupe el espacio restante si el logo tiene tamaño fijo */
    /* flex-grow: 1; */ 
    /* Opcional: Añadir un tamaño mínimo si el texto es muy corto */
    /* min-height: 40px; */
	min-height: 40px;
    padding-top: 0px;
}

.brand-info .company-name {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 5px 0; 
	color: #29006e;
	padding: 1rem !important;
	text-transform: uppercase !important;
}

.brand-info .company-email {
    font-size: 0.9em;
    color: #555; 
    margin: 0;
}

.swiper-slide {
    /* display: flex; */ /* Mantener display que usa Swiper (probablemente flex) */
     justify-content: center;
     align-items: center;
     height: auto; /* O quizás una altura fija si quieres uniformidad */
     /* Asegúrate de que no haya padding o margen en el slide que cause desborde */
     padding: 0; /* Ejemplo */
     margin: 0; /* Ejemplo */
}

.swiper-slide .brand-item-content {
     height: 100%; /* Asegura que el contenido ocupa el alto del slide si este tiene altura */
     /* min-height: auto; */
}

.expanded-view-grid .brand-item {
    display: flex; 
    justify-content: center;
    align-items: center;
    border: none; 
    padding: 0; 
    background-color: transparent;
    box-shadow: none;
    height: 140px; /* Altura del "cuadro" de la cuadrícula */
    width: 100%; /* Ancho del "cuadro" de la cuadrícula */
    box-sizing: border-box;
}

/* Asegurar que .brand-item-content dentro del item de cuadrícula no desborda */
.expanded-view-grid .brand-item .brand-item-content {
     height: 100%; /* Asegura que el contenido ocupa el alto del item si este tiene altura */
     /* min-height: auto; */
}


/*****************************/
/******************************/
/*****************************/


img{
	padding: 0px;
}

.brand-logo{
	background-color: #fff;
	box-shadow:#c9c9c7 2px 10px 15px 1px;
}

.expanded-view-grid {
  display: grid;
  gap: 50px; /* Espacio entre las celdas */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Columnas automáticas */
  padding:3rem 0em;
}

.brand-item {
  background-color: #ffffff; /* Ejemplo de color de fondo */
  height: auto; /* Altura fija para el ejemplo */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc; /* Borde para visualizar mejor cada elemento */
}


/* style.css */
/*************/

body{
	background-color:#eeeeee;
	font-family:arial;
	font-size:14px;
}

h2{
	font-size:1.5rem !important;
	color:#ffffff;
}

#brand-gallery-container{
	    padding: 2%;
}

.swiper-wrapper{
	padding-bottom: 3%;
    padding-top: 2%;
}


.category-header {
    display: flex;
    justify-content: space-between;
    background-color: #2d2767;
    padding-left: 1%;
    padding-right: 1%;
    align-items: center;
	border-radius: 10px;
}

.category-header .category-title {
    /* Aquí tus estilos para el título */
}

.category-header .show-all-button {
    height: 30px;
    color: #6c97c4;
    background-color: #2e2663 !important;
    font-size: 16px;
    border: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-header .show-all-button:hover {
    background-color: #cccccc;
    color: #5a86b3;
}

.category-header .show-all-button:active {
    background-color: #d0d0d0;
    transform: scale(0.98);
}

.brand-logo { /* Aplicado al div que contiene img o a > img */
    display: flex; /* Usamos flex para centrar la imagen dentro */
    justify-content: center;
    align-items: center;
    width: 100%; /* Ocupar el ancho del contenedor padre (.swiper-slide o .brand-item) */
    height: 100%; /* Ocupar el alto del contenedor padre */
    box-sizing: border-box; /* Incluye padding y borde en el tamaño si los añades aquí */
    /* Quita borde, padding, box-shadow, background-color de aquí si los quieres solo en .brand-item */
    /* border: 1px solid transparent; /* Borde transparente para mantener espacio si es necesario */
    /* padding: 0; */
    /* background-color: transparent; */
    /* box-shadow: none; */
}

.brand-logo a, .brand-logo span { /* Contenedor para el logo/enlace o solo logo */
    display: flex; /* También flex para centrar la imagen dentro del enlace */
     justify-content: center;
     align-items: center;
     width: 150%; /* Ocupar el ancho del .brand-logo */
     height: 150%; /* Ocupar el alto del .brand-logo */
     text-decoration: none; 
	
}

.brand-logo img {
    display: block;
    /* Aumenta la especificidad si es necesario */
    max-width: 100% !important; /* Asegura que la imagen no se desborde del padre */
    max-height: 100px !important; /* Limita la altura máxima (ajusta el valor según necesites) */
    height: auto !important; /* Mantiene la relación de aspecto */
    transition: transform 0.3s ease; 
    object-fit: contain; /* Asegura que la imagen se ajusta al contenedor sin distorsionarse */
}

.brand-logo img:hover {
    transform: scale(1.05);
}

/* Si tienes reglas separadas para la vista expandida, asegúrate de que también sean específicas */
.expanded-view-grid .brand-item .brand-logo img {
     max-width: 100% !important; 
     max-height: 100px !important; 
     height: auto !important; 
     object-fit: contain;
}


/*****************************/
/* ... Tus otros estilos ... */

/* Asegurarse de que los slides de Swiper son visibles cuando el contenedor Swiper está visible */
/* El CSS de Swiper normalmente maneja esto, pero si hay conflicto, podrías necesitar */
.swiper-container:not([style*="display: none"]) .swiper-slide {
    display: block !important; /* Usar block o flex, dependiendo de cómo quieras layout interno */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurarse de que los items de la cuadrícula son visibles cuando el contenedor expandido está visible */
.expanded-view-container:not([style*="display: none"]) .brand-item {
    display: flex !important; /* O el display que uses para el layout de grid item */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurarse de que el contenido DENTRO de los items (logos, etc.) no está oculto */
/* Si ocultas el .brand-logo o img en algún lugar con CSS, anula eso aquí */
.swiper-container:not([style*="display: none"]) .swiper-slide .brand-logo,
.expanded-view-container:not([style*="display: none"]) .brand-item .brand-logo {
    display: flex !important; /* O el display que uses */
    visibility: visible !important;
    opacity: 1 !important;
}

.swiper-container:not([style*="display: none"]) .swiper-slide .brand-logo img,
.expanded-view-container:not([style*="display: none"]) .brand-item .brand-logo img {
    display: block !important; /* O el display que uses */
    visibility: visible !important;
    opacity: 1 !important;
    /* Asegurarse de que no tengan tamaño 0 por CSS */
    /* min-width: 1px !important; min-height: 1px !important; */
}



/* Asegurar que el header se oculta cuando la búsqueda lo indica */
/* Aunque handleSearchInput lo maneja, una regla CSS con !important puede ser más robusta */
.category-header[style*="display: none"] {
     display: none !important;
}

/******************/
/******************/
/******************/
/******************/

/* style.css */

/* ... layout CSS**.

Aunque tu JavaScript crea y añade los elementos `div.swiper-button-prev` y `div.swiper-button-next` al contenedor Swiper (`.swiper-container`), su **visualización y posicionamiento final** dependen Tus otros estilos ... */

/* Asegurar que el contenedor del carrusel es el punto de referencia para elementos absolutos */
.swiper-container {
    position: relative; /* Swiper CSS debería añadir esto, pero aseg completamente de los estilos CSS de la librería Swiper (`swiper-bundle.min.css`) y de cualquier estilo que tú añadas o modifiques en tu `style.css`.
	

Tu captura de Elements muestra que los botones **sí existenúrate */
    overflow: hidden; /* Generalmente es hidden para recortar slides, pero puede afectar botones si están fuera */
    /* Ajusta padding si los botones están dentro del padding */
    /* padding: 0 4** en el HTML, lo cual es bueno. La captura de pantalla visual muestra que las flechas de la izquierda aparecen pero las de la derecha no, o aparecen en un lugar inesperado.

**Causa probable:**

Los estilos por defecto de Swiper0px; */ /* Ejemplo: Si quieres 40px de espacio a los lados para las flechas DENTRO del contenedor */
}

/* Estilos por defecto para los botones de navegación de Swiper */
.swiper-button- para los botones de navegación usan **posicionamiento absoluto** (`position: absolute;`). Ellos esperan que su contenedor padre (`.swiper-container`) tenga `position: relative;` (o `absolute`, `fixed`, `sticky`) para posicionnext,
.swiper-button-prev {
    position: absolute; /* Posicionamiento absoluto respecto al .swiper-container padre */
    top: 50%; /* Centra verticalmente el punto de referencia */
    transform: translateY(-arse correctamente respecto a él. Si el contenedor `.swiper-container` no tiene un `position` diferente a `static` (que es el valor por defecto), los botones absolutos se posicionarán respecto al ancestro posicionado más cercano,50%); /* Ajusta la posición verticalmente por la mitad de su propia altura */
    z-index: 10; /* Asegura que estén por encima de los slides */
    cursor: pointer; /* Indica que son o si no hay ninguno, respecto al `body` o la ventana, lo cual resulta en un posicionamiento incorrecto (como aparecer todos juntos en una esquina).

Además, otros estilos como `width`, `height`, `top`, `left`, `right clickeables */

    /* Tamaño del botón (ajusta según necesidad) */
    width: 44px; /* Tamaño por defecto de Swiper */
    height: 44px; /* Tamaño por defecto de Swiper */

`, `transform` (para centrado vertical), `z-index`, y `display` también son cruciales para que se vean y funcionen. A veces, `overflow: hidden;` en un contenedor puede ocultar elementos absolutos que    /* Layout interno (para centrar el icono) */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Color del icono/flecha (ajusta según diseño se posicionan fuera de sus límites.

**La Solución:**

Debes aplicar en tu `style.css` los estilos correctos para que el `.swiper-container` sea un contexto de posicionamiento para los botones y para que los) */
    color: #007aff; /* Color azul por defecto de Swiper, o usa tu color de marca */
    /* O usa la variable CSS si está definida: color: var(--swiper-navigation-color, botones tengan el tamaño y posición adecuados.

Basado en que el script añade los botones directamente al `.swiper-container`, la estructura esperada por Swiper es `swiper-container` > `swiper-wrapper` + `swiper-button-prev` + `swiper-button-next`. Los botones necesitan `position: absolute;`.

Aquí te recuerdo los estilos que probablemente necesitas en tu `style.css` (Opción 2: Posicionamiento Absolute con Padding):

```css
 #007aff); */

    /* Transiciones y apariencia al pasar el ratón */
    transition: all 0.3s ease;
    /* Opacidad: Swiper puede controlar esto, pero puedes definir una/* style.css */

/* ... Tus otros estilos ... */

/* Estilos para el CONTENEDOR principal del Carrusel */
.swiper-container {
    /* ... Tus estilos existentes (borde, padding, etc por defecto si necesitas */
    /* opacity: 0.7; */
}

/* Posicionamiento horizontal de los botones */
.swiper-button-prev {
    left: 10px; /* Distancia desde el borde izquierdo del.) ... */
    position: relative; /* <<< CRUCIAL: Necesario para que los hijos absolutos se posicionen respecto a él */
    overflow: hidden; /* Puede ser necesario dependiendo de tu diseño, pero si quieres botones swiper-container */
    right: auto; /* Asegura que right no interfiera */
    /* O usa la variable si está definida: left: var(--swiper-navigation-sides-offset, 10px); */
}

 fuera, quítalo */
    /* Añadir padding a los lados para hacer espacio a las flechas si no quieres que solapen contenido */
    padding: 0 40px; /* Ejemplo: 40px de padding a la.swiper-button-next {
    right: 10px; /* Distancia desde el borde derecho del swiper-container */
    left: auto; /* Asegura que left no interfiera */
    /* O usa la variable si está definida: right: var(--swiper-navigation-sides-offset, 10px); */
}

/* Estilos para el contenido (icono) de las flechas */
/* Esto requiere que la fuente de iconos izquierda y derecha */
    padding-bottom: 40px; /* Mantener padding inferior si usas paginación */

  /* Estilos base para los botones de navegación de Swiper */
.swiper-button-next,
.swiper-button-prev {
    /* ... Tus estilos de posicionamiento y tamaño existentes (position, top, transform, width, height, z-index, display, justify-content, align-items, cursor) ... */
    /* Asegúrate de que position: absolute; está aquí y top: 50%; transform: translateY(-50%); */

    /* Estilos para darles forma, fondo, borde y sombra */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente */
    border-radius: 50%; /* Forma circular (si width == height) */
    /* border: 1px solid #ccc; /* Borde ligero (opcional) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */

    /* Color del icono de la flecha (ajusta según tu diseño) */
    color: #333; /* Color oscuro para la flecha */
    /* O usa la variable si está definida: color: var(--swiper-navigation-color, #333); */


    /* Tamaño del icono (ya lo tienes en ::after, pero aquí es el contenedor) */
    font-size: 0; /* Oculta cualquier texto si aparece */

    /* Transición para efectos hover (opcional) */
    transition: all 0.3s ease; 
}

/* Estilos al pasar el ratón por encima de los botones */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1); /* Fondo blanco opaco al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al pasar el ratón */
    /* Opcional: cambiar el color del icono al pasar el ratón */
    /* color: #000; */
}


/* Estilos para el contenido (icono) de las flechas */
/* Estos dependen de que la fuente 'swiper-icons' se cargue */
.swiper-button-next::after, 
.swiper-button-prev::after {
    font-family: swiper-icons; 
    /* El tamaño del icono ya lo tienes aquí */
    font-size: 20px; 
    text-transform: none !important; 
    letter-spacing: 0; 
    /* El color lo hereda del color del botón padre (.swiper-button-next/prev) */
}

.swiper-button-prev::after {
    content: 'prev'; 
}

.swiper-button-next::after {
    content: 'next'; 
}

/* Estilos para ocultar los botones cuando están deshabilitados (Swiper añade la clase .swiper-button-disabled) */
.swiper-button-disabled {
    opacity: 0.3;
    cursor: auto;
    pointer-events: none; /* No son clickeables */
}

.category-header{
	text-transform: uppercase;
}
/* ... Resto de tus estilos para .swiper-container, .swiper-wrapper, .swiper-slide, .brand-logo, .expanded-view, etc. ... */