/* ==========================
   Global & Typography
========================== */
:root {
  --clr-bg: #ffffff;
  --clr-text: #111;
  --clr-accent: #000;
  --clr-secondary: #555;
  --radius: 8px;
  --transition: 0.4s ease;
  --max-width: 1200px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  overflow-x: hidden;
}
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-primary {
  background-color: var(--clr-accent);
  color: #fff;
  border: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--clr-accent);
  color: var(--clr-accent);
}
.btn-outline:hover {
  background-color: var(--clr-accent);
  color: #fff;
}
.btn-add {
  background-color: var(--clr-accent);
  color: #fff;
  border: none;
  width: 100%;
  margin-top: 0.8rem;
}
.btn-add:hover {
  opacity: 0.9;
}

/* ==========================
   Header & Navigation
========================== */
.site-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--clr-bg);
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform var(--transition);
}
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.logo {
  font-size: 1.5rem;
  font-weight: 700;
}
.main-nav ul {
  display: flex;
  gap: 2rem;
}
.main-nav a {
  font-size: 0.95rem;
  color: var(--clr-text);
}
.icon-btn {
  background: none;
  border: none;
  margin-left: 1rem;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.icon-btn:hover {
  opacity: 0.7;
}

/* Hide/show header on scroll */
.header-hidden {
  transform: translateY(-100%);
}

/* ==========================
   Hero Section
========================== */
.hero {
  padding-top: 120px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-title {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
}
.hero-title .filled {
  color: var(--clr-accent);
}
.hero-title .outline {
  position: absolute;
  top: 0.5rem;
  left: 0;
  color: transparent;
  -webkit-text-stroke: 2px var(--clr-text);
  z-index: -1;
}
.hero-subtitle {
  margin-top: 1rem;
  color: var(--clr-secondary);
  font-size: 1.1rem;
}
.hero-cta {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
.hero-image img {
  max-height: 400px;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* ==========================
   Products Grid
========================== */
.products-grid {
  padding: 100px 0;
}
.products-grid h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 700;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
}
.product-card {
  background: #fafafa;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: center;
  transition: var(--transition);
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.product-card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
}
.product-card .price {
  font-size: 1rem;
  color: var(--clr-text);
}

/* ==========================
   Features & Technology
========================== */
.features, .technology {
  padding: 80px 0;
  background: #fff;
}
.features h2, .technology h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
}
.features-list, .tech-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}
.feature-item {
  background: #f7f7f7;
  padding: 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  transition: var(--transition);
}
.feature-item:hover {
  background: #eaeaea;
}
.feature-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.tech-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
.tech-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--clr-accent);
}

/* ==========================
   Reviews Carousel
========================== */
.reviews {
  padding: 80px 0;
  background: #fafafa;
}
.reviews h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.reviews-list {
  display: flex;
  overflow: hidden;
  position: relative;
}
.review-item {
  min-width: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.review-item.active {
  opacity: 1;
}
.review-item .rating {
  font-size: 1.2rem;
  color: var(--clr-accent);
  margin-bottom: 0.5rem;
}
.review-item .review-text {
  font-style: italic;
  margin-bottom: 0.5rem;
}
.review-item .review-author {
  font-weight: 600;
  color: var(--clr-secondary);
}
/* Carousel controls */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

/* ==========================
   FAQ, About & Contact
========================== */
.faq, .about, .contact {
  padding: 80px 0;
}
.faq h2, .about h2, .contact h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}
.faq-item {
  max-width: 800px;
  margin: 1rem auto;
}
.faq-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.contact-form {
  max-width: 600px;
  margin: 1rem auto;
  display: grid;
  gap: 1rem;
}
.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: var(--radius);
}

/* ==========================
   Footer
========================== */
.site-footer {
  background: #111;
  color: #fff;
  padding: 40px 0;
}
.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer-links a {
  color: #aaa;
  margin-right: 1.5rem;
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: #fff;
}
.footer-copy {
  font-size: 0.8rem;
}

/* ==========================
   Responsive
========================== */
@media (max-width: 768px) {
  .hero-content { flex-direction: column; text-align: center; }
  .hero-image { margin-top: 2rem; }
  .grid { grid-template-columns: 1fr 1fr; }
  .features-list, .tech-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
}
/* === Виправлення накладання immersive / comfort === */
.hero-title {
  /* Забезпечуємо лінійний інтервал між блоками */
  line-height: 1.1;
}

.hero-title .filled,
.hero-title .outline {
  display: block !important;     /* кожен на окремому рядку */
  position: static !important;   /* відміняємо всі absolute */
  margin: 0;                     /* скидати зайві відступи */
}

.hero-title .filled {
  margin-bottom: 0.3em;          /* відстань до наступного слова */
}

.hero-title .outline {
  /* margin-top не обов’язковий, оскільки вже виставили margin-bottom вище */
  color: transparent;
  -webkit-text-stroke: 2px var(--clr-text);
}
/* ==========================
   Навігація — гнучкий рядок
========================== */
.main-nav ul {
  display: flex;            /* флекс-контейнер */
  flex-wrap: nowrap;        /* заборонити переноси */
  white-space: nowrap;      /* текст всередині теж не переноситься */
  overflow-x: auto;         /* якщо не влізає — з’явиться горизонтальний скрол */
  gap: 1rem;                /* відстань між пунктами */
  padding: 0;               /* скидати дефолтні відступи */
  margin: 0;                /* скидати дефолтні відступи */
}

/* Лінки робимо компактнішими */
.main-nav ul li a {
  display: inline-block;
  padding: 0.5rem 0.75rem;  /* змінити, щоб менше займало місця */
  font-size: 0.9rem;        /* трохи менший шрифт, щоб більше влізло */
  white-space: nowrap;      /* дублюємо, про всяк випадок */
}

/* Щоб приховати горизонтальний скролбар на десктопі */
.main-nav ul::-webkit-scrollbar {
  height: 6px;
}
.main-nav ul::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
.main-nav ul::-webkit-scrollbar-track {
  background: transparent;
}

/* При необхідності: трохи більше місця для навігації у хедері */
.header-wrapper {
  padding: 0 2rem;         /* розширити бічні відступи хедера */
}
/* 1. Зменшуємо бічні відступи хедера */
.header-wrapper {
  padding: 0 1rem;   /* було 0 2rem; тепер 1rem */
}

/* 2. Вирівнюємо логотип і навігацію лівіше */
.logo {
  margin-right: 1rem;  /* зменшили простір після логотипу */
}

/* 3. Робимо меню компактнішим */
.main-nav ul {
  gap: 0.75rem;       /* було 1rem; тепер менше */
  margin-left: 0;     /* прибрали зайві відступи перед списком */
}

/* 4. Зменшуємо внутрішні відступи пунктів */
.main-nav ul li a {
  padding: 0.4rem 0.6rem;   /* було 0.5rem 0.75rem */
  font-size: 0.85rem;       /* трохи зменшили шрифт */
}

/* 5. Приховуємо скролбар, але залишаємо можливість прокручувати */
.main-nav ul {
  overflow-x: auto;
}
.main-nav ul::-webkit-scrollbar {
  display: none;
}
/* === Хедер по всій ширині, без порожніх полів зліва === */
.site-header .container {
  width: 100%;       /* контейнер займає повністю ширину екрану */
  max-width: none;   /* скинути максимальну ширину */
  margin: 0;         /* прибрати автоматичні відступи по центру */
  padding: 0;        /* прибрати внутрішні відступи */
}

/* Вирівнюємо елементи хедера ліворуч */
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* елементи починають з лівого краю */
  gap: 2rem;                     /* відстань між логотипом, меню, іконками */
  padding: 0 1rem;               /* невеликий паддінг зверху/знизу, якщо треба */
}

/* Прибираємо додатковий margin у логотипу */
.logo {
  margin: 0;
}

/* Компактне меню без переносу */
.main-nav ul {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 1rem;           /* відстань між пунктами */
  margin: 0;           /* прибрати зовнішні відступи */
  padding: 0;          /* прибрати внутрішні відступи */
  overflow-x: auto;    /* скрол при переповненні */
}

/* Дрібніші лінки для вмісту */
.main-nav ul li a {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Ховаємо скролбар (опціонально) */
.main-nav ul::-webkit-scrollbar { display: none; }
/* Забираємо будь-які обмеження за шириною у контейнера хедера */
.site-header .container {
  max-width: none;
  padding: 0 0.5rem;
}

/* Навігація — гнучка, але без переносу рядків */
.main-nav ul {
  display: flex;
  flex-wrap: nowrap;        /* заборона переносу */
  white-space: nowrap;      /* текст теж не переноситься */
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;              /* мінімальний проміжок */
  margin: 0;
  padding: 0;
  overflow: visible;        /* не обрізати нічого */
}

/* Дозволяємо пунктам звужуватися, щоб вмістилися довгі назви */
.main-nav ul li {
  flex: 1 1 auto;           /* ламаємо рівні ширини, але даємо змогу звужуватися */
}

/* Зменшуємо шрифт і паддінги лінків до мінімуму */
.main-nav ul li a {
  display: inline-block;
  padding: 0.2rem 0.4rem;    /* мінімальні відступи */
  font-size: 0.8rem;         /* трохи менший шрифт */
  white-space: nowrap;       /* убезпечуємо від переносу */
}

/* Якщо все-таки не вистачає місця — буде плавний горизонтальний скрол, але без обрізів */
.main-nav ul {
  overflow-x: auto;
}
.main-nav ul::-webkit-scrollbar { display: none; }
/* Меню: рівномірно розподілити елементи по всій ширині */
.main-nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; /* ключове: розподіл по краях та між ними */
  align-items: center;
  width: 100%;                    /* зайняти всю доступну ширину */
  margin: 0;
  padding: 0;
}

/* Прибираємо flex:1 з <li>, щоб не змінювати базовий розмір */
.main-nav ul li {
  flex: 0 1 auto;
}

/* Компактні лінки */
.main-nav ul li a {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Забороняємо перенос рядка */
.main-nav ul li a {
  white-space: nowrap;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--clr-bg);
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);

  /* Ось це — для плавності появи/зникнення */
  transition: transform 0.4s ease;
}

.header-hidden {
  transform: translateY(-100%);
}
.logo:hover {
  color: #D4AF37;
}
.logo {
  display: inline-block;
  position: relative;             /* потрібно для псевдоелемента */
  transform-origin: left center;
  transition:
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
    letter-spacing 0.3s ease;
}

/* Пульсуюča тінь (легка “glow”) */
.logo:hover {
  color: #D4AF37;
  transform: scale(1.1);
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(212,175,55,0.7);
}

/* Анімована підкреслення */
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #D4AF37;
  transition: width 0.4s ease;
}

.logo:hover::after {
  width: 100%;
}
.logo {
  display: inline-block;
  position: relative;
  transform-origin: center center;  /* масштаб від центру */
  transition:
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
    letter-spacing 0.3s ease;
}

/* Hover-ефекти */
.logo:hover {
  color: #D4AF37;
  transform: scale(1.1);               /* збільшуємо від центру */
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(212,175,55,0.7);
}

/* Анімоване підкреслення */
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;                           /* стартуємо з центру */
  transform: translateX(-50%);         /* вирівнюємо під логотип */
  width: 0;
  height: 2px;
  background: #D4AF37;
  transition: width 0.4s ease;
}

