/* ======================================================================================
 AI RECOMMANDATION PRODUCTS PAGE DESIGNING
=========================================================================================== */
/* AI Product Recommandation for slider */
.ai-product-recommendation { padding: 0 20px; }
.ai-product-recommendation .block-title,
.block-related-products .block-title h2,
.block-mb-ai-rule-slider .block-title h2 { font-weight: 600; }
.ai-product-recommendation .products-wrapper.slider .owl-dots {
    position: absolute;
    bottom: -20px; 
    left: 0;
    right: 0;
}
.ai-product-recommendation .products-wrapper.slider {
    padding-bottom: 40px; /* space for dots */
}
.ai-product-recommendation .products-wrapper.slider .owl-dot span {
    width: 10px;
    height: 10px;
    background: #999;
    display: inline-block;
    border-radius: 50%;
    margin: 5px;
}
.ai-product-recommendation .products-wrapper.slider .owl-dot.active span {
    background: #222;
}
.ai-product-recommendation .products-wrapper.slider .owl-nav {
    position: absolute;
    right: 0;
    top: -50px;
    display: flex;
    gap: 5px;
}
.ai-product-recommendation .owl-carousel .owl-nav button.owl-prev, .ai-product-recommendation .owl-carousel .owl-nav button.owl-next { font-size: 21px; }
.ai-product-recommendation .products-wrapper.slider .owl-dots {
    display: block !important;
    text-align: center;
    margin-top: 15px;
}
.ai-product-recommendation .products-wrapper.slider .owl-stage-outer .product-item { padding: 10px; border: 1px solid #ddd; }
.ai-product-recommendation .product-item-info .product-item-details {
    padding: 10px 0; 
}
.ai-product-recommendation .product-item-info .actions-primary,
.ai-product-recommendation .product-item-actions a {
    display: inline-block;
    margin: 5px 0;
}
.ai-product-recommendation .products-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}  
.column.main .block-mb-ai-rule-slider .products-wrapper .product-item,
.column.main .block-mb-ai-rule-slider .product-item {
    border: 1px solid #ddd;
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-product-recommendation .owl-item .product-item-info { width: 100%; }
.ai-product-recommendation .owl-item .product-item-info {
    border: 1px solid transparent;
    padding: 10px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.ai-product-recommendation .owl-item .product-item-info:hover, 
.ai-product-recommendation .owl-item .product-item-info.active { background: #fff;
    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.3);        
    border: 1px solid #ddd;
}
.ai-product-recommendation .owl-item .product-item-actions { opacity: 0; visibility: hidden; }
.ai-product-recommendation .product-item.product-item-info:hover .product-item-actions { opacity: 1;  visibility: visible; }

.ai-product-recommendation .product-item-info .product-item-details {
    padding: 10px 0;
}
.ai-product-recommendation .product-item-info .actions-primary,
.ai-product-recommendation .product-item-actions a {
    display: inline-block;
    margin: 5px 0;
}
.block-mb-ai-rule-slider .product-items:not(.owl-loaded) { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: hidden; 
    padding: 0 0 10px; list-style: none; }
.block-mb-ai-rule-slider .product-items:not(.owl-loaded) > .product-item { flex: 0 0 220px; margin: 0; border: 1px solid #ddd; padding: 10px; }
.block-mb-ai-rule-slider .products { margin: 30px 40px; }
/* Slider: visible arrows and dots */
.block-mb-ai-rule-slider .owl-carousel { position: relative; padding: 0 40px;}
.block-mb-ai-rule-slider .owl-nav { display: block !important; position: absolute; top: 35%; left: 0; right: 0; margin: 0; padding: 0; 
    transform: translateY(-50%); pointer-events: none; }
.block-mb-ai-rule-slider .owl-prev,
.block-mb-ai-rule-slider .owl-next { position: absolute; width: 40px; height: 40px; margin: 0; padding: 0; background: #333 !important; 
    color: #fff !important; border: none; border-radius: 50%; font-size: 0; line-height: 44px; cursor: pointer; pointer-events: auto; 
    display: flex !important; align-items: center; justify-content: center; transition: background 0.2s;  opacity: 0.8; }
/* Hide nav text, show arrow via CSS so it always appears */
.block-mb-ai-rule-slider .owl-prev span,
.block-mb-ai-rule-slider .owl-next span { display: none !important; }
.block-mb-ai-rule-slider .owl-next::before { display: none; }
.block-mb-ai-rule-slider .owl-prev::after { display: none; }
.block-mb-ai-rule-slider .owl-prev:hover,
.block-mb-ai-rule-slider .owl-next:hover { background: #555 !important; color: #fff !important; }
.block-mb-ai-rule-slider .owl-prev { left: -10px; z-index: 5; }
.block-mb-ai-rule-slider .owl-next { right: -10px; z-index: 5; }
.block-mb-ai-rule-slider .owl-dots { display: block !important; text-align: center; margin-top: 15px; padding: 0; position: relative; top: 30px;}
.block-mb-ai-rule-slider .owl-dot { display: inline-block; margin: 4px 6px; }
.block-mb-ai-rule-slider .owl-dot span { display: block; width: 12px; height: 12px; background: #ccc; border-radius: 50%; transition: background 0.2s; }
.block-mb-ai-rule-slider .owl-dot:hover span { background: #999; }
.block-mb-ai-rule-slider .owl-dot.active span { background: #333; }
.block-mb-ai-rule-slider .owl-item .product-item-info { max-width: 70%; text-align: center; width: 100%; }
.block-mb-ai-rule-slider .owl-prev i, .block-mb-ai-rule-slider .owl-next i { font-size: 18px; color: #fff; }
.block-mb-ai-rule-slider .owl-prev, .block-mb-ai-rule-slider .owl-next { display: flex !important; align-items: center; justify-content: center; }
.block-mb-ai-rule-slider .owl-prev:hover,
.block-mb-ai-rule-slider .owl-next:hover { opacity: 1; }

/* Grid section for Ai Product Recommandation */
.ai-product-recommendation .products-wrapper.grid-layout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
} 
.ai-product-recommendation.grid .products-wrapper.grid-layout .product-item { 
    border: 1px solid #ddd;
    padding: 10px; 
    max-width: 100%;
    min-width: 240px;
}
.ai-product-recommendation.grid .products-wrapper.grid-layout .product-item:hover {
    cursor: pointer;
    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.3);
}
/* Grid: multi-column layout (Luma-style) */
.page-layout-1column .block-related-products .products-grid .product-item {
    border: 1px solid #ddd;
    padding: 9px;
    width: 100%;
    text-align: center; 
}
.block-related-products .products-grid .product-item-info {
    width: 100%;
    min-height: 319px;
    height: 100%;
}
.block-related-products .products-grid .product-item-inner { 
    margin: 9px 0 0 -1px; box-shadow: none;
}
.block-related-products .products-grid .product-item-actions {
    margin: 10px 0 10px;
}
.block-related-products .products-grid .product-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
}
@media(min-width:1279px) and (max-width:1440px) {
    .ai-product-recommendation .products-wrapper.grid-layout { gap: 12px; } 
    .block-mb-ai-rule-slider .products { margin: 30px 50px; padding: 0; }
    .block-mb-ai-rule-slider .owl-next { right: -45px; }
    .block-mb-ai-rule-slider .owl-prev { left: -45px; }
}
@media(min-width:1024px) and (max-width:1279px) { 
    .block-mb-ai-rule-slider .products { margin: 30px 50px; padding: 0; }
    .block-mb-ai-rule-slider .owl-next { right: -45px; }
    .block-mb-ai-rule-slider .owl-prev { left: -45px; }
    .ai-product-recommendation .products-wrapper.grid-layout { grid-template-columns: repeat(4, 1fr); gap: 12px;}
}
@media (min-width: 768px) and (max-width: 1023px) {
    .block-mb-ai-rule-slider .products { margin: 30px 50px; padding: 0; }
    .block-mb-ai-rule-slider .owl-next { right: -45px; }
    .block-mb-ai-rule-slider .owl-prev { left: -45px; }
    .ai-product-recommendation .products-wrapper.grid-layout { grid-template-columns: repeat(3, 1fr); gap: 12px;}
    .block-related-products .products-grid .product-items {  grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) { 
    .block-mb-ai-rule-slider .products { margin: 30px 50px; padding: 0; }
    .block-mb-ai-rule-slider .owl-next { right: -45px; }
    .block-mb-ai-rule-slider .owl-prev { left: -45px; }
    .block-related-products .products-grid .product-items { grid-template-columns: repeat(2, 1fr); }
    .ai-product-recommendation .products-wrapper.grid-layout { grid-template-columns: repeat(3, 1fr); gap: 12px;} 
}
@media (max-width: 640px) {     
    .ai-product-recommendation .products-wrapper.grid-layout { grid-template-columns: repeat(2, 1fr); gap: 12px;}
}
@media (max-width: 576) {
}
@media (max-width: 480px) { 
    .block-mb-ai-rule-slider .products { margin: 30px 50px; padding: 0; }
    .block-mb-ai-rule-slider .owl-next { right: -45px; }
    .block-mb-ai-rule-slider .owl-prev { left: -45px; }
    .block-related-products .products-grid .product-items { grid-template-columns: 1fr; }
    .ai-product-recommendation .products-wrapper.grid-layout { grid-template-columns: 1fr; gap: 12px;}
    .ai-product-recommendation.grid .products-wrapper.grid-layout .product-item { width: 100%; display: flex; align-items: center; justify-content: center;}
    .ai-product-recommendation.grid .products-wrapper.grid-layout .product-item {
         border: 1px solid #ddd;
         padding: 10px;
         cursor: pointer;
         box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.3);
        } 
}

/* ===================================== AI PRODUCT RECOMMANDTION END UP =================================================== */