/* 1. GLOBAL BACKGROUND AND CONTRAST */
body, 
.zc-body-content,
.zpstorecollection-container {
    background-color: #ffffff !important; 
}

/* 2. TARGET THE CUSTOM SECTION AND FORCE LIST LAYOUT */
/* Ensure the product section has the custom class: list-style-product */
.list-style-product .theme-prod-box {
    width: 100% !important; 
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. CONVERT THE CARD TO A HORIZONTAL LIST ITEM (WITH WHITE BACKGROUND) */
.list-style-product .theme-prod-box .theme-product-box-content {
    /* List styling: High contrast dark border, no shadow */
    border: 1px solid #343a40; /* Dark Grey/Black Border */
    box-shadow: none !important;
    background: #ffffff !important; 
    
    /* Layout */
    display: flex !important; 
    align-items: center; 
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    min-height: 120px;
}

/* 4. MAKE IMAGES SMALLER FOR FASTER LOADING & CLEANER LOOK */
.list-style-product .theme-prod-box .theme-product-image-area {
    width: 80px !important; 
    min-width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 20px;
    margin-bottom: 0 !important;
}

.list-style-product .theme-prod-box .theme-product-image-area img {
    width: 100% !important;
    height: 100% !important;
    max-height: 80px;
    object-fit: contain;
}





/* 5. STYLE TITLE AND BUTTONS (HIGH CONTRAST) */
.list-style-product .theme-product-details-area {
    flex-grow: 1; 
}



.list-style-product .theme-product-name a {
    /* Ensure the title has high contrast against the white background */
    color: #212529 !important; /* Very dark grey/black text */
    font-size: 1.1em;
    font-weight: 600;
}

/* --- THE VIEW DETAILS BUTTON FIX --- */
.theme-product-details {
    /* Use solid dark background with white text for maximum contrast */
    background-color: #343a40 !important; /* Solid Dark Grey/Black */
    color: #ffffff !important; /* White Text */
    
    /* Button appearance */
    border: 1px solid #343a40 !important;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0.9em;
    font-weight: bold;
    display: inline-block; 
    transition: background-color 0.2s; 
}

.theme-product-details:hover {
    /* Lighten slightly on hover for visual feedback */
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}



/* 1. GLOBAL BACKGROUND AND CONTRAST */
body, 
.zc-body-content,
.zpstorecollection-container {
    background-color: #ffffff !important; 
}

/* 2. TARGET THE CUSTOM SECTION AND FORCE LIST LAYOUT */
/* Ensure the product section has the custom class: list-style-product */
.list-style-product .theme-prod-box {
    width: 100% !important; 
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. CONVERT THE CARD TO A HORIZONTAL LIST ITEM (WITH WHITE BACKGROUND) */
.list-style-product .theme-prod-box .theme-product-box-content {
    /* List styling: High contrast dark border, no shadow */
    border: 1px solid #343a40; /* Dark Grey/Black Border */
    box-shadow: none !important;
    background: #ffffff !important; 
    
    /* Layout */
    display: flex !important; 
    align-items: center; 
    margin-bottom: 20px;
    padding: 15px;
    width: 100%;
    min-height: 120px;
}

/* 4. MAKE IMAGES SMALLER FOR FASTER LOADING & CLEANER LOOK */
.list-style-product .theme-prod-box .theme-product-image-area {
    width: 80px !important; 
    min-width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 20px;
    margin-bottom: 0 !important;
}

.list-style-product .theme-prod-box .theme-product-image-area img {
    width: 100% !important;
    height: 100% !important;
    max-height: 80px;
    object-fit: contain;
}





/* 5. STYLE TITLE AND BUTTONS (HIGH CONTRAST) */
.list-style-product .theme-product-details-area {
    flex-grow: 1; 
}



.list-style-product .theme-product-name a {
    /* Ensure the title has high contrast against the white background */
    color: #212529 !important; /* Very dark grey/black text */
    font-size: 1.1em;
    font-weight: 600;
}

/* --- THE VIEW DETAILS BUTTON FIX --- */
.theme-product-details {
    /* Use solid dark background with white text for maximum contrast */
    background-color: #343a40 !important; /* Solid Dark Grey/Black */
    color: #ffffff !important; /* White Text */
    
    /* Button appearance */
    border: 1px solid #343a40 !important;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0.9em;
    font-weight: bold;
    display: inline-block; 
    transition: background-color 0.2s; 
}