.logo:hover::after {
  width: 100%;                         /* підкреслення на всю ширину */
}
/* 1. Флекс-контейнер для шапки */
.header-wrapper {
  display: flex;
  align-items: center;
  /* Ми не використовуємо gap між логотипом і меню, а дамо меню фіксований маргін */
}

/* 2. Логотип — фіксованої зони, масштабується без впливу на потік */
.logo {
  flex: 0 0 auto;               /* не даємо цьому блоку рости чи звужуватися */
  width: 120px;                 /* базова ширина (підкоригуйте під свій дизайн) */
  text-align: left;
  display: inline-block;
  position: relative;
  transform-origin: center center;
  transition: color 0.3s ease,
              transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
              text-shadow 0.3s ease;
}

.logo:hover {
  color: #D4AF37;
  transform: scale(1.1);
  text-shadow: 0 0 8px rgba(212,175,55,0.7);
}

/* підкреслення */
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #D4AF37;
  transition: width 0.4s ease;
}
.logo:hover::after {
  width: 100%;
}

/* 3. Навігація — відступ фіксований, не залежить від лого */
.main-nav {
  margin-left: 1.5rem;         /* саме ця відстань фіксує меню, не дає йому «їздити» */
}

.main-nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 1.5rem);  /* вирахуємо відступ ліворуч */
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
/* ================================
   Фіксуємо розмір пунктів меню
================================= */
.main-nav ul li {
  flex: 0 0 auto;    /* не даємо пунктам «зжиматися» менше за їх внутрішній контент */
}

/* ================================
   Додаємо простору справа, щоб крайні пункти не обрізались
================================= */
.main-nav ul {
  padding: 0 1.5rem 0 1rem;  /* зверху/знизу 0, зліва 1rem, справа 1.5rem */
  overflow-x: auto;          /* якщо не влізає — з’явиться скрол (прихований) */
  white-space: nowrap;
}

/* ================================
   Приховуємо скролбар, але даємо можливість прокрутити
================================= */
.main-nav ul::-webkit-scrollbar {
  display: none;
}
.header-wrapper {
  display: flex;
  align-items: center;
}

/* Всі елементи: лого + меню + іконки */
/* Лого — без змін, просто флешить свою ширину */
.logo {
  flex: 0 0 auto;
}

/* Меню отримує відступ зліва */
.main-nav {
  flex: 1 1 auto;
  margin-left: 2rem;  /* Відстань між лого і меню */
}
.logo {
  margin-left: 24px;
}
/* Стандартний стан контурного тексту */
.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--clr-text);
  transition: -webkit-text-stroke-color 0.3s ease;
}

/* Hover-ефект: рамка загорить золотом */
.hero-title:hover .outline {
  -webkit-text-stroke-color: #D4AF37; /* або замініть на #C0C0C0, #00C9B1, #FF6D2D */
}

/* Легке світіння для залитого слова */
.hero-title .filled {
  transition: text-shadow 0.3s ease;
}
.hero-title:hover .filled {
  text-shadow: 0 0 6px rgba(212,175,55,0.6);
}
/* Початковий стан: прозорий текст із чорним контуром */
/* 1) Початковий стан: прозора заливка + сталий чорний контур */
.hero-title .outline {
  /* прозора заливка */
  color: transparent;
  /* сталий чорний контур, незалежно від hover */
  -webkit-text-stroke: 2px #000;
  /* плавна анімація зміни заливки */
  transition: color 0.5s ease;
}

/* 2) При наведенні: всередині букв з’являється колір, контур залишається чорним */
.hero-title:hover .outline {
  color: #D4AF37;            /* або інший бажаний fill-колір */
  /* контур не змінює свого кольору */
}
/* ==============================
 /* ==============================
   Header: чорний фон + білий текст
============================== */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: #000;    /* чорний фон */
  color: #fff;               /* білий текст */
  z-index: 1000;
}

/* Контейнер на всю ширину */
.site-header .container {
  width: 100%;
  max-width: none;
  padding: 0 1rem;
  margin: 0 auto;
}

/* Wrapper: лого + навігація + іконки */
.header-wrapper {
  display: flex;
  align-items: center;
  height: 60px;
}

/* Логотип */
.logo {
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-right: 1rem;
  transition: color 0.3s ease;
}
.logo:hover {
  color: #D4AF37;
}

/* ==============================
   Navigation Menu (flex)
============================== */
.main-nav {
  flex: 1 1 auto;
  overflow: hidden;          /* ховаємо скролбар, якщо він з’явиться */
}

.main-nav ul {
  display: flex;
  flex-wrap: nowrap;         /* ніяких переносів */
  justify-content: space-evenly; /* рівномірно по всій ширині */
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;       /* текст без переносу */
}

/* Пункти меню */
.main-nav ul li {
  flex: 1 1 auto;            /* дозволяємо звуження/розширення */
  min-width: 0;              /* щоб можна було звужуватись */
}

/* Лінки меню */
.main-nav ul li a {
  display: block;
  padding: 0.4rem 0.5rem;     /* компактні відступи */
  font-size: 0.85rem;         /* зменшений шрифт для вміщення */
  color: #fff;
  text-align: center;
  transition: color 0.3s ease;
}

/* Hover-ефект */
.main-nav ul li a:hover {
  color: #D4AF37;             /* золотий акцент */
}

/* Прибраний скролбар, але залишається прокрутка */
.main-nav::-webkit-scrollbar {
  height: 0;
}
/* 1) Вирівнюємо header-wrapper */
.header-wrapper {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
}

/* 2) Логотип завжди по лівому краю */
.logo {
  flex: 0 0 auto;
  margin: 0;            /* прибираємо зайві відступи */
  font-size: 1.4rem;
  color: #fff;
}

/* 3) Навігація займає весь залишковий простір */
.main-nav {
  flex: 1 1 auto;
  overflow: hidden;
}

/* 4) Список пунктів — рівномірно по всій ширині */
.main-nav ul {
  display: flex;
  justify-content: space-evenly; /* або space-between */
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;         /* обов’язково */
  white-space: nowrap; /* без переносів */
}

/* 5) Пункти меню — компактні, але гнучкі */
.main-nav ul li {
  flex: 1 1 auto;      /* рівномірно ділять простір */
  min-width: 0;
}

/* 6) Стиль лінків */
.main-nav ul li a {
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  transition: color 0.3s ease;
}
.main-nav ul li a:hover {
  color: #D4AF37;
}
/* 1) Повністю прибираємо padding у контейнера хедера */
/* ===== Вирівнювання геро-блоку по вертикалі ===== */
/* Hero Subtitle Styling */
.hero-subtitle {
  font-family: 'Playfair Display', serif;  /* елегантний шрифт */
  font-size: 1.25rem;                      /* достатньо великий для читання */
  color: #444;                             /* м’який темно-сірий колір */
  max-width: 600px;                        /* обмежуємо ширину для комфортного читання */
  margin: 1rem 0 0;                        /* відступ зверху */
  line-height: 1.6;                        /* інтервал між рядками */
  transition: color 0.4s ease, transform 0.4s ease;  /* плавні переходи */
  transform-origin: left center;           /* точка початку трансформації */
}

/* Hover-ефект — легкий зсув і акцентний колір */
.hero-subtitle:hover {
  color: #D4AF37;                          /* золотистий акцент */
  transform: translateX(8px);              /* невеликий зсув праворуч */
}
/* ==============================
   Hero Subtitle: чорний шрифт + hover-анімація
============================== */
.hero-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: #111;                    /* глибокий чорний */
  max-width: 600px;
  margin: 1rem 0 0;
  line-height: 1.6;
  position: relative;             /* для pseudo-елемента */
  transition: transform 0.4s ease, color 0.4s ease;
}

/* Псевдоелемент для анімованого підкреслення */
.hero-subtitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #D4AF37;            /* золоте підкреслення */
  transition: width 0.4s ease;
}

/* Hover-ефект */
.hero-subtitle:hover {
  color: #000;                    /* ще глибший чорний */
  transform: translateY(-3px);    /* легкий підйом «в плані» */
}
.hero-subtitle:hover::after {
  width: 100%;                    /* підкреслення на всю ширину */
}
/* ===== Hero Typing Effect ===== */
.hero-typing {
  font-family: monospace;
  font-size: 1rem;
  color: #444;
  margin-top: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #444;       /* курсор */
  animation: blink-cursor 0.8s steps(1) infinite;
}

@keyframes blink-cursor {
  0%, 50%   { border-color: transparent; }
  51%,100% { border-color: #444; }
}
/* ===== Hero Typing Static Animation ===== */
.hero-typing {
  font-family: 'Playfair Display', serif;  /* елегантний шрифт */
  font-size: 2rem;                        /* великий масштаб */
  font-weight: 600;
  color: #222;                            /* темно-сірий, майже чорний */
  margin-top: 2rem;
  opacity: 0;                             /* початково сховано */
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;  /* запускаємо анімацію */
}

/* Ключові кадри: підйом + поява */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === Hero Static Line Hover Effect === */
.hero-typing {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  color: #222;
  margin-top: 2rem;
  display: inline-block;         /* щоб transform не вплинув на інші елементи */
  transition: transform 0.6s ease, opacity 0.6s ease, color 0.6s ease, text-shadow 0.6s ease;
}

/* === Hover: масштаб + світіння + підйом + зникання === */
.hero-typing:hover {
  color: #D4AF37;                /* золотий акцент */
  transform: scale(1.05) translateY(-10px); /* трохи більший і вище */
  text-shadow: 0 0 12px rgba(212,175,55,0.8);
  opacity: 0;                    /* плавно зникає */
}

/* === Повернення до стану за замовчуванням після hover out === */
/* Тут використано transition, тому після зняття hover текст повернеться назад плавно */
/* Жирний білий шрифт для пунктів меню */
.main-nav ul li a {
  color: #FFFFFF;           /* білий колір тексту */
  font-weight: 600;         /* напівжирний/жирний шрифт */
  font-size: 0.95rem;       /* трохи збільшимо розмір для кращої читабельності */
  text-transform: none;     /* зберігаємо реєстр без змін */
  transition: color 0.2s ease;
}

/* Hover-ефект: можна залишити золотисту підсвітку */
.main-nav ul li a:hover {
  color: #D4AF37;           /* або інший акцентний колір */
}
/* Контейнер і wrapper */
.site-header .container {
  padding: 0;
}
.header-wrapper {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
}

/* Логотип */
.logo {
  flex: 0 0 auto;
  margin: 0;
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
}

header {
  background: black;
  padding: 12px 0;
}

header ul {
  display: flex;
  justify-content: center; /* Вирівнювання по центру */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px; /* Великий відступ між пунктами */
  flex-wrap: wrap; /* Щоб слова не обрізались, а переносились */
}

header ul li {
  display: inline-block;
}

header ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  padding: 6px 8px; /* Додатковий простір для читабельності */
  white-space: nowrap; /* Не переносити окремі слова */
  transition: color 0.3s ease;
}

header ul li a:hover {
  color: #ffcc00; /* Акуратний колір при наведенні */
}
header {
  background: black;
  padding: 14px 0;
}

