/* Вид главной на остальных страницах сайта: заголовки, кнопки, карточки,
   поля, таблицы. Разметку и тексты не трогаем.

   Цвета берутся из stf-blue.css — своих значений здесь нет.
   Шапка, верхняя полоса и подвал не входят: они уже фирменные на всём сайте.
   На шаблонах главной файл не подключается — там свои стили. */

/* -------------------------------------------------------------------------
   Фон страницы

   Тема (bootstrap и custom-skin) красит body в белый, а главная идёт на
   светло-серо-голубом. Файл подключается последним, поэтому хватает правила
   той же специфичности; на страницах магазина класс `woocommerce` висит на
   самом body и обнуляет фон правилом с классом — его перебиваем таким же. */

body,
body.woocommerce{background:var(--stf-page);}
/* custom-skin красит .wrapper в белый и прячет этот фон; белые плашки
   галереи и карточек на белом читались как полосы. */
.wrapper{background:transparent;}

/* -------------------------------------------------------------------------
   Общая система движения карточек

   Токены хранятся в stf-blue.css и едины с главной: одинаковые длительность,
   easing, подъём и тень. Здесь перечислены только карточки внутренних страниц.
   ------------------------------------------------------------------------- */

.blog-posts .post-item,
.stf-feat,
.stf-step,
.stf-reviews article,
.stf-card,
.search-results-holder .result-box{
	transition:transform var(--stf-motion-card) var(--stf-ease-out),border-color var(--stf-motion-card) ease,box-shadow var(--stf-motion-card) ease;
}
.woocommerce ul.products li.product > *{
	transition:transform var(--stf-motion-card) var(--stf-ease-out);
}
.blog-posts .post-item .post-thumbnail img,
.woocommerce ul.products li.product .product-images img,
.stf-step__ph img,
.stf-instruction-item__media img,
.stf-card__ph img{transition:transform var(--stf-motion-media) var(--stf-ease-out);}
@media (hover:hover) and (pointer:fine){
	.blog-posts .post-item,
	.stf-feat,
	.stf-step,
	.stf-reviews article,
	.stf-card,
	.search-results-holder .result-box{will-change:transform;}
	.blog-posts .post-item:hover,
	.stf-feat:hover,
	.stf-step:hover,
	.stf-reviews article:hover,
	.stf-card:hover,
	.search-results-holder .result-box:hover{transform:translateY(var(--stf-card-lift));box-shadow:var(--stf-card-shadow-hover);}
	/* Isotope позиционирует li через собственный transform. Поднимаем фон и
	   содержимое карточки, не перезаписывая координаты, рассчитанные скриптом. */
	.woocommerce ul.products li.product:hover::before,
	.woocommerce ul.products li.product:hover > *{transform:translateY(var(--stf-card-lift));}
	.blog-posts .post-item:hover .post-thumbnail img,
	.woocommerce ul.products li.product:hover .product-images img,
	.stf-step:hover .stf-step__ph img,
	.stf-instruction-item:hover .stf-instruction-item__media img,
	.stf-card:hover .stf-card__ph img{transform:scale(1.05);}
}
@media (prefers-reduced-motion:reduce){
	.blog-posts .post-item,
	.stf-feat,
	.stf-step,
	.stf-reviews article,
	.stf-card,
	.search-results-holder .result-box,
	.woocommerce ul.products li.product > *,
	.woocommerce ul.products li.product::before,
	.blog-posts .post-item .post-thumbnail img,
	.woocommerce ul.products li.product .product-images img,
	.stf-step__ph img,
	.stf-instruction-item__media img,
	.stf-card__ph img{transition:none;}
	.blog-posts .post-item:hover,
	.stf-feat:hover,
	.stf-step:hover,
	.stf-reviews article:hover,
	.stf-card:hover,
	.search-results-holder .result-box:hover,
	.blog-posts .post-item:hover .post-thumbnail img,
	.woocommerce ul.products li.product:hover .product-images img,
	.stf-step:hover .stf-step__ph img,
	.stf-instruction-item:hover .stf-instruction-item__media img,
	.stf-card:hover .stf-card__ph img,
	.woocommerce ul.products li.product:hover::before,
	.woocommerce ul.products li.product:hover > *{transform:none;}
}

/* -------------------------------------------------------------------------
   Шапка на страницах WooCommerce

   Стиль магазина задаёт `.woocommerce a{display:inline-block}` и перебивает
   раскладку шапки: логотип, круглые кнопки и кнопка телефона теряют flex,
   из-за чего иконка звонка уезжает под номер. Возвращаем как на главной.
   ------------------------------------------------------------------------- */

.woocommerce a.stf-logo-link,
.woocommerce a.stf-action-btn,
.woocommerce a.stf-sales-phone{display:flex;}
.woocommerce .stf-action-label{display:block;}

/* -------------------------------------------------------------------------
   Заголовки
   ------------------------------------------------------------------------- */

.post-body .entry-header .entry-title,
.single-post .post .entry-header .post-title,
.woocommerce .woocommerce-shop-header--title .page-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.section-title .page-heading__title,
.archive-title{
	font-size:44px;
	line-height:52px;
	font-weight:500;
	letter-spacing:-.5px;
	color:var(--stf-navy);
}

/* Без обложки заголовок упирается в шапку: даём воздух, как на главной. */
.single-post--no-featured-image > .container > .row{padding-top:40px;}

/* Обложка статьи не должна занимать весь первый экран и отодвигать контекст
   страницы ниже сгиба. Сохраняем широкую композицию, но ограничиваем высоту. */
.single-post .post-image .featured-image,
.single-post .post-image .image-placeholder{
	display:block;
	width:100%;
	height:clamp(260px,28vw,350px) !important;
	overflow:hidden;
	border-radius:20px;
}
.single-post .post-image img{
	display:block;
	width:100%;
	height:100% !important;
	object-fit:cover;
	object-position:center;
}
@media (max-width:767px){
	.single-post .post-image .featured-image,
	.single-post .post-image .image-placeholder{height:clamp(170px,48vw,220px) !important;border-radius:15px;}
}

/* Основной текст: на главной он тёмный, тема же красит его в серый #898989
   и жмёт межстрочный до 21px. Селектор с двумя классами перебивает тему. */
.post-content.post-formatting,
.post-content.post-formatting p,
.post-content.post-formatting li,
.post-content.post-formatting td,
.post-content.post-formatting strong,
.post-content.post-formatting b{color:var(--stf-navy);}
.post-content.post-formatting,
.post-content.post-formatting p,
.post-content.post-formatting li{line-height:24px;}

