/* ============================================================
   cf-card.css - единый язык карточек Verover Pharma
   11.10.2026. До этого на карточке было восемь кеглей, два
   гротеска вперемешку и семь цветов заливок, а H1 товара был
   набран 18px, мельче подзаголовков внутри текста.
   Слой переопределяет оформление существующей разметки Diafan,
   структуру и скрипты не трогает.
   ============================================================ */

:root{
	--cf-ink:        #16131F;
	--cf-ink-2:      #4C4659;
	--cf-ink-3:      #6B6579;
	--cf-line:       #ECE8F5;
	--cf-line-2:     #E2DAF4;
	--cf-surface:    #FFFFFF;
	--cf-paper:      #FBFAFD;
	--cf-tint:       #F4F0FF;
	--cf-tint-2:     #F1ECFF;
	--cf-brand:      #6C2BD9;
	--cf-brand-ink:  #4F1FA8;
	--cf-ok:         #1B6E45;
	--cf-ok-bg:      #EAF7F0;
	--cf-warn-bg:    #FFF8F0;
	--cf-warn-line:  #F5E3CC;
	--cf-warn-ink:   #5A4420;
	--cf-r-s:  14px;
	--cf-r-m:  20px;
	--cf-r-l:  28px;
	--cf-h:   'Manrope', 'Open Sans', system-ui, sans-serif;
	--cf-t:   'Golos Text', 'Open Sans', system-ui, sans-serif;
	--cf-shadow: 0 10px 30px rgba(31, 17, 71, .05);
}

/* ---------- 1. Шапка карточки товара ---------- */

