/* 
Theme Name: Loufiem
Theme URI: https://github.com/elementor/hello-theme-child/
Description: A child theme of Hello Elementor, created by Loufiem team
Author: Loufiem Team
Author URI: https://loufiem.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: loufiem
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Add price below variation swatches - Matching Figma Design */

/* Import Montserrat font if not already loaded */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* Swatch container - gap between swatches */
.button-variable-items-wrapper {
    gap: 12px !important;
}

/* Individual swatch button container */
.button-variable-item {
    width: 132px !important;
    height: 46px !important;
    min-width: 132px !important;
    min-height: 46px !important;
    border-radius: 5px !important;
    border: 1px solid #B5B5B3 !important;
    background-color: #FFFFFF !important;
    padding: 5px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Selected state - dark background */
.button-variable-item.selected {
    background-color: #4B4B4B !important;
    border-color: #FFFFFF !important;
}

/* Inner span container - flexbox column layout */
.button-variable-item .variable-item-span-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Attribute name (e.g., "250ml") */
.wvs-option-name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: #4B4B4B !important;
}

/* Price text */
.wvs-option-price {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #C9C9C9 !important;
}

/* Selected state text colors - white */
.button-variable-item.selected .wvs-option-name,
.button-variable-item.selected .wvs-option-price {
    color: #FFFFFF !important;
}

/* Variable item contents wrapper */
.variable-item-contents {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* =====================================================
   PRODUCT PAGE LAYOUT - Matching Figma Design
   SCOPED TO SINGLE PRODUCT PAGES ONLY
   ===================================================== */

/* Import additional font weights */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Main product container - ONLY on single product pages */
body.single-product .woocommerce div.product {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
}

/* Product Gallery + Summary Layout */
body.single-product .woocommerce div.product div.images,
body.single-product .woocommerce div.product div.summary {
    float: none !important;
    width: auto !important;
}

/* =====================================================
   PRODUCT GALLERY - Vertical Thumbnails Layout
   ===================================================== */

body.single-product .woocommerce div.product div.images {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    width: auto !important;
    max-width: 610px !important;
}

/* Thumbnails container - vertical on left */
body.single-product .woocommerce div.product div.images .flex-control-thumbs,
body.single-product .woocommerce div.product div.images ol.flex-control-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 105px !important;
    order: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Individual thumbnail */
body.single-product .woocommerce div.product div.images .flex-control-thumbs li,
body.single-product .woocommerce div.product div.images ol.flex-control-nav li {
    width: 105px !important;
    height: 105px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.single-product .woocommerce div.product div.images .flex-control-thumbs li img,
body.single-product .woocommerce div.product div.images ol.flex-control-nav li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    transition: border-color 0.2s ease !important;
}

/* Active/selected thumbnail */
body.single-product .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
body.single-product .woocommerce div.product div.images ol.flex-control-nav li img.flex-active {
    border-color: #B5B5B3 !important;
}

/* Main product image */
body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__image,
body.single-product .woocommerce div.product div.images .flex-viewport,
body.single-product .woocommerce div.product div.images>a {
    width: 475px !important;
    height: 475px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__image img,
body.single-product .woocommerce div.product div.images .flex-viewport img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

/* Hide default zoom icon */
body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* =====================================================
   PRODUCT INFO SECTION
   ===================================================== */

body.single-product .woocommerce div.product div.summary {
    width: 540px !important;
    max-width: 540px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Category badge */
body.single-product .woocommerce div.product .posted_in,
body.single-product .woocommerce div.product .product_meta .posted_in {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4B4B4B !important;
    margin-bottom: 8px !important;
}

body.single-product .woocommerce div.product .posted_in a {
    color: #4B4B4B !important;
    text-decoration: none !important;
}

/* Product title */
body.single-product .woocommerce div.product .product_title {
    font-family: 'Montserrat', sans-serif !important;
    /*    font-size: 24px !important;   */
    font-weight: 700 !important;
    color: #191919 !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.3 !important;
}

/* Product price 
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #191919 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}*/

/* Original price (strikethrough) */
body.single-product .woocommerce div.product p.price del,
body.single-product .woocommerce div.product span.price del {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #B5B5B3 !important;
    text-decoration: line-through !important;
}

/* Sale price */
body.single-product .woocommerce div.product p.price ins,
body.single-product .woocommerce div.product span.price ins {
    text-decoration: none !important;
}

/* Short description */
body.single-product .woocommerce div.product .woocommerce-product-details__short-description {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #4B4B4B !important;
}

/* Quantity + Add to Cart row */
body.single-product .woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

/* Quantity input wrapper */
body.single-product .woocommerce div.product form.cart .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #B5B5B3 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    width: fit-content !important;
}

body.single-product .woocommerce div.product form.cart .quantity input.qty {
    width: 60px !important;
    height: 40px !important;
    border: none !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

body.single-product .woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product .woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

/* Add to cart button */
body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button {
    width: 100% !important;
    height: 50px !important;
    background-color: #4B4B4B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 5px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background-color: #333333 !important;
}

/* Product meta (SKU, Category, Tags) */
body.single-product .woocommerce div.product .product_meta {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #4B4B4B !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #F3F3F3 !important;
}

body.single-product .woocommerce div.product .product_meta>span {
    display: block !important;
    margin-bottom: 8px !important;
}

body.single-product .woocommerce div.product .product_meta a {
    color: #4B4B4B !important;
    text-decoration: none !important;
}

body.single-product .woocommerce div.product .product_meta a:hover {
    text-decoration: underline !important;
}

/* =====================================================
   PRODUCT TABS / DESCRIPTION
   ===================================================== */

body.single-product .woocommerce div.product .woocommerce-tabs {
    width: 100% !important;
    margin-top: 60px !important;
    clear: both !important;
}

body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    border-bottom: 1px solid #F3F3F3 !important;
}

body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #B5B5B3 !important;
    text-decoration: none !important;
    padding: 0 0 15px 0 !important;
    display: block !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #191919 !important;
    border-bottom-color: #191919 !important;
}

body.single-product .woocommerce div.product .woocommerce-tabs .panel {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #4B4B4B !important;
}

/* Description panel - expandable */
body.single-product .woocommerce div.product .woocommerce-tabs #tab-description {
    max-height: 300px !important;
    overflow: hidden !important;
    position: relative !important;
}

