/* ============================================
   RESPONSIVE — Адаптивные стили
   ============================================
   Mobile-first подход:
   - Базовые стили: до 480px (мобильные)
   - @media (min-width: 481px): расширенные мобильные
   - @media (min-width: 769px): планшеты
   - @media (min-width: 1025px): десктоп
   - @media (min-width: 1440px): широкий десктоп
   ============================================ */

/* Safe Area переменные для JS (Safari не даёт читать env() напрямую) */
:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
}

/* ═══════════════════════════════════════════
   БАЗОВЫЕ СТИЛИ (Mobile: до 480px)
   ═══════════════════════════════════════════ */

/* --- Container --- */
.container {
  width: 100%;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 auto;
}

/* --- Header --- */
.header {
  --header-padding-top: 12px;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

/* --- Hamburger (Mobile) --- */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
  flex-shrink: 0;
}

.hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger Active (крестик) */
.hamburger.active .hamburger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Logo (Mobile: центр) --- */
.header .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header .logo__image {
  width: auto;
  height: 44px; /* Фиксированная высота */
}

/* --- Navigation (Mobile: скрыта) --- */
.nav {
  display: none;
}

/* --- Header Bullets (Mobile: справа) --- */
.header__bullets {
  flex-shrink: 0;
  margin-left: auto;
}

/* Размер буллетов на мобилке */
.header__bullets .battery-bullets {
  --bb-size: 10px;
  --bb-gap: 14px;
}

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85%;
  height: 100%;
  background-color: var(--color-white);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding: 60px 24px 24px;
  overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu {
  transform: translateX(0);
}

/* Close button */
.mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mobile-menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
}

.mobile-menu__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile menu list */
.mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu__item {
  margin-bottom: 8px;
}

.mobile-menu__link {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-grey);
  transition: color 0.2s ease;
}

.mobile-menu__link:hover {
  color: var(--color-primary);
}

/* --- Header Divider --- */
.header__divider {
  margin-top: 12px;
}


/* ────────────────────────────────────────
   HERO: Мобильная раскладка (<480px)
   ──────────────────────────────────────── */
.hero {
  --hero-max-height: none;
  --hero-radius: 0 0 24px 24px;
  --hero-padding-top: var(--spacing-md);
  --hero-padding-bottom: var(--spacing-lg);
  --hero-margin-bottom: var(--spacing-2xl);
}

.hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "label    label"
    "title    title"
    "subtitle subtitle"
    "desc     desc"
    "battery  battery"
    "model    capacity"
    "button   button";
  justify-items: center;
  text-align: center;
  min-height: auto;
  gap: var(--spacing-sm);
  row-gap: var(--spacing-xs);
}

/* Разбиваем hero__top */
.hero__top {
  display: contents;
}

.hero__title {
  grid-area: title;
  font-size: clamp(24px, 8vw, 32px);
  text-align: center;
  white-space: normal;
  line-height: 1.1;
}

.hero__model {
  grid-area: model;
  padding-top: 0;
  justify-self: start;
  align-self: center;
  font-size: 12px;
  position: absolute;
  bottom: 20px;
}

