/* ==========================================================================
   GreenHealth — блоки лендінгу (v3, корпоративний стиль)

   Концепція знята з офіційного лендінгу:
   https://greenhealth-kombucha-toner.vercel.app/

   Головні відмінності від попередньої версії:
     - Жодних градієнтів, розмитих плям-«світіння», анімованого тексту.
       Замінено на плоский колір і тонкі лінії — прийом самого оригіналу.
     - border-radius: 0 практично всюди (успадковано з токенів у brand.css,
       де --gh-radius* = 0). Круглими лишаються тільки функціональні
       елементи UI-конвенції (радіо-мітка вибору варіанту).
     - Логотип — не текст, а офіційний PNG (header/footer), на темному тлі
       через filter: invert — точно як в оригіналі.
     - Товарне фото статичне, без «дихання»/погойдування/нахилу до
       курсора — оригінал використовує спокійну, статичну предметну
       фотографію.

   Підключати ПІСЛЯ brand.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шапка — незмінно світла (кремова), незалежно від того, що під нею:
   темний hero чи світла секція. Логотип, номер телефону й напис
   Laboratory тому теж незмінні — темний текст, без перемикання кольору.
   На відміну від оригіналу (де header прозорий і absolute, а колір
   логотипа перемикається залежно від того, що під ним), тут sticky-шапка
   з постійним тлом простіша й надійніша: не залежить від того, що саме
   опиниться під нею на конкретному лендінгу.
   -------------------------------------------------------------------------- */
.gh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(241 238 230 / .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--gh-ease), box-shadow .3s var(--gh-ease);
}
.gh-header.is-stuck {
  border-bottom-color: var(--gh-line);
  box-shadow: 0 1px 0 var(--gh-line);
}

.gh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
  padding-block: .65rem;
  transition: min-height .3s var(--gh-ease);
}
.gh-header.is-stuck .gh-header__inner { min-height: 64px; }

.gh-header__logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gh-ink);
}
.gh-header__logo img {
  height: 34px;
  width: auto;
  /* фон файлу прозорий, кольори логотипа не чіпаємо — шапка завжди
     світла, тож жодного фільтра-інверсії тут не потрібно */
}
.gh-header__logo span {
  padding-left: .6rem;
  border-left: 1px solid var(--gh-line-hi);
  color: var(--gh-gray);
  opacity: 1;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gh-header__right { display: flex; align-items: center; gap: 1.5rem; }

.gh-header__phone {
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: -.005em;
  color: var(--gh-ink);
  white-space: nowrap;
}
.gh-header__phone:hover { opacity: .7; }

@media (max-width: 720px) {
  .gh-header__phone { display: none; }
  .gh-header__logo span { display: none; }
}

/* --------------------------------------------------------------------------
   HERO — темна секція, спокійне товарне фото, без сяйва й підказок руху
   -------------------------------------------------------------------------- */
.gh-hero {
  position: relative;
  background: var(--gh-bg-deep);
  color: rgb(255 255 255 / .85);
  padding-block: clamp(6.5rem, 5rem + 5vw, 9rem) clamp(3rem, 2rem + 4vw, 5rem);
  overflow: clip;
}
.gh-hero h1,
.gh-hero .gh-eyebrow { color: #fff; }
.gh-hero .gh-eyebrow { color: rgb(255 255 255 / .6); }

.gh-hero::before,
.gh-hero__glow { display: none; }  /* оригінал не має жодних плям-світіння */

.gh-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) {
  .gh-hero__inner { grid-template-columns: 1fr; }
  .gh-hero__media { order: -1; max-width: 460px; margin-inline: auto; }
}

.gh-hero__title {
  font-size: var(--gh-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
  margin-bottom: .5em;
}
.gh-kinetic { display: inline; }
/* Спокійна поява одним блоком — без летючих слів і розмиття,
   так само стримано, як в оригіналі. */
.gh-kinetic > span {
  display: inline;
  animation: gh-fade-up .8s var(--gh-ease) both;
}
@keyframes gh-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Акцентне слово в заголовку — курсив Prata, без анімованого градієнта */
.gh-hero__title em {
  font-family: var(--gh-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--gh-sage-light);
}

.gh-hero__sub {
  font-size: var(--gh-lead);
  color: rgb(255 255 255 / .68);
  margin-bottom: 1.8rem;
  max-width: 34em;
  animation: gh-fade-up .8s var(--gh-ease) both;
  animation-delay: .15s;
}

.gh-hero__points {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: .6rem;
  animation: gh-fade-up .8s var(--gh-ease) both;
  animation-delay: .22s;
}
.gh-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: .9375rem;
  color: rgb(255 255 255 / .78);
}
.gh-hero__points li::before {
  content: '—';
  flex: 0 0 auto;
  color: var(--gh-sage-light);
}

/* Ціна */
.gh-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.6rem;
}
.gh-price__now {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
  color: #fff;
}
.gh-price__cur { font-size: .42em; font-weight: 500; color: rgb(255 255 255 / .6); margin-left: .18em; }

