:root {
    --brand-900: #0b1c3a;
    --brand-700: #123a7a;
    --brand-500: #1d5fd1;
    --brand-400: #186d72;
    --brand-300: #8cb7ae;
    --brand-100: #e8effb;
    --accent:    #d4a017;
    --muted:     #5b6576;
    --bg:        #f6f8fc;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1b2330;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  a {
    text-decoration: none;
    color: var(--brand-900);
  }

  /* ── Шапка ─────────────────────────────────────────── */
  .site-header {
    background: #fff;
    border-bottom: 1px solid #e7ecf5;
  }
  .brand-link {
  display: flex;
  flex-wrap: nowrap; 
  align-items: center;
  row-gap: .5rem;
  }
  
  .brand-logo {
  max-height: 80px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;     /* не даёт «плющить» картинку */
  }



  .brand-title { font-weight: 800; letter-spacing: -.02em; color: var(--brand-900); }
  .brand-sub   { color: var(--muted); font-weight: 500; }
  .header-phone {
    font-weight: 800;
    color: var(--brand-900);
    font-size: 1.15rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .header-phone:hover { color: var(--brand-500); }

  .btn-order {
    background: var(--brand-300);
    border-color: var(--brand-400);
    color: #fff;
    font-weight: 600;
  }
  .btn-order:hover { background: var(--brand-400); border-color: var(--brand-400); color: #fff; }

  /* ── Навигация ─────────────────────────────────────── */
  .navbar-main { background: var(--brand-400); }
  .navbar-main .nav-link {
    color: #b3cfc9;
    font-weight: 600; 
    padding: .85rem 1rem;
  }
  /* Активный пункт: акцентная полоса снизу */
  .navbar-main .nav-link {
  position: relative;
  border-radius: .5rem .5rem 0 0;     
  transition: color .2s ease, background-color .2s ease;
  }

  .navbar-main .nav-link.active,
  .navbar-main .nav-link[aria-current="page"] {
  color: #fff;    
  font-weight: 700;
  }

  /* Акцентная полоса снизу — «подчёркивание» акцентным цветом */
  .navbar-main .nav-link.active::after,
  .navbar-main .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.5rem;                          /* выравниваем по padding ссылки */
  right: 0.5rem;
  bottom: 0.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);           /* #d4a017 — золотистый акцент */
  box-shadow: 0 0 0 1px rgba(212, 160, 23, .25);
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center;
  }

  /* Ховер на неактивных  */
  .navbar-main .nav-link:not(.active):hover {
  color: white;  
  }

  .navbar-main .nav-link:not(.active):hover::after {
  content: "";
  position: absolute;
  left: 0.5rem;                          /* выравниваем по padding ссылки */
  right: 0.5rem;
  bottom: 0.5rem;
  height: 1px;
  border-radius: 1px;
  background: var(--accent);           
  box-shadow: 0 0 0 1px rgba(212, 160, 23, .25);
  transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
  transform-origin: center;
  }

  /* Кнопка-бургер на тёмном фоне */
  .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .35);  /* светлая рамка вместо тёмной */
  border-radius: .5rem;
  padding: .35rem .55rem;
  color: #fff;                                  /* иконка наследует currentColor */
  background-color: transparent;
  transition: border-color .2s ease, background-color .2s ease;
  }

  /* Иконка бургера — белая (Bootstrap рисует её через background-image с currentColor) */
  .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.4em;
  height: 1.4em;
  }

  /* Состояния */
  .navbar-toggler:hover {
  border-color: rgba(255, 255, 255, .7);
  background-color: rgba(255, 255, 255, .08);
  }

  .navbar-toggler:focus,
  .navbar-toggler:focus-visible {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);  /* светлый focus-ring */
  }

  /* Когда меню открыто — рамка/фон чуть заметнее (опционально) */
  .navbar-toggler[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .7);
  background-color: rgba(255, 255, 255, .1);
  }

  /* ── Герой-блок ───────────────────────────────────── */
  .hero {
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-500) 100%);
    color: #fff;
    border-radius: 1.25rem;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    position: relative;
    overflow: hidden;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -40% auto;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%);
    pointer-events: none;
  }
  .hero h1 { font-weight: 800; letter-spacing: -.02em; }
  .hero .lead { color: #cfdbf3; }
  .hero .badge-soft {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 600;
    padding: .5rem .9rem;
    border-radius: 999px;
  }

  /* ── Секции ───────────────────────────────────────── */
  .section-title {
    font-weight: 800;
    color: var(--brand-900);
    letter-spacing: -.02em;
  }
  .card-soft {
    background: #fff;
    border: 1px solid #e7ecf5;
    border-radius: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card-soft:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,28,58,.08); }

  .list-link {
    display: block;
    padding: .55rem .25rem;
    color: var(--brand-700);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed #e2e8f3;
  }
  .list-link:last-child { border-bottom: none; }
  .list-link:hover { color: var(--brand-500); }
  .list-link i { color: var(--accent); }

  /* Лидеры продаж */
  .leader {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e7ecf5;
    border-radius: .85rem;
    padding: 1rem;
    height: 100%;
    transition: border-color .2s ease, transform .2s ease;
  }
  .leader:hover { border-color: var(--brand-500); transform: translateY(-2px); }
  .leader .leader-name { font-weight: 800; color: var(--brand-900); }
  .leader .leader-tag  { color: var(--muted); font-size: .85rem; }

  /* График работы */
  .schedule p { margin: 0 0 .5rem; }
  .schedule .store { font-weight: 700; color: var(--brand-900); }
  .pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--brand-100); color: var(--brand-700);
    border-radius: 999px; padding: .35rem .75rem;
    font-weight: 600; font-size: .9rem;
  }

  /* Дилер */
  .dealer-badge {
    background: #fff;
    border: 1px solid #e7ecf5;
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
  }

  /* Футер */
  .site-footer {
    background: var(--brand-900);
    color: #cfdbf3;
  }
  .site-footer a { color: #fff; text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  .footer-title { color: #fff; font-weight: 800; }

  .site-footer a:hover {
    color: var(--accent);
  }

  /* Служебное */
  .text-muted-2 { color: var(--muted); }
  .divider { height: 1px; background: #e7ecf5; border: 0; }

  /*КАРТЫ*/
  .map-frame {
    width: 100%;
    height: 380px;
    border-radius: .75rem;
    overflow: hidden;
    background: #eef2f8;
  }
  
  @media (max-width: 767.98px) {
    .map-frame { height: 280px; }
  }

  /*КРОШКИ     */

  .breadcrumb-item a {
    text-decoration: none;
    color: var(--brand-900);
  }

  .breadcrumb-item a:not(.active):hover {
    color: var(--accent);
  }


  /*МЕНЮ РАЗДЕЛА*/

 /* ══════════════════════════════════════════════════
   Универсальное боковое меню разделов (.side-nav)
   ══════════════════════════════════════════════════ */
.side-nav {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
  
  .side-nav__card {
    background: #fff;
    border: 1px solid #e7ecf5;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
  }
  
  .side-nav__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
    padding: 0 .25rem .75rem;
    border-bottom: 1px solid #eef2f8;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--brand-900);
  }
  
  .side-nav__title i {
    color: var(--accent);
    font-size: 1.1rem;
  }
  
  .side-nav__list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  
  .side-nav__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: .5rem;
    color: var(--brand-700);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  
  .side-nav__link i {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 1rem;
    transition: color .15s ease;
  }
  
  .side-nav__link:hover {
    background: var(--brand-100);
    color: var(--brand-500);
  }
  
  .side-nav__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(29, 95, 209, .25);
  }
  
  /* Активный пункт — выставляется скриптом */
  .side-nav__link.is-active {
    background: var(--brand-100);
    color: var(--brand-700);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .side-nav__link.is-active i { color: var(--brand-500); }
  
  /* Мобильные: меню превращается в горизонтальные «пилюли» над контентом */
  @media (max-width: 991.98px) {
    .side-nav { position: static; }
  
    .side-nav__card { padding: 1rem; }
  
    .side-nav__title {
      margin-bottom: .75rem;
      padding-bottom: .5rem;
    }
  
    .side-nav__list {
      flex-direction: row;
      flex-wrap: wrap;
      gap: .4rem;
    }
  
    .side-nav__link {
      padding: .4rem .75rem;
      font-size: .875rem;
      background: #fff;
      border: 1px solid #e7ecf5;
    }
  
    .side-nav__link.is-active {
      box-shadow: none;
      border-color: var(--accent);
      background: var(--brand-100);
    }
  }
  
  /* Уважаем prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .side-nav__link { transition: none; }
  }

/* ── Галерея───────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}

.gallery__item {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f0f4f9;
  aspect-ratio: 1 / 1; /* Делает превью квадратными */
  border: 1px solid #e7ecf5;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Заполняет квадрат без искажений */
  display: block;
  transition: transform .3s ease;
}

.gallery__item:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
  box-shadow: 0 6px 16px rgba(11, 28, 40, .1);
}

