/* Media query para tabletas y dispositivos móviles */

/* Responsive para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .horizontal-product-item {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .horizontal-product-img {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .horizontal-product-info {
        padding-left: 0;
        text-align: center;
    }

    .product-title {
        font-size: 1.5rem;
    }

    .product-price.mt-2.horizontal {
        position: static;
        font-size: 18px;
        margin-top: 10px;
    }

    .favorite-btn {
        position: static;
        margin-bottom: 15px;
    }

    /* Botones en línea en pantallas móviles */
    .d-flex.mt-3.botones-category {
        position: static;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}

/* Responsive para pantallas medianas (tablets) */
@media (max-width: 1024px) {
    .horizontal-product-item {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }

    .horizontal-product-img {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .horizontal-product-info {
        padding-left: 0;
        text-align: center;
    }

    .product-title {
        font-size: 1.5rem;
    }

    .product-price.mt-2.horizontal {
        position: static;
        font-size: 20px;
        margin-top: 10px;
    }

    .favorite-btn {
        position: static;
        margin-bottom: 15px;
    }

    .d-flex.mt-3.botones-category {
        position: static;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}

@media (max-width: 1200px) {
    span#dropdownMenuButton {
        margin-top: 15px;
        /* Otros estilos para tabletas y dispositivos móviles */
    }
    .cont-home {
        padding-top: 30px;
    }
    span#cart-count {
        left: 11% !important;
        top: 30px !important;
    }
    img.logo-denominacion {
        top: -115px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -110px !important;
    }
}

@media (max-width: 1180px) {
    span#cart-count {
        left: 4% !important;
        top: 30px !important;
    }
    img.logo-denominacion {
        top: -130px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -80px !important;
    }
}

@media (max-width: 1024px) {
    span#cart-count {
        left: 4% !important;
        top: 30px !important;
    }
    img.logo-denominacion {
        top: -130px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -80px !important;
    }
}

@media (max-width: 996px) {
    span#cart-count {
        left: 5.5% !important;
        top: 30px !important;
    }
    img.logo-denominacion {
        top: -160px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -91px !important;
    }
}

@media (max-width: 767px) {
    span#cart-count {
        left: 11% !important;
        top: 30px !important;
    }
    img.logo-denominacion {
        top: -120px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -80px !important;
    }
}
@media (max-width: 540px) {
    span#cart-count {
        left: 8% !important;
        top: 30px !important;
    }
    img.logo-denominacion {
        top: -275px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -132px !important;
    }
}

@media (max-width: 391px) {
    span#cart-count {
        left: 6% !important;
        top: 15px !important;
        width: 19px;
    }
    img.logo-denominacion {
        top: -245px;
    }
    span.title-cat.carusel-name-denominacion {
        top: -125px !important;
    }
}

/* =======  FIX BUSCADOR EN MÓVIL  ======= */
@media (max-width: 991.98px) {
    /* navbar colapsado (Bootstrap lg-) */
    #mainNavbar {
        padding: 0.25rem 0;
    } /* algo de aire dentro del off-canvas */

    /* formulario mostrado dentro del menú desplegado */
    #searchFormMobile,
    #searchForm {
        /* por si tenías solo uno */
        flex-wrap: nowrap;
        width: 100%;
        max-width: none; /* quita el límite de 600 px */
        margin: 0.5rem 0 1rem; /* centrado vertical dentro del menú */
    }

    #searchFormMobile .form-control,
    #searchForm .form-control {
        flex: 1 1 auto; /* que el input se estire */
        min-width: 0; /* evita desbordes */
    }

    #searchFormMobile .search,
    #searchForm .search {
        /* botón */
        flex: 0 0 90px; /* ancho fijo cómodo en móvil */
        margin-right: 0; /* quita márgenes laterales */
    }

    /* lista de sugerencias debajo del input */
    #searchFormMobile .autocomplete,
    #searchForm .autocomplete {
        left: 0;
        width: 100%;
        max-width: none;
    }
}
/* =======  FIN FIX  ======= */
/* ================================ */
/*  AJUSTES EXTRA (< 992 px)        */
/* ================================ */
@media (max-width: 991.98px) {
    /* 1. Oculta totalmente la franja superior  */
    .header-superior {
        display: none;
    }

    /* 2. Logo y hamburguesa en la misma fila   */
    .navbar-brand {
        margin-right: auto;
    }

    .navbar-toggler {
        border: none; /* quita marco blanco   */
        box-shadow: none;
        padding: 0.25rem 0.5rem;
        color: #fff;
        font-size: 1.6rem;
    }

    /* 3. Buscador debajo del logo (100 %)       */
    #searchForm {
        width: 100%;
        max-width: none;
        margin: 0.5rem 0 1rem;
        flex-wrap: nowrap;
    }
    #searchForm .form-control {
        flex: 1 1 auto;
        min-width: 0;
    }
    #searchForm .search {
        flex: 0 0 90px;
        margin-right: 0;
    }
    #searchForm .autocomplete {
        left: 0;
        width: 100%;
        max-width: none;
    }

    /* 4. Oculta la “sección inferior” en móvil
         (deja sólo el menú hamburguesa)        */
    .header-inferior {
        display: none;
    }
}

