/* ============================================================
   Way Moz — витрина мёда из Чечни
   Палитра и типографика следуют бренд-книге:
   кремовая бумага этикетки, три цвета сортов, дидон логотипа.
   ============================================================ */

:root{
  /* Бумага и чернила */
  --paper:      #FBF4E4;   /* кремовое поле этикетки */
  --paper-2:    #F4E8CE;   /* тень на бумаге */
  --paper-3:    #EADCBC;
  --bark:       #4E2200;   /* коричневый логотипа — основной текст */
  --bark-70:    #7A5230;
  --bark-45:    #7F5D3E;
  --line:       rgba(78,34,0,.18);
  --line-soft:  rgba(78,34,0,.10);

  /* Сорта */
  --terracotta: #AA523C;   /* майский */
  --olive:      #746C1B;   /* акациевый */
  --ochre:      #C18C46;   /* подсолнечный */
  --pine:       #344532;   /* хвойный — тёмные секции */
  --pine-deep:  #263427;

  --accent:     var(--ochre);
  --on-c:       #fff;      /* цвет текста поверх цвета сорта */
  --ink-on-ochre: #3B1A00; /* на золотом белый не читается — пишем тёмным */

  /* Типографика */
  --display: 'Prata', 'Times New Roman', Georgia, serif;
  --text: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-hero: clamp(2.9rem, 7.4vw, 5.6rem);
  --fs-h2:   clamp(1.85rem, 4.2vw, 2.9rem);
  --fs-h3:   clamp(1.3rem, 2.4vw, 1.65rem);
  --fs-lead: clamp(1.06rem, 1.7vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;

  --wrap: 1240px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --r: 3px;

  --shadow: 0 1px 2px rgba(78,34,0,.05), 0 8px 26px -14px rgba(78,34,0,.25);
}

*,*::before,*::after{ box-sizing:border-box; }

/* hidden должен побеждать display из классов — иначе скрытые блоки формы видны */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; }
}

body{
  margin:0;
  background-color:var(--paper);
  /* едва заметное зерно бумаги */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  color:var(--bark);
  font-family:var(--text);
  font-size:var(--fs-body);
  line-height:1.62;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
figure,blockquote,dl,dd{ margin:0; }
a{ color:inherit; }

::selection{ background:var(--ochre); color:#fff; }

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

h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.08;
  letter-spacing:-.012em; margin:0; }
h1{ font-size:var(--fs-hero); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.2; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.prose{ max-width:62ch; }

/* ---------------------------------------------------- служебное */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--bark);
  color:var(--paper); padding:.7rem 1.2rem; }
.skip:focus{ left:.5rem; top:.5rem; }

/* ------------------------------------------- знаки бренда (маски)
   Пчела, надпись и орнамент — один SVG логотипа, обрезанный по viewBox.
   Через mask они наследуют цвет и работают на любом фоне. */
.ico{ display:block; background:currentColor; }
.ico--bee{ -webkit-mask:url(/static/img/bee.svg) center/contain no-repeat;
  mask:url(/static/img/bee.svg) center/contain no-repeat; aspect-ratio:2062/1645; }
.ico--word{ -webkit-mask:url(/static/img/wordmark.svg) center/contain no-repeat;
  mask:url(/static/img/wordmark.svg) center/contain no-repeat; aspect-ratio:3543/518; }
.ico--orn{ -webkit-mask:url(/static/img/ornament.svg) center/contain no-repeat;
  mask:url(/static/img/ornament.svg) center/contain no-repeat; aspect-ratio:2046/470; }

.orn{ width:clamp(150px,20vw,220px); opacity:.32; margin-inline:auto; }
.orn--sm{ width:110px; opacity:.28; }
.orn--light{ opacity:.45; }

