:root { --ink: #160f0d; --orange: #ad2525; --cream: #f6f0df; --yellow: #d4aa32; --line: #d6c9ae; --muted: #665e51; }

body { background: var(--cream); }
.app-shell { background: var(--cream); }
.topbar { height: 88px; background: rgba(246, 240, 223, .96); border-color: var(--ink); }
.brand { font-family: Georgia, serif; font-size: 23px; text-transform: uppercase; letter-spacing: -1.5px; }
.brand-mark { width: 46px; height: 46px; background: var(--orange); border-radius: 2px; font-family: Manrope, sans-serif; }
.brand-mark span { color: var(--yellow); }
.text-button { font-family: "DM Mono", monospace; text-transform: uppercase; font-size: 11px; letter-spacing: .6px; }
.cart-button { border-color: var(--ink); border-radius: 2px; text-transform: uppercase; font-family: "DM Mono", monospace; }
.cart-button b { border-radius: 1px; background: var(--orange); }
.cart-button { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--yellow); padding: 12px 12px 12px 18px; box-shadow: 4px 4px 0 var(--ink); }
.cart-button:hover { background: var(--cream); }

.hero { min-height: 560px; border-color: var(--ink); }
.hero-copy { background: var(--orange); color: var(--cream); padding-top: clamp(78px, 11vw, 142px); }
.hero-copy .eyebrow { color: var(--yellow); }
.hero-copy h1 { font-family: Georgia, "Playfair Display", serif; letter-spacing: -4px; }
.hero-copy .intro { color: #f4dfc6; max-width: 360px; }
.hero-usp { margin: -9px 0 28px; color: var(--yellow); font: 700 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .7px; }
.menu-mode-switcher { display: flex; width: fit-content; margin: 20px 0 0; border: 1px solid var(--ink); }
.menu-mode-switcher button { border: 0; border-right: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 10px 13px; font: 700 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .25px; }
.menu-mode-switcher button:last-child { border-right: 0; }
.menu-mode-switcher button.active { background: var(--yellow); color: var(--ink); }
.primary-button { background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 0; text-transform: uppercase; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .45px; }
.hero-art { background: var(--ink); }
.orange-sun { background: var(--orange); width: 460px; height: 460px; bottom: -160px; left: -80px; }
.hero-plate { background: var(--cream); border-radius: 0; width: 280px; height: 330px; right: 15%; top: 18%; box-shadow: 14px 14px 0 var(--yellow); transform: rotate(4deg); }
.hero-plate::before { content: ""; position: absolute; inset: 14px; border: 2px solid var(--orange); }
.hero-plate span { position: relative; z-index: 1; color: var(--orange); font: 800 48px/.75 Georgia, serif; letter-spacing: -4px; filter: none; text-align: center; }
.hero-plate i { color: var(--ink); font-style: normal; }
.scribble { color: var(--cream); font-size: 29px; z-index: 4; }
.star { color: var(--yellow); }
.service-strip { background: var(--ink); color: var(--cream); padding-top: 19px; padding-bottom: 19px; }
.service-strip i { background: var(--yellow); }
.usp-strip { justify-content: center; text-transform: uppercase; letter-spacing: .8px; color: var(--yellow); }

.menu-section { background: var(--cream); }
.section-heading h2 { font-family: Georgia, "Playfair Display", serif; letter-spacing: -3px; }
.eyebrow, .product-category { color: var(--orange); font-weight: 700; }
.category-tabs button { border-radius: 0; border-color: var(--ink); font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; }
.category-tabs button.active { background: var(--orange); border-color: var(--orange); }
.product-grid { gap: 17px; }
.product-card { background: #fbf8ef; border-color: var(--ink); }
.product-visual { height: 150px; background: var(--ink); color: var(--cream); font-size: inherit; align-items: end; padding: 16px; }
.product-visual::after { width: 145%; height: 220%; border-color: rgba(212, 170, 50, .7); transform: rotate(-30deg); }
.product-mark { position: relative; z-index: 1; font: 800 27px/.9 Georgia, serif; letter-spacing: -1.3px; max-width: 180px; }
.product-body { padding: 19px; }
.product-title { font-family: Georgia, "Playfair Display", serif; font-size: 20px; letter-spacing: -1px; }
.product-description { height: auto; min-height: 38px; color: var(--muted); }
.price { color: var(--orange); font-family: "DM Mono", monospace; }
.add-button { border-radius: 0; background: var(--orange); color: var(--cream); border-color: var(--orange); }
.add-button:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* A single, easy-to-scan menu list. */
.product-grid { display: block; border: 1px solid var(--ink); background: #fbf8ef; }
.product-card { display: block; min-height: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.product-card:last-child { border-bottom: 0; }
.product-visual { display: none; }
.product-visual.has-image { display: block; height: 140px; padding: 0; }
.product-visual.has-image::after { display: none; }
.product-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 20px; padding: 15px 18px; }
.product-category { grid-column: 1; font-size: 10px; }
.product-title { grid-column: 1; margin: 0; font-size: 18px; }
.product-description { display: none; }
.product-bottom { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 13px; }
.product-bottom .price { white-space: nowrap; }

.order-type-dialog { background: var(--orange); box-shadow: 12px 12px 0 var(--ink); color: var(--cream); }
.order-type-content .eyebrow { color: var(--yellow); }
.order-type-content h1 { font-family: Georgia, "Playfair Display", serif; }
.order-type-intro { color: #f4dfc6; }
.order-type-option { background: var(--cream); border: 0; color: var(--ink); }
.order-type-option:hover { background: var(--yellow); }
.order-type-icon { filter: grayscale(1); }

@media (max-width: 760px) {
  .topbar { height: 70px; }
  .cart-button { bottom: 16px; }
  .brand { font-size: 17px; }
  .brand-mark { width: 37px; height: 37px; }
  .hero-copy { min-height: 410px; }
  .hero-art { min-height: 285px; }
  .hero-plate { width: 190px; height: 220px; right: 18%; top: 17%; }
  .hero-plate span { font-size: 35px; }
  .product-visual { height: 116px; padding: 12px; }
  .product-mark { font-size: 20px; }
  .product-body { padding: 12px; gap: 3px 9px; }
  .product-title { font-size: 15px; }
  .product-description { display: none; }
}