/**
 * Стили перенесённых блоков донорских товарных страниц.
 *
 * Разметка приходит из data/donor-content (см. tools/extract_donor_content.py)
 * с классами донора, поэтому значения здесь взяты из его же таблицы стилей
 * (/assets/css/index.css), а не подобраны на глаз: интервал между блоками
 * 2.5/6.5/10 rem, заголовки блоков 2.25/4 rem, карточки фиксированной ширины
 * 19 rem в лентах и 20.25 rem в сетке, номера шагов 4 rem.
 *
 * Всё ограничено областью .donor-content: правила не задевают остальной сайт.
 */

.donor-content {
  --component-spacing-y: 2.5rem;      /* вертикальный ритм донора */
  color: var(--c-ink);
  font-size: var(--fs-16);
  /* у донора базовый интервал строк 1.25 (16px/20px), а не «воздушный» */
  line-height: 1.25;
}
@media (min-width: 48rem) { .donor-content { --component-spacing-y: 6.5rem; } }
@media (min-width: 64rem) { .donor-content { --component-spacing-y: 10rem; } }

.donor-content img,
.donor-content video,
.donor-content iframe,
.donor-content picture { display: block; max-width: 100%; height: auto; }

.donor-content a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.donor-content a:hover { opacity: 0.7; }

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

.donor-content h2 { font-size: 2.25rem; font-weight: var(--w-bold); line-height: 1.125; }
.donor-content h3 { margin-top: 1.5rem; font-size: var(--fs-24); font-weight: var(--w-bold); line-height: 1.125; }
@media (min-width: 64rem) { .donor-content h2 { font-size: 4rem; } }
.donor-content p { margin-top: 0.75rem; }
.donor-content sup { font-size: 0.6em; vertical-align: super; }
.donor-content ul, .donor-content ol { margin-top: 0.75rem; padding-left: 1.25rem; }
.donor-content li { margin-top: 0.35rem; }
.donor-content strong { font-weight: var(--w-bold); }
.donor-content .richtext { font-weight: var(--w-medium); margin-block: 1rem; }

/* ------------------------------------------------------------- утилиты */

/* Служебный текст для скринридеров — правило донора. */
.donor-content .is-sr-only {
  position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
}
.donor-content .mt-2 { margin-top: 0.5rem; }
.donor-content .mt-3 { margin-top: 1rem; }
.donor-content .mt-8 { margin-top: 2rem; }
.donor-content .my-2 { margin-block: 0.5rem; }
.donor-content .pt-0 { padding-top: 0; }
.donor-content .font-3xs { font-size: 0.7rem; }
.donor-content .font-s { font-size: var(--fs-14); }
.donor-content .font-medium { font-weight: var(--w-medium); }
.donor-content .font-semibold { font-weight: var(--w-semibold); }
.donor-content .font-bold { font-weight: var(--w-bold); }
.donor-content .color-grey { color: var(--c-muted); }
.donor-content .bg-black { background: var(--c-black); color: var(--c-white); }
.donor-content .lazy { opacity: 0; transition: opacity 0.3s var(--ease-out); }
.donor-content .lazy.lazyloaded, .donor-content img.lazy[src] { opacity: 1; }

/* ----------------------------------------------- секции, темы и сетка */

.donor-content .section { padding-block: 0; }
.donor-content .component,
.donor-content .section.has-components { margin-block: 0; }
/* ритм донора: каждый блок, кроме последнего, отделён общим интервалом */
.donor-content > .component:not(:last-child),
.donor-content .has-components > .component:not(:last-child),
.donor-content .section:not(:last-child),
.donor-content .slider-block:not(:last-child),
.donor-content .banner:not(:last-child),
.donor-content .refapp-faq:not(:last-child) { margin-bottom: var(--component-spacing-y); }
.donor-content .theme-bg { background: var(--c-surface-2); }
.donor-content .theme--dark { background: var(--c-black); color: var(--c-white); }
.donor-content .theme--dark .card__description,
.donor-content .theme--dark .color-grey { color: rgb(255 255 255 / 70%); }
.donor-content .theme--light { background: var(--c-surface); }

.donor-content .columns { display: flex; flex-direction: column; }
@media (min-width: 48rem) { .donor-content .columns { flex-direction: row; flex-wrap: wrap; } }
/* flex- и grid-элементы не должны растягиваться по ширине картинки */
.donor-content .columns > *,
.donor-content .slider-block > *,
.donor-content .card-list > *,
.donor-content .card > *,
.donor-content .content-card > * { min-width: 0; }
.donor-content .columns.is-gapless { gap: 0; }
.donor-content .columns.is-vcentered { align-items: center; }
.donor-content .columns.is-centered { justify-content: center; }
.donor-content .column { display: block; flex: 1 1 0; min-width: 0; padding: 0.75rem; }
.donor-content .columns.is-gapless > .column { padding: 0; }
@media (min-width: 64rem) {
  .donor-content .column.is-8-desktop { flex: none; width: 66.6667%; }
  .donor-content .column.is-4-desktop { flex: none; width: 33.3333%; }
  .donor-content .column.is-5-desktop { flex: none; width: 41.6667%; }
  .donor-content .column.is-6-desktop { flex: none; width: 50%; }
  .donor-content .banner.--reverse > .columns { flex-direction: row-reverse; }
}