.hero__label {
  grid-area: label;
  padding-left: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Info блок — разваливаем */
.hero__info {
  display: contents;
  position: static;
}

.hero__subtitle {
  grid-area: subtitle;
  font-size: clamp(18px, 6vw, 24px);
  margin-top: 0;
  text-align: center;
}

.hero__description {
  grid-area: desc;
  max-width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  padding: 0 var(--spacing-sm);
}

/* Кнопка — отдельная строка на всю ширину */
.hero__info .btn {
  grid-area: button;
  justify-self: stretch;
  width: 100%;
  margin-top: var(--spacing-xs);
}

.hero__capacity {
  grid-area: capacity;
  justify-self: end;
  align-self: center;
  margin-top: 0;
  font-size: 12px;
  position: absolute;
  bottom: 20px;
}

/* Батарейка */
.hero__battery {
  grid-area: battery;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: clamp(180px, 55vw, 240px);
  height: clamp(180px, 55vw, 240px);
  margin: var(--spacing-sm) 0;
}

.hero__battery-image {
  max-width: clamp(45px, 14vw, 60px);
}

/* Форма ввода кода */
.battery-code-form {
  padding: var(--spacing-xl) var(--spacing-md);
  margin-top: var(--spacing-md);
  border-radius: var(--radius-lg);
}

.battery-code-form__title {
  font-size: 14px;
  text-align: left;
  line-height: 1.4;
}

.battery-code-form__input-group {
  flex-direction: column;
  gap: var(--spacing-sm);
}

.battery-code-form__input-group .input {
  width: 100%;
}

.battery-code-form__input-group .btn {
  width: 100%;
}

/* Карточка результата валидации */
.battery-code-result {
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  max-width: none;
}

.battery-code-result__header {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
}

.battery-code-result__icon {
  width: 28px;
  height: 28px;
}

.battery-code-result__icon svg {
  width: 16px;
  height: 16px;
}

.battery-code-result__status {
  font-size: var(--font-size-sm);
}

.battery-code-result__body {
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.battery-code-result__label {
  font-size: 10px;
}

.battery-code-result__value {
  font-size: var(--font-size-sm);
}

/* ────────────────────────────────────────
   PRODUCT-INFO: Мобильная раскладка (<481px)
   ПАРЯЩАЯ КАРТОЧКА С ОСОБЕННОСТЯМИ
   ──────────────────────────────────────── */
.product-info {
  --pi-margin-top: var(--spacing-xl);
  --pi-padding-y: 0; /* Убираем padding секции, он будет в карточке */
  --fi-title-size: 15px;
  --fi-padding-y: 16px;
  --fi-padding-x: 18px;
}

.product-info__grid {
  grid-template-columns: 1fr; /* Одна колонка */
}

/* Скрываем заголовок и лейбл — они есть в Hero */
.product-info__header {
  display: none;
}

/* Скрываем отдельный блок описания (используется на десктопе) */
.product-info__description {
  display: none;
}

/* Парящая карточка для списка особенностей */
.product-info__features {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  position: relative;
}

/* Заголовок "ОСОБЕННОСТИ:" через ::before */
.product-info__features::before {
  content: 'ОСОБЕННОСТИ:';
  display: block;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-md);
}

/* Feature-item внутри карточки: компактнее */
.feature-item {
  margin-bottom: var(--spacing-sm);
  border-color: var(--color-grey-light);
}

.feature-item:last-child {
  margin-bottom: 0;
}

/* Аккордеон: раскрываем описание внутри активного feature-item */
.feature-item.active .feature-item__content {
  max-height: 500px; /* Достаточно для любого текста */
}

/* Content Box: компактная карточка */
.product-info__content-box {
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

/* Текстовые колонки → вертикальная раскладка (2 абзаца) */
.product-info__text-columns {
  grid-template-columns: 1fr; /* Одна колонка */
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.product-info__text-column p {
  font-size: 14px;
}

/* Слоган: отдельный абзац, жирнее */
.product-info__slogan {
  font-size: 15px;
  padding-top: var(--spacing-md);
  font-weight: var(--font-weight-semibold);
}

/* Lightbox: мобильные устройства */
.lightbox__content {
  padding: var(--spacing-xl) var(--spacing-md);
}

.lightbox__image-wrapper {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

.lightbox__close {
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 40px;
  height: 40px;
}

.lightbox__nav {
  width: 44px;
  height: 44px;
}

.lightbox__nav--prev {
  left: var(--spacing-sm);
}

.lightbox__nav--next {
  right: var(--spacing-sm);
}

.lightbox__image {
  max-width: 95vw;
  max-height: 70vh;
}

/* Галерея: 1 изображение на мобильном */
.product-gallery__item {
  width: 100%;
}

/* ────────────────────────────────────────
   SPECS: Мобильная раскладка (<481px)
   ──────────────────────────────────────── */
.specs {
  --specs-padding-y: var(--spacing-xl);
  --specs-title-size: 24px;
  --specs-title-margin-bottom: var(--spacing-md);
  --accordion-header-padding-y: 16px;
  --accordion-header-padding-x: 18px;
  --accordion-content-padding-y: 14px;
  --accordion-content-padding-x: 18px;
  --accordion-title-size: 16px;
  --specs-note-padding: var(--spacing-lg);
  --specs-note-margin-top: var(--spacing-lg);
}

/* Аккордеон: одноколоночная раскладка параметров */
.accordion__param {
  grid-template-columns: 1fr; /* Одна колонка */
  gap: 4px; /* Минимальный зазор между названием и значением */
}

/* Название параметра: выделяем жирным */
.accordion__param-name {
  font-weight: var(--font-weight-bold);
  font-size: 15px;
}

.accordion__param-value {
  font-size: 14px;
  padding-left: var(--spacing-md); /* Небольшой отступ для визуального разделения */
}

/* ────────────────────────────────────────
   COMPARISON: Мобильная раскладка (до 768px)
   Аккордеон "Отличия моделей"
   ──────────────────────────────────────── */
   
/* Скрываем таблицу и основной заголовок на мобильных */
@media (max-width: 768px) {
  .comparison__labels-column,
  .comparison__models-scroll,
  .comparison__indicator {
    display: none;
  }
  
  /* Скрываем основной заголовок секции на мобильных,
     чтобы оставить только заголовок мобильного аккордеона */
  .comparison__header {
    display: none;
  }
}

/* Показываем аккордеон только на мобильных */
.comparison__mobile-accordion {
  display: none;
}

@media (max-width: 768px) {
  .comparison__mobile-accordion {
    display: block;
  }


  .comparison__mobile-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    text-transform: uppercase;
    /* font-style: italic; */
  }


  
  /* Элемент аккордеона */
  .comparison__accordion-item {
    border-bottom: 1px solid var(--color-grey);
    background-color: var(--color-white);
  }
  
  .comparison__accordion-item:first-child {
    border-top: 1px solid var(--color-grey);
  }
  
  /* Заголовок (кнопка) */
  .comparison__accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  
  .comparison__accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  .comparison__accordion-header[aria-expanded="true"] {
    font-weight: var(--font-weight-bold);
  }
  
  /* Иконка стрелки */
  .comparison__accordion-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--transition-base);
    opacity: 0.7;
    flex-shrink: 0;
  }
  
  .comparison__accordion-header[aria-expanded="true"] .comparison__accordion-icon {
    transform: rotate(180deg);
    opacity: 1;
  }
  
  /* Контент аккордеона */
  .comparison__accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .comparison__accordion-content[aria-hidden="false"] {
    max-height: 1000px;
  }
  
  .comparison__accordion-body {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
  }
  
  /* Строка с данными модели */
  .comparison__accordion-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-grey-light);
    gap: var(--spacing-md);
  }
  
  .comparison__accordion-row:last-child {
    border-bottom: none;
  }
  
  /* Название модели (всегда черный текст) */
  .comparison__accordion-model {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    flex-shrink: 0;
    min-width: 100px;
  }
  
  /* Обёртка значения + буллета */
  .comparison__accordion-value-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: flex-end;
  }
  
  /* Значение параметра */
  .comparison__accordion-value {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-align: right;
  }
  
  /* Буллет в строке аккордеона - только позиционирование, 
     все параметры берутся из BULLET_CONFIG через inline-стили */
  .comparison__accordion-row .battery-bullet {
    flex-shrink: 0;
  }
}


/* ═══════════════════════════════════════════
   РАСШИРЕННАЯ МОБИЛЬНАЯ (481px+)
   ═══════════════════════════════════════════ */
