/* VERSO — modern bookstore styles. Crisp, editorial. */
:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { font-family:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; background: oklch(0.985 0.002 250); }
.font-display,.font-serif { letter-spacing:-0.01em; }
.eyebrow { text-transform:uppercase; letter-spacing:0.2em; font-size:11px; font-weight:700; }

.ph { position:relative; background-color: oklch(0.93 0.006 265); background-image: repeating-linear-gradient(45deg, oklch(0.90 0.006 265) 0 1px, transparent 1px 12px); display:flex; align-items:center; justify-content:center; overflow:hidden; color: oklch(0.55 0.012 265); 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.008 265); border:3px solid oklch(0.985 0.002 250); border-radius:999px; }

*:focus-visible { outline:2px solid oklch(0.52 0.21 264); 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; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s cubic-bezier(.2,.7,.3,1); }
.link-underline:hover { background-size: 100% 1.5px; }

/* book cover with spine + shadow */
.book-cover { position:relative; box-shadow: -10px 12px 30px -12px oklch(0.20 0.015 265 / 0.5); }
.book-cover::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8%; background:linear-gradient(90deg, rgba(0,0,0,0.22), rgba(0,0,0,0) 60%); z-index:2; }

.stars { display:inline-block; position:relative; font-family:"Hanken Grotesk",sans-serif; color: oklch(0.88 0.008 265); 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.74 0.12 80); }
.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; }

.size-chip { display:grid; place-items:center; min-height:46px; padding:0 16px; border:1px solid oklch(0.88 0.008 265); border-radius:10px; font-weight:600; font-size:13px; cursor:pointer; transition:all .15s; }
.size-chip:hover { border-color: oklch(0.52 0.21 264); }
.size-chip.is-on { background: oklch(0.52 0.21 264); color:#fff; border-color: oklch(0.52 0.21 264); }
.size-chip.is-out { color: oklch(0.78 0.008 265); text-decoration:line-through; cursor:not-allowed; background: oklch(0.96 0.004 250); }
.size-chip.is-out:hover { border-color: oklch(0.88 0.008 265); }

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

.v-input,.ck-input,.ct-input,.ord-input { width:100%; height:50px; padding:0 16px; background:#fff; border:1px solid oklch(0.88 0.008 265); color: oklch(0.20 0.015 265); font-size:15px; border-radius:10px; transition:border-color .15s, box-shadow .15s; }
.v-input::placeholder,.ck-input::placeholder,.ct-input::placeholder,.ord-input::placeholder { color: oklch(0.62 0.012 265); }
.v-input:focus,.ck-input:focus,.ct-input:focus,.ord-input:focus { outline:none; border-color: oklch(0.52 0.21 264); box-shadow:0 0 0 3px oklch(0.52 0.21 264 / 0.14); }
.v-input.invalid,.ck-input.invalid,.ct-input.invalid,.ord-input.invalid { border-color: oklch(0.55 0.20 18); }
.v-err,.ck-err,.ct-err,.ord-err { color: oklch(0.55 0.20 18); font-size:13px; margin-top:5px; }
textarea.v-input,textarea.ct-input { height:auto; padding:13px 16px; min-height:150px; resize:vertical; }
option { color:#161a26; background:#fff; }

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