/* ============================================================
   Пасека Бозиень — дизайн-система «соты»
   Тон: тёплый, фермерский, премиальный. Мёд светится на тёмном,
   контент дышит на кремовом. Никакого «жёлтого цирка».
   ============================================================ */

:root{
  /* — цвет — */
  --ink:#241a0f;           /* основной текст */
  --ink-2:#5c4a34;         /* вторичный текст */
  --ink-3:#8a7a63;         /* подписи */
  --cream:#fcf8f1;         /* фон страницы */
  --cream-2:#f5ecdb;       /* поверхность-карточка */
  --cream-3:#eee0c6;       /* рамки, разделители */
  --honey:#e0a21a;         /* акцент — мёд */
  --honey-lt:#f5c451;      /* блик */
  --honey-dp:#a9700a;      /* текстовый акцент, контраст AA на креме */
  --wax:#f6e7c2;           /* воск */
  --leaf:#4a6b3a;          /* зелень луга */
  --leaf-lt:#7d9a63;
  --dark:#17110a;          /* тёмные секции */
  --dark-2:#221a10;
  --dark-3:#332616;
  --white:#fff;
  --red:#b23a2b;

  /* — типографика — */
  --f-display:'Lora',Georgia,'Times New Roman',serif;
  --f-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fs-hero:clamp(2.6rem,7vw,5.6rem);
  --fs-h1:clamp(2.1rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.65rem,3.2vw,2.6rem);
  --fs-h3:clamp(1.2rem,2vw,1.5rem);
  --fs-lead:clamp(1.05rem,1.6vw,1.3rem);
  --fs-body:clamp(1rem,1.15vw,1.09rem);
  --fs-sm:.92rem;
  --fs-xs:.8rem;

  /* — сетка и ритм — */
  --wrap:1240px;
  --wrap-narrow:820px;
  --pad:clamp(1rem,4vw,2.5rem);
  --sec:clamp(3.5rem,8vw,7rem);
  --r:14px;      /* радиус */
  --r-sm:8px;

  /* — тени — */
  --sh-1:0 2px 8px rgba(36,26,15,.06),0 12px 28px -12px rgba(36,26,15,.14);
  --sh-2:0 4px 14px rgba(36,26,15,.09),0 24px 48px -20px rgba(36,26,15,.24);
  --sh-honey:0 10px 40px -12px rgba(224,162,26,.55);

  /* — соты — */
  --hex-clip:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.65;
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg,video{max-width:100%;display:block}
.hero__media picture,.card__media picture,.gallery figure picture,.hexphoto picture,
.split__media picture{display:block;width:100%;height:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p a:not(.btn){color:var(--honey-dp);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(169,112,10,.4)}
p a:not(.btn):hover{text-decoration-color:var(--honey)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.14;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);line-height:1.25}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.3em 0}
strong,b{font-weight:700}
small{font-size:var(--fs-sm)}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:4px}
::selection{background:var(--honey);color:var(--dark)}

.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:var(--white);padding:.8rem 1.2rem;z-index:200}
.skip:focus{left:0}

/* ————— сетка ————— */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--sec)}
.sec--dark{background:var(--dark);color:#f1e6d2}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--white)}
.sec--wax{background:linear-gradient(180deg,var(--cream) 0%,var(--wax) 100%)}
.sec--cream2{background:var(--cream-2)}
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.center{text-align:center}
.mb0{margin-bottom:0}

/* ————— надзаголовок ————— */
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--honey-dp);margin-bottom:1rem;
}
.kicker::before{content:'';width:26px;height:14px;background:var(--honey);clip-path:var(--hex-clip);flex:none}
.sec--dark .kicker{color:var(--honey-lt)}
.lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:62ch}
.sec--dark .lead{color:#d9cbb2}

/* ————— кнопки ————— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-body);font-weight:700;font-size:1rem;line-height:1;
  padding:1.05rem 1.9rem;border:0;border-radius:100px;cursor:pointer;
  background:linear-gradient(135deg,var(--honey-lt),var(--honey));color:#2a1c05;
  box-shadow:var(--sh-honey);transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 44px -10px rgba(224,162,26,.7);filter:saturate(1.08)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--cream-3);box-shadow:none}
.btn--ghost:hover{border-color:var(--honey);background:rgba(224,162,26,.08);box-shadow:none}
.sec--dark .btn--ghost,.hero .btn--ghost{color:#f1e6d2;border-color:rgba(241,230,210,.38);backdrop-filter:blur(6px)}
.sec--dark .btn--ghost:hover,.hero .btn--ghost:hover{border-color:var(--honey);background:rgba(224,162,26,.18);color:var(--white)}
.btn--sm{padding:.6rem 1rem;font-size:.88rem;white-space:nowrap;box-shadow:none;background:rgba(224,162,26,.14);color:var(--honey-dp)}
.btn--sm:hover{background:var(--honey);color:#2a1c05;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ————— шапка ————— */
.hdr{position:sticky;top:0;z-index:100;background:rgba(252,248,241,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--cream-3);transition:box-shadow .3s}
.hdr.is-stuck{box-shadow:var(--sh-1)}
.hdr__in{max-width:var(--wrap);margin-inline:auto;padding:.6rem var(--pad);display:flex;align-items:center;gap:.9rem}
.logo{display:inline-flex;align-items:center;gap:.7rem;flex:none}
.logo__mark{width:34px;height:39px;flex:none;fill:var(--honey)}
.logo__mark path{fill:var(--dark)}
.logo__txt{display:flex;flex-direction:column;line-height:1.1}
.logo__txt b{font-family:var(--f-display);font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.logo__txt i{font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.nav>ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.45rem .6rem;border-radius:100px;font-size:.89rem;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover{color:var(--ink);background:rgba(224,162,26,.12)}
.nav a[aria-current]{color:var(--honey-dp);font-weight:700}
.nav__side{display:flex;align-items:center;gap:.6rem}
.lang{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--ink-3);padding:.38rem .62rem;border-radius:100px;border:1px solid var(--cream-3);white-space:nowrap}
.lang:hover{color:var(--ink);border-color:var(--honey)}
.burger{display:none;margin-left:auto;width:46px;height:46px;background:var(--cream-2);border:1px solid var(--cream-3);border-radius:50%;cursor:pointer;padding:13px 11px;flex-direction:column;justify-content:space-between;align-items:stretch;flex:none}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"]{background:var(--honey);border-color:var(--honey)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

@media (max-width:1120px){
  .burger{display:flex}
  .nav{position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--cream-3);padding:1rem var(--pad) 1.6rem;
    transform:translateY(-120%);transition:transform .35s var(--ease);box-shadow:var(--sh-2);max-height:calc(100dvh - 60px);overflow:auto}
  .nav.is-open{transform:translateY(0)}
  .nav>ul{flex-direction:column;gap:0}
  .nav a{padding:.85rem .4rem;font-size:1.06rem;border-radius:var(--r-sm)}
  .nav__side{margin-top:1rem;justify-content:space-between}
}

/* ————— hero ————— */
.hero{position:relative;min-height:min(92dvh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--dark)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,17,10,.62) 0%,rgba(23,17,10,.18) 35%,rgba(23,17,10,.72) 78%,rgba(23,17,10,.96) 100%)}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:6rem var(--pad) clamp(3rem,7vw,5.5rem)}
@media (max-width:760px){.hero{min-height:min(88dvh,720px)}.hero__in{padding-top:3.5rem;padding-bottom:5.5rem}.hero__facts{gap:.9rem 1.6rem;margin-top:1.8rem;padding-top:1.2rem}}
.hero h1{font-size:var(--fs-hero);color:var(--white);margin-bottom:.35em;max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--honey-lt);display:block}
.hero__lead{font-size:var(--fs-lead);color:#ecdfc9;max-width:52ch;margin-bottom:2rem;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero__facts{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.6rem);margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid rgba(246,231,194,.22)}
.hero__fact b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--honey-lt);line-height:1}
.hero__fact span{font-size:var(--fs-sm);color:#c9b898}
.hero__scroll{position:absolute;right:calc(var(--pad) - .4rem);bottom:1.6rem;z-index:4;color:#bda98a;font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem;writing-mode:vertical-rl}
@media (max-width:760px){.hero__scroll{display:none}}
.hero__scroll::after{content:'';width:1px;height:34px;background:linear-gradient(180deg,var(--honey),transparent);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ————— соты ————— */
.hex{position:relative;display:inline-grid;place-items:center;width:64px;height:73px;flex:none}
.hex svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--honey);opacity:.16}
.hex__in{position:relative;font-family:var(--f-display);font-weight:700;font-size:1.24rem;color:var(--honey-dp)}
.sec--dark .hex svg{fill:var(--honey);opacity:.2}
.sec--dark .hex__in{color:var(--honey-lt)}

/* сотовый паттерн фоном */
.honeycomb-bg{position:relative;isolation:isolate}
.honeycomb-bg::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23e0a21a' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M28 0L56 16v33L28 65 0 49V16z'/%3E%3Cpath d='M28 50L56 66v33L28 115 0 99V66z'/%3E%3Cpath d='M-28 50L0 66v33l-28 16-28-16V66z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 100px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
}

