/* Вариант A редизайна главной (Томми выбрал 2026-10-01, макет «Variant A — warm paper»).
   Подключается ТОЛЬКО в index.html: остальные страницы пока в старом виде. */
body.va {
  --va-paper: #F4F0E6;
  --va-ink: #0F1B33;
  --va-ink-2: #33405C;
  --va-muted: #4A5670;
  --va-line: #E2DCCB;
  --va-pill-line: #D8D1BD;
  --va-accent: #F2A516;
  --va-blue: #17458F;
  --va-ice: #CFE6EE;
  --va-head: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-head: var(--va-head);
  --blue: var(--va-ink);
  --light: var(--va-paper);
  background: var(--va-paper);
  color: var(--va-ink);
  font-family: var(--font-body);
}
.va .va-wrap { max-width: 1248px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.va h1, .va h2, .va h3 { font-family: var(--va-head); color: var(--va-ink); }
.va :focus-visible { outline: 3px solid var(--va-blue); outline-offset: 2px; }

/* Верхняя тёмная полоска */
.va-topbar { background: var(--va-ink); color: #D9E2F1; font-size: 14px; }
.va-topbar .va-wrap { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Шапка: белая, тёмный текст, жёлтая кнопка звонка */
.va .top-header { background: #fff; border-bottom: 1px solid var(--va-line); box-shadow: none; }
.va .site-nav a, .va .nav-drop-btn { color: var(--va-ink); font-weight: 600; }
.va .btn-call-sm { background: var(--va-accent) !important; color: var(--va-ink) !important; border-radius: 999px; font-weight: 700; box-shadow: none; }
.va .btn-sched-sm { border-color: var(--va-ink) !important; color: var(--va-ink) !important; border-radius: 999px; }

/* Кнопки */
.va .va-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 17px; text-decoration: none; box-sizing: border-box; }
.va .va-btn-lg { min-height: 60px; padding: 0 30px; font-size: 19px; }
.va .va-btn-accent { background: var(--va-accent); color: var(--va-ink); }
.va .va-btn-accent:hover { background: #E09700; }
.va .va-btn-outline { border: 2px solid var(--va-ink); color: var(--va-ink); }
.va .va-btn-outline:hover { background: #fff; }
.va .va-btn-dark { background: var(--va-ink); color: #fff; align-self: flex-start; }
.va .va-btn-dark:hover { background: var(--va-blue); }

/* Первый экран */
.va-hero { padding: 64px 0 56px; }
.va-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.va-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.va .va-ratings { justify-content: flex-start; margin: 0; gap: 8px; }
.va .va-ratings .rating-pill { min-height: 44px; box-sizing: border-box; background: #fff; border: 1px solid var(--va-pill-line); box-shadow: none; backdrop-filter: none; color: var(--va-ink); font-size: 14px; padding: 0 12px; }
.va .va-ratings .pill-label { color: var(--va-ink-2); }
.va .va-ratings .rating-pill strong { color: var(--va-ink); }
.va-eyebrow { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--va-blue); }
.va-hero h1 { margin: 0; font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.va-lead { margin: 0; font-size: 20px; line-height: 1.55; color: var(--va-ink-2); max-width: 560px; }
.va-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.va-offer { margin: 0; font-size: 16px; color: var(--va-ink-2); }
.va-offer strong { color: var(--va-ink); }
.va .hero-callback { margin: 4px 0 0; max-width: 520px; background: #fff; border: 1px solid var(--va-line); backdrop-filter: none; }
.va .hero-callback-title { color: var(--va-ink); }
.va .hero-callback input { border: 1px solid var(--va-pill-line); }
.va .hero-callback button { background: var(--va-ink); color: #fff; }
.va-hero-media { position: relative; min-height: 580px; }
.va-hero-media img { position: absolute; right: 0; top: 0; width: min(540px, 100%); height: 580px; object-fit: cover; border-radius: 28px; }
.va-temp { position: absolute; left: 0; bottom: 36px; width: 280px; box-sizing: border-box; padding: 24px 26px; border-radius: 22px; background: var(--va-ink); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.va-temp-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #B9C6DE; }
.va-temp-row { display: flex; align-items: baseline; gap: 12px; font-size: 18px; color: #D9E2F1; }
.va-temp-big { font-family: var(--va-head); font-weight: 800; font-size: 84px; line-height: .9; color: var(--va-ice); }
.va-temp-sub { padding-top: 12px; border-top: 1px solid #2C3B5C; font-size: 16px; }
.va-temp-mid { font-family: var(--va-head); font-weight: 700; font-size: 36px; line-height: 1; color: var(--va-ice); }

/* Полоса доверия */
.va-trust { padding: 32px 0; background: #fff; border-top: 1px solid var(--va-line); border-bottom: 1px solid var(--va-line); }
.va-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.va-trust-grid div { display: flex; flex-direction: column; gap: 4px; }
.va-trust-grid strong { font-size: 18px; }
.va-trust-grid span { font-size: 15px; color: var(--va-muted); }

/* «What's acting up?» */
.va-picker { padding: 80px 0 72px; }
.va-kicker { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A5A00; }
.va-kicker-blue { color: var(--va-blue); }
.va-picker h2, .va-fridge h2 { margin: 0; font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.01em; }
.va-picker-grid { margin-top: 32px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
.va-tabs { display: flex; flex-direction: column; gap: 10px; }
.va .va-tab { min-height: 56px; box-sizing: border-box; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 14px; border: 1px solid var(--va-pill-line); background: #fff; color: var(--va-ink); font-size: 18px; font-weight: 600; text-align: left; cursor: pointer; }
.va .va-tab[aria-pressed="true"] { background: var(--va-ink); border-color: var(--va-ink); color: #fff; }
.va-panel { box-sizing: border-box; padding: 36px 40px; border-radius: 24px; background: #fff; border: 1px solid var(--va-line); display: flex; flex-direction: column; gap: 20px; }
.va-panel[hidden] { display: none; }
.va-panel h3 { margin: 0; font-weight: 700; font-size: 30px; line-height: 1.1; }
.va-symptoms { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.va-symptoms li { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; line-height: 1.4; }
.va-symptoms svg { flex-shrink: 0; margin-top: 2px; color: var(--va-blue); }
.va-panel p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--va-ink-2); }
.va-panel .va-note { padding: 12px 16px; border-radius: 12px; background: var(--va-ice); color: var(--va-ink); font-size: 16px; }
.va-panel-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.va-panel-cta a:not(.va-btn) { font-size: 17px; font-weight: 600; color: var(--va-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Холодильники */
.va-fridge { padding: 72px 0; background: var(--va-ice); }
.va-fridge-grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 64px; align-items: center; }
.va-fridge-grid img { width: 100%; height: 456px; object-fit: cover; border-radius: 24px; }
.va-fridge-grid > div { display: flex; flex-direction: column; gap: 22px; }
.va-fridge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.va-fridge-list div { display: flex; flex-direction: column; gap: 4px; }
.va-fridge-list strong { font-size: 19px; }
.va-fridge-list span { font-size: 16px; line-height: 1.5; color: #24324F; }
.va-fridge-list a { color: var(--va-blue); text-decoration: underline; }

/* Три шага */
.va-steps { padding: 72px 0; }
.va-steps h2, .va-cta h2 { margin: 0; font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.va-steps-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.va-steps-grid > div { box-sizing: border-box; padding: 26px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--va-line); display: flex; flex-direction: column; gap: 8px; }
.va-step-n { font-family: var(--va-head); font-weight: 800; font-size: 34px; color: var(--va-blue); line-height: 1; }
.va-steps-grid strong { font-size: 20px; }
.va-steps-grid p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--va-ink-2); }

/* Синяя полоса с телефоном */
.va-cta { background: var(--va-blue); color: #fff; padding: 56px 0; }
.va-cta h2 { color: #fff; }
.va-cta p { margin: 8px 0 0; font-size: 18px; color: #E3ECFA; }
.va-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.va-cta .va-btn { flex-shrink: 0; }

/* Старые разделы ниже — в тёплую палитру */
.va .section, .va .section:nth-child(even) { background: var(--va-paper); }
.va .reviews-section, .va .brands-section, .va #faq, .va #contact, .va #guides { background: #fff !important; }
.va .seo-section, .va #about { background: var(--va-paper) !important; }
.va .sec-head h2 { font-weight: 800; letter-spacing: -0.01em; color: var(--va-ink); }
.va .sec-head p { color: var(--va-ink-2); }
.va .site-footer { background: var(--va-ink); }

/* Планшет и телефон */
@media (max-width: 1024px) {
  .va-hero-grid, .va-fridge-grid, .va-picker-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .va-hero-media { min-height: 0; }
  .va-hero-media img { position: static; width: 100%; height: 420px; }
  .va-temp { left: 16px; bottom: 16px; width: auto; padding: 16px 18px; flex-direction: row; align-items: baseline; gap: 16px; }
  .va-temp-label, .va-temp-sub { display: none; }
  .va-temp-big { font-size: 54px; }
  .va-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .va .va-wrap { padding: 0 16px; }
  .va-topbar .va-wrap { justify-content: center; text-align: center; font-size: 13px; }
  .va-topbar .va-wrap span:last-child { display: none; }
  .va-hero { padding: 24px 0 28px; }
  .va .va-ratings .rating-pill { min-height: 36px; font-size: 13px; padding: 0 10px; }
  .va .va-ratings .rating-pill .stars { display: none; }
  .va-btns { flex-direction: column; }
  .va-btns .va-btn { width: 100%; }
  .va-lead { font-size: 17px; }
  .va-hero-media img { height: 380px; border-radius: 22px; }
  .va-picker, .va-fridge, .va-steps { padding: 40px 0; }
  .va-panel { padding: 22px 20px; }
  .va-panel h3 { font-size: 22px; }
  .va-symptoms, .va-fridge-list, .va-steps-grid { grid-template-columns: minmax(0, 1fr); }
  .va-fridge-grid img { height: 220px; }
  .va-cta-row { flex-direction: column; align-items: stretch; text-align: left; }
}

/* Логотипы брендов (Томми 2026-10-02: все бренды — официальными логотипами). Авторизованные — красная
   рамка (как было), остальные — спокойная серая, чтобы не выглядело как «авторизованы». */
.va .brand-chip.logo-chip { display:inline-flex; align-items:center; justify-content:center; min-height:58px; box-sizing:border-box; }
.va .brand-chip.logo-chip img { height:auto; max-height:34px; max-width:150px; }
.va .brand-chip.logo-plain { border:1px solid var(--va-line); }
.va .brand-chip.logo-plain:hover { box-shadow:0 6px 18px rgba(15,27,51,.12); }

/* Томми 02.10: «оставить только логотипы, убрать прямоугольные рамки» — без рамки и подложки. */
.va .brand-chip.logo-chip { border:0 !important; background:transparent !important; box-shadow:none !important; padding:6px 12px; }
.va .brand-chip.logo-chip:hover { box-shadow:none !important; transform:scale(1.06); }

/* 02.10 Томми: никаких рамок у брендов, включая текстовый MAYTAG. */
.va #brands .brand-chip { border:0 !important; background:transparent !important; box-shadow:none !important; }