/* ==========================================================================
   KERATIN PRO — стили конкретных страниц
   ========================================================================== */

/* ------------------------------------------------------ заголовок страницы
   Как у донора: чёрная полоса во всю ширину, белый заголовок weight 700.
   Значения замерены на донорском CSS (recon/loreal_index.css,
   `.content-card--dark .content-card__content` + `.content-card__title`):
   паддинг 24px → 80px, заголовок clamp(1.625rem, 4.2vw + .85rem, 2.25rem)
   → 64px/72px, letter-spacing normal, text-transform none, отступ сверху 4rem. */
.page-hero {
  background: var(--c-black);
  color: var(--c-white);
  margin-top: 1.78rem;               /* .mt-8 донора */
  padding-block: 0.67rem;          /* 24px */
}
@media (min-width: 64rem) {
  .page-hero { padding-block: 5rem; }            /* 80px */
  /* у донора текст стоит на 80px от края, а не на ширине гаттера */
  .page-hero > .container { padding-inline: 5rem; }
}

.page-hero__title {
  overflow-wrap: break-word;
  font-size: clamp(1.625rem, 4.2vw + 0.85rem, 2.25rem);
  line-height: 2.5rem;            /* 40px */
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
}
@media (min-width: 64rem) {
  .page-hero__title { font-size: 4rem; line-height: 4.5rem; }  /* 64px / 72px */
}

.page-hero__text {
  margin-top: 0.5rem;
  max-width: 46rem;
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--c-white);
  opacity: 0.85;
}
@media (min-width: 48rem) {
  .page-hero__text { font-size: var(--fs-16); }
}

