@charset "UTF-8";
/*!
 * OKNAMAG.PRO — Brand UI (UniShop2 / LiveStore OC3)
 * UNIVERSAL FIXED v7.0
 *
 * Источник: объединение актуального server CSS + admin CSS (дубликаты убраны),
 * плюс небольшой PATCH для CTA-контейнеров без okm-btn-* классов в HTML.
 *
 * Совместимость: UniShop2 3.5.4.x, OC3 (LiveStore 3.0.4.x), OCFilter, Simple Checkout.
 */

/* ---------------------------------------------------------
   0) Brand tokens (our layer)
--------------------------------------------------------- */
:root{
  --okm-primary:#0b5aa8;
  --okm-primary-dark:#084781;
  --okm-accent:#66b83f;
  --okm-accent-dark:#4e9a2f;

  --okm-text:#101828;
  --okm-muted:#667085;
  --okm-bg:#f6f8fc;
  --okm-surface:#ffffff;
  --okm-border:#e4e7ec;

  --okm-radius:16px;
  --okm-shadow-sm:0 6px 18px rgba(16,24,40,.08);
  --okm-shadow:0 14px 44px rgba(16,24,40,.10);

  --okm-grad:linear-gradient(90deg, var(--okm-primary) 0%, #1aa7a6 45%, var(--okm-accent) 100%);
}

/* ---------------------------------------------------------
   2) UniShop2 variable overrides (colors ONLY — no layout)
   This removes orange globally in theme parts that rely on vars.
--------------------------------------------------------- */
:root{
  /* links */
  --a-c: var(--okm-primary);
  --a-c-hover: var(--okm-primary-dark);

  /* header icons */
  --header-icon-c: var(--okm-primary);
  --header-phones-m-c-hover: var(--okm-primary);
  --header-search-cat-btn-c: var(--okm-primary);

  /* main catalog button + menu headings */
  --menu-main-c: var(--okm-primary);
  --menu-main-bg: rgba(11,90,168,.08);
  --menu-main-header-bg: var(--okm-primary);
  --menu-main-header-c:#fff;

  --menu-main-level-1-c: var(--okm-text);
  --menu-main-level-1-c-hover: var(--okm-primary-dark);

  --menu-main-level-2-c: var(--okm-primary);              /* was orange in many builds */
  --menu-main-level-2-c-hover: var(--okm-accent);

  --menu-main-level-3-c: var(--okm-text);
  --menu-main-level-3-c-hover: var(--okm-primary);

  /* right menu (#menu2) */
  --menu-right-bg:#ffffff;
  --menu-right-level-1-c:#344054;
  --menu-right-level-1-c-hover: var(--okm-primary-dark);
  --menu-right-level-2-c: var(--okm-primary);
  --menu-right-level-2-c-hover: var(--okm-primary-dark);

  /* buttons */
  --btn-primary-c:#fff;
  --btn-primary-bg: var(--okm-primary);
  --btn-primary-c-hover:#fff;
  --btn-primary-bg-hover: var(--okm-primary-dark);

  /* rating */
  --rating-star-c-active: var(--okm-accent);

  /* footer */
  --footer-bg:#081a33;
  --footer-c:rgba(207,227,255,.86);
  --footer-heading-c:#ffffff;

  /* legacy OKM vars that were set to orange in merged css */
  --okm-c: var(--okm-primary);
  --okm-cd: var(--okm-primary-dark);

  /* top info bar (О компании / Оплата и доставка / Скачать) */
  --top-menu-bg: var(--okm-grad);
  --top-menu-h: 32px;
  --top-menu-btn-c: #fff;
  --top-menu-btn-c-hover: rgba(255,255,255,.92);

  /* product options (label pills) */
  --option-name-bg: rgba(11,90,168,.06);
  --option-name-c: var(--okm-text);
  --option-name-bg-checked: var(--okm-primary);
  --option-name-c-checked: #fff;
  --option-name-c-hover: var(--okm-primary);
  --option-name-badge-bg: rgba(11,90,168,.12);
  --option-name-badge-c: var(--okm-primary-dark);

  /* banners / slideshow */
  --slideshow-title-c: #0a2f55;
  --slideshow-text-c: #425262;
  --slideshow-btn-bg: var(--okm-primary);
  --slideshow-btn-c: #fff;
}


/* ---------------------------------------------------------
   3) Base polish (safe)
--------------------------------------------------------- */
body{
  background:var(--okm-bg);
  color:var(--okm-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--okm-primary)}
a:hover{color:var(--okm-primary-dark)}
hr{border-color:var(--okm-border)}

/* Header surface */
#header, header, .header{
  background:var(--okm-surface);
  border-bottom:1px solid var(--okm-border);
}

/* icons */
#header .fa, header .fa, .header .fa,
#header i, header i, .header i{color:var(--okm-primary)}
#header a:hover .fa, header a:hover .fa, .header a:hover .fa,
#header a:hover i, header a:hover i, .header a:hover i{color:var(--okm-primary-dark)}
#header svg, header svg, .header svg{fill:var(--okm-primary)}
#header a:hover svg, header a:hover svg, .header a:hover svg{fill:var(--okm-primary-dark)}

/* Search pill */
#search input, .search input, .header__search input, input[name="search"]{
  border:1px solid var(--okm-border);
  border-radius:999px;
  background:#fff;
}
#search input:focus, .search input:focus, .header__search input:focus, input[name="search"]:focus{
  border-color:rgba(11,90,168,.45);
  box-shadow:0 0 0 3px rgba(11,90,168,.18);
}

/* ---------------------------------------------------------
   4) Buttons (global) — remove orange everywhere
--------------------------------------------------------- */
.btn, a.btn, button.btn{
  border-radius:12px!important;
  font-weight:800!important;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active{transform:translateY(1px)}

.btn-primary, .btn.btn-primary{
  background:var(--okm-primary)!important;
  border-color:var(--okm-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(11,90,168,.14);
}
.btn-primary:hover, .btn.btn-primary:hover{
  background:var(--okm-primary-dark)!important;
  border-color:var(--okm-primary-dark)!important;
  color:#fff!important;
}

/* Any warning/orange buttons inside content -> brand */
.btn-warning, .btn.btn-warning,
.btn-orange, .btn.btn-orange{
  background:var(--okm-primary)!important;
  border-color:var(--okm-primary)!important;
  color:#fff!important;
}
.btn-warning:hover, .btn.btn-warning:hover,
.btn-orange:hover, .btn.btn-orange:hover{
  background:var(--okm-primary-dark)!important;
  border-color:var(--okm-primary-dark)!important;
  color:#fff!important;
}

/* ---------------------------------------------------------
   5) Add to cart (yellow/orange) — FORCE to blue everywhere
--------------------------------------------------------- */
:root{
  --add-to-cart-btn-c:#fff;
  --add-to-cart-btn-bg: var(--okm-primary);
  --add-to-cart-btn-c-hover:#fff;
  --add-to-cart-btn-bg-hover: var(--okm-primary-dark);

  --add-to-cart-btn-c-incart:#fff;
  --add-to-cart-btn-bg-incart: var(--okm-accent);
  --add-to-cart-btn-c-incart-hover:#fff;
  --add-to-cart-btn-bg-incart-hover: var(--okm-accent-dark);
}

/* hard override */
.add_to_cart,
a.add_to_cart,
button.add_to_cart,
.add_to_cart.btn,
#button-cart,
button#button-cart{
  background:var(--okm-primary)!important;
  border-color:var(--okm-primary)!important;
  color:#fff!important;
  border-radius:12px!important;
  font-weight:900!important;
  box-shadow:0 10px 24px rgba(11,90,168,.14);
}
.add_to_cart:hover,
.add_to_cart:focus,
#button-cart:hover,
#button-cart:focus{
  background:var(--okm-primary-dark)!important;
  border-color:var(--okm-primary-dark)!important;
  color:#fff!important;
}
.add_to_cart.in_cart{
  background:var(--okm-accent)!important;
  border-color:var(--okm-accent)!important;
  color:#fff!important;
}
.add_to_cart.in_cart:hover{background:var(--okm-accent-dark)!important;border-color:var(--okm-accent-dark)!important}
.add_to_cart .fa,.add_to_cart i{color:#fff!important}
.add_to_cart svg{fill:#fff!important}

/* ---------------------------------------------------------
   6) Wishlist / Compare — text + icons (desktop + mobile)
--------------------------------------------------------- */
:root{
  --wishlist-c: var(--okm-primary);
  --wishlist-c-hover: var(--okm-primary-dark);
  --compare-c: var(--okm-primary);
  --compare-c-hover: var(--okm-primary-dark);
}

.btn-wishlist, .btn-compare,
a.btn-wishlist, a.btn-compare,
button.btn-wishlist, button.btn-compare,
.product-page__wishlist-btn, .product-page__compare-btn,
button.wishlist, a.wishlist, button.compare, a.compare{
  color:var(--okm-primary)!important;
}
.btn-wishlist:hover, .btn-compare:hover,
a.btn-wishlist:hover, a.btn-compare:hover,
.product-page__wishlist-btn:hover, .product-page__compare-btn:hover,
button.wishlist:hover, a.wishlist:hover, button.compare:hover, a.compare:hover{
  color:var(--okm-primary-dark)!important;
}
.btn-wishlist i,.btn-wishlist .fa,.btn-compare i,.btn-compare .fa,
.product-page__wishlist-btn i,.product-page__wishlist-btn .fa,
.product-page__compare-btn i,.product-page__compare-btn .fa,
button.wishlist i,button.wishlist .fa, a.wishlist i,a.wishlist .fa,
button.compare i,button.compare .fa, a.compare i,a.compare .fa{
  color:currentColor!important;
}
.btn-wishlist svg,.btn-compare svg,
.product-page__wishlist-btn svg,.product-page__compare-btn svg,
button.wishlist svg,a.wishlist svg,button.compare svg,a.compare svg{
  fill:currentColor!important;
}

/* ---------------------------------------------------------
   7) Product options pills (only recolor checked — no layout)
--------------------------------------------------------- */
.product-page .product-options input[type="radio"]:checked + label,
.product-page .product-options input[type="checkbox"]:checked + label,
.product-page .options input[type="radio"]:checked + label,
.product-page .options input[type="checkbox"]:checked + label,
.product-page .product-options label.active,
.product-page .options label.active,
.product-page .product-options .btn.active,
.product-page .options .btn.active,
.product-page .product-options .selected,
.product-page .options .selected{
  background:var(--okm-primary)!important;
  border-color:var(--okm-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(11,90,168,.12);
}

/* ---------------------------------------------------------
   8) Catalog dropdown overlay (colors only; keep geometry)
--------------------------------------------------------- */
.menu__overlay, .menu__backdrop, .menu__mask, .menu__bg, .menu__shadow{
  background:rgba(8,26,51,.20)!important;
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .menu__overlay, .menu__backdrop, .menu__mask{
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
}
/* Hover highlight inside catalog */
#menu .menu__collapse > li > a:hover,
#menu .main-menu__collapse > li > a:hover{
  background:rgba(11,90,168,.06)!important;
  color:var(--okm-primary-dark)!important;
}

/* ---------------------------------------------------------
   9) Right top menu (#menu2) — DESIGN ONLY (keep layout from template)
--------------------------------------------------------- */
#menu2 .menu__collapse,
#menu2 .main-menu__collapse{
  background:#fff!important;
  border:1px solid rgba(228,231,236,.95)!important;
  border-radius:18px!important;
  box-shadow:0 10px 28px rgba(16,24,40,.08)!important;
}
#menu2 .menu__level-1-a,
#menu2 .menu__collapse > li > a{
  color:#344054!important;
  font-weight:850!important;
}
#menu2 .menu__level-1-a:hover,
#menu2 .menu__collapse > li > a:hover{
  background:rgba(11,90,168,.06)!important;
  color:var(--okm-primary-dark)!important;
}
#menu2 .menu__level-1-li.active > a,
#menu2 .menu__collapse > li.active > a,
#menu2 .menu__collapse > li.open > a{
  background:var(--okm-primary)!important;
  color:#fff!important;
}