.gh-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.6rem;
  animation: gh-fade-up .8s var(--gh-ease) both;
  animation-delay: .3s;
}
.gh-hero__cta .gh-btn--primary { background: #fff; color: var(--gh-ink); }
.gh-hero__cta .gh-btn--primary:hover { background: var(--gh-sage-light); color: var(--gh-ink); }

/* .gh-hero — не .gh-section--deep, тому правило в brand.css для темних
   секцій сюди не долітає: кнопка лишалась темним текстом на темному тлі. */
.gh-hero__cta .gh-btn--outline { border-color: rgb(255 255 255 / .4); color: #fff; }
.gh-hero__cta .gh-btn--outline:hover { background: #fff; color: var(--gh-ink); }

.gh-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  font-size: var(--gh-small);
  color: rgb(255 255 255 / .5);
}
.gh-hero__trust span { display: flex; align-items: center; gap: .4rem; }

/* Порядок блоків: заголовок → суть → ціна → кнопка → вигоди */
.gh-hero__content { display: flex; flex-direction: column; }
.gh-hero__content > .gh-badge { order: 1; align-self: flex-start; border-color: rgb(255 255 255 / .4); color: #fff; }
.gh-hero__title  { order: 2; }
.gh-hero__sub    { order: 3; }
.gh-price        { order: 4; }
.gh-hero__cta    { order: 5; }
.gh-hero__points { order: 6; margin-bottom: 1.5rem; }
.gh-hero__trust  { order: 7; }

@media (min-width: 961px) and (max-height: 1000px) {
  .gh-hero { padding-block: 5.5rem 2.5rem; }
  .gh-hero__title { font-size: clamp(2.2rem, 1rem + 3vw, 3.6rem); }
  .gh-hero__sub { margin-bottom: 1.1rem; }
  .gh-price { margin-bottom: 1.1rem; }
  .gh-hero__cta { margin-bottom: 1.1rem; }
  .gh-hero__frame img { max-height: min(48vh, 380px); }
}

/* --- Медіа: товар лежить на темному тлі, статично, без анімації --- */
.gh-hero__media { position: relative; }

.gh-hero__frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, .6rem + 1.6vw, 2.25rem);
  border: 1px solid rgb(255 255 255 / .12);
  animation: gh-fade-up .9s var(--gh-ease) both;
  animation-delay: .1s;
}
.gh-hero__frame::before,
.gh-hero__frame::after { content: none; }  /* без сяйва й «підлоги»-відблиску */

.gh-hero__stage { position: relative; }

.gh-hero__frame img {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: min(58vh, 460px);
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / .35));
}

.gh-placeholder-icon {
  position: relative;
  width: min(58vw, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 5.5rem;
  background: rgb(255 255 255 / .05);
  border: 1px dashed rgb(255 255 255 / .25);
}

.gh-hero__stat {
  margin: clamp(.75rem, 2vw, 1.5rem) auto 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.25rem;
  border: 1px solid rgb(255 255 255 / .18);
  background: rgb(255 255 255 / .04);
  animation: gh-fade-up .9s var(--gh-ease) both;
  animation-delay: .35s;
}
.gh-hero__stat strong {
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gh-sage-light);
}
.gh-hero__stat span { font-size: var(--gh-tiny); color: rgb(255 255 255 / .55); line-height: 1.3; }

@media (max-width: 960px) {
  /* Header тут sticky (в потоці, не absolute, як в оригіналі) — він уже
     займає 88px реального місця. Великий верхній відступ hero, потрібний
     оригіналу для «підкладки» під абсолютно спозиційовану шапку, тут
     зайвий і подвоює відступ. Тримаємо лише невеликий простір для повітря. */
  .gh-hero { padding-block: 2rem 3rem; }
  .gh-hero__frame { padding: .5rem; }
  .gh-hero__frame img { max-height: min(28vh, 260px); }
  .gh-hero__sub { margin-bottom: 1.25rem; }
  .gh-hero__stat { margin-top: .75rem; }
  /* довгий підпис під ціною на вузькому екрані переносився на 2 рядки —
     інформація дублюється у виборі варіанту нижче на сторінці */
  .gh-price .gh-muted { display: none; }
}

