/* Объединено 2026-08-30: valentin.css + vilord.css + icons-replacement.css (порядок сохранён). */

/*
В этом файле находятся стили для Cтраниц сайта (для больших экранов и кода для обоих версий) www.adenium-doma.ru
2025_11_29
*/

/* раскрывающееся меню на главной странице */
/* @import url(ad-css/left-expandable-menu.css); */

/* категории товаров в магазине (8 картинок с ссылками) */
/* @import url(ad-css/shop-top-categories.css); */

/* оформление информера на главной странице
@import url(ad-css/informer-index-page.css);
Это стили для старого информера. Сейчас они не нужны.
Нужно удалить с сервера файл 
*/

/* стили для главной страницы сайта */
/* @import url(ad-css/site-index-page.css); */
/* @import url(ad-css/site-pages.css); */



/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');
font-family: 'Open Sans', sans-serif;
*/

@font-face {
	font-family: Intro;
	src: url(/design/fonts/IntroHeadR-Base.woff2) format("woff2"),
	url(/design/fonts/IntroHeadR-Base.otf) format("opentype");	
	font-display: optional;
}

/*

* {
 хорошо бы это добавить, но может повлиять на другие элементы
 margin: 0;
 padding: 0;
 font-size: 100%;}
 
*/

/* оформление карточек - начало */	
	
/* .card-box */
.goods-list, 
.with-clear {
	display: flex !important; /* в стилях, которые подключаются ниже, для .with-clear задано display: block; */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;;
	/* max-width: 900px;
	margin: 0 auto;
	border: 1px solid #090; */
	background: #fff;}

.list-item {
	display: flex;
	flex-direction: column;
	width: calc(100% / 4 - 60px / 4);
	box-sizing: border-box;
	margin: 0 20px 20px 0;	
	border: 1px solid #c9cac7;
	font: 16px Arial, sans-serif;}
	
.list-item  * {
 margin: 0;
 padding: 0;
 font-size: 100%;}	

.list-item img {
	width: 100%;	
	border: 0;
	vertical-align: top;}

.card-img-top-container {
	flex-grow: 0;}

.card-img-top-container a {
    display: block;
    text-align: center;
    position: relative;
    overflow: hidden;}

/* эффект фотографий - начало */		

.product-image-new img {
	width: 100%;   
	height: auto; /* CLS-fix: высота из пропорции, без растяжения */
	aspect-ratio: 1 / 1; /* CLS-fix: резерв под квадрат превью 450x450 */
    position: relative;
    z-index: 0;    
    transition: all 0.9s ease-in-out;
    transition-delay: 0.8s;
	 background-color: #fff;}

.image-for-effect {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 0;
    transition: all 0.9s ease-in-out;
	transition-delay: 0.8s;
    transform: scale(5);}

.product-image-new:hover > img{	
	transform: scale(5);
	opacity: 0;}

.product-image-new:hover .image-for-effect{
	opacity: 1; 
	top: 0;	
	transform: scale(1);}
	
/* эффект фотографий - завершение */	

.card-text-container {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	/* background: #fcc; */}

.card-text-container__top {
	/*min-height: 130px;*/
	flex-grow: 1;
	padding: 6px 6px 12px 6px;
	text-align: center;
	/* border: 1px solid #fc0; */ }

.card-text-container__top a {
	text-decoration: none;
    color: #4b4e44;
    font: 24px Intro, sans-serif;}

.card-text-container__bottom {
	/* border: 1px solid #fc0; */ }

.seeds-quantity {
	padding-bottom: 5px;
	color: #4b4e44;
	text-align: center;
	font: 16px Verdana, Arial, Helvetica, sans-serif;}

.seeds-availability {
	padding-bottom: 16px;
	color: #4b4e44;
	text-align: center;
	font: 16px Verdana, Arial, Helvetica, sans-serif;}

.price-base {
	padding-bottom: 18px;
	color: #000;
	text-align: center;
	font: 700 14px Verdana, Arial, Helvetica, sans-serif;}

.order-box {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	background: #e6edb5;
	padding: 5px;}

.order-box > div {
	box-sizing: border-box;
	/* width: 50%; */
	/* border: 1px solid #f00; */ }
	
.order-box__left-box {
	flex-grow: 1; /* */
	/* margin-right: 10px; */
	text-align: center;}

.order-box__right-box {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;}

.order-box__right-box > div {
	/* border: 1px solid #090;  */ }
	
/* описание */
.order-box__about {
	flex-grow: 1;	
	/* margin-right: 5px; */}

.order-box__about a {
	height: 100%;
	box-sizing: border-box;
	display: block;	
	padding: 4px;
	/* padding-top: 4px; */
	text-decoration: none;
	color: #4b4e44;
	font: 24px Intro, sans-serif;
	/* font-size: 30px; */
	/* background: #fc0; */	}
	
.order-box__about a:hover {
	text-decoration: underline;
}	
	
/* корзина */
.order-box__basket{
	/* margin-right: 10px; */
	/* background: #999; */
	padding: 2px;}

/* сердечко */
.order-box__wish {
	padding: 2px;
}

.add {
	background-image: url(imgs/g1.png);
	cursor: pointer;}

.basket, 
.wish {
	width: 32px;
	height: 32px;
	padding: 3px;
	background-repeat: no-repeat;
	background-position: center;}

/*	
.basket, 
.wish {
	display: inline-block;}
*/

.wish.wadd {
	background-image: url(imgs/line-not.png);
	cursor: pointer;}


/*
Breakpoints:
больше 1200px - 4 колонки;
992px - 3 колонки;
768px - 2 колонки и переход в мобильную версию;
576px - 1 колонка
*/

/* @media (max-width: 490px) { */
@media (max-width: 575px) {

	.list-item {
		width: 100%;}

	/*	
	.list-item:last-child {
		margin-bottom: 0;} */
		
	.list-item  {
		margin-right: 0;}		

}

/* @media (min-width: 491px) and (max-width: 820px) { */
@media (min-width: 576px) and (max-width: 767px) {

	.list-item {
		width: calc(100% / 2 - 10px);}

	/* 
	бращаемся к двум последним дочерним элементам
	.list-item:nth-last-child(-n+2) {
		margin-bottom: 0;} */
		
	.list-item:nth-child(2n) {
		margin-right: 0;
		/* background: #ccf; */
		}	

}

/* @media (min-width: 821px) and (max-width: 950px) { */
@media (min-width: 768px) and (max-width: 991px) {

	.list-item {
		width: calc(100% / 3 - 40px / 3);}
		
	.list-item:nth-child(3n) {
		margin-right: 0;
		/* background: #cfc; */
		}	
	
	/*
	.list-item:nth-last-child(-n+3) {
		margin-bottom: 0;} */

}

/* @media (min-width: 951px) { */
@media (min-width: 992px) {

	.list-item {
	 min-width: 0;
	}

	/*
	.list-item:nth-last-child(-n+4) {
		background: #cfc;
		margin-bottom: 0;} */
	
	.list-item:nth-child(4n) {
		margin-right: 0;
		/* background: #fcc; */
		}

}

/* оформление карточек - завершение */

/* оформление стрелки вверх страницы - начало */

#toTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: none;
    cursor: pointer;}

#toTop img {
    border: 0;
    vertical-align: top;}

@media (max-width: 800px) {
    #toTop {
        display: none;}
}

/* оформление стрелки вверх страницы - завершение */

/* оформление captcha 20-03-2023 */
.recaptcha-wrapper {
	/* border: 2px solid red !important; */
	transform: scale(.835) translate(0px, 0px);
	transform-origin: left top;
}




/* Open Sans — локальный хостинг (latin+cyrillic, веса 400/600/700), font-display:optional для нулевого CLS */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url(/design/fonts/opensans-400.woff2) format("woff2");
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: optional;
	src: url(/design/fonts/opensans-600.woff2) format("woff2");
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: optional;
	src: url(/design/fonts/opensans-700.woff2) format("woff2");
}

.vil-mudrosti {
font-family: Calibri;
font-size: 17px;
color: rgb(105, 105, 105);
font-style: italic;
text-align: right;
margin: 0 0 10px 0;
}

.vil-toc {
 font-family: Calibri;
 font-size: 17px;
 color: rgb(105, 105, 105);
 font-style: italic;
 text-align: right;
 list-style: none;
 margin: 0 0 20px 0;
 padding: 0 40px 0 0;
}

.vil-toc li {
 font-style: italic;
 line-height: 1.0;
}

.vil-toc a {
 font-family: Calibri, Arial;
 font-size: 17px;
 color: rgb(105, 105, 105);
 text-decoration: none;
 border-bottom: 1px dotted rgb(160, 160, 160);
}

.vil-toc a:hover {
 color: #5C9F00;
 border-bottom-color: #5C9F00;
}

.vil-photo-right {
 float: right;
 margin: 10px 5px 5px 15px;
}

.vil-photo-left {
 float: left;
 margin: 10px 15px 5px 5px;
}

.vil-stranicy {
 font: 17px Calibri, Arial;
 text-align: justify;
 color: #666;
 line-height: 1.5;
}

.vil-stranicy ul, .vil-stranicy ol, .vil-stranicy li {
 font: 17px Calibri, Arial;
}

.vil-stranicy ul, .vil-stranicy ol {
 list-style-position: outside;
 margin: 0 0 10px 0;
 padding-left: 25px;
}

.vil-stranicy li {
 margin-left: 0;
 padding-left: 0;
}

.vil-stranicy span {
 font-weight: 700;
}

.vil-stranicy p {
 font-family: Calibri;
 font-size: 17px;
 color: #666;
 text-align: justify;
 margin: 0 5px 10px 5px;
}

.vil-stranicy h2 {
 font: 700 21px Calibri, Arial, sans-serif;
 color: #666;
 margin: 15px 0 10px 5px;
}

.vil-full-width {
 display: block;
 width: 100%;
 height: auto;
 margin: 10px 0;
}

/* Правая шапка страниц сайта */
.grey-text {
	color: #666;
}	

.product-description {
	font: 17px Calibri, Arial;
	text-align: justify;
	color: #666;
}

.product-authorship {
	padding-top: 16px;
	font: italic 17px Calibri, Arial, 'Open Sans';
}

.product-description img {
	float: left;
	margin: 0 15px 10px 0;
	width: 50%;
}

.product-description h1,h2,h3,h4,h5,h6 {
	color: #666;
	font: 700 17px/1.4em Calibri, Arial;
	padding-bottom: 0px;
	white-space: pre-line;
}

.product-description p:last-child {
	margin-bottom: 0;
}

.product-description span {
	font-weight: 700;
}

.product-description ul {
	margin: 0;
	padding: 0;
}

.product-description ol {
	margin: 0 100px 0 0;
	padding: 0;
}

.product-description li {
	margin: 0;
	padding: 0;
	padding-left: 10px;
	texr-align: left;
}

.product-delivery {
	color: #a60012;
}

.product-description a {
	font: 17px Calibri, Arial;
}

.catalog-top-padding-left {
	padding-bottom: 20px;
	font-size: 14px;
  	font-family: 'Open Sans';
}

.catalog-top-padding-right {
	padding-bottom: 20px;
	text-align: right;
	font-size: 14px;
  	font-family: 'Open Sans';
}

.winter-head {
	text-align: center;
	color: rgb(92, 139, 15);
	font-family: Calibri, Arial;
	font-size: 21px;
	padding: 0;
	margin: 0;
}

