@font-face{font-family:'Comfortaa';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/comfortaa-400.woff) format('woff')}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/comfortaa-600.woff) format('woff')}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/comfortaa-700.woff) format('woff')}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.uag{--ink:#243B2D;--muted:#566F5F;--deep:#3F7A54;--head:#4F8D63;--tx:#3C7651;--berry-ink:#B0405F;--mist:#E8F2EA;--soft:#D9E9DE;--decor:#A0C4AA;--line:#E6DBC4;--cream2:#EADFC7;font-family:'Comfortaa',system-ui,sans-serif;color:var(--ink);font-size:16px;line-height:1.55;position:relative;overflow-x:clip;background:#fff}
.uag{display:flex;flex-direction:column;min-height:100vh}
.uag>*{flex:none}
.uag>.foot{flex:1 0 auto}
.uag *{box-sizing:border-box}
.uag button,.uag input,.uag textarea{font-family:inherit}
.uag button{cursor:pointer}
.uag svg{display:block;flex:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.fill img{width:100%;height:100%;object-fit:cover;display:block}

/* masks: logo, icons and decor are your SVG files, tintable by background colour */
.mk{display:block;flex:none;background:var(--decor)}
.mk-logo{-webkit-mask:url(../img/logo.svg) center/contain no-repeat;mask:url(../img/logo.svg) center/contain no-repeat}
.mk-tg{-webkit-mask:url(../img/tg.svg) center/contain no-repeat;mask:url(../img/tg.svg) center/contain no-repeat}
.mk-tt{-webkit-mask:url(../img/tt.svg) center/contain no-repeat;mask:url(../img/tt.svg) center/contain no-repeat}
.mk-ig{-webkit-mask:url(../img/ig.svg) center/contain no-repeat;mask:url(../img/ig.svg) center/contain no-repeat}
.mk-bag{-webkit-mask:url(../img/bag.svg) center/contain no-repeat;mask:url(../img/bag.svg) center/contain no-repeat}
.mk-heart{-webkit-mask:url(../img/heart.svg) center/contain no-repeat;mask:url(../img/heart.svg) center/contain no-repeat}
.mk-search{-webkit-mask:url(../img/search.svg) center/contain no-repeat;mask:url(../img/search.svg) center/contain no-repeat}
.mk-up{-webkit-mask:url(../img/up.svg) center/contain no-repeat;mask:url(../img/up.svg) center/contain no-repeat}
.mk-icon,.mk-btr,.mk-btl{-webkit-mask:url(../img/icon.svg) center/contain no-repeat;mask:url(../img/icon.svg) center/contain no-repeat}
.mk-bbr{-webkit-mask:url(../img/bbr.svg) center/contain no-repeat;mask:url(../img/bbr.svg) center/contain no-repeat}
.mk-lbl{-webkit-mask:url(../img/lbl.svg) center/contain no-repeat;mask:url(../img/lbl.svg) center/contain no-repeat}
.mk-leaf1{-webkit-mask:url(../img/leaf1.svg) center/contain no-repeat;mask:url(../img/leaf1.svg) center/contain no-repeat}
.mk-leaf2{-webkit-mask:url(../img/leaf2.svg) center/contain no-repeat;mask:url(../img/leaf2.svg) center/contain no-repeat}
.mk-vine{-webkit-mask:url(../img/vine.svg) center/contain no-repeat;mask:url(../img/vine.svg) center/contain no-repeat}
.mk-blob-a{-webkit-mask:url(../img/blob-a.svg) center/contain no-repeat;mask:url(../img/blob-a.svg) center/contain no-repeat}
.mk-blob-b{-webkit-mask:url(../img/blob-b.svg) center/contain no-repeat;mask:url(../img/blob-b.svg) center/contain no-repeat}
.mk-blob-c{-webkit-mask:url(../img/blob-c.svg) center/contain no-repeat;mask:url(../img/blob-c.svg) center/contain no-repeat}
.mk-blob-d{-webkit-mask:url(../img/blob-d.svg) center/contain no-repeat;mask:url(../img/blob-d.svg) center/contain no-repeat}
.mk-blob-e{-webkit-mask:url(../img/blob-e.svg) center/contain no-repeat;mask:url(../img/blob-e.svg) center/contain no-repeat}
.mk-curl{-webkit-mask:url(../img/curl.svg) center/contain no-repeat;mask:url(../img/curl.svg) center/contain no-repeat}
.mk-leafv{-webkit-mask:url(../img/leafv.svg) center/contain no-repeat;mask:url(../img/leafv.svg) center/contain no-repeat}
.mk-bunchl{-webkit-mask:url(../img/bunchl.svg) center/contain no-repeat;mask:url(../img/bunchl.svg) center/contain no-repeat}
.deco{position:absolute;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.wave{position:absolute;left:0;width:100%;height:56px;z-index:1;pointer-events:none}
.wave.bot{bottom:-1px}
.wave.top{top:-1px;transform:rotate(180deg)}

/* top bar */
.topbar{background:var(--green);color:#fff;font-size:13px;font-weight:600}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.tb-l,.tb-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tb-i{display:inline-flex;align-items:center;gap:7px}
.tb-soc{width:28px;height:28px;border-radius:50%;background:#fff;display:inline-grid;place-items:center}
.tb-soc.noc{background:none}
.tb-socs{display:inline-flex;align-items:center;gap:8px}
.tb-roz{display:inline-flex;align-items:center;gap:6px;background:var(--berry);color:#fff;border-radius:999px;padding:4px 14px;font-weight:700;font-size:14px}

/* header */
.header{background:#fff;position:relative;z-index:5}
.header .wrap{display:flex;align-items:center;gap:32px;min-height:88px}
.logo{width:112px;height:54px;background:var(--green)}
.nav{display:flex;gap:26px;font-size:15px;font-weight:600;color:var(--deep)}
.nav a{display:inline-flex;align-items:center;gap:6px;padding:6px 0;position:relative}
.nav a.on:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--green)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ic{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;border:0;padding:0;display:inline-grid;place-items:center;position:relative}
.ic.ghost,.ic.noc{background:none}
.phone{background:var(--green);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.cnt{position:absolute;top:-3px;right:-3px;background:var(--berry-ink);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center}
.burger{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 30px;font-weight:700;font-size:16px;border:2px solid transparent;min-height:50px;cursor:pointer}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--deep)}
.btn-o{background:transparent;color:var(--burg);border-color:var(--burg)}
.btn-o:hover{background:var(--burg);color:#fff}
.btn-b{background:var(--burg);color:#fff}
.btn-b:hover{background:var(--ink)}
.btn-c{background:var(--cream);color:var(--berry-ink)}
.btn-line{background:transparent;color:var(--cream);border-color:rgba(244,236,221,.7)}

/* hero */
.hero{position:relative;background:var(--cream);padding:48px 0 124px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--berry-ink);border-radius:999px;padding:8px 18px;font-weight:700;font-size:13px;box-shadow:0 4px 14px rgba(36,59,45,.08)}
.chip-n{display:none}
.hero-title{font-size:clamp(34px,4.3vw,58px);line-height:1.14;font-weight:700;margin:22px 0 46px;color:var(--head)}
.pill{display:inline-block;background:var(--green);color:#fff;padding:0 18px 6px;border-radius:16px;transform:rotate(-2deg);box-shadow:0 10px 22px rgba(95,157,111,.3)}
.hero-p{font-size:18px;color:var(--muted);max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.swatches{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:14px;color:var(--muted);font-weight:600}
.swatches .dots5{display:flex}
.swatches .dots5 i{width:26px;height:26px;border-radius:50%;border:3px solid var(--cream);margin-left:-8px}
.swatches .dots5 i:first-child{margin-left:0}
.collage{position:relative;height:550px}
.ph-a{position:absolute;right:0;top:0;width:76%;height:480px;border-radius:200px 36px 200px 36px;overflow:hidden;box-shadow:0 26px 50px rgba(36,59,45,.18)}
.ph-b{position:absolute;left:0;bottom:0;width:46%;height:250px;border-radius:36px 110px 36px 110px;overflow:hidden;border:8px solid var(--cream);box-shadow:0 18px 40px rgba(36,59,45,.2)}
.ph-c{position:absolute;right:-4px;bottom:20px;width:130px;height:130px;border-radius:50%;overflow:hidden;border:6px solid var(--cream);box-shadow:0 14px 30px rgba(36,59,45,.22)}
.stk{position:absolute;left:3%;top:30px;width:136px;height:136px;border-radius:50%;background:var(--berry);color:#fff;display:grid;place-items:center;text-align:center;font-weight:700;font-size:15px;line-height:1.25;transform:rotate(-10deg);box-shadow:0 14px 30px rgba(212,90,120,.38);padding:14px;z-index:3}
.dots{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--decor);display:block}
.dots i.on{width:30px;border-radius:6px;background:var(--green)}

/* trust */
.trust{padding:4px 0 28px;position:relative}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tcard{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 18px}
.tico{flex:0 0 56px;width:56px;height:56px;border-radius:16px;background:var(--mist);color:var(--deep);display:flex;align-items:center;justify-content:center}
.tx{min-width:0}
.tx b{display:block;font-size:16px;line-height:1.3;margin-bottom:4px;color:var(--tx)}
.tx span{display:block;font-size:14px;color:var(--tx);line-height:1.45;font-weight:400}

/* sections */
.sec{position:relative;padding:64px 0;overflow:hidden}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--berry-ink);margin-bottom:8px}
.h2{font-size:clamp(28px,3.2vw,40px);line-height:1.2;font-weight:700;color:var(--head)}
.arr{display:flex;gap:10px}
.arr button{width:46px;height:46px;border-radius:14px;border:0;background:var(--green);color:#fff;display:grid;place-items:center}
.arr button:hover{background:var(--deep)}
.row{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.card{flex:0 0 calc((100% - 88px)/5);min-width:210px;scroll-snap-align:start}
.cph{position:relative;aspect-ratio:10/11;border-radius:24px;overflow:hidden;background:var(--mist)}
.badge{position:absolute;left:12px;top:12px;background:var(--deep);color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px}
.fav{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:0;padding:0;display:grid;place-items:center}
.cname{font-size:18px;font-weight:700;margin:14px 0 4px;color:var(--tx)}
.cmeta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cph.soldp img{opacity:.45}
.qty.off{opacity:.4;pointer-events:none}
.add.sold{background:var(--soft);color:var(--tx);cursor:default}
.add.sold:hover{background:var(--soft)}
.cprice{display:flex;align-items:baseline;gap:10px;margin:10px 0 12px}
.cprice s{color:var(--muted);font-size:14px}
.cprice s:empty{display:none}
.disc{align-self:center;background:var(--berry-ink);color:#fff;font-size:12px;font-weight:700;line-height:1;padding:5px 9px;border-radius:999px}
.disc.hide{display:none}
.cprice b{font-size:22px;color:var(--deep)}
.cbuy{display:flex;gap:8px;align-items:center}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--soft);border-radius:999px;height:46px;background:#fff}
.qty button{width:34px;height:44px;border:0;background:none;color:var(--deep);display:grid;place-items:center;padding:0}
.qty span{min-width:16px;text-align:center;font-weight:700;font-size:14px;color:var(--deep)}
.add{flex:1;height:46px;border-radius:999px;border:0;background:var(--green);color:#fff;font-weight:700;font-size:14px}
.add:hover{background:var(--deep)}
.center{display:flex;justify-content:center;margin-top:24px}

/* about */
.about{background:var(--cream);padding:96px 0}
.about .wrap{max-width:1440px;padding:0 32px}
.about-grid{display:grid;grid-template-columns:330px minmax(0,1fr) 330px;gap:48px;align-items:center}
.about-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.about-t{font-size:clamp(24px,2.7vw,36px);line-height:1.35;font-weight:700;text-transform:uppercase;margin-bottom:0;color:var(--head)}
.about-t .pill{padding:18px 28px 8px;line-height:1.15;margin:10px 0 16px;border-radius:18px;box-shadow:0 6px 14px rgba(95,157,111,.22)}
.about .eyebrow{margin-bottom:20px}
.about-ico{margin:36px 0 18px}
.about-p{font-size:16px;line-height:1.65;margin-top:16px;max-width:480px;color:var(--tx)}
.about-p b{font-weight:700}
.ab-l{position:relative}
.abl{height:430px;border-radius:36px 120px 36px 120px;overflow:hidden}
.abm{position:absolute;right:-28px;bottom:-44px;width:190px;height:150px;border-radius:28px;overflow:hidden;border:6px solid var(--cream);box-shadow:0 14px 30px rgba(36,59,45,.2)}
.abr{height:520px;border-radius:120px 36px 120px 36px;overflow:hidden}

/* reviews */
.rev{background:var(--burg);color:var(--cream);padding:88px 0}
.rev .h2{color:#fff}
.rev .eyebrow{color:#F6C1CF}
.rev-sub{color:#F4E3DC;max-width:520px;margin-top:10px}
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.shot{background:var(--cream);border-radius:28px;padding:16px;color:var(--ink)}
.shot-h{display:flex;align-items:center;gap:10px;padding:6px 6px 14px}
.av{width:38px;height:38px;border-radius:50%;background:var(--soft);flex:none}
.sk{height:10px;border-radius:6px;background:var(--cream2)}
.bub{border-radius:18px 18px 18px 6px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px;max-width:92%}
.bub.me{border-radius:18px 18px 6px 18px;background:var(--soft);margin-left:auto}
.slot{height:104px;border-radius:16px;background:var(--mist);display:grid;place-items:center;margin-bottom:10px}
.shot-src{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;min-height:24px;font-size:13px;font-weight:700;color:var(--burg)}
.shot-t{position:relative;top:2px}
.rev-cta{display:flex;gap:14px;justify-content:center;margin-top:44px;flex-wrap:wrap}

/* rozetka */
.roz{padding:24px 0 84px}
.roz-p{position:relative;background:var(--berry);color:#fff;border-radius:44px;padding:48px 56px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;overflow:hidden}
.roz-p .h2{color:#fff}
.roz-p .eyebrow{color:#fff}
.roz-p p.lead{font-size:20px;font-weight:700;margin-top:14px;max-width:480px}
.roz-ul{list-style:none;margin:22px 0 30px;padding:0;display:flex;flex-direction:column;gap:12px;font-weight:700;font-size:19px}
.roz-ul li{display:flex;gap:12px;align-items:center}
.roz-ul .ck{width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--berry-ink);display:grid;place-items:center;flex:none}
.roz-m{position:relative;height:360px;z-index:2}
.rcard{position:absolute;width:176px;background:#fff;border-radius:22px;padding:10px;color:var(--ink);box-shadow:0 20px 40px rgba(60,10,35,.3)}
.rcard .rph{aspect-ratio:4/5;border-radius:14px;overflow:hidden}
.rcard b{display:block;margin:10px 4px 0;font-size:15px}
.rcard span{display:block;margin:0 4px 4px;font-size:12px;color:var(--muted)}
.rc1{left:2%;top:46px;transform:rotate(-7deg)}
.rc2{left:33%;top:6px;transform:rotate(2deg);z-index:2}
.rc3{right:2%;top:60px;transform:rotate(8deg)}
.roz-tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);background:var(--cream);color:var(--berry-ink);border-radius:999px;padding:10px 22px;font-weight:700;font-size:14px;z-index:3;white-space:nowrap}

/* social */
.soc{background:var(--cream);padding:96px 0}
.soc-grid{display:grid;grid-template-columns:.85fr 1.6fr;gap:48px;align-items:center}
.soc-p{margin-top:14px;color:var(--muted);font-size:17px}
.soc-btns{display:flex;flex-direction:column;gap:12px;margin-top:28px;align-items:flex-start}
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:center;position:relative}
.post{background:#fff;border-radius:22px;padding:10px;box-shadow:0 14px 34px rgba(36,59,45,.12);position:relative;z-index:1}
.post.p1{transform:rotate(-3deg)}
.post.p3{transform:rotate(2.5deg)}
.post-h{display:flex;align-items:center;gap:8px;padding:4px 4px 10px;font-size:12px;font-weight:700}
.post-av{width:28px;height:28px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.post-img{aspect-ratio:1;border-radius:14px;overflow:hidden}
.post-f{display:flex;gap:12px;padding:10px 4px 6px;color:var(--ink)}
.tt{position:relative;z-index:1;aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(36,59,45,.18);transform:rotate(-2deg)}
.tt-tag{position:absolute;left:12px;bottom:12px;background:var(--burg);color:#fff;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.tt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--berry-ink);display:grid;place-items:center}

/* form + faq */
.ff{padding:84px 0 92px;position:relative;overflow:hidden}
.ff-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ff-p{margin-top:12px;color:var(--muted);font-size:17px;max-width:460px}
.ff-contacts{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px}
.form{background:var(--cream);border-radius:32px;padding:34px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.form>*:not(.deco){position:relative;z-index:2}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.fld input,.fld textarea{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:14px 16px;font-size:15px;color:var(--ink)}
.fld textarea{min-height:110px;resize:vertical}
.consent{font-size:12px;color:var(--muted)}
.faq-w{position:relative}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:20px 0;text-align:left;font-size:17px;font-weight:700;color:var(--ink);min-height:56px}
.faq-pm{flex:0 0 36px;height:36px;border-radius:50%;background:var(--berry);color:#fff;display:grid;place-items:center}
.faq-a{padding:0 0 22px;color:var(--muted);font-size:15px;max-width:520px}
.faq-l{display:inline-block;margin-top:10px;color:var(--berry-ink);font-weight:700;border-bottom:1.5px solid currentColor}

/* footer */
.foot{position:relative;background:var(--green);color:#fff;padding:100px 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.1fr;gap:40px;padding-bottom:48px;position:relative;z-index:2}
.foot h3{font-size:16px;margin-bottom:14px;font-weight:700}
.foot a.fl{display:block;padding:5px 0;font-weight:700;font-size:15px}
.foot .fi{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:15px;padding:5px 0}
.foot-soc{display:flex;gap:10px;margin:0 0 18px}
.foot-soc a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%}
.foot-soc a.c{background:var(--cream)}
.foot-roz{display:inline-flex;align-items:center;gap:8px;background:var(--berry);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px}
.foot-bot{border-top:1px solid rgba(255,255,255,.3);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:700;position:relative;z-index:2}
.totop{position:absolute;right:28px;bottom:70px;width:46px;height:46px;display:block;z-index:3}

/* mobile menu panel (shown only when burger is visible and menu is open) */
.mnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 28px 44px rgba(36,59,45,.16);padding:6px 32px 26px;z-index:30}
.mnav a.ml{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px;color:var(--deep)}
.mnav a.ml.on{color:var(--head)}
.mnav-b{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.mnav-b .btn{flex:1 1 auto;min-height:48px;padding:12px 22px;font-size:15px}
.mnav-s{display:flex;gap:26px;margin-top:20px;font-weight:700;font-size:15px;color:var(--deep)}
.mnav-s a{display:inline-flex;align-items:center;gap:8px}
.phone-ic,.heart-x{display:none}

/* ===== tablet & small laptop (<=1100) ===== */
@media (max-width:1100px){
.wrap{padding:0 32px}
.topbar .tb-l .tb-i:nth-child(2){display:none}
.header .wrap{gap:20px}
.nav{display:none}
.burger{display:inline-grid}
.mnav{display:block}
.deco{max-width:210px;max-height:215px}
.foot .deco{max-width:none;max-height:none}
.hero{padding:48px 0 112px}
.chip{border-radius:22px;padding:10px 20px}
.chip-n{display:block;margin-top:3px}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
.hero-title{font-size:clamp(36px,6.2vw,52px);margin:20px 0 32px}
.hero-title .pill{margin-top:12px}
.hero-p{max-width:560px}
.collage{height:480px;max-width:600px;width:100%;margin:0 auto}
.collage .mk-blob-a{height:440px!important}
.ph-a{height:420px}
.ph-b{height:240px}
.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{flex-basis:calc((100% - 44px)/3)}
.hero .mk-btr{top:-40px!important;right:2%!important;width:150px!important;height:139px!important}
.hero .mk-leafv{left:-195px!important}
.rev-grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -32px;padding:0 32px 8px;scroll-padding-left:32px;scrollbar-width:none}
.rev-grid::-webkit-scrollbar{display:none}
.shot{flex:0 0 42%;scroll-snap-align:start}
.about{padding:96px 0}
.about-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.about-c{grid-column:1/-1;order:-1;margin-bottom:24px}
.about-t{font-size:clamp(26px,4.2vw,34px)}
.abl{height:340px}
.abr{height:400px}
.abm{right:-10px;bottom:-34px;width:160px;height:126px}
.roz-p{grid-template-columns:minmax(0,1fr);padding:44px 32px;gap:28px}
.roz-m{height:390px;--cw:clamp(150px,27vw,200px)}
.rcard{width:var(--cw)}
.rc1{left:calc(50% - var(--cw)*1.45)}
.rc2{left:calc(50% - var(--cw)*.5)}
.rc3{right:auto;left:calc(50% + var(--cw)*.45)}
.soc-p{max-width:480px}
.soc-grid,.ff-grid{grid-template-columns:minmax(0,1fr)}
.soc-grid{gap:40px}
.ff-grid{gap:44px}
.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== mobile (<=640) ===== */
@media (max-width:640px){
.wrap,.about .wrap{padding:0 20px}
.mnav{padding:4px 20px 22px}
.deco{max-width:125px;max-height:132px}
.topbar .tb-l{display:none}
.topbar .wrap{justify-content:space-between;gap:10px;flex-wrap:nowrap}
.tb-r{width:100%;justify-content:space-between;gap:10px}
.tb-roz{font-size:13px;padding:4px 12px}
.header .wrap{min-height:68px;gap:10px}
.logo{width:92px;height:44px}
.hdr-r{gap:8px}
.hdr-r .ic.ghost,.hdr-r .ic.tgc,.hdr-r .phone,.hdr-r .ic.heart{display:none}
.hdr-r .ic.phone-ic{display:inline-grid}
.hero{padding:26px 0 80px}
.hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
.hero-grid>div:first-child{display:contents}
.chip{order:1;align-self:flex-start;font-size:12px;padding:9px 14px;gap:8px;border-radius:18px}
.hero-title{order:2;font-size:34px;margin:14px 0 14px}
.hero-title .pill{margin-top:0;padding:0 14px 5px;border-radius:14px}
.collage{order:3;height:228px;margin:0 0 18px}
.collage .mk-blob-a{height:188px!important}
.ph-a{height:196px;border-radius:120px 24px 120px 24px}
.ph-b{height:112px;border-width:5px;border-radius:24px 64px 24px 64px}
.ph-c{width:72px;height:72px;bottom:8px;border-width:4px}
.stk{width:86px;height:86px;font-size:11px;top:6px;padding:8px}
.hero-cta{order:4;flex-direction:row;flex-wrap:nowrap;gap:10px;margin-top:0}
.hero-cta .btn{flex:1 1 0;min-width:0;padding:12px 8px;font-size:13px;min-height:48px;white-space:nowrap}
.hero-cta .btn svg{display:none}
.hero-p{order:5;font-size:16px;margin-top:24px}
.swatches{order:6;margin-top:22px;font-size:13px;gap:12px;align-items:flex-start}
.swatches .dots5{padding-top:1px}
.dots{bottom:44px}
.hero .mk-btr{right:-18px!important}
.wave{height:32px}
.trust{padding:0 0 8px}
.trust-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.tcard{padding:16px;border-radius:20px}
.tico{flex-basis:48px;width:48px;height:48px;border-radius:14px}
.sec{padding:52px 0}
.sec.about,.sec.rev,.sec.soc{padding:76px 0}
.ff{padding:56px 0 64px}
.sh{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:18px}
.sh .arr{display:none}
.h2{font-size:26px}
.rev-sub{font-size:15px}
.row{margin:0 -20px;padding:6px 20px 14px;scroll-padding-left:20px;gap:14px}
.card{flex-basis:72%;min-width:0}
.center{margin-top:14px}
.center .btn{width:100%}
.about-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.about-c{margin-bottom:18px}
.about-t{font-size:24px}
.about-t .pill{padding:16px 22px 7px;margin:8px 0 12px}
.about .eyebrow{margin-bottom:14px}
.about-ico{margin:26px 0 12px}
.about-p{font-size:15px;margin-top:14px}
.abl{height:236px;border-radius:28px 76px 28px 76px}
.abr{height:290px;border-radius:76px 28px 76px 28px}
.abm{display:none}
.rev-grid{gap:14px;margin:0 -20px;padding:0 20px 8px;scroll-padding-left:20px}
.shot{flex:0 0 76%}
.d-an{display:none}
.rev-cta{margin-top:26px}
.rev-cta .btn{width:100%}
.roz{padding:8px 0 52px}
.roz-p{padding:30px 22px 26px;border-radius:30px;gap:22px}
.roz-p p.lead{font-size:17px}
.roz-ul{font-size:16px;margin:18px 0 24px;gap:10px}
.roz-p .btn{width:100%}
.roz-m{height:290px}
.rcard{width:124px;padding:8px;border-radius:18px}
.rcard b{font-size:13px;margin:8px 3px 0}
.rcard span{font-size:11px;margin:0 3px 3px}
.roz-m{--cw:124px}
.rc1{left:2%;top:50px}
.rc2{left:33%;top:8px}
.rc3{right:2%;left:auto;top:62px}
.roz-tag{font-size:13px;padding:9px 18px}
.soc-grid{gap:30px}
.soc-p{font-size:16px;max-width:none}
.soc-btns{align-items:stretch}
.posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.post{padding:8px}
.ff-p{font-size:16px}
.ff-contacts .phone,.ff-contacts .btn{flex:1 1 auto;justify-content:center}
.form{padding:22px;border-radius:26px}
.faq-q{font-size:16px;padding:16px 0}
.faq-a{font-size:14.5px}
.foot{padding:76px 0 0}
.foot-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:34px}
.foot-bot{justify-content:center;text-align:center}
.totop{right:16px;bottom:104px}
}
/* ===== catalog page ===== */
.chero{position:relative;background:var(--cream);padding:30px 0 96px;overflow:hidden}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.crumbs a{color:var(--tx)}
.crumbs i{width:5px;height:5px;border-radius:50%;background:var(--decor);display:block}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.ch-title{font-size:clamp(34px,3.6vw,50px);line-height:1.15;font-weight:700;color:var(--head);margin:18px 0 14px}
.ch-p{font-size:17px;color:var(--muted);max-width:540px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.tab{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--green);background:#fff;color:var(--tx);border-radius:999px;padding:10px 22px;font-weight:700;font-size:15px;min-height:46px}
.tab:hover{background:var(--mist)}
.tab.on{background:var(--green);color:#fff}
.ch-art{position:relative;height:270px}
.ca-a{position:absolute;right:0;top:0;width:66%;height:250px;border-radius:140px 30px 140px 30px;overflow:hidden;box-shadow:0 22px 44px rgba(36,59,45,.18)}
.ca-b{position:absolute;left:4%;bottom:0;width:38%;height:140px;border-radius:30px 76px 30px 76px;overflow:hidden;border:7px solid var(--cream);box-shadow:0 16px 34px rgba(36,59,45,.2)}
.ca-c{position:absolute;right:-2px;bottom:4px;width:88px;height:88px;border-radius:50%;overflow:hidden;border:5px solid var(--cream);box-shadow:0 12px 26px rgba(36,59,45,.22)}
.ch-art .stk{left:1%;top:6px;width:120px;height:120px;padding:10px}
.ch-art .stk b{display:block;font-size:34px;line-height:1}
.cmain{position:relative;padding:36px 0 72px;overflow:hidden}
.cgrid{display:grid;grid-template-columns:292px minmax(0,1fr);gap:36px;align-items:start}
.side{display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:22px 22px 10px}
.side-h{display:flex;justify-content:space-between;align-items:center}
.side-h h2{font-size:21px;font-weight:700;color:var(--head)}
.side-h a{font-size:13px;font-weight:700;color:var(--berry-ink);border-bottom:1.5px solid currentColor}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--mist);border-radius:18px;padding:12px 14px;font-weight:700;font-size:14px;color:var(--tx);margin:16px 0 6px}
.sw i{width:44px;height:26px;border-radius:999px;background:var(--decor);position:relative;flex:none}
.sw i:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(36,59,45,.2)}
.fg{border-top:1px solid var(--line);padding:16px 0 10px;margin-top:10px}
.fg-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:16px;color:var(--tx);margin-bottom:8px}
.fo{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:15px;color:var(--tx);cursor:pointer}
.cb{width:22px;height:22px;border-radius:7px;border:2px solid var(--decor);flex:none;display:grid;place-items:center;background:#fff;color:#fff}
.cb svg{opacity:0}
.fo.on .cb{background:var(--green);border-color:var(--green)}
.fo.on .cb svg{opacity:1}
.fo .nm{flex:1;min-width:0}
.fo .ct{font-size:12px;font-weight:700;color:var(--tx);background:var(--mist);border-radius:999px;padding:2px 9px;min-width:32px;text-align:center}
.cd{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.more{display:inline-block;font-size:13px;font-weight:700;color:var(--berry-ink);padding:6px 0 8px;border-bottom:1.5px solid currentColor;margin:4px 0 6px}
.tbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.cnt-t{font-size:15px;color:var(--muted);font-weight:700}
.tb-ctl{display:flex;align-items:center;gap:10px}
.sort,.fbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px;font-weight:700;font-size:14px;color:var(--tx);min-height:46px;cursor:pointer}
.fbtn{display:none;border-color:var(--green);background:var(--green);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
.pc .cph{aspect-ratio:1/1.02}
.badge.nw{background:var(--berry-ink)}
.badge.hide{display:none}
.pc .cname{margin:16px 0 5px;font-size:19px}
.pstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 16px}
.pcell{border:1.5px solid var(--soft);border-radius:14px;padding:10px 6px 11px;text-align:center;background:#fff}
.pcell small{display:block;font-size:12px;color:var(--muted);font-weight:700;line-height:1.2}
.pcell b{display:block;font-size:18px;color:var(--deep);margin-top:3px;line-height:1.2}
.pcell.sel{border-color:var(--head);background:var(--mist);box-shadow:inset 0 0 0 1px var(--head)}
.pcell.sel b{color:var(--head)}
.pcell.no{background:var(--mist);border-color:transparent}
.pcell.no b{font-size:12px;color:var(--muted);font-weight:700;margin-top:6px}
.cfrom{display:none;font-weight:700;font-size:18px;color:var(--deep);margin:8px 0 10px;line-height:1.2}
.sort .si,.sort .sm{display:none}
.pbtn{width:100%;min-height:48px;padding:12px 20px;font-size:15px}
.pbtn.sold{background:var(--soft);color:var(--tx);pointer-events:none}
.pbtn .bt-m{display:none}
.uag>.foot{flex:none!important}
.uag>.guide{flex:1 0 auto}
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px}
.pg{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--tx);border:1.5px solid var(--soft);background:#fff}
.pg.on{background:var(--green);border-color:var(--green);color:#fff}
.guide{background:var(--cream);padding:104px 0 72px;position:relative;overflow:hidden}
.gcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px;position:relative;z-index:2}
.gcard{background:#fff;border-radius:28px;padding:28px 26px 26px;box-shadow:0 14px 34px rgba(36,59,45,.08)}
.gico{width:64px;height:64px;border-radius:20px;background:var(--mist);display:grid;place-items:center;margin-bottom:16px}
.gcard h3{font-size:21px;color:var(--head);margin-bottom:8px}
.gcard p{font-size:15px;color:var(--tx);line-height:1.6}
.gl{display:inline-block;margin-top:16px;font-weight:700;font-size:14px;color:var(--berry-ink);border-bottom:1.5px solid currentColor}
.guide-sub{color:var(--muted);max-width:720px;margin-top:10px}
.mnav a.ml.on{color:var(--head)}

@media (max-width:1100px){
.chero{padding:26px 0 88px}
.ch-grid{grid-template-columns:minmax(0,1fr)}
.ch-art{display:none}
.cgrid{display:flex;flex-direction:column;gap:0;align-items:stretch}
.cres{display:contents}
.tbar{order:1}
.side{order:2;display:none;margin-bottom:26px}
.side.open{display:block}
.pgrid{order:3;grid-template-columns:repeat(2,minmax(0,1fr))}
.pager{order:4}
.fbtn{display:inline-flex}
.gcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide{padding:96px 0 104px}
}
@media (max-width:640px){
.chero{padding:20px 0 72px}
.ch-title{font-size:30px;margin:14px 0 10px}
.ch-p{font-size:15px}
.tabs{flex-wrap:nowrap;overflow-x:auto;margin:20px -20px 0;padding:2px 20px 6px;scrollbar-width:none;gap:8px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:9px 18px;font-size:14px;min-height:42px}
.cmain{padding:26px 0 56px}
.tbar{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}
.tb-ctl{gap:10px}
.tb-ctl>*{flex:1 1 0;min-width:0;padding:10px 12px;font-size:13px}
.sort .sl,.sort .sv{display:none}
.sort .si{display:block}
.sort .sm{display:inline}
.pgrid{gap:22px 12px}
.pc .cph{aspect-ratio:1/1.08;border-radius:20px}
.pc .badge{left:8px;top:8px;font-size:11px;padding:4px 9px}
.pc .fav{right:8px;top:8px;width:34px;height:34px}
.pc .fav .mk{width:17px!important;height:15px!important}
.pc .cname{font-size:16px;margin:12px 0 3px}
.pc .cmeta{font-size:11.5px;gap:6px}
.pstrip{gap:6px;margin:10px 0 12px}
.pcell{padding:7px 2px 8px;border-radius:12px}
.pcell small{font-size:10px;letter-spacing:-.2px;white-space:nowrap}
.pcell b{font-size:15px;margin-top:2px}
.pcell.no b{font-size:10px;margin-top:4px}
.pbtn{min-height:42px;padding:10px 6px;font-size:13px}
.pager{margin-top:34px;gap:6px}
.pg{width:42px;height:42px}
.side{border-radius:24px;padding:18px 18px 6px}
.guide{padding:76px 0 84px}
.gcards{grid-template-columns:minmax(0,1fr)}
.gcard{padding:22px 20px}
}
@media (max-width:380px){
.pbtn{font-size:12px}
.pcell small{font-size:9.5px;letter-spacing:-.3px}
.pcell{padding:7px 1px 8px}
}

/* ===== legal / info text pages ===== */
.lg-hero{position:relative;background:var(--cream);padding:30px 0 108px;overflow:hidden}
.lg-hero .wrap{position:relative;z-index:2}
.lg-hero .crumbs{margin-bottom:34px}
.lg-hero .eyebrow{margin-bottom:14px}
.lg-h1{font-size:clamp(34px,3.8vw,52px);line-height:1.12;font-weight:700;color:var(--head);max-width:820px}
.lg-lead{max-width:680px;margin-top:16px;color:var(--muted);font-size:17.5px}
.lg-date{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;color:var(--tx);box-shadow:0 8px 22px rgba(36,59,45,.08)}
.lg-date svg{color:var(--head)}
.lg-main{position:relative;padding:20px 0 64px;overflow-x:clip}
.lg-s:last-child{margin-bottom:0}
.uag>.lg-main{flex:1 0 auto}
.lg-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:72px;align-items:start}
.lg-toc{position:sticky;top:calc(var(--hdr-h) + 24px);background:var(--mist);border-radius:28px;padding:26px 24px 22px}
.lg-toc h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--berry-ink);margin-bottom:10px}
.lg-toc ol,.lg-tocm ol{list-style:none;margin:0;padding:0}
.lg-toc a,.lg-tocm a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:8px 0;color:var(--tx);font-weight:700;font-size:14.5px;line-height:1.35;text-decoration:none}
.lg-toc a b,.lg-tocm a b{color:var(--head)}
.lg-toc a:hover,.lg-tocm a:hover{color:var(--head)}
.lg-tocm{display:none}
.lg-art{max-width:780px}
.lg-sum{display:flex;gap:18px;align-items:flex-start;background:var(--cream);border-radius:28px;padding:24px 28px;margin-bottom:46px}
.lg-sum .lg-si{flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--head);display:grid;place-items:center}
.lg-sum b{display:block;font-size:18px;color:var(--head);margin-bottom:4px}
.lg-sum p{font-size:15.5px;line-height:1.65;color:var(--tx)}
.lg-s{margin-bottom:44px;scroll-margin-top:24px}
.lg-s h2{display:flex;align-items:center;gap:14px;font-size:clamp(22px,2vw,26px);color:var(--head);line-height:1.25;margin-bottom:14px}
.lg-s h2 i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--mist);color:var(--head);font-style:normal;font-size:16px;display:grid;place-items:center}
.lg-s p{font-size:16.5px;line-height:1.75;color:var(--ink);margin-top:12px}
.lg-s p b,.lg-s li b{color:var(--tx)}
.lg-s ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.lg-s li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.65;color:var(--ink)}
.lg-s li:before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--green)}
.lg-s a{color:var(--deep);font-weight:700;text-decoration:underline;text-decoration-color:var(--decor);text-underline-offset:3px}
.ph{background:#FBE9EE;color:var(--berry-ink);border-radius:6px;padding:1px 7px;font-weight:700}
.lg-tbl{margin-top:18px;border:1.5px solid var(--line);border-radius:22px;overflow:hidden}
.lg-tr{display:grid;grid-template-columns:150px minmax(0,1fr) 180px;gap:22px;padding:16px 22px;align-items:start;font-size:15.5px;line-height:1.6;color:var(--ink)}
.lg-tr+.lg-tr{border-top:1.5px solid var(--line)}
.lg-tr.hd{background:var(--mist);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding-top:12px;padding-bottom:12px}
.lg-tr>b{color:var(--tx);font-size:16px}
.lg-tr small{display:none}
.lg-tag{display:inline-block;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700;line-height:1.3}
.lg-tag.ok{background:var(--mist);color:var(--deep)}
.lg-tag.ask{background:#FBE9EE;color:var(--berry-ink)}
.lg-ct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.lg-c{display:flex;gap:14px;align-items:flex-start;background:var(--mist);border-radius:20px;padding:16px 18px;color:inherit;text-decoration:none}
.lg-s a.lg-c{text-decoration:none;font-weight:400}
.lg-c .ci{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--head);display:grid;place-items:center}
.lg-c small{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.lg-c b{display:block;font-size:15.5px;color:var(--tx);line-height:1.35;margin-top:3px}
.lg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.lg-card{background:var(--mist);border-radius:24px;padding:22px 24px 22px}
.lg-card .ci{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--head);display:grid;place-items:center;margin-bottom:14px}
.lg-card h3{font-size:20px;color:var(--head);line-height:1.2}
.lg-s .lg-card p{font-size:15px;line-height:1.6;color:var(--tx);margin-top:8px}
.lg-s ol.lg-st{list-style:none;counter-reset:st;margin:20px 0 0;padding:0;display:flex;flex-direction:column}
.lg-s ol.lg-st li{position:relative;counter-increment:st;padding:2px 0 24px 64px;min-height:44px}
.lg-s ol.lg-st li:before{content:counter(st);left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--head);display:grid;place-items:center;font-weight:700;font-size:17px;box-shadow:0 0 0 5px #fff}
.lg-s ol.lg-st li:not(:last-child):after{content:"";position:absolute;left:21px;top:48px;bottom:4px;width:2px;background:var(--soft)}
.lg-s ol.lg-st li:last-child{padding-bottom:0}
.lg-s ol.lg-st li b{display:block;font-size:18px;color:var(--head);line-height:1.3;margin-bottom:3px}
.lg-s ol.lg-st li>span{display:block;font-size:16.5px;line-height:1.65;color:var(--ink)}
@media (max-width:1100px){
.lg-hero{padding:26px 0 92px}
.lg-hero .crumbs{margin-bottom:28px}
.lg-main{padding:12px 0 52px}
.lg-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.lg-toc{display:none}
.lg-tocm{display:block;background:var(--mist);border-radius:22px;padding:4px 20px;margin-bottom:22px}
.lg-tocm summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-weight:700;font-size:16px;color:var(--head)}
.lg-tocm summary::-webkit-details-marker{display:none}
.lg-tocm summary svg{transition:transform .2s}
.lg-tocm[open] summary svg{transform:rotate(180deg)}
.lg-tocm ol{padding-bottom:12px}
.lg-art{max-width:none}
}
@media (max-width:640px){
.lg-hero{padding:20px 0 76px}
.lg-hero .mk-btr{width:120px!important;height:111px!important;right:-26px!important;top:-8px!important;opacity:.35!important}
.lg-hero .crumbs{margin-bottom:22px}
.lg-lead{font-size:15.5px}
.lg-date{font-size:13px;padding:8px 15px;margin-top:20px}
.lg-main{padding:6px 0 40px}
.lg-sum{flex-direction:column;gap:12px;padding:20px 20px;border-radius:24px;margin-bottom:34px}
.lg-sum .lg-si{width:46px;height:46px}
.lg-sum b{font-size:17px}
.lg-sum p{font-size:15px}
.lg-s{margin-bottom:34px}
.lg-s h2{gap:12px;font-size:21px;align-items:flex-start}
.lg-s h2 i{width:36px;height:36px;font-size:15px}
.lg-s h2 span{padding-top:5px}
.lg-s p,.lg-s li{font-size:15.5px}
.lg-tr{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 18px}
.lg-tr.hd{display:none}
.lg-tr small{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
.lg-ct,.lg-cards{grid-template-columns:minmax(0,1fr)}
.lg-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px 18px}
.lg-card .ci{grid-row:1/3;width:48px;height:48px;margin:0}
.lg-card h3{font-size:19px;align-self:center}
.lg-s .lg-card p{margin-top:4px}
.lg-s ol.lg-st li{padding-left:56px}
.lg-s ol.lg-st li:before{width:40px;height:40px;font-size:16px}
.lg-s ol.lg-st li:not(:last-child):after{left:19px;top:44px}
.lg-s ol.lg-st li b{font-size:17px}
.lg-s ol.lg-st li>span{font-size:15.5px}
}

/* ===== Липка шапка =====
   Топ-бар (зелена смужка) їде разом зі сторінкою — його видно лише вгорі.
   Шапка з логотипом і меню прилипає до верху вікна і лишається при прокрутці. */
:root{--hdr-h:88px}
html{scroll-padding-top:var(--hdr-h)}
.header{position:sticky;top:0;z-index:50;transition:box-shadow .2s ease}
.header.is-stuck{box-shadow:0 8px 24px rgba(36,59,45,.10)}
/* мобільне меню не вилазить за екран: якщо не вміщається — прокручується всередині */
.mnav{max-height:calc(100vh - var(--hdr-h));max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;overscroll-behavior:contain}
@media (max-width:640px){:root{--hdr-h:68px}}
@media (prefers-reduced-motion:reduce){.header{transition:none}}

/* ===== Меню шапки: підсвічений лише пункт поточної сторінки + приємні наведення =====
   Підсвітка («.on» + aria-current) ставиться збіркою сторінки: головна, 404 і юридичні сторінки не підсвічують нічого. */
.nav a{isolation:isolate;border-radius:10px;transition:color .2s ease}
.nav a:before{content:"";position:absolute;inset:-5px -13px;z-index:-1;border-radius:999px;background:var(--mist);opacity:0;transform:scale(.86);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.3,1)}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--green);
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.nav a.on:after{transform:scaleX(1)}
.nav a:focus-visible{outline:3px solid var(--decor);outline-offset:6px}
.nav a:active:before{transform:scale(.96)}
@media (hover:hover){
  .nav a:hover{color:var(--head)}
  .nav a:hover:before{opacity:1;transform:scale(1)}
  .nav a:not(.on):hover:after{transform:scaleX(.34);opacity:.55}
  /* усі круглі кнопки шапки (Telegram, кошик, обране, телефон) — одне затемнення, без рухів */
  .ic:not(.ghost):not(.noc),.phone,.ic.ghost{transition:background-color .2s ease}
  .ic .mk{transition:background-color .2s ease}
  .ic:not(.ghost):not(.noc):hover,.phone:hover{background:var(--deep)}
  .ic.tgc:hover .mk{background:var(--deep)!important}
  .ic.ghost:hover{background:var(--mist)}
  .mnav a.ml:hover{color:var(--ink)}
}
.ic:focus-visible,.phone:focus-visible{outline:3px solid var(--decor);outline-offset:3px}
.mnav a.ml{transition:color .2s ease}
.mnav a.ml.on svg{color:var(--green)}
.mnav a.ml:focus-visible{outline:3px solid var(--decor);outline-offset:-3px;border-radius:12px}
@media (prefers-reduced-motion:reduce){.nav a,.nav a:before,.nav a:after,.ic,.phone,.mnav a.ml{transition:none}}

/* 404: коли сортів менше чотирьох, картки стоять по центру, а не жмуться ліворуч (ширина = ширина колонки 4-колонкової сітки) */
.ups-grid.n1{grid-template-columns:minmax(0,1fr);max-width:calc(25% - 18px);margin-inline:auto}
.ups-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(50% - 12px);margin-inline:auto}
.ups-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:calc(75% - 6px);margin-inline:auto}
@media (max-width:1100px){
  .ups-grid.n1{max-width:calc(50% - 9px)}
  .ups-grid.n2,.ups-grid.n3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .ups-grid.n3>.pc:last-child{grid-column:1/-1;width:calc(50% - 9px);justify-self:center}
}
@media (max-width:640px){
  .ups-grid.n1{max-width:calc(50% - 6px)}
  .ups-grid.n3>.pc:last-child{width:calc(50% - 6px)}
}

/* іконка «Обране» в шапці — того ж візуального розміру, що й кошик: однакова висота (22 px), серце ширше за сумку від природи */
.hdr-r .ic.heart .mk{width:25.5px!important;height:23px!important}

/* ===== Відгуки: фільтр-плашки зафарбовані фоном секції (текст читається поверх декору), рамка лишається кремовою ===== */
.rv-bar label{background:var(--burg)}

/* ===== Справжній відгук: скриншот листування з заокругленими кутами, як у заглушок =====
   Картка — сам скриншот (він уже на кремовому тлі), тому без внутрішніх відступів. */
.shot.real{position:relative;padding:0;overflow:hidden;line-height:0}
.shot-fit{position:relative;width:100%}                                       /* скриншот листування (на головній він обрізається по центру) */
.shot-fit img{display:block;width:100%;height:auto}
.shot.real .shot-src{position:absolute;left:8px;right:8px;bottom:16px;margin:0;line-height:1.2}   /* підпис «Відгук з …» — завжди внизу картки, на тій самій висоті (16 px від низу), що й у заглушок */
/* головна й сторінка сорту: усі картки в ряду однакової висоти (448 px, як у заглушок) — довгий скриншот симетрично обрізається зверху й знизу, вміст листування лишається в центрі */
.rev-grid .shot.real{min-height:448px;align-self:stretch}
.rev-grid .shot.real .shot-fit{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}

/* ===== Вирівнювання тексту й іконок (виміряно за пікселями) =====
   Топ-бар: текст стояв на ~1 px вище за центр іконки — піднімаємо іконку.
   Плашки-статистика (співпраця, відгуки): текст стояв на ~1,3 px нижче за іконку — зсув тексту зменшено з 2 px до 0,7 px. */
.tb-i svg{position:relative;top:-1px}
.cb-st>span .t,.rv-st>span .t{top:.7px}

/* ===== Заглушки фото й відео сортів =====
   Показуються, поки в таблиці сортів не вказано справжній файл (колонки «фото» / «відео»).
   Колір грона — колір ягоди сорту (--pc задає збірка). Заглушка заповнює батьківський блок (він position:relative). */
.ph-photo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;
  background:linear-gradient(165deg,var(--mist) 0%,#F1F6EC 52%,var(--cream) 100%);color:var(--muted)}
.ph-photo:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.8),rgba(255,255,255,0) 66%)}
.ph-ic{position:relative;display:block;width:32%;max-width:92px;aspect-ratio:285/486;background:var(--pc,var(--green));opacity:.85;
  -webkit-mask:url(../img/bunchl.svg) center/contain no-repeat;mask:url(../img/bunchl.svg) center/contain no-repeat}
