/* ════════════════════════════════════════════
   NASTYA-LOSEVA.RU — дизайн-система v2
   Настроение: тёплый крафт × современный e-commerce
   ════════════════════════════════════════════ */
:root {
  color-scheme: light;   /* не даём браузеру инвертировать цвета */
  /* Палитра */
  --bg: #F7F1E8;            /* тёплый крем — фон */
  --bg-soft: #FDFAF5;       /* светлее — карточки-подложки */
  --ink: #241B12;           /* эспрессо — текст */
  --ink-soft: #7C6E5E;      /* подписи */
  --card: #FFFFFF;
  --accent: #C4552D;        /* терракота */
  --accent-2: #E2683B;      /* градиент CTA */
  --olive: #6B7F4F;
  --gold: #D9A441;
  --tiffany: #17C3B2;       /* сочный тиффани (тон ~178°), акцент ~5%: лейблы, галочки, микро-детали */
  --tiffany-deep: #0E9C8F;  /* тёмный тиффани — hover ссылок, мелкий текст */
  --dark: #241B12;          /* тёмная секция */
  --dark-soft: #3A2E21;

  /* Типографика.
     Раньше заголовки были набраны Playfair Display (с засечками, местами
     курсивом). Настя попросила оставить один шрифт — тот, что в блоке
     вопросов и ответов: он заметно читаемее, а аудитории 35–65 это важнее
     декоративности. Теперь везде Manrope, отличия только в насыщенности. */
  --f-display: 'Manrope', sans-serif;
  --f-body: 'Manrope', sans-serif;

  /* Геометрия */
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px;
  --container: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 2px 12px rgba(36,27,18,.06);
  --shadow-md: 0 12px 40px rgba(36,27,18,.10);
  --shadow-cta: 0 10px 30px rgba(196,85,45,.35);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--f-body); color: var(--ink); background: var(--bg);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
h1,h2,h3 { font-family: var(--f-display); font-weight:800; line-height:1.18; letter-spacing:-.02em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
.container { max-width: var(--container); margin:0 auto; padding:0 clamp(18px,4vw,40px); }
section { padding: clamp(64px, 9vw, 120px) 0; }
.muted { color: var(--ink-soft); }
.center { text-align:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--tiffany);
}
.eyebrow::before {
  content:""; width:26px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--tiffany), var(--gold), var(--tiffany));
  background-size: 200% 100%;
  animation: shimmer 3.2s var(--ease) infinite;
}
@keyframes shimmer { 0%{background-position:0 0} 100%{background-position:200% 0} }

/* тиффани-ссылки: подчёркивание выезжает при наведении */
.link-tiffany {
  color: var(--tiffany); font-weight:700; text-decoration:none;
  background: linear-gradient(var(--tiffany-deep), var(--tiffany-deep)) no-repeat left bottom / 0% 2px;
  transition: background-size .3s var(--ease), color .25s;
  padding-bottom: 2px;
}
.link-tiffany:hover { color: var(--tiffany-deep); background-size: 100% 2px; }
.section-head { max-width:640px; margin-bottom: clamp(32px,5vw,56px); }
.section-head p { margin-top:12px; font-size:1.06rem; }

