/* ==========================================================================
   CSS CHO TRANG CHI TIẾT SẢN PHẨM (CUSTOM REBUILD)
   ========================================================================== */

/* Container */
.t-sproduct-container.custom-rebuild {
    max-width: 1240px;
    margin: 40px auto;
    padding: 0 20px;
}

/* === MAIN SECTION (GALLERY | INFO) === */
.t-sproduct-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    background: #fff;
    margin-bottom: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 40px;
}

@media (min-width: 992px) {
    .t-sproduct-main {
        grid-template-columns: 45% 1fr;
        gap: 60px;
        padding: 50px;
    }
}

/* Gallery - Add separator */
.t-sproduct-gallery {
    position: relative;
    padding-right: 0;
}

@media (min-width: 992px) {
    .t-sproduct-gallery {
        padding-right: 30px;
    }

    .t-sproduct-gallery::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: #eee;
    }
}

/* === GALLERY REBUILD (Using new .showroom- classes) === */
.showroom-gallery-wrapper {
    width: 100%;
}

/* === STANDARD GALLERY STYLING (MATCHING SHOWROOM LOOK) === */
.woocommerce-product-gallery {
    width: 100%;
    position: relative;
}

/* Main Image Wrapper */
.woocommerce-product-gallery__wrapper {
    margin: 0;
    padding: 0;
    border: 1px solid #333;
    /* Dark Border */
    border-radius: 8px;
    background: #121212;
    /* Dark Background */
    overflow: hidden;
    margin-bottom: 15px;
    /* Spacing before thumbs */
}

.woocommerce-product-gallery__image {
    width: 100%;
    display: block;
    /* Enforce Rectangular Aspect Ratio (4:3) */
    aspect-ratio: 4 / 3;
    position: relative;
    background: #121212;
    /* Dark Background */
    overflow: hidden;
}

/* Fix for WooCommerce Link Wrapper */
.woocommerce-product-gallery__image a {
    display: flex !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* Main Image (Exclude Zoom Image) */
.woocommerce-product-gallery__image img:not(.zoomImg) {
    width: 100%;
    height: 100% !important;
    display: block !important;
    object-fit: contain;
    /* 'Fit' - Shows whole image */
    margin: 0 auto;
    transition: opacity 0.2s;
    /* Smooth transition */
}

/* Fix Flicker & Size: Zoom Image configuration */
.woocommerce-product-gallery__image img.zoomImg {
    width: auto !important;
    /* Let JS set size */
    height: auto !important;
    /* Let JS set size */
    max-width: none !important;
    /* Allow overflowing container */
    max-height: none !important;
    background-color: #121212 !important;
    /* Cover original */
    object-fit: cover !important;
    /* Or default */
    border: none !important;
    padding: 0 !important;
}

/* Thumbnails (FlexSlider Control Nav) */
.woocommerce-product-gallery .flex-control-thumbs {
    display: grid !important;
    /* Force Grid Layout */
    grid-template-columns: repeat(5, 1fr);
    /* 5 Columns like before */
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible !important;
    /* Allow hover boundaries */
}

/* Thumbnail Items */
.woocommerce-product-gallery .flex-control-thumbs li {
    width: auto !important;
    /* Override inline width from JS */
    float: none !important;
    /* Override clearfix */
    margin: 0 !important;
    /* Reset default margins */
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

.woocommerce-product-gallery .flex-control-thumbs li:hover,
.woocommerce-product-gallery .flex-control-thumbs li.flex-active {
    opacity: 1;
    border-color: var(--t-primary-color);
}

.woocommerce-product-gallery .flex-control-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
    /* Let container control opacity */
    transition: transform 0.3s;
}

.woocommerce-product-gallery .flex-control-thumbs li:hover img {
    transform: scale(1.1);
    /* Zoom effect on hover */
}

/* Info */
.t-sproduct-info {
    padding-left: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .t-sproduct-info {
        padding-left: 10px;
    }
}

.t-sproduct-info .product_title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--t-secondary-color);
    line-height: 1.2;
}

