/* ==========================================================================
   GLOBAL SYSTEMS — загальні стилі сайту (index.html + catalog.html)
   Палітра: чорний / білий / кислотно-лаймовий (з логотипу компанії)
   ========================================================================== */

/* ---------- 1. Шрифти ---------- */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 2. CSS-змінні (дизайн-токени) ---------- */
:root{
  --black:        #141414;
  --black-soft:   #1c1c1c;
  --ink:          #202020;
  --gray-900:     #2b2b2b;
  --gray-700:     #4a4a4a;
  --gray-500:     #7a7a7a;
  --gray-300:     #c9c9c9;
  --gray-200:     #e4e4e1;
  --gray-100:     #f0f0ec;
  --off-white:    #f7f7f2;
  --white:        #ffffff;

  --lime:         #d9e021;   /* точний колір з логотипу */
  --lime-dark:    #b7bd0f;   /* для hover на світлому тлі */
  --lime-soft:    #eef2b8;   /* дуже світлий лайм для підкладок */

  --radius-sm:    10px;
  --radius-md:    18px;
  --radius-lg:    28px;

  --shadow-sm:    0 2px 10px rgba(20,20,20,.06);
  --shadow-md:    0 12px 30px rgba(20,20,20,.10);
  --shadow-lg:    0 24px 60px rgba(20,20,20,.16);

  --container:    1240px;
  --header-h:     84px;

  --ease:         cubic-bezier(.22,.85,.35,1);
  --dur-fast:     .22s;
  --dur:          .45s;
}

