/* =====================================================================
   genz.css — ACCENT layer only.
   Previously primary; demoted on 2026-06-02 per user feedback. The site
   leads with pavsarts + Tanjore. This file adds quiet personality:
   tilt physics on cards, badge styles for menu items, a touch of meme
   microcopy styling. Loaded LAST among visual layers so it can override
   only where personality is wanted — not where painting is wanted.
   ===================================================================== */

/* ---------- Subtle gold-accent shadows (replaces hard sticker shadows) ---------- */
.shadow-card     { box-shadow: 0 0 0 1px var(--tj-kanaka-dk); }
.shadow-btn      { box-shadow: 2px 2px 0 var(--tj-rakta); }
.shadow-btn-lg   { box-shadow: 3px 3px 0 var(--tj-rakta); }
.shadow-badge    { box-shadow: 1px 1px 0 var(--tj-vyaktitva); }

/* ---------- Badges — restyled as illuminated manuscript markers ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.85em;
  border: 1px solid var(--tj-kanaka);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(226,183,60,0.18), rgba(0,0,0,0)),
    var(--cc-surface);
  color: var(--tj-kanaka);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 1px 1px 0 var(--tj-vyaktitva);
  transform: none;       /* No more rotation — Tanjore is composed */
  position: relative;
}
.badge::before, .badge::after {
  content: '';
  width: 4px; height: 4px;
  background: var(--tj-kanaka);
  border-radius: 50%;
  opacity: 0.7;
}

.badge--bestseller { color: var(--tj-kanaka);    border-color: var(--tj-kanaka);    background: linear-gradient(180deg, rgba(226,183,60,0.22), var(--cc-surface)); }
.badge--new        { color: var(--tj-marakatha); border-color: var(--tj-marakatha); background: linear-gradient(180deg, rgba(45,122,79,0.20),  var(--cc-surface)); }
.badge--new::before, .badge--new::after { background: var(--tj-marakatha); }
.badge--chef       { color: #B9A8F5;             border-color: #6E5BC4;             background: linear-gradient(180deg, rgba(123,92,246,0.18), var(--cc-surface)); }
.badge--chef::before, .badge--chef::after { background: #B9A8F5; }
.badge--seasonal   { color: var(--tj-sindoor);   border-color: var(--tj-sindoor);   background: linear-gradient(180deg, rgba(200,16,46,0.22), var(--cc-surface)); }
.badge--seasonal::before, .badge--seasonal::after { background: var(--tj-sindoor); }
.badge--mirchi     { color: #F8C8B0;             border-color: var(--tj-sindoor);   background: linear-gradient(180deg, rgba(200,16,46,0.30), var(--cc-surface)); }
.badge--mirchi::before, .badge--mirchi::after { background: var(--tj-sindoor); }
.badge--soldout    { color: var(--cc-text-faint); border-color: var(--cc-text-faint); background: var(--cc-surface); }
.badge--soldout::before, .badge--soldout::after { background: var(--cc-text-faint); }

/* Star badge — quieter, gold-leaf */
.star-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tj-kanaka);
}
.star-badge::before, .star-badge::after {
  content: '';
  width: 24px; height: 1px;
  background: var(--tj-kanaka);
  opacity: 0.7;
}

/* ---------- Card tilt physics — kept, but softened ---------- */
.tilt {
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s var(--ease-spring);
}
.tilt:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 40px rgba(226,183,60,0.10),
    0 0 0 1px var(--tj-kanaka);
}
/* No rotation on hover — Tanjore is composed, not jaunty */

/* Buttons keep a touch of haptic feel */
.btn-tilt {
  transition: transform 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-spring);
}
.btn-tilt:hover  { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tj-rakta); }
.btn-tilt:active { transform: translate(1px, 1px);   box-shadow: 1px 1px 0 var(--tj-rakta); }

/* ---------- Scribble underline — kept softer & gold ---------- */
.scribble-wrap {
  position: relative;
  display: inline-block;
}
.scribble-wrap > svg.scribble {
  position: absolute;
  left: -2%;
  right: -2%;
  width: 104%;
  bottom: -0.3em;
  height: 0.45em;
  overflow: visible;
  pointer-events: none;
}
.scribble path {
  stroke: var(--tj-kanaka);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  opacity: 0.85;
}

/* ---------- Brushstroke under hero headline ---------- */
.brushstroke {
  display: block;
  margin: 0.6rem auto 0;
  width: clamp(180px, 30vw, 380px);
  height: 12px;
  overflow: visible;
}
.brushstroke path {
  stroke: var(--tj-kanaka);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}

/* ---------- Sticker wrapper — kept for one or two playful moments only ---------- */
.sticker {
  display: inline-block;
  padding: 0.6em 1em;
  background:
    linear-gradient(180deg, rgba(226,183,60,0.22), rgba(0,0,0,0.20)),
    var(--tj-rakta);
  border: 1px solid var(--tj-kanaka);
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tj-chandan);
  transform: none;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  font-size: 0.75rem;
}

/* ---------- Meme microcopy (used sparingly now) ---------- */
.meme {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--cc-text-muted);
  letter-spacing: 0.01em;
  opacity: 0.85;
}