/* ════════════════════════════════════════════════════════════════
   BodyLab — Fresh design system
   Healthy green primary (#059669) + accent orange (#EA580C)
════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --primary:        #059669;
  --primary-hover:  #047857;
  --primary-soft:   #D1FADF;
  --on-primary:     #FFFFFF;

  --accent:         #EA580C;
  --accent-hover:   #C2410C;
  --on-accent:      #FFFFFF;

  /* ── Surfaces ── */
  --bg:             #FFFFFF;
  --surface:        #ECFDF5;     /* mint — hero, chips, sections */
  --surface-2:      #F0F8F6;     /* slightly cooler mint */
  --card:           #FFFFFF;

  /* ── Text ── */
  --fg:             #0F172A;
  --fg-muted:       #64748B;
  --fg-soft:        #94A3B8;

  /* ── Borders & dividers ── */
  --border:         #E5EFEB;
  --border-strong:  #D1DBD6;

  /* ── Semantic ── */
  --success:        #10B981;
  --success-bg:     #ECFDF5;
  --warning:        #B45309;
  --warning-bg:     #FEF3C7;
  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --info:           #2563EB;
  --info-bg:        #EFF6FF;

  /* ── Aliases (back-compat) ── */
  --dark:           var(--fg);
  --white:          #FFFFFF;
  --warm:           var(--primary);  /* was beige, now green */

  /* ── Radii ── */
  --r-xs:           6px;
  --r-sm:           10px;
  --r-md:           12px;
  --r-lg:           16px;
  --r-xl:           20px;
  --r-pill:         9999px;

  --radius-card:    var(--r-lg);
  --radius-chip:    var(--r-sm);

  /* ── Elevation (light, modern) ── */
  --shadow-xs:      0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:      0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
  --shadow:         0 2px 4px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .05);
  --shadow-lg:      0 4px 8px rgba(15, 23, 42, .04), 0 12px 28px rgba(15, 23, 42, .08);

  /* ── Motion ── */
  --ease-out:       cubic-bezier(.2, .8, .2, 1);
  --ease-in:        cubic-bezier(.4, 0, 1, 1);
  --ease-in-out:    cubic-bezier(.4, 0, .2, 1);
  --t-fast:         150ms;
  --t-base:         200ms;
  --t-slow:         300ms;

  /* ── Layout ── */
  --tabbar-h:       64px;
  --topbar-h:       56px;
  --content-max:    600px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  overscroll-behavior-y: none;
  padding-top: var(--topbar-h);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03';
}

body.mb-active #tabbar { display: none; }
body.mb-active { padding-bottom: env(safe-area-inset-bottom, 0px); }

h1, h2, h3, h4 {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; touch-action: manipulation; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ── Icons ── */
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════════
   Topbar
════════════════════════════════════════════════════════════════ */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  /* Three-column grid — side columns are EQUAL (1fr each), middle is auto-sized
     to the logo's natural width. This pins the logo at the absolute centre of
     the topbar regardless of how long the city name on the left becomes. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 0;
  height: 100%;
  padding: 4px 0;
  /* Suppress any browser/Telegram tap or hover affordance — the logo is just
     a homepage shortcut, not an "interactive" element from the user's POV. */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.logo:hover,
.logo:focus,
.logo:active { background: transparent; outline: none; text-decoration: none; }
.logo #logo-img {
  /* Fixed visual size — logo no longer reacts to neighbours. */
  height: 30px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* City picker — left side of the topbar. Compact so the centered logo gets
   as much horizontal room as possible. */
.city-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  max-width: 100%;
  padding: 0 8px;
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  justify-self: start;
  overflow: hidden;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.city-btn:active { background: var(--primary-soft); transform: scale(.96); }
.city-btn .icon { color: var(--primary); flex-shrink: 0; }
.city-btn #city-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;       /* "Екатеринб…" still readable, "Краснодар" fits whole */
}

/* Cart sits on the right cell of the grid. */
#cart-btn { justify-self: end; }
#logo-text {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--fg);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Icon-only cart button — count appears as a small badge in the top-right
   corner. Keeping it compact lets the centered logo claim more topbar width. */
.cart-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--primary);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.cart-icon-btn:active { transform: scale(.94); background: var(--primary-soft); }
.cart-icon-btn .icon { color: var(--primary); }
.cart-icon-btn #cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--accent, var(--primary));
  color: var(--on-accent, #fff);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   Tabbar
════════════════════════════════════════════════════════════════ */
#tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: 100;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-soft);
  padding: 6px 0 4px;
  transition: color var(--t-fast) var(--ease-out);
  position: relative;
}
.tab-btn .icon { width: 22px; height: 22px; }
.tab-btn.active { color: var(--primary); }
.tab-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--primary);
}
.tab-btn:active { transform: scale(.96); }

/* ════════════════════════════════════════════════════════════════
   Layout
════════════════════════════════════════════════════════════════ */
#app {
  padding: 8px 16px 16px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════
   Cards / Surfaces
════════════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   Hero (Главная)
════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 100% 0%, #D1FADF 0%, transparent 60%),
    radial-gradient(100% 80% at 0% 100%, #FED7AA 0%, transparent 55%),
    var(--surface);
  padding: 14px 18px 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.hero h1 {
  font-size: 17px;
  line-height: 1.25;
  color: var(--fg);
  margin-bottom: 4px;
}

.hero p {
  color: var(--fg-muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  letter-spacing: -0.01em;
}
.hero-btn:active { transform: scale(.97); background: var(--accent-hover); }
.hero-btn .icon { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════
   Section headings
════════════════════════════════════════════════════════════════ */
.section-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
  margin-top: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════════
   News carousel
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   Stories row
════════════════════════════════════════════════════════════════ */
.stories-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 16px 8px;
  margin: 0 -16px 2px;
  scrollbar-width: none;
}
.stories-row::-webkit-scrollbar { display: none; }

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.story-item:hover,
.story-item:active,
.story-item:focus {
  background: none;
  outline: none;
}

.story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #EA580C 0%, #22D3EE 100%);
  box-sizing: border-box;
  transition: opacity 0.2s;
}
.story-ring.viewed {
  background: #6B7280;
}
.story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
.story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.story-avatar-empty {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
}
.story-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  max-width: 64px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ── Story viewer overlay ── */
.story-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  /* Separate compositing context: layout changes inside the caption don't trigger
     a repaint of the whole page behind the overlay. */
  isolation: isolate;
  transform: translateZ(0);
}
.story-bars {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 14px));
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.story-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  overflow: hidden;
}
.story-bar.done .story-bar-fill {
  width: 100%;
  height: 100%;
  background: #fff;
}
.story-bar.active .story-bar-fill {
  height: 100%;
  background: #fff;
  width: 0;
  animation: storyProgress linear forwards;
  animation-play-state: paused;
}
@keyframes storyProgress {
  from { width: 0%; }
  to   { width: 100%; }
}
.story-close {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top, 14px)) + 6px);
  right: 8px;
  z-index: 3;
  padding: 4px;
  background: none;
  border: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.story-close:hover,
.story-close:active,
.story-close:focus {
  background: none;
  outline: none;
}
.story-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Force own GPU layer so the photo doesn't repaint while caption animates. */
  transform: translateZ(0);
  will-change: transform;
}
.story-media-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #059669 0%, #EA580C 100%);
}

/* Full-height gradient shown when body text is expanded */
.story-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Own GPU layer — the full-screen gradient won't be repainted on every
     animation frame of the caption below it. */
  transform: translateZ(0);
  will-change: opacity;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.10) 65%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.28s ease;
}
.story-gradient.visible { opacity: 1; }

.story-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 60px 20px max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  color: #fff;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.story-footer a { pointer-events: auto; }

/* Caption text — single element that expands in place (Instagram Reels style).
   Collapsed: 2-line clamp. Expanded: full text. The visible top of the text stays
   anchored to its on-screen position thanks to a compensating translateY applied
   simultaneously with the max-height growth — so first lines don't "jump up". */
.story-body-wrap {
  height: 3.2em;
  overflow: hidden;
  cursor: default;
  pointer-events: auto;
  margin-bottom: 12px;
  /* The wrap sits inside a bottom-anchored footer, so as height grows
     the wrap's top edge naturally moves UP — the text slides upward line by
     line and stays anchored at its bottom edge. */
  /* Transition between two concrete pixel values (height is pre-measured)
     gives the browser the smoothest possible interpolation. */
  transition: height 0.85s cubic-bezier(0.16, 1, 0.3, 1);  /* slow easeOutExpo */
  will-change: height;
  /* Isolate layout/paint of the caption from the rest of the overlay tree
     so each animation frame only re-flows this subtree, not the whole page. */
  contain: layout style paint;
}
.story-body-wrap.is-expandable {
  cursor: pointer;
}
/* Single-line caption: drop the line to the bottom of the 2-line-tall wrap
   so it sits where the 2nd line would be (rather than floating up top). */
.story-body-wrap.is-short {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.story-body-wrap.expanded {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.story-body-text {
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: #fff;
  white-space: pre-wrap;
}
.story-body-wrap.expanded .story-body-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Hide bars/footer/sheet smoothly on long-press */
.story-bars    { transition: opacity 0.25s ease; }
.story-footer  { transition: opacity 0.25s ease; }
.story-ui-hidden { opacity: 0 !important; }

/* Page spinner — centered between topbar and tabbar */
.page-loader {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  z-index: 10;
}

/* In-view spinner — centered in the working area between topbar and tabbar */
.view-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(
    100dvh
    - var(--topbar-h) - env(safe-area-inset-top, 0px)
    - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)
  );
}
.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3.5px solid rgba(234, 88, 12, 0.15);
  border-top-color: #EA580C;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pull-to-refresh glass overlay */
