/* ============================================================
   overrides.css
   Подключается ПОСЛЕДНИМ — после $APPLICATION->ShowHead(),
   чтобы перебить bootstrap.min.css и прочее, что Bitrix-компоненты
   тащат в <head> (bootstrap, темы catalog.top, и т.д.).
   ============================================================ */

/* ---- Контейнер: восстанавливаем нашу ширину ----
   !important нужен потому что bootstrap.min.css от Bitrix-компонентов
   объявляет .container с fixed width (750/970/1170px) и max-width: 100%.
   Эти правила имеют такую же специфичность, как наше — на нестандартном
   каскаде Bitrix-кэша наш CSS не всегда выигрывает по порядку загрузки. */
body .container,
.topbar .container,
.header .container,
main .container,
.footer .container {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
  box-sizing: border-box !important;
  flex: 0 1 auto !important;
}

/* Bootstrap'овский clearfix .container::before/::after { content: " "; display: table }
   в flex-контексте превращается в дополнительные flex-items и ломает
   justify-content: space-between. Полностью отключаем псевдо-элементы. */
body .container::before,
body .container::after,
.topbar .container::before,
.topbar .container::after,
.header .container::before,
.header .container::after {
  content: none !important;
  display: none !important;
}

/* Bootstrap перебивает body font-family. Восстанавливаем наш Onest. */
body {
  font-family: var(--ff-base) !important;
}

/* ---- Ссылки: убираем стандартное подчёркивание Bootstrap'а ---- */
a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
}

/* Если где-то реально нужно подчёркивание — добавьте класс .u-underline */
a.u-underline,
a.u-underline:hover { text-decoration: underline; }

/* ---- Outline / focus-ring на каталоге ---- */
/* Убираем синюю обводку при клике/фокусе на интерактивных элементах
   внутри карточек категорий и кнопке каталога-бургер. */
.catalog-category__head,
.catalog-category__head:focus,
.catalog-category__head:focus-visible,
.catalog-category__head:active,
.catalog-category__subs a,
.catalog-category__subs a:focus,
.catalog-category__subs a:focus-visible,
.cat-tile,
.cat-tile:focus,
.cat-tile:focus-visible,
.megamenu__cat,
.megamenu__cat:focus,
.megamenu__cat:focus-visible,
.product-card a,
.product-card a:focus,
.product-card a:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Кнопки без bootstrap-обводки при фокусе */
.btn:focus,
.btn:focus-visible,
.btn:active {
  outline: none;
  box-shadow: none;
}

/* Универсальный отказ от outline — глобально, на всех элементах сайта.
   Браузеры обычно рисуют outline-ring при клике/фокусе на ссылках, кнопках,
   input'ах. Пользователь просит убрать везде. */
a,
a:focus,
a:focus-visible,
a:active,
button,
button:focus,
button:focus-visible,
button:active,
input,
input:focus,
input:focus-visible,
input:active,
select,
select:focus,
select:focus-visible,
select:active,
textarea,
textarea:focus,
textarea:focus-visible,
textarea:active,
[tabindex],
[tabindex]:focus,
[tabindex]:focus-visible,
[role="button"],
[role="button"]:focus,
[role="button"]:focus-visible,
[contenteditable]:focus,
[contenteditable]:focus-visible,
summary:focus,
summary:focus-visible {
  outline: none !important;
}
/* Тeg <select> и <input> часто получают синюю обводку (focus ring). Если оставить
   box-shadow для эстетических hover/focus стилей наших инпутов — убираем только
   те, что прилетают от browser default. */
*:focus { outline: none !important; }
*:focus-visible { outline: none !important; }

/* Карточки товаров и категорий — никаких рамок при focus */
.product-card,
.product-card *,
.catalog-category,
.catalog-category *,
.cat-tile,
.cat-tile * {
  outline: none !important;
}
.product-card:focus,
.product-card:focus-within,
.product-card:focus-visible,
.product-card a:focus,
.product-card a:focus-visible {
  outline: none !important;
  box-shadow: none;
}

