/* ============================================================================
   Voriq Agro — storefront
   Regions follow DOM order. New rules go in their region's block, never at the
   bottom of the file. Breakpoints are min-width; the few max-width blocks are
   the cases where a component genuinely becomes a different thing on a phone,
   and each says why.
   ========================================================================= */

/* ---------- aisle colours -------------------------------------------------- */
/* Every aisle owns the colour of what it sells. An element that belongs to an
   aisle takes one of these classes and reads var(--aisle); anything unmapped —
   a category added later in the admin — falls back to steel. */
.aisle--groceries, .aisle--flour-atta { --aisle: var(--aisle-wheat); }
.aisle--pulses            { --aisle: var(--aisle-masoor); }
.aisle--salt-spices       { --aisle: var(--aisle-turmeric); }
.aisle--sugar-sweeteners  { --aisle: var(--aisle-jaggery); }
.aisle--pasta             { --aisle: var(--aisle-semolina); }
.aisle--oil-ghee          { --aisle: var(--aisle-ghee); }
.aisle--dry-fruits        { --aisle: var(--aisle-pistachio); }
.aisle--pooja-lamp        { --aisle: var(--aisle-marigold); }
.aisle--kitchen-storage   { --aisle: var(--aisle-steel); }
.aisle--personal-care     { --aisle: var(--aisle-rose); }

/* The small filled circle that stands for an aisle wherever one is named. */
.katori-dot {
    display: inline-block;
    flex: none;
    width: .8em; height: .8em;
    border-radius: 50%;
    background: var(--aisle);
    box-shadow: inset 0 0 0 1.5px rgba(18, 53, 31, .18);
}

/* ---------- topbar ------------------------------------------------------- */
.topbar { background: var(--surface-ink); color: var(--ink-on-dark-2); font-size: var(--fs-caption); }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 36px; }
.topbar a { color: var(--ink-on-dark); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar__links { display: flex; gap: var(--s-5); }
/* Utility copy, not navigation — it is the first thing to go on a phone. */
@media (max-width: 767px) { .topbar { display: none; } }

/* ---------- masthead ----------------------------------------------------- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
}
.masthead__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-5);
    min-height: 74px;
}
.masthead.is-condensed .masthead__row { min-height: 58px; }
.masthead.is-condensed .wordmark img { height: 36px; }

/* The store's own artwork, relaid horizontally for a slim header: the cart mark
   beside the wordmark. The stacked original is kept at database/data/brand/. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: 46px; width: auto; }
.wordmark__text {
    font: 800 24px/1 var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    letter-spacing: -.02em;
    color: var(--ink-1);
}
@media (max-width: 899px) { .wordmark img { height: 36px; } }
@media (max-width: 400px) { .wordmark img { height: 30px; } }

.search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    justify-self: center;
    width: 100%;
}
.search__icon { position: absolute; left: var(--s-4); color: var(--ink-muted); display: flex; pointer-events: none; }
.search input {
    width: 100%;
    min-height: 46px;
    padding: 0 var(--s-4) 0 44px;
    background: var(--surface-sunken);
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    font-size: 16px;
    color: var(--ink-1);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.search input:focus { background: var(--surface-raised); border-color: var(--olive-600); outline: none; box-shadow: 0 0 0 3px var(--olive-50); }
.search input::-webkit-search-cancel-button { appearance: none; }
.search__panel {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);
    z-index: 80;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--e-2);
    padding: var(--s-2);
    max-height: 60vh;
    overflow-y: auto;
}
.search__panel a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-2);
    border-radius: var(--r-sm);
    color: var(--ink-1);
    text-decoration: none;
    font-size: var(--fs-small);
}
.search__panel a:hover, .search__panel a.is-active { background: var(--surface-sunken); }
.search__panel img { width: 40px; height: 40px; object-fit: contain; background: var(--surface-sunken); border-radius: var(--r-xs); }
.search__panel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.masthead__actions { display: flex; align-items: center; gap: var(--s-2); }
.account-menu { position: relative; }
.account-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-1);
    font: 500 16px/1 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
}
.account-link:hover { background: var(--surface-sunken); }

.basket {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    background: var(--olive-600);
    color: var(--ink-on-dark);
    font: 600 16px/1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
}
.basket:hover { background: var(--olive-700); color: var(--ink-on-dark); }
.basket__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--aisle-ghee);
    color: var(--ink-1);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.masthead__menu { display: none; }

/* ---------- category row -------------------------------------------------- */
/* The categories themselves, always on show under the masthead. Each carries the
   colour of what it sells; the one you are in is filled with it. On a phone the row
   scrolls sideways inside itself — the page never does. */
.catnav { border-top: 1px solid var(--border-subtle); background: var(--surface-raised); }
.catnav__row { display: flex; align-items: center; gap: var(--s-1); min-height: 50px; }
.catnav__item { position: relative; display: inline-flex; align-items: center; flex: none; }
.catnav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 38px;
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    color: var(--ink-1);
    font: 600 15.5px/1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    flex: none;
}
.catnav__link:hover { background: color-mix(in srgb, var(--aisle) 24%, white); color: var(--ink-1); }
.catnav__link.is-active { background: color-mix(in srgb, var(--aisle) 38%, white); }
.catnav__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 38px;
    margin-left: -6px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}
