/* Custom Product Page Layout Styles */

/* --- WooCommerce Product Gallery Styling (to match image) --- */

/*
 * Custom CSS for WooCommerce Single Product Page Images
 * Target: Main gallery images
 */

/* Apply only on desktop screens (adjust breakpoint as needed) */
@media (min-width: 992px) { /* Adjust this breakpoint if your tablet cutoff is different */

    /* Target the main product images within the gallery */
    .woocommerce-product-gallery__wrapper img.wp-post-image,
    .woocommerce-product-gallery__wrapper img:not(.zoomImg) { /* Also target other images in gallery that aren't the zoom helper */
        width: 600px !important; /* Force width */
        height: 600px !important; /* Force height */
        object-fit: cover !important; /* Crop image to fill the 600x600 space */
        /* You might also use 'contain' if you prefer no cropping and want the entire image visible,
           but that might result in white space if the image isn't 1:1 already.
           'cover' is best for forcing a square fill. */
    }

    /* Adjust the flex-viewport height if it's explicitly set inline by JS */
    /* This rule helps ensure the container matches the image height */
    .flex-viewport {
        height: 500px !important;
                object-fit: cover !important; /* Crop image to fill the 600x600 space */

        /* If the theme's JS is constantly overriding this, you might need JS to adjust it,
           but CSS with !important might work. */
    }

}




                                                                                                                                    /*code end*/

/* Main container for the product image and thumbnails */
.custom-product-image-column {
    /* The flex basis and max-width are already in your layout CSS */
    /* Add styling for the container that holds the gallery */
    border-radius: 8px; /* Rounded corners for the entire image block */
    overflow: hidden; /* Ensures contents stay within rounded corners */
    padding: 0; /* Ensure no unwanted padding pushes content */
}

/* Ensures all images within the gallery are responsive and fit their containers */
.woocommerce-product-gallery img {
    max-width: 100%; /* Images won't overflow their container */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Remove extra space below images */
}

/* Main gallery wrapper: Often controls the slider behavior. No specific visual changes needed unless default is broken. */
.woocommerce-product-gallery {
    margin-bottom: 0; /* Adjust space between main image and thumbnails if needed */
}

/* Individual main product image container (figure element) */
.woocommerce-product-gallery__image {
    position: relative; /* Essential for positioning the heart icon inside it */
    background-color: #fff; /* Clean background for the image */
    overflow: hidden; /* Ensures image fits if it has its own border-radius */
    border-top-left-radius: 8px; /* Match parent container's top radius */
    border-top-right-radius: 8px; /* Match parent container's top radius */
}

/* Optional: Hide the default WooCommerce zoom/lightbox trigger icon */
.woocommerce-product-gallery__trigger {
    display: none; /* Hides the small magnifying glass icon if present */
}

/* --- Heart Icon Styling (Assuming a Font Awesome icon within a custom div/button) --- */
/* You would need to add this HTML within your custom-product-layout.php
   inside .woocommerce-product-gallery__image (or similar parent) if it's not already there.
   Example HTML: <div class="custom-wishlist-icon"><i class="far fa-heart"></i></div>
*/
.custom-wishlist-icon {
    position: absolute;
    top: 15px; /* Adjust distance from top */
    right: 15px; /* Adjust distance from right */
    z-index: 10; /* Ensure it's above the image */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background like in image */
    border-radius: 50%; /* Makes it a circle */
    width: 35px; /* Size of the circle */
    height: 35px; /* Size of the circle */
    display: flex; /* Use flexbox to center the icon */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.custom-wishlist-icon:hover {
    background-color: rgba(255, 255, 255, 1); /* Slightly more opaque on hover */
    transform: scale(1.05); /* Slight grow effect */
}

.custom-wishlist-icon i {
    color: #555; /* Color of the heart icon */
    font-size: 16px; /* Size of the heart icon */
}

/* If the heart icon changes to filled when active/liked (e.g., fas fa-heart) */
.custom-wishlist-icon.liked i {
    color: #e02c2c; /* Red color for liked state */
}

#inner-wrap{
    background-color:#F2ECE9;
}


/* --- Thumbnail Navigation Styling (to match image) --- */

/* Container for the thumbnail navigation (typically .flex-control-nav.flex-control-thumbs) */
.flex-control-nav.flex-control-thumbs {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center the thumbnails horizontally like in the image */
    flex-wrap: wrap; /* Allow thumbnails to wrap to the next line on smaller screens */
    list-style: none; /* Remove default list bullets */
    padding: 10px 0; /* Padding above/below thumbnails */
    margin: 0; /* Remove default margins */
    background-color: #F2ECE9; /* Light background for the thumbnail section, same as image column */
    border-bottom-left-radius: 8px; /* Match parent container's bottom radius */
    border-bottom-right-radius: 8px; /* Match parent container's bottom radius */
    padding-bottom: 15px; /* Give a bit more space at the bottom */
}

