/* =========================================================
   Homepage — ChessBase Shop
   Design tokens + all component styles
   ========================================================= */

/* --- Design Tokens --- */
:root {
  --color-primary: #cd1719;
  --color-primary-dark: #c3171c;
  --color-primary-gradient: linear-gradient(220deg, #a32322 8.86%, #d51118 91.84%);
  --color-text: #252525;
  --color-text-header: #3c3c3c;
  --color-text-muted: #c4c4c4;
  --color-text-footer: #c0c1c6;
  --color-bg-gray: #f6f6f6;
  --color-border: #e4e4e4;
  --color-footer-bg: #242424;
  --color-footer-select: #2d2e2d;
  --color-white: #ffffff;

  --shadow-card: 0 8px 24px rgba(149, 157, 165, 0.2);
  --shadow-button: 0 2px 6px rgba(74, 58, 255, 0.1);
  --shadow-button-inner: inset 0 -1px 1px rgba(0,0,0,0.12), inset 0 1px 1.5px rgba(255,255,255,0.25);
  --shadow-product-img: 0 12px 28px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
  --shadow-footer-select: 0 3px 8px rgba(0,0,0,0.24);

  --font-family: 'Geist', sans-serif;
  --container-width: 1206px;
  --page-padding: 117px;
  --gutter: 40px; /* min side padding of the centered container on tablet/desktop */
}

/* Phones use a tighter gutter */
@media (max-width: 992px) {
  :root { --gutter: 20px; }
}

/* --- Reset / Base --- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#wrapper > .homepage-main {
  flex: 1 0 auto;
}

#wrapper > .site-footer {
  flex-shrink: 0;
}

.cb-page {
  font-family: var(--font-family);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cb-container {
  max-width: calc(var(--container-width) + var(--gutter) * 2);
  margin: 0 auto;
  width: 100%;
  padding-inline: var(--gutter);
}

.cb-page .container,
.cb-page .container-full {
  max-width: calc(var(--container-width) + var(--gutter) * 2);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* =========================================================
   PROMOTION BAR
   ========================================================= */
.promotion-bar {
  background: var(--color-primary-gradient);
  color: var(--color-white);
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.promotion-bar__inner {
  max-width: calc(var(--container-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.promotion-bar__first {
  font-weight: 600;
}

.promotion-bar__link {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.promotion-bar__link:hover {
  opacity: 0.85;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  background: var(--color-white);
  padding: 25px 0;
}

.site-header--with-discount {
  padding-bottom: 0;
  position: relative;
}

.site-header__main {
  max-width: calc(var(--container-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.site-header__burger {
  display: none;
}

.site-header__mobile-panel,
.site-header__mobile-backdrop {
  display: none;
}

.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.site-header__brand:hover {
  opacity: 0.9;
}

.site-header__logo-img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.site-header__site-name {
  font-size: 35px;
  font-weight: 400;
  letter-spacing: -1.05px;
  color: var(--color-text-header);
  margin: 0;
  line-height: 1;
}

.site-header__icons {
  display: flex;
  align-items: center;
  gap: 25px;
}

.site-header__icon-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-header);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  text-decoration: none;
  transition: color 0.2s;
}

.site-header__icon-link:hover {
  color: var(--color-primary);
}

.site-header__icon-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;

}


/* Profile wrapper with dropdown — Figma 109:628 */
.site-header__profile-wrap {
  position: relative;
}

.site-header__profile-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Chevron — Figma: vector 10×5 inside 24×21 frame, gap to text 2px */
.site-header__chevron {

  flex-shrink: 0;
  margin-left: -3px; /* reduce parent gap 5px в†’ effective 2px */
  transition: transform 0.2s;
  padding: 8px 7px;
}

.site-header__profile-wrap.open .site-header__chevron {
  transform: rotate(180deg);
}

/* Dropdown — Figma 109:688: 115×102, Union shape with arrow notch at top
   Content starts 7px from top (arrow height), 95px of items below */
.site-header__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 115px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding-top: 2px;
}

/* Arrow notch at top — 7px tall, centered */
.site-header__dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: var(--color-white);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.06);
}

/* Clip children so they don't overlap the arrow shadow */
.site-header__dropdown::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  border-radius: 8px;
  z-index: -1;
}

.site-header__profile-wrap.open .site-header__dropdown {
  display: flex;
  flex-direction: column;
}

/* Dropdown items — Figma: 31px height, padding 10px left + 8px top, icon 14px, gap 5px */
.site-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 115px;
  height: 31px;
  padding: 8px 10px;
  color: var(--color-text-header);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: normal;
  text-decoration: none;
  transition: background 0.15s;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.site-header__dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.site-header__dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

.site-header__dropdown-item:hover {
  background: #fafafa;
}

.site-header__dropdown-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Divider line */
.site-header__divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* Nav row */
.site-header__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.site-header__nav-link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: var(--color-text-header);
  text-decoration: none;
  transition: color 0.2s;
}

.site-header__nav-link:hover {
  color: var(--color-primary);
}

.site-header__nav-link--discount {
  color: var(--color-primary);
  font-weight: 500;
}

.site-header__help-link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  color: var(--color-text-header);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.site-header__help-link:hover {
  color: var(--color-primary);
}

.site-header__help-link svg {
  width: 24px;
  height: 24px;
}

/* =========================================================
   DISCOUNT BANNER — Figma node 43:190
   Overlaps header by 45px via negative margin.
   129px container with red gradient strip (75px) at bottom.
   Product images overflow above strip into header zone.
   ========================================================= */
.discount-banner {
  position: relative;
  height: 129px;
  margin-top: -45px;
  overflow: visible;
  /* #wrapper — flex-колонка: с auto-отступами без явной ширины блок сжимался
     до ширины содержимого (~80px), полоса и текст пропадали. */
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

/* Red wave strip — background image with built-in chess piece decorations */
.discount-banner__strip {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
  background-image: url('/images/promo-bg-desktop.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}

/* Content body — text + image, positioned over strip */
.discount-banner__body {
  position: relative;
  height: 100%;
}

/* Text area — vertically centered on the 75px red strip */
.discount-banner__content {
  position: absolute;
  left: 150px;
  bottom: 15px;
  width: 100%;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 20px;
}

.discount-banner__text {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.44px;
  line-height: 1.35;
  white-space: nowrap;
}

.discount-banner__text-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
}

.discount-banner__text-link:hover {
  opacity: 0.85;
}

/* Image area — right side, full height of banner (129px), bottom-aligned */
.discount-banner__image {
  position: absolute;
  right: 100px;
  bottom: 0;
  height: 109px;
  z-index: 3;
}

.discount-banner__image-link {
  display: block;
  height: 100%;
}

.discount-banner__img {
  height: 100%;
  width: auto;
  display: block;
}

/* When image is present, shift text left to avoid overlap */
.discount-banner__body:has(.discount-banner__image) .discount-banner__content {
  padding-right: 350px;
}

/* Discount banner mobile styles moved to @media (max-width: 992px) block */

/* =========================================================
   BANNER / SLIDER
   ========================================================= */
.banner-slider {
  padding: 30px 0 0;
}

.banner-slider .cb-container {
  position: relative;
}

.banner-slider__swiper {
  border-radius: 15px;
  overflow: hidden;
  max-width: var(--container-width);
  margin: 0 auto;
  position: relative;
}

.banner-slider__slide {
  position: relative;
  height: 350px;
  border-radius: 15px;
  overflow: hidden;
}

.banner-slider__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-slider__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  pointer-events: none;
}

/* Content block — positioned from Figma: left 88px, top 66px */
.banner-slider__content {
  position: absolute;
  top: 66px;
  left: 88px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 734px;
  max-width: calc(100% - 176px);
}

/* Text group: titles + CTA button */
.banner-slider__text-group {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Titles: title + subtitle */
.banner-slider__titles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner-slider__title {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--color-white);
  margin: 0;
  line-height: normal;
}

.banner-slider__subtitle {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--color-white);
  margin: 0;
  line-height: normal;
}

/* CTA frosted-glass button */
.banner-slider__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 217px;
  height: 39px;
  padding: 9px 23px;
  background: rgba(255, 255, 255, 0.19);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border-radius: 5px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  text-decoration: none;
  box-shadow: inset 0px 1px 4px 0px rgba(255, 255, 255, 0.25);
  transition: background 0.2s;
  white-space: nowrap;
}

.banner-slider__cta:hover {
  background: rgba(255, 255, 255, 0.30);
}

/* Platform icons (iOS + Android) */
.banner-slider__platforms {
  display: flex;
  align-items: center;
  gap: 3px;
}

.banner-slider__platform-icon {
  color: var(--color-white);
}

.banner-slider__platform-icon:first-child {
  width: 18px;
  height: 21px;
  padding-right: 5px;
  box-sizing: content-box;
}

.banner-slider__platform-icon--android {
  width: 22px;
  height: 22px;
  padding: 5px;
  box-sizing: content-box;
}

/* Custom navigation arrows (Figma chevrons) */
.banner-slider__nav-prev,
.banner-slider__nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  opacity: 0.8;
  transition: opacity 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.banner-slider__nav-prev:hover,
.banner-slider__nav-next:hover {
  opacity: 1;
}

.banner-slider__nav-prev {
  left: 26px;
}

.banner-slider__nav-next {
  right: 26px;
}

/* Hide default Swiper nav */
.banner-slider .swiper-button-prev,
.banner-slider .swiper-button-next {
  display: none;
}

/* Pagination dots — Figma: 9x9 ellipses, gap 4px, active=filled, inactive=ring */
.banner-slider .swiper-pagination {
  bottom: 15px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.banner-slider .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: transparent;
  border: 1.5px solid var(--color-white);
  opacity: 1;
  margin: 0 !important;
  border-radius: 50%;
  transition: background 0.2s, border-color 0.2s;
}

.banner-slider .swiper-pagination-bullet-active {
  background: var(--color-white);
  border-color: var(--color-white);
  opacity: 1;
}

/* =========================================================
   SECTION HEADINGS (shared)
   ========================================================= */
.section-heading {
  text-align: center;
  margin-bottom: 35px;
}

.section-heading__label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: var(--color-primary);
  margin: 0 0 6px;
}

.section-heading__title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--color-text);
  margin: 0;
}

/* =========================================================
   TABS HELP
   ========================================================= */
/* Figma node 223:687 — "Помощь с выбором" */
.tabs-help {
  padding: 100px 0 0;
}

/* Override heading margin for this section — Figma gap 65px */
.tabs-help__heading {
  margin-bottom: 65px;
}

/* Tab bar container — centered, extra bottom padding for triangle */
.tabs-help__bar {
  display: flex;
  justify-content: center;
  margin-bottom: 44px; /* 50px gap minus ~6px triangle */
  padding-bottom: 6px; /* space for triangle to poke out */
}

/* Tab bar background — Figma: 668px, 37px, #f6f6f6, border #e4e4e4, radius 8px */
.tabs-help__bar-inner {
  display: flex;
  width: 668px;
  height: 37px;
  background: #f6f6f6;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  position: relative;
  overflow: visible;
}

/* Tab button — Figma: 167px × 37px, 16px medium, #252525 */
.tabs-help__tab {
  width: 167px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #252525;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0 16px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  border-radius: 8px;
}

