/* Market's foundation: fonts, light theme, atmosphere background, glass surfaces. */
@font-face { font-family: "Noto Sans"; font-weight: 400; font-display: swap; src: url(/fonts/noto-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-display: swap; src: url(/fonts/noto-sans-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-display: swap; src: url(/fonts/noto-sans-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-display: swap; src: url(/fonts/noto-sans-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-display: swap; src: url(/fonts/noto-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+20B4,U+2122; }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-display: swap; src: url(/fonts/noto-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+20B4,U+2122; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-display: swap; src: url(/fonts/noto-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+20B4,U+2122; }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-display: swap; src: url(/fonts/noto-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+20B4,U+2122; }
@font-face { font-family: "Yanone Kaffeesatz"; font-weight: 600; font-display: swap; src: url(/fonts/yanone-kaffeesatz-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Yanone Kaffeesatz"; font-weight: 700; font-display: swap; src: url(/fonts/yanone-kaffeesatz-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Yanone Kaffeesatz"; font-weight: 600; font-display: swap; src: url(/fonts/yanone-kaffeesatz-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Yanone Kaffeesatz"; font-weight: 700; font-display: swap; src: url(/fonts/yanone-kaffeesatz-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F,U+20AC,U+2122; }

:root {
  --font-noto-sans: "Noto Sans";
  --font-display: "Yanone Kaffeesatz";
}

html {
  height: 100%;
  color-scheme: dark;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

html.theme-light {
  color-scheme: light;
  --color-bg: #eef2f0;
  --color-solid-button: #ffffff;
  --color-bg-wash-start: rgb(244 247 246 / 0.2);
  --color-bg-wash-mid: rgb(238 242 240 / 0.4);
  --color-bg-wash-end: rgb(232 238 236 / 0.66);
  --color-surface: rgb(255 255 255 / 0.78);
  --color-surface-muted: rgb(18 24 28 / 0.06);
  --color-text: #161d20;
  --color-text-muted: rgb(22 29 32 / 0.68);
  --color-border: rgb(18 24 28 / 0.14);
  --color-accent: #2f8f6e;
  --color-accent-hover: #26755a;
  --color-accent-text: #f4f7f6;
  --color-cta: #161d20;
  --color-cta-text: #f4f7f6;
  --color-cta-hover: #2a3336;
  --color-danger: #b54a4a;
  --color-success: #2f8f6e;
  --color-warning: #9a7420;
  --color-overlay: rgb(22 29 32 / 0.42);
  --color-focus: #2f8f6e;
  --color-glass: rgb(255 255 255 / 0.62);
  --color-glass-strong: rgb(255 255 255 / 0.82);
  --color-glass-pill: rgb(255 255 255 / 0.72);
  --color-glass-pill-border: rgb(18 24 28 / 0.12);
  --color-glass-dark: rgb(255 255 255 / 0.9);
  --color-glass-frost: rgb(255 255 255 / 0.92);
  --color-glass-frost-border: rgb(18 24 28 / 0.12);
  --color-product-panel: rgb(255 255 255 / 0.96);
  --color-product-panel-border: rgb(18 24 28 / 0.12);
  --color-order-card: #ffffff;
  --color-control: rgb(255 255 255 / 0.9);
  --color-hover: rgb(18 24 28 / 0.08);
  --color-media-placeholder: rgb(18 24 28 / 0.08);
  --color-on-media: rgb(255 255 255 / 0.95);
  --color-on-media-muted: rgb(255 255 255 / 0.28);
  --shadow-sm: 0 8px 24px rgb(18 24 28 / 0.1);
  --shadow-md: 0 18px 40px rgb(18 24 28 / 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(180deg, var(--color-bg-wash-start) 0%, var(--color-bg-wash-mid) 58%, var(--color-bg-wash-end) 100%),
    url("/img/atmosphere.svg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-sans), "Segoe UI", sans-serif;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding-top: env(safe-area-inset-top);
}

html.theme-light body {
  background-image:
    linear-gradient(180deg, var(--color-bg-wash-start) 0%, var(--color-bg-wash-mid) 58%, var(--color-bg-wash-end) 100%),
    url("/img/atmosphere-light.svg");
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.font-display {
  font-family: var(--font-display), var(--font-sans), "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.glass {
  background: var(--color-glass-strong);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.glass-pill {
  background: var(--color-glass-pill);
  border: 1px solid var(--color-glass-pill-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.product-panel {
  background: var(--color-product-panel);
  border: 1px solid var(--color-product-panel-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.banner-particle {
  position: absolute;
  top: -10%;
  animation: banner-fall linear infinite;
}
.banner-leaf, .banner-flake {
  display: block;
  animation: banner-sway ease-in-out infinite alternate;
}
.banner-leaf { height: auto; max-width: none; opacity: 0.95; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25)); }
.banner-flake { opacity: 0.95; }
@keyframes banner-fall { from { top: -10%; } to { top: 110%; } }
@keyframes banner-sway {
  from { transform: translateX(-14px) rotate(-25deg); }
  to { transform: translateX(14px) rotate(35deg); }
}
@media (prefers-reduced-motion: reduce) { .banner-particle { display: none; } }