/* ==========================================================================
   BYSAKURA — стили сайта
   Макет: Figma «BySakura design AI», фрейм Main (редакция от 19.09.2026)
   Базовая ширина макета 1512px, контентная колонка 1190px (161…1351)
   ========================================================================== */

:root{
  --pink:#EC2E92;
  --pink-light:#F59BB4;
  --coral:#F16277;
  --green:#5EA763;
  --green-light:#90B855;
  --dark:#110404;
  --black:#000;
  --ink:#231F20;
  --grey:#8A8A8B;
  --grey-line:#6D6E70;
  --yellow:#FAB62C;
  --container:1190px;
  --header-h:80px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:140px;overflow-x:hidden}

body{
  margin:0;
  font-family:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:22px;
  color:var(--dark);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.container{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0;
}
@media (max-width:1238px){
  .container{padding:0 24px}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------- Типографика */

.h-section{
  margin:0;
  font-weight:700;
  font-size:80px;
  line-height:80px;
  text-transform:uppercase;
  color:var(--dark);
}

.h-40{
  margin:0;
  font-weight:500;
  font-size:40px;
  line-height:40px;
  text-transform:uppercase;
  color:var(--dark);
}

.lead-pink{
  margin:0;
  font-weight:500;
  font-size:20px;
  line-height:24px;
  text-transform:uppercase;
  color:var(--pink);
}

.body-text{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:var(--black);
}
.body-text p{margin:0 0 22px}
.body-text p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ Кнопки */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  height:45px;
  padding:0 20px;
  border:0;
  border-radius:40px;
  background:var(--pink);
  color:#fff;
  font-weight:500;
  font-size:14px;
  line-height:1;
  text-transform:uppercase;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:#d41f7f}
.btn:active{transform:translateY(1px)}

.btn--wide{min-width:160px;height:44px}
/* второстепенная кнопка: контур вместо заливки (страница 404) */
.btn--ghost{background:transparent;color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.btn--ghost:hover{background:var(--pink);color:#fff}

.socials{display:flex;gap:5px}
.socials a{
  width:40px;height:40px;display:block;
  transition:transform .2s ease;
}
.socials a:hover{transform:translateY(-2px)}

/* ------------------------------------------------------------------- Шапка */

.header{
  position:fixed;
  top:40px;
  left:0;
  right:0;
  z-index:60;
  padding:0 40px;
  transition:top .25s ease;
}
.header__bar{
  position:relative;
  max-width:1432px;
  margin:0 auto;
  height:var(--header-h);
  padding:0 40px;
  display:flex;
  align-items:center;
  border-radius:50px;
  background:rgba(255,255,255,.71);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.header__logo{width:162px;flex:0 0 auto}
.header__logo img{width:162px;height:41px}

.header__nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:20px;
}
.header__nav a{
  font-weight:500;
  font-size:14px;
  line-height:14px;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  transition:color .2s ease;
}
.header__nav a:hover{color:var(--pink)}

.header__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
}

.burger{
  width:37px;height:25px;
  padding:0;border:0;background:none;
  display:flex;flex-direction:column;justify-content:space-between;
}
.burger span{
  display:block;height:4px;width:100%;
  background:var(--dark);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}

/* ------------------------------------------------------------ Меню-оверлей */

.menu{
  position:fixed;
  inset:0;
  z-index:80;
  visibility:hidden;
  pointer-events:none;
}
.menu.is-open{visibility:visible;pointer-events:auto}

.menu__backdrop{
  position:absolute;inset:0;
  background:rgba(17,4,4,.35);
  opacity:0;
  transition:opacity .3s ease;
}
.menu.is-open .menu__backdrop{opacity:1}

.menu__panel{
  position:absolute;
  top:0;right:0;
  width:min(645px,100%);
  height:100%;
  background:#fff;
  padding:120px 0 0 161px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.menu.is-open .menu__panel{transform:none}

.menu__close{
  position:absolute;
  top:46px;right:40px;
  width:40px;height:40px;
  border:0;background:none;color:var(--pink);
  font-size:34px;line-height:1;
}

.menu__logo{width:266px;margin-bottom:60px}

.menu__list{list-style:none;margin:0 0 56px;padding:0}
.menu__list a{
  display:inline-block;
  padding:5px 0;
  font-weight:500;
  font-size:24px;
  line-height:29px;
  text-transform:uppercase;
  color:var(--black);
  transition:color .2s ease;
}
.menu__list a:hover{color:var(--pink)}

.menu__actions{display:flex;align-items:center;gap:12px;padding-bottom:60px}

/* --------------------------------------------------------------- Параллакс */

[data-speed]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  [data-speed]{transform:none !important}
}

/* -------------------------------------------------------------------- Hero */

.hero{
  position:relative;
  min-height:976px;
}
.hero .container{padding-top:316px}

/* H1 = «Натуральные кондитерские изделия» + «Оптом от производителя!» —
   две строки одного заголовка (для поисковиков), выглядят как раньше */
.hero__h1{margin:0;font:inherit}
.hero__title,.hero__subtitle{display:block}

.hero__title{
  position:relative;
  z-index:6;
  margin:0;
  max-width:640px;
  font-weight:800;
  font-size:70px;
  line-height:70px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--dark);
}
.hero__subtitle{
  position:relative;
  z-index:6;
  margin:45px 0 0;
  font-weight:400;
  font-size:32px;
  line-height:32px;
  text-transform:uppercase;
  color:var(--pink);
}
.hero__btn{position:relative;z-index:6;margin-top:44px}

.hero__art{
  position:absolute;
  top:0;left:0;
  width:1190px;
  height:976px;
  pointer-events:none;
}
.hero__art img{position:absolute;max-width:none}
.hero__art .a-sakura{left:470px; top:225px;width:943px;z-index:1}
.hero__art .a-peach {left:992px; top:99px; width:337px;z-index:2}
.hero__art .a-bb    {left:1038px;top:804px;width:125px;z-index:3}
.hero__art .a-rasp  {left:546px; top:138px;width:183px;z-index:4}
.hero__art .a-oat   {left:663px; top:138px;width:471px;z-index:5}
.hero__art .a-heart {left:439px; top:535px;width:354px;z-index:7}
.hero__art .a-blob  {left:-144px;top:840px;width:111px;z-index:8}

/* ------------------------------------------------------- Секции и заголовки */

.section{position:relative}

.section-head{text-align:center}
.section-head .h-section{margin-bottom:63px}
.section-head__text{
  max-width:644px;
  margin:0 auto;
  text-align:center;
  font-size:16px;
  line-height:22px;
  color:var(--black);
}

.products{padding-top:0}

/* ------------------------------------------------------------ Сетка товаров */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:40px;
  row-gap:70px;
  margin-top:130px;
}

.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:493px;
  padding:40px 0 0;
  border-radius:25px;
  background:#fff;
  text-align:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
a.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(236,46,146,.13);
}
.card__media{
  height:319px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card__media img{max-height:319px;width:auto}

.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border-radius:20px;
  background:#EDEDED;
  color:var(--grey);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  line-height:1.4;
  text-align:center;
  word-break:break-all;
}
.card__media .ph{width:300px;height:300px}