/* Individual thumbnail list item */
.flex-control-nav.flex-control-thumbs li {
    margin: 0 8px; /* Space between individual thumbnails */
    cursor: pointer;
    box-sizing: border-box; /* Include padding/border in element's total width */
}

/* Actual thumbnail image styling */
.flex-control-nav.flex-control-thumbs li img {
    width: 65px; /* Desired width for thumbnails */
    height: 65px; /* Desired height for thumbnails (make it square) */
    object-fit: cover; /* Ensures image fills the box without distortion */
    border: 2px solid #ddd; /* Default border color for inactive thumbnails */
    border-radius: 6px; /* Slightly rounded corners for thumbnails */
    opacity: 0.8; /* Slightly dim inactive thumbnails for visual contrast */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover/active states */
}

/* Style for the currently active thumbnail and on hover */
.flex-control-nav.flex-control-thumbs li img.flex-active,
.flex-control-nav.flex-control-thumbs li img:hover {
    opacity: 1; /* Full opacity when active or hovered */
    border-color: #7a6147; /* Highlight active/hovered thumbnail with your brand color */
    transform: translateY(-2px); /* Optional: slight lift effect on hover/active */
}

/* Responsive adjustment for thumbnails on very small screens */
@media (max-width: 480px) {
    .flex-control-nav.flex-control-thumbs li img {
        width: 50px;
        height: 50px;
    }
    .flex-control-nav.flex-control-thumbs {
        padding: 10px 5px;
    }
    .flex-control-nav.flex-control-thumbs li {
        margin: 0 4px;
    }
}

/* Main layout container */
#custom-single-product-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    max-width: 1200px; /* Or your preferred max width */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* Top section: image and summary */
.custom-product-top-section {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    margin-bottom: 40px;
    gap: 40px; /* Space between columns */
}

.custom-product-image-column {
    flex: 0 0 45%; /* Approx 45% width */
    max-width: 45%;
    box-sizing: border-box;
}

.custom-product-summary-column {
    flex: 0 0 50%; /* Approx 50% width */
    max-width: 50%;
    box-sizing: border-box;
}