.ptr-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-link {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--fg);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 24px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 38%;
}
.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

/* ════════════════════════════════════════════════════════════════
   Featured products carousel
════════════════════════════════════════════════════════════════ */
.featured-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;   /* snap points respect left padding */
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px 24px;
  padding: 4px 16px 12px;
  scrollbar-width: none;
  scroll-behavior: auto; /* JS controls smooth scroll */
}
.featured-carousel::-webkit-scrollbar { display: none; }

.featured-carousel .product-card {
  scroll-snap-align: start;
  /* Match the catalog grid card width exactly: 2 cards visible + half the
     carousel's 12px gap = same as .product-grid's two equal columns. */
  flex: 0 0 calc(50% - 6px);
  min-width: 0;
}

.news-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  transition: transform var(--t-fast) var(--ease-out);
}
.news-card:active { transform: scale(.98); }

.news-card-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
}
.news-card-img .icon { width: 32px; height: 32px; }

.news-card-body { padding: 12px 14px 14px; }

.news-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 4px;
  line-height: 1.3;
}

.news-card-text {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   Product grid + card
════════════════════════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.product-card {
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
/* Scale only when card itself is tapped — not when an internal button/input is active */
.product-card:active:not(:has(button:active, input:active)) {
  transform: scale(.98);
  border-color: var(--primary-soft);
}

.product-card-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
}
.product-card-photo .icon { width: 32px; height: 32px; }
.product-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card-body {
  padding: 12px 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve exactly 2 lines of vertical space so a 1-line title doesn't shift
     the rows below it. Same height across all cards → flavor/weight align. */
  min-height: calc(2 * 1.35em);
}

/* Stacked variant rows — Вкус: / Вес: each on its own line.
   Labels share a fixed min-width so the dropdown buttons line up vertically. */
.product-card-variants {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card-variant-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* Empty rows (when a product lacks flavor or weight) keep this height so
     the price/buttons below sit at the same Y across every card. */
  min-height: 22px;
}
.product-card-variant-row .variant-dd-label {
  min-width: 36px;        /* fits both "Вкус:" and "Вес:" — aligns the buttons */
  text-align: left;
}
.product-card-variant-row .variant-dd { flex: 1; min-width: 0; }
/* In a flex row this lets the dropdown shrink to fit the available width. */
.product-card-variant-row .variant-dd .variant-dd-btn { flex: 1; min-width: 0; }

/* Static "Вкус: Шоколад" line when there's only a single value */
.product-card-variant-row .variant-dd-static-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-soft);
}

.product-card-price {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Push price + bottom row to the bottom of the card body so that, if
     anything above turns out shorter than expected, the price doesn't float
     in the middle. */
  margin-top: auto;
}

/* ── Custom styled dropdown (variant selectors on product cards) ── */
.variant-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;          /* allow ellipsis truncation inside */
}
.variant-dd-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-soft);
  flex-shrink: 0;
}
.variant-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px 3px 8px;
  background: var(--surface);
  border: 1.5px solid var(--surface);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.3;
}
.variant-dd-btn:active { transform: scale(0.97); }
.variant-dd.open .variant-dd-btn,
.variant-dd-btn:hover {
  border-color: var(--primary);
}
.variant-dd-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;          /* needed so flex item can shrink below content width */
  flex: 1;               /* fills the button's available width */
  text-align: left;
}
.variant-dd-chevron {
  transform: rotate(90deg);          /* chevron-right rotated to point down */
  transition: transform 0.18s ease;
  flex-shrink: 0;
  color: var(--fg-soft);
}
.variant-dd.open .variant-dd-chevron { transform: rotate(-90deg); }

.variant-dd-panel {
  position: fixed;                    /* coords set in JS, escapes overflow clipping */
  z-index: 9000;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card, #fff);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(62,74,89,0.18);
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.variant-dd-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.variant-dd-item:hover,
.variant-dd-item:active { background: var(--surface); }
.variant-dd-item.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 700;
}
/* Disabled option — value exists for this product but doesn't combine with
   the currently selected other dimension (e.g. 300г listed under «Натуральный»
   when no (Натуральный, 300г) variant exists). User sees it but can't pick it. */
.variant-dd-item[disabled],
.variant-dd-item.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--fg-soft);
}
.variant-dd-item[disabled]:hover { background: none; }

/* Plain "Label: value" line used when there's only one possible weight or
   flavor — no choice to make, just a tag. */
.variant-dd-static {
  font-size: 11px;
  color: var(--fg-soft);
  font-weight: 500;
}
.variant-dd-static .variant-dd-label {
  margin-right: 3px;
}

.product-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Bottom row: qty/add controls on left, fav button on right */
.product-card-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-card-bottom .product-card-actions { flex: 1; }

/* Favourite heart button — same size as add-btn */
.fav-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: none;
  border-radius: var(--r-pill);
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.fav-icon { display: block; }
.fav-icon--on { color: var(--accent); }

/* ── Qty controls ── */
.qty-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qty-row button {
  width: 32px;
  height: 32px;
  color: var(--primary);
  background: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* No tap highlight on qty buttons */
.qty-row button .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.qty-row span {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  min-width: 28px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Used only inside product cards — fills the actions slot so it matches the
   width of the qty-row that replaces it after the first tap. */
.add-btn {
  background: var(--primary);
  color: var(--on-primary);
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  height: 32px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.005em;
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.10s;
}
.add-btn:active { background: var(--primary-hover); transform: scale(0.97); }

/* Qty-row inside a product card: also full-width so swapping between
   .add-btn and .qty-row keeps the same footprint. */
.product-card-actions .qty-row { width: 100%; justify-content: space-between; }
.product-card-actions .qty-row > span { flex: 1; text-align: center; }

/* ════════════════════════════════════════════════════════════════
   Chips (filters / categories)
════════════════════════════════════════════════════════════════ */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 0 -16px 16px;
  padding-left: 16px;
  padding-right: 16px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  color: var(--fg);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.chip.active {
  background: var(--primary);
  color: var(--on-primary);
}

/* Icon-only chip (favourites heart) */
.chip--icon {
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}
.chip--icon.active {
  background: var(--accent);
  color: var(--on-accent);
}

/* ── Category tiles ── */
.cat-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.cat-tile {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  letter-spacing: -0.01em;
}
.cat-tile:active { transform: scale(.97); background: var(--primary-soft); }

/* ════════════════════════════════════════════════════════════════
   Product detail — photo on the left, info column on the right; БЖУ + title
   + description below the columns.
════════════════════════════════════════════════════════════════ */
.pd-top-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.pd-photo {
  flex: 0 0 42%;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
}
.pd-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-side .badge-row { width: 100%; }
.pd-side-row { display: flex; align-items: center; min-width: 0; }
.pd-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-photo-placeholder .icon { width: 56px; height: 56px; }

.pd-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pd-price {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pd-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
.meta-chip .icon { width: 13px; height: 13px; color: var(--primary); }

/* Variant selector chips on product detail page.
   Weight chips live in .pd-side next to price; flavor chips appear under the title. */
.variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}
.variant-chips--flavor {
  margin: -2px 0 12px;
}
.variant-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--surface);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.variant-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent, #fff);
}
.variant-chip:active { transform: scale(0.97); }
/* Disabled chip — incompatible with the currently selected other dimension.
   Greyed out and unclickable; user must first switch the other dim to enable it. */
.variant-chip[disabled],
.variant-chip.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--surface);
  border-color: var(--surface);
  color: var(--fg);
}

.product-detail-desc {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.bju-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 6px 0 14px;
}

.bju-cell {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  text-align: center;
  min-width: 0;
}

.bju-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 3px;
}

.bju-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ── Add to cart action ── */
.pd-cart-action {
  margin-top: 8px;
  margin-bottom: 20px;
}

.pd-add-btn {
  width: 100%;
  padding: 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  letter-spacing: -0.01em;
}
.pd-add-btn:active { background: var(--primary-hover); transform: scale(.98); }

/* Description on the redesigned product page sits between title and variants. */
.pd-desc {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 6px 0 14px;
}

/* Variant rows inside the right side column — same look as on the card,
   compact because side column is narrow. */
.pd-variants {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.pd-variant-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pd-variant-row .variant-dd-label { min-width: 38px; font-size: 11px; }
.pd-variant-row .variant-dd { flex: 1; min-width: 0; }
.pd-variant-row .variant-dd .variant-dd-btn { flex: 1; min-width: 0; }

/* Cart action + fav square in one row at the bottom of the side column. */
.pd-bottom {
  gap: 6px;
  margin-top: 2px;
}
.pd-actions { flex: 1; min-width: 0; }
.pd-add-cart {
  height: 36px;
  font-size: 12px;
  padding: 0 10px;
  border-radius: var(--r-pill);
}
.pd-qty-row {
  height: 36px;
  width: 100%;
  justify-content: space-between;
}
.pd-qty-row > button { width: 36px; height: 36px; }
.pd-qty-row > span { flex: 1; text-align: center; font-weight: 700; font-size: 14px; }

.pd-fav .fav-btn {
  width: 36px;
  height: 36px;
  background: var(--surface);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.10s;
}
.pd-fav .fav-btn:active { background: var(--primary-soft); transform: scale(0.94); }
.pd-fav .fav-icon--on { color: var(--accent); }

/* Description on the redesigned product page — sits at the bottom below БЖУ
   and title. Re-defined here to override the earlier "stacked" margin. */
.pd-side .pd-price { font-size: 22px; line-height: 1; margin: 2px 0; }
.pd-title { margin: 14px 0 6px; }
.pd-desc  { margin: 0 0 16px; }

/* Title placed in the right-column ABOVE the brand+хит badge row. Compact so
   long titles don't push the price/cart row off-screen on the mobile breakpoint;
   clamps to 2 lines. */
.pd-title--side {
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Single-value variant label (e.g. «Вкус: Шоколад» when there's only one
   variant) — make the VALUE the same size/color/weight as the LABEL so the
   line reads as a single piece, not two visually disjoint chunks. */
.variant-dd-static-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-soft);
}

