/* ===== Палитра ===== */
:root {
  --sp-dark-900: #2a2b2f;
  --sp-dark-800: #34363b;
  --sp-dark-700: #3d3f45;
  --sp-text: #ffffff;
  --sp-muted: #c7c9ce;
  --sp-orange: #FF8900;
  --sp-orange-2: #ff7a22;
  --sp-shadow: 0 8px 18px rgba(0, 0, 0, .25);
  --sp-radius: 14px;
}

.bg-body {
  background: #f3f5f9;
}

/* =========================================================
   HEADER: фикс от "рывков" и перепрыгов высоты на мобилках
   ========================================================= */
.sp-header{
  position: sticky;                 /* липкая шапка */
  top: env(safe-area-inset-top, 0); /* iOS safe area */
  z-index: 0;
  background: #fff;                 /* сплошной фон */
  /* GPU-слой + локализация перерисовок */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
  /* никаких плавных переходов размеров у контейнеров шапки */
  transition: none !important;
}

/* Тень при прокрутке: drop-shadow на тонком оверлее (не меняет метрики) */
.sp-header-shadow{
  position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:transparent; pointer-events:none;
  filter:none;
}
.sp-header.sp-header-scrolled .sp-header-shadow{
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.08));
}

/* фиксируем высоту зон, чтобы не было "скачка" высоты */
.sp-topbar{ min-height: 38px; display:flex; align-items:center; }
.sp-midbar{ min-height: 72px; display:flex; align-items:center; }

/* чуть компактнее на самых узких */
@media (max-width: 575.98px){
  .sp-midbar{ min-height: 64px; }
}

/* отключаем горизонтальный оверфлоу (частая причина "дёрга") */
html, body{ overflow-x: hidden; }

/* чтобы вертикальные жесты всегда отдавались странице */
#siteHeader, #siteHeader *{ touch-action: pan-y; }

/* когда Bootstrap блокирует скролл, избегаем неожиданных прыжков */
body.modal-open, body.offcanvas-backdrop{ overscroll-behavior: contain; }

