/* OMNIO — everything-store styles. Dense, utilitarian, trustworthy. */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body {
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: oklch(0.97 0.006 320);
}

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

.ph {
  position: relative; background-color: oklch(0.945 0.008 322);
  background-image: repeating-linear-gradient(45deg, oklch(0.915 0.01 322) 0 1px, transparent 1px 12px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color: oklch(0.60 0.03 322); font-size:11px;
}

.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.015 322); border:3px solid oklch(0.97 0.006 320); border-radius:999px; }

*:focus-visible { outline: 2px solid oklch(0.66 0.19 8); outline-offset: 1px; }

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

/* classic e-com link */
.link { color: oklch(0.48 0.16 320); }
.link:hover { color: oklch(0.58 0.20 358); text-decoration: underline; }

/* star rating */
.stars { display:inline-block; position:relative; font-family:"Public Sans",sans-serif; color: oklch(0.86 0.012 322); 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.78 0.15 75); }
.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; }

/* big price with superscript cents look */
.price-lg { font-weight: 800; letter-spacing: -0.01em; }
.price-lg .cents, .price-lg .cur { font-size: 0.62em; vertical-align: top; font-weight: 700; }

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

/* shared inputs */
.o-input { width:100%; height:46px; padding:0 12px; background:#fff; border:1px solid oklch(0.80 0.03 322); color: oklch(0.25 0.025 320); font-size:15px; border-radius:8px; transition:border-color .15s, box-shadow .15s; }
.o-input::placeholder { color: oklch(0.66 0.02 320); }
.o-input:focus { outline:none; border-color: oklch(0.66 0.19 8); box-shadow:0 0 0 3px oklch(0.66 0.19 8 / 0.25); }
.o-input.invalid { border-color: oklch(0.56 0.21 18); }
.o-err { color: oklch(0.56 0.21 18); font-size:13px; margin-top:5px; }
textarea.o-input { height:auto; padding:11px 12px; min-height:140px; resize:vertical; }

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