/* ==========================================================================
   Toza Suv — Public site CSS (modern redesign, 2026)
   Mobile-first. No frameworks. No AOS.
   Design language: premium / minimal (Apple, Stripe, Linear).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --c-water-50:  #f0f9ff;
  --c-water-100: #e0f2fe;
  --c-water-200: #bae6fd;
  --c-water-300: #7dd3fc;
  --c-water-400: #38bdf8;
  --c-water-500: #0ea5e9;
  --c-water-600: #0284c7;
  --c-water-700: #0369a1;
  --c-water-800: #075985;
  --c-water-900: #0c4a6e;

  --c-accent:    #f59e0b;
  --c-accent-2:  #fbbf24;
  --c-accent-d:  #d97706;

  --c-ink-900:   #0f172a;
  --c-ink-800:   #1e293b;
  --c-ink-700:   #334155;
  --c-ink-600:   #475569;
  --c-ink-500:   #64748b;
  --c-ink-400:   #94a3b8;
  --c-ink-300:   #cbd5e1;
  --c-ink-200:   #e2e8f0;
  --c-ink-100:   #f1f5f9;
  --c-ink-50:    #f8fafc;
  --c-white:     #ffffff;

  --c-bg:        #ffffff;
  --c-text:      #0f172a;
  --c-muted:     #64748b;

  --c-success:   #10b981;
  --c-success-bg:#d1fae5;

  --grad-hero:   radial-gradient(1200px 600px at 80% -10%, #7dd3fc 0%, transparent 60%),
                 radial-gradient(900px 500px at -10% 30%, #bae6fd 0%, transparent 55%),
                 linear-gradient(180deg, #f0f9ff 0%, #ffffff 70%);
  --grad-cta:    linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --grad-water:  linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0369a1 100%);
  --grad-dark:   linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);

  --shadow-sm:   0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:   0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-lg:   0 10px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.05);
  --shadow-xl:   0 25px 50px -12px rgba(15,23,42,.18);
  --shadow-water:0 20px 40px -10px rgba(14,165,233,.35);

  --radius-sm:   8px;
  --radius:      14px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 999px;

  --t-fast:      150ms cubic-bezier(.4,0,.2,1);
  --t-base:      300ms cubic-bezier(.4,0,.2,1);
  --t-slow:      500ms cubic-bezier(.4,0,.2,1);

  --container:   1240px;
  --header-h:    72px;

  --font:        'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* iOS safe-area inset for floating elements */
  --safe-bot:    env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ---------- 2. Reset / base --------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* sticky header is 72px → leave a comfortable visual offset */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* Belt-and-suspenders: prevent any descendant from causing horizontal scroll
     even if a stray element measures wider than 100vw (iOS Safari quirk). */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Mobile UX: gentle cyan tap-highlight instead of default black/blue. */
  -webkit-tap-highlight-color: rgba(14, 165, 233, .15);
  /* Reserve space for the fixed mobile sticky CTA so content never hides under it */
  padding-bottom: 0;
}

/* Make sure long, unbroken strings (URLs, emails, very long words) never
   blow up the layout on narrow phones. */
p, a, li, span, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
/* …but inline elements that are intentionally non-wrapping (price, badges,
   nowrap utilities) opt out via white-space:nowrap; the rule above only
   affects breakability, not whitespace handling. */
@media (max-width: 767px) {
  body.has-sticky-cta {
    padding-bottom: calc(76px + var(--safe-bot));
  }
}

img,
svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--c-water-700);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-water-500); }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-ink-900);
  margin: 0 0 .6em;
  line-height: 1.15;
}

p { margin: 0 0 1em; }

input, textarea, select { font: inherit; }

::selection { background: var(--c-water-300); color: var(--c-ink-900); }

/* Focus ring (consistent across the site) */
:focus-visible {
  outline: 3px solid var(--c-water-300);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Layout helpers ------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 480px) { .container { padding: 0 20px; } }
@media (min-width: 768px) { .container { padding: 0 28px; } }
@media (min-width: 1024px){ .container { padding: 0 32px; } }

.section {
  padding: 56px 0;
  position: relative;
}
@media (min-width: 768px) { .section { padding: 96px 0; } }

.section--tight { padding: 40px 0; }
@media (min-width: 768px) { .section--tight { padding: 64px 0; } }

.section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 0 4px;
}
@media (min-width: 768px) { .section__head { margin-bottom: 56px; } }

.section__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-water-600);
  background: var(--c-water-100);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.section__title {
  font-size: clamp(26px, 4vw, 44px);
  margin: 0 0 14px;
  line-height: 1.15;
}
.section__lead {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--c-muted);
  margin: 0;
}

/* ---------- 4. Buttons -------------------------------------------------- */
.btn {
  --bg: var(--c-water-500);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  min-height: 44px;
  padding: 13px 22px;
  border-radius: var(--radius-full);
  border: 0;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-base);
  box-shadow: 0 6px 18px -6px rgba(14,165,233,.45);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(14,165,233,.55); color: #fff; }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 52px; padding: 16px 28px; font-size: 16px; }
.btn--cta {
  --bg: var(--grad-cta);
  background-image: var(--grad-cta);
  box-shadow: 0 10px 28px -8px rgba(245,158,11,.5);
  position: relative;
}
.btn--cta:hover { box-shadow: 0 18px 36px -8px rgba(245,158,11,.6); }

/* Pulse-ring around primary CTA — subtle "alive" cue every ~4s */
.btn--cta.btn--pulse {
  position: relative;
  isolation: isolate;
}
.btn--cta.btn--pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(245,158,11,.55);
  animation: pulse-ring 3.4s cubic-bezier(.66,0,.34,1) infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .9; }
  60%  { transform: scale(1.18); opacity: 0;  }
  100% { transform: scale(1.18); opacity: 0;  }
}

.btn--ghost {
  --bg: transparent;
  --fg: var(--c-ink-900);
  border: 1.5px solid var(--c-ink-200);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--c-water-500); color: var(--c-water-700); background: var(--c-water-50); transform: translateY(-2px); }