.catnav__more:hover { background: var(--surface-sunken); color: var(--ink-1); }
.catnav__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.catnav__panel { left: 0; right: auto; min-width: 260px; }
.catnav__panel a { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body); padding: var(--s-2) var(--s-3); }
.catnav__count { margin-left: auto; color: var(--ink-muted); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.catnav__spacer { flex: 1; min-width: var(--s-4); }
.masthead.is-condensed .catnav__row { min-height: 44px; }
@media (max-width: 899px) {
    /* A sideways-scrolling row inside a fixed-width page. The sub-category popover cannot
       escape a scroll container, so on phones those live in the menu drawer instead. */
    .catnav__row { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: var(--s-1); }
    .catnav__row::-webkit-scrollbar { display: none; }
    .catnav__more, .catnav__spacer { display: none; }
}

/* ---------- aisle drawer -------------------------------------------------- */
.aisle-drawer {
    display: none;   /* opened by the hamburger, which only exists on phones */
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    box-shadow: var(--e-2);
    max-height: 72vh;
    overflow-y: auto;
}
.aisle-drawer.is-open { display: block; }
.aisle-drawer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-6); }
.aisle-drawer__col h2 { font: 600 var(--fs-eyebrow)/1.2 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); color: var(--ink-muted); margin-bottom: var(--s-3); }
.aisle-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.aisle-drawer__list li { margin: 0; }
.aisle-drawer__list a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font: 700 var(--fs-h3)/1.2 var(--font-display);
    font-variation-settings: 'wdth' 110;
    color: var(--ink-1);
    text-decoration: none;
}
.aisle-drawer__list a:hover { background: color-mix(in srgb, var(--aisle) 22%, white); }

/* Rows without a chevron reserve its width, so every count lines up in one column. */
.aisle-drawer__list > li > a { padding-right: calc(var(--s-3) + 18px + var(--s-3)); }

/* An aisle with sub-aisles: the row is the toggle, the sub-aisles sit indented beneath. */
.aisle-drawer__group summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font: 700 var(--fs-h3)/1.2 var(--font-display);
    font-variation-settings: 'wdth' 110;
    color: var(--ink-1);
    cursor: pointer;
    list-style: none;
}
.aisle-drawer__group summary::-webkit-details-marker { display: none; }
.aisle-drawer__group summary:hover { background: color-mix(in srgb, var(--aisle) 22%, white); }
.aisle-drawer__chev { display: inline-flex; color: var(--ink-muted); transition: transform var(--dur) var(--ease); }
.aisle-drawer__group[open] .aisle-drawer__chev { transform: rotate(180deg); }
.aisle-drawer__sub { list-style: none; margin: var(--s-1) 0 var(--s-2) var(--s-5); padding: 0 0 0 var(--s-3); border-left: 2px solid color-mix(in srgb, var(--aisle) 45%, white); display: grid; gap: 2px; }
.aisle-drawer__sub li { margin: 0; }
.aisle-drawer__list .aisle-drawer__sub a { font: 500 var(--fs-body)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; padding: var(--s-2) var(--s-3); }
.aisle-drawer__count { margin-left: auto; font: 500 var(--fs-caption)/1 var(--font-sans); font-variation-settings: 'wdth' 100; color: var(--ink-muted); flex: none; font-variant-numeric: tabular-nums; }
.aisle-drawer__shortcuts { list-style: none; margin: 0; padding: 0; }
.aisle-drawer__shortcuts li { margin: 0; }
.aisle-drawer__shortcuts a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink-1); text-decoration: none; }
.aisle-drawer__shortcuts a:hover { background: var(--surface-sunken); }
.aisle-drawer__note { background: var(--olive-50); padding: var(--s-5); border-radius: var(--r-md); font-size: var(--fs-small); color: var(--ink-2); }
@media (min-width: 900px) { .aisle-drawer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }

/* ---------- assurance row -------------------------------------------------- */
/* What sits where a floating offers dock would. In flow, so it can never cover
   content at 320px, and it costs no z-index and no JavaScript. Three separate
   facts, laid out as three items — not one string joined with dots. */
.assurance-rule { background: var(--olive-50); }
.assurance-rule ul {
    list-style: none;
    margin: 0;
    padding: var(--s-2) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-1) var(--s-6);
    font-size: var(--fs-small);
    color: var(--olive-800);
}
.assurance-rule li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.assurance-rule li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--olive-400); }
.assurance-rule a { color: inherit; font-weight: 600; }