/* ---------------------------------------------------- шапка */
.head{
  position:sticky; top:0; z-index:50;
  background:rgba(251,244,228,.93);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.head__in{ display:flex; align-items:center; gap:clamp(.6rem,3vw,2.4rem);
  min-height:66px; padding-block:.55rem; position:relative; }
.brand{ display:flex; align-items:center; gap:.62rem; text-decoration:none; flex:0 0 auto;
  margin-right:auto; }
.brand__bee{ width:31px; flex:0 0 auto; }
.brand__word{ width:86px; }

.nav{ display:flex; gap:clamp(.9rem,2.2vw,1.9rem); align-items:center; }
.nav a{ text-decoration:none; font-size:var(--fs-sm); font-weight:500; color:var(--bark-70);
  padding-block:.35rem; border-bottom:1.5px solid transparent; transition:color .18s, border-color .18s; }
.nav a:hover{ color:var(--bark); border-bottom-color:var(--ochre); }

/* меню для телефона: работает и без JS */
.menu{ display:none; }
.menu > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:.45rem; border:1.5px solid var(--bark); border-radius:var(--r); padding:.52rem .9rem;
  font-size:var(--fs-sm); font-weight:600; }
.menu > summary::-webkit-details-marker{ display:none; }
.menu > summary::after{ content:""; width:11px; height:7px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s; }
.menu[open] > summary::after{ transform:rotate(180deg); }
.menu[open] > summary{ background:var(--bark); color:var(--paper); }
.menu__panel{ position:absolute; left:0; right:0; top:100%; background:var(--paper);
  border-bottom:1px solid var(--line); box-shadow:0 14px 28px -18px rgba(78,34,0,.5);
  padding:.5rem var(--gut) 1rem; display:grid; }
.menu__panel a{ text-decoration:none; font-weight:500; padding:.85rem .2rem;
  border-bottom:1px solid var(--line-soft); color:var(--bark); }
.menu__panel a:last-child{ border-bottom:0; }

@media (max-width:820px){
  .nav{ display:none; }
  .menu{ display:block; }
}

.cart-btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  border:1.5px solid var(--bark); background:transparent; color:var(--bark);
  padding:.52rem .92rem; border-radius:var(--r); font-size:var(--fs-sm); font-weight:600;
  font-family:var(--text); cursor:pointer; transition:background .18s, color .18s;
}
.cart-btn:hover{ background:var(--bark); color:var(--paper); }
.cart-btn__n{ display:inline-grid; place-items:center; min-width:21px; height:21px;
  padding-inline:5px; background:var(--terracotta); color:#fff; border-radius:11px;
  font-size:.72rem; font-weight:700; line-height:1; }
.cart-btn__n[hidden]{ display:none; }

/* ---------------------------------------------------- кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--text); font-size:var(--fs-sm); font-weight:600; line-height:1.2;
  padding:.9rem 1.55rem; border-radius:var(--r); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .18s, color .18s,
  border-color .18s, transform .12s; text-align:center;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--bark); color:var(--paper); border-color:var(--bark); }
.btn--primary:hover{ background:#3B1A00; }
.btn--ghost{ border-color:var(--bark); color:var(--bark); }
.btn--ghost:hover{ background:var(--bark); color:var(--paper); }
.btn--light{ background:var(--paper); color:var(--bark); border-color:var(--paper); }
.btn--light:hover{ background:#fff; }
.btn--wide{ width:100%; }
.btn--lg{ padding:1.05rem 2rem; font-size:1rem; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.42; pointer-events:none; }

/* ---------------------------------------------------- секции */
.sec{ padding-block:clamp(3.4rem,8vw,6.5rem); }
.sec--tight{ padding-block:clamp(2.6rem,5vw,4rem); }
.sec--dark{ background:var(--pine); color:var(--paper); }
.sec--dark h2,.sec--dark h3{ color:var(--paper); }
.sec--band{ background:var(--paper-2); }

.sec__head{ margin-bottom:clamp(1.8rem,3.5vw,2.8rem); }
.sec__head p{ color:var(--bark-70); max-width:56ch; margin-top:.75rem; font-size:var(--fs-lead); }
.sec--dark .sec__head p{ color:rgba(251,244,228,.76); }

