/* ============================================================
   UNBLEND NATURALS — Main Stylesheet
   Aesthetic: Clean & Minimal (Cream, White, Forest Green)
   ============================================================ */

:root {
    --cream: #FFFFFF;
    --white: #FFFFFF;
    --beige: #F5F3EF;
    --beige-dark: #EAE6DF;
    --green: #2A4A12;
    --green-light: #3d6b1f;
    --green-mid: #4A7C2F;
    --green-pale: #EDF5E5;
    --gold: #B8892A;
    --gold-light: #D4A94A;
    --text: #111827;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;
    --border: #E5E7EB;
    --border-strong: #D1D5DB;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12), 0 4px 20px rgba(0,0,0,0.06);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --font-display: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: all .2s; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── TOPBAR ── */
.topbar {
    background: linear-gradient(90deg, #1a3a0f 0%, #2A4A12 40%, #1a3a0f 100%);
    color: rgba(255,255,255,.9);
    text-align: center;
    padding: .55rem 1rem;
    font-size: .75rem;
    letter-spacing: .06em;
    position: relative;
    overflow: hidden;
}
.topbar::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    animation: shimmer 3s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ── HEADER ── */
.header {
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,.07);
    transition: all .3s;
}
.header.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    border-bottom-color: transparent;
}

.header-inner {
    display: flex; align-items: center;
    gap: 2rem; height: 70px;
}

.logo {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none;
}
/* logo image used instead of text */

.nav-main {
    display: flex; align-items: center; gap: .25rem;
    margin-left: auto;
}
.nav-main > a, .nav-dropdown > a {
    padding: .5rem .75rem;
    font-size: .88rem; font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all .2s;
}
.nav-main > a:hover, .nav-dropdown > a:hover { color: var(--green); background: var(--green-pale); }

.nav-dropdown { position: relative; }
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu {
    position: absolute; top: calc(100% + .5rem); left: 0;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); min-width: 210px;
    padding: .5rem; box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px); transition: all .2s;
    z-index: 200;
}
.dropdown-menu.dropdown-right { left: auto; right: 0; }
.dropdown-menu a {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem;
    font-size: .85rem; color: var(--text-muted);
    border-radius: var(--radius-sm); transition: all .15s;
}
.dropdown-menu a:hover { background: var(--green-pale); color: var(--green); }
.dropdown-divider { height: 1px; background: var(--border); margin: .4rem 0; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--text-muted);
    transition: all .2s; position: relative;
}
.icon-btn:hover { background: var(--beige); color: var(--green); }
.badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--green); color: #fff;
    font-size: .6rem; width: 16px; height: 16px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.btn-outline-sm {
    padding: .4rem 1rem; border: 1.5px solid var(--green);
    color: var(--green); border-radius: 50px;
    font-size: .82rem; font-weight: 500; transition: all .2s;
}
.btn-outline-sm:hover { background: var(--green); color: #fff; }

.hamburger { display: none; }

/* Search Bar */
.search-bar {
    background: var(--beige); border-top: 1px solid var(--border);
    padding: .75rem 0; display: none;
}
.search-bar.active { display: block; }
.search-bar form {
    display: flex; gap: .5rem; max-width: 600px;
}
.search-bar input {
    flex: 1; padding: .6rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 50px; background: var(--white);
    outline: none; transition: border .2s;
}
.search-bar input:focus { border-color: var(--green); }
.search-bar button {
    padding: .6rem 1.4rem; background: var(--green);
    color: #fff; border-radius: 50px; font-size: .85rem; font-weight: 500;
}

/* Flash Messages */
.flash {
    padding: .85rem 1.5rem; text-align: center;
    font-size: .88rem; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.flash-success { background: #d4edda; color: #155724; }
.flash-error { background: #f8d7da; color: #721c24; }
.flash-info { background: #cce5ff; color: #004085; }
.flash button { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .7; }

/* ── BUTTONS ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.75rem; border-radius: 50px;
    font-size: .88rem; font-weight: 500; transition: all .25s;
    cursor: pointer; border: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(42,74,18,.2);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--green-light) 0%, var(--green-mid) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42,74,18,.35);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-outline { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-light { background: var(--beige); color: var(--text); }
.btn-light:hover { background: var(--beige-dark); }
.btn-full { width: 100%; }
.btn-sm { padding: .5rem 1.2rem; font-size: .82rem; }
.btn-lg { padding: .9rem 2.25rem; font-size: .95rem; }

/* ── HERO ── */
.hero {
    background: linear-gradient(135deg, var(--beige) 0%, var(--white) 60%, var(--green-pale) 100%);
    padding: 5rem 0 4rem;
    overflow: hidden; position: relative;
}
.hero::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: none;
    border-radius: 50%;
}
.hero-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 4rem;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .9rem; background: var(--green-pale);
    color: var(--green); border-radius: 50px;
    font-size: .78rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 500; line-height: 1.15;
    color: var(--text); margin-bottom: 1.25rem;
}
.hero h1 em { color: var(--green); font-style: normal; }
.hero p { font-size: 1rem; color: var(--text-muted); max-width: 420px; margin-bottom: 2rem; }
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-trust {
    display: flex; gap: 1.5rem; margin-top: 2.5rem;
}
.trust-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-muted); }
.trust-item i { color: var(--green); font-size: 1rem; }

.hero-image-wrap {
    position: relative;
    display: flex; justify-content: center; align-items: center;
}
.hero-img-bg {
    width: 420px; height: 420px;
    background: radial-gradient(circle at 45% 45%, #e8f5d8, #d4edba, #c8e8a8);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 14px rgba(74,124,47,.07),
        0 0 0 30px rgba(74,124,47,.04),
        0 30px 80px rgba(42,74,18,.12);
}
.hero-img-bg::after { content: none; }
.hero-img-bg .hero-bird {
    width: 82%;
    height: 82%;
    object-fit: contain;
    object-position: center center;
    background: transparent !important;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 8px 20px rgba(42,74,18,.25));
    animation: birdFloat 4s ease-in-out infinite;
    transform-origin: center center;
    position: relative;
    left: 5%;
    top: -3%;
}
@keyframes birdFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-14px) rotate(1deg); }
}
.hero-product-cards {
    position: absolute; display: flex; flex-direction: column; gap: .75rem;
}
.hero-card {
    background: var(--white); border-radius: var(--radius);
    padding: .65rem 1rem; box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: .75rem;
    font-size: .8rem; white-space: nowrap;
}
.hero-card i { color: var(--green); font-size: 1rem; }
.hero-card strong { display: block; font-weight: 600; color: var(--text); }
.hero-card span { color: var(--text-muted); }

/* ── SECTIONS ── */
.section { padding: 4rem 0; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-label {
    display: inline-block; padding: .25rem .9rem;
    background: var(--green-pale); color: var(--green);
    border-radius: 50px; font-size: .75rem;
    font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: .75rem;
}
.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 500; margin-bottom: .75rem;
}
.section-header p { color: var(--text-muted); max-width: 480px; margin: 0 auto; }

/* ── PRODUCT CARDS ── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.product-card {
    background: var(--white); border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--border);
    transition: all .35s cubic-bezier(.22,1,.36,1); position: relative;
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
    border-color: transparent;
}

.product-image {
    position: relative; overflow: hidden;
    background: var(--beige); aspect-ratio: 1;
}
.product-image img {
    width: 100%; height: 100%;
    object-fit: cover; transition: transform .4s;
}
.product-card:hover .product-image img { transform: scale(1.04); }
.product-badge {
    position: absolute; top: .75rem; left: .75rem;
    padding: .2rem .65rem; border-radius: 50px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.badge-sale { background: #e53e3e; color: #fff; }
.badge-new { background: var(--green); color: #fff; }
.badge-featured { background: #d69e2e; color: #fff; }

.product-wishlist {
    position: absolute; top: .75rem; right: .75rem;
    width: 32px; height: 32px;
    background: var(--white); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow); opacity: 0; transition: all .2s;
    cursor: pointer; color: var(--text-muted);
}
.product-wishlist.active { color: #e53e3e; opacity: 1; }
.product-card:hover .product-wishlist { opacity: 1; }
.product-wishlist:hover { color: #e53e3e; transform: scale(1.1); }

.product-info { padding: 1rem 1.1rem 1.2rem; }
.product-category { font-size: .72rem; color: var(--green); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; }
.product-name {
    font-weight: 500; font-size: .92rem;
    line-height: 1.4; margin-bottom: .5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-rating { display: flex; align-items: center; gap: .35rem; margin-bottom: .6rem; }
.stars { color: #d69e2e; font-size: .78rem; }
.rating-count { font-size: .75rem; color: var(--text-muted); }
.product-price { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.price-current { font-size: 1.1rem; font-weight: 600; color: var(--green); }
.price-original { font-size: .85rem; color: var(--text-light); text-decoration: line-through; }
.price-off { font-size: .75rem; color: #e53e3e; font-weight: 600; }
.product-card .btn { font-size: .8rem; padding: .55rem 1rem; border-radius: 8px; width: 100%; }

/* ── CATEGORIES ── */
.categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    align-items: stretch;
}
.categories-grid .category-card {
    flex: 0 0 calc(20% - 1rem);
    min-width: 140px;
    max-width: 200px;
}
@media (max-width: 900px) {
    .categories-grid .category-card { flex: 0 0 calc(33.333% - 1rem); }
}
@media (max-width: 600px) {
    .categories-grid .category-card { flex: 0 0 calc(50% - .75rem); }
}
.category-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 18px; padding: 1.75rem 1.25rem;
    text-align: center; transition: all .3s cubic-bezier(.22,1,.36,1); cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
}
.category-card:hover { background: var(--green-pale); border-color: var(--green); transform: translateY(-2px); }
.category-card i { font-size: 1.8rem; color: var(--green); margin-bottom: .75rem; }
.category-card h4 { font-size: .85rem; font-weight: 600; }
.category-card p { font-size: .73rem; color: var(--text-muted); margin-top: .25rem; }

