/* ==========================================================================
   arendazvukasveta.ru — обновление вёрстки поверх существующей
   ==========================================================================

   Почему отдельным файлом, а не правкой main.css. В main.css сто четыре
   килобайта, пятьдесят восемь правил на float и шесть медиазапросов, писанных
   в разное время. Влезать туда — значит чинить одно и ломать соседнее втихую.
   Этот файл подключается последним и только добавляет: любую правку можно снять
   одной строкой в шапке, и сайт вернётся ровно к прежнему виду.

   Что здесь исправляется, по порядку важности:

   1. Сайт не открывался на телефоне по-человечески. У контейнера стояло
      `min-width: 1260px` — это значит, что на экране в 390 точек страница
      уезжает вбок и читается лупой. Никакой мета-тег этого не лечит: пока есть
      min-width, браузеру некуда сжимать.

   2. Раскладка держится на отрицательных отступах: .content с полями под две
      колонки, .col1 и .col2 плавают по краям. Приём рабочий, но он рассыпается
      на узком экране, поэтому ниже 980 точек колонки становятся блоками и
      выстраиваются в понятном порядке: сначала содержание, потом каталог,
      потом боковые предложения.

   3. У .container была прописана красная рамка по бокам — `border: 1px ridge
      red`, забытая отладка. Её видно посетителям.

   4. Мелочи, из которых складывается ощущение современности: читаемая мера
      строки, живые интервалы, аккуратные кнопки и поля, картинки, которые не
      вылезают за экран, и цели касания не меньше сорока четырёх точек.
   ========================================================================== */

:root {
  --azs-blue: #3697cd;
  --azs-blue-deep: #1f6a99;
  --azs-orange: #f9a615;
  --azs-ink: #1d2731;
  --azs-muted: #62727f;
  --azs-line: #e3eaef;
  --azs-radius: 8px;
}

/* --- 1. Освобождаем макет -------------------------------------------------
   max-width вместо width, и никакого min-width: с этого начинается адаптив. */
.container {
  width: auto !important;
  min-width: 0 !important;
  max-width: 1263px !important;
  /* Забытая отладочная рамка. */
  border-left: 0 !important;
  border-right: 0 !important;
}

.ramp {
  width: auto !important;
  min-width: 0 !important;
  max-width: 1263px !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Ничто не должно вылезать за край экрана — ни картинка, ни таблица. */
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* --- 2. Типографика -------------------------------------------------------
   Строки были плотные и длинные; читаемая мера и воздух дают половину
   ощущения «современно», ничего не переставляя. */
body {
  font-size: 16px;
  line-height: 1.62;
  color: var(--azs-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.content p, .content li { max-width: 74ch; }
.content p { margin: 0 0 1.05em; }
.content h1, .content h2, .content h3 {
  line-height: 1.2;
  letter-spacing: -.2px;
  margin: 1.5em 0 .5em;
  text-wrap: balance;
}
.content h1 { font-size: clamp(24px, 3.4vw, 34px); margin-top: .2em; }
.content h2 { font-size: clamp(20px, 2.6vw, 26px); }
.content h3 { font-size: 18px; }
.content a { color: var(--azs-blue-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.content a:hover { color: var(--azs-orange); }

/* --- 3. Кнопки и поля -----------------------------------------------------
   Одинаковая геометрия у всего, что нажимают и заполняют. Высота не меньше
   сорока четырёх точек: палец толще курсора. */
.content input[type="submit"],
.content button,
button.single_add_to_cart_button,
.button, a.button, .add_to_cart_button {
  min-height: 44px;
  padding: 11px 20px !important;
  border: 0 !important;
  border-radius: var(--azs-radius) !important;
  background: var(--azs-orange) !important;
  color: #241a05 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: filter .12s ease;
}
.content input[type="submit"]:hover,
.button:hover, a.button:hover, .add_to_cart_button:hover { filter: brightness(1.06); }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="search"], select, textarea {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--azs-line);
  border-radius: var(--azs-radius);
  background: #fff;
  font-size: 16px; /* меньше 16px — и iOS зумит страницу при фокусе */
  color: var(--azs-ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--azs-blue);
  outline-offset: 1px;
}

/* --- 4. Карточки товара ---------------------------------------------------
   Были плоские блоки без границ; лёгкая рамка и подъём при наведении делают
   их предметом, который можно взять. */
.spez_item, .product, .products li {
  border: 1px solid var(--azs-line);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.spez_item:hover, .products li:hover {
  box-shadow: 0 8px 22px rgba(31, 106, 153, .10);
  transform: translateY(-2px);
}
.price, .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--azs-ink);
}

/* --- 5. Таблицы -----------------------------------------------------------
   В разметке одиннадцать таблиц, часть из них — раскладка. Прокрутка внутри
   своей обёртки не даёт им растянуть страницу вбок. */
.content table {
  border-collapse: collapse;
  width: 100%;
}
.content table td, .content table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--azs-line);
}

