/* ==========================================================================
   Власне оформлення invervio.com поверх спільного (head.php підключає за налаштуванням theme.css = ['invervio']).
   Лише цей сайт. Розташування блоків — як у спільному шаблоні; оформлення — «нічна» тема банерів замовника:
   темна шапка, банери з підсвіченими кнопками, темні плитки категорій з товаром у синьому світлі, смуга переваг (benefits.style = glow),
   компактні cookies (cookies.style = compact) — темна смуга внизу по центру. Кольори — токени сайту (theme.colors) + свої нижче.
   ========================================================================== */
:root {
  --inv-night: #0b1426;          /* шапка, плитки, переваги — колір нічних банерів */
  --inv-night-2: #111d33;        /* поля й кнопки на темному */
  --inv-night-3: #1a2842;        /* наведення на темному */
  --inv-night-deep: #070d1a;     /* верхня смуга */
  --inv-line: rgba(255, 255, 255, 0.08);
  --inv-text-dim: rgba(255, 255, 255, 0.62);
  --inv-blue: #1d79fe;           /* синій знака лого — лише світіння й акценти на темному */
  --inv-blue-light: #6aa8ff;
  --inv-glow: rgba(29, 121, 254, 0.55);
}

/* ==========================================================================
   Верхня смуга й шапка: темний нічний синій, лого з білим написом (site.logo_on_accent)
   ========================================================================== */
.topbar {
  background: var(--inv-night-deep);
}

.header.header--brand {
  background: var(--inv-night);
  box-shadow: 0 1px 0 var(--inv-line);
}

.header--brand.is-scrolled {
  box-shadow: 0 1px 0 var(--inv-line), 0 10px 28px -12px rgba(7, 13, 26, 0.6);
}

/* Пошук — темне поле з тонким контуром; у фокусі — синій контур і м'яке світіння */
.header--brand .search__input {
  background: var(--inv-night-2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.header--brand .search__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.header--brand .search__input:focus {
  background: var(--inv-night-2);
  box-shadow: inset 0 0 0 1px var(--inv-blue), 0 0 0 4px rgba(29, 121, 254, 0.22);
}

.header--brand .search__wrap > .input-wrap__icon {
  color: rgba(255, 255, 255, 0.55);
}

.header--brand .search__clear {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Обране, меню — темне скло; кошик — синій зі світінням */
.header--brand .hdr-act,
.header--brand .header__burger {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px var(--inv-line);
}

.header--brand .hdr-act:hover,
.header--brand .header__burger:hover,
.header--brand .dd.is-open > .hdr-act {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.header--brand .cart-btn,
.header--brand .cart-btn:hover {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px var(--inv-glow);
}

.header--brand .cart-btn:hover {
  background: var(--c-accent-hover);
}

.header--brand .hdr-act .count,
.header--brand .hdr-act--fav .count--float,
.header--brand .cart-btn .count {
  background: #fff;
  color: var(--inv-night);
}

@media (max-width: 767px) {
  .header.header--brand {
    background: var(--inv-night);
  }

  .header--brand.is-over .cart-btn,
  .header--brand.is-over .cart-btn:hover {
    background: var(--c-accent);
    color: #fff;
  }
}

/* Повноекранний пошук на телефоні — звичайне світле поле */
body.is-search-full .header--brand .search__input {
  background: var(--c-surface-2);
  color: var(--c-text);
  box-shadow: none;
}

body.is-search-full .header--brand .search__input::placeholder {
  color: var(--c-text-3);
}

/* ==========================================================================
   Заголовки секцій: коротка синя риска зі світінням перед назвою
   ========================================================================== */
.section-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-head h2::before {
  content: "";
  flex: none;
  width: 5px;
  height: 0.9em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--inv-blue-light), var(--c-accent));
  box-shadow: 0 0 10px rgba(29, 121, 254, 0.55);
}

/* ==========================================================================
   Банери (home.hero_style = dock): слайдер 2/3 + дві пропозиції праворуч — розташування спільне
   ========================================================================== */
.hero--dock .hero__slider {
  background: var(--inv-night);
}

/* Головна кнопка — синя зі світінням, друга — темне скло з контуром */
.hero--dock .hslide__actions .btn--accent {
  box-shadow: 0 10px 26px -10px var(--inv-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero--dock .hslide__actions .btn--accent:hover {
  box-shadow: 0 12px 30px -10px rgba(29, 121, 254, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero--dock .btn--glass {
  background: rgba(11, 20, 38, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero--dock .btn--glass:hover {
  background: rgba(11, 20, 38, 0.62);
  box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.6);
}

@media (min-width: 768px) {
  .hero--dock .hero__slider {
    border-radius: 24px;
  }

  /* Під текстом зліва — затемнення кольором ночі, щоб заголовок читався на будь-якому кадрі */
  .hero--dock .hslide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(7, 13, 26, 0.7) 0%, rgba(7, 13, 26, 0.38) 38%, rgba(7, 13, 26, 0) 64%);
    pointer-events: none;
  }

  .hero--dock .hslide__body {
    gap: 14px;
    max-width: 58%;
  }

  .hero--dock .hslide__title {
    font-size: clamp(24px, 4.3cqi, 42px);
    line-height: 1.07;
    letter-spacing: -0.03em;
  }

  .hero--dock .hslide__text {
    max-width: 460px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(13px, 1.75cqi, 16px);
  }

  .hero--dock .hslide__actions .btn {
    height: 50px;
    padding: 0 24px;
    font-size: var(--fs-16);
  }

  /* Стрілки — круглі, темне скло */
  .hero--dock .hero__arrows .btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(11, 20, 38, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .hero--dock .hero__arrows .btn:hover {
    background: rgba(11, 20, 38, 0.66);
    box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.6);
  }
}

/* Пропозиції: темна картка; заголовок і опис угорі, кнопка-контур унизу */
.hero--dock .promo {
  border-radius: 24px;
  background: var(--inv-night);
}

.hero--dock .promo--light {
  background: var(--c-surface);
}

.hero--dock .promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(7, 13, 26, 0.8) 0%, rgba(7, 13, 26, 0.4) 40%, rgba(7, 13, 26, 0) 64%);
  pointer-events: none;
}

.hero--dock .promo--light::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.6) 36%, rgba(255, 255, 255, 0) 58%);
}