/* ── BENEFITS STRIP ── */
.benefits-strip {
    background: var(--green);
    padding: 2.5rem 0;
}
.benefits-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.benefit-item { text-align: center; color: #fff; }
.benefit-item i { font-size: 1.8rem; margin-bottom: .75rem; opacity: .85; }
.benefit-item h4 { font-size: .92rem; font-weight: 600; margin-bottom: .3rem; }
.benefit-item p { font-size: .8rem; opacity: .75; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.testimonial-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem;
}
.testimonial-stars { color: #d69e2e; font-size: .85rem; margin-bottom: .75rem; }
.testimonial-text { font-size: .9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
.testimonial-author { display: flex; align-items: center; gap: .75rem; }
.testimonial-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--green-pale); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}
.testimonial-name { font-weight: 600; font-size: .85rem; }
.testimonial-loc { font-size: .75rem; color: var(--text-muted); }

/* ── FORMS ── */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .83rem; font-weight: 500; margin-bottom: .4rem; color: var(--text); }
.form-control {
    width: 100%; padding: .7rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); background: var(--white);
    font-size: .9rem; transition: border .2s; outline: none;
    color: var(--text);
}
.form-control:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,80,22,.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── PRODUCT DETAIL ── */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 3rem 0; }
.product-gallery .main-img {
    background: var(--beige); border-radius: var(--radius);
    aspect-ratio: 1; overflow: hidden; margin-bottom: .75rem;
}
.product-gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbs { display: flex; gap: .5rem; }
.product-thumbs img {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: 8px; border: 2px solid transparent; cursor: pointer;
}
.product-thumbs img.active { border-color: var(--green); }
.product-info-detail h1 {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 500; margin-bottom: .5rem;
}
.product-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.product-price-detail { margin: 1rem 0; }
.product-price-detail .current { font-size: 1.8rem; font-weight: 600; color: var(--green); }
.product-price-detail .original { font-size: 1rem; color: var(--text-light); text-decoration: line-through; margin-left: .5rem; }
.product-price-detail .save { font-size: .82rem; color: #e53e3e; margin-left: .5rem; font-weight: 600; }
.qty-control { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.qty-control button {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--border); background: var(--white);
    font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.qty-control button:hover { background: var(--green); color: #fff; border-color: var(--green); }
.qty-control span { font-size: 1rem; font-weight: 600; min-width: 24px; text-align: center; }
.product-actions { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.product-tabs { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.tabs-header { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn {
    padding: .65rem 1.25rem; font-size: .85rem; font-weight: 500;
    color: var(--text-muted); border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: all .2s;
}
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.tab-content { display: none; font-size: .9rem; color: var(--text-muted); line-height: 1.8; }
.tab-content.active { display: block; }

/* ── CART ── */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; padding: 2rem 0; }
.cart-item {
    display: grid; grid-template-columns: 80px 1fr auto;
    gap: 1rem; align-items: center;
    padding: 1.25rem; background: var(--white);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: .75rem;
}
.cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--beige); }
.cart-summary {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    position: sticky; top: 90px;
    box-shadow: var(--shadow-md);
}
.cart-summary h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: .6rem; font-size: .9rem; }
.summary-row.total { font-size: 1.1rem; font-weight: 600; padding-top: .75rem; border-top: 1px solid var(--border); }

/* ── ACCOUNT ── */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; padding: 2rem 0; }
.account-sidebar {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem; height: fit-content;
}
.account-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700; margin: 0 auto 1rem;
}
.account-nav a {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .75rem; border-radius: var(--radius-sm);
    font-size: .87rem; color: var(--text-muted); transition: all .15s;
    margin-bottom: .15rem;
}
.account-nav a:hover, .account-nav a.active { background: var(--green-pale); color: var(--green); }
.account-main { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }

/* ── ORDER STATUS ── */
.order-timeline { padding: 1.5rem 0; }
.timeline-step {
    display: flex; align-items: flex-start; gap: 1rem;
    padding-bottom: 1.5rem; position: relative;
}
.timeline-step::before {
    content: ''; position: absolute;
    left: 14px; top: 28px; bottom: 0;
    width: 2px; background: var(--border);
}
.timeline-step:last-child::before { display: none; }
.step-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--border); color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; flex-shrink: 0; z-index: 1;
}
.step-dot.done { background: var(--green); color: #fff; }
.step-dot.active { background: var(--green-light); color: #fff; }
.step-info strong { display: block; font-size: .88rem; }
.step-info span { font-size: .78rem; color: var(--text-muted); }

/* ── PAGES ── */
.page-hero {
    background: #ffffff;
    padding: 3rem 0; border-bottom: 1px solid var(--border);
    margin-bottom: 3rem;
}
.page-hero h1 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; }
.page-hero p { color: var(--text-muted); margin-top: .5rem; }

.prose { max-width: 780px; }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 2rem 0 .75rem; }
.prose h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.prose p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.8; }
.prose ul { padding-left: 1.25rem; color: var(--text-muted); margin-bottom: 1rem; }
.prose ul li { margin-bottom: .4rem; }

/* ── BREADCRUMB ── */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-muted); padding: 1rem 0; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { opacity: .5; }