@media (min-width: 481px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .header {
    --header-padding-top: 16px;
  }
  
  .header__inner {
    gap: 16px;
    min-height: 48px;
  }
  
  .header .logo__image {
    height: 32px;
  }
  
  .header__bullets .battery-bullets {
    --bb-size: 11px;
    --bb-gap: 5px;
  }
  
  .mobile-menu {
    width: 320px;
  }
  
  .header__divider {
    margin-top: 16px;
  }

  /* ────────────────────────────────────────
     HERO: Вертикальная центрированная раскладка (481px-1024px)
     ──────────────────────────────────────── */
  .hero {
    --hero-max-height: none;
    --hero-radius: 0 0 40px 40px;
    --hero-padding-top: var(--spacing-xl);
    --hero-padding-bottom: var(--spacing-2xl);
  }

  .hero__content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "label    label    label"
      "title    title    title"
      "subtitle subtitle subtitle"
      "desc     desc     desc"
      "battery  battery  battery"
      "model    button   capacity";
    justify-items: center;
    text-align: center;
    min-height: auto;
    gap: var(--spacing-md);
    row-gap: var(--spacing-sm);
  }

  /* Разбиваем hero__top — показываем только title */
  .hero__top {
    display: contents; /* Разваливаем контейнер */
  }

  .hero__title {
    grid-area: title;
    font-size: clamp(28px, 6vw, 48px);
    text-align: center;
    white-space: normal; /* Разрешаем перенос */
    line-height: 1.1;
  }

  .hero__model {
    grid-area: model;
    padding-top: 0;
    justify-self: start;
    align-self: center;
    font-size: clamp(12px, 2vw, 14px);
  }

  .hero__label {
    grid-area: label;
    padding-left: 0;
    font-size: clamp(12px, 2vw, 14px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Info блок — разваливаем, элементы идут отдельно */
  .hero__info {
    display: contents; /* Разваливаем контейнер */
    position: static;
  }

  .hero__subtitle {
    grid-area: subtitle;
    font-size: clamp(24px, 5vw, 40px);
    margin-top: 0;
    text-align: center;
  }

  .hero__description {
    grid-area: desc;
    max-width: 500px;
    text-align: center;
    font-size: clamp(13px, 2.5vw, 15px);
    line-height: 1.5;
  }

  /* Кнопка — в нижний ряд по центру */
  .hero__info .btn {
    grid-area: button;
    justify-self: center;
    align-self: center;
    width: auto; /* Сброс width: 100% из базовых стилей */
    margin-top: 0;
  }

  .hero__capacity {
    grid-area: capacity;
    justify-self: end;
    align-self: center;
    margin-top: 0;
    font-size: clamp(12px, 2vw, 14px);
  }

  /* Батарейка — в центре, статичная */
  .hero__battery {
    grid-area: battery;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: clamp(200px, 50vw, 300px);
    height: clamp(200px, 50vw, 300px);
    margin: var(--spacing-md) 0;
  }

  .hero__battery-image {
    max-width: clamp(50px, 13vw, 70px);
  }

  /* Форма ввода кода */
  .battery-code-form {
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
  }

  .battery-code-form__title {
    font-size: clamp(14px, 2.5vw, 16px);
    text-align: center;
  }

  .battery-code-form__input-group {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .battery-code-form__input-group .input,
  .battery-code-form__input-group .btn {
    width: auto; /* Сброс width: 100% из базовых стилей */
  }

  /* ────────────────────────────────────────
     PRODUCT-INFO: Фиксируем размеры как на 769px (предотвращаем скачок)
     ──────────────────────────────────────── */
  .product-info__grid {
    grid-template-columns: 1fr minmax(auto, 1.1fr);
  }

  /* Возвращаем header (заголовок + лейбл) */
  .product-info__header {
    display: flex;
  }

  /* Убираем карточку и заголовок "ОСОБЕННОСТИ:" */
  .product-info__features {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .product-info__features::before {
    display: none;
  }

  /* Возвращаем дефолтные отступы feature-item */
  .feature-item {
    margin-bottom: var(--spacing-md);
    border-color: var(--color-grey);
  }

  .product-info {
    /* Плавное уменьшение gap и шрифтов от 768px → 481px */
    --pi-grid-gap: clamp(24px, calc(24px + 40 * ((100vw - 481px) / 287)), 64px);
    --pi-margin-top: clamp(48px, calc(48px + 48 * ((100vw - 481px) / 287)), 96px);
    --pi-title-size: clamp(22px, calc(22px + 6 * ((100vw - 481px) / 287)), 28px);
    --pi-capacity-size: clamp(22px, calc(22px + 6 * ((100vw - 481px) / 287)), 28px);
    --pi-text-size: clamp(14px, calc(14px + 2 * ((100vw - 481px) / 287)), 16px);
    
    --pi-label-size: 13px;
    --pi-desc-padding: 20px;
    --pi-desc-min-height: 70px;
    
    /* Feature-item: плавное уменьшение шрифта */
    --fi-title-size: clamp(13px, calc(13px + 2 * ((100vw - 481px) / 287)), 15px);
    --fi-padding-y: 16px;
    --fi-padding-x: 24px;
    --pi-padding-y: var(--spacing-md);
  }
  
  /* Показываем отдельный блок описания (десктоп-логика) */
  .product-info__description {
    display: block;
  }
  
  /* Скрываем аккордеон-контент внутри feature-item */
  .feature-item__content {
    display: none;
  }

  /* Content Box: увеличенные отступы */
  .product-info__content-box {
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
  }

  /* Текстовые колонки: всё еще вертикально, но с бОльшим шрифтом */
  .product-info__text-columns {
    grid-template-columns: 1fr; /* Одна колонка */
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .product-info__text-column p {
    font-size: clamp(15px, calc(15px + 1 * ((100vw - 481px) / 287)), 16px);
  }

  /* Слоган: чуть крупнее */
  .product-info__slogan {
    font-size: clamp(16px, calc(16px + 2 * ((100vw - 481px) / 287)), 18px);
    padding-top: var(--spacing-lg);
  }
  
  /* Галерея: 2 изображения видимых */
  .product-gallery__item {
    width: calc((100% - var(--pi-gallery-gap, var(--spacing-xl))) / 2);
  }

  /* ────────────────────────────────────────
     SPECS: Расширенная мобильная (481px-768px)
     ──────────────────────────────────────── */
  .specs {
    --specs-padding-y: var(--spacing-2xl);
    --specs-title-size: clamp(26px, calc(26px + 4 * ((100vw - 481px) / 287)), 30px);
    --accordion-header-padding-y: 18px;
    --accordion-header-padding-x: 24px;
    --accordion-content-padding-y: 16px;
    --accordion-content-padding-x: 24px;
    --accordion-title-size: clamp(16px, calc(16px + 2 * ((100vw - 481px) / 287)), 18px);
    --specs-note-padding: var(--spacing-xl);
  }

  /* Параметры: остаются одноколоночными */
  .accordion__param {
    grid-template-columns: 1fr;
  }

  .accordion__param-name {
    font-size: clamp(15px, calc(15px + 1 * ((100vw - 481px) / 287)), 16px);
  }

  .accordion__param-value {
    font-size: clamp(14px, calc(14px + 1 * ((100vw - 481px) / 287)), 15px);
  }
}


/* ═══════════════════════════════════════════
   ПЛАНШЕТЫ (769px+)
   ═══════════════════════════════════════════ */
@media (min-width: 769px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .header {
    --header-padding-top: 20px;
  }
  
  .header__inner {
    gap: 20px;
    min-height: 52px;
  }
  
  /* Hamburger: скрыт */
  .hamburger {
    display: none;
  }
  
  /* Logo: слева (не по центру) */
  .header .logo {
    position: static;
    transform: none;
    flex-shrink: 0;
  }
  
  .header .logo__image {
    height: 36px;
  }
  
  /* Navigation: видима со скроллом */
  .nav {
    display: flex;
    flex: 1;
    min-width: 0; /* Для работы overflow */
    margin-left: 24px;
    margin-right: 16px;
    position: relative;
    justify-content: flex-end; /* Прижимаем к буллетам */
  }
  
  /* Scroll wrapper с fade эффектом С ДВУХ СТОРОН */
  .nav__scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    max-width: 100%;
    /* Fade СЛЕВА (под логотип) и СПРАВА (под буллеты) */
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
  }
  
  .nav__scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
    padding-left: 40px; /* Пространство для fade слева */
    padding-right: 40px; /* Пространство для fade справа */
    width: max-content; /* Не сжимается - занимает нужную ширину */
    flex-shrink: 0;
  }
  
  .nav__link {
    font-size: 13px;
  }
  
  /* Header Bullets */
  .header__bullets {
    flex-shrink: 0;
  }
  
  .header__bullets .battery-bullets {
    --bb-size: 12px;
    --bb-gap: 6px;
  }
  
  /* Mobile Menu Overlay: скрыт насовсем */
  .mobile-menu-overlay {
    display: none;
  }
  
  .header__divider {
    margin-top: 20px;
  }
    .battery-code-form__input-group {
    flex-direction: row;
  }

  /* ────────────────────────────────────────
     PRODUCT-INFO: уменьшение ширины feature-item от 1025px → 769px
     ──────────────────────────────────────── */
  .product-info__grid {
    /* Уменьшаем пропорцию правой колонки: 1.5fr → 1.1fr */
    grid-template-columns: 1fr minmax(auto, 1.1fr);
  }

  .product-info {
    /* Фиксируем минимальные значения из clamp (предотвращаем скачок на 1024px) */
    --pi-grid-gap: 64px;
    --pi-title-size: 28px;
    --pi-capacity-size: 28px;
    --pi-label-size: 13px;
    --pi-text-size: 16px;
    --pi-desc-padding: 20px;
    --pi-desc-min-height: 70px;
    --fi-title-size: 15px;
    --fi-padding-y: 16px;
    --fi-padding-x: 24px;
    --pi-padding-y: var(--spacing-md);
  }
  
  /* Возвращаем отдельный блок описания для десктопа */
  .product-info__description {
    display: block;
  }
  
  /* Скрываем аккордеон-контент внутри feature-item на десктопе */
  .feature-item__content {
    display: none;
  }

  /* Текстовые колонки: возвращаем 2-колоночную раскладку */
  .product-info__text-columns {
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: var(--pi-text-gap);
  }

  .product-info__text-column p {
    font-size: var(--pi-text-size);
  }

  /* Слоган: дефолтный размер */
  .product-info__slogan {
    font-size: var(--pi-slogan-size);
    padding-top: var(--spacing-xl);
    font-weight: normal; /* Сброс font-weight-semibold с мобильных */
    font-style: italic; /* Возвращаем италик */
  }
  
  /* Галерея: 3 изображения видимых */
  .product-gallery__item {
    width: calc((100% - var(--pi-gallery-gap, var(--spacing-xl)) * 2) / 3);
  }
  
  /* Lightbox: планшеты и десктопы */
  .lightbox__content {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
  
  .lightbox__image-wrapper {
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
  }
  
  .lightbox__close {
    width: 48px;
    height: 48px;
  }
  
  .lightbox__nav {
    width: 56px;
    height: 56px;
  }
  
  .lightbox__nav--prev {
    left: var(--spacing-xl);
  }
  
  .lightbox__nav--next {
    right: var(--spacing-xl);
  }
  
  .lightbox__image {
    max-width: min(1000px, 90vw);
    max-height: min(1000px, 80vh);
  }

  /* ────────────────────────────────────────
     SPECS: Возвращаем дефолтные стили (769px+)
     ──────────────────────────────────────── */
  .specs {
    --specs-padding-y: var(--spacing-4xl);
    /* Плавный рост заголовка от 30px (768px) до 40px (1024px) */
    --specs-title-size: clamp(30px, calc(30px + 10 * ((100vw - 769px) / 255)), 40px);
    --specs-title-margin-bottom: var(--spacing-lg);
    --accordion-header-padding-y: var(--spacing-xl);
    --accordion-header-padding-x: var(--spacing-2xl);
    --accordion-content-padding-y: var(--spacing-lg);
    --accordion-content-padding-x: var(--spacing-2xl);
    --accordion-title-size: var(--font-size-lg);
    --specs-note-padding: var(--spacing-xl);
    --specs-note-margin-top: var(--spacing-2xl);
  }

  /* Параметры: двухколоночная раскладка */
  .accordion__param {
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: var(--spacing-md);
  }

  /* Сброс стилей мобильной версии */
  .accordion__param-name {
    font-weight: var(--font-weight-medium); /* Не bold */
    font-size: var(--font-size-base);
  }

  .accordion__param-value {
    font-size: var(--font-size-base);
    padding-left: 0; /* Убираем отступ */
  }
}

/* ═══════════════════════════════════════════
   ПЛАНШЕТЫ: ТАБЛИЦА СРАВНЕНИЯ (769px-1024px)
   Показываем 2 колонки моделей + индикатор
   ═══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Таблица: левая колонка фиксированная + scroll для моделей */
  .comparison__table {
    display: flex;
    gap: 0;
    overflow: visible;
    position: relative;
  }

  /* Левая колонка (параметры) - фиксированная */
  .comparison__labels-column {
    flex-shrink: 0;
    width: var(--cmp-labels-width, 180px);
    margin-right: var(--spacing-lg);
  }

  /* Scroll-контейнер для колонок моделей */
  .comparison__models-scroll {
    display: flex;
    gap: var(--spacing-xs);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    flex: 1;
    padding-bottom: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }

  .comparison__models-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Fade эффект слева (когда есть скрытый контент слева) */
  .comparison__models-scroll--fade-left {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10px,
      black 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10px,
      black 100%
    );
  }

  /* Fade эффект справа (когда есть скрытый контент справа) */
  .comparison__models-scroll--fade-right {
    mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 10px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 10px),
      transparent 100%
    );
  }

  /* Fade эффект с обеих сторон (когда есть скрытый контент и слева, и справа) */
  .comparison__models-scroll--fade-left.comparison__models-scroll--fade-right {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10px,
      black calc(100% - 10px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10px,
      black calc(100% - 10px),
      transparent 100%
    );
  }

  /* Колонки моделей: показываем ровно 2 */
  .comparison__model-column {
    flex-shrink: 0;
    width: calc((100% - var(--spacing-md)) / 2); /* 2 колонки с gap */
    scroll-snap-align: start;
    margin: var(--cmp-margin-between-columns);
  }

  /* Индикатор под таблицей (стиль как у галереи) */
  .comparison__indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
  }

  .comparison__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-grey-medium, #ccc);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .comparison__dot--active {
    width: 24px;
    height: 6px;
    border-radius: 3px;
    background-color: var(--color-primary);
  }
}

