/* Спільні токени та стилі шапки/футера/картки товару. Підключається сайтвайд через common/header.php */
:root {
  --home-cream: #fdf6ee;
  --home-cream-soft: #fbf5f1;
  --home-accent: #d6473a;
  --home-accent-bright: #e63329;
  --home-accent-dark: #b83a2f;
  --home-text: #221f1d;
  --home-muted: #6b625c;
  --home-border: #f0e2d6;
  --home-icon: #6f6660;
  --home-placeholder: #8d837c;
  --home-chip-bg: #fbf5f1;

  /* Тінь білих карток. Нульове зміщення — тінь однаково обводить блок
     з усіх боків, а не стікає донизу. Невелике розмиття тримає край
     чітким; кільце 1px окреслює саму межу.
     Один токен на весь сайт, щоб картки не розповзались по вигляду. */
  --shadow-card:
    0 0 0 1px rgba(60, 30, 24, 0.05),
    0 0 16px rgba(60, 30, 24, 0.13);
}

/* ===== Єдині бокові відступи для всієї сторінки =====

   Один токен на весь сайт: 20px на десктопі, 9px на телефоні.
   Bootstrap-контейнери перевизначені тут, тому хедер, банер, пошук,
   чіпи, картки й футер вирівнюються по одній лінії автоматично —
   не треба задавати відступи кожному блоку окремо. */

:root {
  --page-gutter: 20px;
}

@media (max-width: 767.98px) {
  :root {
    --page-gutter: 15px;
  }
}

.container,
.container-fluid,
.page-shell {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Bootstrap-рядок відтягує себе на пів-проміжка в кожен бік, розраховуючи,
   що в контейнера стільки ж відступу. Коли ми зменшили відступ до 9px,
   стандартні рядки (проміжок 24px, тобто -12px) почали вилазити за екран
   на 3px — сторінка отримувала горизонтальну прокрутку, і всі блоки
   виглядали зсунутими. Тому проміжок не може бути більшим за подвійний
   відступ сторінки. */
@media (max-width: 767.98px) {
  /* Саме на .row, а не на контейнері: Bootstrap задає --bs-gutter-x
     на самому рядку, тому значення з контейнера не успадковується. */
  .row {
    --bs-gutter-x: 18px;
  }

  /* Стрілки каруселі OpenCart винесені за її межі (left/right: -20px).
     На телефоні поле сторінки лише 9px, тому вони вилазили за екран —
     заводимо їх усередину. */
  /* Селектор із такою ж вагою, як у bootstrap.css
     (.carousel .carousel-control-prev), інакше не перебиває. */
  .carousel .carousel-control-prev {
    left: 0;
  }

  .carousel .carousel-control-next {
    right: 0;
  }
}

/* Спливаюче повідомлення OpenCart має фіксовану ширину 400px — на телефоні
   це ширше за екран, і сторінка отримувала горизонтальну прокрутку. */
#alert {
  width: min(400px, calc(100vw - var(--page-gutter) * 2));
  margin-left: 0;
  transform: translateX(-50%);
}

/* ===== Розкладка сторінки =====

   OpenCart тримає футер «прилиплим» до низу старим способом: #container і
   сам footer стоять на position: absolute, а під футер резервується 730px
   порожнього місця в #content. Через це футер налазить на контент скрізь,
   де #content немає або де він коротший за резерв.

   Замінюємо це на звичайний flex-стовпчик: контент росте, футер сідає під
   ним і в будь-якому разі не піднімається вище низу екрана. */

html,
body {
  height: auto;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--home-text);
}

#container {
  position: static;
  min-height: 0;
  margin-bottom: 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

#container > main {
  flex: 1 0 auto;
}

footer {
  position: static;
  bottom: auto;
  margin-top: auto;
}

/* Резерв під абсолютний футер більше не потрібен */
#content,
#column-left,
#column-right {
  padding-bottom: 0;
}

