/* ============================================================
   MilfShop38 — единый файл стилей.
   Собран из модулей static/css/ в порядке @import из app.css.
   ============================================================ */

/* ===== css/variables.css ===== */

:root {
  --bg: #080012;
  --panel: rgba(23, 8, 34, .78);
  --panel-strong: rgba(33, 11, 50, .94);
  --text: #ffffff;
  --muted: #d9ccea;
  --line: rgba(255, 255, 255, .14);
  --accent: #543eaf;
  --accent-2: #8a63ff;
  --accent-3: #c65cff;
  --green: #2fd9a8;
  --red: #ff4d8d;
  --yellow: #ffd46a;
  --shadow: 0 22px 70px rgba(0, 0, 0, .38);
  --scroll-shift: 0px;
  --touch-x: 50vw;
  --touch-y: 28vh;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.theme-glass {
  --bg: #06101a;
  --panel: rgba(255, 255, 255, .10);
  --panel-strong: rgba(12, 30, 45, .88);
  --accent: #62e6ff;
  --accent-2: #bf7dff;
  --accent-3: #86f7c8;
}

.theme-hot {
  --bg: #130306;
  --panel: rgba(42, 8, 12, .76);
  --panel-strong: rgba(75, 18, 18, .92);
  --accent: #ff7a1a;
  --accent-2: #ff2a6d;
  --accent-3: #ffd166;
}

.theme-minimal {
  --bg: #07080d;
  --panel: rgba(26, 28, 37, .78);
  --panel-strong: rgba(34, 37, 48, .96);
  --accent: #f5f5f5;
  --accent-2: #9ca3af;
  --accent-3: #6ee7b7;
}

/* Alias the variant/flavour selection tokens onto the shared theme tokens
   so the flavour & colour pickers use the SAME accent as the cart and the
   rest of the interface across every theme. Declared on both :root and body
   (the theme class lives on <body>) so they always resolve to the active
   theme's accent instead of the old hard-coded #7c3aed purple. */
:root,
body {
  --color-accent: var(--accent);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --color-bg: var(--panel);
  --color-bg-card: var(--panel);
  --color-bg-panel: var(--panel-strong);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  overflow-x: hidden;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

.hidden {
  display: none !important;
}


.particles-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Выше фоновых слоёв (.blur-bg -10, body::before -12), но строго ниже
     контента: .app-shell и .toast зафиксированы на z-index: 2 !important,
     а панели/навигация — на 60/100/120. Поэтому слой держим на z-index: 1.
     Отрицательный z-index здесь не годится: непрозрачный фон body его
     перекрывает. */
  z-index: 1;
  pointer-events: none;
  opacity: .85;
}

.blur-bg {
  position: fixed;
  inset: -18vh -22vw;
  z-index: -10;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--touch-x) var(--touch-y), rgba(255, 255, 255, .18), transparent var(--scroll-glow, 28%)),
    linear-gradient(180deg, #08080e 0%, #04040b 48%, #08010b 100%);
  transform: translateZ(0);
  isolation: isolate;
}

.blur-bg::before,
.blur-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 40%;
  filter: blur(86px) saturate(1.35);
  opacity: .72;
  mix-blend-mode: screen;
  will-change: transform;
}

.blur-bg::before {
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(51, 0, 255, .85),
    rgba(26, 255, 247, .80),
    rgba(0, 255, 247, .66),
    rgba(228, 49, 255, .62),
    rgba(105, 68, 255, .78),
    rgba(51, 0, 255, .85));
  animation: aurora-spin 34s linear infinite;
}

.blur-bg::after {
  inset: 4% -10% -26%;
  background:
    radial-gradient(circle at 18% 18%, rgba(85, 42, 255, .72), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(0, 255, 247, .68), transparent 28%),
    radial-gradient(circle at 48% 78%, rgba(227, 43, 255, .58), transparent 33%),
    radial-gradient(circle at 86% 78%, rgba(62, 255, 249, .52), transparent 30%);
  animation: aurora-breathe 18s ease-in-out infinite alternate;
}

.blob {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(58px) saturate(1.25);
  opacity: .86;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.blob-one {
  width: 560px;
  height: 560px;
  left: -190px;
  top: calc(-30px + var(--scroll-shift));
  background: radial-gradient(circle, rgba(51, 0, 255,.95), rgba(89, 47, 255,.45) 45%, transparent 72%);
  animation: float-one 16s ease-in-out infinite alternate;
}

.blob-two {
  width: 620px;
  height: 620px;
  right: -250px;
  top: calc(150px - var(--scroll-shift));
  background: radial-gradient(circle, rgba(0, 255, 247,.92), rgba(28, 255, 247,.46) 44%, transparent 74%);
  animation: float-two 19s ease-in-out infinite alternate;
}

.blob-three {
  width: 530px;
  height: 530px;
  left: 25%;
  bottom: -220px;
  background: radial-gradient(circle, rgba(226, 40, 255,.78), rgba(51, 0, 255,.33) 48%, transparent 74%);
  animation: float-three 21s ease-in-out infinite alternate;
}

.blob-four {
  width: 380px;
  height: 380px;
  left: 52%;
  top: 6%;
  background: radial-gradient(circle, rgba(102, 64, 255,.88), rgba(255, 0, 102,.35) 48%, transparent 73%);
  animation: float-four 23s ease-in-out infinite alternate;
}

.blob-five {
  width: 420px;
  height: 420px;
  right: 10%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(75, 255, 249,.82), rgba(39, 46, 255,.34) 46%, transparent 74%);
  animation: float-five 27s ease-in-out infinite alternate;
}

.soft-glass {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 28%, rgba(255,255,255,.06) 52%, transparent 70%),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.10), transparent 35%);
  backdrop-filter: blur(22px) saturate(1.28);
  opacity: .55;
  animation: glass-drift 15s ease-in-out infinite alternate;
}

.soft-noise {
  position: absolute;
  inset: 0;
  opacity: .22;
  background:
    linear-gradient(rgba(255, 255, 255, .040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .92), transparent 86%);
  animation: noise-drift 28s linear infinite;
}

@keyframes aurora-spin {
  0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(180deg) scale(1.08); }
  100% { transform: translate3d(-3%, -2%, 0) rotate(360deg) scale(1); }
}

@keyframes aurora-breathe {
  0% { transform: translate3d(-8%, -4%, 0) scale(1.02); opacity: .58; }
  50% { transform: translate3d(7%, 4%, 0) scale(1.18); opacity: .82; }
  100% { transform: translate3d(-2%, 9%, 0) scale(1.06); opacity: .68; }
}

@keyframes float-one {
  0% { transform: translate3d(-60px, -50px, 0) scale(.92); }
  50% { transform: translate3d(190px, 230px, 0) scale(1.14); }
  100% { transform: translate3d(70px, 420px, 0) scale(1.04); }
}

@keyframes float-two {
  0% { transform: translate3d(80px, -90px, 0) scale(1); }
  50% { transform: translate3d(-240px, 180px, 0) scale(1.17); }
  100% { transform: translate3d(-120px, 390px, 0) scale(.96); }
}

@keyframes float-three {
  0% { transform: translate3d(-160px, 80px, 0) scale(1); }
  50% { transform: translate3d(170px, -240px, 0) scale(1.18); }
  100% { transform: translate3d(-80px, -420px, 0) scale(.98); }
}

@keyframes float-four {
  0% { transform: translate3d(50px, 20px, 0) scale(.94); }
  50% { transform: translate3d(-170px, 260px, 0) scale(1.12); }
  100% { transform: translate3d(120px, 480px, 0) scale(.98); }
}

@keyframes float-five {
  0% { transform: translate3d(90px, 30px, 0) scale(1); }
  50% { transform: translate3d(-110px, -260px, 0) scale(1.16); }
  100% { transform: translate3d(70px, -520px, 0) scale(.98); }
}

@keyframes glass-drift {
  from { transform: translate3d(-4%, -2%, 0) rotate(-1deg); }
  to { transform: translate3d(5%, 3%, 0) rotate(1deg); }
}

@keyframes noise-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-44px, 44px, 0); }
}

.app-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 12px 12px 116px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -4px 14px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 0 0 28px 28px;
  background: rgba(6, 6, 10, .54);
  backdrop-filter: blur(22px) saturate(1.28);
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 42px rgba(195, 92, 255, .30);
}

.brand-title {
  min-width: 0;
}

.brand h1 {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: .3px;
}

.brand p {
  color: var(--muted);
  margin-top: 4px;
  font-size: 13px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn,
.pill-btn,
.primary-btn,
.ghost-btn,
.danger-btn {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  padding: 11px 13px;
  font-weight: 850;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .24);
}

.primary-btn {
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 42px rgba(195, 92, 255, .28);
}

.danger-btn {
  color: #ffdbe9;
  background: rgba(255, 86, 154, .14);
  border-color: rgba(255, 86, 154, .34);
}

.full {
  width: 100%;
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(13, 13, 22, .58), rgba(13, 13, 22, .36));
  box-shadow: var(--shadow);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 24px 18px;
  margin-bottom: 14px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(circle at 82% 72%, rgba(255, 255, 255, .16), transparent 30%),
    linear-gradient(135deg, rgba(195, 92, 255, .32), rgba(229, 59, 255, .16) 52%, rgba(89, 255, 249, .12)),
    rgba(255, 255, 255, .06);
  box-shadow: var(--shadow);
}

.hero::after {
  content: "💨";
  position: absolute;
  right: -20px;
  bottom: -38px;
  font-size: 132px;
  opacity: .11;
  transform: rotate(-14deg);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 750;
}

.hero h2 {
  position: relative;
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(30px, 7vw, 48px);
  line-height: .99;
  letter-spacing: -.8px;
}

.hero p {
  position: relative;
  max-width: 720px;
  color: var(--muted);
  margin-top: 13px;
  font-size: 18px;
  line-height: 1.45;
}

.notice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.notice {
  display: flex;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(69, 233, 228, .25);
  border-radius: 25px;
  background: linear-gradient(135deg, rgba(69, 233, 228, .10), rgba(255, 255, 255, .04));
}

.notice strong {
  display: block;
  margin-bottom: 4px;
}

.hello {
  margin-bottom: 14px;
  padding: 15px 16px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.daily {
  position: relative;
  padding: 1px;
  margin-bottom: 15px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
  box-shadow: 0 24px 76px rgba(195, 92, 255, .20);
}

.daily-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.28fr .82fr;
  gap: 13px;
  min-height: 210px;
  border-radius: 31px;
  padding: 17px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12), transparent 28%),
    linear-gradient(145deg, rgba(45, 7, 62, .97), rgba(85, 19, 107, .72));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: white;
  font-size: 12px;
  font-weight: 1000;
}

.daily h3 {
  margin: 13px 0 6px;
  font-size: clamp(26px, 7vw, 42px);
  line-height: 1.02;
}

.daily .subtitle {
  color: #fff;
  font-weight: 900;
  margin-bottom: 6px;
}

.daily p {
  color: var(--muted);
  line-height: 1.38;
}

.daily-art {
  min-height: 160px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(229, 59, 255, .44), transparent 70%), rgba(255, 255, 255, .08);
  font-size: 76px;
}

.daily-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}

.price {
  font-size: 23px;
  font-weight: 1000;
}

.old-price {
  color: rgba(255, 255, 255, .52);
  text-decoration: line-through;
}

.search-input {
  width: 100%;
  margin-bottom: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  outline: none;
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: 4px;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  padding: 12px 8px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
}

.chip .chip-emoji {
  font-size: 22px;
  line-height: 1;
}

.chip .chip-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 4px 0 12px;
}

.section-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 24px;
  line-height: 1.1;
}

/* Иконка внутри заголовка: ровно по центру текста, без сдвига по базовой линии */
.h-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.h-ic .ui-ic {
  display: block;
}

/* Общее правило для всех inline-иконок в интерфейсе */
.ui-ic {
  vertical-align: middle;
  flex: 0 0 auto;
}

.muted {
  color: var(--muted);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(8, 8, 16, .58), rgba(8, 8, 16, .34));
  box-shadow: 0 18px 54px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px) saturate(1.18);
  contain: content;
}

.card-neon { box-shadow: 0 18px 58px rgba(0, 255, 247, .12); }
.card-glass { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(8, 8, 16,.30)); }
.card-sale { border-color: rgba(102, 64, 255,.26); background: linear-gradient(180deg, rgba(102, 64, 255,.10), rgba(8, 8, 16,.35)); }
.card-ice { border-color: rgba(89, 255, 249,.25); background: linear-gradient(180deg, rgba(89, 255, 249,.09), rgba(8, 8, 16,.35)); }
.card-minimal { box-shadow: none; background: rgba(8, 8, 16,.34); }
.card-lux { border-color: rgba(136, 106, 255,.30); background: linear-gradient(145deg, rgba(136, 106, 255,.09), rgba(8, 8, 16,.36)); }

.accent-purple { --local-accent: #b35cff; }
.accent-pink { --local-accent: #ff3bd5; }
.accent-blue { --local-accent: #59e1ff; }
.accent-orange { --local-accent: #ff8a2a; }
.accent-green { --local-accent: #45e98f; }
.accent-gray { --local-accent: #b7bbc8; }

.product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 42%), rgba(255, 255, 255, .045);
}

.product-image img {
  width: 100%;
  height: 100%;
  /* Товарные фото (1000×1000) показываем целиком, без обрезки. */
  object-fit: contain;
  padding: 10px;
}

/* Оба режима теперь показывают фото целиком — обрезка товарных фото убрана. */
.fit-cover img,
.fit-contain img { object-fit: contain; padding: 10px; }

.product-emoji {
  font-size: 60px;
  filter: drop-shadow(0 14px 18px rgba(255, 255, 255, .12));
}

.product-badge,
.stock-badge {
  position: absolute;
  top: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .44);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 900;
  padding: 6px 8px;
}

.product-badge { left: 9px; }
.stock-badge { right: 9px; }

.product-body {
  padding: 12px;
}

.product-title {
  min-height: 36px;
  font-size: 15px;
  line-height: 1.18;
}

.title-bold { font-weight: 1000; }
.title-soft { font-weight: 850; letter-spacing: .2px; }
.title-strict { font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .35px; }

.product-desc {
  min-height: 34px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.short-note {
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 12px;
}

.age-mark {
  display: inline-flex;
  margin-top: 8px;
  border: 1px solid rgba(136, 106, 255, .26);
  border-radius: 999px;
  background: rgba(136, 106, 255, .10);
  color: #bbaaff;
  padding: 5px 8px;
  font-size: 11px;
}

.buy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 12px;
}

.buy-btn {
  border: 0;
  border-radius: 16px;
  padding: 11px 10px;
  background: linear-gradient(135deg, var(--local-accent, var(--accent)), var(--accent-2));
  color: white;
  font-weight: 1000;
  box-shadow: 0 12px 30px rgba(195, 92, 255, .26);
  transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}

.buy-btn:active {
  transform: scale(.97);
}

.inline-qty {
  min-width: 104px;
  display: grid;
  grid-template-columns: 34px minmax(28px, 1fr) 34px;
  align-items: center;
  gap: 5px;
  border-radius: 16px;
  padding: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 30px rgba(195, 92, 255, .18);
  animation: soft-pop .16s ease-out;
}

.inline-qty button {
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--local-accent, var(--accent)), var(--accent-2));
  color: white;
  font-size: 18px;
  font-weight: 1000;
}

.inline-qty button:disabled {
  opacity: .45;
}

.inline-qty strong {
  text-align: center;
  font-size: 16px;
}

.reveal-field {
  animation: soft-pop .18s ease-out;
}

@keyframes soft-pop {
  from { opacity: .45; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bottom-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(956px, calc(100% - 24px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 26px;
  background: rgba(12, 2, 17, .76);
  backdrop-filter: blur(22px) saturate(1.28);
  box-shadow: 0 16px 62px rgba(0, 0, 0, .45);
}

.cart-btn {
  min-height: 56px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-size: 17px;
  font-weight: 1000;
}

.music-btn {
  width: 56px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  font-size: 20px;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: 24px;
  padding: 22px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, .045);
}

.cart-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
}

.cart-thumb {
  width: 70px;
  height: 86px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  font-size: 30px;
}

.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qty {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

.qty button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  font-size: 19px;
  font-weight: 1000;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0;
  font-size: 16px;
  font-weight: 700;
}
.total-row > :last-child { white-space: nowrap; }

.form-grid {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .085);
  outline: none;
  padding: 13px 14px;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  padding: 13px;
  text-align: left;
  font-weight: 900;
}

/* .choice.active styles are now centralised in the V7 block below */

.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 0 14px;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  padding: 11px 14px;
  font-weight: 850;
}

.admin-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.panel {
  padding: 16px;
  margin-bottom: 13px;
  border: 1px solid var(--line);
  border-radius: 27px;
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .25);
}

.panel h2 {
  margin-bottom: 14px;
}

.admin-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .055);
}

/* When checkbox is present: checkbox + thumb + body */
[data-product-row-id] {
  grid-template-columns: 24px 54px 1fr;
}

.admin-thumb {
  width: 54px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  font-size: 24px;
  align-self: center;
}

.admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Right side: info on top, controls on bottom */
.admin-row-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  align-self: center;
}

.admin-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-row-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.3;
}

.admin-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-row-price {
  font-size: 12px;
  color: var(--muted, rgba(255,255,255,.5));
}

.admin-row-status {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: .02em;
}

.status-on {
  background: rgba(74, 222, 128, .14);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .3);
}

.status-off {
  background: rgba(255, 58, 137, .12);
  color: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .12);
}

.status-hidden {
  background: rgba(255, 168, 76, .16);
  color: #ffc27a;
  border: 1px solid rgba(255, 168, 76, .38);
}

.admin-row--hidden {
  border-style: dashed !important;
  border-color: rgba(255, 168, 76, .38) !important;
  background: rgba(48, 32, 18, .42) !important;
}

.admin-row--hidden .admin-row-title {
  color: rgba(255, 255, 255, .72);
}

.admin-row--hidden .admin-thumb {
  position: relative;
  filter: grayscale(.28) brightness(.82);
}

.admin-thumb-hidden-mark {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 16px;
  border-radius: 7px;
  background: rgba(18, 12, 8, .82);
  color: #ffd7a6;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  pointer-events: none;
}

/* Bottom controls row: stepper left, actions right */
.admin-row-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.action-icon-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.mini-actions button {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  padding: 7px 9px;
  font-weight: 850;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .075);
  text-align: left;
  padding: 13px;
}

.theme-card.active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(195, 92, 255, .48), rgba(229, 59, 255, .26));
}

.age-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(14px);
}

.age-box {
  width: min(520px, 100%);
  padding: 20px;
}

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 120;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(15, 5, 22, .88);
  backdrop-filter: blur(22px) saturate(1.28);
  box-shadow: var(--shadow);
  text-align: center;
  font-weight: 850;
}

@media (max-width: 720px) {
  .notice-row,
  .daily-inner,
  .two-col {
    grid-template-columns: 1fr;
  }

  .daily-art {
    min-height: 150px;
  }

  .brand h1 {
    max-width: 160px;
  }

  .hero h2 {
    font-size: 36px;
  }
}

@media (max-width: 340px) {
  .choice-grid,
  .theme-grid {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== css/base.css ===== */

/* ===== Polished acid-glass interface ===== */
:root,
.theme-acid {
  --bg: #0a0518;
  --panel: rgba(23, 13, 40, .66);
  --panel-strong: rgba(30, 17, 52, .88);
  --text: #ffffff;
  --muted: #d9ccea;
  --line: rgba(180, 150, 255, .18);
  --accent: #543eaf;
  --accent-2: #8a63ff;
  --accent-3: #c65cff;
  --green: #2fd9a8;
  --yellow: #ffd46a;
  --shadow: 0 28px 90px rgba(0, 0, 0, .52);
}

html,
body {
  background: #050511 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -12;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(83, 40, 255, .20), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(35, 243, 236, .19), transparent 30%),
    radial-gradient(circle at 45% 90%, rgba(230, 70, 255, .12), transparent 35%),
    linear-gradient(180deg, #060611 0%, #090214 42%, #03030a 100%);
}

.blur-bg {
  background: transparent !important;
  filter: saturate(1.25);
  pointer-events: none;
}

.blur-bg::before,
.blur-bg::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(58px);
  opacity: .82;
  mix-blend-mode: screen;
  will-change: transform;
}

.blur-bg::before {
  width: 520px;
  height: 520px;
  left: -190px;
  top: 70px;
  background: radial-gradient(circle, rgba(85, 42, 255,.95), rgba(32, 247, 240,.46) 42%, transparent 72%);
  animation: acid-orbit-a 7.5s ease-in-out infinite alternate;
}

.blur-bg::after {
  width: 560px;
  height: 560px;
  right: -240px;
  top: 240px;
  background: radial-gradient(circle, rgba(45, 255, 248,.95), rgba(107, 70, 255,.35) 45%, transparent 74%);
  animation: acid-orbit-b 9s ease-in-out infinite alternate;
}

.blob {
  opacity: .92 !important;
  filter: blur(56px) !important;
}

.blob-one {
  width: 420px !important;
  height: 420px !important;
  left: -160px !important;
  top: calc(360px + var(--scroll-shift)) !important;
  background: radial-gradient(circle, rgba(117, 82, 255,.96), rgba(228, 49, 255,.28) 48%, transparent 72%) !important;
  animation: neon-float-one 8s ease-in-out infinite alternate !important;
}

.blob-two {
  width: 470px !important;
  height: 470px !important;
  right: -210px !important;
  top: calc(610px - var(--scroll-shift)) !important;
  background: radial-gradient(circle, rgba(0, 255, 247,.88), rgba(132, 60, 255,.28) 50%, transparent 72%) !important;
  animation: neon-float-two 10s ease-in-out infinite alternate !important;
}

.blob-three {
  width: 440px !important;
  height: 440px !important;
  left: 32% !important;
  bottom: -170px !important;
  background: radial-gradient(circle, rgba(115, 80, 255,.72), rgba(22, 255, 247,.24) 42%, transparent 72%) !important;
  animation: neon-float-three 11s ease-in-out infinite alternate !important;
}

.soft-noise {
  opacity: .20 !important;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(83, 40, 255,.08), transparent 45%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  animation: noise-drift 16s linear infinite !important;
}

@keyframes acid-orbit-a {
  0% { transform: translate3d(-40px, -30px, 0) scale(.96); }
  45% { transform: translate3d(210px, 120px, 0) scale(1.13); }
  100% { transform: translate3d(90px, 360px, 0) scale(1.02); }
}
@keyframes acid-orbit-b {
  0% { transform: translate3d(50px, -70px, 0) scale(.98); }
  55% { transform: translate3d(-260px, 80px, 0) scale(1.16); }
  100% { transform: translate3d(-90px, 320px, 0) scale(1.04); }
}
@keyframes neon-float-one {
  0% { transform: translate3d(-30px, 0, 0) scale(.9); }
  50% { transform: translate3d(170px, -80px, 0) scale(1.12); }
  100% { transform: translate3d(65px, 160px, 0) scale(1.02); }
}
@keyframes neon-float-two {
  0% { transform: translate3d(65px, -25px, 0) scale(1); }
  50% { transform: translate3d(-180px, 80px, 0) scale(1.16); }
  100% { transform: translate3d(-80px, 235px, 0) scale(.98); }
}
@keyframes neon-float-three {
  0% { transform: translate3d(-85px, 35px, 0) scale(.96); }
  50% { transform: translate3d(130px, -170px, 0) scale(1.15); }
  100% { transform: translate3d(-25px, -290px, 0) scale(1); }
}

.app-shell {
  padding: 14px 14px 126px !important;
}

.topbar,
.panel,
.card,
.hero,
.daily,
.product-card,
.search-input,
.chip,
.bottom-bar,
.age-box {
  border-color: rgba(147, 120, 255,.18) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.topbar {
  background: rgba(5, 5, 17, .74) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  border-radius: 0 0 30px 30px !important;
}

.logo {
  background: #543eaf !important;
  box-shadow: 0 0 34px rgba(84, 62, 175,.28), 0 16px 40px rgba(84, 62, 175,.22) !important;
}

.brand h1 {
  letter-spacing: .2px !important;
}

.brand p,
.muted,
.product-desc {
  color: rgba(231, 246, 245,.72) !important;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 32px 26px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(84, 62, 175,.28), transparent 30%),
    radial-gradient(circle at 86% 30%, rgba(84, 62, 175,.2), transparent 32%),
    linear-gradient(135deg, rgba(40, 26, 78,.88), rgba(12, 10, 26,.72) 52%, rgba(20, 14, 44,.62)) !important;
}

.hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -52px;
  bottom: -72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 49, 255,.34), rgba(35, 243, 236,.17) 48%, transparent 72%);
  filter: blur(4px);
  animation: hero-pulse 5.5s ease-in-out infinite alternate;
}
@keyframes hero-pulse {
  from { transform: translate3d(0,0,0) scale(.94); opacity: .64; }
  to { transform: translate3d(-20px,-30px,0) scale(1.15); opacity: .95; }
}

.kicker,
.badge,
.product-badge,
.stock-badge,
.short-note,
.age-mark {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(145, 118, 255,.20) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.kicker,
.badge {
  color: #dcd3ff !important;
}

.hero h2 {
  max-width: 680px;
  font-size: clamp(34px, 7.2vw, 58px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}
.hero p {
  max-width: 620px;
  font-size: clamp(17px, 4.3vw, 25px) !important;
  color: rgba(243, 240, 255,.78) !important;
}

.hello {
  font-size: 20px !important;
  line-height: 1.35 !important;
  background: rgba(8, 9, 24,.62) !important;
  border-radius: 26px !important;
}

.daily {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(90, 49, 255,.30), transparent 32%),
    linear-gradient(135deg, rgba(66, 13, 84,.92), rgba(20, 95, 93,.48)) !important;
}
.daily-bg {
  position: absolute;
  inset: 0;
  opacity: .34;
  background-size: cover;
  background-position: center;
  filter: blur(7px) saturate(1.2);
  transform: scale(1.06);
}
.daily::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 53, 255,.36), transparent 70%);
  filter: blur(12px);
  animation: hero-pulse 6s ease-in-out infinite alternate;
}
.daily-inner {
  position: relative;
  z-index: 1;
  padding: 26px !important;
}
.daily-art {
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.daily-art img {
  border-radius: 24px !important;
}
.daily h3 {
  font-size: clamp(30px, 7vw, 52px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.search-input {
  background: rgba(6, 6, 18, .68) !important;
  border-radius: 25px !important;
  padding: 20px 22px !important;
}

.chip,
.icon-btn,
.pill-btn,
.ghost-btn,
.music-btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(147, 120, 255,.16) !important;
}
.chip.active,
.primary-btn,
.cart-btn,
.buy-btn {
  color: #ffffff !important;
  background: #543eaf !important;
  border: none !important;
  box-shadow: 0 18px 50px rgba(84, 62, 175,.28), 0 0 38px rgba(84, 62, 175,.18) !important;
}
.danger-btn {
  background: rgba(255, 74, 146, .14) !important;
}

.products-grid {
  gap: 14px !important;
}
.product-card {
  overflow: hidden;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(90, 49, 255,.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 15, 30,.84), rgba(8, 8, 18,.92)) !important;
  transform: translateZ(0);
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 22%, transparent 70%, rgba(147, 120, 255,.08));
  opacity: .55;
}
.product-image {
  background: linear-gradient(135deg, rgba(84, 62, 175,.16), rgba(84, 62, 175,.08)) !important;
}
.product-emoji {
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.product-title {
  letter-spacing: -.025em !important;
}
.price {
  color: #8b73ff !important;
  text-shadow: 0 0 20px rgba(84, 62, 175,.2);
}
.old-price {
  color: rgba(255,255,255,.45) !important;
}

.bottom-bar {
  background: rgba(5, 5, 16,.82) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

.field input,
.field textarea,
.field select {
  background: rgba(5, 5, 17, .74) !important;
  border-color: rgba(147, 120, 255,.18) !important;
  border-radius: 18px !important;
}
.admin-tab.active {
  color: #ffffff !important;
  background: #543eaf !important;
}

@media (max-width: 560px) {
  .hero { min-height: 238px; }
  .daily-inner { grid-template-columns: 1fr !important; }
  .daily-art { min-height: 180px; }
}

/* Owner / администраторы */
.admin-profile {
  margin-top: 8px;
  font-size: 13px;
}
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.permission-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.25;
}
/* .permission-item.active centralised in V7 block */
.owner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.owner-list span {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
}
code {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.09);
  color: var(--yellow);
}

/* Яркий кислотный слой: зелёный + жёлтый + розовый, постоянное мягкое плавание */
.theme-acid {
  --bg: #03030b;
  --panel: rgba(7, 18, 18, .70);
  --panel-strong: rgba(8, 22, 22, .92);
  --accent: #6038ff;
  --accent-2: #5d35ff;
  --accent-3: #00fff7;
  --muted: #ded8f6;
}
.theme-acid .blur-bg {
  background:
    radial-gradient(circle at var(--touch-x) var(--touch-y), rgba(255, 255, 255, .11), transparent 24%),
    radial-gradient(circle at 15% 12%, rgba(96, 56, 255,.18), transparent 34%),
    radial-gradient(circle at 86% 30%, rgba(93, 53, 255,.15), transparent 32%),
    linear-gradient(180deg, #05010a 0%, #021211 52%, #050308 100%);
}
.theme-acid .blob-one { background: radial-gradient(circle, rgba(96, 56, 255,.95), transparent 68%); filter: blur(54px); }
.theme-acid .blob-two { background: radial-gradient(circle, rgba(228, 55, 255,.70), transparent 70%); filter: blur(60px); }
.theme-acid .blob-three { background: radial-gradient(circle, rgba(0, 255, 247,.86), transparent 72%); filter: blur(58px); }
.theme-acid .hero,
.theme-acid .daily {
  box-shadow: 0 28px 90px rgba(96, 56, 255,.12), inset 0 0 0 1px rgba(255,255,255,.10);
}
.theme-acid .primary-btn {
  color: #111;
  text-shadow: none;
  background: linear-gradient(135deg, #6038ff, #5d35ff 48%, #00fff7);
}
.theme-acid .logo {
  background: linear-gradient(135deg, #6038ff, #5d35ff, #e437ff);
  color: #101010;
}

/* HOTFIX: фон держится поверх body-фона, но под интерфейсом. Старый отрицательный z-index мог прятать фон за body. */
html, body {
  background: #020208 !important;
}
.blur-bg {
  z-index: 0 !important;
  pointer-events: none !important;
  inset: -24vh -35vw !important;
  background:
    radial-gradient(circle at var(--touch-x) var(--touch-y), rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle at 18% 18%, rgba(51, 0, 255,.33), transparent 30%),
    radial-gradient(circle at 85% 22%, rgba(20, 255, 247,.30), transparent 32%),
    radial-gradient(circle at 38% 86%, rgba(227, 45, 255,.24), transparent 34%),
    linear-gradient(180deg, #020208 0%, #041212 48%, #09020d 100%) !important;
}
.app-shell,
.toast {
  position: relative !important;
  z-index: 2 !important;
}
.blur-bg::before {
  opacity: .98 !important;
  filter: blur(100px) saturate(1.65) !important;
  animation: aurora-spin 22s linear infinite !important;
}
.blur-bg::after {
  opacity: .86 !important;
  filter: blur(96px) saturate(1.55) !important;
  animation: aurora-breathe 13s ease-in-out infinite alternate !important;
}
.blob {
  opacity: .98 !important;
  filter: blur(70px) saturate(1.55) !important;
}
.blob-one,
.theme-acid .blob-one {
  width: 720px !important;
  height: 720px !important;
  background: radial-gradient(circle, rgba(51, 0, 255,1), rgba(97, 58, 255,.55) 42%, transparent 72%) !important;
}
.blob-two,
.theme-acid .blob-two {
  width: 760px !important;
  height: 760px !important;
  background: radial-gradient(circle, rgba(0, 255, 247,.96), rgba(0, 255, 247,.46) 45%, transparent 75%) !important;
}
.blob-three,
.theme-acid .blob-three {
  width: 690px !important;
  height: 690px !important;
  background: radial-gradient(circle, rgba(227, 42, 255,.86), rgba(51, 0, 255,.34) 46%, transparent 74%) !important;
}
.blob-four,
.blob-five {
  display: block !important;
}
.topbar,
.hero,
.daily,
.panel,
.card,
.product-card,
.bottom-bar,
.search-input,
.chip {
  background: rgba(7, 7, 16, .46) !important;
  backdrop-filter: blur(26px) saturate(1.3) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.product-card {
  background: rgba(7, 7, 16, .36) !important;
  border-color: rgba(255,255,255,.13) !important;
}
.product-card::before {
  opacity: .18 !important;
}
.product-image {
  background: rgba(255,255,255,.055) !important;
}

/* ===== css/layout.css ===== */

/* =========================================================
   SMOOTH PATCH: Telegram WebView performance + красивый фон
   ========================================================= */
html, body {
  background: #060509 !important;
  overscroll-behavior-y: contain;
}

.app-shell {
  position: relative !important;
  z-index: 2 !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 18px 14px 112px !important;
  contain: layout style paint;
}

.blur-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, #050507 0%, #071111 28%, #080610 53%, #071414 74%, #0a050f 100%) !important;
  transform: translateZ(0) !important;
  isolation: auto !important;
}

.blur-bg::before,
.blur-bg::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border-radius: 999px !important;
  opacity: .72 !important;
  mix-blend-mode: screen !important;
  will-change: transform !important;
  transform: translate3d(0,0,0) !important;
}

.blur-bg::before {
  width: 88vw !important;
  height: 88vw !important;
  left: -34vw !important;
  top: calc(2vh + var(--scroll-shift, 0px)) !important;
  background:
    radial-gradient(circle at 42% 38%, rgba(80, 36, 255,.88), rgba(37, 255, 248,.45) 42%, transparent 68%) !important;
  filter: blur(34px) saturate(1.18) !important;
  animation: smoothBlobLeft 18s ease-in-out infinite alternate !important;
}

.blur-bg::after {
  width: 95vw !important;
  height: 95vw !important;
  right: -42vw !important;
  top: calc(18vh - var(--scroll-shift, 0px)) !important;
  background:
    radial-gradient(circle at 44% 42%, rgba(85, 43, 255,.78), rgba(228, 54, 255,.42) 40%, rgba(0, 255, 247,.30) 64%, transparent 76%) !important;
  filter: blur(36px) saturate(1.2) !important;
  animation: smoothBlobRight 22s ease-in-out infinite alternate !important;
}

.blob {
  position: fixed !important;
  border-radius: 999px !important;
  opacity: .62 !important;
  mix-blend-mode: screen !important;
  filter: blur(36px) saturate(1.16) !important;
  will-change: transform !important;
  transform: translate3d(0,0,0) !important;
}

.blob-one {
  width: 62vw !important;
  height: 62vw !important;
  left: -20vw !important;
  top: 44vh !important;
  background: radial-gradient(circle, rgba(29, 255, 247,.72), transparent 70%) !important;
  animation: smoothBlobOne 24s ease-in-out infinite alternate !important;
}

.blob-two {
  width: 58vw !important;
  height: 58vw !important;
  right: -22vw !important;
  bottom: 10vh !important;
  background: radial-gradient(circle, rgba(82, 39, 255,.70), rgba(255, 36, 124,.24) 50%, transparent 72%) !important;
  animation: smoothBlobTwo 27s ease-in-out infinite alternate !important;
}

.blob-three {
  width: 50vw !important;
  height: 50vw !important;
  left: 35vw !important;
  top: 60vh !important;
  background: radial-gradient(circle, rgba(227, 46, 255,.48), rgba(0, 255, 247,.25) 54%, transparent 72%) !important;
  animation: smoothBlobThree 31s ease-in-out infinite alternate !important;
}

.blob-four,
.blob-five,
.soft-glass,
.soft-noise {
  display: none !important;
}

@keyframes smoothBlobLeft {
  0% { transform: translate3d(-4vw, -2vh, 0) scale(1); }
  100% { transform: translate3d(12vw, 10vh, 0) scale(1.14); }
}
@keyframes smoothBlobRight {
  0% { transform: translate3d(4vw, 0, 0) scale(1.04); }
  100% { transform: translate3d(-14vw, 14vh, 0) scale(.94); }
}
@keyframes smoothBlobOne {
  0% { transform: translate3d(0, 0, 0) scale(.96); }
  100% { transform: translate3d(18vw, -8vh, 0) scale(1.1); }
}
@keyframes smoothBlobTwo {
  0% { transform: translate3d(0, 0, 0) scale(1.02); }
  100% { transform: translate3d(-18vw, -11vh, 0) scale(.92); }
}
@keyframes smoothBlobThree {
  0% { transform: translate3d(0, 0, 0) scale(.94); }
  100% { transform: translate3d(-20vw, 9vh, 0) scale(1.08); }
}

/* Убираем самый дорогой эффект: backdrop-filter на каждом блоке. Это он больше всего лагал в TG WebView. */
.topbar,
.hero,
.daily,
.card,
.product-card,
.panel,
.cart-line,
.checkout-card,
.bottom-bar,
.modal,
.search-input,
.chip,
.choice,
.field input,
.field textarea,
.field select,
.icon-btn,
.pill-btn,
.primary-btn,
.ghost-btn,
.mini-actions button,
.admin-row,
.admin-tabs button,
.music-toggle {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease !important;
}

.topbar,
.hero,
.daily,
.card,
.panel,
.product-card,
.checkout-card,
.cart-line {
  background: rgba(10, 18, 18, .56) !important;
  border: 1px solid rgba(125, 92, 255, .14) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.topbar {
  position: sticky !important;
  top: 10px !important;
  border-radius: 28px !important;
  z-index: 8 !important;
}

.logo,
.icon-btn,
.pill-btn,
.primary-btn,
.chip.active,
.admin-tabs button.active,
.bottom-bar button {
  background: #543eaf !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(84, 62, 175,.24) !important;
}

.chip,
.admin-tabs button,
.choice,
.search-input,
.field input,
.field textarea,
.field select {
  background: rgba(4, 20, 19, .64) !important;
  border: 1px solid rgba(128, 96, 255, .13) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.search-input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255,255,255,.48) !important;
}

.products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.product-card {
  min-width: 0 !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  contain: content !important;
}
.product-card:active,
button:active {
  transform: scale(.985) !important;
}
.product-image {
  background: rgba(255,255,255,.055) !important;
  transform: translateZ(0) !important;
}
.product-image img {
  transform: translateZ(0) !important;
}

/* Формы админки: меньше перерисовки и нормальные поля без ломаных тяжёлых слоёв. */
.form-grid,
.admin-body,
.panel {
  contain: layout paint !important;
}
.field input,
.field textarea,
.field select {
  min-height: 54px !important;
  border-radius: 18px !important;
  outline: none !important;
}
.field textarea {
  min-height: 112px !important;
}

@media (max-width: 430px) {
  .app-shell { padding-left: 12px !important; padding-right: 12px !important; }
  .products-grid { gap: 10px !important; }
  .product-card { border-radius: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .blur-bg::before,
  .blur-bg::after,
  .blob {
    animation: none !important;
  }
}

/* ===== Final smooth checkout/payment polish ===== */
.payment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.payment-note {
  margin-top: -2px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(125, 92, 255, .24);
  background: rgba(125, 92, 255, .10);
  color: #c6b8ff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}
.payment-note.soft {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  color: var(--muted);
}
.checkout-total {
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* Товарные карточки: одинаковая высота, кнопки всегда на одной линии. */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-body {
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr !important;
  height: 100% !important;
}
.product-title,
.product-desc {
  overflow-wrap: anywhere !important;
}
.product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.buy-row {
  align-self: end !important;
  min-height: 58px !important;
}
.buy-btn,
.inline-qty {
  min-height: 46px !important;
}

  /* Быстрее в Telegram WebView: без тяжёлых постоянных фоновых анимаций. */
.blur-bg::before,
.blur-bg::after,
.blob,
.soft-glass,
.soft-noise {
  animation: none !important;
  filter: none !important;
  opacity: .28 !important;
}
.blur-bg {
  background:
    radial-gradient(circle at 18% 10%, rgba(83, 40, 255, .18), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(35, 243, 236, .15), transparent 28%),
    linear-gradient(180deg, #050511 0%, #071111 58%, #040409 100%) !important;
}

/* Админка и корзина: подбитые колонки и меньше скачков при длинном тексте. */
.admin-row {
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
}
.admin-row > div:nth-child(2),
.cart-item > div:nth-child(2) {
  min-width: 0 !important;
}
.admin-row strong,
.cart-item h3 {
  overflow-wrap: anywhere !important;
}
.mini-actions button {
  min-width: 42px !important;
  min-height: 34px !important;
}
.cart-item {
  align-items: center !important;
}
.form-grid {
  gap: 14px !important;
}
.two-col {
  gap: 12px !important;
}
.field input,
.field textarea,
.field select {
  line-height: 1.25 !important;
}

@media (max-width: 430px) {
  .payment-grid,
  .choice-grid {
    grid-template-columns: 1fr !important;
  }
  .admin-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  .admin-row .mini-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }
  .admin-row .mini-actions button {
    flex: 1 1 auto !important;
  }
  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
}

/* ===== FINAL CLEAN FIX: ровные колонки, быстрая корзина, понятная оплата ===== */
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.blur-bg::before,
.blur-bg::after,
.blob,
.soft-glass,
.soft-noise {
  display: none !important;
  animation: none !important;
}

.blur-bg {
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(83, 40, 255,.13), transparent 32%),
    radial-gradient(circle at 85% 8%, rgba(40, 255, 248,.10), transparent 34%),
    linear-gradient(180deg, #050511 0%, #071010 56%, #040409 100%) !important;
  transform: none !important;
  pointer-events: none !important;
}

.app-shell {
  width: min(940px, 100%) !important;
  padding: 12px 12px 118px !important;
}

.topbar,
.hero,
.daily,
.card,
.panel,
.product-card,
.bottom-bar,
.search-input,
.cart-item,
.admin-row,
.choice,
.field input,
.field textarea,
.field select {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.product-card,
.card-clean,
.card-neon,
.card-glass,
.card-sale,
.card-ice,
.card-minimal,
.card-lux {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: 24px !important;
  background: rgba(8, 16, 16, .72) !important;
  border: 1px solid rgba(125, 92, 255, .13) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.23) !important;
}

.product-image {
  aspect-ratio: 1 / 1 !important;
  background: rgba(255,255,255,.055) !important;
}

.product-image img {
  transform: none !important;
  will-change: auto !important;
}

.product-body {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr !important;
  gap: 0 !important;
  padding: 12px !important;
}

.product-title {
  min-height: 36px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-desc {
  min-height: 34px !important;
}

.short-note {
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
}

.price-box {
  min-width: 0 !important;
}

.buy-row {
  align-self: end !important;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto) !important;
  min-height: 58px !important;
  width: 100% !important;
}

.buy-btn,
.inline-qty {
  width: 100% !important;
  min-height: 46px !important;
  transform-origin: center !important;
}

.cart-control-swap {
  transition: transform .16s ease, opacity .16s ease, background .16s ease !important;
  animation: controlFade .16s ease-out !important;
}

.cart-control-swap.is-ready {
  opacity: 1 !important;
}

@keyframes controlFade {
  from { opacity: .62; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

.cart-item {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  align-items: center !important;
}

.cart-info,
.admin-row > div:nth-child(2) {
  min-width: 0 !important;
}

.cart-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  line-height: 1.35 !important;
}

.cart-item-updated {
  animation: rowPulse .22s ease-out !important;
}

@keyframes rowPulse {
  from { background: rgba(83, 40, 255,.12); }
  to { background: rgba(255,255,255,.06); }
}

.mt-10 {
  margin-top: 10px !important;
}

.checkout-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.checkout-title-row span {
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

.payment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.payment-grid .choice {
  text-align: center !important;
  justify-content: center !important;
}

.payment-note {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

.payment-note.is-transfer {
  border: 1px solid rgba(117, 82, 255, .32) !important;
  background: rgba(117, 82, 255, .12) !important;
  color: #c4b5ff !important;
}

.payment-summary {
  display: grid !important;
  gap: 8px !important;
  padding: 13px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.065) !important;
}

.payment-summary > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
}

.payment-summary strong {
  color: #fff !important;
  white-space: nowrap !important;
}

.payment-summary .fee-active strong {
  color: #a18aff !important;
}

.payment-summary .summary-total {
  margin-top: 4px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

.payment-summary .summary-total strong {
  color: var(--accent) !important;
  font-size: 22px !important;
}

.admin-row {
  grid-template-columns: 54px minmax(0, 1fr) minmax(124px, auto) !important;
  align-items: center !important;
}

.admin-row strong,
.cart-item h3,
.order-card h3 {
  overflow-wrap: anywhere !important;
}

.order-card {
  margin-top: 12px !important;
}

.order-head span {
  white-space: nowrap !important;
}

.order-items {
  margin-top: 10px !important;
  line-height: 1.45 !important;
}

.order-money {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.order-money span {
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.order-money b {
  display: block !important;
  margin-top: 3px !important;
  color: #fff !important;
  font-size: 14px !important;
}

.order-actions {
  margin-top: 12px !important;
}

.field input,
.field textarea,
.field select,
.choice,
.primary-btn,
.ghost-btn,
.danger-btn,
.buy-btn,
.inline-qty button,
.qty button,
.mini-actions button {
  transition: transform .14s ease, opacity .14s ease, background .14s ease, border-color .14s ease !important;
}

@media (max-width: 520px) {
  .products-grid {
    gap: 10px !important;
  }
  .product-body {
    padding: 10px !important;
  }
  .buy-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .inline-qty {
    min-width: 100% !important;
  }
  .order-money {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 340px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Последний слой: кнопки карточек всегда прижаты к низу, независимо от длины описания. */
.product-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.buy-row {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* === Final polish: ровная шапка, аватарка магазина, плавные колонки === */
.brand-stack {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.back-chip {
  width: 30px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: none;
}

.logo img,
.preview-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-stack .logo {
  width: 52px;
  height: 52px;
}

.brand-title h1 {
  text-transform: none;
}

.settings-logo-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.preview-logo {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !important;
}

.small-help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.product-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.product-desc {
  min-height: 38px !important;
}

.buy-row {
  margin-top: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 124px) !important;
  align-items: end !important;
  gap: 10px !important;
}

.price-box {
  min-width: 0 !important;
}

.admin-row {
  grid-template-columns: 56px minmax(0, 1fr) minmax(136px, auto) !important;
  gap: 12px !important;
}

.admin-row .mini-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(34px, auto)) !important;
  justify-content: end !important;
  align-items: center !important;
}

.form-grid {
  gap: 12px !important;
}

.two-col,
.choice-grid,
.payment-grid {
  align-items: stretch !important;
}

.field input,
.field textarea,
.field select,
.choice,
.primary-btn,
.ghost-btn,
.danger-btn {
  transition: border-color .14s ease, background .14s ease, transform .12s ease, opacity .12s ease !important;
}

button:active {
  transform: scale(.985);
}

@media (max-width: 560px) {
  .buy-row {
    grid-template-columns: 1fr !important;
  }
  .admin-row {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }
  .admin-row .mini-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }
  .settings-logo-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .preview-logo {
    width: 58px !important;
    height: 58px !important;
  }
}

/* ===== FINAL READY PATCH: smooth scroll, ровные карточки, защищённая админка ===== */
html {
  scroll-behavior: smooth !important;
}

body {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

.app-shell {
  max-width: 540px !important;
  padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
}

.topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.brand,
.brand-stack {
  min-width: 0 !important;
}

.brand-stack {
  display: grid !important;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.brand h1,
.brand p {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.back-chip {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 1000 !important;
}

.admin-tabs {
  scroll-snap-type: x proximity !important;
  scroll-padding-left: 12px !important;
  -webkit-overflow-scrolling: touch !important;
}

.admin-tab {
  scroll-snap-align: start !important;
}

/* Категории каталога — статичная сетка без прокрутки */
.chips {
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.products-grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

.product-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  min-height: 100% !important;
  content-visibility: auto !important;
  contain-intrinsic-size: 330px !important;
}

.product-image {
  aspect-ratio: 1 / 1 !important;
}

.product-body {
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr auto !important;
  gap: 0 !important;
}

.product-desc {
  min-height: 38px !important;
}

.short-note,
.age-mark {
  align-self: start !important;
}

.buy-row {
  width: 100% !important;
  grid-template-columns: 1fr !important;
  align-self: end !important;
}

.buy-btn,
.inline-qty {
  width: 100% !important;
}

.inline-qty {
  grid-template-columns: 42px 1fr 42px !important;
}

.cart-control-swap {
  will-change: opacity, transform !important;
}

.cart-control-swap.is-ready {
  animation: soft-pop .16s ease-out !important;
}

.admin-row,
.cart-item {
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.cart-item {
  grid-template-columns: 74px minmax(0, 1fr) !important;
}

.mini-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: 116px !important;
}

.permissions-grid {
  gap: 9px !important;
}

.permission-item {
  min-height: 56px !important;
  align-items: center !important;
}

.owner-note code,
.owner-note b {
  font-family: inherit !important;
}

@media (max-width: 340px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .product-image {
    aspect-ratio: 16 / 11 !important;
  }
}

/* ===== css/components.css ===== */

/* ===== ORDER SAFETY + APP-LIKE VALIDATION ===== */
.checkout-error-log {
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 89, 155, .36) !important;
  background: rgba(255, 89, 155, .13) !important;
  color: #ffdae9 !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.field-error {
  min-height: 0 !important;
  color: #ff9bc3 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.field-error:empty {
  display: none !important;
}

.field.has-error label {
  color: #ffb2d1 !important;
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select,
.input-invalid {
  border-color: rgba(255, 89, 155, .76) !important;
  background: rgba(255, 89, 155, .10) !important;
  box-shadow: 0 0 0 3px rgba(255, 89, 155, .10) !important;
}

.field.has-error {
  animation: errorNudge .2s ease-out !important;
}

@keyframes errorNudge {
  0% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  65% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.order-success {
  display: grid !important;
  gap: 14px !important;
  text-align: left !important;
}

.order-success-hero {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  padding: 6px 0 2px !important;
}

.order-success-hero h2 {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
}

.order-success-code {
  margin: 0 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.order-success-lead {
  margin: 0 !important;
  color: rgba(255,255,255,.52) !important;
  font-size: 13px !important;
}

.order-success-pickup {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
}

.order-success-pickup > span {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  color: #c9baff !important;
  background: rgba(139,108,246,.12) !important;
  border: 1px solid rgba(155,128,246,.16) !important;
}

.order-success-pickup small {
  display: block !important;
  color: rgba(255,255,255,.42) !important;
  font-size: 11px !important;
}

.order-success-pickup b {
  color: #fff !important;
  font-size: 14px !important;
}

.order-success-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.order-success .customer-order-items {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.025) !important;
}

.order-success .danger-btn {
  min-height: 52px;
  border-radius: 15px !important;
}

.success-mark {
  width: 62px !important;
  height: 62px !important;
  margin: 0 auto !important;
  border-radius: 22px !important;
  display: grid !important;
  place-items: center !important;
  color: #0d0b17 !important;
  background: linear-gradient(135deg, var(--accent-2), #62fffa) !important;
  box-shadow: 0 14px 32px rgba(115, 80, 255, .20) !important;
}

.order-success.is-cancelled .success-mark {
  color: #fff !important;
  background: linear-gradient(135deg, var(--red), #ff8ab9) !important;
  box-shadow: 0 14px 32px rgba(255, 77, 141, .18) !important;
}

.order-code-note,
.order-page-note {
  padding: 11px 13px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}

.order-card {
  border-left: 4px solid rgba(255,255,255,.14) !important;
}

.order-card.status-pending { border-left-color: #a18aff !important; }
.order-card.status-active { border-left-color: #9176ff !important; }
.order-card.status-packing { border-left-color: #9195ff !important; }
.order-card.status-delivery { border-left-color: #cea0ff !important; }
.order-card.status-paid { border-left-color: #7ffffb !important; }
.order-card.status-done { border-left-color: #592fff !important; }
.order-card.status-declined,
.order-card.status-cancelled { border-left-color: #ff8ab9 !important; }

.order-actions {
  max-width: none !important;
  justify-content: stretch !important;
}

.order-actions button {
  flex: 1 1 120px !important;
}

.order-actions button.active-status {
  border-color: rgba(89, 47, 255,.55) !important;
  background: rgba(89, 47, 255,.14) !important;
  color: #ad99ff !important;
}

.field.has-error .choice {
  border-color: rgba(255, 89, 155, .72) !important;
  background: rgba(255, 89, 155, .10) !important;
}


/* ===== TELEGRAM VIEWPORT FIX: модальные окна не обрезаются ===== */
:root {
  --app-viewport-height: 100dvh;
}

html,
body {
  min-height: var(--app-viewport-height) !important;
}

body {
  min-height: var(--app-viewport-height) !important;
}

/* contain: paint на корневом #app обрезал fixed-модалку подтверждения возраста. */
.app-shell {
  min-height: var(--app-viewport-height) !important;
  contain: none !important;
  overflow: visible !important;
}

.age-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  width: 100vw !important;
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding:
    max(16px, env(safe-area-inset-top))
    16px
    max(16px, env(safe-area-inset-bottom)) !important;
  overscroll-behavior: contain !important;
}

.age-box {
  flex: 0 0 auto !important;
  width: min(520px, 100%) !important;
  max-height: calc(var(--app-viewport-height) - 32px) !important;
  margin: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@supports not (height: 100dvh) {
  :root {
    --app-viewport-height: 100vh;
  }
}

/* ===== V4: синхронизация остатков, доставка, iPhone и понятная админка ===== */
html {
  -webkit-text-size-adjust: 100% !important;
  touch-action: manipulation !important;
}

body,
button,
a,
label,
input,
textarea,
select,
.choice,
.chip,
.admin-tab {
  touch-action: manipulation !important;
}

button,
a,
.choice,
.chip,
.admin-tab {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* iOS увеличивает страницу при фокусе на поле меньше 16 px. */
input,
textarea,
select,
.search-input,
.field input,
.field textarea,
.field select {
  font-size: 16px !important;
}

.topbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  overflow: visible !important;
}

.brand {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.brand .logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.brand-title {
  min-width: 0 !important;
}

.brand-title h1 {
  max-width: 100% !important;
  font-size: 19px !important;
}

.brand-title p {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.back-chip {
  position: static !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 44px !important;
  padding: 0 !important;
  z-index: auto !important;
}

.top-actions {
  flex: 0 0 auto !important;
  gap: 6px !important;
}

.top-action-btn {
  min-height: 44px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: var(--text) !important;
  background: rgba(255,255,255,.085) !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.cart-top-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.bottom-bar {
  grid-template-columns: 1fr !important;
}

.stock-alert,
.stock-return-note,
.terminal-note {
  margin: 10px 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  line-height: 1.4 !important;
  font-weight: 850 !important;
}

.stock-alert {
  color: #ffe1ed !important;
  background: rgba(255, 76, 148, .14) !important;
  border: 1px solid rgba(255, 76, 148, .36) !important;
}

.stock-return-note {
  color: #cabdff !important;
  background: rgba(126, 94, 255, .11) !important;
  border: 1px solid rgba(126, 94, 255, .30) !important;
}

.terminal-note {
  color: var(--muted) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.cart-item-unavailable {
  border-color: rgba(255, 77, 148, .48) !important;
  background: linear-gradient(180deg, rgba(95, 12, 45, .34), rgba(13, 13, 22, .45)) !important;
}

.cart-item-unavailable .cart-thumb {
  opacity: .55 !important;
  filter: grayscale(.45) !important;
}

.stock-danger {
  display: inline-flex !important;
  width: fit-content !important;
  color: #ff9dc4 !important;
  font-weight: 1000 !important;
}

.delivery-zone-grid .choice {
  min-height: 58px !important;
}

.admin-tabs {
  gap: 9px !important;
  padding: 4px 2px 10px !important;
}

.admin-tab {
  min-width: 146px !important;
  min-height: 68px !important;
  padding: 10px 12px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 3px !important;
  text-align: left !important;
}

.admin-tab strong {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.admin-tab small {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.admin-tab.active small {
  color: rgba(10, 20, 20, .72) !important;
}

.admin-row {
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

.admin-row .mini-actions {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-content: flex-start !important;
  margin-top: 8px !important;
}

.admin-row .mini-actions button {
  min-height: 40px !important;
  padding: 8px 10px !important;
  flex: 1 1 98px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.order-actions {
  width: 100% !important;
  max-width: none !important;
}

.order-actions button {
  min-height: 44px !important;
  flex: 1 1 145px !important;
}

@media (max-width: 420px) {
  .app-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .topbar {
    gap: 6px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .brand {
    gap: 6px !important;
  }

  .brand .logo {
    width: 42px !important;
    height: 42px !important;
  }

  .back-chip {
    width: 34px !important;
    height: 42px !important;
  }

  .brand-title h1 {
    font-size: 17px !important;
  }

  .brand-title p {
    font-size: 11px !important;
  }

  .top-action-btn {
    width: auto !important;
    min-width: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .top-action-btn span {
    font-size: 11px !important;
  }
}

@media (max-width: 355px) {
  .top-action-btn[data-open-admin] span {
    display: none !important;
  }

  .brand-title p {
    display: none !important;
  }
}

/* V6: понятные переключатели товара и список Telegram-чатов */
.choice-explained {
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
  min-height: 92px !important;
  cursor: pointer !important;
}

.choice-explained .choice-title {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.choice-explained small {
  display: block !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.choice-explained.active small {
  color: rgba(6, 16, 16, .72) !important;
}

.telegram-chat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.telegram-chat-list code {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(128, 96, 255, .18);
  background: rgba(4, 20, 19, .7);
  color: #ede8ff;
  font-size: 12px;
  overflow-wrap: anywhere;
}


/* V7: active states — chips/tabs keep accent fill, toggles use subtle tint */
:root {
  --selected-red-1: #8a63ff;
  --selected-red-2: #4b2fa0;
  --selected-red-shadow: rgba(138, 99, 255, .35);
}

.chip,
.choice,
.admin-tab,
.permission-item,
.order-actions button {
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease !important;
}

/* Navigation chips and tabs keep the solid accent fill */
.chip.active,
.admin-tab.active,
.order-actions button.active-status {
  color: #fff !important;
  border-color: rgba(180, 150, 255, .78) !important;
  background: linear-gradient(135deg, var(--selected-red-1), var(--selected-red-2)) !important;
  box-shadow: 0 14px 34px var(--selected-red-shadow), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Toggle-style choices (choice-explained) and permission-item:
   subtle tint + accent border — no purple fill, text stays readable */
.choice.active,
.permission-item.active {
  background: rgba(84, 62, 175, .14) !important;
  border-color: rgba(138, 99, 255, .55) !important;
  box-shadow: none !important;
  color: var(--fg) !important;
}

.choice.active *,
.permission-item.active * {
  color: var(--fg) !important;
}

.admin-tab.active small,
.choice-explained.active small {
  color: rgba(255,255,255,.72) !important;
}

/* Checkbox squares removed from the entire interface */
.selection-state-icon {
  display: none !important;
}

.choice-explained {
  position: relative;
  grid-template-columns: minmax(0, 1fr) !important;
}

.choice-explained .choice-title,
.choice-explained small {
  grid-column: 1;
}

.permission-item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Страница покупателя: все заказы и история статусов */
.my-orders-head .section-title {
  align-items: center;
  gap: 12px;
}

.my-orders-head .section-title > div:first-child {
  min-width: 0;
}

.my-orders-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.my-orders-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Цветная точка статуса — ровный кружок, выровненный по центру подписи */
.status-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

.my-orders-legend .status-dot {
  box-shadow: none;
}

.my-orders-list {
  display: grid;
  gap: 12px;
}

.customer-order-card {
  position: relative;
  overflow: hidden;
  border-left: 5px solid rgba(255,255,255,.18) !important;
}

.customer-order-card.status-pending { border-left-color: #7d5dff !important; }
.customer-order-card.status-active,
.customer-order-card.status-packing { border-left-color: #555bff !important; }
.customer-order-card.status-delivery { border-left-color: #bd7cff !important; }
.customer-order-card.status-paid,
.customer-order-card.status-done { border-left-color: #54ece7 !important; }
.customer-order-card.status-cancelled,
.customer-order-card.status-declined { border-left-color: #ff458f !important; }

.customer-order-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.customer-order-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.customer-order-action svg,
.customer-order-action-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.customer-order-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.customer-order-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.customer-order-header h3 {
  font-size: 21px;
  letter-spacing: -.02em;
}

.customer-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 48%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  text-align: center;
  font-size: 12px;
  font-weight: 950;
}

.status-badge-cancelled,
.status-badge-declined {
  background: rgba(255, 51, 133, .18);
  border-color: rgba(255, 91, 157, .42);
}

.status-badge-done,
.status-badge-paid {
  background: rgba(84, 236, 231, .14);
  border-color: rgba(84, 236, 231, .36);
}

.customer-order-items {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.16);
}

.customer-order-items > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.customer-order-items strong {
  flex: 0 0 auto;
}

.customer-order-details {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.compact-summary {
  margin-top: 10px;
}

.status-timeline {
  display: grid;
  gap: 8px;
  margin: 13px 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}

.status-timeline h4 {
  margin: 0 0 3px;
  font-size: 13px;
  color: var(--muted);
}

.timeline-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 9px;
  color: rgba(255,255,255,.62);
}

.timeline-row.latest {
  color: #fff;
}

/* Ровный цветной кружок статуса — как в легенде «Мои заказы» */
.timeline-dot {
  align-self: start;
  margin-top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, #eab308);
  border: 2px solid color-mix(in srgb, var(--dot, #eab308) 45%, transparent);
  box-sizing: border-box;
}

.timeline-dot.is-latest {
  background: var(--dot, #eab308);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot, #eab308) 22%, transparent);
}

.timeline-row div {
  display: grid;
  gap: 2px;
}

.timeline-row small {
  color: var(--muted);
  font-size: 11px;
}

.my-orders-error small {
  display: inline-block;
  margin-top: 8px;
  line-height: 1.4;
}

@media (max-width: 470px) {
  .top-actions {
    gap: 5px !important;
  }
  .orders-top-btn span,
  .cart-top-btn span:not([data-cart-count]) {
    display: none !important;
  }
  .orders-top-btn {
    min-width: 44px !important;
    padding: 0 7px !important;
  }
  .customer-order-header {
    align-items: stretch;
    flex-direction: column;
  }
  .customer-status {
    max-width: none;
    width: fit-content;
  }
  .customer-order-items > div {
    flex-direction: column;
    gap: 2px;
  }
}


/* ===== CATEGORY MANAGEMENT V9 ===== */
.category-admin-list {
  display: grid;
  gap: 10px;
}

.category-admin-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "actions actions";
  gap: 10px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.category-admin-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  font-size: 22px;
}

.category-admin-copy {
  grid-area: copy;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.category-admin-copy strong,
.category-admin-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-admin-copy small {
  color: var(--muted);
  font-size: 12px;
}

.danger-outline-btn {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 89, 155, .50);
  border-radius: 13px;
  color: #ffd8e8;
  background: rgba(255, 58, 137, .12);
  font-weight: 900;
  white-space: nowrap;
}

.danger-outline-btn:active {
  color: #fff;
  background: var(--selected-red-1);
}

.category-system-label {
  padding: 7px 9px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 900;
}

/* Category management: edit + reorder controls.
   Actions live on their own full-width row so the category name/count are
   always readable and never squeezed by the buttons. */
.category-admin-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-round-btn {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--fg);
  font-size: 15px;
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.icon-round-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.mini-primary-btn,
.mini-ghost-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 11px;
  font-weight: 850;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.mini-primary-btn {
  border: 0;
  background: var(--accent);
  color: #fff;
}

.mini-ghost-btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--fg);
}

.category-admin-row.editing {
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "emoji title"
    "actions actions";
}

.cat-edit-emoji {
  grid-area: emoji;
}

.cat-edit-title {
  grid-area: title;
}

.cat-edit-emoji,
.cat-edit-title {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--fg);
  padding: 8px 10px;
  font: inherit;
}

.cat-edit-emoji {
  width: 56px;
  text-align: center;
}

@media (max-width: 390px) {
  .category-admin-actions {
    width: 100%;
  }
}


/* V10: понятное включение, выключение и удаление музыки / сета дня */
.resource-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.12);
}
.resource-status.is-on {
  color: #071414;
  background: linear-gradient(135deg, #5328ff, #38efe9);
}
.resource-status.is-off {
  color: #fff;
  background: linear-gradient(135deg, #9f154c, #e13c7e);
  border-color: rgba(255, 105, 165,.6);
}
.resource-actions {
  display: grid;
  gap: 12px;
}
.state-switch,
.danger-resource-btn {
  width: 100%;
  min-height: 72px;
  border-radius: 24px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.14);
  font: inherit;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.state-switch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  font-weight: 900;
}
.state-switch strong { font-size: 18px; }
.state-switch small { font-size: 13px; line-height: 1.35; font-weight: 700; opacity: .82; }
.state-switch.state-on {
  color: #071414;
  background: linear-gradient(135deg, #5328ff, #38efe9, #6a4be8);
}
.state-switch.state-off,
.danger-resource-btn {
  color: #fff;
  background: linear-gradient(135deg, #7f103c, #d52e71);
  border-color: rgba(255, 104, 164,.66);
  box-shadow: 0 10px 24px rgba(138, 14, 64, .22);
}
.danger-resource-btn {
  min-height: 58px;
  text-align: center;
  font-weight: 900;
}
.resource-empty-note {
  padding: 16px 18px;
  border-radius: 22px;
  color: #ffdcea;
  background: rgba(150, 20, 72, .30);
  border: 1px solid rgba(255, 91, 157, .45);
  line-height: 1.45;
  font-weight: 750;
}
.state-switch:active,
.danger-resource-btn:active {
  transform: scale(.985);
}
.state-switch:disabled,
.danger-resource-btn:disabled {
  opacity: .55;
  pointer-events: none;
}
@media (min-width: 720px) {
  .resource-actions { grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); }
}


/* ===== V11: музыка на новых аккаунтах + рабочая кнопка сета дня ===== */
.daily-copy {
  position: relative;
  z-index: 2;
}

.daily-copy--after-image {
	grid-column: 2;
	margin-top: -2px;
}

@media (max-width: 560px) {
	.daily-copy--after-image {
		grid-column: 1;
		margin-top: 0;
	}
}

.daily-cta {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 12px 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #4e22ff, #33f4ee 58%, #7e5eff);
  color: #071111;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 1000;
  box-shadow: 0 14px 34px rgba(62, 255, 249, .22);
  cursor: pointer;
  touch-action: manipulation;
}

.daily-cta.is-added {
  background: linear-gradient(135deg, #ff3b89, #ff62a1);
  color: #fff;
  box-shadow: 0 14px 34px rgba(255, 59, 137, .22);
}

.customer-bottom-nav {
  grid-template-columns: minmax(140px, .8fr) minmax(170px, 1.2fr) !important;
  gap: 8px !important;
}

.orders-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 10px 10px;
  border: 1px solid rgba(131, 100, 255, .24);
  border-radius: 18px;
  background: rgba(17, 31, 31, .94);
  color: #f4f1ff;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  overflow: visible;
  touch-action: manipulation;
}

@media (max-width: 390px) {
  .customer-bottom-nav {
    grid-template-columns: minmax(132px, .82fr) minmax(0, 1fr) !important;
  }
  .orders-bottom-btn {
    font-size: 12.5px;
    padding-inline: 6px;
    letter-spacing: -.2px;
  }
}

/* ===== V12 FINAL FIX: заметное физическое нажатие всех кнопок ===== */
button,
[role="button"],
.choice,
.chip,
.admin-tab,
.permission-item,
.state-switch,
.danger-resource-btn {
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .11s cubic-bezier(.22, .61, .36, 1), filter .11s cubic-bezier(.22, .61, .36, 1), background .11s cubic-bezier(.22, .61, .36, 1), box-shadow .11s cubic-bezier(.22, .61, .36, 1), opacity .11s cubic-bezier(.22, .61, .36, 1) !important;
}

button:active,
button.is-pressed,
[role="button"]:active,
[role="button"].is-pressed,
.choice:active,
.choice.is-pressed,
.chip:active,
.chip.is-pressed,
.admin-tab:active,
.admin-tab.is-pressed,
.permission-item:active,
.permission-item.is-pressed,
.state-switch:active,
.state-switch.is-pressed,
.danger-resource-btn:active,
.danger-resource-btn.is-pressed {
  transform: translateY(1px) scale(.97) !important;
  filter: brightness(.9) saturate(.96) !important;
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .4), 0 1px 4px rgba(0, 0, 0, .2) !important;
}

button:disabled.is-pressed,
button:disabled:active {
  opacity: .72 !important;
}
.initial-load-skeleton{margin:18px auto;max-width:980px;padding:18px;opacity:0;animation:skeleton-reveal .18s ease .28s forwards}.skeleton-line,.initial-load-skeleton i,.inline-skeleton i{display:block;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.045) 20%,rgba(255,255,255,.105) 48%,rgba(255,255,255,.045) 76%);background-size:240% 100%;animation:skeleton-wave 1.25s ease-in-out infinite}.skeleton-line{height:14px;width:72%;margin:10px 0}.skeleton-title{height:28px;width:42%}.skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.skeleton-grid i{height:140px}.inline-skeleton{display:grid;gap:11px;padding:18px 4px}.inline-skeleton i{width:var(--skeleton-width,88%);height:16px}.network-activity{position:fixed;z-index:1200;top:calc(env(safe-area-inset-top) + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;max-width:min(88vw,420px);padding:8px 13px;border:1px solid rgba(165,135,245,.22);border-radius:999px;background:rgba(20,16,29,.88);color:#ddd7e8;font-size:12px;font-weight:750;box-shadow:0 8px 28px rgba(0,0,0,.24);backdrop-filter:blur(14px);pointer-events:none;animation:network-enter .16s ease both}.network-activity[hidden],.network-notice[hidden]{display:none!important}.network-spinner{width:13px;height:13px;flex:0 0 auto;border:2px solid rgba(255,255,255,.2);border-top-color:#a281f7;border-radius:50%;animation:network-spin .75s linear infinite}.network-notice{position:fixed;z-index:1201;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;max-width:min(90vw,430px);padding:10px 12px;border:1px solid rgba(255,115,115,.26);border-radius:14px;background:rgba(31,20,27,.94);color:#f5e9ef;font-size:13px;box-shadow:0 14px 40px rgba(0,0,0,.35);backdrop-filter:blur(16px)}.network-notice button{min-height:34px;padding:6px 11px;border:0;border-radius:10px;background:#7454d8;color:#fff;font-weight:800}.admin-loading-panel{margin-top:14px}@keyframes skeleton-reveal{to{opacity:1}}@keyframes skeleton-wave{0%{background-position:110% 0}100%{background-position:-110% 0}}@keyframes network-spin{to{transform:rotate(360deg)}}@keyframes network-enter{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}@media(max-width:600px){.skeleton-grid{grid-template-columns:1fr 1fr}.skeleton-grid i:last-child{display:none}.network-activity{top:calc(env(safe-area-inset-top) + 7px);font-size:11px}.network-notice{left:12px;right:12px;justify-content:space-between}}@media(prefers-reduced-motion:reduce){.skeleton-line,.initial-load-skeleton i,.inline-skeleton i,.network-spinner,.network-activity{animation:none}.initial-load-skeleton{opacity:1}}


/* v100: polished daily-set composition */
.daily-composition,
.cart-set-composition {
	display: grid;
	gap: 7px;
	margin-top: 10px;
	padding: 9px 10px;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 15px;
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.daily-composition-title,
.cart-set-composition-title {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
}

.daily-composition-list,
.cart-set-composition-list,
.customer-order-set-items {
	display: grid;
	gap: 5px;
}

.daily-composition-item,
.cart-set-composition-item,
.customer-order-line,
.customer-order-set-item {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
}

.daily-composition-item,
.cart-set-composition-item,
.customer-order-set-item {
	padding: 7px 9px;
	border-radius: 12px;
	background: rgba(255,255,255,.045);
	border: 1px solid rgba(255,255,255,.06);
}

.daily-composition-item span,
.cart-set-composition-item span,
.customer-order-set-item span {
	min-width: 0;
	font-size: 13px;
	line-height: 1.25;
	color: rgba(255,255,255,.92);
}

.daily-composition-item strong,
.cart-set-composition-item strong,
.customer-order-set-item strong {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	color: rgba(255,255,255,.78);
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}

.daily-copy--after-image .price-row {
	margin-top: 2px;
	padding-inline: 2px;
}

.customer-order-set {
	display: grid;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	background: rgba(255,255,255,.03);
}

.customer-order-line--set {
	font-weight: 700;
}

.customer-order-set-items {
	padding-top: 2px;
	border-top: 1px dashed rgba(255,255,255,.10);
}

@media (max-width: 560px) {
	.daily-composition,
	.cart-set-composition {
		padding: 8px 9px;
		border-radius: 14px;
	}

	.daily-composition-item,
	.cart-set-composition-item,
	.customer-order-set-item {
		padding: 6px 8px;
	}

	.daily-composition-item span,
	.cart-set-composition-item span,
	.customer-order-set-item span {
		font-size: 12px;
	}
}

/* v117: browser key authentication */
.browser-auth-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(250px,330px);align-items:center;gap:16px;margin:0 0 18px;padding:18px;border:1px solid rgba(162,129,247,.26);border-radius:20px;background:linear-gradient(145deg,rgba(91,63,173,.2),rgba(20,17,30,.82));box-shadow:0 18px 48px rgba(0,0,0,.2);overflow:hidden}
.browser-auth-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(#b69bff,#72bc8f)}
.browser-auth-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(255,255,255,.075);font-size:22px}
.browser-auth-copy{display:grid;gap:4px;min-width:0}.browser-auth-copy h2{margin:0;font-size:18px}.browser-auth-copy p{max-width:64ch;margin:0;color:var(--muted);font-size:13px;line-height:1.48}
.browser-auth-link-note{display:grid;gap:5px;padding:12px 14px;border:1px solid rgba(114,188,143,.28);border-radius:13px;background:rgba(56,140,91,.1);line-height:1.4}.browser-auth-link-note b{color:#b9f1ce;font-size:13px}.browser-auth-link-note span{color:var(--muted);font-size:11px}
.browser-auth-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}.browser-auth-form label{display:grid;gap:6px}.browser-auth-form label>span{color:var(--muted);font-size:11px;font-weight:750}.browser-auth-form input{box-sizing:border-box;width:100%;min-width:0;min-height:46px;padding:0 13px;border:1px solid rgba(162,129,247,.26);border-radius:12px;background:rgba(7,6,12,.62);color:#fff;font:800 20px/1 monospace;letter-spacing:.22em;text-align:center}.browser-auth-form .primary-btn{min-height:46px;padding:0 16px}
.browser-auth-hint{grid-column:2/-1;margin:0;color:rgba(233,229,239,.58);font-size:11px;line-height:1.4}.browser-auth-hint.is-warning{color:#ffd08a}.guest-profile-card{display:grid;gap:9px;max-width:680px;margin:18px auto;padding:24px}.guest-profile-card h2,.guest-profile-card p{margin:0}
@media(max-width:860px){.browser-auth-card{grid-template-columns:auto minmax(0,1fr)}.browser-auth-form,.browser-auth-link-note,.browser-auth-hint{grid-column:1/-1}}@media(max-width:520px){.browser-auth-card{grid-template-columns:1fr;padding:16px}.browser-auth-icon{width:42px;height:42px}.browser-auth-form{grid-template-columns:1fr}.browser-auth-form .primary-btn{width:100%}.browser-auth-hint{grid-column:1}.browser-auth-copy h2{font-size:17px}}

/* v118: mandatory browser authentication gate */
.browser-auth-gate{box-sizing:border-box;display:grid;place-items:center;min-height:var(--app-viewport-height,100dvh);padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.browser-auth-gate-shell{display:grid;gap:16px;width:min(100%,1024px)}
.browser-auth-gate-brand{display:flex;align-items:center;gap:12px;width:fit-content;padding:10px 13px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(12,10,18,.72);box-shadow:0 12px 40px rgba(0,0,0,.2)}
.browser-auth-gate-brand>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#7c5ce0,#4e36a2);font-size:20px}
.browser-auth-gate-brand>div{display:grid;gap:2px}.browser-auth-gate-brand b{font-size:17px}.browser-auth-gate-brand small{color:var(--muted);font-size:12px}
.browser-auth-gate .browser-auth-card{margin:0}.browser-auth-gate-note{margin:0;text-align:center;color:rgba(233,229,239,.58);font-size:12px;line-height:1.45}
@media(max-width:520px){.browser-auth-gate{align-items:center;padding-inline:14px}.browser-auth-gate-shell{gap:12px}.browser-auth-gate-brand{margin-inline:auto}.browser-auth-gate .browser-auth-card{padding:18px 15px}.browser-auth-gate .browser-auth-copy p{font-size:13px}.browser-auth-gate-note{padding-inline:12px}}

/* v120: music control on mandatory login */
.browser-auth-gate-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.browser-auth-music-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 13px;border:1px solid rgba(162,129,247,.3);border-radius:14px;background:rgba(28,22,43,.88);color:#f4efff;font:750 12px/1 inherit;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.browser-auth-music-toggle:hover{border-color:rgba(185,157,255,.55);background:rgba(76,54,139,.45)}.browser-auth-music-toggle:active{transform:scale(.96)}.browser-auth-music-toggle.is-muted{border-color:rgba(255,255,255,.12);background:rgba(15,13,22,.74);color:rgba(239,234,247,.7)}
.browser-auth-music-toggle>[data-music-user-icon]{font-size:19px;line-height:1}.browser-auth-music-toggle:focus-visible{outline:2px solid #b99dff;outline-offset:3px}
@media(max-width:520px){.browser-auth-gate-head{align-items:center}.browser-auth-gate-brand{margin-inline:0}.browser-auth-music-toggle{width:46px;padding:0}.browser-auth-music-toggle>[data-music-user-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ===== css/catalog.css ===== */

/* =========================================================
   SOLID PURPLE OVERRIDE — единый фиолетовый #543eaf без градиентов
   ========================================================= */

/* Все акцентные переменные -> один фиолетовый, чтобы любые
   gradient(var(--accent), var(--accent-2)) выглядели сплошным цветом. */
:root,
.theme-glass,
.theme-hot,
.theme-minimal,
.theme-acid {
  --accent: #543eaf !important;
  --accent-2: #543eaf !important;
  --accent-3: #543eaf !important;
}

/* Основные акцентные кнопки и логотип -> сплошной #543eaf */
.logo,
.icon-btn,
.pill-btn,
.primary-btn,
.daily-cta,
.cart-btn,
.chip.active,
.admin-tabs button.active,
.theme-acid .primary-btn,
.theme-acid .logo {
  background: #543eaf !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(84, 62, 175, .28) !important;
}

/* Состояние «добавлено» оставляем контрастным (розовый), но без градиента */
.daily-cta.is-added {
  background: #ff3b89 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(255, 59, 137, .24) !important;
}

/* Фон приложения: убираем сине-зелёное свечение, делаем фиолетовое.
   Перекрываем и тематические классы (.theme-*) с их !important. */
.blur-bg,
.theme-glass .blur-bg,
.theme-hot .blur-bg,
.theme-minimal .blur-bg,
.theme-acid .blur-bg {
  background: linear-gradient(180deg, #0a0714 0%, #0b0818 52%, #080511 100%) !important;
}
.blur-bg::before,
.theme-glass .blur-bg::before,
.theme-hot .blur-bg::before,
.theme-minimal .blur-bg::before,
.theme-acid .blur-bg::before {
  background: radial-gradient(circle at 42% 38%, rgba(84, 62, 175, .8), rgba(84, 62, 175, .32) 46%, transparent 70%) !important;
}
.blur-bg::after,
.theme-glass .blur-bg::after,
.theme-hot .blur-bg::after,
.theme-minimal .blur-bg::after,
.theme-acid .blur-bg::after {
  background: radial-gradient(circle at 44% 42%, rgba(111, 86, 214, .7), rgba(84, 62, 175, .28) 48%, transparent 74%) !important;
}
.blob-one,
.theme-acid .blob-one {
  background: radial-gradient(circle, rgba(84, 62, 175, .6), transparent 70%) !important;
}
.blob-two,
.theme-acid .blob-two {
  background: radial-gradient(circle, rgba(111, 86, 214, .55), transparent 72%) !important;
}
.blob-three,
.theme-acid .blob-three {
  background: radial-gradient(circle, rgba(84, 62, 175, .45), transparent 72%) !important;
}

/* Декоративные блоки: убираем бирюзово-розовые градиенты -> фиолетовый тон */
.hero {
  background:
    radial-gradient(circle at 82% 72%, rgba(255, 255, 255, .14), transparent 30%),
    linear-gradient(135deg, rgba(84, 62, 175, .34), rgba(84, 62, 175, .18) 60%, rgba(84, 62, 175, .1)),
    rgba(255, 255, 255, .05) !important;
}
.notice {
  border-color: rgba(84, 62, 175, .3) !important;
  background: rgba(84, 62, 175, .12) !important;
}
.daily {
  background: #543eaf !important;
  box-shadow: 0 24px 76px rgba(84, 62, 175, .22) !important;
}
.daily-inner {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .1), transparent 28%),
    linear-gradient(145deg, rgba(30, 22, 62, .97), rgba(45, 34, 92, .72)) !important;
}
.badge {
  background: #543eaf !important;
  color: #ffffff !important;
}
.daily-art {
  background: radial-gradient(circle, rgba(84, 62, 175, .44), transparent 70%), rgba(255, 255, 255, .06) !important;
}

/* Карточки товаров: единый фиолетовый акцент вместо разноцветных вариантов */
.card-sale,
.card-ice,
.card-lux {
  border-color: rgba(84, 62, 175, .28) !important;
  background: linear-gradient(180deg, rgba(84, 62, 175, .1), rgba(8, 8, 16, .35)) !important;
}

/* Прочие акцентные подложки, которые были бирюзовыми/розовыми */
.card-glass {
  background: linear-gradient(180deg, rgba(84, 62, 175, .12), rgba(8, 8, 16, .3)) !important;
}

/* Удаление товаров: чекбоксы и панель массового удаления */

.product-select-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.product-select-wrap input[type="checkbox"],
.select-all-wrap input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  position: relative;
  transition: background .15s, border-color .15s;
}

.product-select-wrap input[type="checkbox"]::after,
.select-all-wrap input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #ff3a89;
  opacity: 0;
  transition: opacity .15s;
}

.product-select-wrap input[type="checkbox"]:checked,
.select-all-wrap input[type="checkbox"]:checked {
  border-color: #ff3a89;
}

.product-select-wrap input[type="checkbox"]:checked::after,
.select-all-wrap input[type="checkbox"]:checked::after {
  opacity: 1;
}

.admin-row-selected {
  border-color: rgba(255, 58, 137, .55);
  background: rgba(255, 58, 137, .08);
}

.bulk-delete-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.select-all-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}



.bulk-selected-count {
  font-size: 13px;
  font-weight: 800;
  color: #ff3a89;
  margin-left: auto;
}

/* Иконки-кнопки действий в строке товара */
.action-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .09);
  color: var(--fg);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  flex-shrink: 0;
  position: relative;
}

.action-icon-btn:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3);
  transform: scale(1.08);
}

.action-icon-btn:active {
  transform: scale(.95);
}

.action-icon-btn--danger {
  color: #ff3a89;
  border-color: rgba(255, 58, 137, .35);
}

.action-icon-btn--danger:hover {
  background: rgba(255, 58, 137, .15);
  border-color: rgba(255, 58, 137, .6);
}

/* Тултип через title — браузер показывает нативно, но добавим
   дополнительный визуальный намёк через aria-label для скринридеров */
.action-icon-btn svg {
  pointer-events: none;
  display: block;
}

/* Компактный степпер остатков товара */
.stock-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  height: 34px;
  flex: 0 0 auto;
  width: fit-content;
  align-self: flex-start;
}

.stock-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .10);
  color: var(--fg);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: background .14s, transform .1s;
  flex-shrink: 0;
}

.stock-step-btn svg {
  pointer-events: none;
  display: block;
}

.stock-step-btn:hover {
  background: rgba(255, 255, 255, .22);
  transform: scale(1.08);
}

.stock-step-btn:active {
  transform: scale(.92);
}

.stock-step-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.stock-step-btn--plus5 {
  width: auto;
  padding: 0 7px;
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .25);
  font-size: 10px;
  letter-spacing: .02em;
}

.stock-step-btn--plus5:hover {
  background: rgba(74, 222, 128, .22);
  border-color: rgba(74, 222, 128, .5);
}

.stock-input {
  width: 42px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  padding: 0 2px;
  outline: none;
  -moz-appearance: textfield;
}

.stock-input::-webkit-outer-spin-button,
.stock-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stock-input:focus {
  background: rgba(255, 255, 255, .12);
  border-radius: 6px;
}

/* ===== AUTHORITATIVE: admin product row grid reset =====
   Overrides all previous scattered patches so the row is always:
   [checkbox?] [thumb] [body (info + controls)]
   The body handles its own internal layout — no 4th auto column.
============================================================ */
.admin-row {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}

[data-product-row-id] {
  grid-template-columns: 24px 56px 1fr !important;
}

/* Neutralise old mini-actions overrides that no longer apply */
.admin-row .mini-actions {
  grid-column: unset !important;
  width: auto !important;
  max-width: none !important;
  justify-content: flex-end !important;
  margin-top: 0 !important;
}

.admin-row .mini-actions button {
  min-height: unset !important;
  padding: 7px 9px !important;
  flex: unset !important;
}

/* muted (hidden) state for visibility toggle */
.action-icon-btn--muted {
  color: rgba(255, 255, 255, .35);
  border-color: rgba(255, 255, 255, .1);
}

.action-icon-btn--muted:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
}

/* Responsive: on narrow screens stack controls below info */
@media (max-width: 480px) {
  .admin-row-controls {
    flex-wrap: wrap;
    gap: 6px;
  }
  .stock-stepper {
    flex: 0 0 auto;
    width: fit-content;
  }
  .action-icon-group {
    flex-shrink: 0;
  }
}

/* ============================================================
   FLAT CONTROLS: solid accent instead of gradients on all
   buttons, badges, toggles, chips and tabs. Ambient page
   backgrounds, blobs and theme glows are intentionally kept.
   ============================================================ */
.primary-btn,
.theme-acid .primary-btn,
.cart-btn,
.chip.active,
.admin-tab.active,
.admin-tabs button.active,
.order-actions button.active-status,
.theme-card.active,
.daily-cta,
.state-switch.state-on,
.resource-status.is-on {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Product buttons ("Выбрать вкус" / "Выбрать цвет" and qty controls)
   share the SAME accent as the cart and other primary elements so the
   whole interface stays visually consistent — no per-product colours. */
.buy-btn,
.inline-qty button {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 10px 26px rgba(84, 62, 175, .28) !important;
}

/* Negative / danger states: solid red instead of gradient */
.resource-status.is-off,
.state-switch.state-off,
.danger-resource-btn,
.daily-cta.is-added,
.danger-btn {
  background: #c02a5e !important;
  border-color: rgba(255, 104, 164, .5) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* ============================================================
   AUTHORITATIVE: admin "Права доступа" form tidy-up.
   Puts every element (fields, labels, buttons, permission
   cards, admin list) on one consistent grid with equal
   spacing, aligned text and uniform card heights.
   ============================================================ */

/* Vertical rhythm inside the admin form panel */
#adminForm {
  gap: 16px !important;
  align-content: start;
}

#adminForm h2 {
  margin-bottom: 2px !important;
}

/* Fields: label + input aligned, equal gaps */
#adminForm .field {
  gap: 6px !important;
}

#adminForm .field label {
  line-height: 1.3;
}

#adminForm .field input {
  width: 100% !important;
  padding: 12px 14px !important;
  line-height: 1.3;
}

/* Two-column rows share the same gutter as the permission grid */
#adminForm .two-col {
  gap: 12px !important;
  align-items: start;
}

/* Helper text: even spacing, no cramped block */
#adminForm .small-help {
  margin: 0 !important;
  line-height: 1.45 !important;
  color: var(--muted);
}

/* Presets row (Выбрать все / Снять все): two equal aligned buttons */
.permission-presets {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  justify-content: stretch !important;
  margin: 0 !important;
}

.permission-presets button {
  width: 100%;
  padding: 11px 12px !important;
  border-radius: 14px !important;
  font-size: 13px;
  text-align: center;
}

/* Permission cards: even 2-col grid, equal row heights, top-aligned text */
.permissions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

.permission-item {
  display: flex !important;
  align-items: center !important;
  min-height: 60px;
  height: 100%;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  gap: 0 !important;
}

.permission-item b {
  display: block;
  width: 100%;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  word-break: break-word;
}

/* "Администратор активен" toggle spans the full width on its own row */
#adminForm .choice-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

#adminForm .choice {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  line-height: 1.3;
}

/* Save / cancel buttons: full width, consistent height */
#adminForm .primary-btn.full,
#adminForm .ghost-btn.full {
  width: 100%;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

/* ============================================================
   Administrators list rows (Администраторы section).
   These rows have 3 children: thumb | info | action buttons.
   Lay them on a clean 3-column grid with top-aligned text
   and even vertical spacing so nothing wraps under the avatar.
   ============================================================ */
.admin-row:not([data-product-row-id]) {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* Avatar: fixed square, aligned to the top of the text block */
.admin-row:not([data-product-row-id]) .admin-thumb {
  width: 48px !important;
  height: 48px !important;
  align-self: start !important;
  font-size: 22px;
}

/* Info column: name, id, permissions — equal vertical rhythm */
.admin-row:not([data-product-row-id]) > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0;
  padding-top: 2px;
}

.admin-row:not([data-product-row-id]) strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.admin-row:not([data-product-row-id]) .muted {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.35;
}

.admin-row:not([data-product-row-id]) .small-help {
  margin: 0 !important;
  font-size: 12.5px;
  line-height: 1.55 !important;
  color: var(--muted);
}

/* Action buttons: stacked, aligned to the top-right, equal sizes */
.admin-row:not([data-product-row-id]) .mini-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: none !important;
  align-self: start !important;
}

.admin-row:not([data-product-row-id]) .mini-actions button {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 12px !important;
}

/* Keep the two-column permission grid even on very narrow (Telegram) widths,
   only collapsing on ultra-small screens to avoid clipped text. */
@media (max-width: 340px) {
  .permissions-grid,
  .permission-presets {
    grid-template-columns: 1fr !important;
  }
  .permission-item {
    min-height: 0;
  }
}

/* =========================================================================
   iOS-подобная система плавных анимаций (мягкая физика, ease-in-out ~0.34s)
   Задаёт единые кривые и длительности для модалок, вкладок, появлений,
   нажатий и прокрутки во всём интерфейсе.
   ========================================================================= */
:root {
  /* Плавная iOS-кривая (как в системных шторках) */
  --ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Мягкий отскок с лёгким овершутом — ощущение физичности */
  --ios-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  /* Симметричная ease-in-out */
  --ios-inout: cubic-bezier(0.45, 0, 0.25, 1);
  --ios-duration: 0.34s;
  --ios-duration-fast: 0.24s;
}

/* Плавная прокрутка по всему приложению */
html {
  scroll-behavior: smooth;
}
.app-shell,
.admin-tab-content,
.modal,
.age-modal {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Единые мягкие переходы для интерактивных элементов
   (переопределяют более быстрые .11–.22s правила выше) */
.card,
.product-card,
.panel,
.cart-line,
.checkout-card,
.bottom-bar,
.search-input,
.chip,
.choice,
.field input,
.field textarea,
.field select,
.icon-btn,
.pill-btn,
.primary-btn,
.ghost-btn,
.mini-actions button,
.admin-row,
.admin-tabs button,
.music-toggle {
  transition:
    transform var(--ios-duration) var(--ios-ease),
    opacity var(--ios-duration) var(--ios-ease),
    background var(--ios-duration) var(--ios-ease),
    border-color var(--ios-duration) var(--ios-ease),
    box-shadow var(--ios-duration) var(--ios-ease),
    color var(--ios-duration-fast) var(--ios-ease) !important;
}

/* Тактильный отклик при нажатии — лёгкое «вдавливание» с пружиной */
.icon-btn:active,
.pill-btn:active,
.primary-btn:active,
.ghost-btn:active,
.mini-actions button:active,
.admin-tabs button:active,
.chip:active,
.choice:active,
.bottom-bar button:active {
  transform: scale(0.94) !important;
  transition:
    transform 0.12s var(--ios-inout),
    background 0.12s var(--ios-inout) !important;
}

/* Открытие модального окна: подъём + масштаб + затухание фона */
.modal,
.age-modal {
  animation: iosBackdropIn var(--ios-duration) var(--ios-ease) both !important;
}
.modal > *,
.age-modal > .age-box,
.age-modal > .card {
  animation: iosSheetIn var(--ios-duration) var(--ios-spring) both !important;
}

@keyframes iosBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes iosSheetIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Переключение вкладок админки — мягкое проявление контента */
.admin-tab-content {
  animation: iosTabIn var(--ios-duration) var(--ios-ease) both !important;
}
@keyframes iosTabIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Появление элементов списков с лёгкой каскадной задержкой */
.admin-tab-content .admin-row,
.admin-tab-content .card,
.admin-tab-content .panel {
  animation: iosItemIn var(--ios-duration) var(--ios-ease) both !important;
}
.admin-tab-content .admin-row:nth-child(1),
.admin-tab-content .card:nth-child(1) { animation-delay: 0.02s !important; }
.admin-tab-content .admin-row:nth-child(2),
.admin-tab-content .card:nth-child(2) { animation-delay: 0.06s !important; }
.admin-tab-content .admin-row:nth-child(3),
.admin-tab-content .card:nth-child(3) { animation-delay: 0.10s !important; }
.admin-tab-content .admin-row:nth-child(4),
.admin-tab-content .card:nth-child(4) { animation-delay: 0.14s !important; }
.admin-tab-content .admin-row:nth-child(5),
.admin-tab-content .card:nth-child(5) { animation-delay: 0.18s !important; }
.admin-tab-content .admin-row:nth-child(n+6),
.admin-tab-content .card:nth-child(n+6) { animation-delay: 0.22s !important; }

@keyframes iosItemIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Variant count badge on product card ─────────────────────────────────── */
.variant-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 20px;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.variant-cart-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-accent, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 20px;
  pointer-events: none;
}

[data-open-variant] { cursor: pointer; }

/* ─── Variant modal overlay ─────────────────────────────────────────────────── */
.variant-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: variantOverlayIn 0.18s ease;
}

@keyframes variantOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.variant-modal {
  background: var(--color-bg-panel, #1a1a2e);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: variantModalUp 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes variantModalUp {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.variant-modal--admin {
  max-height: 85vh;
  border-radius: 18px 18px 0 0;
}

.variant-modal-img {
  /* Компактный предпросмотр вкуса/цвета — не во всю ширину. */
  width: 160px;
  height: 160px;
  margin: 4px auto 0;
  overflow: hidden;
  flex-shrink: 0;
}
.variant-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.variant-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 4px;
  -webkit-overflow-scrolling: touch;
}

.variant-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.variant-modal-header h2 { margin: 0; font-size: 16px; }

.variant-modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}

.variant-modal-desc {
  font-size: 13px;
  color: var(--color-text-muted, #aaa);
  margin: 0 0 4px;
  line-height: 1.5;
}

.variant-modal-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent, #7c3aed);
  margin: 0 0 10px;
}

/* ─── Variant section label ───────────────────────────────────────────────── */
.variant-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  margin: 12px 0 8px;
}

/* ─── Variant rows (flavor / color list) ─────────────────────────────────── */
.variant-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.variant-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border-radius: 12px;
  margin-bottom: 6px;
  border: 1.5px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.variant-row--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

.variant-row--empty {
  opacity: 0.5;
}

/* Row info is a tappable button that previews the variant photo (if any). */
.variant-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Без фото — обычный текст, без курсора-кнопки. */
.variant-row-info--no-image {
  cursor: default;
}

.variant-row-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  transition: border-color 0.15s, transform 0.15s;
}

.variant-row--preview .variant-row-thumb {
  border-color: var(--accent);
  transform: scale(1.04);
}

.variant-row-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.variant-modal-img img {
  transition: opacity 0.2s ease;
}

.variant-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}

.variant-row-meta {
  font-size: 12px;
  color: var(--muted);
}

.variant-qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}

.variant-out {
  font-size: 14px;
  color: var(--muted);
  padding: 0 12px;
}

.vqty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-strong);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  padding: 0;
}

.vqty-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.vqty-btn:not(:disabled):active,
.vqty-btn:not(:disabled):hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.vqty-num {
  min-width: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

/* ─── Variant modal footer bar ────────────────────────────────────────────── */
.variant-modal-footer {
  padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px));
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel-strong);
  flex-shrink: 0;
}

.variant-footer-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.variant-footer-price strong {
  font-size: 18px;
  font-weight: 1000;
}
.variant-footer-meta {
  font-size: 11px;
  color: var(--muted);
}

.variant-add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(84, 62, 175, .28);
  transition: transform .16s ease, opacity .16s ease;
}
.variant-add-btn:active {
  transform: scale(.97);
}
.variant-add-btn--disabled,
.variant-add-btn:disabled {
  background: rgba(255, 255, 255, .07);
  color: var(--muted);
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ─── Admin variants panel ────────────────────────────────────────────────── */
.admin-variants-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.admin-variant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-card, #14142b);
  border-radius: 10px;
  padding: 10px;
}

/* Thumbnail wrapper — clickable to replace photo */
.admin-variant-thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}
.admin-variant-thumb-wrap:hover::after {
  content: '📷';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  font-size: 18px;
  border-radius: 8px;
}

/* Hide native file input but keep it accessible */
.sr-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.admin-variant-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

.admin-variant-thumb--empty {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-bg, #0e0e1a);
  border: 1px dashed var(--color-border, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-text-muted, #888);
}

.admin-variant-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Inline editable name field */
.admin-variant-name-input {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #fff);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.admin-variant-name-input:focus {
  border-bottom-color: var(--color-accent, #7c3aed);
}

/* Compact stock row */
.admin-variant-stock-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-variant-stock-label {
  font-size: 11px;
  color: var(--color-text-muted, #888);
  flex-shrink: 0;
}
.stock-input--compact {
  width: 60px;
  padding: 3px 6px;
  font-size: 12px;
}

.admin-add-variant-form {
  margin-top: 4px;
}

.action-icon-btn--variants {
  color: var(--color-accent, #7c3aed);
}

/* Variants open button in product row — replaces stock stepper for variant products */
.variants-open-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--color-accent, #7c3aed) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #7c3aed) 30%, transparent);
  color: var(--color-accent, #7c3aed);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.variants-open-btn:hover {
  background: color-mix(in srgb, var(--color-accent, #7c3aed) 22%, transparent);
}
.variants-open-btn svg {
  flex-shrink: 0;
}

/* Variant type badge in admin row meta */
.admin-row-variant-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent, #7c3aed);
  background: color-mix(in srgb, var(--color-accent, #7c3aed) 12%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Cart variant tag – shows flavor / color name inside cart item */
.cart-variant-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent, #7c3aed);
  background: color-mix(in srgb, var(--color-accent, #7c3aed) 12%, transparent);
  padding: 1px 7px;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Уважать системную настройку «Уменьшение движения» */
@media (prefers-reduced-motion: reduce) {
  html,
  .app-shell,
  .admin-tab-content,
  .modal,
  .age-modal {
    scroll-behavior: auto;
  }
  .modal,
  .age-modal,
  .modal > *,
  .age-modal > .age-box,
  .age-modal > .card,
  .admin-tab-content,
  .admin-tab-content .admin-row,
  .admin-tab-content .card,
  .admin-tab-content .panel {
    animation: none !important;
  }
}

/* ===== css/checkout.css ===== */

/* ===== CART CLEANUP: ровная сетка, единые отступы и интервалы ===== */
.cart-item {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .05) !important;
}

.cart-item .cart-thumb {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, .07) !important;
  font-size: 28px !important;
}

.cart-item .cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cart-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Заголовок + тег вкуса */
.cart-info-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
}

.cart-info-head h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
  overflow-wrap: anywhere !important;
}

.cart-variant-tag {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* Подстрока: цена за штуку + наличие */
.cart-sub {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 10px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--muted) !important;
}

.cart-sub .cart-unit {
  font-weight: 700 !important;
  color: rgba(255, 255, 255, .82) !important;
}

.cart-sub .cart-stock {
  position: relative !important;
  padding-left: 11px !important;
}

.cart-sub .cart-stock::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: currentColor !important;
  opacity: .55 !important;
}

.cart-sub .stock-danger {
  padding-left: 0 !important;
}

.cart-sub .stock-danger::before {
  display: none !important;
}

/* Нижняя строка: количество слева, сумма позиции справа */
.cart-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.cart-actions .qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 3px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .06) !important;
}

.cart-actions .qty button {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .07) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.cart-actions .qty button:disabled {
  opacity: .4 !important;
}

.cart-actions .qty strong {
  min-width: 26px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.cart-actions .cart-line {
  flex: 0 0 auto !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  color: #fff !important;
}

@media (max-width: 380px) {
  .cart-item {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .cart-item .cart-thumb {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ===== FIX: фиксированная нижняя панель не должна расти и перекрывать контент ===== */
/* Кнопки в панели држтся в одну строку и одинаковой высоте, поэтому высота
   панели постоянна и контент над ней никогда не перекрывается. */
.customer-bottom-nav {
  align-items: stretch !important;
}

.customer-bottom-nav .cart-btn,
.customer-bottom-nav .bonus-bottom-btn,
.customer-bottom-nav .orders-bottom-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
}

.customer-bottom-nav .cart-btn {
  font-size: 15px !important;
  font-weight: 900 !important;
}

@media (max-width: 430px) {
  .customer-bottom-nav .cart-btn {
    font-size: 13.5px !important;
    letter-spacing: -.2px !important;
    padding-inline: 8px !important;
  }
}

/* Запас снизу, чтобы последний ряд карточек гарантированно очищал панель. */
.app-shell {
  padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
}

/* ===== FIX: бейджи на карточке не перекрывают друг друга и читаемы ===== */
/* Раскладка углов изображения товара:
   • top-left    — product-badge (Хит/Новинка)
   • top-right   — variant-count-badge («2 вкуса») или stock-badge («Ост. N»)
   • bottom-left — variant-cart-badge («N шт.» в корзине)
   Так «N шт.» больше не наезжает на другие бейджи и на контент. */
.product-image {
  isolation: isolate !important;
}

.product-image .product-badge,
.product-image .stock-badge,
.product-image .variant-count-badge,
.product-image .variant-cart-badge {
  z-index: 2 !important;
  max-width: calc(100% - 18px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
}

/* «N шт.» — в нижний левый угол, отдельно от верхних бейджей */
.product-image .variant-cart-badge {
  top: auto !important;
  bottom: 8px !important;
  left: 8px !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: var(--color-accent, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35) !important;
}

/* Верхний правый бейдж вариантов — единый стиль с product/stock-badge */
.product-image .variant-count-badge {
  top: 9px !important;
  right: 9px !important;
  left: auto !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(10px) !important;
}

/* ============================================================
   BONUS: кнопка нижнего меню + раздел кешбэка
   ============================================================ */

/* Нижнее меню теперь из трёх кнопок: Мои заказы · BONUS · Корзина */
.customer-bottom-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1.25fr) !important;
  gap: 8px !important;
}

@media (max-width: 430px) {
  .customer-bottom-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1.18fr) !important;
    gap: 6px !important;
  }
}

.bonus-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 10px 10px;
  border: 1px solid rgba(138, 99, 255, .55);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 30%, #17102e), #150c26);
  color: #f4f1ff;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .3px;
  white-space: nowrap;
  touch-action: manipulation;
}

.bonus-bottom-btn .bonus-gift-icon {
  color: var(--accent-3, #c65cff);
}

@media (max-width: 430px) {
  .bonus-bottom-btn {
    font-size: 12.5px;
    padding-inline: 6px;
    letter-spacing: 0;
  }
}

/* Hero-баланс */
.bonus-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 14px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(138, 99, 255, .4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #140a2c), color-mix(in srgb, var(--accent-2) 45%, #1a0f33));
  box-shadow: 0 18px 40px -22px rgba(138, 99, 255, .8);
}

.bonus-hero-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bonus-hero-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(244, 241, 255, .72);
}

.bonus-hero-balance {
  font-size: 30px;
  font-weight: 950;
  line-height: 1.05;
  color: #ffffff;
}

.bonus-hero-note {
  font-size: 13px;
  color: rgba(244, 241, 255, .78);
}

.bonus-hero-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .16);
}

.bonus-hero-icon .bonus-gift-icon {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

/* Информационные блоки */
.bonus-info p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 241, 255, .82);
}

.bonus-info b {
  color: var(--accent-3, #c65cff);
}

/* Прогрессивная шкала кешбэка */
.bonus-tiers {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
}

.bonus-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: rgba(244, 241, 255, .9);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.bonus-tier-row:first-child {
  border-top: none;
}

.bonus-tier-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(244, 241, 255, .6);
  background: rgba(255, 255, 255, .04);
}

.bonus-tier-range {
  flex: 1 1 auto;
}

.bonus-tier-percent {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent-3, #c65cff);
}

.bonus-tier-head .bonus-tier-percent {
  color: rgba(244, 241, 255, .6);
  font-weight: 600;
}

/* История */
.bonus-history .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bonus-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.bonus-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(138, 99, 255, .18);
  background: rgba(20, 12, 38, .7);
}

.bonus-history-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bonus-history-info b {
  font-size: 14px;
  color: #f4f1ff;
}

.bonus-history-info small {
  font-size: 12px;
  color: rgba(244, 241, 255, .55);
}

.bonus-history-amount {
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.bonus-history-amount.is-plus {
  color: #4ade80;
}

.bonus-history-amount.is-minus {
  color: #ff6b8a;
}

/* Блок списания баллов в оформлении заказа */
.bonus-checkout {
  margin: 14px 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(138, 99, 255, .35);
  background: rgba(20, 12, 38, .72);
}

.bonus-checkout.is-empty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bonus-checkout.is-empty .bonus-gift-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--accent-3, #c65cff);
}

.bonus-checkout.is-empty b {
  display: block;
  font-size: 14px;
  color: #f4f1ff;
}

.bonus-checkout.is-empty small {
  font-size: 12.5px;
  color: rgba(244, 241, 255, .6);
}

.bonus-checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bonus-checkout-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #f4f1ff;
}

.bonus-checkout-title .bonus-gift-icon {
  color: var(--accent-3, #c65cff);
}

.bonus-checkout-balance {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-3, #c65cff);
}

.bonus-checkout-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(244, 241, 255, .62);
}

.bonus-checkout-controls {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bonus-checkout-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent-2, #8a63ff);
}

.bonus-checkout-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-checkout-inputs input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(138, 99, 255, .35);
  background: rgba(8, 4, 18, .85);
  color: #f4f1ff;
  font-size: 15px;
  font-weight: 800;
}

.bonus-max-btn {
  flex: 0 0 auto;
  padding: 11px 14px !important;
  white-space: nowrap;
}

.bonus-checkout-applied {
  font-size: 13px;
  color: rgba(244, 241, 255, .8);
}

.bonus-checkout-applied b {
  color: var(--accent-3, #c65cff);
}

.bonus-quick-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bonus-quick-values button {
  min-height: 38px;
  border: 1px solid rgba(138, 99, 255, .32);
  border-radius: 11px;
  background: rgba(138, 99, 255, .1);
  color: #f4f1ff;
  font-weight: 800;
}

.bonus-quick-values button:disabled,
.choice.is-disabled {
  opacity: .42;
  cursor: not-allowed;
}

.payment-limit-note {
  margin: 8px 0 0;
  color: #fbbf24;
  font-size: 12.5px;
  line-height: 1.4;
}

.bonus-rules-card {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(138, 99, 255, .28);
  border-radius: 16px;
  background: rgba(138, 99, 255, .08);
}

.bonus-rules-card h3 { margin: 0 0 10px; font-size: 16px; }
.bonus-rules-card ul { margin: 0; padding-left: 19px; display: grid; gap: 7px; color: rgba(244,241,255,.82); font-size: 13px; line-height: 1.45; }
.bonus-rules-examples { display: grid; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 800; }
.bonus-rules-examples .is-valid { color: #86efac; }
.bonus-rules-examples .is-invalid { color: #fda4af; }

@media (max-width: 430px) {
  .bonus-quick-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus-checkout-inputs { align-items: stretch; }
}

/* Подсказка о начислении кешбэка перед оформлением */
.bonus-earn-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(74, 222, 128, .28);
  background: rgba(74, 222, 128, .10);
  color: #86efac;
  font-size: 12.5px;
  line-height: 1.35;
}

.bonus-earn-hint b {
  color: #bbf7d0;
}

.bonus-earn-hint .bonus-gift-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.bonus-earn-hint.is-off {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: rgba(244, 241, 255, .66);
}

.bonus-earn-hint.is-off b {
  color: rgba(244, 241, 255, .82);
}

/* Строка скидки в сводке заказа */
.payment-summary .bonus-discount-row strong {
  color: #4ade80 !important;
}

/* ============================================================
   V19: аккуратное нижнее меню, иконка обновления и списание баллов
   ============================================================ */

/* Единые отступы и выравнивание для всех трёх кнопок нижнего меню */
.customer-bottom-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

/* Вертикальная компоновка: иконка сверху, подпись снизу */
.customer-bottom-nav .nav-btn {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 8px 8px !important;
  border-radius: 18px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Акцентный «чип» под иконкой — визуально подчёркивает её */
.customer-bottom-nav .nav-btn .nav-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  position: relative !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}

.customer-bottom-nav .nav-btn:active .nav-ic {
  transform: scale(.92) !important;
}

/* Подсветка иконки в активном состоянии */
.customer-bottom-nav .nav-btn.is-active .nav-ic,
.customer-bottom-nav .nav-btn[aria-current="page"] .nav-ic {
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
}

.customer-bottom-nav .nav-btn.is-active .nav-ic svg,
.customer-bottom-nav .nav-btn.is-active .bonus-gift-icon,
.customer-bottom-nav .nav-btn[aria-current="page"] .nav-ic svg,
.customer-bottom-nav .nav-btn[aria-current="page"] .bonus-gift-icon {
  color: var(--accent-2, #8a63ff) !important;
}

/* Круглый счётчик количества товаров на иконке корзины */
.customer-bottom-nav .cart-btn .cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 2px rgba(20, 12, 38, .9) !important;
  pointer-events: none !important;
}

.customer-bottom-nav .cart-btn .cart-badge[hidden] {
  display: none !important;
}

.customer-bottom-nav .nav-btn .nav-ic svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  transition: color .15s ease !important;
}

/* Все иконки нижнего меню — светлые, единого цвета (в т.ч. подарок у BONUS) */
.customer-bottom-nav .nav-btn .nav-ic svg,
.customer-bottom-nav .bonus-bottom-btn .bonus-gift-icon {
  color: #f4f1ff !important;
}

/* Подписи всегда показываем целиком, ровно по центру снизу */
.customer-bottom-nav .nav-btn .nav-label {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.customer-bottom-nav .cart-btn {
  overflow: visible !important;
}
.customer-bottom-nav .cart-btn .nav-label {
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 400px) {
  .customer-bottom-nav {
    gap: 6px !important;
  }
  .customer-bottom-nav .nav-btn {
    padding: 8px 4px !important;
    gap: 5px !important;
  }
  .customer-bottom-nav .nav-btn .nav-label {
    font-size: 11px !important;
  }
}

@media (max-width: 340px) {
  .customer-bottom-nav .nav-btn .nav-ic {
    width: 30px !important;
    height: 30px !important;
  }
  .customer-bottom-nav .nav-btn .nav-ic svg {
    width: 17px !important;
    height: 17px !important;
  }
  .customer-bottom-nav .nav-btn .nav-label {
    font-size: 10.5px !important;
  }
}

.customer-bottom-nav .nav-btn .nav-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 17px !important;
  height: 17px !important;
  position: relative !important;
}

/* Круглый счётчик количества товаров на иконке корзины */
.customer-bottom-nav .cart-btn .cart-badge {
  position: absolute !important;
  top: -7px !important;
  right: -9px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 2px rgba(20, 12, 38, .9) !important;
  pointer-events: none !important;
}

.customer-bottom-nav .cart-btn .cart-badge[hidden] {
  display: none !important;
}

.customer-bottom-nav .nav-btn .nav-ic svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Все иконки нижнего меню — светлые, единого цвета (в т.ч. подарок у BONUS) */
.customer-bottom-nav .nav-btn .nav-ic svg,
.customer-bottom-nav .bonus-bottom-btn .bonus-gift-icon {
  color: #f4f1ff !important;
}

/* Подписи «Мои закз» и «BONUS» всегда показываем целиком */
.customer-bottom-nav .nav-btn .nav-label {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* Подпись корзины фиксированная («Корзина»), кружок-счётчик не должен обрезаться */
.customer-bottom-nav .cart-btn {
  overflow: visible !important;
}
.customer-bottom-nav .cart-btn .nav-label {
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 400px) {
  .customer-bottom-nav {
    gap: 6px !important;
  }
  .customer-bottom-nav .nav-btn {
    padding: 10px 6px !important;
    gap: 5px !important;
  }
  .customer-bottom-nav .nav-btn .nav-label {
    font-size: 12px !important;
  }
}

@media (max-width: 340px) {
  .customer-bottom-nav .nav-btn .nav-label {
    font-size: 11px !important;
  }
  .customer-bottom-nav .nav-btn .nav-ic,
  .customer-bottom-nav .nav-btn .nav-ic svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Стильная иконка обновления вместо кнопки «Обновить» */
.icon-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(138, 99, 255, .4);
  background: rgba(20, 12, 38, .85);
  color: var(--accent-3, #c65cff);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  touch-action: manipulation;
}

.icon-refresh-btn:hover {
  border-color: rgba(138, 99, 255, .7);
  background: rgba(28, 18, 52, .95);
}

.icon-refresh-btn:active {
  transform: scale(.92);
}

.icon-refresh-btn:disabled {
  opacity: .7;
  cursor: default;
}

.icon-refresh-btn .refresh-svg {
  display: block;
}

.icon-refresh-btn.is-loading .refresh-svg {
  animation: icon-refresh-spin .8s linear infinite;
}

@keyframes icon-refresh-spin {
  to { transform: rotate(360deg); }
}

/* Списание всех баллов одной кнопкой (без выбора количества) */
.bonus-redeem-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(138, 99, 255, .45);
  background: rgba(8, 4, 18, .6);
  color: #f4f1ff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  touch-action: manipulation;
}

.bonus-redeem-toggle .bonus-gift-icon {
  color: var(--accent-3, #c65cff);
}

.bonus-redeem-toggle:active {
  transform: scale(.98);
}

.bonus-redeem-toggle.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2, #8a63ff), var(--accent-3, #c65cff));
  color: #fff;
}

.bonus-redeem-toggle.is-active .bonus-gift-icon {
  color: #fff;
}

/* ============================================================
   FINAL LAYOUT: карточка товара без описания — без пустот
   Описание убрано из разметки. Раньше карточка растягивалась на
   высоту соседней (min-height:100% + margin-top:auto у кнопки),
   из-за чего у короткой карточки появлялся большой пустой блок
   между бейджем «18+» и ценой. Теперь карточка занимает высоту
   своего содержимого и прижимается к верху ячейки сетки —
   элементы идут плотно, без пустого места и перекосов.
   ============================================================ */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;      /* не растягиваться под высоту соседней карточки */
  min-height: 0 !important;
  height: auto !important;
  grid-template-rows: none !important;
  content-visibility: visible !important;
}

.product-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;         /* высота по содержимому, без растяжения */
  gap: 10px !important;
  padding: 14px !important;
  height: auto !important;
  grid-template-rows: none !important;
}

/* Название: всегда резервирует высоту в 2 строки, чтобы бейдж, цена и
   кнопка выравнивались по одной линии у карточек с разной длиной названия.
   Короткое (1-строчное) название занимает столько же места, сколько
   длинное (2-строчное) — соседние карточки не съезжают. */
.product-body .product-title {
  height: 2.5em !important;          /* ровно 2 строки при line-height:1.25 */
  min-height: 2.5em !important;
  max-height: 2.5em !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* Описание полностью скрыто (на случай кэшированной разметки) */
.product-body .product-desc {
  display: none !important;
}

/* Метки под названием — по содержимому, без лишних отступов */
.product-body .short-note,
.product-body .age-mark {
  min-height: 0 !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

/* Блок «цена + кнопка» идёт сразу за бейджем, без авто-отступа сверху */
.product-body .buy-row {
  margin-top: 2px !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
}

.product-body .price-box {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.product-body .buy-btn,
.product-body .inline-qty {
  width: 100% !important;
  min-height: 46px !important;
}
/* =========================================================================


/* =========================================================================
   Пункт самовывоза в блоке «Получение»
   ========================================================================= */
.pickup-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}

.pickup-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pickup-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.pickup-card-head b {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

.pickup-card-head small {
  display: block;
  opacity: 0.65;
  font-size: 12px;
}

.pickup-card-address {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.pickup-card-landmark {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.35;
}

.pickup-map {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

.pickup-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.pickup-map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
}

.pickup-map-fallback[hidden] {
  display: none;
}

.pickup-map-fallback p {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}

.pickup-map-link {
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}

.pickup-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pickup-card-actions .ghost-btn {
  flex: 1 1 100%;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .pickup-map {
    height: 170px;
  }

}

/* Блок ошибки аналитики в админке */
.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
}

.analytics-error p {
  margin: 0;
  opacity: 0.75;
  font-size: 14px;
}

/* v117: delegated order checkout */
.admin-order-for{display:grid;gap:10px;margin-bottom:14px;padding:4px;border:1px solid rgba(162,129,247,.15);border-radius:15px;background:rgba(95,68,176,.06);transition:border-color .18s ease,background .18s ease}.admin-order-for.is-active{padding:10px;border-color:rgba(162,129,247,.34);background:rgba(95,68,176,.12)}
.admin-order-for-toggle{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;min-height:54px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:#fff;text-align:left}.admin-order-for-toggle>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(162,129,247,.18);color:#c9b8ff}.admin-order-for-toggle>span:nth-child(2){display:grid;gap:2px;min-width:0}.admin-order-for-toggle b{font-size:14px}.admin-order-for-toggle small{color:var(--muted);font-size:11px;line-height:1.3}.admin-order-for-toggle>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:#cbbaff;font-style:normal;font-weight:850}
.admin-order-for-fields{display:grid;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(8,7,13,.44)}.admin-order-for-fields label{display:grid;gap:6px}.admin-order-for-fields label>span{color:var(--muted);font-size:12px;font-weight:750}.admin-order-for-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.admin-order-for-input input{box-sizing:border-box;width:100%;min-width:0;min-height:46px}.admin-order-for-input button{min-height:46px}
.resolved-order-target{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:10px;border:1px solid rgba(114,188,143,.24);border-radius:12px;background:rgba(70,161,113,.09)}.resolved-order-target-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(114,188,143,.18);color:#a6ebc5;font-weight:900}.resolved-order-target>div{display:grid;gap:2px;min-width:0}.resolved-order-target b{overflow-wrap:anywhere}.resolved-order-target small{color:var(--muted);font-size:11px}.verification-inline{width:fit-content;margin-top:3px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800}.verification-inline.is-verified{background:rgba(70,161,113,.18);color:#a6ebc5}.verification-inline.is-unverified{background:rgba(255,255,255,.07);color:#c8c1d2}.admin-order-for-note{color:rgba(233,229,239,.56);font-size:11px;line-height:1.4}
@media(max-width:520px){.admin-order-for-input{grid-template-columns:1fr}.admin-order-for-input button{width:100%}.admin-order-for-toggle{padding-inline:6px}.admin-order-for-fields{padding:10px}}

/* ===== css/modals.css ===== */

PREMIUM MOTION SYSTEM v20 — fluid, soft, alive
   Fades · slides · scale · elastic spring · micro-bounces
   Respects prefers-reduced-motion. GPU-friendly (transform/opacity only).
   ========================================================================= */

:root {
  --motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-spring: cubic-bezier(0.34, 1.45, 0.45, 1);
  --motion-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-inout: cubic-bezier(0.45, 0, 0.25, 1);
  --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-fast: 0.18s;
  --motion-base: 0.34s;
  --motion-slow: 0.48s;
  --motion-page: 0.38s;
  --motion-exit: 0.16s;
  /* keep iOS aliases in sync */
  --ios-ease: var(--motion-ease);
  --ios-spring: var(--motion-spring);
  --ios-inout: var(--motion-inout);
  --ios-duration: var(--motion-base);
  --ios-duration-fast: var(--motion-fast);
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes motionPageEnter {
  from {
    opacity: 0;
    transform: translate3d(22px, 12px, 0) scale(0.978);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionPageEnterBack {
  from {
    opacity: 0;
    transform: translate3d(-22px, 10px, 0) scale(0.978);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionPageExit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(-14px, 8px, 0) scale(0.985);
  }
}

@keyframes motionPageExitBack {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(14px, 8px, 0) scale(0.985);
  }
}

@keyframes motionFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionFadeUpBack {
  from {
    opacity: 0;
    transform: translate3d(-12px, 12px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionFadeUpFwd {
  from {
    opacity: 0;
    transform: translate3d(12px, 12px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bottomNavFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motionFadeScale {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes motionPopIn {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  70% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes motionBadgePop {
  0% { transform: scale(0.4); opacity: 0; }
  55% { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes motionCartPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  60% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes motionNavBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes motionToastIn {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionToastOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.96);
  }
}

@keyframes motionSheetIn {
  from {
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionSheetOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.97);
  }
}

@keyframes motionOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motionOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes motionCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes motionChipSelect {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes motionQtyPop {
  0% { transform: scale(0.86); opacity: 0.5; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes motionShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes motionBreathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.015); opacity: 1; }
}

@keyframes motionGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84, 62, 175, 0); }
  50% { box-shadow: 0 0 24px 2px rgba(84, 62, 175, 0.28); }
}

@keyframes motionRipple {
  0% {
    transform: scale(0);
    opacity: 0.45;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes motionRowFlash {
  0% { background-color: rgba(84, 62, 175, 0.22); }
  100% { background-color: transparent; }
}

@keyframes motionEmptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes motionSuccessRing {
  0% { box-shadow: 0 0 0 0 rgba(47, 217, 168, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(47, 217, 168, 0); }
}

/* ── Page transitions ──────────────────────────────────────────────────────── */
/* .app-shell НЕ анимируем transform'ом — только дети. Так fixed-навигация
   остаётся привязанной к viewport, а разделы снова «оживают». */

.app-shell.motion-page-enter,
.app-shell.motion-page-enter-back {
  /* оболочка без transform — иначе fixed bottom bar отлипает */
  animation: none !important;
}

.app-shell.motion-page-exit,
.app-shell.motion-page-exit-back {
  animation: none !important;
}

/* Каскад появления блоков страницы (кроме нижней панели) */
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav) {
  animation: motionFadeUpFwd 0.4s var(--motion-soft) both !important;
}
.app-shell.motion-stagger.motion-page-enter-back > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav) {
  animation-name: motionFadeUpBack !important;
}
.app-shell.motion-stagger.motion-page-enter > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav) {
  animation-name: motionFadeUpFwd !important;
}

.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(1) { animation-delay: 0.02s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(2) { animation-delay: 0.05s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(3) { animation-delay: 0.08s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(4) { animation-delay: 0.11s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(5) { animation-delay: 0.14s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(6) { animation-delay: 0.17s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(7) { animation-delay: 0.2s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(8) { animation-delay: 0.23s !important; }
.app-shell.motion-stagger > *:not(#bottomMount):not(.bottom-bar):not(.customer-bottom-nav):nth-child(n+9) { animation-delay: 0.26s !important; }

/* Обёртка нижней панели не участвует в page-stagger */
#bottomMount {
  animation: none !important;
}

/* ── Product cards cascade ─────────────────────────────────────────────── */

.products-grid.stagger-cards .product-card {
  animation: motionCardIn 0.42s var(--motion-spring) both !important;
}
.products-grid.stagger-cards .product-card:nth-child(1) { animation-delay: 0.02s !important; }
.products-grid.stagger-cards .product-card:nth-child(2) { animation-delay: 0.05s !important; }
.products-grid.stagger-cards .product-card:nth-child(3) { animation-delay: 0.08s !important; }
.products-grid.stagger-cards .product-card:nth-child(4) { animation-delay: 0.11s !important; }
.products-grid.stagger-cards .product-card:nth-child(5) { animation-delay: 0.14s !important; }
.products-grid.stagger-cards .product-card:nth-child(6) { animation-delay: 0.17s !important; }
.products-grid.stagger-cards .product-card:nth-child(7) { animation-delay: 0.2s !important; }
.products-grid.stagger-cards .product-card:nth-child(8) { animation-delay: 0.23s !important; }
.products-grid.stagger-cards .product-card:nth-child(9) { animation-delay: 0.26s !important; }
.products-grid.stagger-cards .product-card:nth-child(10) { animation-delay: 0.29s !important; }
.products-grid.stagger-cards .product-card:nth-child(11) { animation-delay: 0.32s !important; }
.products-grid.stagger-cards .product-card:nth-child(12) { animation-delay: 0.35s !important; }
.products-grid.stagger-cards .product-card:nth-child(n+13) { animation-delay: 0.38s !important; }

.product-card {
  transition:
    transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease) !important;
  transform-origin: center center;
}

.product-card:active {
  transform: scale(0.985) !important;
}

.product-card .buy-btn {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    filter var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    opacity var(--motion-fast) ease !important;
}

.product-card .buy-btn:active {
  transform: scale(0.94) !important;
}

/* Buy → qty control morph */
.cart-control-swap.is-ready,
.inline-qty.cart-control-swap {
  animation: motionQtyPop 0.36s var(--motion-spring) both !important;
}

/* ─── Bottom nav & cart badge ───────────────────────────────────────────── */

/* Фиксированная нижняя панель: всегда внизу viewport.
   Центрирование ТОЛЬКО через left/right + margin — без translateX(-50%),
   иначе при page-enter панель «прыгает» справа в центр. */
.bottom-bar,
.bottom-bar.customer-bottom-nav,
.customer-bottom-nav.bottom-bar {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  z-index: 100 !important;
  width: min(520px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* transform не фиксируем в none — bottomNavIn использует scale(0.96→1) */
  filter: none !important;
  contain: none !important;
  will-change: auto !important;
  pointer-events: auto !important;
}

/* Обёртка не должна создавать containing block для fixed-панели */
#bottomMount {
  display: contents !important;
}

.customer-bottom-nav .nav-btn {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background var(--motion-base) var(--motion-ease),
    color var(--motion-fast) ease,
    box-shadow var(--motion-base) var(--motion-ease) !important;
}

.customer-bottom-nav .nav-btn .nav-ic {
  transition:
    transform var(--motion-base) var(--motion-spring),
    background var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    color var(--motion-fast) ease !important;
}

.customer-bottom-nav .nav-btn.is-active .nav-ic,
.customer-bottom-nav .nav-btn[aria-current="page"] .nav-ic {
  animation: motionNavBounce 0.45s var(--motion-spring) both !important;
}

.customer-bottom-nav .nav-btn.is-active .nav-label {
  animation: motionFadeUp 0.3s var(--motion-soft) both;
}

.customer-bottom-nav .cart-btn .cart-badge {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    opacity var(--motion-fast) ease !important;
  transform-origin: center center;
}

.customer-bottom-nav .cart-btn .cart-badge.badge-pop,
.cart-badge.badge-pop {
  animation: motionBadgePop 0.48s var(--motion-bounce) both !important;
}

.cart-btn.cart-pulse,
.cart-top-btn.cart-pulse,
[data-open-cart].cart-pulse {
  animation: motionCartPulse 0.5s var(--motion-bounce) both !important;
}

/* Панель: только opacity/shadow — без transform (иначе fixed ломается) */
.bottom-bar,
.customer-bottom-nav {
  transition:
    opacity var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease) !important;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */

.toast {
  transition: none !important;
  transform-origin: center bottom;
}

.toast.toast-in {
  animation: motionToastIn 0.4s var(--motion-spring) both !important;
}

.toast.toast-out {
  animation: motionToastOut 0.28s var(--motion-ease) both !important;
}

/* ── Modals / sheets ───────────────────────────────────────────────────── */

.variant-modal-overlay,
.modal,
.age-modal {
  animation: motionOverlayIn 0.28s var(--motion-ease) both !important;
}

.variant-modal,
.modal > *,
.age-modal > .age-box,
.age-modal > .card {
  animation: motionSheetIn 0.42s var(--motion-spring) both !important;
}

.variant-modal-overlay.is-closing {
  animation: motionOverlayOut 0.24s var(--motion-ease) both !important;
  pointer-events: none !important;
}

.variant-modal-overlay.is-closing .variant-modal {
  animation: motionSheetOut 0.26s var(--motion-ease) both !important;
}

.variant-modal-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.variant-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #f7f3ff;
  font-size: 22px;
  line-height: 1;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.variant-back-btn:hover {
  border-color: rgba(155,128,246,.34);
  background: rgba(124,92,255,.12);
  transform: translateX(-1px);
}

.variant-back-btn:active {
  transform: translateX(-2px) scale(.98);
}

.variant-back-btn span {
  transform: translateY(-1px);
}

/* ── Редактор состава заказа ───────────────────────────────────────────── */

.order-edit-modal { max-height: 92vh; }
.order-edit-body { padding-bottom: 20px; }
.order-edit-body .variant-modal-topbar small { color: var(--color-text-muted, #aaa); }
.order-edit-section + .order-edit-section { margin-top: 24px; }
.order-edit-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text-muted, #aaa);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.order-edit-current-row,
.order-edit-catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.order-edit-current-info,
.order-edit-catalog-info { min-width: 0; }
.order-edit-current-info b,
.order-edit-current-info small,
.order-edit-catalog-info b,
.order-edit-catalog-info small { display: block; }
.order-edit-current-info b,
.order-edit-catalog-info b { font-size: 14px; line-height: 1.35; }
.order-edit-current-info small,
.order-edit-catalog-info small { margin-top: 3px; color: var(--color-text-muted, #aaa); font-size: 12px; }
.order-edit-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.order-edit-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: inherit;
  font-size: 20px;
}
.order-edit-controls button:disabled { opacity: .35; }
.order-edit-controls strong { min-width: 24px; text-align: center; }
.order-edit-controls .order-edit-remove { color: #ff8d8d; }
.order-edit-catalog-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.order-edit-catalog-info img,
.order-edit-catalog-info > span {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
  object-fit: contain;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
}
.order-edit-add { width: auto; min-width: 90px; min-height: 42px; padding: 8px 12px; }
.order-edit-empty { padding: 18px 10px; }
.order-edit-footer { gap: 12px; }
.order-edit-footer .variant-add-btn { min-width: 132px; }

.daily-builder-modal { max-height: 88vh; }
.daily-builder-hint { margin: 12px 0 16px; color: var(--color-text-muted, #aaa); font-size: 13px; line-height: 1.45; }
.daily-builder-list { display: grid; gap: 10px; }
.daily-builder-row { display: grid; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.035); }
.daily-builder-row > span { display: grid; gap: 3px; }
.daily-builder-row b { font-size: 14px; }
.daily-builder-row small { color: var(--color-text-muted, #aaa); font-size: 12px; }
.daily-builder-row select { width: 100%; min-height: 44px; margin: 0; }

@media (max-width: 420px) {
  .order-edit-current-row { align-items: flex-start; flex-direction: column; }
  .order-edit-controls { width: 100%; }
  .order-edit-controls .order-edit-remove { margin-left: auto; }
  .order-edit-catalog-row { align-items: flex-start; }
  .order-edit-add { min-width: 82px; }
}

.modal.is-closing,
.age-modal.is-closing {
  animation: motionOverlayOut 0.24s var(--motion-ease) both !important;
  pointer-events: none !important;
}

/* Variant rows cascade inside modal */
.variant-modal-body .variant-row,
.variant-list .variant-row,
[data-variant-row] {
  animation: motionFadeUp 0.34s var(--motion-soft) both;
}
.variant-modal-body .variant-row:nth-child(1),
.variant-list .variant-row:nth-child(1) { animation-delay: 0.04s; }
.variant-modal-body .variant-row:nth-child(2),
.variant-list .variant-row:nth-child(2) { animation-delay: 0.08s; }
.variant-modal-body .variant-row:nth-child(3),
.variant-list .variant-row:nth-child(3) { animation-delay: 0.12s; }
.variant-modal-body .variant-row:nth-child(4),
.variant-list .variant-row:nth-child(4) { animation-delay: 0.16s; }
.variant-modal-body .variant-row:nth-child(5),
.variant-list .variant-row:nth-child(5) { animation-delay: 0.2s; }
.variant-modal-body .variant-row:nth-child(n+6),
.variant-list .variant-row:nth-child(n+6) { animation-delay: 0.24s; }

/* ── Chips / filters ───────────────────────────────────────────────────── */

.chip,
.chips button {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-fast) ease,
    box-shadow var(--motion-base) var(--motion-ease) !important;
}

.chip.active,
.chips button.active {
  animation: motionChipSelect 0.38s var(--motion-spring) both;
}

/* ── Cart lines ────────────────────────────────────────────────────────── */

.cart-line,
[data-cart-item] {
  transition:
    transform var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease) !important;
}

.cart-item-updated,
[data-cart-item].cart-item-updated {
  animation: motionRowFlash 0.55s var(--motion-ease) both !important;
}

.cart-line.stagger-in,
[data-cart-item].stagger-in {
  animation: motionCardIn 0.4s var(--motion-spring) both !important;
}

/* ===== css/admin.css ===== */

/* ── Admin tabs & rows ─────────────────────────────────────────────────── */

.admin-tabs button,
.admin-tab {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-fast) ease,
    box-shadow var(--motion-base) var(--motion-ease) !important;
}

.admin-tabs button.active,
.admin-tab.active {
  animation: motionChipSelect 0.36s var(--motion-spring) both;
}

.admin-tab-content {
  animation: motionFadeUp 0.36s var(--motion-soft) both !important;
}

.admin-tab-content .admin-row,
.admin-tab-content .card,
.admin-tab-content .panel {
  animation: motionCardIn 0.4s var(--motion-spring) both !important;
}
.admin-tab-content .admin-row:nth-child(1),
.admin-tab-content .card:nth-child(1) { animation-delay: 0.02s !important; }
.admin-tab-content .admin-row:nth-child(2),
.admin-tab-content .card:nth-child(2) { animation-delay: 0.06s !important; }
.admin-tab-content .admin-row:nth-child(3),
.admin-tab-content .card:nth-child(3) { animation-delay: 0.1s !important; }
.admin-tab-content .admin-row:nth-child(4),
.admin-tab-content .card:nth-child(4) { animation-delay: 0.14s !important; }
.admin-tab-content .admin-row:nth-child(5),
.admin-tab-content .card:nth-child(5) { animation-delay: 0.18s !important; }
.admin-tab-content .admin-row:nth-child(n+6),
.admin-tab-content .card:nth-child(n+6) { animation-delay: 0.22s !important; }

/* ── Buttons: richer press physics ─────────────────────────────────────── */

button,
[role="button"],
.choice,
.chip,
.admin-tab,
.permission-item,
.state-switch,
.danger-resource-btn,
.primary-btn,
.ghost-btn,
.pill-btn,
.icon-btn,
.buy-btn,
.nav-btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    transform 0.18s var(--motion-bounce),
    filter 0.18s var(--motion-ease),
    background 0.28s var(--motion-ease),
    box-shadow 0.28s var(--motion-ease),
    border-color 0.28s var(--motion-ease),
    opacity 0.18s ease,
    color 0.18s ease !important;
}

button:active,
button.is-pressed,
[role="button"]:active,
[role="button"].is-pressed,
.choice:active,
.choice.is-pressed,
.chip:active,
.chip.is-pressed,
.admin-tab:active,
.admin-tab.is-pressed,
.permission-item:active,
.permission-item.is-pressed,
.state-switch:active,
.state-switch.is-pressed,
.danger-resource-btn:active,
.danger-resource-btn.is-pressed,
.primary-btn:active,
.ghost-btn:active,
.buy-btn:active,
.nav-btn:active {
  transform: translateY(1px) scale(0.955) !important;
  filter: brightness(0.9) saturate(0.96) !important;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* Soft glow on primary actions */
.primary-btn,
.buy-btn,
.daily-cta,
.cart-btn {
  transition:
    transform 0.18s var(--motion-bounce),
    filter 0.18s var(--motion-ease),
    background 0.28s var(--motion-ease),
    box-shadow 0.4s var(--motion-ease),
    opacity 0.18s ease !important;
}

.primary-btn:not(:disabled):hover,
.buy-btn:not(:disabled):hover {
  box-shadow: 0 10px 28px rgba(84, 62, 175, 0.35) !important;
}

.primary-btn.success-flash {
  animation: motionSuccessRing 0.6s var(--motion-ease) both !important;
}

/* ── Ripple on tap ─────────────────────────────────────────────────────── */

.tap-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 2;
  animation: motionRipple 0.55s var(--motion-ease) forwards;
  will-change: transform, opacity;
}

/* ── Topbar / back chip ────────────────────────────────────────────────── */

.topbar {
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}

.back-chip {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background var(--motion-base) var(--motion-ease),
    opacity var(--motion-fast) ease !important;
}

.back-chip:active {
  transform: scale(0.9) translateX(-2px) !important;
}

.logo {
  transition: transform var(--motion-base) var(--motion-spring) !important;
}

.logo:active {
  transform: scale(0.94) !important;
}

.top-action-btn {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease) !important;
}

/* ── Inputs / fields ───────────────────────────────────────────────────── */

.search-input,
.field input,
.field textarea,
.field select,
input,
textarea,
select {
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease) !important;
}

.search-input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(84, 62, 175, 0.22), 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ── Empty states ──────────────────────────────────────────────────────── */

.empty {
  animation: motionFadeUp 0.45s var(--motion-soft) both;
}

.empty::before {
  display: inline-block;
  animation: motionEmptyFloat 2.8s ease-in-out infinite;
}

/* ── Hero breathing ────────────────────────────────────────────────── */

.hero {
  transition: transform var(--motion-slow) var(--motion-ease), opacity var(--motion-base) ease;
}

.hero h2 {
  animation: motionBreathe 7s ease-in-out infinite;
  transform-origin: left center;
}

/* ── Age gate ──────────────────────────────────────── */

.age-box,
.age-modal .card {
  animation: motionPopIn 0.48s var(--motion-spring) both !important;
}

/* ── Bonus page accents ────────────────────────────────────────────────── */

.bonus-redeem-toggle {
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease) !important;
}

.bonus-redeem-toggle.is-active {
  animation: motionChipSelect 0.4s var(--motion-spring) both;
}

/* ── Image load soft fade ──────────────────────────────────────────────── */

.product-card img,
.variant-modal-img img,
.daily-art img,
.logo img {
  transition: opacity 0.35s var(--motion-ease), transform 0.45s var(--motion-soft);
}

.product-card:active img {
  transform: scale(1.02);
}

/* ── Skeleton / shimmer utility ────────────────────────────────────────── */

.motion-shimmer {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.04) 65%
  );
  background-size: 200% 100%;
  animation: motionShimmer 1.4s linear infinite;
}

/* ── Global scroll polish ──────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ── Reduced motion: kill all theatrics ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .app-shell.motion-page-exit,
  .app-shell.motion-page-exit-back,
  .app-shell.motion-page-enter,
  .app-shell.motion-page-enter-back,
  .app-shell.motion-stagger > *,
  .products-grid.stagger-cards .product-card,
  .toast.toast-in,
  .toast.toast-out,
  .variant-modal-overlay,
  .variant-modal,
  .variant-modal-overlay.is-closing,
  .variant-modal-overlay.is-closing .variant-modal,
  .modal,
  .age-modal,
  .modal > *,
  .age-modal > .age-box,
  .age-modal > .card,
  .admin-tab-content,
  .admin-tab-content .admin-row,
  .admin-tab-content .card,
  .admin-tab-content .panel,
  .chip.active,
  .cart-badge.badge-pop,
  .cart-btn.cart-pulse,
  .cart-top-btn.cart-pulse,
  .hero h2,
  .empty,
  .empty::before,
  .tap-ripple,
  .cart-control-swap.is-ready,
  .inline-qty.cart-control-swap,
  .customer-bottom-nav .nav-btn.is-active .nav-ic {
    animation: none !important;
  }

  button:active,
  button.is-pressed,
  [role="button"]:active,
  [role="button"].is-pressed {
    transform: none !important;
    filter: brightness(0.92) !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ── Motion v20 fixes: never clip cart badge / overflow for ripples ───── */
.customer-bottom-nav .nav-btn,
.customer-bottom-nav .cart-btn,
.cart-top-btn,
.top-action-btn {
  overflow: visible !important;
}

/* Ripple host only where we can safely clip */
.primary-btn,
.buy-btn,
.ghost-btn,
.pill-btn,
.icon-btn,
.chip,
.choice,
.admin-tab,
.orders-bottom-btn,
.bonus-bottom-btn {
  overflow: hidden;
}

/* Во время page-transition панель остаётся по центру (left/right, без translateX) */
.app-shell.motion-page-exit .bottom-bar,
.app-shell.motion-page-exit-back .bottom-bar,
.app-shell.motion-page-enter .bottom-bar,
.app-shell.motion-page-enter-back .bottom-bar,
.app-shell.motion-stagger .bottom-bar {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* transform НЕ трогаем — scale в bottomNavIn должен работать без сдвига вбок */
}

/* Quantity stepper buttons should not clip */
.inline-qty {
  overflow: visible !important;
}
.inline-qty button {
  overflow: hidden;
}

/* ===== v20.4: полный motion + стабильный fixed-nav ===== */
html,
body {
  overflow-x: hidden;
}

.app-shell {
  /* Не создаём containing block для position:fixed потомков */
  contain: none !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* Ключевые page-keyframes: opacity-only на оболочке (если вдруг применяются) */
@keyframes motionPageEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motionPageEnterBack {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motionPageExit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes motionPageExitBack {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Нижняя панель: fixed по центру (left/right + margin), без translateX */
.bottom-bar.customer-bottom-nav {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  width: min(520px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  z-index: 120 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 26px !important;
  background: rgba(12, 2, 17, .88) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 16px 62px rgba(0, 0, 0, .45) !important;
  transform: none !important;
}

/* Мягкое появление панели только opacity — без сдвига вбок */
.bottom-bar.customer-bottom-nav.nav-enter {
  animation: bottomNavFade 0.34s var(--motion-soft, ease) both !important;
}

/* Запас под панель */
.app-shell {
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Элементы списков (корзина / заказы / бонусы) */
.stagger-in,
[data-cart-item].stagger-in,
.customer-order-card.stagger-in,
.bonus-history-row.stagger-in {
  animation: motionCardIn 0.4s var(--motion-spring, cubic-bezier(0.34, 1.45, 0.45, 1)) both !important;
}

/* ── Модалки: открытие / закрытие ───────────────────────────────────────── */
.variant-modal-overlay {
  animation: motionOverlayIn 0.28s var(--motion-ease, ease) both !important;
}
.variant-modal {
  animation: motionSheetIn 0.4s var(--motion-spring, cubic-bezier(0.34, 1.45, 0.45, 1)) both !important;
}
.variant-modal-overlay.is-closing {
  animation: motionOverlayOut 0.24s var(--motion-ease, ease) both !important;
  pointer-events: none !important;
}
.variant-modal-overlay.is-closing .variant-modal {
  animation: motionSheetOut 0.26s var(--motion-ease, ease) both !important;
}

.modal,
.age-modal {
  animation: motionOverlayIn 0.28s var(--motion-ease, ease) both !important;
}
.modal > *,
.age-modal > .age-box,
.age-modal > .card {
  animation: motionSheetIn 0.42s var(--motion-spring, cubic-bezier(0.34, 1.45, 0.45, 1)) both !important;
}

/* ── Кнопки: премиальный press ─────────────────────────────────────────── */
button,
[role="button"],
.choice,
.chip,
.admin-tab,
.nav-btn,
.buy-btn,
.primary-btn,
.ghost-btn,
.pill-btn,
.icon-btn {
  transition:
    transform 0.18s var(--motion-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
    filter 0.18s ease,
    background 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    opacity 0.18s ease,
    color 0.18s ease !important;
}

button:active,
button.is-pressed,
[role="button"]:active,
[role="button"].is-pressed,
.choice:active,
.chip:active,
.nav-btn:active,
.buy-btn:active,
.primary-btn:active {
  transform: translateY(1px) scale(0.955) !important;
  filter: brightness(0.9) !important;
}

/* Toast */
.toast.toast-in {
  animation: motionToastIn 0.4s var(--motion-spring, cubic-bezier(0.34, 1.45, 0.45, 1)) both !important;
}
.toast.toast-out {
  animation: motionToastOut 0.28s var(--motion-ease, ease) both !important;
}

/* Admin tabs content */
.admin-tab-content {
  animation: motionFadeUp 0.36s var(--motion-soft, ease) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-bar.customer-bottom-nav,
  .bottom-bar.customer-bottom-nav.nav-enter,
  .app-shell.motion-page-enter,
  .app-shell.motion-page-enter-back,
  .app-shell.motion-stagger > *,
  .stagger-in,
  .products-grid.stagger-cards .product-card,
  .variant-modal-overlay,
  .variant-modal,
  .modal,
  .age-modal,
  .toast.toast-in,
  .toast.toast-out,
  .admin-tab-content,
  .tap-ripple {
    animation: none !important;
  }
  button:active,
  button.is-pressed {
    transform: none !important;
    filter: brightness(0.92) !important;
  }
}


/* ===== v21: управление блокировками пользователей ===== */
.ban-modal,
.ban-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(5, 1, 10, .78);
  backdrop-filter: blur(18px) saturate(1.1);
}

.ban-dialog[hidden] { display: none !important; }
body.ban-dialog-open { overflow: hidden !important; }

.ban-box,
.ban-dialog-card {
  width: min(100%, 520px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid rgba(255, 77, 141, .28);
  background: linear-gradient(155deg, rgba(40, 12, 48, .98), rgba(14, 5, 24, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .56);
}

.ban-box {
  padding: 32px;
  text-align: center;
}

.ban-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border: 1px solid rgba(255, 77, 141, .34);
  border-radius: 18px;
  background: rgba(255, 77, 141, .12);
  font-size: 30px;
}

.ban-kicker {
  margin-bottom: 8px;
  color: #ff87b2;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ban-box h2 { font-size: clamp(25px, 6vw, 34px); line-height: 1.15; }

.ban-reason {
  display: grid;
  gap: 8px;
  margin: 24px 0 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  text-align: left;
}

.ban-reason span { color: var(--muted); font-size: 14px; }
.ban-reason strong { line-height: 1.5; overflow-wrap: anywhere; }
.ban-notice { color: #ffd7e5; line-height: 1.55; }

/* Глобальный технический режим: спокойное нейтральное состояние вместо ошибки. */
.maintenance-box {
  border-color: rgba(138, 99, 255, .34);
  background: linear-gradient(155deg, rgba(32, 20, 62, .98), rgba(11, 7, 25, .98));
}

.maintenance-icon {
  border-color: rgba(138, 99, 255, .42);
  background: rgba(138, 99, 255, .15);
}

.maintenance-kicker { color: #bba8ff; }

.maintenance-message {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #eee9ff;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.maintenance-settings-card {
  border-color: rgba(138, 99, 255, .25);
}

.access-whitelist-card {
  border-color: rgba(47, 217, 168, .22);
}

.whitelist-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.whitelist-add-form .field { margin: 0; }
.whitelist-add-form .primary-btn { min-height: 48px; padding-inline: 24px; }

.access-whitelist-list {
  display: grid;
  gap: 10px;
}

.access-whitelist-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.access-whitelist-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(47, 217, 168, .30);
  border-radius: 12px;
  background: rgba(47, 217, 168, .11);
  color: var(--green);
  font-size: 20px;
  font-weight: 900;
}

.access-whitelist-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.access-whitelist-copy strong,
.access-whitelist-copy small {
  overflow-wrap: anywhere;
}

.access-whitelist-copy small { color: var(--muted); }
.access-whitelist-row .danger-outline-btn { min-height: 42px; padding: 8px 14px; }

.optional-label {
  color: var(--muted);
  font-size: .88em;
  font-weight: 500;
}

@media (max-width: 520px) {
  .maintenance-settings-card .section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .whitelist-add-form { grid-template-columns: 1fr; }
  .whitelist-add-form .primary-btn { width: 100%; }
  .access-whitelist-row { grid-template-columns: 42px minmax(0, 1fr); }
  .access-whitelist-row .danger-outline-btn { grid-column: 1 / -1; width: 100%; }
}

.user-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  margin: 20px 0;
}

.user-search input {
  min-height: 46px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
}

.user-count {
  min-width: 38px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  text-align: center;
  font-weight: 800;
}

.users-list { display: grid; gap: 12px; }
.user-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
}
.user-row.is-banned { border-color: rgba(255, 77, 141, .35); background: rgba(255, 77, 141, .07); }
.user-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 21px; }
.user-main { min-width: 0; }
.user-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; }
.user-title strong { overflow-wrap: anywhere; }
.status-badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.status-badge.success { color: #9ff4d4; background: rgba(47, 217, 168, .13); }
.status-badge.danger { color: #ffb4ce; background: rgba(255, 77, 141, .15); }
.ban-reason-inline { margin-top: 9px; color: #ffd2e2; line-height: 1.4; overflow-wrap: anywhere; }
.user-actions { grid-column: 2 / -1; display: flex; justify-content: flex-end; }

.ban-dialog-card { display: grid; gap: 16px; padding: 24px; }
.ban-dialog-card textarea { width: 100%; min-height: 120px; resize: vertical; box-sizing: border-box; }
.ban-user-label { margin: 0; color: #fff; font-weight: 800; overflow-wrap: anywhere; }
.ban-dialog-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(255, 96, 137, .35); border-radius: 12px; background: rgba(255, 77, 118, .11); color: #ffc2d4; font-size: 13px; line-height: 1.4; }
.ban-dialog-error[hidden] { display: none !important; }
.ban-dialog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.ban-scope-fieldset { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.ban-scope-fieldset legend { margin-bottom: 8px; color: #fff; font-weight: 800; }
.ban-scope-option,
.ban-point-option {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
}
.ban-scope-option:has(input:checked),
.ban-point-option:has(input:checked) { border-color: rgba(255, 77, 141, .52); background: rgba(255, 77, 141, .12); }
.ban-scope-option input,
.ban-point-option input { width: 18px; height: 18px; accent-color: #ff4d8d; flex: 0 0 auto; }
.ban-scope-option span { display: grid; gap: 2px; }
.ban-scope-option small { color: var(--muted); line-height: 1.35; }
.ban-points-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ban-point-option:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.ban-impact { margin: 0; line-height: 1.45; }
.ban-point-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.danger-btn {
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 77, 141, .45);
  border-radius: 10px;
  background: linear-gradient(135deg, #c72d66, #8f2450);
  color: white;
  font-weight: 800;
}

@media (max-width: 680px) {
  .user-search { grid-template-columns: 1fr 1fr; }
  .user-search input { grid-column: 1 / -1; }
  .user-row { grid-template-columns: 42px minmax(0, 1fr); }
  .user-actions { grid-column: 1 / -1; }
  .user-actions > * { width: 100%; min-height: 44px; }
  .ban-dialog-actions { grid-template-columns: 1fr; }
  .ban-points-list { grid-template-columns: 1fr; }
  .ban-box { padding: 24px; }
}


/* ===== v23: пользовательский mute / unmute ===== */
.music-user-toggle {
  min-width: 44px;
}
.music-user-toggle > [data-music-user-icon] {
  font-size: 17px !important;
  line-height: 1;
}
.music-user-toggle.is-muted {
  color: var(--muted) !important;
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}
.music-user-toggle:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .music-user-toggle {
    width: 44px !important;
    padding: 0 !important;
  }
  .music-user-toggle > [data-music-user-label] {
    display: none !important;
  }
}


/* ========================================================================== */
/* V24 — Premium redesign. Final layer intentionally overrides legacy themes. */
/* ========================================================================== */
:root {
  --premium-bg: #07050b;
  --premium-surface: rgba(16, 13, 22, .86);
  --premium-surface-2: rgba(24, 19, 33, .92);
  --premium-line: rgba(255, 255, 255, .10);
  --premium-line-strong: rgba(153, 117, 255, .28);
  --premium-purple: #7657d8;
  --premium-purple-hi: #a98cff;
  --premium-purple-soft: rgba(118, 87, 216, .16);
  --premium-text: #f7f5fb;
  --premium-muted: #aaa3b5;
  --premium-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --premium-shadow-soft: 0 12px 36px rgba(0, 0, 0, .25);
  --premium-ease: cubic-bezier(.22, 1, .36, 1);
}

html, body {
  background: var(--premium-bg) !important;
  color: var(--premium-text) !important;
}

body {
  letter-spacing: -.012em;
  background:
    radial-gradient(900px 540px at 15% -10%, rgba(91, 60, 175, .23), transparent 62%),
    radial-gradient(760px 520px at 105% 24%, rgba(126, 79, 192, .15), transparent 64%),
    linear-gradient(180deg, #09070d 0%, #060509 70%, #09060e 100%) !important;
}

.blur-bg { opacity: .34 !important; filter: saturate(.68) contrast(1.05) !important; }
.blur-bg::before { opacity: .28 !important; animation-duration: 48s !important; }
.blur-bg::after { opacity: .22 !important; animation-duration: 34s !important; }
.particles-bg { opacity: .22 !important; }
.soft-noise { opacity: .08 !important; }

.app-shell {
  width: min(1080px, 100%) !important;
  padding: 16px clamp(12px, 3vw, 28px) 132px !important;
}

.topbar {
  top: 10px !important;
  z-index: 100 !important;
  min-height: 72px !important;
  margin: 0 0 22px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 22px !important;
  background: rgba(11, 9, 15, .78) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.25) !important;
  backdrop-filter: blur(28px) saturate(1.25) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.brand { gap: 12px !important; }
.brand .logo {
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #8e70ea, #563ba7) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 28px rgba(94, 62, 176, .34), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.brand .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brand-title h1 {
  font-size: clamp(17px, 2vw, 21px) !important;
  font-weight: 760 !important;
  letter-spacing: -.035em !important;
}
.brand-title p {
  margin-top: 4px !important;
  color: var(--premium-muted) !important;
  font-size: 12px !important;
  letter-spacing: .015em !important;
}

.top-actions { gap: 7px !important; }
.top-action-btn, .back-chip {
  min-height: 44px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.055) !important;
  color: #eeeaf5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition: transform .22s var(--premium-ease), background .22s ease, border-color .22s ease !important;
}
.top-action-btn:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.15) !important; }
.cart-top-btn {
  background: linear-gradient(145deg, #7d5ddd, #5a40ad) !important;
  border-color: rgba(180,154,255,.36) !important;
  box-shadow: 0 9px 24px rgba(87, 57, 165, .28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.hero {
  position: relative !important;
  min-height: clamp(330px, 46vw, 480px) !important;
  margin: 0 0 18px !important;
  padding: clamp(28px, 6vw, 68px) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  border: 1px solid rgba(167, 133, 255, .18) !important;
  border-radius: clamp(26px, 4vw, 38px) !important;
  background:
    linear-gradient(125deg, rgba(7,6,11,.12), rgba(7,6,11,.46)),
    radial-gradient(circle at 78% 24%, rgba(183, 137, 255, .46), transparent 25%),
    radial-gradient(circle at 72% 42%, rgba(96, 66, 190, .52), transparent 40%),
    linear-gradient(140deg, #171020 0%, #211438 46%, #0d0a12 100%) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.055), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(255,255,255,.025) 90px);
  mask-image: linear-gradient(to right, #000, transparent 85%);
}
.hero-glow {
  position: absolute;
  width: min(52vw, 520px);
  aspect-ratio: 1;
  right: -8%;
  top: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202, 168, 255, .2), rgba(103, 66, 210, .08) 42%, transparent 68%);
  filter: blur(4px);
  animation: premiumFloat 8s ease-in-out infinite alternate;
}
.hero-content { position: relative; z-index: 1; width: min(720px, 100%); }
.hero .kicker, .section-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #c8b7f7 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
}
.hero .kicker i { width: 6px; height: 6px; border-radius: 50%; background: #b79aff; box-shadow: 0 0 16px #a47eff; }
.hero h2 {
  max-width: 760px !important;
  margin: 16px 0 14px !important;
  color: #fff !important;
  font-size: clamp(38px, 7vw, 74px) !important;
  font-weight: 720 !important;
  line-height: .98 !important;
  letter-spacing: -.064em !important;
  text-wrap: balance;
}
.hero p { max-width: 620px !important; color: rgba(245,240,252,.68) !important; font-size: clamp(15px, 2vw, 18px) !important; line-height: 1.55 !important; }
.hero-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-signals span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 650;
}

.hello.card {
  min-height: 52px !important;
  margin: 0 0 18px !important;
  padding: 13px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 16px !important;
  color: var(--premium-muted) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}
.hello strong { color: #fff; font-weight: 700; }
.hello-dot { width: 7px; height: 7px; border-radius: 50%; background: #7fd4a3; box-shadow: 0 0 14px rgba(127,212,163,.6); }
.hello-note { margin-left: auto; color: rgba(255,255,255,.42); font-size: 13px; }

.daily {
  margin: 18px 0 22px !important;
  border: 1px solid rgba(171,139,255,.22) !important;
  border-radius: 28px !important;
  background: linear-gradient(125deg, rgba(35,26,51,.96), rgba(14,11,20,.96)) !important;
  box-shadow: var(--premium-shadow-soft) !important;
}
.daily::after { background: linear-gradient(90deg, rgba(17,13,25,.98) 10%, rgba(17,13,25,.68) 56%, rgba(17,13,25,.3)) !important; }
.daily-inner { min-height: 260px !important; padding: clamp(24px, 4vw, 40px) !important; }
.daily h3 { font-size: clamp(28px, 4vw, 44px) !important; letter-spacing: -.045em !important; line-height: 1.02 !important; }
.daily .badge, .product-badge {
  border: 1px solid rgba(198,172,255,.24) !important;
  border-radius: 9px !important;
  background: rgba(120,86,213,.18) !important;
  color: #d7c7ff !important;
  box-shadow: none !important;
}
.daily-cta, .buy-btn, .primary-btn, .variant-add-btn {
  border: 1px solid rgba(190,164,255,.34) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #8161df, #5c42ae) !important;
  color: #fff !important;
  font-weight: 740 !important;
  box-shadow: 0 12px 30px rgba(82,52,160,.30), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.search-shell { position: relative; margin: 24px 0 12px; }
.search-shell-icon { position: absolute; left: 17px; top: 50%; z-index: 2; transform: translateY(-53%); color: #9d91ad; font-size: 25px; font-weight: 300; }
.search-shell .search-input {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 18px 0 49px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.search-shell .search-input:focus { border-color: rgba(164,131,255,.55) !important; background: rgba(255,255,255,.065) !important; outline: 0; box-shadow: 0 0 0 4px rgba(118,87,216,.12) !important; }
.search-input::placeholder { color: #817989 !important; }

.chips {
  gap: 8px !important;
  margin: 0 0 30px !important;
  padding: 4px 0 8px !important;
}
.chip {
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.035) !important;
  color: #b7afc0 !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}
.chip.active {
  border-color: rgba(171,143,245,.34) !important;
  background: rgba(118,87,216,.18) !important;
  color: #f4efff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.catalog-title { align-items: end !important; margin: 0 0 15px !important; }
.catalog-title h2 { margin-top: 5px !important; font-size: clamp(28px, 4vw, 38px) !important; letter-spacing: -.05em !important; }
.catalog-count { padding: 7px 10px; border: 1px solid var(--premium-line); border-radius: 10px; color: var(--premium-muted); background: rgba(255,255,255,.035); font-size: 12px; }

.products-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 2vw, 20px) !important;
}
.product-card {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 22px !important;
  background: linear-gradient(160deg, rgba(25,21,31,.92), rgba(12,10,16,.96)) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition: transform .36s var(--premium-ease), border-color .28s ease, box-shadow .36s ease !important;
}
.product-card:hover { transform: translateY(-5px) !important; border-color: rgba(160,128,244,.28) !important; box-shadow: 0 24px 58px rgba(0,0,0,.34), 0 8px 30px rgba(83,52,154,.12) !important; }
.product-image {
  aspect-ratio: 1 / .92 !important;
  min-height: 0 !important;
  margin: 8px 8px 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at 50% 35%, rgba(126,91,212,.18), rgba(255,255,255,.025) 68%) !important;
}
.product-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 65%, rgba(8,6,11,.18)); }
.product-image img { transition: transform .65s var(--premium-ease), filter .35s ease !important; }
.product-card:hover .product-image img { transform: scale(1.035) !important; }
.stock-badge, .variant-count-badge, .variant-cart-badge {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 9px !important;
  background: rgba(10,8,13,.72) !important;
  color: rgba(255,255,255,.76) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
}
.product-body { padding: 17px 16px 16px !important; }
.product-title { min-height: 2.4em; color: #f8f5fc !important; font-size: clamp(16px, 2vw, 20px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.035em !important; }
.short-note { margin-top: 8px !important; color: #9f97a8 !important; font-size: 13px !important; line-height: 1.4 !important; }
.age-mark { border: 0 !important; background: transparent !important; color: #746e7b !important; padding: 0 !important; font-size: 11px !important; }
.buy-row { align-items: end !important; gap: 10px !important; margin-top: 18px !important; }
.price-box .price, .price-row .price { color: #fff !important; font-size: clamp(19px, 2.5vw, 25px) !important; font-weight: 760 !important; letter-spacing: -.04em !important; }
.old-price { color: #746d7c !important; }
.buy-btn { min-height: 44px !important; padding: 0 14px !important; }
.inline-qty { min-height: 44px !important; border: 1px solid rgba(157,124,241,.24) !important; border-radius: 13px !important; background: rgba(117,84,208,.11) !important; }
.inline-qty button, .qty button, .vqty-btn { border-radius: 10px !important; background: rgba(255,255,255,.07) !important; }

.panel, .checkout-card, .cart-item, .customer-order-card, .bonus-card, .admin-row {
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, rgba(23,19,29,.92), rgba(12,10,16,.95)) !important;
  box-shadow: var(--premium-shadow-soft) !important;
}
.panel { padding: clamp(18px, 3vw, 28px) !important; }
.field input, .field textarea, .field select, input, textarea, select {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(159,126,247,.52) !important; outline: 0 !important; box-shadow: 0 0 0 4px rgba(118,87,216,.12) !important; }
.ghost-btn, .danger-btn, .pill-btn, .choice, .mini-actions button {
  border-radius: 12px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: none !important;
}

.variant-modal-overlay, .modal, .age-modal, .ban-modal, .ban-dialog { background: rgba(4,3,7,.78) !important; backdrop-filter: blur(18px) !important; }
.variant-modal, .modal > *, .age-box, .ban-box, .ban-dialog-card {
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 26px !important;
  background: linear-gradient(155deg, #1b1721, #0d0b11) !important;
  box-shadow: 0 36px 110px rgba(0,0,0,.62) !important;
}

.bottom-bar.customer-bottom-nav {
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(520px, calc(100vw - 28px)) !important;
  min-height: 70px !important;
  padding: 8px !important;
  gap: 6px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 22px !important;
  background: rgba(12,10,16,.86) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.customer-bottom-nav .nav-btn {
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: #8f8798 !important;
  box-shadow: none !important;
}
.customer-bottom-nav .nav-btn.is-active, .customer-bottom-nav .cart-btn {
  background: linear-gradient(145deg, rgba(125,92,221,.94), rgba(81,57,155,.96)) !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(79,50,151,.30), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.nav-label { font-size: 11px !important; font-weight: 650 !important; }
.cart-badge { border: 2px solid #6749b8 !important; background: #f7f4fb !important; color: #2c203e !important; }

.admin-tabs { gap: 8px !important; }
.admin-tab { border-radius: 14px !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.admin-tab.active { background: rgba(118,87,216,.17) !important; border-color: rgba(162,129,247,.28) !important; box-shadow: none !important; }

@keyframes premiumFloat { from { transform: translate3d(0,0,0) scale(.96); } to { transform: translate3d(-4%,8%,0) scale(1.06); } }
@keyframes premiumReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-content { animation: premiumReveal .72s var(--premium-ease) both; }
.product-card { animation: premiumReveal .48s var(--premium-ease) both; }
.products-grid .product-card:nth-child(2) { animation-delay: 55ms; }
.products-grid .product-card:nth-child(3) { animation-delay: 110ms; }
.products-grid .product-card:nth-child(4) { animation-delay: 165ms; }

@media (max-width: 780px) {
  .app-shell { padding: 10px 10px 126px !important; }
  .topbar { top: 6px !important; min-height: 62px !important; margin-bottom: 14px !important; border-radius: 18px !important; }
  .brand .logo { width: 43px !important; height: 43px !important; border-radius: 13px !important; }
  .top-action-btn { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; }
  .top-action-btn > span:not([data-cart-count]):not([data-music-user-icon]), .orders-top-btn > span:not([data-cart-count]) { display: none !important; }
  .hero { min-height: 390px !important; padding: 28px 24px !important; border-radius: 28px !important; }
  .hero h2 { font-size: clamp(40px, 12vw, 58px) !important; }
  .hello-note { display: none; }
  .daily-inner { min-height: 320px !important; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .product-card { border-radius: 18px !important; }
  .product-image { margin: 6px 6px 0 !important; border-radius: 13px !important; }
  .product-body { padding: 13px 12px 12px !important; }
  .product-title { font-size: 15px !important; }
  .short-note { font-size: 12px !important; }
  .buy-row { display: grid !important; grid-template-columns: 1fr !important; margin-top: 13px !important; }
  .buy-btn, .inline-qty { width: 100% !important; }
  .price-box .price { font-size: 19px !important; }
}

@media (max-width: 340px) {
  .brand-title p { display: none !important; }
  .hero { min-height: 360px !important; }
  .hero h2 { font-size: 39px !important; }
  .hero-signals span:last-child { display: none; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-content, .product-card { animation: none !important; }
  .product-card:hover, .product-card:hover .product-image img { transform: none !important; }
}


/* V24 desktop width correction over legacy mobile cap. */
.app-shell {
  max-width: 1080px !important;
}
.brand-title h1 {
  line-height: 1.2 !important;
}
@media (max-width: 780px) {
  .app-shell { max-width: 100% !important; }
}


/* ========================================================================== */
/* V25 — 60 FPS performance layer                                             */
/* ========================================================================== */
.hero h2,
.hero-glow,
.daily-art,
.daily-art img,
.price,
.blur-bg::before,
.blur-bg::after,
.blob,
.soft-glass,
.soft-noise,
.product-card,
.hero-content,
.admin-tab-content,
.bottom-bar.customer-bottom-nav {
  animation: none !important;
}

.app-shell.motion-page-enter > *,
.app-shell.motion-page-enter-back > *,
.app-shell.motion-stagger > *,
.products-grid.stagger-cards .product-card,
.stagger-in,
.nav-enter {
  animation: none !important;
  animation-delay: 0s !important;
}

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
  contain: layout paint style;
}

.product-image img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.topbar,
.bottom-bar.customer-bottom-nav {
  transform: translateZ(0);
  backface-visibility: hidden;
}

button,
[role="button"],
.choice,
.chip,
.admin-tab,
.nav-btn,
.buy-btn,
.primary-btn,
.ghost-btn,
.pill-btn,
.icon-btn,
.back-chip,
.top-action-btn,
.product-card {
  will-change: auto !important;
  transition-property: transform, opacity, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}

button:active,
button.is-pressed,
[role="button"]:active,
.choice:active,
.chip:active,
.admin-tab:active,
.nav-btn:active,
.buy-btn:active,
.primary-btn:active,
.back-chip:active,
.top-action-btn:active {
  filter: none !important;
  transform: scale(.97) !important;
}

.tap-ripple,
.motion-shimmer {
  display: none !important;
  animation: none !important;
}

@media (max-width: 780px), (pointer: coarse) {
  .topbar,
  .bottom-bar.customer-bottom-nav,
  .variant-modal-overlay,
  .modal,
  .age-modal,
  .ban-modal,
  .ban-dialog {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .topbar { background: rgba(11,9,15,.96) !important; }
  .bottom-bar.customer-bottom-nav { background: rgba(12,10,16,.97) !important; }
  .particles-bg { opacity: .12 !important; }
  .product-card:hover,
  .product-card:hover .product-image img {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ===== V26: промокоды ===== */
.promo-checkout {
  padding: 16px;
  border: 1px solid rgba(163, 132, 246, .22);
  border-radius: 16px;
  background: rgba(118, 87, 216, .08);
}
.promo-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.promo-input-row input { text-transform: uppercase; letter-spacing: .08em; font-weight: 750; }
.promo-result { margin-top: 10px; color: #ffb4ce; font-size: 13px; line-height: 1.45; }
.promo-result.success { color: #9ee7c1; }
.promo-remove { margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--muted); text-decoration: underline; font-size: 13px; }
.promo-discount-row { color: #b9a2ff; }
.promo-admin-list { display: grid; gap: 10px; margin-top: 16px; }
.promo-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.promo-admin-row strong { color: #d7c7ff; letter-spacing: .07em; }
.promo-admin-row p { margin-top: 5px; color: #eeeaf5; }
.promo-admin-row small { display: block; margin-top: 4px; color: var(--muted); }
@media (max-width: 520px) {
  .promo-input-row { grid-template-columns: 1fr; }
  .promo-input-row button { width: 100%; }
}


/* ===== V27: единая сводка начисления баллов ===== */
.bonus-earn-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(114, 188, 143, .28);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(70, 161, 113, .13), rgba(118, 87, 216, .08));
}
.bonus-earn-summary-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #9ee7c1;
  background: rgba(70, 161, 113, .15);
}
.bonus-earn-summary b { display: block; color: #eefbf4; line-height: 1.5; }
.bonus-earn-summary small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.4; }
.bonus-history-info b { line-height: 1.35; }


/* ===== V28: яркие фоновые частицы ===== */
.particles-bg {
  opacity: .78 !important;
  mix-blend-mode: screen;
  animation: particleCanvasReveal .72s cubic-bezier(.2,.8,.2,1) both !important;
}

@keyframes particleCanvasReveal {
  from { opacity: 0; }
  to { opacity: .78; }
}

/* Контент всегда остаётся выше canvas и сохраняет читаемость. */
.app-shell,
.toast,
.bottom-bar,
.topbar {
  isolation: isolate;
}

@media (max-width: 780px), (pointer: coarse) {
  .particles-bg {
    opacity: .68 !important;
  }
  @keyframes particleCanvasReveal {
    from { opacity: 0; }
    to { opacity: .68; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .particles-bg {
    animation: none !important;
    opacity: .58 !important;
  }
}


/* ===== V29: компактное итоговое начисление ===== */
.bonus-earn-summary {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 14px;
}
.bonus-earn-summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.bonus-earn-summary-icon svg { width: 19px; height: 19px; }
.bonus-earn-summary b {
  font-size: 14px;
  line-height: 1.42;
  font-weight: 750;
}
.bonus-earn-summary b span {
  color: var(--muted);
  font-weight: 550;
}


/* ===== V30: единое активное состояние нижнего меню ===== */
.customer-bottom-nav .nav-btn,
.customer-bottom-nav .cart-btn,
.customer-bottom-nav .orders-bottom-btn,
.customer-bottom-nav .bonus-bottom-btn {
  background: transparent !important;
  color: #8f8798 !important;
  box-shadow: none !important;
}

.customer-bottom-nav .nav-btn.is-active,
.customer-bottom-nav .nav-btn[aria-current="page"] {
  background: linear-gradient(145deg, rgba(125,92,221,.94), rgba(81,57,155,.96)) !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(79,50,151,.30), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.customer-bottom-nav .nav-btn:not(.is-active):not([aria-current="page"]):hover,
.customer-bottom-nav .nav-btn:not(.is-active):not([aria-current="page"]):focus-visible {
  background: rgba(255,255,255,.055) !important;
  color: #d8d2df !important;
  box-shadow: none !important;
}


/* ===== V32: постоянная навигация и стабильный fullscreen viewport ===== */
html,
body {
  min-height: var(--app-viewport-height, 100dvh);
  overscroll-behavior-y: none;
}

#bottomMount {
  display: contents !important;
}

.bottom-bar.customer-bottom-nav {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1000 !important;
  width: min(520px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.app-shell {
  min-height: var(--app-viewport-height, 100dvh) !important;
  padding-top: calc(
    max(var(--tg-content-safe-top, 0px), env(safe-area-inset-top, 0px))
    + var(--tg-top-comfort-gap, clamp(12px, 2.2dvh, 28px))
  ) !important;
  padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
}


/* ===== V31: универсальные анимации desktop + mobile ===== */
@keyframes v31Reveal {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes v31CardReveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.hero-content,
.admin-tab-content {
  animation: v31Reveal 420ms cubic-bezier(.2,.8,.2,1) both !important;
}
.products-grid.stagger-cards .product-card,
.stagger-in,
[data-cart-item].stagger-in,
.customer-order-card.stagger-in,
.bonus-history-row.stagger-in {
  animation: v31CardReveal 360ms cubic-bezier(.2,.8,.2,1) both !important;
}
.products-grid.stagger-cards .product-card:nth-child(2) { animation-delay: 35ms !important; }
.products-grid.stagger-cards .product-card:nth-child(3) { animation-delay: 70ms !important; }
.products-grid.stagger-cards .product-card:nth-child(4) { animation-delay: 105ms !important; }
.products-grid.stagger-cards .product-card:nth-child(n+5) { animation-delay: 130ms !important; }

.variant-modal-overlay,
.modal,
.age-modal,
.ban-modal {
  animation: motionOverlayIn 260ms cubic-bezier(.2,.8,.2,1) both !important;
}
.variant-modal,
.modal > *,
.age-modal > .age-box,
.ban-modal > * {
  animation: motionSheetIn 380ms cubic-bezier(.2,.8,.2,1) both !important;
}
.toast.toast-in { animation: motionToastIn 360ms cubic-bezier(.2,.8,.2,1) both !important; }
.toast.toast-out { animation: motionToastOut 240ms cubic-bezier(.2,.8,.2,1) both !important; }
.customer-bottom-nav .nav-btn.is-active .nav-ic,
.customer-bottom-nav .nav-btn[aria-current="page"] .nav-ic {
  animation: motionNavBounce 420ms cubic-bezier(.2,.8,.2,1) both !important;
}

button,
[role="button"],
.choice,
.chip,
.admin-tab,
.nav-btn,
.buy-btn,
.primary-btn,
.ghost-btn,
.pill-btn,
.icon-btn,
.back-chip,
.top-action-btn,
.product-card {
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, background-color 220ms ease, border-color 220ms ease, color 180ms ease, box-shadow 220ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  [role="button"]:hover,
  .choice:hover,
  .chip:hover,
  .admin-tab:hover,
  .product-card:hover {
    transform: translate3d(0, -2px, 0) !important;
  }
  .buy-btn:not(:disabled):hover,
  .primary-btn:not(:disabled):hover {
    box-shadow: 0 10px 28px rgba(84,62,175,.28) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .admin-tab-content,
  .products-grid.stagger-cards .product-card,
  .stagger-in,
  .variant-modal-overlay,
  .variant-modal,
  .modal,
  .age-modal,
  .ban-modal,
  .toast.toast-in,
  .toast.toast-out,
  .customer-bottom-nav .nav-btn.is-active .nav-ic {
    animation: none !important;
  }
}

.analytics-periods{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}.analytics-periods input,.analytics-periods button{min-height:42px}.analytics-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.analytics-metric,.analytics-box{padding:16px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;background:rgba(255,255,255,.035)}.analytics-metric span,.analytics-metric small{display:block;color:var(--muted,#a9a4b3)}.analytics-metric strong{display:block;font-size:24px;margin:7px 0}.analytics-metric small.positive{color:#59d98e}.analytics-metric small.negative{color:#ff7474}.analytics-columns{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;margin-top:18px}.analytics-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.1))}.analytics-bar-row{display:grid;grid-template-columns:86px minmax(80px,1fr) auto;gap:10px;align-items:center;padding:7px 0}.analytics-bar-row i{height:10px;width:var(--bar);border-radius:999px;background:linear-gradient(90deg,#6545d8,#ad34dd)}.analytics-bar-row b,.analytics-row b{white-space:nowrap}@media(max-width:900px){.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-columns{grid-template-columns:1fr}}@media(max-width:520px){.analytics-grid{grid-template-columns:1fr}.analytics-periods input{width:calc(50% - 4px)}.analytics-bar-row{grid-template-columns:72px minmax(50px,1fr);}.analytics-bar-row b{grid-column:2}}

.analytics-youth{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 0,rgba(185,50,255,.18),transparent 36%),radial-gradient(circle at 5% 10%,rgba(36,211,255,.13),transparent 32%),rgba(13,10,20,.9)}.analytics-youth:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.025) 50%,transparent 70%)}.analytics-hero{position:relative;display:flex;justify-content:space-between;align-items:end;gap:18px;padding:22px;border:1px solid rgba(174,115,255,.22);border-radius:24px;background:linear-gradient(135deg,rgba(102,66,219,.24),rgba(34,195,213,.09) 55%,rgba(238,68,210,.12));box-shadow:0 18px 60px rgba(42,22,91,.22)}.analytics-hero h2{margin:4px 0 7px;font-size:clamp(27px,4vw,42px);letter-spacing:-.04em}.analytics-hero p{margin:0;color:#c5bdd3}.analytics-kicker{font-size:11px;font-weight:900;letter-spacing:.18em;color:#bca6ff}.analytics-period-badge{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(8,7,13,.52);color:#eae5f5;font-size:12px;font-weight:800;white-space:nowrap}.analytics-period-badge small{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#d9d3e8;font-size:10px;font-weight:900;letter-spacing:.06em}.analytics-periods button.active-status{background:linear-gradient(135deg,#6c46dc,#c037dd);box-shadow:0 8px 24px rgba(129,55,214,.28)}.analytics-metric{position:relative;overflow:hidden;min-height:178px;background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.025));transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.analytics-metric:hover{transform:translateY(-3px);border-color:rgba(174,115,255,.42);box-shadow:0 16px 40px rgba(34,16,73,.25)}.analytics-metric:after{content:"";position:absolute;width:90px;height:90px;right:-32px;bottom:-38px;border-radius:50%;background:var(--metric-glow,rgba(148,89,255,.24));filter:blur(4px)}.analytics-metric-sales{--metric-glow:rgba(66,211,146,.28)}.analytics-metric-revenue{--metric-glow:rgba(52,203,255,.28)}.analytics-metric-purchase_cost{--metric-glow:rgba(255,171,76,.28)}.analytics-metric-profit{--metric-glow:rgba(183,76,255,.34)}.analytics-metric-average_check{--metric-glow:rgba(255,175,68,.3)}.analytics-metric-repeat_customers{--metric-glow:rgba(255,72,172,.3)}.analytics-metric-head{display:flex;align-items:center;gap:8px;font-weight:850}.analytics-metric-icon{display:grid!important;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.08);font-size:17px}.analytics-metric p{position:relative;z-index:1;min-height:34px;margin:0 0 9px;color:#a9a1b5;font-size:12px;line-height:1.4}.analytics-metric small{position:relative;z-index:1;font-size:11px;font-weight:800}.analytics-explainer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px;align-items:center;margin-top:14px;padding:14px 16px;border:1px solid rgba(67,210,224,.18);border-radius:16px;background:rgba(34,173,192,.07);font-size:12px}.analytics-explainer b{color:#79e8f3}.analytics-explainer span{color:#aaa2b6}.analytics-explainer em{color:#f0c1ff;font-style:normal;font-weight:800}.analytics-box{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}.analytics-box-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.analytics-box-title h3{margin:0}.analytics-box-title span{color:#8f879c;font-size:11px}.analytics-rank{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:28px;margin-right:10px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.045);color:#f4efff;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.08em;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.analytics-row--product span{display:flex;align-items:center;min-width:0}.analytics-row--product .analytics-rank{flex:0 0 auto;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border-color:rgba(155,128,235,.28);color:#e9e2ff}.analytics-bar-row i{position:relative;overflow:hidden;box-shadow:0 0 18px rgba(142,64,229,.22)}.analytics-bar-row i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:analytics-shine 2.4s ease-in-out infinite}.completed-order-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.1)}.completed-order-tools small{color:#8e8797}.order-card-removing{opacity:0;transform:translateX(18px) scale(.98);transition:opacity .18s ease,transform .18s ease}@keyframes analytics-shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}@media(max-width:700px){.analytics-hero{align-items:start;flex-direction:column}.analytics-period-badge{white-space:normal}.analytics-explainer{grid-template-columns:1fr}.analytics-grid{grid-template-columns:1fr 1fr}.completed-order-tools{align-items:stretch;flex-direction:column}.completed-order-tools button{width:100%}}@media(max-width:430px){.analytics-grid{grid-template-columns:1fr}.analytics-metric{min-height:auto}.analytics-rank{min-width:46px;padding:0 8px}}@media(prefers-reduced-motion:reduce){.analytics-metric,.analytics-bar-row i:after,.order-card-removing{animation:none;transition:none}}


/* v93: premium analytics, readable on every screen */
.analytics-youth{padding:clamp(14px,2.4vw,28px);border:1px solid rgba(167,112,255,.2);border-radius:28px;background:radial-gradient(circle at 8% 0,rgba(109,67,255,.24),transparent 34%),radial-gradient(circle at 100% 18%,rgba(255,54,184,.16),transparent 31%),linear-gradient(155deg,rgba(17,14,28,.98),rgba(9,8,15,.98));box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)}
.analytics-hero{min-height:150px;padding:clamp(20px,3vw,34px);border-color:rgba(181,127,255,.32);background:linear-gradient(125deg,rgba(105,65,226,.36),rgba(26,104,131,.18) 54%,rgba(183,43,160,.22));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px rgba(57,27,116,.24)}
.analytics-hero h2{font-size:clamp(30px,4.6vw,48px);line-height:1}.analytics-hero p{max-width:620px;font-size:clamp(13px,1.7vw,16px);line-height:1.55}.analytics-periods{padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}
.analytics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.analytics-metric{min-height:166px;padding:18px;border-color:rgba(255,255,255,.1);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 34px rgba(0,0,0,.15)}.analytics-metric strong{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.04em}.analytics-metric-head{font-size:14px}.analytics-metric p{min-height:0;margin-top:4px}
.analytics-columns{grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(230px,.82fr));gap:16px}.analytics-box{padding:20px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 38px rgba(0,0,0,.13)}.analytics-box .empty{min-height:96px;display:grid;place-items:center;border:1px dashed rgba(194,161,255,.18);border-radius:16px;background:rgba(255,255,255,.018)}
.analytics-bar-row i{height:12px;background:linear-gradient(90deg,#7558f4,#d445dd 55%,#35d6e8)}.analytics-explainer{padding:16px 18px;border-radius:18px;background:linear-gradient(110deg,rgba(34,184,202,.1),rgba(120,65,213,.08))}.product-prices-grid{align-items:start}.product-prices-grid .small-help{margin-top:5px}
@media(min-width:1280px){.analytics-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.analytics-metric{min-height:190px}}
@media(max-width:980px){.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-columns{grid-template-columns:1fr}.analytics-box{min-width:0}}
@media(max-width:620px){.analytics-youth{padding:12px;border-radius:22px}.analytics-hero{min-height:0;padding:20px;border-radius:20px}.analytics-periods{display:grid;grid-template-columns:repeat(3,1fr)}.analytics-periods button{width:100%}.analytics-periods input{width:100%;grid-column:span 1}.analytics-periods button[type="submit"]{grid-column:1/-1}.analytics-grid{grid-template-columns:1fr}.analytics-metric{min-height:0;padding:16px}.analytics-metric strong{font-size:30px}.analytics-columns{gap:12px}.analytics-box{padding:16px}.product-prices-grid{grid-template-columns:1fr!important}}


/* v94: clean analytics controls without gradients */
.analytics-periods{gap:7px;padding:7px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#12101a;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.analytics-periods button{appearance:none;min-height:40px;padding:0 16px;border:1px solid transparent!important;border-radius:10px!important;background:#1c1924!important;background-image:none!important;color:#aaa4b6!important;font-size:13px;font-weight:800;box-shadow:none!important;transform:none!important}
.analytics-periods button:hover:not(:disabled){border-color:rgba(255,255,255,.12)!important;background:#24202e!important;color:#f5f1fa!important;transform:none!important}
.analytics-periods button.active-status{border-color:#8268d8!important;background:#7258ca!important;background-image:none!important;color:#fff!important;box-shadow:0 5px 14px rgba(68,49,126,.25)!important}
.analytics-periods input[type="date"]{min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#18151f;color:#e9e5ef;box-shadow:none}
.analytics-periods button[type="submit"]{border-color:rgba(90,207,218,.35)!important;background:#18343b!important;background-image:none!important;color:#8fe9f1!important}
.analytics-periods button[type="submit"]:hover:not(:disabled){background:#20454d!important;border-color:rgba(104,224,234,.55)!important;color:#d8fcff!important}
@media(max-width:620px){.analytics-periods{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.analytics-periods button{padding:0 8px;font-size:12px}.analytics-periods input[type="date"]{grid-column:span 1;min-width:0;padding:0 7px;font-size:12px}.analytics-periods button[type="submit"]{grid-column:1/-1}}


/* v95: aligned analytics period picker and split order lists */
.analytics-periods{display:grid!important;grid-template-columns:auto minmax(330px,1fr) auto;gap:10px!important;align-items:center;padding:9px!important;overflow:visible}
.analytics-point-filter{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:7px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#12101a}
.analytics-point-filter button{appearance:none;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:10px;background:#1c1924;color:#aaa4b6;font-size:13px;font-weight:800}
.analytics-point-filter button:hover:not(:disabled){border-color:rgba(255,255,255,.12);background:#24202e;color:#f5f1fa}
.analytics-point-filter button.active-status{border-color:#8268d8;background:#7258ca;color:#fff;box-shadow:0 5px 14px rgba(68,49,126,.25)}
.order-item-row.is-point-mine{border-color:rgba(114,88,202,.45);background:rgba(114,88,202,.12)}
.order-item-point{display:block;margin-top:2px;color:#b7aee0;font-size:11px;font-weight:700}
.analytics-period-presets{display:grid;grid-template-columns:repeat(3,minmax(76px,1fr));gap:5px;padding:4px;border-radius:12px;background:#0d0c12}
.analytics-period-presets button{width:100%;min-width:0;margin:0}
.analytics-date-range{display:grid;grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);gap:8px;align-items:end;min-width:0}
.analytics-date-range label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;min-width:0;color:#9992a4;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.analytics-date-range label span{white-space:nowrap}.analytics-date-range input[type="date"]{width:100%;min-width:0;margin:0}.analytics-date-range>i{align-self:center;color:#686170;font-style:normal}
.analytics-apply-period{height:40px;white-space:nowrap;margin:0!important;padding-inline:18px!important}
.order-group-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#111018}
.order-group-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:8px 14px;border:1px solid transparent!important;border-radius:11px!important;background:#1a1821!important;background-image:none!important;color:#aaa5b2!important;font-weight:850;box-shadow:none!important}
.order-group-tabs button b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;background:#292531;color:#d6d0df;font-size:11px}
.order-group-tabs button.is-active{border-color:#7c64ce!important;background:#6e57bd!important;color:#fff!important;box-shadow:0 7px 18px rgba(64,46,119,.26)!important}
.order-group-tabs button.is-active b{background:rgba(255,255,255,.18);color:#fff}.admin-order-group-list{display:grid;gap:12px}.orders-page>.order-page-note{margin:4px 2px 14px}
@media(max-width:980px){.analytics-periods{grid-template-columns:1fr 1fr!important}.analytics-period-presets{grid-column:1/-1}.analytics-date-range{grid-column:1/2}.analytics-apply-period{grid-column:2/3}}
@media(max-width:680px){.analytics-periods{grid-template-columns:1fr!important;padding:7px!important}.analytics-period-presets,.analytics-date-range,.analytics-apply-period{grid-column:1!important}.analytics-date-range{grid-template-columns:1fr;gap:6px}.analytics-date-range>i{display:none}.analytics-date-range label{grid-template-columns:24px minmax(0,1fr)}.analytics-apply-period{width:100%}.order-group-tabs{gap:5px;padding:5px}.order-group-tabs button{min-height:44px;padding:7px 8px;font-size:12px}.order-group-tabs button b{min-width:23px;height:23px}}

/* v97: stable analytics dates, daily-set composition */
.analytics-date-range{grid-template-columns:repeat(2,minmax(155px,1fr))!important;gap:8px!important;align-items:center!important}
.analytics-date-range label{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:0!important;height:42px!important;margin:0!important;padding:0!important;overflow:hidden;border:1px solid rgba(255,255,255,.09)!important;border-radius:11px!important;background:#18151f!important;color:#a9a2b1!important;box-shadow:none!important}
.analytics-date-range label span{display:grid!important;place-items:center;height:100%;padding:0!important;border:0!important;background:transparent!important;color:#aaa3b3!important;white-space:nowrap;font-size:11px;font-weight:900}
.analytics-date-range input[type="date"]{width:100%!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0 10px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#f0ebf5!important}
.analytics-period-presets button.active-status:disabled{opacity:1!important;border-color:#8268d8!important;background:#7258ca!important;color:#fff!important;box-shadow:0 5px 14px rgba(68,49,126,.25)!important}
.daily-set-composition{grid-column:1/-1;margin-top:4px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#111018}
.daily-set-composition>.section-title{align-items:flex-start;margin-bottom:12px}.daily-set-composition h3{margin:0 0 4px}.daily-set-composition p{margin:0}.daily-set-items{display:grid;gap:9px}
.daily-set-item-row{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(160px,1fr) minmax(170px,.9fr) 105px 42px;gap:8px;align-items:end;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#17151e}
.daily-set-item-row label{display:grid;gap:5px;min-width:0}.daily-set-item-row label>span{color:#aaa3b3;font-size:11px;font-weight:800}.daily-set-item-row select,.daily-set-item-row input{width:100%;min-width:0;height:40px;margin:0}.daily-set-remove{width:42px;height:40px;padding:0!important;font-size:22px!important;line-height:1}
.daily-customer-select{height:40px;padding:7px 10px;border:1px solid rgba(146,116,240,.3);border-radius:11px;background:rgba(126,91,225,.08);color:#c8b9f4;font-size:12px;font-weight:850;line-height:1.15}.daily-customer-select.is-active{border-color:#8c70ed;background:rgba(126,91,225,.25);color:#fff;box-shadow:0 0 0 2px rgba(126,91,225,.08)}.daily-customer-select:disabled{opacity:.4}
@media(max-width:900px){.daily-set-item-row{grid-template-columns:1fr 1fr 1fr 42px}.daily-set-item-row>label:first-child{grid-column:1/-1}.daily-customer-select{grid-column:1/3}.daily-set-qty{grid-column:3/4}.daily-set-remove{grid-column:4/5;grid-row:2}}
@media(max-width:560px){.analytics-date-range{grid-template-columns:1fr!important}.daily-set-composition>.section-title{display:grid;gap:10px}.daily-set-composition>.section-title button{width:100%}.daily-set-item-row{grid-template-columns:1fr 42px}.daily-set-item-row>label{grid-column:1/-1}.daily-customer-select{grid-column:1/-1}.daily-set-item-row .daily-set-qty{grid-column:1/2}.daily-set-remove{grid-column:2/3;grid-row:4}}


/* v98: analytics refresh with daily-set tracking */
.analytics-columns--wide{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr) minmax(240px,.9fr)}
.analytics-columns--bottom{grid-template-columns:minmax(320px,1.2fr) minmax(220px,.8fr);margin-top:14px}
.analytics-chart--rich{display:grid;gap:10px}
.analytics-bar-row--rich{grid-template-columns:90px minmax(90px,1fr) minmax(140px,.9fr)}
.analytics-row-meta{display:grid;gap:2px;justify-items:end;min-width:0}
.analytics-row-meta small,.analytics-row--stack small{color:#9a93a6;font-size:11px}
.analytics-row--stack{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.analytics-row--stack small{grid-column:1/-1;padding-left:32px}
.analytics-entity-badge{display:inline-flex;align-items:center;height:22px;margin-right:8px;padding:0 8px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);color:#cfc9da;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.analytics-entity-badge--set{border-color:rgba(255,151,84,.28);background:rgba(255,151,84,.1);color:#ffd1b0}
.analytics-inline-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.analytics-inline-stats--compact{grid-template-columns:1fr}
.analytics-inline-stats div,.analytics-highlight-row,.analytics-metric-extra{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.analytics-inline-stats span,.analytics-highlight-row span,.analytics-metric-extra{display:block;color:#9f98ab;font-size:11px}
.analytics-inline-stats strong,.analytics-highlight-row b{display:block;margin-top:4px;font-size:16px}
.analytics-metric-extra{margin-top:8px;font-weight:800;color:#ddd7e8}
.analytics-box--accent{background:linear-gradient(160deg,rgba(255,146,71,.12),rgba(255,255,255,.02))}
@media(max-width:1100px){.analytics-columns--wide,.analytics-columns--bottom{grid-template-columns:1fr}.analytics-bar-row--rich{grid-template-columns:74px minmax(80px,1fr)}.analytics-row-meta{grid-column:2;justify-items:start}}
@media(max-width:620px){.analytics-inline-stats{grid-template-columns:1fr}.analytics-row--stack small{padding-left:0}.analytics-bar-row--rich{grid-template-columns:1fr}.analytics-row-meta{grid-column:auto}}

/* v100: compact expandable admin orders + clearer analytics */
.order-card-compact{padding:0!important;overflow:hidden}
.order-card-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;list-style:none;padding:16px 18px;cursor:pointer}
.order-card-summary::-webkit-details-marker{display:none}.order-card-summary::marker{display:none;content:''}
.order-card-summary-main{min-width:0;display:grid;gap:8px}.order-card-summary-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.order-card-summary-top h3{margin:0!important;font-size:17px}.order-card-summary-top strong{font-size:16px;color:#fff;white-space:nowrap}.order-card-summary-meta,.order-card-summary-submeta{display:flex;flex-wrap:wrap;gap:6px 10px;color:#a8a1b3;font-size:12px}.order-card-summary-preview{color:#ece7f7;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-card-summary-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:106px;padding:10px 14px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04);color:#d7d1e2;font-size:12px;font-weight:800}.order-card-compact[open] .order-card-summary-toggle{background:rgba(124,100,206,.18);border-color:rgba(124,100,206,.42);color:#fff}.order-card-compact[open] .order-card-summary-toggle::after{content:'Скрыть'}.order-card-summary-toggle::after{content:'Развернуть'}.order-status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;font-weight:900;color:#f4efff;white-space:nowrap}.order-status-pill.status-pending{background:rgba(161,138,255,.18);color:#d8ceff}.order-status-pill.status-active,.order-status-pill.status-packing{background:rgba(119,115,255,.18);color:#cfd0ff}.order-status-pill.status-delivery{background:rgba(206,160,255,.18);color:#edd8ff}.order-status-pill.status-paid,.order-status-pill.status-done{background:rgba(84,236,231,.15);color:#baf9f6}.order-status-pill.status-cancelled,.order-status-pill.status-declined{background:rgba(255,138,185,.16);color:#ffd4e5}.order-card-body{padding:0 18px 18px;border-top:1px solid rgba(255,255,255,.08)}.order-card-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.order-card-detail-grid>div,.order-card-address{padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.03)}.order-card-block-title{margin-bottom:6px;color:#f0ebf8;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.order-card-address{margin:12px 0 0}.order-items--compact{display:grid;gap:8px;margin-top:12px}.order-item-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025)}.order-item-row span{color:#ece7f7;line-height:1.4}.order-item-row b{white-space:nowrap}.analytics-highlight-row{margin-top:10px}.analytics-highlight-row--good{border-color:rgba(75,214,141,.24);background:rgba(75,214,141,.08)}.analytics-highlight-row--warn{border-color:rgba(255,183,72,.24);background:rgba(255,183,72,.08)}.analytics-highlight-row--neutral{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.03)}.analytics-highlight-row--good span{color:#8cf0b5}.analytics-highlight-row--warn span{color:#ffd18b}.analytics-highlight-row--neutral span{color:#c7c1d5}
@media(max-width:760px){.order-card-summary{grid-template-columns:1fr}.order-card-summary-toggle{min-width:0;width:100%}.order-card-detail-grid{grid-template-columns:1fr}.order-card-summary-preview{white-space:normal;overflow:visible;text-overflow:clip}}

/* v102: cleaner daily dynamics with premium purple bars */
.analytics-chart-box{
  border-color: rgba(155,128,235,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    radial-gradient(circle at top right, rgba(128,94,255,.10), transparent 38%),
    rgba(15,12,24,.92);
}
.analytics-chart--rich{
  gap: 12px;
}
.analytics-bar-row,
.analytics-bar-row--rich{
  position: relative;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.analytics-bar-row > span,
.analytics-bar-row--rich > span{
  color: #efe9fa;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.analytics-bar-row i,
.analytics-bar-row--rich i{
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #7c5cff !important;
  box-shadow: 0 0 0 1px rgba(124,92,255,.12), 0 8px 20px rgba(124,92,255,.22);
}
.analytics-bar-row i::after,
.analytics-bar-row--rich i::after{
  content: none !important;
}
.analytics-row-meta{
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.analytics-row-meta b{
  color: #f7f3ff;
  font-size: 14px;
}
.analytics-row-meta small{
  color: #b9b0c8;
  line-height: 1.35;
}
@media(max-width:1100px){
  .analytics-bar-row,
  .analytics-bar-row--rich{
    padding: 12px;
  }
}
@media(max-width:620px){
  .analytics-bar-row,
  .analytics-bar-row--rich{
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }
  .analytics-row-meta{
    padding: 0;
    border: 0;
    background: transparent;
  }
}

/* v103: analytics footer times */
.analytics-time-notes{
  display:grid;
  gap:4px;
  margin-top:14px;
  padding:0 2px;
}
.analytics-time-notes span{
  color:rgba(233,229,239,.48);
  font-size:11px;
  line-height:1.35;
}


/* Безопасное восстановление несохранённых admin-форм */
.admin-draft-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, .38);
  border-radius: 14px;
  background: rgba(251, 191, 36, .1);
  color: #fde68a;
  font-size: 13px;
}
.admin-draft-banner > div { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-draft-banner button { min-height: 34px; border-radius: 10px; padding: 0 12px; }
@media (max-width: 560px) { .admin-draft-banner { align-items: stretch; flex-direction: column; } }


/* v110: фото собранного заказа */
.assembled-photo-dialog{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(4,3,8,.84);backdrop-filter:blur(18px)}
body.assembled-photo-open{overflow:hidden!important}.assembled-photo-card{width:min(100%,560px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:24px}.assembled-photo-card h2{margin:4px 0 10px}.assembled-photo-choices,.assembled-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.assembled-photo-choices label{display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center}.assembled-photo-preview{margin-top:16px;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.035)}.assembled-photo-preview[hidden]{display:none!important}.assembled-photo-preview img{display:block;width:100%;max-height:52dvh;object-fit:contain;border-radius:12px}.assembled-photo-preview p{margin:8px 2px 0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.assembled-photo-error{margin:12px 0 0;padding:10px 12px;border:1px solid rgba(255,92,132,.34);border-radius:12px;background:rgba(255,68,112,.11);color:#ffc0d1}.assembled-photo-error[hidden]{display:none!important}.assembled-photo-order-btn{width:100%;margin-top:10px}@media(max-width:560px){.assembled-photo-dialog{align-items:end;padding:0}.assembled-photo-card{width:100%;max-height:94dvh;padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}.assembled-photo-choices,.assembled-photo-actions{grid-template-columns:1fr}}


/* v111: стабильный сценарий сборки до смены статуса */
.assembled-photo-skip-confirm{margin-top:16px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}
.assembled-photo-skip-confirm[hidden]{display:none!important}.assembled-photo-skip-confirm p{margin:0;font-weight:700}.assembled-photo-card button:disabled,.assembled-photo-card input:disabled{pointer-events:none;opacity:.58}.assembled-photo-choices label{user-select:none}.assembled-photo-preview img[src=""]{display:none}

/* v112: подтверждение успешной отправки фото */
.assembled-photo-success-card{width:min(100%,440px);text-align:center;overflow:hidden}
.assembled-photo-success-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border:1px solid rgba(114,188,143,.42);border-radius:50%;background:rgba(70,161,113,.16);color:#72bc8f;font-size:34px;font-weight:800;line-height:1}
.assembled-photo-success-card .section-eyebrow{color:#72bc8f}
.assembled-photo-success-card h2{margin-bottom:10px}
.assembled-photo-success-card .muted{max-width:34ch;margin:0 auto;line-height:1.55}
.assembled-photo-success-button{width:100%;min-height:48px;margin-top:24px}
.assembled-photo-success-button:focus-visible{outline:3px solid rgba(94,159,232,.72);outline-offset:3px}
@media(max-width:560px){.assembled-photo-success-dialog{align-items:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}.assembled-photo-success-card{padding:24px 18px;border-radius:20px}}


/* v114: дата покупки в карточках заказов */
.order-purchase-date{color:#b8b1c5;font-size:12px;line-height:1.45}.order-card-summary-submeta .order-purchase-date{color:#d4ccef;font-weight:700}.order-purchase-date--detail{margin:14px 0 0;padding:10px 12px;border:1px solid rgba(124,100,206,.22);border-radius:12px;background:rgba(124,100,206,.08);color:#ded6f4}.customer-order-header .order-purchase-date{margin-top:4px}@media(max-width:560px){.order-card-summary-submeta{display:grid!important;gap:5px!important}.order-purchase-date--detail{font-size:12px}}

/* v117: verification and Telegram customer action */
.status-badge.verified,.order-verification-pill.is-verified{border-color:rgba(114,188,143,.32);background:rgba(70,161,113,.16);color:#a6ebc5}.order-verification-pill{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.055);color:#c8c1d2;font-size:10px;font-weight:800;white-space:nowrap}.order-verification-pill.is-unverified{color:#aaa3b4}.state-switch.state-verified{border-color:rgba(114,188,143,.3);background:rgba(70,161,113,.11)}
.order-buyer-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.order-buyer-line p{min-width:0;margin:0}.telegram-user-btn{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;cursor:pointer;appearance:none;border:1px solid rgba(75,161,232,.32);border-radius:13px;background:rgba(42,129,200,.14);color:#6bbcf4}.telegram-user-btn:hover{border-color:rgba(75,161,232,.58);background:rgba(42,129,200,.24)}.telegram-user-btn:focus-visible{outline:3px solid rgba(75,161,232,.38);outline-offset:2px}.verification-order-line{width:fit-content;padding:5px 9px;border-radius:999px;font-size:11px!important;font-weight:750}.verification-order-line.is-verified{background:rgba(70,161,113,.12);color:#a6ebc5!important}.verification-order-line.is-unverified{background:rgba(255,255,255,.045);color:#aaa3b4!important}
@media(max-width:560px){.order-buyer-line{align-items:flex-start}.order-verification-pill{white-space:normal;text-align:center}}

/* ===== css/profile.css ===== */

/* ===== V37: профиль и персональные скидки ===== */
.bottom-bar.customer-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.customer-bottom-nav .nav-btn { min-width: 0 !important; padding-inline: 4px !important; }
.customer-bottom-nav .nav-label { font-size: 10px !important; white-space: nowrap; }

/* Единый размер и стиль всех иконок нижнего меню */
.customer-bottom-nav .nav-btn .nav-ic {
  width: 20px !important;
  height: 20px !important;
}
.customer-bottom-nav .nav-btn .nav-ic svg,
.customer-bottom-nav .bonus-bottom-btn .bonus-gift-icon {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  color: #f4f1ff !important;
  stroke-width: 2 !important;
}
@media (max-width: 360px) {
  .customer-bottom-nav .nav-btn .nav-ic { width: 18px !important; height: 18px !important; }
  .customer-bottom-nav .nav-btn .nav-ic svg,
  .customer-bottom-nav .bonus-bottom-btn .bonus-gift-icon { width: 17px !important; height: 17px !important; }
  .customer-bottom-nav .nav-label { font-size: 9.5px !important; }
}

.profile-hero {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.profile-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(163,132,246,.48);
  border-radius: 24px;
  color: #fff;
  font-size: 30px;
  font-weight: 850;
  background: linear-gradient(145deg, #7657d8, #332269);
  box-shadow: 0 14px 40px rgba(84,62,175,.26);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero h2 { margin: 4px 0; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.profile-stats article {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.profile-stats span { display: block; color: var(--muted); font-size: 12px; }
.profile-stats strong { display: block; margin-top: 7px; color: #fff; font-size: clamp(18px,4vw,25px); }
.discount-ticket {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(158,231,193,.25);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(70,161,113,.14), rgba(118,87,216,.09));
}
.discount-ticket > strong { color: #9ee7c1; font-size: 32px; }
.discount-ticket div { display: grid; gap: 4px; }
.discount-ticket span { color: var(--muted); font-size: 13px; }

.profile-reward-mode { margin-top: 14px; }
.profile-reward-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.profile-reward-head h2 { margin: 4px 0 0; }
.reward-current {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(158,231,193,.3);
  border-radius: 999px;
  color: #b8f3d3;
  background: rgba(70,161,113,.12);
  font-size: 12px;
  font-weight: 800;
}
.reward-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.reward-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  color: #fff;
  text-align: left;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.reward-mode-card:not(:disabled):active { transform: scale(.985); }
.reward-mode-card.is-active {
  border-color: rgba(158,231,193,.48);
  background: linear-gradient(145deg, rgba(70,161,113,.18), rgba(118,87,216,.1));
}
.reward-mode-card:focus-visible { outline: 2px solid #9ee7c1; outline-offset: 2px; }
.reward-mode-card:disabled { opacity: .48; cursor: not-allowed; }
.reward-mode-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #d8ccff;
  background: rgba(118,87,216,.2);
  font-size: 20px;
  font-weight: 900;
}
.reward-mode-card > span:nth-child(2) { display: grid; gap: 5px; }
.reward-mode-card small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.reward-mode-card i { visibility: hidden; color: #9ee7c1; font-style: normal; font-weight: 900; }
.reward-mode-card.is-active i { visibility: visible; }
.reward-mode-note { margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.personal-discount-choice {
  padding: 16px;
  border: 1px solid rgba(158,231,193,.24);
  border-radius: 16px;
  background: rgba(70,161,113,.08);
}
.personal-discount-choice > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.personal-discount-choice small { color: var(--muted); }
.personal-discount-choice p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.personal-discount-row { color: #9ee7c1; }
.personal-discount-row strong { font-weight: 700; }
.cart-final-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  font-weight: 1000;
}

.personal-discount-admin {
  grid-column: 2 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(158,231,193,.18);
  border-radius: 14px;
  background: rgba(70,161,113,.055);
}
.personal-discount-admin .pda-title { font-weight: 750; line-height: 1.2; }
.personal-discount-admin .pda-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.personal-discount-admin .pda-field { display: grid; gap: 6px; min-width: 0; align-content: start; margin: 0; }
.personal-discount-admin .pda-field > span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
.personal-discount-admin .pda-field input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(128, 96, 255, .18);
  border-radius: 12px;
  background: rgba(4, 20, 19, .64);
  color: #fff;
  font: inherit;
  line-height: 1.2;
  text-align: left;
}
/* iOS/WebKit: пустое поле даты не должно схлопываться и центрировать текст */
.personal-discount-admin .pda-field input[type="date"] {
  min-height: 48px;
}
.personal-discount-admin .pda-field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.personal-discount-admin .pda-save { width: 100%; margin: 0; }
.personal-discount-admin .pda-hint { display: block; margin: 0; color: var(--muted); line-height: 1.35; }

@media (max-width: 620px) {
  .profile-hero { grid-template-columns: 68px minmax(0,1fr); }
  .profile-avatar { width: 68px; height: 68px; border-radius: 20px; }
  .profile-stats article { padding: 12px 10px; }
  .profile-stats strong { font-size: 17px; }
  .reward-mode-grid { grid-template-columns: 1fr; }
  .personal-discount-choice > div:first-child { display: grid; }
  .personal-discount-admin { grid-column: 1 / -1; }
  .personal-discount-admin .pda-fields { grid-template-columns: 1fr; }
}


/* Product reviews V43 */
.product-rating{display:flex;align-items:center;gap:8px;margin:10px 0 6px;color:var(--text,#f7f4ff)}
.rating-stars{color:#f7c948;letter-spacing:1px;font-size:17px;white-space:nowrap}
.product-rating strong{font-size:14px}.product-rating small{color:var(--muted,#a9a3b8);font-size:12px}
.product-reviews-empty{font-size:12px;color:var(--muted,#a9a3b8);margin:4px 0 8px}
.product-reviews{margin:5px 0 10px;border-top:1px solid rgba(255,255,255,.09);padding-top:7px}
.product-reviews summary{cursor:pointer;color:var(--muted,#b8b1c8);font-size:12px;min-height:28px;display:flex;align-items:center}
.product-reviews-list{display:grid;gap:8px;padding-top:6px}
.product-reviews-list article{padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035)}
.product-reviews-list article>div{display:flex;justify-content:space-between;gap:8px;font-size:11px}.product-reviews-list article span{color:#f7c948}.product-reviews-list p{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--muted,#c1bacf);overflow-wrap:anywhere}
.order-review-form{grid-column:1/-1;margin:10px 0 4px;padding:14px;border:1px solid rgba(247,201,72,.25);border-radius:14px;background:rgba(247,201,72,.055);display:grid;gap:10px}
.order-review-title{display:flex;justify-content:space-between;gap:10px;align-items:center}.star-picker{display:flex;flex-direction:row;justify-content:flex-start;gap:2px}.star-picker label{display:inline-flex;cursor:pointer}.star-picker input{position:absolute;opacity:0;pointer-events:none}.star-picker span{font-size:30px;line-height:1;color:#716b78;cursor:pointer;transition:color .12s ease,transform .12s ease}.star-picker label.is-active span{color:#f7c948}.star-picker label:active span{transform:scale(.9)}.star-picker input:focus-visible+span{outline:2px solid #8b6df2;outline-offset:3px;border-radius:4px}
.order-review-form textarea{width:100%;resize:vertical;min-height:80px}.review-publication{font-size:11px;padding:4px 8px;border-radius:999px}.review-publication.is-published{color:#8de0b1;background:rgba(70,161,113,.14)}.review-publication.is-hidden{color:#f0ad76;background:rgba(213,128,59,.14)}
.review-filters{display:grid;grid-template-columns:minmax(160px,1fr) minmax(150px,.7fr) auto;gap:12px;align-items:end;margin:18px 0}.review-filters label{display:grid;gap:6px;color:var(--muted,#b8b1c8);font-size:12px}.review-filters select{width:100%}
.admin-review-list{display:grid;gap:12px}.admin-review-card{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}.admin-review-card.is-hidden{border-color:rgba(213,128,59,.28);opacity:.82}.admin-review-head{display:flex;justify-content:space-between;gap:12px}.admin-review-head>div{display:grid;gap:4px}.admin-review-head>div span{color:#f7c948}.admin-review-card>p{margin:12px 0;line-height:1.5;overflow-wrap:anywhere}.admin-review-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted,#a9a3b8);font-size:12px;margin-bottom:12px}
@media(max-width:640px){.review-filters{grid-template-columns:1fr}.admin-review-head,.order-review-title{align-items:flex-start;flex-direction:column}.star-picker span{font-size:34px}}

/* Reviews V44 */
.product-rating-button{width:100%;border:0;background:transparent;padding:8px 0;cursor:pointer;text-align:left}.product-rating-button:hover{color:#fff}.product-rating-button>span:last-child{margin-left:auto;font-size:20px}.all-product-reviews{display:grid;gap:12px}.full-review-card,.profile-review-item,.my-review-row{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}.full-review-card>div,.my-review-row>div{display:flex;justify-content:space-between;gap:12px}.full-review-card span,.my-review-row span{color:#f7c948}.full-review-card p,.my-review-row p{line-height:1.55;overflow-wrap:anywhere}.profile-reviews-section{display:grid;gap:14px}.profile-review-item>div{display:grid;gap:4px;margin-bottom:10px}.profile-review-item small,.my-review-row small{color:var(--muted,#aaa)}.my-reviews-history{margin-top:8px}.my-reviews-history summary{cursor:pointer;padding:12px 0}.my-reviews-history .my-review-row{margin-top:10px}.product-rating-summary{pointer-events:none}.review-filters{grid-template-columns:minmax(160px,1fr) auto}

/* Compact premium product rating V47 */
.product-rating-button{width:max-content;max-width:100%;min-height:30px;margin:8px 0 7px;padding:5px 8px!important;gap:7px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:8px;background:rgba(255,255,255,.035)!important;color:#f8f6ff!important;line-height:1;white-space:nowrap;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.product-rating-button:hover{border-color:rgba(247,201,72,.3)!important;background:rgba(247,201,72,.06)!important}
.product-rating-button:active{transform:scale(.985)}
.product-rating-button strong{font-size:13px;font-weight:760;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.product-rating-button small{font-size:11px;color:rgba(255,255,255,.58);font-weight:550}
.rating-stars-meter{display:inline-flex;align-items:center;justify-content:flex-start;gap:1px;width:61px;height:16px;overflow:visible;white-space:nowrap;flex:0 0 61px}
.rating-star-cell{--star-fill:0%;position:relative;display:block;width:11px;height:16px;flex:0 0 11px;overflow:hidden;color:rgba(255,255,255,.2);font-family:Arial,sans-serif;font-size:12px;line-height:16px;text-align:center}
.rating-star-cell::after{content:'★';position:absolute;inset:0 auto 0 0;width:var(--star-fill);overflow:hidden;color:#f4c550;white-space:nowrap;text-align:left;text-shadow:0 0 7px rgba(244,197,80,.18)}
@media(max-width:480px){.product-rating-button{gap:5px!important;padding:5px 6px!important}.rating-stars-meter{width:56px;flex-basis:56px;gap:0}.rating-star-cell{width:11px;flex-basis:11px;font-size:11px}}

/* Optional review comment V48 */
.star-picker[data-rating="0"]::after{content:'Выберите оценку';align-self:center;margin-left:8px;color:rgba(255,255,255,.48);font-size:12px}


/* ===== V53: stable document scrolling in Telegram and browsers ===== */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  position: static !important;
  height: auto !important;
  min-height: var(--app-viewport-height, 100dvh) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ПРАВКА СКРОЛЛА: из этого правила убраны height/max-height/overflow/touch-action.
   Из-за ID-селектора #app оно перебивало финальный блок «Жёстко прибитые панели»,
   #app не становился скролл-контейнером, и страница не скроллилась вообще.
   Скролл-архитектура теперь задаётся только финальным блоком в конце файла. */
#app,
.app-shell {
  position: relative !important;
}

/* Декоративные fixed-слои никогда не участвуют в hit-testing или жестах. */
.particles-bg,
.blur-bg,
body::before,
body::after {
  pointer-events: none !important;
  touch-action: none !important;
}

/* Внутренние горизонтальные ленты сохраняют pan-x, не блокируя pan-y страницы. */
.category-chips,
.admin-tabs,
.choice-scroll,
.variant-scroll {
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain;
}

/* Модалки скроллят собственное содержимое, остальная страница не замораживается CSS-классами. */
.age-modal,
.modal,
.admin-modal {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y pinch-zoom !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ===== V54: personal discount disables bonus redemption ===== */
.bonus-checkout-locked {
  border-color: rgba(255, 198, 91, .28) !important;
  background: linear-gradient(145deg, rgba(255, 198, 91, .08), rgba(255,255,255,.025)) !important;
  opacity: 1 !important;
}
.bonus-checkout-locked .bonus-checkout-title { color: rgba(255,255,255,.78); }
.bonus-lock-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 198, 91, .28);
  border-radius: 8px;
  color: #ffd787;
  background: rgba(255, 198, 91, .08);
  font-size: 12px;
  font-weight: 750;
}
.bonus-checkout-lock-note {
  margin: 10px 0 5px !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.45;
}
.bonus-checkout-locked > small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}


/* ===== V55: premium profile and checkout ===== */
.profile-premium-page,
.checkout-premium {
  --premium-accent: #8b6cf6;
  --premium-accent-soft: rgba(139,108,246,.14);
  --premium-line: rgba(255,255,255,.095);
  --premium-surface: linear-gradient(150deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
}

.profile-premium-page { display: grid; gap: 14px; }
.profile-premium-page > * { margin: 0 !important; }
.profile-premium-hero {
  position: relative;
  overflow: hidden !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border-color: rgba(155,128,246,.22) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(139,108,246,.19), transparent 38%),
    linear-gradient(145deg, rgba(19,15,31,.97), rgba(12,10,20,.96)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055);
}
.profile-premium-hero::after {
  content: '';
  position: absolute;
  right: -36px;
  bottom: -64px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1px solid rgba(155,128,246,.12);
  box-shadow: 0 0 0 22px rgba(155,128,246,.025), 0 0 0 48px rgba(155,128,246,.018);
  pointer-events: none;
}
.profile-premium-hero .profile-avatar {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  border: 1px solid rgba(192,175,255,.55);
  background: linear-gradient(145deg, #8b6cf6, #4a328d);
  box-shadow: 0 16px 38px rgba(92,61,190,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.profile-identity { position: relative; z-index: 1; min-width: 0; }
.profile-identity-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b9efcf;
  font-size: 11px;
  font-weight: 750;
}
.profile-status-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #67d99b; box-shadow: 0 0 12px rgba(103,217,155,.72); }
.profile-premium-hero h2 { margin: 7px 0 9px; font-size: clamp(23px,4vw,31px); letter-spacing: -.035em; line-height: 1.05; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-meta span {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: rgba(255,255,255,.56);
  background: rgba(255,255,255,.03);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.premium-profile-stats { gap: 9px; margin: 0 !important; }
.premium-profile-stats article {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 13px;
  border-color: var(--premium-line);
  border-radius: 15px;
  background: var(--premium-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.profile-stat-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #c7b8ff;
  background: var(--premium-accent-soft);
}
.profile-stat-icon svg { width: 17px; height: 17px; }
.profile-stat-gift .bonus-gift-icon { width: 18px; height: 18px; }
.premium-profile-stats article > div { min-width: 0; }
.premium-profile-stats span:not(.profile-stat-icon) { font-size: 11px; letter-spacing: .015em; }
.premium-profile-stats strong { margin-top: 3px; font-size: clamp(17px,3.5vw,22px); letter-spacing: -.025em; }

.profile-premium-page > .panel,
.profile-premium-page .profile-reviews-section {
  border-color: var(--premium-line) !important;
  background: var(--premium-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 44px rgba(0,0,0,.10);
}
.profile-premium-page .profile-discount,
.profile-premium-page .profile-reward-mode,
.profile-premium-page .profile-reviews-section { padding: clamp(17px,3vw,24px) !important; border-radius: 19px !important; }
.profile-premium-page .discount-ticket { border-radius: 15px; background: linear-gradient(145deg, rgba(81,184,132,.115), rgba(139,108,246,.075)); }
.profile-premium-page .reward-mode-card { min-height: 104px; border-radius: 15px; background: rgba(255,255,255,.026); }
.profile-premium-page .reward-mode-card.is-active { box-shadow: inset 0 0 0 1px rgba(158,231,193,.08), 0 10px 28px rgba(0,0,0,.1); }
.profile-premium-page .profile-review-item,
.profile-premium-page .my-review-row { border-radius: 14px; background: rgba(255,255,255,.026); }
.profile-premium-footer { display: grid; gap: 8px; text-align: center; }
.profile-refresh-premium { display: inline-flex !important; justify-content: center; align-items: center; gap: 8px; min-height: 48px; border-radius: 14px !important; }
.profile-premium-footer small { color: rgba(255,255,255,.42); font-size: 11px; }

.checkout-premium {
  max-width: 1020px !important;
  padding: clamp(18px,3vw,30px) !important;
  border-color: rgba(155,128,246,.18) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139,108,246,.12), transparent 28%),
    linear-gradient(145deg, rgba(16,13,26,.98), rgba(10,9,17,.98)) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
.checkout-premium-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 5px; }
.checkout-title-copy h2 { margin: 6px 0 7px; font-size: clamp(26px,4vw,36px); line-height: 1.02; letter-spacing: -.04em; }
.checkout-title-copy p { color: rgba(255,255,255,.52); font-size: 13px; }
.checkout-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 11px;
  border: 1px solid rgba(155,128,246,.22);
  border-radius: 11px;
  color: #d7cbff;
  background: rgba(139,108,246,.09);
  font-size: 12px;
  font-weight: 750;
}
.checkout-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 14px 0 4px; }
.checkout-progress span { height: 3px; border-radius: 3px; background: rgba(255,255,255,.075); }
.checkout-progress span.is-active { background: linear-gradient(90deg, #7956e8, #b49cff); box-shadow: 0 0 12px rgba(139,108,246,.22); }
.checkout-stage {
  display: grid;
  grid-template-columns: 205px minmax(0,1fr);
  gap: clamp(18px,3vw,32px);
  padding: clamp(18px,2.8vw,26px) 0;
  border-top: 1px solid var(--premium-line);
}
.checkout-stage:first-of-type { border-top: 0; }
.checkout-stage-head { display: flex; align-items: flex-start; gap: 11px; }
.checkout-stage-head > div { display: grid; gap: 4px; }
.checkout-stage-head b { color: #f7f4ff; font-size: 14px; letter-spacing: -.01em; }
.checkout-stage-head small { color: rgba(255,255,255,.42); font-size: 11px; line-height: 1.4; }
.checkout-stage-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(155,128,246,.16);
  border-radius: 11px;
  color: #c9baff;
  background: rgba(139,108,246,.095);
}
.checkout-fields { display: grid; gap: 13px; min-width: 0; }
.checkout-contact-grid { margin: 0 !important; }
.checkout-premium .field { gap: 7px; }
.checkout-premium .field > label { color: rgba(255,255,255,.62); font-size: 11px; font-weight: 720; letter-spacing: .02em; }
.checkout-premium input,
.checkout-premium textarea,
.checkout-premium select {
  border-color: rgba(255,255,255,.095) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.032) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.checkout-premium input:focus,
.checkout-premium textarea:focus,
.checkout-premium select:focus { border-color: rgba(155,128,246,.55) !important; background: rgba(139,108,246,.055) !important; box-shadow: 0 0 0 3px rgba(139,108,246,.08); outline: 0; }
.checkout-premium .choice-grid { gap: 8px; }
.checkout-premium .choice {
  min-height: 48px;
  border-radius: 12px;
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.028);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.checkout-premium .choice:hover { border-color: rgba(155,128,246,.28); }
.checkout-premium .choice:active { transform: scale(.99); }
.checkout-premium .choice.active { border-color: rgba(155,128,246,.52); background: linear-gradient(145deg, rgba(139,108,246,.17), rgba(139,108,246,.075)); box-shadow: inset 0 0 0 1px rgba(192,175,255,.06); }
.checkout-schedule-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.checkout-premium .place-grid,
.checkout-premium .time-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.checkout-premium .promo-checkout,
.checkout-premium .payment-note,
.checkout-premium .bonus-checkout,
.checkout-premium .bonus-earn-summary,
.checkout-premium .payment-summary { border-radius: 15px !important; }
.checkout-premium .payment-summary { padding: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.checkout-premium .summary-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.checkout-premium .summary-total strong { color: #c9b7ff; font-size: 23px; letter-spacing: -.035em; }
.checkout-premium-actions { display: grid; gap: 9px; padding-top: 4px; text-align: center; }
.checkout-submit-premium {
  min-height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #8764ed, #6040c4) !important;
  box-shadow: 0 14px 32px rgba(90,55,190,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
.checkout-submit-premium span { font-weight: 760; }
.checkout-submit-premium strong { font-size: 17px; }
.checkout-back-premium { min-height: 47px; border-radius: 14px !important; }
.checkout-premium-actions small { color: rgba(255,255,255,.38); font-size: 10px; }

.profile-premium-page > *,
.checkout-premium > * { animation: premiumSectionIn .38s cubic-bezier(.2,.8,.2,1) both; }
.profile-premium-page > *:nth-child(2), .checkout-premium > *:nth-child(2) { animation-delay: .035s; }
.profile-premium-page > *:nth-child(3), .checkout-premium > *:nth-child(3) { animation-delay: .07s; }
.profile-premium-page > *:nth-child(4), .checkout-premium > *:nth-child(4) { animation-delay: .105s; }
@keyframes premiumSectionIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .checkout-stage { grid-template-columns: 1fr; gap: 14px; }
  .checkout-stage-head small { max-width: 260px; }
  .checkout-schedule-grid { grid-template-columns: 1fr; }
  .checkout-contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .profile-premium-hero { grid-template-columns: 64px minmax(0,1fr); gap: 14px; }
  .profile-premium-hero .profile-avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 24px; }
  .profile-meta span { font-size: 10px; }
  .premium-profile-stats { grid-template-columns: 1fr 1fr 1fr; }
  .premium-profile-stats article { display: grid; justify-items: start; gap: 8px; min-height: 96px; padding: 12px 10px; }
  .profile-stat-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .reward-mode-grid { grid-template-columns: 1fr; }
  .checkout-premium { padding: 17px 14px 22px !important; border-radius: 18px !important; }
  .checkout-premium-head { align-items: flex-start; }
  .checkout-count-badge { padding: 7px 9px; }
  .checkout-title-copy h2 { font-size: 25px; }
  .checkout-title-copy p { font-size: 12px; }
  .checkout-stage { padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-premium-page > *, .checkout-premium > * { animation: none !important; }
  .reward-mode-card, .checkout-premium .choice { transition: none !important; }
}


/* ===== V56: strict alignment grid for profile and checkout ===== */
.profile-premium-page,
.checkout-premium {
  width: 100%;
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.profile-premium-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.profile-premium-page > *,
.profile-premium-page > .panel,
.profile-premium-page .profile-reviews-section {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
}
.profile-premium-page > .panel,
.profile-premium-page .profile-reviews-section {
  padding: 20px !important;
  border-radius: 18px !important;
}

.profile-premium-hero {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 118px;
}
.profile-premium-hero::after { opacity: .55; }
.profile-identity { display: grid; align-content: center; gap: 0; }
.profile-identity-top { min-height: 20px; align-items: center; }
.profile-premium-hero h2 { margin: 6px 0 8px !important; }
.profile-meta { align-items: center; gap: 8px; }
.profile-meta span { display: inline-flex; align-items: center; min-height: 27px; }

.premium-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.premium-profile-stats article {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 82px !important;
  height: 100%;
  padding: 14px !important;
  border-radius: 16px !important;
}
.profile-stat-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
.premium-profile-stats article > div { display: grid; align-content: center; gap: 4px; }
.premium-profile-stats span:not(.profile-stat-icon),
.premium-profile-stats strong { margin: 0 !important; line-height: 1.15; }
.premium-profile-stats strong { white-space: nowrap; }

.profile-premium-page .profile-discount,
.profile-premium-page .profile-reward-mode,
.profile-premium-page .profile-reviews-section { display: grid; gap: 16px; }
.profile-premium-page .profile-discount > h2,
.profile-premium-page .profile-reward-head,
.profile-premium-page .profile-reviews-section > .section-title { margin: 0 !important; }
.profile-premium-page .discount-ticket {
  min-height: 78px;
  margin: 0 !important;
  padding: 16px !important;
  border-radius: 14px !important;
}
.profile-reward-head { align-items: center !important; margin-bottom: 0 !important; }
.profile-reward-head > div { display: grid; gap: 5px; }
.profile-reward-head h2 { margin: 0 !important; line-height: 1.15; }
.reward-current { min-width: 74px; text-align: center; }
.reward-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 12px !important;
}
.reward-mode-card {
  grid-template-columns: 42px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 112px !important;
  height: 100%;
  padding: 16px !important;
  border-radius: 15px !important;
}
.reward-mode-icon { width: 42px !important; height: 42px !important; }
.reward-mode-card > span:nth-child(2) { align-content: center; min-width: 0; }
.reward-mode-card b,
.reward-mode-card small { overflow-wrap: anywhere; }
.reward-mode-note { margin: 0 !important; }
.profile-premium-page .profile-reviews-section > .section-title { align-items: center; }
.profile-premium-page .profile-review-item,
.profile-premium-page .my-review-row { margin: 0; padding: 15px !important; }
.profile-premium-footer { width: 100%; }

.checkout-premium {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px !important;
  padding: 22px !important;
}
.checkout-premium > * { width: 100%; min-width: 0; box-sizing: border-box; }
.checkout-premium-head { align-items: center !important; margin: 0 !important; padding: 2px 2px 0; }
.checkout-title-copy { display: grid; gap: 6px; min-width: 0; }
.checkout-title-copy h2,
.checkout-title-copy p { margin: 0 !important; }
.checkout-title-copy h2 { line-height: 1.08; }
.checkout-count-badge { min-height: 38px; justify-content: center; }
.checkout-progress { margin: 0 !important; }

.checkout-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.checkout-stage:first-of-type { border-top: 1px solid rgba(255,255,255,.085) !important; }
.checkout-stage-head {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px;
  margin: 0 !important;
}
.checkout-stage-head > div { display: grid; align-content: center; gap: 4px; }
.checkout-stage-head b,
.checkout-stage-head small { line-height: 1.25; }
.checkout-stage-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
.checkout-fields { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 14px !important; }
.checkout-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
.checkout-schedule-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
.checkout-premium .place-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
.checkout-premium .time-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important; }
.checkout-premium .date-grid { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important; }
.checkout-premium .field { display: grid; align-content: start; gap: 7px !important; margin: 0 !important; min-width: 0; }
.checkout-premium input,
.checkout-premium select { width: 100%; min-height: 52px; }
.checkout-premium textarea { width: 100%; min-height: 110px; resize: vertical; }
.checkout-premium .choice-grid { display: grid; align-items: stretch; gap: 10px !important; }
.checkout-premium .choice { width: 100%; min-height: 50px !important; height: 100%; padding: 11px 13px !important; }
.checkout-premium .promo-checkout,
.checkout-premium .payment-note,
.checkout-premium .bonus-checkout,
.checkout-premium .bonus-earn-summary,
.checkout-premium .payment-summary { width: 100%; margin: 0 !important; box-sizing: border-box; }
.checkout-premium .promo-input-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px !important; }
.checkout-premium .promo-input-row button { min-width: 128px; min-height: 52px; }
.checkout-premium .payment-summary { display: grid; gap: 10px; }
.checkout-premium .payment-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; }
.checkout-premium .payment-summary strong { text-align: right; white-space: nowrap; }
.checkout-premium-actions { width: 100%; gap: 10px !important; padding: 0 !important; }
.checkout-submit-premium,
.checkout-back-premium { width: 100%; margin: 0 !important; }

@media (max-width: 640px) {
  .profile-premium-page { gap: 12px; }
  .profile-premium-page > .panel,
  .profile-premium-page .profile-reviews-section { padding: 16px !important; border-radius: 17px !important; }
  .profile-premium-hero { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 14px !important; min-height: 104px; }
  .profile-premium-hero .profile-avatar { width: 64px !important; height: 64px !important; }
  .profile-identity-top { align-items: center; }
  .profile-status-dot { font-size: 10px; }
  .premium-profile-stats { gap: 8px !important; }
  .premium-profile-stats article {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 34px auto !important;
    align-content: start !important;
    gap: 8px !important;
    min-height: 100px !important;
    padding: 11px !important;
  }
  .profile-stat-icon { width: 34px !important; height: 34px !important; }
  .premium-profile-stats article > div { gap: 5px; }
  .premium-profile-stats strong { font-size: 17px !important; }
  .reward-mode-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .reward-mode-card { min-height: 96px !important; }

  .checkout-premium { gap: 12px !important; padding: 15px !important; border-radius: 18px !important; }
  .checkout-premium-head { align-items: flex-start !important; gap: 12px !important; }
  .checkout-title-copy { gap: 5px; }
  .checkout-count-badge { min-height: 34px; padding: 7px 8px; }
  .checkout-stage { gap: 14px !important; padding: 16px !important; border-radius: 15px !important; }
  .checkout-contact-grid,
  .checkout-schedule-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .checkout-premium .promo-input-row { grid-template-columns: minmax(0, 1fr) !important; }
  .checkout-premium .promo-input-row button { width: 100%; min-width: 0; }
  .checkout-submit-premium { min-height: 54px; padding: 0 16px !important; }
}

@media (max-width: 370px) {
  .premium-profile-stats strong { font-size: 15px !important; }
  .premium-profile-stats span:not(.profile-stat-icon) { font-size: 10px !important; }
  .profile-meta { gap: 5px; }
  .profile-meta span { padding-inline: 6px; }
  .checkout-premium-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}


/* ===== V58: precise profile icon and text alignment ===== */

/* ── Reviews feed tab (V15) ─────────────────────────────────────────── */
.reviews-feed-panel{display:grid;gap:14px;align-content:start}
.reviews-feed-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}
.reviews-feed-score{display:flex;align-items:center;gap:9px}
.reviews-feed-score b{font-size:18px;line-height:1}
.reviews-feed-count{color:var(--muted,#a9a3b8);font-size:12px;white-space:nowrap}
.reviews-feed-list{display:grid;gap:12px}
.reviews-feed-card{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035);display:grid;gap:10px}
.reviews-feed-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.reviews-feed-author{display:flex;gap:10px;align-items:center;min-width:0}
.reviews-feed-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(84,62,175,.4);color:#fff;font-weight:700;font-size:15px;box-shadow:0 8px 20px rgba(84,62,175,.25)}
.reviews-feed-author-meta{display:grid;gap:2px;min-width:0}
.reviews-feed-author-meta b{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.reviews-feed-author-meta span{color:var(--muted,#a9a3b8);font-size:11px}
.reviews-feed-rating{color:#f7c948;font-size:13px;letter-spacing:1px;white-space:nowrap;padding-top:2px}
.reviews-feed-product{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(125,92,255,.16);border-radius:12px;background:rgba(84,62,175,.12)}
.reviews-feed-thumb{width:40px;height:40px;border-radius:10px;overflow:hidden;flex:none;background:rgba(255,255,255,.06)}
.reviews-feed-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.reviews-feed-product-meta{display:grid;gap:4px;min-width:0}
.reviews-feed-product-meta>b{font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.reviews-feed-type{font-size:11px;color:var(--muted,#cfc8de);padding:2px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;width:fit-content;line-height:1.4}.review-variant-line{display:block;margin:6px 0 0;color:var(--muted,#cfc8de);font-size:12px}
.reviews-feed-comment{margin:0;font-size:13px;line-height:1.5;color:var(--muted,#c8c1d6);overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:640px){.reviews-feed-card{padding:12px}.reviews-feed-summary{flex-direction:column;align-items:flex-start;gap:6px}}

/* v117: profile verification */
.profile-status-dot.is-verified{border-color:rgba(114,188,143,.38)!important;background:rgba(70,161,113,.16)!important;color:#a6ebc5!important}.profile-status-dot.is-unverified{border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.055)!important;color:#c8c1d2!important}.profile-verification-date{border-color:rgba(114,188,143,.25)!important;color:#a6ebc5!important}.browser-logout-btn{border-color:rgba(255,255,255,.1);color:#d6cede}

/* ===== css/responsive.css ===== */

.profile-premium-page .premium-profile-stats{align-items:stretch!important;grid-auto-rows:1fr}
.profile-premium-page .premium-profile-stats article{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:42px auto!important;align-content:center!important;justify-items:center!important;gap:10px!important;min-height:116px!important;padding:15px 12px!important;text-align:center!important}
.profile-premium-page .profile-stat-icon{display:grid!important;place-items:center!important;align-self:center!important;justify-self:center!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;border-radius:12px!important;line-height:0!important}
.profile-premium-page .profile-stat-icon svg,.profile-premium-page .profile-stat-gift .bonus-gift-icon{display:block!important;width:20px!important;height:20px!important;margin:0!important}
.profile-premium-page .premium-profile-stats article>div{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;align-content:start!important;gap:7px!important;min-width:0;text-align:center!important}
.profile-premium-page .premium-profile-stats article>div>span,.profile-premium-page .premium-profile-stats article>div>strong{display:block!important;width:100%;margin:0!important;padding:0!important;text-align:center!important}
.profile-premium-page .premium-profile-stats article>div>span{min-height:14px;color:rgba(244,241,255,.62);font-size:11px!important;line-height:1.2!important}
.profile-premium-page .premium-profile-stats article>div>strong{min-height:22px;color:#fff;font-size:clamp(18px,3vw,23px)!important;line-height:1!important;letter-spacing:-.025em;white-space:nowrap}
.profile-reviews-head{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:center!important;gap:16px!important;margin:0!important;padding:0!important}
.profile-reviews-heading{min-width:0;display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:center!important;justify-items:start!important;gap:7px!important;margin:0!important;padding:0!important;text-align:left!important}
.profile-reviews-heading .section-eyebrow,.profile-reviews-heading h2{position:static!important;display:block!important;width:100%;margin:0!important;padding:0!important;transform:none!important;text-align:left!important}
.profile-reviews-heading .section-eyebrow{font-size:10px!important;line-height:1.15!important;letter-spacing:.18em}
.profile-reviews-heading h2{color:#fff;font-size:clamp(21px,4vw,28px)!important;line-height:1.1!important;letter-spacing:-.025em}
.profile-reviews-count{display:grid!important;place-items:center!important;align-self:center!important;justify-self:end!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;border:1px solid rgba(155,128,246,.24);border-radius:12px;color:#d7cbff;background:rgba(139,108,246,.1);font-size:16px!important;font-weight:800;line-height:1!important;font-variant-numeric:tabular-nums}
.profile-premium-page .reward-mode-card .reward-mode-icon{display:grid!important;place-items:center!important;align-self:center!important;margin:0!important}
.profile-premium-page .reward-mode-card>span:nth-child(2){justify-items:start!important;text-align:left!important}
@media(max-width:640px){.profile-premium-page .premium-profile-stats article{grid-template-rows:38px auto!important;gap:9px!important;min-height:108px!important;padding:12px 8px!important}.profile-premium-page .profile-stat-icon{width:38px!important;height:38px!important;border-radius:11px!important}.profile-premium-page .profile-stat-icon svg,.profile-premium-page .profile-stat-gift .bonus-gift-icon{width:19px!important;height:19px!important}.profile-premium-page .premium-profile-stats article>div{gap:6px!important}.profile-premium-page .premium-profile-stats article>div>strong{font-size:18px!important}.profile-reviews-head{grid-template-columns:minmax(0,1fr) 38px!important;gap:12px!important}.profile-reviews-count{width:38px!important;height:38px!important;border-radius:11px;font-size:15px!important}.profile-reviews-heading h2{font-size:23px!important}}
@media(max-width:370px){.profile-premium-page .premium-profile-stats{gap:6px!important}.profile-premium-page .premium-profile-stats article{padding-inline:6px!important}.profile-premium-page .premium-profile-stats article>div>span{font-size:10px!important}.profile-premium-page .premium-profile-stats article>div>strong{font-size:16px!important}}


/* ===== V59: refined bottom navigation and catalog heading ===== */
.catalog-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
}
.catalog-title-copy {
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.catalog-title-copy .section-eyebrow,
.catalog-title-copy h2 {
  position: static !important;
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
}
.catalog-title-copy .section-eyebrow {
  font-size: 10px !important;
  line-height: 1.15 !important;
  letter-spacing: .19em;
}
.catalog-title-copy h2 {
  font-size: clamp(28px, 4vw, 38px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.catalog-count {
  align-self: center !important;
  margin: 0 !important;
  white-space: nowrap;
}

.bottom-bar.customer-bottom-nav {
  min-height: 72px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 5px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 22px !important;
  background: rgba(10,8,15,.94) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.customer-bottom-nav .nav-btn,
.customer-bottom-nav .cart-btn,
.customer-bottom-nav .orders-bottom-btn,
.customer-bottom-nav .bonus-bottom-btn {
  width: 100%;
  min-width: 0 !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-rows: 30px 14px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.customer-bottom-nav .nav-btn .nav-ic {
  position: relative;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #a9a1b4 !important;
  background: transparent;
  line-height: 0 !important;
  transform: none;
}
.customer-bottom-nav .nav-btn .nav-ic svg,
.customer-bottom-nav .bonus-bottom-btn .nav-svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  color: currentColor !important;
  stroke-width: 1.8 !important;
  vector-effect: non-scaling-stroke;
}
.customer-bottom-nav .nav-label {
  display: block !important;
  max-width: 100%;
  margin: 0 !important;
  color: inherit;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-bottom-nav .nav-btn.is-active,
.customer-bottom-nav .nav-btn[aria-current="page"] {
  border-color: rgba(189,171,255,.18) !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(126,91,225,.90), rgba(82,55,158,.94)) !important;
  box-shadow: 0 9px 22px rgba(69,42,145,.28), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.customer-bottom-nav .nav-btn.is-active .nav-ic,
.customer-bottom-nav .nav-btn[aria-current="page"] .nav-ic {
  color: #fff !important;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.10);
  box-shadow: none !important;
}
.customer-bottom-nav .nav-btn:not(.is-active):not([aria-current="page"]):hover .nav-ic,
.customer-bottom-nav .nav-btn:not(.is-active):not([aria-current="page"]):focus-visible .nav-ic {
  color: #ddd6e8 !important;
  background: rgba(255,255,255,.055);
}
.customer-bottom-nav .cart-btn .cart-badge {
  top: -4px !important;
  right: -5px !important;
  min-width: 15px !important;
  height: 15px !important;
  padding: 0 4px !important;
  border: 2px solid rgba(10,8,15,.96) !important;
  font-size: 8px !important;
  line-height: 11px !important;
}
@media(max-width:380px){
  .bottom-bar.customer-bottom-nav{left:8px!important;right:8px!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:6px!important;gap:3px!important;border-radius:20px!important}
  .customer-bottom-nav .nav-btn{min-height:56px!important;padding-inline:2px!important}
  .customer-bottom-nav .nav-btn .nav-ic{width:28px!important;height:28px!important}
  .customer-bottom-nav .nav-btn .nav-ic svg{width:19px!important;height:19px!important}
  .customer-bottom-nav .nav-label{font-size:9px!important}
  .catalog-title{gap:10px!important}
  .catalog-title-copy h2{font-size:30px!important}
}


/* ===== V60: full-card outline for selected flavor/color variants ===== */
.variant-list {
  gap: 8px !important;
}
.variant-row {
  position: relative;
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  border: 2px solid rgba(139, 108, 246, 0) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
/* A tapped preview and a variant already added to cart both highlight the
   complete row. This prevents the misleading image-only outline. */
.variant-row--preview,
.variant-row--active {
  border-color: #8b6cf6 !important;
  background: linear-gradient(135deg, rgba(139,108,246,.16), rgba(86,58,170,.09)) !important;
  box-shadow:
    0 0 0 1px rgba(184,164,255,.18) inset,
    0 8px 24px rgba(75,45,160,.16) !important;
}
.variant-row--active {
  border-color: #9b7cff !important;
  box-shadow:
    0 0 0 1px rgba(207,194,255,.24) inset,
    0 9px 26px rgba(82,49,177,.22) !important;
}
.variant-row--preview.variant-row--active {
  border-color: #ad94ff !important;
  box-shadow:
    0 0 0 1px rgba(225,216,255,.28) inset,
    0 10px 28px rgba(91,55,190,.26) !important;
}
.variant-row--preview .variant-row-name,
.variant-row--active .variant-row-name {
  color: #fff !important;
}
.variant-row--preview .variant-row-meta,
.variant-row--active .variant-row-meta {
  color: rgba(236,230,255,.74) !important;
}
/* The thumbnail stays understated; selection is communicated by the row. */
.variant-row--preview .variant-row-thumb,
.variant-row--active .variant-row-thumb {
  border-color: rgba(173,148,255,.38) !important;
  transform: none !important;
  box-shadow: none !important;
}
.variant-row--empty.variant-row--preview,
.variant-row--empty.variant-row--active {
  opacity: .62;
}
@media (hover:hover) and (pointer:fine) {
  .variant-row:not(.variant-row--empty):hover {
    border-color: rgba(139,108,246,.46) !important;
    background: rgba(139,108,246,.07) !important;
  }
  .variant-row--preview:hover,
  .variant-row--active:hover {
    border-color: #ad94ff !important;
  }
}
@media (max-width: 560px) {
  .variant-list { gap: 7px !important; }
  .variant-row { padding: 12px !important; border-radius: 13px !important; }
}


/* ===== V61: product image flies into cart ===== */
.cart-flight-item {
  position: fixed !important;
  z-index: 10050 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(189,171,255,.42) !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(30,24,48,.98), rgba(13,11,20,.98)) !important;
  box-shadow: 0 16px 42px rgba(50,28,120,.38), 0 0 0 1px rgba(255,255,255,.08) inset !important;
  pointer-events: none !important;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
  contain: paint;
}
.toast.toast-free-position {
  left: var(--toast-free-left, max(12px, env(safe-area-inset-left))) !important;
  top: var(--toast-free-top, max(12px, env(safe-area-inset-top))) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--toast-free-width, min(560px, calc(100vw - 24px))) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .cart-flight-item { display: none !important; }
}


/* ===== V64: fixed toast above every screen layer ===== */
.toast {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  z-index: 2147483000 !important;
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 auto !important;
  isolation: isolate !important;
  pointer-events: none !important;
  transform-origin: center bottom !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.58), 0 0 0 1px rgba(177,145,255,.18) inset !important;
  contain: paint;
}


/* ===== V66: compositor-first motion performance ===== */
.motion-busy .blur-bg::before,
.motion-busy .blur-bg::after,
.motion-busy .blob,
.motion-busy .hero::after,
.motion-busy .premium-profile-hero::after {
  animation-play-state: paused !important;
}
.motion-busy .particles-bg { opacity: .34 !important; }
.cart-flight-item,
.toast,
.variant-modal,
.customer-bottom-nav,
.nav-btn .nav-ic {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.product-card {
  content-visibility: auto !important;
  contain-intrinsic-size: auto 330px;
  contain: layout paint style !important;
}
.cart-flight-item { box-shadow: 0 12px 30px rgba(50,28,120,.30), 0 0 0 1px rgba(255,255,255,.07) inset !important; }

@media (max-width: 780px), (pointer: coarse) {
  .blur-bg { filter: none !important; opacity: .30 !important; }
  .blur-bg::before,
  .blur-bg::after {
    filter: blur(38px) saturate(1.18) !important;
    animation-duration: 55s !important;
  }
  .blob {
    filter: blur(30px) saturate(1.12) !important;
    animation-duration: 48s !important;
  }
  .hero::after,
  .daily::after,
  .premium-profile-hero::after,
  .checkout-premium::after { animation: none !important; }
  .variant-modal-overlay,
  .modal,
  .age-modal,
  .ban-modal,
  .ban-dialog {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(4,3,8,.91) !important;
  }
  .customer-bottom-nav {
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
  }
  .stock-badge,
  .product-badge,
  .variant-count-badge,
  .variant-cart-badge {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .product-card,
  .panel,
  .card { box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; }
  .variant-modal-topbar { gap: 10px !important; margin-bottom: 8px !important; }
  .variant-back-btn { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 11px !important; font-size: 21px !important; }
}


/* ===== V69: stable non-overlapping product-card badges ===== */
.product-image {
  position: relative !important;
  isolation: isolate !important;
}
.product-image .product-badge,
.product-image .stock-badge,
.product-image .variant-count-badge,
.product-image .variant-cart-badge {
  position: absolute !important;
  z-index: 4 !important;
  min-height: 27px !important;
  max-width: calc(72% - 12px) !important;
  padding: 6px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(205,190,255,.20) !important;
  background: rgba(12,10,18,.86) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: translateZ(0);
}
/* Product status stays alone at the top; it can never collide with variant count. */
.product-image .product-badge {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  max-width: calc(100% - 20px) !important;
  background: linear-gradient(135deg, rgba(91,58,181,.92), rgba(122,77,205,.88)) !important;
  color: #fff !important;
}
.product-image .stock-badge {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
}
/* Available tastes/colors get a dedicated bottom-right zone. */
.product-image .variant-count-badge {
  top: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  background: rgba(16,13,22,.90) !important;
  border-color: rgba(192,172,255,.24) !important;
}
/* Cart quantity appears in the opposite corner without affecting layout. */
.product-image .variant-cart-badge {
  top: auto !important;
  left: 10px !important;
  bottom: 10px !important;
  right: auto !important;
  max-width: calc(40% - 8px) !important;
  background: linear-gradient(135deg, #7858df, #9b78f3) !important;
  color: #fff !important;
}
.product-body {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.product-body .buy-row {
  margin-top: auto !important;
  min-height: 48px !important;
  align-items: flex-end !important;
}
.product-body .buy-btn,
.product-body .inline-qty {
  min-height: 44px !important;
  height: 44px !important;
  contain: layout paint !important;
}
@media (max-width: 560px) {
  .product-image .product-badge,
  .product-image .stock-badge,
  .product-image .variant-count-badge,
  .product-image .variant-cart-badge {
    min-height: 25px !important;
    padding: 5px 8px !important;
    font-size: 10.5px !important;
  }
  .product-image .product-badge { top: 8px !important; left: 8px !important; }
  .product-image .stock-badge { top: 8px !important; right: 8px !important; }
  .product-image .variant-count-badge { right: 8px !important; bottom: 8px !important; }
  .product-image .variant-cart-badge { left: 8px !important; bottom: 8px !important; }
}

/* ===== V70: standard resistance type keeps custom-only fields hidden ===== */
#customVariantFields[hidden] {
  display: none !important;
}


/* ===== V71: definitive two-rail badge layout (no overlap, no layout shift) ===== */
.product-image .product-badge-rail {
  position: absolute !important;
  z-index: 6 !important;
  left: 9px !important;
  right: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 7px !important;
  min-width: 0 !important;
  pointer-events: none !important;
  contain: layout paint !important;
}
.product-image .product-badge-rail--top {
  top: 9px !important;
  bottom: auto !important;
}
.product-image .product-badge-rail--bottom {
  top: auto !important;
  bottom: 9px !important;
}
.product-image .product-badge-rail > .product-badge,
.product-image .product-badge-rail > .stock-badge,
.product-image .product-badge-rail > .variant-count-badge,
.product-image .product-badge-rail > .variant-cart-badge {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 72% !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
  transform: none !important;
}
.product-image .product-badge-rail--top > .stock-badge,
.product-image .product-badge-rail--bottom > .variant-count-badge {
  margin-left: auto !important;
}
.product-image .product-badge-rail--bottom > .variant-cart-badge {
  max-width: 38% !important;
  flex-shrink: 1 !important;
}
.product-image .product-badge-rail--bottom > .variant-count-badge {
  max-width: 62% !important;
  flex-shrink: 1 !important;
}
@media (max-width: 560px) {
  .product-image .product-badge-rail {
    left: 8px !important;
    right: 8px !important;
    gap: 5px !important;
  }
  .product-image .product-badge-rail--top { top: 8px !important; }
  .product-image .product-badge-rail--bottom { bottom: 8px !important; }
  .product-image .product-badge-rail > .product-badge,
  .product-image .product-badge-rail > .stock-badge,
  .product-image .product-badge-rail > .variant-count-badge,
  .product-image .product-badge-rail > .variant-cart-badge {
    min-height: 25px !important;
    height: 25px !important;
    padding-inline: 8px !important;
    font-size: 10.5px !important;
  }
}


/* ===== V72: readable resistance block on consumable product cards ===== */
.product-card[data-variant-type="resistance"] .product-badge-rail--bottom {
  height: 58px !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}
.product-card[data-variant-type="resistance"] .variant-count-badge--resistance {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(186,155,255,.58) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(26,18,43,.97), rgba(12,9,19,.98)) !important;
  color: #fff !important;
  box-shadow: 0 7px 20px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.product-card[data-variant-type="resistance"] .product-badge-rail--bottom > .variant-cart-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  max-width: 48% !important;
  min-height: 24px !important;
  height: 24px !important;
  padding-inline: 8px !important;
  z-index: 2 !important;
}
.product-card[data-variant-type="resistance"] .buy-btn {
  min-height: 46px !important;
  height: auto !important;
  padding: 9px 10px !important;
  font-size: clamp(12px, 3.25vw, 14px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -.015em !important;
  white-space: normal !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
}
@media (max-width: 560px) {
  .product-card[data-variant-type="resistance"] .product-badge-rail--bottom {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    height: 56px !important;
  }
  .product-card[data-variant-type="resistance"] .variant-count-badge--resistance {
    min-height: 29px !important;
    height: 29px !important;
    padding-inline: 9px !important;
    font-size: 11px !important;
  }
  .product-card[data-variant-type="resistance"] .buy-btn {
    font-size: 12px !important;
    padding-inline: 8px !important;
  }
}


/* ===== V74: unified catalog typography + Ω resistance marker ===== */
.products-grid {
  align-items: stretch !important;
}
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 430px !important;
}
.product-card .product-image {
  flex: 0 0 auto !important;
}
.product-card .product-body {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-rows: 40px 36px 30px 18px minmax(76px, auto) !important;
  align-content: stretch !important;
  gap: 8px !important;
  padding: 14px 13px 13px !important;
}
.product-card .product-title {
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  color: #f8f6fc !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}
.product-card .short-note {
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  color: #a8a1b1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}
.product-card .short-note--empty,
.product-card .age-mark--empty {
  visibility: hidden !important;
}
.product-card .product-rating {
  width: 100% !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  align-self: stretch !important;
}
.product-card .age-mark {
  min-height: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #817a89 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.product-card .buy-row {
  min-height: 76px !important;
  margin: 0 !important;
  align-self: stretch !important;
}
.product-card .price-box {
  min-width: 0 !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
}
.product-card .price-box .price {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}
.product-card .old-price {
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.product-card .buy-btn,
.product-card .inline-qty {
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
/* Resistance uses one universal, compact and language-independent mark. */
.product-card[data-variant-type="resistance"] .product-badge-rail--bottom {
  height: 30px !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important;
}
.product-card[data-variant-type="resistance"] .variant-count-badge--resistance {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 30px !important;
  height: 30px !important;
  flex: 0 0 34px !important;
  margin-left: auto !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.product-card[data-variant-type="resistance"] .product-badge-rail--bottom > .variant-cart-badge {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  min-height: 25px !important;
  height: 25px !important;
}
.product-card[data-variant-type="flavor"] .buy-btn,
.product-card[data-variant-type="color"] .buy-btn,
.product-card[data-variant-type="resistance"] .buy-btn,
.product-card[data-variant-type="custom"] .buy-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 740 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  overflow-wrap: normal !important;
}
@media (max-width: 560px) {
  .product-card {
    min-height: 405px !important;
  }
  .product-card .product-body {
    grid-template-rows: 38px 34px 30px 17px minmax(78px, auto) !important;
    gap: 7px !important;
    padding: 13px 12px 12px !important;
  }
  .product-card .product-title {
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 15px !important;
    line-height: 1.27 !important;
  }
  .product-card .short-note {
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 11.5px !important;
  }
  .product-card .age-mark {
    min-height: 17px !important;
    height: 17px !important;
  }
  .product-card .buy-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 27px 44px !important;
    gap: 7px !important;
    min-height: 78px !important;
  }
  .product-card .price-box {
    min-height: 27px !important;
    justify-content: flex-end !important;
  }
  .product-card .price-box .price { font-size: 19px !important; }
  .product-card .buy-btn,
  .product-card .inline-qty { width: 100% !important; }
}

/* Android/webview fix: keep two product cards per row on common phone widths.
   Collapse to a single column only on truly ultra-narrow screens. */
@media (max-width: 430px) and (min-width: 341px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}


/* ===== V82: карточка пользователя и понятная активность ===== */
.user-row {
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.user-row:hover { border-color: rgba(162,129,247,.32); background: rgba(118,87,216,.085); }
.user-row:active { transform: scale(.992); }
.user-row:focus-visible { outline: 2px solid #a281f7; outline-offset: 3px; }
.user-row-chevron { color: #a9a3b8; font-size: 30px; font-weight: 300; line-height: 1; text-align: right; }
.user-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.activity-chip { display: inline-flex; align-items: center; gap: 7px; color: #d8d3e1; font-weight: 750; }
.activity-chip i, .activity-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #77717f; box-shadow: 0 0 0 4px rgba(119,113,127,.12); }
.activity-online i, .user-activity-card.activity-online .activity-dot { background: #72bc8f; box-shadow: 0 0 0 4px rgba(114,188,143,.13); }
.activity-recent i, .user-activity-card.activity-recent .activity-dot { background: #eac26b; box-shadow: 0 0 0 4px rgba(234,194,107,.13); }
.activity-idle i, .user-activity-card.activity-idle .activity-dot { background: #a49cae; }
.activity-exact { display: block; margin-top: 5px; color: rgba(255,255,255,.43); font-size: 11px; }
.status-badge.whitelist { color: #b8f3d3; background: rgba(70,161,113,.13); }
.status-badge.admin { color: #d8ccff; background: rgba(118,87,216,.18); }

.user-settings-dialog {
  position: fixed;
  inset: 0;
  z-index: 215;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7,4,12,.76);
  backdrop-filter: blur(16px) saturate(1.1);
}
body.user-settings-open { overflow: hidden !important; }
#app > .user-settings-dialog { position: fixed !important; inset: 0 !important; }
.user-settings-card {
  width: min(100%, 760px);
  max-height: min(88vh, 860px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(162,129,247,.24);
  background: linear-gradient(155deg, rgba(29,23,42,.99), rgba(15,12,22,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.52);
}
.user-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.user-settings-identity { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 13px; min-width: 0; }
.user-settings-identity h2 { margin: 2px 0 5px; overflow-wrap: anywhere; }
.user-settings-identity p { margin: 0; }
.section-eyebrow { color: #a99af0; font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.user-settings-close { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.045); color: #fff; font-size: 28px; line-height: 1; }
.user-activity-card { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.035); }
.user-activity-card > div { display: grid; gap: 3px; }
.user-activity-card small { color: var(--muted); }
.user-activity-card .activity-caption { color: var(--muted); font-size: 12px; font-weight: 700; }
.user-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.user-setting-section { display: grid; align-content: start; gap: 14px; min-width: 0; margin: 0; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.03); }
.user-setting-section h3 { margin: 0 0 4px; font-size: 17px; }
.user-setting-section p { margin: 0; }
.user-setting-section .pda-fields { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 10px; }
.user-setting-section .pda-field { display: grid; gap: 6px; min-width: 0; }
.user-setting-section .pda-field > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.user-setting-section .pda-field input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(162,129,247,.18); border-radius: 11px; background: rgba(8,7,12,.58); color: #fff; font: inherit; }
.user-admin-section { grid-column: 1 / -1; }
.user-admin-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.user-admin-permissions { display: grid; gap: 12px; }
.user-admin-permissions[hidden] { display: none !important; }
.compact-switch { position: relative; flex: 0 0 auto; }
.compact-switch input { position: absolute; opacity: 0; pointer-events: none; }
.compact-switch span { display: block; width: 50px; height: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.08); transition: background .18s ease, border-color .18s ease; }
.compact-switch span::after { content: ''; display: block; width: 22px; height: 22px; margin: 2px; border-radius: 50%; background: #aaa4b2; transition: transform .18s ease, background .18s ease; }
.compact-switch input:checked + span { border-color: rgba(114,188,143,.45); background: rgba(70,161,113,.24); }
.compact-switch input:checked + span::after { transform: translateX(22px); background: #9ee7c1; }
.compact-switch input:focus-visible + span { outline: 2px solid #a281f7; outline-offset: 3px; }

@media (max-width: 680px) {
  .user-row { grid-template-columns: 42px minmax(0,1fr) 18px; padding: 14px 12px; }
  .user-settings-dialog { align-items: end; padding: 0; }
  .user-settings-card { width: 100%; max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .user-settings-grid { grid-template-columns: 1fr; }
  .user-admin-section { grid-column: auto; }
  .user-setting-section .pda-fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .user-row, .compact-switch span, .compact-switch span::after { transition: none !important; }
}

/* ===== V84: точный визит и ровная сетка персональной скидки ===== */
.user-setting-section .pda-fields {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.user-setting-section .pda-field,
.user-setting-section .pda-field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
.user-setting-section .pda-field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
}
.user-setting-section .pda-field input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}
@media (max-width: 680px) {
  .user-setting-section .pda-fields { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== css/startup-pickup.css ===== */

.startup-data-loader{position:fixed;z-index:5000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(8,6,13,.74);backdrop-filter:blur(16px);transition:opacity .22s ease,visibility .22s ease}.startup-data-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.startup-data-loader__card{width:min(92vw,430px);display:flex;align-items:center;gap:15px;padding:18px 20px;border:1px solid rgba(188,158,255,.28);border-radius:22px;background:linear-gradient(145deg,rgba(33,25,48,.96),rgba(18,14,27,.97));box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 44px rgba(118,73,218,.16);color:#fff}.startup-data-loader__card strong{display:block;font-size:16px;letter-spacing:.01em}.startup-data-loader__card small{display:block;margin-top:4px;color:rgba(236,230,247,.68);font-size:12px;line-height:1.35}.startup-data-loader__spinner{width:28px;height:28px;flex:0 0 28px;border:3px solid rgba(255,255,255,.16);border-top-color:#a982ff;border-right-color:#ff72b6;border-radius:50%;animation:startup-spin .75s linear infinite}@keyframes startup-spin{to{transform:rotate(360deg)}}
.pickup-dialog{width:min(92vw,450px);padding:24px;border:1px solid rgba(184,147,255,.25);border-radius:25px;background:linear-gradient(150deg,rgba(36,27,51,.98),rgba(16,13,23,.99));box-shadow:0 28px 80px rgba(0,0,0,.55);color:#fff}.pickup-dialog h2{margin:8px 0;font-size:24px;line-height:1.12}.pickup-dialog>p{margin:0 0 18px;color:rgba(237,232,246,.7);font-size:14px;line-height:1.5}.pickup-point-options{display:grid;gap:10px;margin:18px 0}.pickup-point-option{width:100%;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:14px;border:1px solid rgba(179,146,255,.2);border-radius:17px;background:rgba(255,255,255,.055);color:#fff;text-align:left}.pickup-point-option:hover,.pickup-point-option:focus-visible{border-color:rgba(196,164,255,.55);background:rgba(159,112,255,.13)}.pickup-point-option b,.pickup-point-option small{display:block}.pickup-point-option small{margin-top:2px;color:rgba(236,230,247,.58)}.pickup-point-option i{font-style:normal;color:#b898ff;font-size:20px}.pickup-point-option.is-selected{border-color:rgba(196,164,255,.8);background:rgba(159,112,255,.22)}.pickup-choice-overlay .pickup-dialog-actions{margin-top:4px}.pickup-dialog-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:rgba(255,88,116,.16);color:#ff778e;font-size:26px;font-weight:900}.pickup-dialog--error{border-color:rgba(255,99,126,.3)}.pickup-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.variant-location-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.variant-location-chip{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border:1px solid rgba(127,228,177,.24);border-radius:999px;background:rgba(74,193,129,.1);color:#a7efc5;font-size:11px;font-weight:750}.variant-location-chip.is-empty{border-color:rgba(255,112,130,.22);background:rgba(255,80,107,.08);color:#ff9baa}.pickup-card--locked{padding:16px;border:1px solid rgba(165,128,245,.24);border-radius:18px;background:rgba(130,86,218,.08)}.pickup-card-head{display:flex;align-items:center;gap:10px}.pickup-card-head>div{flex:1}.pickup-card-head b,.pickup-card-head small{display:block}.pickup-card-head small{margin-top:2px;color:rgba(237,231,247,.62)}.pickup-card-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:rgba(160,112,255,.14);color:#c3a6ff}.pickup-locked-badge{padding:5px 9px;border-radius:999px;background:rgba(65,196,126,.12);color:#9cebbd;font-size:11px;font-weight:800}.pickup-card-note{margin:12px 0 0;color:rgba(237,231,247,.62);font-size:12px;line-height:1.45}.cash-payment-card{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:14px;border:1px solid rgba(73,204,135,.26);border-radius:17px;background:rgba(53,174,111,.09)}.cash-payment-card>span{color:#9aebbd}.cash-payment-card b,.cash-payment-card small{display:block}.cash-payment-card small{margin-top:2px;color:rgba(237,231,247,.6)}.cash-payment-card i{font-style:normal;color:#83e3ac;font-weight:900}@media(max-width:520px){.pickup-dialog-actions{grid-template-columns:1fr}.startup-data-loader__card{padding:16px}.pickup-dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){.startup-data-loader__spinner{animation:none}}

.cart-pickup-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 15px;border:1px solid rgba(154,114,245,.28);border-radius:17px;background:linear-gradient(135deg,rgba(137,90,226,.13),rgba(58,180,124,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.cart-pickup-banner__icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:13px;background:rgba(163,119,255,.15);color:#c6aaff}.cart-pickup-banner small,.cart-pickup-banner b{display:block}.cart-pickup-banner small{margin-bottom:2px;color:rgba(237,231,247,.58);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.cart-pickup-banner b{color:#fff;font-size:14px}

.admin-variant-row--locations{align-items:start}.admin-variant-row--locations .admin-variant-info{min-width:0}.admin-variant-location-grid,.admin-add-variant-stock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-variant-location-grid{margin-top:9px}.admin-variant-location-grid label{display:grid;gap:5px}.admin-variant-location-grid label span{color:rgba(237,231,247,.65);font-size:11px;font-weight:700}.admin-variant-location-grid input{width:100%;min-width:0}.admin-variant-total{display:block;margin-top:7px;color:rgba(237,231,247,.55)}.admin-variant-row.is-saving{opacity:.7}.admin-variants-overlay .variant-modal-header>div{min-width:0}.admin-variants-overlay .variant-modal-header h2{margin-top:5px}@media(max-width:520px){.admin-variant-row--locations{grid-template-columns:48px minmax(0,1fr) 36px;gap:8px}.admin-variant-location-grid,.admin-add-variant-stock-grid{grid-template-columns:1fr}.admin-variant-location-grid{gap:7px}.admin-variant-row--locations .admin-variant-name-input{font-size:14px}}


/* Dynamic per-variant pickup inventory */
.product-location-list,.admin-row-location-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.product-location-list .variant-location-chip,.admin-row-location-list .variant-location-chip{min-height:27px;padding:5px 8px;font-size:11px;line-height:1.25;white-space:normal}
.product-location-list{margin:7px 0 2px}
.admin-row-location-list{display:inline-flex;margin:0}
.admin-row-location-list .variant-location-chip{min-height:23px;padding:3px 7px}
.admin-variants-overlay .variant-modal-header p{max-width:560px;margin:7px 0 0;color:rgba(237,231,247,.62);font-size:12px;line-height:1.45}
.admin-variant-row--primary .admin-variant-thumb-wrap{cursor:default}
.admin-variant-name-static{min-height:42px;display:flex;align-items:center;padding:10px 12px;border:1px solid rgba(179,146,255,.18);border-radius:12px;background:rgba(255,255,255,.045);color:#fff;font-size:15px;font-weight:800}
.admin-variant-locations{display:grid;gap:8px;margin-top:10px}
.admin-variant-location{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:10px;padding:10px 10px 10px 12px;border:1px solid rgba(127,228,177,.22);border-radius:13px;background:rgba(74,193,129,.08)}
.admin-variant-location__label{min-width:0}
.admin-variant-location__label b,.admin-variant-location__label small{display:block}
.admin-variant-location__label b{color:#baf4d1;font-size:12px;line-height:1.3}
.admin-variant-location__label small{margin-top:2px;color:rgba(237,231,247,.5);font-size:10px}
.admin-variant-location__quantity{display:flex;align-items:center;gap:5px;color:rgba(237,231,247,.66);font-size:12px;font-weight:750}
.admin-variant-location__quantity input{width:76px;min-width:0;padding:9px 10px;text-align:center;font-variant-numeric:tabular-nums}
.admin-location-remove{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,112,130,.25);border-radius:10px;background:rgba(255,80,107,.08);color:#ff9baa;font-size:19px;line-height:1}
.admin-location-remove:hover,.admin-location-remove:focus-visible{border-color:rgba(255,112,130,.55);background:rgba(255,80,107,.15)}
.admin-locations-empty{padding:12px;border:1px dashed rgba(179,146,255,.24);border-radius:12px;color:rgba(237,231,247,.58);font-size:12px;text-align:center}
.admin-location-add-toggle{width:100%;min-height:42px;margin-top:8px;border:1px dashed rgba(184,147,255,.35);border-radius:12px;background:rgba(153,107,245,.07);color:#cdb9ff;font-weight:800}
.admin-location-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:9px;padding:12px;border:1px solid rgba(184,147,255,.23);border-radius:14px;background:rgba(121,82,195,.08)}
.admin-location-add[hidden]{display:none!important}
.admin-location-add>label{display:grid;gap:5px}
.admin-location-add>label>span{color:rgba(237,231,247,.65);font-size:11px;font-weight:700}
.admin-location-add__quantity{display:flex;align-items:center;gap:6px;color:rgba(237,231,247,.65);font-size:12px;font-weight:750}
.admin-location-add__quantity input{width:100%;min-width:0}
.admin-location-add__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin-location-add__actions button{min-height:42px;margin:0}
.admin-add-variant-form{margin-top:16px;padding-top:16px;border-top:1px solid rgba(184,147,255,.14)}
.duplicate-variant-overlay{z-index:11000!important}
.admin-variant-row.is-duplicate-flash{
  animation: duplicateVariantFlash .9s ease;
  border-color: rgba(255, 168, 92, .7);
}
@keyframes duplicateVariantFlash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px rgba(255, 168, 92, .35); }
}
@media(max-width:520px){.admin-row-location-list{width:100%;margin-top:5px}.admin-variant-location{grid-template-columns:minmax(0,1fr) auto 36px;gap:7px}.admin-variant-location__label small{display:none}.admin-variant-location__quantity input{width:64px}.admin-location-add{grid-template-columns:1fr}.admin-location-add__actions{grid-column:1}.product-location-list .variant-location-chip{font-size:10.5px}}

.admin-variant-row>.action-icon-btn--danger{color:#ff9baa!important;font-size:17px!important;line-height:1!important}
@media(max-width:520px){.admin-variant-location{grid-template-columns:minmax(0,1fr) auto 36px}.admin-variant-location__label{grid-column:1/-1}.admin-variant-location__label b{white-space:nowrap;font-size:11px}.admin-variant-location__quantity{grid-column:1/3;justify-self:end}.admin-location-remove{grid-column:3;grid-row:2}}

/* Per-add pickup selector and explicit point conflict */
.pickup-point-option b{font-size:13px;line-height:1.3}.pickup-point-option:disabled{cursor:not-allowed;opacity:.5;filter:saturate(.55)}.pickup-point-option:disabled:hover{border-color:rgba(179,146,255,.2);background:rgba(255,255,255,.055)}.pickup-dialog-actions button{min-height:46px;white-space:normal;line-height:1.25}


/* ===== Доработки: картинки категорий, лайтбокс фото, точки самовывоза ===== */

/* Картинка категории выводится ровно в размере смайлика */
.chip-img {
  width: 1.25em;
  height: 1.25em;
  border-radius: 6px;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

.category-admin-img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.cat-edit-image {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .25);
  cursor: pointer;
  flex: 0 0 auto;
}

.cat-edit-image input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Лайтбокс фото варианта: полноэкранный предпросмотр */
.variant-modal-img img {
  cursor: zoom-in;
}

.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(4, 2, 10, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
  touch-action: manipulation;
}

.image-lightbox-overlay.is-open { opacity: 1; }
.image-lightbox-overlay.is-closing { opacity: 0; }

.image-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.image-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: 16px;
}

.image-lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  color: #fff;
  font-weight: 700;
}

.image-lightbox-size {
  color: rgba(255, 255, 255, .55);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

.image-lightbox-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.image-lightbox-close:active { background: rgba(255, 255, 255, .25); }

@media (prefers-reduced-motion: reduce) {
  .image-lightbox-overlay { transition: none; }
}

/* Точки самовывоза в админке */
.pickup-add-form { margin-bottom: 14px; }

.pickup-admin-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.pickup-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.pickup-admin-row.is-inactive { opacity: .55; }

.pickup-admin-row.editing {
  flex-direction: column;
  align-items: stretch;
}

.pickup-admin-fields {
  display: grid;
  gap: 8px;
}

.pickup-admin-fields input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  box-sizing: border-box;
}

.checkout-pickup-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.checkout-pickup-note b,
.checkout-pickup-note small { display: block; }
.checkout-pickup-note small { opacity: .82; margin-top: 2px; }

.checkout-meeting-place {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.checkout-meeting-place b,
.checkout-meeting-place small { display: block; }
.checkout-meeting-place small { opacity: .82; margin-top: 2px; }
.checkout-schedule-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}
.checkout-schedule-blocked {
  margin-top: 8px;
  color: #ffb4b4;
}


.meeting-schedule-admin { display: grid; gap: 16px; }
.meeting-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.meeting-admin-head h2 { margin: 0 0 8px !important; }
.meeting-tz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(47, 217, 168, .12);
  color: #8ef0d2;
  font-size: 11px;
  font-weight: 700;
}
.meeting-tz-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fd9a8;
}
.meeting-point-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}
.meeting-point-chip {
  appearance: none;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: inherit;
}
.meeting-point-chip b { display: block; font-size: 14px; line-height: 1.25; }
.meeting-point-chip span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  opacity: .9;
}
.meeting-point-chip.is-active {
  border-color: rgba(138, 99, 255, .7);
  background: rgba(84, 62, 175, .28);
}
.meeting-places-block { display: grid; gap: 8px; }
.meeting-places-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.meeting-places {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.meeting-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 6px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}
.meeting-place-chip b { font-weight: 700; }
.meeting-place-chip-x {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 77, 141, .14);
  color: #ffb0cb;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0;
}
.meeting-place-add {
  padding: 0 12px;
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
.meeting-day-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.meeting-day-chips::-webkit-scrollbar { display: none; }
.meeting-day-chip {
  appearance: none;
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.meeting-day-chip b { display: block; font-size: 13px; line-height: 1.2; }
.meeting-day-chip small {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  opacity: .85;
}
.meeting-day-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.meeting-day-chip.is-active small { color: rgba(255, 255, 255, .82); }
.meeting-day-add {
  min-width: 52px;
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
}
.meeting-day-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .065);
}
.meeting-day-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.meeting-day-title b,
.meeting-day-title small { display: block; }
.meeting-day-title b { font-size: 16px; line-height: 1.25; }
.meeting-day-title small {
  margin-top: 3px;
  opacity: .7;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.meeting-slot-field,
.meeting-places-label {
  text-transform: none;
  letter-spacing: 0;
}
.meeting-day-status {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.meeting-day-status.is-open {
  background: rgba(47, 217, 168, .14);
  color: #8ef0d2;
}
.meeting-day-status.is-closed {
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
}
.meeting-slot-list { display: grid; gap: 12px; }
.meeting-day-empty { margin: 0; }
.meeting-slot-card {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: visible;
}
.meeting-slot-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: end;
}
.meeting-slot-field {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  font-weight: 700;
}
.meeting-slot-place { grid-column: auto; }
.meeting-slot-remove {
  position: static !important;
  top: auto;
  right: auto;
  z-index: 1;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  flex: 0 0 44px;
  background: rgba(255, 77, 141, .16) !important;
  border-color: transparent !important;
  color: #ffb0cb !important;
}
.meeting-slot-card .meeting-time-wrap,
.meeting-slot-card select {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
.meeting-time-face {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  color: inherit;
  pointer-events: none;
}
.meeting-time-face.is-empty { color: rgba(255, 255, 255, .45); }
.meeting-slot-card .meeting-time-wrap input[type="time"] {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: inherit;
  opacity: 0;
  background: transparent !important;
  color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}
.meeting-day-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.meeting-add-slot-btn { border-style: dashed; }
.meeting-remove-day-btn {
  color: #ffb0cb;
  border-color: rgba(255, 77, 141, .28);
  background: rgba(255, 77, 141, .08);
  white-space: nowrap;
  width: 100%;
}
.meeting-place-chip b {
  max-width: 58vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}




/* ===== Telegram Mini Apps 2.0: полноэкранный режим (safe-area) ===== */
/* Подход эталонного бота: единая переменная — максимум из env(),
   CSS-переменных Telegram и значений, синхронизированных из JS API
   (safeAreaInset / contentSafeAreaInset). */
:root {
  --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--js-tg-safe-top, 0px), var(--js-tg-content-safe-top, 0px));
  --app-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px), var(--js-tg-safe-right, 0px), var(--js-tg-content-safe-right, 0px));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--js-tg-safe-bottom, 0px), var(--js-tg-content-safe-bottom, 0px));
  --app-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px), var(--js-tg-safe-left, 0px), var(--js-tg-content-safe-left, 0px));
}

/* Пока JS не прислал точные insets, верхний отступ покрывает плавающие
   кнопки Telegram фолбэк-значением по платформе. При отказе от fullscreen
   класс снимается, и фолбэк исчезает. */
html.tg-fullscreen-requested {
  --app-safe-top: max(var(--tg-controls-fallback-top, 88px), env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--js-tg-safe-top, 0px), var(--js-tg-content-safe-top, 0px));
}

@media (orientation: landscape) and (max-height: 600px) {
  html.tg-fullscreen-requested { --tg-controls-fallback-top: 56px !important; }
}

/* Отступы тела переносим на контейнер: единый источник safe-area. */
body { padding: 0 !important; }

.app-shell {
  padding-top: calc(12px + var(--app-safe-top)) !important;
  padding-left: calc(12px + var(--app-safe-left)) !important;
  padding-right: calc(12px + var(--app-safe-right)) !important;
  padding-bottom: calc(116px + var(--app-safe-bottom)) !important;
}

/* Липкая шапка остаётся ниже плавающих кнопок Telegram. */
.topbar { top: var(--app-safe-top) !important; }

/* Нижняя навигация — над домашним индикатором. */
.bottom-bar { bottom: calc(12px + var(--app-safe-bottom)) !important; }

@media (max-width: 980px) {
  .bottom-bar {
    left: calc(12px + var(--app-safe-left)) !important;
    right: calc(12px + var(--app-safe-right)) !important;
    width: auto !important;
  }
}

/* Полноэкранные оверлеи учитывают безопасную область. */
.variant-modal-overlay,
.image-lightbox-overlay,
.pickup-conflict-overlay {
  padding-top: calc(12px + var(--app-safe-top)) !important;
  padding-bottom: calc(12px + var(--app-safe-bottom)) !important;
  padding-left: calc(12px + var(--app-safe-left)) !important;
  padding-right: calc(12px + var(--app-safe-right)) !important;
}

.image-lightbox-close {
  top: calc(16px + var(--app-safe-top)) !important;
  right: calc(16px + var(--app-safe-right)) !important;
}

.network-activity { top: calc(var(--app-safe-top) + 10px) !important; }

.network-notice { bottom: calc(14px + var(--app-safe-bottom)) !important; }


/* ===== Жёстко прибитые панели (по образцу эталонного бота ForeverLab) ===== */
/* Страница целиком не прокручивается: фиксированный body полностью гасит
   резиновый overscroll Telegram WebView, который выдёргивал нижнюю панель
   при сильном потягивании вниз. Прокручивается только контент в #app. */
html, body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body {
  position: fixed !important;
  inset: 0 !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  /* touch-action намеренно не задан: none на body глушил бы вложенный
     скролл в части WebView; жесты управляются контейнером #app (pan-y). */
}

/* Единственный скролл-контейнер приложения. Селектор с ID добавлен,
   чтобы это правило всегда побеждало старые правила для #app. */
#app.app-shell,
.app-shell {
  height: 100dvh !important;
  height: var(--app-viewport-height, 100dvh) !important;
  max-height: var(--app-viewport-height, 100dvh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

/* ===== FIX TOPBAR: верхняя панель — плашка вокруг контента, закреплённая наверху =====
   Шапка — sticky внутри единственного скролл-контейнера #app. Отступ безопасной
   зоны Telegram задан ОДИН раз — через sticky-offset top: он смещает плашку вниз
   при открытии и удерживает её ровно на том же месте при скролле (статическая
   позиция шапки — 0, у контейнера нет верхнего padding). Тёмный фон НЕ тянется
   вверх: padding-top шапки обычный, а полоса под кнопками Telegram прозрачная —
   сквозь неё виден фон приложения. Селектор с #app перекрывает старые правила
   .topbar (top: 10px/6px/var(--app-safe-top), z-index 8/100). */
#app.app-shell {
  padding-top: 0 !important;
  /* Фокус на инпутах и переходы к якорям не подставляют элементы под плашку. */
  scroll-padding-top: calc(110px + var(--app-safe-top));
}
#app .topbar {
  position: sticky !important;
  top: calc(8px + var(--app-safe-top)) !important;
  z-index: 40 !important;
  margin-top: 0 !important;
  /* Резервируем в потоке место, равное визуальному смещению sticky-плашки
     (8px + safe-area): иначе следующий за плашкой контент (профиль, hero,
     заголовки разделов) начинается от y=0 и оказывается ПОД ней. Визуальный
     зазор между плашкой и контентом остаётся прежним (~22px). */
  margin-bottom: calc(30px + var(--app-safe-top)) !important;
  padding-top: 10px !important;
  border-radius: 28px !important;
}
/* Экран без шапки (вход из браузера) сохраняет верхний отступ safe-area. */
#app .browser-auth-gate {
  padding-top: calc(12px + var(--app-safe-top)) !important;
}
@media (max-width: 380px) {
  #app .topbar { border-radius: 20px !important; }
}

/* ===== LIQUID GLASS TABBAR (стиль iOS 26) =====
   Плавающая стеклянная капсула: полупрозрачный градиент, сильный blur+saturate,
   светлая кромка сверху, спекулярный блик (::before), акцентное свечение под
   капсулой (::after) и скользящая стеклянная пилюля активного раздела
   (.nav-indicator двигается через --nav-index, выставляется в renderBottomBarHtml). */
#bottomMount .bottom-bar.customer-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 8px !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05) 42%, rgba(12,12,18,.34)) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.22), 0 18px 44px rgba(0,0,0,.42) !important;
}
/* Спекулярный блик по верхней кромке капсулы. */
#bottomMount .bottom-bar.customer-bottom-nav::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  pointer-events: none;
}
/* Акцентное свечение под капсулой (ambient glow). */
#bottomMount .bottom-bar.customer-bottom-nav::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -16px;
  height: 26px;
  border-radius: 50%;
  background: var(--app-accent, #543eaf);
  opacity: .26;
  filter: blur(26px);
  pointer-events: none;
  z-index: -1;
}
/* Скользящая стеклянная пилюля активного раздела. */
#bottomMount .customer-bottom-nav .nav-indicator {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc((100% - 16px - 16px) / 5);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 20px rgba(0,0,0,.28);
  transform: translateX(calc(var(--nav-index, 0) * (100% + 4px)));
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 0;
}
#bottomMount .customer-bottom-nav[data-no-active] .nav-indicator { opacity: 0; }
/* Кнопки поверх пилюли: активная — только акцентный цвет, заливку даёт пилюля. */
#bottomMount .customer-bottom-nav .nav-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 24px !important;
  min-height: 58px !important;
  color: var(--app-muted, #a89fb8) !important;
}
#bottomMount .customer-bottom-nav .nav-btn.is-active,
#bottomMount .customer-bottom-nav .nav-btn[aria-current="page"] {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--app-accent-text, #c7b4ff) !important;
}
#bottomMount .customer-bottom-nav .nav-btn.is-active .nav-ic { color: inherit !important; }
#bottomMount .customer-bottom-nav .nav-btn.is-active .nav-label { font-weight: 750 !important; animation: none !important; }
#bottomMount .customer-bottom-nav .nav-btn .nav-ic svg { width: 22px !important; height: 22px !important; }
#bottomMount .customer-bottom-nav .nav-btn .nav-label { font-size: 11px !important; line-height: 14px !important; letter-spacing: -.01em !important; }
/* Светлая тема: стекло светлое, блики белые. */
html[data-color-scheme="light"] #bottomMount .bottom-bar.customer-bottom-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42) 45%, rgba(244,242,248,.38)) !important;
  border-color: rgba(255,255,255,.65) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05), 0 16px 40px rgba(31,24,48,.18) !important;
}
html[data-color-scheme="light"] #bottomMount .customer-bottom-nav .nav-indicator {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 6px 16px rgba(31,24,48,.14), inset 0 1px 0 #fff;
}
/* Слабые устройства и reduced motion: легче blur, без анимации пилюли и свечения. */
html.low-power #bottomMount .bottom-bar.customer-bottom-nav,
html.reduce-motion #bottomMount .bottom-bar.customer-bottom-nav {
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}
html.low-power #bottomMount .bottom-bar.customer-bottom-nav::after { display: none; }
html.low-power #bottomMount .customer-bottom-nav .nav-indicator,
html.reduce-motion #bottomMount .customer-bottom-nav .nav-indicator { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #bottomMount .customer-bottom-nav .nav-indicator { transition: none !important; }
}
/* Узкие экраны: геометрия пилюли под padding 6px / gap 3px. */
@media (max-width: 380px) {
  #bottomMount .bottom-bar.customer-bottom-nav { border-radius: 26px !important; }
  #bottomMount .customer-bottom-nav .nav-indicator {
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px - 12px) / 5);
    transform: translateX(calc(var(--nav-index, 0) * (100% + 3px)));
  }
}

/* ===== TABBAR EDIT MODE (iOS): долгое нажатие → jiggle, drag-to-reorder =====
   Покачивание идёт по внутренним элементам (.nav-ic/.nav-label), а не по самой
   кнопке: её transform занят перетаскиванием и FLIP-перестановкой соседей. */
#bottomMount .customer-bottom-nav .nav-btn {
  -webkit-touch-callout: none !important;
}
#bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-ic,
#bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-label {
  animation: tabWiggle 0.28s ease-in-out infinite alternate;
}
#bottomMount .customer-bottom-nav.is-editing .nav-btn:nth-child(2n) > .nav-ic,
#bottomMount .customer-bottom-nav.is-editing .nav-btn:nth-child(2n) > .nav-label {
  animation-delay: -0.14s;
}
#bottomMount .customer-bottom-nav.is-editing .nav-btn:nth-child(3n) > .nav-ic,
#bottomMount .customer-bottom-nav.is-editing .nav-btn:nth-child(3n) > .nav-label {
  animation-duration: 0.34s;
}
@keyframes tabWiggle {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}
/* Перетаскиваемая вкладка: без покачивания, приподнята, с усиленной тенью. */
#bottomMount .customer-bottom-nav .nav-btn.is-dragging {
  animation: none !important;
  z-index: 6 !important;
  cursor: grabbing;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}
#bottomMount .customer-bottom-nav .nav-btn.is-dragging > .nav-ic,
#bottomMount .customer-bottom-nav .nav-btn.is-dragging > .nav-label {
  animation: none !important;
}
/* В режиме редактирования пилюля-индикатор прячется. */
#bottomMount .customer-bottom-nav.is-editing .nav-indicator { opacity: 0 !important; }
/* Скрытый live-регион для объявлений режима редактирования. */
#bottomMount .customer-bottom-nav .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Reduced motion / слабые устройства: без покачивания, drag работает мгновенно. */
html.low-power #bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-ic,
html.low-power #bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-label,
html.reduce-motion #bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-ic,
html.reduce-motion #bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-label {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-ic,
  #bottomMount .customer-bottom-nav.is-editing .nav-btn > .nav-label { animation: none !important; }
}

/* ===== TABBAR DRAG: обход глобальных !important-правил =====
   Инлайн-стили проигрывают button:active { transform: ... !important } и
   transition !important на button/.nav-btn, поэтому transform перетаскивания
   и FLIP-перестановки идут через CSS-переменные (--drag-tx / --flip-dx)
   в правилах с высокой специфичностью. */
#bottomMount .customer-bottom-nav .nav-btn.is-dragging {
  transform: var(--drag-tx, none) !important;
  transition: none !important;
  touch-action: none !important;
}
#bottomMount .customer-bottom-nav .nav-btn.is-dragging .nav-ic {
  transform: none !important;
}
#bottomMount .customer-bottom-nav .nav-btn.is-flip-instant {
  transform: var(--flip-dx, none) !important;
  transition: none !important;
}
#bottomMount .customer-bottom-nav .nav-btn.is-flip-spring {
  transition: transform 340ms cubic-bezier(.32, 1.2, .4, 1) !important;
}


/* ===== COMPACT LIQUID GLASS TOPBAR ===== */
#app .topbar {
  position: sticky !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 62px !important;
  height: auto !important;
  top: calc(8px + var(--app-safe-top)) !important;
  margin-top: 0 !important;
  margin-bottom: calc(16px + var(--app-safe-top)) !important;
  padding: 8px 8px 8px 10px !important;
  padding-top: 8px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 48%, rgba(12,12,18,.34)) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 28px rgba(0,0,0,.28) !important;
  overflow: visible !important;
  z-index: 80 !important;
}
#app .topbar::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 18px !important;
  right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent) !important;
  pointer-events: none !important;
}
#app .topbar::after { display: none !important; }
#app .topbar .brand {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
}
#app .topbar .logo {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#app .topbar .brand-title {
  min-width: 0 !important;
  display: grid !important;
  align-items: center !important;
}
#app .topbar .brand-title h1 {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#app .topbar .brand-title p { display: none !important; }
#app .topbar .top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
#app .topbar .top-action-btn,
#app .topbar .back-chip {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #f4f0fa !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}
#app .topbar .top-action-btn svg {
  width: 18px !important;
  height: 18px !important;
}
#app .topbar .cart-top-btn {
  width: auto !important;
  min-width: 42px !important;
  max-width: none !important;
  padding: 0 10px 0 8px !important;
  gap: 5px !important;
  background: rgba(255,255,255,.12) !important;
  color: var(--app-accent-text, #c7b4ff) !important;
  border-color: rgba(255,255,255,.18) !important;
}
#app .topbar .cart-top-btn [data-cart-count] {
  min-width: 1ch !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#app .topbar .top-action-btn > span:not([data-cart-count]):not([data-music-user-icon]),
#app .topbar .music-user-toggle > [data-music-user-label] {
  display: none !important;
}
html[data-color-scheme="light"] #app .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46)) !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(31,24,48,.12) !important;
}
html[data-color-scheme="light"] #app .topbar .top-action-btn,
html[data-color-scheme="light"] #app .topbar .back-chip {
  background: rgba(255,255,255,.7) !important;
  color: #2c2c2b !important;
}
@media (max-width: 380px) {
  #app .topbar {
    min-height: 58px !important;
    padding: 6px 6px 6px 8px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
  }
  #app .topbar .logo,
  #app .topbar .top-action-btn,
  #app .topbar .back-chip {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
  #app .topbar .cart-top-btn {
    width: auto !important;
    max-width: none !important;
    min-width: 38px !important;
  }
  #app .topbar .brand-title h1 { font-size: 15px !important; }
}

/* ===== iOS 26 TAB SYSTEM: живые страницы едут за пальцем, chrome закреплён ===== */
#app.app-shell { position: relative !important; }
#app.has-tab-pager.app-shell,
#app.has-tab-pager {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 0 !important;
}
#app.has-tab-pager > .topbar {
  position: sticky !important;
  top: calc(8px + var(--app-safe-top)) !important;
  margin-top: calc(8px + var(--app-safe-top)) !important;
  margin-bottom: 12px !important;
  z-index: 80 !important;
}
#app.has-tab-pager > .ios-tab-pager {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}
#app.has-tab-pager .ios-tab-live {
  display: block;
  min-height: 0;
}
html.is-tab-scrubbing { cursor: grabbing; }
html.is-tab-scrubbing #app.has-tab-pager > .topbar {
  visibility: visible !important;
  pointer-events: none !important;
}
.ios-tab-pager {
  position: relative !important;
  overflow: hidden !important;
}
.ios-tab-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  height: auto !important;
  width: 100% !important;
  transform: translate3d(calc(var(--pager-index, 0) * -100%), 0, 0) !important;
  backface-visibility: hidden;
}
.ios-tab-pager.is-live .ios-tab-track {
  transition: none !important;
  will-change: transform;
}
.ios-tab-pager.is-settling .ios-tab-track {
  will-change: transform;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}
.ios-tab-pager:not(.is-live):not(.is-settling) .ios-tab-track {
  will-change: auto;
  transform: none !important;
}
.ios-tab-pane {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.ios-tab-pager:not(.is-live):not(.is-settling) .ios-tab-pane:not(.is-active) {
  display: none !important;
}
.ios-tab-pager:not(.is-live):not(.is-settling) .ios-tab-pane.is-active {
  display: block !important;
  position: relative !important;
  flex: none !important;
  width: 100% !important;
  transform: none !important;
}
.ios-tab-pane > .ios-tab-snapshot,
.ios-tab-pane > .ios-tab-placeholder {
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  backface-visibility: hidden;
}
.ios-tab-pager.is-settling .ios-tab-pane > * {
  transition: none !important;
}
.ios-tab-placeholder {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(12,12,18,.22)) !important;
  border-radius: 22px !important;
}
.ios-tab-placeholder::after {
  content: "";
  display: block;
  width: 42%;
  height: 14px;
  margin: 28px auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

#bottomMount .bottom-bar.customer-bottom-nav,
#bottomMount .customer-bottom-nav,
#bottomMount .customer-bottom-nav .nav-btn {
  touch-action: none !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}
#bottomMount .customer-bottom-nav.is-scrubbing {
  transform: none !important;
}
#bottomMount .customer-bottom-nav.is-scrubbing .nav-btn:active,
#bottomMount .customer-bottom-nav.is-scrubbing .nav-btn.is-pressed {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
#bottomMount .customer-bottom-nav .nav-indicator {
  transform:
    translateX(calc(var(--nav-index, 0) * (100% + 4px)))
    scale(var(--nav-pill-sx, 1), var(--nav-pill-sy, 1)) !important;
  transform-origin: center center !important;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(0,0,0,.32), 0 0 0 0.5px rgba(255,255,255,.18) !important;
  transition: transform 320ms cubic-bezier(.22, 1.18, .28, 1), opacity 160ms ease !important;
  will-change: transform;
}
#bottomMount .customer-bottom-nav.is-scrubbing .nav-indicator { transition: none !important; }
#bottomMount .customer-bottom-nav .nav-btn .nav-ic {
  transition: transform 220ms cubic-bezier(.22, 1.18, .28, 1), color 160ms ease !important;
}
#bottomMount .customer-bottom-nav .nav-btn.is-active .nav-ic,
#bottomMount .customer-bottom-nav .nav-btn[aria-current="page"] .nav-ic {
  animation: iosTabIconPop 0.36s cubic-bezier(.22, 1.18, .28, 1) both !important;
}
#bottomMount .customer-bottom-nav.is-scrubbing .nav-btn.is-active .nav-ic {
  animation: none !important;
  transform: scale(1.08) !important;
}
@keyframes iosTabIconPop {
  0% { transform: scale(.9); }
  58% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (max-width: 380px) {
  #bottomMount .customer-bottom-nav .nav-indicator {
    transform:
      translateX(calc(var(--nav-index, 0) * (100% + 3px)))
      scale(var(--nav-pill-sx, 1), var(--nav-pill-sy, 1)) !important;
  }
  .ios-tab-pane { padding: 0 var(--ios-pager-pad-x, 10px) 96px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ios-tab-pager.is-settling .ios-tab-track,
  #bottomMount .customer-bottom-nav .nav-indicator {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== iOS 26 motion: везде, но только compositor-свойства ===== */
:root {
  --ios26-spring: cubic-bezier(.22, 1.18, .28, 1);
  --ios26-fast: 180ms;
  --ios26-base: 320ms;
}
html.is-tab-scrubbing .blur-bg,
html.is-tab-scrubbing .blob,
html.is-tab-scrubbing .particles-bg,
html.is-tab-scrubbing .blur-bg::before,
html.is-tab-scrubbing .blur-bg::after {
  animation-play-state: paused !important;
}
html.is-tab-scrubbing #bottomMount .bottom-bar.customer-bottom-nav,
html.is-tab-scrubbing #app .topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chip,
.product-card,
.reviews-feed-card,
.customer-order-card,
.bonus-hero,
.profile-premium-hero,
.panel {
  transition:
    transform var(--ios26-fast) var(--ios26-spring),
    opacity var(--ios26-fast) ease !important;
}
.chip:active,
.product-card:active,
.reviews-feed-card:active,
.customer-order-card:active {
  transform: scale(0.98) !important;
}
.primary-btn:active,
.ghost-btn:active,
.buy-btn:active,
.top-action-btn:active,
.back-chip:active {
  transform: scale(0.94) !important;
}
.variant-modal,
.daily-builder-modal {
  transition: transform var(--ios26-base) var(--ios26-spring), opacity var(--ios26-fast) ease;
}
html.low-power .ios-tab-pager.is-settling .ios-tab-track,
html.reduce-motion .ios-tab-pager.is-settling .ios-tab-track {
  transition: none !important;
}
html.low-power #app .topbar,
html.low-power #bottomMount .bottom-bar.customer-bottom-nav {
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}


/* ===== MOTION SILK: soft, expensive-feeling, compositor-only ===== */
.hero h2,
.daily-art,
.daily-art img,
.price,
.hero::after,
.daily::after,
.premium-profile-hero::after,
.checkout-premium::after {
  animation: none !important;
}
.products-grid.stagger-cards .product-card,
[data-cart-item].stagger-in,
.customer-order-card.stagger-in,
.bonus-history-row.stagger-in,
.admin-tab-content.anim-in,
.admin-tab-content.anim-in .admin-row,
.chip.anim-select,
.nav-ic.anim-pop,
.cart-item.cart-item-updated,
.inline-qty.cart-control-swap,
.primary-btn.success-flash,
.cart-badge.badge-pop,
[data-cart-badge].badge-pop,
.cart-btn.cart-pulse,
.cart-top-btn.cart-pulse {
  animation: none !important;
}
.cart-flight-item {
  display: none !important;
  animation: none !important;
  transition: none !important;
}
:root {
  --ms-silk: cubic-bezier(.16, 1, .3, 1);
  --ms-fast: 180ms;
  --ms-base: 320ms;
}
@keyframes msSilkIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes msSilkBack {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes msSilkPulse {
  0% { transform: scale(1); }
  42% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes msSilkPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes msSilkToastIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes msSilkToastOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, 8px, 0); }
}
@keyframes msSilkSheet {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes msSilkOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes msSilkOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes msSilkNav {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes msSilkChip {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes msSilkKick {
  0% { transform: scale(1); }
  35% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes msSilkPane {
  from { opacity: 0.001; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.ms-cart-pulse { animation: msSilkPulse 320ms var(--ms-silk) both; }
.ms-badge-pop { animation: msSilkPop 300ms var(--ms-silk) both; }
.ms-nav-pop { animation: msSilkNav 240ms var(--ms-silk) both; }
.ms-chip-snap { animation: msSilkChip 260ms var(--ms-silk) both; }
.ms-btn-kick { animation: msSilkKick 260ms var(--ms-silk) both; }
.ms-pane-enter { animation: msSilkPane 300ms var(--ms-silk) both; }
.toast.ms-toast-in { animation: msSilkToastIn 240ms var(--ms-silk) both; }
.toast.ms-toast-out { animation: msSilkToastOut 240ms ease both; }
#app.ms-page-enter > *:not(#bottomMount):not(.topbar):not(.ios-tab-pager):not(.bottom-bar) {
  animation: msSilkIn var(--ms-base) var(--ms-silk) both;
}
#app.ms-page-enter-back > *:not(#bottomMount):not(.topbar):not(.ios-tab-pager):not(.bottom-bar) {
  animation: msSilkBack var(--ms-base) var(--ms-silk) both;
}
.variant-modal-overlay,
.modal,
.age-modal {
  animation: msSilkOverlay 180ms ease both;
}
.variant-modal,
.daily-builder-modal,
.age-modal > .age-box,
.age-modal > .card {
  animation: msSilkSheet 320ms var(--ms-silk) both;
}
.variant-modal-overlay.is-closing {
  animation: msSilkOverlayOut 160ms ease both;
}
button,
[role="button"],
.choice,
.chip,
.admin-tab,
.nav-btn,
.buy-btn,
.primary-btn,
.ghost-btn,
.pill-btn,
.icon-btn,
.back-chip,
.top-action-btn,
.product-card {
  transition:
    transform 160ms var(--ms-silk),
    opacity 160ms ease !important;
  filter: none !important;
}
button:active,
button.is-pressed,
[role="button"]:active,
.choice:active,
.chip:active,
.admin-tab:active,
.nav-btn:active,
.buy-btn:active,
.primary-btn:active,
.ghost-btn:active,
.back-chip:active,
.top-action-btn:active,
.product-card:active,
.reviews-feed-card:active,
.customer-order-card:active {
  transform: scale(0.97) !important;
  filter: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .primary-btn:hover:not(:disabled),
  .buy-btn:hover:not(:disabled),
  .cart-btn:hover:not(:disabled),
  .product-card:hover,
  .chip:hover:not(.active) {
    transform: none !important;
    filter: none !important;
  }
}
@media (pointer: coarse) {
  .blur-bg::before,
  .blur-bg::after,
  .blob,
  .particles-bg {
    animation: none !important;
  }
}
#bottomMount .customer-bottom-nav .nav-indicator {
  transition: transform 280ms var(--ms-silk) !important;
}
@media (prefers-reduced-motion: reduce) {
  .ms-cart-pulse,
  .ms-badge-pop,
  .ms-nav-pop,
  .ms-chip-snap,
  .ms-btn-kick,
  .ms-pane-enter,
  .toast.ms-toast-in,
  .toast.ms-toast-out,
  #app.ms-page-enter > *,
  #app.ms-page-enter-back > *,
  .variant-modal-overlay,
  .variant-modal,
  .modal,
  .age-modal {
    animation: none !important;
  }
  button:active,
  .chip:active,
  .product-card:active {
    transform: none !important;
  }
}

/* ===== TAB SCRUB: compositor-only, no layout of 5 full pages ===== */
.ios-tab-pager.is-live,
.ios-tab-pager.is-settling {
  overflow: hidden !important;
  contain: strict;
}
.ios-tab-pager.is-live .ios-tab-track,
.ios-tab-pager.is-settling .ios-tab-track {
  height: 100% !important;
  will-change: transform;
  contain: layout style;
}
.ios-tab-pager.is-live .ios-tab-pane,
.ios-tab-pager.is-settling .ios-tab-pane {
  height: 100% !important;
  overflow: hidden !important;
  contain: strict;
  content-visibility: auto;
}
.ios-tab-pager.is-live .ios-tab-live,
.ios-tab-pager.is-settling .ios-tab-live {
  height: 100% !important;
  overflow: hidden !important;
  contain: strict;
  pointer-events: none !important;
}
html.is-tab-scrubbing .blur-bg,
html.is-tab-scrubbing .blob,
html.is-tab-scrubbing .particles-bg,
html.is-tab-scrubbing .blur-bg::before,
html.is-tab-scrubbing .blur-bg::after {
  visibility: hidden !important;
  animation: none !important;
}
html.is-tab-scrubbing .ios-tab-track {
  transition: none !important;
}
.ios-tab-pager.is-settling .ios-tab-track {
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

/* ===== LIGHT BG: static purple-gray gradient, no blur blobs ===== */
html,
body {
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(108, 86, 168, 0.34) 0%, transparent 54%),
    radial-gradient(90% 70% at 108% 8%, rgba(92, 92, 102, 0.32) 0%, transparent 50%),
    linear-gradient(180deg, #2c2834 0%, #1d1c22 46%, #16151b 100%) !important;
}
.blur-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  isolation: auto !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  background:
    radial-gradient(ellipse 90% 58% at 18% 0%, rgba(118, 92, 176, 0.30) 0%, transparent 56%),
    radial-gradient(ellipse 70% 48% at 100% 18%, rgba(110, 110, 120, 0.22) 0%, transparent 52%),
    linear-gradient(180deg, #2a2632 0%, #1c1b21 48%, #151418 100%) !important;
}
.blur-bg::before,
.blur-bg::after,
.blob,
.soft-glass,
.soft-noise,
.particles-bg,
#particles {
  display: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* ===== INSTANT TABS + VIDEO SWIPE ===== */
.ms-pane-enter {
  animation: none !important;
}
.ios-tab-pager.is-live .ios-tab-track,
.ios-tab-pager.is-settling .ios-tab-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
  transform: translate3d(calc(var(--pager-index, 0) * -100%), 0, 0) !important;
  will-change: transform;
  contain: none !important;
}
.ios-tab-pager.is-live .ios-tab-pane,
.ios-tab-pager.is-settling .ios-tab-pane {
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  content-visibility: visible !important;
  contain: none !important;
}
.ios-tab-pager.is-live .ios-tab-live,
.ios-tab-pager.is-settling .ios-tab-live {
  display: block !important;
  height: 100% !important;
  overflow: hidden !important;
  content-visibility: visible !important;
  contain: none !important;
  pointer-events: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===== TAB CLICK SLIDE: catalog -> profile is a real page slide ===== */
.ios-tab-pager.is-live,
.ios-tab-pager.is-settling {
  overflow: hidden !important;
  contain: none !important;
}
.ios-tab-pager.is-live .ios-tab-track,
.ios-tab-pager.is-settling .ios-tab-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate3d(calc(var(--pager-index, 0) * -100%), 0, 0) !important;
  will-change: transform;
  contain: none !important;
}
.ios-tab-pager.is-live .ios-tab-track {
  transition: none !important;
}
.ios-tab-pager.is-settling .ios-tab-track {
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1) !important;
}
.ios-tab-pager.is-live .ios-tab-pane,
.ios-tab-pager.is-settling .ios-tab-pane {
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  contain: none !important;
  content-visibility: visible !important;
}
.ios-tab-pager.is-live .ios-tab-live,
.ios-tab-pager.is-settling .ios-tab-live {
  display: block !important;
  height: 100% !important;
  overflow: hidden !important;
  contain: none !important;
  content-visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ===== TAB CLICK SLIDE 2: inline transform, panes stay visible ===== */
.ios-tab-pager.is-click-slide,
.ios-tab-pager.is-live,
.ios-tab-pager.is-settling {
  overflow: hidden !important;
  contain: none !important;
}
.ios-tab-pager.is-click-slide .ios-tab-pane,
.ios-tab-pager.is-live .ios-tab-pane,
.ios-tab-pager.is-settling .ios-tab-pane {
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  contain: none !important;
  content-visibility: visible !important;
}
.ios-tab-pager.is-click-slide .ios-tab-live,
.ios-tab-pager.is-live .ios-tab-live,
.ios-tab-pager.is-settling .ios-tab-live {
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
}

/* ===== CHROME FIX: taller topbar, tabbar never covered ===== */
#app.app-shell {
  padding-top: 0 !important;
  scroll-padding-top: calc(124px + var(--app-safe-top, 0px));
}
#app .topbar,
#app.has-tab-pager > .topbar {
  position: sticky !important;
  top: calc(8px + var(--app-safe-top, 0px)) !important;
  z-index: 80 !important;
  min-height: 66px !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: calc(34px + var(--app-safe-top, 0px)) !important;
  padding: 10px 10px 10px 12px !important;
  gap: 10px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  visibility: visible !important;
}
#app .topbar .logo {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
}
#app .topbar .brand-title h1 { font-size: 17px !important; }
#app .topbar .top-action-btn,
#app .topbar .back-chip {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
}
#app .topbar .cart-top-btn {
  width: auto !important;
  min-width: 44px !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
}
.bottom-bar.customer-bottom-nav,
#bottomMount .bottom-bar.customer-bottom-nav {
  position: fixed !important;
  z-index: 200 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.is-tab-scrubbing .bottom-bar.customer-bottom-nav,
html.is-tab-scrubbing #bottomMount .bottom-bar.customer-bottom-nav {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.tab-click-overlay {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 120px !important;
  z-index: 40 !important;
  pointer-events: none !important;
}
.ios-tab-pager.is-click-slide,
.ios-tab-pager.is-live,
.ios-tab-pager.is-settling {
  z-index: 1 !important;
}

/* ===== NAV PILL SLIDE + PRELOAD: interpolatable pill, no second enter ===== */
@property --nav-index {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
#bottomMount .customer-bottom-nav .nav-indicator,
.customer-bottom-nav .nav-indicator {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  width: calc((100% - 16px - 16px) / 5) !important;
  border-radius: 24px !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(180,140,255,.28) 55%, rgba(255,255,255,.16)) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px rgba(90,40,160,.35) !important;
  transform: translate3d(calc(var(--nav-index, 0) * (100% + 4px)), 0, 0) !important;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1) !important;
  will-change: transform;
}
.customer-bottom-nav .nav-btn { z-index: 2 !important; }
.ios-tab-pager.is-click-slide .product-card,
.ios-tab-pager.is-live .product-card,
.ios-tab-pager.is-settling .product-card,
.ios-tab-pager.is-click-slide .panel,
.ios-tab-pager.is-live .panel,
.ios-tab-pager.is-settling .panel,
.ios-tab-pane:not(.is-active) .product-card,
.ios-tab-pane:not(.is-active) .panel {
  animation: none !important;
  transition: none !important;
}

/* ===== SCRUB PREVIEW: keep neighbor panes visible while dragging ===== */
.ios-tab-pager.is-live .ios-tab-track,
.ios-tab-pager.is-click-slide .ios-tab-track,
.ios-tab-pager.is-settling .ios-tab-track {
  display: flex !important;
  transform: translate3d(calc(var(--pager-index, 0) * -100%), 0, 0) !important;
}
.ios-tab-pager.is-live .ios-tab-pane,
.ios-tab-pager.is-click-slide .ios-tab-pane,
.ios-tab-pager.is-settling .ios-tab-pane,
html.is-tab-scrubbing .ios-tab-pane {
  display: block !important;
  visibility: visible !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ===== SCRUB PILL FOLLOW: indicator sticks to finger, no leftover click transform ===== */
.customer-bottom-nav.is-scrubbing .nav-indicator,
html.is-tab-scrubbing .customer-bottom-nav .nav-indicator {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 3 !important;
  transition: none !important;
  transform: translate3d(calc(var(--nav-index, 0) * (100% + 4px)), 0, 0) !important;
}

/* ===== TAB APPEAR: dest tab fades in after pill drag, no cross-tab scroll ===== */
@keyframes tab-appear {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.ios-tab-live.tab-appear {
  animation: tab-appear 320ms cubic-bezier(.22, 1, .36, 1) both;
}

.pickup-consent-field{display:grid;gap:6px;margin:0 0 16px}
.pickup-consent-field span{font-size:12px;color:rgba(237,232,246,.7);font-weight:700}
.pickup-consent-field input{width:100%;min-height:46px;border:1px solid rgba(184,147,255,.28);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font-size:16px}
.pickup-card-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}


/* analog music toggle */
.music-analog {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  position: relative;
}
.music-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
  width: 16px;
}
.music-eq i {
  display: block;
  width: 2.5px;
  border-radius: 99px;
  background: currentColor;
  transform-origin: bottom center;
  animation: musicEq 0.86s ease-in-out infinite;
}
.music-eq i:nth-child(1) { height: 5px; animation-delay: 0s; }
.music-eq i:nth-child(2) { height: 12px; animation-delay: .12s; }
.music-eq i:nth-child(3) { height: 8px; animation-delay: .24s; }
.music-eq i:nth-child(4) { height: 11px; animation-delay: .08s; }
@keyframes musicEq {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}
.music-user-toggle.is-muted,
.browser-auth-music-toggle.is-muted {
  opacity: .78;
}
.music-analog-play { display: block; }
html.reduce-motion .music-eq i,
html.low-power .music-eq i {
  animation: none !important;
  transform: none !important;
}
.music-user-toggle > [data-music-user-icon],
.browser-auth-music-toggle > [data-music-user-icon] {
  font-size: inherit !important;
  line-height: 0;
}
/* ===== ANIMATED BACKGROUNDS ===== */
.bg-layer,
.cosmos-layer,
.planet-layer,
.neon-layer,
#neon-particles,
canvas.neon-particle-layer,
.particles-bg {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  touch-action: none !important;
  overflow: hidden !important;
  background: transparent !important;
}
html[data-bg="cosmos"] .cosmos-layer,
html[data-bg="planet"] .planet-layer,
html[data-bg="neon"] .neon-layer,
html[data-bg="spark"] #neon-particles,
html[data-bg="spark"] .spark-layer,
html[data-bg="spark"] .particles-bg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.cosmos-layer canvas,
.planet-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.neon-glass {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  background: radial-gradient(120% 90% at 80% -10%, rgba(196,107,255,.12), transparent 55%);
}
.neon-ray {
  position: absolute;
  top: -20%;
  height: 140%;
  width: 38vw;
  transform-origin: top center;
  filter: blur(6px);
  opacity: .55;
  mix-blend-mode: screen;
}
.neon-ray.r1 {
  left: 12%;
  transform: rotate(18deg);
  background: linear-gradient(180deg, rgba(196,107,255,.38), transparent 70%);
}
.neon-ray.r2 {
  right: 8%;
  transform: rotate(-14deg);
  background: linear-gradient(180deg, rgba(232,121,249,.32), transparent 70%);
}
.neon-beam-ring,
.neon-beam-glow {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: conic-gradient(from var(--neon-beam-a, 0deg), transparent 0deg, color-mix(in srgb, #c46bff 4%, transparent) 18deg, color-mix(in srgb, #c46bff 55%, transparent) 46deg, #e879f9 56deg, color-mix(in srgb, #e879f9 22%, #fff) 60deg, transparent 63deg, transparent 198deg, color-mix(in srgb, #fb7185 4%, transparent) 216deg, color-mix(in srgb, #fb7185 50%, transparent) 244deg, #fb7185 254deg, color-mix(in srgb, #fb7185 26%, #fff) 258deg, transparent 261deg, transparent 360deg);
}
.neon-beam-ring {
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.neon-beam-glow { filter: blur(14px); opacity: .4; }
html[data-bg="spark"] #neon-particles,
html[data-bg="spark"] .spark-layer {
  mix-blend-mode: screen !important;
  opacity: .92 !important;
}
html.is-tab-scrubbing[data-bg="cosmos"] .cosmos-layer,
html.is-tab-scrubbing[data-bg="planet"] .planet-layer,
html.is-tab-scrubbing[data-bg="neon"] .neon-layer,
html.is-tab-scrubbing[data-bg="spark"] #neon-particles {
  opacity: .55 !important;
}

.profile-bg-settings { display: grid; gap: 12px; }
.profile-bg-head h2 { margin: 4px 0 0; }
.profile-bg-note { margin: 0; line-height: 1.4; }
.profile-bg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-bg-btn {
  flex: 1 1 42%;
  min-width: 88px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #d8d1e6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.profile-bg-btn.is-active {
  border-color: rgba(196,107,255,.65);
  background: rgba(168,85,247,.22);
  color: #fff;
  box-shadow: 0 0 16px rgba(168,85,247,.22);
}

.admin-title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

/* ===== Catalog card image fills the gray frame ===== */
.product-image {
  overflow: hidden !important;
  border-radius: 12px !important;
}
.product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  display: block !important;
}
.fit-cover img,
.fit-contain img {
  object-fit: cover !important;
  padding: 0 !important;
}
@media (max-width: 560px) {
  .product-image { border-radius: 10px !important; }
}

/* ===== Catalog cards: option 2 «Полка» ===== */
.products-grid {
  gap: 10px !important;
}
.products-grid .product-card,
.products-grid .product-card.product-card--shelf {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 20px !important;
  border: 1px solid rgba(188, 158, 255, .14) !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}
.products-grid .product-card::before {
  display: none !important;
}
.products-grid .product-image {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  border-radius: 0 !important;
  background: #15121c !important;
}
.products-grid .product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}
.products-grid .product-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 6px !important;
  padding: 10px 10px 11px !important;
  height: auto !important;
}
.products-grid .product-title,
.products-grid .product-body .product-title {
  min-height: 32px !important;
  height: 2.4em !important;
  max-height: 2.4em !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.products-grid .short-note,
.products-grid .product-body .short-note {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(236, 230, 247, .62) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.products-grid .age-mark,
.products-grid .age-mark--empty,
.products-grid .product-location-list,
.products-grid .short-note--empty {
  display: none !important;
}
.products-grid .product-rating,
.products-grid .product-rating-button,
.products-grid .product-rating--shelf {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f4c550 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.products-grid .product-rating--shelf .shelf-star {
  color: #f4c550 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.products-grid .product-rating--shelf strong {
  color: #f4c550 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.products-grid .product-rating--shelf small {
  color: rgba(236, 230, 247, .62) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.products-grid .product-rating--shelf .rating-stars-meter {
  display: none !important;
}
.products-grid .buy-row,
.products-grid .product-body .buy-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}
.products-grid .price-box,
.products-grid .product-body .price-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.products-grid .price-box .price {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}
.products-grid .old-price {
  order: -1;
  color: rgba(255, 255, 255, .34) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: line-through !important;
}
.products-grid .buy-btn,
.products-grid .product-body .buy-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 62px !important;
  max-width: 46% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #8a62f0, #d255c8) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.products-grid .inline-qty,
.products-grid .product-body .inline-qty {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 96px !important;
  max-width: 52% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 3px !important;
  border-radius: 12px !important;
}
.products-grid .inline-qty button {
  height: 28px !important;
  border-radius: 9px !important;
}
.products-grid .product-image .product-badge,
.products-grid .product-image .variant-count-badge,
.products-grid .product-image .variant-cart-badge,
.products-grid .product-image .stock-badge {
  min-height: 24px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}
@media (max-width: 560px) {
  .products-grid { gap: 8px !important; }
  .products-grid .product-card { border-radius: 16px !important; }
  .products-grid .product-body { padding: 9px 9px 10px !important; }
  .products-grid .product-title,
  .products-grid .product-body .product-title { font-size: 13px !important; }
  .products-grid .buy-btn,
  .products-grid .product-body .buy-btn,
  .products-grid .inline-qty,
  .products-grid .product-body .inline-qty {
    min-height: 32px !important;
    height: 32px !important;
  }
}

/* ===== Catalog cards: flush photo + no leftover bottom gap ===== */
.products-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}
.products-grid .product-card,
.products-grid .product-card.product-card--shelf {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: auto !important;
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: none !important;
}
.products-grid .product-image {
  display: grid !important;
  place-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.products-grid .product-image img,
.products-grid .fit-cover img,
.products-grid .fit-contain img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  display: block !important;
  border-radius: 0 !important;
}
.products-grid .product-body,
.products-grid .product-card .product-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  grid-template-rows: none !important;
  min-height: 0 !important;
  height: auto !important;
}
.products-grid .product-body .buy-row,
.products-grid .product-card .buy-row {
  margin-top: 2px !important;
}
@media (max-width: 780px) {
  .products-grid .product-image {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 560px) {
  .products-grid .product-card,
  .products-grid .product-card.product-card--shelf {
    min-height: 0 !important;
  }
  .products-grid .product-image {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ===== Color gallery (A2) + flavor list (0) ===== */
.variant-modal--gallery {
  max-height: 92vh !important;
}
.variant-modal--gallery .variant-modal-topbar,
.variant-modal--gallery .variant-gallery-hero,
.variant-modal--gallery .variant-modal-footer {
  flex-shrink: 0;
}
.variant-modal--gallery .variant-modal-topbar {
  margin: 0 !important;
  padding: 12px 12px 8px !important;
}
.variant-gallery-hero {
  display: block;
  position: relative;
  width: calc(100% - 24px);
  margin: 0 12px 4px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 1 / 1;
  max-height: min(42vh, 360px);
  cursor: zoom-in;
}
.variant-gallery-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.variant-modal--gallery .variant-modal-body {
  padding-top: 8px !important;
}
.variant-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  margin: 0 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.variant-gallery-thumbs::-webkit-scrollbar { display: none; }
.variant-gallery-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.variant-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.variant-gallery-thumb.is-on {
  border-color: #c7b0ff;
  box-shadow: 0 0 0 3px rgba(155,116,242,.28);
}
.variant-gallery-name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
}
.variant-gallery-meta {
  margin: 0 0 12px;
}
.variant-gallery-qty {
  margin: 0 0 8px;
}
.variant-modal[data-variant-layout="list"] .variant-modal-img,
.variant-modal-overlay[data-variant-layout="list"] .variant-modal-img {
  display: none !important;
}
@media (max-width: 560px) {
  .variant-gallery-hero {
    max-height: min(38vh, 300px);
    border-radius: 14px;
  }
  .variant-gallery-thumb {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 11px;
  }
}

/* ===== Фон 1: фиолетовая глубина — только внутри шторки вкуса/цвета ===== */
.variant-modal-overlay[data-variant-layout],
.variant-modal-overlay[data-variant-product] {
  background: rgba(4, 3, 7, .72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.variant-modal-overlay[data-variant-layout] .variant-modal,
.variant-modal-overlay[data-variant-product] .variant-modal {
  background:
    radial-gradient(circle at 18% 8%, rgba(138, 99, 255, .38), transparent 32%),
    radial-gradient(circle at 86% 92%, rgba(210, 85, 200, .18), transparent 28%),
    #080012 !important;
  border-color: rgba(138, 99, 255, .18) !important;
}
.variant-modal-overlay[data-variant-layout] .variant-modal-footer,
.variant-modal-overlay[data-variant-product] .variant-modal-footer {
  background: rgba(8, 0, 18, .88) !important;
  border-top-color: rgba(138, 99, 255, .16) !important;
}

/* ===== Cart layout 2: receipt ===== */
.cart-page--receipt {
  padding: 16px 16px 18px !important;
}
.cart-page--receipt .section-title {
  margin-bottom: 10px !important;
}
.cart-page--receipt .cart-pickup-banner {
  margin-bottom: 8px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}
.cart-page--receipt .cart-item,
.cart-page--receipt .cart-item.cart-item-unavailable {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.cart-page--receipt .cart-item:last-of-type {
  margin-bottom: 4px !important;
}
.cart-page--receipt .cart-item .cart-thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
}
.cart-page--receipt .cart-item .cart-thumb img {
  object-fit: cover !important;
}
.cart-page--receipt .cart-info {
  gap: 5px !important;
}
.cart-page--receipt .cart-info-head h3 {
  font-size: 13.5px !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
}
.cart-page--receipt .cart-sub {
  gap: 8px !important;
  font-size: 12px !important;
}
.cart-page--receipt .cart-sub .cart-unit {
  font-weight: 650 !important;
  color: rgba(217, 204, 234, .82) !important;
}
.cart-page--receipt .cart-actions {
  margin-top: 2px !important;
}
.cart-page--receipt .cart-actions .qty {
  padding: 2px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .05) !important;
}
.cart-page--receipt .cart-actions .qty button {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}
.cart-page--receipt .cart-actions .qty strong {
  min-width: 18px !important;
  font-size: 13px !important;
}
.cart-page--receipt .cart-actions .cart-line {
  font-size: 14px !important;
}
.cart-page--receipt .cart-set-composition {
  margin: 2px 0 0 !important;
}
.cart-page--receipt .total-row {
  margin: 0 !important;
  padding: 7px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.cart-page--receipt .total-row:first-of-type {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
}
.cart-page--receipt .cart-final-row {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}
.cart-page--receipt .primary-btn.full {
  margin-top: 2px !important;
}
@media (max-width: 380px) {
  .cart-page--receipt .cart-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
  .cart-page--receipt .cart-item .cart-thumb {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ===== Фиолетовая глубина: корзина и окно точки самовывоза ===== */
.panel.cart-page,
.cart-page--receipt {
  background:
    radial-gradient(circle at 18% 8%, rgba(138, 99, 255, .38), transparent 32%),
    radial-gradient(circle at 86% 92%, rgba(210, 85, 200, .18), transparent 28%),
    #080012 !important;
  border-color: rgba(138, 99, 255, .18) !important;
}
.pickup-choice-overlay,
.pickup-conflict-overlay,
.pickup-consent-overlay {
  background: rgba(4, 3, 7, .72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.pickup-dialog {
  background:
    radial-gradient(circle at 18% 8%, rgba(138, 99, 255, .38), transparent 32%),
    radial-gradient(circle at 86% 92%, rgba(210, 85, 200, .18), transparent 28%),
    #080012 !important;
  border-color: rgba(138, 99, 255, .22) !important;
}
.pickup-point-option {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(138, 99, 255, .22) !important;
}
.pickup-point-option.is-selected {
  background: rgba(138, 99, 255, .22) !important;
  border-color: rgba(196, 164, 255, .8) !important;
}

/* ===== Catalog sort: two dropdowns (option 3) ===== */
.catalog-title { margin-bottom: 10px !important; }
.catalog-sort {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  position: relative;
  z-index: 8;
}
.catalog-drop {
  position: relative;
  flex: 1;
  min-width: 0;
}
.catalog-drop-btn {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.catalog-drop-btn span { color: #d9ccea; font-weight: 700; }
.catalog-drop-btn.is-active,
.catalog-drop.is-open .catalog-drop-btn {
  border-color: rgba(138,99,255,.5);
  background: rgba(138,99,255,.16);
}
.catalog-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(138,99,255,.28);
  background: #14101c;
  box-shadow: 0 16px 36px rgba(0,0,0,.46);
}
.catalog-menu[hidden] { display: none !important; }
.catalog-menu-item {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #d9ccea;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.catalog-menu-item.is-on {
  background: rgba(138,99,255,.22);
  color: #fff;
}
@media (max-width: 360px) {
  .catalog-drop-btn { font-size: 12px; padding: 0 8px; }
}


/* ===== Variant card buttons: 2. Лаванда ===== */
.product-card[data-variant-type="flavor"] .buy-btn,
.product-card[data-variant-type="color"] .buy-btn,
.product-card[data-variant-type="resistance"] .buy-btn,
.product-card[data-variant-type="custom"] .buy-btn {
  color: #fff !important;
  background: #a281f7 !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(162, 129, 247, .28) !important;
}
.product-card[data-variant-type="flavor"] .buy-btn:active,
.product-card[data-variant-type="color"] .buy-btn:active,
.product-card[data-variant-type="resistance"] .buy-btn:active,
.product-card[data-variant-type="custom"] .buy-btn:active {
  filter: brightness(1.06);
}


/* ===== Catalog categories: 4. Tabs with underline ===== */
nav.chips.chips--tabs,
.chips.chips--tabs {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 0 16px !important;
  padding: 4px 0 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  background: transparent !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips.chips--tabs::-webkit-scrollbar { display: none; }
.chips--tabs .chip,
.chips--tabs .chip.chip--tab,
.chips--tabs button.chip {
  flex: 1 0 auto !important;
  min-width: 84px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #b9a8d4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  position: relative !important;
  font-weight: 800 !important;
  animation: none !important;
  scroll-snap-align: start;
}
.chips--tabs .chip.active,
.chips--tabs .chip.chip--tab.active,
.chips--tabs button.chip.active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  animation: none !important;
}
.chips--tabs .chip.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #a281f7;
}
.chips--tabs .chip-emoji {
  width: 26px !important;
  height: 26px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center;
  color: inherit;
}
.chips--tabs .chip-emoji svg {
  width: 24px;
  height: 24px;
  display: block;
}
.chips--tabs .chip-img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  object-fit: cover;
}
.chips--tabs .chip-label {
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

/* ===== V60: catalog-first search layout (selected concept A1 + B1) ===== */
.catalog-title {
  margin: 22px 0 12px !important;
}
.search-shell {
  position: relative;
  margin: 0 0 10px !important;
}
.search-shell-icon {
  left: 17px !important;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #c8b6f6 !important;
  transform: translateY(-50%) !important;
}
.search-shell-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.search-shell .search-input {
  min-height: 56px !important;
  padding: 0 72px 0 50px !important;
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.search-shell .search-input:hover {
  border-color: rgba(174,145,244,.25) !important;
  background: rgba(255,255,255,.055) !important;
}
.search-shell-shortcut {
  position: absolute;
  top: 50%;
  right: 13px;
  z-index: 2;
  transform: translateY(-50%);
  padding: 4px 7px;
  border: 1px solid rgba(210,194,244,.22);
  border-radius: 7px;
  color: rgba(216,203,240,.58);
  background: rgba(255,255,255,.025);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
}
.search-shell:focus-within .search-shell-shortcut {
  border-color: rgba(185,155,255,.36);
  color: rgba(235,225,255,.78);
}
nav.chips.chips--tabs,
.chips.chips--tabs {
  margin: 0 0 16px !important;
}
@media (max-width: 520px) {
  .search-shell-shortcut { display: none; }
  .search-shell .search-input { padding-right: 18px !important; }
}

/* ===== Checkout wizard (variant 3) ===== */
.checkout-wizard-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  margin: 0 !important;
}
.checkout-wizard-step {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #9d93ab;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}
.checkout-wizard-step:disabled {
  opacity: .42;
  cursor: default;
}
.checkout-wizard-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #9d93ab;
  font-size: 12px;
  font-weight: 800;
}
.checkout-wizard-step.is-current {
  color: #d7cbff;
  font-weight: 750;
}
.checkout-wizard-step.is-current .checkout-wizard-dot {
  border-color: transparent;
  background: linear-gradient(145deg, #8665e5, #5c42ae);
  color: #fff;
  box-shadow: 0 8px 18px rgba(90, 55, 190, .28);
}
.checkout-wizard-step.is-done .checkout-wizard-dot {
  border-color: rgba(109, 88, 160, .7);
  background: #2a2340;
  color: #d7cbff;
}
.checkout-wizard-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.checkout-wizard-nav .checkout-submit-premium,
.checkout-wizard-nav .checkout-back-premium {
  min-height: 48px;
  justify-content: center;
}
.checkout-wizard-hint {
  display: block;
  text-align: center;
  color: rgba(255,255,255,.38) !important;
  font-size: 10px !important;
}
.checkout-wizard .checkout-stage-head { display: none !important; }
@media (max-width: 420px) {
  .checkout-wizard-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Meeting summary + payment dock ===== */
.checkout-slot-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(125, 103, 164, .7);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(36, 24, 51, .9), rgba(21, 16, 29, .95));
}
.checkout-slot-summary.is-ready {
  border-style: solid;
  border-color: rgba(155, 128, 246, .42);
}
.checkout-slot-summary-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #c9baff;
  background: rgba(139, 108, 246, .14);
}
.checkout-slot-summary b,
.checkout-slot-summary small { display: block; }
.checkout-slot-summary b { font-size: 15px; letter-spacing: -.02em; }
.checkout-slot-summary small { margin-top: 3px; color: #c9b6ff; font-size: 12px; line-height: 1.35; }
.checkout-wizard .checkout-schedule-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}
.checkout-wizard .checkout-schedule-place {
  grid-column: 1 / -1 !important;
}
.checkout-pay-dock {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(118, 93, 176, .55);
  border-radius: 16px;
  background: linear-gradient(135deg, #3a285b, #21182e);
  box-shadow: 0 10px 28px rgba(61, 40, 110, .28);
}
.checkout-pay-dock .payment-summary {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.checkout-pay-dock .checkout-submit-premium {
  margin: 0 !important;
}
@media (max-width: 420px) {
  .checkout-wizard .checkout-schedule-compact {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ===== Profile member card (variant 3) ===== */
.profile-member-page { gap: 12px !important; }
.profile-member-pass {
  padding: 16px !important;
  border: 1px solid rgba(155, 128, 246, .28) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 108, 246, .2), transparent 42%),
    linear-gradient(145deg, #1a1426, #100e18) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.profile-member-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.profile-member-page .profile-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(192, 175, 255, .5);
  background: linear-gradient(145deg, #8b6cf6, #4a328d);
  box-shadow: 0 12px 28px rgba(92, 61, 190, .28);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
}
.profile-member-page .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-member-page .profile-identity { display: grid; gap: 3px; }
.profile-member-page .profile-identity h2 { margin: 0 !important; font-size: 22px !important; letter-spacing: -.04em; }
.profile-member-sub { margin: 0; color: rgba(255, 255, 255, .58); font-size: 12px; }
.profile-member-page .profile-meta { gap: 6px; margin-top: 4px; }
.profile-member-page .premium-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.profile-member-page .premium-profile-stats article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: 62px !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .05) !important;
  text-align: center !important;
  box-shadow: none !important;
}
.profile-member-page .premium-profile-stats span { font-size: 10px !important; color: rgba(255, 255, 255, .5) !important; }
.profile-member-page .premium-profile-stats strong { font-size: 14px !important; margin: 0 !important; }
.profile-member-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile-member-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.profile-member-mode strong { font-size: 22px; letter-spacing: -.04em; color: #c9b7ff; }
.profile-member-mode b, .profile-member-mode small { display: block; }
.profile-member-mode small { margin-top: 2px; color: rgba(255, 255, 255, .5); font-size: 11px; }
.profile-member-mode.is-active {
  border-color: rgba(73, 204, 135, .32);
  background: linear-gradient(145deg, rgba(81, 184, 132, .16), rgba(139, 108, 246, .08));
}
.profile-member-mode.is-active strong { color: #9eebc4; }
.profile-member-page .reward-mode-note {
  margin: 0 !important;
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  line-height: 1.4;
}
.profile-member-page .profile-reviews-section,
.profile-member-page .profile-bg-settings {
  padding: 14px !important;
  border-radius: 16px !important;
}
.profile-member-page .profile-bg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.profile-member-page .profile-bg-btn {
  min-height: 40px;
  border-radius: 12px;
}
@media (max-width: 420px) {
  .profile-member-benefits { grid-template-columns: 1fr; }
  .profile-member-page .premium-profile-stats strong { font-size: 12px !important; }
}

/* ===== Profile reviews entry ===== */
.profile-entry-list {
  display: grid;
  gap: 8px;
}
.profile-entry-btn,
.profile-reviews-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
}
.profile-entry-btn > span:first-child,
.profile-reviews-entry > span:first-child { margin-right: auto; }
.profile-entry-btn::after,
.profile-reviews-entry::after {
  content: "›";
  color: rgba(255, 255, 255, .35);
  font-size: 22px;
  line-height: 1;
}
.profile-entry-value {
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
  font-weight: 650;
  margin-right: 2px;
}
.profile-inner-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: #8764ed;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.profile-entry-btn .profile-inner-tab-count,
.profile-reviews-entry .profile-inner-tab-count { margin-right: 2px; }
.profile-inner-tab-count[hidden] { display: none !important; }
.profile-tab-pane { display: grid; gap: 12px; }
.profile-tab-pane[hidden] { display: none !important; }

/* ===== Reviews giant score (variant 1) ===== */
.reviews-score-page { display: grid; gap: 14px; }
.reviews-score-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 18px 22px;
  border: 1px solid rgba(247, 201, 72, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(247, 201, 72, .22), transparent 42%),
    linear-gradient(160deg, #2a1b08, #120e16);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 246, 200, .12);
}
.reviews-score-refresh {
  position: absolute !important;
  top: 12px;
  right: 12px;
}
.reviews-score-stars .rating-stars-meter {
  width: auto !important;
  height: 22px !important;
  flex: none !important;
  gap: 3px !important;
  justify-content: center;
}
.reviews-score-stars .rating-star-cell {
  width: 18px !important;
  height: 22px !important;
  flex-basis: 18px !important;
  font-size: 18px !important;
  line-height: 22px !important;
  color: rgba(255, 246, 200, .28);
}
.reviews-score-number {
  font-size: clamp(64px, 18vw, 84px);
  line-height: .85;
  letter-spacing: -.06em;
  font-weight: 900;
  background: linear-gradient(180deg, #fff6c8, #f7c948);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.reviews-score-caption {
  margin: 2px 0 0;
  color: #f3e2b0;
  font-size: 13px;
  line-height: 1.35;
}
.reviews-score-list { display: grid; gap: 10px; }
.reviews-score-page .reviews-feed-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
}
.reviews-score-page .reviews-feed-comment {
  color: #ece6f4;
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .reviews-score-hero { padding: 24px 14px 18px; }
  .reviews-score-number { font-size: 64px; }
}

/* ===== Orders tab: counter + huge status (variant 1) ===== */
.orders-premium-page { display: grid; gap: 14px; }
.orders-premium-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 18px 22px;
  border: 1px solid rgba(155, 128, 246, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 108, 246, .22), transparent 42%),
    linear-gradient(145deg, #1a1426, #100e18);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.orders-premium-refresh { position: absolute !important; top: 12px; right: 12px; }
.orders-premium-eyebrow {
  color: #c9b6ff !important;
  letter-spacing: .18em !important;
}
.orders-premium-count {
  font-size: clamp(64px, 18vw, 84px);
  line-height: .85;
  letter-spacing: -.06em;
  font-weight: 900;
  background: linear-gradient(180deg, #f4edff, #c9b7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.orders-premium-caption {
  margin: 2px 0 0;
  color: #c9b6ff;
  font-size: 13px;
  line-height: 1.35;
}
.orders-premium-page .my-orders-list { display: grid; gap: 12px; }
.orders-premium-page .customer-order-card--premium {
  display: grid;
  gap: 12px;
  padding: 16px !important;
  border: 1px solid rgba(155, 128, 246, .22) !important;
  border-left-width: 1px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 108, 246, .12), transparent 36%),
    linear-gradient(145deg, rgba(26, 20, 38, .98), rgba(16, 14, 24, .98)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.customer-order-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.orders-premium-page .customer-status {
  max-width: none;
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(139, 108, 246, .14);
  border-color: rgba(155, 128, 246, .33);
  color: #d7cbff;
}
.orders-premium-page .status-badge-packing,
.orders-premium-page .status-badge-done,
.orders-premium-page .status-badge-paid {
  background: rgba(53, 174, 111, .14);
  border-color: rgba(73, 204, 135, .24);
  color: #9eebc4;
}
.customer-order-status-title {
  margin: 0 !important;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1;
  letter-spacing: -.045em;
}
.orders-premium-page .order-purchase-date { margin: 0; color: rgba(255, 255, 255, .48); font-size: 12px; }
.customer-order-comment {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
}
.orders-premium-page .customer-order-items {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.orders-premium-page .customer-order-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  color: #d8d0e4;
  font-size: 13px;
}
.orders-premium-page .customer-order-dock {
  margin: 8px 0 0;
}
.orders-premium-page .customer-order-dock .summary-total {
  color: #c9b7ff;
}
.orders-premium-page .status-timeline {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
.orders-premium-page .customer-order-actions { display: grid; gap: 8px; }
.orders-premium-page .customer-order-card.status-done .customer-order-status-title { color: #9eebc4; }
.orders-premium-page .customer-order-card.status-cancelled .customer-order-status-title,
.orders-premium-page .customer-order-card.status-declined .customer-order-status-title { color: #ff9baa; }
.orders-premium-page .customer-order-card.status-packing .customer-order-status-title,
.orders-premium-page .customer-order-card.status-active .customer-order-status-title { color: #c9b7ff; }
@media (max-width: 480px) {
  .orders-premium-hero { padding: 24px 14px 18px; }
  .orders-premium-count { font-size: 64px; }
  .customer-order-status-title { font-size: 28px; }
}


.profile-music-picker { display: grid; gap: 10px; }
.profile-music-list { display: grid; gap: 8px; }
.profile-music-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: inherit;
  text-align: left;
}
.profile-music-item small { opacity: .7; }
.profile-music-item.is-active {
  border-color: rgba(185,157,255,.55);
  background: rgba(76,54,139,.35);
}
.music-admin-list { display: grid; gap: 8px; }
.music-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.music-admin-row small { display: block; opacity: .7; margin-top: 4px; }
.music-admin-row.is-inactive { opacity: .62; }
.music-admin-row .mini-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Shipment tracking ===== */
.shipments-entry-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: min(100%, 380px);
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(112, 229, 201, .2);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(57, 211, 177, .11), rgba(124, 92, 238, .12));
  color: #f6f2ff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.shipments-entry-btn > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.shipments-entry-btn b { font-size: 14px; }
.shipments-entry-btn small { color: rgba(255, 255, 255, .55); font-size: 11px; }
.shipments-entry-btn > strong,
.shipments-entry-btn > i {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #d7cbff;
  font-size: 12px;
  font-style: normal;
}
.shipments-entry-icon { font-size: 22px; }

.shipments-customer-page { display: grid; gap: 14px; }
.shipments-customer-head {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 18px 2px 4px;
}
.shipments-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 9px;
}
.shipments-back-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  color: #f4eeff;
  font-size: 20px;
}
.shipments-customer-head .section-eyebrow {
  color: rgba(255, 255, 255, .55);
  letter-spacing: .15em;
}
.shipments-customer-head h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 8vw, 38px);
  line-height: 1;
  letter-spacing: -.04em;
}
.shipments-customer-head p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}
.shipments-customer-list,
.shipment-admin-list { display: grid; gap: 12px; }

.shipment-customer-card {
  overflow: hidden;
  border: 1px solid rgba(155, 128, 246, .24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 92, 238, .16), transparent 43%),
    linear-gradient(145deg, rgba(27, 20, 40, .98), rgba(16, 12, 24, .98));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.shipment-customer-card.is-admin-hidden-preview {
  border-color: rgba(255, 184, 91, .34);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 184, 91, .08);
}
.shipment-customer-card > summary { list-style: none; }
.shipment-customer-card > summary::-webkit-details-marker { display: none; }
.shipment-card-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px 42px 16px 16px;
  cursor: pointer;
}
.shipment-card-summary::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 15px;
  color: rgba(255, 255, 255, .48);
  font-size: 18px;
  transform: translateY(-50%);
  transition: transform .22s ease;
}
.shipment-customer-card[open] .shipment-card-summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.shipment-card-summary > div { display: grid; gap: 4px; min-width: 0; }
.shipment-card-summary > div > strong {
  overflow: hidden;
  color: #f6f2ff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipment-card-summary small {
  overflow: hidden;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipment-admin-preview-label {
  display: inline-flex;
  width: fit-content;
  margin-top: 3px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 184, 91, .24);
  border-radius: 999px;
  background: rgba(255, 172, 63, .1);
  color: #ffd18f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.shipment-code {
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shipment-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(80, 230, 196, .18);
  border-radius: 999px;
  background: rgba(54, 211, 178, .13);
  color: #8df0d7;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.shipment-tone-delayed .shipment-status-badge {
  border-color: rgba(255, 184, 91, .25);
  background: rgba(255, 172, 63, .13);
  color: #ffd18f;
}
.shipment-tone-arrived .shipment-status-badge {
  border-color: rgba(83, 226, 159, .25);
  background: rgba(54, 205, 132, .13);
  color: #a3f0c8;
}
.shipment-tone-cancelled .shipment-status-badge {
  border-color: rgba(255, 109, 139, .25);
  background: rgba(255, 92, 127, .13);
  color: #ffb1c2;
}
.shipment-tone-planned .shipment-status-badge {
  border-color: rgba(170, 148, 255, .25);
  background: rgba(137, 104, 241, .14);
  color: #d5c9ff;
}
.shipment-card-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.shipment-route-scroll {
  overflow-x: auto;
  padding: 3px 0 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 117, 247, .35) transparent;
}
.shipment-route {
  --shipment-edge: calc(50% / var(--shipment-stop-count));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--shipment-stop-count), minmax(56px, 1fr));
  min-width: max(100%, calc(var(--shipment-stop-count) * 60px));
  padding-top: 1px;
}
.shipment-route-base,
.shipment-route-progress {
  position: absolute;
  top: 10px;
  left: var(--shipment-edge);
  right: var(--shipment-edge);
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
}
.shipment-route-base { background: rgba(255, 255, 255, .17); }
.shipment-route-progress {
  background: linear-gradient(90deg, #49dcb9, #5ee0c1);
  transform: scaleX(var(--shipment-progress-scale));
  transform-origin: left center;
}
.shipment-stop {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
}
.shipment-stop-dot {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: #17131f;
  box-shadow: 0 0 0 4px rgba(12, 8, 18, .9);
}
.shipment-stop b {
  width: 100%;
  min-height: 24px;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.shipment-stop small { color: rgba(255, 255, 255, .34); font-size: 9px; }
.shipment-stop.is-complete .shipment-stop-dot {
  border-color: #4adbbb;
  background: #4adbbb;
  box-shadow: 0 0 0 4px rgba(73, 219, 187, .13);
}
.shipment-stop.is-complete b { color: #f5f2fb; }
.shipment-stop.is-current .shipment-stop-dot {
  border-color: #8b6bf5;
  background: #7c5ced;
  box-shadow: 0 0 0 5px rgba(124, 92, 237, .24);
}
.shipment-stop.is-current b { color: #fff; }
.shipment-tone-delayed .shipment-stop.is-current .shipment-stop-dot {
  border-color: #ffb14e;
  background: #ff9f2f;
  box-shadow: 0 0 0 5px rgba(255, 159, 47, .2);
}
.shipment-tone-cancelled .shipment-route-progress { background: #ff688d; }
.shipment-current-copy {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 4px 0 0;
  text-align: center;
}
.shipment-current-copy strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}
.shipment-current-copy span { color: rgba(255, 255, 255, .57); font-size: 12px; }
.shipment-public-note {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  line-height: 1.45;
}
.shipment-eta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .52);
  font-size: 11px;
}
.shipment-eta b { color: #d7cbff; font-size: 12px; }
.shipment-empty { padding: 34px 18px !important; }

/* Shipment admin */
.shipment-admin-form .section-title,
.shipment-route-form .section-title { align-items: flex-start; }
.shipment-admin-form .field small,
.shipment-route-form .field small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .45);
  font-size: 10px;
}
/* Form controls have an intrinsic minimum width in some Telegram WebViews,
   especially input[type="date"]. Let every shipment grid item actually shrink
   to its column instead of pushing the form beyond the right edge. */
.shipment-route-library,
.shipment-route-form,
.shipment-route-template-panel,
.shipment-admin-form,
.shipment-route-editor,
.shipment-stop-editor-list,
.shipment-schedule-list,
.shipment-stop-editor-row,
.shipment-schedule-row,
.shipment-admin-form .two-col,
.shipment-route-form .two-col,
.shipment-admin-form .field,
.shipment-route-form .field {
  min-width: 0;
  max-width: 100%;
}
.shipment-admin-form .field > input,
.shipment-admin-form .field > select,
.shipment-admin-form .field > textarea,
.shipment-route-form .field > input,
.shipment-route-form .field > select,
.shipment-route-form .field > textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.shipment-route-library {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 14px;
  align-items: start;
}
.shipment-route-library:not(.is-form-open) {
  grid-template-columns: minmax(0, 1fr);
}
.shipment-route-panel-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.shipment-route-add-btn {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(162, 129, 247, .34);
  border-radius: 11px;
  background: rgba(126, 91, 225, .14);
  color: #d9ceff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.shipment-route-add-btn:hover,
.shipment-route-add-btn:focus-visible {
  border-color: rgba(184, 151, 255, .65);
  background: rgba(126, 91, 225, .24);
  outline: none;
}
.shipment-route-add-btn:active { transform: scale(.94); }
.shipment-route-form,
.shipment-route-template-panel { display: grid; gap: 12px; }
.shipment-route-template-list { display: grid; gap: 9px; }
.shipment-route-template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(154, 126, 244, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}
.shipment-route-template-card > div:first-child { display: grid; gap: 4px; min-width: 0; }
.shipment-route-template-card h3 { margin: 0; color: #f5f0ff; font-size: 15px; }
.shipment-route-template-card p {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipment-visible-choice {
  align-self: end;
  min-height: 48px;
  margin: 0;
}
.shipment-route-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(156, 128, 246, .17);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}
.shipment-route-editor .section-title { margin: 0; }
.shipment-route-editor h3,
.shipment-route-editor p { margin: 0; }
.shipment-stop-editor-list { display: grid; gap: 9px; }
.shipment-stop-editor-row {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1fr) minmax(135px, .65fr) auto;
  align-items: end;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
}
.shipment-route-stop-editor-row {
  grid-template-columns: 30px minmax(150px, 1fr) auto;
}
.shipment-stop-order {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(123, 92, 237, .22);
  color: #d9ceff;
  font-size: 12px;
  font-weight: 900;
}
.shipment-stop-editor-row .field { margin: 0; }
.shipment-stop-editor-row .field > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .52);
  font-size: 10px;
  font-weight: 750;
}
.shipment-stop-editor-actions {
  display: flex;
  gap: 5px;
  padding-bottom: 4px;
}
.shipment-stop-editor-actions button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: #ded6e9;
}
.shipment-stop-editor-actions button:last-child { color: #ff9cb0; }
.shipment-stop-editor-actions button:disabled { opacity: .28; }
.shipment-route-select-field select { width: 100%; }
.shipment-schedule-list { display: grid; gap: 9px; }
.shipment-schedule-row {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1fr) minmax(150px, .65fr);
  align-items: end;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
}
.shipment-schedule-row .shipment-stop-order { margin-bottom: 10px; }
.shipment-schedule-city {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-bottom: 10px;
}
.shipment-schedule-city small {
  color: rgba(255, 255, 255, .45);
  font-size: 10px;
}
.shipment-schedule-city b {
  overflow: hidden;
  color: #f5f0ff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipment-schedule-row .field { margin: 0; }
.shipment-schedule-row .field > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .52);
  font-size: 10px;
  font-weight: 750;
}
.shipment-schedule-row .field > .shipment-date-input-wrap {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  color: inherit;
  font: inherit;
}
.shipment-date-input-wrap:focus-within {
  border-color: rgba(159, 126, 247, .52);
  box-shadow: 0 0 0 4px rgba(118, 87, 216, .12);
}
.shipment-date-input-wrap > input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  box-sizing: border-box !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 13px 14px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.shipment-date-input-wrap > input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}
.shipment-admin-list-panel { display: grid; gap: 12px; }
.shipment-admin-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(154, 126, 244, .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 92, 237, .11), transparent 40%),
    rgba(255, 255, 255, .025);
}
.shipment-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.shipment-admin-card-head > div { display: grid; gap: 3px; min-width: 0; }
.shipment-admin-card h3 {
  margin: 0;
  overflow: hidden;
  color: #f7f3ff;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipment-admin-route {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 5px;
  color: rgba(255, 255, 255, .39);
  font-size: 11px;
  white-space: nowrap;
}
.shipment-admin-route span {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}
.shipment-admin-route span.is-complete {
  border-color: rgba(74, 219, 187, .2);
  color: #8eeed9;
}
.shipment-admin-route span.is-current {
  border-color: rgba(139, 107, 245, .34);
  background: rgba(124, 92, 237, .15);
  color: #d8cdff;
}
.shipment-admin-route i { opacity: .35; font-style: normal; }
.shipment-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: rgba(255, 255, 255, .54);
  font-size: 11px;
}
.shipment-admin-meta span {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}
.shipment-admin-meta b { color: rgba(255, 255, 255, .82); }
.shipment-admin-note {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  line-height: 1.45;
}
.shipment-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.shipment-admin-actions button { min-height: 38px; padding: 9px 12px; }

@media (max-width: 700px) {
  .shipment-route-library { grid-template-columns: 1fr; }
  .shipment-stop-editor-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: end;
  }
  .shipment-stop-date { grid-column: 2 / 3; }
  .shipment-stop-editor-actions {
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-self: center;
    padding: 0;
  }
  .shipment-stop-order { align-self: center; margin: 0; }
  .shipment-schedule-row {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
  }
  .shipment-schedule-row .shipment-stop-order { grid-row: 1 / span 2; margin: 0; }
  .shipment-schedule-city { padding: 0; }
  .shipment-schedule-row .shipment-stop-date { grid-column: 2 / 3; }
}
@media (max-width: 480px) {
  .shipments-entry-btn { padding: 11px 12px; }
  .shipment-card-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .shipment-current-copy strong { font-size: 17px; }
  .shipment-admin-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .shipment-admin-actions .primary-btn { grid-column: 1 / -1; }
}

/* Keep the customer variant sheet below the sticky application header.
   Telegram safe-area clears native controls, but not the in-app topbar. */
.variant-modal-overlay[data-variant-product] {
  padding-top: calc(var(--app-safe-top, 0px) + 90px) !important;
}
.variant-modal-overlay[data-variant-product] > .variant-modal {
  max-height: calc(
    var(--app-viewport-height, 100dvh)
    - var(--app-safe-top, 0px)
    - var(--app-safe-bottom, 0px)
    - 102px
  ) !important;
}

/* Shipment admin: strict mobile alignment for iOS and Android WebViews. */
.shipment-admin-form .field,
.shipment-route-form .field {
  width: 100%;
  justify-self: stretch;
}
.shipment-admin-form .field > input,
.shipment-admin-form .field > select,
.shipment-admin-form .field > textarea,
.shipment-route-form .field > input,
.shipment-route-form .field > select,
.shipment-route-form .field > textarea {
  display: block;
  margin: 0;
}
.shipment-admin-form .field > input[type="date"],
.shipment-route-form .field > input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}
.shipment-admin-form .field > input[type="date"]::-webkit-date-and-time-value,
.shipment-route-form .field > input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

@media (max-width: 700px) {
  .shipment-route-form,
  .shipment-route-template-panel,
  .shipment-admin-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .shipment-admin-form .two-col,
  .shipment-route-form .two-col {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .shipment-admin-form .field > input:not([type="checkbox"]),
  .shipment-admin-form .field > select,
  .shipment-route-form .field > input:not([type="checkbox"]),
  .shipment-route-form .field > select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px;
  }
  .shipment-admin-form .field > textarea,
  .shipment-route-form .field > textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .shipment-route-stop-editor-row {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    align-items: center !important;
  }
  .shipment-route-stop-editor-row .shipment-stop-order {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  .shipment-route-stop-editor-row .shipment-stop-editor-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    flex-direction: row;
    padding: 0;
  }
  .shipment-route-stop-editor-row .shipment-stop-city {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .shipment-schedule-row {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    align-items: center !important;
  }
  .shipment-schedule-row .shipment-stop-order {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  .shipment-schedule-row .shipment-schedule-city {
    grid-column: 2;
    grid-row: 1;
  }
  .shipment-schedule-row .shipment-stop-date {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ===== V113: edge-to-edge browser viewport, web-only navigation and notices ===== */
html.web-browser,
html.web-browser body {
  width: 100% !important;
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(108, 86, 168, .34) 0%, transparent 54%),
    radial-gradient(90% 70% at 108% 8%, rgba(92, 92, 102, .32) 0%, transparent 50%),
    linear-gradient(180deg, #2c2834 0%, #1d1c22 46%, #16151b 100%) fixed !important;
}
html.web-browser {
  /* 100lvh reaches behind retractable Safari/Chrome toolbars; the JS value
     remains a fallback for old WebKit and embedded browsers. */
  --browser-full-height: max(var(--app-viewport-height, 100dvh), 100vh);
  height: var(--browser-full-height) !important;
  min-height: var(--browser-full-height) !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
@supports (height: 100lvh) {
  html.web-browser {
    --browser-full-height: max(var(--app-viewport-height, 100dvh), 100lvh);
  }
}
html.web-browser::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: -96px;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(108, 86, 168, .34) 0%, transparent 54%),
    radial-gradient(90% 70% at 108% 8%, rgba(92, 92, 102, .32) 0%, transparent 50%),
    linear-gradient(180deg, #2c2834 0%, #1d1c22 46%, #16151b 100%);
}
html.web-browser body {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  height: var(--browser-full-height) !important;
  min-height: var(--browser-full-height) !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html.web-browser .blur-bg {
  top: 0 !important;
  right: 0 !important;
  bottom: -96px !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(var(--browser-full-height) + 96px) !important;
  z-index: 0 !important;
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(108, 86, 168, .34) 0%, transparent 54%),
    radial-gradient(90% 70% at 108% 8%, rgba(92, 92, 102, .32) 0%, transparent 50%),
    linear-gradient(180deg, #2c2834 0%, #1d1c22 46%, #16151b 100%) !important;
}
html.web-browser #app.app-shell {
  position: relative !important;
  height: var(--browser-full-height) !important;
  min-height: var(--browser-full-height) !important;
  max-height: var(--browser-full-height) !important;
  padding-bottom: calc(116px + max(env(safe-area-inset-bottom, 0px), 12px)) !important;
  background: transparent !important;
  z-index: 2 !important;
}
html.web-browser #bottomMount .bottom-bar.customer-bottom-nav {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

.web-smart-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 72px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-weight: 800;
}
.web-smart-back span { font-size: 28px; line-height: 1; margin-top: -2px; }
.web-smart-back b { font-size: 12px; }
.web-window-exit {
  position: absolute;
  z-index: 10060;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(19,16,25,.88);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.36);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-weight: 850;
}
.web-window-exit span { font-size: 21px; line-height: 1; }
.web-window-exit b { font-size: 12px; }
html.web-browser .variant-modal-overlay,
html.web-browser .image-lightbox-overlay,
html.web-browser .user-settings-dialog,
html.web-browser .ban-dialog,
html.web-browser .assembled-photo-dialog,
html.web-browser .assembled-photo-success-dialog {
  padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

.inline-window-notice {
  position: static !important;
  display: block;
  margin: 0 14px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 199, 92, .34);
  border-radius: 13px;
  background: rgba(116, 76, 18, .22);
  color: #ffe2a8;
  box-shadow: none;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
  text-align: center;
  animation: inlineNoticeIn 180ms ease both;
}
.inline-window-notice.is-leaving { animation: inlineNoticeOut 180ms ease both; }
.pickup-dialog > .inline-window-notice { margin: 0 0 14px; }
@keyframes inlineNoticeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes inlineNoticeOut { to { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 430px) {
  .web-smart-back { min-width: 44px; width: 44px; padding: 0; }
  .web-smart-back b { display: none; }
  .web-window-exit { min-width: 42px; width: 42px; padding: 0; }
  .web-window-exit b { display: none; }
}

/* ===== PERF: переключение вкладок =====
   Во время слайда по клику видимы только исходная и целевая вкладки.
   Остальные панели не отрисовываются (раньше все 5 панелей ~2200 элементов
   пересчитывались синхронно на каждом нажатии). */
.ios-tab-pager.is-click-slide .ios-tab-pane:not(.is-active) {
  content-visibility: hidden;
  contain: layout paint style;
}

/* ===== PERF: облегчённый режим для слабых устройств (html.low-power) =====
   Включается из static/app.js (MilfPerf): мало памяти/ядер, экономия трафика
   или низкий реальный FPS. Ручное управление: ?perf=lite / ?perf=full / ?perf=auto.
   :not(#_) повышает специфичность, чтобы перебить старые правила с #id и !important. */
html.low-power:not(#_):not(#_):not(#_) *,
html.low-power:not(#_):not(#_):not(#_) *::before,
html.low-power:not(#_):not(#_):not(#_) *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Без размытия полупрозрачные панели нужно сделать плотнее, чтобы текст читался. */
html.low-power:not(#_):not(#_):not(#_) :is(.topbar, .bottom-bar, .customer-bottom-nav) {
  background: rgba(20, 17, 30, .96) !important;
}
html.low-power:not(#_):not(#_):not(#_) :is(.toast, .network-activity, .network-notice, .startup-data-loader__card) {
  background-color: rgba(22, 19, 32, .97) !important;
}
html.low-power:not(#_):not(#_):not(#_) :is(.modal, .age-modal, .ban-modal, .variant-modal-overlay, .pickup-choice-overlay, .startup-data-loader) {
  background-color: rgba(6, 5, 10, .88) !important;
}
/* Декоративные бесконечные анимации и огромные blur-слои фона — выключаем. */
html.low-power:not(#_):not(#_):not(#_) :is(.blur-bg, .blob, .soft-glass, .soft-noise, .neon-layer, .hero-glow, .hero h2, .music-eq i, .analytics-bar-row i),
html.low-power:not(#_):not(#_):not(#_) :is(.blur-bg, .hero, .daily, .empty, .analytics-bar-row i, .bottom-bar)::before,
html.low-power:not(#_):not(#_):not(#_) :is(.blur-bg, .hero, .daily, .empty, .analytics-bar-row i, .bottom-bar)::after {
  animation: none !important;
  will-change: auto !important;
}
html.low-power:not(#_):not(#_):not(#_) .blur-bg,
html.low-power:not(#_):not(#_):not(#_) .neon-layer :is(.neon-ray, .neon-beam-glow, .neon-beam-ring) {
  display: none !important;
}
html.low-power:not(#_):not(#_):not(#_) .hero-glow {
  filter: none !important;
}
/* Неактивные вкладки и карточки вне экрана не отрисовываются. */
html.low-power:not(#_):not(#_):not(#_) .product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}

/* ===== PERF: лента отзывов ===== */
.reviews-feed-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}
.reviews-feed-more-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 6px;
}
.reviews-feed-more-wrap .reviews-feed-more {
  min-width: 220px;
}

/* ===== PERF: переключатель облегчённого режима в профиле ===== */
.profile-perf-settings { margin-top: 12px; }
.profile-bg-grid.profile-perf-grid,
.profile-member-page .profile-bg-grid.profile-perf-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}
.profile-perf-grid .profile-bg-btn { flex: initial; min-width: 0; }

/* СДЭК: трек-номер поставки (Ship24) */
.shipment-tracking-box {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(74, 219, 187, .16);
  border-radius: 12px;
  background: rgba(74, 219, 187, .05);
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  line-height: 1.4;
}
.shipment-tracking-box.is-warning {
  border-color: rgba(255, 184, 77, .3);
  background: rgba(255, 184, 77, .07);
}
.shipment-tracking-box.is-final {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}
.shipment-tracking-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  color: rgba(255, 255, 255, .7);
}
.shipment-tracking-line code {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: #f7f3ff;
  font-size: 12px;
  word-break: break-all;
}
.shipment-tracking-line b { color: #8eeed9; font-weight: 700; }
.shipment-tracking-box.is-warning .shipment-tracking-line b { color: #ffc977; }
.shipment-tracking-box.is-final .shipment-tracking-line b { color: rgba(255, 255, 255, .82); }
.shipment-tracking-box p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
}
.shipment-tracking-box small { color: rgba(255, 255, 255, .42); font-size: 11px; }
.shipment-tracking-error { color: #ffc977; font-size: 11px; }
.shipment-track-field .shipment-tracking-box { margin-top: 6px; }

/* ========================================================================== */
/* V114 — исправления вёрстки (мобильные экраны 320–430px)                    */
/* ========================================================================== */

/* 2. Приветствие — одна аккуратная строка вместо крупного текста в 2 строки */
html:not(#_) .hello.card {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html:not(#_) .hello.card > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html:not(#_) .hello-dot { flex: 0 0 auto; }

/* 3. Карточки товаров: цена и кнопка всегда на одной линии в ряду */
html:not(#_) .products-grid { align-items: stretch !important; }
html:not(#_) .product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
html:not(#_) .product-card .product-body {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
}
html:not(#_) .product-card .product-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.5em;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}
html:not(#_) .product-card .buy-row { margin-top: auto !important; padding-top: 10px; }
html:not(#_) .product-card .price-box {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 4. Рейтинг без отзывов: вместо «★ 0.0 0 отзывов» — «Нет отзывов» */
html:not(#_) .product-rating--empty .shelf-star { opacity: .35; }
html:not(#_) .product-rating--empty small { color: rgba(255,255,255,.45) !important; }

/* 5. Лента категорий: обрезанная справа кнопка плавно затухает, видно что лента прокручивается */
html:not(#_) .chips.chips--tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  scroll-padding-inline: 12px;
  padding-right: 24px !important;
  scrollbar-width: none;
}
html:not(#_) .chips.chips--tabs::-webkit-scrollbar { display: none; }

/* V115 — аватарки Telegram в профиле и отзывах */
.avatar-with-fallback { position: relative; overflow: hidden; }
.avatar-with-fallback > i { font-style: normal; }
.avatar-with-fallback > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
}
.profile-avatar-inner {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: inherit;
}
html:not(#_) .profile-avatar .profile-avatar-inner > img { width: 100%; height: 100%; }
.review-author-line { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.review-author-line > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-mini-avatar {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(84,62,175,.4);
  color: #fff; font-size: 12px; font-weight: 700;
}

/* V116 — «Все данные аккаунта» в карточке пользователя */
.ud-box { grid-column: 1 / -1; margin-bottom: 12px; }
.ud-wrap { display: grid; gap: 8px; min-width: 0; }
.ud-section { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); overflow: hidden; }
.ud-section > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; list-style: none; }
.ud-section > summary::-webkit-details-marker { display: none; }
.ud-section > summary::after { content: '›'; float: right; transition: transform .2s; }
.ud-section[open] > summary::after { transform: rotate(90deg); }
.ud-body { padding: 0 12px 12px; min-width: 0; }
.ud-list { margin: 0; display: grid; gap: 6px; }
.ud-list > div { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 8px; font-size: 13px; }
.ud-list dt { opacity: .65; }
.ud-list dd { margin: 0; overflow-wrap: anywhere; }
.ud-order { border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0; }
.ud-order > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; }
.ud-order > summary small { opacity: .6; margin-left: auto; }
.ud-items, .ud-plain { margin: 6px 0; padding-left: 18px; font-size: 13px; display: grid; gap: 6px; overflow-wrap: anywhere; }
.ud-plain small, .ud-items small { opacity: .65; }
@media (max-width: 420px) { .ud-list > div { grid-template-columns: 1fr; gap: 2px; } }



/* Редактирование заказа администратором */
.admin-edit-order-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.05) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease !important;
}
.admin-edit-order-btn:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.16) !important; }
.admin-edit-order-btn:active { transform: scale(.985); }
.admin-edit-order-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 12px;
  background: rgba(139,92,246,.18);
  font-size: 16px;
}
.admin-edit-order-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-edit-order-text b { font-size: 14px; line-height: 1.3; color: #fff; }
.admin-edit-order-text small { margin-top: 2px; font-size: 12px; color: var(--muted, #aaa); }
.admin-edit-order-arrow { font-size: 22px; line-height: 1; color: var(--muted, #aaa); }
.order-money b .order-manual-total {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(139,92,246,.2);
  color: #d8c8ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  vertical-align: 2px;
}
.order-edit-search { margin: 0 0 6px !important; }
.order-edit-search .search-input { width: 100%; }
.order-edit-total-field { margin: 0 !important; }
.order-edit-total-field input { width: 100%; font-size: 16px !important; }
.order-edit-total-hint { display: block; margin-top: 8px; color: var(--color-text-muted, #aaa); font-size: 12px; line-height: 1.45; }
.order-edit-total-hint b { color: #fff; }
.order-edit-history {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.order-edit-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
}
.order-edit-history > summary::-webkit-details-marker { display: none; }
.order-edit-history > summary::after { content: "›"; font-size: 18px; color: var(--muted, #aaa); transition: transform .16s ease; }
.order-edit-history[open] > summary::after { transform: rotate(90deg); }
.order-edit-history > summary > span:first-child { flex: 1; }
.order-edit-history-count {
  min-width: 22px; padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 11px; text-align: center;
}
.order-edit-history-list { padding: 0 14px 6px; }
.order-edit-history-row { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.order-edit-history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.order-edit-history-head b { min-width: 0; overflow-wrap: anywhere; }
.order-edit-history-head small { color: var(--color-text-muted, #aaa); white-space: nowrap; font-size: 11px; }
.order-edit-history-row ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted, #ccc); }
.order-edit-body .variant-modal-topbar { margin-bottom: 16px !important; }
.order-edit-total-field input::-webkit-outer-spin-button,
.order-edit-total-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.order-edit-total-field input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* v121: username requirement — плашка сверху каталога и проверка при оформлении */
.username-notice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 212, 106, .34);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 193, 74, .16), rgba(21, 17, 28, .86));
  box-shadow: 0 14px 42px rgba(0, 0, 0, .24);
  overflow: hidden;
}
.username-notice::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(#ffd46a, #ff9f4d);
}
.username-notice-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 212, 106, .3);
  border-radius: 13px;
  background: rgba(255, 212, 106, .12);
  font-size: 20px;
}
.username-notice-copy { display: grid; gap: 4px; min-width: 0; text-align: left; }
.username-notice-copy b { color: #ffd46a; font-size: 14px; letter-spacing: -.01em; }
.username-notice-copy p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.username-notice-copy p b { color: #fff; font-weight: 800; }
.username-notice-refresh { white-space: nowrap; font-size: 12px; padding: 0 14px; }
.username-notice.is-inline {
  margin: 12px 0 2px;
  border-radius: 15px;
  padding: 13px 15px;
}
.username-notice .field-error { grid-column: 1 / -1; color: #ffb35c; margin: 0; }
.username-notice.has-error { border-color: rgba(255, 130, 90, .48); }
@media (max-width: 520px) {
  .username-notice { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 13px 14px; }
  .username-notice-refresh { grid-column: 1 / -1; justify-self: start; }
}