/* =========================================================
   PLIS ME — главная страница
   Все цвета — только через токены из tokens.css
   Размеры сняты с макета 1920px
   ========================================================= */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.has-dialog { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: var(--fw-semibold); }
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: var(--z-skip);
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--color-ink); color: var(--text-inverse);
}
.skip-link:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; }
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 24px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-14); line-height: var(--lh-14); text-align: center;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--primary:active { background: var(--btn-primary-bg-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); box-shadow: none; }
.btn--sm { height: 40px; padding: 0 16px; }
.btn--xs { height: 36px; padding: 0 13px; }
.btn--block { width: 100%; }

.square-btn {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--btn-outline-border); border-radius: var(--radius-btn);
  background: var(--bg-surface); color: var(--text-primary);
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.square-btn:hover { border-color: var(--btn-outline-border-hover); }
.square-btn:active { background: var(--btn-primary-bg); border-color: var(--btn-outline-border-hover); }
.square-btn:disabled { border-color: var(--btn-outline-border); color: var(--text-muted); background: var(--bg-surface); }

.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-s);
  color: var(--text-primary); transition: color var(--dur-fast);
}
.icon-btn:hover { color: var(--text-secondary); }
.icon-btn:active { color: var(--text-muted); }
.icon-btn:disabled { color: var(--text-muted); }

.text-link { justify-self: center; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast); }
.text-link:hover { color: var(--text-secondary); }
.text-link--icon { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; }

/* ---------- 1. Announcement ---------- */
.announcement {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--announcement-h); padding: 0 var(--gutter);
  background: var(--bg-announcement); color: var(--text-inverse);
  font-size: var(--fs-14); line-height: var(--lh-14); text-align: center;
}

/* ---------- 2. Header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg-page);
  transition: box-shadow var(--dur) var(--ease);
}
.header.is-scrolled { box-shadow: 0 1px 0 var(--border-default); }
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter);
}
.header__start { display: flex; align-items: center; min-width: 0; }
.header__burger { display: none; margin-left: -9px; }
.nav { display: flex; gap: 40px; }
.nav__link {
  display: inline-block; padding: 19px 0;
  font-size: var(--fs-12); line-height: var(--lh-12); text-transform: uppercase;
  transition: color var(--dur-fast);
}
.nav__link:hover { color: var(--text-secondary); }
.nav__link:active { color: var(--text-muted); }
.nav__link--sale { color: var(--text-sale); }
.nav__link--sale:hover, .nav__link--sale:active { color: var(--text-sale-hover); }
.header__logo { display: block; transition: opacity var(--dur-fast); }
.header__logo img { width: 71px; height: 34px; }
.header__actions { justify-self: end; display: flex; align-items: center; gap: 12px; margin-right: -1px; }
.header__cart-icon { position: relative; display: block; }
.cart-badge {
  position: absolute; top: -4px; left: 11px;
  min-width: 13px; height: 13px; padding: 0 2px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--color-white); color: var(--text-primary);
  font-size: var(--fs-8); line-height: var(--lh-8); text-align: center; font-weight: var(--fw-medium);
}
.cart-badge[hidden] { display: none; }
.cart-badge.is-bump { animation: badge-bump var(--dur) var(--ease); }
@keyframes badge-bump { 50% { transform: scale(1.35); } }

/* ---------- 3. Hero ---------- */
.hero { padding-inline: var(--gutter); }
.hero__viewport {
  position: relative; overflow: hidden;
  height: clamp(420px, calc((100vw - 2 * var(--gutter)) * 600 / 1856), 600px);
  background: var(--bg-placeholder);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.hero__viewport:focus-visible { outline-offset: -2px; }
.hero__track { display: flex; height: 100%; transition: transform var(--dur-slow) var(--ease); will-change: transform; }
.hero__slide { position: relative; flex: 0 0 100%; height: 100%; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-user-drag: none; }
.hero__content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-left: calc(226 / 1856 * 100%); padding-right: var(--gutter);
}
.hero__title { font-size: var(--fs-48); line-height: var(--lh-48); font-weight: var(--fw-semibold); }
.hero__text { margin-top: 19px; font-size: var(--fs-18); line-height: var(--lh-18); white-space: pre-line; }
.hero__cta {
  position: relative; margin-top: 63px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 243px; height: 57px;
  font-size: var(--fs-16); line-height: var(--lh-16);
  transition: color var(--dur-fast);
}
.hero__cta:hover { color: var(--text-secondary); }
.hero__cta:active { color: var(--text-muted); }
/* Овал рисуется 1:1 к Lottie: размер = холст анимации (JS пишет --oval-w/--oval-h) в пересчёте от базового кегля */
.oval {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--oval-w, 246) / var(--oval-base, 16) * 1em);
  height: calc(var(--oval-h, 60) / var(--oval-base, 16) * 1em);
  transform: translate(-50%, -50%); pointer-events: none; color: var(--accent-oval);
}
.oval svg { display: block; }
.oval { transition: opacity 320ms var(--ease-fade); }
.oval.is-fading { opacity: 0; }                 /* между повторами старая обводка мягко гаснет */
.hero__oval { --oval-base: 16; }
.hero__dots { position: absolute; left: 50%; bottom: 8px; z-index: 2; display: flex; transform: translateX(-50%); }
.hero__dot { display: grid; place-items: center; width: 14px; height: 14px; }
.hero__dot::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-line);
  transition: width var(--dur-fast), height var(--dur-fast), background-color var(--dur-fast);
}
.hero__dot:hover::before { background: var(--color-grey-400); }
.hero__dot[aria-current="true"]::before { width: 6px; height: 6px; background: var(--color-ink); }

