:root {
  --green: #0C831F;
  --green-deep: #086A18;
  --green-soft: #E9F6EB;
  --haldi: #F8CB46;
  --haldi-soft: #FFF8DC;
  --paper: #F4F6F4;
  --ink: #1C1C1C;
  --muted: #666B66;
  --line: #E4E8E4;
  --leaf: #0C831F;
  --leaf-soft: #E9F6EB;
  --danger: #D93025;
  --danger-soft: #FDECEA;
  --white: #fff;
  --r-sm: 10px;
  --r-md: 14px;
  --shadow: 0 1px 4px rgba(0, 0, 0, .08);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, .12);
  --lift: 0 2px 0 rgba(0, 0, 0, .08);
  --font: 'Mukta', system-ui, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--green); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); margin: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .row2, .row3 { grid-template-columns: 1fr; } }

.ic { width: 22px; height: 22px; flex: none; }

/* ---------- top chrome ---------- */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r-sm);
}
.skip:focus { top: 8px; }
.config-warning { background: var(--ink); color: var(--haldi); text-align: center; padding: 8px 12px; font-weight: 700; }
.gov-strip { height: 5px; background: linear-gradient(90deg, var(--haldi) 0 50%, var(--green) 50% 100%); }
.util-bar { background: #fff; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .82rem; }
.util-bar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 10px; }
.fs-ctrl { display: flex; gap: 2px; }
.fs-ctrl button {
  background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 4px;
  min-width: 30px; height: 24px; cursor: pointer; line-height: 1;
}
.fs-ctrl button:hover { background: var(--haldi); color: var(--ink); border-color: var(--haldi); }

