/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — all colours/sizes here, nothing hardcoded below
   ═══════════════════════════════════════════════════════════ */
: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 ═══════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--page-bg);
    color: var(--clr-dark);
    font-family: var(--font-body);
    font-size: 14px; line-height: 1.6;
    padding-top: var(--topbar-h);
}
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
   • sky-blue background
   • height 74px, logo 80px (can overflow slightly — use overflow:visible)
   • rounded bottom-left + bottom-right corners
   ═══════════════════════════════════════════════════════════ */
.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--topbar-bg);                 /* ← sky blue */
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    border-radius: 0 0 var(--topbar-bottom-radius) var(--topbar-bottom-radius);  /* ← rounded bottom */
    z-index: 900;
    box-shadow: 0 4px 16px rgba(135,206,235,.45);
    overflow: visible;                            /* allow tall logo to overflow */
}
.topbar__logo {
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 1;
}
.topbar__logo img {
    height: var(--topbar-logo-h);                /* ← 80px */
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.topbar__hamburger {
    display: flex; flex-direction: column; gap: 5px;
    width: 28px; padding: 4px 0; cursor: pointer;
}
.topbar__hamburger span {
    display: block; height: 2px;
    background: var(--topbar-text);              /* white bars on sky-blue */
    border-radius: 2px; transition: var(--tr);
}


.topbar__cart {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-icon svg {
    width: 24px;
    height: 24px;
}

.topbar__cart-badge {
    position: absolute;
    top: -7px;
    right: -8px;
    background: var(--topbar-badge);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

@media (max-width: 767px) {
    .topbar__cart {
        gap: 0;
    }

    .topbar__cart-total {
        display: none;
    }
}




.topbar__cart-total { font-size: 11px; color: rgba(255,255,255,.85); }

/* ═══ Sidebar overlay ══════════════════════════════════════ */
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 950; opacity: 0; pointer-events: none;
    transition: opacity var(--tr);
}
.sidebar-overlay.active { opacity: 1; pointer-events: all; }

/* ═══ Sidebar ══════════════════════════════════════════════ */
.user-sidebar {
    position: fixed; top: 0; left: 0;
    width: min(320px,85vw); height: 100dvh;
    background: #fff; z-index: 1000;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    overflow-y: auto;
}
.user-sidebar.open { transform: translateX(0); }
.user-sidebar__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--clr-border);
}
.user-sidebar__logo { height: 38px; object-fit: contain; }
.user-sidebar__close { font-size: 20px; color: var(--clr-mid); transition: color var(--tr); }
.user-sidebar__close:hover { color: var(--clr-dark); }
.user-sidebar__menu { list-style: none; padding: 16px 0; flex: 1; }
.user-sidebar__menu li a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 24px;
    font-size: 14px; font-weight: 500; letter-spacing: .3px;
    transition: background var(--tr);
}
.user-sidebar__menu li a:hover { background: #f5f5f5; }
.user-sidebar__menu li a span { font-size: 18px; }
.user-sidebar__footer {
    padding: 20px 24px; border-top: 1px solid var(--clr-border);
    font-size: 12px; color: var(--clr-mid); line-height: 2;
}

/* ═══ Section headers ══════════════════════════════════════ */
.special-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px var(--grid-margin) 12px;
    max-width: 1600px; margin: 0 auto; width: 100%;
}
.special-header h2 {
    font-family: var(--font-display);
    font-size: clamp(18px,3.5vw,28px);
    font-weight: 600; letter-spacing: .03em;
}
.btn-show-all {
    font-size: 12px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--clr-dark);
    background: none; border: none;
    border-bottom: 1.5px solid var(--clr-dark);
    padding-bottom: 2px; cursor: pointer;
    transition: opacity var(--tr);
}
.btn-show-all:hover { opacity: .55; }
.section-title { text-align: center; padding: 5px 20px 12px; }
.section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(18px,3.5vw,28px);
    font-weight: 600; letter-spacing: .03em;
}

/* ═══════════════════════════════════════════════════════════
   BANNER
   One flex row, never wraps. Text left, image right.
   Banner image: 1px margin top, right, bottom (flush left).
   ═══════════════════════════════════════════════════════════ */
