/* =====================================================================
   CX upgrade — dish photo presentation, shared by every surface
   that renders a dish: the visit page (qr.php menu + specials +
   bill/pending thumbs), the public site (menu cards, specials rail,
   photo-led order cards) and the staff POS tiles. One file, loaded
   after the surface CSS, so a photo looks the same everywhere.
   Fixed boxes + object-fit cover: layout never jumps when a photo
   loads, and a dish without a photo keeps its monogram tile.
   ===================================================================== */

/* ---------- Menu cards (qr.php + site menu) ---------- */
.e4-mi-photo{width:88px;height:88px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--tile-2)}
.e4-mi-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Specials rail ---------- */
.e4-spec{position:relative}
.e4-spec-photo{border-radius:14px;overflow:hidden;aspect-ratio:4/3;margin-bottom:12px;background:var(--tile-2)}
.e4-spec-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.e4-spec:hover .e4-spec-photo img{transform:scale(1.04)}
.e4-spec-star-photo{top:8px;right:8px;z-index:2}

/* ---------- Bill + pending line thumbs (visit page) ---------- */
.ld-thumb{width:30px;height:30px;border-radius:9px;object-fit:cover;flex-shrink:0;align-self:center;box-shadow:var(--shadow)}

/* ---------- Site order page: photo-led cards ---------- */
.web-dish{display:flex;flex-direction:column;background:var(--tile);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);animation:e4CardIn .45s ease both;transition:transform .18s ease,box-shadow .18s ease;min-width:0}
.web-dish:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.web-dish-photo{aspect-ratio:16/10;overflow:hidden;background:var(--tile-2);flex-shrink:0}
.web-dish-photo img{width:100%;height:100%;object-fit:cover;display:block}
.web-dish-mono{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--ink);flex-shrink:0}
.web-dish-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.web-dish .e4-mi-name{font-size:16px}
.web-dish-foot{margin-top:auto;padding-top:9px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.web-dish-out{opacity:.55}
.web-dish-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.web-dish-grid{grid-template-columns:1fr 1fr}}
.web-line-img{width:34px;height:34px;border-radius:9px;object-fit:cover;flex-shrink:0}

/* ---------- Staff POS tiles ---------- */
.menu-tile .mt-photo{height:84px;border-radius:13px;overflow:hidden;margin-bottom:10px;background:var(--tile-2)}
.menu-tile .mt-photo img{width:100%;height:100%;object-fit:cover;display:block}
.menu-tile .mt-photo.mono{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--green)}
.easy-tile .ez-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){
  .menu-tile .mt-photo{height:52px;border-radius:11px;margin-bottom:7px}
  .menu-tile .mt-photo.mono{font-size:17px}
}