/*Override default theme*/
:root {
    --your-primary: #177f4c;
    --your-primary-hover: #146e41;
    --your-secondary: #ffc107;
    --your-secondary-hover: #e0a800;
    --your-link: #177f4c;
    --your-success: #27ae60;
    --your-danger: #da251c;
    --your-warning: #ffcd38;
    --your-muted: #6c757d;
    --your-Gary-muted: #6c757d;
    --your-bg-light: #f6fff9;
    --your-bg-surface: #fff;
    --your-bg-dark: #0f1724;
    --your-text-main: #232323;
    --your-border: #177f4c;
    --your-radius: 0.35rem;
}

/* ----- Buttons ----- */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--your-primary) !important;
    border-color: var(--your-border) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(23,127,76,.12);
    border-radius: var(--your-radius);
}

    .btn-primary:hover,
    .btn-primary:active:hover,
    .btn-primary:focus:hover {
        background-color: var(--your-primary-hover) !important;
        border-color: var(--your-primary-hover) !important;
        color: #fff !important;
        box-shadow: 0 4px 16px rgba(20,110,65,.16);
    }

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: var(--your-secondary) !important;
    border-color: var(--your-secondary-hover) !important;
    color: #232323 !important;
    box-shadow: 0 1px 8px rgba(255,193,7,.10);
    border-radius: var(--your-radius);
}

    .btn-secondary:hover,
    .btn-secondary:active:hover,
    .btn-secondary:focus:hover {
        background-color: var(--your-secondary-hover) !important;
        border-color: var(--your-secondary-hover) !important;
        color: #232323 !important;
        box-shadow: 0 3px 12px rgba(224,168,0,.15);
    }

/* ----- Nav ----- */
.nav-link,
.nav-link:focus,
.nav-link:active {
    color: var(--your-Gary-muted) !important;
    font-weight: 500;
    border-radius: var(--your-radius);
    transition: color .15s, background .15s;
}

    .nav-link:hover {
        color: var(--your-primary-hover) !important;
        background-color: var(--your-bg-light);
    }

    .nav-link.active, .nav-link[aria-current="page"] {
        color: #fff !important;
        background-color: var(--your-primary) !important;
    }

.bg-light-panel {
    background-color: var(--your-bg-light) !important;
}

/* ----- Footer (Dark Mode Starter) ----- */
.bg-dark-footer {
    background-color: var(--your-bg-dark) !important;
    color: #e6eef8 !important;
}

    .bg-dark-footer a {
        color: #ffc107 !important;
    }

        .bg-dark-footer a:hover {
            color: #fff !important;
        }

/* ----- Pills/Badges ----- */
.category-pill, .badge-pill {
    background: var(--your-bg-light);
    color: var(--your-primary);
    border: 1px solid var(--your-border);
    border-radius: 2rem;
    padding: .25rem .8rem;
    font-weight: 500;
    transition: background .12s, color .12s;
    margin-bottom: .1rem;
}

    .category-pill.active, .badge-pill.active, .category-pill:hover, .badge-pill:hover {
        background: var(--your-primary);
        color: #fff;
    }

/* ----- Card/Panel/Surface ----- */
.card, .panel, .product-card {
    border-radius: var(--your-radius);
    box-shadow: 0 2px 8px rgba(23,127,76,0.05);
    background: var(--your-bg-surface);
    transition: box-shadow .2s, transform .18s;
}

    .product-card:hover, .card:hover {
        box-shadow: 0 10px 32px rgba(23,127,76,0.13);
        transform: translateY(-6px);
    }

/* ----- Headings, Text ----- */
h1, h2, h3, h4, h5, h6 {
    color: var(--your-text-main);
}

.text-success {
    color: var(--your-success) !important;
}

.text-danger {
    color: var(--your-danger) !important;
}

.text-warning {
    color: var(--your-warning) !important;
}

.text-muted {
    color: var(--your-muted) !important;
}

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

body, .body-text {
    color: var(--your-text-main);
    background: var(--your-bg-surface);
}

/* ----- Alert/Notifications ----- */
.alert-success {
    background: #eafbf2;
    color: var(--your-success);
    border: 1px solid var(--your-success);
}

