/* Grace — compact cards with equal photos and honest brand placeholders. */
.catalog { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.dish-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 3px 17px rgba(42,34,20,.025); transition:transform .22s,box-shadow .22s,border-color .22s; }
.dish-card.card-enter { animation:cardIn .6s cubic-bezier(.22,1,.36,1) backwards; animation-delay:var(--card-delay,0ms); }
.dish-card:active { transform:scale(.98); }
.dish-open,.compact .dish-open { display:flex; flex:1; flex-direction:column; width:100%; height:auto; min-height:0; padding:0; border:0; background:transparent; text-align:left; }
.dish-open:focus-visible { outline-offset:-4px; border-radius:17px; }
.card-media { position:relative; flex:0 0 auto; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:16px; background:var(--soft); }
.card-media::after { content:''; position:absolute; z-index:1; inset:0; background:radial-gradient(ellipse at center,transparent 48%,rgba(25,20,10,.07)),linear-gradient(to bottom,transparent 55%,rgba(25,20,10,.1)); pointer-events:none; }
.food-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.food-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; height:100%; background:radial-gradient(ellipse at 35% 20%,rgba(255,255,255,.22),transparent 75%),linear-gradient(135deg,var(--placeholder-start),var(--placeholder-end)); color:var(--placeholder-ink); }
.placeholder-diamond { position:relative; width:26px; height:26px; border:1px solid currentColor; transform:rotate(45deg); opacity:.65; font-size:0; }
.placeholder-diamond::before { content:''; position:absolute; inset:5px; border:1px solid currentColor; opacity:.35; }
.placeholder-wordmark { padding-left:4px; font:500 17px/1 var(--serif); letter-spacing:4px; opacity:.7; }
.placeholder-wordmark { max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.editorial-badge { position:absolute; z-index:2; top:11px; left:11px; padding:6px 10px; border:1px solid rgba(197,168,128,.22); border-radius:999px; background:var(--glass); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); color:var(--ink); font:500 9px/1.2 var(--sans); letter-spacing:1.5px; text-transform:uppercase; }
.editorial-badge { pointer-events:none; }
.badge-hit,.badge-chef { background:rgba(211,184,142,.94); border-color:rgba(236,214,182,.65); color:#282115; }
.badge-new { background:rgba(251,248,242,.93); color:#51412a; }
.badge-spicy { background:rgba(96,47,36,.92); border-color:rgba(199,145,112,.45); color:#fff0df; }
.badge-raw { background:rgba(29,47,43,.92); border-color:rgba(176,198,171,.35); color:#edf1df; }
.card-text,.compact .card-text { flex:1; padding:15px 15px 7px; }
.card-category,.compact .card-category { display:block; margin-bottom:7px; color:var(--muted); font-size:7px; font-weight:500; line-height:1.5; letter-spacing:1.3px; text-transform:uppercase; overflow-wrap:anywhere; }
.dish-name,.compact .dish-name { display:-webkit-box; max-width:100%; min-height:4.5em; margin:0; padding:0; overflow:hidden; font:500 14px/1.5 var(--sans); letter-spacing:-.13px; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; }
.portion { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.card-description { display:-webkit-box; min-height:3.1em; margin:8px 0 0; overflow:hidden; color:var(--muted); font-size:10px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; }
.card-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; min-height:62px; margin-top:auto; padding:4px 9px 10px 15px; }
.dish-price,.compact .dish-price { position:static; flex:0 1 auto; min-width:0; color:var(--ink); font:500 26px/1.1 var(--serif); white-space:nowrap; pointer-events:none; }
.add-dish { position:static; display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid rgba(197,168,128,.2); border-radius:50%; background:var(--ink); color:var(--cream); font:400 24px/1 var(--sans); transition:transform .2s,background .2s; }
.add-dish:active { transform:scale(.9); }
.add-dish.is-added { background:#a88c63; color:#fffaf0; transform:scale(.94); }
.dark .add-dish.is-added { background:#d7bc92; color:#171612; }
.status-badge,.compact .status-badge { position:static; max-width:100%; margin:0; padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:var(--soft); color:var(--muted); font-size:8px; line-height:1.3; white-space:nowrap; }
.card-media>.status-badge { position:absolute; z-index:2; top:10px; left:10px; background:var(--glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.unavailable .food-image { filter:grayscale(.35); opacity:.75; }
.unavailable .food-placeholder { opacity:.8; }
.dark .dish-card { box-shadow:0 4px 19px rgba(0,0,0,.08); }
.dark .add-dish { background:var(--champagne); color:#171612; }

/* The same compact structure appears before JavaScript or the menu API. */
.skeleton-card { pointer-events:none; user-select:none; }
.skeleton-block { position:relative; display:block; overflow:hidden; border-radius:5px; background:rgba(197,168,128,.17); }
.skeleton-block::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,253,249,.55),transparent); animation:skeletonShimmer 1.9s ease-in-out infinite; }
.skeleton-media { width:100%; height:100%; border-radius:0; background:rgba(197,168,128,.11); }
.skeleton-kicker { width:45%; height:7px; margin:1px 0 10px; }
.skeleton-name { display:flex; flex-direction:column; gap:8px; min-height:63px; padding-top:4px; }
.skeleton-line { width:94%; height:9px; }
.skeleton-line:nth-child(2) { width:76%; }
.skeleton-line:nth-child(3) { width:48%; }
.skeleton-detail { width:33%; height:8px; margin:8px 0 7px; }
.skeleton-price { width:57px; height:18px; border-radius:4px; }
.skeleton-add { width:44px; height:44px; flex:0 0 44px; border-radius:50%; background:rgba(197,168,128,.2); }
.category-skeleton { width:94px; height:44px; flex:0 0 94px; border:1px solid var(--line); border-radius:999px; }
.category-skeleton:first-child { width:63px; flex-basis:63px; }
.category-skeleton:nth-child(2) { width:127px; flex-basis:127px; }
.category-skeleton:nth-child(3) { width:108px; flex-basis:108px; }
.dark .skeleton-block { background:rgba(197,168,128,.09); }
.dark .skeleton-block::after { background:linear-gradient(90deg,transparent,rgba(227,209,181,.045),transparent); }

@media (hover:hover) {
  .dish-card:hover { border-color:rgba(197,168,128,.35); box-shadow:0 7px 25px rgba(42,34,20,.07); transform:translateY(-2px); }
  .add-dish:hover { background:#9d8159; color:#fbf8f2; }
  .dark .add-dish:hover { background:#ddc49f; color:#171612; }
}
@media (max-width:1050px) { .catalog { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (max-width:740px) { .catalog { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }
@media (max-width:640px) {
  .catalog { gap:12px; }
  .dish-card { border-radius:17px; }
  .card-media { height:clamp(118px,34vw,133px); aspect-ratio:auto; }
  .card-text,.compact .card-text { padding:12px 12px 5px; }
  .card-category,.compact .card-category { font-size:8px; letter-spacing:.7px; margin-bottom:6px; }
  .dish-name,.compact .dish-name { min-height:4.35em; font-size:13px; line-height:1.45; letter-spacing:-.1px; }
  .portion { margin-top:6px; font-size:10px; }
  .card-description { margin-top:7px; font-size:9.5px; line-height:1.55; }
  .card-footer { gap:4px; min-height:60px; padding:5px 7px 9px 12px; }
  .dish-price,.compact .dish-price { font-size:23px; }
  .add-dish { font-size:22px; }
  .editorial-badge { top:8px; left:8px; padding:5px 8px; }
  .placeholder-diamond { width:23px; height:23px; }
  .placeholder-wordmark { font-size:15px; letter-spacing:3.5px; }
  .food-placeholder { gap:13px; }
  .status-badge,.compact .status-badge { padding:4px 6px; font-size:7px; }
  .skeleton-name { min-height:57px; gap:7px; }
  .skeleton-line { height:8px; }
}
@media (max-width:360px) {
  .catalog { gap:10px; }
  .dish-card { border-radius:16px; }
  .card-media { height:118px; }
  .card-text,.compact .card-text { padding-left:10px; padding-right:10px; }
  .dish-name,.compact .dish-name { font-size:12.5px; }
  .card-footer { padding-left:10px; padding-right:5px; gap:3px; }
  .dish-price,.compact .dish-price { font-size:21px; }
  .card-category,.compact .card-category { letter-spacing:.7px; }
}
@keyframes cardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes skeletonShimmer { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { .dish-card,.add-dish,.skeleton-block::after { animation:none!important; transition:none!important; } .skeleton-block::after { display:none; } }