/* ==== Верхній бар ==== */
.sp-topbar {
  background: linear-gradient(180deg, #2b2c31, var(--sp-dark-900));
  color: var(--sp-text);
  font-size: .9rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sp-badge-lte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 20px;
  font-weight: 700;
  font-size: .75rem;
  color: #111;
  background: #e9ecef;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ==== Помаранчева смуга (midbar) ==== */
.sp-midbar {
  background-color: #FF8900 !important;
  padding: .9rem 0 0;
  box-shadow: 0 6px 16px rgba(243, 108, 33, .25);
}

/* внутренние блоки шапки — отдельные слои (меньше перерисовок) */
.sp-logo, .section-cart, .section-search{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: content;
}

.sp-logo { color: #111; }

/* Логотип як фон */
.sp-logo-mark {
  --sp-logo-w: 120px;
  --sp-logo-h: 32px;
  display: inline-block;
  width: var(--sp-logo-w);
  height: var(--sp-logo-h);
  background-image: url("../img/agrodetails-logotyp.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.sp-logo-text {
  line-height: 1;
  color: #111;
}
.sp-logo-text small {
  font-size: .65rem;
  letter-spacing: .5px;
  color: #4b4b4b;
  margin-top: .2rem;
}

/* Заголовок у навігації */
.sp-title{ display:block; line-height:1.15; white-space:normal; }
.sp-title-main-gorizont{
  color:#111; font-weight:700; font-size:20px; margin-right:6px;
}
.sp-title-accent-gorizont{
  color:#d10000; font-weight:600; letter-spacing:.5px; font-size:14px;
}
@media (min-width: 992px){
  .sp-title-main-gorizont{ font-size:20px; }
  .sp-title-accent-gorizont{ font-size:20px; }
}

/* =========================
   Липкість — БЕЗ ИЗМЕНЕНИЯ ВЫСОТЫ
   ========================= */
/* Было (плохо): display:none + смена padding → скачок высоты
.is-sticky .sp-topbar{ display:none; }
.is-sticky .sp-midbar{ padding: .6rem 0 .7rem; }
*/

/* Стало (хорошо): визуально гасим topbar, высота сохраняется */
.is-sticky .sp-topbar{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* padding оставляем как в обычном состоянии — НИКАКИХ изменений геометрии */
.is-sticky .sp-midbar{
  padding: .9rem 0 0 !important;
}
.is-sticky .sp-nav{
  position: sticky; top: 0; z-index: 1001;
}

/* Бургер */
.sp-burger {
  background: transparent !important;
  color: #fff;
  border: 0; border-radius: 14px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-burger:active { transform: translateY(1px); }
.fa-bars:before, .fa-navicon:before { content: "\f0c9"; font-size: 24px; }

/* Offcanvas */
.sp-offcanvas {
  width: 300px;
  background: linear-gradient(180deg, #2f3136, #27292e);
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.sp-offcanvas-header {
  background: linear-gradient(90deg, #f36c21, #ff7a22);
  color: #111;
  padding: .9rem .9rem;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.sp-offcanvas-close {
  background: #111; color:#fff; border:0; border-radius:12px;
  width:38px; height:38px; margin-left:20px;
}
.sp-offcanvas-nav { display:flex; flex-direction:column; padding:.5rem; }
.sp-offcanvas-link {
  color:#e3e6ec; text-decoration:none; padding:.85rem 1rem; border-radius:12px;
  background:#2c2e33;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 10px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.05);
  margin:.4rem .5rem;
}
.sp-offcanvas-link:hover { color:#fff; transform: translateY(-1px); }
.sp-offcanvas-sep { height:1px; background: rgba(255,255,255,.08); margin:.5rem 1rem; }

/* Адаптація */
@media (max-width: 991.98px){
  .sp-logo-text small{ display:none; }
  .sp-search{ order:4; }
}

/* === Десктоп: контейнеры шапки во всю ширину экрана === */
@media (min-width: 992px){
  .sp-topbar .container,
  .sp-midbar .container,
  .sp-nav .container{
    max-width: 100vw;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .sp-midbar .row{
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
  }
  .sp-midbar .row.g-0>[class^="col"]{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Убираем любые «щели» внутри midbar на всех размерах */
.sp-midbar .container{ padding-left:0; padding-right:0; }
.sp-midbar .row{ margin-left:0; margin-right:0; }
.sp-midbar .row.g-0>[class^="col"]{ padding-left:0; padding-right:0; }

/* Лого/Поиск/Корзина: на десктопе ровно 3 колонки */
@media (min-width: 992px){
  .sp-midbar .col-12.col-lg-4{ flex:0 0 auto; width:33.333333%; }
}

/* Десктоп: сдвиг ТОЛЬКО колонки с «Кошик» вправо (в безопасном слое) */
@media (min-width: 992px){
  .sp-midbar .row.g-0>.col-12.col-lg-4:nth-child(2){
    position: relative;
    transform: translate3d(200px,0,0); /* GPU-трансформа, не трогает layout */
    will-change: transform;
    backface-visibility: hidden;
  }
}

/* Мобайл/планшет: нижний отступ колонок в midbar */
@media (max-width: 991.98px){
  .sp-midbar .row.g-0>.col-12{ padding-bottom:20px !important; }
}
:root{ --sp-header-h: 0px; }

/* Offcanvas под шапкой только на мобильных/планшетах */
@media (max-width: 991.98px){
  .sp-offcanvas.under-header{
    position: fixed;
    top: var(--sp-header-h);
    height: calc(100dvh - var(--sp-header-h));
    border-top-left-radius: 12px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    /* чтобы содержимое не прыгало при появлении */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Бэкдроп тоже начинаем под шапкой */
  .offcanvas-backdrop.show{
    top: var(--sp-header-h);
    height: calc(100dvh - var(--sp-header-h));
  }
}

/* На десктопах поведение стандартное */
@media (min-width: 992px){
  .sp-offcanvas.under-header{
    top: 0;
    height: 100dvh;
  }
}
@media (min-width: 768px){
  .sp-toplinks{ padding: 1rem !important; } 
}