/* Fix the "..." (additional) block colors only — DO NOT change widths */
#menu2 .menu__additional > button,
#menu2 .menu__additional-btn{
  background:transparent!important;
  color:#344054!important;
}
#menu2 .menu__additional > button:hover,
#menu2 .menu__additional-btn:hover{
  background:rgba(11,90,168,.06)!important;
  color:var(--okm-primary-dark)!important;
}

/* ---------------------------------------------------------
   10) Mobile bottom menu (fly-menu) — remove orange
--------------------------------------------------------- */
@media (max-width: 992px){
  :root{
    --fly-menu-bg:#ffffff;
    --fly-menu-color: var(--okm-text);
    --fly-menu-icon-c: var(--okm-primary);
    --fly-menu-icon-total-c:#fff;
    --fly-menu-icon-total-bg: var(--okm-primary);
    --fly-menu-search-cat-btn-bg: rgba(11,90,168,.08);
    --fly-menu-search-cat-btn-c: var(--okm-primary);
    --fly-menu-search-input-bg: #f6f8fb;
    --fly-menu-search-input-c: #667085;
    --fly-menu-phone-c: var(--okm-text);
    --fly-menu-caption-c: var(--okm-text);
    --fly-menu-level-1-bg-hover: rgba(11,90,168,.06);
  }
  .fly-menu{
    border-top:1px solid rgba(0,0,0,.08)!important;
    border-bottom:none!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.10)!important;
  }
  .fly-menu__icon, .fly-menu__icon .fa, .fly-menu__icon i{color:var(--okm-primary)!important}
  .fly-menu__wishlist-total,.fly-menu__compare-total,.fly-menu__cart-total{
    background:var(--okm-primary)!important;color:#fff!important;
  }
}

/* ---------------------------------------------------------
   11) Banners (hero/slideshow) — kill orange titles + CTA
--------------------------------------------------------- */
.slideshow h1,.slideshow h2,.slideshow h3,
.uni-slideshow h1,.uni-slideshow h2,.uni-slideshow h3,
.banner h1,.banner h2,.banner h3,
.uni-banner h1,.uni-banner h2,.uni-banner h3,
#slideshow0 h1,#slideshow0 h2,#slideshow0 h3,
.swiper-slide h1,.swiper-slide h2,.swiper-slide h3{
  color:var(--okm-primary)!important;
}
.slideshow a.btn, .slideshow button.btn,
.uni-slideshow a.btn, .uni-slideshow button.btn,
.banner a.btn, .banner button.btn,
.uni-banner a.btn, .uni-banner button.btn,
#slideshow0 a.btn, #slideshow0 button.btn,
.swiper-slide a.btn, .swiper-slide button.btn{
  background:var(--okm-primary)!important;
  border-color:var(--okm-primary)!important;
  color:#fff!important;
}
.slideshow a.btn:hover, .slideshow button.btn:hover,
.uni-slideshow a.btn:hover, .uni-slideshow button.btn:hover,
.banner a.btn:hover, .banner button.btn:hover,
.uni-banner a.btn:hover, .uni-banner button.btn:hover,
#slideshow0 a.btn:hover, #slideshow0 button.btn:hover,
.swiper-slide a.btn:hover, .swiper-slide button.btn:hover{
  background:var(--okm-primary-dark)!important;
  border-color:var(--okm-primary-dark)!important;
  color:#fff!important;
}

/* ---------------------------------------------------------
   12) Articles / News / Blog buttons (okm-cross-buttons & okm-cta-actions)
--------------------------------------------------------- */
.okm-cross-buttons,
.okm-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 4px;
}
.okm-cross-buttons a,
.okm-cta-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  font-size:14px;
  font-weight:900;
  line-height:1.1;
  border-radius:14px;
  text-decoration:none!important;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;
}
.okm-cross-buttons a.okm-btn-primary,
.okm-cta-actions a.okm-btn-primary,
a.okm-btn-primary{
  background:var(--okm-primary)!important;
  border-color:var(--okm-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(11,90,168,.14);
}
.okm-cross-buttons a.okm-btn-primary:hover,
.okm-cta-actions a.okm-btn-primary:hover,
a.okm-btn-primary:hover{
  background:var(--okm-primary-dark)!important;
  border-color:var(--okm-primary-dark)!important;
  color:#fff!important;
  transform:translateY(-1px);
}
.okm-cross-buttons a.okm-btn-outline,
a.okm-btn-outline{
  background:#fff!important;
  border:1px solid rgba(11,90,168,.45)!important;
  color:var(--okm-primary)!important;
  box-shadow:none!important;
}
.okm-cross-buttons a.okm-btn-outline:hover,
a.okm-btn-outline:hover{
  background:rgba(11,90,168,.06)!important;
  border-color:rgba(11,90,168,.65)!important;
  color:var(--okm-primary-dark)!important;
  transform:translateY(-1px);
}
.okm-cta-actions a.okm-btn-accent,
a.okm-btn-accent{
  background:var(--okm-accent)!important;
  border-color:var(--okm-accent)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(102,184,63,.14);
}
.okm-cta-actions a.okm-btn-accent:hover,
a.okm-btn-accent:hover{
  background:var(--okm-accent-dark)!important;
  border-color:var(--okm-accent-dark)!important;
  transform:translateY(-1px);
}

/* ---------------------------------------------------------
   13) Footer polish
--------------------------------------------------------- */
.footer{
  background:var(--footer-bg)!important;
  color:var(--footer-c)!important;
}
.footer__column-heading{
  color:var(--footer-heading-c)!important;
  font-weight:900!important;
  letter-spacing:-.01em;
}
.footer a, .footer__column-a, .footer__column-a:visited{
  color:var(--footer-c)!important;
}
.footer__column-a:hover{
  color:#fff!important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer__text{border-top:1px solid rgba(255,255,255,.12)!important}
.footer__socials-payments{background:rgba(255,255,255,.05)!important}

/* ---------------------------------------------------------
   14) Keep your small safe fixes (chat button & old news images)
--------------------------------------------------------- */
@media (max-width: 991px){
  #onlinechat__button.active{bottom:140px!important}
}
.news-page__image-39,.news-page__image-40,.news-page__image-41,.news-page__image-42,.news-page__image-43,.news-page__image-44{display:none}

/* ---------------------------------------------------------
   15) Reduced motion
--------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn,.add_to_cart,.okm-cross-buttons a,.okm-cta-actions a{transition:none!important}
}


/* =========================================================
   PATCH v5.1 — #menu2 ("правое меню") strict template sizing
   Fix: prevent "..." (menu__additional) from stretching across bar.
   Safe: matches UniShop2 default sizing.
========================================================= */
#menu2 .menu__collapse{
  display:flex !important;
  justify-content:space-between !important;
  align-items:stretch !important;
}
#menu2 .menu__level-1-li{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#menu2 .menu__additional{
  width: 50px !important;
  max-width: 50px !important;
  flex: 0 0 50px !important;
  padding: 0 !important;
}
#menu2 .menu__additional-btn,
#menu2 .menu__additional > button{
  width: 50px !important;
  min-width: 50px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}