/* ── PAGINATION ── */
.pagination { display: flex; justify-content: center; gap: .4rem; padding: 2rem 0; }
.pagination a, .pagination span {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1.5px solid var(--border);
    font-size: .85rem; transition: all .2s;
}
.pagination a:hover, .pagination .current { background: var(--green); color: #fff; border-color: var(--green); }

/* ── FOOTER ── */
.footer {
    background: #ffffff; color: var(--text);
    border-top: 1px solid var(--border);
    padding: 4rem 0 0; margin-top: 4rem;
}
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 3rem; padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
/* footer logo image used */
.footer-brand p { font-size: .85rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.7; }
.social-links { display: flex; gap: .75rem; margin-top: 1.25rem; }
.social-links a {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--beige);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all .2s; font-size: .85rem;
}
.social-links a:hover { background: var(--green); color: #fff; }
.footer-links h4 { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.footer-links ul li { margin-bottom: .5rem; }
.footer-links ul li a { font-size: .85rem; color: var(--text-muted); transition: color .2s; }
.footer-links ul li a:hover { color: var(--green); }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 0; font-size: .8rem; color: var(--text-muted);
    border-top: 1px solid var(--border);
}

/* ── ADMIN ── */
.admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar {
    background: #ffffff; padding: 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-right: 1px solid var(--border);
}
.admin-brand {
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
    font-family: var(--font-display); font-size: 1rem; color: var(--text);
    display: flex; align-items: center; gap: .6rem;
}
.admin-nav a {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.5rem; color: var(--text-muted);
    font-size: .85rem; transition: all .2s;
    border-left: 3px solid transparent;
    margin: 1px .5rem; border-radius: 8px;
}
.admin-nav a:hover, .admin-nav a.active {
    background: var(--green);
    color: #ffffff; border-left-color: transparent;
}
.admin-nav .nav-group-label {
    padding: 1rem 1.5rem .3rem;
    font-size: .65rem; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase;
}
.admin-main { background: #ffffff; padding: 2rem; }
.admin-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.admin-topbar h1 { font-size: 1.3rem; font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
    background: var(--white); border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.stat-icon.green { background: var(--green-pale); color: var(--green); }
.stat-icon.orange { background: #fff8e7; color: #d69e2e; }
.stat-icon.blue { background: #ebf4ff; color: #3182ce; }
.stat-icon.red { background: #fff5f5; color: #e53e3e; }
.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-label { font-size: .78rem; color: var(--text-muted); }
.admin-table { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table th {
    background: #f9f9f9; padding: .85rem 1rem;
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); text-align: left;
}
.admin-table td { padding: .85rem 1rem; border-top: 1px solid var(--border); font-size: .87rem; }
.admin-table tr:hover td { background: var(--green-pale); }

/* Status Badges */
.status { padding: .25rem .75rem; border-radius: 50px; font-size: .73rem; font-weight: 600; }
.status-placed { background: #ebf8ff; color: #2b6cb0; }
.status-confirmed { background: #e6fffa; color: #276749; }
.status-shipped { background: #fff8e7; color: #7b4f12; }
.status-delivered { background: #f0fff4; color: #276749; }
.status-cancelled { background: #fff5f5; color: #c53030; }
.status-paid { background: #f0fff4; color: #276749; }
.status-pending { background: #fffff0; color: #744210; }
.status-active { background: #f0fff4; color: #276749; }
.status-inactive { background: #fff5f5; color: #c53030; }

/* ── MISC ── */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-muted); }
.empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: .3; }
.empty-state h3 { margin-bottom: .5rem; color: var(--text); }
.divider { height: 1px; background: var(--border); margin: 1.5rem 0; }
.tag { display: inline-block; padding: .2rem .6rem; background: var(--beige); border-radius: 4px; font-size: .75rem; font-weight: 500; }

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .hero-inner, .product-detail, .cart-layout, .account-layout, .footer-grid { grid-template-columns: 1fr; }
    .hero-image-wrap { display: none; }
    .cart-layout > div:last-child { order: -1; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { height: auto; position: relative; }
}
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FULL RESPONSIVE OVERHAUL
   Breakpoints: 1200px Desktop | 992px Laptop | 768px Tablet | 480px Mobile
   ============================================================ */

/* ── DESKTOP LARGE (1200px+) ── */
@media (min-width: 1200px) {
    .container { max-width: 1200px; }
}

/* ── LAPTOP (992px – 1199px) ── */
@media (max-width: 1199px) {
    .container { padding: 0 2rem; }
    .hero h1 { font-size: 3rem; }
    .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-table { overflow-x: auto; }
    .admin-table table { min-width: 700px; }
}

/* ── TABLET (768px – 991px) ── */
@media (max-width: 991px) {
    /* Header */
    .header-inner { height: 64px; gap: 1rem; }
    .btn-outline-sm { display: none; }

    /* Hero */
    .hero { padding: 3rem 0; }
    .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .hero-image-wrap { display: none; }
    .hero h1 { font-size: 2.6rem; }
    .hero p { max-width: 100%; }

    /* Benefits */
    .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(3, 1fr); }

    /* Why section - 2 col layout */
    .hero-inner > div:last-child { display: none; }

    /* Product detail */
    .product-detail { grid-template-columns: 1fr; gap: 2rem; }
    .product-gallery .main-img { max-width: 480px; margin: 0 auto; }

    /* Cart */
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }

    /* Account */
    .account-layout { grid-template-columns: 200px 1fr; gap: 1rem; }

    /* Checkout */
    .cart-layout { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; }

    /* Admin */
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar {
        height: auto; position: relative;
        display: flex; flex-wrap: wrap; align-items: center;
    }
    .admin-brand { padding: 1rem 1.5rem; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
    .admin-nav {
        display: flex; flex-wrap: wrap; flex-direction: row;
        padding: .5rem;
    }
    .admin-nav a { padding: .5rem .85rem; font-size: .78rem; border-left: none; border-bottom: 2px solid transparent; }
    .admin-nav a.active, .admin-nav a:hover { border-left: none; border-bottom-color: var(--green-light); }
    .admin-nav .nav-group-label { display: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-table { overflow-x: auto; }
    .admin-table table { min-width: 650px; }
}

/* ── MOBILE (max 767px) ── */
@media (max-width: 767px) {
    /* Global */
    .container { padding: 0 1rem; }

    /* Header */
    .header-inner { height: 60px; }
    .logo-main { font-size: 1.3rem; }
    .logo-sub { font-size: .6rem; }
    .icon-btn { width: 34px; height: 34px; font-size: .85rem; }
    .header-actions { gap: .3rem; }

    /* Hero */
    .hero { padding: 2.5rem 0 2rem; }
    .hero h1 { font-size: 2rem; line-height: 1.2; }
    .hero p { font-size: .92rem; }
    .hero-actions { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-trust { flex-wrap: wrap; gap: .75rem 1.25rem; }

    /* Section headings */
    .section { padding: 2.5rem 0; }
    .section-header { margin-bottom: 1.75rem; }
    .section-header h2 { font-size: 1.6rem; }

    /* Benefits */
    .benefits-strip { padding: 1.75rem 0; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .benefit-item i { font-size: 1.4rem; margin-bottom: .5rem; }
    .benefit-item h4 { font-size: .82rem; }
    .benefit-item p { font-size: .73rem; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .category-card { padding: 1.1rem .75rem; }
    .category-card i { font-size: 1.4rem; margin-bottom: .5rem; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .product-info { padding: .75rem .85rem 1rem; }
    .product-name { font-size: .85rem; }
    .price-current { font-size: 1rem; }
    .product-card .btn { font-size: .75rem; padding: .5rem .75rem; }

    /* Why section */
    .why-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

    /* Testimonials */
    .testimonials-grid { grid-template-columns: 1fr; }

    /* Newsletter */
    .newsletter-form { flex-direction: column !important; }
    .newsletter-form input { width: 100% !important; }

    /* Product Detail */
    .product-detail { padding: 1.5rem 0; gap: 1.5rem; }
    .product-info-detail h1 { font-size: 1.6rem; }
    .product-price-detail .current { font-size: 1.5rem; }
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; }
    .tabs-header { overflow-x: auto; white-space: nowrap; }
    .tab-btn { font-size: .78rem; padding: .55rem .85rem; }
    .product-thumbs img { width: 56px; height: 56px; }

    /* Cart */
    .cart-item { grid-template-columns: 64px 1fr auto; gap: .75rem; padding: .85rem; }
    .cart-item img { width: 64px; height: 64px; }
    .cart-summary { padding: 1.25rem; }

    /* Checkout */
    .checkout-grid { grid-template-columns: 1fr !important; }

    /* Account */
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { margin-bottom: 1rem; }
    .account-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
    .account-nav a { padding: .5rem .75rem; border-radius: 50px; font-size: .8rem; border: 1px solid var(--border); }
    .account-nav a.active { background: var(--green); color: #fff; border-color: var(--green); }
    .account-main { padding: 1.25rem; }

    /* Orders */
    .order-timeline .step-dot { width: 24px; height: 24px; font-size: .65rem; }

    /* Forms */
    .form-row { grid-template-columns: 1fr; }
    .form-control { font-size: .88rem; padding: .65rem .9rem; }

    /* Pages */
    .page-hero { padding: 2rem 0; margin-bottom: 2rem; }
    .page-hero h1 { font-size: 1.7rem; }

    /* Footer */
    .footer { padding: 3rem 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .footer-brand { text-align: center; }
    .social-links { justify-content: center; }
    .footer-links h4 { margin-bottom: .75rem; }
    .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }

    /* Admin */
    .admin-main { padding: 1rem; }
    .admin-topbar { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
    .admin-topbar h1 { font-size: 1.1rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .stat-card { padding: 1rem; }
    .stat-value { font-size: 1.2rem; }
    .admin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-table table { min-width: 580px; }
    .admin-table th, .admin-table td { padding: .65rem .75rem; font-size: .8rem; }

    /* Login page */
    .login-box { padding: 1.75rem 1.25rem !important; }
}

/* ── SMALL MOBILE (max 400px) ── */
@media (max-width: 400px) {
    .hero h1 { font-size: 1.75rem; }
    .products-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .benefits-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .product-detail { grid-template-columns: 1fr; }
    .section-header h2 { font-size: 1.4rem; }
    .btn-lg { padding: .75rem 1.5rem; font-size: .88rem; }
}

/* ── TOUCH DEVICE IMPROVEMENTS ── */
@media (hover: none) {
    .product-wishlist { opacity: 1; }
    .product-card:hover { transform: none; box-shadow: var(--shadow); }
    .btn:hover { transform: none; }
}

/* ── PRINT ── */
@media print {
    .header, .footer, .topbar, .btn, .cart-summary { display: none; }
    .order-timeline { break-inside: avoid; }
}

/* ── ADMIN MOBILE SIDEBAR ── */
@media (max-width: 991px) {
    #adminHamburger {
        display: flex !important;
        align-items: center; gap: .5rem;
        position: fixed; top: .75rem; right: 1rem;
        background: var(--green); color: #fff;
        border: none; border-radius: 8px;
        padding: .5rem 1rem; font-size: .85rem;
        font-weight: 600; cursor: pointer; z-index: 1002;
        font-family: var(--font-body);
    }
    .admin-sidebar {
        position: fixed; left: -260px; top: 0; bottom: 0;
        width: 240px; z-index: 1001;
        transition: left .28s ease;
        overflow-y: auto;
        flex-direction: column !important;
    }
    .admin-sidebar.open { left: 0; box-shadow: 4px 0 30px rgba(0,0,0,.25); }
    .admin-brand { display: block !important; width: auto !important; }
    .admin-nav { flex-direction: column !important; flex-wrap: nowrap !important; padding: 0 !important; }
    .admin-nav a { border-left: none !important; border-bottom: none !important; }
    .admin-nav a.active, .admin-nav a:hover { background: var(--green) !important; color: #fff !important; border-left: none !important; }
    .admin-nav .nav-group-label { display: block !important; }
    .admin-main { padding: 1rem 1rem 1rem; padding-top: 4rem; }

    /* Overlay when sidebar open */
    .admin-sidebar.open::after {
        content: '';
        position: fixed; top: 0; left: 240px; right: 0; bottom: 0;
        background: rgba(0,0,0,.4); z-index: -1;
    }
}

/* ── ADMIN TABLE RESPONSIVE CARDS on very small screens ── */
@media (max-width: 580px) {
    .admin-table { overflow-x: visible; }
    .admin-table table,
    .admin-table thead,
    .admin-table tbody,
    .admin-table th,
    .admin-table td,
    .admin-table tr { display: block; }
    .admin-table thead { display: none; }
    .admin-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: .75rem;
        padding: .75rem;
        background: var(--white);
    }
    .admin-table td {
        border: none; padding: .35rem .25rem;
        font-size: .82rem; display: flex;
        justify-content: space-between; align-items: center;
    }
    .admin-table td::before {
        content: attr(data-label);
        font-weight: 600; font-size: .75rem;
        color: var(--text-muted); text-transform: uppercase;
        letter-spacing: .04em; min-width: 90px;
    }
    .admin-table td:first-child { display: flex !important; }
}

/* ── CHECKOUT / ORDERS / ADMIN TWO-COL GRIDS ── */
@media (max-width: 767px) {
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    /* Sticky summary becomes normal flow on mobile */
    .cart-summary { position: static !important; }
}

/* ── PRODUCT DETAIL ACTIONS ON MOBILE ── */
@media (max-width: 480px) {
    .product-actions { flex-direction: column; gap: .5rem; }
    .product-actions .btn { width: 100% !important; }
    .qty-control { justify-content: flex-start; }
}

/* ── ABOUT PAGE WHY GRID ── */
@media (max-width: 767px) {
    .why-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ── CONTACT PAGE GRID ── */
@media (max-width: 767px) {
    .contact-grid { grid-template-columns: 1fr !important; }
}

/* ── SMOOTH TRANSITIONS ── */
.admin-sidebar { transition: left .28s cubic-bezier(.4,0,.2,1); }
.nav-main { transition: none; }

/* ── LOGO IMAGE ── */
.logo-img-wrap {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.site-logo-img {
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* ── LOGO SIZE RESTRICTION ── */
#header img {
    max-height: 52px !important;
    width: auto !important;
    max-width: 140px !important;
    mix-blend-mode: multiply;
}
.footer img.site-logo-img {
    max-height: 70px !important;
    max-width: 200px !important;
    width: auto !important;
    mix-blend-mode: multiply;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-main {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--green);
    line-height: 1;
}

.logo-sub {
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: .15rem;
}

/* Footer logo text color override */
.footer-logo .logo-main { color: var(--green); }
.footer-logo .logo-sub  { color: var(--text-muted); }

/* Footer logo — slightly larger bird */
.footer-logo-img {
    height: 56px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* Responsive logo sizes */
@media (max-width: 767px) {
    .site-logo-img  { height: 44px !important; max-width: 120px !important; }
    .footer-logo-img{ height: 44px; width: auto; max-width: 150px; }
    .logo-main      { font-size: 1.25rem; }
}
@media (max-width: 400px) {
    .site-logo-img  { height: 38px !important; max-width: 105px !important; }
    .logo-main      { font-size: 1.1rem; }
}

/* ============================================================
   HAMBURGER MENU — COMPLETE REWRITE
   ============================================================ */



/* ============================================================
   GLOBAL RESPONSIVE FIXES — ALL DEVICES
   ============================================================ */

/* ── PREVENT HORIZONTAL SCROLL ON ALL DEVICES ── */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── TOPBAR RESPONSIVE ── */
@media (max-width: 480px) {
    .topbar { font-size: .68rem; padding: .4rem .5rem; line-height: 1.5; }
}

/* ── HEADER FULLY RESPONSIVE ── */
@media (max-width: 768px) {
    .header-inner { height: 60px !important; padding: 0 1rem; }
    .header-actions { gap: .2rem; }
    .icon-btn { width: 32px; height: 32px; font-size: .8rem; }
    #header img { max-height: 38px !important; width: auto !important; }
    .site-logo-img { height: 38px !important; }
    .search-bar form { flex-direction: column; }
    .search-bar input, .search-bar button { width: 100%; border-radius: 8px; }
}

/* ── HERO RESPONSIVE ── */
@media (max-width: 768px) {
    .hero { padding: 2rem 0; }
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: .88rem; }
    .hero-badge { font-size: .7rem; }
    .hero-actions .btn { padding: .7rem 1.4rem; font-size: .85rem; }
    .hero-trust { gap: .6rem 1rem; }
    .trust-item { font-size: .78rem; }
}

/* ── BENEFITS STRIP ── */
@media (max-width: 540px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem; }
    .benefit-item { padding: .5rem; }
    .benefit-item i { font-size: 1.3rem; }
    .benefit-item h4 { font-size: .78rem; }
    .benefit-item p { display: none; }
}

/* ── PRODUCTS GRID ── */
@media (max-width: 480px) {
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }
    .product-info { padding: .65rem .75rem .85rem; }
    .product-name { font-size: .8rem; -webkit-line-clamp: 2; }
    .price-current { font-size: .95rem; }
    .product-card .btn { font-size: .72rem; padding: .45rem .6rem; }
    .product-badge { font-size: .65rem; padding: .15rem .5rem; }
}

/* ── CATEGORIES ── */
@media (max-width: 480px) {
    .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }
    .category-card { padding: .9rem .6rem; }
    .category-card i { font-size: 1.3rem; margin-bottom: .4rem; }
    .category-card h4 { font-size: .78rem; }
    .category-card p { display: none; }
}

/* ── SECTION HEADINGS ── */
@media (max-width: 480px) {
    .section { padding: 2rem 0; }
    .section-header { margin-bottom: 1.25rem; }
    .section-header h2 { font-size: 1.5rem; }
    .section-header p { font-size: .83rem; }
    .section-label { font-size: .68rem; }
}

/* ── WHY SECTION ── */
@media (max-width: 768px) {
    .why-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .why-grid > div:last-child { padding: 2rem 1.25rem !important; }
    .why-grid > div:last-child > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2,1fr) !important;
    }
}

/* ── TESTIMONIALS ── */
@media (max-width: 640px) {
    .testimonials-grid { grid-template-columns: 1fr !important; }
}

/* ── NEWSLETTER ── */
@media (max-width: 540px) {
    .newsletter-form, [style*="display:flex"][style*="gap:.75rem"][style*="max-width:440px"] {
        flex-direction: column !important;
    }
}

/* ── PRODUCT DETAIL ── */
@media (max-width: 768px) {
    .product-detail { grid-template-columns: 1fr !important; gap: 1.5rem; padding: 1.25rem 0; }
    .product-gallery .main-img { max-width: 100%; aspect-ratio: 1; }
    .product-info-detail h1 { font-size: 1.4rem; }
    .product-price-detail .current { font-size: 1.35rem; }
    .product-actions { flex-wrap: wrap; }
    .product-actions .btn { flex: 1; min-width: 140px; }
    .tabs-header { overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; white-space: nowrap; }
    .tab-btn { flex-shrink: 0; }
}

/* ── CART ── */
@media (max-width: 768px) {
    .cart-layout { grid-template-columns: 1fr !important; }
    .cart-item { grid-template-columns: 60px 1fr auto; gap: .6rem; padding: .75rem; }
    .cart-item img { width: 60px; height: 60px; }
    .cart-summary { position: static !important; }
}
@media (max-width: 480px) {
    .cart-item { grid-template-columns: 52px 1fr; }
    .cart-item > div:last-child { grid-column: 2; }
}

/* ── CHECKOUT ── */
@media (max-width: 768px) {
    .checkout-grid { grid-template-columns: 1fr !important; }
    .checkout-grid > div:last-child { order: -1; }
}

/* ── ACCOUNT ── */
@media (max-width: 768px) {
    .account-layout { grid-template-columns: 1fr !important; }
    .account-sidebar { margin-bottom: 1rem; }
    .account-nav { display: flex !important; flex-wrap: wrap; gap: .35rem; }
    .account-nav a {
        padding: .45rem .85rem !important;
        border-radius: 50px !important;
        border: 1.5px solid var(--border);
        font-size: .78rem !important;
        margin-bottom: 0 !important;
    }
    .account-nav a.active { background: var(--green); color: #fff; border-color: var(--green); }
    .account-main { padding: 1rem !important; }
    .account-avatar { width: 50px; height: 50px; font-size: 1.1rem; }
}

/* ── ORDERS TRACKING ── */
@media (max-width: 768px) {
    /* Order progress steps - scroll horizontally on mobile */
    .order-progress { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .order-progress > div { min-width: 500px; }
    .checkout-grid { grid-template-columns: 1fr !important; }
}

/* ── PAGE HERO ── */
@media (max-width: 480px) {
    .page-hero { padding: 1.5rem 0; margin-bottom: 1.5rem; }
    .page-hero h1 { font-size: 1.5rem; }
    .page-hero p { font-size: .83rem; }
    .breadcrumb { font-size: .75rem; padding: .6rem 0; }
}

/* ── FORMS ── */
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr !important; }
    .form-control { font-size: .85rem; padding: .6rem .85rem; }
    .btn-lg { padding: .75rem 1.25rem; font-size: .85rem; }
    .btn-full { font-size: .85rem; }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
    .footer { margin-top: 2rem; padding: 2.5rem 0 0; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem; }
    .footer-brand { grid-column: 1 / -1; text-align: center; }
    .social-links { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: .4rem; text-align: center; font-size: .75rem; }
    .footer .site-logo-img { max-height: 50px !important; }
}
@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-links { text-align: center; }
}

/* ── LOGIN PAGE ── */
@media (max-width: 480px) {
    .login-box { padding: 1.5rem 1rem !important; margin: 0 .5rem !important; }
}

/* ── PROSE (POLICY PAGES) ── */
@media (max-width: 480px) {
    .prose h2 { font-size: 1.2rem; }
    .prose p, .prose ul li { font-size: .85rem; }
}

/* ── FAQ ── */
@media (max-width: 480px) {
    .faq-item button { font-size: .85rem !important; padding: .9rem 1rem !important; }
}

/* ── ADMIN RESPONSIVE ── */
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: .75rem; }
    .stat-card { padding: 1rem; gap: .75rem; }
    .stat-icon { width: 40px; height: 40px; font-size: 1rem; }
    .stat-value { font-size: 1.2rem; }
    .admin-topbar { flex-wrap: wrap; gap: .5rem; }
    .admin-topbar h1 { font-size: 1rem; }
    .admin-main { padding: .85rem; padding-top: 4rem !important; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    #adminHamburger { font-size: .78rem; padding: .45rem .75rem; }
}

/* ── TOUCH IMPROVEMENTS ── */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover { transform: none; box-shadow: var(--shadow); }
    .product-wishlist { opacity: 1 !important; }
    .btn:active { opacity: .85; transform: scale(.98); }
    a:active { opacity: .8; }
}

/* ── SAFE AREA (iPhone notch) ── */
@supports (padding: max(0px)) {
    .header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
    .topbar { padding-left: max(.5rem, env(safe-area-inset-left)); padding-right: max(.5rem, env(safe-area-inset-right)); }
}

/* ── BUTTON FEEDBACK STATES ── */
.btn-success-state {
    background: #27ae60 !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(39,174,96,.3) !important;
}
.btn[disabled] {
    opacity: .8;
    cursor: not-allowed;
    transform: none !important;
}
.btn .fa-spinner { animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PREMIUM DESIGN UPGRADES
   ============================================================ */

/* ── PREMIUM SECTION TRANSITIONS ── */
.section { position: relative; }

/* ── PRODUCT IMAGE OVERLAY ── */
.product-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.04), transparent);
    pointer-events: none;
    transition: opacity .3s;
}
.product-card:hover .product-image::after { opacity: 0; }

/* ── PREMIUM HERO ── */
.hero {
    background: linear-gradient(135deg, #f8fdf4 0%, #ffffff 50%, #f0f7eb 100%) !important;
    position: relative;
}
.hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── GOLD ACCENT on badges ── */
.badge-sale { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
.badge-featured { background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important; color: #fff !important; }

/* ── PREMIUM FORM INPUTS ── */
.form-control {
    border-radius: 10px !important;
    border-color: var(--border);
    transition: all .2s cubic-bezier(.22,1,.36,1) !important;
}
.form-control:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(42,74,18,.07), 0 2px 8px rgba(42,74,18,.06) !important;
    transform: translateY(-1px);
}

/* ── PREMIUM ACCOUNT SIDEBAR ── */
.account-sidebar {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
}
.account-nav a.active {
    background: linear-gradient(135deg, var(--green-pale), #e0f0d4) !important;
    color: var(--green) !important;
    font-weight: 600 !important;
}

/* ── PREMIUM FOOTER ── */
.footer {
    border-top: 2px solid var(--border) !important;
    position: relative;
}
.footer::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 2px;
    background: linear-gradient(90deg, var(--green), var(--gold));
    border-radius: 2px;
}

/* ── PREMIUM PAGE HERO ── */
.page-hero {
    background: linear-gradient(135deg, #f2faea 0%, #ffffff 60%, #fafdf7 100%) !important;
    border-bottom: 1px solid var(--border) !important;
    position: relative; overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(74,124,47,.06), transparent 70%);
    border-radius: 50%;
}

/* ── PREMIUM STATUS BADGES ── */
.status {
    font-size: .72rem !important;
    letter-spacing: .03em !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

/* ── PREMIUM ADMIN SIDEBAR ── */
.admin-sidebar {
    border-right: 1px solid var(--border) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.03) !important;
}
.admin-brand {
    background: linear-gradient(135deg, #f8fdf4, #ffffff) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1.25rem 1.5rem !important;
}
.admin-nav a {
    transition: all .18s cubic-bezier(.22,1,.36,1) !important;
    margin: 2px .6rem !important;
}
.admin-nav a:hover, .admin-nav a.active {
    background: linear-gradient(135deg, var(--green), var(--green-mid)) !important;
    box-shadow: 0 2px 8px rgba(42,74,18,.25) !important;
    color: white !important;
}
.admin-nav a i { width: 16px; text-align: center; }

/* ── PREMIUM ADMIN STAT CARDS ── */
.stat-card {
    transition: all .25s cubic-bezier(.22,1,.36,1) !important;
    border-radius: var(--radius-lg) !important;
}
.stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
}
.stat-icon {
    border-radius: 14px !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.5) !important;
}
.stat-icon.green { background: linear-gradient(135deg, #dcf5c8, #c8ecb0) !important; }
.stat-icon.orange { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; }
.stat-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; }
.stat-icon.red { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; }

/* ── PREMIUM ADMIN TABLE ── */
.admin-table {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
}
.admin-table th {
    background: linear-gradient(180deg, #fafafa, #f5f5f5) !important;
    border-bottom: 2px solid var(--border) !important;
    font-size: .7rem !important;
}
.admin-table tr:hover td { background: #f9fdf5 !important; }

/* ── SCROLL ANIMATIONS ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.product-card, .stat-card, .testimonial-card {
    animation: fadeInUp .4s cubic-bezier(.22,1,.36,1) both;
}
.product-card:nth-child(1) { animation-delay: .05s; }
.product-card:nth-child(2) { animation-delay: .1s; }
.product-card:nth-child(3) { animation-delay: .15s; }
.product-card:nth-child(4) { animation-delay: .2s; }

/* ── PREMIUM BENEFITS STRIP ── */
.benefits-strip {
    background: linear-gradient(135deg, #1a3a0f 0%, #2A4A12 50%, #1a3a0f 100%) !important;
    position: relative; overflow: hidden;
}
.benefits-strip::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 100% at 20% 50%, rgba(74,124,47,.15), transparent),
        radial-gradient(ellipse 40% 80% at 80% 50%, rgba(201,168,76,.08), transparent);
}
.benefits-grid { position: relative; z-index: 1; }

/* ── PREMIUM NEWSLETTER ── */
section > div[style*="background:var(--green)"] {
    background: linear-gradient(135deg, var(--green) 0%, #3d6b1f 100%) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ── HOVER LINK UNDERLINE ANIMATION ── */
.footer-links ul li a {
    position: relative; display: inline-block;
}
.footer-links ul li a::after {
    content: '';
    position: absolute; bottom: -1px; left: 0;
    width: 0; height: 1px;
    background: var(--green);
    transition: width .2s;
}
.footer-links ul li a:hover::after { width: 100%; }

/* ── SMOOTH PAGE TRANSITIONS ── */
* { transition-timing-function: cubic-bezier(.22,1,.36,1); }
a, button { transition-duration: .18s; }

/* ============================================================
   DEEP PREMIUM OVERHAUL — LUXURY NATURAL BRAND
   ============================================================ */

/* ── HERO COMPLETE REDESIGN ── */
.hero {
    padding: 5.5rem 0 5rem !important;
    background:
        radial-gradient(ellipse 70% 80% at 70% 50%, rgba(200,232,168,.35) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 10% 30%, rgba(232,245,216,.4) 0%, transparent 60%),
        linear-gradient(160deg, #f4fbee 0%, #ffffff 45%, #f0f8e8 100%) !important;
}
.hero h1 {
    font-size: clamp(2.6rem, 4.5vw, 4rem) !important;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
}
.hero h1 em {
    background: linear-gradient(135deg, var(--green) 0%, #5a9e35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}
.hero-badge {
    background: linear-gradient(135deg, rgba(42,74,18,.08), rgba(74,124,47,.12)) !important;
    border: 1px solid rgba(42,74,18,.15) !important;
    color: var(--green) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    padding: .45rem 1.1rem !important;
}
.hero-trust { gap: 1.75rem !important; margin-top: 2rem !important; }
.trust-item {
    font-size: .82rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}
.trust-item i { font-size: .9rem !important; }

/* Hero cards upgraded */
.hero-card {
    border-radius: 14px !important;
    padding: .75rem 1.1rem !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}
.hero-card strong { font-size: .82rem !important; font-weight: 700 !important; }
.hero-card span { font-size: .73rem !important; }

/* ── SECTION LABELS PREMIUM ── */
.section-label {
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    background: linear-gradient(135deg, rgba(42,74,18,.07), rgba(74,124,47,.1)) !important;
    border: 1px solid rgba(42,74,18,.12) !important;
    color: var(--green) !important;
}
.section-header h2 {
    letter-spacing: -.015em !important;
    font-weight: 600 !important;
}
.section-header p {
    font-size: .93rem !important;
    line-height: 1.75 !important;
}

/* ── CATEGORY CARDS PREMIUM ── */
.category-card {
    border-radius: var(--radius-lg) !important;
    padding: 1.75rem 1rem !important;
    transition: all .3s cubic-bezier(.22,1,.36,1) !important;
    cursor: pointer;
}
.category-card:hover {
    background: linear-gradient(135deg, var(--green-pale), #e0f0d0) !important;
    border-color: rgba(42,74,18,.2) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(42,74,18,.12) !important;
}
.category-card i {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--green-pale), #daf0c5);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .85rem;
    font-size: 1.4rem !important;
    box-shadow: 0 4px 12px rgba(42,74,18,.1);
}

/* ── PRODUCT CARDS LUXURY ── */
.product-card {
    border-radius: 18px !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
.product-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,.11), 0 4px 16px rgba(0,0,0,.06) !important;
    transform: translateY(-8px) !important;
}
.product-category {
    letter-spacing: .1em !important;
    font-size: .68rem !important;
}
.product-name {
    font-weight: 600 !important;
    font-size: .9rem !important;
    letter-spacing: -.01em !important;
}
.price-current {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--green), #3d8020);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── BENEFITS STRIP ── */
.benefit-item i {
    width: 52px; height: 52px;
    background: rgba(255,255,255,.1);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .85rem;
    font-size: 1.5rem !important;
    border: 1px solid rgba(255,255,255,.1);
}
.benefit-item h4 { font-size: .9rem !important; font-weight: 600 !important; }

/* ── TESTIMONIAL CARDS ── */
.testimonial-card {
    border-radius: 18px !important;
    padding: 1.75rem !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    transition: all .3s cubic-bezier(.22,1,.36,1) !important;
    position: relative; overflow: hidden;
}
.testimonial-card::before {
    content: '"';
    position: absolute; top: 1rem; right: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 5rem; line-height: 1;
    color: var(--green); opacity: .06;
    pointer-events: none;
}
.testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.08) !important;
}
.testimonial-stars { font-size: 1rem !important; letter-spacing: .05em !important; }

/* ── PREMIUM HEADER ── */
.header-inner { height: 68px; }

/* ── PAGE HERO PREMIUM ── */
.page-hero h1 {
    font-size: 2.4rem !important;
    letter-spacing: -.02em !important;
    font-weight: 600 !important;
}

/* ── LOGIN PAGE PREMIUM ── */
.login-box {
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.05) !important;
}

/* ── ACCOUNT CARDS ── */
.account-main {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

/* ── ORDER STATUS PREMIUM ── */
.order-progress > div > div {
    background: #fff;
    border-radius: 12px;
    padding: .5rem;
}

/* ── BREADCRUMB ── */
.breadcrumb {
    font-size: .78rem !important;
    font-weight: 500 !important;
}
.breadcrumb a:hover { color: var(--green); }

/* ── PROSE PAGES ── */
.prose h2 {
    font-size: 1.55rem !important;
    letter-spacing: -.015em !important;
}
.prose p { font-size: .9rem !important; }

/* ── SCROLL BAR STYLING ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ── TEXT SELECTION ── */
::selection { background: rgba(42,74,18,.15); color: var(--green); }

/* ── LINKS ── */
a { transition: color .18s, opacity .18s !important; }

/* ── ADMIN PREMIUM TOPBAR ── */
.admin-topbar {
    background: linear-gradient(135deg, #fafdf7, #ffffff) !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 1.75rem !important;
}
.admin-topbar h1 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}

/* ── ADMIN STAT VALUES ── */
.stat-value {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    background: linear-gradient(135deg, var(--text), #374151);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   MOBILE HEADER & DRAWER — CLEAN REWRITE
   ============================================================ */

/* Hamburger — hidden on desktop, visible on mobile */
.hamburger { display: none; }

/* Mobile drawer — completely hidden until opened */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px;
    background: #ffffff !important;
    z-index: 9999 !important;
    flex-direction: column;
    box-shadow: -4px 0 60px rgba(0,0,0,.25);
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    visibility: hidden;
    overflow-y: auto;
}
.mobile-drawer.open {
    display: flex !important;
    transform: translateX(0) !important;
    visibility: visible !important;
}

/* Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9998 !important;
}
.nav-overlay.active { display: block !important; }
.nav-overlay.active { display: block; }

/* Drawer header */
.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #f8fdf4, #fff);
}
.mobile-drawer-header button {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--beige);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    transition: all .2s;
}
.mobile-drawer-header button:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

/* Drawer nav links */
.mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: .75rem 0;
    overflow-y: auto;
    flex: 1;
}
.mobile-drawer-nav a {
    display: flex !important;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
    font-size: .92rem;
    font-weight: 600;
    color: #0f1a0a !important;
    text-decoration: none;
    border-bottom: 1px solid #f0ede8;
    transition: background .15s, padding .15s;
    background: #ffffff !important;
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav a:active {
    background: var(--green-pale);
    color: var(--green);
    padding-left: 1.75rem;
}
.mobile-drawer-nav a i {
    width: 16px;
    text-align: center;
    color: var(--green);
    font-size: .85rem;
}
.mobile-drawer-divider {
    height: 1px;
    background: var(--border);
    margin: .5rem 0;
}
.mobile-login-link {
    background: linear-gradient(135deg, var(--green), var(--green-mid)) !important;
    color: #fff !important;
    margin: 1rem 1.25rem !important;
    border-radius: 10px !important;
    justify-content: center !important;
    padding: .85rem 1.5rem !important;
    border-bottom: none !important;
    font-weight: 600 !important;
}
.mobile-login-link i { color: #fff !important; }
.mobile-login-link:hover { opacity: .9 !important; padding-left: 1.5rem !important; }

/* ── SHOW HAMBURGER + DRAWER ON MOBILE ── */
@media (max-width: 768px) {
    /* Hide desktop nav */
    .nav-main { display: none !important; }
    .btn-outline-sm { display: none !important; }

    /* Show hamburger — right side of header-actions */
    .hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: 8px;
        background: var(--green-pale);
        border: 1.5px solid rgba(42,74,18,.15);
        color: var(--green);
        font-size: 1.1rem;
        cursor: pointer;
        flex-shrink: 0;
        transition: all .2s;
        order: 99; /* always last = rightmost */
    }
    .hamburger:hover {
        background: var(--green);
        color: #fff;
        border-color: var(--green);
    }

    /* Show drawer as flex when open */
    .mobile-drawer {
        display: flex;
    }

    /* Header stays clean — no nav cluttering it */
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px !important;
        padding: 0 1rem;
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: .3rem;
        margin-left: auto;
    }
}

/* ============================================================
   NEW HOMEPAGE SECTIONS — ALARA + HUGG INSPIRED COMBO
   ============================================================ */

/* ── SCROLLING PURITY TICKER ── */
.purity-ticker {
    background: linear-gradient(135deg, #1a3a0f 0%, #2A4A12 100%);
    padding: .6rem 0;
    overflow: hidden;
    position: relative;
}
.purity-ticker::before,
.purity-ticker::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
    pointer-events: none;
}
.purity-ticker::before { left: 0; background: linear-gradient(to right, #1a3a0f, transparent); }
.purity-ticker::after  { right: 0; background: linear-gradient(to left, #2A4A12, transparent); }

.purity-ticker-inner {
    display: flex; gap: 0;
    width: max-content;
    animation: tickerScroll 30s linear infinite;
}
.purity-ticker-inner span {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem 1.5rem;
    font-size: .75rem; font-weight: 700;
    color: rgba(255,255,255,.9);
    letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,.12);
}
.purity-ticker-inner span i { color: #9fda6f; font-size: .7rem; }
.purity-ticker-inner:hover { animation-play-state: paused; }

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

/* ── PROBLEM → SOLUTION STRIP ── */
.problem-solution-strip {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
}
.ps-inner {
    display: flex; align-items: center;
    gap: 2rem; justify-content: center;
    flex-wrap: wrap;
}
.ps-problem, .ps-solution {
    flex: 1; min-width: 200px; max-width: 340px;
}
.ps-problem { text-align: right; }
.ps-solution { text-align: left; }
.ps-label {
    font-size: .68rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: .35rem;
}
.ps-problem .ps-label { color: #dc2626; }
.ps-solution .ps-label { color: var(--green); }
.ps-text { font-size: .88rem; line-height: 1.6; color: var(--text-muted); }
.ps-text strong { color: var(--text); }
.ps-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-mid));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(42,74,18,.25);
}
@media (max-width: 640px) {
    .ps-inner { flex-direction: column; text-align: center !important; gap: 1rem; }
    .ps-problem, .ps-solution { text-align: center !important; }
    .ps-arrow { transform: rotate(90deg); }
}

/* ── BUNDLE BANNER ── */
.bundle-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: linear-gradient(135deg, #1a3a0f 0%, #2A4A12 60%, #3d6b1f 100%);
    border-radius: 28px;
    padding: 3.5rem;
    position: relative;
    overflow: hidden;
    color: white;
}
.bundle-banner::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(159,218,111,.12), transparent 70%);
    border-radius: 50%;
}
.bundle-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    border-radius: 50px; padding: .35rem .9rem;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.bundle-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700; line-height: 1.15;
    margin-bottom: 1rem; color: white;
}
.bundle-title em { color: #9fda6f; font-style: italic; }
.bundle-desc { font-size: .9rem; opacity: .8; line-height: 1.75; margin-bottom: 1.25rem; }
.bundle-price-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bundle-price-new { font-size: 2rem; font-weight: 800; color: #9fda6f; }
.bundle-price-old { font-size: 1rem; opacity: .55; text-decoration: line-through; }
.bundle-save {
    background: rgba(159,218,111,.2);
    border: 1px solid rgba(159,218,111,.35);
    color: #9fda6f; padding: .2rem .65rem;
    border-radius: 50px; font-size: .75rem; font-weight: 700;
}
.bundle-features { display: flex; gap: 1rem; flex-wrap: wrap; }
.bundle-features span {
    font-size: .8rem; opacity: .8;
    display: flex; align-items: center; gap: .35rem;
}
.bundle-features i { color: #9fda6f; }

/* Bundle right side */
.bundle-right { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.bundle-products { display: flex; align-items: flex-end; gap: -10px; }
.bundle-product-card {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    width: 110px;
    transition: all .25s;
}
.bundle-product-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.15); }
.bundle-product-center {
    transform: translateY(-12px) scale(1.08);
    background: rgba(159,218,111,.15) !important;
    border-color: rgba(159,218,111,.3) !important;
    z-index: 1;
}
.bundle-product-icon { font-size: 2rem; margin-bottom: .5rem; }
.bundle-product-name { font-size: .75rem; font-weight: 600; color: white; line-height: 1.4; }
.bundle-product-name span { opacity: .6; font-size: .68rem; font-weight: 400; }
.bundle-badge {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    padding: .5rem 1.5rem;
    display: flex; align-items: center; gap: .75rem;
    font-size: .78rem; text-align: center;
}
.bundle-badge strong { color: #9fda6f; font-size: .9rem; }

@media (max-width: 900px) {
    .bundle-banner { grid-template-columns: 1fr; padding: 2rem; }
    .bundle-right { order: -1; }
}
@media (max-width: 480px) {
    .bundle-product-card { width: 90px; padding: .9rem .75rem; }
    .bundle-product-icon { font-size: 1.6rem; }
}

/* ── SOCIAL PROOF REVIEWS TICKER ── */
.reviews-ticker {
    background: var(--beige);
    padding: 1.25rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    display: flex; align-items: center;
}
.reviews-ticker-label {
    flex-shrink: 0;
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--green);
    background: var(--green-pale);
    border: 1px solid rgba(42,74,18,.15);
    border-radius: 50px;
    padding: .4rem 1rem;
    margin: 0 1.5rem;
    white-space: nowrap;
    z-index: 2;
}
.reviews-ticker-track {
    overflow: hidden; flex: 1;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.reviews-ticker-inner {
    display: flex; gap: 0;
    width: max-content;
    animation: reviewScroll 35s linear infinite;
}
.reviews-ticker-inner:hover { animation-play-state: paused; }

@keyframes reviewScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.review-tick {
    display: flex; align-items: center; gap: .6rem;
    padding: 0 2.5rem;
    font-size: .85rem;
    white-space: nowrap;
    border-right: 1px solid var(--border);
}
.rt-stars { color: #d69e2e; letter-spacing: .05em; }
.rt-name { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* ============================================================
   HERO CARD SLIDER + CUSTOMER STORY SLIDER
   ============================================================ */

/* ── HERO CARD SLIDER ── */
.hs-slide:not(.active) .hero-slider-wrap { opacity: 0; pointer-events: none; }
.hero-slider-wrap {
    position: absolute;
    left: -160px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: .5rem;
    z-index: 10;
    width: 280px;
}
.hero-slider-track {
    width: 220px;
    overflow: hidden;
}
.hero-card-slide {
    display: none;
    animation: cardSlide .35s cubic-bezier(.22,1,.36,1);
}
.hero-card-slide.active { display: block; }
@keyframes cardSlide {
    from { opacity:0; transform: translateX(20px); }
    to   { opacity:1; transform: translateX(0); }
}
.hero-card {
    background: var(--white);
    border-radius: 14px !important;
    padding: .85rem 1rem !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.10) !important;
    display: flex; align-items: center; gap: .75rem !important;
    font-size: .82rem !important; white-space: nowrap;
    min-width: 180px;
}
.hero-card-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
}
.hero-card strong { display: block; font-weight: 700; font-size: .85rem; color: var(--text); }
.hero-card span   { color: var(--text-muted); font-size: .73rem; }

.hero-slider-btn {
    width: 30px; height: 30px; border-radius: 50%;
    background: white; border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; cursor: pointer; color: var(--text);
    transition: all .2s; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hero-slider-btn:hover { background: var(--green); color: white; border-color: var(--green); }

/* ── CUSTOMER STORY SLIDER ── */
.customer-stories-section { background: var(--beige); }

.cs-slider-wrap {
    display: flex; align-items: center; gap: 1rem;
    position: relative;
}
.cs-track-outer {
    flex: 1;
    overflow: hidden;
    border-radius: 0;
    position: relative;
}
.cs-track {
    display: flex;
    gap: 24px;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.cs-track:active { cursor: grabbing; }
.cs-card {
    flex-shrink: 0;
    /* width set by JS dynamically */
}
.cs-card-inner {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    border: 1px solid var(--border);
    position: relative; overflow: hidden;
    transition: all .3s cubic-bezier(.22,1,.36,1);
}
.cs-card-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,.09);
    border-color: transparent;
}
.cs-quote-icon {
    position: absolute; top: 1rem; right: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 5rem; line-height: 1;
    color: var(--green); opacity: .07;
    pointer-events: none;
}
.cs-stars { color: #d69e2e; font-size: 1rem; letter-spacing:.05em; margin-bottom:.75rem; }
.cs-text {
    font-size: .88rem; color: var(--text-muted);
    line-height: 1.8; margin-bottom: 1rem;
    display: -webkit-box; -webkit-line-clamp: 6;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: 120px;
}
.cs-product-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--green-pale); color: var(--green);
    border-radius: 50px; padding: .25rem .75rem;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    margin-bottom: 1rem;
}
.cs-author { display: flex; align-items: center; gap: .75rem; }
.cs-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-mid));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.cs-name { font-weight: 700; font-size: .88rem; }
.cs-loc  { font-size: .75rem; color: var(--text-muted); }

.cs-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: white; border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; cursor: pointer; color: var(--text);
    transition: all .2s; flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.cs-btn:hover { background: var(--green); color: white; border-color: var(--green); box-shadow: 0 6px 20px rgba(42,74,18,.25); }

.cs-dots {
    display: flex; justify-content: center; gap: .5rem;
    margin-top: 1.5rem;
}
.cs-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border); cursor: pointer;
    transition: all .25s;
}
.cs-dot.active {
    background: var(--green);
    width: 24px; border-radius: 4px;
}

/* Responsive */
@media (max-width: 992px) {
    .cs-card { min-width: calc(50% - .75rem); }
}
@media (max-width: 640px) {
    .cs-card { min-width: 100%; }
    .cs-btn { width: 38px; height: 38px; font-size: .75rem; }
    .hs-slide:not(.active) .hero-slider-wrap { opacity: 0; pointer-events: none; }
.hero-slider-wrap { left: -120px; width: 230px; }
    .hero-slider-track { width: 180px; }
}

/* ============================================================
   SHOP LAYOUT FIX + HERO SLIDES
   ============================================================ */

/* ── SHOP LAYOUT — responsive ── */
.shop-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
}
.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (min-width: 1200px) {
    .shop-products-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) and (min-width: 769px) {
    .shop-products-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Fix Add to Cart button on mobile */
.product-card .btn {
    font-size: .82rem !important;
    padding: .6rem .75rem !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .shop-layout {
        grid-template-columns: 1fr !important;
    }
    /* Sidebar becomes horizontal scrollable category bar on mobile */
    .shop-layout aside {
        order: -1;
    }
    .shop-layout aside > div {
        display: flex !important;
        gap: .5rem !important;
        overflow-x: auto !important;
        padding: .75rem !important;
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shop-layout aside > div::-webkit-scrollbar { display: none; }
    .shop-layout aside h4 { display: none !important; }
    .shop-layout aside a {
        white-space: nowrap !important;
        padding: .4rem .9rem !important;
        background: var(--beige);
        border-radius: 50px !important;
        font-size: .8rem !important;
        border: 1.5px solid var(--border) !important;
        flex-shrink: 0;
    }
    .shop-layout aside a[style*="var(--green)"] {
        background: var(--green) !important;
        color: #fff !important;
        border-color: var(--green) !important;
    }
    .shop-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .85rem !important;
    }
    .product-card .btn {
        font-size: .75rem !important;
        padding: .55rem .5rem !important;
    }
    .product-name { font-size: .82rem !important; }
    .price-current { font-size: 1rem !important; }
}

/* ── HERO SLIDES ── */
.hero-slides {
    position: relative;
    overflow: hidden;
    width: 100%;
    isolation: isolate;
}
.hs-track {
    display: flex;
    width: 100%;
    transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.hs-slide {
    min-width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}
.hs-slide-inner {
    padding: 5rem 0 4.5rem;
    min-height: 520px;
    display: flex;
    align-items: center;
}

/* Promo slides (non-hero) */
.hs-promo-slide {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    color: #fff;
}
.hs-promo-slide.hs-light { color: var(--text); }
.hs-promo-tag {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px; padding: .35rem .9rem;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 1.5rem; color: rgba(255,255,255,.9);
}
.hs-promo-slide h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700; line-height: 1.2;
    margin-bottom: 1rem; color: inherit;
}
.hs-promo-slide p {
    font-size: 1rem; line-height: 1.75;
    opacity: .85; margin-bottom: 2rem;
    max-width: 520px; margin-left: auto; margin-right: auto;
}

/* Arrow buttons */
.hs-arrow {
    position: absolute; top: 50%; z-index: 20;
    transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: 1.5px solid rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; cursor: pointer; color: var(--text);
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    transition: all .2s;
}
.hs-arrow:hover { background: var(--green); color: white; border-color: var(--green); }
.hs-arrow-prev { left: 1.5rem; }
.hs-arrow-next { right: 1.5rem; }

/* Dots */
.hs-dots {
    position: absolute; bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: .5rem; z-index: 20;
}
.hs-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer; transition: all .25s;
    border: none;
}
.hs-dot.active {
    width: 24px; border-radius: 4px;
    background: white;
}

/* Mobile hero slides */
@media (max-width: 768px) {
    .hs-slide-inner { min-height: auto; padding: 3rem 0 4rem; }
    .hs-arrow { width: 36px; height: 36px; font-size: .75rem; }
    .hs-arrow-prev { left: .5rem; }
    .hs-arrow-next { right: .5rem; }
}

/* ── INLINE BIRD IMAGES (replacing leaf emoji/icons) ── */
.inline-bird-xs {
    height: 16px; width: auto;
    vertical-align: middle;
    mix-blend-mode: multiply;
    display: inline-block;
    margin-right: 4px;
}
.inline-bird-sm {
    height: 28px; width: auto;
    vertical-align: middle;
    mix-blend-mode: multiply;
    display: inline-block;
    margin-right: 6px;
}
.topbar .inline-bird-xs { filter: brightness(10); mix-blend-mode: normal; }

/* ============================================================
   PREMIUM COLOR & TYPOGRAPHY OVERHAUL
   ============================================================ */

/* ── DARKER BODY TEXT ── */
:root {
    --text:         #0f1a0a !important;   /* near-black with green tint */
    --text-muted:   #445530 !important;   /* dark olive green */
    --text-light:   #6b7c5a !important;   /* medium green-grey */
    --border:       #d4dcc8 !important;   /* slightly green border */
    --beige:        #f2f5ee !important;   /* very light green-white */
    --cream:        #f8faf5 !important;
}

body { color: #0f1a0a !important; }

/* ── HEADINGS — darker, stronger ── */
h1, h2, h3, h4, h5, h6 {
    color: #0a1508 !important;
    font-weight: 700 !important;
}
.section-header h2 { color: #0a1508 !important; font-size: 2.4rem !important; }
.section-header p { color: #445530 !important; font-size: .95rem !important; }

/* ── HEADER — stronger text ── */
.nav-main > a, .nav-dropdown > a {
    color: #0f1a0a !important;
    font-weight: 600 !important;
}
.nav-main > a:hover { color: var(--green) !important; }

/* ── PRODUCT CARDS ── */
.product-name { color: #0a1508 !important; font-weight: 700 !important; font-size: .92rem !important; }
.product-category { color: var(--green) !important; font-weight: 700 !important; }
.price-current {
    color: #1a4a0a !important;
    -webkit-text-fill-color: #1a4a0a !important;
    background: none !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
}
.price-original { color: #6b7c5a !important; }

/* ── CATEGORY CARDS ── */
.category-card h4 { color: #0a1508 !important; font-weight: 700 !important; font-size: .95rem !important; }
.category-card p { color: #445530 !important; font-size: .82rem !important; }

/* ── HERO TEXT ── */
.hero h1, .hero-inner h1 {
    color: #0a1508 !important;
    font-size: clamp(2.8rem, 4.5vw, 4.2rem) !important;
    font-weight: 800 !important;
}
.hero h1 em, .hero-inner h1 em {
    color: var(--green) !important;
    -webkit-text-fill-color: var(--green) !important;
    background: none !important;
}
.hero-subtitle { color: #2a3d1f !important; font-size: 1rem !important; font-weight: 500 !important; }
.trust-item { color: #2a3d1f !important; font-weight: 600 !important; }

/* ── FOOTER ── */
.footer { background: #f2f5ee !important; border-top: 2px solid #c8d4b8 !important; }
.footer h4 { color: #0a1508 !important; font-weight: 700 !important; }
.footer p, .footer a, .footer li a { color: #2a3d1f !important; font-weight: 500 !important; }
.footer a:hover { color: var(--green) !important; }
.footer-bottom { background: #e8ede0 !important; color: #0a1508 !important; font-weight: 500 !important; }

/* ── SECTION LABELS ── */
.section-label {
    color: var(--green) !important;
    font-weight: 800 !important;
    border-color: rgba(42,74,18,.25) !important;
    background: rgba(42,74,18,.07) !important;
}

/* ── CUSTOMER STORIES ── */
.cs-text { color: #2a3d1f !important; font-size: .9rem !important; -webkit-line-clamp: 6 !important; }
.cs-name { color: #0a1508 !important; font-weight: 800 !important; }
.cs-loc  { color: #445530 !important; font-weight: 500 !important; }
.cs-stars { color: #b8890a !important; font-size: 1.1rem !important; }
.cs-product-tag { background: rgba(42,74,18,.1) !important; color: #1a4008 !important; font-weight: 700 !important; }

/* ── CATEGORY ICON ── */
.category-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #ddf0c8, #c8e8a8);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--green);
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(42,74,18,.15);
}

/* ── PROBLEM SOLUTION STRIP ── */
.ps-text { color: #2a3d1f !important; font-weight: 500 !important; font-size: .9rem !important; }
.ps-text strong { color: #0a1508 !important; }

/* ── TOPBAR ── */
.topbar { font-weight: 600 !important; letter-spacing: .06em !important; }

/* ── BREADCRUMB ── */
.breadcrumb, .breadcrumb a, .breadcrumb span { color: #445530 !important; font-weight: 500 !important; }

/* ── PAGE HERO ── */
.page-hero h1 { color: #0a1508 !important; font-weight: 800 !important; }
.page-hero p  { color: #2a3d1f !important; font-weight: 500 !important; }

/* ── TESTIMONIALS ── */
.testimonial-text { color: #2a3d1f !important; font-size: .92rem !important; font-weight: 500 !important; }

/* ── ADMIN ── */
.admin-nav .nav-group-label { color: #445530 !important; font-weight: 700 !important; }
.stat-label { color: #2a3d1f !important; font-weight: 600 !important; }

/* ── BENEFIT ITEMS ── */
.benefit-item h4 { color: #fff !important; font-weight: 700 !important; }
.benefit-item p { color: rgba(255,255,255,.85) !important; }

/* ── BUNDLE BANNER ── */
.bundle-desc { color: rgba(255,255,255,.9) !important; font-weight: 500 !important; }

/* Customer story card uniform height */
.cs-card { height: 100%; }
.cs-card-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 320px;
}
.cs-text { flex: 1 !important; }
.cs-stars { font-size: 1.15rem !important; }