/* Old Town Sweet Shop — Signature differentiator: "Flavor Wall"  (Kai)
   Self-contained module, mounted by signature.js into Cass's empty <section id="signature">.
   EVERY rule is scoped under #signature (no global bleed). Local palette vars (captured, from
   the design) live on #signature so nothing leaks. No image dependency — pure CSS candy jars.
   Warm-wood frame stays constant while the jars carry the real bulk-bin candy brights. */

#signature{
  --fw-wood-deep:#402B17; --fw-wood:#A45E36; --fw-wood-tan:#A27E58; --fw-cream:#DFB382;
  --fw-paper:#FFFDF8; --fw-ink:#2E2016;
  --fw-pink:#E86A9A; --fw-blue:#4FB6D8; --fw-orange:#F09A3C; --fw-green:#8FC66A;
}

#signature .fw{
  max-width:74rem; margin-inline:auto;
  padding:clamp(1.5rem, 4vw, 2.6rem);
  border-radius:16px;
  background:
    repeating-linear-gradient(90deg, rgba(64,43,23,.04) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--fw-wood) 0%, var(--fw-wood-deep) 100%);
  color:var(--fw-paper);
  box-shadow:inset 0 0 0 6px rgba(255,253,248,.06), 0 14px 40px rgba(64,43,23,.28);
}
#signature .fw__eyebrow{
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fw-cream); margin:0 0 .5rem;
}
#signature .fw__title{
  margin:0 0 .3rem; line-height:1.02; color:var(--fw-paper);
  font-family:Georgia, "Times New Roman", serif; font-weight:800;
  font-size:clamp(1.7rem, 1.2rem + 2.4vw, 2.9rem);
}
#signature .fw__sub{ margin:0 0 1.3rem; max-width:34rem; color:rgba(255,253,248,.85); font-size:.98rem; }

/* the "now scooping" stage */
#signature .fw__stage{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.9rem 1.1rem; margin-bottom:1.2rem; min-height:3.4rem;
  background:rgba(255,253,248,.10); border:1px solid rgba(255,253,248,.14); border-radius:12px;
}
#signature .fw__scoop{
  width:2.2rem; height:2.2rem; border-radius:50%; flex:0 0 auto;
  background:var(--fw-cream); box-shadow:inset 0 -3px 6px rgba(64,43,23,.25);
  transition:background .3s ease;
}
#signature .fw__stage-name{ font-weight:800; font-size:1.15rem; color:var(--fw-paper); }
#signature .fw__stage-cat{
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:999px; background:rgba(255,253,248,.16); color:var(--fw-cream);
}

/* jar grid */
#signature .fw__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:.7rem;
}
#signature .fw__jar{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.4rem; padding:.7rem .5rem .6rem; min-height:6.2rem; cursor:pointer;
  border:0; border-radius:10px 10px 8px 8px; color:var(--fw-ink);
  background:var(--jar, var(--fw-cream));
  box-shadow:inset 0 4px 0 rgba(255,255,255,.35), inset 0 -6px 10px rgba(64,43,23,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#signature .fw__jar::before{  /* jar lid */
  content:""; position:absolute; top:-5px; left:18%; right:18%; height:8px; border-radius:5px;
  background:var(--fw-wood-tan); box-shadow:0 2px 4px rgba(64,43,23,.3);
}
#signature .fw__jar-label{
  font-weight:800; font-size:.86rem; line-height:1.15; text-align:center;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
}
#signature .fw__jar:hover, #signature .fw__jar:focus-visible{
  transform:translateY(-4px); filter:saturate(1.08);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.4), 0 10px 20px rgba(64,43,23,.32);
  outline:3px solid var(--fw-paper); outline-offset:2px;
}
#signature .fw__jar:hover .fw__jar-label,
#signature .fw__jar:focus-visible .fw__jar-label,
#signature .fw__jar.is-active .fw__jar-label{ opacity:1; transform:none; }
#signature .fw__jar.is-active{ box-shadow:inset 0 4px 0 rgba(255,255,255,.4), 0 0 0 3px var(--fw-paper); }

#signature .fw__note{ margin:1.1rem 0 0; font-size:.8rem; color:rgba(255,253,248,.7); }

/* >=560px: wider grid */
@media (min-width:560px){ #signature .fw__grid{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:900px){ #signature .fw__grid{ grid-template-columns:repeat(6, 1fr); } }

@media (prefers-reduced-motion:reduce){
  #signature .fw__jar, #signature .fw__jar-label, #signature .fw__scoop{ transition:none; }
  #signature .fw__jar:hover, #signature .fw__jar:focus-visible{ transform:none; }
}