/* ---------- 4. Press marquee ---------- */
.press { overflow: hidden; padding: 31px 0 30px; }
.press__track { display: flex; width: max-content; }
.press__group { display: flex; align-items: center; gap: 120px; padding-right: 120px; }
.press__item img { width: auto; height: auto; max-height: 25px; -webkit-user-drag: none; }
.press.is-ready .press__track { animation: marquee var(--marquee-duration, 60s) linear infinite; }
.press:hover .press__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section titles ---------- */
.section-title {
  margin-bottom: var(--title-gap);
  font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-regular);
  text-align: center;
}
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.section-head__title { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-regular); }
.section-head__title--lg { font-size: var(--fs-32); line-height: var(--lh-32); }
.section-head__lead { margin-top: 4px; font-size: var(--fs-14); line-height: 20px; }
.section-head__title--lg + .section-head__lead { margin-top: 10px; }
.section-head__btn { flex: none; width: 200px; }

/* ---------- Carousel (общий компонент) ---------- */
.carousel { position: relative; }
.carousel__viewport {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
  container-type: inline-size; cursor: grab;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline-offset: -1px; }
.carousel.is-dragging .carousel__viewport { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.carousel.is-dragging .carousel__track { pointer-events: none; }
.carousel__track { display: flex; align-items: stretch; gap: var(--carousel-gap); width: max-content; padding-inline: var(--gutter); }
.carousel__slide {
  --cw: 100vw; /* фолбэк для браузеров без container units */
  --slide-w: calc((var(--cw) - var(--gutter) - var(--per-view) * var(--carousel-gap) - var(--peek)) / var(--per-view));
  display: flex; flex: 0 0 var(--slide-w); width: var(--slide-w); scroll-snap-align: start;
}
@supports (width: 1cqw) { .carousel__slide { --cw: 100cqw; } }
.carousel--products { --per-view: 5; --peek: 18px; --carousel-gap: 16px; }
.carousel--stories { --per-view: 4; --peek: 160px; --carousel-gap: 32px; }

/* ---------- 5–7. Product sections ---------- */
.products { margin-top: var(--space-products); }
.products--first { margin-top: 76px; }

.product-card { position: relative; display: flex; flex-direction: column; width: 100%; }
.product-card__media { position: relative; aspect-ratio: 358 / 440; overflow: hidden; background: var(--bg-surface); }
.product-card__media-link { position: relative; display: block; height: 100%; isolation: isolate; } /* слои кадров не перекрывают бейджи */
.product-card__badges { z-index: 1; right: 44px; row-gap: 10px; }  /* справа место под «избранное» */
.product-card__img--layer {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-gallery) var(--ease-fade);
}
.product-card__img--layer.is-visible { opacity: 1; }
.product-card__img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.badges { position: absolute; top: 10px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.badge {
  padding: 0 5px; background: var(--color-white); color: var(--text-primary);
  font-size: var(--fs-12); line-height: var(--lh-12); text-transform: uppercase;
}
.product-card__dots { display: flex; justify-content: center; gap: 12px; height: 4px; margin-top: 16px; }
.product-card__dots.is-single { visibility: hidden; }
.product-card__dot {
  position: relative; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-grey-400); transition: background-color var(--dur-fast);
}
.product-card__dot::after { content: ""; position: absolute; inset: -8px -6px; }
.product-card__dot:hover { background: var(--text-secondary); }
.product-card__dot.is-active { background: var(--color-ink); }
.product-card__body { display: flex; flex-direction: column; flex: 1; margin-top: 16px; padding-inline: 5px; }

