/* Фирменный слой поверх темы StartStore.
   Подключается последним: тема грузится после бандла приложения и иначе
   перебивает наши правила — именно поэтому текст оставался Open Sans, хотя
   в custom.css уже стоял Montserrat. */

/* ── Фирменная система, снятая с flowin.ru ────────────────────────────────
   Игорь: «на флоуин ты делал норм, а тут что-то не так». Там своя палитра и
   типографика, и они работают — переносим их сюда вместо стоковых цветов темы
   магазина, где основной синий #2975a4 выглядит грязным.

   Onest 800 в заголовках, Montserrat в тексте, глубокий navy #0a1c3d как
   основной цвет и #004ea8 как акцент — это и есть «синий от Navy». */
:root {
  /* Цвета сняты с фотографии доски Flowin Navy 350: основной корпус #0048c0,
     светлая волна #78c0f0, салатовая полоса #78dc00. Магазин продаёт эту
     доску — логично, что и витрина набрана её цветами. */
  --brand-navy: #0a1c3d;      /* тёмные плашки и подложки: он для фона, не для текста */
  /* Текст набирать navy оказалось тяжело: 16,8:1 к белому — почти предельный
     контраст, полоса текста читается как чёрная заливка. Разводим два цвета:
     заголовки чуть темнее тела, оба заметно легче прежнего. */
  --brand-head: #1f2e49;      /* заголовки, 13,6:1 */
  --brand-ink: #38465f;       /* основной текст, 9,5:1 */
  --brand-ink-2: #4a5670;     /* мелкий и вторичный текст, 7,4:1 */
  --brand-blue: #0048c0;      /* корпус доски: кнопки, ссылки, акценты */
  --brand-blue-d: #0030a8;    /* тень корпуса: нажатое состояние */
  --brand-sky: #78c0f0;       /* светлая волна: подложки и рамки */
  --brand-lime: #78dc00;      /* салатовая полоса: редкий акцент */
  --brand-cyan: #05c3dd;
  --brand-muted: #3b4d6e;     /* вторичный текст */
  --brand-grey: #637289;      /* подписи, 4,9:1 — прежние #6e7e96 давали 4,1 и не проходили AA */
  --brand-red: #b5343a;       /* скидки и предупреждения */
  --brand-green: #00b140;     /* успех */

  /* переменные темы магазина переопределяем на фирменные */
  --color-primary: var(--brand-blue);
  --color-primary-l: #1a63bd;
  --color-primary-d: var(--brand-blue-d);
  --color-text: var(--brand-ink);
  --color-grey-l: var(--brand-grey);
  --color-grey-d: var(--brand-muted);
  --color-secondary: #0d7a3f;
  --color-secondary-l: #10914b;
  --color-secondary-d: #0a6334;
  --color-red: var(--brand-red);
  --color-compare: var(--brand-blue);
  --color-favorites: var(--brand-red);
  --color-star-active: #f5a623;
}

body, .text, .editor {
  font-family: Montserrat, "Open Sans", system-ui, -apple-system, sans-serif;
  color: var(--brand-ink);
}

h1, h2, h3, h4,
.section__title,
.product__title,
.article-card__title,
.product-card__title,
.collection-card__title,
.footer-item__title,
.popup__title {
  font-family: Onest, Montserrat, system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--brand-head);
}

h1, .product__title, .section__title { font-weight: 800; text-wrap: balance; }
.product-card__title, .article-card__title { font-weight: 600; }

/* кнопки: фирменный синий вместо стокового */
.button--primary {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}
.button--primary:hover { background-color: var(--brand-blue-d) !important; border-color: var(--brand-blue-d) !important; }

/* цена — тем же navy, крупно и плотно */
.product__price, .product-card__price { font-family: Onest, sans-serif; font-weight: 800; color: var(--brand-head); }

/* Доработки поверх темы StartStore Pro (лёгкие, без зависимостей) */

.thumb--product-card {
  position: relative;
}
.product-card:hover .product-card__image-hover {
  opacity: 1 !important;
}

/* Звёзды рейтинга — тема обнуляет размер вложенных svg, форсируем */
.rating__stars {
  display: inline-flex !important;
  align-items: center;
  gap: 1px;
  line-height: 1;
  color: #ffb400 !important;
  font-size: 14px !important;
}
.product-card__rating svg,
.product__rating svg,
.reviews-widget__rating svg,
.rating__stars svg {
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rating__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #7a8694;
}
.rating__count .svg-inline--fa {
  width: 13px;
  height: 13px;
}

