:root {
  --green-900: oklch(38% 0.105 45);
  --green-800: oklch(47% 0.135 48);
  --green-100: oklch(95% 0.035 65);
  --mustard-500: oklch(81% 0.145 82);
  --mustard-100: oklch(97% 0.035 75);
  --red-600: oklch(51% 0.18 30);
  --ink: oklch(26% 0.025 48);
  --text: oklch(38% 0.022 52);
  --muted: oklch(52% 0.018 55);
  --line: oklch(88% 0.014 65);
  --surface: oklch(98% 0.009 72);
  --surface-alt: oklch(96% 0.018 70);
  --page: oklch(99% 0.006 72);
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif;
  --display: "Anek Devanagari", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: var(--body); font-size: 17px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--mustard-500); outline-offset: 3px; }
.page-width { width: min(1400px, calc(100% - clamp(32px, 7vw, 96px))); margin-inline: auto; }
.visually-hidden { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { padding: var(--space-sm) var(--space-md); position: fixed; left: var(--space-md); top: var(--space-md); z-index: 100; color: var(--surface); background: var(--green-900); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.utility-bar { color: var(--green-100); background: var(--green-900); font-size: .82rem; }
.utility-bar__inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.utility-bar p { margin: 0; }
.utility-bar p:last-child { display: flex; gap: var(--space-sm); }
.utility-bar a { text-decoration: underline; text-underline-offset: 3px; }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--page), transparent 2%); }
.header-main { min-height: 92px; display: grid; grid-template-columns: auto minmax(280px, 1fr) auto auto; align-items: center; gap: clamp(var(--space-md), 2.5vw, var(--space-xl)); }
.brand { display: flex; align-items: center; gap: var(--space-sm); }
.brand__basket { width: 46px; height: 46px; display: grid; place-items: center; background: var(--mustard-500); border: 1px solid color-mix(in oklch, var(--ink), transparent 30%); border-radius: var(--radius-sm); }
.brand__basket svg { width: 34px; fill: none; stroke: var(--green-900); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand__name { display: flex; flex-direction: column; font-family: var(--display); font-size: 1.25rem; font-weight: 700; line-height: .95; letter-spacing: .025em; white-space: nowrap; }
.brand__name small { margin-top: var(--space-xs); font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.main-search { min-height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; border: 1px solid color-mix(in oklch, var(--green-800), transparent 28%); border-radius: var(--radius-md); background: var(--surface); }
.main-search svg { width: 21px; margin-inline: var(--space-md); fill: none; stroke: var(--green-800); stroke-width: 2; }
.main-search input { min-width: 0; height: 48px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1.05rem; }
.main-search input::placeholder { color: var(--muted); }
.main-search button { align-self: stretch; min-width: 96px; border: 0; color: var(--surface); background: var(--green-800); font-weight: 700; cursor: pointer; }
.header-location, .cart-button { min-height: 48px; padding: var(--space-xs) var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--page); color: var(--ink); cursor: pointer; }
.header-location svg, .cart-button svg { width: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.header-location small, .header-location strong { display: block; text-align: left; }
.header-location small { color: var(--muted); font-size: .72rem; }
.header-location strong { font-size: .9rem; }
.cart-button { border-color: var(--green-800); color: var(--surface); background: var(--green-800); font-weight: 700; }
.cart-button strong { min-width: 24px; padding-inline: 5px; color: var(--ink); background: var(--mustard-500); border-radius: var(--radius-xs); text-align: center; }
.menu-button { min-height: 48px; padding: var(--space-xs) var(--space-sm); display: none; align-items: center; gap: var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--page); font-weight: 700; cursor: pointer; }
.menu-button__icon { width: 22px; display: grid; gap: 4px; }
.menu-button__icon i { width: 22px; height: 2px; display: block; background: currentColor; transform-origin: center; transition: transform 180ms cubic-bezier(.22,1,.36,1), opacity 120ms; }
.menu-button.open .menu-button__icon i:first-child { transform: translateY(6px) rotate(45deg); }
.menu-button.open .menu-button__icon i:nth-child(2) { opacity: 0; }
.menu-button.open .menu-button__icon i:last-child { transform: translateY(-6px) rotate(-45deg); }
.location-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; border-top: 1px solid transparent; background: var(--mustard-100); transition: grid-template-rows 220ms cubic-bezier(.22,1,.36,1), border-color 220ms; }
.location-panel.open { grid-template-rows: 1fr; border-color: var(--line); }
.location-panel__inner { min-height: 0; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-lg); overflow: hidden; }
.location-panel.open .location-panel__inner { padding-block: var(--space-md); }
.location-panel__inner > div { display: flex; flex-direction: column; }
.location-panel__inner > div span { color: var(--text); font-size: .9rem; }
.location-panel form { display: flex; }
.location-panel input { width: 190px; min-height: 46px; padding-inline: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--page); }
.location-panel form button { min-width: 82px; border: 1px solid var(--green-900); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--surface); background: var(--green-900); cursor: pointer; }
.location-close { min-height: 44px; padding-inline: var(--space-xs); border: 0; color: var(--green-900); background: transparent; text-decoration: underline; cursor: pointer; }
.department-nav { min-height: 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(var(--space-md), 2.5vw, var(--space-xl)); border-top: 1px solid var(--line); font-size: .92rem; font-weight: 600; }
.department-nav a { min-height: 45px; display: flex; align-items: center; }
.department-nav a:hover { color: var(--green-800); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.mobile-nav-panel { display: block; }

.welcome { padding-block: clamp(var(--space-2xl), 7vw, var(--space-4xl)); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .7fr); gap: clamp(var(--space-2xl), 8vw, 120px); align-items: start; }
.section-label { margin: 0; color: var(--green-800); font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
.welcome h1 { max-width: 14ch; margin-top: var(--space-sm); font-size: clamp(3.1rem, 6vw, 5.8rem); line-height: .91; }
.welcome__intro { max-width: 58ch; margin: var(--space-lg) 0 0; color: var(--text); font-size: 1.15rem; line-height: 1.6; }
.welcome__actions { margin-top: var(--space-xl); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }
.primary-action, .plain-action { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.primary-action { padding-inline: var(--space-lg); color: var(--surface); background: var(--green-800); border: 1px solid var(--green-800); border-radius: var(--radius-sm); }
.primary-action:hover { background: var(--green-900); }
.plain-action { color: var(--green-800); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.order-facts { padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-alt); }
.order-facts h2 { font-size: 1.6rem; line-height: 1.1; }
.order-facts dl { margin: var(--space-lg) 0; }
.order-facts dl div { padding-block: var(--space-sm); display: grid; grid-template-columns: 118px 1fr; gap: var(--space-md); border-top: 1px solid var(--line); }
.order-facts dl div:last-child { border-bottom: 1px solid var(--line); }
.order-facts dt { color: var(--muted); }
.order-facts dd { margin: 0; font-weight: 600; }
.order-facts dd a { min-height: 44px; display: inline-flex; align-items: center; color: var(--green-800); text-decoration: underline; }
.order-facts button { width: 100%; min-height: 50px; border: 1px solid var(--green-800); border-radius: var(--radius-sm); color: var(--green-800); background: transparent; font-weight: 700; cursor: pointer; }
.order-facts button:hover { color: var(--surface); background: var(--green-800); }

.quick-order { padding: var(--space-xl); display: grid; grid-template-columns: .65fr 1.35fr; gap: var(--space-2xl); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.quick-order h2 { margin-top: var(--space-2xs); font-size: clamp(2rem, 3vw, 3rem); line-height: 1; }
.quick-order__choices { display: grid; grid-template-columns: 1fr 1fr; }
.quick-order__choices { overflow: hidden; border-radius: var(--radius-md); }
.quick-order__choices a { min-height: 92px; padding: var(--space-md) var(--space-lg); display: grid; grid-template-columns: 1fr auto; align-content: center; border: 1px solid var(--line); background: var(--page); }
.quick-order__choices a + a { border-left: 0; }
.quick-order__choices strong, .quick-order__choices span { display: block; }
.quick-order__choices strong { font-size: 1.08rem; }
.quick-order__choices span { margin-top: var(--space-2xs); color: var(--muted); font-size: .88rem; }
.quick-order__choices b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--green-800); font-size: 1.5rem; }
.quick-order__choices a:hover { background: var(--green-100); }

.catalogue { padding-block: var(--space-4xl); }
.catalogue-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-2xl); }
.catalogue-heading h2, .essentials h2, .order-help h2 { margin-top: var(--space-xs); font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1; }
.catalogue-heading > p { max-width: 45ch; margin: 0; color: var(--text); }
.catalogue-tools { margin-top: var(--space-xl); padding-block: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); border-block: 1px solid var(--line); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.filter-button { min-height: 42px; padding-inline: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); background: var(--page); font-weight: 600; cursor: pointer; }
.filter-button:hover, .filter-button.active { border-color: var(--green-800); color: var(--surface); background: var(--green-800); }
#categoryCount { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.category-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-sm); }
.category-item { min-width: 0; padding: var(--space-lg); display: grid; grid-template-rows: 155px auto; gap: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); container-type: inline-size; }
.category-item:hover { background: var(--surface-alt); }
.category-item.hidden { display: none; }
.category-item img { width: 100%; height: 155px; object-fit: contain; mix-blend-mode: multiply; }
.category-item > span { display: flex; flex-direction: column; }
.category-item strong { font-family: var(--display); font-size: 1.28rem; line-height: 1.1; }
.category-item small { margin-top: var(--space-2xs); color: var(--green-800); font-family: var(--display); font-size: .9rem; font-weight: 600; }
.category-item em { margin-top: var(--space-xs); color: var(--muted); font-size: .88rem; font-style: normal; line-height: 1.35; }
@container (max-width: 280px) { .category-item { padding: var(--space-md); grid-template-rows: 130px auto; } .category-item img { height: 130px; } }
.empty-state { padding: var(--space-2xl); display: grid; justify-items: start; gap: var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--mustard-100); }
.empty-state[hidden] { display: none; }
.empty-state strong { font-size: 1.25rem; }.empty-state span{color:var(--text)}.empty-state a{margin-top:var(--space-xs);color:var(--green-800);font-weight:700;text-decoration:underline}

