/* Park Buffet — brand layer on top of site.css (colours and fonts from the café's own logo and posts). */
:root {
  --color-bg: #F5F4EF;
  --color-surface: #FFFFFF;
  --color-surface-2: #ECEAE3;
  --color-line: #DCD8CE;
  --color-primary: #241B1C;
  --color-primary-strong: #120D0E;
  --gradient-gold: linear-gradient(180deg, #2FD83A 0%, #18A21F 55%, #0E7A16 100%);
  --color-text: #241B1C;
  --color-text-muted: #6E6363;
  --color-on-primary: #FFFFFF;
  --color-price-old: #C62828;
  --color-success: #18A21F;
  --font-display: 'Alegreya', Georgia, serif;
  --font-script: 'Alegreya', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --display-case: none;
  --display-spacing: 0;
  --script-size: 1.5rem;
  --shadow: 0 10px 30px rgba(36, 27, 28, .14);
}
.brand .logo { width: 72px; }
.footer-grid .logo { width: 120px; }
@media (max-width: 720px) { .brand .logo { width: 56px; } }
.display { letter-spacing: var(--display-spacing, .01em); text-transform: var(--display-case, uppercase); }
.script { font-size: var(--script-size, 1.8rem); }
.hero { background: radial-gradient(ellipse at 85% 25%, rgba(31, 239, 31, .10), transparent 50%), var(--color-bg); }
.promo-card { background: linear-gradient(135deg, #FFFFFF, #EEF6EC); }
.card, .cat-tile, .panel { border-color: var(--color-line); }
.card-media { background: radial-gradient(circle at 50% 40%, #FFFFFF, #ECEAE3 75%); }
.site-header { background: rgba(245, 244, 239, .95); }
.site-footer { background: #241B1C; color: #F5F4EF; }
.site-footer .muted { color: #BFB4B4; }
.hero-art img { box-shadow: var(--shadow), 0 0 0 1px var(--color-line); }
.choice input:checked + span { background: rgba(24, 162, 31, .08); }
.pill input:focus-visible + span, .choice input:focus-visible + span { outline-color: var(--color-primary); }
.ig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ig-grid a { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface-2); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ig-grid a:hover img { transform: scale(1.04); }
.poster { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: auto; }
.split-media { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.split-media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.brand-split { grid-template-columns: 1.15fr 1fr; }
.brand-split > div:first-child { grid-column: auto; }
.brand-split .poster { max-height: 620px; object-fit: cover; }
@media (max-width: 900px) { .brand-split { grid-template-columns: 1fr; } }
.brand-sub { white-space: nowrap; }
@media (max-width: 1240px) { .brand-sub { display: none; } }
.tagline { font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); font-size: .85rem; }
.script { color: #18A21F; font-style: italic; }
.brand .logo { border-radius: 6px; }
.site-footer h3, .site-footer a { color: #7CF27C; }
.site-footer .footer-bottom { border-color: rgba(255, 255, 255, .12); }
.cart-count { background: #18A21F; color: #fff; }
.badge { background: var(--color-text); color: #fff; }
.badge-new { background: #18A21F; }
.status-pill { background: var(--color-surface-2); }
.lang-switch a { color: var(--color-text-muted); }
.card-emoji { filter: none; }
.hero-title { line-height: 1.05; }
/* Green rule under section titles, like the line in the logo */
.section-title::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 10px; background: #1FEF1F; border-radius: 2px; }
.sauce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.sauce-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 16px; }
.sauce-card h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px; }
.sauce-card .small { margin: 0 0 10px; }