/* ============================================================
   Milano Kafe — Liquid Glass design system (iOS 26 inspired)
   Dark / Light via [data-theme]. Smooth, low-jank animations.
   ============================================================ */
:root {
  --bg: #eef1f7;
  --bg2: #e3e8f2;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.7);
  --text: #0d1220;
  --muted: #5b6478;
  --brand: #e23744;
  --brand2: #ff6b35;
  --accent: #1d9bf0;
  --green: #1db954;
  --shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.18);
  --radius: 22px;
  --radius-sm: 14px;
  --blur: 22px;
  --nav-h: 72px;
  /* iOS 26-style springs */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] {
  --bg: #0a0c12;
  --bg2: #11141d;
  --glass: rgba(28, 32, 44, 0.55);
  --glass-strong: rgba(28, 32, 44, 0.82);
  --glass-border: rgba(255, 255, 255, 0.10);
  --text: #f3f5fb;
  --muted: #9aa3b8;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Inter", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  transition: background .5s ease, color .3s ease;
}

/* Animated liquid background blobs — subtle, premium */
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg-orbs span {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: .22;
  animation: float 26s ease-in-out infinite;
}
[data-theme="dark"] .bg-orbs span { opacity: .30; }
.bg-orbs span:nth-child(1){ width:480px;height:480px;background:var(--brand);top:-160px;left:-120px;}
.bg-orbs span:nth-child(2){ width:420px;height:420px;background:var(--brand2);bottom:-140px;right:-100px;animation-delay:-9s;}
.bg-orbs span:nth-child(3){ width:340px;height:340px;background:var(--accent);top:45%;left:60%;animation-delay:-18s;}
@keyframes float {
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(30px,-24px) scale(1.06); }
  66%{ transform: translate(-24px,30px) scale(.97); }
}

/* ---------- Icons ---------- */
.ic {
  width: 1.25em; height: 1.25em; display: inline-block; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em;
}
.ic-fill { fill: currentColor; stroke: currentColor; }
.btn .ic, .nav-links a .ic { width: 1.1em; height: 1.1em; }
.ic-lg { width: 1.6em; height: 1.6em; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, 92%); margin: 0 auto; }
@media (min-width:1500px){ .container { width: min(1320px, 90%); } }

/* ---------- Glass surfaces ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass-strong { background: var(--glass-strong); }

/* ---------- Top navbar (desktop / tablet) ---------- */
.topbar {
  position: sticky; top: 14px; z-index: 100;
  margin: 14px auto; width: min(1180px, 94%);
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; border-radius: 999px;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; }
.brand .logo {
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:900;
  box-shadow:0 4px 14px rgba(226,55,68,.5);
}
.brand b { background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-links { display:flex; gap:6px; margin-left:auto; }
.nav-links a {
  padding:9px 16px; border-radius:999px; font-weight:600; color:var(--muted);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(125,125,145,.14); }
.nav-actions { display:flex; align-items:center; gap:8px; }

.icon-btn {
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--glass-border); background:var(--glass);
  cursor:pointer; font-size:1.15rem; color:var(--text);
  transition: transform .2s, background .2s;
}
.icon-btn:hover { transform: scale(1.08); background:var(--glass-strong); }
.icon-btn .badge {
  position:absolute; transform:translate(14px,-14px);
  background:var(--brand); color:#fff; font-size:.65rem; font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;
}

.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 20px; border-radius:999px; font-weight:700; cursor:pointer;
  border:none; font-size:.95rem; transition: transform .2s, box-shadow .25s, filter .2s;
}
.btn:active { transform: scale(.96); }
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 8px 24px rgba(226,55,68,.4); }
.btn-primary:hover { filter:brightness(1.06); box-shadow:0 12px 30px rgba(226,55,68,.5); }
.btn-ghost { background:var(--glass); border:1px solid var(--glass-border); color:var(--text); }
.btn-block { width:100%; }
.btn-lg { padding:15px 26px; font-size:1.05rem; }
.btn-sm { padding:9px 12px; font-size:.85rem; border-radius:12px; }
.btn-sm .ic { width:1.05em; height:1.05em; }

