.elementor-1182 .elementor-element.elementor-element-fab6246{--display:flex;--min-height:300px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:5%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.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-1182 .elementor-element.elementor-element-e88f200{text-align:center;}.elementor-1182 .elementor-element.elementor-element-e88f200 .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-80d82de );}.elementor-1182 .elementor-element.elementor-element-dfc008f{--display:flex;}.elementor-widget-wc-categories .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-categories .woocommerce-loop-category__title .count{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1182 .elementor-element.elementor-element-caf35e3 .product{text-align:center;}.elementor-1182 .elementor-element.elementor-element-caf35e3.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1182 .elementor-element.elementor-element-fab6246{--padding-top:10%;--padding-bottom:10%;--padding-left:5%;--padding-right:5%;}}@media(min-width:768px){.elementor-1182 .elementor-element.elementor-element-fab6246{--content-width:1650px;}}@media(max-width:767px){.elementor-1182 .elementor-element.elementor-element-fab6246{--min-height:0px;--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:5%;}}/* Start custom CSS for wc-categories, class: .elementor-element-caf35e3 *//* ==========================================================================
   MR WOODS 7-ITEM CENTRED CATEGORY GRID
   ========================================================================== */

/* 1. Target the main container holding your category list/items */
.product-categories, 
ul.products.columns-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* This force-centers the bottom 3 items */
    gap: 20px !important; /* Controls uniform spacing between all tiles */
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
    max-width: 1200px; /* Adjust to match your theme's content width limits */
}

/* 2. Target the individual category tile items */
.product-categories .category,
ul.products.columns-4 .product-category.product {
    /* Calculates exact width for a 4-column desktop split, accounting for the 20px gaps */
    flex: 0 1 calc(25% - 15px) !important; 
    min-width: 220px; /* Prevents tiles from squishing too narrow */
    margin: 0 !important; /* Clears default theme float margins */
    box-sizing: border-box !important;
}

/* ==========================================================================
   Mobile & Tablet Optimization Responsive Rules
   ========================================================================== */

/* Tablet Breakpoint: Drops to a balanced 2x2x2x1 or 3x3x1 grid */
@media (max-width: 992px) {
    .product-categories .category,
    ul.products.columns-4 .product-category.product {
        flex: 0 1 calc(33.333% - 14px) !important;
    }
}

/* Mobile Breakpoint: Clean 2-column split with the 7th item centered on the bottom */
@media (max-width: 768px) {
    .product-categories, 
    ul.products.columns-4 {
        gap: 12px !important; /* Tighter spacing for smaller mobile screens */
    }
    
    .product-categories .category,
    ul.products.columns-4 .product-category.product {
        flex: 0 1 calc(50% - 6px) !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dfc008f *//* ==========================================================================
   Upgraded & Glitch-Free WooCommerce Product Category Cards
   ========================================================================== */

/* 1. Container Card Styling */
.woocommerce ul.products li.product-category {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: 12px; /* Smooth, modern corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Soft, premium depth shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card hover lift effect */
.woocommerce ul.products li.product-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* 2. Anchor Wrapper (Acts as the crop mask) */
.woocommerce ul.products li.product-category a {
    display: block;
    position: relative;
    text-decoration: none;
    background-color: #1a1a1a; /* Fallback for slow-loading images */
    overflow: hidden; /* Hard boundary for the zooming image */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 3. Image Optimization & Anti-Repeat Fixes */
.woocommerce ul.products li.product-category img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
    
    /* Hardware acceleration fixes to prevent image repetition/tearing on hover */
    background-repeat: no-repeat !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: scale(1);
    
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Silk-smooth zoom */
}

/* Elegant, subtle scale inward */
.woocommerce ul.products li.product-category:hover img {
    transform: scale(1.05); 
}

/* 4. Title & Rich Gradient Overlay */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 25px 25px 25px; /* Ample padding for gradient text framing */
    margin: 0 !important;
    box-sizing: border-box;
    color: #ffffff !important;
    text-align: left;
    
    /* Modern Premium Typography */
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); /* Ensures text readability over bright images */
    
    /* Multi-stop gradient prevents a muddy/gray look */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 100%
    );
    
    z-index: 2;
}

/* 5. Hide Default Product Count Badge */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
    display: none;
}/* End custom CSS */