.page-hero__meta {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.33rem 0.55rem;
  font-size: var(--fs-12);
  color: var(--c-white);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* ------------------------------------------------------- витрина брендов */
.brand-grid {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.brand-card {
  background: var(--c-white);
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  min-height: 10rem;
  transition: background var(--t) var(--ease);
}
.brand-card:hover { background: var(--c-surface-2); }
.brand-card__logo {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-card__logo img { max-height: 3.5rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; }
.brand-card:hover .brand-card__logo img { filter: none; opacity: 1; }
/* Логотипов у брендов нет, поэтому название работает как логотип-начертание.
   Раньше имя выводилось дважды: заглушкой логотипа и подписью под ней. */
.brand-card__logotype {
  font-size: var(--fs-16);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  color: var(--c-ink);
  margin-top: auto;
  overflow-wrap: break-word;
}

.brand-card__meta { font-size: var(--fs-12); color: var(--c-muted); }

/* ------------------------------------------------------- редакционный блок */
.split { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
}
.split__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--panel { border: 1px solid var(--c-ink-soft); }
.split__media--panel img {
  object-fit: contain;
  padding: 3rem;
  background: var(--c-panel-dark);
}
.split__content { max-width: 34rem; }
.split__content .h2 { margin-bottom: 1rem; }
.split__content p { color: var(--c-ink-soft); line-height: var(--lh-relaxed); margin-bottom: 1rem; }

/* ------------------------------------------------------------ преимущества */
.features {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.feature {
  background: var(--c-white);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.feature svg { width: 1.75rem; height: 1.75rem; }
.feature__title {
  font-size: var(--fs-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.feature__text { font-size: var(--fs-13); color: var(--c-muted); line-height: 1.55; }

/* ------------------------------------------------------------ цитата */
.quote {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.quote__text {
  font-size: clamp(1.25rem, 3.4vw, var(--fs-32));
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.quote__author {
  margin-top: 0.67rem;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-wide);
  color: var(--c-muted);
}


.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  flex-shrink: 0;
  /* Высота как у кнопок рядом (56px): раньше степпер был 46px и его верх
     не совпадал с «В корзину» на 5px. */
  height: 3.5rem;
}
.qty button {
  width: 2.75rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-18);
  line-height: 1;
  transition: background var(--t-fast) var(--ease);
}
.qty button:hover { background: var(--c-surface-2); }
.qty input {
  width: 2.5rem;
  height: 2.75rem;
  border: 0;
  text-align: center;
  font-size: var(--fs-14);
  font-weight: 600;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-info__benefits {
  margin-top: 0.78rem;   /* было inline-стилем в разметке */
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  padding-top: 0.33rem;
  font-size: var(--fs-13);
  color: var(--c-muted);
}
.product-info__benefits li { display: flex; align-items: flex-start; gap: 0.5rem; }
.product-info__benefits svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }

.prose { max-width: 46rem; font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--c-ink-soft); }
.prose--wide { max-width: 60rem; }   /* было inline-стилем; шире обычного .prose */
.prose > * + * { margin-top: 0.875rem; }
.prose h2, .prose h3 {
  color: var(--c-ink);
  font-size: var(--fs-18);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-top: 0.78rem;
}
/* На страницах-статьях заголовки разделов крупнее и без капса: 18px капсом
   читаются как служебная подпись, а не как заголовок. У донора капса у
   заголовков нет вовсе (recon/DESIGN_SPEC.md § 1.6).
   Правило стоит ПОСЛЕ .prose h2: специфичность у них равная, поэтому
   порядок в файле и решает, какое применится. */
.prose--wide h2 {
  font-size: var(--fs-24);
  font-weight: var(--w-bold);
  text-transform: none;
  margin-top: 1.11rem;
}
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.375rem; }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose table { font-size: var(--fs-13); margin-top: 1rem; }
.prose th, .prose td { border: 1px solid var(--c-line); padding: 0.5rem 0.75rem; text-align: left; }
.prose th { background: var(--c-surface-2); font-weight: 600; }

.specs { width: 100%; font-size: var(--fs-14); }
.specs th, .specs td { padding: 0.75rem 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.specs th { width: 40%; color: var(--c-muted); font-weight: 400; }
.specs td { font-weight: 500; }

/* --------------------------------------------------------------- корзина */
.cart-layout { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
  /* та же панель итогов, что и в оформлении: одна ширина и один зазор,
     иначе одинаковый блок выглядит по-разному на соседних страницах */
  .cart-layout { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: 4rem; align-items: start; }
}

.cart-list { border-top: 1px solid var(--c-line); }
.cart-item {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.45rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 48rem) {
  .cart-item { grid-template-columns: 6.5rem minmax(0, 1fr) 8rem 7rem;
    align-items: center; }
}
.cart-item__media { background: var(--c-surface-2); aspect-ratio: 1; }
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; }
.cart-item__body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.cart-item__brand { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--c-muted); }
.cart-item__title { font-size: var(--fs-14); line-height: 1.35; }
.cart-item__volume { font-size: var(--fs-12); color: var(--c-muted); }
.cart-item__remove {
  align-self: flex-start;
  margin-top: 0.17rem;
  font-size: var(--fs-12);
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-item__remove:hover { color: var(--c-accent); }
.cart-item__price { font-size: var(--fs-16); font-weight: 600; white-space: nowrap; }
@media (min-width: 48rem) { .cart-item__price { text-align: right; } }

.summary {
  background: var(--c-surface-2);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
@media (min-width: 64rem) { .summary { position: sticky; top: calc(var(--header-h) + 1rem); } }
.summary__title { font-size: var(--fs-18); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-caps); }
.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.45rem;
  font-size: var(--fs-14);
}
/* в узкой строке «подпись — значение» слова не должны рваться посередине */
.summary__row > span { overflow-wrap: normal; }
.summary__row > span:last-child { text-align: right; white-space: nowrap; }
.summary__row--muted { color: var(--c-muted); }
.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-20);
  font-weight: 600;
}
.summary__note { font-size: var(--fs-12); color: var(--c-muted); line-height: 1.5; }

.progress {
  height: 3px;
  background: var(--c-line);
  overflow: hidden;
}
.progress__bar { height: 100%; background: var(--c-black); transition: width var(--t) var(--ease); }

/* --------------------------------------------------------------- чекаут */
.checkout-layout { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: 4rem; align-items: start; }
}

.form-grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid--2 > .field--full { grid-column: 1 / -1; }

.form-section { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--c-line); }
.form-section:first-child { padding-top: 0; }
/* Заголовок раздела формы должен быть заметно крупнее подписи поля
   (у неё --fs-14): раньше он был 13px и читался как подпись, а не заголовок. */
