/*
 * infoprice.com.ua — extra design overrides
 * Загружается через <link> ПОСЛЕ бандла OkayCMS.
 * Использует только литеральные значения — не зависит от PostCSS.
 * Брейкпоинты: 320 / 375 / 768 / 1024 / 1440.
 */

/* ══ prefers-reduced-motion ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ══ Базовые стили ══════════════════════════════════════════════ */
body {
  font-size:   15px;
  line-height: 1.65;
}

/* ══ Хедер ══════════════════════════════════════════════════════ */
.header {
  background:    #fff;
  border-bottom: 1px solid #dde3ea;
  box-shadow:    0 1px 4px rgba(0,0,0,.06);
}

.header__top {
  font-size:  13px;
  padding:    8px 0;
  min-height: 40px;
}

.header__center {
  padding:    16px 0;
  min-height: 64px;
}

.header__bottom {
  min-height: 48px;
}

.header__bottom_panel { min-height: 48px; }

.catalog_button {
  min-height:  48px;
  padding:     0 24px;
  font-size:   13px;
  font-weight: 700;
  letter-spacing: .02em;
  transition:  background 150ms ease;
}

.search {
  border-radius: 8px;
  overflow:      hidden;
}

.search__input {
  font-size:  13px;
  padding:    8px 16px;
  min-height: 44px;
  border:     none;
}

.search__button {
  min-width:  44px;
  min-height: 44px;
  border:     none;
  cursor:     pointer;
  transition: background 150ms ease;
}

/* Touch targets ≥ 44px */
.header_informers__item,
#wishlist, #comparison, #cart_informer,
.fn_search_toggle {
  min-width:  44px;
  min-height: 48px;
  transition: opacity 150ms ease;
}

.header_informers__item:hover { opacity: .8; }

/* ══ Статичный фон баннера на мобильных (низкий DPR / мал. экран) ═ */
@media (max-width: 767px) {
  .main_banner [style*="background"],
  .main_banner [data-bg] {
    background-attachment: scroll !important;
  }
}

/* ══ Блок-компонент ═════════════════════════════════════════════ */
.block {
  border-radius: 12px;
  box-shadow:    0 2px 8px rgba(0,0,0,.10);
  margin-bottom: 24px;
  overflow:      hidden;
}

.block--border {
  border: 1px solid #dde3ea;
}

.block__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px 16px;
  border-bottom:   1px solid #dde3ea;
  gap:             16px;
  flex-wrap:       wrap;
}

.block__title {
  display:      flex;
  align-items:  center;
  gap:          8px;
  font-size:    20px;
  font-weight:  700;
  letter-spacing: -.01em;
  line-height:  1.25;
}

.block__title:before {
  content:       '';
  display:       inline-block;
  width:         3px;
  height:        1.1em;
  background:    #00aeef;
  border-radius: 2px;
  flex-shrink:   0;
}

.block__header--promo .block__title:before {
  background: #e07b1a;
}

