/* ==========================================================================
   APPLE WAVE 1 — правки по аудиту Метрики (06.08.2026)
   Отдельный файл, а не user.css: user.css перезаписывается при сохранении
   темы в дизайнере и правки теряются. Подключается из head.html.

   1. Корзина: карусель «Рекомендуем» уходит под форму (JS в order.html),
      липкая панель со суммой и переходом к форме.
   2. Карточка: липкая панель покупки — используется ШТАТНАЯ .ahp-buybar
      из apple-mobile.html; здесь только исправляем её ширину на мобильных.
   3. Обе панели не должны перекрывать подвал.
   ========================================================================== */

/* ——— 1. Порядок блоков в корзине на мобильных ——— */

.apple-related-anchor { display: none; }

@media (max-width: 859px) {
  .order-page__container > .order-page__cart-container { order: 1; }
  .order-page__container > .order-page__form-container { order: 2; }
  .order-page__container > .apple-related-moved {
    order: 3;
    margin-top: 16px;
  }
}

/* ——— 2. Липкая панель корзины (в стилистике штатной .ahp-buybar) ——— */

.apple-cartbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  padding: 0 12px;
  pointer-events: none;
  animation: apple-cartbar-in .24s ease-out;
}

.apple-cartbar[hidden] { display: none; }

