:root{--forest:#1B5E20;--sage:#A5D6A7;
    --beige:#F5F3EF;
    --orange:#F4B64D;
    --grey:#4A4545;
    --white:#fff;
    --radius:1.15rem;
    --shadow:0 12px 35px rgba(74,69,69,.1)}
html{scroll-behavior:smooth}
body{min-height:100vh;display:
    flex;flex-direction:column;
    margin:0;
    background:var(--beige);
    color:var(--grey);
    font-family:Inter,
    ui-sans-serif,system-ui,
    -apple-system,"Segoe UI",
    sans-serif;line-height:1.65}
    main{flex:1}h1,h2,h3,h4,h5,h6
    {color:var(--forest);
        font-weight:750;
        letter-spacing:-.025em}
        a{color:var(--forest)}
        img{max-width:100%}
        .ecomart-navbar{background:var(--forest);
            padding:.9rem 0;
            box-shadow:0 4px 18px rgba(27,94,32,.2)}
            .navbar-brand
            {font-size:1.45rem;font-weight:800}
            .brand-mark
            {display:inline-grid;
                place-items:center;
                width:2rem;
                height:2rem;
                border-radius:50%;
                background:var(--orange);
                color:var(--forest);
                font-weight:900}
                .brand-mark-large
                {width:4.5rem;height:4.5rem;
                    font-size:2rem}
                    .navbar-dark 
                    .navbar-nav 
                    .nav-link
                    {color:#fff;padding:.5rem .8rem;
                        border-radius:999px}
                        .navbar-dark 
                        .navbar-nav 
                        .nav-link:hover
                        {background:var(--sage);
                            color:var(--forest)}