/* Список статей: заголовок карточки как на карточке товара. */
.blog-posts .post-item .post-title,
.blog-posts .post-item .post-title a{
	font-size:21px;
	line-height:25px;
	font-weight:500;
	color:var(--stf-navy);
}
.blog-posts .post-item .post-thumbnail img{border-radius:15px;}

.post-content h2,
.post-content h3,
.post-content h4{color:var(--stf-navy);font-weight:500;}
.post-content h2{font-size:32px;line-height:40px;}
.post-content h3{font-size:24px;line-height:32px;}
.post-content a:not(.button){color:var(--stf-blue);}
.post-content a:not(.button):hover{color:var(--stf-blue-dark);}

/* -------------------------------------------------------------------------
   Кнопки: пилюля макета
   ------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.post-content .button{
	background:var(--stf-grad) !important;
	color:#fff !important;
	border:0 !important;
	border-radius:15px !important;
	font-weight:500;
	text-transform:none;
	transition:.15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.post-content .button:hover{filter:brightness(1.05);color:#fff !important;}

/* -------------------------------------------------------------------------
   Поля форм
   ------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.post-content input[type="text"],
.post-content input[type="email"],
.post-content input[type="tel"],
.post-content textarea{
	border-radius:15px !important;
	border:1px solid rgba(15,22,40,.10) !important;
	box-shadow:none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--stf-blue) !important;outline:none;}

/* -------------------------------------------------------------------------
   Каталог: карточка товара по образцу .pcard с главной
   ------------------------------------------------------------------------- */

.woocommerce ul.products li.product{
	background:var(--stf-gray);
	border-radius:20px;
	padding:10px 10px 20px;
	overflow:hidden;
}
.woocommerce ul.products li.product .product-images{
	border-radius:15px;
	overflow:hidden;
	background:#fff;
}
/* Картинка как на главной: одна высота у всех карточек, кадр по центру.
   Раскладку каталога считает isotope по факту, поэтому карточки в строке
   сравняются только при равной высоте картинки и строки цены. */
.woocommerce ul.products li.product .product-images,
.woocommerce ul.products li.product .product-images a,
.woocommerce ul.products li.product .product-images .image-placeholder{height:176px;}
.woocommerce ul.products li.product .product-images img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.woocommerce ul.products li.product .price-column{min-height:25px;}
/* Место под два ряда заголовка: иначе соседние карточки разной высоты. */
.woocommerce ul.products li.product .title-column h3{min-height:50px;margin:0;}
.woocommerce ul.products li.product .item-info{padding:0 10px;margin-top:20px;}
.woocommerce ul.products li.product .item-info .item-info-row{
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
}
.woocommerce ul.products li.product .title-column h3,
.woocommerce ul.products li.product .title-column h3 a{
	font-size:21px;
	line-height:25px;
	font-weight:500;
	color:var(--stf-navy);
}
/* Цена градиентом, как .price-grad на главной. */
.woocommerce ul.products li.product .price-column .price,
.woocommerce ul.products li.product .price-column .price .amount,
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price .amount{
	font-weight:500;
	background:var(--stf-grad);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.woocommerce ul.products li.product .price-column .price,
.woocommerce ul.products li.product .price-column .price .amount{font-size:21px;}
.woocommerce ul.products li.product .added-to-cart-button a{
	width:41px;
	height:41px;
	border-radius:12px;
	background:var(--stf-grad);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Вкладки товара: пилюли макета вместо серых прямоугольников. */
/* Счётчик количества. Тема кладёт кнопки absolute в коробку 90x36 с
   overflow:hidden и рассчитывает на свою разметку, поэтому «-» и «+» из
   разметки сайта обрезаются. Раскладываем строкой, как в макете. */
.woocommerce div.product .quantity,
.woocommerce div.product .quantity.buttons_added,
.woocommerce table.cart .quantity,
.woocommerce table.cart .quantity.buttons_added{
	display:flex;
	align-items:center;
	width:auto;
	height:55px;
	background:var(--stf-gray);
	border:0;
	border-radius:15px;
	overflow:hidden;
}
.woocommerce div.product .quantity .plusminus,
.woocommerce table.cart .quantity .plusminus{
	position:static;
	width:34px;
	height:55px;
	padding:0;
	border:0;
	background:transparent;
	/* Тема прячет подпись кнопки (text-indent:-9999px) и рисует значок
	   иконочным шрифтом, которого у этой разметки нет — возвращаем «-» и «+». */
	text-indent:0 !important;
	color:var(--stf-navy) !important;
	font-size:18px;
	font-weight:500;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}
.woocommerce div.product .quantity .plusminus:hover,
.woocommerce table.cart .quantity .plusminus:hover{color:var(--stf-blue);}
.woocommerce div.product .quantity input.qty,
.woocommerce table.cart .quantity input.qty{
	width:46px;
	height:55px;
	margin:0;
	padding:0;
	text-indent:0; /* тема ставит 10px, цифры уезжали вправо */
	border:0 !important;
	background:transparent;
	border-radius:0 !important;
	text-align:center;
	color:var(--stf-navy);
	font-size:16px;
	font-weight:500;
	-moz-appearance:textfield;
}
.woocommerce div.product .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity input.qty::-webkit-inner-spin-button,
.woocommerce table.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce table.cart .quantity input.qty::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}
.woocommerce div.product form.cart{display:flex;align-items:center;gap:10px;}
/* Кнопка покупки как в макете: подпись слева, стрелка в светлом квадратике
   справа. Квадратик рисуем псевдоэлементом — разметку кнопки даёт WooCommerce. */
.woocommerce div.product form.cart .button{
	display:inline-flex;
	align-items:center;
	gap:14px;
	height:55px;
	padding:7px 7px 7px 26px;
	/* подпись в одну строку: рядом стоит кнопка оптовиков и место делится */
	white-space:nowrap;
	flex:none;
}
.woocommerce div.product form.cart .single_add_to_cart_button::after{
	content:"";
	width:41px;
	height:41px;
	flex:none;
	border-radius:12px;
	/* корзина из шапки, а не стрелка: кнопка кладёт в корзину, а не ведёт куда-то */
	background:rgba(255,255,255,.22) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") no-repeat center/20px 20px;
	display:flex;
}

/* Галерея товара. Kalium собирает её на flickity: главное фото в
   .main-product-images, миниатюры в .thumbnails. Тема даёт им скругление 32px
   на прозрачном фоне, поэтому фото сливается с фоном страницы. Кладём на
   белые плашки и приводим радиус к 20/15, как у карточек на главной. */
.woocommerce div.product .main-product-images,
.woocommerce div.product .main-product-images .flickity-viewport,
.woocommerce div.product .main-product-images .woocommerce-product-gallery__image{
	border-radius:20px;
	background:#fff;
	/* белый прямоугольник самого снимка иначе торчит из-за скругления */
	overflow:hidden;
}
/* Снимок не должен упираться в края плашки — как в макете, поле 24px. */
.woocommerce div.product .main-product-images{box-shadow:0 12px 40px rgba(15,22,40,.06);}
.woocommerce div.product .main-product-images .woocommerce-product-gallery__image img{
	width:100%;
	height:100%;
	padding:24px;
	/* тема режет снимок по краям: .image-placeholder img{object-fit:cover!important} */
	object-fit:contain !important;
}
.woocommerce div.product .thumbnails .flickity-viewport{border-radius:0;}
/* Миниатюры: плашка на ссылке, а не на слайде — у слайда есть боковой отступ
   каретки (padding 0 10px), и белый фон на нём склеивал квадраты в полосу. */
.woocommerce div.product .thumbnails .woocommerce-product-gallery__image{background:transparent;}
.woocommerce div.product .thumbnails .woocommerce-product-gallery__image > a{
	display:block;
	border-radius:15px;
	/* тема держит для всех ссылок background-color:inherit !important,
	   поэтому здесь без !important фон не встанет */
	background-color:#fff !important;
	border:2px solid transparent;
	box-shadow:0 6px 18px rgba(15,22,40,.05);
	overflow:hidden;
}
.woocommerce div.product .thumbnails .woocommerce-product-gallery__image img{padding:8px;object-fit:contain !important;}
.woocommerce div.product .thumbnails .is-nav-selected > a{border-color:var(--stf-blue);}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
	border-radius:15px !important;
	background:var(--stf-gray) !important;
	border:0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--stf-navy);font-weight:500;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--stf-grad) !important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff !important;}

