/* Pro Tomatto — базові стилі: змінні, скидання, шрифти, ефекти наведення */

/* ===== Кольорові змінні бренду ===== */
:root {
  --accent: #C53A2B;
  --accent-dark: #A82E22;
  --green: #2E7D32;
  --green-dark: #1C4A2A;
  --cream: #F5F2E8;
  --cream2: #EFEADA;
  --ink: #2A2A24;
  --muted: #6F6F62;
  --line: rgba(28,74,42,0.13);
}

/* ===== Скидання та типографіка ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;margin:0;padding:0}
html,body{margin:0;padding:0}
body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;background:#F5F2E8;color:#2A2A24;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit; text-decoration: none;}
button{cursor:pointer}
::-moz-selection{background:#C53A2B;color:#fff}
::selection{background:#C53A2B;color:#fff}

/* ===== Розділювач ===== */
.divider { height: 62px; background: var(--cream,#F5F2E8) url('../img/leaf-pattern.webp') repeat-x center/auto 62px; margin: 10px 0px; }

/* ===== Анімації ===== */
@keyframes ptFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ptIn{from{opacity:0}to{opacity:1}}

/* ===== Стрілка, що відсувається при наведенні на кнопку/посилання ===== */
.arrow{display:inline-block;transition:transform .25s ease}
*:hover > .arrow{transform:translateX(6px)}

/* ===== Єдиний клас «легке підняття» кнопок при наведенні ===== */
.btn-lift { transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; }
.btn-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(28,74,42,0.55); }

/* ===== Рухома стрічка логотипів (marquee) ===== */
.marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.marquee__track { display: flex; width: max-content; align-items: center; animation: marquee-scroll 32s linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__logo { flex: 0 0 auto; height: 72px; width: auto; padding: 0 42px; object-fit: contain; opacity: .92; transition: opacity .2s ease; }
.marquee__logo:hover { opacity: 1; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
@media (max-width: 768px) { .marquee__logo { height: 54px; padding: 0 27px; } }

/* ===== Поява секцій при скролі (scroll reveal) ===== */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Коренева обгортка сторінки ===== */
.page { font-family: Montserrat, system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--cream,#F5F2E8); min-height: 100vh; -webkit-font-smoothing: antialiased }

/* ===== Фікси інтеграції з WordPress/WooCommerce ===== */

/* Прибираємо горизонтальний скрол: листочки у футері/статті абсолютні */
html, body { overflow-x: hidden; }
.page { overflow-x: clip; }

/* Ресет для кнопок, які раніше були <div>/<span> */
button { font: inherit; color: inherit; background: none; border: 0; }

/* Атрибут hidden завжди перемагає — інакше display:flex/grid у класах
   лишає елемент видимим, попри [hidden] у розмітці. */
[hidden] { display: none !important; }

/* Доступність */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: 10px 18px;
  background: #fff; border-radius: 8px;
  z-index: 999;
}

/* Нотіфікації WooCommerce у нашій стилістиці */
.pt-notices { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.pt-notice {
  border-radius: 14px; padding: 14px 18px; margin: 18px 0;
  font-size: 14.5px; line-height: 1.5;
  border: 1px solid transparent;
}
.pt-notice--success { background: rgba(46,125,50,.08); border-color: rgba(46,125,50,.28); color: #245c28; }
.pt-notice--error   { background: rgba(197,58,43,.08); border-color: rgba(197,58,43,.28); color: var(--accent-dark,#A82E22); }
.pt-notice--info    { background: rgba(28,74,42,.06); border-color: rgba(28,74,42,.16); color: var(--green-dark,#1C4A2A); }
.pt-notice a { font-weight: 700; color: inherit; }
.pt-notice .button { display: none; }