.lang-switch { display:flex; gap:2px; padding:4px; border-radius:999px; }
.lang-switch a { padding:5px 10px; border-radius:999px; font-size:.78rem; font-weight:700; color:var(--muted); }
.lang-switch a.active { background:var(--brand); color:#fff; }

/* ---------- Hero ---------- */
.hero {
  margin:22px auto; padding:48px 36px; border-radius:32px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:18px;
}
.hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:900; line-height:1.05; letter-spacing:-1px; }
.hero p { font-size:1.1rem; color:var(--muted); max-width:560px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); font-size:.85rem; font-weight:600; }

/* ---------- Section headers ---------- */
.section { margin:34px auto; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-head h2 { font-size:1.55rem; font-weight:800; letter-spacing:-.5px; }
.section-head a { color:var(--brand); font-weight:700; font-size:.9rem; }

/* ---------- Category pills ---------- */
.cats { display:flex; gap:10px; overflow-x:auto; padding:6px 2px; scrollbar-width:none; }
.cats::-webkit-scrollbar{ display:none; }
/* Sticky, blurred category bar on the menu page */
.cats.sticky-cats {
  position:sticky; top:8px; z-index:40; padding:10px;
  border-radius:18px; background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow);
}
.cat-pill {
  flex:0 0 auto; padding:10px 18px; border-radius:999px; font-weight:700;
  background:var(--glass); border:1px solid var(--glass-border); cursor:pointer;
  transition: all .25s; display:flex; align-items:center; gap:7px;
}
.cat-pill:hover { transform:translateY(-2px); }
.cat-pill.active { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-color:transparent; }