/* На десктопе (1025px+) скрываем индикатор и возвращаем обычный flex */
@media (min-width: 1025px) {
  .comparison__models-scroll {
    display: contents; /* Разваливаем обертку */
  }

  .comparison__indicator {
    display: none; /* Скрываем индикатор */
  }
}


/* ═══════════════════════════════════════════
   ДЕСКТОП (1025px+)
   ═══════════════════════════════════════════ */
@media (min-width: 1025px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
  
  .header {
    --header-padding-top: 30px;
  }
  
  .header__inner {
    gap: 32px;
    min-height: 56px;
  }
  
  .header .logo__image {
    height: 40px;
  }
  
  .nav {
    margin-left: 32px;
    margin-right: 16px;
    justify-content: flex-end;
  }

  /* Включаем fade для скролла меню */
  .nav__scroll-wrapper {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
  }

  .nav__list {
    gap: 32px;
    padding-left: 40px; /* Пространство для fade слева */
    padding-right: 40px; /* Пространство для fade справа */
  }

  .nav__link {
    font-size: 14px;
  }
  
  .header__divider {
    margin-top: var(--spacing-lg);
  }

  /* ────────────────────────────────────────
     HERO: fluid-уменьшение от 1250px → 1024px
     ──────────────────────────────────────── */
  .hero {
    --hero-max-height: 770px;
    --hero-radius: 0 0 70px 70px;
    --hero-padding-top: var(--spacing-2xl);
    --hero-padding-bottom: var(--spacing-4xl);
    
    /* Title: 100px → 80px плавно */
    --hero-title-size: clamp(80px, calc(80px + 20 * ((100vw - 1024px) / 226)), 100px);
    
    /* Subtitle: 72px → 48px плавно */
    --hero-subtitle-size: clamp(48px, calc(48px + 24 * ((100vw - 1024px) / 226)), 64px);
    
    /* Батарейка (круг): 480px → 380px плавно */
    --hero-battery-size: clamp(380px, calc(380px + 100 * ((100vw - 1024px) / 226)), 480px);
    
    /* Изображение батарейки: 117.5px → 94px плавно */
    --hero-battery-image-max-width: clamp(94px, calc(94px + 23.5 * ((100vw - 1024px) / 226)), 117.5px);
    
    /* Info блок: отступ справа 130px → 60px плавно */
    --hero-info-margin-end: clamp(60px, calc(60px + 70 * ((100vw - 1024px) / 226)), 130px);
    
    /* Info блок: max-width 450px → 360px плавно */
    --hero-info-max-width: clamp(360px, calc(360px + 90 * ((100vw - 1024px) / 226)), 450px);
    
    /* Gap между элементами info блока: уменьшаем с 24px до 16px */
    --hero-info-gap: clamp(16px, calc(16px + 8 * ((100vw - 1024px) / 226)), 24px);
  }

  /* Сброс планшетных grid-стилей — возврат к desktop layout */
  .hero__content {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-height: var(--hero-content-min-height);
    gap: 0;
  }

  .hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .hero__title {
    font-size: var(--hero-title-size);
    text-align: left;
    white-space: nowrap;
  }

  .hero__model {
    padding-top: var(--hero-model-padding-top);
    font-size: var(--hero-model-size);
  }

  .hero__label {
    padding-left: var(--hero-label-padding-left);
    font-size: var(--hero-label-size);
    text-transform: none;
    letter-spacing: normal;
  }

  .hero__info {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 60px;
    top: var(--hero-info-top);
    margin-inline-end: var(--hero-info-margin-end);
    max-width: var(--hero-info-max-width);
    gap: var(--hero-info-gap);
    align-items: flex-start;
  }

  .hero__subtitle {
    font-size: var(--hero-subtitle-size);
    margin-top: var(--hero-subtitle-margin-top);
    text-align: left;
  }

  .hero__description {
    max-width: none;
    text-align: left;
    font-size: var(--hero-desc-size);
  }

  .hero__capacity {
    margin-top: auto;
    align-self: flex-end;
    font-size: var(--hero-capacity-size);
  }

  .hero__battery {
    position: absolute;
    top: var(--hero-battery-top);
    left: var(--hero-battery-left);
    transform: translateX(-50%);
    width: var(--hero-battery-size);
    height: var(--hero-battery-size);
    margin: 0;
  }

  .hero__battery-image {
    max-width: var(--hero-battery-image-max-width);
  }

  /* Форма ввода кода */
  .battery-code-form {
    padding: var(--hero-form-padding-y) var(--hero-form-padding-x);
    margin-top: var(--hero-form-margin-top);
  }

  .battery-code-form__title {
    font-size: var(--hero-form-title-size);
    text-align: left;
  }

  /* ────────────────────────────────────────
     PRODUCT-INFO: fluid-уменьшение от 1250px → 1024px
     ──────────────────────────────────────── */
  .product-info__grid {
    /* Возвращаем стандартную пропорцию колонок */
    grid-template-columns: 1fr 1.5fr;
  }

  .product-info {
    /* Grid gap — сокращение расстояния между колонками */
    --pi-grid-gap: clamp(64px, calc(64px + 64 * ((100vw - 1024px) / 226)), 128px);
    
    /* Header — небольшое уменьшение в высоту */
    --pi-title-size: clamp(28px, calc(28px + 4 * ((100vw - 1024px) / 226)), 32px);
    --pi-capacity-size: clamp(28px, calc(28px + 4 * ((100vw - 1024px) / 226)), 32px);
    --pi-label-size: clamp(13px, calc(13px + 1 * ((100vw - 1024px) / 226)), 14px);
    
    /* Description — небольшое уменьшение в высоту */
    --pi-desc-padding: clamp(20px, calc(20px + 4 * ((100vw - 1024px) / 226)), 24px);
    --pi-desc-min-height: clamp(70px, calc(70px + 10 * ((100vw - 1024px) / 226)), 80px);
    
    /* Feature-item — уменьшение кнопок */
    --fi-title-size: clamp(15px, calc(15px + 3 * ((100vw - 1024px) / 226)), 18px);
    --fi-padding-y: clamp(16px, calc(16px + 8 * ((100vw - 1024px) / 226)), 24px);
    --fi-padding-x: clamp(24px, calc(24px + 8 * ((100vw - 1024px) / 226)), 32px);
    --pi-padding-y: var(--spacing-5xl);
  }

  /* ────────────────────────────────────────
     SPECS: Фиксация финального размера заголовка (1025px+)
     ──────────────────────────────────────── */
  .specs {
    --specs-title-size: var(--font-size-3xl); /* 40px - финальный размер */
  }

  /* ────────────────────────────────────────
     COMPARISON: Уменьшение ширины левой колонки (1025px-1249px)
     ──────────────────────────────────────── */
  .comparison {
    --cmp-labels-width: 200px; /* Уменьшаем с 220px до 200px */
  }
}