.block__more {
  display:    flex;
  align-items: center;
  gap:        4px;
  font-size:  13px;
  font-weight: 600;
  color:      #00aeef;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}

.block__more:hover { color: #0093cc; }

.block__body { padding: 20px 24px; }

/* ══ Карточки статей (перекрывают все предыдущие правила) ══════ */
.article_list { align-items: stretch; }

.article_item {
  display:        flex;
  padding-top:    12px !important;
  padding-bottom: 12px !important;
  height: auto !important;
}

.article__preview {
  display:        flex !important;
  flex-direction: column !important;
  width:          100%;
  height:         100% !important;
  background:     #fff !important;
  border:         1px solid #dde3ea !important;
  border-radius:  8px !important;
  box-shadow:     none !important;
  overflow:       hidden;
  position:       static !important;
  transition:     box-shadow 220ms ease, transform 220ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .article__preview:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    transform:  translateY(-2px);
  }
}

.article__image {
  position:    relative !important;
  overflow:    hidden;
  aspect-ratio: 16 / 9;
  background:  #f0f4f8;
  flex-shrink: 0;
  height:      auto !important;
}

.article__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

@media (prefers-reduced-motion: no-preference) {
  .article__image img.lazy { transition: transform 300ms ease; }
  .article__preview:hover .article__image img.lazy { transform: scale(1.04); }
}

.article__labels {
  position:  absolute;
  bottom:    8px;
  left:      8px;
  display:   flex;
  gap:       4px;
  flex-wrap: wrap;
}

.article__label {
  background:  #00aeef;
  color:       #fff;
  font-size:   11px;
  font-weight: 700;
  padding:     2px 8px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.article__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        16px;
  gap:            12px;
}

.article__title.theme_link--color {
  font-size:   17px !important;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  transition: color 150ms ease;
}

.article__title.theme_link--color:hover,
.article__title.theme_link--color:focus-visible {
  color: #00aeef;
}

.article__title.theme_link--color:focus-visible {
  outline:        2px solid #00aeef;
  outline-offset: 2px;
  border-radius:  4px;
}

.article__info {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         4px 16px;
}

.article__info_item {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  color:       #78909c;
  line-height: 1.4;
}

.article__info_item svg {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
  opacity:    .7;
}

.article__annotation {
  font-size:          13px;
  color:              #5a6a7a;
  line-height:        1.6;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  flex:               1;
}

.article__footer {
  padding:    12px 16px;
  border-top: 1px solid #dde3ea !important;
  margin-top: auto;
}

.article__info_item--author { gap: 8px; }

.article__avatar {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  overflow:      hidden;
  flex-shrink:   0;
}

.article__author,
.article__author--link {
  font-size:       11px;
  font-weight:     500;
  text-decoration: none;
}

.article__author--link:hover { color: #00aeef; }

/* ══ Секции главной страницы ════════════════════════════════════ */
.main-articles,
.main-products { margin-bottom: 32px; }

.main-articles .block__body,
.main-products .block__body { padding: 16px 24px 20px; }

/* ══ Бренды ═════════════════════════════════════════════════════ */
.main_brands__link {
  border:        1px solid #dde3ea;
  border-radius: 8px;
  padding:       12px 8px;
  min-height:    64px;
  transition:    border-color 150ms ease, box-shadow 150ms ease;
}

.main_brands__link:hover {
  border-color: #00aeef;
  box-shadow:   0 2px 8px rgba(0,174,239,.2);
}

/* ══ Футер ══════════════════════════════════════════════════════ */
.footer { margin-top: 48px; }

.footer__title span {
  font-size:   15px;
  font-weight: 700;
}

.footer__menu_link,
.phone, .email, .open_hours {
  font-size:       13px;
  line-height:     2;
  text-decoration: none;
  transition:      color 150ms ease;
}

.footer__copyright { padding: 16px 0; font-size: 11px; }

.footer__title_arrow {
  min-width:  44px;
  min-height: 44px;
  display:    flex;
  align-items: center;
  justify-content: flex-end;
}

/* ══ Ценовые индикаторы ════════════════════════════════════════ */
.ip-up   { color: #d32f2f; font-weight: 600; }
.ip-down { color: #2e7d32; font-weight: 600; }
.ip-neu  { color: #78909c; }

/* ══ Брейкпоинт 320px ══════════════════════════════════════════ */
@media (max-width: 374px) {
  .block__header       { padding: 16px 12px 12px; }
  .block__body,
  .main-articles .block__body,
  .main-products .block__body { padding: 12px; }
  .article__body       { padding: 12px; }
  .block__title        { font-size: 18px; }
}

/* ══ Брейкпоинт 768px ══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .block__header { padding: 20px 20px 16px; }
}

/* ══ Брейкпоинт 1440px ═════════════════════════════════════════ */
@media (min-width: 1440px) {
  .block__header           { padding: 24px 32px 16px; }
  .block__body,
  .main-articles .block__body,
  .main-products .block__body { padding: 20px 32px 24px; }
  .block__title            { font-size: 21px; }
}