/* ---------- product card -------------------------------------------------- */
/* The well is tinted with the colour of the product's own aisle, so a shelf is
   colour-coded the way a spice tin is. The source photos are marketplace JPEGs
   on white; multiplied over the tint, the white disappears and the pack stands
   on the colour. */
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pcard__frame {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--aisle) 20%, white);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: background var(--dur) var(--ease);
}
.pcard__shot {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 13%;
    mix-blend-mode: multiply;
    transition: transform var(--dur-slow) var(--ease);
}
@supports not (mix-blend-mode: multiply) { .pcard__shot { mix-blend-mode: normal; } }
/* Stands in for a product with no photograph yet: the same tinted well, carrying the name. */
.pcard__noshot {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 16%;
    text-align: center;
    font: 600 var(--fs-sm)/1.3 var(--font-sans);
    color: color-mix(in srgb, var(--aisle) 70%, var(--ink-1));
}
.pcard__frame::after { content: ''; position: absolute; inset: 0; background: var(--contact-shadow); pointer-events: none; }
.pcard__flag {
    position: absolute;
    top: var(--s-3); left: var(--s-3);
    z-index: 2;
    background: var(--surface-ink);
    color: var(--ink-on-dark);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font: 600 13px/1.3 var(--font-sans);
}
.pcard__body { padding-top: var(--s-3); display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pcard__aisle {
    margin: 0 0 2px;
    font: 600 14px/1.3 var(--font-sans);
    font-variation-settings: 'wdth' var(--wdth-chit);
    color: var(--ink-muted);
}
.pcard__name {
    font: 600 16px/1.3 var(--font-sans);
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    overflow-wrap: anywhere;
}
.pcard__name a { color: var(--ink-1); text-decoration: none; }
.pcard:hover .pcard__name a { text-decoration: underline; text-underline-offset: 3px; }
/* The whole card is the link; the add button lifts above it. */
.pcard__name a::after { content: ''; position: absolute; inset: 0; }
.pcard__variant {
    margin: 0 0 var(--s-2);
    font-size: 14px;
    color: var(--ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
/* A price written the way a shop chit is: condensed, heavy, unmissable. */
.pcard__price {
    font: 800 25px/1 var(--font-sans);
    font-variation-settings: 'wdth' var(--wdth-chit);
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
    margin: 0;
}
.pcard__price .rupee { font-size: .7em; font-weight: 600; margin-right: 1px; }
.pcard__add {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--r-pill);
    background: var(--olive-600);
    color: var(--ink-on-dark);
    font: 600 15px/1 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
/* A round + is the add action; circles are what you press on this site. */
.pcard__add--plus { width: 44px; padding: 0; font-size: 26px; font-weight: 400; line-height: 1; }
.pcard__add:hover { background: var(--olive-700); color: var(--ink-on-dark); }
.pcard__add:active { transform: scale(.94); }
.pcard__add[aria-disabled="true"] { background: var(--surface-sunken-2); color: var(--ink-muted); cursor: not-allowed; }
.pcard:hover .pcard__frame { background: color-mix(in srgb, var(--aisle) 32%, white); }
.pcard:hover .pcard__shot { transform: scale(1.04); }
.pcard:focus-within .pcard__frame { outline: 2px solid var(--olive-600); outline-offset: 3px; }
.pcard--out .pcard__shot { filter: grayscale(.6); opacity: .7; }

/* ---------- product grid --------------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
.pgrid > * { min-width: 0; }
@media (min-width: 480px) { .pgrid { gap: var(--s-6) var(--s-4); } }
@media (min-width: 800px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); } }
/* Beside the shop's filter rail there is a column less room. */
.listing .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .listing .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .listing .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- home: the dabba ------------------------------------------------- */
/* The hero is a masala dabba seen from above: the steel tin of seven bowls in
   every Indian kitchen. Each bowl is an aisle, filled with the colour of what it
   sells, and each is a link. The one orchestrated moment on the site is the lid
   sliding off when the page loads. */
.dabba-hero { background: var(--surface-ink); color: var(--ink-on-dark); padding-block: var(--s-7) var(--s-8); overflow: hidden; }
.dabba-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: center; }
.dabba-hero__place { margin: 0 0 var(--s-4); font: 600 var(--fs-eyebrow)/1.2 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); color: var(--aisle-ghee); }
.dabba-hero h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--ink-on-dark);
    margin-bottom: var(--s-5);
}
.dabba-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-on-dark-2); max-width: 44ch; }
.dabba-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.dabba-hero__actions .btn { background: var(--aisle-ghee); color: var(--ink-1); }
.dabba-hero__actions .btn:hover { background: #FFD454; color: var(--ink-1); }
.dabba-hero__actions .link { color: var(--ink-on-dark); }

.dabba { position: relative; max-width: 480px; width: 100%; margin-inline: auto; }
.dabba svg { width: 100%; height: auto; overflow: visible; }
.dabba__katori { cursor: pointer; }
.dabba__katori .dabba__fill { transition: transform var(--dur) var(--ease); transform-box: fill-box; transform-origin: center; }
.dabba__katori:hover .dabba__fill, .dabba__katori:focus-visible .dabba__fill { transform: scale(1.06); }
.dabba__katori:focus-visible { outline: none; }
.dabba__katori:focus-visible .dabba__rim { stroke: var(--aisle-ghee); stroke-width: 5; }
.dabba__readout {
    margin: var(--s-4) 0 0;
    min-height: 1.4em;
    text-align: center;
    font: 700 var(--fs-h3)/1.2 var(--font-display);
    font-variation-settings: 'wdth' 110;
    color: var(--ink-on-dark);
}
.dabba__readout small { font: 400 var(--fs-small)/1 var(--font-sans); font-variation-settings: 'wdth' 100; color: var(--ink-on-dark-2); margin-left: var(--s-2); }

/* The lid. It covers the tin for a beat, then slides away and is gone. */
.dabba__lid { transform-box: fill-box; transform-origin: center; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .dabba__lid { animation: lid-off 1100ms var(--ease-inout) 350ms both; }
}
@keyframes lid-off {
    0%   { opacity: 1; transform: none; }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-62%, -30%) rotate(-28deg); }
}

/* The legend: every bowl named, always visible, so nothing depends on hover. */
.dabba-legend { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dabba-legend li { margin: 0; }
.dabba-legend a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface-ink-2);
    color: var(--ink-on-dark);
    text-decoration: none;
    font-size: var(--fs-small);
}
.dabba-legend a:hover { background: color-mix(in srgb, var(--aisle) 30%, var(--surface-ink)); }
.dabba-legend small { color: var(--ink-on-dark-2); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
    .dabba-hero { padding-block: var(--s-8) var(--s-8); }
    .dabba-hero__grid { grid-template-columns: 6fr 5fr; gap: var(--s-8); }
}

/* ---------- home: promises --------------------------------------------------- */
/* Four plain statements. They are not a sequence, so they carry no numbers. */
.promise { background: var(--warning-bg); padding-block: var(--s-7); }
.promise h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.promise__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.promise__item h3 { font: 700 var(--fs-h4)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; margin-bottom: var(--s-1); }
.promise__item p { color: var(--ink-2); font-size: var(--fs-small); margin: 0; }
@media (min-width: 600px) { .promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .promise__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }

/* ---------- home: aisle tins -------------------------------------------------- */
/* Every aisle, food or not, as a tin in its own colour with a line-drawn glyph —
   which is also the answer to the source data having no category images. */
