/* ============================================================
   styles.css — стили сайта. Порядок: 00 база (Инженер) →
   далее блоки по ТЗ, каждый блок — ТОЛЬКО ДОБАВЛЯЕТСЯ в конец
   своим комментарием «ТЗ №N — …». Существующие правила не редактировать.
   Цвета и размеры — только через var(--…) из tokens.css. HEX здесь запрещён.
   ============================================================ */

/* ---------- 00 БАЗА (Инженер) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--cc-bg); color: var(--cc-ink); }
body {
  font-family: var(--cc-font-sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100dvh;
}
@supports not (min-height: 100dvh) { body { min-height: 100vh; } }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--cc-green); text-decoration: none; }
@media (hover: hover) { a:hover { color: var(--cc-gold); } }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* Корневая колонка: мобильная 430 по центру; на десктопе (≥900) снимается в ТЗ №7 */
.cc-page {
  position: relative;
  width: 100%;
  max-width: var(--cc-col-max);
  margin: 0 auto;
  background: var(--cc-bg) url('../img/bg_drapery.webp') center top / cover no-repeat;
  box-shadow: 0 0 0 1px var(--cc-green-06);
}
.cc-page__overlay { position: absolute; inset: 0; background: var(--cc-overlay-page); pointer-events: none; }
.cc-page > header, .cc-page > main, .cc-page > footer, .cc-page > .cc-menu { position: relative; }

/* Якорные переходы: плавно, с отступом под липкую шапку (README §2: «плавный скролл к #build») */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cc-section { scroll-margin-top: calc(var(--cc-header-h) + 10px); }

/* Общие интерактивные состояния (README §6) */
.cc-btn { transition: transform var(--cc-dur-tap) var(--cc-ease), background 200ms; }
.cc-btn:active { transform: scale(.97); }
.cc-btn:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: 2px; }
.cc-card { transition: transform var(--cc-dur-card) var(--cc-ease), box-shadow 200ms; }
.cc-card:active { transform: scale(.985); }

/* Скрытый скроллбар для лент */
.cc-hide-scroll::-webkit-scrollbar { display: none; }
.cc-hide-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* Появление секций: только translateY, без opacity (README §6) */
.cc-section { transform: translateY(10px); transition: transform var(--cc-dur-reveal) var(--cc-ease-out); }
.cc-section[data-cc-in] { transform: none; }

/* Шапка: тень после 80 px скролла (README §2) */
.cc-header { transition: box-shadow var(--cc-dur-fade); }
.cc-header[data-cc-scrolled] { box-shadow: var(--cc-shadow-header); }

/* Анимации входа */
@keyframes cc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.cc-anim-in { animation: cc-in var(--cc-dur-fade) var(--cc-ease); }
.cc-anim-checkout { animation: cc-in var(--cc-dur-checkout) var(--cc-ease-out); }
.cc-pulse { animation: cc-pulse 400ms var(--cc-ease-out) 250ms; }

@media (prefers-reduced-motion: reduce) {
  .cc-btn, .cc-card, .cc-section, .cc-header { transition: none; }
  .cc-section { transform: none; }
  .cc-anim-in, .cc-anim-checkout, .cc-pulse { animation: none; }
}

/* ---------- ТЗ №1 — шапка, меню, hero, футер, десктоп-контейнер ---------- */
/* Числа — из инлайн-стилей макета (строки 84–153, 702–720, десктоп 36–79). Цвета/тени/радиусы — только токены.
   В макете нет глобального border-box, поэтому там, где макет считает размер по content-box
   (proof-strip, контурная кнопка, соц-кнопки), box-sizing задан явно — размеры совпадают с картами. */

/* Шапка (макет 88–95). Селектор .cc-page > .cc-header — перекрывает базовый position:relative у .cc-page > header */
.cc-page > .cc-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--cc-header-h);
  background: var(--cc-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cc-pad);
}
.cc-header__logo { display: flex; align-items: center; gap: 10px; }
.cc-header__badge {
  height: 38px;
  width: auto;
  background: var(--cc-bg);
  border-radius: var(--cc-radius-xs);
  padding: 2px;
  box-sizing: border-box;
}
.cc-header__menu {
  width: var(--cc-tap);
  height: var(--cc-tap);
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-white);
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Меню (макет 98–112). Обёртка fixed — перекрывает базовый position:relative у .cc-page > .cc-menu; [hidden] прячет */
.cc-page > .cc-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cc-menu__col { position: relative; width: 100%; max-width: var(--cc-col-max); height: 100%; }
/* «Кликалка мимо»: начинается под шапкой, чтобы гамбургер оставался кликабельным при открытом меню
   (повторный тап по нему закрывает меню самой кнопкой; клики по шапке мимо кнопки закрывает JS) */
.cc-menu__backdrop { position: absolute; inset: var(--cc-header-h) 0 0; pointer-events: auto; }
.cc-menu__panel {
  position: absolute;
  top: 58px;
  right: 12px;
  width: 240px;
  pointer-events: auto;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-menu);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.cc-menu__link {
  display: flex;
  align-items: center;
  min-height: var(--cc-tap);
  padding: 0 14px;
  border-radius: var(--cc-radius-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--cc-green);
}

/* 01 Hero (макет 114–153) */
#hero { position: relative; padding: 16px 0 0; overflow: hidden; }
.cc-hero__text {
  padding: 0 var(--cc-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc-hero__eyebrow { font-size: 12px; letter-spacing: .22em; font-weight: 600; color: var(--cc-gold); line-height: 1.4; }
.cc-hero__title {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cc-green);
  margin: 8px 0 0;
  transform: scaleX(.96);
  transform-origin: center;
}
.cc-hero__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-hero__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-hero__price { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-hero__price-each { font-size: 17px; font-weight: 500; color: var(--cc-ink); line-height: 1.2; }
.cc-hero__price-num { font-size: 24px; font-weight: 600; }
.cc-hero__price-box { font-size: 15px; font-weight: 600; letter-spacing: .14em; color: var(--cc-gold); line-height: 1.4; }

/* proof-strip: width 100% по content-box — как в макете (356 при 390) */
.cc-proof {
  margin-top: 16px;
  width: 100%;
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1.05fr .85fr 1.05fr 1.05fr;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 9px 2px;
  box-shadow: var(--cc-shadow-card-08);
}
.cc-proof__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 3px;
  border-right: 1px solid var(--cc-border);
}
.cc-proof__item:last-child { border-right: 0; }
.cc-proof__icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cc-green);
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-proof__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cc-green);
  text-align: left;
  white-space: nowrap;
}
/* Утверждённое отклонение (ТЗ №1 §5.2, решения.md п.4): < 400 px подписи 11 px, line-height фиксирован 13.2px */
@media (max-width: 399.98px) {
  .cc-proof__label { font-size: 11px; line-height: 13.2px; }
}
/* Инженер, 06.09: ≤ 380 px — компактные отступы полосы (gap 4, поля 2, иконка 24), чтобы «REAL CAKE TASTE» не резалось на 375/360 */
@media (max-width: 380.98px) {
  .cc-proof { padding: 9px 0; }
  .cc-proof__item { gap: 4px; padding: 0 2px; }
  .cc-proof__icon { width: 24px; height: 24px; }
}
/* Инженер, 06.09: ≤ 345 px — полоса в два ряда по два пункта (на 340/320 четыре пункта не помещаются даже в макете) */
@media (max-width: 345.98px) {
  .cc-proof { grid-template-columns: 1fr 1fr; row-gap: 8px; padding: 9px 4px; }
  .cc-proof__item { padding: 0 4px; }
  .cc-proof__item:nth-child(2) { border-right: 0; }
}