/* ---------- Cards grid ---------- */
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.card {
  border-radius:var(--radius); overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  animation: rise .5s both;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
@keyframes rise { from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:none;} }
.card .thumb { display:block; aspect-ratio: 1/1; background:linear-gradient(135deg,var(--bg2),var(--glass)); position:relative; overflow:hidden; }
.card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.card:hover .thumb img { transform: scale(1.07); }
/* Placeholder when no photo: soft gradient + line icon */
.thumb-ph {
  width:100%; height:100%; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(226,55,68,.16), transparent 55%),
    radial-gradient(120% 120% at 80% 90%, rgba(255,107,53,.18), transparent 55%),
    var(--bg2);
}
.thumb-ph .ic { width:34%; height:34%; color:var(--brand); opacity:.55; stroke-width:1.5; }
.card .heart {
  position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--glass-strong); cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--text);
  transition: transform .2s, color .2s;
}
.card .heart:hover { transform:scale(1.15); }
.card .heart.on { color:var(--brand); }
.heart.on { color:var(--brand); }
.heart.on .ic { fill:currentColor; }
.card .disc { position:absolute; top:10px; left:10px; background:var(--brand); color:#fff; font-weight:800; font-size:.75rem; padding:4px 10px; border-radius:999px; }
.card .body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .body h3 { font-size:.98rem; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .meta { color:var(--muted); font-size:.78rem; display:flex; align-items:center; gap:4px; }
.card .meta .ic { width:1em; height:1em; }
.card-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; margin-top:auto; padding-top:8px; }
.price { font-weight:900; font-size:1.15rem; }
.price .old { color:var(--muted); font-weight:500; font-size:.85rem; text-decoration:line-through; margin-left:6px; }

/* ---------- Bottom nav (mobile-first, always visible) ---------- */
.bottomnav {
  position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:200;
  display:flex; gap:4px; padding:8px; border-radius:999px;
  width:min(440px,92%); justify-content:space-between;
}
.bottomnav a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px; border-radius:999px; color:var(--muted); font-size:.66rem; font-weight:600;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.bottomnav a .ic { width:1.5em; height:1.5em; transition: transform .25s; }
.bottomnav a.active { color:var(--brand); }
.bottomnav a.active { color:var(--text); }
.bottomnav a.active .ic { transform: translateY(-2px) scale(1.15); }
.bottomnav a.active { background:rgba(125,125,145,.16); }
.bottomnav a .badge {
  position:absolute; transform:translate(12px,-6px); background:var(--brand); color:#fff;
  font-size:.6rem; font-weight:800; min-width:16px; height:16px; border-radius:8px;
  display:grid; place-items:center; padding:0 4px;
}

/* ---------- Test-mode banner ---------- */
.testmode-bar {
  display:flex; align-items:center; gap:10px; justify-content:center;
  width:min(1180px,94%); margin:14px auto 0; padding:11px 18px; border-radius:16px;
  background:linear-gradient(135deg,rgba(226,55,68,.14),rgba(255,107,53,.14));
  border:1px solid rgba(226,55,68,.4); color:var(--text);
  font-size:.86rem; font-weight:600; line-height:1.4;
}
.testmode-bar .ic { width:1.3em; height:1.3em; color:var(--brand); flex:0 0 auto; }
.testmode-bar a { color:var(--brand); font-weight:800; }
@media (max-width:560px){ .testmode-bar { font-size:.78rem; padding:9px 12px; align-items:flex-start; } }

/* ---------- Maintenance / 404 ---------- */
.fullscreen-msg {
  min-height:80vh; display:grid; place-items:center; text-align:center; padding:30px 18px;
}
.fullscreen-msg .box { width:min(520px,94%); padding:44px 32px; border-radius:28px; }
.fullscreen-msg .big { font-size:3.4rem; font-weight:900; line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent; }
.fullscreen-msg h1 { font-size:1.5rem; font-weight:900; margin:14px 0 8px; }
.fullscreen-msg p { color:var(--muted); margin-bottom:22px; }
.fullscreen-msg .logo-xl {
  width:74px;height:74px;border-radius:20px;display:grid;place-items:center;margin:0 auto 8px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:900;font-size:2rem;
  box-shadow:0 8px 26px rgba(226,55,68,.5);
}

/* ---------- Forms ---------- */
.auth-wrap { min-height:70vh; display:grid; place-items:center; padding:30px 0; }
.auth-card { width:min(440px,94%); padding:34px 30px; border-radius:28px; }
.auth-card h1 { font-size:1.7rem; font-weight:900; margin-bottom:6px; }
.auth-card .sub { color:var(--muted); margin-bottom:22px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
.captcha-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.captcha-img { border-radius:var(--radius-sm); border:1px solid var(--glass-border); display:block; user-select:none; -webkit-user-drag:none; }
#captchaReload { flex:0 0 auto; font-size:1.2rem; }
.lbl-row { display:flex !important; align-items:center; justify-content:space-between; gap:10px; }
.tr-btn { flex:0 0 auto; }
.tr-btn.is-loading { opacity:.6; pointer-events:none; }
.tr-btn.is-loading .ic { animation:plPulse .8s linear infinite; }
.input, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], textarea, select {
  width:100%; padding:13px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--glass-border); background:var(--glass);
  color:var(--text); font-size:1rem; font-family:inherit; transition: border .2s, box-shadow .2s;
}
.input:focus, input:focus, textarea:focus, select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(226,55,68,.15); }
textarea { resize:vertical; min-height:90px; }
.divider { display:flex; align-items:center; gap:12px; color:var(--muted); margin:18px 0; font-size:.85rem; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--glass-border); }
.google-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:var(--radius-sm); background:var(--glass-strong); border:1px solid var(--glass-border); font-weight:700; cursor:pointer; }
.center-link { text-align:center; margin-top:16px; color:var(--muted); font-size:.9rem; }
.center-link a { color:var(--brand); font-weight:700; }

/* OTP boxes */
.otp-inputs { display:flex; gap:10px; justify-content:center; margin:18px 0; }
.otp-inputs input { width:48px; height:58px; text-align:center; font-size:1.6rem; font-weight:800; }

