@charset "UTF-8";
/* Стилі плагіна syrocarpaty-hero-knopky. Винесено з блоку <style id="syro-hero-knopky"> 11.10.2026 без змін у правилах. */
.syro-hk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1100px;margin:70px auto 0}
/* Темна тема (і типова розмітка) — помаранчеві картки кольору кнопок сайту;
   іконки, риска й стрілка темні, бо помаранчеве на помаранчевому зникає. */
.syro-hk__item{display:flex;align-items:center;min-height:92px;padding:0 26px;border-radius:20px;background:#f1a416;color:#252534;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s,background-color .2s,box-shadow .2s}
.syro-hk__item:hover{background:#f7b83f;color:#252534;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.34)}
.syro-hk__item:focus-visible{outline:3px solid #fff;outline-offset:3px}
.syro-hk__icon{display:flex;flex:0 0 44px;color:#252534}
.syro-hk__icon svg{width:44px;height:44px}
.syro-hk__sep{align-self:stretch;flex:0 0 1px;margin:20px 22px;background:#252534;opacity:.35}
.syro-hk__label{flex:1 1 auto;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.syro-hk__arrow{display:flex;flex:0 0 30px;margin-left:12px;color:#252534;transition:transform .2s}
/* Світла тема — молочні картки з помаранчевими іконками, як на макеті. */
html[data-syro-theme="light"] .syro-hk__item{background:#f7ecda}
html[data-syro-theme="light"] .syro-hk__item:hover{background:#fff4e2}
html[data-syro-theme="light"] .syro-hk__item:focus-visible{outline-color:#f1a416}
html[data-syro-theme="light"] .syro-hk__icon,
html[data-syro-theme="light"] .syro-hk__arrow{color:#d98a0b}
html[data-syro-theme="light"] .syro-hk__sep{background:#d98a0b;opacity:.55}
.syro-hk__arrow svg{width:30px;height:30px}
.syro-hk__item:hover .syro-hk__arrow{transform:translateX(4px)}
@media only screen and (max-width:1199px){
  .syro-hk{margin-top:50px;gap:16px}
  .syro-hk__item{padding:0 18px}
  .syro-hk__sep{margin:20px 16px}
  .syro-hk__label{font-size:16px}
}
@media only screen and (max-width:1023px){
  .syro-hk{grid-template-columns:1fr;gap:14px;max-width:520px;margin-top:40px}
  .syro-hk__item{min-height:80px;padding:0 22px}
  .syro-hk__icon{flex-basis:40px}
  .syro-hk__icon svg{width:40px;height:40px}
  .syro-hk__label{font-size:18px}
}
/* ТЕЛЕФОН — УСЕ НА 25% МЕНШЕ (14.09): «кнопки надто великі». Три картки по
   80 px із відступами займали пів екрана під заголовком. Зменшено висоту,
   іконки, текст, стрілку й проміжки рівно на чверть; ширину лишено на всю
   колонку — вужча картка з текстом ліворуч виглядає зсунутою. Планшет
   (768–1023 px) не чіпали: скарга була на телефон. */
@media only screen and (max-width:767px){
  .syro-hk{gap:10.5px;margin-top:30px}
  .syro-hk__item{min-height:60px;padding:0 16.5px;border-radius:15px}
  .syro-hk__icon{flex-basis:30px}
  .syro-hk__icon svg{width:30px;height:30px}
  .syro-hk__sep{margin:15px 12px}
  .syro-hk__label{font-size:13.5px}
  .syro-hk__arrow{flex-basis:22.5px;margin-left:9px}
  .syro-hk__arrow svg{width:22.5px;height:22.5px}
}
@media (prefers-reduced-motion:reduce){
  .syro-hk__item,.syro-hk__arrow{transition:none}
  .syro-hk__item:hover,.syro-hk__item:hover .syro-hk__arrow{transform:none}
}

/* ФОТО ПЕРШОГО ЕКРАНА — «щоб не обрізало» (10.09).
   start-bg.webp вертикальне, 851×1280, а тема кладе його cover у блок висотою
   ~500 px: на широкому екрані видно лише смугу посередині. Горизонтальної
   версії фото немає. Тому з 768 px блок — на 75% висоти екрана (спершу було
   100%, «забагато місця» — зауваження 10.09), кадр на 35%: так верхній клин,
   інжир і головка сиру лишаються в кадрі (порівняно 25/30/35% на 1440×900 —
   на 25–30% клин зрізано або сир ховається під картками). На телефоні блок і
   так вищий за пропорцію фото — фото видно майже цілим; обрізав його там верх
   суцільної шапки світлої теми. */
/* Заголовок і картки — посередині блоку по вертикалі (10.09). Тема ставить
   відступи 160/100 (125/60 до 1199 px), і вміст притискався догори, лишаючи
   під картками порожнє фото. Центруємо флексом при рівних відступах 100 px:
   верхній і далі перекриває фіксовану шапку (94 px), а центр рахується від
   усього фото, разом із ділянкою під прозорою шапкою. На телефоні вільної
   висоти немає — блок тримає сам вміст, тому там без змін. */
/* КАРТКИ ВНИЗ БЛОКУ, ЗАГОЛОВОК ЗВЕРХУ (29.09, зауваження маркетолога:
   «опустити вниз, щоб було видно сири»). Центрування 10.09 клало картки
   якраз на коробку з сирами посередині фото. Тепер контейнер тягнеться на
   всю висоту блоку, а картки притиснуті до низу (margin-top:auto) — середина
   фото вільна. Верх 150 px — заголовок під шапкою (94 px), а не впритул
   до неї. row-gap тримає мінімальну відстань, коли висоти замало. */
@media only screen and (min-width:768px){
  section.first.bg{min-height:75vh;background-position:center 35%;display:flex;flex-direction:column;padding-top:150px;padding-bottom:40px;box-sizing:border-box}
}
section.first.bg>.container{flex:1 0 auto;display:flex;flex-direction:column;row-gap:30px}
section.first.bg .syro-hk{margin-top:auto}
/* Телефон: блок раніше тримав сам вміст, і картки лягали просто на сир.
   Даємо блоку висоту екрана без верхньої смуги (36 px), щоб між заголовком
   і картками було видно фото. svh — щоб панель браузера не зсувала картки
   під край; vh — запасний для старих браузерів. */
@media only screen and (max-width:767px){
  section.first.bg{display:flex;flex-direction:column;min-height:calc(100vh - 36px);min-height:calc(100svh - 36px);padding-bottom:24px;box-sizing:border-box}
}
/* ЗАГОЛОВОК ПОСЕРЕДИНІ (30.09, зауваження: «текст на середину, багато
   вільного місця» — спершу про телефон, того ж дня й про ПК). Заголовок
   стояв під шапкою, а вся порожнеча збиралась між ним і картками.
   margin-top:auto і в заголовка, і в карток ділить вільну висоту навпіл —
   заголовок стає посередині між шапкою і картками на всіх ширинах. */
section.first.bg .first__title{margin-top:auto}
/* СИМЕТРІЯ (30.09, огляд прода після 1.4.0): під заголовком було на 34–55 px
   більше місця, ніж над ним. Дві причини:
   1) порожній підзаголовок теми <h2 class="first__description"><b></b></h2>
      (поле ACF first-description порожнє) — невидимий, але з відступом 20–30
      і ще одним row-gap 30. Ховаємо, лише поки він порожній;
   2) верхній відступ блоку (150/125) не повʼязаний із висотою фіксованої
      шапки (94 з 1200 px, 100 нижче). Ставимо «шапка + row-gap»: тоді над
      заголовком і під ним лишається однаковий мінімум, а auto ділить решту
      навпіл — заголовок рівно посередині між шапкою і картками.
   Смужка акції «Разом до вершини» (syrocarpaty-vershyna) стає над шапкою і
   зсуває її вниз на 36/38 px — на цей час додаємо її висоту. */
section.first.bg .first__description:has(> b:empty){display:none}
@media only screen and (min-width:1200px){
  section.first.bg{padding-top:124px}
  body.syro-vershyna-smuzhka-on section.first.bg{padding-top:162px}
}
@media only screen and (min-width:768px) and (max-width:1199px){
  section.first.bg{padding-top:130px}
  body.syro-vershyna-smuzhka-on section.first.bg{padding-top:168px}
}
@media only screen and (max-width:767px){
  section.first.bg{padding-top:130px}
  body.syro-vershyna-smuzhka-on section.first.bg{padding-top:166px}
}

/* СВІТЛА ТЕМА: ШАПКА НА ГОЛОВНІЙ ПРОЗОРА (10.09).
   Лише до прокрутки: тема сама додає .header_scroll з першого пікселя, і тоді
   працює суцільна шапка svitla-tema; відкрите мобільне меню (.header_open) —
   теж суцільне. Над фото темний текст світлої теми не читається, тому білим
   фарбуються ТОЧКОВО: верхній рівень меню, телефон, кнопка пошуку, перемикач
   теми. Не вся шапка — у пункті меню живе випадна панель пошуку з полем і
   результатами, їх білим не можна. Кошик, бургер і логотип лишаються. */
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open){background-color:transparent;box-shadow:none}
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .header__menu > ul > li > a,
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .header__phone a,
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .header__more > a:not(.header__busket):not(.btn),
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .syro-hs__toggle,
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .syro-st__btn{color:#fff}
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .header__menu > ul > li > a:hover,
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .header__phone a:hover{color:#f1a416}
html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .btn_orange_border{color:#f1a416;border-color:#f1a416}

/* ОФФЕР ПЕРШОГО ЕКРАНА (1.5.0, 14.10 — правки після тренінгу; 15.10 —
   перебудовано за референсом керівництва).
   Зверху вниз: заголовок → підзаголовок одним рядком → головна кнопка →
   рядок довіри дрібним шрифтом → три картки з цифрами (або картки вибору,
   опція syro_hero_nyz). Усе ліворуч, як у референсі. Зауваження 15.10:
   жовтий заголовок лежав на мішковині й сирах і зливався, сир — «головний
   герой» — ховався під кнопками; «пігулки» різної ширини читались як три
   окремі кнопки; кнопка була на межі першого екрана. */
/* width:100% — у флекс-колонці секції контейнер з margin:auto стискався до
   ширини вмісту і ставав посередині, а текст має стояти від лівого краю. */
section.first.bg>.container{row-gap:0;width:100%;box-sizing:border-box}
section.first.bg .first__title{margin-top:0;justify-content:flex-start;text-align:left;font-weight:700}
/* Колір і тінь — з тону тла (syro_hero_tlo). Селектор з [data-syro-theme]:
   світла тема (svitla-tema) сама фарбує заголовок і дає тінь 60 %, і на
   вершковому тлі він лишався помаранчевим у розмитій тіні. */
section.first.bg .first__title,
html[data-syro-theme] section.first.bg .first__title{color:var(--syro-hk-zag,#f1a416);text-shadow:0 2px 12px var(--syro-hk-ten,rgba(0,0,0,.45))}
html[data-syro-theme] section.first.bg .first__description{text-shadow:0 2px 10px var(--syro-hk-ten,rgba(0,0,0,.5))}
section.first.bg .first__title p{margin:0}
section.first.bg .first__description{margin:12px 0 0;max-width:none;color:var(--syro-hk-tekst,#fff);font-size:20px;line-height:1.35;text-align:left;text-shadow:0 2px 10px var(--syro-hk-ten,rgba(0,0,0,.5))}
section.first.bg .first__description b{font-weight:600}

/* Головна кнопка — помаранчева в обох темах: це єдина дія першого екрана.
   Клас syro-hk__item лишено заради події кліку (syro_hero_click, позиція 0). */
.syro-hk-cta.syro-hk__item,
html[data-syro-theme="light"] .syro-hk-cta.syro-hk__item{align-self:flex-start;justify-content:center;min-height:60px;padding:0 32px 0 40px;margin-top:32px;border-radius:999px;background:#f1a416;color:#2b1808;box-shadow:0 10px 28px rgba(241,164,22,.35)}
.syro-hk-cta.syro-hk__item:hover,
html[data-syro-theme="light"] .syro-hk-cta.syro-hk__item:hover{background:#f7b83f;color:#2b1808}
.syro-hk-cta .syro-hk__label{flex:0 1 auto;font-size:18px;font-weight:700}
.syro-hk-cta .syro-hk__arrow,
html[data-syro-theme="light"] .syro-hk-cta .syro-hk__arrow{color:#2b1808;flex-basis:26px}
.syro-hk-cta .syro-hk__arrow svg{width:26px;height:26px}

/* Рядок довіри: іконка + 2–3 слова, тонкі розділювачі, без тла. */
.syro-hk-dov{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin:20px 0 0;padding:0;list-style:none}
.syro-hk-dov__item{display:flex;align-items:center;gap:8px;margin:0;padding:0 16px;color:var(--syro-hk-tekst,#fff);font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;text-shadow:0 1px 6px var(--syro-hk-ten,rgba(0,0,0,.6))}
.syro-hk-dov__item:first-child{padding-left:0}
.syro-hk-dov__item+.syro-hk-dov__item{border-left:1px solid var(--syro-hk-ryad,rgba(255,255,255,.4))}
.syro-hk-dov__item::before{display:none!important}
.syro-hk-dov__icon{display:flex;flex:0 0 auto;color:#f1a416}
.syro-hk-dov__icon svg{width:24px;height:24px}
.syro-hk-dov__short{display:none}

/* Картки з цифрами — однакової ширини, молочні в обох темах (референс). */
.syro-hk-fakty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none}
.syro-hk-fakty__item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;margin:0;padding:14px 8px 12px;border-radius:14px;background:#f7efe2;color:#4a3826;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.syro-hk-fakty__item::before{display:none!important}
.syro-hk-fakty__icon{display:flex;margin-bottom:4px;color:#e0900c}
.syro-hk-fakty__icon svg{width:30px;height:30px}
.syro-hk-fakty__chyslo{font-size:24px;font-weight:800;line-height:1.1;color:#2b1808}
.syro-hk-fakty__tekst{font-size:13px;line-height:1.25}

/* Картки вибору (варіант kartky) — той самий ряд, на чверть менші за кнопку.
   У темній темі «скляні», щоб головна кнопка не губилась серед помаранчевих. */
section.first.bg .syro-hk{max-width:none;gap:12px;margin:24px 0 0}
html:not([data-syro-theme="light"]) section.first.bg .syro-hk .syro-hk__item{background:rgba(20,14,8,.55);color:#fff;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:not([data-syro-theme="light"]) section.first.bg .syro-hk .syro-hk__item:hover{background:rgba(20,14,8,.72);color:#fff}
html:not([data-syro-theme="light"]) section.first.bg .syro-hk .syro-hk__icon,
html:not([data-syro-theme="light"]) section.first.bg .syro-hk .syro-hk__arrow{color:#f1a416}
html:not([data-syro-theme="light"]) section.first.bg .syro-hk .syro-hk__sep{background:#f1a416;opacity:.5}
section.first.bg .syro-hk .syro-hk__item{min-height:64px;padding:0 16px;border-radius:14px}
section.first.bg .syro-hk .syro-hk__icon{flex-basis:30px}
section.first.bg .syro-hk .syro-hk__icon svg{width:30px;height:30px}
section.first.bg .syro-hk .syro-hk__sep{margin:16px 12px}
section.first.bg .syro-hk .syro-hk__label{font-size:14px}
section.first.bg .syro-hk .syro-hk__arrow{flex-basis:20px}
section.first.bg .syro-hk .syro-hk__arrow svg{width:20px;height:20px}

/* ФОТО НЕ ПІД ТЕКСТОМ (15.10: «текст не має перекривати сири», «щоб на
   компі й телефоні виглядало органічно»). Фон теми під текстом знято на
   всіх ширинах; блок — теплий темний, у тон дерева й крафт-коробки на
   кадрах. Фото вростає в нього розмитими краями, а не стоїть вклеєним
   прямокутником. Картинка й точка кадру — змінні з <head>
   (--syro-hk-foto, --syro-hk-fokus), тож будь-яке фото з поля first-bg —
   вертикальне чи горизонтальне — ляже сиром у видиму частину. */
section.first.bg{background-image:none!important;background-color:var(--syro-hk-tlo,#1b140d)}
/* Світле тло (тон «vershky»): прозора шапка над банером з білими пунктами
   на вершковому не видна — темнимо її в обох темах; картки з цифрами білі з
   тонкою рамкою, бо молочні зливались би з тлом; тіні м'якші. */
body.syro-hk-tlo-svitle .header:not(.header_scroll):not(.header_open) .header__menu > ul > li > a,
body.syro-hk-tlo-svitle .header:not(.header_scroll):not(.header_open) .header__phone a,
body.syro-hk-tlo-svitle .header:not(.header_scroll):not(.header_open) .header__more > a:not(.header__busket):not(.btn),
body.syro-hk-tlo-svitle .header:not(.header_scroll):not(.header_open) .syro-hs__toggle,
body.syro-hk-tlo-svitle .header:not(.header_scroll):not(.header_open) .syro-st__btn,
html[data-syro-theme="light"] body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .header__menu > ul > li > a,
html[data-syro-theme="light"] body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .header__phone a,
html[data-syro-theme="light"] body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .header__more > a:not(.header__busket):not(.btn),
html[data-syro-theme="light"] body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .syro-hs__toggle,
html[data-syro-theme="light"] body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .syro-st__btn{color:#3d2b1a}
/* Поле пошуку в шапці (header-search) над банером біле — на вершковому тлі
   його не видно; тут — темне, як пункти меню. */
html body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .syro-hs--u-shapci .syro-hs__form{color:#3d2b1a}
html body.syro-hk-tlo-svitle.home .header:not(.header_scroll):not(.header_open) .syro-hs--u-shapci .syro-hs__form:not(:focus-within) .syro-hs__field::placeholder{color:rgba(61,43,26,.7)!important}
body.syro-hk-tlo-svitle .syro-hk-fakty__item{background:#fffaf3;border:1px solid rgba(154,82,12,.18);box-shadow:0 6px 18px rgba(90,55,20,.12)}
body.syro-hk-tlo-svitle .syro-hk-cta.syro-hk__item{box-shadow:0 8px 20px rgba(200,120,10,.25)}
section.first.bg::before,
html[data-syro-theme] section.first.bg::before{display:none}
.syro-hk-foto{display:none}

/* Компʼютер: фото правою половиною, край ліворуч і верх розчиняються в тло
   (верх — ще й під білі пункти прозорої шапки). */
@media only screen and (min-width:1024px){
  section.first.bg::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56%;z-index:1;background:var(--syro-hk-foto) var(--syro-hk-fokus)/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%),linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 24%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%),linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 24%);mask-composite:intersect}
  section.first.bg .first__title,
  section.first.bg .first__description,
  section.first.bg .syro-hk-fakty,
  section.first.bg .syro-hk{max-width:560px}
  /* Група посередині по висоті: auto зверху і знизу ділять вільне місце. */
  section.first.bg .first__title{margin-top:auto}
  section.first.bg .syro-hk-fakty,
  section.first.bg .syro-hk{margin-bottom:auto}
  section.first.bg .syro-hk{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media only screen and (min-width:1200px){
  section.first.bg .first__title{font-size:52px;line-height:1.12}
}
@media only screen and (min-width:1024px) and (max-width:1199px){
  section.first.bg .first__title{font-size:44px;line-height:1.12}
  section.first.bg .first__title,
  section.first.bg .first__description,
  section.first.bg .syro-hk-fakty,
  section.first.bg .syro-hk{max-width:460px}
}

/* Телефон і планшет: фото — смугою між підзаголовком і кнопкою, на всю
   ширину екрана (calc(50% - 50vw) — за межі колонки 375 px), забирає всю
   вільну висоту. Верх і низ смуги розчиняються в тло — під текст і під
   кнопку сир не заходить. */
@media only screen and (max-width:1023px){
  .syro-hk-foto{display:block;flex:1 1 auto;min-height:190px;margin:4px calc(50% - 50vw) 0;background:var(--syro-hk-foto) var(--syro-hk-fokus)/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent 100%)}
  section.first.bg .syro-hk-cta.syro-hk__item,
  html[data-syro-theme="light"] section.first.bg .syro-hk-cta.syro-hk__item{align-self:stretch;margin-top:0}
}

/* Плашка акції стоїть одразу під банером (syrocarpaty-vershyna 0.4.0) — разом
   вони мають влізти в перший екран, тому банер коротший на її висоту. */
@media only screen and (min-width:768px){
  body.syro-vershyna-plashka-on section.first.bg{min-height:calc(88vh - 78px)}
}
@media only screen and (max-width:767px){
  body.syro-vershyna-plashka-on section.first.bg{min-height:calc(100vh - 104px);min-height:calc(100svh - 104px);padding-top:100px;padding-bottom:14px}
  section.first.bg .first__title{font-size:34px;line-height:1.12}
  /* Підзаголовок — в один рядок (ТЗ 15.10): на 360 px шрифт трохи менший. */
  section.first.bg .first__description{margin-top:10px;font-size:min(17px,4.3vw);line-height:1.3;white-space:nowrap}
  .syro-hk-cta.syro-hk__item,
  html[data-syro-theme="light"] .syro-hk-cta.syro-hk__item{min-height:56px;padding:0 24px}
  .syro-hk-cta .syro-hk__label{font-size:17px}
  /* «Доставка по Україні» довша за «Нова пошта» — на вузькому екрані
     підпис переноситься у два рядки, а не вилазить за край. */
  .syro-hk-dov{flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-top:14px}
  .syro-hk-dov__item{flex:0 1 auto;gap:5px;padding:0 6px;font-size:min(12.5px,3.2vw);white-space:normal}
  .syro-hk-dov__item:last-child{padding-right:0}
  .syro-hk-dov__icon svg{width:17px;height:17px}
  .syro-hk-fakty{gap:8px;margin-top:14px}
  .syro-hk-fakty__item{padding:10px 4px 9px;border-radius:12px}
  .syro-hk-fakty__icon{margin-bottom:2px}
  .syro-hk-fakty__icon svg{width:24px;height:24px}
  .syro-hk-fakty__chyslo{font-size:19px}
  .syro-hk-fakty__tekst{font-size:11px}
  /* Картки вибору на телефоні — плитками в один ряд. */
  section.first.bg .syro-hk{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
  section.first.bg .syro-hk .syro-hk__item{flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:12px;text-align:center}
  section.first.bg .syro-hk .syro-hk__sep,
  section.first.bg .syro-hk .syro-hk__arrow{display:none}
  section.first.bg .syro-hk .syro-hk__icon{flex-basis:auto}
  section.first.bg .syro-hk .syro-hk__icon svg{width:24px;height:24px}
  section.first.bg .syro-hk .syro-hk__label{flex:0 0 auto;font-size:11px;letter-spacing:.02em}
}

/* ВАРІАНТ «МІНІМУМ» (syro_hero_nyz=minimum, 15.10 вечір: «забагато
   візуального шуму»). Під підзаголовком — лише три кнопки категорій наборів,
   однакові, бо жодна категорія не головна. На телефоні стовпчиком під фото,
   на компʼютері в ряд. Ширше фото на компʼютері — нові кадри горизонтальні,
   з горами, і в половині екрана дошку обрізало з боків. */
.syro-hk-min{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.syro-hk-min .syro-hk-min__item,
html[data-syro-theme="light"] .syro-hk-min .syro-hk-min__item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:0 20px 0 24px;border-radius:999px;background:#f1a416;color:#2b1808;text-decoration:none;box-shadow:0 8px 22px rgba(160,95,10,.22);transition:background-color .2s,transform .2s}
.syro-hk-min .syro-hk-min__item:hover,
html[data-syro-theme="light"] .syro-hk-min .syro-hk-min__item:hover{background:#f7b83f;color:#2b1808;transform:translateY(-2px)}
.syro-hk-min .syro-hk__label{flex:0 1 auto;font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:none;white-space:nowrap}
.syro-hk-min .syro-hk__arrow,
html[data-syro-theme="light"] .syro-hk-min .syro-hk__arrow{flex:0 0 20px;margin:0;color:#2b1808}
.syro-hk-min .syro-hk__arrow svg{width:20px;height:20px}
@media only screen and (min-width:1024px){
  body.syro-hk-min-on section.first.bg::after{width:62%}
  body.syro-hk-min-on section.first.bg .first__title,
  body.syro-hk-min-on section.first.bg .first__description{max-width:520px}
  /* Три в один ряд: на 16 px з полями 24 вони не влазили (676 px) і третя
     падала другим рядом. */
  section.first.bg .syro-hk-min{max-width:640px;flex-wrap:nowrap;gap:10px;margin-bottom:auto}
  .syro-hk-min .syro-hk-min__item,
  html[data-syro-theme="light"] .syro-hk-min .syro-hk-min__item{padding:0 16px 0 20px}
  .syro-hk-min .syro-hk__label{font-size:15px}
}
@media only screen and (min-width:1024px) and (max-width:1199px){
  body.syro-hk-min-on section.first.bg .first__title,
  body.syro-hk-min-on section.first.bg .first__description{max-width:420px}
  section.first.bg .syro-hk-min{max-width:none}
  .syro-hk-min .syro-hk__label{font-size:14px}
}
@media only screen and (max-width:1023px){
  .syro-hk-min{flex-direction:column;gap:10px;margin-top:0}
  .syro-hk-min .syro-hk-min__item,
  html[data-syro-theme="light"] .syro-hk-min .syro-hk-min__item{min-height:50px}
}

/* ВАРІАНТ «КАТЕГОРІЇ» (syro_hero_nyz=kategorii, рішення керівництва 15.10):
   кнопки категорій + рядок довіри + картки з цифрами. На компʼютері група
   центрується по висоті цілою — «auto» знизу в картках, а не в кнопках
   (інакше між кнопками й рядком довіри зяяла діра). На телефоні три кнопки
   стовпчиком забирали 170 px, і фото стискалось до 200 px, а на 360×740
   плашка акції йшла за край — тому тут вони в один ряд, без стрілок. */
@media only screen and (min-width:1024px){
  body.syro-hk-kat section.first.bg .syro-hk-min{margin-bottom:0}
}
@media only screen and (max-width:1023px){
  body.syro-hk-kat .syro-hk-min{flex-direction:row;align-self:stretch;gap:8px}
  body.syro-hk-kat .syro-hk-min .syro-hk-min__item,
  html[data-syro-theme="light"] body.syro-hk-kat .syro-hk-min .syro-hk-min__item{flex:1 1 auto;justify-content:center;min-width:0;min-height:48px;padding:0 10px}
  body.syro-hk-kat .syro-hk-min .syro-hk__label{font-size:min(14px,3.3vw);letter-spacing:0}
  body.syro-hk-kat .syro-hk-min .syro-hk__arrow{display:none}
}