.btn--white {
  --bg: #fff;
  --fg: var(--c-water-700);
  box-shadow: var(--shadow-md);
}
.btn--white:hover { color: var(--c-water-800); }
.btn--tg {
  --bg: linear-gradient(135deg, #229ED9 0%, #1c8bbf 100%);
  background-image: var(--bg);
  box-shadow: 0 10px 28px -8px rgba(34,158,217,.45);
}
.btn--block { display: inline-flex; width: 100%; }

/* ---------- 5. Header / Nav -------------------------------------------- */
/* Legacy .site-header / .nav / .brand / .lang / .burger / .mobile-nav rules
   removed 2026-05-08: they belonged to the pre-Material header that has been
   replaced by partials/header.ejs (.nav-mat-* in style-sidebar-material.css).
   The old header was already disabled via `body.sb-shell > header.site-header
   { display:none }`, so these rules were dead weight (~250 lines).
   js/public-site.js still calls querySelector('.site-header') but the result
   is null and the call is harmless. */

/* ---------- 6. Hero ----------------------------------------------------- */
.hero {
  position: relative;
  background: var(--grad-hero);
  overflow: hidden;
  padding: 48px 0 64px;
  isolation: isolate;
}
@media (min-width: 768px) { .hero { padding: 80px 0 110px; } }

.hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px;
  }
}

.hero__copy {
  min-width: 0;
  text-align: left;
}
@media (max-width: 899px) {
  .hero__copy { text-align: center; }
  .hero__copy .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__copy .hero__actions { justify-content: center; }
  .hero__copy .hero__stats { margin-left: auto; margin-right: auto; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-water-700);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-water-200);
  padding: 7px 13px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}
.hero__eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-water-500);
  box-shadow: 0 0 0 4px rgba(14,165,233,.18);
  animation: pulse 2s infinite ease-in-out;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(14,165,233,.18); }
  50% { box-shadow: 0 0 0 8px rgba(14,165,233,.05); }
}

.hero__title {
  font-size: clamp(28px, 6.2vw, 60px);
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -.03em;
  word-wrap: break-word;
  hyphens: auto;
}
.hero__title .grad {
  background: linear-gradient(120deg, var(--c-water-500) 0%, var(--c-water-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero__lead {
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--c-ink-700);
  margin: 0 0 28px;
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 480px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero__stat-num {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--c-water-700);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero__stat-label {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 6px;
  line-height: 1.3;
}

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: min(520px, 92vw);
  margin: 0 auto;
  width: 100%;
  /* Prevent floating badges/bottle from spilling out of viewport */
  overflow: visible;
  will-change: transform;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 50% 50%, var(--c-water-300), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.hero__bottle {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(14,165,233,.35));
  animation: float 6s ease-in-out infinite;
  /* Parallax JS sets --px / --py vars */
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--float-y, 0px)), 0);
}
@keyframes float {
  0%, 100% { --float-y: 0px; }
  50%      { --float-y: -14px; }
}
/* Fallback animation for browsers w/o CSS variable animation in keyframes */
@supports not (animation-name: float) {
  .hero__bottle { animation: floatLegacy 6s ease-in-out infinite; }
}
@keyframes floatLegacy {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero__badge {
  position: absolute;
  z-index: 2;
  background: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 60%;
}
@media (min-width: 540px) {
  .hero__badge { font-size: 13px; padding: 12px 16px; gap: 10px; }
}
.hero__badge .ic {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-water-100);
  color: var(--c-water-700);
  border-radius: 10px;
  flex-shrink: 0;
}
.hero__badge--1 { top: 8%;    left: 0;  animation: float 6s ease-in-out infinite; }
.hero__badge--2 { bottom: 12%; right: 0; animation: float 7s ease-in-out infinite reverse; }
@media (min-width: 600px) {
  .hero__badge--1 { left: -2%; }
  .hero__badge--2 { right: -2%; }
}

/* ---------- 7. Page header (inner pages) ------------------------------- */
.page-hero {
  background: var(--grad-hero);
  padding: 56px 0 48px;
  position: relative;
}
@media (min-width: 768px) { .page-hero { padding: 96px 0 80px; } }

.page-hero__title {
  font-size: clamp(26px, 4.5vw, 50px);
  margin: 12px 0 12px;
  letter-spacing: -.02em;
  word-wrap: break-word;
}
.page-hero__lead {
  color: var(--c-muted);
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 640px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--c-muted);
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li + li::before { content: "\203A"; margin-right: 8px; opacity: .6; }
.crumbs a { color: var(--c-water-700); }
.crumbs .is-active { color: var(--c-ink-700); font-weight: 500; }

/* ---------- 8. Cards ---------------------------------------------------- */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-ink-200);
  padding: 24px;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-water-200);
}

/* Product cards */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 540px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 900px) {
  .products-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, var(--c-water-50) 100%);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  text-decoration: none;
  color: inherit;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-water);
  border-color: var(--c-water-300);
}
.product-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--c-water-200), transparent 60%);
  filter: blur(30px);
  opacity: .6;
  pointer-events: none;
}
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1;
}
.product-card__media img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--t-base);
  filter: drop-shadow(0 14px 24px rgba(14,165,233,.2));
}
.product-card:hover .product-card__media img { transform: scale(1.06) translateY(-4px); }

.product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--grad-cta);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--radius-full);
}
.product-card__volume {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(255,255,255,.9);
  color: var(--c-water-700);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-water-200);
  backdrop-filter: blur(6px);
}

.product-card__body {
  position: relative;
  z-index: 1;
  padding: 8px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-card__name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--c-ink-900);
}
.product-card__desc {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0;
  flex: 1;
}
.product-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.product-card__price {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-water-700);
  letter-spacing: -.01em;
}
.product-card__price small { font-size: 13px; font-weight: 500; color: var(--c-muted); }
.product-card__btn {
  margin-top: 12px;
  width: 100%;
  background: var(--grad-cta);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--t-fast), box-shadow var(--t-base);
  box-shadow: 0 6px 16px -6px rgba(245,158,11,.5);
}
.product-card__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(245,158,11,.6); }