/* =========================================================
   PATCH v5.2 — Requested fixes ONLY (do not change anything else)
   1) Top info bar (#top) height like screenshot ("О нас / Оплата и доставка / Скачать")
   2) Catalog menu text readability on open (mobile + desktop)
   3) Product options selected text/orange -> brand colors
========================================================= */

/* /* ---------------------------------------------------------
   1) TOP INFO BAR (О компании / Оплата и доставка / Скачать)
   --------------------------------------------------------- */
#top{
  background: var(--top-menu-bg, var(--okm-grad)) !important;
  border-bottom: 0 !important;
  color: var(--top-menu-btn-c, #fff) !important;
}
#top .container{
  min-height: var(--top-menu-h, 32px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#top a,
#top .dropdown-toggle,
#top .btn-link{
  color: var(--top-menu-btn-c, #fff) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}
#top a:hover,
#top .dropdown-toggle:hover,
#top .btn-link:hover{
  color: var(--top-menu-btn-c-hover, rgba(255,255,255,.92)) !important;
}
#top::before{
  content: none !important;
}
/* dropdown fallback */
#top .dropdown-menu a{
  color: var(--okm-text, #1f2a37) !important;
}
#top .dropdown-menu a:hover{
  color: var(--okm-primary, #0b5aa8) !important;
}

/* 2) CATALOG MENU READABILITY (mobile + desktop)
   Ensure dropdown panel is solid white above overlay and text uses dark color.
*/
#menu .menu__collapse,
#menu ul.menu__collapse,
#menu .main-menu__collapse,
#menu ul.main-menu__collapse,
#menu .menu__drop,
#menu .menu__dropdown,
#menu .menu__content,
#menu .menu__inner{
  background:#ffffff !important;
  color: var(--okm-text) !important;
}

/* Make sure overlay stays behind menu panel */
#menu .menu__collapse,
#menu .main-menu__collapse,
#menu .menu__drop,
#menu .menu__dropdown{
  position: relative !important;
  z-index: 3 !important;
  box-shadow: 0 18px 48px rgba(16,24,40,.18) !important;
}

/* Overlay/backdrop z-index lower */
.menu__overlay, .menu__backdrop, .menu__mask, .menu__bg, .menu__shadow{
  z-index: 2 !important;
}

/* Menu items colors */
#menu .menu__collapse > li > a,
#menu .main-menu__collapse > li > a{
  color: var(--okm-text) !important;
}
#menu .menu__collapse > li > a:hover,
#menu .main-menu__collapse > li > a:hover{
  color: var(--okm-primary-dark) !important;
}

/* In mobile "Каталог/Контакты" header strip, keep readable */
@media (max-width: 992px){
  #menu .menu__header, #menu .menu__tabs, #menu .menu__head{
    background: var(--okm-primary) !important;
    color:#fff !important;
  }
  #menu .menu__header a, #menu .menu__tabs a, #menu .menu__head a{
    color:#fff !important;
  }
}

/* 3) PRODUCT OPTIONS — remove orange text in selected/active pills
   Covers common UniShop2 option chips and accessory buttons.
*/
.product-page .options a,
.product-page .options label,
.product-page .product-options a,
.product-page .product-options label,
.product-page__options a,
.product-page__options label{
  color: var(--okm-text) !important;
}

.product-page .options a.active,
.product-page .options label.active,
.product-page .product-options a.active,
.product-page .product-options label.active,
.product-page__options a.active,
.product-page__options label.active,
.product-page .options .active > a,
.product-page .product-options .active > a{
  color: #ffffff !important;
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
}

/* If theme marks selected option via "selected" class with orange text */
.product-page .options .selected,
.product-page .product-options .selected,
.product-page__options .selected{
  color:#ffffff !important;
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
}

/* Some option chips use .text-warning/.text-danger for color */
.product-page .options .text-warning,
.product-page .product-options .text-warning,
.product-page__options .text-warning,
.product-page .options .text-danger,
.product-page .product-options .text-danger,
.product-page__options .text-danger{
  color: var(--okm-primary) !important;
}

/* Accessory option "badge" line (e.g., +288₽) should not turn orange */
.product-page .options .badge,
.product-page .product-options .badge,
.product-page__options .badge{
  background: rgba(11,90,168,.10) !important;
  color: var(--okm-primary-dark) !important;
  border: 1px solid rgba(11,90,168,.18) !important;
}


/* =========================================================
   PATCH v5.3 — Requested fixes ONLY
   1) #top (О нас / Оплата и доставка / Скачать): full-width gradient bg + readable text
   2) Remove gap between #top and header/menu
   3) Mobile menu header "Контакты" readability (menu__header-title-2.open)
========================================================= */

/* 2) Remove gap between top bar and header/menu */
#top + header,
#top + #header,
#top + .header{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
header, #header, .header{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.main-menu, .main-menu.set-before, .main-menu.set-before-2{
  margin-top: 0 !important;
}
#menu, #menu2{
  margin-top: 0 !important;
}

/* When mobile menu overlay is open — keep header strip attached (no seam) */
#menu .menu__header,
#menu .menu__tabs,
#menu .menu__head{
  margin: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#menu .menu__collapse,
#menu .main-menu__collapse,
#menu ul.menu__collapse,
#menu ul.main-menu__collapse{
  margin-top: 0 !important;
}

/* 3) Mobile menu header "Контакты" text readability */
#menu .menu__header-title,
#menu .menu__header-title-2{
  color: rgba(255,255,255,.90) !important;
  opacity: 1 !important;
}
#menu .menu__header-title.open,
#menu .menu__header-title-2.open{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* underline/indicator for active tab in header (if used) */
#menu .menu__header-title.open::after,
#menu .menu__header-title-2.open::after{
  background: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}

/* close icon in menu header */
#menu .menu-close,
#menu .menu__close,
#menu .menu-close i,
#menu .menu__close i,
#menu .menu-close .fa,
#menu .menu__close .fa{
  color: #ffffff !important;
  opacity: .95 !important;
}
/* ========================================================================
   PATCH v5.5 (точечно, без ломания верстки)
   - Slideshow v2: убрать оранжевый у заголовка/текста (правильные классы __title/__text)
   - Опции товара: убрать оранжевый у выбранной опции (ТОЛЬКО цвета, без размеров/паддингов)
   - Mobile меню: убрать зазор между верхней полосой и раскрытым меню + читаемость вкладки "Контакты"
   - Блог/Новости/Статьи: страховка от возврата оранжевого для кнопок/ссылок в контенте
   ======================================================================== */

/* --- 1) UniShop2 Slideshow v2 (correct selectors) ----------------------- */
.uni-slideshow_v2__title{
  color: var(--okm-primary-dark) !important;
}
.uni-slideshow_v2__text{
  color: #475467 !important;
}
/* если в описании есть вложенные элементы/ссылки */
.uni-slideshow_v2__description,
.uni-slideshow_v2__description p,
.uni-slideshow_v2__description span{
  color: #475467 !important;
}
.uni-slideshow_v2__description a:not(.btn):not(.uni-slideshow_v2__btn){
  color: var(--okm-primary-dark) !important;
  text-decoration: none;
}
.uni-slideshow_v2__description a:not(.btn):not(.uni-slideshow_v2__btn):hover{
  color: var(--okm-primary) !important;
  text-decoration: underline;
}
/* кнопка в баннере */
button.uni-slideshow_v2__btn.btn,
.uni-slideshow_v2__btn.btn{
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #fff !important;
}
button.uni-slideshow_v2__btn.btn:hover,
.uni-slideshow_v2__btn.btn:hover{
  background: var(--okm-primary-dark) !important;
  border-color: var(--okm-primary-dark) !important;
  color: #fff !important;
}

/* --- 2) Опции товара (label.option__item) — только цвета ---------------- */
.option__item{
  color: #101828; /* без !important чтобы не ломать тему, но перебивать оранжевый активного */
}
.option__group input:checked + label.option__item,
label.option__item.active,
label.option__item.selected,
label.option__item.is-active,
label.option__item.current{
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #fff !important;
}
.option__group input:checked + label.option__item:hover,
label.option__item.active:hover,
label.option__item.selected:hover,
label.option__item.is-active:hover,
label.option__item.current:hover{
  background: var(--okm-primary-dark) !important;
  border-color: var(--okm-primary-dark) !important;
  color: #fff !important;
}

