/* ================================================================
   Форевер Марковский — фирменные стили
   Палитра взята из разреза листа алоэ: тёмная кожура, прозрачный
   гель, песок аризонской плантации, мёд из пчелиной линейки.
   ================================================================ */

:root{
  --paper:#F1F4ED;          /* фон страницы — бледный «гель» */
  --sand:#E8DFCC;           /* песчаная полоса секций */
  --card:#FFFFFF;
  --ink:#12241D;            /* основной текст */
  --ink-soft:#4A5F56;
  --aloe:#2E6B51;           /* основной бренд-цвет */
  --aloe-deep:#1B4234;
  --aloe-light:#4E9074;
  --gel:#E2EDE3;
  --amber:#A8701A;          /* мёд — акцент и CTA */
  --amber-soft:#F0E2C6;
  --line:#D5DBCE;
  --danger:#9B3B2E;

  --r-sm:6px; --r-md:14px; --r-lg:22px;
  --shadow-1:0 1px 2px rgba(18,36,29,.06), 0 6px 18px rgba(18,36,29,.05);
  --shadow-2:0 10px 40px rgba(18,36,29,.14);
  --wrap:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}

h1,h2,h3,.display{
  font-family:"Alegreya",Georgia,"Times New Roman",serif;
  font-weight:500; line-height:1.12; letter-spacing:-.01em; margin:0;
}
h1{font-size:clamp(2.25rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.75rem)}
h3{font-size:1.2rem; font-weight:700; font-family:"Manrope",sans-serif; line-height:1.3}
em{font-style:italic; color:var(--aloe)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--aloe); display:flex; align-items:center; gap:10px; margin:0 0 14px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--amber); flex:none}
.lead{font-size:1.06rem; color:var(--ink-soft); max-width:56ch}
.muted{color:var(--ink-soft)}
.section{padding:84px 0}
.section--sand{background:var(--sand)}
.section-head{max-width:var(--wrap); margin:0 auto 34px; padding:0 22px}

/* точки-крапины листа — фирменный мотив */
.speckled{background-image:url("../img/brand/speckle.svg"); background-size:96px 96px}

