/* Отключаем кросс-документные View Transitions на главной (гасит реджект «Transition was skipped») */
@view-transition{navigation:none}

.hp{display:grid;gap:28px}
.hp-visual{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-md);border:1px solid var(--hairline);display:block}
.hp-visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--spring)}
.hp-visual:hover img{transform:scale(1.04)}
.hp-visual .badge{position:absolute;top:16px;left:16px;z-index:2}
.hp-info .eyebrow{color:var(--amber-600)}
.hp-info h2{margin:12px 0 14px}
.hp-info h2 a:hover{color:var(--taiga-700)}
.hp-rating{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px}
.hp-price{font-family:'Montserrat';font-size:30px;font-weight:700;margin:6px 0 18px}
.hp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hp-actions{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
@media(min-width:860px){.hp{grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}}

.goals{background:var(--surface)}
.goal-chips{display:flex;gap:10px;overflow-x:auto;padding:24px 0 8px;scrollbar-width:none}
.goal-chips::-webkit-scrollbar{display:none}
.gp-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
.gp{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);display:flex;gap:14px;padding:12px;align-items:stretch;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.gp:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.gp-vis{width:88px;height:auto;min-height:110px;align-self:stretch;flex:none;border-radius:14px;overflow:hidden;background:radial-gradient(70% 70% at 50% 30%,#fff,var(--taiga-100));display:flex;align-items:center;justify-content:center}
.gp-vis img{width:100%;height:100%;object-fit:cover;object-position:center}
.gp-vis svg{height:74px}
.gp-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 2px 2px 0}
.gp-body h4{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:4px}
.gp-meta{font-size:12.5px;color:var(--muted)}
.gp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;flex-wrap:nowrap}
.gp-price{font-family:'Montserrat';font-weight:700;font-size:17px;white-space:nowrap;flex:none}
.goals .add-btn{white-space:nowrap;flex:none}
@media(min-width:640px){.gp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.gp-grid{grid-template-columns:repeat(3,1fr)}}

.story{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.story-bg{position:absolute;inset:0;z-index:-2;background:url(assets/story-lavender.webp) center/cover}
.story::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,30,.72),rgba(20,16,30,.55))}
.story-inner{padding:80px 20px;max-width:1240px;margin:0 auto}
.story-text{max-width:54ch}
.story .eyebrow{color:#E3C9D2}
.story h2{margin:14px 0 16px}
.story p{color:rgba(255,255,255,.9);max-width:46ch;margin-bottom:24px}
.story-stats{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.stat .num{font-family:'Montserrat';font-size:38px;font-weight:700;line-height:1}
.stat .lbl{font-size:13px;color:rgba(255,255,255,.78);margin-top:4px}
@media(min-width:768px){.story::after{background:linear-gradient(100deg,rgba(20,16,30,.82) 30%,rgba(20,16,30,.25) 75%)}.story-inner{padding:120px 20px}}

/* — Акцентный зелёный #085c0f (продукт месяца + подбор) — */
#hero-product .btn--primary{background:#085c0f}
#hero-product .btn--primary:hover{background:#06480b}
#hero-product .btn--ghost{color:#085c0f;border-color:#085c0f}
#hero-product .btn--ghost:hover{background:rgba(8,92,15,.08)}
#hero-product .hp-info .eyebrow{color:#085c0f}
#hero-product .hp-tags .chip:not(.chip--amber){background:rgba(8,92,15,.10);color:#085c0f}
#hero-product .acc-item.open .acc-head{color:#085c0f}
#hero-product .acc-item.open .acc-head .chev{color:#085c0f}
.goals .add-btn{background:#085c0f}
.goals .add-btn:hover{background:#06480b}
.goals .chip-btn.active{background:#085c0f;border-color:#085c0f}
/* стабильная высота: только один раздел открыт, без сдвига соседних блоков */
#hero-product .acc{min-height:206px}

/* — Подбор по цели: единый baseline карточек — */
.gp{align-items:stretch;min-height:128px}
.gp-vis{align-self:center}
.gp-body{display:flex;flex-direction:column}
.gp-body h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.gp-foot{margin-top:auto}

/* — Отзывы: аватары на одной линии — */
.proof .review{display:flex;flex-direction:column}
.proof .review .reviewer{margin-top:auto}

/* — Блок соцсетей — */
.social-hero{position:relative;isolation:isolate;border-radius:var(--r-card);overflow:hidden;color:#fff;
  min-height:clamp(380px,46vw,440px);display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;padding:clamp(28px,4vw,48px)}
.social-hero .sh-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .8s var(--spring)}
.social-hero:hover .sh-bg{transform:scale(1.04)}
.social-hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 28%,rgba(12,18,8,.5) 64%,rgba(8,13,5,.9) 100%)}
.social-hero .sh-inner{max-width:680px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.social-hero .eyebrow{color:var(--taiga-100);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.social-hero h2{margin:12px 0 14px;text-shadow:0 2px 20px rgba(0,0,0,.45);text-wrap:pretty;max-width:16ch}
.social-hero p{color:rgba(255,255,255,.94);margin-bottom:26px;font-size:clamp(15px,1.55vw,17.5px);line-height:1.6;max-width:62ch;text-shadow:0 1px 12px rgba(0,0,0,.4);text-wrap:pretty}
.social-hero .btn--primary{background:#085c0f}
.social-hero .btn--primary:hover{background:#06480b}
/* Журнал: шапка (заголовок + «Все статьи») */
.journal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
@media(max-width:560px){
  /* на телефоне — в колонку, заголовок «Знание помогает» в одну строку */
  .journal-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  #journal .journal-head h2{font-size:24px;white-space:nowrap;margin-top:6px}
}
/* Телефон: текст шире (больше слов в строке), слева-снизу с малым отступом,
   усиленный градиент для читаемости на светлых фото — как баннер «образ жизни» */
@media(max-width:560px){
  .social-hero{padding:22px 20px;min-height:clamp(360px,86vw,420px)}
  .social-hero::after{background:linear-gradient(180deg,rgba(8,13,5,.2) 0%,rgba(8,13,5,.5) 46%,rgba(8,13,5,.92) 100%)}
  .social-hero .sh-inner{max-width:100%;width:100%}
  .social-hero h2{max-width:100%;font-size:clamp(25px,8.4vw,32px)}
  .social-hero p{max-width:100%;font-size:15px;line-height:1.55}
  .social-hero .btn{align-self:flex-start}
}
.social-pop{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(12,18,8,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s var(--ease)}
.social-pop.open{opacity:1}
.social-pop[hidden]{display:none}
.sp-card{position:relative;width:min(440px,100%);background:var(--surface);border-radius:26px;
  padding:30px 26px 24px;box-shadow:var(--sh-lg);transform:translateY(14px) scale(.98);
  transition:transform .3s var(--spring);max-height:92vh;overflow-y:auto}
.social-pop.open .sp-card{transform:none}
.sp-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  font-size:22px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.sp-close:hover{background:var(--cloud)}
.sp-card .eyebrow{color:#085c0f}
.sp-card h3{font-size:22px;font-weight:600;margin:8px 0 18px;letter-spacing:-.01em}
.sp-links{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.sp-link{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1.5px solid var(--hairline);
  border-radius:var(--r-btn);font-weight:600;font-size:15.5px;transition:all .2s var(--ease)}
.sp-link:hover{border-color:#085c0f;background:rgba(8,92,15,.05);transform:translateY(-2px)}
.sp-ic{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,92,15,.10);color:#085c0f}
.sp-ic svg{width:21px;height:21px}
.sp-aster{color:var(--muted);font-weight:600;margin-left:2px}
.sp-legal{font-size:10.5px;line-height:1.5;color:var(--muted)}