/* --- Custom Color Scheme --- */
:root {
    --agri-primary: #8B4513; /* A warm, earthy sienna brown */
    --agri-primary-darker: #65320d;
}

.bg-agri-primary {
    background-color: var(--agri-primary) !important;
}

.text-agri-primary {
    color: var(--agri-primary) !important;
}

.btn-agri-primary {
    background-color: var(--agri-primary);
    border-color: var(--agri-primary);
    color: #fff;
}
.btn-agri-primary:hover {
    background-color: var(--agri-primary-darker);
    border-color: var(--agri-primary-darker);
    color: #fff;
}

.btn-outline-agri-primary {
    border-color: var(--agri-primary);
    color: var(--agri-primary);
}
.btn-outline-agri-primary:hover {
    background-color: var(--agri-primary);
    border-color: var(--agri-primary);
    color: #fff;
}

/* --- Carousel Styles --- */
.carousel-item img {
    width: 100%;
    height: 500px; /* Adjust as needed */
    object-fit: cover; /* Ensures images cover the area without distortion */
}

/* --- Carousel Caption Styles --- */
.carousel-caption {
    /* Add a subtle gradient background for text readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 5%;
    padding-top: 10%;
}

/* --- Responsive Adjustments --- */
/* For screens smaller than 768px (tablets and phones) */
@media (max-width: 768px) {
    .carousel-item img {
        height: 300px; /* A shorter height for a better mobile experience */
    }

    .carousel-caption {
        padding-bottom: 1rem;
        padding-top: 5rem;
        text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    }

    .carousel-caption h2 {
        font-size: 1.75rem; /* Smaller heading on mobile */
    }
    .carousel-caption .lead {
        font-size: 1rem; /* Smaller lead text on mobile */
    }
}

/* --- Product Card Styles --- */
.product-card-img {
    height: 200px;
    object-fit: cover; /* Ensures image covers the area nicely */
}

/* --- Custom CSS for Category Tiles --- */

/* ----------------- Category Section Styling ----------------- */
.category-shop-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.category-card {
    border: none;
    border-radius: 15px; /* Smoother corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 220px; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.category-card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.category-icon {
    width: 60px; /* Adjust size of icons */
    height: 60px;
    object-fit: contain;
}

.category-card .card-title {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    color: #333; /* Darker text */
}

/* Background Colors matching the screenshot */
.bg-light-yellow { background-color: #fef7da !important; }
.bg-light-blue { background-color: #edf5ff !important; }
.bg-light-purple { background-color: #f0f3ff !important; }
.bg-light-orange { background-color: #fdeee0 !important; }
.bg-light-peach { background-color: #fff2e0 !important; }
 
/* Styles for the sticky sidebar, wrapped in a media query to apply only on desktop */
@media (min-width: 768px) {
    .sidebar-sticky {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 75px; /* Adjust this value based on the height of your sticky header */
        height: calc(100vh - 75px); /* Full-height minus top offset */
        overflow-y: auto; /* Add scroll for long category lists */
    }
}

/* Styles for the sticky category dropdown on mobile */
@media (max-width: 767.98px) {
    .mobile-category-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 56px; /* Height of the sticky navbar */
        z-index: 1020; /* Ensure it's above content but below modals */
        background-color: #fff; /* Give it a solid background */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* --- Responsive Cart Table Styles --- */
@media (max-width: 767.98px) {
    .responsive-cart-table thead {
        /* Hide the table header on mobile */
        display: none;
    }

    .responsive-cart-table, 
    .responsive-cart-table tbody, 
    .responsive-cart-table tr, 
    .responsive-cart-table td {
        display: block;
        width: 100%;
    }

    .responsive-cart-table tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
    }

    .responsive-cart-table td {
        display: flex; /* Use flexbox for alignment */
        justify-content: space-between; /* Pushes label and content apart */
        align-items: center;
        text-align: right; /* Keep content on the right */
        position: relative;
        border-top: none;
        padding-left: 0.75rem; /* Standard padding */
    }

    .responsive-cart-table td::before {
        content: attr(data-label); /* Use the data-label as a pseudo-element */
        font-weight: bold;
        text-align: left;
        margin-right: 1rem; /* Space between label and content */
        white-space: nowrap;
    }

    .responsive-cart-table td:last-child {
        border-bottom: none;
    }

    /* Target the quantity input to ensure it doesn't take full width */
    .responsive-cart-table td[data-label="Quantity"] .form-control {
        max-width: 80px; /* Limit width of the quantity input */
    }
}

/* --- Contact Page --- */
.contact-details-list li {
    display: flex;
    align-items: flex-start;
}
.contact-details-list i {
    width: 30px; /* Provides consistent spacing for icons */
}