.banner-outer {
    padding: 12px var(--grid-margin);
    display: flex; justify-content: center;
}
.banner-wrap {
    width: 100%; max-width: 1100px;
    background: linear-gradient(120deg, var(--banner-bg-from) 0%, var(--banner-bg-to) 100%);
    border-radius: 16px;
    border: 2px solid rgba(0,0,0,.07);         /* ← outline the full container */
    overflow: hidden;
    display: flex; flex-wrap: nowrap;          /* NEVER wraps — single row always */
    align-items: stretch;
    position: relative;
    min-height: 180px;
}
/* Decorative radial glow overlay */
.banner-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 75% 50%, rgba(255,255,255,.4) 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(255,255,255,.2) 0%, transparent 45%);
}
/* Text side */
.banner-content {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(20px,4vw,44px);
    color: var(--banner-text);
}
.banner-tag {
    display: inline-block;
    background: var(--banner-tag-bg); color: var(--banner-tag-clr);
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    padding: 4px 14px; border-radius: 20px;
    margin-bottom: 10px; width: fit-content;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.banner-content h3 {
    font-family: var(--font-body);
    font-size: clamp(16px,3.5vw,28px);
    font-weight: 700; line-height: 1.2; margin-bottom: 6px;
    color: var(--banner-text);
}
.banner-content p {
    font-size: clamp(11px,1.8vw,13px);
    color: var(--banner-sub-text);
    line-height: 1.5; margin-bottom: 18px; max-width: 340px;
}
.banner-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Banner — Shop Now pill (green) */
.btn-banner-shop {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 24px;
    background: var(--banner-shop-bg); color: var(--banner-shop-clr);
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    border-radius: 50px; border: none; cursor: pointer;
    font-family: var(--font-body);
    transition: opacity var(--tr);
    box-shadow: 0 2px 8px rgba(45,106,79,.3);
}
.btn-banner-shop:hover { opacity: .88; }

/* Banner — Add to Cart pill (white outline) */
.btn-banner-cart {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 24px;
    background: var(--banner-cart-bg); color: var(--banner-cart-clr);
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    border-radius: 50px; border: 1.5px solid var(--banner-cart-border);
    cursor: pointer; font-family: var(--font-body);
    transition: background var(--tr);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.btn-banner-cart:hover { background: #f0f0f0; }

/* Image side — 1px margin top, right, bottom; flush to left edge of its box */
.banner-img-box {
    position: relative; z-index: 1;
    flex: 0 0 clamp(140px,34%,360px);
    /* 1px gap on top, right, bottom; left edge flush */
    margin: 1px 1px 1px 0;
    border-radius: 0 14px 14px 0;
    overflow: hidden;
}


.banner-img-box img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
}




@media (max-width: 768px) {

    .banner-wrap {
        flex-direction: row;      /* ✅ keep same row */
        min-height: 140px;        /* 🔥 control overall height */
    }

    .banner-img-box {
        flex: 0 0 50%;            /* slightly bigger for mobile */
        height: auto;             /* ❌ remove weird stretching */
        display: flex;            /* 🔥 important */
    }

    .banner-img-box img {
        width: 100%;
        height: 99%;
        object-fit: cover;        /* fill nicely */
        object-position: center;
    }

    .banner-content {
        padding: 14px;
    }
}



/* ═══════════════════════════════════════════════════════════
   PRODUCT GRID
   flex + justify-content:center → partial last row auto-centres
   ═══════════════════════════════════════════════════════════ */
.product-grid {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: var(--card-gap);
    padding: 0 var(--grid-margin) var(--card-gap);
    background: var(--page-bg);
}
.product-grid + .section-title { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD
   ═══════════════════════════════════════════════════════════ */
.product-card {
    /* 4 columns desktop: (100% - 2×margin - 3×gap) / 4 */
    width: calc((100% - 2*var(--grid-margin) - 3*var(--card-gap)) / 4);
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow var(--tr), transform var(--tr);
    position: relative;
}
.product-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

/* ── Image area ──
   1px margin ALL sides inside the card border
   (outer border shows as the "outline", then 1px gap before image)    */
.product-card__img-wrap {
    position: relative;
    margin: 1px;                               /* 1px gap all sides */
    border-radius: calc(var(--card-radius) - 1px);
    overflow: hidden;
    background: var(--card-img-bg);
    /* aspect-ratio: 4.8/5; */
}
.product-card__img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    background: var(--card-img-bg);
    transition: opacity .2s ease;
    display: block;
    /* NO extra padding — the 1px margin on the wrap provides the gap */
}

/* ── + button (always visible, bottom-right) ── */
.pc-plus-btn {
    position: absolute; bottom: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--clr-dark);
    font-size: 20px; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; z-index: 3;
    transition: opacity var(--tr), transform var(--tr);
}
/* On desktop: hide + when hover panel slides in */
@media (hover: hover) {
    .product-card:hover .pc-plus-btn { opacity: 0; pointer-events: none; }
}





/* ── Hover / tap action panel ── */
.pc-hover-panel {
    position: absolute;
    bottom: 12px;   /* spacing from bottom */
    left: 12px;
    right: 12px;

    display: flex;
    gap: 10px; /* space between buttons */

    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--tr), transform var(--tr);
    z-index: 4;
    pointer-events: none;
}