.alert-danger {
    background: #feecec;
    color: var(--your-danger);
    border: 1px solid var(--your-danger);
}

.alert-warning {
    background: #fff8e1;
    color: var(--your-warning);
    border: 1px solid var(--your-warning);
}

/* ----- Pagination ----- */
.pagination .page-link {
    background-color: #fff;
    color: var(--your-primary);
    border-color: var(--your-border);
    border-radius: var(--your-radius);
}

    .pagination .page-link:hover,
    .pagination .page-item.active .page-link {
        background-color: var(--your-primary);
        color: #fff !important;
        border-color: var(--your-primary);
        font-weight: 600;
    }

/* Utility: Focus, Border, Inputs */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--your-bg-surface), 0 0 0 0.23rem var(--your-primary);
}

/* Tables */
.table-primary, .table thead th {
    background: #eafbf2 !important;
    color: var(--your-primary) !important;
    border-color: var(--your-border) !important;
}

/* Icons */
.feature-icon, .icon-success {
    color: var(--your-primary);
    font-size: 28px;
}

/* Selection highlight */
::selection {
    background: var(--your-secondary);
    color: var(--your-text-main);
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #198754; /* Unified green shadow */
}
.btn-link  {
    color: var(--your-link) !important;
    text-decoration: underline;
    font-weight: 500;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transition: color 0.18s;
    border-radius: var(--your-radius, 0.2rem);
}
strong {
    color: var(--your-Gary-muted) !important;
}
    .btn-link:hover, .btn-link:focus, .btn-link:active {
        color: var(--your-primary-hover) !important;
        text-decoration: underline;
        background-color: var(--your-bg-light, #f6fff9);
    }

    .btn-link.disabled, .btn-link:disabled {
        color: var(--your-muted, #6c757d) !important;
        text-decoration: none;
        pointer-events: none;
    }

/* ✅ Styles For Consumer */
.product-card {
    border-radius: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(25,135,84,0.08); /* greenish shadow hint */
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(25,135,84,0.16);
    }

.active-parent {
    background: linear-gradient(90deg, rgba(25,135,84,0.08), transparent); /* soft green */
    color: #198754 !important;
    border-radius: 0.35rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
}

.active-category, .active-subcategory {
    background: #198754;
    color: #fff !important;
    font-weight: 600;
    border-radius: 0.35rem;
    padding: 0.35rem 0.6rem;
}

@media (max-width: 767.98px) {
    .col-lg-3, .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.sticky-top-shadow {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 2px 8px rgba(25,135,84,0.10); /* subtle green shadow */
}

.hero-cta {
    transition: transform .12s ease, box-shadow .12s ease;
    background: #198754;
    color: #fff;
    border: none;
}

    .hero-cta:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(25,135,84,0.16);
        background: #145c34;
        color: #fff;
    }

.feature-icon {
    font-size: 28px;
    color: #198754;
}

footer {
    background: #0f1724;
    color: #e6eef8;
}

/* Pagination */

.page-item {
    padding: 5px
}

.pagination .page-link {
    transition: all 0.2s ease;
    border-radius: 0.35rem;
    background-color: #fff;
    color: #198754 !important;
    border-color: #198754;
}

    .pagination .page-link:hover {
        background-color: #198754;
        color: #fff !important;
        border-color: #198754;
    }

.pagination .page-item.active .page-link {
    font-weight: 600;
    background-color: #198754;
    color: #fff !important;
    border-color: #198754;
}
/*External CSS*/

/* Desktop - normal */
.category-menu {
    transition: transform 0.3s ease;
}

/* Mobile menu hidden by default */
@media (max-width: 991px) {
    .category-menu {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        background: #fff;
        z-index: 1050;
        overflow-y: auto;
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    }

        .category-menu.active {
            transform: translateX(0);
        }
}

.navbar.bg-white, .navbar {
    background: #fff !important;
    background-color: #fff !important;
}

.navbar-toggler {
    border-color: rgba(31,49,90,0.35) !important;
    background: transparent;
}

.navbar-toggler-icon {
    /* Use a brand navy icon for consistency and visibility */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831,49,90,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ============================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Touch-friendly minimum sizes */
.btn,
.nav-link,
.dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.btn {
    display: inline-block !important;
    min-height: 28px !important;
}
    /* Full-width buttons on mobile */
    @media (max-width: 575.98px) {
        .btn-block-mobile {
            width: 100%;
            justify-content: center;
        }

        .btn-checkout,
        .btn-add-to-cart,
        .btn-buy-now {
            width: 100%;
            padding: 0.875rem;
            font-size: 1rem;
            justify-content: center;
        }
        /* Stack action buttons */
        .action-buttons-mobile {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

            .action-buttons-mobile .btn {
                width: 100%;
            }
    }
    /* Responsive product grid */
    @media (max-width: 575.98px) {
        .product-grid .col {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    @media (max-width: 399px) {
        .product-grid .col {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    /* Order list mobile optimization */
    @media (max-width: 767.98px) {
        .order-list-item {
            padding: 1rem;
        }

            .order-list-item .order-image {
                width: 50px;
                height: 50px;
            }

            .order-list-item .order-details {
                font-size: 0.875rem;
            }

            .order-list-item .order-price {
                font-size: 0.9375rem;
            }
    }
    /* Form responsiveness */
    @media (max-width: 767.98px) {
        .filter-form .row {
            gap: 0.75rem;
        }

        .filter-form .col-md-3 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    /* Cart page mobile */
    @media (max-width: 767.98px) {
        .cart-item-row {
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
            border: 1px solid var(--your-border, #e2e8f0);
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .cart-item-image {
            width: 80px;
            height: 80px;
        }

        .cart-summary-sidebar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 1rem;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
    }
    /* Checkout progress stepper */
    .checkout-stepper {
        display: flex;
        justify-content: center;
        gap: 0;
        margin-bottom: 2rem;
        padding: 0;
        list-style: none;
    }

        .checkout-stepper li {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            color: var(--your-muted, #6c757d);
        }

            .checkout-stepper li.active {
                color: var(--your-primary, #177f4c);
                font-weight: 600;
            }

            .checkout-stepper li.completed {
                color: var(--your-primary, #177f4c);
            }

            .checkout-stepper li .step-number {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 0.5rem;
                font-size: 0.75rem;
                font-weight: 600;
                background: #e2e8f0;
                color: #6c757d;
            }

            .checkout-stepper li.active .step-number,
            .checkout-stepper li.completed .step-number {
                background: var(--your-primary, #177f4c);
                color: white;
            }

            .checkout-stepper li::after {
                content: '';
                width: 40px;
                height: 2px;
                background: #e2e8f0;
                margin: 0 0.75rem;
            }

            .checkout-stepper li:last-child::after {
                display: none;
            }

            .checkout-stepper li.completed::after {
                background: var(--your-primary, #177f4c);
            }

    @media (max-width: 575.98px) {
        .checkout-stepper li span:not(.step-number) {
            display: none;
        }

        .checkout-stepper li::after {
            width: 24px;
            margin: 0 0.5rem;
        }
    }
    /* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */
    /* Focus visible for keyboard navigation */
    :focus-visible {
        outline: 2px solid var(--your-primary, #177f4c);
        outline-offset: 2px;
    }
    /* Skip link styling */
    .skip-link {
        position: absolute;
        top: -100%;
        left: 0;
        background: var(--your-primary, #177f4c);
        color: #fff;
        padding: 0.75rem 1.5rem;
        z-index: 10000;
        text-decoration: none;
        font-weight: 600;
        border-radius: 0 0 0.5rem 0;
        transition: top 0.2s ease;
    }

        .skip-link:focus {
            top: 0;
            color: #fff;
        }
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .btn-primary,
        .btn-success {
            border: 2px solid currentColor;
        }

        .badge {
            border: 1px solid currentColor;
        }
    }
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    /* ============================================
   PRINT STYLES
   ============================================ */
    @media print {
        .navbar,
        footer,
        .mobile-nav-overlay,
        .btn,
        .skip-link,
        #mobileNav {
            display: none !important;
        }

        body {
            background: white !important;
        }

        .card {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
        }

        a[href]::after {
            content: " (" attr(href) ")";
            font-size: 0.8em;
            color: #666;
        }
    }