.ph-cap{position:relative;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.cph.soldp .ph-photo{opacity:.55}
@media (max-width:640px){.ph-photo{gap:8px}.ph-cap{font-size:11px}.ph-ic{width:30%}}

/* відео-заглушка: той самий фон + кнопка «play» і підпис */
.ph-video{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;
  background:linear-gradient(165deg,var(--soft) 0%,var(--mist) 55%,var(--cream) 100%);color:var(--muted)}
.ph-video:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.7),rgba(255,255,255,0) 64%)}
.ph-play{position:relative;width:64px;height:64px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 10px 24px rgba(63,122,84,.28)}
.ph-play:after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.ph-video .ph-cap{font-size:13px}
@media (max-width:640px){.ph-play{width:52px;height:52px}.ph-play:after{border-width:9px 0 9px 15px;margin-left:4px}}

/* колаж у блоці Rozetka: рамка фото — контейнер для заглушки */
.rcard .rph{position:relative}
.rcard .ph-photo{display:flex;margin:0;font-size:inherit}
.rcard .ph-ic{margin:0}
.rcard .ph-cap{margin:0;font-size:12px}

/* ===== Інтерактивність: наведення, натискання, фокус з клавіатури =====
   Принцип: кожна кнопка/посилання помітно змінює відтінок (темнішає) при наведенні, великі кнопки ще й «блищать» (по них проходить світла смуга),
   при натисканні кнопка «втискається», з клавіатури видно рамку фокусу. Круглі іконки шапки — лише затемнення, без рухів (див. layout.css).
   Палітра — та сама, що в дизайні (змінні --deep, --head, --mist, --soft, --cream2, --berry-ink, --burg). */