.cc-hero__img { position: relative; z-index: 3; margin: 6px 0 0; pointer-events: none; }
.cc-hero__pic { display: block; width: 100%; height: auto; filter: var(--cc-shadow-hero); }
.cc-hero__btns {
  position: relative;
  z-index: 2;
  margin-top: -22px;
  padding: 0 var(--cc-pad) 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-hero__btn {
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
.cc-hero__btn--primary {
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  box-shadow: var(--cc-shadow-btn);
}
/* контурная кнопка: height 52 + рамка 1.5 по content-box = 54, как в макете */
.cc-hero__btn--outline {
  box-sizing: content-box;
  border: 1.5px solid var(--cc-green);
  background: var(--cc-surface-90);
  color: var(--cc-green);
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .01em;
}

/* Футер (макет 702–720) */
.cc-footer {
  background: var(--cc-green);
  color: var(--cc-white);
  padding: 32px var(--cc-pad) 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cc-footer__brand { display: flex; align-items: center; gap: 14px; }
.cc-footer__badge {
  height: 56px;
  width: auto;
  background: var(--cc-bg);
  border-radius: var(--cc-radius-md);
  padding: 4px;
  box-sizing: border-box;
}
.cc-footer__tagline { font-size: 12px; letter-spacing: .18em; font-weight: 600; color: var(--cc-gold); line-height: normal; }
.cc-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.cc-footer__link { color: var(--cc-white); font-size: 16px; line-height: 1.4; padding: 4px 0; }
.cc-footer__social { display: flex; gap: 12px; }
/* соц-кнопки: 44 + рамка 1 по content-box = 46, как в макете */
.cc-footer__icon {
  width: var(--cc-tap);
  height: var(--cc-tap);
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid var(--cc-white-35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-white);
}
.cc-footer__rule { height: 1px; background: var(--cc-white-18); }
.cc-footer__copy { font-size: 13px; line-height: 1.5; color: var(--cc-white-72); }

/* Как в макете: у пунктов меню, hero-кнопок и ссылок футера цвет при hover не меняется
   (инлайн-цвет макета перебивает глобальный a:hover); только внутри @media (hover: hover) */
@media (hover: hover) {
  .cc-menu__link:hover, .cc-hero__btn--outline:hover { color: var(--cc-green); }
  .cc-hero__btn--primary:hover, .cc-footer__link:hover, .cc-footer__icon:hover { color: var(--cc-white); }
}

/* < 375 px: подзаголовок hero 18 → 17 (единственное понижение кегля, макет 77–79) */
@media (max-width: 374.98px) {
  .cc-hero__sub { font-size: 17px; }
}

/* Десктоп ≥ 900 (макет 36–71) */
@media (min-width: 900px) {
  .cc-page { max-width: none; box-shadow: none; }
  .cc-page > main > section { max-width: var(--cc-container-desktop); margin: 0 auto; width: 100%; }
  .cc-page > .cc-header, .cc-footer {
    padding-left: max(var(--cc-pad), calc((100% - var(--cc-container-desktop)) / 2 + var(--cc-pad)));
    padding-right: max(var(--cc-pad), calc((100% - var(--cc-container-desktop)) / 2 + var(--cc-pad)));
  }
  .cc-menu__col { max-width: var(--cc-container-desktop); }
  .cc-menu__panel { right: var(--cc-pad); }

  #hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    column-gap: 24px;
    align-items: center;
    padding: 40px var(--cc-pad) 56px;
  }
  .cc-hero__text { grid-column: 1; grid-row: 1; align-items: flex-start; text-align: left; padding: 0; }
  .cc-hero__price { align-items: flex-start; }
  .cc-hero__img { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .cc-hero__btns { grid-column: 1; grid-row: 2; flex-direction: row; margin-top: 20px; padding: 0; }
  .cc-hero__btn { flex: 1; }

  .cc-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    align-items: center;
  }
  .cc-footer__brand { grid-column: 1; grid-row: 1; }
  .cc-footer__nav { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
  .cc-footer__social { grid-column: 3; grid-row: 1; }
  .cc-footer__rule { grid-column: 1 / -1; grid-row: 2; }
  .cc-footer__copy { grid-column: 1 / -1; grid-row: 3; }
}

/* ≥ 1280 — контейнер 1200 (макет 72–76) */
@media (min-width: 1280px) {
  .cc-page > main > section { max-width: var(--cc-container-wide); }
  .cc-page > .cc-header, .cc-footer {
    padding-left: max(var(--cc-pad), calc((100% - var(--cc-container-wide)) / 2 + var(--cc-pad)));
    padding-right: max(var(--cc-pad), calc((100% - var(--cc-container-wide)) / 2 + var(--cc-pad)));
  }
  .cc-menu__col { max-width: var(--cc-container-wide); }
}

/* ---------- ТЗ №2 — экраны 02, 03, 04 ---------- */
/* Числа — из инлайн-стилей макета (строки 155–297, десктоп 48–59). Цвета/тени/радиусы — только токены.
   В макете нет глобального border-box: там, где размер считается по content-box (VS-карточка, сенсорная карточка,
   мини-бейджи и их кружки, кружок VS, кружки-крестики, контурная кнопка), box-sizing задан явно — размеры совпадают с картами.
   Там, где макет не задаёт line-height (наследует normal от body), он задан явно — у нас body line-height 1.4. */

/* Общие элементы шапок экранов 02/03/04 */
.cc-eyebrow { font-size: 12px; letter-spacing: .22em; font-weight: 600; color: var(--cc-gold); line-height: 1.4; }
.cc-display {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cc-green);
  margin: 8px 0 0;
  transform: scaleX(.96);
  transform-origin: center;
}
/* §5.3: «trade-off» с обычным дефисом не разрывать */
.cc-nowrap { white-space: nowrap; }

/* 02 Why Ours vs Regular (макет 156–213) */
#why-ours {
  position: relative;
  padding: 0 var(--cc-pad) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cc-vs__title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--cc-green);
  margin: 6px 0 0;
}
.cc-vs__sub { font-size: 16px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }

/* VS-карточка: width 100% по content-box (352 при 390) */
.cc-vs {
  margin-top: 20px;
  width: 100%;
  box-sizing: content-box;
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  border-radius: var(--cc-radius);
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow-card-08);
  text-align: left;
}
.cc-vs__regular { padding: 12px 6px 12px 8px; display: flex; flex-direction: column; align-items: center; }
.cc-vs__regular-label { font-size: 11px; letter-spacing: .04em; font-weight: 700; color: var(--cc-muted-2); line-height: 1.2; white-space: nowrap; }
.cc-vs__rule { height: 1px; background: var(--cc-gold); margin-top: 6px; }
.cc-vs__rule--regular { width: 44px; }
.cc-vs__rule--ours { width: 80px; }
.cc-vs__slice { width: 110px; max-width: none; height: auto; margin: 110px 0 0; filter: var(--cc-shadow-vs-img); } /* max-width: none — базовое img{max-width:100%} зажимало 110 до 106 в колонке 120 */
.cc-vs__list { margin: 20px 0 0; width: 100%; display: flex; flex-direction: column; }
.cc-vs__li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cc-border);
  font-size: 13px;
  line-height: 1.3;
  color: var(--cc-body);
  white-space: nowrap;
}
.cc-vs__li:last-child { border-bottom: 0; }
/* кружок-крестик: 18 + рамка 1.3 по content-box (20 в карте) */
.cc-vs__x {
  flex: none;
  width: 18px;
  height: 18px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1.3px solid var(--cc-muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-muted-2);
}
.cc-vs__ours {
  position: relative;
  margin: -1px -1px -1px 0;
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  border: 1.5px solid var(--cc-gold);
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.cc-vs__yes { font-size: 12px; letter-spacing: .14em; font-weight: 600; color: var(--cc-gold); line-height: 1.2; }
.cc-vs__have {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--cc-green);
  line-height: 1;
  margin-top: 3px;
}
.cc-vs__stage { position: relative; width: 100%; height: 380px; }
.cc-vs__jar { position: absolute; left: -44px; top: 0; width: 272px; max-width: none; height: auto; filter: var(--cc-shadow-vs-img); }
.cc-vs__badges {
  position: absolute;
  right: 2px;
  bottom: 86px;
  width: max-content;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  z-index: 2;
}
/* мини-бейдж: min-height 24 + padding 3+3 + рамка 1+1 по content-box = 32 (как в карте) */
.cc-vs__badge {
  display: flex;
  align-items: center;
  gap: 7px;
  box-sizing: content-box;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 3px 5px;
  min-height: 24px;
  box-shadow: var(--cc-shadow-badge);
}
/* кружок бейджа: 16 + рамка 1 по content-box = 18; стрелка §5.2 наследует цвет --cc-green */
.cc-vs__badge-ic {
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid var(--cc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-green);
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
}
.cc-vs__badge-ic--xs { font-size: 6px; }
.cc-vs__badge-txt { font-size: 8px; font-weight: 700; line-height: 1.1; color: var(--cc-green); letter-spacing: 0; white-space: nowrap; }
/* кружок VS: 46 + рамка 1 по content-box = 48 */
.cc-vs__circle {
  position: absolute;
  left: 120px;
  top: 258px;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--cc-bg);
  border: 1px solid var(--cc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  color: var(--cc-green);
  z-index: 5;
}

/* сенсорная карточка: width 100% по content-box (372 при 390, x = 9) */
.cc-sense {
  margin-top: 16px;
  width: 100%;
  box-sizing: content-box;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 16px 10px 14px;
}
.cc-sense__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.cc-sense__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--cc-border);
  padding: 0 4px;
}
.cc-sense__item:last-child { border-right: 0; }
.cc-sense__icon { color: var(--cc-gold); }
.cc-sense__label { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.1; color: var(--cc-green); }
.cc-sense__rule { height: 1px; background: var(--cc-border); margin: 14px 8px 12px; }
.cc-sense__tag { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-align: center; line-height: normal; color: var(--cc-green); }