.form-section__title {
  font-size: var(--fs-20);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.pay-option {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.875rem;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pay-option:hover { border-color: var(--c-black); }
.pay-option:has(input:checked) { border-color: var(--c-black); background: var(--c-surface-2); }
/* На серой подложке выбранной опции #797676 даёт 4.13:1 — для 12px мало.
   Тот же приём, что для .summary и .info-card (см. style.css). */
.pay-option:has(input:checked) { --c-muted: #6e6b6b; }
.pay-option input { margin-top: 0.25rem; accent-color: var(--c-black); flex-shrink: 0; }
.pay-option__title { font-size: var(--fs-14); font-weight: 600; }
.pay-option__text { display: block; font-size: var(--fs-12); color: var(--c-muted); margin-top: 0.125rem; line-height: 1.5; }

.order-line { display: flex; gap: 0.75rem; padding-block: 0.625rem; border-bottom: 1px solid var(--c-line); }
.order-line__media { width: 3rem; height: 3rem; background: var(--c-white); flex-shrink: 0; }
.order-line__media img { width: 100%; height: 100%; object-fit: contain; }
.order-line__body { flex: 1; min-width: 0; }
.order-line__title { font-size: var(--fs-13); line-height: 1.35; }
.order-line__meta { font-size: var(--fs-12); color: var(--c-muted); margin-top: 0.125rem; }
.order-line__price { font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------- инфо-страницы */
.info-page__body { max-width: 48rem; }
/* почта и телефон не должны рваться по дефису внутри строки:
   «shop@tonya-» / «stil.ru» читается как ошибка вёрстки */
.info-page__body a[href^='mailto'],
.info-page__body a[href^='tel'] { white-space: nowrap; }
/* В тексте инфостраниц почта и телефон набраны обычной строкой, а не ссылкой,
   поэтому их оборачивают в этот класс: иначе браузер рвёт «+7 … 000-00-» и
   «shop@tonya-» по дефису. */
.nowrap { white-space: nowrap; }
.info-page__body > * + * { margin-top: 1.25rem; }
.info-page__body h2 {
  font-size: var(--fs-20);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-top: 1rem;
}
.info-page__body ul { list-style: disc; padding-left: 1.25rem; }
.info-page__body li + li { margin-top: 0.5rem; }
.info-page__body p { color: var(--c-ink-soft); line-height: var(--lh-relaxed); }

.info-cards { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-card { padding: 1.25rem; background: var(--c-surface-2); }
.info-card__title { font-size: var(--fs-14); font-weight: 600; margin-bottom: 0.375rem; }
.info-card__text { font-size: var(--fs-13); color: var(--c-muted); line-height: 1.6; }

/* ----------------------------------------------------------- 404 / ошибка */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  min-height: 55vh;
  padding-block: 1.78rem;
}
/* На подтверждении заказа высота 55vh давала 580px пустоты между чёрной
   полосой и блоком — здесь блок compactный. */
.error-page--compact { min-height: 0; }
.error-page__code {
  font-size: clamp(4rem, 18vw, 10rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.error-page__text { color: var(--c-muted); max-width: 30rem; }

/* ------------------------------------------------------- поиск/подсказки */
.search-page__form { display: flex; gap: 0.75rem; max-width: 40rem; margin-top: 1rem; }
.search-page__form .input { height: 3.5rem; }   /* 56px — как у кнопки рядом */

/* ------------------------------------------------ оверлей поиска в шапке */
.search-overlay {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-2);
  padding-block: 0.45rem;
  z-index: 5;
}
.search-overlay[hidden] { display: none; }
.search-overlay .searchbox { max-width: none; }
.search-overlay .searchbox__input {
  height: 3rem;
  font-size: var(--fs-16);
  background: var(--c-surface-2);
}
.search-overlay .searchbox__submit { height: 3rem; }

/* ---------------------------------------------------------------- рейтинг */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: var(--c-ink);
}
.stars svg { flex-shrink: 0; }
.stars .text-muted { margin-left: 0.375rem; }

/* -------------------------------------------- закрытие фильтров на мобиле */
.filters__close { display: none; }
@media (max-width: 63.99rem) {
  .filters__close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    margin-bottom: 0.33rem;
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-13);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
  }
  .filters.is-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 45%);
    z-index: -1;
  }
}

/* ==========================================================================
   СТРАНИЦА ТОВАРА — первый экран по донору lorealprofessionnel.com
   Значения сняты со спеки: .pdp-top, .product-details__*, .media-gallery.
   ========================================================================== */

.pdp-top {
  display: flex;
  flex-direction: column;
  gap: 0.67rem;
  padding-top: 0.45rem;
}
@media (min-width: 64rem) {
  .pdp-top {
    flex-direction: row;
    gap: 0.45rem;
    padding-top: 0.67rem;
  }
}
.pdp-top__column { flex: 1; min-width: 0; }
.pdp-top__column--media { flex: 1; }
.pdp-top__column--details { flex: 1; }

/* --------------------------------------------------------------- галерея */
.media-gallery { position: relative; }

