/* ─── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f7f7f7;
  --surface: #fafafa;
  --text: #1a1a18;
  --muted: #6b6b65;
  --accent: #202020;
  --border: #dddbd7;
  --hero-h: 517.5923px;
  --hero-w: 775.3533px;
  --container: 932px;
  --buffer: 34px;
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Jost', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
}

/* ─── PAGE WRAPPER ──────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ─── PLACEHOLDER IMAGES ────────────────────────────────── */
.img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', Arial, sans-serif;
  font-style: italic;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --container: 100%; }
  .product-layout, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .artist-grid { grid-template-columns: 1fr; }
  .hero-side { width: 120px; height: 240px; }
  .slider-btn.prev { left: 8px; }
  .slider-btn.next { right: 8px; }
}