/**
 * AI Personalization — Defensive containment CSS
 *
 * Prevents the AI personalization sections from overflowing their containers
 * and overlapping with native catalog elements (add-to-cart buttons, etc.).
 *
 * Key principle: Owl Carousel items use float:left and the stage can be wider
 * than the container. Without proper containment, floated items leak out and
 * visually overlay native Magento catalog elements below.
 */

/* ── Clearfix: contain floated carousel items within the wrapper ── */
.ai-personalization-wrapper {
    clear: both;
}

/* ── Contain the products grid so Owl Carousel items don't leak ── */
.ai-personalization-wrapper .products-grid,
.ai-personalization-wrapper .products.wrapper.grid {
    overflow: hidden;
}

/* ── Owl Carousel stage containment (redundant safety net) ── */
.ai-personalization-wrapper .owl-carousel .owl-stage-outer {
    overflow: hidden;
}

/* ── Prevent product items from growing unbounded horizontally ── */
.ai-personalization-wrapper .product-item {
    max-width: 100%;
    box-sizing: border-box;
}