/* ══════════════════════════════════════════════════════════════
   Meliora Grocery — site.css
   Aesthetic: Organic Luxury · Earthy warmth × editorial precision
   ══════════════════════════════════════════════════════════════ */

/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
    --cream:       #FAF7F2;
    --warm-white:  #FEFCF8;
    --bark:        #2C2118;
    --bark-mid:    #4A3728;
    --earth:       #8B6F47;
    --clay:        #C17F4A;
    --sage:        #5B7B5E;
    --sage-light:  #8BA888;
    --sage-pale:   #EBF0EB;
    --gold:        #D4A843;
    --gold-light:  #F5E6C0;
    --rust:        #C4522A;
    --mist:        #E8E2D9;
    --shadow-sm:   0 2px 8px  rgba(44,33,24,.08);
    --shadow-md:   0 8px 32px rgba(44,33,24,.13);
    --shadow-lg:   0 20px 60px rgba(44,33,24,.18);
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-xl:   40px;
    --font-display:'Fraunces', Georgia, serif;
    --font-body:   'DM Sans', system-ui, sans-serif;
    --ease:        cubic-bezier(.4,0,.2,1);
    --t:           all .25s var(--ease);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::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(--bark);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    -webkit-font-smoothing:antialiased;
}
a      { text-decoration:none; color:inherit; }
img    { max-width:100%; display:block; }
button { cursor:pointer; font-family:var(--font-body); }

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
    position:sticky; top:0; z-index:100;
    background:rgba(250,247,242,.92);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--mist);
}
.nav-inner {
    max-width:1400px; margin:0 auto;
    padding:0 2rem; height:68px;
    display:flex; align-items:center; gap:2rem;
}
.brand {
    display:flex; align-items:center; gap:.55rem;
    font-family:var(--font-display); font-size:1.45rem; font-weight:500;
    white-space:nowrap;
}
.brand em { color:var(--sage); font-style:italic; }
.brand-icon { font-size:1.3rem; }
.brand-logo { height:34px; width:auto; border-radius:4px; flex-shrink:0; }

.nav-links { display:flex; gap:1.5rem; margin-left:1.5rem; }
.nav-link  {
    font-size:.88rem; font-weight:500; color:var(--earth);
    letter-spacing:.02em; transition:var(--t);
}
.nav-link:hover { color:var(--bark); }

.cart-pill {
    margin-left:auto;
    display:flex; align-items:center; gap:.45rem;
    background:var(--bark); color:var(--cream);
    padding:.5rem 1.15rem; border-radius:var(--radius-xl);
    font-size:.86rem; font-weight:500; transition:var(--t);
}
.cart-pill:hover { background:var(--bark-mid); transform:translateY(-1px); }
.cart-count {
    background:var(--gold); color:var(--bark);
    font-size:.72rem; font-weight:700;
    width:22px; height:22px; border-radius:50%;
    display:grid; place-items:center; transition:var(--t);
}
.cart-label { letter-spacing:.02em; }