/* Tara grid (home formats) */
.formats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 540px) { .formats-grid { gap: 18px; } }
@media (min-width: 700px) { .formats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.format-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 14px 20px;
  background: linear-gradient(180deg, #fff 0%, var(--c-water-50) 100%);
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  overflow: hidden;
}
@media (min-width: 700px) { .format-tile { padding: 28px 16px 22px; } }

.format-tile:hover {
  transform: translateY(-6px);
  border-color: var(--c-water-300);
  box-shadow: var(--shadow-water);
}
.format-tile img {
  height: 130px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(14,165,233,.22));
  transition: transform var(--t-base);
}
@media (min-width: 700px) { .format-tile img { height: 160px; } }

.format-tile:hover img { transform: translateY(-4px) scale(1.04); }
.format-tile__name {
  margin-top: 14px;
  font-weight: 700;
  font-size: 17px;
  color: var(--c-ink-900);
}
.format-tile__sub { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

/* ---------- 9. Features (icon grid) ----------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px){ .features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.feature {
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
@media (min-width: 768px) { .feature { padding: 28px; } }

.feature:hover {
  transform: translateY(-4px);
  border-color: var(--c-water-300);
  box-shadow: var(--shadow-md);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--c-water-100);
  color: var(--c-water-700);
  margin-bottom: 18px;
  font-size: 24px;
}
.feature__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.feature__text {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- 10. Process (timeline) ------------------------------------ */
.process {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.process__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  counter-increment: step;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -18px;
  left: 24px;
  background: var(--grad-water);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 18px -6px rgba(14,165,233,.5);
  letter-spacing: .04em;
}
.process__step:hover {
  transform: translateY(-4px);
  border-color: var(--c-water-300);
  box-shadow: var(--shadow-md);
}
.process__step h4 {
  margin: 8px 0 8px;
  font-size: 18px;
  color: var(--c-ink-900);
}
.process__step p {
  margin: 0;
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.55;
}

/* ---------- 11. Calculator -------------------------------------------- */
.calc {
  position: relative;
  background: linear-gradient(135deg, var(--c-water-700) 0%, var(--c-water-900) 100%);
  border-radius: var(--radius-xl);
  padding: 32px 20px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(7,89,133,.5);
}
@media (min-width: 540px) { .calc { padding: 40px 28px; } }
@media (min-width: 768px) { .calc { padding: 56px 48px; } }

.calc::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(125,211,252,.5), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}

.calc__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .calc__inner { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } }

.calc__title {
  font-size: clamp(22px, 3vw, 34px);
  color: #fff;
  margin: 0 0 10px;
}
.calc__lead {
  color: rgba(255,255,255,.78);
  font-size: 15px;
  margin: 0 0 24px;
  max-width: 540px;
}

.calc-gender {
  display: inline-flex;
  background: rgba(255,255,255,.1);
  padding: 4px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.calc-gender__btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  /* 44px touch target (was 40px). */
  min-height: 44px;
  transition: background var(--t-fast), color var(--t-fast);
}
.calc-gender__btn.is-active {
  background: #fff;
  color: var(--c-water-800);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.calc-range { margin-bottom: 22px; }
.calc-range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.calc-range__label {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.calc-range__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.calc-range__value small { font-size: 13px; font-weight: 500; opacity: .7; margin-left: 4px; }

.calc-range__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  outline: none;
  cursor: pointer;
}
.calc-range__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.18);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.calc-range__slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-range__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.calc-range__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .55;
  margin-top: 8px;
  letter-spacing: .04em;
}

.calc-result {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  backdrop-filter: blur(10px);
}
@media (min-width: 540px) { .calc-result { padding: 28px; } }

.calc-result__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .8;
  margin-bottom: 8px;
}
.calc-result__num {
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #ffffff 0%, #bae6fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.calc-result__unit {
  display: block;
  font-size: 14px;
  margin-top: 8px;
  opacity: .8;
}
.calc-result__warn {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-top: 18px;
  line-height: 1.5;
}

/* ---------- 12. About / split sections -------------------------------- */
.split {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 60px; } }
.split--reverse > :first-child { order: 2; }
@media (min-width: 900px) { .split--reverse > :first-child { order: initial; } }

.split__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(12,74,110,.35) 100%);
  pointer-events: none;
}

.split__title { font-size: clamp(24px, 3.5vw, 38px); margin-bottom: 18px; }
.split__text { color: var(--c-ink-600); margin-bottom: 24px; }

.kpi-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
  list-style: none;
  padding: 0;
}
.kpi-list li {
  background: var(--c-water-50);
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--c-water-200);
}
.kpi-list b {
  display: block;
  font-size: 22px;
  color: var(--c-water-700);
  letter-spacing: -.01em;
  font-weight: 800;
}
.kpi-list span { font-size: 13px; color: var(--c-muted); }

/* ---------- 13. CTA banner -------------------------------------------- */
.cta-banner {
  position: relative;
  background: var(--grad-water);
  border-radius: var(--radius-xl);
  padding: 36px 20px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-water);
}
@media (min-width: 540px) { .cta-banner { padding: 48px 32px; } }
@media (min-width: 768px) { .cta-banner { padding: 72px 56px; } }

.cta-banner::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.cta-banner__title {
  position: relative;
  font-size: clamp(22px, 3.4vw, 36px);
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
.cta-banner__lead {
  position: relative;
  color: rgba(255,255,255,.85);
  font-size: 16px;
  max-width: 580px;
  margin: 0 auto 24px;
}
.cta-banner__actions {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 100%;
}

/* ---------- 14. News list --------------------------------------------- */
.news-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  text-decoration: none;
  color: inherit;
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-water-300);
  box-shadow: var(--shadow-lg);
}
.news-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-water-50);
}
.news-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.news-card:hover .news-card__img img { transform: scale(1.06); }
.news-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.news-card__date {
  font-size: 12px;
  color: var(--c-water-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.news-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink-900);
  margin: 0;
  line-height: 1.35;
}

/* ---------- 15. Forms ------------------------------------------------- */
.form {
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 540px) { .form { padding: 28px; } }
@media (min-width: 768px) { .form { padding: 36px; } }

.form__title { font-size: 22px; margin: 0 0 20px; }

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-700);
}
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 12px 16px;
  min-height: 44px;
  border: 1.5px solid var(--c-ink-200);
  border-radius: var(--radius);
  background: #fff;
  /* 16px+ on mobile prevents iOS auto-zoom on focus. Bumped from 15px → 16px
     across the breakpoint so phone forms don't suddenly zoom in. Desktop look
     barely changes (1px tighter). */
  font-size: 16px;
  color: var(--c-ink-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--c-water-500);
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}
.form__textarea { resize: vertical; min-height: 120px; }