/* Active tab — Figma Union: red rounded rect + triangle notch below */
.tabs-help__tab--active {
  background: linear-gradient(180deg, #c62828 0%, #b71c1c 100%);
  color: var(--color-white);
  border-radius: 8px;
  z-index: 2;
  margin: -1px 0; /* cover the bar border */
  height: 39px; /* 37px + 2Г—1px border coverage */
}

/* Triangle notch pointing down — CSS border triangle, no overlap */
.tabs-help__tab--active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 5px solid #b71c1c;
}

.tabs-help__tab:hover:not(.tabs-help__tab--active) {
  color: var(--color-primary);
}

/* Panel — Figma: full width, 286px, border #e4e4e4, radius 15px, shadow */
.tabs-help__panel {
  display: none;
  position: relative;
  background: var(--color-white);
  border: 1px solid #e4e4e4;
  border-radius: 15px;
  box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.2);
  overflow: hidden;
  max-width: var(--container-width);
  margin: 0 auto;
  height: 286px;
}

.tabs-help__panel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(0deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 100%),
              url('/Rectangle.png') lightgray 50% / cover no-repeat;
  background-blend-mode: hue, normal;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, white 40%);
  mask-image: linear-gradient(to right, transparent 0%, white 40%);
  pointer-events: none;
  z-index: 0;
}

.tabs-help__panel--active {
  display: flex;
  align-items: flex-start;
}

/* Image wrapper — Figma: margin 20px, 275×246, bg #f6f6f6, radius 10px */
.tabs-help__image-wrap {
  flex-shrink: 0;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.tabs-help__image {
  width: 275px;
  height: 246px;
  background: #f6f6f6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Поля вокруг картинки — как в макете (изображение ~193×197 в боксе 275×246). */
  padding: 24px;
  box-sizing: border-box;
  /* Своя группа наложения: multiply у JPEG смешивается только с серым боксом,
     а не с фоном панели (иначе в Safari вокруг картинки виден прямоугольник). */
  isolation: isolate;
}

/* Картинка целиком вписывается в бокс с сохранением пропорций (ТЗ «Доработки
   1.09.2026» п.3): раньше высота бралась из атрибута height и широкие PNG
   обрезались по краям. */
.tabs-help__image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

/* JPEG с запечённым белым фоном (как у товарных карточек, п.13.2): на светлом
   сером боксе `multiply` растворяет белое, оставляя само изображение.
   Прозрачные PNG/WebP это не нужно — им blend только искажает полупрозрачные тени. */
.tabs-help__image img.tabs-help__img--opaque {
  mix-blend-mode: multiply;
}

/* Body — Figma: gap 33px from image, flex-col gap 36px (text group + CTA) */
.tabs-help__body {
  flex: 1;
  padding: 20px 20px 20px 13px; /* 20+275+33 = 328 from left; gap = 33px = padding-left 13 + image padding 20 */
  display: flex;
  flex-direction: column;
  gap: 36px;
  justify-content: center;
  min-height: 246px;
  position: relative;
  z-index: 1;
}

/* Text content from htmlText — contains <p> for description and <ul><li> for features */
.tabs-help__text {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Description paragraphs */
.tabs-help__text p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #252525;
  line-height: 22px;
  margin: 0;
  max-width: 683px;
}

/* Feature lists — 2 columns on desktop, 1 on mobile */
.tabs-help__text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.tabs-help__text ul li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #252525;
  line-height: normal;
}

/* Bullet dot for list items */
.tabs-help__text ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #252525;
  border-radius: 50%;
  flex-shrink: 0;
}

/* CTA button — Figma: 213×35px, radius 8px, red gradient, shadow */
.tabs-help__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 213px;
  height: 35px;
  padding: 0 16px;
  background: linear-gradient(220.12deg, #a32322 8.86%, #d51118 91.84%);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 2px 6px rgba(74, 58, 255, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.12), inset 0px 1px 1.5px rgba(255, 255, 255, 0.25);
  transition: opacity 0.2s;
  align-self: flex-start;
  white-space: nowrap;
}

.tabs-help__cta:hover {
  opacity: 0.9;
}

.tabs-help__cta svg {
  width: 15px;
  height: 15px;
}

/* =========================================================
   ARTICLES BLOCK — Figma node 223:692
   ========================================================= */
.articles-block {
  padding: 100px 0 0;
}

.articles-block__grid {
  display: flex;
  gap: 20px;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* Card base */
.articles-block__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Large card — 580x383, padding 25px, vertically centered */
.articles-block__item--large {
  flex: 0 0 580px;
  height: 383px;
  padding: 25px;
  justify-content: center;
  gap: 25px;
}

/* Small cards — 294x383, padding 8px */
.articles-block__item--small {
  flex: 0 0 294px;
  height: 383px;
  padding: 8px;
}

/* Title — 20px medium */
.articles-block__item-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin: 0;
  line-height: normal;
}

/* ===== Large card layout ===== */
.articles-block__item--large .articles-block__inner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Large card image — 239x271, portrait, double border frame */
.articles-block__item--large .articles-block__image {
  flex: 0 0 239px;
  height: 271px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: var(--color-white);
}

.articles-block__image a {
  display: block;
  position: absolute;
  inset: 8px; /* 5px frame + 3px gap */
  width: auto;
  height: auto;
  text-decoration: none;
  z-index: 2;
}

.articles-block__image > img {
  position: absolute;
  inset: 8px;
  width: auto;
  height: auto;
  z-index: 2;
}

.articles-block__item--large .articles-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* Outer frame — 5px #6e0201 */
.articles-block__item--large .articles-block__image::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 5px solid #6e0201;
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
}

/* Chess pattern — sits behind image, 2px larger on each side */
.articles-block__item--large .articles-block__image::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: url('/Rectangle%201000002027.jpg') center / cover no-repeat;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

/* Large card text column — max 303px, gap 10px, height matches image */
.articles-block__item--large .articles-block__text-col {
  flex: 1;
  max-width: 303px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 271px;
  min-height: 0;
}

/* Large card excerpt — takes remaining space, clips overflow */
.articles-block__item--large .articles-block__excerpt {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: var(--color-text);
  line-height: 22px;
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.articles-block__item--large .articles-block__excerpt p {
  margin: 0 0 10px;
  line-height: 22px;
}

.articles-block__item--large .articles-block__excerpt p:last-child {
  margin-bottom: 0;
}

/* Read more link — 16px medium, #c3171c, underline, always visible */
.articles-block__link {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #c3171c;
  text-decoration: underline;
  text-underline-offset: 3px;
  line-height: 22px;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.articles-block__link:hover {
  opacity: 0.8;
}

/* ===== Small card layout ===== */

/* Small card image — 275x168, landscape, double border frame */
.articles-block__item--small .articles-block__image {
  width: 275px;
  height: 168px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin-bottom: 15px;
  background: var(--color-white);
}

.articles-block__item--small .articles-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* Outer frame — 5px #6e0201 */
.articles-block__item--small .articles-block__image::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 5px solid #6e0201;
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
}

/* Chess pattern — sits behind image, 2px larger on each side */
.articles-block__item--small .articles-block__image::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: url('/Rectangle%201000002027.jpg') center / cover no-repeat;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

/* Placeholder images — fit inside the ::before border frame, no crop */
.articles-block__image img.articles-block__placeholder {
  object-fit: contain !important;
}
.articles-block__image > img.articles-block__placeholder {
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
}

/* Small card body — text section, clips overflow */
.articles-block__item--small .articles-block__body {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Small card title — no shrink */
.articles-block__item--small .articles-block__item-title {
  flex-shrink: 0;
}

/* Small card excerpt — takes remaining space, clips overflow */
.articles-block__item--small .articles-block__excerpt {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: var(--color-text);
  line-height: 22px;
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* =========================================================
   PRODUCTS BLOCK
   ========================================================= */
.products-block {
  padding: 100px 0 0;
}

.products-block__grid {
  display: flex;
  gap: 23px;
  justify-content: center;
}

/* Below the design width the 5-up row no longer fits — let it wrap
   instead of overflowing the (now gutter-padded) container. */
@media (max-width: 1286px) {
  .products-block__grid {
    flex-wrap: wrap;
  }
}

/* =========================================================
   CATALOG PAGE (uses the product-card component)
   ========================================================= */
.catalog {
  padding: 40px 0 80px;
}

.catalog__heading {
  margin-bottom: 35px;
}

.catalog__title {
  margin: 0 0 8px;
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--color-text);
}

.catalog__subtitle {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  letter-spacing: -0.36px;
  color: #676767;
}

.catalog__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
}

.catalog__pagination {
  margin-top: 40px;
}

.catalog__empty {
  font-family: var(--font-family);
  font-size: 16px;
  color: #676767;
}

@media (max-width: 992px) {
  .catalog {
    padding: 20px 0 60px;
  }

  .catalog__heading {
    margin-bottom: 25px;
  }

  .catalog__title {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .catalog__subtitle {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .catalog__grid {
    flex-direction: column;
    gap: 35px;
  }
}

/* =========================================================
   PRODUCT CARD  (223 x 386, Figma node 223:731)
   ========================================================= */
.product-card {
  width: 223px;
  min-height: 386px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 5px 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 0.25s, border-radius 0.25s, box-shadow 0.25s;
}

.product-card:hover {
  border-color: transparent;
  border-radius: 8px;
  box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25),
              0 10px 5px rgba(0, 0, 0, 0.22);
}

.product-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 213px;
  flex: 1;
  min-height: 0;
}

/* Image wrapper — holds image area + discount badge */
.product-card__image-wrap {
  position: relative;
  width: 213px;
  flex-shrink: 0;
}

/* Gray image area 213 x 259, rounded top */
.product-card__image {
  width: 213px;
  height: 259px;
  background: #f6f6f6;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card__image img {
  max-width: 123px;
  max-height: 170px;
  object-fit: contain;
  border-radius: 3px;
  /* Some source artwork has a white card baked into the PNG (opaque white, only the
     corners are transparent). On the light card background `multiply` blends that white
     into the background, leaving the coloured artwork intact — without editing the images.
     The box-shadow is intentionally dropped: it would outline the full image rectangle and
     re-create the white-card look once the fill is blended away. */
  mix-blend-mode: multiply;
}

/* Комплекты (п.13.1): превью — горизонтальный «веер» из обложек.
   Портретные ограничения (123×170) делают его крошечным, поэтому для
   комплектов выводим картинку крупно, почти во всю ширину бокса. */
.product-card--bundle .product-card__image img {
  max-width: 92%;
  max-height: 80%;
}

/* Discount badge — top-left overlay */
.product-card__discount-label {
  position: absolute;
  top: 12px;
  left: 0;
  background: #cd1719;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: normal;
  padding: 3px 26px 3px 8px;
  border-radius: 0 100px 100px 0;
  height: 24px;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Info block below image */
.product-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  flex: 1;
  padding-top: 15px;
}

.product-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: 1;
}

.product-card__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 22px;
  color: #252525;
  text-align: center;
  margin: 0;
  width: 100%;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.product-card__current-price {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 15px;
  color: #252525;
  white-space: nowrap;
}