/* ── Info tabs (Описание / Состав / Применение) under БЖУ ──
   Built on top of the `.subtabs` segmented-control already used by the courier
   orders page. The modifier below only tweaks vertical spacing for this context. */
.pd-info-tabs {
  margin: 8px 0 12px;
}
.pd-info-tab {
  cursor: pointer;
}
.pd-info-content {
  font-size: 14px;
  color: var(--fg-muted, var(--fg-soft));
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: 18px;
}
.pd-info-content--single { margin-top: 6px; }

.pd-qty-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 8px 12px;
}

.pd-qty-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.pd-qty-btn:active { background: var(--primary-hover); transform: scale(.94); }
.pd-qty-btn .icon { width: 18px; height: 18px; stroke-width: 2.5; }

.pd-qty-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pd-qty-num {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pd-qty-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   Cart
════════════════════════════════════════════════════════════════ */
.cart-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--fg-soft);
}

.cart-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.cart-empty-icon .icon { width: 32px; height: 32px; }

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
}

.cart-item-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-photo .icon { width: 22px; height: 22px; }
.cart-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.cart-item-variant {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.cart-item-price {
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Variants editor in admin product form */
.variants-editor {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--surface);
}
.variant-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 4px 0 8px;
  line-height: 1.4;
}
.variant-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* ── Collapsible variant row ── */
.variant-row {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
}