.tins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.tin {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 148px;
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--aisle) 30%, white);
    color: var(--ink-1);
    text-decoration: none;
    overflow: hidden;
    transition: background var(--dur) var(--ease);
}
.tin:hover { background: color-mix(in srgb, var(--aisle) 46%, white); color: var(--ink-1); }
.tin__name { font: 800 19px/1.1 var(--font-display); font-variation-settings: 'wdth' 110; margin: 0; overflow-wrap: anywhere; }
.tin__count { margin-top: var(--s-1); font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tin .aisle-row__glyph { position: absolute; top: var(--s-3); right: var(--s-3); width: 56px; height: 56px; color: var(--ink-1); opacity: .55; }
@media (min-width: 700px) { .tins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1100px) { .tins { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- home: sourcing + kitchen notes ---------------------------------- */
.sourcing { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.sourcing__text { max-width: 58ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); }
@media (min-width: 900px) { .sourcing { grid-template-columns: 1.3fr 1fr; gap: var(--s-8); } }

.notes { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.notes__card { background: var(--surface-sunken); padding: var(--s-5); border-radius: var(--r-md); }
.notes__card h3 { font: 700 var(--fs-h4)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; }
.notes__card p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
@media (min-width: 768px) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- home: budget chits + need tiles ---------------------------------- */
/* Built from the range we actually have (₹35–₹1,814), not from sale data we do
   not. Each band is a price chit: the figure is the content. */
.bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.band {
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    text-decoration: none;
    transition: background var(--dur) var(--ease);
}
.band:hover { background: var(--olive-50); }
.band h3 { font: 800 30px/1 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); margin-bottom: var(--s-2); color: var(--ink-1); }
.band p { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }
@media (min-width: 900px) { .bands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } }

.needs { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.need {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3);
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--dur) var(--ease);
}
.need:hover { background: var(--olive-50); }
.need img { width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.need h3 { font: 700 var(--fs-h4)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; margin: 0 0 2px; color: var(--ink-1); }
.need p { margin: 0; font-size: var(--fs-caption); color: var(--ink-muted); }
@media (min-width: 600px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .needs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }

/* ---------- home: brand wall ------------------------------------------------- */
.brandwall { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.brandwall a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 52px;
    padding: 0 var(--s-5);
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border);
    color: var(--ink-1);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.brandwall a:hover { border-color: var(--olive-600); background: var(--olive-50); }
.brandwall img { max-height: 28px; width: auto; object-fit: contain; }
.brandwall__name { font-weight: 600; overflow-wrap: anywhere; }
.brandwall__count { font-size: var(--fs-caption); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- home: promo tiles -------------------------------------------------- */
.promos { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: var(--s-5);
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    overflow: hidden;
    text-decoration: none;
}
.promo img { position: absolute; right: var(--s-4); top: var(--s-4); max-height: 120px; width: auto; mix-blend-mode: multiply; }
.promo__eyebrow { position: relative; font: 600 var(--fs-eyebrow)/1 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); color: var(--ink-muted); margin: 0 0 var(--s-2); }
.promo h2, .promo h3 { position: relative; margin: 0 0 var(--s-3); color: var(--ink-1); }
.promo span { position: relative; font-weight: 600; color: var(--olive-600); }
@media (min-width: 768px) { .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- shop listing ------------------------------------------------------ */
.listing { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-6) var(--s-8); }
/* A grid item defaults to min-width:auto, so the sort control's intrinsic width
   would otherwise stretch the whole column past the viewport at 320px. */
.listing > * { min-width: 0; }
.listing__head { margin-bottom: var(--s-5); }
.listing__head h1 { margin-bottom: var(--s-3); }
.listing__meta { font-size: var(--fs-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.facets { min-width: 0; }
.facets__group { margin-bottom: var(--s-6); }
.facets__group h2 {
    font: 700 11.5px/1.4 var(--font-sans);
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.facets__list { list-style: none; margin: 0; padding: 0; }
.facets__list li { margin: 0; border-top: 1px solid var(--border-subtle); }
.facets__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) 0 var(--s-3) var(--s-3);
    border-left: 2px solid transparent;
    color: var(--ink-1);
    text-decoration: none;
    font-size: var(--fs-small);
}
.facets__list a:hover { color: var(--olive-600); }
.facets__list a[aria-current="true"] { border-left-color: var(--olive-600); font-weight: 600; }
.facets__count { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: none; }
.facets__list a { justify-content: flex-start; }
.facets__list a[aria-current="true"] { background: color-mix(in srgb, var(--aisle) 22%, white); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.facets__check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--fs-small); }
.facets__check .facets__count { margin-left: auto; }
.facets__list .facets__sub { padding-left: var(--s-5); }
.facets__scroll { max-height: 320px; overflow-y: auto; }

.listing__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--border-subtle);
    min-width: 0;
}
/* Four sort options do not fit on a 320px phone; the control scrolls rather
   than widening the page. */
.listing__bar .segmented { max-width: 100%; overflow-x: auto; }
.listing__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.refine-toggle { display: inline-flex; }

@media (min-width: 1024px) {
    .listing { grid-template-columns: 236px minmax(0, 1fr); gap: var(--s-8); }
    .facets { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
    .refine-toggle { display: none; }
    [data-facets-close] { display: none; }
    .facets { scrollbar-width: thin; padding-right: var(--s-3); }
}
@media (max-width: 1023px) {
    /* The rail becomes a drawer: a sticky sidebar cannot work beside a 2-column
       grid at phone width, and 30 focusable filters above the first product is
       a worse default than a button. */
    .facets {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 95;
        width: min(340px, 88vw);
        background: var(--surface-page);
        border-right: 1px solid var(--border);
        box-shadow: var(--e-3);
        padding: var(--s-5);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease);
    }
    .facets.is-open { transform: none; }
}

/* ---------- product detail ----------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-5) var(--s-8); }

.pdp__well {
    position: relative;
    aspect-ratio: 4 / 3;   /* wider than the pack, so it reads as an object with air */
    background: color-mix(in srgb, var(--aisle) 20%, white);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdp__well img { max-width: 62%; max-height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__well::after { content: ''; position: absolute; inset: 0; background: var(--contact-shadow); pointer-events: none; }
/* Stands in for a product with no photograph yet. */
.pdp__noshot {
    max-width: 70%;
    margin: 0;
    text-align: center;
    font: 600 var(--fs-lg)/1.3 var(--font-sans);
    color: color-mix(in srgb, var(--aisle) 70%, var(--ink-1));
}

.pdp__brand {
    font: 600 var(--fs-caption)/1 var(--font-sans);
    color: var(--olive-600);
    margin: var(--s-5) 0 var(--s-3);
}
.pdp__brand a { color: inherit; text-decoration: none; }
.pdp__brand a:hover { text-decoration: underline; }
.pdp__title { font-size: var(--fs-h1); margin-bottom: var(--s-3); overflow-wrap: anywhere; }
/* The full marketplace title, kept honest and searchable without walling the h1. */
.pdp__listed {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin-bottom: var(--s-5);
    overflow-wrap: anywhere;
}
.pdp__listed strong { color: var(--ink-2); font-weight: 600; }

.pdp__highlights { padding-left: 1.1em; margin-bottom: var(--s-5); }
.pdp__highlights li { margin-bottom: var(--s-2); color: var(--ink-2); }

.pdp__allergens {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-small);
}