header ul {
  display: flex;
  justify-content: center; /* Центрування меню */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px; /* Відстань між пунктами меню */
}

header ul li {
  display: inline-block;
}

header ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  padding: 8px 12px; /* Додатковий простір для читабельності */
  white-space: nowrap; /* Щоб слова не ламались */
  transition: color 0.3s ease;
}

header ul li a:hover {
  color: #ffcc00; /* Підсвітка при наведенні */
}
/* Базові стилі для хедера */
header {
  background-color: #000;
  padding: 16px 0;
}

/* --------------- */
/* ОБГОРТКА-КОНТЕЙНЕР */
/* --------------- */
header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------- */
/* СТИЛІ ДЛЯ МЕНЮ */
/* --------------- */
header .menu {
  display: flex;
  justify-content: center;    /* Центрування */
  align-items: center;
  gap: 60px;                  /* Великий відступ між пунктами */
  
  flex-wrap: nowrap;          /* Жорстко в один рядок */
  overflow-x: auto;           /* Дозволяє прокрутку, якщо не влазить */
  
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;        /* Не переносити слова */
}

/* Приховати стандартний скрол на WebKit-браузерах (опційно) */
header .menu::-webkit-scrollbar {
  height: 4px;
}
header .menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* --------------- */
/* ПУНКТИ МЕНЮ */
/* --------------- */
header .menu li {
  flex: 0 0 auto;             /* Фіксована ширина за розміром вмісту */
}

header .menu li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 12px;          /* Додатковий простір навколо тексту */
  transition: color 0.2s ease;
}

/* --------------- */
/* ХОВЕР-ЕФЕКТ */
/* --------------- */
header .menu li a:hover {
  color: #f9c80e;
}
/* Загальний контейнер header */
header {
  padding: 8px 20px;       /* зменшили верхній/нижній відступ */
  height: auto;            /* дозволяє контенту визначати висоту */
  box-sizing: border-box;  
}

/* Логотип */
header .logo {
  font-size: 1.5rem;       /* зменшили розмір шрифту логотипу */
  line-height: 1.2;        /* оптимізували міжрядковий інтервал */
}

/* Меню навігації */
header nav ul {
  display: flex;
  align-items: center;     /* вертикально центрує пункти меню */
  margin: 0;
  padding: 0;
  list-style: none;
}

header nav ul li a {
  display: block;
  padding: 0.4rem 0.8rem;  /* зменшили відступи всередині пунктів */
  font-size: 0.9rem;       /* трохи зменшили шрифт меню */
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
}

/* За потреби — адаптивні налаштування */
@media (max-width: 768px) {
  header .logo {
    font-size: 1.3rem;
  }
  header nav ul li a {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* Центруємо заголовок секції */
#offers h2 {
  text-align: center;
  margin-bottom: 1rem; /* за бажанням відступ знизу */
}

/* Заодно можемо центрувати підзаголовок */
#offers .offer-group h3 {
  text-align: center;
  margin-bottom: 1.5rem;
}
/* Центруємо заголовок секції та робимо його більшим і жирнішим */
#offers h2 {
  text-align: center;
  font-size: 2.5rem;    /* Збільшуємо розмір шрифту */
  font-weight: 700;     /* Робимо жирнішим */
  margin-bottom: 1.5rem;
}

/* Центруємо підзаголовок та робимо його трохи меншим за головний, але жирним */
#offers .offer-group h3 {
  text-align: center;
  font-size: 1.75rem;   /* Розмір підзаголовка */
  font-weight: 600;     /* Трохи менший рівень жирності */
  margin-bottom: 1.5rem;
}
.offers-grid {
  display: grid;
  /* Чотири картки в рядок */
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
}

/* Адаптивно зменшуємо кількість колонок на планшеті */
@media (max-width: 1200px) {
  .offers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* І на мобільних пристроях – по одній */
@media (max-width: 768px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}
/* Стандартний стиль кнопки “Додати” */
.product-card button {
  width: 100%;                /* кнопка на всю ширину картки */
  padding: 0.75rem 1rem;      /* вертикальний і горизонтальний відступ */
  background-color: #000;     /* чорний фон */
  color: #fff;                /* білий текст */
  font-size: 1rem;            /* оптимальний розмір шрифту */
  font-weight: 600;           /* напівжирний */
  border: none;               /* без обводки */
  border-radius: 8px;         /* закруглені кути */
  cursor: pointer;            /* курсор-рука */
  transition: background 0.2s ease, transform 0.1s ease;
}

/* Ефект при наведенні */
.product-card button:hover {
  background-color: #333;     /* трохи світліше */
  transform: translateY(-2px);/* підняти трохи вгору */
}

/* Ефект при натисканні */
.product-card button:active {
  background-color: #111;     /* більш темний */
  transform: translateY(0);   /* повернути на місце */
}

/* Вимкнена кнопка (якщо товару немає в наявності) */
.product-card button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  transform: none;
}
/* підсвічування форми при скролі */
#contact-form.highlight {
  animation: pulse 1s ease-out;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 0 15px rgba(0,0,0,0.2); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
/* приховуємо блок із повідомленням */
.hidden { display: none; }
/* приховуємо повідомлення штатно */
.hidden {
  display: none;
}

/* підсвічування форми при скролі */
.contact-form.highlight {
  animation: pulse 1s ease-out;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 0 15px rgba(0,0,0,0.2); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
/* === REVIEWS SECTION STYLES === */

/* Основний контейнер секції */
#reviews {
  position: relative;
  padding: 4rem 0;
  background-color: #fafafa;
}

/* Заголовок */
#reviews h2 {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* Список відгуків як горизонтальний слайдер */
.reviews-list {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  
  /* ховаємо дефолтний скроллбар */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.reviews-list::-webkit-scrollbar {
  display: none;
}

/* Одиночний відгук */
.review-item {
  flex: 0 0 280px;           /* фіксована ширина картки */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Текст відгуку */
.review-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin-bottom: 1rem;
}

/* Автор відгуку */
.review-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  text-align: right;
}

/* Кнопки-стрілки навігації */
#reviews .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10;
}
#reviews .arrow:hover {
  background: rgba(0,0,0,0.8);
}

/* Ліва стрілка */
#reviews .arrow.prev {
  left: 1rem;
}

/* Права стрілка */
#reviews .arrow.next {
  right: 1rem;
}

/* Адаптивність */
@media (max-width: 1024px) {
  .review-item { flex: 0 0 240px; }
}
@media (max-width: 768px) {
  #reviews .arrow { display: none; }
  .reviews-list { gap: 1rem; }
  .review-item { flex: 0 0 80%; }
}
/* === FEATURES SECTION – Card Layout === */

/* Основний контейнер секції */
#features {
  padding: 4rem 0;
  background-color: #ffffff;
}

/* Заголовок */
#features h2 {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}

/* Сітка карток (“Product Grid Layout”) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;               /* Відстань між картками */
  align-items: start;
}

/* Одна картка (“Card Layout”) */
.feature-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-ефект для картки */
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Заголовок у картці */
.feature-card h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #111;
}

/* Опис у картці */
.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

/* Адаптивність */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}
  .why-choose-us {
    background-color: #fefefe;
  }
  .why-choose-us .section-title {
    font-size: 2rem;
    font-weight: 700;
  }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }
  .why-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  .why-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #111;
  }
  .why-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
  }
  @media (max-width: 768px) {
    .why-grid {
      grid-template-columns: 1fr;
    }
  }
  /* Центрування заголовка секції “Чому обирають нас” */
.why-choose-us .section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* == CHECKLIST SECTION == */
.checklist {
  background-color: #f9f9f9;
  padding: 4rem 0;
}
.checklist h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
}

/* Grid: 4 cols desktop, 2 tablet, 1 mobile */
.checklist-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Individual check item */
.check-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.check-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Icon */
.check-item i {
  font-size: 1.5rem;
  color: #2a9d8f;
  margin-bottom: 0.75rem;
}

/* Title */
.check-item h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Description */
.check-item p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .checklist-grid {
    grid-template-columns: 1fr;
  }
}
.reviews {
  background: #f9f9f9;
}
.reviews h2 {
  font-size: 2rem;
  font-weight: 700;
}
.reviews-window {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.reviews-track {
  display: flex;
  transition: transform 0.5s ease;
}
.review-item {
  box-sizing: border-box;
  min-width: 100%;
  max-width: 100%;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
}
.review-text {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}
.review-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}

/* Стрілки */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 2.5rem;
  text-align: center;
  transition: background 0.2s ease;
}
.arrow:hover {
  background: rgba(0,0,0,0.8);
}
.prev {
  left: 1rem;
}
.next {
  right: 1rem;
}

/* Адаптивність: на широких екранах показуємо дві картки водночас */
@media (min-width: 768px) {
  .review-item {
    min-width: 50%;
    max-width: 50%;
  }
}/* === REVIEWS SECTION === */
.reviews {
  background: #f9f9f9;
  padding: 4rem 0;
}
.reviews h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* Вікно перегляду (viewport) */
.reviews-window {
  position: relative;
  overflow: hidden;
}

/* CSS */
.reviews-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.reviews-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 24px;
  color: #222;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.review-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.review-card h4 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #222;
}

.review-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555;
}

/* Адаптив для мобільних */
@media (max-width: 480px) {
  .reviews-section {
    padding: 20px 10px;
  }
  .reviews-title {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }
  .reviews-grid {
    gap: 16px;
  }
  .review-card {
    padding: 14px 16px;
  }
}
:root {
  --accent-color: #d4af37;
  --card-bg: #fff;
  --card-border: #e0e0e0;
  --shadow-light: rgba(0,0,0,0.05);
  --shadow-dark: rgba(0,0,0,0.15);
}

.review-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-light);
  padding: 20px;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(.25,.8,.25,1),
    box-shadow 0.4s cubic-bezier(.25,.8,.25,1),
    border-color 0.4s ease;
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-color);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
  z-index: 0;
}

.review-card h4,
.review-card p {
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

.review-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 24px var(--shadow-dark);
  border-color: var(--accent-color);
}

.review-card:hover::before {
  opacity: 0.08;
}

.review-card:hover h4 {
  color: var(--accent-color);
}
:root {
  --accent-gold: #d4af37;
}

/* Базовий стан заголовка */
.reviews-title {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  color: #222;                  /* стандартний колір */
  margin: 40px auto 24px;
  transition: color 0.4s ease;
}

/* Лінія-підкреслення початково невидима */
.reviews-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background: var(--accent-gold);
  transition: width 0.5s ease-in-out;
}

/* Пульсуюче сяйво */
@keyframes glow {
  0%,100% {
    text-shadow: 0 0 6px var(--accent-gold), 0 0 10px rgba(212,175,55,0.6);
  }
  50% {
    text-shadow: 0 0 12px var(--accent-gold), 0 0 20px rgba(212,175,55,0.8);
  }
}

/* Hover-ефект: змінюємо колір, запускаємо glow і розгортаємо підкреслення */
.reviews-title:hover {
  color: var(--accent-gold);
  animation: glow 1.5s ease-in-out infinite alternate;
  cursor: default;
}

.reviews-title:hover::after {
  width: 100%;
}
.reviews-section {
  text-align: center;   /* центруємо все, зокрема inline-block заголовок */
}