/* Responsive adjustments for top section */
@media (max-width: 992px) {
    .custom-product-top-section {
        flex-direction: column; /* Stack columns vertically */
        gap: 20px; /* Adjust gap for stacked layout */
    }
    .custom-product-image-column,
    .custom-product-summary-column {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}


.custom-breadcrumbs{
    font-family: Inter;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0%;
vertical-align: middle;
color: #6B4B3E; 
margin-bottom:20px;


}

/* Product details */
.product-category-code {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}

h1.product_title {
font-family: Cormorant Garamond;
font-weight: 700;
font-size: 36px;
line-height: 40px;
letter-spacing: 0%;
vertical-align: middle;
color:#6B4B3E;

}

.product-sku-code { /* Added style for SKU as seen in image */
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.product-short-description {
font-family: Cormorant Garamond;
font-weight: 400;
font-size: 18px;
line-height: 29.25px;
letter-spacing: 0%;
vertical-align: middle;
margin-bottom:30px;
color:#374151;
}

/* Calculate Requirements Section */
.custom-calculate-requirements-section {
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


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


.custom-calculate-requirements-section p {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.area-input-field {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 20px;
    box-sizing: border-box;
    outline: none;
}

.area-input-field:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-product-spec-accordion{
    margin-top:20px;
}

.custom-buttons-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: flex-start; /* Align buttons to the start */
}

.custom-buttons-group .button {
    flex: 1; /* Makes buttons take equal width */
    text-align: center;
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px; /* Ensures buttons don't get too small */
    box-sizing: border-box;
}

.custom-buttons-group .button i {
    margin-right: 8px;
}

 .custom-buttons-group .enquire-now-button{
    border: 1px solid #6B4B3E;
    background-color: #F7F5F3;
    font-family: Inter;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color:#6B4B3E;
}

 .custom-buttons-group .enquire-now-button :hover{
    border: 1px solid #6B4B3E;
    background-color: #F7F5F3;
    font-family: Inter;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color:#6B4B3E;
}

.room-visualizer-button {
    background-color: #7a6147; /* Darker brown as seen in image */
    color: #ffffff;
    border: 1px solid #7a6147;
}

.room-visualizer-button:hover {
    background-color:#F7F5F3 !important;
    border-color:1px solid #634e3d !important;
    color:#6B4B3E !important;
}

.button:visited{
        background-color:#F7F5F3 !important;
    border-color:1px solid #634e3d !important;
    color:#6B4B3E !important;
}

.enquire-now-button {
    background-color: transparent;
    color: #333;
    border: 1px solid #ccc;
}

.enquire-now-button:hover {
    background-color: #f0f0f0 !important;
    color: #6B4B3E !important;
    border-color: #aaa;
}

/* Main Tabs (Specifications, Maintenance, Installation) */
.custom-product-spec-tabs {
    margin-bottom: 40px;
    border: 1px solid #ddd; /* Outer border for the whole tab component */
    border-radius: 8px; /* Rounded corners for the whole component */
    background-color: #fff;
    overflow: hidden; /* Ensures borders/shadows are contained */
}

.custom-main-tabs-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    background-color: #f5f5f5; /* Light background for tab headers */
}

.custom-main-tab-item {
    margin-right: 2px; /* Small gap between tabs */
    cursor: pointer;
    position: relative; /* For active state underline */
    flex: 1; /* Distribute tabs evenly */
    text-align: center;
}

.custom-main-tab-item:last-child {
    margin-right: 0;
}

.custom-main-tab-item a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    transition: all 0.3s ease;
}

.custom-main-tab-item:hover a {
    color: #7a6147; /* Hover color matches button */
    background-color: #f0f0f0;
}

.custom-main-tab-item.active a {
    background-color: #fff;
    color: #7a6147; /* Active color matches button */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05); /* Subtle shadow on active tab */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Styling for the content area of the main tabs */
.custom-main-tab-content {
    padding: 20px;
    background-color: #fff;
}

.custom-main-tab-pane {
    display: none;
}

.custom-main-tab-pane.active {
    display: block;
}


/* Support & Information Section */
.custom-support-information-section {
    margin-top: 40px;
}

.custom-support-information-section h2 {
 font-family: Cormorant Garamond;
font-weight: 700;
font-style: Bold;
font-size: 30px;
line-height: 36px;
letter-spacing: 0%;
vertical-align: middle;
color:#6B4B3E;
margin-bottom:30px !important;
}

.custom-sub-tabs-nav {
    display: flex;
    justify-content:space-between; /* Center the sub-tabs */
    list-style: none;
    background-color:#E0D6CF33;
    margin:unset;
}

.custom-sub-tab-item {
    width:100%;
    cursor: pointer;
    position: relative;
}

.custom-sub-tab-item a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #867065;
    border-bottom: 2px solid transparent; /* For active state underline */
    transition: all 0.3s ease;
    text-align: center;
    font-family: Inter;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0%;

}

.custom-sub-tab-item:hover a {
    color: #7a6147;
}

.custom-support-information-section ul li{
    margin:unset;
    font-family: Inter;
font-weight: 400;
font-size: 15px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
color:#555;

}

.custom-sub-tab-item.active a {
    color: #FFFFFF;
    background-color:#6B4B3E;
    border-radius:8px;
    
}

.custom-sub-tab-content {
    border: 1px solid #E6DFDB;   
    border-radius: 8px 8px;
    background-color: #fff;
    padding: 20px;
    margin-top:50px;
    box-shadow: 0px 4px 6px -4px #0000001A;
    box-shadow: 0px 10px 15px -3px #0000001A;

}

.button .room-visualizer-button{
    font-family: Inter;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color:#FFFFFF;
}

.custom-buttons-group .room-visualizer-button{
    background-color:#6B4B3E;

}

.custom-sub-tab-pane {
    display: none;
}

.custom-sub-tab-pane.active {
    font-family: Inter;
font-weight: 400;
font-size: 15px;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
color:##555 !important;
    display: block;
}



.custom-accordion-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden; /* Ensures content stays within rounded borders */
}

.custom-accordion-item:last-child {
    margin-bottom: 0; /* No margin on the last item */
}

.custom-accordion-title {
    letter-spacing: 0.5px;
    padding: 12px 20px;
    margin: 0;
    cursor: pointer;
    color: #6B4B3E;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    font-family: Playfair Display;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;

}

.custom-accordion-title:after {
    content: '\25BC'; /* Down arrow Unicode character */
    font-family: Arial, sans-serif; /* Ensure the arrow renders correctly */
    font-size: 12px;
    margin-left: 10px;
    transition: transform 0.3s ease;
    display: inline-block; /* Ensure transform applies */
}

.custom-accordion-title.active {
    background-color: #e5e5e5; /* Slightly darker when active */
}

.custom-accordion-title.active:after {
    transform: rotate(180deg); /* Up arrow when active */
}

.custom-accordion-title:hover {
    background-color: #e5e5e5;
}

.custom-accordion-content {
    display: none; /* Hidden by default */
    padding: 15px 20px;
    background-color: #fff;
    color: #555;
    line-height: 1.6;
    border-top: 1px solid #e0e0e0; /* Separator for content */
}