/* ---- Кнопки: восстанавливаем наш стиль .btn-primary против bootstrap ----
   Bootstrap ставит .btn { display: inline-block } — это рушит наш flex-layout,
   и SVG-иконка + текст внутри кнопки могут расползтись на 2 строки.
   Принудительно возвращаем inline-flex. */
body .btn,
body .btn-primary,
body .btn-white,
body .btn-outline-white,
body .btn-outline,
body .btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--s-2);
  white-space: nowrap;
  border: 1px solid transparent;
}
body .btn-block {
  display: flex !important;
  width: 100% !important;
}
body .btn > svg {
  flex-shrink: 0;
}
body .btn-primary {
  background: var(--c-primary);
  color: var(--c-text-on-dark);
  border-color: transparent;
}
body .btn-primary:hover {
  background: var(--c-primary-hover);
  color: var(--c-text-on-dark);
  border-color: transparent;
}
body .btn-primary:active,
body .btn-primary:focus {
  background: var(--c-primary-active);
  color: var(--c-text-on-dark);
  border-color: transparent;
}

body .btn-white {
  background: #fff;
  color: var(--c-text);
}
body .btn-white:hover { background: #f3f4f6; color: var(--c-text); }

body .btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
body .btn-outline-white:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.75);
  color: #fff;
}

/* ---- Bootstrap row/col на странице раздела каталога ----
   Bitrix:catalog в SEF на section page оборачивает фильтр и контент
   в <div class="row"> с <div class="col-md-3 push-9"> + <div class="col-md-9 pull-3">,
   плюс ВЛОЖЕННЫЕ <div class="row"><div class="col-xs-12">…</div></div> внутри col-md-9.
   Все эти обёртки имеют padding 15px и margin -15px от bootstrap → сдвигают контент.
   Полностью обнуляем padding/margin/float у ВСЕХ row/col-* внутри main. */