@media (max-width: 640px) {
  .gh-hero { padding-block: 1.5rem 2.25rem; }
  .gh-hero__frame { padding: .25rem; }
  .gh-hero__frame img { max-height: min(20vh, 170px); }
  .gh-hero__title { margin-bottom: .35em; }
  .gh-hero__sub { margin-bottom: .9rem; font-size: 1rem; }
  .gh-hero__points { gap: .45rem; margin-bottom: 0; }
  .gh-hero__points li { font-size: .9rem; }
  .gh-price        { margin-bottom: .85rem; }
  .gh-hero__cta    { margin-bottom: 1.35rem; }
  .gh-hero__points { margin-bottom: 1.35rem; }
  .gh-hero__cta { gap: .6rem; }
  .gh-hero__cta .gh-btn { width: 100%; }
  .gh-hero__stat { margin-top: .5rem; padding: .6rem 1rem; gap: .6rem; }
  .gh-hero__stat strong { font-size: 1.3rem; }
  .gh-hero__stat span { font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   Тікер
   -------------------------------------------------------------------------- */
.gh-marquee {
  padding-block: 1.1rem;
  background: var(--gh-ink);
  color: rgb(255 255 255 / .8);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gh-marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: gh-slide 38s linear infinite;
}
.gh-marquee:hover .gh-marquee__track { animation-play-state: paused; }
@keyframes gh-slide { to { transform: translateX(-50%); } }

.gh-marquee__item {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gh-marquee__item::after {
  content: '/';
  color: rgb(255 255 255 / .35);
}

/* --------------------------------------------------------------------------
   BENTO — асиметрична сітка, гострі кути, тонкі лінії
   -------------------------------------------------------------------------- */
.gh-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--gh-line);
  border: 1px solid var(--gh-line);
}

.gh-bento__cell {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  background: var(--gh-surface);
  transition: background-color .3s var(--gh-ease);
}
.gh-bento__cell:hover { background: var(--gh-bg-soft); }

.gh-bento__cell--wide { grid-column: span 3; }
.gh-bento__cell--hero { grid-column: span 4; grid-row: span 2; }
.gh-bento__cell--tall { grid-row: span 2; }

.gh-bento__cell--accent {
  background: var(--gh-bg-deep);
  color: rgb(255 255 255 / .8);
}
.gh-bento__cell--accent:hover { background: #14211a; }
.gh-bento__cell--accent h3 { color: #fff; }
.gh-bento__cell--accent .gh-bento__tag { border-color: rgb(255 255 255 / .3); color: #fff; }

.gh-bento__cell--pale { background: var(--gh-card-warm); }
.gh-bento__cell--pale:hover { background: var(--gh-card-peach); }

.gh-bento__tag {
  align-self: flex-start;
  padding: .35em .85em;
  border: 1px solid var(--gh-line-hi);
  color: var(--gh-gray);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gh-bento__cell h3 { margin: 0; }
.gh-bento__cell p { font-size: var(--gh-small); color: inherit; opacity: .85; margin: 0; }
.gh-bento__cell--accent p { opacity: .75; }

.gh-bento__num {
  font-family: var(--gh-font-accent);
  font-style: italic;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gh-sage);
}
.gh-bento__cell--accent .gh-bento__num { color: var(--gh-sage-light); }

.gh-bento__cell--hero img {
  margin-top: auto;
  width: auto;
  max-width: 100%;
  max-height: 220px;
  align-self: center;
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / .18));
}

@media (max-width: 900px) {
  .gh-bento { grid-template-columns: repeat(4, 1fr); }
  .gh-bento__cell--hero { grid-column: span 4; grid-row: span 1; }
  .gh-bento__cell--wide { grid-column: span 4; }
}
@media (max-width: 560px) {
  .gh-bento { grid-template-columns: repeat(2, 1fr); }
  .gh-bento__cell,
  .gh-bento__cell--wide,
  .gh-bento__cell--hero { grid-column: span 2; grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   Проблеми — редакційний список з тонкою лінією-роздільником
   -------------------------------------------------------------------------- */
.gh-problem {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--gh-line);
}
.gh-problem__icon {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gh-line-hi);
  font-size: 1.15rem;
}
.gh-problem h3 { font-size: 1rem; font-weight: 500; margin-bottom: .3em; }
.gh-problem p { font-size: var(--gh-small); color: var(--gh-gray); margin: 0; }

/* --------------------------------------------------------------------------
   Кроки механізму — нумерація в стилі Prata-курсиву, тонкі лінії
   -------------------------------------------------------------------------- */
.gh-steps { counter-reset: gh-step; display: grid; gap: 1px; background: var(--gh-line); border: 1px solid var(--gh-line); }
.gh-steps--row { grid-template-columns: 1fr; }
@media (min-width: 560px) { .gh-steps--row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gh-steps--row { grid-template-columns: repeat(4, 1fr); } }

.gh-step {
  counter-increment: gh-step;
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--gh-surface);
  transition: background-color .3s var(--gh-ease);
}
.gh-step:hover { background: var(--gh-bg-soft); }
.gh-step::before {
  content: counter(gh-step, decimal-leading-zero);
  display: block;
  margin-bottom: .9rem;
  font-family: var(--gh-font-accent);
  font-style: italic;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gh-sage-light);
}
.gh-step h3 { font-size: 1rem; font-weight: 500; margin-bottom: .35em; }
.gh-step p { font-size: var(--gh-small); color: var(--gh-gray); margin: 0; }