/* Панель без заливки: текст описания идёт прямо на белом. */
.woocommerce div.product .woocommerce-tabs .panel{
	background:transparent;
	padding:30px 0;
}

/* Описание и характеристики товара: тёмный текст макета вместо серого. */
.woocommerce div.product .summary,
.woocommerce div.product .summary p,
.woocommerce div.product .summary li,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{color:var(--stf-navy);}

/* -------------------------------------------------------------------------
   Корзина и оформление заказа
   ------------------------------------------------------------------------- */

.woocommerce table.shop_table{
	border-radius:20px;
	border:1px solid rgba(15,22,40,.08);
	overflow:hidden;
}
.woocommerce table.shop_table th{background:var(--stf-gray);color:var(--stf-navy);font-weight:500;}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
	background:var(--stf-gray);
	border-radius:20px;
	padding:20px;
}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message{
	border-top-color:var(--stf-blue);
	border-radius:15px;
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before{color:var(--stf-blue);}

/* -------------------------------------------------------------------------
   Мобильный: крупные заголовки макета не влезают в узкий экран
   ------------------------------------------------------------------------- */

@media (max-width:767px){
	/* Шапка плавает поверх страницы (position:fixed, низ на 113px), а отступ
	   под неё задан только в десктопной ветке темы: на телефоне заголовок и
	   фото товара уезжают под капсулу. Отодвигаем контент. */
	/* Отступ один на все страницы (у обычных страниц, 404 и поиска нет
	   main.site-main, и заголовок уходил под капсулу). Корзина, оформление
	   и кабинет задают свой в stf-account.css и stf-mobile.css. */
	#main-wrapper{padding-top:100px;}
	.content-area main.site-main,
	.woocommerce .content-area main.site-main{margin-top:0;}

	.post-body .entry-header .entry-title,
	.single-post .post .entry-header .post-title,
	.woocommerce .woocommerce-shop-header--title .page-title,
	.woocommerce-products-header__title,
	.woocommerce div.product .product_title,
	.section-title .page-heading__title,
	.archive-title{font-size:28px;line-height:34px;}
	.post-content h2{font-size:24px;line-height:30px;}
	.post-content h3{font-size:20px;line-height:26px;}
}

/* -------------------------------------------------------------------------
   Карточка товара: блоки синей главной

   Разметку добавляет mu-plugin stf-product-page.php. Кнопки, вкладки,
   счётчик, галерея и цена оформлены выше — здесь только новые блоки.
   ------------------------------------------------------------------------- */

/* Метка наличия над фото: пилюля на псевдоэлементе, текст и цвет точки — по классу body. */
.woocommerce div.product .single-product-images,.woocommerce div.product .single-product-images > .kalium-woocommerce-product-gallery{position:relative;}
/* Метка на самой галерее, а не на колонке: на компьютере галерея закреплена и едет отдельно от колонки. */
.woocommerce div.product .single-product-images > .kalium-woocommerce-product-gallery::before{
	content:"Есть в наличии";
	position:absolute;
	left:20px;
	top:20px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	height:38px;
	padding:0 18px 0 36px;
	background:#fff;
	border-radius:999px;
	box-shadow:0 6px 20px rgba(15,22,40,.06);
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-weight:500;
	color:var(--stf-navy);
	pointer-events:none;
}
.woocommerce div.product .single-product-images > .kalium-woocommerce-product-gallery::after{
	content:"";
	position:absolute;
	left:38px;
	top:35px;
	z-index:3;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#28A35A;
	pointer-events:none;
}
.stf-stock-out.woocommerce div.product .single-product-images > .kalium-woocommerce-product-gallery::before{content:"Нет в наличии";}
.stf-stock-out.woocommerce div.product .single-product-images > .kalium-woocommerce-product-gallery::after{background:#E5484D;}
.stf-instock--no{color:#C0353A;-webkit-text-fill-color:#C0353A;}
.stf-instock--no::before{background:#E5484D;}
.woocommerce div.product .summary p.stock{display:none;} /* стандартную строку наличия не дублируем */

/* Характеристики — спецификация в две колонки: подпись приглушённая,
   значение чёткое, между ними точечная отбивка (как в мокапе). */
.stf-specs{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;margin:22px 0 0;}
.stf-spec{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid rgba(15,22,40,.08);font-size:15px;line-height:20px;}
.stf-spec span{color:var(--stf-muted,#6B7280);white-space:nowrap;}
.stf-spec::before{content:"";order:2;flex:1;border-bottom:1px dotted rgba(15,22,40,.22);transform:translateY(-4px);min-width:16px;}
.stf-spec b{order:3;font-weight:500;color:var(--stf-navy);text-align:right;white-space:nowrap;}
.stf-specs--long .stf-spec b{white-space:normal;max-width:70%;}
.stf-specs--long{grid-template-columns:1fr;max-width:520px;}
@media (max-width:640px){.stf-specs{grid-template-columns:1fr;}}

/* Наличие — в одну строку с ценой. */
.woocommerce div.product .summary p.price{display:flex;align-items:center;gap:14px;}
.stf-instock{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:14px;
	color:#1E7F45;
	/* градиент-текст у p.price не должен красить наличие */
	-webkit-text-fill-color:#1E7F45;
	background:none;
}
.stf-instock::before{content:"";width:8px;height:8px;border-radius:50%;background:#28A35A;}

/* Кнопка оптовиков: фирменная синяя action-кнопка, как остальные действия. */
.stf-wholesale{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:55px;
	padding:0 26px;
	border-radius:15px;
	/* тема держит background-color:inherit !important для всех ссылок */
	background-color:var(--stf-blue) !important;
	background-image:var(--stf-grad) !important;
	border:0;
	color:#fff !important;
	font-size:16px;
	font-weight:500;
	white-space:nowrap;
	flex:none;
	transition:transform .18s ease,box-shadow .25s ease,filter .25s ease;
}
.stf-wholesale:hover{
	color:#fff !important;
	transform:translateY(-2px);
	filter:brightness(1.06);
	box-shadow:0 8px 18px rgba(18,112,181,.28);
}
/* тема переопределяет display у ссылок в форме — подпись уезжала вверх */
.woocommerce div.product form.cart .stf-wholesale{display:inline-flex !important;justify-content:center;line-height:1;}

/* Оптовая форма из карточки товара: та же CF7-форма и визуальная система,
   что на главной, но в доступном модальном окне. */
body.stf-wholesale-modal-open{overflow:hidden;}
.stfm .stf-wholesale-contact-modal{z-index:100000;}
.stfm .stf-wholesale-contact-modal .modal__overlay{border:0;padding:0;cursor:pointer;}
.stfm .stf-wholesale-contact-modal__dialog{max-width:680px;overscroll-behavior:contain;}
.stfm .stf-wholesale-contact-modal .form-card{padding:0;border-radius:0;display:block;}
.stfm .stf-wholesale-contact-modal .wpcf7{width:100%;}
.stfm .stf-wholesale-contact-modal .wpcf7-response-output{margin:0;padding:12px 16px;border-radius:12px;}
.stfm .stf-wholesale-contact-modal .modal__close{border:0;padding:0;color:var(--navy);font-size:28px;line-height:1;cursor:pointer;}
.stfm .stf-wholesale-contact-modal .modal__close span{display:block;transform:translateY(-1px);}
@media (max-width:640px){
	.stfm .stf-wholesale-contact-modal__dialog{max-height:calc(100dvh - 76px);}
	.stfm .stf-wholesale-contact-modal .form-card .tarea{min-height:88px;}
}

/* Товар без цены: «Оптовые продажи» стоит на месте цены, кнопка оптовиков — главная, как «В корзину». */
.woocommerce div.product .summary .price .stf-wholesale-price{font-size:21px;}
.stf-wholesale-product.woocommerce div.product form.cart{flex-wrap:wrap;}
.stf-wholesale-product.woocommerce div.product form.cart .quantity{display:none;}
.stf-wholesale-product .stf-color-swatches-wrapper{flex:0 0 100%;display:flex;align-items:center;gap:14px;margin:0 0 6px;}
.stf-wholesale-product .stf-color-swatches-wrapper .stf-color-label{margin:0;font-size:15px;font-weight:500;color:var(--stf-navy);white-space:nowrap;}
.stf-wholesale-product .stf-color-swatches{gap:12px;}
.woocommerce div.product form.cart .stf-wholesale--primary{
	gap:14px;
	padding:7px 7px 7px 26px;
	background:var(--stf-grad) !important;
	border:0;
	color:#fff;
}
.woocommerce div.product form.cart .stf-wholesale--primary:hover{color:#fff;filter:brightness(1.05);}
.woocommerce div.product form.cart .stf-wholesale--primary::after{
	content:"→";
	position:static; /* тема даёт a::after position:absolute */
	width:41px;
	height:41px;
	flex:none;
	border-radius:12px;
	background:rgba(255,255,255,.22);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:17px;
}

/* Что мы делаем сами: три строки о производстве и доставке. */
.stf-perks{margin-top:28px;display:grid;gap:14px;}
.stf-perks div{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--stf-navy);}
.stf-perks i{
	width:34px;
	height:34px;
	border-radius:10px;
	background:rgba(18,112,181,.10);
	display:flex;
	align-items:center;
	justify-content:center;
	font-style:normal;
	color:var(--stf-blue);
	font-size:15px;
	flex:none;
	flex:none;
}

/* Цветная подложка секции — тот же приём и те же картинки, что на главной
   (.reasons__bg / .faq__bg, прозрачность .37). Вылет только вверх, в пустой
   отступ: вниз выпускать нельзя, подложка легла бы поверх следующего блока.
   Края растворяем маской, иначе картинка обрывается прямой линией. */
.stf-tint{position:relative;}
.stf-tint > img.stf-tint__bg{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:-60px;
	width:100vw;
	height:calc(100% + 60px);
	object-fit:cover;
	opacity:.37;
	z-index:0;
	pointer-events:none;
	-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
	mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
}
.stf-tint > *:not(.stf-tint__bg){position:relative;z-index:1;}
/* Подложка шире контента, обрезаем вылет без появления прокрутки. */
html,body{overflow-x:clip;}

/* Заголовки блоков карточки. */
.woocommerce div.product h2.stf-h2{
	font-size:32px;
	line-height:40px;
	font-weight:500;
	letter-spacing:-.5px;
	color:var(--stf-navy);
	margin:64px 0 24px;
}

/* Свойства изделия карточками. */
.stf-feats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
	margin-top:64px;
}
.stf-feat{
	background:#fff;
	border-radius:20px;
	padding:28px 24px;
	box-shadow:0 10px 30px rgba(15,22,40,.05);
	transition:transform var(--stf-motion-card) var(--stf-ease-out),border-color var(--stf-motion-card) ease,box-shadow var(--stf-motion-card) ease;
}
.stf-feat__ico{display:block;width:65px;height:65px;margin-bottom:20px;}
.stf-perks i img{width:21px;height:21px;display:block;}
.woocommerce div.product .stf-feat h3{font-size:19px;line-height:25px;font-weight:500;margin:0 0 10px;}
.stf-feat p{margin:0;font-size:15px;line-height:22px;color:#4B5563;}

/* Инструкция: вертикальное видео слева, полный исходный текст и схемы справа. */
.stf-instruction-focus{
	display:grid;
	grid-template-columns:minmax(250px,310px) minmax(0,1fr);
	gap:40px;
	align-items:start;
}
.stf-instruction-focus__video{display:flex;justify-content:center;}
.stf-instruction-focus__video-frame{
	width:100%;
	max-width:300px;
	overflow:hidden;
	border-radius:20px;
	background:#fff;
	box-shadow:0 16px 34px rgba(15,22,40,.12);
}
.stf-instruction-focus__video-frame iframe{
	display:block;
	width:100%;
	height:auto;
	border:0;
	aspect-ratio:9/16; /* ролик ВК 1080x1920; при 413/803 плеер добивал разницу чёрными полосами */
}
.woocommerce div.product .woocommerce-tabs .panel .stf-instruction-focus__body h3{
	margin:0 0 20px;
	font-size:24px;
	line-height:30px;
	font-weight:500;
	font-style:italic;
	color:var(--stf-navy);
}
.stf-instruction-focus__steps{display:grid;gap:12px;}
.stf-instruction-item{
	display:grid;
	grid-template-columns:44px minmax(0,1fr) 150px;
	gap:16px;
	align-items:center;
	min-height:96px;
	padding:12px;
	border-radius:15px;
	background:var(--stf-gray);
}
.stf-instruction-item.is-text-only{grid-template-columns:44px minmax(0,1fr);}
.stf-instruction-item__index{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:12px;
	background:var(--stf-grad);
	color:#fff;
	font-size:15px;
	font-weight:500;
}
.woocommerce div.product .woocommerce-tabs .panel .stf-instruction-item__text p{
	margin:0;
	font-size:16px;
	line-height:24px;
}
.stf-instruction-item__media{
	width:150px;
	aspect-ratio:700/471;
	overflow:hidden;
	border-radius:12px;
	background:#fff;
	padding:6px;
}
.stf-instruction-item__media a,
.stf-instruction-item__media img{
	display:block;
	width:100%;
	height:100%;
}
.stf-instruction-item__media img{object-fit:contain;}

/* Запасная раскладка для товаров, у которых в инструкции нет видео. */
.stf-steps{display:grid;gap:20px;}
.stf-step{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:center;background:var(--stf-gray);border-radius:20px;padding:20px;}
.stf-step__ph{background:#fff;border-radius:15px;display:flex;align-items:center;justify-content:center;padding:14px;min-height:180px;}
.stf-step__ph p{margin:0;}
.stf-step__ph img{max-width:100%;height:auto;}
.stf-step__ph iframe{width:100%;max-width:100%;height:auto;aspect-ratio:9/16; /* ролик ВК 1080x1920; при 413/803 плеер добивал разницу чёрными полосами */border-radius:12px;}
.woocommerce div.product .woocommerce-tabs .panel .stf-step__txt p{margin:0;font-size:16px;line-height:24px;}

/* Отзывы с площадок. */
.stf-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.stf-reviews article{background:var(--stf-gray);border-radius:20px;padding:24px;}
.stf-reviews header{
	display:flex;
	align-items:center;
	gap:14px;
	padding-bottom:16px;
	border-bottom:1px solid rgba(15,22,40,.08);
}
.stf-ava{
	/* flex:none — иначе длинное имя рядом сжимает кружок в овал */
	width:44px;
	height:44px;
	flex:none;
	border-radius:50%;
	background:linear-gradient(135deg,#1270B5 0%,#4BA3DE 100%);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	font-weight:500;
}
.stf-reviews b{display:block;font-weight:500;}
.stf-reviews small{color:#6B7280;}
.stf-stars{margin-left:auto;color:#F5A623;letter-spacing:2px;}
.woocommerce div.product .stf-reviews p{margin:16px 0 0;font-size:15px;line-height:22px;}

/* Каталог собственных разработок. */
.stf-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.stf-card{
	display:block;
	background:#fff;
	border-radius:20px;
	padding:16px;
	box-shadow:0 10px 30px rgba(15,22,40,.05);
	color:var(--stf-navy);
	transition:transform var(--stf-motion-card) var(--stf-ease-out),border-color var(--stf-motion-card) ease,box-shadow var(--stf-motion-card) ease;
}
.stf-card:hover{color:var(--stf-navy);}
.stf-card__ph{
	background:#fff;
	border-radius:15px;
	aspect-ratio:1/1;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.stf-card__ph img{max-width:100%;max-height:100%;object-fit:contain;transition:transform var(--stf-motion-media) var(--stf-ease-out);}
.woocommerce div.product .stf-card h4{
	font-size:17px;
	line-height:23px;
	font-weight:500;
	margin:16px 0 8px;
	color:var(--stf-navy);
}
.stf-card__p{color:var(--stf-blue);font-size:16px;font-weight:500;}
.stf-card__p .amount{color:var(--stf-blue);}
.stf-card__more{display:flex;align-items:center;gap:10px;margin-top:18px;}
.stf-card__more span{
	display:inline-flex;
	align-items:center;
	height:44px;
	padding:0 22px;
	border-radius:15px;
	background:var(--stf-grad);
	color:#fff;
	font-size:15px;
	font-weight:500;
}
.stf-card__more em{
	width:44px;
	height:44px;
	border-radius:15px;
	border:1px solid rgba(15,22,40,.12);
	display:flex;
	align-items:center;
	justify-content:center;
	font-style:normal;
	transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.stf-card:hover .stf-card__more em{background:var(--stf-grad);border-color:transparent;color:#fff;}

@media (max-width:1024px){
	.stf-feats,
	.stf-cards{grid-template-columns:repeat(2,1fr);}
	.stf-reviews{grid-template-columns:1fr;}
}
@media (max-width:700px){
	.stf-feats,
	.stf-cards{grid-template-columns:1fr;}
	.stf-instruction-focus{grid-template-columns:1fr;gap:30px;}
	.stf-instruction-focus__video-frame{max-width:230px;}
	.woocommerce div.product .woocommerce-tabs .panel .stf-instruction-focus__body h3{text-align:center;font-size:21px;line-height:26px;}
	.stf-instruction-item,
	.stf-instruction-item.is-text-only{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px;}
	.stf-instruction-item__index{width:40px;height:40px;}
	.stf-instruction-item__media{grid-column:1/-1;width:100%;aspect-ratio:700/471;}
	.stf-step{grid-template-columns:1fr;}
	.woocommerce div.product h2.stf-h2{font-size:24px;line-height:30px;margin:40px 0 20px;}
}

/* Рисунки инструкции: курсор-лупа и оверлей увеличения. */
.stf-step__ph a.stf-zoom,
.stf-instruction-item__media a.stf-zoom{display:block;cursor:zoom-in;}
.stf-zoombox{position:fixed;inset:0;z-index:100000;background:rgba(15,22,40,.86);display:flex;align-items:center;justify-content:center;padding:40px;cursor:zoom-out;}
.stf-zoombox[hidden]{display:none;}
.stf-zoombox img{max-width:100%;max-height:100%;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);}

/* Хлебные крошки и пилюля категории над карточкой — как в мокапе. */
.stf-crumbs{padding:26px 0 18px;font-size:14px;color:var(--stf-muted,#6B7280);}
.stf-crumbs a{color:inherit !important;}
.stf-crumbs a:hover{color:var(--stf-blue) !important;}
.woocommerce div.product .summary .stf-pill{
	display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px;margin-bottom:22px;
	background:#fff !important;border-radius:999px;box-shadow:0 6px 20px rgba(15,22,40,.06);
	font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--stf-navy) !important;
}
.woocommerce div.product .summary .stf-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--stf-blue);}

/* Корзина: счётчик ниже, чем на карточке; цена строки — синим, как везде, а не зелёным из темы. */
.woocommerce table.cart .quantity,
.woocommerce table.cart .quantity.buttons_added{height:44px;margin:0 auto;}
.woocommerce table.cart .quantity .plusminus,
.woocommerce table.cart .quantity input.qty{height:44px;}
.woocommerce table.cart td.product-subtotal,
.woocommerce table.cart td.product-subtotal .amount{color:var(--stf-blue) !important;font-weight:500;}

/* -------------------------------------------------------------------------
   Страница 404 и результаты поиска: палитра и компоненты главной вместо
   бирюзы Kalium. Разметка и тексты темы остаются, меняется только вид.
   ------------------------------------------------------------------------- */

/* 404: бирюзовый квадрат убран, номер — крупный градиентный текст,
   подпись — заголовок страницы, ссылка «главную» — кнопка-пилюля. */
.error-holder{
	background:transparent;
	margin:40px 0 80px;
	padding:40px 24px;
	text-align:center;
}
.error-holder .box{
	background:transparent;
	width:auto;
	height:auto;
	position:static;
}
.error-holder .box .error-type{
	position:static;
	text-align:center;
	font-size:120px;
	line-height:1;
	letter-spacing:-4px;
	font-weight:500;
	background:var(--stf-grad);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
	margin:0 0 16px;
}
.error-holder .flashing-num-1{animation:none;}
.error-holder .error-text{
	font-size:44px;
	line-height:52px;
	letter-spacing:-.5px;
	font-weight:500;
	text-transform:none;
	color:var(--stf-navy);
	margin:0 0 20px;
}
.error-holder p{
	font-size:16px;
	line-height:24px;
	color:var(--stf-navy);
	margin:0;
}
.error-holder p a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:46px;
	padding:0 26px;
	margin:20px 0 0;
	border-radius:15px;
	background:var(--stf-grad);
	color:#fff !important;
	font-size:16px;
	font-weight:500;
	text-decoration:none !important;
	transition:.15s;
}
.error-holder p a:hover{filter:brightness(1.05);}
.error-holder p a::after{display:none !important;}
@media (max-width:767px){
	.error-holder{margin:16px 0 48px;padding:24px 0;}
	.error-holder .box .error-type{font-size:88px;}
	.error-holder .error-text{font-size:30px;line-height:36px;}
}

/* Поиск: заголовок как на остальных страницах, результат — карточка
   в серой плашке, кнопки «В корзину» и «Далее» — пилюли макета. */
body.search .section-title{padding:24px 0 8px;}
body.search .section-title h1{
	font-size:44px;
	line-height:52px;
	font-weight:500;
	letter-spacing:-.5px;
	color:var(--stf-navy);
	margin:0 0 12px;
}
body.search .section-title h1 a{color:var(--stf-blue);}
body.search .section-title p{color:var(--stf-navy);font-size:16px;line-height:24px;margin:0;}
.search-results-holder{padding:16px 0 40px;}
.search-results-holder .result-box{
	display:flex;
	align-items:center;
	gap:24px;
	background:var(--stf-gray);
	border-radius:20px;
	padding:20px;
	margin-bottom:16px;
}
.search-results-holder .result-box .result-image{width:150px;flex:none;}
.search-results-holder .result-box .result-image a{margin:0;}
.search-results-holder .result-box .result-image .image-placeholder,
.search-results-holder .result-box .result-image .image-placeholder>img{border-radius:15px;}
.search-results-holder .result-box .result-image+.result-info{padding-left:0;}
.search-results-holder .result-box .result-info{display:block;min-width:0;}
.search-results-holder .result-box .result-info h3{margin:0 0 8px;}
.search-results-holder .result-box .result-info h3,
.search-results-holder .result-box .result-info h3 a{
	font-size:21px;
	line-height:25px;
	font-weight:500;
	color:var(--stf-navy);
}
.search-results-holder .result-box .result-info h3 a:hover{color:var(--stf-blue);}
.search-results-holder .result-box .result-info p{color:var(--stf-navy);font-size:15px;line-height:22px;margin:0 0 16px;}
.search-results-holder .result-box .result-info .button,
.search-results-holder .result-box .result-info .post-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	height:44px;
	padding:0 22px;
	margin:0 8px 0 0;
	border-radius:15px;
	font-size:15px;
	font-weight:500;
	line-height:1;
	text-decoration:none !important;
	transition:.15s;
}
.search-results-holder .result-box .result-info .button{
	background:var(--stf-grad) !important;
	color:#fff !important;
	border:0 !important;
}
.search-results-holder .result-box .result-info .button:hover{filter:brightness(1.05);}
.search-results-holder .result-box .result-info .post-link{
	border:1px solid rgba(15,22,40,.12);
	background:#fff;
	color:var(--stf-navy) !important;
}
.search-results-holder .result-box .result-info .post-link:hover{border-color:var(--stf-blue);color:var(--stf-blue) !important;}
.search-results-holder .result-box .result-info .post-link i{font-size:10px;}
.search-results-holder .pagination-container{margin-top:24px;}
@media (max-width:767px){
	.search-results-holder .result-box{flex-direction:column;align-items:flex-start;padding:16px;}
	.search-results-holder .result-box .result-image{width:100%;text-align:left;margin:0;}
	.search-results-holder .result-box .result-image a{max-width:150px;margin:0;}
	body.search .section-title h1{font-size:30px;line-height:36px;}
}

/* -------------------------------------------------------------------------
   Каталог: промежуток между карточками и «Подробнее» как на главной

   Isotope темы ставит li absolute и считает колонку по ширине li, поэтому
   промежуток нельзя дать margin: плашка рисуется псевдоэлементом на 20px уже
   самого li, а содержимое отступает справа на те же 20.
   ------------------------------------------------------------------------- */

.woocommerce ul.products li.product{
	background:transparent;
	padding:10px 30px 20px 10px;
	overflow:visible;
	display:flex;
	flex-direction:column;
}
.woocommerce ul.products li.product::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:20px;
	bottom:0;
	border-radius:20px;
	background:var(--stf-gray);
	border:1px solid transparent;
	box-shadow:0 10px 30px 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;
	z-index:0;
}
.woocommerce ul.products li.product > *{position:relative;z-index:1;}
.woocommerce ul.products li.product:hover::before{border-color:var(--stf-card-border-hover);box-shadow:var(--stf-card-shadow-hover);}
.woocommerce ul.products li.product .price-column .price{text-align:left;} /* на телефоне тема центрирует цену */
.woocommerce ul.products li.product .added-to-cart-button{position:absolute;}
.woocommerce ul.products li.product a.stf-loop-more{
	display:flex; /* тема ставит ссылкам inline-block, и пилюля со стрелкой распадались в столбик */
	margin:auto 10px 0;
	padding-top:18px;
	color:var(--stf-navy) !important;
	text-decoration:none !important;
}
.woocommerce ul.products li.product .stf-loop-more::after{display:none !important;}
.woocommerce ul.products li.product:hover .stf-loop-more em{background:var(--stf-grad);border-color:transparent;color:#fff;}
@media (max-width:767px){
	/* Одна колонка: li растянут на всё окно (ul с полями -15), плашка
	   отступает от краёв экрана на 15, как контейнер. */
	.woocommerce ul.products.columns-1 li.product,
	.woocommerce ul.products li.product.columns-xs-1{padding:10px 25px 20px;}
	.woocommerce ul.products.columns-1 li.product::before,
	.woocommerce ul.products li.product.columns-xs-1::before{left:15px;right:15px;}
	.woocommerce ul.products li.product .stf-loop-more{margin-left:10px;margin-right:10px;}
}

/* Каталог: подпись вместо цены у оптовых товаров, как на главной. */
.stf-loop-wholesale{display:block;font-size:14px;line-height:17px;font-weight:500;color:rgba(15,22,40,.55);}

/* Окно «Оптовые продажи» на странице товара. Разметка и стили общие с формой главной, но здесь
   не действует синяя подмена красных переменных, а общий стиль кнопок скруглял подложку до круга. */
.stf-wholesale-contact-modal{--red1:#1270B5;--red2:#4BA3DE;--reddark:#0D5A92;--grad:linear-gradient(90deg,#1270b5 0%,#4ba3de 100%);--grad-icon:linear-gradient(135deg,#1270B5 0%,#4BA3DE 100%);}
.stfm .stf-wholesale-contact-modal .modal__overlay{inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0 !important;transform:none !important;box-shadow:none !important;}
.stfm .stf-wholesale-contact-modal .modal__dialog{padding:28px 32px 26px;scrollbar-width:thin;scrollbar-color:rgba(18,112,181,.35) transparent;}
.stfm .stf-wholesale-contact-modal .modal__head{margin-bottom:14px;}
.stfm .stf-wholesale-contact-modal .modal__work{display:block;box-sizing:border-box;width:100%;}
/* Окно поверх шапки сайта: отступ под шапку не нужен, окну достаётся почти весь экран. */
.stfm .stf-wholesale-contact-modal{z-index:100000;padding-top:24px;}
@media (max-width:640px){.stfm .stf-wholesale-contact-modal .modal__dialog{padding:20px 16px;}}

/* Цвета в ряду со счётчиком и кнопками: не сжимать в столбик, по центру высоты ряда */
.woocommerce div.product form.variations_form .stf-color-swatches-wrapper{flex:0 0 auto;align-self:center;margin-bottom:0}
.woocommerce div.product form.variations_form .stf-color-swatches{flex-wrap:nowrap;margin-bottom:0}

/* Компьютер: колонка описания на 7/12 (фото 5/12). custom-skin.css и встроенный стиль держали её на 50% с !important, справа пустовало ~100px и ряд кнопок не влезал. Ниже 993px фото 50%, там не трогаем. */
@media (min-width:993px){
body.single-product .product.product-images-columns-medium .summary.entry-summary{flex:0 0 58.3333% !important;max-width:58.3333% !important;width:58.3333% !important}
body.single-product .product .summary .stf-specs--long{max-width:none}
}

/* Компьютер: колонка фото тянется на высоту описания, галерея закреплена под шапкой (низ шапки 142px + 20). Описание прокручивается вдоль неё, в конце низ миниатюр встаёт на линию низа информации. */
@media (min-width:993px){
body.single-product .product .single-product-images{align-self:stretch}
body.single-product .product .single-product-images > .kalium-woocommerce-product-gallery{position:sticky;top:162px}
body.single-product .product .single-product-images .thumbnails{margin-bottom:0}
}

/* Когда есть кружки цветов, штатная таблица выбора WooCommerce не видна (0px), но в ряду формы съедала 15px отступа. Select внутри неё работает и при display:none. */
.woocommerce div.product form.variations_form:has(.stf-color-swatches-wrapper) table.variations{display:none}

/* Галерея товара. Кнопка увеличения была квадратом 15px, повёрнутым на 90° и прижатым в левый верхний угол:
   скругление карточки срезало его в «каплю», и он лежал под меткой наличия. Теперь кружок в правом верхнем углу. */
html body:not(#stf-buttons-local):not(#stf-buttons-legacy) .single-product-images .product-gallery-lightbox-trigger{
	top:16px !important;
	right:16px !important;
	left:auto !important;
	bottom:auto !important;
	width:44px !important;
	height:44px !important;
	min-width:44px !important;
	min-height:44px !important;
	padding:0 !important;
	border-radius:50% !important;
	transform:none !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
}
/* Стрелки: общее правило наведения ставило translateY(-2px) и сбивало центрирование карусели (стрелка прыгала вниз на ~20px). */
html body:not(#stf-buttons-local):not(#stf-buttons-legacy) .single-product-images .flickity-prev-next-button{
	top:50% !important;
	transform:translateY(-50%) !important;
}
html body:not(#stf-buttons-local):not(#stf-buttons-legacy) .single-product-images .flickity-prev-next-button:hover{
	transform:translateY(calc(-50% - 2px)) !important;
}

/* Видео в описании товара: фрейм вставлен с жёсткими 853x480, тянем на ширину блока с той же пропорцией 16:9. */
.single-product .woocommerce-Tabs-panel--description :is(iframe[src*="vk.com/video"],iframe[src*="vkvideo"],iframe[src*="youtube"],iframe[src*="youtu.be"],iframe[src*="rutube"]){display:block;width:100% !important;height:auto !important;aspect-ratio:16/9;border:0;border-radius:var(--stf-radius-card,20px)}

/* -------------------------------------------------------------------------
   Документы (Реквизиты, Публичная оферта): разметка .stf-doc в тексте страницы.
   Белые карточки на сером фоне, номера разделов синими кружками, строки реквизитов -
   общий компонент .stf-specs (как характеристики товара).
   ------------------------------------------------------------------------- */
.post-formatting .stf-doc{max-width:none;margin:0;color:var(--stf-navy);}
.post-formatting .stf-doc :where(p){margin:0;} /* :where - без веса, чтобы отступы вступления и пунктов ниже не перебивались */
.post-formatting .stf-doc__eyebrow{margin:0 0 10px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--stf-blue,#1270b5);}
.post-formatting .stf-doc__lead{margin:0 0 24px;font-size:17px;line-height:26px;color:var(--stf-color-copy,rgba(15,22,40,.72));}
.post-formatting .stf-doc__card{box-sizing:border-box;margin:0 0 16px;padding:28px 32px;background:#fff;border-radius:var(--stf-radius-card,20px);box-shadow:var(--stf-shadow-card,0 10px 30px rgba(15,22,40,.06));}
.post-formatting .stf-doc__h{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:21px;line-height:26px;font-weight:600;font-style:normal;color:var(--stf-navy);}
.post-formatting .stf-doc__num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:rgba(18,112,181,.10);color:var(--stf-blue,#1270b5);font-size:14px;line-height:1;font-weight:600;font-style:normal;}
.post-formatting .stf-doc__item{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:8px;margin:0 0 12px;font-size:16px;line-height:25px;color:var(--stf-color-copy,rgba(15,22,40,.72));}
.post-formatting .stf-doc__item:last-child{margin-bottom:0;}
.post-formatting .stf-doc__pn{font-weight:600;color:var(--stf-blue,#1270b5);font-variant-numeric:tabular-nums;}
.post-formatting .stf-doc a{color:var(--stf-blue,#1270b5);text-decoration:none;}
.post-formatting .stf-doc a:hover{text-decoration:underline;}
.post-formatting .stf-doc__note{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--stf-muted,#6B7280);}
.post-formatting .stf-doc__section{scroll-margin-top:170px;}

/* Реквизиты: две карточки рядом, строки на всю ширину карточки. */
.post-formatting .stf-doc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.post-formatting .stf-doc__grid .stf-doc__card{margin:0;}
.post-formatting .stf-doc--req{max-width:none;}
.post-formatting .stf-doc__specs{margin:0;max-width:none;}
.post-formatting .stf-doc__specs .stf-spec{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:16px;align-items:baseline;font-size:16px;line-height:22px;padding:11px 0;}
.post-formatting .stf-doc__specs .stf-spec::before{content:none;}
.post-formatting .stf-doc__specs .stf-spec:last-child{border-bottom:0;}
.post-formatting .stf-doc__specs .stf-spec span{white-space:normal;}
.post-formatting .stf-doc__specs .stf-spec b{max-width:none;text-align:left;white-space:normal;}

/* Оглавление оферты. */
.post-formatting .stf-doc__toc-title{margin:0 0 14px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--stf-muted,#6B7280);}
.post-formatting .stf-doc__toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;margin:0;padding:0;list-style:none;}
.post-formatting .stf-doc__toc li{margin:0;padding:0;}
.post-formatting .stf-doc__toc li::before{content:none;}
.post-formatting .stf-doc__toc a{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:15px;line-height:20px;color:var(--stf-navy);}
.post-formatting .stf-doc__toc a:hover{color:var(--stf-blue,#1270b5);text-decoration:none;}
.post-formatting .stf-doc__toc .stf-doc__num{flex-basis:28px;width:28px;height:28px;font-size:13px;}

@media (max-width:767px){
	.post-formatting .stf-doc__card{padding:20px 16px;}
	.post-formatting .stf-doc__grid{grid-template-columns:1fr;}
	.post-formatting .stf-doc__toc ol{grid-template-columns:1fr;}
	.post-formatting .stf-doc__h{font-size:18px;line-height:23px;}
	.post-formatting .stf-doc__item{grid-template-columns:40px minmax(0,1fr);font-size:15px;line-height:23px;}
	.post-formatting .stf-doc__lead{font-size:16px;line-height:24px;}
	/* На узком экране длинные значения реквизитов - под подписью. */
	.post-formatting .stf-doc__specs .stf-spec{grid-template-columns:1fr;row-gap:2px;}
	.post-formatting .stf-doc__specs .stf-spec::before{content:none;}
	.post-formatting .stf-doc__specs .stf-spec b{max-width:none;text-align:left;white-space:normal;}
	.post-formatting .stf-doc__specs .stf-spec span{white-space:normal;}
}

/* Галочки, которым сайт вернул родной вид браузера (appearance:auto, accent-color). Тема рисует свою отметку
   заливкой ::before (absolute, inset:3px) и показывает её при :checked; без position:relative у поля она
   растягивалась на ближайший крупный блок - «Запомнить меня» закрашивал форму входа бирюзовым. */
.woocommerce-account .woocommerce .woocommerce-form__label-for-checkbox input[type="checkbox"]::before,
.stf-acc .mercury-refund-section input[type="checkbox"]::before,
.mm-pdn-consent-row input[type="checkbox"]::before,
.woocommerce-checkout .stfco .form-row label.checkbox input[type="checkbox"]::before{content:none !important;display:none !important;}

/* Превью записей (блог): Kalium при наведении накрывал картинку бирюзовой плашкой со значком глаза - не в стиле сайта. */
.post-thumbnail .post-hover{display:none !important;}

/* После выбора цвета WooCommerce раскрывает блок варианта (описание/цена/наличие). У товаров с одной ценой он пустой,
   но с полями 20+30px и сдвигал счётчик и кнопки вниз. Прячем только пустой: текст наличия и т.п. останется видимым. */
.woocommerce div.product form.variations_form .woocommerce-variation.single_variation:not(:has(> :not(:empty))){display:none !important;}

/* Оформление: способы оплаты ЮKassa значками (stf-yookassa-checkout.php). */
.stf-pay-icons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;}
.stf-pay-icons img{display:block;width:32px;height:32px;margin:0;border-radius:50%;}

/* Оформление, компьютер: «Оплата через ЮKassa» и значки способов оплаты в одну строку (название слева, значки справа). */
@media (min-width:1100px){
body.woocommerce-checkout #payment ul.payment_methods li.payment_method_yookassa_epl{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;}
body.woocommerce-checkout #payment ul.payment_methods li.payment_method_yookassa_epl > label{flex:0 0 auto;width:auto;margin:0;}
body.woocommerce-checkout #payment ul.payment_methods li.payment_method_yookassa_epl > .payment_box{flex:0 0 auto;margin:0 0 0 auto;padding:0;}
.stf-pay-icons{gap:6px;}
}