/* --- 6. Адаптив -----------------------------------------------------------
   Ниже 980 точек трёхколоночная раскладка на отрицательных отступах
   разбирается в один поток. Порядок осмысленный: содержание, каталог, боковое. */
@media (max-width: 980px) {
  .container, .ramp { max-width: 100% !important; }

  .wrapper { float: none !important; width: auto !important; }
  .content {
    margin: 0 !important;
    padding: 0 16px !important;
    order: 1;
  }
  .col1, .col2 {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 16px;
  }
  .col1 { order: 2; }
  .col2 { order: 3; }
  .container.clearfix { display: flex; flex-direction: column; }
  .header { order: 0; }

  .catalog { width: auto !important; }

  /* Шапка: логотип, телефон и меню перестают тесниться в одну строку. */
  .header, .search, .search_phones {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .ramp { height: 200px !important; }

  /* Меню в подвале — вложенный список внутри таблицы: ширина схлопывалась в
     ноль, а плавающие пункты уезжали за экран на сто точек. */
  .footer ul, .fmenu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 2px;
  }
  .footer li, .fmenu li { float: none !important; width: auto !important; }
  .footer a, .fmenu a { display: inline-block; padding: 9px 11px; }

  /* Таблицы-раскладки в подвале распрямляются в столбец. */
  .foot_tab, .foot_tab tbody, .foot_tab tr, .foot_tab td {
    display: block !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
  }
  .foot_tab td { padding: 8px 16px !important; }

  /* Меню — крупные строки вместо горизонтального ряда. */
  .menu li, .nav li, #menu li { float: none !important; display: block !important; }
  .menu a, .nav a, #menu a { display: block; padding: 12px 16px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .content h1 { font-size: 24px; }
  .ramp { height: 150px !important; }
  .spez_item { padding: 12px; }
  /* Всё, что было в две колонки внутри контента, — в одну. */
  .content .col2-set, .content .col1-set { float: none !important; width: auto !important; }
}

/* --- 6б. Содержимое свёрстано таблицами с ИНЛАЙНОВОЙ шириной ---------------
   Первая попытка адаптива не сработала именно из-за этого: в разметке стоят
   style="width: 770px" на таблице и 355px на ячейках, а инлайновый стиль
   сильнее внешнего файла. Отсюда !important — не из лени, а потому что иначе
   правило просто не применится. Ячейки становятся блоками, и колонки «Звук» и
   «Свет», стоявшие рядом, выстраиваются одна под другой. */