/* Header — clickable strip that expands/collapses the row. */
.variant-row-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 44px 12px 14px;  /* right-pad leaves room for the X corner */
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  gap: 8px;
}
.variant-row-summary {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.variant-row-chev {
  flex-shrink: 0;
  color: var(--fg-soft);
  transform: rotate(0deg);
  transition: transform 0.18s ease;
}
.variant-row.expanded .variant-row-chev { transform: rotate(90deg); }

/* X delete button — top-right corner of the variant card. */
.variant-del-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fg-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.variant-del-corner:hover { background: rgba(224, 139, 139, .15); color: var(--danger, #E08B8B); }

/* Body — hidden when collapsed, revealed when expanded. */
.variant-row-body {
  display: none;
  padding: 0 14px 14px 14px;
}
.variant-row.expanded .variant-row-body { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 8px; }

.variant-row-body .form-input {
  padding: 8px 10px;
  font-size: 13px;
}
.variant-row-body .variant-avail {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  /* No inherited indents — left edge of the label = left edge of the grid =
     left edge of the weight input directly above. */
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
/* Custom-styled checkbox — bypass the platform-default offset that iOS Safari
   and some Android WebViews add around <input type="checkbox">. With
   appearance:none we control the visible square's exact position. */
.variant-row-body .variant-avail input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg, #fff);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.variant-row-body .variant-avail input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.variant-row-body .variant-avail input[type="checkbox"]:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid var(--on-primary, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* «Цены по городам» — its own row, left-aligned (left edge of button = left
   edge of the weight input directly above). The city-prices section that
   expands sits BELOW this row. */
.variant-cities-row {
  grid-column: 1 / -1;
  display: flex;
  padding: 0;
  margin: 4px 0 0;
}
.variant-cities-row .variant-cities {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  /* Primary-green outline matches the brand and lines up visually with the
     1.5px input borders above. */
  border: 1.5px solid var(--primary);
  color: var(--primary);
}
.variant-cities-row .variant-cities .icon { color: var(--primary); }

/* «Сохранить вариант» — separate row at the very BOTTOM of the variant card,
   right-aligned. Placed AFTER the city-prices section in the DOM so the
   expanding section pushes nothing — the save button stays where it is. */
.variant-save-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.variant-save-row .save-btn {
  width: auto;
  padding: 10px 18px;
  font-size: 13px;
}

/* City-price matrix inside a variant row */
.variant-city-prices {
  grid-column: 1 / -1;
  background: var(--card, #fff);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-top: 4px;
  box-shadow: inset 0 0 0 1px var(--border, #EEF1F6);
}
.city-price-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.city-price-row {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 8px;
  align-items: center;
}
.city-price-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.city-price-name .icon { color: var(--primary); flex-shrink: 0; }
.city-price-val {
  padding: 6px 10px;
  font-size: 13px;
}
/* City-prices footer — right-aligned «Сохранить цены по городам» button. */
.city-prices-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.city-prices-save {
  width: auto;
  padding: 10px 18px;
  font-size: 13px;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.remove-btn {
  color: var(--fg-soft);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.remove-btn:active { color: var(--danger); background: var(--danger-bg); }
.remove-btn .icon { width: 16px; height: 16px; }

.promo-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.promo-row input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--bg);
  outline: none;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease-out);
}
.promo-row input:focus { border-color: var(--primary); }
.promo-row input::placeholder { color: var(--fg-soft); font-weight: 500; letter-spacing: 0; text-transform: none; }

.promo-apply-btn {
  padding: 10px 18px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out);
}
.promo-apply-btn:active { background: var(--primary-hover); }

.promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: var(--success-bg);
  color: var(--primary);
  border: 1px solid var(--primary-soft);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.promo-chip .icon { width: 14px; height: 14px; }
.promo-chip button {
  color: var(--primary);
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease-out);
}
.promo-chip button:active { background: var(--primary-soft); }

/* Warning-вариант — корзина упала ниже min_order промокода. Промо НЕ удалён,
   но скидка не применяется до тех пор, пока юзер не доберёт корзину. */
.promo-chip--warn {
  background: color-mix(in srgb, var(--accent, #EA580C) 12%, transparent);
  color: var(--accent, #EA580C);
  border-color: color-mix(in srgb, var(--accent, #EA580C) 40%, transparent);
}
.promo-chip--warn button { color: var(--accent, #EA580C); }
.promo-chip--warn button:active {
  background: color-mix(in srgb, var(--accent, #EA580C) 20%, transparent);
}
.promo-chip--warn .icon { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
   Payment method picker (checkout)
   ════════════════════════════════════════════════════════════════ */
.payment-method-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) {
  .payment-method-seg { grid-template-columns: 1fr; }
}
.payment-method-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--card, #fff);
  border: 1.5px solid var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.payment-method-opt input[type=radio] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.payment-method-opt input[type=radio]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}
.payment-method-opt:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft, var(--surface));
}
.payment-method-body { display: flex; flex-direction: column; gap: 2px; }
.payment-method-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}
.payment-method-hint {
  font-size: 11px;
  color: var(--fg-muted);
}

/* ════════════════════════════════════════════════════════════════
   Payment page (СБП)
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   Payment page — compact / action-first layout.
   Главная CTA «Перейти к оплате» сразу под заголовком, QR в свёрнутом
   details-блоке (открывается только тем кому удобнее отсканировать).
   ════════════════════════════════════════════════════════════════ */
.payment-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 4px 0 24px;
}

.payment-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.payment-order-id {
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.payment-amount-row {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.payment-amount-label {
  font-size: 13px;
  color: var(--fg-muted);
}
.payment-amount-value {
  font-family: 'Unbounded', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}

/* CTA — reuse .checkout-btn (оранжевая), но как ссылка <a>. */
.payment-cta {
  text-decoration: none;
  width: 100%;
}
.payment-cta[aria-disabled="true"] {
  background: var(--success, #10B981);
  pointer-events: none;
}

/* Статус-строка — короткая info-плашка под CTA. */
.payment-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}
.payment-status-line--waiting {
  background: color-mix(in srgb, var(--accent, #EA580C) 12%, transparent);
  color: var(--accent, #EA580C);
}
.payment-status-line--ok {
  background: color-mix(in srgb, var(--success, #10B981) 14%, transparent);
  color: var(--success, #10B981);
}

/* «Я оплатил» — secondary outline-кнопка. */
.payment-paid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  border: 1.5px solid var(--primary);
  border-radius: var(--r-md);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.payment-paid-btn:hover  { background: var(--primary-soft, var(--surface)); }
.payment-paid-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* QR в свёрнутом details — основная фишка нового дизайна. */
.payment-qr-collapsible {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.payment-qr-collapsible summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.payment-qr-collapsible summary::-webkit-details-marker { display: none; }
.payment-qr-collapsible summary > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.payment-collapsible-chev {
  transition: transform 0.2s var(--ease-out);
  color: var(--fg-muted);
}
.payment-qr-collapsible[open] .payment-collapsible-chev {
  transform: rotate(180deg);
}
.payment-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
}
.payment-qr img, .payment-qr canvas { display: block; }

/* Meta — реквизиты + копировать. */
.payment-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
}
.payment-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.payment-meta-label { color: var(--fg-muted); }
.payment-meta-value { color: var(--fg); font-weight: 600; }
.payment-meta-phone {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.payment-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
.payment-link-copy:hover { opacity: 0.8; }

.payment-back-link {
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
  align-self: center;
  padding: 6px 0;
}
.payment-back-link:hover { color: var(--primary); }

/* CTA-кнопка «Завершить оплату» внутри карточки заказа в профиле. */
.order-item-pay-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent, #EA580C) 12%, transparent);
  color: var(--accent, #EA580C);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.order-item-pay-cta:hover {
  background: color-mix(in srgb, var(--accent, #EA580C) 22%, transparent);
}
.order-item-pay-cta > span { flex: 1; }

/* Цветовые модификаторы для двух новых SBP-статусов в `statusBadge`.
   Базовые классы (.status-new, .status-preparing и т.д.) уже определены выше. */
.status-awaiting-payment {
  background: color-mix(in srgb, var(--accent, #EA580C) 14%, transparent);
  color: var(--accent, #EA580C);
}
.status-awaiting-confirmation {
  background: color-mix(in srgb, #06B6D4 14%, transparent);
  color: #06B6D4;
}
.status-paid-new {
  background: color-mix(in srgb, var(--success, #10B981) 14%, transparent);
  color: var(--success, #10B981);
}

/* Бейдж способа оплаты в карточке заказа в админке. */
.order-pay-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.order-pay-badge--sbp {
  background: color-mix(in srgb, var(--accent, #EA580C) 14%, transparent);
  color: var(--accent, #EA580C);
}
.order-pay-badge--cash {
  background: var(--surface);
  color: var(--fg-muted);
}

/* ════════════════════════════════════════════════════════════════
   Shipping method picker (cart)
   ════════════════════════════════════════════════════════════════ */
.shipping-section { margin-bottom: 16px; }
.shipping-section-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.shipping-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shipping-opt {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card, #fff);
  border: 1.5px solid var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.shipping-opt input[type=radio] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.shipping-opt input[type=radio]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}
.shipping-opt--active {
  border-color: var(--primary);
  background: var(--primary-soft, var(--surface));
}
.shipping-opt-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
}
.shipping-opt--active .shipping-opt-icon {
  background: var(--card, #fff);
}
.shipping-opt-body { flex: 1; min-width: 0; }
.shipping-opt-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.shipping-opt-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Info-плашка для городов с единственным вариантом (только СДЭК). */
.shipping-info {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent, #EA580C) 10%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #EA580C) 30%, transparent);
  border-radius: var(--r-md);
}
.shipping-info-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #EA580C) 20%, var(--card, #fff));
  color: var(--accent, #EA580C);
}
.shipping-info-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.shipping-info-hint {
  font-size: 12px;
  color: var(--fg);
  margin-top: 2px;
}
.shipping-info-note {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 4px;
  font-style: italic;
}

/* СДЭК-строка в итогах. Сама строка без фона (как обычная totals-row),
   а note приглушённый — даёт понять, что эта стоимость в счёт не входит. */
.totals-cdek-note {
  font-size: 11px;
  color: var(--fg-muted);
  font-style: italic;
  text-align: right;
  max-width: 60%;
}

.promo-error {
  font-size: 12px;
  color: var(--danger);
  margin-bottom: 8px;
}

.totals {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.totals-row.discount { color: var(--primary); font-weight: 600; }

.totals-final {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-md);
  text-align: center;
  letter-spacing: -0.01em;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.checkout-btn:active { background: var(--accent-hover); transform: scale(.98); }
.checkout-btn .icon { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════
   Form
════════════════════════════════════════════════════════════════ */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  margin-bottom: 16px;
}

.form-group { margin-bottom: 14px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}

.form-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 15px;
  outline: none;
  color: var(--fg);
  background: var(--bg);
  /* Some mobile WebViews default the text caret to the system tint (often
     white) which becomes invisible on our white background. Pin it to the
     foreground color explicitly. */
  caret-color: var(--fg);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  resize: vertical;
}
.form-input:focus { border-color: var(--primary); }
.form-input::placeholder { color: var(--fg-soft); }
/* Tall textarea variant — used for description so admins have real room to write. */
.form-input--tall { min-height: 180px; line-height: 1.5; }

.save-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r-md);
  letter-spacing: -0.01em;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.save-btn:active { background: var(--primary-hover); transform: scale(.98); }
.save-btn:disabled { opacity: .5; cursor: default; }

/* ════════════════════════════════════════════════════════════════
   Status badges
════════════════════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.status-badge .icon { width: 12px; height: 12px; }

.status-new       { background: var(--info-bg);    color: var(--info); }
.status-preparing { background: var(--warning-bg); color: var(--warning); }
.status-ready,
.status-shipping,
.status-delivered { background: var(--success-bg); color: var(--primary); }
.status-cancelled { background: var(--danger-bg);  color: var(--danger); }

/* ════════════════════════════════════════════════════════════════
   Orders list
════════════════════════════════════════════════════════════════ */
.order-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.order-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Tappable indicator on each order card — rotates 90° when expanded to make
   the "tap to expand" affordance unambiguous. */
.order-item-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  margin-left: auto;
}
.order-toggle-chev {
  transition: transform 0.18s ease;
  transform: rotate(90deg);
}
.order-item.expanded .order-toggle-chev { transform: rotate(-90deg); }
.order-item { cursor: pointer; }
.history-row-status { display: inline-flex; }

.order-item-id {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}

.order-item-meta {
  font-size: 12px;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
}

.order-item-promo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
}

.order-totals {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  margin: 8px 0;
}

.order-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-muted);
  padding: 2px 0;
}

.order-totals-row.total {
  font-weight: 700;
  color: var(--fg);
  margin-top: 4px;
  font-size: 13px;
}

.order-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: none;
}

.order-item.expanded .order-history { display: block; }

.history-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-muted);
  padding: 3px 0;
}

.order-items-list {
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.order-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  flex: 1;
}

.order-item-qty {
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   Courier / Subtabs
════════════════════════════════════════════════════════════════ */
.subtabs {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 3px;
  margin-bottom: 16px;
}

.subtab-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-align: center;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.subtab-btn.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.courier-order-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}

.courier-order-card--done {
  opacity: 0.55;
}

.courier-order-card--done .admin-order-actions {
  display: none;
}

.courier-order-header {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  margin-bottom: 10px;
}

.order-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  padding: 4px 0;
  margin-top: 4px;
  touch-action: manipulation;
}

.order-toggle-btn .toggle-chevron {
  display: inline-flex;
  transition: transform 0.22s ease;
}

.order-toggle-btn.open .toggle-chevron {
  transform: rotate(180deg);
}

.order-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.order-accordion.open {
  max-height: 600px;
}

.order-accordion-inner {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.order-acc-items {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}

.order-acc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}

.order-acc-row-name {
  flex: 1;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-acc-row-price {
  white-space: nowrap;
  font-weight: 600;
  color: var(--fg);
  flex-shrink: 0;
}

.info-row-price-old {
  text-decoration: line-through;
  color: var(--fg-soft);
  font-size: 11px;
  margin-right: 4px;
}

.info-row-promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.info-row-discount {
  color: var(--success);
  font-weight: 600;
  font-size: 12px;
}


.courier-order-info {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}

.courier-order-info .info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
}
.courier-order-info .info-row .icon {
  width: 14px;
  height: 14px;
  color: var(--fg-soft);
  flex-shrink: 0;
  margin-top: 3px;
}

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

.courier-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 80px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--fg);
  font-weight: 700;
  font-size: 12px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.courier-action-btn .icon { width: 13px; height: 13px; }
.courier-action-btn:active { background: var(--primary); color: var(--on-primary); }
.courier-action-btn.primary { background: var(--primary); color: var(--on-primary); }
.courier-action-btn.primary:active { background: var(--primary-hover); }
.courier-action-btn.danger { background: var(--danger-bg); color: var(--danger); }
.courier-action-btn.danger:active { background: var(--danger); color: var(--on-primary); }

/* ════════════════════════════════════════════════════════════════
   Loading / empty states
════════════════════════════════════════════════════════════════ */
.loading {
  text-align: center;
  padding: 64px 16px;
  color: var(--fg-soft);
  font-size: 14px;
}

.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--fg-soft);
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.empty-icon .icon { width: 30px; height: 30px; }

.empty-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ════════════════════════════════════════════════════════════════
   Toast
════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  left: 16px; right: 16px;
  background: var(--fg);
  color: var(--bg);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  animation: slideup .25s var(--ease-out);
}

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

/* ════════════════════════════════════════════════════════════════
   Featured badge
════════════════════════════════════════════════════════════════ */
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.featured-badge .icon { flex-shrink: 0; }

/* Brand badge — same visual weight as «хит» but in cyan/mint so the two read
   as a paired set. Truncates with ellipsis on long brand names. */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #06B6D4;          /* cyan-500 */
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: .8px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.brand-badge .icon { flex-shrink: 0; }

/* Badge row — brand + хит side by side. Brand gets 2/3 of the available
   width (brand names tend to be longer); «хит» gets 1/3. If only one badge
   exists it still occupies its share, leaving the other side empty. */
.badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Reserve space even when empty (no brand and no «хит») so cards without
     any badges still align with cards that have them. */
  min-height: 18px;
}
.badge-row > .brand-badge {
  flex: 3 1 0;
  min-width: 0;
  justify-content: center;
}
.badge-row > .featured-badge {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════
   Admin panel
════════════════════════════════════════════════════════════════ */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.admin-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--surface);
  color: var(--fg);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.admin-nav-btn .icon { width: 14px; height: 14px; }
.admin-nav-btn.active {
  background: var(--primary);
  color: var(--on-primary);
}

.admin-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}

/* Collapsible variant of the form card — used by the «Новый товар» entry.
   When collapsed the header is shaped IDENTICALLY to a saved-product row
   (.admin-row): same padding, gap, border-radius, margin and font sizing,
   with a 44×44 icon slot where the product photo would sit. This way the
   "add new" sits naturally at the top of the product list. */
.admin-form-card--collapsible {
  padding: 0;
  border-radius: var(--r-md);     /* match .admin-row */
  margin-bottom: 8px;             /* match .admin-row */
}
.admin-form-card--collapsible .admin-form-header {
  display: flex;
  align-items: center;
  gap: 10px;                      /* match .admin-row */
  padding: 10px 12px;             /* match .admin-row */
  cursor: pointer;
  user-select: none;
}
/* The icon slot occupies the same footprint as .admin-row-photo so the icon
   sits exactly where the product photo would appear. */
.admin-form-icon-slot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
.admin-form-icon-slot .icon {
  width: 22px;
  height: 22px;
  color: var(--primary);
}
/* Title styling matches .admin-row-title (13px / 600 weight). */
.admin-form-card--collapsible .admin-form-title {
  margin-bottom: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-form-card--collapsible .admin-form-body {
  padding: 0 12px 14px;
}
/* Close (X) — same visual as the row's danger action button. */
.admin-form-card--collapsible .admin-form-close {
  flex-shrink: 0;
  padding: 0;
  width: 30px;
  height: 30px;
}

.admin-form-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 14px;
  /* Subtle pop when the form switches to "editing" mode — matches the
     primary-color title used by the existing per-product edit form. */
}
.admin-form-title--editing,
.admin-form-title--editing .admin-form-title-icon {
  color: var(--primary);
  letter-spacing: -0.01em;
}
.admin-form-title .icon { width: 16px; height: 16px; color: var(--primary); }

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

/* ════════════════════════════════════════════════════════════════
   Browser login page — Telegram Login Widget
════════════════════════════════════════════════════════════════ */
.login-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 64px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100vh;
  box-sizing: border-box;
}
.login-logo {
  height: 56px;
  width: auto;
  margin-bottom: 8px;
}
.login-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin: 0;
}
.login-subtitle {
  font-size: 14px;
  color: var(--fg-muted, var(--fg-soft));
  line-height: 1.5;
  margin: 0 0 8px;
}
.login-widget {
  display: flex;
  justify-content: center;
  min-height: 48px;
}
.login-msg {
  font-size: 13px;
  margin: 4px 0 0;
  min-height: 1em;
}
.login-msg--info { color: var(--fg-muted, var(--fg-soft)); }
.login-msg--err  { color: var(--danger, #E08B8B); }
.login-hint {
  font-size: 12px;
  color: var(--fg-soft);
  margin-top: auto;
  padding-top: 16px;
}


/* ════════════════════════════════════════════════════════════════
   City picker modal — shown on first launch and from the topbar city button
════════════════════════════════════════════════════════════════ */
.city-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: offerFadeIn 0.22s ease-out;
}
.city-modal {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.city-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.city-modal-header h2 {
  font-family: 'Unbounded', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.city-modal-header .icon { color: var(--primary); }
.city-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--fg-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, transform 0.10s;
}
.city-modal-close:active { background: var(--primary-soft); transform: scale(0.94); }
.city-modal-subtitle {
  font-size: 12px;
  color: var(--fg-muted, var(--fg-soft));
  margin: 0 0 12px;
}
/* Auto-detect button at the top of the city modal — uses GPS coords (which
   are unaffected by VPN since they come from the device hardware) and then
   reverse-geocodes via OSM Nominatim to find the city. */
.city-detect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-radius: var(--r-md);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.10s, opacity 0.15s;
}
.city-detect-btn:active:not(:disabled) {
  background: var(--primary-hover, var(--primary));
  transform: scale(0.98);
}
.city-detect-btn:disabled { opacity: 0.55; cursor: progress; }
.city-detect-btn .icon { color: inherit; }
.city-detect-msg {
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
  min-height: 0;
}
.city-detect-msg--info { color: var(--fg-muted, var(--fg-soft)); }
.city-detect-msg--err  { color: var(--danger, #E08B8B); }

.city-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.city-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
}
.city-option > .icon:first-child { color: var(--primary); flex-shrink: 0; }
.city-option:active { transform: scale(0.99); }
.city-option:hover { background: var(--primary-soft); }
.city-option.active {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.city-option > span:not(.city-option-hint) { flex: 1; }
.city-option-check { color: var(--primary); }
.city-option-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-soft);
}
.city-option--other > .icon:first-child { color: var(--fg-soft); }


/* ════════════════════════════════════════════════════════════════
   Public-offer modal — first-launch consent (договор-оферта + 152-ФЗ)
════════════════════════════════════════════════════════════════ */
@keyframes offerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.offer-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: offerFadeIn 0.22s ease-out;
}
.offer-modal {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.offer-modal-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border, #EEF1F6);
}
.offer-modal-header h2 {
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.offer-modal-subtitle {
  font-size: 13px;
  color: var(--fg-muted, var(--fg-soft));
  margin: 0;
}
.offer-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
  -webkit-overflow-scrolling: touch;
}
.offer-modal-body h3 {
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}
.offer-modal-body h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 6px;
  color: var(--primary);
}
.offer-modal-body p { margin: 0 0 6px; }
.offer-modal-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border, #EEF1F6);
}
.offer-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg);
  cursor: pointer;
  margin-bottom: 12px;
}
.offer-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}
.offer-accept-btn {
  width: 100%;
  height: 48px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-radius: var(--r-md);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, transform 0.10s, opacity 0.15s;
}
.offer-accept-btn:active:not(:disabled) {
  background: var(--primary-hover, var(--primary));
  transform: scale(0.98);
}
.offer-accept-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Inline hint above the variants block — explains that price/weight/flavor
   are now managed inside variants. */
.form-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--fg-muted, var(--fg-soft));
  line-height: 1.4;
}
.form-hint .icon { color: var(--primary); flex-shrink: 0; }

.admin-bju-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 8px;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}

.admin-row-photo {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  flex-shrink: 0;
  overflow: hidden;
}
.admin-row-photo .icon { width: 18px; height: 18px; }
.admin-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Admin stories preview ── */
.admin-stories-preview {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 16px 0 8px;
  scrollbar-width: none;
}
.admin-stories-preview::-webkit-scrollbar { display: none; }

.admin-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

.admin-story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #EA580C 0%, #22D3EE 100%);
  box-sizing: border-box;
}

.admin-story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}

