/* Stops the page from scrolling/bleeding sideways on phones — any element that's ever slightly wider than the screen (long text, an animation, an absolutely-positioned badge, etc.) gets clipped at the edge instead of pushing the whole page out. */ html, body { max-width: 100%; overflow-x: clip; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .animate-marquee { display: inline-block; white-space: nowrap; animation: marquee 20s linear infinite; } /* Horizontal sliding product rail used on the Home page */ .product-rail { display: flex; gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; } .product-rail::-webkit-scrollbar { height: 8px; } .product-rail::-webkit-scrollbar-track { background: #0f172a; border-radius: 999px; } .product-rail::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; } .product-rail::-webkit-scrollbar-thumb:hover { background: #dc2626; } .rail-card { scroll-snap-align: start; flex: 0 0 auto; width: 260px; } .category-tile { scroll-snap-align: start; flex: 0 0 auto; width: 150px; } /* Auto-sliding "Explore Every Category" carousel on the Home page */ .category-slider-viewport { overflow: hidden; } .category-slider-track { display: flex; transition: transform 0.6s ease; } .category-slide { flex: 0 0 100%; min-width: 100%; } .slider-arrow { position: absolute; top: 45%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 9999px; background: #ffffff; border: 1px solid #e2e8f0; color: #0f172a; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); cursor: pointer; z-index: 10; transition: background 0.2s, color 0.2s, transform 0.2s; } .slider-arrow:hover { background: #dc2626; color: #ffffff; transform: translateY(-50%) scale(1.06); } .slider-arrow-left { left: -14px; } .slider-arrow-right { right: -14px; } @media (max-width: 640px) { .slider-arrow-left { left: 2px; } .slider-arrow-right { right: 2px; } .slider-arrow { width: 34px; height: 34px; } } .slider-dot { width: 8px; height: 8px; border-radius: 9999px; background: #cbd5e1; border: none; cursor: pointer; padding: 0; transition: all 0.25s ease; } .slider-dot.active { width: 24px; background: #dc2626; } .demo-tile-badge { position: absolute; top: 8px; right: 8px; background: rgba(15, 23, 42, 0.85); color: #fca5a5; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; } /* Small logo watermark shown on every product photo. Position and size are controlled by the three CSS variables below, which layout.js sets on at load time from the Admin panel's "Reposition & Resize Logo" tool (saved in Supabase so it applies for every visitor). --product-logo-top / --product-logo-left are percentages of the photo box, so the badge lands in the same relative spot no matter how big the card is; --product-logo-size sets the badge's width in pixels — height follows automatically at a 2:1 ratio to match the logo's own rectangular shape, so it's never stretched or cropped. These defaults are only used before the settings load or if none have been saved yet. */ :root { --product-logo-top: 4%; --product-logo-left: 4%; --product-logo-size: 56px; } .product-watermark { position: absolute; top: var(--product-logo-top); left: var(--product-logo-left); width: var(--product-logo-size); aspect-ratio: 2 / 1; height: auto; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.92); border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); z-index: 10; pointer-events: none; /* clicks pass through to the image/quick view below */ } .product-watermark img { width: 100%; height: 100%; object-fit: contain; display: block; } .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }