/* ====== Травяной двор — натурально-земляная аптекарская система ====== */
:root{
  /* палитра */
  --pergament:#f4efe2;
  --pergament-glub:#ebe3d0;
  --krem:#fbf8f0;
  --tushj:#23291f;
  --les:#2f4a32;
  --les-temn:#223a25;
  --moh:#5d7150;
  --ohra:#b5762a;
  --ohra-svet:#cf9446;
  --glina:#8c5a33;
  --tekst:#3b3a30;
  --tekst-mjagk:#6a6655;
  --liniya:rgba(47,74,50,.16);
  --liniya-svet:rgba(244,239,226,.18);

  /* шрифты */
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --proza:"Avenir Next","Segoe UI",Corbel,"Trebuchet MS",system-ui,sans-serif;

  --shir:1180px;
  --rad:14px;
  --rad-mal:8px;
  --ten:0 18px 44px -28px rgba(34,41,31,.55);
  --ten-mal:0 8px 22px -16px rgba(34,41,31,.5);
  --plavno:.45s cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--proza);
  color:var(--tekst);
  background:var(--pergament);
  background-image:
    radial-gradient(1200px 520px at 82% -8%,rgba(181,118,42,.10),transparent 60%),
    radial-gradient(900px 460px at -5% 18%,rgba(47,74,50,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(140,90,51,.022) 0 2px,transparent 2px 7px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;color:var(--tushj);margin:0}
p{margin:0}
a{color:var(--les);text-decoration:none}
a:hover{color:var(--ohra)}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--ohra);outline-offset:3px;border-radius:3px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bypass{
  position:fixed;left:14px;top:-60px;z-index:90;
  background:var(--les);color:var(--krem);padding:.7rem 1.2rem;border-radius:var(--rad-mal);
  transition:top .25s ease;font-weight:600;
}
.bypass:focus{top:14px;color:var(--krem)}

/* ====== Бренд-знак ====== */
.brandmark{display:inline-flex;align-items:center;gap:.55rem}
.brandmark__leaf{color:var(--ohra);font-size:1.45rem;line-height:1}
.brandmark__name{font-family:var(--display);font-size:1.32rem;font-weight:600;color:var(--tushj);letter-spacing:.01em;display:flex;flex-direction:column;line-height:1.02}
.brandmark__name span{font-size:.72em;letter-spacing:.34em;text-transform:uppercase;color:var(--moh);font-family:var(--proza);font-weight:600;margin-top:2px}
.brandmark--svet .brandmark__name{color:var(--krem)}
.brandmark--svet .brandmark__name span{color:var(--ohra-svet)}

/* ====== Шапка ====== */
.dvor-top{
  position:sticky;top:0;z-index:60;
  background:rgba(244,239,226,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.dvor-top.zacepilas{background:rgba(244,239,226,.96);box-shadow:var(--ten-mal);border-bottom-color:var(--liniya)}
.dvor-top__inner{max-width:var(--shir);margin:0 auto;padding:.85rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.primary-nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:1.7rem}
.nav-list a{font-size:.96rem;color:var(--tekst);font-weight:500;position:relative;padding:.2rem 0}
.nav-list a:not(.nav-list__cta)::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--ohra);transition:width var(--plavno)}
.nav-list a:not(.nav-list__cta):hover::after{width:100%}
.nav-list__cta{background:var(--les);color:var(--krem)!important;padding:.55rem 1.2rem;border-radius:999px;font-weight:600;transition:background .25s ease,transform .25s ease}
.nav-list__cta:hover{background:var(--les-temn);transform:translateY(-1px)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:"";position:absolute;left:10px;width:24px;height:2px;background:var(--tushj);border-radius:2px;transition:transform .3s ease,opacity .2s ease
}
.nav-toggle__bar{top:21px}
.nav-toggle__bar::before{top:-7px}
.nav-toggle__bar::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{transform:translateY(-7px) rotate(-45deg)}

/* ====== Кнопки ====== */
.knopka{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--proza);font-weight:600;font-size:1rem;padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;text-align:center}
.knopka--full{background:var(--les);color:var(--krem);border-color:var(--les)}
.knopka--full:hover{background:var(--les-temn);border-color:var(--les-temn);color:var(--krem);transform:translateY(-2px)}
.knopka--line{background:transparent;color:var(--les);border-color:var(--moh)}
.knopka--line:hover{background:var(--les);color:var(--krem);transform:translateY(-2px)}
.knopka--shir{width:100%}