.reviews-title {
  display: inline-block;   /* щоб ::after ширина рахувалася по тексту */
  margin: 0 0 24px;
}

/* Ваш вже відомий hover-ефект */
:root {
  --accent-gold: #d4af37;
}

.reviews-title {
  position: relative;
  font-size: 2rem;
  color: #222;
  transition: color 0.4s ease;
}

.reviews-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background: var(--accent-gold);
  transition: width 0.5s ease-in-out;
}

@keyframes glow {
  0%,100% {
    text-shadow: 0 0 6px var(--accent-gold), 0 0 10px rgba(212,175,55,0.6);
  }
  50% {
    text-shadow: 0 0 12px var(--accent-gold), 0 0 20px rgba(212,175,55,0.8);
  }
}

.reviews-title:hover {
  color: var(--accent-gold);
  animation: glow 1.5s ease-in-out infinite alternate;
  cursor: default;
}

.reviews-title:hover::after {
  width: 100%;
}
:root {
  --accent-gold: #d4af37;
  --card-bg: #fff;
  --card-border: #e0e0e0;
  --shadow-light: rgba(0,0,0,0.05);
  --shadow-dark: rgba(0,0,0,0.15);
}

/* ================================
   1. Glow Text Hover with Animated Underline
   ================================ */
@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 6px var(--accent-gold), 0 0 10px rgba(212,175,55,0.6);
  }
  50% {
    text-shadow: 0 0 12px var(--accent-gold), 0 0 20px rgba(212,175,55,0.8);
  }
}

.reviews-title {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  color: #222;
  margin: 40px auto 24px;
  transition: color 0.4s ease;
}

.reviews-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background: var(--accent-gold);
  transition: width 0.5s ease-in-out;
}

.reviews-title:hover {
  color: var(--accent-gold);
  animation: glow 1.5s ease-in-out infinite alternate;
  cursor: default;
}

.reviews-title:hover::after {
  width: 100%;
}

/* ================================
   2. Card Hover Highlight Animation
   ================================ */
.review-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-light);
  padding: 20px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(.25,.8,.25,1),
    box-shadow 0.3s cubic-bezier(.25,.8,.25,1),
    border-color 0.3s ease;
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-gold);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
  z-index: 0;
}

.review-card h4,
.review-card p {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.review-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px var(--shadow-dark);
  border-color: var(--accent-gold);
}

.review-card:hover::before {
  opacity: 0.08;
}

.review-card:hover h4 {
  color: var(--accent-gold);
}
/* ========================
/* === SECTION LAYOUT === */
.payment-section {
  background-color: #ffffff;
  color: #333333;
  padding: 4rem 1rem;
  text-align: center;
}
.payment-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* === GLOW TEXT HOVER WITH ANIMATED UNDERLINE === */
.glow-heading {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #222;
  transition: color 0.3s ease;
}
.glow-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.glow-heading:hover {
  color: #111;
  text-shadow:
    0 0 6px rgba(79,172,254,0.7),
    0 0 12px rgba(0,242,254,0.5);
}
.glow-heading:hover::after {
  width: 100%;
}

/* === GRID OF CARDS === */
.payment-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* === CARD HOVER HIGHLIGHT / OVERLAY FADE-IN === */
.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.03);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.card:hover::before {
  opacity: 1;
}

/* === CARD CONTENT === */
.card-icon {
  width: 40px;
  height: auto;
  margin-bottom: 1rem;
}
.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #222;
}
.card-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555;
}
/* === SECTION CONTAINER === */
.payment-section {
  background-color: #ffffff;
  color: #333333;
  padding: 4rem 1rem;
  text-align: center;
}
.payment-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* === GLOW TEXT HOVER WITH ANIMATED UNDERLINE === */
.glow-heading {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #222222;
  transition: color 0.3s ease;
}
.glow-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #f9d423, #ff4e50);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.glow-heading:hover {
  color: #111111;
  text-shadow:
    0 0 6px rgba(249,212,35,0.7),
    0 0 12px rgba(255,78,80,0.5);
}
.glow-heading:hover::after {
  width: 100%;
}

/* === GRID OF PAYMENT CARDS === */
.payment-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* === CARD HOVER HIGHLIGHT / OVERLAY FADE-IN === */
.payment-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.payment-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(249,212,35,0.05);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.payment-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.payment-card:hover::before {
  opacity: 1;
}

/* === CARD CONTENT === */
.card-icon {
  width: 40px;
  height: auto;
  margin-bottom: 1rem;
}
.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #222222;
}
.card-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555555;
}
/* === GOLDEN GLOW HEADING WITH ANIMATED UNDERLINE === */
.section-title.glow-heading {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #b58300;               /* насичений золотистий колір */
  transition: color 0.3s ease;
}

.section-title.glow-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 4px;
  background: #d7b500;          /* колір підкреслення */
  border-radius: 2px;
  transition: width 0.4s ease;
}

.section-title.glow-heading:hover {
  color: #d7b500;               /* змінюємо відтінок тексту при ховері */
  text-shadow:
    0 0 8px rgba(215,181,0,0.8),
    0 0 16px rgba(215,181,0,0.6),
    0 0 24px rgba(215,181,0,0.4);
}

.section-title.glow-heading:hover::after {
  width: 100%;                  /* розкриваємо підкреслення на всю ширину */
}
/* === GOLDEN GLOW HEADING WITH ANIMATED UNDERLINE ON HOVER === */
.section-title.glow-heading {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #111111;              /* чорний текст за замовчуванням */
  transition: color 0.3s ease;
}

.section-title.glow-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 4px;
  background: #d7b500;         /* колір підкреслення */
  border-radius: 2px;
  transition: width 0.4s ease;
}

.section-title.glow-heading:hover {
  color: #d7b500;              /* золотистий відтінок тексту при ховері */
  text-shadow:
    0 0 8px rgba(215,181,0,0.8),
    0 0 16px rgba(215,181,0,0.6),
    0 0 24px rgba(215,181,0,0.4);
}

.section-title.glow-heading:hover::after {
  width: 100%;                 /* розкриваємо підкреслення на всю ширину */
}
/* === PAYMENT CARD HOVER HIGHLIGHT (GOLD OVERLAY FADE-IN) === */
.payment-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.payment-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(215,181,0, 0.1);  /* золотистий оверлей */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.payment-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(215,181,0, 0.2); /* легка золотиста тінь */
  border-color: #d7b500;                     /* підсвічуємо рамку */
}

.payment-card:hover::before {
  opacity: 1;  /* показуємо золотистий оверлей */
}
/* === SECTION LAYOUT === */
.guarantee-section {
  background-color: #ffffff;
  color: #333333;
  padding: 4rem 1rem;
  text-align: center;
}
.guarantee-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* === GLOW TEXT HOVER WITH ANIMATED UNDERLINE === */
.section-title.glow-heading {
  position: relative;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #111111;              /* чорний текст за замовчуванням */
  transition: color 0.3s ease;
}
.section-title.glow-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 4px;
  background: #d7b500;         /* золотисте підкреслення */
  border-radius: 2px;
  transition: width 0.4s ease;
}
.section-title.glow-heading:hover {
  color: #d7b500;              /* золотистий колір тексту при ховері */
  text-shadow:
    0 0 8px rgba(215,181,0,0.8),
    0 0 16px rgba(215,181,0,0.6),
    0 0 24px rgba(215,181,0,0.4);
}
.section-title.glow-heading:hover::after {
  width: 100%;
}

/* === GRID OF GUARANTEE CARDS === */
.guarantee-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* === CARD HOVER HIGHLIGHT / OVERLAY FADE-IN === */
.guarantee-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.75rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.guarantee-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(215,181,0,0.05);  /* легкий золотий оверлей */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.guarantee-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(215,181,0,0.2); /* золотиста тінь */
  border-color: #d7b500;                      /* рамка стає золотою */
}
.guarantee-card:hover::before {
  opacity: 1;  /* показуємо оверлей */
}

/* === CARD CONTENT === */
.card-icon {
  width: 48px;
  height: auto;
  margin-bottom: 1rem;
}
.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #222222;
}
.card-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555555;
}
/* === GLOW TEXT HOVER WITH ANIMATED UNDERLINE FOR SECTION HEADINGS === */
/* Застосовується до всіх h2 та h3 заголовків у секціях */

section h2,
section h3 {
  position: relative;
  display: inline-block;
  margin: 0 auto;              /* вирівняти по центру, якщо потрібно */
  font-weight: 700;
  color: #111111;               /* чорний текст за замовчуванням */
  transition: color 0.3s ease;
}

section h2::after,
section h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 4px;
  background: #d7b500;          /* золотисте підкреслення */
  border-radius: 2px;
  transition: width 0.4s ease;
}

section h2:hover,
section h3:hover {
  color: #d7b500;               /* золотистий колір тексту при наведенні */
  text-shadow:
    0 0 8px rgba(215,181,0,0.8),
    0 0 16px rgba(215,181,0,0.6),
    0 0 24px rgba(215,181,0,0.4);
}

section h2:hover::after,
section h3:hover::after {
  width: 100%;                  /* підкреслення розгортається на всю ширину */
}
/* === CENTER ALL SECTION HEADINGS H2 & H3 === */
section h2,
section h3 {
  display: block;       /* щоб text-align спрацював */
  width: 100%;
  margin: 0 auto 1rem; /* автоматичні бокові відступи + невеликий відступ знизу */
  text-align: center;   /* центруємо текст */
}
/* === GLOW TEXT HOVER WITH ANIMATED UNDERLINE FOR PRODUCT NAMES === */
.product-card h4 {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111111;               /* чорний текст за замовчуванням */
  margin: 0;
  transition: color 0.3s ease;
}

.product-card h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;                 /* трохи менше, ніж у секцій */
  width: 0;
  height: 2px;
  background: #d7b500;          /* золотисте підкреслення */
  border-radius: 1px;
  transition: width 0.4s ease;
}

.product-card h4:hover {
  color: #d7b500;               /* золотистий колір тексту при наведенні */
  text-shadow:
    0 0 6px rgba(215,181,0,0.8),
    0 0 12px rgba(215,181,0,0.6);
}

.product-card h4:hover::after {
  width: 100%;                  /* підкреслення розгортається на всю ширину */
}
/* === THICKER GLOW UNDERLINE FOR ALL PRODUCT NAMES === */
.product-card h4 {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111111;
  margin: 0;
  transition: color 0.3s ease;
}

.product-card h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;                /* відступ під текстом */
  width: 0;
  height: 4px;                 /* товщина лінії збільшена до 4px */
  background: #d7b500;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.product-card h4:hover {
  color: #d7b500;
  text-shadow:
    0 0 6px rgba(215,181,0,0.8),
    0 0 12px rgba(215,181,0,0.6);
}

.product-card h4:hover::after {
  width: 100%;
}
/* === FEATURE CARDS: ЧОРНІ РАМКИ З ЛЕГКО ЗАКРУГЛЕНИМИ КУТАМИ === */
/* === FEATURES GRID LAYOUT === */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: stretch; /* усі картки вирівняні за висотою */
}

