/* ONE DISH CARD ON EVERY CHANNEL (Karim 2026-10-19: "whats app and web ordering should all look and feel the same on every
   channel ... keep everything consistent"). The QR table menu (table.html) and the WhatsApp / website menu (menu.html) both
   draw their dishes with these classes, so the look lives here once. A page switches it on with class "dc-on" on <html>.
   The checkered layout is Karim's ruling of 2026-10-19 (photo alternates sides, 52% wide at 5:4, + on the photo).
   Colours are written out, not taken from each page's variables, so the two pages cannot drift apart.

   Markup:
   <div class="dc [has] [nopic]">                 has = in the order, nopic = no photo
     <div class="dc-tx"> [.dc-rk] .dc-nm [.dc-sp] [.dc-ds] .dc-pr [.dc-tag] [.dc-gw > .dc-gi > .dc-lk] </div>
     <div class="dc-side"> .dc-ph[>img]  then  .dc-plus  or  .dc-step > button, b, button </div>
   </div> */
.dc-on .dc{display:grid;grid-template-columns:1fr 52%;gap:12px;padding:12px 14px;border:0;border-bottom:6px solid #f3eee4;border-radius:0;
  text-align:left;width:100%;background:transparent;box-shadow:none;font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.4}
.dc-on .dc.has{background:#fbf4e6}
.dc-on .dc:not(.nopic):nth-of-type(even){grid-template-columns:52% 1fr}
.dc-on .dc:not(.nopic):nth-of-type(even) .dc-side{order:-1}
/* the words hug their own photo: pushed toward it and centred on its height */
.dc-on .dc .dc-tx{min-width:0;align-self:center;text-align:right}
.dc-on .dc:not(.nopic):nth-of-type(even) .dc-tx{text-align:left}
.dc-on .dc .dc-side{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;align-self:start}
.dc-on .dc .dc-ph{position:relative;display:block;width:100%;height:auto;aspect-ratio:5/4;border-radius:16px;overflow:hidden;background:#efe9dc;cursor:pointer}
.dc-on .dc .dc-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transform:none}
/* no photo: a small plain tile with the + under it, text on the left */
.dc-on .dc.nopic{grid-template-columns:1fr 124px;padding:14px 16px;border-bottom:1px solid #EDE8DC}
.dc-on .dc.nopic .dc-tx{align-self:auto;text-align:left}
.dc-on .dc.nopic .dc-ph{width:124px}

.dc-on .dc .dc-nm{font-weight:700;color:#0F172A;font-size:18px;line-height:1.4;cursor:pointer}
.dc-on .dc .dc-ds{color:#5b6474;font-size:15px;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.dc-on .dc .dc-pr{margin-top:4px;font-weight:700;font-size:19px;color:#1E293B}
.dc-on .dc .dc-rk{display:inline-block;margin-bottom:6px;background:#14110d;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.dc-on .dc .dc-tag{display:inline-block;margin-top:5px;font-size:13px;font-weight:600;color:#9a4a00;background:#fff3e0;border:0;border-radius:999px;padding:1px 8px}
.dc-on .dc .dc-sp{margin-top:2px;font-size:13px;letter-spacing:-2px}
.dc-on .dc .dc-sp span{letter-spacing:0;margin-left:6px;color:#5b6474;font-weight:600}
/* "Goes well with, add for:" - a tap adds the side */
.dc-on .dc .dc-gw{margin-top:8px;font-size:13px;line-height:1.4;color:#5b6474;font-weight:600}
.dc-on .dc .dc-gi{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-on .dc .dc-lk{color:#9a4f1f;font-weight:700;cursor:pointer;display:inline-block;padding:3px 0}

/* + (nothing in the order yet) and − n + (some), on the photo's corner */
.dc-on .dc .dc-plus{width:44px;height:44px;border-radius:50%;background:#e8853f;color:#1a1209;font-size:26px;font-weight:700;line-height:1;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.dc-on .dc .dc-step{display:inline-flex;align-items:center;gap:2px;background:#e8853f;border:0;border-radius:999px;padding:2px;overflow:visible}
.dc-on .dc .dc-step button{width:40px;height:40px;border:0;padding:0;background:transparent;font-size:24px;font-weight:700;color:#1a1209;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.dc-on .dc .dc-step b{min-width:26px;width:auto;text-align:center;font-size:18px;font-weight:700;color:#1a1209}
.dc-on .dc:not(.nopic) .dc-plus,.dc-on .dc:not(.nopic) .dc-step{position:absolute;right:8px;bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.25)}