/* General Body Styles */
body {
    font-family: 'Inter', sans-serif; /* Apply Inter font globally */
    background-color: #f0f2f5; /* Light grey background for a clean look */
    color: #333; /* Dark grey text for readability */
    line-height: 1.6; /* Improve readability of text */
}

/* Custom Scrollbar Styles */
/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
    height: 8px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #e0e0e0; /* Light grey track */
    border-radius: 10px; /* Rounded corners for the track */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Darker grey thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Even darker grey on hover */
}

/* For Firefox */
html {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #888 #e0e0e0; /* thumb color track color */
}

/* Container for main content to center and limit width */
.container {
    max-width: 1200px; /* Max width for content */
    margin-left: auto;
    margin-right: auto;
}

/* Category menu scrolling behavior */
.category-scroll-container {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
}

/* Hide scrollbar for Webkit browsers */
.category-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Basic button styles (if not fully covered by Tailwind) */
button {
    cursor: pointer;
    border: none;
    outline: none;
}

/* Input focus styles (if not fully covered by Tailwind) */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3); /* Orange-500 with opacity */
    border-color: #f97316; /* Orange-500 */
}

/* Common shadow for cards and sections */
.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
}

/* Responsive image adjustments */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below images */
}

/* Utility for line clamping text (e.g., product descriptions) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* General transitions for interactive elements */
a, button, input, select, textarea {
    transition: all 0.2s ease-in-out;
}