/* The one sticky element on the page. */
.ticket {
    background: var(--surface-sunken);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}
.ticket__price { font: 800 44px/1 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); font-variant-numeric: tabular-nums; margin: 0 0 var(--s-1); }
.ticket__price .rupee { font-size: .78em; font-weight: 500; }
.ticket__tax { font-size: var(--fs-caption); color: var(--ink-muted); margin-bottom: var(--s-4); }
.ticket__stock { font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--s-4); }
.ticket__stock--out { color: var(--danger); }
.ticket__stock--low { color: var(--warning); }
.ticket__actions { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.ticket__row { display: flex; align-items: center; gap: var(--s-3); }

.options { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.option {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--ink-1);
    text-decoration: none;
    font-size: var(--fs-small);
    line-height: 1.3;
}
.option:hover { border-color: var(--ink-1); }
.option[aria-current="true"] { border-color: var(--olive-600); border-width: 2px; font-weight: 600; }
.option small { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.option--out { color: var(--ink-muted); text-decoration: line-through; }

@media (min-width: 1000px) {
    .pdp { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-8); }
    .ticket { position: sticky; top: 100px; align-self: start; }
}

.about-product { padding-block: var(--s-7); border-top: 1px solid var(--border-subtle); }
.about-product__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.about-product__text p { line-height: 1.65; }
.about-product__text { max-width: var(--measure); }
.about-product__note { font-size: var(--fs-caption); color: var(--ink-muted); }
.policy-note { background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); font-size: var(--fs-small); }
.policy-note p { margin-top: var(--s-3); color: var(--ink-2); }
.policy-note summary { cursor: pointer; font-weight: 600; }
/* One column: the description, then delivery and returns as two tins beneath it. */
.about-product__grid > div:last-child { display: grid; grid-template-columns: 1fr; gap: var(--s-3); max-width: var(--measure); }
@media (min-width: 700px) { .about-product__grid > div:last-child { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Reviews. The rating is five stars you press, not five radio buttons with stars beside them. */
.reviews2 { display: grid; grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-7); border-top: 1px solid var(--border-subtle); }
.reviews2 > * { min-width: 0; }
.reviews2__score { font: 800 56px/1 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); margin: 0 0 var(--s-2); }
.reviews2__score small { font-size: .4em; color: var(--ink-muted); font-weight: 600; }
.reviews2__form { margin-top: var(--s-5); padding: var(--s-6); background: var(--surface-sunken); border-radius: var(--r-lg); }
.reviews2__form h3 { font: 700 var(--fs-h4)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; }
.reviews2__form fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.reviews2__form legend { font: 600 13px/1.4 var(--font-sans); color: var(--ink-2); padding: 0; margin-bottom: var(--s-2); }
/* Rendered 5→1 in the markup so a sibling selector can fill every star up to the chosen one. */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: var(--s-1); }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--border-strong);
    font-size: 24px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { background: var(--aisle-ghee); color: var(--ink-1); }
.star-input input:focus-visible + label { outline: 2px solid var(--olive-600); outline-offset: 3px; }
.review { padding: var(--s-5) 0; border-top: 1px solid var(--border-subtle); }
.review h3 { font: 700 var(--fs-h4)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; margin: var(--s-2) 0 var(--s-1); }
@media (min-width: 1000px) { .reviews2 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); } }

/* ---------- cart: a ledger ------------------------------------------------------ */
.cart { display: grid; grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-6) var(--s-8); }
.cart__line {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: 'shot body' 'qty total';
    align-items: start;
    gap: var(--s-3) var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.cart__shot { grid-area: shot; }
.cart__shot { display: block; background: color-mix(in srgb, var(--aisle) 20%, white); border-radius: var(--r-md); }
.cart__shot img { width: 80px; height: 80px; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.cart__body { grid-area: body; min-width: 0; }
.cart__name { color: var(--ink-1); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.cart__name:hover { text-decoration: underline; }
.cart__qty { grid-area: qty; }
.cart__total { grid-area: total; text-align: right; font: 800 22px/1 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); font-variant-numeric: tabular-nums; margin: 0; }
@media (min-width: 720px) {
    .cart__line {
        grid-template-columns: 96px minmax(0, 1fr) 120px 110px;
        grid-template-areas: 'shot body qty total';
        align-items: center;
    }
    .cart__shot img { width: 96px; height: 96px; }
}
@media (min-width: 1000px) { .cart { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-8); } }

.summary { background: var(--surface-sunken); padding: var(--s-5); border-radius: var(--r-lg); }
.summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-small);
}
.summary__row:first-of-type { border-top: 0; }
.summary__row--total { border-top: 1px solid var(--border-strong); font-size: var(--fs-h4); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The free-delivery nudge is a sentence with a thin rule that fills, not a pill. */
.threshold { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s-4); }
.threshold__track { height: 2px; background: var(--border); margin-top: var(--s-2); }
.threshold__fill { height: 2px; background: var(--olive-600); }

/* ---------- checkout ------------------------------------------------------------- */
/* A real sequence, so it is numbered: contact, address, payment, confirm. The form runs
   down the left; the order summary stays in view on the right. */
.steps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; font-size: var(--fs-small); }
.steps span, .steps li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 34px;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--ink-muted);
    list-style: none;
}
.steps .done { background: var(--olive-50); color: var(--olive-700); }
.steps .done::before { content: '✓'; font-weight: 700; }
.steps .current { background: var(--olive-600); color: var(--ink-on-dark); font-weight: 600; }

