/* =====================================================================
   THEME_PLUM · CUSTOM.CSS — НОВИЙ ДИЗАЙН "SOLAR / GREEN"
   ---------------------------------------------------------------------
   Інтегровано з файлу дизайну styles.css (клієнтська версія, 1:1).
   Єдина зміна відносно вихідного файлу: у --font-display додано
   фолбек "Manrope" — шрифт Sora не містить кирилиці (Google Fonts:
   latin/latin-ext), тож українські заголовки рендеряться в Manrope
   ExtraBold замість системного sans-serif.
   Шрифти підключаються в header.twig (Sora + Manrope, display=swap).
   ===================================================================== */

/* =====================================================================
   ГОЛОВНА СТОРІНКА — НОВИЙ ДИЗАЙН (прев'ю для порту в OpenCart 4 / Bootstrap)
   ---------------------------------------------------------------------
   Дизайн-система: SOLAR / зелений бренд (світла тема, блакитно-сірий фон)
   Акценти: зелений (основний) · жовтий (CTA) · світло-блакитний (фон)
   Шрифти: Sora (заголовки) + Manrope (текст) — більший масштаб під 40+
   Класи збережено з вихідного home.html — для простого порту назад у тему.
   Структура секцій (за коментарями в розмітці):
     :root · reset · container · section type · buttons
     topbar · navbar/mega · hero · services · projects
     news · testimonials · faq · contact-cta · footer · floating · responsive
   ===================================================================== */

:root {
  /* ── Зелений (основний) ── */
  --green:        #1f9d55;
  --green-dk:     #157a40;
  --green-deep:   #0f3b25;
  --green-deep-2: #0a2c1b;
  --lime:         #7cc242;
  --green-tint:   #eaf6ef;
  --green-tint-2: #def0e5;
  --green-a12:    rgba(31, 157, 85, 0.12);
  --green-a20:    rgba(31, 157, 85, 0.20);
  --green-a35:    rgba(31, 157, 85, 0.35);

  /* ── Жовтий (CTA) ── */
  --yellow:       #ffd23e;
  --yellow-dk:    #f3c000;
  --yellow-ink:   #1a2e12;

  /* ── Світло-блакитний фон ── */
  --blue-bg:      #eef4f9;
  --blue-bg-2:    #e4edf4;
  --blue-line:    rgba(36, 78, 120, 0.10);

  /* ── Нейтральні ── */
  --white:        #ffffff;
  --ink:          #13211a;
  --ink-2:        #4a5a50;
  --ink-3:        #7e8c83;
  --border:       rgba(19, 33, 26, 0.10);
  --border-med:   rgba(19, 33, 26, 0.16);

  /* ── На темному ── */
  --w-90: rgba(255,255,255,.90);
  --w-75: rgba(255,255,255,.75);
  --w-60: rgba(255,255,255,.60);
  --w-45: rgba(255,255,255,.45);
  --w-30: rgba(255,255,255,.30);
  --w-12: rgba(255,255,255,.12);
  --w-08: rgba(255,255,255,.08);

  /* ── Тіні ── */
  --shadow-sm: 0 2px 10px rgba(16, 40, 28, 0.06);
  --shadow-md: 0 14px 40px rgba(16, 40, 28, 0.10);
  --shadow-lg: 0 26px 70px rgba(16, 40, 28, 0.16);
  --shadow-green: 0 12px 30px rgba(31, 157, 85, 0.30);
  --shadow-yellow: 0 12px 30px rgba(243, 192, 0, 0.35);

  /* ── Шрифти ── */
  --font-display:   "Golos Text", sans-serif;
  --font-body:      "Manrope", sans-serif;
  --font-watermark: "Sora", sans-serif;

  /* ── Розміри ── */
  --nav-h:    78px;
  --topbar-h: 44px;
  --radius:   16px;
  --radius-lg:24px;
  --radius-pill: 999px;
  --container: 1280px;
  --ease: 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  --fs-hero:    clamp(42px, 6vw, 82px);
  --fs-section: clamp(30px, 4vw, 52px);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 450;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img, video { display: block; max-width: 100%; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Section typography ────────────────────────────────────── */
.section-header { margin-bottom: 60px; text-align: center; position: relative; }
.section-header.left { text-align: left; }

.section-watermark {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-58%);
  text-align: center;
  font-family: var(--font-watermark);
  font-weight: 800;
  font-size: clamp(70px, 13vw, 190px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(31, 157, 85, 0.10);
  text-stroke: 1.5px rgba(31, 157, 85, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.section-header.left .section-watermark { text-align: left; transform: translateY(-54%); }

.section-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
  z-index: 1;
}
.section-eyebrow::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--lime);
}
.section-header.left .section-eyebrow::before { width: 4px; height: 22px; }

.section-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-sub {
  position: relative; z-index: 1;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 19px;
  max-width: 640px;
}
.section-header:not(.left) .section-sub { margin-left: auto; margin-right: auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green); color: var(--white);
  font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
  padding: 16px 32px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--green-dk); transform: translateY(-2px); box-shadow: var(--shadow-green); }
.btn-primary.full { width: 100%; }

/* Жовта CTA (головні цільові дії) */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--yellow); color: var(--yellow-ink);
  font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: 0.01em;
  padding: 16px 34px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
.btn-cta:hover { background: var(--yellow-dk); transform: translateY(-2px); box-shadow: var(--shadow-yellow); }
.btn-cta.full { width: 100%; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--white);
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  padding: 15px 30px; border-radius: var(--radius-pill); border: 2px solid var(--w-60); cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease); white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--white); background: var(--white); color: var(--ink); }

/* ═══════════════════════════ TOPBAR ═══════════════════════════ */
.topbar {
  min-height: 44px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-dk) 100%);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; row-gap: 8px;
  position: relative; z-index: 101; padding: 10px 20px;
}
.topbar-text {
  font-size: 15px; font-weight: 600; color: var(--white);
  display: flex; align-items: center; gap: 8px; text-align: center;
}
.topbar-text strong { color: var(--yellow) !important; font-weight: 800; }
.topbar-btn {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em;
  color: var(--green-dk); background: var(--white); font-weight: 800;
  padding: 7px 16px; border-radius: 8px; cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease); white-space: nowrap;
}
.topbar-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* ═══════════════════════════ NAVBAR ═══════════════════════════ */
.navbar {
  position: absolute; top: var(--topbar-h); z-index: 100; height: var(--nav-h); width: 100%;
  transition: box-shadow var(--ease), background var(--ease);
}
.navbar.scrolled { position: fixed; top: 0; background: var(--white); box-shadow: var(--shadow-md); }
.navbar.open { background: var(--white); box-shadow: var(--shadow-md); }
.navbar.scrolled .nav-link, .navbar.open .nav-link,
.navbar.scrolled .logo, .navbar.open .logo,
.navbar.scrolled .nav-icon-btn, .navbar.open .nav-icon-btn { color: var(--ink); }
.navbar.scrolled .nav-icon-btn svg, .navbar.open .nav-icon-btn svg { stroke: var(--ink); }

.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 40px;
  height: 100%; display: flex; align-items: center; gap: 36px;
}
.logo {
  font-family: var(--font-display); font-size: 27px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--white); flex-shrink: 0;
}
.logo span { color: var(--lime); }
.navbar.scrolled .logo span, .navbar.open .logo span { color: var(--green); }

/* stylesheet.css:32 має застарілий загальний a:hover з невизначеною змінною
   (--dark-green), через що колір при ховері "провалюється" в успадкований
   чорний. Явно фіксуємо колір лого при ховері — той самий, що й без ховера,
   і він змінюється лише разом зі станом навбара (.scrolled/.open/.inner-page). */
.logo:hover { color: var(--white); }
.navbar.scrolled .logo:hover, .navbar.open .logo:hover,
body.inner-page .navbar .logo:hover { color: var(--ink); }

.nav-links { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 9px 15px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; color: var(--white); cursor: pointer;
  border-radius: 10px; transition: color var(--ease), background var(--ease);
  user-select: none; white-space: nowrap;
}
.nav-link:hover, .nav-item.open .nav-link { color: var(--green) !important; background: var(--green-tint); }
.navbar.scrolled .nav-link:hover, .navbar.open .nav-item.open .nav-link { background: var(--green-tint); }

.chevron {
  width: 10px; height: 6px; stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; transition: transform var(--ease);
}
.nav-item.open .chevron { transform: rotate(180deg); }

.nav-icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nav-icon-btn {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--white); transition: color var(--ease), background var(--ease);
}
.nav-icon-btn:hover { background: var(--green-tint); color: var(--green); }
.nav-icon-btn:hover svg { stroke: var(--green); }
.nav-icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-btn {
  width: auto; padding: 0 12px; gap: 5px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
}

/* Mobile-only lang + burger cluster (shown once desktop nav collapses) */
.nav-mobile-actions { display: none; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

/* ── Мовний перемикач ─────────────────────────────────────────── */
.lang-switch { position: relative; }
.lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; padding: 8px; z-index: 120;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lang-switch.open .lang-switch-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.lang-switch-menu li a {
  display: block; padding: 9px 14px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink); text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.lang-switch-menu li a:hover { background: var(--green-tint); color: var(--green); }
.lang-switch-menu li a.active { color: var(--green); font-weight: 700; }

/* ── Mega Menu ─────────────────────────────────────────────── */
.mega-menu {
  position: fixed; top: calc(var(--topbar-h) + var(--nav-h)); left: 0; right: 0; width: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 40px 0; opacity: 0; pointer-events: none;
  transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 99;
}
.navbar.scrolled .mega-menu { top: var(--nav-h); }
.nav-item.open .mega-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.mega-inner { max-width: var(--container); margin: 0 auto; padding: 0 40px; display: flex; gap: 48px; }
.mega-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px;
}
.mega-left { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mega-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; flex: 2; }
.mega-right { width: 220px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.mega-card {
  display: flex; flex-direction: column; border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden; background: var(--white);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease); cursor: pointer;
}
.mega-card:hover { border-color: var(--green-a35); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mega-card-img { height: 118px; background: var(--blue-bg); overflow: hidden; position: relative; }
.mega-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease); }
.mega-card:hover .mega-card-img img { transform: scale(1.06); }
.mega-card-body { padding: 15px 16px; }
.mega-cat-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.mega-cat-desc {
  font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.mega-link {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  font-size: 15px; font-weight: 500; color: var(--ink-2); border-radius: 10px;
  transition: color var(--ease), background var(--ease);
}
.mega-link::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-med); flex-shrink: 0; transition: background var(--ease);
}
.mega-link:hover { color: var(--green); background: var(--green-tint); }
.mega-link:hover::before { background: var(--green); }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero {
  position: relative; height: calc(100vh - var(--topbar-h));
  min-height: 600px; display: flex; align-items: center; overflow: hidden;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,44,27,.86) 0%, rgba(12,50,31,.55) 48%, rgba(12,50,31,.18) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto; padding: 0 40px; width: 100%;
}
.hero-title {
  font-family: var(--font-display); font-size: var(--fs-hero);
  font-weight: 800; line-height: 1.03; letter-spacing: -0.025em; color: var(--white);
  margin-bottom: 26px; opacity: 0; animation: fadeUp 0.8s 0.4s forwards;
}
.hero-title em { font-style: normal; color: var(--lime); }
.hero-sub {
  font-size: 21px; color: var(--w-90); max-width: 540px; line-height: 1.6;
  margin-bottom: 38px; opacity: 0; animation: fadeUp 0.8s 0.6s forwards;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
.hero-scroll-hint {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2; opacity: 0; animation: fadeIn 1s 1.3s forwards;
}
.hero-scroll-hint span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-60); }
.scroll-line {
  width: 2px; height: 50px;
  background: linear-gradient(to bottom, var(--lime), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrollPulse { 0%,100% { transform: scaleY(1); opacity: .5; } 50% { transform: scaleY(1.2); opacity: 1; } }

/* ═══════════════════════════ SERVICES ═══════════════════════════ */
.services { padding: 120px 0; background: var(--blue-bg); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.service-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card-inner { padding: 38px 30px 34px; display: flex; flex-direction: column; height: 100%; }
.service-icon {
  width: 64px; height: 64px; border-radius: 16px; background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  transition: background var(--ease), color var(--ease);
}
.service-card:hover .service-icon { background: var(--green); color: var(--white); }
.service-icon svg { width: 34px; height: 34px; }
.service-num { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 10px; }
.service-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 14px; line-height: 1.25; }
.service-desc { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; flex: 1; }
.service-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.service-features li { font-size: 14.5px; color: var(--ink-2); padding-left: 24px; position: relative; }
.service-features li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 9px;
  background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 4.5L5 8L13 1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 4.5L5 8L13 1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.service-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--green); transition: gap var(--ease); margin-top: auto;
}
.service-link svg { width: 22px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--ease); }
.service-card:hover .service-link svg { transform: translateX(5px); }

/* ═══════════════════════════ PROJECTS ═══════════════════════════ */
.projects { padding: 120px 0; background: var(--white); overflow: hidden; }
.projects-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 52px; }
.projects-nav { display: flex; gap: 12px; position: relative; z-index: 1; }
.proj-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--border-med);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.proj-arrow:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.proj-arrow svg { width: 20px; height: 20px; }
.projects-track-wrap { padding-left: max(40px, calc((100vw - var(--container)) / 2 + 40px)); padding-top: 14px; padding-bottom: 48px; margin-bottom: -34px; overflow: hidden; }
.projects-track { display: flex; gap: 24px; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.proj-card {
  flex-shrink: 0; width: 400px; background: var(--white);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform var(--ease), box-shadow var(--ease);
}
.proj-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.proj-img { width: 100%; height: 250px; position: relative; overflow: hidden; }
.proj-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.proj-card:hover .proj-img img { transform: scale(1.07); }
/* Ефект появи тексту на місці зображення */
.proj-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(31,157,85,.94), rgba(15,59,37,.96));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 14px; padding: 32px; opacity: 0; transition: opacity var(--ease);
}
.proj-card:hover .proj-overlay { opacity: 1; }
.proj-overlay .proj-plus {
  width: 56px; height: 56px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); font-size: 30px; font-weight: 300; line-height: 1;
  transform: translateY(10px); transition: transform var(--ease) 0.05s;
}
.proj-card:hover .proj-overlay .proj-plus { transform: translateY(0); }
.proj-overlay p { color: var(--white); font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.3; transform: translateY(10px); transition: transform var(--ease) 0.1s; }
.proj-card:hover .proj-overlay p { transform: translateY(0); }
.proj-info { padding: 24px 26px 26px; }
.proj-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); background: var(--green-tint); padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.proj-info .proj-info-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px; line-height: 1.25; }
.proj-info p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.proj-stats { display: flex; gap: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.proj-stats div { display: flex; flex-direction: column; gap: 2px; }
.proj-stats span { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--green); }
.proj-stats em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* ═══════════════════════════ NEWS ═══════════════════════════ */
.news { padding: 120px 0; background: var(--blue-bg); }
.news-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 54px; }
.news-all-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--green); border: 2px solid var(--green); padding: 12px 24px; border-radius: var(--radius-pill);
  transition: color var(--ease), background var(--ease); white-space: nowrap; flex-shrink: 0;
}
.news-all-link:hover { color: var(--white); background: var(--green); }
.news-all-link svg { width: 17px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--ease); }
.news-all-link:hover svg { transform: translateX(3px); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease);
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.news-card-placeholder { width: 100%; height: 220px; overflow: hidden; position: relative; }
.news-card-placeholder img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.news-card:hover .news-card-placeholder img { transform: scale(1.07); }
.news-card-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.news-card-date {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); margin-bottom: 14px;
}
.news-card-date::before { content: ""; width: 16px; height: 2px; background: var(--lime); border-radius: 1px; }
.news-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.32; margin-bottom: 18px; flex: 1; }
.news-card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--green); margin-top: auto; }
.news-card-link svg { width: 17px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--ease); }
.news-card:hover .news-card-link svg { transform: translateX(5px); }

/* ═══════════════════════════ TESTIMONIALS ═══════════════════════════ */
.testimonials { padding: 120px 0; background: var(--white); }
.testi-scroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--ease), box-shadow var(--ease);
}
.testi-card::after {
  content: "\201D"; position: absolute; top: 18px; right: 28px;
  font-family: var(--font-display); font-size: 86px; line-height: 1; color: var(--green-a12); font-weight: 800;
}
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.testi-header { display: flex; align-items: center; gap: 15px; }
.testi-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--white); flex-shrink: 0;
}
.testi-header strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.testi-rating { display: inline-flex; gap: 2px; margin-top: 3px; }
.testi-rating i { color: var(--yellow-dk); font-size: 14px; }
.testi-card p { font-size: 16px; color: var(--ink-2); line-height: 1.7; flex: 1; position: relative; z-index: 1; }
.testi-service { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); padding-top: 16px; border-top: 1px solid var(--border); }

/* ═══════════════════════════ FAQ ═══════════════════════════ */
.faq { padding: 120px 0; background: var(--blue-bg); }
.faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--ease), border-color var(--ease); overflow: hidden;
}
.faq-item.open { border-color: var(--green-a35); box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 24px 28px; background: transparent; border: none;
  color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 700;
  text-align: left; cursor: pointer; transition: color var(--ease);
}
.faq-q:hover, .faq-item.open .faq-q { color: var(--green); }
.faq-q svg {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--green-tint);
  stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round;
  flex-shrink: 0; transition: transform var(--ease), background var(--ease); box-sizing: border-box;
}
.faq-item.open .faq-q svg { transform: rotate(180deg); background: var(--green); stroke: var(--white); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { padding: 0 28px 26px; font-size: 16.5px; color: var(--ink-2); line-height: 1.75; }

/* ═══════════════════════════ CONTACT CTA ═══════════════════════════ */
.contact-cta {
  padding: 110px 0; position: relative;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dk) 70%, var(--green) 130%);
}
/* Декоративні кола раніше кліпались через overflow:hidden прямо на .contact-cta —
   але це заодно обрізало випадний список кастомного select (#cf-service-list),
   коли він розкривався біля нижнього краю секції. Виносимо кліпінг у окрему
   абсолютно позиційовану підкладку під контентом, а сама секція більше
   нічого не обрізає. */
.cta-bg-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cta-bg-clip::before {
  content: ""; position: absolute; top: -120px; right: -100px; width: 420px; height: 420px;
  border-radius: 50%; background: var(--w-08);
}
.cta-bg-clip::after {
  content: ""; position: absolute; bottom: -160px; left: -80px; width: 360px; height: 360px;
  border-radius: 50%; border: 2px solid var(--w-08);
}
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; position: relative; z-index: 1; }
.cta-text h2 { font-family: var(--font-display); font-size: clamp(34px, 4vw, 54px); font-weight: 800; line-height: 1.06; color: var(--white); margin-bottom: 20px; letter-spacing: -0.02em; }
.cta-text p { font-size: 19px; color: var(--w-75); line-height: 1.65; }
.cta-form {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white); padding: 36px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row:has(.form-select) { grid-template-columns: 1fr; }
.form-input {
  padding: 16px 18px; background: var(--blue-bg); border: 2px solid transparent;
  border-radius: 12px; color: var(--ink); font-family: var(--font-body); font-size: 16px;
  outline: none; transition: border-color var(--ease), background var(--ease); appearance: none; -webkit-appearance: none;
}
.form-input::placeholder { color: var(--ink-3); }
.form-input:focus { border-color: var(--green); background: var(--white); }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231f9d55' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; cursor: pointer;
}
.sr-only-select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Стандартні Bootstrap-поля (.form-control/.form-select/.form-check-input —
   форма відгуку, чекаут, контакти тощо) успадкували з старої теми
   малиновий колір фокуса/обраного стану (#a1045a, stylesheet.css). Тут —
   заміна на зелений бренд сайту. */
.form-control:focus, .form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem var(--green-a20);
}
.form-check-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem var(--green-a20);
}
.form-check-input:checked {
  background-color: var(--green);
  border-color: var(--green);
}