/* ─── Page layout ────────────────────────────────────────────────────────── */
.page-main { flex:1; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    background:linear-gradient(135deg, var(--bark) 0%, var(--bark-mid) 55%, var(--earth) 100%);
    color:var(--cream); padding:5rem 2rem 4rem; position:relative; overflow:hidden;
}
.hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 20% 80%, rgba(91,123,94,.3)  0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(212,168,67,.2) 0%, transparent 50%);
}
.hero-inner { max-width:1400px; margin:0 auto; position:relative; z-index:1; }
.hero-eyebrow {
    font-size:.78rem; font-weight:600; letter-spacing:.15em;
    text-transform:uppercase; color:var(--sage-light); margin-bottom:1rem;
}
.hero-title {
    font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.8rem);
    font-weight:300; line-height:1.15; margin-bottom:1rem;
}
.hero-title em { font-style:italic; color:var(--gold); }
.hero-sub      { font-size:.95rem; color:rgba(250,247,242,.72); max-width:480px; line-height:1.65; }
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.shop-search {
    margin-top:1.6rem; max-width:620px;
    display:flex; align-items:center; gap:.65rem;
}
.shop-search-input {
    flex:1; min-width:0;
    height:50px; padding:0 1.15rem;
    border:1.5px solid rgba(250,247,242,.35);
    border-radius:var(--radius-xl);
    background:rgba(254,252,248,.96);
    color:var(--bark); font-family:var(--font-body); font-size:.95rem;
    outline:none; box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:var(--t);
}
.shop-search-input:focus {
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(212,168,67,.22), 0 12px 30px rgba(0,0,0,.16);
}
.shop-search-btn {
    height:50px; padding:0 1.25rem;
    border:none; border-radius:var(--radius-xl);
    background:var(--gold); color:var(--bark);
    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    font-size:.9rem; font-weight:700; transition:var(--t);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.shop-search-btn:hover { background:#E8B840; transform:translateY(-1px); }
.search-results-bar {
    max-width:1400px; margin:2rem auto 0; padding:0 2rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    color:var(--earth); font-size:.9rem;
}
.search-results-bar strong { color:var(--bark); }
.search-results-bar span { color:var(--sage); font-weight:700; }
.search-results-bar a,
.search-clear-link {
    color:var(--sage); font-weight:700; border-bottom:1px solid currentColor;
}
.search-results-bar a:hover,
.search-clear-link:hover { color:var(--bark); }
.search-clear-link { display:inline-block; margin-top:1rem; }

/* ─── Business-type jump nav ─────────────────────────────────────────────── */
.group-nav-wrap {
    position:sticky;
    top:68px;           /* flush under the 68px navbar */
    z-index:90;
    background:rgba(250,247,242,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--mist);
}
.group-nav {
    max-width:1400px; margin:0 auto;
    padding:.55rem 2rem;
    display:flex; gap:.35rem;
    overflow-x:auto; scrollbar-width:none;
}
.group-nav::-webkit-scrollbar { display:none; }
.group-nav-link {
    white-space:nowrap;
    padding:.38rem 1.05rem;
    border-radius:var(--radius-xl);
    font-size:.8rem; font-weight:600;
    color:var(--earth);
    border:1.5px solid transparent;
    letter-spacing:.02em;
    transition:var(--t);
}
.group-nav-link:hover  {
    background:var(--mist); color:var(--bark);
    border-color:var(--mist);
}
.group-nav-link.active {
    background:var(--bark); color:var(--cream);
    border-color:var(--bark);
    box-shadow:0 2px 8px rgba(44,33,24,.25);
}

/* ─── Products section ───────────────────────────────────────────────────── */
.products-section { max-width:1400px; margin:0 auto; padding:3rem 2rem 5rem; }

/* ─── Group colour themes ────────────────────────────────────────────────────
   Accent only — no background tinting, no card tinting.
   Colour is applied surgically: left border, count badge, card stripe, button.
   ─────────────────────────────────────────────────────────────────────────── */
.group-theme-0 { --g-accent:#4A6E4D; }   /* forest-green  */
.group-theme-1 { --g-accent:#A8720A; }   /* amber-gold    */
.group-theme-2 { --g-accent:#A8472A; }   /* terracotta    */
.group-theme-3 { --g-accent:#3F5F80; }   /* slate-blue    */
.group-theme-4 { --g-accent:#6E4A80; }   /* deep-plum     */
.group-theme-5 { --g-accent:#2E7070; }   /* teal          */
.group-theme-6 { --g-accent:#8A5C2A; }   /* warm-bronze   */
.group-theme-7 { --g-accent:#8A3A3A; }   /* dusty-rose    */

/* ── Section header: editorial left-border chapter marker ─────────────────── */
.business-group .section-header {
    border-left:5px solid var(--g-accent, var(--earth));
    padding-left:1.5rem;
    border-bottom:1px solid rgba(44,33,24,.07);
    padding-bottom:1.4rem;
    margin-bottom:2.25rem;
}
.business-group .section-title {
    font-size:2rem; font-weight:400;
    color:var(--bark);              /* always dark — accent lives in the border */
    letter-spacing:-.02em;
}
/* Count: solid accent badge — confident, not washed-out */
.business-group .section-count {
    display:inline-flex; align-items:center;
    background:var(--g-accent, var(--earth)); color:#fff;
    padding:.22rem .85rem;
    border-radius:var(--radius-xl);
    font-size:.7rem; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
}

/* ── Cards: uniform warm-white with a thin coloured top stripe ─────────────── */
.business-group .product-card {
    background:var(--warm-white);           /* uniform — never tinted */
    border-top:3px solid var(--g-accent, rgba(139,111,71,.18));
}
.business-group .card-category {
    color:var(--g-accent, var(--sage));
}
.business-group .card-add-btn:not(:disabled):hover {
    background:var(--g-accent, var(--sage));
    transform:rotate(90deg) scale(1.1);
}

/* ── Jump nav — themed active pill per group ──────────────────────────────── */
.group-nav-link[data-theme="0"].active { background:#4A6E4D; border-color:#4A6E4D; color:#fff; }
.group-nav-link[data-theme="1"].active { background:#A8720A; border-color:#A8720A; color:#fff; }
.group-nav-link[data-theme="2"].active { background:#A8472A; border-color:#A8472A; color:#fff; }
.group-nav-link[data-theme="3"].active { background:#3F5F80; border-color:#3F5F80; color:#fff; }
.group-nav-link[data-theme="4"].active { background:#6E4A80; border-color:#6E4A80; color:#fff; }
.group-nav-link[data-theme="5"].active { background:#2E7070; border-color:#2E7070; color:#fff; }
.group-nav-link[data-theme="6"].active { background:#8A5C2A; border-color:#8A5C2A; color:#fff; }
.group-nav-link[data-theme="7"].active { background:#8A3A3A; border-color:#8A3A3A; color:#fff; }

/* ── Group container: whitespace is the separator, not a coloured block ────── */
.business-group {
    margin-bottom:5rem;
    scroll-margin-top:130px;
    padding-top:.25rem;
}
.business-group:last-child { margin-bottom:0; }

.section-header {
    display:flex; align-items:center; gap:1.25rem;
    margin-bottom:2.5rem; padding-bottom:1.5rem;
    border-bottom:1px solid var(--mist);
}
.section-title { font-family:var(--font-display); font-size:1.75rem; font-weight:500; }
.section-count { font-size:.84rem; color:var(--earth); font-weight:500; }

/* ─── Product cards ──────────────────────────────────────────────────────── */
.products-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(255px,1fr));
    gap:1.4rem;
}

.product-card {
    background:var(--warm-white); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column; position:relative;
    border:1px solid rgba(139,111,71,.1);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product-card:hover         { transform:translateY(-8px); box-shadow:0 28px 56px rgba(44,33,24,.18), 0 6px 16px rgba(44,33,24,.08); }
.product-card.unavailable   { opacity:.68; }

.card-image-wrap {
    position:relative; aspect-ratio:4/3;
    background:var(--mist); overflow:hidden; cursor:pointer;
}
.card-image-wrap.no-click { cursor:not-allowed; }

.card-img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s var(--ease);
}
.card-image-wrap:hover .card-img { transform:scale(1.07); }

.card-img-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:3.8rem; color:var(--earth);
    background:linear-gradient(135deg, var(--mist), var(--gold-light));
}

.card-badge {
    position:absolute; top:.7rem; left:.7rem;
    padding:.28rem .65rem; border-radius:var(--radius-xl);
    font-size:.7rem; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase;
}
.badge-unavailable { background:rgba(196,82,42,.9);  color:#fff; }
.badge-location    { background:rgba(44,33,24,.75);  color:var(--cream); backdrop-filter:blur(4px); }
.badge-low         { background:rgba(212,168,67,.9); color:var(--bark); }

.add-overlay {
    position:absolute; inset:0;
    background:rgba(44,33,24,.38);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:var(--t);
}
.card-image-wrap:hover .add-overlay { opacity:1; }
.add-overlay-btn {
    background:var(--warm-white); color:var(--bark);
    padding:.65rem 1.35rem; border-radius:var(--radius-xl);
    font-size:.83rem; font-weight:600;
    transform:translateY(8px); transition:var(--t);
}
.card-image-wrap:hover .add-overlay-btn { transform:translateY(0); }

.card-body     { padding:1.2rem 1.2rem .9rem; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.card-category { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); }
.card-name     { font-family:var(--font-display); font-size:1.02rem; font-weight:500; line-height:1.3; color:var(--bark); }
.card-brand    { font-size:.78rem; color:var(--earth); }
.card-location { display:flex; align-items:center; gap:.3rem; font-size:.74rem; color:var(--sage); margin-top:.15rem; }

.card-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1.2rem 1.2rem;
    border-top:1px solid var(--mist);
}
.card-price    { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--bark); }
.card-qty      { font-size:.76rem; color:var(--earth); margin-top:.1rem; }
.card-add-btn  {
    background:var(--bark); color:var(--cream); border:none;
    width:38px; height:38px; border-radius:50%; font-size:1.3rem;
    display:grid; place-items:center; transition:var(--t); flex-shrink:0;
}
.card-add-btn:hover    { background:var(--sage); transform:rotate(90deg) scale(1.1); }
.card-add-btn:disabled { background:var(--mist); color:var(--earth); cursor:not-allowed; transform:none; }

/* ─── Cart page ──────────────────────────────────────────────────────────── */
.cart-page   { max-width:1000px; margin:0 auto; padding:3rem 2rem 5rem; }
.page-heading {
    font-family:var(--font-display); font-size:2.2rem;
    font-weight:300; margin-bottom:2rem; color:var(--bark);
}
.page-heading em { font-style:italic; color:var(--sage); }

.cart-layout {
    display:grid; grid-template-columns:1fr 330px;
    gap:2rem; align-items:start;
}

.cart-items-list { display:flex; flex-direction:column; gap:.9rem; }

.cart-item-card {
    background:var(--warm-white); border-radius:var(--radius-md);
    padding:1.2rem; display:flex; gap:1rem; align-items:center;
    box-shadow:var(--shadow-sm); border:1px solid rgba(139,111,71,.1);
    transition:var(--t);
}
.cart-item-card:hover { box-shadow:var(--shadow-md); }

.cart-item-img {
    width:80px; height:80px; border-radius:var(--radius-sm);
    object-fit:cover; flex-shrink:0;
}
.cart-item-img-placeholder {
    width:80px; height:80px; border-radius:var(--radius-sm);
    background:linear-gradient(135deg, var(--mist), var(--gold-light));
    display:grid; place-items:center; font-size:2rem; flex-shrink:0;
}
.cart-item-info  { flex:1; min-width:0; }
.cart-item-name  {
    font-family:var(--font-display); font-size:.98rem; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-item-city  { font-size:.74rem; color:var(--sage); margin-top:.15rem; }
.cart-item-price { font-size:.83rem; color:var(--earth); margin-top:.25rem; }

.qty-stepper {
    display:flex; align-items:center; gap:.45rem;
    background:var(--mist); border-radius:var(--radius-xl);
    padding:.28rem .55rem;
}
.qty-btn {
    background:none; border:none;
    width:26px; height:26px; border-radius:50%;
    font-size:1.05rem; color:var(--bark);
    display:grid; place-items:center; transition:var(--t);
}
.qty-btn:hover   { background:var(--bark); color:var(--cream); }
.qty-display     { font-weight:600; min-width:22px; text-align:center; font-size:.88rem; }

.cart-item-total  { font-family:var(--font-display); font-size:1rem; font-weight:700; min-width:90px; text-align:right; }
.cart-item-remove {
    background:none; border:none; color:var(--earth);
    padding:.4rem; border-radius:var(--radius-sm); transition:var(--t);
}
.cart-item-remove:hover { color:var(--rust); background:rgba(196,82,42,.1); }

.cart-summary-card {
    background:var(--bark); color:var(--cream);
    border-radius:var(--radius-lg); padding:2rem; position:sticky; top:88px;
}
.summary-title { font-family:var(--font-display); font-size:1.25rem; margin-bottom:1.5rem; color:var(--gold); }
.summary-row   { display:flex; justify-content:space-between; margin-bottom:.7rem; font-size:.88rem; color:rgba(250,247,242,.8); }
.summary-total {
    display:flex; justify-content:space-between;
    padding-top:.9rem; margin-top:.4rem;
    border-top:1px solid rgba(255,255,255,.2);
    font-family:var(--font-display); font-size:1.25rem;
}

.btn-checkout {
    display:block; width:100%; margin-top:1.4rem; padding:.95rem;
    background:var(--gold); color:var(--bark); border:none;
    border-radius:var(--radius-xl); font-size:.95rem; font-weight:700;
    text-align:center; transition:var(--t);
}
.btn-checkout:hover { background:#E8B840; transform:translateY(-2px); box-shadow:0 8px 20px rgba(212,168,67,.4); }
.btn-continue {
    display:block; width:100%; margin-top:.7rem; padding:.75rem;
    background:transparent; color:rgba(250,247,242,.7);
    border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-xl);
    font-size:.86rem; text-align:center; transition:var(--t);
}
.btn-continue:hover { color:var(--cream); border-color:var(--cream); }

/* ─── Checkout page ──────────────────────────────────────────────────────── */
.checkout-page { max-width:860px; margin:0 auto; padding:3rem 2rem 5rem; }

.checkout-card {
    background:var(--warm-white); border-radius:var(--radius-lg);
    padding:2rem; box-shadow:var(--shadow-sm);
    border:1px solid rgba(139,111,71,.1); margin-bottom:1.4rem;
}
.checkout-card-title {
    font-family:var(--font-display); font-size:1.25rem; font-weight:500;
    margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--mist);
}

.fulfillment-options { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:.5rem; }
.fulfillment-card {
    border:2px solid var(--mist); border-radius:var(--radius-md);
    padding:1.4rem; cursor:pointer; transition:var(--t); text-align:center;
}
.fulfillment-card:hover  { border-color:var(--sage-light); }
.fulfillment-card.selected { border-color:var(--sage); background:var(--sage-pale); }
.fulfillment-card input[type=radio] { display:none; }
.fulfillment-icon  { font-size:2.4rem; display:block; margin-bottom:.5rem; }
.fulfillment-label { font-weight:600; color:var(--bark); display:block; }
.fulfillment-sub   { font-size:.78rem; color:var(--earth); margin-top:.15rem; display:block; }

.form-group { margin-bottom:1.2rem; }
.form-label {
    display:block; font-size:.8rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    color:var(--earth); margin-bottom:.45rem;
}
.form-input {
    width:100%; padding:.82rem 1rem;
    border:1.5px solid var(--mist); border-radius:var(--radius-sm);
    font-family:var(--font-body); font-size:.93rem; color:var(--bark);
    background:var(--cream); transition:var(--t); outline:none;
}
.form-input:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(91,123,94,.12); }

.address-lookup-wrap   { position:relative; }
.address-lookup-btn {
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    background:var(--sage); color:#fff; border:none;
    padding:.48rem .9rem; border-radius:var(--radius-sm);
    font-size:.78rem; font-weight:600; transition:var(--t);
}
.address-lookup-btn:hover { background:var(--bark); }

.delivery-info-box {
    background:var(--sage-pale); border:1px solid var(--sage-light);
    border-radius:var(--radius-sm); padding:1rem 1.2rem;
    margin-top:.9rem; display:none;
}
.delivery-info-box.show { display:block; }
.delivery-info-row {
    display:flex; justify-content:space-between;
    font-size:.88rem; color:var(--bark); padding:.28rem 0;
}
.delivery-warning {
    background:var(--gold-light); border:1px solid var(--gold);
    border-radius:var(--radius-sm); padding:.75rem 1rem;
    font-size:.83rem; color:var(--bark); margin-top:.7rem; display:none;
}
.delivery-warning.show { display:block; }
.delivery-splits {
    display:none; margin-top:.75rem; border:1px solid var(--mist);
    border-radius:var(--radius-sm); overflow:hidden; background:#fff;
}
.delivery-splits.show { display:block; }
.delivery-split-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--mist);
    font-size:.86rem; color:var(--bark);
}
.delivery-split-row:last-child { border-bottom:0; }
.delivery-split-row span {
    display:block; margin-top:.16rem; color:var(--earth); font-size:.78rem;
}

.order-summary-box {
    background:var(--bark); color:var(--cream);
    border-radius:var(--radius-md); padding:1.4rem;
}
.osb-row   { display:flex; justify-content:space-between; margin-bottom:.55rem; font-size:.88rem; color:rgba(250,247,242,.8); }
.osb-total {
    display:flex; justify-content:space-between;
    padding-top:.75rem; margin-top:.3rem;
    border-top:1px solid rgba(255,255,255,.2);
    font-family:var(--font-display); font-size:1.35rem;
}

/* ─── Payment buttons ────────────────────────────────────────────────────── */
.payment-btns { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; }

.btn-paystack {
    padding:1.1rem; background:var(--sage); color:#fff; border:none;
    border-radius:var(--radius-md); font-size:.95rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    transition:var(--t);
}
.btn-paystack:hover { background:var(--bark); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-bank {
    padding:1.1rem; background:transparent; color:var(--bark);
    border:2px solid var(--bark); border-radius:var(--radius-md);
    font-size:.95rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    transition:var(--t);
}
.btn-bank:hover { background:var(--bark); color:var(--cream); transform:translateY(-2px); }

/* ─── Bank transfer modal ────────────────────────────────────────────────── */
.modal-backdrop {
    position:fixed; inset:0;
    background:rgba(44,33,24,.6);
    z-index:200; display:flex;
    align-items:center; justify-content:center; padding:1rem;
    opacity:0; visibility:hidden; transition:var(--t);
}
.modal-backdrop.open  { opacity:1; visibility:visible; }
.modal-box {
    background:var(--warm-white); border-radius:var(--radius-lg);
    padding:2rem; max-width:490px; width:100%; box-shadow:var(--shadow-lg);
    transform:translateY(20px); transition:var(--t);
}
.modal-backdrop.open .modal-box { transform:translateY(0); }
.modal-title { font-family:var(--font-display); font-size:1.35rem; color:var(--bark); }

.bank-account-card {
    background:var(--sage-pale); border:1px solid var(--sage-light);
    border-radius:var(--radius-md); padding:1.2rem; margin-bottom:.7rem;
}
.bank-name     { font-weight:700; color:var(--sage); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.bank-acc-name { font-family:var(--font-display); font-size:1.05rem; color:var(--bark); margin:.25rem 0; }
.bank-acc-num  { font-size:1.35rem; font-weight:700; color:var(--bark); letter-spacing:.08em; font-feature-settings:'tnum'; }

.upload-zone {
    border:2px dashed var(--mist); border-radius:var(--radius-md);
    padding:2rem; text-align:center; cursor:pointer;
    transition:var(--t); margin-top:1.4rem;
}
.upload-zone:hover, .upload-zone.dragover { border-color:var(--sage); background:var(--sage-pale); }
.upload-icon  { font-size:2.4rem; display:block; margin-bottom:.5rem; }
.upload-text  { font-size:.88rem; color:var(--earth); font-weight:500; }
.upload-hint  { font-size:.74rem; color:var(--earth); opacity:.7; margin-top:.25rem; }
#fileInput    { display:none; }

.upload-progress { display:none; margin-top:.9rem; }
.progress-bar    { height:4px; background:var(--mist); border-radius:2px; overflow:hidden; }
.progress-fill   { height:100%; background:var(--sage); width:0; transition:width .25s ease; }

/* ─── Confirmation page ──────────────────────────────────────────────────── */
.confirm-page {
    max-width:680px; margin:0 auto;
    padding:4rem 2rem 6rem; text-align:center;
}
.confirm-icon {
    width:88px; height:88px; background:var(--sage-pale);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:2.7rem; margin:0 auto 2rem;
}
.confirm-title    { font-family:var(--font-display); font-size:2.4rem; font-weight:300; margin-bottom:.5rem; }
.confirm-subtitle { color:var(--earth); margin-bottom:2.5rem; line-height:1.6; }
.confirm-ref {
    background:var(--bark); color:var(--gold);
    display:inline-block; padding:.55rem 1.5rem;
    border-radius:var(--radius-xl); font-family:var(--font-display);
    font-size:1.05rem; letter-spacing:.05em; margin-bottom:2.5rem;
}
.confirm-detail-card {
    background:var(--warm-white); border-radius:var(--radius-lg);
    padding:1.5rem; text-align:left; box-shadow:var(--shadow-sm);
    border:1px solid rgba(139,111,71,.1); margin-bottom:1.4rem;
}

/* ─── Shared helpers ─────────────────────────────────────────────────────── */
.info-label {
    font-size:.74rem; font-weight:600; letter-spacing:.07em;
    text-transform:uppercase; color:var(--sage); margin-bottom:.25rem;
}
.btn-primary {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.88rem 2rem; background:var(--bark); color:var(--cream);
    border:none; border-radius:var(--radius-xl);
    font-size:.93rem; font-weight:600; transition:var(--t);
}
.btn-primary:hover { background:var(--bark-mid); transform:translateY(-2px); }

.empty-state  { text-align:center; padding:5rem 2rem; color:var(--earth); }
.empty-icon   { font-size:3.8rem; margin-bottom:1rem; }
.empty-title  { font-family:var(--font-display); font-size:1.75rem; color:var(--bark); margin-bottom:.5rem; }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast {
    position:fixed; bottom:2rem; right:2rem;
    background:var(--bark); color:var(--cream);
    padding:1rem 1.5rem; border-radius:var(--radius-md);
    font-size:.88rem; max-width:310px; z-index:300;
    box-shadow:var(--shadow-lg); border-left:4px solid var(--gold);
    transform:translateY(130%); transition:transform .35s var(--ease);
}
.toast.show    { transform:translateY(0); }
.toast.success { border-left-color:var(--sage); }
.toast.error   { border-left-color:var(--rust); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    background:var(--bark); color:rgba(250,247,242,.6);
    padding:2rem; text-align:center;
}
.footer-inner { max-width:1400px; margin:0 auto; }
.footer-brand { font-family:var(--font-display); font-size:1.1rem; color:var(--cream); margin-bottom:.3rem; }
.footer-copy  { font-size:.8rem; }

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.spin { animation:spin .75s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px) {
    .cart-layout          { grid-template-columns:1fr; }
    .cart-summary-card    { position:static; }
}
@media (max-width:640px) {
    .fulfillment-options  { grid-template-columns:1fr; }
    .payment-btns         { grid-template-columns:1fr; }
    .hero                 { padding:3rem 1.5rem 2.5rem; }
    .shop-search          { flex-direction:column; align-items:stretch; }
    .shop-search-btn      { width:100%; }
    .search-results-bar   { padding:0 1rem; flex-direction:column; align-items:flex-start; }
    .products-section     { padding:2rem 1rem 3rem; }
    .nav-links            { display:none; }
    .checkout-page,
    .cart-page            { padding:2rem 1rem 3rem; }
}