/* ═══════════════════════════════════════════
   ДЕСКТОП ОТ 1250px (фиксация максимальных размеров hero)
   ═══════════════════════════════════════════ */
@media (min-width: 1250px) {
  .hero {
    /* Фиксируем максимальные размеры */
    --hero-title-size: var(--font-size-6xl); /* 100px */
    --hero-subtitle-size: var(--font-size-4xl); /* 64px */
    --hero-battery-size: 480px;
    --hero-battery-image-max-width: 110px;
    --hero-info-margin-end: 130px;
    --hero-info-max-width: 450px;
    --hero-info-gap: var(--spacing-xl); /* 24px */
  }

  .product-info {
    /* Фиксируем максимальные размеры */
    /* Grid */
    --pi-grid-gap: var(--spacing-5xl); /* 128px */
    
    /* Header */
    --pi-title-size: var(--font-size-2xl); /* 32px */
    --pi-capacity-size: var(--font-size-2xl); /* 32px */
    --pi-label-size: var(--font-size-sm); /* 14px */
    --pi-desc-padding: var(--spacing-lg); /* 24px */
    --pi-desc-min-height: 80px;
    
    /* Feature-item */
    --fi-title-size: var(--font-size-lg); /* 18px */
    --fi-padding-y: var(--spacing-lg); /* 24px */
    --fi-padding-x: var(--spacing-xl); /* 32px */
  }

  /* ────────────────────────────────────────
     COMPARISON: Возврат к стандартной ширине левой колонки (1250px+)
     ──────────────────────────────────────── */
  .comparison {
    --cmp-labels-width: 275px; /* Возвращаем стандартную ширину */
  }
}