/* --------------------------------------------------------------------------
   Таймлайн результату
   -------------------------------------------------------------------------- */
.gh-timeline { position: relative; display: grid; gap: 1.75rem; padding-left: 2.5rem; }
.gh-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--gh-line-hi);
}
.gh-tl-item { position: relative; }
.gh-tl-item::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 5px;
  width: 11px;
  height: 11px;
  background: var(--gh-sage);
}
.gh-tl-item span {
  display: block;
  font-size: var(--gh-tiny);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gh-sage-dark);
  margin-bottom: .3em;
}
.gh-tl-item h3 { font-size: 1.02rem; font-weight: 500; margin-bottom: .25em; }
.gh-tl-item p { font-size: var(--gh-small); color: var(--gh-gray); margin: 0; }

/* --------------------------------------------------------------------------
   QUIZ
   -------------------------------------------------------------------------- */
.gh-quiz {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  background: var(--gh-surface);
  border: 1px solid var(--gh-line);
}

.gh-quiz__progress {
  height: 2px;
  background: var(--gh-line);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.gh-quiz__bar {
  height: 100%;
  width: 33%;
  background: var(--gh-ink);
  transition: width .45s var(--gh-ease);
}

.gh-quiz__step { display: none; }
.gh-quiz__step.is-active { display: block; animation: gh-fade-up .5s var(--gh-ease) both; }

.gh-quiz__count {
  font-size: var(--gh-tiny);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gh-gray);
  margin-bottom: .6rem;
}
.gh-quiz__q { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.65rem); font-weight: 400; margin-bottom: 1.5rem; }

