/* Concept H — Flavor list. Shares flavor.css (hero, badges, pills, Ohana). Only list additions here. */
@import url("flavor.css");
.l-hero .wrap{grid-template-columns:1fr;padding-bottom:48px}
.l-hero h1 .l2{color:var(--coral)}
.l-list{padding:48px 0 70px}
.l-pills{display:flex;flex-wrap:wrap;gap:10px}
.l-pill{cursor:pointer;font-family:inherit}
.l-count{margin:18px 0 22px;font-weight:700;color:#5b4a3a}
.l-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.l-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s}
.l-card:hover,.l-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.l-card[hidden]{display:none}
.l-img{position:relative;aspect-ratio:4/5;background:#FFF4DC}
.l-img img{width:100%;height:100%;object-fit:cover}
.l-slot{height:100%}
.l-st{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;
  font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.l-st-in{color:#1E7A3C}.l-st-week{color:var(--coral-deep)}.l-st-out{color:#5f5f5f}
.l-body{padding:16px 18px 20px}
.l-body h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.7rem;line-height:1;color:var(--teal)}
.l-body p{margin-top:6px;font-size:.95rem;color:#5b4a3a}
.l-aw{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
.l-yr{color:#5b4a3a;font-weight:600}
.l-aw li{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #F5C518;border-radius:999px;padding:4px 12px 4px 4px;font-size:.8125rem}
.l-aw .f-medal{width:24px;height:24px;font-size:.8125rem}
.l-empty{padding:30px 0;font-weight:600;color:#5b4a3a}
@media (max-width:1100px){.l-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .l-hero .wrap{padding-bottom:30px}
  .l-list{padding:28px 0 48px}
  .l-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin:0 -24px;padding-left:24px;padding-right:24px;scrollbar-width:none}
  .l-pill{flex:none}
  .l-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .l-body{padding:12px 12px 16px}
  .l-body h3{font-size:1.35rem}
  .l-st{left:8px;top:8px;padding:5px 9px}
}