/* ============================================================================
   Dhara Khakhra — design system
   ----------------------------------------------------------------------------
   Warm ivory ground and the brand's gold/brown, lifted with the colours food
   actually sells on: turmeric, chilli, ghee. Motion is used to draw the eye
   toward products and the cart, never for decoration alone — and every bit of
   it collapses under prefers-reduced-motion.

   No build step. Plain CSS, custom properties, mobile-first.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Palette taken straight off the logo: bottle green, golden yellow, white —
   on a cream ground so the khakhra photographs stay the brightest thing on
   the page. Red survives only as the discount badge, where urgency earns it.
   --------------------------------------------------------------------------- */
:root {
    /* Brand — from the logo */
    --green:        #1A6B3C;
    --green-dark:   #0E4A28;
    --green-deep:   #093A1F;
    --green-tint:   #E9F3EC;
    --yellow:       #FFC61A;
    --yellow-dark:  #E0A600;
    --yellow-tint:  #FFF6DC;
    --khakhra:      #E8C88A;   /* the toasted tone in the logo's khakhra */

    /* Ground */
    --ivory:      #FDFBF4;
    --beige:      #F6F0E2;
    --cream:      #FFF9EC;
    --ink:        #1E2A22;
    --ink-strong: #14201A;

    /* Aliases kept so every existing rule follows the new palette without
       being rewritten one by one. */
    --gold:       var(--yellow);
    --gold-light: var(--yellow-tint);
    --gold-dark:  var(--yellow-dark);
    --brown:      var(--green);
    --turmeric:   var(--yellow);
    --turmeric-d: var(--yellow-dark);
    --chilli:     var(--green);
    --chilli-d:   var(--green-dark);
    --leaf:       var(--green);
    --sale:       #E14434;

    /* Surfaces */
    --bg:          var(--ivory);
    --bg-alt:      var(--beige);
    --surface:     #FFFFFF;
    --border:      rgba(26, 107, 60, .22);
    --border-soft: rgba(26, 107, 60, .12);

    /* Text */
    --text:        var(--ink);
    --text-soft:   #55645B;
    --text-mute:   #8A968F;
    --text-on-dark:#FFFFFF;

    /* Status */
    --ok:       #10B981;
    --ok-bg:    #D1FAE5;
    --ok-ink:   #065F46;
    --warn-bg:  #FEF3C7;
    --warn-ink: #92400E;
    --err:      #D4183D;
    --whatsapp: #25D366;
    --whatsapp-dk: #128C7E;

    /* Shape */
    --radius:    18px;
    --radius-sm: 11px;
    --shadow:    0 4px 16px rgba(14, 74, 40, .10);
    --shadow-lg: 0 20px 48px rgba(14, 74, 40, .18);
    --shadow-xl: 0 30px 70px rgba(14, 74, 40, .24);

    --maxw:   1200px;
    --head-h: 68px;

    --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans Gujarati", sans-serif;
    font-size: 16.5px;
    line-height: 1.68;
    overflow-x: hidden;
    /* A faint warm grain over the whole page — stops large flat areas looking
       like empty browser background. */
    background-image:
        radial-gradient(circle at 12% 8%,  rgba(255, 198, 26, .07), transparent 34%),
        radial-gradient(circle at 88% 22%, rgba(26, 107, 60, .05),  transparent 32%),
        radial-gradient(circle at 50% 96%, rgba(232, 200, 138, .10), transparent 40%);
    background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    /* Fraunces is a warm, slightly old-fashioned serif — it reads as a family
       food business, where a geometric sans would read as a tech startup. */
    font-family: Fraunces, Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.022em;
    margin: 0;
}

/* Gujarati has no Fraunces cut, so it falls back to a proper Gujarati face
   rather than a mangled serif substitution. */
html[lang="gu"] h1, html[lang="gu"] h2, html[lang="gu"] h3, html[lang="gu"] h4 {
    font-family: "Noto Sans Gujarati", "Shruti", sans-serif;
    letter-spacing: -.01em;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap.narrow { max-width: 820px; }

.skip-link { position: absolute; left: -9999px; background: var(--green); color: #fff; padding: 10px 16px; z-index: 300; }
.skip-link:focus { left: 0; top: 0; }

.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;
}

address { font-style: normal; }
code { background: var(--beige); padding: 1px 5px; border-radius: 4px; font-size: .85em; }

:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 3px; }

/* ============================================================ motion policy
   One switch. Anyone who has asked their device for less motion gets a site
   that is completely still — no reveals, no float, no pulse. */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

@keyframes floatY   { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
                      50%      { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 6deg)); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes shimmer  { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes meshDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(3%, -4%, 0) scale(1.08); }
    66%      { transform: translate3d(-3%, 3%, 0) scale(.96); }
}
@keyframes waPulse {
    0%   { box-shadow: 0 8px 24px rgba(37, 211, 102, .5), 0 0 0 0 rgba(37, 211, 102, .55); }
    70%  { box-shadow: 0 8px 24px rgba(37, 211, 102, .5), 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 24px rgba(37, 211, 102, .5), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ============================================================ scroll bar */

.scroll-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
    background: linear-gradient(90deg, var(--yellow), var(--green), var(--green-deep));
    transition: width .08s linear;
}

/* ============================================================ WhatsApp float */

.wa-float {
    position: fixed; right: 16px; bottom: 88px; z-index: 95;
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--whatsapp); color: #fff; padding: 13px 18px; border-radius: 999px;
    font-weight: 800; font-size: .88rem;
    animation: waPulse 2.6s infinite;
    transition: transform .2s var(--ease), background .2s ease;
}
.wa-float:hover { background: var(--whatsapp-dk); transform: translateY(-3px) scale(1.04); }
.wa-float svg { flex: none; }

@media (max-width: 959px) {
    /* On phones the sticky order bar already covers this, so shrink to a dot
       and sit it clear of the bar. */
    .wa-float { bottom: 78px; right: 12px; padding: 13px; }
    .wa-float-label { display: none; }
}
@media (min-width: 960px) { .wa-float { bottom: 26px; } }

/* ============================================================ dividers
   A soft curve between bands instead of a hard horizontal join. */

.divider { display: block; width: 100%; height: 48px; margin-bottom: -1px; }
.divider.flip { transform: rotate(180deg); margin: -1px 0 0; }
.divider path { fill: currentColor; }

/* ============================================================ buttons */

.btn-a, .btn-b {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid transparent; border-radius: 999px;
    padding: 14px 28px; font-size: .96rem; font-weight: 700; cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s ease;
    text-align: center; line-height: 1.2;
}

.btn-a {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: var(--text-on-dark);
    box-shadow: 0 6px 18px rgba(20, 32, 26, .26);
}
.btn-a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 74, 40, .38); }
.btn-a:active { transform: translateY(-1px); }

/* A light sweep on hover — reads as "this is the thing to press". */
.btn-a::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .26) 50%, transparent 70%);
    background-size: 220% 100%; background-position: -180% 0;
}
.btn-a:hover::after { animation: shimmer .9s ease; }

.btn-b { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-b:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }

.btn-b.wa, .btn-a.wa-solid { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.btn-b.wa:hover, .btn-a.wa-solid:hover { background: var(--whatsapp-dk); border-color: var(--whatsapp-dk); }

.btn-a.full, .btn-b.full { display: flex; width: 100%; margin-bottom: 10px; }

/* ============================================================ header */

.site-head {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-soft);
    transition: box-shadow .25s ease, background .25s ease;
}
.site-head.scrolled { box-shadow: 0 4px 24px rgba(20, 32, 26, .09); background: rgba(255, 255, 255, .96); }

/* Row 1: brand · search · actions.  Row 2: the links.
   Trying to fit all three plus five nav items on one line is what broke the
   header — at 1366px it wrapped into a ragged mess. */
.head-inner {
    display: grid; align-items: center; gap: 10px 14px;
    /* minmax(0,…) on both columns: without it a long brand name refuses to
       shrink and pushes the whole header wider than the viewport. */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "brand actions" "search search";
    padding-block: 10px;
}

.head-inner .brand   { grid-area: brand; }
.head-inner .head-search { grid-area: search; }
.head-inner .head-actions { grid-area: actions; justify-self: end; }

@media (min-width: 900px) {
    .head-inner {
        grid-template-columns: auto minmax(200px, 1fr) auto;
        grid-template-areas: "brand search actions";
        min-height: var(--head-h);
        padding-block: 12px;
    }
}

.head-actions { display: flex; align-items: center; gap: 10px; }

/* Duplicated inside the mobile sheet; hidden wherever the other copy shows. */
.nav-only-mobile { display: block; }
@media (min-width: 900px) { .nav-only-mobile { display: none !important; } }
@media (max-width: 899px) { .head-actions .lang-toggle { display: none; } }

