/*
Theme Name: Gonchar Deco
Theme URI: https://example.com/hoset
Author: You
Author URI: https://example.com
Description: Тема для фронтенда Gonchar Deco (главная + сплиты шапка/подвал)
Version: 1.0.0
Text Domain: hoset
*/
:root{
  --bg:#171e31;
  --white:#ffffff;
  --muted:#c7d6ea;
  --green:#2ED573;
  --green-2:#1bc766;
  --nav:#223247;
  --glass:rgba(15,26,38,.55);
  --stroke:rgba(255,255,255,.12);
  --radius:18px;
  --max:1200px;
  --panel:#121c28;
  --ink:#EAF2FF;
  --line:rgba(255,255,255,.14);
}
.hero::before{background:url("img/banner.jpg") center/cover no-repeat;opacity:.55}
.opt-band .opt-bg{background:url("img/sec-cont.jpg") center right/cover no-repeat}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Montserrat!important;background:var(--bg);color:var(--white);line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:var(--max);width:100%;margin:0 auto;padding:0 24px}

/* HEADER */
.header{position:fixed;inset-inline:0;top:0;z-index:50;transition:.3s}
.header.scrolled{backdrop-filter:blur(6px) saturate(140%);background:rgba(10,17,26,.55)}
.row-top .container{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:69px}
.badge{font-size:12px;color:#e8f2ff;font-weight:500;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:12px}
.social-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.3s}
.social-icon.whatsapp{background:#25d366}
.social-icon.telegram{background:#0888cc}
.social-icon.whatsapp:hover{background:#1da851}
.social-icon.telegram:hover{background:#006ba3}
.circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--stroke);font-weight:900}
.h-phone{display:flex;align-items:center;gap:10px}
.phone{display:flex;align-items:center;gap:10px}
.h-phone b{font-size:20px;font-weight:600}
.h-phone small{display:block;font-size:12px;color:#F8B179}
.btn{height:46px;font-size:12px;font-family:Montserrat;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#161E31;border-radius:999px;font-weight:800;letter-spacing:.3px;box-shadow:0 10px 25px rgba(46,213,115,.35);transition:.2s}
.btn:hover{background:var(--green-2);transform:translateY(-1px)}
.row-nav{padding:10px 0}
.nav ul{display:flex;gap:36px;justify-content:space-between;align-items:center}
.nav a{text-transform: uppercase;font-weight:500;font-size:14px;letter-spacing:.6px;color:#d8e6f9}
.nav a:hover{color:#fff}
/* Сбрасываем маркеры у меню */
.nav .menu,
.menu,
.off-nav .menu,
.ft-nav .menu {
  list-style: none; 
  margin: 0;
  padding: 0;
}

/* На всякий случай убираем маркеры у li (в т.ч. Safari) */
.nav .menu li,
.menu li {
  list-style: none;
}
.nav .menu li::marker,
.menu li::marker {
  content: none;
}

/* если нужно — раскладываем пункты в ряд */
.nav .menu {
  display: flex;
  gap: 32px;}


/* HERO */
.hero{position:relative;isolation:isolate;min-height:80vh;background:radial-gradient(1200px 400px at 70% 100%,rgba(255,221,150,.10),transparent 60%),#0c1622;display:grid;align-items:start;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url("img/banner.jpg") center/cover no-repeat;opacity:.55;z-index:-1;transform:scale(1.02)}
.hero-inner{padding-top:160px;padding-bottom:48px;z-index: 99;}
.hero .title{margin-bottom: 100px;}
.title{max-width:980px;margin-bottom:26px;font-family:Montserrat;font-weight:500;font-size:40px;line-height:1.4;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-bottom{display:flex;flex-direction: row;gap:28px;align-items:stretch}
.left-card{display:flex;align-items:flex-end;width: 50%}
.left-card .btn{font-size:12px;font-weight:600;height:52px;padding:0 22px;border-radius:100px;color:#161E31}
.bullets{display:grid;gap:50px;position:relative;width: 50%}
.bullet{font-size:20px;display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.12);justify-items:end;justify-content: flex-end;flex-direction: row-reverse;}
.bullet:last-child{border-bottom:none}
.bullet h4{margin:0;font-weight:600;text-align:right}
.bullet p{margin:2px 0 0;color:#d4e3f6;text-align:right;font-weight:300}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);justify-self:end}
/* Мобилка: буллет слева, весь текст и строки выравниваем по левому краю */
@media (max-width: 767px) {
	.hero-inner{padding-top: 120px;}
	.hero-bottom{flex-direction: column-reverse;gap:20px}
	.left-card, .bullets{width: 100%}
  .hero .bullets{
    justify-items: start;     /* было end */
    text-align: left;
    gap: 20px;
  }

  .hero .bullet{
    width: 100%;              /* строка на всю ширину */
	  font-size: 16px;
    display: flex;            /* оставляем flex */
    flex-direction: row;      /* точка -> текст */
    justify-content: flex-start; /* было flex-end */
    align-items: flex-start;  /* если текст в 2+ строк – выравниваем по верху точки */
    gap: 10px;                /* расстояние между точкой и текстом */
    text-align: left;
	  align-items: center;
  }

  .hero .bullet .dot{
    order: -1;                /* гарантированно ставим точку первой */
    margin: 6px 0 0 0;        /* лёгкая подстройка по вертикали (по желанию) */
  }
	.hero .bullet h4,
  .hero .bullet p{
    text-align: left !important;  /* перекрываем глобальные center */
    margin: 0;                     /* на всякий случай убираем авто-отступы */
    width: 100%;
  }

  /* если есть внутренний div-обёртка для текста — тоже влево */
  .hero .bullet > div{
    text-align: left !important;
  }
	.left-card .btn{width: 100%}
	.catalog h2{font-size: 28px}
}

@media (max-width:1100px){.title{font-size:44px}}
@media (max-width:720px){.brand img{height:34px}.badge{display:none}.row-top{gap:10px}.top-actions .btn{display:none}.h-phone{display:none}.nav{gap:18px;overflow:auto}.title{font-size:28px}}

/* CATALOG */
.catalog{padding:70px 0}
.catalog h2{text-align:center;font-weight:800;font-size:34px;line-height:1.25;margin:0 0 28px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product{border-radius:18px;overflow:hidden;background:#1a2736;border:1px solid #253344;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.product__media{position:relative;overflow:hidden}
.product__media img{width:100%;height:383px;object-fit:cover;border-top-left-radius:18px;border-top-right-radius:18px}
.product__badge{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.45);color:#fff;padding:5px 12px;border-radius:999px;font-weight:800;letter-spacing:.2px}
.product__body{padding:18px}
.product__title{margin:0 0 10px;font-weight:700;font-size:16px}
.product__specs{list-style:none;margin:0 0 14px;padding:0;color:#cfe0f1}
.product__specs li{margin:4px 0}
.product__specs b{font-weight:800;color:#e6f1ff}
.product__foot{display:flex;align-items:center;justify-content:space-between}
.product__price{display:flex;align-items:baseline;gap:6px}
.product__price .from{color:#a3b6ca;font-weight:600}
.product__price .val{font-weight:800;font-size:18px}
.btn-pill{padding:11px 18px;border-radius:999px;font-weight:700;font-size:12px;background:linear-gradient(90deg,var(--green),var(--green-2));color:#161E31;box-shadow:0 10px 25px rgba(46,213,115,.35);transition:.2s;letter-spacing:.3px;text-transform: uppercase;}
.btn-pill:hover{transform:translateY(-1px);filter:saturate(1.05)}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.product__media img{height:383px;}.cards{grid-template-columns:1fr}.product__specs{font-size: 12px;display: flex;flex-wrap: wrap;gap: 10px;}.product__specs li{width: 48%;display: flex;flex-direction:column;}}

/* OPT BAND */
.opt-band{position:relative;padding:90px 0 120px;color:#EAF2FF;background:#161E31;overflow:hidden}
.opt-band .opt-bg{position:absolute;inset:0;background:url('img/sec-cont.jpg') center right/cover no-repeat;filter:brightness(.95)}
.opt-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,30,49,.80) 32.87%,rgba(0,0,0,0) 73.05%);pointer-events:none}
.opt-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg, rgb(22 30 49 / 41%) 0%, #161E31 100%);pointer-events:none}
.opt-grid{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 20px}
.opt-title{margin:0 0 18px;font-weight:800;font-size:46px;line-height:1.25;letter-spacing:.2px}
.opt-title .accent{color:#21D06E;font-weight:800}
.opt-title .accent-2{color:#33E082;font-weight:800}
.opt-sub{margin:0 0 26px;color:#B5C6DA;font-size:16px}
.opt-form{display:grid;grid-template-columns:1fr 1fr 240px;gap:14px;align-items:end;max-width:900px}
.opt-field{display:flex;flex-direction:column;gap:8px}
.opt-label{font-size:12px;color:#B9C9DC}
.opt-input{height:56px;padding:0 22px;border-radius:999px;outline:none;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.18)}
.opt-input::placeholder{color:rgba(255,255,255,.75)}
.btn-send{height:56px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.3px;background:linear-gradient(90deg,#23D06F,#31E07F);color:#0E1725;border:0;cursor:pointer;box-shadow:0 16px 40px rgba(49,224,127,.35);transition:transform .15s ease,filter .15s ease}
.btn-send:hover{transform:translateY(-1px);filter:saturate(1.05)}
@media (max-width:900px){.opt-title{font-size:28px}.opt-form{grid-template-columns:1fr;max-width:none}}

/* TABS */
.benefits{padding:70px 0}
.benefits .title{margin:0 0 22px;font-weight:600;font-size:40px;line-height:1.4;text-transform: inherit;max-width:100%;}
.tabs{display:flex;gap:14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{width: 100%;white-space:nowrap;padding:25px 12px;border-radius:999px;cursor:pointer;border:1px solid #202C47;background:transparent;color:#cfe0f1;transition:.15s ease;font-weight:400}
.tab[aria-selected="true"]{background:transparent;color:#12C868}
.tabpanels{margin-top:16px}
.tabpanel{display:none}
.tabpanel[aria-hidden="false"]{display:block}
.photos{margin-bottom:16px}
.photos .swiper-slide{border-radius:18px;overflow:hidden;background:#121c28;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.photos .swiper-slide img{width:100%;height:170px;object-fit:cover}
.photos .swiper-pagination{margin-top:8px;position:static}
.photos .swiper-pagination-bullet{background:#8aa0b6;opacity:1}
.photos .swiper-pagination-bullet-active{background:#ffffff}
.btext{color:#cfe0f1;max-width:980px}
.btext b{display:block;margin:12px 0 6px}
.btext ul{margin:6px 0 0 18px}
.btext li{margin:4px 0}
@media (min-width:992px){.tabs{overflow:visible}.photos .swiper{overflow:visible}.photos .swiper-pagination{display:none}}
/* Кнопки вкладок подсвечаем по aria */
.benefits .tabs .tab[aria-selected="true"] {
  /* ваш активный стиль; пример: */
  box-shadow: 0 0 0 1px #12C868 inset;
}
@media (max-width:767px){
.tabs{font-size: 12px;}
.tab{padding: 20px;}
.benefits .title{font-size: 28px}
.btext{font-size: 12px;}
}
/* Скрываем неактивные панели корректно */
.benefits .tabpanels .tabpanel {
  display: none;
}
.benefits .tabpanels .tabpanel.is-active {
  display: block;
}

/* Изображения в слайдере не растягиваем */
.benefits .photosw .swiper-slide img {
  width: 100%;
  height: 248px;
  display: block;
  object-fit: cover; /* можно убрать, если не нужно кадрирование */
}

/* PARTNERS */
.partners-sec{padding:70px 0;background:#FFFFFF0D}
.partners-sec .title{max-width: 100%;margin:0 0 40px;font-weight:600;font-size:40px;line-height:1.25;text-align:center;text-transform: inherit;}
.partners-sec .subtitle{text-align:center;color:#fff;margin:0 0 22px;font-size:20px;font-weight: 400}
.partners-swiper{max-width:980px;margin:0 auto}
.logo-card{height:120px;border-radius:18px;background:#FFFFFF0D;display:flex;align-items:center;justify-content:center}
.logo-card img{width:auto;filter:brightness(100%)}
.partners-swiper .swiper-pagination{position:static;margin-top:14px}
.partners-swiper .swiper-pagination-bullet{background:#8aa0b6;opacity:1}
.partners-swiper .swiper-pagination-bullet-active{background:#ffffff}
@media (max-width: 767px){
.partners-sec .title{font-size: 28px;}
.partners-sec .subtitle{font-size: 16px}
.logo-card img{max-width: 72px}
}
@media (max-width:480px){.logo-card{height:110px}}

/* REVIEWS & CERTS (навигация-стрелки) */
.certs-sec,.reviews{padding:60px 0;color:var(--ink)}
.caro-nav--right{position:relative;right:0px;top:0px;display:flex;gap:10px;z-index:5;justify-content: flex-end;margin-bottom: 20px;}
.nav-circ{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);transition:background .15s ease,transform .15s ease}
.nav-circ:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.nav-circ::before{content:"";width:8px;height:8px;border-right:2px solid #EAF2FF;border-bottom:2px solid #EAF2FF;transform:rotate(-45deg)}
.nav-circ.is-prev::before{transform:rotate(135deg)}
.reviews-swiper,.certs-swiper{max-width:1180px;margin:0 auto;padding:0 20px}
.reviews-swiper .swiper-slide,.certs-swiper .swiper-slide{padding:0}
.rev-card,.cert-card{background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.rev-card img{width:100%;height:505px;object-fit:cover}
.cert-card img{width:100%;height:230px;object-fit:cover}
.reviews-swiper .swiper-pagination,.certs-swiper .swiper-pagination{position:static;margin-top:10px}
.reviews-swiper .swiper-pagination-bullet,.certs-swiper .swiper-pagination-bullet{background:#8aa0b6;opacity:1}
.reviews-swiper .swiper-pagination-bullet-active,.certs-swiper .swiper-pagination-bullet-active{background:#ffffff}
@media (max-width:1024px){.rev-card img{height:460px}}
@media (max-width:768px){
.rev-card img{height:auto}
.caro-nav--right{display: none}
.sec-sub{margin-bottom: 20px!important;}
.reviews .sec-title{font-size:28px;margin-bottom: 20px!important}
.reviews .sec-sub{font-size:16px}
.reviews .swiper-horizontal{padding: 0 20px}
.certs-sec .sec-title{font-size: 28px;text-align: center;}
.certs-sec .container{flex-direction: column;}
.certs-sec .swiper-horizontal{padding: 0 20px}
}
.certs-sec .container{display: flex;justify-content: space-between;align-items: center;}
.certs-sec .container,.reviews .container{position:relative;max-width:1180px;margin:0 auto;padding:0 20px}
.sec-title{color: #fff;margin:0 0 40px;font-size: 40px; font-weight: 600; text-align: center}
.sec-sub{font-size: 20px; font-weight: 400;margin:0 0 12px;color:#fff;text-align:center}
.certs-sec .sec-title{margin-bottom: 20px}
/* ===== Simple Image Lightbox ===== */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lb-overlay.is-open { display: flex; }

.lb-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  border-radius: 10px;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 1;
}
.lb-overlay.is-opening img { transform: scale(.98); opacity: .98; }
.lb-overlay.is-open img { transform: scale(1); opacity: 1; }

@media (max-width: 480px) {
  .lb-overlay { padding: 12px; }
}
/* ===== Reviews: hover overlay + magnifier icon ===== */
.rev-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;           /* под дизайн */
  isolation: isolate;
}

.rev-card .rev-img {
  display: block;
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
}

/* затемнение при наведении */
.rev-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;          /* клики проходят к изображению */
  z-index: 1;
}

/* иконка лупы по центру */
.rev-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.5));
  background: no-repeat center / 62% 62%;
  /* SVG-лупа через data URI (белая) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='11' cy='11' r='7'/>\
<line x1='21' y1='21' x2='16.65' y2='16.65'/>\
</svg>");
}

/* ховеры */
.rev-card:hover::after { opacity: 1; }
.rev-card:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rev-card:hover .rev-img { transform: scale(1.02); }

/* чуть мягче на мобильном — без сильного затемнения/масштаба */
@media (hover:none) {
  .rev-card::after { background: rgba(0,0,0,.12); }
  .rev-card:hover .rev-img { transform: none; }
}
/* ===== Simple Image Lightbox ===== */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lb-overlay.is-open { display: flex; }

.lb-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  transition: transform .25s ease, opacity .25s ease; /* чуть дольше */
  transform: scale(1);
  opacity: 1;
}

/* стартовое состояние (слегка уменьшено и прозрачно) */
.lb-overlay.is-opening img {
  transform: scale(.94);
  opacity: .0;
}

/* конечное (увеличилось и проявилось) */
.lb-overlay.is-open img {
  transform: scale(1);
  opacity: 1;
}


/* CONTACTS */
.contacts-sec{padding:70px 0;color:var(--ink);background:#FFFFFF0D}
.contacts-sec .container{max-width:1180px;margin:0 auto;padding:0 20px}
.contacts-title{margin:0 0 18px;font-size:40px;font-weight:600}
.contacts-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
.contacts-left{display:flex;flex-direction:column;justify-content:space-between}
.c-row{display:flex;flex-direction:column;gap:14px;margin:10px 0}
.c-label{color:#FFFFFFB2;font-size:12px}
.c-value{font-size:16px;color:#FFF}
.c-value a{color:inherit}
.c-value b{font-weight:600}
.contacts-icons{display:flex;gap:10px;margin-top:14px}
.c-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#EAF2FF;background:rgba(255,255,255,.06);border:1px solid var(--line);transition:background .15s ease,transform .15s ease}
.c-ico:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.contacts-map img,.contacts-map iframe{display:block;width:100%;height:320px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.30)}
@media (max-width:900px){.contacts-grid{grid-template-columns:1fr}.contacts-map img,.contacts-map iframe{height:260px}}
@media (max-width:520px){.contacts-title{font-size:28px}.c-row{gap:6px}}
.cont-l{display:grid;grid-template-columns:1fr 1fr;justify-items:start}
@media (max-width: 767px){
.cont-l{gap: 10px}
.c-value{font-size: 14px}
}

/* FOOTER */
.site-footer{color:var(--ink);background:#161E31}
.footer-top{background:#161E31;border-bottom:1px solid #FFFFFF1A;padding:20px 0}
.ft-nav ul{display:flex;justify-content:space-between;gap:24px;padding:14px 0;text-transform:uppercase;font-weight:500;font-size:14px;letter-spacing:.04em}
.ft-nav a{color:#FFFFFF}
.footer-main{padding:40px 0}
.f-grid{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
.f-brand{display:flex;flex-direction:column;align-items:flex-start;gap:80px}
.f-logo{height:72px}
.f-socials{display:flex;gap:12px}
.s-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#EAF2FF;border:1px solid var(--line);transition:background .15s ease,transform .15s ease}
.s-ico:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.f-row{display:flex;flex-direction:column;gap:10px}
.f-col{display:flex;flex-direction:column;row-gap:40px}
.f-label{color:#FFFFFFB2;font-size:12px}
.f-value{font-size:16px;color:#FFF}
.f-value a{color:inherit}
.f-value b{font-weight:600}
.ft-nav-mobile{width: 100%}
.ft-nav-mobile ul{display:none}
@media (max-width:860px){.ft-nav{display:none}.f-grid{grid-template-columns:1fr}.f-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-brand{gap: 20px;}.ft-nav-mobile li:nth-child(odd){margin-right: 15px;}.f-cols{grid-template-columns: 1fr 1fr;}.ft-nav-mobile ul{display:grid;grid-template-columns:1fr 1fr;gap:0px;margin-top:8px;border-top:1px solid var(--line)}.ft-nav-mobile a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:#cfdcf0;text-transform:uppercase;font-weight:700;font-size:12px;letter-spacing:.04em}.ft-nav-mobile a:nth-child(odd){padding-right:10px;}.ft-nav-mobile a:nth-child(even){padding-left:10px}}
@media (max-width: 560px){
.f-logo{height: 48px}
.f-value{font-size: 14px}
} 
.footer-bottom{background:#FFFFFF0D}
.f-bottom{display:flex;justify-content: space-between;align-items:center;gap:16px;padding:12px 0}
.f-copy{font-size:14px;color:#FFFFFFB2}
.f-right{display:flex;gap:24px;justify-content:flex-end}
.f-link{color:#FFFFFFB2;font-size:14px}
.f-link:hover{color:#fff}
@media (max-width:560px){.f-bottom{flex-direction: column;justify-items:center;row-gap:8px;text-align:center}.f-right{justify-content:center}}
/* ==== ДОБАВЛЕНО: мобильный хедер ==== */

/* иконка телефона видна только на мобайле */
.phone-ico{display:none;background:#fff}
.phone-ico:hover{background:#2373d1}

/* бургер (по умолчанию скрыт) */
.burger{
  display:none; 
	background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  width: 32px;                  
  height: 32px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;                      
  cursor: pointer;
	    margin-left: 20px;
}
/* Базовая линия */
.burger span{
  display:block; height:2px; background:#fff; border-radius:2px;
  width:28px;                        /* ширина средней линии по умолчанию */
  transform-origin: right center;    /* пригодится, если будете анимировать */
}

/* Индивидуальные ширины */
.burger span:nth-child(1){ width:20px; }  /* верхняя — короче */
.burger span:nth-child(2){ width:28px; }  /* средняя — длиннее */
.burger span:nth-child(3){ width:16px; }  /* нижняя — средняя длина */

/* (опционально) чуть увеличиваем на очень маленьких экранах */
@media (max-width: 380px){
  .burger span{ width:26px; }
  .burger span:nth-child(1){ width:18px; }
  .burger span:nth-child(3){ width:22px; }
}
.burger:hover span,
.burger:active span{
  opacity: .8;
}
.burger:focus-visible{
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}

/* offcanvas контейнер */
.offcanvas{position:fixed; inset:0; pointer-events:none; z-index:80}
.offcanvas__backdrop{
  position:absolute; inset:0; background:rgba(10,17,26,.5); opacity:0; transition:.2s;
}
.offcanvas__panel{
  position:absolute; top:0; right:-100%; width:min(420px,86vw); height:100%;
  background:#111b29; box-shadow: -24px 0 60px rgba(0,0,0,.45);
  padding:20px; transition: right .25s ease; display:flex; flex-direction:column; gap:18px;z-index: 9;
}
.offcanvas[aria-hidden="false"]{pointer-events:auto}
.offcanvas[aria-hidden="false"] .offcanvas__panel{ right:0 }
.offcanvas[aria-hidden="false"] .offcanvas__backdrop{ opacity:1 }

.offcanvas__close{
  align-self:flex-end; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--stroke); cursor:pointer; position:relative;
}
.offcanvas__close::before, .offcanvas__close::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; background:#fff; border-radius:2px;
}
.offcanvas__close::before{ transform:translate(-50%,-50%) rotate(45deg) }
.offcanvas__close::after{ transform:translate(-50%,-50%) rotate(-45deg) }

.off-nav{display:flex; flex-direction:column}
.off-nav a{
  display:block; padding:18px 0; color:#e9f2ff; border-bottom:1px solid rgba(255,255,255,.08);
  text-transform:uppercase; font-weight:700; letter-spacing:.04em;
}

.off-phone__num{display:block; color:#fff; font-size:16px; margin-top:6px}
.off-phone__sub{color:#F8B179; font-size:12px}
.off-socials{display:flex; gap:10px}
.off-btn{align-self:flex-start}

/* адаптив поведения шапки под макет */
@media (max-width:720px){
  .brand img{height:48px}
  .badge{display:none}
  .top-actions{gap:8px}
  .top-actions .btn{display:none}       /* скрываем CTA в шапке */
  .h-phone{display:none}                   /* скрываем полный номер */
  .phone-ico{display:flex}               /* показываем иконку телефона */
  .burger{display:flex;align-items: flex-start;}                  /* показываем бургер */
  .row-nav{display:none}                 /* горизонтальное меню скрываем */
  .off-nav a{font-size: 12px;font-weight: 500}
}
/* Product page */
.product-page, .page-default{padding-top:24px}
.product-page .opt-band{margin-top: 80px}
.breadcrumbs{font-size: 14px;color:#9fb0c3;margin:6px 0 18px;display:flex;gap:.5rem;align-items:center}
.breadcrumbs a{color:#fff;text-decoration:none}
.product-grid{display:flex;gap:32px}
@media (max-width:1024px){.product-specs li{font-size: 14px!important}.product-title{font-size: 28px!important}.breadcrumbs{font-size: 12px;}.product-grid{flex-direction: column;}.product-gallery{width: 100%!important;}.product-info{width: 100%!important}
.product-price .label{font-size: 16px!important}
.product-price .value{font-size: 20px!important}
.product-cta .hint{font-size: 12px!important}
.p-price-form{flex-direction: column;}
.product-video h2{font-size: 28px!important}}

.product-gallery{width: 50%;}
/* Product Gallery - Виправлена версія */

/* Основне зображення */
.product-main {
  margin: 0;
  background: #0f1523;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.product-main img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .25s ease;
}

.product-main img.fade-out {
  opacity: .2;
}

/* Контейнер мініатюр */
.product-thumbs {
  position: relative;
  margin-top: 14px;
}

.product-thumbs.has-slider {
  overflow: hidden;
  padding: 0;
}

/* Swiper wrapper - без gap, бо spaceBetween робить gap */
.product-thumbs .swiper-wrapper {
  display: flex;
}

/* Слайди - Swiper сам встановить ширину */
.product-thumbs .swiper-slide {
  flex-shrink: 0;
  height: 132px;
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

/* На мобільному зменшуємо висоту */
@media (max-width: 767px) {
  .product-thumbs .swiper-slide {
    height: 96px;
  }
}

/* Кнопки мініатюр */
.product-thumbs .thumb {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  position: relative;
  transition: all 0.2s ease;
}

.product-thumbs .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Активна мініатюра */
.product-thumbs .thumb.is-active {
  box-shadow: 0 0 0 2px #ffffff inset;
  border-radius: 14px;
}

.product-thumbs .thumb:hover {
  opacity: 0.85;
}

/* Кнопки навігації слайдера */
.product-thumbs .thumbs-prev,
.product-thumbs .thumbs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #fff;
  z-index: 10;
  transition: transform .18s ease, opacity .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.product-thumbs .thumbs-prev:active,
.product-thumbs .thumbs-next:active {
  transform: translateY(-50%) scale(.98);
}

.product-thumbs .thumbs-prev {
  left: 0px;
}

.product-thumbs .thumbs-next {
  right: 0px;
}

/* Іконки стрілок */
.product-thumbs .thumbs-prev::before,
.product-thumbs .thumbs-next::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #032315;
  border-top: 2px solid #032315;
  transform: translate(-50%, -50%) rotate(45deg);
}

.product-thumbs .thumbs-prev::before {
  transform: translate(-50%, -50%) rotate(225deg);
}

/* Приховання кнопок на краях */
.product-thumbs.is-begin .thumbs-prev {
  opacity: 0;
  pointer-events: none;
}

.product-thumbs.is-end .thumbs-next {
  opacity: 0;
  pointer-events: none;
}

/* Варіант без слайдера (якщо мініатюр менше 4) */
.product-thumbs.no-swiper .thumbs-row {
  display: flex;
  gap: 12px;
}

.product-thumbs.no-swiper .thumb-item {
  flex: 1 1 0;
}

.product-thumbs.no-swiper .thumb {
  height: 132px;
}

@media (max-width: 1024px) {
  .product-thumbs.no-swiper .thumb {
    height: 116px;
  }
}

@media (max-width: 680px) {
  .product-thumbs.no-swiper .thumb {
    height: 96px;
  }
}
.product-info{width: 50%}
.product-title{font-size:40px;font-weight: 600;line-height:1.25;margin:.25rem 0 2rem}
.product-specs{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:15px}
.product-specs li{font-size: 16px;display:flex;gap:10px;align-items:flex-start;color:#cdd7e3}
.product-specs b{color:#fff}
.product-specs .ok{
  width:12px;height:12px;border-radius:50%;background:#18c263;display:inline-block;margin-top:6px;
  box-shadow:0 0 0 4px rgba(24,194,99,.15);
}

.product-video .sep {width: 100%;height: 1px; background: #FFFFFF26;margin: 24px 0 40px;}
.product-price{display:flex;align-items:center;justify-content: space-between;gap:12px;margin:16px 0 10px;padding: 24px;border-radius: 16px;background: #FFFFFF0D;}
.product-price .label{font-size: 20px; font-weight: 400;color:#FFFFFF}
.product-price .value{font-size: 26px; font-weight: 600;color:#FFFFFF}
.product-price .value::before{content:"";}

.product-cta{background: #FFFFFF0D;padding: 24px;border-radius: 16px;}
.product-cta label{color: white;font-size: 12px; font-weight: 600;}
.product-cta .sep{width: 100%;height: 1px;background: #FFFFFF26;margin: 24px 0;}
.product-cta .hint{color:#FFFFFF;font-size: 14px; font-weight: 400;margin: 0;}
.product-cta .hint span{font-weight: 600}
.p-price-form{display:flex;gap:10px}
.p-price-form .phone{flex:1;border-radius:100px;border:1px solid #fff;background:#FFFFFF1F;backdrop-filter: blur(4px);padding:18px;color:#dbe6ff}
.p-price-form .btn-pill{cursor: pointer;padding: 18px 40px;border-radius: 100px;background: #1ddb6f;color: #161E31;border: 0;font-size: 12px;line-height: 1;font-weight: 600;}

.product-desc{margin:50px 0 60px;color:#cdd7e3}
.product-desc p{margin:0 0 10px}
@media (max-width: 767px){
.product-desc{margin:20px 0 30px;}
}

.product-video{margin:80px 0 6px}
.product-video h2{font-size: 40px; font-weight: 600;margin:0 0 12px}
.video-box{background:#0f1523;border-radius:32px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.ratio{position:relative;width:100%;height:0}
.ratio-16x9{padding-top:56.25%}
.ratio iframe,.ratio video{position:absolute;inset:0;width:100%;height:100%}
.video-poster{position:relative;display:block}
.video-poster img{display:block;width:100%;height:auto;opacity:.95}
.video-poster .play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(#1ddb6f 55%, rgba(0,0,0,.35) 56%);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
:root{
  --header-h: 120px; /* desktop fallback до отработки JS */
  --header-gap: 12px;
}

.page-default{padding-bottom: 80px}
.page-default h1{font-size: 40px; font-weight: 400}
.page-default h2{font-size: 20px; font-weight: 500}
.page-default p{font-size: 14px; font-weight: 400}
@media (max-width: 767px){
.page-default{padding-bottom: 40px}
.page-default h1{font-size: 28px; font-weight: 400}
.page-default h2{font-size: 16px; font-weight: 500}
.page-default p{font-size: 12px; font-weight: 400}
}
.product-page, .page-default{
  padding-top: var(--header-h);
}

/* ===== 404 page ===== */
.page-404 .header{
  background: transparent !important;   /* прозрачная шапка */
  box-shadow: none;
}

/* Герой-блок 404 */
.error-hero{
  position: relative;
  isolation: isolate;                    /* чтобы оверлеи не уходили под контейнеры */
  min-height: calc(100vh - var(--header-h,120px));
  padding-top: calc(var(--header-h,120px) + 40px);
  display: flex;
  align-items: center;
  background-image: var(--error-bg);     /* из inline-стиля, см. 404.php */
  background-size: cover;
  background-position: center;
}

/* затемнение фона и плавное «сведение» к цвету сайта */
.error-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(12,16,28,.45) 0%, rgba(12,16,28,.7) 60%, rgba(12,16,28,.8) 100%);
  z-index:0;
}
.error-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:36vh;
  background: linear-gradient(180deg, rgba(23,30,49,0) 0%, #171e31 85%);
  z-index:0;
}

.error-hero .container{ position:relative; z-index:1; }

.error-hero__grid{
  display:flex;
  gap: 40px;
  align-items: center;
}

/* Левая колонка */
.oops{
  margin:0 0 14px;
  color:#fff;
  font-weight:700;
  font-size:40px;
  line-height:1;
}
.error-hero h1{
  margin:0 0 34px;
  color:#fff;
  font-size:40px;
  font-weight: 400;
  line-height:1.4;
  max-width: 580px;
}
.error-hero__left{
  width: 50%;
}
.error-hero__right{
  width: 50%;
}
/* Кнопка (под ваш зелёный стиль) */
.btn.btn-green{
  display:inline-flex; align-items:center; justify-content:center;
  background:#1FEA78; color:#161E31;
  border-radius:100px; padding:18px 40px; text-transform: uppercase;font-size: 12px;font-weight:600;
  box-shadow:0 16px 36px rgba(31,234,120,.35);
  transition: transform .15s ease, box-shadow .2s ease;
  width: 283px;
  height: 72px;
}
.btn.btn-green:hover{ transform: translateY(-1px); }
.btn.btn-green:active{ transform: translateY(0); }

/* Правая колонка — контурное «404» */
.outline-404{
  display:block;
  text-align: right;
  color: transparent;
  font-weight:800;
  letter-spacing:.02em;
  font-size: 15vw;
  -webkit-text-stroke: 2px rgba(255,255,255,.28);
  text-stroke: 2px rgba(255,255,255,.28);
}

/* Адаптив */
@media (max-width: 1024px){
  .error-hero__grid{flex-direction: column;gap:28px; }
  .outline-404{ font-size: 18vw; text-align:center}
  .error-hero__left, .error-hero__right{width:100%;text-align:center}
  .oops{text-align: center}
  .error-hero h1{max-width: 100%;text-align: center}
}
@media (max-width: 768px){
  .error-hero{
    min-height: auto;
    padding-top: calc(var(--header-h,64px) + 28px);
    padding-bottom: 60px;
  }
  .oops{ font-size:42px; }
  .error-hero h1{ font-size:26px; }
}

#reviews .swiper-backface-hidden .swiper-slide{cursor: pointer;}

.certs-note {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
}