/* ── Custom service dropdown (matches site card/menu styling) ── */
.custom-select { position: relative; }
.custom-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: var(--blue-bg); border: 2px solid transparent; border-radius: 12px;
  color: var(--ink); font-family: var(--font-body); font-size: 16px; text-align: left; cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.custom-select-trigger span.placeholder { color: var(--ink-3); background-color: transparent; cursor: pointer; }
.custom-select-trigger svg { width: 12px; height: 8px; flex-shrink: 0; color: var(--green); transition: transform var(--ease); }
.custom-select.open .custom-select-trigger { border-color: var(--green); background: var(--white); }
.custom-select.open .custom-select-trigger svg { transform: rotate(180deg); }
.custom-select-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  max-height: 280px; overflow-y: auto;
}
.custom-select.open .custom-select-list { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-list li {
  list-style: none; padding: 12px 14px; border-radius: 9px; font-size: 15.5px; color: var(--ink-2);
  cursor: pointer; transition: background var(--ease), color var(--ease);
}
.custom-select-list li:hover, .custom-select-list li.active { background: var(--green-tint); color: var(--green); }
.custom-select-list li[data-value=""] { color: var(--ink-3); }
.form-note { font-size: 12.5px; color: var(--ink-3); text-align: center; padding-top: 4px; }
.alert { border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; }
.alert-danger { background: #fdecec; color: #b3261e; }
.alert-success { background: var(--green-tint); color: var(--green-dk); }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.footer { background: var(--green-deep-2); padding: 70px 0 34px; color: var(--w-75); border-top: none; }
.footer-top { display: grid; grid-template-columns: 300px 1fr; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid var(--w-08); margin-bottom: 30px; }
.footer-brand .logo { font-size: 24px; display: block; margin-bottom: 18px; color: var(--white); }
.footer-brand .logo span { color: var(--lime); }
.footer-brand p { font-size: 15px; color: var(--w-45); line-height: 1.7; margin-bottom: 24px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
  width: 40px; height: 40px; border-radius: 50%; background: var(--w-08);
  display: flex; align-items: center; justify-content: center;
  color: var(--w-60); transition: background var(--ease), color var(--ease);
}
.footer-socials a:hover { background: var(--green); color: var(--white); }
.footer-socials svg { width: 17px; height: 17px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.footer-col a, .footer-col span { display: block; font-size: 15px; color: var(--w-45); margin-bottom: 11px; transition: color var(--ease); }
.footer-col a:hover { color: var(--lime); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.footer-bottom p { font-size: 13px; color: var(--w-30); }
.footer-bottom a { font-size: 13px; color: var(--w-45); transition: color var(--ease); }
.footer-bottom a:hover { color: var(--lime); }

/* ═══════════════════════════ FLOATING BUTTONS ═══════════════════════════ */
.floats { position: fixed; right: 26px; bottom: 26px; display: flex; flex-direction: column; gap: 14px; z-index: 90; }
.float-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--white); box-shadow: var(--shadow-green);
  transition: transform var(--ease), background var(--ease), opacity var(--ease), visibility var(--ease);
}
.float-btn:hover { transform: translateY(-3px); background: var(--green-dk); }
.float-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* .float-phone тепер живе у шаблоні самого модуля форми зворотного зв'язку
   (extension/contact_form), а не в footer.twig — з'являється лише на
   сторінках, де цей модуль реально є, без окремого запиту в БД. Через це
   вона більше не всередині .floats (той завжди в DOM, бо в футері), тому
   позиціонування — своє власне, підібране так, щоб візуально стояти
   точно над кнопкою "вгору" (26 + 56 + 14 = 96px), як і раніше. */
.float-phone { position: fixed; right: 26px; bottom: 96px; z-index: 90; background: var(--yellow); color: var(--yellow-ink); box-shadow: var(--shadow-yellow); opacity: 0; visibility: hidden; transform: translateY(8px); }
.float-phone.show { opacity: 1; visibility: visible; transform: translateY(0); }
.float-phone:hover { background: var(--yellow-dk); }
.float-phone svg { fill: currentColor; stroke: none; }
.float-top { opacity: 0; visibility: hidden; }
.float-top.show { opacity: 1; visibility: visible; }

/* ═══════════════════════════ MOBILE MENU ═══════════════════════════ */
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; margin-left: auto; }
.nav-burger span { display: block; width: 26px; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); }
.nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.navbar.scrolled .nav-burger span, .navbar.open-mobile .nav-burger span { background: var(--ink); }
.navbar.open-mobile { background: var(--white); box-shadow: var(--shadow-md); }

