/* ==========================================================================
   Cartridge.kz — собственное оформление поверх штатной темы Default.
   Без градиентной пестроты, outset-теней и мигающих баннеров.
   ========================================================================== */
:root{
  --brand:#12508F;
  --brand-dark:#0D3C6E;
  --brand-soft:#E8F0F9;
  --accent:#F27405;
  --accent-dark:#D96504;
  --ink:#16202B;
  --muted:#6B7789;
  --line:#E3E8EF;
  --bg-soft:#F6F8FB;
  --ok:#1B8A54;
  --radius:10px;
}

body{color:var(--ink);}
a{color:var(--brand);}
a:hover{color:var(--brand-dark);}

/* ---------- верхняя полоса ---------- */
.c-topbar{background:var(--brand-dark);color:#DCE6F2;font-size:13px;line-height:1.4;}
.c-topbar__in{max-width:var(--container-max-width,1160px);margin:0 auto;
  padding:8px var(--container-padding,16px);display:flex;flex-wrap:wrap;
  gap:8px 22px;align-items:center;}
.c-topbar a{color:#fff;text-decoration:none;}
.c-topbar a:hover{text-decoration:underline;}
.c-topbar__spacer{flex:1 1 auto;}
.c-topbar__phone{font-weight:700;white-space:nowrap;}
.c-topbar__geo{opacity:.85;}

/* ---------- логотип ---------- */
.c-logo{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;line-height:1;}
.c-logo__mark{font-weight:800;font-size:26px;letter-spacing:-.5px;color:var(--brand);}
.c-logo__mark span{color:var(--accent);}
.c-logo__tag{font-size:12px;color:var(--muted);white-space:nowrap;}

/* ---------- поиск ---------- */
.search-wrapper input#search{border:2px solid var(--brand);border-radius:var(--radius);
  height:48px;font-size:15px;padding-left:14px;}
.search-wrapper input#search:focus{border-color:var(--accent);outline:none;}
.search-wrapper button{background:var(--brand);border-radius:0 8px 8px 0;}
.search-wrapper button:hover{background:var(--brand-dark);}

/* ---------- главная: герой ---------- */
.c-hero{background:var(--brand-soft);border:1px solid var(--line);border-radius:14px;
  padding:32px 28px;margin:0 0 28px;}
.c-hero h1{font-size:30px;line-height:1.22;margin:0 0 10px;color:var(--ink);}
.c-hero p.c-hero__sub{font-size:16px;color:var(--muted);margin:0 0 18px;max-width:760px;}
.c-hero__form{display:flex;gap:10px;max-width:760px;}
.c-hero__form input{flex:1 1 auto;height:52px;border:2px solid var(--brand);
  border-radius:var(--radius);padding:0 16px;font-size:15px;background:#fff;}
.c-hero__form input:focus{border-color:var(--accent);outline:none;}
.c-hero__form button{flex:0 0 auto;height:52px;padding:0 26px;border:0;cursor:pointer;
  border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:700;font-size:15px;}
.c-hero__form button:hover{background:var(--accent-dark);}
.c-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.c-chips a{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:13px;color:var(--brand);text-decoration:none;}
.c-chips a:hover{border-color:var(--brand);background:#fff;}

/* ---------- преимущества ---------- */
.c-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 30px;}
.c-usp__item{border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px;background:#fff;}
.c-usp__item b{display:block;font-size:15px;margin-bottom:4px;}
.c-usp__item span{font-size:13px;color:var(--muted);line-height:1.45;}

/* ---------- секции ---------- */
.c-sec{margin:0 0 34px;}
.c-sec__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin:0 0 14px;border-bottom:2px solid var(--line);padding-bottom:8px;}
.c-sec__head h2{font-size:21px;margin:0;}
.c-sec__head a{font-size:14px;white-space:nowrap;}

/* ---------- плитки брендов ---------- */
.c-brands{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.c-brands a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:78px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;
  transition:border-color .15s;}
.c-brands a:hover{border-color:var(--brand);}
.c-brands small{font-weight:400;color:var(--muted);font-size:12px;}

/* ---------- карточки категорий ---------- */
.c-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.c-cats a{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:16px;text-decoration:none;color:var(--ink);display:block;transition:border-color .15s;}
.c-cats a:hover{border-color:var(--brand);}
.c-cats b{display:block;font-size:15px;margin-bottom:4px;}
.c-cats span{font-size:13px;color:var(--muted);}

/* ---------- сетка товаров ---------- */
.c-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.c-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:12px;display:flex;flex-direction:column;transition:border-color .15s;}
.c-card:hover{border-color:var(--brand);}
.c-card__img{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;
  background:var(--bg-soft);margin-bottom:10px;}
.c-card__img img{width:100%;height:100%;object-fit:contain;display:block;}
.c-card__brand{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
.c-card__name{font-size:14px;line-height:1.35;margin:2px 0 6px;min-height:56px;}
.c-card__name a{color:var(--ink);text-decoration:none;}
.c-card__name a:hover{color:var(--brand);}
.c-card__fit{font-size:12px;color:var(--muted);min-height:32px;margin-bottom:8px;line-height:1.35;}
.c-card__bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.c-card__price{font-size:18px;font-weight:800;white-space:nowrap;}
.c-card__buy{border:0;cursor:pointer;background:var(--accent);color:#fff;font-weight:700;
  border-radius:8px;padding:9px 14px;font-size:13px;text-decoration:none;display:inline-block;}
.c-card__buy:hover{background:var(--accent-dark);color:#fff;}

/* ---------- популярные модели ---------- */
.c-models{display:flex;flex-wrap:wrap;gap:8px;}
.c-models a{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:8px 12px;font-size:13px;text-decoration:none;color:var(--ink);}
.c-models a:hover{border-color:var(--brand);color:var(--brand);}
.c-models a i{font-style:normal;color:var(--muted);font-size:12px;}

/* ---------- текстовый блок ---------- */
.home-intro{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;}
.home-intro h2{font-size:21px;margin-top:0;}
.home-intro h3{font-size:16px;margin:20px 0 8px;}
.home-intro p{margin:0 0 12px;color:#2A3645;}

/* ---------- подвал ---------- */
.c-footer{background:#101B27;color:#B9C4D2;margin-top:42px;}
.c-footer a{color:#E4EBF3;text-decoration:none;}
.c-footer a:hover{text-decoration:underline;}
.c-footer__in{max-width:1280px;margin:0 auto;padding:34px 16px 24px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:26px;}
.c-footer h4{color:#fff;font-size:14px;margin:0 0 12px;letter-spacing:.3px;}
.c-footer ul{list-style:none;margin:0;padding:0;}
.c-footer li{margin-bottom:7px;font-size:14px;}
.c-footer__phone{font-size:19px;font-weight:800;color:#fff;display:block;margin-bottom:4px;}
.c-footer__req{font-size:12px;line-height:1.55;opacity:.75;}
.c-footer__bottom{border-top:1px solid #1E2C3C;}
.c-footer__bottom div{max-width:1280px;margin:0 auto;padding:14px 16px;
  font-size:12px;opacity:.65;display:flex;flex-wrap:wrap;gap:10px 20px;}

/* штатный копирайт и бейдж движка не показываем — свой подвал ниже */
.copyright, .poweredby{display:none !important;}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .c-brands{grid-template-columns:repeat(4,1fr);}
  .c-usp{grid-template-columns:repeat(2,1fr);}
  .c-grid,.c-cats{grid-template-columns:repeat(3,1fr);}
  .c-footer__in{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .c-grid,.c-cats{grid-template-columns:repeat(2,1fr);}
  .c-brands{grid-template-columns:repeat(3,1fr);}
  .c-hero{padding:22px 18px;}
  .c-hero h1{font-size:23px;}
  .c-hero__form{flex-direction:column;}
  .c-hero__form button{width:100%;}
}
@media (max-width:430px){
  .c-brands{grid-template-columns:repeat(2,1fr);}
  .c-usp{grid-template-columns:1fr;}
  .c-footer__in{grid-template-columns:1fr;}
  .c-card__name{min-height:0;}
  .c-card__fit{min-height:0;}
  .c-topbar__geo{display:none;}
}

/* ---- подборка дня: 6 в ряд, обновляется ночной ротацией ---- */
.c-sec--promo{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 24px;}
.c-sec--promo .c-sec__head{margin-bottom:14px;}
.c-sec__note{font-size:13px;color:var(--muted);white-space:nowrap;}
.c-grid--promo{grid-template-columns:repeat(6,1fr);gap:12px;}
.c-grid--promo .c-card{padding:10px;}
.c-grid--promo .c-card__name{font-size:13px;min-height:52px;}
@media (max-width:1100px){.c-grid--promo{grid-template-columns:repeat(4,1fr);}}
@media (max-width:820px){.c-grid--promo{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.c-grid--promo{grid-template-columns:repeat(2,1fr);}
  .c-sec--promo{padding:14px;}
  .c-sec__note{white-space:normal;}}

/* ==========================================================================
   Информационные страницы: ЧАВО, статьи, разбор дефектов печати
   ========================================================================== */
#page{max-width:860px;}
.a-lead{font-size:17px;line-height:1.55;color:var(--ink);margin:0 0 22px;}
#page h2{font-size:22px;margin:32px 0 12px;padding-top:4px;}
#page h3{font-size:17px;margin:22px 0 8px;}
#page p{line-height:1.65;margin:0 0 12px;}
.a-list{margin:0 0 16px;padding-left:20px;}
.a-list li{line-height:1.6;margin-bottom:8px;}
.a-steps{margin:0 0 18px;padding-left:22px;}
.a-steps li{line-height:1.6;margin-bottom:10px;}
.a-note{background:var(--bg-soft);border-left:3px solid var(--brand);padding:12px 14px;
  border-radius:0 6px 6px 0;font-size:14px;color:#39465A;}
.a-formula{background:var(--brand-soft);border-radius:var(--radius);padding:12px 16px;
  font-weight:600;text-align:center;}
.a-back{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);}

/* таблицы */
.a-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;}
.a-table th,.a-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;}
.a-table th{background:var(--bg-soft);font-weight:700;}

/* схемы */
.a-fig{margin:0 0 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;}
.a-fig svg{width:100%;height:auto;display:block;}
.a-fig figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center;}
.a-fig--ruler svg{max-width:640px;margin:0 auto;}

/* разбор дефектов */
.a-defects{display:flex;flex-direction:column;gap:18px;margin-bottom:24px;}
.a-row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;}
.a-def{margin:0;}
.a-def svg{width:100%;height:auto;display:block;}
.a-def figcaption{font-size:12px;color:var(--muted);margin-top:8px;text-align:center;}
.a-row__text h3{margin:0 0 8px;font-size:17px;}
.a-row__text p{margin:0 0 8px;font-size:14px;line-height:1.6;}
.a-row__part{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);
  border-radius:20px;padding:3px 12px;font-size:13px;font-weight:600;}

/* вопрос-ответ */
.a-toc{background:var(--bg-soft);border-radius:var(--radius);padding:12px 14px;font-size:14px;
  line-height:1.9;margin-bottom:24px;}
.a-qa{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.a-qa details{border-bottom:1px solid var(--line);}
.a-qa details:last-child{border-bottom:0;}
.a-qa summary{cursor:pointer;padding:13px 16px;font-weight:600;list-style:none;position:relative;
  padding-right:44px;line-height:1.45;}
.a-qa summary::-webkit-details-marker{display:none;}
.a-qa summary::after{content:"+";position:absolute;right:16px;top:11px;font-size:20px;
  color:var(--brand);font-weight:400;}
.a-qa details[open] summary::after{content:"–";}
.a-qa summary:hover{background:var(--bg-soft);}
.a-qa details>div{padding:0 16px 15px;font-size:15px;line-height:1.65;color:#39465A;}

/* карточки статей */
.a-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:8px;}
.a-card{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  background:#fff;text-decoration:none;transition:border-color .15s;}
.a-card:hover{border-color:var(--brand);}
.a-card b{display:block;font-size:16px;color:var(--brand);margin-bottom:6px;}
.a-card span{display:block;font-size:13px;line-height:1.5;color:var(--muted);}

/* призыв к действию */
.a-cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  background:var(--brand-soft);border-radius:var(--radius);padding:20px;margin:30px 0 10px;}
.a-cta b{font-size:17px;}
.a-cta p{margin:6px 0 0;font-size:14px;color:#39465A;max-width:520px;}
.a-cta__links{display:flex;gap:10px;flex-wrap:wrap;}
.a-btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;white-space:nowrap;}
.a-btn:hover{background:var(--brand-dark);color:#fff;}
.a-btn--ghost{background:#fff;color:var(--brand);border:1px solid var(--brand);}
.a-btn--ghost:hover{background:#fff;color:var(--brand-dark);border-color:var(--brand-dark);}

@media (max-width:720px){
  .a-row{grid-template-columns:110px 1fr;gap:14px;padding:12px;}
  .a-cards{grid-template-columns:1fr;}
  .a-cta{flex-direction:column;align-items:flex-start;}
  .a-table{font-size:13px;}
  .a-table th,.a-table td{padding:6px 7px;}
}

/* ---- корзина, перенесённая из служебной полосы Webasyst ---- */
#globalnav[hidden]{display:none!important;}
.c-topbar__slot{display:flex;align-items:center;gap:10px;margin-left:auto;}
.c-topbar__slot #cart{margin:0;}
.c-topbar__slot .cart-summary{display:inline-flex;align-items:center;gap:6px;
  color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  background:rgba(255,255,255,.12);border-radius:20px;padding:5px 14px;}
.c-topbar__slot .cart-summary:hover{background:var(--accent);color:#fff;text-decoration:none;}
.c-topbar__slot .cart-summary svg{width:18px;height:18px;fill:currentColor;}
.c-topbar__slot .cart-total{font-weight:700;}
.c-topbar__slot #cart.empty .cart-total{display:none;}
.c-topbar__slot #mobile-nav-toggle{background:transparent;border:0;padding:4px;cursor:pointer;}
.c-topbar__slot #mobile-nav-toggle svg{width:20px;height:14px;}
.c-topbar__slot #mobile-nav-toggle .hamburger-line{fill:#fff;}
/* до переноса корзину не показываем, чтобы не мигала в служебной полосе */
html:not(.c-cart-moved) #globalnav{visibility:hidden;}
@media (max-width:640px){
  .c-topbar__slot .cart-summary{padding:5px 10px;}
  .c-topbar__slot .h-cart-title{display:none;}
}

/* ==========================================================================
   Раскладка шапки: своя полоса контактов первой строкой, штатное меню темы
   (ul.pages.flyout-nav) — второй, слева. Раньше обе строки лежали в одном
   flex-контейнере .appnav и распирали его по ширине.
   ========================================================================== */
/* .appnav у темы — одна flex-строка. Нам нужны три: контакты, главное меню,
   поиск. Раскладываем переносами и порядком, DOM темы не трогаем. */
header.globalheader .appnav{flex-wrap:wrap;justify-content:flex-start;
  row-gap:12px;padding-top:0;margin-top:0;}
/* 1-я строка: полоса контактов во всю ширину окна, содержимое — по контейнеру */
header.globalheader .appnav > .c-topbar{order:1;flex:0 0 100vw;
  margin-left:calc(50% - 50vw);}
/* 2-я строка: кнопка каталога и штатный поиск темы */
header.globalheader .appnav > .pages.flyout-nav{margin-left:0;min-width:0;
  justify-content:flex-start;flex-wrap:wrap;align-items:center;}
header.globalheader .appnav > .pages.is-dropdown-nav{order:2;flex:0 0 auto;margin-right:16px;}
header.globalheader .appnav > .search{order:3;flex:1 1 320px;margin:0;}
/* 3-я строка: разделы сайта, слева */
header.globalheader .appnav > .pages.is-pages{order:4;flex:0 0 100%;margin-right:auto;}
/* кнопка каталога — в фирменном цвете, а не в чёрном по умолчанию */
header.globalheader .category-btn-item > a.button{background:var(--brand);color:#fff;
  border-radius:8px;padding:9px 16px;font-weight:600;}
header.globalheader .category-btn-item > a.button:hover{background:var(--brand-dark);color:#fff;}
.c-topbar__claim{color:#AFC4DC;font-size:13px;}
.c-topbar__in{row-gap:6px;}
@media (max-width:900px){
  .c-topbar__claim,.c-topbar__geo{flex:1 0 100%;}
}

/* контакты в одну строку на широком экране, перенос — только на узком */
@media (min-width:1100px){
  header.globalheader .c-topbar__in{flex-wrap:nowrap;gap:8px 18px;}
  .c-topbar__claim,.c-topbar__geo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
}
@media (max-width:820px){
  /* на узком экране штатный поиск темы сворачивается в кнопку-лупу —
     пусть стоит рядом с кнопкой каталога, а не отдельной строкой */
  header.globalheader .appnav > .search{flex:0 1 auto;}
}

/* широкие схемы на телефоне: прокручиваются внутри себя, а не мельчают
   до нечитаемых подписей; страница по горизонтали при этом не едет */
@media (max-width:720px){
  .a-fig--wide{overflow-x:auto;padding:14px 12px;}
  .a-fig--wide svg{min-width:660px;}
  .a-fig--wide figcaption{min-width:0;}
}