/*
Theme Name: MOD Product Quality
Theme URI: https://modesign.site
Author: MODesign
Author URI: https://modesign.site
Description: Разработка с нуля кастомной темы и плагинов для WordPress-сайта аналитики качества продукции на основе отзывов. Сайт включает каталог товаров с карточками (наименование, артикул, характеристики, 5-балльная шкала), генерацию QR-кодов для оставления отзывов по уникальной ссылке с подтверждением email, без регистрации. Для аналитика предусмотрен раздел с формированием отчетов по товарам, партиям, оценкам и отзывам за выбранный период.
Version: 1.0
Text Domain: mod-custom-theme
Requires PHP: 7.4
Requires at least: 6.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#primary {
    min-height: 60vh;
    margin-top: 10vh;
}

.card{width:360px;background:#fff;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:.3s;font-family:'Segoe UI',sans-serif;margin:20px auto;overflow:hidden;position:relative;cursor:pointer}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.15)}
.tilt{overflow:hidden}
.img{height:200px;overflow:hidden}
.img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .img img{transform:scale(1.05)}
.info{padding:20px}
.cat{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#71717A;margin-bottom:5px}
.title{font-size:18px;font-weight:700;color:#18181B;margin:0 0 10px;letter-spacing:-.5px}
.desc{font-size:13px;color:#52525B;line-height:1.4;margin-bottom:12px}
.feats{display:flex;gap:6px;margin-bottom:15px}
.feat{font-size:10px;background:#F4F4F5;color:#71717A;padding:3px 8px;border-radius:10px;font-weight:500}
.bottom{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.price{display:flex;flex-direction:column}
.new{font-size:20px;font-weight:700;color:#18181B}
.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F4F4F5;padding-top:12px}
.rating{display:flex;align-items:center;gap:2px}
.rcount{margin-left:6px;font-size:11px;color:#71717A}
@media (max-width:400px){.card{width:90%}.title{font-size:16px}.img{height:180px}.price{margin-bottom:5px}.}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.card-link:hover {
    text-decoration: none;
}