@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   VERGE HOME TRADING - Global Stylesheet  ·  WARM SCANDINAVIAN
   Warm sand canvas · sage + wood-tan accents · rounded, soft
   shapes · gentle diffuse shadows · cosy Muji / Scandi-home
   feel. Display + Body: Nunito family (rounded). Brand grey
   #606060 kept woven in as a quiet neutral.
   ============================================================ */

:root {
    /* Surfaces */
    --sand: #F4EFE7;           /* warm page background */
    --sand-2: #ECE3D4;         /* deeper warm band */
    --cream: #FBF8F3;          /* soft warm surface */
    --surface: #ffffff;

    /* Ink (warm charcoal, never pure black) */
    --ink: #3A352E;
    --ink-soft: #756E62;

    /* Accents */
    --sage: #7C8A6F;           /* primary accent */
    --sage-deep: #5E6B52;      /* buttons / strong */
    --sage-tint: #E7EBE0;      /* soft sage panel / icon bg */
    --wood: #B89B72;           /* wood-tan accent */
    --wood-soft: #DAC6A3;
    --clay: #BC6A4E;           /* warm terracotta - sale */
    --brand: #606060;          /* brand grey - quiet neutral */

    /* Structure */
    --line: rgba(58, 53, 46, .12);
    --line-strong: rgba(58, 53, 46, .20);
    --radius: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 4px 16px rgba(58, 53, 46, .06);
    --shadow: 0 12px 32px rgba(58, 53, 46, .09);
    --shadow-lg: 0 22px 54px rgba(58, 53, 46, .13);

    /* Legacy aliases referenced by markup */
    --primary: #5E6B52;
    --primary-dark: #4C583F;
    --primary-light: #E7EBE0;
    --menu: #F4EFE7;
    --menufont: #3A352E;
    --sale-badge: #BC6A4E;
}

/* ============================================================
   BASE
   ============================================================ */
html, body { height: 100%; }

body {
    font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sand);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#pageContent { flex: 1; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', 'Nunito Sans', system-ui, sans-serif;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.22;
}

p { color: inherit; }
.lead { font-size: 1.1rem; color: var(--ink-soft); font-weight: 400; }
.text-muted { color: var(--ink-soft) !important; }

a { color: var(--sage-deep); transition: color .25s ease; text-decoration: none; font-weight: 600; }
a:hover { color: var(--wood); }

/* HARD RULE - shop.html and product.html stay on clean white for product clarity */
body[data-page="shop"],
body[data-page="product"],
body.page-shop,
body.page-product {
    background: #ffffff !important;
}
body[data-page="shop"] section,
body[data-page="product"] section,
body[data-page="shop"] .container,
body[data-page="product"] .container {
    background: transparent;
}

.pagepadding { padding-top: 140px; padding-bottom: 72px; }
.padmobile { padding-top: 110px; }
.pdtop { padding-top: 0; }

.fontmain { color: var(--sage-deep); }
.green { color: var(--sage-deep); }
.menubg { background-color: var(--menu); }
.menufont { color: var(--menufont); }
.bg { background-color: var(--sage-deep); }
.gradient-text { color: var(--ink); }
.logosizemenu { height: 74px; width: auto; }
.logosize { height: 74px; width: auto; }
.shadowmy { text-shadow: none; }

/* Accessibility - focus ring (sage, with brand-grey fallback feel) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.category-badge:focus-visible,
.accordion-button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* ============================================================
   BUTTONS  -  rounded, friendly, soft
   ============================================================ */
.btn-primary,
.btn-hero-light,
.send-btn,
.send-btn-hero,
.gradient-btn {
    background: var(--sage-deep);
    color: #fff;
    border: 1.5px solid var(--sage-deep);
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 12px 28px;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.btn-primary:hover, .btn-hero-light:hover, .send-btn:hover, .send-btn-hero:hover, .gradient-btn:hover,
.btn-primary:focus, .btn-hero-light:focus, .send-btn:focus, .send-btn-hero:focus {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.send-btn { width: 100%; }
.send-btn-hero { padding: 11px 26px; }

/* Secondary / outline - sage hairline, fills with soft sage on hover */
.btn-hero,
.btn-outline-primary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--sage);
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 12px 28px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-hero:hover, .btn-hero:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--sage-tint);
    color: var(--sage-deep);
    border-color: var(--sage-deep);
    transform: translateY(-2px);
}

/* ============================================================
   HEADER / NAVIGATION  (warm sand bar, soft hairline)
   ============================================================ */
