/* app/static/css/items.css — стили каталога запчастей */
:root{
  --radius: 14px;
}
/* --radius: 14px; */

.container{ max-width: 1100px; margin: 0 auto; padding: 16px; }
.container--narrow{ max-width: 1120px; }

.page-header{ margin: 8px 0 16px; }
.page-title{ margin: 0 0 4px; }
.muted{ color: #6b7280;}

/* Панель фильтрации */
.catalog-toolbar{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  background: #f9fafb;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.field{ display: grid; gap: 6px; }
.field-label, .field-label_eng { font-size: 0.85rem; color: #374151; }
.field-label_eng{visibility: hidden;}
.select, .input{
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

/* Кнопки двигателя */
.engine-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.engine-group .btn{
  color: black;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
}
.engine-group .btn.is-active{
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}

/* Сетка карточек */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1024px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .catalog-toolbar{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
}

/* Карточка */
.card{
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex; flex-direction: column;
}
.card-media{ display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.card-badge{
  position: absolute; left: 10px; top: 10px;
  background: rgba(17,24,39,.85); color: #fff; font-size: .75rem;
  padding: 4px 8px; border-radius: 8px;
}
.card-body{ padding: 12px; display: grid; gap: 10px; }
.card-title{height: 3rem; margin: 0; font-size: 1.05rem; line-height: 1.3; }
.card-actions{ display: flex; gap: 8px; justify-content: space-between; }
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: 10px; border: 1px solid #d1d5db; background: #fff; cursor: pointer;
  text-decoration: none; color: inherit;
}
.btn:hover{ background: #f3f4f6; }
.btn-primary{ background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-sm{ padding: 6px 10px; font-size: .9rem; }

/* Хлебные крошки */
.bbreadcrumbs, .breadcrumbs{ display: flex; gap: 6px; align-items: center; margin: 8px 0 16px; font-size: .9rem; color: #6b7280; }
.breadcrumbs .crumb{ color: inherit; text-decoration: none; }
.breadcrumbs .is-current{ color: #111827; }

/* Детальная */
.part-detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .part-detail{ grid-template-columns: 1fr; }
}
.detail-media{background: #fff; border:1px solid #e5e7eb; border-radius: var(--radius); overflow: hidden; max-height: 350px;}
.gallery-main{ aspect-ratio: 4/3; background: #0b0b0b; display:flex; align-items:center; justify-content:center; }
.gallery-main img{ width:100%; height:100%; object-fit: contain; background:#111827; }
.gallery-thumbs{ display:flex; gap:8px; padding:8px; border-top:1px solid #e5e7eb; overflow:auto; }
.gallery-thumbs img{ width:72px; height:72px; object-fit: cover; border-radius: 10px; cursor:pointer; }

.part-desc{grid-column: 1/3;}

.detail-info{ display: grid; gap: 12px; }
.part-title{ margin: 0; }
.part-short{ color:#374151; }
.tag{
  display:inline-flex; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:.8rem; margin-bottom:6px;
}
.app-list{ display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:4px 0 0; list-style:none; }
.app-list li{ padding:6px 10px; background:#f3f4f6; border-radius:999px; border:1px solid #e5e7eb; }

.spec-table{ width:100%; border-collapse: collapse; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; margin: 6px 0 10px; }
.spec-table caption{ text-align:left; padding:8px 10px; background:#f9fafb; font-weight:600; }
.spec-table th, .spec-table td{ padding:8px 10px; border-top:1px solid #e5e7eb; }
.spec-table th{ width:35%; color:#374151; background:#fcfcfd; }

.prose{ line-height:1.55; }
.buy-card{
  border:1px solid #e5e7eb; border-radius: var(--radius); padding: 12px; background:#fff;
  display:grid; gap:10px;
}
.buy-title{ margin: 0; }
.buy-form{ display:grid; gap:10px; max-width: 560px; }
.form-actions{ display:flex; gap:8px; }


select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f1f1f1;
}