.product-card__old-price {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 15px;
  color: #c4c4c4;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Buy / Soon / Unavailable button — 213 x 35 */
.product-card__actions {
  width: 100%;
  flex-shrink: 0;
}

.product-card__btn {
  width: 213px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 1.35;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.product-card__btn--buy {
  background: linear-gradient(220.12deg, #a32322 8.86%, #d51118 91.84%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(74,58,255,0.1),
              inset 0 -1px 1px rgba(0,0,0,0.12),
              inset 0 1px 1.5px rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}

.product-card__btn--buy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
  pointer-events: none;
}

.product-card__btn--buy:hover::after {
  opacity: 1;
}

.product-card__btn--buy svg {
  width: 13px;
  height: 11px;
  flex-shrink: 0;
}

.product-card__btn--soon,
.product-card__btn--unavailable {
  background: #f6f6f6;
  color: #c4c4c4;
  cursor: not-allowed;
}

/* =========================================================
   FAQ BLOCK
   ========================================================= */
.faq-block {
  padding: 100px 0 0;
}

/* FAQ tab bar */
.faq-block__tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.faq-block__tabs-inner {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-gray);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 0.5px 1px rgba(25,33,61,0.07);
  padding: 12px 16px;
  gap: 12px;
}

.faq-block__tab {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: normal;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}

.faq-block__tab--active {
  background: var(--color-primary-gradient);
  color: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-button),
              var(--shadow-button-inner);
  position: relative;
}

.faq-block__tab:hover:not(.faq-block__tab--active) {
  color: var(--color-primary);
}

/* FAQ section panels */
.faq-block__section {
  display: none;
}

.faq-block__section--active {
  display: block;
}

/* FAQ accordion items */
.faq-block__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-block__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-block__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 33px 31px;
  min-height: 88px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 22px;
  box-sizing: border-box;
}

.faq-block__item--open .faq-block__question {
  font-weight: 500;
}

.faq-block__chevron {
  width: 17px;
  height: 10px;
  flex-shrink: 0;
  margin-left: 20px;
  transition: transform 0.3s;
  color: var(--color-text);
}

.faq-block__item--open .faq-block__chevron {
  transform: rotate(180deg);
}

.faq-block__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-block__answer-inner {
  padding: 0 31px 33px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-block__answer-text {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: var(--color-text);
  line-height: 22px;
}

.faq-block__answer-text p {
  margin: 0;
}

.faq-block__read-more {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary-dark);
  text-decoration: underline;
  line-height: 22px;
}

/* =========================================================
   REVIEWS BLOCK — pixel-perfect Figma node 223:824
   ========================================================= */
.reviews-block {
  padding: 100px 0 0;
}

.reviews-block__slider {
  max-width: var(--container-width);
  margin: 0 auto;
}

.reviews-block__slider .swiper {
  overflow: hidden;
}

/* Card */
.reviews-block__card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-white);
  overflow: hidden;
  height: 228px;
  width: 100%;
}

/* Left: text content */
.reviews-block__content {
  position: relative;
  z-index: 2;
  max-width: 784px;
  padding: 31px 0 31px 65px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.reviews-block__quote-icon {
  width: 37px;
  height: 27px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.reviews-block__text {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: var(--color-text);
  line-height: 22px;
  margin: 0;
}

.reviews-block__text p {
  margin: 0;
}

.reviews-block__text div {
  margin: 0;
}

.reviews-block__author {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: var(--color-text);
  line-height: 22px;
  margin: 0;
}

.reviews-block__author-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reviews-block__author-note {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: var(--color-text-muted, #6b6b6b);
  line-height: 20px;
  margin: 0;
}

/* Right: image */
.reviews-block__image {
  position: absolute;
  right: 0;
  top: -1px;
  width: 671px;
  height: calc(100% + 2px);
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  padding-right: 90px;
  box-sizing: border-box;
}

.reviews-block__image-bg {
  position: absolute;
  inset: 0;
  background-image: url('/images/reviews-bg-chess.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  z-index: 0;
}

.reviews-block__image img {
  position: relative;
  z-index: 2;
  width: auto;
  height: 100%;
  mix-blend-mode: normal;
}

.reviews-block__image-fade-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 210px;
  height: 100%;
  background: linear-gradient(to right, var(--color-white) 0%, rgba(255,255,255,0) 100%);
  z-index: 1;
}

.reviews-block__image-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 97px;
  background: linear-gradient(to top, var(--color-white) 0%, rgba(255,255,255,0) 100%);
  z-index: 1;
}

/* Nav arrows — overlaid on card */
.reviews-block__arrow {
  position: absolute;
  top: 104px;
  z-index: 3;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: color 0.2s;
}

.reviews-block__arrow:hover {
  color: var(--color-primary);
}

.reviews-block__arrow--prev {
  left: 12px;
}

.reviews-block__arrow--prev svg {
  transform: scaleX(-1);
}

.reviews-block__arrow--next {
  right: 12px;
}

.reviews-block__arrow svg {
  width: 17px;
  height: 34px;
}

/* Pagination dots */
.reviews-block__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
}

.reviews-block__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: rgba(188,188,188,0.4);
  opacity: 1;
}

.reviews-block__dots .swiper-pagination-bullet-active {
  background: var(--color-text);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-footer-bg);
  margin-top: 100px;
  padding: 80px 0 calc(80px + env(safe-area-inset-bottom, 0px));
  width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
}

.site-footer__inner {
  max-width: calc(var(--container-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
  /* CSS Grid (not flex): a fixed 373px first track is computed reliably by Safari,
     unlike flex-basis which Safari/WebKit shrank — that made the left column narrower
     and the language/currency selects overlap the next column (ТЗ §5.4). */
  display: grid;
  grid-template-columns: 373px auto;
  align-items: start;
  gap: 32px;
  min-height: 252px;
}

/* Tablet: stack the brand above the link columns so they fit within the gutters */
@media (min-width: 993px) and (max-width: 1206px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer__columns {
    flex-wrap: wrap;
    gap: 24px 32px;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.site-footer__logo {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.site-footer__copyright-block {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: var(--color-text-footer);
  line-height: 24px;
}

.site-footer__copyright-block p {
  margin: 0;
}

.site-footer__privacy {
  color: var(--color-text-footer);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer__privacy:hover {
  color: var(--color-white);
}

/* Language / Currency selects */
.site-footer__selects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 29px;
}

.site-footer__select-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer__select-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: var(--color-text-footer);
  white-space: nowrap;
}

.site-footer__select {
  box-sizing: border-box;
  background: var(--color-footer-select);
  color: var(--color-text-footer);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  border: none;
  border-radius: 3px;
  height: 29px;
  padding: 0 30px 0 10px;
  box-shadow: var(--shadow-footer-select);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c0c1c6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.site-footer__select--locale {
  width: 106px;
}

.site-footer__select--currency {
  width: 79px;
}

/* Social links */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-footer);
  transition: color 0.2s;
  margin-right: 15px;
}

.site-footer__social-link:last-child {
  margin-right: 0;
}

.site-footer__social-link:hover {
  color: var(--color-white);
}

.site-footer__social-link svg {
  width: 24px;
  height: 24px;
}

/* Footer columns */
.site-footer__columns {
  display: flex;
  justify-content: flex-start;
  gap: 32px;
}

.site-footer__column {
  flex: 0 0 176px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__column-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: var(--color-white);
  line-height: 24px;
  margin: 0;
}

.site-footer__column-title a {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.2s;
}

.site-footer__column-title a:hover {
  opacity: 0.8;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__list a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: var(--color-text-footer);
  text-decoration: none;
  line-height: 24px;
  transition: color 0.2s;
}

.site-footer__list a:hover {
  color: var(--color-white);
}

/* =========================================================
   AUTH MODAL — pixel-perfect from Figma
   ========================================================= */

/* --- Overlay & shell --- */
.auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.auth-modal--open {
  display: flex;
}
.auth-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 24, 0.60);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
.auth-modal__dialog {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}
.auth-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 2;
  line-height: 0;
}
.auth-modal__close:hover svg path {
  stroke: var(--color-primary);
}

/* Steps visibility */
.auth-modal__step {
  display: none;
}
.auth-modal__step--active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Shared typography --- */
.auth-modal__title {
  font-size: 30px;
  font-weight: 500;
  color: #252525;
  letter-spacing: -0.6px;
  margin: 0;
  width: 100%;
  text-align: center;
}
.auth-modal__text {
  font-size: 18px;
  font-weight: 400;
  color: #252525;
  letter-spacing: -0.36px;
  margin: 0;
  text-align: center;
}
.auth-modal__hint {
  font-size: 16px;
  font-weight: 400;
  color: #9e9e9e;
  letter-spacing: -0.32px;
  margin: 0;
  text-align: center;
}

/* Title section: title + description block, gap 25px */
.auth-modal__title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 100%;
}