/* ---------------------------------------------------- герой ---
   Композиция этикетки: цветное поле с фото + кремовое поле с текстом */
.hero{ border-bottom:1px solid var(--line-soft); }
.hero__in{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); align-items:stretch; }
.hero__fig{ position:relative; background:var(--terracotta); overflow:hidden; min-height:clamp(340px,52vw,640px); }
.hero__fig img{ width:100%; height:100%; object-fit:cover; object-position:52% 42%; }
.hero__stamp{
  position:absolute; left:0; bottom:0; padding:.55rem 1.1rem;
  background:var(--paper); color:var(--bark-70);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.01em;
}
.hero__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.4rem,5.5vw,4.6rem) clamp(1.3rem,4.5vw,4rem);
  background:var(--paper);
}
.hero__bee{ width:clamp(46px,5vw,60px); margin-bottom:clamp(1.1rem,2.5vw,1.7rem); }
.hero h1{ margin-bottom:1.15rem; white-space:pre-line; }
.hero__lead{ font-size:var(--fs-lead); color:var(--bark-70); max-width:34ch; margin-bottom:2rem; line-height:1.55; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width:860px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__fig{ min-height:0; aspect-ratio:16/11; }
  .hero__body{ padding-block:clamp(2rem,7vw,3rem); }
}
@media (max-width:520px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
}

/* ---------------------------------------------------- обещания */
.promise{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.4rem); }
.promise__it h3{ margin-bottom:.55rem; }
.promise__it p{ color:var(--bark-70); font-size:var(--fs-sm); }
.promise__rule{ width:44px; height:2px; background:var(--accent); margin-bottom:1.05rem; }
.promise__it:nth-child(1) .promise__rule{ background:var(--terracotta); }
.promise__it:nth-child(2) .promise__rule{ background:var(--olive); }
.promise__it:nth-child(3) .promise__rule{ background:var(--ochre); }
@media (max-width:760px){ .promise{ grid-template-columns:1fr; gap:1.9rem; } }

/* ---------------------------------------------------- каталог --
   Карточка построена как этикетка: корешок с данными партии + поле */
.cat + .cat{ margin-top:clamp(2.8rem,6vw,4.4rem); }
.cat__title{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.cat__title p{ color:var(--bark-45); font-size:var(--fs-sm); margin:0; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
  gap:clamp(1.1rem,2.2vw,1.7rem); }

.card{
  --c:var(--ochre);
  position:relative; display:grid; grid-template-columns:30px 1fr;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  transition:border-color .2s, box-shadow .2s;
}
.card:hover{ border-color:rgba(78,34,0,.35);
  box-shadow:0 2px 4px rgba(78,34,0,.06), 0 16px 34px -18px rgba(78,34,0,.4); }
.card--terracotta{ --c:var(--terracotta); }
.card--olive{ --c:var(--olive); }
.card--ochre{ --c:var(--ochre); --on-c:var(--ink-on-ochre); }
.card--bark{ --c:var(--bark); }

/* корешок этикетки — вертикальная надпись, как на банке */
.card__spine{
  background:var(--c); color:var(--on-c); display:flex; align-items:center; justify-content:center;
  padding-block:1rem;
}
.card__spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.68rem; font-weight:600; letter-spacing:.08em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:100%;
  opacity:.95;
}
.card__main{ display:flex; flex-direction:column; min-width:0; }
.card__fig{ position:relative; aspect-ratio:4/5; background:var(--paper-2); overflow:hidden; display:block; }
.card__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__fig img{ transform:scale(1.035); }
.card__out{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(251,244,228,.82); font-weight:600; font-size:var(--fs-sm); color:var(--bark-70); }