/* --- 3) Mobile menu: убрать разрыв/прозрачный зазор + таб "Контакты" ---- */
@media (max-width: 991px){
  /* убираем любые внешние отступы между #top и фиксированной шапкой */
  #top{margin-bottom:0!important}
  header.fixed{top:0!important}

  /* меню: без зазора между синим хедером меню и остальными блоками шапки */
  #menu .menu__header,
  #menu .menu__header-wrapper{
    margin-bottom:0!important;
    padding-bottom:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }
  /* блок поиска под меню — без верхнего зазора/бордера */
  #search2{
    margin-top:0!important;
    padding-top:0!important;
    border-top:0!important;
  }
  #search2 .header_search{
    margin-top:0!important;
    padding-top:0!important;
  }

  /* читаемость вкладок меню (особенно "Контакты") */
  #menu .menu__header-title,
  #menu .menu__header-title-2{
    color: rgba(255,255,255,.92)!important;
  }
  #menu .menu__header-title.open,
  #menu .menu__header-title-2.open{
    color:#fff!important;
    opacity:1!important;
  }
  #menu .menu__header-title.open:after,
  #menu .menu__header-title-2.open:after{
    background: rgba(255,255,255,.92)!important;
  }
}

/* --- 4) Блог/Новости/Статьи: страховка от оранжевого в контенте -------- */
.article-page__description .btn-primary,
.article-page__description .btn.btn-primary,
.blog-page__description .btn-primary,
.news-page__description .btn-primary,
.information-page__description .btn-primary{
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color:#fff !important;
}
.article-page__description .btn-primary:hover,
.blog-page__description .btn-primary:hover,
.news-page__description .btn-primary:hover,
.information-page__description .btn-primary:hover{
  background: var(--okm-primary-dark) !important;
  border-color: var(--okm-primary-dark) !important;
  color:#fff !important;
}
/* ссылки в контенте — без оранжевого */
.article-page__description a:not(.btn):not(.okm-btn),
.blog-page__description a:not(.btn):not(.okm-btn),
.news-page__description a:not(.btn):not(.okm-btn){
  color: var(--okm-primary-dark);
}
.article-page__description a:not(.btn):not(.okm-btn):hover,
.blog-page__description a:not(.btn):not(.okm-btn):hover,
.news-page__description a:not(.btn):not(.okm-btn):hover{
  color: var(--okm-primary);
}

/* =========================================================
   OKNAMAGPRO — PATCH v5.6
   Цель: правим ТОЛЬКО цвета (без размеров/пэддингов),
   убираем оранжевый в баннерах/опциях/статьях,
   и убираем визуальный разрыв между верхней полосой и меню.
   ========================================================= */

/* -----------------------------
   1) Баннеры (uni-slideshow_v2)
   - кнопка уже синяя, но текст иногда остаётся оранжевым из-за inline-цветов.
   - форсируем наследование цвета внутри описания/текста баннера.
   ----------------------------- */
.uni-slideshow_v2__description,
.uni-slideshow_v2__text {
  color: var(--okm-muted) !important;
}

/* сбиваем любые inline color в баннерах */
.uni-slideshow_v2__description *,
.uni-slideshow_v2__text *,
.uni-slideshow_v2__title * {
  color: inherit !important;
}

/* заголовок — фирменный синий */
.uni-slideshow_v2__title {
  color: var(--okm-primary-dark) !important;
}

/* акценты в тексте баннера — фирменный синий (вместо оранжевого) */
.uni-slideshow_v2__description b,
.uni-slideshow_v2__description strong,
.uni-slideshow_v2__description h1,
.uni-slideshow_v2__description h2,
.uni-slideshow_v2__description h3,
.uni-slideshow_v2__description h4,
.uni-slideshow_v2__description h5,
.uni-slideshow_v2__description h6,
.uni-slideshow_v2__text b,
.uni-slideshow_v2__text strong {
  color: var(--okm-primary-dark) !important;
}

/* -----------------------------
   2) Опции товара
   - НЕ меняем геометрию/пэддинги/радиусы.
   - убираем «оранжевый» на активной опции, оставляя механику шаблона.
   ----------------------------- */

/* защита: если где-то .active/.selected цепляется не к option__item — не красим */
.product-page .options label.active:not(.option__item):not(.option-item):not(.option__btn),
.product-page .options label.selected:not(.option__item):not(.option-item):not(.option__btn),
.product-page .product-options label.active:not(.option__item):not(.option-item):not(.option__btn),
.product-page .product-options label.selected:not(.option__item):not(.option-item):not(.option__btn) {
  background: inherit !important;
  border-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* активная/выбранная опция — синий (без изменения размеров) */
label.option__item.active,
label.option__item.selected,
label.option__item.is-active,
label.option__item.is-selected,
.option__item.active,
.option__item.selected {
  background-color: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* hover на опции — только цвет рамки/текста */
label.option__item:hover,
.option__item:hover {
  border-color: var(--okm-primary) !important;
}

/* -----------------------------
   3) Верхняя полоса + раскрытое меню (mobile)
   - убираем «разрыв» между синей шапкой мобильного меню и блоком поиска.
   - НЕ трогаем размеры, только убираем визуальный шов.
   ----------------------------- */
@media (max-width: 991px) {
  /* синяя шапка меню */
  #menu .menu__header {
    margin-bottom: 0 !important;
  }

  /* блок поиска под шапкой меню — без верхнего зазора */
  #search2,
  #search2 .header-search {
    margin-top: 0 !important;
  }

  /* если между ними есть «полоса-пустота» (прозрачная), задаём фон */
  .main-menu,
  .main-menu.set-before,
  .main-menu.set-before:before,
  header.fixed,
  header.fixed:before {
    background-color: #ffffff;
  }

  /* Контакты/Каталог: читаемость текста */
  #menu .menu__header-title,
  #menu .menu__header-title-2 {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
}

/* -----------------------------
   4) Статьи / Блог / Новости
   - иногда в контенте/кнопках возвращается оранжевый (из встроенных стилей).
   - форсируем фирменный синий для ссылок/кнопок внутри описаний статей.
   ----------------------------- */
.article-page__description a,
.article-page__description a:visited,
.blog-page__description a,
.blog-page__description a:visited,
.news-page__description a,
.news-page__description a:visited {
  color: var(--okm-primary-dark) !important;
}

.article-page__description a:hover,
.blog-page__description a:hover,
.news-page__description a:hover {
  color: var(--okm-primary) !important;
}

/* если в контенте кнопки идут как .btn/.btn-primary — оставляем форму, меняем только цвет */
.article-page__description .btn-primary,
.blog-page__description .btn-primary,
.news-page__description .btn-primary {
  background-color: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #ffffff !important;
}

.article-page__description .btn-primary:hover,
.blog-page__description .btn-primary:hover,
.news-page__description .btn-primary:hover {
  background-color: var(--okm-primary-dark) !important;
  border-color: var(--okm-primary-dark) !important;
}



/* =========================================================
   PATCH v5.7 — Mobile spacing for "Каталог" + Search row
   Goal: add breathing room so controls don't sit on the divider line
   (ONLY spacing, no redesign)
========================================================= */
@media (max-width: 768px){
  /* Row that holds catalog button + search */
  .main-menu,
  .main-menu.set-before,
  .main-menu.set-before-2{
    padding-top: 10px !important;
  }

  /* Catalog open button (mobile) */
  button.menu-open.btn.visible-xs.visible-sm,
  .menu-open.btn.visible-xs.visible-sm{
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  /* Mobile search wrapper */
  #search2.visible-xs.visible-sm{
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  #search2.visible-xs.visible-sm .header-search{
    padding-top: 0 !important;
  }
}


/* =========================================================
   PATCH v5.8 — Product options (checkbox/radio) orange -> brand blue
   IMPORTANT: ONLY COLORS (no sizing/padding changes)
   Markup example:
   <label class="option__item"><input ...><span class="option__name">...</span></label>
========================================================= */

/* base color for option text */
.option__item,
.option__item .option__name{
  color: var(--okm-text) !important;
}

/* unselected pill (in case background/border is applied on span) */
.option__item .option__name{
  background: rgba(242,244,247,.95) !important;
  border: 1px solid rgba(228,231,236,.95) !important;
}

/* hover border accent (no layout changes) */
.option__item:hover .option__name{
  border-color: rgba(11,90,168,.55) !important;
}

/* selected states — when span is styled via sibling selector */
.option__item > input:checked + .option__name,
.option__item input:checked + .option__name,
.option__item input:checked ~ .option__name{
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #ffffff !important;
}

/* selected states — if theme adds classes to label */
.option__item.active .option__name,
.option__item.selected .option__name,
.option__item.is-active .option__name{
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #ffffff !important;
}

/* some themes colorize the label itself on select; neutralize + set brand */
.option__item.active,
.option__item.selected,
.option__item.is-active{
  color: #ffffff !important;
}

/* prevent orange from inline spans inside option */
.option__item .option__name span,
.option__item .option__name b,
.option__item .option__name i{
  color: inherit !important;
}


/* =========================================================
   PATCH v5.10 — Fix seam (gap) between top blue menu bar and opened menu
   Safe version: NO fixed overlays, NO height:100vh, NO z-index hacks.
   Only removes margins/paddings and makes background solid.
========================================================= */

