/* Shopizaa — extra styles Tailwind utilities don't cover */

:root { color-scheme: light; }

html { scroll-behavior: smooth; }

body {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tighter, more confident display type */
.font-display { letter-spacing: -0.02em; }

/* ---- Labelled image placeholders (drop zones) ---- */
.ph {
  position: relative;
  background-color: oklch(0.955 0.004 270);
  background-image: repeating-linear-gradient(
    45deg,
    oklch(0.93 0.004 270) 0 1px,
    transparent 1px 11px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: oklch(0.58 0.01 270);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.ph::after {
  content: attr(data-label);
  padding: 3px 9px;
  border: 1px solid oklch(0.86 0.005 270);
  border-radius: 999px;
  background: oklch(0.985 0.004 95 / 0.7);
  backdrop-filter: blur(2px);
}
.ph[data-label=""]::after { content: none; }

/* Hide native scrollbar (carousels / chips rows) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Custom thin scrollbar for the page */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: oklch(0.85 0.006 270); border-radius: 999px; border: 3px solid oklch(0.985 0.004 95); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.78 0.008 270); }

/* Focus ring */
*:focus-visible { outline: 2px solid oklch(0.55 0.16 268); outline-offset: 2px; }

/* Link underline animation for footer / inline links */
.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s cubic-bezier(.2,.7,.3,1); }
.link-underline:hover { background-size: 100% 1px; }

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

/* Generic reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* Star rating via clip */
.stars { --pct: 100%; display: inline-block; position: relative; font-family: "Space Mono", monospace; color: oklch(0.88 0.01 270); white-space: nowrap; }
.stars::before { content: "★★★★★"; }
.stars > span { position: absolute; inset: 0; width: var(--pct); overflow: hidden; color: oklch(0.78 0.15 75); }
.stars > span::before { content: "★★★★★"; }

/* Quantity stepper buttons */
.qty-btn { user-select: none; }

/* Range input (price filter) */
input[type="range"]{ accent-color: oklch(0.55 0.16 268); }

/* Toast */
#toast { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .animate-marquee { animation: none !important; }
}