/* ===== base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #fff; }
body { overflow-x: hidden; font-family: Montserrat, sans-serif; color: #111; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
ul { list-style: none; }

/* helpers (координаты — из макета Figma) */
.a { position: absolute; }
.c { transform: translateY(-50%); white-space: nowrap; }
.cy { transform: translateY(-50%); }
.cxy { transform: translate(-50%, -50%); white-space: nowrap; }
.ov { overflow: hidden; }
.cover { object-fit: cover; }
.fill { display: block; width: 100%; height: 100%; }
.flexc { display: flex; align-items: center; justify-content: center; }
.bi { position: absolute; display: block; background: no-repeat 0 0 / 100% 100%; }
.ico { display: block; }
.ico i { position: absolute; display: block; }

.m { display: none; }
@media (max-width: 767.98px) {
  .d { display: none; }
  .m { display: block; }
}

/* ===================== DESKTOP ===================== */
.d { min-width: 0; }
.band { position: relative; width: 100%; }
.wrap { position: relative; width: 1440px; height: 100%; margin: 0 auto; }

/* nav */
.dnav a { position: absolute; top: 37.18px; transform: translateY(-50%); font: 800 13.428px Montserrat; color: #262626; white-space: nowrap; }
.navtxt { font: 800 12.395px Montserrat; color: #262626; }
.dnav a:hover, .navtxt:hover { color: #007146; }

/* search */
.dsearch { position: absolute; left: 0; top: 0; width: 877.28px; height: 45.45px; border: 0; outline: 0; background: #fff; padding: 0 16.53px; font: 400 14.461px Montserrat; color: #111; }
.dsearch::placeholder { color: #9e9e9e; }
.dbadge { position: absolute; width: 16.527px; height: 16.527px; border-radius: 8.264px; background: #007146; color: #fff; font: 700 8.75px/16.527px Montserrat; text-align: center; }

/* hero */
.sliderbtn { position: absolute; width: 41.318px; height: 41.318px; background: rgba(0,0,0,.4); border: 1.033px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; }
.sliderbtn img { width: 16.527px; height: 16.527px; }
.feat-t { font: 700 20.659px/19.626px Montserrat; color: #111; }
.feat-s { font: 600 12.395px/13.428px Montserrat; color: #9e9e9e; }

/* headings / links */
.h2d { font: 800 22.725px Montserrat; letter-spacing: -.2273px; color: #111; }
.more { display: flex; align-items: center; gap: 3.78px; height: 15.494px; font: 700 12.395px Montserrat; color: #000; white-space: nowrap; }
.more img { width: 14.461px; height: 14.461px; }
.more.green { color: #007146; }

/* brands */
.brand { background: #f2f0f0; border-radius: 10.834px; }
.brand-t { font: 600 15.494px/17.56px Montserrat; color: #5b5b5b; text-align: center; white-space: normal; }

/* product card (desktop) */
.pc { position: absolute; width: 225.87px; height: 389.62px; background: #f5f5f5; border: 1.033px solid #e8e8e8; overflow: hidden; --nl: 16.53px; }
.pc .ia { position: absolute; left: 0; right: 0; top: 0; height: 206.591px; overflow: hidden; background: #f5f5f5; isolation: isolate; }
.pc .ia img { mix-blend-mode: multiply; } /* фото на белом фоне ложатся на серую подложку, как в макете */
.pc .nm, .pc .st, .pc .cnt, .pc .op, .pc .pr { position: absolute; transform: translateY(-50%); white-space: nowrap; }
.pc .nm { left: var(--nl); top: var(--n); font: 600 13.428px/18.8px Montserrat; color: #111; }
.pc.two .nm { line-height: 15.494px; }
.pc .st { left: var(--nl); top: var(--s); font: 400 12.395px Montserrat; letter-spacing: 1.033px; color: #f5a623; }
.pc .cnt { left: calc(var(--nl) + 71.27px); top: calc(var(--s) + 1.03px); font: 400 11.363px Montserrat; color: #9e9e9e; }
.pc .op { left: calc(var(--nl) + 1.03px); top: var(--o); font: 500 13.428px Montserrat; color: #9e9e9e; text-decoration: line-through; }
.pc .pr { left: var(--nl); top: var(--p); font: 800 20.659px Montserrat; letter-spacing: -.4132px; color: #111; }
.pc .btn { position: absolute; left: 16.53px; right: 16.53px; top: 334.88px; height: 36.153px; border-radius: 5.165px; background: #007146; font: 700 12.395px Montserrat; letter-spacing: .6198px; color: #fff; transition: background .15s; }
.pc .btn:hover { background: #005a38; }
.hrt { position: absolute; left: 194.2px; top: 10.33px; width: 21.692px; height: 19.626px; cursor: pointer; }
.bdg { position: absolute; height: 22.725px; padding-left: 10.33px; font: 700 11.363px/22.725px Montserrat; letter-spacing: .3409px; color: #fff; white-space: nowrap; }
.bdg.hit { background: #8246c0; width: 43.518px; }
.bdg.new { background: #3a49ed; width: 75.406px; }
.bdg.sale { background: #e62528; width: 68.175px; }
.nextbtn { position: absolute; width: 52.681px; height: 52.681px; }

/* catalog tabs */
.tab-d { position: absolute; top: 290.12px; height: 50.615px; border-radius: 5.165px; background: #eeefee; padding-left: 20.66px; text-align: left; font: 500 22.725px Montserrat; letter-spacing: -.2273px; color: #5b5c5f; white-space: nowrap; }
.tab-d.on { background: #007146; color: #fff; font-weight: 600; }

/* collections */
.col { position: absolute; display: block; width: 471.028px; height: 227.25px; overflow: hidden; }
.col-t { position: absolute; left: 31.85px; transform: translateY(-50%); font: 800 27.82px Montserrat; text-transform: uppercase; color: #000; white-space: nowrap; }
.col-b { position: absolute; left: 31.85px; width: 163.094px; height: 32.619px; background: #00a651; border-radius: 7.065px; }
.col-bt { position: absolute; left: 49.65px; transform: translateY(-50%); font: 700 16.086px Montserrat; text-transform: uppercase; color: #fff; white-space: nowrap; }
.col-ch { position: absolute; left: 174.19px; width: 6.74px; height: 13.43px; }
.col-ch img { position: absolute; left: -12.06%; top: -6.03%; width: 136.19%; height: 112.06%; }

/* blog */
.blog { position: absolute; display: block; width: 347.07px; height: 309.05px; background: #fff; border: 1.033px solid #e8e8e8; overflow: hidden; }
.blog-bdg { position: absolute; height: 21.692px; width: 73.34px; padding-left: 10.33px; font: 700 10.33px/21.692px Montserrat; letter-spacing: .8264px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.blog-d, .blog-v { position: absolute; left: 16.53px; transform: translateY(-50%); font: 400 11.363px Montserrat; color: #9e9e9e; white-space: nowrap; }
.blog-v { left: 34.09px; }
.blog-t { position: absolute; left: 16.53px; transform: translateY(-50%); font: 700 14.461px/20.246px Montserrat; color: #111; white-space: nowrap; }
.blog-eye { position: absolute; left: 16.53px; width: 13.428px; height: 13.428px; }
.blog-eye::before, .blog-eye::after { content: ""; position: absolute; background: no-repeat 0 0 / 100% 100%; }
.blog-eye::before { left: -.07px; top: 1.68px; width: 13.57px; height: 10.07px; background-image: url(assets/ic-eye-1.svg); }
.blog-eye::after { left: 4.48px; top: 4.48px; width: 4.48px; height: 4.48px; background-image: url(assets/ic-eye-2.svg); }

/* video */
.vid { position: absolute; top: 86px; display: block; width: 346.8px; height: 253.684px; overflow: hidden; }
.vid-i { position: absolute; left: 0; right: 0; top: 0; height: 185.932px; overflow: hidden; background: linear-gradient(135deg, #1a1a1a, #0d1f15); }
.vid-dur { position: absolute; right: 10.33px; bottom: 10.33px; width: 47.8px; height: 20.659px; padding-left: 8.27px; background: rgba(0,0,0,.75); font: 600 11.363px/20.659px Montserrat; color: #fff; }
.vid-play { position: absolute; left: 50%; top: 50%; width: 53.714px; height: 53.714px; margin: -26.857px 0 0 -26.857px; border-radius: 26.857px; background: rgba(0,113,70,.9); transition: transform .15s; }
.vid:hover .vid-play { transform: scale(1.08); }
.vid-play img { position: absolute; left: calc(50% + 1.55px); top: 50%; width: 20.659px; height: 20.659px; transform: translate(-50%, -50%); }
.vid-t, .vid-s { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; }
.vid-t { top: 209.69px; font: 700 14.461px/20.246px Montserrat; color: #111; }
.vid-s { top: 232.41px; font: 400 11.363px Montserrat; color: #9e9e9e; }

/* subscribe */
.dsub { position: absolute; left: 0; top: 0; width: 536.86px; height: 51.648px; border: 0; outline: 0; background: transparent; padding: 0 20.66px; font: 400 14.461px Montserrat; color: #fff; }
.dsub::placeholder { color: rgba(255,255,255,.35); }

/* footer */
.fh { position: absolute; transform: translateY(-50%); font: 700 12.395px Montserrat; letter-spacing: 1.2395px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.fl { position: absolute; margin-top: -5.17px; }
.fl li { height: 28.922px; display: flex; align-items: center; }
.fl a { font: 400 13.428px Montserrat; color: rgba(255,255,255,.45); white-space: nowrap; }
.fl a:hover { color: #fff; }
.fsoc { top: 123.95px; width: 32.78px; height: 33.055px; background: rgba(255,255,255,.07); font: 700 10.33px Montserrat; color: rgba(255,255,255,.5); }
.fpay { position: absolute; top: 50%; transform: translateY(-50%); height: 24.791px; padding-left: 10.33px; background: rgba(255,255,255,.08); border: 1.033px solid rgba(255,255,255,.12); font: 700 11.363px/22.725px Montserrat; color: rgba(255,255,255,.5); }

/* ===================== MOBILE (фрейм 320) ===================== */
.m { position: relative; width: 320px; height: 4371px; overflow: hidden; background: #fff; }
.hscroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }

.mbadge { position: absolute; right: 4.1px; top: 4.1px; width: 13.124px; height: 13.124px; border-radius: 7.382px; background: #007146; color: #fff; font: 700 8.202px/13.124px Arial, sans-serif; text-align: center; }
.msearch { position: absolute; left: 31.17px; top: 0; right: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 11.483px Inter; color: #111417; }
.msearch::placeholder { color: #8b9197; }

.mside { top: 261.47px; width: 142.72px; height: 102.684px; border-radius: 9.843px; background: linear-gradient(140deg, #0e1a14 0%, #06110c 100%); }
.mside-t { font: 700 12.303px/14.764px Inter; color: #fff; }
.mside-s { font: 400 9.843px/13.288px Inter; color: #fff; opacity: .75; }
.mside-b { left: 9.84px; top: 63.31px; height: 29.528px; border-radius: 5.742px; background: #008b44; font: 600 10.663px Inter; color: #fff; }

.madv { top: 25.53px; font: 600 10.663px/10.663px Inter; color: #111417; }

.mh2 { height: 22.146px; font: 700 16.405px/22.146px Inter; letter-spacing: -.3281px; color: #111417; white-space: nowrap; }
.mmore { display: flex; align-items: center; height: 36.09px; gap: 3.01px; font: 500 10.663px/14.395px Inter; color: #4a5158; white-space: nowrap; }
.mmore img { width: 9.843px; height: 9.843px; }

.mbrand { position: absolute; top: 0; width: 158.38px; height: 71.461px; border-radius: 7.666px; background: #f2f0f0; }
.mbrand-t { position: absolute; left: 50%; top: 49.64px; width: 89.857px; transform: translate(-50%, -50%); font: 600 7.65px/8.67px Montserrat; color: #5b5b5b; text-align: center; }

/* product card (mobile) */
.mc { position: absolute; width: 142.72px; border: .82px solid #e6e8ea; border-radius: 9.843px; background: #fff; }
.mc.nobg { background: transparent; }
.mnm, .mst, .mcnt, .mop, .mpr { position: absolute; left: 8.2px; transform: translateY(-50%); white-space: nowrap; }
.mnm { top: var(--n); font: 500 10.663px/13.862px Inter; color: #111417; }
.mst { top: 177.99px; font: 700 9.023px/12.18px Inter; letter-spacing: .8202px; color: #f5a623; }
.mcnt { left: 60.7px; top: 177.99px; font: 400 9.023px/12.18px Inter; color: #8b9197; }
.mop { top: 193.85px; font: 400 9.843px/13.288px Inter; color: #8b9197; text-decoration: line-through; }
.mpr { top: 210.82px; font: 800 13.944px/18.824px Inter; color: #111417; }
.mc.three .mst, .mc.three .mcnt { top: 191.66px; }
.mc.three .mop { top: 207.53px; }
.mc.three .mpr { top: 224.5px; }
.mbtn { position: absolute; left: 8.2px; right: 8.2px; bottom: 8.2px; height: 29.528px; border-radius: 5.742px; background: #007146; font: 600 10.663px Inter; color: #fff; }
.mbdg { position: absolute; left: 8.2px; top: 115.65px; font-family: Montserrat; font-weight: 700; color: #fff; white-space: nowrap; }
.mbdg.hit { width: 32.565px; height: 17.005px; padding-left: 7.73px; background: #8246c0; font-size: 8.503px; line-height: 17.005px; letter-spacing: .2551px; }
.mbdg.new { top: 113.19px; width: 54.135px; height: 16.315px; padding-left: 7.41px; background: #3a49ed; font-size: 8.157px; line-height: 16.315px; letter-spacing: .2447px; }
.mbdg.sale { width: 50.034px; height: 16.678px; padding-left: 7.58px; background: #e62528; font-size: 8.339px; line-height: 16.678px; letter-spacing: .2502px; }
.mhrt { position: absolute; left: 117.29px; top: 13.36px; width: 12.303px; height: 11.132px; }

.mtab { position: absolute; top: 1.64px; height: 32.809px; padding-left: 10.66px; border: .82px solid #e6e8ea; background: #fff; text-align: left; font: 500 11.483px/15.502px Inter; color: #4a5158; white-space: nowrap; }
.mtab.on { background: #007146; border-color: #007146; color: #fff; font-weight: 600; }

.mcol { position: absolute; display: block; width: 142.72px; height: 91.866px; border-radius: 9.843px; overflow: hidden; background: #e4e3e3; }
.mcol-t { left: 12.3px; font: 800 11.501px/13.035px Montserrat; letter-spacing: -.115px; text-transform: uppercase; color: #111417; }
.mcol-b { position: absolute; left: 0; right: 0; bottom: -4.92px; height: 29.528px; padding-bottom: 8.2px; border-radius: 5.742px; background: #00a651; display: flex; align-items: center; justify-content: center; font: 600 10.663px Inter; color: #fff; }

.mblog { position: absolute; width: 205.057px; height: 181.65px; }
.mblog-i { position: absolute; left: 0; top: 0; width: 205.057px; height: 128.16px; border-radius: 6.562px; overflow: hidden; background: #f4f5f7; }
.mblog-bdg { position: absolute; left: 6.56px; top: 6.56px; height: 18.734px; padding-left: 6.56px; border-radius: 2.461px; font: 700 9.023px/18.734px Inter; color: #fff; white-space: nowrap; }
.mblog-t { left: 0; font: 500 11.483px/14.928px Inter; color: #111417; white-space: nowrap; }
.mblog-d { left: 0; font: 400 9.023px/12.18px Inter; color: #8b9197; white-space: nowrap; }

.mvid { position: absolute; top: 1.64px; width: 205.057px; height: 166.74px; }
.mvid-i { position: absolute; left: 0; top: 0; width: 205.057px; height: 128.16px; border-radius: 6.562px; overflow: hidden; background: #f4f5f7; }
.mvid-play { position: absolute; left: 86.12px; top: 47.68px; width: 32.817px; height: 32.809px; border-radius: 16.405px; background: rgba(255,255,255,.9); }
.mvid-play i { position: absolute; left: 13.12px; top: 10.66px; width: 0; height: 0; border-left: 9.023px solid #007146; border-top: 5.742px solid transparent; border-bottom: 5.742px solid transparent; }
.mvid-dur { position: absolute; left: 165.87px; top: 107.25px; width: 32.63px; height: 14.354px; padding-left: 4.92px; border-radius: 3.281px; background: rgba(0,0,0,.7); font: 400 8.202px/14.354px Inter; color: #fff; }
.mvid-t, .mvid-s { left: 0; white-space: nowrap; }
.mvid-t { top: 141.7px; font: 500 11.483px/14.928px Inter; color: #111417; }
.mvid-s { top: 160.31px; font: 400 9.023px/12.18px Inter; color: #8b9197; }

.msub { width: 293.65px; height: 37.731px; padding: 0 11.48px; border: 0; outline: 0; border-radius: 6.562px; background: #fff; font: 400 11.483px Inter; color: #111417; }
.msub::placeholder { color: #757575; }

.mf-l { font: 600 10.467px/12.088px Montserrat; color: rgba(255,255,255,.47); }
.mf-pill { position: absolute; display: flex; align-items: center; height: 31.169px; padding-left: 33.63px; border-radius: 15.584px; background: #000; font: 600 12.379px/16.711px Montserrat; color: #fff; white-space: nowrap; }
.mf-pill img { position: absolute; }