/* Desktop hover */
@media (hover: hover) {
    .product-card:hover .pc-hover-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }
}

/* Mobile */
.product-card.panel-open .pc-hover-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* COMMON BUTTON STYLE */
.pc-hover-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;

    border-radius: 999px; /* 🔥 FULLY ROUNDED (pill shape) */

    cursor: pointer;
    font-family: var(--font-body);
    border: none;

    transition: all var(--tr);
    white-space: nowrap;
}

/* SHOP NOW */
.pc-hover-shop {
    background: var(--hover-shop-bg);
    color: var(--hover-shop-clr);
}

/* Hover effect */
.pc-hover-shop:hover {
    background: #000; /* or slightly darker green */
    color: #fff;
    transform: translateY(-1px);
}

/* ADD TO CART */
.pc-hover-cart {
    background: var(--hover-cart-bg);
    color: var(--hover-cart-clr);
    border: 1.5px solid var(--hover-cart-border);
}

/* Hover effect */
.pc-hover-cart:hover {
    background: var(--hover-cart-border);
    color: #0a0a0a;
    transform: translateY(-1px);
}




/* ── Info block ── */
.product-card__info {
    padding: 10px 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--card-bg); flex: 1;
}
.product-card__name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--clr-dark); line-height: 1.4;
}
/* Category breadcrumb — between name and price */
.product-card__cat {
    font-size: 10px; font-weight: 500;
    color: var(--cat-clr);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.product-card__price {
    font-size: 14px; font-weight: 600; color: var(--clr-dark);
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 2px;
}
.product-card__strike {
    font-size: 11px; font-weight: 400;
    color: var(--clr-light); text-decoration: line-through;
}

/* ── Optional specs ── */
.pc-specs { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.pc-spec-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pc-spec-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--clr-mid); margin-right: 2px;
}
/* Color swatches — square */
.pc-spec-colors { gap: 5px; }
.pc-swatch {
    width: 18px; height: 18px;
    border-radius: 2px;                        /* square boxes */
    border: 2px solid transparent;
    cursor: pointer; outline: none; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    transition: transform var(--tr), box-shadow var(--tr);
}
.pc-swatch:hover { transform: scale(1.12); }
.pc-swatch.selected {
    box-shadow: 0 0 0 2.5px var(--clr-dark);
    border-color: #fff; transform: scale(1.1);
}
/* Non-color option pills */
.pc-spec-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-opt-btn {
    padding: 2px 7px;
    font-size: 10px; font-weight: 600; letter-spacing: .05em;
    border: 1px solid var(--clr-border); border-radius: 3px;
    cursor: pointer; background: var(--spec-opt-bg); color: var(--spec-opt-clr);
    transition: all var(--tr);
}
.pc-opt-btn:hover { border-color: var(--clr-dark); color: var(--clr-dark); }
.pc-opt-btn.selected {
    background: var(--spec-opt-sel-bg); color: var(--spec-opt-sel-clr);
    border-color: var(--spec-opt-sel-bg);
    text-decoration: underline; text-underline-offset: 2px;
}

/* ── Show-more ── */
.show-more-wrap { text-align: center; padding: 18px 20px 24px; }
.btn-show-more {
    padding: 10px 28px; border: 1.5px solid var(--clr-dark);
    font-size: 11px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--clr-dark);
    cursor: pointer; background: none; border-radius: 50px;
    transition: background var(--tr), color var(--tr);
}
.btn-show-more:hover { background: var(--clr-dark); color: #fff; }
.product-card.na-hidden { display: none; }

/* ═══════════════════════════════════════════════════════════
   Responsive breakpoints
   ═══════════════════════════════════════════════════════════ */
/* Mobile < 768px: 2 columns */
@media (max-width: 767px) {
    :root { --grid-margin: 10px; --card-gap: 8px; }
    .product-card {
        width: calc((100% - 2*var(--grid-margin) - 1*var(--card-gap)) / 2);
    }
    /* New Arrivals: show only 2 on mobile by default */
    #naGrid .product-card:nth-child(n+3):not(.show-all *) { display: none; }
    #naGrid.show-all .product-card { display: flex !important; }
    .banner-content p { display: none; }
    .topbar__cart-total { display: none; }
}
/* Tablet 768–1023px: 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    :root { --grid-margin: 16px; --card-gap: 10px; }
    .product-card {
        width: calc((100% - 2*var(--grid-margin) - 2*var(--card-gap)) / 3);
    }
    /* New Arrivals: show 4 on tablet (PHP hides 5+) */
}

