/* Estilos personalizados */
body {
    font-family: 'Arial', sans-serif;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
#mobile-menu {
    transition: opacity 0.3s ease;
}

#mobile-menu > div:last-child {
    transition: transform 0.3s ease;
    transform: translateX(-100%);
}

#mobile-menu:not(.hidden) > div:last-child {
    transform: translateX(0);
}

/* Bloquear scroll cuando el menú está abierto */
body.menu-open {
    overflow: hidden;
}

/* Estilo para el overlay del menú */
#mobile-menu > div:first-child {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* Estilo para el contenido del menú */
#mobile-menu > div:last-child {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 300px;
    background: white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
.tarjeta-producto {
    transition: all 0.3s ease;
}
.tarjeta-producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.etiqueta-descuento {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color:rgb(68, 77, 239);
    color: yellow;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: bold;
}
.brand-logo {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
}
.brand-originals {
    color: #d4af37;
    font-size: 0.8em;
    letter-spacing: 3px;
    position: relative;
}

/* Estilos para móvil */
@media (max-width: 767px) {
    /* Ocultar barra de búsqueda en PC */
    .search-container.md:hidden {
        display: none;
    }

    /* Grid de 2 columnas en móviles */
    #contenedor-productos-masvendidos,
    #contenedor-productos-hombres,
    #contenedor-productos-mujeres,
    #contenedor-productos-ninos,
    #contenedor-productos-ofertas,
    #catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Ajustes para las tarjetas */
    .tarjeta-producto {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        height: 100%;
    }

    .tarjeta-producto img {
        height: auto;
        object-fit: cover;
    }

    .tarjeta-producto > div {
        padding: 0.5rem;
    }

    .tarjeta-producto h3 {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.25rem;
    }

    .tarjeta-producto p {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .tarjeta-producto .flex {
        flex-direction: column;
        gap: 0.25rem;
    }

    .tarjeta-producto .flex span {
        font-size: 0.875rem;
    }

    .tarjeta-producto .flex a {
        padding: 0.25rem;
        font-size: 0.75rem;
        text-align: center;
    }

    /* Etiquetas pequeñas */
    .etiqueta-descuento,
    .absolute.top-2.left-2 {
        font-size: 0.625rem;
        padding: 0.15rem 0.3rem;
    }

}

/* Estilos para PC (pantallas grandes) */
@media (min-width: 768px) {

    /* Ajustar el tamaño de los botones del banner en PC */
    .banner-publicitario a {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    #contenedor-productos-masvendidos,
    #contenedor-productos-hombres,
    #contenedor-productos-mujeres,
    #contenedor-productos-ninos,
    #contenedor-productos-ofertas,
    #contenedor-productos-nike,
    #contenedor-productos-adidas,
    #contenedor-productos-puma {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

 .tarjeta-producto img {
        height: 150px;
        object-fit: cover;
    }

 /* Reducir tamaño de los botones "Ver Más" */
    .ver-mas-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
		 background-color: #000; /* Fondo negro */
		 color: #fff; /* Texto blanco */
		 border-radius: 0.375rem; /* Bordes redondeados */
		 transition: background-color 0.2s; /* Transición suave */
    }

	.ver-mas-btn:hover {
		background-color: #333; /* Fondo gris oscuro al pasar el mouse */
    }

/* Estilos para móvil */
@media (max-width: 767px) {

    .ver-mas-btn {
        padding: 0.1rem 0.5rem;
        font-size: 0.7rem;
    }
}


    nav.bg-white {
        top: auto;
        position: static;
    }

    nav .container {
        justify-content: center;
    }
}

.short-search .search-container {
    max-width: 200px; /* Adjust as needed */
}

/* Estilo personalizado para "Lo Más Vendido" */
.mas-vendido-texto {
    color: #ff6b35 !important; /* Color naranja vibrante */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.mas-vendido-titulo {
    color: #ff4500 !important; /* Color naranja rojizo */
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}