/* === FEATURE CARD: ОДНАКОВИЙ РОЗМІР І ЧОРНІ РАМКИ З ЛЕГКИМ ЗАКРУГЛЕННЯМ === */
.feature-card {
  background-color: #ffffff;
  border: 1px solid #000000;   /* чорна рамка 1px */
  border-radius: 8px;          /* легке закруглення кутів */
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* опціонально: задати мінімальну висоту всім карткам */
.feature-card {
  min-height: 240px;
}

/* hover-ефект для карток */
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* === ВНУТРІШНІ ЕЛЕМЕНТИ === */
.feature-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: #111111;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444444;
  flex-grow: 1; /* щоб текст розподілявся рівномірно */
}
/* === FEATURE CARD LAYOUT === */
.feature-card {
  background-color: #ffffff;
  border: 1px solid #000000;       /* чорна рамка */
  border-radius: 6px;              /* легке закруглення кутів */
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* === CARD HOVER HIGHLIGHT (OVERLAY + ПІДНЯТТЯ) === */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(215,181,0,0.05); /* дуже легкий золотистий оверлей */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.feature-card:hover::before {
  opacity: 1;
}

/* === GLOW TEXT HOVER WITH ANIMATED UNDERLINE FOR H4 === */
.feature-card h4 {
  position: relative;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #111111;                   /* чорний текст за замовчуванням */
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}
.feature-card h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 4px;                      /* товста лінія */
  background: #d7b500;              /* золотисте підкреслення */
  border-radius: 2px;
  transition: width 0.4s ease;
}
.feature-card h4:hover {
  color: #d7b500;                   /* золотистий текст при наведенні */
  text-shadow:
    0 0 6px rgba(215,181,0,0.8),
    0 0 12px rgba(215,181,0,0.6);
}
.feature-card h4:hover::after {
  width: 100%;                      /* підкреслення розгортається на всю ширину */
}

/* === CARD PARAGRAPH TEXT === */
.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444444;
}
/* === GRID ДЛЯ ТЕХНОЛОГІЙ === */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: stretch;
}

/* === КАРТОЧКА TECHNOLOGY === */
.tech-card {
  background-color: #ffffff;
  border: 1px solid #000000;        /* чорна рамка */
  border-radius: 8px;               /* легке закруглення */
  padding: 1.5rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* hover highlight animation */
.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(215,181,0,0.05); /* золотистий оверлей */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #d7b500;
}

.tech-card:hover::before {
  opacity: 1;
}

/* === GLOW HEADING INSIDE CARD === */
.tech-card h4 {
  position: relative;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #111111;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

.tech-card h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 4px;
  background: #d7b500;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.tech-card h4:hover {
  color: #d7b500;
  text-shadow:
    0 0 6px rgba(215,181,0,0.8),
    0 0 12px rgba(215,181,0,0.6);
}

.tech-card h4:hover::after {
  width: 100%;
}

/* === ТЕКСТ У КАРТОЧЦІ === */
.tech-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444444;
  flex-grow: 1;
}
/* Задаємо початкові стилі всім карткам */
/* Базові стилі картки */
.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: 
    transform 0.3s ease,        /* підйом */
    box-shadow 0.3s ease,       /* тінь */
    border-color 0.3s ease;     /* колір обвідки */
  overflow: hidden;
}

/* Стиль оверлея (анімований при hover) */
.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 223, 0, 0.1); /* світло-жовтий відтінок */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Заголовок теж можна підкреслити */
.feature-card h4 {
  transition: color 0.3s ease;
}

/* При наведенні */
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  border-color: #ffd600;  /* активний колір обвідки */
}

/* Показуємо оверлей */
.feature-card:hover::after {
  opacity: 1;
}

/* Зміна кольору заголовка */
.feature-card:hover h4 {
  color: #333; /* можна зробити трохи темнішим або іншим акцентом */
}
/* Базові стилі картки */
.why-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  overflow: hidden;
}

/* Оверлей */
.why-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 223, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Заголовок */
.why-card h4 {
  transition: color 0.3s ease;
}

/* Hover-стан */
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  border-color: #ffd600;
}
.why-card:hover::after {
  opacity: 1;
}
.why-card:hover h4 {
  color: #333;
}
/* Універсальні стилі для карток і чек-цілей */
.feature-card,
.why-card,
.check-item {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  overflow: hidden;
}

/* Оверлей для hover */
.feature-card::after,
.why-card::after,
.check-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 223, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Плавна зміна кольору заголовка/ікони */
.feature-card h4,
.why-card h4,
.check-item h4,
.check-item i {
  transition: color 0.3s ease;
}

/* Hover-ефект */
.feature-card:hover,
.why-card:hover,
.check-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  border-color: #ffd600;
}

.feature-card:hover::after,
.why-card:hover::after,
.check-item:hover::after {
  opacity: 1;
}

.feature-card:hover h4,
.why-card:hover h4,
.check-item:hover h4,
.check-item:hover i {
  color: #333;
}
/* =========================
   СТИЛІ ДЛЯ FAQ (деталі)
   ========================= */

/* 1. Основний контейнер <details> */
.faq-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

/* 2. Приховуємо дефолтний маркер та робимо summary клікабельним */
.faq-item summary {
  list-style: none;                /* прибрати стрілку за замовчуванням */
  cursor: pointer;
  display: block;
  padding: 16px 20px 16px 40px;     /* відступ для плюсика */
  position: relative;
  font-weight: 500;
  transition: background 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* 3. “+” перед заголовком питання */
.faq-item summary::before {
  content: "+";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease, content 0.2s ease;
}

/* 4. Підсвітка при наведенні на summary */
.faq-item summary:hover {
  background: rgba(255, 223, 0, 0.1);
}

/* 5. Коли <details> відкрито — мінусик і акцент рамки */
.faq-item[open] {
  border-color: #ffd600;
}
.faq-item[open] summary::before {
  content: "−";
  transform: translateY(-50%) scaleX(1.2);
}

/* 6. Приховуємо блок відповіді, коли закрито */
.faq-item p {
  display: none;
  padding: 0 20px;
  margin: 0;
}

/* 7. Показуємо відповідь, коли <details> відкрито */
.faq-item[open] p {
  display: block;
  padding: 12px 20px 16px;  /* відступи для тексту відповіді */
}
/* Контейнер і заголовок */
.about-stats {
  background: #f9fafb;
}
.about-stats .section-title {
  font-size: 2rem;
  color: #222;
}

/* Сітка карток */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Картка */
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Велике число */
.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #3751ff;
  line-height: 1;
}
.stat-value span {
  font-size: 1.25rem;
  vertical-align: super;
}

/* Підпис під числом */
.stat-label {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  position: relative;
}
.stat-label::after {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background: #3751ff;
  margin: 0.5rem auto 0;
  border-radius: 2px;
}
.section-title {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #ffd600;                      /* яскраво-жовтий */
  text-shadow:
    0 0 4px rgba(255,214,10,0.8),
    0 0 8px rgba(255,214,10,0.6),
    0 0 12px rgba(255,214,10,0.4);
  margin: 1rem 0 2rem;
}

/* Псевдоелемент для лінії підкреслення */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: 0;
  height: 3px;
  background: #ffd600;
  border-radius: 2px;
  transition: width 0.4s ease, left 0.4s ease;
}

/* При наведенні розгортаємо лінію */
.section-title:hover::after {
  width: 100%;
  left: 0;
}

/* Додатковий hover-glow (поширюємо світіння при hover) */
.section-title:hover {
  text-shadow:
    0 0 6px rgba(255,214,10,1),
    0 0 12px rgba(255,214,10,0.8),
    0 0 18px rgba(255,214,10,0.6),
    0 0 24px rgba(255,214,10,0.4);
}
/* Базові стилі для карток */
.stat-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  overflow: hidden;
}

/* Напівпрозорий жовтий оверлей */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 214, 10, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Hover-стан */
.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  border-color: #ffd600;
}

/* Показуємо оверлей на hover */
.stat-card:hover::before {
  opacity: 1;
}
.section-title {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #000;                /* чорний за замовчуванням */
  text-shadow: none;
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

/* Псевдоелемент для анімованої лінії */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: 0;
  height: 3px;
  background: #ffd600;
  border-radius: 2px;
  transition: width 0.4s ease, left 0.4s ease;
}

/* Hover-стан: змінюємо колір тексту, додаємо glow і розгортаємо лінію */
.section-title:hover {
  color: #ffd600;
  text-shadow:
    0 0 4px rgba(255,214,10,0.8),
    0 0 8px rgba(255,214,10,0.6),
    0 0 12px rgba(255,214,10,0.4);
}

.section-title:hover::after {
  width: 100%;
  left: 0;
}
/* 1) Контейнер для заголовка */
.about-section {
  position: relative;
  padding: 2rem 0;
  text-align: center;
}

/* 2) Горизонтальна лінія за заголовком — спочатку прихована */
.about-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #FFD600;
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

/* 3) Сам заголовок — чорний без glow */
.section-title {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0 1rem;
  margin: 0 auto;
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Базові стилі заголовка */
.section-title {
  position: relative;
  display: inline-block;
  color: #000; /* чорний за замовчуванням */
  text-shadow: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: pointer;
}

/* Псевдо-елемент для підкреслення */
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;        /* підкоригуйте відступ під ваш шрифт */
  height: 3px;            /* товщина лінії */
  width: 0;               /* спочатку захована */
  background-color: #FFD600;  /* точний жовтий колір */
  transition: width 0.4s ease;
  transform-origin: left;
}

/* Hover-стан: текст та glow */
.section-title:hover {
  color: #FFD600;
  text-shadow:
    0 0 4px rgba(255,214,10,0.8),
    0 0 8px rgba(255,214,10,0.6),
    0 0 12px rgba(255,214,10,0.4);
}

/* Hover-стан: розгортання лінії зліва направо */
.section-title:hover::after {
  width: 100%;
}
.section-title {
  position: relative;
  display: inline-block;
  color: #000;           /* чорний за замовчуванням */
  text-shadow: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: pointer;
}

/* Підкреслення */
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 0;
  height: 3px;
  background-color: #D7B500;  /* точний жовто-золотий */
  transition: width 0.4s ease;
  transform-origin: left;
}

/* Hover-ефект */
.section-title:hover {
  color: #D7B500;
  text-shadow:
    0 0 4px rgba(215,181,0,0.8),
    0 0 8px rgba(215,181,0,0.6),
    0 0 12px rgba(215,181,0,0.4);
}
.section-title:hover::after {
  width: 100%;
}
#btn-restart {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd600, #ffae00);
  color: #2d2d3d;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1000;
}
#btn-restart:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.btn-submit {
  display: inline-block;
  padding: 0.75rem 1.5rem;          /* вертикальні та горизонтальні відступи */
  font-size: 1rem;                 /* розмір шрифту */
  font-weight: 600;                /* трохи жирніший текст */
  color: #ffffff;                  /* білий текст */
  background-color: #222222;       /* темно-сірий фон */
  border: none;                    /* без обвідки */
  border-radius: 6px;              /* легеньке округлення кутів */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* м’яка тінь */
  cursor: pointer;                 /* курсор-рука */
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.btn-submit:hover {
  background-color: #333333;       /* трохи світліше при наведенні */
  transform: translateY(-2px);     /* легкий «підйом» */
}