.alert {
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.alert--success { background: var(--c-success-bg); color: #065f46; border: 1px solid #6ee7b7; }
.alert__ic {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-success); color: #fff; border-radius: 50%;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}

/* ---------- 16. Contacts ----------------------------------------------*/
.contact-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 36px; } }

.contact-card {
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
@media (min-width: 540px) { .contact-card { padding: 24px; } }

.contact-card:hover { border-color: var(--c-water-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.contact-card__head {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-water-600);
  margin-bottom: 10px;
}
.contact-card__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.contact-card__row {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 12px; font-size: 15px; color: var(--c-ink-700);
}
.contact-card__row .ic {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-water-100); color: var(--c-water-700);
  border-radius: 10px; flex-shrink: 0; font-size: 16px;
}
.contact-card__row a { color: var(--c-water-700); font-weight: 600; }
.contact-card__row a:hover { color: var(--c-water-800); }

.map-placeholder {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--c-water-100) 0%, var(--c-water-200) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-water-200);
}
.map-placeholder__inner {
  text-align: center;
  color: var(--c-water-800);
  padding: 24px;
}
.map-placeholder__inner .ic {
  display: inline-flex;
  width: 56px; height: 56px;
  background: #fff;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}

.social {
  display: inline-flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.social a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-water-100);
  color: var(--c-water-700);
  border-radius: 50%;
  font-size: 18px;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.social a:hover { background: var(--c-water-500); color: #fff; transform: translateY(-3px); }

/* ---------- 17. Telegram block ----------------------------------------*/
.tg-block {
  background: linear-gradient(135deg, #229ED9 0%, #1c8bbf 100%);
  border-radius: var(--radius-xl);
  padding: 32px 20px;
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(34,158,217,.5);
}
@media (min-width: 540px) { .tg-block { padding: 40px 28px; } }
@media (min-width: 768px) { .tg-block { padding: 64px 48px; } }

.tg-block h3 { color: #fff; margin: 0 0 12px; font-size: clamp(20px, 3vw, 30px); }
.tg-block p { color: rgba(255,255,255,.85); margin: 0 auto 24px; max-width: 540px; }

/* ---------- 18. Footer ------------------------------------------------*/
.site-footer {
  background: var(--grad-dark);
  color: rgba(255,255,255,.78);
  /* Add safe-area-inset-bottom so the footer clears the iOS home indicator. */
  padding: 56px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  margin-top: 64px;
  position: relative;
}
@media (min-width: 768px) {
  .site-footer { padding: 64px 0 calc(32px + env(safe-area-inset-bottom, 0px)); margin-top: 80px; }
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 900px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer__brand {
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 600px) and (max-width: 899px) { .footer__brand { grid-column: 1 / -1; } }

.footer__brand img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer__about { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.65); max-width: 320px; margin: 0; }

.footer__title {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 16px;
  font-weight: 700;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer__list a {
  color: rgba(255,255,255,.7);
  font-size: 14.5px;
  transition: color var(--t-fast);
}
.footer__list a:hover { color: var(--c-water-300); }

.footer__phone {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px;
}
.footer__phone .ic {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.08);
  color: var(--c-water-300);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer__phone .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin-bottom: 2px;
}
.footer__phone a { color: #fff; font-weight: 600; font-size: 15px; }
.footer__phone a:hover { color: var(--c-water-300); }

.footer__social {
  display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
}
.footer__social a {
  /* 44×44 touch target (was 40×40 — under Apple HIG min). */
  width: 44px; height: 44px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
  font-size: 16px;
}
.footer__social a:hover { background: var(--c-water-500); transform: translateY(-3px); }

.footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

/* ---------- 18b. Sticky CTA (mobile) ---------------------------------- */
/* Floating order button — hidden on desktop, sticky bottom on mobile */
.fab {
  position: fixed;
  z-index: 80;
  background: var(--grad-cta);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 14px 30px -8px rgba(245,158,11,.55);
  transition: transform var(--t-fast), box-shadow var(--t-base), opacity var(--t-base);
}
.fab:hover { color: #fff; box-shadow: 0 20px 40px -8px rgba(245,158,11,.7); }

/* Mobile (≤767px): full-width sticky pill above content */
@media (max-width: 767px) {
  .fab {
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-bot));
    padding: 14px 22px;
    border-radius: var(--radius-full);
    min-height: 52px;
    text-align: center;
  }
  .fab.is-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }
}
/* Desktop (≥768px): tucked bottom-right */
@media (min-width: 768px) {
  .fab {
    right: calc(24px + var(--safe-right));
    bottom: calc(24px + var(--safe-bot));
    padding: 16px 26px;
    border-radius: var(--radius-full);
  }
  .fab:hover { transform: translateY(-3px); }
}

/* ---------- 19. Reveal animations ------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.4,0,.2,1), transform 700ms cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn--cta.btn--pulse::after { display: none; }
  .hero__bottle { animation: none; transform: none; }
}

/* ---------- 19b. Toast notifications --------------------------------- */
.toast-stack {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  width: 360px;
}
@media (max-width: 540px) {
  .toast-stack { left: 12px; right: 12px; width: auto; }
}

.toast {
  pointer-events: auto;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 14px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--c-ink-800);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 350ms cubic-bezier(.4,0,.2,1), opacity 350ms cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(120%); opacity: 0; }
.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-water-500);
}
.toast--success::before { background: var(--c-success); }
.toast--error::before   { background: #ef4444; }

.toast__ic {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-water-100);
  color: var(--c-water-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.toast--success .toast__ic { background: var(--c-success-bg); color: #065f46; }
.toast--error   .toast__ic { background: #fee2e2; color: #b91c1c; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 700; color: var(--c-ink-900); margin: 0 0 2px; line-height: 1.3; }
.toast__text  { margin: 0; color: var(--c-ink-600); font-size: 13.5px; line-height: 1.45; }
.toast__close {
  border: 0;
  background: transparent;
  color: var(--c-ink-400);
  padding: 0;
  /* 32×32 hit area (was 24×24 — too small to reliably tap on touch). */
  width: 32px; height: 32px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}
.toast__close:hover { color: var(--c-ink-700); background: var(--c-ink-100); }

/* ---------- 20. Misc helpers ----------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; } .mb-6 { margin-bottom: 48px; }
.no-scroll { overflow: hidden; }

/* ---------- 21. Empty state (connect placeholder) --------------------- */
.empty-state {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 36px 20px;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
@media (min-width: 540px) { .empty-state { padding: 48px 28px; } }

.empty-state__icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--c-water-100);
  color: var(--c-water-600);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 32px;
}
@media (min-width: 540px) { .empty-state__icon { width: 80px; height: 80px; font-size: 36px; } }

.empty-state h2 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 12px; }
.empty-state p { color: var(--c-muted); margin-bottom: 24px; }
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- 22. Inline icon system ---------------------------------- */
.ic-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -.125em;
  flex-shrink: 0;
}

/* ---------- 23. About / certs ---------------------------------------- */
.cert-grid {
  display: grid;
  gap: 18px;
  /* 160px floor so 2 cards fit on 320–360px viewports without overflowing. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
@media (min-width: 540px) { .cert-grid { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.cert {
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
@media (min-width: 540px) { .cert { padding: 18px; } }

.cert:hover { border-color: var(--c-water-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cert__img {
  aspect-ratio: 3 / 4;
  background: var(--c-water-50);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert__img img { width: 100%; height: 100%; object-fit: cover; }
.cert__title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.cert__sub { font-size: 13px; color: var(--c-muted); margin: 0; }

/* ============================================================
   Map picker (Leaflet + OpenStreetMap)
   ============================================================ */

.map-picker {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  font-family: inherit;
}

#map-picker .map-picker__map,
.map-picker__map {
  width: 100%;
  height: 380px;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef2f4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* 2026-05-08: isolation создаёт собственный stacking context, чтобы
     внутренние z-index Leaflet (400/700/1000) не пробивали header/sidebar. */
  isolation: isolate;
  position: relative;
  z-index: 0;
}

#map-picker {
  width: 100%;
}

.map-picker__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.map-picker__search {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--c-ink-800);
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.map-picker__search::placeholder {
  color: var(--c-ink-400);
}

.map-picker__search:focus {
  border-color: var(--c-water-500);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.map-picker__find,
.map-picker__geo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background: var(--c-water-600);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
  min-height: 44px;
}

.map-picker__find:hover,
.map-picker__geo:hover {
  background: var(--c-water-700);
}

.map-picker__find:active,
.map-picker__geo:active {
  transform: translateY(1px);
}

.map-picker__geo {
  background: #fff;
  color: var(--c-water-600);
  border-color: var(--c-ink-200);
}

.map-picker__geo:hover {
  background: var(--c-ink-100);
  color: var(--c-water-700);
}

.map-picker__geo-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.map-picker__status {
  min-height: 1.4rem;
  font-size: 0.9rem;
  color: var(--c-ink-600);
}

.map-picker__status--error {
  color: #b91c1c;
}

/* Make sure Leaflet attribution stays readable on the rounded card. */
.map-picker .leaflet-control-attribution {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 540px) {
  .map-picker__map { height: 320px; }
  .map-picker__geo-label { display: none; }
  .map-picker__geo { padding: 0.65rem 0.9rem; }
  .map-picker__controls { flex-direction: column; align-items: stretch; }
  .map-picker__find,
  .map-picker__geo { width: 100%; }
}

/* Make sure the search input never triggers iOS auto-zoom (16px+) and the
   buttons in map-picker always have a tap-highlight inherited from body. */
.map-picker__search { font-size: 16px; }

/* ============================================================
   24. Auth pages helpers (login / register / access-by-1c-code)
   Унификация: цвета через --c-water-*, без хардкоднутого #1665d8.
   ============================================================ */

/* Узкий wrapper для одностраничных форм (login/register/quick-order). */
.auth-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 40px 16px 64px;
}
.auth-wrap--narrow { max-width: 540px; }
.auth-wrap--wide   { max-width: 720px; }

