/* Правки поверх стилей макета (stf-etalon.css).
   Цвета и раскладку макета не трогаем: здесь только то,
   без чего наша разметка не ложится на макет. */

/* В макете обёрткой страницы служит .page, у нас — .stfm. */
.stfm{position:relative;width:100%;margin:0 auto;overflow:hidden;}

/* Шапка, верхняя полоса и подвал сайта синие, макет красно-графитовый.
   Перекрашиваем только на этом шаблоне: класс body ставит WordPress. */
.page-template-page-stf-modern .stf-topbar{background:#0F1628;}
.page-template-page-stf-modern header.stf-header .stf-header__container{background:rgba(242,242,242,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.page-template-page-stf-modern header.stf-header .stf-header-socials a:hover{background:rgba(237,44,47,.12) !important;color:#ED2C2F;}
/* Кнопка телефона: красная пилюля макета с иконкой в квадратике. */
.page-template-page-stf-modern .stf-sales-phone{background:linear-gradient(90deg,#ED2C2F 0%,#FF6F72 100%) !important;height:55px;padding:7px 7px 7px 20px;border-radius:15px;gap:12px;}
.page-template-page-stf-modern .stf-sales-phone:hover{background:linear-gradient(90deg,#DD2A1B 0%,#ED2C2F 100%) !important;}
.page-template-page-stf-modern .stf-sales-phone__num{font-size:17px;font-weight:500;line-height:20px;}
.page-template-page-stf-modern .stf-sales-phone__sub{font-size:12px;line-height:14px;opacity:.85;}
.page-template-page-stf-modern .stf-sales-phone__ico{width:41px;height:41px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:none;}

/* Меню: пилюли макета вместо белой подложки со скруглением в круг. */
.page-template-page-stf-modern .stf-desktop-nav{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0;}
/* Цвет пунктов задаёт тема своим правилом, поэтому здесь !important. */
.page-template-page-stf-modern header.stf-header .stf-nav-list a{color:#0F1628 !important;}
.page-template-page-stf-modern header.stf-header .stf-nav-list a:hover{background:rgba(237,44,47,.10) !important;color:#ED2C2F;}
.page-template-page-stf-modern header.stf-header .stf-action-btn:hover{background:rgba(237,44,47,.12) !important;color:#ED2C2F;}

/* Соцкружки в шапке не показываем: панель шире 1240 не растёт, а семь пунктов
   меню вместе с корзиной и кнопкой телефона занимают её целиком — кружки
   налезали на «Отзывы» и «Статьи». Соцсети остаются в верхней полосе. */
.page-template-page-stf-modern .stf-footer-alt{background:#0F1628;}
.page-template-page-stf-modern .stf-footer-alt__icon .stf-social-svg{color:#0F1628;}

/* Форма кнопок. Тема правилом «.btn, input[submit], .woocommerce .button»
   с !important скругляет всё в пилюли (999px), из-за чего кнопки страницы
   выглядели таблетками вместо скруглённых прямоугольников макета.
   Возвращаем макетные 15px, кнопку вопроса — без скругления. */
.stfm .btn,
.stfm .tabs__btn,
.stfm .iconbtn,
.stfm .form-card .sendform,
.stfm input[type="submit"]{border-radius:15px !important;}
.stfm .faq__q{border-radius:0 !important;}

/* Красные кнопки макета: тема красит ссылки в тёмный, поэтому белый с !important. */
.stfm .btn--primary,
.stfm .btn--primary:hover,
.stfm .btn--red,
.stfm .btn--red:hover{color:#fff !important;}

/* Карточки причин: сетка тянет .reason на высоту строки, а карточка внутри
   считалась по своему тексту — высоты выходили разные. */
.stfm .reason{display:flex;flex-direction:column;}
.stfm .reason__card{flex:1 0 auto;}

/* Первый экран: колонка с текстом тянется на высоту фото и распределяется
   по ней, иначе низ колонки висел выше нижнего края снимка.
   Кнопка внутри .hero__cta растягивалась колонкой на всю ширину. */
@media (min-width:1025px){
	.stfm .hero__content{min-height:inherit;justify-content:space-between;padding-bottom:0;}
}
.stfm .hero__cta{align-items:flex-start;}

/* Преимущества: макет с ширины 1440 и ниже ограничивает строку 510 пикселями
   и разрешает перенос, а промежуток между колонками 50px становился при этом
   вертикальным разрывом. Строку не сужаем, перенос оставляем плотным. */
.stfm .hero__features{max-width:none;column-gap:50px;row-gap:10px;}

/* Снимок первого экрана прижат к правому краю и на средних ширинах наезжал на
   строку преимуществ: она уходила под фото. Ограничиваем строку свободным
   местом до снимка, лишнее уходит переносом. */
@media (min-width:1281px) and (max-width:1560px){
	.stfm .hero__features{max-width:510px;column-gap:24px;}
}

/* Главная кнопка первого экрана на пятую часть шире, иконка остаётся у края. */
.stfm .hero__cta .btn--calc{min-width:259px;justify-content:space-between;}

/* Между двумя кнопками первого экрана было 50 пикселей, они читались как
   несвязанные. Ставим обычный для пары кнопок промежуток. */
.stfm .hero__btns{gap:20px;}

/* Дыру между кнопками держал не промежуток, а колонка .hero__cta: её ширину
   задавала длинная подпись под кнопкой, и «Фото рыбаков» вставала за правым
   краем подписи. Колонку раскрываем во флекс, подпись уводим строкой ниже. */
@media (min-width:1025px){
	.stfm .hero__btns{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:14px 20px;}
	.stfm .hero__cta{display:contents;}
	.stfm .hero__explore{order:1;}
	.stfm .hero__btns .hero__note{order:2;flex:1 0 100%;}
}

/* Квадратик со стрелкой вместо картинки калькулятора из макета. */
.stfm .btn__calc--go{display:inline-flex;align-items:center;justify-content:center;width:41px;height:41px;flex:none;border-radius:12px;background:rgba(255,255,255,.18);}

/* «Фото рыбаков» ломалась на две строки: у этой кнопки нет запрета переноса,
   который есть у .btn, и она ужималась по месту в колонке. */
.stfm .hero__explore{white-space:nowrap;max-width:none;}

/* Тема перекрашивает ссылки при наведении, поэтому белый текст макета на
   залитой кнопке оставался тёмным. Стрелка тоже светлеет вместе с текстом. */
.stfm .hero__explore:hover{color:#fff !important;}
.stfm .hero__explore:hover path{stroke:#fff !important;}

/* Отклик на наведение: в макете кнопка только осветляется на 3%, этого не
   видно. Добавляем подъём и тень цветом кнопки. */
.stfm .btn{transition:background .25s ease,color .25s ease,transform .18s ease,box-shadow .25s ease,filter .25s ease;}
.stfm .btn--primary:hover,
.stfm .btn--red:hover{transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb, var(--red1) 32%, transparent);filter:brightness(1.06);}
.stfm .btn--outline:hover,
.stfm .tabs__btn:hover{background:var(--gray);transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb, var(--red1) 22%, transparent);}

/* Кнопка и стрелка в карточке товара — одна пара: наведение на любую из них
   поднимает обе. Иначе стрелка заливалась от наведения на блок, а подъём шёл
   только от наведения на саму кнопку, и эффекты срабатывали вразнобой. */
.stfm .pcard__btns .iconbtn{transition:background .25s ease,transform .18s ease;}
.stfm .pcard__btns:hover .iconbtn{transform:translateY(-2px);}
.stfm .pcard__btns:hover .btn--primary{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 18px color-mix(in srgb, var(--red1) 32%, transparent);}
.stfm .tabs__btn--active:hover{background:var(--grad);box-shadow:0 8px 18px color-mix(in srgb, var(--red1) 32%, transparent);}

/* Вкладки маркетплейсов над отзывами: форма кнопок макета (.btn--outline
   и .btn--primary), чтобы не выбивались из общего вида страницы. */
.stfm .tabs{display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap;}
.stfm .tabs__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:51px;padding:0 30px;border-radius:15px;border:1px solid var(--navy);background:none;color:var(--navy);font-family:inherit;font-size:16px;font-weight:500;white-space:nowrap;cursor:pointer;transition:.15s;}
.stfm .tabs__btn:hover{filter:brightness(1.03);}
.stfm .tabs__btn--active{background:var(--grad);border-color:transparent;color:#fff;}
@media (max-width:1024px){
	.stfm .tabs__btn{height:46px;padding:0 22px;}
}

/* Порционный показ: свёрнутые карточки и кнопка под сеткой. */
.stfm .is-folded{display:none;}
.stfm .is-hidden{display:none;}
.stfm .stf-more{margin:30px auto 0;display:flex;}
.stfm .reviews__pane:not(.is-hidden){display:flex;flex-direction:column;}
.stfm .reviews__pane > .stf-more{align-self:center;margin:30px 0 0!important;}
.stfm #gallery .gallery__more{display:flex;justify-content:center;margin-top:30px;}
.stfm #gallery .gallery__more .stf-more{margin:0!important;}
.stfm #gallery .gallery__more:not(:has(.stf-more)){display:none;}

/* Вопросы на десктопе в две колонки: одна тянулась через всю ширину. */
@media (min-width:1025px){
	.stfm .faq__list{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:15px;}
}

/* Раскрытие ответа: в макете анимируется max-height:500px, поэтому короткий
   ответ открывался рывком, а закрывался с паузой. Тянем реальную высоту
   через grid-template-rows, отступ снизу едет тем же темпом. */
.stfm .faq__a{display:grid;grid-template-rows:0fr;max-height:none;overflow:hidden;transition:grid-template-rows .35s ease,padding-bottom .35s ease;}
.stfm .faq__a-in{min-height:0;overflow:hidden;}
.stfm .faq__item--open .faq__a{grid-template-rows:1fr;}

/* Знак у вопроса: плюс из двух палочек, при открытии доворачивается в минус. */
.stfm .faq__sign{position:relative;width:18px;height:18px;font-size:0;}
.stfm .faq__sign::before,
.stfm .faq__sign::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:var(--navy);transform:translate(-50%,-50%);transition:transform .3s ease,background .3s ease;}
.stfm .faq__sign::after{transform:translate(-50%,-50%) rotate(90deg);}
.stfm .faq__item--open .faq__sign::before,
.stfm .faq__item--open .faq__sign::after{background:var(--red1);}
.stfm .faq__item--open .faq__sign::after{transform:translate(-50%,-50%) rotate(0deg);}

/* Снимки рыбаков открываются лайтбоксом, поэтому оставляем курсор с лупой.
   Движение карточки и медиа ниже подключается из общей системы. */
.stfm .work__zoom{display:block;width:100%;height:100%;cursor:zoom-in;}

/* Общая система движения карточек главной. Все сопоставимые блоки используют
   один подъём, длительность, easing, синюю рамку и тень. Отличается только
   реакция содержимого: фото увеличивается, пиктограмма слегка оживает. */
.stfm .pcard,
.stfm .tcard,
.stfm .review,
.stfm .post,
.stfm .work{
	box-sizing:border-box;
	border:1px solid transparent;
	transition:transform var(--stf-motion-card) var(--stf-ease-out),border-color var(--stf-motion-card) ease,box-shadow var(--stf-motion-card) ease;
}
.stfm .pcard__img img,
.stfm .post__img img,
.stfm .work__img img{transition:transform var(--stf-motion-media) var(--stf-ease-out);}
.stfm .tcard__icon img,
.stfm .review .avatar{transition:transform var(--stf-motion-card) var(--stf-ease-out),box-shadow var(--stf-motion-card) ease;}
@media (hover:hover) and (pointer:fine){
	.stfm .pcard:hover,
	.stfm .tcard:hover,
	.stfm .review:hover,
	.stfm .post:hover,
	.stfm .work:hover{transform:translateY(var(--stf-card-lift));border-color:var(--stf-card-border-hover);box-shadow:var(--stf-card-shadow-hover);}
	.stfm .pcard:hover .pcard__img img,
	.stfm .post:hover .post__img img,
	.stfm .work:hover .work__img img{transform:scale(1.05);}
	.stfm .tcard:hover .tcard__icon img{transform:translateY(-3px) rotate(-3deg) scale(1.06);}
	.stfm .review:hover .avatar{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 20px rgba(18,112,181,.22);}
}

/* Преимущества под первым экраном: три самостоятельных блока. Тексту задаём
   комфортную длину строки, чтобы на широком экране он не растягивался по всей
   колонке. SVG при наведении заново прорисовывает контур и слегка поднимается. */
.stfm .purchase-reasons{margin-top:70px;}
.stfm .purchase-reasons .reasons__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.stfm .purchase-reasons .reason{display:flex;flex-direction:column;align-items:center;gap:22px;min-height:330px;padding:30px 26px 32px;border:1px solid rgba(18,112,181,.18);border-radius:28px;background:rgba(255,255,255,.74);text-align:center;box-shadow:0 12px 34px rgba(15,22,40,.04);transition:transform var(--stf-motion-card) var(--stf-ease-out),border-color var(--stf-motion-card) ease,box-shadow var(--stf-motion-card) ease,background var(--stf-motion-card) ease;}
.stfm .purchase-reasons .reason:hover{transform:translateY(var(--stf-card-lift));border-color:var(--stf-card-border-hover);background:#fff;box-shadow:var(--stf-card-shadow-hover);}
.stfm .purchase-reasons .reason__card{width:100%;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;align-items:center;gap:14px;text-align:center;}
.stfm .purchase-reasons .reason__icon{position:static;z-index:auto;display:flex;align-items:center;justify-content:center;width:112px;height:112px;flex:0 0 112px;border-radius:50%;background:linear-gradient(135deg,#1270b5 0%,#4ba3de 100%);box-shadow:0 12px 26px rgba(18,112,181,.18);transition:transform .28s ease,box-shadow .28s ease;}
.stfm .purchase-reasons .reason__icon svg{display:block;width:64px;height:64px;color:#fff;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-origin:center;}
.stfm .purchase-reasons .reason__icon svg path,
.stfm .purchase-reasons .reason__icon svg circle{stroke-dasharray:70;stroke-dashoffset:0;}
.stfm .purchase-reasons .reason:hover .reason__icon{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 32px rgba(18,112,181,.28);}
.stfm .purchase-reasons .reason:hover .reason__icon svg{animation:stfm-benefit-svg-lift .72s cubic-bezier(.22,1,.36,1) both;}
.stfm .purchase-reasons .reason:hover .reason__icon svg path,
.stfm .purchase-reasons .reason:hover .reason__icon svg circle{animation:stfm-benefit-svg-draw .72s ease-out both;}
.stfm .purchase-reasons .reason__title{font-size:24px;line-height:1.2;}
.stfm .purchase-reasons .reason__desc{max-width:360px;font-size:16px;line-height:1.6;}
.stfm .purchase-reasons .reason__title,
.stfm .purchase-reasons .reason__desc{margin:0;}
@keyframes stfm-benefit-svg-lift{0%{transform:translateY(0) scale(1);}45%{transform:translateY(-4px) scale(1.06);}100%{transform:translateY(0) scale(1);}}
@keyframes stfm-benefit-svg-draw{0%{stroke-dashoffset:70;opacity:.3;}100%{stroke-dashoffset:0;opacity:1;}}

@media (max-width:1024px){
	.stfm .purchase-reasons .reasons__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
	.stfm .purchase-reasons{margin-top:40px;}
	.stfm .purchase-reasons .reasons__grid{grid-template-columns:1fr;}
	.stfm .purchase-reasons .reason{gap:18px;min-height:0;padding:26px 20px 28px;border-radius:22px;}
	.stfm .purchase-reasons .reason__icon{width:88px;height:88px;flex-basis:88px;}
	.stfm .purchase-reasons .reason__icon svg{width:50px;height:50px;}
	.stfm .purchase-reasons .reason__title{font-size:22px;}
	.stfm .purchase-reasons .reason__desc{max-width:460px;font-size:15px;line-height:1.55;}
	.stfm #gallery .gallery__more{display:none;}
}
@media (prefers-reduced-motion:reduce){
	.stfm .pcard,
	.stfm .tcard,
	.stfm .review,
	.stfm .post,
	.stfm .work,
	.stfm .pcard__img img,
	.stfm .post__img img,
	.stfm .work__img img,
	.stfm .tcard__icon img,
	.stfm .review .avatar,
	.stfm .purchase-reasons .reason,
	.stfm .purchase-reasons .reason__icon{transition:none;}
	.stfm .pcard:hover,
	.stfm .tcard:hover,
	.stfm .review:hover,
	.stfm .post:hover,
	.stfm .work:hover,
	.stfm .pcard:hover .pcard__img img,
	.stfm .post:hover .post__img img,
	.stfm .work:hover .work__img img,
	.stfm .tcard:hover .tcard__icon img,
	.stfm .review:hover .avatar{transform:none;}
	.stfm .purchase-reasons .reason:hover .reason__icon svg,
	.stfm .purchase-reasons .reason:hover .reason__icon svg path,
	.stfm .purchase-reasons .reason:hover .reason__icon svg circle{animation:none;}
}

/* Галерея рыбаков: четыре равные карточки в каждом десктопном ряду. */
.stfm #gallery .work__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
@media (max-width:1024px) and (min-width:641px){
	.stfm #gallery .work__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Мобильная карусель фото рыбаков: тем же приёмом, что у отзывов в макете. */
@media (max-width:640px){
	.stfm .work__grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:12px;margin-right:-16px;padding-right:16px;grid-template-columns:unset;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;}
	.stfm .work__grid::-webkit-scrollbar{display:none;}
	.stfm .work__grid .work{flex:0 0 calc(100% - 44px);scroll-snap-align:start;scroll-snap-stop:always;}
	/* В карусели листаются все снимки и отзывы, кнопка не нужна. */
	.stfm .work__grid .is-folded{display:flex;}
	.stfm .reviews__grid .is-folded{display:block;}
	.stfm .stf-more{display:none;}
}

/* Товары без цены: подпись вместо цены. Своего стиля у неё не было,
   поэтому она наследовала кегль цены (21px) и читалась как заголовок. */
.stfm .pcard__wholesale{font-size:14px;line-height:17px;font-weight:500;color:rgba(15,22,40,.55);}

/* Форму отдаёт Contact Form 7 своей разметкой, приводим её к полям макета.
   Абзацы, в которые CF7 заворачивает поля, раскрываем: без них заголовок и
   поле становятся детьми блока, отступы считает gap, а форма выходит ниже. */
.stfm .form-card .wpcf7-form{display:flex;flex-direction:column;gap:14px;}
.stfm .form-card .wpcf7-form p{margin:0;}
.stfm .form-card .wpcf7-form > p,
.stfm .form-card .cf_block > p,
.stfm .form-card .form_agree > p{display:contents;}
.stfm .form-card .wpcf7-form br{display:none;}
.stfm .form-card .cf_block{display:flex;flex-direction:column;gap:8px;}
.stfm .form-card .cf_block label{font-size:16px;font-weight:500;color:var(--navy);text-transform:none;}
.stfm .form-card .tfield,
.stfm .form-card .tarea{width:100%;border-radius:12px;background:var(--gray);border:1px solid transparent;padding:16px 22px;font-size:16px;color:var(--navy);font-family:inherit;}
.stfm .form-card .tfield{height:50px;padding:0 22px;}
.stfm .form-card .tarea{min-height:120px;resize:vertical;}
.stfm .form-card .tfield::placeholder,
.stfm .form-card .tarea::placeholder{color:rgba(15,22,40,.4);}
.stfm .form-card .form_agree{font-size:13px;line-height:1.4;color:rgba(15,22,40,.7);}
.stfm .form-card .form_agree a{text-decoration:underline;}
/* Чекбокс CF7 был 16×16 с почти белой однопиксельной рамкой. Делаем его
   заметным в цвете страницы и показываем явную белую галочку при выборе. */
.stfm .form-card .form_agree .wpcf7-list-item{margin:0;}
.stfm .form-card .form_agree label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
.stfm .form-card .form_agree input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;display:inline-grid;place-content:center;width:22px;height:22px;min-width:22px;flex:0 0 22px;margin:0;border:2px solid var(--red1);border-radius:5px;background:#fff;transition:background .2s,border-color .2s,box-shadow .2s;}
.stfm .form-card .form_agree input[type="checkbox"]::before{content:"";position:static!important;inset:auto!important;display:block;width:6px;height:11px;margin:0;background:transparent!important;border:solid #fff;border-width:0 2px 2px 0;box-sizing:border-box;transform-origin:center;transform:translateY(-1px) rotate(45deg) scale(0);transition:transform .16s ease;}
.stfm .form-card .form_agree input[type="checkbox"]:checked{background:var(--red1);border-color:var(--red1);}
.stfm .form-card .form_agree input[type="checkbox"]:checked::before{transform:translateY(-1px) rotate(45deg) scale(1);}
.stfm .form-card .form_agree input[type="checkbox"]:focus-visible{outline:2px solid var(--red1);outline-offset:2px;}
/* Способ связи: на широком экране все четыре варианта стоят в одной строке. */
.stfm .form-card .cf_block--way .wpcf7-radio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.stfm .form-card .cf_block--way .wpcf7-list-item{margin:0;min-width:0;}
.stfm .form-card .cf_block--way .wpcf7-list-item label{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 18px;border-radius:12px;background:var(--gray);border:1px solid transparent;cursor:pointer;transition:.2s;}
.stfm .form-card .cf_block--way input[type="radio"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;border-radius:50%;border:1.5px solid rgba(15,22,40,.3);background:#fff;transition:.2s;}
.stfm .form-card .cf_block--way input[type="radio"]:checked{border-color:var(--red1);border-width:5px;}
.stfm .form-card .cf_block--way .wpcf7-list-item label:hover{background:#EAEAEC;}
.stfm .form-card .cf_block--way .wpcf7-list-item-label{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--navy);}
.stfm .form-card .cf_block--way .wpcf7-list-item:has(input[value="Telegram"]) .wpcf7-list-item-label::before,
.stfm .form-card .cf_block--way .wpcf7-list-item:has(input[value="MAX"]) .wpcf7-list-item-label::before{content:"";width:22px;height:22px;flex:none;background-position:center;background-repeat:no-repeat;background-size:contain;}
.stfm .form-card .cf_block--way .wpcf7-list-item:has(input[value="Telegram"]) .wpcf7-list-item-label::before{background-image:url("../img/stf-blue/icons/1_1264.svg");}
.stfm .form-card .cf_block--way .wpcf7-list-item:has(input[value="MAX"]) .wpcf7-list-item-label::before{background-image:url("../img/stf-blue/icons/ico_max.png");}
@media (max-width:760px){
	.stfm .form-card .cf_block--way .wpcf7-radio{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.stfm .form-card .cf_block.is-hidden{display:none;}

/* Согласие ставим после капчи: плагин кладёт виджет в один абзац с кнопкой,
   поэтому порядок задаём флексом, а не разметкой формы. */
.stfm .form-card .mercury-captcha{order:1;margin:0 !important;}
.stfm .form-card .form_agree{order:2;}
.stfm .form-card .sendform,
.stfm .form-card .wpcf7-spinner{order:3;}
.stfm .form-card .wpcf7-response-output{order:4;}

.stfm .form-card .sendform{background:linear-gradient(90deg,#1270b5 0%,#4ba3de 100%);color:#fff;height:52px;padding:0 20px;border-radius:15px;border:none;font-size:16px;font-weight:500;cursor:pointer;width:100%;align-self:stretch;text-align:center;font-family:inherit;transition:transform .18s ease,box-shadow .25s ease,filter .25s ease;}
.stfm .form-card .sendform:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 18px rgba(18,112,181,.32);}
.stfm .form-card .wpcf7-spinner{display:block;}
/* Карточка формы стала ниже вслед за полями. */
.stfm .form-card{gap:18px;}

/* Волны перед подвалом. Обе картинки нарисованы на 2000 пикселей и на краях
   выходят на одну высоту, поэтому повторяются встык: слои едут навстречу друг
   другу и вода не рвётся на стыке. */
.stfm .waves{position:relative;width:100%;overflow:hidden;line-height:0;}
.stfm .waves__row{display:block;width:100%;height:93px;background-repeat:repeat-x;background-size:2000px 93px;}
.stfm .waves__row--top{background-image:url(../../../../uploads/2025/11/vr.svg);animation:stfm-wave-left 34s linear infinite;}
.stfm .waves__row--bottom{background-image:url(../../../../uploads/2025/11/nz.svg);margin-top:-30px;opacity:.75;animation:stfm-wave-right 52s linear infinite;}
@keyframes stfm-wave-left{from{background-position:0 0;}to{background-position:-2000px 0;}}
@keyframes stfm-wave-right{from{background-position:0 0;}to{background-position:2000px 0;}}
@media (prefers-reduced-motion:reduce){.stfm .waves__row{animation:none;}}

/* Кнопка наверх: крючок на леске вместо кружка плагина. */
[class*="page-template-page-stf-modern"] #wpfront-scroll-top-container{display:none !important;}
.stfm .hookup{position:fixed;right:28px;bottom:28px;z-index:9998;width:64px;height:132px;padding:0;border:0;background:none;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,visibility .3s;-webkit-tap-highlight-color:transparent;}
.stfm .hookup.is-on{opacity:1;visibility:visible;transform:translateY(0);}
.stfm .hookup svg{display:block;width:100%;height:100%;overflow:visible;}
/* Снасть качается около точки крепления сверху. */
.stfm .hookup__rig{transform-origin:32px 0;animation:stfm-hook-sway 4.5s ease-in-out infinite;}
@keyframes stfm-hook-sway{0%,100%{transform:rotate(-2.2deg);}50%{transform:rotate(2.2deg);}}
.stfm .hookup:hover .hookup__rig{animation-duration:1.6s;}
/* Фазы нажатия держим на keyframes: переход не стартует от значения,
   которое поставила предыдущая анимация, и рывок выходил скачком. */
.stfm .hookup.is-nibble .hookup__rig{animation:stfm-hook-nibble .56s ease-in-out both;}
@keyframes stfm-hook-nibble{0%{transform:translateY(0) rotate(0);}12%{transform:translateY(5px) rotate(-3.5deg);}24%{transform:translateY(1px) rotate(2.5deg);}38%{transform:translateY(6px) rotate(-2.5deg);}52%{transform:translateY(2px) rotate(3.5deg);}66%{transform:translateY(7px) rotate(-2deg);}80%{transform:translateY(3px) rotate(1.5deg);}100%{transform:translateY(9px) rotate(0);}}
.stfm .hookup.is-strike .hookup__rig{animation:stfm-hook-strike .42s cubic-bezier(.16,.9,.2,1) both;}
@keyframes stfm-hook-strike{0%{transform:translateY(9px);}18%{transform:translateY(14px);}100%{transform:translateY(-180px);}}
.stfm .hookup.is-back .hookup__rig{animation:stfm-hook-back .5s cubic-bezier(.22,1.05,.4,1) both;}
@keyframes stfm-hook-back{0%{transform:translateY(-180px);}100%{transform:translateY(0);}}
/* Цвет лески на время рывка не трогаем: сплошной stroke перебивает градиент,
   и растворяющийся верх превращается в обрубленную палку. */
/* Круги на воде: слабые от поклёвки, сильные от подсечки. */
.stfm .hookup__splash{opacity:0;transform-origin:32px 108px;}
.stfm .hookup.is-nibble .hookup__splash{animation:stfm-hook-ripple .56s ease-out;}
@keyframes stfm-hook-ripple{0%{opacity:.45;transform:scale(.3);}100%{opacity:0;transform:scale(1);}}
.stfm .hookup.is-strike .hookup__splash{animation:stfm-hook-splash .45s ease-out;}
@keyframes stfm-hook-splash{0%{opacity:.9;transform:scale(.4);}100%{opacity:0;transform:scale(1.6);}}
.stfm .hookup__label{position:absolute;right:74px;bottom:16px;white-space:nowrap;font-size:14px;font-weight:500;color:var(--navy);background:rgba(255,255,255,.92);border-radius:10px;padding:7px 12px;box-shadow:0 6px 18px rgba(15,22,40,.12);opacity:0;transform:translateX(6px);transition:.25s;pointer-events:none;}
.stfm .hookup:hover .hookup__label{opacity:1;transform:translateX(0);}
@media (max-width:640px){.stfm .hookup{right:14px;bottom:calc(88px + env(safe-area-inset-bottom));width:52px;height:108px;}.stfm .hookup__label{display:none;}}
@media (prefers-reduced-motion:reduce){.stfm .hookup__rig{animation:none;}}

/* ===== Первый экран: колонка по высоте снимка ===== */

/* Между строкой процесса и строками преимуществ было 20 пикселей, а между
   самими преимуществами 10: разнобой читался как случайный. Шаг один. */
.stfm .hero__meta{row-gap:10px;}

/* Колонка была на 94 пикселя выше снимка, и подпись под кнопками свисала
   ниже нижнего края фото. Сокращаем воздух между блоками колонки, размеры
   текста и кнопок не трогаем. */
@media (min-width:1025px){
	.stfm .hero__inner{min-height:500px;}
	.stfm .hero__content{padding-top:0;gap:24px;}
	.stfm .hero__text{gap:24px;}
}
@media (min-width:1441px){
	.stfm .hero__inner{min-height:594px;}
}

/* ===== Плашка товара на снимке ===== */

/* Полупрозрачная подложка .35 на светлом льду не давала контраста: белый текст
   сливался со снимком. Плотнее фон, сильнее размытие и тень под буквами. */
/* Плашка это ссылка, а тема глушит ссылкам цвет и фон правилом
   a{background-color:inherit!important;color:inherit!important} — отсюда важность. */
.stfm .hero__badge-main{
	position:relative;
	overflow:hidden;
	background:rgba(15,22,40,.42) !important;
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-color:rgba(255,255,255,.22);
	color:#fff !important;
	font-weight:500;
	text-shadow:0 1px 3px rgba(0,0,0,.55);
	transition:background .25s ease;
}
.stfm .hero__badge-main .hero__badge-label{color:#fff !important;}

/* Блик пробегает по плашке сам, до наведения: иначе на снимке её не замечают.
   На наведении подложка темнеет ещё, блик останавливается. */
.stfm .hero__badge-main::after{
	content:"";
	position:absolute;
	top:0;
	left:-60%;
	width:45%;
	height:100%;
	background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%);
	transform:skewX(-18deg);
	animation:stfm-badge-shine 3.6s ease-in-out infinite;
	pointer-events:none;
}
@keyframes stfm-badge-shine{0%{left:-60%;}55%{left:120%;}100%{left:120%;}}
.stfm .hero__badge-main:hover{background:rgba(15,22,40,.58) !important;}

/* Названия товаров разной длины уводили цену на свою высоту в каждой карточке.
   Текстовый блок растягиваем, цену прижимаем к его низу — линия цены общая. */
.stfm .pcard__text{flex:1;justify-content:space-between;}
/* «Оптовые продажи» мельче цены, поэтому строке задан общий рост:
   иначе прижатые к низу блоки всё равно начинались на разной высоте. */
.stfm .pcard__price{min-height:28px;}

/* ===== Шапка секции ===== */

/* Между плашкой раздела и заголовком было 30 пикселей плюс отбивка строки,
   на глаз это читалось как разрыв. Половина хватает. */
.stfm .head{gap:14px;}
.stfm .hero__badge-main:hover::after{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.stfm .hero__badge-main::after{animation:none;}}

/* Фото товаров имеют разные пропорции. Показываем изображение целиком внутри
   квадратной белой области карточки, не обрезая снасть по краям. */
.stfm .pcard__img{width:100%;height:auto;aspect-ratio:1/1;}
.stfm .pcard__img img{object-fit:contain;object-position:center;}
.stfm .pcard__img-link{display:block;width:100%;height:100%;border-radius:inherit;}
.stfm .pcard__title-link{color:inherit;text-decoration:none;transition:color .2s ease;}
.stfm .pcard__title-link:hover{color:#147cbd;}
.stfm .pcard__img-link:focus-visible,
.stfm .pcard__title-link:focus-visible{outline:3px solid rgba(20,124,189,.38);outline-offset:3px;}

/* На телефоне декоративный фон был почти непрозрачным и спорил с каталогом.
   Сохраняем тот же рисунок и палитру, только немного приглушаем насыщенность. */
@media (max-width:640px){.stfm .deco--top{opacity:25%;}}

/* На первом экране снимок начинался сразу после топбара и попадал под
   фиксированную шапку. Резервируем её высоту и оставляем небольшой просвет. */
@media (max-width:640px){.stfm .hero{margin-top:93px;}}

/* Мобильные отзывы должны листаться жестом по самой карточке. Разрешаем
   странице вертикальный pan, а горизонтальное движение отдаём карусели. */
@media (max-width:640px){
	.stfm .reviews__grid{touch-action:pan-y;overscroll-behavior-x:contain;}
	.stfm .reviews__grid .review{-webkit-user-select:none;user-select:none;}
}

/* На телефоне названия мессенджеров дублируют узнаваемые логотипы и растягивают
   блок в две строки. Оставляем две доступные по aria-label иконки рядом. */
@media (max-width:640px){
	.stfm .form-card__btns{flex-direction:row;justify-content:center;align-items:center;gap:16px;}
	.stfm .form-card__btns .mbtn{flex:0 0 48px;width:48px;height:48px !important;padding:0 !important;border-radius:50% !important;background:transparent !important;font-size:0;}
	.stfm .form-card__btns .mbtn img{width:38px;height:38px;object-fit:contain;}
}

/* Карточки преимуществ: на десктопе лента, в кадре три карточки, остальные листаются стрелками, тачпадом или свайпом. */
@media (min-width:1025px){
.stfm .purchase-reasons .reasons__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 0 14px;margin-top:-10px;}
.stfm .purchase-reasons .reasons__grid::-webkit-scrollbar{display:none;}
.stfm .purchase-reasons .reason{scroll-snap-align:start;}
.stfm .purchase-reasons .reason:last-child{scroll-snap-align:end;}
}
.stfm :is(.purchase-reasons,#catalog) .reasons__nav{display:flex;justify-content:center;gap:12px;margin-top:18px;}
.stfm :is(.purchase-reasons,#catalog) .reasons__nav[hidden]{display:none;}
.stfm :is(.purchase-reasons,#catalog) .reasons__arrow{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid rgba(18,112,181,.35);border-radius:50%;background:#fff;color:#1270B5;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;}
.stfm :is(.purchase-reasons,#catalog) .reasons__arrow:hover:not(:disabled){background:#1270B5;border-color:#1270B5;color:#fff;}
.stfm :is(.purchase-reasons,#catalog) .reasons__arrow:disabled{opacity:.35;cursor:default;}
.stfm :is(.purchase-reasons,#catalog) .reasons__arrow svg{width:20px;height:20px;}

/* 09.10: каталог на главной - лента как у преимуществ: на десктопе в кадре 4 карточки,
   остальные листаются стрелками, тачпадом или свайпом. Ширина карточки учитывает общий gap
   из дизайн-системы (--stf-space-grid). Планшет и телефон - прежняя сетка. */
@media (min-width:1025px){
.stfm #catalog .products__grid{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 0 14px;margin-top:-10px;}
.stfm #catalog .products__grid::-webkit-scrollbar{display:none;}
.stfm #catalog .pcard{flex:0 0 calc((100% - 3 * var(--stf-space-grid, 25px)) / 4);min-width:0;scroll-snap-align:start;}
.stfm #catalog .pcard:last-child{scroll-snap-align:end;}
}