#winter-head-img-left {
	display: inline;
	float: left;
	text-align: left;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-left: 5px;
}

#winter-head-img-right {
	display: inline;
	float: right;
	text-align: right;
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 10px;
}

.ghost {
	display: none;
}

/*делаем старую цену красной*/

.price-new {
	color: #a41515;}

.vilord-catalog-h1 {
	margin: 0;
	padding: 4px 0 0 0;
	font-family: Intro;
	font-size: 30px;
	color: #4b4e44;
	font-weight: normal;
    	text-transform: uppercase;
}

.top-name-color  {
	color: #778662;
}

.vilord-product-page-h1 {
	margin: 0;
	padding: 0;
	font-family: Intro;
	font-size: 37px;
	font-weight: normal;
	color: #666666;}

.vilord-moder-panel {
	padding-top: 10px;
	margin-right: 16px;
	float: right;}

/* Ссылка "[ Редактировать товар ]" (видна только админу) - лежит в
   отдельной одноячеечной table, ссылка прижата вправо внутри ячейки
   (td.nowrap). Общий правый отступ страницы (16px) даёт .blockC1
   (инлайн-стиль на всей колонке контента) - трогать его нельзя, это
   отступ всех страниц сайта. Добавляем ещё +16px именно для этой
   ячейки - целимся по самой ссылке (href оканчивается на /edit,
   родная ссылка редактирования товара uCoz), а не по цепочке
   родитель/сосед - первый вариант через :has(table + h1) на живом
   сайте не сработал (селектор не совпал), этот проверен через прямое
   правило в DevTools (padding-right:16px на .nowrap подтверждён). */
td.nowrap:has(> a[href$="/edit"]) {
	padding-right: 16px !important;
}

.vilord-product-page-h2 {
	margin: 0;
	padding-top: 2px;
	font-family: Intro;
	font-size: 22px;
	font-weight: normal;
	color: #999999;}

.vilord-title {
	margin: 0 0 10px 0;}

/* Миниатюры под главным фото товара (sh4.t, .rd-col-4 > .line-2 >
   img.gphoto, $SMALL$/$SMALL_1$/$SMALL_2$) - белая полоса под
   картинкой внутри рамки: классический эффект - <img> по умолчанию
   inline, браузер резервирует под ним место "под хвостик" строки
   (как у букв с нижним выносным элементом, типа "у"/"р"), даже когда
   в строке кроме картинки ничего нет.

   Пробовали чинить через width:100%+aspect-ratio (резерв места под
   размер + заодно попутно убирает и эту полосу через display:block) -
   ОТКАЧено 2026-08-19: побочный эффект - .line-2 сам не держит
   независимую ширину до конца непонятным образом (видимо, сказывается
   .rd-col-4 inline-block), и width:100% на .line-2+img заодно
   РАСТягивал рамку и картинку крупнее прежнего (86.8px -> ~103px) и
   сокращал видимые отступы между миниатюрами - недопустимо, менять
   размеры рамок/отступов не просили.

   Правильный минимальный фикс - только vertical-align (картинка
   остаётся inline, размер/раскладка не трогаются вообще, меняется
   только вертикальная привязка к строке) - убирает именно и только
   белую полосу, ширина/высота рамки и картинки, отступы между
   миниатюрами - не меняются (проверено на живой странице: 88.8px
   ширина рамки что до, что после; высота рамки сама сжалась с 92.8
   до 88.8px - лишний зазор снизу ушёл, картинка осталась 86.8x86.8px).

   Резерв места под layout shift (картинки loading="lazy") этим НЕ
   решается - для этого предложена альтернатива через width/height
   атрибуты в самой разметке sh4.t (инструкция передана в чате
   2026-08-19), Vilord пока не применял. */
.rd-col-4.rd-col-800-12 > .line-2 > img.gphoto {
	vertical-align: top;
}

.vilord-related-products {
	font-size: 30px;
	color: #4b4e44;
	background: #ededec;
	text-align: center;
	text-transform: uppercase;
	padding: 10px 0;
	border-radius: 3px;
	margin-bottom: 16px;
	font-family: Intro;}

.vilord-payment-pages {
	font: 17px Calibri, Arial;
	text-align: justify;
	color:#666666;
}

.vilord-payment-pages span {
	font-weight: 700;
}

.vilord-payment-pages td {
	padding-right: 20px;
	padding-bottom: 3px;
	font: 17px Calibri, Arial;
	text-align: justify;
	color:#666666;
}

span.vilord-gender {
	font: 30px Arial Unicode MS; 
	color: #abc08c;
}

/*Отсюда идет чистка главной страницы магазина*/

.blckqt {
	margin: 0 0 0 75px; 
	border: none; 
	padding: 0px;
}

.top-right-icons {
	padding-right:75px;
}

.vilord-forum td, body {
    font-family: Calibri, Arial;
    font-size: 17px;
}

.vilord-forum .signatureView,.quoteMessage {
    font-family: Calibri, Arial;
    font-size: 16px;
    color: #818979;
}

/*Главная страница*/

div.line-6.vil-main{
	padding-top: 5px;
}

.vil-main-box-15-line-3{
	color: #4b4e44;
	padding-bottom: 0px;
	text-align: center;
}

div.line-2.vil-main {
	padding-top: 11px;
}

.vil-main-box-14-line-1{
    color: #4b4e44;
    font-size: 30px;
    text-align: center;
    font-family: intro;
    border-bottom: 3px dashed #4b4e44;
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.vil-main p:first-child {
	margin-top: 0;
}

.bom-bom .vil-main td{
	padding-top: 0px;
}

.rd-box-15 .vil-main .line-4{
	margin-top: 5px;
}

.vil-main-content img {
	float: right;
	margin: 0 0 15px 15px;
	width: 50%;
	height: auto;
}

.vil-main-content {
	font: 17px Calibri, Arial;
	text-align: justify;
	color: #666666;
}

.vil-main-seychas-na-saite{
	font-family: 'Open Sans';
	color: #4b4e44;
	font-size: 16px;
}

.vil-main-add-news{
	font-family: Calibri, Arial;
	font-size: 17px;
	text-align: right;
	margin-top: 0in;
	margin-right: 0in;
	margin-bottom: 0in;
	margin-left: 0in;
}

.vil-main-bfooter {
	display: flex;
	background: #f7fbda;
	margin: 0 16px -10px 22px;
	padding-top: 5px;
}

.vil-main-informer {
	display: flex;
	text-align: left;
	z-index: 9;
	margin-left: 5px;
}

.vil-main-informer div{
	margin-right: 5px;
	width:88px;
	height:31px;
	border:0;
}

.vil-main-powered-by {
	display: inline-block;
	font-family: Calibri, Arial;
	font-size: 17px;
	text-align: center;
	line-height: normal;
	margin: 5px 0 5px 5px;
	width: 100%;
}

.vil-table-main {
	border: 1px solid grey;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 15px;
}

.vil-td-1 {
	border: 1px solid grey;
	height:35px;
	width:20%;
	font-size: 13px;
}

.vil-td-next {
	border: 1px solid grey;
	height:35px;
	width:40%;
	font-size: 13px;
}

.ya-counter {
	position:absolute;
	left:-9999px; 
}

/* Страница служебных форм */

td.forumNameTd.col_payment_id {
    font-family: verdana,arial,helvetica;
    font-size: 16px;
}

/* Только если внутри _uwndWnd1 находится wnd_inv_show_status */
#_uwndWnd1:has(#wnd_inv_show_status),
#_uwndWnd1:has(#wnd_inv_show_status) .xw-blank,
#_uwndWnd1:has(#wnd_inv_show_status) .xw-disabled {
  width: fit-content !important;
  max-width: 760px !important;
  overflow: visible;
}

.myWinPollTd span { 
  font-size: 14px !important;
}

.myWinPollT td { 
  width: 50% !important;
}

#wnd_inv_show_goods td {
  width: auto !important; /* сбрасывает общее правило */
}

#wnd_inv_show_goods tr td:nth-child(1) {
  width: 5% !important;
}

#wnd_inv_show_goods tr td:nth-child(3),
#wnd_inv_show_goods tr td:nth-child(4),
#wnd_inv_show_goods tr td:nth-child(5) {
  width: 10% !important;
  text-align: center;
}

.myWinPollT:not(#wnd_inv_show_goods) tr td:first-child.myWinTD1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.myWinPollT:not(#wnd_inv_show_goods) tr:nth-child(3) td.myWinPollTd {
  font-size: 14px;
}

.myWinPollT:not(#wnd_inv_show_goods) tr td:nth-child(2) {
  padding-left: 10px;
}

.myWinPollT + table button {
  min-width: 180px;
  display: block;
  box-sizing: border-box;
}

.myWinPollT + table tr:nth-child(2) button {
  margin-top: 15px;
}

.myWinPollT:not(#wnd_inv_show_goods) td {
  padding-top: 2px;
  padding-bottom: 2px;
}

