@media (max-width: 768px) {
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    .logo {
        position: static;
        transform: none;
        max-width: 100px;
        margin-left: 10px;
    }

    /* Oculta LA BÚSQUEDA Y EL MENÚ PRINCIPAL (FUERA DEL OFFCANVAS) en la vista móvil */
    .nav-right .search-container,
    /* Apunta al buscador que está en la parte derecha del header */
    .d-md-block nav ul {
        /* Apunta a la navegación principal que se oculta en móvil */
        display: none !important;
    }

    .offcanvas-menu .search-container {
        display: flex;
        /* o block, dependiendo de cómo quieras que se comporte */
        flex-direction: column;
        /* o row, si lo prefieres horizontal */
        gap: 10px;
        margin-bottom: 20px;
    }

    #offcanvasMobileNav .offcanvas-body .offcanvas-nav .search-container {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 20px;
        align-items: center;
    }

    #offcanvasMobileNav .offcanvas-body .offcanvas-nav .search-container input[type="text"] {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #7c9885;
        border-radius: 5px;
        color: #333;
    }

    #offcanvasMobileNav .offcanvas-body .offcanvas-nav .search-container button {
        background-color: #7c9885;
        color: #fff;
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #offcanvasMobileNav .offcanvas-body .offcanvas-nav .search-container button:hover {
        background-color: #a5bf9b;
    }


    /* Botón del menú hamburguesa */
    .menu-toggle-offcanvas {
        display: block !important;
        background: none;
        border: none;
        font-size: 1rem;
        color: #fedc97;
    }

    /* Estilo del menú lateral (Offcanvas) */
    .offcanvas-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100%;
        /* Mantenemos un color de fondo similar al header */
        background-color: #28666e;
        padding: 20px;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        gap: 20px;
        z-index: 2000;
    }

    .offcanvas-menu.active {
        transform: translateX(0);
    }

    .offcanvas-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .offcanvas-title {
        color: #fedc97;
        /* Color del título similar al header */
        font-size: 1.5em;
        margin: 0;
    }

    .offcanvas-close {
        font-size: 1.5rem;
        color: #333;
        /* Color del botón de cierre similar al header */
        background: none;
        border: none;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }

    .offcanvas-close:hover {
        opacity: 1;
    }

    .offcanvas-menu .search-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        /* Espacio debajo del buscador */
    }

    .offcanvas-menu .search-container input[type="text"] {
        padding: 10px;
        border: 1px solid #7c9885;
        /* Un borde sutil */
        border-radius: 5px;
        color: #333;
    }

    .offcanvas-menu .search-container button {
        background-color: #7c9885;
        /* Un color secundario */
        color: #fff;
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .offcanvas-menu .search-container button:hover {
        background-color: #a5bf9b;
        /* Un tono más claro al pasar el ratón */
    }

    .offcanvas-menu nav ul {
        flex-direction: column;
        display: flex;
        gap: 15px;
        /* Más espacio entre los elementos del menú principal */
        padding: 0;
        list-style: none;
    }

    .offcanvas-menu nav ul li {
        margin: 0;
    }

    .offcanvas-menu nav ul li a {
        font-size: 1.1em;
        color: #fedc97;
        /* Mantenemos el color dorado */
        text-decoration: none;
        padding: 10px 15px;
        display: block;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    #offcanvasMobileNav .offcanvas-body .offcanvas-nav ul li a {
        color: #fedc97;
        text-decoration: none;
        /* Quita el subrayado de los enlaces */
        background-color: #28666e;
        padding: 2%;
        margin: 2%;
        display: block;
        /* Para que el padding y margin afecten todo el ancho */
    }

    /* Estilo para el hover de los enlaces */
    #offcanvasMobileNav .offcanvas-body .offcanvas-nav ul li a:hover {
        background-color: #7c9885;
        /* Cambia el color de fondo al pasar el ratón */
        color: #ffffff;
        /* Cambia el color del texto al pasar el ratón (opcional) */
        /* Puedes agregar más efectos aquí, como sombras, transiciones, etc. */
    }


    .offcanvas-menu nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        /* Un ligero fondo al pasar el ratón */
        color: #ffffff;
        /* Texto blanco al pasar el ratón */
    }

    .offcanvas-menu nav ul li ul {
        display: none;
        padding-left: 20px;
        margin-top: 10px;
        list-style: none;
    }

    .offcanvas-menu nav ul li.show-submenu>ul {
        display: block;
    }

    .offcanvas-menu nav ul li ul li a {
        font-size: 1em;
        color: #fedc97;
        text-decoration: none;
        padding: 8px 10px;
        display: block;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .offcanvas-menu nav ul li ul li a:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .offcanvas-menu nav ul li i {
        margin-right: 8px;
        /* Espacio para los iconos */
    }

    /* Mas vendidos */
    .top-products {
        overflow-x: auto;
        padding-bottom: 15px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .top-products::-webkit-scrollbar {
        display: none;
    }

    .top-products h2 {
        padding-left: 10px;
    }

    .top-products .top-card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 10px;
        width: max-content;
    }

    .top-products .top-card {
        width: 80%;
        min-width: 250px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        text-align: center;
        background-color: #fff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .top-products .top-card img {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px;
    }

    .top-products .top-card h3 {
        font-size: 1.2em;
        margin: 10px 0;
    }

    .top-products .top-card p {
        font-size: 0.9em;
        color: #555;
        margin: 0 10px 10px;
        text-align: justify;
    }

    .top-products .top-card .top-card-button {
        margin-top: 10px;
    }

    .top-products .top-card .top-card-button a {
        display: inline-block;
        text-decoration: none;
        background-color: #007bff;
        color: white;
        padding: 8px 12px;
        border-radius: 5px;
        font-weight: bold;
    }

    .top-products .top-card .top-card-button a:hover {
        background-color: #0056b3;
    }

    /* Productos */
    .card2 {
        /* ... otros estilos de .card2 ... */
        display: flex;
        /* Usaremos Flexbox para controlar el flujo interno */
        flex-direction: column;
        /* Colocamos los elementos (imagen y contenido) en columna */
        align-items: center;
        /* Opcional: Centrar horizontalmente el contenido */
        text-align: center;
        /* Opcional: Centrar el texto dentro de la tarjeta */
        padding: 10px;
        width: 100%;
    }

    .card2 img {
        width: 100%;
        /* La imagen ocupa todo el ancho de la tarjeta */
        height: auto;
        /* Mantiene la proporción */
        border-radius: 8px 8px 0 0;
        /* Redondeo solo en la parte superior */
        margin-bottom: 10px;
        /* Espacio entre la imagen y el contenido */
    }

    .card2 .card-content {
        width: 100%;
        /* El contenedor de contenido ocupa todo el ancho */
        padding: 15px;
        /* Añade un poco de espacio alrededor del texto */
        box-sizing: border-box;
        /* Asegura que el padding no aumente el ancho */
    }

    .card2 .card-content h1 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #234d50;
        text-align: center;
    }

    .card2 .card-content h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
        color: #28666e;
        text-align: center;
        /* Centrar el nombre del producto */
    }

    .card2 .card-content p {
        font-size: 0.9em;
        margin-bottom: 10px;
        color: #555;
        text-align: left;
        /* Alinear la descripción a la izquierda para mejor lectura */
        -webkit-line-clamp: 3;
    }

    .card2 .card-content .price {
        font-size: 1em;
        margin-bottom: 15px;
        text-align: center;
        /* Centrar el precio */
    }

    .card2 .card-content .add-to-cart {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        /* Los botones se estiran para ocupar el ancho */
    }

    .card2 .card-content .buy-btn,
    .card2 .card-content .add-to-cart-btn {
        background-color: #28666e;
        color: #fedc97;
        border: none;
        border-radius: 5px;
        padding: 8px 15px;
        cursor: pointer;
        font-size: 0.9em;
        text-decoration: none;
        text-align: center;
        display: block;
        /* Ocupar todo el ancho */
    }

    .card2 .card-content .buy-btn:hover,
    .card2 .card-content .add-to-cart-btn:hover {
        background-color: #7c9885;
    }

    .card2 .card-content .shipping-info {
        font-size: 0.8em;
        color: #777;
        margin-top: 10px;
        text-align: center;
        /* Centrar la información de envío */
    }

    /* Ver mas */

    .card-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 15px;
        /* Espacio entre los elementos hijos si los hubiera */
    }

    /* Estilos para la tarjeta de producto en móvil */
    .product-card {
        display: flex;
        flex-direction: column;
        /* Apila el contenido verticalmente */
        width: 100%;
        /* Ocupa todo el ancho del contenedor */
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    /* Estilos para el layout interno (imagen y texto) en móvil */
    .product-layout {
        display: flex;
        flex-direction: column;
        /* Apila imagen y la info una encima de la otra */
        gap: 15px;
    }

    /* Estilos para la imagen del producto en móvil */
    .product-image {
        width: 100%;
        /* La imagen ocupa todo el ancho disponible */
        margin-bottom: 10px;
        /* Espacio entre la imagen y el texto */
    }

    .product-image #carouselExampleAutoplaying {
        width: 100% !important;
        height: auto !important;
        /* La altura se ajusta automáticamente */
        margin: 0 auto 10px;
        /* Centra y añade espacio inferior */
        border-radius: 6px;
        overflow: hidden;
    }

    .product-image .carousel-inner {
        height: auto !important;
    }

    .product-image .carousel-item {
        height: auto !important;
    }

    .product-image .carousel-item img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        /* Asegura que la imagen se ajuste sin recortar */
        max-height: 300px;
        /* O ajusta este valor según necesites */
        border-radius: 6px;
    }

    /* Estilos para la información del producto en móvil */
    .product-info {
        width: 100%;
        /* Ocupa todo el ancho */
        padding: 0;
        /* Elimina el padding que podría tener en escritorio */
    }

    .product-info h1 {
        font-size: 2em;
        text-align: center;
        /* Centra el título */
        margin-bottom: 10px;
    }

    .product-info .product-id p,
    .product-info .product-description p,
    .product-info .product-price p,
    .product-info .product-stock p,
    .product-info .product-category p {
        font-size: 1em;
        line-height: 1.4;
        margin-bottom: 8px;
        text-align: left;
        /* Asegura la alineación a la izquierda del texto */
    }

    /* Estilos para la tabla de medidas en móvil */
    .product-info h3+.table {
        /* Aplica estilos a la tabla que sigue al h3 de medidas */
        font-size: 0.9em;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .product-info .table th,
    .product-info .table td {
        padding: 6px;
        font-size: 0.85em;
        text-align: left;
    }

    /* Estilos para las opciones de color en móvil */
    .product-info .color-options {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .product-info .color-options h3 {
        font-size: 1.1em;
        margin-bottom: 8px;
    }

    .product-info .color-palette {
        display: flex;
        flex-wrap: wrap;
        /* Permite que los colores pasen a la siguiente línea si no caben */
        gap: 8px;
        align-items: center;
    }

    .product-info .color-box {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }

    .product-info #selected-color-name {
        font-size: 0.9em;
        margin-top: 8px;
    }

    /* Estilos para el botón de agregar al carrito en móvil */
    .product-info .add-to-cart-btn {
        width: 100%;
        padding: 10px 15px;
        font-size: 1em;
        border-radius: 5px;
        margin-top: 15px;
    }

    /* Estilos para la información de envío en móvil */
    .product-info .shipping-info {
        font-size: 0.9em;
        margin-top: 15px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .product-info .shipping-info i {
        font-size: 1.2em;
        margin-right: 5px;
    }

    /* Estilos para el contenedor de cantidad en móvil */
    .product-info .quantity-input-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .product-info .quantity-label {
        font-size: 1em;
    }

    .product-info .quantity-input {
        width: 50px;
        padding: 6px;
        font-size: 1em;
    }

    /* Carrito */
    /* Estilos base para pantallas pequeñas (móvil) */
    .cart-container {
        flex-direction: column;
        /* Apilar los productos y el resumen */
        margin: 10px;
        color: black;
    }

    .cart-products {
        width: 100%;
        /* Ocupar todo el ancho */
        margin-bottom: 20px;
        /* Espacio entre productos y resumen */
    }

    .cart-summary {
        width: 100%;
        /* Ocupar todo el ancho */
        padding: 15px;
    }

    .cart-card {
        flex-direction: column;
        /* Apilar la imagen y el contenido */
        margin-bottom: 15px;
        padding: 15px;
    }

    .cart-card img {
        width: 100%;
        /* La imagen ocupa todo el ancho del contenedor */
        height: auto;
        /* Mantiene la proporción */
        margin-right: 0;
        /* Eliminar el margen a la derecha */
        margin-bottom: 10px;
        /* Espacio entre la imagen y el texto */
    }

    .cart-card-actions {
        flex-direction: column;
        /* Apilar los botones y la cantidad */
        align-items: flex-start;
        /* Alinear a la izquierda */
    }

    .cart-card-actions button {
        margin: 5px 0;
        /* Espacio vertical entre botones */
        width: 100%;
        /* Los botones ocupan todo el ancho */
    }

    .cart-card-actions p {
        margin-top: 10px;
        /* Espacio para la etiqueta de cantidad */
    }

    .cart-card-actions input[type="number"] {
        width: 70px;
        /* Un ancho más pequeño para la cantidad */
        margin-left: 0;
        /* Eliminar margen izquierdo */
    }

    
}