.essentials { margin-inline: clamp(var(--space-md), 2.5vw, var(--space-xl)); padding-block: var(--space-3xl); color: var(--surface); border-radius: var(--radius-lg); background: var(--green-900); }
.essentials__layout { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(540px, 1.35fr); gap: clamp(var(--space-2xl), 7vw, var(--space-4xl)); align-items: start; }
.essentials .section-label { color: var(--mustard-500); }
.essentials__intro > p:not(.section-label) { max-width: 43ch; color: var(--green-100); }
.essentials__intro a { min-height: 44px; margin-top: var(--space-md); display: inline-flex; align-items: center; color: var(--mustard-500); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.ration-table { border-top: 1px solid color-mix(in oklch, var(--green-100), transparent 65%); }
.ration-table > div { min-height: 64px; display: grid; grid-template-columns: minmax(190px, 1.5fr) .7fr .5fr 80px; align-items: center; gap: var(--space-md); border-bottom: 1px solid color-mix(in oklch, var(--green-100), transparent 65%); }
.ration-table__head { min-height: 42px !important; color: var(--green-100); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.ration-table [role="cell"]:first-child { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.ration-table img { width: 48px; height: 42px; object-fit: contain; mix-blend-mode: screen; background: var(--surface); }
.ration-table strong { color: var(--mustard-500); font-size: 1.08rem; }
.ration-table button { min-height: 40px; border: 1px solid var(--mustard-500); border-radius: var(--radius-xs); color: var(--mustard-500); background: transparent; font-weight: 700; cursor: pointer; }
.ration-table button:hover, .ration-table button.added { color: var(--green-900); background: var(--mustard-500); }

.popular { padding-block: var(--space-4xl); }
.product-list { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.product-item { min-width: 0; padding: var(--space-md); position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }
.product-item > img { width: 100%; height: 170px; object-fit: contain; mix-blend-mode: multiply; }
.offer-label { padding: var(--space-2xs) var(--space-xs); position: absolute; top: var(--space-sm); left: var(--space-sm); color: var(--surface); border-radius: var(--radius-xs); background: var(--red-600); font-size: .72rem; font-weight: 700; }
.product-item > p { margin: var(--space-md) 0 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.product-item h3 { min-height: 48px; margin: var(--space-2xs) 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.05; }
.pack-size { color: var(--muted); font-size: .9rem; }
.price { margin-block: var(--space-md); display: flex; align-items: baseline; gap: var(--space-xs); }
.price strong { font-size: 1.3rem; }.price del{color:var(--muted);font-size:.9rem}
.product-item button { min-height: 46px; margin-top: auto; border: 1px solid var(--green-800); border-radius: var(--radius-sm); color: var(--green-800); background: transparent; font-weight: 700; cursor: pointer; }
.product-item button:hover, .product-item button.added { color: var(--surface); background: var(--green-800); }

.order-help { margin: 0 clamp(var(--space-md), 2.5vw, var(--space-xl)) var(--space-xl); padding-block: var(--space-3xl); background: var(--mustard-100); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.order-help__layout { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: clamp(var(--space-xl), 6vw, var(--space-4xl)); align-items: center; }
.order-help h2 { max-width: 13ch; }
.order-help__layout > div > p:last-child { max-width: 55ch; color: var(--text); }
.order-help ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.order-help li { padding-block: var(--space-sm); display: grid; grid-template-columns: 32px 1fr; gap: var(--space-sm); counter-increment: steps; border-bottom: 1px solid var(--line); }
.order-help li::before { content: counter(steps); width: 28px; height: 28px; display: grid; place-items: center; color: var(--surface); border-radius: var(--radius-xs); background: var(--green-800); font-size: .82rem; font-weight: 700; }
.order-help li strong, .order-help li span { grid-column: 2; }.order-help li span{color:var(--muted);font-size:.88rem}
.order-help__layout > a { min-height: 52px; padding-inline: var(--space-lg); display: inline-flex; align-items: center; color: var(--surface); border-radius: var(--radius-sm); background: var(--green-800); font-weight: 700; white-space: nowrap; }

footer { padding-block: var(--space-3xl) var(--space-lg); color: var(--green-100); background: var(--ink); }
.footer-layout { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-2xl); }
.footer-layout > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.footer-layout > div > strong { margin-bottom: var(--space-xs); color: var(--mustard-500); }
.footer-layout a { color: var(--green-100); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }.footer-layout a:hover{text-decoration-color:currentColor}
.footer-layout p { margin: 0; color: color-mix(in oklch, var(--green-100), transparent 20%); }
.footer-store > strong { margin: 0 !important; font-family: var(--display); font-size: 1.45rem; letter-spacing: .04em; }
.footer-store > span { color: var(--mustard-500); font-family: var(--display); font-weight: 600; }
.footer-store p:first-of-type { margin-top: var(--space-sm); }
.footer-bottom { grid-column: 1 / -1; margin-top: var(--space-lg) !important; padding-top: var(--space-lg); display: flex; justify-content: space-between; border-top: 1px solid color-mix(in oklch, var(--green-100), transparent 75%); font-size: .82rem; }
.toast { min-width: 240px; padding: var(--space-sm) var(--space-md); position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 60; color: var(--surface); background: var(--ink); border: 1px solid var(--mustard-500); border-radius: var(--radius-sm); transform: translateY(120px); opacity: 0; transition: transform 200ms cubic-bezier(.22,1,.36,1), opacity 200ms; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1100px) {
  .header-main { grid-template-columns: auto 1fr auto; }.header-location{display:none}.main-search{grid-column:2}.cart-button{grid-column:3}.welcome{grid-template-columns:1.2fr .8fr;gap:var(--space-2xl)}.category-list{grid-template-columns:repeat(3,1fr)}.product-list{grid-template-columns:repeat(3,1fr)}.order-help__layout{grid-template-columns:1fr 1fr}.order-help__layout>a{grid-column:2;width:max-content}.footer-layout{grid-template-columns:1.3fr repeat(3,1fr);gap:var(--space-lg)}
}

@media (max-width: 900px) {
  .essentials__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
  .order-help__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
  .order-help__layout > a { grid-column: auto; width: max-content; }
  .footer-layout { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-layout > div:last-of-type { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  body{font-size:16px}.page-width{width:min(100% - 32px, 680px)}.utility-bar__inner{min-height:42px;justify-content:center;text-align:center}.utility-bar__inner p:last-child{display:none}.site-header{position:static}.header-main{padding-block:var(--space-sm);grid-template-columns:1fr auto;gap:var(--space-sm)}.brand__basket{width:40px;height:40px}.brand__name{font-size:1.05rem}.brand__name small{font-size:.64rem}.cart-button{grid-column:2;grid-row:1}.cart-button>span{display:none}.main-search{grid-column:1 / -1;grid-row:2;min-height:50px}.main-search button{min-width:80px}.department-nav{width:100%;padding-inline:var(--space-md);min-height:48px}.location-panel__inner{grid-template-columns:1fr;gap:var(--space-sm)}.location-panel.open .location-panel__inner{padding-block:var(--space-md)}.location-panel form{width:100%}.location-panel input{width:100%}.location-close{justify-self:start;padding:0}.welcome{padding-block:var(--space-2xl);grid-template-columns:1fr;gap:var(--space-2xl)}.welcome h1{font-size:clamp(2.8rem,13vw,4.15rem)}.welcome__actions{align-items:flex-start;flex-direction:column;gap:var(--space-md)}.order-facts{padding:var(--space-lg)}.quick-order{grid-template-columns:1fr;gap:var(--space-lg)}.quick-order__choices{grid-template-columns:1fr}.quick-order__choices a + a{border-left:1px solid var(--line);border-top:0}.catalogue{padding-block:var(--space-3xl)}.catalogue-heading{align-items:flex-start;flex-direction:column;gap:var(--space-md)}.catalogue-tools{align-items:flex-start;flex-direction:column}.filter-row{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)}.filter-button{width:100%;padding-inline:var(--space-sm)}.category-list{grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}.category-item{padding:var(--space-sm);grid-template-rows:120px auto}.category-item img{height:120px}.category-item em{display:none}.category-item strong{font-size:1.05rem}.category-item small{font-size:.78rem}.essentials__layout{grid-template-columns:1fr;gap:var(--space-xl)}.ration-table>div{grid-template-columns:minmax(145px,1.4fr) .65fr .5fr 62px;gap:var(--space-xs);font-size:.9rem}.ration-table img{display:none}.product-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)}.product-item{min-width:0}.order-help__layout{grid-template-columns:1fr;gap:var(--space-xl)}.order-help__layout>a{grid-column:auto;width:100%;justify-content:center}.footer-layout{grid-template-columns:1fr 1fr}.footer-store{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:var(--space-xs)}.toast{left:var(--space-md);right:var(--space-md);bottom:var(--space-md);text-align:center}
}

@media (max-width: 760px) {
  .header-main { grid-template-columns: minmax(0, 1fr) auto auto; }
  .menu-button { display: flex; grid-column: 2; grid-row: 1; }
  .cart-button { grid-column: 3; grid-row: 1; }
  .main-search { grid-column: 1 / -1; }
  .mobile-nav-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; border-top: 1px solid transparent; transition: grid-template-rows 200ms cubic-bezier(.22,1,.36,1), border-color 200ms; }
  .mobile-nav-panel.open { grid-template-rows: 1fr; border-color: var(--line); }
  .department-nav { min-height: 0; padding-block: 0; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; border-top: 0; white-space: normal; }
  .mobile-nav-panel.open .department-nav { padding-block: var(--space-xs) var(--space-md); }
  .department-nav a { min-height: 52px; padding-inline: var(--space-sm); border-bottom: 1px solid var(--line); font-size: 1rem; }
  .department-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 420px) {
  .category-list{grid-template-columns:1fr 1fr}.category-item{grid-template-rows:100px auto}.category-item img{height:100px}.category-item small{display:none}.product-list{grid-template-columns:1fr}.ration-table>div{grid-template-columns:1fr .55fr 58px}.ration-table [role="cell"]:nth-child(2),.ration-table__head span:nth-child(2){display:none}.footer-layout{grid-template-columns:1fr}.footer-store{grid-column:auto}.footer-bottom{grid-column:auto}
}

@media (max-width: 360px) {
  .menu-button { width: 48px; justify-content: center; padding-inline: 0; }
  .menu-button__label { display: none; }
  .brand { gap: var(--space-xs); }
  .brand__name { font-size: .95rem; }
  .brand__name small { display: none; }
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.location-panel,.mobile-nav-panel,.menu-button__icon i,.toast{transition:none} }