.card__type{
  margin:40px 0 0;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  text-transform:uppercase;
  color:var(--dark);
}
.card__name{
  margin:6px 0 0;
  font-weight:500;
  font-size:26px;
  line-height:31px;
  color:var(--pink);
}
.card__name--upper{text-transform:uppercase;line-height:36px}

.cards__cta{display:flex;justify-content:center}

.products__decor-flower{
  position:absolute;
  left:1069px;
  top:3846px;
  width:262px;
  z-index:-1;
  pointer-events:none;
}

/* ----------------------------------------------------- Пастила BYSAKURA */

.pastila-brand{padding-top:456px}

.pastila-brand__col{position:relative;z-index:2;max-width:640px}

.pastila-brand__title{
  margin:0 0 64px;
  font-weight:700;
  font-size:80px;
  line-height:80px;
  text-transform:uppercase;
  color:var(--dark);
}
.pastila-brand__subtitle{
  margin:0 0 25px;
  max-width:410px;
  font-weight:500;
  font-size:32px;
  line-height:32px;
  color:var(--pink);
}
.pastila-brand__text{max-width:466px;margin-bottom:67px;color:var(--dark)}

.pastila-brand img{position:absolute;max-width:none;pointer-events:none}
.pastila-brand .pb-cherry{left:968px;top:439px; width:458px;z-index:-3}
.pastila-brand .pb-apple {left:318px;top:-355px;width:679px;z-index:-2}
.pastila-brand .pb-sakura{left:595px;top:-632px;width:944px;z-index:-2}
.pastila-brand .pb-pack  {left:558px;top:-162px;width:741px;z-index:-1}
.pastila-brand .pb-bb    {left:521px;top:300px; width:139px;z-index:1}

/* ------------------------------------------------------- Пастила: вкусы */

.pastila{padding-top:179px}
.pastila .cards{margin-top:0}

/* ------------------------------------------------- Чем хороша пастила */

.benefits{padding-top:143px}

.benefits__grid{
  display:grid;
  grid-template-columns:repeat(3,343px);
  justify-content:space-between;
  row-gap:104px;
}