/* ---------- Messages / toasts ---------- */
.toasts { position:fixed; top:18px; right:18px; z-index:500; display:flex; flex-direction:column; gap:10px; }
.toast { padding:13px 18px; border-radius:16px; font-weight:600; box-shadow:var(--shadow-lg); animation: slideIn .4s both; }
.toast.success { border-left:4px solid var(--green); }
.toast.error { border-left:4px solid var(--brand); }
.toast.info { border-left:4px solid var(--accent); }
@keyframes slideIn { from{ opacity:0; transform: translateX(40px);} to{opacity:1;transform:none;} }

/* ---------- Cart / list rows ---------- */
.list-row { display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--radius-sm); margin-bottom:12px; }
.list-row .thumb { width:64px; height:64px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center; background:var(--bg2); overflow:hidden;}
.list-row .thumb img{ width:100%;height:100%;object-fit:cover; }
.list-row .thumb .ic { width:46%; height:46%; color:var(--brand); opacity:.6; }
.qty { display:flex; align-items:center; gap:10px; }
.qty button { width:34px; height:34px; border-radius:10px; border:1px solid var(--glass-border); background:var(--glass); cursor:pointer; color:var(--text); display:grid; place-items:center; }
.qty button .ic { width:1.1em; height:1.1em; }
.summary { padding:20px; border-radius:var(--radius); position:sticky; bottom:90px; }
.summary .line { display:flex; justify-content:space-between; margin-bottom:10px; color:var(--muted); }
.summary .total { font-size:1.3rem; font-weight:900; color:var(--text); border-top:1px solid var(--glass-border); padding-top:12px; }