.mobile-menu {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 98; overflow-y: auto; padding: 28px 24px 48px; flex-direction: column; gap: 6px;
}
.mobile-menu.open { display: flex; top: calc(var(--topbar-h) + var(--nav-h)); }
.mobile-menu.open.scrolled { top: var(--nav-h); }
.mob-section { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 8px; }
.mob-section-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; padding-top: 8px; }
.mob-sub-link { display: block; padding: 10px 16px; font-size: 16px; font-weight: 500; color: var(--ink-2); border-radius: 10px; transition: color var(--ease), background var(--ease); }
.mob-sub-link:hover { color: var(--green); background: var(--green-tint); }
.mob-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ── Scroll reveal ─────────────────────────────────────────── */
.service-card, .testi-card, .faq-item, .proj-card, .cta-inner, .news-card {
  opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease;
}
.service-card.in-view, .testi-card.in-view, .faq-item.in-view,
.proj-card.in-view, .cta-inner.in-view, .news-card.in-view { opacity: 1; transform: none; }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width: 1024px) {
  .mega-cards { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-scroll { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  /* Collapse desktop nav to burger before long labels overflow */
  .nav-links, .nav-icons { display: none !important; }
  .nav-mobile-actions { display: flex; }
  .nav-burger { display: flex; }
  .nav-inner { gap: 16px; justify-content: space-between; width: 100%; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .container { padding: 0 20px; }
  .topbar { padding: 9px 16px; gap: 12px; }
  .topbar-text { font-size: 12.5px; line-height: 1.35; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .topbar-btn { padding: 6px 13px; font-size: 12px; }
  .nav-inner { padding: 0 20px; }
  .hero-content { padding: 0 20px; }
  .hero { min-height: 78vh; }
  .hero-scroll-hint { display: none; }
  .hero-sub { font-size: 18px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn-cta, .hero-btns .btn-secondary { width: 100%; }
  .services, .projects, .news, .testimonials, .faq, .contact-cta { padding: 72px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .section-header { margin-bottom: 44px; }
  .projects-header, .news-header { flex-direction: column; align-items: flex-start; gap: 22px; }
  .projects-track-wrap { padding-left: 20px; }
  .proj-card { width: calc(100vw - 44px); }
  .news-grid { grid-template-columns: 1fr; }
  .testi-scroll { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .cta-form { padding: 26px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .section-watermark { font-size: clamp(54px, 18vw, 100px); }
  .floats { right: 16px; bottom: 16px; }
  .float-phone { right: 16px; bottom: 86px; }
}

@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
  .mega-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   НАВБАР НА ВНУТРІШНІХ СТОРІНКАХ — ЗАЛИВКА
   ---------------------------------------------------------------------
   На головній навбар прозорий і лежить поверх темного hero (білий текст).
   На решті сторінок hero немає, фон світлий → білий текст був невидимий.
   Плюс навбар з position:absolute не займає місця в потоці, тому контент
   сторінки підлазив під нього (заголовок перекривався логотипом).

   Клас .inner-page додається до <body> у header.twig для всіх сторінок,
   крім головної: {% if not is_home %}

   Структура меню, мегаменю, ховери й поведінка при скролі — без змін.
   На головній нічого не змінюється.
   ===================================================================== */

/* Топбар виводиться лише на головній → тут його висота 0.
   JS робить те саме, але CSS страхує до виконання скрипта (без стрибка). */
body.inner-page { --topbar-h: 0px; }

/* Навбар як на головній: одразу fixed, поза потоком — тому положення
   ніколи не змінюється при скролі (раніше було sticky → fixed, і при
   переключенні контент сторінки різко «стрибав» вгору на висоту навбара,
   бо sticky-навбар звільняв зайняте в потоці місце). Місце під навбар
   резервує padding-top на body — без стрибка при завантаженні сторінки. */
body.inner-page { padding-top: var(--nav-h); }
body.inner-page .navbar {
  position: fixed;
  top: 0;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Темний текст замість білого. .logo/.logo span скопійовані з .navbar,
   бо без цього body.inner-page .logo (два класи + body) переважає навіть
   .footer-brand .logo (теж два класи, без body) через вищу специфічність —
   і "NRG" у футері ставав темним замість білого на внутрішніх сторінках. */
body.inner-page .nav-link,
body.inner-page .navbar .logo,
body.inner-page .nav-icon-btn { color: var(--ink); }
body.inner-page .nav-icon-btn svg { stroke: var(--ink); }
body.inner-page .navbar .logo span { color: var(--green); }

/* Ховер пунктів — як у скрольованому стані на головній */
body.inner-page .nav-link:hover,
body.inner-page .nav-item.open .nav-link { background: var(--green-tint); }

/* Бургер: темні смужки */
body.inner-page .nav-burger span { background: var(--ink); }

/* При скролі main.js додає .scrolled — навбар і так fixed, тож змінюється
   лише тінь, і вона плавно переходить через transition на .navbar (той
   самий ефект, що й на головній). Ніяких стрибків контенту. */
body.inner-page .navbar.scrolled {
  box-shadow: var(--shadow-md);
}

/* Мегаменю та мобільне меню відлічуються від навбара без топбару */
body.inner-page .mega-menu { top: var(--nav-h); }
body.inner-page .mobile-menu.open { top: var(--nav-h); }

/* ═══════════════════════════════════════════════════════════════════
   СТОРІНКА «ДЕРЖАВНІ ПРОГРАМИ» — стилі секцій gp-*
   Додано пакетом 2. Нашаровується на дизайн-систему теми.
   ═══════════════════════════════════════════════════════════════════ */

/* =====================================================================
   ІНФОРМАЦІЙНА СТОРІНКА — ДЕРЖАВНІ ПРОГРАМИ (модуль-набір для OpenCart)
   Підключається після styles.css. Використовує ті самі змінні бренду.
   Модулі: gp-hero · gp-about · gp-packages · gp-details · gp-requirements · gp-steps · gp-cta
   ===================================================================== */

.hl { color: var(--green); font-weight: 700; }
.hl-y { color: var(--yellow-dk); font-weight: 700; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--white); color: var(--ink);
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  padding: 15px 30px; border-radius: var(--radius-pill); border: 2px solid var(--border-med); cursor: pointer;
  transition: border-color var(--ease), background var(--ease); white-space: nowrap;
}
.btn-outline:hover { border-color: var(--green); background: var(--green-tint); color: var(--green); }

/* ═══════════════════ GP-HERO ═══════════════════ */
.gp-hero { padding: 42px 0 100px; background: var(--blue-bg); }
.gp-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.gp-hero-title {
  font-family: var(--font-display); font-size: clamp(38px, 5vw, 60px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px;
}
/* stylesheet.css:654 дає h1 всередині #information-information/#information-contact
   темний бейдж (ID+елемент — специфічність вища за один клас). Прибиваємо явно
   тим самим ID, щоб .gp-hero-title гарантовано переміг незалежно від порядку файлів. */
#information-information .gp-hero-title,
#information-contact .gp-hero-title {
  background: none;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
}
.gp-hero-sub { font-size: 18.5px; color: var(--ink-2); line-height: 1.65; max-width: 480px; margin-bottom: 36px; }
.gp-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Капсули підкатегорій на сторінці категорії товарів — та сама кольорова
   схема, що й у .gp-search-bar/.blog-tag (білий фон/сірий обід у спокої,
   зеленуватий hover), лічильник товарів — суцільна зелена плашка. */
.gp-cat-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.gp-cat-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border-med); border-radius: var(--radius-pill);
  padding: 9px 10px 9px 20px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.gp-cat-pill:hover { border-color: var(--green); background: var(--green-tint); color: var(--green); }
.gp-cat-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  background: var(--green); color: var(--white);
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 800;
}

/* Відступ між hero-описом і блоком фільтр+товари нижче — інакше картки
   сайдбару впритул до тексту опису вище. */
#product-category { padding-top: 40px; }

/* Зображення категорії в hero — обрізаємо під контейнер (object-fit: cover),
   а не вписуємо в рамку з білими полями (так само, як мега-меню кроп'є
   ці самі category-мініатюри в .mega-card-img). */
.gp-cat-hero-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.gp-cat-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gp-stat-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px 34px; }
.gp-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.gp-stat-row:last-child { border-bottom: none; }
.gp-stat-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gp-stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.gp-stat-value em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }

/* ═══════════════════ GP-ABOUT ═══════════════════ */
.gp-about { padding: 120px 0; background: var(--white); }
.gp-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
.gp-about-grid .section-header.left .section-watermark { display: none; }
.gp-about-copy p { font-size: 17px; color: var(--ink-2); line-height: 1.75; margin-bottom: 20px; }
.gp-about-copy p:last-child { margin-bottom: 0; }

/* ═══════════════════ GP-PACKAGES ═══════════════════ */
.gp-packages { padding: 120px 0; background: var(--blue-bg); }
.gp-packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gp-pkg-card {
  position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 30px 30px; box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.gp-pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gp-pkg-card.best { border-color: var(--yellow); }
.gp-pkg-badge {
  position: absolute; top: -14px; right: 26px; background: var(--yellow); color: var(--yellow-ink);
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 8px; box-shadow: var(--shadow-yellow);
}
.gp-pkg-icons { display: flex; gap: 12px; margin-bottom: 26px; }
.gp-pkg-icons span {
  width: 52px; height: 52px; border-radius: 12px; background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.gp-pkg-icons svg { width: 26px; height: 26px; }
.gp-pkg-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 22px; min-height: 50px; }
.gp-pkg-lines-label { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.gp-pkg-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.gp-pkg-list div { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.gp-pkg-list div:last-child { border-bottom: none; padding-bottom: 0; }
.gp-pkg-list span { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.gp-pkg-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 16px; border-top: 2px solid var(--border); }
.gp-pkg-total span:first-child { font-size: 14px; color: var(--ink-2); }
.gp-pkg-total span:last-child { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--green); }

/* ═══════════════════ GP-DETAILS ═══════════════════ */
.gp-details { padding: 120px 0; background: var(--white); }
.gp-details-card { max-width: 880px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.gp-details-row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 26px 34px; border-bottom: 1px solid var(--border); }
.gp-details-row:last-child { border-bottom: none; }
.gp-details-row dt { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.gp-details-row dd { font-size: 16px; color: var(--ink-2); line-height: 1.6; }
.gp-details-row dd ul { display: flex; flex-direction: column; gap: 6px; }
.gp-details-row dd strong { color: var(--ink); font-weight: 700; }
.gp-details-row dd .gp-sep { height: 8px; }

/* ═══════════════════ GP-REQUIREMENTS ═══════════════════ */
.gp-requirements { padding: 120px 0; background: var(--blue-bg); }
.gp-tabs { display: flex; gap: 8px; justify-content: center; margin: 0 auto 46px; border-bottom: 1px solid var(--border-med); max-width: 880px; }
.gp-tab-btn {
  background: none; border: none; cursor: pointer; padding: 14px 26px; margin-bottom: -1px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink-3);
  border-bottom: 3px solid transparent; transition: color var(--ease), border-color var(--ease);
}
.gp-tab-btn.active { color: var(--green); border-color: var(--green); }
.gp-tab-panel { display: none; }
.gp-tab-panel.active { display: grid; }
.gp-tab-panel { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
.gp-req-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm); }
.gp-req-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.gp-req-card.neg .gp-req-icon { background: #fdecec; color: #c23a33; }
.gp-req-icon svg { width: 24px; height: 24px; }
.gp-req-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.gp-req-desc { font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.gp-req-desc strong { color: var(--ink); font-weight: 700; }

/* ═══════════════════ GP-STEPS ═══════════════════ */
.gp-steps-sec { padding: 120px 0; background: var(--white); }
.gp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.gp-steps::before { content: ""; position: absolute; top: 27px; left: calc(12.5% - 1px); right: calc(12.5% - 1px); height: 2px; background: var(--border-med); z-index: 0; }
.gp-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
.gp-step-num {
  width: 54px; height: 54px; border-radius: 50%; background: var(--green); color: var(--white);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 22px;
  font-family: var(--font-display); font-size: 18px; font-weight: 800; box-shadow: var(--shadow-green);
}
.gp-step-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.gp-step-desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

/* ═══════════════════ GP-CTA (compact) ═══════════════════ */
.gp-cta {
  padding: 64px 0; background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dk) 70%, var(--green) 130%);
}
.gp-cta .container {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.gp-cta h3 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--white); }
.gp-cta p { color: var(--w-75); font-size: 16px; margin-top: 6px; }
.gp-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* =====================================================================
   ІНФОРМАЦІЙНІ СТОРІНКИ (About Us, Delivery, Privacy Policy тощо)
   ---------------------------------------------------------------------
   information/information тепер рендериться через тему (раніше йшов
   стоковий Bootstrap-темплейт ядра — непофарбований хлібна крихта й h1).
   content_top/content_bottom лишаються full-bleed для модулів на кшталт
   gp-*, як на головній; заголовок і опис — у стандартному .container.
   ===================================================================== */

.page-breadcrumb-wrap { padding-top: 84px; background: var(--blue-bg); }
.page-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; padding-left: 0; margin-bottom: 0; }
.page-breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.page-breadcrumb li:not(:first-child)::before { content: "/"; color: var(--border-med); }
.page-breadcrumb a { color: var(--ink); transition: color var(--ease); }
.page-breadcrumb a:hover { color: var(--green); }
.page-breadcrumb li:last-child a { color: var(--ink-3); font-weight: 600; }

.page-body { padding-top: 36px; padding-bottom: 100px; }
.page-title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 28px;
}
/* =====================================================================
   .page-description — вивід контенту з CKEditor (полів "Опис" в адмінці).
   Тулбар редактора: Source/ShowBlocks/Maximize · Bold/Italic/Underline/
   Strike/Sub/Sup · NumberedList/BulletedList/Outdent/Indent · Justify
   Left/Center/Right/Block · SpecialChar · Format(p,h1–h6,pre,address,div) ·
   Font/FontSize · TextColor/BGColor · Link/Unlink/Anchor · Image/OpenCart/
   Youtube/Table/HorizontalRule (system/../ckeditor/config.js).
   Мета: що б редактор не вставив, воно має виглядати "у стилі сайту" й не
   ламати верстку (переповнення, зависокі відступи, розтягнуті картинки).
   ===================================================================== */
.page-description { font-size: 17px; color: var(--ink-2); line-height: 1.75; overflow-wrap: break-word; }
.page-description > *:last-child { margin-bottom: 0; }

.page-description p { margin: 0 0 18px; }

/* Format → заголовки (p;h1;h2;h3;h4;h5;h6;pre;address;div). Менші за
   .page-title/.blog-article-title сторінки, щоб не сперечались за увагу. */
.page-description h1, .page-description h2, .page-description h3,
.page-description h4, .page-description h5, .page-description h6 {
  font-family: var(--font-display); color: var(--ink); font-weight: 800;
  line-height: 1.25; margin: 36px 0 14px;
}
.page-description h1 { font-size: 32px; }
.page-description h2 { font-size: 27px; }
.page-description h3 { font-size: 23px; }
.page-description h4 { font-size: 19px; }
.page-description h5 { font-size: 17px; }
.page-description h6 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.page-description > h1:first-child, .page-description > h2:first-child,
.page-description > h3:first-child, .page-description > h4:first-child,
.page-description > h5:first-child, .page-description > h6:first-child { margin-top: 0; }

/* Bold/Italic/Underline/Strike/Sub/Sup */
.page-description strong, .page-description b { color: var(--ink); font-weight: 700; }
.page-description em, .page-description i { font-style: italic; }
.page-description u { text-decoration: underline; }
.page-description s, .page-description strike, .page-description del { text-decoration: line-through; }
.page-description sub, .page-description sup { font-size: 0.72em; }

/* NumberedList/BulletedList (+ вкладені списки) */
.page-description ul, .page-description ol { margin: 0 0 18px 22px; padding: 0; }
.page-description li { margin-bottom: 8px; }
.page-description li:last-child { margin-bottom: 0; }
.page-description ul ul, .page-description ul ol,
.page-description ol ul, .page-description ol ol { margin-top: 8px; margin-bottom: 0; }

/* Format → pre/address (моноширинний блок і підпис) */
.page-description pre {
  background: var(--blue-bg); border-radius: var(--radius); padding: 16px 18px;
  margin: 0 0 18px; overflow-x: auto; font-family: monospace; font-size: 14.5px; color: var(--ink);
}
.page-description address { font-style: italic; color: var(--ink-3); margin: 0 0 18px; }

/* HorizontalRule */
.page-description hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* Link/Unlink/Anchor — порожні <a name="..."> якорі не повинні займати місце */
.page-description a { color: var(--green); text-decoration: underline; transition: color var(--ease); }
.page-description a:hover { color: var(--green-dk); }
.page-description a:empty { display: inline-block; width: 0; height: 0; overflow: hidden; }

/* Image — clearfix на випадок float: left/right із діалогу зображення */
.page-description img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 20px 0; }
.page-description::after { content: ""; display: table; clear: both; }

/* Youtube — вставляється як фіксований iframe, тримаємо в межах ширини */
.page-description iframe { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; border: none; border-radius: var(--radius); margin: 20px 0; }

/* Table — горизонтальний скрол на вузьких екранах, щоб не ламати сторінку */
/* Той самий вигляд, що й .gp-details-card/.gp-details-row на держпрограмах:
   картка з рамкою й тінню, без вертикальних ліній між клітинками — лише
   горизонтальні розділювачі рядків, жирна перша колонка. */
.page-description table, .gp-table {
  display: block; overflow-x: auto; width: fit-content; max-width: 100%; border-collapse: collapse; margin: 0 0 18px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 10px 24px;
}
.page-description table tr, .gp-table tr { border-bottom: 1px solid var(--border); }
/* :last-child рахується окремо в межах thead і tbody — без уточнення до
   tbody воно знімало лінію під заголовком (єдиний tr у thead теж "останній").
   .gp-table рядків не групує в tbody, тож для нього досить простого tr. */
.page-description table tbody tr:last-child, .gp-table tr:last-child { border-bottom: none; }
.page-description table td, .page-description table th, .gp-table td, .gp-table th {
  padding: 20px 28px; border: none; border-right: 1px solid var(--border); text-align: center;
}
.page-description table td:last-child, .page-description table th:last-child,
.gp-table td:last-child, .gp-table th:last-child { border-right: none; }
.page-description table th, .gp-table th { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.page-description table td, .gp-table td { font-size: 16px; color: var(--ink-2); line-height: 1.6; }
/* ═══════════════════════════ МОДУЛЬ: Категорії блогу (topic) ═══════════════════════════ */
.gp-topic-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.gp-topic-item a {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--ink-3); text-decoration: none;
  transition: color var(--ease);
}
.gp-topic-item a::before {
  content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); background: transparent;
  transition: background var(--ease), border-color var(--ease);
}
.gp-topic-item a:hover { color: var(--ink); }
.gp-topic-item.active a { color: var(--ink); font-weight: 700; }
.gp-topic-item.active a::before { background: var(--ink); border-color: var(--ink); }