.hero{padding:6.5rem 0;
    background:radial-gradient
    (circle at 85% 25%,rgba(244,182,77,.35),
    transparent 26%),
    linear-gradient(135deg,#dcebd8,var(--beige))}
    .hero 
    h1{font-size:clamp(3rem,7vw,5.8rem);
        line-height:.98;
        margin:.7rem 0 1.5rem}
        .hero 
        h1 
        span{color:#397d3d}
        .hero 
        .lead{max-width:660px;
            font-size:1.25rem}
        .hero-art{min-height:330px;
            border-radius:48% 52% 40% 60%;
            display:grid;
            place-items:center;
            text-align:center;
            background:var(--forest);
            color:#fff;
            box-shadow:20px 20px 0 var(--orange);
            transform:rotate(2deg)}
            .hero-art span
            {font-size:5rem;margin-bottom:-5rem}
            .hero-art strong
            {font-size:1.5rem}
            .eyebrow
            {display:inline-block;
                color:var(--forest);
                font-size:.76rem;
                font-weight:850;
                letter-spacing:.16em;
                text-transform:uppercase}
                .section-space{padding:5rem 0}
                .section-tint{background:#e4eee1}
                .section-title
                {font-size:clamp(2rem,4vw,3rem)}
                .section-heading{display:flex;
                    justify-content:space-between;
                    align-items:end;margin-bottom:2rem}
.btn{border-radius:999px;
    font-weight:750;
    padding:.65rem 1.25rem}
    .btn-eco,.btn-primary
    {background:var(--forest);
        border-color:var(--forest);
        color:#fff}
        .btn-eco:hover,
        .btn-primary:hover
        {background:var(--grey);
            border-color:var(--grey);
            color:#fff}
            .btn-accent{background:var(--orange);
                border-color:var(--orange);
                color:#2f352f}
                .btn-accent:hover
                {background:var(--forest);
                    border-color:var(--forest);
                    color:#fff}
                    .card{border:0;
                        border-radius:var(--radius);
                        box-shadow:var(--shadow);
                        overflow:hidden}
                        .card-header
                        {background:var(--sage);
                            color:var(--forest);
                            font-weight:800;
                            border:0}
                            .mission-card
                            {transition:transform .2s}
                            .mission-card:hover
                            {transform:translateY(-6px)}
                            .icon-bubble{display:grid;
                                place-items:center;
                                width:4rem;
                                height:4rem;
                                margin:0 auto 1rem;
                                border-radius:50%;
                                background:var(--sage);
                                font-size:1.8rem}
                                .product-card img
                                {width:100%;
                                    height:210px;
                                    object-fit:cover;
                                    background:var(--sage)}
                                    .product-category{display:block;
                                        color:#647064;
                                        text-transform:uppercase;
                                        letter-spacing:.09em;
                                        font-size:.7rem;
                                        font-weight:800;
                                        margin-bottom:.35rem}
                                        .price
                                        {color:var(--forest);
                                            font-size:1.2rem;
                                            font-weight:850}
                                            .price-large{font-size:2rem}
                                            .article-top{min-height:125px;
                                                padding:1.5rem;
                                                background:linear-gradient(135deg,var(--forest),#438548);
                                                color:#fff;
                                                font-weight:800;
                                                display:flex;
                                                align-items:end}
                                                .read-more{font-weight:800;
                                                    color:var(--forest)}
.page-banner
{padding:4rem 0;
    background:linear-gradient(110deg,var(--sage),#dcead8);
    text-align:center}
    .page-banner 
    h1{font-size:clamp(2.4rem,5vw,4rem);
        margin:.3rem 0}
        .admin-banner
        {background:linear-gradient(110deg,var(--forest),#397d3d);
            color:#fff;text-align:left}
            .admin-banner 
            h1,
            .admin-banner 
            .eyebrow{color:#fff}
            .product-detail-image{width:100%;max-height:520px;
                object-fit:cover;
                background:var(--sage);
                border-radius:var(--radius);
                box-shadow:var(--shadow)}
                .stock{font-weight:750}
                .in-stock{color:var(--forest)}
                .out-stock{color:#a12626}
                .quantity-control
                {display:flex;
                    border:1px solid #bbb;
                    border-radius:999px;
                    overflow:hidden;
                    background:#fff}
                    .quantity-control button
                    {border:0;
                        background:transparent;
                        width:42px;
                        font-size:1.25rem}
                        .quantity-control input
                        {width:55px;
                            border:0;
                            text-align:center}
                            .quantity-control 
                            input::-webkit-inner-spin-button{display:none}
.list-card img{width:100%;
    height:190px;
    object-fit:cover;
    background:var(--sage)}
    .list-actions
    {display:flex;
        justify-content:space-between;
        align-items:center;
        padding:1.5rem;
        background:#fff;
        border-radius:var(--radius);
        box-shadow:var(--shadow)}
        .list-actions>
        div:first-child{display:flex;
            flex-direction:column}
            .list-actions strong{font-size:1.8rem;
                color:var(--forest)}
                .empty-state{max-width:680px;
                    margin:auto;
                    padding:4rem 2rem;
                    text-align:center;
                    background:#fff;
                    border-radius:var(--radius);
                    box-shadow:var(--shadow)}
                    .info-card{background:var(--forest);
                        color:#fff}
                        .info-card
                         h2{color:#fff}
                         .info-line
                         {display:flex;gap:1rem;
                            margin-top:2rem}
                            .info-line>span{font-size:1.5rem;
                                color:var(--orange)}
                                .info-line p{opacity:.85}
                                .form-card{background:#fff}
                                .form-control,
                                .form-select
                                {border:1px solid #c7c3bc;
                                    border-radius:.75rem;
                                    padding:.75rem}
                                    .form-control:focus,
                                    .form-select:focus
                                    {border-color:var(--forest);
                                        box-shadow:0 0 0 .2rem rgba(27,94,32,.15)}
                                        .form-label{font-weight:750}
                                        .faq{max-width:850px}
                                        .accordion-item
                                        {border:0;
                                            margin-bottom:.75rem;
                                            border-radius:.75rem!important;
                                            overflow:hidden}
                                            .accordion-button:not(.collapsed)
                                            {background:var(--sage);
                                                color:var(--forest);
                                                box-shadow:none}
.auth-page{padding:5rem 0;
    background:radial-gradient(circle at 20% 10%,rgba(165,214,167,.65),transparent 30%),var(--beige)}
    .auth-card{max-width:520px;margin:auto}
    .auth-card-wide{max-width:680px}
    .admin-auth{background:linear-gradient(145deg,var(--forest),#143d17)}.stat-card 
    .card-body{display:grid;
        grid-template-columns:auto 1fr;
        gap:.15rem 1rem}
        .stat-card .card-body>span{grid-row:1/3;
            display:grid;
            place-items:center;
            width:48px;
            height:48px;
            background:var(--sage);
            border-radius:50%;
            color:var(--forest);
            font-size:1.25rem}
            .stat-card small{font-weight:700}
            .stat-card strong{font-size:1.8rem;
                color:var(--forest)}
                .inventory-grid,
                .summary-row
                {display:flex;
                    gap:1rem;
                    justify-content:space-between}
                    .inventory-grid>div
                    {flex:1;
                        padding:1rem;border-radius:.75rem;
                        background:var(--beige);
                        display:flex;
                        flex-direction:column}
                        .inventory-grid strong
                        {font-size:1.6rem;
                            color:var(--forest)}
                            .progress-bar
                            {background:var(--forest)}
                            .performance-card
                            {border-left:6px solid var(--orange)}
                            .table-card
                            {background:#fff;
                                border-radius:var(--radius);
                                box-shadow:var(--shadow);
                                overflow:hidden}
                                .table thead th
                                {background:var(--forest);
                                    color:#fff;
                                    border:0;
                                    padding:1rem;
                                    white-space:nowrap}
                                    .table td{padding:1rem}
                                    .table tbody tr:hover td{background:#f1f7ef}
                                    .summary-row span{padding:1rem;
                                        border-radius:.75rem;
                                        background:var(--beige)}
                                        .summary-row strong
                                        {color:var(--forest)}
                                        .site-footer
                                        {background:var(--grey);
                                            color:#fff}
                                            .site-footer strong{color:var(--sage)}
@media(max-width:767.98px)
{.hero{padding:4rem 0}
.hero-art{min-height:250px;
    margin:1rem 1rem 1.5rem}
    .section-space{padding:3.5rem 0}
    .list-actions,.inventory-grid,.summary-row{flex-direction:column;
        align-items:stretch}
        .list-actions>div:last-child{margin-top:1rem}
        .page-banner{text-align:center!important}
        .product-card img{height:190px}
        .table td,.table th{font-size:.88rem}
        .navbar-nav{padding-top:1rem}}

.site-logo{display:block;
    width:138px;
    height:42px;
    object-fit:contain}
    .navbar-brand{padding:0}
    .hero{margin:1.25rem auto 0;
        max-width:1110px;
        padding:3.5rem 0;
        background:var(--dark-grey);
        border-radius:var(--radius)}
        .hero-logo,
        .detail-logo,
        .banner-logo
        {display:block;
            width:145px;
            height:auto}
            .hero-logo{margin-bottom:2rem}
            .hero h1{max-width:760px;
                color:#202020;
                font-size:clamp(3rem,7vw,5.25rem);
                line-height:1.08}
                .hero .lead{max-width:600px;
                    color:#f8f8f8}
                    .mission-section
                    {background:#fff}
                    .section-intro
                    {max-width:880px;
                        margin:0 auto 2rem}
                        .articles-section
                        {margin:0 auto 3rem;
                            max-width:1110px;
                            background:var(--dark-grey);
                            border-radius:var(--radius)}
                            .articles-section 
                            h2{color:#111}
                            .articles-section 
                            .article-card{box-shadow:none}.article-top{background:#e9e9e9;
                                color:#111;
                                min-height:110px}
                                .page-banner{margin:1.25rem auto 0;
                                    max-width:1110px;
                                    padding:2.7rem 0;
                                    background:var(--dark-grey);
                                    border-radius:var(--radius);
                                    text-align:left}.
                                    page-banner h1{color:#111}
                                    .page-banner p{color:#fff;
                                        font-weight:700}
                                        .banner-logo{margin-bottom:1rem}
                                        .admin-banner
                                        {background:var(--dark-grey);
                                            color:#fff}.admin-banner .container:before{content:"";
                                                display:block;
                                                width:92px;
                                                height:36px;
                                                margin-bottom:.8rem;
                                                background:url('../images/ecomart-logo.svg') center/contain no-repeat}
                                                .admin-banner h1{color:#fff}
                                                .admin-banner .eyebrow{display:none}
                                                .brand-mark{width:145px;
                                                    height:58px;
                                                    border-radius:0;
                                                    background:transparent url('../images/ecomart-logo.svg') center/contain no-repeat;
                                                    color:transparent;
                                                    font-size:0}
                                                    .brand-mark-large{width:160px;
                                                        height:65px}
                                                        .admin-auth{background:#fff}.admin-auth .auth-card{max-width:830px;
                                                            background:var(--dark-grey)}.admin-auth .auth-card h1{color:#111;
                                                                font-size:clamp(2.5rem,6vw,4rem)}
                                                                .admin-auth .auth-card p{color:#fff}
                                                                .admin-auth .form-label{color:#111}
                                                                .product-detail{background:#fff}
                                                                .detail-logo{margin-bottom:1rem}
                                                                .product-detail>.container{padding:1rem 2rem 2rem;
                                                                    background:#fff}
                                                                    .product-title-row
                                                                    {display:grid;
                                                                        grid-template-columns:1.3fr 1fr .8fr;
                                                                        gap:1.5rem;
                                                                        align-items:start}
                                                                        .product-title-row h1{font-size:clamp(2.2rem,5vw,3.8rem)}.product-description{margin-top:4rem;
                                                                            font-size:1.05rem}.product-facts{padding:0;list-style:none}.product-detail-image{min-height:430px}
                                                                            .shopping-items
                                                                            {display:grid;gap:1.25rem}
                                                                            .list-card
                                                                            {box-shadow:none;
                                                                                background:#faf9f6}.list-card img{height:150px}.list-actions{justify-content:space-around;
                                                                                    box-shadow:none;
                                                                                    background:transparent}
                                                                                    .info-card{background:#dedede;
                                                                                        color:var(--grey);
                                                                                        box-shadow:none;
                                                                                        border-radius:2.25rem;
                                                                                        text-align:center}
                                                                                        .info-card h2{color:var(--forest)}
                                                                                        .form-card{background:var(--dark-grey);
                                                                                            box-shadow:none}.form-card .form-label{color:#111}
                                                                                            .faq-section
                                                                                            {background:#fff;
                                                                                                padding-top:2rem}
                                                                                                .faq-list{max-width:900px}
                                                                                                .faq-list article{margin:1.2rem 0}
                                                                                                .faq-list h3{margin:0;
                                                                                                    font-size:1rem;color:#111}
                                                                                                    .faq-list p{margin:0}.stat-card,.performance-card,.inventory-grid>div,
                                                                                                    .summary-row span{background:#dedede;
                                                                                                        box-shadow:none}.table thead th{background:#fff;
                                                                                                            color:#111;
                                                                                                            border-bottom:1px solid #ccc}
                                                                                                            .search-panel{background:#dedede;box-shadow:none}
@media(max-width:767.98px)
{.hero,.page-banner,.articles-section
    {margin-left:.75rem
        ;margin-right:.75rem}
        .hero{padding:3rem 1rem}
        .product-title-row{grid-template-columns:1fr}
        .product-description{margin-top:2rem}
        .product-detail-image{min-height:280px}
        .admin-auth .auth-card{margin:0 .75rem}
        .list-actions{gap:1rem}
        .banner-logo{margin-left:auto;margin-right:auto}}
:root
{--dark-grey:#4A4545}
.ecomart-navbar
{background:#fff;
    border-bottom:1px solid #e7e4df;
    box-shadow:0 4px 18px rgba(74,69,69,.08)}
    .navbar-dark .navbar-nav .nav-link{color:var(--grey)}
    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus
    {background:var(--sage);
        color:var(--forest)}
        .navbar-toggler{background:var(--forest)}