.sr-section { --sr-columns: 4; max-width: 1200px; margin: 48px auto; padding: 0 20px; text-align: center; box-sizing: border-box; } .sr-section * { box-sizing: border-box; } .sr-heading { font-size: clamp(24px, 3vw, 34px); color: #0f7a72; margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; } .sr-subheading { color: #6b6357; margin: 0 0 28px; } /* Horizontally scrollable reel rail */ .sr-grid { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 4px 4px 14px; text-align: left; scrollbar-width: thin; } .sr-grid::-webkit-scrollbar { height: 6px; } .sr-grid::-webkit-scrollbar-thumb { background: #ddd3c0; border-radius: 3px; } .sr-card { background: none; border: none; padding: 0; cursor: pointer; display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; font: inherit; color: inherit; width: clamp(140px, 26vw, 190px); scroll-snap-align: start; } .sr-thumb { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; background: #e9e3d6; overflow: hidden; display: block; } /* Skeleton shimmer shown until every reel in the row has its poster ready, then the whole row reveals together instead of popping in one by one. */ .sr-card.sr-skeleton .sr-thumb { background: linear-gradient(100deg, #ece5d8 30%, #f5f0e6 50%, #ece5d8 70%); background-size: 200% 100%; animation: sr-shimmer 1.4s ease-in-out infinite; } @keyframes sr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sr-thumb-video { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; } .sr-card.sr-skeleton .sr-thumb-video, .sr-card.sr-skeleton .sr-views, .sr-card.sr-skeleton .sr-card-title, .sr-card.sr-skeleton .sr-card-price { opacity: 0; } .sr-card.sr-loaded .sr-thumb { animation: none; } .sr-card.sr-loaded .sr-thumb-video, .sr-card.sr-loaded .sr-views, .sr-card.sr-loaded .sr-card-title, .sr-card.sr-loaded .sr-card-price { opacity: 1; transition: opacity .35s ease; } .sr-views { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 5px; pointer-events: none; display: flex; align-items: center; gap: 4px; } .sr-eye-icon, .sr-mute-icon { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; } .sr-eye-icon .sr-ic { width: 11px; height: 11px; } .sr-card-title { font-size: 13.5px; font-weight: 600; color: #2b2b2b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-card-price { font-size: 13px; color: #444; } .sr-card-price ins { text-decoration: none; color: #0f7a72; font-weight: 700; } .sr-card-price del { color: #999; margin-left: 4px; } /* Full-screen viewer (built + appended to by JS, never in initial HTML) */ .sr-viewer { position: fixed; inset: 0; z-index: 99999; display: none; background: #000; align-items: center; justify-content: center; } .sr-viewer.is-open { display: flex; } .sr-viewer-inner { position: relative; width: 100%; max-width: 420px; height: 100%; max-height: 100vh; background: #111; overflow: hidden; } @media (min-width: 480px) { .sr-viewer-inner { max-height: 90vh; margin: auto; border-radius: 14px; } } .sr-viewer-track { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; } .sr-viewer-track::-webkit-scrollbar { display: none; } .sr-slide { position: relative; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; } .sr-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .sr-top-controls { position: absolute; top: 14px; right: 12px; display: flex; gap: 10px; z-index: 5; } .sr-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sr-btn .sr-ic { width: 18px; height: 18px; display: block; } /* Icons are rendered as colour masks (background-color painted through an SVG shape) rather than inline