/* Description block: text + hint, gap 7px */
.auth-modal__desc {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

/* --- State 1: Email --- */
.auth-modal__step[data-step="email"] {
  padding: 52px 105px;
  width: 668px;
  gap: 30px;
}
.auth-modal__step[data-step="email"] .auth-modal__form {
  width: 358px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.auth-modal__input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.auth-modal__label {
  font-size: 14px;
  font-weight: 400;
  color: #252525;
  line-height: 1.25;
  white-space: nowrap;
}
.auth-modal__input {
  width: 100%;
  height: 41px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 7px;
  padding: 0 16px;
  font-size: 14px;
  font-family: var(--font-family);
  color: #252525;
  line-height: 1.25;
  outline: none;
  transition: border-color 0.2s;
}
.auth-modal__input::placeholder {
  color: #9e9e9e;
}
.auth-modal__input:focus {
  border-color: #252525;
}
.auth-modal__input--error {
  border-color: rgba(210, 18, 25, 0.5);
}
.auth-modal__error {
  font-size: 13px;
  font-weight: 400;
  color: #d21219;
  line-height: 1.25;
  display: none;
}
.auth-modal__error--visible {
  display: block;
}

/* --- Buttons --- */
.auth-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  border-radius: 8px;
  padding: 0 16px;
  border: none;
  font-family: var(--font-family);
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 1.35;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.auth-modal__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auth-modal__btn--primary {
  width: 100%;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(206.63deg, rgb(163, 35, 34) 8.86%, rgb(213, 17, 24) 91.84%);
  box-shadow: 0px 2px 6px 0px rgba(74, 58, 255, 0.1),
              inset 0px -1px 1px 0px rgba(0, 0, 0, 0.12),
              inset 0px 1px 1.5px 0px rgba(255, 255, 255, 0.25);
}
.auth-modal__btn--primary:hover:not(:disabled) {
  opacity: 0.9;
}
.auth-modal__btn--secondary {
  font-weight: 400;
  color: #252525;
  background: #f6f6f6;
  border: 1px solid #e4e4e4;
}
.auth-modal__btn--secondary:hover:not(:disabled) {
  background: #eeeeee;
}

/* --- State 2 & 3: Code --- */
.auth-modal__step[data-step="code"] {
  padding: 52px 105px;
  width: 668px;
  gap: 30px;
}
.auth-modal__step[data-step="code"] .auth-modal__form {
  width: 415px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* OTP group: digits + checkbox (+ optional error) */
.auth-modal__otp-group {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.auth-modal__otp-with-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-modal__code-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.auth-modal__code-box {
  width: 43px;
  height: 41px;
  border: 1px solid #d8dadc;
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  font-family: var(--font-family);
  color: #252525;
  line-height: 1.25;
  outline: none;
  transition: border-color 0.2s;
}
.auth-modal__code-box:focus {
  border-color: #252525;
}
.auth-modal__code-box--error {
  border-color: rgba(210, 18, 25, 0.5);
}

/* Checkbox row */
.auth-modal__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  justify-content: center;
}
.auth-modal__remember-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.auth-modal__remember-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid #d8dadc;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.auth-modal__remember-checkbox:checked + .auth-modal__remember-check {
  background: #cd1719;
  border-color: #cd1719;
}
.auth-modal__remember-checkbox:checked + .auth-modal__remember-check::after {
  content: '';
  display: block;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.auth-modal__remember-text {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.28px;
  line-height: 22px;
}

/* Button row */
.auth-modal__code-actions {
  display: flex;
  gap: 15px;
  width: 100%;
}
.auth-modal__code-actions .auth-modal__btn {
  width: 200px;
}

/* --- State 4: Success --- */
.auth-modal__step[data-step="success"] {
  padding: 73px 87px 96px;
  width: 632px;
  gap: 35px;
}
.auth-modal__success-icon {
  width: 127px;
  height: 127px;
  line-height: 0;
}
.auth-modal__step[data-step="success"] .auth-modal__title {
  text-align: center;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .auth-modal__step[data-step="email"],
  .auth-modal__step[data-step="code"],
  .auth-modal__step[data-step="success"] {
    padding: 40px 24px;
    width: auto;
    min-width: 0;
  }
  .auth-modal__dialog {
    width: calc(100vw - 32px);
  }
  .auth-modal__step[data-step="email"] .auth-modal__form,
  .auth-modal__step[data-step="code"] .auth-modal__form {
    width: 100%;
  }
  .auth-modal__code-actions {
    flex-direction: column;
  }
  .auth-modal__code-actions .auth-modal__btn {
    width: 100%;
  }
}

/* =========================================================
   AUTH STANDALONE PAGE
   ========================================================= */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 60px 16px;
  background: var(--color-bg-gray);
}
.auth-page__card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  max-width: 90vw;
}
.auth-page__card .auth-modal__step--active {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-page__card .auth-modal__step[data-step="email"] {
  padding: 52px 105px;
  width: 668px;
  gap: 30px;
}
.auth-page__card .auth-modal__step[data-step="email"] .auth-modal__form {
  width: 358px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.auth-page__card .auth-modal__step[data-step="code"] {
  padding: 52px 105px;
  width: 668px;
  gap: 30px;
}
.auth-page__card .auth-modal__step[data-step="code"] .auth-modal__form {
  width: 415px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.auth-page__card .auth-modal__step[data-step="success"] {
  padding: 73px 87px 96px;
  width: 632px;
  gap: 35px;
}
@media (max-width: 700px) {
  .auth-page {
    padding: 40px 16px;
    min-height: 50vh;
  }
  .auth-page__card .auth-modal__step[data-step="email"],
  .auth-page__card .auth-modal__step[data-step="code"],
  .auth-page__card .auth-modal__step[data-step="success"] {
    padding: 40px 24px;
    width: auto;
    min-width: 0;
  }
  .auth-page__card {
    width: calc(100vw - 32px);
  }
  .auth-page__card .auth-modal__step[data-step="email"] .auth-modal__form,
  .auth-page__card .auth-modal__step[data-step="code"] .auth-modal__form {
    width: 100%;
  }
}

/* =========================================================
   HOMEPAGE SECTIONS SPACING
   ========================================================= */
.homepage-main {
  overflow: hidden;
}

/* =========================================================
   MOBILE — 992px and below
   Figma: 375px viewport, 20px side padding, content 335px
   ========================================================= */
@media (max-width: 992px) {

  /* --- Global: 20px minimum side padding --- */
  .cb-container,
  .cb-page .container,
  .cb-page .container-full {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* =======================================================
     HEADER — Figma 278:824
     Logo 36px + name 18px | hamburger 20px
     Single row, space-between, no nav/icons/divider
     ======================================================= */
  .site-header {
    padding: 12px 0;
    position: relative;
    z-index: 1001;
  }

  .site-header--with-discount {
    padding-bottom: 12px;
  }

  .site-header__main {
    max-width: none;
    padding: 0 20px;
    gap: 0;
  }

  .site-header__top {
    align-items: center;
  }

  .site-header__brand {
    gap: 10px;
  }

  .site-header__logo-img {
    width: 36px;
    height: 36px;
  }

  .site-header__site-name {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.54px;
  }

  /* Hamburger — visible on mobile */
  .site-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Hide desktop-only elements on mobile */
  .site-header__icons,
  .site-header__divider,
  .site-header__bottom {
    display: none;
  }

  /* ---- Mobile menu panel (overlay dropdown) ---- */
  .site-header__mobile-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  .site-header__mobile-panel-inner {
    padding: 8px 20px 20px;
  }

  .site-header__mobile-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  /* Open state */
  .site-header--menu-open {
    position: relative;
    z-index: 1001;
  }

  .site-header--menu-open .site-header__mobile-panel {
    display: block;
  }

  .site-header--menu-open ~ .site-header__mobile-backdrop,
  .site-header--menu-open .site-header__mobile-backdrop {
    display: block;
  }

  /* Mobile nav links */
  .site-header__mobile-nav {
    display: flex;
    flex-direction: column;
  }

  .site-header__mobile-nav-link {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    letter-spacing: -0.3px;
  }

  .site-header__mobile-nav-link:last-child {
    border-bottom: none;
  }

  .site-header__mobile-nav-link--discount {
    color: #d32f2f;
  }

  .site-header__mobile-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
  }

  /* Mobile action links (profile, cart, help) */
  .site-header__mobile-actions {
    display: flex;
    flex-direction: column;
  }

  .site-header__mobile-action-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
  }

  .site-header__mobile-action-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #3c3c3c;
  }

  .site-header__mobile-action-link--logout {
    color: #999;
  }

  /* =======================================================
     DISCOUNT BANNER — mobile
     ======================================================= */
  .discount-banner {
    height: 50px;
    margin-top: -15px;
    margin-left: 20px;
    margin-right: 20px;
    width: auto;
  }

  .discount-banner__strip {
    height: 50px;
    background-image: url('/images/promo-bg-mobile.png');
  }

  .discount-banner__content {
    left: 0;
    bottom: 0;
    height: 50px;
    padding: 0 20px;
  }

  .discount-banner__text {
    font-size: 12px;
    white-space: normal;
    text-align: center;
    letter-spacing: -0.24px;
  }

  .discount-banner__image {
    display: none;
  }

  .discount-banner__body:has(.discount-banner__image) .discount-banner__content {
    padding-right: 20px;
  }

  /* =======================================================
     BANNER SLIDER — Figma 278:831
     Rounded 8px, padding 23px sides / 23px top / 10px bottom
     Title 18px, subtitle 12px, CTA 10px/25px/141px
     Platform icons small, no nav arrows
     ======================================================= */
  .banner-slider {
    padding: 15px 0 0;
  }

  .banner-slider__swiper {
    border-radius: 8px;
  }

  .banner-slider__slide {
    height: auto;
    min-height: 0;
    border-radius: 8px;
    padding: 0;
    display: block;
  }

  /* Real uploaded banners: show the full image, adaptive height, no crop */
  .banner-slider__image-link {
    display: block;
    width: 100%;
    height: auto;
  }

  .banner-slider__image {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 8px;
  }

  /* Placeholder/overlay banners keep a fixed area with cover image + content */
  .banner-slider__slide:has(.banner-slider__content) {
    min-height: 180px;
    padding: 23px 23px 24px;
  }

  .banner-slider__slide:has(.banner-slider__content) .banner-slider__image {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }

  .banner-slider__content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 289px;
    margin: 0 auto;
    gap: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-slider__text-group {
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }

  .banner-slider__titles {
    gap: 10px;
  }

  .banner-slider__title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
    line-height: normal;
  }

  .banner-slider__subtitle {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
    line-height: normal;
  }

  .banner-slider__cta {
    width: 141px;
    height: 25px;
    padding: 0 15px;
    font-size: 10px;
    letter-spacing: -0.2px;
    border-radius: 5px;
  }

  .banner-slider__platforms {
    gap: 5px;
  }

  .banner-slider__platform-icon:first-child {
    width: 11px;
    height: 13px;
    padding-right: 0;
  }

  .banner-slider__platform-icon--android {
    width: 14px;
    height: 14px;
    padding: 0;
  }

  /* Hide nav arrows */
  .banner-slider__nav-prev,
  .banner-slider__nav-next {
    display: none;
  }

  .banner-slider .swiper-pagination {
    bottom: 10px !important;
    gap: 3px;
  }

  .banner-slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-width: 1px;
  }

  /* =======================================================
     TABS HELP — Figma 278:852
     gap 35px heading→content, gap 30px tabs→card
     Heading: label 12px #cd1719, title 18px #252525, both 500
     Tab bar: full-width 335px, height 35px, 10px font, rounded 5px
     Card: rounded 8px, padding 6px 8px 25px, shadow
     Image: 241px, full-width, rounded 8px, centered img
     Body: gap 20px from image, text gap 15px, CTA 130Г—27
     ======================================================= */
  .tabs-help {
    padding: 60px 0 0;
  }

  .tabs-help__heading {
    margin-bottom: 35px;
    text-align: center;
  }

  .tabs-help__heading .section-heading__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
    margin-bottom: 10px;
  }

  .tabs-help__heading .section-heading__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
  }

  .tabs-help__bar {
    margin-bottom: 30px;
    padding-bottom: 6px;
  }

  .tabs-help__bar-inner {
    width: 100%;
    height: 35px;
    border-radius: 5px;
  }

  .tabs-help__tab {
    flex: 1;
    width: auto;
    height: 35px;
    font-size: 10px;
    letter-spacing: -0.2px;
    padding: 0 8px;
    border-radius: 5px;
  }

  .tabs-help__tab--active {

    margin: -2px 0;
    border-radius: 5px;
  }

  .tabs-help__tab--active::after {
    bottom: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 4px solid #b71c1c;
  }

  .tabs-help__panel {
    border-radius: 8px;
    height: auto;
    max-width: none;
    padding: 6px 8px 25px;
  }

  .tabs-help__panel--active {
    flex-direction: column;
    gap: 20px;
  }

  .tabs-help__image-wrap {
    padding: 0;
    width: 100%;
  }

  .tabs-help__image {
    width: 100%;
    height: 241px;
    border-radius: 8px;
  }

  .tabs-help__image img {

  }

  .tabs-help__body {
    padding: 0;
    gap: 15px;
    min-height: auto;
  }

  .tabs-help__text {
    gap: 15px;
  }

  .tabs-help__text p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    line-height: 20px;
    max-width: none;
  }

  .tabs-help__text ul {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .tabs-help__text ul li {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .tabs-help__cta {
    width: 130px;
    height: 27px;
    font-size: 10px;
    letter-spacing: -0.2px;
    border-radius: 5px;
    padding: 0 33px;
    gap: 2px;
  }

  .tabs-help__cta svg {
    width: 9px;
    height: 9px;
  }

  /* =======================================================
     ARTICLES BLOCK — Figma 278:896
     Stacked vertically, gap 30px
     Large card: rounded 8px, padding 20px, height 444px
       Image 295Г—167, text 14px medium title, 12px/18px body
     Small cards: rounded 5px, padding 15px, horizontal layout
       Image 106Г—139 left, text 185px right, gap 14px
     All "read more": 12px medium #c3171c underline
     ======================================================= */
  .articles-block {
    padding: 60px 0 0;
  }

  .articles-block__grid {
    flex-direction: column;
    gap: 30px;
    max-width: none;
  }

  /* --- Large card (first) --- */
  .articles-block__item--large {
    flex: none;
    width: 100%;
    height: 444px;
    padding: 20px;
    border-radius: 8px;
    gap: 25px;
  }

  .articles-block__item--large .articles-block__item-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }

  .articles-block__item--large .articles-block__inner {
    flex-direction: column;
    gap: 15px;
  }

  .articles-block__item--large .articles-block__image {
    flex: none;
    width: 100%;
    height: 167px;
    border-radius: 8px;
  }

  .articles-block__item--large .articles-block__image::before {
    border-width: 3px;
    border-radius: 8px;
  }

  .articles-block__item--large .articles-block__image::after {
    inset: 6px;
  }

  .articles-block__item--large .articles-block__image a,
  .articles-block__item--large .articles-block__image > img {
    inset: 6px; /* 3px frame + 3px gap */
  }

  .articles-block__item--large .articles-block__text-col {
    max-width: none;
    height: auto;
    gap: 10px;
  }

  .articles-block__item--large .articles-block__excerpt {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 18px;
  }

  .articles-block__item--large .articles-block__excerpt p {
    margin: 0 0 8px;
    line-height: 18px;
  }

  .articles-block__link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
    line-height: 18px;
  }

  /* --- Small cards --- */
  .articles-block__item--small {
    flex: none;
    width: 100%;
    height: auto;
    padding: 15px;
    border-radius: 5px;
    flex-direction: row;
    gap: 14px;
  }

  .articles-block__item--small .articles-block__image {
    width: 106px;
    height: 139px;
    border-radius: 8px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .articles-block__item--small .articles-block__image::before {
    border-width: 2px;
    border-radius: 8px;
  }

  .articles-block__item--small .articles-block__image::after {
    inset: 5px;
  }

  .articles-block__item--small .articles-block__image a,
  .articles-block__item--small .articles-block__image > img {
    inset: 5px; /* 2px frame + 3px gap */
  }

  .articles-block__item--small .articles-block__body {
    padding: 0;
    gap: 15px;
    flex: 1;
    min-width: 0;
  }

  .articles-block__item--small .articles-block__item-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }

  .articles-block__item--small .articles-block__excerpt {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 18px;
  }

  /* =======================================================
     PRODUCTS BLOCK — Figma 278:937
     Stacked vertically, gap 35px
     Card: full width, 340px h, rounded 8px, p: 8px 5px 10px
     Image: 259px h, full width, rounded-top 8px
     Info row: horizontal — name+prices left, button right
     Button: 130Г—27, 10px, rounded 5px
     ======================================================= */
  .products-block {
    padding: 60px 0 0;
  }

  .products-block__grid {
    flex-direction: column;
    gap: 35px;
  }

  /* Card — grid layout; link uses display:contents so its
     children participate in card grid alongside actions */
  .product-card {
    width: 100%;
    min-height: 340px;
    border-radius: 8px;
    padding: 8px 5px 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 0;
  }

  .product-card:hover {
    border-radius: 8px;
  }

  .product-card__link {
    display: contents;
    width: auto;
  }

  /* Image spans full width */
  .product-card__image-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Info on left of bottom row */
  .product-card__body {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    align-items: flex-start;
    padding: 12px 0 0;
    gap: 6px;
  }

  /* Action (button / status) on right of bottom row */
  .product-card__action {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    margin-top: 0;
    padding: 12px 0 0;
    align-self: center;
  }

  /* Image wrap + image */
  .product-card__image-wrap {
    width: 100%;
  }

  .product-card__image {
    width: 100%;
    height: 259px;
    border-radius: 8px 8px 0 0;
  }

  /* Discount badge — smaller on mobile */
  .product-card__badge {
    font-size: 12px;
    letter-spacing: -0.24px;
    height: 21px;
    padding: 3px 20px 3px 8px;
  }

  /* Info + actions — single row on mobile */
  .product-card__title {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .product-card__prices {
    justify-content: flex-start;
    margin-top: 0;
  }

  /* Button — 130×27, 10px */
  .product-card__action {
    flex-shrink: 0;
  }

  .product-card__btn {
    width: 130px;
    height: 27px;
    min-height: 0;
    font-size: 10px;
    letter-spacing: -0.2px;
    border-radius: 5px;
    gap: 4px;
  }

  .product-card__btn-icon {
    width: 10px;
    height: 8px;
  }

  .product-card__status {
    line-height: 1.2;
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
  }

  /* =======================================================
     FAQ BLOCK — Figma 278:1010
     Tab bar: 39px h, rounded 5px, padding 5px, gap 7px
     Tabs: 10px font, active 28px h with gradient
     Items: gap 15px, collapsed 62px, padding 15px, rounded 8px
     Question: 12px/18px, Answer: 12px/20px, gap 20px
     "Читать полностью": 12px medium, underline
     ======================================================= */
  .faq-block {
    padding: 60px 0 0;
  }

  .faq-block .section-heading {
    margin-bottom: 0;
  }

  .faq-block .section-heading__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
  }

  .faq-block__tabs {
    margin-bottom: 35px;
  }

  .faq-block__tabs-inner {
    display: flex;
    width: 100%;
    height: 39px;
    border-radius: 5px;
    padding: 5px;
    gap: 7px;
  }

  .faq-block__tab {
    flex: 1;
    font-size: 10px;
    letter-spacing: -0.2px;
    padding: 0 10px;
    border-radius: 5px;
    white-space: nowrap;
  }

  .faq-block__tab--active {
    height: 28px;
    border-radius: 5px;
  }

  .faq-block__list {
    gap: 15px;
  }

  .faq-block__item {
    border-radius: 8px;
  }

  .faq-block__question {
    padding: 15px;
    min-height: 62px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    line-height: 18px;
    gap: 25px;
  }

  .faq-block__item--open .faq-block__question {
    font-weight: 500;
  }

  .faq-block__chevron {
    width: 11px;
    height: 6px;
    margin-left: 0;
  }

  .faq-block__answer-inner {
    padding: 0 15px 15px;
    gap: 15px;
  }

  .faq-block__answer-text {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 20px;
  }

  .faq-block__answer-text p {
    line-height: 20px;
  }

  .faq-block__read-more {
    font-size: 12px;
    line-height: 20px;
  }

  /* =======================================================
     REVIEWS BLOCK — Figma 278:1047
     Card: rounded 8px, ~352px height, overflow hidden
     Content: padding 14px, max-width 305px
     Quote icon: 25Г—18, gap 20px to text
     Text: 12px/18px regular, Author: 14px/22px medium
     Text→Author gap: 15px
     Background image faded, no nav arrows
     ======================================================= */
  .reviews-block {
    padding: 60px 0 0;
  }

  .reviews-block .section-heading__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
  }

  .reviews-block__card {
    height: auto;
    min-height: 314px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
  }

  .reviews-block__content {
    max-width: 100%;
    padding: 18px 16px 0;
    gap: 12px;
  }

  .reviews-block__quote-icon {
    width: 25px;
    height: 18px;
    margin-bottom: 5px;
  }

  .reviews-block__text {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 18px;
  }

  .reviews-block__author {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    line-height: 22px;
  }

  .reviews-block__author-note {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 18px;
  }

  /* Background image — reposition for narrow card */
  .reviews-block__image {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: 180px;
    margin-top: auto;
    padding-right: 0;
    justify-content: center;
    overflow: hidden;
  }

  .reviews-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .reviews-block__image-bg {
    display: none;
  }

  .reviews-block__image-fade-left {
    display: none;
  }

  /* Top fade so the portrait blends into the text area above */
  .reviews-block__image-fade-bottom {
    top: 0;
    bottom: auto;
    height: 70px;
    background: linear-gradient(to bottom, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
  }

  /* Hide nav arrows on mobile */
  .reviews-block__arrow {
    display: none;
  }

  /* Pagination dots */
  .reviews-block__dots {
    margin-top: 20px;
    gap: 4px;
  }

  .reviews-block__dots .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  /* =======================================================
     FOOTER — Figma 312:2727
     Stacked: brand section, then 2x2 columns grid
     Padding 45px vertical, 20px horizontal
     Logo 51px, all text 12px, line-height 24px
     Columns: 2 per row, ~161px + ~158px, gap 14px h, 30px v
     ======================================================= */
  .site-footer {
    margin-top: 60px;
    padding: 45px 0;
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
    min-height: auto;
    max-width: none;
  }

  .site-footer__brand {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 15px;
  }

  .site-footer__logo {
    width: 51px;
    height: 51px;
  }

  .site-footer__copyright-block {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 24px;
  }

  .site-footer__privacy {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .site-footer__selects {
    gap: 29px;
  }

  .site-footer__select-label {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .site-footer__select {
    font-size: 12px;
    letter-spacing: -0.24px;
    height: 29px;
  }

  .site-footer__select--locale {
    width: 93px;
  }

  .site-footer__select--currency {
    width: 70px;
  }

  .site-footer__social-link svg {
    width: 24px;
    height: 24px;
  }

  /* Columns: 2x2 grid with 14px horizontal gap, 30px between rows */
  .site-footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 30px;
    gap: 30px 14px;
    width: 100%;
  }

  .site-footer__column {
    flex: none;
    width: auto;
    gap: 5px;
  }

  .site-footer__column-title {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 24px;
  }

  .site-footer__list {
    gap: 0;
  }

  .site-footer__list a {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 24px;
  }

}



/* ============================================
   Help / FAQ pages
   ============================================ */

.cb-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0 30px;
  font-family: var(--font-family);
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: normal;
}

