/* Custom Font - Los Marmotas */
@font-face {
    font-family: 'LosMarmotas';
    src: url('https://raw.githubusercontent.com/oviedleonel/pagina-web-los-marmotas-growshop/main/fonts/LosMarmotas.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-losmarmotas {
    font-family: 'LosMarmotas', sans-serif;
}

/* Background pattern for Hero section */
.bg-stars {
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    background-color: #000000;
}

/* Custom styles for elements (optional, if not fully covered by Tailwind) */
/* Example: Shadow for product cards */
.product-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.product-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* NUEVO: Clase para limitar las líneas de la descripción del producto */
.description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- AJUSTES CARRITO MÓVIL (Versión Móvil) --- */
@media (max-width: 1023px) { /* Límite para dispositivos que no son 'lg' o mayor */
    #cart-container {
        /* Hace el carrito flotante */
        position: fixed; 
        top: 5rem; /* Justo debajo del header fijo (z-50) */
        right: 0.5rem; 
        left: 0.5rem; 
        z-index: 40; /* Flota sobre el contenido */
        padding: 0.75rem; 
        background-color: #fff; 
        /* Estilos para ocultar y mostrar en móvil */
        transform: translateY(0);
        transition: transform 0.3s ease-in-out;
        max-height: 80vh; /* Limitar altura */
        overflow-y: auto; /* Permitir scroll si es necesario */
    }
}

/* --- ESTILOS DE ADMINISTRADOR (DRAG & DROP) --- */

.admin-product-item {
    cursor: grab;
    transition: background-color 0.2s ease;
    border: 1px solid transparent;
}

.admin-product-item:hover {
    background-color: #f3f4f6;
}

.admin-product-item.dragging {
    opacity: 0.5;
    border: 1px dashed #10b981; /* Borde visible al arrastrar */
    background-color: #d1fae5;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.drag-handle {
    cursor: grab;
    padding-right: 0.5rem;
}

/* --- ESTILOS DE ANIMACIÓN "FLY TO CART" --- */

/* Animación de "pop" para el carrito al recibir un ítem */
@keyframes cart-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.cart-animate-pop {
    animation: cart-pop 0.3s ease-in-out;
}