/* ============================================================
   layout-system.css
   Rosbotanic P0 фундамент — единая система контейнеров, ширин,
   text-strip и 8-point spacing. Подключается ПЕРВЫМ после palette.
   Создано: 2026-07-28. STAMP: 2026-07-28_0917
   ============================================================ */

:root {
  /* Основные ширины */
  --rb-container: 1520px;      /* глобальный container для сайта */
  --rb-content-strip: 720px;   /* ширина полосы текста для длинных материалов */
  --rb-gutter: 32px;           /* base gutter между колонками */

  /* 8-point spacing system */
  --rb-space-1: 4px;
  --rb-space-2: 8px;
  --rb-space-3: 16px;
  --rb-space-4: 24px;
  --rb-space-5: 32px;
  --rb-space-6: 48px;
  --rb-space-7: 64px;
  --rb-space-8: 96px;
  --rb-space-9: 128px;
}

/* ============================================================
   Global container — унифицирует все страницы.
   Bootstrap 3 .container уже 1520 через thumb-redesign.css,
   тут дублируем через переменную и добавляем правильный gutter.
   ============================================================ */
.container,
.rb-container {
  max-width: var(--rb-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--rb-space-4) !important;
  padding-right: var(--rb-space-4) !important;
}

/* ============================================================
   Text-strip — ограничение ширины для длинных текстов
   (блог, юр.документы, description категорий).
   Читаемость ~70-80 символов на строку = 720px.
   ============================================================ */
.rb-text-strip,
#content .category-description,
#content .information-description,
#content .blog-article__body,
#product-product .blog-content .description,
#information-information #content > #description-wrapper {
  max-width: var(--rb-content-strip);
  margin-left: auto;
  margin-right: auto;
}

/* На страницах информации description лежит сразу в #content,
   без обёртки — используем прямого потомка. */
#information-information #content > .description-wrap,
#information-information #content > p,
#information-information #content > ul,
#information-information #content > ol,
#information-information #content > h2,
#information-information #content > h3,
#information-information #content > h4 {
  max-width: var(--rb-content-strip);
  margin-left: auto;
  margin-right: auto;
}

/* Mobile — text-strip = 100% с боковым padding */
@media (max-width: 767px) {
  .rb-text-strip,
  #content .category-description,
  #content .information-description,
  #content .blog-article__body,
  #product-product .blog-content .description,
  #information-information #content > #description-wrapper,
  #information-information #content > .description-wrap,
  #information-information #content > p,
  #information-information #content > ul,
  #information-information #content > ol,
  #information-information #content > h2,
  #information-information #content > h3,
  #information-information #content > h4 {
    max-width: 100%;
    padding-left: var(--rb-space-3);
    padding-right: var(--rb-space-3);
  }
}

/* ============================================================
   P1 гармонизация — единый стиль H2 всех секций
   Lora 500, 32px desktop / 24px mobile, line-height 1.25
   Добавлено: 2026-07-28. STAMP: p1_2026-07-28_1430
   ============================================================ */
h2,
.h2,
.title-h2,
.section-heading,
.rb-tabs__panel h2,
.rb-related-title,
.recently-viewed h2,
.related-block h2,
.blog-related h2,
.section-title-h2 {
  font-family: 'Lora', 'Georgia', serif !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--rb-ink, #2E2A24) !important;
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  h2,
  .h2,
  .title-h2,
  .section-heading,
  .rb-tabs__panel h2,
  .rb-related-title,
  .recently-viewed h2,
  .related-block h2,
  .blog-related h2,
  .section-title-h2 {
    font-size: 24px !important;
  }
}

