/* === Product Card 抽牌 & 立體傾斜效果 === */
.product-card {
    border-radius: 1rem;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s, filter .45s;
    transform-style: preserve-3d; /* 3D */
    will-change: transform;
    overflow: hidden;
}

    /* 進場抬升 + 陰影 */
    .product-card:hover {
        transform: perspective(1100px) translateY(-8px) scale(1.02) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
        box-shadow: 0 18px 55px rgba(0,0,0,.45);
        border-color: rgba(255,255,255,.12);
    }

    /* 圖片微縮放 */
    .product-card img {
        transition: transform .6s ease;
        transform-origin: center center;
    }

    .product-card:hover img {
        transform: scale(1.04) translateZ(0);
    }

    /* 高光/光暈（跟滑鼠移動） */
    .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: radial-gradient(500px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), rgba(255,255,255,.15), transparent 40%), linear-gradient(120deg, rgba(255,255,255,.06), transparent 60%);
        opacity: 0;
        transition: opacity .25s ease;
        mix-blend-mode: screen;
    }

    .product-card.hovering::before {
        opacity: .9;
    }

    /* badge 微浮起（可選） */
    .product-card .badge {
        transform: translateZ(30px);
    }

/* 無障礙：減少動效時只做微抬升 */
@media (prefers-reduced-motion: reduce) {
    .product-card, .product-card * {
        transition: none !important;
    }

        .product-card:hover {
            transform: translateY(-4px);
        }
}



/*=====================調整圖片一致性大小========================*/
/* 統一 Product Card 內圖片大小（僅新增，不改其他） */
.product-card > img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 需要 4:3 可改成 4 / 3；正方改 1 / 1 */
    height: auto; /* 由 aspect-ratio 自動算出高度 */
    object-fit: cover; /* 填滿並等比裁切 */
    display: block;
}

/* Fallback：舊瀏覽器不支援 aspect-ratio 時用固定高度 */
@supports not (aspect-ratio: 1) {
    .product-card > img {
        height: 240px;
    }
    /* 視覺想更高可調這裡 */
}

/*（可選）桌機再高一點 */
@media (min-width: 992px) {
    .product-card > img {
        height: 260px;
    }
}
/*=======================================================*/