.benefit{text-align:center}
.benefit__icon{
  position:relative;
  display:inline-block;
  margin-bottom:36px;
  line-height:0;
}
.benefit__glyph{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
.benefit__title{
  margin:0 0 20px;
  font-weight:500;
  font-size:20px;
  line-height:24px;
  text-transform:uppercase;
  color:var(--black);
}
.benefit__text{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:var(--black);
}

.benefits .cards__cta{margin-top:75px}

/* ------------------------------------------------------------ О компании */

.about{padding-top:163px}

.about__title{margin:0 0 104px;text-align:center}

.about__grid{
  display:grid;
  grid-template-columns:585px 1fr;
  gap:20px;
  align-items:start;
}
.photo{
  width:100%;
  border-radius:25px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  object-fit:cover;
}
.about__photo{height:585px}
.about__lead{margin-bottom:40px;max-width:555px}
.about__grid .body-text{max-width:464px}

.about__decor-rasp{
  position:absolute;
  left:1121px;
  top:542px;
  width:322px;
  z-index:-1;
  pointer-events:none;
}
.about__decor-blob{
  position:absolute;
  left:-139px;
  top:1522px;
  width:156px;
  z-index:-1;
  pointer-events:none;
}

.secret{
  margin-top:98px;
  display:grid;
  grid-template-columns:1fr 585px;
  gap:20px;
  align-items:start;
}
.secret__lead{max-width:437px;margin-bottom:20px}
.secret__text{max-width:464px;margin-bottom:53px;color:var(--dark)}
.secret__photo{height:585px}

/* ----------------------------------------------------------- Преимущества */

.advantages{padding-top:204px}
.advantages .section-head .h-section{margin-bottom:122px}

.advantages__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:40px;
  row-gap:60px;
}
.advantage__num{
  margin:0 0 10px;
  font-weight:400;
  font-size:48px;
  line-height:58px;
  color:var(--pink);
}
.advantage__title{
  margin:0 0 10px;
  font-weight:500;
  font-size:20px;
  line-height:24px;
  text-transform:uppercase;
  color:var(--black);
}
.advantage__text{margin:0;font-size:16px;line-height:22px;color:var(--black)}

.advantages .cards__cta{margin-top:98px}

.advantages__decor{
  position:absolute;
  left:845px;
  top:239px;
  width:689px;
  z-index:-1;
  pointer-events:none;
}

/* --------------------------------------------------------------- Партнерам */

.partners{padding-top:360px}
.partners__grid{
  display:grid;
  grid-template-columns:1fr 429px;
  gap:100px;
  align-items:start;
}
.partners__title{margin:0 0 40px}
.partners__lead{margin-bottom:40px;max-width:511px}
.partners__text{max-width:472px;color:var(--dark)}

.partners__decor{
  position:absolute;
  left:-776px;
  top:220px;
  width:1185px;
  z-index:-1;
  pointer-events:none;
}

/* ------------------------------------------------------------------- Форма */

.form__title{
  margin:0 0 10px;
  font-weight:500;
  font-size:40px;
  line-height:40px;
  color:var(--ink);
}
.form__note{
  margin:0 0 30px;
  font-size:16px;
  line-height:22px;
  color:var(--pink);
}
.field{margin-bottom:24px}
.field__label{
  display:block;
  margin-bottom:5px;
  font-weight:300;
  font-size:14px;
  line-height:20px;
  color:var(--ink);
}
.field__control{position:relative}
.field input[type=text],
.field input[type=tel],
.field input[type=email]{
  width:100%;
  height:49px;
  padding:0 30px;
  border:1px solid var(--grey-line);
  border-radius:30px;
  background:transparent;
  font-family:'Inter','Rubik',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:20px;
  color:var(--ink);
  outline:none;
  transition:border-color .2s ease;
}
.field input::placeholder{color:var(--ink);opacity:.85}
.field input:focus{border-color:var(--pink)}
.field--phone input[type=tel]{padding-left:82px}
.field__flag{
  position:absolute;
  left:30px;top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;
  pointer-events:none;
}
.field__flag img{width:36px;height:20px}

.consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:6px 0 30px;
}
.consent input{
  flex:0 0 auto;
  width:20px;height:20px;
  margin:0;
  accent-color:var(--pink);
}
.consent label{
  font-family:'Nunito Sans','Rubik',sans-serif;
  font-weight:300;
  font-size:12px;
  line-height:17px;
  color:var(--ink);
}
.consent a{color:var(--pink);text-decoration:underline}

.form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form.is-sending button[type=submit]{opacity:.6;pointer-events:none}
.form__status.is-ok{color:#2e8b57}
.form__status{
  margin-top:16px;
  font-size:14px;
  line-height:20px;
  color:var(--pink);
  min-height:20px;
}

/* ------------------------------------------------- Попап «Получить каталог» */
/* Разметку создаёт main.js при первом открытии — в html её нет.
   Поля внутри используют те же классы .field / .consent, что и форма «Партнёрам». */

.modal{
  position:fixed;
  inset:0;
  z-index:90;
  visibility:hidden;
  pointer-events:none;
}
.modal.is-open{visibility:visible;pointer-events:auto}

.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(17,4,4,.45);
  opacity:0;
  transition:opacity .3s ease;
}
.modal.is-open .modal__backdrop{opacity:1}