.admin-story-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.admin-story-img-empty {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
}

.admin-story-del {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  line-height: 1;
}

.admin-row-info { flex: 1; min-width: 0; }

.admin-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-row-title .icon { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }

.admin-row-meta {
  font-size: 11px;
  color: var(--fg-soft);
  margin-top: 2px;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  background: var(--surface);
  color: var(--fg);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.admin-action-btn .icon { width: 14px; height: 14px; }
.admin-action-btn:active { background: var(--primary-soft); }
.admin-action-btn.danger  { background: var(--danger-bg);  color: var(--danger); }
.admin-action-btn.danger:active { background: var(--danger); color: var(--on-primary); }
.admin-action-btn.warn    { background: var(--warning-bg); color: var(--warning); }
.admin-action-btn.ok      { background: var(--success-bg); color: var(--primary); }

.admin-order-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   File upload
════════════════════════════════════════════════════════════════ */
.fu-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 22px 16px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  background: var(--bg);
  text-align: center;
  margin-top: 8px;
}

.fu-zone:hover, .fu-zone.fu-drag {
  background: var(--surface);
  border-color: var(--primary);
}

.fu-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.fu-icon .icon { width: 22px; height: 22px; }

.fu-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.fu-hint {
  font-size: 11px;
  color: var(--fg-soft);
}

.fu-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: 200px;
}

.fu-preview img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--r-md);
}

.fu-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fu-remove .icon { width: 14px; height: 14px; }

