/* ===== Шапка сайту (header) ===== */
.header { position: sticky; top: 0px; z-index: 60; background: rgba(245, 242, 232, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header__inner { max-width: 1240px; margin: 0px auto; padding: 15px 28px; display: flex; align-items: center; gap: 30px; }
.header__logo { display: flex; align-items: baseline; gap: 1px; cursor: pointer; font-family: Montserrat, system-ui, -apple-system, sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -0.01em; color: var(--green-dark,#1C4A2A); }
.header__logo-name { color: var(--green,#2E7D32); }
.header__logo-dot { color: var(--accent,#C53A2B); font-weight: 700; }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.header__nav { display: flex; gap: 28px; align-items: center; }
.header__nav-item { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.header__nav-link { font-size: 15px; font-weight: 600; color: var(--ink); }
.header__nav-link:hover { color: var(--green); }
.header__nav-marker { height: 2px; width: 18px; background: var(--accent,#C53A2B); border-radius: 2px; }
.header__phone { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgb(255, 255, 255); color: var(--green-dark,#1C4A2A); text-decoration: none; flex: 0 0 auto; }
.header__phone:hover { border-color: var(--green); color: var(--accent); background: rgba(46, 125, 50, 0.06); }
.header__cart { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255, 255, 255); cursor: pointer; white-space: nowrap; }
.header__cart:hover { border-color: var(--green); }
.header__cart-label { font-size: 14px; font-weight: 700; color: var(--green-dark,#1C4A2A); }
.header__cart-count { min-width: 21px; height: 21px; padding: 0px 6px; border-radius: 999px; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.header__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.header__cta:hover { background: var(--accent-dark,#A82E22); }


/* ===== Нова шапка: лого-зображення, кнопка-кошик, анімований підкреслювач ===== */
.header__logo { display: inline-flex; align-items: center; gap: 0; text-decoration: none; flex: 0 0 auto; }
.header__logo-img { height: 38px; width: auto; display: block; }
.header__nav-marker { display: none; }
.header__nav-item { position: relative; }
.header__nav-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent,#C53A2B); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }
.header__nav-item:hover::after, .header__nav-item--active::after { transform: scaleX(1); }
.header__cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--green-dark,#1C4A2A); text-decoration: none; flex: 0 0 auto; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.header__cart-btn:hover { border-color: var(--green); color: var(--accent); background: rgba(46,125,50,0.06); }
.header__cart-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent,#C53A2B); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--cream,#F5F2E8); }
.header__cta { text-decoration: none; }

/* ===== Логотип: векторний фолбек, поки немає webp ===== */
.header__logo { text-decoration: none; }
.header__logo-svg { display: block; height: 38px; width: auto; }
.footer__brand-svg { display: block; height: 50px; width: auto; }

/* ===== Платіжні картки: текстовий фолбек, поки немає PNG ===== */
.footer__pay-card-text,
.cart__pay-card-text {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #1C4A2A;
  white-space: nowrap;
}


/* ===== Підвал сайту (footer) ===== */
.footer { position: relative; overflow: hidden; background: var(--green-dark,#1C4A2A); color: rgb(217, 212, 196); }
.footer__leaf-1 { position: absolute; top: -22px; left: 6%; width: 120px; opacity: 0.5; transform: rotate(-16deg); pointer-events: none; }
.footer__leaf-2 { position: absolute; top: 40px; right: 4%; width: 90px; opacity: 0.5; transform: rotate(20deg); pointer-events: none; }
.footer__leaf-3 { position: absolute; bottom: 30px; left: 38%; width: 74px; opacity: 0.5; transform: rotate(10deg); pointer-events: none; }
.footer__leaf-4 { position: absolute; bottom: -26px; right: 22%; width: 104px; opacity: 0.5; transform: rotate(-24deg); pointer-events: none; }
.footer__body { position: relative; z-index: 1; }
.footer__grid { max-width: 1240px; margin: 0px auto; padding: 58px 28px 30px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.footer__brand { display: inline-block; background: #fff; border-radius: 14px; padding: 13px 18px; margin-bottom: 18px; }
.footer__brand-img { height: 50px; width: auto; display: block; }
.footer__brand-name { color: rgb(157, 195, 162); }
.footer__brand-dot { color: var(--accent,#C53A2B); }
.footer__about { font-size: 14px; line-height: 1.6; color: rgb(183, 179, 164); margin: 0px 0px 18px; max-width: 280px; }
.footer__follow-label { font-size: 12px; font-weight: 600; color: rgb(157, 195, 162); margin-bottom: 11px; }
.footer__socials { display: flex; gap: 11px; }
.footer__social { display: inline-flex; line-height: 0; }
.footer__social:hover { opacity: 0.82; }
.footer__col-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(157, 195, 162); margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.footer__link { cursor: pointer; color: rgb(217, 212, 196); }
.footer__link:hover { color: rgb(255, 255, 255); }
.footer__phone { display: block; font-size: 18px; font-weight: 700; color: rgb(255, 255, 255); text-decoration: none; margin-bottom: 6px; }
.footer__email { display: block; font-size: 14.5px; color: rgb(217, 212, 196); text-decoration: none; margin-bottom: 6px; }
.footer__address { font-size: 14.5px; color: rgb(183, 179, 164); margin-bottom: 16px; }
.footer__pay-label { font-size: 12px; font-weight: 600; color: rgb(157, 195, 162); margin-bottom: 8px; }
.footer__pay { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer__pay-card { display: inline-flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); border-radius: 7px; padding: 6px 10px; height: 34px; }
.footer__pay-card img { width: auto; display: block; }
.footer__pay-card--privat img, .footer__pay-card:nth-child(1) img { height: 22px; }
.footer__pay-card:nth-child(2) img { height: 17px; }
.footer__pay-card:nth-child(3) img { height: 17px; }
.footer__pay-card:nth-child(4) img { height: 23px; }
.footer__pay-card:nth-child(5) img { height: 14px; }
.footer__pay-card-wide { display: inline-flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); border-radius: 7px; padding: 5px 9px; height: 32px; }
.footer__bottom { max-width: 1240px; margin: 0px auto; padding: 18px 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.footer__copy { font-size: 13px; color: rgb(154, 148, 134); }
.footer__developer { font-size: 13px; text-align: center; }

/* ===== Кнопка мобільного меню (бургер) ===== */
.header__burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--green-dark,#1C4A2A); align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; padding: 0; transition: border-color .2s, background .2s; }
.header__burger:hover { border-color: var(--green); background: rgba(46,125,50,0.06); }
.header__burger-box { position: relative; width: 19px; height: 14px; }
.header__burger-bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.header__burger-bar:nth-child(1) { top: 0; }
.header__burger-bar:nth-child(2) { top: 6px; }
.header__burger-bar:nth-child(3) { top: 12px; }
.header--open .header__burger { color: var(--accent,#C53A2B); border-color: var(--accent,#C53A2B); }
.header--open .header__burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header--open .header__burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header--open .header__burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================  АДАПТИВНІСТЬ  ===================== */
@media (max-width: 1090px) {
  .header__nav, .header__actions {
    gap: 18px;
  }

  .header__nav-link{
    font-size: 14px;
  }
}
/* ---- Згортання навігації у бургер (планшети і вужче) ---- */
@media (max-width: 992px) {
  .header { position: sticky; width: 100%; }
  .header__inner { gap: 16px; padding: 13px 22px; }
  .header__actions { gap: 12px; }
  .header__cta { display: none; }
  .header__burger { display: inline-flex; }
  .header__nav {
    display: flex;
    position: fixed;
    top: var(--header-h, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream,#F5F2E8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 40;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
  }
  .header--open .header__nav { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

  /* Хедер над меню й непрозорий, щоб пункти не просвічували крізь нього */
  .header { z-index: 60; }
  .header--open { position: fixed; background: var(--cream,#F5F2E8); backdrop-filter: none; }
  .header__nav-item { flex-direction: row; align-items: center; justify-content: flex-start; padding: 15px 24px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-10px); transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1); }
  .header--open .header__nav-item { opacity: 1; transform: translateX(0); }
  .header--open .header__nav-item:nth-child(1) { transition-delay: .06s; }
  .header--open .header__nav-item:nth-child(2) { transition-delay: .11s; }
  .header--open .header__nav-item:nth-child(3) { transition-delay: .16s; }
  .header--open .header__nav-item:nth-child(4) { transition-delay: .21s; }
  .header--open .header__nav-item:nth-child(5) { transition-delay: .26s; }
  .header__nav-item:last-child { border-bottom: none; }
  .header__nav-item::after { display: none; }
  .header__nav-item:hover { background: rgba(46,125,50,0.06); }
  .header__nav-link { font-size: 16px; }
  .header__nav-marker { display: none; }
  .footer__leaf-3 { bottom: 60px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 28px; padding: 50px 24px 28px; }
  .footer__bottom { grid-template-columns: repeat(1, 1fr); }
  .footer__copy { text-align: center; }
}

/* ---- Мобільні ---- */
@media (max-width: 768px) {
  .header__inner { padding: 11px 16px; gap: 10px; }
  .header__logo { font-size: 21px; }
  .header__logo-img { height: 30px; }
  .header__actions { margin-left: auto; gap: 9px; }
  .header__cart { padding: 9px 12px; gap: 7px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 22px; padding: 44px 20px 24px; }
  .footer__leaf-1, .footer__leaf-2, .footer__leaf-3, .footer__leaf-4 { display: none; }
  .footer__about { max-width: none; }
}

@media (max-width: 480px) {
  .header__inner { padding: 10px 13px; gap: 8px; }
  .header__logo-img { height: 27px; }
  .header__actions { gap: 7px; }
  .header__phone, .header__cart-btn, .header__burger { width: 38px; height: 38px; }
  .header__cart-label { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .header__phone { display: none; }
}

/* ===== Посилання без підкреслення ===== */
.header__nav-link,
.header__cta,
.footer__link,
.footer__phone,
.footer__email { text-decoration: none; }

/* Блокування скролу фону при відкритому меню.
   overflow на html+body та touch-action надійніше за один overflow на body,
   зокрема на iOS Safari, де body-overflow часто ігнорується. */
html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}