/* ====== Заголовки разделов ====== */
.razdel-shapka{max-width:640px;margin-bottom:2.6rem}
.razdel-shapka__nad{font-family:var(--proza);text-transform:uppercase;letter-spacing:.26em;font-size:.74rem;font-weight:700;color:var(--ohra);margin-bottom:.7rem}
.razdel-shapka__h{font-size:clamp(1.9rem,4vw,2.7rem)}
.razdel-shapka__pod{margin-top:.9rem;color:var(--tekst-mjagk);font-size:1.05rem}
.razdel-shapka--svet .razdel-shapka__h,.razdel-shapka--svet .razdel-shapka__nad{color:inherit}
.razdel-shapka--svet .razdel-shapka__h{color:var(--krem)}
.razdel-shapka--svet .razdel-shapka__nad{color:var(--ohra-svet)}
.razdel-shapka--svet .razdel-shapka__pod{color:rgba(244,239,226,.78)}

/* ====== Застава (hero) ====== */
.zastava{max-width:var(--shir);margin:0 auto;padding:3.4rem 1.4rem 1rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.zastava__photo{position:relative;border-radius:var(--rad);overflow:hidden;box-shadow:var(--ten);transform:rotate(-1.1deg)}
.zastava__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(34,41,31,.22));pointer-events:none}
.zastava__photo img{width:100%;height:540px;object-fit:cover}
.zastava__eyebrow{font-family:var(--proza);text-transform:uppercase;letter-spacing:.28em;font-size:.76rem;font-weight:700;color:var(--ohra);margin-bottom:1rem}
.zastava__title{font-size:clamp(2.3rem,5.4vw,3.7rem);letter-spacing:-.01em}
.zastava__lead{margin-top:1.2rem;font-size:1.16rem;color:var(--tekst-mjagk);max-width:34ch}
.zastava__row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.zastava__marks{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.9rem;padding-top:1.5rem;border-top:1px dashed var(--liniya)}
.zastava__marks li{position:relative;padding-left:1.4rem;font-size:.95rem;color:var(--tekst)}
.zastava__marks li::before{content:"❧";position:absolute;left:0;top:-1px;color:var(--moh)}

/* ====== Кромка (статистика) ====== */
.kromka{background:var(--les-temn);color:var(--krem);
  background-image:radial-gradient(700px 300px at 110% 50%,rgba(181,118,42,.22),transparent 60%)}
.kromka__list{max-width:var(--shir);margin:0 auto;padding:2.2rem 1.4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.kromka__list li{display:flex;flex-direction:column;gap:.25rem;padding-left:1.2rem;border-left:2px solid rgba(207,148,70,.55)}
.kromka__list b{font-family:var(--display);font-size:1.85rem;font-weight:600;color:var(--krem)}
.kromka__list span{font-size:.92rem;color:rgba(244,239,226,.72)}

/* ====== Витрина (товары) ====== */
.vitrina{max-width:var(--shir);margin:0 auto;padding:4.6rem 1.4rem}
.tovary{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.tovar{background:var(--krem);border:1px solid var(--liniya);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ten-mal);transition:transform .3s ease,box-shadow .3s ease}
.tovar:hover{transform:translateY(-4px);box-shadow:var(--ten)}
.tovar__foto{overflow:hidden;aspect-ratio:4/3;background:var(--pergament-glub)}
.tovar__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tovar:hover .tovar__foto img{transform:scale(1.06)}
.tovar__telo{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tovar__metka{align-self:flex-start;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--les);background:rgba(47,74,50,.1);padding:.28rem .7rem;border-radius:999px}
.tovar__naz{font-size:1.28rem}
.tovar__opis{color:var(--tekst-mjagk);font-size:.97rem;flex:1}
.tovar__cena{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--glina);margin-top:.4rem}
.tovar__cena span{font-family:var(--proza);font-size:.88rem;font-weight:500;color:var(--tekst-mjagk)}
.vitrina__primech{margin-top:2.4rem;text-align:center;color:var(--tekst-mjagk);font-style:italic;max-width:60ch;margin-left:auto;margin-right:auto}

/* ====== Знание (травник советует) — тёмный блок ====== */
.znanie{background:var(--les);color:var(--krem);
  background-image:radial-gradient(900px 480px at 8% 0%,rgba(93,113,80,.5),transparent 60%),radial-gradient(700px 420px at 100% 100%,rgba(181,118,42,.18),transparent 60%)}