.site-nav .lang-toggle { align-self: flex-start; margin-top: 14px; border-color: var(--border); }
.site-nav .lang-toggle a { border: 0; padding: 7px 15px; }

.brand { display: flex; align-items: center; gap: 11px; }

/* The logo is a wide lock-up (roundel + two banners). Height is capped and
   width follows, so it is never stretched whatever file is uploaded. */
/* The logo is a round mark with the name inside it, so at 52px the wording was
   too small to read. It carries the whole brand in the header — it gets room. */
.brand-logo { height: 66px; width: auto; max-width: min(62vw, 300px); object-fit: contain; }
@media (min-width: 960px) { .brand-logo { height: 78px; max-width: 340px; } }

.foot-logo { height: 62px; width: auto; max-width: 260px; object-fit: contain; margin-bottom: 14px; }

/* A logo drawn for light backgrounds needs a light patch under it on the dark
   footer, or the dark green half of it vanishes. */
.foot-logo-chip {
    display: inline-block; background: #fff; border-radius: 14px;
    padding: 10px 14px; margin-bottom: 14px;
}
.foot-logo-chip img { height: 54px; width: auto; max-width: 240px; object-fit: contain; }

.brand-mark {
    width: 42px; height: 42px; flex: none; border-radius: 13px;
    background: linear-gradient(135deg, var(--yellow), var(--green));
    color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(255, 198, 26, .34);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-weight: 800; font-size: 1.06rem; white-space: nowrap; }
/* The tagline is a nicety — it goes before it can push the header around. */
.brand-tag  { display: none; font-size: .66rem; color: var(--text-mute); letter-spacing: .04em; }
@media (min-width: 900px) { .brand-tag { display: block; } }

.nav-toggle { background: none; border: 0; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 23px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease), opacity .18s ease; }
.nav-toggle.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.on span:nth-child(2) { opacity: 0; }
.nav-toggle.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Phones: the links live behind the hamburger. */
.site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 110;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(20, 32, 26, .13);
}
.site-nav.open { display: block; animation: slideUp .22s var(--ease); }
.site-nav-inner { display: flex; flex-direction: column; padding: 6px 18px 16px; }
.site-nav a { display: block; padding: 13px 2px; font-weight: 600; border-bottom: 1px solid var(--border-soft); }
.site-nav a:last-child { border-bottom: 0; }

.lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lang-toggle a { padding: 7px 14px; font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.lang-toggle a.on { background: var(--green); color: #fff; }

/* Below 900px the cart and hamburger are what matter; text links would only
   crowd them out. */
.acct-link { display: none; font-size: .86rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
@media (min-width: 900px) { .acct-link { display: inline; } }
.acct-link:hover { color: var(--green); }

.cart-btn-label { display: none; }
@media (min-width: 560px) { .cart-btn-label { display: inline; } }

.cart-btn {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff;
    font-weight: 700; font-size: .87rem; padding: 10px 18px; border-radius: 999px;
    box-shadow: 0 5px 15px rgba(20, 32, 26, .26); transition: transform .18s var(--ease);
}
.cart-btn:hover { background: linear-gradient(135deg, var(--green-dark), var(--green-deep)); transform: translateY(-2px); }

.cart-badge {
    background: var(--turmeric); color: #fff; border-radius: 999px;
    min-width: 22px; height: 22px; display: grid; place-items: center;
    font-size: .7rem; font-weight: 800; padding: 0 6px;
}
.cart-badge.bump { animation: popIn .34s var(--ease); }

/* Desktop: a slim green bar of links under the main row. */
@media (min-width: 900px) {
    .nav-toggle { display: none; }

    .site-nav {
        display: block; position: static; box-shadow: none; border: 0;
        background: linear-gradient(90deg, var(--green), var(--green-dark));
    }
    .site-nav-inner {
        flex-direction: row; align-items: center; gap: 30px;
        padding: 0; overflow-x: auto; scrollbar-width: none;
    }
    .site-nav-inner::-webkit-scrollbar { display: none; }

    .site-nav a {
        position: relative; border: 0; padding: 12px 0;
        font-size: .92rem; font-weight: 700; color: rgba(255, 255, 255, .88);
        white-space: nowrap; transition: color .2s ease;
    }
    .site-nav a:hover { color: #fff; }
    .site-nav a::after {
        content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 2px;
        background: var(--yellow); transition: right .28s var(--ease);
    }
    .site-nav a:hover::after,
    .site-nav a.on::after { right: 0; }

    /* The page you are on keeps its underline and its full-strength text. */
    .site-nav a.on { color: #fff; }
}

/* Mobile menu: the current page gets a filled row rather than an underline —
   the items are stacked, so a rule under one of them reads as a divider. */
@media (max-width: 899px) {
    .site-nav a.on {
        color: var(--green-deep); font-weight: 800;
        background: var(--yellow); border-radius: 10px;
        padding-left: 12px; padding-right: 12px; border-bottom-color: transparent;
    }
}

/* ============================================================ search */

.head-search { position: relative; min-width: 0; }
.head-search form { position: relative; display: flex; align-items: center; }
/* Written as input[type=search], not plain `input`: the site-wide form rule
   further down is `input[type=search] { padding: 12px 15px }`, which carries
   the same weight and lands later — so a plain `.head-search input` lost, and
   the placeholder sat on top of the magnifier. */
.head-search input[type=search] {
    /* Left padding has to clear the icon (15px in, 17px wide) with a gap. */
    width: 100%; font: inherit; font-size: .92rem; padding: 11px 38px 11px 44px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.head-search input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px rgba(26, 107, 60, .13); }
.head-search input::-webkit-search-cancel-button { display: none; }

.head-search-ico {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    z-index: 1; pointer-events: none; color: var(--green); opacity: .75;
}
.head-search input:focus ~ .head-search-ico,
.head-search form:focus-within .head-search-ico { opacity: 1; }
.head-search-clear {
    position: absolute; right: 10px; background: none; border: 0; cursor: pointer;
    font-size: 1.3rem; line-height: 1; color: var(--text-mute); padding: 0 6px;
}
.head-search-clear:hover { color: var(--green); }

@media (min-width: 900px) { .head-search { max-width: 460px; justify-self: center; width: 100%; } }

.search-drop {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 120;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-xl); overflow: hidden; max-height: 68vh; overflow-y: auto;
    animation: slideUp .18s var(--ease);
}
.search-drop[hidden] { display: none !important; }

.sd-group {
    padding: 10px 16px 6px; font-size: .64rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
    background: var(--cream);
}
.sd-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); }
.sd-item:hover, .sd-item:focus { background: var(--green-tint); outline: none; }
.sd-item img, .sd-noimg {
    width: 46px; height: 40px; flex: none; object-fit: contain;
    background: var(--cream); border-radius: 9px;
}
.sd-text { flex: 1; min-width: 0; }
.sd-text strong { display: block; font-size: .89rem; font-weight: 700; }
.sd-text em { font-style: normal; font-size: .74rem; color: var(--text-mute); }
.sd-price { font-weight: 800; color: var(--green); white-space: nowrap; }
.sd-empty { padding: 24px 16px; text-align: center; color: var(--text-mute); font-size: .88rem; }
.sd-all {
    display: block; padding: 13px 16px; text-align: center;
    font-size: .85rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
}
.sd-all:hover, .sd-all:focus { background: var(--green-deep); outline: none; }

.search-page-form { display: flex; gap: 10px; margin-top: 20px; max-width: 620px; }
.search-page-form input { flex: 1; border-radius: 999px; }

.search-group { font-size: 1.05rem; margin: 30px 0 14px; }
.search-group:first-of-type { margin-top: 0; }

.search-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.search-chip {
    display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 9px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    transition: transform .2s var(--ease), border-color .2s ease;
}
.search-chip:hover { transform: translateY(-3px); border-color: var(--green); }
.search-chip img { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: var(--cream); }
.search-chip strong { display: block; font-size: .88rem; }
.search-chip em { font-style: normal; font-size: .73rem; color: var(--text-mute); }

.search-list { display: grid; gap: 9px; }
.search-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s var(--ease);
}
.search-row:hover { transform: translateX(4px); border-color: var(--green); box-shadow: var(--shadow); }
.search-row-img img { width: 72px; height: 60px; object-fit: contain; background: var(--cream); border-radius: 10px; }
.search-row-main { flex: 1; min-width: 0; }
.search-row-main strong { display: block; font-size: .96rem; }
.search-row-main em { font-style: normal; font-size: .76rem; color: var(--text-mute); }
.search-row-price { font-weight: 800; color: var(--green); font-size: 1.05rem; white-space: nowrap; }

/* ============================================================ error page */

.errpage { position: relative; padding: 60px 0 80px; overflow: hidden; }
.errpage-inner { position: relative; text-align: center; }
.errpage-logo { height: 76px; width: auto; margin: 0 auto 26px; object-fit: contain; }

.errpage-code { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.errpage-emoji { font-size: 2.6rem; }
.errpage-num {
    font-family: Fraunces, Georgia, serif; font-size: 3.4rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--green), var(--yellow));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.errpage h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
.errpage-msg { margin: 14px auto 26px; max-width: 46ch; color: var(--text-soft); }

.errpage-search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 26px; }
.errpage-search input { flex: 1; border-radius: 999px; }