.fu-progress {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

.fu-error {
  font-size: 12px;
  color: var(--danger);
  min-height: 16px;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   Skeleton (loading)
════════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════
   Reduced motion
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   Desktop adaptation
   ----------------------------------------------------------------
   The mobile design is canonical and untouched. Everything below only
   kicks in at ≥1024px and reshapes the screen for a real desktop site:
     • the bottom tab-bar becomes a left sidebar with full text labels
     • the top-bar stretches across the rest of the width
     • #app fills the remaining area (up to a generous max-width)
     • product grids show more columns
   Each rule below either inherits, or matches the specificity of the
   mobile rule it overrides — no `!important`.
════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* ── Body / layout — leave room for the left sidebar ── */
  body {
    padding-top: var(--topbar-h);
    padding-bottom: 0;
    padding-left: 240px;
    background: var(--surface);
  }
  /* On product/checkout pages mobile hides #tabbar; on desktop the sidebar
     stays — there's no MainButton in a desktop browser anyway. */
  body.mb-active #tabbar { display: flex; }
  body.mb-active        { padding-bottom: 0; padding-left: 240px; }

  /* ── Topbar: offset right of the sidebar, still fixed across the top ── */
  #topbar {
    left: 240px;
    right: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Logo restraints are no longer needed — keep the existing centering but
     stop forcing it to grow. */
  .logo { justify-self: start; padding-left: 0; }
  .logo #logo-img { height: 36px; }

  /* ── Tabbar → vertical sidebar ── */
  #tabbar {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 240px;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: calc(var(--topbar-h) + 16px) 12px 16px;
    border-top: none;
    border-right: 1px solid var(--border);
    background: rgba(255, 255, 255, .96);
  }

  .tab-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: auto;
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
  }
  .tab-btn .icon { width: 20px; height: 20px; }
  .tab-btn.active {
    background: var(--primary-soft);
    color: var(--primary);
  }
  /* Hide the mobile "active pill" indicator — the sidebar uses background. */
  .tab-btn.active::before { display: none; }

  /* ── Main content area ── */
  #app {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 40px 40px;
    background: transparent;
  }

  /* ── Catalog grid: 3 columns on desktop ── */
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  /* ── Featured carousel: bigger cards, but still horizontal scroll ── */
  .featured-carousel .product-card {
    flex: 0 0 calc(33.333% - 8px);
  }

  /* ── Section title + headings: bigger ── */
  .section-title {
    font-size: 18px;
    margin-bottom: 14px;
    margin-top: 8px;
  }

  /* ── Hero card: more breathing room ── */
  .hero {
    padding: 28px 32px;
    margin-bottom: 24px;
  }
  .hero h1 { font-size: 22px; line-height: 1.2; }
  .hero p  { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }

  /* ── Admin: forms can use full width comfortably ── */
  .admin-form-card { padding: 24px; }
  .admin-nav { gap: 6px; }
  .admin-nav-btn { padding: 10px 16px; font-size: 14px; }

  /* ── Order item, cart item — more comfortable spacing ── */
  .order-item { padding: 18px 20px; }
  .cart-item  { padding: 14px; }

  /* ── Stories row: keep horizontal scroll but cap height ── */
  .stories-row { padding: 4px 0 12px; margin: 0 0 12px; }

  /* ── Login page on desktop is already fine; just bump max-width ── */
  .login-page { max-width: 480px; }
}

/* ───────────── Telegram-profile UI (Tier A) ───────────── */
/* Avatar in the bottom tab-bar — replaces the generic «user» icon once
   `state.profile.photo_url` is known. Kept exactly the same outer box (22px)
   as the icon so neighbouring tabs don't jiggle when it loads. */
.tab-btn .tab-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.tab-btn.active .tab-avatar {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Profile page header — circular avatar + name + @handle. Bubble-styled
   to match the rest of the form-card aesthetic. */
.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--surface);
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-avatar--placeholder {
  background: linear-gradient(135deg, var(--primary), var(--surface));
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-header-info { min-width: 0; }
.profile-header-name {
  font-family: 'Unbounded', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-handle {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* «Заполнить из Telegram» — secondary link-style button under the phone
   input. Stays unobtrusive so it doesn't compete with the main «Сохранить». */
.form-aux-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.form-aux-btn:active { opacity: 0.6; }

/* User picker — searchable list used by «Назначить курьера/админа». */
.user-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.user-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--fg-muted);
}
.user-picker-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--fg);
}
.user-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
}
.user-picker-loading,
.user-picker-empty,
.user-picker-error {
  padding: 14px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
}
.user-picker-error { color: var(--danger); }

.user-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s ease;
}
.user-picker-row:hover { background: var(--surface); }
.user-picker-row-info { flex: 1; min-width: 0; }
.user-picker-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-picker-row-meta {
  font-size: 12px;
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.user-picker-row-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.user-picker-row-btn:active { transform: scale(.97); }

/* Avatar primitive — shared by picker rows and the «уже назначены» list. */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-avatar--placeholder {
  background: linear-gradient(135deg, var(--primary), var(--surface));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Role chips in the picker — owner/admin/courier. */
.user-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.user-chip--owner   { background: var(--warm, #C4B49A); color: #fff; }
.user-chip--admin   { background: var(--primary); color: #fff; }
.user-chip--courier { background: var(--success, #7DC9A7); color: #fff; }

/* Hint under the picker title. */
.admin-form-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 4px 0 8px;
  line-height: 1.4;
}

/* `.admin-row--user` — same outer bubble as .admin-row, but with the avatar
   as the first column. The base .admin-row keeps icon-only behaviour for
   product rows where avatars aren't relevant. */
.admin-row--user { gap: 10px; }

/* ── Courier row: avatar + name + zone chips + edit/delete ─────────────── */
.courier-row { flex-direction: column; align-items: stretch; gap: 0; }
.courier-row-main { display: flex; align-items: center; gap: 10px; width: 100%; }
.courier-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.zone-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.zone-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.zone-chip--city    { background: var(--primary-soft, var(--surface)); color: var(--primary); }
.zone-chip--shipper { background: #FFEFD6; color: #B7651B; }
.zone-chip--warn    { background: #FCE5E5; color: var(--danger); }

/* Inline edit form expanded under the courier row, and the assignment form
   shown after picking a user in «+ Назначить курьера». */
.courier-row-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--surface); }
.courier-assign-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.courier-assign-user {
  font-size: 13px;
  color: var(--fg-muted);
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.courier-assign-user b { color: var(--fg); }
.courier-assign-actions { display: flex; gap: 8px; align-items: center; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.checkbox-row input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--primary);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.checkbox-row input[type=checkbox]:checked {
  background: var(--primary);
}
.checkbox-row input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.link-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
}
.link-btn:hover { color: var(--fg); }

/* ════════════════════════════════════════════════════════════════
   Chip picker (admin product form → категории)
   ════════════════════════════════════════════════════════════════ */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px;
  background: var(--surface);
  border-radius: var(--r-md);
}
.chip-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  background: var(--card, #fff);
  border: 1px solid var(--primary);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
}
.chip-pick-chip-text { white-space: nowrap; }
.chip-pick-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--primary-soft, transparent);
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.chip-pick-chip-x:hover { background: var(--primary); color: #fff; }

/* «+ Категория» pill — same height as chips, mirrors dashed border so it
   reads as «empty slot, click to fill». */
.chip-pick-add-slot { position: relative; display: inline-block; }
.chip-pick-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--primary);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  line-height: 1;
  transition: background var(--t-fast) var(--ease-out);
}
.chip-pick-add-btn:hover { background: var(--primary-soft, var(--surface)); }
.chip-pick-add-btn .icon { display: inline-block; }

/* Inline dropdown — positioned absolutely below the «+» pill, escapes the
   surrounding form's column without needing a portal because the form lacks
   `overflow: hidden`. */
.chip-pick-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card, #fff);
  border: 1px solid var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(62,74,89,.12));
  padding: 4px;
  z-index: 100;
}
.chip-pick-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
.chip-pick-dropdown-item:hover { background: var(--surface); color: var(--primary); }

.chip-pick-empty {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--fg-muted);
  padding: 2px 6px 4px;
}

/* ════════════════════════════════════════════════════════════════
   Admin → Аналитика
   ════════════════════════════════════════════════════════════════ */
.analytics-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.analytics-filter-row { display: flex; gap: 12px; }
.analytics-filter-row .form-group { flex: 1; }
.analytics-filter-dates .form-group { max-width: 200px; }

.period-row {
  display: flex;
  gap: 6px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 3px;
}
.period-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-align: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.period-btn:hover  { color: var(--fg); }
.period-btn.active {
  background: var(--card, #fff);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* Summary cards — auto-fit grid that collapses to 2 per row on narrow screens. */
.analytics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.analytics-card {
  display: flex;
  gap: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--surface);
  border-radius: var(--r-md);
  padding: 12px;
}
.analytics-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-soft, var(--surface));
  color: var(--primary);
}
.analytics-card-body { min-width: 0; }
.analytics-card-value {
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.analytics-card-label {
  font-size: 12px;
  color: var(--fg);
  font-weight: 600;
  margin-top: 4px;
}
.analytics-card-hint {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Section blocks (status / cities / top tables). */
.analytics-section { margin-bottom: 24px; }
.analytics-section-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

/* Horizontal bar chart — three columns: label | track | value. */
.analytics-bars { display: flex; flex-direction: column; gap: 8px; }
.analytics-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.analytics-bar-label { color: var(--fg); font-weight: 600; }
.analytics-bar-track {
  height: 10px;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}
.analytics-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 6px;
  transition: width var(--t-base) var(--ease-out);
}
.analytics-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--fg);
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}
.analytics-bar-sub {
  display: block;
  font-weight: 500;
  font-size: 10px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Top tables. */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.analytics-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface);
}
.analytics-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--surface);
  color: var(--fg);
}
.analytics-table tbody tr:last-child td { border-bottom: none; }
.analytics-table .rank {
  width: 28px;
  color: var(--fg-muted);
  font-weight: 700;
}
.analytics-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   Адресная книга (профиль + чекаут)
   ════════════════════════════════════════════════════════════════ */
.addresses-section { margin-top: 8px; }
.addr-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--primary);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.addr-add-btn:hover { background: var(--primary-soft, var(--surface)); }

.addr-empty {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--fg-muted);
  background: var(--surface);
  border-radius: var(--r-md);
  line-height: 1.4;
}

.addr-card {
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border: 1px solid var(--surface);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 8px;
  transition: border-color var(--t-fast) var(--ease-out);
}
/* Default-карточка адреса — без chip'а, только визуальное выделение:
   primary-обводка, лёгкий tint фона, акцентная полоска слева. */