@media (min-width: 540px) {
  .auth-wrap { padding: 56px 24px 80px; }
}

.auth-title {
  font-size: clamp(24px, 4vw, 32px);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.auth-lead {
  color: var(--c-muted);
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
}

/* Колонка форм: единый промежуток между полями. */
.form--stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Подсказка под полем. */
.form__hint {
  font-size: 12.5px;
  color: var(--c-muted);
  margin-top: 2px;
}

/* Радиогруппы / fieldset'ы в формах. */
.form__group {
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.form__group--row { flex-direction: row; gap: 18px; flex-wrap: wrap; }
.form__group > legend {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-ink-800);
  padding: 0 6px;
}
.form__radio,
.form__checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--c-ink-800);
  line-height: 1.45;
}
.form__radio input,
.form__checkbox input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--c-water-500);
  flex-shrink: 0;
}

/* Алёрты (info / error / success) без inline-стилей. */
.alert--info {
  background: var(--c-water-50);
  color: var(--c-water-800);
  border: 1px solid var(--c-water-200);
}
.alert--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Текстовая ссылка-CTA в формах (заменяет inline color:#1665d8). */
.text-link {
  color: var(--c-water-700);
  font-weight: 600;
  text-decoration: none;
}
.text-link:hover { color: var(--c-water-800); text-decoration: underline; }

/* Резерв-кнопка для повторной отправки SMS / счётчика. */
.btn-link {
  background: none;
  border: 0;
  color: var(--c-water-700);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
  font: inherit;
  font-weight: 500;
}
.btn-link:hover { color: var(--c-water-800); }
.btn-link:disabled {
  cursor: not-allowed;
  opacity: .55;
  text-decoration: none;
}

/* Сброс отступов вокруг блока с разделителем. */
.auth-divider {
  height: 1px;
  background: var(--c-ink-200);
  border: 0;
  margin: 24px 0;
}

/* OTP-инпут (центрированный, монопространственный). */
.form__input--otp {
  text-align: center;
  font-size: 24px !important;
  letter-spacing: .35em !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Код клиента 1С — моноширинный, 9 цифр. */
.form__input--code {
  letter-spacing: .12em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
}

/* ============================================================
   25. Quick-order (заявка без регистрации)  — было qo-*
   ============================================================ */

.qorder-wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 80px; }
@media (min-width: 540px) { .qorder-wrap { padding: 32px 24px 80px; } }

.qorder-form {
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 540px) { .qorder-form { padding: 28px; } }

.qorder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.qorder-field { display: flex; flex-direction: column; gap: 6px; }
.qorder-field--full { grid-column: 1 / -1; }
.qorder-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink-600);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.qorder-req { color: #dc2626; }
.qorder-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-ink-200);
  border-radius: var(--radius);
  /* 16px on mobile to avoid iOS auto-zoom on focus (was 15px). */
  font-size: 16px;
  background: #fff;
  font-family: inherit;
  color: var(--c-ink-900);
  transition: border-color .15s, box-shadow .15s;
  min-height: 44px;
}
.qorder-input:focus {
  outline: none;
  border-color: var(--c-water-500);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}