/* Remove shadow that looks like a "gap" under the blue bar */
header #menu.menu1 .menu__header{
  box-shadow: none !important;
}

/* Ensure blocks under header touch it (no transparent margin seam) */
header #menu.menu1 .menu__collapse,
header #menu.menu1 .main-menu__contacts{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Menu container should not create space below header */
header #menu.menu1{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: #fff !important;
}

/* The mobile search block sits right under menu — remove top margin seam */
@media (max-width: 991px){
  header #search2{
    margin-top: 0 !important;
    background: #fff !important;
  }
  header #search2 .header-search{
    margin-top: 0 !important;
    background: #fff !important;
  }
}


/* =========================================================
   PATCH v5.11 — Center "Каталог" label (desktop + mobile)
   Scope: ONLY centering text; no size/padding redesign.
========================================================= */

/* Desktop / general: menu header title centered */
header #menu.menu1 .menu__header{
  position: relative !important;
}

header #menu.menu1 .menu__header-wrapper{
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* If header has two tabs (Каталог/Контакты) — make them equal width & centered */
header #menu.menu1 .menu__header-title,
header #menu.menu1 .menu__header-title-2{
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.15 !important;
}

/* Keep header icon on the left, not shifting the title */
header #menu.menu1 .menu__header-icon{
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Mobile: "Каталог" pill button + icon not shifting the text */
@media (max-width: 991px){
  button.menu-open.btn.visible-xs.visible-sm,
  .menu-open.btn.visible-xs.visible-sm{
    position: relative !important;
  }

  button.menu-open.btn.visible-xs.visible-sm .menu-open__icon,
  .menu-open.btn.visible-xs.visible-sm .menu-open__icon{
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  button.menu-open.btn.visible-xs.visible-sm .menu-open__title,
  .menu-open.btn.visible-xs.visible-sm .menu-open__title{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
}


/* =========================================================
   PATCH v5.12 — Mobile "Каталог" text looks blurred (overlap/AA)
   Fix: remove icon overlay on text by switching to flex layout
   and enabling better font smoothing. NO redesign.
========================================================= */
@media (max-width: 991px){
  /* Use flex so burger icon never overlaps the title */
  button.menu-open.btn.visible-xs.visible-sm,
  .menu-open.btn.visible-xs.visible-sm{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* Cancel absolute positioning from previous patch */
  button.menu-open.btn.visible-xs.visible-sm .menu-open__icon,
  .menu-open.btn.visible-xs.visible-sm .menu-open__icon{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    text-align: center !important;
  }

  /* Title centered within full pill (balance left icon width with right padding) */
  button.menu-open.btn.visible-xs.visible-sm .menu-open__title,
  .menu-open.btn.visible-xs.visible-sm .menu-open__title{
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: center !important;
    padding-right: 32px !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
}


/* =========================================================
   PATCH v5.13 — Reduce top gradient bar height (desktop+mobile)
   Requirement: less "pressure" (shorter height) but keep text readable.
   Affects: #top ("О компании / Оплата и доставка / Скачать")
========================================================= */
#top .container,
.top .container,
.top-bar .container,
.header-top .container,
.top-header .container{
  min-height: 32px !important;
}

#top a,
.top a,
.top-bar a,
.header-top a,
.top-header a{
  line-height: 32px !important; /* stable vertical rhythm, prevents visual "heaviness" */
}

@media (max-width: 767px){
  #top .container,
  .top .container,
  .top-bar .container,
  .header-top .container,
  .top-header .container{
    min-height: 30px !important;
  }
  #top a,
  .top a,
  .top-bar a,
  .header-top a,
  .top-header a{
    line-height: 30px !important;
  }
}

/* =========================================================
   PATCH v5.14 — UniShop2 variable alignment + точечные фиксы
   Цель: убрать "оранжевое" в опциях/баннерах и снизить риск конфликтов.
   ========================================================= */

/* 1) PRODUCT OPTIONS (UniShop2 .option__item) — меняем только цвет */
#product-product .option__item .option__name{
  background: var(--option-name-bg) !important;
  color: var(--option-name-c) !important;
}
#product-product .option__item .option__badge{
  background: var(--option-name-badge-bg) !important;
  color: var(--option-name-badge-c) !important;
}
#product-product .option__item:hover .option__name{
  color: var(--option-name-c-hover) !important;
}
/* input внутри label */
#product-product .option__item input:checked + .option__name,
#product-product .option__item input:checked ~ .option__name{
  background: var(--option-name-bg-checked) !important;
  color: var(--option-name-c-checked) !important;
}

/* если опции отрисованы кнопками (.btn) — тоже только цвет */
#product-product .product-page .options input:checked + label.btn,
#product-product .product-page .options .btn.active{
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-c) !important;
  border-color: var(--btn-primary-bg) !important;
  box-shadow: none !important;
}

/* 2) BANNERS / SLIDESHOW v2 — фикс цвета текста/кнопок (без изменения размеров) */
.uni-slideshow_v2__title{
  color: var(--slideshow-title-c) !important;
}
.uni-slideshow_v2__text{
  color: var(--slideshow-text-c) !important;
}
.uni-slideshow_v2__btn,
.uni-slideshow_v2__btn.btn{
  background: var(--slideshow-btn-bg) !important;
  border-color: var(--slideshow-btn-bg) !important;
  color: var(--slideshow-btn-c) !important;
}
.uni-slideshow_v2__btn:hover,
.uni-slideshow_v2__btn.btn:hover{
  background: var(--okm-primary-dark) !important;
  border-color: var(--okm-primary-dark) !important;
  color: #fff !important;
}



/* =========================================================
   OKNAMAG.PRO — Patch: okm-btn base (унификация CTA-кнопок)
   Причина: в HTML-блоках могут быть <a> или <button>.
   Делаем скругление/выравнивание/фокус для .okm-btn*,
   не трогая базовые .btn / option / checkout стили UniShop2.
   ========================================================= */
.okm-btn,
.okm-btn-primary,
.okm-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  min-height:44px;
  font-weight:700;
  line-height:1.15;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.okm-btn-primary{
  background:var(--okm-primary);
  color:#fff;
  border:1px solid var(--okm-primary);
}
.okm-btn-outline{
  background:#fff;
  color:var(--okm-primary);
  border:1px solid rgba(13, 97, 168, .35);
}
.okm-btn:hover{filter:brightness(.98)}
.okm-btn:active{transform:translateY(0)}
.okm-btn:focus{outline:none}
.okm-btn:focus-visible{
  box-shadow:0 0 0 4px rgba(13, 97, 168, .20);
}

/* На всякий случай: если редактор HTML вырезал классы — хотя бы базовая форма */
.okm-home-hero a[href]{
  border-radius:14px;
}


/* ===================== MERGED: UniShop2 admin custom CSS (moved from admin field) ===================== */
.menu__banner > div {display:flex;flex-direction:column;justify-content:center;padding:20px 15px;text-align:center;background:rgba(0,0,0, .03);border-radius:var(--border-radius-1)}
.menu__banner div img {margin:20px auto;padding:10px;max-width:170px;border-radius:var(--border-radius-1)}
.menu__banner span {color:var(--menu-main-level-2-c);font-size:1.5em;font-weight:500}
.menu__banner span:last-of-type{font-size:1.3em}

.news-page__description h3.heading{font-weight:700}
.news-page__description .heading:before{padding:0 5px 0 0;content:'#';color:#f00}
.news-page__image-39, .news-page__image-40, .news-page__image-41, .news-page__image-42, .news-page__image-43, .news-page__image-44{display:none}

@media (max-width: 991px) {
 #onlinechat__button.active {
    bottom: 140px!important;
 }
}
/* ============================================================
   OKNAMAG.PRO — Home Page Selling Blocks (UniShop2) v1
   Add via: UniShop2 -> "Свой код CSS" OR include as отдельный CSS файл.
   ============================================================ */

.okm-home {
  --okm-home-gap: 16px;
}

.okm-home * {
  box-sizing: border-box;
}

.okm-home-hero {
  margin: 18px 0 22px;
}

.okm-home-hero__wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(16, 24, 40, .10);
  border-radius: var(--okm-radius);
  background:
    radial-gradient(1200px 420px at 12% 0%, rgba(11, 90, 168, .10) 0%, rgba(11, 90, 168, 0) 55%),
    radial-gradient(900px 360px at 92% 6%, rgba(102, 184, 63, .14) 0%, rgba(102, 184, 63, 0) 58%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  box-shadow: var(--okm-shadow-sm);
  overflow: hidden;
}

.okm-home-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 24, 40, .10);
  color: var(--okm-muted);
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.okm-home-hero h1 {
  margin: 0 0 10px;
  color: var(--okm-text);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: 28px;
}

.okm-home-hero__lead {
  margin: 0 0 16px;
  color: var(--okm-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
}

.okm-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.okm-home-hero__actions .okm-btn {
  min-height: 44px;
  padding-left: 16px;
  padding-right: 16px;
}

.okm-home-usp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.okm-home-usp li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, .08);
  background: rgba(255,255,255,.70);
}

.okm-home-usp svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--okm-primary);
}

.okm-home-usp b {
  display: block;
  font-size: 13px;
  color: var(--okm-text);
  margin-bottom: 2px;
}