/* ================================ */
/*  AJUSTE TABLET (992-1199 px)     */
/* ================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #searchForm {
        max-width: 450px;
    }
}

/* ===== Mobile fine-tuning (máx-width 575px) ===== */
@media (max-width: 575.98px) {
    .header-mobile {
        background: #000a29;
    }

    .header-mobile .top-strip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 8px;
    }

    /* reloj + bandera */
    .header-mobile .hour-text {
        font-size: 13px;
        font-weight: 500;
    }

    .header-mobile img[alt="flag"] {
        width: 18px !important;
        height: 15px !important;
        margin-right: 4px;
    }

    /* buscador */
    #searchFormMobile {
        margin: 8px 0;
    }
    #searchFormMobile input {
        height: 38px;
        padding-left: 14px;
        border-radius: 8px 0 0 8px;
        font-size: 14px;
    }
    #searchFormMobile .search {
        height: 38px;
        border-radius: 0 8px 8px 0;
        padding: 0 14px;
        font-size: 14px;
    }

    /* bloque iconos debajo */
    .header-mobile .bottom-icons {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 0 10px;
    }
    .header-mobile .bottom-icons a,
    .header-mobile .bottom-icons button {
        position: relative;
        color: #fff;
    }
    .header-mobile .bottom-icons .badge {
        position: absolute;
        top: -6px;
        right: -10px;
        font-size: 0.55rem;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
    }
    .header-mobile .idioma-btn {
        padding: 4px 14px;
        border-radius: 24px;
    }

    /* logo */
    .header-mobile .navbar-brand img {
        max-height: 48px;
    }
}
/* Smartphones ≤575 px */
@media (max-width: 575px) {
    .flag-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* barra de búsqueda móvil, idéntica al estilo desktop */
    #searchForm {
        margin: 15px 0;
        display: flex;
        align-items: center;
        border: 1px solid #fff;
        border-radius: 19.5px;
        overflow: hidden;
        height: 40px;
        width: 100%;
        max-width: 100%;
    }
    #searchForm .form-control {
        flex: 1;
        border: none;
        background: transparent;
        color: #fff;
        padding: 0 12px;
        font-family: Inter, sans-serif;
        font-size: 14px;
        line-height: 14px;
    }
    #searchForm .form-control::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }
    #searchForm .search {
        flex: 0 0 auto;
        width: 98px;
        height: 100%;
        background: #ffc700;
        border: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: Inter, sans-serif;
        font-weight: 700;
        font-size: 12p;
    }
}

/* ------------ BUSCADOR MÓVIL ------------ */
#searchFormMobile .form-control {
    color: #000; /* texto negro mientras se escribe   */
}

#searchFormMobile .form-control::placeholder {
    color: #888; /* placeholder gris                  */
}

/* oscurecer el fondo cuando aparece la lista */
.search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* sombra */
    z-index: 1999; /* justo debajo del .autocomplete (2000) */
    display: none;
}
/* ---------- BACKDROP (ambos buscadores) ---------- */
.search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1999; /* justo debajo del .autocomplete (2000) */
    display: none;
}