.gh-quiz__options { display: grid; gap: 0; border-top: 1px solid var(--gh-line); }
.gh-quiz__opt {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: 1.1rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  background: transparent;
  text-align: left;
  font-size: .96rem;
  font-weight: 500;
  color: var(--gh-ink);
  transition: padding-left .2s var(--gh-ease), color .2s var(--gh-ease);
}
.gh-quiz__opt:hover { padding-left: .75rem; color: var(--gh-sage-dark); }
.gh-quiz__opt span {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.gh-quiz__result { display: none; }
.gh-quiz__result.is-active { display: block; animation: gh-fade-up .55s var(--gh-ease) both; }
.gh-quiz__result-card {
  padding: 1.5rem;
  background: var(--gh-sage-pale);
  border: 1px solid var(--gh-line);
  margin-bottom: 1.5rem;
}
.gh-quiz__result-card h3 { font-weight: 500; color: var(--gh-sage-dark); }
.gh-quiz__result-card p:last-child { margin-bottom: 0; }

.gh-quiz__restart {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 1rem;
  font-size: var(--gh-small);
  color: var(--gh-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gh-quiz__restart:hover { color: var(--gh-ink); }

/* --------------------------------------------------------------------------
   Склад INCI
   -------------------------------------------------------------------------- */
.gh-inci {
  padding: 1.6rem 1.75rem;
  background: var(--gh-bg-soft);
  border: 1px solid var(--gh-line);
  font-size: var(--gh-small);
  line-height: 1.8;
  color: var(--gh-gray);
  word-break: break-word;
}
.gh-inci strong { color: var(--gh-ink); }

/* --------------------------------------------------------------------------
   Відгуки
   -------------------------------------------------------------------------- */
.gh-review {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.75rem;
  background: var(--gh-surface);
  border: 1px solid var(--gh-line);
  height: 100%;
}
.gh-review__text { font-size: .96rem; line-height: 1.6; margin: 0; flex: 1; }
.gh-review__author { display: flex; align-items: center; gap: .8rem; }
.gh-review__avatar {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--gh-bg-soft);
  color: var(--gh-sage-dark);
  font-weight: 500;
  font-size: .875rem;
}
.gh-review__name { font-weight: 500; font-size: .9rem; line-height: 1.25; }
.gh-review__meta { font-size: var(--gh-tiny); color: var(--gh-gray); }

/* --------------------------------------------------------------------------
   FAQ — тонкі лінії, +/− без круглих тіней
   -------------------------------------------------------------------------- */
.gh-faq { max-width: 800px; margin-inline: auto; }

.gh-faq__item {
  border-bottom: 1px solid var(--gh-line);
}

.gh-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.3rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--gh-ink);
  transition: color .2s var(--gh-ease);
}
.gh-faq__q:hover { color: var(--gh-sage-dark); }

.gh-faq__q::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--gh-gray);
  transition: rotate .3s var(--gh-ease);
}
.gh-faq__item.is-open .gh-faq__q::after { rotate: 45deg; }

.gh-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--gh-ease);
}
.gh-faq__item.is-open .gh-faq__a { grid-template-rows: 1fr; }
.gh-faq__a > div { overflow: hidden; }
.gh-faq__a p {
  padding: 0 0 1.3rem;
  color: var(--gh-gray);
  font-size: .9375rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Форма замовлення
   -------------------------------------------------------------------------- */
.gh-order__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .gh-order__inner { grid-template-columns: 1fr; } }

.gh-form {
  padding: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  background: var(--gh-surface);
  border: 1px solid var(--gh-line);
}

.gh-field { margin-bottom: 1rem; position: relative; }
.gh-field label {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--gh-small);
  font-weight: 500;
}

.gh-field input,
.gh-field select,
.gh-field textarea {
  width: 100%;
  padding: .9em 1em;
  border: 1px solid var(--gh-line-hi);
  background: var(--gh-bg);
  transition: border-color .2s var(--gh-ease);
}
.gh-field input:focus,
.gh-field select:focus,
.gh-field textarea:focus {
  outline: none;
  border-color: var(--gh-ink);
}

.gh-field__error {
  display: none;
  margin-top: .4rem;
  font-size: var(--gh-tiny);
  color: var(--gh-rust);
}
.gh-field.has-error .gh-field__error { display: block; }
.gh-field.has-error input { border-color: var(--gh-rust); }

.gh-form__note {
  margin-top: 1rem;
  font-size: var(--gh-tiny);
  color: var(--gh-gray);
  text-align: center;
}

/* Варіанти */
.gh-variants { display: grid; gap: 0; margin-bottom: 1.4rem; border: 1px solid var(--gh-line-hi); }

.gh-variant {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--gh-line);
  transition: background-color .2s var(--gh-ease);
}
.gh-variant:last-child { border-bottom: 0; }
.gh-variant:hover { background: var(--gh-bg-soft); }
.gh-variant input { position: absolute; opacity: 0; pointer-events: none; }
.gh-variant:has(input:checked) { background: var(--gh-sage-pale); }

.gh-variant__mark {
  flex: 0 0 18px;
  height: 18px;
  border: 1.5px solid var(--gh-line-hi);
  border-radius: 50%;   /* функціональна радіо-мітка — лишається круглою */
  transition: border-color .2s var(--gh-ease), box-shadow .2s var(--gh-ease);
}
.gh-variant:has(input:checked) .gh-variant__mark {
  border-color: var(--gh-ink);
  box-shadow: inset 0 0 0 3px var(--gh-bg), inset 0 0 0 18px var(--gh-ink);
}
.gh-variant__body { flex: 1; line-height: 1.35; }
.gh-variant__title { font-weight: 500; font-size: .92rem; display: block; }
.gh-variant__desc { font-size: var(--gh-tiny); color: var(--gh-gray); }
.gh-variant__price { font-weight: 500; font-size: 1rem; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Вибір варіанту: концентрація × фасування
   -------------------------------------------------------------------------- */
.gh-axis { margin-bottom: 1.1rem; }

.gh-axis__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}
.gh-axis__label {
  font-size: var(--gh-small);
  font-weight: 500;
}
.gh-axis__chosen {
  font-size: var(--gh-tiny);
  color: var(--gh-gray);
}