.vil-news-card {display: flex; width: 100%; align-items: flex-start; margin-bottom: 20px; padding-left: 20px;} 
.vil-news-card img {width: 155px; height: 155px; display: block; margin: 10px 0; float: left;} 
.vil-news-info {flex: 1; margin: 10px 10px 10px 52px;} 
.vil-news-name {font-size: 20px; text-decoration: none; color: #5C9F00; font-family: 'Open Sans';} 
.vil-news-stock,.vil-news-brief,.vil-news-price {font-family: verdana, arial, helvetica; font-size: 16px; margin-top: 7px;} 
.vil-news-price {font-weight: bold;} .vil-news-price s {color: #999; margin-right: 8px;} 
.vil-news-newprice {color: #c00; font-weight: bold;}

.img-row {
    display: flex;
    gap: 10px;
    width: 100%;
    clear: both;
    box-sizing: border-box;
    margin: 10px 0;
    align-items: flex-start;
}

.img-row img {
    height: auto;
    max-width: none;
    box-sizing: border-box;
}

.img-row.two img {
    width: calc((100% - 10px) / 2);
}

.img-row.three img {
    width: calc((100% - 20px) / 3);
}

/* Новинки на /shop: высота картинки по пропорции */
.something .product-image-new img {
  height: auto;
}

/* Новинки: отключаем эффект исчезновения при наведении (второго фото тут нет) */
.something .product-image-new:hover > img {
  transform: none;
  opacity: 1;
}


/* ============================================================
   Список новостей (шаблоны nw1/nw4/nw6 + карточка nw3.t).
   Карточка повторяет вид информера на главной сайта - см.
   .ad-informer-item-container-index-page в
   left-expandable-menu-shop-top-categories-site-pages.css

   Идея раскладки взята из каталога магазина ($CATALOG$(4,0)):
   там товары раскладываются в колонки, а высоты выравниваются.
   Но $BODY$ новостей не строит таблицу и не принимает число
   колонок - выдаёт поток <div id="entryID*">. Поэтому раскладку
   делаем flex-строкой: она, как ячейки таблицы, сама выравнивает
   высоты карточек в ряду (align-items:stretch по умолчанию).

   Два подводных камня, учтённых здесь:
   1. margin:0 у обёрток - гасим .rd-margin > * > * (rd-framework),
      иначе унаследованный margin-right:16px ломает третий столбец.
   2. flex:0 0 <basis> - иначе флекс сжимает карточки под контент,
      и ширины/высоты разъезжаются.

   Селектор .rd-row #allEntries затрагивает только новости:
   такая обёртка есть лишь в nw1/nw4/nw6, все выводят один nw3.t.
   Форум и каталог не задеты (проверено по всем шаблонам).

   ВАЖНО: иногда $BODY$ не оборачивает список в #allEntries/#myGrid -
   карточки идут прямыми детьми .rd-row.rd-margin (замечено в версии
   nw4.t после ручной правки). Но .rd-row.rd-margin используется ещё
   и для блока "Читать все новости"/подписка - его раскладку (rd-col-4
   + rd-col-8) нельзя ломать общим селектором. Поэтому добавлен
   запасной вариант через :has(), который срабатывает ТОЛЬКО если
   среди прямых детей есть entryID-карточка - у блока подписки таких
   детей нет (там rd-col-4/rd-col-8), так что он не заденется.
   ============================================================ */

.rd-row #allEntries,
.rd-row.rd-margin:has(> div[id^="entryID"]) {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: stretch;
	margin-left: -3px;   /* при паддинге карточки 8px гасит его не полностью,
	                        оставляя те же 5px от контейнера, что и раньше */
	margin-right: -3px;
	font-size: initial;
}

/* [id^="entryID"] вместо просто "> div": в #allEntries помимо карточек
   может лежать пагинатор или другой служебный блок - не карточка
   новости, но тоже прямой div-потомок. Без уточнения он получал бы
   те же flex-basis/width/margin и ломался в подобие мелкой сетки.
   entryID* - это то, чем uCoz реально оборачивает каждую новость. */
.rd-row #allEntries > div[id^="entryID"],
.rd-row.rd-margin:has(> div[id^="entryID"]) > div[id^="entryID"] {
	display: flex;
	box-sizing: border-box;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 33.333%;
	width: 33.333%;
	max-width: 33.333%;
	margin: 0 !important;
	padding: 0 8px 16px 8px;  /* 8+8=16px между колонками, 16px между рядами (было 10) */
}

/* Блок пагинации (id="pagesBlock1") - тоже прямой потомок #allEntries
   (или .rd-row.rd-margin напрямую - см. запасной вариант выше),
   но не карточка (id не начинается с entryID), поэтому раскладка
   карточек его не касалась - он висел заподлицо с краем без отступа.
   Растягиваем на всю ширину ряда и даём тот же паддинг, что и у
   карточек (при margin -3px это даёт те же видимые 5px). */
.rd-row #allEntries > #pagesBlock1,
.rd-row.rd-margin:has(> div[id^="entryID"]) > #pagesBlock1 {
	flex-basis: 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	flex-grow: 0;
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 8px;
	text-align: center;
}

@media (max-width: 820px) {
	.rd-row #allEntries > div[id^="entryID"],
	.rd-row.rd-margin:has(> div[id^="entryID"]) > div[id^="entryID"] {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
		padding: 0 5px 10px 5px;
	}
	.rd-row #allEntries > #pagesBlock1,
	.rd-row.rd-margin:has(> div[id^="entryID"]) > #pagesBlock1 {
		padding: 0 5px;
	}
	.rd-row #allEntries,
	.rd-row.rd-margin:has(> div[id^="entryID"]) {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Карточка - вид как у информера на главной (.ad-informer-item-container-index-page
   в left-expandable-menu-shop-top-categories-site-pages.css), но со своими
   именами классов (эта карточка вставляется в архив новостей, не на главную) */
.ad-news-item-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;   /* без этого длинный заголовок распирает грид-колонку
	                   информера на главной сверх положенной трети */
	margin: 0 !important;   /* гасим .rd-margin > * > * (иначе +16px ломает столбцы) */
	border: 1px solid #868683;
	background-color: #f9faef;
}

.ad-news-item-image {
	flex: 0 0 auto;
	border-bottom: 1px solid #868683;
}

.ad-news-item-image img {
	width: 100%;
	aspect-ratio: 550 / 274;
	height: auto;
	display: block;
}

.ad-news-item-text {
	flex: 1 0 auto; /* растягивает блок с заголовком - карточки в ряду
	                   остаются одной высоты, как и раньше */
	min-width: 0;
}

.ad-news-item-text a {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;   /* вложенный flex - у него свой min-width:auto по умолчанию,
	                   внешнего min-width:0 на контейнере недостаточно */
	text-align: center;
	font-family: Intro, 'Open Sans', sans-serif;
	font-size: large;
	text-decoration: none;
}

.ad-news-item-text a p {
	flex-grow: 1; /* прижимает низ заголовка к верху футера в любой карточке */
	display: flex;
	align-items: center;      /* по вертикали в области заголовка */
	justify-content: center;
	min-width: 0;
	overflow-wrap: break-word;
	margin: 0;
	padding: 6px;
	color: #778662;
}

/* Строка футера: глазик+просмотры слева, шестерёнка модератора по
   центру (именно центр всей строки, а не "между" соседями - поэтому
   grid 1fr/auto/1fr, а не flex space-between), дата справа */
.ad-news-item-footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 6px 10px;
	font-family: Intro, 'Open Sans', sans-serif;  /* тот же шрифт, что у заголовка */
	font-size: 18px;  /* было 12px - теперь как у заголовка */
	color: #666;
}

.ad-news-item-views {
	display: flex;
	align-items: center;
	gap: 4px;
	grid-column: 1;
	justify-self: start;
}

.ad-news-item-views .fa-eye {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* $MODER_PANEL$ - готовый виджет uCoz (.u-mpanel), мы не управляем
   его внутренним размером напрямую. У него свой, чуть больший
   естественный размер, из-за чего строка футера (grid row) росла
   под админом, растягивая карточку. Жёстко ограничиваем высоту
   контейнера под размер строки (как у глазика, 18px) и обрезаем
   всё, что не влезло.
   ИСПРАВЛЕНО (2026-08-19): старый комментарий тут ошибочно уверял, что
   раскрывающееся меню от overflow:hidden не страдает - на практике
   меню (ul.u-mpanel-l, показывается через класс .open на .u-mpanel)
   обрезалось и пряталось под соседней картинкой карточки. Снимаем
   overflow:hidden ТОЛЬКО когда меню открыто (:has(.open)) - в закрытом
   состоянии защита от растягивания строки работает как раньше. */
.ad-news-item-moder {
	grid-column: 2;
	justify-self: center;
	height: 18px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-news-item-moder:has(.u-mpanel.open) {
	overflow: visible;
}

.ad-news-item-date {
	grid-column: 3;
	justify-self: end;
}

/* Строка "[ Добавить новость ]" над списком новостей - лежит в том же
   контейнере, что и блок новостей (rd-col-9), просто раньше по коду.
   Класс нужно проставить в nw4.t на обёртке (см. инструкцию в чате) -
   в самом коде вручную набранного текста класса нет. */
.ad-news-addlink {
	padding-left: 5px;
	padding-right: 5px;
	box-sizing: border-box;
}

/* Блок подписки на новости в архиве (.newsPodpiska) выглядел "голым":
   на главной (si.t) тот же виджет обёрнут в <form style="border:1px
   solid #ccc;padding:3px;..."> - в архиве (nw1.t/nw4.t) этой обёртки
   нет, uCoz отдаёт виджет без неё. Вешаем ту же рамку прямо на
   .newsPodpiska - но только там, где ВНУТРИ нет <form> (:not(:has)),
   чтобы на главной рамка не задвоилась. */
.newsPodpiska:not(:has(form)) {
	border: 1px solid #ccc;
	padding: 3px;
	text-align: center;
	margin: 0;
}

/* Раньше здесь было принудительное уменьшение шрифта кнопки на узких
   экранах - актуально было для длинной фразы "Подписаться на новости"
   (не помещалась в rd-col-6 и наезжала на соседний контент). Теперь
   текст кнопки - одно слово "Подписаться", оно свободно помещается в
   30px даже на 320px viewport (проверено: ширина текста ~128px в
   колонке ~188px), поэтому сужение убрано - шрифт как на главной. */
.newsPodpiska3 input[type=submit] {
	max-width: 100%;
	white-space: normal;
	font-size: 25px !important;  /* было 30px в style.css */
}

/* Хлебные крошки архива новостей - тот же вид "кнопок", что у крошек
   магазина ([itemtype*="BreadcrumbList"] в pda-style-valentin.css).
   Там разметку даёт $SHOP_PATH$ с микроразметкой schema.org, тут -
   ручная ссылка "Главная" + $DATE_BAR$ (готовый тег, отдаёт
   <span class="breadcrumb-curr">Архив материалов</span> - его нельзя
   обернуть в itemprop, поэтому стили продублированы на своих классах,
   а не на итемпропах). Обернуть строку в шаблоне нужно так:
   <div class="ad-news-breadcrumb"><a href="$HOME_PAGE_LINK$">Главная</a> &raquo; $DATE_BAR$</div> */
.ad-news-breadcrumb {
	padding-left: 10px;
}

.ad-news-breadcrumb a,
.ad-news-breadcrumb .breadcrumb-curr {
	display: inline-block;
	padding: 2px 3px;
	margin-bottom: 4px;
	background: #f3f3f3;
	border: 1px solid #a4a4a4;
	border-radius: 6px;
	font: 12px Intro, sans-serif;
	text-transform: uppercase;
	color: #4b4e44;
	text-decoration: none;
	line-height: 1.4;
	vertical-align: middle;
}

/* Текущая страница - та же кнопка, но "нажатая": светлее фон,
   приглушённый текст, внутренняя тень (один в один как в магазине). */
.ad-news-breadcrumb .breadcrumb-curr {
/*	margin-left: 5px; */
	background: #fafafa;
	color: #8a8d82;
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.18);
	cursor: default;
}

/* Десктоп (от 821px - симметрично мобильному max-width:820px выше по
   файлу): свой вид кнопки, острые углы вместо скруглённых. Мобильную
   версию не трогаем - её обслуживает базовое правило выше как есть.

   Все расстояния от текста до края увеличены на 3px: слева/справа
   3px -> 6px, сверху 2px -> 5px - это осталось ВНУТРИ рамки, как
   обычный padding. Отступ снизу устроен иначе по просьбе: "лишние"
   +3px не добавлены в padding-bottom (он остаётся 2px, как и был),
   а добавлены в margin-bottom (4px -> 7px) - то есть вынесены НАРУЖУ,
   за рамку кнопки, а не расширяют кнопку изнутри. Общее увеличение
   снизу то же самое (+3px), просто по другую сторону границы кнопки. */
@media (min-width: 821px) {
	.ad-news-breadcrumb a,
	.ad-news-breadcrumb .breadcrumb-curr {
		border-radius: 0;
		padding-top: 5px;
		padding-bottom: 2px;
		padding-left: 6px;
		padding-right: 6px;
		margin-bottom: 7px;
	}
}

/* Крошки+кнопка "+" (треть ширины) и форма подписки (две трети) -
   ТА ЖЕ формула, что у карточек новостей ниже: тот же margin -3px на
   ряду и тот же паддинг 8px на "колонках" (33.333% и 66.667%). Это
   не совпадение "на глаз" при одной ширине экрана, а совпадение по
   формуле - работает одинаково при любой ширине окна, потому что
   пропорции идентичны сетке карточек.

   Формула зазора внутри формы: сама форма растягивается на ширину
   карточка2+карточка3+зазор_между_ними (2W+16), но целевая точка
   раздела (левый край карточки3) сидит не в геометрической середине
   формы, а на W+16 от начала - т.е. на 8px правее середины формы
   (половина зазора 16px). Отсюда calc(50% + 8px) / calc(50% - 8px)
   вместо простого 50/50 у email/кнопки внутри формы. */
.ad-news-topbar {
	display: grid;
	grid-template-columns: 33.333% 66.667%;
	align-items: stretch;
	margin-left: -3px;
	margin-right: -3px;
}

.ad-news-topbar-c1 {
	box-sizing: border-box;
	padding: 0 8px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: 10px;
	font-size: initial;  /* гасит [class^="rd-row"]{font-size:0} (rd-framework) -
	                        раньше это делало правило .rd-row>[class^="rd-col-"],
	                        но наши классы не начинаются с "rd-col-" */
}

.ad-news-topbar-c1 > .ad-news-breadcrumb {
	align-self: center;
	margin-right: 0 !important;  /* гасим .rd-margin>*>* (rd-framework) - крошки стали
	                                 внуком .rd-margin в новой структуре topbar */
}

.ad-news-topbar-c23 {
	box-sizing: border-box;
	padding: 0 8px;
	display: flex;
	align-items: stretch;
	font-size: initial;  /* см. комментарий у .ad-news-topbar-c1 выше */
}

.ad-news-topbar-c23 > .vil-main-box-15-line-3 {
	flex: 1;
	min-width: 0;
}

/* Квадратная кнопка "+" - высота стретчится по высоте ряда (=высоте
   формы подписки, она тут самая высокая), aspect-ratio:1/1 сама
   подстраивает ширину под получившуюся высоту. Рамка та же, что у
   формы (border:1px solid #ccc, см. инлайн-стиль формы в шаблоне). */
.ad-news-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: 1px solid #ccc;
	box-sizing: border-box;
	text-decoration: none;
	color: #4b4e44;
	font-size: 24px;
	line-height: 1;
	margin-right: 0 !important;  /* гасим .rd-margin>*>* (rd-framework) - кнопка тоже
	                                 внук .rd-margin в новой структуре topbar */
}

.ad-news-add-btn:hover {
	background: #f3f3f3;
}

/* .vilord-catalog-h1 (style.css) имеет padding-top:4px. На главной
   этот h1 скрыт (display:none в .rd-nopad-color .line-2), поэтому
   там отступ сверху = 10px (.bom-bom) + 5px (.line-6.vil-main) = 15px.
   На новостях h1 виден и добавляет свои 4px поверх - получается
   10+4+5=19px. Убираем лишние 4px точечно, не трогая h1 на других
   страницах (класс ad-news-h1 добавляется в шаблоне рядом с
   vilord-catalog-h1: <h1 class="vilord-catalog-h1 ad-news-h1">). */
.ad-news-h1 {
	padding-top: 0;
}

/* Не просто фон самой кнопки, а вся правая половина формы (email -
   слева, "Подписаться" - справа, где-то половина блока подписки).
   .rd-row/.rd-col-6 внутри формы - по умолчанию inline-block разной
   высоты, переводим в flex, чтобы половины совпадали по высоте и
   заливка была ровным прямоугольником на всю высоту формы. Никакого
   лишнего padding не добавляем - высота остаётся исходной (42px,
   как на главной), просто заливаем то, что уже есть.

   Ширина половин НЕ 50/50 - см. большой комментарий выше про
   calc(50% ± 8px) и зазор между карточками. */
.newsPodpiska .rd-row {
	display: flex;
	align-items: stretch;
}
.newsPodpiska .rd-col-6 {
	display: flex;
	box-sizing: border-box;
}
.newsPodpiska .rd-col-6:first-child {
	width: calc(50% + 8px);
}
.newsPodpiska .rd-col-6:last-child {
	width: calc(50% - 8px);
}
.newsPodpiska2,
.newsPodpiska3 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	box-sizing: border-box;
}
.newsPodpiska3 {
	background: #f9faef;
}
.newsPodpiska3 input[type=submit] {
	background: transparent !important;  /* цвет теперь на всей половине - см. .newsPodpiska3 выше */
}


