/* 2Q Вид — единая карточка листингов (ORG-SITES-267). Собрано src/build_kartochka_css.py, не править вручную. */
/* Единая карточка товара в листингах и сетка (ORG-SITES-267, решение Антона 15.10.2026).
   Главная, «Похожие модели» / «Ранее смотрели», разделы каталога, поиск, избранное, просмотренные — один набор.
   Минимум 14 px (DESIGN.md 2q). Разметка — inc/kartochka.php, vid_kartochka(). */
.vk-spisok{margin:0 0 8px;clear:both}
.vk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 16px;list-style:none!important;margin:0!important;padding:0!important}
.vk-grid>li{list-style:none!important;margin:0!important;padding:0!important;background:none!important}
.vk-grid>li::before,.vk-grid>li::marker{content:none!important;display:none!important}
@media (max-width:1400px){.vk-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1180px){.vk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.vk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.vk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}}

.vk-card{position:relative;display:flex;flex-direction:column;min-width:0;font-family:Arial,sans-serif;text-align:left}
.vk-card__foto{display:grid;place-items:center;height:355px;margin:0 0 16px;background:#fff;border-radius:12px;overflow:hidden;text-decoration:none!important}
.vk-card__foto img{display:block;width:173px;height:335px;max-width:none;object-fit:contain;margin:auto}
@media (max-width:1180px){
.vk-card__foto{height:auto;aspect-ratio:173/345}
.vk-card__foto img{width:auto;height:96%;max-width:100%}
}

.vk-card__stroka{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;line-height:1.2}
.vk-card__cena{font-size:22px;font-weight:700;color:#33373e;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.vk-card__old{font-size:15px;font-weight:400;color:#80858d;white-space:nowrap;text-decoration:line-through;text-decoration-thickness:1px}
.vk-card__metki{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.vk-card__skidka{font-size:14px;font-weight:700;line-height:1.4;color:#b35c00;background:#ffeedd;border-radius:6px;padding:1px 6px}
.vk-card__art{font-size:14px;font-weight:400;color:#6b7079;letter-spacing:0}

.vk-card__imya{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:calc(2 * 1.35em);
  font-size:15px;line-height:1.35;font-weight:400!important;color:#33373e;text-decoration:none!important}
.vk-card__imya::after{content:"";position:absolute;inset:0;z-index:1}
.vk-card:hover .vk-card__imya{color:#c96a00}
.vk-card__imya:focus-visible{outline:none}
.vk-card:focus-within{outline:2px solid #f48800;outline-offset:4px;border-radius:12px}
.vk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){
.vk-card__foto{margin-bottom:12px}
.vk-card__stroka{gap:4px 8px}
.vk-card__cena{font-size:18px}
.vk-card__old{font-size:14px}
}

/* «Показать ещё» и номера страниц */
.vk-more{display:flex;margin-top:40px}
.vk-morebtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border-radius:14px;background:#f3f4f6;color:#33373e!important;font:700 17px Arial,sans-serif;text-decoration:none!important}
.vk-morebtn svg{width:20px;height:20px}
.vk-morebtn[aria-busy="true"]{opacity:.6;pointer-events:none}
@media (hover:hover){.vk-morebtn:hover{background:#ffeedd;color:#b35c00!important}}
.vk-pages{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-family:Arial,sans-serif}
.vk-pages__nums{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.vk-pages a,.vk-pages__nums span{min-width:44px;height:44px;display:grid;place-items:center;border-radius:12px;font-size:16px;font-weight:600;color:#4a4e56;background:#f3f4f6;text-decoration:none!important;cursor:pointer}
.vk-pages__nums span{background:none;cursor:default}
.vk-pages a:hover{background:#ffeedd;color:#b35c00}
.vk-pages a.on{background:#4a4e56;color:#fff;cursor:default}
.vk-pages__nav{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;padding:0 16px;background:#fff!important;box-shadow:inset 0 0 0 1.5px #e3e6ea}
.vk-pages__nav span{font-weight:700}
.vk-pages__nav svg{width:18px;height:18px}
.vk-pages__nav:first-child svg{transform:scaleX(-1)}
.vk-pages__nav[aria-disabled="true"]{opacity:.4;pointer-events:none}
@media (max-width:760px){
.vk-pages{flex-wrap:wrap}
.vk-pages__nums{order:-1;flex:1 1 100%;gap:4px}
}
@media (prefers-reduced-motion:reduce){.vk-card *{transition:none!important}}
/* «Купить» в листинге — обычным шрифтом, без «Избранного» (Антон 15.10.2026) */
.vk-card__kupit{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;margin-top:12px;border-radius:10px;background:#f48800;color:#fff!important;font-size:16px;font-weight:400;text-decoration:none!important}
.vk-card__kupit:hover{background:#d97800}
.vk-card__kupit svg{width:18px;height:18px}
@media (max-width:760px){.vk-card__kupit{height:40px;font-size:15px}}
/* «Купить» спокойнее: контурная, как «В 1 клик» на карточке товара (Антон 15.10.2026: «слишком яркая») */
.vk-card__kupit{background:#fff;color:#c96a00!important;box-shadow:inset 0 0 0 1.5px #f2a55a}
.vk-card__kupit:hover{background:#fff4e6;color:#b35c00!important;box-shadow:inset 0 0 0 1.5px #f48800}
/* «Купить» — заливка как у плашки «15 % скидка» в шапке, без рамки (Антон 15.10.2026) */
.vk-card__kupit{background:#fff4d9;color:#7a5600!important;box-shadow:none}
.vk-card__kupit:hover{background:#ffe9b3;color:#6a4a00!important;box-shadow:none}
/* наведение — как у плашки «15 %» в шапке (фон + рамка) и мягкая тень (Антон 15.10.2026) */
.vk-card__kupit{transition:background-color .15s,box-shadow .15s,transform .15s}
.vk-card__kupit:hover{background:#ffe7a8;color:#6a4a00!important;box-shadow:inset 0 0 0 1.5px #e0b44a,0 6px 14px -6px rgba(122,86,0,.45);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.vk-card__kupit:hover{transform:none}}
/* «Купить»: при наведении без затемняющей рамки — только фон и тень */
.vk-card__kupit:hover{box-shadow:0 6px 14px -6px rgba(122,86,0,.45)}
