/* ==========================================================================
   Единая карточка товара (каталог, главная, страница поиска)
   Разметка: article.card > .cover-wrap(.badge-new, img.cover-main, img.cover-hover)
             + .card-body + .card-actions
   ========================================================================== */

.cards-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:1199.98px){ .cards-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:640px){ .cards-grid{ grid-template-columns:1fr } }

.card{
    display:flex;
    flex-direction:column;
    border:1px solid rgba(17,17,17,.1);
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 18px 48px rgba(0,0,0,.06);
}
.card .cover-wrap{
    position:relative;
    width:100%; height:320px;
    overflow:hidden; border-radius:0;
}
.card .cover{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; background:#f5eae5;
    transition:opacity .4s ease;
}
.card .cover-main{ opacity:1; }
.card .cover-hover{ opacity:0; }
.card:hover .cover-main{ opacity:0; }
.card:hover .cover-hover{ opacity:1; }

.card .card-body{ padding:14px 16px; flex:1; }
.card .card-title{ margin:0 0 4px; font-weight:500; font-size:20px; }
.card .card-meta{ font-size:12px; color:#777; }
.card .card-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.card .tag{ border:1px solid rgba(17,17,17,.1); border-radius:999px; padding:4px 8px; font-size:11px; color:#777; }
.card .tag-green{
    background:#c0ef82; color:#222; border:none;
    border-radius:20px; padding:5px 10px; font-weight:400;
}
.card .tag-outline{
    border:none; background:#f3f3f5 !important;
    border-radius:20px; font-weight:400; padding:6px 14px; color:#111;
}
.card .mxd-pinned__tags{ gap:5px !important; }

.card .card-actions{
    display:flex; gap:10px; padding:16px; margin-top:auto; align-items:center;
}
.card .btn1{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:12px; padding:10px 12px; border:1px solid rgba(17,17,17,.1);
    cursor:pointer; text-decoration:none;
}
.card .btn-accent{
    font-size:13px; background:#000; color:#fff;
    border-radius:6px; padding:20px 15px; line-height:25px; height:25px;
}
.card .btn-outline2{
    font-size:13px; background:#000; color:#fff;
    border-radius:6px; padding:20px 15px; line-height:25px; height:25px;
}

/* ==========================================================================
   Бейдж «Новинка»: минималистичная тёмная пилюля с пульсирующей точкой,
   бликом раз в несколько секунд и мягким появлением
   ========================================================================== */
.badge-new{
    position:absolute; top:12px; left:12px; z-index:2;
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 12px; border-radius:999px;
    background:rgba(17,17,17,.88); color:#fff;
    font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    line-height:1;
    overflow:hidden; isolation:isolate;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    pointer-events:none;
    animation:badge-in .55s cubic-bezier(.18,.9,.32,1.3) both;
}
.badge-new::before{
    content:""; flex:0 0 auto;
    width:6px; height:6px; border-radius:50%;
    background:#b6ff7a;
    box-shadow:0 0 0 0 rgba(182,255,122,.7);
    animation:badge-pulse 2s ease-out infinite;
}
.badge-new::after{
    content:""; position:absolute; top:0; left:-70%;
    width:45%; height:100%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
    transform:skewX(-20deg);
    animation:badge-shine 3.6s ease-in-out infinite;
}
@keyframes badge-in{
    from{ opacity:0; transform:translateY(-6px) scale(.75); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes badge-pulse{
    0%{ box-shadow:0 0 0 0 rgba(182,255,122,.7); }
    70%{ box-shadow:0 0 0 7px rgba(182,255,122,0); }
    100%{ box-shadow:0 0 0 0 rgba(182,255,122,0); }
}
@keyframes badge-shine{
    0%, 55%{ left:-70%; }
    85%, 100%{ left:140%; }
}
@media (prefers-reduced-motion: reduce){
    .badge-new, .badge-new::before, .badge-new::after{ animation:none; }
}