.cb-breadcrumbs__link {
  color: #9e9e9e;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.cb-breadcrumbs__link:hover {
  color: var(--color-primary, #d51219);
}

.cb-breadcrumbs__sep {
  display: inline-flex;
  align-items: center;
  color: #9e9e9e;
}

.cb-breadcrumbs__current {
  color: #252525;
  white-space: nowrap;
}

.help-page {
  padding: 0 0 80px;
}

.help-page__title {
  font-family: var(--font-family);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.72px;
  line-height: 1.15;
  color: #252525;
  margin: 0 0 12px;
}

.help-page__subtitle {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  color: #5b5b5b;
  margin: 0 0 32px;
}

.help-page__content {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: #252525;
  margin: 0 0 32px;
}

.help-page__empty {
  font-family: var(--font-family);
  font-size: 16px;
  color: #5b5b5b;
  padding: 40px 0;
  text-align: center;
}

.faq-block--page {
  padding: 30px 0 0;
}

/* FAQ detail page */
.faq-detail__title {
  font-family: var(--font-family);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.72px;
  line-height: 1.15;
  color: #252525;
  margin: 0 0 30px;
}

.faq-detail__preview {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #252525;
  margin: 0 0 32px;
}

.faq-detail__preview > *:first-child { margin-top: 0; }
.faq-detail__preview > *:last-child { margin-bottom: 0; }

.faq-detail__quote {
  position: relative;
  display: flex;
  background: #fcf8f8;
  border-radius: 5px;
  margin: 0 0 40px;
  min-height: 120px;
  overflow: hidden;
}

.faq-detail__quote-bar {
  flex-shrink: 0;
  width: 9px;
  background: linear-gradient(to bottom, #d51219, #a62322);
  border-radius: 5px 0 0 5px;
}

.faq-detail__quote-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  padding: 30px 36px;
}

.faq-detail__quote-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.faq-detail__quote-icon {
  width: 27px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-detail__quote-heading {
  margin: 0;
  font-family: var(--font-family), 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: normal;
  color: #252525;
}

.faq-detail__quote-text {
  margin: 0;
  font-family: var(--font-family), 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 28px;
  color: #252525;
}

.faq-detail__image {
  margin: 0 0 32px;
}

.faq-detail__image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.faq-detail__content {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.7;
  color: #252525;
}

.faq-detail__content > *:first-child { margin-top: 0; }

/* CKEditor 5 content styles — must mirror class-based markup the editor produces */
.faq-detail__content .text-align-left { text-align: left; }
.faq-detail__content .text-align-center { text-align: center; }
.faq-detail__content .text-align-right { text-align: right; }
.faq-detail__content .text-align-justify { text-align: justify; }

.faq-detail__content figure {
  margin: 1em 0;
}

.faq-detail__content figure.image {
  display: table;
  clear: both;
  text-align: center;
  margin: 1em auto;
}

.faq-detail__content figure.image > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.faq-detail__content figure.image > figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: #6b6b6b;
  background: #f7f7f7;
  padding: 6px;
  font-size: 0.875em;
}

.faq-detail__content figure.image-style-side {
  float: right;
  margin: 0 0 1em 1.5em;
  max-width: 50%;
}

.faq-detail__content figure.image-style-align-left,
.faq-detail__content figure.image-style-block-align-left {
  float: left;
  margin: 0 1.5em 1em 0;
}

.faq-detail__content figure.image-style-align-right,
.faq-detail__content figure.image-style-block-align-right {
  float: right;
  margin: 0 0 1em 1.5em;
}

.faq-detail__content figure.image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}