.media-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-surface-2);
  overflow: hidden;
}
.media-gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
}
@media (min-width: 64rem) {
  .media-gallery__stage img { padding: 3rem; }
}

/* круглые стрелки поверх фото, как .slider-control у донора */
.media-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--c-black);
  color: var(--c-white);
  z-index: 2;
  transition: opacity var(--t) var(--ease);
}
.media-gallery__nav:hover { opacity: 0.8; }
.media-gallery__nav--prev { left: 0.75rem; }
.media-gallery__nav--next { right: 0.75rem; }
.media-gallery__nav[disabled] {
  background: var(--c-white);
  color: rgb(0 0 0 / 20%);
  pointer-events: none;
}
.media-gallery__nav svg { width: 0.875rem; height: 0.875rem; }

.media-gallery__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.17rem;
}

/* миниатюры по центру под галереей */
.pdp-thumbnails {
  display: flex;
  justify-content: center;
  gap: 0.33rem;
  padding-top: 0.45rem;
  flex-wrap: wrap;
}
.pdp-thumbnails button {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid transparent;
  background: var(--c-surface-2);
  padding: 0.25rem;
  transition: border-color var(--t-fast) var(--ease);
}
.pdp-thumbnails button img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbnails button:hover { border-color: var(--c-line); }
.pdp-thumbnails button.is-active { border-color: var(--c-black); }

/* ------------------------------------------------------ информационная колонка */
.product-details__title {
  display: block;
  font-weight: var(--w-bold);
}
.product-details__label {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.25;
}
@media (min-width: 64rem) {
  .product-details__label { font-size: var(--fs-20); font-weight: var(--w-bold); }
}
.product-details__label--dark { background: var(--c-black); color: var(--c-white); }

/* [линейка/бренд] — 1.25rem → 3rem, weight 500 */
.product-details__range {
  display: block;
  margin-top: 0.33rem;
  font-size: var(--fs-20);
  font-weight: var(--w-medium);
  line-height: var(--lh-title);
}
@media (min-width: 64rem) {
  .product-details__range { font-size: 3rem; }
}

/* название — 2.25rem → 4rem, weight 700, lh 1.125 */
.product-details__name {
  display: block;
  font-size: var(--fs-36);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
  margin-top: 0.33rem;
}
@media (min-width: 64rem) {
  .product-details__name { font-size: var(--fs-64); }
}

.product-details__ratings {
  display: flex;
  align-items: center;
  gap: 0.33rem;
  margin-top: 0.5rem;
}
.product-details__claim {
  font-size: var(--fs-18);
  font-weight: var(--w-semibold);
  line-height: 1.5;
  margin-top: 0.45rem;
  color: var(--c-ink-soft);
}
@media (min-width: 64rem) {
  .product-details__claim { font-size: var(--fs-20); }
}

.product-details__main { margin-top: 1.5rem; }

/* цена — наша коммерция в типографике донора */
.pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 0.45rem;
  border-top: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  margin-bottom: 0.55rem;
}
.pdp-price__current { font-size: var(--fs-36); font-weight: var(--w-bold); line-height: 1; }
.pdp-price__old {
  font-size: var(--fs-20);
  font-weight: var(--w-medium);
  color: var(--c-muted);
  text-decoration: line-through;
}
.pdp-price__save {
  margin-left: auto;
  font-size: var(--fs-14);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* выбор объёма (аналог package-selector донора) */
.package-selector { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.package-selector__label {
  font-size: var(--fs-14);
  font-weight: var(--w-bold);
  text-transform: uppercase;
}
.package-selector__label span { font-weight: var(--w-medium); text-transform: none; }
.package-selector__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.package-selector__option {
  min-width: 4.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-black);
  border-radius: var(--radius-pill);
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.package-selector__option:hover { background: var(--c-surface-2); }
.package-selector__option.is-active { background: var(--c-black); color: var(--c-white); }

/* ряд кнопок: как .pdp-btn-wrapper / .pdp-rfp-btn */
.pdp-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 63.99rem) {
  .pdp-btn-wrapper .btn { width: 100%; }
}
.pdp-btn-wrapper .btn { min-width: 10.3125rem; }

/* ------------------------------------------------- аккордеоны (details) */
.accordion {
  border-top: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  margin-top: 1.33rem;
}
.accordion + .accordion { border-top: 0; }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding-block: 0.55rem;
  font-size: var(--fs-24);
  font-weight: var(--w-bold);
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  font-size: var(--fs-24);
  font-weight: var(--w-medium);
  line-height: 1;
  flex-shrink: 0;
}
.accordion[open] summary::after { content: '−'; }
.accordion__content { padding-bottom: 1.75rem; max-width: 60rem; }
.accordion__content .prose { max-width: none; }

