@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════
   ДИЗАЙН 7 — «МАРКЕТ»
   Сделан по образцу rossko.ru, которого дизайнер привела как пример
   «визуально понятного» сайта запчастей. Что взято оттуда:
   белый фон, красный как единственный акцент, крупные скругления,
   плавающая цветная шапка с огромным полем поиска во всю ширину,
   центрированные жирные заголовки разделов, плитки категорий
   с картинкой, крупные цифры вместо описаний.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="rossko"]{
  --sheet:#FFFFFF; --sheet2:#FFFFFF; --sheet3:#F4F5F7; --sheet4:#E9EBEF;
  --ink:#E8232A; --ink2:#E8232A; --ink-soft:rgba(232,35,42,.07);
  --amber:#E8232A; --amber-tx:#FFFFFF; --amber-soft:rgba(232,35,42,.07);
  --red:#E8232A; --red-soft:rgba(232,35,42,.08);
  --green:#12A05A; --green-soft:rgba(18,160,90,.10);
  --chalk:#14161A; --chalk2:#5A6270; --chalk3:#8E96A3;
  --rule:#ECEEF2; --rule2:#E1E4EA; --rule3:#C3C9D3;
  --well:#FFFFFF;
  --r:16px; --r2:24px;
}
[data-theme="rossko"] body{background:var(--sheet);background-image:none;font-size:15px}

/* типографика: жирно, крупно, без капса и без разрядки */
[data-theme="rossko"] h1,[data-theme="rossko"] h2,[data-theme="rossko"] h3,[data-theme="rossko"] h4{
  text-transform:none;letter-spacing:-.03em;line-height:1.06}
[data-theme="rossko"] .d1{font-size:clamp(30px,5vw,64px)}
[data-theme="rossko"] .d2{font-size:clamp(24px,3.2vw,44px)}
[data-theme="rossko"] .tl{letter-spacing:.1em;color:var(--chalk3)}
[data-theme="rossko"] .bd{font-size:16px;color:var(--chalk2)}
[data-theme="rossko"] .mono{font-family:inherit;letter-spacing:0}

/* всё чертёжное убираем */
[data-theme="rossko"] .frm,[data-theme="rossko"] .stamp,[data-theme="rossko"] .well u,
[data-theme="rossko"] .vp-gr,[data-theme="rossko"] .vp-scan,[data-theme="rossko"] .vp-ax,
[data-theme="rossko"] .vp-tint,[data-theme="rossko"] .gcard .ph .tint,
[data-theme="rossko"] .gcard .ph .scan,[data-theme="rossko"] .lt-n,
[data-theme="rossko"] .lt-x,[data-theme="rossko"] .peek{display:none}
[data-theme="rossko"] .lt-t b{text-transform:none;font-size:clamp(20px,2.2vw,30px)}
[data-theme="rossko"] .lt-h{border-bottom:1px solid var(--rule);padding-bottom:16px}
[data-theme="rossko"] .dim i{display:none}
[data-theme="rossko"] .dim{justify-content:flex-start}
[data-theme="rossko"] .dim span{background:var(--sheet3);padding:4px 9px;border-radius:8px;
  font-family:inherit;font-size:11.5px}

/* ── ШАПКА: плавающая красная плашка с широким поиском ── */
[data-theme="rossko"] .tb{background:transparent;border-bottom:0;backdrop-filter:none;
  padding:10px clamp(8px,1.4vw,16px) 6px}
[data-theme="rossko"] .tb-in{background:var(--ink);border-radius:var(--r2);min-height:66px;
  padding-inline:clamp(14px,1.8vw,24px);gap:clamp(10px,1.4vw,18px)}
