/* Стили карточки товара morvexlab.com — тема `sport`.

   Куда подключать: файл стилей карточки товара темы `sport` (страница типа
   записи `products`). Правила должны идти после стилей темы — они перебивают
   `.content-data-item{display:flex}`, иначе текст вкладки сожмётся в колонку.

   Значения проверены на живой странице в превью `превью-карточек.js`,
   менять их не нужно. Разделы ниже идут в том же порядке, что шесть пунктов
   раздела «Правки шаблона карточки» в ТЗ.

   Файл собран скриптом `tools/card_css.py` из превью: правку вносить в превью,
   затем пересобрать файл, чтобы страница и стили не разъезжались. */

/* 1. Хлебные крошки над h1 — блок div.mv-crumbs первым элементом в .single-trade-data */
.mv-crumbs{font-size:15px;color:#6e727a;margin:0 0 14px}
.mv-crumbs a{color:#6081A1;text-decoration:none}
.mv-crumbs span{margin:0 7px;color:#b9bec6}

/* 2. Рубрики под h1 — ссылками на /?products_cat=<слаг>, а не слитым текстом */
.single-trade-data .mv-cats a{color:#6081A1;text-decoration:none;border-bottom:1px solid #cfd8e2}

/* 3. Содержимое вкладок и таблицы — display:block вместо flex темы;
   .mv-tw — обёртка вокруг каждой table, даёт боковую прокрутку на телефоне */
.content-data-item{display:block;font-family:Gilroy,"Segoe UI",sans-serif;font-size:16.5px;line-height:1.65;color:#3c4048}
.mv-under{display:block}
.content-data-item table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:15.5px}
.content-data-item th{background:#38526B;color:#fff;text-align:left;padding:10px 14px}
.content-data-item td{border-bottom:1px solid #e6e8ec;padding:10px 14px;vertical-align:top}
.content-data-item td,.content-data-item th{overflow-wrap:anywhere;word-break:break-word}
.content-data-item p,.content-data-item li{overflow-wrap:anywhere}
.content-data-item tr:nth-child(even) td{background:#fafbfc}
.content-data-item h2{font-size:27px;margin:30px 0 12px}
.content-data-item h2:first-child{margin-top:0}
.content-data-item h3{font-size:19px;margin:22px 0 8px}
.content-data-item p{margin:0 0 15px;font-size:16.5px;line-height:1.65;color:#3c4048}
.content-data-item li{font-size:16.5px;line-height:1.6}
.content-data-item ul,.content-data-item ol{margin:0 0 16px;padding-left:22px}
.content-data-item li{margin-bottom:7px}
.content-data-item a{color:#38526B}
.mv-tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 4. Сетка вкладок — шесть кнопок в три колонки; две колонки на телефоне ниже, в @media */
.tabs-data{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tabs-data > div{margin:0;text-align:center}

/* 5. Врезка «Как использовать?» — блок div.mv-use сразу после .single-btns */
.mv-use{margin:20px 0 0;padding:16px 20px;background:#f4f7f9;border-radius:14px;font-family:Gilroy,"Segoe UI",sans-serif;font-size:15.5px;line-height:1.5;color:#3c4048}
.mv-use b.mv-use-h{display:block;font-size:16.5px;color:#19181f;margin-bottom:7px}
.mv-use a{color:#38526B;font-weight:700;border-bottom:1px solid #b6c6d4;text-decoration:none;white-space:nowrap}

/* 6. Блок под вкладками div.content-data-item.mv-under —
   вопросы и ответы, статус материала, источники, строка доставки */
.mv-under{margin-top:28px;padding-top:8px;border-top:1px solid #e6e8ec}
.mv-faq{margin:14px 0 8px;border-top:1px solid #e6e8ec}
.mv-q{border-bottom:1px solid #e6e8ec;padding:0}
.mv-q summary{list-style:none;cursor:pointer;padding:16px 44px 16px 0;position:relative;font-weight:700;font-size:17px;color:#19181f}
.mv-q summary::-webkit-details-marker{display:none}
.mv-q summary::after{content:"+";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-weight:400;font-size:24px;line-height:1;color:#6081A1}
.mv-q[open] summary::after{content:"−"}
.mv-q summary:hover{color:#38526B}
.mv-a{padding:0 44px 18px 0;color:#3c4048}
.mv-a p:last-child{margin-bottom:0}
.mv-src{margin:18px 0;padding:14px 18px;border:1px solid #e6e8ec;border-radius:12px}
.mv-src summary{cursor:pointer;font-weight:700;color:#38526B;font-size:15px}
.mv-src ol,.mv-src ul{margin:12px 0 0;padding-left:20px}
.mv-src li,.content-data-item .mv-src li{font-size:13.5px;line-height:1.5;color:#6e727a;margin-bottom:5px}
.mv-src a{font-size:13.5px}
.mv-delivery{margin:22px 0 0;padding-top:16px;border-top:1px solid #e6e8ec;color:#6e727a;font-size:15px}

/* Мобильный: всё, что меняется на ширине до 640 px */
@media (max-width:640px){
  .tabs-data{grid-template-columns:repeat(2,1fr);gap:8px;max-width:100%;min-width:0}
  .single-data-wrapper,.content-data,.content-data-item{max-width:100%;min-width:0;overflow-x:clip}
  .tabs-data > div{white-space:normal;font-size:14.5px;padding:12px 8px;line-height:1.25}
  .mv-use{padding:14px 16px;font-size:15px;margin-bottom:0}
  .single-trade-wrapper{padding-bottom:0;margin-bottom:0}
  .mv-q summary{font-size:16px;padding-right:38px}
  .mv-a{padding-right:0}
  .content-data-item table{font-size:14px}
  .content-data-item td,.content-data-item th{padding:8px 10px}
  .single-trade-data .mv-cats{display:none}
}

/* Необязательное: свёртка длинных вкладок — обрезка по высоте
   и кнопка «Читать подробнее» (функция clampBlock в превью) */
.mv-cut{position:relative;overflow:hidden}
.mv-cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 92%)}
.mv-more{display:block;margin:14px auto 0;padding:13px 30px;border:1px solid #d7dbe1;border-radius:14px;background:#fff;cursor:pointer;font:700 15.5px/1 Gilroy,"Segoe UI",sans-serif;color:#38526B}
.mv-more:hover{border-color:#6081A1}