/* ==========================================================================
   Arquillena v2 — структура и тексты прототипа заказчика в нашем визуале
   Подключается после style.css и sections.css
   ========================================================================== */

/* Чередование фонов секций */
.taste, .science, .live, .history, .shop, .nums { background: var(--sand); }
.care, .diff, .combo, .who, .how, .quality, .important { background: var(--cream); }
.buy { background: var(--sand); padding-top: 72px; }

/* ---------- Первый экран ---------- */
.hero__title { font-size: clamp(28px, 3vw, 46px); }
.hero__lead { font-size: 19px; }

/* Преимущества под первым экраном */
.perks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 48px;
  padding: 0;
}
.perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.perk__icon {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
}
.perk__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--brand-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.perk h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.25; }
.perk p { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ---------- Вкусы с ценой ---------- */
.pill-new {
  align-self: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.taste__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.flavor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px 16px;
  border-radius: var(--radius-img);
  background:
    radial-gradient(70% 50% at 50% 35%, rgba(255,255,255,.25) 0%, transparent 70%),
    linear-gradient(165deg, var(--g1) 0%, var(--g2) 100%);
  color: #fff;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.flavor:hover { transform: translateY(-6px); box-shadow: 0 30px 40px -28px color-mix(in srgb, var(--g2) 80%, transparent); }
.flavor__name {
  margin: 0;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 30px);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.flavor__media { display: grid; place-items: center; aspect-ratio: 1; }
.flavor__media img { width: 92%; filter: drop-shadow(0 18px 20px rgba(0,0,0,.3)); transition: transform .5s var(--ease-spring); }
.flavor:hover .flavor__media img { transform: translateY(-8px) rotate(-4deg) scale(1.04); }
.flavor__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flavor__line { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.flavor__fruit { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: #fff; object-fit: cover; }
.flavor__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.35);
}
.flavor__price { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.flavor__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--fc);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s var(--ease-out);
}
.flavor__btn:hover { transform: translateY(-2px); }

/* ---------- Эмоциональный блок ---------- */
.care__words {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}
.care__words li {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--brand-soft);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

/* ---------- Как это работает ---------- */
.science__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
}
.science__head .h2 { margin-bottom: 0; }
.science__lead { max-width: none; margin: 0; }
.science__contains { margin: 40px 0 18px; font-weight: 700; font-size: 18px; }

/* Сетка читается слева направо: I (общий, на две строки) → II и III → комплексы.
   II стоит в ряду с суставами (хрящ), III — с венами (сосуды) */
.sci-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "t1 t2 joints joints"
    "t1 t3 veins  veins";
  gap: 16px;
}
.sci {
  position: relative;
  border-radius: var(--radius-img);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.sci--joints { grid-area: joints; }
.sci--veins { grid-area: veins; }
.sci--t1 { grid-area: t1; }
.sci--t2 { grid-area: t2; }
.sci--t3 { grid-area: t3; }

/* Карточки комплексов: фото слева, текст справа */
.sci--joints, .sci--veins { display: grid; grid-template-columns: minmax(0, 1fr) 40%; min-height: 300px; }
.sci--joints .sci__photo, .sci--veins .sci__photo { order: 2; }
.sci__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.sci:hover .sci__photo img { transform: scale(1.05); }
.sci__body { padding: 26px 28px; align-self: center; }
.sci__body h3 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-deep); }
.sci__body p { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); }
.sci__body b { color: var(--ink); }

/* Карточки типов: огромная римская цифра водяным знаком */
.sci--type {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 300px;
  padding: 26px;
  background: linear-gradient(170deg, #fff 40%, var(--brand-soft) 100%);
}
.sci--t1 {
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(255,255,255,.14) 0%, transparent 60%),
    linear-gradient(165deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  color: #fff;
  box-shadow: none;
}
.sci__roman {
  position: absolute;
  top: -18px;
  right: 14px;
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 200px;
  line-height: 1;
  color: color-mix(in srgb, var(--brand) 9%, transparent);
  pointer-events: none;
  transition: transform .8s var(--ease-out);
}
.sci--t1 .sci__roman { font-size: 360px; top: -40px; color: rgba(255,255,255,.08); }
.sci--type:hover .sci__roman { transform: translateY(6px) rotate(-3deg); }
.sci__type {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  color: var(--brand);
}
.sci--t1 .sci__type { color: #fff; font-size: 64px; }
.sci__type small { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--ink); }
.sci--t1 .sci__type small { color: #fff; }
.sci__src {
  position: relative;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  font-size: 13px;
}
.sci--t1 .sci__src { background: rgba(255,255,255,.14); box-shadow: none; color: #fff; }
.sci--type p { position: relative; margin: 0; font-size: 15px; color: var(--ink-soft); }
.sci--t1 p { color: var(--brand-on-dark); font-size: 16px; }

/* ---------- Что входит в комплексы ---------- */
.diff__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cx {
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--radius-img) + 4px);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.cx__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 176px;
  padding: 28px 24px 0 28px;
  background: linear-gradient(160deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  color: #fff;
}
.cx__head > div { padding-bottom: 26px; }
.cx__kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-on-dark); }
.cx__head h3 { margin: 6px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; text-transform: uppercase; }
.cx__jars { display: flex; align-items: flex-end; }
.cx__jars img { width: clamp(90px, 9vw, 130px); margin-bottom: -10px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.35)); }
.cx__jars img + img { margin-left: -28px; }
.cx__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 22px; padding: 26px 28px 28px; }
.cx__row { display: flex; flex-direction: column; gap: 10px; }
.cx__row p { margin: 0; font-size: 17px; }
.cx__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.cx__label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cx__note { font-size: 13px; color: var(--ink-mute); }
.cx__flavors { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 700; }
.cx__flavors span { display: inline-flex; align-items: center; gap: 10px; }
.cx__flavors img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--line); }
.cx__group { display: flex; flex-direction: column; gap: 8px; }
.cx__sub { font-size: 13px; color: var(--ink-mute); }
.cx__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx__chips span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--brand-soft);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-deep);
}
.cx__chips em { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 13px; opacity: .85; }
.cx__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cx__price { font-size: 15px; color: var(--ink-mute); }
.cx__price b { font-family: var(--f-display); font-size: 22px; color: var(--ink); letter-spacing: -.02em; }

/* ---------- Живое ягодное желе ---------- */
.live { overflow: hidden; }
.live__top {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 40px;
}
.live__intro .lead { max-width: 480px; }

/* Композиция: три открытые банки на мягком ореоле, вокруг желейные кубики */
.live__stage { position: relative; height: 460px; }
.live__halo {
  position: absolute;
  left: 50%; top: 52%;
  width: 82%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--brand) 10%, var(--sand)) 62%, transparent 72%);
}
.live__jar {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 26px 26px rgba(60, 30, 40, .25));
  transition: transform .8s var(--ease-out);
}
.live__jar--c { width: 54%; left: 23%; bottom: 4%; z-index: 3; }
.live__jar--l { width: 40%; left: 2%; bottom: 22%; z-index: 2; transform: rotate(-6deg); }
.live__jar--r { width: 40%; right: 0; bottom: 24%; z-index: 1; transform: rotate(6deg); }
.live__stage:hover .live__jar--l { transform: rotate(-9deg) translate(-8px, -6px); }
.live__stage:hover .live__jar--r { transform: rotate(9deg) translate(8px, -6px); }
.live__stage:hover .live__jar--c { transform: translateY(-8px); }
.live__cube { position: absolute; z-index: 4; overflow: visible; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); animation: bob 7s ease-in-out infinite; }
.live__cube .cube__body { fill: #C8334F; fill-opacity: .9; }
.live__cube--1 { width: 54px; left: 6%; top: 6%; }
.live__cube--2 { width: 38px; right: 14%; top: 2%; animation-delay: -2.5s; }
.live__cube--3 { width: 46px; right: 4%; bottom: 8%; animation-delay: -4.5s; }

/* Пять пунктов — колонки без карточек, с крупными номерами */
.live__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.lp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 8px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.lp:first-child { border-left: 0; padding-left: 0; }
.lp:last-child { padding-right: 0; }
.lp__num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.lp h3 { margin: 6px 0 0; font-size: 18px; line-height: 1.25; }
.lp p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.lp__ticks { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.lp__ticks li { position: relative; padding-left: 14px; }
.lp__ticks li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.lp__ticks b { color: var(--ink); }
.lp__big {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--brand);
}
.lp__big small { font-size: .4em; letter-spacing: 0; }

/* ---------- Комплексный подход (без кнопок, как в прототипе) ---------- */
.combo .eq__tile { cursor: default; }

/* ---------- История бренда и миссия ---------- */
.history__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
.history__years { display: flex; align-items: baseline; gap: 14px; margin-top: 28px; }
.history__years span {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--brand);
}
.history__years p { margin: 0; font-weight: 600; color: var(--ink-soft); }
.history__text { display: grid; gap: 18px; font-size: 18px; line-height: 1.65; }
.history__text p { margin: 0; }
.history__sign { font-family: var(--f-serif); font-style: normal; font-size: 22px; color: var(--brand-deep); }

.mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px 56px;
  margin-top: 48px;
  padding: clamp(32px, 5vw, 56px);
  border-radius: calc(var(--radius-img) + 4px);
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(255,255,255,.12) 0%, transparent 60%),
    linear-gradient(160deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  color: #fff;
}
.mission__kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-on-dark); }
.mission__main { margin: 16px 0 0; font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; }
.mission__sub { margin: 16px 0 0; font-size: 17px; color: var(--brand-on-dark); max-width: 640px; }
.mission__words { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mission__words li {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mission__words li:nth-child(2) { color: var(--brand-on-dark); }
.mission__words li:nth-child(3) { opacity: .7; }

/* ---------- Для кого (без меток, как в прототипе) ---------- */
.who .who__card > h3 { margin-top: 16px; }

/* ---------- Каталог ---------- */
.prod__title { margin: 0; font-size: 16px; line-height: 1.3; }
.prod__actions { align-items: center; }
.prod__more { font-size: 14px; font-weight: 700; color: var(--fc); text-decoration: none; padding: 0 6px; }
.prod__more:hover { text-decoration: underline; }

/* ---------- Как принимать ---------- */
.how__grid { align-items: stretch; }
.rules {
  margin: 28px 0 0;
  padding: 6px 28px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.rule {
  display: grid;
  grid-template-columns: 56px 110px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}
.rule + .rule { border-top: 1px solid var(--line); }
.rule__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); }
.rule__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--brand-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rule dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.rule dd { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; }
.stick-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 16px;
  padding: 22px 28px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  color: #fff;
}
.stick-banner__eq { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: -.01em; }
.stick-banner p { flex: 1 1 220px; margin: 0; font-size: 15px; color: var(--brand-on-dark); }