.site-header {
  height: 20vh; min-height: 108px; max-height: 210px;
  background: var(--white);
  border-bottom: 4px solid var(--haldi);
  display: flex; align-items: center;
}
.site-header.compact { height: auto; min-height: 76px; padding: 10px 0; }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
.brand-logo { height: clamp(56px, 11vh, 118px); width: auto; }
.compact .brand-logo { height: 52px; }
.logo-mark {
  width: clamp(56px, 10vh, 96px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: clamp(1.2rem, 3vh, 2rem);
  background: var(--green); color: var(--haldi); border-radius: var(--r-md);
  box-shadow: inset 0 -6px 0 var(--green-deep);
}
.compact .logo-mark { width: 52px; font-size: 1.2rem; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 800; font-size: clamp(1.55rem, 4.2vw, 2.7rem); color: var(--green); letter-spacing: -.01em; line-height: 1; }
.compact .brand-name { font-size: 1.5rem; }
.brand-tag { color: var(--muted); font-size: clamp(.82rem, 1.6vw, 1rem); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.brand-role { font-weight: 700; color: var(--ink); background: var(--haldi-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; width: fit-content; margin-top: 4px; font-size: .85rem; }
.head-actions { display: flex; gap: 8px; flex: none; }

.icon-btn {
  position: relative; width: 46px; height: 46px; flex: none;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--green);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.icon-btn:hover { background: var(--haldi-soft); border-color: var(--haldi); }
.icon-btn:active { transform: scale(.93); }
.icon-btn.sm { width: 36px; height: 36px; }
.icon-btn.sm .ic { width: 18px; height: 18px; }
.icon-btn.bump { animation: bump .4s; }
.badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 11px; border: 2px solid #fff;
  background: var(--green); color: #fff; font-size: .72rem; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
@media (max-width: 560px) {
  .brand { gap: 10px; }
  .head-actions { gap: 6px; }
  .icon-btn { width: 42px; height: 42px; }
}

/* ---------- red nav band ---------- */
.nav-band { background: var(--green); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 0 var(--green-deep); }
.nav-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabs { display: flex; }
.tab {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-weight: 700; font-size: 1.05rem; padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 4px solid transparent; margin-bottom: -2px;
  transition: background .15s;
}
.tab:hover { background: rgba(0, 0, 0, .14); }
.tab[aria-selected="true"] { background: var(--green-deep); border-bottom-color: var(--haldi); }
.mode { display: flex; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: var(--r-sm); overflow: hidden; margin: 6px 0; }
.mode button { background: none; border: 0; color: #fff; padding: 6px 12px; cursor: pointer; display: flex; gap: 6px; align-items: center; font-size: .95rem; }
.mode button .ic { width: 18px; height: 18px; }
.mode button[aria-pressed="true"] { background: var(--haldi); color: var(--ink); font-weight: 700; }
.mode button:not([aria-pressed="true"]):hover { background: rgba(0, 0, 0, .14); }
@media (max-width: 560px) {
  .tab { padding: 10px 12px; font-size: 1rem; }
  .mode button { padding: 6px 9px; font-size: .88rem; }
}

/* notice ticker, like the "latest updates" strip on government portals */
.ticker { background: var(--haldi-soft); border-bottom: 1.5px solid var(--line); }
.ticker .wrap { display: flex; align-items: center; gap: 12px; min-height: 38px; overflow: hidden; }
.ticker strong { flex: none; background: var(--green); color: #fff; padding: 2px 10px; border-radius: 4px; font-size: .88rem; }
.ticker-track { overflow: hidden; flex: 1; white-space: nowrap; }
.ticker-track span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
.ticker:hover .ticker-track span { animation-play-state: paused; }

/* ---------- catalog ---------- */
main { flex: 1; padding-top: 18px; padding-bottom: 12px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.search { flex: 1; position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; padding-left: 42px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.chip {
  flex: none; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-sm);
  padding: 5px 12px 5px 5px; font-weight: 500; transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--haldi); }
.chip[aria-pressed="true"] { border-color: var(--green); background: var(--haldi-soft); font-weight: 700; color: var(--green-deep); }
.chip-img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: var(--haldi-soft); display: grid; place-items: center; color: var(--green); }
.chip-img .ic { width: 18px; height: 18px; }
.result-note { color: var(--muted); margin: 0 0 10px; min-height: 1.5em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
@media (max-width: 420px) { .grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.card {
  position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s;
}
.card:hover { border-color: var(--haldi); }
.card-img { aspect-ratio: 4 / 3; background: var(--haldi-soft); display: grid; place-items: center; color: var(--green); border: 0; padding: 0; cursor: pointer; width: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img .ic { width: 40px; height: 40px; opacity: .6; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card h3 { font-size: 1.05rem; font-weight: 700; }
.name-hi { color: var(--muted); font-size: .9rem; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: auto 0 8px; padding-top: 6px; }
.price b { font-size: 1.2rem; color: var(--green-deep); }
.price s { color: var(--muted); font-size: .9rem; }
.per { color: var(--muted); font-size: .85rem; }
.off { font-size: .75rem; font-weight: 800; color: var(--leaf); }
.tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 4px;
}
.tag .ic { width: 14px; height: 14px; }
.tag-organic { background: var(--leaf-soft); color: var(--leaf); border: 1px solid #BFE0C1; }
.tag-exotic { background: #F3E8FF; color: #6B2FB3; border: 1px solid #DCC6F7; }
.fav {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, .94); border: 1.5px solid var(--line); color: var(--green);
  display: grid; place-items: center; cursor: pointer; transition: transform .12s;
}
.fav:active { transform: scale(.9); }
.fav.on .ic { fill: currentColor; }
.fav.pop .ic { animation: pop .38s; }

.stepper { display: flex; align-items: stretch; border: 1.5px solid var(--green); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.stepper button {
  width: 40px; min-height: 40px; border: 0; background: var(--green); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.stepper button:hover { background: var(--green-deep); }
.stepper button:active .ic { transform: scale(.8); }
.stepper output { flex: 1; display: grid; place-items: center; font-weight: 800; padding: 0 6px; white-space: nowrap; }
.stepper.sm button { width: 34px; min-height: 34px; }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--r-md); background: #fff; }
.empty .ic { width: 42px; height: 42px; color: var(--green); margin: 0 auto 8px; display: block; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn .ic { width: 20px; height: 20px; transition: transform .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.btn:hover .ic { transform: scale(1.12); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); }
.btn-haldi { background: var(--haldi); color: var(--ink); border-color: #E0A600; }
.btn-haldi:hover { background: #FFC61A; }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-danger { background: #fff; border-color: #F1B9B3; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-leaf { background: var(--leaf); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: .92rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--green); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn[disabled] { color: var(--muted); cursor: default; text-decoration: none; }

.spin { width: 16px; height: 16px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-weight: 600; font-size: .92rem; }
.field > span em { color: var(--danger); font-style: normal; }
.field small { color: var(--muted); }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  width: 100%; min-height: 42px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(246, 184, 0, .35); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--green); }
.otp-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-weight: 800; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #CFD5CF; border-radius: 12px; transition: background .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--leaf); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--haldi); outline-offset: 2px; }

/* ---------- panels (the boxed look of sarkari portals) ---------- */
.panel { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--haldi-soft); border-bottom: 1.5px solid var(--line); border-left: 5px solid var(--green);
  padding: 9px 14px; font-weight: 800; font-size: 1.02rem;
}
.panel-head .ic { color: var(--green); }
.panel-head h2, .panel-head h3 { font-size: inherit; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 14px; }
.panel + .panel { margin-top: 14px; }

.pill { display: inline-block; font-size: .78rem; font-weight: 800; padding: 1px 9px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.st-placed { background: #FFF3C4; color: #7A5A00; border-color: #F2D675; }
.st-confirmed { background: #E8F0FE; color: #1E4FA3; border-color: #BCD0F5; }
.st-packed { background: #F1E8FD; color: #5B2AA0; border-color: #D5C1F2; }
.st-picked_up { background: #FFF1E0; color: #A45A00; border-color: #F6D3A6; }
.st-delivered { background: var(--leaf-soft); color: var(--leaf); border-color: #BFE0C1; }
.st-cancelled { background: #EEE; color: #555; border-color: #D5D5D5; }

.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 2px dashed var(--green); background: var(--haldi-soft); border-radius: var(--r-md); padding: 12px 14px;
}
.code-box b { font-size: 2rem; letter-spacing: .3em; color: var(--green-deep); font-weight: 800; }

.timeline { display: flex; gap: 0; margin: 4px 0 2px; }
.timeline li { list-style: none; flex: 1; text-align: center; font-size: .78rem; color: var(--muted); position: relative; padding-top: 22px; }
.timeline li::before { content: ""; position: absolute; top: 5px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--line); z-index: 1; }
.timeline li::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.timeline li:first-child::after { display: none; }
.timeline li.done { color: var(--ink); font-weight: 700; }
.timeline li.done::before { background: var(--green); border-color: var(--green); }
.timeline li.done::after { background: var(--green); }
.timeline { padding: 0; }

.lines { width: 100%; border-collapse: collapse; }
.lines td { padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines td:last-child { text-align: right; white-space: nowrap; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 8px; }
.totals .grand { font-size: 1.15rem; font-weight: 800; color: var(--green-deep); border-top: 1.5px solid var(--line); padding-top: 6px; }
.hint { font-size: .88rem; background: var(--leaf-soft); color: var(--leaf); border-radius: var(--r-sm); padding: 6px 10px; }
.warn { font-size: .9rem; background: var(--danger-soft); color: #A1241B; border-radius: var(--r-sm); padding: 8px 10px; }

.cart-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cart-line img, .cart-line .thumb { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; background: var(--haldi-soft); display: grid; place-items: center; color: var(--green); }
.cart-line .meta { min-width: 0; }
.cart-line .meta b { display: block; }
.cart-line .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.choice { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--green); background: var(--haldi-soft); }
.choice input { margin-top: 4px; }

.list-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .ic-wrap { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--haldi-soft); color: var(--green); display: grid; place-items: center; flex: none; }
.list-item .ic-wrap .ic { width: 18px; height: 18px; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item.clickable { cursor: pointer; }
.list-item.clickable:hover { background: var(--green-soft); }
.list-item.unread b::after { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; margin-left: 6px; vertical-align: middle; }

.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.preset { border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; text-align: left; transition: border-color .15s; }
.preset:hover { border-color: var(--green); }
.preset b { display: block; }
.preset small { color: var(--muted); }
.preset[aria-pressed="true"] { border-color: var(--green); background: var(--haldi-soft); }

/* ---------- maps ---------- */
.map { height: 280px; border: 1.5px solid var(--line); border-radius: var(--r-sm); z-index: 0; }
.map.tall { height: 420px; }
.map-pin { background: none; border: 0; }
.map-pin span {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--green); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.map-pin span .ic { transform: rotate(45deg); width: 20px; height: 20px; }
.map-pin-rider span { background: var(--ink); color: var(--haldi); }
.map-pin-shop span { background: var(--haldi); color: var(--ink); }
.geo-results { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.geo-results button { text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; cursor: pointer; }
.geo-results button:hover { background: var(--haldi-soft); }

/* ---------- dialogs & drawers ---------- */
dialog.dlg {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(560px, 100% - 24px); max-height: calc(100% - 24px);
}
dialog.dlg-wide { width: min(860px, 100% - 24px); }
dialog.dlg::backdrop { background: rgba(0, 0, 0, .5); }
.dlg-inner { background: var(--paper); border-radius: var(--r-md); border-top: 5px solid var(--green); display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow: hidden; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1.5px solid var(--line); }
.dlg-head h2 { font-size: 1.2rem; font-weight: 800; }
.dlg-body { padding: 16px; overflow: auto; }
dialog.dlg[open] .dlg-inner { animation: rise .2s ease-out; }
dialog.drawer { margin: 0 0 0 auto; width: min(460px, 100%); height: 100%; max-height: 100%; }
dialog.drawer .dlg-inner { height: 100%; max-height: 100vh; border-radius: 0; border-top: 0; border-left: 5px solid var(--green); }
dialog.drawer[open] .dlg-inner { animation: slide .22s ease-out; }
.dlg-foot { position: sticky; bottom: -16px; background: var(--paper); padding: 12px 0 0; margin-top: 12px; border-top: 1.5px solid var(--line); }

.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(420px, 100% - 24px); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--ink); color: #fff; padding: 11px 14px; border-radius: var(--r-sm); border-left: 5px solid var(--haldi); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: rise .2s ease-out; pointer-events: auto; }
.toast-error { border-left-color: #FF6B5E; }
.toast-ok { border-left-color: #6CD27A; }
.toast .ic { width: 20px; height: 20px; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }

/* ---------- footer ---------- */
.site-footer { background: #0B3B16; color: #DCEFE0; margin-top: 40px; border-top: 5px solid var(--haldi); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding: 28px 0; }
.site-footer h3 { color: var(--haldi); font-size: 1rem; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer a, .site-footer .link-btn { color: #fff; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.site-footer a:hover, .site-footer .link-btn:hover { text-decoration: underline; }
.site-footer .ic { width: 18px; height: 18px; color: var(--haldi); }
.footer-base { border-top: 1px solid rgba(255, 255, 255, .18); padding: 12px 0; font-size: .85rem; }
.footer-base .wrap { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- staff panels ---------- */
.gate { max-width: 460px; margin: 40px auto; }
.staff-main { flex: 1; }
.admin-shell { display: grid; grid-template-columns: 236px 1fr; flex: 1; }
.side-nav { background: #fff; border-right: 1.5px solid var(--line); padding: 10px 0; }
.side-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 16px; border: 0; border-left: 4px solid transparent; background: none; font-weight: 500;
  transition: background .15s;
}
.side-nav button:hover { background: var(--green-soft); }
.side-nav button[aria-current="page"] { background: var(--haldi-soft); border-left-color: var(--green); font-weight: 800; color: var(--green-deep); }
.side-nav .ic { color: var(--green); width: 20px; height: 20px; }
.side-nav .count { margin-left: auto; background: var(--green); color: #fff; border-radius: 10px; font-size: .72rem; font-weight: 800; padding: 0 7px; }
.view { padding: 18px; min-width: 0; }
.view-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.view-head h1 { font-size: 1.4rem; font-weight: 800; }
@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; }
  .side-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1.5px solid var(--line); padding: 0; position: sticky; top: 0; z-index: 10; }
  .side-nav button { width: auto; flex: none; border-left: 0; border-bottom: 4px solid transparent; padding: 10px 12px; }
  .side-nav button[aria-current="page"] { border-bottom-color: var(--green); }
  .view { padding: 14px 12px; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: #fff; border: 1.5px solid var(--line); border-left: 5px solid var(--haldi); border-radius: var(--r-sm); padding: 10px 12px; }
.stat b { display: block; font-size: 1.5rem; color: var(--green-deep); line-height: 1.2; }
.stat span { color: var(--muted); font-size: .88rem; }

.tbl-wrap { overflow-x: auto; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th { background: var(--haldi-soft); text-align: left; font-size: .88rem; padding: 9px 10px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--green-soft); }
.tbl .thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: var(--haldi-soft); display: grid; place-items: center; color: var(--green); }
.tbl .thumb .ic { width: 18px; height: 18px; }
.tbl .num { text-align: right; white-space: nowrap; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cat-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cat-card .cover { aspect-ratio: 16 / 9; background: var(--haldi-soft); display: grid; place-items: center; color: var(--green); }
.cat-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }

.img-pick { display: flex; gap: 12px; align-items: center; }
.img-pick .preview { width: 84px; height: 84px; border-radius: var(--r-sm); border: 1.5px dashed var(--line); background: var(--haldi-soft); display: grid; place-items: center; overflow: hidden; color: var(--green); flex: none; }
.img-pick .preview img { width: 100%; height: 100%; object-fit: cover; }

.order-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.order-card + .order-card { margin-top: 12px; }
.order-card .oc-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--haldi-soft); border-bottom: 1.5px solid var(--line); border-left: 5px solid var(--green); }
.order-card .oc-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.collect { font-size: 1.3rem; font-weight: 800; color: var(--green-deep); }
.online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #BBB; margin-right: 6px; }
.online-dot.on { background: #2ECC40; box-shadow: 0 0 0 3px rgba(46, 204, 64, .25); }

.page-text p { margin: 0 0 12px; }

/* ---------- motion ---------- */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.14) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker-track span { padding-left: 0; white-space: normal; }
}

@media print {
  .util-bar, .gov-strip, .nav-band, .site-footer, .head-actions { display: none !important; }
}


/* ================================================================
   JK Vegies theme layer — "sabzi mandi" palette.
   Base: leaf green + haldi. Accents taken from the produce itself:
   tomato red, carrot orange, brinjal purple. Split hard-stop
   gradients, soft tinted cards, coloured shadows, corner brackets.
   Placed last so it overrides the structure above.
   ================================================================ */
:root {
  --tomato: #E53935;
  --carrot: #F57C00;
  --brinjal: #6A1B9A;
  --forest: #0B3B16;
  --mint: #EAF6EC;
  --cream: #FFFBEA;
  --serif: Georgia, 'Noto Serif Devanagari', 'Times New Roman', serif;
  --glow-green: 0 8px 24px rgba(12, 131, 31, .10);
  --glow-green-hover: 0 14px 32px rgba(12, 131, 31, .18);
  --glow-haldi: 0 6px 16px rgba(217, 160, 0, .25);
}

body {
  background-color: #F1F7EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%3Cpath d=%27M22 30c10-14 28-14 34-2c-12 2-24 8-34 2z%27 fill=%27%230C831F%27 fill-opacity=%27.10%27/%3E%3Cpath d=%27M24 30c10-3 20-4 30-2%27 stroke=%27%230C831F%27 stroke-opacity=%27.16%27 fill=%27none%27 stroke-width=%271.2%27/%3E%3Ccircle cx=%27108%27 cy=%2732%27 r=%278%27 fill=%27%23E53935%27 fill-opacity=%27.10%27/%3E%3Cpath d=%27M104 24l4 4 4-4%27 stroke=%27%230C831F%27 stroke-opacity=%27.25%27 fill=%27none%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3Cpath d=%27M96 104l18-8-4 6 8 2z%27 fill=%27%23F57C00%27 fill-opacity=%27.14%27/%3E%3Cg fill=%27%236A1B9A%27 fill-opacity=%27.10%27%3E%3Ccircle cx=%2730%27 cy=%27106%27 r=%274%27/%3E%3Ccircle cx=%2724%27 cy=%27111%27 r=%274%27/%3E%3Ccircle cx=%2736%27 cy=%27111%27 r=%274%27/%3E%3Ccircle cx=%2730%27 cy=%27116%27 r=%274%27/%3E%3C/g%3E%3Ccircle cx=%2770%27 cy=%2770%27 r=%272%27 fill=%27%23F8CB46%27 fill-opacity=%27.55%27/%3E%3Ccircle cx=%27120%27 cy=%2776%27 r=%271.6%27 fill=%27%230B3B16%27 fill-opacity=%27.12%27/%3E%3Ccircle cx=%2760%27 cy=%27124%27 r=%271.4%27 fill=%27%230B3B16%27 fill-opacity=%27.12%27/%3E%3C/svg%3E"),
    linear-gradient(135deg, #F1F7EF 0%, #F1F7EF 88%, #DDEEDB 88%, #DDEEDB 100%);
  background-size: 140px 140px, 100% 100%;
  background-attachment: fixed;
}

/* Serif only for display text; body stays Mukta for Hindi readability */
h1, h2, h3, .brand-name, .view-head h1, .site-footer h3 { font-family: var(--serif); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mint); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--green), var(--haldi)); border-radius: 6px; }

/* ---------- top chrome ---------- */
.gov-strip { height: 5px; background: linear-gradient(110deg, var(--green-deep) 0 48%, var(--haldi) 52% 100%); }
.util-bar { background: linear-gradient(110deg, var(--forest) 0 70%, var(--green-deep) 70% 100%); color: #CFE6D3; border: 0; }
.fs-ctrl button { border-color: rgba(255, 255, 255, .25); color: #fff; }
.fs-ctrl button:hover { background: linear-gradient(135deg, #FFD65C, var(--haldi)); color: var(--ink); }

.site-header {
  background: linear-gradient(135deg, #FFEFA8 0%, #FFEFA8 46%, #D6F0D9 54%, #D6F0D9 100%);
  border-bottom: 1px solid rgba(12, 131, 31, .15);
  box-shadow: 0 4px 20px rgba(11, 59, 22, .06);
}
.brand { position: relative; isolation: isolate; }
.brand::after {
  content: ""; position: absolute; inset: -16px; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27 fill=%27%23F8CB46%27 fill-opacity=%27.18%27/%3E%3Cpath d=%27M12 1L14.3 9.7 23 12 14.3 14.3 12 23 9.7 14.3 1 12 9.7 9.7Z%27 fill=%27%23F8CB46%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 20C4 10 10 4 20 4c0 10-6 16-16 16z%27 fill=%27%230C831F%27 fill-opacity=%27.8%27/%3E%3Cpath d=%27M4 20L16 8%27 stroke=%27%23fff%27 stroke-width=%271.3%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27 fill=%27%230C831F%27 fill-opacity=%27.12%27/%3E%3Cpath d=%27M12 1L14.3 9.7 23 12 14.3 14.3 12 23 9.7 14.3 1 12 9.7 9.7Z%27 fill=%27%230C831F%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27 fill=%27%23E53935%27 fill-opacity=%27.10%27/%3E%3Cpath d=%27M12 1L14.3 9.7 23 12 14.3 14.3 12 23 9.7 14.3 1 12 9.7 9.7Z%27 fill=%27%23E53935%27/%3E%3C/svg%3E");
  background-position: top left, top right, bottom right, bottom left;
  background-size: 22px 22px, 16px 16px, 14px 14px, 12px 12px;
}
.brand-logo { transition: transform .3s ease; }
.brand:hover .brand-logo { transform: scale(1.05) rotate(-2deg); }
.brand-name { color: var(--forest); font-weight: 700; letter-spacing: -.02em; }
.brand-name::first-letter { color: var(--green); }
.brand-tag { color: #6B4E00; font-weight: 600; letter-spacing: .02em; }
.brand-role { background: #fff; border: 1px solid rgba(12, 131, 31, .2); color: var(--green-deep); }
.logo-mark { background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); color: var(--haldi); box-shadow: var(--glow-green); font-family: var(--serif); }

.icon-btn { background: #fff; border: 1px solid rgba(12, 131, 31, .15); box-shadow: 0 4px 12px rgba(11, 59, 22, .08); color: var(--green-deep); transition: transform .25s ease, box-shadow .25s ease, background .25s; }
.icon-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-green-hover); background: #fff; border-color: var(--green); }
#btnCart { background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); color: #fff; border-color: transparent; }
#btnCart:hover { background: linear-gradient(135deg, #16A02C 0%, var(--green) 100%); }
.badge { background: linear-gradient(135deg, var(--tomato), #B71C1C); }

/* nav: deep green with a haldi block on the right edge */
.nav-band {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-deep) 86%, var(--haldi) 86%, var(--haldi) 100%);
  color: #fff; box-shadow: 0 3px 0 var(--forest);
}
.tab { color: #E2F2E4; position: relative; border-bottom: 0; }
.tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--haldi), var(--carrot)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tab:hover::after, .tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab[aria-selected="true"] { background: rgba(0, 0, 0, .15); color: #fff; }
.mode { background: var(--forest); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 3px; }
.mode button { color: #E2F2E4; border-radius: 999px; }
.mode button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .12); }
.mode button[aria-pressed="true"] { background: linear-gradient(135deg, #FFD65C, var(--haldi)); color: var(--ink); box-shadow: var(--glow-haldi); }

.ticker { background: linear-gradient(90deg, var(--cream), #FFF3C4 60%, var(--mint)); border-bottom: 1px solid rgba(217, 160, 0, .25); }
.ticker strong { background: linear-gradient(135deg, var(--tomato), #B71C1C); border-radius: 6px; font-family: var(--serif); letter-spacing: .03em; }
.ticker-track { color: var(--forest); font-weight: 500; }

/* ---------- catalog ---------- */
.search input { border-radius: 12px; border: 1px solid rgba(12, 131, 31, .15); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .05); min-height: 46px; background: #fff; }
.search input:focus { border-color: var(--green); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .05), 0 0 0 3px rgba(12, 131, 31, .15); }
.chip { border-radius: 999px; border: 1px solid rgba(12, 131, 31, .15); background: linear-gradient(145deg, #fff, var(--mint)); box-shadow: 0 3px 10px rgba(11, 59, 22, .05); transition: transform .25s, box-shadow .25s, background .25s; }
.chip:hover { transform: translateY(-2px); box-shadow: var(--glow-green); border-color: var(--green); }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; border-color: transparent; }
.chip-img { border-radius: 50%; }

.card {
  background: linear-gradient(145deg, #FFFFFF 0%, #F4FBF1 100%);
  border: 1px solid rgba(12, 131, 31, .10); border-radius: 14px;
  box-shadow: var(--glow-green); transition: transform .4s cubic-bezier(.25, .8, .25, 1), box-shadow .4s;
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--green), var(--haldi), var(--tomato)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--glow-green-hover); border-color: rgba(12, 131, 31, .18); }
.card:hover::before { transform: scaleX(1); }
.card-img { position: relative; background: radial-gradient(circle at 30% 25%, #FFFFFF 0%, var(--cream) 55%, var(--mint) 100%); overflow: hidden; }
.card-img img { transition: transform .6s ease; }
.card:hover .card-img img { transform: scale(1.06); }
/* four produce-coloured corner brackets, shown on hover */
.card-img::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; opacity: 0; transition: opacity .35s, inset .35s;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--haldi), var(--haldi)), linear-gradient(var(--haldi), var(--haldi)),
    linear-gradient(var(--tomato), var(--tomato)), linear-gradient(var(--tomato), var(--tomato)),
    linear-gradient(var(--green), var(--green)), linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--brinjal), var(--brinjal)), linear-gradient(var(--brinjal), var(--brinjal));
  background-size: 22px 3px, 3px 22px, 22px 3px, 3px 22px, 22px 3px, 3px 22px, 22px 3px, 3px 22px;
  background-position: top left, top left, top right, top right, bottom right, bottom right, bottom left, bottom left;
}
.card:hover .card-img::after { opacity: 1; inset: 12px; }
.card h3 { color: var(--forest); }
.price b { color: var(--forest); font-family: var(--serif); }
.off { color: #fff; background: linear-gradient(135deg, var(--carrot), #E65100); padding: 0 6px; border-radius: 4px; }
.tag { border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.tag-organic { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); color: var(--green-deep); border-color: #A5D6A7; }
.tag-exotic { background: linear-gradient(135deg, #F3E5F5, #E1BEE7); color: var(--brinjal); border-color: #CE93D8; }
.fav { border-radius: 50%; border: 1px solid rgba(229, 57, 53, .15); color: var(--tomato); box-shadow: 0 4px 10px rgba(229, 57, 53, .12); }
.fav:hover { transform: scale(1.08); }

/* ---------- buttons ---------- */
.btn { border-radius: 8px; transition: transform .3s ease, box-shadow .3s ease, background .3s, color .3s, border-color .3s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); box-shadow: 0 4px 12px rgba(12, 131, 31, .22); }
.btn-primary:hover { background: linear-gradient(135deg, #16A02C 0%, var(--green) 100%); box-shadow: 0 8px 20px rgba(12, 131, 31, .30); }
.btn-haldi { background: linear-gradient(135deg, #FFD65C 0%, var(--haldi) 60%, #E8B400 100%); border-color: transparent; box-shadow: var(--glow-haldi); }
.btn-haldi:hover { background: linear-gradient(135deg, #FFE27F 0%, #FFD65C 100%); }
.btn-add { background: #fff; color: var(--green-deep); border: 1.5px solid var(--green); }
.btn-add:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; box-shadow: 0 6px 16px rgba(12, 131, 31, .25); }
.btn-ghost { background: linear-gradient(145deg, #fff, var(--mint)); border-color: rgba(12, 131, 31, .18); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-deep); box-shadow: var(--glow-green); }
.btn-danger:hover { box-shadow: 0 6px 16px rgba(217, 48, 37, .18); }
.stepper { border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--green), var(--green-deep)); box-shadow: 0 4px 12px rgba(12, 131, 31, .22); }
.stepper button { background: transparent; }
.stepper button:hover { background: rgba(255, 255, 255, .15); }
.stepper output { color: #fff; }
.link-btn { color: var(--green-deep); }

/* ---------- panels, dialogs, admin ---------- */
.panel, .order-card, .cat-card, .tbl-wrap { background: linear-gradient(145deg, #FFFFFF 0%, #F7FBF5 100%); border: 1px solid rgba(12, 131, 31, .10); border-radius: 14px; box-shadow: var(--glow-green); }
.panel-head, .order-card .oc-head { background: linear-gradient(90deg, var(--cream), #fff); border-left: 0; position: relative; }
.panel-head h2 { color: var(--forest); position: relative; padding-bottom: 4px; }
.panel-head h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--haldi), var(--tomato)); }
.view-head h1 { color: var(--forest); }
.stat { background: linear-gradient(145deg, #fff, var(--cream)); border: 1px solid rgba(217, 160, 0, .2); border-left: 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(217, 160, 0, .10); position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--green), var(--haldi)); }
.stat b { color: var(--forest); font-family: var(--serif); }
.tbl th { background: linear-gradient(180deg, var(--cream), #FFF3C4); color: var(--forest); }
.code-box { background: linear-gradient(145deg, var(--cream), #FFF3C4); border-color: var(--green); }
.code-box b { color: var(--forest); font-family: var(--serif); }
.dlg-inner { background: linear-gradient(180deg, #fff 0%, #FAFDF8 100%); border-top: 0; position: relative; }
.dlg-inner::before { content: ""; height: 5px; flex: none; background: linear-gradient(110deg, var(--green-deep) 0 60%, var(--haldi) 60% 85%, var(--tomato) 85% 100%); }
dialog.drawer .dlg-inner { border-left: 5px solid var(--green); }
.dlg-head { background: transparent; }
.side-nav { background: linear-gradient(180deg, #fff, var(--mint)); }
.side-nav button[aria-current="page"] { background: linear-gradient(90deg, #FFF3C4, transparent); border-left-color: var(--green); color: var(--forest); }
.timeline li.done::before, .timeline li.done::after { background: var(--green); border-color: var(--green); }

/* ---------- footer ---------- */
.site-footer {
  background: linear-gradient(180deg, #0E4A1C 0%, var(--forest) 60%, #072710 100%);
  color: #CFE6D3; border-top: 0; position: relative;
}
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--haldi), var(--carrot), var(--tomato), var(--brinjal), var(--green)); }
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--haldi); }

@media (max-width: 560px) {
  .nav-band { background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-deep) 92%, var(--haldi) 92%, var(--haldi) 100%); }
  .brand::after { inset: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .card-img img, .chip:hover, .btn:hover, .icon-btn:hover { transform: none !important; }
}
@media print { body { background: #fff; } .site-footer::before, .card::before { display: none; } }

/* ---------- lighter greens: dark forest only for text, never for big areas ---------- */
:root { --fresh: #1FA23A; --fresh-2: #3DBB57; }
.gov-strip { background: linear-gradient(110deg, var(--fresh) 0 48%, var(--haldi) 52% 100%); }
.util-bar { background: linear-gradient(110deg, #F2FAF0 0 70%, #E3F4E2 70% 100%); color: var(--green-deep); border-bottom: 1px solid rgba(12, 131, 31, .12); }
.fs-ctrl button { border-color: rgba(12, 131, 31, .25); color: var(--green-deep); background: #fff; }

.nav-band {
  background: linear-gradient(135deg, var(--fresh) 0%, var(--fresh-2) 86%, var(--haldi) 86%, var(--haldi) 100%);
  box-shadow: 0 3px 10px rgba(31, 162, 58, .20);
}
.tab { color: #fff; }
.tab:hover { background: rgba(255, 255, 255, .16); }
.tab[aria-selected="true"] { background: rgba(255, 255, 255, .20); }
.mode { background: rgba(255, 255, 255, .92); border-color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.mode button { color: var(--green-deep); }
.mode button:not([aria-pressed="true"]):hover { background: var(--mint); }

.site-footer {
  background: linear-gradient(180deg, #F3FAF1 0%, #E4F3E3 100%);
  color: var(--muted);
}
.site-footer h3 { color: var(--green-deep); }
.site-footer a, .site-footer .link-btn { color: var(--forest); }
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--green); }
.site-footer .ic { color: var(--green); }
.footer-base { border-top-color: rgba(12, 131, 31, .15); color: var(--muted); }
@media (max-width: 560px) {
  .nav-band { background: linear-gradient(135deg, var(--fresh) 0%, var(--fresh-2) 92%, var(--haldi) 92%, var(--haldi) 100%); }
}

/* ================================================================
   Round logo · Baloo 2 + Poppins · no text-size bar · light lime
   ================================================================ */
:root {
  --font: 'Poppins', 'Mukta', system-ui, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Baloo 2', 'Poppins', system-ui, sans-serif;   /* display font */
  --lime-bg: #F3FFD9;
  --lime-1: #EAFFBF;
  --lime-2: #DFFBA3;
  --lime-card: #FBFFF0;
  --lime-line: #D6F09A;
  --line: #DCEFB4;
}

/* text-size bar removed; also undo any size a visitor saved earlier */
.util-bar { display: none !important; }
html { font-size: 100% !important; }

/* ---------- fonts ---------- */
body { font-family: var(--font); letter-spacing: .005em; }
h1, h2, h3, .brand-name, .view-head h1, .site-footer h3, .price b, .stat b, .code-box b, .ticker strong, .tab {
  font-family: var(--serif);
}
.brand-name { font-weight: 800; letter-spacing: -.01em; line-height: 1; font-size: clamp(1.8rem, 4.6vw, 3rem); }
.brand-tag { font-family: var(--font); font-weight: 600; }
.card h3 { font-weight: 700; font-size: 1.12rem; line-height: 1.15; }
.price b { font-weight: 800; font-size: 1.3rem; }
.tab { font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; }
.btn { font-family: var(--font); font-weight: 600; }
.name-hi { font-family: 'Mukta', var(--font); }

/* ---------- round logo ---------- */
.brand-logo, .logo-mark {
  width: clamp(64px, 12vh, 120px); height: clamp(64px, 12vh, 120px);
  aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex: none;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--green), 0 8px 22px rgba(12, 131, 31, .22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.logo-mark { border-color: var(--haldi); }
.brand:hover .brand-logo, .brand:hover .logo-mark {
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 0 0 3px var(--haldi), 0 12px 28px rgba(12, 131, 31, .28);
}
.compact .brand-logo, .compact .logo-mark { width: 54px; height: 54px; }

/* ---------- light fluorescent lime instead of white ---------- */
body {
  background-color: var(--lime-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%3Cpath d=%27M22 30c10-14 28-14 34-2c-12 2-24 8-34 2z%27 fill=%27%230C831F%27 fill-opacity=%27.10%27/%3E%3Cpath d=%27M24 30c10-3 20-4 30-2%27 stroke=%27%230C831F%27 stroke-opacity=%27.16%27 fill=%27none%27 stroke-width=%271.2%27/%3E%3Ccircle cx=%27108%27 cy=%2732%27 r=%278%27 fill=%27%23E53935%27 fill-opacity=%27.10%27/%3E%3Cpath d=%27M104 24l4 4 4-4%27 stroke=%27%230C831F%27 stroke-opacity=%27.25%27 fill=%27none%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3Cpath d=%27M96 104l18-8-4 6 8 2z%27 fill=%27%23F57C00%27 fill-opacity=%27.14%27/%3E%3Cg fill=%27%236A1B9A%27 fill-opacity=%27.10%27%3E%3Ccircle cx=%2730%27 cy=%27106%27 r=%274%27/%3E%3Ccircle cx=%2724%27 cy=%27111%27 r=%274%27/%3E%3Ccircle cx=%2736%27 cy=%27111%27 r=%274%27/%3E%3Ccircle cx=%2730%27 cy=%27116%27 r=%274%27/%3E%3C/g%3E%3Ccircle cx=%2770%27 cy=%2770%27 r=%272%27 fill=%27%23F8CB46%27 fill-opacity=%27.55%27/%3E%3Ccircle cx=%27120%27 cy=%2776%27 r=%271.6%27 fill=%27%230B3B16%27 fill-opacity=%27.12%27/%3E%3Ccircle cx=%2760%27 cy=%27124%27 r=%271.4%27 fill=%27%230B3B16%27 fill-opacity=%27.12%27/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--lime-bg) 0%, var(--lime-bg) 88%, var(--lime-2) 88%, var(--lime-2) 100%);
}
.site-header { background: linear-gradient(135deg, #FFF3B0 0%, #FFF3B0 46%, var(--lime-1) 54%, var(--lime-1) 100%); }
.ticker { background: linear-gradient(90deg, #FFF6C8, var(--lime-1)); }

.card { background: linear-gradient(145deg, var(--lime-card) 0%, #F0FFCC 100%); border-color: var(--lime-line); }
.card-img { background: radial-gradient(circle at 30% 25%, #FFFFF4 0%, #F6FFD8 55%, var(--lime-1) 100%); }
.panel, .order-card, .cat-card, .tbl-wrap, .stat { background: linear-gradient(145deg, var(--lime-card) 0%, #F2FFD2 100%); border-color: var(--lime-line); }
.panel-head, .order-card .oc-head { background: linear-gradient(90deg, #FFF6C8, var(--lime-card)); }
.chip { background: linear-gradient(145deg, var(--lime-card), var(--lime-1)); border-color: var(--lime-line); }
.btn-ghost, .btn-add { background: var(--lime-card); }
.search input, input, select, textarea { background: #FDFFF5; }
.empty { background: var(--lime-card); border-color: var(--lime-line); }
.dlg-inner { background: linear-gradient(180deg, var(--lime-card) 0%, var(--lime-bg) 100%); }
.dlg-head { background: transparent; }
.side-nav { background: linear-gradient(180deg, var(--lime-card), var(--lime-1)); }
.tbl th { background: linear-gradient(180deg, #FFF6C8, #FFEFA0); }
.tbl tr.clickable:hover td, .list-item.clickable:hover { background: var(--lime-1); }
.site-footer { background: linear-gradient(180deg, var(--lime-1) 0%, var(--lime-2) 100%); }
.icon-btn { background: var(--lime-card); border-color: var(--lime-line); }

/* ---------- smaller text + green/yellow name ---------- */
html { font-size: 93.75% !important; }            /* 15px base: Poppins is wider than Mukta */
body { font-size: .95rem; }
.card h3 { font-size: 1rem; }
.price b { font-size: 1.15rem; }
.tab { font-size: 1rem; padding: 10px 16px; }
.btn { font-size: .92rem; }
.brand-tag { font-size: clamp(.78rem, 1.4vw, .9rem); }

.brand-name {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  background: linear-gradient(100deg, #0A6B1E 0%, #11871F 44%, #F2A900 56%, #FFB300 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .6px rgba(10, 92, 26, .55);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 3px rgba(10, 92, 26, .18));
  text-shadow: none;
}
.brand:hover .brand-name { background-image: linear-gradient(100deg, #0A6B1E 0%, #11871F 38%, #F2A900 50%, #FFB300 100%); }
@media (max-width: 560px) { .brand-name { font-size: 1.4rem; } }

/* ================================================================
   Sharper SVG icons
   ================================================================ */
.ic { width: 24px; height: 24px; shape-rendering: geometricPrecision; overflow: visible; }
.btn .ic, .tab .ic, .mode button .ic { width: 20px; height: 20px; }
.icon-btn .ic { width: 24px; height: 24px; }
.icon-btn:hover .ic { transform: scale(1.1); }
.icon-btn .ic { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.tab .ic { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.tab:hover .ic, .tab[aria-selected="true"] .ic { transform: translateY(-2px) rotate(-8deg); }
#btnBell:hover .ic { animation: ring .6s ease; transform-origin: 50% 10%; }
@keyframes ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
#btnCart:hover .ic { animation: nudge .5s ease; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 40% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }

/* ================================================================
   Moving banners
   ================================================================ */
.hero {
  position: relative; overflow: hidden; margin-top: 14px;
  height: clamp(210px, 32vw, 380px);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(12, 131, 31, .18), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  isolation: isolate; touch-action: pan-y;
}
.hero-track { display: flex; height: 100%; transition: transform .75s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }

/* colour art: always there, visible until your GIF/video loads (or if it's missing) */
.slide-art { position: absolute; inset: 0; z-index: 0; }
.slide-fresh .slide-art { background: linear-gradient(120deg, #0E8F2A 0%, #43B649 55%, #B6E35A 100%); }
.slide-both  .slide-art { background: linear-gradient(120deg, #7A4B00 0%, #C98A00 38%, #F8CB46 75%, #E3F77A 100%); }
.slide-rapid .slide-art { background: linear-gradient(120deg, #0B7A26 0%, #16A34A 45%, #F57C00 100%); }
.slide-love  .slide-art { background: linear-gradient(120deg, #C62828 0%, #E53935 45%, #F8CB46 100%); }
.slide-free  .slide-art { background: linear-gradient(120deg, #6A1B9A 0%, #2E9E44 60%, #CFF06A 100%); }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35; background: #fff; }
.b1 { width: 46%; aspect-ratio: 1; right: -8%; top: -30%; animation: drift 12s ease-in-out infinite; }
.b2 { width: 26%; aspect-ratio: 1; right: 22%; bottom: -24%; opacity: .22; animation: drift 9s ease-in-out infinite reverse; }
.b3 { width: 12%; aspect-ratio: 1; right: 8%; bottom: 14%; opacity: .5; background: #FFE27F; animation: drift 7s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 6%) scale(1.08); } }
.float { position: absolute; color: #fff; opacity: .85; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15)); }
.float .ic { width: clamp(34px, 5vw, 64px); height: clamp(34px, 5vw, 64px); stroke-width: 1.6; }
.f1 { right: 14%; top: 16%; animation: bob 5s ease-in-out infinite; }
.f2 { right: 30%; top: 48%; animation: bob 6s ease-in-out infinite .8s; }
.f3 { right: 6%; top: 58%; animation: spin 14s linear infinite; }
.f3 .ic { width: clamp(24px, 3vw, 40px); height: clamp(24px, 3vw, 40px); }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* your GIF / video */
.slide-media { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .6s ease; }
.slide.has-media .slide-media { opacity: 1; }
.slide-media img, .slide-media video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 7s ease-out; }
.slide.active .slide-media img, .slide.active .slide-media video { transform: scale(1); }

/* dark-to-clear shade so white text is always readable over any GIF */
.slide-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(6, 40, 14, .78) 0%, rgba(6, 40, 14, .45) 45%, rgba(6, 40, 14, 0) 75%); }
.slide:not(.has-media) .slide-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 60%); }

.slide-text {
  position: absolute; z-index: 3; left: clamp(18px, 5vw, 56px); top: 50%; transform: translateY(-50%);
  max-width: min(560px, 72%); color: #fff;
}
.kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(.7rem, 1.3vw, .85rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px 4px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kicker .ic { width: 18px; height: 18px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--haldi); color: var(--forest); }
.slide-text h2 {
  font-family: var(--serif); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.45rem, 4.4vw, 3.3rem); line-height: 1.02; margin: 10px 0 6px; letter-spacing: .005em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .25);
}
.slide-text h2 em { font-style: normal; color: #FFE066; }
.slide-text p { margin: 0 0 14px; font-size: clamp(.8rem, 1.5vw, 1rem); opacity: .95; max-width: 44ch; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.hero-ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  padding: 9px 16px; min-height: 40px; border-radius: 999px; border: 0; font-weight: 700; font-size: .9rem;
  word-spacing: .14em;   /* bold Poppins has a very narrow space; without this the words run together */
  background: linear-gradient(135deg, #FFE27F, var(--haldi)); color: var(--forest);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.hero-cta + .hero-cta { background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-cta .ic { width: 18px; height: 18px; transition: transform .25s; }
.hero-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.hero-cta:hover .ic { transform: translateX(3px); }

/* text enters in a stagger each time a slide becomes active */
.slide-text > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.slide.active .slide-text > * { opacity: 1; transform: none; }
.slide.active .slide-text > :nth-child(1) { transition-delay: .25s; }
.slide.active .slide-text > :nth-child(2) { transition-delay: .38s; }
.slide.active .slide-text > :nth-child(3) { transition-delay: .5s; }
.slide.active .slide-text > :nth-child(4) { transition-delay: .62s; }

/* arrows */
.hero-arrow {
  position: absolute; top: 50%; z-index: 5; width: 42px; height: 42px; margin-top: -21px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); cursor: pointer;
  background: rgba(255, 255, 255, .25); color: #fff; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s, transform .25s, background .25s;
}
.hero-arrow.prev { left: 12px; transform: translateX(-8px); }
.hero-arrow.next { right: 12px; transform: translateX(8px); }
.hero:hover .hero-arrow, .hero:focus-within .hero-arrow { opacity: 1; transform: none; }
.hero-arrow:hover { background: var(--haldi); color: var(--forest); border-color: var(--haldi); }
.hero-arrow .ic { width: 22px; height: 22px; stroke-width: 2.4; }

/* dots with a filling progress line on the active one */
.hero-dots { position: absolute; z-index: 5; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; position: relative; transition: width .4s ease, background .3s; }
.hero-dots button[aria-selected="true"] { width: 34px; background: rgba(255, 255, 255, .45); }
.hero-dots button span { position: absolute; inset: 0; width: 0; background: var(--haldi); border-radius: inherit; }
/* the dot stays small, but the area a finger can hit is 44px tall */
.hero-dots button::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 30px); height: 44px; }
.hero-dots button[aria-selected="true"] span { width: 100%; }
.hero.run .hero-dots button[aria-selected="true"] span { width: 0; animation: fill var(--dur, 5.5s) linear forwards; }
.hero.paused .hero-dots button[aria-selected="true"] span { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }

@media (max-width: 600px) {
  .hero { border-radius: 16px; height: 220px; margin-top: 10px; }
  .slide-text { max-width: 86%; }
  .slide-text p { display: none; }
  .hero-arrow { display: none; }
  .f2 { display: none; }
  .hero-cta { padding: 7px 13px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-track, .slide-text > *, .slide-media img, .slide-media video { transition: none !important; }
  .blob, .float { animation: none !important; }
}

/* ---------- a few more small animations ---------- */
.card { animation: cardIn .5s cubic-bezier(.22, 1, .36, 1) backwards; }
.grid .card:nth-child(2) { animation-delay: .04s; } .grid .card:nth-child(3) { animation-delay: .08s; }
.grid .card:nth-child(4) { animation-delay: .12s; } .grid .card:nth-child(5) { animation-delay: .16s; }
.grid .card:nth-child(6) { animation-delay: .2s; }  .grid .card:nth-child(n+7) { animation-delay: .24s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.btn-add .ic { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn-add:hover .ic { transform: rotate(90deg) scale(1.1); }
.chip { animation: cardIn .4s ease backwards; }
.badge:not([hidden]) { animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .card, .chip, .badge { animation: none !important; } }
@media (max-width: 600px) { .brand-logo, .logo-mark { width: 54px; height: 54px; } }

/* ================================================================
   Brighter yellow, header produce art, skeleton loading, login
   ================================================================ */
:root {
  --lime-bg: #FDFFD2;
  --lime-1: #F4FFB0;
  --lime-2: #E9FF8C;
  --lime-card: #FFFFF1;
  --lime-line: #E6F29A;
}

/* header: brighter sunny yellow with produce art in the empty middle */
.site-header {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #FFE14D 0%, #FFE866 42%, #F6FF8E 72%, #E8FF7C 100%);
  border-bottom: 1px solid rgba(214, 170, 0, .35);
}
.site-header::before {
  content: ""; position: absolute; top: 6px; bottom: 6px;
  left: clamp(380px, 36%, 470px); right: 190px;
  background: url("../images/header-art.svg") center / contain no-repeat;
  pointer-events: none; z-index: 0;
}
.site-header::after {  /* soft shine sweeping across */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%);
  transform: translateX(-100%); animation: shine 7s ease-in-out infinite 1.5s;
}
@keyframes shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.site-header .wrap { position: relative; z-index: 1; }
.brand-name {
  background: linear-gradient(100deg, #0A6B1E 0%, #11871F 44%, #D98200 56%, #E89400 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .7px rgba(10, 92, 26, .6);
}
.brand-tag { color: #5A3E00; }
.brand::after { display: none; }                      /* old sparkles replaced by the art */
@media (max-width: 900px) {
  .site-header::before { left: 42%; right: 150px; opacity: .8; }
}
@media (max-width: 600px) {
  .site-header::before { left: 0; right: 0; opacity: .28; }
}
@media (prefers-reduced-motion: reduce) { .site-header::after { animation: none; display: none; } }

/* ---------- skeleton while products load ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, #E4EFA6 0%, #F8FDD8 40%, #E4EFA6 80%);
  background-size: 250% 100%;
  animation: skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sk-chip { flex: none; width: 110px; height: 42px; border-radius: 999px; }
.sk-chip:nth-child(2n) { width: 140px; }
.sk-card {
  border-radius: 14px; overflow: hidden; background: var(--lime-card);
  border: 1px solid var(--lime-line); box-shadow: 0 6px 18px rgba(12, 131, 31, .06);
}
.sk-img { aspect-ratio: 4 / 3; border-radius: 0; }
.sk-body { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 12px; }
.sk-line.tall { height: 18px; margin-top: 4px; }
.w70 { width: 70%; } .w55 { width: 55%; } .w40 { width: 40%; }
.sk-btn { height: 40px; border-radius: 8px; margin-top: 4px; }
.sk-card:nth-child(3) .sk, .sk-card:nth-child(7) .sk { animation-delay: .12s; }
.sk-card:nth-child(4) .sk, .sk-card:nth-child(8) .sk { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- login dialog ---------- */
.auth { gap: 14px; }
.btn-google {
  background: #fff; color: #1F1F1F; border: 1.5px solid #DADCE0; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.btn-google:hover { background: #F8FAFF; border-color: #C6CBD3; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.g-logo { width: 20px; height: 20px; flex: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--lime-line); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--lime-1); }
.auth-tabs button {
  border: 0; background: transparent; padding: 9px; border-radius: 9px; cursor: pointer;
  font-weight: 600; color: var(--muted); transition: background .25s, color .25s, box-shadow .25s;
}
.auth-tabs button[aria-selected="true"] { background: #fff; color: var(--green-deep); box-shadow: 0 2px 8px rgba(12, 131, 31, .12); }
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 46px; }
.pass-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--muted); border-radius: 8px;
}
.pass-eye:hover { background: var(--lime-1); color: var(--green-deep); }
.pass-eye .ic { width: 20px; height: 20px; }
.small { font-size: .82rem; }

/* ================================================================
   Interaction effects (js/fx.js)
   ================================================================ */
/* press feel on everything tappable */
.btn, .icon-btn, .chip, .tab, .hero-cta, .mode button, .stepper button, .fav { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.btn:active, .icon-btn:active, .chip:active, .hero-cta:active, .mode button:active { transform: scale(.96); transition-duration: .08s; }
.stepper button:active { transform: scale(.85); }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .22; transform: scale(0);
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* fly-to-cart */
.fly-item {
  position: fixed; z-index: 9000; width: 64px; height: 64px; border-radius: 50%;
  background: #fff center / cover no-repeat; pointer-events: none;
  box-shadow: 0 8px 22px rgba(12, 131, 31, .35), 0 0 0 3px #fff, 0 0 0 5px var(--green);
  display: grid; place-items: center; color: var(--green);
}
.fly-item .ic { width: 30px; height: 30px; }
#btnCart.cart-glow { animation: cartGlow .7s ease; }
@keyframes cartGlow {
  0% { box-shadow: 0 0 0 0 rgba(248, 203, 70, .9); }
  100% { box-shadow: 0 0 0 16px rgba(248, 203, 70, 0); }
}
.icon-btn.bump { animation: bump .45s cubic-bezier(.34, 1.56, .64, 1), cartGlow .7s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-8deg); } 65% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1); } }
.badge.badge-pop { animation: pop .45s cubic-bezier(.34, 1.56, .64, 1); }

/* stepper + particles */
.stepper.fx-pulse { animation: stepPulse .35s ease; }
@keyframes stepPulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(31, 162, 58, .25); } 100% { transform: scale(1); } }
.stepper output { display: inline-block; }
.stepper.fx-pulse output { animation: numUp .3s ease; }
@keyframes numUp { from { transform: translateY(6px); opacity: .3; } to { transform: none; opacity: 1; } }
.fx-dot { position: fixed; z-index: 9001; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
.fav.pop .ic { animation: heartPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes heartPop { 0% { transform: scale(1); } 30% { transform: scale(.7); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* order placed celebration */
.order-done {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 20px;
  background: rgba(10, 60, 22, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease; overflow: hidden;
}
.order-done.show { opacity: 1; }
.done-card {
  position: relative; z-index: 2; width: min(340px, 100%); text-align: center; padding: 26px 22px 20px;
  background: linear-gradient(160deg, #FFFFF4, #F1FFC4); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25); transform: scale(.8) translateY(20px);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.order-done.show .done-card { transform: none; }
.done-card h2 { margin: 8px 0 2px; color: var(--forest); font-size: 1.6rem; }
.done-card p { margin: 2px 0; }
.done-card .btn { margin-top: 14px; }
.done-check { width: 86px; height: 86px; }
.done-check circle { stroke: var(--green); stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .6s ease-out .15s forwards; fill: #E8F8EA; }
.done-check path { stroke: var(--green); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s ease-out .65s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.rain { position: absolute; top: -40px; z-index: 1; animation: rain linear forwards; }
@keyframes rain { to { transform: translateY(115vh) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ripple, .fly-item, .fx-dot, .rain { display: none; }
  .done-card { transition: none; transform: none; }
  .done-check circle, .done-check path { animation: none; stroke-dashoffset: 0; }
}

/* ================================================================
   Banner text: smaller so the video shows · label hides in its icon
   ================================================================ */
.slide-text { max-width: min(430px, 50%); left: clamp(16px, 5vw, 66px); }
.slide-text h2 { font-size: clamp(1.1rem, 2.8vw, 2.15rem); line-height: 1.05; margin: 8px 0 4px; }
.slide-text p { font-size: clamp(.7rem, 1.1vw, .86rem); margin: 0 0 10px; max-width: 36ch; }
.hero-cta { padding: 7px 13px; font-size: .8rem; gap: 5px; }
.hero-cta .ic { width: 16px; height: 16px; }
.slide-shade { background: linear-gradient(90deg, rgba(6, 40, 14, .68) 0%, rgba(6, 40, 14, .32) 36%, rgba(6, 40, 14, 0) 58%); }

/* glass label = icon + text; text collapses INTO the icon */
.kicker {
  cursor: pointer; font: inherit; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  font-size: clamp(.62rem, 1vw, .74rem); gap: 0; padding: 4px;
  transition: padding .45s cubic-bezier(.65, 0, .35, 1), background .3s, box-shadow .3s;
}
.kicker:hover { background: rgba(255, 255, 255, .28); }
.kicker:focus-visible { outline: 2px solid var(--haldi); outline-offset: 2px; }
.k-ic { display: grid; place-items: center; flex: none; position: relative; z-index: 1; }
.kicker .k-ic .ic { width: 16px; height: 16px; }
.k-txt {
  display: inline-block; white-space: nowrap; overflow: hidden;
  max-width: 220px; padding: 0 8px 0 7px;
  transform-origin: 0% 50%;
  transition: max-width .5s cubic-bezier(.65, 0, .35, 1), opacity .35s ease, transform .5s cubic-bezier(.65, 0, .35, 1), padding .5s;
}
/* tucked: the words shrink and slide left into the icon, then the icon "gulps" */
.kicker.tucked { padding: 4px; }
.kicker.tucked .k-txt { max-width: 0; padding: 0; opacity: 0; transform: translateX(-26px) scale(.2); }
.kicker.tucked .k-ic { animation: gulp .55s cubic-bezier(.34, 1.56, .64, 1) .32s both; }
.kicker.tucked .k-ic::after {          /* soft ring every few seconds = "tap me" */
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(248, 203, 70, .9); opacity: 0;
  animation: tapHint 2.4s ease-out 1.2s infinite;
}
@keyframes gulp { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-10deg); } 60% { transform: scale(.9) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes tapHint { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* swing back out like a hanging sign */
.kicker.swing .k-txt { animation: swingOut .9s cubic-bezier(.3, 1.2, .5, 1); }
.kicker.swing .k-ic { animation: iconKick .5s ease; }
@keyframes swingOut {
  0%   { max-width: 0; opacity: 0; transform: translateX(-20px) rotate(-30deg) scale(.4); }
  35%  { max-width: 220px; opacity: 1; transform: translateX(0) rotate(14deg) scale(1.04); }
  55%  { transform: rotate(-8deg); }
  72%  { transform: rotate(4deg); }
  86%  { transform: rotate(-2deg); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes iconKick { 0% { transform: rotate(0); } 40% { transform: rotate(-18deg) scale(1.15); } 100% { transform: rotate(0); } }

@media (max-width: 600px) {
  .hero { height: 200px; }
  .slide-text { max-width: 64%; }
  .slide-text h2 { font-size: 1.05rem; }
  .hero-cta { padding: 6px 11px; font-size: .74rem; }
  .hero-cta + .hero-cta { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .kicker.tucked .k-ic, .kicker.swing .k-txt, .kicker.swing .k-ic, .kicker.tucked .k-ic::after { animation: none; }
}

/* ================================================================
   Admin reports, rates editor, cash, rider extras
   ================================================================ */
.stat small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.stat-wide { grid-column: 1 / -1; }
.stat.due { background: linear-gradient(145deg, #FFF6D6, #FFE9A8); border-color: #F2C94C; }
.stat.due b { color: #9A5B00; }

.chart-wrap { overflow-x: auto; }
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--lime-line); stroke-width: 1.5; }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: barUp .6s cubic-bezier(.22, 1, .36, 1) backwards; }
.chart .bar:hover { filter: brightness(1.12); }
.chart .bar-val { font-size: 10px; font-weight: 700; fill: var(--forest); }
.chart .bar-lbl { font-size: 10px; fill: var(--muted); }
@keyframes barUp { from { transform: scaleY(0); } }

.split-bar { height: 16px; border-radius: 99px; background: linear-gradient(90deg, #FFD65C, #E89400); overflow: hidden; margin-bottom: 8px; }
.split-bar span { display: block; height: 100%; background: linear-gradient(90deg, #3DBB57, #0A6B1E); border-radius: 99px 0 0 99px; transition: width .6s ease; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dot.g { background: #1FA23A; } .dot.y { background: #E8A100; }

.top-list { display: flex; flex-direction: column; gap: 12px; }
.top-row { display: flex; gap: 12px; align-items: flex-start; }
.rank { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--lime-1); color: var(--green-deep); }
.top-row:nth-child(1) .rank { background: linear-gradient(135deg, #FFE27F, #F2A900); color: #5A3E00; }
.top-row:nth-child(2) .rank { background: #E6E9E6; } .top-row:nth-child(3) .rank { background: #F3D2B3; }
.top-bar { height: 8px; border-radius: 99px; background: var(--lime-1); overflow: hidden; margin: 5px 0 3px; }
.top-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3DBB57, #F8CB46); animation: grow .7s ease backwards; }
@keyframes grow { from { width: 0; } }

.tbl.rates input[type=number] { width: 92px; text-align: right; padding: 7px 8px; }
.tbl.rates tr.dirty td { background: #FFF6C8; }
.tbl.rates tr.dirty td:first-child { box-shadow: inset 4px 0 0 #F2A900; }
[data-save]:not(:disabled) { animation: savePulse 1.6s ease infinite; }
@keyframes savePulse { 0%, 100% { box-shadow: 0 4px 12px rgba(12, 131, 31, .22); } 50% { box-shadow: 0 0 0 6px rgba(31, 162, 58, .18); } }

.cash-amt { text-align: right; font-weight: 800; font-size: 1.1rem; color: var(--muted); margin-right: 8px; }
.cash-amt span { display: block; font-size: .75rem; font-weight: 500; }
.cash-amt.due { color: #9A5B00; }

.issue-box { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: #8E1B12; border: 1px solid #F4C3BC; font-size: .9rem; margin-top: 6px; }
.issue-box .ic { flex: none; width: 20px; height: 20px; color: var(--danger); }
.issue-flag { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: .75rem; font-weight: 700; color: var(--danger); animation: blink 1.4s ease infinite; }
.issue-flag .ic { width: 14px; height: 14px; }
@keyframes blink { 50% { opacity: .45; } }

.far { margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 700; color: var(--green-deep); background: var(--lime-1); padding: 2px 8px; border-radius: 99px; }
.far .ic { width: 14px; height: 14px; }
.week-row { display: grid; grid-template-columns: 110px 1fr 30px; gap: 10px; align-items: center; font-size: .88rem; margin-bottom: 6px; }
.week-row .top-bar { margin: 0; }
.reason-list { display: grid; gap: 8px; }
.reason { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--lime-line); background: var(--lime-card); cursor: pointer; transition: border-color .2s, background .2s; }
.reason:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }
.reason input { accent-color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .chart .bar, .top-bar span, .issue-flag, [data-save]:not(:disabled) { animation: none; } }
.top-row .grow { flex: 1; min-width: 0; }

/* ================================================================
   Customer features: picks, new badge, notify me, voice, slots,
   ratings, buy again, WhatsApp
   ================================================================ */
/* NEW / back in stock */
.fresh-tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; margin-bottom: 2px;
}
.fresh-tag.new { background: linear-gradient(135deg, #FFE27F, #F8CB46); color: #5A3E00; animation: newGlow 2.2s ease-in-out infinite; }
.fresh-tag.back { background: linear-gradient(135deg, #D8F5DC, #B8EBC0); color: var(--green-deep); }
@keyframes newGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 203, 70, .6); } 50% { box-shadow: 0 0 0 5px rgba(248, 203, 70, 0); } }
.chip-new { border-color: #F2C94C !important; background: linear-gradient(145deg, #FFF6C8, #FFE27F) !important; }
.chip-new[aria-pressed="true"] { background: linear-gradient(135deg, #F8CB46, #E8A100) !important; color: var(--forest) !important; }

/* out of stock + notify me */
.card.oos .card-img img { filter: grayscale(.7) opacity(.75); }
.notify-btn { border-style: dashed; color: var(--green-deep); }
.notify-btn.on { border-style: solid; background: linear-gradient(135deg, #FFF6C8, #FFE9A8); border-color: #F2C94C; color: #7A4B00; }
.notify-btn.on .ic { animation: ring .8s ease; }

/* top picks row */
.picks { margin: 6px 0 12px; }
.picks-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.picks-head h2 { margin: 0; font-size: 1.15rem; color: var(--forest); display: inline-flex; align-items: center; gap: 6px; }
.picks-head h2 .ic { color: #E8A100; width: 20px; height: 20px; }
.picks-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.picks-row .card { scroll-snap-align: start; }
.pick-note { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; color: #9A5B00; }
.pick-note .ic { width: 12px; height: 12px; }

/* voice search */
.search .mic {
  position: absolute; right: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--lime-1); color: var(--green-deep);
  transition: background .2s, color .2s, transform .2s;
}
.search .mic .ic { position: static; width: 20px; height: 20px; color: inherit; }
.search .mic:hover { background: var(--green); color: #fff; }
.search .mic.listening { background: var(--danger); color: #fff; animation: micPulse 1.1s ease-out infinite; }
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(217, 48, 37, .5); } 100% { box-shadow: 0 0 0 14px rgba(217, 48, 37, 0); } }
.search:has(.mic:not([hidden])) input { padding-right: 48px; }

/* delivery time */
.need { font-size: .75rem; font-weight: 700; color: var(--danger); animation: blink 1.4s ease infinite; }
.slot-days { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.slot-day { flex: none; border: 1.5px solid var(--lime-line); background: var(--lime-card); border-radius: 99px; padding: 7px 14px; font-weight: 600; cursor: pointer; }
.slot-day[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--lime-line); background: #fff;
  transition: border-color .2s, background .2s, transform .2s;
}
.slot span { font-size: .82rem; color: var(--muted); }
.slot small { font-size: .7rem; color: var(--danger); font-weight: 700; }
.slot:hover:not(:disabled) { border-color: var(--green); transform: translateY(-1px); }
.slot[aria-pressed="true"] { border-color: var(--green); background: linear-gradient(145deg, #E9F8EC, #D2F1D8); box-shadow: 0 0 0 3px rgba(31, 162, 58, .15); }
.slot[aria-pressed="true"] span { color: var(--green-deep); }
.slot:disabled { opacity: .45; cursor: not-allowed; }
.when { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #FFF6C8; border: 1px solid #F2DD8A; font-size: .9rem; }
.when .ic { flex: none; width: 18px; height: 18px; color: #9A5B00; }
.slot-pill { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: .74rem; font-weight: 700; color: #7A4B00; background: #FFF1B8; padding: 1px 7px; border-radius: 99px; }
.slot-pill .ic { width: 12px; height: 12px; }
.slot-edit { display: grid; gap: 8px; }
.slot-row { display: grid; grid-template-columns: minmax(110px, 1fr) 150px auto 150px 40px; gap: 8px; align-items: center; }
@media (max-width: 600px) { .slot-row { grid-template-columns: 1fr 1fr; } .slot-row .muted { display: none; } }

/* ratings */
.review { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: linear-gradient(145deg, #FFFBE6, #FFF1B8); border: 1px solid #F2DD8A; }
.review.done { flex-direction: row; align-items: center; gap: 12px; }
.review.done > div:nth-child(2) { flex: 1; }
.stars { display: flex; gap: 4px; }
.stars button { border: 0; background: transparent; cursor: pointer; padding: 2px; color: #D9CFA5; transition: transform .15s, color .15s; }
.stars button .ic { width: 34px; height: 34px; fill: currentColor; }
.stars button.on { color: #F2A900; }
.stars button:hover { transform: scale(1.12); }
.stars button.pop { animation: heartPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.stars-show { display: inline-flex; gap: 1px; color: #D9CFA5; vertical-align: middle; }
.stars-show .ic { width: 18px; height: 18px; fill: currentColor; }
.stars-show.sm .ic { width: 14px; height: 14px; }
.stars-show .on { color: #F2A900; }
.star-word { font-weight: 700; min-height: 1.2em; }
.rev-summary { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.rev-big { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; }
.rev-big b { font-size: 2.6rem; line-height: 1; color: var(--forest); font-family: var(--serif); }
.rev-dist { flex: 1; min-width: 180px; }
.rev-item.low { background: #FFF1F0; border-radius: 10px; }

/* buy again + mini actions */
.mini-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  padding: 4px 10px; border-radius: 99px; border: 1.5px solid var(--green); background: #fff; color: var(--green-deep);
  transition: background .2s, color .2s, transform .15s;
}
.chip-btn .ic { width: 14px; height: 14px; }
.chip-btn:hover { background: var(--green); color: #fff; }
.chip-btn:active { transform: scale(.94); }
.chip-btn.gold { border-color: #E8A100; color: #7A4B00; }
.chip-btn.gold:hover { background: #F8CB46; color: var(--forest); }

/* WhatsApp */
.btn-wa { background: #25D366; color: #fff; border-color: transparent; }
.btn-wa:hover { background: #1EBE5A; box-shadow: 0 8px 20px rgba(37, 211, 102, .35); }
.wa-float {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 0; height: 54px; padding: 0 15px; border-radius: 99px;
  background: #25D366; color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45); overflow: hidden;
  animation: waIn .6s cubic-bezier(.34, 1.56, .64, 1) 1.5s backwards;
  transition: gap .3s ease, padding .3s ease, transform .2s;
}
.wa-float[hidden] { display: none; }
.wa-float .ic { width: 26px; height: 26px; flex: none; }
.wa-float span { max-width: 0; white-space: nowrap; overflow: hidden; transition: max-width .35s ease; }
.wa-float:hover, .wa-float:focus-visible { gap: 8px; padding-right: 18px; }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 140px; }
.wa-float:active { transform: scale(.95); }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: waRing 2.8s ease-out 3s infinite; }
@keyframes waIn { from { transform: scale(0) rotate(-90deg); } }
@keyframes waRing { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 60%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } }
body:has(dialog[open]) .wa-float { display: none; }
@media print { .wa-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .fresh-tag.new, .wa-float, .wa-float::after, .search .mic.listening, .need { animation: none; } }

/* activity log */
.act-item { align-items: flex-start; border-left: 3px solid var(--lime-line); }
.act-insert { border-left-color: var(--green); }
.act-update { border-left-color: var(--haldi); }
.act-delete { border-left-color: var(--danger); }
.act-changes { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 3px; }
.act-changes span { font-size: .78rem; background: var(--lime-1); border-radius: 99px; padding: 2px 9px; }
.act-changes i { font-style: normal; color: var(--muted); }


/* ================================================================
   Fixes: cleaner tap feedback, smaller heart, no clipped corners
   ================================================================ */
/* tapping a product must not draw a box around the card */
.card, .card-img, .card-img:focus, .card-img:focus-visible, .card *:focus:not(:focus-visible) { outline: none; }
.card-img:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.card { -webkit-tap-highlight-color: transparent; }
.card:active { transform: scale(.995); }
.card-img::after { display: none; }          /* the four corner brackets confused people */

/* heart */
.fav {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(229, 57, 53, .18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
  overflow: visible;
}
.fav .ic { width: 16px; height: 16px; }
.fav:hover { transform: scale(1.06); background: #fff; }
.picks-row .card .fav { top: 5px; right: 5px; width: 28px; height: 28px; }
.picks-row .card .fav .ic { width: 15px; height: 15px; }

/* tags keep clear of the heart */
.card .tag { max-width: calc(100% - 46px); }

/* small phones: search gets its own full-width row, Favourites becomes an icon */
@media (max-width: 430px) {
  .toolbar { flex-wrap: nowrap; gap: 8px; }
  .search { flex: 1 1 auto; min-width: 0; }
  #btnFavOnly { flex: none; padding: 9px 12px; }
  #btnFavOnly span { display: none; }
  .brand-name { font-size: 1.25rem; white-space: nowrap; }
  .brand-tag {
    font-size: .7rem; margin-top: 2px; line-height: 1.25;
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .brand-logo, .logo-mark { width: 46px; height: 46px; border-width: 2px; }
  .head-actions { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn .ic { width: 21px; height: 21px; }
  .picks-row { grid-auto-columns: minmax(150px, 160px); }
}
@media (max-width: 360px) {
  .tab { padding: 9px 10px; font-size: .92rem; }
  .mode button { padding: 5px 9px; font-size: .8rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card h3 { font-size: .92rem; }
}

/* phone alerts */
.alerts-card {
  display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(145deg, #FFFBE6, #FFF1B8); border: 1px solid #F2DD8A;
}
.alerts-card.on { background: linear-gradient(145deg, #EAF8EC, #D2F1D8); border-color: #A5D6A7; }
.alerts-card > .ic { flex: none; width: 24px; height: 24px; color: #9A5B00; }
.alerts-card.on > .ic { color: var(--green-deep); animation: ring 1s ease; }
.push-btn.on { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; border-color: transparent; }
.push-btn.on .ic { animation: ring .8s ease; }


/* ================================================================
   Fixes round: quantity sheet, softer notes, clearer heart
   ================================================================ */
.stepper output { cursor: pointer; user-select: none; }
.stepper output:hover { text-decoration: underline; text-underline-offset: 3px; }
.qty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.qty-opt {
  padding: 12px 8px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: .95rem;
  border: 1.5px solid var(--lime-line); background: var(--lime-card); color: var(--forest);
  transition: transform .15s, border-color .2s, background .2s;
}
.qty-opt:hover { border-color: var(--green); transform: translateY(-1px); }
.qty-opt.on { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; border-color: transparent; }

/* plain text, no box */
.soft-note { margin: 6px 2px 0; font-size: .88rem; color: var(--green-deep); }

/* delivery time is optional now */
.pick-time summary { cursor: pointer; font-weight: 600; color: var(--green-deep); padding: 4px 0; }
.pick-time[open] summary { margin-bottom: 2px; }

/* heart: clearly on or off */
.fav { color: #B9A98A; }
.fav .ic { fill: none; }
.fav.on { background: #FFE9E7; border-color: rgba(229, 57, 53, .45); color: var(--tomato); }
.fav.on .ic { fill: currentColor; }

/* policy pages */
.page-text { line-height: 1.7; }
.page-text p { margin: 0 0 12px; }

/* ---------- simple address form (v10) ---------- */
/* Map tools float over the map so the picture stays as large as possible. */
.map-wrap { position: relative; }
.map-wrap .map { height: 320px; }
.map-tools {
  position: absolute; right: 8px; top: 8px; z-index: 400;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.map-btn {
  min-height: 34px; padding: 6px 10px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font: inherit; font-size: .82rem; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  display: inline-flex; align-items: center; gap: 4px;
}
.map-btn[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.map-btn .ic { width: 18px; height: 18px; }
.map-btn:disabled { opacity: .6; }

/* Town chips: one tap instead of four typed boxes.
   NOTE: these are deliberately NOT called .chip/.chips — those names already
   belong to the category filter row on the home page. Reusing them silently
   rewrote that row's layout. One generic class name, two owners, one bug. */
.town-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.town-chip {
  min-height: 40px; padding: 8px 14px; cursor: pointer;
  border: 1.5px solid var(--lime-line); border-radius: 999px; background: #fff;
  font: inherit; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s, border-color .2s;
}
.town-chip .ic { width: 17px; height: 17px; }
.town-chip:active { transform: scale(.96); }
.town-chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* The address box is the main input now, so give it room. */
.field textarea[name="house"] { min-height: 88px; line-height: 1.45; }

/* Delivery time: the summary line takes the space, the gear sits at the end. */
.panel-head .grow { flex: 1 1 auto; text-align: right; }