textarea.qorder-input { resize: vertical; min-height: 80px; }

.qorder-section-title {
  margin: 28px 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink-900);
}
.qorder-hint { margin: 0 0 16px; color: var(--c-muted); font-size: 13.5px; }

.qorder-banner {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}
.qorder-banner--err  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.qorder-banner--info { background: var(--c-water-50); color: var(--c-water-800); border-color: var(--c-water-200); }

.qorder-items { display: flex; flex-direction: column; gap: 10px; }
.qorder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--c-ink-50);
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius);
  transition: border-color .15s, background .15s;
}
.qorder-item:hover { border-color: var(--c-water-200); background: var(--c-water-50); }
.qorder-item__left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.qorder-item__img,
.qorder-item__placeholder {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qorder-item__img { object-fit: contain; padding: 4px; }
.qorder-item__placeholder .material-symbols-rounded { color: var(--c-water-500); font-size: 28px; }
.qorder-item__info { min-width: 0; }
.qorder-item__name { font-weight: 600; font-size: 14.5px; color: var(--c-ink-900); }
.qorder-item__price { color: var(--c-muted); font-size: 13px; margin-top: 2px; }

.qorder-qty {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--c-ink-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.qorder-qty__btn {
  background: transparent;
  border: 0;
  /* 44×44 touch target (Apple HIG); was 36×36 — too small for fingers. */
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 18px;
  color: var(--c-ink-600);
  transition: background .12s, color .12s;
  line-height: 1;
}
.qorder-qty__btn:hover { background: var(--c-water-50); color: var(--c-water-700); }
.qorder-qty__input {
  width: 50px;
  text-align: center;
  border: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  -moz-appearance: textfield;
  color: var(--c-ink-900);
}
.qorder-qty__input::-webkit-outer-spin-button,
.qorder-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qorder-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
  margin: 24px 0 16px;
  padding: 14px 18px;
  background: var(--c-water-50);
  border: 1px solid var(--c-water-100);
  border-radius: var(--radius);
}
.qorder-total__label { font-size: 14px; color: var(--c-ink-600); }
.qorder-total__sum   { font-size: 24px; font-weight: 700; color: var(--c-water-700); font-variant-numeric: tabular-nums; }
.qorder-total__unit  { color: var(--c-muted); font-size: 14px; }

.qorder-actions { display: flex; justify-content: flex-end; }

.qorder-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qorderSpin .7s linear infinite;
  display: inline-block;
}
@keyframes qorderSpin { to { transform: rotate(360deg); } }
.qorder-btn.is-loading .qorder-btn__label { display: none !important; }
.qorder-btn:not(.is-loading) .qorder-btn__loader { display: none !important; }

.qorder-success {
  background: #fff;
  border: 1px solid var(--c-success);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(16, 185, 129, .1);
}
.qorder-success__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: 16px;
}
.qorder-success__title { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--c-ink-900); }
.qorder-success__text  { margin: 0 0 24px; color: var(--c-ink-600); font-size: 15px; }

@media (max-width: 640px) {
  .qorder-grid { grid-template-columns: 1fr; }
  .qorder-field--full { grid-column: 1 / -1; }
  .qorder-form { padding: 16px; }
  .qorder-item { flex-direction: column; align-items: stretch; gap: 12px; }
  .qorder-item__left { width: 100%; }
  .qorder-qty { align-self: flex-end; }
  .qorder-actions { justify-content: stretch; }
  .qorder-actions .btn { width: 100%; }
}

/* ============================================================
   26. .prose — typography для рендеренного markdown (news/vacancy)
   ============================================================ */

