/**
 * 🎨 File: assets/css/daf-wishlist-page.css
 * Precision: 1400px Breakout, 4-Col Grid, Light Grey Theme, Sharp Balanced Cards.
 */

/* 🚀 1. GLOBAL PAGE STYLE (Background & Gaps) */
body.page-id-499, 
.daf-wishlist-main-wrapper {
    background-color: #f8f9fa !important; /* 🌫️ Light Grey Background */
}

/* 🏔️ Remove Theme Defaults & Fix Header Gap */
.hdaf-section-head, .hdaf-title-underline, .entry-header { 
    display: none !important; 
}

.hdaf-main, .site-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: transparent !important;
}

/* 🛑 Breakout Logic: Forces 1400px and 20px Top Gap */
.daf-wishlist-main-wrapper {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    display: flex;
    justify-content: center;
    /* 🏔️ Rendering cover 20px below header/breadcrumbs */
    padding-top: 20px !important; 
    box-sizing: border-box;
}

.daf-wishlist-container {
    width: 100% !important;
    max-width: 1400px !important;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 🏔️ Slim Hero Section */
.daf-wishlist-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 30px 45px !important;
    border-radius: 12px;
    color: #ffffff;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.daf-hero-content h1 {
    font-size: 32px !important;
    font-weight: 900;
    margin: 0 0 5px 0 !important;
    color: #ffffff !important;
    line-height: 1.1;
}

.daf-hero-content p {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

/* 🎯 2. PRODUCT GRID & LOOP BALANCE (4 Products Per Row) */

.daf-wishlist-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 🚀 Fixed 4 Products */
    gap: 30px !important;
    width: 100%;
    margin-bottom: 60px;
}

/* 🛡️ FIXING CARD BALANCE (Archive Sync) */

/* Remove Image Radius */
.daf-wishlist-grid-wrapper img {
    border-radius: 0 !important;
    width: 100%;
    height: auto;
    display: block;
}

/* Wishlist Icon Overlay Fix (Bringing it back on top of image) */
.daf-wishlist-grid-wrapper .daf-image-wishlist-wrapper {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 10;
}

.daf-wishlist-grid-wrapper .daf-wishlist-trigger {
    background: #ffffff !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Content Spacing (Title, Price, Meta) */
.daf-wishlist-grid-wrapper .daf-product-card-wrapper {
    background: #ffffff;
    border: 1px solid #eee;
}

.daf-wishlist-grid-wrapper h3,
.daf-wishlist-grid-wrapper .name {
    margin: 15px 0 8px 0 !important; /* 🛑 Title gap fixed */
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 15px;
}

.daf-wishlist-grid-wrapper .price,
.daf-wishlist-grid-wrapper .price-wrapper {
    padding: 0 15px 15px 15px;
    font-size: 18px !important;
    color: #8ac24a !important;
}

/* 🔗 3. FOOTER GAP FIX */
#colophon, .site-footer {
    margin-top: 0 !important;
    border-top: 1px solid #eee;
}

/* Responsive Logic */
@media (max-width: 1420px) {
    .daf-wishlist-container { max-width: 95% !important; }
}
@media (max-width: 1100px) {
    .daf-wishlist-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 850px) {
    .daf-wishlist-grid-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}