.gallery__item:hover img {
  transform: scale(1.05); /* Легкий зум при наведении */
}

/* ── Настройка GLightbox под дизайн сайта ─────────── */
.glightbox-container .gslide-description {
  background: rgba(11, 28, 58, .92);   /* тёмно-синий из --brand-900 */
  color: #fff;
}
.glightbox-container .gslide-title {
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
}
.glightbox-container .gslide-desc {
  color: #cfdbf3;                      /* светло-голубой из футера */
  font-family: 'Manrope', sans-serif;
}

/* Кнопки навигации — акцентным цветом при наведении */
.glightbox-container .gbtn:hover {
  background-color: var(--brand-500);
}

/* Точки-индикаторы под галереей */
.glightbox-container .goverlay .gslide-image img {
  border-radius: .5rem;
}

/* ── Теги для списка оптовых товаров ──────────────────── */
.assort-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.assort-tag {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background: #fff;
  border: 1px solid #e7ecf5;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-700);
  transition: background-color .15s ease, border-color .15s ease;
}

.assort-tag:hover {
  background: var(--brand-100);
  border-color: var(--brand-300);
}


  /*КУКИ БАНЕР*/
  .cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;                         
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--brand-900);
    color: #dfe7f6;
    border-top: 3px solid var(--accent);
    box-shadow: 0 -8px 24px rgba(11, 28, 58, .25);
  
    /* Скрыт по умолчанию, показывается классом --visible */
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
  }
  
  .cookie-banner--visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .cookie-banner__text {
    flex: 1 1 320px;
    font-size: .925rem;
    line-height: 1.45;
  }
  
  .cookie-banner__link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cookie-banner__link:hover { color: var(--accent); }
   
  @media (max-width: 575.98px) {
    .cookie-banner { padding: .85rem 1rem; }
    .cookie-banner .btn { width: 100%; }
  }
    
  @media (prefers-reduced-motion: reduce) {
    .cookie-banner { transition: none; }
  }

   
  @media (max-width: 575.98px) {
      .brand-link {
          gap: .5rem;
      }
      .brand-logo {
          max-width: calc(50% - .25rem); 
          max-height: 64px;              
      }
  }