/* ---------- SOLO móvil: texto negro en el input ---------- */
#searchFormMobile .form-control {
    color: #000;
}
#searchFormMobile .form-control::placeholder {
    color: #888;
}
/* Asegura que el menú de idioma quede pegado al botón */
.header-mobile .idioma-btn {
    position: relative;
} /* punto de referencia */
.header-mobile .idioma-dropdown {
    left: 50% !important; /* centra bajo el botón  */
    transform: translateX(-50%) !important;
    margin-top: 6px;
    min-width: 150px;
}

/* ===========================================
   1) PUNTO DE RÚPTURA PARA TABLET (≤ 992px)
   =========================================== */
@media (max-width: 991.98px) {
    /* 1.1) Ocultar miniaturas (col-md-2) */
    .col-md-2 {
        display: none !important;
    }
    /* 1.2) Forzar a que la galería (col-md-10) ocupe 100% de ancho */
    .col-md-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 1.3) Asegurar que el carrusel llene el ancho disponible */
    #product-gallery {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    /* 1.4) Eliminar botones prev/next en el carrusel (si no deseas verlos) */
    .custom-control-prev,
    .custom-control-next {
        display: none !important;
    }
    /* 1.5) Hacer que la columna derecha (vertical-line-container) baje debajo
         de la “central” y ocupe 100% */
    .vertical-line-container {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 2rem !important; /* separación con la parte de en medio */
    }
}

/* ======================================================
   2) PUNTO DE RÚPTURA PARA TABLET MÁS PEQUEÑAS (≤ 768px)
   ====================================================== */