/* липкая панель покупки внизу экрана */
.pdp-sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 0.67rem;
  padding: 0.75rem var(--gutter);
  background: var(--c-white);
  border-top: 1px solid var(--c-black);
}
@media (min-width: 64rem) {
  .pdp-sticky { display: flex; }
}
.pdp-sticky__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-sticky .btn { min-width: 10.3125rem; }

/* ------------------------------------------------ журнал: карточки-гайды */
.guide-grid {
  display: grid;
  gap: 1px;
  background: var(--c-black);
  border: 1px solid var(--c-black);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guide-card {
  background: var(--c-white);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  min-height: 17rem;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.guide-card:hover { background: var(--c-black); color: var(--c-white); }

.guide-card__tag {
  font-size: var(--fs-14);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: var(--c-muted);
}
.guide-card:hover .guide-card__tag { color: rgb(255 255 255 / 60%); }

.guide-card__title {
  font-size: var(--fs-24);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
}
.guide-card__text {
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--c-muted);
}
.guide-card:hover .guide-card__text { color: rgb(255 255 255 / 75%); }
.guide-card .link-arrow { margin-top: auto; }

/* ------------------------------------ плавающее окно с видео в баннере
   У донора это сторонний виджет (iframe Reetags): position:fixed, 166x295,
   right:24px, radius:8px, и он привязан к НИЗУ окна — замер при окне 900px
   даёт top:371px, т.е. bottom:234px. Поэтому на невысоких окнах блок
   поднимается вверх, а не сползает к центру. Кнопка «+» живёт в том же
   закреплённом контейнере, иначе она оторвалась бы от окна при прокрутке. */
.hero__pip-wrap {
  position: fixed;
  right: 1.5rem;
  bottom: 234px;                       /* как у донора */
  /* на низких окнах не даём блоку залезть под шапку */
  max-height: calc(100vh - var(--header-h) - 2rem);
  width: 166px;
  z-index: var(--z-float);
  display: none;
}
@media (min-width: 64rem) { .hero__pip-wrap { display: block; } }

.hero__pip {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;      /* 166 → 295px, как у донора */
  border-radius: 0.5rem;     /* 8px */
  overflow: hidden;
  background: var(--c-black);
  box-shadow: 0 16px 40px rgb(0 0 0 / 35%);
}

/* еле заметное притемнение поверх видео, чтобы окно не перетягивало
   внимание с основного содержимого страницы; подпись и кнопка остаются
   поверх слоя */
.hero__pip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 12%);
  pointer-events: none;
  z-index: 1;
}

.hero__pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* круглая кнопка play/pause по центру окна */
.hero__pip-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 78%);
  color: var(--c-ink);
  z-index: 2;                       /* поверх притемняющего слоя */
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.hero__pip-toggle:hover { background: var(--c-white); transform: translate(-50%, -50%) scale(1.06); }
.hero__pip-toggle svg { width: 1.25rem; height: 1.25rem; }

.hero__pip-caption {
  position: absolute;
  z-index: 2;                       /* поверх притемняющего слоя */
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1rem 3.5rem;
  color: var(--c-white);
  font-size: var(--fs-14);
  font-weight: var(--w-medium);
  line-height: 1.35;
  /* плотное затемнение: под окном может быть светлое видео */
  background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 55%) 38%, rgb(0 0 0 / 92%) 100%);
  text-shadow: 0 1px 6px rgb(0 0 0 / 65%);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__pip-caption strong { display: block; font-weight: var(--w-bold); }
.hero__pip-caption { padding-bottom: 3.5rem; }

/* ==========================================================================
   БАННЕР — раскладка донора (.hero-banner, --layout-full)
   Видео на всю ширину первого экрана, текст в левой половине,
   плавающее окно с видео справа, «+» в правом нижнем углу.
   Значения из спеки: картинка min-height 60rem, контент padding 1rem 5rem
   с justify-content:space-around, мобиле — column-reverse и min-height 100vw.
   ========================================================================== */

.hero--banner {
  position: relative;
  background: var(--c-surface-2);
  color: var(--c-ink);
}

