/* ===== THEME: change --primary here (or live in Admin > Settings) ===== */
/* Product display: white photo backgrounds melt away via multiply blend */
.product-stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #fff 0%, #f4efe6 70%, #ece5d8 100%); }
.product-stage::after { content: ''; position: absolute; bottom: 14%; left: 20%; right: 20%; height: 8%;
  background: radial-gradient(ellipse, rgba(0,0,0,.18), transparent 70%); filter: blur(6px); pointer-events: none; }
.product-img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; position: relative; z-index: 1;
  filter: contrast(1.04) saturate(1.05); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover .product-img, .product-stage:hover .product-img { transform: scale(1.06) rotate(-1.5deg); }
:root { --primary: #e4572e; --ink: #1c1a17; --paper: #faf6ef; }
body { font-family: 'Bricolage Grotesque', sans-serif; background: var(--paper); color: var(--ink); }
.mono { font-family: 'JetBrains Mono', monospace; }
.bg-primary { background: var(--primary); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }
.btn { background: var(--ink); color: var(--paper); padding: .6rem 1.1rem; border-radius: .75rem; font-weight: 600; transition: transform .15s, background .15s; }
.btn:hover { background: var(--primary); transform: translateY(-1px); }
.btn-ghost { border: 1.5px solid var(--ink); padding: .55rem 1rem; border-radius: .75rem; font-weight: 600; transition: all .15s; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.card { background: #fff; border: 1.5px solid #e8e1d4; border-radius: 1rem; transition: transform .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--ink); }
.input { width: 100%; border: 1.5px solid #d9d0c0; border-radius: .6rem; padding: .55rem .8rem; background: #fff; outline: none; }
.input:focus { border-color: var(--primary); }
.hero-bg { background:
  radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 45%),
  repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,0,0,.03) 22px 23px), var(--paper); }
.rise { animation: rise .6s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.toast { animation: rise .3s both; }