.errpage-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.errpage-help { margin-top: 22px; font-size: .87rem; color: var(--text-mute); }
.errpage-help a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ hero slider */

.hero { position: relative; overflow: hidden; }

.hero-slider { position: relative; }

.hero-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .8s var(--ease);
}
.hero-slide.on { position: relative; opacity: 1; visibility: visible; }

.hero-slide-media { position: relative; min-height: 420px; }
.hero-slide-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    /* A very slow push-in keeps a still photograph feeling alive. */
    animation: heroZoom 12s ease-out both;
}
.hero-slide.on .hero-slide-media img { animation-play-state: running; }

@keyframes heroZoom { from { transform: scale(1.09); } to { transform: scale(1); } }

.hero-slide-shade {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(33, 26, 20, .82) 0%, rgba(33, 26, 20, .55) 45%, rgba(33, 26, 20, .12) 100%);
}

.hero-slide-copy {
    position: absolute; inset: 0; display: flex; align-items: center;
}
.hero-slide-copy .wrap { width: 100%; }

.hero-slide h2 {
    color: #fff; font-size: clamp(1.9rem, 6.5vw, 3.6rem); font-weight: 800; max-width: 16ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-slide p { color: rgba(255, 255, 255, .9); max-width: 46ch; margin: 14px 0 24px; font-size: 1.02rem; }

.hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 9px; z-index: 3; }
.hero-dot {
    width: 10px; height: 10px; border-radius: 999px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .48); transition: width .3s var(--ease), background .3s ease;
}
.hero-dot.on { width: 30px; background: var(--turmeric); }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .82); color: var(--ink); font-size: 1.2rem;
    display: none; place-items: center; transition: background .2s ease, transform .2s var(--ease);
}
.hero-arrow:hover { background: #fff; }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

@media (min-width: 760px) {
    .hero-slide-media { min-height: 520px; }
    .hero-arrow { display: grid; }
}

/* Fallback hero — used until the owner adds slides in the admin panel. */

.hero-fb {
    position: relative; padding: 52px 0 56px; overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 12% 10%, rgba(255, 198, 26, .22), transparent 60%),
        radial-gradient(ellipse 60% 50% at 92% 30%, rgba(26, 107, 60, .16), transparent 58%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(232, 200, 138, .3), transparent 60%),
        var(--ivory);
}

/* Slow-drifting colour blobs behind the hero. Transform-only so it costs the
   compositor almost nothing. */
.hero-fb::before {
    content: ""; position: absolute; inset: -25%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255, 198, 26, .28), transparent 42%),
        radial-gradient(circle at 78% 62%, rgba(26, 107, 60, .2),  transparent 40%);
    animation: meshDrift 22s ease-in-out infinite;
    pointer-events: none;
}

.hero-glow {
    position: absolute; inset: -30% 35% 35% -20%; pointer-events: none;
    background: radial-gradient(circle at 30% 40%, rgba(255, 198, 26, .2), transparent 62%);
}

.hero-inner { position: relative; display: grid; gap: 34px; }

.hero-chip {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 8px 17px; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    color: var(--brown); text-transform: uppercase; box-shadow: var(--shadow);
}
.chip-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); flex: none;
    box-shadow: 0 0 0 0 rgba(26, 107, 60, .6); animation: chipPulse 2.4s infinite;
}
@keyframes chipPulse {
    70%  { box-shadow: 0 0 0 9px rgba(26, 107, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 107, 60, 0); }
}

.hero-h1 { margin: 22px 0 18px; font-size: clamp(2.5rem, 10vw, 4.8rem); font-weight: 900; }
.hero-h1 span { display: block; }
.hero-h1 .l2 { color: var(--brown); }
.hero-h1 .l3 {
    position: relative; display: inline-block;
    background: linear-gradient(100deg, var(--green), var(--yellow-dark) 55%, var(--green-dark));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Hand-drawn underline under the punchline. */
.hero-h1 .l3::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .16em;
    background: linear-gradient(90deg, rgba(255, 198, 26, .75), rgba(255, 198, 26, .35));
    border-radius: 999px; z-index: -1;
    transform: scaleX(0); transform-origin: left;
    animation: underline .9s var(--ease) .5s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

/* Each headline line rises in turn, so the hero reads rather than just appears. */
.hero-h1 .l1, .hero-h1 .l2, .hero-h1 .l3 { animation: slideUp .7s var(--ease) both; }
.hero-h1 .l2 { animation-delay: .1s; }
.hero-h1 .l3 { animation-delay: .2s; }

.hero-p { margin: 0 0 24px; max-width: 54ch; color: var(--text-soft); font-size: 1.05rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btns .btn-a, .hero-btns .btn-b { flex: 1 1 200px; }
.hero-trust { margin-top: 14px; font-size: .84rem; color: var(--text-mute); }

.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.hc-tile {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: var(--cream); box-shadow: var(--shadow);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hc-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); }
.hc-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 8px; }
.hc-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
    font-size: .8rem; font-weight: 700; color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
}

@media (min-width: 960px) {
    .hero-fb { padding: 70px 0 66px; }
    .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
    .hc-tile:nth-child(2), .hc-tile:nth-child(3) { transform: translateY(26px); }
    .hc-tile:nth-child(2):hover, .hc-tile:nth-child(3):hover { transform: translateY(20px) scale(1.02); }
}

/* ============================================================ stats strip */

.stats-strip {
    background: linear-gradient(100deg, var(--green-deep), var(--green) 60%, var(--green-dark));
    color: #fff; position: relative; overflow: hidden;
}
.stats-strip::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 12% 50%, rgba(255, 198, 26, .3), transparent 42%),
                radial-gradient(circle at 88% 50%, rgba(26, 107, 60, .24), transparent 42%);
}

