/**
 * CRITICAL Layout Fixes CSS - FINALIZED
 * إصلاحات التخطيط العاجلة لقالب Hozi - النسخة النهائية
 * Fixes: Header overlap, Product Scrollbars, Grid Alignment, Price Centering
 */

/* ========================================
   1. FIX: Header Overlap on Single Product
   ======================================== */

/* Push the main content down moderately */
body.single-product .site-content,
body.single-product .site-main,
body.single-product main.main,
body.single-product #content,
body.single-product .main-content {
    padding-top: 100px !important;
    /* Adjusted to be safe for both title and image */
    margin-top: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure the sticky header stays on top */
.head-mast.head-sticky,
header.header-fixed {
    background-color: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix Product Image Specific Overlap */
/* Adds extra space specifically for the image gallery if it sits higher than the title */
.woocommerce-product-gallery,
.images {
    margin-top: 20px !important;
    padding-top: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Hide duplicate header elements if present */
.hozi-product-header,
.head-mast .product-name,
.head-mast .product-price {
    display: none !important;
}

/* Ensure MAIN product title is visible */
.single-product .entry-title,
.single-product .product_title {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    margin-top: 10px !important;
    clear: both !important;
}

/* ========================================
   2. FIX: Unwanted Scrollbars - FINAL SOLUTION
   ======================================== */

/* *** Widget Section - Remove ALL scroll triggers *** */
.widget-section.widget_at-home-latest-products {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    margin-bottom: 70px !important;
    /* Add breathing room */
}

/* *** The main grid container *** */
.widget_at-home-latest-products .row-items,
.widget_at-home-latest-products .row-items.columns-4,
.widget_at-home-latest-products .row-items.columns-5,
.row-items[class*="columns"] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    padding-bottom: 30px !important;
    /* Add bottom spacing */
}

/* *** The woocommerce wrapper *** */
.widget_at-home-latest-products .woocommerce {
    overflow: visible !important;
    height: auto !important;
}

/* *** Container elements *** */
.widget_at-home-latest-products .container,
.widget_at-home-latest-products .row,
.widget_at-home-latest-products .col-12 {
    overflow: visible !important;
    height: auto !important;
}

/* General containers */
.elementor-widget-container,
.widget-section,
.products,
ul.products {
    overflow: visible !important;
}

/* Specific fix for Sidebar/Widget areas */
#secondary,
#sidebar,
.widget-area,
.widget,
.sidebar-main,
.elementor-column-wrap,
.elementor-widget-wrap {
    overflow: visible !important;
}

/* IMPORTANT: Restore Slick Slider functionality */
.slick-slider,
.slick-list,
.slick-track {
    overflow: hidden !important;
    height: auto !important;
}

/* ========================================
   3. FIX: Product Card Alignment & Buttons (NON-DESTRUCTIVE)
   ======================================== */

/* Ensure the columns are full height flex containers */
.row-items [class*="col-"],
.slick-slide [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    /* Changed from 100% to auto */
    padding-bottom: 0 !important;
}

/* The PRODUCT CARD itself */
.item-product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    background: #fff;
    margin: 0 !important;
}

/* The CONTENT area */
.item-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 60px !important;
    /* Reserve space for button */
    position: relative !important;
    /* Center all children (like price) horizontally */
    align-items: center !important;
    text-align: center !important;
}

/* PRICE Centering Fix */
.item .price {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

/* Ensure flex prices are centered too */
.item-content .price {
    align-self: center !important;
}

/* Force Title Height */
.item-title {
    margin-bottom: 10px !important;
    min-height: 45px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4 !important;
    text-align: center !important;
    width: 100% !important;
}

/* The BUTTON - Absolute Positioning */
.widget_at-home-latest-products .item-product .button,
.row-items [class*="col-"] .item-product .button,
.slick-slide .item-product .button {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
    width: calc(100% - 30px) !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
    z-index: 5;
}