/*
Theme Name:   Serein Child Theme
Theme URI:    https://serein-kyoto.com
Description:  Minimalist WooCommerce theme for Serein (Storefront Child) - Pachman Inspired High-End Fine-Tuning
Author:       Antigravity
Template:     storefront
Version:      1.4.0
*/

/* -------------------------------------------------------------------------
 * Basic Reset & Color System
 * ------------------------------------------------------------------------- */

body {
    background-color: #F9F9F9 !important; /* Refined Off-white */
    color: #333333 !important;
    font-family: 'Noto Serif JP', serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.8;
}

/* Typography Overrides */
h1, h2, h3, h4, .brand-label, .uppercase-label {
    font-family: 'Jost', sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.25em !important;
    text-transform: uppercase;
}

.price, .accent-serif {
    font-family: 'Bodoni Moda', serif !important;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.05em;
}

/* Remove standard borders from forms and buttons */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    border: none !important;
    border-bottom: 1px solid #ddd !important; /* Thinner line */
    border-radius: 0 !important;
    padding: 1.2rem 0 !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    color: #333 !important;
}

/* -------------------------------------------------------------------------
 * Header & Navigation
 * ------------------------------------------------------------------------- */

#serein-header {
    background-color: rgba(249, 249, 249, 0.98) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #f0f0f0 !important;
}

#serein-header a, #serein-header button {
    color: #333 !important;
}

/* -------------------------------------------------------------------------
 * Single Product Page (Fine-Tuning Layout)
 * ------------------------------------------------------------------------- */

.single-product .site-main {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 24px !important; /* Zero top padding */
}

@media (min-width: 1024px) {
    /* Pachman Style 3-Column Layout */
    .single-product div.product {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 60px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    /* Column 1: Main Image Gallery */
    .woocommerce-product-gallery {
        display: flex !important;
        flex-direction: column !important;
        width: 50% !important;
        max-width: 650px !important;
        margin: 0 !important;
    }

    .woocommerce-product-gallery__wrapper,
    .flex-viewport {
        display: block !important;
        margin: 0 !important;
        order: 1 !important;
    }

    /* Custom Thumbnails Below Main Image */
    .serein-custom-thumbs {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        width: 100% !important;
        margin: 20px 0 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
        order: 2 !important;
    }

    .serein-custom-thumbs li {
        width: calc(20% - 12px) !important;
        aspect-ratio: 1/1 !important;
        cursor: pointer !important;
        opacity: 0.5;
        transition: opacity 0.3s ease;
        overflow: hidden !important;
    }

    .serein-custom-thumbs li img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .serein-custom-thumbs li.active {
        opacity: 1;
        border-bottom: 2px solid #000;
    }

    .woocommerce-product-gallery__image {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Right: Product Summary (Sticky) */
    .summary.entry-summary {
        position: sticky !important;
        top: 120px !important;
        width: 380px !important;
        min-width: 380px !important;
        padding-left: 40px !important;
        margin: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .summary.entry-summary h1.product_title {
        font-family: 'Jost', sans-serif !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }

    .summary.entry-summary .price {
        font-family: 'Jost', sans-serif !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        color: #000 !important;
        margin-bottom: 30px !important;
    }
}

/* Breadcrumbs (Pachman Style) */
.woocommerce-breadcrumb {
    font-family: 'Jost', sans-serif !important;
    font-size: 10px !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 20px !important; /* Reduced from 40px */
    padding: 0 !important;
}

.woocommerce-breadcrumb a {
    color: #999 !important;
}

/* Mobile Tweaks */
@media (max-width: 1023px) {
    #primary .site-main .summary.entry-summary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }
}

/* Images: Forced Vertical Stack (Overriding Plugins like YITH) */
.woocommerce-product-gallery {
    width: 100% !important;
    opacity: 1 !important;
}

.woocommerce-product-gallery__wrapper, 
.images, 
.yith_magnifier_zoom_wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

/* Hide zoom UI elements if any */
.yith_magnifier_zoom_magnifier, 
.yith_magnifier_zoom_icon,
.yith_magnifier_mousetrap,
.flex-control-nav, 
.thumbnails {
    display: none !important;
}

    .woocommerce-product-gallery__image {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        max-height: 85vh !important;
    }

    .woocommerce-product-gallery__image > a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce-product-gallery__image img, 
    .yith_magnifier_zoom_wrap img {
        width: 100% !important;
        height: auto !important;
        border: none !important;
    }

/* Fix zoom image if it exists to maintain standard zoom behavior */
.woocommerce-product-gallery__image img.zoomImg {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    object-fit: none !important;
}

/* Product Information (Summary) */
.single-product .summary .brand-label {
    font-size: 10px !important;
    color: #bbb !important;
    margin-bottom: 25px !important;
    display: block !important;
    letter-spacing: 0.5em !important;
}

.single-product .summary .product_title {
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    font-size: 26px !important; /* More modern sizing */
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 0.1em !important;
    color: #111 !important;
    text-transform: none; /* Reference uses normal case or mix */
}

.single-product .summary .price {
    font-family: 'Jost', sans-serif !important;
    font-size: 16px !important;
    color: #333 !important;
    margin-bottom: 4rem !important;
    display: block !important;
    font-style: normal !important;
}

/* Variations Selection (Determ Swatches Style) */
.variations_form {
    border-top: 1px solid #eee;
    padding-top: 30px;
    margin-top: 30px;
}

.variations {
    margin-bottom: 2rem !important;
}

.variations label {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 1rem !important;
    text-transform: uppercase;
}

.variations select {
    display: block !important; /* Keep for functionality but style it */
    width: 100% !important;
    border: 1px solid #eee !important;
    padding: 15px !important;
    font-size: 12px !important;
    background-color: #fff !important;
}

/* Add to Cart Button (Refined Pachman) */
#primary .site-main .single_add_to_cart_button {
    background-color: #f6f6f6 !important;
    color: #444 !important;
    width: 100% !important;
    padding: 22px !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    margin-top: 20px !important;
}

#primary .site-main .single_add_to_cart_button:hover {
    background-color: #000 !important;
    color: #fff !important;
}

/* Buy Now Button */
#primary .site-main .woocommerce-payment-button__button {
    background-color: #000 !important;
    color: #fff !important;
    width: 100% !important;
    padding: 22px !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    border: none !important;
    border-top: 1px solid #000 !important; /* Visual link */
    border-radius: 0 !important;
    margin-top: 10px !important;
}