.stats-row {
    position: relative; display: flex; align-items: center; justify-content: space-around;
    gap: 10px; padding: 22px 0; text-align: center;
}
.stats-row > div { flex: 1; }
.stats-row .sv {
    display: block; font-size: clamp(1.5rem, 5.5vw, 2.5rem); font-weight: 800; line-height: 1;
    background: linear-gradient(180deg, #fff, var(--yellow));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats-row .sl {
    display: block; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(255, 255, 255, .68); margin-top: 7px; font-weight: 700;
}
.stats-sep { flex: 0 0 1px !important; align-self: stretch; background: rgba(255, 255, 255, .18); }

/* ============================================================ marquee */

.marquee {
    background: linear-gradient(90deg, var(--green), var(--green-dark) 50%, var(--green));
    padding: 13px 0; overflow: hidden; color: #fff;
}
/* Genuinely scrolling, not a scrollbar the visitor has to drag. The row is
   duplicated in the markup and shifted by exactly half its width, so the loop
   is seamless. */
.marquee-row {
    display: flex; gap: 34px; align-items: center; white-space: nowrap; width: max-content;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    animation: marquee 32s linear infinite;
    padding-left: 34px;
}
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row span::before { content: "✦"; color: rgba(255, 255, 255, .75); margin-right: 12px; }

@media (prefers-reduced-motion: reduce) {
    .marquee-row { animation: none; width: auto; overflow-x: auto; }
}

/* ============================================================ sections */

.sec { padding: 62px 0; position: relative; }
.sec.alt { background: var(--bg-alt); }

.sec-head { text-align: center; max-width: 680px; margin: 0 auto 38px; }
.sec-head h2 { font-size: clamp(1.75rem, 5.8vw, 2.7rem); font-weight: 800; }
.sec-head h2 em { font-style: normal; color: var(--turmeric-d); }
.sec-head p { margin: 14px 0 0; color: var(--text-soft); font-size: 1.02rem; }

/* A small gold rule under every section heading — ties the page together. */
.sec-head h2::after {
    content: ""; display: block; width: 62px; height: 4px; margin: 16px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--yellow));
}
.process .sec-head h2::after { background: linear-gradient(90deg, var(--yellow), #fff); }

.sec-cta { text-align: center; margin-top: 38px; }

/* Scroll reveal — JS adds .shown as each block enters the viewport. */
/* ---------------------------------------------------------------- reveal
   Entrance animations, one element at a time as it scrolls into view.

   Everything is driven by two custom properties so the script only has to set
   a direction and a delay — there is no per-element CSS to write. The distance
   is deliberately generous and the timing slow: a quick 6px nudge reads as a
   glitch, a slow travelled arrival reads as craft. */
.reveal {
    opacity: 0;
    transform: translate3d(var(--rv-x, 0), var(--rv-y, 34px), 0) scale(var(--rv-s, 1));
    transition:
        opacity   .95s cubic-bezier(.16, .84, .34, 1) var(--rv-d, 0ms),
        transform .95s cubic-bezier(.16, .84, .34, 1) var(--rv-d, 0ms);
    will-change: opacity, transform;
}
.reveal.shown { opacity: 1; transform: none; will-change: auto; }

/* Directions. The script picks one from where the element sits on the page,
   so a left column drifts in from the left and a right column from the right —
   the page assembles itself inwards instead of everything sliding one way. */
.rv-up    { --rv-y: 34px; }
.rv-left  { --rv-x: -46px; --rv-y: 0; }
.rv-right { --rv-x: 46px;  --rv-y: 0; }
.rv-zoom  { --rv-y: 16px; --rv-s: .93; }

/* Phones get a shorter travel: a 46px sideways slide on a 375px screen looks
   like the layout is broken rather than arriving. */
@media (max-width: 700px) {
    .rv-left  { --rv-x: -22px; }
    .rv-right { --rv-x: 22px; }
    .reveal { transition-duration: .7s; }
}

/* Product cards stagger in, so a grid arrives as a wave rather than a slab. */
/* (Product cards used to carry their own stagger here. The stagger is now set
   for every revealed element through --rv-d, and this rule would have
   overridden it.) */

/* Drifting food behind the page. Purely decorative, pointer-events off, and
   cheap: transform-only animation on a handful of elements. */
.deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* Real khakhra, papad and namkeen photographs, ghosted right back so they read
   as texture rather than content. Each drifts on its own clock. */
.deco-photos img {
    position: absolute;
    opacity: .07;
    filter: saturate(.65);
    animation: drift 20s ease-in-out infinite;
    will-change: transform;
}
.deco-photos.on-dark img { opacity: .05; filter: saturate(.5) brightness(1.6); }

@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--spin, 0deg)); }
    25%      { transform: translate3d(14px, -26px, 0) rotate(calc(var(--spin, 0deg) + 7deg)); }
    50%      { transform: translate3d(-10px, -14px, 0) rotate(calc(var(--spin, 0deg) - 5deg)); }
    75%      { transform: translate3d(-18px, 18px, 0) rotate(calc(var(--spin, 0deg) + 3deg)); }
}

/* Phones get fewer, smaller drifters — the screen is small and the battery
   is not ours to spend. */
@media (max-width: 720px) {
    .deco-photos img { opacity: .05; transform: scale(.62); }
    .deco-photos img:nth-child(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .deco-photos img { animation: none; }
}
.deco span {
    position: absolute; border-radius: 50%; opacity: .5;
    background: radial-gradient(circle at 32% 32%, var(--gold-light), rgba(232, 200, 138, .1) 70%);
    animation: floatY 9s ease-in-out infinite;
}
.deco span:nth-child(1) { width: 120px; height: 120px; top: 8%;  left: 4%;  --r: -8deg;  animation-duration: 11s; }
.deco span:nth-child(2) { width: 74px;  height: 74px;  top: 62%; left: 10%; --r: 12deg;  animation-duration: 9s;  animation-delay: -3s; }
.deco span:nth-child(3) { width: 150px; height: 150px; top: 18%; right: 5%; --r: 5deg;   animation-duration: 13s; animation-delay: -6s;
                          background: radial-gradient(circle at 32% 32%, rgba(255, 198, 26, .3), transparent 70%); }
.deco span:nth-child(4) { width: 88px;  height: 88px;  top: 72%; right: 12%; --r: -14deg; animation-duration: 10s; animation-delay: -1.5s;
                          background: radial-gradient(circle at 32% 32%, rgba(26, 107, 60, .2), transparent 70%); }

.sec > .wrap, .stats-strip > .wrap { position: relative; z-index: 1; }

/* ============================================================ category rail */

/* Sized as a share of the rail rather than a fixed pixel width, so a set
   number of categories fills the row at every screen size. Eight squeezed
   into a desktop row left each photo too small to tell one from another. */
.cat-rail {
    --cat-gap: 13px; --cat-per-view: 2;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cat-per-view) - 1) * var(--cat-gap)) / var(--cat-per-view));
    gap: var(--cat-gap);
    overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity;
}
@media (min-width: 560px) { .cat-rail { --cat-per-view: 3; } }
@media (min-width: 900px) { .cat-rail { --cat-per-view: 4; } }
/* Arrows sit outside the rail on wide screens and disappear on phones, where
   a thumb is the better control anyway. */
.cat-carousel { position: relative; }
.cat-carousel.dragging .cat-rail { cursor: grabbing; scroll-snap-type: none; }
.cat-carousel.dragging .crail-item { pointer-events: none; }

.cc-arrow {
    display: none; position: absolute; top: calc(50% - 14px); z-index: 4;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); color: var(--green);
    align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1;
    transition: opacity .2s ease, transform .2s var(--ease), background .2s ease;
}
.cc-arrow:hover { background: var(--green); color: #fff; transform: scale(1.08); }
.cc-arrow[disabled] { opacity: 0; pointer-events: none; }
.cc-arrow.prev { left: -18px; }
.cc-arrow.next { right: -18px; }
@media (min-width: 900px) { .cc-arrow { display: flex; } }

.cat-rail::-webkit-scrollbar { height: 6px; }
.cat-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

.crail-item {
    scroll-snap-align: start; text-align: center; position: relative;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 13px 9px; transition: transform .28s var(--ease), border-color .25s ease, box-shadow .28s var(--ease);
}
.crail-item:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: var(--shadow-lg); }

/* Gradient ring around each category photo, brightening on hover. */
.crail-img { display: block; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--yellow-tint), var(--yellow)); transition: background .3s ease; }
.crail-item:hover .crail-img { background: linear-gradient(135deg, var(--yellow), var(--green)); }

.crail-img img {
    width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%;
    background: var(--cream); padding: 7px;
    transition: transform .35s var(--ease);
}
.crail-item:hover .crail-img img { transform: scale(1.07); }
.crail-noimg {
    display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%;
    background: var(--cream); color: var(--brown); font-weight: 800; font-size: 1.5rem;
}
.crail-name { display: block; margin-top: 10px; font-size: .76rem; font-weight: 700; line-height: 1.28; }
.crail-count {
    position: absolute; top: 9px; right: 9px; background: var(--turmeric); color: #fff;
    font-size: .63rem; font-weight: 800; min-width: 21px; height: 21px;
    border-radius: 99px; display: grid; place-items: center; padding: 0 6px;
}

/* (The old fixed 140px column lived here. It is gone: the rail now sizes its
   columns from --cat-per-view further up, so a set number fills the row.) */

/* ============================================================ why cards */

.why-grid { display: grid; gap: 15px; grid-template-columns: 1fr; }

.why-card {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 26px; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s ease;
}
.why-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(180deg, var(--green), var(--yellow));
    transform: scaleY(0); transform-origin: top; transition: transform .32s var(--ease);
}
.why-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.why-card:hover::before { transform: scaleY(1); }

.why-ico  { font-size: 2rem; line-height: 1; }
.why-head { margin-top: 14px; font-weight: 800; font-size: 1.06rem; }
.why-body { margin: 7px 0 0; color: var(--text-soft); font-size: .92rem; }

@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================ product cards
   Source photos are wide (about 1.84:1), so the frame is 4:3 with `contain`
   on a warm ground. `cover` on a square frame was slicing nearly half the
   khakhra away. */

.pgrid { display: grid; gap: 15px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1040px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }

.pcard {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .25s ease;
}
.pcard:hover { transform: translateY(-9px); box-shadow: var(--shadow-xl); border-color: transparent; }

/* Gradient rim on hover, drawn as a border-box mask so it doesn't shift layout. */
.pcard::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: linear-gradient(135deg, var(--green), var(--yellow), var(--green-dark));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.pcard:hover::after { opacity: 1; }

.pcard.in-cart { border-color: var(--leaf); box-shadow: 0 0 0 2px rgba(26, 107, 60, .35); }

