/* css/wishlist.css */

#wishlist-page-content {
    background-color: #EAE4DD; /* Figma: fill_9IHIMZ */
    color: #000000; /* Figma: fill_H6FLFU */
    padding: 20px 40px; /* Increase the left and right margins to match the appearance of the design draft */
    font-family: 'Poppins', sans-serif;
    /* display: none; /* Controlled by JS */
    min-height: calc(100vh - 80px); /* Assuming the height of the navigation bar is approximately80px, Ensure that the content at least fills the viewport */
    box-sizing: border-box;
    width: 100%; /* Ensure it takes full available width */
}

.wishlist-header {
    margin-bottom: 40px; /* Increase the bottom spacing */
    max-width: 1200px; /* Try a larger maximum width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px; /* Padding for centered content */
    box-sizing: border-box;
}

.wishlist-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.wishlist-back-btn,
.wishlist-shopping-bag-icon {
    width: 24px; /* according toFigmaAppearance of icons in design drafts，Appropriately increase - Unified as24px */
    height: 24px; /* - Unified as24px */
    cursor: pointer;
    object-fit: contain; /* Ensure complete display of icon content */
    vertical-align: middle; /* Attempt to align */
}

/* Ensure that the return button uses properties defined by a generic class separately，Although there are alreadywidth/height, But the general category takes priority */
.wishlist-back-btn {
    /* .common-back-button-img Class already existsHTMLChinese application，Will inherit its style */
}

.wishlist-header h2 {
    font-family: 'Inter', sans-serif; 
    font-weight: 400; 
    font-size: 36px;  /* Figma: 40px, Adjust to36px */
    margin: 0 auto; /* Title centered */
    text-align: center; /* Ensure that the text is centered */
}

.wishlist-main-content {
    max-width: 1000px; /* The maximum width of the product list area */
    margin: 0 auto; /* Center the main content (items list) */
    padding: 0 15px; /* Padding for centered content */
    box-sizing: border-box;
}

.wishlist-items-container {
    display: grid;
    grid-template-columns: 1fr; /* Each product item occupies one line */
    gap: 25px; /* The spacing between product items */
}

.wishlist-item {
    background-color: #FFFFFF; 
    border-radius: 10px; 
    padding: 20px; /* Increase the inner margin */
    display: flex;
    align-items: center; /* Change to center alignment，Because the items in the design draft appear to be vertically centered */
    gap: 25px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Slightly darken the shadow */
}

/* newly added：Set clear dimensions and prevent shrinkage for image containers */
.wishlist-item-image-container {
    width: 180px; /* according toFigmaDesign draft，The proportion of image area is larger */
    height: 180px;
    flex-shrink: 0; /* Prevent image containers from being damagedflexCompressed in layout */
    display: flex; /* Alignment for internal images */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensure that any excess parts of the image are cropped */
    border-radius: 10px; /* giveFigmaThe card has consistent rounded corners */
}

.wishlist-item-image {
    /* width: 100px;  Now controlled by the container */
    /* height: 100px; Now controlled by the container */
    max-width: 100%; /* Ensure that the image does not exceed the container */
    max-height: 100%;
    object-fit: cover; /* maintaincoverTo fill in，But now the container size is fixed */
    border-radius: 10px; /* Add rounded corners to the image as well，Although the container hasoverflow hidden */
}

.wishlist-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Try to center the content vertically */
    /* min-height: 180px; /* No longer needed，Because of the parent level align-items: center */
}

.wishlist-item-details h3 {
    font-family: 'Poppins', sans-serif; 
    font-weight: 500; /* Figma Poppins 400, But visually, it can be slightly heavier */
    font-size: 22px;  /* Figma Poppins 40px is too large for list, using 22px */
    margin: 0 0 10px 0; 
    line-height: 1.3;
}

.wishlist-item-details .price {
    font-family: 'Poppins', sans-serif; 
    font-weight: 400;
    font-size: 18px; /* Increase price font */
    margin: 0 0 20px 0; 
    color: #333; 
}

.wishlist-item-remove-btn {
    background-color: #D5CCC6; 
    color: #000000;
    border: none;
    padding: 10px 20px; /* Increase the inner margin of the button */
    border-radius: 25px; /* Increase rounded corners */
    cursor: pointer;
    font-family: 'Inter', sans-serif; /* giveFigmaConsistent button font */
    font-size: 14px; /* Maintain or slightly increase */
    font-weight: 500;
    align-self: flex-start; 
    /* margin-top: auto;  No longer needed with details flex center */
}
.wishlist-item-remove-btn:hover {
    background-color: #c0b8b2;
}

.wishlist-empty-message {
    text-align: center;
    font-size: 20px;
    color: #555;
    padding: 80px 20px; 
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    min-height: 200px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.wishlist-footer {
    max-width: 1000px; 
    margin: 20px auto 0 auto; /* Reduce and Above summary The spacing */
    text-align: center;
    padding: 0 15px 30px 15px; 
    box-sizing: border-box;
}

/* newly added：Shopping cart conversion area style */
.wishlist-summary {
    max-width: 1000px; /* Consistent with the width of the main content area and footer */
    margin: 40px auto 0 auto; /* Distance from the product list above */
    padding: 20px 15px;    /* padding */
    background-color: #FFFFFF; /* Can you provide a background color，If it is necessary to distinguish it from the main background of the page */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    box-sizing: border-box;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.summary-line:last-of-type {
    margin-bottom: 25px; /* The distance between the total row and the button should be larger */
}

.summary-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px; /* Figma: Subtotal 36px, Total 48px. Adjusted for context */
    color: #333;
}

.summary-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* The values can be slightly coarser */
    font-size: 18px;
    color: #000000;
}

.summary-label-total {
    font-weight: 600; /* Total Thicker tags */
    font-size: 22px; /* Total Larger labels and values */
}

.summary-value-total {
    font-weight: 600;
    font-size: 22px;
}

.summary-divider {
    border: none;
    border-top: 1px solid #E0E0E0; /* Figma: stroke_KSW02S is #000000, using a lighter one */
    margin: 10px 0 20px 0; /* Up and down spacing */
}

.checkout-btn {
    display: block; /* Fill the entire row */
    width: 100%;
    background-color: #51393A; /* deep background，giveFigmaThe color of the rectangles in the middle is close or consistent */
    color: #FFFFFF; /* Text in white */
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Figma: 600, Button text doesn't need to be so thick */
    font-size: 20px;  /* Figma: 64px, Significantly adjusted to more commonly used button font sizes */
    border: none;
    padding: 15px 20px;
    border-radius: 10px; /* Figma: 20px, Adaptation adjustment */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.checkout-btn:hover {
    background-color: #3e2d2d; /* Dark button hover effect */
}

.wishlist-continue-shopping-btn {
    background-color: #D5CCC6; /* Figma: fill_NDNWO6 */
    color: #000000; 
    font-family: 'Inter', sans-serif; /* Figma: style_TIDW98 */
    font-weight: 500; 
    font-size: 20px;  /* Figma: 48px, adjusted to 20px */
    border: none;
    padding: 15px 40px; /* Increase the inner margin */
    border-radius: 999px; /* Figma: borderRadius */
    cursor: pointer;
    transition: background-color 0.3s;
}

.wishlist-continue-shopping-btn:hover {
    background-color: #c0b8b2;
}

/* Styling for the heart icons themselves if needed beyond simple src swap */
.wishlist-toggle-icon {
    width: 24px; 
    height: 24px;
    cursor: pointer;
    vertical-align: middle; /* Align with other icons if they are text/spans */
}