/* ============================================================ Product Reel Styles - External CSS Include this in your or existing stylesheet ============================================================ */ /* Outer wrapper (prevents overflow on mobile) */ .rxp-reel-wrapper { position: relative; max-width: 950px; width: 100%; margin: 25px auto; overflow: hidden; /* prevents bleed-off */ padding-top: 10px; border-top: 2px dashed #ccc; } /* Horizontal container */ .rxp-reel { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scroll-behavior: smooth; padding: 10px; box-sizing: border-box; max-width: 100vw; /* HARD STOP: never exceed screen */ } .rxp-reel::-webkit-scrollbar { display: none; } /* PRODUCT CARD */ .rxp-item { flex: 0 0 48%; /* SHOW ONLY 2 ITEMS PER VIEW ON MOBILE */ max-width: 48%; background: #fff; text-align: center; font-family: Arial, sans-serif; display: flex; flex-direction: column; justify-content: flex-end; /* image + price pinned bottom */ align-items: center; padding-bottom: 6px; } .rxp-item img { width: 120px; height: auto; border-radius: 5px; cursor: pointer; transition: transform 0.2s; } .rxp-item img:hover { transform: scale(1.07); } .rxp-caption { font-size: 12px; min-height: 32px; margin-top: 6px; } .rxp-price { font-weight: bold; font-size: 16px; margin-top: 3px; } /* DESKTOP: show more on a row */ @media (min-width: 768px) { .rxp-item { flex: 0 0 22%; /* 4 across on desktop */ max-width: 22%; } } /* Arrow Buttons */ .rxp-arrow { position: absolute; top: 45%; background: #ffffff; border: 1px solid #bbb; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 22px; display: flex; justify-content: center; align-items: center; user-select: none; transition: background 0.2s; z-index: 10; } .rxp-arrow:hover { background: #ececec; } .rxp-arrow.left { left: -2px; } .rxp-arrow.right { right: -2px; } /* FINAL MOBILE SAFE — FULL PREVENTION OF BLEED */ body { overflow-x: hidden !important; }