.navbar {
    z-index: 1050;
    background: rgba(244, 239, 231, .92) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding-top: .12rem;
    padding-bottom: .12rem;
}
/* zero the brand link's default padding so the logo can grow without growing the bar */
.navbar-brand { font-weight: 800; padding-top: 0; padding-bottom: 0; }

.nav-link {
    color: var(--menufont) !important;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    font-size: .95rem;
    position: relative;
    margin: 0 4px;
    padding: 6px 6px !important;
    transition: color .25s ease;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px; bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--wood);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--sage-deep) !important; }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.navbar-toggler {
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
}
.navbar-toggler:focus { box-shadow: none; }

/* ============================================================
   HERO  (warm sand, soft sage glow, framed visual)
   ============================================================ */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
    overflow: hidden;
    min-height: 100vh;
    padding-top: 110px !important;
    padding-bottom: 90px !important;
    color: var(--ink);
    background:
        linear-gradient(rgba(244, 239, 231, .32), rgba(244, 239, 231, .52)),
        url('../images/bg.png') center center / cover no-repeat;
}
.hero .container { position: relative; z-index: 2; }

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 900;
    margin-bottom: 1.25rem;
}
.hero .gradient-text { color: var(--ink); }
#heroHighlight {
    display: inline-block;
    color: var(--sage-deep);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    letter-spacing: -0.005em;
    margin-top: 8px;
}
.hero .lead,
.hero #heroDesc,
.hero .text-muted { color: var(--ink-soft) !important; font-weight: 400; }