.scent { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: var(--fs-14); line-height: var(--lh-14); }
.scent__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--scent-revelation)); }
.scent[data-scent="clean-h2o"] .scent__dot, .scent[data-scent="milk"] .scent__dot { box-shadow: inset 0 0 0 1px var(--border-strong); }
.scent--empty .scent__dot { display: none; }
.scent--sm { gap: 5px; min-height: 16px; font-size: var(--fs-12); line-height: var(--lh-12); }
.scent--sm .scent__dot { width: 6px; height: 6px; }

.product-card__name { margin-top: 3px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); }
.product-card__link { transition: color var(--dur-fast); }
.product-card__link:hover { color: var(--text-secondary); }
.product-card__desc { margin-top: 3px; min-height: 36px; color: var(--text-secondary); }
.product-card__price { margin-top: auto; padding-top: 9px; }

/* ---- Состояния карточки: обычное / со скидкой / sold out ---- */
.product-card { --dim: 1; }
.product-card.is-sold-out { --dim: .6; }          /* по макету: фото, точки, тексты и кнопка на 60%, бейджи и сердце — нет */
.product-card__media-link, .product-card__dots, .product-card__body { opacity: var(--dim); }

/* ---- Hover: избранное + «Купити» (ТЗ п.102 — кнопка не видна постоянно) ---- */
.product-card__fav {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 36px;
  color: var(--text-primary); opacity: 0;
  transition: opacity 220ms var(--ease-fade), color var(--dur-fast);
}
.product-card__fav svg { width: 22px; height: 22px; fill: transparent; transition: fill var(--dur-fast), transform var(--dur-fast) var(--ease); }
.product-card__fav:hover svg { fill: var(--color-pink); }
.product-card__fav:active svg { transform: scale(.9); }
.product-card__fav[aria-pressed="true"] { opacity: 1; color: var(--color-red); }
.product-card__fav[aria-pressed="true"] svg { fill: var(--color-red); }
.product-card__fav.is-pop svg { animation: fav-pop 320ms var(--ease); }
@keyframes fav-pop { 40% { transform: scale(1.25); } }

.product-card__buy {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 2;
  width: 100%; border-radius: var(--radius-card-btn);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 220ms var(--ease-fade), transform 220ms var(--ease-fade), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.product-card__buy:disabled { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: none; }
.product-card__buy-icon { display: none; }
.product-card__buy.is-added .product-card__buy-icon { display: block; }
/* «мостик»: курсор не теряет карточку по пути к кнопке */
.product-card::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 52px; z-index: 1; }

@media (hover: hover) {
  .product-card:hover .product-card__fav, .product-card:focus-within .product-card__fav { opacity: 1; }
  .product-card:hover .product-card__buy, .product-card:focus-within .product-card__buy { opacity: var(--dim); transform: none; pointer-events: auto; }
  /* место под кнопку внутри скролл-контейнера; вёрстка ниже не сдвигается */
  .carousel--products .carousel__viewport { padding-bottom: 56px; margin-bottom: -56px; }
}
@media (hover: none) {
  .product-card__fav { opacity: 1; }
  .product-card__buy, .product-card::after { display: none; }
}

.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.price__current--sale { color: var(--text-sale); }
.price__old { color: var(--text-muted); text-decoration: line-through; }
.price--lg .price__current { font-size: var(--fs-16); line-height: var(--lh-16); }
.price--lg .price__old { font-size: var(--fs-14); }