/* Відступ від хлібних крихт такий самий, як у .gp-hero (блок заголовка на держпрограмах) */
.blog-body { padding-top: 42px; background: var(--blue-bg); }
#cms-blog { padding-bottom: 60px; }
.blog-article-title {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px;
}
.blog-article-hero { margin-bottom: 48px; }
.blog-article-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.blog-article-image img { width: 100%; height: auto; display: block; }

/* ═══════════════════════════ БЛОГ: теги статті (сторінка новини) ═══════════════════════════ */
.blog-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.blog-tags-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink-3); margin-right: 2px; }
.blog-tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-3); background: transparent; border: 1px solid var(--border-med);
  padding: 6px 16px; border-radius: var(--radius-pill);
  text-decoration: none; transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.blog-tag:hover { border-color: var(--green); background: var(--green-tint); color: var(--green); }

/* ═══════════════════════════ БЛОГ: вступний заголовок + текст ═══════════════════════════ */
.blog-intro { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.blog-intro .page-description { font-weight: 600; }
.blog-intro .page-description strong, .blog-intro .page-description b { color: var(--green); }

/* SEO: h1 категорії новин — присутній у DOM для пошукових ботів, повністю
   прихований і невиділюваний для користувача (той самий підхід, що й
   .sr-only-select). */
.sr-only-seo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  user-select: none; -webkit-user-select: none;
}

/* ═══════════════════════════ БЛОГ: тулбар (пошук) ═══════════════════════════ */
.gp-blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 32px; }

/* Кругла кнопка категорій — видима лише на мобільних (.d-md-none), симетрична
   до кнопки пошуку з іншого краю тулбару. */
.gp-cat-toggle {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border-med); color: var(--ink); cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.gp-cat-toggle:hover { border-color: var(--green); background: var(--green-tint); color: var(--green); }
.gp-cat-toggle svg { width: 18px; height: 18px; display: block; }

/* Кругла іконка з чорним контуром. При кліку .open розкриває поле вводу
   вліво від кнопки (flex: input першим, кнопка останньою — росте контейнер,
   input просто отримує більше місця). */
.gp-search-bar {
  display: flex; align-items: center; justify-content: center;
  height: 44px; width: 44px; margin-left: auto;
  background: var(--white); border: 1px solid var(--border-med); border-radius: 22px;
  overflow: hidden;
  transition: width var(--ease), background var(--ease), border-color var(--ease);
}
.gp-search-bar:hover { border-color: var(--green); background: var(--green-tint); }
.gp-search-bar.open { width: 280px; justify-content: flex-start; background: var(--white); }
.gp-search-input {
  border: none; outline: none; background: none; width: 0; flex: none; min-width: 0;
  font-size: 14.5px; color: var(--ink); font-family: var(--font-body, "Manrope", sans-serif);
  padding: 0; opacity: 0; transition: opacity var(--ease), width var(--ease);
}
.gp-search-bar.open .gp-search-input { width: auto; flex: 1; padding: 0 0 0 18px; opacity: 1; }
.gp-search-input::placeholder { color: var(--ink-3); }
.gp-search-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: none; color: var(--ink); display: flex; align-items: center; justify-content: center;
  transition: color var(--ease);
}
.gp-search-btn svg { width: 18px; height: 18px; display: block; }
.gp-search-btn:hover { color: var(--green); }

/* Сортування поки приховано (лишаємо розмітку й логіку — легко повернути) */
.gp-sort-bar { display: none; }

/* Плашка активного фільтра за тегом — з'являється під тулбаром пошуку,
   коли список новин відкрито за посиланням тегу (?tag=...). */
.gp-tag-active {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--green-tint); border: 1px solid var(--green-a20); border-radius: var(--radius);
  padding: 12px 16px; margin: -16px 0 32px; font-size: 14px; color: var(--ink-2);
}
.gp-tag-active strong { color: var(--green-dk); font-weight: 700; }
.gp-tag-clear {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--green-dk);
  transition: background var(--ease), color var(--ease);
}
.gp-tag-clear svg { width: 14px; height: 14px; display: block; }
.gp-tag-clear:hover { background: var(--green); color: var(--white); }