/* ---------- 3. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body.nav-lock, body.filter-lock{ overflow: hidden; }
body{
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
[hidden]{ display: none !important; }   /* атрибут hidden сильніший за будь-який display у класах */
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; cursor: pointer; }
input, textarea, select{ font: inherit; }
svg{ display: block; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

h1,h2,h3,.font-display{
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-transform: uppercase;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.eyebrow::before{
  content: "";
  width: 22px; height: 3px;
  background: var(--lime);
  border-radius: 2px;
}

.section{ padding: 96px 0; }
.section--tight{ padding: 64px 0; }
.section--dark{ background: var(--black); color: var(--white); }
.section--alt{ background: var(--off-white); }

.section-head{
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head h2{ font-size: clamp(28px, 3.4vw, 44px); margin-top: 14px; }
.section-head p{ margin-top: 16px; color: var(--gray-700); font-size: 17px; }
.section--dark .section-head p{ color: var(--gray-300); }

.section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow{ justify-content: center; }
.section-head--center .eyebrow::before{ display: none; }

/* ---------- 4. Кнопки ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:active{ transform: scale(.97); }

.btn-primary{
  background: var(--lime);
  color: var(--black);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{
  background: var(--black);
  color: var(--lime);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-dark{
  background: var(--black);
  color: var(--white);
}
.btn-dark:hover{
  background: var(--lime);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline{
  background: transparent;
  border-color: currentColor;
  color: var(--black);
}
.btn-outline:hover{
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  transform: translateY(-2px);
}
.section--dark .btn-outline, .hero .btn-outline{ color: var(--white); }
.section--dark .btn-outline:hover, .hero .btn-outline:hover{ background: var(--white); color: var(--black); }

.btn-sm{ padding: 11px 20px; font-size: 14px; }
.btn-block{ width: 100%; }

/* ---------- 5. Header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(20,20,20,.06);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.site-header .container{
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 20px;
}
.brand{ grid-column: 1; justify-self: start; }
.main-nav{ grid-column: 2; justify-self: center; }
.header-actions{ grid-column: 3; justify-self: end; }

/* Каталог — виділена кнопка по центру навігації (найважливіший розділ сайту) */
.main-nav a.nav-catalog-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: var(--black);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.main-nav a.nav-catalog-link svg{ width: 16px; height: 16px; }
.main-nav a.nav-catalog-link::after{ display: none; }
.main-nav a.nav-catalog-link:hover{ color: var(--black); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.main-nav a.nav-catalog-link.is-active{ background: var(--black); color: var(--lime); }

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand img{ height: 56px; width: auto; }
/* Логотип у хедері — статичний PNG (як і було), розмір трохи збільшено
   порівняно з початковим (56px) за проханням користувачки. */
.brand .logo-mark{ height: 64px; width: auto; flex-shrink: 0; }

.brand-word{
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--black);
}
.brand-word span{ display: block; color: var(--black); }

.main-nav{
  display: flex;
  align-items: center;
  gap: 34px;
}
.main-nav a{
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--lime-dark);
  transition: right var(--dur-fast) var(--ease);
}
.main-nav a:hover{ color: var(--black); }
.main-nav a:hover::after{ right: 0; }
.main-nav a.is-active{ color: var(--black); }
.main-nav a.is-active::after{ right: 0; background: var(--black); }

/* Блок контактів усередині мобільного меню — на десктопі не показується
   (там нав — звичайний горизонтальний список посилань). */
.mobile-contacts{ display: none; }

.header-actions{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.header-phone{
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.header-phone small{
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Соцмережі в хедері — з'являються лише на мобільному (там, де ховається
   .header-phone), щоб посилання на Instagram/Facebook/TikTok завжди були
   на очах: хедер position:fixed, тож ця група лишається видимою при
   будь-якому скролі сторінки. */
.header-social{ display: none; }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span{ width: 20px; height: 2px; background: var(--black); border-radius: 2px; transition: transform var(--dur-fast), opacity var(--dur-fast); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Reveal-анімації при скролі ---------- */
.reveal{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in-view{ opacity: 1; transform: none; }
.reveal-stagger.in-view > *{ transition-delay: calc(var(--i, 0) * 120ms); }

/* ---------- 7. Floating actions ---------- */
.floating-actions{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.fab{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fab:hover{ background: var(--lime); color: var(--black); transform: translateY(-3px); }
.fab svg{ width: 18px; height: 18px; flex-shrink: 0; }

.to-top{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.to-top.is-visible{ opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover{ background: var(--lime); }
.to-top svg{ width: 18px; height: 18px; }

/* ---------- 8. Footer ---------- */
.site-footer{
  background: var(--black);
  color: var(--gray-300);
  padding: 72px 0 28px;
}
.footer-top{
  display: grid;
  /* трохи ширші колонки й більший проміжок між ними на широких екранах —
     з вузьким repeat(2,200px) блок "Каталог"/"Контакти" губився по центру
     футера, лишаючи великі порожні поля з обох боків на десктопі. */
  grid-template-columns: repeat(2, minmax(180px, 260px));
  justify-content: center;
  gap: 40px 120px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
/* Блок бренду — окремим рядком під колонками "Каталог"/"Контакти" (не
   лівою колонкою, як було), по центру: лого, опис і соцмережі вирівняні
   по центру, з тонкою лінією-розділювачем зверху. */
.footer-brand{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-brand .brand{ justify-content: center; }
.footer-brand .brand-word{ color: var(--white); }
.footer-brand .brand-word span{ color: var(--lime); }
.footer-brand img{ height: 54px; }
.footer-about{
  margin-top: 16px;
  font-size: 14px;
  color: var(--gray-500);
  max-width: 34ch;
}
.footer-social{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.footer-social a:hover{ background: var(--lime); border-color: var(--lime); color: var(--black); }
.footer-social svg{ width: 16px; height: 16px; }

.footer-col h4{
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--white);
  font-weight: 700;
  margin-bottom: 18px;
}
.footer-col ul li{ margin-bottom: 12px; }
.footer-col a{ font-size: 14px; color: var(--gray-300); transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--lime); }
.footer-col p{ font-size: 14px; color: var(--gray-300); margin-bottom: 6px; }

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px;
  font-size: 13px;
  color: var(--gray-500);
}

/* ==========================================================================
   9. HERO
   ========================================================================== */
.hero{
  position: relative;
  padding: calc(var(--header-h) + 64px) 0 100px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
.hero::before{
  content:"";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  background: radial-gradient(circle at center, rgba(217,224,33,.35), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}
.hero .container{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow{ color: var(--lime); }
.hero-eyebrow::before{ background: var(--lime); }
.hero h1{
  margin-top: 18px;
  font-size: clamp(34px, 4.6vw, 58px);
  color: var(--white);
}
.hero h1 em{
  font-style: normal;
  color: var(--lime);
}
.hero-sub{
  margin-top: 22px;
  font-size: 18px;
  color: var(--gray-300);
  max-width: 46ch;
}
.hero-cta{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hero-trust{
  display: flex;
  gap: 28px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.hero-trust div strong{
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-size: 24px;
  color: var(--lime);
}
.hero-trust div span{
  font-size: 13px;
  color: var(--gray-500);
}

.hero-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual-frame{
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-900);
  box-shadow: var(--shadow-lg);
}
.hero-visual-frame img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-visual-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(20,20,20,.55) 100%);
  pointer-events: none;
}
.hero-visual-ring{
  position: absolute;
  inset: -14px;
  border-radius: calc(var(--radius-lg) + 14px);
  border: 2px solid rgba(217,224,33,.5);
  pointer-events: none;
}

.hero-badge{
  position: absolute;
  bottom: -22px;
  left: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lime);
  color: var(--black);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-lg);
  max-width: 260px;
}
.hero-badge svg{ width: 26px; height: 26px; flex-shrink: 0; }
.hero-badge strong{ display: block; font-family: 'Unbounded', sans-serif; font-size: 15px; text-transform: none; letter-spacing: 0; }
.hero-badge span{ font-size: 12.5px; font-weight: 600; }

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.scroll-cue::after{
  content:"";
  width: 1px; height: 30px;
  background: linear-gradient(var(--lime), transparent);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue{ 0%{ opacity: 0; transform: scaleY(0); transform-origin: top; } 40%{ opacity: 1; transform: scaleY(1); transform-origin: top;} 100%{ opacity:0; transform: scaleY(1); transform-origin: bottom; } }

/* ==========================================================================
   10. Про нас / переваги (картки)
   ========================================================================== */
.about-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.value-card{
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.value-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  background: var(--white);
}
.value-icon{
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--black);
  color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transform: rotate(45deg);
  opacity: 1;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
/* до появи картки при скролі ромб прихований — щоб зіграти анімацію
   value-icon-in нижче; як тільки .in-view додається, анімація
   доганяє звичайний стан (rotate(45deg), opacity:1), і після її
   завершення :hover-переворот нижче продовжує працювати як раніше */
.value-card:not(.in-view) .value-icon{ opacity: 0; }
.value-card:hover .value-icon{
  background: var(--lime);
  color: var(--black);
  transform: rotate(225deg);
}
.value-icon svg{ width: 22px; height: 22px; transform: rotate(-45deg); }
.value-card:hover .value-icon svg{ transform: rotate(-225deg); }

/* Ромб «оживає» саме в момент, коли картка з'являється при скролі
   (а не лише при наведенні/тапі, як було раніше) — так рух явно
   прив'язаний до скролу і помітний навіть без взаємодії користувача.
   Без animation-fill-mode:forwards — після завершення анімація сама
   «відпускає» transform, і елемент повертається до звичайних правил
   вище (rotate(45deg)), тому наведення мишкою після появи картки
   продовжує працювати штатно. */
@keyframes value-icon-in{
  0%{ transform: rotate(-20deg) scale(.4); opacity: 0; }
  55%{ transform: rotate(58deg) scale(1.12); opacity: 1; }
  100%{ transform: rotate(45deg) scale(1); opacity: 1; }
}
.value-card.in-view .value-icon{
  animation: value-icon-in .6s var(--ease);
}
.value-card h3{
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}
.value-card p{ font-size: 14.5px; color: var(--gray-700); }

/* ---------- Каталог preview ---------- */
.catalog-preview{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.catalog-preview-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  color: var(--white);
  background: linear-gradient(160deg, var(--black) 0%, var(--ink) 60%);
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.catalog-preview-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.catalog-preview-card::before{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(217,224,33,.30), transparent 55%);
  z-index: -1;
}
.catalog-preview-card .cp-icon{
  position: absolute;
  top: 28px; right: 28px;
  width: 60px; height: 60px;
  opacity: .9;
}
.catalog-preview-card .cp-icon svg{ width: 100%; height: 100%; color: var(--lime); }
.catalog-preview-card h3{ font-size: 24px; color: var(--white); }
.catalog-preview-card p{
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--gray-300);
  max-width: 34ch;
}
.catalog-preview-card .btn{ margin-top: 22px; }
.catalog-preview-more{
  text-align: center;
  margin-top: 34px;
}

/* ---------- Бренди-партнери: безкінечна стрічка логотипів ---------- */
.brand-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-marquee-track{
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: brand-marquee-scroll 30s linear infinite;
}
.brand-marquee:hover .brand-marquee-track{ animation-play-state: paused; }
.brand-logo-item{
  flex-shrink: 0;
  height: 46px;
  display: flex;
  align-items: center;
  transition: transform var(--dur-fast) var(--ease);
}
.brand-logo-item:hover{ transform: translateY(-3px); }
.brand-logo-item img{
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}
.brand-logo-item .brand-chip{
  display: none;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--off-white);
  color: var(--gray-500);
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-logo-item.no-logo .brand-chip{ display: flex; }
@keyframes brand-marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .brand-marquee-track{ animation: none; }
}

/* ---------- Timeline "Як ми працюємо" ---------- */
.timeline{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}
.timeline::before{
  content:"";
  position: absolute;
  top: 27px; left: 6%; right: 6%;
  height: 2px;
  background: var(--gray-200);
}
.timeline-progress{
  position: absolute;
  top: 27px; left: 6%;
  height: 2px;
  width: 0%;
  background: var(--lime-dark);
  transition: width 1.2s var(--ease);
}
.timeline-step{ position: relative; padding-top: 76px; }
.timeline-step .num{
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--gray-500);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.timeline.in-view .timeline-step .num{
  background: var(--black);
  border-color: var(--black);
  color: var(--lime);
}
.timeline-step h3{
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.timeline-step p{ font-size: 14px; color: var(--gray-700); }

/* ==========================================================================
   11. Форма / контакти
   ========================================================================== */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-info-item{
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.contact-info-item:first-child{ padding-top: 0; }
.contact-info-item .ci-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(217,224,33,.12);
  color: var(--lime);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.contact-info-item .ci-icon svg{ width: 20px; height: 20px; }
.contact-info-item strong{ display: block; font-size: 15.5px; margin-bottom: 4px; }
.contact-info-item span, .contact-info-item a{ font-size: 14px; color: var(--gray-300); }
.contact-info-item a:hover{ color: var(--lime); }

.contact-messengers{
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.msg-btn{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.msg-btn:hover{ background: var(--lime); color: var(--black); transform: translateY(-3px); }
.msg-btn svg{ width: 20px; height: 20px; }

.form-card{
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.form-card h3{
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.form-card > p{ font-size: 14px; color: var(--gray-700); margin-bottom: 26px; }

.field{ margin-bottom: 18px; }
.field label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gray-700);
}
.field input, .field select, .field textarea{
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: var(--off-white);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--lime-dark);
  background: var(--white);
}
.field textarea{ resize: vertical; min-height: 90px; }
.field.has-error input, .field.has-error select{ border-color: #d64545; }
.field-error{ display: none; font-size: 12.5px; color: #d64545; margin-top: 6px; }
.field.has-error .field-error{ display: block; }

.form-consent{
  font-size: 12.5px;
  color: var(--gray-500);
  margin-top: 14px;
  text-align: center;
}
.form-success{
  display: none;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--lime-soft);
  color: var(--black);
  font-weight: 600;
  font-size: 14.5px;
  margin-top: 18px;
}
.form-success.is-visible{ display: flex; }
.form-success svg{ width: 22px; height: 22px; flex-shrink: 0; color: var(--lime-dark); }

.form-error{
  display: none;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: #fdeee9;
  color: #7a2a10;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 18px;
}
.form-error.is-visible{ display: flex; }
.form-error svg{ width: 22px; height: 22px; flex-shrink: 0; color: #d0521f; margin-top: 1px; }
.form-error a{ color: inherit; font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   12. Каталог: сторінка catalog.html
   ========================================================================== */
.page-hero{
  padding: calc(var(--header-h) + 46px) 0 40px;
  background: var(--off-white);
}
.breadcrumbs{
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 14px;
}
.breadcrumbs a:hover{ color: var(--black); }
.page-hero h1{ font-size: clamp(28px, 4vw, 42px); }
.page-hero p{ margin-top: 12px; color: var(--gray-700); max-width: 60ch; }

/* ---- Групи каталогу: плитки-вибір при вході в каталог (без ?category) ---- */
.catalog-groups{ padding: 46px 0 12px; }
.catalog-groups.is-hidden{ display: none; }
.catalog-groups-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.group-tile{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.group-tile:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--black);
}
.group-tile-media{
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, var(--off-white), var(--gray-100));
  overflow: hidden;
}
.group-tile-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.group-tile:hover .group-tile-media img{ transform: scale(1.06); }
.group-tile-label{
  padding: 16px 18px;
  text-align: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
  border-top: 1px solid var(--gray-200);
}
.catalog-groups-all{
  text-align: center;
  margin-top: 26px;
  font-size: 13.5px;
  font-weight: 700;
}
.catalog-groups-all a{ color: var(--gray-500); text-decoration: underline; text-underline-offset: 3px; }
.catalog-groups-all a:hover{ color: var(--black); }

/* ---- Посилання "← Усі категорії" всередині каталогу конкретної групи ---- */
.catalog-back-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray-500);
}
.catalog-back-link svg{ width: 16px; height: 16px; }
.catalog-back-link:hover{ color: var(--black); }

/* ---- Фільтр "Тип контуру" — показується лише в категорії "Котли газові" ---- */
#brand-filter-block.is-hidden-filter{ display: none; }

.catalog-layout{
  display: grid;
  grid-template-columns: 215px 1fr;
  gap: 30px;
  align-items: start;
  padding: 56px 0 100px;
}
.catalog-layout.is-hidden{ display: none; }

.cat-sidebar{
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.cat-block{ margin-bottom: 22px; }
.cat-block h4{
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-500);
  margin-bottom: 10px;
}
/* заголовок групи фільтра як кнопка-акордеон — на десктопі виглядає
   як звичайний підпис (шеврон і клік не активні візуально), на
   мобільному (нижче) перетворюється на розгортну панель у шухляді */
.cat-block-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: default;
}
.cat-block-head h4{ margin-bottom: 10px; }
.cat-block-head .chev{ display: none; }
.cat-block-panel{ display: block; }
.cat-list{ display: flex; flex-direction: column; gap: 2px; }
.cat-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gray-900);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cat-btn:hover{ background: var(--off-white); }
.cat-btn .count{
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--off-white);
  border-radius: 999px;
  padding: 2px 9px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cat-btn.is-active{ background: var(--black); color: var(--white); }
.cat-btn.is-active .count{ background: var(--lime); color: var(--black); }

.cat-check{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 14px;
  color: var(--gray-800);
  cursor: pointer;
}
.cat-check input{
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--gray-300);
  border-radius: 5px;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cat-check input::after{
  content:"";
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--black);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.cat-check input:checked{ border-color: var(--black); background: var(--lime); }
.cat-check input:checked::after{ transform: scale(1); }

.cat-reset{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cat-reset:hover{ color: var(--black); }

/* ---- Вкладена підкатегорія ("Автоматика та вентилятори" всередині
   "Твердопаливних котлів"): у сайдбарі — пункт із відступом і лінією-
   зв'язкою під батьківською категорією; у контенті — чип-перехід над
   сіткою товарів (у категорії-батьку веде вниз, у підкатегорії — назад). -- */
.cat-btn--sub{
  margin-left: 12px;
  padding-left: 11px;
  font-size: 13px;
  color: var(--gray-700);
  border-left: 2px solid var(--gray-200);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cat-btn--sub:hover{ border-left-color: var(--gray-300); }
.cat-btn--sub.is-active{ border-left-color: var(--lime); }

.subcat-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 18px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray-900);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.subcat-link:hover{ background: var(--white); border-color: var(--black); }
.subcat-link.is-hidden{ display: none; }
/* зворотний перехід ("назад у батьківську категорію") — без мініатюри,
   тому звичайні поля з обох боків */
.subcat-link--back{ padding: 8px 15px 8px 11px; }
/* мініатюра товару з підкатегорії: показує, що чип — це вхід у розділ
   із товарами, а не просто підпис */
.subcat-link-thumb{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.subcat-link-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.subcat-link-arrow{
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: var(--gray-500);
  transition: transform var(--dur-fast) var(--ease);
}
.subcat-link:hover .subcat-link-arrow{ transform: translateX(2px); }
.subcat-link--back:hover .subcat-link-arrow{ transform: translateX(-2px); }
.subcat-link-count{
  font-size: 12px;
  font-weight: 800;
  color: var(--gray-500);
  background: var(--white);
  border-radius: 999px;
  padding: 2px 9px;
}

/* мобільний тригер "Фільтр" + оверлей + шапка шухляди —
   за замовчуванням приховані, показуються лише на мобільному
   (@media max-width:860px нижче) */
.filter-tab,
.filter-overlay,
.filter-drawer-head,
.filter-apply-btn{ display: none; }

.cat-main{ min-width: 0; }

.search-row{
  position: sticky;
  top: calc(var(--header-h) + 12px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.search-box{
  flex: 1;
  position: relative;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 6px 0 16px;
  transition: border-color var(--dur-fast);
}
.search-box:focus-within{ border-color: var(--lime-dark); }
.search-box svg{ width: 17px; height: 17px; color: var(--gray-500); flex-shrink: 0; }
.search-box input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 10px;
  font-size: 14px;
}
.search-clear{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--off-white);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-clear.is-visible{ display: flex; }
.search-clear svg{ width: 13px; height: 13px; }

/* ---- Сортування каталогу (ціна зростання/спадання, назва А-Я/Я-А) ---- */
.sort-select{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--gray-200);
  padding: 0 16px 0 18px;
  transition: border-color var(--dur-fast);
}
.sort-select:focus-within{ border-color: var(--lime-dark); }
.sort-select-label{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-500);
  white-space: nowrap;
}
.sort-select select{
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
}

.results-meta{
  font-size: 13.5px;
  color: var(--gray-500);
  margin-bottom: 18px;
}
.results-meta strong{ color: var(--black); }
.results-meta.is-hidden{ display: none; }

.product-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  animation: card-in .5s var(--ease) forwards;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@keyframes card-in{ to{ opacity: 1; transform: none; } }
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--black);
}
.product-media{
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, var(--off-white), var(--gray-100));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate; /* щоб mix-blend-mode фото змішувалось лише з підкладкою рамки */
}
.product-media svg{
  width: 46%; height: 46%;
  color: var(--black);
  opacity: .85;
  transition: transform var(--dur) var(--ease);
}
.product-card:hover .product-media svg{ transform: scale(1.08) rotate(-3deg); }
/* фото товару (підвантажується напряму з сайту виробника/ритейлера) —
   поки воно є, іконку-заглушку ховаємо; якщо фото не завантажилось,
   JS видаляє <img> і додає .no-photo — іконка знову з'являється */
.product-media img.product-photo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform var(--dur) var(--ease);
  /* Правило для ВСІХ карток: підкладка рамки заливає всю рамку, а білий
     фон фото «розчиняється» в ній (multiply: білий → колір підкладки),
     тому при наведенні збільшується сам товар, а не білий прямокутник
     навколо нього. Для фото з кольоровим фоном (Vaillant/Protherm на
     бірюзовому) ефект майже непомітний, бо підкладка світла. */
  mix-blend-mode: multiply;
}
.product-card:hover .product-media img.product-photo{ transform: scale(1.08); }
.product-media:has(img.product-photo) svg{ display: none; }
.product-media.no-photo svg{ display: block; }

/* "Вирізане" фото товару без фону (PRODUCT_PHOTO_STYLE у script.js) —
   градієнт-підкладка (inline style="background:...") заливає всю рамку
   картки повністю (без сірих країв, як у звичайного object-fit:contain),
   а сам товар — окремий шар з м'якою тінню, який при наведенні
   збільшується САМ ПО СОБІ, не зачіпаючи підкладку під ним. */
.product-media.has-cutout img.product-photo{
  padding: 26px;
  filter: drop-shadow(0 16px 20px rgba(10, 30, 28, .28));
}
.product-card:hover .product-media.has-cutout img.product-photo{
  transform: scale(1.1);
}

/* "Розтягнуте" фото на всю рамку (PRODUCT_PHOTO_FILL у script.js) — для
   товарів, чиє власне фото вже є готовою карткою з текстом/іконками
   впритул до країв: object-fit: fill показує зображення повністю, без
   обрізання країв (як було б із cover) і без сірих полів (як з contain). */
.product-media.is-fill img.product-photo{
  object-fit: fill;
  padding: 0;
  mix-blend-mode: normal;
}
/* вирізане фото (has-cutout) — справжня прозорість, змішування не потрібне */
.product-media.has-cutout img.product-photo{ mix-blend-mode: normal; }
.product-brand-tag{
  position: absolute;
  top: 12px; left: 12px;
  /* без z-index бейдж мальується в DOM-порядку разом із фото товару —
     і коли фото при наведенні збільшується (особливо "вирізане" фото
     без фону, transform: scale(1.1)), воно опинялось ПОВЕРХ бейджа й
     затуляло напис. z-index піднімає бейджі в окремий шар над фото
     завжди, незалежно від масштабування. */
  z-index: 2;
  background: var(--white);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: var(--shadow-sm);
}
.product-stock{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--black);
}
.product-stock.is-order{ background: var(--gray-900); color: var(--white); }

.product-body{
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-body h3{
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.product-body .desc{ font-size: 13.5px; color: var(--gray-700); }
.product-specs{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 6px;
}
.product-specs li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gray-700);
}
.product-specs svg{ width: 14px; height: 14px; color: var(--lime-dark); flex-shrink: 0; }
.product-specs li.specs-extra[hidden]{ display: none; }

/* ---- "Показати ще N характеристик" — розгортання повного списку специфікацій ---- */
.specs-toggle{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
  transition: color var(--dur-fast) var(--ease);
}
.specs-toggle:hover{ color: var(--black); }
.specs-toggle::after{
  content: "▾";
  font-size: 9px;
  transition: transform var(--dur-fast) var(--ease);
}
.specs-toggle.is-open::after{ transform: rotate(180deg); }

/* ---- документи до товару (паспорт / інструкція) — під характеристиками ---- */
.product-docs{ display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.product-doc{
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px;
  border: 1.5px solid var(--gray-200); border-radius: 12px;
  background: var(--off-white);
  color: var(--gray-900); text-decoration: none;
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.product-doc:hover{ border-color: var(--black); background: var(--white); }
.product-doc svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--lime-dark); }
.product-doc-title{ flex: 1; min-width: 0; }
.product-doc-meta{ flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--gray-500); letter-spacing: .02em; }
.product-foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200);
}
.product-sku{ font-size: 11px; color: var(--gray-500); }
.product-price{ font-family: 'Unbounded', sans-serif; font-size: 15px; }
.product-price.is-live{ position: relative; padding-left: 13px; cursor: help; }
.product-price.is-live::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime-dark);
  transform: translateY(-50%);
}