.hero--banner .hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero--banner .hero__track::-webkit-scrollbar { display: none; }

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  /* В разметке сначала идёт кадр, потом текст. На мобиле у донора кадр
     стоит сверху, а текст под ним — значит обычная колонка, а не reverse. */
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 64rem) {
  .hero__slide { flex-direction: row; min-height: min(88vh, 60rem); }
}

/* медиа на всю ширину экрана, под текстом */
.hero__picture {
  position: relative;
  flex: 1;
  min-height: 100vw;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .hero__picture { position: absolute; inset: 0; min-height: 0; }
}

.hero__picture video,
.hero__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* затемнение только для тёмной темы: светлые кадры остаются светлыми */
.hero__slide--dark .hero__picture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 45%) 0%,
    rgb(0 0 0 / 55%) 55%,
    rgb(0 0 0 / 80%) 100%
  );
}
@media (min-width: 64rem) {
  .hero__slide--dark .hero__picture::after {
    background: linear-gradient(
      90deg,
      rgb(0 0 0 / 72%) 0%,
      rgb(0 0 0 / 42%) 52%,
      rgb(0 0 0 / 12%) 100%
    );
  }
}

/* текстовая колонка: левая половина на десктопе */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vw;
  padding: 1.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 64rem) {
  .hero__content {
    min-height: 0;
    /* Отступы — как у донора: 80px у колонки + 40px у текстового блока,
       итого текст начинается на 120px от края, на одной вертикали с
       донорским. Ширина колонки 62% (у донора 50%) — для длинных русских
       заголовков при 64px; на отступ слева это не влияет. */
    width: 62%;
    padding: 1rem 5rem;
  }
}

.hero__content-middle { max-width: 40rem; }
@media (min-width: 64rem) {
  .hero__content-middle { max-width: none; padding: 0 2.5rem; }
}

.hero__slide--light {
  /* светлая тема рассчитана на светлый кадр; фон страхует случай,
     когда видео ещё не отрисовалось или не загрузилось */
  background: var(--c-surface-2);
  color: var(--c-ink);
}
.hero__slide--dark { background: var(--c-black); color: var(--c-white); }

/* ribbon-плашка: инверсная, как .hero-banner__ribbon span у донора */
.hero__ribbon span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.25;
}
.hero__slide--light .hero__ribbon span { background: var(--c-black); color: var(--c-white); }
.hero__slide--dark .hero__ribbon span { background: var(--c-white); color: var(--c-ink); }

.hero__title {
  margin-top: 0.45rem;
  font-size: clamp(2.25rem, 7vw, 4rem);
  font-weight: var(--w-bold);
  line-height: 1.05;
  /* заголовок переносится по словам: рвать слово посередине здесь недопустимо */
  overflow-wrap: break-word;
  hyphens: none;
}
@media (min-width: 64rem) {
  .hero__title { line-height: 1.125; }
}

.hero__subtitle {
  margin-top: 0.45rem;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: var(--w-semibold);
  line-height: 1.125;
}

.hero__description {
  margin-top: 0.45rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.25;
}
.hero__slide--dark .hero__description { color: rgb(255 255 255 / 85%); }

/* тот же боковой отступ, что у текстового блока: без него кнопка
   вставала на 80px, а заголовок на 120px — у донора обе на 120px */
/* Растянутая ссылка на весь баннер: кнопки нет, ведёт туда, куда вела она.
   Стрелки и точки карусели лежат выше (z-index 4) и остаются рабочими. */