/* ---------- Цифры ---------- */
.nums__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.num { display: flex; gap: 20px; align-items: flex-start; }
.num__box {
  flex: 0 0 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 40%, transparent);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.03em;
  color: var(--brand);
}
.num__box svg { width: 42px; height: 42px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.num h3 { margin: 4px 0 0; font-size: 15px; line-height: 1.35; text-transform: uppercase; letter-spacing: .02em; }
.num p { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }

/* ---------- Подтверждённое качество ---------- */
.quality__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.quality__photo { border-radius: var(--radius-img); overflow: hidden; }
.quality__photo img { width: 100%; }
.quality__list { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 12px; }
.quality__list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.quality__list .badge__icon { flex: 0 0 52px; margin: 0; }
.quality__list h3 { margin: 0; font-size: 17px; }
.quality__list p { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }

/* ---------- Важно знать ---------- */
.important { padding: 24px 0 72px; }
.notice--wide { margin-top: 0; padding: 30px 32px 30px 36px; font-size: 16px; }
.notice--wide p + p { margin-top: 10px; }
.notice__small { font-size: 14px; color: var(--ink-soft) !important; }

/* ---------- Где купить ---------- */
.buy__top { max-width: 1040px; }
.buy__top .h2 { margin: 0; }

/* ==========================================================================
   Планшет
   ========================================================================== */
@media (max-width: 1024px) {
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taste__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .science__head { grid-template-columns: minmax(0, 1fr); }
  .sci-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "t1     t1"
      "t2     t3"
      "joints joints"
      "veins  veins";
  }
  .sci--t1 { min-height: 240px; }
  .diff__grid { grid-template-columns: minmax(0, 1fr); }
  .history__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .live__top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .live__stage { height: 420px; max-width: 620px; width: 100%; margin: 0 auto; }
  .live__points { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 0 32px; }
  .lp, .lp:first-child, .lp:last-child { border-left: 0; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .lp:first-child { grid-column: 1 / -1; }
  .nums__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mission { grid-template-columns: minmax(0, 1fr); }
  .mission__words { display: flex; flex-wrap: wrap; gap: 8px 24px; }
}

/* ==========================================================================
   Мобильный
   ========================================================================== */
@media (max-width: 600px) {
  .hero__lead { font-size: 17px; }
  .perks { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 32px; }
  .perk { padding: 16px; }
  .taste__grid { gap: 10px; }
  .flavor { padding: 14px 10px 12px; border-radius: 22px; gap: 6px; }
  .flavor__name { font-size: 18px; }
  .flavor__line { font-size: 10px; }
  .flavor__fruit { width: 38px; height: 38px; border-width: 2px; }
  .flavor__buy { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .flavor__price { font-size: 17px; text-align: center; }
  .flavor__btn { justify-content: center; min-height: 40px; }
  .care__words li { font-size: 13px; padding: 8px 14px; }
  .sci-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t1" "t2" "t3" "joints" "veins"; gap: 10px; }
  .sci--joints, .sci--veins { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sci--joints .sci__photo, .sci--veins .sci__photo { order: 0; }
  .sci__photo { height: 150px; }
  .sci__body { padding: 20px; }
  .sci--type { min-height: 0; padding: 22px; }
  .sci__roman { font-size: 140px; }
  .sci--t1 .sci__roman { font-size: 200px; top: -24px; }
  .sci__type { font-size: 42px; }
  .sci--t1 .sci__type { font-size: 48px; }
  .cx__head { min-height: 150px; padding: 22px 16px 0 20px; }
  .cx__jars img { width: 72px; }
  .cx__jars img + img { margin-left: -22px; }
  .cx__body { padding: 20px; }
  .cx__chips span { font-size: 14px; }
  .live__stage { height: 280px; }
  .live__cube--1 { width: 38px; }
  .live__cube--3 { width: 34px; }
  .live__points { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .lp { padding: 18px 0; }
  .lp__num { font-size: 32px; }
  .lp__big { font-size: 40px; }
  .history__text { font-size: 16px; }
  .rules { padding: 2px 16px; }
  .rule { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; }
  .rule__icon { width: 44px; height: 44px; grid-row: span 2; }
  .rule__icon svg { width: 22px; height: 22px; }
  .rule dd { font-size: 16px; }
  .stick-banner { padding: 20px; }
  .nums__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .num__box { flex-basis: 64px; height: 64px; font-size: 24px; border-radius: 18px; }
  .notice--wide { padding: 24px 20px 24px 26px; font-size: 15px; }
  .buy { padding-top: 48px; }
}

/* ---------- Каталог: те же цветные карточки + строки прототипа ---------- */
.flavor__info { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.flavor__title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.flavor__desc { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.8); }
.flavor__more {
  align-self: center;
  margin-top: -2px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.flavor__more:hover { color: #fff; text-decoration: underline; }
@media (max-width: 600px) {
  .flavor__title { font-size: 13px; }
  .flavor__desc { font-size: 11px; }
  .flavor__more { font-size: 12px; }
}

/* ---------- Как принимать: по образцу «Наш формат» — заголовок + крупная ложка, правила колонками ---------- */
.how2 { overflow: hidden; }
.how2__top {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
}
.how2__top .h2 { margin: 0; }
.how2__stage { position: relative; height: 380px; }
/* Ложка выходит за правый край контейнера и плавно растворяется */
.how2__spoon {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(100% + 18vw);
  max-width: none;
  height: auto;
  transform: translateY(-50%) rotate(-4deg);
  transform-origin: left center;
  filter: drop-shadow(0 26px 24px rgba(120, 20, 30, .18));
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 92%), linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 55%, transparent 92%), linear-gradient(180deg, #000 78%, transparent 100%);
  mask-composite: intersect;
  transition: transform 1s var(--ease-out);
}
.how2__stage:hover .how2__spoon { transform: translateY(-52%) rotate(-6deg); }
.how2__cube--1 { width: 56px; left: -2%; top: 4%; }
.how2__cube--2 { width: 40px; left: 42%; top: -2%; animation-delay: -2.5s; }
.how2__cube--3 { width: 48px; left: 30%; bottom: 0; animation-delay: -4.5s; }

/* Правила — четыре колонки без карточек, как пункты в «Наш формат» */
.rules--cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 40px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.rules--cols .rule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 24px 8px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.rules--cols .rule + .rule { border-top: 0; }
.rules--cols .rule:first-child { border-left: 0; padding-left: 0; }
.rules--cols .rule:last-child { padding-right: 0; }
.rules--cols dd { font-size: 18px; }
.how2 .stick-banner { margin-top: 40px; justify-content: space-between; }

@media (max-width: 1024px) {
  .how2__top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .how2__stage { height: 300px; }
  .how2__spoon { width: calc(100% + 10vw); }
  .rules--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 0 32px; }
  .rules--cols .rule, .rules--cols .rule:first-child, .rules--cols .rule:last-child, .rules--cols .rule + .rule { border-left: 0; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
}
@media (max-width: 600px) {
  .how2__stage { height: 190px; }
  .how2__spoon { width: calc(100% + 24vw); }
  .how2__cube--1 { width: 36px; }
  .how2__cube--2 { width: 28px; }
  .how2__cube--3 { width: 32px; }
  .rules--cols { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .rules--cols .rule { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 18px 0; }
  .rules--cols .rule__icon { width: 44px; height: 44px; }
  .rules--cols dd { flex-basis: 100%; font-size: 16px; }
  .how2 .stick-banner { margin-top: 24px; }
}

/* Правила приёма: «Сколько / Когда / Как / Хранение» — заголовками, как пункты в «Наш формат» */
.rules--cols dt {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
  color: var(--ink);
}
.rules--cols dd { margin-top: -4px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 600px) {
  .rules--cols dt { font-size: 17px; }
  .rules--cols dd { margin-top: 0; font-size: 15px; }
}

/* ---------- Комплексный подход: карточки по центру, плитки крупнее ---------- */
.combo .combo__cols { justify-content: center; }
.combo .eq__tile { flex-basis: 152px; }
.combo .eq__name { font-size: 14px; }
.combo .eq { gap: 14px; }
.combo .combo__col { padding: 26px 28px 28px; }
.combo .combo__label { font-size: 20px; }
@media (max-width: 600px) {
  .combo .eq__tile { flex: 0 1 84px; }
  .combo .eq__name { font-size: 12px; }
  .combo .eq { gap: 6px; }
  .combo .combo__col { padding: 18px 16px; }
  .combo .combo__label { font-size: 18px; }
}

/* ---------- История бренда: заголовок на всю ширину, ниже «30 лет» и текст ---------- */
.history__head { margin-bottom: 48px; }
.history__head .h2 { margin-bottom: 0; }
.history__grid { align-items: start; }
.history__side { min-width: 0; }
/* «30»: без подложки, градиент как у карточки I типа, подпись курсивом */
.history__years { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; }
.history__years span {
  font-size: clamp(150px, 16vw, 240px);
  line-height: .82;
  background:
    radial-gradient(80% 60% at 75% 15%, rgba(255,255,255,.22) 0%, transparent 60%),
    linear-gradient(165deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.history__years p { font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 24px; color: var(--brand-deep); }
@media (max-width: 600px) {
  .history__years span { font-size: 140px; }
  .history__years p { font-size: 20px; }
}

/* Цифры: крупная типографика вместо плиток + плашка про вкус */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 4px 32px 0; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 6.4vw, 96px); line-height: .9; letter-spacing: -.04em;
  background: linear-gradient(165deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__unit { margin-top: 10px; font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 19px; color: var(--brand); }
.stat h3 { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.35; font-weight: 700; }
.stat p { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); }

.flavor-note { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border-radius: var(--radius-l); overflow: hidden;
  background: radial-gradient(70% 90% at 0% 0%, rgba(255,255,255,.10) 0%, transparent 60%), linear-gradient(150deg, var(--brand-g1) 0%, var(--brand-g2) 100%);
  color: #fff; }
.flavor-note__body { padding: 52px 56px; display: flex; flex-direction: column; gap: 36px; justify-content: center; }
.flavor-note__kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-on-dark); }
.flavor-note__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.flavor-note__item + .flavor-note__item { padding-left: 40px; border-left: 1px solid rgba(255,255,255,.18); }
.flavor-note__item h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.2; }
.flavor-note__item h3 .t-serif { display: block; margin-bottom: 4px; font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 1.35em; letter-spacing: 0; color: var(--brand-on-dark); }
.flavor-note__item p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78); }
.flavor-note__photo { position: relative; min-height: 380px; }
.flavor-note__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .flavor-note { grid-template-columns: minmax(0, 1fr); }
  .flavor-note__photo { min-height: 320px; order: -1; }
  .flavor-note__body { padding: 40px; }
}
@media (max-width: 600px) {
  .stats { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .stat, .stat:nth-child(3) { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; }
  .stat:first-child { border-top: 0; padding-top: 0; }
  .stat__num { font-size: 56px; grid-row: 1; }
  .stat__unit { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: 15px; }
  .stat h3, .stat p { grid-column: 2; }
  .stat h3 { grid-row: 1; margin: 0; padding: 0; border: 0; font-size: 15px; align-self: center; }
  .stat p { grid-row: 2; margin-top: 6px; font-size: 14px; }
  .flavor-note { margin-top: 40px; border-radius: 28px; }
  .flavor-note__photo { min-height: 260px; }
  .flavor-note__body { padding: 28px 22px 32px; gap: 24px; }
  .flavor-note__items { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flavor-note__item + .flavor-note__item { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
}

/* Качество: нумерованные строки вместо карточек с иконками */
.quality__grid { align-items: stretch; }
.quality__photo { min-height: 100%; }
.quality__photo img { height: 100%; object-fit: cover; }
.quality__content { display: flex; flex-direction: column; justify-content: center; }
.qlist { list-style: none; margin: 32px 0 36px; padding: 0; }
.qitem { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.qitem:last-child { border-bottom: 1px solid var(--line); }
.qitem__n { font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 30px; line-height: 1; color: var(--brand); }
.qitem h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.25; }
.qitem p { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); }
.quality .btn { align-self: flex-start; }

/* Важно знать: без подложки, крупный заголовок + текст */
.important { padding: 40px 0 96px; }
.important__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.important__title { margin: 0; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; color: var(--brand); }
.important__title .t-serif { color: var(--brand); font-family: var(--f-serif); font-style: normal; font-weight: 500; letter-spacing: -.01em; }
.important__title .t-bold { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.important__text p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.important__text p + p { margin-top: 14px; }
.important__text .important__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; font-weight: 600; color: var(--ink); }
.important__text .important__small { font-size: 14px; color: var(--ink-mute); }

@media (max-width: 1024px) {
  .quality__photo img { height: auto; }
  .important__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .qitem { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .qitem__n { font-size: 24px; }
  .qitem h3 { font-size: 17px; }
  .important { padding: 24px 0 64px; }
  .important__grid { padding-top: 40px; }
  .important__text p { font-size: 16px; }
}

/* Как принимать: крупные значения вместо иконок */
.rule__big { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 3.4vw, 48px); line-height: 1; letter-spacing: -.03em; white-space: nowrap;
  background: linear-gradient(165deg, var(--brand-g1) 0%, var(--brand-g2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rule__big small { font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: .5em; letter-spacing: 0; -webkit-text-fill-color: var(--brand); color: var(--brand); }
.rules--cols .rule__big { margin-bottom: 6px; }
@media (max-width: 600px) {
  .rules--cols .rule__big { flex-basis: 100%; margin-bottom: 0; font-size: 40px; }
}

/* Что входит в комплексы: спецификация без карточек */
.fx-grid { gap: 0; border-top: 2px solid var(--brand-deep); }
.fx { display: flex; flex-direction: column; gap: 28px; padding: 36px 48px 8px 0; }
.fx + .fx { padding: 36px 0 8px 48px; border-left: 1px solid var(--line); }
.fx__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fx__title { min-width: 0; }
.fx__kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.fx__word { margin: 10px 0 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 5.2vw, 76px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase;
  background: linear-gradient(165deg, var(--brand-g1) 0%, var(--brand-g2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx__jars { flex: none; display: flex; align-items: flex-end; }
.fx__jars img { width: clamp(76px, 7.4vw, 112px); filter: drop-shadow(0 12px 14px rgba(40,30,40,.22)); }
.fx__jars img + img { margin-left: -24px; }
.fx__why { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--ink); max-width: 30em; }
.fx__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.fx__flavors { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fx__flavors .fx__label { margin-right: 4px; }
.fx__flavors span:not(.fx__label) { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 22px; color: var(--brand-deep); }
.fx__flavors img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--line); }
.fx__spec { display: flex; flex-direction: column; gap: 18px; }
.fx__spec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--brand-deep); }
.fx__note { font-size: 13px; color: var(--ink-mute); }
.fx__group { display: flex; flex-direction: column; }
.fx__sub { font-size: 13px; color: var(--ink-mute); margin-bottom: 2px; }
.fx__list { list-style: none; margin: 0; padding: 0; }
.fx__list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fx__name { font-size: 17px; font-weight: 600; color: var(--ink); }
.fx__list li::after { content: ''; order: 1; flex: 1 1 auto; }
.fx__dose { order: 2; display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--brand-deep); white-space: nowrap; }
.fx__dose small { font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 16px; letter-spacing: 0; color: var(--brand); }
.fx__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.fx__price { font-size: 15px; color: var(--ink-mute); }
.fx__price b { font-family: var(--f-display); font-size: 30px; color: var(--ink); letter-spacing: -.02em; }

@media (max-width: 1024px) {
  .fx { padding-right: 28px; }
  .fx + .fx { padding-left: 28px; }
  .fx__head { flex-direction: column-reverse; align-items: flex-start; }
}
@media (max-width: 760px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx, .fx + .fx { padding: 32px 0 40px; border-left: 0; }
  .fx + .fx { border-top: 2px solid var(--brand-deep); }
  .fx__head { flex-direction: row; align-items: flex-end; }
}
@media (max-width: 600px) {
  .fx { gap: 22px; }
  .fx__word { font-size: 44px; }
  .fx__jars img { width: 72px; }
  .fx__jars img + img { margin-left: -20px; }
  .fx__why { font-size: 17px; }
  .fx__flavors span:not(.fx__label) { font-size: 19px; }
  .fx__name { font-size: 15px; }
  .fx__dose { font-size: 21px; }
  .fx__foot .btn { width: 100%; justify-content: center; }
}
/* шапка комплекса: банки справа сверху, слово на всю ширину */
.fx__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 16px; }
.fx__head .fx__kicker { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 6px; }
.fx__head .fx__jars { grid-column: 2; grid-row: 1; }
.fx__head .fx__word { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; font-size: clamp(40px, 4.6vw, 70px); }
@media (max-width: 1024px) { .fx__head { flex-direction: initial; } .fx__head .fx__word { font-size: clamp(34px, 4.6vw, 48px); } }
@media (max-width: 760px) { .fx__head .fx__word { font-size: clamp(40px, 12vw, 56px); } }

/* Как принимать: двухцветные иконки без подложки */
.rule__icon--duo { width: 64px; height: 64px; background: none; border-radius: 0; place-items: start; }
.rule__icon--duo svg { width: 64px; height: 64px; fill: none; stroke: var(--brand-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rule__icon--duo .f { fill: color-mix(in srgb, var(--brand) 22%, transparent); stroke: none; }
.rule__icon--duo .f2 { fill: color-mix(in srgb, var(--brand) 40%, transparent); stroke: none; }
.rule__icon--duo .f3 { fill: color-mix(in srgb, var(--brand) 60%, transparent); stroke: none; }
.rule__icon--duo circle[r="1.6"], .rule__icon--duo circle[r="1.2"] { fill: var(--brand-deep); stroke: none; }
.rules--cols .rule__icon--duo { margin-bottom: 10px; }
@media (max-width: 600px) {
  .rules--cols .rule__icon--duo, .rule__icon--duo svg { width: 52px; height: 52px; }
  .rules--cols .rule__icon--duo { margin-bottom: 0; }
}

/* Преимущества: те же двухцветные иконки */
.perk__icon.rule__icon--duo { flex: 0 0 52px; width: 52px; height: 52px; background: none; border-radius: 0; }
.perk__icon.rule__icon--duo svg { width: 52px; height: 52px; }
.rule__icon--duo .tube path { stroke: var(--brand-deep); stroke-width: 11; }
.rule__icon--duo .tube-in path { stroke: color-mix(in srgb, var(--brand) 30%, #fff); stroke-width: 7; }
.rule__icon--duo .hl { stroke: #fff; stroke-width: 2.4; opacity: .85; }

/* Где купить: карточки по высоте содержимого, стрелка по центру */
.buy__card { min-height: 0; justify-content: center; gap: 4px; padding: 22px 72px 22px 24px; }
.buy__card-arrow { top: 50%; margin-top: -20px; }

/* Где купить: обтравленное желе вместо фото фруктов */
.buy__panel {
  background:
    radial-gradient(38% 70% at 0% 30%, rgba(214, 170, 60, .16) 0%, transparent 70%),
    radial-gradient(38% 70% at 100% 30%, rgba(200, 40, 60, .12) 0%, transparent 70%),
    #FBF8F4;
}
.buy__jelly { position: absolute; z-index: -1; pointer-events: none; height: auto; filter: drop-shadow(0 18px 22px rgba(60, 30, 20, .18)); }
.buy__jelly--l { left: -3%; top: 18px; width: clamp(180px, 22%, 300px); transform: rotate(-8deg); }
.buy__jelly--r { right: -6%; top: 40px; width: clamp(200px, 26%, 360px); transform: rotate(6deg);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); }
@media (max-width: 1024px) {
  .buy__jelly--l { width: 150px; left: -40px; top: 8px; }
  .buy__jelly--r { width: 170px; right: -60px; top: 16px; }
}
@media (max-width: 600px) {
  .buy__jelly--l { width: 110px; left: -36px; top: -6px; opacity: .9; }
  .buy__jelly--r { width: 130px; right: -50px; top: 0; opacity: .9; }
}
@media (min-width: 1025px) {
  .buy__jelly--l { left: -56px; top: 24px; width: 250px; }
  .buy__jelly--r { right: -80px; top: 40px; width: 290px; }
}

/* Важно знать: гранатовый, как карточка граната */
.important__title .t-serif, .important__title .t-bold {
  background: linear-gradient(165deg, #AE2955 0%, #560822 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (min-width: 1025px) {
  .buy__jelly--l { left: -64px; top: 30px; width: 230px; }
  .buy__jelly--r { right: -104px; top: 52px; width: 270px; }
}
@media (max-width: 600px) {
  .buy__panel { padding-top: 64px; }
  .buy__jelly--l { width: 104px; left: -26px; top: -22px; }
  .buy__jelly--r { width: 124px; right: -44px; top: -10px; }
}
@media (max-width: 600px) {
  .buy__panel { padding-top: 112px; }
  .buy__jelly--l { width: 132px; left: -14px; top: 6px; }
  .buy__jelly--r { width: 150px; right: -40px; top: 14px; }
}

/* Где купить: ряд банок над плашкой, лёгкий светлый градиент */
.buy .container { position: relative; }
.buy__jars { position: relative; z-index: 2; display: block; width: min(640px, 64%); height: auto; margin: 0 auto -92px; filter: drop-shadow(0 22px 24px rgba(40, 25, 35, .22)); }
.buy__panel {
  padding-top: 132px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F3 55%, #F6EFEB 100%);
}
@media (max-width: 1024px) { .buy__jars { width: 72%; margin-bottom: -64px; } .buy__panel { padding-top: 104px; } }
@media (max-width: 600px) { .buy__jars { width: 96%; margin-bottom: -36px; } .buy__panel { padding-top: 64px; } }

/* ===== Правки по комментариям заказчика ===== */
/* Переключатель вкусов: банка вместо обрезанного фрукта */
.picker__thumb img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: contain; background: color-mix(in srgb, var(--fc) 10%, #fff); padding: 3px; }
/* Состав: цветная точка вкуса вместо фото фрукта */
.fx__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.fx__flavors span:not(.fx__label) { gap: 12px; }

/* Первый экран: девушка с ложкой справа на плашке, банка левее */
.stage__photo {
  position: absolute; z-index: 1;
  top: var(--panel-top); right: 0; bottom: 0; width: 56%;
  border-radius: 0 var(--radius-l) var(--radius-l) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  pointer-events: none;
}
.stage__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
.stage__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--g2) 45%, transparent) 0%, transparent 40%); }
.hero__stage .stage__jar { left: 31%; }
@media (min-width: 1025px) { .hero__stage .chip--2 { top: calc(var(--panel-top) + 18px); right: 18px; } }
@media (max-width: 1024px) {
  .hero__stage .stage__jar { left: 32%; }
}
@media (max-width: 600px) {
  .stage__photo { width: 60%; }
  .hero__stage .stage__jar { left: 34%; }
  .hero__stage .chip--1 { right: auto; left: 2%; top: 36%; }
}
@media (min-width: 1025px) {
  .hero__stage { --jw: clamp(240px, 23vw, 340px); }
  .hero__stage .stage__jar { left: 29%; }
  .hero__stage .chip--1 { left: -28px; top: 52%; }
  .hero__stage .chip--3 { left: -12px; bottom: 6%; }
}
/* Забота о движении: фото человека вместо вишни */
.jelly__media .arch--tall img { object-position: 50% 50%; }
/* Миссия: фото радости слева во всю высоту карточки */
.mission { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto; overflow: hidden; padding-left: 0; }
.mission__photo { align-self: stretch; margin: calc(clamp(32px, 5vw, 56px) * -1) 0; min-height: 320px; position: relative; }
.mission__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1024px) {
  .mission { grid-template-columns: minmax(0, 1fr); padding-left: clamp(32px, 5vw, 56px); }
  .mission__photo { margin: calc(clamp(32px, 5vw, 56px) * -1) calc(clamp(32px, 5vw, 56px) * -1) 0; min-height: 0; aspect-ratio: 16 / 10; }
}
@media (min-width: 1025px) { .hero__stage .chip--1 { left: -44px; top: 40%; } }

/* ===================== Первый экран: плитки + фото ===================== */
.hb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 32px; align-items: stretch; padding-top: 32px; padding-bottom: 40px; }
.hb__left { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hb .hero__text { margin: 0; }
.hb .hero__title { font-size: clamp(32px, 3.4vw, 52px); }
.hb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex: 1 1 auto; }
.hb__tile { position: relative; border-radius: 28px; overflow: hidden; min-width: 0; }

/* Плитка-слайдер */
.hb__slider { --jw: 168px; --panel-top: 0px; --word-top: 0px; min-height: 236px; height: auto; align-self: stretch; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hb__slider .stage__panel { inset: 0; border-radius: inherit; box-shadow: none; }
.hb__slider .stage__word, .hb__slider .stage__chips { display: none; }
.hb__slider .stage__badge { left: 16px; top: 16px; font-size: 11px; padding: 6px 10px; }
.hb__slider .stage__jar { left: 50%; top: 22px; width: var(--jw); height: var(--jw); margin-left: calc(var(--jw) / -2); }
.hb__slider .jar__slot img { filter: drop-shadow(0 16px 18px rgba(0,0,0,.3)); }
.hb__flavor { position: absolute; z-index: 5; left: 18px; bottom: 16px; color: #fff; font-family: var(--f-serif); font-style: normal; font-weight: 500; font-size: 26px; line-height: 1; }
.hb__slider .stage__arrow { width: 38px; height: 38px; bottom: 14px; }
.hb__slider .stage__arrow svg { width: 18px; height: 18px; }
.hb__slider .stage__arrow--prev { right: 58px; }
.hb__slider .stage__arrow--next { right: 14px; }

/* Тёмная плитка: формула */
.hb__dark { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 24px; color: #fff;
  background: radial-gradient(70% 80% at 100% 0%, rgba(255,255,255,.12) 0%, transparent 60%), linear-gradient(160deg, var(--brand-g1) 0%, var(--brand-g2) 100%); }
.hb__dark-title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; }
.hb__dark-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--brand-on-dark); }

/* Широкая плитка: выбор вкуса и покупка */
.hb .hb__wide { grid-column: 1 / -1; grid-area: auto; margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); border-radius: 28px; }
.hb__wide-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hb .hero__picker { margin: 0; }
.hb .picker { padding: 0; box-shadow: none; background: none; gap: 6px; }
.hb .picker__item { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 14px; }
.hb .picker__thumb { width: 40px; height: 40px; flex: none; }
.hb .picker__line { display: none; }
.hb .picker__name { font-size: 14px; }
.hb .buy__actions .btn { width: 100%; justify-content: center; }

/* Фото справа */
.hb__photo { position: relative; border-radius: 32px; overflow: hidden; min-height: 560px; background: #2a2024; }
.hb__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hb__glass { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 180px; border-radius: 22px; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background-color .3s; }
.hb__glass:hover { background: rgba(255,255,255,.24); }
.hb__glass-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.hb__glass-title { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.hb__glass-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hb__glass-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1024px) {
  .hb { grid-template-columns: minmax(0, 1fr); }
  .hb__photo { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
}
@media (max-width: 600px) {
  .hb { gap: 20px; padding-top: 16px; }
  .hb__photo { aspect-ratio: 4 / 5; border-radius: 26px; }
  .hb__photo img { object-position: 48% 40%; }
  .hb__glass { right: 12px; bottom: 12px; padding: 14px 16px; min-width: 0; }
  .hb__glass-title { font-size: 18px; }
  .hb__grid { gap: 10px; }
  .hb__slider { --jw: 124px; min-height: 196px; }
  .hb__flavor { font-size: 21px; left: 14px; bottom: 14px; }
  .hb__slider .stage__arrow { display: none; }
  .hb__dark { padding: 18px; }
  .hb__dark-title { font-size: 16px; }
  .hb__dark-text { font-size: 13px; }
  .hb .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Планшет и телефон: заголовок → фото → плитки */
@media (max-width: 1024px) {
  .hb__left { display: contents; }
  .hb .hero__text { order: 1; }
  .hb__photo { order: 2; }
  .hb__grid { order: 3; }
}
.hb .hb__wide { grid-area: auto / 1 / auto / -1; }
.hb .hb__wide { align-items: stretch; }
.hb .hb__wide > * { width: 100%; }
.hb .buy__actions .btn { flex: 1 1 auto; }
@media (min-width: 1025px) {
  .hb { padding-top: 20px; padding-bottom: 32px; }
  .hb__left { gap: 22px; }
  .hb .hero__eyebrow { margin-bottom: 14px; }
  .hb__slider { --jw: 150px; min-height: 212px; }
  .hb .hb__wide { gap: 12px; padding: 16px 18px; }
}
.hb .hero__text, .hb .hero__picker { grid-area: auto; }
/* Фото первого экрана: светлый портрет, девушка в правой части кадра */
.hb__photo { background: #8fd3dc; }
.hb__photo img { object-position: 70% 30%; }
@media (max-width: 1024px) { .hb__photo img { object-position: 72% 30%; } }

/* Первый экран: вырезанная девушка на мягком фоне бренда */
.hb__photo {
  background:
    radial-gradient(55% 45% at 42% 30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(174,41,85,.16) 0%, transparent 70%),
    linear-gradient(165deg, #F8EEF0 0%, #EEDFE8 50%, #DCCBDC 100%);
}
.hb__facets { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb__photo img.hb__girl { inset: auto; left: 50%; bottom: 0; top: auto; width: auto; height: 86%; max-width: none; object-fit: contain; transform: translateX(-46%); filter: drop-shadow(0 30px 40px rgba(65,52,64,.18)); }
.hb__glass { background: rgba(65,52,64,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.hb__glass:hover { background: rgba(65,52,64,.55); }
@media (max-width: 1024px) { .hb__photo img.hb__girl { height: 96%; transform: translateX(-48%); } }
@media (max-width: 600px) { .hb__photo { aspect-ratio: 4 / 4.4; } .hb__photo img.hb__girl { height: 92%; transform: translateX(-50%); } }
@media (min-width: 1025px) { .hb__photo img.hb__girl { height: 70%; transform: translateX(-44%); } }
@media (min-width: 1025px) { .hb__photo img.hb__girl { height: 74%; transform: translateX(-51%); } }
.hb__glass { right: auto; bottom: auto; left: 20px; top: 20px; }
@media (max-width: 600px) { .hb__glass { left: 12px; top: 12px; } }
@media (max-width: 600px) {
  .hb__photo img.hb__girl { height: 76%; transform: translateX(-46%); }
  .hb__glass { padding: 10px 14px; gap: 2px; border-radius: 16px; }
  .hb__glass-kicker { display: none; }
  .hb__glass-title { font-size: 15px; }
  .hb__glass-link { font-size: 10px; margin-top: 2px; }
}

/* Первый экран, версия 3: «Полезная привычка» вместо формулы, только кнопка, ниже по высоте */
.hb__hidden { display: none; }
.hb__habit { justify-content: space-between; gap: 14px; padding: 22px 24px; text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s; }
.hb__habit:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(65,52,64,.55); }
.hb__habit-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-on-dark); }
.hb__habit-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.02; text-transform: uppercase; color: #fff; }
.hb__habit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.hb__habit-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.hb__habit:hover .hb__habit-link svg { transform: translate(2px, -2px); }
.hb .hb__cta { grid-column: 1 / -1; grid-area: auto / 1 / auto / -1; margin: 0; padding: 0; display: block; background: none; box-shadow: none; border-radius: 0; }
.hb .hb__cta .btn { width: 100%; justify-content: center; }
.hb__photo { min-height: 0; }
@media (min-width: 1025px) {
  .hb { padding-top: 16px; padding-bottom: 28px; }
  .hb__grid { flex: 0 0 auto; }
  .hb__slider { --jw: 140px; min-height: 196px; }
}
@media (max-width: 1024px) { .hb__photo { aspect-ratio: 16 / 11; } }
@media (max-width: 600px) {
  .hb__photo { aspect-ratio: 1 / 1; }
  .hb__habit { padding: 16px; }
  .hb__habit-title { font-size: 22px; }
  .hb__habit-link { font-size: 10px; }
}
.jelly__media .arch--tall img { object-position: 50% 30%; }
/* Миссия: фото пары шире, чтобы в кадр вошли оба */
@media (min-width: 1025px) { .mission { grid-template-columns: minmax(320px, 460px) minmax(0, 1fr) auto; } }
.mission__photo img { object-position: 54% 40%; }
@media (max-width: 1024px) { .mission__photo img { object-position: 50% 30%; } }
@media (min-width: 1025px) { .mission { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) auto; } }

/* ===== Пакет правок 2 ===== */
/* 3. Формула: «для суставов / для вен» — кегль меньше */
.fx__head .fx__word { font-size: clamp(30px, 3.3vw, 48px); letter-spacing: -.03em; }
@media (max-width: 760px) { .fx__head .fx__word { font-size: clamp(28px, 8.4vw, 40px); } }
/* 9. Хранение: условия до и после вскрытия */
.rules--cols dd .store { display: block; }
.rules--cols dd .store + .store { margin-top: 6px; }
.rules--cols dd .store b { color: var(--ink); font-weight: 600; }
.rules--cols dd .store--warn { font-weight: 600; color: var(--brand); }

/* 5. Комплексное предложение */
.cp-group { margin-top: 56px; }
.cp-group + .cp-group { margin-top: 64px; }
.cp-group__title { margin: 0 0 24px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }
.cp-group__title .t-serif { font-family: var(--f-serif); font-style: normal; font-weight: 500; color: var(--brand); }
.cp-group__title .t-bold { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.cp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cp-card { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--ease-out), box-shadow .3s; }
.cp-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(65,52,64,.45); }
.cp-card__art { position: relative; display: grid; place-items: center; height: 168px; overflow: hidden;
  background: radial-gradient(60% 70% at 30% 20%, #fff 0%, transparent 70%), linear-gradient(150deg, #F5EEF1 0%, #E9DDE7 100%); }
.cp-card__art::before { content: ''; position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; background: linear-gradient(200deg, rgba(201,169,204,.5), rgba(201,169,204,0)); clip-path: polygon(100% 0, 0 45%, 85% 100%); }
.cp-card__art::after { content: ''; position: absolute; left: -24px; bottom: -36px; width: 130px; height: 130px; background: linear-gradient(30deg, rgba(127,195,183,.35), rgba(127,195,183,0)); clip-path: polygon(0 0, 100% 60%, 10% 100%); }
.cp-card__icon { position: relative; z-index: 1; width: 104px; height: 104px; }
.cp-card__icon svg { width: 104px; height: 104px; stroke-width: 1.7; }
.cp-card__body { padding: 20px 22px 24px; }
.cp-card__body h4 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.25; }
.cp-card__body p { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.cp-card__body p b { color: var(--brand); font-weight: 700; }
.cp-cta { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none; min-height: 100%;
  background: radial-gradient(70% 60% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%), linear-gradient(160deg, var(--brand-g1) 0%, var(--brand-g2) 100%); transition: transform .3s var(--ease-out), box-shadow .3s; }
.cp-cta:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(65,52,64,.6); }
.cp-cta__kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-on-dark); }
.cp-cta__title { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.15; }
.cp-cta__jars { display: flex; justify-content: center; margin: auto 0 4px; padding-top: 8px; }
.cp-cta__jars img { width: 46%; max-width: 130px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.35)); }
.cp-cta__jars img + img { margin-left: -12%; }
.cp-cta__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cp-cta__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.cp-cta:hover .cp-cta__link svg { transform: translateX(3px); }
/* Вены: две широкие карточки */
.cp-grid--veins .cp-card--wide { grid-column: span 2; flex-direction: row; }
.cp-grid--veins .cp-card--wide .cp-card__art { flex: 0 0 46%; height: auto; min-height: 220px; }
.cp-grid--veins .cp-card--wide .cp-card__body { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.cp-grid--veins .cp-card--wide h4 { font-size: 22px; }
.cp-grid--veins .cp-card--wide p { font-size: 16px; }
.cp-cta--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 20px; }
.cp-cta--wide .cp-cta__kicker, .cp-cta--wide .cp-cta__title, .cp-cta--wide .cp-cta__link { grid-column: 1; }
.cp-cta--wide .cp-cta__title { font-size: 26px; }
.cp-cta--wide .cp-cta__link { grid-row: 4; align-self: end; }
.cp-cta--wide .cp-cta__jars { grid-column: 2; grid-row: 1 / -1; align-self: end; margin: 0; width: 260px; }
.cp-cta--wide .cp-cta__jars img { max-width: 150px; width: 55%; }
@media (max-width: 1024px) {
  .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-grid--veins .cp-card--wide, .cp-cta--wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cp-grid { gap: 10px; }
  .cp-card__art { height: 120px; }
  .cp-card__icon, .cp-card__icon svg { width: 76px; height: 76px; }
  .cp-card__body { padding: 14px 14px 16px; }
  .cp-card__body h4 { font-size: 15px; }
  .cp-card__body p { font-size: 13px; }
  .cp-grid--veins .cp-card--wide { flex-direction: column; }
  .cp-grid--veins .cp-card--wide .cp-card__art { min-height: 140px; }
  .cp-grid--veins .cp-card--wide .cp-card__body { padding: 18px; }
  .cp-cta--wide { grid-template-columns: minmax(0, 1fr); }
  .cp-cta--wide .cp-cta__jars { grid-column: 1; grid-row: auto; width: auto; justify-content: flex-start; }
  .cp-cta--wide .cp-cta__link { grid-row: auto; }
  .cp-cta__title, .cp-cta--wide .cp-cta__title { font-size: 18px; }
}
.cp-card__icon .f { fill: color-mix(in srgb, var(--brand) 26%, #fff); }
.cp-card__icon .f2 { fill: color-mix(in srgb, var(--brand) 48%, #fff); }
.cp-card__icon .f3 { fill: color-mix(in srgb, var(--brand) 70%, #fff); }

/* 8. Каталог в подаче интернет-магазина */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s, transform .3s var(--ease-out); }
.pcard:hover { box-shadow: 0 0 0 1px var(--line), 0 26px 44px -30px rgba(40,30,40,.45); }
.pcard__media { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; background: linear-gradient(180deg, #F7F4F2 0%, #EFEAE6 100%); }
.pcard__media img { width: 74%; height: auto; filter: drop-shadow(0 16px 18px rgba(0,0,0,.18)); transition: transform .5s var(--ease-out); }
.pcard:hover .pcard__media img { transform: translateY(-4px) scale(1.03); }
.pcard__line { position: absolute; left: 14px; top: 14px; padding: 5px 10px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); box-shadow: 0 0 0 1px var(--line); }
.pcard__info { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 12px/1 var(--f-body); color: var(--ink); cursor: pointer; }
.pcard__info::before { content: 'i'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 italic 11px/1 var(--f-serif); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: 16px 18px 18px; }
.pcard__flavor { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.pcard__flavor i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.pcard__title { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.pcard__meta { font-size: 13px; color: var(--ink-mute); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.pcard__price { font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; white-space: nowrap; }
.pcard__btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .2s; }
.pcard__btn:hover { background: var(--brand-deep); }
/* Всплывающий состав: при наведении (мышь) или по кнопке «Состав» (тач) */
.pcard__pop { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; padding: 16px 16px 14px; border-radius: 18px; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(40,30,40,.4);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s; }
@media (hover: hover) { .pcard:hover .pcard__pop { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease-out); } }
.pcard.is-open .pcard__pop { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease-out); }
.pcard__pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--brand-deep); }
.pcard__pop-head b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.pcard__pop-head span { font-size: 12px; color: var(--ink-mute); }
.pcard__pop-lead { margin: 8px 0 2px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.pcard__pop-list { list-style: none; margin: 0; padding: 0; }
.pcard__pop-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pcard__pop-list li:last-child { border-bottom: 0; }
.pcard__pop-list b { font-family: var(--f-display); font-weight: 700; font-size: 13px; white-space: nowrap; color: var(--brand-deep); }
@media (max-width: 1024px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pgrid { gap: 10px; }
  .pcard__body { padding: 12px; gap: 4px; }
  .pcard__title { font-size: 13px; }
  .pcard__meta { font-size: 11px; }
  .pcard__foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; }
  .pcard__price { font-size: 17px; }
  .pcard__btn { padding: 9px 12px; font-size: 13px; }
  .pcard__line { left: 8px; top: 8px; font-size: 9px; padding: 4px 7px; }
  .pcard__info { right: 8px; top: auto; bottom: 8px; font-size: 11px; padding: 5px 8px 5px 6px; }
  .pcard__pop { left: 6px; right: 6px; top: 6px; padding: 12px; }
  .pcard__pop-list li, .pcard__pop-lead { font-size: 11px; }
  .pcard__pop-list b { font-size: 11px; }
}
/* 2. Стикер «Нежное ягодное желе» */
.jelly__sticker b { font-size: .78em; letter-spacing: .02em; }
.only-touch { display: none; }
@media (hover: none) { .only-hover { display: none; } .only-touch { display: inline; } }

/* ===== Пакет правок 3 ===== */
/* Подложка иллюстраций почти незаметная */
.cp-card__art { background: linear-gradient(180deg, #FCFAFA 0%, #F7F3F4 100%); }
.cp-card__art::before, .cp-card__art::after { display: none; }
.cp-card__art { border-bottom: 1px solid #F1EBEC; }
/* Детали новых иконок */
.cp-card__icon .hole { fill: #fff; stroke: var(--brand-deep); }
.cp-card__icon .dot { fill: var(--brand-deep); stroke: none; }
.cp-card__icon .thin { stroke-width: 1.1; opacity: .7; }
/* Цифры: кегль спокойнее */
.stat__num { font-size: clamp(44px, 4.4vw, 64px); }
@media (max-width: 600px) { .stat__num { font-size: 44px; } }
/* Первый экран: девушка с желе (в кадре по центру) */
@media (min-width: 1025px) { .hb__photo img.hb__girl { height: 82%; transform: translateX(-52%); } }
@media (max-width: 1024px) { .hb__photo img.hb__girl { height: 92%; transform: translateX(-52%); } }
@media (max-width: 600px) { .hb__photo img.hb__girl { height: 84%; transform: translateX(-52%); } }

/* Карточки вкусов: приглушённые, в духе каталога */
.taste .flavor {
  background:
    radial-gradient(70% 45% at 50% 38%, rgba(255,255,255,.9) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--g1) 11%, #fff) 0%, color-mix(in srgb, var(--g1) 5%, #FBF8F5) 100%);
  color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g1) 14%, var(--line));
}
.taste .flavor:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--g1) 18%, var(--line)), 0 26px 40px -30px color-mix(in srgb, var(--g2) 55%, transparent); }
.taste .flavor__name { color: var(--fc); }
.taste .flavor__media img { filter: drop-shadow(0 16px 18px rgba(40,30,40,.18)); }
.taste .flavor__line { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-mute); }
.taste .flavor__line::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--g1); }
.taste .flavor__buy { border-top-color: color-mix(in srgb, var(--g1) 18%, var(--line)); }
.taste .flavor__price { color: var(--ink); }
.taste .flavor__btn { background: var(--brand); color: #fff; font-weight: 600; }
.taste .flavor__btn:hover { background: var(--brand-deep); }
/* Комплексный подход: текст под заголовком */
.cp .section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
.cp .section__head .section__aside { max-width: 640px; margin: 0; }

/* ===================== Пакет правок 4 ===================== */
/* Шрифт заголовков — Montserrat: лёгкая часть 300, акцент — заглавные 800 */
.t-serif { font-weight: 300; font-size: 1em; letter-spacing: -.02em; }
.t-bold { font-weight: 800; letter-spacing: -.025em; }

/* Логотип вместо слова Arquillena (маска — цвет задаётся через background) */
.brand-logo { display: inline-block; vertical-align: -0.08em; height: .82em; aspect-ratio: 1200 / 242; background: currentColor;
  -webkit-mask: url(../img/logo.png) no-repeat center / contain; mask: url(../img/logo.png) no-repeat center / contain; }
.h2 .brand-logo { height: .78em; color: var(--brand); vertical-align: -0.04em; }
.brand-logo--link { color: var(--brand); transition: opacity .2s; }
.brand-logo--link:hover { opacity: .7; }
.science__contains .brand-logo { height: 1.05em; vertical-align: -0.2em; margin: 0 .1em; }

/* 6. Типы коллагена — равные по весу карточки: I · II · III, под ними два комплекса */
.sci-grid--even { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "t1 t1 t2 t2 t3 t3" "joints joints joints veins veins veins"; }
.sci-grid--even .sci--t1 { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.sci-grid--even .sci--t1 .sci__roman { font-size: 200px; top: -18px; color: color-mix(in srgb, var(--brand) 9%, transparent); }
.sci-grid--even .sci--t1 .sci__type { color: var(--brand); font-size: 52px; }
.sci-grid--even .sci--t1 .sci__type small { color: var(--ink); }
.sci-grid--even .sci--t1 .sci__src { background: #fff; box-shadow: 0 0 0 1px var(--line); color: inherit; }
.sci-grid--even .sci--t1 p { color: var(--ink-soft); font-size: 15px; }
.sci-grid--even .sci--joints, .sci-grid--even .sci--veins { grid-template-columns: minmax(0, 1fr) 36%; }
@media (max-width: 1024px) { .sci-grid--even { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "t1 t2 t3" "joints joints joints" "veins veins veins"; } .sci-grid--even .sci--t1 { min-height: 0; } }
@media (max-width: 600px) { .sci-grid--even { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t1" "t2" "t3" "joints" "veins"; } }

/* 12. Заголовок блока цифр */
.nums__head { margin-bottom: 48px; }
/* 1. Логотип в теле лендинга */
.mission__kicker .brand-logo { height: 1.5em; vertical-align: -0.45em; margin-left: .3em; color: #fff; }
.history__sign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.history__sign .brand-logo { height: 26px; color: var(--brand); }
.cp-cta__kicker .brand-logo { height: 1.5em; vertical-align: -0.45em; margin-right: .2em; color: #fff; }
.buy__brand { display: flex; justify-content: center; margin-bottom: 18px; }
.buy__brand .brand-logo { height: 30px; color: var(--brand); }
/* 2. Слайдер на баннере: спокойный светлый фон, как у карточек вкусов */
.hb__slider .panel__layer {
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(255,255,255,.95) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--g1) 12%, #fff) 0%, color-mix(in srgb, var(--g1) 6%, #FBF8F5) 100%);
}
.hb__slider { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--line)); }
.hb__slider .stage__badge { background: #fff; color: var(--ink-soft); box-shadow: 0 0 0 1px var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hb__flavor { color: var(--accent-deep); font-weight: 300; }
.hb__slider .jar__slot img { filter: drop-shadow(0 14px 16px rgba(40,30,40,.18)); }
.hb__slider .stage__arrow { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hb__slider .stage__arrow:hover { background: var(--brand-soft); }
.hb__slider .stage__arrow:focus-visible { outline-color: var(--brand); }
/* 8. Чередование фонов после перестановки блоков */
.history { background: var(--cream); }
.cp { background: var(--sand); }
/* 9. История бренда: текст слева, врач ОРТЕКИ справа со шильдиком */
.history__grid--doc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.history__doc { position: relative; margin: 0; border-radius: var(--radius-img); overflow: hidden; aspect-ratio: 4 / 4.4; background: #E9EAF2; }
.history__doc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.history__badge { position: absolute; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; border-radius: 20px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 34px -18px rgba(40,30,40,.45); }
.history__badge .brand-logo { height: 22px; color: var(--brand); }
.history__badge span { font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
@media (max-width: 1024px) { .history__grid--doc { grid-template-columns: minmax(0, 1fr); gap: 28px; } .history__doc { max-width: 520px; } }
@media (max-width: 600px) { .history__badge { left: 12px; bottom: 12px; padding: 12px 14px; } .history__badge .brand-logo { height: 18px; } .history__badge span { font-size: 14px; } }
/* 10. Комплексный подход: фото категорий вместо иконок */
.cp-card__art--photo { height: 200px; padding: 0; background: #EFEAE6; border-bottom: 0; }
.cp-card__art--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.cp-card:hover .cp-card__art--photo img { transform: scale(1.04); }
.cp-grid--veins .cp-card--wide .cp-card__art--photo { min-height: 240px; }
@media (max-width: 600px) { .cp-card__art--photo { height: 150px; } }
.history__badge { bottom: auto; top: 20px; }
@media (max-width: 600px) { .history__badge { top: 12px; bottom: auto; } }
.cp-card__art--photo { position: relative; display: block; }
.cp-card__art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Баннер: целое фото девушки, кадр как у заказчика */
.hb__photo--full { background: #EDE6E2; }
.hb__photo--full img.hb__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transform: none; filter: none; }
@media (max-width: 1024px) { .hb__photo--full img.hb__shot { object-position: 62% 45%; } }
.hb__photo--full img.hb__shot { transform: scale(1.38); transform-origin: 63% 44%; }
@media (max-width: 1024px) { .hb__photo--full img.hb__shot { transform: scale(1.3); transform-origin: 62% 42%; } }
/* Баннер: фото уже кадрировано — без приближения */
.hb__photo--full img.hb__shot { transform: none; object-position: 44% 40%; }
@media (max-width: 1024px) { .hb__photo--full img.hb__shot { transform: none; object-position: 46% 40%; } }
/* Баннер: «Полезная привычка» — светлая, как слайдер; вкус в слайдере жирнее */
.hb__habit {
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(255,255,255,.95) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, #fff) 0%, color-mix(in srgb, var(--brand) 5%, #FBF8F5) 100%);
  color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 14%, var(--line));
}
.hb__habit:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, var(--line)), 0 22px 40px -28px rgba(65,52,64,.45); }
.hb__habit-kicker { color: var(--ink-mute); }
.hb__habit-title { color: var(--brand-deep); }
.hb__habit-link { color: var(--brand); }
.hb__flavor { font-weight: 600; }
/* Типы коллагена: римские цифры — изящный курсив Playfair (только здесь) */
.sci__roman, .sci__type { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }
.sci__type small { font-family: var(--f-display); font-style: normal; }
/* Комплексный подход: описание шире */
.cp .section__head .section__aside { max-width: 1000px; }
/* Курсив Playfair — только у больших фоновых цифр; «I тип» и т. д. — Montserrat */
.sci__type { font-family: var(--f-serif); font-style: normal; }

/* 9. История бренда — журнальная вёрстка */
.hj__quote { margin: 0; max-width: 920px; font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.01em; color: var(--brand-deep); }
.hj__quote::before { content: '«'; } .hj__quote::after { content: '»'; }
.hj__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 36px; }
.hj__cols p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.hj__strip { display: grid; grid-template-columns: 1.2fr 1fr .8fr; margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hj__strip > div { display: flex; align-items: center; gap: 16px; padding: 24px 28px; }
.hj__strip > div:first-child { padding-left: 0; }
.hj__strip > div + div { border-left: 1px solid var(--line); }
.hj__doc img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.hj__strip b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--ink); }
.hj__strip span { font-size: 14px; line-height: 1.4; color: var(--ink-mute); }
.hj__ex .brand-logo { flex: none; height: 20px; color: var(--brand); }
.hj__ex b { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.hj__nk { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px !important; }
.hj__nk b { font-weight: 800; font-size: 30px; line-height: 1; color: var(--brand); letter-spacing: -.01em; }
@media (max-width: 1024px) {
  .hj__strip { grid-template-columns: minmax(0, 1fr); }
  .hj__strip > div { padding: 18px 0; }
  .hj__strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) { .hj__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; } .hj__cols p { font-size: 16px; } }
/* Карточки «Arquillena изнутри»: банки крупнее */
.cp-cta--wide .cp-cta__jars { width: 340px; margin-bottom: -6px; }
.cp-cta--wide .cp-cta__jars img { width: 58%; max-width: 196px; }
@media (max-width: 1024px) { .cp-cta--wide .cp-cta__jars { width: 300px; } }
@media (max-width: 600px) { .cp-cta--wide .cp-cta__jars { width: auto; } .cp-cta--wide .cp-cta__jars img { width: 50%; max-width: 170px; } }
.cp-grid:not(.cp-grid--veins) .cp-card__art--photo { height: 240px; }
@media (max-width: 600px) { .cp-grid:not(.cp-grid--veins) .cp-card__art--photo { height: 170px; } }
/* «Новинка» — круглый сливовый стикер, как в «Заботе о движении» */
.pill-new { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 116px; height: 116px; padding: 0; border: 0; border-radius: 50%;
  background: var(--brand); color: var(--brand-on-dark); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: none; text-align: center; line-height: 1.2;
  animation: spin-wobble 9s ease-in-out infinite; }
.pill-new b { font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
@media (max-width: 600px) { .pill-new { width: 92px; height: 92px; font-size: 11px; } .pill-new b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .pill-new { animation: none; } }

/* 13. «Просто принимать»: заголовок; слева пункты 2×2, справа отражённая ложка; ниже плашка */
.how3 .h2 { margin: 0 0 40px; }
.how3__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; }
.rules--grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 0; border-top: 0; gap: 0; }
.rules--grid .rule, .rules--grid .rule:first-child, .rules--grid .rule:last-child, .rules--grid .rule + .rule { border-left: 0; padding: 26px 28px 26px 0; border-top: 1px solid var(--line); }
.rules--grid .rule:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--line); }
.rules--grid .rule:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.how3__stage { height: 420px; }
.how3 .how2__spoon { left: auto; right: -2%; width: calc(100% + 14vw); transform: translateY(-50%) scaleX(-1) rotate(-4deg); transform-origin: center; }
.how3 .how2__stage:hover .how2__spoon { transform: translateY(-52%) scaleX(-1) rotate(-6deg); }
@media (max-width: 1024px) {
  .how3__grid { grid-template-columns: minmax(0, 1fr); }
  .how3__stage { order: -1; height: 300px; }
  .how3 .how2__spoon { width: 100%; right: 0; }
}
@media (max-width: 600px) {
  .how3 .h2 { margin-bottom: 20px; }
  .how3__stage { height: 200px; }
  .rules--grid { grid-template-columns: minmax(0, 1fr) !important; }
  .rules--grid .rule, .rules--grid .rule:nth-child(2n), .rules--grid .rule:nth-child(-n+2) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .rules--grid .rule:first-child { border-top: 0; padding-top: 0; }
}
@media (min-width: 1025px) { .how3 .how2__spoon { right: 0; width: 108%; } }
@media (min-width: 1025px) { .how3 .how2__spoon { right: 3%; width: 104%; } .how3__stage { height: 380px; } }

/* 13. «Просто принимать» — вариант C: сливовая панель + памятка */
.memo-sec .h2 { margin: 0 0 40px; }
.memo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: stretch; }
.memo__panel { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 440px; padding: 36px; border-radius: 28px; overflow: hidden; color: #fff;
  background: radial-gradient(70% 60% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%), linear-gradient(160deg, var(--brand-g1) 0%, var(--brand-g2) 100%); }
.memo__eq { position: relative; z-index: 1; font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.04; text-transform: uppercase; letter-spacing: -.02em; }
.memo__note { position: relative; z-index: 1; max-width: 20em; font-size: 15px; color: var(--brand-on-dark); }
.memo__spoon { position: absolute; right: -14%; bottom: 4%; width: 92%; height: auto; filter: drop-shadow(0 22px 22px rgba(0,0,0,.35));
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 92%); mask-image: linear-gradient(90deg, #000 50%, transparent 92%); transition: transform 1s var(--ease-out); }
.memo__panel:hover .memo__spoon { transform: translateY(-6px) rotate(-2deg); }
.memo__list { margin: 0; align-self: center; }
.memo__row { display: grid; grid-template-columns: 56px 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.memo__row:first-child { border-top: 0; padding-top: 0; }
.memo__ic, .memo__ic svg { width: 48px; height: 48px; }
.memo__ic svg { fill: none; stroke: var(--brand-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.memo__row dt { font-weight: 700; font-size: 18px; color: var(--ink); }
.memo__row dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.memo__row .store { display: block; } .memo__row .store + .store { margin-top: 4px; }
.memo__row .store b { color: var(--ink); font-weight: 600; } .memo__row .store--warn { font-weight: 600; color: var(--brand); }
@media (max-width: 1024px) { .memo { grid-template-columns: minmax(0, 1fr); gap: 32px; } .memo__panel { min-height: 360px; } .memo__spoon { width: 70%; right: -8%; } }
@media (max-width: 600px) {
  .memo-sec .h2 { margin-bottom: 24px; }
  .memo__panel { min-height: 300px; padding: 26px; } .memo__spoon { width: 96%; right: -18%; }
  .memo__row { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; padding: 18px 0; }
  .memo__ic, .memo__ic svg { width: 40px; height: 40px; }
  .memo__row dd { grid-column: 2; font-size: 15px; }
}
/* Новая ложка: желе целиком, ручка уходит вправо */
.memo__spoon { right: -6%; bottom: 6%; width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 98%); mask-image: linear-gradient(90deg, #000 62%, transparent 98%); filter: drop-shadow(0 22px 24px rgba(0,0,0,.4)); }
@media (max-width: 1024px) { .memo__spoon { width: 74%; right: -4%; } }
@media (max-width: 600px) { .memo__spoon { width: 100%; right: -10%; } }
.memo__spoon { filter: none; }
/* Преимущества отбиты от первого экрана */
.perks { margin-top: 56px; }
@media (max-width: 600px) { .perks { margin-top: 36px; } }
/* Стикер «Нежное ягодное желе»: текст крупнее */
.jelly__sticker { font-size: 17px; line-height: 1.2; }
.jelly__sticker b { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
@media (max-width: 1024px) { .jelly__sticker { font-size: 14px; } .jelly__sticker b { font-size: 18px; } }
/* Мобильная: карточки комплексов в «Зачем нужен коллаген» — фото сверху, текст снизу */
@media (max-width: 600px) {
  .sci-grid--even .sci--joints, .sci-grid--even .sci--veins { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sci-grid--even .sci--joints .sci__photo, .sci-grid--even .sci--veins .sci__photo { order: 0; height: 180px; }
  .sci-grid--even .sci__photo img { height: 100%; object-fit: cover; }
  .sci-grid--even .sci__body { padding: 20px; }
}
/* История: полоса из двух частей (без НИКАМЕД) */
.hj__strip { grid-template-columns: 1fr 1fr; }
@media (max-width: 1024px) { .hj__strip { grid-template-columns: minmax(0, 1fr); } }

/* История бренда — вариант C «карточка-ярлык» */
.hc { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 64px; align-items: start; }
.hc__card { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.hc__badge { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 20px; color: #fff;
  background: radial-gradient(70% 80% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%), linear-gradient(160deg, var(--brand-g1), var(--brand-g2)); }
.hc__badge .brand-logo { height: 22px; color: #fff; }
.hc__badge b { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.3; }
.hc__doc { margin: 0; }
.hc__doc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.hc__doc figcaption { margin-top: 14px; }
.hc__doc figcaption b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.hc__doc figcaption span { font-size: 14px; line-height: 1.45; color: var(--ink-mute); }
.hc__btn { justify-content: center; width: 100%; }
.hc__text p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.hc__text p + p { margin-top: 16px; }
.hc__sign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px !important; font-size: 18px; color: var(--ink) !important; }
.hc__sign .brand-logo { height: 24px; color: var(--brand); }
@media (max-width: 1024px) { .hc { grid-template-columns: minmax(0, 1fr); gap: 32px; } .hc__card { max-width: 520px; } }
@media (max-width: 600px) { .hc__card { padding: 16px; } .hc__badge { padding: 18px; } .hc__badge b { font-size: 16px; } .hc__text p { font-size: 16px; } }
/* История: уравновесить карточку и текст, шильдик по левому краю */
.hc { align-items: center; }
.hc__quote { margin-bottom: 24px !important; font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.3 !important; letter-spacing: -.01em; color: var(--brand-deep) !important; }
.hc__quote::before { content: '«'; } .hc__quote::after { content: '»'; }
.hc__badge { align-items: flex-start; }
.hc__badge .brand-logo { align-self: flex-start; height: 28px; width: auto; }
.hc__badge b { font-size: 16px; font-weight: 600; line-height: 1.35; }
.hc__doc figcaption { margin-top: 12px; }
.hc__doc figcaption b { line-height: 1.25; }
.hc__doc figcaption span { display: block; margin-top: 2px; line-height: 1.3; }
@media (max-width: 600px) { .hc__badge .brand-logo { height: 24px; } .hc__badge b { font-size: 15px; } .hc__quote { font-size: 21px !important; } }
.hb__photo--full img.hb__shot { object-position: 52% 35%; }
@media (max-width: 1024px) { .hb__photo--full img.hb__shot { object-position: 52% 30%; } }
/* История: цитата крупнее, чтобы колонки были равны по высоте */
.hc__quote { margin-bottom: 32px !important; font-size: clamp(28px, 2.6vw, 38px) !important; line-height: 1.25 !important; }
@media (max-width: 600px) { .hc__quote { font-size: 24px !important; margin-bottom: 22px !important; } }
@media (min-width: 1025px) { .hc__quote { font-size: clamp(34px, 3.2vw, 48px) !important; line-height: 1.2 !important; margin-bottom: 40px !important; } }
@media (min-width: 1025px) { .hc__text { max-width: 680px; } .hc__text p:not(.hc__quote) { font-size: 18px; } }
@media (min-width: 1025px) { .hc__quote { font-size: clamp(30px, 2.7vw, 40px) !important; margin-bottom: 34px !important; } }
@media (min-width: 1025px) { .hc__quote { font-size: clamp(28px, 2.5vw, 36px) !important; margin-bottom: 30px !important; } }
/* История: текст слева, карточка с врачом справа */
.hc { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
.hc__card { order: 2; }
.hc__text { order: 1; }
@media (max-width: 1024px) { .hc { grid-template-columns: minmax(0, 1fr); } .hc__card { order: 0; } }
/* Баннер: новое фото */
.hb__photo--full img.hb__shot { object-position: 45% 30%; }
@media (max-width: 1024px) { .hb__photo--full img.hb__shot { object-position: 45% 25%; } }
/* Блок целиком — ссылка: невидимая ссылка поверх блока, места не занимает, вёрстку не трогает */
.has-block-link { position: relative; }
.block-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.block-link:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* Кнопки внутри карточек остаются над ссылкой блока; состав, открытый кнопкой, — тоже */
.has-block-link .flavor__btn, .has-block-link .pcard__btn { position: relative; z-index: 6; }
.has-block-link .pcard__info { z-index: 6; }
.pcard.is-open .pcard__pop { z-index: 7; }