/* ГЛАВНАЯ СТРАНИЦА (si.t): форма подписки была на 16px левее, чем
   меню и остальные элементы. Причина - rd-framework.css:
   .rd-margin>*>*{margin-right:16px} - .vil-main-box-15-line-3
   (обёртка формы) это внук .rd-margin (rd-row.rd-margin > rd-col-8 >
   .vil-main-box-15-line-3), поэтому получает лишний margin-right.
   У самого меню такой обёртки нет - оно и было ровно по краю, а
   форма - на 16px левее. :has() сужает фикс именно до обёртки формы
   подписки, не задевая тот же класс у "Читать все новости" рядом. */
.vil-main-box-15-line-3:has(.newsPodpiska) {
	margin-right: 0 !important;
}

/* ГЛАВНАЯ СТРАНИЦА (только она): выравниваем правый край формы
   подписки с правым краем сетки информера (карточек новостей) ниже.
   Тут сразу два слагаемых:
   1) у самой строки .rd-row.rd-margin (обёртка "Читать все новости"
      + подписка) есть непогашенный margin-right:-16px (rd-framework) -
      её родители (line-6/rd-box-14/rd-box-15) не имеют компенсирующего
      padding-right, поэтому вся строка (и rd-col-8 внутри неё)
      расползается на 16px правее true-края .main-page-appearance;
   2) у сетки информера свой margin-right:8px (left-expandable-menu-
      ...css), которого у формы подписки просто нет.
   Итого 16+8=24px. Проверено на реальном HTML: без этой правки
   правый край формы был на 24px правее правого края сетки информера.
   Селектор через "rd-col-8 >" (не просто :has(.newsPodpiska)) - на
   новостях .vil-main-box-15-line-3 лежит на уровень глубже (внутри
   .ad-news-topbar-right), туда это правило не дотягивается. */
.rd-col-8 > .vil-main-box-15-line-3:has(.newsPodpiska) {
	margin-right: 21px !important;  /* было 24 = 16(непогашенный margin строки)+8(margin
	                                    информера); теперь margin информера 5px, итого 21 */
	margin-left: -2px !important;  /* левый край формы вровень с левым краем 2-й
	                                   карточки информера; этого же сдвига
	                                   достаточно, чтобы граница половин формы
	                                   (email/окрашенная) совпала с 3-й карточкой -
	                                   общая формула calc(50%±8px) трогать не нужно */
}

/* "Читать все новости" - было 30px (.rd-box-14 .line-4 в style.css).
   Десктоп - 25px. ПДА - отдельно, явно 30px (см. ниже), скоуп через
   body.ad-pda-version-body, а не через ширину окна. */
body:not(.ad-pda-version-body) .rd-box-14 .line-4 {
	font-size: 25px !important;
}

body.ad-pda-version-body .rd-box-14 .line-4 {
	font-size: 30px !important;
}

/* Главная страница: доп. отступ слева у всего блока новостей/подписки
   (.main-page-appearance) - было 0 (единственное правило на этот
   класс в left-expandable-menu-...css закомментировано), стало 5px.
   ТОЛЬКО ДЕСКТОП - класс общий с мобильной версией, а отступ там
   не нужен (не был запрошен и раньше отсутствовал). */
@media (min-width: 821px) {
	.main-page-appearance {
		padding-left: 5px;
	}
}

/* "Подписаться на новости" - это <input type=submit>, а не <a>, поэтому
   общее правило a:hover{text-decoration:underline} (rd-normalize.css)
   на неё не действует. Добавляем то же поведение вручную - общее и
   для главной, и для новостей (класс единый, .newsPodpiska3). */
.newsPodpiska3 input[type=submit]:hover {
	text-decoration: underline;
}

/* Отступ справа у сетки информера был 8px (своё правило в
   left-expandable-menu-...css), а у сетки новостей - 5px (наша
   формула). Из-за расхождения контент "прыгал" на 3px при переходе
   между страницами. Приводим к общему знаменателю - 5px.
   ТОЛЬКО ДЕСКТОП - на ПДА своя формула ниже (тело другого класса). */
@media (min-width: 821px) {
	.ad-informer-wrapper-index-page {
		margin-right: 5px;
	}
	/* Блок с 8 круглыми картинками-ссылками - его собственный margin:8px
	   (left-expandable-menu-...css) даёт отступы слева/справа на 3px
	   больше, чем у карточек новостей выше. Сужаем именно левый/правый
	   margin на 3px (было 8, стало 5) - верх/низ не трогаем. */
	.ad-round-pictures-links-on-the-main-page {
		margin-left: 5px;
		margin-right: 5px;
	}
}

/* ПДА-ВЕРСИЯ (только она): выравниваем карточки новостей и форму
   подписки под уже верные (по факту) отступы блока кружочков/текста
   ниже. Скоуп через body.ad-pda-version-body - это настоящий признак
   ПДА-шаблона (его отдаёт сам uCoz), а не просто узкое окно браузера -
   если сузить окно десктопной версии, эти же классы никак не должны
   получить мобильные значения. */
body.ad-pda-version-body .ad-informer-wrapper-index-page {
	/* Баг в pda-style-valentin.css: там задали .ad-informer-wrapper-index-page
	   { padding: 0 10px; } без box-sizing:border-box - паддинг добавлялся
	   СВЕРХ ширины (по умолчанию content-box). Добавляем border-box. */
	box-sizing: border-box;
	/* Настоящая причина переполнения на 16px: на ПДА-версии обёртка
	   информера лежит ПРЯМЫМ потомком .rd-row.rd-margin (структура тут
	   отличается от десктопа) - родительская строка сама уширена на 16px
	   непогашенным margin-right:-16px (rd-framework), а обёртка это
	   "заполняла" через width:auto. Компенсируем на самой обёртке. */
	margin-right: 16px !important;
	/* Обёртка - потомок .rd-row.rd-margin, у которого font-size:0
	   (rd-framework: [class^="rd-row"]{font-size:0}, гасится обычно
	   только для .rd-col-* детей). Из-за унаследованного 0 у самой
	   обёртки её "gap: 0.66em" (в исходном файле) считался от нулевого
	   шрифта - тоже давал 0px. Отсюда и отсутствие зазора МЕЖДУ
	   карточками (в отличие от зазора ПОСЛЕ обёртки - тот на margin,
	   не на em, поэтому не пострадал). */
	font-size: initial;
	/* CSS grid (gap) даёт отступ только МЕЖДУ карточками, но не после
	   последней - следующий за информером блок (форма подписки, тоже
	   прямой потомок той же .rd-row.rd-margin) шёл вплотную, без
	   зазора. Добавляем снизу, тот же 16px, что и между карточками. */
	margin-bottom: 16px;
}

body.ad-pda-version-body .rd-col-8 > .vil-main-box-15-line-3:has(.newsPodpiska) {
	margin-left: 10px !important;
	margin-right: 26px !important;
}

/* Ссылка "На сайт" / "В магазин" в шапке ПДА (PHEADERA и PHEADERB -
   один и тот же id) была кликабельна только по размеру своего текста
   (position:absolute;left:0;bottom:0; без width/height). Растягиваем
   на весь фон-картинку шапки (.ad-pda-header__left-block, 150×77px) -
   вся выделенная область становится кликабельной. Текст оставляем
   визуально внизу (как было) через flex+align-items:flex-end, а не
   через простой width:100%;height:100%, который сдвинул бы текст
   наверх (он в потоке, а не absolute сам по себе). */
#ad-pda-main-link-for-mobile__link {
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
}