/* ── Кнопки ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; text-decoration:none; text-align:center;
  font-family: var(--f-body); font-weight:800; font-size:1rem;
  padding: 17px 34px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow: var(--shadow-cta);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
.btn:active { transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px rgba(36,27,18,.18);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); filter:none; }
.btn--dark { background: var(--ink); box-shadow: 0 10px 30px rgba(36,27,18,.3); }
.btn--sm { padding: 12px 24px; font-size:.92rem; }

/* ── Шапка ── */
.header {
  position: sticky; top:0; z-index:90;
  background: rgba(247,241,232,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(36,27,18,.07);
}
.header .container { display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.logo__mark {
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.logo__name { font-family: var(--f-display); font-weight:700; font-size:1.12rem; line-height:1.1; }
.logo__tag { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.nav { display:flex; gap:26px; }
.nav a { color: var(--ink-soft); text-decoration:none; font-size:.94rem; font-weight:600; transition: color .2s; }
.nav a:hover { color: var(--accent); }

/* ── Баннер акции ── */
.promo-banner {
  background: linear-gradient(90deg, var(--accent), var(--gold));
  color:#fff; text-align:center; padding: 11px 20px; font-weight:800; font-size:.95rem;
}

/* ── HERO ── */
.hero { position:relative; overflow:hidden; padding: clamp(56px,8vw,110px) 0; }
.hero::before { /* мягкие пятна света */
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 45% at 82% 18%, rgba(217,164,65,.20), transparent 70%),
    radial-gradient(30% 40% at 8% 78%, rgba(196,85,45,.14), transparent 70%),
    radial-gradient(26% 30% at 60% 90%, rgba(107,127,79,.12), transparent 70%);
  pointer-events:none;
}
.hero .container { position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items:center; }
.hero h1 { margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub { font-size: 1.14rem; max-width: 50ch; margin-bottom: 30px; }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom: 30px; }
.hero__badges { display:flex; gap: 22px; flex-wrap:wrap; }
.hbadge { display:flex; flex-direction:column; }
.hbadge b { font-family: var(--f-display); font-size:1.35rem; color: var(--ink); }
.hbadge span { font-size:.8rem; color: var(--ink-soft); }

/* фото-карточка героя */
.hero__visual { position:relative; }
.hero__photo {
  aspect-ratio: 4/4.6; border-radius: var(--r-lg); overflow:hidden; position:relative;
  background:
    radial-gradient(120% 90% at 30% 12%, #F2E3CB 0%, #E4C9A4 45%, #C99B67 100%);
  box-shadow: var(--shadow-md);
  display:flex; align-items:flex-end;
}
.hero__photo::after { /* хлебный узор */
  content:"🍞  🥖  🧀  🥓  🌾"; position:absolute; inset:0;
  font-size: 3.6rem; opacity:.14; display:flex; align-items:center; justify-content:center; letter-spacing: .4em;
}
.hero__photo-note {
  position:relative; width:100%; padding: 18px 22px;
  background: linear-gradient(transparent, rgba(36,27,18,.55));
  color:#fff; font-size:.85rem; font-weight:600;
}
.float-card {
  position:absolute; background: var(--card); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 14px 18px;
  display:flex; align-items:center; gap:12px; font-weight:700; font-size:.9rem;
}
.float-card small { display:block; font-weight:600; color:var(--ink-soft); font-size:.75rem; }
.float-card--tl { top: 26px; left: -28px; }
.float-card--br { bottom: 34px; right: -20px; }
.float-card .ic {
  width: 40px; height:40px; flex:0 0 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: var(--bg); font-size:1.15rem;
}

/* ── Бегущая строка ── */
.marquee { overflow:hidden; border-block: 1px solid rgba(36,27,18,.08); padding: 14px 0; background: var(--bg-soft); }
.marquee__track { display:flex; gap: 48px; width:max-content; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--f-display); font-style:italic; font-size:1.05rem; color: var(--ink-soft); white-space:nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Витрина продуктов ── */
.products-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.5vw,28px); }
.product {
  background: var(--card); border-radius: var(--r-lg); overflow:hidden; position:relative;
  box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-md), 0 0 0 1.5px rgba(23,195,178,.35); }
.product__media {
  position:relative; aspect-ratio: 16/9.5; display:flex; align-items:center; justify-content:center;
  font-size: 3.2rem;
}
.product__media--bread { background: linear-gradient(135deg,#F4E3C6,#E0B678); }
.product__media--meat { background: linear-gradient(135deg,#F3D4C4,#D98E6B); }
.product__media--video { background: linear-gradient(135deg,#E7E9D8,#ADBA8C); }
.product__media--cheese { background: linear-gradient(135deg,#FBF0D2,#EDD489); }
.product__badge {
  position:absolute; top:14px; right:14px; z-index:2;
  background: var(--accent); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  padding: 6px 13px; border-radius:999px; text-transform:uppercase;
}
.product__type {
  position:absolute; top:14px; left:14px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink); padding: 6px 13px; border-radius:999px;
}
.product__body { padding: 22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.product__body h3 { margin-bottom: 8px; }
.product__desc { font-size:.93rem; color: var(--ink-soft); margin-bottom: 14px; }
.product__includes { list-style:none; margin: 0 0 18px; font-size:.86rem; }
.product__includes li { padding: 3px 0 3px 24px; position:relative; color: var(--ink-soft); }
.product__includes li::before { content:"✓"; position:absolute; left:0; color: var(--tiffany); font-weight:800; }
.product__buy { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.product__price { font-family: var(--f-display); font-weight:700; font-size:1.5rem; }
.product__old { text-decoration: line-through; color: var(--ink-soft); font-size:.95rem; margin-right:8px; font-family: var(--f-body); font-weight:600; }

/* ── Тёмная секция «как это работает» ── */
.how { background: var(--dark); color: #F3EADF; border-radius: clamp(24px,4vw,48px); margin: 0 clamp(10px,2vw,24px); }
.how h2 { color:#fff; }
.how .eyebrow { color: var(--gold); }
.how .eyebrow::before { background: var(--gold); }
.how-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,3vw,28px); }
.step { background: var(--dark-soft); border-radius: var(--r-md); padding: 28px; position:relative; }
.step__num {
  font-family: var(--f-display); font-size:2.6rem; color: var(--gold); line-height:1; margin-bottom: 14px;
}
.step h3 { color:#fff; margin-bottom:8px; }
.step p { font-size:.92rem; color:#CDBFAF; }

/* ── Автор ── */
.author .container { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.author__photo {
  aspect-ratio: 4/4.8; border-radius: var(--r-lg); position:relative; overflow:hidden;
  background: radial-gradient(120% 90% at 70% 15%, #F2E3CB 0%, #DDBE93 55%, #BE8F5C 100%);
  box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:center; font-size:3.4rem; opacity:.96;
}
.author__quote {
  margin-top: 22px; padding: 18px 22px; background: var(--card); border-left: 4px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style:italic; font-size:.98rem; box-shadow: var(--shadow-sm);
}
.author__stats { display:flex; gap: clamp(20px,4vw,44px); margin-top: 26px; flex-wrap:wrap; }
.stat b { font-family: var(--f-display); font-size: clamp(1.5rem,2.6vw,2rem); color: var(--accent); display:block; line-height:1.1; }
.stat span { font-size:.82rem; color: var(--ink-soft); }

/* ── Отзывы: пузыри как в TG ── */
.reviews { background: var(--bg-soft); }
.reviews-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,26px); align-items:start; }
.bubble {
  background: #E8F5DE; border-radius: 18px 18px 18px 4px; padding: 20px 22px;
  box-shadow: var(--shadow-sm); position:relative; font-size:.95rem;
}
.bubble::after { content:""; position:absolute; left:-7px; bottom:0; border: 8px solid transparent; border-right-color:#E8F5DE; border-bottom-color:#E8F5DE; }
.bubble__name { margin-top: 12px; font-size:.8rem; font-weight:800; color: var(--olive); }
.bubble__time { float:right; font-size:.72rem; color: var(--tiffany); margin-top:14px; }
.bubble__text { margin: 0; }
.bubble__photo {
  width: 100%; border-radius: 12px; margin-bottom: 12px;
  aspect-ratio: 4/3; object-fit: cover; background: #DCEBD0;
}

/* ── Карусель отзывов ──
   Отзывов много и они длинные: сеткой занимали пол-страницы.
   Листается пальцем (свайп) и стрелками. Прокрутка «липнет» к карточкам,
   чтобы отзыв не останавливался посередине. */
.reviews-carousel { position: relative; }
.rc-track {
  display: flex; gap: clamp(14px, 2vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 4px; padding: 4px 4px 10px;
  scrollbar-width: none;                      /* полосу прокрутки прячем */
  -webkit-overflow-scrolling: touch;
}
.rc-track::-webkit-scrollbar { display: none; }
.rc-card {
  flex: 0 0 calc((100% - 2 * clamp(14px, 2vw, 22px)) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.rc-card .bubble { flex: 1; }

.rc-card__author { display: flex; align-items: center; gap: 10px; margin: 14px 0 0 6px; }
.rc-card__ava {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.rc-card__name { font-weight: 800; font-size: .92rem; color: var(--ink); }

/* Стрелки — крупные, чтобы легко попасть */
.rc-arrow {
  position: absolute; top: 38%; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-md); font-size: 1.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s, transform .25s var(--ease);
}
.rc-arrow:hover { transform: scale(1.08); color: var(--accent); }
.rc-arrow--prev { left: -14px; }
.rc-arrow--next { right: -14px; }
.rc-arrow.is-off { opacity: 0; pointer-events: none; }   /* на краю списка прячем */

.rc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.rc-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(36,27,18,.18); transition: background .25s, width .25s var(--ease);
}
.rc-dot.is-active { background: var(--accent); width: 26px; border-radius: 99px; }

/* ── FAQ ── */
.faq-list { max-width: 780px; margin: 0 auto; }
details {
  background: var(--card); border-radius: var(--r-md);
  padding: 22px 26px; box-shadow: var(--shadow-sm); margin-bottom: 12px;
  transition: box-shadow .2s;
}
details[open] { box-shadow: var(--shadow-md); }
details summary { cursor:pointer; font-weight:800; font-size:1.02rem; list-style:none; position:relative; padding-right:36px; }
details summary::-webkit-details-marker { display:none; }
details summary::after {
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--accent); transition: transform .25s var(--ease);
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { margin-top: 12px; color: var(--ink-soft); font-size:.95rem; }

/* ── Финальный CTA ── */
/* FAQ короткий (аккордеон свёрнут), и двойной отступ секций давал большую
   пустоту перед финальным блоком. Сжимаем стык: низ FAQ и верх финала. */
#faq { padding-bottom: clamp(40px, 5vw, 64px); }
.final { text-align:center; padding-top: clamp(48px, 6vw, 72px); }
.final h2 { max-width: 18ch; margin: 0 auto 14px; }
.final p { max-width: 52ch; margin: 0 auto 30px; }

/* ── Футер ── */
.footer { background: var(--dark); color:#A5947F; padding: 44px 0; font-size:.85rem; }
.footer .container { display:grid; gap: 10px; }
.footer a { color:#D8C6B0; text-decoration:none; }
.footer a:hover { color:#fff; }

/* ── Корзина ── */
.cart-btn {
  position:relative; background: var(--card); border: 1.5px solid rgba(36,27,18,.12);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.25rem;
  transition: transform .2s var(--ease), border-color .2s;
}
.cart-btn:hover { transform: translateY(-2px); border-color: var(--tiffany); }
.cart-btn__count {
  position:absolute; top:-5px; right:-5px; min-width: 21px; height: 21px; border-radius: 999px;
  background: var(--tiffany); color:#fff; font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; padding: 0 5px;
}
.cart-btn__count[hidden] { display:none; }   /* иначе display:flex перебивает атрибут hidden */
.cart-btn__count.pop { animation: pop .35s var(--ease); }
@keyframes pop { 50% { transform: scale(1.35); } }
.add-btn--in { background: var(--tiffany); box-shadow: 0 10px 30px rgba(23,195,178,.3); }
.add-btn--in:hover { filter: brightness(.97); }

.cart-item {
  display:flex; align-items:center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(36,27,18,.08);
}
.cart-item__icon { font-size: 1.5rem; }
.cart-item__info { flex:1; line-height: 1.3; }
.cart-item__info b { display:block; }
.cart-item__info small { display:block; color: var(--ink-soft); font-size:.75rem; }
.cart-item__price { font-weight: 800; white-space: nowrap; }
.cart-item__rm {
  background:none; border:0; cursor:pointer; font-size: 1.3rem; color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: 50%; transition: background .2s, color .2s;
}
.cart-item__rm:hover { background: #F6E7E1; color: var(--accent); }
.cart-total {
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0; font-size: 1.05rem;
}
.cart-total b { font-family: var(--f-display); font-size: 1.5rem; color: var(--accent); }
.order-summary { margin-bottom: 14px; }
.order-summary__row { display:flex; justify-content:space-between; gap: 12px; padding: 7px 0; font-size:.92rem; border-bottom: 1px dashed rgba(36,27,18,.1); }
.order-summary__total { border-bottom: 0; font-size: 1rem; }
.order-summary__total b { color: var(--accent); }

/* ── Модалка ── */
.modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background: rgba(36,27,18,.55); backdrop-filter: blur(4px); padding: 20px; }
.modal.open { display:flex; }
/* Пока открыта корзина — страница под ней не прокручивается */
body.modal-open { overflow: hidden; }
/* Окно не растёт от количества товаров: оно ограничено высотой экрана,
   а прокручивается только список. Иначе на ноутбуках и телефонах
   кнопка оплаты уезжала за нижний край. */
.modal__box {
  background: var(--card); border-radius: var(--r-lg); padding: 38px;
  max-width: 460px; width:100%; position:relative; box-shadow: var(--shadow-md);
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal__cart { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#cart-items { flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
.cart-dock { flex: 0 0 auto; }
.modal__form { min-height: 0; overflow-y: auto; }
/* Кнопка с суммой прилипает к низу окна */
.pay-dock { position: sticky; bottom: 0; background: var(--card); padding-top: 10px; z-index: 2; }
.modal__close { position:absolute; top:14px; right:18px; background:none; border:0; font-size:1.7rem; cursor:pointer; color:var(--ink-soft); }
.modal__box h3 { margin-bottom: 12px; font-size:1.4rem; }
.field { margin-bottom: 14px; }
.field input { width:100%; padding: 15px 18px; border: 1.5px solid #E2D7C8; border-radius: var(--r-sm); font-size:1rem; font-family: var(--f-body); background: var(--bg-soft); transition: border-color .2s; }
.field input:focus { outline:none; border-color: var(--tiffany); box-shadow: 0 0 0 4px rgba(23,195,178,.16); }
.field .err { color:#B33; font-size:.8rem; display:none; padding-top:4px; }
.field.invalid input { border-color:#B33; }
.field.invalid .err { display:block; }
.platform-label { font-weight:800; font-size:.9rem; margin-bottom: 8px; }
.platform-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; }
.pill { cursor:pointer; }
.pill input { position:absolute; opacity:0; pointer-events:none; }
.pill span {
  display:inline-block; padding: 10px 16px; border-radius: 999px; font-size:.88rem; font-weight:700;
  background: var(--bg-soft); border: 1.5px solid #E2D7C8; transition: all .2s var(--ease);
}
.pill:hover span { border-color: var(--tiffany); }
.pill input:checked + span { background: var(--tiffany); border-color: var(--tiffany); color:#fff; box-shadow: 0 6px 18px rgba(23,195,178,.3); }

.consent { font-size:.8rem; color: var(--ink-soft); display:flex; gap:8px; align-items:flex-start; margin-bottom: 18px; }
.consent input { margin-top:3px; }
.consent a { color: var(--accent); }
.modal__success { text-align:center; display:none; }
.modal__success .big { font-size: 3rem; margin-bottom: 8px; }

/* ── Sticky CTA (мобайл) ── */
/* Кнопка просто парит над контентом: ни полосы-подложки, ни градиента,
   ни размытия (backdrop-filter заметно тормозит недорогие телефоны).
   От контента её отделяет тень, а форма «пилюли» смотрится легче
   прямоугольника во всю ширину. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  padding: 0 18px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;            /* пустая область не перехватывает клики */
  background: none;
}
.sticky-cta .btn {
  width: 100%; pointer-events: auto;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(196,85,45,.42), 0 2px 8px rgba(36,27,18,.16);
}

/* ── Появление при скролле ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════
   СКИДКИ, КОМПЛЕКТЫ, ПРОМОКОД, СТРАНИЦА ЗАКАЗА
   (те же токены: --accent / --gold / --tiffany)
   ════════════════════════════════════════════ */

/* ── Плашка акции и таймер на карточке товара ── */
.discount-note {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:.8rem; font-weight:800; letter-spacing:.02em; color: var(--accent);
  background: rgba(196,85,45,.09); border-radius: 999px; padding: 6px 13px; align-self:flex-start;
}
.discount-note__dot {
  width:7px; height:7px; border-radius:50%; background: var(--accent); flex:0 0 7px;
  box-shadow: 0 0 0 0 rgba(196,85,45,.5); animation: dot-pulse 2.4s var(--ease) infinite;
}
@keyframes dot-pulse { 70% { box-shadow: 0 0 0 8px rgba(196,85,45,0); } 100% { box-shadow: 0 0 0 0 rgba(196,85,45,0); } }
.discount-timer {
  font-size:.8rem; color: var(--ink-soft); margin-bottom: 12px;
}
.discount-timer b { color: var(--ink); font-weight:800; }

/* товар без цены — «Скоро в продаже» */
.product--soon { opacity: .92; }
.product--soon .product__media { filter: saturate(.65); }
.product__badge--soon { background: var(--ink-soft); }
.product__soon-label { font-family: var(--f-body); font-size: 1rem; font-weight:800; color: var(--ink-soft); }
.product__buy .btn[disabled] {
  background: #E6DBCB; color: var(--ink-soft); box-shadow:none; cursor: not-allowed;
}
.product__buy .btn[disabled]:hover { transform:none; filter:none; }

/* ── Карточка комплекта ── */
.bundle-card {
  margin-top: clamp(18px,2.5vw,28px);
  background: linear-gradient(135deg, #FFFDF8, #FBF2E2);
  border: 1.5px dashed rgba(217,164,65,.55);
  border-radius: var(--r-lg); padding: clamp(20px,3vw,28px);
  display:flex; align-items:center; gap: clamp(16px,3vw,28px);
  box-shadow: var(--shadow-sm);
}
.bundle-card__icons { font-size: 2.2rem; letter-spacing: 4px; flex:0 0 auto; }
.bundle-card__info { flex:1; min-width:0; }
.bundle-card__label {
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.bundle-card__info h3 { margin-bottom: 4px; }
.bundle-card__info p { font-size:.9rem; }
.bundle-card__buy { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto; }
.bundle-card__prices { text-align:right; line-height:1.25; }
.bundle-card__price { font-family: var(--f-display); font-weight:700; font-size:1.6rem; display:inline-block; }
.bundle-card__save {
  display:block; font-size:.78rem; font-weight:800; color: var(--tiffany-deep);
}

/* ── Промокод в корзине ── */
.promo-box { padding: 14px 0 4px; border-top: 1px solid rgba(36,27,18,.08); }
.promo-box__row { display:flex; gap:8px; }
.promo-box input {
  flex:1; min-width:0; padding: 12px 16px; border:1.5px solid #E2D7C8; border-radius: var(--r-sm);
  font-family: var(--f-body); font-size:.95rem; background: var(--bg-soft); text-transform: uppercase;
  transition: border-color .2s;
}
.promo-box input:focus { outline:none; border-color: var(--tiffany); box-shadow: 0 0 0 4px rgba(23,195,178,.16); }
.promo-box input.promo-input--ok { border-color: var(--tiffany); background: rgba(23,195,178,.07); }
.promo-box .btn--ghost { white-space:nowrap; }
.promo-msg { font-size:.82rem; font-weight:700; padding-top:6px; min-height: 1.2em; color: var(--ink-soft); }
.promo-msg--ok { color: var(--tiffany-deep); }
.promo-msg--err { color: #B33; }

/* ── Разбивка скидок (корзина и оформление) ── */
.cart-breakdown:empty { display:none; }
.cart-breakdown { padding-top: 12px; border-top: 1px solid rgba(36,27,18,.08); margin-top: 4px; }
.bd-row { display:flex; justify-content:space-between; gap:12px; font-size:.85rem; padding: 4px 0; color: var(--ink-soft); }
.bd-row--save { color: var(--tiffany-deep); font-weight:700; }
.bd-row--note { font-size:.78rem; font-style:italic; }
.bd-saved {
  margin-top: 10px; padding: 10px 14px; border-radius: var(--r-sm);
  background: rgba(23,195,178,.10); color: var(--tiffany-deep);
  font-size:.9rem; font-weight:700; text-align:center;
}
.bd-saved b { font-weight:800; }
.cart-item__bundled { font-size:.8rem; font-weight:700; color: var(--tiffany-deep); }
.cart-item__price .product__old { font-size:.82rem; }
.order-summary__bd { margin: 6px 0 4px; }

/* ── Ошибка формы и состояние загрузки кнопки ── */
.form-error {
  background: #FBECE7; color: #8E3A20; border-radius: var(--r-sm);
  padding: 12px 16px; font-size:.87rem; font-weight:600; margin-bottom: 14px;
}
.btn.is-loading { opacity:.75; cursor: progress; }
.btn.is-loading:hover { transform:none; filter:none; }
/* Согласие на рассылку — необязательное, поэтому визуально тише основного */
.consent--optional { margin-top: -8px; opacity: .85; }
.consent--invalid span { color: #B33; }
.consent--invalid input { outline: 2px solid #B33; outline-offset: 2px; }

/* ════════════ Страница заказа order.html ════════════ */
.order-page { padding: clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px); }
.order-card {
  max-width: 720px; margin: 0 auto; background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: clamp(24px,4vw,44px);
}
.order-status { display:flex; align-items:center; gap:16px; margin-bottom: 8px; }
.order-status__icon {
  width: 62px; height: 62px; flex:0 0 62px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; background: var(--bg);
}
.order-status h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.order-status--paid .order-status__icon { background: rgba(23,195,178,.15); }
.order-status--pending .order-status__icon { background: rgba(217,164,65,.18); }
.order-status--canceled .order-status__icon { background: rgba(196,85,45,.13); }
.order-num { font-size:.85rem; color: var(--ink-soft); font-weight:700; letter-spacing:.04em; }
.order-lead { margin: 14px 0 6px; font-size:1.02rem; }
.order-block { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(36,27,18,.09); }
.order-block h2 { font-size: 1.2rem; margin-bottom: 12px; }
.order-line { display:flex; justify-content:space-between; gap:12px; padding: 8px 0; border-bottom: 1px dashed rgba(36,27,18,.1); font-size:.94rem; }
.order-total { display:flex; justify-content:space-between; align-items:center; padding-top: 14px; font-size:1.05rem; font-weight:700; }
.order-total b { font-family: var(--f-display); font-size:1.6rem; color: var(--accent); }
.order-files { display:grid; gap:10px; }
.file-link {
  display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--ink);
  background: var(--bg-soft); border:1.5px solid #E2D7C8; border-radius: var(--r-md);
  padding: 14px 18px; font-weight:700; transition: border-color .2s, transform .2s var(--ease);
}
.file-link:hover { border-color: var(--tiffany); transform: translateY(-2px); }
.order-note {
  background: rgba(217,164,65,.14); border-left: 4px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 20px; font-size:.93rem; margin-top: 14px;
}
.order-note b { display:block; margin-bottom: 4px; }
.order-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 18px; align-items:center; }
.order-hint { font-size:.85rem; color: var(--ink-soft); margin-top: 10px; }
.order-pending-ping {
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color: var(--ink-soft); margin-top: 10px;
}
.order-pending-ping::before {
  content:""; width:8px; height:8px; border-radius:50%; background: var(--gold);
  animation: dot-pulse 1.8s var(--ease) infinite;
}
.order-masked { font-weight:800; }

/* ── Мобайл ── */
@media (max-width: 960px) {
  .products-grid, .how-grid, .reviews-grid { grid-template-columns: 1fr 1fr; }
  /* Карусель отзывов: на планшете по две карточки */
  .rc-card { flex-basis: calc((100% - clamp(14px, 2vw, 22px)) / 2); }
  .rc-arrow--prev { left: -6px; }
  .rc-arrow--next { right: -6px; }
}
@media (max-width: 720px) {
  .bundle-card { flex-direction:column; align-items:stretch; text-align:left; }
  .bundle-card__buy { align-items:stretch; }
  .bundle-card__prices { text-align:left; }
  .bundle-card__buy .btn { width:100%; }
  .promo-box__row { flex-wrap:wrap; }
  .promo-box .btn--ghost { width:100%; }
  .order-status { flex-direction:column; align-items:flex-start; gap:12px; }
  .order-actions .btn { width:100%; }
}
@media (max-width: 720px) {
  .hero .container, .author .container { grid-template-columns: 1fr; }
  .products-grid, .how-grid, .reviews-grid { grid-template-columns: 1fr; }

  /* На телефоне — один отзыв на экран, листается пальцем.
     Стрелки прячем: свайп привычнее, а кнопки только мешают. */
  .rc-card { flex-basis: 100%; }
  .rc-arrow { display: none; }
  .rc-dots { margin-top: 14px; }
  .nav { display:none; }
  .header .btn { display:none; }
  .sticky-cta { display:block; }
  /* Декоративные плашки на телефоне налезали на лицо и подпись —
     убираем их, фото Насти остаётся чистым, как на компьютере. */
  .float-card { display: none; }
  .hero__visual { max-width: 420px; margin: 0 auto; }

  /* ── Корзина и оформление на телефоне: шторка снизу ──
     По центру экрана окно не помещалось: половина формы уезжала за край,
     прокрутки не было. Шторка привычна по мобильным приложениям, открывается
     под большой палец и листается внутри себя. */
  .modal { align-items: flex-end; padding: 0; backdrop-filter: none; background: rgba(36,27,18,.6); }
  .modal__box {
    max-width: 100%; width: 100%;
    border-radius: 26px 26px 0 0;
    padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: 90vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: sheet-up .28s var(--ease);
  }
  /* «Ручка» сверху — понятный признак, что окно тянется и закрывается */
  .modal__box::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 99px;
    background: #E2D7C8; margin: -8px auto 16px;
  }
  .modal__close { top: 10px; right: 12px; font-size: 2rem; padding: 4px 10px; }
  .modal__box h3 { padding-right: 40px; }

  /* Пальцем удобнее по крупным целям */
  .field input { padding: 16px 18px; font-size: 16px; }  /* 16px — iOS не зумит поле */
  .pill span { padding: 12px 18px; }
  .modal__box .btn { width: 100%; }

  /* ── Кнопка оплаты закреплена внизу окна ──
     С несколькими товарами список длинный, и кнопка уезжала за экран.
     Теперь листается только содержимое, а сумма и кнопка всегда видны.
     Отрицательные поля растягивают подставку во всю ширину шторки. */
  .pay-dock {
    position: sticky;
    bottom: calc(-20px - env(safe-area-inset-bottom));
    z-index: 3;
    margin: 14px -18px calc(-20px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
    box-shadow: 0 -14px 26px -12px rgba(36,27,18,.26);
  }

  /* ── Корзина: окно не растёт от числа товаров ──
     Прокручивается только список, а промокод, итог и кнопка
     всегда остаются на экране. */
  .modal__box { display: flex; flex-direction: column; overflow: hidden; }
  .modal__cart { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  #cart-items {
    flex: 1 1 auto; min-height: 84px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* подсказка, что список продолжается */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  }
  .cart-dock {
    flex: 0 0 auto;
    margin: 8px -18px calc(-20px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
    box-shadow: 0 -14px 26px -12px rgba(36,27,18,.26);
  }
  /* Промокод в одну строку — экономит высоту */
  .promo-box__row { flex-wrap: nowrap; gap: 8px; }
  .promo-box .btn--ghost { width: auto; white-space: nowrap; flex: 0 0 auto; }
  .cart-dock p.center { margin-top: 8px !important; }

  /* Список товаров в оформлении — компактнее, чтобы влезало больше */
  .order-summary__row { padding: 5px 0; font-size: .88rem; }
  .order-summary { margin-bottom: 10px; }
  .modal__form h3 { margin-bottom: 8px; }
  .field { margin-bottom: 11px; }
  .consent { margin-bottom: 12px; }

  /* Размытия на телефоне отключаем — они дают заметные просадки при скролле */
  .header { background: rgba(247,241,232,.97); backdrop-filter: none; }
  .product__type { background: rgba(255,255,255,.95); backdrop-filter: none; }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ════════════ Бесплатные сборники ════════════
   Отдельная секция на светлой подложке: визуально отделена от платной
   витрины, чтобы не путать «купить» и «скачать даром». */
.free-section { background: var(--bg-soft); }
.free-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 26px); max-width: 880px; margin: 0 auto;
}
/* Карточка-подарок: обложка книги слева, текст и кнопка справа.
   Обложка сразу показывает, что человек получит — это убедительнее иконки. */
.free-card {
  background: var(--card); border-radius: var(--r-lg); padding: clamp(16px, 2vw, 22px);
  box-shadow: var(--shadow-sm); display: flex; gap: clamp(16px, 2vw, 22px); align-items: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.free-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.free-card__cover {
  flex: 0 0 clamp(96px, 12vw, 132px);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(36,27,18,.18);   /* обложка «приподнята», как настоящая книга */
  align-self: stretch; max-height: 210px;
}
.free-card__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.free-card__icon {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 16px; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(107,127,79,.16), rgba(217,164,65,.18));
}
.free-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.free-card__body h3 { margin-bottom: 2px; }
.free-card__body p { font-size: .95rem; }
.free-card__btn { align-self: flex-start; margin-top: 4px; }
.free-note { margin-top: clamp(22px, 3vw, 32px); font-size: .95rem; }

@media (max-width: 560px) {
  .free-grid { grid-template-columns: 1fr; }
  .free-card__btn { align-self: stretch; text-align: center; }
}

/* ── Ссылки на соцсети (блок «Об авторе») ── */
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: .92rem;
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), color .25s;
}
.social:hover { transform: translateY(-2px); color: var(--accent); }
.social__ic { font-size: 1.05rem; }

/* ── Реальный портрет в шапке (заменяет эмодзи-заглушку) ── */
.hero__photo--real::after { content: none; }   /* убираем хлебный узор-заглушку */
.hero__photo--real img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* Лёгкое затемнение по верху — приглушает остаток графики с обложки
   и делает фото цельнее. Снизу затемнение уже есть под подписью. */
.hero__photo--real::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(36,27,18,.28) 0%, transparent 22%);
  pointer-events: none;
}
.hero__photo--real .hero__photo-note { position: relative; z-index: 2; }

/* ── Иконки соцсетей (официальные логотипы в фирменных цветах) ── */
.social__svg { width: 18px; height: 18px; flex: 0 0 18px; }
.social { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.social:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }

/* Иконки платформ в выборе «где смотреть материалы» */
.pill__ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.pill input:checked + span .pill__ic { filter: brightness(0) invert(1); }  /* на выбранной (цветной) плашке — белые */

/* Фото готового продукта на карточке товара (вместо emoji-иконки).
   Фото уже кадрированы под 16:9.5 — показываем целиком по центру. */
.product__media--cover { background: #EFE4D2; }
.product__cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}