.hero__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero__hit:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* панель управления — поверх правого нижнего угла */
.hero--banner .hero__controls {
  position: absolute;
  top: 1rem;
  bottom: auto;
  right: var(--gutter);
  left: var(--gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: flex-end;
  pointer-events: none;
}
.hero--banner .hero__controls > * { pointer-events: auto; }

.hero--banner .hero__dot::after { background: rgb(0 0 0 / 30%); }
.hero--banner .hero__dot[aria-selected='true']::after { background: var(--c-black); }
.hero--banner .hero__slide--dark ~ .hero__dot::after { background: rgb(255 255 255 / 50%); }

.hero--banner .hero__arrow {
  background: rgb(255 255 255 / 82%);
  color: var(--c-ink);
  border-color: transparent;
}
.hero--banner .hero__arrow:hover { background: var(--c-white); }

/* ------------------- секция «профессиональный уход» (routine у донора) */
/* Значения из спеки: main-heading 4rem/700, line-height 4.5rem,
   padding-bottom 6rem, max-width 41.4375rem; мобиле 2.25rem/2.5rem/2rem. */
.routine {
  background: var(--c-white);
  overflow: hidden;
}

.routine__head {
  max-width: 100%;
  padding-bottom: 0.89rem;
}
@media (min-width: 64rem) {
  /* Замер донора: в блоке «профуход» и заголовок, и карточки начинаются на
     161px от края. Значит сдвинут весь блок, а не один заголовок — иначе он
     разъезжается со своей же лентой. Сдвигаем контейнер: 10rem = 160px. */
  .routine > .container { padding-inline: 10rem; }
  .routine__head {
    max-width: none;
    padding-bottom: 1.33rem;
  }
}

.routine__title {
  overflow-wrap: break-word;
  font-size: clamp(1.5rem, 8vw, 2.25rem);
  line-height: 1.15;
  font-weight: var(--w-bold);
  text-wrap: balance;
}
@media (min-width: 64rem) {
  .routine__title { font-size: var(--fs-64); line-height: 4.5rem; }
}

.routine__text {
  margin-top: 0.67rem;
  max-width: 52rem;
  font-size: var(--fs-18);
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--c-ink-soft);
}
@media (min-width: 64rem) {
  .routine__text { font-size: var(--fs-24); }
}

/* карточка routine-слайдера: широкое медиа + подпись под ним */
.routine-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
}

.routine-card__media {
  position: relative;
  height: 18rem;
  overflow: hidden;
  background: var(--c-surface-2);
}
@media (min-width: 64rem) {
  .routine-card__media { height: 26rem; }
}
.routine-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.routine-card:hover .routine-card__media img { transform: scale(1.04); }

.routine-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 0.55rem;
}

.routine-card__title {
  font-size: var(--fs-24);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
@media (min-width: 64rem) {
  .routine-card__title { font-size: var(--fs-36); }
}

.routine-card__text {
  margin-top: 0.5rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.45;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* карточка статьи: время чтения и заголовок крупным кеглем */
.article-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.article-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-surface-2);
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.article-card:hover .article-card__media img { transform: scale(1.04); }

.article-card__title {
  margin-top: 0.67rem;
  font-size: var(--fs-20);
  font-weight: var(--w-bold);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
@media (min-width: 64rem) {
  .article-card__title { font-size: var(--fs-36); line-height: 2.5rem; }
}

.article-card__description {
  margin-top: 0.45rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.45;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__duration {
  display: flex;
  align-items: center;
  gap: 0.33rem;
  margin-top: 0.67rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  color: var(--c-muted);
}
.article-card__duration svg { width: 1.25rem; height: 1.25rem; }

/* карточка эксперта */
.expert-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.expert-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-surface-2);
}
.expert-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.expert-card:hover .expert-card__media img { transform: scale(1.04); }

.expert-card__title {
  margin-top: 0.55rem;
  font-size: var(--fs-20);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
}
.expert-card__text {
  margin-top: 0.33rem;
  font-size: var(--fs-16);
  font-weight: var(--w-medium);
  line-height: 1.45;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* лента карточек контента: чуть шире обычной товарной */
.rail--content .rail__track > * { flex-basis: 78%; }
@media (min-width: 30rem) { .rail--content .rail__track > * { flex-basis: 52%; } }
@media (min-width: 48rem) { .rail--content .rail__track > * { flex-basis: 34%; } }
/* Ширину карточек этой ленты не задаём: базовое правило .rail__track даёт
   ровно 4 в ряд. Фиксированные 22rem не влезали в трек и обрезали 4-ю карточку. */
.rail--articles .rail__track > * { flex-basis: 80%; }
@media (min-width: 48rem) { .rail--articles .rail__track > * { flex-basis: 38%; } }

/* На десктопе обе ленты идут по 4 карточки в ряд — как базовая лента.
   Правило стоит здесь, после персональных: pages.css подключается позже
   style.css, поэтому иначе они перебивали базовое. */
@media (min-width: 64rem) {
  /* У донора в блоке «профуход» три карточки в ряд (~386px), а не четыре:
     при четырёх карточка выходит 268px и русские названия рвутся посередине
     слова. Лента статей остаётся на четырёх. */
  .rail--content .rail__track > * { flex-basis: calc((100% - 2rem) / 3); }
  .rail--articles .rail__track > * { flex-basis: calc((100% - 3rem) / 4); }
}
/* То же для ленты статей: 26.875rem оставляли от 4-й карточки полоску 4px. */

/* ------------------------------------------------------------ медиа-сетка */
/* Плитки с изображениями донора (локальная примерка) */
/* Блок «Тренды»: кадр товара сверху, название и описание под ним —
   как в блоке товаров на главной донора. */
.media-grid {
  display: grid;
  gap: 0.67rem 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.media-tile { display: block; }

.media-tile__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-surface-2);
}
.media-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.media-tile:hover .media-tile__media img { transform: scale(1.05); }

.media-tile__body { padding-top: 1rem; }
.media-tile__name {
  font-size: var(--fs-18);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
}
.media-tile__text {
  margin-top: 0.33rem;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--c-muted);
}

