/* МебелеФ v3 — components/card.css. Сетка товаров и карточка: бейджи, статус, цена, рейтинг. */
/* Product grid + card */
.grid-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media(min-width:768px){.grid-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}}
@media(min-width:1280px){.grid-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:235px;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--space-4)*-1);padding:0 var(--space-4) var(--space-2)}
@media(min-width:1280px){.scroller{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);overflow:visible;margin:0;padding:0}}
.card{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--bg);scroll-snap-align:start}
@media(min-width:768px){.card{padding:var(--space-3);gap:var(--space-3)}}
.card__media{position:relative}
.card__media .ph{aspect-ratio:1}
.card__badges{position:absolute;top:10px;left:10px;display:flex;gap:var(--space-1)}
.card__actions{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.card__body{display:flex;flex-direction:column;gap:5px;padding:0 var(--space-1)}
/* Не меньше двух строк, но и не больше без нужды: короткие названия
   не делают карточку ниже соседних, длинные переносятся целиком.
   Обрезать название нельзя — решение владельца (см. CLAUDE.md).
   Ровный низ ряда даёт растяжка карточек, а не ограничение строк. */
.card__title{font-size:14px;line-height:1.35;font-weight:500;min-height:2.7em}
.card__title:hover{text-decoration:underline}
.card__foot{display:flex;flex-direction:column;gap:var(--space-1);padding:0 var(--space-1)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:4px 10px;border-radius:var(--radius-sm);background:var(--badge);color:var(--on-badge);font-size:12px;font-weight:700;line-height:16px}
.badge--accent{background:var(--accent);color:var(--on-accent)}
.badge--success{background:var(--success-soft);color:var(--success)}
.status{display:inline-flex;align-items:center;gap:var(--space-1);font-size:13px;font-weight:600;color:var(--success)}
.status .icon{width:16px;height:16px}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--space-2)}
.price__now{font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
@media(min-width:768px){.price__now{font-size:22px}}
.price__old{font-size:14px;color:var(--ink-muted);text-decoration:line-through}
.price--lg .price__now{font-size:30px;line-height:1.1}
.price--lg .price__old{font-size:16px}
.rating{display:inline-flex;align-items:center;gap:var(--space-1);font-size:13px;color:var(--ink-muted)}
.rating svg{width:14px;height:14px;fill:var(--star)}
.stars{display:inline-flex;gap:1px}
.stars svg.is-off{fill:var(--line)}
/* Медиа карточки: место квадратное, картинка вписывается целиком и без
   искажений — на сайте есть и вертикальные, и горизонтальные снимки. */
.card__img{display:block;position:relative;aspect-ratio:1;border-radius:var(--radius-lg);background:var(--bg);overflow:hidden}
.card__img img,.card__img .ph{position:absolute;inset:0;width:100%;height:100%;padding:var(--space-2);object-fit:contain;border-radius:inherit;background:none}
/* Галерея собрана скриптом: показан только кадр с .is-on */
.card__img.is-gal img{opacity:0}
.card__img.is-gal img.is-on{opacity:1}
/* Миниатюры кадров — сайдбаром слева от карточки, по наведению.
   Привязаны к .card__media и выровнены по низу фото: иначе колонка
   накрывала бы кнопки «Избранное» и «Сравнение» соседней карточки,
   они у неё в правом верхнем углу. Показываются только от 1024px —
   ниже боковой отступ контейнера 16px, и колонка ушла бы за край. */
.card__thumbs{position:absolute;bottom:0;right:100%;display:none;flex-direction:column;gap:5px;padding:var(--space-2);background:var(--bg);border:1px solid var(--line);border-right:0;border-radius:var(--radius-xl) 0 0 var(--radius-xl);box-shadow:var(--shadow-overlay)}
.card__thumb{width:36px;height:36px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer}
.card__thumb img{width:100%;height:100%;object-fit:contain}
.card__thumb[aria-current]{border-color:var(--ink)}
/* Низ карточки — кнопки и габариты. На тач-устройствах просто в потоке. */
.card__more{display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto}
.dims{display:flex;flex-direction:column;gap:3px;padding:var(--space-2) var(--space-1) var(--space-1);border-top:1px dashed var(--line)}
.dims>div{display:flex;align-items:baseline;gap:6px;font-size:13px;line-height:1.35}
.dims dt{min-width:78px;color:var(--ink-muted)}
.dims dt::after{content:":"}
.dims dd{margin:0;font-weight:600}
@media(hover:hover){
/* На мыши низ карточки выезжает панелью под ней — поверх соседей.
   Не display:none, а прозрачность: содержимое остаётся в дереве
   доступности, и панель раскрывается при переходе по Tab. */
.card__more{position:absolute;top:100%;left:-1px;right:-1px;margin:0;padding:0 var(--space-3) var(--space-3);gap:var(--space-3);background:var(--bg);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-xl) var(--radius-xl);box-shadow:var(--shadow-overlay);opacity:0;pointer-events:none;transition:opacity .12s}
.card__foot{padding:0}
.dims{padding:var(--space-2) 0 0}
.card:hover,.card:focus-within{z-index:3;box-shadow:var(--shadow-overlay);border-bottom-left-radius:0;border-bottom-right-radius:0}
.card:hover .card__more,.card:focus-within .card__more{opacity:1;pointer-events:auto}
/* В карусели выносные блоки обрезало бы горизонтальной прокруткой */
.scroller .card__more{position:static;margin-top:auto;padding:0;border:0;box-shadow:none;opacity:1;pointer-events:auto}
.scroller .dims{display:none}
@media(min-width:1280px){
.scroller .card__more{position:absolute;top:100%;left:-1px;right:-1px;margin:0;padding:0 var(--space-3) var(--space-3);border:1px solid var(--line);border-top:0;box-shadow:var(--shadow-overlay);opacity:0;pointer-events:none}
.scroller .dims{display:flex}
.scroller .card:hover .card__more,.scroller .card:focus-within .card__more{opacity:1;pointer-events:auto}
}
}
/* Колонка кадров: только там, где она помещается рядом с сеткой */
@media(hover:hover) and (min-width:1024px){
.card:hover .card__thumbs,.card:focus-within .card__thumbs{display:flex}
.scroller .card:hover .card__thumbs{display:none}
}
@media(hover:hover) and (min-width:1280px){
.scroller .card:hover .card__thumbs{display:flex}
}
/* Карточка: AJAX «В корзину» */
.card__foot .add_to_cart_button.loading{opacity:.6;pointer-events:none}
.card__foot .add_to_cart_button.added::after{content:" ✓"}
.card__foot .added_to_cart{display:inline-flex;justify-content:center;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
/* Карточки ряда одной высоты — низ сетки без ступенек. */
.card{height:100%}
/* Рейтинг есть не у всех товаров: место под строку резервируем всегда,
   иначе цена и название в соседних карточках стоят на разной высоте. */
.card__rate{display:block;min-height:1.25em}
.status--off{color:var(--ink-muted)}
.rating a{color:inherit}
.stars svg{width:14px;height:14px;fill:var(--star)}
.stars svg.is-off{fill:var(--line)}