/* Пробовал добавить flex-центрирование для .catalog-item h3 (главная
   магазина) - на реальном сайте это раздуло поле названия до огромной
   пустой высоты (не воспроизвелось в моём тестовом окружении, значит
   дело в чём-то, чего у меня нет под рукой - JS, другой CSS-файл или
   что-то ещё). Откатил.

   Вторая попытка - иначе. У h3 в .ad-categories-top-img-shop-container
   жёстко forced height:auto!important - h3 физически не может
   растягиваться, пустое место снизу - это свободное место в самом
   <td> (он растягивается по высоте ряда через flex на <tr>). Поэтому
   центрируем на уровне td: делаем сам td flex-колонкой (перебивая его
   собственный display:block!important той же обёртки), а h3 внутри
   него - растягивающимся (flex:1) и центрирующим текст. Высота h3 как
   таковая (auto!important) не трогается - её просто ЗАПОЛНЯЕТ flex:1
   изнутри контейнера, а не через изменение height. */
/* ПРЕДЫДУЩИЕ ДВЕ ПОПЫТКИ (см. историю) целились в класс
   .ad-categories-top-img-shop-container - его в реальном HTML вообще
   нет (проверено: 0 совпадений в выгруженной странице). Настоящая
   обёртка - .gl-catal (rd-row rd-margin stop-marg gl-catal), и
   настоящая причина "раздутого" поля названия - правило в my.css
   (архив шаблонов, не design.zip):
     .gl-catal h3 { min-height: 284px; line-height: 1; }
   Явно от другого, более старого макета - под текущую компактную
   4-колоночную сетку (картинки max-height:227px) 284px избыточны.
   <td> тут - самая обычная ячейка таблицы, ничего не форсит её в
   display:block или flex, поэтому центрируем максимально просто:
   уменьшаем min-height до разумного и центрируем текст внутри h3
   через flex. */
.gl-catal h3 {
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Рамка была только вокруг h3 (текстового поля) - .gl-catal table.catalog
   h3 { border:1px solid #c9cac7; } в my.css. При min-height:284px это
   визуально выглядело как рамка "на всю карточку" просто из-за размера,
   но по факту картинку она никогда не охватывала. Переносим рамку на
   уровень всей карточки (td), убираем с h3 - иначе получится двойная
   рамка (снаружи карточки и отдельно вокруг текста). */
.gl-catal table.catalog h3 {
	border: none;
}

/* Рамка через ::after, а не напрямую на td - у td есть свой
   padding-right:15px (зазор до соседней карточки, style.css), и
   прямая рамка на td захватывала этот зазор внутрь себя (граница
   между карточками визуально пропадала - выглядело как одна большая
   рамка на весь ряд). Псевдоэлемент отступает от правого края ровно
   на 15px (right:15px) - рамка обрамляет только само содержимое
   карточки (картинку+текст), а зазор остаётся снаружи неё. */
/* Между рядами карточек не было вообще никакого отступа (карточки
   верхнего и нижнего ряда соприкасались впритык) - добавляем те же
   15px, что и по горизонтали, для единообразия. */
.gl-catal td.catalog-item {
	position: relative;
	vertical-align: top;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 15px;
}

/* Рамка через ::after, а не напрямую на td - у td есть свой
   padding-right:15px (зазор до соседней карточки, style.css) и
   теперь ещё padding-bottom:15px (см. выше) - прямая рамка на td
   захватывала бы оба зазора внутрь себя (границы между карточками
   визуально пропадали бы). Псевдоэлемент отступает от правого и
   нижнего края ровно на 15px - рамка обрамляет только само
   содержимое карточки (картинку+текст), а зазоры остаются снаружи. */
.gl-catal td.catalog-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 15px;
	bottom: 15px;
	border: 1px solid #c9cac7;
	pointer-events: none;
}

/* ПДА (магазин, главная страница /shop): реальный паддинг карточки
   на мобильной - 0/10/10/10 (pda-style-valentin.css:684-686,
   .catalog td.catalog-item{padding:0 10px 10px 10px}), а НЕ 0/15/15/0
   как на десктопе - десктопные значения в рамке (right:15px;
   bottom:15px; left:0) тут не подходят, из-за этого рамка визуально
   "уезжала". Скоуп через body.ad-pda-version-body - реальный признак
   ПДА-шаблона, десктопную (зафиксированную) версию не задевает. */
body.ad-pda-version-body .gl-catal td.catalog-item::after {
	right: 10px;
	bottom: 10px;
	left: 10px;
}

/* Картинки категорий "плавали" - у каждой свои пропорции (не все
   квадратные), а width:100% + max-height:227px без object-fit давало
   РАЗНОЕ поведение в зависимости от исходного соотношения сторон
   конкретного фото. object-fit:cover решает это. Пропорция - строго
   квадрат 1:1 (явное указание, было 205/227 ≈ 0.9:1 - недостаточно
   квадратно). aspect-ratio (не фиксированная height) держит одну и
   ту же пропорцию при любой ширине карточки - десктоп и мобильная
   получают одинаково квадратные фото. */
.gl-catal table.catalog img {
	float: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	max-height: none;
}

/* Главная страница магазина (десктоп): весь контент после пунктирного
   разделителя (border-bottom:3px dashed у .rd-box-11 .line-2 -
   обёртка заголовка "ИНТЕРНЕТ-МАГАЗИН") сдвигаем на 10px вправо.
   Три блока: .gl-catal (сетка категорий) и .shop-intro-text (текст
   описания) лежат ВНУТРИ той же обёртки .rd-box-11.rdnopad, что и
   заголовок - их можно смещать напрямую. .rd-box-12 (блок "Новинки")
   - СОСЕДНИЙ блок уровнем выше, а не потомок; класс этот также
   используется на других страницах магазина (sh1.t, sh2.t) - поэтому
   берём именно тот, что идёт СРАЗУ ПОСЛЕ .rd-box-11.rdnopad (только
   на этой странице), через комбинатор ~, не трогая чужие страницы. */
@media (min-width: 821px) {
	.gl-catal,
	.shop-intro-text {
		margin-left: 10px;
	}
	.rd-box-11.rdnopad ~ .rd-box-12 {
		margin-left: 10px;
	}
}

/* ===== ПДА, страница новостей (/news/) ===== */

/* Форма подписки - той же ширины, что карточки новостей ниже.
   Контейнер .rd-col-12 замерен: 10..406 (вылезает за экран из-за
   всё того же непогашенного margin-right:-16px у .rd-row.rd-margin),
   карточки: 15..385. Отсюда margin-left:5px (10+5=15) и
   margin-right:21px (406-21=385). !important нужен - перебивает моё
   же десктопное правило .vil-main-box-15-line-3:has(.newsPodpiska)
   {margin-right:0 !important} (без скоупа, тоже с !important).
   Скоуп ".rd-col-12 >" не задевает ПДА-главную - там обёртка формы
   .rd-col-8 (у неё своё правило выше). */
body.ad-pda-version-body .rd-col-12 > .vil-main-box-15-line-3:has(.newsPodpiska) {
	margin-left: 5px !important;
	margin-right: 21px !important;
}

/* Строка крошек: флекс - крошки слева, кнопка "+ новость" справа.
   Кнопка (класс ad-news-add-pill, шаблон pda/nw1.t) - обычный <a>
   внутри .ad-news-breadcrumb, поэтому вид "пилюли" (рамка, шрифт,
   отступы текста, радиус) наследует автоматически от общего правила
   .ad-news-breadcrumb a (vilord.css выше) - стили один в один с
   крошками, отдельно задаётся только зелёный цвет текста (#5C9F00 -
   тот же, что был у ссылки "[ Добавить новость ]", замерен по факту).
   padding-left:5px вместо 10 - первая пилюля встаёт на 15px от края
   экрана, ровно по левому краю рамки карточки новостей (замерено:
   контейнер крошек начинается на 10, карточка на 15). Симметрично
   справа: 5px - правый край кнопки на 385, по правому краю карточки. */
body.ad-pda-version-body .ad-news-breadcrumb {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 5px;
	padding-right: 5px;
}

body.ad-pda-version-body .ad-news-breadcrumb .ad-news-add-pill {
	color: #5C9F00;
	white-space: nowrap;
}

/* Скругление углов пилюль (крошки + кнопка "+ новость") - как у рамки
   поля поиска (#queryField, замерено: border-radius 3px; у пилюль
   было 6px из общего правила). Скоуп ПДА - на десктопных
   (зафиксированных) макетах радиус пилюль остаётся прежним, 6px. */
body.ad-pda-version-body .ad-news-breadcrumb a,
body.ad-pda-version-body .ad-news-breadcrumb .breadcrumb-curr {
	border-radius: 3px;
}

/* Крошки страниц магазина (ПДА) - тот же источник ([itemtype*=
   "BreadcrumbList"] в pda-style-valentin.css), та же неточность:
   комментарий в файле утверждает "рамка как у поля поиска", но
   border-radius там остался 6px вместо реальных 3px у поля поиска -
   тот же фикс, что и для крошек новостей. Без скоупа под body -
   pda-style-valentin.css и так грузится только на ПДА. */
body.ad-pda-version-body [itemtype*="BreadcrumbList"] [itemprop="item"],
body.ad-pda-version-body [itemtype*="BreadcrumbList"] .current {
	border-radius: 3px !important;
}

/* Страницы категорий магазина: карточки товаров (.list-item,
   valentin.css) должны выравниваться левым/правым краем с парами
   миникарточек подкатегорий (.gl-catal.ad-categories-top-img-shop-
   -container) над ними - каждая карточка товара = 2 миникарточки +
   зазор между ними. У миникарточек зазор 10px, а у карточек товара
   был свой, несогласованный - margin-right:20px и ширина
   calc(100%/4 - 60px/4). Меняем на те же 10px (и пересчитываем
   формулу ширины: 3 зазора по 10px = 30px, не 60px). Отступ снизу
   между рядами (margin-bottom) не трогаем - речь только про
   горизонтальное выравнивание.
   ВАЖНО: в valentin.css у .list-item уже есть готовая адаптивная
   сетка (1 колонка ≤575px, 2 колонки 576-767px, 3 колонки 768-991px,
   4 колонки ≥992px - подробности в самом файле). Базовое правило
   (без медиа-запроса, которое мы тут правим) - это и есть 4-колоночный
   вариант, активный только на ≥992px за счёт .list-item:nth-child(4n)
   в этой же медиа-границе. Моя правка была без привязки к ширине и
   перебивала ВСЕ брейкпоинты разом (сломало мобильную - карточки
   сжимались в 3+ узкие колонки). Оборачиваем в тот же min-width:992px,
   под который эта раскладка и рассчитана - на более узких экранах
   всё возвращается к оригинальным правилам valentin.css. */
@media (min-width: 992px) {
	.list-item {
		width: calc(100% / 4 - 30px / 4);
		margin-right: 10px;
		margin-bottom: 10px;   /* было 20px (valentin.css) - равняем с горизонтальным 10px */
	}
	/* Отступ от сетки миникарточек подкатегорий до первого ряда
	   товаров - было 5px (table.catalog{margin-bottom:5px!important}
	   в left-expandable-menu-...css), тоже равняем с 10px. */
	table.catalog.catalog-with-image {
		margin-bottom: 10px !important;
	}
}

/* Миникарточки подкатегорий (страницы категорий, класс .gl-catal
   ЗАЕДНО с .ad-categories-top-img-shop-container - другой контекст,
   не путать с сеткой на главной магазина) - у их <td> уже есть
   родная рамка без отступа (.ad-categories-top-img-shop-container
   td{border:1px solid #c9cac7; padding:0!important}). Мой ::after
   (rule выше, рассчитан под 15px-й отступ страницы /shop) тут не
   нужен - накладывался поверх со сдвигом и залезал на картинку.
   Просто отключаем его для этой комбинации классов, оставляем
   родную рамку как есть. */
.gl-catal.ad-categories-top-img-shop-container td.catalog-item::after {
	display: none;
}

/* Страница товара (sh4.t): переключатель фасовки - системный блок uCoz
   (.uv-block-chips, генерируется движком на лету, разметки в наших
   шаблонах нет). Была радиокнопка + текст, делаем нажимаемую кнопку.
   Реальная разметка: label.uv-item.uv-chip оборачивает
   input.uv-item-input[type=radio], span.uv-chip-label и (добавляется
   скриптом variant-prices.js, данные из uAPI) span.uv-chip-price.
   Кружок прячем не через display:none (тогда клавиатурная навигация
   по радио-группе ломается), а через классический visually-hidden -
   элемент остаётся в DOM и доступен для скринридеров и Tab, просто
   визуально не виден.
   Сетка - grid на 4 равные колонки, а не flex+wrap: раньше мл и цена
   стояли в кнопке в одну строку, раздували её ширину, и в ряд влезало
   только 2 из 4 (переносило на второй ряд). Grid гарантирует один ряд
   из 4 кнопок всегда, независимо от длины текста внутри.
   Внутри кнопки - колонка: сверху мл, снизу цена, шрифт обеих строк -
   тот же, что у соседних характеристик (Наличие, Вес, Цена: Open Sans
   16px/400/rgb(75,78,68)), без своего усиления - выбранную кнопку
   отличает только рамка через :has() (этот приём уже есть в файле,
   .newsPodpiska). Радиус скругления - как у рамки поля поиска
   (#queryField - 3px, тот же приём уже использован для крошек новостей
   и магазина). */
/* Родная строка "Единица:" (.line-5) - НЕ flex сама по себе, а span
   вокруг блока кнопок - display:inline-block;min-width:90px без
   заданной ширины (правило .rd-box-666 .line-5 span в style.css/
   /_st/my.css, не наше) - поэтому он сжимается по содержимому и
   оставляет пустой хвост до правого края строки (там же, где кончается
   "Цена:" строкой ниже). Превращаем именно эту строку (только там, где
   есть кнопки фасовки - :has(), чтобы не задеть остальные .line-5 на
   сайте) в flex-ряд и растягиваем span с кнопками на всю оставшуюся
   ширину - блок кнопок дотягивается вровень с "Цена:" под ним. */
.line-5:has(.uv-block-chips) {
	display: flex;
	align-items: flex-start;
}

.line-5:has(.uv-block-chips) span:has(.uv-block-chips) {
	flex: 1;
}

/* "Единица:" должна стоять вровень с верхней строкой внутри кнопок
   (мл), "Цена:" (строка ниже, .uv-price-line, значение убрано в sh4.t
   через <?if($VARIATIONS$)?> - цена и так видна в активной кнопке) -
   вровень с нижней строкой внутри кнопок (руб.). Кнопка (.uv-item.uv-chip)
   55px высотой, паддинг 6px+бордер 1px сверху = текст "мл" начинается
   на 7px ниже верха кнопки, "руб." - сразу под ним. Замерено на живой
   странице (getBoundingClientRect): без сдвига "Единица:" стоит по
   центру всей кнопки (на 17px ниже верха), "Цена:" отдельной строкой
   на 55px ниже (после кнопки). Поэтому: подпись "Единица:" опускаем на
   7px (было 17 из-за center, стало 7, как у "мл" в кнопке); "Цена:"
   поднимаем на 27px - ровно на высоту версии "Единица:"+кнопки минус
   расстояние до строки "руб." внутри кнопки. */
.line-5:has(.uv-block-chips) > span:first-child {
	margin-top: 7px;
}

/* БАГ (найден и исправлен 2026-08-18): класс uv-price-line стоит на
   строке "Цена:" в sh4.t у ВСЕХ товаров без исключения (не только у
   товаров с кнопками фасовки) - правило без привязки к :has(.uv-block-chips)
   поднимало "Цена:" на 27px и наезжало на "Единица:" на каждой
   странице товара в каталоге, где нет .uv-block-chips. Обязательно
   scoped через родителя (.line-4), который содержит .uv-block-chips -
   "Единица:" и "Цена:" (.uv-price-line) - соседние .line-5 внутри
   одного .line-4 (см. sh4.t). */
.line-4:has(.uv-block-chips) .uv-price-line {
	margin-top: -27px;
}

.uv-block-chips .uv-items {
	display: flex;
	justify-content: space-between;
}

.uv-block-chips .uv-item-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.uv-block-chips .uv-item.uv-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: 6px 8px;
	border: 1px solid #c9cac7;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	user-select: none;
	/* Неактивная кнопка - тот же цвет рамки/текста, что и активная
	   (единый источник цвета ниже, на .uv-chip-label/.uv-chip-price),
	   просто более блёклый через opacity - оттенок не меняется, меняется
	   только "проявленность". Полная непрозрачность - только у активной
	   кнопки (:has(checked) ниже), чтобы взгляд сразу цеплялся за неё. */
	opacity: .45;
	transition: border-color .15s, opacity .15s;
	/* min-height резервирует итоговую высоту (подпись+цена, 2 строки)
	   ЗАРАНЕЕ, до того, как variant-prices.js подставит цену (сетевой
	   запрос, задержка). Без этого кнопка сначала 34.8px (только
	   подпись), потом резко вырастает до 55.6px, и всё, что ниже
	   (Наличие, кнопки) - прыгает вниз. Значение замерено на живой
	   странице для этой комбинации паддинга/шрифта. justify-content
	   сменён с center на flex-start по той же причине, что и на ПДА
	   (см. pda-style-valentin.css): при 2 строках контент и так
	   заполняет всю высоту без остатка, поэтому flex-start даёт ТУ ЖЕ
	   позицию, что и center в финальном состоянии - но при неполном
	   (1-строчном) контенте подпись сразу стоит там, где будет в
	   итоге, без прыжка внутри самой кнопки. */
	min-height: 55.6px;
}