.shop_id{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.shop_id__img{
	background: linear-gradient(180deg, #F4F0FF 0%, #FAF8FF 100%);
	border-radius: var(--cf-r-l);
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	position: relative;
	box-sizing: border-box;
}
.shop_id__img img{
	max-width: 100%;
	max-height: 360px;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.shop_id__img .stickers-d{
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.shop_id__img .sticker-d{
	padding: 7px 14px;
	border-radius: 999px;
	font: 600 13px/1 var(--cf-t);
	background: var(--cf-brand);
	color: #fff;
}

/* правая колонка: заголовок, покупка, характеристики - именно в таком порядке */
.shop_id__info{
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.shop_id__info > h1{
	order: 1;
	margin: 0 0 14px;
	font: 800 46px/1.05 var(--cf-h);
	letter-spacing: -.02em;
	color: var(--cf-ink);
}
.shop_id__info > form.offer-d{ order: 2; }
.shop_id__info > .cf-trust{ order: 3; }
.shop_id__info > .param-d{ order: 4; }
.shop_id__info > .cf-specs-title{ order: 4; }

/* ---------- 2. Блок покупки ---------- */

.shop_id__info form.offer-d{
	margin: 6px 0 0;
	padding: 26px;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: 22px;
	box-shadow: var(--cf-shadow);
}
.offer-d__pricelist{ margin: 0 0 18px; }
.offer-d__price.price-d{
	display: flex;
	align-items: baseline;
	gap: 6px;
	font: 800 42px/1 var(--cf-h);
	letter-spacing: -.02em;
	color: var(--cf-ink);
}
.price-d__curr{ font-size: .62em; font-weight: 700; }
.shop_id__info .btn.offer-d__button_tocart,
.shop_id__info .btn_buy{
	width: 100%;
	min-height: 56px;
	border: 0;
	border-radius: var(--cf-r-s);
	background: var(--cf-brand);
	color: #fff;
	font: 700 17px/1 var(--cf-h);
	letter-spacing: .005em;
	cursor: pointer;
	transition: background .16s ease;
}
.shop_id__info .btn.offer-d__button_tocart:hover,
.shop_id__info .btn_buy:hover{ background: var(--cf-brand-ink); }

.count-d__control{
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--cf-line-2);
	border-radius: var(--cf-r-s);
	overflow: hidden;
	margin-bottom: 14px;
}
.count-d__control button{
	width: 44px;
	height: 48px;
	border: 0;
	background: #fff;
	color: var(--cf-ink-2);
	cursor: pointer;
}
.count-d__control button:hover{ background: var(--cf-tint); }
.count-d__input{
	width: 56px;
	height: 48px;
	border: 0;
	border-left: 1px solid var(--cf-line);
	border-right: 1px solid var(--cf-line);
	text-align: center;
	font: 600 17px/1 var(--cf-t);
}

/* строка доверия под кнопкой */
.cf-trust{
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font: 400 15px/1.45 var(--cf-t);
	color: var(--cf-ink-2);
}
.cf-trust li{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}
.cf-trust li::before{
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: var(--cf-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cf-trust__free{ color: var(--cf-ok); font-weight: 500; }

/* ---------- 3. Характеристики ---------- */

.cf-specs-title{
	margin: 34px 0 12px;
	font: 700 14px/1 var(--cf-h);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cf-ink-3);
}
.shop_id__info .param-d{
	display: grid;
	grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
	gap: 4px 18px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--cf-line);
	font: 400 15px/1.45 var(--cf-t);
}
.shop_id__info .param-d:last-of-type{ border-bottom: 1px solid var(--cf-line); }
.shop_id__info .param-d__name{
	font-weight: 400;
	color: var(--cf-ink-3);
}
.shop_id__info .param-d__value{ color: var(--cf-ink); }

/* ---------- 4. Вкладки ---------- */

.shop_id__tabs{ margin-top: 72px; }
.tabs-d__tabnames{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border: 0;
	margin-bottom: 28px;
}
.tabname-d{
	padding: 11px 20px;
	border: 1px solid var(--cf-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cf-ink-2);
	font: 600 15px/1 var(--cf-t);
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.tabname-d:hover{ border-color: var(--cf-line-2); background: var(--cf-tint); }
.tabname-d.tabname-d_active{
	background: var(--cf-brand);
	border-color: var(--cf-brand);
	color: #fff;
}
.tabname-d__name{ font: inherit; }

/* ---------- 5. Заголовки и текст в теле карточки ---------- */

.shop_id__dop h2, .prod_id_text h2, .shop_site h2.cf-sec,
.shop_id__tabs h2{
	font: 800 clamp(26px, 2.4vw, 34px)/1.15 var(--cf-h);
	letter-spacing: -.02em;
	color: var(--cf-ink);
	margin: 0 0 18px;
}
.shop_id__dop h3, .prod_id_text h3{
	font: 700 21px/1.3 var(--cf-h);
	letter-spacing: -.01em;
	margin: 30px 0 10px;
}
.shop_id__dop p, .shop_id__dop li,
.prod_id_text p, .prod_id_text li{
	font: 400 17px/1.62 var(--cf-t);
	color: #332D44;
}

/* ---------- 6. Сведения о товаре ---------- */

.cf-req-info{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 18px 0 24px;
	padding: 0;
	list-style: none;
	background: var(--cf-line);
	border: 1px solid var(--cf-line);
	border-radius: 22px;
	overflow: hidden;
}
.cf-req-info li{
	margin: 0;
	padding: 18px 22px;
	background: #fff;
	font: 400 16px/1.5 var(--cf-t);
	color: var(--cf-ink);
	list-style: none;
}
.cf-req-info li b{
	display: block;
	font: 600 13px/1.3 var(--cf-h);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cf-ink-3);
	margin-bottom: 5px;
}

/* ---------- 7. Видео ---------- */

.video_wrap{
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: 18px;
	margin: 30px 0;
	align-items: start;
}
.video_player{
	border-radius: var(--cf-r-m);
	overflow: hidden;
	background: #0E0B16;
	line-height: 0;
}
.video_player video, .video_player iframe{
	width: 100%;
	display: block;
	border-radius: var(--cf-r-m);
	aspect-ratio: 16 / 9;
	height: auto !important;
	object-fit: cover;
	background: #0E0B16;
}
.video_list{
	display: grid;
	gap: 10px;
	max-height: 420px;
	overflow-y: auto;
	padding-right: 4px;
}
.video_item{
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 9px;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-s);
	background: #fff;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}
.video_item:hover{ border-color: var(--cf-line-2); background: var(--cf-tint); }
.video_item.active{ border-color: var(--cf-brand); background: var(--cf-tint-2); }
.video_item img{
	width: 92px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	flex: none;
}
.video_info{ font: 400 14px/1.35 var(--cf-t); color: var(--cf-ink); }
.video_title_text{
	font: 700 clamp(22px, 2vw, 28px)/1.2 var(--cf-h);
	letter-spacing: -.015em;
	margin-bottom: 14px;
}

/* ---------- 8. Похожие товары ---------- */

.shop_list .shop_item, .prod_list .prod_item{
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-m);
	padding: 18px;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.shop_list .shop_item:hover, .prod_list .prod_item:hover{
	border-color: var(--cf-line-2);
	box-shadow: var(--cf-shadow);
}
.shop_list .shop_name a, .prod_list .prod_name a{
	font: 700 17px/1.3 var(--cf-h);
	color: var(--cf-ink);
	text-decoration: none;
}
.shop_list .price-d{ font: 800 22px/1 var(--cf-h); color: var(--cf-ink); }

/* ---------- 9. Дисклеймер ---------- */

.cf-legal[data-type="disclaimer"], p.cf-legal{
	margin: 36px 0 0;
	padding: 17px 21px;
	background: #F6F4FB;
	border: 0;
	border-radius: var(--cf-r-s);
	font: 400 14px/1.6 var(--cf-t);
	color: #5E586E;
}

/* ---------- 10. Адаптив ---------- */

@media (max-width: 1100px){
	.shop_id{ gap: 32px; }
	.shop_id__info > h1{ font-size: 38px; }
}
@media (max-width: 880px){
	.shop_id{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.shop_id__img{ min-height: 300px; padding: 26px; }
	.shop_id__img img{ max-height: 260px; }
	.shop_id__info > h1{ font-size: 32px; }
	.offer-d__price.price-d{ font-size: 34px; }
	.video_wrap{ grid-template-columns: minmax(0, 1fr); }
	.video_list{ max-height: none; grid-auto-flow: row; }
	.cf-req-info{ grid-template-columns: minmax(0, 1fr); }
	.shop_id__info .param-d{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.shop_id__tabs{ margin-top: 46px; }
}

/* ---------- 11. Перекрытие старой сетки темы ----------
   тема задаёт .shop_id как flex с .shop_id__img шириной 58,3%
   и картинкой height:450px/object-fit:cover: в гриде это давало
   узкую колонку и обрезанную пачку */
.shop_id > .shop_id__img,
.shop_id > .shop_id__info{
	width: auto;
	max-width: none;
	min-width: 0;
	flex: none;
}
.shop_id__img a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	position: relative;
}
.shop_id__img a img{
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.shop_id__img a::before{
	right: 0;
	top: 0;
	background: #fff;
	color: var(--cf-brand);
	box-shadow: 0 2px 10px rgba(31, 17, 71, .08);
}

/* ---------- 12. Цена со скидкой ----------
   в ряду три элемента: старая цена, новая и бейдж скидки.
   Общее правило .offer-d__price красило их одинаково, поэтому
   «Ваша скидка» шла тем же кеглем, что и сама цена */
.offer-d__pricerow{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.offer-d__price.price-d_old{
	order: 2;
	font: 400 19px/1 var(--cf-t);
	color: var(--cf-ink-3);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.offer-d__price.price-d_basic{
	order: 1;
	font: 800 42px/1 var(--cf-h);
	letter-spacing: -.02em;
	color: var(--cf-ink);
}
.offer-d__price.price-d_discount{
	order: 3;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cf-ok-bg);
	color: var(--cf-ok);
	font: 600 14px/1 var(--cf-t);
	letter-spacing: 0;
	align-self: center;
}
.price-d_discount .price-d__name{
	font: inherit;
	color: inherit;
	margin: 0;
}
.price-d_discount .price-d__num,
.price-d_discount .price-d__curr{ font: inherit; }

/* ---------- 13. Заголовки секций и бейджи ----------
   заголовок секции был тёмным прямоугольником с текстом внутри,
   бейджи акций красные и капсом */
h2.rews_title{
	border: 0;
	line-height: 1.15;
	margin: 0 0 22px;
}
h2.rews_title span{
	display: block;
	padding: 0;
	background: none;
	color: var(--cf-ink);
	font: 800 clamp(26px, 2.4vw, 34px)/1.15 var(--cf-h);
	letter-spacing: -.02em;
	text-transform: none;
}
.shop_site h3._ctext,
.prod h3._ctext{
	font: 800 clamp(24px, 2.2vw, 30px)/1.2 var(--cf-h);
	letter-spacing: -.02em;
	color: var(--cf-ink);
	margin: 0 0 22px;
}

.sticker-d,
.shop_item .sticker-d,
.shop_list .sticker-d{
	background: var(--cf-brand);
	color: #fff;
	border-radius: 999px;
	padding: 6px 13px;
	font: 600 12px/1 var(--cf-t);
	letter-spacing: .02em;
	text-transform: none;
}
.sticker-d_action, .sticker-d_hit{ background: var(--cf-brand); }
.sticker-d_new{ background: var(--cf-ok); }

/* кнопки по сайту: ровный регистр и единая форма */
.btn, .btn_buy, .button-d{
	text-transform: none;
	font-family: var(--cf-h);
	letter-spacing: .005em;
	border-radius: var(--cf-r-s);
}

/* ---------- 14. Похожие товары ---------- */

.shop_list{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.shop_list .shop_item{
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
}
.shop_list .shop_images,
.shop_list .shop_item__img{
	background: linear-gradient(180deg, #F6F2FF 0%, #FBF9FF 100%);
	border-radius: var(--cf-r-s);
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 170px;
}
.shop_list .shop_images img,
.shop_list .shop_item__img img{
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.shop_list .shop_item .btn{
	width: 100%;
	min-height: 48px;
	margin-top: auto;
}
@media (max-width: 1100px){
	.shop_list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
	.shop_list{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 15. Заголовок видеоблока и маркеры в сведениях ----------
   .video_title_text был чёрной плашкой с белым текстом,
   а у списка сведений оставались маркеры из стилей темы */
.video_title_text{
	background: none;
	color: var(--cf-ink);
	padding: 0;
	margin: 0 0 18px;
	font: 800 clamp(24px, 2.2vw, 30px)/1.2 var(--cf-h);
	letter-spacing: -.02em;
	text-transform: none;
	border-radius: 0;
}
._text ul.cf-req-info,
.cf-req-info{ list-style: none; }
._text ul.cf-req-info > li,
.cf-req-info > li{
	list-style: none;
	padding-left: 22px;
}
._text ul.cf-req-info > li::marker,
.cf-req-info > li::marker{ content: ""; }
._text ul.cf-req-info > li::before,
.cf-req-info > li::before{ content: none; display: none; }

/* ---------- 16. Карточки товаров в списках ----------
   фото обрезалось по cover и упиралось в край, цена и кнопка
   висели без общей рамки */
.shop_list .shop_cart,
.shop_cart{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-m);
	padding: 16px;
	box-sizing: border-box;
	height: 100%;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.shop_list .shop_cart:hover,
.shop_cart:hover{
	border-color: var(--cf-line-2);
	box-shadow: var(--cf-shadow);
}
.shop_cart__img{
	margin-bottom: 14px;
	background: linear-gradient(180deg, #F6F2FF 0%, #FBF9FF 100%);
	border-radius: var(--cf-r-s);
	overflow: hidden;
}
.shop_cart__img a{
	height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	box-sizing: border-box;
}
.shop_cart__img img{
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.shop_cart .shop_cart__name a,
.shop_cart__name a{
	font: 700 17px/1.32 var(--cf-h);
	color: var(--cf-ink);
	text-decoration: none;
	letter-spacing: -.01em;
}
.shop_cart .price-d_basic{ font: 800 22px/1 var(--cf-h); }
.shop_cart .price-d_old{ font: 400 15px/1 var(--cf-t); }
.shop_cart .price-d_discount{ padding: 4px 10px; font-size: 13px; }
.shop_cart .btn{ width: 100%; min-height: 48px; margin-top: auto; }
.shop_cart .stickers-d{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

/* ---------- 17. Карточка продукта (/kompany/produkts/) ----------
   та же сетка и те же блоки, что в магазине: фото на подложке,
   заголовок, кнопка покупки, характеристики таблицей */
.prod_id.docs_id{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 48px;
	align-items: start;
}
.prod_id.docs_id > .docs_id__img,
.prod_id.docs_id > .docs_id__info{
	width: auto;
	max-width: none;
	min-width: 0;
	flex: none;
}
.prod_id .docs_id__img{
	background: linear-gradient(180deg, #F4F0FF 0%, #FAF8FF 100%);
	border-radius: var(--cf-r-l);
	padding: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	box-sizing: border-box;
}
.prod_id .docs_id__img a{ display: flex; align-items: center; justify-content: center; width: 100%; height: auto; }
.prod_id .docs_id__img img{
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.prod_id .docs_id__info h1,
.prod_id .docs_id__info > h1{
	margin: 0 0 16px;
	font: 800 clamp(34px, 3.4vw, 48px)/1.05 var(--cf-h);
	letter-spacing: -.025em;
	color: var(--cf-ink);
}
.prod_id .docs_id__info p{
	font: 400 17px/1.6 var(--cf-t);
	color: var(--cf-ink-2);
	margin: 0 0 10px;
}
.prod_id .docs_id__info strong{ color: var(--cf-ink); font-weight: 600; }
.prod_id .docs_id__info .btn_buy{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 240px;
	min-height: 56px;
	padding: 0 32px;
	margin: 22px 0 0;
	background: var(--cf-brand);
	color: #fff;
	border: 0;
	border-radius: var(--cf-r-s);
	font: 700 17px/1 var(--cf-h);
	text-decoration: none;
	transition: background .16s ease;
}
.prod_id .docs_id__info .btn_buy:hover{ background: var(--cf-brand-ink); color: #fff; }

.prod_id_har{
	margin-top: 44px;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: 22px;
	padding: 10px 26px;
}
.prod_id_har p{
	display: grid;
	grid-template-columns: minmax(0, 18em) minmax(0, 1fr);
	gap: 4px 20px;
	margin: 0;
	padding: 13px 0;
	border-top: 1px solid var(--cf-line);
	font: 400 16px/1.5 var(--cf-t);
}
.prod_id_har p:first-child{ border-top: 0; }
.prod_id_har strong{ font-weight: 400; color: var(--cf-ink-3); }

.prod_id_text{ margin-top: 56px; }
.prod_id_text.section{ margin-top: 64px; }
.prod_id_text h2{
	font: 800 clamp(26px, 2.4vw, 34px)/1.15 var(--cf-h);
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

/* сертификаты и документы плиткой */
.docs_sert{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.docs_sert_item, .docs_sert > a{
	display: block;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-m);
	padding: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.docs_sert_item:hover, .docs_sert > a:hover{
	border-color: var(--cf-line-2);
	box-shadow: var(--cf-shadow);
}
.docs_sert_name{
	font: 600 15px/1.35 var(--cf-h);
	color: var(--cf-ink);
	margin-top: 12px;
}

@media (max-width: 880px){
	.prod_id.docs_id{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.prod_id .docs_id__img{ min-height: 280px; padding: 24px; }
	.prod_id_har p{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.docs_sert{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 18. Сетка карточки продукта: только шапка в две колонки ----------
   описание, характеристики и секции лежат внутри того же контейнера,
   поэтому без явного span они занимали одну колонку и текст шёл
   узкой лентой в 490px */
.prod_id.docs_id > *{ grid-column: 1 / -1; }
.prod_id.docs_id > .docs_id__img{ grid-column: 1 / 2; }
.prod_id.docs_id > .docs_id__info{ grid-column: 2 / 3; }
.prod_id.docs_id > .prod_id_text,
.prod_id.docs_id > .prod_id_har,
.prod_id.docs_id > ._text{ max-width: 980px; }

/* заголовок продукта без капса */
.prod_id h1, .docs_id__info h1, .shop_id__info h1{ text-transform: none; }

/* ---------- 19. Карточка товара: в две колонки только шапка ----------
   описание, видео, сведения и похожие лежат внутри .shop_id,
   поэтому без явного span занимали одну колонку и текст с картинками
   шёл лентой в половину ширины */
.shop_id > *{ grid-column: 1 / -1; }
.shop_id > .shop_id__img{ grid-column: 1 / 2; }
.shop_id > .shop_id__info{ grid-column: 2 / 3; }

.shop_id__dop, .shop_id__tabs{ width: 100%; }
.shop_id__dop ._text, .shop_id__dop p, .shop_id__dop li{ max-width: 76ch; }
.shop_id__dop img{
	max-width: 100%;
	height: auto;
	border-radius: var(--cf-r-m);
}
/* широкая инфографика внутри описания тянется на всю колонку */
.shop_id__dop p > img,
.shop_id__dop > img,
.prod_id_text img{
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 26px 0;
}

/* ---------- 20. Видео аккуратнее ---------- */

.video_wrap{
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-l);
	padding: 18px;
	gap: 16px;
	align-items: stretch;
}
.video_player{
	border-radius: var(--cf-r-m);
	overflow: hidden;
	background: #0E0B16;
	display: flex;
}
.video_player video,
.video_player iframe{
	width: 100%;
	height: 100% !important;
	min-height: 320px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: var(--cf-r-m);
}
.video_list{
	max-height: none;
	height: 100%;
	overflow-y: auto;
	padding: 2px 6px 2px 2px;
	align-content: start;
}
.video_item{
	box-shadow: none;
	align-items: center;
}
.video_item .video_info{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.video_item .video_info > *{ overflow-wrap: anywhere; }
.video_item .video_time,
.video_item .video_info em,
.video_item .video_info small{
	font: 400 13px/1 var(--cf-t);
	color: var(--cf-ink-3);
	font-style: normal;
}

/* ---------- 21. Сведения о товаре: без пустой ячейки ---------- */

.cf-req-info > li:last-child:nth-child(odd){ grid-column: 1 / -1; }

@media (max-width: 880px){
	.shop_id > .shop_id__img,
	.shop_id > .shop_id__info{ grid-column: 1 / -1; }
	.video_wrap{ padding: 12px; }
	.video_player video, .video_player iframe{ min-height: 200px; }
}

/* ---------- 22. Плейлист компактнее ----------
   карточки были по 130px высотой с текстом в три строки,
   из-за чего в видимую область попадало два с половиной пункта */
.video_item{
	padding: 8px;
	gap: 11px;
	min-height: 0;
}
.video_item img{
	width: 104px;
	height: 60px;
	border-radius: 9px;
}
.video_item .video_info,
.video_item .video_info a,
.video_item .video_info span{
	font: 500 14px/1.32 var(--cf-t);
	color: var(--cf-ink);
}
.video_item .video_info{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.video_item .video_time,
.video_item .video_info em,
.video_item .video_info small,
.video_item .video_info i{
	display: block;
	font: 400 12px/1 var(--cf-t);
	color: var(--cf-ink-3);
	font-style: normal;
	margin-top: 4px;
}
.video_list{ gap: 8px; }
.video_list::-webkit-scrollbar{ width: 6px; }
.video_list::-webkit-scrollbar-thumb{ background: #DCD5EE; border-radius: 999px; }
.video_list::-webkit-scrollbar-track{ background: transparent; }

/* ---------- 23. Картинки в описании во всю ширину ----------
   ограничение меры строки в 76ch зажимало и абзацы с инфографикой,
   поэтому широкие схемы выводились в 759px вместо 1240px */
.shop_id__dop p:has(img),
.shop_id__dop p:has(a img),
.shop_id__dop div:has(> img),
.prod_id_text p:has(img),
.prod_id_text p:has(a img){
	max-width: none;
	text-align: center;
}
.shop_id__dop p img,
.shop_id__dop p a img,
.prod_id_text p img,
.prod_id_text p a img{
	max-width: 100%;
	width: auto;
	height: auto;
	border-radius: var(--cf-r-m);
}
/* широкую инфографику тянем на всю колонку */
.shop_id__dop p > a > img,
.shop_id__dop p > img{ width: 100%; }
/* миниатюры плейлиста под это правило не попадают */
.video_item img{ width: 104px !important; border-radius: 9px; }

/* ---------- 24. Плейлист: ряды по содержимому ----------
   список растягивался на высоту плеера и делил её поровну между
   пунктами, из-за чего карточки схлопывались до 46px и текст с
   миниатюрой вылезали наружу */
.video_list{
	display: grid;
	grid-auto-rows: max-content;
	align-content: start;
	align-items: start;
}
.video_item{
	align-items: center;
	min-height: 76px;
	box-sizing: border-box;
}
.video_item .video_info{ align-self: center; }

/* ---------- 25. Блоки внутри описания ----------
   набор для текстов карточек: таблица состава, плитки, список
   с галочками. Раньше то же самое было картинками-инфографикой */
.cf-table{
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0 10px;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: 18px;
	overflow: hidden;
	font: 400 16px/1.5 var(--cf-t);
}
.cf-table thead th{
	text-align: left;
	padding: 14px 22px;
	background: #FAF8FF;
	font: 700 13px/1.2 var(--cf-h);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cf-ink-3);
}
.cf-table td{
	padding: 15px 22px;
	border-top: 1px solid #F1EDF8;
	color: var(--cf-ink);
}
.cf-table tbody tr:first-child td{ border-top: 0; }
._text p.cf-note, .cf-note{
	font: 400 15px/1.55 var(--cf-t);
	color: var(--cf-ink-3);
	margin: 10px 0 0;
}

.cf-grid-2, .cf-grid-3, .cf-grid-4{
	display: grid;
	gap: 18px;
	margin: 20px 0 8px;
}
.cf-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
._text .cf-card-item{
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-m);
	padding: 24px;
}
._text .cf-card-item h3{
	margin: 0 0 10px;
	font: 700 18px/1.3 var(--cf-h);
	letter-spacing: -.01em;
	color: var(--cf-ink);
}
._text .cf-card-item p{
	margin: 0;
	font: 400 16px/1.55 var(--cf-t);
	color: var(--cf-ink-2);
}

._text ul.cf-list-check{
	list-style: none;
	margin: 18px 0 8px;
	padding: 0;
	display: grid;
	gap: 10px;
	max-width: 70ch;
}
._text ul.cf-list-check > li{
	list-style: none;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	font: 400 17px/1.5 var(--cf-t);
	color: var(--cf-ink);
}
._text ul.cf-list-check > li::marker{ content: ""; }
._text ul.cf-list-check > li::before{
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	background: var(--cf-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 1000px){
	.cf-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
	.cf-grid-2, .cf-grid-3, .cf-grid-4{ grid-template-columns: minmax(0, 1fr); }
	.cf-table{ display: block; overflow-x: auto; }
}

/* плитка из четырёх колонок: компактнее, чтобы текст не рвался по буквам */
.cf-grid-4{ grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
._text .cf-grid-4 .cf-card-item{ padding: 20px; }
._text .cf-grid-4 .cf-card-item h3{ font-size: 17px; margin-bottom: 8px; }
._text .cf-grid-4 .cf-card-item p{ font-size: 15px; line-height: 1.5; hyphens: auto; }

/* ---------- 26. Сведения о товаре: версия 2 ----------
   было: две колонки, серые полосы между ячейками, половина ряда пустая
   из-за длинных значений. Стало: три колонки, тонкие линии, иконка на
   каждый тип данных, длинные пункты занимают два столбца */
._text ul.cf-req-info,
.cf-req-info{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 18px 0 26px;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: 22px;
	overflow: hidden;
}
._text ul.cf-req-info > li,
.cf-req-info > li{
	margin: 0;
	padding: 20px 24px;
	background: #fff;
	border-right: 1px solid var(--cf-line);
	border-bottom: 1px solid var(--cf-line);
	font: 400 16px/1.5 var(--cf-t);
	color: var(--cf-ink);
	list-style: none;
	min-width: 0;
}
.cf-req-info > li b{
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 12px/1.25 var(--cf-h);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cf-ink-3);
	margin-bottom: 8px;
}
.cf-req-info > li b::before{
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background: var(--cf-brand);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
/* иконки по типу данных */
.cf-req-info > li[data-k="doc"] b::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15l2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15l2 2 4-4'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="geo"] b::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="pill"] b::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='4'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='4'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="box"] b::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="time"] b::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="storage"] b::before{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M9 6l3-3 3 3M7 21h10a2 2 0 0 0 2-2v-4H5v4a2 2 0 0 0 2 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M9 6l3-3 3 3M7 21h10a2 2 0 0 0 2-2v-4H5v4a2 2 0 0 0 2 2z'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="warn"] b::before{
	background: #B4740F;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.cf-req-info > li[data-k="warn"]{ background: var(--cf-warn-bg); color: var(--cf-warn-ink); }
.cf-req-info > li[data-k="warn"] b{ color: #B4740F; }

/* длинные значения занимают два столбца, чтобы в ряду не оставалось дыр */
.cf-req-info > li[data-k="warn"],
.cf-req-info > li[data-k="storage"],
.cf-req-info > li[data-k="doc"]{ grid-column: span 2; }
.cf-req-info > li:last-child{ border-bottom: 0; }

@media (max-width: 1100px){
	._text ul.cf-req-info, .cf-req-info{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
	._text ul.cf-req-info, .cf-req-info{ grid-template-columns: minmax(0, 1fr); }
	.cf-req-info > li,
	.cf-req-info > li[data-k="warn"],
	.cf-req-info > li[data-k="storage"],
	.cf-req-info > li[data-k="doc"]{ grid-column: auto; border-right: 0; }
}

/* плотная раскладка: короткие пункты подтягиваются в дыры рядом с широкими */
._text ul.cf-req-info, .cf-req-info{ grid-auto-flow: row dense; }
.cf-req-info > li[data-k="doc"]{ order: 1; }
.cf-req-info > li[data-k="pill"]{ order: 2; }
.cf-req-info > li[data-k="box"]{ order: 3; }
.cf-req-info > li[data-k="geo"]{ order: 4; }
.cf-req-info > li[data-k="time"]{ order: 5; }
.cf-req-info > li[data-k="warn"]{ order: 6; }
.cf-req-info > li[data-k="storage"]{ order: 7; }
/* нижний ряд без лишней линии */
.cf-req-info > li{ border-bottom: 1px solid var(--cf-line); }

/* противопоказания и хранение занимают ряд целиком: дыр не остаётся */
.cf-req-info > li[data-k="warn"],
.cf-req-info > li[data-k="storage"]{ grid-column: 1 / -1; border-right: 0; }

@media (max-width: 720px){
	/* номер регистрации длинный и без пробелов: на узком экране рвался
	   посреди цифр, поэтому кегль здесь мельче */
	.cf-req-info > li[data-k="doc"]{ font-size: 15px; line-height: 1.45; }
	.cf-req-info > li{ padding: 17px 20px; }
}