/* MATUR.TOCHKA — цветовая тема «Петроль и коралл».
   Холодная светлая база, петрольный для основных действий, коралловый — только для горячих акцентов. */
:root{
 --petrol:#087F78; --petrol-h:#066A65; --petrol-p:#054D4A;
 --coral:#E95440; --coral-d:#D33F32;
 --white:#FFFFFF; --mist:#F1F7F5; --mint:#DFF0EC; --tint:#EAF5F2;
 --graphite:#182321; --sea:#86B8AD; --text2:#687572; --border:#D7E5E1;
 /* перекладываем на токены сайта */
 --olive:var(--petrol); --olive-d:var(--petrol-h); --olive-l:var(--mint);
 --accent:var(--coral-d); --ink:var(--graphite); --muted:#687572; --line:var(--border);
 --bg:var(--mist); --card:var(--white); --soft:var(--mist); --sand:var(--tint); --sand2:var(--mist);
 --shadow:0 4px 24px rgba(24,35,33,.07)
}
body{color:var(--graphite);background:var(--mist)}
body[data-page="product"]{background:var(--white)}
::selection{background:var(--mint)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}

/* логотип */
.logo{display:flex;align-items:center;gap:10px}
.logo b{display:none}
.logo .lm{height:38px;width:auto}
.logo .lw{height:15px;width:auto}
.logo .lm,.logo .lw{filter:grayscale(1) brightness(0) saturate(100%) invert(42%) sepia(35%) saturate(1460%) hue-rotate(130deg) brightness(88%) contrast(95%)}
.flogo{width:170px;height:auto;margin-bottom:12px}
@media(max-width:899px){.logo .lm{height:32px}.logo .lw{height:12px}}
@media(max-width:380px){.logo .lw{display:none}}