.addr-card--default {
  border-color: var(--primary);
  background: var(--primary-soft, color-mix(in srgb, var(--primary) 8%, #fff));
  position: relative;
  overflow: hidden;
}
.addr-card--default::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
}
.addr-card-main { display: flex; gap: 8px; align-items: flex-start; }
.addr-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.addr-card-label-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}
.addr-card-default-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.addr-card-text {
  font-size: 13px;
  color: var(--fg);
  flex: 1;
  word-break: break-word;
}
.addr-card-meta {
  font-size: 11px;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.addr-card-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-self: flex-start;
}
.addr-action {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.addr-action:hover { background: var(--primary-soft, var(--surface)); }
.addr-action.danger { color: var(--danger); }
.addr-action.danger:hover { background: #FCE5E5; }
.addr-card-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--surface); }

/* Form shared by «новый адрес» and edit-existing. */
.addr-form { display: flex; flex-direction: column; gap: 10px; }
.addr-form-actions { display: flex; gap: 8px; align-items: center; }
.addr-new-slot { margin-top: 12px; padding: 12px; background: var(--surface); border-radius: var(--r-md); }

/* ── Checkout — address selector ── */
.checkout-addr-list { display: flex; flex-direction: column; gap: 8px; }
.checkout-addr {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card, #fff);
  border: 1.5px solid var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.checkout-addr input[type=radio] {
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.checkout-addr input[type=radio]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}
.checkout-addr--active { border-color: var(--primary); background: var(--primary-soft, var(--surface)); }
.checkout-addr--default:not(.checkout-addr--active) {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--surface));
}
.checkout-addr-body { flex: 1; min-width: 0; }
.checkout-addr-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 2px;
}
.checkout-addr-text { font-size: 13px; color: var(--fg); word-break: break-word; }

.checkout-addr-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--primary);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  align-self: flex-start;
}
.checkout-addr-inline-btn:hover { background: var(--primary-soft, var(--surface)); }

/* ════════════════════════════════════════════════════════════════
   Address map (Leaflet) — встраивается в форму адреса
   ════════════════════════════════════════════════════════════════ */
.addr-form-map-slot {
  position: relative;
  min-height: 260px;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.addr-form-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--fg-muted);
}
.addr-map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Isolated stacking context — pin / suggest-dropdown / toast / locate-button
     внутри карты имеют z-index до 1200, чтобы перекрывать сам canvas и тайлы
     Leaflet. Без `isolation` они проигрывают только тем, кто выше 1200 в root
     stacking context — а #tabbar (z-index 100) не такой. С `isolation: isolate`
     вся карта становится одним «слоем» на z-index 0, и фиксированный таб-бар
     гарантированно её перекрывает при скролле. */
  isolation: isolate;
}
.addr-map-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--surface);
  border-radius: var(--r-md);
  padding: 6px 10px;
  color: var(--fg-muted);
}
.addr-map-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  /* Telegram WebView и некоторые тёмные темы наследуют белый caret из стиля
     `input`. На светлом фоне адресной строки он сливается — задаём явно. */
  caret-color: var(--primary);
}
.addr-map-locate {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--primary-soft, var(--surface));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.addr-map-locate:hover { background: var(--primary); color: #fff; }
.addr-map-locate.is-busy {
  /* Pulse-индикатор пока геолокация резолвится — обычно 1-2 секунды. */
  animation: addr-map-pulse 1s ease-in-out infinite;
}
@keyframes addr-map-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* Search field в состоянии «идёт reverse-запрос» — мягкий пульсирующий
   border чтобы юзер видел что приложение что-то делает. */
.addr-map-search-input--busy {
  animation: addr-map-input-pulse 1.2s ease-in-out infinite;
}
@keyframes addr-map-input-pulse {
  0%, 100% { background: transparent; }
  50%      { background: var(--surface); }
}

/* Toast — поверх карты, всплывает на 3.5с. */
.addr-map-toast {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translate(-50%, -8px);
  background: rgba(0,0,0,.82);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addr-map-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.addr-map-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--card, #fff);
  border: 1px solid var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(62,74,89,.12));
  z-index: 1100;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.addr-map-suggest-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
}
.addr-map-suggest-item:hover { background: var(--surface); color: var(--primary); }
.addr-map-suggest-item span { line-height: 1.3; word-break: break-word; }
.addr-map-suggest-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
}

.addr-map-canvas {
  width: 100%;
  height: 280px;
  border-radius: var(--r-md);
  overflow: hidden;
  /* Leaflet кладёт сюда тайлы — overflow:hidden скрывает их за скруглением. */
  z-index: 0;
}