.t-sproduct-info .woocommerce-product-details__short-description {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

/* ACTIONS AREA (Forms + Button) */
.showroom-actions {
    margin-bottom: 30px;
}

/* Hide std Add to Cart elements */
.showroom-actions .single_add_to_cart_button,
.showroom-actions .quantity {
    display: none !important;
}

/* Style Variations Table */
.showroom-actions .variations {
    width: 100%;
    margin-bottom: 20px;
    border: none;
}

.showroom-actions .variations label {
    font-weight: 700;
    color: var(--t-secondary-color);
}

.showroom-actions .variations select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    margin-top: 5px;
}

/* Price in variation */
.showroom-actions .single_variation .price {
    font-size: 24px;
    color: var(--t-primary-color);
    font-weight: bold;
    margin: 15px 0;
    display: block;
}

/* Contact Button */
/* Updated Contact Button Style - Ensure ORANGE Color override */
/* Contact Button - UNIVERSAL OVERRIDE */
/* Covers both 'Liên hệ báo giá' and 'Yêu cầu tư vấn' buttons */
.showroom-contact-wrapper {
    display: flex;
    justify-content: center;
    /* Center the button container itself if needed */
    width: 100%;
}

.showroom-contact-wrapper a,
.showroom-contact-wrapper button,
.showroom-contact-wrapper input[type="submit"],
.showroom-contact-wrapper .contact-popup-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    height: 50px !important;
    line-height: normal !important;
    /* Reset line-height for flex centering */
    padding: 0 40px !important;
    background-color: var(--t-primary-color) !important;
    /* FORCE ORANGE */
    color: #fff !important;
    border: 1px solid var(--t-primary-color) !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(226, 96, 34, 0.3) !important;
    margin: 0 !important;
    /* Remove generic margins */
    width: auto !important;
    /* Let content dictate width, or 100% if preferred */
    min-width: 250px;
    /* Minimum width for consistency */
}

.showroom-contact-wrapper a:hover,
.showroom-contact-wrapper button:hover,
.showroom-contact-wrapper input[type="submit"]:hover,
.showroom-contact-wrapper .contact-popup-button:hover {
    background-color: var(--t-primary-dark) !important;
    /* Sync with Theme .t-btn:hover */
    border-color: var(--t-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(226, 96, 34, 0.5) !important;
}

/* === FIX "Yêu cầu tư vấn" BUTTON INSIDE TABS === */
/* Override WooCommerce default purple for .button.alt */
.woocommerce a.button.alt.contact-popup-button,
a.contact-popup-button.js-open-contact-modal,
#content .contact-popup-button {
    background-color: var(--t-primary-color) !important;
    border-color: var(--t-primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(226, 96, 34, 0.3) !important;
    text-transform: uppercase;
    font-weight: 700;
}

.woocommerce a.button.alt.contact-popup-button:hover,
a.contact-popup-button.js-open-contact-modal:hover,
#content .contact-popup-button:hover {
    background-color: var(--t-primary-dark) !important;
    /* Sync with Theme .t-btn:hover */
    border-color: var(--t-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(226, 96, 34, 0.4) !important;
}

/* Meta */
.product_meta {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
    color: #777;
    border: 1px solid #eee;
}

.product_meta .sku_wrapper,
.product_meta .posted_in {
    display: block;
    margin-bottom: 5px;
}

.product_meta a {
    color: var(--t-secondary-color);
    font-weight: 600;
    text-decoration: none;
}

/* === TABS SECTION === */
.t-sproduct-tabs {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 80px;
}

.woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #f0f0f0;
    gap: 30px;
}

.woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}

.woocommerce-tabs ul.tabs li a {
    padding: 10px 0;
    display: block;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16px;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--t-secondary-color);
}

.woocommerce-tabs ul.tabs li::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--t-primary-color);
    transition: width 0.3s;
}

.woocommerce-tabs ul.tabs li.active::after {
    width: 100%;
}

.woocommerce-tabs .panel {
    color: #555;
    line-height: 1.6;
}

