/* Size selection styles */
.size-option {
    @apply px-3 py-1 rounded-full text-sm transition-colors duration-200 cursor-pointer;
    border: 1px solid #e5e7eb;
}

.size-option:hover {
    @apply bg-gray-100;
}

.size-option.bg-primary {
    @apply bg-primary text-white border-primary;
}

.size-option.bg-primary:hover {
    @apply bg-primary-dark;
}

/* Cart item styles */
.cart-item {
    @apply flex justify-between items-start py-4 border-b border-gray-200;
}

.cart-item img {
    @apply w-16 h-16 object-contain rounded bg-white p-1;
}

/* Button styles */
.btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-90 transition;
}

/* Quantity controls */
.quantity-btn {
    @apply w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600;
}
/* Mobile Menu Styles */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

#mobile-menu.translate-x-0 {
    transform: translateX(0);
}

#mobile-menu-overlay {
    transition: opacity 0.3s ease-in-out;
}

/* Hide scrollbar when menu is open */
body.overflow-hidden {
    overflow: hidden;
}

/* Desktop styles - hide mobile menu */
@media (min-width: 768px) {
    #mobile-menu {
        display: none;
    }
    #mobile-menu-overlay {
        display: none;
    }
}
<style>
    /* Add to your existing styles */
    
    /* Mobile menu styles */
    #mobile-menu {
        transition: transform 0.3s ease-in-out;
    }
    
    #mobile-menu.translate-x-full {
        transform: translateX(100%);
    }
    
    #mobile-menu.translate-x-0 {
        transform: translateX(0);
    }
    
    /* Prevent body scroll when mobile menu is open */
    body.overflow-hidden {
        overflow: hidden;
    }
    
    /* WhatsApp Floating Button - keep your existing styles */
    .whatsapp-float {
        /* Your existing WhatsApp styles */
    }
</style>
/* Mobile Menu Styles */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

#mobile-menu.translate-x-0 {
    transform: translateX(0);
}

/* For smooth transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Rotate arrow for dropdown */
.rotate-180 {
    transform: rotate(180deg);
}

/* Hide scrollbar when menu is open */
.overflow-hidden {
    overflow: hidden;
}

/* Desktop styles - hide mobile menu */
@media (min-width: 768px) {
    #mobile-menu {
        display: none;
    }
    #mobile-menu-overlay {
        display: none;
    }
}