/* ═══════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (1440px+)
   ═══════════════════════════════════════════ */
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
    padding-left: 48px;
    padding-right: 48px;
  }
  
  .nav__list {
    gap: var(--spacing-2xl);
  }
  
  .nav__link {
    font-size: 15px;
  }
}


/* ═══════════════════════════════════════════
   ФУТЕР — Конфигурируемая видимость блоков
   ═══════════════════════════════════════════ */

/**
 * Логика управления видимостью блоков футера через конфигурацию
 * 
 * Каждый блок имеет data-footer-block="..." и data-visible="..."
 * data-visible содержит список breakpoints, на которых блок должен быть виден
 * Например: data-visible="mobile tablet desktop"
 * 
 * Если breakpoint НЕ указан в data-visible — блок скрыт на этом breakpoint
 * ВАЖНО: Если data-visible отсутствует или пустой — блок виден (безопасное поведение)
 */

/* База: все блоки видны по умолчанию */
[data-footer-block] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

}

/* База: все элементы видны по умолчанию */
[data-footer-element],
[data-footer-title] {
  display: block;
}

/* Мобильные устройства (< 481px) */
@media (max-width: 480px) {
  /* Скрываем блоки, у которых ЕСТЬ data-visible но НЕТ "mobile" в нем */
  [data-footer-block][data-visible]:not([data-visible~="mobile"]) {
    display: none;
  }
  
  /* Скрываем элементы внутри блоков */
  [data-footer-element][data-visible]:not([data-visible~="mobile"]),
  [data-footer-title][data-visible]:not([data-visible~="mobile"]) {
    display: none;
  }
  
  /* Аккордеон для мобильных */
  .footer--accordion {
    padding-top: var(--spacing-md);
  }
  
  .footer--accordion .footer__main {
    gap: 0;
  }
  
  .footer--accordion .footer__col {
    width: 100%;
  }
  [data-footer-block] { gap: 0;}
  
  /* Паддинг для контента */
  .footer--accordion .footer__accordion-content:not(.footer__accordion-content--collapsed) {
    padding: 8px 16px 20px 16px;
  }
}

/* Расширенные мобильные (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  /* Скрываем блоки, у которых ЕСТЬ data-visible но НЕТ "mobile-extended" в нем */
  [data-footer-block][data-visible]:not([data-visible~="mobile-extended"]) {
    display: none;
  }
  
  /* Скрываем элементы внутри блоков */
  [data-footer-element][data-visible]:not([data-visible~="mobile-extended"]),
  [data-footer-title][data-visible]:not([data-visible~="mobile-extended"]) {
    display: none;
  }
  
  /* Сетка футера: 2 колонки */
  .footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }
  
  /* Порядок блоков: 
     Левая колонка: brand (1), contacts (3)
     Правая колонка: menu (2), social (4) */
  [data-footer-block="brand"] {
    grid-column: 1;
    grid-row: 1;
  }
  
  [data-footer-block="menu"] {
    grid-column: 2;
    grid-row: 1;
    margin-top: -3rem;
    gap: var(--spacing-sm);
    
  }
  
  [data-footer-block="contacts"] {
    grid-column: 1;
    grid-row: 2;
  }
  
  [data-footer-block="social"] {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Планшеты (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Скрываем блоки, у которых ЕСТЬ data-visible но НЕТ "tablet" в нем */
  [data-footer-block][data-visible]:not([data-visible~="tablet"]) {
    display: none;
  }
  
  /* Скрываем элементы внутри блоков */
  [data-footer-element][data-visible]:not([data-visible~="tablet"]),
  [data-footer-title][data-visible]:not([data-visible~="tablet"]) {
    display: none;
  }
  
  /* Сетка футера: 3 колонки */
  .footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-xl);
    grid-template-rows: auto auto;
  }
  .footer__company {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--footer-link-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
  }
  
  /* Порядок блоков:
     Колонка 1: brand (лого, компания, быстрый переход, буллеты)
     Колонка 2: menu
     Колонка 3: contacts, social */
  [data-footer-block="brand"] {
    grid-column: 1;
    grid-row: 1 / 3; /* Растягиваем на обе строки */
    display: flex;
    flex-direction: column;
  }
  
  /* Порядок элементов внутри блока brand */
  [data-footer-block="brand"] .logo {
    order: 1;
  }
  
  [data-footer-block="brand"] .footer__company {
    order: 2;
  }
  
  [data-footer-block="brand"] .footer__title {
    order: 3;
    margin-bottom: 0;
  }
  
  [data-footer-block="brand"] .footer__battery-selector {
    order: 4;
  }
  
  [data-footer-block="menu"] {
    grid-column: 2;
    grid-row: 1 / 3; /* Растягиваем на обе строки */
  }
  
  [data-footer-block="contacts"] {
    grid-column: 3;
    grid-row: 1;
  }
  
  [data-footer-block="social"] {
    grid-column: 3;
    grid-row: 2;
  }
  
  /* Соцсети в одну строку */
  .footer__list[data-footer-social-list] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
  }

}

