/*
 * MediRoyal Product Card — shared component for shop + all-products.
 * Depends on: design-tokens.css (--mr-* vars)
 * Price row, button & animations → mr-product-card-extra.css
 */

/* ── CARD CONTAINER ── */
.log-prod-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 24px);
    overflow: hidden;
    position: relative;
    transition: all .3s cubic-bezier(.34, 1.2, .64, 1);
    cursor: default;
}

.log-prod-card:hover {
    box-shadow: 0 30px 54px rgba(15, 28, 25, .2), 0 6px 18px rgba(15, 28, 25, .1);
    border-color: rgba(138, 106, 46, .4);
}

/* cursor-follow glow reveal on hover (--mx/--my set via JS mousemove) */
.log-prod-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(203, 168, 105, .16), transparent 55%);
    opacity: 0;
    transition: opacity .4s var(--ease);
    pointer-events: none;
    z-index: 2;
    z-index: 6;
}

.log-prod-card:hover::before {
    opacity: 1;
}

/* ── BADGES ── */
.log-prod-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.log-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    line-height: 1.3;
}

.log-badge--hot {
    background: var(--plum-700);
    color: #fff;
}

.log-badge--fast {
    background: linear-gradient(135deg, #ff6b35, #ff4500);
    color: #fff;
}

.log-badge--low {
    background: linear-gradient(135deg, #e67e00, #c96a00);
    color: #fff;
    animation: mr-pulse-badge 1.5s ease-in-out infinite;
}

.log-badge--new {
    background: linear-gradient(135deg, var(--mr-gold), var(--mr-gold-light));
    color: var(--plum-950);
}

.log-badge--popular {
    background: linear-gradient(135deg, var(--sage-500), var(--sage-700));
    color: #fff;
}

/* ── WISH ICON (static, links to product page — no wishlist behavior) ── */
.log-prod-wish {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    color: var(--ink-700);
    transition: all .25s var(--ease);
}

.log-prod-wish-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.log-prod-wish:hover {
    transform: scale(1.1);
}

.log-prod-wish.active.log-prod-wish--yith .yith-wcwl-icon-heart-outline {
    color: #fff;
}

/* ── IMAGE AREA ── */
.log-prod-img-wrap {
    background: linear-gradient(135deg, #f8f4ef, #ede4d8);
    height: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.log-prod-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(253, 248, 240, .3));
    pointer-events: none;
}

.log-prod-img-wrap img,
.log-prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
    z-index: 1;
}

.log-prod-card:hover .log-prod-img-wrap img,
.log-prod-card:hover .log-prod-img {
    transform: scale(1.14) translateY(-4px);
}

/* ── BODY ── */
.log-prod-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 16px 18px;
}

.log-prod-meta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--plum-700);
    margin-bottom: 4px;
}

.log-prod-name {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 6px;
    line-height: 1.35;
}

.log-prod-name a {
    color: inherit;
    text-decoration: none;
}

/* ── STARS ── */
.log-prod-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.log-stars {
    display: flex;
    gap: 2px;
}

.log-star-filled {
    color: var(--mr-gold, #C9A84C);
    font-size: 15px;
    line-height: 1;
}

.log-star-half {
    color: var(--mr-gold, #C9A84C);
    font-size: 15px;
    line-height: 1;
    opacity: .55;
}

.log-star-empty {
    color: var(--line, #E8D8C0);
    font-size: 15px;
    line-height: 1;
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
    .log-prod-img-wrap {
        height: 150px;
    }

    .log-prod-body {
        padding: 12px 14px 14px;
    }

    .log-prod-name {
        font-size: 14px;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .log-prod-stars {
        margin-bottom: 6px;
    }
}

@media (max-width: 600px) {
    .log-prod-wish {
        width: 24px;
        height: 24px;
        top: 8px;
        right: 8px;
    }

    .log-prod-wish-icon {
        width: 11px;
        height: 11px;
    }

    .log-prod-img-wrap {
        height: 120px;
    }

    .log-prod-body {
        padding: 10px 12px 12px;
    }

    .log-prod-name {
        font-size: 13px;
    }

    .log-prod-meta {
        font-size: 9px;
        margin-bottom: 3px;
    }
}

@media (max-width: 400px) {
    .log-review-count {
        display: none;
    }
}

.log-review-count {
    font-size: 12px;
    color: var(--gray-600);
    font-weight: 500;
}