/* ========================================
   Sale Archive Page
   Based on Information Archive
======================================== */

/* ========================================
   Sale Archive Header
======================================== */
#sale_archive_header {
    height: 550px;
    position: relative;
    overflow: hidden;
    background: #fff;
    margin: 0 0 15px 0;
    width: 100%;
}

#sale_archive_header .header_image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#sale_archive_header .header_content {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 50px;
    box-sizing: border-box;
}

#sale_archive_header .headline {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 32px;
    line-height: 1.4;
    color: #fff;
    background: none !important;
    padding: 0;
    margin: 0 0 20px 0;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#sale_archive_header .desc {
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    max-width: 800px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#sale_archive_header .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* Full width layout (no sidebar) is handled by common classes, 
   but we can enforce specific sale archive padding here if needed */
#main_contents.sale_archive {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    padding-top: 15px !important;
    padding-bottom: 60px !important;
}

#main_contents.sale_archive #main_col {
    width: 100% !important;
    float: none !important;
    padding: 0;
}

/* Archive headline styling */
#sale_archive .design_headline {
    margin-bottom: 30px !important;
    text-align: center !important;
    background: #902130 !important;
    border: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    height: 44px;
    line-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sale_archive .design_headline.rich_font {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Hide potential icons */
#sale_archive .design_headline:before,
#sale_archive .design_headline:after {
    display: none !important;
}

/* Sale list layout */
#sale_list {
    width: 100%;
    /* PC Layout: Flex with margin based spacing */
    display: flex;
    flex-wrap: wrap;
    /* justify-content: flex-start aligns items to the left, easier for margin handling */
    justify-content: flex-start;
}

/* Base item style for PC (2 columns) */
#sale_list .item {
    display: block;
    width: 500px;
    /* User set to 500px */
    max-width: 100%;
    margin-bottom: 40px;
    /* Vertical gap 40px */
    margin-right: 80px;
    /* Horizontal gap 80px */
    padding-bottom: 0px;
    border-bottom: none;
}

/* Remove margin-right for every 2nd item (2 columns) */
#sale_list .item:nth-child(2n) {
    margin-right: 0;
}

#sale_list .item:last-child {
    border-bottom: none;
}

/* Link area */
#sale_list .link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Header Section (Date & Title) */
#sale_list .title_area {
    margin-bottom: 10px;
}

#sale_list .title_area_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

/* Date hidden globally */
#sale_list .date {
    display: none !important;
}

#sale_list .title {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    color: #333;
    transition: color 0.3s;
    text-align: center;
}

#sale_list .link:hover .title {
    color: #9d2235;
}

/* Content Section (Image) - mimicking information.css logic */
#sale_list .image_wrap {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    /* Needed for soldout label absolute positioning */
}

#sale_list .image {
    width: 100%;
    padding-top: 75%;
    /* 4:3 aspect ratio */
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    display: block;
}

#sale_list .soldout_label {
    position: absolute;
    top: 0;
    left: 0;
    background: #454545;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    z-index: 2;
    letter-spacing: 1px;
}

#sale_list .link:hover .image {
    transform: scale(1.05);
}

/* Clearfix for image float */
#sale_list .item::after {
    content: "";
    display: block;
    clear: both;
}

/* Responsive */

/* Tablet & Mobile (Below PC threshold)
   PC min-width needs approx: 500*2 + 80 + 40(padding) = 1120px 
   So below 1120px we should stack them. 
   Setting breakdown at 1100px for safety or stick to previous 1279px?
   Let's use 1100px.
*/
@media only screen and (max-width: 1120px) {
    #sale_list {
        display: block;
        /* Stack items vertically */
        justify-content: center;
    }

    #sale_list .item {
        width: 100%;
        /* Use available width or max 600px centered */
        max-width: 800px;
        margin: 0 auto 60px auto;
        /* Add margin as gap replacement */
        padding-bottom: 60px;
    }

    #sale_list .item:nth-child(2n) {
        margin-right: auto;
        /* Reset PC margin */
    }

    #sale_list .item:last-child {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }

    #sale_list .image_wrap {
        float: none;
        width: 100%;
    }
}

/* Tablet specific (if needed for header height etc) */
@media only screen and (max-width: 1024px) {
    #sale_archive_header {
        height: 450px;
    }
}

/* Mobile */
@media only screen and (max-width: 650px) {
    #sale_archive_header {
        height: 360px;
    }

    #main_contents.sale_archive {
        padding: 0 15px;
        padding-top: 15px !important;
        padding-bottom: 60px !important;
    }

    #sale_archive .design_headline {
        margin-bottom: 0 !important;
    }

    #sale_list {
        display: block;
        /* stack items */
        gap: 0;
    }

    #sale_list .item {
        width: 100%;
        /* full width */
        padding: 10px 0;
        margin-bottom: 0px;
    }

    #sale_list .item:last-child {
        border-bottom: none;
    }

    #sale_list .title_area_inner {
        flex-direction: column;
        gap: 10px;
    }

    #sale_list .title {
        font-size: 16px;
    }

    #sale_list .image_wrap {
        float: none;
        width: 100%;
    }
}

