.category-card {
     height: 300px;
     /* altura fija, ajústala si quieres más grande */
 }

 .category-img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     /* recorta la imagen sin deformarla */
 }

 .overlay-bg {
     background: rgba(0, 0, 0, 0.4);
     /* oscurece la imagen */
 }

 .modal {
     z-index: 2000 !important;
 }

 .modal-backdrop {
     z-index: 1999 !important;
 }


 .star-rating .bi-star-fill {
     color: #ffc107;
 }

 header {
     position: sticky;
     top: 0;
     z-index: 50;
 }

 .star-rating .bi-star {
     color: #e4e5e9;
 }

 .range-container {
     position: relative;
     width: 100%;
 }

 .range-container input[type="range"] {
     position: absolute;
     left: 0;
     right: 0;
     top: 10px;
     pointer-events: none;
     -webkit-appearance: none;
     background: transparent;
 }

 .range-container input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     pointer-events: all;
     height: 16px;
     width: 16px;
     border-radius: 50%;
     background: #ed3839;
     cursor: pointer;
     position: relative;
     z-index: 3;
 }

 .range-container input[type="range"]::-webkit-slider-runnable-track {
     height: 8px;
     background: transparent;
 }

 .range-track {
     position: absolute;
     top: 15px;
     left: 0;
     right: 0;
     height: 8px;
     border-radius: 5px;
     background: #ddd;
     z-index: 1;
 }

 .range-progress {
     position: absolute;
     top: 15px;
     height: 8px;
     border-radius: 5px;
     background: #ed3839;
     z-index: 2;
 }

 /* Hace que el botón de agregar al carrito esté siempre abajo */
 .card.h-100 {
     display: flex;
     flex-direction: column;
 }

 .card-body {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
 }

 .card-body .btn-primary {
     margin-top: auto;
 }

 /* Responsive adjustments */
 @media (max-width: 991.98px) {
     .navbar .ms-auto {
         flex-direction: column;
         gap: 0.5rem !important;
     }

     .navbar-brand img {
         height: 60px;
     }
 }

 @media (max-width: 767.98px) {
     aside.col-md-3 {
         order: 2;
         margin-bottom: 1rem;
     }

     main.col-md-9 {
         order: 1;
     }

     .navbar .ms-auto {
         flex-direction: column;
         gap: 0.5rem !important;
     }

     .navbar-brand img {
         height: 50px;
     }

     .carousel-inner img {
         height: 180px;
         object-fit: cover;
     }

     .card-title {
         font-size: 1rem;
     }

     .star-rating {
         font-size: 1.1rem !important;
     }

     .range-container {
         height: 36px !important;
     }
 }

 @media (max-width: 575.98px) {
     .navbar-brand img {
         height: 40px;
     }

     .carousel-inner img {
         height: 120px;
     }

     .card-title {
         font-size: 0.95rem;
     }

     .star-rating {
         font-size: 1rem !important;
     }

     .range-container {
         height: 32px !important;
     }

     .card-body {
         padding: 0.75rem;
     }
 }

 .category-card .overlay-bg {
     background: rgba(33, 37, 41, 0.75);
     opacity: 0;
     transition: opacity 0.3s;
     z-index: 1;
 }

 .category-card .overlay-content {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.3s, transform 0.3s;
     z-index: 2;
 }

 .category-card:hover .overlay-bg,
 .category-card:focus-within .overlay-bg {
     opacity: 1;
 }

 .category-card:hover .overlay-content,
 .category-card:focus-within .overlay-content {
     opacity: 1;
     transform: translateY(0);
 }

 .category-card .overlay-content h4,
 .category-card .overlay-content p {
     margin-bottom: 0.5rem;
 }

 .btn-transparent {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }

 .favorite-btn .bi-heart-fill,
 .favorite-btn.active .bi-heart {
     color: #ed3839 !important;
 }

 .share-btn .bi-whatsapp {
     color: #25d366 !important;
 }

 /* Nuestras marcas */

 .gallery {
     background: #f8f9fa;
 }

 .gallery-cell {
     width: 200px;
     
     margin-right: 10px;
 }

 .gallery-cell img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }


/* Estilos para body */
.content-wrapper>.content{
    background-color: #004A98;
}