.pcard-img { position: relative; display: block; overflow: hidden; background: linear-gradient(155deg, var(--cream), #fff 70%); }
/* Measured, not guessed: every photo in the catalogue is square (1:1). 4:3 is
   the widest frame that still shows a square photo at a decent size — 16:9
   shrank it to a stamp with wide bands either side. `contain` stays, because a
   product photo must never be cropped.

   height:auto is not optional — the tag carries height="300", and that
   presentation hint beats aspect-ratio, which is why every card used to be
   300px of photo frame no matter how wide the column was. */
.pcard-img img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 6px;
    transition: transform .5s var(--ease);
}
.pcard:hover .pcard-img img { transform: scale(1.09) rotate(-1.5deg); }

/* Second photo of the same product, stacked exactly over the first and faded
   in on hover. Products with only one picture never render it. */
.pcard-hover {
    position: absolute; inset: 0; z-index: 1;
    opacity: 0; transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.pcard:hover .pcard-hover,
.pcard:focus-within .pcard-hover { opacity: 1; }
/* With a second photo the zoom would fight the cross-fade, so on those cards
   the photo holds still and only the swap does the work. */
.pcard:hover .pcard-img:has(.pcard-hover) img { transform: none; }

/* A light sweep across the photo on hover. */
.pcard-img::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .7s var(--ease);
}
.pcard:hover .pcard-img::before { transform: translateX(120%); }

.pcard-noimg {
    display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
    color: var(--brown); font-weight: 800; font-size: 2rem; background: var(--cream);
}
.pcard-noimg.big { aspect-ratio: 1; font-size: 4rem; border-radius: var(--radius); }

/* A stack, so a discounted bestseller shows both labels instead of one
   silently replacing the other. */
.pbadges {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.pbadge {
    font-size: .63rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #fff; padding: 5px 11px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.pbadge.best { background: linear-gradient(100deg, var(--yellow), var(--yellow-dark)); color: var(--green-deep); }
.pbadge.sale { background: linear-gradient(100deg, var(--sale), #DC2626); }
.pbadge.new  { background: linear-gradient(100deg, var(--green), var(--green-dark)); }

.pcard-oos {
    position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
    background: rgba(251, 248, 243, .86); font-weight: 800; font-size: .84rem; color: var(--text-soft);
}

.pcard-body { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat  { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--turmeric-d); font-weight: 700; }

/* Names run from one word to five, which used to make every card in a row a
   different height. Two lines always, clipped past that — so a row of cards
   lines up whatever the products are called. */
.pcard-name {
    margin: 4px 0 0; font-size: .95rem; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: calc(2 * 1.3em);
}

/* Price sits directly under the name; everything below is pinned to the foot
   of the card so the buttons align across the row. */
.pcard-price { margin-top: 7px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pp-now  { font-weight: 800; color: var(--brown); font-size: 1.1rem; }
.pp-was  { text-decoration: line-through; color: var(--text-mute); font-size: .82rem; }
.pp-pack { font-size: .72rem; color: var(--text-mute); }

/* ---- quantity stepper (cards, detail page and cart share this) ---- */

.qty {
    display: inline-flex; align-items: stretch; border: 1px solid var(--border);
    border-radius: 999px; overflow: hidden; background: var(--surface);
}
.qty button {
    width: 34px; border: 0; background: var(--cream); color: var(--brown);
    font-size: 1.1rem; font-weight: 800; cursor: pointer; line-height: 1;
    transition: background .16s ease, color .16s ease;
}
.qty button:hover:not(:disabled) { background: var(--turmeric); color: #fff; }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
.qty input {
    width: 44px; border: 0; text-align: center; font: inherit; font-size: .9rem; font-weight: 700;
    background: transparent; color: var(--text); -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty.small button { width: 30px; font-size: 1rem; }
.qty.small input { width: 36px; font-size: .84rem; }

/* The stepper and the buttons live inside the add-to-cart form, so it is the
   form that takes up a shorter card's slack. Out-of-stock cards have no form
   and their buttons are pushed down the same way. */
.pcard-body > form,
.pcard-body > .pcard-actions { margin-top: auto; padding-top: 9px; }

.pcard-qty { display: flex; justify-content: center; }

.pcard-actions { display: flex; gap: 8px; margin-top: 8px; padding-top: 0; }
.pcard-actions form { flex: 1; display: flex; }

.pbtn {
    flex: 1; text-align: center; padding: 10px 6px; border-radius: 999px; border: 0; cursor: pointer;
    font: inherit; font-size: .79rem; font-weight: 800; transition: background .18s ease, transform .18s var(--ease);
}
.pbtn.primary { background: var(--green); color: #fff; }
.pbtn.primary:hover { background: var(--green-dark); transform: translateY(-2px); }
.pbtn.primary.added { background: var(--leaf); }
.pbtn.wa { background: var(--whatsapp); color: #fff; }
.pbtn.wa:hover { background: var(--whatsapp-dk); transform: translateY(-2px); }
.pbtn:disabled { opacity: .6; cursor: wait; }

/* ============================================================ toast */

.toast-wrap {
    position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
    z-index: 200; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 28px);
}
@media (min-width: 960px) { .toast-wrap { bottom: 26px; } }

.toast {
    display: flex; align-items: center; gap: 10px;
    background: var(--green); color: #fff; padding: 12px 20px; border-radius: 999px;
    font-size: .87rem; font-weight: 600; box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    animation: slideUp .28s var(--ease);
}
.toast.leaving { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.toast .tick {
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    background: var(--leaf); display: grid; place-items: center; font-size: .75rem;
}

/* ============================================================ process */

.process { background: linear-gradient(140deg, var(--green-deep), var(--green-dark)); color: var(--text-on-dark); position: relative; overflow: hidden; }
.process .sec-head h2 { color: #fff; }
.process .sec-head p  { color: rgba(255, 255, 255, .62); }

.proc-row { display: grid; gap: 15px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .proc-row { grid-template-columns: repeat(4, 1fr); } }

.proc-step {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(232, 200, 138, .22);
    border-radius: var(--radius); padding: 24px; transition: transform .28s var(--ease), background .25s ease;
}
.proc-step:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .09); }
.ps-no {
    font-size: 1.8rem; font-weight: 800; line-height: 1;
    background: linear-gradient(120deg, var(--yellow), #fff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-head { margin-top: 12px; font-weight: 800; }
.ps-body { margin: 6px 0 0; font-size: .87rem; color: rgba(255, 255, 255, .66); }

/* ============================================================ showcase tabs */

.sc-tabs { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 22px; scrollbar-width: none; }
.sc-tabs::-webkit-scrollbar { display: none; }

.sc-tab {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 10px 18px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--text-soft);
    cursor: pointer; white-space: nowrap; transition: all .2s var(--ease);
}
.sc-tab:hover { border-color: var(--gold); transform: translateY(-2px); }
.sc-tab.on { background: var(--green); border-color: var(--green); color: #fff; }

.sc-n { background: var(--cream); color: var(--brown); border-radius: 99px; font-size: .67rem; font-weight: 800; padding: 2px 8px; }
.sc-tab.on .sc-n { background: rgba(255, 255, 255, .18); color: #fff; }

.sc-panel { display: none; }
.sc-panel.on { display: block; animation: slideUp .35s var(--ease); }

/* ============================================================ testimonials */

.tgrid { display: grid; gap: 15px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tgrid { grid-template-columns: repeat(3, 1fr); } }

.tcard {
    margin: 0; background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 26px; position: relative;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tcard::before {
    content: "”"; position: absolute; top: 4px; right: 20px;
    font-size: 4.5rem; line-height: 1; color: var(--gold-light);
}
.tstars { color: var(--turmeric); letter-spacing: 2px; }
.tcard blockquote { margin: 11px 0 17px; font-size: .96rem; }
.tcard figcaption { display: flex; align-items: center; gap: 11px; }
.tcard figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tcard figcaption strong { display: block; font-size: .89rem; }
.tcard figcaption em { font-style: normal; font-size: .75rem; color: var(--text-mute); }

/* ============================================================ faq */

.faq-item {
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 17px 20px; margin-bottom: 11px; transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--gold); box-shadow: var(--shadow); }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--turmeric-d); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-a { margin-top: 11px; color: var(--text-soft); font-size: .93rem; animation: slideUp .28s var(--ease); }

/* ============================================================ CTA band */

.cta-band {
    position: relative; overflow: hidden; color: #fff; padding: 64px 0;
    background: linear-gradient(125deg, var(--green), var(--green-dark) 55%, var(--green-deep));
}
.cta-band::before {
    content: ""; position: absolute; inset: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 55%);
    animation: spinSlow 26s linear infinite;
}
.cta-inner { position: relative; text-align: center; }
.cta-inner h2 { font-size: clamp(1.6rem, 5.8vw, 2.5rem); font-weight: 800; }
.cta-inner p  { margin: 14px auto 26px; max-width: 52ch; color: rgba(255, 255, 255, .9); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-btns .btn-a { background: #fff; color: var(--ink); }
.cta-btns .btn-a:hover { background: var(--cream); }

/* ============================================================ page hero */

.page-hero { padding: 46px 0 26px; position: relative; }
.page-hero h1 { margin: 18px 0 12px; font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 800; }
.page-lede { margin: 0; max-width: 62ch; color: var(--text-soft); font-size: 1.03rem; }
.page-lede a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }

.prose h2 { margin: 32px 0 11px; font-size: 1.35rem; }
.prose p  { color: var(--text-soft); }
.prose .muted { font-size: .83rem; color: var(--text-mute); }

/* ============================================================ product list */

.plist-head { padding: 28px 0 6px; }
.plist-head h1 { margin: 11px 0 5px; font-size: clamp(1.7rem, 6vw, 2.5rem); font-weight: 800; }
.plist-intro { margin: 11px 0 6px; max-width: 68ch; color: var(--text-soft); }
.plist-count { margin: 0; color: var(--text-mute); font-size: .88rem; }

.crumb { display: flex; flex-wrap: wrap; gap: 7px; font-size: .79rem; color: var(--text-mute); }
.crumb a:hover { color: var(--brown); text-decoration: underline; }

.plist-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .plist-grid { grid-template-columns: 248px 1fr; gap: 32px; align-items: start; } }

.filters { display: grid; gap: 18px; }
@media (min-width: 940px) { .filters { position: sticky; top: calc(var(--head-h) + 14px); } }

.fsearch { display: flex; gap: 8px; }
.fsearch input {
    flex: 1; min-width: 0; padding: 11px 15px; font: inherit; font-size: .9rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
}
.fsearch button {
    padding: 11px 18px; border: 0; border-radius: 999px;
    background: var(--green); color: #fff; font-weight: 700; cursor: pointer;
}

.fblock {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 16px; max-height: 440px; overflow-y: auto;
}
.fblock h2 { font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 9px; }

.fitem { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; font-size: .86rem; }
.fitem:hover { background: var(--cream); }
.fitem.on { background: var(--green); color: #fff; font-weight: 700; }
.fitem em { font-style: normal; font-size: .73rem; color: var(--text-mute); }
.fitem.on em { color: rgba(255, 255, 255, .7); }

.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .83rem; color: var(--text-mute); }
.sortopt { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); }
.sortopt:hover { border-color: var(--gold); }
.sortopt.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }

.empty { text-align: center; padding: 54px 20px; color: var(--text-soft); }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.pager a { min-width: 42px; text-align: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: .87rem; font-weight: 600; }
.pager a:hover { border-color: var(--gold); }
.pager a.on { background: var(--green); border-color: var(--green); color: #fff; }

/* ============================================================ product detail */

.pdp { padding: 26px 0 46px; }
.pdp-grid { display: grid; gap: 28px; margin-top: 18px; }
@media (min-width: 940px) { .pdp-grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }

.pdp-main {
    background: linear-gradient(160deg, var(--cream), #fff);
    border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden;
}
.pdp-main img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 16px; }

.pdp-thumbs { display: flex; gap: 10px; margin-top: 11px; overflow-x: auto; }
.pdp-thumb { flex: none; width: 74px; padding: 0; background: none; cursor: pointer; border: 2px solid transparent; border-radius: 12px; overflow: hidden; }
.pdp-thumb.on { border-color: var(--gold); }
.pdp-thumb img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--cream); padding: 4px; }

.pdp-cat { font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--turmeric-d); font-weight: 700; }
.pdp-info h1 { margin: 9px 0 15px; font-size: clamp(1.7rem, 6vw, 2.5rem); font-weight: 800; }

.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.pdp-price .now { font-size: 2rem; font-weight: 800; color: var(--brown); }
.pdp-price .was { text-decoration: line-through; color: var(--text-mute); }
.pdp-price .off { background: var(--ok-bg); color: var(--ok-ink); font-size: .75rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }

.pdp-pack  { margin-top: 9px; font-size: .9rem; color: var(--text-soft); }
.pdp-short { margin: 15px 0 0; color: var(--text-soft); }

.pdp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; align-items: stretch; }
.pdp-add { display: flex; gap: 10px; align-items: stretch; flex: 1 1 280px; }
.pdp-add .btn-a { flex: 1; }
.pdp-actions .btn-b { flex: 1 1 160px; }

.pdp-trust { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--border-soft); display: grid; gap: 9px; }
.pdp-trust li { font-size: .89rem; color: var(--text-soft); }
.pdp-trust li::before { content: "✓"; color: var(--leaf); font-weight: 800; margin-right: 10px; }

.pdp-long { margin-top: 22px; color: var(--text-soft); }
.pdp-specs { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: .89rem; }
.pdp-specs dt { font-weight: 700; color: var(--text-mute); }
.pdp-specs dd { margin: 0; color: var(--text-soft); }

/* ============================================================ cart */

.cart-grid { display: grid; gap: 26px; }
@media (min-width: 940px) { .cart-grid { grid-template-columns: 1fr 366px; gap: 34px; align-items: start; } }

.cline {
    display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 14px; margin-bottom: 13px;
    transition: box-shadow .25s var(--ease), border-color .2s ease, opacity .25s ease;
}
.cline:hover { box-shadow: var(--shadow); border-color: var(--border); }
.cline.removing { opacity: .35; }

.cline-img img { width: 88px; height: 74px; object-fit: contain; background: var(--cream); border-radius: 12px; padding: 5px; }

.cline-name { margin: 0; font-size: 1rem; font-weight: 700; }
.cline-pack, .cline-unit { font-size: .78rem; color: var(--text-mute); margin-top: 3px; }
.cline-warn { margin-top: 7px; font-size: .79rem; font-weight: 700; color: var(--err); }

.cline-foot {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 12px; margin-top: 10px;
    padding-top: 11px; border-top: 1px dashed var(--border-soft);
}
.cline-total { font-weight: 800; color: var(--brown); font-size: 1.05rem; }

@media (min-width: 660px) {
    .cline { grid-template-columns: 88px 1fr auto; }
    .cline-foot { grid-column: auto; margin: 0; padding: 0; border: 0; gap: 18px; }
}

.linkbtn {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: .81rem; font-weight: 700; color: var(--brown);
    text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--ink); }
.linkbtn.danger { color: var(--err); }

.cart-clear { margin-top: 8px; }

.cart-summary, .checkout-summary {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
@media (min-width: 940px) { .cart-summary, .checkout-summary { position: sticky; top: calc(var(--head-h) + 16px); } }

.cart-summary h2, .checkout-summary h2 { font-size: 1.1rem; margin-bottom: 16px; }

.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: .93rem; }
.sum-row em { font-style: normal; font-size: .79rem; color: var(--text-mute); }
.sum-row.muted { color: var(--text-mute); font-size: .85rem; }
.sum-row.total { border-top: 2px solid var(--border); margin-top: 8px; padding-top: 14px; font-size: 1.06rem; }
.sum-row.total strong { font-size: 1.4rem; color: var(--brown); }
.sum-note { margin: 5px 0 16px; font-size: .77rem; color: var(--text-mute); }

.sum-pin { margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.sum-pin label { display: block; font-size: .79rem; color: var(--text-soft); margin-bottom: 8px; }
.sum-pin-row { display: flex; gap: 8px; }
.sum-pin-row input {
    flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.sum-pin-row .btn-b { padding: 11px 18px; }
.sum-pin-out { margin-top: 10px; font-size: .82rem; color: var(--brown); font-weight: 600; min-height: 1.2em; }

/* The checkout button nudges itself every few seconds so the eye comes back to
   it. Deliberately small — a big bounce on a payment button reads as spam. */
@keyframes nudge {
    0%, 86%, 100% { transform: none;            box-shadow: 0 6px 18px rgba(20, 32, 26, .26); }
    90%           { transform: translateY(-4px) scale(1.025); box-shadow: 0 16px 34px rgba(255, 198, 26, .5); }
    94%           { transform: translateY(-1px) scale(1.008); box-shadow: 0 10px 24px rgba(255, 198, 26, .3); }
}
.btn-checkout { animation: nudge 3s ease-in-out infinite; }
.btn-checkout:hover { animation-play-state: paused; }

.cart-back { display: block; text-align: center; font-size: .84rem; color: var(--text-soft); margin-top: 10px; }
.cart-back:hover { color: var(--brown); }

.cart-usp { display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.cart-usp li { list-style: none; font-size: .81rem; color: var(--text-soft); }
.cart-usp li::before { content: "✓"; color: var(--leaf); font-weight: 800; margin-right: 9px; }

/* ============================================================ auth / forms */

.auth-sec { padding: 50px 0 74px; }
.auth-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 34px; max-width: 470px; margin: 0 auto; box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.6rem; margin-bottom: 9px; }
.auth-sub { margin: 0 0 22px; color: var(--text-soft); font-size: .93rem; }
.auth-card label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; margin-bottom: 17px; }
.auth-alt { margin: 18px 0 0; font-size: .85rem; color: var(--text-soft); text-align: center; }
.auth-alt a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.otp-input { letter-spacing: .5em; font-size: 1.35rem; text-align: center; font-weight: 800; }

.checkout-grid { display: grid; gap: 26px; }
@media (min-width: 940px) { .checkout-grid { grid-template-columns: 1fr 366px; gap: 34px; align-items: start; } }

.checkout-main h2 { font-size: 1.1rem; margin: 24px 0 13px; }
.checkout-main h2:first-of-type { margin-top: 0; }
.checkout-main label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; margin-bottom: 15px; }
.checkout-main label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.checkout-main label.check input { width: auto; }

.field-row { display: grid; gap: 0 15px; }
@media (min-width: 640px) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row.three { grid-template-columns: 1fr 1fr 1fr; }
}

input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number],
input[type=password], input:not([type]), textarea, select {
    font: inherit; font-size: .95rem; padding: 12px 15px; width: 100%;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 4px rgba(255, 198, 26, .18); }
textarea { resize: vertical; }

.qty input[type=number] { padding: 0; border: 0; box-shadow: none; }

.addr-list { display: grid; gap: 10px; margin-bottom: 22px; }
.addr-chip {
    text-align: left; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 13px 16px; cursor: pointer; font: inherit; display: grid; gap: 3px;
}
.addr-chip:hover { border-color: var(--gold); }
.addr-chip.on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.addr-chip span { font-size: .81rem; color: var(--text-soft); }

.pay-options { display: grid; gap: 10px; }
.pay-opt {
    display: flex !important; align-items: center; gap: 12px; font-weight: 500 !important;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 15px; cursor: pointer; margin-bottom: 0 !important;
}
.pay-opt:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pay-opt input { width: auto !important; }
.pay-opt strong { display: block; font-size: .94rem; }
.pay-opt em { font-style: normal; font-size: .79rem; color: var(--text-mute); }
.pay-note { font-size: .83rem; color: var(--text-mute); margin: 0; }

.co-lines { list-style: none; margin: 0 0 14px; padding: 0; }
.co-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }
.co-name em { font-style: normal; color: var(--text-mute); }
.co-amt { white-space: nowrap; font-weight: 600; }