/* ---------- 8. Subscription promo ---------- */
.subscribe-promo { margin-top: 133px; padding: 75px 0 78px; background: var(--bg-subscription); }
.subscribe-promo .section-title { margin-bottom: 13px; }
.subscribe-promo__lead { max-width: 1200px; margin: 0 auto 34px; font-size: var(--fs-16); line-height: var(--lh-16); text-align: center; }
.subs-card {
  display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 32px;
  width: 100%; max-width: 1072px; margin: 0 auto; padding: 32px;
  background: var(--bg-surface); border-radius: var(--radius-s);
}
.subs-card__media { position: relative; aspect-ratio: 460 / 576; overflow: hidden; background: var(--bg-surface); }
.subs-card__video, .subs-card__img { width: 100%; height: 100%; object-fit: cover; }
.subs-card__img[hidden], .subs-card__video[hidden] { display: none; }
.subs-card__info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* смена товара: быстро гаснет (250ms), мягко проявляется (450ms) */
.subs-card__product, .subs-card__media > :is(video, img) { transition: opacity 450ms var(--ease-fade), transform 450ms var(--ease-fade); }
.subs-card.is-switching .subs-card__product, .subs-card.is-switching .subs-card__media > :is(video, img) { opacity: 0; transition-duration: 250ms; }
.subs-card.is-switching .subs-card__product { transform: translateY(6px); }
.subs-card__name { margin-top: 4px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); }
.subs-card__name a { transition: color var(--dur-fast); }
.subs-card__name a:hover { color: var(--text-secondary); }
.subs-card__desc { margin-top: 3px; color: var(--text-secondary); }
.subs-card__price { margin-top: 16px; }
.benefits { display: grid; gap: 20px; margin-top: 41px; }
.benefits li { display: flex; align-items: flex-start; gap: 14px; padding-left: 4px; }
.benefits .icon { width: 12px; height: 18px; }
.subs-card__actions { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; column-gap: 24px; row-gap: 22px; margin-top: 30px; }
.subs-card__cta { font-size: var(--fs-16); line-height: var(--lh-16); }
.subs-card__note { grid-column: 2; color: var(--text-secondary); text-align: center; }

/* ---------- 9. Steps ---------- */
.steps { margin-top: 75px; }
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step__img { width: 100%; aspect-ratio: 2987 / 3215; object-fit: cover; }
.step__num { width: 40px; height: 40px; margin-top: 24px; }
.step__title { margin-top: 6px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.step__text { margin-top: 4px; }

/* ---------- 10. Categories ---------- */
.categories { margin-top: 157px; }
.categories__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.category-card { display: block; }
.category-card__media { display: block; aspect-ratio: 440 / 500; overflow: hidden; background: var(--bg-surface); }
.category-card__video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.category-card__label {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 22px; text-align: center; transition: color var(--dur-fast);
}
.category-card__label .icon { transition: transform var(--dur-fast) var(--ease); }
.category-card:hover .category-card__label { color: var(--text-secondary); }
.category-card:hover .category-card__label .icon { transform: translateX(3px); }
.category-card:active .category-card__label { color: var(--text-muted); }

/* ---------- 11. Stories ---------- */
.stories { margin-top: 81px; padding: 80px 0 82px; background: var(--bg-stories); }
.stories .carousel { margin-top: 50px; }
.story-card { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: var(--radius-s); overflow: hidden; background: var(--bg-surface); }
.story-card__media { position: relative; aspect-ratio: 400 / 640; overflow: hidden; background: var(--color-ink); }
.story-card__video { width: 100%; height: 100%; object-fit: cover; }
.story-card__play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.story-card__play:focus-visible { outline-offset: -3px; outline-color: var(--color-white); }
.story-card__play-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--color-white); color: var(--color-white);
  opacity: 0; transform: scale(.9); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.story-card__play:hover .story-card__play-icon, .story-card__play:focus-visible .story-card__play-icon { opacity: 1; transform: none; }