/* Десктоп и выше (>= 1025px) */
@media (min-width: 1025px) {
  /* Скрываем блоки, у которых ЕСТЬ data-visible но НЕТ "desktop" в нем */
  [data-footer-block][data-visible]:not([data-visible~="desktop"]) {
    display: none;
  }
  
  /* Скрываем элементы внутри блоков */
  [data-footer-element][data-visible]:not([data-visible~="desktop"]),
  [data-footer-title][data-visible]:not([data-visible~="desktop"]) {
    display: none;
  }
  
  /* Порядок элементов внутри блока brand */
  [data-footer-block="brand"] {
    display: flex;
    flex-direction: column;
  }
  
  [data-footer-block="brand"] .logo {
    order: 1;
  }
  
  [data-footer-block="brand"] .footer__company {
    order: 2;
  }
  
  [data-footer-block="brand"] .footer__title {
    order: 3;
  }
  
  [data-footer-block="brand"] .footer__battery-selector {
    order: 4;
  }
  .footer__company {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--footer-link-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
  }
}

/* ═══════════════════════════════════════════
   СКРЫТИЕ ТЕКСТА СОЦСЕТЕЙ (data-hide-text)
   ═══════════════════════════════════════════ */

/* Мобильные */
@media (max-width: 480px) {
  .footer__social-text[data-hide-text~="mobile"] {
    display: none;
  }
}

/* Расширенные мобильные */
@media (min-width: 481px) and (max-width: 768px) {
  .footer__social-text[data-hide-text~="mobile-extended"] {
    display: none;
  }
}

/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer__social-text[data-hide-text~="tablet"] {
    display: none;
  }
}

/* Десктоп */
@media (min-width: 1025px) {
  .footer__social-text[data-hide-text~="desktop"] {
    display: none;
  }
}


/* ═══════════════════════════════════════════
   ФУТЕР — Responsive layout (структура grid)
   ═══════════════════════════════════════════ */

/**
 * Базовая мобильная (< 481px): 1 колонка
 * Порядок: Бренд → Меню → Контакты → Соцсети
 */
@media (max-width: 480px) {
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  /* Явный порядок блоков */
  [data-footer-block="brand"] { order: 1; }
  [data-footer-block="menu"] { order: 2; }
  [data-footer-block="contacts"] { order: 3; }
  [data-footer-block="social"] { order: 4; }
}
.footer__battery-selector {
    margin-top: 0;
}

/**
 * Расширенная мобильная (481px - 768px): 2 колонки
 * Колонка 1: Бренд, Меню (друг под другом)
 * Колонка 2: Контакты, Соцсети (друг под другом)
 */
@media (min-width: 481px) and (max-width: 768px) {
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }
  
  /* Бренд и Меню — первая колонка */
  [data-footer-block="brand"] { grid-column: 1; grid-row: 1; }
  [data-footer-block="menu"] { grid-column: 1; grid-row: 2; }
  
  /* Контакты и Соцсети — вторая колонка */
  [data-footer-block="contacts"] {
        grid-column: 2;
        grid-row: 1;
        gap: var(--spacing-xs);
    
    }
  [data-footer-block="social"] { grid-column: 2; grid-row: 2; }
}

/**
 * Планшеты (769px - 1024px): 3 колонки
 * Строка 1: Бренд | Меню | Контакты+Соцсети
 * Контакты и Соцсети в одной колонке друг под другом
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }
  .footer__contact {
    margin-bottom: 0;
  }
  
  /* Бренд и Меню — растягиваются на обе строки */
  [data-footer-block="brand"] { 
    grid-column: 1; 
    grid-row: 1 / 3; /* Занимает строки 1 и 2 */
  }
  
  [data-footer-block="menu"] { 
    grid-column: 2; 
    grid-row: 1 / 3; /* Занимает строки 1 и 2 */
  }
  
  /* Контакты и Соцсети — третья колонка, друг под другом */
  [data-footer-block="contacts"] { 
    grid-column: 3; 
    grid-row: 1;
  }
  
  [data-footer-block="social"] { 
    grid-column: 3; 
    grid-row: 2;
    /* margin-top: var(--spacing-sm); */ /* Компактный отступ на планшетах */
  }
  
  /* Соцсети: иконки в горизонтальную линию */
  [data-footer-block="social"] .footer__list {
    flex-direction: row;
    gap: var(--spacing-md);
  }
  
  /* На планшетах: показываем только иконки, скрываем текст */
  [data-footer-block="social"] .footer__social-text {
    display: none;
  }
  
  [data-footer-block="social"] .footer__social-icon {
    width: 24px;
    height: 24px;
  }
  
  /* Нижний блок: 3 колонки */
  .footer__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: left;
    gap: var(--spacing-lg);
  }
  
  .footer__copyright {
    grid-column: 1;
    text-align: left;
  }
  
  .footer__bottom [data-footer-element="privacy"] {
    grid-column: 2;
    text-align: center;
  }
  
  .footer__credits {
    grid-column: 3;
    text-align: right;
  }
}


/* ═══════════════════════════════════════════
   CHARTS — Мобильная адаптация графиков
   ═══════════════════════════════════════════ */

/* --- Кнопка "Увеличить график" (под графиком) --- */
.charts__expand-btn {
  display: none; /* Скрыта по умолчанию, показывается на мобильных */
  margin: 16px auto 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--color-text-light);
  border: 1px solid var(--color-grey-medium);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.charts__expand-btn:hover {
  background: var(--color-grey-light);
  color: var(--color-text);
  border-color: var(--color-text-light);
}

.charts__expand-btn:active {
  transform: scale(0.98);
}

.charts__expand-btn svg {
  width: 16px;
  height: 16px;
}