.contact-grid { display: grid; gap: 32px; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 46px; align-items: start; } }
.contact-info h2, .contact-form h2 { font-size: 1.3rem; margin-bottom: 18px; }
.ci-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.ci-k { font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); flex: none; }
.ci-v { font-weight: 600; text-align: right; }
.ci-row.wa .ci-v { color: var(--whatsapp-dk); }
.ci-map { margin-top: 20px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-soft); }
.ci-map iframe { width: 100%; height: 280px; border: 0; display: block; }
.contact-form form { display: grid; gap: 15px; }
.contact-form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.contact-form button { justify-self: start; }

.field-err { color: var(--err); font-size: .79rem; font-weight: 500; }

.note { border-radius: var(--radius-sm); padding: 13px 17px; margin-bottom: 17px; font-size: .92rem; }
.note.ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.note.warn:empty { display: none; }
.note.warn ul { margin: 0; padding-left: 18px; }

/* ============================================================ order pages */

.success-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-lg); }
.success-tick {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ok-bg); color: var(--ok-ink); font-size: 1.9rem; font-weight: 800;
    margin-bottom: 16px; animation: popIn .5s var(--ease);
}
.success-card h1 { font-size: 1.8rem; margin-bottom: 9px; }
.success-card h2 { font-size: 1.05rem; margin: 26px 0 11px; }
.success-meta { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 20px 0; }
.success-meta div { background: var(--cream); border-radius: var(--radius-sm); padding: 14px; }
.success-meta span { display: block; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.success-meta strong { font-size: .96rem; }
.success-addr { color: var(--text-soft); font-size: .91rem; margin: 0; }
.success-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }

