/* ZUNO — clean marketplace styles. Bright, rounded, friendly. */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body {
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: oklch(0.975 0.005 220);
}

/* content always visible; data-reveal inert */

.ph {
  position: relative; background-color: oklch(0.93 0.008 220);
  background-image: repeating-linear-gradient(45deg, oklch(0.90 0.008 220) 0 1px, transparent 1px 12px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color: oklch(0.6 0.02 230); font-size:11px; letter-spacing:.04em;
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: oklch(0.85 0.01 220); border:3px solid oklch(0.975 0.005 220); border-radius:999px; }

*:focus-visible { outline: 2px solid oklch(0.62 0.13 200); outline-offset: 2px; }

.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }

.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* star rating */
.stars { display:inline-block; position:relative; font-family:"Figtree",sans-serif; color: oklch(0.87 0.01 220); white-space:nowrap; letter-spacing:.5px; }
.stars::before { content:"\2605\2605\2605\2605\2605"; }
.stars > span { position:absolute; inset:0; width:var(--pct,100%); overflow:hidden; color: oklch(0.80 0.16 78); }
.stars > span::before { content:"\2605\2605\2605\2605\2605"; }

@keyframes badgepop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.badge-pop { animation: badgepop .35s ease; }

/* hero carousel */
.zc-track { display:flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.zc-slide { flex: 0 0 100%; }
.zc-dot { width:8px; height:8px; border-radius:999px; background: oklch(0.85 0.01 220); transition: all .3s; }
.zc-dot.active { width:26px; background:#fff; }

input[type="range"]{ accent-color: oklch(0.62 0.13 200); }
#toast { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }

/* shared inputs */
.z-input { width:100%; height:50px; padding:0 16px; background:#fff; border:1px solid oklch(0.915 0.008 230); color: oklch(0.26 0.02 235); font-size:15px; border-radius:12px; transition:border-color .15s, box-shadow .15s; }
.z-input::placeholder { color: oklch(0.68 0.016 235); }
.z-input:focus { outline:none; border-color: oklch(0.62 0.13 200); box-shadow:0 0 0 3px oklch(0.62 0.13 200 / 0.13); }
.z-input.invalid { border-color: oklch(0.66 0.18 30); }
.z-err { color: oklch(0.62 0.19 28); font-size:13px; margin-top:5px; }
textarea.z-input { height:auto; padding:13px 16px; min-height:140px; resize:vertical; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-marquee { animation: none !important; }
  .zc-track { transition: none !important; }
}