/* subscription.html — базовые стили в styles.css (SUBSCRIPTION PAGE);
   здесь — обновление 2026: розовые акценты как на главной + компактные блоки. */

body.subscription-page {
  overflow-x: clip;
}

/* ── Розовый акцент как на главной (#E7385A) на всей странице подписки ── */
body.subscription-page {
  --paloma-accent: #E7385A;
}

/* Убираем белый зазор между шапкой и фото: фото-колонка поднимается под
   фикс-шапку (сдвиг вверх на высоту шапки) и компенсирует высоту, чтобы низ
   остался на месте. Форма (правая колонка) по-прежнему ниже шапки. */
.subscription-page .subscription-hero__media {
  margin-top: calc(-1 * var(--paloma-header-offset, 120px));
}
@media (min-width: 1025px) {
  .subscription-page .subscription-hero {
    align-items: stretch;
  }
  /* компенсируем сдвиг вверх, чтобы низ фото остался на уровне формы */
  .subscription-page .subscription-hero__media {
    min-height: calc(78svh + var(--paloma-header-offset, 120px));
  }
}

/* ══════════════════════════════════════════════════════════════
   ВНИМАНИЕ: этот файл подключают ещё gift-certificate.html и
   wedding-piggy-bank.html, и у них <main class="subscription-page">.
   Поэтому селектор `.subscription-page` ловит все три страницы.

   Всё, что ниже, — только про фото подписки (вертикальный кадр 3:4 со
   вшитой надписью). Селектор `body.subscription-page` есть ТОЛЬКО у
   subscription.html: у сертификата body.gift-page, у копилки
   body.wedding-page. Не менять на `.subscription-page` — разъедет
   вёрстка соседних страниц с их собственными фото.
   ══════════════════════════════════════════════════════════════ */

/* В кадр вшита подпись «Цветочная подписка», поэтому фото показываем целиком
   (contain), а не обрезаем под колонку — иначе текст режется по краям. */
body.subscription-page .subscription-hero__img {
  object-fit: contain;
  object-position: center;
}

/* Видео в герое подписки (без вшитой надписи) заполняет кадр целиком —
   поэтому cover, а не contain (иначе были бы белые поля по краям). */
body.subscription-page .subscription-hero__video {
  object-fit: cover;
  object-position: center;
}

/* Глобальный main{overflow-x:hidden} превращает <main> в скролл-контейнер
   (overflow-y становится auto) и ломает position:sticky у фото. clip убирает
   горизонтальную прокрутку, но скролл-контейнер НЕ создаёт — как на странице
   оформления (.event-decoration-page main). */
body.subscription-page main.subscription-page {
  overflow-x: clip;
  overflow-y: visible;
}

@media (min-width: 1025px) {
  /* Фото «преследует» скролл: колонка прилипает под шапкой, пока справа
     листается длинная форма. Для этого grid-элемент должен быть по высоте
     меньше строки — отсюда align-items:start вместо stretch.
     Ширину колонки задаём по пропорции кадра (3:4) — тогда фото заполняет её
     целиком, без белых полей, и при этом ничего не обрезается. */
  body.subscription-page .subscription-hero {
    /* фото занимает ровно половину экрана; правая колонка — вторую половину */
    --sub-photo-w: 50vw;
    align-items: start;
    grid-template-columns: var(--sub-photo-w) minmax(0, 1fr);
  }
  body.subscription-page .subscription-hero__media {
    position: sticky;
    top: calc(var(--paloma-header-offset, 120px) + 12px);
    align-self: start;
    margin-top: 0;
    min-height: 0;
    /* высота — от ширины колонки, пропорция кадра держится при любом окне */
    height: auto;
    aspect-ratio: 3 / 4;
  }
  /* колонка уже ровно по кадру — cover не обрезает, но гарантирует, что
     не останется светлой полоски от округления */
  body.subscription-page .subscription-hero__img {
    object-fit: cover;
  }
}

@media (max-width: 1024px) {
  /* На узкой колонке contain в низком блоке дал бы огромные белые поля —
     поэтому блок принимает натуральную высоту кадра, фото видно целиком. */
  body.subscription-page .subscription-hero__media {
    margin-top: 0;
    min-height: 0;
    height: auto;
  }
  body.subscription-page .subscription-hero__img {
    height: auto;
  }
}

/* выноска про скидку 10% на первую неделю */
.sub-trial-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(231, 56, 90, 0.28);
  border-radius: 12px;
  background: rgba(231, 56, 90, 0.06);
  font-family: var(--sans, "Montserrat", sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: #b02a44;
}

/* Заголовок героя — приподнят, с запасом снизу под хвосты букв */
.subscription-hero__title {
  margin-top: -0.12em;
  line-height: 1;
  padding-bottom: 0.18em;
}

/* Подзаголовок героя */
.subscription-hero__subtitle {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-family: var(--sans);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #E7385A;
}