body.single-product .woocommerce div.product .woocommerce-tabs #tab-description.expanded {
    max-height: none !important;
}

/* =====================================================
   RELATED PRODUCTS SECTION
   ===================================================== */

body.single-product .woocommerce div.product .related.products {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background-color: #F5F5F5 !important;
    padding: 50px 0 !important;
    margin-top: 80px !important;
}

body.single-product .woocommerce div.product .related.products>h2 {
    max-width: 1200px !important;
    margin: 0 auto 40px auto !important;
    padding: 0 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #191919 !important;
}

body.single-product .woocommerce div.product .related.products ul.products {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}

/* Product card styling */
body.single-product .woocommerce div.product .related.products ul.products li.product {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

body.single-product .woocommerce div.product .related.products ul.products li.product a img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

body.single-product .woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #191919 !important;
    padding: 15px !important;
    margin: 0 !important;
}

body.single-product .woocommerce div.product .related.products ul.products li.product .price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #191919 !important;
    padding: 0 15px 15px 15px !important;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */

@media (max-width: 1200px) {
    body.single-product .woocommerce div.product {
        padding: 20px !important;
    }

    body.single-product .woocommerce div.product div.images {
        max-width: 100% !important;
    }

    body.single-product .woocommerce div.product div.summary {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    body.single-product .woocommerce div.product {
        flex-direction: column !important;
    }

    body.single-product .woocommerce div.product div.images {
        flex-direction: column-reverse !important;
    }

    body.single-product .woocommerce div.product div.images .flex-control-thumbs,
    body.single-product .woocommerce div.product div.images ol.flex-control-nav {
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    body.single-product .woocommerce div.product div.images .woocommerce-product-gallery__image,
    body.single-product .woocommerce div.product div.images .flex-viewport {
        width: 100% !important;
        height: auto !important;
    }

    body.single-product .woocommerce div.product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}