/* Бейдж скидки — скруглённый угол как в оригинале */
.labels__item_type_sale {
  border-radius: 0 0 8px 0;
}

/* Карточка — выравнивание иконок избранное/сравнение */
.product-card__buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Отзывы: сводка справа только там, где хватает ширины. На мобильном — одной колонкой. */
@media (max-width: 767px) {
  .reviews-layout { grid-template-columns: 1fr !important; }
}


/* ── Пропорции фотографий товара ─────────────────────────────────────────
   Съёмка сделана в 3:4, а плитка держала квадрат: у досок срезало нос и хвост.
   Отдаём картинке её собственную пропорцию и вписываем целиком. */
.product-card__image {
  /* Высота рамки задана в пикселях, а не пропорцией: рамка сжималась по
     картинке (182…210 px у разных товаров), высота ехала следом, и ряд
     разъезжался. Снимок вписывается внутрь целиком. */
  width: 100% !important;
  height: 280px !important;
  min-height: 280px;
  padding-bottom: 0 !important;
  background: #fff;
  display: block;
  position: relative;
  overflow: hidden;
  flex: 0 0 280px;
}
.product-card__image .thumb {
  position: absolute; inset: 0;
  height: 100% !important; width: 100%;
  padding-bottom: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
.product-card__image img {
  width: 100%; height: 100%;
  object-fit: contain;
  position: absolute; inset: 0;
}

/* ── Кнопка WhatsApp ──────────────────────────────────────────────────────
   Была белым по #25d366 (контраст 1,98). Правка контраста сделала фон тёмным,
   но текст остался зелёным — получилось зелёное на зелёном. Возвращаем
   читаемую пару: фирменный тёмный зелёный WhatsApp и белый текст. */
/* Кнопка WhatsApp — родным зелёным #25d366, он узнаётся мгновенно. Белый текст
   на нём даёт контраст 1,98 и не читается, тёмный — 8,5. Берём тёмный. */
.button--whatsapp {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: #0a1c3d !important;
  font-weight: 600;
}
.button--whatsapp:hover { background-color: #1fbe5a !important; border-color: #1fbe5a !important; }
.button--whatsapp svg, .button--whatsapp span { color: #0a1c3d !important; fill: #0a1c3d !important; }

/* ── Статьи: воздух между блоками ────────────────────────────────────────
   Текст из InSales приходит сплошняком: заголовки прижаты к абзацам, списки
   без отступов, таблицы впритык. Задаём ритм по типографской сетке. */
.article__content, .page__content {
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 74ch;
}
.article__content h2, .page__content h2 {
  font-family: Onest, sans-serif; font-weight: 800; font-size: 26px;
  margin: 42px 0 14px; letter-spacing: -.01em;
}
.article__content h3, .page__content h3 {
  font-family: Onest, sans-serif; font-weight: 700; font-size: 20px; margin: 30px 0 10px;
}
.article__content p, .page__content p { margin: 0 0 16px; }
.article__content ul, .article__content ol,
.page__content ul, .page__content ol { margin: 0 0 18px; padding-left: 22px; }
.article__content li, .page__content li { margin-bottom: 8px; }
.article__content img, .page__content img { display: block; margin: 24px auto; border-radius: 10px; }
.article__content table, .page__content table {
  width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px;
}
.article__content th, .article__content td,
.page__content th, .page__content td {
  border: 1px solid #dde3ea; padding: 9px 12px; text-align: left; vertical-align: top;
}
.article__content th, .page__content th { background: #f4f7fa; font-weight: 600; }
.article__content blockquote, .page__content blockquote {
  margin: 24px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--brand-blue); color: var(--brand-muted);
}
.article__content > *:first-child { margin-top: 0; }

/* Вкладки карточки: активная была зелёной от стоковой темы и спорила
   с синими кнопками. */
.tabs__item.is-active {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}
.tabs__item { border-radius: 8px; }

/* Кнопки «в избранное» и «к сравнению» рядом с корзиной: тонкая рамка вместо
   заливки, чтобы не спорили с главным действием. */
.product__buttons-second .button--icon {
  border: 1px solid #d7dee8 !important;
  border-radius: 10px;
  color: var(--brand-muted) !important;
}
.product__buttons-second .button--icon:hover { border-color: var(--brand-blue) !important; color: var(--brand-blue) !important; }

/* Плашка бесплатной доставки — в тон фирменному синему, а не бирюзе темы */
.product__free-delivery {
  background: #eaf2fb !important;
  border-color: #c3d9f2 !important;
  color: var(--brand-blue-d) !important;
}

/* Колонка статьи была прижата к левому краю: ограничение ширины стояло,
   а центрирования не было — справа зияла половина экрана. */
.article__content, .page__content { margin-left: auto; margin-right: auto; }
.container.article { max-width: 860px; }

/* Заголовок и дата статьи выравниваем по той же колонке */
.container.article .section__title,
.container.article .article__date { max-width: 74ch; margin-left: auto; margin-right: auto; }
.container.article .article__date { color: var(--brand-grey); font-size: 14px; margin-bottom: 6px; }

/* ── Выпадающее меню каталога ────────────────────────────────────────────
   Тема ставит .hamburger { overflow: hidden } — своё меню она рисует иначе,
   а наше выпадающее просто обрезалось по высоте кнопки: кнопка переключалась
   в «открыто», список не появлялся. */
.hamburger { overflow: visible !important; position: relative; }
.hamburger__trigger { border-radius: 8px; }

/* Пункты меню: строки-ссылки читаемого размера, с подсветкой */
.hamburger nav a { color: var(--brand-ink); border-radius: 7px; }
.hamburger nav a:hover { background: #eef4fb; color: var(--brand-blue); }

/* Бренды в выпадающем меню: строка «логотип + название», а не карточка
   с картинкой над текстом — иначе меню растягивается на весь экран. */
.hamburger nav a.collection-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 5px 12px !important;
  text-align: left !important;
}
.hamburger nav a.collection-card .collection-card__image {
  width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
  margin: 0 !important; border-radius: 5px;
}
.hamburger nav a.collection-card .collection-card__title {
  font-size: 13.5px; font-weight: 500; margin: 0 !important;
}

/* Подложки и рамки — светлой волной доски вместо серого */
.product__free-delivery { background: #eaf4fd !important; border-color: var(--brand-sky) !important; }
.tabs__item:not(.is-active):hover { border-color: var(--brand-sky) !important; }

/* ── Страница статьи ──────────────────────────────────────────────────────
   Было: дата по центру, заголовок по левому краю контейнера, текст — в третьей
   сетке со своим отступом. Три разных выравнивания на одной странице.
   Стало: одна колонка на 720 px (это 68–72 знака в строке — верх читаемости),
   всё выстроено по её левому краю. */
.article-page { max-width: 1200px; }
.article-page__head,
.article-page__body { max-width: 720px; margin-left: auto; margin-right: auto; }

.article-page__title {
  font-family: Onest, sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 12px; text-wrap: balance;
}
.article-page__meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--brand-grey); margin-bottom: 24px;
}

/* Обложка шире колонки текста — она задаёт масштаб страницы */
.article-page__cover { max-width: 960px; margin: 0 auto 32px; }
.article-page__cover img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover;
}

.article-page__body { font-size: 17px; line-height: 1.72; color: var(--brand-ink); }
.article-page__body > *:first-child { margin-top: 0; }

/* Первый абзац — лид: крупнее и темнее остального текста */
.article-page__body > p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--brand-head); }

