/* ============================================================
   ФИРМЕННЫЕ ЦВЕТА «Счастливкин» — меняешь тут, меняется весь сайт.
   Голубое небо + солнечно-жёлтый, как в логотипе и баннерах.
   ============================================================ */
:root{
  --sky1:   #8AD8F7;   /* светлое небо */
  --sky2:   #2FB0E8;   /* насыщенное небо */
  --blue:   #159FE0;   /* основной синий (кнопки, ссылки) */
  --blue-dark:#0C7CB7;
  --yellow: #FFD200;   /* солнечно-жёлтый (акцент, цены) */
  --yellow-dark:#F7B500;
  --orange: #F7941E;
  --red:    #E63329;   /* как сердечко/карандаш в лого */
  --ink:    #2A3A45;   /* основной текст */
  --muted:  #6F8494;   /* серо-голубой текст */
  --line:   #E1EEF5;   /* рамки */
  --paper:  #F3FBFF;   /* фон страницы */
  --card:   #FFFFFF;   /* фон карточек */
  --on-accent:#FFFFFF;
  --radius: 18px;
  --shadow: 0 8px 26px rgba(21,110,170,.12);
  --font:   system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme: only light;   /* сайт ВСЕГДА светлый — запрет авто-затемнения браузером */
}
html{ color-scheme: only light; background:#F3FBFF; }

*{box-sizing:border-box}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1180px; margin:0 auto; padding:0 20px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:none; border-radius:999px; padding:13px 24px; font:700 15px/1 var(--font);
  background:var(--blue); color:#fff; transition:transform .12s, background .15s;
  box-shadow:0 4px 12px rgba(21,159,224,.3)}