/* --- Tooltip координат графика (десктоп/планшет) --- */
/* 
   📍 НАСТРОЙКА ПОЗИЦИИ через CSS-переменные:
   
   По умолчанию: по центру под SVG
   
   Примеры настройки в .charts__wrapper или .charts:
   
   --chart-tooltip-top: 100%;           // 100% = сразу под графиком, 0 = на уровне верха
   --chart-tooltip-left: 50%;           // 50% = по центру, 0 = слева, 100% = справа
   --chart-tooltip-translate-x: -50%;   // -50% = центрирование, 0 = без сдвига
   --chart-tooltip-margin-top: 16px;    // отступ от графика вниз
   
   Примеры позиционирования:
   - По центру под SVG (дефолт): top: 100%, left: 50%, translateX: -50%
   - Слева под SVG: top: 100%, left: 0, translateX: 0
   - Справа под SVG: top: 100%, left: 100%, translateX: -100%
   - Левый нижний угол SVG: top: 100%, left: 0, translateX: 0, margin-top: -40px
*/
.chart-tooltip {
  display: none; /* Скрыт по умолчанию */
  position: absolute;
  /* Настройки позиционирования через переменные */
  top: var(--chart-tooltip-top, 100%);
  left: var(--chart-tooltip-left, 50%);
  transform: translateX(var(--chart-tooltip-translate-x, -50%));
  margin-top: var(--chart-tooltip-margin-top, 16px);
  
  background: var(--color-white);
  border: 1px solid var(--color-grey-medium);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  line-height: 1.4;
  z-index: 1000;
  pointer-events: none; /* Не блокирует взаимодействие с графиком */
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip:not([hidden]) {
  display: block;
}

.chart-tooltip__line {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.chart-tooltip__line + .chart-tooltip__line {
  margin-top: 4px;
}

.chart-tooltip__label {
  font-weight: 600;
  color: var(--color-text);
  min-width: 16px;
}

.chart-tooltip__value {
  font-weight: 400;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

/* --- Fullscreen модал --- */
.chart-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-white);
  display: none; /* Скрыт на десктопе */
  flex-direction: column;
  
  /* Скрыт по умолчанию */
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: 
    visibility 0s 0.3s,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.chart-modal--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: 
    visibility 0s,
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Кнопка закрытия — абсолютная позиция в углу */
.chart-modal__close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Debug info — размеры viewBox */
.chart-modal__debug {
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 10;
  display: none; /* Скрыт по умолчанию (код оставлен для тестирования) */
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  font-family: 'Monaco', 'Courier New', monospace;
  border-radius: 6px;
  pointer-events: none;
}

.chart-modal__debug-label {
  opacity: 0.7;
  font-weight: 500;
}

.chart-modal__debug-value {
  font-weight: 700;
  color: #4ade80;
}

.chart-modal__close:hover {
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Тело модала — график на весь экран */
.chart-modal__body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Safe area для iPhone (left/right) */
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  
  /* Для pinch-to-zoom */
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

/* Контейнер графика в модале */
.chart-modal__chart {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.1s ease;
}

.chart-modal__chart svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}

/* Футер модала с переключателем */
.chart-modal__footer {
  /* Абсолютное позиционирование в правом верхнем углу */
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(68px + env(safe-area-inset-right)); /* справа от кнопки закрытия */
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0;
  background: transparent;
}

/* Переключатель A/Ω в модале */
.chart-modal__toggle {
  display: inline-flex;
  gap: 3px;                           /* уменьшен отступ между кнопками */
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: 3px;                       /* уменьшен внутренний отступ */
  box-shadow: var(--shadow-sm);
}

.chart-modal__toggle-btn {
  font-size: 13px;                    /* уменьшен размер текста */
  font-weight: 700;
  padding: 6px 14px;                  /* уменьшены отступы */
  border: none;
  background: transparent;
  color: var(--color-text-light);
  border-radius: calc(var(--radius-md) - 4px);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 20px;                    /* уменьшена минимальная ширина */
}

.chart-modal__toggle-btn:hover:not(.chart-modal__toggle-btn--active) {
  color: var(--color-text);
  background: var(--color-grey-light);
}

.chart-modal__toggle-btn--active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* --- Десктопы и планшеты (>=768px) --- */
@media (min-width: 768px) {
  /* Показываем tooltip координат на десктопах и планшетах */
  .chart-tooltip {
    display: block;
  }
}

/* --- Мобильные устройства и планшеты (<1024px) --- */
@media (max-width: 1024px) {
  /* Показываем кнопку и модал */
  .charts__expand-btn {
    display: inline-flex;
  }
  
  .chart-modal {
    display: flex;
  }
  
  /* График меньше на мобильных */
  .charts__discharge svg {
    width: 100%;
  }
  
  /* Кнопка компактная */
  .charts__expand-btn {
    padding: 8px 16px;
    font-size: 13px;
    margin-top: 8px;
  }
  
  /* Модал — всегда горизонтальный layout */
  .chart-modal {
    flex-direction: row;
  }
  
  .chart-modal__body {
    padding: 4px;
    flex: 1;
    height: 100%;
    position: relative;
  }
  
  .chart-modal__chart {
    height: 100%;
    width: 100%;
  }
  
  .chart-modal__chart svg {
    height: 100%;
    width: 100%;
    max-width: 100%;
  }
  
  .chart-modal__close {
    top: calc(8px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    width: 36px;
    height: 36px;
  }
  
  /* Body — контейнер для графика и toggle (поворачивается целиком) */
  .chart-modal__body {
    position: relative;
  }
  
  /* Футер по центру сверху внутри body */
  .chart-modal__footer {
    position: absolute;
    left: 50%;
    top: 68px;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    height: auto;
    z-index: 5;
  }
  
  /* Toggle горизонтальный компактный */
  .chart-modal__toggle {
    flex-direction: row;
    gap: 3px;                          /* уменьшен gap */
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-md);
    padding: 3px;                       /* уменьшен padding */
    box-shadow: var(--shadow-md);
  }
  
  .chart-modal__toggle-btn {
    padding: 6px 12px;                 /* уменьшены отступы */
    font-size: 13px;                   /* уменьшен размер текста */
    min-width: 36px;                   /* уменьшена минимальная ширина */
    min-height: 36px;                  /* уменьшена минимальная высота */
  }
}

/* --- Расширенная мобильная и планшеты (481-1024px) --- */
@media (min-width: 481px) and (max-width: 1024px) {
  .charts__expand-btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/**
 * Десктоп (1025px+): 4 колонки в ряд
 * Бренд | Меню | Контакты | Соцсети
 */
@media (min-width: 1025px) {
  .footer__main {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-3xl);
  }
  
  /* Все блоки в одну строку */
  [data-footer-block="brand"] { grid-column: 1; }
  [data-footer-block="menu"] { grid-column: 2; }
  [data-footer-block="contacts"] { grid-column: 3; }
  [data-footer-block="social"] { grid-column: 4; }
  
  /* Соцсети вертикально */
  [data-footer-block="social"] .footer__list {
    flex-direction: column;
  }
  
  /* Нижний блок: 3 колонки */
  .footer__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: left;
    gap: var(--spacing-2xl);
  }
  
  .footer__copyright {
    grid-column: 1;
    text-align: left;
  }
  
  .footer__bottom [data-footer-element="privacy"] {
    grid-column: 2;
    text-align: center;
  }
  
  .footer__credits {
    grid-column: 3;
    text-align: right;
  }
}