@media (max-width: 980px) {
  .content table,
  .content table > tbody,
  .content table > tbody > tr,
  .content table > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .content table { margin: 0 0 18px !important; }
  .content table > tbody > tr > td {
    padding: 14px !important;
    /* Картинки-подложки в ячейках были заданы под фиксированный размер. */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px;
  }
  .content table table > tbody > tr > td { padding: 0 !important; background: none !important; }

  /* Меню: горизонтальный ряд с тройной обёрткой span превращается в список. */
  .topmenu, .topmenu_bg1, .topmenu_bg2, .menu_wrapper, .menu_outer {
    width: auto !important;
    height: auto !important;
    background: none !important;
    position: static !important;
    float: none !important;
  }
  /* Список получал нулевую ширину: предки позиционированы абсолютно, и ширина
     схлопывалась по содержимому, а плавающие пункты уезжали за экран. Явные
     100% возвращают ему опору, дальше пункты просто переносятся. */
  .topmenu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    gap: 6px;
    padding: 10px 12px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .topmenu li { float: none !important; display: block !important; width: auto !important; background: none !important; }
  .topmenu li span, .topmenu li span span { display: inline !important; background: none !important; padding: 0 !important; }
  .topmenu a {
    display: block !important;
    padding: 10px 14px !important;
    background: #f2f7fb !important;
    border-radius: 8px;
    color: var(--azs-blue-deep) !important;
    font-size: 15px !important;
    white-space: nowrap;
  }
  .topmenu li.active a { background: var(--azs-blue) !important; color: #fff !important; }

  /* Телефон и почта в шапке — крупно и в столбец, а не в две колонки. */
  .phones, .phones .left { float: none !important; width: auto !important; position: static !important; }
  .phones .color1, .phones .color2 { text-align: center; }
  .phones .big { font-size: 22px !important; font-weight: 700; }
  .search { position: static !important; padding: 10px 16px; }
  .search input[type="text"] { width: 100% !important; }
}

/* --- 6в. Слайдер --------------------------------------------------------
   Единственное, что реально распирало страницу, — карусель. Ширину ей ставит
   скрипт ИНЛАЙНОМ (697 точек контейнеру и 2101 ленте слайдов), поэтому в
   стилях её найти нельзя, а измерить — можно: на экране 390 документ был
   шириной 698. Обрезаем по месту: лента продолжает ездить внутри, просто её
   не видно за краем, как и положено карусели. */
@media (max-width: 980px) {
  .myslider_wrapper,
  .myslider_container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .myslider_index_nav { width: 100% !important; max-width: 100% !important; }
  /* Сама лента остаётся широкой — иначе сломается расчёт прокрутки в скрипте. */
  .myslider_container_b { max-width: none !important; }
}

/* --- 6г. Шапка на телефоне ------------------------------------------------
   Шапка собрана из четырёх вложенных слоёв с фоновыми картинками под ширину
   1260: .bgleft, .bgright, .lightbg и .ramp, плюс .acoustic_left высотой 266.
   На экране в 390 точек эти картинки обрезаются и дают пустое красное поле
   почти на пол-экрана, а телефон с почтой наезжают на кнопку заказа.

   Поэтому на телефоне декоративные слои гасим и оставляем то, ради чего в
   шапку смотрят: логотип, телефон, почту, поиск и меню — сверху вниз. */
@media (max-width: 980px) {
  .bgleft, .bgright, .lightbg, .lampbg, .acoustic_left, .acoustic_right {
    height: auto !important;
    min-height: 0 !important;
    background-image: none !important;
    padding: 0 !important;
  }
  .header {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 12px !important;
  }
  /* Баннер оставляем, но полосой, а не полотном: узнаваемо и не съедает экран. */
  .ramp {
    height: 96px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Телефон и почта — крупно, по центру, каждый на своей строке. */
  .phones {
    float: none !important;
    position: static !important;
    width: auto !important;
    padding: 12px 16px 4px !important;
    text-align: center;
  }
  .phones .left, .phones .small, .phones .big {
    float: none !important;
    display: inline !important;
    width: auto !important;
    position: static !important;
  }
  .phones .color1 { font-size: 23px !important; font-weight: 700; line-height: 1.25; }
  .phones .color2 { font-size: 15px !important; margin-top: 4px; }
  .phones .color1 a, .phones .color2 a { color: inherit !important; }

  /* Поиск и кнопка заказа перестают лежать друг на друге. */
  .search, .cart2, .search_phones {
    position: static !important;
    float: none !important;
    width: auto !important;
    padding: 8px 16px !important;
    text-align: center;
  }
  .search input[type="text"] { width: 100% !important; max-width: 420px; }
}

/* --- 6д. Слайдер на телефоне не чинится, его надо убирать -------------------
   Замер показал, из чего состоят верхние пятьсот точек: это не шапка, а
   карусель. Каждый слайд — холст шириной 697 точек, на котором надписи и
   кнопки расставлены АБСОЛЮТНО: «Райдеры артистов» стоит на x=1888, часть
   слоёв уходит за 1500. Ужать такое нельзя — при любой ширине экрана меньше
   697 половина слоёв оказывается за краем, а кнопка ложится поверх текста.

   Поэтому на телефоне карусель скрыта целиком. Это не потеря содержания:
   всё, что на ней написано, есть на странице ниже, а телефон и поиск подняты
   в шапку. Кнопка «Заказ онлайн» живёт отдельно и остаётся на месте. */
@media (max-width: 980px) {
  .myslider_wrapper, .lampbg .myslider_wrapper { display: none !important; }

  /* Кнопка заказа и обратная связь — в поток, во всю ширину, крупно. */
  .single_add_to_cart_button,
  a.button[data-target="#myModal"] {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 10px 16px !important;
    text-align: center;
  }
  /* Корзина в шапке — обычным блоком, а не поверх соседей. */
  .cart, .cart2, .cart_body { position: static !important; float: none !important; width: auto !important; }
}

/* --- 7. Мелочи ------------------------------------------------------------ */
::selection { background: rgba(54, 151, 205, .22); }
a:focus-visible { outline: 2px solid var(--azs-blue); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--azs-line); margin: 28px 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .spez_item:hover, .products li:hover { transform: none; }
}