/* ═══════════════════════════ БЛОГ: пагінація ═══════════════════════════ */
.gp-pagination-wrap { margin: 40px 0 70px; }
.gp-results { font-size: 14px; color: var(--ink-3); margin-top: 24px; }
.gp-results:empty { display: none; margin-top: 0; }
.gp-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
.gp-pagination > :first-child { justify-self: start; }
.gp-pagination > :last-child { justify-self: end; }
.gp-pg-side {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color var(--ease);
}
.gp-pg-side:hover { color: var(--green); }
.gp-pg-side.disabled { color: var(--border-med); pointer-events: none; }
.gp-pagination-nums { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.gp-pagination-nums li a, .gp-pagination-nums li span {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: var(--ink-3); text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.gp-pagination-nums li a:hover { background: var(--green-tint); color: var(--green); }
.gp-pagination-nums li.active span { background: var(--ink); color: var(--white); font-weight: 700; }
/* ═══════════════════════════ БЛОГ: картки новин ("тетріс", не таблична сітка) ═══════════════════════════
   CSS Grid тягне всі картки в рядку під висоту найвищої (звідси величезна
   порожнеча в картках без фото). Замінили на column-count: кожна картка
   має власну природну висоту й просто "падає" в найкоротшу колонку зверху
   вниз, без розтягування — компактне пакування, як у Pinterest/тетрісі. */
.gp-news-grid { column-count: 2; column-gap: 28px; margin-bottom: 8px; }
.gp-news-card {
  display: flex; flex-direction: column; break-inside: avoid; margin-bottom: 28px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.gp-news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gp-news-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-bg); }
.gp-news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-news-card-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.gp-news-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 12px; }
.gp-news-card-title a { color: inherit; text-decoration: none; transition: color var(--ease); }
.gp-news-card-title a:hover { color: var(--green); }
.gp-news-card-desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; flex: 1; overflow-wrap: break-word; word-break: break-word; }
.gp-news-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-news-card-link {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--green); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--ease), color var(--ease);
}
.gp-news-card-link:hover { gap: 10px; color: var(--green-dk); }
.gp-news-card-date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* ═══════════════════ RESPONSIVE (gp-hero / page-breadcrumb-wrap / blog-body) ═══════════════════
   Мають стояти ПІСЛЯ базових оголошень вище — інакше при однаковій специфічності
   (просто .клас з обох боків) пізніший у файлі базовий rule перемагає незалежно
   від @media, і адаптивні відступи просто ігноруються. */
@media (max-width: 1024px) {
  .page-breadcrumb-wrap { padding-top: 74px; }
  .gp-hero { padding: 18px 0 70px; }
  .blog-body { padding-top: 18px; }
  .blog-intro { margin-bottom: 18px; }
  /* Базово gap:0 — на сторінці новини (.blog-body) цей самий клас
     використовується для заголовка статті й тут відступ не потрібен. */
  .gp-hero-grid { grid-template-columns: 1fr; gap: 0; }
  /* На "Державних програмах" (та інших information-сторінках з тим самим
     .gp-hero-grid у контенті) gap:0 залишав кнопку "Подивитися умови"
     впритул до картки з умовами кредиту одразу під нею (на десктопі це
     два різні стовпці грід-сітки, а тут одна колонка — без відступу
     картка й кнопка злипались). Специфічність ID перемагає базове
     правило, .blog-body сторінка новини не зачіпається. */
  #information-information .gp-hero-grid,
  #information-contact .gp-hero-grid,
  #product-category-hero .gp-hero-grid { gap: 32px; }
  .gp-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .gp-about-grid .section-header.left .section-watermark { display: block; }
  .gp-packages-grid { grid-template-columns: 1fr; }
  .gp-tab-panel { grid-template-columns: 1fr; }
  .gp-steps { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .gp-steps::before { display: none; }
  .gp-news-grid { column-count: 1; }
}
@media (max-width: 768px) {
  .page-breadcrumb-wrap { padding-top: 60px; }
  .gp-hero { padding: 0px 0 48px; }
  #information-information .gp-hero,
  #information-contact .gp-hero,
  #product-category-hero.gp-hero { padding-top: 24px; }
  .blog-body { padding-top: 36px; }
  /* Разом з кнопкою категорій (44px) і gap рядок стає завузьким для 280px —
     переносило пошук на новий рядок. Трохи звужуємо для мобільних. */
  .gp-search-bar.open { width: 200px; }
  .blog-intro { margin-bottom: 36px; }
  .gp-hero-title { font-size: 36px; }
  .gp-about, .gp-packages, .gp-details, .gp-requirements, .gp-steps-sec { padding: 72px 0; }
  .gp-details-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 22px; }
  .gp-tabs { gap: 0; }
  .gp-tab-btn { padding: 12px 16px; font-size: 14.5px; }
  .gp-steps { grid-template-columns: 1fr; gap: 30px; }
  .gp-cta .container { flex-direction: column; align-items: flex-start; text-align: left; }

  /* Категорії блогу на мобільних — спливаюче вікно поверх контенту,
     відкривається кнопкою .gp-cat-toggle. #column-left сам стає
     напівпрозорим бекдропом на весь екран, а .gp-topic-panel — картка. */
  #column-left.mobile-open {
    display: flex !important; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 250;
    /* .col-3 (Bootstrap) дає max-width:25%, і воно лишається чинним навіть
       у position:fixed — без скидання картка стискається у вузьку смужку. */
    width: 100%; max-width: none; flex: none;
    background: rgba(19, 33, 26, 0.55); padding: 24px;
  }
  #column-left.mobile-open .gp-topic-panel {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; max-width: 320px;
    background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 30px 22px;
  }

  /* Хрестик — за межами білої картки, на темному фоні, приблизно посередині
     між низом картки й низом екрана. Позиціонується відносно #column-left
     (position:fixed — той самий контейнер, що й є бекдропом), а не панелі,
     тому лежить поверх фону, а не всередині білого блоку. */
  .gp-cat-close {
    display: none; position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15);
    color: var(--white); align-items: center; justify-content: center; cursor: pointer;
  }
  #column-left.mobile-open .gp-cat-close { display: flex; }
  .gp-cat-close svg { width: 20px; height: 20px; }

  /* Пункти категорій — по центру, обране значення підкреслене лініями
     "— Всі новини —" замість крапки-індикатора. */
  #column-left.mobile-open .gp-topic-list { align-items: center; gap: 18px; margin: 0; }
  #column-left.mobile-open .gp-topic-item a { justify-content: center; font-size: 16px; }
  #column-left.mobile-open .gp-topic-item a::before { content: none; }
  #column-left.mobile-open .gp-topic-item.active a { color: var(--ink); }
  #column-left.mobile-open .gp-topic-item.active a::before,
  #column-left.mobile-open .gp-topic-item.active a::after {
    content: ""; width: 20px; height: 1px; background: var(--ink-3);
    border: none; border-radius: 0;
  }
}
@media (max-width: 480px) {
  .page-breadcrumb-wrap { padding-top: 44px; }
}

/* =====================================================================
   МОДУЛЬ: gov_program_popup — спливаюче повідомлення
   ---------------------------------------------------------------------
   Стилі прив'язані до змінних теми (--green, --ink, --shadow-lg, …)
   з фолбеком на власні значення — тож модуль працює і на сторінці без
   основного стилю. Блок :root із демо прибрано (не дублюємо змінні).

   Виправлено vs демо: кнопка мала box-sizing: content-box, тому
   width:100% + падинги виходили за межі бульбашки на ~17px.
   Додано box-sizing: border-box на всі елементи модуля.
   ===================================================================== */

.gov-popup, .gov-popup * { box-sizing: border-box; }

.gov-popup {
  position: fixed; left: 26px; bottom: 26px; z-index: 95;
  display: flex; align-items: flex-end; gap: 10px;
  font-family: var(--font-body, "Manrope", sans-serif);
  /* Аватарка й бульбашка ховаються через opacity/visibility (не display:none),
     тому лишаються в layout і сам контейнер продовжує займати весь бокс
     (аватарка + бульбашка) навіть закритим — на мобільних це перекривало
     кнопки "вгору"/"дзвінок" (z-index:90 у .floats, нижче за 95 тут).
     pointer-events:none на контейнері + auto на видимих дітях повертає клік
     кнопкам під ним, коли попап закритий. */
  pointer-events: none;
}
.gov-popup-avatar, .gov-popup-bubble { pointer-events: auto; }
/* Іконка й бульбашка ховаються/з'являються НЕЗАЛЕЖНО одна від одної (керується
   JS зі стагером): спершу іконка, тоді повідомлення — і навпаки при зникненні.
   Тому show/hide живе на .gov-popup-avatar, а не на спільному .gov-popup. */