/* фото в сотовой маске */
.hexphoto{clip-path:var(--hex-clip);aspect-ratio:1/1.1547;overflow:hidden;background:var(--cream-3)}
.hexphoto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hexphoto:hover img{transform:scale(1.06)}

/* сотовая галерея: колонки со сдвигом */
.combgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.combgrid>*:nth-child(even){transform:translateY(min(4.5vw,42px))}
@media (max-width:560px){.combgrid{grid-template-columns:repeat(2,1fr)}}

/* сотовый разделитель секций */
.combdiv{height:34px;background-repeat:repeat-x;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' viewBox='0 0 60 34'%3E%3Cpath d='M15 0l15 8.5v17L15 34 0 25.5v-17z' fill='%23f6e7c2'/%3E%3Cpath d='M45 0l15 8.5v17L45 34 30 25.5v-17z' fill='%23eee0c6'/%3E%3C/svg%3E")}

/* ————— карточки сортов ————— */
.card{
  position:relative;background:var(--white);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  border:1px solid rgba(238,224,198,.9);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{position:absolute;top:.8rem;left:.8rem;background:rgba(23,17,10,.78);color:var(--wax);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .75rem;border-radius:100px;backdrop-filter:blur(6px)}
.card__tag--hit{background:var(--honey);color:#2a1c05}
.card__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1;gap:.2rem}
.card__body h3{margin-bottom:.2rem}
.card__ro{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.card__desc{font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:1rem}
.card__props{list-style:none;margin:0 0 1.1rem;padding:0;font-size:var(--fs-sm);color:var(--ink-2);display:grid;gap:.35rem}
.card__props li{display:flex;gap:.5rem;align-items:baseline}
.card__props b{color:var(--ink);font-weight:600;min-width:8.5em;flex:none}
.card__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.price{font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1}
.price small{display:block;font-family:var(--f-body);font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);letter-spacing:.04em;margin-top:.3rem}
.price--soon{font-size:1.05rem;color:var(--ink-3)}

/* цветовая полоска сорта */
.swatch{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:.7rem}
.swatch i{width:34px;height:14px;border-radius:100px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ————— секция «шаги» ————— */
.steps{counter-reset:s;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.step{position:relative;padding:1.6rem 1.4rem 1.5rem;background:var(--white);border-radius:var(--r);border:1px solid var(--cream-3)}
.sec--dark .step{background:var(--dark-2);border-color:var(--dark-3)}
.steps>.step::before{counter-increment:s;content:counter(s);
  position:absolute;top:-18px;left:1.3rem;width:44px;height:50px;display:grid;place-items:center;
  background:var(--honey);clip-path:var(--hex-clip);
  font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:#2a1c05}
.step h3{font-size:1.12rem}
.steps>.step h3{margin-top:1rem}
.step p{font-size:var(--fs-sm);color:var(--ink-2);margin:0}
.sec--dark .step p{color:#c9b898}

/* ————— доверие / факты ————— */
.facts{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.fact{display:flex;gap:1rem;align-items:flex-start}
.fact b{display:block;font-family:var(--f-display);font-size:1.7rem;line-height:1;color:var(--honey-dp)}
.sec--dark .fact b{color:var(--honey-lt)}
.fact span{font-size:var(--fs-sm);color:var(--ink-2)}
.sec--dark .fact span{color:#c9b898}

/* ————— цитата пчеловода ————— */
.quote{position:relative;padding:clamp(1.6rem,4vw,3rem);background:var(--dark-2);color:#efe3cd;border-radius:var(--r);overflow:hidden}
.quote::before{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:230px;background:var(--honey);opacity:.08;clip-path:var(--hex-clip)}
.quote blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.5;font-style:italic}
.quote figcaption{margin-top:1.2rem;font-size:var(--fs-sm);color:var(--honey-lt);font-weight:600}

/* ————— таблица цен ————— */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--cream-3);background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
th,td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--cream-3)}
th{background:var(--cream-2);font-weight:700;color:var(--ink);white-space:nowrap;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(224,162,26,.05)}
td b{color:var(--ink)}

/* ————— FAQ ————— */
.faq{display:grid;gap:.7rem}
details{background:var(--white);border:1px solid var(--cream-3);border-radius:var(--r-sm);overflow:hidden}
details[open]{border-color:rgba(224,162,26,.5);box-shadow:var(--sh-1)}
summary{padding:1.05rem 3rem 1.05rem 1.2rem;cursor:pointer;font-weight:600;position:relative;list-style:none;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary::after{content:'';position:absolute;right:1.2rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--honey-dp);border-bottom:2px solid var(--honey-dp);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
details>div{padding:0 1.2rem 1.2rem;color:var(--ink-2);font-size:var(--fs-sm)}
details>div>*:last-child{margin-bottom:0}

/* ————— галерея ————— */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:.7rem}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:4/3}
.gallery figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(23,17,10,.85));color:var(--wax);font-size:var(--fs-xs);opacity:0;transition:opacity .3s}
.gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:1}
@media (max-width:640px){.gallery figure:first-child{grid-column:span 2}}

/* ————— сплит: фото + текст ————— */
.split{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.split__media{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2)}
.split--rev .split__media{order:2}
@media (max-width:760px){.split--rev .split__media{order:0}}

/* ————— CTA-полоса ————— */
.cta{position:relative;overflow:hidden;background:var(--dark);color:#f1e6d2;border-radius:var(--r);padding:clamp(2rem,5vw,3.6rem)}
.cta::before{content:'';position:absolute;inset:0;opacity:.35;
  background:radial-gradient(circle at 85% 20%,rgba(224,162,26,.4),transparent 55%)}
.cta>*{position:relative}
.cta h2{color:var(--white)}

/* ————— подвал ————— */
.ftr{background:var(--dark);color:#cdbb9d;padding-top:clamp(2.6rem,6vw,4.4rem);font-size:var(--fs-sm)}
.ftr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ftr__col--brand{max-width:38ch}
.ftr h2{font-size:1rem;color:var(--white);letter-spacing:.04em;margin-bottom:1rem}
.logo--ftr .logo__txt b{color:var(--white)}
.logo--ftr .logo__mark path{fill:var(--dark)}
.logo--ftr{margin-bottom:1rem}
.ftr__nav{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ftr__nav a{color:#cdbb9d;transition:color .2s}
.ftr__nav a:hover{color:var(--honey-lt)}
.ftr__addr{color:#99866a}
.ftr__note{color:#99866a;margin:0}
.ftr__bottom{max-width:var(--wrap);margin:2.6rem auto 0;padding:1.2rem var(--pad) 5.6rem;
  border-top:1px solid rgba(205,187,157,.16);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;color:#87755b}
.ftr__bottom em{font-style:normal}

/* ————— липкая панель заказа (мобильная) ————— */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.45rem;
  padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));
  background:rgba(252,248,241,.95);backdrop-filter:blur(14px);border-top:1px solid var(--cream-3)}
.sticky__btn{flex:1;display:grid;place-items:center;padding:.8rem .4rem;border-radius:100px;font-weight:700;font-size:.88rem;
  white-space:nowrap;background:var(--cream-2);color:var(--ink);min-height:46px}
.sticky__btn--wa{background:#e7f3e5;color:#1f6b2c}
.sticky__btn--main{background:linear-gradient(135deg,var(--honey-lt),var(--honey));color:#2a1c05}
@media (max-width:760px){.sticky{display:flex}.ftr__bottom{padding-bottom:5.6rem}}
@media (min-width:761px){.ftr__bottom{padding-bottom:1.6rem}}

/* ————— появление по прокрутке ————— */
/* Контент виден по умолчанию. Прячем и анимируем ТОЛЬКО когда скрипт
   подтвердил, что умеет их показать (класс на <html>) — иначе при сбое JS
   страница осталась бы пустой. */
.has-rise .rise{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.has-rise .rise.is-in{opacity:1;transform:none}
.has-rise .rise:nth-child(2){transition-delay:.08s}
.has-rise .rise:nth-child(3){transition-delay:.16s}
.has-rise .rise:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .has-rise .rise{opacity:1;transform:none;transition:none}
  .hero__scroll::after{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ————— мелочи ————— */
.note{background:var(--wax);border-left:4px solid var(--honey);padding:1rem 1.2rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-sm);color:var(--ink-2)}
.note b{color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(74,107,58,.12);color:var(--leaf);
  font-size:var(--fs-xs);font-weight:700;padding:.35rem .7rem;border-radius:100px;letter-spacing:.04em}
.crumbs{font-size:var(--fs-xs);color:var(--ink-3);padding-block:1.2rem 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li::after{content:'/';margin-left:.4rem;color:var(--cream-3)}
.crumbs li:last-child::after{content:''}
.crumbs a:hover{color:var(--honey-dp)}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.6em}
.prose>*:first-child{margin-top:0}

/* ————— калькулятор заказа ————— */
.calc{margin-top:2.4rem;background:var(--dark-2);border:1px solid var(--dark-3);border-radius:var(--r);padding:clamp(1rem,2.5vw,1.8rem)}
.calc .tbl-wrap{border-color:var(--dark-3);background:transparent}
.calc table{color:#e6d9c1;min-width:520px}
.calc th{background:rgba(224,162,26,.1);color:var(--honey-lt);border-bottom-color:var(--dark-3)}
.calc td{border-bottom-color:rgba(205,187,157,.12)}
.calc tbody tr:hover{background:rgba(224,162,26,.06)}
.calc td b{color:var(--white)}
.calc__price{white-space:nowrap;font-weight:700;color:var(--honey-lt)}
.calc__qty{white-space:nowrap;display:flex;align-items:center;gap:.35rem}
.calc__qty button{width:32px;height:32px;border-radius:50%;border:1px solid rgba(205,187,157,.3);
  background:transparent;color:#e6d9c1;font-size:1.05rem;line-height:1;cursor:pointer;flex:none;transition:background .2s,border-color .2s}
.calc__qty button:hover{background:var(--honey);border-color:var(--honey);color:#2a1c05}
.calc__qty input{width:56px;height:32px;text-align:center;border-radius:var(--r-sm);
  border:1px solid rgba(205,187,157,.3);background:rgba(0,0,0,.24);color:var(--white);font:inherit;font-weight:700;
  -moz-appearance:textfield}
.calc__qty input::-webkit-outer-spin-button,.calc__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:1.4rem}
.calc__total{font-family:var(--f-display);font-size:1.45rem;color:var(--white);line-height:1.2}
.calc__total small{display:block;font-family:var(--f-body);font-size:var(--fs-xs);color:#a9977a;font-weight:500;margin-top:.25rem}
.calc__empty{font-family:var(--f-body);font-size:var(--fs-sm);color:#a9977a}
.calc__note{font-size:var(--fs-xs);color:#a9977a;margin:1rem 0 0;max-width:70ch}
.btn.is-off{opacity:.45;pointer-events:none;box-shadow:none}
@media (max-width:560px){.calc__foot{flex-direction:column;align-items:stretch}.calc__foot .btn{width:100%}}

/* ————— фильтр каталога ————— */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:2rem 0 0}
.filter button{padding:.55rem 1.05rem;border-radius:100px;border:1px solid var(--cream-3);background:var(--white);
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .2s var(--ease)}
.filter button:hover{border-color:var(--honey);color:var(--ink)}
.filter button.is-on{background:var(--honey);border-color:var(--honey);color:#2a1c05}

/* ============================================================
   СЛОЙ УЮТА: живые пчёлы, медовый свет, фоновые фото, стекло
   ============================================================ */

/* — летающие пчёлы — */
.bees{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.bee{position:absolute;width:clamp(24px,2.8vw,40px);height:auto;opacity:.92;
  filter:drop-shadow(0 3px 6px rgba(23,17,10,.35));will-change:transform}
.bee__wing{transform-origin:60% 70%;animation:wing .16s ease-in-out infinite alternate}
.bee__wing--b{animation-delay:.05s}
@keyframes wing{from{transform:rotate(-16deg) scaleY(1)}to{transform:rotate(14deg) scaleY(.82)}}

.bee--1{top:16%;left:6%;animation:fly1 26s linear infinite}
.bee--2{top:58%;left:-6%;animation:fly2 34s linear infinite}
.bee--3{top:34%;left:22%;animation:fly3 21s linear infinite}
.bee--4{top:72%;left:38%;animation:fly2 30s linear infinite}
@keyframes fly1{
  0%{transform:translate(0,0) rotate(6deg)}
  22%{transform:translate(32vw,-9vh) rotate(-5deg)}
  46%{transform:translate(58vw,6vh) rotate(9deg)}
  70%{transform:translate(84vw,-5vh) rotate(-3deg)}
  100%{transform:translate(96vw,4vh) rotate(5deg)}
}
@keyframes fly2{
  0%{transform:translate(0,0) rotate(-4deg) scale(.8)}
  30%{transform:translate(36vw,11vh) rotate(8deg) scale(.9)}
  55%{transform:translate(62vw,-8vh) rotate(-7deg) scale(.85)}
  80%{transform:translate(92vw,5vh) rotate(4deg) scale(.95)}
  100%{transform:translate(102vw,-3vh) rotate(-2deg) scale(.8)}
}
@keyframes fly3{
  0%{transform:translate(0,0) rotate(10deg) scale(1.1)}
  40%{transform:translate(44vw,-13vh) rotate(-9deg) scale(1)}
  75%{transform:translate(78vw,9vh) rotate(6deg) scale(1.15)}
  100%{transform:translate(88vw,-6vh) rotate(-4deg) scale(1)}
}
/* пчела, сидящая на кнопке/заголовке */
.bee--sit{position:relative;display:inline-block;width:26px;vertical-align:middle;margin-left:.35em;
  animation:sit 4.5s ease-in-out infinite}
@keyframes sit{0%,88%,100%{transform:translateY(0) rotate(0)}92%{transform:translateY(-6px) rotate(-8deg)}96%{transform:translateY(-2px) rotate(5deg)}}

/* — медовый свет и подтёки — */
/* overflow:hidden обязателен — иначе свечение с отрицательным inset
   расширяет страницу на 5 % и появляется горизонтальная прокрутка */
.glow{position:relative;isolation:isolate;overflow:hidden}
.glow::after{content:'';position:absolute;z-index:-1;inset:-10% 0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 20% 15%,rgba(245,196,81,.22),transparent 62%),
             radial-gradient(ellipse 45% 40% at 85% 75%,rgba(224,162,26,.16),transparent 60%)}
.sec--dark.glow::after{background:radial-gradient(ellipse 60% 50% at 15% 10%,rgba(245,196,81,.15),transparent 65%),
             radial-gradient(ellipse 50% 45% at 88% 80%,rgba(224,162,26,.12),transparent 62%)}

/* стекающая медовая кромка секции */
.drip{position:relative}
.drip::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:34px;z-index:2;pointer-events:none;
  background-repeat:repeat-x;background-position:top center;background-size:120px 34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 0h120v10c-8 0-10 8-18 8s-9-6-17-6-11 14-19 14-10-16-18-16-9 7-17 7-10-9-18-9-13 6-13 6z' fill='%23fcf8f1'/%3E%3C/svg%3E")}
.drip--wax::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 0h120v10c-8 0-10 8-18 8s-9-6-17-6-11 14-19 14-10-16-18-16-9 7-17 7-10-9-18-9-13 6-13 6z' fill='%23f6e7c2'/%3E%3C/svg%3E")}
.drip--dark::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 0h120v10c-8 0-10 8-18 8s-9-6-17-6-11 14-19 14-10-16-18-16-9 7-17 7-10-9-18-9-13 6-13 6z' fill='%2317110a'/%3E%3C/svg%3E")}

/* — фоновое фото секции с параллаксом — */
.bgshot{position:relative;overflow:hidden;color:#f2e7d3;isolation:isolate}
.bgshot>.bgshot__media{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.bgshot__media img{width:100%;height:100%;object-fit:cover}
.bgshot__media picture{display:block;width:100%;height:100%}
.bgshot::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,17,10,.86),rgba(23,17,10,.72) 45%,rgba(23,17,10,.9))}
.bgshot h2,.bgshot h3{color:var(--white)}
.bgshot .lead{color:#dfd0b5}

/* — стеклянные карточки поверх фото — */
.glass{background:rgba(35,26,16,.52);border:1px solid rgba(246,231,194,.18);backdrop-filter:blur(14px) saturate(1.15);
  border-radius:var(--r);padding:clamp(1.2rem,2.6vw,2rem);color:#f0e4cd;box-shadow:0 18px 50px -24px rgba(0,0,0,.8)}
.glass h3{color:var(--white)}
.glass p{color:#d6c6a9}
.glass--light{background:rgba(252,248,241,.82);border-color:rgba(224,162,26,.28);color:var(--ink)}
.glass--light p{color:var(--ink-2)}

/* — счётчики — */
.counter{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--honey);font-weight:700}
.counter-row{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));text-align:center}
.counter-row p{font-size:var(--fs-sm);color:inherit;opacity:.82;margin:.5rem 0 0}

/* — карточка сорта: медовый перелив при наведении — */
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(115deg,transparent 35%,rgba(245,196,81,.22) 50%,transparent 65%)}
.card:hover::after{opacity:1;animation:sheen 1.1s var(--ease)}
@keyframes sheen{from{transform:translateX(-40%)}to{transform:translateX(40%)}}

/* — соты как декоративная лента — */
.combstrip{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:0 0 1.4rem}
.combstrip i{width:22px;height:25px;background:var(--honey);clip-path:var(--hex-clip);opacity:.25;
  animation:pulse 3.4s ease-in-out infinite}
.combstrip i:nth-child(2){animation-delay:.25s}
.combstrip i:nth-child(3){animation-delay:.5s}
.combstrip i:nth-child(4){animation-delay:.75s}
.combstrip i:nth-child(5){animation-delay:1s}
@keyframes pulse{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.75;transform:translateY(-5px)}}

/* — раскрытие галереи по клику (лайтбокс) — */
.lb{position:fixed;inset:0;z-index:150;display:none;place-items:center;background:rgba(12,8,4,.92);backdrop-filter:blur(6px);padding:1rem}
.lb.is-open{display:grid}
.lb img{max-width:min(96vw,1400px);max-height:88dvh;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__cap{position:absolute;bottom:1.6rem;left:0;right:0;text-align:center;color:var(--wax);font-size:var(--fs-sm)}
.lb__close{position:absolute;top:1rem;right:1rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(246,231,194,.3);
  background:rgba(0,0,0,.4);color:var(--wax);font-size:1.4rem;cursor:pointer;line-height:1}
.lb__close:hover{background:var(--honey);color:#2a1c05}

/* — уютные детали — */
.ribbon{display:inline-flex;align-items:center;gap:.5rem;background:rgba(224,162,26,.14);color:var(--honey-dp);
  padding:.5rem 1rem;border-radius:100px;font-size:var(--fs-sm);font-weight:600}
.sec--dark .ribbon,.bgshot .ribbon{background:rgba(245,196,81,.16);color:var(--honey-lt)}
.paper{background-image:radial-gradient(circle at 20% 30%,rgba(224,162,26,.05),transparent 40%),
                       radial-gradient(circle at 80% 70%,rgba(74,107,58,.04),transparent 45%)}

@media (prefers-reduced-motion:reduce){
  .bee,.bee__wing,.combstrip i,.bee--sit{animation:none!important}
  .bees{display:none}
  .card:hover::after{animation:none;opacity:0}
}

/* — аккордеон на тёмном фоне — */
.sec--dark details,.bgshot details{background:rgba(35,26,16,.72);border-color:rgba(246,231,194,.16);color:#e2d4b9}
.sec--dark details[open],.bgshot details[open]{border-color:rgba(224,162,26,.55);background:rgba(35,26,16,.9)}
.sec--dark summary,.bgshot summary{color:#f4ead8}
.sec--dark summary::after,.bgshot summary::after{border-color:var(--honey-lt)}
.sec--dark details>div,.bgshot details>div{color:#c9b898}

/* — шаги: ровный ряд на широких экранах — */
@media (min-width:1080px){
  .steps{grid-template-columns:repeat(5,1fr)}
  .steps--4{grid-template-columns:repeat(4,1fr)}
  .steps--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:640px) and (max-width:1079px){
  .steps{grid-template-columns:repeat(2,1fr)}
}

/* — блок цены на странице сорта — */
.pricebox{background:var(--cream-2);border:1px solid var(--cream-3);border-radius:var(--r);padding:1.2rem 1.4rem;display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pricebox .price{margin:0}
.pricebox__list{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--ink-2);display:grid;gap:.3rem}

/* — список контактов — */
.contacts-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.1rem}
.contacts-list li{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--cream-3)}
.contacts-list span{min-width:8.5em;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.contacts-list a,.contacts-list b{font-size:1.05rem;font-weight:600;color:var(--ink)}
.contacts-list a:hover{color:var(--honey-dp)}

/* — врезка с фото внутри текста — */
.inset{margin:2.4rem 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2)}
.inset img{width:100%;height:auto}
.inset figcaption{padding:.8rem 1rem;background:var(--cream-2);font-size:var(--fs-xs);color:var(--ink-3)}
@media (min-width:1100px){.inset{margin-inline:-90px}}

/* — таблица обязательных сведений о товаре — */
.label-tbl th{width:34%;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);vertical-align:top;background:var(--cream-2)}
.label-tbl td{vertical-align:top}
@media (max-width:560px){.label-tbl,.label-tbl tbody,.label-tbl tr,.label-tbl th,.label-tbl td{display:block;width:auto}.label-tbl th{border-bottom:0;padding-bottom:.2rem}.label-tbl td{padding-top:0}}

/* — список правил — */
.rules{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.7rem}
.rules li{position:relative;padding:.9rem 1.1rem .9rem 3rem;background:var(--white);border:1px solid var(--cream-3);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.rules li::before{content:'';position:absolute;left:1.05rem;top:1.15rem;width:16px;height:18px;background:var(--honey);clip-path:var(--hex-clip)}

/* — оглавление статьи — */
.toc{background:var(--cream-2);border:1px solid var(--cream-3);border-radius:var(--r);padding:1.2rem 1.4rem;margin:2rem 0}
.toc b{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem}
.toc ol{margin:0;padding-left:1.2rem;display:grid;gap:.4rem;font-size:var(--fs-sm)}
.toc a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;transition:color .2s,text-decoration-color .2s}
.toc a:hover{color:var(--honey-dp);text-decoration-color:var(--honey)}

/* — маркированный список с сотой — */
.tick{list-style:none;padding-left:0;display:grid;gap:.55rem;margin:1.2rem 0 1.6rem}
.tick li{position:relative;padding-left:1.7rem}
.tick li::before{content:'';position:absolute;left:0;top:.55em;width:11px;height:12px;background:var(--honey);clip-path:var(--hex-clip)}

/* — таблицы внутри статьи — */
.prose .tbl-wrap{margin:1.6rem 0 2rem}
.prose table{min-width:520px}
.card__body h3 a:hover{color:var(--honey-dp)}

/* — второстепенные разделы: в мобильном меню видны списком, на десктопе скрыты — */
.nav>ul.nav__more{list-style:none;margin:0;padding:0;display:none}
@media (max-width:1120px){
  .nav>ul.nav__more{display:grid;gap:0;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--cream-3)}
  .nav__more a{display:block;padding:.7rem .4rem;font-size:.98rem;color:var(--ink-3)}
  .nav__more a:hover{color:var(--ink)}
}

/* ============================================================
   МОДЕРНИЗАЦИЯ И АДАПТИВ: планшет, широкий десктоп, альбомный телефон
   ============================================================ */

/* — широкие контейнеры и крупные экраны — */
:root{--wrap-wide:1520px}
.wrap--wide{max-width:var(--wrap-wide)}
@media (min-width:1600px){
  :root{
    --wrap:1360px;
    --fs-hero:clamp(3.4rem,5.6vw,6.2rem);
    --fs-h2:clamp(2rem,2.6vw,3rem);
    --fs-body:1.12rem;
    --sec:clamp(5rem,6vw,8rem);
  }
}
@media (min-width:1920px){
  :root{--wrap:1440px;--wrap-wide:1720px}
}

/* — планшет: ровные сетки вместо auto-fit-каши — */
@media (min-width:641px) and (max-width:1023px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .counter-row{grid-template-columns:repeat(2,1fr);gap:2.2rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .split{grid-template-columns:1fr;gap:1.8rem}
  .split--rev .split__media{order:0}
  .hero{min-height:min(74dvh,680px)}
}
@media (min-width:1024px) and (max-width:1279px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .counter-row{grid-template-columns:repeat(4,1fr)}
}

/* — телефон: всё на всю ширину, крупные цели нажатия — */
@media (max-width:480px){
  .btn{width:100%;padding:1.05rem 1.2rem}
  .btn--sm{width:auto;padding:.6rem 1rem}
  .btn-row{gap:.7rem}
  .btn-row .btn{flex:1 1 100%}
  .hero__facts{gap:1rem 1.4rem}
  .hero__fact b{font-size:1.5rem}
  .card__body{padding:1.1rem 1.1rem 1.3rem}
  .card__props b{min-width:6.5em}
  .quote{padding:1.4rem 1.2rem}
  .contacts-list li{flex-direction:column;gap:.2rem}
  .contacts-list span{min-width:0}
  .crumbs{font-size:.72rem}
  .toc ol{font-size:.88rem}
  summary{padding-right:2.6rem;font-size:.98rem}
  .filter button{padding:.6rem .9rem;font-size:.86rem;min-height:40px}
  .inset{margin-inline:calc(var(--pad) * -1);border-radius:0}
  .gallery figure:first-child{grid-column:span 2;aspect-ratio:4/3}
}
@media (max-width:380px){
  :root{--fs-hero:clamp(2.1rem,10vw,2.7rem);--pad:.9rem}
  .logo__txt b{font-size:1.02rem}
  .logo__txt i{font-size:.6rem}
  .sticky__btn{font-size:.8rem;padding:.75rem .3rem}
}

/* — альбомный телефон: hero не должен занимать три экрана — */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__in{padding-top:4.5rem;padding-bottom:3rem}
  .hero__facts{margin-top:1.2rem;padding-top:1rem}
  .sticky{position:static}
}

/* — прайс-таблица превращается в карточки на телефоне — */
@media (max-width:600px){
  .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody,.tbl-cards tr,.tbl-cards td{display:block;width:auto;min-width:0}
  .tbl-cards{min-width:0}
  .tbl-cards tr{padding:.9rem 1rem;border-bottom:1px solid var(--cream-3)}
  .tbl-cards tr:last-child{border-bottom:0}
  .tbl-cards td{border:0;padding:.2rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
  .tbl-cards td:first-child{padding-bottom:.5rem;font-size:1.05rem}
  .tbl-cards td::before{content:attr(data-th);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:none}
  .tbl-cards td:first-child::before{display:none}
  .calc .tbl-cards td{color:#e6d9c1}
  .calc .tbl-cards td::before{color:#a9977a}
  .calc .tbl-cards tr{border-bottom-color:rgba(205,187,157,.14)}
  .calc__qty{justify-content:flex-end}
}

/* — полноширинная фото-полоса между секциями — */
.strip{position:relative;height:clamp(220px,32vw,460px);overflow:hidden;background:var(--dark)}
.strip picture{display:block;width:100%;height:100%}
.strip img{width:100%;height:100%;object-fit:cover}
.strip::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,10,.35),rgba(23,17,10,.1) 40%,rgba(23,17,10,.45))}
.strip__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1rem,3vw,2.2rem) var(--pad);
  color:var(--wax);font-family:var(--f-display);font-size:clamp(1.1rem,2.4vw,1.9rem);text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* — секция-«витрина»: фото во всю ширину, текст в стекле — */
.showcase{position:relative;min-height:clamp(420px,52vw,640px);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.showcase__media{position:absolute;inset:0;z-index:-2}
.showcase__media picture{display:block;width:100%;height:100%}
.showcase__media img{width:100%;height:100%;object-fit:cover}
.showcase::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(23,17,10,.92) 0%,rgba(23,17,10,.72) 42%,rgba(23,17,10,.25) 72%,rgba(23,17,10,.35) 100%)}
.showcase__box{max-width:min(560px,92%);color:#f1e6d2;padding-block:clamp(2.4rem,6vw,4rem)}
.showcase__box h2{color:var(--white)}
.showcase__box p{color:#d9cbb2}
@media (max-width:760px){
  .showcase::before{background:linear-gradient(180deg,rgba(23,17,10,.7) 0%,rgba(23,17,10,.86) 55%,rgba(23,17,10,.94) 100%)}
  .showcase__box{max-width:100%}
}

/* — плитки-ссылки с фоновым фото — */
.tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tile{position:relative;display:grid;align-items:end;min-height:clamp(200px,26vw,280px);
  border-radius:var(--r);overflow:hidden;isolation:isolate;color:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tile:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.tile picture{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,17,10,0) 30%,rgba(23,17,10,.82) 100%)}
.tile__in{padding:1.2rem 1.3rem}
.tile__in b{display:block;font-family:var(--f-display);font-size:1.22rem;line-height:1.2;margin-bottom:.25rem}
.tile__in span{font-size:var(--fs-sm);color:#d9cbb2}

/* — «уютные» мелочи — */
.sec--tight{padding-block:clamp(2.2rem,4.5vw,3.4rem)}
.divider-wave{height:clamp(28px,4vw,52px);background:var(--cream);position:relative;margin-top:-1px}
.hdr{padding-top:env(safe-area-inset-top,0)}
@supports (height:100dvh){.hero{min-height:min(92dvh,860px)}}

/* — таблицы: аккуратный скролл-намёк — */
.tbl-wrap{position:relative}
.tbl-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.06));opacity:0;transition:opacity .3s}
@media (max-width:900px){.tbl-wrap:not(:has(.tbl-cards))::after{opacity:1}}

/* — шапка внутренней страницы с фоновым фото — */
.phero{position:relative;overflow:hidden;isolation:isolate;background:var(--dark);color:#f1e6d2;
  padding-block:clamp(2.6rem,6vw,5rem) clamp(2.4rem,5vw,4rem)}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media picture{display:block;width:100%;height:100%}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,17,10,.88),rgba(23,17,10,.72) 45%,rgba(23,17,10,.92))}
.phero h1{color:var(--white);max-width:18ch}
.phero .lead{color:#dccfb6;max-width:60ch}
.phero .crumbs{padding-top:0;margin-bottom:1.4rem;color:#b7a68a}
.phero .crumbs a{color:#d9cbb2}
.phero .crumbs a:hover{color:var(--honey-lt)}
.phero .crumbs li::after{color:rgba(183,166,138,.5)}
.phero--center{text-align:center}
.phero--center h1,.phero--center .lead{margin-inline:auto}
.phero--center .crumbs ol{justify-content:center}
.phero .btn-row{margin-top:1.8rem}
@media (max-width:560px){.phero{padding-block:2rem 1.8rem}}

/* ============================================================
   РАЗМЕРЫ И ОТСТУПЫ: один экран, крупные цели нажатия, читаемый мелкий текст
   ============================================================ */

/* — высота шапки как переменная: от неё считаем первый экран — */
:root{--hdr-h:60px}
@media (min-width:961px){:root{--hdr-h:66px}}

/* — первый экран действительно первый: hero + шапка = ровно экран — */
.hero{min-height:calc(100svh - var(--hdr-h));max-height:calc(100svh - var(--hdr-h))}
@supports not (height:100svh){.hero{min-height:calc(100vh - var(--hdr-h));max-height:none}}
.hero__in{padding-block:clamp(2rem,6vh,5rem) clamp(2.2rem,7vh,5.5rem)}
@media (max-width:560px){
  .hero{max-height:none;min-height:calc(100svh - var(--hdr-h))}
  .hero__in{padding-top:1.6rem;padding-bottom:5.4rem}
  .hero h1{font-size:clamp(2.15rem,9.2vw,3rem);margin-bottom:.5rem}
  .hero__lead{font-size:1rem;margin-bottom:1.3rem}
  .hero__facts{margin-top:1.4rem;padding-top:1.1rem;gap:.9rem 1.2rem}
  .hero__fact b{font-size:1.3rem}
  .hero__fact span{font-size:.76rem;line-height:1.3}
  .hero__scroll{display:none}
}
/* совсем низкие экраны: не втискиваем силой, даём прокрутиться */
@media (max-height:640px) and (min-width:561px){.hero{max-height:none}}

/* — шапка внутренней страницы: не больше 80% экрана — */
.phero{max-height:min(80svh,720px);display:flex;flex-direction:column;justify-content:center}
@media (max-width:560px){.phero{max-height:none;padding-block:1.6rem 1.8rem}}

/* — цели нажатия: 44 px, как требуют мобильные гайдлайны — */
.btn--sm{min-height:44px;padding:.7rem 1.15rem}
.lang{min-height:44px;display:inline-flex;align-items:center;padding-inline:.85rem}
.filter button{min-height:44px}
.calc__qty button,[data-step]{min-width:44px;min-height:44px;font-size:1.25rem;line-height:1}
.calc__qty input,[data-qty]{min-height:44px;font-size:1rem}
.sticky__btn{min-height:48px}
summary{min-height:48px;display:flex;align-items:center}
.nav a{min-height:40px;display:flex;align-items:center}
@media (max-width:960px){.nav a{min-height:48px}}
.tile,.card__media{-webkit-tap-highlight-color:rgba(224,162,26,.2)}

/* — мелкий текст: ниже 11 px не опускаемся — */
.logo__txt i{font-size:.72rem;letter-spacing:.1em}
@media (max-width:380px){.logo__txt i{font-size:.68rem}}
.card__ro,.kicker,.price small,.tile__in span,.hero__fact span{font-size:max(.74rem,11px)}
.crumbs,.ftr__bottom,.ftr__note{font-size:max(.78rem,12px)}
.strip__cap{font-size:clamp(1rem,2.2vw,1.8rem)}

/* — отступы: единый вертикальный ритм и безопасные поля — */
.wrap{padding-inline:max(var(--pad),env(safe-area-inset-left,0px))}
@media (max-width:560px){
  :root{--sec:clamp(2.6rem,7vw,3.6rem)}
  .sec{padding-block:var(--sec)}
  .grid{gap:.9rem}
  .steps{gap:1.6rem}
  .step{padding:1.5rem 1.1rem 1.2rem}
  .note{padding:.9rem 1rem}
  .quote{padding:1.3rem 1.1rem}
  .showcase{min-height:auto}
  .showcase__box{padding-block:2.2rem}
  .strip{height:clamp(180px,46vw,260px)}
  .phero .lead{font-size:1rem}
}
@media (min-width:561px) and (max-width:1023px){
  :root{--sec:clamp(3.2rem,6.5vw,5rem)}
}

/* — длинные секции получают внутренний ритм, чтобы не «ехать» бесконечно — */
.sec>.wrap>.grid+.center,.sec>.wrap>.center+.grid{margin-top:clamp(1.6rem,3.5vw,2.6rem)}

/* — картинки в сплитах не растягиваются сверх исходника — */
.split__media img,.card__media img,.gallery img{image-rendering:auto}

/* ============================================================
   ТОЧНАЯ ПОДГОНКА: первый экран, метки, цели нажатия
   ============================================================ */

/* — hero ровно в один экран: шапка ложится поверх, а не добавляет высоту — */
.hero{margin-top:calc(-1 * var(--hdr-h));padding-top:var(--hdr-h);
  min-height:100svh;max-height:none}
@supports not (height:100svh){.hero{min-height:100vh}}
.hero__in{padding-block:clamp(1.4rem,4vh,3.4rem) clamp(2rem,6vh,5rem)}
@media (max-width:560px){
  .hero__in{padding-top:1rem;padding-bottom:5rem}
}
/* низкий альбомный экран — пусть лучше прокрутится, чем сплющится */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;margin-top:0;padding-top:1rem}
}

/* — метки и подписи: не мельче 12,5 px — */
.kicker,.card__ro,.tile__in span,.hero__fact span,.price small,.swatch,.badge{font-size:max(.79rem,12.5px)}
.logo__txt i{font-size:max(.74rem,12px)}
.crumbs,.ftr__bottom,.ftr__note,.toc b,.step p,.fact span{font-size:max(.82rem,13px)}
.card__desc,.card__props,.tbl-cards td::before{font-size:max(.86rem,13.5px)}
small{font-size:max(.86rem,13.5px)}
.strip__cap{font-size:clamp(1.05rem,2.2vw,1.9rem)}

/* — логотип как цель нажатия — */
.logo{min-height:44px}

/* — подпись под фото в галерее не должна ловить нажатия — */
.gallery figcaption{pointer-events:none}

/* — кнопка «показать все» для длинных списков — */
.more-btn{display:block;margin:1.2rem auto 0;padding:.9rem 1.6rem;min-height:48px;
  background:var(--cream-2);border:1px solid var(--cream-3);border-radius:100px;
  font-family:var(--f-body);font-weight:700;font-size:.95rem;color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s}
.more-btn:hover{background:rgba(224,162,26,.12);border-color:var(--honey)}
.sec--dark .more-btn{background:var(--dark-3);border-color:rgba(246,231,194,.18);color:#f1e6d2}
.sec--dark .more-btn:hover{background:rgba(224,162,26,.18);border-color:var(--honey)}
@media (min-width:901px){.more-btn{display:none}}

/* ============================================================
   ВЕРТИКАЛЬНЫЙ РИТМ: четыре ступени вместо дюжины случайных отступов.
   Все они сжимаются на узких экранах сами.
   ============================================================ */
:root{
  --gap-1:clamp(.6rem,1.6vw,.9rem);
  --gap-2:clamp(1rem,2.6vw,1.6rem);
  --gap-3:clamp(1.4rem,3.4vw,2.1rem);
  --gap-4:clamp(1.9rem,4.6vw,2.9rem);
}
.mt1{margin-top:var(--gap-1)}
.mt2{margin-top:var(--gap-2)}
.mt3{margin-top:var(--gap-3)}
.mt4{margin-top:var(--gap-4)}
.mt0{margin-top:0}

/* — служебные классы вместо inline-стилей — */
.mi-auto{margin-inline:auto}
.jc-center{justify-content:center}
.muted{color:var(--ink-3)}
.sec--after-hero{padding-top:clamp(1.6rem,3.4vw,2.8rem)}

/* — скрытое должно быть скрыто: классы вроде .card{display:flex} перебивают
     атрибут hidden, из-за чего «свёрнутые» карточки продолжали занимать место — */
[hidden]{display:none!important}

/* — карточка сорта на телефоне: короче, без таблицы свойств
     (полные характеристики есть на странице сорта) — */
@media (max-width:560px){
  .card__media{aspect-ratio:16/10}
  .card__props{display:none}
  .card__desc{margin-bottom:.8rem}
  .card__foot{align-items:center}
  .price{font-size:1.35rem}
  .card__body{gap:0}
}
/* планшет: свойства оставляем, но компактнее */
@media (min-width:561px) and (max-width:1023px){
  .card__props{font-size:.86rem;gap:.28rem}
  .card__media{aspect-ratio:3/2}
}

/* — вся карточка сорта кликабельна: заголовок-ссылка растягивает область нажатия — */
.card{position:relative}
.card__body h3 a::after{content:'';position:absolute;inset:0;z-index:1}
.card__foot .btn,.card__media{position:relative;z-index:2}

/* — меньше пустоты сразу под шапкой страницы на телефоне — */
@media (max-width:560px){
  .sec--after-hero{padding-top:1.2rem}
  .filter{margin-bottom:.2rem}
  .phero+.sec{padding-top:1.4rem}
  .phero .crumbs{margin-bottom:1rem}
}