.article-page__body h2 {
  font-family: Onest, sans-serif; font-weight: 800; font-size: 26px;
  line-height: 1.25; letter-spacing: -.01em; margin: 44px 0 14px;
}
.article-page__body h3 {
  font-family: Onest, sans-serif; font-weight: 700; font-size: 20px; margin: 32px 0 10px;
}
.article-page__body p { margin: 0 0 18px; }
.article-page__body ul, .article-page__body ol { margin: 0 0 20px; padding-left: 24px; }
.article-page__body li { margin-bottom: 9px; }
.article-page__body li::marker { color: var(--brand-blue); }

/* Картинки внутри текста выходят за колонку — иначе они теряются */
.article-page__body img {
  display: block; width: 100%; max-width: 860px; height: auto;
  margin: 28px auto; border-radius: 12px;
}

.article-page__body table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 26px 0;
  font-size: 15px; border: 1px solid #dde5ef; border-radius: 10px; overflow: hidden;
}
.article-page__body th {
  background: #eef4fb; font-weight: 600; color: var(--brand-head);
  text-align: left; padding: 11px 14px; border-bottom: 1px solid #dde5ef;
}
.article-page__body td { padding: 11px 14px; border-bottom: 1px solid #eaf0f7; vertical-align: top; }
.article-page__body tr:last-child td { border-bottom: 0; }

.article-page__body a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.article-page__body strong { color: var(--brand-head); }

@media (max-width: 767px) {
  .article-page__body { font-size: 16.5px; }
  .article-page__body > p:first-of-type { font-size: 17.5px; }
  .article-page__body h2 { font-size: 22px; margin-top: 34px; }
}

/* ── Цена: зелёная подсветка выгоды (по образцу Ozon) ────────────────────
   В каталоге — зелёный текст, в карточке — плашка с белым текстом. Оттенок
   #127a2e выбран по контрасту: 5,46 и на белом, и под белым текстом, то есть
   читается в обе стороны. Ozon с рабочей машины не открылся, точный оттенок
   их ценника не сверял. */
.product-card__price {
  color: #127a2e !important;
  font-family: Onest, sans-serif;
  font-weight: 800;
}
.product-card__old-price { font-size: 13px; }

/* Карточка товара: цена на зелёной плашке, старая цена и экономия — рядом */
.product__prices {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.product__price {
  background: #127a2e; color: #fff !important;
  font-family: Onest, sans-serif; font-weight: 800;
  padding: 6px 14px; border-radius: 10px; line-height: 1.15;
}
.product__old-price { align-self: center; }
.product__discount {
  align-self: center;
  background: #eaf6ee; color: #0f6626 !important;
  padding: 4px 10px; border-radius: 8px; font-weight: 600; font-size: 13.5px;
}

/* ── Чистый чёрный убираем ────────────────────────────────────────────────
   Тема красит меню, заголовки, названия товаров и вкладки в #000. Чистый
   чёрный на белом даёт контраст 21:1 — текст «звенит» и читается тяжело.
   Берём тёмный navy с лёгкой синевой: контраст 15:1, глаз отдыхает, а строка
   выглядит мягче. Оттенок тот же, что у корпуса доски, только очень тёмный. */
/* заголовки и названия — самый тёмный из текстовых тонов */
h1, h2, h3, h4, h5,
.section__title,
.product__title,
.product-card__title,
.article-card__title,
.collection-card__title,
.footer-item__title {
  color: var(--brand-head);
}

/* интерфейсные надписи и ссылки — основной тон */
.header-panel__page,
.toolbar-item__title,
.social__title,
.social__item,
.header-main__col-phone a,
.footer__phones a,
.contacts__title a,
.sidebar-menu__item a,
.catalog-filters-trigger span,
.js-order,
.js-order option,
.tabs__item,
.text, .editor,
.product__meta {
  color: var(--brand-ink);
}

/* CTA и подписи внутри статей набраны инлайн-стилями — они приходят из
   InSales, и править их в базе бессмысленно: ближайший импорт вернёт как было
   (урок 23.08). Поэтому перекрываем здесь.
   Белый на зелёном #25D366 даёт 2,0:1 — нечитаемо; тёмный navy даёт 8,5:1.
   Синий #1f6feb (4,6:1) заменяем нашим акцентом #0048c0 (7,8:1).
   Серый #7a8794 (3,7:1) — на подписи нашего тона. */
.article-page__body a[style*="25D366"],
.article-page__body a[style*="25d366"] { color: var(--brand-navy) !important; }
.article-page__body a[style*="1f6feb"],
.article-page__body a[style*="1e88e5"] {
  color: var(--brand-blue) !important; border-color: var(--brand-blue) !important;
}
.article-page__body [style*="#7a8794"],
.article-page__body [style*="#5a6672"] { color: var(--brand-grey) !important; }

/* куки-баннер: текст читаемый, ссылки — акцентом, а не чёрным */
.cookie-banner { color: var(--brand-ink); }
.cookie-banner a { color: var(--brand-blue); text-decoration: underline; }

/* даты на карточках и подписи — самый лёгкий тон */
.labels__item_type_date,
.article-card__date {
  color: var(--brand-grey);
}

/* заголовки внутри текста — чуть темнее основного, но всё ещё не чёрные */
.article-page__body h2, .article-page__body h3,
.page__content h2, .page__content h3 { color: var(--brand-head); }

/* Гамбургер: иконка была почти с кнопку размером */
/* Полоски бургера были почти в рост кнопки и выглядели тяжело */
.hamburger__trigger .hamburger__icon { font-size: 14px; line-height: 1; display: inline-flex; }
.hamburger__trigger .hamburger__icon svg { width: 1em; height: 1em; }
.hamburger__trigger { gap: 10px; font-weight: 600; letter-spacing: .01em; }

/* Иконки в тулбаре: одного размера и одного цвета, а не вразнобой */
.toolbar-item__icon svg { width: 19px !important; height: 19px !important; }
.toolbar-item__tool { color: var(--brand-ink); }
.toolbar-item__tool:hover { color: var(--brand-blue); }
.toolbar-item__title { font-size: 12px; letter-spacing: .01em; }

/* ── Зелёный ценника — от салатовой полосы доски #78dc00 ─────────────────
   Прежний #127a2e был просто «зелёным», а не цветом Navy. Теперь:
   в каталоге — затемнённый вариант той же полосы (#3f7a00, контраст 5,26),
   в карточке — сама полоса фоном с тёмным текстом (контраст 9,66). */
.product-card__price { color: #3f7a00 !important; }
.product__price {
  background: var(--brand-lime) !important;
  color: var(--brand-navy) !important;
}
.product__discount {
  background: #f0fbdd !important;
  color: #3f7a00 !important;
}

/* ── Карточки товара в один рост ─────────────────────────────────────────
   У товара с отзывами появляется строка с рейтингом, у остальных её нет —
   и в ряду разъезжались названия, цены и кнопки. Теперь карточка это колонка
   фиксированной структуры: место под рейтинг зарезервировано, кнопка всегда
   прижата к низу. */
.products-grid .product-card,
.products-carousel .product-card {
  display: flex;
  flex-direction: column;
}
.product-card__title {
  flex: 0 0 auto;
  height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-card__rating { height: 28px; display: flex; align-items: center; }

.product-card__bottom { margin-top: auto; }

/* ряды карточек тянутся на одну высоту */
.products-grid { align-items: stretch; }
.products-scroll > div > div { display: flex; }
.products-scroll .product-card { width: 100%; }

/* иконки избранного и сравнения на карточке: одного размера и на месте */
.product-card__buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px;
  width: auto !important;
  position: absolute; top: 8px; right: 8px; z-index: 2;
}
.product-card__buttons .button--icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid #e3e9f1 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.product-card__buttons .button--icon svg { width: 15px; height: 15px; }
.product-card__image { position: relative; }

/* Полоса прокрутки карусели: тонкая и в тон, а не системная толстая */
.products-carousel { scrollbar-width: thin; scrollbar-color: #c7d4e6 transparent; }
.products-carousel::-webkit-scrollbar { height: 6px; }
.products-carousel::-webkit-scrollbar-thumb { background: #c7d4e6; border-radius: 3px; }
.products-carousel::-webkit-scrollbar-track { background: transparent; }

/* Ряд карусели: высота по самой высокой карточке, лишней прокрутки по
   вертикали быть не должно — она появлялась из-за разной высоты карточек. */
/* Карточки в ряду одинаковы не растягиванием, а тем, что каждая их часть имеет
   заданную высоту: фото 3:4, название в две строки, строка рейтинга. Растягивание
   давало переполнение — блок с кнопкой вылезал за границу карточки и в ряду
   появлялась вертикальная прокрутка. */
/* Растягивание больше не нужно: высота карточки собирается из фиксированных
   частей (фото 280 + цена + название в две строки + рейтинг + кнопка).
   Со stretch получался порочный круг — обёртка тянулась за контейнером,
   контейнер за обёрткой, и кнопка «В корзину» вылетала за нижний край. */
.products-carousel > div { align-self: start; }
.products-carousel .product-card { margin: 0; height: auto; width: 100%; }

/* ── Кнопка «В корзину» всегда на месте ──────────────────────────────────
   Тема StartStore прячет её (position: absolute; top: 100%; visibility: hidden)
   и выдвигает из-под карточки при наведении. На витрине магазина это лишний
   шаг: покупатель не видит главного действия, пока не наведёт мышь, а на
   телефоне наведения нет вовсе. Заодно эта выехавшая кнопка добавляла ряду
   42 px невидимой прокрутки. Возвращаем её в поток. */
.product-card_type_hover .product-card__bottom,
.product-card .product-card__bottom {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  left: auto !important;
  top: auto !important;
  padding: 10px 0 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── Хлебные крошки ───────────────────────────────────────────────────────
   Ссылка и текущий раздел были одного цвета и без подчёркивания: отличить
   кликабельное от некликабельного можно было только по наведению. Тонкое
   подчёркивание решает это, не утяжеляя строку. */
.breadcrumbs a.breadcrumbs__item {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: #c2ccdb;
}
.breadcrumbs a.breadcrumbs__item:hover { color: var(--brand-blue); text-decoration-color: currentColor; }
.breadcrumbs span.breadcrumbs__item { color: var(--brand-grey); }

/* Кнопки-ссылки в карточке («Нашли дешевле?», «Задать вопрос», «Поделиться»)
   были высотой 19 px — на телефоне в них тяжело попасть. */
.product__buttons-second .button--empty,
.product__actions .button--empty { min-height: 32px; padding: 6px 4px; }