@media (max-width: 767.98px) {
    /* 2.1) Apilar todos los elementos de .row en columna */
    .row {
        display: flex;
        flex-direction: column;
    }

    /* 2.2) Asegurar que las columnas centrales y derecha ocupen 100% */
    .col-md-10,
    .vertical-line-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2.3) Ajustes para el “product-detail-card” (contenedor blanco) */
    .product-detail-card {
        padding: 1rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .product-detail-card .pd-title {
        font-size: 1.25rem; /* 20px */
        text-align: center;
    }
    .product-detail-card .pd-badges {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .product-detail-card .pd-price-section {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    .product-detail-card .pd-price-section .pd-price-val {
        font-size: 1.5rem; /* 24px */
    }
    .product-detail-card .pd-qty-controls {
        justify-content: center;
    }
    .product-detail-card .pd-qty-btn {
        width: 28px;
        height: 28px;
    }
    .product-detail-card .pd-qty-number {
        font-size: 1rem;
    }
    .product-detail-card .pd-text-muted {
        text-align: center;
    }
    .product-detail-card .pd-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .product-detail-card .btn-pd-cart,
    .product-detail-card .btn-warning {
        flex: 1 1 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    /* 2.4) Ajustes para la columna de la derecha (vertical-line-container) */
    .vertical-line-container {
        padding: 0 !important;
        margin-top: 1.5rem !important;
    }
    .vertical-line-container h5 {
        font-size: 0.9375rem; /* 15px */
        margin-bottom: 0.5rem;
    }
    .vertical-line-container .product-descriptors {
        font-size: 0.875rem; /* 14px */
        line-height: 1.4;
    }
    .tag {
        font-size: 0.75rem; /* 12px */
        padding: 0.25rem 0.4rem;
        margin-bottom: 0.4rem;
    }
    .producer-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .producer-logo {
        margin-left: 0;
        margin-top: 1rem;
        width: 56px;
        height: 56px;
    }
    .certificate-grid-product-details {
        gap: 0.5rem;
        justify-content: center;
    }
    .certificate-grid-product-details img {
        width: 64px;
        height: 64px;
    }
    .btn-doc {
        width: 100%;
        margin-bottom: 0.5rem;
        font-size: 0.8125rem; /* 13px */
        padding: 0.4rem 0.8rem;
    }
}

/* ========================================================
   3) PUNTO DE RÚPTURA PARA MÓVILES PEQUEÑOS (≤ 576px)
   ======================================================== */
@media (max-width: 575.98px) {
    /* 3.1) Reducir padding general de la tarjeta central */
    .product-detail-card {
        padding: 0.75rem !important;
    }
    /* 3.2) Ocultar ícono de favorito para ganar espacio */
    .product-detail-card .favorite-btn {
        display: none !important;
    }
    /* 3.3) Ajustar tamaños de texto y controles */
    .product-detail-card .pd-title {
        font-size: 1.125rem; /* 18px */
    }
    .product-detail-card .pd-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem; /* 12px */
    }
    .product-detail-card .pd-select {
        padding: 0.4rem 0.6rem;
    }
    .product-detail-card .pd-qty-btn {
        width: 24px;
        height: 24px;
        font-size: 0.875rem; /* 14px */
    }
    .product-detail-card .btn-pd-cart,
    .product-detail-card .btn-warning {
        font-size: 0.8125rem; /* 13px */
        padding: 0.4rem 0.8rem;
    }

    /* 3.4) Ajustes finales para la columna derecha */
    .vertical-line-container {
        padding: 0 !important;
        margin-top: 1rem !important;
    }
    .vertical-line-container h5 {
        font-size: 0.875rem; /* 14px */
        margin-bottom: 0.4rem;
    }
    .vertical-line-container .product-descriptors {
        font-size: 0.8125rem; /* 13px */
    }
    .tag {
        font-size: 0.6875rem; /* 11px */
        padding: 0.2rem 0.35rem;
        margin-bottom: 0.3rem;
    }
    .producer-info {
        padding: 0.5rem;
    }
    .producer-details h5 {
        font-size: 0.875rem;
    }
    .producer-details p {
        font-size: 0.8125rem;
    }
    .view-producer-info-link {
        font-size: 0.75rem;
    }
    .producer-logo {
        width: 48px;
        height: 48px;
    }
    .certificate-grid-product-details {
        gap: 0.4rem;
    }
    .certificate-grid-product-details img {
        width: 56px;
        height: 56px;
    }
    .btn-doc {
        font-size: 0.75rem; /* 12px */
        padding: 0.3rem 0.6rem;
    }
}

/* ==============================
   Responsive para Cart Item Card
   ============================== */

/* 1) En tabletas y móviles grandes (≤ 992px) */
@media (max-width: 992px) {
    .cart-item-card {
        padding: 1rem;
    }

    /* Oculta el icono de papelera flotante (si quieres) o ajústalo */
    .cart-item-card .delete-btn {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        font-size: 1.25rem;
        /* Asegúrate de que se superponga correctamente */
    }

    /* Oculta los encabezados en la vista de columna */
    .cart-item-card .header-row {
        display: none;
    }

    /* Ajusta la fila principal para que ya no sea flex de columnas */
    .cart-item-card .row.mt-4 {
        flex-direction: column;
    }

    /* Columna de imagen: ocupa 100% y centrada */
    .cart-item-card .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
        text-align: center;
        margin-bottom: 1rem;
    }
    .cart-item-card .col-md-2 img {
        max-width: 60%;
        height: auto;
    }

    /* Columna de datos: ocupa 100% */
    .cart-item-card .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Cada “col” dentro de valores se convierte en bloque completo */
    .cart-item-card .col-md-10 .row.align-items-center {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Genera un label delante de cada valor usando pseudoálamos */
    .cart-item-card .row.align-items-center > .col:nth-child(1) {
        width: 100%;
    }
    .cart-item-card .row.align-items-center > .col:nth-child(1)::before {
        content: "Product:";
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: #4b5563;
        font-size: 0.875rem;
    }

    .cart-item-card .row.align-items-center > .col:nth-child(2) {
        width: 100%;
    }
    .cart-item-card .row.align-items-center > .col:nth-child(2)::before {
        content: "Pallet Information:";
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: #4b5563;
        font-size: 0.875rem;
    }

    .cart-item-card .row.align-items-center > .col:nth-child(3) {
        width: 100%;
    }
    .cart-item-card .row.align-items-center > .col:nth-child(3)::before {
        content: "Tariff code:";
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: #4b5563;
        font-size: 0.875rem;
    }

    .cart-item-card .row.align-items-center > .col:nth-child(4) {
        width: 100%;
    }
    .cart-item-card .row.align-items-center > .col:nth-child(4)::before {
        content: "Quantity:";
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: #4b5563;
        font-size: 0.875rem;
    }

    .cart-item-card .row.align-items-center > .col:nth-child(5) {
        width: 100%;
        text-align: left;
    }
    .cart-item-card .row.align-items-center > .col:nth-child(5)::before {
        content: "Pallet Total:";
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: #4b5563;
        font-size: 0.875rem;
    }

    /* Ajustes específicos para los controles de cantidad */
    .cart-item-card .qty-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .cart-item-card .qty-btn {
        width: 28px;
        height: 28px;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        background: #ffffff;
        color: #6b7280;
    }
    .cart-item-card .qty-btn:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #374151;
    }
    .cart-item-card .qty-value {
        font-size: 1rem;
        font-weight: 500;
        min-width: 1.5rem;
        text-align: center;
    }

    /* Asegura que la línea divisoria no se vea extraña */
    .cart-item-card .divider {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

/* ==============================
   Mobile pequeño (≤ 576px)
   ============================== */
@media (max-width: 575.98px) {
    .cart-item-card {
        padding: 0.75rem;
    }

    /* Reduce aún más el tamaño de la imagen */
    .cart-item-card .col-md-2 img {
        max-width: 50%;
    }

    /* Los rótulos quedan más compactos */
    .cart-item-card .row.align-items-center > .col:nth-child(1)::before {
        font-size: 0.8125rem;
    }
    .cart-item-card .row.align-items-center > .col:nth-child(2)::before,
    .cart-item-card .row.align-items-center > .col:nth-child(3)::before,
    .cart-item-card .row.align-items-center > .col:nth-child(4)::before,
    .cart-item-card .row.align-items-center > .col:nth-child(5)::before {
        font-size: 0.8125rem;
    }

    /* Ajusta los botones de cantidad para pantallas muy pequeñas */
    .cart-item-card .qty-btn {
        width: 24px;
        height: 24px;
        font-size: 0.875rem;
    }
    .cart-item-card .qty-value {
        font-size: 0.875rem;
    }

    /* Texto del total en móvil */
    .cart-item-card .pallet-total {
        font-size: 1rem;
        font-weight: 600;
    }

    /* Elimina márgenes extras de los bloques */
    .cart-item-card .row.mt-4 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .cart-item-card .divider {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
}
/* ==============================
   Corrección de padding para Cart Item Card
   ============================== */

/* Para tabletas y móviles grandes (≤ 992px) */
@media (max-width: 992px) {
    /* Aumenta el padding general del contenido */
    .cart-item-card {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Además, añade un pequeño padding extra a la “columna” de datos */
    .cart-item-card .col-md-10 {
        padding-left: 0.75rem;
    }

    /* Y agrega separación interna a cada bloque vertical (col) */
    .cart-item-card .row.align-items-center > .col {
        padding-left: 1.75rem;
    }
}

/* Para móviles pequeños (≤ 576px) */
@media (max-width: 575.98px) {
    /* Aún más padding general en pantallas muy estrechas */
    .cart-item-card {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Refina el padding de cada valor */
    .cart-item-card .row.align-items-center > .col {
        padding-left: 1.75rem;
    }
}

/* ───────── MOBILE PORTRAIT (≤ 575 px) ───────── */
@media (max-width: 575.98px) {
    /* la fila no debe tener márgenes negativos de Bootstrap                */
    .most-wanted-product .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* cada columna ocupa el 100 % (una sola tarjeta por fila)              */
    .most-wanted-product .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 1rem 1.25rem; /* espacio lateral + gap inferior        */
    }

    /* la tarjeta se estira al ancho disponible y gana aire interior        */
    .product-card {
        width: 100%;
        padding: 1.2rem 1rem;
        border-radius: 1rem;
    }

    /* imagen centrada y contenida                                          */
    .product-card .product-img {
        width: 100%;
        max-height: 160px;
        object-fit: contain;
        margin: 0 auto 0.8rem;
    }

    /* botones de presentación envueltos y más pequeños                     */
    .btn-group-toggle {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .btn-home-bange {
        font-size: 0.78rem;
        padding: 0.35rem 0.7rem;
    }

    /* selector de gramos / ml en dos columnas                              */
    .presentation .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0.25rem;
    }

    /* tipografías algo más pequeñas                                        */
    .product-title {
        font-size: 1.05rem;
        margin-top: 0.8rem;
    }
    .product-description {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    .price-content {
        font-size: 1.1rem;
    }
    .text-muted {
        font-size: 0.78rem;
    }

    /* botón favorito + compra → ocupan toda la fila si es necesario        */
    .product-card .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .favorite-btn,
    .forklift-btn,
    .buy-now-btn {
        flex: 1 1 100%;
        padding: 0.55rem 0.6rem;
        font-size: 0.83rem;
    }
    .favorite-btn {
        max-width: 48px;
    }
    /* ───── Pulimos zona de botones ───── */
    .product-card .d-flex.justify-content-between {
        flex-wrap: nowrap; /* los dos primeros en la misma fila   */
        align-items: center;
        column-gap: 0.5rem;
    }

    /* botón “corazón” fijo – nunca se estira                             */
    .favorite-btn {
        flex: 0 0 42px; /* ancho ≈ alto para quedar cuadrado    */
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        padding: 0;
    }

    /* botón “Add to Forklift” ocupa el resto                             */
    .forklift-btn {
        flex: 1 1 auto; /* llena el espacio sobrante           */
        min-width: 0; /* evita un ancho mínimo forzado       */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.35rem; /* espacio entre ícono y texto si lo añades */
        font-size: 0.84rem;
        padding: 0.55rem 0.6rem;
    }

    /* Ícono del carrito dentro del forklift → reduce un poco             */
    .forklift-btn svg {
        width: 18px;
        height: auto;
    }
    /* corazón se mantiene estrecho */
}

#mobileMenu .accordion-button:focus,
#mobileMenu .accordion-button:not(.collapsed) {
    box-shadow: none !important; /* sin halo azul */
    outline: 0 !important; /* sin contorno del navegador */
    border-color: transparent !important; /* opcional: sin borde */
}

/* ===== Mobile off-canvas menu ===== */
@media (max-width: 991.98px) {
    #mobileMenu .mobile-link svg,
    #mobileMenu .mobile-link i {
        /* tamaño uniforme para SVG o <i> */
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    #mobileMenu .mobile-link,            /* enlaces y botones */
    #mobileMenu .accordion-button {
        padding-left: 0; /* quita sangría extra */
        font-size: 0.95rem;
        line-height: 1.4;
    }

    #mobileMenu .accordion-button::after {
        /* flecha acordeón: color + tamaño */
        color: #fff;
        font-size: 0.75rem;
    }

    /* separador visual (opcional) entre Dashboard y categorías */
    #mobileMenu .mobile-link + .accordion {
        margin-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 0.75rem;
    }
}

/* ----- Sidebar desktop ----- */
/* ---------- Métricas: adaptación móvil ---------- */
@media (max-width: 767.98px) {
    /* sm- ↓ */
    .header-stats {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }
    .header-stats .stat-card {
        min-width: 0; /* evita desbordes */
        text-align: center;
    }
}

/* XS muy estrechos (≤375 px): una sola tarjeta por fila */
@media (max-width: 575.98px) {
    .product-card {
        position: relative;
    }

    /* 1) Corazón en la esquina */
    .product-card .favorite-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 10;
        /* ya no ocupa espacio en el flow */
    }

    /* 2) Contenedor de carrito + buy now en línea */
    .product-card .d-flex.justify-content-between {
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: end !important;
        gap: 0.5rem;
    }

    /* 3) Que cada “row” interno no rompa la línea */
    .product-card .d-flex.justify-content-between .row {
        margin: 0 !important;
        width: auto !important;
        display: flex;
        align-items: center;
    }

    /* 4) Botones full-height iguales */
    .product-card .add-to-cart-btn,
    .product-card .buy-now-btn {
        width: auto !important;
        padding: 0.5rem 1rem;
        flex: none;
    }
    .buy-now-btn {
        margin-left: -1.5rem !important;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .buy-now-btn {
        margin-left: -1.5rem !important;
        padding: 0px !important;
    }
}