.modal__panel{
  position:absolute;
  left:50%;top:50%;
  width:min(520px,calc(100% - 32px));
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  padding:48px 48px 40px;
  border-radius:30px;
  background:#fff;
  transform:translate(-50%,-50%) scale(.96);
  opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.modal.is-open .modal__panel{transform:translate(-50%,-50%) scale(1);opacity:1}

.modal__close{
  position:absolute;
  top:18px;right:22px;
  width:40px;height:40px;
  border:0;background:none;color:var(--pink);
  font-size:34px;line-height:1;
  cursor:pointer;
}
.modal__close:hover{opacity:.7}

.modal .form__title{font-size:32px;line-height:34px}
.modal .form__note{margin-bottom:24px}
.modal .field{margin-bottom:18px}
.modal .consent{margin:0 0 14px}
.modal .consent:last-of-type{margin-bottom:26px}

/* ссылка на скачивание — запасной вариант, если браузер заблокировал автозагрузку */
.modal__fallback{
  display:none;
  margin-top:14px;
  font-size:14px;
  line-height:20px;
}
.modal__fallback a{color:var(--pink);text-decoration:underline}
.modal.is-done .modal__fallback{display:block}
.modal.is-done .field,
.modal.is-done .consent,
.modal.is-done .form__note,
.modal.is-done button[type=submit]{display:none}

@media (max-width:640px){
  .modal__panel{padding:40px 20px 28px;border-radius:24px}
  .modal .form__title{font-size:26px;line-height:30px}
}

/* ------------------------------------------------------------ Наши партнеры */

.brands{padding-top:136px;text-align:center}
.brands .h-section{max-width:565px;margin:0 auto 100px}
.brands__logos{width:100%;max-width:1444px;margin:0 auto}

/* -------------------------------------------------------------- Сертификаты */

.certificates{padding-top:180px}
.certificates .h-section{text-align:center;margin-bottom:90px}
.certificates__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:63px;
}
.certificates__row img{border-radius:25px;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.certificates__row .cert-side{width:235px}
.certificates__row .cert-main{width:370px}

.certificates__decor{
  position:absolute;
  left:1210px;
  top:-78px;
  width:158px;
  z-index:-1;
  pointer-events:none;
}

/* ---------------------------------------------------------------- Контакты */

.contacts{padding-top:185px}
.contacts__grid{
  display:grid;
  grid-template-columns:1fr 585px;
  gap:40px;
  align-items:start;
}
.contacts__phone{
  display:block;
  margin:50px 0 30px;
  font-weight:500;
  font-size:40px;
  line-height:40px;
  color:#161616;
}
.contacts__mail{
  display:block;
  font-weight:500;
  font-size:20px;
  line-height:24px;
  text-transform:uppercase;
  color:var(--pink);
}
.contacts__mail-note{
  margin:2px 0 16px;
  font-size:16px;
  line-height:22px;
  color:var(--black);
}
.contacts__label{
  margin:40px 0 4px;
  font-weight:500;
  font-size:20px;
  line-height:24px;
  text-transform:uppercase;
  color:var(--black);
}
.contacts__address{margin:0;font-size:16px;line-height:22px;color:var(--black)}
.contacts__actions{display:flex;align-items:center;gap:10px;margin-top:40px}
.contacts__map{position:relative;width:100%;height:517px;border-radius:15px;overflow:hidden;background:#f2f1ee}
.contacts__map iframe{display:block;width:100%;height:100%;border:0}

/* розовый пульсирующий ореол поверх пина виджета.
   Остриё пина у виджета всегда на 10px левее и 12px выше центра карты. */
.map-pulse{
  position:absolute;
  left:calc(50% - 10px);
  top:calc(50% - 12px);
  width:0;height:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.map-pulse::before,
.map-pulse::after{
  content:'';
  position:absolute;
  left:-44px;top:-44px;
  width:88px;height:88px;
  border-radius:50%;
  border:3px solid var(--pink);
  background:rgba(236,46,146,.18);
  animation:mapPulse 2.2s ease-out infinite;
}
.map-pulse::after{animation-delay:1.1s}
.map-pulse.is-off{opacity:0}
@keyframes mapPulse{
  0%  {transform:scale(.15);opacity:1}
  100%{transform:scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .map-pulse::before{animation:none;transform:scale(.55);opacity:.9}
  .map-pulse::after{display:none}
}

/* ------------------------------------------------------------------ Подвал */

/* без своего фона: иначе он перекрывает ветку сакуры с z-index:-1 */
.footer{padding:81px 0 60px}

.footer__logo{margin-bottom:107px}
.footer__logo img{width:100%}

.footer__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 236px 231px;
  row-gap:38px;
  align-items:start;
}

.footer__sakura{
  position:absolute;
  left:-375px;
  top:-371px;
  width:1079px;
  max-width:none;
  z-index:-1;
  pointer-events:none;
}

/* раскладка по ячейкам: первая колонка пустая — под ветку сакуры */
.footer__nav     {grid-column:2;grid-row:1}
.footer__contacts{grid-column:3;grid-row:1;display:flex;flex-direction:column}
.footer__meta    {grid-column:2;grid-row:2}
.footer__legal   {grid-column:3;grid-row:2}
.footer__socials {grid-column:2;grid-row:3;align-self:center}
.footer__btn     {grid-column:3;grid-row:3;align-self:center;justify-self:end}

.footer__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.footer__nav a{
  font-weight:500;
  font-size:14px;
  line-height:14px;
  text-transform:uppercase;
  color:var(--dark);
  transition:color .2s ease;
}
.footer__nav a:hover{color:var(--pink)}

.footer__dev,
.footer__rights,
.footer__legal a{
  font-family:'Inter','Rubik',sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:var(--grey);
}
.footer__rights{margin:0 0 28px}
.footer__dev{margin:0;color:var(--black)}
.footer__dev-link{text-decoration:underline;text-decoration-color:rgba(17,4,4,.3);text-underline-offset:3px;transition:color .2s ease}
.footer__dev-link:hover{color:var(--pink);text-decoration-color:currentColor}

.footer__phone{
  display:block;
  margin-bottom:25px;
  white-space:nowrap;
  font-weight:500;
  font-size:26px;
  line-height:31px;
  color:var(--dark);
}
.footer__mail{
  display:block;
  margin-bottom:10px;
  font-size:16px;
  line-height:22px;
  color:var(--dark);
}
.footer__address{margin:28px 0 13px;font-size:16px;line-height:22px;color:var(--dark)}
.footer__maplink{
  align-self:flex-start;
  font-size:16px;
  line-height:22px;
  color:var(--pink);
  text-decoration:underline;
}
.footer__legal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

/* ------------------------------------------------------ Юридические страницы */

.legal{padding:200px 0 120px}
.legal__body{max-width:820px;font-size:16px;line-height:26px;color:var(--ink)}
.legal__title{margin:0 0 12px;font-weight:700;font-size:48px;line-height:52px;text-transform:uppercase;color:var(--dark)}
.legal__actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 32px}
/* в тексте документов ссылки розовые с подчёркиванием — кнопкам это ни к чему */
.legal__body .btn{color:#fff;text-decoration:none}
.legal__body .btn--ghost{color:var(--pink)}
.legal__body .btn--ghost:hover{color:#fff}
.legal--404 .legal__body{max-width:620px}
.legal__meta{margin:0 0 40px;font-size:14px;color:var(--grey)}
.legal__body h2{margin:40px 0 14px;font-weight:500;font-size:22px;line-height:28px;color:var(--pink)}
.legal__body p{margin:0 0 14px}
.legal__body ul{margin:0 0 14px;padding-left:22px}
.legal__body li{margin-bottom:6px}
.legal__body a{color:var(--pink);text-decoration:underline}
.legal__body code{font-size:14px;background:#f5f2f3;padding:1px 5px;border-radius:4px}
.legal__table{width:100%;margin:6px 0 18px;border-collapse:collapse;font-size:15px;line-height:22px}
.legal__table th,.legal__table td{padding:12px 14px;border:1px solid rgba(236,46,146,.25);text-align:left;vertical-align:top}
.legal__table th{background:rgba(236,46,146,.06);font-weight:500}
.legal__body .btn{text-decoration:none}
mark.todo{background:#fff1a8;color:#8a5a00;padding:0 4px;border-radius:3px}
@media (max-width:639px){
  .legal{padding:140px 0 80px}
  .legal__title{font-size:30px;line-height:34px}
  .legal__table{display:block;overflow-x:auto}
}

/* ------------------------------------------------------------ Баннер cookie */

.cookie-bar{
  position:fixed;
  left:50%;bottom:24px;
  z-index:90;
  width:min(920px,calc(100% - 32px));
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:20px 24px 20px 28px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 40px rgba(17,4,4,.16);
  transform:translate(-50%,140%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.cookie-bar.is-shown{transform:translate(-50%,0)}
.cookie-bar__main{display:flex;align-items:center;gap:24px}
.cookie-bar__text{margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.cookie-bar__text a{color:var(--pink);text-decoration:underline}
.cookie-bar__actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.cookie-bar__link{
  padding:0;border:0;background:none;
  font-size:14px;line-height:20px;color:var(--grey);
  text-decoration:underline;white-space:nowrap;
}
.cookie-bar__link:hover{color:var(--ink)}

/* режим настроек: текст остаётся, кнопки первого экрана прячутся */
.cookie-bar__settings{display:none;margin-top:16px;border-top:1px solid rgba(236,46,146,.2)}
.cookie-bar.is-settings .cookie-bar__settings{display:block}
.cookie-bar.is-settings .cookie-bar__main .cookie-bar__actions{display:none}
.cookie-bar__settings .cookie-bar__actions{margin-top:18px}

.cookie-opt{
  display:flex;align-items:center;gap:20px;
  padding:14px 0;
  border-bottom:1px solid rgba(236,46,146,.12);
  cursor:pointer;
}
.cookie-opt.is-locked{cursor:default}
.cookie-opt__text{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:18px;color:var(--grey)}
.cookie-opt__text b{font-weight:500;font-size:15px;line-height:20px;color:var(--dark)}
.cookie-opt__input{position:absolute;opacity:0;pointer-events:none}
.cookie-opt__switch{
  position:relative;flex:0 0 auto;
  width:44px;height:26px;border-radius:13px;
  background:#d9d6d7;transition:background .2s ease;
}
.cookie-opt__switch::after{
  content:'';position:absolute;left:3px;top:3px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s ease;
}
.cookie-opt__input:checked + .cookie-opt__switch{background:var(--pink)}
.cookie-opt__input:checked + .cookie-opt__switch::after{transform:translateX(18px)}
.cookie-opt__input:disabled + .cookie-opt__switch{opacity:.45}
.cookie-opt__input:focus-visible + .cookie-opt__switch{outline:2px solid var(--pink);outline-offset:2px}

@media (max-width:639px){
  .cookie-bar{bottom:12px;padding:18px}
  .cookie-bar__main{flex-direction:column;align-items:stretch;gap:14px}
  .cookie-bar__actions{flex-wrap:wrap;gap:12px 18px}
}

/* ============================================================ Страница товара */

.product{position:relative;padding-top:220px}
.product__grid{
  display:grid;
  grid-template-columns:minmax(0,565px) 1fr;
  gap:40px;
  align-items:start;
}
/* H1 товара = тип + название («Пряники сырцовые «Зебра»») */
.product__heading{margin:0;font:inherit}
.product__heading .product__type,.product__heading .product__name{display:block}

.product__type{
  margin:0 0 10px;
  font-weight:400;
  font-size:40px;
  line-height:40px;
  text-transform:uppercase;
  color:var(--black);
}
.product__name{
  margin:0 0 30px;
  font-weight:700;
  font-size:80px;
  line-height:80px;
  text-transform:uppercase;
  color:var(--pink);
}
.product__desc{
  margin:0 0 40px;
  max-width:397px;
  font-weight:400;
  font-size:20px;
  line-height:28px;
  color:var(--black);
}
.product__specs{display:flex;flex-wrap:wrap;gap:4px}
.spec{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:156px;
  height:60px;
  padding:0 16px;
  border:2px solid var(--pink);
  border-radius:40px;
  background:#fff;
  font-weight:500;
  font-size:16px;
  line-height:16px;
  text-transform:uppercase;
  color:var(--pink);
}
.product__flower{margin-top:90px;width:245px}
.product__art{position:relative;min-height:560px}
.product__art img{position:absolute;max-width:none}
.product__art .p-cookie{left:-15px;top:-54px;width:487px;z-index:2}
.product__art .p-sakura{left:104px;top:5px;width:606px;z-index:1}
.product__art .ph{position:absolute;height:499px;font-size:15px}

/* ------------------------------------------ Страница товара, версия 2 (пробная)
   Используется пока только на product-kukis-shokoladnyy.html */

.product--v2{padding-top:250px}
.product--v2 .product__grid{grid-template-columns:minmax(0,1fr) 500px;gap:40px}
.product--v2 .product__info-col{position:relative;z-index:2}

.product--v2 .product__type{margin:0 0 4px}
/* название: Rubik Bold 78px */
.product--v2 .product__name{
  margin:0 0 20px;
  font-weight:700;
  /* длинные названия уменьшаются через --name-size (задаётся в сборке) */
  font-size:var(--name-size,78px);
  line-height:var(--name-size,78px);
  white-space:nowrap;
}
.product--v2 .product__desc{
  margin:0 0 34px;
  max-width:440px;
  font-size:18px;
  line-height:26px;
}

/* характеристики — одна рамка, разбитая на три ячейки */
.product__facts{
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,auto);
  margin:0;
  border:2px solid var(--pink);
}
.fact{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 22px;
}
.fact + .fact{border-left:2px solid var(--pink)}
.fact dd{
  margin:0;
  font-weight:500;
  font-size:14px;
  line-height:16px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--pink);
}
.product--v2 .product__flower{margin:110px 0 0 52px;width:245px}

/* галерея */
.gallery{position:relative;width:500px;justify-self:end;margin:-30px 66px 0 0}
.gallery__sakura{
  position:absolute;
  right:-250px;top:10px;
  width:520px;
  max-width:none;
  z-index:0;
  pointer-events:none;
}
.gallery__viewport{position:relative;z-index:1;overflow:hidden;touch-action:pan-y}
.gallery__track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.gallery__slide{flex:0 0 100%;margin:0}
/* фон у фото прозрачный — никаких подложек под изображением */
.gallery__slide img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:none;user-select:none;-webkit-user-drag:none}

.gallery__nav{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  gap:14px;
  margin:6px 40px 0 0;
}
.gallery__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.gallery__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gallery__arrow:hover{background:#d41f7f}
.gallery__arrow:active{transform:scale(.92)}

/* страница пастилы: ветка сакуры под слайдером, правее и выше, чем у печенья */
.product--pastila .gallery__sakura{top:-85px;right:-240px;width:480px}

.more--v2{padding-top:0;margin-top:-150px}
.more--v2 .cards{margin-top:40px}
.more__blob{
  position:absolute;
  left:1137px;top:37px;
  width:102px;
  z-index:-1;
  pointer-events:none;
}

@media (max-width:1279px){
  .product--v2{padding-top:150px}
  /* minmax(0,1fr): длинное слово не может растянуть колонку шире экрана */
  .product--v2 .product__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .product--v2 .product__info-col{min-width:0}
  /* название тянется за шириной экрана: самое длинное («Апельсиновый») всегда помещается;
     если шрифт всё же шире — слово переносится, а не вылезает за экран */
  .product--v2 .product__name{white-space:normal;overflow-wrap:anywhere;font-size:min(var(--name-size,78px),7.2vw);line-height:1.05}
  .gallery{justify-self:center;margin:0;width:100%;max-width:500px;order:-1}  /* фото — первым */
  .gallery__nav{justify-content:center;margin-right:0}
  .gallery__sakura,.more__blob{display:none}
  .more--v2{margin-top:0;padding-top:60px}
}
@media (max-width:639px){
  .product--v2 .product__name{font-size:min(44px,9.4vw);line-height:1.1}
  .product__facts{display:grid;grid-auto-flow:row;width:100%;max-width:100%}
  .fact + .fact{border-left:0;border-top:2px solid var(--pink)}
}

.more{padding-top:140px}
.more .h-40{text-align:center;margin-bottom:60px}
.more .cards{margin-top:0}
.more .cards__cta{margin-top:60px}

/* SEO-текст внизу страницы товара */
.seo-text{padding-top:120px}
.seo-text__title{margin-bottom:40px}
.seo-text__body{max-width:860px}
.seo-text__btn{margin-top:40px}
@media (max-width:1279px){
  .seo-text{padding-top:70px}
  .seo-text__title{margin-bottom:28px}
  .seo-text__btn{margin-top:30px}
}

/* ==================================================================== Адаптив */

@media (max-width:1439px){
  .partners__decor{left:-700px}
}

@media (max-width:1279px){
  html{scroll-padding-top:120px}
  .header{top:20px;padding:0 20px}
  .header__bar{padding:0 24px}
  .header__nav{display:none}

  .h-section{font-size:60px;line-height:62px}
  .about__title{margin-bottom:60px}

  .hero{min-height:auto}
  .hero .container{padding-top:170px}
  .hero__title{font-size:56px;line-height:58px}
  .hero__subtitle{font-size:28px;line-height:30px;margin-top:32px}
  /* та же композиция, но целиком масштабируется под ширину экрана:
     translate уводит левый верхний угол композиции в ноль, scale ужимает,
     отрицательный margin убирает лишнюю высоту, которую занимает непреобразованный блок */
  .hero__art{
    position:relative;
    top:auto;left:auto;
    width:890px;
    height:830px;
    margin:40px 0 -457px;
    transform:scale(.45) translate(-439px,-99px);
    transform-origin:top left;
  }

  .products{padding-top:60px}
  .cards{margin-top:60px}

  .pastila-brand{padding-top:80px}
  .pastila-brand__col{max-width:none}
  .pastila-brand__title{font-size:60px;line-height:62px;margin-bottom:30px}
  .pastila-brand__subtitle{max-width:none}
  .pastila-brand__text{max-width:none;margin-bottom:40px}
  .pastila-brand img{position:static;display:none}
  .pastila-brand .pb-pack{display:block;width:100%;max-width:520px;margin:40px auto 0}

  .pastila{padding-top:80px}

  .benefits{padding-top:80px}
  .benefits__grid{grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:60px}
  .benefits .cards__cta{margin-top:60px}

  .about{padding-top:80px}
  .about__grid,
  .secret,
  .partners__grid,
  .contacts__grid{grid-template-columns:1fr}
  .about__photo,.secret__photo{height:auto}
  .about__grid .body-text,
  .about__lead,
  .secret__lead,
  .secret__text,
  .partners__lead,
  .partners__text{max-width:none}
  .secret{margin-top:60px}

  .advantages{padding-top:80px}
  .advantages .section-head .h-section{margin-bottom:60px}
  .advantages .cards__cta{margin-top:60px}

  .partners{padding-top:80px}
  .partners__grid{gap:60px}

  .brands{padding-top:80px}
  .brands .h-section{margin-bottom:60px}
  .certificates{padding-top:80px}
  .certificates .h-section{margin-bottom:60px}
  .contacts{padding-top:80px}

  .footer{padding-top:60px}
  .footer__logo{margin-bottom:60px}
  .footer__grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .footer__nav,.footer__contacts,.footer__meta,.footer__legal,.footer__socials,.footer__btn{grid-column:auto;grid-row:auto}
  .footer__btn{justify-self:start}
  .footer__sakura,
  .partners__decor{display:none}

  /* фрукты и фигуры по краям экрана: мельче, наполовину за краем, под текстом */
  .products__decor-flower{left:auto;right:-46px;top:-30px;width:110px}
  .about__decor-rasp{left:auto;right:-50px;top:70px;width:130px}
  .about__decor-blob{left:-44px;top:auto;bottom:-30px;width:90px}
  .advantages__decor{left:auto;right:-90px;top:-50px;width:200px}
  .certificates__decor{left:auto;right:-36px;top:-24px;width:84px}
  .pastila-brand .pb-cherry{display:block;position:absolute;left:auto;right:-56px;top:-50px;width:160px}
  .pastila-brand .pb-bb{display:block;position:absolute;left:-30px;top:auto;bottom:40px;width:70px;z-index:-1}

  .product__art{min-height:0;margin-top:30px}
  .product__art img{position:static}
  .product__art .p-cookie{width:100%;max-width:420px;margin:0 auto}
  .product__art .ph{position:static;height:420px;max-width:420px;margin:0 auto}
  .product__art .p-sakura{display:none}
  .product__grid{grid-template-columns:1fr}
  .product__name{font-size:60px;line-height:62px}
  .product__flower{display:none}
}

@media (max-width:959px){
  .cards{grid-template-columns:repeat(2,1fr);row-gap:50px}
  .benefits__grid,
  .advantages__grid{grid-template-columns:repeat(2,1fr)}
  .certificates__row{gap:24px}
  .certificates__row .cert-side{width:180px}
  .certificates__row .cert-main{width:280px}
  .menu__panel{padding:100px 24px 0 40px}
  .menu__logo{width:220px;margin-bottom:40px}
}

@media (max-width:639px){
  .header{top:12px;padding:0 12px}
  .header__bar{padding:0 16px;height:64px}
  .header__logo,.header__logo img{width:130px;height:33px}
  .header__right .btn{display:none}

  .h-section{font-size:40px;line-height:44px}
  .h-40{font-size:28px;line-height:32px}
  .hero .container{padding-top:140px}
  .hero__title{font-size:36px;line-height:40px}
  .hero__subtitle{font-size:22px;line-height:26px;margin-top:24px}
  .hero__art{transform:scale(.33) translate(-439px,-99px);margin-bottom:-556px}

  .cards{grid-template-columns:1fr;row-gap:40px;margin-top:40px}
  .card{min-height:0}
  .card__media{height:240px}
  .card__media img{max-height:240px}
  .card__media .ph{width:240px;height:240px}
  .product__art .ph{height:320px}
  .card__type{margin-top:24px}
  .card__name{font-size:22px;line-height:26px}

  .pastila-brand__title{font-size:40px;line-height:44px}
  .pastila-brand__subtitle{font-size:24px;line-height:28px}

  .benefits__grid,
  .advantages__grid{grid-template-columns:1fr}

  .form__title{font-size:28px;line-height:32px}
  .certificates__row{flex-direction:column;gap:24px}
  .certificates__row .cert-side,
  .certificates__row .cert-main{width:100%;max-width:320px}
  .contacts__phone{font-size:30px;line-height:34px;margin-top:30px}
  .contacts__map{height:320px}

  .footer__grid{grid-template-columns:1fr;gap:40px}

  .product{padding-top:150px}
  .product__type{font-size:24px;line-height:28px}
  .product__name{font-size:40px;line-height:44px}
  .product__desc{font-size:16px;line-height:24px}
  .spec{min-width:0;height:48px;font-size:14px;padding:0 18px}
  .more{padding-top:80px}
  .menu__panel{padding:90px 24px 0 24px}
  .menu__list a{font-size:20px;line-height:26px}
}