.subscription-hero__price {
  font-weight: 600;
  color: #E7385A;
}

/* Плашка-уведомление о согласовании доставки */
.subscription-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: clamp(18px, 2vw, 24px);
  padding: 12px 14px;
  background: rgba(27, 26, 24, 0.06);
  border-radius: 12px;
}

.subscription-notice svg {
  flex: none;
  margin-top: 2px;
  color: #1B1A18;
}

.subscription-notice p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paloma-text, #1B1A18);
}

/* Форма — компактнее по вертикали */
.subscription-form {
  margin-top: clamp(22px, 2.6vw, 34px);
}

.subscription-form__group {
  margin: 0 0 clamp(15px, 1.8vw, 22px);
}

/* Размеры — 5 в ряд, компактные */
.subscription-sizes--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.subscription-sizes--5 .subscription-size {
  min-height: 82px;
  padding: 12px 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}

.subscription-sizes--5 .subscription-size__name {
  font-size: clamp(13px, 1.5vw, 19px);
  white-space: nowrap; /* «10 000 ₽» в одну строку, без переносов */
}

.subscription-sizes--5 .subscription-size__text {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.subscription-size.is-active {
  border-color: #E7385A;
  background: rgba(231, 56, 90, 0.08);
}

[data-sum-discount] {
  color: #E7385A;
}

/* ── Чуть больше воздуха между группами и легендой ── */
.subscription-form__legend {
  margin-bottom: 12px;
}

.subscription-options {
  gap: 10px;
}

.subscription-option {
  letter-spacing: 0.06em;
}

/* ── Сводка расчёта — тёмная плашка как на сайте ── */
.subscription-summary {
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px);
  border-radius: 12px;
  background: #1B1A18;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Скруглённые углы как у кнопки в первом блоке главной (12px) */
.subscription-option,
.subscription-size,
.subscription-form__submit {
  border-radius: 12px;
}

.subscription-summary__row {
  padding: 7px 0;
  font-size: 14.5px;
  color: rgba(251, 246, 232, 0.72);
}

.subscription-summary__total {
  margin-top: 14px;
  padding-top: 16px;
  align-items: center;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FBF6E8;
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Итоговая цена — читаемый sans вместо курсивного serif */
.subscription-summary__total span:last-child {
  font-family: var(--sans);
  font-size: clamp(22px, 2vw, 28px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  color: #E7385A;
}

/* ── Согласие перед оформлением ── */
.sub-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 22px);
  font-family: var(--sans, "Montserrat", sans-serif);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--paloma-text, #1B1A18);
  cursor: pointer;
}
.sub-consent input {
  flex: none;
  margin-top: 1px;
  width: 18px;
  height: 18px;
  accent-color: #E7385A;
  cursor: pointer;
}
.sub-consent a {
  color: #E7385A;
  text-decoration: underline;
}

/* ── Кнопка оформления — больше воздуха, читаемая цена ── */
.subscription-form__submit {
  margin-top: clamp(18px, 2vw, 24px);
  min-height: 60px;
  gap: 6px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
}

.subscription-form__submit:disabled,
.subscription-form__submit.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-sum-total-btn] {
  font-weight: 700;
}

/* =====================================================
   ВИТРИНА ПОД ПОДПИСКОЙ — карточки товаров как на главной
   (используется разметка .home-showcase / .home-product-card)
   ===================================================== */
.sub-showcase {
  border-top: 1px solid rgba(27, 26, 24, 0.08);
  padding-top: clamp(48px, 6vw, 88px);
}

/* Скругление карточек и кнопок «Подробнее» — как на главной (body.is-home) */
.sub-showcase .home-product-card__media,
.sub-showcase .home-product-card__more {
  border-radius: 12px;
}
.sub-showcase .home-product-card__media img,
.sub-showcase .home-product-card__placeholder {
  border-radius: inherit;
}

/* Адаптив */
@media (max-width: 1024px) {
  /* На мобильных фото-герой не должен занимать пол-экрана перед формой */
  .subscription-hero__media {
    min-height: 34svh;
  }
}

@media (max-width: 768px) {
  .subscription-sizes--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .subscription-sizes--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Плашка «Что важно знать» */
.sub-accordion {
  margin-top: clamp(16px, 1.6vw, 20px);
  border: 1px solid rgba(27, 26, 24, 0.14);
  border-radius: 12px;
  padding: 0 14px;
}

.sub-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #1B1A18;
  user-select: none;
}

.sub-accordion__trigger::-webkit-details-marker { display: none; }

.sub-accordion__icon {
  flex: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sub-accordion[open] .sub-accordion__icon { transform: rotate(180deg); }

.sub-accordion__body { padding: 0 0 14px; }

.sub-accordion__body p {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(27, 26, 24, 0.72);
}

.sub-accordion__body p:last-child { margin-bottom: 0; }