/* ============================================================
   MoozDay — branded overrides on top of styles.css
   Match Ivan banner: black pill bg + cyan #3DA8E5 + cow horns + ice/pearls
   ============================================================ */

/* MoozDay typography: Fredoka (display) + Plus Jakarta Sans (body) + Caveat (accent) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Caveat:wght@600;700&display=swap');

/* ============================================================
   SPLASH — black bg + ice cubes falling + tapioca bubbling + logo materialize
   Total ~2.6s
   ============================================================ */

#splash.md-splash {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0F1A26 0%, #050A12 70%, #000000 100%);
  overflow: hidden;
}

/* radial cyan glow background */
.md-splash-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60vw 50vh at 50% 50%, rgba(61,168,229,.32) 0%, transparent 60%);
  animation: md-pulse 3s ease-in-out infinite;
}
@keyframes md-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Ice snowflakes — falling + rotating */
.md-ice {
  position: absolute; color: #7BC9F0; font-size: 28px;
  opacity: 0; pointer-events: none;
  text-shadow: 0 0 18px rgba(123,201,240,.95), 0 0 6px rgba(255,255,255,.8);
  animation: md-ice-fall 2.6s linear forwards;
  color: #FFFFFF; z-index: 4;
}
@keyframes md-ice-fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
.md-ice-1 { left: 12%; font-size: 32px; animation-delay: .1s; animation-duration: 2.4s; }
.md-ice-2 { left: 28%; font-size: 22px; animation-delay: .35s; animation-duration: 2.8s; }
.md-ice-3 { left: 55%; font-size: 36px; animation-delay: .6s; animation-duration: 2.2s; }
.md-ice-4 { left: 75%; font-size: 24px; animation-delay: .8s; animation-duration: 2.5s; }
.md-ice-5 { left: 88%; font-size: 30px; animation-delay: 1.05s; animation-duration: 2.3s; }

/* Tapioca pearls — bubbling up from bottom */
.md-pearl {
  position: absolute; bottom: -20px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #000);
  box-shadow: 0 0 8px rgba(0,0,0,.6), inset 0 0 4px rgba(255,255,255,.15);
  opacity: 0; pointer-events: none;
  animation: md-pearl-rise 2.6s ease-out forwards;
}
@keyframes md-pearl-rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-105vh) scale(1); opacity: 0; }
}
.md-pearl-1 { left: 18%; width: 18px; height: 18px; animation-delay: .15s; animation-duration: 2.4s; }
.md-pearl-2 { left: 32%; width: 12px; height: 12px; animation-delay: .4s;  animation-duration: 2.7s; }
.md-pearl-3 { left: 48%; width: 16px; height: 16px; animation-delay: .65s; animation-duration: 2.3s; }
.md-pearl-4 { left: 62%; width: 14px; height: 14px; animation-delay: .85s; animation-duration: 2.6s; }
.md-pearl-5 { left: 78%; width: 20px; height: 20px; animation-delay: 1.1s; animation-duration: 2.2s; }
.md-pearl-6 { left: 90%; width: 13px; height: 13px; animation-delay: 1.3s; animation-duration: 2.5s; }

/* Stage centred */
.md-splash-stage {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  gap: 28px; padding: 0 24px;
  width: min(560px, 90vw);
}

/* SVG logo + animations */
.md-logo {
  width: 100%; height: auto; max-width: 460px;
  filter: drop-shadow(0 8px 24px rgba(61,168,229,.45));
}
.md-logo .md-mooz text { transform: translateX(-30px); opacity: 0; animation: md-mooz-in 700ms cubic-bezier(.32,.72,0,1) 350ms forwards; }
.md-logo .md-day  text { transform: translateX(30px);  opacity: 0; animation: md-day-in  700ms cubic-bezier(.32,.72,0,1) 500ms forwards; }
.md-logo .md-horn      { transform-origin: 480px 130px; transform: translateY(-40px) scale(.5); opacity: 0; }
.md-logo .md-horn-l    { animation: md-horn-pop 600ms cubic-bezier(.5,1.6,.4,1) 900ms forwards; }
.md-logo .md-horn-r    { animation: md-horn-pop 600ms cubic-bezier(.5,1.6,.4,1) 1000ms forwards; }
.md-logo .md-horn path { fill: #3DA8E5; }
.md-logo .md-sub       { letter-spacing: 2px; opacity: 0; animation: md-sub-in 700ms ease-out 1300ms forwards; }

@keyframes md-mooz-in { to { transform: translateX(0); opacity: 1; } }
@keyframes md-day-in  { to { transform: translateX(0); opacity: 1; } }
@keyframes md-horn-pop { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes md-sub-in {
  0%   { letter-spacing: 2px; opacity: 0; }
  100% { letter-spacing: 10px; opacity: 1; }
}

/* Cyan progress bar */
.md-loader {
  width: 200px; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden;
  margin-top: 10px;
}
.md-loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3DA8E5 0%, #7BC9F0 50%, #FFFFFF 100%);
  box-shadow: 0 0 12px rgba(61,168,229,.7);
  animation: md-loader-fill 2.4s cubic-bezier(.4,0,.2,1) 200ms forwards;
}
@keyframes md-loader-fill {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* Override yoomo splash defaults — kill red food-pattern + drops */
#splash.md-splash .splash-rays,
#splash.md-splash .drop { display: none !important; }
#splash.md-splash::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none'><g opacity='0.18' fill='%237BC9F0'><circle cx='40' cy='40' r='10'/><circle cx='200' cy='80' r='6'/><circle cx='110' cy='150' r='8'/><circle cx='270' cy='180' r='12'/><circle cx='60' cy='220' r='7'/><circle cx='180' cy='260' r='9'/><circle cx='240' cy='40' r='5'/><circle cx='80' cy='90' r='4'/></g></svg>") !important;
  opacity: .35 !important;
}
/* Also kill yoomo cream gradient body fallback — make it cyan-tinted black */
body[x-cloak]::before {
  background: radial-gradient(ellipse at center, #1A2B3C 0%, #050A12 70%, #000 100%) !important;
}

/* ============================================================
   WELCOME — same atmosphere, lighter
   ============================================================ */

#welcome .welcome-stage {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(61,168,229,.18) 0%, transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #EAF4FB 100%) !important;
}
#welcome .welcome-stage::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(61,168,229,.12) 0%, transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(123,201,240,.14) 0%, transparent 32%),
    radial-gradient(circle at 50% 95%, rgba(61,168,229,.08) 0%, transparent 50%) !important;
  opacity: 1 !important;
}

/* Ice snowflakes decor for welcome (subtle) */
#welcome .welcome-stage::after {
  content: "❄  ❄    ❄   ❄  ❄    ❄";
  position: absolute; inset: 0; pointer-events: none;
  font-size: 24px; color: rgba(61,168,229,.18);
  letter-spacing: 12vw; line-height: 14vh;
  padding: 8vh 4vw;
  white-space: nowrap; overflow: hidden;
  z-index: 0;
}

/* Welcome wordmark — replace italic yoomo with bold MOOZDAY */
#welcome .welcome-wordmark {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important; font-style: normal !important;
  font-size: clamp(56px, 14vw, 110px) !important;
  letter-spacing: -.01em !important;
  color: #0A0A0A !important;
  text-shadow: 0 4px 16px rgba(61,168,229,.25);
}
#welcome .welcome-wordmark::after { display: none !important; }
#welcome .welcome-wordmark .day { color: #3DA8E5; }

/* Welcome HERO BANNER (IMG_4905 promo poster) — replaces wordmark on top */
#welcome .welcome-logo { display: none !important; }
#welcome .welcome-hero {
  width: clamp(220px, 56vw, 340px);
  margin: 0 auto 18px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 18px 48px rgba(26,122,184,.22),
    0 4px 14px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.6);
  position: relative;
  z-index: 2;
}
#welcome .welcome-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 853 / 1844;
  object-fit: cover;
}
@media (max-width: 480px) {
  #welcome .welcome-hero { width: 62vw; max-height: 46vh; margin-bottom: 14px; }
  #welcome .welcome-hero img { max-height: 46vh; object-fit: contain; }
}
@media (min-height: 740px) and (max-width: 480px) {
  #welcome .welcome-hero { width: 58vw; max-height: 42vh; }
}

/* Welcome accent text — Caveat handwritten "каждый день" feel */
#welcome .welcome-acc {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important; font-size: 28px !important;
  color: #3DA8E5 !important; letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Welcome CTA — cyan glossy */
#welcome .welcome-cta {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  box-shadow: 0 22px 44px -16px rgba(61,168,229,.65), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#welcome .welcome-cta:hover {
  box-shadow: 0 28px 54px -18px rgba(61,168,229,.85), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* ============================================================
   HEADER — black pill style (matches Ivan banner)
   ============================================================ */

.app-header {
  background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}