@media (hover: none) { .story-card:not(.is-playing) .story-card__play-icon { opacity: 1; transform: none; } }
.story-card.is-playing .story-card__play-icon { opacity: 0; }
.story-card__sound {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--color-white); border: 1px solid var(--color-white);
  opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur);
}
.story-card.is-playing .story-card__sound { opacity: 1; visibility: visible; }
.story-card__sound:hover { background: var(--color-white); color: var(--color-ink); }
.story-card__user {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--color-white); pointer-events: none;
}
.story-card__product {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px;
  min-height: 98px; padding: 7px 16px 6px;
  background: var(--bg-surface); transition: color var(--dur-fast);
}
.story-card__thumb { width: 56px; height: 84px; object-fit: contain; -webkit-user-drag: none; }
.story-card__info { display: flex; flex-direction: column; min-width: 0; }
.story-card__name { margin-top: 3px; }
.story-card__desc { margin-top: 4px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-card__price { margin-top: 8px; }
.story-card__product:hover .story-card__name { color: var(--text-secondary); }

/* ---------- 12. FAQ ---------- */
.faq { margin-top: 79px; padding-inline: var(--gutter); }
.faq__inner { max-width: 850px; margin: 0 auto; }
.faq__head { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; }
.faq__head .section-title { margin: 0; }
.faq__flower { flex: none; width: 48px; height: 48px; }
.accordion { margin-top: 48px; }
.accordion__item { border-bottom: 1px solid var(--border-default); }
.accordion__heading { font: inherit; }
.accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 19px 0; text-align: left;
  font-size: var(--fs-16); line-height: var(--lh-16);
  transition: padding var(--dur) var(--ease), color var(--dur-fast);
}
.accordion__btn:hover { color: var(--text-secondary); }
.accordion__btn:focus-visible { outline-offset: 2px; }
.accordion__icon { margin-right: -4px; }
.accordion__icon use { transition: none; }
.accordion__item.is-open .accordion__btn { padding-bottom: 10px; }
.accordion__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur) var(--ease), visibility var(--dur);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; visibility: visible; }
.accordion__content { overflow: hidden; min-height: 0; }
.accordion__content p { padding: 0 40px 19px 0; font-size: var(--fs-14); line-height: 20px; }

/* ---------- 13. Blog ---------- */
.blog { margin-top: 155px; }
.blog__grid { display: grid; grid-template-columns: 1.147fr repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 50px; }
.blog__list { display: contents; }
.expert__photo { width: 244px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.expert__name { margin-top: 6px; font-size: var(--fs-16); line-height: var(--lh-16); }
.expert__bio { margin-top: 12px; max-width: 490px; color: var(--text-muted); }
.article-card { position: relative; }
.article-card__media { overflow: hidden; border-radius: var(--radius-s); aspect-ratio: 1308 / 815; background: var(--bg-placeholder); }
.article-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.article-card:hover .article-card__img { transform: scale(1.03); }
.article-card__title { margin-top: 6px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); }
.article-card__link { transition: color var(--dur-fast); }
.article-card__link::after { content: ""; position: absolute; inset: 0; }
.article-card:hover .article-card__link { color: var(--text-secondary); }
.article-card__link:focus-visible { outline: none; }
.article-card:has(.article-card__link:focus-visible) { outline: 1px solid var(--focus-ring); outline-offset: 4px; }
.article-card__meta { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.article-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-card__date { margin-left: auto; color: var(--text-muted); }

/* ---------- 14. Newsletter ---------- */
.newsletter { margin-top: 159px; }
.newsletter__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.newsletter__media { position: relative; aspect-ratio: 928 / 488; overflow: hidden; border-radius: var(--radius-s); background: var(--bg-placeholder); }
.newsletter__img { width: 100%; height: 100%; object-fit: cover; }
.newsletter__ig { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; }
.ig-handle { display: inline-flex; align-items: center; gap: 8px; color: var(--color-white); transition: opacity var(--dur-fast); }
.ig-handle:hover { text-decoration: underline; text-underline-offset: 3px; }
.ig-handle:focus-visible { outline-color: var(--color-white); }
.newsletter__content { display: flex; flex-direction: column; align-items: center; padding-inline: 48px; text-align: center; }
.newsletter__title { font-size: var(--fs-32); line-height: var(--lh-32); font-weight: var(--fw-regular); }
.newsletter__accent { position: relative; display: inline-block; margin-inline: .64em; white-space: nowrap; } /* поля под овал, как в макете */
.newsletter__oval { --oval-base: 32; }
.newsletter__lead { max-width: 724px; margin-top: 30px; font-size: var(--fs-16); line-height: 22px; }
.newsletter__form { position: relative; display: flex; align-items: flex-end; gap: 24px; margin-top: 35px; }
.field { width: 300px; }
.field__input {
  width: 100%; height: 40px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0;
  background: transparent; font-size: var(--fs-14); outline: none;
  transition: border-color var(--dur-fast);
}
.field__input::placeholder { color: var(--text-secondary); opacity: 1; }
.field__input:hover { border-bottom-color: var(--color-grey-400); }
.field__input:focus { border-bottom-color: var(--border-strong); }
.field__input[aria-invalid="true"] { border-bottom-color: var(--text-sale); }
.field__input:disabled { color: var(--text-muted); }
.newsletter__btn { flex: none; min-width: 126px; }
.newsletter__form[data-state="loading"] .newsletter__btn { cursor: progress; }
.newsletter__msg {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px);
  min-height: 18px; font-size: var(--fs-12); line-height: var(--lh-12); text-align: left;
}
.newsletter__form[data-state="error"] .newsletter__msg { color: var(--text-sale); }
.newsletter__form[data-state="success"] .newsletter__msg { color: var(--text-primary); }

