/* css/style.css */
/* Custom Styles for L&D Crafts Shopfront */

body {
    font-family: 'Inter', sans-serif; /* Using Inter as a Tailwind-friendly font */
    /* Tailwind's bg-gray-100 and text-gray-800 are applied in the body tag directly,
       but you could centralize base body styling here if preferred. */
}

.hero-image-container {
    height: 450px; /* Or your desired height e.g., 400px, 500px, 550px */
    overflow: hidden; /* Ensures the image doesn't overflow the container if it's larger */
    border-radius: 0.5rem; /* Tailwind's rounded-lg equivalent */
    margin-bottom: 1.5rem; /* Tailwind's mb-6 equivalent */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary,
                          maintaining aspect ratio. */
    object-position: center; /* Centers the image within its frame if cropped. */
}

/* Example of how you might add more custom styles that Tailwind doesn't easily cover
   or for very specific component styling. */

/* .item-card { */
    /* Custom styles for item cards if needed beyond Tailwind classes */
/* } */

/* .about-snippet { */
    /* Custom styles for the about snippet if needed */
/* } */

/* Ensure Tailwind's base, components, and utilities are loaded first (via CDN in HTML)
   so these custom styles can override or extend them as needed. */