/* кнопки: петрольный — основное действие, мятный — вторичное */
.btn{background:var(--petrol);color:#fff}
.btn:hover{background:var(--petrol-h)}
.btn:active{background:var(--petrol-p)}
.btn.light{background:var(--mint);color:var(--petrol-p)}
.btn.light:hover{background:#CDE7E1}
.btn.light:active{background:#BBDDD5}
.btn.dark{background:var(--graphite);color:#fff}
.btn.white{background:#fff;color:var(--graphite)}
.btn.white:hover{background:var(--tint)}
.p .btn.in{background:var(--mint);color:var(--petrol-p)}
.p .step,.step{background:var(--mint);border-color:var(--mint);color:var(--petrol-p)}
.step.big{background:var(--mint)}
.favsq{background:var(--mint)}.favsq svg.i{color:var(--petrol-p)}
.favsq.on svg.i,.fav.on svg.i{fill:var(--coral-d);color:var(--coral-d)}

/* шапка: белая, петрольный — навигация, коралл — горячие индикаторы */
.util{background:var(--graphite)}
.head,.head .wrap{background:#fff}
.hic{color:var(--graphite)}
.cnt{background:var(--coral-d)}
.catbtn{background:var(--petrol);color:#fff}
.catbtn:hover{background:var(--petrol-h)}
.search{border:1.5px solid var(--border);background:var(--mist)}
.search:focus-within{border-color:var(--petrol)}
.search input{background:transparent;color:var(--graphite)}
.search select{background:#fff}
.search button{background:var(--petrol)}
.search button:hover{background:var(--petrol-h)}
.menu a.on,.menu a:hover,.hrow2 a.on{color:var(--petrol)}
.menu a.hot{color:var(--coral-d)}
.hrow2 .addr b{color:var(--petrol)}

/* чипсы, бейджи, плашки */
.chip{background:var(--tint);color:var(--petrol-p)}
.chip.dark{background:var(--graphite);color:#fff}
.chip.ok{background:#E7EFE8;color:#3D5A40}
.chip.warn{background:#FCEBDD;color:#8A4B18}
.chip.gray{background:#EDF2F1;color:var(--text2)}
.chip.sale{background:var(--coral-d);color:#fff}
.chips a{background:#fff;border:1px solid var(--border);color:var(--graphite)}
.chips a.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
#active a{background:var(--graphite)}
.pic .badge{background:var(--mint);color:var(--petrol-p)}
.pic .badge.sage{background:var(--sea);color:var(--graphite)}
.note{background:var(--tint);color:var(--petrol-p)}
.alert{background:var(--graphite)}

/* карточки товаров: белые, цена и название тёмные */
.p{background:#fff}
.pic,.pic .ph{background:var(--mist)}
.p .pr{color:var(--graphite)}
.p .br{color:var(--graphite)}
.p .br svg.i{color:var(--petrol)}
.p .br.plain{color:var(--text2)}
.pricepill{background:var(--tint)}
.pricepill b{color:var(--graphite)}
.pricepill span{color:var(--text2)}
.brand{background:#fff;color:var(--graphite)}
.brand:hover{color:var(--petrol)}
.circ .ci{background:#fff}
.circ .ci svg.i{color:var(--petrol)}

/* промо */
.slide .chip{background:#fff;color:var(--petrol-p)}
.slide .art svg{color:rgba(8,127,120,.22)}
.promo.dark{background:var(--graphite)}
.promo.ol,.strip{background:var(--petrol);color:#fff}
.strip .chip,.promo .chip{background:rgba(255,255,255,.22)!important;color:#fff!important}
.how{background:#fff}
.hs b{background:var(--mint);color:var(--petrol-p)}
.tr .ic{background:var(--tint);color:var(--petrol)}

/* формы, фильтры, прогресс */
.fld input:focus,.fld textarea:focus{border-color:var(--petrol)}
.fb a.on,.fb .sub.on{color:var(--petrol)}
.fb .cur{background:var(--mist)}.fb .cur.on{background:var(--tint);color:var(--petrol-p)}
.fb input[type=checkbox],.chk input,.method input{accent-color:var(--petrol)}
.rad.on i{border-color:var(--petrol)}
.bar{background:var(--tint)}.bar i{background:var(--petrol)}
.steps i{background:var(--tint)}.steps .d i{background:var(--petrol)}
.sz.on{background:var(--graphite);border-color:var(--graphite)}
.method.on{border-color:var(--petrol)}
.mybox{background:var(--tint);color:var(--petrol-p)}
.facts div{background:var(--mist)}
.kpi b{color:var(--graphite)}

/* карточка товара */
.tolink{background:var(--tint);color:var(--petrol-p)}
.brandrow .bl{background:var(--tint);color:var(--petrol)}
.brandrow small svg.i{color:var(--petrol)}
.dl svg.i{color:var(--petrol)}
.seller{background:var(--graphite)}
.seller .sl img{width:40px;height:auto;display:block}
.infobox,.buybox{border-color:var(--border)}

/* закупки: изображения в тон */
.pc-img,.pz-img,.item-img,.ord-img{background:linear-gradient(160deg,var(--mist),var(--mint))}
.pc-img>svg.i,.pz-img svg.i,.item-img svg.i,.ord-img>svg.i{color:rgba(5,77,74,.35)}
.an>svg.i{background:var(--tint);color:var(--petrol)}

/* БАДы / уход — спокойный морской маркер */
.mega-l a[data-s="БАДы"] span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sea);margin-right:8px}

/* подвал — графит с белым логотипом */
footer{background:var(--graphite)}
.toast{background:var(--graphite)}

/* Широкая раскладка маркетплейса: почти вся ширина экрана на десктопе. */
@media(min-width:900px){
 .wrap{max-width:1600px;padding-left:24px;padding-right:24px}
 .mega-in{max-width:1600px}
}
@media(min-width:1280px){
 .grid:not(.g4){grid-template-columns:repeat(6,minmax(0,1fr))}
 .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .brands{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media(min-width:1680px){
 .grid:not(.g4){grid-template-columns:repeat(7,minmax(0,1fr))}
}