/* * Two-row horizontal-scroll carousel for recommendation slots that opt in with * `two_row=true` (CHICWISH-1471). embed.phtml stamps `.clerk-recommendations--two-row` * on those wrappers only, so the rules key off the same flag that drives * clerk-carousel.js. Currently the Cart cross-sell and Success-page slots opt in; the * PDP "You Might Also Like" slot and the add-to-cart popup cross-sell stay single-row * (CHICWISH-1506). * * The shared Clerk design renders a single-row slider that can return 100+ products * (8 locally, 100+ on staging/live). Opted-in slots become a two-row grid whose items * flow into columns (`grid-auto-flow: column`) and scroll on the x-axis; the arrows are * added by clerk-carousel.js and drive the native scroll with `scrollBy`. Clerk's own * arrows are hidden because they move the strip with a CSS transform, which fights * native scrolling. * * Two non-obvious requirements, both learned on staging: * - `!important` is needed because Clerk styles the slider (flex, nowrap) inline * after it hydrates, which otherwise wins over these rules. * - the cards must be forced to `display: block`; Clerk renders them as flex items, * and as flex items the grid places them row-first and `grid-auto-flow: column` * silently degrades into a wrapping wall of rows. */ .clerk-recommendations--two-row { position: relative; } .clerk-recommendations--two-row .rs-product-slider { display: grid !important; grid-auto-flow: column !important; grid-template-rows: repeat(2, auto) !important; grid-auto-columns: 44vw !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; scrollbar-width: none; } .clerk-recommendations--two-row .rs-product-slider::-webkit-scrollbar { display: none; } .clerk-recommendations--two-row .rs-product-slider > .rs-card { width: auto !important; display: block !important; } .clerk-recommendations--two-row .clerk-slider-nav { display: none !important; } @media (min-width: 768px) { .clerk-recommendations--two-row .rs-product-slider { grid-auto-columns: 14.5vw !important; } } /* Arrow buttons injected by clerk-carousel.js; shown only while the strip overflows */ .clerk-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; } .clerk-carousel--scrollable .clerk-carousel-nav { display: flex; } .clerk-carousel-nav[disabled] { opacity: 0.35; cursor: default; } .clerk-carousel-nav--prev { left: 6px; } .clerk-carousel-nav--next { right: 6px; } .clerk-carousel-nav::before { content: ''; display: block; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .clerk-carousel-nav--prev::before { transform: rotate(-135deg); margin-left: 3px; } .clerk-carousel-nav--next::before { transform: rotate(45deg); margin-right: 3px; } /* * Waterfall layout for the PDP recommendation rails (CHICWISH-1581). The observer * AddPdpMobileLayoutBodyClass stamps `clerk-pdp-mobile-waterfall` on when the * store-scoped setting clerk_recommendations/pdp_layout/mobile_mode is `waterfall`. * Below Clerk's own 900px breakpoint the single-row slider becomes a two-column grid * that stacks every card and scrolls with the page. Same `!important` and * `display: block` rules as the two-row carousel above, for the same reasons. * Recent View keeps the slider; desktop is untouched. * * Clerk's slider keeps its swipe handler on the grid. On touchmove it writes an inline * `left: Npx` to every .clerk-slider-item and past 20px it snaps the whole set to the next * item, so a vertical scroll with a little horizontal drift shoves the two columns sideways * (client video, 2026-09-10). Pinning `left` and dropping the 300ms transition on the cards * makes those writes inert; `touch-action: pan-y` keeps the vertical pan with the browser. */ @media (max-width: 900px) { .clerk-pdp-mobile-waterfall .clerk-slot--pdp_you_might_like .rs-product-slider, .clerk-pdp-mobile-waterfall .clerk-slot--pdp_top_sellers .rs-product-slider { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 10px !important; overflow: visible !important; transform: none !important; white-space: normal !important; } .clerk-pdp-mobile-waterfall .clerk-slot--pdp_you_might_like .rs-product-slider > .rs-card, .clerk-pdp-mobile-waterfall .clerk-slot--pdp_top_sellers .rs-product-slider > .rs-card { display: block !important; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; left: 0 !important; transition: none !important; } .clerk-pdp-mobile-waterfall .clerk-slot--pdp_you_might_like .rs-product-slider, .clerk-pdp-mobile-waterfall .clerk-slot--pdp_top_sellers .rs-product-slider { touch-action: pan-y; } .clerk-pdp-mobile-waterfall .clerk-slot--pdp_you_might_like .clerk-slider-nav, .clerk-pdp-mobile-waterfall .clerk-slot--pdp_top_sellers .clerk-slider-nav { display: none !important; } }