.okm-home-usp span {
  display: block;
  font-size: 12px;
  color: var(--okm-muted);
  line-height: 1.35;
}

.okm-home-quick {
  height: 100%;
  padding: 16px;
  border-radius: calc(var(--okm-radius) - 2px);
  border: 1px solid rgba(16, 24, 40, .10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 30px rgba(16,24,40,.06);
}

.okm-home-quick__title {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--okm-text);
  margin: 0 0 10px;
  font-size: 14px;
}

.okm-home-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.okm-home-tile {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, .10);
  background: #fff;
  color: var(--okm-text);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.okm-home-tile:hover,
.okm-home-tile:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16,24,40,.10);
  border-color: rgba(11, 90, 168, .25);
  text-decoration: none;
  outline: none;
}

.okm-home-tile svg {
  width: 34px;
  height: 34px;
  color: var(--okm-primary);
}

.okm-home-tile b {
  display: block;
  font-size: 13px;
  margin: 0 0 2px;
  font-weight: 800;
}

.okm-home-tile span {
  display: block;
  font-size: 12px;
  color: var(--okm-muted);
  line-height: 1.35;
}

.okm-home-hero__note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(16, 24, 40, .18);
  color: var(--okm-muted);
  background: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1.45;
}

.okm-home-hero__note a {
  color: var(--okm-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile */
@media (max-width: 767px) {
  .okm-home-hero__wrap {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 14px;
  }

  .okm-home-hero h1 {
    font-size: 22px;
  }

  .okm-home-hero__actions {
    gap: 8px;
  }

  .okm-home-hero__actions .okm-btn {
    width: 100%;
    justify-content: center;
  }

  .okm-home-usp {
    grid-template-columns: 1fr;
  }

  .okm-home-tiles {
    grid-template-columns: 1fr;
  }
}

/* Optional: make UniShop2 slideshow v2 text match brand (applies where module is used) */
.uni-slideshow_v2 .uni-slideshow_v2__title {
  color: var(--okm-text) !important;
}

.uni-slideshow_v2 .uni-slideshow_v2__text {
  color: var(--okm-muted) !important;
}

.uni-slideshow_v2 .uni-slideshow_v2__btn,
.uni-slideshow_v2 .uni-slideshow_v2__btn.btn {
  background: var(--okm-primary) !important;
  border-color: var(--okm-primary) !important;
  color: #fff !important;
}

/* =========================================================
   OKNAMAGPRO — HOME "ГОТОВЫЕ РЕШЕНИЯ" (Solutions) v1
   Scoped-only: .okm-home-solutions
   Цель: современный вид, без bootstrap .btn, без влияния на другие страницы.
========================================================= */

.okm-home-solutions{
  --okm-s-primary: var(--okm-primary, #0b5aa8);
  --okm-s-primary-d: var(--okm-primary-dark, #084785);
  --okm-s-title: var(--okm-primary-dark, #0b2f5b);
  --okm-s-text: #475467;
  --okm-s-border: rgba(15, 23, 42, .10);
  --okm-s-shadow: 0 18px 44px rgba(2, 6, 23, .08);

  margin: 18px 0 26px;
}

.okm-home-solutions__wrap{
  position: relative;
  background: #fff;
  border: 1px solid var(--okm-s-border);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: var(--okm-s-shadow);
  overflow: hidden;
}

.okm-home-solutions__wrap::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--okm-s-primary-d), #23a7a1, #6bbf3a);
  opacity: .95;
}

.okm-home-solutions__head{
  padding: 6px 2px 12px;
}

.okm-home-solutions__title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--okm-s-title);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.okm-home-solutions__desc{
  margin: 0;
  color: var(--okm-s-text);
  font-size: 14px;
  line-height: 1.55;
}

.okm-home-solutions__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.okm-solution-card{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  padding: 14px 14px 12px;
}

.okm-solution-card__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.okm-solution-card__logos{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.okm-solution-card__logos img{
  display:block;
  height: 28px;
  width: auto;
}

.okm-solution-card__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 90, 168, .16);
  background: rgba(11, 90, 168, .06);
  color: var(--okm-s-primary-d);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.okm-solution-card__title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}

.okm-solution-card__text{
  margin: 0 0 12px;
  color: var(--okm-s-text);
  font-size: 13.5px;
  line-height: 1.55;
}

.okm-solution-card__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Локальные кнопки только для блока (не трогаем глобальные кнопки) */
.okm-home-solutions .okm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.okm-home-solutions .okm-btn-primary{
  background: var(--okm-s-primary);
  border-color: var(--okm-s-primary);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(11, 90, 168, .18);
}

.okm-home-solutions .okm-btn-primary:hover{
  background: var(--okm-s-primary-d);
  border-color: var(--okm-s-primary-d);
  transform: translateY(-1px);
}

.okm-home-solutions .okm-btn-outline{
  background: #fff;
  border-color: rgba(11, 90, 168, .35);
  color: var(--okm-s-primary-d) !important;
  box-shadow: none;
}

.okm-home-solutions .okm-btn-outline:hover{
  border-color: rgba(11, 90, 168, .60);
  transform: translateY(-1px);
}

.okm-home-solutions__cta{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px dashed rgba(15, 23, 42, .18);
  background: rgba(2, 6, 23, .02);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.okm-home-solutions__cta strong{
  color: #0f172a;
  font-weight: 900;
}

.okm-home-solutions__cta span{
  color: var(--okm-s-text);
  font-size: 13.5px;
}

.okm-home-solutions__cta-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px){
  .okm-home-solutions__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .okm-home-solutions__wrap{
    padding: 16px 14px 14px;
  }
  .okm-home-solutions__title{
    font-size: 18px;
  }
  .okm-home-solutions__cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .okm-home-solutions__cta-actions{
    width: 100%;
  }
  .okm-home-solutions__cta-actions .okm-btn{
    width: 100%;
  }
}

/* =========================================================
   OKNAMAGPRO — HOME "ГОТОВЫЕ РЕШЕНИЯ" (Solutions) v1
   Scoped-only: .okm-home-solutions
   Цель: современный вид, без bootstrap .btn, без влияния на другие страницы.
========================================================= */

.okm-home-solutions{
  --okm-s-primary: var(--okm-primary, #0b5aa8);
  --okm-s-primary-d: var(--okm-primary-dark, #084785);
  --okm-s-title: var(--okm-primary-dark, #0b2f5b);
  --okm-s-text: #475467;
  --okm-s-border: rgba(15, 23, 42, .10);
  --okm-s-shadow: 0 18px 44px rgba(2, 6, 23, .08);

  margin: 18px 0 26px;
}

.okm-home-solutions__wrap{
  position: relative;
  background: #fff;
  border: 1px solid var(--okm-s-border);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: var(--okm-s-shadow);
  overflow: hidden;
}

.okm-home-solutions__wrap::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--okm-s-primary-d), #23a7a1, #6bbf3a);
  opacity: .95;
}

.okm-home-solutions__head{
  padding: 6px 2px 12px;
}

.okm-home-solutions__title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--okm-s-title);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.okm-home-solutions__desc{
  margin: 0;
  color: var(--okm-s-text);
  font-size: 14px;
  line-height: 1.55;
}

.okm-home-solutions__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.okm-solution-card{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  padding: 14px 14px 12px;
}

.okm-solution-card__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.okm-solution-card__logos{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.okm-solution-card__logos img{
  display:block;
  height: 28px;
  width: auto;
}

.okm-solution-card__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 90, 168, .16);
  background: rgba(11, 90, 168, .06);
  color: var(--okm-s-primary-d);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.okm-solution-card__title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}

.okm-solution-card__text{
  margin: 0 0 12px;
  color: var(--okm-s-text);
  font-size: 13.5px;
  line-height: 1.55;
}

.okm-solution-card__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Локальные кнопки только для блока (не трогаем глобальные кнопки) */
.okm-home-solutions .okm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.okm-home-solutions .okm-btn-primary{
  background: var(--okm-s-primary);
  border-color: var(--okm-s-primary);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(11, 90, 168, .18);
}

.okm-home-solutions .okm-btn-primary:hover{
  background: var(--okm-s-primary-d);
  border-color: var(--okm-s-primary-d);
  transform: translateY(-1px);
}

.okm-home-solutions .okm-btn-outline{
  background: #fff;
  border-color: rgba(11, 90, 168, .35);
  color: var(--okm-s-primary-d) !important;
  box-shadow: none;
}

.okm-home-solutions .okm-btn-outline:hover{
  border-color: rgba(11, 90, 168, .60);
  transform: translateY(-1px);
}

.okm-home-solutions__cta{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px dashed rgba(15, 23, 42, .18);
  background: rgba(2, 6, 23, .02);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.okm-home-solutions__cta strong{
  color: #0f172a;
  font-weight: 900;
}

.okm-home-solutions__cta span{
  color: var(--okm-s-text);
  font-size: 13.5px;
}

.okm-home-solutions__cta-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 991px){
  .okm-home-solutions__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .okm-home-solutions__wrap{
    padding: 16px 14px 14px;
  }
  .okm-home-solutions__title{
    font-size: 18px;
  }
  .okm-home-solutions__cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .okm-home-solutions__cta-actions{
    width: 100%;
  }
  .okm-home-solutions__cta-actions .okm-btn{
    width: 100%;
  }
}