/* Ядро OpenCart фарбує всі заголовки в #444. Через це заголовок у будь-якому
   блоці з власним кольором тексту (темні або кольорові картки) лишався
   темно-сірим — на темному тлі його просто не було видно.
   Хай успадковують колір контейнера: блоки, які задають свій колір явно,
   працюють як і раніше, а решта беруть колір тексту сторінки. */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
}

/* ===== Шапка сайту ===== */

.site-header {
  background: #fff;
  /* Шапка лишається на місці під час гортання. 1040 — нижче за
     вікно кошика (1080) і панель меню (1090), тому вони й далі
     перекривають її, а не навпаки. */
  position: sticky;
  top: 0;
  z-index: 1040;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 84px;
}

/* --- лого --- */
/* Та сама історія, що й з кошиком: посилання всередині блоку ставало
   на текстовий рядок, і лого з'їжджало на 3px вище за решту шапки. */
.site-header__logo {
  display: flex;
  align-items: center;
}

.site-header__logo a {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  line-height: 1.1;
}

.site-header__logo img {
  /* Підпис тепер частина картинки, тож лого може бути вищим */
  max-height: 44px;
  width: auto;
}

.site-logo__name {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--home-text);
}

.site-logo__tagline {
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--home-muted);
}

/* --- меню --- */
.site-header__nav {
  flex: 1 1 auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--home-text);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--home-accent-bright);
}

.site-nav__caret {
  width: 14px;
  height: 14px;
}

.site-nav__link.dropdown-toggle::after {
  display: none; /* свій шеврон замість бутстрапівського трикутника */
}

.site-nav__item.dropdown .dropdown-menu {
  border: 1px solid var(--home-border);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  padding: 8px;
  margin-top: 8px;
}

.site-nav__item.dropdown .dropdown-item {
  border-radius: 8px;
  font-size: 0.88rem;
  padding: 8px 12px;
}

.site-nav__item.dropdown .dropdown-item:hover {
  background: var(--home-chip-bg);
  color: var(--home-accent-bright);
}

/* --- телефон та іконки праворуч --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Місто в шапці: пін і назва обраного міста */
.site-header__city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 170px;
  padding: 7px 12px;
  border: 1px solid var(--home-border, #f0e2d6);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  color: var(--home-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.site-header__city svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--home-accent-bright);
}

.site-header__city span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__city:hover {
  border-color: var(--home-accent-bright);
  color: var(--home-accent-bright);
}

@media (max-width: 767.98px) {
  /* На телефоні міста в шапці нема: воно в меню, що відкривається гамбургером */
  .site-header__city {
    display: none;
  }
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--home-text);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}

.site-header__phone svg {
  width: 19px;
  height: 19px;
  color: var(--home-text);
}

.site-header__phone:hover {
  color: var(--home-accent-bright);
}

.site-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--home-accent-bright);
  text-decoration: none;
  flex: 0 0 auto;
}

.site-header__icon-btn svg {
  width: 22px;
  height: 22px;
}

.site-header__icon-btn:hover {
  color: var(--home-accent-dark);
}

/* Кошик у шапці — власна кнопка й вікно «Ваше замовлення».
   Стилі живуть у cart-modal.css. Тут лишається тільки позиціювання
   обгортки; старі правила під бутстрапівський дропдаун видалені —
   вони били по кнопках усередині самого вікна (воно теж всередині #cart). */
.site-header__cart {
  position: relative;
  flex: 0 0 auto;
  /* Обгортку кошика OpenCart малює як звичайний блок, і кнопка
     всередині ставала на текстовий рядок: під іконкою лишалось
     місце під «хвостики» літер, через що кошик виглядав піднятим
     вище за телефон і сердечко. flex прибирає цей рядок. */
  display: flex;
  align-items: center;
}

/* Стандартна тема дає #cart нижній відступ 10px. У флексі з
   вирівнюванням по центру рахується коробка разом із відступом,
   тому видима іконка з'їжджала на 5px вище за телефон і сердечко.
   Селектор із id — інакше правило теми переважає за вагою. */
#cart.site-header__cart {
  margin-bottom: 0;
}


/* --- гамбургер: тільки на телефоні --- */
.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--home-text);
  padding: 0;
  flex: 0 0 auto;
}