.gov-popup-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green, #1f9d55); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: var(--shadow-green, 0 12px 30px rgba(31, 157, 85, 0.30));
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: background var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1)),
              opacity var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1)),
              visibility var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1)),
              transform var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1));
}
.gov-popup-avatar.show { opacity: 1; visibility: visible; transform: translateY(0); }
.gov-popup-avatar:hover { background: var(--green-dk, #157a40); transform: translateY(-2px); }
.gov-popup-avatar svg { width: 26px; height: 26px; stroke: #fff; fill: none; }

.gov-popup-bubble {
  position: relative; width: 300px; max-width: calc(100vw - 100px);
  background: #fff; border-radius: 18px;
  box-shadow: var(--shadow-lg, 0 26px 70px rgba(16, 40, 28, 0.16));
  border: 1px solid var(--border, rgba(19, 33, 26, 0.10));
  padding: 18px 22px 20px;
  opacity: 0; visibility: hidden; transform: translateY(30px) scale(0.94);
  transform-origin: bottom left;
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0.45s;
}
.gov-popup-bubble.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.gov-popup-bubble::before {
  content: ""; position: absolute; left: -7px; bottom: 14px; width: 14px; height: 14px;
  background: #fff;
  border-left: 1px solid var(--border, rgba(19, 33, 26, 0.10));
  border-bottom: 1px solid var(--border, rgba(19, 33, 26, 0.10));
  transform: rotate(45deg); border-radius: 0 0 0 3px;
}
.gov-popup-close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer; color: var(--ink-3, #7e8c83);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1)), color var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1));
}
.gov-popup-close:hover { background: var(--green-tint, #eaf6ef); color: var(--green, #1f9d55); }
.gov-popup-close svg { width: 14px; height: 14px; }
.gov-popup-eyebrow {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green, #1f9d55); margin: 0 0 6px; padding-right: 20px;
}
.gov-popup-title {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 16.5px; font-weight: 700; color: var(--ink, #13211a);
  line-height: 1.32; margin: 0 0 8px; padding-right: 20px;
}
.gov-popup-text { font-size: 14px; color: var(--ink-2, #4a5a50); line-height: 1.55; margin: 0 0 16px; }
.gov-popup-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 14.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--green, #1f9d55); padding: 11px 20px;
  border-radius: var(--radius-pill, 999px);
  transition: background var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1)), transform var(--ease, 0.32s cubic-bezier(0.4,0,0.2,1));
}
.gov-popup-btn:hover { background: var(--green-dk, #157a40); transform: translateY(-1px); }

@media (max-width: 600px) {
  .gov-popup { left: 16px; bottom: 16px; }
  .gov-popup-bubble { width: calc(100vw - 90px); }
}

/* ═══════════════════════════ КАРТКА ТОВАРУ (каталог) ═══════════════════════════
   Компактна квадратна картка без кнопки "Купити" (функціонал купівлі поки
   прихований — див. product/thumb.twig). */
.gp-product-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.gp-product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-med); }

.gp-product-card-img {
  display: block; aspect-ratio: 1 / 1;
  background: var(--blue-bg);
}
.gp-product-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gp-product-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; flex: 1; }

.gp-product-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.gp-product-stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--green); white-space: nowrap;
}
.gp-product-stock i { font-size: 14px; }
.gp-product-stock-out { color: var(--ink-3); }

.gp-product-rating { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.gp-product-rating i { font-size: 11px; color: var(--yellow-dk); }
.gp-product-rating i.gp-star-empty { color: var(--border-med); }
.gp-product-rating-count { font-size: 12px; color: var(--ink-3); margin-left: 4px; }

.gp-product-card-title {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-product-card-title a { color: var(--ink); text-decoration: none; }
.gp-product-card-title a:hover { color: var(--green); }

.gp-product-card-price { margin-top: auto; }
.gp-price-new { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--green); }
.gp-price-old { font-size: 13px; color: var(--ink-3); text-decoration: line-through; margin-left: 8px; }

@media (max-width: 480px) {
  .gp-product-card-body { padding: 12px 14px 16px; gap: 8px; }
  .gp-product-card-title { font-size: 14px; }
  .gp-price-new { font-size: 17px; }
}

/* ═══════════════════════════ Мобільна кнопка/попап фільтрів каталогу ═══════════════════════════
   #column-left (бічна панель) сама по собі d-none нижче md — на мобільних
   єдиний доступ до неї через .gp-filter-mobile-toggle, який відкриває її як
   спливаюче вікно. Скопіно через :has(#gp-filter), щоб не зачепити такий
   самий #column-left.mobile-open для вибору категорій новин (інша розмітка,
   інший вигляд). */
.gp-filter-mobile-close { display: none; }
.gp-filter-mobile-spacer, .gp-filter-mobile-close-zone { display: none; }

@media (max-width: 767.98px) {
  /* Колонка з трьох flex-елементів: спейсер зверху, картка, зона кнопки
     знизу — верхній і нижній спейсер рівні (flex:1 кожен), тому картка
     лишається по центру екрана, а кнопка-хрестик центрується САМЕ у
     вільному просторі під карткою (а не липне до її краю фіксованим
     відступом, який ламався б при розкритті додаткових груп фільтра). */
  #column-left:has(#gp-filter).mobile-open {
    display: flex !important; flex-direction: column; align-items: center;
    position: fixed; inset: 0; z-index: 250;
    width: 100%; max-width: none; flex: none;
    background: rgba(19, 33, 26, 0.55);
    padding: 24px;
  }
  #column-left:has(#gp-filter).mobile-open .gp-filter-mobile-spacer,
  #column-left:has(#gp-filter).mobile-open .gp-filter-mobile-close-zone {
    display: flex; flex: 1 1 0; min-height: 12px; width: 100%;
    align-items: center; justify-content: center;
  }
  #column-left:has(#gp-filter).mobile-open #gp-filter {
    flex: 0 1 auto; min-height: 0;
    width: 100%; max-width: 420px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); box-shadow: var(--shadow-lg);
  }
  #column-left:has(#gp-filter).mobile-open .gp-filter-group { background: var(--white); }

  .gp-filter-mobile-close {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15);
    color: var(--white); align-items: center; justify-content: center; cursor: pointer;
  }
  #column-left.mobile-open .gp-filter-mobile-close { display: flex; }
  .gp-filter-mobile-close svg { width: 20px; height: 20px; display: block; }
}

/* ═══════════════════════════ СТОРІНКА ТОВАРУ — hero (галерея + основне) ═══════════════════════════ */
/* Фон сторінки — той самий блакитнуватий, що й хлібні крихти (як .blog-body
   на сторінці новини), а не білий стик одразу під ними. padding-top —
   відступ від хлібних крихт, інакше картка галереї впритул до них. */
#product-info { padding-top: 40px; padding-bottom: 60px; background: var(--blue-bg); }

/* stylesheet.css:598 дає #product-info h1 колір бренд-рожевий (лишок
   старого дизайну) — специфічність ID+тег переважає над одним класом,
   тож перебиваємо явно тим самим ID. */
#product-info .gp-product-title { color: var(--ink); }

.gp-product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 40px; }

.gp-product-gallery { display: flex; flex-direction: column; gap: 16px; }
.gp-product-gallery-main {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.gp-gallery-image { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.gp-gallery-image.active { display: flex; }
.gp-gallery-image img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 24px; box-sizing: border-box; }
.gp-gallery-prev, .gp-gallery-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-md);
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.gp-gallery-prev { left: 20px; }
.gp-gallery-next { right: 20px; }
.gp-gallery-prev:hover, .gp-gallery-next:hover { background: var(--green); color: var(--white); }
.gp-gallery-prev svg, .gp-gallery-next svg { width: 20px; height: 20px; display: block; }

.gp-product-gallery-thumbs { display: flex; gap: 12px; overflow-x: auto; }
.gp-gallery-thumb {
  flex-shrink: 0; width: 84px; height: 84px; padding: 6px;
  background: var(--white); border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--ease);
}
.gp-gallery-thumb.active, .gp-gallery-thumb:hover { border-color: var(--green); }
.gp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(var(--radius) - 6px); }

.gp-product-info { display: flex; flex-direction: column; }
.gp-product-info .gp-product-stock { font-size: 14px; margin-bottom: 16px; }
.gp-product-info .gp-product-stock i { font-size: 16px; }

.gp-product-title {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800;
  line-height: 1.25; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 32px;
}

.gp-product-attrs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.gp-product-attrs-head > span { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.gp-product-attrs-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color var(--ease);
}
.gp-product-attrs-all svg { width: 14px; height: 14px; }
.gp-product-attrs-all:hover { color: var(--green); }