.znanie__obo{max-width:var(--shir);margin:0 auto;padding:4.6rem 1.4rem}
.zametki{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.zametka{background:rgba(244,239,226,.06);border:1px solid var(--liniya-svet);border-radius:var(--rad);padding:1.7rem 1.8rem;position:relative;overflow:hidden}
.zametka__nomer{font-family:var(--display);font-size:3.2rem;font-weight:600;color:rgba(207,148,70,.28);position:absolute;top:.6rem;right:1.1rem;line-height:1}
.zametka h3{color:var(--krem);font-size:1.24rem;margin-bottom:.6rem;max-width:18ch}
.zametka p{color:rgba(244,239,226,.82);font-size:.99rem}

/* ====== Сбор (путь) ====== */
.sbor{max-width:var(--shir);margin:0 auto;padding:4.6rem 1.4rem}
.put{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:shag}
.put__shag{background:var(--krem);border:1px solid var(--liniya);border-top:4px solid var(--ohra);border-radius:var(--rad);padding:1.7rem 1.5rem;position:relative}
.put__metka{display:inline-block;font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--ohra);margin-bottom:.7rem}
.put__shag h3{font-size:1.22rem;margin-bottom:.55rem}
.put__shag p{color:var(--tekst-mjagk);font-size:.97rem}

/* ====== Голоса (отзывы) ====== */
.golosa{background:var(--pergament-glub);
  background-image:repeating-linear-gradient(135deg,rgba(140,90,51,.03) 0 6px,transparent 6px 14px)}
