/* Armaturam — Bootstrap 5.3.3 + Flexbox adapted CSS
   Описание: полный файл стилей, адаптированный под Bootstrap 5.3.3.
   Включает: Roboto, переменные, .page-root/.page-main, .site-container (max 1410px), .container-inner (max 1390px), overrides для существующих классов.
*/

/* ==========================================================================
   00. ROOT / VARIABLES / RESET
   ========================================================================== */

:root{
  /* Colors */
  --color-primary: #00569c;
  --color-primary-2: #006cc5;
  --color-accent: #004b88;
  --color-muted: #95979a;
  --color-bg: #ffffff;
  --color-footer: #2c364a;
  --color-border: #d7dee3;
  --color-text: #232323; /* базовый цвет текста */

  /* Typography (Roboto) */
  --font-roboto: "Roboto", Arial, sans-serif;
  --base-font-size: 16px;
  --base-line-height: 1.5;

  /* Fluid headings */
  --h1: clamp(28px, 3.8vw, 48px);
  --h2: clamp(22px, 3.0vw, 36px);
  --h3: clamp(18px, 2.2vw, 28px);
  --h4: clamp(16px, 1.6vw, 20px);
  --h5: clamp(14px, 1.2vw, 16px);
  --h6: 14px;

  --lead: 18px;
  --small: 13px;
  --form-font-size: 15px;

  /* Layout: site max 1410, inner wrap max 1390 */
  --site-max: 1410px;
  --wrap-max: 1390px;
  --page-padding: 20px;
  --gutter: 24px;

  --transition-fast: .3s ease;
}