/* full-screen background hero: the photo is now the section background */
.hero .row > div:last-child { display: none; }
.hero-img { display: none; }
/* frosted panel behind the copy so text never clashes with the photo */
.hero .col-lg-6 {
    max-width: 600px;
    background: rgba(247, 244, 238, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 22px;
    padding: 44px 46px;
    box-shadow: var(--shadow);
}
.hero #heroDesc { color: var(--ink) !important; }

/* ============================================================
   WHY-US  (soft warm band, rounded cards)
   ============================================================ */
.why-us {
    position: relative;
    overflow: hidden;
    background: var(--sand-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.why-us h3 { color: var(--ink); }
.why-us p, .why-us .text-muted { color: var(--ink-soft) !important; }
.why-us .container { position: relative; z-index: 2; }

.why-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease, transform .3s ease;
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.why-icon {
    width: 62px; height: 62px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sage-tint);
    color: var(--sage-deep);
    font-size: 23px;
}
.why-card h6 { color: var(--ink); font-weight: 800; }
.why-us .row > div:nth-child(even) .why-icon { background: var(--wood-soft); color: #7a5f37; }

/* ============================================================
   SHOP-BY-CATEGORY CARDS  (rounded, warm gradient scrim label)
   ============================================================ */
/* section header - centred eyebrow + title + subtitle */
.category-head { margin-bottom: 42px; }
#categoryTitle { text-align: center; font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-top: 4px; }
.category-sub { color: var(--ink-soft); max-width: 580px; margin: 8px auto 0; font-size: 1.04rem; }

/* full-width 3-up tiles (instead of small left-bunched cards) */
#categoryGrid { justify-content: center; }
@media (min-width: 768px) {
    #categoryGrid > div { flex: 0 0 auto; width: 33.3333%; max-width: 33.3333%; }
}

.category-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease, transform .3s ease;
}
.category-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.category-card .position-absolute {
    z-index: 2;
    background: linear-gradient(to top, rgba(46, 42, 36, .80) 0%, rgba(46, 42, 36, .25) 55%, transparent 100%);
    padding: 28px 18px 16px !important;
}
.category-card h5 {
    color: #fff;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 1rem;
    margin: 0;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.category-card:hover .category-img { transform: scale(1.06); }

/* ============================================================
   CTA SECTION  (warm sage band, cream text, wood buttons)
   ============================================================ */
.cta-section {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    background: linear-gradient(135deg, #5E6B52 0%, #46503B 100%);
    border-top: 1px solid var(--line);
}
.cta-section h3 {
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
}
.cta-section p { color: rgba(251, 248, 243, .85); max-width: 640px; margin: auto; font-weight: 400; }
.cta-section .btn-light {
    background: var(--cream);
    color: var(--sage-deep);
    border: 1.5px solid var(--cream);
    border-radius: 999px;
    font-weight: 700;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cta-section .btn-light:hover { background: var(--wood-soft); color: #4a3a1f; border-color: var(--wood-soft); box-shadow: var(--shadow); transform: translateY(-2px); }
.cta-section .btn-outline-light {
    background: transparent;
    color: var(--cream);
    border: 1.5px solid rgba(251, 248, 243, .55);
    border-radius: 999px;
    font-weight: 700;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.cta-section .btn-outline-light:hover { background: rgba(251, 248, 243, .12); color: #fff; border-color: var(--cream); transform: translateY(-2px); }

/* ============================================================
   SHOP - category filter chips + product grid
   ============================================================ */
.category-badge,
.category-btn {
    background: #fff;
    color: var(--ink-soft);
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    padding: 8px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.category-badge:hover {
    color: var(--sage-deep);
    border-color: var(--sage);
    background: var(--sage-tint);
}
.category-badge.active,
.category-btn.active {
    background: var(--sage-deep);
    color: #fff;
    border-color: var(--sage-deep);
}

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow .3s ease, transform .3s ease;
    height: 100%;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.img-wrapper {
    padding: 26px 18px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    height: 235px;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}
.product-img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s ease;
}
.product-card:hover .product-img { transform: scale(1.05); }
.product-card h6 { color: var(--ink); font-weight: 800; font-size: 1rem; line-height: 1.4; }
.product-card .small.text-muted {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    font-size: .68rem;
    color: var(--sage) !important;
}
.product-card .fw-bold { color: var(--ink); }

.product-desc {
    font-size: 14px;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.badge { font-size: 12px; }
.salebadge {
    background: var(--clay);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .66rem;
    border-radius: 999px;
    padding: 5px 13px;
}
.salebadgefont, .price-emphasis {
    color: var(--clay);
    font-weight: 800;
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.product-image-frame {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.product-main-img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    display: block;
}
#saleBadge {
    background: var(--clay) !important;
    color: #fff !important;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#productCategory {
    color: var(--sage) !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .72rem;
}
#productTitle {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    margin-top: .35rem;
}
#productPrice .fw-bold { color: var(--ink); font-size: 1.65rem; }
#productPrice .text-danger { color: var(--clay) !important; }
#productDesc { color: var(--ink-soft); line-height: 1.85; }

/* ============================================================
   ABOUT
   ============================================================ */
.mission-box {
    position: relative;
    background: linear-gradient(135deg, #5E6B52 0%, #46503B 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    border-left: 5px solid var(--wood);
    padding: 48px;
    margin-top: 16px;
    box-shadow: var(--shadow);
}
.mission-box h4 { color: #fff; }
.mission-box p { color: rgba(251, 248, 243, .92); font-size: 1.05rem; }

.feature {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 26px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: box-shadow .3s ease, transform .3s ease;
}
.feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.feature i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--sage-tint);
    color: var(--sage-deep);
    font-size: 25px;
    margin-bottom: 16px;
}
.feature h5 { color: var(--ink); font-weight: 800; font-size: 1.08rem; }
#features > div:nth-child(even) .feature i { background: var(--wood-soft); color: #7a5f37; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-sm);
}
.icon { color: var(--sage-deep); font-size: 18px; margin-right: 8px; }
.uen-box {
    background: var(--sage-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 20px;
}
#mapContainer iframe {
    display: block;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    box-shadow: none !important;
    height: 360px !important;
}

/* ============================================================
   ABOUT + CONTACT PAGE LAYOUT  (shared sections)
   ============================================================ */
.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: 150px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(820px 360px at 88% 0%, var(--sage-tint) 0%, transparent 62%),
        var(--sand);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 16px;
}
.page-lead {
    max-width: 720px;
    font-size: 1.1rem;
    color: var(--ink-soft);
    font-weight: 400;
    margin-bottom: 0;
}

.eyebrow,
.mission-tag {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .76rem;
    color: var(--sage-deep);
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 18px;
}
.mission-tag { color: var(--wood-soft); }

.page-block { padding: 64px 0; }
.page-block.pt-0 { padding-top: 0; }

.section-head {
    display: inline-block;
    letter-spacing: -0.01em;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wood);
}

.mission-statement {
    font-family: 'Nunito', 'Nunito Sans', sans-serif;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    line-height: 1.55;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* Contact - info cards */
.info-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 26px 24px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-ico {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sage-tint);
    color: var(--sage-deep);
    font-size: 20px;
    margin-bottom: 14px;
}
.info-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .72rem;
    color: var(--sage-deep);
    margin-bottom: 4px;
}
.info-val { font-weight: 600; color: var(--ink); word-break: break-word; }
.contact-grid > div:nth-child(even) .info-ico { background: var(--wood-soft); color: #7a5f37; }

/* Contact - map frame */
.map-frame {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    height: 100%;
}
.map-bar {
    background: var(--sage-deep);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .82rem;
    padding: 14px 18px;
}
.map-bar i { color: var(--wood-soft); margin-right: 8px; }

@media (max-width: 768px) {
    .page-hero { padding-top: 118px; padding-bottom: 36px; }
    .page-block { padding: 40px 0; }
    .mission-box { padding: 30px 26px; }
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select,
input[type="text"], input[type="email"], input[type="tel"], textarea {
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 11px 15px;
    background: #fff;
    color: var(--ink);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.form-control:focus,
.form-select:focus,
input:focus, textarea:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(124, 138, 111, .18);
}

/* ============================================================
   FAQ + POLICY PAGES
   ============================================================ */
.policy-box { max-width: 860px; margin: auto; }
.policy-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.policy-card p {
    text-align: left;
    line-height: 1.9;
    color: var(--ink-soft);
}
.policy-card strong { color: var(--ink); font-weight: 700; }

#pageTitle {
    letter-spacing: -0.015em;
    font-weight: 800;
}

#faqAccordion { text-align: left; }
#faqAccordion .accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.accordion-button {
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    font-family: 'Nunito', 'Nunito Sans', sans-serif;
    border-radius: var(--radius) !important;
    padding: 18px 22px;
}
#faqAccordion .accordion-button {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: none;
}
.accordion-button .me-2 { color: var(--wood); }
.accordion-button:not(.collapsed),
#faqAccordion .accordion-button:not(.collapsed) {
    background-color: var(--sage-tint) !important;
    color: var(--ink);
    box-shadow: none;
    border-bottom: 1px solid var(--line);
}
.accordion-button:focus,
#faqAccordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--line);
}
.accordion-button:not(.collapsed)::after { filter: none; }
#faqAccordion .accordion-body,
.accordion-body {
    background-color: var(--surface);
    color: var(--ink-soft);
    line-height: 1.8;
    padding: 6px 22px 20px;
}

/* ============================================================
   FOOTER  (deep warm brown, wood/sage accents)
   ============================================================ */
footer {
    background: #2E2A24 !important;
    color: #c7c0b4 !important;
    border-top: 4px solid var(--sage);
}
.site-footer { padding-top: 66px; }

/* brand block */
.footer-brandline { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-logo-link { flex-shrink: 0; line-height: 0; }
.footer-brandline img { height: 52px; width: auto; }
.footer-brandname {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: .98rem;
    line-height: 1.25;
    letter-spacing: .01em;
}
.footer-tagline { color: #aaa093; font-size: .95rem; line-height: 1.75; max-width: 340px; margin-bottom: 24px; }

.footer-contact { margin: 0 0 24px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; font-size: .9rem; color: #c7c0b4; }
.footer-contact li i { color: var(--wood-soft); margin-top: 4px; width: 16px; text-align: center; flex-shrink: 0; }

.footer-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--sage); color: #fff; border: 1.5px solid var(--sage);
    border-radius: 999px; padding: 9px 18px;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .88rem;
    cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.footer-btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.footer-btn.ghost { background: transparent; color: #e7e1d6; border-color: rgba(255, 255, 255, .28); }
.footer-btn.ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.footer-btn i { font-size: 1rem; }

/* link columns */
.footer-head {
    font-family: 'Nunito', sans-serif; color: #fff; font-weight: 800;
    font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
    margin-bottom: 20px; padding-bottom: 11px; position: relative;
}
.footer-head::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 26px; height: 2px; background: var(--wood); border-radius: 2px;
}
.footer-links { margin: 0; padding-left: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a {
    color: #aaa093; font-size: .92rem; font-weight: 400; text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover { color: var(--wood-soft); padding-left: 4px; }

/* bottom bar */
.footer-bottom {
    margin-top: 50px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-bottom-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 22px; font-size: .82rem; color: #8f897d;
}
.footer-bottom-inner span { color: #8f897d; }
.footer-uen { letter-spacing: .03em; }
@media (max-width: 768px) {
    .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ============================================================
   SHOPPING CART  (nav badge · add-to-cart · slide-in drawer)
   ============================================================ */
.cart-link { position: relative; }
.cart-link i { font-size: 1.05rem; }
.cart-badge {
    position: absolute; top: -2px; right: -9px;
    min-width: 18px; height: 18px; padding: 0 5px;
    align-items: center; justify-content: center;
    background: var(--clay); color: #fff;
    font-family: 'Nunito', sans-serif; font-size: .66rem; font-weight: 800;
    border-radius: 999px; line-height: 1;
}

.add-cart-btn {
    background: var(--sage-deep); color: #fff;
    border: 1.5px solid var(--sage-deep); border-radius: 999px;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .88rem;
    padding: 9px 16px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.add-cart-btn:hover, .add-cart-btn:focus { background: var(--ink); border-color: var(--ink); color: #fff; }
.add-cart-btn i { margin-right: 6px; }

/* overlay + drawer */
.cart-overlay {
    position: fixed; inset: 0; background: rgba(42, 42, 42, .45);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    z-index: 1090;
}
.cart-overlay.show { opacity: 1; visibility: visible; }
body.cart-open { overflow: hidden; }

.cart-drawer {
    position: fixed; top: 0; right: 0; height: 100%;
    width: 400px; max-width: 90vw;
    background: var(--sand); color: var(--ink);
    box-shadow: -16px 0 48px rgba(42, 42, 42, .18);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    z-index: 1100; display: flex; flex-direction: column;
}
.cart-drawer.show { transform: translateX(0); }

.cart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.cart-head h5 { margin: 0; font-weight: 800; }
.cart-close {
    background: none; border: none; font-size: 1.8rem; line-height: 1;
    color: var(--ink-soft); cursor: pointer; padding: 0 4px;
}
.cart-close:hover { color: var(--ink); }

.cart-body { flex: 1; overflow-y: auto; padding: 14px 18px; }

.cart-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-thumb {
    width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--line); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cart-thumb img { max-width: 84%; max-height: 84%; object-fit: contain; }
.cart-info { flex: 1; min-width: 0; }
.cart-title { display: block; color: var(--ink); font-weight: 700; font-size: .9rem; line-height: 1.35; text-decoration: none; }
.cart-title:hover { color: var(--sage-deep); }
.cart-price { color: var(--ink-soft); font-size: .85rem; margin: 3px 0 8px; }

.cart-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty button {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink);
    font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s ease, background-color .2s ease;
}
.cart-qty button:hover { border-color: var(--sage); background: var(--sage-tint); }
.cart-qty span { min-width: 22px; text-align: center; font-weight: 700; }
.cart-qty .cart-remove { margin-left: auto; border-color: transparent; color: var(--ink-soft); font-size: .85rem; }
.cart-qty .cart-remove:hover { color: var(--clay); border-color: var(--clay); background: #fff; }

.cart-foot { padding: 18px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.cart-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.15rem; margin-bottom: 14px;
}
.cart-checkout { width: 100%; }
.cart-clear {
    display: block; width: 100%; margin-top: 10px; background: none; border: none;
    color: var(--ink-soft); font-size: .85rem; cursor: pointer; text-decoration: underline;
}
.cart-clear:hover { color: var(--clay); }

.cart-empty { text-align: center; padding: 64px 20px; color: var(--ink-soft); }
.cart-empty i { font-size: 2.4rem; color: var(--wood-soft); margin-bottom: 14px; display: block; }
.cart-empty p { margin-bottom: 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .hero { min-height: auto; text-align: center; }
}

@media (max-width: 768px) {
    #pageContent { padding-left: 15px; padding-right: 15px; }

    .logosizemenu { height: 52px; width: auto; }

    .nav-link { display: inline-block; margin-bottom: 4px; }

    .hero {
        margin-left: -15px;
        margin-right: -15px;
        min-height: 90vh;
        text-align: center;
        padding-top: 100px !important;
        padding-bottom: 64px !important;
        background:
            linear-gradient(rgba(244, 239, 231, .40), rgba(244, 239, 231, .58)),
            url('../images/bg.png') center center / cover no-repeat;
    }
    .hero .col-lg-6 { max-width: 100%; padding: 30px 24px; }
    .hero h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
    .hero-img { margin-top: 18px; }

    .why-us, .cta-section {
        margin-left: -15px;
        margin-right: -15px;
    }

    .mission-box { padding: 30px 26px; }
    .policy-card { padding: 26px; }

    .pmobile {
        padding-top: 120px !important;
        padding-bottom: 64px !important;
    }

    footer {
        padding-left: 15px;
        padding-right: 15px;
        text-align: left;
    }
    footer .row > div { margin-bottom: 16px; }
    footer h6 { font-size: 15px; margin-bottom: 8px; }
    footer ul li { margin-bottom: 6px; }

    .footer-bottom { text-align: center; margin-top: 12px; padding-top: 16px; }
}