/**
 * The Product cards upsells (upsells compo): the structural rules every such upsell needs whatever its design, on
 * every page that shows one (UpsellsControllerFR_cl::enqueuePlaceAssets()). They lived in the product compo's
 * product.css until 05-11-2026, when the cards could only show on the product page. A design's own look is its
 * compiled CSS (look/v_product_cards/generated_css.php), scoped by `.cl-upsell-{id}`.
 *
 * Static on purpose: a compiled rule reaches a design only when it is saved again, a file on the next deploy.
 */

/* ─── The confirmation pop-up after an add — the product quick view's close-button concept ─────────────────────────
   The × is the store's close button (.cl-modal-close-x, its look from Store → Site info) as a DIRECT child of
   .cl_modal_container, pinned HALF OUTSIDE the top-trailing corner, as .cl-product-quickview's
   (product_quickview.css). It is position:absolute, so the shell itself must not scroll: the shared
   `.cl_modal_center .cl_modal_container` rule (public.css) puts overflow:auto on it, which would clip the × and scroll
   it away with the content, so the scroll moves INWARD to .cl_modal_body. One class more than public.css's rule, so
   the order the two files print in does not matter.

   The compiled rules (the design's Container Style, routed to the container and the body) never declare overflow /
   display / flex-direction / max-height: that key's brush allows max-width only (style_generator.php). */
.cl-upsell-celebration.cl_modal_center .cl_modal_container {
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* The shared cap is 96%: on a transform-centred box that leaves 2% of the viewport per side, while the × needs
       15px above the edge — it clipped on any viewport shorter than about 750px. 20px per side instead. */
    max-height: calc(100% - 40px);
}
.cl-upsell-celebration .cl_modal_body {
    /* min-height:0 lets the flex child shrink below its content, so it scrolls instead of growing past the cap. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* The default inset; the design's own padding (compiled, one class more) wins over it. */
    padding: 20px;
}
/* Half outside, as the quick view's. */
.cl-upsell-celebration .cl-modal-close-x {
    top: -15px;
}
/* "View cart": the last flex item after the scrolling body, edge to edge (the container carries no padding), the
   quick view footer's look — it never shrinks under a long message, a hairline separates it from the content, and it
   takes the card's bottom corners. One class more than the compiled rule of the same element. */
.cl-upsell-celebration.cl_modal .cl_modal_container > .cl_p_upsell_celebration_actions {
    flex-shrink: 0;
    border-top: 1px solid var(--cl-border-color1, #e5e7eb);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    padding: 4px 10px;
}

/* The card photo: the box the badges on the photo are placed in (G29, public/partials/photo_badges.php). */
.cl-p-upsell-image {
    position: relative;
}

/* The row's arrows (demo2 PR-18, 02-11-2026): the slider engine's arrows over the cards sit in this box, which holds
   the row; touch screens swipe, so they are left out there. */
.cl-p-upsell-slider {
    position: relative;
}
@media (hover: none) {
    .cl-p-upsell-slider .cl_slider_nav {
        display: none;
    }
}