[data-theme="rossko"] .lg{background:#fff}
[data-theme="rossko"] .tb-co{border-left-color:rgba(255,255,255,.28)}
[data-theme="rossko"] .tb-co b,[data-theme="rossko"] .tb-co span{color:rgba(255,255,255,.8)}
[data-theme="rossko"] .fld{background:#fff;border:0;border-radius:999px;height:46px;padding:0 20px;
  flex:1 1 auto;min-width:120px}
[data-theme="rossko"] .fld .pr{color:var(--chalk3)}
[data-theme="rossko"] .fld input{font-family:inherit;font-size:15px}
[data-theme="rossko"] .tb-tel{color:#fff;font-family:inherit;font-weight:800;font-size:16px}
[data-theme="rossko"] .tb-tel:hover{color:#fff;opacity:.85}
[data-theme="rossko"] .tb-tel small{color:rgba(255,255,255,.75);font-weight:600}
[data-theme="rossko"] .ib{border-color:rgba(255,255,255,.4);color:#fff;border-radius:999px;
  width:42px;height:42px}
[data-theme="rossko"] .ib:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
[data-theme="rossko"] .ib .n{background:#fff;color:var(--ink)}
[data-theme="rossko"] .tb-acc{border-color:rgba(255,255,255,.4);color:#fff;border-radius:999px;height:42px;
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
[data-theme="rossko"] .tb-acc:hover,[data-theme="rossko"] .tb-acc.in{border-color:#fff;color:#fff}
[data-theme="rossko"] .tb-cart{background:#fff;color:var(--ink);border-color:#fff;border-radius:999px;
  height:42px;padding:0 18px;font-family:inherit;font-weight:800;letter-spacing:0;text-transform:none;
  font-size:14px}
[data-theme="rossko"] .tb-cart:hover{background:#fff;color:var(--ink);opacity:.9}
[data-theme="rossko"] .tb-nav a{color:rgba(255,255,255,.88);text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:600}
[data-theme="rossko"] .tb-nav a:hover,[data-theme="rossko"] .tb-nav a[aria-current]{color:#fff;
  text-decoration:underline;text-underline-offset:4px}
[data-theme="rossko"] .mega{background:#fff;border-radius:var(--r2);top:calc(100% + 6px);
  left:clamp(8px,1.4vw,16px);right:clamp(8px,1.4vw,16px);border:0;
  box-shadow:0 26px 60px rgba(20,22,26,.18)}
[data-theme="rossko"] .mega-c{background:#fff}
[data-theme="rossko"] .mega-c b a{text-transform:none;font-size:14px}
[data-theme="rossko"] .mega-c b a:hover{background:var(--ink);color:#fff;border-radius:8px}
[data-theme="rossko"] .mega-f a{border-radius:999px;text-transform:none;letter-spacing:0;font-size:13.5px}
[data-theme="rossko"] .sg{background:#fff;border:0;border-radius:var(--r);
  box-shadow:0 22px 48px rgba(20,22,26,.18);top:calc(100% + 9px);overflow:hidden}
[data-theme="rossko"] .sg-i .k{font-family:inherit}

/* ── КНОПКИ И ПОЛЯ ── */
[data-theme="rossko"] .btn{border-radius:999px;height:48px;padding:0 26px;font-family:inherit;
  font-weight:700;letter-spacing:0;text-transform:none;font-size:15px}
[data-theme="rossko"] .btn::before{display:none}
[data-theme="rossko"] .btn-s{height:40px;font-size:14px;padding:0 18px}
[data-theme="rossko"] .btn-g{border:1px solid var(--rule2);color:var(--chalk);background:#fff}
[data-theme="rossko"] .btn-g:hover{border-color:var(--ink);color:var(--ink)}
[data-theme="rossko"] .inp,[data-theme="rossko"] .sel{border-radius:12px;background:var(--sheet3);
  border:1px solid transparent;height:48px}
[data-theme="rossko"] .inp:focus{border-color:var(--ink);background:#fff}
[data-theme="rossko"] .qt{border-radius:999px;overflow:hidden;background:var(--sheet3);border:0}
[data-theme="rossko"] .chip{border-radius:999px;font-family:inherit;background:var(--sheet3);border:0}
[data-theme="rossko"] .vmode,[data-theme="rossko"] .tabs,[data-theme="rossko"] .gnav,
[data-theme="rossko"] .pay,[data-theme="rossko"] .seg{background:transparent;gap:8px;border:0}
[data-theme="rossko"] .vmode button,[data-theme="rossko"] .seg button{border-radius:999px;
  background:var(--sheet3);box-shadow:none;text-transform:none;letter-spacing:0;font-size:14px;
  font-weight:600;height:40px}
[data-theme="rossko"] .vmode button.on,[data-theme="rossko"] .seg button.on{background:var(--ink);color:#fff}
[data-theme="rossko"] .tabs button,[data-theme="rossko"] .gnav button{border-radius:999px;
  background:var(--sheet3);box-shadow:none;text-transform:none;letter-spacing:0;font-size:14px;
  font-weight:600}
[data-theme="rossko"] .tabs button.on,[data-theme="rossko"] .gnav button.on{background:var(--ink);color:#fff}
[data-theme="rossko"] .pay span{border-radius:999px;background:var(--sheet3);box-shadow:none;
  font-family:inherit;letter-spacing:0;font-weight:700;color:var(--chalk2)}
[data-theme="rossko"] .pay span.a{background:var(--ink);color:#fff}

/* ── КАРТОЧКИ ТОВАРА ── */
[data-theme="rossko"] .pgrid{background:transparent;border:0;gap:clamp(10px,1.2vw,18px)}
[data-theme="rossko"] .pc{background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:14px;transition:box-shadow .18s,transform .18s}
[data-theme="rossko"] .pc:hover{background:#fff;box-shadow:0 14px 32px rgba(20,22,26,.10);
  transform:translateY(-2px)}
[data-theme="rossko"] .well{border-radius:12px;background:var(--sheet3)}
[data-theme="rossko"] .tag{border-radius:999px;padding:4px 11px;font-family:inherit;font-weight:700;
  letter-spacing:0;text-transform:none;left:8px;top:8px;color:#fff;font-size:11px}
[data-theme="rossko"] .tag.o{background:var(--sheet4);color:var(--chalk2)}
[data-theme="rossko"] .tag.s{right:8px;left:auto}
[data-theme="rossko"] .tag.n,[data-theme="rossko"] .tag.fit{bottom:8px;top:auto}
[data-theme="rossko"] .tag.fit{color:#fff}
[data-theme="rossko"] .pc-n{font-size:14px;color:var(--chalk);font-weight:500}
[data-theme="rossko"] .pc-s,[data-theme="rossko"] .pc-t .p{font-family:inherit;font-size:12px}
[data-theme="rossko"] .pr-b{font-family:inherit;font-size:22px;font-weight:800;letter-spacing:-.03em}
[data-theme="rossko"] .pr-o{font-family:inherit}
[data-theme="rossko"] .yours{font-family:inherit;border-left-color:var(--ink);color:var(--ink)}
[data-theme="rossko"] .voidcell,[data-theme="rossko"] .pc.fill{border-radius:var(--r);
  background-image:none;background:var(--sheet3);border:0}
[data-theme="rossko"] .voidcell{display:none}
[data-theme="rossko"] .pc.fill b{text-transform:none}

/* ── ПАНЕЛИ, ФИЛЬТРЫ, ПОДВАЛ ── */
[data-theme="rossko"] .side,[data-theme="rossko"] .pnl,[data-theme="rossko"] .pnl2,
[data-theme="rossko"] .sumbox,[data-theme="rossko"] .buybox,[data-theme="rossko"] .cal,
[data-theme="rossko"] .crow,[data-theme="rossko"] .mapbox,[data-theme="rossko"] .rt-p{
  border:1px solid var(--rule);border-radius:var(--r);background:#fff}
[data-theme="rossko"] .rt-w{background:transparent;border:0;gap:clamp(12px,1.4vw,20px)}
[data-theme="rossko"] .empty{border-radius:var(--r);background:var(--sheet3);border:0}
[data-theme="rossko"] .fs>h3{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;
  color:var(--chalk)}
[data-theme="rossko"] .gcard{border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--rule)}
[data-theme="rossko"] .gar{background:transparent;border:0;gap:clamp(10px,1.2vw,18px)}
[data-theme="rossko"] .gcard .tx b{text-transform:none;font-size:15px}
[data-theme="rossko"] .gcard .tx span,[data-theme="rossko"] .gcard .tx em{font-family:inherit;font-size:12.5px}
[data-theme="rossko"] .ft{border-top:0;background:var(--sheet3);border-radius:var(--r2);
  padding:clamp(24px,3vw,44px);margin-top:clamp(30px,4vw,60px)}
[data-theme="rossko"] .ft h4{text-transform:none;letter-spacing:0;font-size:15px;font-weight:800;
  color:var(--chalk)}
[data-theme="rossko"] .ft li{font-family:inherit}
[data-theme="rossko"] .ft-tel{font-family:inherit;font-size:26px;color:var(--chalk)}
[data-theme="rossko"] .lg-i{background:var(--ink)}
[data-theme="rossko"] .mb{background:rgba(255,255,255,.97);border-top:1px solid var(--rule)}
[data-theme="rossko"] .mb a{border-left:0;text-transform:none;letter-spacing:0;font-size:10.5px;
  font-weight:600}
[data-theme="rossko"] .mb a[aria-current]{color:var(--ink)}
[data-theme="rossko"] .mb .n{background:var(--ink);color:#fff}
[data-theme="rossko"] .toast{border-radius:var(--r);border-color:var(--rule);background:#fff;
  box-shadow:0 20px 50px rgba(20,22,26,.2)}
[data-theme="rossko"] .toast i{border-radius:999px}
[data-theme="rossko"] .toast .tt span{font-family:inherit}

/* ── СХЕМА ПОДБОРА ── */
[data-theme="rossko"] .vp{border-radius:var(--r2);border:1px solid var(--rule);background:var(--sheet3)}
[data-theme="rossko"] .vp-vig{background:radial-gradient(120% 110% at 50% 46%,transparent 40%,
  rgba(255,255,255,.55) 78%,#fff 100%)}
[data-theme="rossko"] .vp-lb,[data-theme="rossko"] .vp-cr{background:rgba(255,255,255,.92);
  color:var(--chalk);font-family:inherit;font-weight:700;border-radius:999px;margin:10px;
  text-transform:none;letter-spacing:0}
[data-theme="rossko"] .hot i{box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(232,35,42,.25)}
[data-theme="rossko"] .hot:hover i,[data-theme="rossko"] .hot.on i{
  box-shadow:0 0 0 2px #fff,0 0 0 10px rgba(232,35,42,.3)}
[data-theme="rossko"] .hot b{color:var(--ink);text-shadow:0 1px 3px #fff}
[data-theme="rossko"] .picks.picks-s{border:0;background:transparent;gap:8px;mask-image:none}
[data-theme="rossko"] .picks.picks-s button{border-radius:999px;background:var(--sheet3);
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;padding:10px 18px}
[data-theme="rossko"] .picks.picks-s button.on{background:var(--ink);color:#fff}
[data-theme="rossko"] .un{border-bottom-color:var(--rule)}
[data-theme="rossko"] .un-t{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
[data-theme="rossko"] .un-n,[data-theme="rossko"] .un-c{font-family:inherit}
[data-theme="rossko"] .lead path{stroke:var(--ink)}

/* ── БЛОКИ ГЛАВНОЙ ── */
[data-theme="rossko"] .hs{border-top:0}
[data-theme="rossko"] .h-sec,[data-theme="rossko"] .h-hero{letter-spacing:-.035em}
[data-theme="rossko"] .h-hero em{color:var(--ink)}
[data-theme="rossko"] .kick{font-family:inherit;font-size:13.5px;color:var(--chalk2)}
[data-theme="rossko"] .trust{background:transparent;border:0;gap:clamp(8px,1vw,14px)}
[data-theme="rossko"] .trust li{background:var(--sheet3);border-radius:var(--r);padding:16px 18px}
[data-theme="rossko"] .trust b{font-family:inherit;font-size:20px}
[data-theme="rossko"] .trust span{font-size:12.5px}
[data-theme="rossko"] .tiles{background:transparent;border:0;gap:clamp(8px,1vw,14px)}
[data-theme="rossko"] .tiles a{background:var(--sheet3);border-radius:var(--r);padding:16px}
[data-theme="rossko"] .tiles a:hover{background:#fff;box-shadow:0 12px 28px rgba(20,22,26,.1)}
[data-theme="rossko"] .tiles .t-n{text-transform:none;font-size:15px}
[data-theme="rossko"] .tiles .t-s,[data-theme="rossko"] .tiles .t-c{font-family:inherit;font-size:12.5px}
[data-theme="rossko"] .tiles-more{margin-top:14px;border-radius:999px}
[data-theme="rossko"] .why b{text-transform:none;letter-spacing:0;font-size:15px}
[data-theme="rossko"] .qa summary{font-size:16px}
[data-theme="rossko"] .tiers-m{background:transparent;border:0;gap:8px}
[data-theme="rossko"] .tiers-m li{border-radius:12px;background:var(--sheet3)}
[data-theme="rossko"] .tiers-m .n{text-transform:none;letter-spacing:0;font-size:14px}
[data-theme="rossko"] .tiers-m .f,[data-theme="rossko"] .tiers-m .p{font-family:inherit}
[data-theme="rossko"] .dl-r b{text-transform:none;letter-spacing:0;font-size:14px}
[data-theme="rossko"] .dl-r em{font-family:inherit;border-radius:999px;background:var(--sheet3);border:0;
  padding:4px 10px}
[data-theme="rossko"] .map-links{background:transparent;border:0;gap:8px;margin-top:8px}
[data-theme="rossko"] .map-links a{background:var(--sheet3);border-radius:999px;text-transform:none;
  letter-spacing:0;font-size:14px;font-weight:600}
[data-theme="rossko"] .ct-l .k{text-transform:none;letter-spacing:0;font-size:13px}
[data-theme="rossko"] .ct-l .v small{font-family:inherit}

/* Шапка как на образце: первый ряд — логотип, широкий поиск, телефон,
   вход и корзина; меню разделов уходит во второй ряд той же плашки.
   Иначе на 1440 корзина не помещается, а поиск сжимается до «Поис». */
[data-theme="rossko"] .tb-in{flex-wrap:wrap;row-gap:10px;padding-block:12px;min-height:0}
[data-theme="rossko"] .tb-co{display:none}
[data-theme="rossko"] .fld{order:2;flex:1 1 240px}
[data-theme="rossko"] .tb-tel{order:3;text-align:right}
[data-theme="rossko"] .tb-nav{order:9;flex-basis:100%;gap:4px;overflow-x:auto;scrollbar-width:none;
  border-top:1px solid rgba(255,255,255,.22);padding-top:9px;margin-top:1px}
[data-theme="rossko"] .tb-nav::-webkit-scrollbar{display:none}
[data-theme="rossko"] .tb-nav a{padding:6px 10px;border-radius:999px}
[data-theme="rossko"] .tb-nav a:hover,[data-theme="rossko"] .tb-nav a[aria-current]{
  background:rgba(255,255,255,.16);text-decoration:none}
@media (max-width:1500px){ [data-theme="rossko"] .tb-nav a[href="faq.html"]{display:inline-block} }
@media (max-width:1340px){ [data-theme="rossko"] .tb-nav a[href="about.html"]{display:inline-block} }
@media (max-width:900px){
  [data-theme="rossko"] .tb{padding:8px 8px 4px}
  [data-theme="rossko"] .tb-in{border-radius:20px;padding-block:9px}
}
/* порядок как на образце: логотип · поиск · телефон · вход · корзина */
[data-theme="rossko"] .fld{order:1}
[data-theme="rossko"] .tb-tel{order:2;margin-left:auto}
[data-theme="rossko"] .tb-in>.ib{order:3}
[data-theme="rossko"] .tb-acc{order:4}
[data-theme="rossko"] .tb-cart{order:5}

/* на телефоне шапка складывается в два ряда: логотип с телефоном
   и корзиной сверху, поиск во всю ширину снизу */
@media (max-width:620px){
  [data-theme="rossko"] .tb-in{padding-block:9px;row-gap:9px}
  [data-theme="rossko"] .fld{order:9;flex-basis:100%;height:40px;padding:0 16px}
  [data-theme="rossko"] .tb-tel{order:2;font-size:14px;margin-left:auto;text-align:right}
  [data-theme="rossko"] .tb-tel small{display:none}
  [data-theme="rossko"] .tb-cart{order:3;font-size:0;gap:0;padding:0 13px;height:38px}
  [data-theme="rossko"] .tb-cart span{font-size:13px}
}

/* ── «Маркет · синий» ──────────────────────────────────────────────
   Стиль Росско дизайнеру подошёл, а красный цвет — под вопросом.
   Тот же макет в синем из логотипа Motaki: меняются только токены,
   ни одно правило вёрстки выше не дублируется. */
[data-theme="rossko"][data-accent="blue"]{
  --ink:#1F62D6; --ink2:#1F62D6; --ink-soft:rgba(31,98,214,.07);
  --amber:#1F62D6; --amber-tx:#FFFFFF; --amber-soft:rgba(31,98,214,.07);
  --red:#D93B3B; --red-soft:rgba(217,59,59,.08);
}