/* Custom Accordion (Ultra Thin Lines) */
.product-accordion-wrapper {
    margin-top: 60px;
    border-top: 1px solid #eee;
}

.serein-accordion-item {
    border-bottom: 1px solid #eee;
}

.serein-accordion-trigger {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    padding: 25px 0 !important;
    color: #333;
    text-transform: uppercase;
}

.serein-accordion-trigger:hover {
    color: #000;
}

.serein-accordion-content {
    font-family: 'Noto Serif JP', serif;
    color: #666;
    line-height: 1.8;
    font-size: 13px;
}

/* -------------------------------------------------------------------------
 * Mobile Optimization (Horizontal Snap Slider)
 * ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .single-product .site-main {
        padding: 0 24px 180px !important; /* Zero top padding */
    }

    .woocommerce-product-gallery__wrapper, 
    .images, 
    .yith_magnifier_zoom_wrap {
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 0 !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-product-gallery__wrapper::-webkit-scrollbar,
    .yith_magnifier_zoom_wrap::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-product-gallery__image, 
    .yith_magnifier_zoom_wrap a {
        min-width: 100% !important;
        scroll-snap-align: start !important;
    }

    .single-product .summary .product_title {
        font-size: 2rem !important;
    }

    .single-product .summary .price {
        margin-bottom: 4rem !important;
    }
}

/* -------------------------------------------------------------------------
 * Archive / Grid
 * ------------------------------------------------------------------------- */

ul.products {
    gap: 120px 60px !important;
}

ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    color: #222 !important;
}

ul.products li.product .price {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic;
    font-size: 13px !important;
    color: #777 !important;
}

/* -------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

#serein-footer {
    background-color: #fff !important;
    border-top: 1px solid #eee !important;
}

#serein-footer a, #serein-footer p, #serein-footer span, #serein-footer h4, #serein-footer input, #serein-footer button {
    font-family: 'Jost', sans-serif !important;
}