.site-header__toggle svg {
  width: 24px;
  height: 24px;
}

/* Вузький комп'ютер / планшет упоперек (992–1199px): меню, перемикач мов,
   телефон і три іконки разом ширші за екран — шапка вилазила вбік. Стискаємо
   відстані, а на 992–1099 лишаємо від телефону тільки іконку. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-nav {
    gap: 18px;
  }

  .site-header__actions {
    gap: 14px;
  }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  .site-header__phone span {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .site-header__inner {
    gap: 16px;
    min-height: 64px;
  }

  .site-header__toggle {
    display: inline-flex;
  }

  /* Лого рівно по центру екрана. Через flex не вийде: зліва гамбургер (24px),
     справа серце з кошиком (~57px), і центр зсувається. Тому виводимо його
     з потоку й прив'язуємо до середини. */
  .site-header__inner {
    position: relative;
  }

  .site-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-header__logo a {
    align-items: center;
  }

  .site-header__phone span {
    display: none;
  }

  .site-header__actions {
    gap: 14px;
  }

  /* На телефоні меню в шапці не показуємо взагалі — його роль виконує
     панель на весь екран (site-menu.css). Стилі старого розкривного
     списку прибрані: він більше не використовується. */
  .site-header__nav {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .site-header__inner {
    min-height: 56px;
    gap: 12px;
  }

  /* На телефоні телефонного номера в макеті немає — лишаємо серце й кошик */
  .site-header__phone {
    display: none;
  }

  .site-logo__name {
    font-size: 1.15rem;
  }

  .site-logo__tagline {
    font-size: 0.45rem;
  }

  .site-header__logo img {
    max-height: 34px;
  }

  .site-header__icon-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Стилі футера живуть у site-footer.css — він відповідає новій розмітці
   footer.twig (чотири колонки, соцмережі з підписами, випадайка з адресами).
   Стара версія тутешніх правил видалена, щоб не було двох конфліктних. */

/* Стилі картки товару переїхали в product-card.css — вона підключається
   сайтвайд через common/header.php і відповідає новій розмітці thumb.twig
   (плашки міста й лічильника, рядок характеристик, кнопки «Подарувати»
   та «Поділитися»). Тут їх більше немає, щоб не було двох конфліктних версій. */

/* ================= конфеті =================
   Святкове оздоблення блоків. Розмітка — у
   catalog/view/template/common/confetti.twig, виліт при появі й рух за
   мишкою — у catalog/view/javascript/confetti.js.

   Господар має бути position: relative і нести атрибут data-confetti.

   Кожна фігурка має власне місце у відсотках від блоку — координати
   зняті з макета. Відсоток задає центр фігурки, тому від нього
   віднімається півширини: transform чіпати не можна, його займає
   анімація вильоту. */
.confetti {
  position: absolute;
  inset: 0;
  /* Конфеті не має перехоплювати кліки й має лягати поверх сусідніх
     блоків, якщо десь виходить за край. */
  z-index: 3;
  pointer-events: none;
  transition: transform 0.5s ease-out;
}

.confetti__piece {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Власна тінь під кожною фігуркою — саме вона робить кружечок
     наліпкою, що впала на картку, а не плоским кольоровим кружечком
     намальованим по тлу. box-shadow, а не filter: drop-shadow — усі
     фігурки тепер прості кола, тож тінь по колу рахується так само
     точно, а drop-shadow на сусідніх фігурках подекуди рвав/обрізав
     край через окремий шар рендерингу. */
  box-shadow: 0 3px 5px rgba(34, 12, 8, 0.28);
}

.confetti__piece svg {
  display: block;
  width: 100%;
  height: auto;
}


/* --- розміри фігурок ---
   Різні навмисно: однакові кружечки читаються як візерунок, різні —
   як розсип. */
.confetti__piece--a { width: 44px; }
.confetti__piece--b { width: 22px; }
.confetti__piece--c { width: 18px; }
.confetti__piece--d { width: 13px; }
.confetti__piece--e { width: 34px; }
.confetti__piece--f { width: 15px; }

/* --- виліт при появі ---
   Фігурки вилітають знизу на свої місця по одній, коли блок уперше
   з'явився на екрані. Клас is-revealed скрипт вішає один раз і більше
   не знімає: прогорнув назад — вони вже там. */
@media (prefers-reduced-motion: no-preference) {
  .confetti__piece {
    opacity: 0;
  }

  [data-confetti].is-revealed .confetti__piece {
    animation: confetti-in 1.1s cubic-bezier(0.16, 0.68, 0.3, 1) forwards;
  }

  /* Кожна фігурка летить під своїм кутом і крутиться свою кількість
     обертів — справжнє конфеті не рухається в такт. */
  .confetti__piece--a { --from-x: -26px; --spin: -560deg; --peak: -40px; animation-duration: 1.1s; animation-delay: 0s; }
  .confetti__piece--b { --from-x: 22px;  --spin: 480deg;  --peak: -30px; animation-duration: 1.26s; animation-delay: 0.12s; }
  .confetti__piece--c { --from-x: -18px; --spin: -430deg; --peak: -46px; animation-duration: 1.05s; animation-delay: 0.24s; }
  .confetti__piece--d { --from-x: 24px;  --spin: 620deg;  --peak: -28px; animation-duration: 1.2s; animation-delay: 0.36s; }
  .confetti__piece--e { --from-x: -20px; --spin: -500deg; --peak: -34px; animation-duration: 1.15s; animation-delay: 0.48s; }
  .confetti__piece--f { --from-x: 18px;  --spin: 540deg;  --peak: -26px; animation-duration: 1.3s; animation-delay: 0.6s; }
}

/* Постріл конфеті: фігурка вилітає знизу, злітає трохи вище свого
   місця, перевертається, потім осідає. --fly стискає весь політ, коли
   блок маленький. */
@keyframes confetti-in {
  0% {
    opacity: 0;
    transform: translate(calc(var(--from-x, 0px) * var(--fly, 1)), calc(90px * var(--fly, 1))) rotate(var(--spin, -540deg)) scale(0.35);
  }

  14% {
    opacity: 1;
  }

  44% {
    transform: translate(calc(var(--from-x, 0px) * var(--fly, 1) * 0.3), calc(var(--peak, -36px) * var(--fly, 1))) rotate(calc(var(--spin, -540deg) * 0.4)) scale(1.1);
  }

  72% {
    transform: translate(calc(var(--from-x, 0px) * var(--fly, 1) * -0.1), calc(var(--peak, -36px) * var(--fly, 1) * 0.26)) rotate(calc(var(--spin, -540deg) * 0.12)) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* --- «Не знаєте що обрати?»: три окремі групки в кутку, кожна з
   чітким відступом від сусідньої — золотий сам, пара червоних внахлест
   поруч, кремовий нижче — точно як у референсі. Решту фігурок ховаємо:
   тут лише ці чотири, а не розсип по картці. */
.confetti--boxes .confetti__piece--b { left: calc(88.8% - 11px); top: calc(1.1% - 11px); }
.confetti--boxes .confetti__piece--e { width: 32px; left: calc(98% - 16px);    top: calc(2% - 16px); }
.confetti--boxes .confetti__piece--a { width: 36px; left: calc(97.05% - 18px); top: calc(9.91% - 18px); }
.confetti--boxes .confetti__piece--c { left: calc(92.4% - 9px);  top: calc(25.5% - 9px); }

.confetti--boxes .confetti__piece--d,
.confetti--boxes .confetti__piece--f {
  display: none;
}

/* --- «Електронний сертифікат»: внизу праворуч, біля телефону — окрема
   червона й пара золотих внахлест (менша спереду, більша позаду),
   точно як у референсі. Розміри тут свої: у референсі всі три
   кружечки майже однакові (золоті — практично рівні, червона трохи
   більша), тому глобальні ширини (--b, --d, --e) тут перебиваємо. --- */
.confetti--cert .confetti__piece--e { width: 32px; left: calc(90% - 16px);   top: calc(85% - 16px); }
.confetti--cert .confetti__piece--d { width: 23px; left: calc(96.4% - 11.5px); top: calc(90% - 11.5px); }
.confetti--cert .confetti__piece--b { width: 25px; left: calc(97.1% - 12.5px); top: calc(94.1% - 12.5px); }

.confetti--cert .confetti__piece--a,
.confetti--cert .confetti__piece--c,
.confetti--cert .confetti__piece--f {
  display: none;
}

/* --- «Чому ONEDEAL» на сторінці товару ---
   Панель широка й низька, тож розсип ширший: кружечки по краях згори,
   сердечка знизу. */
/* Вільні смуги панелі: над заголовком, у бічному полі та між нижнім
   краєм карток і краєм панелі. Саме туди й ставимо фігурки. */
.pdp-why .confetti__piece--a { left: calc(84% - 15.5px);  top: calc(4% - 15.5px); }
.pdp-why .confetti__piece--b { left: calc(76% - 12.5px);  top: calc(9% - 12.5px); }
.pdp-why .confetti__piece--c { left: calc(1.6% - 15.5px); top: calc(62% - 15.5px); }
.pdp-why .confetti__piece--d { left: calc(24% - 10px);    top: calc(90% - 10px); }
.pdp-why .confetti__piece--e { left: calc(31% - 8.5px);   top: calc(96% - 8.5px); }
.pdp-why .confetti__piece--f { left: calc(88% - 10px);    top: calc(92% - 10px); }

/* --- телефон ---
   Картки вужчі, тож фігурки трохи менші, а зайві ховаємо: у макеті на
   вузькому екрані розсип рідший. */
@media (max-width: 767.98px) {
  .confetti__piece--a { width: 32px; }
  .confetti__piece--b { width: 16px; }
  .confetti__piece--c { width: 14px; }
  .confetti__piece--d { width: 10px; }
  .confetti__piece--e { width: 24px; }
  .confetti__piece--f { width: 12px; }

  /* Місця на телефоні — та сама ідея, що на компі: три окремі групки
     в кутку («Не знаєте що обрати?») і окрема червона з парою золотих
     («Електронний сертифікат»), тільки менші й ближче одна до одної
     через вужчу картку. */
  .confetti--boxes .confetti__piece--b { left: calc(78.3% - 8px);  top: calc(2.6% - 8px); }
  .confetti--boxes .confetti__piece--e { width: 23px; left: calc(95% - 11.5px);   top: calc(3% - 11.5px); }
  .confetti--boxes .confetti__piece--a { width: 26px; left: calc(93.3% - 13px);   top: calc(6.56% - 13px); }
  .confetti--boxes .confetti__piece--c { left: calc(84.9% - 7px);  top: calc(13.97% - 7px); }

  .confetti--boxes .confetti__piece--d,
  .confetti--boxes .confetti__piece--f {
    display: none;
  }

  /* Той самий прийом, що на сусідній картці: окрема червона й пара
     золотих внахлест поруч, у кутку зверху — так само, як на першій
     картці, і того ж розміру. Нижче фігурки ховаються під фото
     телефону, тому саме кут зверху. */
  .confetti--cert .confetti__piece--d { width: 14px; left: calc(94% - 7px);   top: calc(4% - 7px); }
  .confetti--cert .confetti__piece--e { width: 24px; left: calc(84% - 12px);  top: calc(1.43% - 12px); }
  .confetti--cert .confetti__piece--b { width: 16px; left: calc(95.1% - 8px); top: calc(6.12% - 8px); }

  .confetti--cert .confetti__piece--a,
  .confetti--cert .confetti__piece--c {
    display: none;
  }

  /* «Чому ONEDEAL»: заголовок займає лише ліву частину верхньої смуги,
     тож фігурки стають праворуч від нього та в нижньому полі панелі. */
  .pdp-why .confetti__piece--a { left: calc(85% - 16px); top: calc(4% - 16px); }
  .pdp-why .confetti__piece--b { left: calc(75% - 8px);  top: calc(1% - 8px); }
  .pdp-why .confetti__piece--d { left: calc(20% - 5px);  top: calc(97% - 5px); }
  .pdp-why .confetti__piece--f { left: calc(85% - 6px);  top: calc(97% - 6px); }

  .pdp-why .confetti__piece--c,
  .pdp-why .confetti__piece--e {
    display: none;
  }
}


/* --- перемикач мови UA | RU --- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--home-border);
  border-radius: 999px;
  background: #fff;
  flex: 0 0 auto;
}

.lang-switch__item {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--home-muted);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.lang-switch__item:hover {
  color: var(--home-text);
}

.lang-switch__item.is-active {
  background: var(--home-accent-bright);
  color: #fff;
  pointer-events: none;
}

/* у шапці на вузьких екранах перемикач живе в бічному меню */
@media (max-width: 991.98px) {
  .site-header__actions > .lang-switch {
    display: none;
  }
}


/* --- кабінет і обране в шапці --- */
.site-header__icon-btn {
  position: relative;
}

.site-header__account {
  color: var(--home-text);
}

.site-header__account:hover {
  color: var(--home-accent-bright);
}

.site-header__badge {
  position: absolute;
  top: -7px;
  right: -9px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--home-accent-bright);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}

.site-header__badge[hidden] {
  display: none;
}

/* ===== Спливні повідомлення (додано в обране, в кошик, помилки форм) =====
   Замість стандартної зеленої плашки OpenCart по центру екрана — біла картка
   у стилі сайту: кружечок-іконка, текст, тонка хрестинка. Зверху справа на
   комп'ютері, на всю ширину під шапкою на телефоні. Зникає сама (toast.js). */
:root {
  --toast-success: #2e9d62;
  --toast-warning: #d99a2b;
}

#alert {
  position: fixed;
  top: 92px;
  right: 24px;
  left: auto;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  transform: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

#alert > * {
  pointer-events: auto;
}

.alert {
  position: relative;
  display: block;
  margin: 0 0 14px;
  padding: 14px 44px 14px 50px;
  border: 1px solid var(--home-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(34, 31, 29, 0.14);
  color: var(--home-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

#alert .alert {
  margin: 0;
  animation: toast-in 0.28s ease;
}

#alert .alert.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.alert > .fa-solid,
.alert > i {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 22px;
  font-size: 1.15rem;
  line-height: 1.5;
  text-align: center;
}

.alert-success > .fa-solid {
  color: var(--toast-success);
}

.alert-danger > .fa-solid {
  color: var(--home-accent-bright);
}

.alert-warning > .fa-solid,
.alert-info > .fa-solid {
  color: var(--toast-warning);
}

/* тонка кольорова смужка зліва — за типом повідомлення */
.alert::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--home-border);
}

.alert-success::before {
  background: var(--toast-success);
}

.alert-danger::before {
  background: var(--home-accent-bright);
}

.alert-warning::before,
.alert-info::before {
  background: var(--toast-warning);
}

.alert a {
  color: var(--home-accent);
  text-decoration: none;
  font-weight: 600;
}

.alert a:hover {
  color: var(--home-accent-dark);
  text-decoration: underline;
}

.alert .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background-size: 11px;
  opacity: 0.55;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.alert .btn-close:hover {
  opacity: 1;
  background-color: var(--home-cream-soft);
}

@media (max-width: 767.98px) {
  #alert {
    top: 70px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .alert {
    border-radius: 16px;
    font-size: 0.88rem;
  }
}

/* стара кольорова «рамка» повідомлень OpenCart (#alert .alert-success тощо) більше не потрібна */
#alert .alert,
#alert .alert-primary,
#alert .alert-secondary,
#alert .alert-success,
#alert .alert-warning,
#alert .alert-danger,
#alert .alert-info,
#alert .alert-light,
#alert .alert-dark {
  box-shadow: 0 10px 30px rgba(34, 31, 29, 0.14);
}

/* Випадайка «Каталог подарунків» довга (основні категорії + групи «Для кого»
   і «Добірки»): на низькому екрані вона не має вилазити за нижній край. */
.site-nav__item > .dropdown-menu {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}