/* 
*******
    PROBLEM 1 Show full image content
*******
    */

.cbp-caption-defaultWrap,
.cbp-caption-defaultWrap.owl-theme,
.cbp-caption-defaultWrap.sync-portfolio-carousel,
.cbp-caption-defaultWrap.owl-carousel {
    width: 100% !important;
    height: 400px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f8f9fa;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cbp-caption-defaultWrap img,
.cbp-caption-defaultWrap .item img,
.owl-carousel .item img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* This shows full image */
    object-position: center !important;
    display: block !important;
}

/* Fix Owl Carousel heights */
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item {
    height: 100%  !important;
}

.owl-carousel .item {
    height: 100%  !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}





/*
*******
    PROBLEM 2 image overlapping
*******
*/

.product-detail-slider .Gallery .swiper-slide img.myimage {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    background: #fff !important;
}







/*
*******
    PROBLEM 3 click the item
*******
*/


/* Fix the container heights and overflow */
.product-item.owl-carousel {
    height: auto !important;
    max-height: 300px !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 15px !important;
}

/* Fix owl-stage-outer container */
.product-item .owl-stage-outer {
    height: auto !important;
    max-height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
}

/* Fix owl-stage positioning */
.product-item .owl-stage {
    height: auto !important;
    max-height: 280px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Fix individual owl-items */
.product-item .owl-item {
    height: auto !important;
    max-height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix item images */
.product-item .owl-item .item.p-item-img {
    width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Fix images inside items */
.product-item .owl-item .item.p-item-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Navigation positioning - keep them inside the image area */
.product-item .owl-nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 15px !important; /* Stay above the text area */
    pointer-events: none !important;
    z-index: 10 !important;
}

.product-item .owl-nav button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
    background: rgba(0,0,0,0.5) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: white !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 11 !important;
}

.product-item .owl-nav .owl-prev {
    left: 10px !important;
}

.product-item .owl-nav .owl-next {
    right: 10px !important;
}

/* Show navigation on hover */
.product-item:hover .owl-nav button {
    opacity: 1 !important;
}

/* Navigation icons */
.product-item .owl-nav button .navigation-link-prev,
.product-item .owl-nav button .navigation-link-next {
    position: static !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.product-item .owl-nav button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: white !important;
}

/* Disable owl dots */
.product-item .owl-dots {
    display: none !important;
}

/* Fix product details positioning */
.p-item-detail {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 10px !important;
    padding: 10px 5px !important;
    background: white !important;
    pointer-events: auto !important;
}

/* Ensure product title links are clickable */
.p-item-detail .p-item-name {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
    margin-bottom: 8px !important;
}

.p-item-detail .p-item-name a {
    display: block !important;
    position: relative !important;
    z-index: 22 !important;
    pointer-events: auto !important;
    color: #000 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    cursor: pointer !important;
}

.p-item-detail .p-item-name a:hover {
    color: #f7941d !important;
}

/* Fix price positioning */
.p-item-detail .p-item-price {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: auto !important;
    margin-bottom: 0 !important;
}

/* Add-to-cart button positioning */
.product-listing-products .product-list .product-item .p-item-img .listing-cart-icon {
    position: absolute !important;
    z-index: 15 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #62ab00 !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.product-listing-products .manage-color-hover:hover .product-item .p-item-img .listing-cart-icon {
    opacity: 1 !important;
}

/* Container for the whole product card */
.manage-color-hover {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 30px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-item.owl-carousel {
        max-height: 250px !important;
    }
    
    .product-item .owl-stage-outer {
        max-height: 220px !important;
    }
    
    .product-item .owl-item .item.p-item-img {
        height: 200px !important;
        max-height: 200px !important;
    }
}

@media (max-width: 480px) {
    .product-item.owl-carousel {
        max-height: 220px !important;
    }
    
    .product-item .owl-stage-outer {
        max-height: 200px !important;
    }
    
    .product-item .owl-item .item.p-item-img {
        height: 180px !important;
        max-height: 180px !important;
    }
}


/* PROBLEM 4 latest arrival items */

/* Latest Arrivals Carousel Fix - Add this to your custom.css */

/* Fix the main carousel container */
.lastest_featured_products.owl-carousel {
    display: block !important;
    overflow: visible !important;
}

/* Ensure consistent item heights */
.lastest_featured_products .owl-stage {
    display: flex !important;
    align-items: flex-start !important;
    height: auto !important;
}

/* Make all owl items equal height */
.lastest_featured_products .owl-item {
    height: auto !important;
    display: flex !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
    float: none !important;
}

/* Fix the card container */
.lastest_arrival_items.item {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Standardize card heights */
.lastest_arrival_items .card {
    height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    background: #fff !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

/* Image container with fixed height */
.lastest_arrival_items .card .image-holder {
    height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* Standardize images */
.lastest_arrival_items .card .image-holder img.card-img-top {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.3s ease !important;
}

/* Hover effect for images */
.lastest_arrival_items .card:hover .image-holder img {
    transform: scale(1.05) !important;
}

/* Fixed height card body */
.lastest_arrival_items .card .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 15px !important;
    height: 220px !important;
    min-height: 220px !important;
    background: #fff !important;
}

/* Product title with fixed height */
.lastest_arrival_items .card .card-body h5.card-title {
    height: 120px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Product title link */
.lastest_arrival_items .card .card-body h5.card-title a {
    color: #000 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Price with fixed height */
.lastest_arrival_items .card .card-body p.card-text {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
}

/* Remove any transforms that might cause alignment issues */
.lastest_featured_products .owl-item[style*="transform"] {
    transform: none !important;
}

/* Ensure consistent spacing */
.lastest_arrivals {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
    overflow: hidden !important;
}