.cc-vs__cta {
  margin-top: 16px;
  width: 100%;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cc-shadow-btn);
}

/* 03 Real Layers (макет 217–251) */
#real-layers { position: relative; padding: 0 0 48px; overflow: hidden; }
.cc-rl__scene { position: relative; }
.cc-rl__fountain {
  position: absolute;
  left: 0;
  top: 186px;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 1;
  filter: var(--cc-shadow-comp-10);
}
.cc-rl__text {
  position: relative;
  z-index: 2;
  padding: 0 var(--cc-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc-rl__title { text-shadow: var(--cc-text-shadow-h2-03); }
.cc-rl__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; text-shadow: var(--cc-text-shadow-p-03); }
.cc-rl__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); }
.cc-rl__spacer { height: 540px; }
.cc-rl-proof {
  position: relative;
  z-index: 2;
  margin: 0 16px;
  display: grid;
  grid-template-columns: 1.05fr .8fr 1.05fr 1.1fr;
  padding: 10px 0;
}
.cc-rl-proof__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid var(--cc-border);
  padding: 0 3px;
}
.cc-rl-proof__item:last-child { border-right: 0; }
.cc-rl-proof__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cc-green);
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-rl-proof__label { font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--cc-green); white-space: nowrap; }
/* Утверждённое отклонение (ТЗ №2 §5.5): < 400 px подписи 11 px, line-height фиксирован 13.2px */
@media (max-width: 399.98px) {
  .cc-rl-proof__label { font-size: 11px; line-height: 13.2px; }
}
/* §5.5: ≤ 380 px — gap 4, поля 2, кружки 28 (svg 15). min-height 30 держит высоту ряда как в карте 360 (кружок 30 → ряд 50), см. §8.1 */
@media (max-width: 380.98px) {
  /* Инженер, 06.09 (решение по проблеме ТЗ-02 §5.5): поля 0 3, кружки 24 — сумма min-content 325 ≤ 328 при 360 */
  .cc-rl-proof__item { gap: 4px; padding: 0 3px; min-height: 30px; }
  .cc-rl-proof__icon { width: 24px; height: 24px; }
}
/* §5.5: ≤ 345 px — два ряда по два пункта */
@media (max-width: 345.98px) {
  .cc-rl-proof { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .cc-rl-proof__item:nth-child(2) { border-right: 0; }
}
.cc-rl__divider { position: relative; z-index: 2; display: flex; justify-content: center; margin: 6px 0 0; color: var(--cc-gold); }
.cc-rl__cta-wrap { position: relative; z-index: 2; padding: 16px var(--cc-pad) 0; }
.cc-rl__cta {
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cc-shadow-btn);
}

/* 04 Why You Can Have Cake (макет 254–297) */
#why-you-can { position: relative; padding: 0 0 48px; overflow: hidden; }
.cc-wyc__head { padding: 0 var(--cc-pad); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cc-wyc__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-wyc__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); }
.cc-wyc__grid {
  position: relative;
  z-index: 2;
  margin: 16px var(--cc-pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.cc-wyc__card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cc-wyc__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cc-green);
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-wyc__h3 { font-family: var(--cc-font-serif); font-weight: 600; font-size: 20px; color: var(--cc-green); margin: 10px 0 0; line-height: 1.15; }
.cc-wyc__sep { display: flex; align-items: center; width: 44px; margin: 8px 0 0; }
.cc-wyc__sep-line { flex: 1; height: 1px; background: var(--cc-gold); }
.cc-wyc__sep-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cc-gold); margin: 0 4px; }
.cc-wyc__p { font-size: 16px; line-height: 1.45; color: var(--cc-body); margin: 8px 0 0; }
.cc-wyc__comp { position: relative; z-index: 3; margin-top: 4px; pointer-events: none; }
.cc-wyc__pic { display: block; width: 100%; height: auto; filter: var(--cc-shadow-comp); }
.cc-wyc__ctas {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  padding: 0 var(--cc-pad);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-wyc__btn {
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
.cc-wyc__btn--primary {
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  box-shadow: var(--cc-shadow-btn);
}
/* контурная кнопка: height 52 + рамка 1.5 по content-box = 54, как в макете; Bodoni 19/400 без letter-spacing */
.cc-wyc__btn--outline {
  box-sizing: content-box;
  border: 1.5px solid var(--cc-green);
  background: var(--cc-surface-90);
  color: var(--cc-green);
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: 19px;
}

/* Как в макете: у кнопок цвет при hover не меняется (инлайн-цвет макета перебивает глобальный a:hover) */
@media (hover: hover) {
  .cc-vs__cta:hover, .cc-rl__cta:hover, .cc-wyc__btn--primary:hover { color: var(--cc-white); }
  .cc-wyc__btn--outline:hover { color: var(--cc-green); }
}

/* < 375 px (макет 77–79, section > p и section > div > p): подзаголовок 02 16 → 17, подзаголовок 04 18 → 17; 03 под правило не попадает */
@media (max-width: 374.98px) {
  .cc-vs__sub, .cc-wyc__sub { font-size: 17px; }
}

/* Десктоп ≥ 900 (макет 48–59) */
@media (min-width: 900px) {
  /* 02: две колонки, текст слева, VS-карточка справа 430; в макете все прямые дети — border-box */
  #why-ours {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    column-gap: 48px;
    align-items: center;
    justify-items: start;
    text-align: left;
    max-width: 900px;
  }
  #why-ours > * { grid-column: 1; width: 100%; box-sizing: border-box; }
  #why-ours > .cc-vs__title { margin-top: 6px; }
  #why-ours > .cc-vs { grid-column: 2; grid-row: 1 / 6; align-self: center; margin-top: 0; width: 430px; }
  #why-ours > .cc-vs__cta { max-width: 100%; }
  /* 03: композиция с абсолютными координатами — ширина колонки 430, по центру */
  #real-layers { max-width: var(--cc-col-max); }
  /* 04 */
  .cc-wyc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-wyc__comp { max-width: 520px; margin-left: auto; margin-right: auto; }
  .cc-wyc__ctas { flex-direction: row; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
  .cc-wyc__btn { flex: 1; }
}

/* ---------- ТЗ №3 — экраны 05, 05B, 06, 06B ---------- */
/* Числа — из инлайн-стилей макета (строки 300–320, 420–502, десктоп 48, 55–59). Цвета/тени/радиусы — только токены.
   В макете нет глобального border-box: <button> там border-box по UA (карточка вкуса 169, круглая стрелка 44 — как в картах),
   а контурная <a> — content-box (52 + 1.5×2 = 54): box-sizing задан явно только там, где это меняет размер.
   Там, где макет наследует line-height: normal (кнопки, «That became:», подписи CREAM…, «n / 16», вкус в отзыве),
   он задан явно — у нас body line-height 1.4. */

/* 05 Explore 8 Flavours (макет 300–320) */
#flavours {
  position: relative;
  padding: 0 var(--cc-pad) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cc-fl__title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.05;
  color: var(--cc-green);
  margin: 8px 0 0;
}
.cc-fl__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-fl__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-fl__grid {
  margin-top: 20px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* карточка вкуса — <button>: рамка/фон/тень как в макете, min-height = tap 44 */
.cc-flavour {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--cc-green);
  box-shadow: var(--cc-shadow-card);
  min-height: var(--cc-tap);
}
.cc-flavour__pic {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* банка: высота 150, ширина по пропорции файла (атрибуты width/height = реальные px webp) */
.cc-flavour__jar { height: 150px; width: auto; max-width: 100%; filter: var(--cc-shadow-jar); }
.cc-flavour__name { font-family: var(--cc-font-serif); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--cc-green); }
.cc-flavour__rule { width: 32px; height: 1px; background: var(--cc-gold); }
.cc-flavour__taste { font-size: 13px; line-height: 1.35; color: var(--cc-body); }
.cc-fl__cta {
  margin-top: 16px;
  width: 100%;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cc-shadow-btn);
}

/* 05B Craving Moments (макет 420–437) */
#moments {
  position: relative;
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.cc-mo__head { padding: 0 var(--cc-pad); display: flex; flex-direction: column; align-items: center; }
.cc-mo__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-mo__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
/* лента: скролл-снап, без JS листается пальцем; §5.3 — вертикальный скролл страницы над лентой сохраняется */
.cc-mo__strip {
  margin-top: 20px;
  width: 100%;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--cc-pad) 8px;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.cc-mo__img {
  flex: 0 0 auto;
  width: 280px;
  height: 350px;
  object-fit: cover;
  border-radius: var(--cc-radius);
  scroll-snap-align: center;
  box-shadow: var(--cc-shadow-card-10);
}

