/* The Butcher : add buttons and the order cart.
   The add button is deliberately quiet. A loud green plus beside every dish
   would turn a considered menu into a supermarket shelf, which is the one thing
   the brand guidelines say not to do. It gains presence on hover and on touch. */

.tb-add{
  flex:0 0 auto;width:30px;height:30px;margin-inline-start:14px;
  border:1px solid var(--hair);background:transparent;color:var(--maroon);
  font-family:'Plex',system-ui,sans-serif;font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;opacity:.55;
  transition:opacity .18s,background .18s,color .18s,border-color .18s;
}
.tb-add:hover,.tb-add:focus-visible{opacity:1;background:var(--maroon);
  color:var(--cream);border-color:var(--maroon);outline:none}
.tb-add.added{background:var(--maroon);color:var(--cream);border-color:var(--maroon);opacity:1}
@media (hover:none){ .tb-add{opacity:.8} }

/* inside a cut matrix the button sits under the price, centred in its column */
.matrix .tb-add{margin:6px auto 0;width:26px;height:26px;font-size:13px}
/* On the maroon marbling the quiet treatment disappeared: a 40% cream border on
   a busy texture reads as nothing. Beige at full strength, and no dimming, since
   this is the one item on the page we most want ordered. */
.hero-item .tb-add{
  border-color:var(--beige);color:var(--beige);opacity:1;margin-top:10px;
  background:rgba(236,220,210,.10);
}
.hero-item .tb-add:hover,.hero-item .tb-add:focus-visible{
  background:var(--beige);color:var(--maroon);border-color:var(--beige)}
.hero-item .tb-add.added{background:var(--beige);color:var(--maroon);border-color:var(--beige)}
/* special cuts share one price, so the button goes in the card */
.cut-card{position:relative;padding-inline-end:52px}
.cut-card .tb-add{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);margin:0}

/* ---------------- the cart ---------------- */
.tb-cart{position:fixed;inset-inline-end:0;bottom:0;z-index:8000;
  font-family:'Plex','PlexAr',system-ui,sans-serif;pointer-events:none}
.tb-cart.has{pointer-events:auto}

.tb-cart-tab{
  position:fixed;inset-inline-end:22px;bottom:22px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--maroon);color:var(--cream);border:0;
  padding:15px 22px;font-family:inherit;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 10px 34px rgba(14,12,12,.32);
  transition:transform .2s;
}
.tb-cart-tab:hover{transform:translateY(-2px)}
.tb-bag{background:var(--cream);color:var(--maroon);width:24px;height:24px;
  display:grid;place-items:center;font-family:'Serif',Georgia,serif;font-size:13px;
  letter-spacing:0}
.tb-tab-tot{font-family:'Serif',Georgia,serif;font-size:15px;letter-spacing:0}
.tb-tab-tot small{font-family:'Plex';font-size:9px;letter-spacing:.14em;opacity:.75}
html[lang="ar"] .tb-cart-tab{letter-spacing:0;text-transform:none;font-size:13.5px}

.tb-cart-panel{
  position:fixed;inset-inline-end:22px;bottom:22px;width:min(384px,calc(100vw - 44px));
  background:var(--paper) url('paper.jpg') center/cover;color:var(--maroon);
  border:1px solid var(--hair);box-shadow:0 18px 60px rgba(14,12,12,.34);
  display:none;flex-direction:column;max-height:min(78vh,620px);
}
.tb-cart-panel.open{display:flex}

.tb-cart-head{display:flex;align-items:flex-start;gap:14px;
  padding:20px 22px 14px;border-bottom:1px solid var(--hair)}
.tb-cart-kick{font-size:9px;letter-spacing:.28em;text-transform:uppercase;opacity:.6}
.tb-cart-ttl{font-family:'Serif',Georgia,serif;font-size:21px;margin-top:5px}
html[lang="ar"] .tb-cart-kick{letter-spacing:0;text-transform:none;font-size:12px}
html[lang="ar"] .tb-cart-ttl{font-family:'PlexAr';font-weight:500}
.tb-cart-x{margin-inline-start:auto;background:none;border:0;color:inherit;
  font-size:24px;line-height:1;cursor:pointer;opacity:.45;padding:0 2px;font-family:inherit}
.tb-cart-x:hover{opacity:1}