/* =========================================================
   20) HOME CTA PAIR (no per-link classes, UniShop2 variables)
   Use in HTML blocks:
     <div class="okm-cta-pair"> <a>Primary</a><a>Outline</a> </div>
     <div class="okm-cta-pair okm-cta-pair--swap"> <a>Outline</a><a>Primary</a> </div>
   Notes:
   - Uses UniShop2 tokens: --btn-primary-* , --border-radius-1
   - Does NOT touch global .btn or other theme buttons
========================================================= */
.okm-cta-pair{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 6px;
}

.okm-cta-pair a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 16px;
  font-size:14px;
  font-weight:900;
  line-height:1.1;
  border-radius: calc(var(--border-radius-1, 14px) + 2px);
  text-decoration:none!important;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* default: first link = primary */
.okm-cta-pair a:first-child{
  background: var(--btn-primary-bg, var(--okm-primary));
  border-color: var(--btn-primary-bg, var(--okm-primary));
  color: var(--btn-primary-c, #fff);
  box-shadow: 0 10px 22px rgba(11,90,168,.16);
}
.okm-cta-pair a:first-child:hover{
  background: var(--btn-primary-bg-hover, var(--btn-primary-bg, var(--okm-primary-dark)));
  border-color: var(--btn-primary-bg-hover, var(--btn-primary-bg, var(--okm-primary-dark)));
  color: var(--btn-primary-c-hover, var(--btn-primary-c, #fff));
  transform: translateY(-1px);
}

/* all next links = outline */
.okm-cta-pair a + a{
  background: transparent;
  border-color: rgba(11,90,168,.38);
  color: var(--btn-primary-bg, var(--okm-primary-dark));
  box-shadow: none;
}
.okm-cta-pair a + a:hover{
  border-color: rgba(11,90,168,.60);
  transform: translateY(-1px);
}

/* swap mode: second link is primary, first is outline */
.okm-cta-pair--swap a:first-child{
  background: transparent;
  border-color: rgba(11,90,168,.38);
  color: var(--btn-primary-bg, var(--okm-primary-dark));
  box-shadow:none;
}
.okm-cta-pair--swap a:first-child:hover{
  border-color: rgba(11,90,168,.60);
  transform: translateY(-1px);
}
.okm-cta-pair--swap a:nth-child(2){
  background: var(--btn-primary-bg, var(--okm-primary));
  border-color: var(--btn-primary-bg, var(--okm-primary));
  color: var(--btn-primary-c, #fff);
  box-shadow: 0 10px 22px rgba(11,90,168,.16);
}
.okm-cta-pair--swap a:nth-child(2):hover{
  background: var(--btn-primary-bg-hover, var(--btn-primary-bg, var(--okm-primary-dark)));
  border-color: var(--btn-primary-bg-hover, var(--btn-primary-bg, var(--okm-primary-dark)));
  color: var(--btn-primary-c-hover, var(--btn-primary-c, #fff));
  transform: translateY(-1px);
}

/* focus visible */
.okm-cta-pair a:focus{
  outline: none;
}
.okm-cta-pair a:focus-visible{
  box-shadow: 0 0 0 3px rgba(11,90,168,.22), 0 10px 22px rgba(11,90,168,.16);
}

@media (max-width: 767px){
  .okm-cta-pair{ gap:8px; }
  .okm-cta-pair a{ width:100%; }
}


/* =========================================================
   21) HOME — "ГОТОВЫЕ РЕШЕНИЯ" (OKM Solutions) v2
   Modern card look using existing UniShop2/Bootstrap markup:
   - scope: #okm-solutions only
   - keeps .panel markup, no impact on checkout/catalog
   Uses UniShop2 tokens where available.
========================================================= */

#okm-solutions{
  --okm-sol-bg: #ffffff;
  --okm-sol-text: var(--text-color, #101828);
  --okm-sol-muted: var(--text-secondary, #475467);
  --okm-sol-border: rgba(16, 24, 40, .10);
  --okm-sol-shadow: 0 18px 44px rgba(2, 6, 23, .10);
  --okm-sol-radius: calc(var(--border-radius-1, 14px) + 6px);
  --okm-sol-accent: var(--btn-primary-bg, var(--okm-primary, #0b5aa8));
}

#okm-solutions .uni-wrapper{
  padding-top: 2px;
}

#okm-solutions .uni-heading{
  margin-bottom: 10px;
}

#okm-solutions .uni-heading > span{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Intro text */
#okm-solutions p.text-muted{
  color: var(--okm-sol-muted) !important;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* Cards */
#okm-solutions .panel.panel-default{
  border: 1px solid var(--okm-sol-border) !important;
  border-radius: var(--okm-sol-radius) !important;
  background: var(--okm-sol-bg) !important;
  box-shadow: var(--okm-sol-shadow) !important;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Accent strip */
#okm-solutions .panel.panel-default::before{
  content:"";
  display:block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--okm-sol-accent),
    rgba(35,167,161,.95),
    rgba(107,191,58,.95)
  );
}

/* Hover */
@media (hover:hover){
  #okm-solutions .panel.panel-default:hover{
    transform: translateY(-2px);
    border-color: rgba(11, 90, 168, .22) !important;
    box-shadow: 0 22px 58px rgba(2, 6, 23, .14) !important;
  }
}

#okm-solutions .panel-body{
  padding: 16px 16px 14px !important;
}

/* Logo row */
#okm-solutions .pull-left img.img-responsive{
  display: inline-block !important;
  max-height: 28px !important;
  width: auto !important;
  vertical-align: middle;
  filter: saturate(1.02);
}

#okm-solutions .label{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#okm-solutions .label.label-primary{
  background: rgba(11, 90, 168, .10) !important;
  color: var(--btn-primary-bg, var(--okm-primary, #0b5aa8)) !important;
  border: 1px solid rgba(11, 90, 168, .18) !important;
}

#okm-solutions .label.label-success{
  background: rgba(107, 191, 58, .12) !important;
  color: #2f6b19 !important;
  border: 1px solid rgba(107, 191, 58, .22) !important;
}

/* Titles & text */
#okm-solutions h3{
  margin: 12px 0 8px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: var(--okm-sol-text) !important;
  letter-spacing: -0.01em;
}

#okm-solutions .panel-body > p.text-muted{
  margin: 0 0 12px !important;
}

/* CTA pair inside cards */
#okm-solutions .okm-cta-pair{
  margin: 10px 0 0 !important;
}

/* Bottom help bar */
#okm-solutions .panel.panel-default.okm-solutions-help,
#okm-solutions .panel.panel-default[data-okm-help="1"]{
  box-shadow: 0 14px 34px rgba(2, 6, 23, .08) !important;
}

#okm-solutions .panel.panel-default.okm-solutions-help::before,
#okm-solutions .panel.panel-default[data-okm-help="1"]::before{
  background: linear-gradient(90deg,
    rgba(11, 90, 168, .85),
    rgba(35,167,161,.85)
  );
}

#okm-solutions .panel.panel-default[ data-okm-help="1" ] .panel-body{
  padding: 14px 16px !important;
}

#okm-solutions .panel.panel-default[ data-okm-help="1" ] strong{
  font-weight: 900;
  color: var(--okm-sol-text);
}

#okm-solutions .panel.panel-default[ data-okm-help="1" ] .text-muted{
  margin: 0 !important;
}

/* Mobile polish */
@media (max-width: 767px){
  #okm-solutions .panel-body{
    padding: 14px 14px 12px !important;
  }
  #okm-solutions .pull-right{
    float: none !important;
  }
  #okm-solutions .pull-left{
    float: none !important;
  }
  #okm-solutions .label{
    display: inline-flex !important;
    margin-top: 10px !important;
  }
}

/* Hero: если CTA оформлен через okm-cta-pair — сохраняем hero-отступы */
.okm-home-hero__actions.okm-cta-pair{ margin: 0 0 18px; }