.btn-submit:active {
  background-color: #111111;       /* темніший при натисканні */
  transform: translateY(0);        /* прибираємо підйом */
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.parallax {
  background-attachment: fixed;
  background-size: cover;
}
.button {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.button:hover {
  transform: scale(1.05);
}
.card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.card:nth-child(1) { transition-delay: 0.1s; }
.card:nth-child(2) { transition-delay: 0.2s; }
/* … */
.to-top {
  position: fixed; bottom: 30px; right: 30px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s;
}
.to-top.show {
  opacity: 1; visibility: visible;
}
nav a.active {
  border-bottom: 2px solid #FFD600;
}
/* Базовий стан — приховано і зсув вниз */
.fade-item {
  opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Видимий стан — без зсуву, повна прозорість */
.fade-item.show {
  opacity: 1;
  transform: translateY(0);
}
.product-card img {
  width: 100%;
  height: 200px; /* Або інша фіксована висота */
  object-fit: contain; /* Або "cover", залежно від бажаного вигляду */
  display: block;
  margin: 0 auto;
}
/* Обгортка для кожного зображення */
.product-card .image-wrapper {
  /* Встановлюємо співвідношення сторін 1:1 (квадрат) */
  aspect-ratio: 1 / 1;
  /* Якщо aspect-ratio не підтримується, використовуємо «хак» з padding */
  width: 100%;
  position: relative;
  background-color: #fff;           /* єдиний фон для всіх карток */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Фолбек для браузерів без aspect-ratio */
.product-card .image-wrapper::before {
  content: "";
  display: block;
  padding-top: 100%;                /* квадрат */
}
.product-card .image-wrapper img {
  /* аби img не зламав верстку */
  position: absolute;               /* знімає img з документа, реагує на обгортку */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* зберігає пропорції, вписуючись у квадрат */
  background-color: #fff;           /* запасний фон, якщо png з прозорим */
}

/* За потреби: обмежуємо максимальний розмір картки */
.product-card {
  max-width: 280px;
  margin: 0 auto;
}
/* Плавний перехід і масштабування при hover */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Плавний фейд-ін секцій при скролі */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Глобальна плавна прокрутка */
html {
  scroll-behavior: smooth;
}

:root {
  /* Фірмова палітра */
  --clr-accent-1:  #1D4ED8;  /* насичений синій */
  --clr-accent-2:  #F59E0B;  /* теплий помаранчевий */
  --clr-bg-neutral: #F3F4F6; /* світло-сірий фон */
  --clr-text-main:  #111827; /* темно-сірий основний текст */
  --clr-text-muted: #6B7280; /* для другорядного тексту */
}

/* Застосування палітри */
body {
  background-color: var(--clr-bg-neutral);
  color: var(--clr-text-main);
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, .section-title {
  color: var(--clr-accent-1);
}

button.primary {
  background-color: var(--clr-accent-1);
  color: #fff;
  border: none;
}
button.primary:hover {
  background-color: var(--clr-accent-2);
}

a {
  color: var(--clr-accent-2);
}
a:hover {
  color: var(--clr-accent-1);
}

/* Приклад картки товару */
.product-card {
  background-color: #fff;
  border: 1px solid var(--clr-bg-neutral);
}

.product-card .price {
  color: var(--clr-accent-1);
}

.product-card .btn-add {
  background-color: var(--clr-accent-2);
  color: #fff;
}
.product-card .btn-add:hover {
  background-color: var(--clr-accent-1);
}
/* Секція “Пропозиції” */
/* Секція “Пропозиції” */
#offers {
  background-color: var(--clr-bg-neutral);
  padding: var(--space-xl) var(--space-md);
}

#offers > h2 {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  color: var(--clr-accent-1);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.offer-group h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  color: var(--clr-text-main);
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.offers-grid .product-card {
  background-color: var(--clr-card-bg);
  border: 1px solid var(--clr-bg-neutral);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.offers-grid .product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.offers-grid .product-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: var(--clr-card-bg);
}

.offers-grid .product-card h4 {
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  color: var(--clr-text-main);
  margin: var(--space-sm) var(--space-sm) 0;
}

.offers-grid .product-card .price {
  font-family: var(--ff-base);
  font-size: var(--fs-lg);
  color: var(--clr-accent-1);
  margin: var(--space-xs) var(--space-sm);
}

/* Кнопка “Додати” — НЕ МІНЯЄМО РОЗМІР, тільки колір та ховер */
.offers-grid .product-card button {
  background-color: #F59E0B;  /* точний акцентний колір */
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.offers-grid .product-card button:hover {
  background-color: #1D4ED8;  /* точний другий акцентний колір */
}
.offers-grid {
  display: grid;
  /* замість auto-fill ставимо рівно 4 колонки */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Картка товару */
.product-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;          /* обрізає все, що за межами скруглень */
}

/* Фото займає всю ширину, без жодних відступів */
.product-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Скруглення тільки зверху, щоб картинка "прилипала" */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: block;
}

/* Інформаційна частина (назва / ціна / кнопка) */
.product-card .info {
  padding: var(--space-md);
  flex: 1; /* розгортає блок інфо на всю висоту під картинкою */
}
/* Усі кнопки додати */
.product-card button {
  display: block;                /* щоб займати всю ширину */
  width: calc(100% - var(--space-md)); /* з урахуванням горизонтальних відступів */
  margin: var(--space-sm) auto;  /* відступ зверху/знизу, центр по горизонталі */
  padding: 0;                    /* скинемо внутрішні паддінги */
  min-height: 40px;              /* однакова мінімальна висота */
  line-height: 40px;             /* вертикальне вирівнювання тексту */
  background-color: var(--clr-accent-2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  text-align: center;            /* центр тексту */
  cursor: pointer;
  transition: background-color 0.3s;
}

.product-card button:hover {
  background-color: var(--clr-accent-1);
}
/* Уніфікована верстка картки товару */
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* вирівнює вміст по висоті */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  padding: var(--space-md);
}

/* Обгортка для контенту картки (ім’я + ціна) */
.product-card .info {
  flex-grow: 1;     /* займає весь вільний простір */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Доповніть HTML так, щоб ім’я і ціна були в одному контейнері .info */
/*
<div class="product-card">
  <img src="..." alt="...">
  <div class="info">
    <h4>Назва товару</h4>
    <p class="price">Ціна</p>
  </div>
  <button>Додати</button>
</div>
*/

/* Стилі для ціни */
.product-card .price {
  font-size: var(--fs-lg);
  color: var(--clr-accent-1);
  margin: var(--space-sm) 0 0;
  text-align: center;
}

/* Уніфікована кнопка */
.product-card button {
  display: block;
  width: 100%;
  min-height: 40px;       /* однаковий мінімум */
  line-height: 40px;      /* вертикальне центрування тексту */
  margin-top: var(--space-md);
  background-color: #F59E0B;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.product-card button:hover {
  background-color: #1D4ED8;
}
/* 1. Зовнішній контейнер картки */
.product-card {
  background-color: #fff;          /* білий фон картки */
  border-radius: 8px;              /* скруглені кути */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;                /* обрізати все зайве */
  display: flex;
  flex-direction: column;
}

/* 2. Контейнер зображення, який “вкорінює” img в картку */
.product-card .image-wrapper {
  position: relative;
  width: 100%;
  /* 16:9 або будь-яке інше співвідношення, або зробіть 1/1 для квадрата */
  aspect-ratio: 1 / 1;             
  overflow: hidden;
}

/* 3. Зображення, яке заповнює весь .image-wrapper */
.product-card .image-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* заповнює весь контейнер, обрізає зайве */
  object-position: center;         /* центр кадру */
  border: none;                    /* прибрати рамки */
  background-color: transparent;   /* прозорий — картка й так біла */
}

/* 4. Блок з текстом і кнопкою */
.product-card .info {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

/* 5. Кнопка “Додати” — вирівняна, однакового розміру */
.product-card button {
  display: block;
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  margin-top: var(--space-md);
  background-color: #F59E0B;
  color: #fff;
  border: none;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
.product-card button:hover {
  background-color: #1D4ED8;
}
/* Контейнер для зображення */
.product-card .image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;               /* квадрат */
  overflow: hidden;
  border-top-left-radius: 8px;       /* легке скруглення кутів */
  border-top-right-radius: 8px;
}

/* Саме зображення */
.product-card .image-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;               /* зберігає пропорції, вписуючись у квадрат */
  border-radius: inherit;            /* успадковує скруглення від контейнера */
}
.search-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-bg-neutral);
  border-radius: 4px;
  overflow: hidden;
  margin-left: var(--space-md);
}

.search-form input {
  border: none;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-base);
  outline: none;
  width: 200px; /* чи скільки потрібно */
}

.search-form button {
  background: var(--clr-accent-1);
  color: #fff;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-size: var(--fs-base);
}
.search-form button:hover {
  background: var(--clr-accent-2);
}
/* Приховуємо основне меню на мобільних, показуємо кнопку */
.nav-toggle {
  display: none;
}
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
  }
  .main-nav.open {
    display: block;
  }
  .main-nav ul {
    list-style: none;
    margin: 0; padding: 0;
  }
  .main-nav li + li {
    border-top: 1px solid var(--clr-bg-neutral);
  }
  .main-nav a {
    display: block;
    padding: 12px 16px;
    color: var(--clr-text-main);
    text-decoration: none;
  }
}
.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.search-form input {
  padding: 8px 12px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #ccc;
  outline: none;
}

.search-form button {
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  border: 1px solid #ccc;
  background-color: #eee;
  cursor: pointer;
}
/* === Header контейнер === */
.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5em 1em;
  background-color: #000;
  color: #fff;
  overflow: visible;             /* щоб нічого не обрізалось */
}

/* Лого ліворуч */
.site-header .logo {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  margin-right: 2em;
}

/* === Контейнер пошуку + меню === */
.search-container {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 2em;
}

/* === Форма пошуку === */
.search-form {
  display: flex;
  align-items: stretch;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;              /* input+button в одному блоці */
}

.search-form input {
  width: 200px;                  /* підберіть за макетом */
  padding: 0.5em 0.75em;
  font-size: 1rem;
  border: none;
  outline: none;
}

.search-form button {
  flex: 0 0 auto;
  padding: 0.5em 0.75em;         /* достатньо місця для 🔍 */
  font-size: 1.25rem;            /* чіткіша іконка */
  line-height: 1;
  background-color: #f1c40f;
  border: none;
  cursor: pointer;
  transition: background-color .2s;
}

.search-form button:hover {
  background-color: #e0b90e;
}

/* === Головне меню === */
.main-nav {
  flex: 1 1 auto;
  overflow-x: auto;              /* якщо не влізає — з’явиться скрол */
  -webkit-overflow-scrolling: touch;
}