/* -------------------------------------------------------- медиа и блоки */

.donor-content .picture { display: block; width: 100%; }
.donor-content .picture img { width: 100%; display: block; }
.donor-content .has-aspect-ratio { overflow: hidden; }
.donor-content .has-aspect-ratio img,
.donor-content .has-aspect-ratio video { width: 100%; height: 100%; object-fit: cover; }
.donor-content .is-9by13-mobile { aspect-ratio: 9 / 13; }
.donor-content .is-1by1-mobile, .donor-content .is-1by1-desktop { aspect-ratio: 1 / 1; }
.donor-content .is-16by9-mobile { aspect-ratio: 16 / 9; }
@media (min-width: 64rem) { .donor-content .is-16by9-desktop { aspect-ratio: 16 / 9; } }
.donor-content .video-block video { width: 100%; }
.donor-content .slider-block.content-video-wrapper .video-block { margin-block: 2rem; }
@media (min-width: 64rem) { .donor-content .slider-block.content-video-wrapper .video-block { margin-block: 6.625rem; } }
.donor-content .media-block { margin-top: 2rem; }
.donor-content .youtube-player__poster { position: relative; display: block; }

/* ------------------------------------------------------------- карточки */

.donor-content .card-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.donor-content .card-list__item { list-style: none; min-width: 0; }
@media (min-width: 48rem) { .donor-content .card-list.--grid .card-list__item { width: 20.25rem; } }
.donor-content .card { position: relative; width: 100%; display: flex; flex-direction: column; }
.donor-content .card__content { display: flex; flex-direction: column; }
.donor-content .card__title,
.donor-content .card__name { font-size: var(--fs-16); font-weight: var(--w-bold); line-height: 1.125; margin-top: 1rem; }
.donor-content .card__title > * { display: block; }
.donor-content .card__description {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0.5rem; font-size: var(--fs-16); font-weight: var(--w-medium); color: var(--c-muted);
}
.donor-content .card__actions { margin-top: 1.5rem; }
.donor-content .card__range { font-size: 1.5rem; font-weight: var(--w-medium); }
.donor-content .card__duration { display: flex; align-items: center; margin-top: 1.5rem; font-size: var(--fs-20); color: var(--c-muted); }
.donor-content .card__duration img { width: 1.25rem; margin-right: 0.3125rem; }
.donor-content .card__step { display: flex; gap: 1rem; margin-top: 1.5rem; }
/* у донора номера шагов — крупные цифры */
.donor-content .card__step-number { flex: none; min-width: 2.5rem; font-size: 4rem; font-weight: 400; line-height: 0.875; }
.donor-content .card__step-title { font-size: var(--fs-20); font-weight: var(--w-bold); }
.donor-content .card .button-pills { position: absolute; top: 11.25rem; left: calc(50% - 1.75rem); }
.donor-content .rating { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.donor-content .rating__disclaimer { width: 100%; padding-top: 0.5rem; font-size: 0.75rem; font-weight: 400; color: var(--c-muted); }

.donor-content .content-card { width: 100%; overflow: hidden; }
.donor-content .content-card__inner { display: flex; flex-direction: column; color: inherit; height: 100%; }
.donor-content .content-card__content { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
.donor-content .content-card__title { margin: 0; font-size: 36px; font-weight: var(--w-bold); line-height: 40px; }
.donor-content .content-card__media { position: relative; width: 100%; background: var(--c-line); }
.donor-content .content-card__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.donor-content .content-card--dark .content-card__content { background: var(--c-black); color: var(--c-white); }
@media (min-width: 64rem) {
  .donor-content .content-card__inner { flex-direction: row; align-items: stretch; }
  .donor-content .content-card__media { flex: 1 1 0; min-width: 0; order: 2; }
  .donor-content .content-card__content { order: 1; flex: 1 1 0; padding: 5rem; justify-content: center; }
  .donor-content .content-card__title { font-size: 64px; line-height: 72px; }
}

/* -------------------------------------------------------------- баннеры */

.donor-content .banner__content { max-width: 46rem; }
.donor-content .banner__ribbon span,
.donor-content .hero-banner__ribbon span {
  display: inline-block; padding: 0.5rem 1rem; background: var(--c-black); color: var(--c-white);
  font-size: var(--fs-16); font-weight: var(--w-medium); text-transform: uppercase;
}
.donor-content .theme--dark .banner__ribbon span { background: var(--c-white); color: var(--c-black); }
.donor-content .banner__title,
.donor-content .hero-banner__title {
  margin-top: 1.5rem; padding-bottom: 1rem; font-size: 2.25rem; font-weight: var(--w-bold); line-height: 1.125;
}
@media (min-width: 64rem) {
  .donor-content .banner__title,
  .donor-content .hero-banner__title { font-size: 4rem; }
}
.donor-content .banner__subtitle,
.donor-content .hero-banner__subtitle { margin-top: 1rem; font-size: var(--fs-20); font-weight: var(--w-medium); }
.donor-content .banner__quote,
.donor-content .hero-banner__quote { margin-top: 1rem; font-size: var(--fs-24); font-style: italic; }
.donor-content .banner__range,
.donor-content .hero-banner__range { margin-top: 1rem; font-size: var(--fs-14); color: var(--c-muted); }
.donor-content .hero-banner__picture { width: 100%; }
.donor-content .hero-banner__picture img { width: 100%; display: block; }
.donor-content .hero-banner__content-middle { max-width: 46rem; }

/* -------------------------------------------------------------- ленты */

.donor-content .slider-block { display: flex; }
.donor-content .slider-block__content { width: 100%; }
.donor-content .slider-block__head { margin-bottom: 4rem; max-width: 54rem; }
.donor-content .slider-block__title { font-size: 2.25rem; font-weight: var(--w-bold); line-height: 1.125; }
@media (min-width: 64rem) { .donor-content .slider-block__title { font-size: 4rem; } }
.donor-content .slider-block__description { margin-top: 2.5rem; font-size: var(--fs-20); font-weight: var(--w-medium); }
.donor-content .slider-block__image { display: flex; align-items: center; width: 33.3333%; padding-right: 8.3333%; }
.donor-content .slider-block__image .picture { width: 100%; }

.donor-content .slider__list {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 0.25rem;
}
.donor-content .slider__list::-webkit-scrollbar { display: none; }
.donor-content .slider__item { flex: none; width: 100%; min-width: 0; scroll-snap-align: start; }
/* в лентах-карточках у донора фиксированная ширина карточки */
.donor-content .slider.card-list .slider__item { width: 19rem; }
.donor-content .slider-control { display: flex; align-items: center; gap: 0.5rem; }
.donor-content .slider-control__prev,
.donor-content .slider-control__next {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); cursor: pointer;
}
.donor-content .slider-control__prev:hover,
.donor-content .slider-control__next:hover { background: var(--c-surface-2); }
.donor-content .slider-control__dots { display: flex; gap: 0.35rem; }
.donor-content .slider-control__dot button {
  width: 1.375rem; height: 0.25rem; padding: 0; border: 1px solid var(--c-black);
  border-radius: 0; background: var(--c-muted); cursor: pointer;
}
.donor-content .slider-control__dot button.--active { height: 0.5rem; background: var(--c-black); }
.donor-content .slider-control__dot button span { display: none; }

/* ----------------------------------------------------------- аккордеоны */

.donor-content .accordion,
.donor-content .rfp-details { margin: 0; }
.donor-content .accordion:not(:last-child),
.donor-content .rfp-details:not(:last-child) { border-bottom: 1px solid currentColor; }
.donor-content .accordion > summary,
.donor-content .rfp-details__summary {
  display: block; position: relative; cursor: pointer; list-style: none; padding: 1.25rem 2rem 1.25rem 0;
}
.donor-content .accordion > summary::-webkit-details-marker,
.donor-content .rfp-details__summary::-webkit-details-marker { display: none; }
.donor-content .accordion > summary h2 { margin: 0; font-size: var(--fs-24); }
/* стрелка как у донора: уголок из двух границ */
.donor-content .accordion > summary::after,
.donor-content .rfp-details__summary::after {
  content: ''; position: absolute; right: 0.5rem; top: 50%; width: 0; height: 0; padding: 3px;
  border: solid currentColor; border-width: 0 2px 2px 0; transition: transform 0.2s ease-out;
}
.donor-content .accordion:not([open]) > summary::after { transform: translateY(-70%) rotate(45deg); }
.donor-content details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.donor-content .accordion__content,
.donor-content .rfp-details__contents {
  max-width: 56rem; padding: 0 0 2rem;
  font-weight: var(--w-medium); line-height: 1.25;
}
.donor-content .refapp-faq { margin-top: 2.5rem; }
.donor-content .ra-faq__title { font-size: var(--fs-24); font-weight: var(--w-bold); line-height: 1.125; }

/* ------------------------------------------------------ карточка товара */

.donor-content .pdp-top { margin: 0; }
.donor-content .pdp-top__column { min-width: 0; }
.donor-content .product-details__name { display: block; font-size: 2.25rem; line-height: 1.125; }
.donor-content .product-details__range { display: block; font-size: var(--fs-20); }
.donor-content .product-details__label { display: inline-block; padding: 0.25rem 0.5rem; font-size: var(--fs-16); font-weight: var(--w-medium); }
.donor-content .product-details__claim { margin-top: 1rem; font-size: var(--fs-20); color: var(--c-muted); }
.donor-content .product-details__ratings { display: block; padding: 0.5rem 0 1rem; font-weight: var(--w-medium); }
.donor-content .product-details__main { display: flex; flex-direction: column; }
.donor-content .product-details__enclouser { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
@media (min-width: 64rem) {
  .donor-content .product-details__name { font-size: 4rem; }
  .donor-content .product-details__range { font-size: 3rem; }
  .donor-content .product-details__label { font-size: 1.25rem; font-weight: var(--w-bold); }
}

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

.donor-content .buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.donor-content .button,
.donor-content .button-pills a,
.donor-content .pdp-rfp-btn a,
.donor-content .find-a-salon-tag,
.donor-content .download-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.5rem; padding: 0.9rem 2rem; border: 1px solid var(--c-black);
  border-radius: var(--radius-btn); background: var(--c-black); color: var(--c-white);
  font-size: var(--fs-16); font-weight: var(--w-semibold); text-decoration: none;
  transition: opacity var(--t) var(--ease);
}
.donor-content .button.-secondary,
.donor-content .button.--secondary,
.donor-content .find-a-salon-tag,
.donor-content .download-button { background: transparent; color: var(--c-ink); }
.donor-content .button:hover { opacity: 0.8; }
.donor-content .buttons.is-centered { justify-content: center; }
.donor-content .pdp-btn-wrapper, .donor-content .pdp-rfp-btn { margin-top: 1rem; }
.donor-content .pdp-rfp-btn a.find-a-salon-tag { width: 100%; }

/* --------------------------------------------------------- пояснения */

.donor-content .disclaimer,
.donor-content .lp-disclaimer,
.donor-content .hero-banner__disclaimer {
  margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.45; color: var(--c-muted);
}
.donor-content .download-container { margin-top: 1rem; }

/* Третьесторонние виджеты покупки донора: у нас их нет. */
.donor-content .shopalyst-modal,
.donor-content .overlay,
.donor-content .shopalyst-btn-close,
.donor-content .close { display: none; }

/* ------------------------- карусель видео покупателей (данные reetags) */

.dp-reetags { position: relative; display: flex; align-items: center; margin-top: 2.5rem; }
.dp-reetags__list {
  display: flex; flex: 1; gap: 1rem; margin: 0; padding: 0.25rem 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.dp-reetags__list::-webkit-scrollbar { display: none; }
.dp-reetags__item { flex: none; width: 8.5rem; scroll-snap-align: start; display: flex; flex-direction: column; }
.dp-reetags__circle {
  position: relative; width: 6.5rem; height: 6.5rem; margin: 0 auto; padding: 0;
  border: 2px solid var(--c-line); border-radius: 50%; overflow: hidden;
  background: var(--c-surface-2); cursor: pointer;
}
.dp-reetags__circle img { width: 100%; height: 100%; object-fit: cover; }
/* значок воспроизведения поверх кружка */
.dp-reetags__circle::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 0.85rem solid rgb(255 255 255 / 92%);
  border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 55%));
}
.dp-reetags__title {
  margin-top: 0.5rem; font-size: var(--fs-14); line-height: 1.25; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dp-reetags__arrow {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--c-black); color: var(--c-white); cursor: pointer;
}
.dp-reetags__arrow--prev { margin-right: 0.5rem; }
.dp-reetags__arrow--next { margin-left: 0.5rem; }
.dp-reetags__arrow:hover { opacity: 0.8; }

.dp-reetag-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgb(0 0 0 / 82%); }
.dp-reetag-modal[hidden] { display: none; }
.dp-reetag-modal__video { width: min(92vw, 26rem); max-height: 80vh; background: #000; }
.dp-reetag-modal__close {
  position: absolute; top: 1.5rem; right: 1.5rem; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 50%;
  background: var(--c-white); color: var(--c-black); cursor: pointer;
}

/* У донора блоки и кнопки помечены служебным классом с GUID. На узких экранах
   такие кнопки и значки магазинов вылезали за пределы страницы — ограничиваем. */
.donor-content [class*="content-block-tag"] { max-width: 100%; min-width: 0; }
.donor-content img[class*="content-block-tag"] { width: auto; height: auto; max-width: 100%; }
.donor-content .buttons { flex-wrap: wrap; }