.gh-axis__opts { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--gh-line-hi); }

.gh-chip {
  flex: 1 1 auto;
  min-width: 88px;
  padding: .7rem .95rem;
  border: 0;
  border-right: 1px solid var(--gh-line-hi);
  background: var(--gh-surface);
  color: var(--gh-ink);
  text-align: center;
  line-height: 1.25;
  transition: background-color .2s var(--gh-ease), color .2s var(--gh-ease);
}
.gh-chip:last-child { border-right: 0; }
.gh-chip:hover:not(:disabled) { background: var(--gh-bg-soft); }

.gh-chip__title { display: block; font-weight: 500; font-size: .94rem; }
.gh-chip__note  { display: block; font-size: var(--gh-tiny); color: var(--gh-gray); margin-top: .1rem; }

.gh-chip.is-active {
  background: var(--gh-ink);
  color: #fff;
}
.gh-chip.is-active .gh-chip__note { color: rgb(255 255 255 / .7); }

.gh-chip:disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.gh-sku {
  font-size: var(--gh-tiny);
  color: var(--gh-gray);
  margin-bottom: 1rem;
}

/* Лічильник кількості — прямокутний, без пігулки */
.gh-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gh-line-hi);
  margin-bottom: 1.25rem;
}
.gh-qty__label { line-height: 1.35; }
.gh-qty__title { font-weight: 500; font-size: .92rem; display: block; }
.gh-qty__desc  { font-size: var(--gh-tiny); color: var(--gh-gray); }

.gh-qty__control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--gh-line-hi);
}
.gh-qty__btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gh-ink);
  transition: background-color .2s var(--gh-ease);
}
.gh-qty__btn:hover:not(:disabled) { background: var(--gh-ink); color: #fff; }
.gh-qty__btn:disabled { opacity: .3; cursor: not-allowed; }

.gh-qty__input {
  width: 46px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--gh-line-hi);
  background: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  height: 36px;
  -moz-appearance: textfield;
}
.gh-qty__input::-webkit-outer-spin-button,
.gh-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gh-qty__input:focus { outline: none; }

@media (max-width: 420px) {
  .gh-qty { flex-direction: column; align-items: stretch; gap: .85rem; }
  .gh-qty__control { align-self: center; }
}
@media (pointer: coarse) {
  .gh-qty__btn { width: 44px; height: 44px; }
  .gh-qty__input { width: 56px; height: 44px; }
}

/* Підказки Нової пошти */
.gh-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--gh-surface);
  border: 1px solid var(--gh-ink);
  box-shadow: var(--gh-shadow);
  display: none;
}
.gh-suggest.is-open { display: block; }

.gh-suggest__item {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  background: none;
  text-align: left;
  font-size: .9rem;
  line-height: 1.4;
  transition: background-color .15s var(--gh-ease);
}
.gh-suggest__item:last-child { border-bottom: 0; }
.gh-suggest__item:hover,
.gh-suggest__item.is-active { background: var(--gh-bg-soft); }
.gh-suggest__item small { display: block; color: var(--gh-gray); font-size: var(--gh-tiny); }

.gh-suggest__empty {
  padding: .85rem 1rem;
  font-size: var(--gh-small);
  color: var(--gh-gray);
}

.gh-field.is-loading label::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: .5em;
  vertical-align: -1px;
  border: 1.5px solid var(--gh-line-hi);
  border-top-color: var(--gh-ink);
  border-radius: 50%;
  animation: gh-spin .7s linear infinite;
}
@keyframes gh-spin { to { rotate: 360deg; } }

.gh-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.1rem 0;
  margin-bottom: 1.1rem;
  border-top: 1px solid var(--gh-line-hi);
  font-size: 1rem;
}
.gh-total strong { font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; }