.hero--dock .promo__body {
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 60%;
  padding: 6cqi 0 6cqi 6.5cqi;
}

.hero--dock .promo__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(14px, 4cqi, 18px);
  line-height: 1.22;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.hero--dock .promo__text {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-13);
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hero--dock .promo--light .promo__text {
  color: var(--c-text-2);
}

@container (max-width: 379px) {
  .hero--dock .promo__text {
    -webkit-line-clamp: 1;
  }
}

@container (max-width: 260px) {
  .hero--dock .promo__text {
    display: none;
  }
}

.hero--dock .promo__go {
  gap: 6px;
  height: 36px;
  margin: auto 0 0;
  padding: 0 12px 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: var(--fs-14);
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.hero--dock .promo:hover .promo__go {
  background: var(--c-accent);
  box-shadow: 0 8px 20px -10px var(--inv-glow);
}

.hero--dock .promo--light .promo__go {
  background: var(--inv-night);
  box-shadow: none;
  color: #fff;
}

.hero--dock .promo--light:hover .promo__go {
  background: var(--c-accent);
}

@media (max-width: 1439px) {
  .hero--dock .promo__go {
    height: 34px;
    font-size: var(--fs-13);
  }
}

@media (max-width: 767px) {
  .hero--dock .promo {
    border-radius: var(--r-2xl);
  }

  .hero--dock .promo__body {
    gap: 6px;
    max-width: 74%;
    padding: 16px 0 16px 16px;
  }

  .hero--dock .promo__title {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }

  .hero--dock .promo__text {
    font-size: var(--fs-12);
  }
}

/* ==========================================================================
   Категорії: темні плитки — фото товару (без тла) у синьому світлі знизу, назва в один рядок
   ========================================================================== */
.hcats {
  --hcat-gap: 14px;
  gap: var(--hcat-gap);
}

.hcat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 0 0 calc((100% - 5 * var(--hcat-gap)) / 6);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(110% 80% at 50% 100%, #15346e 0%, #0f1c34 52%, var(--inv-night) 100%);
  box-shadow: inset 0 0 0 1px var(--inv-line), var(--sh-sm);
  color: #fff;
}

.hcat:hover {
  box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.45), 0 14px 30px -16px rgba(29, 121, 254, 0.8);
}

.hcat__media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background: transparent;
}

/* Світло під товаром */
.hcat__media::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: 9%;
  left: 16%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 121, 254, 0.7), rgba(29, 121, 254, 0));
  pointer-events: none;
}

.hcat__media img {
  position: absolute;
  inset: 10% 14% 14%;
  z-index: 1;
  width: 72%;
  height: 76%;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  transition: transform var(--t) var(--ease);
}

.hcat:hover .hcat__media img {
  transform: translateY(-3px);
}

/* Розділ без фото — іконка, світла синя */
.hcat__media > .lucide {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  color: var(--inv-blue-light);
}

.hcat__text {
  gap: 3px;
  padding: 2px 14px 14px;
}