.apple-cartbar__inner {
  width: max-content;
  max-width: calc(100vw - 24px);
  margin: 0 auto;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.apple-cartbar__sum {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex: none;
}

.apple-cartbar__label {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a929b;
}

.apple-cartbar__value {
  font-size: 18px;
  font-weight: 700;
  color: #111114;
  white-space: nowrap;
}

.apple-cartbar__btn {
  flex: 0 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: #111114;
  color: #fff;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform .2s ease;
}

.apple-cartbar__btn:hover { transform: scale(1.03); }
.apple-cartbar__btn:focus-visible { outline: 2px solid #1d4f7c; outline-offset: 3px; }

@keyframes apple-cartbar-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .apple-cartbar { animation: none; }
  .apple-cartbar__btn { transition: none; }
}

/* совсем узкие экраны — подпись «Итого» лишняя, оставляем сумму и кнопку */
@media (max-width: 379px) {
  .apple-cartbar__inner { gap: 10px; padding-left: 14px; }
  .apple-cartbar__label { display: none; }
  .apple-cartbar__btn { padding: 12px 18px; }
}

/* на десктопе форма и так в правой колонке рядом с корзиной */
@media (min-width: 860px) {
  .apple-cartbar { display: none !important; }
}

/* ——— 3. Штатная панель покупки: капсула по содержимому, а не во всю ширину ———
   В мобильном режиме (html.am) название товара скрыто, из-за чего капсула
   растягивалась на всю ширину и справа оставалась пустота. */

html.am .ahp-buybar__in {
  width: max-content;
  max-width: calc(100vw - 24px);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

html.am .ahp-buybar__price { flex: none; }
html.am .ahp-buybar__btn { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* ——— 4. Панели не перекрывают подвал ——— */

@media (max-width: 859px) {
  body:has(.ahp-buybar_on),
  body:has(.apple-cartbar:not([hidden])) {
    padding-bottom: 96px;
  }
}

/* ==================== /APPLE WAVE 1 ==================== */

/* ==================== APPLE MODEL SEARCH (поиск по моделям в сетке подкатегорий, 06.08.2026) ====================
   /category/toyota/ — 85 моделей алфавитом, до первого товара 984 px на 414 px.
   Поле над сеткой фильтрует плитки мгновенно; JS — секция APPLE MODEL SEARCH в category.html. */

.ahms {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ahms__field {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 16px;
  padding: 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ahms__field:focus-within {
  border-color: #111114;
  box-shadow: 0 0 0 3px rgba(17, 17, 20, .07);
}

.ahms__icon {
  flex: none;
  color: #8a929b;
  margin-right: 10px;
}

.ahms__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px; /* меньше — Safari зумит поле при фокусе */
  line-height: 1.2;
  padding: 13px 0;
  color: #111114;
  -webkit-appearance: none;
  appearance: none;
}

.ahms__input::placeholder { color: #9aa1a9; }
.ahms__input::-webkit-search-cancel-button { display: none; }

.ahms__clear {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  border: 0;
  border-radius: 50%;
  background: #f1f3f6;
  color: #59616a;
  cursor: pointer;
  transition: background .15s ease;
}

.ahms__clear:hover { background: #e5e9ee; }
.ahms__clear:focus-visible { outline: 2px solid #111114; outline-offset: 2px; }
.ahms_active .ahms__clear { display: flex; }

.ahms__status {
  align-self: flex-start;
  font-size: 13px;
  line-height: 1.3;
  color: #3d434a;
  /* заголовок категории лежит на фото шоурума — плашка держит читаемость на любом фоне */
  background: rgba(255, 255, 255, .94);
  border-radius: 999px;
  padding: 4px 12px;
  max-width: 100%;
}

.ahms__status:empty { display: none; }

.ahms__status_empty { color: #a02c22; }

/* показ и скрытие плиток делает JS inline-стилями: так правило перебивает
   вендорный класс categories-mini__item_hidden без !important-войны */

@media (max-width: 859px) {
  .ahms { margin-bottom: 12px; }
  .ahms__field { border-radius: 14px; }
  .ahms__input { padding: 12px 0; }
}

/* на широких экранах поле во всю ширину выглядит пустым — держим компактным */
@media (min-width: 860px) {
  .ahms__field { max-width: 520px; }
}

/* ==================== /APPLE MODEL SEARCH ==================== */

/* ==================== APPLE PILL FIT (капсулы шапки не вылезают за экран, 06.08.2026) ====================
   Капсулы шапки (.ahp-pill) не сжимаются, поэтому при 1366–1600 px правая уезжала за край
   и страница ездила вбок (scrollWidth 1682 при окне 1440). Раньше лишние ссылки прятал
   вендорный адаптив — он же и зацикливался; теперь он отвязан, а меню сокращаем сами.
   Порядок пунктов: 1 Пользователям · 2 О магазине · 3 Отзывы · 4 Блог · 5 Контакты ·
   6 Проверка подлинности · 7 «Ещё» (всегда скрыт). */

/* 09.08.2026. Порядок пунктов ИЗМЕНИЛСЯ: «Блог» и «Контакты» переехали внутрь
   выпадашки «Пользователям» (перенос делает JS в header.html), наверху осталось
   1 Пользователям · 2 О магазине · 3 Отзывы · 4 Проверка подлинности · 5 «Ещё» (скрыт).

   Прежний порог 1699 был выставлен впритык: на 1700-1780 px «Проверка подлинности»
   уже показывалась, но капсулам не хватало ~40 px и страница ездила вбок. Именно в этот
   диапазон попадает MacBook Pro 16" (1728 px) — на нём баг и увидели.
   Цифры ниже — замеренная ширина капсул плюс запас. */

/* 09.08.2026, второй заход: лестница nth-child УБРАНА. Она прятала лишние пункты
   насовсем — на 1440 из шапки пропадала «Проверка подлинности», на 1280 «Отзывы»,
   и попасть на них было неоткуда. Теперь ширину меряет JS (секция «переливание»
   в header.html) и уносит непоместившееся в выпадашку «Пользователям».
   Здесь оставлена только подпись у логотипа — ею жертвуем первой. */

/* Подпись рядом с логотипом (130 px) — первое, чем жертвуем на узких ноутбуках,
   но прячет её теперь тот же скрипт в header.html, что и переливает пункты меню:
   с отдельным медиазапросом порядок жертв ломался (на 1180 пунктов помещалось
   больше, чем на 1280). */

/* страховка: капсула никогда не шире вьюпорта */
.ahp-bar { max-width: min(1560px, calc(100vw - 40px)); }

/* ==================== /APPLE PILL FIT ==================== */

/* ==================== APPLE PHONE MENU (выпадашка под номером, 10.08.2026) ====================
   Было: список настроек — «Режим работы:», «Email:», «Соцсети и мессенджеры:» жирным,
   под каждым значение, между блоками линейки, соцсети голыми цветными кружками.
   Стало: карточка в стилистике капсул — телефоны с подписями, живой статус работы,
   чёрная кнопка обратного звонка и мессенджеры строками с названиями.
   Разметку пересобирает JS, секция APPLE PHONE MENU в header.html. */

.ahp-bar .dropdown__dropdown:has(.ahp-cm),
.header-floating .dropdown__dropdown:has(.ahp-cm) {
  padding: 0;
  border-radius: 20px;
  border: 0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  overflow: hidden;
}

.ahp-cm {
  width: 320px;
  padding: 14px;
  background: #fff;
  font-size: 14px;
  line-height: 1.35;
  color: #1d1d1f;
}

/* --- телефоны --- */
.ahp-cm__phones { display: flex; flex-direction: column; gap: 2px; }

.ahp-cm__phone {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s ease;
}
.ahp-cm__phone:hover { background: #f5f5f7; }

.ahp-cm__phone-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: #6E6E73;
  margin-bottom: 1px;
}
.ahp-cm__phone-num {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  white-space: nowrap;
}

/* --- статус работы --- */
.ahp-cm__status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 9px;
  font-size: 13px;
  line-height: 1.3;
  color: #6e6e73;
}
.ahp-cm__status > span:last-child { white-space: nowrap; }
.ahp-cm__status .lu { width: 15px; height: 15px; flex: none; }
.ahp-cm__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a1a1a6;
  flex: none;
}
.ahp-cm__status_open { color: #1d1d1f; }
.ahp-cm__status_open .ahp-cm__dot {
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, .18);
}

/* --- кнопка обратного звонка (узел плагина, переносится как есть) --- */
.ahp-cm__cta { padding: 2px 0 10px; }
.ahp-cm__cta .ordercall-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 999px;
  background: #1d1d1f;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  border: 0 !important;
  cursor: pointer;
  transition: background .15s ease;
}
.ahp-cm__cta .ordercall-button:hover { background: #000; }

/* --- строки: мессенджеры, почта, контакты --- */
.ahp-cm__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f2;
}

.ahp-cm__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #1d1d1f;
  cursor: pointer;
  transition: background .15s ease;
}
.ahp-cm__row:hover { background: #f5f5f7; }

.ahp-cm__row .lu { width: 18px; height: 18px; color: #6e6e73; flex: none; }

/* иконки мессенджеров у вендора свои, приводим к одному размеру */
.ahp-cm__row-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.ahp-cm__row-link svg,
.ahp-cm__row-link img { width: 18px; height: 18px; }

.ahp-cm__row-text { font-size: 14px; color: #1d1d1f; }
.ahp-cm__row_plain .ahp-cm__row-text { color: #1d1d1f; }

/* ==================== /APPLE PHONE MENU ==================== */

/* ==================== APPLE TILES FIT (плитки главной не растягивают страницу, 06.08.2026) ====================
   На 360 px главная ездила вбок (scrollWidth 383): у .rg-tiles колонки repeat(2, 1fr),
   а 1fr = minmax(auto, 1fr) — длинное слово внутри плитки не даёт колонке сжаться,
   и вместо 2×129 получалось 154 + 171. Лечение — minmax(0, 1fr) и перенос длинных слов. */

/* 12.08.2026: 4 колонки давали плитку ~90px и рубку слов — теперь 2x2 на всех ширинах */
.rg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

@media (max-width: 1100px) {
  .rg-tiles,
  .rg-usp-card .rg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.rg-tile { min-width: 0; }
.rg-tile-name,
.rg-tile-text { overflow-wrap: normal; hyphens: auto; } /* 12.08.2026: по слогам вместо рубки где попало */

/* ==================== /APPLE TILES FIT ==================== */

/* ==================== APPLE BRAND PICKER (подбор авто на странице линейки, 07.08.2026) ====================
   Страница линейки: 7 831 визит в месяц, конверсия 0,06 %. Человек пришёл за конкретной
   линейкой, но до товаров на ПК 3 392 px сетки марок. Блок даёт прямой путь к своей машине:
   марка (+ модель на ПК) → /category/<модель>/<линейка>/. JS — секция APPLE BRAND PICKER
   в header.html. */

.abp {
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 20px;
  padding: 18px 20px 20px;
  margin: 0 0 22px;
  box-shadow: 0 10px 30px -22px rgba(15, 20, 28, .5);
}

.abp__title {
  font-size: 18px;
  font-weight: 700;
  color: #111114;
  line-height: 1.2;
}

.abp__hint {
  font-size: 13.5px;
  color: #6b7078;
  margin-top: 4px;
}

.abp__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.abp__select {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  padding: 0 38px 0 14px;
  border: 1px solid #dfe3e8;
  border-radius: 14px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23111114' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 15px;
  color: #111114;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.abp__select:disabled { color: #a6acb3; cursor: default; background-color: #f7f8fa; }
.abp__select:focus-visible { outline: 2px solid #111114; outline-offset: 2px; }

.abp__btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #111114;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.abp__btn:hover:not(:disabled) { background: #2a3039; }
.abp__btn:active:not(:disabled) { transform: scale(.985); }
.abp__btn:disabled { background: #e6e9ee; color: #a6acb3; cursor: default; }
.abp__btn:focus-visible { outline: 2px solid #1d4f7c; outline-offset: 3px; }

@media (max-width: 859px) {
  .abp { padding: 16px; border-radius: 18px; margin-bottom: 18px; }
  .abp__title { font-size: 16.5px; }
  .abp__select { flex: 1 1 100%; }
  .abp__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .abp__btn { transition: none; }
}

/* ==================== /APPLE BRAND PICKER ==================== */

/* сообщение «этой линейки для машины нет» — секция APPLE LINE KEEPER в category.html */
.alk-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 18px;
}

.alk-empty__text { font-size: 15px; color: #111114; flex: 1 1 240px; }

.alk-empty__btn {
  flex: 0 0 auto;
  padding: 11px 22px;
  border-radius: 999px;
  background: #111114;
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.alk-empty__btn:hover { background: #2a3039; }

@media (max-width: 480px) {
  .alk-empty__btn { flex: 1 1 100%; text-align: center; }
}

/* ===== APPLE CHECKOUT: сетка /order/ — одна колонка до 1199px (корзина схлопывалась на ~1024) ===== */
@media (max-width: 1199px) {
  .order-page__container { flex-flow: column nowrap; }
  .order-page__cart-container,
  .order-page__form-container { width: auto; }
}

/* APPLE CHECKOUT: модалка ПВЗ — на исходной позиции левый штрих первой буквы заголовка
   пропадает при растеризации (позиционный глюк рендера); сдвиг на 6px лечит */
.order-modal .modal__header .wa-header,
.wa-dialog-header .wa-header { padding-left: 6px; }

/* ==================== APPLE SALE / UTSENKA BADGES (24.08.2026) ====================
   Стикеры статуса на фото: «уценка» (категория 2154) и «товар со скидкой» (есть старая цена),
   выводятся взаимоисключающе. Оформление сделано по образцу Ситилинка и М.Видео: мелкие
   плоские плашки без градиентов и теней — заметные, но не спорящие с фотографией.
   Процент скидки на фото НЕ показываем (у крупных его там нет и он дублировал бы цену) —
   он живёт в строке цены компактной пилюлей; в виде «список» для этого добавлен
   .product-extend__discount в шаблоне. Файл выбран специально: apple-wave1.css грузится
   на ВСЕХ страницах, а apple-catalog.css — только в каталоге и поиске. */
.product-badge_utsenka,
.product-badge_sale { color: #B5670A; background-color: #FFEDD8; }

.product-thumb__badges .product-badge,
.product-extend__badges .product-badge,
.product-cart-form__badges .product-badge {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: none;
  background-image: none;
}
.product-thumb__badges .product-badge_utsenka,
.product-thumb__badges .product-badge_sale,
.product-extend__badges .product-badge_utsenka,
.product-extend__badges .product-badge_sale,
.product-cart-form__badges .product-badge_utsenka,
.product-cart-form__badges .product-badge_sale {
  background-color: #FFEDD8;
  color: #B5670A;
}

/* Процент скидки: с фотографии убран во всех трёх видах и в карточке товара */
.product-thumb__badges .product-badge_discount,
.product-extend__badges .product-badge_discount,
.product-cart-form__badges .product-badge_discount { display: none; }

/* ...и оформлен пилюлей рядом с зачёркнутой ценой */
.product-thumb__discount,
.product-extend__discount,
.product-add-to-cart__discount {
  background-color: #FDECEC;
  color: #D9182B;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.product-extend__discount { margin-left: 8px; display: inline-block; }

/* Отступ, если плашек на фото окажется две */
.product-thumb__badges .product-thumb__badge + .product-thumb__badge,
.product-cart-form__badges .product-cart-form__badge + .product-cart-form__badge { margin-top: 6px; }

/* «товар со скидкой» длиннее «уценки» — в двухколоночной мобильной плитке ужимаем */
@media (max-width: 767px) {
  .product-thumb__badges .product-badge_sale { font-size: 10px; padding: 3px 7px; }
}

.product-add-to-cart__discount { margin: 4px 0 0; display: inline-block; font-size: 13px; }

/* Положение плашек относительно фото (24.08.2026).
   Тема ставит блок плашек в угол КАРТОЧКИ (left/top: 0), а не фотографии: в плитке фото
   начинается на 14 px правее и 12 px ниже (это padding карточки), поэтому плашка ложилась
   на белое поле у скруглённого угла карточки и выглядела вылезающей за фото. В карточке
   товара блок стоял ровно в скруглении контейнера (радиус 20 px), в виде «список» вендор
   и вовсе вынес его на -4 px наружу. Сдвигаем внутрь фотографии примерно на 10 px от края —
   точка (10,10) лежит внутри скругления и у радиуса 14, и у радиуса 20. */
.product-thumb__badges { left: 24px; top: 22px; }
.product-cart-form__badges { left: 16px; top: 16px; }
.product-extend__badges { left: 10px; top: 10px; }