.uv-block-chips .uv-item.uv-chip:hover {
	border-color: #9a9a9a;
	opacity: .7;
}

.uv-block-chips .uv-item.uv-chip:has(.uv-item-input:checked) {
	border-color: #3a3a3a;
	opacity: 1;
}

.uv-block-chips .uv-chip-label,
.uv-block-chips .uv-chip-price {
	font-family: "Open Sans";
	font-size: 16px;
	font-weight: 400;
	color: rgb(75, 78, 68);
	line-height: 1.3;
}

/* Кнопки +/- у поля количества (qty-stepper.js, подключён в BFOOTER -
   работает на любой странице с полем id="qid-{ID}-basket": страница
   товара, ПДА, информеры "быстрая покупка"). Скрипт оборачивает
   [минус][поле][плюс] в один <span class="qty-stepper-group"> - рамка
   и скругление углов - на этой обёртке целиком (единый "булочка"-вид),
   не на каждой кнопке отдельно. overflow:hidden обрезает углы поля
   количества и кнопок по скруглению группы. Радиус - тот же, что у
   поля поиска (#queryField, 3px) - этот приём уже используется в
   файле (крошки, кнопки фасовки). */
/* height:50px + box-sizing:border-box - рамка входит В эту высоту, а
   не добавляется поверх неё - иначе группа с рамкой была бы выше
   кнопки "В корзину" (у той рамки нет, border:0 в native .line-666
   input[type=button]). Кнопки и поле внутри - height:100% (ниже),
   чтобы подстроиться под реальную высоту содержимого, а не быть
   жёстко прибитыми к 50px и вылезать за рамку.
   Толщина и цвет рамки - те же, что у родных разделительных линий
   между блоками характеристик (.rd-box-666 .line-4{border-top:1px
   solid #d5d9ca} в style.css - разделитель под "Единица"/"Наличие"). */
.qty-stepper-group {
	display: inline-flex;
	align-items: stretch;
	height: 50px;
	box-sizing: border-box;
	border: 1px solid #d5d9ca;
	border-radius: 3px;
	overflow: hidden;
	vertical-align: top;
}

/* Кнопки без своей рамки (она теперь на группе целиком) и без заливки
   по умолчанию - заливка появляется только при наведении. Ширина зоны
   клика - была 34px, теперь +10px (44px) по просьбе. */