.golosa .razdel-shapka{margin-left:auto;margin-right:auto;text-align:center}
.golosa .razdel-shapka__nad{color:var(--ohra)}
.golosa .razdel-shapka__h{color:var(--tushj)}
.otzyvy{max-width:var(--shir);margin:0 auto;padding:0 1.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.golosa{padding:4.4rem 0}
.otzyv{background:var(--krem);border:1px solid var(--liniya);border-radius:var(--rad);padding:1.9rem 1.8rem;box-shadow:var(--ten-mal);position:relative}
.otzyv::before{content:"\201C";font-family:var(--display);position:absolute;top:.2rem;left:1.1rem;font-size:3.4rem;color:rgba(181,118,42,.32);line-height:1}
.otzyv blockquote{margin:0;padding-top:1.4rem;font-size:1.04rem;color:var(--tekst);font-style:italic}
.otzyv figcaption{margin-top:1.1rem;font-weight:700;color:var(--les);font-size:.93rem;font-style:normal}

/* ====== Заказ ====== */
.zakaz{max-width:var(--shir);margin:0 auto;padding:4.6rem 1.4rem}
.zakaz__setka{display:grid;grid-template-columns:1.25fr .85fr;gap:2.6rem;align-items:start}
.anketa{display:grid;gap:1.1rem}
.anketa__pole{display:flex;flex-direction:column;gap:.4rem}
.anketa label{font-weight:600;font-size:.92rem;color:var(--tekst)}
.anketa input,.anketa textarea{
  font-family:var(--proza);font-size:1rem;color:var(--tekst);
  background:var(--krem);border:1.5px solid var(--liniya);border-radius:var(--rad-mal);
  padding:.75rem .9rem;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical
}
.anketa input:focus,.anketa textarea:focus{outline:none;border-color:var(--moh);box-shadow:0 0 0 3px rgba(93,113,80,.18)}
.anketa input[aria-invalid="true"],.anketa textarea[aria-invalid="true"]{border-color:#a3402d;box-shadow:0 0 0 3px rgba(163,64,45,.14)}
.anketa__oshibka{color:#a3402d;font-size:.85rem;min-height:1em}
.anketa__udacha{background:rgba(47,74,50,.1);border:1px solid var(--moh);color:var(--les-temn);padding:.8rem 1rem;border-radius:var(--rad-mal);font-weight:600}
.anketa__snoska{font-size:.84rem;color:var(--tekst-mjagk);font-style:italic}

.lavka{background:var(--les);color:var(--krem);border-radius:var(--rad);padding:2.1rem 2rem;box-shadow:var(--ten);
  background-image:radial-gradient(500px 300px at 100% 0,rgba(181,118,42,.22),transparent 60%)}
.lavka__h{color:var(--krem);font-size:1.5rem;margin-bottom:1.3rem}
.lavka__spisok{display:grid;gap:1.1rem}
.lavka__spisok li{display:grid;gap:.2rem;padding-bottom:1rem;border-bottom:1px solid var(--liniya-svet)}
.lavka__spisok li:last-child{border-bottom:0;padding-bottom:0}
.lavka__klyuch{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--ohra-svet)}
.lavka__spisok span:not(.lavka__klyuch){color:rgba(244,239,226,.92);font-size:.98rem}
.lavka a{color:var(--krem);text-decoration:underline;text-decoration-color:rgba(207,148,70,.6)}
.lavka a:hover{color:var(--ohra-svet)}
.lavka__zametka{margin-top:1.4rem;font-size:.92rem;color:rgba(244,239,226,.78);font-style:italic}

/* ====== Подвал ====== */
.podval{background:var(--les-temn);color:rgba(244,239,226,.8);padding:3.4rem 0 1.6rem}
.podval__inner{max-width:var(--shir);margin:0 auto;padding:0 1.4rem;display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:2.2rem}
.podval__brend p{margin-top:1rem;font-size:.95rem;max-width:38ch;color:rgba(244,239,226,.72)}
.podval h4{color:var(--krem);font-size:1rem;margin-bottom:.9rem;font-family:var(--proza);text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.podval__nav li{margin-bottom:.55rem}
.podval__nav a,.podval__kontakt a{color:rgba(244,239,226,.82)}
.podval__nav a:hover,.podval__kontakt a:hover{color:var(--ohra-svet)}
.podval__kontakt p{font-size:.95rem;line-height:1.9}
.podval__niz{max-width:var(--shir);margin:2.6rem auto 0;padding:1.5rem 1.4rem 0;border-top:1px solid var(--liniya-svet);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between;font-size:.85rem;color:rgba(244,239,226,.6)}

/* ====== Анимации появления ====== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.vidno{opacity:1;transform:none}
.tovary .reveal:nth-child(2){transition-delay:.07s}
.tovary .reveal:nth-child(3){transition-delay:.14s}
.zametki .reveal:nth-child(2){transition-delay:.07s}
.put .reveal:nth-child(2){transition-delay:.07s}
.put .reveal:nth-child(3){transition-delay:.14s}
.put .reveal:nth-child(4){transition-delay:.21s}
.otzyvy .reveal:nth-child(2){transition-delay:.08s}
.otzyvy .reveal:nth-child(3){transition-delay:.16s}

/* staggered-reveal заставы при загрузке */
.reveal-stage .rise{opacity:0;transform:translateY(20px);animation:risein .8s cubic-bezier(.2,.7,.2,1) forwards}
.reveal-stage .rise[data-step="1"]{animation-delay:.12s}
.reveal-stage .rise[data-step="2"]{animation-delay:.24s}
.reveal-stage .rise[data-step="3"]{animation-delay:.38s}
.reveal-stage .rise[data-step="4"]{animation-delay:.52s}
.reveal-stage .rise[data-step="5"]{animation-delay:.66s}
@keyframes risein{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stage .rise{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}

/* ====== Адаптив ====== */
@media (max-width:980px){
  .zastava{grid-template-columns:1fr;gap:2rem;padding-top:2.4rem}
  .zastava__photo{transform:none;order:-1}
  .zastava__photo img{height:380px}
  .zastava__lead{max-width:none}
  .kromka__list{grid-template-columns:repeat(2,1fr);gap:1.4rem 1.2rem}
  .tovary{grid-template-columns:repeat(2,1fr)}
  .put{grid-template-columns:repeat(2,1fr)}
  .otzyvy{grid-template-columns:1fr;max-width:640px}
  .zakaz__setka{grid-template-columns:1fr;gap:2rem}
  .podval__inner{grid-template-columns:1fr 1fr}
  .podval__brend{grid-column:1 / -1}
}
@media (max-width:680px){
  .nav-toggle{display:block}
  .nav-list{
    position:absolute;top:100%;right:0;left:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--krem);box-shadow:var(--ten);
    border-top:1px solid var(--liniya);
    padding:.4rem 1.4rem 1.2rem;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .35s ease,visibility 0s linear .35s,padding .2s ease
  }
  .nav-list.raskryto{max-height:420px;visibility:visible;transition:max-height .4s ease,visibility 0s;padding-top:.8rem}
  .nav-list li{border-bottom:1px solid var(--liniya)}
  .nav-list li:last-child{border-bottom:0}
  .nav-list a{display:block;padding:.95rem .2rem}
  .nav-list__cta{text-align:center;margin-top:.8rem;padding:.8rem 1.2rem}
  .nav-list a:not(.nav-list__cta)::after{display:none}
  .tovary{grid-template-columns:1fr}
  .zametki{grid-template-columns:1fr}
  .put{grid-template-columns:1fr}
  .zastava__row .knopka{flex:1}
}
@media (max-width:430px){
  .kromka__list{grid-template-columns:1fr}
}