@media (max-width: 47.99rem) {
  .summary { position: static; }
}


/* --- правила, вынесенные из inline-стилей разметки --- */
.filters__count { margin-left: auto; }
.form-grid--spaced { margin-top: 1rem; }
.form-section--last { border-bottom: 0; }
.summary__note--error { color: var(--c-accent); }
.split__content .btn-group { margin-top: 1.5rem; }
.product-details__main .pdp-price { margin-top: 1.5rem; }

/* Мелкий текст-сноски внизу баннера (как у донора): на мобиле — в потоке
   после текста, на десктопе — прижат к левому низу слайда, на одной
   вертикали с заголовком (7.5rem = 5rem + 2.5rem, как у донора). */
.hero__legal {
  padding: 0 var(--gutter) 1.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 46rem;
  opacity: 0.75;
}
.hero__legal p { margin: 0; }
@media (min-width: 64rem) {
  .hero__legal {
    position: absolute;
    left: 7.5rem;
    bottom: 1.5rem;
    z-index: 3;
    padding: 0;
  }
}

/* --- страницы ассортимента донора (/all-products) ------------------------- */
.dp { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
  .dp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}
.dp-gal__stage { aspect-ratio: 1 / 1; background: var(--c-surface-2); overflow: hidden; }
.dp-gal__stage img { width: 100%; height: 100%; object-fit: cover; }
.dp-gal__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.dp-gal__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--c-surface-2); }
.dp-title { margin-top: 0.5rem; font-size: var(--fs-36); font-weight: var(--w-bold); line-height: var(--lh-title); }
.dp-lead { margin-top: 1rem; font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--c-muted); }
.dp-sku { margin-top: 1rem; font-size: var(--fs-14); color: var(--c-muted); }
.dp__cta { margin-top: 1.75rem; }
.dp-note { margin-top: 1rem; max-width: 34rem; font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--c-muted); }
.dp-acc { margin-top: 2.5rem; border-top: 1px solid var(--c-line); }
.dp-acc__item { border-bottom: 1px solid var(--c-line); }
.dp-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; font-size: var(--fs-20); font-weight: var(--w-bold);
  line-height: var(--lh-title); cursor: pointer; list-style: none;
}
.dp-acc__summary::-webkit-details-marker { display: none; }
.dp-acc__summary svg { flex: none; transition: transform var(--t) var(--ease-out); }
.dp-acc__item[open] .dp-acc__summary svg { transform: rotate(180deg); }
.dp-acc__body { padding-bottom: 1.5rem; max-width: 56rem; }
.dp-acc__body p { margin-top: 0.75rem; font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--c-muted); }
.dp-h2 { margin-top: 2.5rem; margin-bottom: 1.25rem; font-size: var(--fs-24); font-weight: var(--w-bold); line-height: var(--lh-title); }
.dp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 48rem) { .dp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .dp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.dp-card { display: flex; flex-direction: column; gap: 0.4rem; color: inherit; }
.dp-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-surface-2); }
.dp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.dp-card:hover .dp-card__media img { transform: scale(1.03); }
.dp-card__name { font-size: var(--fs-16); font-weight: var(--w-bold); line-height: 1.3; }
.dp-card__kind { font-size: var(--fs-14); color: var(--c-muted); }
.dp-sections { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .dp-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dp-section { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem; background: var(--c-surface-2); color: inherit; }
.dp-section__title { font-size: var(--fs-24); font-weight: var(--w-bold); line-height: var(--lh-title); }
.dp-section__note { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--c-muted); }
.dp-section__count { margin-top: auto; padding-top: 0.75rem; font-size: var(--fs-14); color: var(--c-muted); }
.dp-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 64rem) { .dp-videos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-video { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; }
.dp-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-surface-2); }
.dp-video__name { font-size: var(--fs-14); font-weight: var(--w-medium); line-height: 1.4; }