/**
 * LaNoira — Single Product "The Showroom" Layout v2
 *
 * Requires:
 * - content-single-product.php showroom template
 * - setup.php container bypass for is_product()
 *
 * @package Commerce_Elite
 */

/* ============================================
   RESET SITE WRAPPERS ON PRODUCT PAGE
   ============================================ */

.single-product .woocommerce-main {
    padding: 0 !important;
    max-width: 100% !important;
}

/* Breadcrumb — sits above the showroom split on all devices */
.single-product .woocommerce-breadcrumb-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 20;
    padding: 0.75rem 1.5rem !important;
    background: #0D0D0D !important;
    border-bottom: 1px solid #1F1F1F !important;
}

.single-product .woocommerce-breadcrumb {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    color: rgba(255,255,255,0.4) !important;
}

.single-product .woocommerce-breadcrumb a {
    color: rgba(255,255,255,0.4) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.single-product .woocommerce-breadcrumb a:hover {
    color: #C5A059 !important;
}

/* ============================================
   SHOWROOM SPLIT — DESKTOP
   ============================================ */

@media (min-width: 1025px) {

    .single-product-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Two-panel flex container — fixed 100vh height */
    .showroom-split {
        display: flex;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: #0D0D0D;
        position: relative;
    }

    /* ==============================
       LEFT — IMAGE PANEL (never scrolls)
       ============================== */

    .showroom-image-panel {
        width: 55%;
        height: 100%;
        flex-shrink: 0;
        background: #141414;
        overflow: hidden;
        position: relative;
    }

    /* Sale flash */
    .showroom-image-panel .onsale {
        position: absolute !important;
        top: 1.5rem !important;
        right: 1.5rem !important;
        left: auto !important;
        z-index: 15 !important;
    }

    /* WooCommerce gallery — work WITH FlexSlider */
    .showroom-image-panel .woocommerce-product-gallery {
        width: 100% !important;
        height: 100% !important;
    }

    /* flex-viewport is what FlexSlider sets height on via JS */
    .showroom-image-panel .flex-viewport {
        height: calc(100vh - 80px) !important;
        overflow: hidden !important;
    }

    .showroom-image-panel .woocommerce-product-gallery__wrapper {
        margin: 0 !important;
        height: 100% !important;
    }

    /* Each slide */
    .showroom-image-panel .woocommerce-product-gallery__image {
        height: calc(100vh - 80px) !important;
        aspect-ratio: unset !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #141414 !important;
        border: none !important;
        overflow: hidden !important;
    }

    .showroom-image-panel .woocommerce-product-gallery__image a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .showroom-image-panel .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 2.5rem !important;
        box-sizing: border-box !important;
        transition: transform 0.6s ease !important;
        display: block !important;
    }

    .showroom-image-panel:hover .woocommerce-product-gallery__image img {
        transform: scale(1.03) !important;
    }

    /* ==============================
       GHOST-WINK THUMBNAILS
       ============================== */

    .showroom-image-panel .flex-control-thumbs {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%) translateX(-100%) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 10px 8px !important;
        margin: 0 !important;
        list-style: none !important;
        background: rgba(13,13,13,0.92) !important;
        border-right: 1px solid rgba(197,160,89,0.2) !important;
        z-index: 10 !important;
        transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
        width: auto !important;
    }

    .showroom-image-panel:hover .flex-control-thumbs,
    .showroom-image-panel .flex-control-thumbs.ce-wink {
        transform: translateY(-50%) translateX(0) !important;
    }

    .showroom-image-panel .flex-control-thumbs li {
        flex: 0 0 auto !important;
        width: 64px !important;
        margin: 0 !important;
    }

    .showroom-image-panel .flex-control-thumbs li img {
        width: 64px !important;
        height: 64px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        border: 1px solid transparent !important;
        opacity: 0.5 !important;
        cursor: pointer !important;
        display: block !important;
        transition: opacity 0.25s ease, border-color 0.25s ease !important;
        transform: none !important;
    }

    .showroom-image-panel .flex-control-thumbs li img:hover {
        opacity: 0.85 !important;
        border-color: rgba(197,160,89,0.4) !important;
    }

    .showroom-image-panel .flex-control-thumbs li img.flex-active {
        opacity: 1 !important;
        border-color: #C5A059 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* ==============================
       GOLD DIVIDER LINE
       ============================== */

    .showroom-divider {
        width: 1px;
        flex-shrink: 0;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(197,160,89,0.15) 10%,
            rgba(197,160,89,0.6) 40%,
            rgba(197,160,89,0.6) 60%,
            rgba(197,160,89,0.15) 90%,
            transparent 100%
        );
        height: 100%;
    }

    /* ==============================
       RIGHT — INTERNALLY SCROLLABLE SUMMARY
       ============================== */

    .showroom-summary-panel {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        background: #0D0D0D;
        /* Custom scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(197,160,89,0.3) transparent;
    }

    .showroom-summary-panel::-webkit-scrollbar {
        width: 4px;
    }

    .showroom-summary-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .showroom-summary-panel::-webkit-scrollbar-thumb {
        background: rgba(197,160,89,0.3);
        border-radius: 2px;
    }

    .showroom-summary-panel::-webkit-scrollbar-thumb:hover {
        background: rgba(197,160,89,0.6);
    }

    .showroom-summary-inner {
        padding: 4rem 4rem 4rem 4.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-height: 100%;
        justify-content: center;
    }

    .showroom-summary-panel .summary.entry-summary {
        width: 100% !important;
        padding: 0 !important;
        min-height: unset !important;
        background: transparent !important;
        gap: 1.5rem !important;
        animation: none !important;
    }

    /* ==============================
       BELOW FOLD — FULL WIDTH
       ============================== */

    .showroom-below-fold {
        width: 100%;
        background: #0D0D0D;
        border-top: 1px solid #1F1F1F;
    }

    .showroom-below-fold .woocommerce-tabs {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 4rem !important;
    }

    .showroom-below-fold .woocommerce-tabs ul.tabs {
        padding: 0 !important;
    }

    .showroom-below-fold .woocommerce-tabs .panel {
        padding: 3rem 0 !important;
    }

    .showroom-below-fold .related,
    .showroom-below-fold .upsells {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 3rem 4rem !important;
    }

    /* product-main-content no longer drives layout */
    .single-product-wrapper .product-main-content {
        display: contents !important;
    }

}

/* ============================================
   MOBILE — STACKED
   ============================================ */

@media (max-width: 1024px) {

    .showroom-split {
        display: block;
        background: #0D0D0D;
    }

    .showroom-divider {
        display: none;
    }

    .showroom-image-panel {
        width: 100%;
        position: relative;
        background: #141414;
        border-bottom: 1px solid #1F1F1F;
    }

    .showroom-image-panel .woocommerce-product-gallery__image {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .showroom-image-panel .woocommerce-product-gallery__image img {
        padding: 1rem !important;
    }

    .showroom-image-panel .flex-control-thumbs {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 0.75rem !important;
        background: transparent !important;
        border-right: none !important;
        border-top: 1px solid #1F1F1F !important;
        gap: 6px !important;
    }

    .showroom-image-panel .flex-control-thumbs li {
        width: calc(16.666% - 5px) !important;
    }

    .showroom-image-panel .flex-control-thumbs li img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .showroom-summary-panel {
        width: 100%;
    }

    .showroom-summary-inner {
        padding: 2rem 1.5rem;
        min-height: unset;
        justify-content: flex-start;
    }

}