:root {
    /* ── Page ── */
    --page-bg:              #ffffff;

    /* ── Topbar ── */
    --topbar-h:             74px;                  /* height */
    --topbar-bg:            #87ceeb;               /* sky blue */
    --topbar-bottom-radius: 18px;                  /* rounded bottom corners */
    --topbar-logo-h:        80px;                  /* logo height */
    --topbar-text:          #ffffff;
    --topbar-badge:         #d4a853;

    /* ── Text ── */
    --clr-dark:             #111111;
    --clr-mid:              #555555;
    --clr-light:            #aaaaaa;
    --clr-border:           #e8e8e8;

    /* ── Cards ── */
    --card-bg:              #ffffff;
    --card-img-bg:          #f7f7f7;
    --card-border:          #e0e0e0;
    --card-radius:          8px;
    --card-shadow:          0 2px 10px rgba(0,0,0,.07);
    --card-gap:             12px;
    --grid-margin:          20px;

    /* ── Card category text ── */
    --cat-clr:              #888888;

    /* ── Product hover buttons (match banner style) ── */
    --hover-shop-bg:        #2d6a4f;   /* Shop Now — green pill */
    --hover-shop-clr:       #ffffff;
    --hover-cart-bg:        #ffffff;   /* Add to Cart — white pill */
    --hover-cart-clr:       #111111;
    --hover-cart-border:    rgba(0,0,0,.22);

    /* ── Spec swatches/pills ── */
    --spec-opt-bg:          #ffffff;
    --spec-opt-clr:         #555;
    --spec-opt-sel-bg:      #111111;
    --spec-opt-sel-clr:     #ffffff;

    /* ── Banner ── */
    --banner-bg-from:       #e8f5e9;
    --banner-bg-to:         #c8e6c9;
    --banner-text:          #111111;
    --banner-sub-text:      #444444;
    --banner-tag-bg:        #ffffff;
    --banner-tag-clr:       #2d6a4f;
    --banner-shop-bg:       #2d6a4f;
    --banner-shop-clr:      #ffffff;
    --banner-cart-bg:       #ffffff;
    --banner-cart-clr:      #111111;
    --banner-cart-border:   rgba(0,0,0,.2);

    /* ── Bottombar newsletter bg ── */
    --bottombar-nl-bg:      #111111;

    /* ── WhatsApp FAB ── */
    --wa-bg:                #25d366;

    /* ── Fonts ── */
    --font-display:         'Cormorant Garamond', serif;
    --font-body:            'DM Sans', sans-serif;
    --tr:                   .25s ease;
}


/* ═══ Reset ═══════════════════════════════════════════════ */


/* ═══ WhatsApp FAB ════════════════════════════════════════ */
.wa-fab {
    position: fixed; bottom: 24px; right: 24px;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--wa-bg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,.45);
    z-index: 850;
    transition: transform var(--tr), box-shadow var(--tr);
    text-decoration: none;
}
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37,211,102,.55); }
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }

/* ═══ Bottom Bar ══════════════════════════════════════════ */
.bottombar { background: #fff; border-top: 1px solid var(--clr-border); margin-top: 40px; }
.bottombar__newsletter {
    background: var(--bottombar-nl-bg); color: #fff;
    text-align: center; padding: 48px 24px;
}
.bottombar__newsletter h2 {
    font-family: var(--font-display); font-size: 26px; font-weight: 600;
    letter-spacing: .08em; margin-bottom: 10px;
}
.bottombar__newsletter p {
    font-size: 13px; opacity: .8; max-width: 380px; margin: 0 auto 22px; line-height: 1.6;
}
.bottombar__newsletter-form {
    display: flex; max-width: 380px; margin: 0 auto;
    border: 1.5px solid rgba(255,255,255,.3); border-radius: 4px; overflow: hidden;
}
.bottombar__newsletter-form input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-size: 13px; padding: 12px 16px; font-family: inherit;
}
.bottombar__newsletter-form input::placeholder { color: rgba(255,255,255,.5); }
.bottombar__newsletter-form button {
    background: #fff; color: var(--clr-dark);
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    padding: 12px 20px; cursor: pointer; font-family: inherit;
    transition: background var(--tr);
}
.bottombar__newsletter-form button:hover { background: #e8e8e8; }
.bottombar__section { padding: 32px 24px 24px; border-bottom: 1px solid var(--clr-border); }
.bottombar__section h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; margin-bottom: 12px; }
.bottombar__section p  { font-size: 13px; color: var(--clr-mid); margin-bottom: 4px; }
.bottombar__section .hours { font-size: 12px; }
.bottombar__section a  { color: var(--clr-mid); font-size: 13px; }
.bottombar__accordion  { border-bottom: 1px solid var(--clr-border); }
.bottombar__accordion-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-align: left; background: none; border: none; cursor: pointer;
}
.bottombar__accordion-btn span { font-size: 20px; color: var(--clr-mid); }
.bottombar__accordion-body {
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    display: flex; flex-direction: column; padding: 0 24px;
}
.bottombar__accordion-body a {
    display: block; padding: 8px 0; font-size: 13px; color: var(--clr-mid);
    border-bottom: 1px solid var(--clr-border); transition: color var(--tr);
}
.bottombar__accordion-body a:last-child { border-bottom: none; margin-bottom: 12px; }
.bottombar__accordion-body a:hover { color: var(--clr-dark); }
/* .bottombar__social { padding: 28px 24px; border-bottom: 1px solid var(--clr-border); }
.bottombar__social h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; margin-bottom: 16px; }
.bottombar__social-icons { display: flex; gap: 18px; flex-wrap: wrap; }
.bottombar__social-icons a svg { width: 22px; height: 22px; color: var(--clr-mid); transition: color var(--tr); }
.bottombar__social-icons a:hover svg { color: var(--clr-dark); } */
.bottombar__copyright { padding: 18px 24px; text-align: center; font-size: 12px; color: var(--clr-light); }
.scroll-top {
    position: fixed; bottom: 86px; right: 24px;
    width: 42px; height: 42px;
    background: var(--clr-dark); color: #fff; border-radius: 50%; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.15); opacity: 0;
    transition: opacity var(--tr); z-index: 800; cursor: pointer; border: none;
}








/* --- UPDATED STYLES --- */