/* ---------- 15. Footer ---------- */
.footer { margin-top: 65px; padding-bottom: 18px; }
.footer__brand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.footer__brand::before, .footer__brand::after { content: ""; height: 1px; background: var(--border-default); }
.footer__logo img { width: 139px; height: 110px; }
.footer__slogan { margin-top: 16px; padding-inline: var(--gutter); text-align: center; text-transform: uppercase; line-height: 19px; }
.footer__main { display: flex; justify-content: space-between; gap: 32px; max-width: var(--container-max); margin: 64px auto 0; padding-inline: 100px; }
.footer__heading { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); color: var(--text-secondary); }
.footer__list { display: grid; gap: 10px; margin-top: 23px; }
.footer__list li { display: flex; }
.footer__link { transition: color var(--dur-fast); }
.footer__link:hover { color: var(--text-secondary); }
.footer__link:active { color: var(--text-muted); }
.footer__link--icon { display: inline-flex; align-items: center; gap: 6px; }
.footer__cta { max-width: 420px; }
.footer__cta-title { font-weight: var(--fw-medium); }
.footer__cta-text { margin-top: 11px; color: var(--text-secondary); }
.footer__cta-btn { margin-top: 26px; gap: 6px; }
.footer__copy { margin-top: 64px; padding-inline: var(--gutter); text-align: center; color: var(--text-secondary); }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 32px; bottom: 32px; z-index: var(--z-to-top);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease), border-color var(--dur-fast), background-color var(--dur-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--border-strong); }
.to-top:active { background: var(--btn-primary-bg); }

/* ---------- Dialogs ---------- */
dialog { padding: 0; margin: 0; border: 0; max-width: none; max-height: none; background: transparent; color: inherit; overflow: visible; }
dialog::backdrop { background: var(--overlay); opacity: 0; transition: opacity var(--dur) var(--ease); }
dialog.is-open::backdrop { opacity: .4; }
.dialog__panel { background: var(--bg-surface); }

.search-dialog { position: fixed; inset: 0 0 auto 0; width: 100%; }
.search-dialog__panel { transform: translateY(-100%); transition: transform var(--dur) var(--ease); }
.search-dialog.is-open .search-dialog__panel { transform: none; }
.search-dialog__form { display: flex; align-items: center; gap: 16px; max-width: var(--container-max); min-height: 90px; margin: 0 auto; padding: 16px var(--gutter); }
.search-dialog__icon { color: var(--text-secondary); }
.search-dialog__input {
  flex: 1; min-width: 0; height: 48px; padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--border-default); background: transparent;
  font-size: var(--fs-18); outline: none; transition: border-color var(--dur-fast);
}
.search-dialog__input::placeholder { color: var(--text-muted); opacity: 1; }
.search-dialog__input:focus { border-bottom-color: var(--border-strong); }

.drawer { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); height: 100%; height: 100dvh; }
.drawer--left { inset: 0 auto 0 0; }
.drawer__panel { display: flex; flex-direction: column; height: 100%; transform: translateX(100%); transition: transform var(--dur) var(--ease); }
.drawer--left .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--border-default); }
.drawer__title { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-regular); }
.drawer__foot { display: grid; gap: 14px; margin-top: auto; padding: 20px 24px 24px; border-top: 1px solid var(--border-default); }

