/* M&P Cafe — brand layer on top of site.css (colours and fonts from the café's own logo and posts). */
:root {
  --color-bg: #F4F1EC;
  --color-surface: #FFFFFF;
  --color-surface-2: #EAE5DD;
  --color-line: #DAD3C8;
  --color-primary: #1C1C1C;
  --color-primary-strong: #000000;
  --gradient-gold: linear-gradient(180deg, #4A4A4A 0%, #1C1C1C 60%, #000000 100%);
  --color-text: #1C1C1C;
  --color-text-muted: #6A645D;
  --color-on-primary: #FFFFFF;
  --color-price-old: #B3261E;
  --color-success: #2E7D32;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-script: 'Marck Script', cursive;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --display-case: uppercase;
  --display-spacing: .02em;
  --script-size: 2.2rem;
  --shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.brand .logo { width: 62px; }
.footer-grid .logo { width: 110px; }
@media (max-width: 720px) { .brand .logo { width: 50px; } }
.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(circle at 85% 20%, rgba(0, 0, 0, .06), transparent 45%), var(--color-bg); }
.promo-card { background: linear-gradient(135deg, #FFFFFF, #EFEAE2); }
.card, .cat-tile, .panel { border-color: var(--color-line); }
.card-media { background: radial-gradient(circle at 50% 40%, #FFFFFF, #EAE5DD 75%); }
.site-header { background: rgba(244, 241, 236, .95); }
.site-footer { background: #161616; color: #F4F1EC; }
.site-footer .muted { color: #B9B2A8; }
.hero-art img { box-shadow: var(--shadow), 0 0 0 1px var(--color-line); }
.choice input:checked + span { background: rgba(0, 0, 0, .05); }
.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; }
/* The logo's double ring, drawn behind the hero */
.hero { position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  width: 560px; height: 560px; right: -160px; top: -200px; border: 2px solid rgba(0, 0, 0, .08); }
.hero::after { width: 530px; height: 530px; right: -145px; top: -185px; border-width: 1px; }
.hero .container { position: relative; z-index: 1; }
.script { color: var(--color-text); }
.site-footer h3, .site-footer a { color: #FFFFFF; }
.site-footer .footer-bottom { border-color: rgba(255, 255, 255, .12); }
.site-footer .logo { filter: invert(1); }
.cart-count { background: var(--color-text); color: #fff; }
.badge { background: var(--color-text); color: #fff; }
.status-pill { background: var(--color-surface-2); }
.lang-switch a { color: var(--color-text-muted); }
.card-emoji { filter: none; }