/* 06 Why Craving Club Exists (макет 439–470) */
#why-exists { position: relative; padding: 0 0 48px; overflow: hidden; }
.cc-we__head { padding: 0 var(--cc-pad); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cc-we__title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--cc-green);
  margin: 8px 0 0;
}
.cc-we__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-we__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-we__comp { position: relative; margin-top: 8px; pointer-events: none; }
.cc-we__pic { display: block; width: 100%; height: auto; filter: var(--cc-shadow-comp); }
.cc-we__body { padding: 0 var(--cc-pad); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cc-we__p { font-size: 18px; line-height: 1.4; color: var(--cc-ink); }
.cc-we__p--first { margin: 8px 0 0; }
.cc-we__p--second { margin: 20px 0 0; }
.cc-we__icons { margin-top: 16px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.cc-we__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  border-right: 1px solid var(--cc-border);
}
.cc-we__icon-item:last-child { border-right: 0; }
.cc-we__icon { color: var(--cc-gold); }
.cc-we__icon-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--cc-green); line-height: normal; }
.cc-we__became { margin-top: 18px; width: 100%; display: flex; align-items: center; gap: 12px; }
.cc-we__line { flex: 1; height: 1px; background: var(--cc-gold); }
.cc-we__became-text { font-size: 16px; font-weight: 500; color: var(--cc-ink); line-height: normal; }
.cc-we__yes {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--cc-green);
  margin-top: 10px;
}
.cc-we__cards { margin-top: 18px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cc-we__card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 16px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.cc-we__card-icon { color: var(--cc-gold); }
.cc-we__card-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.15; color: var(--cc-green); }
.cc-we__card-p { font-size: 14px; line-height: 1.35; color: var(--cc-body); }
.cc-we__final {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cc-green);
  margin-top: 14px;
}
.cc-we__ctas { margin-top: 16px; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.cc-we__btn {
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}
.cc-we__btn--primary {
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  box-shadow: var(--cc-shadow-btn);
}
/* контурная кнопка: height 52 + рамка 1.5 по content-box = 54, как в макете; Bodoni 19/400 */
.cc-we__btn--outline {
  box-sizing: content-box;
  border: 1.5px solid var(--cc-green);
  background: var(--cc-surface-90);
  color: var(--cc-green);
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: 19px;
}

/* 06B Reviews (макет 472–502) */
#reviews {
  position: relative;
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.cc-rv__head { padding: 0 var(--cc-pad); display: flex; flex-direction: column; align-items: center; }
.cc-rv__title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.05;
  color: var(--cc-green);
  margin: 8px 0 0;
}
.cc-rv__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-rv__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-rv__wrap { margin-top: 20px; width: 100%; position: relative; }
.cc-rv__strip {
  width: 100%;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--cc-pad) 8px;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.cc-review {
  flex: 0 0 280px;
  scroll-snap-align: center;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-sizing: border-box;
}
/* фото 278×373 внутри рамки, как в карте: в макете высоту даёт атрибут height="373" (aspect-ratio 3/4 при заданных
   width и height не действует); у нас база img{height:auto} снимает атрибут — высота задана явно */
.cc-review__img { width: 100%; height: 373px; object-fit: cover; }
.cc-review__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.cc-review__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-review__who { font-family: var(--cc-font-serif); font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--cc-green); }
.cc-review__stars { display: flex; gap: 2px; color: var(--cc-gold); flex: 0 0 auto; }
.cc-review__flavour { font-size: 12px; letter-spacing: .16em; font-weight: 600; color: var(--cc-gold); text-transform: uppercase; line-height: normal; }
.cc-review__text { font-size: 15px; line-height: 1.5; color: var(--cc-body); margin: 2px 0 0; }
.cc-rv__nav {
  margin-top: 16px;
  width: 100%;
  padding: 0 var(--cc-pad);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* круглая стрелка: 44×44 с рамкой 1.5 (border-box, как <button> в макете и в карте) */
.cc-rv__arrow {
  width: var(--cc-tap);
  height: var(--cc-tap);
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cc-green);
  background: var(--cc-surface-90);
  color: var(--cc-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-rv__count { font-size: 14px; font-weight: 600; color: var(--cc-green); letter-spacing: .06em; line-height: normal; }
/* §5.4 (решения.md п.2): строка под стрелками */
.cc-reviews__note { margin-top: 8px; padding: 0 var(--cc-pad); font-size: 12px; line-height: 1.4; color: var(--cc-muted-2); text-align: center; }

/* Как в макете: у кнопок цвет при hover не меняется (инлайн-цвет макета перебивает глобальный a:hover) */
@media (hover: hover) {
  .cc-fl__cta:hover, .cc-we__btn--primary:hover { color: var(--cc-white); }
  .cc-we__btn--outline:hover { color: var(--cc-green); }
}

/* < 375 px (макет 77–79, section > p и section > div > p): подзаголовки 05/05B/06/06B и два абзаца 06 → 17 */
@media (max-width: 374.98px) {
  .cc-fl__sub, .cc-mo__sub, .cc-we__sub, .cc-we__p, .cc-rv__sub { font-size: 17px; }
}

/* Десктоп ≥ 900 (макет 48, 55–59) */
@media (min-width: 900px) {
  /* 05: четыре колонки, кнопка 520 по центру */
  .cc-fl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-fl__cta { max-width: 520px; margin-left: auto; margin-right: auto; }
  /* 06: композиция 520, текстовый блок 640, кнопки в ряд 560 */
  .cc-we__comp { max-width: 520px; margin-left: auto; margin-right: auto; }
  .cc-we__body { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
  .cc-we__ctas { flex-direction: row; max-width: 560px; margin-left: auto; margin-right: auto; }
  .cc-we__btn { flex: 1; }
  /* 06B: ряд стрелок 520 по центру (ленты 05B/06B — внутри контейнера секции 960/1200) */
  .cc-rv__nav { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ---------- ТЗ №4 — 07 build + 07A checkout ---------- */
/* Числа — из инлайн-стилей макета (строки 504–588, десктоп 55, 59, < 375 — 77–79). Цвета/тени/радиусы — только токены.
   В макете нет глобального border-box: <button>, <input>, строка цены, картинка чекаута и карточка успеха там border-box
   (явно или по UA) — совпадает с нашей базой; карточка-список чекаута и её строки — content-box
   (352 при 390, строка min-height 72 + поля 8+8 + рамка 1 = 89, как в картах) — box-sizing задан явно.
   Там, где макет наследует line-height: normal (кнопки, «4 JARS · 139 AED», цифра степпера, подписи полей,
   ошибки, строка цены, «× n»), он задан явно — у нас body line-height 1.4. */

/* 07 Build your box (макет 505–544) */
#build {
  position: relative;
  padding: 0 var(--cc-pad) 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cc-bd__title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.05;
  color: var(--cc-green);
  margin: 8px 0 0;
}
.cc-bd__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-bd__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-bd__price { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cc-bd__price-each { color: var(--cc-green); line-height: 1.2; }
.cc-bd__price-num { font-size: 24px; font-weight: 600; }
.cc-bd__price-unit { font-size: 17px; font-weight: 500; }
.cc-bd__price-box { font-size: 15px; font-weight: 600; letter-spacing: .16em; color: var(--cc-gold); line-height: normal; }
.cc-bd__grid {
  margin-top: 22px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* карточка конструктора: рамка 1.5 (при qty > 0 — зелёная, transition 160 ms); базовые transition .cc-card сохранены */
.cc-build {
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  padding: 12px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--cc-green);
  box-shadow: var(--cc-shadow-card);
  transition: transform var(--cc-dur-card) var(--cc-ease), box-shadow 200ms, border-color var(--cc-dur-card);
}
.cc-build--selected { border-color: var(--cc-green); }
/* банка + название — одна кнопка (открыть PD, ТЗ №5) */
.cc-build__open {
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--cc-green);
}
.cc-build__open:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: 2px; }
.cc-build__pic { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; }
.cc-build__jar { height: 130px; width: auto; max-width: 100%; filter: var(--cc-shadow-jar); }
.cc-build__name { font-family: var(--cc-font-serif); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--cc-green); }
.cc-build__protein { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--cc-body); }
/* степпер: 44 + 44 + 44 + рамка 1 = 134×46, прижат к низу карточки (карточки ряда на одном уровне) */
.cc-build__qty {
  display: flex;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  background: var(--cc-white);
  margin-top: auto;
}
.cc-build__dec, .cc-build__inc {
  width: var(--cc-tap);
  height: var(--cc-tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-green);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-build__dec:disabled, .cc-build__inc:disabled { opacity: .4; }
/* кольцо фокуса внутрь кнопки — степпер с overflow: hidden обрезал бы его снаружи */
.cc-build__dec:focus-visible, .cc-build__inc:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: -3px; }
.cc-build__num {
  width: var(--cc-tap);
  height: var(--cc-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  background: var(--cc-white);
  color: var(--cc-green);
  transition: background var(--cc-dur-card);
}
.cc-build__num--on { background: var(--cc-green); color: var(--cc-white); }
.cc-bd__full { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--cc-ink); margin: 14px 0 0; }
/* Continue: opacity .4 + disabled при total < 4; transition opacity 250 ms (макет 540) поверх базовых .cc-btn */
.cc-build__continue {
  margin-top: 20px;
  width: 100%;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  border: 0;
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cc-shadow-btn);
  transition: transform var(--cc-dur-tap) var(--cc-ease), background 200ms, opacity 250ms;
}
.cc-build__continue:disabled { opacity: .4; }

