/* ═══════════════════════════════════════════════════════════════════ v3 — uaitool-inspired design tokens ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } :root { /* Brand accent (per-store, set from dashboard) */ --accent: #ffff00; --accent-strong: color-mix(in oklab, var(--accent) 80%, white); --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent); --accent-glow: color-mix(in oklab, var(--accent) 35%, transparent); /* Neutral surface scale */ --bg: #07070d; --bg-elev: #0d0d12; --surface: rgba(255, 255, 255, 0.04); --surface-strong: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text: #f4f4f5; --muted: #a1a1aa; /* Aliases the legacy modal/CSS still references */ --fg: var(--text); --bg-soft: rgba(255, 255, 255, 0.03); --card: rgba(255, 255, 255, 0.04); --border-soft: rgba(255, 255, 255, 0.06); --accent-dark: color-mix(in oklab, var(--accent) 60%, black); /* Composed */ --grad-card-edge: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0.06) 60%, transparent); --shadow-glow: 0 8px 32px -8px var(--accent-glow); --shadow-card: 0 12px 40px -16px rgba(0, 0, 0, .7); --easing: cubic-bezier(.2, .8, .2, 1); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; } /* ═══════════════════════════════════════════════════════════════════ THEME PRESETS — applied via [data-theme-style=""] on . Single source of truth: STORE_THEMES object in src/store.js. Each preset overrides the variables above. The markup itself never changes — only the colour layer flips. Light themes use a soft pastel-tinted background, neumorphic cards, darker text. Logo containers get an adaptive backdrop so transparent logos stay visible regardless of theme. ═══════════════════════════ */ /* MIDNIGHT — the original dark look. Lime accent, glassmorphic cards. */ [data-theme-style="midnight"] { color-scheme: dark; --accent: #D2FF00; --accent-strong: #A3FF12; --accent-soft: rgba(210, 255, 0, 0.22); --accent-glow: rgba(210, 255, 0, 0.45); --accent-dark: #7a9c00; --bg: #07070d; --bg-elev: #0d0d12; --surface: rgba(255, 255, 255, 0.04); --surface-strong: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text: #f4f4f5; --muted: #a1a1aa; --logo-bg: rgba(255, 255, 255, 0.06); --logo-border: rgba(255, 255, 255, 0.12); --hero-grad-1: var(--accent-soft); --hero-grad-2: rgba(124, 58, 237, 0.10); --hero-grad-3: rgba(255, 255, 255, 0); } /* Neon Pink — light pink canvas, hot-pink accent, neumorphic cards. */ [data-theme-style="pink"] { color-scheme: light; --accent: #ec4899; --accent-strong: #db2777; --accent-soft: rgba(236, 72, 153, 0.14); --accent-glow: rgba(236, 72, 153, 0.32); --accent-dark: #9d174d; --bg: #fff5f9; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(236, 72, 153, 0.18); --border-strong: rgba(236, 72, 153, 0.32); --text: #1a0f1f; --muted: #5b4565; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(236, 72, 153, 0.18); --hero-grad-1: rgba(236, 72, 153, 0.16); --hero-grad-2: rgba(252, 165, 212, 0.22); --hero-grad-3: rgba(255, 255, 255, 0); } /* Coral — soft cream canvas, vivid red accent. */ [data-theme-style="coral"] { color-scheme: light; --accent: #ef4444; --accent-strong: #dc2626; --accent-soft: rgba(239, 68, 68, 0.13); --accent-glow: rgba(239, 68, 68, 0.32); --accent-dark: #991b1b; --bg: #fff7f5; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(239, 68, 68, 0.18); --border-strong: rgba(239, 68, 68, 0.32); --text: #1f0b09; --muted: #6a3a35; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(239, 68, 68, 0.16); --hero-grad-1: rgba(239, 68, 68, 0.14); --hero-grad-2: rgba(252, 165, 165, 0.22); --hero-grad-3: rgba(255, 255, 255, 0); } /* Olive — natural green-cream canvas, lime green accent. */ [data-theme-style="olive"] { color-scheme: light; --accent: #84cc16; --accent-strong: #65a30d; --accent-soft: rgba(132, 204, 22, 0.16); --accent-glow: rgba(132, 204, 22, 0.32); --accent-dark: #3f6212; --bg: #f8faf2; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(132, 204, 22, 0.22); --border-strong: rgba(132, 204, 22, 0.38); --text: #1a2306; --muted: #4f5d2c; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(132, 204, 22, 0.22); --hero-grad-1: rgba(132, 204, 22, 0.16); --hero-grad-2: rgba(190, 242, 100, 0.22); --hero-grad-3: rgba(255, 255, 255, 0); } /* Royal Purple — lavender canvas, deep purple accent. */ [data-theme-style="purple"] { color-scheme: light; --accent: #7c3aed; --accent-strong: #6d28d9; --accent-soft: rgba(124, 58, 237, 0.14); --accent-glow: rgba(124, 58, 237, 0.32); --accent-dark: #4c1d95; --bg: #f9f5ff; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(124, 58, 237, 0.18); --border-strong: rgba(124, 58, 237, 0.32); --text: #18102f; --muted: #524478; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(124, 58, 237, 0.18); --hero-grad-1: rgba(124, 58, 237, 0.16); --hero-grad-2: rgba(196, 181, 253, 0.22); --hero-grad-3: rgba(255, 255, 255, 0); } /* Sunset Orange — warm cream canvas, orange accent. */ [data-theme-style="orange"] { color-scheme: light; --accent: #f97316; --accent-strong: #ea580c; --accent-soft: rgba(249, 115, 22, 0.14); --accent-glow: rgba(249, 115, 22, 0.32); --accent-dark: #9a3412; --bg: #fff7ed; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(249, 115, 22, 0.18); --border-strong: rgba(249, 115, 22, 0.32); --text: #1c0f04; --muted: #7c4419; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(249, 115, 22, 0.18); --hero-grad-1: rgba(249, 115, 22, 0.16); --hero-grad-2: rgba(253, 186, 116, 0.22); --hero-grad-3: rgba(255, 255, 255, 0); } /* Cyan — minty canvas, modern cyan accent. */ [data-theme-style="cyan"] { color-scheme: light; --accent: #06b6d4; --accent-strong: #0891b2; --accent-soft: rgba(6, 182, 212, 0.14); --accent-glow: rgba(6, 182, 212, 0.32); --accent-dark: #155e75; --bg: #f0fdfa; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(6, 182, 212, 0.18); --border-strong: rgba(6, 182, 212, 0.32); --text: #052228; --muted: #2c5d6a; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(6, 182, 212, 0.18); --hero-grad-1: rgba(6, 182, 212, 0.16); --hero-grad-2: rgba(165, 243, 252, 0.22); --hero-grad-3: rgba(255, 255, 255, 0); } /* Slate — neutral business cool-grey, slate accent. */ [data-theme-style="slate"] { color-scheme: light; --accent: #475569; --accent-strong: #334155; --accent-soft: rgba(71, 85, 105, 0.14); --accent-glow: rgba(71, 85, 105, 0.32); --accent-dark: #1e293b; --bg: #f8fafc; --bg-elev: #ffffff; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(255, 255, 255, 0.95); --border: rgba(71, 85, 105, 0.18); --border-strong: rgba(71, 85, 105, 0.32); --text: #0f172a; --muted: #475569; --logo-bg: rgba(255, 255, 255, 0.85); --logo-border: rgba(71, 85, 105, 0.16); --hero-grad-1: rgba(71, 85, 105, 0.10); --hero-grad-2: rgba(203, 213, 225, 0.18); --hero-grad-3: rgba(255, 255, 255, 0); } /* Light-theme polish — applies to ALL non-midnight presets via the [data-theme] flip we set on . Lifts text contrast on hero, softens hero ambient gradient, and switches glass cards to a subtle neumorphic shadow recipe (the SMM-panel reference look). */ html[data-theme="light"] body::before { background: radial-gradient(60vw 55vh at 50% -10%, var(--hero-grad-1, var(--accent-soft)), transparent 70%), radial-gradient(45vw 45vh at 88% 30%, var(--hero-grad-2, transparent), transparent 70%), radial-gradient(50vw 50vh at 10% 60%, var(--hero-grad-3, transparent), transparent 70%) !important; } html[data-theme="light"] .glass, html[data-theme="light"] .prod-card, html[data-theme="light"] .pop-card, html[data-theme="light"] .hero-search-wrap { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(18px) saturate(140%) !important; } html[data-theme="light"] .mk-pill, html[data-theme="light"] .cta-ghost { background: var(--surface-strong) !important; border-color: var(--border) !important; } /* Override the dark text-on-light-button case for primary CTAs: on light themes the accent IS bright, text on it should be white for max contrast (the dark midnight theme uses black text on lime which is the inverse). */ html[data-theme="light"] .cta-primary { color: #fff !important; } html[data-theme="light"] .mk-brand-name, html[data-theme="light"] .hero-words, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 { color: var(--text) !important; } html, body { background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility } body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; overflow-x: hidden } a { color: inherit; text-decoration: none } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit } img { max-width: 100%; display: block } h1, h2, h3, h4 { font-family: 'Space Grotesk', Inter, sans-serif; letter-spacing: -.02em } .muted { color: var(--muted) } .text-center { text-align: center } html { scroll-behavior: smooth } /* Soft ambient gradient on the body — anchors the dark canvas. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60vw 50vh at 50% -10%, var(--accent-soft), transparent 70%), radial-gradient(40vw 40vh at 88% 25%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%), radial-gradient(50vw 50vh at 10% 60%, color-mix(in oklab, #7C3AED 10%, transparent), transparent 70%); } /* Glass card recipe — used by every elevated surface */ .glass { background: linear-gradient(180deg, var(--surface), var(--surface)) padding-box, var(--grad-card-edge) border-box; border: 1px solid transparent; border-radius: var(--r-md); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* Reveal-on-scroll (gated by prefers-reduced-motion below) */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--easing), transform .55s var(--easing); transition-delay: calc(var(--i, 0) * 60ms) } [data-reveal].in, .reveal.in { opacity: 1; transform: none } .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--easing), transform .55s var(--easing) } /* ════════════════════ HEADER ════════════════════ */ .mk-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 75%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--border); } .mk-header-inner { max-width: 1200px; margin: 0 auto; padding: 13px 22px; display: flex; flex-direction: row; align-items: center; gap: 14px } .mk-brand { display: inline-flex; align-items: center; gap: 11px; flex: 1; min-width: 0; color: var(--text) } .mk-brand-logo { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #000; font-family: 'Space Grotesk'; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); letter-spacing: -.02em; } /* Image-mode logo — when seller uploads a logo image. The wrapper gets an ADAPTIVE backdrop that contrasts with the page bg (light glass on dark themes, soft white on light themes), so transparent logos stay visible regardless of which theme is active. The --logo-bg + --logo-border CSS variables are set per-theme above. */ .mk-brand-logo-img { background: var(--logo-bg, rgba(255, 255, 255, 0.06)) !important; border: 1px solid var(--logo-border, rgba(255, 255, 255, 0.12)); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.18) !important; padding: 3px; overflow: hidden; } .mk-brand-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block } /* Footer logo gets the same adaptive treatment. */ .mk-foot-brand-logo.mk-brand-logo-img { background: var(--logo-bg, rgba(255, 255, 255, 0.06)) !important; border: 1px solid var(--logo-border, rgba(255, 255, 255, 0.12)); } .mk-brand-name { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .mk-nav { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0 } .mk-nav-link { padding: 8px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color .15s var(--easing), background .15s var(--easing); } .mk-nav-link:hover { color: var(--text); background: var(--surface) } .mk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 600; transition: background .15s var(--easing), border-color .15s var(--easing), transform .15s var(--easing); } .mk-pill:hover { background: var(--surface-strong); border-color: var(--border-strong); transform: translateY(-1px) } .store-status { padding: 6px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; letter-spacing: .02em; flex-shrink: 0 } .store-status.online { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) } .store-status.offline { background: rgba(255, 255, 255, .04); color: var(--muted); border: 1px solid var(--border) } .store-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor } .store-status.online .dot { animation: pulse-dot 1.6s ease-in-out infinite } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .55; transform: scale(.7) } } .store-status .label { display: inline } /* Mobile drawer */ .mk-burger { display: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); align-items: center; justify-content: center } .mk-burger:hover { background: var(--surface-strong) } .mk-burger span { position: relative; width: 16px; height: 1.5px; background: currentColor } .mk-burger span::before, .mk-burger span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s var(--easing), top .25s var(--easing) } .mk-burger span::before { top: -5px } .mk-burger span::after { top: 5px } .mk-drawer { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); z-index: 80; display: none; animation: fade-in .2s var(--easing) } .mk-drawer.show { display: block } .mk-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--bg-elev); border-left: 1px solid var(--border); padding: 22px; display: flex; flex-direction: column; gap: 6px; animation: slide-in .25s var(--easing) } @keyframes slide-in { from { transform: translateX(100%) } to { transform: none } } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } .mk-drawer-close { align-self: flex-end; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); font-size: 18px; display: inline-flex; align-items: center; justify-content: center } .mk-drawer-link { padding: 14px 12px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 10px } .mk-drawer-link:hover { background: var(--surface) } .mk-drawer-link .ic { width: 20px; text-align: center } @media (max-width: 820px) { .mk-nav .mk-nav-link { display: none } .mk-burger { display: inline-flex } .mk-pill .mk-pill-label { display: none } } @media (max-width: 480px) { .mk-header-inner { padding: 11px 14px; gap: 10px } .mk-brand-name { font-size: 14.5px } .store-status .label { display: none } .store-status { padding: 5px 9px } } /* ════════════════════ HERO ════════════════════ */ .hero { position: relative; padding: 68px 22px 52px; overflow: hidden; max-width: 1200px; margin: 0 auto; } @media (min-width: 720px) { .hero { padding: 96px 22px 80px } } @media (min-width: 1024px) { .hero { padding: 120px 22px 90px; min-height: 80vh; display: flex; flex-direction: column; justify-content: center } } .hero-spot { position: absolute; inset: -10%; pointer-events: none; z-index: 0; opacity: .65; background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 30%), var(--accent-soft), transparent 60%); transition: opacity .3s var(--easing); } .hero-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden } .float-emoji { position: absolute; font-size: 34px; opacity: .4; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45)); animation: float-y 9s ease-in-out infinite; } .float-emoji:nth-child(1) { left: 6%; top: 18%; animation-delay: -1s } .float-emoji:nth-child(2) { left: 88%; top: 14%; animation-delay: -3s } .float-emoji:nth-child(3) { left: 12%; top: 72%; animation-delay: -5s } .float-emoji:nth-child(4) { left: 82%; top: 68%; animation-delay: -2s } .float-emoji:nth-child(5) { left: 48%; top: 8%; animation-delay: -4s; font-size: 26px } .float-emoji:nth-child(6) { left: 50%; top: 80%; animation-delay: -6s; font-size: 30px } @keyframes float-y { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-18px) rotate(3deg) } } .hero-inner { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 22px; } .hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent) } .hero h1 { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 800; font-size: clamp(36px, 7.5vw, 78px); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 18px; } .hero h1 .gline { display: inline-block; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 50%, var(--text) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: hero-shine 6s linear infinite; background-size: 200% 100%; } @keyframes hero-shine { 0% { background-position: 0 0 } 100% { background-position: 200% 0 } } .hero-words .word { display: inline-block; opacity: 0; transform: translateY(.4em); animation: word-rise .55s var(--easing) forwards } .hero-words .word:nth-child(1) { animation-delay: .05s } .hero-words .word:nth-child(2) { animation-delay: .18s } .hero-words .word:nth-child(3) { animation-delay: .31s } .hero-words .word:nth-child(4) { animation-delay: .44s } .hero-words .word:nth-child(5) { animation-delay: .57s } @keyframes word-rise { to { opacity: 1; transform: none } } .hero-tagline { font-size: clamp(15px, 2vw, 19px); color: var(--muted); max-width: 640px; margin: 0 auto 32px; line-height: 1.5 } /* Two-tone headline. .ht-neu = neutral (current text colour), .ht-acc = accent. The accent half also gets a tiny subpixel gradient so it feels less flat. Inherits the .hero-words clamp so font scaling behaves identically to the previous one-tone version. */ .hero-h1-2tone { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 800; font-size: clamp(34px, 6.8vw, 68px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 18px; max-width: 980px; margin-left: auto; margin-right: auto; } .hero-h1-2tone .ht-neu { color: var(--text) } .hero-h1-2tone .ht-acc { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Stats grid — 4 neumorphic cards in a row on desktop, 2×2 on mobile. Big number on top in accent, small uppercase label below. Card recipe matches the SMM reference: white surface, soft shadow, slightly rounded corners. Light themes inherit the neumorphic shadow from html[data-theme=light]; dark themes get a subtle glass card. */ .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 780px; margin: 8px auto 24px; } .hero-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md, 16px); padding: 18px 14px; text-align: center; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform .18s var(--easing), box-shadow .25s var(--easing), border-color .15s var(--easing); } .hero-stat:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .hero-stat-num { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; letter-spacing: -.02em; color: var(--accent); margin-bottom: 4px; } .hero-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } @media (max-width: 720px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 480px } .hero-stat { padding: 14px 10px } } /* Light-theme refinement — neumorphic SMM look (raised white cards). */ html[data-theme="light"] .hero-stat { background: var(--surface-strong, #fff) !important; border-color: var(--border) !important; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] .hero-stat:hover { box-shadow: 0 18px 36px -12px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px var(--accent-soft) !important; } .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px } .cta { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; transition: transform .2s var(--easing), box-shadow .25s var(--easing), background .2s var(--easing), border-color .2s var(--easing); will-change: transform; } .cta-primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #000; box-shadow: 0 12px 32px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35); } .cta-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .4) } .cta-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .cta-ghost:hover { background: var(--surface-strong); border-color: var(--border-strong); transform: translateY(-1px) } /* Community CTA — slightly different from ghost so the third hero button has visual hierarchy (lime > white-bg > violet-bg). */ .cta-community { background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(124, 58, 237, .28)); color: #fff; border: 1px solid rgba(139, 92, 246, .45); box-shadow: 0 8px 22px -8px rgba(139, 92, 246, .4); } .cta-community:hover { background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(124, 58, 237, .42)); border-color: rgba(139, 92, 246, .7); transform: translateY(-1px); } .cta-community .cta-comm-ic { font-size: 16px; line-height: 1 } .hero-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: .02em } .hero-trust .trust-item { display: inline-flex; align-items: center } .hero-trust .trust-dot { opacity: .5 } /* ════════════════════ SEARCH ════════════════════ */ .search-wrap { position: relative; z-index: 5; max-width: 660px; margin: 24px auto 0; padding: 0 22px; } .search-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); transition: border-color .2s var(--easing), box-shadow .2s var(--easing); } .search-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 12px 32px -16px var(--accent-glow) } .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: .7; pointer-events: none } .hero-search-input { width: 100%; padding: 16px 56px 16px 46px; border: 0; background: transparent; color: var(--text); font-size: 15px; font-family: inherit; border-radius: var(--r-pill); outline: none; } .hero-search-input::placeholder { color: var(--muted) } .hero-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; display: none; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; } .hero-search-input:not(:placeholder-shown)~.hero-search-clear { display: inline-flex } .hero-search-clear:hover { background: var(--surface-strong); color: var(--text); border-color: var(--border-strong) } .hero-search-dd { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; } .hero-search-dd.show { display: block; animation: dd-pop .18s var(--easing) } @keyframes dd-pop { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } .hero-search-dd-list { max-height: 360px; overflow-y: auto } .hero-search-dd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: transparent; text-align: left; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); } .hero-search-dd-item:last-child { border-bottom: 0 } .hero-search-dd-item:hover, .hero-search-dd-item.is-active { background: var(--surface-strong) } .hero-search-dd-thumb { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 18px } .hero-search-dd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .hero-search-dd-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .hero-search-dd-name mark { background: var(--accent-soft); color: var(--accent-strong); padding: 0 2px; border-radius: 3px } .hero-search-dd-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .hero-search-dd-price { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text) } .hero-search-dd-empty { padding: 18px 16px; text-align: center; color: var(--muted); font-size: 13px } .hero-search-dd-more { width: 100%; padding: 11px 14px; border: 0; background: var(--surface); color: var(--accent); font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--border); } .hero-search-dd-more:hover { background: var(--surface-strong) } .hero-no-match { margin-top: 12px; text-align: center; color: var(--muted); font-size: 13px; display: none } .hero-no-match.show { display: block } /* ════════════════════ OFFLINE BANNER ════════════════════ */ .store-offline-banner { max-width: 1100px; margin: 18px auto 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: 13px; line-height: 1.5; display: none; } .store-offline-banner.show { display: block } .store-offline-banner strong { font-weight: 800; color: var(--text) } .store-offline-banner small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px } /* ════════════════════ MARQUEE (category emoji ribbon) ════════════════ */ .marquee { position: relative; overflow: hidden; margin: 46px auto 0; max-width: 1400px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, transparent, var(--surface), transparent); mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); } .marquee-track { display: inline-flex; gap: 24px; white-space: nowrap; animation: marquee 40s linear infinite; width: max-content; } .marquee-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); } @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* ════════════════════ SECTIONS ════════════════════ */ .section { max-width: 1200px; margin: 0 auto; padding: 64px 22px } @media (max-width: 640px) { .section { padding: 44px 16px } } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 24px } .sec-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px } .sec-emoji { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); align-items: center; justify-content: center; font-size: 18px } .sec-sub { font-size: 14px; color: var(--muted); font-weight: 500 } /* ════════════════════ CATEGORIES GRID ════════════════════ */ .cat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .cat-tile { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface), var(--surface)) padding-box, var(--grad-card-edge) border-box; border: 1px solid transparent; transition: transform .2s var(--easing), box-shadow .25s var(--easing), border-color .2s var(--easing); position: relative; overflow: hidden; } .cat-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(180px 80px at 100% 0%, var(--accent-soft), transparent 70%); opacity: 0; transition: opacity .25s var(--easing); } .cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card) } .cat-tile:hover::before { opacity: 1 } .cat-tile-emoji { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--surface-strong); display: flex; align-items: center; justify-content: center; font-size: 24px; } .cat-tile-body { flex: 1; min-width: 0 } .cat-tile-name { font-family: 'Space Grotesk'; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cat-tile-count { font-size: 12px; color: var(--muted) } .cat-tile-arrow { color: var(--muted); font-size: 18px; transition: transform .2s var(--easing), color .2s var(--easing) } .cat-tile:hover .cat-tile-arrow { color: var(--accent); transform: translateX(3px) } /* Mobile: horizontal scroll chips */ @media (max-width: 640px) { .cat-grid { grid-template-columns: none; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 6px; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); } .cat-grid::-webkit-scrollbar { display: none } .cat-tile { flex: 0 0 auto; min-width: 200px; padding: 14px; scroll-snap-align: start } .cat-tile-arrow { display: none } } /* ════════════════════ PRODUCT GRID ════════════════════ */ .pop-group { margin-bottom: 46px } .pop-group:last-child { margin-bottom: 0 } .pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border) } .pop-head-emoji { font-size: 22px; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 } .pop-head-name { font-family: 'Space Grotesk'; font-size: 18px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pop-head-count { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); flex-shrink: 0 } .prod-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media (max-width: 640px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px } } /* Trending row scrolls horizontally */ .trending-scroll { overflow-x: auto; overflow-y: visible; scrollbar-width: none; margin: 0 -22px; padding: 6px 22px 12px } .trending-scroll::-webkit-scrollbar { display: none } .prod-grid-row { grid-template-columns: repeat(12, 220px) !important; width: max-content; gap: 14px; } @media (max-width: 640px) { .prod-grid-row { grid-template-columns: repeat(12, 170px) !important } } .pop-group.is-hidden { display: none } .prod-card.is-hidden { display: none } .prod-card { position: relative; border-radius: var(--r-md); overflow: hidden; padding: 14px 14px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)) padding-box, var(--grad-card-edge) border-box; border: 1px solid transparent; transition: transform .25s var(--easing), box-shadow .3s var(--easing), border-color .2s var(--easing); display: flex; flex-direction: column; will-change: transform; } .prod-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(135deg, transparent 30%, var(--accent-soft) 50%, transparent 70%); transform: translateX(-30%); transition: opacity .35s var(--easing), transform .6s var(--easing); } .prod-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -16px var(--accent-glow), 0 8px 22px -10px rgba(0, 0, 0, .6) } .prod-card:hover::before { opacity: 1; transform: translateX(30%) } /* Pulse on search-pick */ .prod-card.is-pulse { animation: card-pulse 1.2s var(--easing) 1 } @keyframes card-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow) } 40% { box-shadow: 0 0 0 14px transparent } 100% { box-shadow: 0 0 0 0 transparent } } /* Card overlay (Hot badge / heart / eye) */ .prod-card-overlay { position: absolute; inset: 8px 8px auto 8px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; } .prod-card-overlay>* { pointer-events: auto } .prod-card-overlay-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start } .prod-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: #DC4646; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 14px -2px rgba(220, 70, 70, .45); } .prod-badge-emoji { font-size: 11px; line-height: 1 } /* uaitool reference badges — NEW = teal, BEST = brand gradient, HOT keeps the existing red. Stack vertically when multiple set. */ .prod-badge-new { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 4px 14px -2px rgba(16, 185, 129, .45); padding: 4px 10px; } .prod-badge-best { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); box-shadow: 0 4px 14px -2px rgba(168, 85, 247, .45); padding: 4px 10px; } .prod-card-eye { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; backdrop-filter: blur(6px); transition: background .15s, transform .15s; } .prod-card-eye:hover { background: rgba(0, 0, 0, .75); transform: scale(1.06) } .prod-card-fav { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background .15s, color .15s, transform .15s, border-color .15s; } .prod-card-fav:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: scale(1.06) } .prod-card-fav.on { color: #DC4646; border-color: rgba(220, 70, 70, .5); background: rgba(220, 70, 70, .12) } .prod-card-fav.on svg { fill: currentColor } .prod-card-link { position: absolute; inset: 0; z-index: 1; font-size: 0; color: transparent } .prod-card .prod-buy { z-index: 2; position: relative } .prod-card-overlay>* { z-index: 4 } .prod-icon { font-size: 54px; text-align: center; line-height: 1; padding: 18px 10px 14px; background: radial-gradient(60% 60% at 50% 40%, var(--accent-soft), transparent 70%); border-radius: 12px; margin-bottom: 10px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); } /* Image-mode icon — when product has image_url, the inner fills the panel instead of an emoji. Reset font-size + padding so the image gets the full panel area. Aspect-ratio keeps it square regardless of source image dimensions. */ .prod-icon-img { padding: 0; font-size: 0; aspect-ratio: 1; height: auto; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); } .prod-icon-img img { width: 100%; height: 100%; object-fit: cover; display: block } .prod-card-foot { display: flex; flex-direction: column; flex: 1; min-width: 0 } .prod-name { font-family: 'Space Grotesk'; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prod-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; min-height: 16px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden } .prod-feats { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px } .prod-feats li { font-size: 11.5px; color: var(--muted); line-height: 1.4; padding-left: 14px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prod-feats li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800 } .prod-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto } .prod-price { font-family: 'Space Grotesk'; font-size: 20px; font-weight: 800; color: var(--text); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; letter-spacing: -.01em } .prod-price-strike { font-size: 11.5px; color: var(--muted); text-decoration: line-through; font-weight: 500 } .prod-price-onreq { font-size: 14px; color: var(--muted); font-weight: 600 } /* Round lime-yellow cart button with the strong outer glow from the uaitool reference. Two-layered shadow: tight inner gloss + wider soft halo so it reads as a glowing pill against dark cards. Keeps .prod-buy.btn-buy class for the JS hooks. */ .prod-buy { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #000; font-size: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px rgba(210, 255, 0, 0.10), 0 8px 24px -2px rgba(210, 255, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .18s var(--easing), box-shadow .25s var(--easing), filter .15s; } .prod-buy::before { content: '🛒'; font-size: 18px } .prod-buy:hover:not(:disabled) { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 6px rgba(210, 255, 0, 0.14), 0 14px 32px -2px rgba(210, 255, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, .5); } .prod-buy:disabled, .prod-buy.offline { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .3); box-shadow: none; cursor: not-allowed; } .prod-buy.offline::before, .prod-buy:disabled::before { content: '🔒' } @media (max-width: 640px) { .prod-buy { width: 38px; height: 38px } .prod-buy::before { font-size: 16px } .prod-card { padding: 12px 12px 12px } .prod-icon { font-size: 44px; padding: 14px 8px 10px } .prod-name { font-size: 14px } .prod-feats li { font-size: 11px } .prod-price { font-size: 18px } } /* ════════════════════ WHY CHOOSE US ════════════════════ */ .why-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .why-card { padding: 24px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface), rgba(255, 255, 255, .02)) padding-box, var(--grad-card-edge) border-box; border: 1px solid transparent; transition: transform .2s var(--easing), box-shadow .25s var(--easing); } .why-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -16px var(--accent-glow) } .why-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .why-icon svg { width: 22px; height: 22px } .why-title { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; margin-bottom: 6px } .why-sub { font-size: 13.5px; color: var(--muted); line-height: 1.55 } /* ════════════════════ TESTIMONIALS ════════════════════ */ .test-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .test-card { padding: 22px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface), rgba(255, 255, 255, .02)) padding-box, var(--grad-card-edge) border-box; border: 1px solid transparent; transition: transform .2s var(--easing), box-shadow .25s var(--easing); } .test-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card) } .test-stars { color: #facc15; font-size: 14px; margin-bottom: 10px; letter-spacing: 1px } .test-text { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 16px } .test-author { display: flex; align-items: center; gap: 10px } .test-avatar { width: 38px; height: 38px; border-radius: 50%; color: #000; font-family: 'Space Grotesk'; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5) } .test-name { font-size: 13.5px; font-weight: 700; color: var(--text) } .test-city { font-size: 11.5px; color: var(--muted) } /* ════════════════════ CTA BANNER ════════════════════ */ .cta-banner { position: relative; max-width: 1100px; margin: 64px auto; padding: 48px 32px; border-radius: var(--r-lg); overflow: hidden; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--bg-elev)), var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); } .cta-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 240px at 50% 0%, var(--accent-soft), transparent 70%); } .cta-banner h2 { position: relative; font-size: clamp(24px, 4vw, 40px); font-weight: 800; margin-bottom: 10px; letter-spacing: -.02em } .cta-banner p { position: relative; color: var(--muted); font-size: 15px; margin-bottom: 24px; max-width: 540px; margin-left: auto; margin-right: auto } .cta-banner .cta { position: relative } @media (max-width: 640px) { .cta-banner { margin: 44px 16px; padding: 36px 22px } } /* ════════════════════ FOOTER ════════════════════ */ .mk-footer { margin-top: 48px; padding: 48px 22px 28px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4)); border-top: 1px solid var(--border); } .mk-footer-inner { max-width: 1200px; margin: 0 auto } .mk-footer-grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-bottom: 36px; } @media (max-width: 820px) { .mk-footer-grid { grid-template-columns: 1fr 1fr } } @media (max-width: 480px) { .mk-footer-grid { grid-template-columns: 1fr; gap: 24px } } .mk-foot-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 14px } .mk-foot-brand-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #000; font-family: 'Space Grotesk'; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow) } .mk-foot-brand-name { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; color: var(--text) } .mk-foot-desc { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 300px } .mk-foot-col h4 { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; text-transform: uppercase } .mk-foot-col a { display: block; font-size: 13.5px; color: var(--text); padding: 5px 0; transition: color .15s } .mk-foot-col a:hover { color: var(--accent) } .mk-foot-bottom { padding-top: 20px; border-top: 1px solid var(--border); text-align: center; font-size: 12px; color: var(--muted) } /* ════════════════════ MOBILE BOTTOM NAV ══════════════════════ uaitool-style: glass bar with 5 tabs (Home / Categories / Cart / Deals / Account). Active tab is a CIRCLE-FILL of the brand accent behind the icon — not a pill — matching the reference. */ .mab { display: none; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 90; background: rgba(20, 20, 24, 0.85); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, .07); border-radius: 24px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .55), 0 6px 24px rgba(0, 0, 0, .5); padding-bottom: env(safe-area-inset-bottom); } .mab-inner { display: flex; max-width: 560px; margin: 0 auto; padding: 8px 4px 6px } .mab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px 4px 4px; font-size: 10.5px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s var(--easing); -webkit-tap-highlight-color: transparent; position: relative; } .mab-item .mab-icon { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; margin-bottom: 4px; transition: background .25s var(--easing), transform .25s var(--easing), box-shadow .3s var(--easing); } .mab-item:hover { color: var(--text) } .mab-item:hover .mab-icon { background: rgba(255, 255, 255, 0.05) } /* Active state — lime-yellow filled circle behind the icon, with a strong outer glow. Label below stays the brand color too. */ .mab-item[data-active="1"] { color: var(--accent) !important } .mab-item[data-active="1"] .mab-icon { background: var(--accent); color: #000; box-shadow: 0 0 0 4px rgba(210, 255, 0, 0.10), 0 8px 22px -4px var(--accent-glow); transform: translateY(-2px); } @media (max-width: 720px) { .mab { display: block } body { padding-bottom: 96px } } /* Floating chat circle — visible on every viewport size. On mobile the bottom nav ate ~96px of bottom space, so we bump bottom up to avoid overlap. Desktop sits at the corner where the legacy green wa-float used to live. */ .chat-float { position: fixed; right: 22px; bottom: 22px; z-index: 95; width: auto; min-width: 54px; height: 54px; border-radius: 999px; background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 30px -6px rgba(139, 92, 246, .55), 0 0 22px rgba(139, 92, 246, .35); transition: transform .15s; border: 0; cursor: pointer; text-decoration: none; padding: 0 20px; } .chat-float:hover { transform: scale(1.06) } .chat-float svg { flex: 0 0 auto; width: 24px; height: 24px } .chat-float-label { font: 800 14px/1 Inter, system-ui, sans-serif; white-space: nowrap; letter-spacing: 0; } @media (max-width: 720px) { .chat-float { right: 18px; bottom: 104px; min-width: 52px; height: 52px; padding: 0 16px } } /* ════════════════ AI CHAT PANEL (floating chatbot) ════════════════ Lives bottom-right (desktop) / fills bottom of viewport (mobile). Hidden until probe says AI is enabled for the store. The button to open it is the .chat-float bubble — we intercept the click and open the panel instead of going to wa.me. */ .ai-panel { position: fixed; right: 22px; bottom: 88px; z-index: 200; width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 120px); background: var(--bg-elev, #0d0d12); border: 1px solid var(--border-strong, rgba(255, 255, 255, .18)); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); display: none; flex-direction: column; overflow: hidden; animation: ai-pop .25s var(--easing, cubic-bezier(.2, .8, .2, 1)); } @keyframes ai-pop { from { opacity: 0; transform: translateY(12px) scale(.98) } to { opacity: 1; transform: none } } .ai-panel.show { display: flex } @media (max-width: 720px) { .ai-panel { right: 8px; left: 8px; bottom: 104px; width: auto; height: 70vh } } .ai-panel-head { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--border, rgba(255, 255, 255, .10)); background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); color: #fff; } .ai-panel-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .ai-panel-head-text { flex: 1; min-width: 0 } .ai-panel-head-name { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -.01em } .ai-panel-head-sub { font-size: 11.5px; color: rgba(255, 255, 255, .78); margin-top: 1px } .ai-panel-close { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 0; color: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ai-panel-close:hover { background: rgba(255, 255, 255, .25) } .ai-panel-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: var(--bg, #000); } .ai-msg { display: flex; gap: 8px; max-width: 85% } .ai-msg-user { align-self: flex-end; flex-direction: row-reverse } .ai-msg-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; background: var(--surface-strong, rgba(255, 255, 255, .06)); color: var(--text, #f4f4f5); word-wrap: break-word; overflow-wrap: break-word; } .ai-msg-user .ai-msg-bubble { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); color: #fff; } .ai-msg-bubble a { color: var(--accent, #D2FF00); text-decoration: underline } .ai-msg-user .ai-msg-bubble a { color: #fff } .ai-typing { display: inline-flex; gap: 3px; padding: 9px 13px; border-radius: 14px; background: var(--surface-strong, rgba(255, 255, 255, .06)) } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted, #a1a1aa); opacity: .5; animation: ai-bounce 1.2s infinite } .ai-typing span:nth-child(2) { animation-delay: .15s } .ai-typing span:nth-child(3) { animation-delay: .3s } @keyframes ai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4 } 40% { transform: translateY(-5px); opacity: 1 } } .ai-panel-footer { flex-shrink: 0; padding: 10px 12px 12px; border-top: 1px solid var(--border, rgba(255, 255, 255, .10)); background: var(--bg-elev, #0d0d12); display: flex; align-items: flex-end; gap: 8px; } .ai-panel-input { flex: 1; min-height: 38px; max-height: 120px; padding: 9px 12px; border-radius: 18px; background: var(--surface, rgba(255, 255, 255, .04)); border: 1px solid var(--border, rgba(255, 255, 255, .10)); color: var(--text, #f4f4f5); font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: none; outline: none; } .ai-panel-input:focus { border-color: #8B5CF6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18) } .ai-panel-send { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); color: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; transition: transform .15s, box-shadow .2s, opacity .15s; } .ai-panel-send:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 8px 20px -6px rgba(139, 92, 246, .5) } .ai-panel-send:disabled { opacity: .4; cursor: not-allowed } .ai-panel-fallback { padding: 14px 16px; background: rgba(139, 92, 246, .10); border: 1px solid rgba(139, 92, 246, .25); border-radius: 10px; margin: 12px; font-size: 12.5px; color: var(--text-muted, #a1a1aa); line-height: 1.5; } .ai-panel-fallback a { color: #25D366; font-weight: 700; text-decoration: none } /* ════════════════════ CHECKOUT MODAL (visual restyle) ════════════ */ .co-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(10px); z-index: 500; display: none; align-items: center; justify-content: center; padding: 16px; animation: fade-in .2s var(--easing) } .co-overlay.show { display: flex } .co-box { width: 100%; max-width: 460px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); animation: slide-up .25s var(--easing); } @keyframes slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } } .co-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border) } .co-head h3 { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; color: var(--text); margin: 0 } .co-close { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-size: 18px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center } .co-close:hover { background: var(--surface-strong); color: var(--text) } .co-body { padding: 18px 20px 20px; overflow-y: auto } .co-step { display: none } .co-step.active { display: block; animation: fade-in .2s var(--easing) } .co-prod-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 14px } .co-prod-summary .pn { font-size: 14px; font-weight: 700; color: var(--text) } .co-prod-summary .pd { font-size: 11.5px; color: var(--muted); margin-top: 2px } .co-prod-summary .pp { font-size: 18px; font-weight: 800; color: var(--accent); font-family: 'Space Grotesk' } .co-fg { margin-bottom: 14px } .co-fg label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px } .co-fg input { width: 100%; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s } .co-fg input:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) } .co-fg small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px } .co-qty { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px } .co-qty button { width: 28px; height: 28px; border-radius: 6px; background: var(--surface-strong); color: var(--text); font-size: 14px; font-weight: 700 } .co-qty button:hover { background: color-mix(in srgb, var(--accent) 15%, var(--surface-strong)) } .co-qty input { flex: 0 0 50px; text-align: center; background: transparent; border: 0; color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; outline: none } .co-qty input::-webkit-inner-spin-button, .co-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .co-err { color: #f87171; font-size: 12px; min-height: 14px; margin-bottom: 10px } .co-btn { width: 100%; padding: 13px 18px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #000; font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px -6px var(--accent-glow); transition: transform .15s, box-shadow .2s, opacity .15s; } .co-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px -8px var(--accent-glow) } .co-btn:disabled { opacity: .5; cursor: not-allowed } .co-btn-ghost { width: 100%; padding: 11px 18px; border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; border: 1px solid var(--border); margin-top: 10px; } .co-btn-ghost:hover { background: var(--surface-strong); border-color: var(--border-strong) } .co-method-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; margin-bottom: 14px } .co-method { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s } .co-method:hover { border-color: var(--border-strong); background: var(--surface-strong) } .co-method.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 0 0 1px var(--accent) } .co-method-icon { font-size: 22px; flex-shrink: 0 } .co-method-name { font-size: 14px; font-weight: 700; color: var(--text) } .co-method-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px } .co-warn { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5; color: var(--text); margin-bottom: 14px } .co-pay-box { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 12px; text-align: center } .co-pay-amount-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase } .co-pay-amount { font-family: 'Space Grotesk'; font-size: 32px; font-weight: 800; color: var(--accent); margin-bottom: 14px; letter-spacing: -.02em } .co-pay-qr { width: 200px; height: 200px; border-radius: var(--r-sm); background: #fff; padding: 6px; margin: 0 auto 12px } .co-pay-addr { padding: 9px 12px; background: var(--surface-strong); border: 1px solid var(--border); border-radius: 8px; font-family: monospace; font-size: 12px; color: var(--text); cursor: pointer; word-break: break-all; transition: background .15s } .co-pay-addr:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong)) } .co-status { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; color: var(--text); text-align: center; line-height: 1.5; margin-bottom: 8px } .co-status.failed { background: rgba(220, 70, 70, .08); border-color: rgba(220, 70, 70, .3); color: #f87171 } .co-status.verifying { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent) } .co-status.success { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text); text-align: center } .co-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: co-spin .8s linear infinite; margin-right: 8px; vertical-align: -2px } @keyframes co-spin { to { transform: rotate(360deg) } } .co-timer { font-size: 11px; color: var(--muted); font-weight: 500 } /* ════════════════════ BUY-NOW CHOOSER ════════════════════ */ .buy-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px); z-index: 480; display: none; align-items: center; justify-content: center; padding: 18px; animation: fade-in .2s var(--easing) } .buy-ov.show { display: flex } .buy-ov-box { width: 100%; max-width: 420px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 24px 22px 18px; position: relative; animation: slide-up .25s var(--easing); box-shadow: var(--shadow-card) } .buy-ov-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; justify-content: center } .buy-ov-close:hover { background: var(--surface-strong); color: var(--text) } .buy-ov-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px } .buy-ov-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); display: inline-flex; align-items: center; justify-content: center; font-size: 22px } .buy-ov-info h3 { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 4px; color: var(--text) } .buy-ov-info p { font-size: 13px; color: var(--muted) } .buy-ov-info .price { color: var(--text); font-weight: 700 } .buy-ov-opts { display: flex; flex-direction: column; gap: 9px } .buy-ov-opt { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); transition: background .15s, border-color .15s, transform .15s; cursor: pointer; text-decoration: none; } .buy-ov-opt:hover { background: var(--surface-strong); border-color: var(--border-strong); transform: translateY(-1px) } .buy-ov-opt-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff } .buy-ov-opt-icon.online { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #000; box-shadow: 0 4px 14px -4px var(--accent-glow) } .buy-ov-opt-icon.wa { background: #25D366; box-shadow: 0 4px 14px -4px rgba(37, 211, 102, .5) } .buy-ov-opt-text { flex: 1; min-width: 0 } .buy-ov-opt-text b { font-family: 'Space Grotesk'; font-size: 14px; font-weight: 700; display: block; margin-bottom: 2px } .buy-ov-opt-text small { font-size: 11.5px; color: var(--muted); display: block; line-height: 1.4 } .buy-ov-opt-chev { color: var(--muted); font-size: 18px; flex-shrink: 0 } /* ════════════════════ REDUCED MOTION ════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } .hero-spot, .float-emoji, .marquee-track { display: none !important } [data-reveal] { opacity: 1; transform: none } .reveal { opacity: 1; transform: none } } /* ════════════════════ SCROLLBARS ════════════════════ */ .co-body::-webkit-scrollbar { width: 6px } .co-body::-webkit-scrollbar-track { background: transparent } .co-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px } .ws-theme-fab { position: fixed; left: 22px; bottom: 22px; z-index: 95; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-strong, rgba(255, 255, 255, 0.08)); border: 1px solid var(--border, rgba(255, 255, 255, 0.18)); color: var(--text); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35); transition: transform .15s var(--easing, cubic-bezier(.2, .8, .2, 1)), background .15s var(--easing); } .ws-theme-fab:hover { transform: scale(1.06); background: var(--surface, rgba(255, 255, 255, 0.12)) } .ws-theme-fab svg { width: 20px; height: 20px } @media (max-width: 720px) { .ws-theme-fab { left: 18px; bottom: 104px; width: 44px; height: 44px } } .ws-theme-pop { position: fixed; left: 22px; bottom: 80px; z-index: 96; width: 280px; max-width: calc(100vw - 44px); background: var(--bg-elev, #0d0d12); border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18)); border-radius: 18px; padding: 16px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55); display: none; animation: ws-tp-pop .25s var(--easing, cubic-bezier(.2, .8, .2, 1)); } .ws-theme-pop.show { display: block } @keyframes ws-tp-pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } } @media (max-width: 720px) { .ws-theme-pop { left: 18px; bottom: 160px } } .ws-theme-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px } .ws-theme-pop-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.005em } .ws-theme-pop-close { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; } .ws-theme-pop-close:hover { background: var(--surface-strong) } .ws-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ws-theme-swatch { position: relative; cursor: pointer; width: 100%; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1; border: 2px solid transparent; transition: transform .15s var(--easing), border-color .15s var(--easing); /* Fallback for older browsers / when aspect-ratio behaves oddly inside a small popover — guarantees a visible swatch box at minimum. */ min-height: 60px; } .ws-theme-swatch:hover { transform: scale(1.06) } .ws-theme-swatch[data-active="1"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) } .ws-theme-swatch[data-active="1"]::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 900; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .ws-theme-swatch-name { display: block; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 6px; letter-spacing: -.005em; } .ws-theme-pop-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); text-align: center; } @keyframes pwa-pop { from { opacity: 0; transform: translate(-50%, 16px) scale(.96) } to { opacity: 1; transform: translate(-50%, 0) scale(1) } } /* On desktop (no bottom nav, AI bubble at right:22px;bottom:22px), the banner moves to the bottom-right corner above the chat bubble. Inline style on the element pins it center-bottom for mobile, so we have to !important-override here on desktop. Width is also clamped to 360px so it sits like a toast, not full-bleed. */ @media (min-width: 721px) { #pwaInstallBanner { left: auto !important; right: 22px !important; transform: none !important; bottom: 88px !important; width: 360px !important; max-width: calc(100vw - 44px) !important; animation: pwa-pop-d .35s cubic-bezier(.2, .8, .2, 1) !important; } @keyframes pwa-pop-d { from { opacity: 0; transform: translateY(16px) scale(.96) } to { opacity: 1; transform: none } } } /* ═══ Pure-black canvas — matches /store/:slug homepage ═══ v3 (May 2026): the seller's hex flows through --accent so category / product / legal pages match the storefront homepage's accent exactly. Legacy --accent-indigo / --accent-violet kept as aliases of --accent so older selectors still resolve. */ :root{ /* v3 brand accent (per-store) */ --accent: #ffff00; --accent-strong: color-mix(in oklab, var(--accent) 80%, white); --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent); --accent-glow: color-mix(in oklab, var(--accent) 35%, transparent); /* v3 surface scale aliases (storefront homepage uses these names) */ --bg: #07070d; --bg-elev: #0d0d12; --surface: rgba(255,255,255,0.04); --surface-strong: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text: #f4f4f5; --muted: #a1a1aa; /* Legacy token names — kept so the existing rules below still resolve */ --bg-primary:#000000;--bg-elevated:#0a0a0a;--bg-card:#0d0d0d; --surface-glass:rgba(255,255,255,.04);--surface-glass-hover:rgba(255,255,255,.08); --border-subtle:#141414;--border-default:#1a1a1a; --text-primary:#EFF1F4;--text-secondary:#cbd5e1;--text-muted:#838B96;--text-dim:#5C636E; --accent-indigo:var(--accent);--accent-violet:var(--accent); --brand-gradient:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 50%,var(--accent) 100%); --brand-gradient-soft:linear-gradient(135deg,var(--accent-soft),color-mix(in oklab, var(--accent) 12%, transparent)); --wa-green:#25D366;--wa-green-dark:#128C7E; --grid-line:rgba(255,255,255,.03); --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow-md:0 10px 30px rgba(0,0,0,.55); --shadow-lg:0 25px 60px rgba(0,0,0,.65); --shadow-glow:0 10px 40px -10px var(--accent-glow); --easing:cubic-bezier(.2,.8,.2,1); } /* Light mode removed (May 2026) — storefront pages are dark-only, matching uaitool's design language. The system-preference and explicit data-theme="light" override blocks have been deleted. */ *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;transition:background .25s,color .25s} body{font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55} h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} img{max-width:100%;display:block} /* ═══ Sticky header ═══ */ .mk-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-primary) 80%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border-subtle)} .mk-header-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px} .mk-brand{display:inline-flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text);flex:1;min-width:0} .mk-brand-logo{ flex-shrink:0;width:34px;height:34px;border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:#000;font-family:'Space Grotesk';font-weight:800;font-size:13px; display:inline-flex;align-items:center;justify-content:center; box-shadow:var(--shadow-glow);letter-spacing:-.02em; } /* Image-mode logo — when seller uploads. Drops the gradient bg and lets the fill via object-fit:contain so wide lockups + square logos both render correctly. */ .mk-brand-logo-img{ background:transparent !important; box-shadow:none !important; padding:0;overflow:hidden; } .mk-brand-logo-img img{width:100%;height:100%;object-fit:contain;display:block} .mk-brand span:not(.mk-brand-logo){overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mk-nav{display:inline-flex;align-items:center;gap:8px;flex-shrink:0} .mk-pill{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:10px; background:var(--surface-glass);border:1px solid var(--border-default); color:var(--text-primary);font-size:13px;font-weight:600; transition:background .2s,border-color .2s,transform .2s; } .mk-pill:hover{background:var(--surface-glass-hover);border-color:var(--border-strong);transform:translateY(-1px)} .store-status{padding:6px 11px;border-radius:999px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px} .store-status.online{background:rgba(210,255,0,.10);color:#D2FF00;border:1px solid rgba(210,255,0,.32)} .store-status.offline{background:rgba(255,255,255,.04);color:var(--text-muted);border:1px solid var(--border-default)} .store-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9} .store-status .dot{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)} /* Theme toggle removed (May 2026) — storefront is dark-only. */ .theme-toggle,.mk-theme-btn{display:none !important} @media (max-width:480px){ .mk-header-inner{padding:11px 14px;gap:8px} .mk-brand{font-size:14.5px} .mk-brand-logo{width:30px;height:30px;font-size:12px} .store-status .label{display:none} .store-status{padding:5px 9px} .mk-pill .label{display:none} .mk-pill{padding:8px 10px;width:auto} } /* ═══ Category nav (sticky under header) ═══ */ .cat-nav-bar{position:sticky;top:58px;z-index:40;background:color-mix(in srgb,var(--bg-primary) 90%,transparent);border-bottom:1px solid var(--border-subtle);padding:10px 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .cat-nav-inner{ max-width:1200px;margin:0 auto;padding:0 16px; display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%); } .cat-nav-inner::-webkit-scrollbar{display:none} .cat-nav-link{ flex-shrink:0;display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px; background:var(--surface-glass);border:1px solid var(--border-default); color:var(--text-secondary);font-size:13px;font-weight:600;white-space:nowrap; scroll-snap-align:start;min-height:36px; transition:all .15s; } .cat-nav-link:hover{color:var(--text-primary);border-color:var(--border-strong);transform:translateY(-1px)} .cat-nav-link.cat-nav-home,.cat-nav-link.active{ background:var(--brand-gradient);color:#000;border-color:transparent;font-weight:700; box-shadow:0 4px 14px -4px var(--accent-glow); } .cat-nav-link.cat-nav-home:hover,.cat-nav-link.active:hover{filter:brightness(1.06);color:#000} .cat-nav-emoji{font-size:15px} .cat-nav-count{background:rgba(255,255,255,.06);padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700} .cat-nav-link.cat-nav-home .cat-nav-count,.cat-nav-link.active .cat-nav-count{background:rgba(0,0,0,.35);color:#000} @media (max-width:640px){ .cat-nav-bar{top:52px} .cat-nav-link{padding:8px 13px;font-size:12.5px} } /* ═══ Breadcrumbs ═══ */ .crumb{max-width:1200px;margin:0 auto;padding:18px 20px 0;color:var(--text-muted);font-size:13px;display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow:hidden} .crumb a{flex-shrink:0} .crumb a:hover{color:var(--accent-indigo)} .crumb-sep{margin:0 8px;color:var(--text-dim);flex-shrink:0} /* On mobile the breadcrumb's last segment (current page name) gets ellipsis so long product titles don't wrap or push the .pd-wrap content sideways. */ .crumb > span:last-child{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } @media (max-width:720px){ .crumb{padding:12px 14px 0;font-size:12px;gap:0} .crumb-sep{margin:0 6px} } /* ═══ Category head ═══ */ .cat-head{max-width:1200px;margin:0 auto;padding:14px 20px 6px} .cat-head h1{ font-size:clamp(24px,3.5vw,34px);font-weight:800;line-height:1.15; display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .cat-head h1 .emoji{font-size:1em} .cat-head h1 .count{ font-family:'Inter';font-size:13px;font-weight:600;color:var(--text-muted); padding:5px 12px;border-radius:999px;background:var(--surface-glass);border:1px solid var(--border-default); } /* ═══ Product grid — landing-preview style, centered cards ═══ Vertical card with: [emoji icon ·· top centered] [name] [sub-line] [feature checkmarks] [price (with strikethrough original)] [Buy Now button ·· single CTA] 2 cols on mobile, 3 on tablet, 4 on desktop. */ .prod-grid{ max-width:1200px;margin:0 auto;padding:24px 20px 48px; display:grid;grid-template-columns:repeat(2,1fr);gap:14px; } @media (min-width:640px){.prod-grid{grid-template-columns:repeat(3,1fr);gap:18px}} @media (min-width:1024px){.prod-grid{grid-template-columns:repeat(4,1fr)}} .prod-card{ background:linear-gradient(180deg,var(--surface-glass),transparent); border:1px solid var(--border-subtle);border-radius:16px; padding:22px 18px 18px;position:relative; display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; } /* Invisible overlay link so the whole card (except the Buy Now button) navigates to the product detail page. Buttons sit on a higher z-index so their clicks stay independent. */ .prod-card-link{position:absolute;inset:0;z-index:1;color:transparent;font-size:0;line-height:0} .prod-card-link:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:-2px;border-radius:16px} .prod-card>*:not(.prod-card-link){position:relative;z-index:0} .prod-card .prod-buy{z-index:2} .prod-card:hover{transform:translateY(-4px);border-color:var(--border-default);box-shadow:var(--shadow-md)} .prod-card:hover .prod-icon{transform:scale(1.08)} /* Emoji icon at the top — on a soft rounded tile, centered */ .prod-icon{ font-size:52px;line-height:1;margin-top:4px; transition:transform .35s ease; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)); } /* Image-mode icon — when product.image_url is set we render an instead of an emoji. The wrapper goes flat (no font-size/filter) and the image fills it via object-fit:cover. */ .prod-icon-img{ font-size:0;margin-top:4px; width:88px;height:88px;border-radius:12px; overflow:hidden;display:flex;align-items:center;justify-content:center; background:var(--surface-glass);border:1px solid var(--border-default); transition:transform .35s ease; } .prod-icon-img img{width:100%;height:100%;object-fit:cover;display:block} .prod-name{ font-family:'Space Grotesk';font-size:17px;font-weight:700;line-height:1.25; letter-spacing:-.01em;color:var(--text-primary);margin-top:8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .prod-sub{ font-size:12.5px;color:var(--text-muted);line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:34px; } /* Feature list — checkmark bullets, compact, left-aligned inside a centered column so they read like a list but the card stays visually centered. */ .prod-feats{ list-style:none;padding:0;margin:10px 0 6px; display:flex;flex-direction:column;gap:4px;align-self:stretch; text-align:left; } .prod-feats li{ font-size:12.5px;color:var(--text-secondary);line-height:1.4; padding-left:18px;position:relative; } .prod-feats li::before{ content:'✓';position:absolute;left:0;top:0; color:var(--accent-indigo);font-weight:800; } /* Price: white (was hardcoded red — clashed with the new neon-lime theme). Uaitool's price text is plain white #EFF1F4. */ .prod-price{ font-family:'Space Grotesk','Poppins',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.01em; color:var(--text-primary);margin-top:10px; display:flex;align-items:baseline;gap:6px;justify-content:flex-start; } .prod-price-strike{font-size:12.5px;color:var(--text-dim);text-decoration:line-through;font-weight:500} /* Buy button: lime-yellow circle matching the homepage cards (was a wide red gradient pill). The .prod-card-foot wrapper aligns it on the same flex row as the price. */ .prod-buy{ flex-shrink:0;width:42px;height:42px;padding:0;border-radius:50%; background:#D2FF00 !important;color:#000 !important;font-size:0; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;border:0; box-shadow:0 6px 20px -4px rgba(210,255,0,.45),0 0 16px rgba(210,255,0,.25); transition:transform .15s, box-shadow .25s, filter .15s; } .prod-buy::before{content:'🛒';font-size:18px} .prod-buy:hover:not(:disabled){ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 28px -4px rgba(210,255,0,.6),0 0 28px rgba(210,255,0,.4); } .prod-buy:disabled, .prod-buy.offline{ background:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.3) !important; box-shadow:none;cursor:not-allowed; } .prod-buy.offline::before, .prod-buy:disabled::before{content:'🔒'} /* Wrap price + buy on the same row */ .prod-card .prod-price-row{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px; } .prod-card .prod-price-row .prod-price{margin-top:0} @media (max-width:480px){ .prod-grid{padding:18px 12px 40px;gap:12px} .prod-card{padding:18px 14px 16px} .prod-icon{font-size:44px} .prod-name{font-size:15px;margin-top:6px} .prod-sub{font-size:11.5px;min-height:30px;-webkit-line-clamp:2} .prod-feats li{font-size:11.5px;padding-left:16px} .prod-price{font-size:22px;margin-top:8px} .prod-price-strike{font-size:12px} .prod-buy{width:38px;height:38px;padding:0} .prod-buy::before{font-size:16px} } /* ═══ Buy-Now chooser modal ═══ Opens when any .prod-buy is clicked. Shows two options: • Buy Online Now — redirects to main store /#buy= (hooks into the existing checkout modal in renderStorePage) • Order on WhatsApp — opens wa.me link */ .buy-ov{ position:fixed;inset:0;z-index:90; background:color-mix(in srgb,#000 50%,transparent); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:20px; animation:buy-ov-in .2s ease-out; } .buy-ov.show{display:flex} @keyframes buy-ov-in{from{opacity:0}to{opacity:1}} .buy-ov-box{ width:100%;max-width:400px;background:var(--bg-elevated); border:1px solid var(--border-default);border-radius:20px; padding:26px 22px 22px;box-shadow:var(--shadow-lg); animation:buy-ov-pop .25s cubic-bezier(.2,.8,.3,1); } @keyframes buy-ov-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}} .buy-ov-head{display:flex;align-items:start;gap:12px;margin-bottom:16px} .buy-ov-icon{ flex-shrink:0;width:44px;height:44px;border-radius:12px; background:var(--brand-gradient-soft);border:1px solid rgba(210,255,0,.3); display:flex;align-items:center;justify-content:center;font-size:20px; } .buy-ov-info h3{font-family:'Space Grotesk';font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin-bottom:4px;color:var(--text-primary)} .buy-ov-info p{font-size:13px;color:var(--text-muted)} .buy-ov-info .price{color:var(--text-primary);font-weight:700} .buy-ov-close{ position:absolute;top:14px;right:14px; width:30px;height:30px;border-radius:50%; background:var(--surface-glass);border:1px solid var(--border-default); color:var(--text-muted);font-size:16px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; } .buy-ov-close:hover{border-color:var(--border-strong);color:var(--text-primary)} .buy-ov-opts{display:flex;flex-direction:column;gap:10px;margin-top:6px} .buy-ov-opt{ display:flex;align-items:center;gap:14px;padding:14px 16px; border:1px solid var(--border-default);border-radius:14px; background:var(--surface-glass);text-decoration:none;color:var(--text-primary); transition:background .15s,border-color .15s,transform .15s;cursor:pointer; } .buy-ov-opt:hover{background:var(--surface-glass-hover);border-color:var(--border-strong);transform:translateY(-1px)} .buy-ov-opt-icon{ flex-shrink:0;width:40px;height:40px;border-radius:10px; display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff; } .buy-ov-opt-icon.online{background:var(--brand-gradient);color:#000;box-shadow:0 4px 14px -4px var(--accent-glow)} .buy-ov-opt-icon.wa{background:var(--wa-green);box-shadow:0 4px 14px -4px rgba(37,211,102,.45)} .buy-ov-opt-text{flex:1;min-width:0} .buy-ov-opt-text b{font-family:'Space Grotesk';font-size:14px;font-weight:700;color:var(--text-primary);display:block;margin-bottom:2px} .buy-ov-opt-text small{font-size:12px;color:var(--text-muted)} .buy-ov-opt-chev{color:var(--text-dim);font-size:18px;flex-shrink:0} /* ═══ Product detail ═══ */ .pd-wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px} /* Mobile: less top breathing-room since the sticky header + cat-nav already occupy ~110px of the viewport. Bottom keeps room for the floating .mab nav. */ @media (max-width:720px){.pd-wrap{padding:14px 14px 40px}} .pd-layout{display:grid;grid-template-columns:1fr;gap:28px} @media (max-width:720px){.pd-layout{gap:16px}} @media (min-width:840px){.pd-layout{grid-template-columns:1.1fr 1fr;gap:44px}} .pd-media{ aspect-ratio:1;border-radius:20px;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; border:1px solid var(--border-subtle);box-shadow:var(--shadow-md); } /* Image-mode pd-media — when product.image_url is set the panel becomes pure image (no gradient bg, no emoji). object-fit:cover keeps any aspect ratio readable inside the 1:1 box. */ .pd-media-img{background:var(--bg-card);padding:0} .pd-media-img img{width:100%;height:100%;object-fit:cover;display:block} /* Mobile: cap the emoji panel so it doesn't take the whole above-the-fold. A 4:3 box with max-height keeps it visible without dominating. */ @media (max-width:720px){ .pd-media{aspect-ratio:auto;height:200px;border-radius:16px} } @media (max-width:380px){ .pd-media{height:170px} } .pd-media-inner{font-size:140px;line-height:1;filter:drop-shadow(0 12px 30px rgba(0,0,0,.25))} @media (max-width:720px){.pd-media-inner{font-size:96px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}} @media (max-width:380px){.pd-media-inner{font-size:80px}} .pd-info h1{font-size:clamp(20px,3.5vw,32px);font-weight:800;line-height:1.2;margin-bottom:8px} .pd-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap} .pd-cat-pill{ display:inline-flex;align-items:center;gap:6px; padding:5px 12px;border-radius:999px; background:var(--brand-gradient-soft);border:1px solid rgba(210,255,0,.25); font-size:12px;font-weight:600;color:var(--accent-indigo); } .pd-duration{font-size:13px;color:var(--text-muted);font-weight:500} .pd-desc{color:var(--text-secondary);font-size:15px;line-height:1.65;margin:16px 0 22px} ul.pd-desc,.pd-desc ul{list-style:disc;margin:16px 0 22px;padding-left:22px} .pd-desc li{margin:5px 0} .pd-price-block{ display:flex;align-items:baseline;gap:12px;margin-bottom:4px;flex-wrap:wrap; padding:16px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle); } @media (max-width:720px){.pd-price-block{padding:12px 0;gap:8px}} .pd-price-main{font-family:'Space Grotesk';font-size:clamp(28px,7vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--text-primary)} .pd-price-usd{font-size:15px;color:var(--text-muted);font-weight:500} .pd-features{ background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:14px; padding:18px 22px;margin:20px 0; } @media (max-width:720px){.pd-features{padding:14px 16px;margin:16px 0;border-radius:12px}} @media (max-width:720px){.pd-desc{font-size:14px;margin:12px 0 16px}} .pd-features h3{font-size:12px;font-weight:700;margin-bottom:12px;color:var(--text-primary);text-transform:uppercase;letter-spacing:.08em} .pd-features ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px} .pd-features li{font-size:14px;color:var(--text-secondary);display:flex;gap:10px;align-items:flex-start;line-height:1.45} .pd-features li::before{content:'';flex-shrink:0;margin-top:3px;width:16px;height:16px;border-radius:50%;background:var(--brand-gradient-soft) center/60% no-repeat url("data:image/svg+xml;utf8,")} /* The Buy Now CTA is the primary conversion path on mobile — keep it sticky-ish at the bottom of the visible viewport so customers never have to scroll back up to tap it. On desktop it sits inline. */ .pd-ctas{display:flex;gap:10px;margin-top:18px} @media (max-width:480px){.pd-ctas{flex-direction:column;margin-top:14px}.pd-ctas .pd-cta-wa{flex:1}} @media (max-width:720px){.pd-cta{min-height:50px;font-size:15px}} .pd-cta{ flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 18px;border-radius:12px; font-size:14.5px;font-weight:700; transition:transform .2s,filter .2s,box-shadow .2s;min-height:48px; } .pd-cta-buy{ background:var(--brand-gradient);color:#000; box-shadow:0 8px 24px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.25); } .pd-cta-buy:hover:not(.offline){transform:translateY(-2px);filter:brightness(1.06)} .pd-cta-buy.offline{opacity:.6;cursor:not-allowed} .pd-cta-wa{ flex:0 0 auto;padding:14px 22px;background:var(--wa-green);color:#fff; box-shadow:0 6px 18px -6px rgba(37,211,102,.4); } .pd-cta-wa:hover{background:var(--wa-green-dark);transform:translateY(-2px)} .pd-trust{ margin-top:22px;padding:16px 20px; background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:14px; display:grid;grid-template-columns:1fr 1fr;gap:14px; } .pd-trust-item{font-size:12.5px;color:var(--text-muted);line-height:1.5} .pd-trust-item b{display:block;font-size:13px;color:var(--text-primary);font-weight:700;margin-bottom:2px} @media (max-width:720px){.pd-trust{margin-top:18px;padding:14px 16px;gap:12px;border-radius:12px}} @media (max-width:420px){.pd-trust{grid-template-columns:1fr;gap:10px}} /* Sticky body padding on the product page so the floating .mab nav doesn't sit on top of the trust block at scroll-end. */ @media (max-width:720px){.pd-info{padding-bottom:8px}} /* ═══ Empty / not-found state ═══ */ .empty-state{text-align:center;padding:80px 20px 120px;color:var(--text-muted)} .empty-state .empty-emoji{font-size:56px;margin-bottom:16px;display:inline-block;filter:grayscale(.3)} .empty-state h2{color:var(--text-primary);font-size:24px;margin-bottom:8px} .empty-state p{margin-bottom:20px;font-size:14px} /* ═══ Footer ═══ */ .mk-footer{ margin-top:40px;padding:32px 20px;text-align:center; border-top:1px solid var(--border-subtle);background:var(--bg-elevated); } .mk-footer a{color:var(--accent-indigo);font-weight:600;font-size:14px} .mk-footer p{color:var(--text-dim);font-size:12px;margin-top:10px} .mk-footer-legal{margin-top:10px;font-size:12.5px;color:var(--text-muted)} .mk-footer-legal a{color:var(--text-secondary);text-decoration:none} .mk-footer-legal a:hover{color:var(--accent-indigo)} .legal-sep{margin:0 4px;color:var(--text-dim)} /* Mobile bottom action bar — visible only ≤720px. 3D floating nav. */ .mab{ display:none; position:fixed; left:8px; right:8px; bottom:8px; z-index:90; background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.06); border-radius: 22px; box-shadow: 0 -12px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(0,0,0,.5); padding-bottom: env(safe-area-inset-bottom); } .mab-inner{ display:flex; max-width:560px; margin:0 auto; padding: 4px; } .mab-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 6px 7px; background:transparent; border:0; cursor:pointer; font-family:'Inter','system-ui',sans-serif; font-size:10.5px; font-weight:600; color: var(--text-muted); text-decoration:none; border-radius: 16px; transition: color .15s, transform .15s, background .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent; } .mab-item:hover, .mab-item:active{ color: var(--text-primary); } .mab-item.active{ background: linear-gradient(180deg, #DDFF1F 0%, #BFEC00 100%) !important; color: #000 !important; transform: translateY(-3px); box-shadow: 0 6px 18px -2px rgba(210,255,0,.55), inset 0 1.5px 0 rgba(255,255,255,.5); } .mab-item .mab-icon{ font-size:20px; line-height:1; margin-bottom:3px; } .mab-item-cta{ color:#000 !important; background: var(--brand-gradient) !important; margin:4px; border-radius:14px; box-shadow: 0 6px 18px -4px var(--accent-glow, rgba(210,255,0,.55)); } .mab-item-cta:hover{ filter:brightness(1.08); color:#000 !important; } /* Neon-lime glow on product card hover. */ .prod-card{ transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; position: relative; overflow: hidden; } .prod-card::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background: linear-gradient(135deg, transparent 30%, rgba(210,255,0,.12) 50%, transparent 70%); transition: opacity .35s ease, transform .6s ease; transform: translateX(-30%); } .prod-card:hover::before{ opacity:1; transform: translateX(30%); } .prod-card:hover{ transform: translateY(-4px); border-color: var(--accent, var(--accent-indigo)); box-shadow: 0 16px 36px -10px var(--accent-glow, rgba(210,255,0,.35)); } /* uaitool-style overlay: left column has Hot badge + eye, right has heart */ .prod-card-overlay{ position: absolute; inset: 8px 8px auto 8px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 3; } .prod-card-overlay > *{ pointer-events: auto; } .prod-card-overlay-left{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .prod-card-overlay .prod-badge{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; border-radius: 999px; background: #DC4646; color: #fff; font-family: 'Poppins','Inter',sans-serif; font-size: 11px; font-weight: 700; box-shadow: 0 4px 14px -2px rgba(220,70,70,.45); } .prod-card-overlay .prod-card-eye{ width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: rgba(255,255,255,.85); font-size: 14px; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .15s, transform .15s; } .prod-card-overlay .prod-card-eye:hover{ background: rgba(0,0,0,.75); transform: scale(1.06); } .prod-card-overlay .prod-card-fav{ width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s, transform .12s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0; } .prod-card-overlay .prod-card-fav:hover{ background: rgba(255,255,255,.12); color: #fff; transform: scale(1.06); } .prod-card-overlay .prod-card-fav.on{ color: #DC4646; border-color: rgba(220,70,70,.5); background: rgba(220,70,70,.12); } .prod-card-overlay .prod-card-fav.on svg{ fill: currentColor; } @media(max-width:720px){ .mab{ display:block; } body{ padding-bottom: 92px; } }