.mini-cart__list { flex: 1; overflow-y: auto; padding: 0 24px; }
.mini-cart__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-default); }
.mini-cart__img { width: 64px; height: 78px; object-fit: cover; }
.mini-cart__name { display: block; margin-top: 2px; transition: color var(--dur-fast); }
.mini-cart__name:hover { color: var(--text-secondary); }
.mini-cart__meta { margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-12); line-height: var(--lh-12); }
.qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--border-default); border-radius: var(--radius-s); }
.qty__btn { display: grid; place-items: center; width: 32px; height: 32px; transition: color var(--dur-fast); }
.qty__btn:hover { color: var(--text-secondary); }
.qty__btn:disabled { color: var(--text-muted); }
.qty__value { min-width: 24px; text-align: center; }
.mini-cart__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right; }
.mini-cart__side .price { justify-content: flex-end; }
.mini-cart__remove { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast); }
.mini-cart__remove:hover { color: var(--text-primary); }
.mini-cart__total { display: flex; justify-content: space-between; font-size: var(--fs-16); line-height: var(--lh-16); }
.mini-cart__empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.mini-cart__empty[hidden], [data-cart-foot][hidden] { display: none; }

.mobile-nav { padding: 8px 24px; }
.mobile-nav__link { display: block; padding: 16px 0; border-bottom: 1px solid var(--border-default); font-size: var(--fs-16); line-height: var(--lh-16); text-transform: uppercase; transition: color var(--dur-fast); }
.mobile-nav__link:hover { color: var(--text-secondary); }
.mobile-nav__link--sale { color: var(--text-sale); }

.modal { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); }
.modal__panel {
  position: relative; max-height: inherit; overflow-y: auto; padding: 32px; border-radius: var(--radius-s);
  opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 12px; right: 12px; }