/* плавність */
.btn, .ask-c a, .tb-roz, .foot-roz, .tb-soc, .foot-soc a, .lg-c, .lg-c .ci, .fav, .fav .mk, .qty button, .cb-chip,
.cb-ck .bx, .arr button, .add, .sh-l, .faq-l, .faq-q, .faq-pm, .logo-a, .crumbs a,
.consent a, .lg-s a, .cb-ck a, .cb-cl a, .cb-cl .ci, .rv-bar label, .hero-arr {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease;
}

/* блиск на великих кнопках: світла смуга проходить зліва направо при наведенні (лежить під текстом) */
.btn, .ask-c a, .tb-roz, .foot-roz { position: relative; overflow: hidden; isolation: isolate }
.btn::after, .ask-c a::after, .tb-roz::after, .foot-roz::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  transform: translateX(-120%);
}
.btn svg, .tb-roz svg, .foot-roz svg { transition: transform .22s ease }
.mk-vb { -webkit-mask: url(../img/vb.svg) center/contain no-repeat; mask: url(../img/vb.svg) center/contain no-repeat }   /* значок Viber у підписі «Відгук з Viber» (його не було в дизайні — намальовано окремо) */
.tb-soc .mk { transition: background-color .22s ease }
.foot-soc a.c .mk { transition: background-color .22s ease }
/* TikTok у футері й топ-барі: окремий значок (img/tt-s.svg) — диск рівно 48 / 28 px без «виступів», нотка не більша за гліфи сусідів */
.foot-soc .mk-tt, .tb-soc .mk-tt { margin: 0 !important; -webkit-mask-image: url(../img/tt-s.svg); mask-image: url(../img/tt-s.svg) }
.foot-soc .mk-tt { width: 48px !important; height: 48px !important }
.tb-soc .mk-tt { width: 28px !important; height: 28px !important }

