/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* ======================================================= */
/* 1. Menu                                                 */
/* ======================================================= */

.menu-item span.description { display: none !important; }

/* ======================================================= */
/* 1. GLOBAL 1:1 ASPECT RATIO FOR ALL CATEGORY IMAGES      */
/* ======================================================= */

/* Target the list item used for all category archives */
.product-category.product > a {
    /* Creates the 1:1 aspect ratio container */
    display: block;
    position: relative;
    padding-bottom: 100%; /* Pushes height to match width */
    height: 0;
    overflow: hidden; 
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Ensure the image fills the 1:1 container */
.product-category.product > a img {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

/* ======================================================= */
/* 1. ESTABLISH THE 1:1 SQUARE CONTAINER */
/* Targets the specific wrapper around the image link. */
/* ======================================================= */
.products li.product .image_frame.product-loop-thumb {
    /* Set this container as the 1:1 square for height calculation */
    position: relative;
    padding-bottom: 100%; /* Creates the 1:1 height based on width */
    height: 0; /* Collapse initial height, letting padding define it */
    overflow: hidden; 
    display: block; /* Ensure it behaves like a block element */
}

/* 2. ENSURE IMAGE FILLS THE SQUARE */
/* Targets the actual image element */
.products li.product .image_frame.product-loop-thumb img {
    /* Force image to cover the entire 1:1 container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Prevents image distortion */
}

/* 3. FIX HOVER ELEMENTS PLACEMENT */
/* Targets the theme's custom link wrapper containing the image and the buttons */
.products li.product .mfn-li-product-row-image .image_frame.product-loop-thumb .image_wrapper {
    /* This element must also fill the container to house the absolutely positioned hover buttons (image_links) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ======================================================= */
/* 2. ABSOLUTE POSITION BANNER TITLE (H2 - Top Line)       */
/* ======================================================= */
.woocommerce ul.products li.product .woocommerce-loop-category__title {
    position: absolute;
    width: 100%;
    
    /* Set H2 to full 100px height for the background color */
    height: 100px; 
    
    background-color: rgba(255,255,255,.80);
    text-align: center;
    margin: 0;
    z-index: 2; 
    transition: color 0.3s ease;

    /* Positioning: Center the 100px banner block over the image */
    top: calc(50% - 50px); 
    
    /* CRITICAL FIX: Position the TITLE text line (H2) relative to the banner's top edge.
       We set the padding to 0 and use position: absolute on the title text if possible, 
       but since we can't do that, we use padding to position the text inside the H2. */
    
    /* Adjust padding to center the title within the top part of the 100px area */
    padding-top: 20px; 
    margin-top: 0; /* Reset margin */
    
    /* Title text styling */
    font-size: 1.5em;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    line-height: 1.2; 
    
    /* Default color for the main title text */
    color: #333333; 
}

.woocommerce-loop-category__title mark.count {
  display: none !important;
}

/* ======================================================= */
/* 3. "SHOP NOW" TEXT (SPAN - Bottom Line)                 */
/* ======================================================= */
.products .product-category.product .shop-now-text {
    position: absolute; 
    width: 100%;
    text-align: center;
    
    /* CRITICAL FIX: Move SPAN up, placing its top edge at 50% + 5px.
       The title's text block ends around 50% + 15px. This puts the span right below it. */
    top: calc(50% + 5px); 
    
    display: block; 
    z-index: 2; 
    visibility: visible !important; 

    /* Styling */
    font-size: 1em; 
    font-weight: 500; 
    color: #333333; /* Same color as the title */
    line-height: 1.2; 
    
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* ======================================================= */
/* Remove Descriptions from Product Categories             */
/* ======================================================= */
/* Leave the descriptions in the code for screen readers   */
.product-category div {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}