/* Estilos para el icono flotante del carrito */
.float {
    position: fixed;
    width: 40px;
    height: 40px;
    bottom: 90px;
    right: 20px;
    background-color: #f6f6f6;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

.float img {
    width: 41px;
    height: 41px;
    display: block;
    margin: auto;
}

.float span {
    position: absolute;
    top: -10px; /* Ajusta la posición vertical del número según sea necesario */
    right: -10px; /* Ajusta la posición horizontal del número según sea necesario */
    background-color: #fe3b30;
    color: #ffffff;
    padding: 3px; /* Ajusta el espacio interno del número según sea necesario */
    border-radius: 20%;
    font-size: 12px; /* Ajusta el tamaño de la fuente según sea necesario */
    width: 25px; /* Ajusta el ancho del número según sea necesario */
    height: 25px; /* Ajusta la altura del número según sea necesario */
}

.product-details-thumb {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mySwiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000;
    position: relative;
}

.swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.proce {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 0.7rem 0;
background-color: white;
border-radius: 0rem 0rem 0 0;
box-shadow: 0px 0px 20px rgba(17, 17, 17, 0.25);
display: flex;
justify-content: space-evenly;
align-items: center;
}

.price__title {
font-size: x-large;
color: #000;


}

.price__button {
background-color: #222222;
color: #ffffff;
padding: 0.5rem 6rem;

/* transition: box-shadow .4s; */

font-family: 'Poppins', sans-serif ;
font-weight: 700;

}


.price__button:hover {
background-color: #222222; /* Mantén el color de fondo igual */
color: #ffffff;           /* Mantén el color de texto igual */
box-shadow: none;         /* Evita sombras al pasar el mouse */
cursor: default;          /* Cambia el cursor si no quieres que sea interactivo */
}


.eryi {

font-size: 12px;
font-weight: 700;
font-family: 'Poppins', sans-serif ;

}

#divPegajoso {
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
padding: 10px;
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
z-index: 1000; /* Asegura que el elemento esté por encima de otros elementos */
display: none; /* Inicialmente oculto */
}


.group {
display: flex;
line-height: 28px;
align-items: center;
position: relative;
max-width: 350px;
}

.input {
width: 100%;
height: 40px;
line-height: 28px;
padding: 0 1rem;
padding-left: 2.5rem;
border: none;
font-weight: 200;
outline: none;
background-color: #f1f1f5;
color: #0d0c22;
transition: .3s ease;
}

.input::placeholder {
color: #222;
}

.input:focus, input:hover {
outline: none;
border-color: rgba(234,76,137,0.4);
background-color: #fff;
box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}

.icon {
position: absolute;
left: 1rem;
fill: #9e9ea7;
width: 1rem;
height: 1rem;
}

.price__button {
border-radius: 0;
}


.containerd {
position: relative;
z-index: 999; /* Este valor debe ser mayor que cualquier otro elemento que quieras que esté detrás */
}

.mensaje-agotado {
    padding: 20px;
    background-color: #f44336;
    color: white;
    font-size: 30px;
    border-radius: 10px;
}


.colores-container label {
display: inline-block;
margin-right: 10px; /* Espacio entre elementos */
}

.colores-container span {
cursor: pointer; /* Hace que el texto sea seleccionable como un input */
padding: 5px 10px; /* Añade un poco de espacio alrededor del texto */
border: 1px solid #222222; /* Añade un borde para que parezca un botón */
border-radius: 20px;


}


.colores-container span:hover {
background-color: #222222; /* Cambia el color de fondo cuando se hace clic en el texto */
color: white;
}


.colores-container span:active {
background-color: #222222; /* Cambia el color de fondo cuando se hace clic en el texto */
color: white;
}



/* Estilos para la rejilla de productos */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Columnas automáticas con ancho mínimo de 200px */
    gap: 3px; /* Espacio entre los productos */
    padding: 10px; /* Espaciado interior */
    background-color: #f5f5f5; /* Fondo gris */
}

 /* Estilos para cada producto */
 .producto {
    padding: 3px; /* Espaciado interior */
    background-color: #ffff; /* Fondo gris */
}




/* Estilos para la imagen del producto */
.producto-imagen {
    width: 100%; /* Ancho máximo de la imagen */
    height: auto; /* Altura automática según el ancho */
    border-radius: 0px; /* Bordes redondeados */
}

/* Estilos para el nombre del producto */
.producto-nombre {
    font-weight: 10px; /* Texto en negrita */
    margin-top: 10px; /* Margen superior */
    font-size: 10px; /* Tamaño de fuente del precio */
}

/* Estilos para el precio del producto */
.producto-precio {
    color: red; /* Color azul para el precio */
    font-size: 13px; /* Tamaño de fuente del precio */
    margin-top: 5px; /* Margen superior */
}

/* Media query para pantallas menores a 500px */
@media screen and (max-width: 500px) {
    .rejilla {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); /* Dos productos por fila */
    }
}