@media (hover: hover) {
  .btn:hover::after, .ask-c a:hover::after, .tb-roz:hover::after, .foot-roz:hover::after { transform: translateX(120%); transition: transform .75s ease }

  /* кремові кнопки (на кольорових блоках): темнішають до пісочного */
  .btn-c:hover { background: #E3D3B1; color: var(--berry-ink); box-shadow: 0 8px 20px rgba(30, 8, 20, .28) }
  /* контурні кнопки на бордовому: фон темнішає, рамка стає яскравішою */
  .btn-line:hover { background: rgba(20, 4, 12, .34); border-color: var(--cream); box-shadow: 0 8px 20px rgba(30, 8, 20, .28) }
  /* блок «Поділіться враженнями» (зелений) */
  .ask-c .a1:hover { background: var(--soft); color: var(--deep); box-shadow: 0 8px 20px rgba(20, 50, 30, .28) }
  .ask-c .a2:hover { background: rgba(20, 50, 30, .3); border-color: #fff; box-shadow: 0 8px 20px rgba(20, 50, 30, .28) }
  /* стрілка «↗» у кнопках на Rozetka трохи вилітає */
  .btn:hover svg:last-child, .tb-roz:hover svg, .foot-roz:hover svg { transform: translate(2px, -2px) }

  /* малинові кнопки «Rozetka» (топ-бар, футер): темнішають до ягідно-бордового */
  .tb-roz:hover, .foot-roz:hover { background: #8E3350 }
  /* соцкнопки топ-бару: Instagram і TikTok (білі круги) однаково темнішають до пісочного */
  .tb-soc:hover { background: var(--cream2) }
  .tb-soc.noc:hover { background: none }                                  /* TikTok: диск — це сам значок із вирізаною ноткою, тож підкладка не повинна її закривати */
  .tb-soc.noc:hover .mk { background: var(--cream2) !important }
  /* соцкнопки у футері: усі три однаково — гліф темнішає до глибокого зеленого, диск лишається кремовим */
  .foot-soc a:hover { background: var(--deep) }
  .foot-soc a.c:hover { background: var(--cream) }
  .foot-soc a.c:hover .mk { background: var(--deep) !important }

  /* посилання у футері: зсув + лінія, що «виїжджає» під текстом */
  .foot a.fl, .foot .fi a, .foot-bot a {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
    transition: background-size .28s ease, transform .22s ease, color .22s ease; padding-bottom: 1px;
  }
  .foot a.fl { width: fit-content; padding-bottom: 5px; margin-bottom: 0 }
  .foot a.fl:hover { color: #fff; transform: translateX(5px); background-size: 100% 2px }
  .foot .fi a:hover, .foot-bot a:hover { color: #fff; background-size: 100% 2px }

  .logo-a:hover { opacity: .82 }
  .crumbs a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px }
  .consent a:hover, .lg-s a:hover, .cb-ck a:hover { color: var(--berry-ink); text-decoration-color: var(--berry-ink) }
  .sh-l:hover, .faq-l:hover { color: var(--burg) }

  /* картки контактів (юридичні сторінки) */
  .lg-c:hover { background: var(--soft) }
  .lg-c:hover .ci { background: var(--cream); color: var(--deep) }

  /* контакти на сторінці співпраці та фільтр відгуків */
  .cb-cl a:hover { color: var(--cream) }
  .cb-cl a:hover .ci { background: rgba(255, 255, 255, .32) }
  .rv-bar label:hover { background: #4A1A2D; border-color: var(--cream) }
  .rvx:has(#rf-all:checked) label[for=rf-all]:hover, .rvx:has(#rf-tg:checked) label[for=rf-tg]:hover,
  .rvx:has(#rf-ig:checked) label[for=rf-ig]:hover, .rvx:has(#rf-vb:checked) label[for=rf-vb]:hover,
  .rvx:has(#rf-tk:checked) label[for=rf-tk]:hover { background: #fff; border-color: #fff }

  /* серце «в обране» на картках: круг заливається ягідним, серце білішає й «б’ється» */
  .fav:hover { background: var(--berry); box-shadow: 0 8px 18px rgba(212, 90, 120, .45); transform: scale(1.08) }
  .fav:hover .mk { background: #fff !important; animation: favBeat .55s ease }

  /* лічильник кількості */
  .qty button:hover { background: var(--mist); border-radius: 999px }

  /* вибір варіантів у формі */
  .cb-chip:hover { border-color: var(--head); background: var(--mist) }
  .sr:checked + .cb-chip:hover { background: var(--soft) }
  .cb-ck:hover .bx { border-color: var(--head); background: var(--mist) }
  .sr:checked + .cb-ck:hover .bx { background: var(--deep); border-color: var(--deep) }

  /* питання-відповіді */
  .faq-q:hover { color: var(--deep) }
  .faq-q:hover .faq-pm { background: var(--berry-ink) }

  /* крапки й стрілки банера */
  .dots button:hover { background: var(--head) }
  .dots button.on:hover { background: var(--deep) }
  .hero.on-dark .dots button:hover { background: rgba(244, 236, 221, .85) }
  .hero.on-dark .dots button.on:hover { background: #fff }
  .hero-arr:hover { background: var(--deep) }
  .hero.on-dark .hero-arr:hover { background: #E3D3B1; color: var(--berry-ink) }
}
@keyframes favBeat { 0% { transform: scale(1) } 28% { transform: scale(1.3) } 55% { transform: scale(.94) } 100% { transform: scale(1) } }

/* натискання */
.btn:active, .ask-c a:active, .tb-roz:active, .foot-roz:active, .add:active, .arr button:not(:disabled):active { transform: scale(.97) }
.fav:active, .tb-soc:active, .foot-soc a:active { transform: scale(.92) }
.hero-arr:active { transform: scale(.92) }
.qty button:active { background: var(--soft) }

/* фокус з клавіатури: видима рамка на всьому клікабельному */
a:focus-visible, button:focus-visible, summary:focus-visible, .cb-chip:focus-visible {
  outline: 3px solid var(--decor); outline-offset: 2px;
}
.foot a:focus-visible, .topbar a:focus-visible, .foot-soc a:focus-visible { outline-color: var(--cream) }
.sr:focus-visible + .cb-ck .bx { outline: 3px solid var(--decor); outline-offset: 2px }

@media (prefers-reduced-motion: reduce) {
  .btn, .ask-c a, .tb-roz, .foot-roz, .tb-soc, .foot-soc a, .lg-c, .lg-c .ci, .fav, .fav .mk, .qty button, .cb-chip,
  .cb-ck .bx, .arr button, .add, .sh-l, .faq-l, .foot a.fl, .foot .fi a, .foot-bot a, .faq-q, .faq-pm, .logo-a, .crumbs a,
  .consent a, .lg-s a, .cb-ck a, .cb-cl a, .cb-cl .ci, .rv-bar label, .hero-arr, .btn svg, .tb-roz svg, .foot-roz svg, .tb-soc .mk, .foot-soc a.c .mk { transition: none }
  .btn::after, .ask-c a::after, .tb-roz::after, .foot-roz::after { display: none }
  .foot a.fl:hover, .fav:hover, .btn:hover svg:last-child, .tb-roz:hover svg, .foot-roz:hover svg { transform: none }
  .fav:hover .mk { animation: none }
  .btn:active, .ask-c a:active, .tb-roz:active, .foot-roz:active, .add:active, .arr button:active,
  .fav:active, .tb-soc:active, .foot-soc a:active, .hero-arr:active { transform: none }
}

/* ===== Картки сортів (каталог, головна, «Схожі сорти», 404, кошик): фото й назва — посилання на сторінку сорту ===== */
:is(.pc, .card) .cph-a { position: absolute; inset: 0; display: block }
:is(.pc, .card) .cph img, :is(.pc, .card) .cph .ph-ic { transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .3s ease, filter .3s ease }
:is(.pc, .card) .cph .badge, :is(.pc, .card) .cph .fav { z-index: 2 }
:is(.pc, .card) .cph .badge { pointer-events: none }
:is(.pc, .card) .cname a { color: inherit; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: color .2s ease, background-size .28s ease; padding-bottom: 1px }
:is(.pc, .card) .cmeta { min-width: 0 }
:is(.pc, .card) .cmeta .dot { flex: none }
:is(.pc, .card) .cm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis }
:is(.pc, .card) .pcell { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease }
/* вибір форми саджанця на картці: однорічний / дворічний — клікабельні комірки */
.pc .pcell[data-form]:not(.no) { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent }
.pc .pcell[data-form]:focus-visible { outline: 2px solid var(--head); outline-offset: 2px }
:is(.pc, .card) .pbtn[aria-disabled="true"] { background: var(--mist); border-color: transparent; color: var(--muted); pointer-events: none; box-shadow: none }
:is(.pc, .card) .pbtn[aria-disabled="true"]::after { display: none }
@media (hover: hover) {
  /* фото чуть наближається й яскравішає (без руху — лише яскравість, якщо в системі «зменшити рух»); заглушка — гроно стає насиченішим */
  :is(.pc, .card):hover .cph img { transform: scale(1.045); filter: saturate(1.08) brightness(1.02) }
  :is(.pc, .card):hover .cph .ph-ic { opacity: 1; filter: saturate(1.2) }
  :is(.pc, .card) .cname a:hover, :is(.pc, .card):hover .cname a { color: var(--head) }
  :is(.pc, .card) .cname a:hover { background-size: 100% 2px }
  /* комірки «Однорічний / Дворічний»: невибрана підсвічується, вибрана трохи темнішає */
  .pc .pcell[data-form]:not(.no):not(.sel):hover { border-color: var(--head); background: var(--mist) }
  .pc .pcell.sel:hover { background: var(--soft) }
}
:is(.pc, .card) .cname a:focus-visible, :is(.pc, .card) .cph-a:focus-visible { outline: 3px solid var(--decor); outline-offset: 3px; border-radius: 6px }
@media (prefers-reduced-motion: reduce) {
  :is(.pc, .card) .cph img, :is(.pc, .card) .cph .ph-ic, :is(.pc, .card) .cname a, :is(.pc, .card) .pcell { transition: none }
  :is(.pc, .card):hover .cph img { transform: none }
}

/* ===== Кнопка «Вгору»: закріплена в правому нижньому куті; на початку сторінки її немає ===== */
.uag .totop {
  position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream); color: var(--head); display: grid; place-items: center;          /* як у макеті: кремовий кружок, зелена стрілка */
  box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(36, 59, 45, .3);
  transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
/* з JS: прихована, виїжджає знизу з прозорості; без JS — завжди видима (звичайне посилання на початок) */
.js .uag .totop {
  opacity: 0; visibility: hidden; transform: translateY(26px);
  transition: opacity .3s ease, transform .38s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .38s, background-color .2s ease, color .2s ease;
}
.js .uag .totop.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s }
.uag .totop:focus-visible { outline: 3px solid var(--decor); outline-offset: 5px }
@media (hover: hover) {
  .js .uag .totop.show:hover, .uag .totop:hover { background: var(--cream2); color: var(--deep); transform: translateY(-3px) }
}
.js .uag .totop.show:active, .uag .totop:active { transform: scale(.92) }
@media (max-width: 640px) {
  .uag .totop { right: 16px; bottom: 16px; width: 46px; height: 46px }
}
@media (prefers-reduced-motion: reduce) {
  .js .uag .totop { transform: none; transition: opacity .15s linear, visibility 0s linear .15s }
  .js .uag .totop.show { transition-delay: 0s }
  .uag .totop:hover, .js .uag .totop.show:hover, .js .uag .totop.show:active, .uag .totop:active { transform: none }
}

/* ===== Пошук сорту в шапці: попап під шапкою з полем і результатами =====
   Розмітку (кнопка в шапці, пункт мобільного меню, сам попап і затемнення) додає збірка на кожну сторінку; логіка — js/search.js.
   Затемнення лежить поза шапкою (position:fixed під шапкою), тому шапка лишається яскравою, а сторінка під нею — приглушеною. */
.srch{position:absolute;left:0;right:0;top:100%;z-index:60;pointer-events:none}
.srch[hidden],.srch-dim[hidden]{display:none}
.srch-w{max-width:1240px;margin:0 auto;padding:10px 24px 0;display:flex;justify-content:flex-end}
.srch-box{pointer-events:auto;width:min(540px,100%);background:#fff;border-radius:26px;padding:14px;
  box-shadow:0 30px 70px rgba(36,59,45,.28),0 0 0 1px var(--line);
  opacity:0;transform:translateY(-10px) scale(.985);transform-origin:top right;
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.3,1)}
.srch.on .srch-box{opacity:1;transform:none}
.srch-dim{position:fixed;inset:0;z-index:45;background:rgba(36,59,45,.34);opacity:0;transition:opacity .22s ease}
.srch-dim.on{opacity:1}

/* поле */
.srch-f{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 8px 0 18px;border-radius:999px;background:var(--mist);
  transition:background-color .2s ease,box-shadow .2s ease}
.srch-f:focus-within{background:#fff;box-shadow:0 0 0 2px var(--green)}
.srch-f .srch-ic{flex:none;width:22px;height:22px;background:var(--green)}
.srch-f input{flex:1 1 auto;min-width:0;height:54px;padding:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:16px;font-weight:700;color:var(--ink);-webkit-appearance:none;appearance:none}
.srch-f input::placeholder{color:var(--muted);font-weight:400;opacity:1}
.srch-f input::-webkit-search-cancel-button,.srch-f input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.srch-x{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--deep);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background-color .2s ease,color .2s ease}

/* результати */
.srch-res{margin:10px -6px 0;padding:0 6px;max-height:min(392px,calc(100vh - var(--hdr-h) - 190px));max-height:min(392px,calc(100dvh - var(--hdr-h) - 190px));
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.srch-h{padding:8px 10px 6px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.srch-it{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 10px;border-radius:18px;color:var(--ink);
  transition:background-color .15s ease}
.srch-it:focus{background:var(--mist);outline:0}
.srch-ph{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:15px;overflow:hidden;
  background:linear-gradient(165deg,var(--mist) 0%,#F1F6EC 55%,var(--cream) 100%)}
.srch-ph img{display:block;width:100%;height:100%;object-fit:cover}
.srch-ph .ph-ic{width:44%;max-width:none;margin:0}
.srch-tx{min-width:0}
.srch-tx b{display:block;font-size:16px;line-height:1.25;color:var(--deep);overflow-wrap:anywhere}
.srch-tx small{display:block;margin-top:3px;font-size:13px;line-height:1.3;color:var(--muted)}
.srch-pr{font-size:14px;font-weight:700;color:var(--berry-ink);white-space:nowrap;text-align:right}
.srch-po{display:block;font-size:11px;font-weight:600;color:var(--muted);line-height:1.2}
.srch-it mark{background:var(--soft);color:inherit;border-radius:4px;padding:0 1px}
.srch-msg{padding:18px 12px 12px;text-align:center;font-size:15px;line-height:1.5;color:var(--muted)}
.srch-msg b{display:block;margin-bottom:4px;font-size:16px;color:var(--deep)}
.srch-all{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;min-height:48px;padding:0 20px;border-radius:999px;
  background:var(--green);color:#fff;font-size:15px;font-weight:700;
  transition:background-color .2s ease,color .2s ease,transform .2s ease}
.srch-all.o{background:var(--mist);color:var(--deep)}
.srch-st{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (hover:hover){
  .srch-it:hover{background:var(--mist)}
  .srch-x:hover{background:var(--soft);color:var(--ink)}
  .srch-all:hover{background:var(--deep)}
  .srch-all.o:hover{background:var(--soft)}
}
.srch-all:active{transform:scale(.98)}
.srch-all:focus-visible,.srch-x:focus-visible{outline:3px solid var(--decor);outline-offset:-3px}
.srch-it:focus-visible{box-shadow:inset 0 0 0 3px var(--decor)}

@media (max-width:1100px){.srch-w{padding:10px 32px 0}}
@media (max-width:640px){
  .srch-w{padding:8px 12px 0}
  .srch-box{border-radius:22px;padding:12px}
  .srch-it{grid-template-columns:48px minmax(0,1fr) auto;gap:12px}
  .srch-ph{width:48px;height:48px;border-radius:13px}
}
@media (prefers-reduced-motion:reduce){
  .srch-box,.srch-dim,.srch-f,.srch-it,.srch-x,.srch-all{transition:none}
  .srch-box{transform:none}
}

/* ===== Кошик й «Обране» на всіх сторінках: бічна панель, «Додано в кошик», лічильник у шапці =====
   Розмітка й розміри — з бордів Ov-Cart / Ov-Fav / Ov-Toast (там усе намальовано абсолютним позиціонуванням у фрейму 1440×900; на сайті — fixed).
   Скрипти: js/cart.js (панель, повідомлення), js/fav.js («Обране»). Підключається в кінець site.css. */

/* лічильник у шапці: «підскакує», коли товар додано */
.cnt.bump { animation: cntBump .5s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes cntBump { 0% { transform: scale(1) } 40% { transform: scale(1.5) } 100% { transform: scale(1) } }

/* поки відкрита панель, сторінка під нею не гортається (відступ = ширина смуги прокрутки, щоб нічого не «стрибало») */
html.dr-lock { overflow: hidden; padding-right: var(--sbw, 0) }

/* кількість «− 2 +» і перемикач форми «Однорічний | Дворічний» (на сторінці сорту й кошика їх теж задає shop.css; тут — щоб панелі працювали на всіх сторінках) */
.qty2 { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; height: 56px; padding: 0 4px; flex: none; background: #fff }
.qty2 button { width: 40px; height: 44px; border: 0; background: none; color: var(--tx); display: grid; place-items: center; padding: 0; cursor: pointer; font: inherit }
.qty2 span { min-width: 24px; text-align: center; font-weight: 700; font-size: 17px; color: var(--deep) }
.seg { display: flex; gap: 4px; background: var(--mist); border-radius: 16px; padding: 4px; margin-top: 12px }
.sg { flex: 1 1 0; min-width: 0; border-radius: 12px; padding: 6px 8px 7px; text-align: center; color: var(--tx); cursor: pointer }
.sg small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.25 }
.sg b { display: block; font-size: 15px; line-height: 1.3; color: var(--deep); white-space: nowrap }
.sg.on { background: #fff; box-shadow: 0 3px 10px rgba(36, 59, 45, .14), inset 0 0 0 1.5px var(--head) }
.sg.on b { color: var(--head) }
.sg.no { cursor: default }
.sg.no b { font-size: 12px; color: var(--muted); font-weight: 700; padding: 2px 0 1px }
.askl { display: block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--berry-ink); text-align: center }
.askl span { border-bottom: 1.5px solid currentColor; transition: color .2s ease }
@media (hover: hover) { .askl:hover span { color: var(--burg) } }

/* ---------- бічна панель ---------- */
.drw { position: fixed; inset: 0; z-index: 200 }
.drw[hidden] { display: none }
.ov { position: absolute; inset: 0; background: rgba(36, 59, 45, .46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ovIn .3s ease both }
.ov.out { animation: ovOut .26s ease both }
@keyframes ovIn { from { opacity: 0 } }
@keyframes ovOut { to { opacity: 0 } }
.dr { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, calc(100% - 32px)); background: #fff; border-radius: 32px 0 0 32px; box-shadow: -24px 0 64px rgba(36, 59, 45, .22);
  display: flex; flex-direction: column; overflow: hidden; outline: 0; animation: drIn .36s cubic-bezier(.2, .85, .25, 1) both }
.dr.out { animation: drOut .26s cubic-bezier(.5, 0, .8, .4) both }
@keyframes drIn { from { transform: translateX(100%) } to { transform: none } }
@keyframes drOut { to { transform: translateX(100%) } }
.dr-h { display: flex; align-items: center; gap: 12px; padding: 26px 28px 18px }
.dr-h h2 { font-size: 24px; color: var(--head); line-height: 1.1 }
.dr-n { background: var(--mist); color: var(--tx); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 12px }
.dr-c { margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--mist); color: var(--tx); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background-color .2s ease, color .2s ease }
.dr-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 28px; overscroll-behavior: contain }
.dr-f { flex: none; padding: 18px 28px 24px; border-top: 1.5px solid var(--line); box-shadow: 0 -12px 30px rgba(36, 59, 45, .06); background: #fff }
.dr-r { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; color: var(--muted); margin-bottom: 6px }
.dr-r b { color: var(--berry-ink); font-size: 15px }
.dr-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.dr-tot span { font-size: 15.5px; font-weight: 700; color: var(--tx) }
.dr-tot b { font-size: 32px; line-height: 1.1; color: var(--deep) }
.dr-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 4px 0 16px; text-wrap: balance }
.dr-warn { font-size: 13px; font-weight: 700; color: var(--berry-ink); line-height: 1.4; margin: -6px 0 14px }
.dr-btn { width: 100%; min-height: 54px; font-size: 16px }
.dr-btn + .dr-btn { margin-top: 10px }
.dr-btn[aria-disabled="true"] { background: var(--soft); color: var(--muted); border-color: transparent; box-shadow: none; cursor: not-allowed }
.btn-g { background: #fff; color: var(--deep); border-color: var(--green) }
.btn-g::after { display: none }                                            /* світла кнопка — світлий блиск майже не видно, тож без нього (лишається лише зміна фону) */
.dr-f .askl { margin-top: 14px }
.dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1.5px dashed var(--soft) }
.dl:last-child { border-bottom: 0 }
.dl-ph { position: relative; display: block; width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: var(--mist) }
.dl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2, .8, .3, 1) }
.dl-main { min-width: 0 }
.dl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px }
.dl-name { font-size: 17px; line-height: 1.2; color: var(--tx); margin: 0 }
.dl-x { flex: none; border: 0; background: none; color: var(--muted); padding: 4px; margin: -2px -4px 0 0; border-radius: 8px; display: grid; place-items: center; cursor: pointer; transition: color .2s ease, background-color .2s ease }
.dl-form { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 4px }
.dl-bad { color: var(--berry-ink) }
.dl.bad .dl-ph { opacity: .6 }
.dl-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px }
.dl-qty { height: 40px }
.dl-qty button { width: 32px; height: 32px }
.dl-qty span { color: var(--deep); font-size: 15px; min-width: 20px }
.dl-pr { text-align: right; line-height: 1.15 }
.dl-pr b { display: block; font-size: 19px; color: var(--deep); white-space: nowrap }
.dl-pr s { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; white-space: nowrap }
.dr-e { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px 60px }
.dr-e .emp-ic { margin-bottom: 22px }
.dr-e h3 { font-size: 24px; color: var(--head); line-height: 1.2 }
.dr-e p { font-size: 15px; color: var(--muted); margin: 12px 0 26px; max-width: 320px }
.dr-e .btn { min-width: 220px }
/* «Обране» */
.fv { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "ph main" "btn btn"; gap: 14px; padding: 18px 0; border-bottom: 1.5px dashed var(--soft) }
.fv:last-child { border-bottom: 0 }
.fv .dl-ph { grid-area: ph }
.fv-main { grid-area: main; min-width: 0 }
.fv-main .cmeta { margin-top: 3px }
.fv-main .seg { margin-top: 10px }
.fv-h { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--mist); color: var(--berry-ink); display: grid; place-items: center; padding: 0; cursor: pointer; margin-top: -4px; transition: background-color .2s ease, color .2s ease }
.fv-btn { grid-area: btn; width: 100%; min-height: 46px; padding: 10px 20px; font-size: 15px }
.fv-sold { background: var(--soft); color: var(--tx); pointer-events: none }
.fv .sg { font: inherit; border: 0; background: none; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease }
.fv .sg.no { cursor: not-allowed }
.fv .sg:focus-visible { outline: 3px solid var(--decor); outline-offset: 1px }

/* заглушка фото в маленьких мініатюрах (кошик, панель, повідомлення, підсумок замовлення) */
.ph-photo.ph-s { position: relative; inset: auto; width: 100%; height: 100%; gap: 0 }
.ph-photo.ph-s .ph-ic { width: 38%; max-width: none }
.co-si .ph-photo.ph-s, .co-si img { width: 56px; height: 56px; border-radius: 14px }

/* ---------- «Додано в кошик» ---------- */
.ts-w { position: fixed; left: 0; right: 0; bottom: 28px; z-index: 220; display: flex; justify-content: center; padding: 0 16px; pointer-events: none }
.toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: 100%; max-width: 680px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 26px; padding: 14px 16px 18px 14px; box-shadow: 0 26px 64px rgba(36, 59, 45, .30) }
.toast[hidden] { display: none }
.toast.in { animation: tsIn .5s cubic-bezier(.2, .9, .25, 1.12) both }
.toast.out { animation: tsOut .26s cubic-bezier(.5, 0, .8, .3) both }
@keyframes tsIn { from { transform: translateY(150%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes tsOut { to { transform: translateY(150%); opacity: 0 } }
.ts-ph { position: relative; flex: none; width: 62px; height: 62px }
.ts-ph img, .ts-ph .ph-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; overflow: hidden }
.ts-ph .ph-photo { background: var(--mist) }
.ts-ok { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; border: 3px solid #fff; display: grid; place-items: center }
.ts-t { flex: 1; min-width: 0; line-height: 1.3 }
.ts-t b { display: block; font-size: 16.5px; color: var(--tx) }
.ts-t span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ts-b { flex: none; min-height: 46px; padding: 10px 22px; font-size: 15px }
.ts-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--mist); color: var(--tx); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background-color .2s ease }
.ts-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--green); transform-origin: left center; animation: tsBar var(--ts-ms, 6000ms) linear forwards }
@keyframes tsBar { from { transform: scaleX(1) } to { transform: scaleX(0) } }

/* ---------- стани наведення, фокус ---------- */
.qty2 button { transition: background-color .2s ease, color .2s ease, opacity .2s ease }
.qty2 button:disabled { opacity: .35; cursor: not-allowed }
.dr-c:focus-visible, .dl-x:focus-visible, .fv-h:focus-visible, .ts-x:focus-visible, .qty2 button:focus-visible, .dl-ph:focus-visible { outline: 3px solid var(--decor); outline-offset: 2px }
@media (hover: hover) {
  .dr-c:hover, .ts-x:hover { background: var(--soft); color: var(--deep) }
  .dl-x:hover { color: var(--berry-ink); background: var(--mist) }
  .dl-ph:hover img { transform: scale(1.06) }
  .qty2 button:not(:disabled):hover { background: var(--mist); border-radius: 999px }
  .btn-g:hover { background: var(--mist) }
  .fv-h:hover { background: var(--berry); color: #fff }
  .fv .sg:not(.on):not(.no):hover { background: rgba(255, 255, 255, .7) }
}
.dl-x:active, .fv-h:active { transform: scale(.92) }

@media (prefers-reduced-motion: reduce) {
  .dr, .ov, .toast.in, .cnt.bump { animation: none !important }
  .ts-bar { animation-duration: var(--ts-ms, 6000ms) }
  .dl-ph img { transition: none }
}
@media (max-width: 640px) {
  .dr { border-radius: 26px 0 0 26px }
  .dr-h { padding: 20px 20px 14px }
  .dr-h h2 { font-size: 22px }
  .dr-c { width: 40px; height: 40px }
  .dr-b { padding: 0 20px }
  .dr-f { padding: 16px 20px 20px }
  .dr-tot b { font-size: 28px }
  .dl, .fv { grid-template-columns: 68px minmax(0, 1fr); gap: 12px }
  .dl-ph { width: 68px; height: 68px; border-radius: 16px }
  .dl-name { font-size: 16px }
  .dr-btn { min-height: 50px; font-size: 15.5px }
  .dr-e { padding: 0 24px 48px }
  .ts-w { bottom: 14px; padding: 0 12px }
  body[data-page^="product-"] .ts-w, body[data-page="cart"] .ts-w { bottom: 96px }
  .toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; padding: 14px 14px 20px; border-radius: 24px }
  .ts-ph { width: 54px; height: 54px }
  .ts-t b { font-size: 15.5px }
  .ts-t span { font-size: 12.5px }
  .ts-b { grid-column: 1 / -1; width: 100%; order: 3 }
}

/* ---------- «Обране»: серце натиснуто, кнопки панелі ---------- */
.fav[aria-pressed="true"] { background: var(--berry); box-shadow: 0 6px 14px rgba(212, 90, 120, .4) }
.fav[aria-pressed="true"] .mk { background: #fff !important }
.fav.pop .mk, .heartb.pop .mk { animation: favBeat .55s ease }
@media (prefers-reduced-motion: reduce) { .fav.pop .mk, .heartb.pop .mk { animation: none } }
.fv-ok { background: var(--deep); gap: 8px }
.fv-ok svg { flex: none }
.askl-b { border: 0; background: none; width: 100%; font: inherit; cursor: pointer; padding: 0 }
.askl-b:focus-visible { outline: 3px solid var(--decor); outline-offset: 2px; border-radius: 8px }
.fv-main .dl-name a { color: inherit }