/* Центральный «фиксированный» пин — рендерится поверх карты, не двигается. */
.addr-map-pin {
  position: absolute;
  /* Leaflet canvas начинается ниже строки поиска; центрируем относительно
     самого canvas'а: top сдвигаем на половину высоты карты + offset поиска.
     Используем calc через CSS-переменную не нужно — pin фиксируется через
     left:50% / top:50% относительно `.addr-map` со специальной поправкой
     ниже, чтобы попасть в центр canvas'а, а не всего компонента. */
  left: 50%;
  /* Карта = 280px высота, поиск ~46px высота + 8px gap. Центр карты:
       46 + 8 + 280/2 = 194px от верха .addr-map. Подняв якорь пина по высоте
       (translateY -100%) получаем кончик в искомой точке. */
  top: 194px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 500;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.addr-map-pin-icon { color: var(--primary); }

.addr-map-label {
  font-size: 12px;
  color: var(--fg);
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  line-height: 1.4;
  word-break: break-word;
}
.addr-map-attr {
  font-size: 10px;
  color: var(--fg-muted);
  text-align: right;
  padding-right: 4px;
}
.addr-map-attr a { color: var(--fg-muted); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   Profile sidebar + sub-tabs
   ════════════════════════════════════════════════════════════════ */
.profile-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-nav {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-nav::-webkit-scrollbar { display: none; }
.profile-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.profile-nav-btn:hover { color: var(--fg); }
.profile-nav-btn.active {
  background: var(--card, #fff);
  color: var(--primary);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.profile-nav-icon { display: inline-flex; align-items: center; }
/* На совсем узких экранах прячем подпись, оставляем только иконку. */
@media (max-width: 380px) {
  .profile-nav-label { display: none; }
  .profile-nav-btn { padding: 10px 0; }
}
.profile-content { min-width: 0; }

/* Desktop: sidebar слева, контент справа. */
@media (min-width: 1024px) {
  .profile-layout {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
  }
  .profile-nav {
    flex-direction: column;
    width: 220px;
    flex-shrink: 0;
    padding: 8px;
    gap: 4px;
    position: sticky;
    top: 80px;     /* под топбаром */
  }
  .profile-nav-btn {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 12px 14px;
    gap: 10px;
    font-size: 14px;
  }
  .profile-content { flex: 1; max-width: 720px; }
}

/* ════════════════════════════════════════════════════════════════
   Address form — единое поле + раскрываемые детали
   ════════════════════════════════════════════════════════════════ */
.section-title--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* Раскрываемая секция «Уточнить адрес». Шеврон поворачивается на 90°
   при открытии — простой и понятный аффорданс. */
.addr-form-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.addr-form-details-toggle:hover { opacity: .8; }
.addr-form-details-chev {
  transition: transform .2s var(--ease-out);
}
.addr-form-details-toggle.open .addr-form-details-chev {
  transform: rotate(90deg);
}
.addr-form-details {
  padding-top: 4px;
}
.addr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Доп. строка на карточке адреса: «подъезд 2 · кв 15 · код 1234». */
.addr-card-extra {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.addr-card-comment {
  font-size: 12px;
  color: var(--fg);
  font-style: italic;
  margin-top: 4px;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  background: var(--surface);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.checkout-addr-extra {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* «Город: Омск» — статусная подсказка под картой в форме адреса. */
.addr-form-city-detected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--fg-muted);
}
.addr-form-city-detected b { color: var(--fg); font-weight: 700; }
.addr-form-city-detected--ok {
  background: var(--primary-soft, color-mix(in srgb, var(--primary) 8%, #fff));
  color: var(--primary);
}
.addr-form-city-detected--ok b { color: var(--primary); }

/* ════════════════════════════════════════════════════════════════
   Checkout — totals + add-address button + modal
   ════════════════════════════════════════════════════════════════ */
.checkout-totals {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.checkout-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--fg);
}
.checkout-totals-row.discount { color: var(--primary); }
.checkout-totals-final {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--surface);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.checkout-totals-final span:last-child { color: var(--primary); }
.totals-hint {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: -2px;
}
.totals-free {
  color: var(--success, #10B981);
  font-weight: 700;
}

/* Empty state — нет адресов в текущем городе. */
.checkout-addr-empty {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Modal overlay для «+ Новый адрес» в чекауте. */
.checkout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 11500;          /* выше tabbar (100) и storyOverlay (9000), ниже toast */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: checkout-modal-in 0.2s ease-out;
}
@keyframes checkout-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.checkout-modal {
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 24px) var(--r-lg, 24px) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: checkout-modal-slide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes checkout-modal-slide {
  from { transform: translateY(40px); }
  to   { transform: translateY(0); }
}
.checkout-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--surface);
}
.checkout-modal-header h3 {
  font-family: 'Unbounded', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.checkout-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.checkout-modal-close:hover { color: var(--fg); }
.checkout-modal-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Flex-stack чтобы дать дыхание между списком адресов, подсказкой,
     кнопкой «+ Новый адрес» и inline-формой. Иначе они липли друг к другу. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
/* Кнопка `+ Новый адрес` внутри модалки не должна растягиваться по ширине —
   align-self держит её слева естественным размером. */
.checkout-modal-body .checkout-addr-inline-btn { align-self: flex-start; }

/* Desktop — центрируем модалку, а не привязываем к низу. */
@media (min-width: 1024px) {
  .checkout-modal-overlay { align-items: center; }
  .checkout-modal {
    border-radius: var(--r-lg, 24px);
    max-height: 80vh;
  }
}

/* ── Главная CTA-кнопка чекаута (in-page, не Telegram MainButton). ──
   Reuse .checkout-btn (оранжевая, такая же как «К оформлению» в корзине)
   с собственным верхним отступом, чтобы дать дыхание после блока итогов. */
.checkout-submit-btn {
  margin-top: 20px;
  width: 100%;
}
.checkout-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

/* CTA-блок под списком адресов: подсказка про город + кнопка «Новый адрес».
   Раньше кнопка прилипала к последней radio-карточке без разделения — теперь
   между ними хинт-плашка, плюс собственный отступ сверху. */
.checkout-addr-cta {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Toggle-кнопка «Выбрать другой адрес ▾» под выбранной карточкой.
   Стиль — лёгкая, ненавязчивая, чтобы не конкурировать с самим адресом. */
.checkout-addr-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  /* Solid border вместо dashed — после клика браузер оставляет фокус на
     кнопке, что в некоторых WebView (особенно Telegram) рисует поверх
     пунктирный outline, который визуально сливался с нашей dashed-рамкой. */
  border: 1px solid var(--surface);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  /* Полностью убираем фокусную обводку — это не главная CTA, для клавиатуры
     достаточно подсветки через hover-стили (Tab вызывает их в WebView). */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.checkout-addr-toggle:hover,
.checkout-addr-toggle:focus {
  background: var(--primary-soft, var(--surface));
  border-color: var(--primary);
  outline: none;
}
/* Keyboard-only focus (Tab) — оставляем явный indicator для accessibility. */
.checkout-addr-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* После рефакторинга кнопка ведёт в модалку, а не toggle'ит inline-список.
   Стрелка указывает вправо (как «перейти») и не вращается. */
.checkout-addr-toggle .icon { color: var(--fg-muted); }
.checkout-addr-toggle:hover .icon { color: var(--primary); }

/* Когда блок свёрнут — выбранная карточка ведёт себя как кликабельный
   header: cursor:pointer, лёгкий hover-эффект. */
.checkout-addr.checkout-addr--active {
  cursor: pointer;
}
.checkout-addr.checkout-addr--active:hover {
  filter: brightness(0.98);
}

.checkout-addr-cta-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--fg-muted);
}

/* Прогресс-бар бесплатной доставки. Используется и в корзине, и в чекауте.
   Положительное состояние (доставка уже бесплатная) — зелёная плашка с
   галочкой; промежуточное — заполняющийся primary-бар с подписью. */
.delivery-progress {
  margin: 6px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delivery-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.delivery-progress-track {
  width: 100%;
  height: 8px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.delivery-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 65%, var(--accent, #EA580C)) 100%
  );
  border-radius: 4px;
  transition: width var(--t-base, 250ms) var(--ease-out);
}
.delivery-progress--free {
  background: color-mix(in srgb, var(--success, #10B981) 14%, transparent);
  padding: 8px 12px;
  border-radius: var(--r-sm);
}
.delivery-progress--free .delivery-progress-label {
  color: var(--success, #10B981);
}

/* ════════════════════════════════════════════════════════════════
   Промокоды (admin → Промокоды)
   ════════════════════════════════════════════════════════════════ */
.promo-form { display: flex; flex-direction: column; gap: 12px; }

/* Код — моноширинный + чуть крупнее, выглядит «как код купона». */
.promo-code-input {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Сегмент для выбора типа скидки. Reuse .subtabs (как в табах историй),
   плюс собственный отступ. */
.promo-type-seg {
  margin-top: 4px;
  max-width: 320px;
}

/* Двухколоночная сетка для остальных полей. На мобилке схлопывается. */
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .promo-grid { grid-template-columns: 1fr; }
}

/* Поле со встроенным суффиксом справа (% или ₽).
   Использует absolute-позиционирование, чтобы суффикс не растягивал инпут
   и не делал «прыжок ширины» при смене типа скидки. */
.input-suffix {
  position: relative;
  display: block;
}
.input-suffix .form-input {
  padding-right: 36px;
  width: 100%;
}
.input-suffix-text {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  pointer-events: none;
}

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

/* Список промокодов. */
.promo-row-wrap { display: flex; flex-direction: column; }
.promo-row-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.promo-row-code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.promo-row-discount {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--accent, #EA580C) 14%, transparent);
  color: var(--accent, #EA580C);
  border-radius: var(--r-pill, 100px);
  font-size: 12px;
  font-weight: 700;
}
.promo-row-inactive {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promo-edit-slot { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════
   Drag & drop sort (admin → товары)
   ════════════════════════════════════════════════════════════════ */
.drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  margin-left: -4px;        /* визуально прислонить к левому краю карточки */
  color: var(--fg-muted);
  cursor: grab;
  border-radius: var(--r-sm);
  touch-action: none;       /* блокируем нативный pan, мы рулим pointer-events */
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.drag-handle:hover {
  color: var(--primary);
  background: var(--surface);
}
.drag-handle:active { cursor: grabbing; }

/* Source card during drag — оставляем место в потоке (placeholder), но
   делаем полупрозрачным/контурным, чтобы было понятно где именно лежит. */
.drag-source {
  opacity: 0.35;
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.drag-source > .admin-row { background: var(--surface); }

/* Floating clone глобально — может приземлиться куда угодно поверх DOM. */
.drag-clone {
  background: var(--card, #fff);
  border-radius: var(--r-md);
  /* Не наследуем transition от исходных карточек, иначе DnD будет «тормозить» */
  transition: transform 0s, opacity .18s ease-out !important;
}
.drag-clone .drag-handle { color: var(--primary); }

/* Соседние строки плавно расступаются. Margin-related layout сам перестроится
   браузером — нам остаётся только сделать переход плавнее. */
.product-edit-wrap {
  transition: transform .18s ease-out;
}

/* ════════════════════════════════════════════════════════════════
   Story image cropper (admin → новая/редактирование истории)
   ════════════════════════════════════════════════════════════════ */
.story-cropper {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-cropper-stage {
  position: relative;
  width: 100%;
  max-width: 270px;            /* 9:16 → 270×480 разумный preview под мобилку */
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;          /* блокируем нативный pan/zoom, мы рулим сами */
}
.story-cropper-stage.dragging { cursor: grabbing; }
.story-cropper-img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;        /* указатель ловит stage, чтобы Capture работал */
  -webkit-user-drag: none;
}
/* Safe-зоны — там, где UI Telegram сторис перекрывает изображение. */
.story-cropper-safe-top,
.story-cropper-safe-bottom {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  border: 1px dashed rgba(255,255,255,.6);
  background: rgba(0,0,0,.18);
  font-size: 10px;
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.story-cropper-safe-top {
  top: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}
.story-cropper-safe-top::before  { content: 'UI: индикаторы / закрыть'; }
.story-cropper-safe-bottom {
  bottom: 0;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.story-cropper-safe-bottom::before { content: 'UI: заголовок и подпись'; }

.story-cropper-hint {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  font-size: 10px;
  color: rgba(255,255,255,.6);
  text-align: center;
  pointer-events: none;
  z-index: 3;
  /* подсказка живёт прямо над safe-bottom, через 6px полупрозрачно */
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  opacity: 0;                          /* скрываем — превью говорит само за себя */
  transition: opacity .2s;
}
.story-cropper-stage:hover .story-cropper-hint { opacity: .6; }

.story-cropper-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}
.story-cropper-reset {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--surface);
  border-radius: 50%;
  background: var(--card, #fff);
  cursor: pointer;
  font-size: 16px;
  color: var(--fg-muted);
}
.story-cropper-reset:hover { color: var(--primary); border-color: var(--primary); }
.story-cropper-zoom {
  flex: 1;
  accent-color: var(--primary);
}
.story-cropper-zoom-val {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  font-weight: 600;
  min-width: 44px;
  text-align: right;
}

/* Admin stories list — две кнопки (изменить + удалить) в одном верхнем-правом углу.
   Существующий `.admin-story-del` остаётся как есть (красный кружок), едит-кнопка
   рядом — тот же размер, но белый-фон/синяя-иконка чтобы визуально не спорить. */
.admin-story-actions {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  gap: 4px;
}
.admin-story-actions .admin-story-del,
.admin-story-actions .admin-story-edit {
  /* Снимаем абсолютное позиционирование с .admin-story-del — wrapper его
     уже позиционирует, иначе обе кнопки лягут в одну точку. */
  position: static;
}
.admin-story-edit {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
  touch-action: manipulation;
}
.admin-story-edit:hover { background: var(--primary); color: #fff; }

/* Inline edit-slot — появляется ниже строки превью с историями, занимает
   всю ширину, потому что внутри полноценная форма с кроппером. */
.admin-story-edit-slot {
  flex-basis: 100%;
  order: 99;          /* падает в конец flex-ряда сторис, не ломая их line-up */
  width: 100%;
  margin-top: 12px;
}

/* Wider monitors — 4 columns + bigger header text. */
@media (min-width: 1440px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .featured-carousel .product-card { flex: 0 0 calc(25% - 9px); }
  #app { padding: 32px 48px 48px; }
  .hero h1 { font-size: 26px; }
}