.qty-stepper-btn {
	height: 100%;
	width: 44px;
	box-sizing: border-box;
	padding: 0;
	border: none;
	background: transparent;
	color: #4b4e44;
	font-family: 'Open Sans';
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qty-stepper-btn:hover {
	background: #e3e3e1;
}

/* Поле количества - родная inset-рамка браузера убирается (она теперь
   на группе), фон прозрачный - белым остаётся общий фон группы. */
.qty-stepper-group input[id^="qid-"][id$="-basket"] {
	border: none;
	background: transparent;
	height: 100% !important;
	box-sizing: border-box;
	padding: 0;
	text-align: center;
}

/* Отодвигаем "Купить" от группы [-][число][+] - было впритык (0 между
   полем и кнопкой в родной разметке). id общий шаблон - работает для
   любого товара (bid-{ID}-basket), не только 7732. Радиус - тот же,
   что у поля поиска (см. комментарий выше про .qty-stepper-group). */
[id^="bid-"][id$="-basket"] {
	margin-left: 14px;
	border-radius: 3px;
}

/* "Добавить в избранное" - тот же радиус. Фон #e6edb5 задаёт родное
   правило .tovarto .line-7.line-9>div в my.css, мы его не трогаем. */
.tovarto .line-7.line-9 > div {
	border-radius: 3px;
}

/* "Добавить в избранное" -> "В избранное" - меняем только текст
   (родное правило .tovarto .wish.wadd:before задавало прежний текст
   через content), шрифт/цвет/размер не трогаем - остаются родные. */
.tovarto .wish.wadd:before {
	content: "В избранное";
}

/* "Удалить из избранного" (товар уже в избранном) -> "Из избранного" -
   меняем только текст, шрифт/цвет/размер не трогаем, как и у wadd. */
.tovarto .wish.wdel:before {
	content: "Из избранного";
}

/* "Сравнить" - тот же радиус. Фон #fbfac7 задаёт родное правило
   .compare-widget-wrapper в style.css, мы его не трогаем. */
.compare-widget-wrapper {
	border-radius: 3px;
}

/* Значок сравнения (.compare-widget-add, фон-картинка) -> текст
   "В сравнение". Шрифт/цвет не задаём - наследуются от родного правила
   .compare-widget-wrapper{color:#323232!important;font-family:'Open
   Sans'!important} (style.css). Меняем только то, что нужно для показа
   текста вместо иконки: убираем картинку, возвращаем обычный поток
   (родная разметка держала иконку через position:absolute под
   32x32px - тексту это не нужно), центрируем по высоте кнопки. */
.compare-widget-add {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	height: 50px !important;
	margin: 0 !important;
	float: none !important;
	background-image: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	cursor: pointer;
}

.compare-widget-add:before {
	content: "В сравнение";
}

/* Состояние "уже в сравнении" (значок .compare-widget-remove - не
   трогаем, остаётся как есть) - ссылка "Сравнить" рядом с ним:
   шрифт уже совпадает с соседними кнопками (наследуется от родного
   .rd-box-666 .line-9 a{color:#323232!important;font-family:'Open
   Sans'!important} - тот же, что у "В корзину"). Не центровалась по
   высоте только из-за родных margin-top/bottom:4px (style.css) -
   вместе с align-items:center на обёртке (выше) это сбивало центр;
   убираем только вертикальные отступы, левый (55px, освобождает место
   под значок) и правый - не трогаем. */
.compare-widget-remove + a {
	/* align-items:center на обёртке (выше) центрирует margin-box
	   ссылки, а не сам текст - и без переопределения родная ссылка
	   визуально стояла на 6px выше центра. Асимметричный отступ сдвигает
	   видимый контент только на ПОЛОВИНУ своей величины (сам margin-box
	   растёт на всю величину, но центрируется - значит для сдвига на
	   6px нужен margin-top 12px, не 6). Проверено на живой странице -
	   with margin-top:12px разница с центром ровно 0px. */
	margin-top: 12px !important;
	margin-bottom: 0 !important;
}

.compare-widget-wrapper {
	padding: 0 !important;
	min-height: 50px !important;
	height: 50px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Строка "количество/купить/избранное/сравнить" - родная 12-колоночная
   сетка rd-framework (inline-block, фиксированные проценты у колонок:
   rd-col-2 16.67%, rd-col-5 x2 41.67% каждая). После добавления кнопок
   +/- (qty-stepper.js) первая колонка стала слишком узкой для своего
   содержимого - "Купить" переносился на вторую строку.

   Долго искал точную причину через песочницу (офлайн-копия страницы,
   локальный сервер, оба тестовых товара - с кнопками фасовки и без) -
   оказалось, что поле количества и кнопка "Купить" в my.css САМИ заданы
   в процентах от родителя (input[type=text] - 35%, input[type=button] -
   65%, вместе ровно 100%) - это НЕ баг, а изначальный расчёт под
   исходные два элемента без зазора между ними. Как только я делал
   колонку резиновой (auto) или просто шире, оба процента росли
   пропорционально и продолжали занимать 100% места, не оставляя
   места под новые кнопки +/- - поэтому простое расширение колонки
   никогда не помогало само по себе.
   Решение - зафиксировать оба поля в пикселях (снять зависимость от
   процентов), а колонку задать под точную сумму: 34(минус)+50(поле)+
   34(плюс)+14(отступ)+100(Купить) = 232, взято с запасом 264.
   Правки полей - общие для всех товаров (селектор по шаблону id, не
   привязаны к :has(.line-666)), т.к. кнопки +/- тоже везде. */
input[type="text"][id^="qid-"][id$="-basket"] {
	width: 44px !important;
}

/* До того, как qty-stepper.js обернёт поле в .qty-stepper-group, оно
   ещё "голое" - прямой потомок .line-666, шириной всего 44px (правило
   выше) - а после обёртки блок [-1+] становится 134px (с кнопками).
   Видимый скачок ширины на весь блок. Даём "голому" полю сразу
   финальную ширину/рамку/высоту группы - тогда скачка нет (кнопки
   +/- просто появляются внутри уже нужного по размеру блока, а не
   расширяют его). Селектор через ">" (прямой потомок) - после обёртки
   поле уже не прямой потомок .line-666, а внутри .qty-stepper-group,
   это правило перестаёт матчить само собой (тот же приём, что и в
   pda-style-valentin.css). Специфичность равна правилу выше
   (класс+элемент+2 атрибута = элемент+3 атрибута), побеждает как
   более позднее в этом же файле. */
.line-666 > input[id^="qid-"][id$="-basket"] {
	width: 134px !important;
	border: 1px solid #d5d9ca;
	border-radius: 3px;
	height: 50px;
	box-sizing: border-box;
	text-align: center;
}

[id^="bid-"][id$="-basket"] {
	width: 134px !important;
}

/* 298px (не 304) - см. правку ниже (right:160px у "Избранное"/"Сравнить",
   2026-08-19): реальная ширина строки (.line-4) на сайте не превышает
   612.8px ни при каком размере окна (у контента есть свой max-width) -
   при 304+164+150=618 однострочная раскладка справа налезала на этот
   блок слева на ~5px ДАЖЕ на самом широком экране. Забрано 6px здесь
   и 4px с зазора между "Избранное"/"Сравнить" (был 14, стал 10) -
   суммарно 10px запаса, при 612.8px реальной ширины остаётся 4.8px
   свободного места. */
.rd-row:has(.line-666) > .rd-col-2 {
	width: 298px !important;
}

/* "Избранное"/"Сравнить" - одинаковая ширина в любом состоянии
   (нажато/не нажато), прижаты к ПРАВОМУ краю строки - там же, где
   кончаются родные разделительные линии (.line-4{border-top:1px solid
   #d5d9ca}). У .rd-row есть родной "хвост" 16px за пределами .line-4
   (rd-margin), поэтому позиционируем не от rd-row, а от самого .line-4
   (:has(.line-666), чтобы не задеть остальные .line-4 на сайте) -
   ставим ему position:relative и позиционируем колонки absolute от
   него. Это заодно снимает все прошлые сложности с процентами/flex -
   элементы вне потока, considerations родной сетки их не касаются.

   Ширина 150px - под "Из избранного" (самый длинный вариант текста
   из всех четырёх состояний). ВАЖНО: мерить точно на живом сайте, а
   не в песочнице - там шрифты грузятся кросс-доменно и могут не
   применяться, из-за чего замер выходит заниженным (первая попытка,
   127px по замеру в песочнице, оказалась мала - "Из избранного"
   переносилось на 2 строки; реальная ширина текста на живом сайте в
   одну строку - 144.55px, 150 взято с запасом). Зазор между кнопками -
   10px (было 14, сокращено 2026-08-19 вместе с шириной col1 - см.
   комментарий у .rd-col-2 выше).

   ТОЛЬКО для по-настоящему широких экранов (min-width:1280px).
   ИСПРАВЛЕНО (2026-08-19): раньше порог был 801px, симметрично
   родному брейкпоинту .rd-col-800-12 на 800px - но реальная ширина
   .line-4 (max-width всей страницы) на диапазоне ~801-1279px (напр.
   1024px окно - .line-4 всего 485.8px) заведомо меньше, чем нужно
   этой однострочной раскладке (минимум ~608px) - правый блок
   наезжал на левый на десятки-сотни пикселей на любом окне уже,
   чем ~1270px. Добавлен отдельный "средний" диапазон
   (801-1279px, в две строки по 2 элемента) - см. ниже, после этого
   блока. На узких экранах (<801px) - прежнее поведение (auto-ширина,
   обычный поток, родное стекирование rd-col-800-12). */
@media (min-width: 1280px) {
	.line-4:has(.line-666) {
		position: relative;
	}

	.rd-row:has(.line-666) > .rd-col-5.tovarto {
		position: absolute !important;
		top: 21px;
		right: 160px;
		width: 150px !important;
	}

	.rd-row:has(.line-666) > .rd-col-5:has(.compare-widget-wrapper) {
		position: absolute !important;
		top: 21px;
		right: 0;
		width: 150px !important;
	}

	/* .line-7.line-9 (обёртка "Избранное") и .line-8.line-9 (обёртка
	   "Сравнить") - у них нет своей ширины (width:auto), а родное
	   правило .rd-margin > * > * {margin-right:16px} (rd-framework.css,
	   общий приём отступов сетки) сжимает auto-ширину блока ровно на
	   16px. Без этой правки колонка 150px давала внутренний блок только
	   134px - и "Из избранного" переносилось на 2 строки. Обнуляем
	   именно margin-right (не трогаем margin-bottom - тот же родное
	   правило его тоже даёт, но по вертикали тут разрыва нет). */
	.rd-row:has(.line-666) .line-7.line-9,
	.rd-row:has(.line-666) .line-8.line-9 {
		margin-right: 0 !important;
	}
}

/* ========================================================================
   "Средний" десктоп (801-1279px, напр. планшет, ноутбук, суженное окно
   браузера) - НЕ мобильный ПДА-шаблон (тот переключается по устройству,
   не по ширине окна), обычный десктопный шаблон, просто в узком окне.
   На этом диапазоне однострочная раскладка выше (@media min-width:1280px)
   не помещается (реальная ширина .line-4 меньше нужного минимума ~608px),
   а родная разбивка в один столбец (rd-col-800-12, <801px) для этого
   диапазона ещё не включается. Добавлена своя раскладка - по 2 элемента
   в строке (то же решение, что и для ПДА, см. pda-style-valentin.css,
   только тут ширина строки не фиксированная, а изменяется вместе с
   окном - поэтому используются проценты/fr, а не пиксели). */
@media (min-width: 801px) and (max-width: 1279px) {
	.rd-row:has(> .rd-col-2 .line-666) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		/* У самой строки (.rd-margin) родное правило задаёт
		   width:calc(100% + 16px) и margin-right:-16px ("растянуть и
		   обрезать", тот же приём, что и margin-right:16px у внуков ниже) -
		   без сброса grid-колонки считались от ширины на 16px больше
		   родителя (.line-4) и вылезали за реальный край. Тот же фикс,
		   что уже применялся для ПДА (pda-style-valentin.css). */
		width: 100% !important;
		margin-right: 0 !important;
	}

	.rd-row:has(> .rd-col-2 .line-666) > .rd-col-2 {
		grid-column: 1 / 3;
		width: auto !important;
	}

	.rd-row:has(> .rd-col-2 .line-666) > .rd-col-5:nth-child(2) {
		grid-column: 1;
		width: auto !important;
	}

	.rd-row:has(> .rd-col-2 .line-666) > .rd-col-5:nth-child(3) {
		grid-column: 2;
		width: auto !important;
	}

	/* Тот же приём с margin-right:16px (.rd-margin > * > *), что и в
	   однострочной раскладке выше - иначе "Из избранного" тоже может
	   переноситься внутри своей половины строки. */
	.rd-row:has(> .rd-col-2 .line-666) .line-7.line-9,
	.rd-row:has(> .rd-col-2 .line-666) .line-8.line-9 {
		margin-right: 0 !important;
	}

	/* "Цена:" под кнопками фасовки - её значение уже блокируется в
	   sh4.t (<?if($VARIATIONS$)?>), остаётся только пустая подпись
	   "Цена:". На широком экране (1 ряд кнопок) её просто чуть
	   поднимают margin-top:-27px (см. выше) - при 2 рядах кнопок
	   (ниже) высота блока другая, и это же значение уже не подходит.
	   Проще и надёжнее скрыть строку целиком - тот же приём, что и на
	   ПДА (pda-style-valentin.css). */
	.line-4:has(.uv-block-chips) .line-5:not(:has(.uv-block-chips)) {
		display: none;
	}

	/* Кнопки вариаций (.uv-block-chips) - переносим по 2 в ряд вместо
	   попытки уместить все 4 в одну строку (родное flex без wrap -
	   при недостатке места кнопки просто обрезались/налезали друг на
	   друга). flex-basis calc(50% - 4px) с gap:8px даёт ровно 2 в ряд
	   независимо от фактической ширины строки. */
	.uv-block-chips .uv-items {
		flex-wrap: wrap;
		gap: 8px;
	}

	.uv-block-chips .uv-item.uv-chip {
		flex: 1 1 calc(50% - 4px);
	}

	/* По просьбе - строку 1 ([-1+]+Купить) тоже делим 50/50, тем же
	   gap:14px, что и у строки 2 (Избранное+Сравнить) выше - тогда
	   все 4 элемента стоят точно друг под другом одинаковой ширины
	   (то же решение, что и на ПДА, pda-style-valentin.css). */
	.line-666 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		/* .line-666 сам - внук .rd-margin (row > rd-col-2 > line-666),
		   попадает под родное .rd-margin > * > * {margin-right:16px} -
		   без сброса вся сетка была на 16px уже, чем у rd-col-5 в
		   строке 2 (те же 8px на каждую из 2 колонок), и ширины не
		   совпадали. */
		margin-right: 0 !important;
	}

	.qty-stepper-group,
	.line-666 [id^="bid-"][id$="-basket"] {
		width: auto !important;
		margin-left: 0 !important;
	}

	.qty-stepper-group .qty-stepper-btn,
	.qty-stepper-group input[id^="qid-"][id$="-basket"] {
		flex: 1 1 0;
		width: auto !important;
	}

	/* Шрифт кнопок в этом диапазоне (801-1279px) - тот же баг, что уже
	   чинили на ПДА: design/media.css содержит @media(max-width:1179px)
	   с font-size:12px!important для этих же элементов - оно ловит
	   ЛЮБОЙ узкий экран, не только ПДА-шаблон. Перебиваем той же
	   специфичностью/схемой, что уже сработала на ПДА (pda-style-valentin.css). */
	.tovarto .wish.wadd:before {
		font-size: 16px !important;
	}

	.rd-box-666 .line-9 a {
		font-size: 16px !important;
	}

	.line-666 input[id^="bid-"][id$="-basket"] {
		font-size: 16px !important;
	}
}

