/* ============================================================
   НИЛИНА АВТО — карточка шины
   подключается ПОСЛЕ styles.css И product.css (переиспользуем галерею/блок покупки)
   ============================================================ */

/* Фотографии шин показываем целиком, без искажения и обрезки. */
.gal-main .ph,
.gal-thumb img{ object-fit:contain; background:#fff; }

/* ---------- лента ключевых характеристик под H1 ---------- */
.tire-highlights{ display:flex; flex-wrap:wrap; gap:9px; margin:-6px 0 22px; }
.th-chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--ink);
}
.th-chip .si{ width:15px; height:15px; flex-shrink:0; color:var(--muted); }
.th-chip.size{ background:var(--brand-ink); color:#fff; border-color:var(--brand-ink); letter-spacing:.02em; }
.th-chip.season-summer{ background:#FBF0DD; border-color:#F0DEB8; color:#B57614; }
.th-chip.season-summer .si{ color:#B57614; }
.th-chip.season-winter{ background:#E4EEFB; border-color:#CBDFF6; color:#2A6FDB; }
.th-chip.season-winter .si{ color:#2A6FDB; }
.th-chip.season-allseason{ background:#E3F4EA; border-color:#C7E8D3; color:#1F8A5B; }
.th-chip.season-allseason .si{ color:#1F8A5B; }
.th-chip.rf{ border-color:var(--brand-ink); }

/* ---------- остаток протектора (в блоке покупки) ---------- */
.tread-block{ margin-top:18px; padding:16px; border-radius:var(--radius); background:var(--bg-soft); border:1px solid var(--line); }
.tread-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.tread-top .tl{ font-size:13px; color:var(--muted); font-weight:600; font-family:var(--font-head); }
.tread-top .tv{ font-family:var(--font-head); font-weight:800; font-size:17px; color:var(--ink); }
.tread-top .tv small{ font-size:12px; color:var(--faint); font-weight:600; }
.tread-meter{ height:9px; border-radius:5px; background:var(--line); overflow:hidden; }
.tread-meter i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 70%, #3BC47A)); }
.tread-note{ font-size:12px; color:var(--faint); margin-top:8px; }

/* ---------- выбор количества / комплекта ---------- */
.qty-block{ margin-top:18px; }
.qty-label{ font-size:13px; color:var(--muted); font-weight:600; font-family:var(--font-head); margin-bottom:9px; }
.qty-presets{ display:flex; gap:8px; margin-bottom:12px; }
.qty-presets button{
  flex:1; padding:10px 6px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--font-head); font-weight:700; font-size:13.5px; cursor:pointer; transition:all .14s; line-height:1.25;
}
.qty-presets button small{ display:block; font-weight:500; font-size:11px; color:var(--faint); margin-top:2px; }
.qty-presets button:hover{ border-color:#C7CFD6; }
.qty-presets button:disabled:not(.active){ background:#F3F5F7; border-color:#E1E5EA; color:#98A2AE; cursor:not-allowed; }
.qty-presets button:disabled:not(.active) small{ color:#A5AFBA; }
.qty-presets button:disabled:not(.active):hover{ border-color:#E1E5EA; }
.qty-presets button.active{ border-color:var(--red); background:var(--red-soft); color:var(--red); }
.qty-presets button.active small{ color:var(--red); }
.qty-stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; width:fit-content; }
.qty-stepper button{ width:44px; height:44px; background:#fff; border:0; color:var(--ink); font-size:20px; display:grid; place-items:center; cursor:pointer; transition:background .12s; }
.qty-stepper button:hover{ background:var(--bg-soft); color:var(--red); }
.qty-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.qty-stepper .qn{ min-width:54px; text-align:center; font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink); border-left:1px solid var(--line); border-right:1px solid var(--line); height:44px; display:grid; place-items:center; }

/* итог по количеству */
.buy-total{ margin-top:16px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.buy-total .bt-lbl{ font-size:13.5px; color:var(--muted); }
.buy-total .bt-sum{ font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--ink); letter-spacing:-.01em; }

.buy-avail{ font-size:13px; color:var(--green); font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.buy-avail svg{ flex-shrink:0; }

/* ---------- бейдж сезона в галерее ---------- */
.gal-main .season-tag{
  position:absolute; right:14px; top:14px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:6px; font-family:var(--font-head); font-weight:700; font-size:12px; box-shadow:var(--shadow-sm);
}
.gal-main .season-tag .si{ width:14px; height:14px; }
.season-tag.summer{ background:#FBF0DD; color:#B57614; }
.season-tag.winter{ background:#E4EEFB; color:#2A6FDB; }
.season-tag.allseason{ background:#E3F4EA; color:#1F8A5B; }

/* ---------- таблица применимости (по размеру) ---------- */
.fit-item.tire-fit{ grid-template-columns:1.4fr 1fr; }

@media (max-width:767px){
  .qty-presets{ flex-wrap:wrap; }
  .qty-presets button{ min-width:calc(50% - 4px); }
  .fit-item.tire-fit{ grid-template-columns:1fr; }
}