/* =====================================================================
   Fesco - головна сторінка
   Одиниці: 1rem = 10px на ширині макета (десктоп 1920px, мобайл 390px).
   Масштаб задає html{font-size} (див. main.js, fallback нижче).
   ===================================================================== */

@font-face{font-family:'Evolventa';src:url('../fonts/Evolventa-Regular.woff?v=ro2') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Evolventa';src:url('../fonts/Evolventa-Bold.woff?v=ro2') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* Proxima Nova - комерційний шрифт. Покладіть файли в assets/fonts і розкоментуйте.
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Thin.woff2') format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('../fonts/ProximaNova-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
*/

:root{
  --f-evo:'Evolventa',sans-serif;
  --f-prox:'Proxima Nova','Mulish',Arial,sans-serif;
  --f-inter:'Inter',sans-serif;
  --f-open:'Open Sans',sans-serif;
  --f-noto:'Noto Sans Display',sans-serif;
  --c-blue:#526f8f;
  --c-navy:#021f43;
  --c-border:#bed1e6;
  --c-mint:#accfca;
  --c-gray:#616161;
  --c-card:#fafaff;
  --c-dark:#111;
}

*,*::before,*::after{box-sizing:border-box}
/* Макет тягнеться до 1920px і далі не росте: 1rem = 10px - стеля.
   На ширших екранах сторінка стоїть по центру, поля навколо білі. */
html{font-size:min(calc(100vw / 192), 10px);-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:#fff;color:var(--c-navy);font-family:var(--f-prox);line-height:1.22;overflow-x:hidden;overflow-x:clip;min-width:0}
/* Контейнер сайту: понад 1920 px сторінка стоїть по центру, а все, що вилазить
   за його краї, обрізається. Футер винесено з контейнера, тому його фон іде
   на всю ширину вікна, а вміст обмежує .footer__inner. */
.site{max-width:192rem;margin:0 auto;overflow-x:clip}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul{margin:0;font-weight:inherit}
ul{padding:0;list-style:none}
button{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.m-only{display:none}
.flip-y{transform:scaleY(-1)}

/* ---------- кнопки ---------- */
.btn-primary{display:flex;align-items:center;justify-content:center;width:27.045rem;height:6.85rem;border-radius:3.4117rem;background:var(--c-mint);font:700 2.2rem/2.8382rem var(--f-inter);letter-spacing:-.044rem;text-transform:uppercase;color:#fff}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 2rem;border:.2rem solid var(--c-border);border-radius:10rem;color:var(--c-navy)}
.btn-outline span{font:400 2.2rem/2.8382rem var(--f-prox);letter-spacing:-.044rem;white-space:nowrap;text-align:center}
.btn-outline img{width:2.4rem;height:4.8rem;flex:none}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;height:108.057rem;z-index:2}
.hero__bg{position:absolute;left:0;top:0;width:192rem;height:109.9rem;z-index:0}
.hero__bg--m{display:none}

.nav{position:absolute;right:11.4rem;top:4.8rem;display:flex;gap:6.2rem;align-items:flex-start;z-index:2}
.nav__link{position:relative;font:400 2rem/1 var(--f-prox);color:var(--c-dark);white-space:nowrap;text-align:center}
.nav__link.is-active{padding:0 2.1rem}
.nav__link.is-active::after{content:'';position:absolute;left:0;right:0;top:3.1rem;height:.1rem;background:var(--c-border)}

.socials{position:absolute;left:175.2rem;top:16.5rem;display:flex;flex-direction:column;gap:2.3rem;z-index:2}
.socials__item{display:flex;align-items:center;justify-content:center;width:5.4rem;height:5.4rem;border-radius:50%;background:var(--c-mint)}
.socials__item img{width:2rem;height:2rem}

.hero__content{position:absolute;left:94rem;top:16.5rem;width:76.6rem;z-index:2}
.hero__title{font:700 7.8rem/9rem var(--f-evo);letter-spacing:.078rem;text-transform:uppercase;color:var(--c-blue)}
.hero__text{margin-top:2.4rem;font:400 3.2rem/1.22 var(--f-prox);letter-spacing:-.064rem;color:var(--c-gray)}
.hero__btn{margin-top:3.6rem}

.hero-card{position:absolute;left:94rem;top:75.1rem;width:85.3rem;height:28rem;border-radius:3.2rem;background:#ecf4fd;z-index:1}
.hero-card__list{position:absolute;left:2.7rem;top:4.4rem;width:29.6rem;display:flex;flex-direction:column;gap:3.2rem}
.hero-card__list li{display:flex;gap:.6rem;align-items:center}
.hero-card__list img{width:2.6rem;height:2.6rem;flex:none}
.hero-card__list span{width:26.4rem;font:400 2.4rem/1.3333 var(--f-evo);color:#4c4c4c}
.hero__photo{position:absolute;left:130.3rem;top:54.743rem;width:48.574rem;height:48.574rem;z-index:2}

/* =====================================================================
   СИСТЕМА ЩОДЕННОГО ДОГЛЯДУ
   ===================================================================== */
.system{position:relative;height:112.7rem;padding:5rem 12rem 0}
.system__title{width:116.8rem;font:700 7.8rem/8rem var(--f-evo);letter-spacing:.156rem;text-transform:uppercase;color:var(--c-blue)}
.system__grid{position:relative;display:flex;gap:6.9rem;margin-top:6.3rem}
.sys-card{position:relative;flex:none;width:51.4rem;height:80.4rem}
.sys-card__bg{position:absolute;left:0;top:0;width:100%;height:100%}
.sys-card__bg--m{display:none}
.sys-card__img{position:absolute}
.sys-card--paste .sys-card__img{left:1.6rem;top:5.143rem;width:21.1rem;height:70.2rem}
.sys-card--brush .sys-card__img{left:5.3rem;top:1.243rem;width:12.2rem;height:77.9rem}
.sys-card--floss .sys-card__img{left:1rem;top:5.1rem;width:23.6rem;height:70.2rem}
.sys-card__text{position:absolute;left:23.8rem;top:30.9rem;width:25.9rem}
.sys-card--brush .sys-card__text,.sys-card--floss .sys-card__text{left:25.5rem;top:31.3rem}
.sys-card__text h3{font:400 4.8rem/3.8005rem var(--f-evo);letter-spacing:.048rem;color:var(--c-navy)}
.sys-card__text p{margin-top:2.4rem;font:400 3.2rem/1.3333 var(--f-evo);letter-spacing:-.192rem;color:var(--c-blue)}
.system__plus{position:absolute;top:37.48rem;width:5.53rem;height:5.53rem}
.system__plus img{width:100%;height:100%}
.system__plus--1{left:52.135rem}
.system__plus--2{left:110.135rem}

/* =====================================================================
   ПАСТИ (СЛАЙДЕР)
   ===================================================================== */
.pastes{position:relative;height:178.4rem;margin-top:12.043rem;overflow:hidden;background:linear-gradient(180.43deg,#fff 13.318%,rgba(255,255,255,0) 218.74%)}
.pastes__title{position:absolute;left:50%;top:3rem;width:116.8rem;transform:translateX(-50%);text-align:center;font:700 7.8rem/8.9rem var(--f-evo);letter-spacing:.156rem;text-transform:uppercase;color:var(--c-blue)}
.pastes__stage{position:absolute;inset:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
/* Перетягування мишею не має виділяти тюбики й підписи. Повний опис лишається
   виділюваним: з нього перетягування не починається (main.js, dragStart). */
.pastes__stage img{-webkit-user-drag:none}
.pastes__full{user-select:text;-webkit-user-select:text}
.pastes__stage.is-dragging{cursor:grabbing}
.pastes__arrow{position:absolute;top:78.2rem;display:flex;align-items:center;justify-content:center;width:14.3rem;height:14.3rem;border-radius:50%;background:var(--c-border);z-index:3}
.pastes__arrow img{width:8.6rem;height:8.6rem}
.pastes__arrow--prev{left:7.3rem}
.pastes__arrow--prev img{transform:scaleX(-1)}
.pastes__arrow--next{left:165.7rem}
/* Карусель тюбиків: усі слайди однакові, відрізняються лише позицією
   (--x), масштабом (--s) і прозорістю (--o). Числа виведені з макета:
   центральний тюбик 33.6rem завширшки, бокові - 0.6012 від нього. */
.pastes__ring{position:absolute;inset:0;z-index:1}
.pastes__slide{position:absolute;left:50%;top:18.661rem;width:41.238rem;height:133.187rem;margin-left:-23.138rem;
  object-fit:contain;pointer-events:none;
  --x:0rem;--y:.069rem;--s:.6012;--o:0;--z:0;
  translate:calc(var(--x) + var(--drag,0px)) var(--y);scale:var(--s);opacity:var(--o);z-index:var(--z);
  filter:drop-shadow(0 .36rem 4.593rem rgba(0,0,0,.1))}
.pastes__slide[data-slot="0"]{--x:0rem;--y:0rem;--s:1;--o:1;--z:3}
.pastes__slide[data-slot="-1"]{--x:-27.66rem;--o:.5;--z:2}
.pastes__slide[data-slot="1"]{--x:28.001rem;--o:.5;--z:2}
.pastes__slide[data-slot="-2"]{--x:-53.197rem;--o:.5;--z:1}
.pastes__slide[data-slot="2"]{--x:53.503rem;--o:.5;--z:1}
.pastes__slide[data-slot="-3"],.pastes__slide[data-slot="-4"],
.pastes__slide[data-slot="-5"],.pastes__slide[data-slot="-6"]{--x:-78rem}
.pastes__slide[data-slot="3"],.pastes__slide[data-slot="4"],
.pastes__slide[data-slot="5"]{--x:78rem}
.pastes__main{position:absolute;left:calc(50% - 2.4rem);top:29.7rem;width:46.6rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1.2rem;z-index:2}
/* Місце центрального тюбика у потоці: сам тюбик лежить у каруселі вище. */
.pastes__spacer{width:34.136rem;height:111.3rem}
.pastes__caption{display:flex;flex-direction:column;align-items:center;gap:2.4rem;width:100%}
.pastes__caption-text{display:flex;flex-direction:column;align-items:center;gap:1.6rem;width:46.6rem}
.pastes__name{font:700 4.6rem/1.3333 var(--f-evo);letter-spacing:.046rem;color:#5f7997;text-align:center;white-space:nowrap}
/* width:100% не годиться: рядок із white-space:nowrap ширший за блок
   і тоді притискається до лівого краю замість центру. */
.pastes__desc-wrap{width:auto;max-width:none}
.pastes__desc{font:400 3.6rem/1.22 var(--f-prox);letter-spacing:-.216rem;color:#5f7997;text-align:center;white-space:nowrap}
.pastes__caption{position:relative}
/* Мобільний розгорнутий стан: великий тюбик зверху, під ним текст із повним
   описом, далі ряд менших тюбиків, лише права стрілка. Макета для нього немає,
   зроблено за логікою десктопного (Frame 1000003483, Variant6). */
@media (max-width:767px){
  .pastes.is-open{overflow:visible;height:auto;padding-bottom:4rem}
  .pastes.is-open .pastes__main{z-index:7}
  .pastes.is-open .pastes__stage{height:var(--open-height,61.5rem)}
  .pastes.is-open .pastes__caption{min-height:0;animation:fesco-open-in .4s ease}
  .pastes.is-open .pastes__desc-wrap{min-height:0}
  .pastes.is-open .pastes__full{order:1;position:static;left:auto;bottom:auto;width:34.9rem;padding:0;
    border-radius:0;background:none;box-shadow:none;transform:none;
    font:400 1.8rem/1.45 var(--f-prox);letter-spacing:-.036rem;color:#808080;text-align:center}
  .pastes.is-open .pastes__down{order:2}

  .pastes.is-open .pastes__slide[data-slot="0"]{--x:0rem;--y:0rem;--s:1;--o:1;--z:3}
  .pastes.is-open .pastes__slide[data-slot="1"]{--x:-7.4rem;--y:var(--open-y,1.378rem);--o:.35;--z:2}
  .pastes.is-open .pastes__slide[data-slot="2"]{--x:0rem;--y:var(--open-y,1.378rem);--o:.35;--z:1}
  .pastes.is-open .pastes__slide[data-slot="3"]{--x:7.4rem;--y:var(--open-y,1.378rem);--o:.35;--z:2}
  .pastes.is-open .pastes__slide[data-slot="4"],
  .pastes.is-open .pastes__slide[data-slot="5"]{--x:22rem;--y:var(--open-y,1.378rem);--o:0}
  .pastes.is-open .pastes__slide[data-slot="-1"],
  .pastes.is-open .pastes__slide[data-slot="-2"],
  .pastes.is-open .pastes__slide[data-slot="-3"],
  .pastes.is-open .pastes__slide[data-slot="-4"],
  .pastes.is-open .pastes__slide[data-slot="-5"],
  .pastes.is-open .pastes__slide[data-slot="-6"]{--x:-22rem;--y:0rem;--o:0}

  .pastes.is-open .pastes__arrow--prev{display:none}
}
.pastes__down{display:flex;align-items:center;justify-content:center;width:4.8rem;height:2.4rem;cursor:pointer;background:none;border:0;padding:0}
.pastes__down img{width:2.4rem;height:4.8rem;transform:rotate(-90deg);transition:transform .25s ease}
.pastes__down[aria-expanded="true"] img{transform:rotate(90deg)}
.pastes__full{position:absolute;left:50%;bottom:calc(100% + 2.4rem);transform:translateX(-50%);width:96rem;padding:3.6rem 4.4rem;border-radius:3.2rem;background:#fff;box-shadow:0 1.2rem 6rem rgba(2,31,67,.14);font:400 2.4rem/1.45 var(--f-prox);color:#5f7997;text-align:left;z-index:6}

/* =====================================================================
   СУЧАСНІ ФОРМУЛИ
   ===================================================================== */
.formulas__head{width:126.9rem;margin:0 auto;text-align:center;color:var(--c-blue)}
.formulas__head h2{font:700 7.8rem/8.9rem var(--f-evo);letter-spacing:.156rem;text-transform:uppercase}
.formulas__head p{margin-top:4rem;font:400 3.8rem/1.21 var(--f-prox);letter-spacing:.076rem}
.formulas__list{margin-top:4.3rem}
.formula{position:relative;height:59.1rem;background:#fff}
.formula__media{position:absolute;top:0;height:59.1rem;overflow:hidden}
.formula--img-left .formula__media{left:-.3rem;width:94.9rem}
.formula--img-right .formula__media{left:94.6rem;width:97.4rem}
.formula__img{width:100%;height:100%;object-fit:cover}
.formula__img--m{display:none}
.formula__body{position:absolute;top:calc(50% + .05rem);transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start}
.formula--img-left .formula__body{left:108.3rem;width:68.7rem}
.formula--img-right .formula__body{left:12rem;width:68.7rem}
.formula--fluor .formula__body{width:78.9rem}
.formula__head{display:flex;flex-direction:column;align-items:flex-start;gap:2.2rem;width:100%}
.formula__icon{position:relative;flex:none;width:10.038rem;height:9.8rem}
.formula__icon img{position:absolute}
.formula__icon-circle{left:0;top:0;width:100%;height:100%}
.formula__icon--3 .formula__icon-circle2{left:0;top:0;width:97.63%;height:100%}
.formula__icon--4{width:9.8rem}
.formula__icon--1 .formula__icon-glyph{left:11.54%;top:11.54%;width:76.92%;height:76.92%}
.formula__icon--3 .formula__icon-glyph{left:18.28%;top:15.82%;width:60.33%;height:61.87%}
.formula__icon--4 .formula__icon-glyph{left:22.22%;top:23.7%;width:59.74%;height:56.24%}
.formula__title{font:700 4rem/1.3333 var(--f-evo);letter-spacing:.04rem;color:var(--c-navy)}
.formula__desc{margin-top:1.8rem;font:300 2.8rem/3.8rem var(--f-prox);letter-spacing:-.168rem;color:var(--c-navy)}
.formula__body .btn-outline{margin-top:4rem}
.formula__fade{position:absolute;left:94.6rem;top:25.9rem;width:97.4rem;height:34.8rem;background:linear-gradient(to top,#fff 49.828%,rgba(255,255,255,0) 92.096%);pointer-events:none}
.formula__note{position:absolute;left:98.1rem;top:37.6rem;width:48.2rem;color:var(--c-blue)}
.formula__note h4{font:700 3.2rem/1.3333 var(--f-evo);letter-spacing:.032rem}
.formula__note p{margin-top:1.8rem;font:400 2.4rem/1.22 var(--f-prox);letter-spacing:-.144rem}

/* =====================================================================
   ЩІТКИ (КАРТКИ)
   ===================================================================== */
.brushes{display:flex;flex-direction:column;align-items:center;gap:7.2rem;margin-top:13.5rem;padding:0 12rem}
.brushes__head{width:143.2rem;text-align:center;color:var(--c-blue)}
.brushes__head h2{font:700 7.8rem/8.9rem var(--f-evo);letter-spacing:.156rem;text-transform:uppercase}
.brushes__head p{margin-top:4rem;font:400 3.8rem/1.21 var(--f-inter);letter-spacing:.076rem}
.brushes__track{display:flex;justify-content:center;gap:6rem;width:100%}
.bcard{position:relative;flex:none;width:43.7rem;height:106.4rem;border-radius:3.6rem;background:var(--c-card);overflow:hidden}
.bcard__inner{position:absolute;left:50%;top:calc(50% + .043rem);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3.2rem}
.bcard__info{display:flex;flex-direction:column;gap:3.2rem;width:37rem}
.bcard__title{font:700 4.2rem/4.7rem var(--f-evo);letter-spacing:.042rem;color:var(--c-blue)}
.bcard__specs{display:flex;flex-direction:column;align-items:flex-start;gap:2.4rem}
.bcard__specs-row{display:flex;align-items:flex-start;gap:3.2rem}
.spec{display:flex;align-items:center;gap:1.2rem}
.spec img{flex:none;width:5.2rem;height:5.2rem}
.spec span{font:400 2.4rem/1.22 var(--f-prox);letter-spacing:-.144rem;color:var(--c-blue);text-align:center;white-space:nowrap}
.bcard__figure{display:flex;flex-direction:column;align-items:center;gap:3.6rem}
.bcard__img{width:18.4rem;height:61.7rem}
.bcard__img--m{display:none}
/* Кружечки кольорів: активний - повний колір з обведенням, решта напівпрозорі. */
.bcard__dots{display:flex;align-items:center;gap:2rem;width:20.4rem;height:3.6rem}
.bcard__dots--pair{width:9.2rem}
.bcard__dots-row{display:flex;align-items:center;gap:4rem}
.bdot{flex:none;width:3.6rem;height:3.6rem;padding:0;border:.1rem solid transparent;border-radius:50%;
  background:var(--bdot);opacity:.25;cursor:pointer}
.bdot.is-active{opacity:1;border-color:var(--c-blue)}
/* у DinoBaby п'ять кольорів: 5 × 3.6rem + 4 × 2rem */
.bcard--dino .bcard__dots{width:26rem}
.brushes__pager{display:none}

/* =====================================================================
   ПРОДУКТОВІ СЕКЦІЇ (MULTIBRUSH / EXPERT / DINO)
   ===================================================================== */
.product{position:relative}
.product__glow{position:absolute;pointer-events:none;z-index:0}
.product__body{position:absolute;top:50%;display:flex;flex-direction:column;align-items:flex-start;gap:6.8rem;width:85.5rem;transform:translateY(-50%);z-index:2}
.product__head{display:flex;flex-direction:column;gap:4rem;width:100%}
.product__title{font:700 7.8rem/8.9rem var(--f-evo);letter-spacing:.156rem;color:var(--c-blue);white-space:nowrap}
.product__sub{font:400 3.8rem/1.22 var(--f-prox);letter-spacing:.076rem;color:var(--c-navy)}
.product__details{display:flex;flex-direction:column;gap:4.8rem;width:100%}
.specs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;width:76.8rem}
.spec-card{display:flex;align-items:center;gap:1.6rem;padding:2.1rem 3.1rem;background:#fff;border:.1rem solid var(--c-border);border-radius:1.8rem}
.spec-card > img,.spec-card__icon{flex:none;width:7.2rem;height:7.2rem}
.spec-card__icon{position:relative;display:block;overflow:hidden}
.spec-card__glyph{position:absolute}
.spec-card__glyph--round{left:10.65%;top:16.67%;width:79.77%;height:66.2%}
.spec-card__glyph--handle{left:10.93%;top:6.32%;width:78.14%;height:87.24%}
.spec-card span:last-child{font:300 3.2rem/1.22 var(--f-prox);letter-spacing:-.192rem;color:var(--c-blue);white-space:nowrap}
.product__text{font:100 3.2rem/1.22 var(--f-prox);letter-spacing:.064rem;color:var(--c-navy)}
.product__photo{position:absolute;z-index:1}
.product__photo--m{display:none}

/* Multibrush */
.product--multibrush{height:95.6rem;margin-top:11.357rem;overflow:hidden;background:linear-gradient(257.06deg,#fff 50.673%,#d7e7f9 129.61%)}
.product--multibrush .product__glow{left:96rem;top:-15.87rem;width:46.74rem;height:159.14rem;transform:translateX(-50%)}
.product--multibrush .product__body{left:89.6rem}
.product--multibrush .product__photo{left:0;top:-4.957rem;width:69.592rem;height:103.73rem}

/* Expert Clean */
.product--expert{height:88.2rem;margin-top:12.043rem}
.product--expert .product__body{left:15.2rem;top:0;transform:none}
.product--expert .product__head{width:73.8rem}
.product--expert .product__title{font-family:var(--f-prox);font-weight:600}
/* Опис розтягується на ширину блока, як в інших щіток. */
.product--expert .product__details{width:100%}
.product--expert .product__photo{left:104.6rem;bottom:0;width:67.8rem;height:93.3rem}

/* DinoBaby */
.product--dino{height:106.1rem;overflow:hidden;background:linear-gradient(110deg,#ebf4f3 0%,#fff 77.358%)}
.product--dino .product__glow--1{left:112.15rem;top:-2.47rem;width:29.04rem;height:123.34rem;transform:translateX(-50%)}
.product--dino .product__glow--2{left:38.4rem;top:1.58rem;width:44.44rem;height:126.64rem;transform:translateX(-50%)}
.product--dino .product__body{left:91.5rem}
.product--dino .product__title{font-family:var(--f-noto);font-weight:600}
.product--dino .product__sub{font-family:var(--f-inter);line-height:1.21}
.product--dino .specs-grid{display:flex;flex-wrap:wrap;gap:2.4rem;width:86.4rem}
.product--dino .spec-card{flex:none;width:42rem;height:12.2rem}
.product--dino .spec-card span:last-child{font-family:var(--f-inter);line-height:1.21;white-space:normal}
.product--dino .spec-card--soft span:last-child,.product--dino .spec-card--handle span:last-child,.product--dino .spec-card--age span:last-child{width:27.5rem}
.product--dino .spec-card--round span:last-child,.product--dino .spec-card--count span:last-child{white-space:nowrap}
.product--dino .spec-card--count span:last-child{text-align:center}
.product--dino .product__text{font:200 3.2rem/1.21 var(--f-inter);letter-spacing:.064rem}
.product--dino .product__photo{left:-7.47rem;top:-13.5rem;width:96.339rem;height:143.6rem;object-fit:cover}

/* =====================================================================
   ЗУБНІ НИТКИ
   ===================================================================== */
.floss{display:flex;flex-direction:column;align-items:center;gap:5.1rem;margin-top:12rem;padding:0 12rem}
.floss__head{width:111.3rem;text-align:center;color:var(--c-blue)}
.floss__head h2{font:700 7.8rem/8.9rem var(--f-evo);letter-spacing:.156rem;text-transform:uppercase}
.floss__head p{margin-top:4rem;font:400 3.8rem/1.22 var(--f-prox);letter-spacing:.076rem}
.floss__cards{display:flex;gap:2rem;width:100%}
.fcard{position:relative;flex:none;width:83rem;height:60rem;border-radius:3.6rem;background:var(--c-card);overflow:hidden}
.fcard__img{position:absolute;transform:translateX(-50%)}
.fcard__img--m{display:none}
.fcard--picks .fcard__img--d{left:calc(50% + 4.25rem);top:1.323rem;width:56.7rem;height:36rem}
.fcard--mint .fcard__img--d{left:50%;top:-4.777rem;width:49.6rem;height:48.9rem;object-fit:cover}
.fcard__text{position:absolute;left:calc(50% - .05rem);top:calc(50% + 17rem);width:55.4rem;transform:translate(-50%,-50%);text-align:center;color:var(--c-blue)}
.fcard__text h3{font:700 4.8rem/4.7rem var(--f-evo);letter-spacing:.048rem}
.fcard__text p{margin-top:3.2rem;font:400 2.8rem/1.22 var(--f-prox);letter-spacing:.056rem}
.floss__bar{display:flex;align-items:center;gap:1.6rem;width:104.8rem;height:12.2rem;padding:2.2rem 3.2rem;background:#eef4f4;border:.1rem solid var(--c-border);border-radius:1.8rem}
.floss__bar img{flex:none;width:7.2rem;height:7.2rem}
.floss__bar span{width:89.6rem;font:300 3.2rem/1.21 var(--f-inter);letter-spacing:-.192rem;color:#809a95}

/* =====================================================================
   ДЕ ЗНАЙТИ
   ===================================================================== */
.where{display:flex;flex-direction:column;align-items:center;gap:3.1rem;margin-top:6rem;padding:0 12rem}
.where__title{font:600 7.8rem/8.9rem var(--f-prox);letter-spacing:.156rem;color:var(--c-blue);text-align:center;white-space:nowrap}
.where__body{position:relative;width:168rem;height:78.9rem}
.where__subtitle{font:600 4.8rem/1.22 var(--f-prox);letter-spacing:.096rem;color:var(--c-blue);text-align:center;white-space:nowrap}
.where__online{position:absolute;left:2.9rem;top:2.6rem;display:flex;flex-direction:column;align-items:center;gap:8rem}
.where__online .where__subtitle{width:52rem}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:4.4rem;width:75.7rem}
.logo{position:relative;flex:none;width:11.582rem;height:11.582rem;border-radius:50%;overflow:hidden}
.logo img{position:absolute}
.logo--full img{left:0;top:0;width:100%;height:100%}
.logo--rozetka{background:#fdfdfd;border:.112rem solid #979797}
.logo--rozetka img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.logo--eva{background:#fbfbfc;border:.0857rem solid #979797}
.logo--eva img{left:16.28%;top:33.3%;width:68.08%;height:34.04%}
.logo--makeup{background:#f7f7f7;border:.0857rem solid #979797}
.logo--makeup img{left:2.94%;top:30.85%;width:95.1%;height:38.04%}
.logo--epicentr{background:#f7f7f7;border:.0857rem solid #979797}
.logo--epicentr img{left:12.99%;top:6.62%;width:76.56%;height:76.56%}
.logo--makeup,.logo--epicentr,.logo--anc{filter:drop-shadow(0 6.7562rem 4.3433rem rgba(7,14,39,.05))}
.where__offline{position:absolute;right:5.99rem;top:2.6rem;display:flex;flex-direction:column;align-items:center;gap:8rem;width:68.7rem}
.where__offline .where__subtitle{width:100%}
.where__groups{display:flex;flex-direction:column;align-items:flex-start;gap:5.3rem;width:100%}
.wgroup{display:flex;flex-direction:column;align-items:flex-start;gap:3.2rem;width:100%}
.wgroup--pharm{width:51.3rem}
.wgroup__head{display:flex;align-items:center;gap:3.2rem}
.wgroup__head img{width:4.8rem;height:4.8rem}
.wgroup__head span{font:400 2.8rem/1.22 var(--f-prox);letter-spacing:.056rem;color:var(--c-navy);white-space:nowrap}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:2.4rem}
.chips__row{display:flex;align-items:flex-start;gap:2.4rem}
.chip{display:flex;align-items:center;justify-content:center;text-align:center;height:6.8rem;padding:0 2.1rem;border:.1rem solid var(--c-border);border-radius:1.4rem;font:400 2.2rem/1.22 var(--f-prox);letter-spacing:-.132rem;color:var(--c-blue);white-space:nowrap}
.chip--r11{border-radius:1.1rem}
.wgroup--pharm .chip{width:15.5rem;padding:0 .5rem}
.chips--m{display:none}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{margin-top:7.9rem;padding:4rem 0;background:var(--c-border);border-top:.3rem solid #f5f5f5;color:var(--c-dark)}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:3.2rem;max-width:192rem;margin:0 auto;padding:0 12rem}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.footer__logo{width:23.1rem;height:6rem;object-fit:cover}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.footer__heading{font:700 2rem/1.22 var(--f-prox);text-align:center;white-space:nowrap}
.footer__nav a{font:400 2.2rem/1.22 var(--f-prox);white-space:nowrap}
.footer__contact{display:flex;align-items:center;gap:1.2rem}
.footer__contact img{flex:none;width:2.4rem;height:2.4rem}
.footer__contact span{font:400 2.2rem/1.22 var(--f-prox);text-transform:uppercase;white-space:nowrap}
.footer__bottom{display:flex;flex-direction:column;align-items:center;gap:2.4rem;width:100%;text-align:center}
.footer__links{display:flex;align-items:center;justify-content:center;gap:4rem;flex-wrap:wrap}
.footer__offer{font:400 2rem/1.36 var(--f-open);color:#515151}
.footer__copy{font:400 1.8rem/1.36 var(--f-open);color:var(--c-dark)}

/* =====================================================================
   МОБАЙЛ (макет 390px)
   ===================================================================== */
@media (max-width:767px){
  /* Ширина мобільного макета обмежена, тому на широких телефонах
     і в альбомній орієнтації сторінка стоїть по центру, а не розтягується.
     Фон футера, як і на десктопі, - на всю ширину. */
  body{overflow-x:hidden}
  .site{max-width:39rem}

  html{font-size:calc(100vw / 39)}
  .d-only{display:none}
  .m-only{display:inline}

  /* ---- hero ---- */
  .hero{height:117rem}
  .hero__bg--d{display:none}
  .hero__bg--m{display:block;width:39rem;height:60.6rem}
  .nav{display:none}
  .socials{left:1.1rem;top:5.4rem}
  .hero__content{left:2rem;top:39.8rem;width:35rem}
  .hero__title{font-size:3.6rem;line-height:1.3333;letter-spacing:.036rem}
  .hero__text{font-size:2.2rem;letter-spacing:-.044rem}
  .hero__btn{margin-top:3.2rem;width:100%}
  .hero-card{left:2rem;top:80.7rem;width:45.7rem}
  .hero-card__list{left:1.8rem;top:4.4rem;width:15.7rem}
  .hero-card__list span{width:auto;flex:1;font-size:1.6rem}
  .hero-card__list li:nth-child(2) span{flex:none;width:13.6rem}
  .hero-card__list li:nth-child(3) span{flex:none;width:9.9rem}
  .hero__photo{left:14.4rem;top:82.8rem;width:26.3rem;height:26.3rem}

  /* ---- система ---- */
  .system{height:77.6rem;padding:0 2rem}
  .system__title{width:35rem;font-size:3.2rem;line-height:1.3333;letter-spacing:.064rem}
  .system__grid{display:block;height:59.9rem;margin-top:4.8rem}
  .sys-card{position:absolute}
  .sys-card--paste{left:0;top:0;width:16rem;height:34rem}
  .sys-card--brush{left:19rem;top:0;width:16rem;height:34rem}
  .sys-card--floss{left:0;top:37rem;width:35rem;height:22.9rem}
  .sys-card__bg--d{display:none}
  .sys-card__bg--m{display:block}
  .sys-card--paste .sys-card__bg--m{top:-.104rem;height:34.133rem}
  .sys-card--brush .sys-card__bg--m{top:-.1rem;width:16.1rem;height:34.1rem}
  .sys-card--floss .sys-card__bg--m{height:22.8rem}
  .sys-card--paste .sys-card__img{left:4.61rem;top:10.401rem;width:6.742rem;height:22.431rem}
  .sys-card--brush .sys-card__img{left:6.5rem;top:10.2rem;width:3.252rem;height:20.802rem}
  .sys-card--floss .sys-card__img{left:6.28rem;top:1.054rem;width:6.925rem;height:20.6rem;transform:rotate(-26.86deg)}
  .sys-card__text{left:1.5rem;top:1.789rem;width:13rem;text-align:center}
  .sys-card--brush .sys-card__text{left:1.6rem;top:1.8rem;width:12.8rem}
  .sys-card--floss .sys-card__text{left:20.2rem;top:3rem;width:12.8rem;text-align:left}
  .sys-card__text h3{font-size:2.2rem;line-height:2.5879rem;letter-spacing:.022rem}
  .sys-card__text p{margin-top:.4rem;font-size:1.5rem;letter-spacing:-.09rem}
  .system__plus{left:14.735rem;top:14.235rem}
  .system__plus--2{top:31.735rem}

  /* ---- пасти ---- */
  .pastes{height:77.1rem;margin-top:8rem;overflow:visible;background:none}
  .pastes__title{position:static;width:36.4rem;margin:0 auto;transform:none;font-size:3.6rem;line-height:1.3333;letter-spacing:.072rem}
  .pastes__stage{position:relative;inset:auto;height:61.5rem;margin-top:6rem}
  .pastes__arrow{top:17.364rem;width:6rem;height:6rem}
  .pastes__arrow img{width:3.608rem;height:3.608rem}
  .pastes__arrow--prev{left:2rem}
  .pastes__arrow--next{left:30.95rem}
  .pastes__slide{top:-3.764rem;width:14.079rem;height:45.47rem;margin-left:-7.072rem;--s:.5726;--y:1.378rem;
    filter:drop-shadow(0 .123rem 1.568rem rgba(0,0,0,.1))}
  .pastes__slide[data-slot="0"]{--y:0rem}
  .pastes__slide[data-slot="-1"]{--x:-10.393rem}
  .pastes__slide[data-slot="1"]{--x:10.405rem}
  /* на мобайлі в макеті видно лише сусідні тюбики */
  .pastes__slide[data-slot="-2"]{--x:-20.8rem;--o:0}
  .pastes__slide[data-slot="2"]{--x:20.8rem;--o:0}
  .pastes__slide[data-slot="-3"],.pastes__slide[data-slot="-4"]{--x:-26rem}
  .pastes__slide[data-slot="3"]{--x:26rem}
  .pastes__main{left:50%;top:0;width:27.4rem}
  .pastes__spacer{width:11.8rem;height:38rem}
  .pastes__caption{min-height:22.3rem;justify-content:center}
  .pastes__caption-text{width:27.4rem}
  .pastes__name{font-size:3.2rem;letter-spacing:.032rem;white-space:normal}
  .pastes__desc-wrap{position:relative;min-height:4.4rem}
  .pastes__desc{position:relative;left:50%;width:34.9rem;transform:translateX(-50%);font-size:1.8rem;letter-spacing:-.108rem;white-space:normal}
  .pastes__full{width:34.9rem;padding:2rem 2.4rem;border-radius:2rem;font-size:1.6rem;line-height:1.4;letter-spacing:normal;bottom:calc(100% + 1.2rem)}

  /* ---- формули ---- */
  .formulas{margin-top:7.5rem}
  .formulas__head{width:35rem}
  .formulas__head h2{font-size:3.2rem;line-height:1.3333;letter-spacing:.064rem}
  .formulas__head p{margin-top:3.2rem;font-size:2.4rem;line-height:1.22;letter-spacing:.048rem}
  .formulas__list{display:flex;flex-direction:column;gap:4.1rem;margin-top:4.1rem}
  .formula{height:auto}
  .formula--img-left .formula__media,.formula--img-right .formula__media{position:relative;left:-.4rem;width:39.9rem;height:21.8rem}
  .formula__img--d{display:none}
  .formula__img--m{display:block}
  .formula--img-left .formula__body,.formula--img-right .formula__body,.formula--fluor .formula__body{position:static;width:35rem;margin:3.6rem auto 0;transform:none}
  .formula__head{flex-direction:row;align-items:center;gap:1.2rem}
  .formula--nano .formula__head{align-items:flex-start}
  .formula__icon,.formula__icon--4{width:3.6rem;height:3.6rem}
  .formula--nano .formula__icon{width:3.6875rem}
  .formula__title{flex:1;min-width:0;font-size:1.8rem;letter-spacing:.018rem}
  .formula__desc{font-size:1.6rem;line-height:1.22;letter-spacing:-.096rem}
  .formula__body .btn-outline{display:flex;width:100%;height:4.8rem;margin-top:2.2rem;padding:.6rem 2rem}
  .formula--nano .formula__body .btn-outline{margin-top:3.2rem}
  .btn-outline span{font-size:1.8rem;letter-spacing:-.036rem}
  .btn-outline img{width:1.8rem;height:3.6rem}
  .formula__fade{display:none}
  .formula__note{position:static;width:35rem;margin:4.1rem auto 0;padding-left:.45rem}
  .formula__note h4{font-size:1.8rem;letter-spacing:.018rem}
  .formula__note p{font-size:1.6rem;letter-spacing:-.096rem}

  /* ---- щітки ---- */
  .brushes{height:96rem;gap:3.2rem;margin-top:7.5rem;padding:0}
  .brushes__head{width:35rem}
  .brushes__head h2{font-size:2.4rem;line-height:1.3333;letter-spacing:.048rem}
  .brushes__head p{margin-top:1.2rem;font:400 2.4rem/1.22 var(--f-prox);letter-spacing:.048rem}
  /* Свайп пальцем і мишею (main.js): доріжка їде за рухом, зсув у --drag. */
  .brushes__track{gap:1.6rem;translate:var(--drag,0px) 0;transition:translate .38s cubic-bezier(.22,.61,.36,1);
    touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
  .brushes__track.is-dragging{transition:none;cursor:grabbing}
  .brushes__track img{-webkit-user-drag:none}
  .bcard{width:28.7rem;height:67.8rem;order:var(--ord,0)}
  .bcard__inner{display:block;left:calc(50% + .05rem);top:calc(50% + .05rem);width:30rem;height:64.7rem}
  .bcard--expert .bcard__inner{top:50%;height:63.2rem}
  .bcard__info{display:block;width:100%}
  .bcard__title{font-size:3.2rem;line-height:1.3333;letter-spacing:.032rem;text-align:center}
  .bcard__specs{position:absolute;align-items:center;gap:1.2rem}
  .bcard__specs-row{flex-direction:column;align-items:center;gap:1.2rem}
  .spec{flex-direction:column;gap:.8rem}
  .bcard--multibrush .bcard__specs{left:14rem;top:14.2rem}
  .bcard--expert .bcard__specs{left:18.3rem;top:12.6rem}
  .bcard--dino .bcard__specs{left:18.6rem;top:14.6rem}
  .bcard--multibrush .bcard__specs-row .spec:first-child,.bcard--expert .bcard__specs-row .spec:first-child{align-items:flex-start}
  .bcard--dino .bcard__specs-row{width:8.7rem}
  .bcard--dino .bcard__specs-row .spec span{width:100%;white-space:normal}
  .bcard__figure{display:contents}
  .bcard__img{position:absolute}
  .bcard--multibrush .bcard__img{left:.1rem;top:13rem;width:13rem;height:43.7rem}
  .bcard--expert .bcard__img{left:2.1rem;top:10.1rem;width:13.9rem;height:46.62rem}
  .bcard__img--d{display:none}
  .bcard__img--m{display:block}
  .bcard--dino .bcard__img--m{left:1.1rem;top:11.4rem;width:13.93rem;height:46.725rem;object-fit:cover}
  .bcard__dots{position:absolute;left:50%;transform:translateX(-50%)}
  .bcard--multibrush .bcard__dots{top:61.1rem}
  .bcard--dino .bcard__dots{top:60.3rem}
  .bcard__dots-row{position:absolute;left:50%;top:59rem;transform:translateX(-50%)}
  .brushes__pager{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:16.8rem;margin-top:-.8rem}
  .brushes__counter{font:700 2.4rem/1.3333 var(--f-evo);letter-spacing:.048rem;text-transform:uppercase;color:var(--c-blue)}
  .brushes__arrows{display:flex;align-items:center;gap:12rem}
  .brushes__arrow img{width:2.4rem;height:4.8rem}
  .brushes__arrow--next img{transform:rotate(180deg)}

  /* ---- продуктові секції ---- */
  .product__glow{display:none}
  .product__body,.product--multibrush .product__body,.product--expert .product__body,.product--dino .product__body{left:2rem;top:13.7rem;width:35rem;gap:4.8rem;transform:none}
  .product__head,.product--expert .product__head{gap:2.4rem;width:100%}
  .product__title,.product--expert .product__title,.product--dino .product__title{font:700 3.2rem/1.3333 var(--f-evo);letter-spacing:.064rem}
  .product__sub,.product--dino .product__sub{font:400 2.4rem/1.22 var(--f-prox);letter-spacing:.048rem}
  .product__details,.product--expert .product__details{gap:3.2rem;width:100%}
  .specs-grid,.product--dino .specs-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:1rem;width:35rem}
  .spec-card,.product--dino .spec-card{flex:none;width:17rem;height:auto;padding:1.5rem .7rem;gap:.4rem}
  .spec-card > img,.spec-card__icon{width:3.2rem;height:3.2rem}
  .spec-card span:last-child,.product--dino .spec-card span:last-child{font-size:2.2rem;line-height:1.22;letter-spacing:-.132rem;white-space:nowrap}
  .spec-card--wrap span:last-child{width:9.5rem;line-height:2.2rem;white-space:normal}
  .spec-card--two span:last-child{flex:1;line-height:2.2rem;white-space:normal}
  .product--multibrush .spec-card:nth-child(2){gap:1.6rem}
  .product--multibrush .spec-card:nth-child(3),.product--multibrush .spec-card:nth-child(4){padding:1.5rem .8rem}
  .product__text,.product--expert .product__text,.product--dino .product__text{width:100%;font-size:2rem;line-height:1.22;letter-spacing:.04rem}

  .product--multibrush{height:107.2rem;margin-top:0;background:linear-gradient(253.7deg,#fff 50.673%,#d7e7f9 129.61%)}
  .product--multibrush .product__photo{left:5.46rem;top:65.53rem;width:28.175rem;height:42rem}

  .product--expert{height:92.4rem;margin-top:0;overflow:hidden}
  .product--expert .product__body{top:7.3rem}
  .product--expert .spec-card:nth-child(2){gap:1.6rem}
  .product--expert .spec-card:nth-child(3){padding:1.5rem .8rem}
  .product__photo--d{display:none}
  .product__photo--m{display:block}
  .product--expert .product__photo--m{left:-4.35rem;top:49.2rem;width:41.33rem;height:56.75rem;bottom:auto}

  .product--dino{height:111.7rem;background:linear-gradient(243.37deg,#fff 38.583%,#eef6f5 94.021%)}
  .product--dino .product__body{top:10.5rem}
  .product--dino .spec-card{width:35rem;gap:1.6rem}
  .product--dino .spec-card--soft{order:1}
  .product--dino .spec-card--handle{order:2;gap:.4rem}
  .product--dino .spec-card--round{order:3}
  .product--dino .spec-card--count{order:4;width:17rem;gap:.4rem}
  .product--dino .spec-card--age{order:5;width:17rem;gap:.4rem}
  .product--dino .spec-card span:last-child{font-family:var(--f-inter);line-height:2.2rem;white-space:normal}
  .product--dino .spec-card--soft span:last-child{width:27.5rem}
  .product--dino .spec-card--handle span:last-child{width:18.1rem}
  .product--dino .spec-card--round span:last-child{width:28.6rem}
  .product--dino .spec-card--count span:last-child{width:10.7rem;text-align:left}
  .product--dino .spec-card--age span:last-child{width:7.3rem}
  .product--dino .product__text{font:200 2rem/1.21 var(--f-inter);letter-spacing:.04rem}
  .product--dino .product__photo{left:6.21rem;top:78.26rem;width:26.8rem;height:39.95rem}

  /* ---- нитки ---- */
  .floss{height:58rem;gap:3.2rem;margin-top:8.1rem;padding:0 2rem}
  .floss__head{width:35rem}
  .floss__head h2{font-size:3.2rem;line-height:1.3333;letter-spacing:.064rem}
  .floss__head p{margin-top:2.4rem;font-size:2rem;letter-spacing:.04rem}
  .floss__cards{align-self:flex-start;gap:1.2rem;width:35.2rem}
  .fcard{width:17rem;height:26.9rem;border-radius:2rem}
  .fcard__img--d{display:none}
  .fcard__img--m{display:block}
  .fcard--picks .fcard__img--m{left:calc(50% + .967rem);top:.6rem;width:17.735rem;height:11.7rem}
  .fcard--mint .fcard__img--m{left:calc(50% - .31rem);top:.587rem;width:15.573rem;height:10.696rem}
  .fcard__text{left:calc(50% + .05rem);top:calc(50% + 5.85rem);width:16.3rem}
  .fcard__text h3{font-size:1.8rem;line-height:1.3333;letter-spacing:.018rem}
  .fcard__text p{margin-top:.8rem;font-size:1.4rem;letter-spacing:0}
  .floss__bar{width:35rem;height:8.4rem;padding:2.2rem .8rem}
  .floss__bar img{width:6rem;height:6rem}
  .floss__bar span{flex:1;width:auto;font-size:1.8rem;letter-spacing:-.108rem}

  /* ---- де знайти ---- */
  .where{align-items:flex-start;gap:4.8rem;margin-top:8rem;padding:0 2rem}
  .where__title{width:100%;font-size:3.6rem;line-height:1.22;letter-spacing:.072rem}
  .where__body{display:flex;flex-direction:column;gap:4.8rem;width:35rem;height:auto}
  .where__subtitle{font-size:2.8rem;letter-spacing:.056rem}
  .where__online{position:static;gap:3.2rem;width:35.1rem}
  .where__online .where__subtitle{width:100%}
  .logos{gap:3.2rem 2.4rem;width:35.1rem}
  .logo{width:5rem;height:5rem}
  .logo--rozetka{border-width:.0485rem}
  .logo--eva,.logo--makeup,.logo--epicentr{border-width:.037rem}
  .logo--makeup,.logo--epicentr,.logo--anc{filter:drop-shadow(0 2.9167rem 1.875rem rgba(7,14,39,.05))}
  .logo--eva{order:1}
  .logo--maudau{order:2}
  .logo--watsons{order:3}
  .logo--makeup{order:4}
  .logo--epicentr{order:5}
  .logo--rozetka{order:6}
  .logo--911{order:7}
  .logo--anc{order:8}
  .logo--podorozhnyk{order:9}
  .where__offline{position:static;gap:3.6rem;width:35rem}
  .wgroup__head{gap:1.2rem}
  .wgroup__head span{font-size:2.2rem;letter-spacing:.044rem}
  .chips--d{display:none}
  .chips--m{display:flex}
  .chips__row{gap:1.2rem}
  .chip,.wgroup--pharm .chip{width:auto;height:auto;padding:1.9rem 1.1rem;font-size:1.8rem;letter-spacing:-.108rem}
  .wgroup--pharm{width:100%}

  /* ---- footer ---- */
  .footer{margin-top:5.3rem;padding:4rem 0}
  .footer__inner{align-items:flex-start;max-width:39rem;padding:0 2rem}
  .footer__top{flex-direction:column;gap:4rem}
  .footer__nav a{font-size:2rem}
  .footer__contact span{font-size:1.8rem;white-space:normal}
  .footer__contact--addr span{width:27.2rem}
  .footer__contact:not(.footer__contact--addr) span{white-space:nowrap}
  .footer__bottom{align-items:flex-start;gap:.9rem;text-align:left}
  .footer__copy{align-self:center;text-align:center}
}

/* =====================================================================
   РОЗГОРНУТИЙ СТАН СЛАЙДЕРА (стрілка під описом)
   Макет: Frame 1000003483, варіант Variant6. Великий тюбик ліворуч,
   текст праворуч, три менші тюбики під текстом, лише права стрілка.
   ===================================================================== */
@media (min-width:768px){
  .pastes.is-open .pastes__slide{--s:.6049;--o:0}
  .pastes.is-open .pastes__slide[data-slot="0"]{--x:-50.73rem;--y:8.67rem;--s:1.0493;--o:1;--z:3}
  /* Ряд менших тюбиків стоїть під текстом. Якщо опис довший, ніж у макеті,
     JS збільшує --open-y, щоб тюбики не наїхали на текст. */
  .pastes.is-open .pastes__slide[data-slot="1"]{--x:-15.86rem;--y:var(--open-y,38.31rem);--o:.35;--z:2}
  .pastes.is-open .pastes__slide[data-slot="2"]{--x:5.29rem;--y:var(--open-y,38.31rem);--o:.35;--z:2}
  .pastes.is-open .pastes__slide[data-slot="3"]{--x:26.44rem;--y:var(--open-y,38.31rem);--o:.35;--z:2}
  .pastes.is-open .pastes__slide[data-slot="4"],
  .pastes.is-open .pastes__slide[data-slot="5"]{--x:56rem;--y:var(--open-y,38.31rem);--o:0}
  .pastes.is-open .pastes__slide[data-slot="-1"],
  .pastes.is-open .pastes__slide[data-slot="-2"],
  .pastes.is-open .pastes__slide[data-slot="-3"],
  .pastes.is-open .pastes__slide[data-slot="-4"],
  .pastes.is-open .pastes__slide[data-slot="-5"],
  .pastes.is-open .pastes__slide[data-slot="-6"]{--x:-90rem;--y:8.67rem;--o:0}

  /* Текст переїжджає у праву колонку */
  .pastes.is-open .pastes__main{left:67.5rem;top:30.94rem;width:72.7rem;transform:none;align-items:flex-start;gap:0}
  .pastes.is-open .pastes__spacer{display:none}
  .pastes.is-open .pastes__caption{align-items:flex-start;gap:2.4rem;width:72.7rem;animation:fesco-open-in .4s ease}
  .pastes.is-open .pastes__caption-text{align-items:flex-start;width:72.7rem;gap:3.2rem}
  .pastes.is-open .pastes__name{font-size:5.2rem;letter-spacing:.052rem;text-align:left}
  .pastes.is-open .pastes__desc-wrap{width:72.7rem}
  .pastes.is-open .pastes__desc{position:static;width:100%;font-weight:600;white-space:normal;text-align:left;transform:none}
  .pastes.is-open .pastes__full{order:1;position:static;width:72.7rem;padding:0;border-radius:0;background:none;box-shadow:none;
    transform:none;font:400 3.2rem/1.42 var(--f-prox);letter-spacing:-.192rem;color:#808080;text-align:left}
  .pastes.is-open .pastes__down{order:2;margin-left:4.8rem}

  /* Ліва стрілка в цьому стані не потрібна, права стає на місце з макета */
  .pastes.is-open .pastes__arrow--prev{display:none}
  .pastes.is-open .pastes__arrow--next{left:152.4rem;top:86.4rem}
}
/* Менші тюбики під текстом усі однаково напівпрозорі. Клік по тюбику робить
   цю пасту активною (main.js, dragEnd), тому вони клікабельні на всіх пристроях.
   Перетягування працює і з тюбика: подія все одно доходить до слайдера. */
.pastes.is-open .pastes__slide[data-slot="1"],
.pastes.is-open .pastes__slide[data-slot="2"],
.pastes.is-open .pastes__slide[data-slot="3"]{pointer-events:auto;cursor:pointer}
/* Під курсором тюбик стає повнокольоровим. Лише там, де є миша. */
@media (hover:hover){
  .pastes.is-open .pastes__slide[data-slot="1"]:hover,
  .pastes.is-open .pastes__slide[data-slot="2"]:hover,
  .pastes.is-open .pastes__slide[data-slot="3"]:hover{--o:1}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* на наведення відгукуємося швидше, ніж на прокрутку каруселі */
  .pastes.is-open .pastes__slide[data-slot="1"]:hover,
  .pastes.is-open .pastes__slide[data-slot="2"]:hover,
  .pastes.is-open .pastes__slide[data-slot="3"]:hover{transition:translate .5s cubic-bezier(.22,.61,.36,1),scale .5s cubic-bezier(.22,.61,.36,1),opacity .22s ease}
}
@keyframes fesco-open-in{from{opacity:0;translate:0 1.6rem}to{opacity:1;translate:none}}

/* =====================================================================
   WordPress: внутрішні сторінки (не головна)
   ===================================================================== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:3rem 12rem;border-bottom:.1rem solid var(--c-border)}
.topbar__logo img{width:23.1rem;height:6rem;object-fit:cover}
.topbar .nav{position:static}
.wp-page{padding:6rem 12rem 10rem}
.wp-page__inner{max-width:120rem}
.wp-page__title{margin-bottom:4rem;font:700 6rem/1.2 var(--f-evo);color:var(--c-blue)}
.wp-page__content{font:400 2.4rem/1.5 var(--f-prox);color:var(--c-navy)}
.wp-page__content p,.wp-page__content ul,.wp-page__content ol{margin:0 0 2rem}
.wp-page__content ul,.wp-page__content ol{padding-left:3rem}
.wp-page__content ul{list-style:disc}
.wp-page__content h2,.wp-page__content h3{margin:4rem 0 2rem;font-family:var(--f-evo);font-weight:700;color:var(--c-blue)}
.wp-page__content h2{font-size:4rem}
.wp-page__content h3{font-size:3rem}
.wp-page__content a{color:var(--c-blue);text-decoration:underline}
.wp-page__content img{max-width:100%;height:auto}
.admin-bar .hero{margin-top:0}
@media (max-width:767px){
  .topbar{padding:2rem}
  .topbar__logo img{width:15rem;height:3.9rem}
  .topbar .nav{display:none}
  .wp-page{padding:4rem 2rem 6rem}
  .wp-page__title{font-size:3.2rem}
  .wp-page__content{font-size:1.8rem}
  .wp-page__content h2{font-size:2.4rem}
  .wp-page__content h3{font-size:2rem}
}

/* =====================================================================
   СТОРІНКА 404
   ===================================================================== */
.nf{padding:8rem 12rem 12rem;background:linear-gradient(160deg,#f6faff 0%,#fff 60%)}
.nf__inner{display:flex;align-items:center;justify-content:space-between;gap:6rem;max-width:168rem;margin:0 auto}
.nf__text{max-width:76rem}
.nf__code{display:inline-block;margin-bottom:2.4rem;padding:.6rem 2.4rem;border-radius:100px;background:var(--c-border);font:700 2.2rem/1.4 var(--f-prox);letter-spacing:.22rem;color:#fff}
.nf__title{font:700 7.8rem/8.9rem var(--f-evo);letter-spacing:.156rem;text-transform:uppercase;color:var(--c-blue)}
.nf__lead{margin-top:3.2rem;font:400 3.2rem/1.28 var(--f-prox);letter-spacing:-.064rem;color:#616161}
.nf__btn{display:inline-flex;align-items:center;justify-content:center;width:27.045rem;height:6.851rem;margin-top:4.8rem}
.nf__links{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:4.8rem}
.nf__photo{width:52rem;max-width:40%;height:auto;object-fit:contain}
@media (max-width:767px){
  .nf{padding:4rem 2rem 6rem}
  .nf__inner{flex-direction:column;gap:3.2rem;text-align:center}
  .nf__text{max-width:100%}
  .nf__code{margin-bottom:1.6rem;padding:.4rem 1.6rem;font-size:1.6rem}
  .nf__title{font-size:3.6rem;line-height:1.2}
  .nf__lead{margin-top:2rem;font-size:2rem}
  .nf__btn{width:100%;height:6.851rem;margin-top:3.2rem}
  .nf__links{justify-content:center;gap:1.2rem;margin-top:3.2rem}
  .nf__photo{width:28rem;max-width:80%}
}

/* =====================================================================
   АНІМАЦІЇ ТА ІНТЕРАКТИВНІ СТАНИ
   Усе, що рухається, вимикається за prefers-reduced-motion наприкінці файлу.
   ===================================================================== */

/* ---- 1. Кнопки і наведення ---- */
.btn-primary{position:relative;overflow:hidden;cursor:pointer;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,background-color .28s ease}
.btn-primary::after{content:'';position:absolute;left:-60%;top:0;width:45%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn-primary:hover{transform:translateY(-.4rem) scale(1.02);background:#98c2bc;
  box-shadow:0 1.6rem 3.6rem rgba(82,111,143,.28)}
.btn-primary:hover::after{animation:fesco-sweep .75s ease-out}
.btn-primary:active{transform:translateY(-.1rem) scale(.99)}
@keyframes fesco-sweep{0%{left:-60%;opacity:1}100%{left:120%;opacity:0}}

.btn-outline{cursor:pointer;transition:background-color .26s ease,border-color .26s ease,color .26s ease,transform .26s ease,box-shadow .26s ease}
.btn-outline span{transition:color .26s ease}
.btn-outline img{transition:transform .26s ease,filter .26s ease}
.btn-outline:hover{background:var(--c-border);border-color:var(--c-border);transform:translateY(-.2rem);
  box-shadow:0 1rem 2.4rem rgba(82,111,143,.18)}
.btn-outline:hover span{color:#fff}
.btn-outline:hover img{transform:translateX(.6rem);filter:brightness(0) invert(1)}

/* Стрілки слайдера паст */
.pastes__arrow{cursor:pointer;transition:transform .26s cubic-bezier(.22,.61,.36,1),background-color .26s ease,box-shadow .26s ease}
.pastes__arrow img{transition:transform .26s ease}
.pastes__arrow:hover{background:#a9c4e0;box-shadow:0 1.2rem 2.8rem rgba(82,111,143,.28);transform:scale(1.07)}
.pastes__arrow--prev:hover img{transform:scaleX(-1) translateX(.5rem)}
.pastes__arrow--next:hover img{transform:translateX(.5rem)}
.pastes__arrow:active{transform:scale(.97)}

/* Стрілки каруселі щіток */
.brushes__arrow{cursor:pointer;transition:transform .24s ease,opacity .24s ease}
.brushes__arrow:hover{transform:scale(1.18)}
.brushes__arrow:active{transform:scale(.95)}

/* Стрілка «розгорнути опис пасти» */
.pastes__down{transition:transform .24s ease,opacity .24s ease}
.pastes__down:hover{transform:translateY(.3rem)}

/* Меню */
.nav__link::before{content:'';position:absolute;left:0;right:0;top:3.1rem;height:.1rem;
  background:var(--c-blue);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.nav__link:hover::before{transform:scaleX(1)}
.nav__link{transition:color .24s ease}
.nav__link:hover{color:var(--c-blue)}

/* Соцмережі */
.socials__item{transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s ease}
.socials__item:hover{transform:translateY(-.3rem) scale(1.08);box-shadow:0 1rem 2.2rem rgba(82,111,143,.3)}

/* Логотипи магазинів */
.logo{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.logo:hover{transform:translateY(-.6rem) scale(1.06);box-shadow:0 1.4rem 3rem rgba(2,31,67,.16)}

/* Чипи магазинів і аптек */
.chip{transition:color .24s ease,border-color .24s ease,background-color .24s ease,transform .24s ease}
a.chip:hover,.chip:hover{border-color:var(--c-blue);background:#f2f7fd;transform:translateY(-.2rem)}

/* Кружечки кольорів щіток */
.bdot{transition:opacity .24s ease,border-color .24s ease,transform .24s ease}
.bdot:hover{opacity:.7;transform:scale(1.1)}
.bdot.is-active{transform:none}
.bcard__img{transition:opacity .2s ease}

/* Картки продуктів злегка підіймаються */
/* Картки не підстрибують: лишається лише м'яка тінь під курсором. */
.fcard,.bcard{transition:box-shadow .34s ease}
.fcard:hover,.bcard:hover{box-shadow:0 2rem 4.4rem rgba(2,31,67,.1)}

/* Посилання у футері */
.footer__nav a,.footer__offer,.footer__contact{transition:color .24s ease,opacity .24s ease}
.footer__nav a:hover,.footer__offer:hover{color:var(--c-blue);text-decoration:underline}
.footer__contact:hover{opacity:.7}

/* Видимий фокус з клавіатури: раніше його не було взагалі */
a:focus-visible,button:focus-visible{outline:.3rem solid var(--c-blue);outline-offset:.4rem;border-radius:.4rem}

/* ---- 2. Поява блоків при скролі ---- */
/* translate/scale, а не transform: багато блоків уже відцентровані через
   transform:translate(-50%), і перезапис зламав би їхнє положення */
.reveal{opacity:0;translate:0 3.2rem;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),translate .7s cubic-bezier(.22,.61,.36,1),scale .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms)}
.reveal--left{translate:-4rem 0}
.reveal--right{translate:4rem 0}
.reveal--zoom{translate:0 1.6rem;scale:.94}
.reveal.is-visible{opacity:1;translate:none;scale:none}

/* ---- 3. Слайдер паст ---- */
/* Тюбики їдуть між позиціями; під час перетягування пальцем чи мишею
   переходи вимкнені, щоб карусель ішла за рукою. */
.pastes__slide{transition:translate .5s cubic-bezier(.22,.61,.36,1),scale .5s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.pastes__stage.is-dragging .pastes__slide{transition:none}
.pastes__caption-text{transition:opacity .24s ease,translate .28s ease}
.pastes__stage.is-switching .pastes__caption-text{opacity:0;translate:0 1.2rem}

/* ---- 4. Карусель щіток ---- */
.bcard{transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .38s ease,box-shadow .34s ease}

/* ---- 5. Розгортання опису пасти ---- */
.pastes__full{opacity:0;translate:0 1.2rem;scale:.98;transform-origin:bottom center;
  transition:opacity .3s ease,translate .3s cubic-bezier(.22,.61,.36,1),scale .3s ease;pointer-events:none}
.pastes__full.is-open{opacity:1;translate:none;scale:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none;scale:none;transition:none}
  .btn-primary,.btn-outline,.logo,.chip,.fcard,.bcard,.socials__item,.pastes__arrow,
  .pastes__slide,.pastes__caption-text,.pastes__full,.brushes__arrow,.bdot,.bcard__img,.brushes__track{transition:none}
  .btn-primary:hover::after{animation:none}
}

/* =====================================================================
   БУРГЕР-МЕНЮ (до 1280px)
   Розміри тут у px, а не в rem: під 1280px 1rem стає 4-6px,
   і меню в rem було б нечитабельним.
   ===================================================================== */
.burger{display:none}
.nav-backdrop{display:none}

@media (max-width:1279px){
  .burger{position:absolute;right:16px;top:16px;z-index:60;
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;padding:0 10px;border:0;border-radius:12px;
    background:rgba(255,255,255,.82);backdrop-filter:blur(6px);cursor:pointer;
    box-shadow:0 4px 14px rgba(2,31,67,.12);
    transition:background-color .24s ease,box-shadow .24s ease}
  .burger:hover{background:#fff;box-shadow:0 6px 18px rgba(2,31,67,.18)}
  .burger__line{display:block;height:2px;border-radius:2px;background:var(--c-blue);
    transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
  body.nav-open .burger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .burger__line:nth-child(2){opacity:0}
  body.nav-open .burger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .topbar .burger{position:static;margin-left:auto}

  /* Саме меню стає висувною панеллю праворуч */
  .nav,.topbar .nav{position:fixed;right:0;top:0;bottom:0;left:auto;z-index:55;
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    width:min(82vw,320px);padding:96px 28px 32px;
    background:#fff;box-shadow:-18px 0 48px rgba(2,31,67,.16);
    transform:translateX(102%);visibility:hidden;
    transition:transform .34s cubic-bezier(.22,.61,.36,1),visibility .34s;
    overflow-y:auto}
  body.nav-open .nav{transform:none;visibility:visible}

  .nav .nav__link,.nav a{width:100%;padding:16px 0;font-size:18px;line-height:1.3;
    color:var(--c-navy);border-bottom:1px solid #eef2f7;white-space:normal;text-align:left}
  .nav .nav__link::after,.nav .nav__link::before{display:none}
  .nav .nav__link.is-active{padding:16px 0;color:var(--c-blue);font-weight:700}

  /* Затемнення під відкритим меню. Атрибут hidden тут не спрацьовує (display:block
     сильніший), тому закрите затемнення ховаємо через visibility: інакше невидимий
     шар на весь екран перехоплював би дотики до кнопок і посилань на сторінці. */
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:50;
    background:rgba(2,31,67,.42);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,visibility 0s linear .3s}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}
  body.nav-open{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .nav,.burger__line,.nav-backdrop{transition:none}
}

/* =====================================================================
   ПЕРЕМИКАЧ МОВИ (UA / EN / RO)
   У макеті його немає. На десктопі кнопка стає на правий край рядка меню,
   де раніше закінчувались пункти (одна вертикаль з колонкою соцмереж),
   а саме меню відсувається ліворуч на її ширину.
   ===================================================================== */
.lang{position:absolute;right:11.4rem;top:3.7rem;z-index:6}
.lang__btn{display:flex;align-items:center;justify-content:center;gap:.8rem;min-width:8.4rem;height:4.2rem;padding:0 1.4rem 0 1.7rem;
  border:.15rem solid var(--c-border);border-radius:10rem;background:rgba(255,255,255,.7);
  font:400 1.9rem/1 var(--f-prox);color:var(--c-dark);list-style:none;cursor:pointer;user-select:none;
  transition:border-color .24s ease,color .24s ease,background-color .24s ease,box-shadow .24s ease}
.lang__btn::-webkit-details-marker{display:none}
.lang__btn::marker{content:''}
.lang__chev{width:1.2rem;height:.8rem;flex:none;transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.lang__btn:hover,.lang[open] .lang__btn{border-color:var(--c-blue);color:var(--c-blue);background:#fff;box-shadow:0 .8rem 2rem rgba(82,111,143,.16)}
.lang[open] .lang__chev{transform:rotate(180deg)}
.lang__btn:focus-visible{outline:.3rem solid var(--c-blue);outline-offset:.4rem}

.lang__list{position:absolute;right:0;top:calc(100% + 1rem);min-width:22rem;margin:0;padding:.8rem;list-style:none;
  background:#fff;border:.1rem solid #e6eef7;border-radius:1.6rem;box-shadow:0 1.8rem 4.4rem rgba(2,31,67,.14)}
.lang[open] .lang__list{animation:fesco-lang-in .22s cubic-bezier(.22,.61,.36,1)}
@keyframes fesco-lang-in{from{opacity:0;translate:0 -.8rem}to{opacity:1;translate:none}}
.lang__link{display:flex;align-items:center;gap:1.4rem;padding:1.1rem 1.4rem;border-radius:1rem;
  font:400 1.9rem/1.2 var(--f-prox);color:var(--c-navy);white-space:nowrap;transition:background-color .2s ease}
.lang__link-code{min-width:3.2rem;font-weight:700;color:var(--c-blue)}
.lang__link:hover{background:#f2f7fd}
.lang__link.is-current{background:#eef4fb}
.lang__link.is-current::after{content:'';width:.6rem;height:1.1rem;margin:0 .4rem -.2rem auto;
  border:solid var(--c-blue);border-width:0 .2rem .2rem 0;rotate:45deg}

@media (min-width:1280px){
  .nav.has-lang{right:24.2rem}
  .topbar .nav{margin-left:auto}
  .topbar .lang{position:relative;right:auto;top:auto;margin-left:4.4rem}
}

/* До 1280px: кнопка того ж вигляду, що й бургер, ліворуч від нього. */
@media (max-width:1279px){
  .lang{right:70px;top:16px;z-index:45}
  .lang__btn{min-width:62px;height:46px;padding:0 12px;gap:6px;border:0;border-radius:12px;
    background:rgba(255,255,255,.82);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(2,31,67,.12);
    font:700 15px/1 var(--f-prox);color:var(--c-blue)}
  .lang__btn:hover,.lang[open] .lang__btn{background:#fff;box-shadow:0 6px 18px rgba(2,31,67,.18);color:var(--c-blue)}
  .lang__chev{width:10px;height:7px}
  .lang__btn:focus-visible{outline:3px solid var(--c-blue);outline-offset:3px}
  .lang__list{top:54px;min-width:190px;padding:6px;border-width:1px;border-radius:14px;box-shadow:0 14px 36px rgba(2,31,67,.18)}
  .lang[open] .lang__list{animation-name:fesco-lang-in-px}
  .lang__link{gap:12px;padding:11px 12px;border-radius:10px;font-size:15px}
  .lang__link-code{min-width:26px}
  .lang__link.is-current::after{width:5px;height:9px;margin:0 4px -2px auto;border-width:0 2px 2px 0}

  /* У розмітці бургер стоїть перед кнопкою мови, а в шапці внутрішніх
     сторінок порядок зворотний: спершу мова, потім бургер. */
  .topbar .lang{position:relative;right:auto;top:auto;order:2;margin-left:auto}
  .topbar .burger{order:3;margin-left:10px}
}
@keyframes fesco-lang-in-px{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}

@media (prefers-reduced-motion:reduce){
  .lang__btn,.lang__chev{transition:none}
  .lang[open] .lang__list{animation:none}
}

/* Румунський заголовок першого екрана довший за український рівно настільки,
   що останній рядок не вміщується у 76.6rem. Прибираємо розрідження літер
   саме для румунської: текст лишається цілим і стоїть у три рядки. */
html[lang="ro-RO"] .hero__title{letter-spacing:0}