.main-nav ul {
  display: flex;
  flex-wrap: nowrap;             /* підряд без переносу */
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav li {
  margin-right: 1.5em;
  white-space: nowrap;           /* слова не розривати */
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

/* При бажанні — стилізований скролбар */
/*================ Header =================*/
/* === Загальний header === */
.site-header {
  display: flex;
  flex-wrap: wrap;           /* дозоляє елементам йти в новий рядок */
  align-items: center;
  justify-content: space-between;
  background: #000;
  padding: 0.5em 1em;
}

/* Лого */
.site-header .logo {
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  margin-right: 1em;
}

/* === Навігація === */
.main-nav {
  flex: 1 1 100%;            /* займає всю ширину, якщо потрібно перейти в нижній ряд */
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;           /* переносяться на новий рядок за потреби */
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;   /* центруємо пункти в рядку */
}

.main-nav li {
  margin: 0.2em 0.6em;       /* компактніші відступи */
  white-space: nowrap;       /* не розриваємо слова */
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;        /* трохи менший шрифт, щоб вмістилося більше */
}

/* === Пошукова форма === */
.search-form {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5em;         /* якщо перейде в новий рядок */
}

.search-form input {
  flex: 1 1 120px;           /* мінімальна ширина 120px, але рости не буде за рахунок меню */
  padding: 0.4em 0.8em;
  font-size: 1rem;
  border: none;
  outline: none;
  background: #fff;
}

.search-form button {
  flex: 0 0 auto;
  padding: 0.4em 0.8em;
  font-size: 1.25rem;        /* чітка велика іконка */
  background: #f1c40f;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-form button:hover {
  background: #e0b90e;
}
/* === 1. Контейнер header === */
header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000;
  padding: 0.5em 1em;
  white-space: nowrap;      /* забороняємо перенос рядка */
  overflow: visible;        /* забороняємо обрізку */
}

/* === 2. Лого === */
header.site-header .logo {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  margin-right: 1em;
}

/* === 3. Пошукова форма === */
header.site-header .search-form {
  flex: 0 0 auto;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 2em;
}

header.site-header .search-form input {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 0.4em 0.6em;
  font-size: 0.9rem;
  border: none;
  outline: none;
  background: #fff;
}

header.site-header .search-form button {
  flex: 0 0 auto;
  padding: 0.4em 0.6em;
  font-size: 1.2rem;
  background: #f1c40f;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === 4. Навігація === */
header.site-header nav.main-nav {
  flex: 1 1 auto;           /* займає увесь залишковий простір */
  overflow: visible;        /* ніякого скролу */
}

header.site-header nav.main-nav ul {
  display: flex;
  flex-wrap: nowrap;        /* всі пункти в один ряд */
  margin: 0;
  padding: 0;
  list-style: none;
}

header.site-header nav.main-nav li {
  flex: 0 1 auto;           /* дозволяємо пунктам зменшуватись за потреби */
  margin: 0 0.6em;          /* компактніший відступ */
  white-space: nowrap;      /* слова не розриваються */
}

header.site-header nav.main-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;        /* трохи менший шрифт, щоб усе влазило */
}
/* === 1. Header-контейнер === */
header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3em 0.5em;
  background: #000;
  color: #fff;
  white-space: nowrap;     /* забороняємо перенос рядка */
  overflow: hidden;        /* обрізка поза межами — небажаний побічний ефект, але без скролу */
}

/* === 2. Лого === */
header.site-header .logo {
  flex: 0 0 auto;
  font-size: 1.3rem;       /* трохи менше */
  margin-right: 0.8em;     /* мінімальний відступ */
}

/* === 3. Пошук === */
header.site-header .search-form {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 1em;
}

header.site-header .search-form input {
  flex: 1 1 100px;         /* мінімум 100px */
  padding: 0.3em 0.5em;
  font-size: 0.85rem;      /* менший шрифт */
  border: none;
  background: #fff;
}

header.site-header .search-form button {
  flex: 0 0 auto;
  padding: 0.3em 0.5em;
  font-size: 1.1rem;
  background: #f1c40f;
  border: none;
  cursor: pointer;
}

/* === 4. Меню === */
header.site-header nav.main-nav {
  flex: 1 1 auto;
  overflow: hidden;        /* прибираємо скролбар */
}

header.site-header nav.main-nav ul {
  display: flex;
  flex-wrap: nowrap;       /* всі в один ряд */
  margin: 0;
  padding: 0;
  list-style: none;
}

header.site-header nav.main-nav li {
  flex: 0 1 auto;          /* пункт може трохи стискатися */
  margin: 0 0.3em;         /* дуже компактні відступи */
  white-space: nowrap;
}

header.site-header nav.main-nav a {
  display: block;
  padding: 0.1em 0;
  font-size: 0.85rem;      /* зменшений шрифт */
  color: #fff;
  text-decoration: none;
}
/* hover-ефект для пунктів меню */
header.site-header nav.main-nav a:hover {
  color: #d4af37;             /* сам золотий відтінок */
  text-decoration: none;      /* прибираємо підкреслення, якщо було */
  /* опціонально: додаємо нижню рамку */
  border-bottom: 2px solid #d4af37;
  padding-bottom: 2px;        /* щоб текст не «підстрибував» */
  transition: color .2s, border-color .2s;
}
/* === Контейнер хедера вертикальний === */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;        /* лого по центру */
  background: #000;
  padding: 1em 0;
}

/* === Лого зверху === */
.logo-container {
  width: 100%;
  display: flex;
  justify-content: center;     /* центр лого */
  position: relative;
}

.logo {
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  /* злегка змістимо вправо на 10px */
  position: relative;
  left: 10px;
}

/* === Рядок з пошуком і меню === */
.header-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5em 1em;
  box-sizing: border-box;
}

/* Пошукова форма */
.search-form {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 2em;
}

.search-form input {
  flex: 1 1 140px;
  padding: 0.4em 0.8em;
  font-size: 1rem;
  border: none;
  background: #fff;
}

.search-form button {
  flex: 0 0 auto;
  padding: 0.4em 0.8em;
  font-size: 1.25rem;
  background: #f1c40f;
  border: none;
  cursor: pointer;
}

/* Навігація */
.main-nav ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav li {
  margin: 0 0.6em;
  white-space: nowrap;
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
}
/* === Стилі для логотипа === */
.logo-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.2em;    /* відступ для псевдоелемента */
  transition: color 0.3s;
}

/* Псевдоелемент “лінія” */
.logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;                 /* початкова ширина – 0 */
  height: 3px;              /* товщина лінії */
  background: #d4af37;      /* золотий колір */
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

/* Hover-ефект */
.logo:hover {
  color: #d4af37;           /* підфарбовуємо текст у золотий */
}

.logo:hover::after {
  width: 100%;              /* лінія розгортається в обидві сторони */
}
.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.2em;            /* простір під лінію */
  transition: color 0.3s ease;
}

.logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;                         /* початково — нульова ширина */
  height: 3px;
  background: #d4af37;              /* золотий колір */
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.logo:hover {
  color: #d4af37;                   /* текст стає золотим */
}

.logo:hover::after {
  width: 120%;                      /* розгортаємо лінію на 120% ширини тексту */
}
.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.3em;           /* місце під лінію */
  transition: color 0.3s ease;
}

.logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 140%;                     /* ширина 140% від тексту */
  height: 3px;
  background: #d4af37;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center center; /* scale з центру */
  transition: transform 0.4s ease;
}

.logo:hover {
  color: #d4af37;                  /* текст став золотим */
}

.logo:hover::after {
  transform: translateX(-50%) scaleX(1);
}
.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.3em;          /* простір під лінію */
  transition: color 0.3s ease;
}

.logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;                    /* спочатку рівно по ширині тексту */
  height: 3px;
  background: #d4af37;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;       /* масштабування — з центру */
  transition: transform 0.4s ease;
}

.logo:hover {
  color: #d4af37;                 /* текст стає золотим */
}

.logo:hover::after {
  transform: translateX(-50%) scaleX(1.4);
  /* 1.4 = 140% від ширини тексту, тобто +20% зліва й справа */
}
.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  padding: 0 30px;            /* відступ по 30px з обох боків для ліній */
  transition: color 0.3s ease;
}

.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.2em;           /* простір під лінію */
  transition: color 0.3s ease;
}

.logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;                     /* повна ширина слова */
  height: 3px;
  background: #d4af37;
  transform: scaleX(0);            /* на початку — схована */
  transform-origin: left center;   /* зростає зліва вправо */
  transition: transform 0.4s ease;
}

.logo:hover {
  color: #d4af37;                  /* текст стає золотим */
}

.logo:hover::after {
  transform: scaleX(1);            /* лінія «витягується» повністю */
}
.logo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  /* видаляємо будь-які padding-left/right тут! */
  padding: 0 0;           
  padding-bottom: 0.2em;    /* лиш для простору під лінію */
  transition: color 0.3s ease;
}

.logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;                  /* починаємо з самого лівого краю тексту */
  width: 100%;              /* довжина точно як у логотипа */
  height: 3px;
  background: #d4af37;
  transform: scaleX(0);     /* спочатку захована */
  transform-origin: left center;
  transition: transform 0.4s ease;
}

.logo:hover {
  color: #d4af37;           /* текст у золотий */
}

.logo:hover::after {
  transform: scaleX(1);     /* розгортається до повної довжини */
}
.product-card.highlight {
  animation: pulse 1s ease-out;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 rgba(255, 165, 0, 0.7); }
  50%  { box-shadow: 0 0 15px rgba(255, 165, 0, 0.7); }
  100% { box-shadow: 0 0 0 rgba(255, 165, 0, 0); }
}
.cart-icon img {
  display: block;
  filter: invert(100%);
  transition: transform 0.2s;
}
/* Дозволяємо відносне позиціонування всередині header */
.site-header {
  position: relative;
  padding-top: 2em; /* трохи додаткового простору зверху, якщо потрібно */
}

/* Позиціонуємо іконку кошика зверху-праворуч */
.site-header .cart-icon {
  position: absolute;
  top: 0.5em;    /* відстань від верхнього краю header */
  right: 1em;    /* відступ від правого краю */
}
/* Анімація «позивного» збільшення бейджа */
.cart-count.pop {
  animation: pop-badge 0.3s ease;
}

@keyframes pop-badge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.cart-count.pop {
  animation: pop-badge 0.3s ease;
}

@keyframes pop-badge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.catalog-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1em;
  align-items: center;
}

.filter-price input {
  width: 6ch;
  margin: 0 0.3em;
}

.sort-by select {
  padding: 0.2em 0.5em;
}
.catalog-controls {
  background: #fff;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  gap: 2rem;
  align-items: center;
}

.catalog-controls label {
  font-size: 0.9rem;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.catalog-controls input[type="number"],
.catalog-controls select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.4em 0.6em;
  font-size: 0.9rem;
  transition: border-color .2s, box-shadow .2s;
  width: 5ch;
}

.catalog-controls select {
  width: auto;
}

.catalog-controls input[type="number"]:focus,
.catalog-controls select:focus {
  outline: none;
  border-color: #d4af37; /* золотистий */
  box-shadow: 0 0 4px rgba(212,175,55,0.4);
}