/* Исключения — где H2 намеренно другой (форма подписки, admin-подобные виджеты) */
.newsletter .title,
.rb-banner-modal h2 {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* ============================================================
   P1 гармонизация — иконки FontAwesome в UI единого размера/цвета
   ============================================================ */

/* Общий override — но НЕ трогаем узкоспецифичные места
   (галерея, соц-иконки футера — у них свои размеры выше). */
.header-nav .fa,
.header-nav .fas,
.header-nav .far,
.header-nav .fab,
.rb-hdr-icons .fa,
.rb-hdr-icons .fas,
.rb-hdr-icons .far,
.rb-hdr-icons .fab {
  color: var(--rb-ink, #2E2A24) !important;
}


/* ============================================================
   P2 гармонизация — стандартный воздух 64px между секциями
   (full-bleed → content, между модулями главной, между секциями чекаута)
   Добавлено: 2026-07-28. STAMP: p2_2026-07-28_1446
   ============================================================ */

/* Универсальный отступ для модулей главной страницы после slideshow */
.mango_slideshow + .advantages,
.mango_slideshow + .rb-blog-carousel,
.mango_slideshow + .latest_products,
.mango_slideshow + .manufacturers-module,
.mango_slideshow + .rb-section,
.mango_slideshow + section,
.mango_slideshow + div[class*='module'],
.mango_slideshow + div[class*='block'] {
  margin-top: var(--rb-space-7, 64px);
}

/* Отступ между секциями (advantages + carousel + модули блога и т.д.) */
.advantages,
.rb-blog-carousel,
.latest_products,
.manufacturers-module,
.rb-section,
main > section,
#content > section {
  padding-top: var(--rb-space-7, 64px);
  padding-bottom: var(--rb-space-7, 64px);
}

/* Advantages уже имеет margin-bottom: 40px — обнуляем в пользу padding системы */
.advantages { margin-bottom: 0 !important; padding-top: var(--rb-space-7, 64px); padding-bottom: var(--rb-space-7, 64px); }

/* Mobile — 48px */
@media (max-width: 767px) {
  .mango_slideshow + .advantages,
  .mango_slideshow + .rb-blog-carousel,
  .mango_slideshow + .latest_products,
  .mango_slideshow + .manufacturers-module,
  .mango_slideshow + .rb-section,
  .mango_slideshow + section,
  .mango_slideshow + div[class*='module'],
  .mango_slideshow + div[class*='block'] {
    margin-top: var(--rb-space-6, 48px);
  }
  .advantages,
  .rb-blog-carousel,
  .latest_products,
  .manufacturers-module,
  .rb-section,
  main > section,
  #content > section {
    padding-top: var(--rb-space-6, 48px);
    padding-bottom: var(--rb-space-6, 48px);
  }
  .advantages { padding-top: var(--rb-space-6, 48px); padding-bottom: var(--rb-space-6, 48px); }
}

/* ============================================================
   P2 гармонизация — единый стандарт модалок
   (bootstrap modal + magnific popup + rb-banner-modal + [role=dialog])
   Добавлено: 2026-07-28. STAMP: p2_2026-07-28_1446
   ============================================================ */

/* Единая ширина всех модалок */
.modal-dialog,
.mfp-container .mfp-content,
[role='dialog']:not(.rb-header *):not(.dropdown-menu),
.rb-modal {
  max-width: 90vw !important;
}

.modal-content,
.rb-modal-content,
.mfp-container .white-popup-block {
  max-height: 90vh !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* Единый крестик 44 x 44 */
.modal .close,
.mfp-close,
.rb-modal__close,
.rb-banner-modal__close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  opacity: 1 !important;
  color: var(--rb-ink, #2E2A24) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transition: background 200ms ease, transform 200ms ease !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(46,42,36,0.12);
}

.modal .close:hover,
.mfp-close:hover,
.rb-modal__close:hover,
.rb-banner-modal__close:hover,
.modal .close:focus,
.mfp-close:focus,
.rb-modal__close:focus,
.rb-banner-modal__close:focus {
  background: #fff !important;
  transform: scale(1.05);
  outline: 2px solid var(--rb-olive, #5C7F5A);
  outline-offset: 2px;
}

/* Единый backdrop */
.modal-backdrop,
.mfp-bg {
  background: rgba(46, 42, 36, 0.55) !important;
  opacity: 1 !important;
}

.modal-backdrop.in { opacity: 0.55 !important; }

/* Focus visible для интерактива внутри модалок */
.modal *:focus-visible,
.mfp-container *:focus-visible,
[role='dialog'] *:focus-visible {
  outline: 2px solid var(--rb-olive, #5C7F5A);
  outline-offset: 2px;
}

/* Mobile — модалка на всю ширину минус небольшой gap */
@media (max-width: 767px) {
  .modal-dialog,
  .mfp-container .mfp-content,
  [role='dialog']:not(.rb-header *):not(.dropdown-menu),
  .rb-modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }
  .modal-content,
  .rb-modal-content,
  .mfp-container .white-popup-block {
    max-height: calc(100vh - 40px) !important;
  }
}

/* ============================================================
   P2 — rb-icon (SVG-иконки из единого sprite)
   ============================================================ */
.rb-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
  flex-shrink: 0;
}

.rb-icon--sm { width: 16px; height: 16px; }
.rb-icon--md { width: 20px; height: 20px; }
.rb-icon--lg { width: 24px; height: 24px; }
.rb-icon--xl { width: 32px; height: 32px; }

/* Специально для VK иконки — она fill (не stroke) */
.rb-icon--fill {
  fill: currentColor;
  stroke: none;
}

/* В футере — крем-беж цвет */
.rb-footer .rb-icon {
  color: var(--rb-warm-beige, #a99686);
}