/* ---------- Modals / sheets ---------- */
.sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:300; opacity:0; pointer-events:none; transition:opacity .3s; }
.sheet-backdrop.open { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:50%; bottom:0; transform:translate(-50%,100%); width:min(560px,100%); z-index:310; padding:26px 22px calc(30px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; transition: transform .4s cubic-bezier(.2,.9,.2,1); max-height:88vh; overflow:auto; }
.sheet.open { transform:translate(-50%,0); }
.sheet .grab { width:44px; height:5px; border-radius:3px; background:var(--muted); opacity:.4; margin:0 auto 16px; }

/* ---------- Payment options ---------- */
.pay-opt { display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius-sm); border:2px solid var(--glass-border); cursor:pointer; margin-bottom:10px; transition: border .2s, background .2s; }
.pay-opt.sel { border-color:var(--brand); background:rgba(226,55,68,.07); }
.pay-opt .logo { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-weight:900; color:#fff; }

/* ---------- About / 3D ---------- */
.about-hero { padding:42px 32px; border-radius:32px; margin:22px auto; }
.tour-btn { display:inline-flex; align-items:center; gap:10px; }
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:22px; }
.stat { padding:20px; border-radius:var(--radius); text-align:center; }
.stat b { display:block; font-size:1.8rem; font-weight:900; background:linear-gradient(135deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span { color:var(--muted); font-size:.85rem; }

/* ---------- Skeleton loader ---------- */
.skel { background:linear-gradient(90deg,var(--glass) 25%,var(--bg2) 50%,var(--glass) 75%); background-size:200% 100%; animation: shimmer 1.4s infinite; border-radius:12px; }
@keyframes shimmer { from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- Empty state ---------- */
.empty { text-align:center; padding:60px 20px; color:var(--muted); }
.empty .ic { width:64px; height:64px; margin:0 auto 14px; stroke-width:1.5; opacity:.7; }

/* ---------- Footer ---------- */
.footer { margin:40px auto 10px; padding:26px; border-radius:var(--radius); text-align:center; color:var(--muted); }
.footer .socials { display:flex; gap:12px; justify-content:center; margin:14px 0; }

/* ---------- Detail page ---------- */
.detail-hero { aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; display:grid; place-items:center; background:var(--bg2); }
.detail-hero img{ width:100%; height:100%; object-fit:cover; }
.detail-hero .ic { width:22%; height:22%; color:var(--brand); opacity:.5; stroke-width:1.5; }

/* ---------- Language gate ---------- */
.lang-gate { position:fixed; inset:0; z-index:600; display:grid; place-items:center; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.lang-gate .box { width:min(380px,92%); padding:30px; border-radius:28px; text-align:center; }
.lang-gate .opt { padding:16px; border-radius:var(--radius-sm); border:1px solid var(--glass-border); margin-top:12px; font-weight:700; cursor:pointer; font-size:1.05rem; transition: all .2s; }
.lang-gate .opt:hover { border-color:var(--brand); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
.desktop-only { display:flex; }
/* Floating theme toggle: hidden on desktop (lives in the topbar instead). */
.theme-fab { display:none; }
@media (max-width: 820px) {
  .desktop-only { display:none !important; }
  .topbar { display:none; }
  .hero { padding:32px 22px; margin-top:14px; }
  body { padding-top:8px; }
  /* On phones the topbar is gone, so surface the theme toggle as a FAB. */
  .theme-fab {
    display:grid; position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); right:12px;
    z-index:70; background:var(--glass-strong);
    box-shadow:0 6px 18px rgba(0,0,0,.22); backdrop-filter:blur(10px);
  }
}
/* Ozon-style 2-up product grid on phones */
@media (max-width: 600px) {
  .grid { grid-template-columns:1fr 1fr; gap:12px; }
  .card .body { padding:10px 11px 12px; gap:5px; }
  .card .body h3 { font-size:.9rem; }
  .price { font-size:1.02rem; }
  .price .old { display:block; margin-left:0; font-size:.78rem; }
  .card-actions { grid-template-columns:1fr; }
  .btn-sm { padding:8px 10px; font-size:.8rem; }
  .section-head h2 { font-size:1.25rem; }
}
@media (min-width: 821px) {
  .bottomnav { display:none; }
  body { padding-bottom:30px; }
}

/* ============================================================
   iOS 26-style motion layer
   ============================================================ */

/* Page enter: content fades + lifts with a smooth spring */
@keyframes pageIn { from{ opacity:0; transform: translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }
main { animation: pageIn .55s var(--ease-out) both; }

/* Section reveal on scroll (toggled by JS via .reveal / .in) */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity:1; transform:none; }

/* Staggered card entrance within a grid */
.grid .card { animation: rise .55s var(--ease-out) both; }
.grid .card:nth-child(1){ animation-delay:.02s; }
.grid .card:nth-child(2){ animation-delay:.06s; }
.grid .card:nth-child(3){ animation-delay:.10s; }
.grid .card:nth-child(4){ animation-delay:.14s; }
.grid .card:nth-child(5){ animation-delay:.18s; }
.grid .card:nth-child(6){ animation-delay:.22s; }
.grid .card:nth-child(7){ animation-delay:.26s; }
.grid .card:nth-child(8){ animation-delay:.30s; }
.grid .card:nth-child(n+9){ animation-delay:.34s; }

/* Springy tactile press feedback */
.btn, .card-actions .btn, .icon-btn, .add-btn, .pay-opt, .bottomnav a, .nav-links a, .pill, .chip, .lang-gate .opt {
  -webkit-tap-highlight-color: transparent;
}
.btn { transition: transform .25s var(--spring), box-shadow .25s, filter .2s; }
.btn:active { transform: scale(.94); }
.card:active { transform: scale(.985); transition: transform .12s ease; }
.icon-btn:active, .bottomnav a:active { transform: scale(.9); }

/* Bottom nav active indicator with spring pop */
.bottomnav a.active .ic { transition: transform .4s var(--spring); }

/* Toast: spring in */
.toast { animation: toastPop .5s var(--spring) both; }
@keyframes toastPop { from{ opacity:0; transform: translateX(48px) scale(.9);} to{ opacity:1; transform:none; } }

/* Modal / bottom-sheet entrance */
@keyframes sheetUp { from{ opacity:0; transform: translateY(40px) scale(.98);} to{ opacity:1; transform:none; } }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
.lang-gate { animation: fadeIn .3s ease both; }
.lang-gate .box { animation: sheetUp .5s var(--spring) both; }

/* Hero entrance */
.hero { animation: pageIn .7s var(--ease-out) both; }
.hero h1 { animation: rise .7s var(--ease-out) both; animation-delay:.05s; }
.hero p { animation: rise .7s var(--ease-out) both; animation-delay:.12s; }
.hero .cta { animation: rise .7s var(--ease-out) both; animation-delay:.19s; }

/* Image graceful fade-in once loaded */
.card .thumb img { animation: fadeIn .5s ease both; }

/* ============================================================
   Navigation loading bar + page transition
   ============================================================ */
.nav-progress {
  position:fixed; top:0; left:0; height:3px; width:0; z-index:1000;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  box-shadow:0 0 12px rgba(226,55,68,.7);
  border-radius:0 3px 3px 0;
  opacity:0; transition: width .2s var(--ease-out), opacity .3s;
}
.nav-progress.active { opacity:1; }
/* Content slides/fades out while the next page loads */
body.is-leaving main { opacity:0; transform: translateY(-8px) scale(.995); transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); }

/* Full-screen first-paint splash (auto-hidden by JS once ready) */
.page-loader {
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
  background:var(--bg); transition: opacity .45s var(--ease-out), visibility .45s;
}
.page-loader.hide { opacity:0; visibility:hidden; }
.page-loader .pl-logo {
  width:74px; height:74px; border-radius:22px; display:grid; place-items:center;
  font-weight:900; font-size:2rem; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 16px 40px rgba(226,55,68,.45);
  animation: plPulse 1.1s var(--spring) infinite alternate;
}
@keyframes plPulse { from{ transform:scale(.92); } to{ transform:scale(1.06); } }

/* ============================================================
   Fly-to-cart animation
   ============================================================ */
.fly-clone {
  position:fixed; z-index:1100; border-radius:14px; overflow:hidden;
  pointer-events:none; box-shadow:var(--shadow-lg);
  background:var(--bg2); object-fit:cover;
  transition: transform .8s cubic-bezier(.5,-0.3,.5,1), opacity .8s ease, width .8s, height .8s;
}
@keyframes cartBump { 0%{transform:none;} 30%{transform:scale(1.35);} 60%{transform:scale(.9);} 100%{transform:none;} }
.cart-bump { animation: cartBump .5s var(--spring); }

/* ============================================================
   Menu live search
   ============================================================ */
.menu-search {
  position:relative; max-width:520px; margin:0 0 16px;
}
.menu-search input {
  width:100%; padding:13px 16px 13px 44px; border-radius:16px;
  border:1px solid var(--glass-border); background:var(--glass); color:var(--text);
  font-size:.98rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition: border-color .2s, box-shadow .2s;
}
.menu-search input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(226,55,68,.14); }
.menu-search .ic { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); width:1.15em; height:1.15em; }
.card.is-hidden { display:none; }
.no-results { text-align:center; padding:40px; color:var(--muted); }

/* ============================================================
   Skeleton list rows (cart / checkout)
   ============================================================ */
.skel-row { display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--radius-sm); margin-bottom:12px; }
.skel-row .s-thumb { width:64px; height:64px; border-radius:14px; flex:0 0 auto; }
.skel-row .s-lines { flex:1; display:flex; flex-direction:column; gap:8px; }
.skel-row .s-line { height:14px; border-radius:8px; }
.skel-row .s-line.short { width:40%; }

/* ============================================================
   Tablet / large-desktop product grid
   ============================================================ */
@media (min-width:601px) and (max-width:900px){
  .grid { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1500px){
  .grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
  .card .body h3 { font-size:1.05rem; }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; transition-duration:.05s !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  body.is-leaving main { opacity:1 !important; transform:none !important; }
  .fly-clone { display:none !important; }
}