body main .container .row,
body main .container [class^="row "],
body main .container [class*=" row"] {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
body main .container [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  float: none !important;
}
/* Главный двух-колоночный layout — direct children основного row */
body main .container > .row > .col-md-3,
body main .container > .row > .col-md-3.col-sm-push-8.col-md-push-9 {
  flex: 0 0 280px !important;
  max-width: 280px !important;
  width: 280px !important;
  order: 1 !important;
  margin-right: var(--s-6);
}
body main .container > .row > .col-md-9,
body main .container > .row > .col-md-9.col-sm-pull-4.col-md-pull-3 {
  flex: 1 1 0 !important;
  max-width: calc(100% - 280px - var(--s-6)) !important;
  width: auto !important;
  order: 2 !important;
}
/* Вложенные col-xs-12 — на всю ширину родителя */
body main .container .col-xs-12 {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Bitrix-обёртка боковой колонки — обнуляем */
body main .container .bx-sidebar-block {
  background: transparent;
  padding: 0 !important;
  margin: 0 !important;
}


/* Стилизация bitrix-форм/таблиц в личном кабинете */
.lk-main table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
}
.lk-main table th,
.lk-main table td {
  padding: var(--s-3) var(--s-4) !important;
  text-align: left;
  border-bottom: 1px solid var(--c-border-soft) !important;
  font-size: var(--fs-sm);
  color: var(--c-text);
  vertical-align: middle;
}
.lk-main table th {
  background: var(--c-bg-soft);
  font-weight: var(--fw-semibold) !important;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.lk-main table tr:last-child td { border-bottom: 0 !important; }

/* Bitrix-формы (main.profile) */
.lk-main input[type="text"],
.lk-main input[type="email"],
.lk-main input[type="password"],
.lk-main input[type="tel"],
.lk-main input[type="date"],
.lk-main input[type="number"],
.lk-main select,
.lk-main textarea {
  height: var(--h-input);
  padding: 0 var(--s-4) !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--r-md) !important;
  background: #fff !important;
  font-family: var(--ff-base) !important;
  font-size: var(--fs-base) !important;
  color: var(--c-text);
  width: 100%;
  max-width: 360px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lk-main textarea { height: auto; min-height: 100px; padding: 12px 16px !important; }
.lk-main input:focus,
.lk-main select:focus,
.lk-main textarea:focus {
  outline: none !important;
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(44, 82, 129, 0.12);
}
.lk-main .btn,
.lk-main input[type="submit"],
.lk-main button[type="submit"] {
  height: var(--h-btn);
  padding: 0 var(--s-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  background: var(--c-primary);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  margin-top: var(--s-3);
}
.lk-main input[type="submit"]:hover,
.lk-main button[type="submit"]:hover { background: var(--c-primary-hover); }

/* Скрываем блок «Просматривали» от bitrix:catalog.products.viewed */
.catalog-products-viewed,
[data-entity="catalog-products-viewed-container"],
[data-entity="parent-container"] > [data-entity="header"] {
  display: none !important;
}
@media (max-width: 991px) {
  /* На мобильной/планшете — одна колонка, фильтр сверху, товары снизу.
     Используем display: contents — bootstrap-обёртки .row/.col-* становятся
     прозрачными для layout, и их дети поднимаются прямо в .container.
     DOM-порядок: breadcrumbs → col-md-3(filter) → col-md-9 (row > col-xs-12 > catalog-section).
     После contents: breadcrumbs → filter(aside) → catalog-section.
     bx-sidebar-block тоже contents, чтобы aside.filter сразу всплыл наверх. */
  body main .container > .row,
  body main .container > .row > [class*="col-"],
  body main .container [class*="col-"] > .row,
  body main .container [class*="col-"] > .row > .col-xs-12,
  body main .container .bx-sidebar-block {
    display: contents !important;
  }
}

/* ---- Цвет ссылки по умолчанию ---- */
a {
  color: inherit;
}

/* ---- Защищаем ссылки в топбаре и футере от bootstrap:hover (#0056b3) ---- */
body .topbar a,
body .topbar a:hover,
body .topbar a:active,
body .topbar a:focus,
body .topbar__nav a,
body .topbar__nav a:hover,
body .topbar__nav a:active,
body .topbar__nav a:focus,
body .topbar__info,
body .topbar__info span {
  color: var(--c-text-on-dark) !important;
}
body .topbar__nav a:hover,
body .topbar a:hover {
  opacity: 0.75;
}

body .footer a,
body .footer a:hover,
body .footer a:active,
body .footer a:focus,
body .footer__col a,
body .footer__col a:hover,
body .footer__col a:active,
body .footer__col a:focus,
body .footer__bottom a,
body .footer__bottom a:hover,
body .footer__bottom-links a,
body .footer__bottom-links a:hover {
  color: var(--c-text-on-dark) !important;
}
body .footer a:hover,
body .footer__col a:hover {
  opacity: 0.7;
}
body .footer__bottom-links a:hover {
  color: #fff !important;
  opacity: 1;
}

/* ============================================================
   КОРЗИНА — мобильная раскладка товара (CSS-grid).
   Грузится ПОСЛЕ bootstrap_v4-CSS ядра (sale.basket.basket), поэтому здесь
   и только здесь можно перебить его мобильные правила, которые иначе делают
   карточку «башней» (фото на всю ширину сверху, всё по центру).
   Grid выбран намеренно: flex с переносом ставил количество и ИТОГО на разные
   строки, а grid жёстко кладёт их в одну строку (row "qty total").
   Макет карточки (3 grid-строки):
     ┌───────────────────────────────────────────┐
     │ [фото]  Название товара                 ×  │  desc desc
     │  60×60  20 219 ₽ · цена за 1 шт             │  perone perone
     │ ─────────────────────────────────────────  │  (нижняя граница perone)
     │ [− 8 +]                        161 752 ₽    │  qty   total
     └───────────────────────────────────────────┘
   Селекторы с префиксом body + !important — чтобы выиграть и порядок, и вес. */
@media (max-width: 767px) {
  body .basket-items-list-table,
  body .basket-items-list-table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Карточка-товар = grid 2×3; qty и total — в одной строке гарантированно */
  body tr.basket-items-list-item-container {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "desc   desc"
      "perone perone"
      "qty    total" !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    padding: 16px !important;
    border-top: 1px solid var(--c-border-soft) !important;
  }

  /* ── Зона 1: фото + название ── */
  body td.basket-items-list-item-descriptions {
    grid-area: desc !important;
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 34px 0 0 !important; /* место под × */
    margin: 0 !important;
  }
  body .basket-items-list-item-descriptions-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }
  body .basket-item-block-image {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    margin: 0 !important;
    padding: 4px !important;          /* отступ — картинка не липнет к краям/скруглению */
    overflow: hidden !important;
  }
  /* И фото, и плейсхолдер no_photo.png вписываем ЦЕЛИКОМ в бокс (object-fit:contain),
     иначе крупный плейсхолдер вылазит за 60×60 и обрезается overflow:hidden. */
  body .basket-item-block-image .basket-item-image-link,
  body .basket-item-block-image > a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body .basket-item-block-image .basket-item-image,
  body .basket-item-block-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  body .basket-item-block-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  body .basket-item-info-name,
  body .basket-item-info-name-link {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  /* ── Зона 1 (низ): цена за шт под названием; её нижняя граница = разделитель ── */
  body td.basket-items-list-item-price.basket-items-list-item-price-for-one {
    grid-area: perone !important;
    display: block !important;
    padding: 0 0 14px 72px !important; /* лев. отступ = фото(60)+gap(12); низ — зазор до линии */
    margin: 6px 0 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--c-border-soft) !important;
  }
  body td.basket-items-list-item-price-for-one .basket-item-block-price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 6px !important;
    text-align: left !important;
    padding: 0 !important;
  }
  body td.basket-items-list-item-price-for-one .basket-item-price-current,
  body td.basket-items-list-item-price-for-one .basket-item-price-current-text,
  body td.basket-items-list-item-price-for-one .basket-item-price-title {
    text-align: left !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* ── Крестик: прячем инлайновый мобильный ×, ставим колоночный в угол карточки ── */
  body .basket-item-block-info .basket-item-actions-remove {
    display: none !important;
  }
  body td.basket-items-list-item-remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Зона 2: количество (слева) + ИТОГО (справа) — одна grid-строка ── */
  body td.basket-items-list-item-amount {
    grid-area: qty !important;
    justify-self: start !important;
    align-self: center !important;
    display: block !important;
    text-align: left !important;
    padding: 14px 0 16px !important; /* верх — от линии; низ — место под «шт» */
    margin: 0 !important;
  }
  body td.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) {
    grid-area: total !important;
    justify-self: end !important;
    align-self: center !important;
    display: block !important;
    text-align: right !important;
    padding: 14px 0 16px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  body td.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-block-price,
  body td.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current,
  body td.basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current-text {
    text-align: right !important;
  }

  /* ── Снимаем «прилипание» (sticky) блока оформления заказа на мобильной.
     Ядро на скролле вешает класс .basket-checkout-container-fixed на «aligner»
     (→ position:fixed; top:0) и задаёт контейнеру inline-height как распорку.
     Гасим и то, и другое: aligner остаётся в потоке, контейнер — по контенту. ── */
  body .basket-checkout-container-fixed,
  body .basket-checkout-container.basket-checkout-container-fixed,
  body .basket-checkout-container [class*="basket-checkout"].basket-checkout-container-fixed {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
  }
  body .basket-checkout-container {
    height: auto !important;
  }
}