.header-wordmark {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important; font-style: normal !important;
  font-size: 28px !important; letter-spacing: -.01em !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
}
.header-wordmark::after { display: none !important; }
.header-wordmark .day { color: #3DA8E5; }

/* Sidebar wordmark — same */
.sidebar-wordmark {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important; font-style: normal !important;
  font-size: 56px !important; letter-spacing: -.01em !important;
  color: #0A0A0A !important;
}
.sidebar-wordmark::after { display: none !important; }
.sidebar-wordmark .day { color: #3DA8E5; }

/* Auth wordmark */
.auth-wordmark {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important; font-style: normal !important;
  letter-spacing: -.01em !important; color: #0A0A0A !important;
}
.auth-wordmark::after { display: none !important; }

/* Desktop top-bar wordmark */
.dt-wordmark {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important; font-style: normal !important;
  letter-spacing: -.01em !important; color: #FFFFFF !important;
}
.dt-wordmark::after { display: none !important; }
.dt-wordmark .day { color: #3DA8E5; }

/* ============================================================
   GLOBAL — body + section bg adjustments
   ============================================================ */
body { background: #FFFFFF; color: #0A0A0A; }
body[x-cloak]::before {
  background: radial-gradient(ellipse at center, #1A2B3C 0%, #050A12 70%, #000 100%) !important;
}

/* Hero banner — full width, slight fade on scroll */
.hero { background: linear-gradient(180deg, #EAF4FB 0%, #FFFFFF 100%); }

/* Section titles — in cyan accent on white bg */
.section-title { color: #0A0A0A; }
.section-more { color: #3DA8E5 !important; }

/* Popular section: black bg like header pill */
.popular {
  background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
.popular .section-title { color: #FFFFFF !important; }
.popular .section-more { color: #7BC9F0 !important; }
.popular .section-more:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }

/* Bottom-nav — cyan accent */
#yoomo-bn .bn-item.active { color: #3DA8E5 !important; }

/* Cart fab — cyan glow */
.cart-fab { background: linear-gradient(135deg, #3DA8E5, #1A7AB8) !important; }

/* ============================================================
   POPULAR — landscape promo cards (3:2), Ivan promo style
   ============================================================ */
.popular .section-head { padding: 0 16px 18px !important; }
.popular .section-title::before {
  background: linear-gradient(135deg, #3DA8E5, #7BC9F0) !important;
}

.popular-row {
  gap: 12px !important;
  padding: 4px 16px 12px !important;
}
.pop-card {
  flex: 0 0 300px !important;
  height: 200px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0F1A26 0%, #050A12 100%) !important;
  box-shadow: 0 18px 40px -18px rgba(61,168,229,.5), 0 4px 14px -8px rgba(0,0,0,.6) !important;
}
.pop-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Hide overlay text on promo cards (text is baked into image) */
.pop-card .pop-overlay,
.pop-card .pop-name,
.pop-card .pop-price-pill { display: none !important; }
.pop-card { position: relative; }

/* HIT badge — top-right corner of promo card */
.pop-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #FFFFFF;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(26,122,184,.55), inset 0 0 0 1px rgba(255,255,255,.25);
  text-transform: uppercase;
  pointer-events: none;
}
.pop-card-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.85) 100%);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  color: #fff;
  z-index: 4;
}
.pop-card-name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pop-card-price {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
  color: #7BC9F0;
  background: rgba(255,255,255,.12);
  padding: 4px 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  backdrop-filter: blur(6px);
}

@media (min-width: 1024px) {
  .pop-card {
    flex: 0 0 420px !important;
    height: 280px !important;
  }
  .popular-row { gap: 18px !important; padding: 8px 32px 14px !important; }
}
@media (min-width: 1440px) {
  .pop-card {
    flex: 0 0 480px !important;
    height: 320px !important;
  }
}

/* ============================================================
   HERO — Ivan banner, full-bleed, no overlay text
   ============================================================ */
.hero {
  background: linear-gradient(180deg, #B8E0F5 0%, #E5F2FB 100%) !important;
  padding: 0 !important;
}
.hero-bg {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1905 / 826 !important;  /* match real banner ratio = 2.3:1 — no cropping */
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}
.hero-title, .hero-cta-pill { display: none !important; }

/* ============================================================
   AUTH v2 — modern premium dark auth flow
   Цвета: #3DA8E5 cyan primary, #F5EFE6 cream, #0F1A26 text
   ============================================================ */

/* Auth page full-screen dark bg */
.auth-page {
  min-height: 100dvh !important;
  background: linear-gradient(160deg, #0A1520 0%, #111E2E 50%, #0F1A26 100%) !important;
}
.auth-wrap {
  background: transparent !important;
  position: relative;
  padding-bottom: 120px;
}

/* Back button — circular glass */
.auth-back {
  position: fixed !important;
  top: 16px !important; left: 16px !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(12px) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  transition: all .25s ease !important;
  z-index: 10 !important;
}
.auth-back:hover { background: rgba(255,255,255,.22) !important; transform: scale(1.05) !important; }

/* Auth logo — Fredoka big */
.auth-logo {
  padding-top: 80px !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}
.auth-wordmark {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(48px, 15vw, 80px) !important;
  letter-spacing: -.02em !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
  display: inline-block !important;
  text-shadow: 0 4px 24px rgba(61,168,229,.45) !important;
}
.auth-wordmark .day { color: #3DA8E5 !important; }
.auth-wordmark::after { display: none !important; }

/* Tagline — Caveat cyan handwritten */
.auth-tagline {
  text-align: center !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #7BC9F0 !important;
  letter-spacing: .01em !important;
  margin-bottom: 4px !important;
  padding: 0 24px !important;
}
.auth-tagline .accent {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}

/* Brand pill */
.auth-brand {
  text-align: center !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  margin-bottom: 28px !important;
}
.auth-brand .dot {
  display: inline-block !important;
  width: 3px !important; height: 3px !important;
  border-radius: 50% !important;
  background: #3DA8E5 !important;
  vertical-align: middle !important;
  margin: 0 6px !important;
}

/* Tabs — pill selector */
.auth-tabs {
  display: flex !important;
  margin: 0 24px 20px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  gap: 0 !important;
}
.auth-tab {
  flex: 1 !important;
  padding: 10px 8px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255,255,255,.55) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.16,.7,.28,1) !important;
}
.auth-tab.active {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(26,122,184,.45), inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

/* Form container */
.auth-form {
  padding: 0 24px !important;
}

/* Label */
.auth-label {
  display: block !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 8px !important;
  margin-top: 16px !important;
}

/* Input — minimal glass with bottom-line style + focus glow */
.auth-input {
  width: 100% !important;
  background: rgba(255,255,255,.07) !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(255,255,255,.2) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 14px 16px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  letter-spacing: .01em !important;
  outline: none !important;
  transition: all .25s ease !important;
  -webkit-appearance: none !important;
  margin-bottom: 14px !important;
}
.auth-input::placeholder { color: rgba(255,255,255,.3) !important; }
.auth-input:focus {
  background: rgba(61,168,229,.1) !important;
  border-bottom-color: #3DA8E5 !important;
  box-shadow: 0 4px 18px rgba(61,168,229,.2) !important;
}

/* Primary button — cyan glow gradient */
.auth-btn {
  width: 100% !important;
  padding: 16px 20px !important;
  border-radius: 14px !important;
  border: 0 !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
  transition: all .28s cubic-bezier(.34,1.56,.64,1) !important;
}
.auth-btn-primary {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px -12px rgba(26,122,184,.65), 0 4px 12px -4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.auth-btn-primary:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 22px 50px -14px rgba(26,122,184,.8), 0 6px 16px -4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.auth-btn-primary:active { transform: scale(.97) !important; }
.auth-btn-primary:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Policy text */
.auth-policy {
  text-align: center !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.35) !important;
  margin-top: 12px !important;
  line-height: 1.5 !important;
}

/* Skip links */
.auth-skip {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 12px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.5) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: color .2s ease !important;
  margin-top: 4px !important;
}
.auth-skip:hover { color: #7BC9F0 !important; }
.auth-skip-link {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: #3DA8E5 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color .2s !important;
}
.auth-skip-link:disabled { color: rgba(61,168,229,.35) !important; }

/* TTL countdown */
.auth-ttl {
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.45) !important;
  margin-top: 10px !important;
}
.auth-ttl b { color: #3DA8E5 !important; }

/* ====== OTP STEP — 4 round cells with pop animation ====== */
.auth-otp { padding-top: 8px !important; }
.auth-otp-title {
  text-align: center !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}
.auth-otp-sub {
  text-align: center !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 28px !important;
  line-height: 1.5 !important;
}
.auth-otp-sub b { color: #7BC9F0 !important; }
.auth-otp-row {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  margin-bottom: 28px !important;
}
.auth-otp-input {
  width: 64px !important;
  height: 72px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.09) !important;
  border: 2px solid rgba(255,255,255,.18) !important;
  color: #FFFFFF !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  text-align: center !important;
  outline: none !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
  -webkit-appearance: none !important;
  caret-color: #3DA8E5 !important;
  margin-bottom: 0 !important;
}
.auth-otp-input::placeholder {
  color: rgba(255,255,255,.25) !important;
  font-size: 20px !important;
}
.auth-otp-input:focus {
  background: rgba(61,168,229,.15) !important;
  border-color: #3DA8E5 !important;
  box-shadow: 0 0 0 4px rgba(61,168,229,.2), 0 8px 20px rgba(26,122,184,.3) !important;
  transform: scale(1.05) !important;
}
.auth-otp-input:not(:placeholder-shown):not(:focus) {
  background: rgba(61,168,229,.12) !important;
  border-color: rgba(61,168,229,.5) !important;
  animation: otp-pop .3s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes otp-pop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ====== DONE STEP ====== */
.auth-done {
  text-align: center !important;
  padding-top: 40px !important;
}
.auth-done-icon {
  margin-bottom: 20px !important;
  display: flex !important;
  justify-content: center !important;
}
.auth-done-icon circle { stroke: rgba(61,168,229,.3) !important; }
.auth-done-icon path { stroke: #3DA8E5 !important; }
.auth-done-title {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}
.auth-done-name {
  font-family: 'Caveat', cursive !important;
  font-size: 22px !important;
  color: #7BC9F0 !important;
  margin-bottom: 32px !important;
}

/* Socials row */
.auth-socials {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}
.auth-social {
  width: 44px !important; height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: rgba(255,255,255,.7) !important;
  transition: all .25s ease !important;
  text-decoration: none !important;
}
.auth-social svg { width: 20px !important; height: 20px !important; }
.auth-social:hover {
  background: rgba(61,168,229,.2) !important;
  border-color: rgba(61,168,229,.4) !important;
  color: #3DA8E5 !important;
  transform: translateY(-2px) !important;
}

/* Footer */
.auth-footer {
  text-align: center !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.25) !important;
  padding: 16px 24px !important;
  letter-spacing: .04em !important;
}

/* Desktop: center the auth panel */
@media (min-width: 1024px) {
  .auth-page {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }
  .auth-wrap {
    width: 420px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.05) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,.4) !important;
    padding: 0 0 32px !important;
    overflow: hidden !important;
  }
  .auth-logo { padding-top: 40px !important; }
  .auth-back { position: absolute !important; top: 12px !important; left: 12px !important; }
}

/* Auth brand colors overrides (legacy) */
.auth-brand .accent { color: #FFFFFF !important; font-weight: 900 !important; }
.auth-cta-primary,
.auth-otp-resend.active {
  background: linear-gradient(135deg, #3DA8E5, #1A7AB8) !important;
}

/* ============================================================
   SPLASH IMAGE MODE — uses GPT-rendered hero PNG as full-bleed bg
   ============================================================ */
#splash.md-splash-image { background: #000 !important; }
#splash.md-splash-image .md-splash-bg,
#splash.md-splash-image .md-splash-stage,
#splash.md-splash-image .md-logo,
#splash.md-splash-image::before { display: none !important; }

.md-splash-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
  animation: md-splash-zoom 2.6s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes md-splash-zoom {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Loader bar — pinned to bottom over the image */
#splash.md-splash-image .md-loader-wrap {
  position: absolute; left: 0; right: 0; bottom: 8%;
  display: flex; justify-content: center;
  z-index: 5;
}
#splash.md-splash-image .md-loader { margin-top: 0; }

/* ============================================================
   PREMIUM SPLASH ANIMATION SUITE — MoozDay v2 (круче Yoomo)
   Timeline: 0→2800ms intro, 2800ms→3000ms exit
   ============================================================ */

/* 0. Pre-fade black backdrop (200ms hold) */
.md-pre-fade {
  position: absolute; inset: 0; background: #000;
  z-index: 2;
  animation: md-pre-fade 700ms ease-out forwards;
}
@keyframes md-pre-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 1. Splash image — cinematic reveal (blur+scale+brightness) */
.md-splash-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
  filter: blur(8px) brightness(.6);
  transform: scale(1.08);
  animation: md-image-reveal 1200ms cubic-bezier(.22,.61,.36,1) 200ms forwards;
}
@keyframes md-image-reveal {
  0%   { filter: blur(8px) brightness(.6); transform: scale(1.08); }
  60%  { filter: blur(2px) brightness(.92); transform: scale(1.02); }
  100% { filter: blur(0) brightness(1); transform: scale(1); }
}

/* 2. Frosty scan-line sweep top→bottom (1×) */
.md-scan {
  position: absolute; left: 0; right: 0;
  top: -10%; height: 18%;
  z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(123,201,240,.4) 40%, rgba(255,255,255,.85) 50%, rgba(123,201,240,.4) 60%, transparent 100%);
  filter: blur(8px);
  opacity: 0;
  animation: md-scan-sweep 1400ms cubic-bezier(.4,0,.2,1) 600ms forwards;
}
@keyframes md-scan-sweep {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateY(620%); opacity: 0; }
}

/* 3. Cyan concentric rings — 3 пульсирующих расходящихся кольца */
.md-ring {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid #3DA8E5;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0; pointer-events: none;
  z-index: 4;
  box-shadow: 0 0 24px rgba(61,168,229,.45), inset 0 0 12px rgba(61,168,229,.25);
  animation: md-ring-expand 1800ms cubic-bezier(.22,.61,.36,1) forwards;
}
.md-ring-1 { animation-delay: 400ms; }
.md-ring-2 { animation-delay: 700ms; border-color: rgba(123,201,240,.7); }
.md-ring-3 { animation-delay: 1000ms; border-color: rgba(255,255,255,.55); }
@keyframes md-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(28);  opacity: 0; }
}

/* 4. Splash water droplets — 8-spoke radial burst from center */
.md-burst {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: 5; pointer-events: none;
}
.md-drop {
  position: absolute;
  width: 16px; height: 16px; border-radius: 50% 0 50% 50%;
  background: radial-gradient(circle at 30% 30%, #FFFFFF, #7BC9F0);
  box-shadow: 0 0 12px rgba(123,201,240,.8);
  transform-origin: 0 0;
  transform: rotate(var(--a)) translateX(0) scale(0);
  opacity: 0;
  animation: md-drop-burst 1100ms cubic-bezier(.34,1.56,.64,1) 800ms forwards;
}
@keyframes md-drop-burst {
  0%   { transform: rotate(var(--a)) translateX(0) scale(0);   opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(60vmin) scale(.5); opacity: 0; }
}

/* 5. Cyan glow pulse on logo area (top center) */
.md-logo-glow {
  position: absolute; left: 50%; top: 22%;
  width: 80vmin; height: 30vmin;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse, rgba(61,168,229,.5) 0%, transparent 70%);
  filter: blur(20px);
  opacity: 0;
  pointer-events: none; z-index: 3;
  animation: md-glow-pulse 1400ms ease-in-out 1100ms forwards;
}
@keyframes md-glow-pulse {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
  50%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}

/* 6. Snowflakes — extended from 5 to 10 with varied paths */
.md-ice-6 { left: 8%;  font-size: 20px; animation-delay: .25s; animation-duration: 2.5s; }
.md-ice-7 { left: 38%; font-size: 28px; animation-delay: .55s; animation-duration: 2.6s; }
.md-ice-8 { left: 65%; font-size: 18px; animation-delay: .9s;  animation-duration: 2.4s; }
.md-ice-9 { left: 82%; font-size: 32px; animation-delay: 1.2s; animation-duration: 2.3s; }
.md-ice-10{ left: 95%; font-size: 22px; animation-delay: 1.5s; animation-duration: 2.5s; }
.md-pearl-7 { left: 8%;  width: 10px; height: 10px; animation-delay: .5s;  animation-duration: 2.5s; }
.md-pearl-8 { left: 95%; width: 16px; height: 16px; animation-delay: 1.5s; animation-duration: 2.4s; }

/* 7. Loader text + typewriter dots */
.md-loader-wrap {
  position: absolute; left: 0; right: 0; bottom: 7%;
  z-index: 7; display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  opacity: 0;
  animation: md-loader-fade-in 500ms ease-out 1500ms forwards;
}
@keyframes md-loader-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.md-loader-text {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.md-dots i {
  display: inline-block; width: 4px;
  font-style: normal; opacity: 0;
  animation: md-dot 1.4s infinite;
}
.md-dots i:nth-child(1) { animation-delay: 0s; }
.md-dots i:nth-child(2) { animation-delay: .2s; }
.md-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes md-dot {
  0%, 60%, 100% { opacity: 0; }
  30% { opacity: 1; }
}

/* 7b. Premium loader bar — wider, glow */
#splash.md-splash-image .md-loader-wrap .md-loader {
  width: 160px; height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 999px; overflow: hidden;
  margin: 0;
}
#splash.md-splash-image .md-loader-wrap .md-loader-bar {
  background: linear-gradient(90deg, #3DA8E5 0%, #FFFFFF 50%, #7BC9F0 100%);
  box-shadow: 0 0 20px rgba(61,168,229,.9), 0 0 8px rgba(255,255,255,.6);
  animation: md-loader-fill 800ms cubic-bezier(.4,0,.2,1) 1600ms forwards;
}

/* Splash exit — radial flash + scale shrink */
#splash.md-splash.splash-leave-start { opacity: 1; transform: scale(1); }
#splash.md-splash.splash-leave-end { opacity: 0; transform: scale(.96); }
#splash.md-splash {
  transition: opacity 500ms cubic-bezier(.4,0,.2,1), transform 500ms cubic-bezier(.4,0,.2,1);
}

/* prefers-reduced-motion: respect user's setting */
@media (prefers-reduced-motion: reduce) {
  .md-pre-fade, .md-scan, .md-ring, .md-drop, .md-logo-glow,
  .md-ice, .md-pearl { animation: none !important; opacity: 0 !important; }
  .md-splash-img { filter: none !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   MODAL SIZE TOGGLE — 0.5L / 0.7L pill switch
   ============================================================ */
.modal-size-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 10px;
}
.modal-size-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #555;
}
.modal-size-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  background: #F0F4F9;
  border-radius: 14px;
  border: 1px solid rgba(61,168,229,.18);
}
.modal-size-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1A2532;
  cursor: pointer;
  transition: all .25s cubic-bezier(.16,.7,.28,1);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.modal-size-btn:hover { background: rgba(61,168,229,.08); }
.modal-size-btn.is-active {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(26,122,184,.3), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.modal-size-vol {
  font-size: 14px;
  font-weight: 700;
}
.modal-size-price {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
}
.modal-size-btn.is-active .modal-size-price { opacity: 1; }

/* ============================================================
   TYPOGRAPHY OVERRIDES — Fredoka display + Plus Jakarta Sans body
   Replaces Inter / Anton / Bebas Neue / system-ui globally
   ============================================================ */

/* Global body font */
body,
.app-body,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Category card names — slightly larger, Fredoka */
.cat-card-name {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

/* Product cards in popular row */
.pop-card-name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Product modal name — Fredoka for that playful header */
.modal-name {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Section titles */
.section-title {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Welcome CTA button */
#welcome .welcome-cta {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  font-size: 18px !important;
}

/* Modal add-to-cart button */
.modal-add {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  font-size: 17px !important;
}

/* Bottom nav labels */
#yoomo-bn .bn-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Auth tagline — keep Caveat */
.auth-tagline {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
}

/* Welcome accent — Caveat */
#welcome .welcome-acc {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Desktop nav items */
.dt-nav-item {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Sidebar nav items */
.sidebar-nav-item,
.sidebar-nav-link {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   CATEGORIES grid v2 — 4 square + 1 wide hero (Bubble Tea)
   Иван 29.04: симметрия 4+1, hero выделен крупнее
   ============================================================ */
.cat-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 720px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr) !important; }
}
.cat-card-img {
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  border: 0 !important;
  box-shadow: 0 8px 24px -8px rgba(26,122,184,.18), 0 2px 8px -2px rgba(0,0,0,.08) !important;
  transition: all .35s cubic-bezier(.16,.7,.28,1);
}
.cat-card:hover .cat-card-img {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 32px -8px rgba(26,122,184,.32), 0 4px 12px -2px rgba(0,0,0,.12) !important;
}
/* Hide standalone name (name baked into image now) */
.cat-card-name { display: none !important; }
/* Hero card spans full width */
.cat-card-hero {
  grid-column: 1 / -1;
}
.cat-card-hero .cat-card-img {
  aspect-ratio: 2 / 1 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 38px -10px rgba(61,168,229,.35), 0 4px 14px -4px rgba(0,0,0,.18) !important;
}
.cat-card-hero:hover .cat-card-img {
  transform: translateY(-4px) scale(1.015);
}

/* ============================================================
   CART EMPTY — modern centered state
   ============================================================ */
.cart-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 60vh !important;
  padding: 40px 32px !important;
  text-align: center !important;
}
.cart-empty-emoji {
  font-size: 72px !important;
  margin-bottom: 20px !important;
  filter: drop-shadow(0 8px 18px rgba(26,122,184,.2)) !important;
}
.cart-empty-title {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #0F1A26 !important;
  margin-bottom: 8px !important;
}
.cart-empty-desc {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: rgba(15,26,38,.55) !important;
  margin-bottom: 28px !important;
  line-height: 1.5 !important;
}
.cart-empty-cta {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  border-radius: 14px !important;
  border: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 34px -10px rgba(26,122,184,.55) !important;
  transition: all .28s cubic-bezier(.34,1.56,.64,1) !important;
}
.cart-empty-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 20px 42px -12px rgba(26,122,184,.7) !important;
}

/* Cart checkout button */
.cart-checkout {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px -10px rgba(26,122,184,.55) !important;
  transition: all .28s cubic-bezier(.34,1.56,.64,1) !important;
}
.cart-checkout:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 42px -12px rgba(26,122,184,.7) !important;
}

/* ============================================================
   BOTTOM-NAV modern v2 — glass pill, accent on active
   ============================================================ */
.bottom-nav {
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-top: 0 !important;
  box-shadow: 0 -8px 30px -10px rgba(26,122,184,.18), inset 0 1px 0 rgba(255,255,255,.8) !important;
  padding: 8px 12px env(safe-area-inset-bottom, 8px) 12px !important;
}
.bn-item {
  position: relative !important;
  padding: 8px 4px !important;
  border-radius: 14px !important;
  color: rgba(10,30,50,.55) !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  transition: all .3s cubic-bezier(.16,.7,.28,1) !important;
}
.bn-item svg {
  width: 22px !important; height: 22px !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.bn-item:hover { color: #1A7AB8 !important; }
.bn-item:hover svg { transform: translateY(-2px) scale(1.08); }
.bn-item.active {
  color: #1A7AB8 !important;
  background: linear-gradient(135deg, rgba(123,201,240,.22) 0%, rgba(61,168,229,.14) 100%) !important;
  box-shadow: 0 2px 8px -2px rgba(61,168,229,.25), inset 0 0 0 1px rgba(123,201,240,.35) !important;
}
.bn-item.active svg {
  color: #3DA8E5 !important;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 6px rgba(61,168,229,.4));
}
.bn-cart-badge {
  background: linear-gradient(135deg, #FF6FA8 0%, #E5377F 100%) !important;
  box-shadow: 0 2px 8px rgba(229,55,127,.4) !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================================
   HOME background — soft cyan like hero (Иван 29.04)
   ============================================================ */
.app-frame, .page, body {
  background: linear-gradient(180deg, #F0F8FE 0%, #E5F2FB 100%) !important;
}
#welcome ~ * .app-frame { background: linear-gradient(180deg, #F0F8FE 0%, #E5F2FB 100%) !important; }

/* "Mood" / hero section — soft cyan tint */
.hero {
  background: linear-gradient(180deg, #B8E0F5 0%, #E5F2FB 100%) !important;
  border-radius: 0 0 28px 28px;
  margin-bottom: 18px;
  overflow: hidden;
}

/* Section titles in soft cyan space stay readable */
.section-title { color: #0F1A26 !important; }
.section-more { color: #1A7AB8 !important; }

/* Search bar more friendly */
.searchbar input {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(123,201,240,.35) !important;
  box-shadow: 0 4px 14px -4px rgba(26,122,184,.12) !important;
  border-radius: 14px !important;
}

/* ============================================================
   SEARCHBAR — light cyan to match home bg (Иван 29.04)
   ============================================================ */
.search-bar {
  background: linear-gradient(180deg, #E5F2FB 0%, #F0F8FE 100%) !important;
  box-shadow: 0 4px 12px -8px rgba(26,122,184,.18) !important;
}
.search-bar input {
  background: #FFFFFF !important;
  border: 1px solid rgba(123,201,240,.4) !important;
  color: #0F1A26 !important;
  border-radius: 14px !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 500 !important;
}
.search-bar input::placeholder { color: rgba(15,26,38,.45) !important; }
.search-bar input:focus {
  border-color: #3DA8E5 !important;
  box-shadow: 0 0 0 3px rgba(61,168,229,.18) !important;
}
.search-bar .search-icon { color: #1A7AB8 !important; }

/* Header (top MOOZDAY bar) — match cyan */
.header {
  background: linear-gradient(180deg, #B8E0F5 0%, #C5E3F4 100%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 2px 12px -6px rgba(26,122,184,.18) !important;
}
.header.is-scrolled {
  background: rgba(184,224,245,.92) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
}
.header-icon-btn,
.header-burger {
  background: rgba(255,255,255,.5) !important;
  color: #0F1A26 !important;
  border-radius: 12px !important;
  transition: all .25s ease !important;
}
.header-icon-btn:hover,
.header-burger:hover { background: rgba(255,255,255,.85) !important; transform: translateY(-1px); }
.header-wordmark { color: #0F1A26 !important; }
.header-wordmark .day { color: #1A7AB8 !important; }

/* ============================================================
   POPULAR cards — 50% smaller (Иван 29.04 — слишком много места)
   ============================================================ */
.popular-row {
  gap: 10px !important;
}
.pop-card {
  flex: 0 0 180px !important;
  height: 132px !important;
  border-radius: 14px !important;
}
.pop-badge {
  top: 8px !important; right: 8px !important;
  font-size: 10px !important;
  padding: 4px 9px !important;
  letter-spacing: .12em !important;
}
.pop-card-meta {
  padding: 9px 11px !important;
  gap: 6px !important;
}
.pop-card-name {
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.pop-card-price {
  font-size: 11px !important;
  padding: 3px 8px !important;
}
/* hover lift on pop-cards */
.pop-card {
  transition: transform .3s cubic-bezier(.16,.7,.28,1), box-shadow .3s ease !important;
  cursor: pointer !important;
}
.pop-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 24px 48px -16px rgba(26,122,184,.65), 0 6px 16px -6px rgba(0,0,0,.5) !important;
}
.pop-card:active { transform: scale(.97) !important; }

@media (min-width: 1024px) {
  .pop-card { flex: 0 0 240px !important; height: 170px !important; border-radius: 16px !important; }
  .pop-card-name { font-size: 13px !important; }
  .pop-card-price { font-size: 12px !important; }
  .pop-badge { font-size: 11px !important; padding: 5px 11px !important; }
}

/* ============================================================
   CHIPS — cyan active style
   ============================================================ */
.chips {
  background: linear-gradient(180deg, #E5F2FB 0%, #EEF7FD 100%) !important;
  border-bottom: 1px solid rgba(123,201,240,.25) !important;
  box-shadow: 0 4px 14px -8px rgba(26,122,184,.18) !important;
  padding: 10px 16px 14px !important;
}
/* trailing padding via pseudo to ensure last chip not cut off */
.chips::after {
  content: '' !important;
  flex: 0 0 10px !important;
  height: 1px !important;
  display: block !important;
}
.cat-chip {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(123,201,240,.22) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all .25s cubic-bezier(.16,.7,.28,1) !important;
}
.cat-chip:hover {
  background: rgba(61,168,229,.1) !important;
  border-color: rgba(61,168,229,.35) !important;
  transform: translateY(-2px) !important;
}
.cat-chip.active {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -6px rgba(26,122,184,.55) !important;
}
.cat-chip-img { border-radius: 50% !important; overflow: hidden !important; }

/* CATALOG page: slightly more padding top for chips offset */
.catalog {
  padding: 0 14px 16px !important;
}

/* ============================================================
   PRODUCT CARDS v3 — эталон с прозрачными фото товаров (PDF style)
   Иван 29.04: фото с прозрачным фоном "парят" на cream-pearl карточке
   ============================================================ */
.product-grid {
  gap: 14px !important;
  padding: 0 4px !important;
}
.product-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFE 100%) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(123,201,240,.18) !important;
  box-shadow: 0 8px 26px -10px rgba(26,122,184,.15), 0 2px 8px -2px rgba(0,0,0,.04) !important;
  transition: all .35s cubic-bezier(.16,.7,.28,1) !important;
  overflow: visible !important;
  position: relative !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 38px -12px rgba(26,122,184,.30), 0 6px 16px -4px rgba(0,0,0,.08) !important;
  border-color: rgba(61,168,229,.45) !important;
}
.product-card-img {
  background:
    radial-gradient(ellipse 70% 55% at 50% 65%, rgba(123,201,240,.18) 0%, transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 95%, rgba(61,168,229,.10) 0%, transparent 70%),
    linear-gradient(180deg, #F0F8FE 0%, #E5F2FB 100%) !important;
  border-radius: 22px 22px 0 0 !important;
  padding: 14px 10px 6px !important;
  position: relative !important;
}
.product-card-img::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 4px at 18% 22%, rgba(61,168,229,.20) 100%, transparent 100%),
    radial-gradient(circle 3px at 78% 32%, rgba(123,201,240,.25) 100%, transparent 100%),
    radial-gradient(circle 5px at 62% 68%, rgba(26,122,184,.18) 100%, transparent 100%),
    radial-gradient(circle 3px at 28% 78%, rgba(61,168,229,.20) 100%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.product-card-img img {
  position: relative;
  z-index: 1;
  object-fit: contain !important;  /* preserve aspect, no crop — товар парит */
  filter: drop-shadow(0 12px 18px rgba(26,122,184,.25)) drop-shadow(0 4px 8px rgba(0,0,0,.08));
  transition: transform .55s cubic-bezier(.16,.7,.28,1) !important;
}
.product-card:hover .product-card-img img {
  transform: translateY(-4px) scale(1.04) !important;
}

.product-card-info {
  padding: 12px 14px 4px !important;
}
.product-card-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #0F1A26 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 36px;
}
.product-card-weight {
  display: inline-block;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #1A7AB8 !important;
  background: rgba(123,201,240,.18) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin-top: 6px !important;
}
.product-card-foot {
  padding: 8px 14px 14px !important;
  align-items: center !important;
}
.product-card-price {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0F1A26 !important;
  letter-spacing: -.01em !important;
}
/* ₸ уже в formatPrice() — no ::after needed */
.product-card-add {
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  box-shadow: 0 6px 16px -4px rgba(26,122,184,.5), inset 0 0 0 1px rgba(255,255,255,.2) !important;
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.product-card-add:hover {
  transform: scale(1.08) translateY(-1px) !important;
  box-shadow: 0 10px 22px -4px rgba(26,122,184,.65), inset 0 0 0 1px rgba(255,255,255,.3) !important;
}

/* ============================================================
   ANIMATION POLISH v2 — override red yoomo shadows with MoozDay cyan
   ============================================================ */

/* Pop-card hover — cyan glow (override red from styles.css) */
.pop-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 44px -16px rgba(61,168,229,.55), 0 6px 16px -8px rgba(0,0,0,.5) !important;
  transition: transform .28s cubic-bezier(.16,.7,.28,1), box-shadow .28s cubic-bezier(.16,.7,.28,1) !important;
}
.pop-card {
  transition: transform .22s cubic-bezier(.16,.7,.28,1), box-shadow .22s cubic-bezier(.16,.7,.28,1) !important;
}

/* Category card hover — lift with cyan */
.cat-card {
  transition: transform .22s cubic-bezier(.16,.7,.28,1) !important;
}
.cat-card:hover {
  transform: translateY(-4px) !important;
}
.cat-card:hover .cat-card-img {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -10px rgba(61,168,229,.3) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important;
}

/* Product card hover — cyan lift shadow */
.product-card {
  transition: transform .22s cubic-bezier(.16,.7,.28,1), box-shadow .22s ease !important;
}
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px -10px rgba(61,168,229,.2), 0 4px 12px -4px rgba(0,0,0,.08) !important;
}

/* Bottom nav active pill — springy transition */
.bn-item {
  transition: color .18s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Toast — smooth slide-in from bottom */
.toast {
  transition: opacity .3s cubic-bezier(.16,.7,.28,1), transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Modal — slightly springier open */
.modal {
  animation-timing-function: cubic-bezier(.34,1.56,.64,1) !important;
}

/* Page transitions — smoother */
.page-enter {
  transition: opacity .3s ease, transform .38s cubic-bezier(.16,.7,.28,1) !important;
}
.product-card-add:active { transform: scale(.92) !important; }

/* ============================================================
   CATEGORIES ENTRANCE ANIMATION v2 — Иван 29.04 19:00
   4 cards слева прилетают slide-in-left, 4 справа slide-in-right,
   hero Bubble Tea — fade-up zoom snap.
   Triggered via .categories.is-revealed (set by IntersectionObserver in app.js).
   ============================================================ */

/* initial state — invisible */
.categories .cat-card {
  opacity: 0;
  transform: translateX(0) scale(.9);
  will-change: transform, opacity;
}

/* hero in middle (Bubble Tea, .cat-card-hero) — fades up + zoom */
.categories .cat-card-hero {
  transform: translateY(40px) scale(.95);
}

/* When reveal class is added — animate in */
.categories.is-revealed .cat-card:nth-child(1)  { animation: cat-fly-left  900ms cubic-bezier(.34,1.4,.5,1) 80ms forwards;  }
.categories.is-revealed .cat-card:nth-child(2)  { animation: cat-fly-left  900ms cubic-bezier(.34,1.4,.5,1) 200ms forwards; }
.categories.is-revealed .cat-card:nth-child(3)  { animation: cat-fly-right 900ms cubic-bezier(.34,1.4,.5,1) 320ms forwards; }
.categories.is-revealed .cat-card:nth-child(4)  { animation: cat-fly-left  900ms cubic-bezier(.34,1.4,.5,1) 440ms forwards; }
.categories.is-revealed .cat-card:nth-child(5)  { animation: cat-fly-right 900ms cubic-bezier(.34,1.4,.5,1) 560ms forwards; }
.categories.is-revealed .cat-card:nth-child(6)  { animation: cat-fly-left  900ms cubic-bezier(.34,1.4,.5,1) 680ms forwards; }
.categories.is-revealed .cat-card:nth-child(7)  { animation: cat-fly-right 900ms cubic-bezier(.34,1.4,.5,1) 800ms forwards; }
.categories.is-revealed .cat-card:nth-child(8)  { animation: cat-fly-right 900ms cubic-bezier(.34,1.4,.5,1) 920ms forwards; }
.categories.is-revealed .cat-card-hero          { animation: cat-fly-hero  1100ms cubic-bezier(.16,.84,.32,1.05) 1100ms forwards; }

@keyframes cat-fly-left {
  0%   { opacity: 0; transform: translateX(-180%) scale(.7) rotate(-8deg); filter: blur(6px); }
  60%  { opacity: 1; transform: translateX(8%) scale(1.04) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: blur(0); }
}
@keyframes cat-fly-right {
  0%   { opacity: 0; transform: translateX(180%) scale(.7) rotate(8deg); filter: blur(6px); }
  60%  { opacity: 1; transform: translateX(-8%) scale(1.04) rotate(-2deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: blur(0); }
}
@keyframes cat-fly-hero {
  0%   { opacity: 0; transform: translateY(80px) scale(.9); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .categories .cat-card,
  .categories .cat-card-hero {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }
}

/* ============================================================
   POPULAR v3 — square promo covers from ChatGPT (category jump)
   Иван 29.04 19:11: 8 промо карточек с baked-in лого/название → 
   убираем overlay text/badge (всё в картинке)
   ============================================================ */
.pop-card {
  flex: 0 0 220px !important;
  height: 220px !important;  /* square — match cat covers aspect */
  border-radius: 18px !important;
  background: #FFF !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.pop-card img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}
.pop-card .pop-card-meta,
.pop-card .pop-badge,
.pop-card .pop-card-name,
.pop-card .pop-card-price { display: none !important; }

@media (min-width: 1024px) {
  .pop-card { flex: 0 0 280px !important; height: 280px !important; }
}

/* Hide standalone HIT badge in catalog category chips since promos already show it */

/* ============================================================
   CAT-GRID 4×2 SYMMETRIC — без hero card
   ============================================================ */
.cat-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}
.cat-card-img {
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px !important;
}
@media (min-width: 720px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================================
   NEW SECTION (ЖАҢА новинки) — bright cream bg, compact 4 cols
   Иван 29.04 19:15: убираем чёрный → cream бежевый, sm cards
   ============================================================ */
.new-section {
  background: linear-gradient(180deg, #F8F1E4 0%, #F5EFE6 100%) !important;
  border-radius: 22px !important;
  margin: 6px 12px !important;     /* меньше расстояние от hero */
  padding: 14px 12px !important;
  border: 1px solid rgba(123,201,240,.12) !important;
}
.new-section .section-head {
  padding: 0 4px 10px !important;
  margin-bottom: 0 !important;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent !important;
}
.new-section .new-pill {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px -2px rgba(26,122,184,.4) !important;
}
.new-section .section-more {
  color: #1A7AB8 !important;
  font-weight: 600 !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  background: transparent !important;
  border: 0 !important;
}

.new-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 0 !important;
}
.new-card {
  flex: unset !important;
  width: 100% !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px -6px rgba(26,122,184,.18) !important;
  border: 1px solid rgba(123,201,240,.18) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .3s cubic-bezier(.16,.7,.28,1), box-shadow .3s ease !important;
}
.new-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(26,122,184,.32) !important; }
.new-card-img {
  aspect-ratio: 1 / 1 !important;
  background: linear-gradient(180deg, #F0F8FE 0%, #E5F2FB 100%) !important;
  padding: 4px !important;
}
.new-card-img img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(26,122,184,.2));
}
.new-card-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 8px 2px !important;
  color: #0F1A26 !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 28px;
}
.new-card-foot {
  padding: 4px 8px 8px !important;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.new-card-price {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0F1A26 !important;
}
.new-card-add {
  width: 26px !important; height: 26px !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border: 0 !important; border-radius: 8px !important;
  color: #fff !important;
  font-size: 18px !important; line-height: 1 !important;
  box-shadow: 0 3px 8px -2px rgba(26,122,184,.45) !important;
  cursor: pointer !important;
  transition: transform .2s ease !important;
}
.new-card-add:hover { transform: scale(1.1); }

/* ============================================================
   HEADER ICONS — чёрные на cyan фоне (Иван 29.04)
   ============================================================ */
.header-icon-btn,
.header-burger {
  color: #0F1A26 !important;
}
.header-icon-btn svg,
.header-burger svg {
  stroke: #0F1A26 !important;
  fill: none !important;
}
.header-icon-btn svg path,
.header-icon-btn svg circle,
.header-icon-btn svg line,
.header-icon-btn svg ellipse {
  fill: none !important;
  stroke: #0F1A26 !important;
}

/* ============================================================
   SIDEBAR (бургер-меню) — premium cream + cyan
   Иван 29.04 19:15: убираем yoomo black/red → cream/cyan
   ============================================================ */
#sidebar, .sidebar, .side-menu, [x-show="sidebarOpen"] .sidebar-panel {
  background: linear-gradient(180deg, #FCF7EF 0%, #F0E8DA 100%) !important;
  color: #0F1A26 !important;
}
.sidebar-bg, .sidebar-overlay, [x-show="sidebarOpen"] .sidebar-bg {
  background: linear-gradient(180deg, #FCF7EF 0%, #F0E8DA 100%) !important;
}
.sidebar-header,
.sidebar-logo,
.sidebar-wordmark {
  color: #0F1A26 !important;
}
.sidebar-wordmark .day { color: #1A7AB8 !important; }
.sidebar-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(123,201,240,.5) 50%, transparent 100%) !important;
}
.sidebar-item, .side-link, .sidebar-link {
  color: #0F1A26 !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(123,201,240,.12) !important;
  transition: all .25s cubic-bezier(.16,.7,.28,1) !important;
}
.sidebar-item:hover, .side-link:hover {
  background: rgba(61,168,229,.12) !important;
  color: #1A7AB8 !important;
  padding-left: 22px !important;
}
.sidebar-item.active,
.sidebar-item[aria-current="true"] {
  background: linear-gradient(135deg, rgba(61,168,229,.18) 0%, rgba(123,201,240,.10) 100%) !important;
  color: #1A7AB8 !important;
  font-weight: 700 !important;
  box-shadow: inset 4px 0 0 #3DA8E5 !important;
}
.sidebar-close {
  color: #0F1A26 !important;
  background: rgba(255,255,255,.7) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(123,201,240,.25) !important;
}
.sidebar-cta, .sidebar-call, .sidebar-button {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px -4px rgba(26,122,184,.5) !important;
  border: 0 !important;
}
.sidebar-bn,
.sidebar-bn-num {
  color: #0F1A26 !important;
}

/* ============================================================
   Уменьшаем расстояние между hero и нижними секциями
   Иван 29.04 19:15
   ============================================================ */
.hero { margin-bottom: 8px !important; }
.popular { padding-top: 14px !important; padding-bottom: 8px !important; }
.popular + .new-section,
.new-section + .categories,
.popular + .categories { margin-top: 2px !important; }

/* New section — ужать ещё 25-30% (Иван 29.04 19:18) */
.new-section { margin: 4px 16px !important; padding: 10px 8px !important; }
.new-section .section-head { padding: 0 4px 6px !important; }
.new-section .new-pill { font-size: 11px !important; padding: 4px 11px !important; }
.new-section .section-more { font-size: 11px !important; }
.new-row { gap: 6px !important; }
.new-card-img { padding: 2px !important; }
.new-card-name { font-size: 10px !important; padding: 4px 6px 1px !important; min-height: 24px !important; }
.new-card-foot { padding: 2px 6px 6px !important; }
.new-card-price { font-size: 11px !important; }
.new-card-add { width: 22px !important; height: 22px !important; font-size: 16px !important; border-radius: 7px !important; }

/* ============================================================
   POPULAR (Танымал) — cream фон + cards 50% меньше
   Иван 29.04 19:25: «блок новинки на чёрном — должен быть бежевый, 2× меньше»
   ============================================================ */
.popular {
  background: linear-gradient(180deg, #F8F1E4 0%, #F5EFE6 100%) !important;
  border-radius: 22px !important;
  margin: 6px 12px !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(123,201,240,.12) !important;
}
.popular .section-head {
  padding: 0 4px 8px !important;
  margin-bottom: 0 !important;
}
.popular .section-title {
  color: #0F1A26 !important;
  font-size: 16px !important;
}
.popular .section-more {
  color: #1A7AB8 !important;
  font-size: 13px !important;
}

.popular-row {
  gap: 8px !important;
  padding: 0 !important;
}

/* pop-cards 50% smaller (Иван 29.04 19:25) */
.pop-card {
  flex: 0 0 110px !important;
  height: 110px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(26,122,184,.18) !important;
  border: 1px solid rgba(123,201,240,.12) !important;
}
@media (min-width: 1024px) {
  .pop-card { flex: 0 0 140px !important; height: 140px !important; }
}
.pop-card img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}

/* ============================================================
   POPULAR FORCE FIX — высокий specificity (Иван 29.04 19:35)
   styles.css имеет .popular { background: var(--y-coal) } — нужен sledgehammer
   ============================================================ */
body .popular,
main .popular,
section.popular {
  background: linear-gradient(180deg, #F8F1E4 0%, #F5EFE6 100%) !important;
  border-radius: 22px !important;
  margin: 6px 12px !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(123,201,240,.12) !important;
}
body .popular .section-title,
section.popular .section-title { color: #0F1A26 !important; }
body .popular .section-title::before { background: linear-gradient(180deg, #3DA8E5, #1A7AB8) !important; }
body .popular .section-more,
section.popular .section-more { color: #1A7AB8 !important; }
body .popular .section-more:hover { background: rgba(61,168,229,.10) !important; }

/* pop-cards 50% smaller — high specificity */
body .popular .pop-card,
section.popular .popular-row .pop-card {
  flex: 0 0 110px !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(26,122,184,.18) !important;
  border: 1px solid rgba(123,201,240,.18) !important;
}
@media (min-width: 1024px) {
  body .popular .pop-card,
  section.popular .popular-row .pop-card {
    flex: 0 0 140px !important;
    width: 140px !important;
    height: 140px !important;
  }
}

/* ============================================================
   BOTTOM NAV — вернуть cream/бежевый (Иван 29.04 19:35)
   ============================================================ */
.bottom-nav {
  background: linear-gradient(180deg, #FCF7EF 0%, #F0E8DA 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -8px 30px -10px rgba(180,140,80,.20), inset 0 1px 0 rgba(255,255,255,.8) !important;
  border-top: 1px solid rgba(123,201,240,.18) !important;
}

/* ============================================================
   FIX PACK 29.04 19:50:
   1. Новинки → вернуть слайдер (horizontal scroll) с большим списком
   2. Cart badge → cyan (вместо розового)
   3. Profile page → premium cream/cyan re-design
   ============================================================ */

/* 1. NEW SECTION — слайдер с прокруткой, не grid */
.new-row {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 8px !important;
  padding: 4px 4px 8px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.new-row::-webkit-scrollbar { display: none !important; }
.new-card {
  flex: 0 0 130px !important;
  width: 130px !important;
  scroll-snap-align: start !important;
}
@media (min-width: 1024px) {
  .new-card { flex: 0 0 170px !important; width: 170px !important; }
}

/* 2. CART BADGE → cyan (Иван 29.04 19:50) */
.bn-cart-badge {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  box-shadow: 0 2px 8px rgba(26,122,184,.45) !important;
  color: #fff !important;
}

/* 3. PROFILE PAGE — premium cream/cyan rewrite */
.auth-page[x-show="view === 'auth'"] .profile-wrap,
.profile-wrap {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 24px 16px 100px !important;
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 100%) !important;
  min-height: 100vh !important;
}

/* Profile header — uniform avatar + name + phone */
.profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 18px !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border-radius: 22px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 12px 32px -10px rgba(26,122,184,.45) !important;
  color: #fff !important;
}
.profile-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.22) !important;
  backdrop-filter: blur(12px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  flex-shrink: 0 !important;
}
.profile-info { flex: 1; min-width: 0; }
.profile-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 2px !important;
  letter-spacing: -.01em !important;
}
.profile-phone {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 500 !important;
}

/* Bonus card */
.profile-bonus {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 6px 20px -6px rgba(26,122,184,.18) !important;
  border: 1px solid rgba(123,201,240,.18) !important;
}
.profile-bonus-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}
.profile-bonus-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1A7AB8 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.profile-bonus-amt,
.profile-bonus-value {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #0F1A26 !important;
  letter-spacing: -.02em !important;
}
.profile-bonus-amt::after,
.profile-bonus-value::after {
  content: ' ₸';
  font-size: 16px;
  color: #1A7AB8;
  font-weight: 600;
}

/* Action items list */
.profile-actions, .profile-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.profile-action, .profile-list-item {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  border: 1px solid rgba(123,201,240,.14) !important;
  transition: all .25s cubic-bezier(.16,.7,.28,1) !important;
  cursor: pointer !important;
}
.profile-action:hover, .profile-list-item:hover {
  border-color: rgba(61,168,229,.4) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFE 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px -6px rgba(26,122,184,.2) !important;
}
.profile-action svg, .profile-list-item svg { color: #1A7AB8 !important; }

/* Logout button — soft red, not aggressive */
.profile-logout {
  width: 100% !important;
  padding: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(220,30,60,.25) !important;
  border-radius: 14px !important;
  color: #C92338 !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  margin-top: 12px !important;
}
.profile-logout:hover { background: rgba(220,30,60,.06) !important; }

/* Achievement chips (если есть) */
.profile-achievements {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.profile-achievement {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 10px 6px !important;
  text-align: center !important;
  border: 1px solid rgba(123,201,240,.16) !important;
}
.profile-achievement-icon {
  font-size: 24px !important;
  margin-bottom: 4px !important;
}
.profile-achievement-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #555 !important;
}

/* ============================================================
   FINAL SAFETY: bottom-nav cream — Иван 29.04 20:05
   Высокий specificity чтобы перебить любые предыдущие правила
   ============================================================ */
body nav.bottom-nav,
body .bottom-nav {
  background: linear-gradient(180deg, #FCF7EF 0%, #F0E8DA 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(180,140,80,.18) !important;
  box-shadow: 0 -8px 30px -10px rgba(180,140,80,.20), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
body .bn-item { color: rgba(60,40,20,.55) !important; }
body .bn-item.active {
  color: #1A7AB8 !important;
  background: linear-gradient(135deg, rgba(123,201,240,.28) 0%, rgba(61,168,229,.18) 100%) !important;
}
body .bn-item.active svg { color: #3DA8E5 !important; }

/* ============================================================
   POP-CARDS как ТОВАРЫ — show name+price overlay (Иван 29.04 20:08)
   ============================================================ */
body .popular .pop-card .pop-card-meta {
  display: flex !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  padding: 6px 8px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.85) 100%) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  border-radius: 0 0 12px 12px !important;
}
body .popular .pop-card .pop-card-name {
  display: block !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  line-height: 1.2 !important;
}
body .popular .pop-card .pop-card-price {
  display: inline-block !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #7BC9F0 !important;
  background: rgba(255,255,255,.15) !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(4px) !important;
}
body .popular .pop-card .pop-card-img {
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 100%) !important;
}
body .popular .pop-card .pop-card-img img,
body .popular .pop-card > img {
  object-fit: cover !important;
}
body .popular .pop-badge {
  display: inline-flex !important;
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  z-index: 5 !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 2px 6px !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(26,122,184,.4) !important;
}

/* ============================================================
   PROFILE — premium minimal (Иван 29.04 20:08)
   ============================================================ */
body .profile-wrap {
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 18px 14px 110px !important;
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 60%, #F0E8DA 100%) !important;
  min-height: 100vh !important;
}

/* Header — compact, branded */
body .profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 8px 22px -10px rgba(26,122,184,.18) !important;
  border: 1px solid rgba(123,201,240,.18) !important;
  position: relative !important;
}
body .profile-header::before {
  content: 'MOOZDAY';
  position: absolute;
  top: -8px; left: 14px;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%);
  color: #fff;
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 8px -2px rgba(26,122,184,.4);
}
body .profile-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 10px -2px rgba(26,122,184,.4) !important;
  flex-shrink: 0 !important;
}
body .profile-info { flex: 1; min-width: 0; }
body .profile-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  margin-bottom: 1px !important;
  letter-spacing: -.005em !important;
  line-height: 1.2 !important;
}
body .profile-phone {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #6B7785 !important;
  font-weight: 500 !important;
}

/* Bonus card — premium */
body .profile-bonus {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 10px 26px -10px rgba(26,122,184,.45) !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
}
body .profile-bonus::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 80px at 90% 20%, rgba(255,255,255,.2) 0%, transparent 70%),
    radial-gradient(circle 120px at 10% 90%, rgba(255,255,255,.1) 0%, transparent 70%);
  pointer-events: none;
}
body .profile-bonus-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
  position: relative;
}
body .profile-bonus-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
body .profile-bonus-amt {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  position: relative;
}
body .profile-bonus-amt em {
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  margin-left: 4px;
  opacity: .85;
}
body .profile-bonus-hint {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.75) !important;
  margin-top: 4px !important;
  position: relative;
}

/* Section blocks — clean headings */
body .profile-section {
  margin-bottom: 12px !important;
}
body .profile-section-title {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A7AB8 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 0 4px 6px !important;
}

/* Order list items */
body .profile-orders {
  background: #FFF !important;
  border-radius: 14px !important;
  border: 1px solid rgba(123,201,240,.18) !important;
  overflow: hidden !important;
}
body .profile-order {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(123,201,240,.10) !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
}
body .profile-order:last-child { border-bottom: 0 !important; }
body .profile-order:hover { background: rgba(123,201,240,.06) !important; }
body .profile-order-icon {
  width: 32px !important; height: 32px !important;
  background: rgba(123,201,240,.18) !important;
  border-radius: 10px !important;
  display: flex; align-items: center; justify-content: center;
  color: #1A7AB8 !important;
  flex-shrink: 0 !important;
}
body .profile-order-icon svg { width: 16px; height: 16px; }
body .profile-order-body { flex: 1; min-width: 0; }
body .profile-order-id {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  margin-bottom: 1px !important;
}
body .profile-order-meta {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  color: #6B7785 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
body .profile-order-meta .dot {
  width: 3px; height: 3px; background: #C9D2DB; border-radius: 50%;
}
body .profile-order-total {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A7AB8 !important;
  flex-shrink: 0 !important;
}

/* Achievement chips — small grid */
body .profile-achievements {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}
body .ach-card {
  background: #FFF !important;
  border-radius: 12px !important;
  padding: 10px 6px !important;
  text-align: center !important;
  border: 1px solid rgba(123,201,240,.16) !important;
  position: relative;
  opacity: .55;
  transition: all .25s ease;
}
body .ach-card.earned {
  opacity: 1;
  border-color: rgba(61,168,229,.4) !important;
  background: linear-gradient(180deg, #FFF 0%, #F0F8FE 100%) !important;
  box-shadow: 0 4px 12px -4px rgba(26,122,184,.18) !important;
}
body .ach-icon { font-size: 22px !important; margin-bottom: 3px !important; }
body .ach-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}
body .ach-desc {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 9px !important;
  color: #6B7785 !important;
  line-height: 1.2 !important;
}
body .ach-locked {
  position: absolute; top: 4px; right: 4px;
  width: 14px; height: 14px;
  color: #B0B8C2;
}

/* Logout — soft minimal */
body .profile-logout {
  width: 100% !important;
  padding: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(220,30,60,.22) !important;
  border-radius: 12px !important;
  color: #C92338 !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  transition: all .2s ease !important;
}
body .profile-logout:hover { background: rgba(220,30,60,.06) !important; border-color: rgba(220,30,60,.4) !important; }

body .auth-footer {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 10px !important;
  color: #8B95A0 !important;
  text-align: center !important;
  margin-top: 14px !important;
  padding: 10px !important;
}

/* ============================================================
   POP-CARDS — подпись под фото (Иван 29.04 20:18)
   Не overlay поверх, а отдельный белый блок снизу с чёрным текстом
   ============================================================ */
body .popular .pop-card {
  flex: 0 0 130px !important;
  width: 130px !important;
  height: 175px !important;        /* 130 фото + 45 для подписи */
  display: flex !important;
  flex-direction: column !important;
  background: #FFF !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body .popular .pop-card > img {
  width: 100% !important;
  height: 130px !important;
  flex: 0 0 130px !important;
  object-fit: cover !important;
  border-radius: 12px 12px 0 0 !important;
  display: block !important;
}
body .popular .pop-card .pop-card-meta {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  padding: 6px 10px 8px !important;
  gap: 2px !important;
  flex: 1 !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  border-radius: 0 0 12px 12px !important;
}
body .popular .pop-card .pop-card-name {
  display: block !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  letter-spacing: -.005em !important;
}
body .popular .pop-card .pop-card-price {
  display: inline-block !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1A7AB8 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  backdrop-filter: none !important;
  letter-spacing: -.01em !important;
}
body .popular .pop-card .pop-card-price::after {
  content: ' ₸';
  color: #6B7785;
  font-weight: 600;
  font-size: 10px;
  margin-left: 1px;
}
body .popular .pop-badge {
  top: 6px !important; right: 6px !important;
}
@media (min-width: 1024px) {
  body .popular .pop-card { flex: 0 0 160px !important; width: 160px !important; height: 215px !important; }
  body .popular .pop-card > img { height: 160px !important; flex-basis: 160px !important; }
  body .popular .pop-card .pop-card-name { font-size: 13px !important; }
  body .popular .pop-card .pop-card-price { font-size: 13px !important; }
}

/* ============================================================
   CAT-CARDS — show name label под image (Иван 29.04 20:20)
   ============================================================ */
body .categories .cat-card { display: flex !important; flex-direction: column !important; gap: 6px !important; }
body .categories .cat-card .cat-card-name {
  display: block !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  letter-spacing: -.005em !important;
  padding: 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (min-width: 720px) {
  body .categories .cat-card .cat-card-name { font-size: 12px !important; }
}

/* ============================================================
   NEW SECTION — only 4 selected products with similar-size photos
   Иван 29.04 20:21: «слишком много товара, поставь 4 одинаковых размера»
   ============================================================ */
body .new-row {
  grid-template-columns: repeat(4, 1fr) !important;
  display: grid !important;
  overflow: visible !important;
}
body .new-card {
  flex: unset !important;
  width: 100% !important;
}
@media (max-width: 360px) {
  body .new-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   POP-CARDS image — contain (не cover) для одинакового визуального размера
   Иван 29.04 20:25: чтобы все стаканы выглядели одинаково
   ============================================================ */
body .popular .pop-card > img {
  object-fit: contain !important;
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 100%) !important;
  padding: 4px !important;
}

/* ============================================================
   FORCE pop-card 130×175 — Иван 29.04 20:30
   Перебиваем предыдущий section.popular .popular-row .pop-card
   ============================================================ */
body main .popular .popular-row .pop-card,
section.popular .popular-row .pop-card.pop-card {
  flex: 0 0 130px !important;
  width: 130px !important;
  height: 175px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFF !important;
  overflow: hidden !important;
  position: relative !important;
}
body main .popular .popular-row .pop-card > img,
section.popular .popular-row .pop-card > img {
  width: 100% !important;
  height: 130px !important;
  flex: 0 0 130px !important;
  object-fit: contain !important;
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 100%) !important;
  padding: 4px !important;
  border-radius: 12px 12px 0 0 !important;
  display: block !important;
}
body main .popular .popular-row .pop-card .pop-card-meta {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFF !important;
  padding: 5px 9px 7px !important;
  flex: 1 !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1px !important;
  border-radius: 0 0 12px 12px !important;
}
body main .popular .popular-row .pop-card .pop-card-name {
  display: block !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  line-height: 1.15 !important;
}
body main .popular .popular-row .pop-card .pop-card-price {
  display: inline-block !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1A7AB8 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  backdrop-filter: none !important;
}
body main .popular .popular-row .pop-card .pop-card-price::after {
  content: ' ₸';
  color: #6B7785;
  font-weight: 600;
  font-size: 10px;
}
@media (min-width: 1024px) {
  body main .popular .popular-row .pop-card,
  section.popular .popular-row .pop-card.pop-card {
    flex: 0 0 160px !important; width: 160px !important; height: 215px !important;
  }
  body main .popular .popular-row .pop-card > img { height: 160px !important; flex-basis: 160px !important; }
  body main .popular .popular-row .pop-card .pop-card-name { font-size: 13px !important; }
  body main .popular .popular-row .pop-card .pop-card-price { font-size: 13px !important; }
}

/* ============================================================
   PROFILE FORCE — Иван 29.04 20:30 «не меняется!»
   Перебиваем styles.css с супер-specificity
   ============================================================ */
body main.auth-page .profile-wrap,
body .auth-page .profile-wrap,
html body .profile-wrap {
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 60%, #F0E8DA 100%) !important;
  padding: 18px 14px 110px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
}
html body .profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  margin-bottom: 10px !important;
  margin-top: 14px !important;
  box-shadow: 0 8px 22px -10px rgba(26,122,184,.18) !important;
  border: 1px solid rgba(123,201,240,.18) !important;
  position: relative !important;
}
html body .profile-header::before {
  content: 'MOOZDAY' !important;
  position: absolute !important;
  top: -10px !important; left: 14px !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 10px -2px rgba(26,122,184,.4) !important;
  z-index: 2 !important;
}
html body .profile-avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 10px -2px rgba(26,122,184,.4) !important;
}
html body .profile-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #0F1A26 !important;
}
html body .profile-phone {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #6B7785 !important;
}
html body .profile-bonus {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  color: #fff !important;
  box-shadow: 0 10px 26px -10px rgba(26,122,184,.45) !important;
}
html body .profile-bonus * { color: #fff !important; }
html body .profile-bonus-amt {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
}
html body .profile-section-title {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A7AB8 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 0 4px 6px !important;
  margin-top: 14px !important;
}
html body .profile-orders {
  background: #FFF !important;
  border-radius: 14px !important;
  border: 1px solid rgba(123,201,240,.18) !important;
  overflow: hidden !important;
}
html body .profile-order { padding: 10px 14px !important; }
html body .profile-order-icon {
  background: rgba(123,201,240,.18) !important;
  color: #1A7AB8 !important;
}
html body .profile-order-id {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #0F1A26 !important;
}
html body .profile-order-total {
  color: #1A7AB8 !important;
  font-weight: 700 !important;
}
html body .profile-logout {
  background: transparent !important;
  border: 1px solid rgba(220,30,60,.22) !important;
  color: #C92338 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
html body .auth-footer {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 10px !important;
  color: #8B95A0 !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* ============================================================
   Подписи pop-card + cat-card → чистый чёрный (Иван 29.04 20:35)
   ============================================================ */
html body .popular .pop-card .pop-card-name,
html body main .popular .popular-row .pop-card .pop-card-name,
html body .categories .cat-card .cat-card-name {
  color: #000000 !important;
}

/* ============================================================
   SIDEBAR FIX (правильные classes .sb-*) — Иван 29.04 20:40
   Cream фон + ВСЁ чёрным + лого тёмным
   ============================================================ */
html body .sidebar {
  background: linear-gradient(180deg, #FCF7EF 0%, #F0E8DA 100%) !important;
  color: #0F1A26 !important;
  border-right: 1px solid rgba(123,201,240,.18) !important;
}
html body .sidebar-backdrop {
  background: rgba(20,30,40,.55) !important;
  backdrop-filter: blur(4px) !important;
}
html body .sidebar-close {
  color: #0F1A26 !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(123,201,240,.25) !important;
  border-radius: 10px !important;
}
html body .sidebar-close svg { color: #0F1A26 !important; stroke: #0F1A26 !important; }

/* Brand wordmark — чёрный с cyan акцентом DAY */
html body .sidebar-brand { padding: 22px 22px 16px !important; }
html body .sidebar-wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: #0F1A26 !important;
  letter-spacing: -.02em !important;
  display: block !important;
}
html body .sidebar-wordmark .day { color: #1A7AB8 !important; }
html body .sidebar-tagline {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  color: #6B7785 !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 4px !important;
}

/* Nav items */
html body .sidebar-nav { padding: 4px 14px !important; }
html body .sb-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 12px !important;
  color: #0F1A26 !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.16,.7,.28,1) !important;
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(123,201,240,.1) !important;
}
html body .sb-link:last-child { border-bottom: 0 !important; }
html body .sb-link:hover {
  background: rgba(61,168,229,.10) !important;
  color: #1A7AB8 !important;
}
html body .sb-link.active {
  background: linear-gradient(135deg, rgba(61,168,229,.18) 0%, rgba(123,201,240,.10) 100%) !important;
  color: #1A7AB8 !important;
  font-weight: 700 !important;
}
html body .sb-link.active .sb-arrow { color: #3DA8E5 !important; }

html body .sb-icon {
  width: 36px !important;
  height: 36px !important;
  background: rgba(123,201,240,.16) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1A7AB8 !important;
  flex-shrink: 0 !important;
}
html body .sb-icon svg { width: 18px; height: 18px; color: #1A7AB8 !important; stroke: #1A7AB8 !important; }
html body .sb-link.active .sb-icon {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
}
html body .sb-link.active .sb-icon svg { color: #fff !important; stroke: #fff !important; }

html body .sb-label {
  flex: 1 !important;
  color: #0F1A26 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
html body .sb-link.active .sb-label { color: #1A7AB8 !important; }
html body .sb-sublabel {
  font-size: 11px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: #6B7785 !important;
}
html body .sb-arrow {
  color: #B0B8C2 !important;
  font-size: 18px !important;
  font-weight: 300 !important;
}
html body .sb-badge {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

/* Section block (адрес/тел) */
html body .sidebar-section { padding: 14px 22px !important; border-top: 1px solid rgba(123,201,240,.18) !important; }
html body .sb-section-title {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #1A7AB8 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 0 0 8px !important;
}
html body .sb-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  color: #0F1A26 !important;
  text-decoration: none !important;
}
html body .sb-info-icon {
  width: 28px; height: 28px;
  background: rgba(123,201,240,.18) !important;
  border-radius: 8px !important;
  display: flex; align-items: center; justify-content: center;
  color: #1A7AB8 !important;
  flex-shrink: 0;
}
html body .sb-info-icon svg { width: 14px; height: 14px; color: #1A7AB8 !important; stroke: #1A7AB8 !important; }
html body .sb-info-body { display: flex; flex-direction: column; gap: 1px; }
html body .sb-info-body b {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0F1A26 !important;
}
html body .sb-info-body em {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  color: #6B7785 !important;
}

/* Footer (lang + socials) */
html body .sidebar-foot {
  padding: 14px 22px 22px !important;
  border-top: 1px solid rgba(123,201,240,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
html body .lang-switch {
  display: flex !important;
  background: rgba(123,201,240,.16) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 2px !important;
}
html body .lang-switch button {
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0F1A26 !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
}
html body .lang-switch button.active {
  background: #FFFFFF !important;
  color: #1A7AB8 !important;
  box-shadow: 0 2px 6px -1px rgba(26,122,184,.22) !important;
}
html body .sidebar-socials { display: flex !important; gap: 8px !important; }
html body .sb-social {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(123,201,240,.25) !important;
  border-radius: 10px !important;
  display: flex; align-items: center; justify-content: center;
  color: #1A7AB8 !important;
  transition: all .2s ease !important;
}
html body .sb-social svg { color: #1A7AB8 !important; stroke: #1A7AB8 !important; width: 14px; height: 14px; }
html body .sb-social:hover {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  border-color: transparent !important;
}
html body .sb-social:hover svg { color: #fff !important; stroke: #fff !important; }

/* ============================================================
   AUTH page (login/register) — cream + чёрный + cyan accent
   Иван 29.04 20:40: убрать тёмный фон, минимал
   ============================================================ */
html body main.auth-page,
html body .auth-page {
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 60%, #F0E8DA 100%) !important;
  color: #0F1A26 !important;
}
html body .auth-page::before,
html body .auth-page::after { display: none !important; }
html body .auth-brand,
html body .auth-wordmark {
  color: #0F1A26 !important;
  text-shadow: none !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
}
html body .auth-wordmark .day { color: #1A7AB8 !important; }
html body .auth-tagline {
  color: #6B7785 !important;
  font-family: "Caveat", cursive !important;
}
html body .auth-tabs {
  background: rgba(123,201,240,.16) !important;
}
html body .auth-tab {
  color: #6B7785 !important;
  background: transparent !important;
}
html body .auth-tab.active {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -2px rgba(26,122,184,.4) !important;
}
html body .auth-input,
html body .auth-form input {
  background: #FFFFFF !important;
  border: 1px solid rgba(123,201,240,.35) !important;
  color: #0F1A26 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}
html body .auth-input:focus,
html body .auth-form input:focus {
  border-color: #3DA8E5 !important;
  box-shadow: 0 0 0 3px rgba(61,168,229,.18) !important;
  outline: 0 !important;
}
html body .auth-input::placeholder,
html body .auth-form input::placeholder { color: #B0B8C2 !important; }
html body .auth-btn,
html body .auth-btn-primary {
  background: linear-gradient(135deg, #3DA8E5 0%, #1A7AB8 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 8px 22px -6px rgba(26,122,184,.5) !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.16,.7,.28,1) !important;
}
html body .auth-btn:hover,
html body .auth-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px -8px rgba(26,122,184,.6) !important;
}
html body .auth-otp-cell {
  background: #FFFFFF !important;
  border: 2px solid rgba(123,201,240,.28) !important;
  color: #0F1A26 !important;
}
html body .auth-otp-cell:focus {
  border-color: #3DA8E5 !important;
  box-shadow: 0 0 0 4px rgba(61,168,229,.18) !important;
}
html body .auth-link, html body .auth-policy {
  color: #1A7AB8 !important;
}
html body .auth-footer { color: #8B95A0 !important; }

/* ============================================================
   FIX логотипов — Иван 29.04 20:42 «×3 меньше, аккуратно»
   ============================================================ */
/* Sidebar wordmark — small */
html body .sidebar-wordmark {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
html body .sidebar-tagline {
  font-size: 10px !important;
}
html body .sidebar-brand { padding: 16px 18px 12px !important; }

/* Auth page wordmark — small */
html body .auth-brand,
html body .auth-wordmark {
  font-size: clamp(22px, 5vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
html body .auth-tagline {
  font-size: 13px !important;
}
html body .auth-page .auth-stage,
html body .auth-page .auth-card {
  padding-top: 24px !important;
}

/* AUTH PAGE — гарантированно cream фон */
html body main.auth-page {
  background: linear-gradient(180deg, #FCF7EF 0%, #F5EFE6 60%, #F0E8DA 100%) !important;
}
html body main.auth-page > * { color: #0F1A26 !important; }
html body main.auth-page .auth-tagline { color: #6B7785 !important; }

/* ============================================================
   NEW SECTION → SLIDER (Иван 29.04 20:45)
   Горизонтальный пролёт пальцем + cyclic loop через JS
   ============================================================ */
html body .new-section .new-row {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 4px !important;
  padding: 4px 4px 8px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .new-section .new-row::-webkit-scrollbar { display: none !important; }
html body .new-section .new-card {
  flex: 0 0 130px !important;
  width: 130px !important;
  scroll-snap-align: start !important;
}
@media (min-width: 1024px) {
  html body .new-section .new-card { flex: 0 0 170px !important; width: 170px !important; }
}

/* ============================================================
   AUTH page — ALL TEXT must be readable on cream bg (Иван 29.04 20:50)
   Все белые надписи → чёрные/тёмные
   ============================================================ */
html body main.auth-page,
html body main.auth-page *,
html body .auth-page,
html body .auth-page * {
  color: #0F1A26 !important;
}
html body main.auth-page .auth-tagline,
html body main.auth-page .auth-policy,
html body main.auth-page .auth-link,
html body main.auth-page .auth-otp-hint,
html body main.auth-page .auth-otp-resend,
html body main.auth-page .auth-otp-back,
html body main.auth-page .auth-otp-ttl,
html body main.auth-page .auth-otp-title,
html body main.auth-page .auth-otp-sent,
html body main.auth-page small,
html body main.auth-page label,
html body main.auth-page .helper-text,
html body main.auth-page .auth-footer {
  color: #6B7785 !important;
}
/* Cyan akcent links */
html body main.auth-page .auth-link,
html body main.auth-page .auth-otp-resend,
html body main.auth-page .auth-otp-back {
  color: #1A7AB8 !important;
  font-weight: 600 !important;
}
/* Primary button keep white */
html body main.auth-page .auth-btn-primary,
html body main.auth-page .auth-btn-primary * {
  color: #FFFFFF !important;
}
html body main.auth-page .auth-tab.active,
html body main.auth-page .auth-tab.active * {
  color: #FFFFFF !important;
}
html body main.auth-page .auth-wordmark,
html body main.auth-page .auth-wordmark .day {
  color: #0F1A26 !important;
}
html body main.auth-page .auth-wordmark .day { color: #1A7AB8 !important; }