/* ========================================
   Sale Single Page
======================================== */

#main_contents.sale_single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px !important;
}

#main_contents.sale_single #main_col {
    width: 100% !important;
    float: none !important;
}

#main_contents.sale_single.noside #main_col {
    padding: 0;
}

@media only screen and (max-width: 900px) {
    #main_contents.sale_single.noside #main_col {
        padding: 0 30px !important;
    }
}

/* Title Area (Full Width Center) */
.sale_single #post_title_area {
    text-align: center;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

#sale_top_area {
    margin-bottom: 30px;
}

#sale_top_area .design_headline {
    margin-bottom: 30px !important;
    text-align: center !important;
    background: #902130 !important;
    color: #fff !important;
    padding: 10px 0 !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    width: 100%;
    display: block;
    line-height: normal;
    border: none;
}

.sale_single #post_title_area .title {
    font-size: 28px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    /* Adjusted to match image impression */
    margin-bottom: 10px;
}

.sale_single #post_title_area .post_meta {
    display: none;
    /* Hide categories/dates as per image */
}

/* 2-Column Product Area */
#sale_product_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

#sale_left_col {
    width: 58%;
    /* Roughly 6:4 ratio */
}

#sale_right_col {
    width: 38%;
}

/* Product Image */
#sale_left_col .main_image_wrap {
    position: relative;
    width: 100%;
    line-height: 0;
}

#sale_left_col .main_image_wrap img {
    width: 100%;
    height: auto;
    display: block;
}

#sale_left_col .soldout_label {
    position: absolute;
    top: 0;
    left: 0;
    background: #454545;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    z-index: 5;
    letter-spacing: 1.5px;
}

/* Product Description */
.sale_description_content {
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    color: #333;
}

.sale_description_content p {
    margin-bottom: 1em;
}

/* Contact Button */
.sale_contact_btn_wrap {
    margin: 30px 0;
    text-align: center;
}

.sale_contact_btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s;
    font-size: 14px;
    letter-spacing: 1px;
}

.sale_contact_btn:hover {
    opacity: 0.7;
}

/* Hide the gallery headline if not needed */
#sale_gallery_area .design_headline {
    display: none !important;
}

.gallery_grid {
    display: flex;
    flex-wrap: wrap;
    /* Small gap as per user image */
    justify-content: center;
}

/* Default (Top row / 3 columns) */
.gallery_item {
    width: calc(33.333%);
    /* 3 columns with 10px gap consideration */
    line-height: 0;
}

/* Bottom row (4th item onwards / 2 columns) */
.gallery_item:nth-child(n+4) {
    margin-top: 10px;
    width: calc(50%);
    /* 2 columns with gap consideration */
}

.gallery_link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery_link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    /* Assume consistent aspect ratio */
    transition: transform 0.5s ease;
}

.gallery_link:hover img {
    transform: scale(1.05);
}

/* Related Posts Area (BLOG) */
#sale_related_posts_area {
    margin-bottom: 30px;
    text-align: center;
}



.related_posts_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start;
    /* Changed to flex-start appropriately */
}

.related_item {
    width: calc(33.333% - 20px);
    margin-bottom: 0px;
    text-align: left;
}

.related_item a {
    text-decoration: none;
    color: #333;
    display: block;
}

.related_item .image {
    width: 100%;
    height: 0;
    padding-top: 65%;
    /* Aspect ratio */
    background-color: #eee;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.related_item .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related_item .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 10px;
    display: block;
}

.related_item .date {
    font-size: 12px;
    color: #888;
    display: block;
}

/* Responsive */
@media only screen and (max-width: 900px) {
    #sale_product_area {
        display: block;
    }

    #sale_left_col,
    #sale_right_col {
        width: 100%;
        margin-bottom: 40px;
    }

    .gallery_item {
        width: calc(50% - 5px);
        /* 2 columns on tablet */
    }

    .related_item {
        width: calc(50% - 15px);
        /* 2 columns on tablet */
    }
}

@media only screen and (max-width: 600px) {

    .gallery_item,
    .gallery_item:nth-child(n+4) {
        width: 100%;
        margin-top: 10px;
    }

    .related_item {
        width: 100%;
        /* 1 column on mobile */
    }

    .sale_single #post_title_area .title {
        font-size: 22px;
    }
}