.prose {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink-800);
  word-wrap: break-word;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  margin-top: 1.6em;
  margin-bottom: .6em;
  color: var(--c-ink-900);
  line-height: 1.3;
}
.prose h1 { font-size: 1.6rem; }
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.15rem; }
.prose p  { margin: 0 0 1em; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 1em 1.5em; padding: 0; }
.prose li { margin-bottom: .35em; }
.prose a  { color: var(--c-water-700); text-decoration: underline; }
.prose a:hover { color: var(--c-water-800); }
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 1em 0;
}
.prose blockquote {
  border-left: 4px solid var(--c-water-300);
  padding: .4em 0 .4em 1em;
  color: var(--c-ink-600);
  margin: 1em 0;
  background: var(--c-ink-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose code {
  background: var(--c-ink-100);
  padding: .12em .35em;
  border-radius: 4px;
  font-size: .92em;
}

/* ============================================================
   27. Vacancy card (compact list)
   ============================================================ */

.vac-list {
  display: grid;
  gap: 14px;
  max-width: 780px;
}
.vac-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.vac-card:hover {
  border-color: var(--c-water-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}
.vac-card__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink-900);
}
.vac-card__meta {
  margin: 0;
  color: var(--c-ink-600);
  font-size: 14.5px;
  line-height: 1.5;
}
.vac-card__more {
  margin: 8px 0 0;
  color: var(--c-water-700);
  font-size: 14px;
  font-weight: 600;
}

/* ============================================================
   28. Mobile / small-screen polish
   ============================================================ */

@media (max-width: 540px) {
  /* Hero/page-hero compact spacing on phones */
  .page-hero { padding: 36px 0 28px; }
  .page-hero__title { font-size: clamp(22px, 6vw, 30px); }
  .page-hero__lead { font-size: 14.5px; }

  /* Crumbs не должны вылезать за viewport */
  .crumbs { font-size: 12px; gap: 6px; }

  /* Section paddings tighter */
  .section { padding: 36px 0; }

  /* Product cards: 1 column on small phones, full-width buttons */
  .products-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Forms full-width buttons on phone */
  .form .btn,
  .form--stack .btn { width: 100%; }

  /* CTA banner less padding */
  .cta-banner { padding: 28px 18px; }
  .cta-banner__title { font-size: 22px; }
  .cta-banner__actions .btn { width: 100%; }

  /* Empty state padding */
  .empty-state { padding: 28px 16px; }

  /* Long links don't break out */
  body, p, a, span, h1, h2, h3 { word-wrap: break-word; overflow-wrap: anywhere; }

  /* Contact page: sticky aside (map + tg block) shouldn't stick on phone — it
     was originally meant for desktop two-column layout; on 1 column it pins
     the map across all sections which is confusing. Override inline style. */
  .contact-grid > aside[style*="sticky"] { position: static !important; top: auto !important; }

  /* Hero "actions" — buttons full-width on phones for easier thumb reach. */
  .hero__actions .btn,
  .hero-2026__actions .btn { width: 100%; flex: 1 1 100%; }

  /* Final-CTA buttons full-width. */
  .final-cta-2026__actions .btn,
  .tg-cta-2026__btn-row .btn { width: 100%; flex: 1 1 100%; }

  /* Telegram block (contacts page) — buttons full-width. */
  .tg-block .btn { width: 100%; }
}

/* Extra-narrow safety: ensure ANY <table> the markdown prose can produce
   scrolls horizontally inside a wrapper rather than blowing out. The markdown
   renderer doesn't add a wrapper, so we make the table itself scroll-friendly. */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.prose table th,
.prose table td { padding: 8px 12px; border: 1px solid var(--c-ink-200); }
/* Long URLs inside markdown body shouldn't break layout. */
.prose a, .prose code { word-break: break-word; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  /* On small tablets — products max 2 cols (matches existing 540 grid) */
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* iPhone SE / Android 320–360 wide — extra tight (matches home-2026 file). */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .auth-wrap { padding: 28px 12px 56px; }
  .qorder-wrap { padding: 20px 12px 64px; }
  /* Reduce hero/page-hero padding even more. */
  .page-hero { padding: 28px 0 20px; }
}

/* ============================================================
   29. PHONE INPUT (с зафиксированным +998)
   2026-05-09: единый компонент — пользователь вводит только 9 цифр,
   префикс +998 встроен слева как readonly. Backend получает name="phone".
   ============================================================ */
.phone-input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1.5px solid var(--c-ink-200, #e5e9f0);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  min-height: 48px;
}
.phone-input:focus-within {
  border-color: var(--c-water-500, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}
.phone-input__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--c-ink-50, #f6f8fb);
  color: var(--c-ink-700, #374151);
  font-weight: 600;
  font-size: 16px;
  border-right: 1px solid var(--c-ink-200, #e5e9f0);
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
.phone-input__field {
  flex: 1;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--c-ink-900, #0f172a);
  letter-spacing: 0.5px;
  min-width: 0;
}
.phone-input__field::placeholder { color: var(--c-ink-400, #94a3b8); }

/* «Позвонить» — кнопка-ссылка (для tel:) — всегда заметная на мобиле. */
.btn--call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14.5px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(22,163,74,.25);
  transition: transform .12s, box-shadow .12s;
}
.btn--call:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22,163,74,.35); }
.btn--call .ic-svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================
   30. AUTH-FORMS MOBILE UX (login / register / access-by-1c-code /
       forgot-password / sms-*). iOS HIG: tap targets >=44px, font-size
       >=16px (anti-zoom), full-width CTA, comfortable spacing.
   ============================================================ */

/* Password input wrapper with eye-toggle button on the right. */
.pw-input {
  position: relative;
  display: block;
  width: 100%;
}
.pw-input > .form__input {
  padding-right: 52px; /* room for the toggle button */
}
.pw-input__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--c-ink-500, #64748b);
  cursor: pointer;
  padding: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background .15s;
}
.pw-input__toggle:hover,
.pw-input__toggle:focus-visible {
  color: var(--c-water-700, #0369a1);
  background: var(--c-water-50, #f0f9ff);
  outline: none;
}
.pw-input__toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  pointer-events: none;
}
.pw-input__toggle .pw-input__ic--hide { display: none; }
.pw-input.is-shown .pw-input__ic--show { display: none; }
.pw-input.is-shown .pw-input__ic--hide { display: block; }

/* Tablet / large phone: ensure auth-wrap stays readable. */
@media (max-width: 540px) {
  .auth-wrap {
    padding: 28px 16px 56px;
  }
  .auth-title {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.2;
  }
  .auth-lead {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Inputs >=44px and 16px font (anti-zoom on iOS Safari). */
  .form__input,
  .form__select,
  .form__textarea {
    min-height: 48px;
    padding: 13px 16px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* Phone input — bigger tap area, prefix readable. */
  .phone-input { min-height: 52px; border-radius: 12px; }
  .phone-input__prefix { padding: 0 12px; font-size: 16px; }
  .phone-input__field { padding: 14px 12px; font-size: 16px; }

  /* OTP single-input (registration step 'otp') — big & readable. */
  .form__input--otp {
    min-height: 56px;
    font-size: 26px !important;
    letter-spacing: .4em !important;
  }

  /* 1C client-code input — also bigger on mobile. */
  .form__input--code {
    min-height: 48px;
    font-size: 18px;
  }

  /* Radio / checkbox tap-target on mobile: comfortable spacing. */
  .form__radio,
  .form__checkbox {
    font-size: 15px;
    min-height: 44px;
    padding: 4px 0;
    align-items: center;
  }
  .form__radio input,
  .form__checkbox input {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }

  /* Submit buttons — full-width, comfortable height, prominent. */
  .form--stack .btn,
  .form--stack .btn--cta,
  .form--stack .btn--lg,
  .form--stack .btn--block {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 20px;
  }

  /* Eye-toggle: keep within tappable area on mobile. */
  .pw-input__toggle { width: 48px; height: 48px; }
  .pw-input__toggle svg { width: 24px; height: 24px; }

  /* Alerts comfortable spacing on small screens. */
  .alert--error,
  .alert--info {
    font-size: 14.5px;
    line-height: 1.5;
    padding: 12px 14px;
  }

  /* Tighter spacing for stack on phone. */
  .form--stack { gap: 14px; }
  .form__field { margin-bottom: 0; }

  /* "Позвонить" call-button — full-width on phone for thumb reach. */
  .btn--call { width: 100%; justify-content: center; padding: 14px 20px; }

  /* hr divider in auth pages */
  .auth-divider { margin: 20px 0; }
}

/* Very narrow phones — 360 and below. */
@media (max-width: 360px) {
  .auth-title { font-size: 20px; }
  .auth-lead  { font-size: 14px; }
  .form__input--otp {
    font-size: 22px !important;
    letter-spacing: .3em !important;
  }
  .phone-input__prefix { padding: 0 10px; font-size: 15px; }
}

/* ============================================================
   31. PUBLIC LANDING MOBILE POLISH (2026-05-17)
   Контактная карта, контейнеры статьи (news/vacancy detail),
   форма заказа на продукции, footer-bottom, tg-block на контактах,
   product-card touch targets. Все правки — mobile-only внутри
   media-queries; desktop не затрагивается.
   ============================================================ */

/* --- Contacts map: responsive height + aside позиционирование --- */
.contacts-aside { align-self: start; }
/* Sticky карты — только когда есть 2 колонки (desktop >=900px). */
@media (min-width: 900px) {
  .contacts-aside { position: sticky; top: 96px; }
}
.contacts-map {
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 6px 24px rgba(15,23,42,.08);
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* --- News / vacancy detail "article-container" --- */
.article-container {
  max-width: 760px;
}
.article-cover {
  margin-bottom: 1.5rem;
}
.article-cover img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.article-back {
  margin-top: 2rem;
}

/* --- Products page order form --- */
.products-order-form {
  max-width: 680px;
  margin: 64px auto 0;
}
.products-order-lead {
  color: var(--c-muted);
  margin: 0 0 20px;
}

/* --- Mobile <=767: контакты, форма заказа, footer-bottom --- */
@media (max-width: 767px) {
  /* Контактная карта: ниже 300px вредно (Leaflet жмётся), 320px — норм. */
  .contacts-map { height: 320px; border-radius: 14px; }

  /* TG-block на /contacts: на мобиле меньше внутренний padding,
     кнопка full-width (там inline padding:32px 24px и width auto). */
  aside .tg-block,
  .contacts-aside .tg-block {
    padding: 24px 18px !important;
    margin-top: 18px !important;
  }
  aside .tg-block .btn,
  .contacts-aside .tg-block .btn {
    width: 100%;
    justify-content: center;
  }

  /* Products order form — на мобиле подвинуть ближе к карточкам. */
  .products-order-form { margin-top: 40px; padding: 20px; }

  /* Product card "Заказать" кнопка — уже full-width в CSS, проверяем
     min-height на тачскрине. */
  .product-card__btn { min-height: 48px; font-size: 15px; }

  /* Кнопка-CTA на delivery (внутри contact-card) — full-width. */
  .split .contact-card .btn--cta {
    width: 100%;
    justify-content: center;
  }

  /* Footer: список ссылок — крупнее tap-target, центрирование bottom. */
  .footer__list a {
    display: inline-block;
    padding: 4px 0;        /* увеличивает кликабельную зону */
    font-size: 15px;
  }
  .footer__phone a {
    display: inline-block;
    padding: 2px 0;
    font-size: 16px;       /* читаемее на маленьком экране */
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    align-items: center;
  }
  /* Соц-иконки footer — центр на мобиле */
  .footer__social { justify-content: center; }
  .footer__brand  { align-items: center; text-align: center; }
  .footer__about  { text-align: center; max-width: 360px; }
  .footer__brand img { margin: 0 auto; }

  /* News detail / vacancy detail заголовок — обрезать на узких. */
  .article-container .prose h1 { font-size: 1.4rem; }
  .article-container .prose h2 { font-size: 1.2rem; }
  .article-container .prose    { font-size: 15px; line-height: 1.65; }
  .article-cover { margin-bottom: 1rem; }

  /* news-card / vac-card — крупнее tap-target. */
  .vac-card { padding: 16px; }
  .news-card__body { padding: 14px 16px 18px; }

  /* page-hero на новости/детали: title clamp на узкие. */
  .page-hero__title { font-size: clamp(22px, 6.4vw, 30px); }
}

/* --- Очень узкие (<=390px / iPhone SE / Android lite) --- */
@media (max-width: 390px) {
  /* Карта чуть меньше — экономим vertical space. */
  .contacts-map { height: 280px; }

  /* contact-card: туже padding. */
  .contact-card { padding: 18px 16px; }
  .contact-card__head { font-size: 12px; }
  .contact-card__row { font-size: 14px; gap: 10px; }
  .contact-card__row .ic { width: 32px; height: 32px; }

  /* Product card: padding tighter. */
  .product-card__body { padding: 6px 16px 18px; }
  .product-card__media { padding: 18px; }
  .product-card__name { font-size: 16px; }
  .product-card__price { font-size: 20px; }

  /* News card title — обрезать длинные строки. */
  .news-card__title { font-size: 15px; }

  /* Format tile (home formats grid) — текст компактнее. */
  .format-tile__name { font-size: 15px; }

  /* Footer-list font slightly tighter. */
  .footer__list a { font-size: 14.5px; }
}

/* --- Telegram block (/contacts aside) — fallback for unscoped .tg-block --- */
/* contacts.ejs всё ещё имеет inline padding:32px 24px на .tg-block;
   на десктопе оставляем, на мобиле выше уже override'ом 24px 18px. */

/* --- Кнопка-CTA внутри delivery contact-card имеет inline margin-top:8px,
   на mobile наша full-width override это переопределяет — оставляем. */