.card__body{ padding:1.05rem 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.card__name{ font-family:var(--display); font-size:1.42rem; line-height:1.1; text-decoration:none; }
.card__name:hover{ color:var(--c); }
.card__sub{ font-size:var(--fs-xs); color:var(--bark-45); }
.card__foot{ margin-top:auto; padding-top:.9rem; display:flex; align-items:center;
  justify-content:space-between; gap:.7rem; }
.card__price{ font-size:1.16rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.card__price s{ display:block; font-size:.78rem; font-weight:500; color:var(--bark-45); }
.card__add{
  border:1.5px solid var(--bark); background:transparent; color:var(--bark);
  font-family:var(--text); font-size:var(--fs-xs); font-weight:600;
  padding:.55rem .85rem; border-radius:var(--r); cursor:pointer; white-space:nowrap;
  transition:background .16s,color .16s;
}
.card__add:hover{ background:var(--bark); color:var(--paper); }
.card__add.is-added{ background:var(--olive); border-color:var(--olive); color:#fff; }

/* ---------------------------------------------------- подарки */
.gift{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.6rem); align-items:center; }
.gift__fig{ aspect-ratio:5/4; overflow:hidden; border-radius:var(--r); }
.gift__fig img{ width:100%; height:100%; object-fit:cover; }
.gift ul{ list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:.95rem; }
.gift li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:baseline;
  font-size:var(--fs-sm); color:rgba(251,244,228,.82); }
.gift li b{ color:var(--paper); font-weight:600; }
.gift li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ochre); }
@media (max-width:820px){ .gift{ grid-template-columns:1fr; } .gift__fig{ order:-1; } }

/* ---------------------------------------------------- о бренде */
.origin{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4.5rem); align-items:center; }
.origin__fig{ aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); }
.origin__fig img{ width:100%; height:100%; object-fit:cover; }
.parse{ display:grid; gap:.1rem; margin:1.8rem 0; }
.parse__row{ display:grid; grid-template-columns:5.2rem 1fr; gap:1.1rem; align-items:baseline;
  padding:.75rem 0; border-bottom:1px solid var(--line); }
.parse__k{ font-family:var(--display); font-size:1.5rem; color:var(--terracotta); }
.parse__row:nth-child(2) .parse__k{ color:var(--olive); }
.parse__row:nth-child(3) .parse__k{ color:var(--ochre); }
.parse__v{ font-size:var(--fs-sm); color:var(--bark-70); }
.parse__v b{ color:var(--bark); font-weight:600; }
@media (max-width:820px){ .origin{ grid-template-columns:1fr; } }

/* ---------------------------------------------------- доставка */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.4rem); }
.step{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.3rem,2.6vw,1.9rem); display:flex; flex-direction:column; }
.step h3{ font-size:1.28rem; margin-bottom:.6rem; }
.step p{ font-size:var(--fs-sm); color:var(--bark-70); }
.step dl{ margin:1.1rem 0 0; display:grid; gap:.45rem; font-size:var(--fs-sm); }
.step dl:last-child{ margin-top:auto; padding-top:1.1rem; }
.step dl div{ display:flex; justify-content:space-between; gap:1rem; padding-top:.45rem;
  border-top:1px solid var(--line-soft); }
.step dt{ color:var(--bark-45); }
.step dd{ margin:0; font-weight:600; text-align:right; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* ---------------------------------------------------- подвал */
.foot{ background:var(--bark); color:var(--paper); padding-block:clamp(2.8rem,6vw,4.4rem); }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  padding-bottom:2.4rem; border-bottom:1px solid rgba(251,244,228,.16); }
.foot__bee{ width:42px; margin-bottom:1rem; }
.foot__slogan{ font-family:var(--display); font-size:1.5rem; line-height:1.2; margin-bottom:.7rem; }
.foot p,.foot a{ color:rgba(251,244,228,.74); font-size:var(--fs-sm); }
.foot h4{ font-family:var(--text); font-size:var(--fs-sm); font-weight:600; color:var(--paper);
  margin:0 0 .9rem; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.foot a{ text-decoration:none; transition:color .16s; }
.foot a:hover{ color:var(--paper); }
.foot__bottom{ padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.7rem 1.6rem;
  justify-content:space-between; font-size:var(--fs-xs); color:rgba(251,244,228,.55); }
@media (max-width:760px){ .foot__top{ grid-template-columns:1fr; gap:2rem; } }