.gp-product-attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gp-product-attr-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--white); border: 1px solid var(--border-med); border-radius: var(--radius); padding: 14px 16px;
}
.gp-product-attr-label { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.gp-product-attr-value { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }

/* Рейтинг (зірочки) під характеристиками — той самий .gp-product-rating,
   що на картці каталогу, тільки трохи більший під контекст hero. */
.gp-product-rating-row { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.gp-product-info .gp-product-rating i { font-size: 15px; }
.gp-product-rating-link { font-size: 13.5px; color: var(--ink-3); text-decoration: underline; transition: color var(--ease); }
.gp-product-rating-link:hover { color: var(--green); }
.gp-product-rating-sep { font-size: 13.5px; color: var(--border-med); }

/* Ціна — ті самі .gp-price-new/.gp-price-old, що на картці каталогу, але
   помітно крупніші, бо тут це головний акцент інформаційної колонки. */
.gp-product-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.gp-product-info .gp-price-new { font-size: 34px; }
.gp-product-info .gp-price-old { font-size: 17px; margin-left: 0; }
.gp-product-price-tax { font-size: 13.5px; color: var(--ink-3); }
.gp-product-price-points { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.gp-product-discounts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gp-product-discounts li { font-size: 13.5px; color: var(--ink-2); }

/* Опції товару (наприклад "Потужність") — пігулки-радіокнопки. Активний
   стан читається напряму з :checked (:has), без JS. */
.gp-product-option { margin-top: 22px; }
.gp-product-option-label {
  display: block; font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.gp-option-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.gp-option-pill {
  position: relative; display: inline-flex; align-items: center;
  background: var(--white); border: 1px solid var(--border-med); border-radius: var(--radius-pill);
  padding: 10px 20px; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.gp-option-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.gp-option-pill:hover { border-color: var(--green); }
.gp-option-pill:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--white); }

/* Опис / Характеристики / Відгуки — послідовні картки замість перемикання
   вкладками (кожна відразу видна, скролиш униз — бачиш усі). */
.gp-product-section {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 32px 34px; margin-bottom: 24px;
}
.gp-product-section-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 20px;
}

/* "Всі характеристики" вгорі — якорне посилання на цей блок нижче на тій
   самій сторінці; відступ, щоб фіксований хедер не перекривав заголовок
   після скролу (той самий запас, що й у .page-breadcrumb-wrap). */
#gp-attributes-section { scroll-margin-top: 100px; }
/* "N відгуків" / "Написати відгук" вгорі — якорі на форму й список відгуків
   (обидва id вже існують в самому product/review.twig). */
#review { scroll-margin-top: 100px; }

/* Відгуки — кожен в окремій відмежованій картці, у горизонтальному
   слайдері: .gp-review-viewport обрізає зайве й м'яко гасить краї маскою
   (той самий прийом, що й у "показати більше" для тексту), а
   .gp-review-track — це один flex-рядок з усіма картками, який JS
   зсуває через transform: translateX(...) сторінками по перПейдж штук.
   Ширина карток і крок зсуву рахуються в JS (product.twig) — так зсув
   завжди рівно на "сторінку" незалежно від розміру екрана. */
.gp-review-slider { margin-bottom: 24px; }
.gp-review-viewport {
  overflow: hidden; position: relative;
  /* Маска лише праворуч — зліва в статичному стані ховати нічого не
     повинно (перша картка не мусить виглядати "обрізаною" без взаємодії
     користувача, ліва картка завжди лишається чіткою). */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  /* Запас згори/знизу — картки на hover піднімаються (translateY) і
     отримують тінь (--shadow-md: розмиття 40px), а overflow:hidden
     обрізає горизонтально, тож без запасу зрізало б і підняту картку,
     і саму тінь знизу. Від'ємний margin компенсує доданий падінгом
     простір, щоб секція не "стрибала" за висотою. */
  padding: 24px 0 56px; margin: -24px 0 -56px;
}
/* Клас додає/знімає JS: коли долистано до останньої картки, праворуч
   більше нічого нема — маска-затемнення там теж не потрібна. */
.gp-review-viewport.gp-mask-end {
  -webkit-mask-image: none; mask-image: none;
}
.gp-review-track {
  display: flex; gap: 20px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.gp-review-track .gp-review-card { flex: 0 0 calc((100% - 40px) / 3); }
.gp-review-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--ease), box-shadow var(--ease);
}
.gp-review-card::after {
  content: "\201D"; position: absolute; top: 18px; right: 28px;
  font-family: var(--font-display); font-size: 86px; line-height: 1; color: var(--green-a12); font-weight: 800;
}
.gp-review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.gp-review-card-head { display: flex; align-items: center; gap: 15px; }
.gp-review-avatar {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.gp-review-card-meta { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.gp-review-author {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-review-card .gp-product-rating { margin-top: 3px; }
.gp-review-card .gp-product-rating i { font-size: 14px; }
.gp-review-text { margin: 0; font-size: 16px; color: var(--ink-2); line-height: 1.7; position: relative; z-index: 1; }

/* "+ Залишити відгук" — останнім елементом того самого слайдера, картка
   того ж розміру, але пунктирна і клікабельна (відкриває модалку форми). */
.gp-review-add-card {
  align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--border-med); background: none; cursor: pointer; box-shadow: none; min-height: 180px;
  font: inherit; width: 100%;
}
.gp-review-add-card::after { content: none; }
.gp-review-add-card:hover { transform: translateY(-5px); border-color: var(--green); background: var(--green-tint); box-shadow: none; }
.gp-review-add-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--white);
  display: flex; align-items: center; justify-content: center; transition: background var(--ease);
}
.gp-review-add-icon svg { width: 18px; height: 18px; }
.gp-review-add-card:hover .gp-review-add-icon { background: var(--green-dk); }
.gp-review-add-label {
  font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
}

/* Кнопки гортання — у правому верхньому куті секції, врівень із заголовком
   "Відгуки (N)", а не по центру знизу. Секція, що містить слайдер відгуків,
   стає точкою відліку для абсолютного позиціювання (:has, той самий
   прийом, що й для #column-left:has(#gp-filter)). */
.gp-product-section-plain:has(.gp-review-nav) { position: relative; }
.gp-review-nav { position: absolute; top: -10px; right: 0; display: flex; gap: 10px; }
.gp-review-nav-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 1px solid var(--border-med);
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.gp-review-nav-btn svg { width: 18px; height: 18px; }
.gp-review-nav-btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: var(--white); }
.gp-review-nav-btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 991px) {
  /* На мобільних — не горизонтальний слайдер, а звичайний список карток
     одна під одною: без маски, без transform-зсуву, стрілки сховані.
     JS (layoutMobile у product.twig) показує перші 4 картки, решту —
     через кнопку "Переглянути всі відгуки". */
  .gp-review-viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .gp-review-track { flex-direction: column; }
  .gp-review-track .gp-review-card { flex-basis: auto; width: 100%; }
  .gp-review-nav { display: none; }
}

/* ═══════════════════════════ Модальне вікно (форма відгуку) ═══════════════════════════
   Той самий підхід, що й мобільний попап фільтрів/категорій: темний
   напівпрозорий бекдроп на весь екран, біла картка по центру, кнопка
   закриття колом ПОЗА карткою (на бекдропі), клік по бекдропу закриває. */
.gp-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(19, 33, 26, 0.55);
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; overflow-y: auto;
}
.gp-modal-overlay.open { display: flex; }
.gp-modal-card {
  width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px;
}
.gp-modal-close {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15);
  color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gp-modal-close svg { width: 20px; height: 20px; display: block; }

/* "Погано"/"Добре" по краях зірок рейтингу у формі відгуку — дрібніше й
   сіріше за основний текст форми, це підпис, а не рівнозначний контент. */
.gp-rating-word { font-size: 13px; color: var(--ink-3); }

/* Опис — обрізаний до ~4 рядків тексту, знизу плавне згасання й кнопка
   розгортання по центру. Раніше згасання робив напівпрозорим ::after
   зверху тексту — на практиці майже не було видно (колір фону збігається,
   тож "затемнення" зверху тексту не читалось як згасання САМОГО тексту).
   Через mask-image гасне сам контент — надійніше і не залежить від того,
   який фон під ним (картка чи сторінка). */
.gp-collapse {
  position: relative; overflow: hidden; max-height: 7em;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}
/* Маска знімається лише ПІСЛЯ завершення росту висоти (той самий 0.6s, але
   з transition-delay) — інакше в момент розгортання низ тексту на мить
   "вискакує" на повну непрозорість ще до того, як блок встиг вирости, і
   перехід виглядає різким. При згортанні назад маска повертається одразу
   (delay лише в правилі .expanded, тож не діє у зворотний бік). */
.gp-collapse.expanded {
  max-height: 3000px;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-mask-image 0s linear 0.6s, mask-image 0s linear 0.6s;
  -webkit-mask-image: none;
  mask-image: none;
}

.gp-show-more-wrap { display: flex; justify-content: center; margin-top: 20px; }
.gp-show-more { padding: 12px 28px; font-size: 14.5px; }

/* Опис — без білої картки-рамки навколо, просто текст на фоні сторінки. */
.gp-product-section-plain { background: none; border: none; box-shadow: none; padding: 0; }

.gp-show-more-plain-wrap { text-align: center; margin-top: 16px; }

/* Характеристики — список рядків-"капсул": кожен рядок білий і окремий,
   фон списку (--blue-bg) проглядає у проміжку між ними замість лінії-
   розділювача. Звужена на 70% ширина. Останній рядок — кнопка "Показати
   всі" в тому самому стилі рядка. */
.gp-attrs-list {
  width: 70%; background: var(--blue-bg); border-radius: var(--radius-lg);
  padding: 3px; display: flex; flex-direction: column; gap: 3px;
}
.gp-attrs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--white); border-radius: calc(var(--radius-lg) - 4px); padding: 16px 22px;
}
.gp-attrs-label { font-size: 15px; color: var(--ink-2); }
.gp-attrs-value { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; }

/* Специфічність вища за .gp-attrs-row (display: flex), щоб приховані рядки
   лишалися прихованими незалежно від порядку правил у файлі. */
.gp-attrs-row.gp-row-hidden { display: none; }

.gp-attrs-more-row {
  width: 100%; justify-content: center; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
}
.gp-attrs-more-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; color: var(--green);
  transition: transform var(--ease), color var(--ease); margin-left: 10px;
}
.gp-attrs-more-icon svg { width: 16px; height: 16px; display: block; }
.gp-attrs-more-row.expanded .gp-attrs-more-icon { transform: rotate(180deg); }
.gp-attrs-more-row:hover .gp-attrs-more-icon { color: var(--green-dk); }

@media (max-width: 991px) {
  .gp-attrs-list { width: 100%; }
}
.gp-show-more-plain {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.gp-show-more-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; color: var(--green);
  transition: transform var(--ease), color var(--ease);
}
.gp-show-more-icon svg { width: 16px; height: 16px; display: block; }
.gp-show-more-plain.expanded .gp-show-more-icon { transform: rotate(180deg); }
.gp-show-more-plain:hover .gp-show-more-icon { color: var(--green-dk); }

@media (max-width: 767.98px) {
  .gp-product-hero { grid-template-columns: 1fr; gap: 24px; }
  .gp-product-title { font-size: 22px; margin-bottom: 24px; }
  /* Топ-характеристики (3 картки-прев'ю) — по 2 в ряд, а не на всю ширину
     екрана кожна. */
  .gp-product-attrs { grid-template-columns: repeat(2, 1fr); }
  .gp-gallery-thumb { width: 68px; height: 68px; }
  .gp-product-info .gp-price-new { font-size: 26px; }

  /* Більший відступ між послідовними блоками Опис/Характеристики/Відгуки
     на мобільних — секції щільно зливалися одна з одною. */
  .gp-product-section { margin-bottom: 44px; }

  /* Кнопка "Продовжити" у спливаючому вікні форми відгуку — менша й по
     центру, а не велика й притиснута до правого краю. */
  /* Bootstrap .text-end форсує text-align:right через !important, тож
     саме text-align тут не переб'є — центруємо через flex замість цього. */
  .gp-modal-card .text-end { display: flex; justify-content: center; }
  .gp-modal-card .btn-primary { padding: 12px 28px; font-size: 14px; }
}

/* Підпис зображення в повноекранному лайтбоксі (Magnific Popup) — менший і
   сіріший, щоб не перетягував увагу на себе. Гортання в лайтбоксі (стрілки/
   клавіші) вже вмикається автоматично через gallery:{enabled:true} у
   product.twig, коли в галереї більше однієї картинки. */
.mfp-title { font-size: 13px; color: rgba(255, 255, 255, 0.55); }