/* === RELATED PRODUCTS (CUSTOM GRID) === */
.t-related-products {
    margin-top: 80px;
}

.t-related-products .related-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--t-secondary-color);
    text-transform: uppercase;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.t-related-products .related-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--t-primary-color);
}

/* The Grid Wrapper */
.custom-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    /* Increased gap for better spacing */
}

@media (min-width: 992px) {
    .custom-grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Showroom Card Style */
.showroom-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.showroom-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Reverted shadow */
    transform: translateY(-5px);
    border-color: transparent;
}

.showroom-card .card-link-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Full height */
    text-decoration: none;
    color: inherit;
    padding: 20px;
    align-items: center;
    /* CENTERED */
    text-align: center;
    /* CENTERED */
}

.showroom-card .card-image {
    width: 100%;
    height: 180px;
    /* Original Height */
    margin-bottom: 15px;
}

.showroom-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* CONTAIN (Boxed) */
    transition: transform 0.3s;
    background: #fff;
    /* Ensure clean background for contained images */
}

.showroom-card:hover .card-image img {
    transform: scale(1.05);
}

/* Showroom Card Excerpt */
.showroom-card .card-excerpt {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
    flex-grow: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Increased to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 58px;
    /* Ensure space for 3 lines */
}

.showroom-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Push button to bottom */
    width: 100%;
    align-items: center;
    justify-content: space-between;
    /* Better spacing including excerpt */
}

.showroom-card .card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t-secondary-color);
    margin: 0 0 10px;
    line-height: 1.4;
    min-height: 44px;
    /* 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.showroom-card .card-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--t-primary-color);
    margin-bottom: 15px;
}

.showroom-card .card-button {
    margin-top: auto;
    /* Push to bottom */
    display: inline-block;
    background: var(--t-primary-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s;
}

.showroom-card:hover .card-button {
    background: var(--t-secondary-color);
}
/* ==========================================================================
   MOBILE RESPONSIVE FIXES (Added via Implementation Plan)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Fix Container Padding */
    .t-sproduct-container.custom-rebuild {
        padding: 0 10px; /* Reduce outer container padding */
        margin-top: 20px;
    }

    /* 2. Fix Main Card Padding & Gap */
    .t-sproduct-main {
        padding: 20px 15px; /* Reduce from 40px to 15px */
        gap: 20px; /* Reduce gap between gallery and info */
    }

    /* 3. Fix Gallery Overflow */
    .t-sproduct-gallery {
        width: 100%;
        max-width: 100%;
        overflow: hidden; /* Prevent horizontal scroll */
        padding-right: 0; /* Confirm reset */
    }

    /* 4. Fix Info Section Padding */
    .t-sproduct-info {
        padding-left: 0;
        width: 100%;
    }

    /* 5. Fix Title Size */
    .t-sproduct-info .product_title {
        font-size: 24px; /* Reduce from 32px */
    }

    /* 6. Fix Contact Button & Variations Width */
    .showroom-contact-wrapper a,
    .showroom-contact-wrapper button,
    .showroom-contact-wrapper .contact-popup-button {
        width: 100% !important; /* Full width on mobile */
        min-width: 0 !important; /* Allow shrinking if needed */
        padding: 0 15px !important;
        font-size: 14px !important;
    }
    
    .showroom-actions .variations select {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* 7. Tabs Padding */
    .t-sproduct-tabs {
        padding: 20px;
    }

    .woocommerce-tabs ul.tabs {
        flex-direction: column; /* Stack tabs on mobile */
        gap: 10px;
        border-bottom: none;
    }

    .woocommerce-tabs ul.tabs li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    
    .woocommerce-tabs ul.tabs li.active::after {
        display: none; 
    }
    
    .woocommerce-tabs ul.tabs li.active {
        background-color: #f9f9f9;
        border-radius: 4px;
    }

    /* 8. Related Products Grid */
    .custom-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }
    
    @media (max-width: 480px) {
         .custom-grid-wrapper {
            grid-template-columns: 1fr; 
        }
    }
}