.faq-detail__content .image_resized {
  max-width: 100%;
  display: block;
}

.faq-detail__content .image_resized img {
  width: 100%;
  height: auto;
}

.faq-detail__content .image_resized > figcaption {
  display: block;
}

.faq-detail__content figure.table {
  display: table;
  margin: 1em auto;
}

.faq-detail__content figure.table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #b3b3b3;
}

.faq-detail__content figure.table table td,
.faq-detail__content figure.table table th {
  min-width: 2em;
  padding: 0.4em;
  border: 1px solid #bfbfbf;
}

.faq-detail__content figure.table table th {
  font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
}

.faq-detail__content blockquote {
  overflow: hidden;
  padding: 0 1.5em;
  margin: 1em 0;
  font-style: italic;
  border-left: 5px solid #ccc;
}

.faq-detail__content hr,
.faq-detail__content .ck-horizontal-line {
  margin: 1em 0;
  height: 2px;
  background: #ddd;
  border: 0;
}

.faq-detail__content ol,
.faq-detail__content ul {
  padding-left: 40px;
}

.faq-detail__content img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .help-page__title,
  .faq-detail__title {
    font-size: 26px;
    letter-spacing: -0.52px;
  }

  .faq-detail__quote-body {
    padding: 20px 20px;
    gap: 12px;
  }

  .faq-detail__quote-header {
    gap: 12px;
  }

  .faq-detail__quote-heading {
    font-size: 17px;
    letter-spacing: -0.34px;
  }

  .faq-detail__quote-text {
    padding-left: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .cb-breadcrumbs {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
  }
}

/* =========================================================
   404 PAGE
   ========================================================= */
.page-404 {
  padding: 60px 0 80px;
}

.page-404__card {
  position: relative;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  min-height: 412px;
  display: flex;
  align-items: center;
}

.page-404__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.page-404__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.page-404__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.page-404__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, var(--color-white) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(to top, var(--color-white) 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(to bottom, var(--color-white) 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(to right, var(--color-white) 0%, rgba(255, 255, 255, 0) 12%);
  z-index: 2;
}

.page-404__content {
  position: relative;
  z-index: 3;
  margin-left: auto;
  width: 493px;
  max-width: 100%;
  padding: 60px 32px 60px 0;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.page-404__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.64px;
  background: linear-gradient(to right, #d31118, #a42322);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-404__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--color-text);
}

.page-404__text p {
  margin: 0;
  font-weight: 400;
}

.page-404__text a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-404__text a:hover {
  color: var(--color-primary);
}

.page-404__actions {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.page-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 35px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.28px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.page-404__btn--primary {
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-primary-gradient);
  border: 0;
  box-shadow: var(--shadow-button), var(--shadow-button-inner);
}

.page-404__btn--primary:hover {
  color: var(--color-white);
  opacity: 0.92;
}

.page-404__btn--secondary {
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg-gray);
  border: 1px solid var(--color-border);
}

.page-404__btn--secondary:hover {
  color: var(--color-text);
  background: #efefef;
}

@media (max-width: 992px) {
  .page-404 {
    padding: 40px 16px 60px;
  }

  .page-404__content {
    width: 460px;
    padding: 50px 28px 50px 0;
    gap: 28px;
  }

  .page-404__title {
    font-size: 28px;
  }

  .page-404__text {
    font-size: 17px;
  }
}

@media (max-width: 768px) {
  .page-404 {
    padding: 24px 16px 40px;
  }

  .page-404__card {
    min-height: 349px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
  }

  .page-404__media img {
    object-position: center bottom;
    object-fit: cover;
    transform: scale(1.05);
    transform-origin: center 70%;
  }

  .page-404__media::after {
    background:
      linear-gradient(to right, var(--color-white) 0%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, var(--color-white) 100%),
      linear-gradient(to bottom, var(--color-white) 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 78%, var(--color-white) 100%);
  }

  .page-404__content {
    width: 100%;
    max-width: 297px;
    margin: 0 auto;
    padding: 44px 20px;
    gap: 30px;
    align-items: center;
    text-align: center;
  }

  .page-404__title {
    font-size: 20px;
    letter-spacing: -0.4px;
    line-height: 1.25;
  }

  .page-404__text {
    font-size: 12px;
    letter-spacing: -0.24px;
    line-height: 1.35;
    gap: 14px;
  }

  .page-404__actions {
    width: 100%;
    gap: 7px;
    flex-wrap: nowrap;
  }

  .page-404__btn {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 10px;
    letter-spacing: -0.2px;
    font-weight: 500;
  }
}

/* ============================================
   Catalog pages
   ============================================ */
.catalog-page {
  padding: 0 0 80px;
}

.catalog-page__title {
  font-family: var(--font-family);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.72px;
  line-height: 1.15;
  color: #252525;
  margin: 0 0 24px;
}

.catalog-page__description {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: #5b5b5b;
  margin: 0 0 32px;
  max-width: 820px;
}

.catalog-page__empty {
  font-family: var(--font-family);
  font-size: 16px;
  color: #5b5b5b;
  padding: 60px 0;
  text-align: center;
}

.catalog-page__products {
  margin-top: 60px;
}

.catalog-page__subtitle {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.56px;
  line-height: 1.2;
  color: #252525;
  margin: 0 0 24px;
}

/* Sections list (catalog index) */
.catalog-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 21px;
}

.catalog-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 268px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  padding: 46px 9px 47px 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.catalog-section:hover {
  border-color: rgba(213, 18, 25, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

.catalog-section__icon {
  width: 63px;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d51219;
  flex-shrink: 0;
}

.catalog-section__icon img,
.catalog-section__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.catalog-section__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: center;
  color: #252525;
}

.catalog-section__title {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: normal;
  color: #252525;
  margin: 0;
  text-align: center;
  width: 100%;
}

.catalog-section__description {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: normal;
  color: #252525;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* Product grid (catalog section / discounts) */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 32px;
}

/* Catalog overrides: stretch cards to grid cell */
.catalog-grid .product-card,
.catalog-grid .product-card__link,
.catalog-grid .product-card__image-wrap,
.catalog-grid .product-card__image {
  width: 100%;
}

.catalog-grid .product-card {
  max-width: 100%;
}

.catalog-grid .product-card__image {
  aspect-ratio: 258 / 259;
  height: auto;
}

/* ============================================
   Product card additions (figma 232:1810)
   ============================================ */
.product-card--disabled {
  opacity: 0.85;
}

.product-card__badge {
  position: absolute;
  top: 12px;
  left: 0;
  background: #cd1719;
  color: #fff;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 1;
  height: 24px;
  padding: 0 14px 0 12px;
  border-radius: 0 100px 100px 0;
  display: inline-flex;
  align-items: center;
  z-index: 2;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px 8px 0;
  width: 100%;
  flex: 1;
}

.product-card__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.product-card__price-current {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #252525;
  white-space: nowrap;
}

.product-card__price-old {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #c4c4c4;
  text-decoration: line-through;
  white-space: nowrap;
}

.product-card__currency {
  margin-left: 1px;
}

.product-card__action {
  width: 100%;
  padding: 8px 8px 0;
  margin-top: auto;
}

.product-card__btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(214.72deg, #a32322 8.86%, #d51118 91.84%);
  color: #fff;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 1.35;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(74,58,255,0.10),
              inset 0 -1px 1px rgba(0,0,0,0.12),
              inset 0 1px 1.5px rgba(255,255,255,0.25);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}

.product-card__btn:hover {
  filter: brightness(0.92);
}

.product-card__btn:active {
  transform: translateY(1px);
}

.product-card__btn-icon {
  width: 13px;
  height: 11px;
  flex-shrink: 0;
}

.product-card__status {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 35px;
  color: #252525;
}

@media (max-width: 768px) {
  .catalog-page__title {
    font-size: 26px;
    letter-spacing: -0.52px;
  }

  .catalog-sections,
  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }
}


/* ============================================
   Product detail page (figma node 221:4040)
   ============================================ */
.product-detail {
  padding: 0 0 80px;
}

.product-detail__top {
  display: grid;
  grid-template-columns: 466px 1fr;
  gap: 65px;
  align-items: start;
  margin-top: 24px;
}

.product-detail__crumb-current {
  font-weight: 600;
}

/* ---- Image side (Figma 221:4521 — 466×671 baseline, тянется под высоту правого info) ---- */
.product-detail__media {
  position: relative;
  width: 466px;
  align-self: stretch;
}

