/* ==========================================================================
   CARDS & IMAGES STYLES
   ========================================================================== */

/* --- KHUNG ẢNH CƠ BẢN --- */
.card-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

/* Wrapper của Spectra */
.card-image figure,
.card-image .wp-block-image,
.card-image .wp-block-uagb-image {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Ảnh */
.card-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Hover zoom */
.card-product:hover .card-image img {
    transform: scale(1.1);
}

/* --- ABOUT IMAGE --- */
.about-image {
    height: 480px;
    width: 100%;
    overflow: hidden;
}

.about-image .wp-block-uagb-image,
.about-image figure,
.about-image img {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
}

.about-image img {
    object-fit: cover;
    display: block;
}

/* --- COLLECTION CARD --- */
/* 1. ĐỊNH DẠNG KÍCH THƯỚC & BỐ CỤC KHUNG VUÔNG */
.collection-card {
    aspect-ratio: 1 / 1 !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;     
    overflow: hidden !important;        
    
    background-size: 120% auto !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: background-size 0.5s ease-in-out !important; 
}

/* 2. HIỆU ỨNG ZOOM ẢNH NỀN KHI HOVER */
.collection-card:hover {
    background-size: 135% auto !important; 
}

/* 3. FIX NỘI DUNG KHÔNG BỊ CHÌM */
.collection-card > .uagb-container-inner-blocks {
    z-index: 2;
    position: relative;
    width: 100%;
    text-align: center;
}

/* --- HIỆU ỨNG LỚP PHỦ TRẮNG (OVERLAY) KHI HOVER CHO card-product --- */
.card-product .card-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); /* Trong suốt khi ở trạng thái bình thường */
    transition: background-color 0.4s ease; /* Thời gian chuyển đổi mượt mà */
    z-index: 1; /* Nằm đè lên trên thẻ img */
    pointer-events: none; /* Đảm bảo người dùng vẫn click được vào link bên dưới */
}

/* Kích hoạt lớp phủ màu trắng khi hover vào card */
.card-product:hover .card-image::after {
    background-color: rgba(255, 255, 255, 0.25); /* Màu trắng với độ mờ 25% */
}