/* HERO: 4 CTA in one row (desktop), 2x2 (tablet/mobile). Scoped only to Hero. */
.okm-home-hero .okm-cta-pair.okm-cta-quad{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

/* make buttons fit tighter inside 4-col row */
.okm-home-hero .okm-cta-pair.okm-cta-quad a{
  padding: 10px 12px;
  font-size: 13px;
  min-height: 42px;
  width: 100%;
}

/* <= md: 2 columns (2 rows) */
@media (max-width: 991px){
  .okm-home-hero .okm-cta-pair.okm-cta-quad{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   OKNAMAG — CTA via UniShop2 tokens (no okm-btn-* in HTML)
   Scope: only #hero and #okm-solutions
   ========================================================= */
#hero .okm-cta-pair,
#okm-solutions .okm-cta-pair{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 0;
}

#hero .okm-cta-pair > a,
#hero .okm-cta-pair > button,
#okm-solutions .okm-cta-pair > a,
#okm-solutions .okm-cta-pair > button{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border-radius: var(--border-radius-base, 10px);
  border:1px solid var(--btn-default-border, rgba(0,0,0,.12));
  background: var(--btn-default-bg, #fff);
  color: var(--btn-default-color, #1f2d3d);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#hero .okm-cta-pair > a:hover,
#hero .okm-cta-pair > button:hover,
#okm-solutions .okm-cta-pair > a:hover,
#okm-solutions .okm-cta-pair > button:hover{
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* second CTA in each pair = primary */
#hero .okm-cta-pair > :nth-child(2),
#okm-solutions .okm-cta-pair > :nth-child(2){
  background: var(--btn-primary-bg, #0b62d6);
  border-color: var(--btn-primary-border, var(--btn-primary-bg, #0b62d6));
  color: var(--btn-primary-color, #fff);
}

#hero .okm-cta-pair > :nth-child(2):hover,
#okm-solutions .okm-cta-pair > :nth-child(2):hover{
  background: var(--btn-primary-bg-hover, var(--btn-primary-bg, #0b62d6));
  border-color: var(--btn-primary-border-hover, var(--btn-primary-border, var(--btn-primary-bg, #0b62d6)));
}

/* tighten panels in solutions without extra classes */
#okm-solutions .panel{ border-radius: var(--border-radius-base, 10px); }
#okm-solutions .panel-body > .clearfix{ margin-bottom:10px; }
#okm-solutions .panel-body h3{ margin-top:0; }

/* desktop: keep pairs in one line */
@media (min-width: 992px){
  #hero .okm-cta-pair{ flex-wrap:nowrap; }
}
/* =========================================================
   v7 PATCH — CTA containers without okm-btn-* classes
   Scope: only in Hero (#hero/#okm-hero) and Solutions (#okm-solutions).
   This lets you keep HTML minimal (container-only).
========================================================= */

#hero .okm-cta-actions,
#okm-hero .okm-cta-actions,
#okm-solutions .okm-cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

#hero .okm-cta-actions > a,
#hero .okm-cta-actions > button,
#okm-hero .okm-cta-actions > a,
#okm-hero .okm-cta-actions > button,
#okm-solutions .okm-cta-actions > a,
#okm-solutions .okm-cta-actions > button{
  appearance:none;
  -webkit-appearance:none;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 10px 14px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* primary = first child */
#hero .okm-cta-actions > :first-child,
#okm-hero .okm-cta-actions > :first-child,
#okm-solutions .okm-cta-actions > :first-child{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-b);
  color: var(--btn-primary-c);
  box-shadow: 0 10px 24px rgba(11,90,168,.18);
}
#hero .okm-cta-actions > :first-child:hover,
#okm-hero .okm-cta-actions > :first-child:hover,
#okm-solutions .okm-cta-actions > :first-child:hover{
  background: var(--btn-primary-bg-h);
  border-color: var(--btn-primary-b-h);
  color: var(--btn-primary-c-h);
}

/* outline = остальные */
#hero .okm-cta-actions > :not(:first-child),
#okm-hero .okm-cta-actions > :not(:first-child),
#okm-solutions .okm-cta-actions > :not(:first-child){
  background: var(--btn-outline-bg);
  border-color: var(--btn-outline-b);
  color: var(--btn-outline-c);
}
#hero .okm-cta-actions > :not(:first-child):hover,
#okm-hero .okm-cta-actions > :not(:first-child):hover,
#okm-solutions .okm-cta-actions > :not(:first-child):hover{
  background: var(--btn-outline-bg-h);
  border-color: var(--btn-outline-b-h);
  color: var(--btn-outline-c-h);
}

/* HERO: 4 CTA in one row on desktop, 2 rows on mobile (within #hero/#okm-hero) */
#hero .okm-cta-pair.okm-cta-quad,
#okm-hero .okm-cta-pair.okm-cta-quad{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:10px;
}
#hero .okm-cta-pair.okm-cta-quad > a,
#hero .okm-cta-pair.okm-cta-quad > button,
#okm-hero .okm-cta-pair.okm-cta-quad > a,
#okm-hero .okm-cta-pair.okm-cta-quad > button{
  width:100%;
  text-align:center;
  justify-content:center;
}
@media (max-width: 991px){
  #hero .okm-cta-pair.okm-cta-quad,
  #okm-hero .okm-cta-pair.okm-cta-quad{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile text render stability (fix occasional blur on "Каталог") */
@media (max-width: 991px){
  .menu-open, .menu__header-title, .menu__header-title-2{
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    transform: none !important;
    backface-visibility: hidden;
  }
}

/* =========================================================
   OKNAMAG — HERO (container scheme, no okm-btn-* in HTML)
   Требования:
   - CTA: 4 в ряд на desktop, 2×2 на mobile
   - "Популярные направления": кликабельные карточки/кнопки
   ========================================================= */
#okm-hero .okm-cta-actions{
  display:grid;
  gap:10px;
  margin: 14px 0 10px;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* mobile: 2×2 */
}
@media (min-width: 992px){
  #okm-hero .okm-cta-actions{
    grid-template-columns:repeat(4, minmax(0, 1fr)); /* desktop: 4 в ряд */
  }
}
#okm-hero .okm-cta-actions > a,
#okm-hero .okm-cta-actions > button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}

/* Популярные направления — делаем как карточки (только контейнер .okm-popular) */
#okm-hero .okm-popular{
  margin-top: 6px;
}
#okm-hero .okm-popular .row{
  margin-left:-8px;
  margin-right:-8px;
}
#okm-hero .okm-popular [class^="col-"],
#okm-hero .okm-popular [class*=" col-"]{
  padding-left:8px;
  padding-right:8px;
}
#okm-hero .okm-popular a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-color, #e7edf5);
  background: var(--card-bg, #fff);
  text-decoration:none;
  color: var(--text-color, #223);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  min-height: 64px;
}
#okm-hero .okm-popular a strong{
  display:block;
  font-weight:800;
  line-height:1.2;
  margin-bottom: 2px;
  color: var(--text-color, #223);
}
#okm-hero .okm-popular a span{
  display:block;
  font-size: 12.5px;
  line-height:1.3;
  color: var(--text-muted, #6b7280);
}
#okm-hero .okm-popular a:hover{
  border-color: var(--primary, #0b5aa8);
  box-shadow: 0 12px 24px rgba(11,90,168,.10);
  transform: translateY(-1px);
}
#okm-hero .okm-popular a:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,90,168,.18), 0 12px 24px rgba(11,90,168,.10);
}

/* Мини-CTA под hero (чат/контакты) */
#okm-hero .okm-cta-pair{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}
#okm-hero .okm-cta-pair > a,
#okm-hero .okm-cta-pair > button{
  appearance:none;
  -webkit-appearance:none;
  border: 1px solid var(--btn-outline-b);
  background: var(--btn-outline-bg);
  color: var(--btn-outline-c);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration:none;
  cursor:pointer;
}
#okm-hero .okm-cta-pair > :first-child{
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-b);
  color: var(--btn-primary-c);
}
#okm-hero .okm-cta-pair > a:hover,
#okm-hero .okm-cta-pair > button:hover{
  border-color: var(--btn-outline-b-h);
  background: var(--btn-outline-bg-h);
  color: var(--btn-outline-c-h);
}
#okm-hero .okm-cta-pair > :first-child:hover{
  background: var(--btn-primary-bg-h);
  border-color: var(--btn-primary-b-h);
  color: var(--btn-primary-c-h);
}

/* =========================================================
   FIX (2026-02) — Mobile HERO: CTA text overflow + missing vars
   Причина:
   - в hero CTA использовались несуществующие переменные UniShop2 (--btn-outline-* / --btn-primary-b*),
     из-за чего часть кнопок рендерилась как обычный текст;
   - white-space:nowrap на узких экранах выталкивал текст из ячеек grid → "плывёт".
   Правка безопасна: затрагивает только переменные и hero CTA.
========================================================= */

:root{
  /* primary (fallbacks for blocks that expect border/hover vars) */
  --btn-primary-b: var(--btn-primary-bg, var(--okm-primary, #0b5aa8));
  --btn-primary-bg-h: var(--btn-primary-bg-hover, var(--btn-primary-bg, var(--okm-primary-dark, #084781)));
  --btn-primary-b-h: var(--btn-primary-bg-h);
  --btn-primary-c-h: var(--btn-primary-c-hover, var(--btn-primary-c, #fff));

  /* outline (fallbacks) */
  --btn-outline-bg: #fff;
  --btn-outline-b: rgba(11,90,168,.38);
  --btn-outline-c: var(--okm-primary-dark, #084781);

  --btn-outline-bg-h: rgba(11,90,168,.06);
  --btn-outline-b-h: rgba(11,90,168,.55);
  --btn-outline-c-h: var(--okm-primary-dark, #084781);
}

/* HERO CTA: prevent overflow on narrow screens */
#okm-hero .okm-cta-actions > a,
#okm-hero .okm-cta-actions > button{
  min-width: 0; /* важно для grid */
}

@media (max-width: 480px){
  #okm-hero .okm-cta-actions > a,
  #okm-hero .okm-cta-actions > button{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    padding: 10px 10px;
  }
}

/* HERO mini CTA (чат/контакты): всегда как кнопки */
#okm-hero .okm-cta-pair > a,
#okm-hero .okm-cta-pair > button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 576px){
  #okm-hero .okm-cta-pair > a,
  #okm-hero .okm-cta-pair > button{
    width: 100%;
  }
}