.elementor-73 .elementor-element.elementor-element-647eb7c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-73 .elementor-element.elementor-element-647eb7c:not(.elementor-motion-effects-element-type-background), .elementor-73 .elementor-element.elementor-element-647eb7c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-73 .elementor-element.elementor-element-c12720e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-73 .elementor-element.elementor-element-d5b5c26.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-73 .elementor-element.elementor-element-d5b5c26 img{opacity:1;}.elementor-73 .elementor-element.elementor-element-504ca5d{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-73 .elementor-element.elementor-element-c12720e{--width:50%;}}@media(max-width:767px){.elementor-73 .elementor-element.elementor-element-647eb7c{--width:100%;--min-height:82px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--z-index:1000;}.elementor-73 .elementor-element.elementor-element-c12720e{--width:49%;--min-height:50px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:10px;--padding-bottom:10px;--padding-left:16px;--padding-right:16px;--z-index:1000;}.elementor-73 .elementor-element.elementor-element-d5b5c26{width:var( --container-widget-width, 0px );max-width:0px;--container-widget-width:0px;--container-widget-flex-grow:0;text-align:center;}.elementor-73 .elementor-element.elementor-element-d5b5c26.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-73 .elementor-element.elementor-element-d5b5c26 img{width:80px;max-width:1%;height:1px;}.elementor-73 .elementor-element.elementor-element-504ca5d{--width:49%;--min-height:50px;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}/* Start custom CSS for container, class: .elementor-element-647eb7c *//* ============================================
   OKKO MOBILE HEADER — FINAL 2025
   ============================================ */

/* ===== БАЗА: ПРОЗОРИЙ ХЕДЕР ===== */
.elementor-73 .elementor-element.elementor-element-647eb7c{
  background-color: transparent !important;
  color: #fff;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}

/* ===== ПРИ ПРОКРУТЦІ (body.scrolled) ===== */
body.scrolled .elementor-73 .elementor-element.elementor-element-647eb7c.elementor-sticky--effects,
body.scrolled .elementor-73 .elementor-element.elementor-element-647eb7c.elementor-sticky--active{
  background-color: #000 !important;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* ===== У РЕДАКТОРІ — ЗАВЖДИ ПРОЗОРНИЙ ===== */
.elementor-editor-active .elementor-73 .elementor-element.elementor-element-647eb7c.elementor-sticky--effects,
.elementor-editor-active .elementor-73 .elementor-element.elementor-element-647eb7c.elementor-sticky--active{
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ===== ЛОГО (адаптив) ===== */
.elementor-73 .elementor-element.elementor-element-647eb7c .elementor-widget-site-logo,
.elementor-73 .elementor-element.elementor-element-647eb7c .elementor-widget-image{ flex:0 0 auto; }

.elementor-73 .elementor-element.elementor-element-647eb7c .elementor-widget-site-logo img,
.elementor-73 .elementor-element.elementor-element-647eb7c .elementor-widget-image img,
.elementor-73 .elementor-element.elementor-element-647eb7c .custom-logo{
  display:block !important;
  height:auto !important;
  width:auto !important;
  max-height:clamp(36px,7vw,56px) !important;
  max-width:none !important;
}

/* =============================
   БУРГЕР-МЕНЮ (анімований)
   ============================= */
.elementor-73 .elementor-element.elementor-element-647eb7c .okko-menu{ position:relative; }

.elementor-73 .elementor-element.elementor-element-647eb7c .burger{
  --size: clamp(26px, 6vw, 32px);
  width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; cursor:pointer; color:#fff;
  background:transparent; border:none; padding:0;
  z-index:10000; /* над overlay */
}

/* Лінії бургера */
.elementor-73 .elementor-element.elementor-element-647eb7c .burger span,
.elementor-73 .elementor-element.elementor-element-647eb7c .burger span::before,
.elementor-73 .elementor-element.elementor-element-647eb7c .burger span::after{
  position:absolute; left:0; right:0; height:2px;
  background:currentColor; content:""; border-radius:1px;
  transition: transform .35s ease, background .25s ease, top .35s ease, bottom .35s ease;
}
.elementor-73 .elementor-element.elementor-element-647eb7c .burger span{ top:50%; transform:translateY(-50%); }
.elementor-73 .elementor-element.elementor-element-647eb7c .burger span::before{ top:-8px; }
.elementor-73 .elementor-element.elementor-element-647eb7c .burger span::after{ bottom:-8px; }

/* Стан відкрито: бургер → X */
html.menu-open .elementor-73 .elementor-element.elementor-element-647eb7c .burger span{ background:transparent; }
html.menu-open .elementor-73 .elementor-element.elementor-element-647eb7c .burger span::before{ top:0; transform:rotate(45deg); }
html.menu-open .elementor-73 .elementor-element.elementor-element-647eb7c .burger span::after{  bottom:0; transform:rotate(-45deg); }

/* ===== Overlay (як був) — ок ===== */
.elementor-73 .elementor-element.elementor-element-647eb7c .overlay{
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
html.menu-open .elementor-73 .elementor-element.elementor-element-647eb7c .overlay{ opacity: 1; pointer-events: auto; }

/* ===== OFF-CANVAS: праворуч, без overflow у Safari ===== */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;

  /* КЛЮЧОВЕ: не використовуємо 100vw, не розширюємо сторінку */
  width: 100%;
  max-width: min(88vw, 420px);
  box-sizing: border-box;

  background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(28px, 6vw, 48px) clamp(16px, 5vw, 24px);
  gap: clamp(20px, 4vw, 28px);
  z-index: 9991;

  /* Цілком за екраном у закритому стані */
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;

  /* Вертикальний скрол всередині панелі */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Ізоляція — щоб панель не впливала на ширину сторінки */
  contain: paint;
}

/* Відкрито */
html.menu-open .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav{
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Захист від переповнення всередині меню */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav, .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav *{
  max-width: 100%;
  box-sizing: border-box;
}
/* Глушимо будь-які інлайнові width:100vw усередині меню */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav [style*="100vw"]{ width: 100% !important; }

/* ============================================
   ВНУТРІШНІ ЕЛЕМЕНТИ МЕНЮ
   ============================================ */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul{ list-style:none; margin:0; padding:0; }

.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.main li{ text-align:center; }
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.main li a{
  display:inline-block; color:#fff; text-decoration:none;
  padding:12px 6px;
  font-size:clamp(20px,4vw,36px);
  line-height:1.2; letter-spacing:.02em;
  transition:opacity .2s ease, transform .2s ease;
}
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.main li a:active{ transform:scale(.97); }

/* Філософія */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .about{ max-width:32ch; text-align:center; opacity:.94; }
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .about p{
  margin:0; font-size:clamp(13px,3.5vw,15px);
  line-height:1.6; letter-spacing:.01em; color:#fff;
}

/* Соц.іконки */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .social{
  display:flex; gap:clamp(12px,3vw,18px); align-items:center; justify-content:center;
}
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .social a{
  width:clamp(32px,7vw,42px); height:clamp(32px,7vw,42px);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.08);
  transition:background .2s ease, transform .2s ease;
}
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .social a:active{ transform:scale(.96); }

/* Нижнє підменю */
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.sub li{ text-align:center; }
.elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.sub li a{
  display:inline-block; color:#fff; opacity:.8; text-decoration:none;
  padding:6px 6px; font-size:clamp(12px,2.8vw,14px); line-height:1.4;
}

/* ============================================
   АДАПТИВ
   ============================================ */
@media (max-width:350px){
  .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.main li a{ font-size:18px; }
  .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .about p{ font-size:12.5px; }
  .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav{ padding:24px 12px; }
}
@media (min-width:480px) and (max-width:620px){
  .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav ul.main li a{ font-size:28px; }
  .elementor-73 .elementor-element.elementor-element-647eb7c #okko-nav .about p{ font-size:14.5px; }
}/* End custom CSS */