.track-form { display: grid; gap: 4px; margin-bottom: 28px; }
.track-form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; margin-bottom: 15px; }
.track-form button { justify-self: start; }

.track-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.track-result h2 { font-size: 1.25rem; }
.track-result h3 { font-size: .95rem; margin: 22px 0 9px; }
.track-meta { color: var(--text-mute); font-size: .85rem; margin: 5px 0 22px; }

.track-steps { list-style: none; margin: 0 0 22px; padding: 0; }
.track-steps li { display: flex; align-items: center; gap: 13px; padding: 0 0 20px; position: relative; }
.track-steps li:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--border); }
.track-steps li.done:not(:last-child)::before { background: var(--leaf); }
.ts-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; z-index: 1; background: var(--surface); border: 2px solid var(--border); }
.track-steps li.done .ts-dot { background: var(--leaf); border-color: var(--leaf); }
.ts-label { font-size: .92rem; color: var(--text-mute); }
.track-steps li.done .ts-label { color: var(--text); font-weight: 700; }
.track-courier { font-size: .89rem; color: var(--text-soft); }

.order-list { display: grid; gap: 13px; }
.ocard { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; transition: box-shadow .25s var(--ease); }
.ocard:hover { box-shadow: var(--shadow); }
.ocard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ocard-no { font-size: 1.05rem; margin: 0; }
.ocard-meta { display: flex; flex-wrap: wrap; gap: 15px; margin: 9px 0; font-size: .85rem; color: var(--text-soft); }
.ocard-track { font-size: .83rem; color: var(--text-soft); margin-bottom: 9px; }
.logout-form { margin-top: 12px; }

.ostatus { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--cream); color: var(--text-soft); }
.ostatus.s-new        { background: var(--warn-bg); color: var(--warn-ink); }
.ostatus.s-confirmed  { background: #DBEAFE; color: #1E40AF; }
.ostatus.s-packed     { background: #E0E7FF; color: #3730A3; }
.ostatus.s-dispatched { background: #FAE8FF; color: #86198F; }
.ostatus.s-delivered  { background: var(--ok-bg); color: var(--ok-ink); }
.ostatus.s-cancelled  { background: #FEE2E2; color: #991B1B; }

/* ============================================================ blog */

.blog-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.bcard {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s ease;
}
.bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }

.bcard-link { display: block; background: var(--cream); overflow: hidden; }
.bcard-link img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s var(--ease); }
.bcard:hover .bcard-link img { transform: scale(1.06); }

.bcard-noimg { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; font-size: 2.6rem; }

.bcard-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }

.bcard-tag {
    align-self: flex-start; font-size: .64rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--turmeric-d); background: var(--cream);
    padding: 4px 11px; border-radius: 999px;
}

.bcard-title { margin: 11px 0 0; font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.bcard-excerpt { margin: 9px 0 0; font-size: .89rem; color: var(--text-soft); flex: 1; }
.bcard-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: .76rem; color: var(--text-mute); }

.bpost-head { margin: 18px 0 22px; }
.bpost-head h1 { margin: 12px 0 10px; font-size: clamp(1.8rem, 6.5vw, 2.8rem); font-weight: 800; }

.bpost-cover {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--radius); margin-bottom: 28px; box-shadow: var(--shadow-lg);
}

.bpost-body { font-size: 1.04rem; line-height: 1.8; }
.bpost-body h2 { margin: 34px 0 12px; font-size: 1.35rem; color: var(--brown); }
.bpost-body p { margin: 0 0 16px; color: var(--text-soft); }
.bpost-body ul { margin: 0 0 18px; padding-left: 22px; color: var(--text-soft); }
.bpost-body li { margin-bottom: 9px; }
.bpost-body strong { color: var(--text); }