/* 07A Inline checkout (макет 547–586); [hidden] базы прячет, .cc-anim-checkout даёт fade-in 320 ms при показе */
.cc-checkout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
}
.cc-checkout__title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  color: var(--cc-green);
  margin: 20px 0 0;
}
.cc-checkout__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 10px 0 0; }
.cc-checkout__img { width: 100%; height: auto; margin: 16px 0 12px; border-radius: var(--cc-radius); }
/* карточка-список: width 100% по content-box (352 при 390, 522 при 520 на десктопе), как в макете */
.cc-checkout__list {
  width: 100%;
  box-sizing: content-box;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;
  margin-top: 4px;
}
.cc-checkout__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  min-height: 72px;
  box-sizing: content-box;
  border-top: 1px solid var(--cc-border);
  text-align: left;
}
.cc-checkout__row:first-child { border-top-color: transparent; }
.cc-checkout__jar { flex: 0 0 auto; height: 56px; width: auto; }
.cc-checkout__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-checkout__name { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--cc-green); }
.cc-checkout__protein { font-size: 14px; line-height: 1.3; color: var(--cc-body); }
.cc-checkout__qty { flex: 0 0 auto; font-size: 20px; font-weight: 600; line-height: normal; color: var(--cc-green); }
/* контурная кнопка Edit Flavours: <button> — 52 по border-box, рамка 1.5 внутри (в карте 350×52, ТЗ §5.6) */
.cc-checkout__edit {
  margin-top: 12px;
  width: 100%;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  border: 1.5px solid var(--cc-green);
  background: var(--cc-surface-90);
  color: var(--cc-green);
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-checkout__price {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
}
.cc-checkout__each { font-size: 18px; font-weight: 600; line-height: normal; color: var(--cc-green); }
.cc-checkout__total { font-size: 20px; font-weight: 600; line-height: normal; color: var(--cc-green); }
.cc-checkout__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  text-align: left;
}
.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field__label { font-size: 14px; font-weight: 600; line-height: normal; color: var(--cc-green); }
/* поле: 52, кегль 16 (без iOS-zoom), рамка 1.5 (ошибка → gold через aria-invalid), своё кольцо фокуса вместо outline: none */
.cc-field__input {
  width: 100%;
  height: var(--cc-btn-h);
  margin: 0;
  border-radius: var(--cc-radius);
  border: 1.5px solid var(--cc-border);
  background: var(--cc-white);
  padding: 0 16px;
  font-family: var(--cc-font-sans);
  font-size: 16px;
  color: var(--cc-ink);
  outline: none;
}
.cc-field__input::placeholder { color: var(--cc-muted-2); opacity: 1; }
.cc-field__input:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: 2px; }
.cc-field__input[aria-invalid="true"] { border-color: var(--cc-gold); }
.cc-field__error { font-size: 14px; font-weight: 500; line-height: normal; color: var(--cc-ink); }
.cc-checkout__submit {
  margin-top: 6px;
  width: 100%;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  border: 0;
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cc-shadow-btn);
}
.cc-checkout__submit:disabled { opacity: .6; }
.cc-checkout__fail { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--cc-ink); text-align: center; }
/* успех: карточка вместо списка/кнопки/цены/формы (макет 580–584) */
.cc-checkout__done {
  width: 100%;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  padding: 28px 20px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cc-checkout__check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cc-green);
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-checkout__done-title {
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--cc-green);
  margin: 6px 0 0;
}
.cc-checkout__done-text { font-size: 16px; line-height: 1.45; color: var(--cc-body); }

/* < 375 px (макет 77–79, section > p и section > div > p): «Choose exactly…» 18 → 17,
   «Your box already has 4 jars» 14 → 17, «Four jars…» 18 → 17 — как в картах 360.
   .cc-bd__hint убран из списка — элемента больше нет (Правка 12.09 §2) */
@media (max-width: 374.98px) {
  .cc-bd__sub, .cc-bd__full, .cc-checkout__sub { font-size: 17px; }
}

/* Десктоп ≥ 900 (макет 55, 59): карточки 4 в ряд (221 при 960, 281 при 1200); Continue и чекаут 520 по центру */
@media (min-width: 900px) {
  .cc-bd__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-build__continue, .cc-checkout { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* Инженер, 06.09 (решение по проблеме ТЗ-04 §5.1): ≤ 343 px карточки конструктора в одну колонку —
   степпер 132 + поля не помещается в две колонки при ширине контента < 300 (в макете правила нет) */
@media (max-width: 343.98px) {
  .cc-bd__grid { grid-template-columns: 1fr; }
}

/* ---------- ТЗ №5 — 05A product detail ---------- */
/* Числа — из инлайн-стилей макета (строки 322–418, десктоп 63–64). Цвета/тени/радиусы/шрифты — только токены.
   Корень #pd — fixed-оверлей со скримом; колонка .cc-pd__col — единственный скролл-контейнер (100dvh; фолбэк —
   только в @supports not). Колонка НЕ positioned (как в макете): оверлей-подложка absolute ложится на всю
   фиксированную область, а не на колонку. overflow-x: hidden у колонки — в макете его нет, и колонку можно было
   сдвинуть пальцем вбок из-за картинки 125 %. Картинка вкуса: инлайн-геометрия утверждена (125 %, −200/68/−49), не менять;
   overflow-x: clip у блока hero (одна ось, без скролл-контейнера) — чтобы выступающая вбок картинка не попадала
   в scrollWidth колонки (§7.3); визуально ничего не меняет — колонка и так режет по своим краям.
   В макете нет глобального border-box: степпер 52 + рамка = 54 по content-box — box-sizing задан явно.
   Там, где макет наследует line-height: normal (Previous/Next, «n / 8», заголовки-«линии», таблица, аккордеоны,
   степпер, кнопка), он задан явно — у нас body line-height 1.4. Disabled-состояния кнопок PD в макете не оформлены
   (цвет инлайн) — оставлены как в макете. */
.cc-pd {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  background: var(--cc-scrim-pd);
}
.cc-pd__col {
  width: 100%;
  max-width: var(--cc-col-max);
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--cc-bg) url('../img/bg_drapery.webp') center top / cover no-repeat;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@supports not (height: 100dvh) { .cc-pd__col { height: 100vh; } }
.cc-pd__overlay { position: absolute; inset: 0; background: var(--cc-overlay-page); pointer-events: none; }

/* шапка оверлея (макет 328–331): sticky 50, Back 44 · лого 38 · Close 44 */
.cc-pd__header {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--cc-header-h);
  background: var(--cc-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.cc-pd__iconbtn {
  width: var(--cc-tap);
  height: var(--cc-tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cc-radius-sm);
}
.cc-pd__badge {
  height: 38px;
  width: auto;
  background: var(--cc-bg);
  border-radius: var(--cc-radius-xs);
  padding: 2px;
  box-sizing: border-box;
}

/* ряд Previous / n / 8 / Next (макет 333–337) */
.cc-pd__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 0;
}
.cc-pd__navbtn {
  height: var(--cc-tap);
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--cc-green);
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-pd__pos { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--cc-gold); line-height: normal; }

/* hero: текст + картинка вкуса (макет 339–353); на блоке — свайп */
.cc-pd__hero { position: relative; padding: 8px 0 0; overflow-x: clip; }
.cc-pd__text { text-align: left; padding: 8px var(--cc-pad) 0; min-height: 118px; }
.cc-pd__title {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cc-green);
  margin: 8px 0 0;
  max-width: 257px;
}
.cc-pd__sep { display: flex; align-items: center; width: 120px; margin: 12px 0 0; }
.cc-pd__sep-line { flex: 1; height: 1px; background: var(--cc-gold); }
.cc-pd__sep-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cc-gold); margin: 0 6px; }
.cc-pd__taste { font-size: 15px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; max-width: 210px; }
/* «инлайн-геометрия утверждена, одинакова у всех 8, не исправлять»; max-width: none — база img{max-width:100%} зажала бы 125 % */
.cc-pd__img {
  display: block;
  width: 125%;
  max-width: none;
  height: auto;
  margin-top: -200px;
  position: relative;
  top: 68px;
  left: -49px;
  z-index: 1;
  pointer-events: none;
}

