/* Toast у стилі Shopify */
.tdc-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 24px);
  background: #1a1a1a;
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 0.32s ease, transform 0.32s ease;
  z-index: 99999;
  max-width: 90vw;
  pointer-events: none;
}
.tdc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.tdc-toast svg { flex-shrink: 0; color: #4ade80; }
.tdc-toast--info svg { color: #60a5fa; }

/* Cart icon wrapper - тримає SVG і badge разом */
.tdc-cart-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Лічильник кошика — на правому верхньому куті cart-іконки (overlap) */
.tdc-cart-icon-wrap .tdc-cart-badge,
.navlink--cart .tdc-cart-badge,
.tdc-cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #c43933;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #70826e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

/* Cart badge показуємо тільки коли є товари */
.tdc-cart-badge[data-empty="true"],
.tdc-cart-badge:empty {
  display: none !important;
}

/* Прибираємо badge з mobile toolbar cart-button */
.header__mobile__button .tdc-cart-badge,
.header__mobile__button .tdc-cart-icon-wrap .tdc-cart-badge {
  display: none !important;
}

/* Override-правила після видалення lazysizes:
   гарантуємо що зображення не приховані навіть якщо JS не виконається */
img.lazyload,
img.lazyloading {
  display: revert !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* AOS (Animate On Scroll): без AOS-бібліотеки елементи з [data-aos]
   залишаються opacity:0 коли body має .aos-initialized.
   Форсуємо тільки opacity і visibility — transform НЕ чіпаємо щоб не
   зламати позиціювання header'ів та інших елементів */
.aos-initialized [data-aos],
.aos-initialized [data-aos=hero],
.aos-initialized [data-aos=fade],
.aos-initialized [data-aos=fade-up],
.aos-initialized [data-aos=fade-down],
.aos-initialized [data-aos=fade-left],
.aos-initialized [data-aos=fade-right],
.aos-initialized [data-aos=zoom-in],
.aos-initialized [data-aos=zoom-out],
.aos-initialized [data-aos=slide-up],
.aos-initialized [data-aos=slide-down] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* fade-in-child анімація — також показати без JS-залежності */
.fade-in-child .background-size-cover,
.fade-in-child .background-size-cover.lazyloaded {
  opacity: 1 !important;
}

/* Header має ДВА логотипи: --color (зелений, для білого header'а)
   та --transparent (білий, для header'а над фото). Без JS обидва
   мають .lazyloaded клас → обидва видимі → накладаються один на одного.
   Ховаємо прозорий (білий) логотип, лишаємо тільки кольоровий */
.logo__img--transparent {
  display: none !important;
}

/* Червоний кружок-індикатор "cart has items" що показується
   у дивному місці (top:-15px). Ховаємо повністю — він не потрібен */
[data-header-cart-full="true"],
[data-header-cart-full] {
  display: none !important;
}

/* Judge.me floating "★ Reviews" tab та інші floating widgets — повністю ховаємо */
.jdgm-revs-tab,
.jdgm-revs-tab-btn,
.jdgm-revs-tab__wrapper,
.jdgm-revs-tab__main,
[class*="jdgm-revs-tab"],
[class*="jdgm-floating"],
[class*="jdgm-popup"],
[id*="klaviyo"],
[class*="klaviyo-form"],
[class*="kl-private-reset"],
[class*="needsclick"],
.shopify-launcher,
[id*="shopify-launcher"],
[id*="shop-pay-button-launcher"],
.tidio-chat-iframe,
#tidio-chat,
#tidio-chat-iframe,
#crisp-chatbox,
.crisp-client,
[id^="hubspot-messages"],
[id^="intercom-"],
[class*="intercom-launcher"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Те саме для будь-яких других подвійних логотипів */
.header__logo--has-transparent .logo__img--color {
  opacity: 1 !important;
}

/* Header: зелений фон #70826e з білим текстом і логотипом
   на ВСІХ сторінках (cart, search, products, index, etc.) */
.theme__header {
  position: relative !important;
  background-color: #70826e !important;
  color: #fff !important;
}

.theme__header a,
.theme__header button,
.theme__header .navlink,
.theme__header .navlink--top-level,
.theme__header .header__icon,
.theme__header svg {
  color: #fff !important;
  fill: currentColor;
}

/* На зеленому header'i — показуємо тільки ОДИН логотип:
   — якщо є --has-transparent варіант, показуємо --transparent (білий) і ховаємо --color
   — якщо нема (як на cart.html), показуємо --color і інвертуємо у білий через filter */

/* Випадок 1: header має обидва варіанти (--has-transparent) → показуємо білий */
.theme__header .header__logo--has-transparent .logo__img--color {
  display: none !important;
}
.theme__header .header__logo--has-transparent .logo__img--transparent {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
}

/* Випадок 2: header має ТІЛЬКИ --color (cart.html, search) → показуємо color
   і робимо його білим через CSS filter (бо лого темно-зелений на зеленому фоні
   погано читається) */
.theme__header .header__logo:not(.header__logo--has-transparent) .logo__img--color,
.theme__header .header__logo:not(.header__logo--has-transparent) .logo__img:not(.logo__img--transparent) {
  display: block !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Прибираємо прозорі градієнти за header'ом */
.theme__header:after,
.theme__header:before {
  display: none !important;
}

/* Контейнер hero/section не повинен мати margin-top що компенсує
   absolute header — щоб не було великого порожнього простору */
.section--image[data-overlay-header],
[data-overlay-header] {
  margin-top: 0 !important;
}

/* Таби (вкладки) - переконуємося що клікабельні */
.tab-link {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.tab-link:hover {
  color: #000 !important;
}
.tab-link.current {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  border-bottom: 3px solid #70826e !important;
}

/* Активний таб-контент */
.tab-content {
  visibility: visible !important;
  position: static !important;
  opacity: 1 !important;
  display: none !important;
  padding: 20px 0 !important;
  pointer-events: auto !important;
}
.tab-content.current {
  display: block !important;
}
.tab-content.current * {
  pointer-events: auto !important;
}

/* Акордеони — ТІЛЬКИ для FAQ/section-faq, НЕ для footer чи інших місць */
button.accordion__title[data-accordion-trigger] {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  padding: 18px 40px 18px 0 !important;
  width: 100% !important;
  text-align: left !important;
  position: relative !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: #1a1a1a !important;
  display: block !important;
}
button.accordion__title[data-accordion-trigger]:hover {
  color: #70826e !important;
}

/* Іконка + / - праворуч (тільки FAQ) */
button.accordion__title[data-accordion-trigger]::after {
  content: '+';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  color: #70826e;
  transition: transform 0.2s ease;
}
button.accordion__title.accordion-is-open[data-accordion-trigger]::after,
button.accordion__title[data-accordion-trigger][aria-expanded="true"]::after {
  content: '−';
}

/* Сховуємо no-js fallback (input + label) - щоб не було дублювання при html.js */
html.js .no-js-checkbox,
html.js label.accordion__title.no-js,
html.js label.footer__title.no-js,
html.js label.footer__accordion__head.no-js {
  display: none !important;
}

/* Body акордеону - тільки FAQ */
.section-faq .accordion__body,
.section-faq [data-accordion-body] {
  padding: 16px 0 24px 0;
  line-height: 1.6;
  color: #4a4a4a;
}

.accordion__wrapper {
  position: relative;
}

/* ============================================================
   Product cards — стандартизуємо aspect ratio і позицію баночок
   щоб усі картинки виглядали рівно
   ============================================================ */

/* 1. Усі product card'и мають однаковий aspect ratio = квадрат (1:1)
   Це дає компактний грід без зайвого простору над баночками */
a.lazy-image[style*="padding-top"],
.product-grid-item a.lazy-image,
.product-grid-item .lazy-image[style] {
  padding-top: 100% !important;
}

/* 2. Зображення баночок: cover з вирівнюванням до низу (як полиця)
   — основи баночок на одному рівні, верхня порожня стіна обрізається */
.product-grid-item__image,
.product-grid-item__image[style],
.product-grid-item__images > div[style*="background-image"] {
  background-position: center bottom !important;
  background-size: cover !important;
}

/* 3. Не дозволяємо контейнерам розтягуватися */
.product-grid-item .lazy-image,
.product-grid-item__images {
  overflow: hidden;
}

/* 4. Картки розтягуються на однакову висоту в межах ряду —
   текстова область фіксована, фото зверху, текст знизу */
.product-grid-slide,
.product-grid-item,
.product-grid-item__content,
.product-grid-item__container,
product-grid-item-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Фото займає верхній блок (фіксованої висоти через padding-top:100%) */
.product-grid-item .lazy-image {
  flex-shrink: 0 !important;
}

/* Текстова область має фіксовану висоту — щоб усі ряди карток
   починалися на однакових позиціях */
.product__grid__info {
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Назва продукту - 2 рядки максимум */
.product__grid__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 0 8px 0 !important;
  min-height: 2.4em !important;
}

/* Опис продукту (ingredients) - 2 рядки максимум */
.product__grid__info p[style*="font-size: 13.3"],
.product__grid__info p[style*="13.3"],
.product__grid__info .metafield-rich_text_field {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Ціна — завжди на низу text area */
.product__grid__price {
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* Обгортка ряду в gridі — 3 картки в ширину */
.flickity-grid,
[data-grid] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 24px !important;
}

/* Кожна картка займає рівно 1/3 ширини з урахуванням gap */
.slide-item.product-grid-slide,
[data-grid] [data-item],
[data-grid] .slide-item {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
  width: calc((100% - 48px) / 3) !important;
  align-self: stretch !important;
  margin: 0 !important;
}

/* Mobile: 1 картка на ряд */
@media only screen and (max-width: 767px) {
  .slide-item.product-grid-slide,
  [data-grid] [data-item],
  [data-grid] .slide-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .flickity-grid,
  [data-grid] {
    gap: 16px !important;
  }
}

/* Tablet: 2 картки на ряд */
@media only screen and (min-width: 768px) and (max-width: 1099px) {
  .slide-item.product-grid-slide,
  [data-grid] [data-item],
  [data-grid] .slide-item {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
    width: calc((100% - 24px) / 2) !important;
  }
}

/* ============================================================
   Header dropdown menus — Fresh / Frozen / Sobre
   ============================================================ */

/* Hover на parent → показує dropdown */
.menu__item.parent:hover > .header__dropdown,
.menu__item.parent:focus-within > .header__dropdown,
.menu__item.parent.is-active > .header__dropdown,
.header__dropdown.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Дочірні елементи показуються разом з dropdown */
.menu__item.parent:hover .navlink--child,
.menu__item.parent:focus-within .navlink--child,
.menu__item.parent.is-active .navlink--child,
.header__dropdown.is-visible .navlink--child {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Темний зелений фон щоб білий текст пунктів читався */
.header__dropdown {
  background-color: #70826e !important;
  color: #fff !important;
}

.header__dropdown .navlink--child,
.header__dropdown .navlink--child .navtext,
.header__dropdown a {
  color: #fff !important;
}

.header__dropdown .navlink--child:hover,
.header__dropdown .navlink--child:hover .navtext {
  color: #fff !important;
  opacity: 0.75 !important;
}