.bpost-cta {
    margin-top: 40px; padding: 26px; text-align: center;
    background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.bpost-cta p { margin: 0 0 16px; font-weight: 700; font-size: 1.05rem; }

/* ============================================================ footer */

.site-foot { background: #0E2A1B; color: rgba(255, 255, 255, .72); padding: 52px 0 0; margin-bottom: 66px; }
.foot-grid { display: grid; gap: 30px; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 36px; } }

.foot-name { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0; }
.foot-about { margin: 11px 0 15px; font-size: .89rem; max-width: 42ch; }
.foot-social { display: flex; flex-wrap: wrap; gap: 15px; font-size: .83rem; }
.foot-social a { border-bottom: 1px solid rgba(232, 200, 138, .4); padding-bottom: 2px; }
.foot-social a:hover { color: var(--gold-light); }

.foot-col h2 { font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--turmeric); margin: 0 0 13px; }
.foot-col a { display: block; padding: 5px 0; font-size: .89rem; }
.foot-col a:hover { color: #fff; }
.foot-addr, .foot-small { margin: 0 0 9px; font-size: .85rem; }
.wa-link { color: var(--whatsapp) !important; font-weight: 700; }
.foot-bottom {
    margin-top: 36px; padding: 18px; border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .79rem; color: rgba(255, 255, 255, .45);
    display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center;
}
@media (min-width: 760px) { .foot-bottom { justify-content: space-between; } }

.foot-credit a { color: rgba(255, 255, 255, .78); font-weight: 800; letter-spacing: .04em; }
.foot-credit a:hover { color: var(--yellow); }
/* The trademark rides on the final A, small and raised. */
.foot-credit .wx-a { position: relative; white-space: nowrap; }
.foot-credit sup { font-size: .55em; font-weight: 700; letter-spacing: .06em; margin-left: 1px; vertical-align: super; }

/* ============================================================ sticky bar */

.sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 9px; padding: 10px 12px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(20, 32, 26, .08);
}
.sticky-bar a { flex: 1; text-align: center; padding: 13px 8px; border-radius: 999px; font-size: .89rem; font-weight: 800; }
.sb-wa   { background: var(--whatsapp); color: #fff; }
.sb-shop { background: var(--green); color: #fff; }

@media (min-width: 960px) {
    .sticky-bar { display: none; }
    .site-foot { margin-bottom: 0; }
}

/* ============================================================ cookie bar */

/* `display:flex` below beats the browser's own `[hidden] { display:none }`, so
   the bar has to opt out explicitly — without this it never goes away when
   dismissed. */
.cookie-bar[hidden] { display: none !important; }

.cookie-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 210;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-xl);
    animation: slideUp .4s var(--ease) .8s both;
}
.cookie-bar p { margin: 0; flex: 1 1 260px; font-size: .87rem; color: var(--text-soft); }
.cookie-bar p strong { color: var(--text); }
.cookie-bar a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar .cookie-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.cookie-bar button { padding: 11px 22px; font-size: .87rem; }

@media (min-width: 960px) {
    .cookie-bar { left: auto; right: 20px; bottom: 20px; max-width: 460px; }
}
/* Above the mobile order bar so neither covers the other. */
@media (max-width: 959px) { .cookie-bar { bottom: 78px; } }




/* ═══════════════════════════════════════════════════════════════════════════
   Offer tiles — big photo, offer text over it, one tap to the products.
   ═══════════════════════════════════════════════════════════════════════════ */
.promo-sec { padding-top: 4px; }

.promo-grid { display: grid; gap: 16px; }
@media (min-width: 760px) {
    .promo-grid.promo-2 { grid-template-columns: 1fr 1fr; }
    .promo-grid.promo-3 { grid-template-columns: 1fr 1fr 1fr; }
    /* With two tiles the first is given the wider half — an offer reads better
       when one of them is clearly the headline. */
    .promo-grid.promo-2 { grid-template-columns: 1.35fr 1fr; }
}

.promo-tile {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--radius-lg); min-height: 210px;
    box-shadow: var(--shadow); isolation: isolate;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.promo-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.promo-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2;
    transition: transform .6s var(--ease);
}
.promo-tile:hover img { transform: scale(1.07); }

/* A dark wash from the left so the text stays readable over any photo the
   owner uploads — including a bright one. */
.promo-tile::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(95deg, rgba(9, 58, 31, .86) 0%, rgba(9, 58, 31, .55) 48%, rgba(9, 58, 31, .12) 100%);
}

.promo-body {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    gap: 7px; padding: 26px 24px; height: 100%; justify-content: center; color: #fff;
}
.promo-kicker {
    font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--yellow); background: rgba(0, 0, 0, .22);
    padding: 5px 11px; border-radius: 999px;
}
.promo-title {
    font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 800; line-height: 1.12; max-width: 15ch; text-wrap: balance;
}
.promo-cta {
    margin-top: 4px; font-size: .84rem; font-weight: 700;
    border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
    transition: gap .25s ease;
}
.promo-tile:hover .promo-cta { border-bottom-color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   Offer of the week — headline, live countdown, one button.
   ═══════════════════════════════════════════════════════════════════════════ */
.deal-band {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 34px 0; margin: 8px 0;
    background: linear-gradient(100deg, var(--green-deep), var(--green) 60%, var(--green-dark));
    color: #fff;
}
.deal-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -1; opacity: .26;
}

.deal-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 20px;
}
.deal-copy { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.deal-kicker {
    font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--green-deep); background: var(--yellow);
    padding: 5px 12px; border-radius: 999px;
}
.deal-copy h2 {
    font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.15rem);
    font-weight: 800; line-height: 1.1; color: #fff; margin: 0; text-wrap: balance;
}

.deal-clock { display: flex; gap: 9px; }
.dc-cell {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 62px; padding: 9px 6px; border-radius: 14px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(3px);
}
.dc-cell b {
    font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
    line-height: 1; font-variant-numeric: tabular-nums; color: var(--yellow);
}
.dc-cell i {
    font-style: normal; font-size: .6rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}

.deal-btn { flex-shrink: 0; }

@media (max-width: 620px) {
    .deal-inner { flex-direction: column; align-items: flex-start; }
    .dc-cell { min-width: 54px; }
    .deal-btn { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Story page — each passage of text paired with a photograph, sides swapping
   down the page. Rows always finish level, so there is no dead page under the
   shorter side.
   ═══════════════════════════════════════════════════════════════════════════ */
.story-sec { position: relative; overflow: hidden; }

.story-row { display: grid; gap: 22px; align-items: center; margin-bottom: 34px; }
.story-row:last-of-type { margin-bottom: 0; }

@media (min-width: 860px) {
    .story-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; }
    /* The photo leads on alternate rows. `order` rather than a second grid
       definition, so the text stays first in the markup and therefore first
       for a screen reader on every row. */
    .story-row.flip .prose     { order: 2; }
    .story-row.flip .story-pic { order: 1; }
}

.story-row .prose h2 { margin-top: 0; }
.story-row .prose p  { margin-bottom: 0; }

.photo-stack { display: grid; gap: 14px; }

.ps-tile {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--radius-lg); background: var(--cream);
    box-shadow: var(--shadow);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ps-tile:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: var(--shadow-lg); }

/* `cover`, not `contain`: these are decoration, and a square photo left inside
   a wide frame with `contain` is mostly empty ground. Cropping a khakhra costs
   nothing here — the product pages show it whole. */
.ps-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.ps-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 24px 15px 12px; font-size: .82rem; font-weight: 700; color: #fff;
    background: linear-gradient(to top, rgba(9, 58, 31, .9), transparent);
}

/* A slight lean, so a photo reads as a print on a table rather than a box. */
.story-row .ps-tile { transform: rotate(-1deg); }
.story-row.flip .ps-tile { transform: rotate(1deg); }

/* Left to its own devices a half-width 4:3 photo came out 419px tall against
   123px of text, which put the row back to being mostly empty. Wider and
   capped keeps the pair close in height. */
.story-row .ps-tile img { aspect-ratio: 16 / 10; max-height: 290px; }

/* ---- the two or three facts that belong on an about page ---- */
.story-facts {
    list-style: none; margin: 40px 0 0; padding: 24px 0 0;
    border-top: 1px solid var(--border-soft);
    display: grid; gap: 18px; text-align: center;
}
@media (min-width: 620px) { .story-facts { grid-template-columns: repeat(3, 1fr); } }

.story-facts strong {
    display: block; font-family: var(--font-display);
    font-size: 1.7rem; font-weight: 800; color: var(--green);
}
.story-facts span {
    font-size: .78rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-mute);
}

@media (prefers-reduced-motion: reduce) {
    .story-row .ps-tile, .story-row.flip .ps-tile { transform: none; }
    .ps-tile:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Listing close — the reasons, then the action, at the foot of /products.
   ═══════════════════════════════════════════════════════════════════════════ */
.listing-close { position: relative; overflow: hidden; padding: 40px 0 46px; background: var(--cream); }

.lc-trust {
    list-style: none; margin: 0 0 32px; padding: 0;
    display: grid; gap: 16px;
}
@media (min-width: 780px) { .lc-trust { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.lc-trust li {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 5px;
}
.lc-trust strong { font-size: .97rem; font-weight: 800; color: var(--green-dark); }
.lc-trust span   { font-size: .87rem; color: var(--text-soft); line-height: 1.5; }

.lc-cta { text-align: center; }
.lc-cta h2 {
    font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 800; margin: 0 0 6px;
}
.lc-cta p { margin: 0 auto 18px; max-width: 46ch; color: var(--text-soft); }
.lc-cta .cta-btns { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }

/* ---- reassurance beside the checkout button ---- */
.cart-assure {
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 9px;
}
.cart-assure p { margin: 0; font-size: .83rem; line-height: 1.5; color: var(--text-soft); }
.cart-assure strong { display: block; color: var(--green-dark); font-weight: 800; }
.cart-assure .ca-call a { font-weight: 700; color: var(--green); }