/* Mohana демо. Размерите са измерени от образеца при 1440 px и 390 px (dokumenti/referencia). */
@font-face{font-family:"FiraGO";src:url(fonts/firago-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"FiraGO";src:url(fonts/firago-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"FiraGO";src:url(fonts/firago-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Noto Serif";src:url(fonts/noto-serif-cyrillic-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Serif";src:url(fonts/noto-serif-latin-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:"Noto Serif";src:url(fonts/noto-serif-cyrillic-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Serif";src:url(fonts/noto-serif-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:"Noto Serif";src:url(fonts/noto-serif-cyrillic-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Serif";src:url(fonts/noto-serif-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212}

:root{
  --brown:#3c1b05;--brown-2:#61391e;--grey:#4d4d4d;--bg:#fbf9f0;--white:#fff;--beige:#ece2d8;
  --yellow:#fbf056;--green:#8bc53f;--pink:#ea004b;--sky:#b8e4fa;--line:#e8e8e8;
  --sans:"FiraGO","Fira Sans",system-ui,sans-serif;--serif:"Noto Serif",Georgia,serif;
  --sh:0 1px 2px rgba(0,0,0,.15);
  --gap:clamp(40px,5.357vw,92px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--brown);font:400 16px/1.5 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
address{font-style:normal}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:4px}
.ic{width:24px;height:24px;flex:none}
.vh,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;z-index:3000;background:var(--white);padding:10px 15px;border-radius:8px}
.nw{white-space:nowrap}

.wrap{margin-inline:6vw}
.wrap--l{margin-inline:1vw}

/* бутон */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:55px;padding:15px 24px;background:var(--yellow);border:1px solid var(--yellow);border-radius:16px;box-shadow:var(--sh);font:400 18px/22.5px var(--sans);color:var(--brown);text-align:center;transition:background-color .3s ease-out,transform .3s ease-out}
.btn:hover{background:#f5e83a}
.btn:active{transform:scale(.98)}
.round{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--brown);transition:transform .3s ease-out}
.round--l{width:53px;height:53px}
a:hover>.round,a:hover .tile__box .round{transform:scale(1.08)}
.dots{display:grid;grid-template-columns:repeat(2,8px);gap:2px;flex:none}
.dots i{width:8px;height:8px;border-radius:50%;background:#ffd400}
.dots i:nth-child(2){background:var(--sky)}.dots i:nth-child(3){background:var(--green)}.dots i:nth-child(4){background:#f4995d}

/* ---------- хедър ---------- */
.header__in{display:grid;grid-template-columns:102px 1fr auto;gap:24px;align-items:center;padding:11px 0;min-height:138px}
.logo{display:block;width:102px}
.logo img{width:102px;height:auto}
.bar{display:grid;grid-template-columns:180px 1fr 155px;gap:4px;height:72px}
.bar>*{border-radius:16px;box-shadow:var(--sh);height:72px}
.bar__cat{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--yellow);font-size:18px;line-height:22.5px;transition:background-color .3s ease-out}
.bar__cat:hover{background:#f5e83a}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px}
.burger i{height:2px;border-radius:2px;background:var(--brown);width:17px}
.burger i:first-child{width:13px}.burger i:last-child{width:9px}
.bar__search{position:relative;background:var(--white)}
.bar__search input{width:100%;height:100%;border:0;background:none;border-radius:16px;padding:0 72px 0 32px;font:400 16px var(--sans);color:var(--brown)}
.bar__search input::placeholder{color:#9a8f86}
.bar__search input:focus{outline:2px solid var(--green);outline-offset:-2px}
.bar__search-ic{position:absolute;right:32px;top:24px;pointer-events:none}
.bar__cart{display:flex;align-items:flex-end;justify-content:center;gap:8px;background:var(--white);padding:24px 24px 24px 10px}
.bar__sum{font-size:18px;line-height:22px;display:flex;align-items:baseline;gap:5px}
.bar__sum b{font-weight:400}.bar__sum small{font-size:11px}
.cart-ic{position:relative;display:block;width:24px;height:24px}
.cart-ic em{position:absolute;left:15px;top:-18px;min-width:27px;height:27px;padding:4px 8px;border-radius:16px;background:var(--green);color:var(--white);font:600 16px/19px var(--sans);font-style:normal;text-align:center}
.header__media{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.header__tel{display:flex;align-items:center;gap:12px;font:italic 300 20px/25px var(--serif);color:var(--brown-2);white-space:nowrap}
.header__tel .ic{color:var(--brown)}
.header__icons{display:flex;gap:8px}
.ico{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;transition:transform .3s ease-out}
.ico:hover{transform:scale(1.08)}
.ico .ic{width:20px;height:20px}
.ico em{position:absolute;left:21px;top:-10px;min-width:27px;height:27px;padding:4px 8px;border-radius:16px;background:var(--green);color:var(--white);font:600 14px/19px var(--sans);font-style:normal;text-align:center}
.c-mint{background:#d9f1e3}.c-yellow{background:#ffe498}.c-pink{background:#fce2ef}.c-peach{background:#ffd9ba}

/* плаваща лента: горе при скрол на компютър, долу на телефон */
.dock{position:fixed;z-index:2100;left:50%;top:32px;width:500px;height:72px;margin-left:-250px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:var(--white);border-radius:16px;box-shadow:0 10px 15px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-20px);transition:opacity .3s,transform .3s,visibility .3s}
.dock.is-on{opacity:1;visibility:visible;transform:none}
.dock__btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.dock__btn--more{display:none}
.dock .cart-ic em{font-size:14px;padding:3px 7px;top:-10px}
.kebab{display:flex;flex-direction:column;gap:4px;align-items:center}
.kebab i{width:3px;height:3px;border-radius:2px;background:var(--brown)}

/* панели */
.overlay{position:fixed;inset:0;z-index:1990;background:rgba(60,27,5,.35)}
.panel{position:fixed;z-index:2000;top:0;bottom:0;left:0;width:min(420px,100%);background:var(--white);padding:0 24px 24px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 10px 15px rgba(0,0,0,.1)}
#panel-cart{left:auto;right:0;width:min(620px,100%);border-radius:16px 0 0 16px;display:flex;flex-direction:column}
#panel-cart[hidden],.panel[hidden]{display:none}
.panel__top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 12px;background:var(--white)}
.panel__title{font:italic 300 24px/28.8px var(--serif)}
.panel__x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px}
.panel__list{display:flex;flex-direction:column}
.panel__link{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--beige);font:italic 300 20px/24px var(--serif)}
.panel__link .ic{width:20px;height:20px;color:var(--brown-2)}
.panel__link:hover{color:var(--pink)}
.menu__tel{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:4px 0 12px;font:italic 300 20px/25px var(--serif);color:var(--brown-2)}
.menu{display:flex;flex-direction:column;gap:8px}
.menu hr{width:100%;border:0;border-top:1px solid var(--beige);margin:12px 0}
.menu__link{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px;border:1px solid var(--beige);border-radius:16px;font:italic 300 20px/24px var(--serif)}
.menu__link i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}
.panel__search input{width:100%;height:56px;border:1px solid var(--green);border-radius:16px;padding:0 20px;font:400 16px var(--sans);color:var(--brown);background:var(--white)}
.results{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:var(--white);border-radius:16px;box-shadow:0 10px 15px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.1);padding:8px;max-height:60vh;overflow-y:auto}
.results--in{position:static;box-shadow:none;padding:8px 0;max-height:none}
.results[hidden]{display:none}
.results a,.results p{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:10px;font-size:15px;line-height:20px}
.results a:hover,.results a:focus-visible{background:var(--bg)}
.results a b{font:italic 500 16px var(--serif);white-space:nowrap}
.cart{display:flex;flex-direction:column}
.cart__item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--beige);font-size:15px;line-height:20px}
.cart__item b{font:italic 500 18px var(--serif);white-space:nowrap}
.cart__item span{color:var(--grey);white-space:nowrap}
.cart__empty{padding:12px 0;color:var(--grey)}
.cart__foot{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:8px}
.cart__total{font-size:18px}.cart__total b{font:italic 500 24px var(--serif)}
.cart__note{font-size:14px;color:var(--grey)}

/* ---------- първи банер ---------- */
.hero-slider{margin-bottom:clamp(40px,3.29vw,56px)}
.hero-slider__box{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:1411/536;background:var(--line)}
.hero-slider__track{display:flex;gap:30px;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hero-slider__track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.hero-slider__nav{position:absolute;left:50%;bottom:21px;transform:translateX(-50%);display:flex;z-index:5}
.nav-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin:16px;border-radius:50%;background:var(--white);box-shadow:var(--sh);transition:transform .3s ease-out}
.nav-btn:hover{transform:scale(1.05)}
.nav-btn .ic{width:32px;height:32px}
.js-prev .ic{transform:scaleX(-1)}
.nav-ring{position:relative;display:flex}
.nav-ring>svg{position:absolute;inset:-2px;width:112px;height:112px;transform:rotate(-90deg);fill:none;stroke:var(--white);stroke-width:3;stroke-dasharray:327;stroke-dashoffset:327}
.is-playing .nav-ring>svg{animation:ring var(--hero-ms,5500ms) linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}

.hero,.wide{position:relative;display:block;height:100%;overflow:hidden;color:var(--ink);background:var(--tone)}
.hero--lav{--tone:#e6dcf5;--ink:#39235f}
.hero--mint{--tone:#d3ebde;--ink:#1c4a37}
.hero--sand{--tone:#f5e2c6;--ink:#5a3610}
.hero--sun{--tone:#f4eab4;--ink:#574500}
.hero--sky{--tone:#d8e8f3;--ink:#16364d}
.hero--photo,.wide--photo{--tone:#e9e5df;--ink:#3c1b05}
.hero--pack{--tone:#f1dfd9;--ink:#5a2b2b}
.wide--peach{--tone:#f8dcc9;--ink:#5b2408;--pop:#ee5a24}
.wide--photo{--pop:#ea4c89}
.hero__text{position:absolute;z-index:2;left:4.6%;top:13%;max-width:46%}
.hero__title{font:italic 600 clamp(30px,4.55vw,76px)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.005em}
.hero__sub{margin-top:.35em;font:italic 300 clamp(20px,2.6vw,44px)/1.2 var(--serif)}
.hero__note{margin-top:.5em;font:italic 600 clamp(13px,1.45vw,24px)/1.3 var(--serif)}
.hero__btn{display:inline-flex;align-items:center;min-height:52px;margin-top:clamp(18px,2vw,30px);padding:0 28px;border-radius:12px;background:var(--ink);color:var(--white);font:400 14px var(--sans);box-shadow:0 4px 8px rgba(0,0,0,.25);transition:transform .3s ease-out}
.hero:hover .hero__btn{transform:translateY(-2px)}
.hero__bottles{position:absolute;inset:0 -3.5% 0 0;display:flex;justify-content:flex-end;align-items:flex-end}
.hero__bottles img{width:25%;flex:none;margin:0 0 -2.5% -11.5%;mix-blend-mode:multiply}
.hero__bottles img:nth-child(2){transform:scale(1.07);transform-origin:50% 100%;z-index:1}
.hero__bottles--4 img{width:24%;margin-left:-12%}
.hero__bottles--4 img:nth-child(2){transform:none}
.hero__bottles--4 img:nth-child(3){transform:scale(1.07)}
.hero__photo{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 26%);mask-image:linear-gradient(to right,transparent,#000 26%)}
.badge{position:absolute;z-index:3;left:43.5%;top:33%;width:clamp(118px,12.2vw,200px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--white);text-align:center;transform:rotate(-7deg)}
.badge svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--pop,var(--ink))}
.badge b,.badge i{position:relative}
.badge b{font:italic 500 clamp(24px,2.5vw,40px)/1 var(--serif);white-space:nowrap}
.badge b sup{font-size:.55em;vertical-align:.6em;line-height:0}
.badge i{font:500 clamp(12px,1.1vw,18px)/1.15 var(--sans);font-style:normal;max-width:80%}

/* ---------- три плочки ---------- */
.tiles{margin-bottom:48px}
.tiles__list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tile{display:flex;align-items:center;min-height:210px}
.tile__img{position:relative;z-index:3;flex:none;width:122px;height:120px;overflow:hidden}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tile:hover .tile__img img{transform:scale(1.08)}
.tile__img--1{border-radius:58% 42% 46% 54%/52% 46% 54% 48%}
.tile__img--2{border-radius:44% 56% 52% 48%/48% 56% 44% 52%}
.tile__img--3{border-radius:52% 48% 40% 60%/56% 44% 56% 44%}
.tile__box{position:relative;z-index:2;flex:1;min-height:170px;margin:20px 0 20px -48px;padding:8px 8px 8px 60px;border-radius:24px;display:flex;flex-direction:column;justify-content:center;color:var(--white)}
.tile--green .tile__box{background:var(--green)}.tile--orange .tile__box{background:#f4995d}.tile--tan .tile__box{background:#d7a876}
.tile__box strong{font:italic 300 22px/33px var(--serif)}
.tile__box span{font-size:18px;line-height:23.4px}
.tile__box .round{position:absolute;right:8px;bottom:8px}

/* ---------- секции и слайдери ---------- */
.sec{margin-bottom:var(--gap)}
.sec-title{margin-bottom:17px}
.title{font:italic 300 clamp(32px,2.575vw,44px)/1.1 var(--serif);text-align:center;margin-inline:12px}
.subtitle{font:italic 300 clamp(24px,1.815vw,31px)/1.1 var(--serif)}
.slider{position:relative}
.slider__track{display:flex;gap:12px;margin:0 -10px;padding:40px 10px 32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:10px;scrollbar-width:none;overscroll-behavior-x:contain}
.slider__track::-webkit-scrollbar{display:none}
.slider__track.is-drag{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.slider__track.is-drag a{pointer-events:none}
.slide{flex:0 0 calc((100% - 48px)/5);scroll-snap-align:start;min-width:0;display:flex}
.slider--s .slider__track{padding-top:24px}
.slider__controls{position:relative;display:flex;align-items:center;justify-content:center;min-height:14px}
.slider__controls--btn{min-height:55px}
.slider__controls .btn{width:min(333px,40%)}
.slider--s .slider__controls .btn{display:none}
.slider--s .slider__controls--btn{min-height:14px}
.pager{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.pager button{width:8px;height:8px;margin:0 4px;border:1px solid var(--brown);border-radius:50%;transition:width .3s,background-color .3s,border-color .3s}
.pager button.is-on{width:84px;height:14px;border-radius:24px;background:var(--green);border-color:var(--green)}
.pager__bar{display:none}
.sec--some .wrap+.wrap{margin-top:32px}
.more-row{display:flex;justify-content:center;margin-top:32px}
.btn--more{width:236px}

/* карта */
.card{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;padding:16px 16px 34px;background:var(--white);border-radius:8% 8% 54% 54%/5%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.card__head{position:relative;margin-bottom:12px}
.labels{display:flex;flex-wrap:wrap;gap:4px}
.card .labels{position:absolute;z-index:6;left:0;top:0;padding-right:24px}
.label{display:inline-block;padding:4px 12px;border-radius:1000px;font:500 14px/17px var(--sans);white-space:nowrap}
.label--promo{background:var(--pink);color:var(--white)}
.label--best{background:var(--sky);color:#000;font-weight:400}
.label--blog{background:var(--sky);color:#000;font-weight:400}
.fav{position:absolute;z-index:6;right:-12px;top:-12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.fav .ic{width:20px;height:20px;transition:transform .3s ease-out}
.fav:hover .ic{transform:scale(1.15)}
.fav[aria-pressed="true"] .ic path{fill:var(--pink);stroke:var(--pink)}
.card__img{display:block;margin-top:24px;border-radius:16px;overflow:hidden;aspect-ratio:1}
.card__img img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease-out}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{flex:1}
.card__brand{display:block;margin-bottom:8px;font-size:14px;line-height:17px;color:var(--grey);text-transform:uppercase}
.card__title h3{min-height:2.4em;font:400 clamp(14px,1.037vw,17px)/1.2 var(--sans);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__title:hover{text-decoration:underline;text-underline-offset:3px}
.price{display:flex;align-items:flex-end;gap:2px;margin:10px 0;min-height:72px}
.price__num{font:italic 300 44px/60px var(--serif)}
.price__num sup{position:relative;top:-18px;font-size:30px;font-weight:500;line-height:0;vertical-align:baseline}
.price--promo .price__num{color:var(--pink)}
.price__unit{padding-bottom:12px;font:italic 300 16px/16px var(--serif);color:var(--grey)}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:4px}
.counter{flex:1;display:flex;align-items:center;justify-content:space-between;gap:4px;height:49px;padding:12px 11px;background:var(--white);border:1px solid var(--green);border-radius:1000px;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.25,1,.5,1)}
.card.in-cart .counter{opacity:1;visibility:visible}
.counter__btn{position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:1}
.counter__btn::after{content:"";position:absolute;inset:-12px}
.counter__btn--minus{border-radius:50%;background:var(--line);font-size:16px}
.counter__info{font:italic 300 18px/20px var(--serif);color:var(--grey)}
.counter__info b{font-weight:300;margin-right:.6em}
.cart-btn{flex:none;display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:1000px;background:var(--green);color:var(--white);transition:transform .3s ease-out,background-color .3s ease-out}
.cart-btn:hover{transform:scale(1.08);background:#7db535}
.cart-btn--off{background:#bfbfbf}
.cart-btn--off:hover{background:#a9a9a9}

/* ---------- широк банер ---------- */
.wide{height:auto;aspect-ratio:1411/575;border-radius:32px}
.wide__text{position:absolute;z-index:2;left:4.6%;top:12%}
.wide__kicker{margin-bottom:.6em;font:italic 600 clamp(12px,1.3vw,21px)/1.3 var(--serif)}
.wide__title{font:italic 600 clamp(32px,4.4vw,74px)/1.08 var(--serif);text-transform:uppercase}
.wide__sub{margin-top:.6em;font:italic 300 clamp(15px,1.6vw,26px)/1.35 var(--serif)}
.wide .round--l{margin-top:clamp(14px,2vw,30px);background:var(--pop);color:var(--white)}
.wide__text{max-width:40%}
.wide .badge{left:14%;top:60%;transform:rotate(-8deg)}
.wide--photo .badge{left:39%;top:44%;transform:rotate(-8deg)}

/* три банера в ред */
.gbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px}
.gb{position:relative;display:block;aspect-ratio:414/522;border-radius:48px;overflow:hidden;padding:26px 24px;background:var(--tone);color:var(--ink)}
.gb--lav{--tone:#d9cdf0;--ink:#39235f}.gb--mint{--tone:#c9e6d6;--ink:#1c4a37}.gb--sky{--tone:#c7e3ee;--ink:#12404f}
.gb h3{position:relative;z-index:1;max-width:9em;font:600 clamp(24px,2.5vw,42px)/1.15 var(--sans);text-transform:uppercase}
.gb .round{position:relative;z-index:1;margin-top:16px;background:var(--ink);color:var(--white)}
.gb img{position:absolute;left:50%;bottom:-7%;width:78%;max-width:none;transform:translateX(-46.5%);mix-blend-mode:multiply;transition:transform .4s ease-out}
.gb:hover img{transform:translateX(-46.5%) scale(1.04)}

/* ---------- блог ---------- */
.sec--blog{margin-bottom:clamp(48px,3.59vw,62px)}
.slider--blog .slider__track{gap:30px}
.slider--blog .slide{flex-basis:calc((100% - 60px)/3)}
.post{flex:1;display:flex;flex-direction:column;background:var(--white);border-radius:24px;box-shadow:var(--sh);overflow:hidden}
.post__img{display:block;aspect-ratio:402/226;overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.post:hover .post__img img{transform:scale(1.04)}
.post__body{flex:1;display:flex;flex-direction:column;padding:17.87px}
.post time{margin-bottom:6px;font-size:16.33px;line-height:24.5px;color:var(--grey)}
.post__title{min-height:calc(3*1.3em + 20px);margin-bottom:43.3px;padding-bottom:20px;font:italic 300 clamp(24px,2.315vw,40px)/1.3 var(--serif)}
.post__title a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.post__title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.post .labels{margin-bottom:20px}
.post__author{margin-bottom:20px;font-size:16.33px;line-height:19.6px}
.post__author span{margin-left:10px;text-decoration:underline;text-underline-offset:3px}
.post__text{margin-bottom:20px;font-size:16.33px;line-height:24.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more{display:flex;align-items:center;gap:12px;margin-top:auto;font:italic 300 16px/24px var(--serif);color:var(--pink)}
.more span{text-decoration:underline;text-underline-offset:3px}
.more .ic{color:var(--brown);transition:transform .3s ease-out}
.more:hover .ic{transform:translateX(4px)}

/* ---------- за марката ---------- */
.about{display:block;min-height:21.1vw}
.about__brand{display:flex;align-items:center;gap:16px;font:italic 300 clamp(24px,1.74vw,30px)/1.3 var(--serif);color:var(--brown-2)}
.about__brand .dots{grid-template-columns:repeat(2,11px);gap:3px}
.about__brand .dots i{width:11px;height:11px}
.about__line{display:block;font:italic 300 clamp(40px,4.3vw,72px)/1.33 var(--serif)}
.about__imgs{display:inline-flex;vertical-align:middle;margin:0 .1em}
.bl{width:1.02em;height:1.02em;object-fit:cover;margin-left:-.06em}
.bl--1{border-radius:58% 42% 46% 54%/52% 46% 54% 48%}
.bl--2{border-radius:44% 56% 52% 48%/48% 56% 44% 52%}
.bl--3{border-radius:52% 48% 40% 60%/56% 44% 56% 44%}
.btn--s{min-height:37px;min-width:255px;padding:0 24px;border-radius:10px;font-size:12px;line-height:1;vertical-align:middle;font-style:normal}

/* ---------- футър ---------- */
.cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:25.14vw;margin-bottom:-148px;padding:7.4vw 3.47vw 5.1vw;color:var(--white)}
.cta::before{content:"";position:absolute;z-index:-2;inset:27% 0 0;border-radius:200px;background:radial-gradient(120% 160% at 20% 0,#3f7a45 0,#234d2c 60%,#1b3c22 100%)}
.cta__blob{position:absolute;z-index:-1}
.cta__blob--1{left:29%;top:13%;width:17%;height:34%;background:#cfe8a9;border-radius:46% 54% 60% 40%/58% 42% 58% 42%}
.cta__blob--2{left:47%;top:19%;width:26%;height:81%;background:#a4d55f;border-radius:38% 62% 30% 70%/36% 34% 66% 64%;-webkit-mask-image:radial-gradient(60% 55% at 78% 78%,transparent 62%,#000 63%);mask-image:radial-gradient(60% 55% at 78% 78%,transparent 62%,#000 63%)}
.cta__blob--3{left:8%;bottom:-5%;width:15%;height:20%;background:#e4e37c;border-radius:50% 50% 44% 56%/62% 58% 42% 38%}
.cta__title{font:italic 300 clamp(40px,4.4vw,74px)/1.1 var(--serif);padding-left:3%}
.cta__info{width:39.2%;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.cta__info p{font:italic 600 clamp(20px,1.74vw,29px)/1.2 var(--serif)}
.cta .btn{min-width:160px;min-height:clamp(55px,5.55vw,80px)}
.footer__main{background:var(--beige);border-radius:0 0 40px 40px;padding:164px 0 29.3px}
.footer__h{font:italic 300 clamp(24px,1.74vw,29px)/1.1 var(--serif)}
.footer__main>.wrap>.footer__h{margin-bottom:21.3px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer__cols strong{display:block;margin-bottom:16px;font-weight:400;font-size:17.33px;line-height:21px}
.footer__name{display:flex;align-items:center;gap:16px;margin-bottom:13.3px}
.footer__name h3{font:italic 300 19.33px/27px var(--serif)}
.contacts{display:flex;flex-direction:column;gap:8px}
.contacts li{display:flex;gap:12px;font-size:15px;line-height:18px}
.contacts .ic{width:18px;height:18px}
.contacts a{text-decoration:underline;text-underline-offset:3px}
.contacts a:hover{text-decoration-color:transparent}
.footer__row{display:flex;align-items:flex-end;gap:26px;margin:26.7px 0 29.3px}
.footer__row .btn{padding-inline:15px}
.footer__line{flex:1;height:1px;margin-bottom:20px;background:rgba(255,255,255,.7)}
.footer__grid{display:grid;grid-template-columns:392.8fr 430.2fr 380.2fr;gap:32px}
.footer__grid .footer__h{margin-bottom:18.7px}
.footer__nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:16px;line-height:19px}
.footer__nav a,.footer__bottom nav a{background:linear-gradient(0deg,var(--brown),var(--brown)) no-repeat 0 100%/0 1px;transition:background-size .3s ease-out}
.footer__nav a:hover,.footer__bottom nav a:hover{background-size:100% 1px}
.bignavs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.bignav{display:flex;align-items:center;gap:8px;min-height:80px;padding:12px 16px;background:var(--bg);border-radius:24px;box-shadow:var(--sh);font-size:16px;line-height:1.2;transition:transform .3s ease-out}
.bignav:hover{transform:translateY(-2px)}
.bignav i{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#ffe8d9}
.social{display:flex;justify-content:flex-end;align-items:flex-end;gap:10px}
.social a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--bg);box-shadow:var(--sh);transition:transform .3s ease-out}
.social a:hover{transform:translateY(-2px)}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 30px;padding:21.3px 0}
.footer__copy{font:italic 300 16.93px/23px var(--serif)}
.footer__bottom nav{display:flex;gap:24px;font-size:16px}
.coltcode-credit{font:italic 300 16.93px/23px var(--serif)}
.coltcode-credit a{color:inherit;text-decoration:none}
.coltcode-credit span{font:600 17px var(--sans);font-style:normal;text-decoration:underline;text-underline-offset:3px}

/* появяване при скрол */
.reveal{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(0,0,.5,1)}
.reveal.in{clip-path:inset(0)}
.gb.reveal{clip-path:none;opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.gb.reveal.in{opacity:1;transform:none}
.slider:not(.in) .slide{opacity:0;transform:scale(.94)}
.slide{transition:opacity .5s ease-out,transform .5s ease-out}
.slider.in .slide:nth-child(2){transition-delay:.06s}.slider.in .slide:nth-child(3){transition-delay:.12s}.slider.in .slide:nth-child(4){transition-delay:.18s}.slider.in .slide:nth-child(5){transition-delay:.24s}

/* ---------- таблет ---------- */
@media (max-width:1199px){
  .slide{flex-basis:calc((100% - 36px)/4)}
  .header__tel span{display:none}
  .slider--blog .slide{flex-basis:calc((100% - 30px)/2)}
}
@media (max-width:1023px){
  .wrap,.wrap--l{margin-inline:12px}
  .header__in{display:flex;justify-content:center;min-height:98px;padding:6px 0 8px}
  .logo,.logo img{width:126px}
  .bar,.header__media,.tiles{display:none}
  .dock{left:50%;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));width:358px;height:56px;margin:0 0 0 -179px;padding:0 22px;opacity:1;visibility:visible;transform:none}
  .dock__btn--more{display:flex}
  .panel,#panel-cart{padding-bottom:100px}
  .title{font-size:32px;line-height:35.2px}
  .subtitle{font-size:24px;line-height:26.4px}
  .slide{flex-basis:calc((100% - 36px)/4)}
  .hero-slider__nav{display:none}
  .more-row{margin-top:20px;padding-top:12px}
  .slider--s .slider__controls .btn{display:inline-flex}
  .slider--s .slider__controls--btn{min-height:55px}
  .gb{aspect-ratio:317/359;border-radius:32px}
  .footer__bottom{flex-direction:column;padding:16px 0}
  .post__body{padding:16px}
  .post time{font-size:14px;line-height:21px}
  .post__title{font-size:24px;min-height:calc(2*1.3em + 16px);padding-bottom:16px;margin-bottom:40px}
  .post__title a{-webkit-line-clamp:2}
  .post__author{font-size:14px;line-height:16.8px}
  .post__text{font-size:14px;line-height:21px}
  .footer{padding-bottom:65px}
  .footer__grid{grid-template-columns:1fr 1.4fr}
  .social{grid-column:1/-1;justify-content:center}
}

/* ---------- телефон ---------- */
@media (max-width:767px){
  .dock{left:16px;right:16px;width:auto;margin:0}
  .panel,#panel-cart{width:100%;border-radius:0;padding:0 12px 100px}
  .hero-slider{margin-bottom:40px}
  .hero-slider__box{aspect-ratio:366/549;border-radius:16px}
  .hero__text,.wide__text{left:22px;right:22px;top:26px;max-width:none}
  .hero__title{font-size:30px}.hero__sub{font-size:20px}.hero__note{font-size:13px}
  .hero__btn{min-height:44px;padding:0 20px;font-size:13px;margin-top:18px}
  .hero__bottles{inset:0 -40% 0 -3%;justify-content:flex-start}
  .hero__bottles img{width:42%;margin:0 0 -4% -24%}
  .hero__bottles--4{inset:0 -40% 0 -5%}
  .hero__bottles--4 img{width:37%;margin-left:-21%}
  .hero__bottles img:first-child{margin-left:0}
  .hero__photo{right:auto;left:0;top:auto;bottom:0;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}
  .badge{left:auto;right:14px;top:25%;width:112px}
  .badge b{font-size:24px}.badge i{font-size:12px}
  .slider__track{gap:13px;margin:0 -12px;padding:40px 12px 32px;scroll-padding-left:12px}
  .slide{flex-basis:335px}
  .slider--s .slide{flex-basis:248px}
  .card{padding:16px 12px 34px}
  .card__img{border-radius:8px;margin-inline:5px}
  .card__title h3{font-size:14px;line-height:16.8px}
  .counter{opacity:1;visibility:visible;height:48px}
  .cart-btn{width:48px;height:48px}
  .slider__controls{justify-content:flex-end;min-height:3px}
  .slider__controls--btn{min-height:55px}
  .slider__controls .btn,.slider--s .slider__controls .btn{display:inline-flex;width:auto;min-width:135px;white-space:nowrap}
  .slider--s .slider__controls--btn{min-height:55px}
  .pager{width:169px}
  .pager button{display:none}
  .pager__bar{display:block;width:100%;height:3px;border-radius:24px;background:var(--line);overflow:hidden}
  .pager__bar i{display:block;height:100%;width:100%;border-radius:24px;background:var(--green);transform-origin:0 50%;transform:scaleX(.1);transition:transform .2s ease-out}
  .btn--more{width:100%}
  .wide{aspect-ratio:366/549;border-radius:16px}
  .wide__title{font-size:32px}.wide__sub{font-size:15px}
  .wide__text{max-width:none}
  .wide .badge{left:auto;right:10px;top:33%}
  .wide--photo .badge{left:auto;right:14px;top:31%}
  .gbs{grid-template-columns:1fr}
  .gb{aspect-ratio:366/167;border-radius:16px;padding:20px 18px}
  .gb h3{font-size:26px;max-width:56%}
  .gb .round{display:none}
  .gb img{left:auto;right:-2%;top:-5%;bottom:auto;width:36%;transform:none}
  .gb:hover img{transform:none}
  .sec--blog .title{margin-bottom:20px}
  .slider--blog .slider__track{gap:30px;padding-top:0}
  .slider--blog .slide{flex-basis:100%}
  .post__body{padding:16px}
  .post time{font-size:14px;line-height:21px}
  .post__title{font-size:24px;min-height:calc(2*1.3em + 16px);padding-bottom:16px;margin-bottom:60.2px}
  .post__title a{-webkit-line-clamp:2}
  .post__author,.post__text{font-size:14px;line-height:16.8px}
  .post__text{line-height:21px}
  .about{min-height:648px}
  .about__line{font-size:40px;line-height:1.3}
  .about__imgs{display:flex;margin:6px 0}
  .bl{width:72px;height:72px;margin-left:-4px}
  .about__imgs--a .bl{width:112px;height:112px}
  .about .btn--s{display:flex;width:100%;min-height:55px;margin-top:14px;border-radius:16px;font-size:18px}
  .cta{flex-direction:column;justify-content:center;min-height:323px;padding:105px 50px 88px}
  .cta::before{inset:22% 0 14%;border-radius:120px 150px 130px 160px/150px 120px 160px 130px}
  .cta__blob--1{left:10%;top:6%;width:38%;height:22%}
  .cta__blob--2{left:auto;right:-2%;top:4%;width:26%;height:36%}
  .cta__blob--3{left:0;bottom:6%;width:42%;height:16%}
  .cta__title{font-size:40px;line-height:44px;font-weight:600;padding:0}
  .cta__info{width:auto;align-items:center}
  .cta__info p{display:none}
  .cta .btn{min-height:55px}
  .footer__main{padding-bottom:24px}
  .footer__cols{grid-template-columns:1fr}
  .footer__cols li:nth-child(3){display:none}
  .footer__cols strong{font-size:16px;line-height:19px}
  .footer__name h3{font-size:18px;line-height:25px}
  .footer__nav{gap:8px}
  .footer__row{justify-content:center;margin-bottom:32px}
  .footer__line{display:none}
  .footer__grid{grid-template-columns:1fr}
  .bignavs{grid-template-columns:1fr;gap:6px}
  .bignav{min-height:69px;border-radius:14px}
  .bignav i{width:44px;height:44px}
  .social{justify-content:center;margin-top:12px}
  .footer__bottom{flex-direction:column;padding:16px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.gb.reveal{clip-path:none;opacity:1;transform:none}
  .slider:not(.in) .slide{opacity:1;transform:none}
}