/* ============================================================
   Карточка каталога (sh3.t/pda/sh3.t): для товаров С ВАРИАЦИЯМИ
   ФАСОВКИ (сейчас единственный - id 7732, признак - запись в
   variant-prices.json) карточка вместо "В ассортименте/Наличие/Цена"
   получает кликабельные кнопки вариаций - разметку строит и вставляет
   qty-stepper.js (см. комментарий там), сюда только размер/раскладка.

   Переиспользуем цвет/рамку/checked-состояние базовых правил
   .uv-block-chips выше в этом же файле (страница товара) - визуально
   тот же "кнопочный" стиль. Но карточка каталога намного теснее:
   бюджет высоты заменяемого блока замерен на живой странице (сетка
   820px) - 95px ДО строки "Описание/корзина/избранное" - поэтому
   компактный размер (мелкий шрифт, минимальные паддинги), а не
   один в один со страницей товара (там 55.6px на одну кнопку, тут
   таким кнопкам просто негде поместиться в 2 ряда).

   Специфичность: составной селектор .uv-block-chips.catalog-card-chips
   (оба класса на одном элементе) специфичнее базового .uv-block-chips
   - поэтому гарантированно перебивает его НЕЗАВИСИМО от порядка файлов
   в каскаде (важно для ПДА: pda-style-valentin.css грузится ПОСЛЕ
   этого файла и содержит свои .uv-block-chips .uv-items{display:flex},
   при равной специфичности он бы победил по порядку - составной
   селектор снимает эту зависимость). */
.uv-block-chips.catalog-card-chips {
	/* Слева/справа - тот же отступ (5px), что и gap МЕЖДУ кнопками (см.
	   .uv-items ниже) - по просьбе, чтобы отступ до рамки карточки был
	   не теснее и не шире зазора между самими кнопками. Сверху не
	   трогаем - там верхний край блока совпадает с тем же местом, где
	   раньше начиналась строка "В ассортименте" (не жаловались). Снизу -
	   18px по отдельной просьбе (больше, чем 5px слева/справа/gap). */
	padding: 0 5px 18px 5px;
}

.uv-block-chips.catalog-card-chips .uv-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	width: 100%;
	justify-content: initial;
}

.uv-block-chips.catalog-card-chips .uv-item.uv-chip {
	min-height: 0;
	padding: 3px 2px;
}

.uv-block-chips.catalog-card-chips .uv-chip-label,
.uv-block-chips.catalog-card-chips .uv-chip-price {
	font-size: 11px;
	line-height: 1.25;
	min-width: 0;
}

/* ============================================================
   Строка "Описание"/"Инструкция" + корзина + избранное (.order-box,
   sh3.t/pda/sh3.t - каждая карточка каталога, не только с вариациями).
   Родная раскладка (design/valentin.css) - примерно 50/25/25 (левый
   блок flex-grow:1 тянет всё свободное место, правый - жёсткие 50%,
   поделённые пополам на 2 иконки). По просьбе - точно 60/20/20,
   содержимое каждой зоны по центру и по горизонтали, и по вертикали.
   Общий файл для десктопа и ПДА - структура разметки одинаковая в
   обоих шаблонах (проверено ранее в этой же сессии). */
.order-box {
	align-items: stretch;
	/* Родной padding:5px (valentin.css) слева/справа не даёт процентам
	   40/60 у детей посчитаться от полной видимой ширины строки (проценты
	   flex-basis считаются от content-box, то есть без паддинга родителя) -
	   получалось 57.3/19.1/19.1 вместо точных 60/20/20. Обнуляем именно
	   left/right (верх/низ - 5px - не трогаем, вертикальный отступ строки
	   не при чём тут). Своя внутренняя "воздушность" у иконок и текста
	   всё равно есть за счёт их собственного padding (2px/4px, ниже). */
	padding-left: 0;
	padding-right: 0;
}

.order-box__left-box {
	flex: 0 0 60%;
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.order-box__right-box {
	flex: 0 0 40%;
	width: 40%;
}

.order-box__basket,
.order-box__wish {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   Страница материала новости + комментарии (nw2.t/pda/nw2.t): строка
   хлебных крошек ("Главная » 2026 » Август » 17"). По просьбе -
   переносим блок "Поделиться..." (виджет Яндекс.Шаринга, в шаблоне
   раньше стоял отдельно внутри table.eBlock, между строкой "Категория/
   Просмотров/..." и футером таблицы) прямо в эту строку, по правому
   краю.

   ВАЖНО про сам шаблон (исправлено ПОПУТНО, не отдельной правкой):
   родной <div>Главная »...</div> с крошками в исходном шаблоне НЕ
   закрывался явным </div> - следующий за ним контент (обе таблицы:
   и eBlock, и комментарии, и форма добавления комментария) фактически
   весь оказывался ВНУТРИ этого одного div (проверено на живой
   странице через DOM: table.eBlock, table комментариев и div.commReg
   все были детьми этого div). Без исправления этого бага
   display:flex тут же поломал бы всю страницу целиком (превратил бы
   весь текст статьи и комментарии в горизontальные flex-элементы
   этого div). Шаблон обновлён - div теперь закрывается сразу после
   вставленного сюда же блока "Поделиться", ДО таблицы. */
.ad-news-article-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Заголовок новости (nw2.t/pda/nw2.t, .eTitle -> $ENTRY_NAME$) - по
   просьбе, тот же стиль, что и у заголовка товара на странице товара
   (шрифт Intro 37px, серый #666666, обычная насыщенность - переиспользуем
   класс .vilord-product-page-h1, он уже есть в файле выше). Родной
   .eTitle (design/_st/my.css) - мелкий жирный зелёный Verdana 13px,
   не трогаем сам класс (вдруг что-то ещё на него завязано), просто
   ДОБАВЛЯЕМ эти классы рядом в шаблоне - побеждают по порядку каскада
   (my.css грузится раньше vilord.css).

   background:none - у родного .eTitle есть картинка-декор (маленькие
   точки слева, /.s/t/956/16.gif) под паддинг padding-left:17px,
   который наш .vilord-product-page-h1 (padding:0) убирает - без этого
   картинка осталась бы висеть под текстом без места под себя,
   выглядело бы как мусор слева. На странице товара такой картинки нет
   вообще, поэтому просто убираем.

   Время публикации ($ADD_TIME$) - на странице товара такого элемента
   нет вообще (там нечего показывать), добавили свой мелкий серый
   класс рядом с шестерёнкой модератора (.vilord-moder-panel, тот же
   класс/поведение float, что и на товаре). ВАЖНО: в шаблоне блок
   времени+шестерёнки стоит ПЕРЕД текстом заголовка (не после, как на
   странице товара) - специально, чтобы он всегда оставался в правом
   верхнем углу, даже если заголовок длинный и переносится на
   несколько строк (проверено на живой странице: если поставить после
   текста, как на товаре, при длинном заголовке блок "падает" на
   последнюю строку переноса - на товаре так не заметно, т.к. там
   заголовки короткие, в одну строку). */
.eTitle.vilord-product-page-h1 {
	background: none;
}

.ad-news-title-time {
	font-size: 12px;
	color: #999;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 400;
	margin-right: 8px;
	vertical-align: middle;
}

.uv-block-chips.catalog-card-chips .uv-chip-price {
	opacity: .8;
}

/* =========================================================================
   ОТМЕНА ЗАГРУЗКИ ШРИФТА FONT AWESOME (77 КБ)
   Все иконки нарисованы SVG ниже, сам шрифт не нужен.
   Переопределяем @font-face на локальный источник — браузер не грузит woff2.
   ========================================================================= */
@font-face {
	font-family: 'FontAwesome';
	src: local('Arial');
	font-weight: normal;
	font-style: normal;
}

/* =========================================================================
   ЗАМЕНА FONT AWESOME НА ВСТРОЕННЫЕ SVG-ИКОНКИ  (v2)
   Иконки: .fa-bars (меню), .fa-remove (крестик), .fa-spinner (загрузка)
   v2: крестик корректно краснеет при наведении в ЛЮБОЙ корзине.
   ========================================================================= */

.fa {
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	vertical-align: -0.125em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-style: normal;
}

.fa::before { content: "" !important; }

/* --- «гамбургер» (меню) --- */
.fa-bars,
.fa-navicon,
.fa-reorder {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M16 132h416c8.8 0 16-7.2 16-16V76c0-8.8-7.2-16-16-16H16C7.2 60 0 67.2 0 76v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16z'/%3E%3C/svg%3E");
}

/* --- «крестик» (удалить / закрыть) — обычный, тёмный --- */
.fa-remove,
.fa-close,
.fa-times {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23000' d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.4c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E");
}

/* Красный крестик при наведении — для ЛЮБОЙ корзины и любой вёрстки.
   (старое правило color:red на SVG не действует, поэтому меняем картинку) */
.fa-remove:hover,
.fa-close:hover,
.fa-times:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23e00000' d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.4c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E");
}

/* --- «спиннер» (загрузка) --- */
.fa-spinner {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M304 48a48 48 0 1 0-96 0 48 48 0 0 0 96 0zm0 416a48 48 0 1 0-96 0 48 48 0 0 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 0 0 0 96zm464-48a48 48 0 1 0-96 0 48 48 0 0 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 0 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 0 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 0 0 369.1 437z'/%3E%3C/svg%3E");
}

/* Анимация вращения */
.fa-spin  { animation: fa-spin 2s linear infinite; }
.fa-pulse { animation: fa-spin 1s steps(8) infinite; }
@keyframes fa-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* --- «глазик» (просмотры материала) --- */
.fa-eye {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23666'/%3E%3C/svg%3E");
}

.fa-pointer { cursor: pointer; }