.catalog-controls .filter-price {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.catalog-controls .sort-by {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .catalog-controls {
    flex-direction: column;
    gap: 1rem;
  }
}
/* === Уніфікація сітки та карток === */

/* 1. Оформлюємо саму картку */
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* підкоригуйте висоту під ваш дизайн */
  min-height: 360px;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 2. Квадратні блоки-підкладки під зображення */
/*    Якщо у вас немає обгортки для img, просто застосуйте до самого img */
.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;      /* квадратна область */
  object-fit: contain;      /* показує весь малюнок без обрізань */
  background: #f9f9f9;      /* опціонально — фон під фото */
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

/* 3. Єдиний розмір і стиль кнопок */
.btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;              /* на всю ширину картки */
  height: 3rem;             /* фіксована висота */
  margin-top: 0.5rem;
  background-color: #ffa500;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;     /* легке закруглення */
  cursor: pointer;
  transition: background-color .2s;
}
.btn-add:hover {
  background-color: #e59400;
}
.cart-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
#cart-count {
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  background: red;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 50%;
}
/* 1. Позиціювання іконки та лічильника */
.cart-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
#cart-count {
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  width: 1.2em;
  height: 1.2em;
  background: red;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. Стилі спливаючого повідомлення */
#added-popup {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0.75rem 1.5rem;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000;
}
#added-popup.show {
  opacity: 1;
  transform: translateY(0);
}
/* Breadcrumbs */
.breadcrumbs {
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  align-items: center;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 0.5rem;
  color: #9aa3ad;
  font-size: 0.95rem;
}
.breadcrumbs a {
  color: #0077cc;
  text-decoration: none;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus {
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  font-weight: 600;
  color: #111;
  text-decoration: none;
  cursor: default;
}
@media (max-width: 600px) {
  .breadcrumbs ol { font-size: 0.85rem; gap: 0.3rem; }
  .breadcrumbs li + li::before { margin: 0 0.3rem; }
}
/* ---------- PRODUCT MODAL ---------- */
/* ===== PRODUCT MODAL: базовий стиль + правильні z-index і pointer-events ===== */
.product-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: inherit;
}

/* .hidden — ховає модалку */
.product-modal.hidden {
  display: none;
}

/* затемнення фону (overlay) — під панеллю, але над контентом сторінки */
.product-modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
  cursor: pointer;
}

/* сама панель модалки */
.product-modal .modal-panel {
  position: relative;
  z-index: 10001; /* вище за overlay */
  background: #fff;
  width: min(1100px, 96%);
  max-height: 90vh;
  overflow: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 20px;
  box-sizing: border-box;
}

/* кнопка закриття (X) */
.product-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10002; /* вище за панель */
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  color: #222;
  border-radius: 6px;
}
.product-modal .modal-close:hover { background: rgba(0,0,0,0.06); }

/* картинки та thumbs */
.modal-media { display:flex; gap:12px; align-items:flex-start; }
.modal-main-img { flex: 1 1 60%; display:flex; align-items:center; justify-content:center; padding: 8px; }
.modal-main-img img { max-width:100%; height:auto; display:block; border-radius:6px; }
.modal-thumbs { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.modal-thumbs button { width:56px; height:56px; padding:6px; border-radius:8px; border:1px solid #eee; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.modal-thumbs img { max-width:100%; max-height:100%; display:block; }

/* інформаційна колонка праворуч */
.modal-info { flex: 1 1 40%; padding-left:20px; box-sizing:border-box; }

/* таблиця характеристик */
.specs-table { width:100%; border-collapse:collapse; margin-top:10px; margin-bottom:16px; }
.specs-table td { padding:8px 10px; border-bottom:1px solid #efefef; vertical-align:middle; }
.specs-table tr td:first-child { font-weight:600; width:45%; }

/* зручні кнопки в модалі */
.modal-actions { display:flex; gap:12px; margin:12px 0 18px; align-items:center; }
.btn { padding:12px 18px; border-radius:8px; border:0; cursor:pointer; font-weight:600; }
.btn-add { background:#f59e0b; color:#fff; }
.btn-buy { background:#10b981; color:#fff; }

/* маленькі адаптивні правки */
@media (max-width: 900px) {
  .modal-media { flex-direction:column; }
  .modal-thumbs { flex-direction:row; order:2; gap:8px; }
  .modal-info { padding-left:0; }
}
/* ---------------------------
  
/* === Універсальні точні стилі для кнопок в усіх product-card ===
   - точний розмір (ширина однакова)
   - проміжок між кнопками (щоб не зливалися)
   - при hover ТІЛЬКИ сама кнопка => синій фон
 /* --- Застосувати до кнопок в модалі товару --- */
#product-modal .modal-actions {
  display: flex;
  gap: 12px;                 /* відстань між кнопками */
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  box-sizing: border-box;
}

/* Єдиний розмір/стиль для обох кнопок в модалі */
#product-modal .modal-actions .btn,
#product-modal .modal-actions button {
  height: 48px;              /* однакова висота */
  min-width: 160px;         /* мінімальна ширина (регулюй) */
  padding: 0 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
  transition: background-color .15s ease, transform .08s ease, box-shadow .12s ease;
}

/* Візуальні кольори — зберегти існуючі, але рівний розмір */
#product-modal .modal-actions #modal-add,
#product-modal .modal-actions .btn-add {
  background: #f59e0b;
  color: #fff;
}

#product-modal .modal-actions #modal-buy,
#product-modal .modal-actions .btn-buy {
  background: #10b981;
  color: #fff;
}

/* Невелика анімація при натисканні */
#product-modal .modal-actions .btn:active {
  transform: translateY(1px);
}

/* На малих екранах: кнопки одна під одною, повна ширина */
@media (max-width: 720px) {
  #product-modal .modal-actions {
    flex-direction: column;
    gap: 10px;
  }
  #product-modal .modal-actions .btn {
    width: 100%;
    min-width: 0;
    height: 48px;
  }
}
/* ----- Вирівнювання і однаковий розмір кнопок в модалі ----- */
#product-modal .modal-actions {
  display: flex;
  gap: 12px;               /* відстань між кнопками */
  align-items: center;     /* вирівняти кнопки по центру по вертикалі */
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top: 6px;
}

/* Уніфікований стиль для обох кнопок в модалі */
#product-modal .modal-actions button,
#product-modal .modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 50px;            /* фіксована висота для рівного вигляду */
  min-width: 150px;        /* мінімальна ширина, змінюй при потребі */
  padding: 0 20px;         /* горизонтальні відступи */
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, transform .06s ease, box-shadow .12s ease;
}

/* кольори (залишаємо твої) */
#product-modal .modal-actions #modal-add,
#product-modal .modal-actions .btn-add {
  background: #f59e0b;
  color: #fff;
}

#product-modal .modal-actions #modal-buy,
#product-modal .modal-actions .btn-buy {
  background: #10b981;
  color: #fff;
}

/* hover: (лише кнопка підсвічується) */
#product-modal .modal-actions button:hover {
  filter: brightness(0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Адаптив: на дуже малих екранах робимо їх стовпчиком */
@media (max-width: 720px) {
  #product-modal .modal-actions { flex-direction: column; gap: 10px; }
  #product-modal .modal-actions button { width: 100%; min-width: 0; }
}
/* 8.1 Hover-ефекти на картках: легке підняття, масштаб і тінь */
.product-card {
  position: relative;              /* щоб z-index працював добре */
  overflow: visible;               /* дозволяє тіні виходити за межі */
  will-change: transform, box-shadow;
  transition: transform .18s cubic-bezier(.2,.9,.3,1),
              box-shadow .18s cubic-bezier(.2,.9,.3,1),
              z-index .18s;
  transform-origin: 50% 95%;
  z-index: 1;
}

/* Ефект при hover / фокусі (клавіатурний фокус теж сприймаємо) */
.product-card:hover,
.product-card:focus-within,
.product-card.touch-active {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(3,20,50,0.18);
  z-index: 8;
}

/* Ніжніший контур при фокусі для доступності */
.product-card:focus-within {
  outline: none;
  box-shadow: 0 14px 36px rgba(10,90,220,0.12);
}

/* Якщо у тебе великі зображення — щоб не "стрибали" елементи всередині */
.product-card img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  transition: transform .18s ease;
}

/* Варіант: невеликий масштаб картинки всередині при hover */
.product-card:hover img,
.product-card:focus-within img {
  transform: scale(1.03);
}

/* Повага до налаштувань користувача — вимикаємо анімації, якщо потрібно */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card img {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}
/* 8.1 Hover-ефекти тільки для секції "Пропозиції" */
.offers-grid .product-card {
  position: relative;
  overflow: visible;
  will-change: transform, box-shadow;
  transition: transform .18s cubic-bezier(.2,.9,.3,1),
              box-shadow .18s cubic-bezier(.2,.9,.3,1),
              z-index .18s;
  transform-origin: 50% 95%;
  z-index: 1;
}

.offers-grid .product-card:hover,
.offers-grid .product-card:focus-within,
.offers-grid .product-card.touch-active {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(3,20,50,0.18);
  z-index: 8;
}

.offers-grid .product-card:focus-within {
  outline: none;
  box-shadow: 0 14px 36px rgba(10,90,220,0.12);
}

.offers-grid .product-card img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  transition: transform .18s ease;
}

.offers-grid .product-card:hover img,
.offers-grid .product-card:focus-within img {
  transform: scale(1.03);
}

/* Поважаємо prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .offers-grid .product-card,
  .offers-grid .product-card img {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}
/* Smooth fade-in reveal - professional, configurable via CSS vars & data-attrs */
/* --- Загальний smooth scrolling --- */
html { scroll-behavior: smooth; }

/* --- 1) Hover-ефекти для карток (всі .product-card) --- */
.product-card {
  position: relative;
  overflow: visible;
  will-change: transform, box-shadow;
  transition: transform .20s cubic-bezier(.2,.9,.3,1),
              box-shadow .20s cubic-bezier(.2,.9,.3,1);
  transform-origin: 50% 95%;
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.product-card img {
  display:block;
  max-width:100%;
  transition: transform .20s ease;
  transform-origin: center center;
}
.product-card:hover,
.product-card:focus-within,
.product-card.touch-active {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 18px 40px rgba(3,20,50,0.18);
  z-index: 8;
}
.product-card:hover img,
.product-card:focus-within img,
.product-card.touch-active img {
  transform: scale(1.03);
}

/* --- 2) Fade-in при скролі (секції і картки) --- */
.fade-in {
  opacity: 0;
  transform: translateY(18px) scale(.995);
  transition: opacity .62s cubic-bezier(.2,.9,.3,1),
              transform .62s cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
}
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Для карток — трохи швидше, тонка різниця */
.product-card.fade-in {
  transition-duration: 360ms;
}

/* --- 3) Плавна модалка (керується aria-hidden) --- */
.product-modal {
  opacity: 0;
  transform: translateY(12px) scale(.995);
  transition: opacity .28s cubic-bezier(.2,.9,.25,1),
              transform .28s cubic-bezier(.2,.9,.25,1);
  pointer-events: none; /* закрита за замовчуванням */
}
.product-modal[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Скаліруємо саму панель трохи для мікро-ефекту */
.product-modal .modal-panel {
  transform-origin: center top;
  transition: transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s;
  transform: translateY(6px) scale(.997);
}
.product-modal[aria-hidden="false"] .modal-panel {
  transform: translateY(0) scale(1);
}

/* --- 4) Доступність: вимикаємо анімації при reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-card,
  .product-card img,
  .fade-in,
  .product-modal,
  .product-modal .modal-panel {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.section-title {
  color: black;
}
/* Бекдроп (фон модального вікна) */
.btn.in-cart, .btn:disabled.in-cart {
  opacity: 0.9;
  cursor: default;
  pointer-events: none;
}
/* ===========================