/* ═══ Select-options modal ══════════════════════════════════ */
.spec-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 2000;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity var(--tr);
}
.spec-modal-overlay.open { opacity: 1; pointer-events: all; }
.spec-modal {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px 32px;
    width: 100%; max-width: 480px;
    transform: translateY(30px);
    transition: transform var(--tr);
}
.spec-modal-overlay.open .spec-modal { transform: translateY(0); }
.spec-modal__title {
    font-size: 15px; font-weight: 700; margin-bottom: 16px;
    color: var(--clr-dark); text-align: center;
}
.spec-modal__body { display: flex; flex-direction: column; gap: 12px; }
.spec-modal__group { display: flex; flex-direction: column; gap: 6px; }
.spec-modal__label {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--clr-mid);
}
.spec-modal__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-modal__opt {
    padding: 6px 14px; border: 1.5px solid var(--clr-border);
    border-radius: 4px; font-size: 12px; font-weight: 600;
    cursor: pointer; background: #fff; color: var(--clr-mid);
    transition: all var(--tr);
}
.spec-modal__opt.selected {
    background: var(--clr-dark); color: #fff; border-color: var(--clr-dark);
}
.spec-modal__swatch {
    width: 28px; height: 28px; border-radius: 3px;
    border: 2px solid transparent; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    transition: transform var(--tr), box-shadow var(--tr);
}
.spec-modal__swatch.selected {
    box-shadow: 0 0 0 2.5px var(--clr-dark); border-color: #fff; transform: scale(1.12);
}
.spec-modal__btn {
    width: 100%; margin-top: 20px;
    padding: 13px; border-radius: 50px;
    background: var(--hover-shop-bg); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    cursor: pointer; border: none; font-family: var(--font-body);
    transition: opacity var(--tr);
}
.spec-modal__btn:hover { opacity: .88; }
.spec-modal__close {
    position: absolute; top: 14px; right: 18px;
    font-size: 22px; color: var(--clr-mid); cursor: pointer;
    background: none; border: none;
}

/* ═══ Toast ════════════════════════════════════════════════ */
#toast {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--clr-dark); color: #fff;
    padding: 10px 24px; border-radius: 24px;
    font-size: 13px; font-weight: 500;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 9999; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ 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 --- */

.spec-modal {
    max-width: 430px;
    width: calc(100% - 28px);
    padding: 12px; /* Added tighter padding to reduce height */
}

.spec-modal__top {
    display: grid;
    grid-template-columns: 52px 1fr; /* Reduced from 64px */
    gap: 12px;
    align-items: center;
    margin-bottom: 12px; /* Slightly tighter spacing */
}

.spec-modal__img {
    width: 52px;  /* Reduced from 64px */
    height: 52px; /* Reduced from 64px */
    object-fit: cover;
    border-radius: 8px; /* Slightly smaller radius for smaller size */
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.08);
}

.spec-modal__title {
    margin: 0;
    font-size: 14px; /* Slightly smaller for compact look */
    line-height: 1.3;
    font-weight: 600;
}

/* --- IMPROVED QUANTITY SELECTOR --- */
.spec-modal__qty {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    border-radius: 8px; /* Squared off slightly for a modern "pill-box" look */
    background: #f6f6f6; /* Light gray background makes it look like a single unit */
    height: 30px; /* Reduced from 34px */
    padding: 2px;
}

.spec-modal__qty button {
    width: 28px;
    height: 26px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    transition: background 0.2s;
    border-radius: 6px;
}

.spec-modal__qty button:hover {
    background: #fff; /* Highlights the button inside the gray track */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.spec-modal__qty input {
    width: 34px;
    height: 26px;
    border: 0;
    outline: none;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    color: #111;
}

/* --- OTHER COMPACT ADJUSTMENTS --- */
.spec-modal__group {
    margin-top: 10px; /* Reduced from 14px */
}

.spec-modal__label {
    margin: 0 0 6px;
    font-size: 11px;
    text-transform: uppercase; /* Cleaner look for small labels */
    letter-spacing: 0.02em;
    color: #777;
}

.spec-modal__opt {
    min-height: 30px; /* Reduced from 34px */
    padding: 5px 12px;
    font-size: 12px;
}

.spec-modal__btn {
    margin-top: 14px; /* Reduced from 18px */
}