/* Box sizing and reset */
*, *::before, *::after{ box-sizing: border-box; }
html{ font-family: var(--font-roboto); font-size: var(--base-font-size); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{ margin:0; min-height:100%; color:var(--color-text); background:var(--color-bg); line-height:var(--base-line-height); }

/* ==========================================================================
   00.5 Bootstrap compatibility helpers
   ========================================================================== */
/* Если вы используете .container, переопределим max-width выше для Xxl */
@media (min-width: 1400px){
  .container, .container-xl, .container-xxl { max-width: var(--site-max) !important; }
}

/* ==========================================================================
   00.6 Page layout (flex root) — убираем необходимость отрицательных margin'ов
   ========================================================================== */
.page-root { min-height: 100vh; display:flex; flex-direction:column; }
.page-main { flex: 1 0 auto; }

/* Site container + inner wrap */
.site-container{ width:100%; max-width:var(--site-max); margin:0 auto; padding-left:var(--page-padding); padding-right:var(--page-padding); box-sizing:border-box; }
.container-inner{ width:100%; max-width:var(--wrap-max); margin:0 auto; box-sizing:border-box; }

/* ==========================================================================
   01. CONTAINERS / GRID / LAYOUT (overrides + helpers)
   ========================================================================== */
/* preserve original .container behavior but prefer .site-container/.container-inner */
.container, .maxwidth-theme{ width:100%; margin-left:auto; margin-right:auto; position:relative; }
.maxwidth-theme{ max-width: var(--wrap-max); padding:0 16px; }

/* Clearfix (legacy) */
.row::before, .row::after, .container::before, .container::after{ content: ""; display: table; }

/* helper grid using CSS Grid for special sections (catalog, footer) */
.grid-12{ display:grid; grid-template-columns: repeat(12, 1fr); gap:var(--gutter); }

/* ==========================================================================
   02. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6{ margin:0 0 16px 0; font-family:var(--font-roboto); font-weight:500; color:var(--color-text); }
h1{ font-size:var(--h1); line-height:1.05; }
h2{ font-size:var(--h2); line-height:1.15; }
h3{ font-size:var(--h3); line-height:1.2; }
h4{ font-size:var(--h4); }
h5{ font-size:var(--h5); }
h6{ font-size:var(--h6); }

p{ margin-bottom:1rem; color:var(--color-text); text-align: justify; text-justify: inter-word; font-size:1rem; }
.lead{ font-size:var(--lead); color: rgba(35,35,35,.9); }
small, .small{ font-size:var(--small); color:var(--color-muted); }

a, a:focus{ color:var(--color-primary); text-decoration:none; }
a:hover, a:focus{ color:var(--color-primary-2); text-decoration:underline; }

input, textarea, select, .form-control{ font-family:var(--font-roboto); font-size:var(--form-font-size); color:var(--color-text); }

blockquote{ border-left:4px solid var(--color-border); padding:.75rem 1rem; margin:1rem 0; background:#fafafa; color:rgba(35,35,35,.9); font-style:italic; }
blockquote p{ margin:0; }

/* ==========================================================================
   03. GLOBAL ELEMENTS / BOOTSTRAP INTEROP
   ========================================================================== */
.hidden{ display:none !important; }
.clr{ clear:both; }
.wide{ overflow:hidden; }

/* Buttons — keep project styles but prefer Bootstrap .btn */
.btn-custom{ display:inline-block; text-transform:uppercase; margin:0 10px 10px 0; border-radius:2px; padding:7px 12px; transition:all var(--transition-fast); }
.btn-custom.btn-xs{ font-size:10px; padding:7px 14px 6px; }

/* Keep .btn-secondary rules only as fallback for custom buttons that aren't using Bootstrap classes */
.btn-secondary{ background-color:var(--color-primary); border-color:var(--color-primary); color:#fff !important; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active{ background-color:var(--color-primary-2); border-color:var(--color-primary-2); }


/* =========================
   04 — HEADER (mheader)
   ========================= */
.mheader { margin-bottom:20px; position: relative; }
.mheader-top { background: #F8F8F8; padding: 7px 15px; }
.mheader-top-wrapper {  
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: flex;
  gap: var(--gutter);
  align-items: center;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  box-sizing: border-box;
}

.mheader-top-term, .mheader-top-address, .mheader-top-social { display:flex; align-items:center; gap:10px; }

.mheader-logo { width:auto; height:60px; }
.mheader-middle { padding: 20px 15px; }
.mheader-middle-wrapper {
  /* вместо жёстких значений используем переменные */
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: flex;
  gap: var(--gutter);
  align-items: center;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  box-sizing: border-box;
}


.mheader-bottom { background: var(--brand-blue); color: var(--white); }
.mheader-bottom-wrapper {
  /* вместо жёстких значений используем переменные */
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: flex;
  gap: var(--gutter);
  align-items: center;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  box-sizing: border-box;
}


.mheader-info, .mheader-email, .mheader-phones, .mheader-buttons { display:flex; gap:10px; }
.brand-line { margin:0; line-height:1.05; }
.brand-line__top { display:block; font-size:0.86rem; color:var(--muted,#6c757d); }
.brand-line__bottom { display:block; font-size:1rem; font-weight:600; color:var(--heading,#10203a); }

/* Адаптив: на очень маленьких экранах уменьшаем размер */
@media (max-width: 480px) {
  .brand-line__top { font-size:0.78rem; }
  .brand-line__bottom { font-size:0.95rem; }
}

.mheader-phones { flex-direction:column; }

/* =========================
   FIXED HEADER
   ========================= */
.fixed-header{
  position: fixed; top:0; left:0; width:100%; background: var(--white); z-index:1000;
  box-shadow: 0 5px 10px rgba(0,0,0,0.08); transition: transform .18s ease, opacity .18s ease;
  transform: translateY(-100%); opacity: 0;
}
.fixed-header.fixed-header--show { transform: translateY(0); opacity: 1; }
.fixed-header .fheader-inner { display:flex; align-items:center; gap:18px; width:100%; padding:10px 16px; box-sizing:border-box; }
.fheader-logo { flex: 0 0 auto; }
.fheader-menu { flex: 1 1 auto; display:flex; justify-content:center; }
.fheader-menu .urrow { display:flex; gap:14px; align-items:center; margin:0; padding:0; }
.fheader-menu .urrow a { color:#222; padding:6px 8px; text-decoration:none; }
.fheader-search-toggle { cursor:pointer; color:#222; margin-left:8px; display:flex; align-items:center; }

/* search toggle mode */
.fixed-header.fixed-header__show-search .fheader-menu { display:none !important; }
.fixed-header.fixed-header__show-search .fheader-search { display:flex !important; }

/* contacts */
.fheader-contacts { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.fheader-email { display:inline-flex; align-items:center; gap:8px; font-weight:500; }
.fheader-phone { display:flex; flex-direction:column; gap:2px; align-items:flex-end; font-size:24px; font-weight:700; }

/* media for fixed header */
@media (max-width: 992px) {
  .fheader-menu { display:none; }
  .fixed-header.fixed-header__show-search .fheader-contacts { display:none; }
  .fheader-contacts { gap:8px; }
  .fixed-header .fheader-inner { padding:8px 12px; }}

/* ==========================================================================
   07. FOOTER (flex sticky, removed negative margin)
   ========================================================================== */
footer{ background:var(--color-footer); color:#969ba5; font-size:12px; line-height:18px; min-height:171px; position:relative; padding:0; }
footer .info, footer .copy{ padding:21px 0; color:#fff; }
.bottom-menu{ color:#fff; font-size:11px; font-weight:700; margin-top:22px; text-transform:uppercase; }
.bottom-menu .item{ margin-bottom:8px; display:inline-block; vertical-align:top; }

.footer-columns{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; padding:24px 16px; }
@media (max-width: 992px){ .footer-columns{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 576px){ .footer-columns{ grid-template-columns: 1fr; } }

/* ==========================================================================
   08. SIDEBAR / MENU-SIDEBAR
   ========================================================================== */
.sidebar, .sidearea{ margin-bottom:33px; }
.sidebar ul{ margin:0; padding:0; list-style:none; }
.sidebar ul li{ margin-bottom:3px; }
.sidebar ul li a{ display:block; background:#E2E2E2; height:35px; line-height:35px; padding-left:37px; text-decoration:none; font-weight:700; font-size:14px; }
.sidebar ul li a:hover, .sidebar ul li.active a{ background:#C9C9C9; }

.sidebar li > ul{ display:none; }
.sidebar li.current-menu-item > ul, .sidebar li.current-menu-ancestor > ul, .sidebar ul li.current-menu-parent > ul, li.current-post-ancestor > ul{ display:block; }

/* Sidebar layout using Bootstrap columns or custom grid */
.layout-two-column{ display:grid; grid-template-columns: 1fr 300px; gap:30px; }
@media (max-width: 992px){ .layout-two-column{ grid-template-columns: 1fr; } .sidebar{ order:2; } .content{ order:1; } }

/* ==========================================================================
   09. ITEM-VIEWS / CARDS / NEWS / CATALOG
   ========================================================================== */
.item-views{ margin-bottom:0; position:relative; }
.item-views .item{ border:1px solid #e2e7eb; margin-bottom:10px; position:relative; overflow:hidden; transition:box-shadow var(--transition-fast); }

.item-views .item .image{ padding:0; overflow:hidden; max-width:160px; height:160px; line-height:157px; text-align:center; }
.item-views.list .item .image{ height:auto; width:100%; padding:24px 0 24px 24px; }
.item-views.list .item .image img{ max-width:100%; max-height:100%; display:inline-block; vertical-align:middle; }

.item-views .item .title{ font-weight:500; margin-bottom:7px; font-size:15px; line-height:18px; color:#324860; }
.item-views .item .previewtext{ margin-bottom:20px; color:#555; }

.label{ border-radius:1px; font-size:11px; font-weight:400; line-height:14px; height:22px; padding:.4em .6em; display:inline-block; vertical-align:top; color:#fff; }
.label-order{ background:#57b5e3; }
.label-instock{ background:#3cc051; }

.news.front .item{ margin-bottom:30px; overflow:hidden; margin-top:6px; }
.news.front .item .image{ float:left; width:105px; height:70px; line-height:67px; text-align:center; }
.news.front .item .info{ padding-left:125px; }

.catalog.detail .head:not(.wti){ border:1px solid var(--color-border); margin-bottom:24px; }
.catalog.detail .image .inner{ border:1px solid var(--color-border); overflow:hidden; padding:31px 7px 27px 28px; }

/* Catalog grid: prefer Bootstrap row/cols, but keep grid fallback */
.catalog-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
@media (max-width: 1200px){ .catalog-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .catalog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .catalog-grid{ grid-template-columns: 1fr; } }

.catalog-item{ width:100%; min-height:350px; margin-bottom:20px; display:flex; }
.catalog-item-inner{ position:relative; width:100%; padding:15px 20px; background:#fff; box-shadow:1px 1px 15px rgba(191,191,191,0.2); transition:box-shadow var(--transition-fast); display:flex; flex-direction:column; justify-content:space-between; }
.catalog-item-inner:hover{ box-shadow:1px 8px 18px rgba(86,86,86,0.25); z-index:2; }

.catalog-img{ display:flex; justify-content:center; margin-bottom:20px; }
.catalog-img img{ width:100%; height:auto; object-fit:contain; max-height:220px; }

.catalog-text{ margin-bottom:40px; text-align:center; }
.catalog-text a{ color:var(--color-primary); font-size:14px; font-weight:700; display:block; }

.catalog-btn{ height:45px; border:1px solid var(--color-primary); font-weight:700; display:inline-block; background:#fff; color:var(--color-primary); padding:0 18px; line-height:45px; text-align:center; }
.catalog-btn:hover{ background:var(--color-primary-2); color:#fff; }

.card-product-grid .img-wrap{ text-align:center; padding:10px; overflow:hidden; }
.card-product-grid .img-wrap img{ width:auto; max-width:100%; display:inline-block; object-fit:cover; }
.card-product-grid:hover{ box-shadow:0 4px 15px rgba(0,0,102,0.3); transition:.3s; }

.price-table{ width:100%; border-collapse:collapse; }
.price-table thead .top-price-head{ background-color:var(--color-primary) !important; color:#fff; }

/* ==========================================================================
   10. MODALS / FORMS / POPUPS
   ========================================================================== */
.modal-header{ min-height:115px; padding:30px 28px 45px 35px; background:#eaf0f2; border-top:2px solid var(--color-primary); }
.modal-header i{ background:var(--color-primary); color:#fff; border-radius:50%; width:54px; height:54px; line-height:54px; display:inline-block; text-align:center; font-size:36px; float:left; }
.modal-header .text{ padding-left:74px; color:#555; }
.modal-header .title{ font-size:24px; font-weight:500; color:#2f383d; margin-bottom:5px; }

.form .form-footer{ padding:15px 0; text-align:center; display:block; }
.form .required-star{ color:#e02222; margin-left:3px; font-weight:400; font-size:18px; vertical-align:middle; }

@media (max-width: 576px){ .modal-header{ padding:18px 16px; min-height:auto; } .modal-header .text{ padding-left:64px; } }

/* ==========================================================================
   11. MISC / ICONS / UTILS
   ========================================================================== */
.fa.colored{ width:54px; height:54px; line-height:54px; text-align:center; color:#fff; font-size:29px; margin:0 20px 20px 0; background:var(--color-primary); border-radius:50%; display:inline-block; }
.mt-34{ margin-top:34px !important; }
.b-hlp{ display:block; position:relative; background:#004b88; border-bottom:2px solid #2082c3; border-radius:4px; width:350px; height:119px; color:#fff; }
.b-hlp .w{ padding:18px 15px; }
.b-hlp .ttl{ font-size:20px; margin:0 0 10px; }
.si-tags{ padding:0; list-style:none; display:flex; flex-wrap:wrap; margin:0 -10px; }
.si-tags__item{ padding:0 10px; margin-bottom:10px; }
.breadcrumb{ font-size:11px; line-height:13px; padding:0; margin:0; list-style:none; background:none; }
.breadcrumb > li, .breadcrumb a, .breadcrumb .active{ color:#777; text-decoration:none; }
.pdf{ display:inline-block; height:50px; padding-left:60px; background:url(images/pdf.png) no-repeat; line-height:50px; }

/* ==========================================================================
   12. MEDIA QUERIES (Bootstrap breakpoints + project)
   ========================================================================== */
@media (max-width: 1200px){ .catalog-item-inner{ min-height:320px; } }
@media (max-width: 992px){ .layout-two-column{ grid-template-columns:1fr; } .sidebar{ order:2; } .content{ order:1; } }
@media (max-width: 768px){ .logo-row .top-description{ padding:12px 16px 0 16px; } .logo-row .top-callback{ padding:8px 16px; text-align:center; } .logo-row .logo img{ max-height:44px; } }
@media (max-width: 576px){ .mega-menu{ overflow-x:auto; } .subscribe-block-wrapper{ padding-left:15px; padding-right:15px; } .container{ padding:0 15px; } .maxwidth-theme{ overflow-x:auto; } .gallery.related-gallery{ display:flex; flex-wrap:wrap; } .gallery.related-gallery .gallery-item{ width:200px !important; } .sidearea a img{ max-width:150px; height:auto; } .sidearea .sp-form-outer{ display:none; } }

/* ==========================================================================
   13. Notes / Integration
   ========================================================================== */
/* 1) Подключите Bootstrap 5.3.3 (CSS+JS) и Roboto (Google) через wp_enqueue_style / wp_enqueue_script.
   2) Оберните шаблон в .page-root > header + main.page-main + footer для корректной работы sticky-footer.
   3) Для корректного поведения фиксированного header добавьте padding-top у .page-main равный высоте header (динамически через JS или статически).
   4) Mobile mega-menu: добавьте простой JS, который переключает класс .open на .mega-menu .wrap при клике в ширинах <= 992px.
*/

/* =========================
   Универсальные кнопки (минимальный набор)
   ========================= */
.btn-universal{
  --btn-bg: var(--brand-red);
  --btn-color: var(--white);
  --btn-border: transparent;
  --btn-max-width: 180px; /* default */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  height:48px;
  padding:0 14px;
  border-radius:8px;
  font-weight:600;
  color:var(--btn-color);
  background:var(--btn-bg);
  border:1px solid var(--btn-border);
  cursor:pointer;
  box-sizing:border-box;
  white-space:nowrap;
  text-decoration:none;
  max-width:var(--btn-max-width);
  width:min(var(--btn-max-width),100%);
  transition: opacity .14s ease, transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Иконка справа (вставлять ПОСЛЕ текста) */
.btn-universal__icon{
  display:inline-block;
  font-size:1.05em;
  line-height:1;
  opacity:1;
  transition: opacity .12s ease, transform .12s ease;
  margin-left:0.25rem;
}

/* Hover / focus эффекты */
.btn-universal:hover,
.btn-universal:focus{
  opacity:0.95;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  outline:none;
}
.btn-universal:hover .btn-universal__icon,
.btn-universal:focus .btn-universal__icon{
  opacity:.8;              /* ваш запрос */
  transform: translateX(4px);
}

/* Модификаторы цветов */
.btn--accent  { --btn-bg: var(--brand-red);  --btn-color: var(--white); }
.btn--primary { --btn-bg: var(--brand-blue); --btn-color: var(--white); }

/* Ширины */
.btn--w160 { --btn-max-width: 160px; }
.btn--w180 { --btn-max-width: 180px; }
.btn--w200 { --btn-max-width: 200px; }

/* Фокус для клавиатурных пользователей */
.btn-universal:focus-visible { box-shadow: 0 0 0 4px rgba(100,149,237,0.14); outline:none; }

/* Disabled */
.btn-universal[disabled], .btn-universal.is-disabled {
  cursor:not-allowed; opacity:.6; pointer-events:none; transform:none; box-shadow:none;
}

/* Ряд кнопок (если нужно выравнивать вправо) */
.btn-row { display:flex; gap:12px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
@supports not (gap:12px) { .btn-row .btn-universal + .btn-universal { margin-left:12px; } }

/* Адаптив: на узких экранах кнопки растягиваются */
@media (max-width:480px){
  .btn-universal{ width:100%; max-width:100%; }
  .btn-row{ justify-content:center; }
}

/* Сетка 3 колонки */
.masha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.masha-news-card {
  background: #fff;
  border: 1px solid #eee;
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.masha-news-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.masha-news-body { padding-top: 10px; }

.masha-news-date { font-size: 13px; color:#888; margin-bottom:6px; }
.masha-news-title { font-size:18px; margin:0 0 8px; }
.masha-news-excerpt { color:#555; font-size:14px; }

/* Load more wrapper */
.masha-load-more-wrap { text-align:center; margin-top:20px; }
.masha-button { padding:10px 18px; cursor:pointer; }

/* Single news layout: sidebar слева до 420px, контент справа */
.masha-single-wrap {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
}

/* на мобильных — столбец */
@media (max-width: 900px) {
  .masha-grid { grid-template-columns: repeat(2,1fr); }
  .masha-single-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .masha-grid { grid-template-columns: 1fr; }
}

/* Использует твои .site-container и .container-inner, поэтому сетка вписывается в них */
.site-news-section { padding: 24px 0; }

/* Заголовок блока */
.site-news-head h2 { margin: 0 0 12px; font-size: 1.25rem; }

/* Сетка карточек: 3 колонки, адаптивно */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

/* Карточка новости */
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 12px;
  box-sizing: border-box;
  min-height: 100%;
}

.news-thumb-link { display:block; width:100%; overflow:hidden; border-radius:4px; }

/* Изображение — масштабирование через object-fit */
.news-card-img {
  width:100%;
  height:160px;
  object-fit: cover;
  display:block;
  border-radius:4px;
}

/* Содержимое карточки */
.news-card-body { margin-top:10px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.news-date { font-size:0.85rem; color:#888; }
.news-title { margin:0; font-size:1rem; line-height:1.2; }
.news-title a { color:inherit; text-decoration:none; }
.news-excerpt { margin:0; color:#555; font-size:0.95rem; }

/* Кнопка "Все новости" */
.news-more { text-align:left; margin-top:16px; }

/* Адаптивность */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-card-img { height:200px; }
}


/* End of adapted CSS */