.empty-state{
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
  color: var(--gray-500);
}
.empty-state.is-visible{ display: flex; }
.empty-state svg{ width: 56px; height: 56px; margin-bottom: 18px; color: var(--gray-300); }
.empty-state h3{
  font-family: 'Inter', sans-serif;
  text-transform: none;
  font-size: 18px;
  color: var(--black);
  margin-bottom: 8px;
}
.empty-state p{ max-width: 42ch; margin-bottom: 20px; font-size: 14px; }

.catalog-cta{
  margin-top: 90px;
  border-radius: var(--radius-lg);
  background: var(--black);
  color: var(--white);
  padding: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.catalog-cta::before{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(217,224,33,.28), transparent 55%);
  z-index: -1;
}
.catalog-cta h3{ font-size: clamp(22px, 2.6vw, 30px); max-width: 20ch; }
.catalog-cta p{ margin-top: 10px; color: var(--gray-300); max-width: 46ch; }

/* ==========================================================================
   13. Адаптивність
   ========================================================================== */
/* Проміжна ширина (ноутбук/вузьке вікно браузера, ще не мобільне меню) —
   без цього пункти навігації починали переноситись у 2 рядки ("Про" /
   "нас"), бо хедеру не вистачало горизонтального місця на весь набір:
   лого + 5 пунктів меню + телефон + кнопка. */
