/* 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)}
/* 16.10.2026 (Антон): отступ от фото до цены — вдвое меньше; расстояния между строками — на 30 % меньше;
   слева от «Купить» — «В избранное» */
.vk-card__foto{margin-bottom:8px}
.vk-card__stroka{gap:4px 8px;margin-bottom:6px}
.vk-card__imya{line-height:1.25;min-height:calc(2 * 1.25em)}
.vk-card__niz{position:relative;z-index:2;display:flex;gap:8px;margin-top:8px}
.vk-card__niz .vk-card__kupit{flex:1;margin-top:0}
.vk-fav{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:10px;background:#f3f4f6;cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .15s}
.vk-fav svg{width:20px;height:20px;fill:none;stroke:#c96a00;stroke-width:1.9}
.vk-fav:hover{background:#e9ebee;box-shadow:0 6px 14px -6px rgba(51,55,62,.35);transform:translateY(-1px)}
.vk-fav.active svg{fill:#f48800;stroke:#f48800}
.vk-fav:focus-visible{outline:2px solid #f48800;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vk-fav:hover{transform:none}}
@media (max-width:760px){.vk-card__foto{margin-bottom:6px}.vk-card__stroka{gap:3px 6px}.vk-fav{width:40px;height:40px}}
/* рамка фокуса карточки — только при управлении с клавиатуры, не после клика мышью по сердечку/кнопке */
.vk-card:focus-within{outline:none}
.vk-card:has(:focus-visible){outline:2px solid #f48800;outline-offset:4px;border-radius:12px}
.vk-fav:focus-visible,.vk-card__kupit:focus-visible{outline:none}
/* 16.10.2026 (Антон): строки внутри карточки — как было; вместо этого на 30 % меньше расстояние между рядами карточек; сердце серое */
.vk-card__stroka{gap:6px 10px;margin-bottom:8px}
.vk-card__imya{line-height:1.35;min-height:calc(2 * 1.35em)}
.vk-card__niz{margin-top:12px}
.vk-grid{row-gap:22px!important}
@media (max-width:760px){.vk-card__stroka{gap:4px 8px}.vk-grid{row-gap:17px!important}}
.vk-fav svg{stroke:#80858d}
.vk-fav:hover svg{stroke:#5b606a}
.vk-fav.active svg{fill:#80858d;stroke:#80858d}
/* «Купить»: текст и значок — серые, в тон сердечку (Антон 16.10.2026) */
.vk-card__kupit{color:#4a4e56!important}
.vk-card__kupit svg{color:#80858d;stroke:#80858d}
.vk-card__kupit:hover{color:#33373e!important}
.vk-card__kupit:hover svg{color:#5b606a;stroke:#5b606a}
/* 16.10.2026 (Антон), пакет правок */
/* «Купить»: значок — жёлтый в тон кнопке, чуть ярче фона (контраст к #fff4d9 — 3,3:1, к фону наведения — 4:1); текст серый */
.vk-card__kupit svg{color:#b07d00;stroke:#b07d00}
.vk-card__kupit:hover svg{color:#8f6600;stroke:#8f6600}
/* название — 16 px, две строки */
.vk-card__imya{font-size:16px;line-height:1.3;min-height:calc(2 * 1.3em)}

/* строка подборок над витриной (макет f8-t10 «qs-filtry»): фильтрации на сайте нет — пункты ведут на страницы-подборки */
.vk-filtry{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;position:relative;z-index:5;font-family:Arial,Helvetica,sans-serif}
.vk-dd{position:relative;flex:none}
.vk-dd__btn{display:inline-flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 14px 0 16px;border:0;border-radius:12px;background:#f3f4f6;color:#33373e;font:400 16px Arial,Helvetica,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .15s}
.vk-dd__btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
.vk-dd__btn:hover{background:#eceef1}
.vk-dd__btn:focus-visible{outline:2px solid #f48800;outline-offset:2px}
.vk-dd__btn b{font-weight:700}
.vk-dd--tek .vk-dd__btn{background:#fff4d9;color:#6a4a00}
.vk-dd.is-open .vk-dd__btn{background:#ffeedd;color:#b35c00}
.vk-dd.is-open .vk-dd__btn svg{transform:rotate(180deg)}
.vk-dd__pop{display:none;position:absolute;top:52px;left:0;z-index:30;min-width:260px;max-height:min(420px,calc(100vh - 120px));overflow-y:auto;margin:0;padding:8px;list-style:none;border-radius:14px;background:#fff;
  box-shadow:0 14px 34px -12px rgba(51,55,62,.35),0 0 0 1px rgba(51,55,62,.06)}
.vk-dd.is-open .vk-dd__pop{display:block}
.vk-dd__pop li{margin:0;padding:0;list-style:none}
.vk-dd__pop li::before{content:none!important}
.vk-dd__pop a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;font-size:16px;line-height:1.25;color:#33373e!important;text-decoration:none!important;white-space:nowrap}
.vk-dd__pop a:hover,.vk-dd__pop a:focus-visible{background:#f6f7f8;color:#b35c00!important;outline:none}
.vk-dd__pop a[aria-current="page"]{background:#fff4d9;color:#6a4a00!important;font-weight:700}
@media (prefers-reduced-motion:reduce){.vk-dd__btn svg{transition:none}}
/* телефон: строка прокручивается вбок, страница не уезжает; окно — под кнопкой во всю ширину экрана (JS ставит top) */
@media (max-width:760px){
  .vk-filtry{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -15px 20px;padding:0 15px 2px}
  .vk-filtry::-webkit-scrollbar{display:none}
  .vk-dd__pop{position:fixed;left:12px!important;right:12px;top:auto;min-width:0;max-height:60vh}
}
/* фото карточки — по высоте миниатюр сетки (--vk-h ставит vid_setka(): памятники 335, ограды/цветники/вазы/гравировки 173) */
.vk-card__foto{height:calc(var(--vk-h,335px) + 20px)}
.vk-card__foto img{height:var(--vk-h,335px)}
@media (max-width:1180px){
.vk-card__foto{height:auto;aspect-ratio:173/var(--vk-hr,345)}
.vk-card__foto img{height:96%}
}
/* кнопки ряда — на одной линии, даже если у соседней карточки цена переносится на две строки */
.vk-card__niz{margin-top:auto;padding-top:12px}
/* 16.10.2026 (Антон): наведение на карточку — мягкая подложка и тень вокруг всей карточки */
.vk-card{isolation:isolate}
.vk-card::before{content:"";position:absolute;inset:-10px -10px -10px -10px;z-index:-1;border-radius:16px;background:#f7f7f8;box-shadow:0 10px 24px -14px rgba(51,55,62,.35);opacity:0;transition:opacity .18s}
.vk-card:hover::before{opacity:1}
.vk-card__foto{background:transparent}
.vk-card__foto img{mix-blend-mode:multiply}
@media (hover:none) and (pointer:coarse){.vk-card::before{display:none}}
/* значок корзины на «Купить» — цветом плашки «−15 %» */
.vk-card__kupit svg{color:#b35c00;stroke:#b35c00}
.vk-card__kupit:hover svg{color:#a85200;stroke:#a85200}
/* правило маркеров списка (content:none) перебивало подложку — поднимаем вес */
ul.vk-grid>li.vk-card::before{content:""!important;display:block!important}
@media (hover:none) and (pointer:coarse){ul.vk-grid>li.vk-card::before{display:none!important}}
/* слово «Купить» — того же цвета, что значок (цвет плашки «−15 %»), Антон 16.10.2026 */
.vk-card__kupit{color:#b35c00!important}
.vk-card__kupit:hover{color:#a85200!important}
