.elementor-158 .elementor-element.elementor-element-bccdd23{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-158 .elementor-element.elementor-element-07e7927{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-158 .elementor-element.elementor-element-7366652{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-158 .elementor-element.elementor-element-7366652:not(.elementor-motion-effects-element-type-background), .elementor-158 .elementor-element.elementor-element-7366652 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF6E9;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-158 .elementor-element.elementor-element-fed5693{text-align:center;}.elementor-158 .elementor-element.elementor-element-fed5693 .elementor-heading-title{font-family:"Abhaya Libre", Sans-serif;font-weight:600;color:#000000;}.elementor-158 .elementor-element.elementor-element-b2ddadd{--display:flex;}.elementor-158 .elementor-element.elementor-element-b2ddadd:not(.elementor-motion-effects-element-type-background), .elementor-158 .elementor-element.elementor-element-b2ddadd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ae63254 );}.elementor-158 .elementor-element.elementor-element-072fd3a{text-align:center;}.elementor-158 .elementor-element.elementor-element-072fd3a .elementor-heading-title{font-family:"Abhaya Libre", Sans-serif;font-weight:600;color:#000000;}.elementor-158 .elementor-element.elementor-element-0ce913e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-158 .elementor-element.elementor-element-dfa65ec{--display:flex;}.elementor-158 .elementor-element.elementor-element-dfa65ec:not(.elementor-motion-effects-element-type-background), .elementor-158 .elementor-element.elementor-element-dfa65ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ae63254 );}.elementor-158 .elementor-element.elementor-element-6a00dbf{text-align:center;}.elementor-158 .elementor-element.elementor-element-6a00dbf .elementor-heading-title{font-family:"Abhaya Libre", Sans-serif;font-weight:600;color:#000000;}.elementor-158 .elementor-element.elementor-element-767eb52{--display:flex;--margin-top:20px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-158 .elementor-element.elementor-element-1a9b644{text-align:center;}.elementor-158 .elementor-element.elementor-element-1a9b644 .elementor-heading-title{font-family:"Abhaya Libre", Sans-serif;font-weight:600;color:#000000;}.elementor-158 .elementor-element.elementor-element-c992f1c{--display:flex;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-158 .elementor-element.elementor-element-c992f1c:not(.elementor-motion-effects-element-type-background), .elementor-158 .elementor-element.elementor-element-c992f1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F5F0;}.elementor-158 .elementor-element.elementor-element-0ea10d9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 00px 0px;text-align:center;}.elementor-158 .elementor-element.elementor-element-0ea10d9 .elementor-heading-title{font-family:"Abhaya Libre", Sans-serif;font-weight:600;color:#000000;}.elementor-158 .elementor-element.elementor-element-61c08eb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-158 .elementor-element.elementor-element-42b11e3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-158 .elementor-element.elementor-element-559f888{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-7366652 *//* ==========================================================================
   1. SHOP BY CATEGORY SECTION (CIRCULAR LAYOUT & RESPONSIVE FIX)
   ========================================================================== */

/* Grid layout for the desktop view */
.shop-by-cat-section .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Center each item on desktop */
.shop-by-cat-section .woocommerce ul.products li.product-category {
    text-align: center;
    width: 22%; 
    min-width: 150px;
    margin: 0 !important;
}

/* Updated image styles to maintain perfect circles on mobile and desktop */
.shop-by-cat-section .woocommerce ul.products li.product-category a img {
    width: 180px !important;
    max-width: 100% !important; /* Prevents overflow on smaller viewport screens */
    height: auto !important; /* Overrides fixed height to let aspect-ratio calculate safely */
    aspect-ratio: 1 / 1 !important; /* Forces width and height to stay identical, stopping the oval deformation */
    object-fit: cover !important;
    border-radius: 50% !important; /* Circular Shape */
    border: 1px solid #d3c4b1; 
    padding: 3px;
    background-color: #fff;
    transition: transform 0.3s ease;
    margin: 0 auto 15px auto !important;
    display: block !important;
}

/* Hover effect */
.shop-by-cat-section .woocommerce ul.products li.product-category a:hover img {
    transform: scale(1.05);
}

/* 📱 Mobile Specific Adjustment for Shop By Category Circles */
@media screen and (max-width: 600px) {
    .shop-by-cat-section .woocommerce ul.products {
        gap: 15px !important;
    }
    
    .shop-by-cat-section .woocommerce ul.products li.product-category {
        width: calc(50% - 10px) !important; /* Clean 2-column distribution layout on mobile */
        min-width: 120px !important;
    }
    
    .shop-by-cat-section .woocommerce ul.products li.product-category a img {
        width: 80% !important; /* Balanced scale padding inside the column grid width */
    }
}


/* ==========================================================================
   2. FEATURED COLLECTIONS SECTION (SQUARE/ORIGINAL LAYOUT)
   ========================================================================== */

/* Resets image structure back to absolute squares inside this container */
.featured-coll-section .woocommerce ul.products li.product-category a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0% !important; /* Square Shape */
    border: none !important; 
    padding: 0 !important;
    transition: transform 0.3s ease;
}

/* Featured section hover effect */
.featured-coll-section .woocommerce ul.products li.product-category a:hover img {
    transform: scale(1.03);
}


/* ==========================================================================
   3. COMMON STYLES (TEXT LAYOUT FOR BOTH SECTIONS)
   ========================================================================== */

/* Arrange image above and text below for both */
.woocommerce ul.products li.product-category a {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    position: relative !important;
}

/* Style the category title (bold and uppercase) */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    font-size: 14px !important;
    text-transform: uppercase; 
    font-weight: 700 !important;
    color: #111 !important;
    letter-spacing: 1px; 
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important; 
    padding: 10px 0 0 0 !important;
    margin: 10px auto 0 auto !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* Hide the category count */
.woocommerce ul.products li.product-category .count {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b2ddadd *//* ==========================================================================
   FEATURED COLLECTIONS - RESPONSIVE 4-COLUMN DESIGN
   ========================================================================== */

/* 1. Grid structure block aur spacing (Desktop & Laptop) */
.featured-coll-section .woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important; /* Mobile pe wrap karne ke liye allow kiya */
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. Desktop pe exact 4 Columns (4 items per row) */
.featured-coll-section .woocommerce ul.products li.product-category {
    position: relative !important;
    width: calc(25% - 11.25px) !important; /* 4 columns minus gap calculation */
    margin: 0 0 15px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 3. Container block layout structure */
.featured-coll-section .woocommerce ul.products li.product-category a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* 4. Image sizes and styling */
.featured-coll-section .woocommerce ul.products li.product-category a img {
    width: 100% !important;
    height: 420px !important; /* Desktop ke liye behtar premium height */
    object-fit: cover !important;
    border-radius: 0% !important; 
    display: block !important;
    filter: brightness(0.65) !important; /* Dark filter */
    transition: transform 0.5s ease, filter 0.5s ease !important;
}

/* Hover effect */
.featured-coll-section .woocommerce ul.products li.product-category a:hover img {
    transform: scale(1.05) !important;
    filter: brightness(0.55) !important;
}

/* 5. Title Text Styling */
.featured-coll-section .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    position: absolute !important;
    bottom: 25px !important;
    left: 20px !important;
    right: 20px !important;
    color: #ffffff !important; 
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 2 !important;
}

/* 6. Automatic "SHOP NOW ➔" button */
.featured-coll-section .woocommerce ul.products li.product-category .woocommerce-loop-category__title::after {
    content: "SHOP NOW ➔" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    margin-top: 12px !important; 
    opacity: 0.9 !important;
    transition: color 0.3s ease !important;
}

/* Hover effect on shop now */
.featured-coll-section .woocommerce ul.products li.product-category a:hover .woocommerce-loop-category__title::after {
    color: #d3c4b1 !important; 
}

/* Hide count */
.featured-coll-section .woocommerce ul.products li.product-category .count {
    display: none !important;
}


/* ==========================================================================
   MEDIA QUERIES (RESPONSIVENESS)
   ========================================================================== */

/* 📱 TABLET DEVICES (Screens smaller than 992px) */
@media screen and (max-width: 992px) {
    /* Tablet par 2 Columns dikhenge (2 items per row) */
    .featured-coll-section .woocommerce ul.products li.product-category {
        width: calc(50% - 7.5px) !important; 
    }
    
    /* Tablet par thodi height kam ki taaki screen me fit baithe */
    .featured-coll-section .woocommerce ul.products li.product-category a img {
        height: 340px !important;
    }
    
    .featured-coll-section .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        font-size: 16px !important;
        bottom: 20px !important;
        left: 15px !important;
        right: 15px !important;
    }
}

/* 📱 MOBILE PHONES (Screens smaller than 600px) */
@media screen and (max-width: 600px) {
    /* Mobile par space kam hota hai, isliye 1 ya 2 column kiya ja sakta hai.
       Design ke hisab se full-width single column zyada badiya lagega. */
    .featured-coll-section .woocommerce ul.products li.product-category {
        width: 100% !important; /* Full width mobile blocks */
        margin-bottom: 15px !important;
    }
    
    /* Mobile standard height */
    .featured-coll-section .woocommerce ul.products li.product-category a img {
        height: 280px !important;
    }
    
    .featured-coll-section .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        font-size: 15px !important;
        bottom: 15px !important;
        left: 15px !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dfa65ec *//* ==========================================================================
   PREMIUM MINIMAL PRODUCT GRID LAYOUT (RESPONSIVE)
   ========================================================================== */

/* 1. Base Grid and Flex Wrap */
.premium-product-grid .woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. Desktop Columns Setup (Default: 6 Columns per row) */
.premium-product-grid .woocommerce ul.products li.product {
    position: relative !important;
    width: calc(16.66% - 12.5px) !important; /* Forces 6 columns on desktop */
    background-color: #f6efe6 !important; /* Premium light cream background color */
    padding: 0 0 15px 0 !important; /* Spacing below content */
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important; /* Left-aligned typography as per layout design */
}

/* Remove default theme shadows/borders from items */
.premium-product-grid .woocommerce ul.products li.product a {
    text-decoration: none !important;
    display: block !important;
}

/* 3. Product Thumbnail Layout */
.premium-product-grid .woocommerce ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Perfectly square images */
    object-fit: cover !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
}

/* 4. Product Title Styling */
.premium-product-grid .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    line-height: 1.4 !important;
    margin: 0 12px 6px 12px !important;
    padding: 0 !important;
}

/* 5. Product Price Custom Styling */
.premium-product-grid .woocommerce ul.products li.product .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 12px 8px 12px !important;
    display: block !important;
}

/* 6. Star Ratings Styling alignment */
.premium-product-grid .woocommerce ul.products li.product .star-rating {
    margin: 0 12px 5px 12px !important;
    font-size: 11px !important;
    color: #d3a25d !important; /* Premium gold star tint */
}

/* 7. Hide Wishlist (Heart Icon) and Default Buttons completely */
.premium-product-grid .yith-wcwl-add-to-wishlist, 
.premium-product-grid .ti-wishlist-action,
.premium-product-grid .woocommerce ul.products li.product .button.add_to_cart_button {
    display: none !important; /* Completely blocks and removes the heart icon and blue buttons */
}

/* 8. Modern Shopping Bag Icon Layout (Bottom-Right Position) */
.premium-product-grid .woocommerce ul.products li.product::after {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    /* Clean CSS vector path drawing a modern shopping bag structure */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23333333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' /%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
}


/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (TABLET & MOBILE VISUAL FIXES)
   ========================================================================== */

/* 📱 TABLET VIEWPORTS (Screens smaller than 1024px) */
@media screen and (max-width: 1024px) {
    .premium-product-grid .woocommerce ul.products li.product {
        width: calc(33.33% - 10px) !important; /* Dynamically forces 3 items per row on tablets */
    }
}

/* 📱 MOBILE VIEWPORTS (Screens smaller than 600px) */
@media screen and (max-width: 600px) {
    .premium-product-grid .woocommerce ul.products {
        gap: 10px !important; /* Reduced structural gap padding on smartphones */
    }
    
    .premium-product-grid .woocommerce ul.products li.product {
        width: calc(50% - 5px) !important; /* Beautiful 2 Columns layout on mobile screen */
        padding: 0 0 10px 0 !important;
    }
    
    .premium-product-grid .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px !important;
        margin: 0 8px 4px 8px !important;
    }
    
    .premium-product-grid .woocommerce ul.products li.product .price {
        font-size: 12px !important;
        margin: 0 8px 6px 8px !important;
    }
    
    .premium-product-grid .woocommerce ul.products li.product .star-rating {
        margin: 0 8px 4px 8px !important;
        font-size: 9px !important;
    }
    
    .premium-product-grid .woocommerce ul.products li.product::after {
        width: 16px !important;
        height: 16px !important;
        bottom: 8px !important;
        right: 8px !important;
    }
}/* End custom CSS */