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

:root {
  --bg: #f3ece4; --bg2: #e8ddd2; --card: #fffaf4; --ink: #1a120d;
  --mut: #6d5e53; --line: #e4d6c8; --accent: #c24d16; --accent-2: #ee8a3c;
  --deep: #8a330c; --ok: #157a4a; --header: #1c120c;
  --r: 22px; --rs: 14px;
  --sh: 0 4px 10px rgba(138,51,12,.06), 0 18px 40px rgba(138,51,12,.1);
  --spring: cubic-bezier(.34,1.4,.64,1); --ease: cubic-bezier(.22,.7,.36,1);
  --safe: env(safe-area-inset-bottom, 0px);
  --z-head: 50; --z-dock: 70; --z-toast: 90; --z-veil: 100;
  --mx: 50%; --my: 30%;
}
[data-theme="dark"] {
  --bg: #140e0a; --bg2: #1d1510; --card: #231910; --ink: #f8f0e6;
  --mut: #b9a594; --line: #3a2b20; --accent: #ee8a3c; --accent-2: #f4a56a;
  --deep: #ffc08a; --ok: #4ad08a; --header: #0c0805;
  --sh: 0 8px 28px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 15.5px/1.45 Outfit, system-ui, sans-serif;
  padding-bottom: calc(92px + var(--safe));
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(520px 380px at var(--mx) var(--my), rgba(238,138,60,.14), transparent 62%);
  transition: background .12s linear;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: fixed; top: -70px; left: 12px; z-index: 110; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.veil {
  position: fixed; inset: 0; z-index: var(--z-veil); background: var(--header);
  display: grid; place-items: center; color: #f4d3b0; font-weight: 800; letter-spacing: -.04em; font-size: 1.4rem;
  animation: veilOut .7s var(--ease) .35s forwards;
}
.veil span { animation: pulse 1s var(--spring) infinite; }
@keyframes veilOut { to { opacity: 0; visibility: hidden; } }
@keyframes pulse { 50% { transform: scale(1.06); opacity: .7; } }

.top {
  position: sticky; top: 0; z-index: var(--z-head);
  background: var(--header);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 12px 32px rgba(20,10,4,.35);
  transition: border-radius .35s var(--ease), transform .35s var(--ease);
}
.top.condensed { border-radius: 0 0 16px 16px; }
.bar { max-width: 760px; margin: auto; padding: 14px 16px 10px; display: grid; gap: 10px; }
.logo { display: flex; align-items: center; justify-content: space-between; color: #fdf6ee; }
.logo strong { font-size: 1.2rem; font-weight: 900; letter-spacing: -.045em; display: flex; align-items: center; gap: 8px; }
.mark {
  width: 32px; height: 32px; border-radius: 11px;
  background: linear-gradient(135deg, #f4a56a, #c24d16);
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 900;
  box-shadow: 0 6px 14px rgba(238,138,60,.5); animation: markBob 3.2s var(--spring) infinite;
}
@keyframes markBob { 50% { transform: translateY(-2px) rotate(-8deg); } }
.pinchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #ffd9bd; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
}
.pinchip i { width: 7px; height: 7px; border-radius: 50%; background: #57d98f; display: block; animation: blip 2s infinite; }
@keyframes blip { 50% { opacity: .4; transform: scale(.7); } }
.find { position: relative; }
.find input {
  width: 100%; min-height: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 0 16px 0 44px; background: rgba(255,255,255,.07); color: #fdf6ee;
  font: 500 15px Outfit, sans-serif; transition: background .25s, transform .2s var(--spring);
}
.find input:focus { outline: none; background: rgba(255,255,255,.14); transform: scale(1.01); }
.find input::placeholder { color: rgba(253,246,238,.5); }
.find::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid rgba(253,246,238,.55); border-radius: 50%; pointer-events: none; }
.find::after { content: ""; position: absolute; left: 30px; top: 62%; width: 7px; height: 2px; background: rgba(253,246,238,.55); rotate: 45deg; pointer-events: none; }
.tools { display: none; }

.ticker { overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); }
.ticker-track { display: flex; gap: 40px; width: max-content; padding: 8px 0; color: #ffdcc0; font-size: 12px; font-weight: 650; animation: tick 28s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }

.hero-wrap { max-width: 760px; margin: auto; padding: 16px 16px 0; perspective: 900px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 28px 22px 26px; min-height: 178px; color: #fff;
  background: #6e2a0a;
  box-shadow: 0 22px 50px rgba(138,51,12,.38);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .15s linear;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; pointer-events: none; mix-blend-mode: screen;
}
.orb.a { width: 180px; height: 180px; top: -50px; right: -30px; background: radial-gradient(circle, #f4a56a, transparent 70%); animation: float 7s ease-in-out infinite; }
.orb.b { width: 140px; height: 140px; bottom: -40px; left: -20px; background: radial-gradient(circle, #ee8a3c, transparent 70%); animation: float 9s ease-in-out infinite reverse; }
.orb.c { width: 90px; height: 90px; top: 40%; left: 42%; background: radial-gradient(circle, #ffd9bd, transparent 70%); animation: float 5s ease-in-out infinite 1s; opacity: .5; }
@keyframes float { 50% { transform: translate(12px, -16px) scale(1.08); } }
.hero h1, .hero p, .hero .cta-row { position: relative; z-index: 1; }
.hero h1 { margin: 0 0 8px; font-size: clamp(1.55rem, 6.4vw, 2.15rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.05; text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffe7c8, #ffb36a 60%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0; opacity: .92; font-size: 14px; max-width: 34ch; text-wrap: pretty; }
.cta-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 15px;
  font: 700 14px Outfit, sans-serif;
  transition: transform .18s var(--spring), box-shadow .25s, filter .2s;
}
.btn:active { transform: scale(.95) translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: 0 10px 22px rgba(194,77,22,.4); }
.btn.dark { background: #1a120d; color: #f8f0e6; }
.btn.ghost { background: transparent; border: 1.5px solid var(--line); }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 12.5px; border-radius: 12px; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: rgba(255,255,255,.4); transform: scale(0); animation: rip .5s var(--ease) forwards; }
@keyframes rip { to { transform: scale(3.2); opacity: 0; } }

.cats { max-width: 760px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 16px 2px; }
.cat {
  background: var(--card); border-radius: 20px; padding: 14px 6px 12px; text-align: center;
  box-shadow: var(--sh); transition: transform .22s var(--spring);
}
.cat:active { transform: scale(.92); }
.cat svg { width: 28px; height: 28px; margin: 0 auto 6px; display: block; }
.cat span { display: block; font-size: 11px; font-weight: 700; color: var(--mut); }

.stores, .rail {
  display: flex; gap: 12px; overflow-x: auto; padding: 14px 16px;
  max-width: 776px; margin: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.stores::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
.store {
  flex: 0 0 auto; width: 86px; scroll-snap-align: start;
  background: var(--card); border-radius: 20px; padding: 13px 8px; text-align: center;
  box-shadow: var(--sh); transition: transform .22s var(--spring);
}
.store:active { transform: scale(.9) rotate(-2deg); }
.store b {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 7px;
  border-radius: 15px; color: #fff; font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px rgba(0,0,0,.18);
}
.store span { font-size: 11px; font-weight: 700; color: var(--mut); }
.rail .card { flex: 0 0 168px; scroll-snap-align: start; }

main { max-width: 760px; margin: auto; }
.sec { padding: 12px 16px 4px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 12px; }
.sec-h h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.035em; }
.sec-h h2::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.sec-h a { color: var(--accent); font-size: 13px; font-weight: 700; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card {
  background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  display: flex; flex-direction: column; transform-style: preserve-3d;
  transition: box-shadow .3s var(--ease);
  will-change: transform;
}
.card-img { position: relative; display: block; aspect-ratio: 1; background: var(--bg2); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card-img img { transform: scale(1.08); }
.ph { display: block; height: 100%; background: linear-gradient(110deg, var(--bg2) 40%, #fff 50%, var(--bg2) 60%); background-size: 220% 100%; animation: shine 1.3s linear infinite; }
@keyframes shine { to { background-position: -80% 0; } }
.badge {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff;
  border-radius: 9px; padding: 5px 8px; font-size: 11px; font-weight: 800;
  box-shadow: 0 6px 14px rgba(194,77,22,.4);
}
.badge.fast { top: auto; bottom: 9px; left: 9px; background: var(--ok); }
.badge.ad { left: auto; right: 9px; background: rgba(28,18,12,.78); color: #ffd9ae; }
.card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.merch { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
h3 { margin: 0; font-size: .92rem; font-weight: 650; line-height: 1.28; }
h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.price { margin: 0; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.price strong { font-size: 1.12rem; font-weight: 900; }
.price s { color: var(--mut); font-size: 12px; }
.save-chip { font-size: 10.5px; font-weight: 700; color: var(--ok); background: rgba(21,122,74,.12); padding: 2px 7px; border-radius: 999px; width: fit-content; }
.code {
  width: 100%; min-height: 44px; border: 1.5px dashed rgba(194,77,22,.5); border-radius: 11px;
  background: rgba(194,77,22,.06); color: var(--deep); font: 700 12px Outfit, sans-serif; letter-spacing: .05em;
}
.actions { margin-top: auto; padding-top: 6px; }
.card.local .card-body { padding: 15px; }
.card.local h3, .card.local h3 a { min-height: 0; font-size: 1.02rem; }

.filters { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; }
.filters a, .filters button, .filters select, .filters label {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; font: 650 13px Outfit, sans-serif;
}
.filters .on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.empty {
  margin: 4px 0; background: var(--card); border-radius: 26px; padding: 32px 20px;
  text-align: center; box-shadow: var(--sh); position: relative; overflow: hidden;
}
.empty::before { content: "₹"; position: absolute; right: -10px; bottom: -28px; font-size: 118px; font-weight: 900; color: rgba(194,77,22,.08); line-height: 1; }
.empty strong { display: block; font-size: 1.16rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -.03em; }
.empty p { color: var(--mut); font-size: 13.5px; margin: 0 auto; max-width: 34ch; }
.empty .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.dock {
  position: fixed; left: 50%; bottom: calc(12px + var(--safe)); z-index: var(--z-dock);
  translate: -50% 0; width: min(420px, calc(100% - 22px));
  background: rgba(255,250,244,.9); border: 1px solid rgba(26,18,13,.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 26px; box-shadow: 0 -8px 30px rgba(26,18,13,.14);
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px;
}
[data-theme="dark"] .dock { background: rgba(35,25,16,.9); border-color: rgba(255,255,255,.08); }
.dock a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px; border-radius: 18px; font-size: 10.5px; font-weight: 700; color: var(--mut);
  transition: color .2s, background .2s, transform .2s var(--spring);
}
.dock svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--spring); }
.dock a.on { color: var(--accent); background: rgba(194,77,22,.08); }
.dock a.on svg { transform: translateY(-2px) scale(1.08); }
.dock a:active { transform: scale(.9); }

.foot { max-width: 760px; margin: 20px auto 0; padding: 20px; font-size: 12px; color: var(--mut); text-align: center; }
.foot a { margin: 0 7px; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.toast {
  position: fixed; left: 50%; bottom: calc(100px + var(--safe)); z-index: var(--z-toast);
  translate: -50% 18px; opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 650; box-shadow: 0 14px 32px rgba(0,0,0,.28);
  transition: translate .32s var(--spring), opacity .25s;
}
.toast.show { translate: -50% 0; opacity: 1; }
/* Offline banner — mirrors app/videos offline pattern (client-side only). */
.offline-bar {
  position: fixed; left: 50%; bottom: calc(86px + var(--safe)); z-index: var(--z-toast);
  translate: -50% 0; background: #3a2a18; color: #ffe3c4; padding: 10px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; box-shadow: 0 14px 32px rgba(0,0,0,.28);
  border: 1px solid rgba(255,227,196,.35); max-width: calc(100% - 32px); text-align: center;
}
.offline-bar[hidden] { display: none; }
/* Client-side list search (local.php) — ≥44px target, matches .form inputs. */
.list-search { padding: 12px 16px 0; }
.list-search input {
  width: 100%; min-height: 44px; padding: 12px 14px 12px 42px; border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--ink); font: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7a68' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px;
}
.list-count { padding: 8px 18px 0; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.burst { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 95; animation: burst .7s var(--ease) forwards; }
@keyframes burst { to { transform: translate(var(--bx), var(--by)) scale(.2); opacity: 0; } }

.form { display: grid; gap: 11px; padding: 16px; }
.form input, .form select, .form textarea {
  min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); font: inherit;
}
table { width: 100%; border-collapse: collapse; background: var(--card); }

.reveal { opacity: 0; transform: translateY(24px) scale(.97); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .65s var(--spring); transition-delay: var(--d, 0ms); }
.page-in main > * { animation: rise .55s var(--spring) both; }
.page-in main > *:nth-child(2) { animation-delay: 50ms; }
.page-in main > *:nth-child(3) { animation-delay: 100ms; }
.page-in main > *:nth-child(4) { animation-delay: 150ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .veil { opacity: 1; visibility: visible; transform: none; }
  .veil { display: none; }
}
@media (min-width: 720px) {
  .tools { display: flex; gap: 8px; position: absolute; top: 16px; right: 18px; }
  .tools select, .tools .btn { min-height: 38px; background: rgba(255,255,255,.1); color: #fdf6ee; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .cats { grid-template-columns: repeat(8, 1fr); }
}