html, body {
        touch-action: manipulation;
    }
    
    
    
          * {
        text-decoration: none !important;
    }
    
            .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;
        
      }
      .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;
    }
    
    
    .kj {
        overflow-x: auto; /* Agrega scroll horizontal */
        overflow-y: hidden; /* Oculta el scroll vertical */
        white-space: nowrap; /* Evita que los elementos se envuelvan a la siguiente línea */
      
        height: 30px; /* Altura de la barra de navegación */
        width: 100%; /* Ancho total */
      }
    
      .kj .kj-item {
        display: inline-block; /* Permite que los elementos floten horizontalmente */
        color: #222;
        text-align: center;
        padding: 10px 10px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700; 
      }
    
      .kj .kj-item:hover {
        background-color: #ddd;
        color: #222;
      }
    
      .kj-item a {
      color: black;
      text-decoration: none; /* Opcional: elimina el subrayado del enlace */
    }
    
    .kj-item a:hover {
      color: black; /* Asegura que el color se mantenga negro incluso al pasar el mouse */
    }
    
    
      .contenedor {
                display: grid;
                grid-template-columns: repeat(4, auto); /* 4 columnas de tamaño automático */
                grid-template-rows: repeat(3, 1fr); /* 3 filas de tamaño flexible */
                gap: 10px; /* Espacio entre los elementos */
                padding: 10px; /* Padding del contenedor */
               
            }
    
            .item {
                display: flex;
                flex-direction: column;
                align-items: center; /* Centra los elementos horizontalmente */
                text-align: center; /* Alineación del texto al centro */
                overflow: hidden; /* Oculta cualquier contenido que sobresalga del contenedor */
            }
    
            .item img {
                border-radius: 50%; /* Hace que la imagen sea circular */
                width: 70px; /* Ancho de la imagen */
                height: 70px; /* Altura de la imagen */
                object-fit: cover; /* Ajusta la imagen para llenar el contenedor */
            }
    
            .item h3 {
                margin: 5px 0; /* Margen superior e inferior del título */
                font-size: 12px; /* Tamaño de fuente del título */
            }
    
    
    
    
    
            .fila {
                display: flex; /* Hace que los elementos estén en línea */
                justify-content: space-between; /* Distribuye los elementos horizontalmente */
                align-items: center; /* Centra verticalmente los elementos */
                padding: 10px; /* Espaciado interior */
             
               
                border-radius: 10px; /* Bordes redondeados */
            }
    
          
    
    
            .icono {
                text-align: center; /* Centra el texto horizontalmente */
                display: flex; /* Hace que los elementos estén en línea */
                flex-direction: column; /* Apila los elementos verticalmente */
                align-items: center; /* Centra verticalmente los elementos */
                background-color: #ddd; /* Fondo gris */
                padding: 5px; /* Espaciado interior */
                border-radius: 5px; /* Bordes redondeados */
              
            }
    
            .icono img {
                width: 23px; /* Ancho del icono */
                height: 23px; /* Altura del icono */
            }
    
            .texto {
                font-size: 8px; /* Tamaño de fuente del texto */
                margin-top: 2px; /* Margen superior */
                font-weight: 700; 
            }
    
    
    
    
    
    
    
            /* 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 */
                color: rgb(0, 0, 0); /* Color azul para el 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 */
                font-weight: 500;
            }
    
            /* 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 */
                }
            }
    
    
            #popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 999;
        text-align: center;
    }
    
    #popup img {
        max-width: 80%;
        max-height: 80%;
        margin: 70px auto 0; /* 50px de margen superior, centrado horizontalmente */
    }
    .cerrar {
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
        font-size: 20px;
        cursor: pointer;
    }
    
    .contenedor h3 {
        color: black;
    }
    
    .contenedor a:hover h3 {
        color: black;
    }