.product-detail__image-wrap {
  position: relative;
  width: 466px;
  height: 100%;
  background: #f6f6f6;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail__image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 43px 62px;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

.product-detail__image {
  max-width: 248px;
  max-height: 342px;
  object-fit: contain;
  border-radius: 3px;
  /* See .product-card__image img — blend baked-in white into the light background. */
  mix-blend-mode: multiply;
}

/* Комплекты (п.13.3): горизонтальный «веер» — выводим крупно, во всю ширину рамки,
   а не по портретным ограничениям 248×342. */
.product-detail__image-wrap--bundle .product-detail__image {
  max-width: 86%;
  max-height: 62%;
}

.product-detail__zoom {
  position: absolute;
  top: 20px;
  right: 21px;
  width: 52px;
  height: 49px;
  background: #fff;
  border: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #252525;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.15s ease;
  z-index: 2;
}

.product-detail__zoom:hover {
  transform: scale(1.05);
}

.product-detail__badge {
  position: absolute;
  top: 27px;
  left: 0;
  background: #cd1719;
  color: #fff;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: 1;
  height: 35px;
  min-width: 126px;
  padding: 0 26px;
  border-radius: 0 100px 100px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ---- Info side (Figma 221:4532 — w-675, gap-30) ---- */
.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 675px;
  max-width: 100%;
}

/* Header row: title+price (left, w-316) | rating+userPrice (right, gap-200 in figma → space-between) */
.product-detail__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.product-detail__heading {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1 1 auto;
  min-width: 0;
}

.product-detail__rating-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.product-detail__title {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: normal;
  color: #252525;
  margin: 0;
}

.product-detail__price-base {
  display: flex;
  align-items: baseline;
  gap: 13px;
  flex-wrap: wrap;
  width: 100%;
}

.product-detail__price-current {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #252525;
  white-space: nowrap;
}

.product-detail__price-old {
  font-family: var(--font-family);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: #c4c4c4;
  text-decoration: line-through;
  white-space: nowrap;
}

.product-detail__price-extra {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  color: #676767;
  white-space: nowrap;
  margin-left: 6px;
}

.product-detail__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.product-detail__stars {
  display: inline-flex;
  align-items: center;
  color: #ffab00;
}

.product-detail__star {
  width: 24px;
  height: 24px;
}

.product-detail__rating-value {
  font-family: var(--font-family);
  font-size: 20px;
  color: #9e9e9e;
}

.product-detail__hr {
  width: 100%;
  border: none;
  border-top: 1px solid #e4e4e4;
  margin: 0;
}

/* ---- Bundle (Figma 221:4569 — карточки 84×105 grey rounded-5, image 50×68 inside) ---- */
.product-detail__bundle {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.product-detail__bundle-label {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #676767;
  margin: 0;
}

.product-detail__bundle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.product-detail__bundle-item {
  position: relative;
  width: 84px;
  height: 105px;
  background: #f6f6f6;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-detail__bundle-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Тултип с названием при наведении (TZ 4.1: ALT/TITLE + видимое название). */
.product-detail__bundle-item[data-name]::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #252525;
  color: #fff;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}

.product-detail__bundle-item[data-name]::before {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #252525;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.product-detail__bundle-item[data-name]:hover::after,
.product-detail__bundle-item[data-name]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.product-detail__bundle-item[data-name]:hover::before,
.product-detail__bundle-item[data-name]:focus-visible::before {
  opacity: 1;
}

.product-detail__bundle-image {
  width: 50px;
  height: 68px;
  object-fit: cover;
  border-radius: 3px;
  /* See .product-card__image img — blend baked-in white into the light tile background. */
  mix-blend-mode: multiply;
  display: block;
}

.product-detail__bundle-stub {
  width: 50px;
  height: 68px;
  border-radius: 3px;
  background: #f6f6f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #676767;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2),
              0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Custom fields list (Figma 221:4555 — labels 183, values 305, gap-60×15) ---- */
.product-detail__fields {
  display: grid;
  grid-template-columns: 183px 305px;
  column-gap: 60px;
  row-gap: 15px;
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: normal;
}

.product-detail__field-label {
  font-weight: 500;
  color: #676767;
  margin: 0;
}

.product-detail__field-value {
  font-weight: 400;
  color: #252525;
  margin: 0;
}

.product-detail__file-link {
  color: #cd1719;
  text-decoration: underline;
  font-weight: 500;
}

.product-detail__file-link:hover {
  color: #a32322;
}

/* ---- Buy button ---- */
.product-detail__action {
  display: flex;
}

.product-detail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 282px;
  height: 42px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(217deg, #a32322 8.86%, #d51118 91.84%);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(74,58,255,0.10),
              inset 0 -1px 1px rgba(0,0,0,0.12),
              inset 0 1px 1.5px rgba(255,255,255,0.25);
  transition: filter 0.2s ease, transform 0.15s ease;
}

.product-detail__btn:hover,
.product-detail__btn:focus,
.product-detail__btn:visited {
  color: #fff;
  text-decoration: none;
}

.product-detail__btn:hover {
  filter: brightness(0.92);
}

.product-detail__btn:active {
  transform: translateY(1px);
}

.product-detail__btn--disabled {
  background: #f0f0f0;
  color: #9e9e9e;
  cursor: not-allowed;
  box-shadow: none;
}

.product-detail__btn--disabled:hover {
  filter: none;
}

.product-detail__btn-icon {
  width: 13px;
  height: 11px;
}

/* ---- Payments ---- */
.product-detail__payments-label {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  color: #676767;
  margin: 0 0 15px;
}

.product-detail__payments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.product-detail__payment {
  height: 35px;
  padding: 5px 15px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #676767;
}

.product-detail__payment svg {
  display: block;
}

/* ---- Tabs ---- */
.product-detail__tabs {
  margin-top: 90px;
}

.product-detail__tabs-bar {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 50px;
}

.product-detail__tab {
  height: 56px;
  padding: 0 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #676767;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.product-detail__tab--active {
  color: #252525;
  border-bottom-color: #c3181c;
}

.product-detail__tab-panel {
  display: none;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 25px;
  color: #252525;
}

.product-detail__tab-panel--active {
  display: block;
}

.product-detail__tab-panel > *:first-child { margin-top: 0; }

/* ---- Steps ---- */
.product-detail__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product-detail__step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: flex-start;
}

/* ============================================
   Install accordion (Figma 2240:5284)
   ============================================ */
.install-layout {
  display: grid;
  grid-template-columns: 234px 1fr;
  gap: 23px;
  align-items: start;
}

/* TOC sidebar */
.install-toc {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  padding: 20px 4px;
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.install-toc__title {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #252525;
  padding: 10px 20px;
  margin-bottom: 5px;
}

.install-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.install-toc__item {
  display: flex;
  align-items: center;
  min-height: 47px;
  padding: 13px 20px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.3;
  color: #252525;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

.install-toc__item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.install-toc__item--active,
.install-toc__item--active:hover {
  background: linear-gradient(to right, #d31218, #a42322);
  color: #fff;
  font-weight: 500;
}

/* Steps accordion */
.install-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

/* Бок-нота «Если возникли проблемы» (Figma 2240:5218) — на всю ширину install-layout */
.install-help {
  grid-column: 1 / -1;
  margin-top: 40px;
  position: relative;
  background: #fcf8f8;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.install-help__bar {
  flex-shrink: 0;
  width: 9px;
  background: linear-gradient(180deg, #d51219, #a62322);
  border-radius: 5px 0 0 5px;
}

.install-help__inner {
  flex: 1 1 auto;
  padding: 34px 36px;
}

.install-help__title {
  margin: 0 0 25px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: 25px;
  color: #cd1719;
}

.install-help__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.install-help__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.install-help__sub {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.36px;
  color: #252525;
}

.install-help__text {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #252525;
}

.install-step {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  filter: drop-shadow(0 8px 12px rgba(149, 157, 165, 0.2));
  overflow: hidden;
}

.install-step__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  background: transparent;
  border: none;
  padding: 26px 31px 26px 40px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.install-step__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d21319, #a52322);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.install-step__title {
  flex: 1 1 auto;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: 22px;
  color: #252525;
}

.install-step__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);          /* свёрнуто: shevron вниз */
  transition: transform 0.2s ease;
  color: #252525;
}

.install-step--open .install-step__chevron {
  transform: rotate(-90deg);          /* открыто: shevron вверх */
}

.install-step--open .install-step__icon {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.install-step--open .install-step__head {
  padding: 38px 37px 0 37px;
  cursor: default;
}

.install-step--open .install-step__title {
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.4px;
}

.install-step__body {
  display: none;
  padding: 35px 37px 38px 37px;
  gap: 38px;
  align-items: flex-start;
}

.install-step--open .install-step__body {
  display: flex;
}

.install-step__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.32px;
  color: #252525;
}

.install-step__text > *:first-child { margin-top: 0; }
.install-step__text > *:last-child { margin-bottom: 0; }

.install-step__text h2,
.install-step__text h3,
.install-step__text h4 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  margin: 0 0 15px;
  color: #252525;
}

.install-step__text p {
  margin: 0 0 15px;
}

.install-step__text ul,
.install-step__text ol {
  margin: 0 0 15px;
  padding-left: 0;
  list-style: none;
}

.install-step__text ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

.install-step__text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M2 7.5L5.5 11L12 3' stroke='%23cd1719' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.install-step__image {
  flex-shrink: 0;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.install-step__image img {
  display: block;
  max-width: 260px;
  max-height: 347px;
  width: auto;
  height: auto;
  object-fit: cover;
}

.install-step__image:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

@media (max-width: 992px) {
  .install-layout {
    grid-template-columns: 1fr;
  }
  .install-toc {
    position: static;
    max-height: none;
  }
  .install-step__body {
    flex-direction: column;
  }
  .install-step__image img {
    max-width: 100%;
    max-height: none;
  }
}

@media (max-width: 992px) {
  .product-detail__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-detail__media,
  .product-detail__image-wrap {
    width: 100%;
    max-width: 466px;
  }
  .product-detail__image-wrap {
    height: auto;
    min-height: 0;
    aspect-ratio: 466 / 671;
  }
  .product-detail__info {
    width: 100%;
  }
  .product-detail__header {
    flex-direction: column;
  }
  .product-detail__btn {
    width: 100%;
  }
  .product-detail__tabs-bar {
    overflow-x: auto;
  }
  .product-detail__fields {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4px;
  }
  .product-detail__field-label {
    margin-top: 12px;
  }
}


/* ============================================
   Compare-bundles table (figma 221:4168 / 221:4308)
   ============================================ */
.product-detail__specs-text {
  margin-bottom: 55px;
}

.product-detail__specs-text > *:first-child { margin-top: 0; }
.product-detail__specs-text > *:last-child { margin-bottom: 0; }

.product-detail__compare-heading {
  margin: 80px 0 25px;
  font-family: var(--font-family);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 25px;
  color: #252525;
}

.compare-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  overflow: visible;
  margin-bottom: 0;
}

.compare-table__inner {
  width: 100%;
  overflow: visible;
}

.compare-table__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.compare-table__body .compare-table__row:last-child .compare-table__cell:first-child {
  border-bottom-left-radius: 8px;
}

.compare-table__body .compare-table__row:last-child .compare-table__cell:last-child {
  border-bottom-right-radius: 8px;
}

.compare-table__header,
.compare-table__row {
  display: flex;
  width: 100%;
  min-width: 700px;
}

.compare-table__header {
  background: linear-gradient(to right, #d31218, #a52323);
  color: #fff;
  min-height: 56px;
}

.compare-table__cell {
  flex: 1 1 0;
  min-width: 160px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-family);
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 1.3;
  color: #252525;
}

.compare-table__cell--head {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.36px;
  color: #fff;
}

.compare-table__cell--label {
  flex: 0 0 220px;
  justify-content: flex-start;
  text-align: left;
  gap: 6px;
}

.compare-table__hint {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: #9e9e9e;
  cursor: help;
  outline: none;
}

.compare-table__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 160px;
  max-width: 260px;
  padding: 8px 12px;
  background: #252525;
  color: #fff;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.2px;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  z-index: 10;
  white-space: normal;
}

.compare-table__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #252525;
}

.compare-table__hint:hover .compare-table__tooltip,
.compare-table__hint:focus .compare-table__tooltip,
.compare-table__hint:focus-within .compare-table__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.compare-table__row {
  min-height: 65px;
  border-top: 1px solid transparent;
}

.compare-table__row:nth-child(even) {
  background: #f9f9f9;
}

.compare-table__row:nth-child(even) .compare-table__cell--current {
  background: #d4f0cf;
}

.compare-table__row:nth-child(odd) .compare-table__cell--current {
  background: #d4f0cf;
}

.compare-table__header .compare-table__cell--current {
  position: relative;
}

.compare-table__header .compare-table__cell--current::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.compare-table__cell--current a,
.compare-table__cell a {
  color: inherit;
  text-decoration: none;
}

.compare-table__cell a:hover {
  text-decoration: underline;
}

.compare-table__check {
  width: 22px;
  height: 22px;
}

.compare-table__dash {
  color: #252525;
}

.compare-table__price-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.compare-table__price-old {
  color: #737373;
  text-decoration: line-through;
  text-decoration-skip-ink: none;
}

.compare-table__price {
  color: #252525;
}

/* Compare table — fit within tablet/phone widths (Figma 278:3622).
   The desktop table forces min-width:700px + 160px cells; on small
   screens drop those so the columns shrink to fit instead of overflowing. */
@media (max-width: 992px) {
  .compare-table__header,
  .compare-table__row {
    min-width: 0;
  }

  .compare-table__cell {
    min-width: 0;
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .compare-table__cell--head {
    font-size: 12px;
  }

  .compare-table__cell--label {
    flex: 0 0 120px;
    padding-left: 12px;
  }

  .compare-table__header {
    min-height: 0;
  }

  .compare-table__check {
    width: 16px;
    height: 16px;
  }

  .compare-table__price-stack {
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .compare-table__cell {
    padding: 8px 4px;
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  .compare-table__cell--head {
    font-size: 10px;
  }

  .compare-table__cell--label {
    flex: 0 0 78px;
    padding-left: 8px;
  }

  .compare-table__check {
    width: 13px;
    height: 13px;
  }

  .compare-table__price-stack {
    font-size: 10px;
  }
}

/* ============================================
   Product detail — extra (figma 221:4041, 221:4155, 221:5651, 221:5936, 221:6213)
   ============================================ */

/* User-currency price — inline с базовой ценой, прижата к правому краю строки, чёрная */
.product-detail__price-user {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 500;
  color: #252525;
  letter-spacing: -0.6px;
  white-space: nowrap;
  margin-left: auto;
  align-self: baseline;
}

/* Interactive rating stars */
.product-detail__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.product-detail__stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #e3e3e3;
}

.product-detail__star {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  transition: color 0.15s ease, transform 0.1s ease;
}

.product-detail__star[disabled] {
  cursor: default;
}

.product-detail__star svg {
  width: 24px;
  height: 24px;
}

.product-detail__star--filled,
.product-detail__star--preview {
  color: #ffab00;
}

.product-detail__star--filled svg,
.product-detail__star--preview svg {
  fill: currentColor;
}

.product-detail__star--half svg {
  fill: url(#half-star);
}

.product-detail__star:not([disabled]):hover {
  transform: scale(1.05);
}

.product-detail__rating-value {
  font-family: var(--font-family);
  font-size: 20px;
  color: #9e9e9e;
  line-height: 1.4;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Payment chips: image renders inside the chip with bounded height */
.product-detail__payment-img {
  display: block;
  max-height: 22px;
  max-width: 100%;
  object-fit: contain;
}

.product-detail__payment-text {
  white-space: nowrap;
}

/* Description / system tabs: rich-text content */
.product-detail__rich {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.55;
  color: #252525;
}

/* Heading typography per Figma 80:118 — Geist, −2% letter-spacing across all levels. */
.product-detail__rich h1,
.product-detail__rich h2,
.product-detail__rich h3,
.product-detail__rich h4,
.product-detail__rich h5,
.product-detail__rich h6,
.static-page__content h1,
.static-page__content h2,
.static-page__content h3,
.static-page__content h4,
.static-page__content h5,
.static-page__content h6,
.rich-editor-content h1,
.rich-editor-content h2,
.rich-editor-content h3,
.rich-editor-content h4,
.rich-editor-content h5,
.rich-editor-content h6,
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
  font-family: 'Geist', var(--font-family), sans-serif;
  letter-spacing: -0.02em;
  color: #252525;
  line-height: 1.2;
}

.product-detail__rich h1,
.static-page__content h1,
.rich-editor-content h1,
.ck-content h1 { font-size: 40px; font-weight: 600; margin: 0 0 24px; }

.product-detail__rich h2,
.static-page__content h2,
.rich-editor-content h2,
.ck-content h2 { font-size: 30px; font-weight: 500; margin: 32px 0 18px; }

.product-detail__rich h3,
.static-page__content h3,
.rich-editor-content h3,
.ck-content h3 { font-size: 20px; font-weight: 500; margin: 28px 0 14px; }

.product-detail__rich h4,
.static-page__content h4,
.rich-editor-content h4,
.ck-content h4 { font-size: 18px; font-weight: 500; margin: 24px 0 12px; }

.product-detail__rich h5,
.static-page__content h5,
.rich-editor-content h5,
.ck-content h5 { font-size: 16px; font-weight: 400; margin: 20px 0 10px; }

.product-detail__rich h6,
.static-page__content h6,
.rich-editor-content h6,
.ck-content h6 { font-size: 14px; font-weight: 400; margin: 18px 0 8px; }

.product-detail__rich p,
.rich-editor-content p,
.ck-content p { margin: 0 0 14px; }

.product-detail__rich img,
.static-page__content img,
.rich-editor-content img,
.ck-content img { max-width: 100%; height: auto; display: block; margin: 18px 0; }

.product-detail__rich ul,
.product-detail__rich ol,
.static-page__content ul,
.static-page__content ol,
.rich-editor-content ul,
.rich-editor-content ol,
.ck-content ul,
.ck-content ol { padding-left: 24px; margin: 0 0 14px; }

.product-detail__rich li,
.static-page__content li,
.rich-editor-content li,
.ck-content li { margin: 0 0 4px; }

.product-detail__rich a,
.static-page__content a,
.rich-editor-content a,
.ck-content a { color: #d51219; text-decoration: underline; text-underline-offset: 2px; }

/* Blockquote rendered by RichEditor — visually matches .faq-detail__quote. */
.product-detail__rich blockquote,
.static-page__content blockquote,
.rich-editor-content blockquote,
.ck-content blockquote {
  position: relative;
  background: #fcf8f8;
  border-radius: 5px;
  margin: 0 0 40px;
  padding: 30px 36px 30px 45px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  overflow: hidden;
  font-family: var(--font-family), 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 28px;
  color: #252525;
  border-left: 0;
  font-style: normal;
}
.product-detail__rich blockquote::before,
.static-page__content blockquote::before,
.rich-editor-content blockquote::before,
.ck-content blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background: linear-gradient(to bottom, #d51219, #a62322);
}
.product-detail__rich blockquote > p,
.static-page__content blockquote > p,
.rich-editor-content blockquote > p,
.ck-content blockquote > p {
  margin: 0;
}

/* FAQ accordion under product detail */
.product-detail__faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-detail__faq-item {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  overflow: hidden;
}

.product-detail__faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: transparent;
  border: none;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  color: #252525;
  cursor: pointer;
}

.product-detail__faq-chevron {
  color: #676767;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.product-detail__faq-item--open .product-detail__faq-chevron {
  transform: rotate(180deg);
}

.product-detail__faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.product-detail__faq-answer-inner {
  padding: 0 24px 18px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  font-size: 16px;
  line-height: 1.55;
  color: #252525;
}

.product-detail__faq-text > *:first-child { margin-top: 0; }
.product-detail__faq-text > *:last-child { margin-bottom: 0; }

.product-detail__faq-more {
  display: inline-block;
  margin-top: 12px;
  color: #cd1719;
  text-decoration: underline;
  font-weight: 500;
}

@media (max-width: 992px) {
  .product-detail__rating-col {
    align-items: flex-start;
  }
}

/* ============================================
   Пошаговая установка — отдельные страницы (ТЗ §12)
   Переиспользуют .install-layout / .install-toc / .install-step.
   ============================================ */

/* Иконка шага вместо номера (§12.3). На отдельной странице — скруглённый квадрат по дизайну. */
.install-step__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
.install-step--open .install-step__icon svg {
  width: 20px;
  height: 20px;
}
.install-steps--icons .install-step__icon {
  border-radius: 12px;
}

/* Шапка страниц step-by-step */
.sbs-index,
.sbs-detail {
  padding: 24px 0 64px;
}
.sbs-index__head,
.sbs-detail__head {
  margin: 18px 0 28px;
}
.sbs-index__title,
.sbs-detail__title {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #252525;
}
.sbs-index__lead,
.sbs-detail__lead {
  margin: 0;
  max-width: 820px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.32px;
  color: #5a5a5a;
}
.sbs-index__empty,
.sbs-detail__empty {
  font-family: var(--font-family);
  font-size: 16px;
  color: #5a5a5a;
}
.sbs-detail__content {
  margin-top: 10px;
}

/* Список доступных инструкций (§12.4) */
.sbs-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.sbs-card__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sbs-card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  border-color: rgba(205, 23, 25, 0.35);
}
.sbs-card__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f6f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sbs-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sbs-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sbs-card__title {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #252525;
}
.sbs-card__sub {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  color: #5a5a5a;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sbs-card__arrow {
  flex-shrink: 0;
  color: #cd1719;
  display: inline-flex;
}

/* Cookie notice */
.cookie-notice {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1100;
  width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: #242424;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.cookie-notice[hidden] {
  display: none;
}
.cookie-notice__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.cookie-notice__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-notice__link:hover {
  color: #f4d6d6;
}
.cookie-notice__separator {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 4px;
}
.cookie-notice__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cookie-notice__button {
  min-width: 96px;
  min-height: 40px;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cookie-notice__button--accept {
  color: #fff;
  background: #cd1719;
}
.cookie-notice__button--accept:hover {
  background: #b91417;
}
.cookie-notice__button--reject {
  color: #3c3c3c;
  background: #fff;
}
.cookie-notice__button--reject:hover {
  background: #f2f2f2;
}

@media (max-width: 992px) {
  .sbs-cards {
    grid-template-columns: 1fr;
  }
  .sbs-index__title,
  .sbs-detail__title {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .cookie-notice {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .cookie-notice__actions {
    width: 100%;
    justify-content: stretch;
  }
  .cookie-notice__button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ============================================================
   Mobile product card — authoritative overrides (Figma 278:937).
   Placed last on purpose: the "Product card additions" block above
   re-declares __body/__action/__btn/__status with desktop sizing,
   so these must come after it to win on phones.
   ============================================================ */
@media (max-width: 992px) {
  .product-card__body {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    min-width: 0;
    width: auto;
    padding: 12px 0 0;
    gap: 6px;
  }

  .product-card__prices {
    justify-content: flex-start;
    margin-top: 0;
  }

  .product-card__image img {
    object-fit: contain;
  }

  .product-card__action {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    width: auto;
    margin-top: 0;
    padding: 12px 0 0;
  }

  .product-card__btn {
    width: 130px;
    height: 27px;
    min-height: 0;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: -0.2px;
    border-radius: 5px;
  }

  .product-card__btn-icon {
    width: 12px;
    height: 10px;
  }

  .product-card__badge {
    font-size: 12px;
    letter-spacing: -0.24px;
    height: 21px;
    padding: 3px 16px 3px 8px;
  }

  .product-card__status {
    display: block;
    width: auto;
    text-align: right;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Catalog section page: single full-width column like the homepage/mockup,
     and a Figma-proportioned image area (not the square desktop thumbnail). */
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .catalog-grid .product-card__image {
    aspect-ratio: auto;
    height: 259px;
  }
}