/* ============================================================
   SHOP 상품 카드 프리미엄 오버라이드
   ------------------------------------------------------------
   반드시 head 의 "마지막" 스타일시트로 로드한다.
   shop-live.css / shop-final.min.css / v2-interactions.css 의
   !important 규칙을 동일 특이성 + 후순위 로드로 덮어쓰는 파일.
   기능/DOM/노출 로직 무변경 — 카드 시각 규칙만 여기서 최종 결정.
   ============================================================ */

/* ---------- 1) HOVER: 카드는 고정, 이미지만 확대 ---------- */

.v2live-card,
.v2live-card:hover,
.v2live-card:active,
.v2live-card:focus-visible{
    transform:none !important;
    will-change:auto !important;
    transition:border-color .25s ease, box-shadow .25s ease !important;
}

/* 확대된 이미지가 카드 밖으로 새지 않도록 이중 안전장치 */
.v2live-card{ overflow:hidden !important; }
.v2live-card-image{
    overflow:hidden !important;
    aspect-ratio:1 / 1 !important;
}

.v2live-card-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:none;
    transition:transform .55s cubic-bezier(.22,.61,.36,1) !important;
}

@media (hover:hover) and (pointer:fine){
    /* 카드 자체는 미세한 톤 변화만 — 위치/크기 이동 없음 */
    .v2live-card:hover{
        border-color:#d8d3cb !important;
        box-shadow:0 10px 26px rgba(0,0,0,.07) !important;
    }
    .v2live-card:hover .v2live-card-image img{
        transform:scale(1.06) !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .v2live-card-image img{ transition:none !important; }
    .v2live-card:hover .v2live-card-image img{ transform:none !important; }
}

/* ---------- 2) 타이포그래피: 브랜드 / 상품명 / 가격 ---------- */

/* 브랜드 — 작고 또렷하게, 자간을 넓혀 하이엔드 레이블 느낌 */
.v2live-card-brand{
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#111 !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
}

/* 상품명 — 과한 굵기 제거, 2줄 고정 클램프로 높이 안정화 */
.v2live-card-title{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    margin-top:5px !important;
    min-height:35px !important;          /* 12px × 1.45 × 2줄 */
    color:#555 !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    letter-spacing:-.01em !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
}

/* 가격 — 명확한 강조, 장식 없이 무게만 */
.v2live-card-price{
    display:block !important;
    margin-top:7px !important;
    color:#111 !important;
    font-size:13.5px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    font-variant-numeric:tabular-nums;
}

.v2live-card-sub{
    color:#a3a3a3 !important;
    font-size:9px !important;
    font-weight:400 !important;
}

/* ---------- 3) 그리드: 모바일 2열 / 태블릿 3열 / PC 4열 ---------- */

/* 기본(모바일) 2열 */
.v2live-products{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    align-items:stretch !important;
}

/* 태블릿 3열 */
@media (min-width:601px) and (max-width:1023px){
    .v2live-products{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    }
    .v2live-card-brand{ font-size:10px !important; }
    .v2live-card-title{ font-size:12.5px !important; min-height:37px !important; }
    .v2live-card-price{ font-size:14px !important; }
}

/* PC 4열 — 1500px 이상에서도 4열 유지 */
@media (min-width:1024px){
    .v2live-products{
        grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    }
    .v2live-card-brand{ font-size:11px !important; letter-spacing:.14em !important; }
    .v2live-card-title{
        font-size:13.5px !important;
        line-height:1.5 !important;
        min-height:41px !important;      /* 13.5px × 1.5 × 2줄 */
    }
    .v2live-card-price{ font-size:15px !important; }
    .v2live-card-sub{ font-size:10px !important; }
}