/* ====== Ajustes responsivos para .new-product-icon ====== */

/* Laptops medianos ≤1200px */
@media (max-width: 1200px) {
    .new-product-icon {
        width: 52px;
        max-width: 52px;
    }

    .new-product-icon i {
        font-size: 18px;
    }

    .new-product-icon:hover {
        max-width: 240px;
    }

    .new-product-icon:hover span {
        max-width: 240px;
    }
}

/* Tablets/landscape ≤992px */
@media (max-width: 992px) {
    .new-product-icon {
        width: 48px;
        max-width: 48px;
    }

    .new-product-icon i {
        font-size: 17px;
    }

    .new-product-icon:hover {
        max-width: 210px;
    }

    .new-product-icon:hover span {
        max-width: 210px;
    }
}

/* Tablets portrait ≤768px */
@media (max-width: 768px) {
    .new-product-icon {
        width: 44px;
        max-width: 44px;
    }

    .new-product-icon i {
        font-size: 16px;
    }

    .new-product-icon:hover {
        max-width: 190px;
    }

    .new-product-icon:hover span {
        max-width: 190px;
    }
}

/* Móviles ≤600px: icon-only, desactivar expansión */
@media (max-width: 600px) {
    .new-product-icon {
        width: 44px !important;
        max-width: 44px !important;
        height: 44px !important; /* por si viene de h-14 (56px) */
        padding: 0 !important;
        border-radius: 9999px !important;
        justify-content: center;
    }

    /* No mostramos el texto en móvil */
    .new-product-icon span {
        display: none !important;
        max-width: 0 !important;
        width: 0 !important;
        opacity: 0 !important;
        position: absolute !important;
    }

    /* Anula el despliegue por :hover en móvil */
    .new-product-icon:hover {
        width: 44px !important;
        max-width: 44px !important;
    }

    .new-product-icon:hover span {
        display: none !important;
        max-width: 0 !important;
        width: 0 !important;
        opacity: 0 !important;
    }

    .new-product-icon i {
        font-size: 18px !important;
    }

    /* (Opcional) si usas un contenedor para la columna de botones */
    .product-action-stack {
        gap: 8px !important;
        right: 8px !important;
    }
}

/* Muy pequeño ≤380px */
@media (max-width: 440px) {
    .new-product-icon {
        width: 35px !important;
        max-width: 35px !important;
        height: 35px !important;
    }

    .new-product-icon i {
        font-size: 18px !important;
    }
}


/* FERIA CARDS */
@media (max-width: 500px) {
    .badge-feria {
        padding: 6px 8px;
        font-size: 12px;
    }
}

@media (max-width: 1023px) {
    .categoria-botones-desktop {
        display: none !important;
    }
}