.checkout-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
.checkout-grid > * { min-width: 0; }
.checkout-main { display: grid; gap: var(--s-4); }
.checkout-main .panel { margin: 0; padding: var(--s-6); border: 0; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.checkout-main .panel h2 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h3); margin-bottom: var(--s-4); }
/* The step number is a katori: a filled circle, like everything else you work through here. */
.panel h2 .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--aisle-ghee);
    color: var(--ink-1);
    font: 800 17px/1 var(--font-sans);
    font-variation-settings: 'wdth' 100;
}
@media (min-width: 1000px) {
    .checkout-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-7); }
    .checkout-grid > .summary { position: sticky; top: 150px; }
}
.mini-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border-subtle); font-size: var(--fs-small); }
.mini-line img { width: 52px; height: 52px; object-fit: contain; background: var(--surface-raised); border-radius: var(--r-sm); mix-blend-mode: multiply; }
.mini-line > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary h2 { margin-bottom: var(--s-4); }

/* Order totals, wherever an order is shown: label left, figure right, total in chit type. */
.totals { margin: var(--s-4) 0 0; font-size: var(--fs-small); }
.totals > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.totals__discount dd { color: var(--success); }
.totals > .totals__grand { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border-strong); }
.totals__grand dt { color: var(--ink-1); font-weight: 700; font-size: var(--fs-body); }
.totals__grand dd { font: 800 24px/1 var(--font-sans); font-variation-settings: 'wdth' var(--wdth-chit); }

/* Order confirmed. */
.tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    margin-bottom: var(--s-4);
    border-radius: 50%;
    background: var(--aisle-pistachio);
    color: var(--ink-1);
    font-size: 40px;
    font-weight: 700;
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--aisle-pistachio) 28%, white);
}
.panel.center { border: 0; background: var(--olive-50); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5); }
.panel.center .lead { max-width: 52ch; margin-inline: auto; }

/* ---------- account ---------------------------------------------------------------- */
.account { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.account > * { min-width: 0; }
.account__nav { background: var(--surface-sunken); border-radius: var(--r-lg); padding: var(--s-5); align-self: start; }
.account__nav .muted { margin: 0; }
.account__name { font: 800 var(--fs-h3)/1.15 var(--font-display); font-variation-settings: 'wdth' 110; margin: 0 0 var(--s-4); overflow-wrap: anywhere; }
.account__nav nav { display: flex; gap: var(--s-1); margin-bottom: var(--s-4); }
.account__nav nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    color: var(--ink-1);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.account__nav nav a:hover { background: var(--surface-sunken-2); }
.account__nav nav a.active { background: var(--olive-600); color: var(--ink-on-dark); font-weight: 600; }
.account__main > h1 { margin-bottom: var(--s-5); }
.account__main .panel { border-radius: var(--r-lg); border-color: var(--border-subtle); }
.account__main .panel h2 { font-size: var(--fs-h3); }
@media (max-width: 899px) {
    /* The section links wrap onto as many lines as they need; nothing is hidden off to the side. */
    .account__nav nav { flex-wrap: wrap; }
}
@media (min-width: 900px) {
    .account { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); }
    .account__nav { position: sticky; top: 150px; }
    .account__nav nav { flex-direction: column; }
}

/* ---------- footer ------------------------------------------------------------------ */
.footer {
    --border: var(--border-on-dark);
    --border-subtle: var(--border-on-dark);
    background: var(--surface-ink);
    color: var(--ink-on-dark-2);
    padding-block: var(--s-8) var(--s-5);
    margin-top: var(--s-8);
}
.footer a { color: var(--ink-on-dark-2); text-decoration: none; }
.footer a:hover { color: var(--ink-on-dark); text-decoration: underline; }
.footer h3 { font: 700 var(--fs-h4)/1.3 var(--font-sans); font-variation-settings: 'wdth' 100; color: var(--ink-on-dark); margin-bottom: var(--s-3); }
.footer__top { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.footer__about { max-width: 40ch; font-size: var(--fs-small); }
.footer__about-name { font: 800 var(--fs-h3)/1.1 var(--font-display); font-variation-settings: 'wdth' var(--wdth-display); color: var(--ink-on-dark); margin: 0 0 var(--s-3); }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.footer__col a { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; font-size: var(--fs-small); overflow-wrap: anywhere; }
.footer__news { margin-top: var(--s-5); }
.footer__news .field { margin-bottom: var(--s-3); }
/* The field component reads tokens, so the dark band restyles it by overriding them. */
.footer__news { --surface-raised: var(--surface-ink-2); --ink-1: var(--ink-on-dark); --ink-muted: var(--ink-on-dark-2); --olive-600: var(--aisle-ghee); --olive-50: transparent; }
.footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border-on-dark);
    font-size: var(--fs-caption);
}
.footer__pay { display: flex; align-items: center; gap: var(--s-2); }
.footer__pay img { height: 24px; width: auto; background: #fff; padding: 3px 6px; border-radius: var(--r-xs); }
.footer__social { display: flex; gap: var(--s-4); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); } }

/* ---------- mobile masthead + minibar ------------------------------------------------ */
@media (max-width: 899px) {
    /* Below 900px the taxonomy door becomes a drawer and search gets its own
       permanently visible row — a toggle costs a tap on the most-used control. */
    .masthead__row { grid-template-columns: auto 1fr auto; row-gap: 0; gap: var(--s-3); }
    .masthead__menu { display: inline-flex; }
    .search { grid-column: 1 / -1; max-width: none; justify-self: stretch; padding-bottom: var(--s-3); }
    .account-link span { display: none; }
    /* The wordmark takes the middle column, so the actions sit at the end of the row
       rather than drifting to the left edge on their own line. */
    .masthead__actions { grid-column: 3; justify-self: end; }
    .wordmark { justify-self: center; }

    .aisle-drawer {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 96;
        width: min(340px, 88vw);
        max-height: none;
        border-top: 0;
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease);
        display: block;
    }
    .aisle-drawer.is-open { transform: none; }
    .aisle-drawer__grid { padding-inline: var(--s-5); }
}
@media (max-width: 760px) {
    /* A sticky masthead eats a third of a small phone's viewport. */
    .masthead { position: static; }
}

.scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(35, 39, 31, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.scrim.is-on { opacity: 1; visibility: visible; }

/* A slim bar at the bottom rather than a floating dock, and never on the
   checkout routes where it would sit over the pay button. */
.minibar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 85;
    display: none;
    background: var(--surface-page);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.minibar__row { display: flex; align-items: stretch; }
.minibar a, .minibar button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 52px;
    border: 0;
    border-left: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--ink-1);
    font: 600 14px/1 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
}
.minibar > .minibar__row > :first-child { border-left: 0; }
@media (max-width: 760px) { .minibar.is-on { display: block; } }

/* ---------- page shells --------------------------------------------------- */
/* Generic page wrappers used by the CMS, contact, auth and account templates. */
.page { padding-block: var(--s-6) var(--s-8); }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }
.right { text-align: right; }

.page-hero { padding-block: var(--s-7) var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.page-hero__inner { max-width: var(--measure); }
.page-hero__meta { font-size: var(--fs-small); color: var(--ink-muted); }

/* ---------- CMS pages ------------------------------------------------------ */
.doc { display: grid; grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-6) var(--s-8); }
.doc__body { max-width: var(--measure); }
.doc__body h2 { margin-top: var(--s-7); font-size: var(--fs-h3); }
.doc__body h3 { margin-top: var(--s-5); }
.doc__body ul, .doc__body ol { margin-bottom: var(--s-5); }
.doc__body li { margin-bottom: var(--s-2); }
.doc__side { font-size: var(--fs-small); }
.doc__side-title, .doc__help-title {
    font: 700 var(--fs-eyebrow)/1.4 var(--font-sans);
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.doc__toc, .doc__others { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.doc__toc li, .doc__others li { margin: 0; border-top: 1px solid var(--border-subtle); }
.doc__toc a, .doc__others a { display: block; padding: var(--s-2) 0; color: var(--ink-1); text-decoration: none; }
.doc__toc a:hover, .doc__others a:hover { color: var(--olive-600); }
.doc__help { background: var(--surface-sunken); padding: var(--s-5); border-radius: var(--r-sm); }
.doc__help-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
/* The contents list comes first in the markup, so it takes the narrow column and the
   body takes the wide one. Without a contents list the body simply spans the grid. */
@media (min-width: 900px) {
    .doc--toc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); }
    .doc__side { position: sticky; top: 100px; align-self: start; }
}

/* ---------- contact -------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.contact > * { min-width: 0; }
.contact .panel { margin: 0; padding: var(--s-6); border: 0; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
/* Label and value side by side in one tin. A <dl> is pairs, so the grid is two columns. */
.contact__info {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: var(--s-4) var(--s-4);
    margin: var(--s-6) 0 0;
    padding: var(--s-5);
    background: var(--surface-sunken);
    border-radius: var(--r-lg);
}
.contact__info dt { color: var(--ink-muted); font-size: var(--fs-small); margin: 0; padding-top: 2px; }
.contact__info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.contact__info dd address { font-weight: 400; }
.contact__info a { color: var(--ink-1); }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; } }

/* ---------- auth ----------------------------------------------------------- */
/* The form sits beside a small dabba drawn in CSS gradients — seven bowls on a steel
   disc — so logging in still looks like this shop and not like any login page. */
.auth { max-width: 1000px; margin-inline: auto; padding-block: var(--s-6) var(--s-8); display: grid; grid-template-columns: 1fr; gap: 0; }
.auth .panel { margin: 0; padding: var(--s-6); border: 0; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.auth .panel h1 { font-size: var(--fs-h2); }
.auth .panel form + p { margin-top: var(--s-5); }
.auth::before {
    content: '';
    display: none;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    background:
        radial-gradient(circle at 50% 50%, var(--aisle-wheat) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at 50% calc(50% - 88px), var(--aisle-pistachio) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at calc(50% + 76px) calc(50% - 44px), var(--aisle-turmeric) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at calc(50% + 76px) calc(50% + 44px), var(--aisle-ghee) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at 50% calc(50% + 88px), var(--aisle-jaggery) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at calc(50% - 76px) calc(50% + 44px), var(--aisle-semolina) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at calc(50% - 76px) calc(50% - 44px), var(--aisle-masoor) 0 37px, #7F8A87 37px 40px, transparent 41px),
        radial-gradient(circle at 50% 50%, #B5BDBA 0 138px, #E9EDEB 138px 146px, transparent 147px),
        var(--surface-ink);
}
@media (min-width: 900px) {
    .auth { grid-template-columns: 5fr 6fr; }
    .auth::before { display: block; min-height: 520px; }
    .auth .panel { border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: var(--s-7); display: flex; flex-direction: column; justify-content: center; }
}
.otp-input { letter-spacing: .5em; font-size: 26px; font-variant-numeric: tabular-nums; text-align: center; }
.input-wrap { position: relative; }
.reveal { position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); border: 0; background: var(--surface-sunken); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-caption); cursor: pointer; }
.strength { margin-top: var(--s-2); }
.hp { position: absolute; left: -9999px; }   /* honeypot */
.req { color: var(--terracotta-600); }

/* ---------- offers --------------------------------------------------------- */
.coupons { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.coupon-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-5);
    background: var(--surface-sunken);
    border-radius: var(--r-sm);
}
.coupon-card__value {
    font: 600 var(--fs-h3)/1 var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    color: var(--olive-600);
    text-align: center;
}
.coupon-card__body { min-width: 0; }
.coupon-card__body h2, .coupon-card__body h3 { font-size: var(--fs-h4); font-family: var(--font-sans); margin-bottom: var(--s-2); }
.coupon-card__rules { list-style: none; margin: 0 0 var(--s-4); padding: 0; font-size: var(--fs-small); color: var(--ink-2); }
.coupon-card__rules li { padding-left: var(--s-4); position: relative; }
.coupon-card__rules li::before { content: '·'; position: absolute; left: var(--s-2); color: var(--border-strong); }
.coupon-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.coupon-card__code {
    font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    padding: var(--s-2) var(--s-3);
    background: var(--surface-raised);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
}
@media (min-width: 768px) { .coupons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The coupon form inside the basket summary. */
.coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; margin-bottom: var(--s-4); }
.coupon .field { margin-bottom: 0; }
.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3);
    margin-bottom: var(--s-4);
    background: var(--success-bg);
    border-left: 4px solid var(--success);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-small);
}