/* ---------------- кнопки ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent; border-radius:999px; padding:13px 26px;
  font-weight:700; font-size:.94rem; cursor:pointer; text-decoration:none;
  transition:transform .18s var(--ease), background .18s, color .18s, border-color .18s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--aloe); color:#fff}
.btn--primary:hover{background:var(--aloe-deep)}
.btn--amber{background:var(--amber); color:#fff}
.btn--amber:hover{background:#8E5D12}
.btn--ghost{border-color:var(--aloe); color:var(--aloe); background:transparent}
.btn--ghost:hover{background:var(--gel)}
.btn--light{background:#fff; color:var(--aloe-deep)}
.btn--light:hover{background:var(--gel)}
.btn--sm{padding:9px 16px; font-size:.85rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}
:where(a,button,input,select,textarea):focus-visible{
  outline:2.5px solid var(--amber); outline-offset:2px; border-radius:var(--r-sm);
}

/* ---------------- шапка ---------------- */
.topbar{background:var(--aloe-deep); color:#D9E6DC; font-size:.82rem}
.topbar__in{display:flex; gap:22px; align-items:center; flex-wrap:wrap; padding:8px 22px;
  max-width:var(--wrap); margin:0 auto}
.topbar a{text-decoration:none; opacity:.9}
.topbar a:hover{opacity:1; text-decoration:underline}
.topbar__note{margin-left:auto; opacity:.65}

.header{position:sticky; top:0; z-index:60; background:rgba(241,244,237,.93);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.header__in{display:flex; align-items:center; gap:18px; padding:12px 22px;
  max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand img{width:42px; height:42px}
.brand__name{font-family:"Alegreya",serif; font-size:1.24rem; line-height:1.05; font-weight:600}
.brand__sub{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--aloe)}
.nav{display:flex; gap:6px; margin-left:auto}
.nav a{padding:9px 13px; border-radius:999px; text-decoration:none; font-size:.9rem; font-weight:600}
.nav a:hover{background:var(--gel); color:var(--aloe-deep)}
.header__actions{display:flex; align-items:center; gap:8px}
.cart-btn{position:relative; background:var(--aloe); color:#fff; border:0; border-radius:999px;
  padding:11px 18px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px}
.cart-btn:hover{background:var(--aloe-deep)}
.cart-btn__count{background:var(--amber); border-radius:999px; min-width:22px; height:22px;
  display:grid; place-items:center; font-size:.76rem; padding:0 6px}
.burger{display:none; background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:10px 14px; cursor:pointer; font-weight:700}

/* ---------------- герой ---------------- */
.hero{background:var(--sand); border-bottom:1px solid var(--line); overflow:hidden}
.hero__in{max-width:var(--wrap); margin:0 auto; padding:64px 22px 0;
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.hero h1{margin-bottom:18px}
.hero__lead{font-size:1.12rem; color:var(--ink-soft); max-width:46ch; margin-bottom:26px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__art{position:relative; display:grid; place-items:center; padding-bottom:26px}
.hero__art img{width:min(100%,410px); filter:drop-shadow(0 26px 42px rgba(18,36,29,.22))}
.hero__badge{position:absolute; right:0; bottom:44px; background:#fff; border-radius:var(--r-md);
  padding:13px 17px; box-shadow:var(--shadow-1); max-width:200px; font-size:.84rem; line-height:1.45}
.hero__badge b{display:block; font-family:"Alegreya",serif; font-size:1.45rem; color:var(--aloe)}

.facts{border-top:1px solid rgba(18,36,29,.12); margin-top:44px}
.facts__in{max-width:var(--wrap); margin:0 auto; padding:0 22px;
  display:grid; grid-template-columns:repeat(3,1fr)}
.fact{padding:24px 26px 26px; border-right:1px solid rgba(18,36,29,.12)}
.fact:last-child{border-right:0}
.fact__n{font-family:"Alegreya",serif; font-size:2.1rem; color:var(--aloe); line-height:1}
.fact p{margin:6px 0 0; font-size:.9rem; color:var(--ink-soft)}

/* ---------------- панель каталога ---------------- */
.catalog-bar{position:sticky; top:66px; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--line); padding:12px 0}
.catalog-bar__in{max-width:var(--wrap); margin:0 auto; padding:0 22px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.search{flex:1; min-width:210px; position:relative}
.search input{width:100%; padding:11px 15px 11px 40px; border:1px solid var(--line);
  border-radius:999px; background:#fff}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.5}
.select{padding:11px 15px; border:1px solid var(--line); border-radius:999px; background:#fff}
.pills{display:flex; gap:8px; overflow-x:auto; padding:2px; scrollbar-width:thin}
.pill{white-space:nowrap; border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:9px 16px; cursor:pointer; font-size:.88rem; font-weight:600; transition:.16s var(--ease)}
.pill:hover{border-color:var(--aloe)}
.pill[aria-pressed="true"]{background:var(--aloe); border-color:var(--aloe); color:#fff}

/* ---------------- сетка товаров ---------------- */
.grid{display:grid; gap:20px; grid-template-columns:repeat(4,1fr); padding:34px 0 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--aloe-light)}
.card__media{position:relative; aspect-ratio:1/1; background:
  radial-gradient(120% 90% at 50% 8%, #FFFFFF 0%, var(--gel) 78%);
  display:grid; place-items:center; padding:16px; cursor:pointer}
.card__media img{width:100%; height:100%; object-fit:contain;
  transition:transform .35s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tags{position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; max-width:80%}
.tag{background:var(--aloe-deep); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px}
.tag--amber{background:var(--amber)}
.card__body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__name{font-weight:800; font-size:1rem; line-height:1.3}
.card__vol{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--aloe)}
.card__desc{font-size:.86rem; color:var(--ink-soft); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card__foot{display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  border-top:1px dashed var(--line); padding-top:12px; margin-top:2px}
.price{font-family:"Alegreya",serif; font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums}
.price small{display:block; font-family:"Manrope",sans-serif; font-size:.72rem;
  color:var(--ink-soft); letter-spacing:.03em; margin-top:5px}
.empty{padding:70px 0; text-align:center; color:var(--ink-soft)}

/* ---------------- преимущества ---------------- */
.pros{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pro{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.pro img{width:100%; height:auto; aspect-ratio:16/11; object-fit:cover}
.pro__t{padding:18px 20px 22px}
.pro h3{margin-bottom:6px}
.pro p{margin:0; font-size:.9rem; color:var(--ink-soft)}

/* ---------------- партнёрство ---------------- */
.partner{background:var(--aloe-deep); color:#E6F0E8}
.partner__in{max-width:var(--wrap); margin:0 auto; padding:82px 22px;
  display:grid; grid-template-columns:1fr .85fr; gap:52px; align-items:start}
.partner h2{color:#fff}
.partner .eyebrow{color:#9FD0B4}
.partner .eyebrow::before{background:#9FD0B4}
.partner__quote{border-left:3px solid var(--amber); padding:6px 0 6px 18px; margin:26px 0;
  font-family:"Alegreya",serif; font-size:1.28rem; font-style:italic; color:#fff}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.chip{border:1px solid rgba(230,240,232,.35); border-radius:999px; padding:7px 14px; font-size:.85rem}
.panel{background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-2)}

/* ---------------- формы ---------------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:.8rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:#fff; transition:border-color .16s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--aloe); outline-offset:1px}
.field textarea{min-height:104px; resize:vertical}
.field--err input,.field--err textarea,.field--err select{border-color:var(--danger)}
.field__err{color:var(--danger); font-size:.78rem; margin-top:5px; display:none}
.field--err .field__err{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-note{font-size:.78rem; color:var(--ink-soft); margin:12px 0 0}

/* ---------------- контакты ---------------- */
.contacts{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
.contact-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.contact-list li{display:flex; gap:13px; align-items:flex-start}
.contact-list b{display:block; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--aloe)}
.contact-list a{text-decoration:none; font-size:1.05rem; font-weight:700}
.contact-list a:hover{color:var(--aloe)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--amber); margin-top:9px; flex:none}

/* ---------------- подвал ---------------- */
.footer{background:var(--ink); color:#B9C7BF; padding:52px 0 30px; font-size:.88rem}
.footer__in{max-width:var(--wrap); margin:0 auto; padding:0 22px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.footer h4{color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 12px}
.footer a{text-decoration:none} .footer a:hover{color:#fff}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer__legal{max-width:var(--wrap); margin:34px auto 0; padding:20px 22px 0;
  border-top:1px solid rgba(255,255,255,.13); font-size:.78rem; opacity:.75}

/* ---------------- корзина (выдвижная панель) ---------------- */
.scrim{position:fixed; inset:0; background:rgba(12,26,20,.55); opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease); z-index:80}
.scrim.is-open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100dvh; width:min(430px,100%); background:var(--paper);
  z-index:90; display:flex; flex-direction:column; transform:translateX(102%);
  transition:transform .3s var(--ease); box-shadow:var(--shadow-2)}
.drawer.is-open{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line)}
.drawer__head h3{font-family:"Alegreya",serif; font-weight:500; font-size:1.5rem}
.icon-btn{background:transparent; border:1px solid var(--line); border-radius:999px; width:38px;
  height:38px; display:grid; place-items:center; cursor:pointer; font-size:1.1rem; line-height:1}
.icon-btn:hover{background:var(--gel)}
.drawer__body{flex:1; overflow:auto; padding:16px 20px}
.drawer__foot{border-top:1px solid var(--line); padding:18px 20px; background:#fff}
.total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px}
.total b{font-family:"Alegreya",serif; font-size:1.75rem; font-variant-numeric:tabular-nums}

.line{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line)}
.line__img{width:64px; height:64px; border-radius:var(--r-md); background:var(--gel); padding:6px}
.line__img img{width:100%; height:100%; object-fit:contain}
.line__name{font-weight:700; font-size:.92rem; line-height:1.3}
.line__price{font-size:.82rem; color:var(--ink-soft)}
.qty{display:flex; align-items:center; gap:6px; margin-top:7px}
.qty button{width:27px; height:27px; border-radius:50%; border:1px solid var(--line);
  background:#fff; cursor:pointer; line-height:1; font-weight:700}
.qty button:hover{border-color:var(--aloe); color:var(--aloe)}
.qty span{min-width:22px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.line__del{background:none; border:0; color:var(--ink-soft); cursor:pointer; font-size:.78rem;
  text-decoration:underline; padding:0}
.line__del:hover{color:var(--danger)}

/* ---------------- модальные окна ---------------- */
.modal{position:fixed; inset:0; z-index:95; display:none; padding:20px; overflow:auto;
  background:rgba(12,26,20,.55); backdrop-filter:blur(3px)}
.modal.is-open{display:grid; place-items:center}
.modal__box{background:var(--paper); border-radius:var(--r-lg); width:min(660px,100%);
  box-shadow:var(--shadow-2); position:relative; animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.98)}}
.modal__head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 24px; border-bottom:1px solid var(--line)}
.modal__head h3{font-family:"Alegreya",serif; font-weight:500; font-size:1.6rem}
.modal__body{padding:22px 24px 26px}
.summary{background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; margin-bottom:18px; font-size:.9rem}
.summary__row{display:flex; justify-content:space-between; gap:12px; padding:4px 0}
.summary__row--total{border-top:1px dashed var(--line); margin-top:8px; padding-top:10px;
  font-weight:800; font-size:1.02rem}

/* быстрый просмотр товара */
.quick{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.quick__img{background:radial-gradient(120% 90% at 50% 8%, #fff 0%, var(--gel) 78%);
  border-radius:var(--r-md); padding:22px; display:grid; place-items:center}
.quick dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.88rem; margin:16px 0}
.quick dt{color:var(--ink-soft)} .quick dd{margin:0; font-weight:700}

/* успешная отправка */
.done{text-align:center; padding:8px 0 4px}
.done__mark{width:66px; height:66px; margin:0 auto 16px; border-radius:50%; background:var(--gel);
  display:grid; place-items:center; color:var(--aloe); font-size:2rem}
.steps{list-style:none; margin:20px auto 0; padding:0; max-width:400px; text-align:left; display:grid; gap:10px}
.steps li{display:flex; gap:12px; font-size:.92rem}
.steps i{font-style:normal; font-weight:800; color:var(--amber); font-variant-numeric:tabular-nums}

/* уведомления */
.toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:100;
  display:grid; gap:9px; width:min(420px,calc(100% - 32px))}
.toast{background:var(--aloe-deep); color:#fff; border-radius:var(--r-md); padding:12px 16px;
  box-shadow:var(--shadow-2); font-size:.9rem; animation:rise .28s var(--ease)}
.toast--warn{background:var(--danger)}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}

/* ---------------- адаптив ---------------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .hero__in{grid-template-columns:1fr; padding-top:48px}
  .hero__art{order:-1; padding-bottom:0}
  .hero__art img{width:min(74%,320px)}
  .hero__badge{right:6%; bottom:8px}
  .partner__in{grid-template-columns:1fr; gap:34px; padding:64px 22px}
  .contacts{grid-template-columns:1fr; gap:30px}
  .footer__in{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; padding:10px 16px 16px; gap:2px}
  .nav.is-open{display:flex}
  .burger{display:block; margin-left:auto; order:2}
  .header__actions{order:3}
  .header__in{position:relative; flex-wrap:wrap}
  .pros{grid-template-columns:1fr}
  .facts__in{grid-template-columns:1fr}
  .fact{border-right:0; border-bottom:1px solid rgba(18,36,29,.12)}
  .fact:last-child{border-bottom:0}
  .quick{grid-template-columns:1fr}
  .catalog-bar{top:62px}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr); gap:13px}
  .section{padding:58px 0}
  .card__body{padding:13px 13px 15px}
  .card__desc{display:none}
  .price{font-size:1.24rem}
  .row2{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr}
  .topbar__note{display:none}
}
@media (max-width:400px){ .grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ---------------- доводка мобильной вёрстки ---------------- */
@media (max-width:820px){
  .topbar__in{flex-wrap:nowrap; overflow-x:auto; gap:16px; scrollbar-width:none}
  .topbar__in::-webkit-scrollbar{display:none}
  .topbar a{white-space:nowrap}

  .header__in{flex-wrap:nowrap; gap:10px; padding:10px 16px}
  .brand img{width:34px; height:34px}
  .brand__name{font-size:1.02rem}
  .brand__sub{font-size:.58rem; letter-spacing:.1em}
  .burger{margin-left:auto; padding:9px 12px; font-size:.85rem}
  .cart-btn{padding:9px 13px; font-size:.85rem; gap:6px}
  .cart-btn__count{min-width:20px; height:20px; font-size:.72rem}

  /* на узком экране сначала оффер, потом иллюстрация */
  .hero__in{gap:26px; padding-top:38px}
  .hero__art{order:0; margin-top:4px}
  .hero__art img{width:min(56%,220px)}
  .hero__badge{position:static; max-width:none; width:100%; margin-top:16px;
    display:flex; align-items:baseline; gap:10px}
  .hero__badge b{display:inline; font-size:1.6rem}
}
@media (max-width:400px){
  .brand__sub{display:none}
  .brand__name{font-size:.95rem}
}

/* ---------------- выбор способа оплаты ---------------- */
.pay{border:0; padding:0; margin:4px 0 18px}
.pay legend{font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px; padding:0}
.pay__opt{display:flex; gap:12px; align-items:flex-start; background:#fff; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; margin-bottom:9px;
  transition:border-color .16s, background .16s}
.pay__opt:hover{border-color:var(--aloe-light)}
.pay__opt:has(input:checked){border-color:var(--aloe); background:var(--gel)}
.pay__opt input{margin-top:4px; accent-color:var(--aloe); width:17px; height:17px; flex:none}
.pay__opt b{display:block; font-size:.94rem}
.pay__opt small{display:block; color:var(--ink-soft); font-size:.82rem; margin-top:2px; line-height:1.4}

/* полоса ожидания оплаты */
.paywait{display:flex; gap:10px; align-items:center; justify-content:center; padding:8px 0 2px;
  color:var(--ink-soft); font-size:.9rem}
.paywait::before{content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--aloe); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================================================================
   Стили для SEO-страниц: карточка товара, категория, блог, FAQ
   ================================================================ */

/* хлебные крошки */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.83rem;
  color:var(--ink-soft); margin-bottom:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--aloe); text-decoration:underline}
.crumbs__sep{opacity:.4}
.crumbs [aria-current]{color:var(--ink); font-weight:600}

.page-head{padding:30px 0 6px; background:var(--sand); border-bottom:1px solid var(--line)}
.page-head h1{margin:6px 0 12px; font-size:clamp(1.9rem,3.6vw,2.9rem)}
.page-head .lead{margin:0 0 26px}

/* кнопки покрупнее для страниц товара */
.btn--lg{padding:15px 30px; font-size:1rem}

/* карточка товара */
.product{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.product__media{background:radial-gradient(120% 90% at 50% 8%, #fff 0%, var(--gel) 78%);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; display:grid; place-items:center}
.product__media img{width:100%; height:auto; object-fit:contain}
.product__info h1{margin-bottom:12px}
.product__price{display:flex; flex-wrap:wrap; align-items:baseline; gap:16px; margin:22px 0 20px}
.price--lg{font-size:2.4rem}
.product__partner{font-size:.9rem; color:var(--ink-soft)}
.product__partner b{display:block; color:var(--amber); font-size:.86rem}
.product__specs{display:grid; grid-template-columns:auto 1fr; gap:9px 20px; margin:26px 0;
  padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.92rem}
.product__specs dt{color:var(--ink-soft)}
.product__specs dd{margin:0; font-weight:700}
.product__perks{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; font-size:.92rem}
.product__perks li{display:flex; gap:10px}
.product__perks li::before{content:"—"; color:var(--amber); font-weight:800; flex:none}
.product__note{font-size:.8rem; color:var(--ink-soft); background:var(--gel);
  border-radius:var(--r-md); padding:12px 15px; margin:0}

/* длинные тексты */
.prose{max-width:74ch; font-size:1.02rem}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem); margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{margin:0 0 18px; padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--aloe); font-weight:600}
.prose--article{font-size:1.06rem; line-height:1.72}

/* частые вопросы */
.faq{max-width:76ch; display:grid; gap:10px}
.faq__item{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:0}
.faq__item summary{cursor:pointer; padding:16px 18px; font-weight:700; list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; float:right; color:var(--aloe); font-size:1.3rem; line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item p{margin:0; padding:0 18px 18px; color:var(--ink-soft); font-size:.95rem}

/* плитки категорий на /catalog/ */
.cat-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tile{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}
.tile img{width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; padding:20px;
  background:radial-gradient(120% 90% at 50% 8%, #fff 0%, var(--gel) 78%)}
.tile__t{padding:18px 20px 22px}
.tile__t h2{font-size:1.25rem; font-family:"Manrope",sans-serif; font-weight:800; margin-bottom:4px}
.tile__t p{margin:0 0 8px; color:var(--aloe); font-weight:700; font-size:.88rem}
.tile__t span{font-size:.87rem; color:var(--ink-soft)}

/* список статей */
.posts{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.post{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s}
.post:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.post time{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--aloe)}
.post h2{font-size:1.3rem; margin:8px 0 10px; font-family:"Alegreya",serif; font-weight:500}
.post p{margin:0 0 14px; color:var(--ink-soft); font-size:.92rem}
.post span{color:var(--amber); font-weight:700; font-size:.88rem}

/* ссылки-чипсы между категориями */
.chips--light .chip{border-color:var(--line); color:var(--ink)}
.chip--link{text-decoration:none; background:#fff; transition:.16s}
.chip--link:hover{border-color:var(--aloe); color:var(--aloe)}

.card__link{text-decoration:none}
.card__link:hover{color:var(--aloe)}

@media (max-width:1080px){
  .product{grid-template-columns:1fr; gap:26px}
  .cat-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .cat-tiles{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .price--lg{font-size:2rem}
  .product__media{padding:20px}
}