/* Yug Dveri — test layout v2 (modern e-shop) */
:root{
--y:#FFD500; --y-d:#F2C800; --dark:#1E2024; --hero:#2A2522; --bg:#F6F8F8; --card:#fff;
--line:#E6E8EA; --muted:#8A9097; --red:#E5252A; --green:#2EA44F;
--r:10px; --r-btn:7px; --sh:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:1.35;color:var(--dark);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 15px}
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.ic-xs{width:12px;height:12px}.ic-sm{width:14px;height:14px}.ic-lg{width:22px;height:22px}.ic-xl{width:28px;height:28px}
.ic-y{color:var(--y)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;border-radius:var(--r-btn);padding:11px 20px;transition:background .15s,transform .15s}
.btn--y{background:var(--y);color:var(--dark)}
.btn--y:hover{background:var(--y-d)}
.btn--sm{font-size:11px;padding:8px 14px}
.btn--outline{border:1px solid var(--dark);padding:9px 18px;font-size:12px}
.btn--outline:hover{background:var(--dark);color:#fff}
/* 1. topbar */
.topbar{background:var(--dark);color:#fff;font-size:11px;font-weight:500}
.topbar__in{display:flex;justify-content:flex-end;align-items:center;height:27px}
.topbar__left,.topbar__right,.topbar__links{display:flex;align-items:center}
.topbar__city{display:flex;align-items:center;gap:5px;margin-right:34px}
.topbar__links a{margin-right:30px;opacity:.9}
.topbar a:hover{color:var(--y)}
.topbar__right{gap:26px}
.topbar__hours,.topbar__login{display:flex;align-items:center;gap:7px}
.topbar__phone{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.topbar__cart{position:relative;display:flex}
.badge-y{position:absolute;top:-6px;right:-9px;background:var(--y);color:var(--dark);font-size:9px;font-weight:700;border-radius:50%;width:15px;height:15px;display:grid;place-items:center}
/* 2. header */
.header{background:#fff}
.header__in{display:flex;align-items:center;height:70px;gap:24px;overflow:visible}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:none}
.logo img{display:block;height:56px;width:auto;max-width:none}
.logo__tag{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.12em;line-height:1.2;white-space:nowrap;color:#3a3d42}
.burger{display:none}
.search{flex:0 1 460px;min-width:0;display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-btn);height:36px;position:relative;margin-left:10px}
.search__ic{position:absolute;left:12px;color:var(--muted)}
.search input{flex:1;height:100%;border:0;outline:0;padding:0 12px 0 38px;font:inherit;font-size:12px;background:none;min-width:0}
.search input::placeholder{color:var(--muted)}
.search button{height:36px;margin:-1px -1px -1px 0;background:var(--y);font-weight:700;padding:0 34px;border-radius:0 var(--r-btn) var(--r-btn) 0}
.search button:hover{background:var(--y-d)}
.infos{display:flex;gap:18px;margin-left:auto}
.info{display:flex;align-items:center;gap:8px;font-size:9.5px;line-height:1.4}
.info b{display:block;font-weight:600;white-space:nowrap}
.info div{white-space:nowrap}
.info span{display:block}
.info--phone b{font-size:11.5px;font-weight:700}
/* 3. menu */
.menu{background:var(--y)}
.menu__in{display:flex;justify-content:center;gap:38px;height:32px;align-items:center;font-weight:600;font-size:12px}
.menu a{padding:8px 0;border-bottom:2px solid transparent}
.menu a:hover{border-color:var(--dark)}
/* layout */
.layout{display:grid;grid-template-columns:218px 1fr;gap:10px 12px;padding-top:10px;padding-bottom:10px}
.content{min-width:0;display:flex;flex-direction:column;gap:10px}
.bottom{grid-column:1/-1}
/* 4. sidebar */
.sidebar{display:flex;flex-direction:column;gap:10px}
.catalog{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.catalog__head{display:flex;align-items:center;gap:14px;background:var(--y);font-weight:700;font-size:13px;padding:0 16px;height:34px;border-radius:var(--r) var(--r) 0 0}
.catalog__close{display:none;margin-left:auto;font-size:26px;line-height:1}
.catalog__list li+li{border-top:1px solid var(--line)}
.catalog__list a{display:flex;align-items:center;gap:14px;padding:0 12px 0 14px;min-height:38px;font-size:12px;font-weight:500;line-height:1.25}
.catalog__list a:hover{background:#FFFBE5}
.catalog__list span{flex:1;padding:5px 0}
.ci{width:22px;height:22px;flex:none;color:var(--dark)}
.ci-sale{background:var(--red);color:#fff;border-radius:50%;font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center}
.chev{color:var(--muted)}
.badge-new{font-style:normal;background:var(--red);color:#fff;font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;margin-left:5px;vertical-align:2px}
.promo{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;height:143px;border-radius:var(--r);overflow:hidden;background:#111;padding:0 16px;color:#fff}
.promo img{position:absolute;right:0;top:0;height:100%;width:55%;object-fit:cover}
.promo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111 40%,rgba(17,17,17,.55) 62%,rgba(17,17,17,0) 100%);z-index:1}
.promo>span{position:relative;z-index:2}
.promo__title{text-transform:uppercase;font-weight:800;font-size:14.5px;line-height:1.3;max-width:130px}
/* 5. hero */
.hero{position:relative;height:232px;border-radius:var(--r);overflow:hidden;background:var(--hero);color:#fff}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.hero__slide.is-active{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(32,27,24,.96) 0%,rgba(32,27,24,.85) 30%,rgba(32,27,24,.25) 58%,rgba(32,27,24,0) 72%)}
.hero__text{position:relative;z-index:2;padding:26px 0 0 33px;max-width:420px}
.hero__pre{text-transform:uppercase;font-size:12px;font-weight:500;letter-spacing:.06em;opacity:.9}
.hero__title{text-transform:uppercase;font-weight:800;font-size:30px;line-height:1.22;margin:9px 0 10px}
.hero__sub{font-size:11px;line-height:1.6;margin-bottom:13px}
.hero__text .btn{font-size:11px;padding:9px 20px}
.hero__adv{position:absolute;z-index:2;right:0;top:0;bottom:0;width:153px;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);padding:24px 0 0 22px;display:flex;flex-direction:column;gap:17px;font-size:9.5px;line-height:1.45}
.hero__adv li{display:flex;align-items:center;gap:12px}
.hero__adv .ic{width:20px;height:20px}
.hero__nav{position:absolute;z-index:3;right:20px;bottom:11px;display:flex;align-items:center;gap:6px;font-size:10px}
.hero__dot{color:rgba(255,255,255,.75);padding:3px 8px;font-weight:500}
.hero__dot.is-active{color:#fff;font-weight:700}
.hero__arr{color:#fff;display:flex;padding:2px 4px}
/* 6. tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tile{position:relative;height:73px;background:#fff;border-radius:8px;box-shadow:var(--sh);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2px;padding:0 4px 0 8px;transition:box-shadow .15s}
.tile:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.tile__t{flex:1 1 auto;min-width:0;font-size:9.5px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.tile__img{flex:0 0 52px;height:62px;display:flex;align-items:center;justify-content:center}
.tile__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tile--sale{background:#FFF1EF}
.sale-circle{transform:rotate(-8deg);width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-weight:800;font-size:24px;display:grid;place-items:center;box-shadow:0 3px 8px rgba(229,37,42,.35)}
/* 7. offers */
.offers__head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.offers__head h2{font-size:17px;font-weight:700;margin-right:auto}
.tabs{display:flex;background:#EEF0F1;border-radius:6px;overflow:hidden}
.tab{font-size:9.5px;font-weight:500;padding:7px 11px;border-radius:5px}
.tab.is-active{background:var(--y);font-weight:600}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:10px;margin-left:12px}
.more:hover,.read:hover{color:#7a6400}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card{position:relative;background:#fff;border-radius:8px;box-shadow:var(--sh);border:1px solid var(--line);display:flex;gap:8px;padding:8px 10px 9px 10px;min-height:150px;transition:box-shadow .15s,opacity .25s}
.card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.card.is-hidden{display:none}
.label{position:absolute;left:8px;top:8px;z-index:2;color:#fff;font-size:9px;font-weight:600;padding:3px 7px;border-radius:4px}
.label--red{background:var(--red)}.label--green{background:var(--green)}
.card__img{flex:0 0 70px;display:flex;align-items:flex-end;justify-content:center;padding-top:14px}
.card__img{background:#fff}
.card__img img{max-height:122px;max-width:100%;width:auto;height:auto;object-fit:contain}
.card__body{flex:1;min-width:0;display:flex;flex-direction:column}
.card h3{font-size:11px;font-weight:600;margin-top:4px}
.card__desc{font-size:9px;color:var(--muted);margin:3px 0 7px;line-height:1.35}
.stock{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:6px}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.price{font-size:15px;font-weight:700;margin:4px 0 7px}
.card__act{display:flex;align-items:center;gap:8px;margin-top:auto}
.btn--cart{font-size:9.5px;padding:9px 12px;gap:7px;white-space:nowrap}
.card__icons{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.card__icons .ic{width:13px;height:13px}
/* 8. news + about */
.bottom{display:grid;grid-template-columns:minmax(0,1fr) 391px;gap:12px}
.box{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:8px 14px 9px}
.box h2{font-size:16px;font-weight:700;line-height:1.2}
.box__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.news__list{display:grid;grid-template-columns:repeat(3,1fr)}
.news__item{display:flex;gap:10px;padding-right:10px}
.news__item+.news__item{border-left:1px solid var(--line);padding-left:10px}
.news__item img{width:88px;height:60px;object-fit:cover;border-radius:5px;flex:none}
.news__item time{font-size:8.5px;color:var(--muted)}
.news__item h3{font-size:9px;font-weight:600;line-height:1.3;margin:3px 0 5px}
.read{font-size:9px;font-weight:500;display:inline-flex;gap:5px;align-items:center;text-decoration:underline;text-underline-offset:2px}
.about h2{margin-bottom:5px}
.about p{font-size:8.6px;line-height:1.28;margin-bottom:5px}
.about .btn{font-size:9px;padding:4px 14px;border-radius:6px}
/* 9. footer */
.footer{background:var(--dark);color:#fff;padding:12px 0 12px;margin-top:2px}
.footer__in{display:grid;grid-template-columns:1.35fr .8fr 1.4fr 1.1fr 1fr 1fr;gap:0}
.fcol{padding:0 20px;font-size:9px;line-height:1.3;display:flex;flex-direction:column;gap:1.5px}
.fcol+.fcol{border-left:1px solid rgba(255,255,255,.12)}
.fcol:first-child{padding-left:0}
.fcol h4{font-size:10px;font-weight:700;margin-bottom:2px}
.fcol a{opacity:.9}
.fcol a:hover{color:var(--y);opacity:1}
.fcol--brand img{display:block;height:48px;width:auto;max-width:none;margin-bottom:8px}
.fcol--brand p{line-height:1.45}
.fcol--salons p{display:flex;gap:9px;line-height:1.3;margin-bottom:2px}
.fcol--salons .ic{width:13px;height:13px;margin-top:1px}
.fcol .all{font-weight:600;display:flex;gap:6px;align-items:center;margin-top:3px}
.fcol--contacts{gap:7px}
.fcol--contacts .ic{width:15px;height:15px}
.fphone{font-size:12.5px;font-weight:700;display:flex;gap:10px;align-items:center;opacity:1!important}
.fcol--contacts p,.fmail{display:flex;gap:10px;align-items:center}
.fmail{text-decoration:underline}
.socials{display:flex;gap:12px;margin-top:4px}
.socials a{width:30px;height:30px;border-radius:7px;background:#fff;color:var(--dark);display:grid;place-items:center;opacity:1}
.socials a:hover{background:var(--y);color:var(--dark)}
.socials .ic{width:18px;height:18px}
.catalog-overlay{display:none}
/* ---------- tablet ---------- */
@media (max-width:1199px){
.infos .info:not(.info--phone){display:none}
.menu__in{gap:24px}
.topbar__links a{margin-right:18px}
.tiles{grid-template-columns:repeat(3,1fr)}
.tile__img{flex-basis:62px}
.products{grid-template-columns:repeat(2,1fr)}
.card__img{flex-basis:90px}
.bottom{grid-template-columns:minmax(0,1fr) 330px}
.footer__in{grid-template-columns:repeat(3,1fr);row-gap:22px}
.fcol:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:991px){
.topbar__links,.topbar__hours{display:none}
.infos{display:none}
.search{flex:1 1 auto}
.layout{grid-template-columns:1fr}
.burger{display:flex}
.sidebar{display:contents}
.catalog{position:fixed;z-index:50;left:0;top:0;bottom:0;width:300px;max-width:86vw;border-radius:0;transform:translateX(-102%);transition:transform .25s ease;overflow-y:auto}
.catalog__head{border-radius:0;height:52px}
.catalog__close{display:block}
body.catalog-open .catalog{transform:none}
body.catalog-open .catalog-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.promo{order:3;height:130px}
.promo img{width:45%}
.promo__title{max-width:58%;font-size:clamp(12px,3.6vw,16px)}
.tiles{grid-template-columns:repeat(3,1fr)}
.bottom{grid-template-columns:1fr}
.menu__in{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.menu__in::-webkit-scrollbar{display:none}
}
/* ---------- phone ---------- */
@media (max-width:640px){
body{font-size:14px}
.topbar__login span,.topbar__login{display:none}
.topbar__in{height:34px}
.topbar__city{margin-right:0}
.header__in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:10px 14px}
.logo img{height:42px}
.logo__tag{display:none}
.infos{display:none}
.search{order:5;flex-basis:100%;max-width:none;margin:0}
.search button{padding:0 18px}
.menu__in{gap:22px;padding:0 16px}
.hero{height:auto;min-height:0}
.hero::before{background:linear-gradient(180deg,rgba(32,27,24,.6) 0%,rgba(32,27,24,.92) 100%)}
.hero__text{padding:22px 18px 46px;max-width:none}
.hero__title{font-size:26px}
.hero__sub{font-size:13px}
.hero__adv{display:none}
.tiles{grid-template-columns:repeat(2,1fr)}
.tile__t{font-size:12px}
.offers__head{flex-wrap:wrap;gap:10px}
.offers__head h2{flex-basis:100%}
.tabs{order:3;flex-basis:100%;overflow-x:auto}
.tab{font-size:12px;padding:8px 12px;white-space:nowrap}
.more{font-size:12px}
.offers__head .more{position:absolute;right:0}
.offers{position:relative}
.products{grid-template-columns:1fr}
.card__img{flex-basis:100px}
.card__img img{max-height:170px}
.card h3{font-size:14px}
.card__desc,.stock{font-size:12px}
.price{font-size:19px}
.btn--cart{font-size:12px}
.news__list{grid-template-columns:1fr;gap:14px}
.news__item,.news__item+.news__item{border-left:0;padding:0}
.news__item+.news__item{border-top:1px solid var(--line);padding-top:14px}
.news__item h3{font-size:13px}
.news__item time,.read{font-size:11px}
.about p{font-size:13px}
.box h2{font-size:19px}
.footer__in{grid-template-columns:1fr 1fr;row-gap:22px}
.fcol{padding:0 12px 0 0!important;border-left:0!important;font-size:12px}
.fcol h4{font-size:13px}
.fcol--brand,.fcol--salons,.fcol--contacts{grid-column:1/-1}
}
/* menu dropdown «О компании» (msg 11327); list is fixed-positioned by JS so the scrollable mobile menu doesn't clip it */
.menu__dd{display:flex;align-items:center}
.menu__dd-btn{display:flex;align-items:center;gap:5px;padding:8px 0;font-weight:600;font-size:inherit;border-bottom:2px solid transparent}
.menu__dd-btn:hover,.menu__dd.is-open .menu__dd-btn{border-color:var(--dark)}
.menu__dd.is-open .menu__dd-btn svg{transform:rotate(180deg)}
.menu__dd-list{display:none;position:fixed;z-index:60;min-width:200px;background:#fff;border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px 0}
.menu__dd.is-open .menu__dd-list{display:block}
.menu .menu__dd-list a{display:block;padding:9px 16px;border:0;font-weight:500;white-space:nowrap}
.menu .menu__dd-list a:hover{background:var(--y)}
/* header row: hours, phone, cart (msg 11332, topbar removed) */
.hdr-hours{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;white-space:nowrap;color:#3a3d42}
.hdr-phone{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;white-space:nowrap}
.hdr-cart{position:relative;display:flex}
.header .infos{margin-left:0}
.hdr-hours{margin-left:auto}
@media (max-width:1199px){.header .infos{display:none}}
@media (max-width:991px){.hdr-hours{display:none} .hdr-phone{margin-left:auto}}
@media (max-width:640px){.hdr-phone{font-size:13px} .hdr-phone .ic{display:none}}
/* logo butterfly: wings layer flaps around the body (msg 11334) */
.logo__img{position:relative;display:block}
.logo__wings{position:absolute;left:75.833%;top:0;width:24.167%;height:61.818%;max-width:none;
transform-origin:0 55%;animation:ug-flap 2.6s ease-in-out infinite}
.logo .logo__img img:first-child{height:56px}
.logo .logo__wings{width:24.167%;height:auto}
@keyframes ug-flap{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.3) skewY(-6deg)}}
@media (prefers-reduced-motion:reduce){.logo__wings{animation:none}}
@media (max-width:640px){.logo .logo__img img:first-child{height:42px}}
@media (min-width:992px){.header__in{gap:16px}.search{margin-left:4px;min-width:300px}.header .infos{gap:14px}}
/* inner page: delivery (msg 11346) */
.page{padding:22px 26px 28px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:10px}
.crumbs a{text-decoration:underline}
.crumbs span{margin:0 7px}
.page h1{font-size:28px;font-weight:800;margin-bottom:16px}
.page p{font-size:15px;line-height:1.6;max-width:820px;margin-bottom:12px}
.page__lead{font-weight:700}
.calc{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:16px}
.calc__item{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:100%}
.calc__btn{font-size:14px;font-weight:700;padding:12px 20px}
.calc__url{font-size:12px;color:var(--muted);text-decoration:underline;word-break:break-all}
@media (max-width:640px){.page{padding:16px}.page h1{font-size:22px}.calc__item,.calc__btn{width:100%}}
/* menu: catalog + services dropdowns, sidebar catalog moved to the menu on desktop (msg 11352) */
.menu__dd-list a{display:flex;align-items:center;gap:10px}
.menu__dd-list .ci{width:20px;height:20px;flex:none}
.menu__dd-list .ci-sale{display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:11px;font-weight:700}
.menu__dd-list .badge-new{margin-left:6px}
@media (min-width:992px){
.layout{grid-template-columns:1fr}
.sidebar{display:contents}
.sidebar .catalog{display:none}
.promo{order:3;height:130px}
.promo img{width:45%}
.promo__title{max-width:none}
}
.menu .menu__dd-list a{display:flex;align-items:center;gap:10px}
/* gallery slider with animated butterflies (msg 11358) */
.gal{position:relative;border-radius:var(--r);overflow:hidden;background:#e9ecee;aspect-ratio:1600/746}
.gal__track,.gal__slide{position:absolute;inset:0;margin:0}
.gal__slide{opacity:0;transition:opacity .9s ease;pointer-events:none}
.gal__slide.is-active{opacity:1;pointer-events:auto}
.gal__slide img{width:100%;height:100%;object-fit:cover;display:block}
.gal__arr{position:absolute;top:50%;z-index:3;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.gal__arr:hover{background:var(--y)}
.gal__arr--l{left:12px}.gal__arr--r{right:12px}
.gal__dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:8px}
.gal__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.gal__dot.is-active{background:var(--y)}
.bfly{position:absolute;z-index:2;width:6%;aspect-ratio:1;perspective:300px;transform:rotate(var(--r,0deg));animation:bfly-float 7s ease-in-out infinite}
.bfly__w{position:absolute;top:0;width:50%;height:100%;background:center/contain no-repeat}
.bfly__w--l{left:0;background-image:url(../img/bfly-wing-l.svg);transform-origin:100% 50%;animation:bfly-flap-l 1.4s ease-in-out infinite}
.bfly__w--r{left:50%;background-image:url(../img/bfly-wing-r.svg);transform-origin:0 50%;animation:bfly-flap-r 1.4s ease-in-out infinite}
.bfly__b{position:absolute;left:40%;top:0;width:20%;height:100%;background:url(../img/bfly-body.svg) center/contain no-repeat}
@keyframes bfly-flap-l{0%,100%{transform:rotateY(0)}50%{transform:rotateY(-70deg)}}
@keyframes bfly-flap-r{0%,100%{transform:rotateY(0)}50%{transform:rotateY(70deg)}}
@keyframes bfly-float{0%,100%{translate:0 0}50%{translate:6px -8px}}
@media (max-width:640px){.gal__arr{width:32px;height:32px;margin-top:-16px}.gal__dots{gap:6px;bottom:8px}.gal__dot{width:8px;height:8px}.bfly{width:9%}}
@media (prefers-reduced-motion:reduce){.bfly,.bfly__w{animation:none}}
/* main banner = text panel + butterfly slider; catalog thumbs (msg 11366/11375) */
.menu__dd--cat .menu__dd-list a{padding:6px 16px}
.menu__dd-list .cat-th{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;background:#f2f3f4}
.menu__dd--cat .menu__dd-list .ci-sale{width:44px;height:44px;font-size:18px}
.banner{display:grid;grid-template-columns:350px 1fr;height:420px;border-radius:var(--r);overflow:hidden;background:var(--hero);color:#fff}
.banner__panel{display:flex;flex-direction:column;justify-content:space-between;padding:30px 0 24px}
.banner .hero__text{padding:0 26px;max-width:none}
.banner .hero__title{font-size:28px;line-height:1.18}
.banner .hero__sub{font-size:12px}
.banner .hero__text .btn{font-size:12px;padding:11px 22px}
.banner__adv{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:18px 26px 0;border-top:1px solid rgba(255,255,255,.12);margin:0 0 0;font-size:11px;line-height:1.35}
.banner__adv li{display:flex;align-items:center;gap:9px}
.banner__adv .ic{width:22px;height:22px;flex:none;color:var(--y)}
.banner .gal{border-radius:0;aspect-ratio:auto;height:100%}
@media (max-width:991px){
.banner{grid-template-columns:1fr;height:auto}
.banner__panel{padding:22px 0 18px;gap:18px}
.banner .hero__text{padding:0 18px}
.banner .hero__title{font-size:26px}
.banner .hero__sub{font-size:13px}
.banner__adv{padding:16px 18px 0}
.banner .gal{height:auto;aspect-ratio:1600/746}
}
/* banner: offers column + photo box keeping butterflies in place (msg 11400) */
.banner{grid-template-columns:300px 1fr 230px}
.banner .hero__text{padding:0 22px}
.banner .hero__title{font-size:25px}
.banner__adv{padding:16px 22px 0;font-size:10.5px}
.gal__slide{overflow:hidden}
.gal__pic{position:absolute;top:0;left:50%;height:100%;aspect-ratio:1600/746;transform:translateX(-50%)}
.gal__pic img{width:100%;height:100%;object-fit:cover;display:block}
.banner__offers{display:flex;flex-direction:column;gap:10px;padding:16px 14px 14px;background:#fff;color:var(--dark);border-left:1px solid var(--line)}
.bo__title{font-size:13px;font-weight:800;text-transform:uppercase;line-height:1.25}
.bo__track{position:relative;flex:1;min-height:0}
.bo__item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transition:opacity .6s;pointer-events:none;text-align:center}
.bo__item.is-active{opacity:1;pointer-events:auto}
.bo__item .label{left:0;top:0}
.bo__img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;padding-top:18px}
.bo__img img{max-height:100%;max-width:100%;object-fit:contain}
.bo__name{font-size:12px;font-weight:600}
.bo__price{font-size:16px;font-weight:800}
.bo__dots{display:flex;justify-content:center;gap:6px}
.bo__dot{width:8px;height:8px;border-radius:50%;background:#d5d8db}
.bo__dot.is-active{background:var(--y)}
.bo__all{justify-content:center;font-size:12px;padding:10px 12px}
@media (max-width:1199px){.banner{grid-template-columns:280px 1fr 200px}}
@media (max-width:991px){
.banner{grid-template-columns:1fr}
.banner .gal__pic{left:0;width:100%;transform:none}
.banner__offers{border-left:0;border-top:1px solid var(--line);height:360px}
}
/* banner: texts straight over the photo, fog from the left (msg 11413); quiz modal (msg 11415) */
.banner{grid-template-columns:1fr 230px;grid-template-areas:"pic offers";background:#1b1a18}
.banner__panel{grid-area:pic;position:relative;z-index:4;pointer-events:none;justify-content:flex-start;padding:34px 0 24px;
background:linear-gradient(90deg,rgba(14,13,12,.86) 0,rgba(14,13,12,.72) 190px,rgba(14,13,12,.38) 330px,rgba(14,13,12,0) 470px)}
.banner__panel .hero__text{pointer-events:auto;max-width:360px;padding:0 30px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.banner .hero__title{font-size:30px}
.banner .hero__sub{font-size:12.5px}
.banner .gal{grid-area:pic;container-type:size}
.banner .gal__pic{top:50%;left:50%;height:auto;width:max(100cqw,calc(100cqh * 1600 / 746));transform:translate(-50%,-50%)}
.banner__offers{grid-area:offers}
.banner .gal__arr{top:auto;bottom:12px;margin-top:0;width:34px;height:34px}
.banner .gal__arr--l{left:auto;right:56px}
.banner .gal__dots{left:auto;right:104px;bottom:23px}
@media (max-width:1199px){.banner{grid-template-columns:1fr 200px}}
@media (max-width:991px){
.banner{grid-template-columns:1fr;grid-template-areas:"pic" "offers"}
.banner__panel{padding:22px 0 70px;background:linear-gradient(180deg,rgba(14,13,12,.82) 0,rgba(14,13,12,.6) 55%,rgba(14,13,12,.15) 100%)}
.banner__panel .hero__text{padding:0 18px;max-width:none}
.banner .hero__title{font-size:26px}
.banner .gal{height:100%;aspect-ratio:auto}
.banner .gal__pic{left:50%;transform:translate(-50%,-50%)}
}
.quiz-modal{position:fixed;inset:0;margin:auto;width:min(1100px,96vw);height:min(800px,94vh);max-width:none;max-height:none;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:#fff}
.quiz-modal::backdrop{background:rgba(0,0,0,.6)}
.quiz-modal[open]{display:flex;flex-direction:column}
.quiz-modal__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 20px;background:var(--y);color:#111;font-weight:700;font-size:15px}
.quiz-modal iframe{flex:1;width:100%;min-height:0;border:0;display:block}
.quiz-modal__x{flex:none;width:34px;height:34px;border-radius:50%;background:#111;color:#fff;font-size:26px;line-height:1;display:grid;place-items:center}
/* banner: no offers column, texts on the right aligned to the right edge, fog from the right (msg 11430) */
.banner{grid-template-columns:1fr;grid-template-areas:"pic"}
.banner__panel{align-items:flex-end;text-align:right;
background:linear-gradient(270deg,rgba(14,13,12,.86) 0,rgba(14,13,12,.72) 200px,rgba(14,13,12,.38) 360px,rgba(14,13,12,0) 520px)}
.banner__panel .hero__text{max-width:420px;padding:0 40px}
.banner .gal__arr--l{right:auto;left:12px}
.banner .gal__arr--r{right:auto;left:54px}
.banner .gal__dots{right:auto;left:100px}
.banner{height:auto;aspect-ratio:1600/746}
.banner .gal__arr{color:#111}
@media (max-width:1199px){.banner{grid-template-columns:1fr}}
@media (max-width:991px){
.banner{grid-template-areas:"pic";aspect-ratio:auto}
.banner__panel{align-items:stretch;text-align:left;background:linear-gradient(180deg,rgba(14,13,12,.82) 0,rgba(14,13,12,.6) 55%,rgba(14,13,12,.15) 100%)}
.banner__panel .hero__text{padding:0 18px;max-width:none}
}
/* banner: right column kept as a dark block with the texts, photo to the left fading into it (msg 11438, 11440) */
.banner{grid-template-columns:1fr 320px;grid-template-areas:"pic side";height:420px;aspect-ratio:auto;background:#1b1a18}
.banner__panel{grid-area:side;background:#1b1a18;justify-content:center;padding:24px 0}
.banner__panel .hero__text{padding:0 26px 0 10px;max-width:none}
.banner .hero__title{font-size:27px}
.banner .gal::after{content:"";position:absolute;top:0;right:0;bottom:0;width:240px;z-index:2;pointer-events:none;
background:linear-gradient(270deg,#1b1a18 0,rgba(27,26,24,.75) 30%,rgba(27,26,24,.3) 65%,rgba(27,26,24,0) 100%)}
@media (max-width:1199px){.banner{grid-template-columns:1fr 300px}.banner .hero__title{font-size:25px}}
@media (max-width:991px){
.banner{grid-template-columns:1fr;grid-template-areas:"pic";height:auto}
.banner__panel{grid-area:pic;background:linear-gradient(180deg,rgba(14,13,12,.82) 0,rgba(14,13,12,.6) 55%,rgba(14,13,12,.15) 100%);padding:22px 0 70px;justify-content:flex-start}
.banner__panel .hero__text{padding:0 18px}
.banner .gal::after{display:none}
}
/* header: all yellow; logo centred over the tagline in a white oval (msg 11434) */
.header{background:var(--y);border-bottom:1px solid rgba(0,0,0,.08)}
.header__in{height:100px}
.logo{align-items:center;justify-content:center;background:#fff;border-radius:50%;padding:8px 34px 12px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.logo__tag{text-align:center;letter-spacing:.1em;margin-top:1px}
.search{background:#fff;border-color:rgba(0,0,0,.12)}
.search button,.search button:hover{background:var(--dark);color:#fff}
.header .ic-y{color:var(--dark)}
.header .badge-y{background:var(--dark);color:var(--y)}
@media (max-width:991px){
.header__in{height:auto}
.logo{padding:6px 22px 8px}
}
/* banner: white right column + white fog; texts spread top-to-bottom, button at the bottom (msg 11445) */
@media (min-width:992px){
.banner{background:#fff}
.banner__panel{background:#fff;color:var(--dark);justify-content:stretch;padding:30px 0 30px}
.banner__panel .hero__text{display:flex;flex-direction:column;justify-content:space-between;height:100%;text-shadow:none}
.banner .hero__pre{font-size:14px;color:#6b6f75;opacity:1}
.banner .hero__title{font-size:34px;line-height:1.15;margin:0;color:var(--dark)}
.banner .hero__sub{font-size:14.5px;line-height:1.65;margin:0;color:#3a3d42}
.banner .hero__text .btn{align-self:flex-end;font-size:14px;padding:13px 26px}
.banner .gal::after{width:260px;background:linear-gradient(270deg,#fff 0,rgba(255,255,255,.8) 28%,rgba(255,255,255,.35) 62%,rgba(255,255,255,0) 100%)}
}
@media (min-width:992px) and (max-width:1199px){.banner .hero__title{font-size:29px}.banner .hero__sub{font-size:13px}}
/* black butterfly sitting on the cart badge (msg 11447) */
.hdr-cart .bfly--cart{position:absolute;top:-25px;right:-13px;left:auto;width:22px;z-index:3;--r:12deg;animation:none}
.bfly--cart .bfly__w--l{background-image:url(../img/bfly-wing-l-k.svg)}
.bfly--cart .bfly__w--r{background-image:url(../img/bfly-wing-r-k.svg)}
@media (max-width:991px){.hdr-cart .bfly--cart{top:-22px;right:-11px;width:19px}}
/* catalog: full tree of the old site, groups + subgroups in the same order (msg 11448) */
.menu__dd-list.cat-mega{width:min(1140px,calc(100vw - 16px));padding:14px 10px;
max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.cat-cols{columns:4;column-gap:10px}
.menu__dd.is-open .menu__dd-list.cat-mega{display:block}
.cat-mega .cat-g{break-inside:avoid;padding:4px 0 10px}
.menu .cat-mega a.cat-h{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;font-weight:700;white-space:normal;line-height:1.25}
.menu .cat-mega .cat-th{width:40px;height:40px}
.menu .cat-mega .ci-sale{width:40px;height:40px;font-size:17px}
.cat-mega .cat-ss{display:flex;flex-direction:column;padding:2px 0 0 58px}
.menu .cat-mega a.cat-s{display:block;padding:3px 8px;margin-left:-8px;border-radius:6px;font-weight:500;font-size:12px;line-height:1.3;color:#3a3d42;white-space:normal}
.menu .cat-mega a.cat-s:hover{background:var(--y);color:var(--dark)}
@media (max-width:1199px){.cat-cols{columns:3}}
@media (max-width:991px){
.cat-cols{columns:2}
.menu__dd-list.cat-mega{max-height:calc(100vh - 140px)}
}
@media (max-width:640px){
.cat-cols{columns:1}
.menu__dd-list.cat-mega{padding:8px 6px}
.cat-mega .cat-g{padding:2px 0 6px}
}
.catalog__list .cat-th{width:30px;height:30px;flex:none;border-radius:6px;object-fit:cover;background:#f2f3f4}
.catalog__list .ci-sale{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:13px;font-weight:700;flex:none}
.catalog__list > li > a{font-weight:700}
.catalog__sub{padding:0 0 8px 58px}
.catalog__list .catalog__sub li+li{border-top:0}
.catalog__sub a{min-height:0;padding:5px 12px 5px 0;font-weight:500;font-size:12.5px;color:#3a3d42}
/* black butterfly sits on the cart handle, not on the badge (msg 11454) */
.hdr-cart .bfly--cart{top:-16px;left:-7px;right:auto;--r:-10deg}
@media (max-width:991px){.hdr-cart .bfly--cart{top:-13px;left:-6px;right:auto}}
/* header: black oval near the left edge, centred on the header height; black line from it to the right edge,
header row above the line, menu below it, both stretched (msg 11459) */
@media (min-width:992px){
:root{--ow:300px}
.header{position:relative;z-index:30;border-bottom:0}
.header__in.container,.menu__in.container{max-width:none;margin:0;padding-left:calc(var(--ow) + 34px);padding-right:24px}
.header__in{height:58px;justify-content:space-between;gap:18px}
.header .search{flex:1 1 420px;max-width:520px;min-width:260px;margin-left:0}
.hdr-hours{margin-left:0}
.logo{position:absolute;left:10px;top:7px;width:var(--ow);height:102px;padding:0;background:#111;border-radius:50%;box-shadow:none}
.logo .logo__img img:first-child{height:52px}
.logo__tag{color:var(--y);margin-top:3px;font-size:10.5px}
.menu{position:relative;background:var(--y)}
.menu::before{content:"";position:absolute;left:calc(var(--ow) + 10px);right:0;top:-1px;height:2px;background:#111}
.menu__in{height:58px;justify-content:space-between;gap:16px;font-size:13px}
}
@media (min-width:992px) and (max-width:1199px){:root{--ow:250px}.logo .logo__img img:first-child{height:44px}.logo__tag{font-size:9px}}
@media (max-width:991px){
.logo{background:#111;box-shadow:none}
.logo__tag{color:var(--y)}
}
/* catalog: click-to-open tree, groups first (msg 11464) */
.menu__dd-list.cat-tree{width:340px;max-width:calc(100vw - 16px);padding:6px;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.menu__dd.is-open .menu__dd-list.cat-tree{display:block}
.menu .cat-tree .cat-h{display:flex;align-items:center;gap:10px;width:100%;padding:5px 8px;border-radius:8px;
font:inherit;font-weight:700;font-size:12.5px;text-align:left;white-space:normal;line-height:1.25;color:var(--dark)}
.menu .cat-tree .cat-h:hover,.cat-tree .cat-g.is-open > .cat-h{background:#FFF4B8}
.menu .cat-tree .cat-h span{flex:1}
.menu .cat-tree .cat-th{width:36px;height:36px}
.menu .cat-tree .ci-sale{width:36px;height:36px;font-size:16px}
.cat-chev{flex:none;transition:transform .2s}
.cat-g.is-open > .cat-acc .cat-chev{transform:rotate(180deg)}
.cat-tree .cat-ss{display:none;flex-direction:column;padding:2px 0 8px 54px}
.cat-tree .cat-g.is-open > .cat-ss{display:flex}
.menu .cat-tree a.cat-s{display:block;padding:5px 8px;margin-left:-8px;border-radius:6px;font-weight:500;font-size:12.5px;line-height:1.3;color:#3a3d42;white-space:normal}
.menu .cat-tree a.cat-s:hover{background:var(--y);color:var(--dark)}
.menu .cat-tree a.cat-all,.catalog__sub a.cat-all{font-weight:700;color:var(--dark)}
.catalog__h{display:flex;align-items:center;gap:14px;width:100%;padding:0 12px 0 14px;min-height:38px;font:inherit;font-size:12px;font-weight:700;line-height:1.25;text-align:left;color:var(--dark)}
.catalog__h span{flex:1;padding:5px 0}
.catalog__h:hover,.catalog__list .cat-g.is-open > .catalog__h{background:#FFFBE5}
.catalog__list .catalog__sub{display:none}
.catalog__list .cat-g.is-open > .catalog__sub{display:block}
/* banner fog yellow (msg 11466); the text column yellow too, otherwise a hard yellow/white edge; dark button */
@media (min-width:992px){
.banner,.banner__panel{background:var(--y)}
.banner .hero__pre{color:#4a4224}
.banner .hero__sub{color:#2b2a26}
.banner .hero__text .btn{background:var(--dark);color:var(--y)}
.banner .hero__text .btn:hover{background:#000}
.banner .gal::after{background:linear-gradient(270deg,var(--y) 0,rgba(255,213,0,.75) 26%,rgba(255,213,0,.32) 60%,rgba(255,213,0,0) 100%)}
}
/* 'Получить скидку' button red (msg 11469) */
.banner .hero__text .btn,.banner .hero__text .btn.btn--y{background:var(--red);color:#fff}
.banner .hero__text .btn:hover{background:#c81d22;color:#fff}
/* fog shifted right: narrower band at the photo's right edge (msg 11476) */
@media (min-width:992px){
.banner .gal::after{width:150px;background:linear-gradient(270deg,var(--y) 0,rgba(255,213,0,.7) 30%,rgba(255,213,0,.25) 68%,rgba(255,213,0,0) 100%)}
}
/* logo oval: no fill, thick black outline; thick divider line (msg 11478) */
.logo{background:transparent;border:4px solid #111;box-shadow:none}
.logo__tag{color:var(--dark)}
@media (min-width:992px){
.menu::before{left:calc(var(--ow) + 8px);top:-2px;height:4px}
}
@media (max-width:991px){.logo{border-width:3px}}
/* search: no 'Найти' button, the magnifier submits; bigger and darker (msg 11480) */
.search .search__go{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;margin:0;padding:0;
display:grid;place-items:center;background:none;border-radius:50%;color:var(--dark)}
.search .search__go:hover{background:var(--y);color:#000}
.search .search__go .search__ic{position:static;width:23px;height:23px;color:inherit;stroke-width:2.4}
.search input{padding-left:44px;padding-right:14px}
.header .search{border-color:rgba(0,0,0,.25)}
/* logo oval white inside; oval outline and divider line 8px (msg 11484) */
.logo{background:#fff;border:8px solid #111}
@media (min-width:992px){
.logo{top:3px;height:110px;padding:0 0 8px}
.logo__tag{margin-top:1px}
.menu::before{left:calc(var(--ow) + 6px);top:-4px;height:8px}
}
@media (max-width:991px){.logo{border-width:5px}}
/* banner texts: top line bigger and brighter, lower text brighter and underlined (msg 11486) */
.banner .hero__pre{font-size:17px;font-weight:700;letter-spacing:.06em;opacity:1}
.banner .hero__sub{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (min-width:992px){
.banner .hero__pre{color:var(--dark)}
.banner .hero__sub{color:#111;font-size:15px}
}
@media (max-width:991px){.banner .hero__pre{font-size:14px;color:#fff}.banner .hero__sub{color:#fff}}
/* header within the page container like the blocks below; fog further right; line 16px (msg 11489) */
@media (min-width:992px){
.header__in.container,.menu__in.container{max-width:1200px;margin:0 auto;padding-left:calc(15px + var(--ow) + 24px);padding-right:15px}
.header__in{position:relative}
.logo{left:15px}
.menu::before{display:none}
.menu__in{position:relative}
.menu__in::before{content:"";position:absolute;left:calc(15px + var(--ow) - 4px);right:15px;top:-8px;height:16px;background:#111}
.banner .gal::after{width:80px;background:linear-gradient(270deg,var(--y) 0,rgba(255,213,0,.65) 35%,rgba(255,213,0,0) 100%)}
}
/* quiz modal: 'back to the site' button under the quiz (msg 11492) */
.quiz-modal__foot{flex:none;display:flex;justify-content:center;padding:10px;background:#f4f5f6;border-top:1px solid var(--line)}
.quiz-modal__back{background:var(--dark);color:#fff;font-weight:700;font-size:14px;padding:12px 28px;border-radius:var(--r-btn)}
.quiz-modal__back:hover{background:#000}
/* header: yellow block as wide as the blocks below, no strips at the sides; content fits (msg 11496) */
@media (min-width:992px){
.header,.menu{background:transparent;border:0}
.header__in.container,.menu__in.container{width:calc(100% - 30px);max-width:1170px;margin:0 auto;
padding-left:calc(12px + var(--ow) + 24px);padding-right:14px;background:var(--y)}
.menu__in.container{border-radius:0 0 var(--r) var(--r)}
.logo{left:12px}
.menu__in::before{left:calc(12px + var(--ow) - 4px);right:0}
.header__in{gap:14px}
.header .infos{gap:12px}
.header .search{min-width:0;flex:1 1 200px;max-width:300px;margin-left:0}
}
/* inner pages migrated from the old site: about, contacts, salons, services, promo, reviews, blog, gallery (msg 11503) */
.page h2{font-size:21px;font-weight:800;line-height:1.25;margin:28px 0 12px;scroll-margin-top:90px}
.page h3{font-size:17px;font-weight:700;line-height:1.3;margin:20px 0 8px}
.page section{scroll-margin-top:90px}
.page ul.list,.art ul{list-style:disc;padding-left:22px;margin:0 0 14px;max-width:820px}
.page ol.list,.art ol{list-style:decimal;padding-left:22px;margin:0 0 14px;max-width:820px}
.page li{font-size:15px;line-height:1.55;margin-bottom:6px}
.page p a,.page li a,.page td a,.page .lnk{text-decoration:underline;text-decoration-color:var(--y-d);text-decoration-thickness:2px;text-underline-offset:3px}
.page p a:hover,.page li a:hover,.page td a:hover,.page .lnk:hover{text-decoration-color:var(--dark)}
.page__meta{font-size:12px;color:var(--muted);margin:-8px 0 16px}
.page figure{margin:14px 0 18px;max-width:820px}
.page figure img{border-radius:8px;height:auto}
.page figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.page__cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:#000}
.btn--line{border:1px solid #cfd3d7;background:#fff}
.btn--line:hover{border-color:var(--dark)}
.note{background:#FFF8D6;border-left:4px solid var(--y);border-radius:8px;padding:12px 16px;margin:16px 0;max-width:820px}
.note p{font-size:14px !important;margin-bottom:6px !important}
.note p:last-child{margin-bottom:0 !important}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px}
.toc a{border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600}
.toc a:hover{background:var(--y);border-color:var(--y)}
.tbl{overflow-x:auto;margin:14px 0 18px;max-width:100%}
.tbl table{border-collapse:collapse;font-size:14px;line-height:1.45;width:100%;max-width:900px;min-width:520px}
.tbl td,.tbl th{border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left}
.tbl th{background:#F4F5F2;font-weight:700}
.tbl tr.sec td{background:var(--y);font-weight:700}
.tbl td.num{white-space:nowrap;font-weight:600}
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:16px 0 22px}
.icard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column;min-width:0}
.icard__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#eee}
.icard__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.page .icard__body h3{margin:0;font-size:16px}
.page .icard__body p{font-size:14px;line-height:1.5;margin:0}
.icard__row{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.45}
.icard__row .ic{margin-top:2px}
.icard__row a{text-decoration:underline;text-decoration-color:var(--y-d);text-decoration-thickness:2px;text-underline-offset:3px}
.icard__tag{align-self:flex-start;background:var(--y);font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;text-transform:uppercase;letter-spacing:.04em}
.icard__tag--grey{background:#ECEDEF}
.icard__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.icard__links .btn{padding:9px 14px;font-size:12px}
.icard__ph{display:grid;place-items:center;aspect-ratio:4/3;background:#F4F5F2;color:#b5b9be}
.icard__ph .ic{width:64px;height:64px}
.salon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin:8px 0 18px}
.salon__info{display:flex;flex-direction:column;gap:10px}
.salon__photos{display:grid;gap:10px}
.salon__photos img{border-radius:8px;width:100%;height:auto}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:16px 0}
.gallery a{display:block;border-radius:8px;overflow:hidden;background:#eee}
.gallery img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .2s}
.gallery a:hover img{transform:scale(1.04)}
.review{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;margin-bottom:14px;max-width:900px}
.review__ph{width:88px;height:88px;border-radius:50%;object-fit:cover}
.review__name{font-weight:700;font-size:16px}
.review__date{font-size:12px;color:var(--muted);margin-left:8px;font-weight:500}
.page .review p{margin:8px 0 0}
.review__answer{margin-top:12px;background:var(--bg);border-radius:8px;padding:10px 14px}
.page .review__answer p{font-size:14px;margin:4px 0 0}
.req{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 16px;font-size:15px;line-height:1.5;max-width:820px;margin:10px 0 16px}
.req dt{color:var(--muted)}
.client{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;max-width:900px}
.page .client h2{margin:0 0 4px;font-size:18px}
.client__ph{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:8px 0 12px}
.client__ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.client__lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:8px}
blockquote.quote{border-left:4px solid var(--y);padding:4px 0 4px 14px;margin:12px 0;max-width:820px}
.page blockquote.quote p{font-style:italic;margin-bottom:6px}
.art img{height:auto;border-radius:6px}
.art figure img{max-height:560px;width:auto}
.post-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.salon--sm{grid-template-columns:260px minmax(0,1fr);padding-top:18px;border-top:1px solid var(--line)}
.salon--sm .salon__photos{max-width:320px}
@media (max-width:991px){.salon{grid-template-columns:1fr}}
@media (max-width:640px){
.page h2{font-size:18px}
.icards{grid-template-columns:1fr}
.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.review{grid-template-columns:1fr}
.review__ph{width:64px;height:64px}
.req{grid-template-columns:1fr;gap:2px}
.req dd{margin-bottom:8px}
.page__cta .btn{width:100%;justify-content:center}
}
/* top menu items bigger, bold and underlined on desktop (msg 11514) */
@media (min-width:992px){
.menu__in>a,.menu__in>.menu__dd>.menu__dd-btn{font-size:17px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
}
@media (min-width:992px) and (max-width:1279px){
.menu__in>a,.menu__in>.menu__dd>.menu__dd-btn{font-size:16px}
}
/* banner: the whole photo visible, photo block in the photo's proportions, thin fog at the edge (msg 11517) */
@media (min-width:992px){
.banner{height:auto}
.banner .gal{height:auto;aspect-ratio:1600/746}
.banner{grid-template-columns:1fr 350px}
.banner .hero__title{font-size:30px}
.banner .hero__sub{font-size:14px}
.banner__panel .hero__text{padding:0 22px 0 14px}
.banner .gal::after{width:36px;background:linear-gradient(270deg,var(--y) 0,rgba(255,213,0,.55) 45%,rgba(255,213,0,0) 100%)}
}
@media (min-width:992px) and (max-width:1199px){
.banner{grid-template-columns:1fr 320px}
.banner .hero__title{font-size:26px}
.banner .hero__sub{font-size:13px}
}
/* header: Каталог left of the oval with a line to it, oval shifted right, divider line ends at the cart,
cart at the right edge centred like Каталог (msg 11755) */
@media (min-width:992px){
:root{--cw:126px;--kw:46px}
.header__in.container,.menu__in.container{padding-left:calc(12px + var(--cw) + var(--ow) + 22px);padding-right:calc(14px + var(--kw) + 14px)}
.logo{left:calc(12px + var(--cw))}
.menu__in::before{left:calc(12px + var(--cw) + var(--ow) - 4px);right:calc(14px + var(--kw) - 2px)}
.menu__in>.menu__dd--cat{position:absolute;left:14px;top:0;transform:translateY(-50%);width:calc(var(--cw) + 2px);z-index:40}
.menu__in>.menu__dd--cat::after{content:"";flex:1;height:16px;margin-left:8px;background:#111}
.menu__in>.menu__dd--cat>.menu__dd-btn{flex:none;padding:6px 0}
.header .hdr-cart{position:absolute;right:14px;top:100%;transform:translateY(-50%);width:var(--kw);height:var(--kw);
align-items:center;justify-content:center;z-index:31}
.header .hdr-cart .ic-lg{width:34px;height:34px}
.header .hdr-cart .bfly--cart{top:-10px;left:-1px}
.header .hdr-hours{display:none}
.header .search{flex:1 1 240px;max-width:340px}
}
@media (min-width:992px) and (max-width:1279px){
:root{--cw:112px}
.header .search{flex-basis:160px}
}
@media (min-width:992px) and (max-width:1199px){
:root{--cw:106px}
.header__in.container,.menu__in.container{padding-left:calc(12px + var(--cw) + var(--ow) + 14px)}
.menu__in{gap:10px}
}
/* catalog list opens at the left edge under «Каталог»: no transform on the tab (msg 11773) */
@media (min-width:992px){
.menu__in>.menu__dd--cat{transform:none;top:-18px;height:36px}
}
/* header logo without the oval: bigger crisp logo black on yellow, white butterfly, no tagline (msg 11784) */
.logo{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.logo__tag{display:none}
@media (min-width:992px){
:root{--ow:250px}
.logo{top:2px;height:112px;justify-content:center}
.logo .logo__img img:first-child{width:240px;height:auto}
}
@media (min-width:992px) and (max-width:1199px){
:root{--ow:220px}
.logo .logo__img img:first-child{width:210px}
}
@media (max-width:991px){.logo .logo__img img:first-child{height:56px}}
@media (max-width:640px){.logo .logo__img img:first-child{height:50px}}
/* no line between «Каталог» and the logo (msg 11797) */
@media (min-width:992px){
.menu__in>.menu__dd--cat::after{display:none}
}
/* phones: «Каталог» is not repeated in the menu row, the burger opens it (msg 11812) */
@media (max-width:991px){
.menu__in>.menu__dd--cat{display:none}
}
/* header «Связаться с нами»: a click drops circles Max / Telegram / WhatsApp / call (msgs 11815, 11816) */
.hdr-contact{position:relative;flex:none;display:flex}
.hdr-contact__btn{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;background:var(--dark);color:var(--y);
font-size:12.5px;font-weight:700;white-space:nowrap}
.hdr-contact__btn .ic{width:20px;height:20px}
.hdr-contact__btn:hover,.hdr-contact.is-open .hdr-contact__btn{background:#000}
.hdr-contact__list{position:fixed;z-index:60;display:flex;flex-direction:column;gap:10px;visibility:hidden;pointer-events:none}
.hdr-contact.is-open .hdr-contact__list{visibility:visible;pointer-events:auto}
.hc{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-14px) scale(.6);transition:opacity .18s,transform .22s cubic-bezier(.3,1.5,.6,1)}
.hdr-contact.is-open .hc{opacity:1;transform:none}
.hdr-contact.is-open .hc:nth-child(2){transition-delay:.05s}
.hdr-contact.is-open .hc:nth-child(3){transition-delay:.1s}
.hdr-contact.is-open .hc:nth-child(4){transition-delay:.15s}
.hc i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.hc i svg{width:24px;height:24px}
.hc span{background:#fff;color:var(--dark);font-size:13px;font-weight:700;padding:8px 12px;border-radius:16px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.hc:hover span{background:var(--y)}
.hc--max i{background:linear-gradient(135deg,#1f8bff,#8a3dff)}
.hc--tg i{background:#29a9eb}
.hc--wa i{background:#25d366}
.hc--tel i{background:var(--dark);color:var(--y)}
.hdr-contact+.hdr-phone{margin-left:0}
@media (min-width:992px){.hdr-contact__btn{width:36px;padding:0;justify-content:center}.hdr-contact__btn span{display:none}}
@media (max-width:991px){
.hdr-contact{margin-left:auto}
.hdr-contact__btn{width:36px;padding:0;justify-content:center}
.hdr-contact__btn span{display:none}
}
/* phones: slider texts in a strip above the photo, «Получить скидку» on the photo bottom right (msg 11820) */
@media (max-width:991px){
.banner{position:relative;grid-template-columns:1fr;grid-template-areas:"side" "pic";height:auto;aspect-ratio:auto;background:var(--y)}
.banner__panel{grid-area:side;position:static;background:var(--y);color:var(--dark);padding:16px 0 14px;justify-content:flex-start}
.banner__panel .hero__text{position:static;padding:0 18px;text-shadow:none}
.banner .hero__pre{color:#4a4224;font-size:13px}
.banner .hero__title{color:var(--dark);font-size:24px;margin:4px 0 6px}
.banner .hero__sub{color:#111;font-size:13.5px}
.banner .gal{grid-area:pic;height:auto;aspect-ratio:1600/746}
.banner .hero__text .btn{position:absolute;right:10px;bottom:10px;z-index:5;margin:0;font-size:12.5px;padding:10px 16px;box-shadow:0 3px 10px rgba(0,0,0,.3)}
}
/* search as a white circle next to «Написать нам»; a click opens the field (msgs 11835, 11836) */
.hdr-sbtn{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--dark);display:grid;place-items:center;
box-shadow:0 1px 4px rgba(0,0,0,.18)}
.hdr-sbtn .ic{width:20px;height:20px}
.hdr-sbtn:hover,.header.is-search .hdr-sbtn{background:#f1f1f1}
.hdr-sbtn+.hdr-contact{margin-left:0}
.header .header__in>.search{display:none}
.header.is-search .header__in>.search{display:flex;position:fixed;z-index:61;margin:0;flex:none;min-width:0;max-width:none;height:46px;
background:#fff;border:1px solid rgba(0,0,0,.2);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.header.is-search .header__in>.search input{font-size:15px}
@media (min-width:992px){
.header .header__in{justify-content:flex-start}
.hdr-sbtn{margin-left:auto}
}
@media (max-width:991px){
.header .header__in{gap:8px}
.hdr-sbtn{margin-left:auto}
}
@media (max-width:400px){.header .header__in{gap:6px} .hdr-sbtn,.hdr-contact__btn{width:34px;height:34px}}
@media (max-width:380px){.header .header__in{gap:4px} .logo .logo__img img:first-child{height:44px} .header .hdr-phone{font-size:12px}}
/* header logo readable even when a browser darkens the site itself (msg 11848): the image carries its own yellow plate */
.logo .logo__img img:first-child{border-radius:12px}
/* slider and cart butterflies = the logo butterfly: logo body strokes + logo wings flapping like in the logo (msg 11876) */
.bfly{aspect-ratio:250/230;perspective:none}
.bfly .bfly__w--l{display:none}
.bfly .bfly__b{left:0;top:0;width:100%;height:100%;background:url(../img/bfly-logo-body.png?v=1) center/100% 100% no-repeat}
.bfly .bfly__w--r,.bfly--cart .bfly__w--r{left:30.4%;top:0;width:69.6%;height:88.7%;
background:url(../img/logo-wings-white.png?v=3) center/100% 100% no-repeat;transform-origin:0 55%;animation:ug-flap 2.6s ease-in-out infinite}
.gal .bfly{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hdr-cart .bfly--cart{width:30px;top:-20px;left:-10px}
@media (max-width:991px){.hdr-cart .bfly--cart{width:26px;top:-17px;left:-9px}}
@media (prefers-reduced-motion:reduce){.bfly .bfly__w--r{animation:none}}
/* slider butterflies sit on a handle or an object: left/top = perch point, the butterfly stands on it, no drifting (msg 11895) */
.gal .bfly{transform:translate(-45%,-96%) rotate(var(--r,0deg));animation:none}
/* phones: yellow is painted by a raster (img/px-y.png). Samsung Internet forced dark recolours plain colours
(yellow went brown) and ignores filter tricks (went blue, msg 11948), but leaves images alone.
Compact slider text strip and a small «Получить скидку» pill (msg 11921) */
@media (max-width:991px){
.header,.menu,.catalog__head,.btn--y,.tab.is-active,.gal__dot.is-active,.icard__tag:not(.icard__tag--grey),
.tbl tr.sec td,.quiz-modal__bar{background:#FFD500 url(../img/px-y.png) 0 0/100% 100%}
.btn--y:hover{background:#FFD500 url(../img/px-y.png) 0 0/100% 100%}
.banner__panel{background:#FFD500 url(../img/px-y.png) 0 0/100% 100%;padding:9px 0 8px}
.banner__panel .hero__text{padding:0 14px}
.banner .hero__pre,.banner .hero__title{display:inline;margin:0;font-size:13.5px;line-height:1.3;font-weight:800;
letter-spacing:.02em;text-transform:uppercase;color:#1E2024}
.banner .hero__sub{display:none}
.banner .hero__title br{content:""}
.banner .hero__title br::after{content:" "}
.banner .hero__text .btn,.banner .hero__text .btn.btn--y{right:8px;bottom:8px;min-height:32px;padding:0 11px;
gap:4px;font-size:11.5px;font-weight:700;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.banner .hero__text .btn .ic{width:11px;height:11px}
}
/* phones: yellow comes from a real ![]()
(msg 11965), Samsung Internet forced dark keeps pictures */
.ybg{display:none}
@media (max-width:991px){
.header{position:relative;z-index:31}
.menu{position:relative;z-index:30}
.banner{position:relative;z-index:0}
.ybg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;
border-radius:0;max-width:none}
.header,.menu,.banner__panel{background:transparent}
/* msg 11985: one picture under the header and the menu row, so both are exactly the same yellow */
.header>.ybg{display:none}
.header+.menu>.ybg{top:auto;bottom:0;height:calc(100% + var(--hh,71px))}
}
/* phone menu row: О компании, Акции, Услуги, Блог, «Ещё»; «Отзывы» lives in «Ещё» (msg 11933) */
.menu__dd--more{display:none}
@media (max-width:991px){
.menu__in{overflow:visible;justify-content:space-between;gap:6px}
.menu__in>.menu__a--more{display:none}
.menu__dd--more{display:flex}
.menu__dd--more .menu__dd-list{right:8px;left:auto}
}
@media (max-width:480px){
.menu__in{padding:0 12px}
.menu__in>a,.menu__in>.menu__dd>.menu__dd-btn{font-size:14px}
}
/* catalog pages (msg 11503 catalog): category grid, subcategory tiles, pagination, product page */
.kat h1{margin-bottom:6px}
.kat-count{font-size:13px !important;color:var(--muted);margin:0 0 14px !important}
.kat-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 0 18px}
.kat-sub{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px 8px 8px;background:#fff;transition:box-shadow .15s,border-color .15s;min-width:0}
.kat-sub:hover{border-color:var(--y-d);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.kat-sub__img{flex:none;width:48px;height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#b5b9be}
.kat-sub__img img{max-width:48px;max-height:64px;width:auto;height:auto;object-fit:contain}
.kat-sub__t{font-weight:700;font-size:13.5px;line-height:1.25;min-width:0}
.kat-sub__t small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:3px}
.kat .products.kat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.kat .kat-grid .card{flex-direction:column;gap:6px;padding:12px 12px 12px;min-height:0}
.kat .kat-grid .card__img{flex:none;height:230px;align-items:center;padding-top:0}
.kat .kat-grid .card__img img{max-height:230px;max-width:100%}
.kat .kat-grid .card h3{font-size:13px;line-height:1.3;margin-top:2px}
.kat .kat-grid .card h3 a:hover{text-decoration:underline}
.kat .kat-grid .card__desc{font-size:11px;margin:2px 0 0}
.kat .kat-grid .price{font-size:16px;margin:6px 0 8px}
.kat .kat-grid .card__act .btn{width:100%;justify-content:center;padding:9px 12px;font-size:13px}
.kat-noimg{display:grid;place-items:center;width:100%;height:100%;color:#c9ccd0;background:#F4F5F2;border-radius:6px}
.kat-noimg .ic{width:56px;height:56px}
.price__old{font-size:12px;font-weight:500;color:var(--muted);margin-left:6px}
.kat-pg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 20px}
.kat-pg a,.kat-pg span{min-width:38px;height:38px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-btn);font-weight:600;font-size:14px;background:#fff}
.kat-pg a:hover{background:var(--y);border-color:var(--y)}
.kat-pg .is-cur{background:var(--dark);border-color:var(--dark);color:#fff}
.kat-text{border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
.page .kat-text p{font-size:14px;color:#4a4e54}
.catalog__sub a.is-cur,.catalog__h.is-cur{background:#FFF4B8}
.catalog__sub a.is-cur{font-weight:700;color:var(--dark)}
/* product page */
.pview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start;margin:6px 0 10px}
.pgal{min-width:0}
.pgal__main{display:flex;align-items:center;justify-content:center;height:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:zoom-in}
.pgal__main img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.pgal__none{flex-direction:column;gap:8px;color:#b5b9be;cursor:default;background:#F4F5F2}
.pgal__none .ic{width:72px;height:72px}
.pgal__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pgal__th{width:70px;height:84px;border:2px solid var(--line);border-radius:8px;display:grid;place-items:center;padding:3px;background:#fff}
.pgal__th img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pgal__th.is-active,.pgal__th:hover{border-color:var(--y-d)}
.pinfo{min-width:0}
.pinfo h1{font-size:26px;margin-bottom:8px}
.page .pinfo__code{font-size:13px;color:var(--muted);margin-bottom:6px}
.pinfo .stock{font-size:13px;margin-bottom:6px}
.pinfo__price{font-size:28px !important;font-weight:800;margin:10px 0 4px !important;line-height:1.2 !important}
.page .pinfo__price2{font-size:16px;font-weight:700;margin:2px 0 6px}
.page .pinfo__note{font-size:13px;color:var(--muted);margin:4px 0 8px}
.pinfo__btns{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 12px}
.pinfo__btns .btn{padding:13px 24px;font-size:15px}
.pinfo__btns .btn .ic{width:18px;height:18px}
.page .pinfo__deliv{display:flex;align-items:center;gap:8px;font-size:14px;color:#3a3d42}
.pinfo__deliv .ic{width:22px;height:22px;flex:none}
.tbl table.ptbl{min-width:0;max-width:820px}
.ptbl th{width:38%;background:#F7F8F6;font-weight:600}
.pdesc{max-width:820px}
.pdesc .list{list-style:disc;padding-left:22px;margin:0 0 14px}
.psim{margin-top:26px}
@media (max-width:1199px){
.kat .products.kat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgal__main{height:440px}
}
@media (max-width:767px){
.pview{grid-template-columns:1fr;gap:16px}
.pgal__main{height:380px}
}
@media (max-width:640px){
.kat .products.kat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kat .kat-grid .card{padding:8px}
.kat .kat-grid .card__img{height:170px}
.kat .kat-grid .card__img img{max-height:170px}
.kat .kat-grid .card h3{font-size:13px}
.kat .kat-grid .price{font-size:15px}
.kat .kat-grid .card__act .btn{padding:8px 6px;font-size:12.5px}
.kat-subs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kat-sub{padding:6px 8px 6px 6px;gap:8px}
.kat-sub__img{width:30px;height:44px}
.kat-sub__img img{max-width:30px;max-height:44px}
.kat-sub__t{font-size:12.5px}
.pinfo h1{font-size:21px}
.pinfo__price{font-size:24px !important}
.pinfo__btns .btn{width:100%;justify-content:center}
.pgal__main{height:320px}
.ptbl th{width:44%}
}
/* phone quick nav: fixed «Каталог» + «На главную» after the header scrolls out; home links in the drawer (msg 11957) */
.qnav{display:none}
@media (max-width:991px){
.qnav{position:fixed;z-index:45;top:calc(8px + env(safe-area-inset-top,0px));right:8px;display:flex;gap:6px;
opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .2s,transform .2s}
body.qnav-on .qnav{opacity:1;transform:none;pointer-events:auto}
body.catalog-open .qnav{opacity:0;transform:translateY(-14px);pointer-events:none}
.qnav__b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:17px;
font:700 12.5px/1 Montserrat,Arial,sans-serif;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.28);cursor:pointer}
.qnav__b svg{width:16px;height:16px;flex:none}
.qnav__cat{background:#FFD500 url(../img/px-y.png) 0 0/100% 100%;color:#1E2024}
.qnav__home{background:#1E2024;color:#FFD500}
/* drawer head: «Каталог» + «На главную» + ×, stays on top while the list scrolls */
.catalog__head{position:sticky;top:0;z-index:2;gap:10px;padding:0 12px 0 16px}
.catalog__head>.ic,.catalog__head .cat-hd-more{display:none}
.catalog__home{display:inline-flex;align-items:center;gap:5px;margin-left:auto;height:30px;padding:0 11px;border-radius:15px;
background:#1E2024;color:#FFD500;font-size:12px;font-weight:700;white-space:nowrap}
.catalog__home svg{width:14px;height:14px}
.catalog__head .catalog__close{margin-left:4px}
/* «На главную» at the end of every section */
.catalog__sub a.cat-home{gap:6px;margin-top:4px;color:var(--muted,#6b7077);font-weight:600}
.catalog__sub a.cat-home svg{width:13px;height:13px;flex:none}
}
/* desktop: on catalog and product pages the catalog is pinned on the left, contents on the right (msg 11957) */
.catalog__home{display:none}
.catalog__sub li.cat-home-li{display:none}
@media (max-width:991px){.catalog__home{display:inline-flex}.catalog__sub li.cat-home-li{display:list-item;list-style:none}}
@media (min-width:992px){
body:has(.kat,.pview) .layout{grid-template-columns:250px minmax(0,1fr);align-items:start}
body:has(.kat,.pview) .sidebar{display:flex;position:sticky;top:10px;max-height:calc(100vh - 20px);min-width:0}
body:has(.kat,.pview) .sidebar .catalog{display:flex;flex-direction:column;width:100%;min-height:0}
body:has(.kat,.pview) .sidebar .catalog__head{flex:none}
body:has(.kat,.pview) .sidebar .catalog__list{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body:has(.kat,.pview) .sidebar .catalog__sub a{padding-right:10px}
body:has(.kat,.pview) .kat .products.kat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body:has(.kat,.pview) .pview{gap:22px}
body:has(.kat,.pview) .pgal__main{height:440px}
}
/* oplata page (msg 12010) */
.pay-logos{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 18px}
.pay-logo{display:flex;align-items:center;justify-content:center;width:110px;height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pay-logo img{max-width:100%;max-height:30px;width:auto;height:auto}
a.pay-logo:hover{border-color:var(--dark)}
.pay-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.pay-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--y);font-weight:800;font-size:18px;line-height:1}
.pay-ic .ic{width:22px;height:22px}
.pay-ic--sbp{font-size:13px;letter-spacing:.02em}
.pay-banks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 18px}
.pay-bank{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px;background:#fff;transition:border-color .15s,box-shadow .15s;min-width:0}
a.pay-bank:hover{border-color:var(--dark);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.pay-bank__logo{display:flex;align-items:center;height:52px;margin-bottom:6px}
.pay-bank__logo img{max-height:44px;max-width:100%;width:auto;height:auto}
.pay-bank__t{font-weight:700;font-size:15px}
.pay-bank__s{font-size:13px;color:var(--muted);line-height:1.4}
.pay-bank__go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;text-decoration:underline;text-decoration-color:var(--y-d);text-decoration-thickness:2px;text-underline-offset:3px}
.pay-bank--more{background:var(--bg);border-style:dashed}
.pay-badge{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:20px;background:#ECEDEF;font-weight:800;font-size:16px}
.pay-badge--halva{background:#FF4F12;color:#fff;font-size:19px;letter-spacing:.01em}
.pay-steps{counter-reset:pay;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0 20px}
.page .pay-steps li{counter-increment:pay;position:relative;margin:0;padding:52px 14px 14px;border-radius:var(--r);background:var(--bg);font-size:14px;line-height:1.45;list-style:none}
.pay-steps li::before{content:counter(pay);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--y);display:grid;place-items:center;font-weight:800;font-size:15px}
.pay-steps b{display:block;font-size:15px;margin-bottom:4px}
/* installation page checklist (msg 12014) */
.inst-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.inst-check__i{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 12px 46px;position:relative;background:#fff}
.inst-check__i::before{content:"";position:absolute;left:14px;top:13px;width:20px;height:20px;border-radius:50%;background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231E2024' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E") center no-repeat;background-size:14px 14px}
.inst-check__i b{display:block;font-size:15px;margin-bottom:3px}
.page .inst-check__i p{font-size:14px;line-height:1.5;margin:0}
.inst-photo figure{margin:0}
@media (max-width:991px){.salon--sm .inst-photo{max-width:220px}}
@media (max-width:991px){.pay-cards,.pay-banks,.pay-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
.pay-logos{gap:8px}
.pay-logo{width:calc(50% - 4px)}
.pay-cards,.pay-banks,.pay-steps,.inst-check{grid-template-columns:1fr}
.pay-bank__logo{height:44px}
}
/* Header route to Yandex Navigator (msg 12129) */
.navi-ic{display:block;flex:none}
.info--route{color:inherit;text-decoration:none}
.info--route .navi-ic{width:34px;height:34px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.info--route b{text-decoration:underline;text-decoration-color:rgba(30,32,36,.35);text-underline-offset:2px}
.info--route:hover b{text-decoration-color:currentColor}
.hdr-navi{display:none;flex:none;width:36px;height:36px;border-radius:50%}
.hdr-navi .navi-ic{width:36px;height:36px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
@media (max-width:1199px) and (min-width:641px){.hdr-navi{display:block;margin-left:auto}.hdr-navi+.hdr-sbtn{margin-left:0}}
.hc--navi i{background:#fff}
.hc--navi i .navi-ic{width:46px;height:46px}
/* Samsung forced dark (msg 12315-12319): pictures keep colours. Phones: black burger and black Navigator button as
![]()
, yellow buttons and the active tab get a real yellow ![]()
from main.js */
.burger-img,.navi-img{display:none}
@media (max-width:991px){
.burger>svg{display:none}
.burger-img{display:block;width:26px;height:26px}
.hdr-navi{display:block;margin-left:auto}
.hdr-navi .navi-ic{display:none}
.hdr-navi .navi-img{display:block;width:36px;height:36px}
.hdr-navi+.hdr-sbtn{margin-left:0}
.btn--y,.tab{position:relative;z-index:0;overflow:hidden}
.tab:not(.is-active)>.ybg{display:none}
}
@media (max-width:400px){.hdr-navi,.hdr-navi .navi-img{width:34px;height:34px}}
/* phones: room for the Navigator button in one header row, the number goes into two lines */
@media (max-width:480px){
.header .header__in{gap:4px}
.header .hdr-phone{white-space:normal;width:66px;font-size:12px;line-height:1.15;text-align:right}
.tab{flex:none}
}
@media (max-width:380px){
.header .header__in{padding-left:10px;padding-right:10px}
.hdr-navi,.hdr-navi .navi-img,.hdr-sbtn,.hdr-contact__btn{width:32px;height:32px}
}
/* Samsung forced dark, test 5 variant 3 (msg 12327): text on the yellow ![]()
is painted by a dark raster through
background-clip:text, plain dark text turns light */
@media (max-width:991px){
.header .hdr-phone,.menu__in>a,.menu__in>.menu__dd>.menu__dd-btn,.banner .hero__pre,.banner .hero__title,
.btn--y .ytxt,.tab.is-active .ytxt{color:transparent;-webkit-text-fill-color:transparent;
background:url(../img/px-k.png) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text}
.menu__in>.menu__dd>.menu__dd-btn svg,.btn--y .ic{color:#1E2024}
}
/* desktop catalog door (msg 12323): «Каталог» on the menu line, a black door above it swings open and shut,
«Open» / «Close» over the door, a click opens and folds the catalog */
.cat-door{display:none}
@media (min-width:992px){
.menu__in>.menu__dd--cat{top:var(--cat-top,11px)}
.cat-door{display:flex;flex-direction:column;align-items:center;gap:3px;position:absolute;left:50%;bottom:100%;
transform:translateX(-50%);margin-bottom:2px;padding:0;background:none;border:0;cursor:pointer;color:#111}
.cat-door__lbl::before{content:"Open";font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.menu__dd--cat.is-open .cat-door__lbl::before{content:"Close"}
.cat-door__fr{position:relative;display:block;width:26px;height:36px;border:3px solid #111;border-bottom-width:4px;
border-radius:3px 3px 0 0;background:#fff8cc;perspective:120px}
.cat-door__leaf{position:absolute;inset:0;background:#111;transform-origin:0 50%;animation:cat-door 3.2s ease-in-out infinite}
.cat-door__leaf::after{content:"";position:absolute;right:4px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#FFD500}
.cat-door:hover .cat-door__leaf{animation-duration:1.6s}
.menu__dd--cat.is-open .cat-door__leaf{animation:none;transform:rotateY(-72deg)}
@keyframes cat-door{0%,30%{transform:rotateY(0)}55%,70%{transform:rotateY(-68deg)}100%{transform:rotateY(0)}}
}
@media (min-width:992px) and (prefers-reduced-motion:reduce){.cat-door__leaf{animation:none}}
/* desktop door centred over the word «Каталог» (msg 12345), left set by main.js */
@media (min-width:992px){.cat-door{left:var(--door-x,50%)}}
/* phones (msg 12347): no burger, menu row Каталог, О компании, Услуги, Блог, Ещё; Акции lives in «Ещё» */
.menu__cat-m{display:none}
@media (max-width:991px){
.header .burger{display:none}
.menu__in>a[href="akcii.html"]{display:none}
.menu__cat-m{display:block;flex:none;padding:0;background:none;border:0;font:inherit;font-size:14px;font-weight:700;
text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;color:transparent;
-webkit-text-fill-color:transparent;background:url(../img/px-k.png) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text}
.catalog__head{overflow:hidden}
.catalog__head .ytxt{color:transparent;-webkit-text-fill-color:transparent;background:url(../img/px-k.png) 0 0/100% 100%;
-webkit-background-clip:text;background-clip:text}
}
/* phones (msg 12363): logo a bit bigger, centred in the free space between the left edge and the Navigator button */
@media (max-width:640px){
.header .logo{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center}
.header .hdr-navi{margin-left:0}
.logo .logo__img img:first-child{height:60px}
}
@media (max-width:380px){.logo .logo__img img:first-child{height:54px}}
/* phones (msg 12367): catalog drawer frozen against Samsung forced dark - white ![]()
layer, text clipped from rasters */
.catalog>.wbg{display:none}
@media (max-width:991px){
.catalog>.wbg{display:block;position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.catalog__list .catalog__h>span,.catalog__sub a{color:transparent;-webkit-text-fill-color:transparent;
background:url(../img/px-k.png) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text}
.catalog__list .badge-new{-webkit-text-fill-color:#fff;-webkit-background-clip:border-box;background-clip:border-box}
.catalog__list .catalog__h,.catalog__list .catalog__h:hover,.catalog__list .cat-g.is-open>.catalog__h,.catalog__sub a{background-color:transparent}
.catalog__sub a.is-cur,.catalog__h.is-cur{background:url(../img/px-ly.png) 0 0/100% 100%}
.catalog__sub a.is-cur{background:url(../img/px-k.png) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text}
.catalog__list li+li{border-top:0;background:url(../img/px-line.png) 0 0/100% 1px no-repeat}
.catalog__list .catalog__sub li+li{background:none}
.catalog__list .cat-chev{display:none}
.catalog__list .cat-acc::after{content:"";flex:none;width:14px;height:14px;margin-left:auto;background:url(../img/chev-k.png) 0 0/100% 100%;transition:transform .2s}
.catalog__list .cat-g.is-open>.cat-acc::after{transform:rotate(180deg)}
.catalog__sub a.cat-home svg{color:#1E2024}
.catalog__home .htxt{color:transparent;-webkit-text-fill-color:transparent;background:url(../img/px-y.png) 0 0/100% 100%;
-webkit-background-clip:text;background-clip:text}
.catalog__home{position:relative;z-index:0;overflow:hidden}
.catalog__home>.kbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
/* «Получить скидку» stays red (msg 12369) */
.banner .hero__text .btn>.ybg{display:none}
.banner .hero__text .btn>.rbg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.banner .hero__text .btn .ytxt{color:#fff;-webkit-text-fill-color:#fff;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.banner .hero__text .btn .ic{color:#fff}
}
/* footer: seller requisites and offers (msg 12378) */
.fcol--brand .freq{margin-top:8px;font-size:12px;line-height:1.45;opacity:.85}
.fcol--brand .freq a{text-decoration:underline}
/* payment: two partner banks + «Халва» info, manager button (msg 12426) */
.pay-banks--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pay-badge--otp{background:#52AE30;color:#fff}
.pay-badge--ceb{background:#B5121B;color:#fff;font-size:15px}
.pay-bank__btn{margin-top:auto;align-self:flex-start;height:40px;padding:0 16px;font-size:13px}
.pay-bank .pay-bank__s{margin-bottom:10px}
@media (max-width:991px){.pay-banks--3{grid-template-columns:1fr}}
/* footer logo same as header: own yellow plate + flapping wings (msg 12434) */
.flogo{display:inline-block;margin-bottom:8px}
.fcol--brand .flogo .logo__img img:first-child{height:56px;width:auto;margin:0;border-radius:12px}
.fcol--brand .flogo .logo__wings{position:absolute;height:auto;width:24.167%;margin:0}
.fcol--brand .flogo .logo__img{display:inline-block;vertical-align:top}
.socials .ic text{font-size:6.6px}
/* reviews page: readable cards (msg 12599) */
.rv-list{display:grid;gap:16px;max-width:860px;margin:18px 0 22px}
.rv{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.rv__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rv__ph{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;background:var(--bg)}
.rv__who{display:flex;flex-direction:column;min-width:0;flex:1}
.rv__name{font-weight:700;font-size:17px}
.rv__meta{font-size:13px;color:var(--muted)}
.rv__stars{color:#F5B301;font-size:16px;letter-spacing:1px;white-space:nowrap}
.rv__text p{font-size:15px;line-height:1.6;margin:0 0 8px}
.rv__answer{margin-top:10px;background:var(--bg);border-left:3px solid var(--y,#F5C400);border-radius:8px;padding:10px 14px;font-size:14px}
.rv__answer p{margin:4px 0 0}
.rv-cta{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:860px;
background:var(--bg);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.rv-cta h2{margin:0 0 6px;font-size:20px}
.rv-cta p{margin:0;max-width:520px}
.rv-cta__btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){.rv{padding:14px}.rv__stars{display:none}.rv__text p{font-size:15px}}
/* header cart: black badge with a white number, basket white inside, fills with black as items are added (msg 12665) */
.header .badge-y,.badge-y{background:var(--dark);color:#fff}
.hcart .hc__bg{fill:#fff}
.hcart .hc__lvl{fill:var(--dark);transform:scaleY(var(--lvl,0));transform-box:fill-box;transform-origin:50% 100%;
transition:transform .7s cubic-bezier(.3,1.35,.5,1)}
.hdr-cart.is-bump .hcart{animation:hc-bump .55s ease}
.hdr-cart.is-bump .badge-y{animation:hc-pop .55s ease}
@keyframes hc-bump{0%{transform:none}30%{transform:translateY(-3px) rotate(-8deg)}60%{transform:translateY(1px) rotate(4deg)}100%{transform:none}}
@keyframes hc-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hcart .hc__lvl{transition:none}.hdr-cart.is-bump .hcart,.hdr-cart.is-bump .badge-y{animation:none}}
/* offers: show-all button under the 4 cards */
.offers__more{display:flex;justify-content:center;margin-top:16px}
.offers__more [hidden]{display:none}
.kat-sub__t{overflow-wrap:break-word;hyphens:auto}
@media (max-width:480px){.kat-sub__t{font-size:12px}}
.pgal__th{overflow:hidden}.pgal__th img{max-width:60px;max-height:74px}
/* catalog menu accents: novelties green, sale red (msg 13258) */
.cat-g a[href="kat-novelty.html"]>span{color:var(--green)!important;-webkit-text-fill-color:var(--green)!important;background:none!important}
.cat-g a[href="kat-novelty.html"] .badge-new{background:var(--green)!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
.cat-g a[href="akcii.html"]>span{color:var(--red)!important;-webkit-text-fill-color:var(--red)!important;background:none!important}
/* msg 15629: on phones the discount quiz opens full screen, nothing is cut by the modal edges */
@media (max-width:767px){.quiz-modal{width:100vw;height:100vh;height:100dvh;border-radius:0}}
/* msg 16751: quiz modal strip on phones = the same yellow picture as the header (forced dark dims CSS rasters) */
@media (max-width:991px){.quiz-modal__bar{position:relative;z-index:0;background:transparent}}
/* msg 16786: butterfly wings stay white; phones draw them as replaced content (forced dark keeps images) */
@media (max-width:991px){.bfly .bfly__w--r,.bfly--cart .bfly__w--r{content:url(../img/logo-wings-white.png?v=3);background:none;object-fit:fill}}