/* ═══════════════════════════════════════════════════════════════════ ZSU FRONTEND CSS v11 Real file: assets/css/zsu-frontend.css Dynamic CSS vars injected via wp_add_inline_style('zsu-frontend',…) ═══════════════════════════════════════════════════════════════════ */ /* ── 0. CSS Reset & Base ────────────────────────────────────────── */ .zsu-body *, .zsu-body *::before, .zsu-body *::after, .zsu-lightbox *, .zsu-lightbox *::before, .zsu-lightbox *::after, .zsu-share-sheet *, .zsu-share-sheet *::before, .zsu-share-sheet *::after, .zsu-product-modal *, .zsu-product-modal *::before, .zsu-product-modal *::after, .zsu-studio-wrap *, .zsu-studio-wrap *::before, .zsu-studio-wrap *::after, .zsu-toast-container * { box-sizing: border-box; margin: 0; padding: 0; } /* CSS custom properties — scoped to our root classes so they NEVER override the parent theme's :root variables on other pages. On the virtual /shorts/ page, gets .zsu-body so this works. On shortcode embeds, .zsu-embedded-wrap provides the scope. */ .zsu-body, .zsu-embedded-wrap, .zsu-lightbox, .zsu-share-sheet, .zsu-product-modal, .zsu-toast-container { --zsu-primary: #7c3aed; --zsu-accent: #f59e0b; --zsu-grad-start: #000; --zsu-grad-end: #000; --zsu-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --zsu-radius: 20px; --zsu-radius-sm: 12px; --zsu-radius-lg: 28px; --zsu-neon: 0 0 20px rgba(124,58,237,0.5), 0 0 40px rgba(124,58,237,0.2); --zsu-glass-bg: rgba(15,12,41,0.6); --zsu-primary-rgb: 124,58,237; --zsu-accent-rgb: 245,158,11; --zsu-text: #f0f0f8; --zsu-text-muted: #94a3b8; --zsu-text-dim: #475569; --zsu-surface: rgba(255,255,255,0.05); --zsu-surface-2: rgba(255,255,255,0.08); --zsu-border: rgba(255,255,255,0.08); --zsu-border-hover: rgba(255,255,255,0.18); --zsu-shadow-sm: 0 2px 12px rgba(0,0,0,0.3); --zsu-shadow-md: 0 8px 32px rgba(0,0,0,0.45); --zsu-shadow-lg: 0 20px 60px rgba(0,0,0,0.6); --zsu-trans: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); --zsu-trans-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --zsu-header-h: 62px; --zsu-filter-h: 52px; } /* scroll-behavior only on the virtual full-page shorts app */ .zsu-body { scroll-behavior: smooth; } .zsu-body { font-family: var(--zsu-font); background: linear-gradient(160deg, var(--zsu-grad-start) 0%, var(--zsu-grad-end) 100%) fixed; background-color: var(--zsu-grad-start); color: var(--zsu-text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--zsu-primary-rgb), 0.4); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--zsu-primary-rgb), 0.7); } /* Selection */ ::selection { background: rgba(var(--zsu-primary-rgb), 0.35); color: #fff; } /* Focus rings */ :focus-visible { outline: 2px solid var(--zsu-primary); outline-offset: 3px; border-radius: 4px; } /* ── 1. Particle Canvas ─────────────────────────────────────────── */ #zsuParticleCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45; } /* ── 2. Header ──────────────────────────────────────────────────── */ .zsu-header { position: sticky; top: 0; z-index: 900; height: var(--zsu-header-h); background: var(--zsu-glass-bg); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--zsu-border); transition: var(--zsu-trans); } .zsu-header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.5); border-bottom-color: rgba(var(--zsu-primary-rgb), 0.25); } .zsu-header-inner { display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 20px; max-width: 1600px; margin: 0 auto; } /* Logo */ .zsu-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; } .zsu-logo-img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; } .zsu-logo-text { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.5px; white-space: nowrap; } /* Header search */ .zsu-header-search { flex: 1; max-width: 520px; position: relative; } .zsu-search-trigger { display: none; /* hidden on desktop, visible on mobile */ background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 10px; color: var(--zsu-text-muted); padding: 8px 12px; cursor: pointer; transition: var(--zsu-trans); } .zsu-search-trigger:hover { background: var(--zsu-surface-2); color: #fff; } .zsu-search-dropdown { width: 100%; background: var(--zsu-glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--zsu-border); border-radius: 14px; overflow: hidden; } .zsu-search-input-wrap { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--zsu-border); } .zsu-search-icon { color: var(--zsu-text-dim); flex-shrink: 0; } .zsu-search-field { flex: 1; background: none; border: none; outline: none; color: var(--zsu-text); font-size: 14px; font-family: var(--zsu-font); padding: 13px 0; } .zsu-search-field::placeholder { color: var(--zsu-text-dim); } .zsu-search-clear { background: none; border: none; color: var(--zsu-text-dim); cursor: pointer; font-size: 12px; padding: 4px; border-radius: 4px; display: none; transition: var(--zsu-trans); } .zsu-search-field:not(:placeholder-shown) ~ .zsu-search-clear { display: block; } .zsu-search-clear:hover { color: var(--zsu-text); background: var(--zsu-surface); } .zsu-search-results { max-height: 320px; overflow-y: auto; display: none; } .zsu-search-results.has-results { display: block; } .zsu-search-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: var(--zsu-trans); border-bottom: 1px solid var(--zsu-border); text-decoration: none; color: var(--zsu-text); } .zsu-search-result-item:hover { background: var(--zsu-surface-2); } .zsu-search-result-thumb { width: 36px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--zsu-surface); flex-shrink: 0; } .zsu-search-result-title { font-size: 13px; font-weight: 600; color: #fff; } .zsu-search-result-meta { font-size: 11px; color: var(--zsu-text-dim); margin-top: 2px; } /* Header right actions */ .zsu-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Coin badge */ .zsu-header-coins { display: flex; align-items: center; gap: 5px; background: rgba(var(--zsu-accent-rgb), 0.12); border: 1px solid rgba(var(--zsu-accent-rgb), 0.3); border-radius: 99px; padding: 5px 12px; cursor: pointer; transition: var(--zsu-trans); } .zsu-header-coins:hover { background: rgba(var(--zsu-accent-rgb), 0.22); box-shadow: 0 0 12px rgba(var(--zsu-accent-rgb), 0.3); } .zsu-coin-count { font-size: 13px; font-weight: 700; color: var(--zsu-accent); } /* View toggle */ .zsu-view-toggle { display: flex; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 10px; overflow: hidden; } .zsu-view-btn { background: none; border: none; color: var(--zsu-text-dim); padding: 8px 12px; cursor: pointer; transition: var(--zsu-trans); display: flex; align-items: center; } .zsu-view-btn:hover { color: #fff; background: var(--zsu-surface-2); } .zsu-view-btn.active { color: var(--zsu-primary); background: rgba(var(--zsu-primary-rgb), 0.15); } /* Upload CTA button */ .zsu-btn-upload { display: flex; align-items: center; gap: 6px; background: var(--zsu-primary); color: #fff; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: var(--zsu-trans-bounce); } .zsu-btn-upload:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--zsu-primary-rgb), 0.5); color: #fff; } /* Login button */ .zsu-btn-login { background: var(--zsu-surface); border: 1px solid var(--zsu-border); color: var(--zsu-text); padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: var(--zsu-trans); } .zsu-btn-login:hover { background: var(--zsu-primary); border-color: var(--zsu-primary); color: #fff; } /* Avatar button + dropdown */ .zsu-avatar-btn { background: none; border: 2px solid var(--zsu-border); border-radius: 50%; padding: 2px; cursor: pointer; transition: var(--zsu-trans); position: relative; } .zsu-avatar-btn:hover { border-color: var(--zsu-primary); box-shadow: 0 0 12px rgba(var(--zsu-primary-rgb), 0.4); } .zsu-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; } .zsu-avatar-dropdown { position: absolute; top: calc(var(--zsu-header-h) - 4px); right: 20px; background: var(--zsu-glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--zsu-border); border-radius: 14px; min-width: 200px; overflow: hidden; display: none; z-index: 1000; box-shadow: var(--zsu-shadow-lg); animation: zsuDropIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .zsu-avatar-dropdown.open { display: block; } @keyframes zsuDropIn { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .zsu-dd-item { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--zsu-text); text-decoration: none; transition: var(--zsu-trans); border-bottom: 1px solid var(--zsu-border); } .zsu-dd-item:last-child { border-bottom: none; } .zsu-dd-item:hover { background: var(--zsu-surface-2); color: #fff; } .zsu-dd-item-danger:hover{ background: rgba(239,68,68,0.12); color: #f87171; } /* ── 3. Main ────────────────────────────────────────────────────── */ .zsu-main { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 0 16px 80px; } /* ── 4. Section Headings ────────────────────────────────────────── */ .zsu-section-header-row { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 14px; padding: 0 4px; } .zsu-section-heading { font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; letter-spacing: -0.4px; } .zsu-heading-icon { font-size: 20px; filter: drop-shadow(0 0 6px var(--zsu-primary)); } .zsu-heading-count { font-size: 12px; font-weight: 600; color: var(--zsu-text-dim); background: var(--zsu-surface); padding: 2px 8px; border-radius: 99px; } .zsu-see-all { font-size: 12px; font-weight: 700; color: var(--zsu-primary); text-decoration: none; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(var(--zsu-primary-rgb), 0.3); transition: var(--zsu-trans); } .zsu-see-all:hover { background: rgba(var(--zsu-primary-rgb), 0.15); box-shadow: 0 0 12px rgba(var(--zsu-primary-rgb), 0.3); } /* ── 5. Featured Rail ───────────────────────────────────────────── */ .zsu-featured-section { margin-top: 20px; } .zsu-featured-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 4px 12px; } .zsu-featured-rail::-webkit-scrollbar { display: none; } .zsu-featured-rail .zsu-short-card { flex: 0 0 160px; scroll-snap-align: start; } /* ── 6. Filter Strip ────────────────────────────────────────────── */ .zsu-filter-strip { position: sticky; top: var(--zsu-header-h); z-index: 80; background: var(--zsu-glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--zsu-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; margin: 0 -4px; transition: var(--zsu-trans); } /* Category pills */ .zsu-cat-pills { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .zsu-cat-pills::-webkit-scrollbar { display: none; } .zsu-cat-pill { display: flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--zsu-border); background: var(--zsu-surface); color: var(--zsu-text-muted); white-space: nowrap; transition: var(--zsu-trans); flex-shrink: 0; } .zsu-cat-pill:hover { background: var(--zsu-surface-2); color: #fff; border-color: var(--zsu-border-hover); } .zsu-cat-pill.active { background: var(--zsu-primary); border-color: var(--zsu-primary); color: #fff; box-shadow: 0 0 14px rgba(var(--zsu-primary-rgb), 0.45); } .zsu-pill-count { font-size: 10px; background: rgba(255,255,255,0.15); padding: 1px 5px; border-radius: 99px; } .zsu-cat-pill.active .zsu-pill-count { background: rgba(255,255,255,0.25); } /* Sort group */ .zsu-sort-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .zsu-active-filter-tag { display: flex; align-items: center; gap: 6px; background: rgba(var(--zsu-accent-rgb), 0.15); border: 1px solid rgba(var(--zsu-accent-rgb), 0.4); color: var(--zsu-accent); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; } .zsu-clear-filter { background: none; border: none; color: var(--zsu-accent); cursor: pointer; font-size: 10px; padding: 2px; line-height: 1; } .zsu-sort-select-wrap { display: flex; align-items: center; gap: 6px; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 10px; padding: 0 10px; } .zsu-sort-icon { color: var(--zsu-text-dim); flex-shrink: 0; } .zsu-sort-select { background: none; border: none; outline: none; color: var(--zsu-text); font-size: 12.5px; font-weight: 600; font-family: var(--zsu-font); padding: 8px 0; cursor: pointer; appearance: none; } .zsu-sort-select option { background: #1a1d2e; } /* ── 7. Category Rails ──────────────────────────────────────────── */ .zsu-cat-rail-section { margin: 8px 0; } .zsu-rail-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 4px 14px; } .zsu-rail-scroll::-webkit-scrollbar { display: none; } .zsu-rail-scroll .zsu-short-card { flex: 0 0 140px; scroll-snap-align: start; } /* ── 8. Shorts Grid ─────────────────────────────────────────────── */ .zsu-grid-section { margin: 16px 0; } .zsu-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 14px; } @media (min-width: 600px) { .zsu-grid { grid-template-columns: repeat(calc(var(--cols, 2) + 1), 1fr); } } @media (min-width: 900px) { .zsu-grid { grid-template-columns: repeat(calc(var(--cols, 2) + 2), 1fr); } } @media (min-width: 1200px) { .zsu-grid { grid-template-columns: repeat(calc(var(--cols, 2) + 3), 1fr); } } @media (min-width: 1600px) { .zsu-grid { grid-template-columns: repeat(calc(var(--cols, 2) + 4), 1fr); } } .zsu-grid-result-count { font-size: 12px; color: var(--zsu-text-dim); font-weight: 500; } /* ── 9. Short Card ──────────────────────────────────────────────── */ .zsu-short-card { position: relative; border-radius: var(--zsu-radius); overflow: hidden; cursor: pointer; background: var(--zsu-surface); border: 1px solid var(--zsu-border); transition: var(--zsu-trans); will-change: transform; transform-style: preserve-3d; } /* Glass style */ .zsu-glass-on .zsu-short-card { background: var(--zsu-glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Neon glow on hover */ .zsu-neon-on .zsu-short-card:hover { box-shadow: var(--zsu-neon), var(--zsu-shadow-md); border-color: rgba(var(--zsu-primary-rgb), 0.5); } .zsu-short-card:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(var(--zsu-primary-rgb), 0.4); box-shadow: var(--zsu-shadow-lg); } /* 3D tilt — applied via JS VanillaTilt, CSS just sets perspective */ .zsu-tilt-on .zsu-short-card { transform-style: preserve-3d; } /* Thumbnail */ .zsu-card-thumb-wrap { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: linear-gradient(135deg, #1e1b4b, #0f172a); } .zsu-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .zsu-short-card:hover .zsu-card-thumb { transform: scale(1.07); } /* Card gradient overlay */ .zsu-card-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 45%, transparent 70% ); transition: var(--zsu-trans); } .zsu-short-card:hover .zsu-card-overlay { background: linear-gradient( to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, rgba(var(--zsu-primary-rgb), 0.1) 100% ); } /* Top badges row */ .zsu-card-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 5px; flex-wrap: wrap; } .zsu-card-badge { font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 5px; letter-spacing: 0.3px; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .zsu-badge-boosted { background: rgba(139,92,246,0.85); color: #fff; } .zsu-badge-featured { background: rgba(245,158,11,0.85); color: #000; } .zsu-badge-new { background: rgba(16,185,129,0.85); color: #fff; } .zsu-badge-trending { background: rgba(239,68,68,0.85); color: #fff; } /* Play button */ .zsu-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--zsu-trans); } .zsu-short-card:hover .zsu-card-play { opacity: 1; } .zsu-play-circle { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--zsu-trans-bounce); box-shadow: 0 0 0 0 rgba(var(--zsu-primary-rgb), 0.4); } .zsu-short-card:hover .zsu-play-circle { transform: scale(1.1); background: rgba(var(--zsu-primary-rgb), 0.35); border-color: var(--zsu-primary); animation: zsuPulse 1.8s ease infinite; } @keyframes zsuPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--zsu-primary-rgb), 0.5); } 70% { box-shadow: 0 0 0 14px rgba(var(--zsu-primary-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--zsu-primary-rgb), 0); } } /* Card bottom info */ .zsu-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 10px 12px; } .zsu-card-vendor { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .zsu-card-vendor-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,0.3); background: var(--zsu-surface); } .zsu-card-vendor-name { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zsu-card-title { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zsu-card-stats { display: flex; align-items: center; gap: 10px; } .zsu-card-stat { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); } .zsu-card-stat svg { opacity: 0.8; } /* Duration badge */ .zsu-card-duration { position: absolute; bottom: 52px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; backdrop-filter: blur(6px); } /* Rating stars */ .zsu-card-rating { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 3px; background: rgba(0,0,0,0.6); padding: 3px 7px; border-radius: 6px; backdrop-filter: blur(6px); } .zsu-card-star { font-size: 10px; } .zsu-card-rating-val { font-size: 11px; font-weight: 700; color: #f59e0b; } /* Quick like button on card */ .zsu-card-quick-like { position: absolute; bottom: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.5); border: 1.5px solid rgba(255,255,255,0.2); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--zsu-trans-bounce); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; } .zsu-short-card:hover .zsu-card-quick-like { opacity: 1; } .zsu-card-quick-like:hover { transform: scale(1.2); background: rgba(244,63,94,0.7); border-color: #f43f5e; } .zsu-card-quick-like.liked { opacity: 1; background: rgba(244,63,94,0.8); border-color: #f43f5e; } /* ── 10. Skeleton Loader ────────────────────────────────────────── */ .zsu-skeleton { pointer-events: none; } .zsu-skeleton-thumb { aspect-ratio: 9 / 16; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75% ); background-size: 200% 100%; animation: zsuShimmer 1.5s infinite; border-radius: var(--zsu-radius); } .zsu-skeleton-rail .zsu-skeleton-thumb { aspect-ratio: 9 / 16; min-height: 180px; } .zsu-skeleton-line { height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75% ); background-size: 200% 100%; animation: zsuShimmer 1.5s infinite; margin-top: 8px; } .zsu-skeleton-line-lg { width: 75%; } .zsu-skeleton-line-sm { width: 45%; } @keyframes zsuShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── 11. Infinite Scroll ────────────────────────────────────────── */ .zsu-load-more-sentinel { display: flex; align-items: center; justify-content: center; padding: 32px 0; } .zsu-load-spinner { display: flex; align-items: center; gap: 10px; color: var(--zsu-text-dim); font-size: 13px; } .zsu-spinner-ring { width: 28px; height: 28px; border: 3px solid rgba(var(--zsu-primary-rgb), 0.2); border-top-color: var(--zsu-primary); border-radius: 50%; animation: zsuSpin 0.75s linear infinite; } @keyframes zsuSpin { to { transform: rotate(360deg); } } .zsu-load-more-btn { background: var(--zsu-surface); border: 1px solid var(--zsu-border); color: var(--zsu-text); padding: 12px 32px; border-radius: 99px; font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--zsu-trans); font-family: var(--zsu-font); } .zsu-load-more-btn:hover { background: var(--zsu-primary); border-color: var(--zsu-primary); color: #fff; box-shadow: 0 0 20px rgba(var(--zsu-primary-rgb), 0.4); } /* ── 12. Empty State ────────────────────────────────────────────── */ .zsu-grid-empty { text-align: center; padding: 60px 20px; grid-column: 1 / -1; } .zsu-empty-icon-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .zsu-empty-emoji { font-size: 40px; position: relative; z-index: 1; animation: zsuFloat 3s ease-in-out infinite; } @keyframes zsuFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .zsu-empty-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .zsu-empty-ring { position: absolute; border: 1px solid rgba(var(--zsu-primary-rgb), 0.2); border-radius: 50%; animation: zsuRingExpand 3s ease-out infinite; } .zsu-empty-ring:nth-child(1) { width: 60px; height: 60px; animation-delay: 0s; } .zsu-empty-ring:nth-child(2) { width: 90px; height: 90px; animation-delay: 0.5s; } .zsu-empty-ring:nth-child(3) { width: 120px; height: 120px; animation-delay: 1s; } @keyframes zsuRingExpand { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.2); opacity: 0; } } .zsu-empty-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 8px; } .zsu-empty-desc { font-size: 14px; color: var(--zsu-text-dim); margin-bottom: 20px; } .zsu-btn-primary-pill { background: var(--zsu-primary); color: #fff; border: none; padding: 11px 28px; border-radius: 99px; font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--zsu-trans-bounce); font-family: var(--zsu-font); } .zsu-btn-primary-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--zsu-primary-rgb), 0.5); } /* ── 13. Lightbox ───────────────────────────────────────────────── */ .zsu-lightbox { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: row; overflow: hidden; background: rgba(0,0,0,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Fade in only when JS sets display:flex (overrides initial display:none inline style) */ .zsu-lightbox[style*="flex"] { animation: zsuFadeIn 0.22s ease; } @keyframes zsuFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Close button */ .zsu-lb-close { position: absolute; top: 14px; left: 14px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--zsu-trans); backdrop-filter: blur(8px); } .zsu-lb-close:hover { background: rgba(239,68,68,0.6); border-color: #f87171; transform: scale(1.1); } /* Prev / Next nav — stacked vertically on the right side of video */ .zsu-lb-nav { position: absolute; right: calc(400px + 14px); /* sidebar width + gap */ z-index: 20; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--zsu-trans); backdrop-filter: blur(8px); } .zsu-lb-prev { top: calc(50% - 30px); transform: translateY(-100%); } .zsu-lb-next { top: calc(50% + 30px); transform: translateY(0%); } .zsu-lb-nav:hover { background: rgba(var(--zsu-primary-rgb), 0.4); border-color: var(--zsu-primary); transform: translateY(-100%) scale(1.1); } .zsu-lb-next:hover { transform: translateY(0%) scale(1.1); } /* Video stack — vertical snap scroll */ .zsu-lb-stack { flex: 1; height: 100vh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; -ms-overflow-style: none; position: relative; /* NO display:flex — slides must be plain blocks */ } .zsu-lb-stack::-webkit-scrollbar { display: none; } .zsu-lb-slide { /* Each slide is EXACTLY one viewport height — hard locked */ display: block; width: 100%; height: 100vh; min-height: 100vh; max-height: 100vh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; background: #000; /* Center video inside using absolute positioning of child */ } /* Video wrap fills the entire slide area — black bg shows on unused edges */ .zsu-lb-video-wrap { position: absolute; inset: 0; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* No ratio-specific width overrides needed — video uses object-fit:contain */ /* data-ratio is kept on the element for JS expand modal use only */ .zsu-lb-video { width: 100%; height: 100%; object-fit: contain; /* show full video, black bars on sides/top for different ratios */ display: block; background: #000; } /* Video thumb while loading */ .zsu-lb-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.4s; background: #000; } /* Blurred background layer behind thumb for cinematic fill */ .zsu-lb-video-thumb::before { content: ''; position: absolute; inset: -20px; background: inherit; filter: blur(20px); opacity: 0.5; z-index: -1; } .zsu-lb-video-thumb.hidden { opacity: 0; pointer-events: none; } /* In-video controls overlay */ .zsu-lb-video-controls { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .zsu-lb-big-play { width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(12px); transition: var(--zsu-trans-bounce); opacity: 0; } .zsu-lb-slide.paused .zsu-lb-big-play { opacity: 1; } .zsu-lb-big-play:hover { transform: scale(1.12); background: rgba(var(--zsu-primary-rgb), 0.4); } /* Progress bar */ .zsu-lb-progress { position: absolute; top: 0; left: 0; right: 380px; height: 3px; background: rgba(255,255,255,0.1); z-index: 30; } .zsu-lb-progress-bar { height: 100%; background: var(--zsu-primary); width: 0%; transition: width 0.25s linear; box-shadow: 0 0 8px rgba(var(--zsu-primary-rgb), 0.6); } /* Sidebar */ .zsu-lb-sidebar { width: 380px; flex-shrink: 0; height: 100vh; overflow-y: auto; background: rgba(10,10,20,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid var(--zsu-border); padding: 20px 18px 30px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; } .zsu-lb-sidebar::-webkit-scrollbar { width: 3px; } .zsu-lb-sidebar::-webkit-scrollbar-thumb { background: rgba(var(--zsu-primary-rgb), 0.4); } /* Vendor row */ .zsu-lb-vendor { display: flex; align-items: center; gap: 10px; padding-top: 10px; } .zsu-lb-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--zsu-primary-rgb), 0.5); background: var(--zsu-surface); flex-shrink: 0; } .zsu-lb-vendor-info { flex: 1; min-width: 0; } .zsu-lb-vendor-name { display: block; font-size: 14px; font-weight: 700; color: #fff; } .zsu-lb-vendor-store { display: block; font-size: 11px; color: var(--zsu-text-dim); margin-top: 1px; } /* Follow button */ .zsu-follow-btn { flex-shrink: 0; background: var(--zsu-primary); color: #fff; border: none; padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--zsu-trans); font-family: var(--zsu-font); } .zsu-follow-btn.following { background: transparent; border: 1px solid var(--zsu-border); color: var(--zsu-text-muted); } .zsu-follow-btn:hover { opacity: 0.85; transform: scale(1.04); } /* Title / desc */ .zsu-lb-text { flex-shrink: 0; } .zsu-lb-title { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 6px; } .zsu-lb-desc { font-size: 13px; color: var(--zsu-text-muted); line-height: 1.5; } /* Category chips */ .zsu-lb-cats { display: flex; gap: 6px; flex-wrap: wrap; } .zsu-lb-cat-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(var(--zsu-primary-rgb), 0.12); border: 1px solid rgba(var(--zsu-primary-rgb), 0.3); color: var(--zsu-primary); cursor: pointer; transition: var(--zsu-trans); text-decoration: none; } .zsu-lb-cat-chip:hover { background: rgba(var(--zsu-primary-rgb), 0.25); color: #fff; } /* Stats row */ .zsu-lb-stats { display: flex; gap: 16px; flex-wrap: wrap; } .zsu-lb-stat { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--zsu-text-muted); } /* Action buttons */ .zsu-lb-actions { display: flex; gap: 8px; flex-wrap: wrap; } .zsu-lb-action-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: var(--zsu-trans); color: var(--zsu-text-muted); font-family: var(--zsu-font); min-width: 60px; } .zsu-lb-action-btn:hover { background: var(--zsu-surface-2); color: #fff; border-color: var(--zsu-border-hover); transform: translateY(-2px); } .zsu-lb-like-btn.liked { background: rgba(244,63,94,0.15); border-color: rgba(244,63,94,0.4); color: #f43f5e; } .zsu-action-icon { font-size: 20px; line-height: 1; } .zsu-action-label { font-size: 11px; font-weight: 600; } /* ── 14. Product Tray ───────────────────────────────────────────── */ .zsu-product-tray { background: rgba(var(--zsu-primary-rgb), 0.06); border: 1px solid rgba(var(--zsu-primary-rgb), 0.2); border-radius: var(--zsu-radius); overflow: hidden; transition: var(--zsu-trans); } .zsu-tray-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid rgba(var(--zsu-primary-rgb), 0.15); } .zsu-tray-icon { font-size: 18px; } .zsu-tray-title { font-size: 13px; font-weight: 700; color: #fff; flex: 1; } .zsu-tray-count { font-size: 11px; color: var(--zsu-primary); font-weight: 700; background: rgba(var(--zsu-primary-rgb), 0.15); padding: 2px 8px; border-radius: 99px; } .zsu-tray-toggle { background: none; border: none; color: var(--zsu-text-dim); cursor: pointer; padding: 2px; display: flex; align-items: center; } .zsu-tray-chevron { transition: transform 0.3s ease; } .zsu-tray-chevron.open { transform: rotate(180deg); } .zsu-tray-products { display: flex; gap: 10px; overflow-x: auto; padding: 12px; scrollbar-width: none; scroll-snap-type: x mandatory; transition: max-height 0.35s ease, opacity 0.3s ease; max-height: 200px; opacity: 1; } .zsu-tray-products::-webkit-scrollbar { display: none; } .zsu-tray-products.collapsed { max-height: 0; opacity: 0; overflow: hidden; padding: 0 12px; } /* Product card in tray */ .zsu-tray-product { flex: 0 0 110px; scroll-snap-align: start; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: var(--zsu-radius-sm); overflow: hidden; cursor: pointer; transition: var(--zsu-trans); position: relative; } .zsu-tray-product:hover { border-color: rgba(var(--zsu-primary-rgb), 0.5); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .zsu-tray-product-img-wrap { aspect-ratio: 1; overflow: hidden; background: var(--zsu-surface); position: relative; } .zsu-tray-product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .zsu-tray-product:hover .zsu-tray-product-img { transform: scale(1.08); } .zsu-tray-product-badge { position: absolute; top: 4px; right: 4px; background: var(--zsu-primary); color: #fff; font-size: 8px; font-weight: 800; padding: 2px 5px; border-radius: 4px; } .zsu-tray-product-info { padding: 7px 7px 8px; } .zsu-tray-product-name { font-size: 11px; font-weight: 600; color: var(--zsu-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; margin-bottom: 4px; } .zsu-tray-product-price { font-size: 12px; font-weight: 800; color: var(--zsu-accent); } .zsu-tray-product-price del { font-size: 10px; color: var(--zsu-text-dim); font-weight: 400; margin-left: 3px; } .zsu-tray-add-btn { width: 100%; background: var(--zsu-primary); color: #fff; border: none; padding: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--zsu-trans); font-family: var(--zsu-font); } .zsu-tray-add-btn:hover { background: rgba(var(--zsu-primary-rgb), 0.8); } /* Wishlist heart on tray product */ .zsu-tray-wishlist-btn { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--zsu-trans); } .zsu-tray-wishlist-btn:hover { background: rgba(244,63,94,0.7); transform: scale(1.15); } .zsu-tray-wishlist-btn.wishlisted { background: rgba(244,63,94,0.8); } /* ── 15. Share Sheet ────────────────────────────────────────────── */ .zsu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9500; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: zsuFadeIn 0.2s ease; } .zsu-share-sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(480px, 100vw); z-index: 9600; border-radius: 24px 24px 0 0; overflow: hidden; animation: zsuSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes zsuSlideUp { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } } .zsu-share-sheet-inner { background: var(--zsu-glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--zsu-border); padding: 20px 20px 30px; } .zsu-share-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .zsu-share-sheet-title { font-size: 16px; font-weight: 800; color: #fff; } .zsu-share-sheet-close { background: var(--zsu-surface); border: 1px solid var(--zsu-border); color: var(--zsu-text-muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: var(--zsu-trans); font-size: 12px; display: flex; align-items: center; justify-content: center; } .zsu-share-sheet-close:hover { background: rgba(239,68,68,0.2); color: #f87171; } .zsu-share-preview { display: flex; align-items: center; gap: 10px; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; } .zsu-share-thumb { width: 44px; height: 58px; object-fit: cover; border-radius: 8px; background: var(--zsu-surface); flex-shrink: 0; } .zsu-share-video-title { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.4; } .zsu-share-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .zsu-share-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 12px; padding: 12px 6px; cursor: pointer; transition: var(--zsu-trans-bounce); color: var(--zsu-text); font-family: var(--zsu-font); } .zsu-share-btn:hover { background: var(--zsu-surface-2); border-color: rgba(var(--zsu-primary-rgb), 0.4); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); } .zsu-share-platform-icon { font-size: 24px; } .zsu-share-platform-label { font-size: 10px; font-weight: 600; color: var(--zsu-text-muted); } .zsu-copy-link-row { display: flex; gap: 8px; } .zsu-copy-link-input { flex: 1; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 10px; color: var(--zsu-text-muted); font-size: 12px; padding: 10px 12px; outline: none; font-family: var(--zsu-font); } .zsu-copy-link-btn { background: var(--zsu-primary); color: #fff; border: none; padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--zsu-trans); font-family: var(--zsu-font); } .zsu-copy-link-btn:hover { opacity: 0.85; } .zsu-copy-link-btn.copied { background: #10b981; } /* ── 16. Product Modal ──────────────────────────────────────────── */ .zsu-product-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, 94vw); max-height: 88vh; z-index: 9600; overflow-y: auto; border-radius: 20px; animation: zsuZoomIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes zsuZoomIn { from { transform: translate(-50%, -50%) scale(0.88); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .zsu-product-modal-inner { background: #12151f; border: 1px solid var(--zsu-border); border-radius: 20px; padding: 24px; position: relative; } .zsu-product-modal-close { position: absolute; top: 14px; right: 14px; background: var(--zsu-surface); border: 1px solid var(--zsu-border); color: var(--zsu-text-muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: var(--zsu-trans); font-size: 12px; display: flex; align-items: center; justify-content: center; } .zsu-product-modal-close:hover { background: rgba(239,68,68,0.2); color: #f87171; } .zsu-pm-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; background: var(--zsu-surface); } .zsu-pm-name { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; } .zsu-pm-price { font-size: 22px; font-weight: 800; color: var(--zsu-accent); margin-bottom: 6px; } .zsu-pm-price del { font-size: 14px; color: var(--zsu-text-dim); font-weight: 400; margin-left: 6px; } .zsu-pm-sale-badge { background: rgba(239,68,68,0.8); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; display: inline-block; margin-left: 8px; } .zsu-pm-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--zsu-text-dim); margin-bottom: 12px; } .zsu-pm-stars { color: #f59e0b; font-size: 14px; } .zsu-pm-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .zsu-pm-meta-item { font-size: 12px; color: var(--zsu-text-dim); background: var(--zsu-surface); padding: 4px 10px; border-radius: 6px; } .zsu-pm-stock-ok { color: #10b981; font-size: 12px; font-weight: 600; margin-bottom: 16px; } .zsu-pm-stock-out { color: #ef4444; font-size: 12px; font-weight: 600; margin-bottom: 16px; } .zsu-pm-actions { display: flex; gap: 8px; } .zsu-pm-atc-btn { flex: 1; background: var(--zsu-primary); color: #fff; border: none; padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--zsu-trans-bounce); font-family: var(--zsu-font); } .zsu-pm-atc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--zsu-primary-rgb), 0.45); } .zsu-pm-view-btn { background: var(--zsu-surface); border: 1px solid var(--zsu-border); color: var(--zsu-text); padding: 13px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: var(--zsu-trans); font-family: var(--zsu-font); display: flex; align-items: center; } .zsu-pm-view-btn:hover { background: var(--zsu-surface-2); color: #fff; } /* ── 17. Comments Panel ─────────────────────────────────────────── */ .zsu-comments-panel { border-top: 1px solid var(--zsu-border); padding-top: 12px; } .zsu-comments-header { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; } .zsu-comments-close { background: none; border: none; color: var(--zsu-text-dim); cursor: pointer; font-size: 14px; padding: 4px; transition: var(--zsu-trans); } .zsu-comments-close:hover { color: var(--zsu-text); } .zsu-comments-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; scrollbar-width: thin; } .zsu-comment-item { display: flex; gap: 8px; } .zsu-comment-item-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--zsu-surface); } .zsu-comment-name { font-size: 12px; font-weight: 700; color: #fff; } .zsu-comment-text { font-size: 12px; color: var(--zsu-text-muted); line-height: 1.4; margin-top: 2px; } .zsu-comment-date { font-size: 10px; color: var(--zsu-text-dim); margin-top: 3px; } .zsu-comment-input-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--zsu-border); padding-top: 12px; } .zsu-comment-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .zsu-comment-input { flex: 1; background: var(--zsu-surface); border: 1px solid var(--zsu-border); border-radius: 20px; color: var(--zsu-text); font-size: 13px; padding: 8px 14px; outline: none; font-family: var(--zsu-font); transition: var(--zsu-trans); } .zsu-comment-input:focus { border-color: rgba(var(--zsu-primary-rgb), 0.5); } .zsu-comment-input::placeholder { color: var(--zsu-text-dim); } .zsu-comment-submit { background: var(--zsu-primary); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--zsu-trans-bounce); flex-shrink: 0; } .zsu-comment-submit:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(var(--zsu-primary-rgb), 0.5); } /* ── 18. Toast Container ────────────────────────────────────────── */ .zsu-toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .zsu-toast-item { background: var(--zsu-glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--zsu-border); border-radius: 12px; padding: 12px 20px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; box-shadow: var(--zsu-shadow-md); animation: zsuToastPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: auto; } @keyframes zsuToastPop { from { transform: translateY(20px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .zsu-toast-item.success { border-left: 3px solid #10b981; } .zsu-toast-item.error { border-left: 3px solid #ef4444; } .zsu-toast-item.info { border-left: 3px solid var(--zsu-primary); } /* ── 19. Confetti Canvas ────────────────────────────────────────── */ #zsuConfettiCanvas { position: fixed; inset: 0; z-index: 99990; pointer-events: none; } /* ── 20. Star Rating UI ─────────────────────────────────────────── */ .zsu-star-rating { display: flex; gap: 4px; } .zsu-star { font-size: 22px; cursor: pointer; color: rgba(255,255,255,0.2); transition: var(--zsu-trans); line-height: 1; } .zsu-star.active, .zsu-star.hover { color: #f59e0b; filter: drop-shadow(0 0 6px #f59e0b88); } /* ── 21. Responsive ─────────────────────────────────────────────── */ @media (max-width: 900px) { .zsu-lb-sidebar { width: 300px; } .zsu-lb-nav { right: calc(300px + 14px); } .zsu-lb-progress { right: 300px; } } @media (max-width: 700px) { .zsu-header-inner { padding: 0 12px; gap: 10px; } .zsu-search-dropdown { display: none; } .zsu-search-dropdown.mobile-open { display: block; position: fixed; top: var(--zsu-header-h); left: 0; right: 0; border-radius: 0 0 16px 16px; z-index: 950; } .zsu-search-trigger { display: flex; } .zsu-view-toggle { display: none; } .zsu-header-coins { display: none; } /* Full-screen lightbox on mobile */ .zsu-lightbox { flex-direction: column; } .zsu-lb-sidebar { width: 100%; height: auto; max-height: 45vh; border-left: none; border-top: 1px solid var(--zsu-border); flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 12px; overflow-y: auto; } .zsu-lb-stack { height: 55vh; } .zsu-lb-slide { height: 55vh; min-height: 55vh; max-height: 55vh; } .zsu-lb-video-wrap { height: 55vh; } .zsu-lb-nav { right: 10px; } .zsu-lb-prev { top: calc(50% - 28px); } .zsu-lb-next { top: calc(50% + 28px); } .zsu-lb-progress { right: 0; } .zsu-share-platforms { grid-template-columns: repeat(4, 1fr); } .zsu-main { padding: 0 8px 60px; } .zsu-grid { gap: 8px; } .zsu-featured-rail .zsu-short-card { flex: 0 0 130px; } .zsu-rail-scroll .zsu-short-card { flex: 0 0 120px; } } @media (max-width: 420px) { .zsu-share-platforms { grid-template-columns: repeat(4, 1fr); } .zsu-lb-actions { gap: 6px; } .zsu-lb-action-btn { padding: 8px 10px; min-width: 50px; } } /* ── 22. Feed View (single column) ─────────────────────────────── */ .zsu-body.feed-view .zsu-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } /* ── 23. Utility ────────────────────────────────────────────────── */ .zsu-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .zsu-no-scroll { overflow: hidden; } /* Ripple effect */ .zsu-ripple { position: absolute; border-radius: 50%; background: rgba(var(--zsu-primary-rgb), 0.35); transform: scale(0); animation: zsuRipple 0.55s linear; pointer-events: none; } @keyframes zsuRipple { to { transform: scale(4); opacity: 0; } } /* Neon text glitch (for headings in ultra mode) */ .zsu-neon-on .zsu-section-heading { text-shadow: 0 0 10px rgba(var(--zsu-primary-rgb), 0.4); } /* Holographic shimmer on boosted cards */ .zsu-short-card.boosted::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 125deg, rgba(var(--zsu-primary-rgb), 0) 0%, rgba(var(--zsu-primary-rgb), 0.06) 30%, rgba(255,255,255,0.04) 50%, rgba(var(--zsu-accent-rgb), 0.06) 70%, rgba(var(--zsu-accent-rgb), 0) 100% ); pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.4s; } .zsu-short-card.boosted:hover::after { opacity: 1; } /* 3D card shine layer (JS-driven transform) */ .zsu-card-shine { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.12) 0%, transparent 70% ); pointer-events: none; opacity: 0; transition: opacity 0.3s; } .zsu-short-card:hover .zsu-card-shine { opacity: 1; } /* ══════════════════════════════════════════════════════════════════ LIGHTBOX OVERRIDE v3 — YouTube-style full black, video in ratio ══════════════════════════════════════════════════════════════════ */ /* 1. Full-screen black container, column layout */ .zsu-lightbox { flex-direction: column !important; background: #000 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; align-items: center !important; justify-content: center !important; } /* 2. Stack fills full screen */ .zsu-lb-stack { width: 100vw !important; height: 100vh !important; height: 100dvh !important; flex: none !important; background: #000 !important; } /* 3. Each slide = full viewport, pure black */ .zsu-lb-slide { width: 100vw !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; background: #000 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } /* 4. Video wrap: centred, never bigger than viewport */ .zsu-lb-video-wrap { position: relative !important; /* Let the video dictate its own dimensions */ width: auto !important; height: auto !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; background: #000 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Video: contain = letterbox, never crop */ .zsu-lb-video-wrap video, .zsu-lb-video { display: block !important; width: auto !important; height: auto !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; object-fit: contain !important; background: #000 !important; } /* 6. Thumbnail same as video */ .zsu-lb-video-thumb { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; height: auto !important; max-width: 100vw !important; max-height: 100vh !important; object-fit: contain !important; } /* 7. HIDE the side-panel completely */ .zsu-lb-sidebar { display: none !important; } /* 8. Nav arrows — LEFT side, vertically centred */ .zsu-lb-nav { right: auto !important; left: 14px !important; z-index: 30 !important; } .zsu-lb-prev { top: calc(50% - 36px) !important; transform: translateY(-100%) !important; } .zsu-lb-next { top: calc(50% + 36px) !important; transform: translateY(0%) !important; } .zsu-lb-nav:hover { background: rgba(255,255,255,0.25) !important; transform: none !important; } .zsu-lb-prev:hover { transform: translateY(-100%) !important; } .zsu-lb-next:hover { transform: translateY(0%) !important; } /* 9. Close button — top-left */ .zsu-lb-close { position: absolute !important; top: 14px !important; left: 14px !important; right: auto !important; z-index: 30 !important; } /* 10. Progress bar stays at top */ .zsu-lb-progress { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 40 !important; } /* ───────────────────────────────────────────────────────────────── LAYOUT PRINCIPLE (do not change without understanding this): • Each .zsu-lb-slide = 100vh, position:relative, scroll-snap:start • .zsu-lb-overlay — absolute, bottom:0, covers 80vh via tall gradient padding-bottom:20vh pushes text ABOVE the tray • #zsuProductTray — absolute, bottom:0, height:20vh, free-scroll row • .zsu-lb-rail — absolute, right side, bottom:calc(20vh + 20px) • NO overflow on .zsu-lb-slide — this would kill scroll snap ───────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════ 11. OVERLAY — gradient from bottom, content above chips ══════════════════════════════════════════════════════════ */ .zsu-lb-overlay { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 75% !important; z-index: 20 !important; background: linear-gradient( to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 38%, transparent 70% ) !important; padding: 0 14px 16px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; pointer-events: none !important; box-sizing: border-box !important; } .zsu-lb-ov-vendor { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; pointer-events: all; } .zsu-lb-ov-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.55); flex-shrink: 0; background: #333; } .zsu-lb-ov-vendor-name { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.9); line-height: 1.2; } .zsu-lb-ov-vendor-store { font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.2; } .zsu-lb-ov-follow { margin-left: auto; flex-shrink: 0; padding: 4px 12px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,0.85); background: transparent; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.2s; pointer-events: all; } .zsu-lb-ov-follow:hover { background: rgba(255,255,255,0.22); } .zsu-lb-ov-follow.following { background: var(--zsu-primary, #7c3aed); border-color: var(--zsu-primary, #7c3aed); color: #fff; } .zsu-lb-ov-follow:disabled { opacity: 0.6; cursor: default; } .zsu-lb-ov-follow { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); } .zsu-lb-ov-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 3px; text-shadow: 0 1px 6px rgba(0,0,0,0.9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zsu-lb-ov-desc { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.4; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .zsu-lb-ov-stats { display: flex; align-items: center; gap: 14px; pointer-events: all; } .zsu-lb-ov-stat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(255,255,255,0.85); font-weight: 600; } /* ══════════════════════════════════════════════════════════ 12. RIGHT-RAIL buttons (like / share / mute) ══════════════════════════════════════════════════════════ */ .zsu-lb-rail { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; z-index: 26 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; align-items: center !important; } .zsu-lb-rail-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; background: none; border: none; padding: 0; } .zsu-lb-rail-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.40); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background 0.18s, transform 0.14s; } .zsu-lb-rail-btn:hover .zsu-lb-rail-icon { background: rgba(255,255,255,0.28); transform: scale(1.08); } .zsu-lb-rail-label { font-size: 10px; color: rgba(255,255,255,0.9); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .zsu-lb-rail-btn.liked .zsu-lb-rail-icon { border-color: #fb7185; } /* ══════════════════════════════════════════════════════════ 13. PRODUCT CAPSULE CHIP — top-right, floating, bigger, animated ══════════════════════════════════════════════════════════ */ /* Outer positioning wrapper — always top-right, never overridden */ #zsuShopChips { position: absolute !important; top: 16px !important; right: 16px !important; left: auto !important; bottom: auto !important; z-index: 50 !important; display: block !important; pointer-events: none !important; max-width: 260px !important; animation: zsuCapsuleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both !important; } @keyframes zsuCapsuleIn { from { opacity: 0; transform: translateX(50px) scale(0.8); } to { opacity: 1; transform: translateX(0) scale(1); } } /* Continuous gentle float animation */ @keyframes zsuChipFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } /* Inner pill wrap */ .zsu-pill-wrap { pointer-events: all; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55)); animation: zsuChipFloat 3s ease-in-out infinite; } .zsu-pill-wrap.zsu-dragging { animation: none !important; cursor: grabbing !important; } /* The capsule button itself — bigger than before */ .zsu-product-capsule { display: flex; align-items: center; gap: clamp(6px, 2vw, 10px); background: rgba(10,10,20,0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1.5px solid rgba(255,255,255,0.22); border-radius: 99px; padding: clamp(7px, 2vw, 9px) clamp(12px, 3vw, 16px) clamp(7px, 2vw, 9px) clamp(7px, 2vw, 9px); cursor: pointer; width: max-content; max-width: min(260px, calc(100vw - 90px)); /* never overflow behind rail buttons */ min-width: clamp(140px, 35vw, 200px); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s; box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06); } .zsu-product-capsule:hover, .zsu-product-capsule:active { transform: scale(1.04); border-color: rgba(255,255,255,0.45); } .zsu-capsule-img-wrap { width: clamp(36px, 10vw, 48px); height: clamp(36px, 10vw, 48px); border-radius: 50%; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); } .zsu-capsule-img { width: 100%; height: 100%; object-fit: cover; display: block; } .zsu-capsule-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .zsu-capsule-name { font-size: clamp(11px, 3.2vw, 13px); font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,0.8); line-height: 1.3; max-width: clamp(70px, 20vw, 130px); } .zsu-capsule-sub { font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 500; letter-spacing: 0.02em; } .zsu-capsule-badge { background: var(--zsu-primary, #7c3aed); color: #fff; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 2px 7px; flex-shrink: 0; line-height: 1.5; box-shadow: 0 2px 8px rgba(124,58,237,0.5); } .zsu-capsule-arrow { font-size: 18px; color: rgba(255,255,255,0.6); flex-shrink: 0; font-weight: 300; line-height: 1; } /* ══════════════════════════════════════════════════════════ 14. SHOP BOTTOM SHEET ══════════════════════════════════════════════════════════ */ #zsuShopSheetOverlay { position: fixed !important; inset: 0 !important; z-index: 9100 !important; background: rgba(0,0,0,0.45) !important; } #zsuShopSheet { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9200 !important; transform: translateY(100%) !important; transition: transform 0.32s cubic-bezier(0.32,0.72,0,1) !important; will-change: transform !important; } #zsuShopSheet.open { transform: translateY(0) !important; } #zsuShopSheetInner { background: #0f0f13 !important; border-radius: 20px 20px 0 0 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; max-height: 72vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #zsuShopSheetHandle { width: 36px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 99px; margin: 10px auto 0; flex-shrink: 0; } #zsuShopSheetHeader { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 8px; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.07); } #zsuShopSheetClose { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } #zsuShopSheetList { overflow-y: auto !important; overflow-x: hidden !important; padding: 10px 14px 24px !important; flex: 1 !important; -webkit-overflow-scrolling: touch !important; } /* One product row */ .zsu-sheet-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: inherit; } .zsu-sheet-card:last-child { border-bottom: none; } .zsu-sheet-card-link { display: flex; align-items: center; gap: 12px; flex: 1; text-decoration: none; color: inherit; min-width: 0; } .zsu-sheet-card-arrow { flex-shrink: 0; display: flex; align-items: center; } .zsu-sheet-card-img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #1a1a2e; } .zsu-sheet-card-info { flex: 1; min-width: 0; } .zsu-sheet-card-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zsu-sheet-card-price { font-size: 13px; font-weight: 700; color: #fff; } .zsu-sheet-card-stars { font-size: 11px; color: #f59e0b; margin-top: 2px; } /* .zsu-sheet-card-actions, .zsu-sheet-atc, .zsu-sheet-wish removed — cards now link directly to product page */ .zsu-sheet-card-actions { display: none !important; } .zsu-sheet-atc { display: none !important; } .zsu-sheet-oos { display: none !important; } .zsu-sheet-wish { display: none !important; } /* ══════════════════════════════════════════════════════════ 15. Share popup icons ══════════════════════════════════════════════════════════ */ .zsu-share-platform-icon { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .zsu-share-platform-icon svg { width: 16px !important; height: 16px !important; } .zsu-share-btn[data-platform="whatsapp"] .zsu-share-platform-icon { background: #25D366 !important; } .zsu-share-btn[data-platform="facebook"] .zsu-share-platform-icon { background: #1877F2 !important; } .zsu-share-btn[data-platform="twitter"] .zsu-share-platform-icon { background: #000 !important; border: 1px solid #333 !important; } .zsu-share-btn[data-platform="telegram"] .zsu-share-platform-icon { background: #2AABEE !important; } .zsu-share-btn[data-platform="copy"] .zsu-share-platform-icon { background: #6366f1 !important; } .zsu-share-btn[data-platform="email"] .zsu-share-platform-icon { background: #64748b !important; } .zsu-share-btn[data-platform="linkedin"] .zsu-share-platform-icon { background: #0A66C2 !important; } .zsu-share-btn[data-platform="pinterest"].zsu-share-platform-icon { background: #E60023 !important; } /* ══════════════════════════════════════════════════════════ 16. Video controls tap area — stop ABOVE chips ══════════════════════════════════════════════════════════ */ .zsu-lb-video-controls { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 110px !important; /* stop above chips zone */ z-index: 5 !important; } /* ══════════════════════════════════════════════════════════ DOUBLE-TAP HEART BURST ANIMATION ══════════════════════════════════════════════════════════ */ @keyframes zsuDtHeartBurst { 0% { transform: translate(-50%,-50%) scale(0) rotate(-15deg); opacity: 1; } 35% { transform: translate(-50%,-50%) scale(1.4) rotate(5deg); opacity: 1; } 60% { transform: translate(-50%,-50%) scale(1.15) rotate(-3deg); opacity: 1; } 80% { transform: translate(-50%,-50%) scale(1.25) rotate(0deg); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(1.5) rotate(0deg); opacity: 0; } } .zsu-dt-heart { position: absolute; pointer-events: none; z-index: 100; filter: drop-shadow(0 0 20px rgba(251,113,133,0.9)) drop-shadow(0 0 40px rgba(251,113,133,0.5)); } /* Instagram-style heart pop when tapping like button */ @keyframes zsuHeartPop { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } } .zsu-heart-pop { animation: zsuHeartPop 0.4s cubic-bezier(0.34,1.56,0.64,1) !important; } /* Heart icon in rail — no background ring when liked */ .zsu-rail-like-btn.liked .zsu-lb-rail-icon { background: rgba(251,113,133,0.15) !important; border-color: rgba(251,113,133,0.5) !important; } /* ══════════════════════════════════════════════════════════ 17. Responsive ══════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .zsu-lb-close { left: 12px !important; top: 10px !important; } .zsu-lb-nav { left: 6px !important; } .zsu-lb-rail { right: 8px !important; gap: 10px !important; top: 50% !important; bottom: auto !important; } .zsu-lb-rail-icon { width: 42px !important; height: 42px !important; } .zsu-lb-overlay { padding-bottom: 16px !important; } /* Chips: always top-right, small enough to not overlap rail buttons */ #zsuShopChips { top: 16px !important; right: 62px !important; left: auto !important; bottom: auto !important; max-width: 170px !important; } .zsu-product-capsule { min-width: 0 !important; padding: 7px 12px 7px 7px !important; gap: 7px !important; } .zsu-capsule-img-wrap { width: 38px !important; height: 38px !important; } .zsu-capsule-name { font-size: 12px !important; } #zsuShopSheetInner { max-height: 80vh !important; } } @media (min-width: 768px) { .zsu-lb-rail { right: 20px !important; gap: 20px !important; top: 50% !important; bottom: auto !important; } .zsu-lb-rail-icon { width: 50px !important; height: 50px !important; } /* Chips: top-right with gap from rail buttons */ #zsuShopChips { top: 16px !important; right: 80px !important; left: auto !important; bottom: auto !important; max-width: 260px !important; } #zsuShopSheetInner { max-height: 60vh !important; border-radius: 24px 24px 0 0 !important; } .zsu-sheet-card-img { width: 72px !important; height: 72px !important; } } /* ══════════════════════════════════════════════════════════ 18. HIDE VIEWS & LIKES COUNTS — frontend shorts page only (vendor studio and admin are NOT affected) ══════════════════════════════════════════════════════════ */ /* Grid card stats (views + likes counts under each card) */ #zsuGrid .zsu-card-stats, .zsu-featured-rail .zsu-card-stats, .zsu-rail-scroll .zsu-card-stats { display: none !important; } /* Lightbox overlay stats (bottom-left views/likes on the video) */ .zsu-lb-ov-stats { display: none !important; } /* Lightbox search result meta (👁 views · ❤️ likes in search dropdown) */ .zsu-search-result-meta { display: none !important; }