/* тело (макет 355–416): в макете «padding:12px 20px 0; padding-top:65px» */
.cc-pd__body { position: relative; padding: 65px var(--cc-pad) 0; }
.cc-pd__h { display: flex; align-items: center; gap: 12px; }
.cc-pd__h--nutrition { margin-top: 22px; }
.cc-pd__h-line { flex: 1; height: 1px; background: var(--cc-gold); }
.cc-pd__h-text { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--cc-green); line-height: normal; }
.cc-pd__inside { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
/* border-right у всех четырёх плиток — как в макете (строка 360), включая последнюю */
.cc-pd__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  border-right: 1px solid var(--cc-border);
}
/* max-width: none — с базовым img{max-width:100%} плитка не участвует в min-content колонки, и при 360 сетка 1fr×4 делится иначе, чем в макете (карта 360: колонки 87.3/87.3/73/87.3) */
.cc-pd__tile-img { width: 64px; max-width: none; height: 64px; object-fit: contain; }
.cc-pd__tile-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .04em;
  text-align: center;
  color: var(--cc-green);
  text-transform: uppercase;
}
.cc-pd__table {
  margin-top: 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  overflow: hidden;
}
.cc-pd__thead {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cc-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--cc-green);
  line-height: normal;
}
.cc-pd__th { text-align: center; }
/* последняя строка тоже с border-bottom — как в макете */
.cc-pd__tr {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cc-border-soft);
  font-size: 15px;
  color: var(--cc-ink);
  line-height: normal;
}
.cc-pd__td-label { font-weight: 600; }
.cc-pd__td { text-align: center; }
.cc-pd__accs { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cc-pd__acc {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  overflow: hidden;
}
.cc-pd__acc-btn {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  text-align: left;
  color: var(--cc-green);
}
.cc-pd__acc-title { font-size: 14px; font-weight: 700; letter-spacing: .08em; line-height: normal; }
.cc-pd__acc-p { margin: 0; padding: 0 16px 16px; font-size: 15px; line-height: 1.5; color: var(--cc-body); }
.cc-pd__full { margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: var(--cc-muted-2); text-align: center; }
.cc-pd__row {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 32px;
}
/* степпер: height 52 + рамка 1 по content-box = 150×54, как в карте */
.cc-pd__qty {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  height: 52px;
  box-sizing: content-box;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-surface);
  overflow: hidden;
}
.cc-pd__dec, .cc-pd__inc {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-green);
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-pd__num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: normal;
  color: var(--cc-green);
  border-left: 1px solid var(--cc-border);
  border-right: 1px solid var(--cc-border);
}
.cc-pd__add {
  height: var(--cc-btn-h);
  border: 0;
  border-radius: var(--cc-radius);
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--cc-shadow-btn);
}
/* кольца фокуса (README §6); у степпера — внутрь, overflow: hidden обрезал бы снаружи */
.cc-pd__iconbtn:focus-visible, .cc-pd__navbtn:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: 2px; }
.cc-pd__acc-btn:focus-visible, .cc-pd__dec:focus-visible, .cc-pd__inc:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: -3px; }

/* Десктоп ≥ 900 (макет 63–64): модалка 720 по центру, высота 100 % − 48, radius 16, скрим .6 */
@media (min-width: 900px) {
  .cc-pd { background: var(--cc-scrim-pd-desktop); }
  .cc-pd__col {
    max-width: 720px;
    height: calc(100% - 48px);
    margin: 24px 0;
    border-radius: var(--cc-radius-lg);
  }
}

/* Инженер, 06.09 (решение по проблеме ТЗ-05 §5): ≤ 354 px плитки WHAT’S INSIDE в два ряда по две —
   четыре колонки с подписями вроде CHOCOLATE не помещаются в колонку уже 355 (в макете правила нет) */
@media (max-width: 354.98px) {
  .cc-pd__inside { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .cc-pd__inside > :nth-child(2n) { border-right: 0; }
}

/* ---------- ТЗ №6 — экраны 08, 09 ---------- */
/* Числа — из инлайн-стилей макета (строки 605–637, 639–699; десктоп 48, 56, 60–62; < 375 — 77–79). Цвета/тени/радиусы/шрифты — только токены.
   В макете нет глобального border-box: поле-заглушка мини-макета формы (30 + рамка 1×2 = 32) и бейдж галочки (36 + рамка 2×2 = 40)
   считаются по content-box — box-sizing задан явно. Мини-макет формы и шаги — по ширине колонки сетки (150 при 390), совпадают с картами и так.
   Там, где макет наследует line-height: normal (цифра шага, строки мини-макета формы), он задан явно — у нас body line-height 1.4.
   Галочка бейджа и шевроны FAQ — stroke="currentColor", цвет задан токеном на родителе (в макете hex прямо в svg).
   FAQ — нативный <details>/<summary>, без JS; кольцо фокуса summary — своё (в макете UA-кольцо не видно на кремовом). */

/* 08 How It Works (макет 606–637) */
#how-it-works {
  position: relative;
  padding: 0 var(--cc-pad) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cc-hiw__sub { font-size: 18px; line-height: 1.4; color: var(--cc-body); margin: 12px 0 0; }
.cc-hiw__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-hiw__steps { margin-top: 20px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cc-hiw__step {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 16px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}
.cc-hiw__step--1 { grid-template-columns: minmax(0, 1fr) 160px; }
.cc-hiw__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.cc-hiw__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cc-green);
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: normal;
}
.cc-hiw__h3 { font-family: var(--cc-font-serif); font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--cc-green); margin: 10px 0 0; }
.cc-hiw__p { font-size: 15px; line-height: 1.4; color: var(--cc-body); margin: 8px 0 0; }
.cc-hiw__jars { display: block; width: 100%; max-width: 160px; height: auto; justify-self: end; filter: var(--cc-shadow-comp); }
/* мини-макет формы (шаг 2): 150×168 в карте — ширина по колонке сетки, высота по содержимому */
.cc-hiw__form {
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.cc-hiw__form-title { font-family: var(--cc-font-serif); font-weight: 600; font-size: 14px; line-height: normal; color: var(--cc-green); text-align: center; }
.cc-hiw__form-label { font-size: 11px; font-weight: 600; line-height: normal; color: var(--cc-ink); }
/* поле-заглушка: height 30 + рамка 1 по content-box = 32, как в карте */
.cc-hiw__form-field {
  height: 30px;
  box-sizing: content-box;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  line-height: normal;
  color: var(--cc-muted-2);
}
.cc-hiw__box { position: relative; width: 170px; justify-self: end; }
.cc-hiw__box-img { display: block; width: 170px; height: auto; filter: var(--cc-shadow-jar); }
/* бейдж галочки: 36 + рамка 2 по content-box = 40, как в карте; галочка наследует --cc-white через currentColor */
.cc-hiw__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36px;
  height: 36px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--cc-green);
  border: 2px solid var(--cc-surface);
  color: var(--cc-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 09 FAQ (макет 640–699) */
#faq { position: relative; padding: 0 0 32px; overflow: hidden; }
.cc-faq__head { padding: 0 var(--cc-pad); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cc-faq__rule { display: block; margin: 14px 0 0; color: var(--cc-gold); max-width: 100%; }
.cc-faq__list { margin: 12px var(--cc-pad) 0; display: flex; flex-direction: column; }
.cc-faq__item { border-bottom: 1px solid var(--cc-border); }
/* summary — сетка 52 / вопрос / 24; маркер раскрытия убран (list-style и WebKit-псевдоэлемент) */
.cc-faq__q {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  min-height: 48px;
  text-align: left;
}
.cc-faq__q::-webkit-details-marker { display: none; }
.cc-faq__q:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: 2px; }
.cc-faq__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.cc-faq__icon-img { width: 52px; height: 52px; display: block; }
.cc-faq__question { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--cc-green); }
.cc-faq__chevron { color: var(--cc-gold); }
.cc-faq__a { font-size: 16px; line-height: 1.45; color: var(--cc-body); margin: 0 0 16px 64px; text-align: left; }
.cc-faq__comp { position: relative; z-index: 3; margin: 20px 0 0; pointer-events: none; }
.cc-faq__pic { display: block; width: 100%; height: auto; filter: var(--cc-shadow-jar); }

/* < 375 px (макет 77–79, section > p): подзаголовок 08 18 → 17 — как в карте 360; абзацы шагов и ответы FAQ под правило не попадают */
@media (max-width: 374.98px) {
  .cc-hiw__sub { font-size: 17px; }
}

/* Десктоп ≥ 900 (макет 48, 56, 60–62) */
@media (min-width: 900px) {
  /* 08: три шага в ряд одной высоты; внутри шага одна колонка, текст и визуал по центру, визуал на 8 ниже */
  .cc-hiw__steps { flex-direction: row; align-items: stretch; }
  .cc-hiw__step { flex: 1; grid-template-columns: 1fr; align-content: start; justify-items: center; }
  .cc-hiw__step > :last-child { justify-self: center; margin-top: 8px; }
  /* 09: список 640 по центру (верхний отступ 12 сохраняется), композиция 520 по центру */
  .cc-faq__list { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
  .cc-faq__comp { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* ════════════════════════════════════════════════════════════
   ПРАВКИ ЖЕНИ 12.09.2026
   1) промо-полоса с оффером 27%; 2) новый порядок hero:
   заголовок → подзаголовок → фото → характеристики → цена → кнопки;
   3) цена в одну строку; 4) убрана линейка под подзаголовком;
   5) убраны золотые надписи CRAVING CLUB во всех блоках;
   6) заголовки секций приведены к одному стилю (как H1, но мельче).
   Блок в конце файла намеренно: перебивает базовые правила по порядку источника.
   ════════════════════════════════════════════════════════════ */

/* ---------- 1. Промо-полоса (над шапкой) ---------- */
.cc-promo {
  background: var(--cc-green);
  color: var(--cc-white);
  padding: 9px var(--cc-pad);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cc-promo__sep { opacity: .45; margin: 0 7px; }
.cc-promo__old { text-decoration: line-through; opacity: .6; }
.cc-promo__now { color: var(--cc-gold); font-weight: 700; }

/* ---------- 2. Hero: порядок блоков ----------
   Мобильный: одна колонка, порядок задаётся order (обёртка .cc-hero__col
   прозрачна — display:contents). Десктоп: обёртка становится левой колонкой,
   фото — правой; так левая колонка не растягивается по высоте фото. */
#hero { display: flex; flex-direction: column; }
.cc-hero__col { display: contents; }
.cc-hero__text { order: 1; }
.cc-hero__img  { order: 2; margin-top: 10px; }
.cc-hero__meta { order: 3; }
.cc-hero__btns { order: 4; }

/* фото задаётся высотой (правка Жени: 340), ширина по пропорции */
.cc-hero__pic { width: 100%; height: 470px; object-fit: cover; object-position: center; }

.cc-hero__meta {
  margin-top: 12px;
  padding: 0 var(--cc-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cc-hero__meta .cc-proof { margin-top: 0; }

/* ---------- 3. Цена (правка Жени 12.09, 2-й заход) ----------
   Сверху крупно цена за банку — по ней человек оценивает продукт;
   снизу мельче: 4 банки, старая цена, итог и скидка. */
.cc-hero__price {
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cc-hero__price-each {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--cc-ink);
  letter-spacing: .01em;
}
.cc-hero__price-num { font-size: 30px; font-weight: 600; }
.cc-hero__price-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cc-body);
}
.cc-hero__price-old { text-decoration: line-through; opacity: .7; }
.cc-hero__price-now { font-weight: 700; color: var(--cc-ink); }
.cc-hero__price-off {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--cc-green);
  background: var(--cc-gold);
  border-radius: var(--cc-radius-sm);
  padding: 3px 8px;
}
.cc-hero__btns { margin-top: 16px; }

/* ---------- 6. Единый стиль заголовков секций ----------
   Как главный заголовок (Anton, uppercase), но мельче — 36 против 46,
   чтобы H1 оставался главным. Anton одновесный: «легче» достигается кеглем. */
.cc-display,
.cc-vs__title,
.cc-fl__title,
.cc-we__title,
.cc-rv__title,
.cc-bd__title {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cc-green);
  margin: 0;
  transform: none;
}

/* ---------- Десктоп ≥900 ---------- */
@media (min-width: 900px) {
  #hero { display: grid; flex-direction: row; }
  .cc-hero__col {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .cc-hero__text,
  .cc-hero__meta,
  .cc-hero__btns { order: 0; }
  .cc-hero__img { grid-column: 2; grid-row: 1; order: 0; margin-top: 0; align-self: center; }
  .cc-hero__pic { width: 100%; height: auto; margin-inline: 0; }
  .cc-hero__meta {
    align-items: flex-start;
    padding: 0;
    margin-top: 22px;
  }
  .cc-hero__price { align-items: flex-start; }
  .cc-hero__price-box { justify-content: flex-start; }
  .cc-hero__btns { margin-top: 22px; }
  .cc-display,
  .cc-vs__title,
  .cc-fl__title,
  .cc-we__title,
  .cc-rv__title,
  .cc-bd__title { font-size: 44px; }
}

/* ---------- Узкие телефоны ---------- */
@media (max-width: 374.98px) {
  .cc-hero__pic { height: 430px; }
  .cc-hero__price { gap: 7px; }
  .cc-promo { letter-spacing: .02em; }
  .cc-display,
  .cc-vs__title,
  .cc-fl__title,
  .cc-we__title,
  .cc-rv__title,
  .cc-bd__title { font-size: 32px; }
}

/* ---------- Правки Жени 12.09, 3-й заход ---------- */

/* Подзаголовок крупнее и читабельнее: было 18/1.4, стало 20/1.45 */
.cc-hero__sub {
  font-size: 20px;
  line-height: 1.45;
  margin-top: 14px;
  color: var(--cc-ink);
}

/* Липкая кнопка заказа — появляется, когда кнопки первого экрана уехали вверх,
   и прячется на самом блоке заказа. Только мобильный: 75% трафика — встроенные
   браузеры TikTok/Instagram, видимая зона ~640 px, кнопка hero туда не попадает. */
.cc-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px var(--cc-pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--cc-bg-96);
  box-shadow: 0 -8px 24px var(--cc-green-08);
  transform: translateY(120%);
  transition: transform var(--cc-dur, .24s) ease;
  pointer-events: none;
}
.cc-sticky.is-on { transform: none; pointer-events: auto; }
.cc-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  background: var(--cc-green-button);
  color: var(--cc-white);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  box-shadow: var(--cc-shadow-btn);
}
.cc-sticky__price { font-weight: 500; opacity: .85; }
@media (min-width: 900px) { .cc-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .cc-sticky { transition: none; } }

/* Кадрирование фото: сдвинуто вверх по кадру, чтобы коробка не срезалась,
   а подрезался низ композиции (правка Жени 12.09) */
.cc-hero__pic { object-position: center 20%; }

@media (min-width: 900px) {
  .cc-hero__sub { font-size: 22px; }
}
@media (max-width: 374.98px) {
  .cc-hero__sub { font-size: 18px; }
}

/* ---------- Правки Жени 12.09, 4-й заход ---------- */

/* Кегль заголовков секций: подобран так, чтобы самая длинная строка
   («SKIP THE USUAL TRADE-OFF» = 361 px при 36) влезала в одну строку
   на любой ширине телефона: нужно (ширина экрана − 40) / 10.03. */
.cc-display,
.cc-vs__title,
.cc-fl__title,
.cc-we__title,
.cc-rv__title,
.cc-bd__title,
.cc-we__yes {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: min(34px, 8.7vw);
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cc-green);
  transform: none;
}
.cc-we__yes { margin-top: 12px; }

/* Финальная фраза блока 06 длиннее — свой кегль, чтобы осталось 2 строки */
.cc-we__final {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: min(28px, 7.2vw);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cc-green);
}