.gh-form__success { display: none; text-align: center; padding: 1.5rem 0; }
.gh-form.is-sent .gh-form__success { display: block; animation: gh-fade-up .5s var(--gh-ease) both; }
.gh-form.is-sent .gh-form__body { display: none; }
.gh-form__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  background: var(--gh-ink);
  color: #fff;
  font-size: 1.5rem;
}
.gh-form__success-icon::before { content: '✓'; }

/* --------------------------------------------------------------------------
   Гарантії
   -------------------------------------------------------------------------- */
.gh-guarantee {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.3rem 1.4rem;
  background: var(--gh-surface);
  border: 1px solid var(--gh-line);
}
.gh-guarantee__icon {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gh-line-hi);
  font-size: 1.1rem;
}
.gh-guarantee h3 { font-size: .96rem; font-weight: 500; margin-bottom: .2em; }
.gh-guarantee p { font-size: var(--gh-small); color: var(--gh-gray); margin: 0; }

/* --------------------------------------------------------------------------
   Швидкий зв'язок — Viber / Telegram
   -------------------------------------------------------------------------- */
.gh-contacts { display: grid; gap: 0; border: 1px solid var(--gh-line-hi); }

.gh-contact {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--gh-line);
  background: var(--gh-surface);
  color: var(--gh-ink);
  font-weight: 500;
  transition: background-color .2s var(--gh-ease);
}
.gh-contacts .gh-contact:last-child { border-bottom: 0; }
.gh-contact:hover { background: var(--gh-bg-soft); color: var(--gh-ink); }
.gh-contact__icon {
  flex: 0 0 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gh-line-hi);
}
.gh-contact__icon svg { width: 17px; height: 17px; }
.gh-contact small { display: block; font-weight: 400; font-size: var(--gh-tiny); color: var(--gh-gray); }

/* плаваюча кнопка месенджерів */
.gh-fab {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 55;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: .5rem;
}
.gh-fab__toggle {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--gh-ink);
  color: #fff;
  box-shadow: var(--gh-shadow);
  transition: opacity .2s var(--gh-ease);
}
.gh-fab__toggle:hover { opacity: .85; }
.gh-fab__toggle svg { width: 24px; height: 24px; }

.gh-fab__list {
  display: grid;
  gap: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: bottom right;
  transition: opacity .22s var(--gh-ease), transform .22s var(--gh-ease), visibility .22s;
}
.gh-fab.is-open .gh-fab__list { opacity: 1; visibility: visible; transform: none; }

.gh-fab__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem .55rem .55rem;
  background: var(--gh-surface);
  border: 1px solid var(--gh-line-hi);
  box-shadow: var(--gh-shadow);
  font-size: .875rem;
  font-weight: 500;
  color: var(--gh-ink);
  white-space: nowrap;
}
.gh-fab__item:hover { color: var(--gh-sage-dark); }
.gh-fab__item svg { width: 26px; height: 26px; flex: 0 0 26px; }

@media (max-width: 780px) { .gh-fab { display: none; } }

/* --------------------------------------------------------------------------
   Підвал
   -------------------------------------------------------------------------- */
.gh-footer {
  padding-block: 3rem 2rem;
  background: var(--gh-bg-deep);
  color: rgb(255 255 255 / .55);
  font-size: var(--gh-small);
}
.gh-footer a { color: rgb(255 255 255 / .85); }
.gh-footer a:hover { color: #fff; }

.gh-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.gh-footer__logo img {
  height: 30px;
  width: auto;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}
.gh-footer__logo span {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}

.gh-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.gh-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.gh-footer__legal {
  max-width: 82ch;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: var(--gh-tiny);
  color: rgb(255 255 255 / .38);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Липка панель (мобільні)
   -------------------------------------------------------------------------- */
.gh-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: .75rem var(--gh-gutter);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  background: rgb(241 238 230 / .95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--gh-line-hi);
  transform: translateY(110%);
  transition: transform .3s var(--gh-ease);
}
.gh-sticky-bar.is-visible { transform: none; }
.gh-sticky-bar__price { font-weight: 400; font-size: 1.2rem; line-height: 1.1; letter-spacing: -.02em; }

.gh-sticky-bar__im {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gh-line-hi);
  color: var(--gh-ink);
  background: var(--gh-surface);
}
.gh-sticky-bar__im svg { width: 20px; height: 20px; }
.gh-sticky-bar .gh-btn { flex: 1; padding: .85em 1.2em; }

@media (max-width: 780px) {
  .gh-sticky-bar { display: flex; }
  body { padding-bottom: 74px; }
}