/* ---------- account -------------------------------------------------------- */
.account__main { min-width: 0; }
.account__name { font-weight: 600; }
.order-card {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.order-card .thumbs img, .thumbs img { width: 60px; height: 60px; object-fit: contain; background: var(--surface-sunken); border-radius: var(--r-sm); mix-blend-mode: multiply; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.order-card .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.address-cards, .address-picks { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.address-card, .address {
    padding: var(--s-5);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    font-size: var(--fs-small);
}
.address-card.current, .address-picks label.current { border-color: var(--olive-600); border-width: 2px; }
.address-card .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 700px) { .address-cards, .address-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Order timeline. A real sequence, so it is drawn as one: a row of bowls joined by a
   line, filled as the order moves along. State is carried by fill, weight and a tick. */
.timeline { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; font-size: var(--fs-small); }
.timeline li { position: relative; flex: 1; margin: 0; padding-top: 34px; text-align: center; color: var(--ink-muted); }
.timeline li::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 22px; height: 22px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--surface-page);
    box-shadow: inset 0 0 0 2px var(--border-strong);
    z-index: 1;
}
.timeline li::after { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.timeline li:first-child::after { display: none; }
.timeline .done, .timeline .current { color: var(--ink-1); }
.timeline .done::before, .timeline .current::before { background: var(--olive-600); box-shadow: none; }
.timeline .done::after, .timeline .current::after { background: var(--olive-600); }
.timeline .current { font-weight: 700; }
.timeline .current::before { box-shadow: 0 0 0 5px var(--olive-100); }
.tick { color: var(--success); }

/* Order / payment status chips. */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--surface-sunken-2);
    color: var(--ink-2);
    font: 600 13.5px/1.4 var(--font-sans);
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--pending { background: var(--warning-bg); color: var(--warning); }
.status--confirmed, .status--shipped { background: var(--info-bg); color: var(--info); }
.status--delivered, .status--paid { background: var(--success-bg); color: var(--success); }
.status--cancelled, .status--failed, .status--returned { background: var(--danger-bg); color: var(--danger); }

.pick { display: grid; gap: var(--s-3); }
.pick__item { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); }
.pick__item img { width: 44px; height: 44px; object-fit: contain; background: var(--surface-sunken); border-radius: var(--r-sm); }
.upload-preview img { max-height: 120px; width: auto; border-radius: var(--r-sm); margin-top: var(--s-3); }

/* ---------- checkout ------------------------------------------------------- */
.pay-options { display: grid; gap: var(--s-3); }
.pay-pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-4) var(--s-5);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    cursor: pointer;
}
.pay-pick:hover { border-color: var(--border-strong); }
.pay-pick:has(input:checked) { border-color: var(--olive-600); border-width: 2px; background: var(--olive-50); }
.pay-pick__body { min-width: 0; font-size: var(--fs-small); }
.pay-marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.pay-marks img { height: 20px; width: auto; background: var(--surface-raised); padding: 2px 4px; border-radius: var(--r-xs); }

/* ---------- UPI payment ticket ---------------------------------------------- */
.upi2 { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-6) var(--s-8); }
.upi2__ticket, .upi2__card {
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: var(--s-5);
}
.upi2__h { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.upi2__amount { font: 700 34px/1 var(--font-sans); font-variant-numeric: tabular-nums; margin: 0; }
.upi2__order, .upi2__payee, .upi2__due-label, .upi2__safe { font-size: var(--fs-small); color: var(--ink-2); }
.upi2__due { font-variant-numeric: tabular-nums; font-weight: 700; }
.upi2__ended { color: var(--danger); font-weight: 600; }
.upi2__clock { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.upi2__ring { transform: rotate(-90deg); }
.upi2__ring-bg { stroke: var(--border); }
.upi2__qrframe {
    background: var(--surface-raised);
    padding: var(--s-4);
    border-radius: var(--r-sm);
    display: inline-flex;
    box-shadow: var(--e-1);
}
.upi2__qrframe img, .qr img { width: 100%; max-width: 220px; height: auto; }
.upi2__scan { font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--s-3); }
.upi2__apps, .upi-strip { margin-top: var(--s-5); }
.upi2__applist, .upi-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.upi2__app, .upi-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink-1);
    font-size: var(--fs-caption);
    text-align: center;
}
.upi2__app:hover, .upi-app:hover { border-color: var(--olive-600); }
.upi2__app img, .upi-app img { width: 34px; height: 34px; object-fit: contain; }
.upi2__app-name { font-weight: 600; }
.upi2__app-go { color: var(--ink-muted); }
.upi2__steps, .upi2__how { font-size: var(--fs-small); color: var(--ink-2); }
.upi2__status, .upi-status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); margin-top: var(--s-4); }
.upi2__status::before, .upi-status__dot { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; }
.upi2__upi-mark img, .upi-payee img { height: 22px; width: auto; }
.upi-apps__hint, .upi2__safe { font-size: var(--fs-caption); color: var(--ink-muted); }
@media (min-width: 900px) { .upi2, .upi2__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-7); } }
@media (min-width: 600px) { .upi2__applist, .upi-apps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- odds and ends --------------------------------------------------- */
.size-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.grid { display: grid; gap: var(--s-4); }
.num { font-variant-numeric: tabular-nums; }
.l { text-align: left; }