/* ==========================================================================
   Premium WooCommerce Shop Loop Overhaul
   ========================================================================== */

/* 1. Global Container & Grid Architecture */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* Premium 3-Column layout */
    gap: 48px 24px !important; /* Breathing room between rows and cards */
    padding: 0 !important;
    margin: 32px 0 !important;
    list-style: none !important;
}

ul.products::before, 
ul.products::after { 
    display: none !important; 
    content: none !important;
}

/* Individual Card Structuring */
.premium-product-card {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

/* 2. Aspect-Ratio Locked Image Frame */
.product-image-frame {
    position: relative;
    width: 100%;
  
    overflow: hidden;
    background-color: #f7f7f7;
}

.product-image-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Elegant Zoom Animation on Card Hover */
.premium-product-card:hover .primary-product-img {
    transform: scale(1.03);
}

/* 3. Luxury Geometric Sale Badge */
.luxury-sale-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #000000 !important; /* Flat chic black label */
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 6px 14px !important;
    border-radius: 0px !important; /* Sharp edges */
    line-height: 1 !important;
    z-index: 3;
}

/* 4. Slide-up Add to Cart Action System */
.card-action-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    transform: translateY(102%); /* Hidden safely below the frame */
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 4;
}

/* Slide button up smoothly when customer hovers over card */
.premium-product-card:hover .card-action-overlay {
    transform: translateY(0);
}

/* Refining the default WooCommerce button into an elegant CTA */
.card-action-overlay .button.add_to_cart_button {
    width: 100% !important;
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 14px 20px !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.card-action-overlay .button.add_to_cart_button:hover {
    background: #111111 !important;
    color: #ffffff !important;
}

/* 5. Details and Typography Layout */
.product-meta-details {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Asymmetric clean left alignment */
    text-align: left;
}

.product-collection-label {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888888;
    margin-bottom: 6px;
}

.product-title-heading {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

.product-title-heading a {
    font-family: "Playfair Display", "Didot", serif; /* Elegant fashion typography */
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease;
}

.product-title-heading a:hover {
    color: #777777 !important;
}

/* Pricing Presentation Adjustments */
.product-price-container .price {
    font-family: "Montserrat", sans-serif;
    font-size: 14px !important;
    color: #111111 !important;
    font-weight: 500 !important;
    display: block;
}

/* Strikethrough text styling for standard retail price */
.product-price-container .price del {
    color: #aaaaaa !important;
    font-weight: 300 !important;
    margin-right: 8px;
    display: inline-block;
}

/* Actual current active sale price text styling */
.product-price-container .price ins {
    text-decoration: none !important;
    color: #a30000 !important; /* Premium dark crimson accent tint */
    font-weight: 600 !important;
    display: inline-block;
}

/* 6. Mobile Responsiveness / Tablet Layout Media Engine */
@media (max-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2-Columns on tablets */
        gap: 32px 16px !important;
    }
}

@media (max-width: 600px) {
    ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Keep clean dual columns on phone view */
        gap: 24px 12px !important;
    }
    
    .card-action-overlay {
        position: relative !important;
        transform: translateY(0) !important;
        padding: 8px 0 0 0 !important;
        background: transparent !important;
    }
    
    .card-action-overlay .button.add_to_cart_button {
        padding: 10px 12px !important;
        font-size: 10px !important;
    }
    
    .product-title-heading a {
        font-size: 14px !important;
    }
}