.modal__product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding-right: 32px; }
.modal__img { width: 96px; height: 118px; object-fit: cover; }
.modal__title { margin-top: 4px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-regular); }
.modal__desc { margin-top: 2px; color: var(--text-secondary); }
.purchase { display: grid; gap: 8px; margin-top: 24px; padding: 0; border: 0; min-width: 0; }
.purchase__legend { margin-bottom: 8px; padding: 0; color: var(--text-secondary); }
.purchase__option { position: relative; display: block; cursor: pointer; }
.purchase__option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.purchase__box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-s);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.purchase__price { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 8px; }
.purchase__name { display: inline-flex; align-items: center; gap: 10px; }
.purchase__name::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-grey-400); transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.purchase__option:hover .purchase__box { border-color: var(--color-grey-400); }
.purchase__option input:checked + .purchase__box { border-color: var(--border-strong); background: var(--bg-subscription); }
.purchase__option input:checked + .purchase__box .purchase__name::before { border-color: var(--border-strong); box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 7px var(--color-ink); }
.purchase__option input:focus-visible + .purchase__box { outline: 1px solid var(--focus-ring); outline-offset: 2px; }
.select-field { display: grid; gap: 6px; margin: 16px 0 24px; }
.select-field__label { color: var(--text-secondary); }
.select-field__control {
  height: 48px; padding: 0 40px 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-s);
  appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--bg-surface);
  transition: border-color var(--dur-fast);
}
.select-field { position: relative; }
.select-field::after {
  content: ""; position: absolute; right: 12px; bottom: 14px; width: 20px; height: 20px; pointer-events: none;
  background: var(--text-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.4 7.5L10.4 12.5L15.4 7.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.4 7.5L10.4 12.5L15.4 7.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.select-field.is-disabled::after { background: var(--text-muted); }
.select-field__control:hover { border-color: var(--color-grey-400); }
.select-field__control:focus-visible { border-color: var(--border-strong); outline-offset: 2px; }
.select-field__control:disabled { color: var(--text-muted); background: var(--color-blush); cursor: not-allowed; }
.select-field.is-disabled .select-field__label { color: var(--text-muted); }
.modal__note { margin-top: 12px; color: var(--text-secondary); text-align: center; font-size: var(--fs-12); line-height: var(--lh-12); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1439px) {
  .carousel--products { --per-view: 4; --peek: 48px; }
  .carousel--stories { --per-view: 3; --peek: 120px; }
  .footer__main { padding-inline: var(--gutter); }
  .blog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  :root { --gutter: 24px; --space-products: 140px; }
  .header__nav { display: none; }
  .header__burger { display: inline-grid; }
  .carousel--products { --per-view: 3; --peek: 48px; }
  .hero__title { font-size: 40px; line-height: 48px; }
  .hero__cta { margin-top: 40px; }
  .subs-card { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expert { grid-column: 1 / -1; display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 24px; align-content: center; }
  .expert__photo { grid-row: 1 / span 2; width: 160px; }
  .expert__name { margin-top: 0; align-self: end; }
  .expert__bio { margin-top: 6px; }
  .newsletter__content { padding-inline: 32px; }
  .footer__main { flex-wrap: wrap; justify-content: flex-start; gap: 40px 64px; }
  .footer__cta { flex-basis: 100%; }
}

@media (max-width: 1023px) {
  .carousel--stories { --per-view: 2; --peek: 96px; }
  .steps__list { gap: 16px; }
  .categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .subs-card { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .subs-card__media { aspect-ratio: 4 / 5; }
  .newsletter__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --title-gap: 28px; --space-products: 88px; }
  .announcement { font-size: var(--fs-12); line-height: var(--lh-12); }
  .header__actions { gap: 0; margin-right: -9px; }
  .hero { padding-inline: 0; }
  .hero__viewport { height: auto; background: var(--bg-page); }
  .hero__slide { height: auto; display: flex; flex-direction: column; }
  .hero__img { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; object-position: 74% 50%; }
  .hero__content { height: auto; padding: 24px var(--gutter) 8px; }
  .hero__title { font-size: var(--fs-32); line-height: var(--lh-32); }
  .hero__text { margin-top: 12px; font-size: var(--fs-16); line-height: var(--lh-16); }
  .hero__cta { margin-top: 20px; }
  .hero__dots { top: calc(75vw - 22px); bottom: auto; }
  .press { padding: 24px 0; }
  .press__group { gap: 64px; padding-right: 64px; }
  .products--first { margin-top: 48px; }
  .carousel--products { --per-view: 2; --peek: 40px; --carousel-gap: 12px; }
  .carousel--stories { --per-view: 1; --peek: 96px; --carousel-gap: 12px; }
  .subscribe-promo { margin-top: 88px; padding: 56px 0; }
  .subscribe-promo__lead { margin-bottom: 24px; font-size: var(--fs-14); line-height: 20px; }
  .subs-card { padding: 16px; gap: 20px; }
  .benefits { margin-top: 24px; gap: 12px; }
  .subs-card__actions { column-gap: 8px; margin-top: 24px; row-gap: 14px; }
  .steps { margin-top: 64px; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .step__img { aspect-ratio: 4 / 3; }
  .categories { margin-top: 88px; }
  .categories__grid { gap: 32px 12px; }
  .category-card__label { margin-top: 12px; font-size: var(--fs-12); }
  .stories { margin-top: 88px; padding: 56px 0; }
  .stories .carousel { margin-top: 28px; }
  .section-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .section-head__btn { width: 100%; }
  .section-head__title--lg { font-size: 24px; line-height: 32px; }
  .faq { margin-top: 64px; }
  .faq__head { gap: 12px; }
  .faq__head .section-title { font-size: var(--fs-16); line-height: var(--lh-16); text-align: left; }
  .faq__flower { width: 36px; height: 36px; }
  .accordion { margin-top: 24px; }
  .accordion__btn { font-size: var(--fs-14); line-height: 20px; }
  .blog { margin-top: 88px; }
  .blog__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; }
  .expert { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .expert__photo { width: 96px; }
  .newsletter { margin-top: 88px; }
  .newsletter__media { aspect-ratio: 4 / 3; }
  .newsletter__content { padding-inline: 0; }
  .newsletter__title { font-size: 24px; line-height: 32px; }
  .newsletter__lead { margin-top: 20px; font-size: var(--fs-14); line-height: 20px; }
  .newsletter__form { flex-direction: column; align-items: stretch; width: 100%; gap: 16px; margin-top: 24px; padding-bottom: 28px; }
  .field { width: 100%; }
  .newsletter__msg { top: auto; bottom: 0; }
  .footer { margin-top: 72px; }
  .footer__brand { gap: 16px; }
  .footer__logo img { width: 104px; height: 82px; }
  .footer__slogan { font-size: var(--fs-12); line-height: var(--lh-12); }
  .footer__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; margin-top: 40px; }
  .footer__cta { grid-column: 1 / -1; }
  .footer__copy { margin-top: 40px; font-size: var(--fs-12); }
  .to-top { right: 16px; bottom: 16px; }
  .modal__panel { padding: 24px 20px; }
}

@media (max-width: 479px) {
  .carousel--products { --per-view: 1; --peek: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .press.is-ready .press__track { animation: none; }
}