.hcat__name {
  display: block;
  color: #fff;
  font-size: var(--fs-15);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hcat:hover .hcat__name {
  color: #fff;
}

.hcat__count {
  color: var(--inv-text-dim);
  font-size: var(--fs-13);
}

@media (max-width: 1439px) {
  .hcat {
    flex-basis: calc((100% - 4 * var(--hcat-gap)) / 5);
  }
}

@media (max-width: 1279px) {
  .hcat {
    flex-basis: calc((100% - 3 * var(--hcat-gap)) / 4);
  }
}

@media (max-width: 767px) {
  .hcats {
    --hcat-gap: 10px;
  }

  .hcat {
    flex: 0 0 164px; /* «Гібридні інвертори» вміщується в один рядок */
    border-radius: var(--r-2xl);
  }

  .hcat__text {
    padding: 0 10px 10px;
  }

  .hcat__name {
    font-size: var(--fs-14);
  }

  .hcat__count {
    font-size: var(--fs-12);
  }
}

/* ==========================================================================
   Ліва панель: «Акції» — синя картка зі світінням
   ========================================================================== */
.panel--left [data-menu="panel_collections"] .nav-item {
  min-height: 50px;
  padding: 0 12px 0 8px;
  background: linear-gradient(135deg, var(--c-accent), #0f4cab);
  box-shadow: 0 8px 20px -12px var(--inv-glow);
  color: #fff;
  font-weight: var(--fw-semibold);
}

.panel--left [data-menu="panel_collections"] .nav-item:hover,
.panel--left [data-menu="panel_collections"] .nav-item.is-active {
  background: linear-gradient(135deg, #2a7cf0, var(--c-accent));
  color: #fff;
}

.panel--left [data-menu="panel_collections"] .nav-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ==========================================================================
   Переваги (benefits.style = glow): темна смуга, іконки в синіх кільцях зі світінням
   ========================================================================== */
.benefits--glow .benefits__grid {
  position: relative;
  isolation: isolate;
  gap: 0;
  padding: 8px calc(var(--gutter) + 8px);
}

/* Сітка — це .container (поля по краях), тож смуга — підкладкою всередині полів */
.benefits--glow .benefits__grid::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter);
  z-index: -1;
  border-radius: 24px;
  background:
    radial-gradient(55% 160% at 0% 0%, rgba(29, 121, 254, 0.32), rgba(29, 121, 254, 0) 70%),
    radial-gradient(45% 150% at 100% 100%, rgba(29, 121, 254, 0.22), rgba(29, 121, 254, 0) 70%),
    var(--inv-night);
}

.benefits--glow .benefit {
  padding: 22px 22px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.benefits--glow .benefit:hover {
  box-shadow: none;
}

.benefits--glow .benefit__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(29, 121, 254, 0.14);
  box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.4), 0 0 22px rgba(29, 121, 254, 0.35);
  color: var(--inv-blue-light);
}

.benefits--glow .benefit__title {
  color: #fff;
}

.benefits--glow .benefit__desc {
  color: var(--inv-text-dim);
}

@media (max-width: 1279px) {
  .benefits--glow .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .benefits--glow .benefits__grid {
    padding: 4px calc(var(--gutter) + 4px);
  }

  .benefits--glow .benefits__grid::before {
    border-radius: var(--r-2xl);
  }

  .benefits--glow .benefit {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
  }

  .benefits--glow .benefit__icon {
    width: 40px;
    height: 40px;
  }

  .benefits--glow .benefit__icon i.lucide {
    width: 20px;
    height: 20px;
  }

  .benefits--glow .benefit__title {
    font-size: var(--fs-14);
    line-height: 1.3;
  }

  .benefits--glow .benefit__desc {
    font-size: var(--fs-12);
  }
}

/* ==========================================================================
   Cookies (cookies.style = compact): темна компактна смуга внизу по центру, без затемнення сторінки;
   іконка · заголовок і текст · «Відхилити» / «Дозволити» в ряд. Телефон — кнопки другим рядком
   ========================================================================== */
.cookies--compact {
  right: 0;
  bottom: 20px;
  left: 0;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: min(880px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 14px 14px 14px 16px;
  border-radius: 20px;
  background: var(--inv-night);
  box-shadow: inset 0 0 0 1px var(--inv-line), 0 24px 48px -20px rgba(7, 13, 26, 0.7);
}

.cookies__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(29, 121, 254, 0.16);
  box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.4);
  color: var(--inv-blue-light);
}

.cookies__icon .lucide {
  width: 22px;
  height: 22px;
}

.cookies__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.cookies__title {
  color: #fff;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

.cookies--compact .cookies__text {
  color: var(--inv-text-dim);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.cookies--compact .cookies__text a {
  color: var(--inv-blue-light);
}

.cookies--compact .cookies__actions {
  flex: none;
  gap: 8px;
}

.cookies--compact .cookies__actions .btn {
  flex: none;
  min-width: 118px;
  height: 40px;
}

.cookies--compact .cookies__actions .btn--tonal {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
}

.cookies--compact .cookies__actions .btn--tonal:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 767px) {
  .cookies--compact {
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 0;
    flex-wrap: wrap;
    gap: 12px;
    width: calc(100vw - 24px);
    padding: 14px;
  }

  .cookies--compact .cookies__icon {
    align-self: flex-start;
    width: 36px;
    height: 36px;
  }

  .cookies--compact .cookies__icon .lucide {
    width: 18px;
    height: 18px;
  }

  .cookies--compact .cookies__body {
    flex-basis: calc(100% - 48px);
  }

  .cookies--compact .cookies__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .cookies--compact .cookies__actions .btn {
    min-width: 0;
  }
}