/* Оформление «Карбон»: тёмная шапка и главный экран с фактурой углеволокна,
   гоночные полосы, наклонный сжатый шрифт. Подключается поверх styles.css,
   когда в админке выбрано «Оформление: Карбон» (настройка theme).
   Откат к прежнему виду — «Классическое» в админке, этот файл просто не подключается. */

/* ---------- Основа: тёмная шапка, главный экран, карточки ---------- */
:root { --accent: #1a8cff; --primary: #0d1117; --line: #dde1e6; --radius: 8px; }
body { background: #eceef1; background-image: none; }

.site-header { background: #0d1117; border-bottom: 3px solid var(--accent); backdrop-filter: none; }
.logo-text { color: #fff; }
.logo-accent { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); }
.main-nav a { color: #9aa4b2; text-transform: uppercase; font-size: 13px; letter-spacing: .8px; border-radius: 4px; }
.main-nav a:hover { color: #fff; }
.main-nav a.active { background: var(--accent); color: #fff; }
.contacts-btn { background: transparent; color: #fff; border-color: #2b3340; border-radius: 6px; }
.cart-btn { background: var(--accent); border-radius: 6px; box-shadow: none; }
.cart-count { color: #0d1117; }

.hero {
  background: #0d1117; animation: none; padding: 56px 0 84px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.035) 46px 58px),
    radial-gradient(circle at 85% 30%, rgba(26,140,255,.35), transparent 55%);
}
.hero-inner { position: relative; }
.hero h1 { font-size: 56px; letter-spacing: 1px; }
.hero h1::after { content: ""; display: block; width: 84px; height: 6px; background: var(--accent); margin-top: 16px; transform: skewX(-20deg); }
.hero-h1-sub { color: var(--accent); }
.hero-lead { color: #b9c2cf; }
.hero-btn { border-radius: 6px; text-transform: uppercase; letter-spacing: .6px; font-size: 14px; }
.hero-btn.main { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(26,140,255,.35); }
.hero-btn.ghost { border-color: #3a4352; }
.hero-perks li::before { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.8' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-radius: 3px; }
.hero-perks { color: #b9c2cf; }
.promo-frame { border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.promo-dot.active, .hero .promo-dot.active { background: var(--accent); }

.filter-panel { border-radius: 8px; border: none; border-left: 5px solid var(--accent); box-shadow: 0 10px 30px rgba(13,17,23,.12); margin-top: -26px; position: relative; }
.filter-title { background: none; -webkit-text-fill-color: #0d1117; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; }
.brands-link { border-radius: 6px; color: #0d1117; border-color: #0d1117; }
.filter-field select, .filter-search input[type="search"] { border-radius: 6px; }
.filter-field label { text-transform: uppercase; letter-spacing: .6px; font-size: 11px; }
.reset-btn { border-radius: 6px; }

.card { border-radius: 8px; border: none; box-shadow: 0 2px 8px rgba(13,17,23,.06); }
.card::before { height: 4px; background: var(--accent); }
.card:hover { box-shadow: 0 16px 34px rgba(13,17,23,.16); }
.card-brand { color: var(--accent); }
.card-model { font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; font-size: 19px; }
.badge { border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.card-img .badge { box-shadow: none; }
.badge.winter { background: #0d1117; color: #7cc0ff; }
.badge.summer { background: #0d1117; color: #ffb27a; }
.badge.allseason { background: #0d1117; color: #8ee6b0; }
.size-select, .size-one { border-radius: 6px; }
.price, .price .byn { color: #0d1117; }
.price { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 26px; }
.qty-picker { border-radius: 6px; }
.btn.add { background: #0d1117; border-radius: 6px; box-shadow: none; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; }
.btn.add:hover:not(:disabled) { background: var(--accent); }
.page-btn { border-radius: 6px; }
.page-btn.active { background: #0d1117; }

.site-footer { background: #0d1117; border-top: 3px solid var(--accent); }
.foot-logo .logo-accent { background: none; -webkit-text-fill-color: var(--accent); }
.about-block { border-radius: 8px; }

/* ---------- Фактура карбона, гоночные полосы, наклонный шрифт ---------- */
.site-header { background: #121212; border-bottom: 3px solid var(--accent); }
.hero, .site-footer {
  background-color: #131313;
  background-image:
    linear-gradient(27deg, #151515 5px, transparent 5px), linear-gradient(207deg, #151515 5px, transparent 5px),
    linear-gradient(27deg, #222 5px, transparent 5px), linear-gradient(207deg, #222 5px, transparent 5px),
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  background-size: 20px 20px;
}
/* две гоночные полосы через весь экран */
.hero::before {
  background: linear-gradient(105deg, transparent 0 58%, var(--accent) 58% 62%, transparent 62% 63.2%, #fff 63.2% 64.4%, transparent 64.4%);
  opacity: .9;
}
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(0,0,0,.0), rgba(0,0,0,.55)); pointer-events: none; }
.hero-inner { z-index: 1; }
.hero h1, .hero-h1-sub, .filter-title, .card-model, .price { font-style: italic; }
.hero h1::after { background: linear-gradient(90deg, var(--accent) 0 70%, #fff 70%); }
.btn.add, .hero-btn { font-style: italic; }
.card::before { background: linear-gradient(90deg, var(--accent) 0 80%, #fff 80% 84%, var(--accent) 84%); }

/* ---------- Кнопки и формы: корзина, заказ, запись, «Перезвоните мне», «Спасибо», 404 ---------- */
/* Главные действия — синие, прописными наклонными, как «Подобрать шины» */
.btn.primary, .contacts-callback, .call-phones a, .ty-phones a, .nf-links a.primary {
  background: var(--accent); color: #fff; border-radius: 6px; box-shadow: 0 8px 20px rgba(26,140,255,.3);
  text-transform: uppercase; letter-spacing: .6px; font-style: italic;
}
.btn.primary:hover:not(:disabled), .contacts-callback:hover, .call-phones a:hover, .ty-phones a:hover, .nf-links a.primary:hover {
  background: #0b74e0; filter: none; box-shadow: 0 10px 24px rgba(26,140,255,.4);
}
/* «В корзину» во всплывающей карточке — как на карточке каталога */
.btn.add, .btn.add.primary { background: #0d1117; box-shadow: none; }
.btn.add:hover:not(:disabled), .btn.add.primary:hover:not(:disabled) { background: var(--accent); }
.btn, .reset-btn, .icon-btn, .ty-links a, .nf-links a, .empty .btn { border-radius: 6px; }
.ty-links a:hover, .nf-links a:hover { border-color: var(--accent); }
.icon-btn { background: #eef0f3; color: #0d1117; }
.icon-btn:hover { background: #e2e5ea; }

/* Заголовки корзины и окон — сжатым наклонным шрифтом, без градиента */
.drawer-head h2 {
  background: none; -webkit-text-fill-color: #0d1117; color: #0d1117;
  font-family: "Oswald", sans-serif; font-style: italic; text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.modal, .drawer { border-radius: 10px; }
.drawer { border-radius: 0; }
.modal::before { background: linear-gradient(90deg, var(--accent) 0 80%, #0d1117 80% 84%, var(--accent) 84%); }
.modal input, .form-card input, .form-card select, .form-card textarea { border-radius: 6px; }
.modal input:focus { border-color: var(--accent); }

/* Корзина */
.cart-total, .cart-item-price, .order-total .ot-row.main b { color: #0d1117; }
.cart-total { font-family: "Oswald", sans-serif; font-style: italic; font-weight: 600; font-size: 24px; }
.cart-item-img { border-radius: 6px; }
.to-set { border-radius: 4px; border-color: var(--accent); background: #eef6ff; color: #0b74e0; }
.cart-empty-ico { background: #eef0f3; color: var(--accent); }

/* Оформление заказа: доставка и оплата */
.dlv-opt { border-radius: 6px; }
.dlv-opt:has(input:checked) { border-color: var(--accent); background: #eef6ff; box-shadow: inset 4px 0 0 var(--accent); }
.order-total { border-radius: 6px; }

/* Запись на шиномонтаж */
.svc, .form-card, .ok-box { border-radius: 8px; }
.form-card { border-top: 4px solid var(--accent); }
.svc:hover { border-color: var(--accent); }
.svc-choose .chk { border-radius: 6px; }
.svc-choose .chk:has(input:checked) { border-color: var(--accent); background: #eef6ff; }

/* Мелочи в тон */
.contacts-panel { border-radius: 8px; }
.detail-more summary { background: none; -webkit-text-fill-color: var(--accent); }
.empty .btn:not(.primary) { background: #eef0f3; color: #0d1117; }

/* ---------- Ноутбуки и планшеты ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 44px; }
  .main-nav a { letter-spacing: .3px; padding: 8px 10px; }
}
@media (max-width: 900px) {
  .main-nav { flex-wrap: nowrap; }
  .main-nav a { font-size: 12px; padding: 7px 8px; }
}

/* ---------- Телефоны ---------- */
@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .hero { padding-top: 26px; padding-bottom: 50px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }
  .filter-panel { margin-top: -10px; }
}