/* Заголовки чекаута — тем же шрифтом */
.cc-checkout__title {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: min(30px, 7.7vw);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.cc-checkout__done-title {
  font-family: var(--cc-font-display);
  font-weight: 400;
  font-size: min(26px, 6.7vw);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Фото первого экрана: подтянуто под подзаголовок (отступ фона убран),
   кадр выше — низ композиции почти не режется (правка Жени 12.09) */
.cc-hero__img { margin-top: -16px; }
/* кадр 4:5 — обрезаются только прозрачные поля файла, товар цел на любой ширине */
.cc-hero__pic { height: auto; aspect-ratio: 4 / 5; object-position: center 25%; }
.cc-hero__meta { margin-top: 4px; }

@media (min-width: 900px) {
  .cc-display,
  .cc-vs__title,
  .cc-fl__title,
  .cc-we__title,
  .cc-rv__title,
  .cc-bd__title,
  .cc-we__yes { font-size: 38px; }
  /* самый длинный заголовок в узкой колонке 382 px — свой кегль, чтобы остались 2 строки */
  .cc-vs__title { font-size: 36px; }
  .cc-we__final { font-size: 32px; }
  .cc-checkout__title { font-size: 34px; }
  .cc-checkout__done-title { font-size: 28px; }
  .cc-hero__img { margin-top: 0; }
  .cc-hero__pic { height: auto; aspect-ratio: auto; }
  .cc-hero__meta { margin-top: 22px; }
}

/* ---------- Скидка 27% в блоке заказа и чекауте (правка Жени 12.09) ----------
   Старая цена: 190 за коробку, 47.50 за банку. 139/190 = −26.8% ≈ 27%. */
.cc-hero__price-was,
.cc-bd__price-was,
.cc-checkout__was,
.cc-checkout__old,
.cc-bd__price-old {
  text-decoration: line-through;
  font-weight: 500;
  opacity: .6;
}
.cc-hero__price-was { font-size: 16px; }
.cc-bd__price-was { font-size: 17px; }
.cc-checkout__was { font-size: 15px; }
.cc-checkout__old { font-size: 15px; }
.cc-bd__price-old { font-weight: 600; }
.cc-bd__price-off {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-gold);
  color: var(--cc-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  vertical-align: 1px;
}
/* строка «4 JARS · 190 139 AED −27%» шире прежней — трекинг мельче, перенос разрешён */
.cc-bd__price-box { letter-spacing: .06em; }

/* ============================================================
   ПРАВКИ 12.09.2026 — раунд 2
   §1 подсказка «See details» в карточках вкусов и конструктора
   §3 цена блока заказа — типографика первого экрана
   §4 неактивная кнопка Continue + тост «минимум 4 банки»
   §5 чекаут в попапе по образцу карточки вкуса .cc-pd
   Только дописано в конец: правила выше не редактируются
   (исключение — удалённое правило .cc-bd__hint, §2 ТЗ).
   ============================================================ */

/* ---------- §1 «See details» ----------
   Настоящую кнопку внутрь карточки класть нельзя (карточка сама <button>),
   поэтому это <span>, стилизованный под ссылку; кликается вся карточка. */
.cc-flavour__more {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cc-gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cc-flavour__more-arrow { font-size: 16px; line-height: 1; }
/* на тач-устройствах подчёркивание не нужно — там нет наведения */
@media (hover: hover) {
  .cc-flavour:hover .cc-flavour__more,
  .cc-build__open:hover .cc-flavour__more { text-decoration: underline; }
}

/* ---------- §3 цена в блоке «Build your box» ----------
   Эталон — .cc-hero__price* : 30/16 сверху, 14 снизу, чип золотой.
   Строка «4 jars · …» — flex с переносом: на 360 чип уезжает на вторую
   строку вместо горизонтального скролла. */
.cc-bd__price { margin: 20px 0 16px; gap: 5px; }
.cc-bd__price-each {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--cc-green);
}
.cc-bd__price-num { font-size: 30px; font-weight: 600; }
.cc-bd__price-unit { font-size: 16px; font-weight: 500; }
.cc-bd__price-was { font-size: 16px; color: var(--cc-body); }
.cc-bd__price-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--cc-body);
}
.cc-bd__price-old { font-size: 14px; font-weight: 500; color: var(--cc-body); }
.cc-bd__price-now { font-weight: 700; color: var(--cc-green); }
.cc-bd__price-off {
  margin-left: 0;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  vertical-align: baseline;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-gold);
  color: var(--cc-green);
}
@media (min-width: 900px) { .cc-bd__price { margin: 24px 0 20px; } }

/* ---------- §4 кнопка Continue до четырёх банок ----------
   disabled убран (disabled-кнопка не получает кликов, человек тыкал впустую):
   вид тот же, но клик проходит и показывает тост. */
.cc-build__continue.is-off { opacity: .4; }

/* ---------- §4 тост ---------- */
.cc-toast {
  position: fixed;
  top: calc(var(--cc-header-h) + 12px);
  right: 16px;
  z-index: 70;
  max-width: min(300px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: var(--cc-radius);
  background: var(--cc-green);
  color: var(--cc-white);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: var(--cc-shadow-card);
}
@keyframes cc-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cc-toast.is-on { animation: cc-toast-in var(--cc-dur-fade) var(--cc-ease-out); }

/* ---------- §5 попап заказа ----------
   Визуальный язык и механика — как у карточки вкуса .cc-pd: тот же скрим,
   та же блокировка прокрутки, то же появление (.cc-anim-in).
   Раунд 3 §7: контейнер переехал в <body> рядом с .cc-pd, поэтому страховка
   от transform у .cc-section больше не нужна и удалена. */
.cc-co {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  background: var(--cc-scrim-pd);
}
.cc-co__overlay { position: absolute; inset: 0; }
.cc-co__col {
  position: relative;
  width: 100%;
  max-width: var(--cc-col-max);
  min-height: 0;
  background: var(--cc-bg);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.cc-co__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  height: var(--cc-header-h);
  background: var(--cc-bg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
}
.cc-co__close {
  width: var(--cc-tap);
  height: var(--cc-tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-green);
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-co__close:focus-visible { outline: 2px solid var(--cc-gold-focus); outline-offset: 2px; }
.cc-co__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--cc-pad) calc(24px + env(safe-area-inset-bottom));
}

/* кнопка Close на экране «We confirm your order» — контурная, как Edit Flavours */
.cc-checkout__done-close {
  margin-top: 8px;
  width: 100%;
  max-width: 280px;
  height: var(--cc-btn-h);
  border-radius: var(--cc-radius);
  border: 1.5px solid var(--cc-green);
  background: var(--cc-surface-90);
  color: var(--cc-green);
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Десктоп ≥ 900: окно по центру, как модалка .cc-pd */
@media (min-width: 900px) {
  .cc-co { align-items: center; background: var(--cc-scrim-pd-desktop); }
  .cc-co__col {
    max-width: 560px;
    max-height: 90vh;
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-toast.is-on { animation: none; }
}

/* ============================================================
   ТЗ 14.09 блок C — «Build your box»: вкусы строками
   По образцу .frow газировки: одна строка — один вкус; банка
   слева, название, белок и «See details» столбиком, степпер справа.
   Меняется только раскладка: карточка остаётся карточкой (рамка,
   фон, тень, зелёная рамка у выбранной, сжатие при нажатии),
   логика js/app.js та же. Сетка 2 и 4 колонки выше перекрыта здесь.
   ============================================================ */
.cc-bd__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-build {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  text-align: left;
}
/* банка + текст — по-прежнему одна кнопка, открывает карточку вкуса */
.cc-build__open {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.cc-build__pic { flex: none; width: 36px; height: 60px; }
.cc-build__jar { height: 60px; }
.cc-build__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.cc-build__name { font-size: 16px; }
.cc-build .cc-flavour__more { margin-top: 0; font-size: 12px; }
/* степпер: 40 + 30 + 40 + рамка 2 = 112 × 42, у правого края строки */
.cc-build__qty { flex: none; margin-top: 0; }
.cc-build__dec, .cc-build__inc { width: 40px; height: 40px; }
.cc-build__num { width: 30px; height: 40px; }

/* < 375: промежутки уже и кегль названия меньше — под текст остаётся ~140 px */
@media (max-width: 374.98px) {
  .cc-build { gap: 8px; padding-right: 8px; }
  .cc-build__open { gap: 8px; }
  .cc-build__name { font-size: 15px; }
}

/* Десктоп ≥ 900: список 520 по центру — по ширине кнопки Continue под ним */
@media (min-width: 900px) {
  .cc-bd__grid { max-width: 520px; margin-left: auto; margin-right: auto; }
  .cc-build { padding: 8px 14px 8px 12px; gap: 16px; }
  .cc-build__open { gap: 14px; }
  .cc-build__pic { height: 64px; }
  .cc-build__jar { height: 64px; }
  .cc-build__name { font-size: 17px; }
}

/* ==== ТЗ 14.09, заход 2 ====
   thanks.html и privacy / cookies / delivery.html: подвал прижат к низу экрана (§2.3);
   строка «Privacy Policy · Cookie Policy · Delivery & Returns» в подвале (§4.7);
   текст документов (§4.2). Цвета и кегли — токены сайта, новых нет. ==== */
html[data-yyt-page="thanks"] .cc-page,html[data-yyt-page="legal"] .cc-page{display:flex;flex-direction:column;min-height:100dvh}
html[data-yyt-page="thanks"] .cc-page>main,html[data-yyt-page="legal"] .cc-page>main{flex:1 0 auto}
.cc-footer__policies{margin:0;font-size:13px;line-height:1.5;color:var(--cc-white-72)}
.cc-footer__policies a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (hover:hover){.cc-footer__policies a:hover{color:var(--cc-white)}}
@media (min-width:900px){.cc-footer__policies{grid-column:1/-1;grid-row:4}}
.legal{padding:24px 0 48px}
.legal .legal__date{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--cc-body)}
.legal .cc-faq__question{margin:24px 0 0}
.legal .cc-faq__question:first-child{margin-top:8px}
.legal__list{margin:8px 0 0;padding-left:1.2em;list-style:disc;font-size:16px;line-height:1.45;color:var(--cc-body)}
.legal__list li+li{margin-top:4px}
.legal a{text-decoration:underline;text-underline-offset:3px}