@media (max-width: 1180px){
  .main-nav{ gap: 20px; }
  .main-nav a.nav-catalog-link{ padding: 11px 16px; }
  .header-actions{ gap: 12px; }
}

@media (max-width: 1024px){
  .about-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .hero .container{ grid-template-columns: 1fr; gap: 36px; }
  /* на телефоні спершу заголовок, кнопки й категорії — те, заради чого сюди
     прийшли; фото магазину нижче й компактніше */
  .hero-visual{ order: 1; }
  .hero-visual-frame{ width: min(100%, 300px); }
  .catalog-layout{ grid-template-columns: 190px 1fr; gap: 22px; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .catalog-groups-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px){
  .header-phone{ display: none; }
  .header-actions{ gap: 10px; }
  .header-social{
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-social a{
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-900);
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  .header-social svg{ width: 14px; height: 14px; }
  .header-social a:hover{ background: var(--lime); border-color: var(--lime); color: var(--black); }
  .nav-toggle{ display: flex; position: relative; z-index: 520; }

  .brand-marquee-track{ gap: 44px; animation-duration: 22s; }
  .brand-logo-item, .brand-logo-item .brand-chip{ height: 36px; }
  .brand-logo-item img{ max-width: 120px; }
  .brand-logo-item .brand-chip{ padding: 0 16px; font-size: 12.5px; }

  /* Мобільне меню — на весь екран (під хедером), а не вузька плаваюча
     картка, яка раніше «виринала» посередині поверх контенту. Елемент
     лишається в DOM завжди (display:flex), видимість керується
     opacity/visibility/transform — так відкриття і закриття можна
     плавно анімувати, а не просто "клацати" display:none↔flex. */
  .main-nav{
    display: flex;
    position: fixed;
    /* явний width:100% + скидання grid-column/justify-self — без цього
       Chrome інколи продовжує рахувати ширину/позицію через колонку
       грід-хедера (звідки цей елемент "родом"), навіть коли він уже
       position:fixed і формально поза грід-розкладкою */
    grid-column: unset;
    justify-self: unset;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    width: 100%;
    height: calc(100vh - var(--header-h));
    z-index: 400;
    background: var(--black);
    flex-direction: column;
    /* justify-content:center годилось, поки в меню було лише 5 посилань —
       тепер з блоком "Контакти" вміст вищий за екран, і центрування
       виштовхувало перші пункти (Головна/Про нас) за межі видимої області
       зверху. Вирівнюємо від верху й прокручуємо решту. */
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    padding: 20px 30px 40px;
    overflow-y: auto;
    /* без цього прокрутка меню на iOS Safari, дійшовши до кінця списку,
       "перетікає" в скрол сторінки під ним (навіть коли body заблокований
       nav-lock) — це виглядає як стрибок вмісту назад нагору й зникання
       рядків під час прокрутки. contain зупиняє скрол рівно на межі меню. */
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
  }
  .site-header.nav-open .main-nav{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }

  .main-nav a{
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--white);
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color var(--dur-fast);
  }
  .main-nav a::after{ display: none; }
  /* .is-active на світлому десктопному хедері стає чорним (щоб виділятись
     на білому тлі) — але на темному повноекранному мобільному меню це
     робить пункт невидимим (чорний на чорному). Тут виділяємо активну
     сторінку лаймовим замість чорного. */
  .main-nav a.is-active{ color: var(--lime); }
  /* так само: на сторінці каталогу пілюля "Каталог" отримує is-active і
     стає чорною з лаймовим текстом (для білого хедера) — на темному
     мобільному меню це чорна пілюля на чорному тлі. Лишаємо її лаймовою. */
  .main-nav a.nav-catalog-link.is-active{ background: var(--lime); color: var(--black); }
  .site-header.nav-open .main-nav a{ opacity: 1; transform: none; }
  /* кожен пункт з'являється трохи пізніше за попередній — меню «розгортається»,
     а не виникає одразу цілком */
  .site-header.nav-open .main-nav a:nth-child(1){ transition-delay: .1s; }
  .site-header.nav-open .main-nav a:nth-child(2){ transition-delay: .16s; }
  .site-header.nav-open .main-nav a:nth-child(3){ transition-delay: .22s; }
  .site-header.nav-open .main-nav a:nth-child(4){ transition-delay: .28s; }
  .site-header.nav-open .main-nav a:nth-child(5){ transition-delay: .34s; }

  /* Каталог — головна дія в мобільному меню, тож візуально піднімаємо її
     на перше місце (order, без зміни DOM/десктопної верстки) і робимо
     помітно більшою за звичайні пункти: великий лаймовий блок з іконкою
     й тінню, а не рядок у загальному списку. Порядок анімації посилань
     лишається за DOM (nth-child), тому для цієї кнопки задаємо власну,
     майalready-миттєву затримку — вона тепер перша, що бачить людина. */
  .main-nav a.nav-catalog-link{
    order: -1;
    border-bottom: none;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 20px 24px;
    font-size: 18px;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
  }
  .main-nav a.nav-catalog-link svg{ width: 20px; height: 20px; }
  .site-header.nav-open .main-nav a.nav-catalog-link{ transition-delay: .08s; }

  /* Блок "Контакти" усередині мобільного меню — телефони, Viber/WhatsApp/
     Telegram, пошта й адреса одразу під пунктами меню, щоб не змушувати
     людину йти в самий низ сторінки за контактами. З'являється однією
     групою одразу після того, як розгорнуться пункти навігації. */
  .mobile-contacts{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.14);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  .site-header.nav-open .mobile-contacts{
    opacity: 1;
    transform: none;
    transition: opacity .4s var(--ease) .4s, transform .4s var(--ease) .4s;
  }
  .mobile-contacts-title{
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
    margin-bottom: 8px;
  }
  .mobile-contacts .mobile-contact-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: var(--white);
  }
  .mobile-contacts .mobile-contact-row:last-of-type{ border-bottom: none; }
  .mcr-icon{
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .mcr-icon svg{ width: 16px; height: 16px; }
  .mcr-text{ min-width: 0; }
  .mcr-text strong{ display: block; font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 700; }
  .mcr-text small{ display: block; font-size: 12px; font-weight: 500; color: var(--gray-500); margin-top: 1px; }
  /* Телефони й месенджери об'єднано в один рядок кожен (замість окремого
     рядка на кожен номер/месенджер) — менше висоти, менше треба гортати
     мобільне меню, щоб побачити всі контакти. */
  .mcr-phone-line{
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    line-height: 1.5;
  }
  .mcr-phone-line:hover{ color: var(--lime); }
  .mobile-contact-row--messengers{ gap: 10px; }
  .mcr-messenger-links{
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .mcr-messenger-links a{
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  .mcr-messenger-links svg{ width: 15px; height: 15px; }
  .mcr-messenger-links a:hover{ background: var(--lime); border-color: var(--lime); color: var(--black); }
  .mobile-social{
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }
  .mobile-social a{
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    opacity: 1;
    transform: none;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  .mobile-social svg{ width: 16px; height: 16px; }
  .mobile-social a:hover{ background: var(--lime); border-color: var(--lime); color: var(--black); }

  .catalog-preview{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
  .timeline{ grid-template-columns: 1fr; gap: 28px; }
  .timeline::before, .timeline-progress{ display: none; }
  .timeline-step{ padding-top: 0; padding-left: 76px; min-height: 56px; }
  .timeline-step .num{ top: 0; left: 0; }

  .catalog-layout{ grid-template-columns: 1fr; }
  /* Пошук і сортування — в один рядок: сортування зліва на всю вільну
     ширину, пошук справа згорнутий у кнопку-лупу. Натиск на лупу розгортає
     поле для вводу на всю ширину (сортування при цьому ховається). Так над
     товарами лишається одна компактна смуга, і підкатегорія з картками
     видно одразу, без прокрутки. */
  .search-row{
    position: static;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .sort-select{
    order: 1;            /* сортування — зліва */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: space-between;
    padding: 0 13px;
  }
  .sort-select select{ flex: 1; min-width: 0; padding: 8px 0; font-size: 12.5px; }
  .sort-select-label{ font-size: 11.5px; flex-shrink: 0; }

  .search-box{
    order: 2;            /* пошук — справа */
    flex: 0 0 40px;
    width: 40px;
    align-self: stretch; /* однакова висота з сортуванням */
    padding: 0;
    justify-content: center;
    cursor: pointer;
    transition: flex-basis var(--dur-fast) var(--ease);
  }
  .search-box svg{ width: 16px; height: 16px; }
  .search-box input{ width: 0; min-width: 0; flex: 0 0 0; padding: 0; }
  .search-clear{ width: 26px; height: 26px; }

  .search-row.is-search-open .sort-select{ display: none; }
  .search-row.is-search-open .search-box{
    flex: 1 1 auto;
    width: auto;
    padding: 0 5px 0 13px;
    justify-content: flex-start;
    cursor: auto;
  }
  .search-row.is-search-open .search-box input{
    width: auto;
    flex: 1;
    padding: 8px 7px;
    font-size: 13.5px;
  }

  /* ------------------------------------------------------------------ *
   * Мобільний фільтр каталогу — вертикальна вкладка-тригер зліва +
   * шухляда, що виїжджає на весь екран (за мотивами lushev.ua, у
   * нашій чорно-лаймовій палітрі)
   * ------------------------------------------------------------------ */
  .filter-tab{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    position: fixed;
    left: 0;
    top: 64%;
    transform: translateY(-50%);
    z-index: 150;
    background: var(--black);
    color: var(--lime);
    padding: 16px 9px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-lg);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .filter-tab svg{ width: 18px; height: 18px; flex-shrink: 0; }
  .filter-tab-text{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
  }
  .filter-tab:active{ transform: translateY(-50%) scale(.95); }
  body.filter-lock .filter-tab{ opacity: 0; pointer-events: none; }

  .filter-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,.5);
    opacity: 0;
    visibility: hidden;
    z-index: 590;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .filter-overlay.is-visible{
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease);
  }

  .cat-sidebar{
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    background: var(--white);
    z-index: 600;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .cat-sidebar.is-open{ transform: translateX(0); }

  .filter-drawer-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
  }
  .filter-drawer-title{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Unbounded', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
  }
  .filter-drawer-title svg{ width: 19px; height: 19px; color: var(--gray-900); }
  .filter-close{
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--off-white);
    color: var(--gray-900);
    border: none;
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .filter-close svg{ width: 15px; height: 15px; }
  .filter-close:hover{ background: var(--lime); color: var(--black); }

  .cat-sidebar .cat-block{ margin: 0; padding: 0 22px; }
  .cat-sidebar .cat-block-head{
    padding: 19px 0;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
  }
  .cat-sidebar .cat-block-head h4{
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--black);
  }
  .cat-sidebar .cat-block-head .chev{
    display: block;
    width: 17px; height: 17px;
    color: var(--gray-500);
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease), color var(--dur-fast);
  }
  .cat-sidebar .cat-block.is-open .cat-block-head .chev{
    transform: rotate(90deg);
    color: var(--black);
  }
  .cat-sidebar .cat-block-panel{
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .cat-sidebar .cat-block-panel > *{ overflow: hidden; min-height: 0; }
  .cat-sidebar .cat-block.is-open .cat-block-panel{
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .cat-sidebar .cat-list{ padding: 3px 0 18px; }
  .cat-sidebar .cat-reset{
    margin: 18px 22px 0;
    flex-shrink: 0;
  }
  .filter-apply-btn{
    display: block;
    margin: 18px 22px 22px;
    flex-shrink: 0;
  }
}

@media (max-width: 640px){
  :root{ --header-h: 72px; }
  .container{ padding: 0 20px; }
  /* Хедер на вузьких екранах (320–360px) не вміщував логотип + іконки
     соцмереж + кнопку меню в один рядок — кнопка меню "виїжджала" за
     межі екрана. Звужуємо бренд, іконки та відступи, щоб усе надійно
     вміщалось навіть на найвужчих телефонах. */
  .site-header .brand{ gap: 8px; }
  .site-header .brand img{ height: 40px; }
  .site-header .brand .logo-mark{ height: 46px; width: 46px; }
  .site-header .brand-word{ font-size: 13px; }
  .header-actions{ gap: 6px; }
  .header-social{ gap: 5px; }
  .header-social a{ width: 26px; height: 26px; }
  .header-social svg{ width: 12px; height: 12px; }
  .nav-toggle{ width: 38px; height: 38px; }
  /* Загальне ущільнення вертикальних відступів на мобільному: секції,
     заголовки блоків та hero раніше повторювали десктопні відступи —
     на вузькому екрані це виглядало розтягнуто. */
  .section{ padding: 44px 0; }
  .section--tight{ padding: 34px 0; }
  .section-head{ margin-bottom: 28px; }
  .section-head p{ margin-top: 12px; font-size: 15.5px; }
  .about-grid{ grid-template-columns: 1fr; gap: 10px; }
  /* компактні картки переваг на мобільному: іконка-ромб зліва, текст справа
     (замість іконки над текстом) — картка стає у 2.5-3 рази нижчою, і на
     екрані одразу видно кілька карток замість однієї; текст при цьому
     не скорочується. */
  .value-card{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
  }
  .value-icon{
    width: 42px; height: 42px;
    margin-bottom: 0;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .value-icon svg{ width: 19px; height: 19px; }
  /* .value-text — спільна обгортка h3+p: саме вона (а не h3 і p окремо)
     є другим flex-елементом у рядку картки. Завдяки цьому текстова
     колонка завжди починається одразу після іконки, з однаковим
     відступом в усіх картках — а не «гуляє» залежно від довжини
     заголовка, як було раніше. */
  .value-text{ flex: 1; min-width: 0; }
  .value-card h3{ font-size: 15.5px; margin-bottom: 4px; }
  .value-card p{ font-size: 13.5px; line-height: 1.45; }
  /* Компактний футер на мобільному: замість того, щоб укладати всі 4
     блоки (бренд, меню, каталог, контакти) одним довгим стовпцем на
     всю висоту екрана, розкладаємо їх у 2 колонки — вдвічі коротше. */
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 30px; }
  .footer-brand{ padding-top: 22px; }
  .footer-about{ margin-top: 10px; font-size: 13px; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .footer-social{ margin-top: 14px; }
  .footer-social a{ width: 34px; height: 34px; }
  .footer-col h4{ font-size: 12px; margin-bottom: 12px; }
  .footer-col ul li{ margin-bottom: 9px; }
  .footer-col a, .footer-col p{ font-size: 13px; }
  .footer-col p{ margin-bottom: 4px; }
  .site-footer{ padding-top: 40px; }
  .hero{ padding: calc(var(--header-h) + 26px) 0 40px; }
  .hero-sub{ margin-top: 16px; }
  .hero-cta{ margin-top: 22px; gap: 12px; }
  .hero-trust{ gap: 20px; margin-top: 28px; }
  .contact-grid{ gap: 30px; }
  .contact-messengers{ margin-top: 20px; }
  .brand-marquee-track{ gap: 32px; }
  .catalog-preview-more{ margin-top: 20px; }
  .timeline{ gap: 20px; }
  .product-grid{ grid-template-columns: 1fr; }
  .catalog-groups-grid{ grid-template-columns: 1fr; gap: 16px; }
  .catalog-cta{ padding: 34px 24px; flex-direction: column; align-items: flex-start; }
  .form-card{ padding: 26px; }
}

@media (max-width: 480px){
  .container{ padding: 0 18px; }
  .hero h1{ font-size: 30px; }
  .hero-badge{ display: none; }
  /* на вузьких екранах прибираємо кнопку-дублікат в хедері —
     той самий заклик до дії вже є в плаваючій кнопці внизу екрана */
  .header-actions .btn{ display: none; }
  /* плаваюча кнопка дзвінка стає компактною (лише іконка), щоб не перекривати контент */
  .fab{ padding: 0; width: 50px; height: 50px; justify-content: center; }
  .fab-label{ display: none; }
}

/* ---------- Toast-підказка при копіюванні email ---------- */
.copy-toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  background: var(--black);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.copy-toast svg{ width: 16px; height: 16px; stroke: var(--lime); flex-shrink: 0; }

/* ---- нижня панель «Зателефонуйте нам» (показується замість заблокованого
   tel: у вбудованому перегляді; на справжньому сайті на телефоні не потрібна) ---- */
.call-sheet{ position: fixed; inset: 0; z-index: 1200; display: none; }
.call-sheet.is-open{ display: block; }
.call-sheet-backdrop{ position: absolute; inset: 0; background: rgba(10,10,10,.55); }
.call-sheet-panel{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--white); color: var(--gray-900);
  border-radius: 22px 22px 0 0;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  animation: callSheetUp .22s var(--ease);
}
@keyframes callSheetUp{ from{ transform: translateY(24px); opacity: 0; } to{ transform: none; opacity: 1; } }
.call-sheet-head{ display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.call-sheet-close{ width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--off-white); color: var(--gray-900); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.call-sheet-close svg{ width: 16px; height: 16px; }
.call-sheet-hint{ margin: 2px 0 14px; font-size: 13px; color: var(--gray-500); }
.call-sheet-row{ display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gray-200); }
.call-sheet-num{ flex: 1; display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--black); text-decoration: none; }
.call-sheet-num svg{ width: 20px; height: 20px; color: var(--lime); flex-shrink: 0; }
.call-sheet-copy{ border: 1.5px solid var(--gray-200); background: var(--off-white); color: var(--gray-900); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.call-sheet-copy:active{ background: var(--gray-200); }
@media (min-width: 861px){
  .call-sheet-panel{ left: 50%; right: auto; bottom: 40px; width: 380px; transform: translateX(-50%); border-radius: 22px; }
}
.copy-toast.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   СТОРІНКА ОДНОГО ТОВАРУ — tovar/<артикул>.html
   ---------------------------------------------------------------------------
   Потрібна, щоб можна було скинути клієнту посилання САМЕ на цей товар
   (global-systems.com.ua/tovar/34865000), а не на весь каталог. Сторінки
   генеруються з того самого списку товарів, що й каталог (build_product_pages.py),
   тому назва/ціна/характеристики там ті самі. Ціна й наявність додатково
   звіряються з таблицями постачальників уже в браузері (initProductPage).
   ========================================================================== */
.product-page{ padding: calc(var(--header-h) + 26px) 0 70px; }   /* шапка сайту фіксована */
.product-page .breadcrumbs{ margin-bottom: 20px; }
.product-page-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.product-page-media{
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  overflow: hidden;
}
.product-page-media img{ width: 100%; height: 100%; object-fit: contain; }
.product-page-media.has-cutout{ border-color: transparent; }
.product-page-media.no-photo img{ display: none; }
.product-page-media .pp-brand{
  position: absolute; top: 16px; left: 16px;
  background: var(--white); color: var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.pp-stock{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime); color: var(--ink);
  font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px;
}
.pp-stock.is-order{ background: var(--gray-200); color: var(--gray-700); }
.product-page-info h1{
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18; font-weight: 800;
  margin: 14px 0 10px;
}
.pp-sku{ color: var(--gray-500); font-size: 14px; font-weight: 600; }
.pp-desc{ color: var(--gray-700); margin: 14px 0 20px; font-size: 16px; }
.pp-price-row{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 22px; margin-bottom: 22px;
  background: var(--off-white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.pp-price{ font-family: 'Unbounded', sans-serif; font-size: 30px; font-weight: 800; }
.pp-price.is-live::after{
  content: '';
  display: inline-block; width: 8px; height: 8px; margin-left: 10px;
  border-radius: 50%; background: var(--lime-dark); vertical-align: middle;
}
.pp-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.pp-share{ margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--gray-200); }
.pp-share-title{ font-size: 14px; font-weight: 700; color: var(--gray-700); margin-bottom: 12px; }
.pp-share-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.pp-share-btn{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid var(--gray-300); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pp-share-btn svg{ width: 18px; height: 18px; }
.pp-share-btn:hover{ border-color: var(--ink); background: var(--gray-100); }
.pp-share-btn.is-copied{ border-color: var(--lime-dark); background: var(--lime-soft); }
.product-page .product-specs{ margin: 0 0 18px; }
.product-page .product-docs{ margin-top: 4px; }
.pp-back{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; font-weight: 600; color: var(--gray-700);
}
.pp-back:hover{ color: var(--ink); }
.pp-gone{
  margin: 0 0 20px; padding: 14px 18px;
  background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  color: var(--gray-700); font-size: 15px;
}

/* кнопка "скопіювати посилання на товар" на картці в каталозі */
.card-share{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; border: 1.5px solid var(--gray-300);
  background: var(--white); color: var(--gray-700);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.card-share svg{ width: 17px; height: 17px; }
.card-share:hover{ border-color: var(--ink); color: var(--ink); }
.card-share.is-copied{ border-color: var(--lime-dark); background: var(--lime-soft); color: var(--ink); }
.product-card h3 a:hover{ text-decoration: underline; }

@media (max-width: 900px){
  .product-page-grid{ grid-template-columns: 1fr; gap: 24px; }
  .product-page{ padding: calc(var(--header-h) + 14px) 0 54px; }
  .pp-price{ font-size: 26px; }
}

/* коротке підтвердження внизу екрана (наприклад «Посилання скопійовано») */
.gs-toast{
  position: fixed; left: 50%; bottom: 26px; z-index: 900;
  transform: translate(-50%, 16px);
  background: var(--black); color: var(--white);
  padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gs-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px){
  .gs-toast{ bottom: 86px; font-size: 13px; padding: 11px 18px; }
}

/* ==========================================================================
   ОБРАНЕ + КОМЕРЦІЙНА ПРОПОЗИЦІЯ
   ========================================================================== */

/* --- сердечко на картці каталогу (поряд із «поділитися») --- */
.card-actions{ display: flex; align-items: center; gap: 8px; }
.card-fav{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; border: 1.5px solid var(--gray-300);
  background: var(--white); color: var(--gray-700);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.card-fav svg{ width: 18px; height: 18px; }
.card-fav:hover{ border-color: var(--ink); color: var(--ink); }
.card-fav.is-active{ background: var(--lime); border-color: var(--lime); color: var(--ink); }
.card-fav.is-active svg{ fill: var(--ink); }

/* --- кнопка «Обране» в шапці --- */
.fav-link{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--gray-300); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.fav-link:hover{ border-color: var(--ink); }
.fav-link svg{ width: 17px; height: 17px; }
.fav-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--lime); color: var(--ink);
  font-size: 12px; font-weight: 800;
}
.fav-count.is-empty{ background: var(--gray-200); color: var(--gray-500); }
@media (max-width: 1080px){
  .fav-link-text{ display: none; }
  .fav-link{ padding: 9px 12px; }
}

/* --- кнопка «В обране» на сторінці товару --- */
.pp-fav{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--white);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.pp-fav svg{ width: 19px; height: 19px; }
.pp-fav.is-active{ background: var(--lime); border-color: var(--lime); }
.pp-fav.is-active svg{ fill: var(--ink); }

/* --- список обраного --- */
.obrane{ padding: 34px 0 70px; }
.obrane-empty{ text-align: center; padding: 50px 20px; color: var(--gray-700); }
.obrane-empty svg{ width: 54px; height: 54px; margin: 0 auto 14px; color: var(--gray-300); }
.obrane-empty h3{ font-family: 'Unbounded', sans-serif; font-size: 20px; margin-bottom: 8px; }
.obrane-empty p{ margin-bottom: 20px; }
.obrane-list{ display: flex; flex-direction: column; gap: 12px; }
.fav-row{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 110px 92px 96px 120px 34px;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  background: var(--white);
}
.fav-row-media{ width: 72px; height: 72px; border-radius: var(--radius-sm); background: var(--gray-100); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fav-row-media img{ width: 100%; height: 100%; object-fit: contain; }
.fav-row-name{ font-weight: 700; line-height: 1.35; }
.fav-row-name:hover{ text-decoration: underline; }
.fav-row-sku{ font-size: 13px; color: var(--gray-500); margin-top: 3px; }
.fav-row-field{ display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gray-500); }
.fav-row-field b{ font-size: 15px; color: var(--ink); }
.fav-row-field input{
  width: 100%; padding: 8px 10px; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white);
}
.fav-row-field input:focus{ outline: none; border-color: var(--ink); }
.fav-row-sum b{ font-family: 'Unbounded', sans-serif; font-size: 16px; }
.fav-row-del{
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--gray-300); background: var(--white); color: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center;
}
.fav-row-del svg{ width: 15px; height: 15px; }
.fav-row-del:hover{ border-color: var(--ink); color: var(--ink); }
.obrane-total{
  display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
  padding: 18px 16px 0; font-size: 15px; color: var(--gray-700);
}
.obrane-total strong{ font-family: 'Unbounded', sans-serif; font-size: 26px; color: var(--ink); }

/* --- форма КП --- */
.kp-form{ margin-top: 28px; padding: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--off-white); }
.kp-form h3{ font-family: 'Unbounded', sans-serif; font-size: 18px; margin-bottom: 16px; }
.kp-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kp-form-grid label{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.kp-form-grid input, .kp-form-grid textarea{
  padding: 11px 14px; font-size: 15px; font-weight: 500;
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); resize: vertical;
}
.kp-form-grid input:focus, .kp-form-grid textarea:focus{ outline: none; border-color: var(--ink); }
.kp-form-wide{ grid-column: 1 / -1; }
.kp-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.kp-actions .btn{ display: inline-flex; align-items: center; gap: 9px; }
.btn-ghost{ background: transparent; border: 1.5px solid transparent; color: var(--gray-500); padding: 13px 18px; border-radius: 999px; font-weight: 600; }
.btn-ghost:hover{ color: var(--ink); }
.kp-hint{ margin-top: 14px; font-size: 13px; color: var(--gray-500); }

@media (max-width: 900px){
  /* на телефоні: фото+назва зверху, три поля рівними колонками, сума окремим рядком */
  .fav-row{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      'media main  main  main main del'
      'price price qty   qty  disc disc'
      'sum   sum   sum   sum  sum  sum';
    column-gap: 10px; row-gap: 12px;
  }
  .fav-row-media{ grid-area: media; width: 100%; max-width: 64px; height: 64px; }
  .fav-row-main{ grid-area: main; }
  .fav-row-del{ grid-area: del; }
  .fav-row-field:nth-of-type(1){ grid-area: price; }
  .fav-row-field:nth-of-type(2){ grid-area: qty; }
  .fav-row-field:nth-of-type(3){ grid-area: disc; }
  .fav-row-sum{ grid-area: sum; flex-direction: row; align-items: baseline; justify-content: space-between; border-top: 1px dashed var(--gray-200); padding-top: 10px; }
  .kp-form-grid{ grid-template-columns: 1fr; }
  .kp-actions .btn{ width: 100%; justify-content: center; }
}

/* ==========================================================================
   МАКЕТ КОМЕРЦІЙНОЇ ПРОПОЗИЦІЇ (видно лише при друку / збереженні в PDF)
   ========================================================================== */
#kp-print{ display: none; }

@media print{
  @page{ size: A4; margin: 12mm 10mm; }
  body.is-printing > *:not(#kp-print){ display: none !important; }
  body.is-printing #kp-print{ display: block; }
  body.is-printing{ background: #fff; }
  .kp-page{ break-after: page; page-break-after: always; }
  .kp-page:last-child{ break-after: auto; page-break-after: auto; }
}

#kp-print{ color: #141414; font-size: 11px; line-height: 1.45; }
.kp-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 2px solid #141414; padding-bottom: 10px; }
.kp-logo{ height: 42px; width: auto; }
.kp-company{ text-align: right; font-size: 10.5px; line-height: 1.5; }
.kp-meta{ display: flex; gap: 26px; flex-wrap: wrap; margin: 12px 0 4px; font-size: 10.5px; }
.kp-meta span{ color: #6a6a6a; }
.kp-title{ font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; margin: 14px 0 12px; }
.kp-group{ font-size: 12px; font-weight: 800; margin: 14px 0 6px; }
.kp-table{ width: 100%; border-collapse: collapse; font-size: 10.5px; }
.kp-table th{ background: #141414; color: #fff; font-weight: 700; text-align: left; padding: 6px 7px; }
.kp-table td{ border-bottom: 1px solid #dcdcdc; padding: 6px 7px; vertical-align: top; }
.kp-table td.r{ text-align: right; white-space: nowrap; }
.kp-table td.c{ text-align: center; }
.kp-desc{ display: block; color: #5a5a5a; font-size: 9.5px; margin-top: 2px; }
.kp-subtotal td{ background: #f2f2ee; font-weight: 700; text-align: right; }
.kp-total{ text-align: right; font-size: 15px; margin-top: 14px; }
.kp-total b{ font-family: 'Unbounded', sans-serif; font-size: 18px; }
.kp-note{ margin-top: 12px; padding: 8px 10px; background: #f2f2ee; border-radius: 6px; font-size: 10.5px; }
.kp-sign{ margin-top: 18px; font-size: 11px; }
.kp-small{ margin-top: 10px; font-size: 9.5px; color: #6a6a6a; }
.kp-product-head{ border-bottom: 1px solid #dcdcdc; padding-bottom: 8px; margin-bottom: 12px; }
.kp-product-head h2{ font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 800; line-height: 1.25; }
.kp-product-sku{ font-size: 10.5px; color: #6a6a6a; margin-top: 4px; }
.kp-product-body{ display: flex; gap: 18px; align-items: flex-start; }
.kp-product-photo{ width: 46%; max-width: 300px; }
.kp-product-photo img{ width: 100%; height: auto; object-fit: contain; }
.kp-product-info{ flex: 1; }
.kp-product-desc{ font-size: 11px; margin-bottom: 10px; }
.kp-specs{ list-style: none; padding: 0; margin: 0 0 12px; font-size: 10.5px; }
.kp-specs li{ padding: 3px 0 3px 12px; border-bottom: 1px dotted #dcdcdc; position: relative; }
.kp-specs li::before{ content: '•'; position: absolute; left: 0; color: #9a9a9a; }
.kp-mini{ width: 100%; border-collapse: collapse; font-size: 11px; }
.kp-mini td{ padding: 5px 0; border-bottom: 1px solid #ececec; }
.kp-mini td.r{ text-align: right; }
.kp-mini-total td{ font-weight: 800; font-size: 13px; border-bottom: none; }
.kp-foot{ margin-top: 16px; padding-top: 8px; border-top: 1px solid #dcdcdc; font-size: 9.5px; color: #6a6a6a; }

/* кнопка «Фільтр» у рядку пошуку (тільки на телефоні/планшеті).
   Бічна вкладка біля краю екрана лишається, але на деяких телефонах жест
   від лівого краю перехоплює система — тому є ще й звичайна кнопка в потоці. */
.filter-open-btn{ display: none; }
@media (max-width: 1024px){
  .filter-open-btn{
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 18px; border-radius: 999px;
    border: 1.5px solid var(--ink); background: var(--ink); color: var(--lime);
    font-size: 14px; font-weight: 700; white-space: nowrap;
    touch-action: manipulation;
  }
  .filter-open-btn svg{ width: 18px; height: 18px; }
  .filter-open-count{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800;
  }
  .filter-open-btn[aria-expanded="true"]{ opacity: .6; }
  /* вкладку відсуваємо від самого краю — інакше тап ловить системний жест */
  .filter-tab{ left: 6px !important; border-radius: var(--radius-md) !important; z-index: 560 !important; touch-action: manipulation; }

  .filter-tab.is-tab-hidden{
    opacity: 0; pointer-events: none;
    transform: translateY(-50%) translateX(-130%);
  }

}

/* ==========================================================================
   ОФОРМЛЕННЯ ЗАМОВЛЕННЯ (koshyk.html)
   ========================================================================== */
.page-hero--tight{ padding: calc(var(--header-h) + 34px) 0 26px; }

.order-form{
  margin-top: 30px; padding: 26px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white);
}
.order-form h2{
  font-family: 'Unbounded', sans-serif; font-size: 21px; font-weight: 800; margin-bottom: 18px;
}
.order-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 6px;
}
.order-grid label, .order-comment{
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--gray-700);
}
.order-grid label.req > span::after{ content: ' *'; color: var(--lime-dark); }
.order-wide{ grid-column: 1 / -1; }
.order-form input[type=text], .order-form input[type=tel], .order-form input[type=email], .order-form textarea{
  padding: 12px 14px; font-size: 15px; font-weight: 500;
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white);
}
.order-form input:focus, .order-form textarea:focus{ outline: none; border-color: var(--ink); }
.order-form input:invalid:not(:placeholder-shown){ border-color: #d46a6a; }

.order-block{
  border: none; padding: 0; margin: 22px 0 0;
}
.order-block legend{
  font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; padding: 0; margin-bottom: 12px;
}
.order-radio{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; margin-bottom: 8px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.order-radio:hover{ border-color: var(--gray-300); }
.order-radio input{ margin-top: 3px; accent-color: var(--ink); width: 18px; height: 18px; flex-shrink: 0; }
.order-radio span{ display: flex; flex-direction: column; gap: 2px; }
.order-radio b{ font-size: 15px; }
.order-radio small{ font-size: 13px; color: var(--gray-500); }
.order-radio:has(input:checked){ border-color: var(--ink); background: var(--off-white); }
.order-block .order-grid{ margin-top: 12px; }

.order-comment{ margin-top: 20px; }
.order-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.order-agree{
  display: flex; align-items: flex-start; gap: 11px;
  margin: 20px 0 22px; font-size: 14px; color: var(--gray-700);
}
.order-agree input{ margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ink); flex-shrink: 0; }
.order-agree a{ text-decoration: underline; }
.btn-lg{ padding: 16px 34px; font-size: 16px; }
.order-hint{ margin-top: 14px; font-size: 13px; color: var(--gray-500); }

.order-fail{
  margin-top: 20px; padding: 16px 18px;
  border: 1.5px solid var(--lime-dark); border-radius: var(--radius-md); background: var(--lime-soft);
  font-size: 14px;
}
.order-fail p{ margin: 6px 0 12px; }
.order-fail-actions{ display: flex; flex-wrap: wrap; gap: 10px; }

.order-done{
  margin-top: 30px; padding: 34px 28px; text-align: center;
  border: 1.5px solid var(--lime); border-radius: var(--radius-lg); background: var(--off-white);
}
.order-done svg{ width: 52px; height: 52px; margin: 0 auto 14px; color: var(--lime-dark); }
.order-done h2{ font-family: 'Unbounded', sans-serif; font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.order-done p{ margin-bottom: 10px; color: var(--gray-700); }
.order-done a[href^="tel"]{ font-weight: 700; text-decoration: underline; }
.order-done .btn{ margin-top: 12px; }

/* комерційна пропозиція — інструмент менеджера, тому згорнута */
.kp-details{ margin-top: 26px; }
.kp-details > summary{
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--gray-500);
  padding: 10px 0;
}
.kp-details > summary::-webkit-details-marker{ display: none; }
.kp-details > summary::before{
  content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease);
}
.kp-details[open] > summary::before{ transform: rotate(45deg); }
.kp-details > summary:hover{ color: var(--ink); }
.kp-details .kp-form{ margin-top: 6px; }

@media (max-width: 760px){
  .order-grid{ grid-template-columns: 1fr; }
  .order-form{ padding: 20px 16px; }
  .btn-lg{ width: 100%; }
  .order-fail-actions .btn{ flex: 1 1 140px; justify-content: center; }
}

/* прості текстові сторінки (доставка, гарантія, конфіденційність) */
.text-page{ padding: 10px 0 70px; max-width: 860px; }
.text-page h2{
  font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800;
  margin: 30px 0 12px;
}
.text-page h2:first-child{ margin-top: 6px; }
.text-page p{ margin-bottom: 14px; color: var(--gray-900); line-height: 1.65; }
.text-page a{ text-decoration: underline; }
.text-list{ margin: 0 0 16px; padding: 0; list-style: none; }
.text-list li{
  position: relative; padding: 0 0 10px 20px; line-height: 1.6; color: var(--gray-900);
}
.text-list li::before{
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime-dark);
}
.text-list--num{ counter-reset: step; }
.text-list--num li{ padding-left: 30px; }
.text-list--num li::before{
  counter-increment: step; content: counter(step);
  width: auto; height: auto; top: 0; left: 0; background: none;
  font-weight: 800; color: var(--ink);
}
.text-note{
  margin-top: 22px; padding: 14px 18px;
  background: var(--off-white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  font-size: 14px; color: var(--gray-700);
}


/* ==========================================================================
   РЕЖИМ МЕНЕДЖЕРА (кошик): непомітна кнопка-замочок → пароль → знижки і КП
   ========================================================================== */
.mgr{ margin-top: 34px; }
.mgr-toggle{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  border: 1.5px solid var(--gray-200); background: transparent; color: var(--gray-500);
  font-size: 12.5px; font-weight: 600;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mgr-toggle svg{ width: 16px; height: 16px; }
.mgr-toggle:hover{ color: var(--ink); border-color: var(--gray-300); }
.is-manager .mgr-toggle{ color: var(--ink); border-color: var(--lime); background: var(--lime-soft); }

.mgr-login{
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 16px; max-width: 460px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--off-white);
}
.mgr-login label{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-700); flex: 1 1 180px; }
.mgr-login input{
  padding: 11px 14px; font-size: 16px; letter-spacing: .12em;
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white);
}
.mgr-login input:focus{ outline: none; border-color: var(--ink); }
.mgr-error{ flex-basis: 100%; font-size: 13px; color: #b23b3b; font-weight: 600; }

.mgr-panel{
  margin-top: 14px; padding: 4px;
  border: 1.5px solid var(--lime); border-radius: var(--radius-lg);
}
.mgr-panel-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
}
.mgr-panel-head b{ display: block; font-family: 'Unbounded', sans-serif; font-size: 14px; }
.mgr-panel-head small{ display: block; font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.mgr-panel .kp-form{ margin-top: 0; border: none; border-radius: calc(var(--radius-lg) - 4px); }

/* кошик клієнта — без колонки знижки (вона є лише в режимі менеджера) */
.obrane:not(.is-manager) .fav-row{ grid-template-columns: 72px minmax(0, 1fr) 110px 100px 130px 34px; }
@media (max-width: 900px){
  .obrane:not(.is-manager) .fav-row{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      'media main  main  main main del'
      'price price price qty  qty  qty'
      'sum   sum   sum   sum  sum  sum';
  }
}

/* телефон: заголовок, текст, дві кнопки в ряд і широке фото магазину —
   усе має вміститись на перший екран */
@media (max-width: 1024px){
  .hero-cta{ flex-wrap: nowrap; gap: 10px; }
  .hero-cta .btn{ flex: 1 1 0; justify-content: center; padding: 14px 12px; font-size: 15px; white-space: nowrap; }
  .hero-visual-frame{ width: 100%; max-width: none; aspect-ratio: 16 / 10; }
  .hero-visual-frame img{ object-position: center 14%; }
  .hero-visual-ring{ display: none; }
}
@media (max-width: 600px){
  .hero{ padding: calc(var(--header-h) + 18px) 0 30px; }
  .hero .container{ gap: 22px; }
  .hero h1{ margin-top: 12px; font-size: clamp(27px, 8vw, 34px); line-height: 1.12; }
  .hero-sub{ margin-top: 12px; font-size: 15.5px; line-height: 1.5; }
  .hero-cta{ margin-top: 18px; }
  .hero-trust{ margin-top: 22px; gap: 18px; }
  .hero-trust div strong{ font-size: 20px; }
  .scroll-cue{ display: none; }
}

/* блок цифр (580 товарів / 9 брендів / 100 %) винесено з колонки тексту, щоб на
   телефоні він ішов ПІСЛЯ фото; на комп'ютері сітка ставить його назад під кнопки */
.hero .container{ grid-template-rows: 1fr auto auto 1fr; row-gap: 0; align-content: center; }
.hero-copy{ grid-column: 1; grid-row: 2; align-self: end; }
.hero-trust{ grid-column: 1; grid-row: 3; align-self: start; margin-top: 36px; }
.hero-visual{ grid-column: 2; grid-row: 1 / span 4; }
@media (max-width: 1024px){
  .hero .container{ grid-template-rows: none; row-gap: 22px; }
  .hero-copy, .hero-trust, .hero-visual{ grid-column: 1; grid-row: auto; align-self: auto; }
  .hero-copy{ order: 0; }
  .hero-visual{ order: 1; }
  .hero-trust{ order: 2; margin-top: 0; }
}

/* Чіпи категорій у hero: показуємо на комп'ютері, ховаємо на телефоні */
.hero-cats{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
.hero-cats a{
  display: inline-flex; align-items: center;
  padding: 7px 12px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.22); color: var(--gray-300);
  font-size: 12.5px; font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hero-cats a:hover{ border-color: var(--lime); color: var(--lime); background: rgba(217,224,33,.08); }
@media (max-width: 1024px){ .hero-cats{ display: none; } }