.tb-lines{overflow-y:auto;padding:6px 22px;flex:1 1 auto}
.tb-line{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--hair)}
.tb-line:last-child{border-bottom:none}
.tb-line-nm{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.4}
.tb-var{display:block;font-size:11.5px;opacity:.6;margin-top:2px}
.tb-unit{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.5;margin-top:3px}
html[lang="ar"] .tb-unit{letter-spacing:0;text-transform:none;font-size:11px}

.tb-qty{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.tb-q{width:26px;height:26px;border:1px solid var(--hair);background:transparent;
  color:inherit;cursor:pointer;font-family:inherit;font-size:14px;line-height:1;
  display:grid;place-items:center}
.tb-q:hover{background:var(--maroon);color:var(--cream);border-color:var(--maroon)}
.tb-n{min-width:26px;text-align:center;font-family:'Serif',Georgia,serif;font-size:14px;
  font-variant-numeric:tabular-nums}
.tb-line-pr{flex:0 0 58px;text-align:end;font-family:'Serif',Georgia,serif;font-size:14px;
  font-variant-numeric:tabular-nums}

.tb-cart-foot{padding:16px 22px 20px;border-top:1px solid var(--hair);background:rgba(236,220,210,.5)}
.tb-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tb-tot span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.66}
html[lang="ar"] .tb-tot span{letter-spacing:0;text-transform:none;font-size:12.5px}
.tb-tot b{font-family:'Serif',Georgia,serif;font-size:24px;font-weight:400;
  font-variant-numeric:tabular-nums}
.tb-tot small{font-family:'Plex';font-size:10px;letter-spacing:.14em;opacity:.7}
.tb-note{font-size:11.5px;opacity:.62;line-height:1.55;margin-top:9px}

.tb-send{width:100%;margin-top:15px;cursor:pointer;font-family:inherit;
  background:#1f8a4c;color:#fff;border:1px solid #1f8a4c;padding:15px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;transition:background .2s}
.tb-send:hover{background:#166b3a;border-color:#166b3a}
html[lang="ar"] .tb-send{letter-spacing:0;text-transform:none;font-size:14px}
.tb-clear{width:100%;margin-top:8px;cursor:pointer;font-family:inherit;background:none;
  border:0;color:inherit;opacity:.5;font-size:11px;padding:8px;text-decoration:underline;
  text-underline-offset:3px}
.tb-clear:hover{opacity:1}

/* ---------------- phone ----------------
   The panel was taking most of the screen, which makes an order feel like a
   commitment rather than a quick tap. It is a bottom sheet now: full width,
   flush to the bottom edge, capped so the menu stays visible behind it, and
   with the padding and type stepped down so three lines fit without scrolling. */
@media (max-width:560px){
  .tb-cart-tab{
    inset-inline:0;bottom:0;width:100%;justify-content:space-between;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(14,12,12,.22);
  }
  .tb-cart-panel{
    inset-inline:0;bottom:0;width:100%;max-height:min(66vh,470px);
    border-inline:0;border-bottom:0;
    box-shadow:0 -10px 40px rgba(14,12,12,.3);
    padding-bottom:env(safe-area-inset-bottom);
  }

  .tb-cart-head{padding:15px 18px 11px}
  .tb-cart-ttl{font-size:18px;margin-top:3px}
  .tb-cart-kick{font-size:8.5px;letter-spacing:.22em}

  .tb-lines{padding:2px 18px}
  .tb-line{padding:10px 0;gap:10px}
  .tb-line-nm{font-size:13px}
  .tb-var{font-size:11px}
  /* the unit rides beside the name rather than on its own line, which was
     costing a third of the row height for two characters */
  .tb-unit{display:inline;margin-inline-start:7px;margin-top:0;font-size:9px}
  .tb-q{width:30px;height:30px}          /* still a comfortable tap target */
  .tb-n{min-width:22px;font-size:13px}
  .tb-line-pr{flex-basis:48px;font-size:13px}

  .tb-cart-foot{padding:12px 18px 14px}
  .tb-tot b{font-size:21px}
  /* the reassurance line matters less than the button on a small screen */
  .tb-note{display:none}
  .tb-send{margin-top:11px;padding:14px}
  .tb-clear{margin-top:4px;padding:6px;font-size:10.5px}
}

/* very short screens, or a phone held in landscape */
@media (max-height:520px){
  .tb-cart-panel{max-height:88vh}
  .tb-cart-head{padding-block:11px}
  .tb-note{display:none}
}

/* a bar popup and the cart tab would sit on top of each other */
.tb-pop.tb-bar ~ .tb-cart .tb-cart-tab{bottom:86px}

@media print{ .tb-add,.tb-cart{display:none !important} }