/* Old Town Wine & Spirits — Signature differentiator: "This Week's Staff Picks"  (Kai)
   Self-contained, mounted into <section id="signature">. Every rule scoped under #signature.
   An honest neighborhood bottle-shop shelf: tap a pick to read the staff's note on why they love
   it. Utilitarian, friendly, unpretentious (NO luxury-wine gloss). Scarlet + white. CSS-only tiles,
   no image dependency. Local palette scoped to #signature. */

#signature{
  --ws-scarlet:#CC2A22; --ws-white:#FFFFFF; --ws-tan:#C9A96A; --ws-charcoal:#1F1D1B;
  --ws-paper:#FAF7F2; --ws-ink:#211C1A;
}

#signature .sp{
  max-width:72rem; margin-inline:auto; padding:clamp(1.5rem, 4vw, 2.6rem);
  border-radius:12px; color:var(--ws-ink); background:var(--ws-white);
  box-shadow:0 10px 30px rgba(31,29,27,.12), inset 0 0 0 1px rgba(31,29,27,.06);
}
#signature .sp__eyebrow{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ws-white); background:var(--ws-scarlet); padding:.28rem .7rem; border-radius:4px; margin:0 0 .7rem;
}
#signature .sp__title{
  margin:0 0 .3rem; font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); color:var(--ws-charcoal);
}
#signature .sp__sub{ margin:0 0 1.4rem; max-width:34rem; color:#5a5450; font-size:.98rem; }

#signature .sp__shelf{ display:grid; grid-template-columns:1fr; gap:.8rem; }
#signature .sp__pick{
  position:relative; text-align:left; cursor:pointer; border:1px solid rgba(31,29,27,.12);
  border-radius:10px; background:var(--ws-paper); color:var(--ws-ink); overflow:hidden;
  padding:0; transition:border-color .2s ease, box-shadow .2s ease;
}
#signature .sp__pick-head{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; }
#signature .sp__cat{
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ws-white); background:var(--ws-charcoal); padding:.24rem .5rem; border-radius:999px; flex:0 0 auto;
}
#signature .sp__pick-name{ font-weight:800; font-size:1.05rem; }
#signature .sp__plus{ margin-inline-start:auto; color:var(--ws-scarlet); font-size:1.3rem; line-height:1; transition:transform .25s ease; }
#signature .sp__note{
  overflow:hidden; max-height:0; opacity:0;
  padding:0 1rem; border-top:0 solid var(--ws-scarlet);
  transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
  color:#4a4542; font-size:.95rem; line-height:1.5;
}
#signature .sp__note em{ color:var(--ws-scarlet); font-style:normal; font-weight:700; }
#signature .sp__pick.is-open{ border-color:var(--ws-scarlet); box-shadow:0 6px 18px rgba(204,42,34,.14); }
#signature .sp__pick.is-open .sp__note{ max-height:10rem; opacity:1; padding:.2rem 1rem 1rem; border-top:2px solid rgba(204,42,34,.25); }
#signature .sp__pick.is-open .sp__plus{ transform:rotate(45deg); }
#signature .sp__pick:hover, #signature .sp__pick:focus-visible{ border-color:var(--ws-scarlet); outline:2px solid var(--ws-scarlet); outline-offset:2px; }

@media (min-width:680px){ #signature .sp__shelf{ grid-template-columns:1fr 1fr; } }

@media (prefers-reduced-motion:reduce){
  #signature .sp__note, #signature .sp__plus{ transition:none; }
}