.btn:hover{background:var(--blue-dark)} .btn:active{transform:scale(.97)}
.btn--yellow{background:var(--yellow); color:var(--ink); box-shadow:0 4px 12px rgba(247,181,0,.35)}
.btn--yellow:hover{background:var(--yellow-dark)}
.btn--ghost{background:#fff; color:var(--blue-dark); border:2px solid var(--line); box-shadow:none}
.btn--ghost:hover{border-color:var(--blue)}
.btn--block{width:100%}
.btn:focus-visible{outline:3px solid var(--orange); outline-offset:2px}

.section{padding:60px 0}
.section h2{font:800 clamp(1.6rem,3vw,2.2rem)/1.1 var(--display); margin:0 0 8px; text-wrap:balance}
.section .sub{color:var(--muted); margin:0 0 32px; max-width:640px}

/* ---------- Шапка ---------- */
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.header__row{display:flex; align-items:center; gap:20px; height:74px}
.header__logo img{height:46px; width:auto}
.nav{display:flex; gap:22px; margin-left:8px; flex-wrap:wrap}
.nav a{color:var(--muted); font-weight:700; font-size:15px}
.nav a:hover{color:var(--blue)}
.header__spacer{flex:1}
.header__contacts{display:flex; align-items:center; gap:14px}
.header__phone{font-weight:800; color:var(--blue-dark); white-space:nowrap}
.cart-btn{display:inline-flex; align-items:center; white-space:nowrap; text-decoration:none;
  background:var(--yellow); border:none; border-radius:999px;
  padding:11px 18px; cursor:pointer; font-weight:800; color:var(--ink); box-shadow:0 4px 12px rgba(247,181,0,.35)}
.cart-btn:hover{background:var(--yellow-dark)}
/* иконки соцсетей в шапке */
.header__soc{display:flex; align-items:center; gap:8px}
.hsoc{width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:12px; letter-spacing:.3px;
  text-decoration:none; transition:transform .12s, opacity .12s}
.hsoc svg{width:20px; height:20px; display:block}
.hsoc:hover{transform:translateY(-2px)}
.hsoc--tg{background:#2AABEE}
.hsoc--max{background:linear-gradient(135deg,#3B6DF6,#8A5CF6); font-size:11px}
.hsoc--vk{background:#0077FF}

/* ---------- Герой (баннер) ---------- */
.hero{position:relative; background:linear-gradient(180deg,var(--sky1),var(--paper))}
.hero__banner{width:100%; height:auto; display:block}
.hero__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:22px 20px 6px}

/* ---------- Преимущества ---------- */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; text-align:center; box-shadow:var(--shadow)}
.feature__ico{width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background:linear-gradient(135deg,var(--sky1),var(--blue)); display:flex; align-items:center;
  justify-content:center; font-size:30px}
.feature h3{margin:0 0 6px; font-size:17px}
.feature p{margin:0; color:var(--muted); font-size:14.5px}

/* ---------- Каталог: меню слева + сетка справа ---------- */
.catalog-layout{display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:start}
.catalog-side{position:sticky; top:88px}
.catalog-side__title{font:800 14px var(--display); text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin:0 0 12px 4px}
.catalog__filters{display:flex; gap:8px}
.catalog-side .catalog__filters{flex-direction:column}
.chip{border:2px solid var(--line); background:#fff; border-radius:12px; padding:12px 16px;
  cursor:pointer; font-weight:700; font-size:15px; color:var(--ink); text-align:left; transition:.12s}
.chip:hover{border-color:var(--blue); color:var(--blue-dark)}
.chip.active{background:var(--blue); color:#fff; border-color:var(--blue)}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.catalog-layout>*{min-width:0}        /* чтобы колонки могли сжиматься, а не раздувать страницу */
.catalog-layout .grid{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); min-width:0}
@media(max-width:820px){
  .catalog-layout{grid-template-columns:1fr; gap:16px}
  .catalog-side{position:static; min-width:0}
  .catalog-side__title{display:none}
  /* категории — сеткой 2×2: все видны сразу, без прокрутки */
  .catalog-side .catalog__filters{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
  .catalog-side .chip{white-space:normal; text-align:center; border-radius:12px; padding:12px 8px;
    font-size:14px; line-height:1.2; display:flex; align-items:center; justify-content:center; min-height:48px}
  .catalog-layout .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
}
.product{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; cursor:pointer;
  transition:transform .15s}
.product:hover{transform:translateY(-5px)}
.product__imgwrap{position:relative; aspect-ratio:3/4; background:#EAF6FD}
.product__imgwrap img{width:100%; height:100%; object-fit:cover}
.product__badge{position:absolute; top:12px; left:12px; background:var(--red); color:#fff;
  font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px}
.product__body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1}
.product__mat{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700}
.product__name{font-weight:800; font-size:16px; margin:0; font-family:var(--display)}
.product__short{font-size:13px; color:var(--muted); flex:1}
.product__price{font:800 20px var(--display); color:var(--blue-dark)}
.price-from{font:800 22px var(--display); color:var(--blue-dark)}
.price-from__cur{font-size:14px; font-weight:600; color:var(--muted)}
.product__more{margin-top:6px; font-size:13px; font-weight:700; color:var(--blue)}
.product__price s{font-size:14px; color:var(--muted); font-weight:500; margin-left:6px}
.product__price .req{font-size:15px; color:var(--orange)}
/* ступени цены на карточке */
.tiers{display:flex; flex-direction:column; gap:4px; margin-top:2px}
.tier{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#EAF6FD; border-radius:9px; padding:6px 10px; font-family:var(--font)}
.tier__cond{font-size:12px; font-weight:600; color:var(--muted)}
.tier__cond i{font-style:normal; color:var(--blue); font-weight:800}
.tier__val{font:800 15px var(--display); color:var(--blue-dark); white-space:nowrap}
.tier--best{background:linear-gradient(135deg,#FFF4CE,#FFE59B)}
.tier--best .tier__val{color:#B77900}
.tier--best .tier__cond i{color:#B77900}
.product__btns{margin-top:6px}
/* счётчик количества на карточке */
.qtybox{display:flex; align-items:center; width:100%; height:46px; border-radius:999px;
  overflow:hidden; background:var(--yellow); box-shadow:0 4px 12px rgba(247,181,0,.35)}
.qtybox__b{width:48px; height:100%; border:none; background:var(--yellow); color:var(--ink);
  font-size:22px; font-weight:800; cursor:pointer; line-height:1}
.qtybox__b:hover{background:var(--yellow-dark)}
.qtybox__i{flex:1; min-width:0; height:100%; border:none; outline:none; text-align:center;
  font-size:16px; font-weight:800; color:var(--ink); background:#fff; margin:5px 0; border-left:2px solid var(--yellow); border-right:2px solid var(--yellow)}

/* ---------- Модалка товара ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none}
.modal.open{display:block}
.modal__overlay{position:absolute; inset:0; background:rgba(12,60,90,.5)}
.modal__box{position:absolute; left:50%; top:4vh; transform:translateX(-50%); width:min(1000px,94vw);
  max-height:92vh; overflow:auto; background:var(--paper); border-radius:22px; border:1px solid var(--line)}
.modal__close{position:absolute; top:14px; right:16px; z-index:5; background:#fff; border:1px solid var(--line);
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:20px; color:var(--ink)}
.pv{display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:28px}
.gallery__main{aspect-ratio:3/4; background:#fff; border-radius:14px; overflow:hidden; position:relative; border:1px solid var(--line)}
.gallery__main img{width:100%; height:100%; object-fit:contain}
.gallery__nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  border-radius:50%; border:none; background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer;
  font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow)}
.gallery__nav--prev{left:12px} .gallery__nav--next{right:12px}
.gallery__thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.gallery__thumb{width:70px; height:70px; border-radius:10px; overflow:hidden; border:2px solid transparent;
  cursor:pointer; background:#EAF6FD}
.gallery__thumb.active{border-color:var(--blue)}
.gallery__thumb img{width:100%; height:100%; object-fit:cover}
.pv__mat{color:var(--muted); text-transform:uppercase; font-size:13px; letter-spacing:.05em; font-weight:700}
.pv h2{margin:6px 0 10px; font:800 26px var(--display)}
.pv__price{font:800 28px var(--display); color:var(--blue-dark); margin-bottom:14px}
.pv__price s{font-size:18px; color:var(--muted); font-weight:500; margin-left:8px}
.pv__desc{margin-bottom:18px}
.pv__specs{width:100%; border-collapse:collapse; margin-bottom:20px; font-size:14px}
.pv__specs td{padding:8px 0; border-bottom:1px solid var(--line); vertical-align:top}
.pv__specs td:first-child{color:var(--muted); width:45%}
.pv__qty{display:flex; align-items:center; margin-bottom:16px}
.pv__qty button{width:40px; height:40px; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-size:18px; color:var(--ink)}
.pv__qty input{width:56px; height:40px; text-align:center; border:1px solid var(--line);
  border-left:none; border-right:none; font-size:16px; background:#fff; color:var(--ink)}

/* ---------- Корзина ---------- */
.drawer{position:fixed; inset:0; z-index:110; display:none}
.drawer.open{display:block}
.drawer__overlay{position:absolute; inset:0; background:rgba(12,60,90,.5)}
.drawer__box{position:absolute; top:0; right:0; height:100%; width:min(460px,100vw); background:var(--paper);
  display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.2)}
.drawer__head{padding:20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.drawer__head h3{margin:0; font:800 20px var(--display)}
.drawer__body{flex:1; overflow:auto; padding:20px}
.cart-line{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.cart-line__img{width:64px; height:64px; border-radius:10px; overflow:hidden; background:#EAF6FD; flex:none}
.cart-line__img img{width:100%; height:100%; object-fit:cover}
.cart-line__info{flex:1; font-size:14px}
.cart-line__name{font-weight:700}
.cart-line__mat{color:var(--muted); font-size:12px}
.cart-line__qty{display:flex; align-items:center; gap:8px; margin-top:6px}
.cart-line__qty button{width:26px; height:26px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; color:var(--ink)}
.cart-line__price{font-weight:800; white-space:nowrap; color:var(--blue-dark); text-align:right}
.cart-line__unit{display:block; font-size:11px; font-weight:600; color:var(--muted)}
/* панель ступени в корзине */
.tierbox{background:#EAF6FD; border-radius:12px; padding:12px 14px; margin-top:14px; font-size:13.5px}
.tierbox__now{margin-bottom:6px}
.tierbox__off{background:var(--yellow); color:var(--ink); font-weight:800; border-radius:6px; padding:1px 7px; font-size:12px}
.tierbox__next{color:var(--blue-dark); font-weight:600}
.tierbox__warn{color:#B00; font-weight:600}
.tierbar{height:8px; background:#D3E7F3; border-radius:999px; overflow:hidden; margin-top:8px}
.tierbar__fill{height:100%; background:linear-gradient(90deg,var(--yellow),var(--orange)); border-radius:999px; transition:width .3s}
.cart-line__del{background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px}
.drawer__foot{padding:20px; border-top:1px solid var(--line)}
.drawer__total{display:flex; justify-content:space-between; font:800 18px var(--display); margin-bottom:14px}
.cart-empty{color:var(--muted); text-align:center; padding:40px 0}

/* ---------- Форма заявки ---------- */
.orderform{display:flex; flex-direction:column; gap:16px; max-width:620px}
.orderform .field{display:flex; flex-direction:column; gap:5px}
.orderform label{font-weight:700; font-size:14px; color:var(--ink)}
.orderform label i{font-style:normal; color:var(--red)}
.orderform label span{font-weight:500; color:var(--muted); font-size:13px}
.orderform input, .orderform textarea{width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; font-size:15px; font-family:inherit; background:#fff; color:var(--ink)}
.orderform input:focus, .orderform textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,159,224,.15)}
.orderform textarea{min-height:76px; resize:vertical}
.form-hint{font-size:13px; color:var(--muted)}
.form-ok{background:#EAF6FD; border:1px solid #CFE7F5; border-radius:14px; padding:26px; text-align:center; max-width:620px}
.form-ok h3{margin:0 0 6px; font:800 22px var(--display); color:var(--blue-dark)}
.form-ok p{margin:0; color:var(--muted)}
.delivery-note{background:#EAF6FD; border:1px solid #CFE7F5; border-radius:12px; padding:14px 16px;
  font-size:14px; margin-bottom:20px; max-width:620px; line-height:1.5}

/* ---------- Как работаем ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.step__n{width:40px; height:40px; border-radius:50%; background:var(--yellow); color:var(--ink);
  font:800 18px var(--display); display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:17px; font-family:var(--display)}
.step p{margin:0; color:var(--muted); font-size:14px}

/* ---------- Футер ---------- */
.footer{background:#0C7CB7; color:#DCEFF9; padding:40px 0 28px; margin-top:20px}
.footer a{color:#fff}
.footer a:hover{text-decoration:underline}
.footer__row{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
.footer__logo img{height:56px; background:#fff; padding:8px 12px; border-radius:14px}
.footer__col h4{margin:0 0 10px; font:800 15px var(--display); color:#fff}
.footer__col p{margin:0 0 6px; font-size:14px}
.footer__req{margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22);
  font-size:13px; color:#BEE3F5; line-height:1.7}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:14px 22px; border-radius:12px; box-shadow:var(--shadow); z-index:200; opacity:0; transition:.25s;
  pointer-events:none; font-weight:700}
.toast.show{opacity:1; bottom:34px}

/* ---------- Документы ---------- */
.docs{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.doc{display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
  transition:transform .15s, border-color .15s}
.doc:hover{transform:translateY(-4px); border-color:var(--blue)}
.doc__ico{font-size:32px}
.doc__t{font-weight:700; font-size:15px; line-height:1.3}
.doc__x{font-size:12px; font-weight:800; color:#fff; background:var(--red); padding:2px 8px; border-radius:6px; letter-spacing:.05em}

/* ---------- Секции-тон ---------- */
.section--tint{background:linear-gradient(180deg,#EAF7FD,var(--paper))}

/* ---------- Меню-кнопки (жёлтые «таблетки», как CTA) ---------- */
.navbar{background:transparent; border:none}
.navbar__row{display:flex; justify-content:center; align-items:center; padding:16px 0; overflow-x:auto}
.nav{display:flex; gap:8px; margin:0; flex-wrap:nowrap; justify-content:center}
.nav a{display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  background:var(--yellow); color:var(--ink); border-radius:999px; padding:11px 17px;
  font-size:14px; font-weight:700; box-shadow:0 4px 12px rgba(247,181,0,.35); transition:transform .12s, background .15s}
.nav a:hover{background:var(--yellow-dark)}
.nav a:active{transform:scale(.97)}
.nav a.active{background:var(--yellow); box-shadow:0 4px 12px rgba(247,181,0,.35), inset 0 0 0 2px rgba(12,124,183,.45)}
.nav a.active::after{display:none}
.nav-toggle{display:none; background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:var(--blue-dark); margin-left:6px}

/* ---------- Компактная шапка страницы ---------- */
.pagehead{background:linear-gradient(180deg,var(--sky1),var(--paper)); padding:46px 0 22px}
.pagehead h1{font:800 clamp(1.8rem,4vw,2.6rem)/1.1 var(--display); letter-spacing:-.02em; margin:0; text-wrap:balance}
.pagehead p{color:var(--muted); margin:10px 0 0; max-width:640px}

/* ---------- CTA-полоса ---------- */
.cta{background:linear-gradient(135deg,var(--blue),var(--sky2)); color:#fff; border-radius:22px;
  padding:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.cta h2{margin:0 0 6px; color:#fff}
.cta p{margin:0; color:#EAF7FD}

/* ---------- Цифры ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:var(--shadow)}
.stat b{display:block; font:800 34px var(--display); color:var(--blue-dark)}
.stat span{color:var(--muted); font-size:14px}

/* ---------- Инфо-страницы (оформление, доставка) ---------- */
.prose{max-width:760px}
.prose p{margin:0 0 14px}
.infogrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.infocard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.infocard h3{margin:0 0 8px; font-family:var(--display); font-size:18px}
.infocard p{margin:0 0 8px; color:var(--muted); font-size:14.5px}
.infocard ul{margin:0; padding-left:18px; color:var(--muted); font-size:14.5px}
.infocard li{margin:4px 0}
.discount{display:flex; gap:16px; align-items:center; background:linear-gradient(135deg,#FFF4CE,#FFE59B);
  border:1px solid #F2CF6E; border-radius:var(--radius); padding:20px 22px; margin-bottom:14px}
.discount .d-ico{font-size:30px; flex:none}
.discount b{display:block; margin-bottom:2px}
.discount span{color:#6b5a20}

/* ---------- Контакты ---------- */
.contactlist{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:820px}
.ci{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 18px}
.ci__ico{width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:15px; letter-spacing:.3px; background:#8CA0AE}
.ci__ico svg{width:22px; height:22px; display:block}
.ci__body{min-width:0}
.ci b{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px}
.ci a, .ci span{font-weight:700; word-break:break-word}
.ci__ico--phone{background:#3DBE5A}
.ci__ico--mail{background:var(--blue)}
.ci__ico--tg{background:#2AABEE}
.ci__ico--max{background:linear-gradient(135deg,#3B6DF6,#8A5CF6); font-size:12px}
.ci__ico--wb{background:linear-gradient(135deg,#5B1A8B,#CB11AB)}
.ci__ico--ozon{background:#005BFF; font-size:11px}
.ci__ico--vk{background:#0077FF}

/* ---------- Адаптив ---------- */
@media(max-width:1024px){
  .nav-toggle{display:block}
  /* полоса-меню схлопывается (меню открывается бургером сверху) */
  .navbar{border:none; background:transparent; padding:0}
  .navbar__row{min-height:0; display:block; padding:0}
  .nav{display:none; position:fixed; top:74px; left:0; right:0; margin:0; padding:6px 0;
    flex-direction:column; gap:0; background:#fff; border-top:1px solid var(--line);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow); z-index:49}
  .nav.open{display:flex}
  .nav a{width:100%; padding:14px 20px; font-size:15px; border-radius:0;
    background:transparent; color:var(--ink); box-shadow:none; justify-content:flex-start}
  .nav a:hover{background:#F1F9FE}
  .nav a.active{background:#EAF7FD; color:var(--blue-dark)}
}
@media(max-width:900px){
  .features,.grid,.steps,.docs{grid-template-columns:repeat(2,1fr)}
  .pv{grid-template-columns:1fr}
  .infogrid{grid-template-columns:1fr}
}
@media(max-width:700px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){
  .features{grid-template-columns:repeat(2,1fr); gap:12px}
  .feature{padding:16px 14px}
  .feature__ico{width:52px; height:52px; font-size:24px}
  .feature h3{font-size:15px}
  .feature p{font-size:13px}
  .steps,.docs{grid-template-columns:1fr}
  .contactlist{grid-template-columns:1fr}
  .cart-btn__full{display:none}
  .cart-btn{padding:10px 14px; font-size:14px}
  .header__phone{display:none}
  .header__logo img{height:38px}
}