/* =====================================================================
   Theme B — one card per product with its sizes (setting store_size_groups = 1).
   Size buttons, piece / carton, − quantity +, add. Loaded only where such
   cards are shown (cashier shop page, home grid). 2026-10-20.
   ===================================================================== */
.tbp { min-width:0; }
.tbp .tbc-img { flex:none; display:block; border-radius:10px; overflow:hidden; background:#f3f4f2; }
.tbp .tbc-img img { width:100%; height:100%; object-fit:contain; }
.tbp-form { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; margin:0; }
.tbp .tbc-name { display:block; font-weight:800; font-size:15px; color:var(--ink); line-height:1.35; unicode-bidi:plaintext; }
[dir=rtl] .tbp .tbc-name { text-align:right; }
.tbp .tbc-name:hover { color:var(--brand); }
.tbp .tbc-code { font-size:11.5px; color:#9aa19c; font-family:ui-monospace,monospace; }
.tbp .tbc-code b { font-family:inherit; }
.tbp .tbc-code .out { color:#b91c1c; }
.tbp .tbc-code .low { color:var(--warn, #b45309); }
.tbp .tbc-prices { display:flex; flex-wrap:wrap; gap:2px 12px; font-weight:800; font-size:14.5px; color:var(--brand); font-variant-numeric:tabular-nums; }
.tbp .tbc-prices small { color:var(--muted); font-weight:600; font-size:11.5px; }
.tbp .tbc-prices .c { color:var(--ink); }
.tbp-info[hidden] { display:none !important; }
.tbp-incart { margin-top:3px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--brand-2); }

/* Size buttons */
.tbp-sizes { display:flex; flex-wrap:wrap; gap:6px; }
.tbp-sizes label, .tbp-unit label { position:relative; cursor:pointer; }
.tbp-sizes input, .tbp-unit input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.tbp-sizes span {
  display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:32px; padding:0 12px; border-radius:9px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); font-weight:800; font-size:13.5px; direction:ltr;
}
.tbp-sizes label:hover span { border-color:var(--brand); }
.tbp-sizes input:checked + span { border-color:var(--brand); background:var(--brand); color:var(--tb-on); }
.tbp-sizes input:focus-visible + span, .tbp-unit input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.tbp-sizes label.out span { color:#9aa19c; text-decoration:line-through; text-decoration-thickness:1px; }
.tbp-sizes label.out input:checked + span { background:#9aa19c; border-color:#9aa19c; color:#fff; }

/* Buy row: piece / carton · − n + · add */
.tbp-buy { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; }
.tbp-unit { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:none; }
.tbp-unit span { display:inline-flex; align-items:center; height:34px; padding:0 11px; font-weight:700; font-size:13px; color:#4a514d; background:#fff; }
.tbp-unit input:checked + span { background:var(--accent); color:var(--tb-on-accent); }
.tbp-unit input:disabled + span { opacity:.35; cursor:not-allowed; }
.tbp-qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:none; background:#fff; }
.tbp-qty button { width:34px; height:34px; border:0; background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink); padding:0; }
.tbp-qty button:hover { background:var(--tb-tint); color:var(--brand); }
.tbp-qty input {
  width:46px; height:34px; border:0; border-inline:1px solid var(--line); text-align:center; font-weight:800; font-size:15px;
  font-family:inherit; font-variant-numeric:tabular-nums; padding:0; background:#fff; -moz-appearance:textfield; appearance:textfield;
}
.tbp-qty input::-webkit-outer-spin-button, .tbp-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tbp-add {
  flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:36px; padding:0 14px; border-radius:9px;
  border:0; background:var(--brand); color:var(--tb-on); font-weight:800; font-size:14px; cursor:pointer; font-family:inherit;
}
.tbp-add:hover { filter:brightness(.95); }
.tbp-add:disabled { opacity:.4; cursor:not-allowed; }
.tbp.busy { opacity:.7; transition:opacity .15s; }

/* Cashier list (rows): picture beside the details */
.tbp-row { align-items:flex-start; }
.tbp-row .tbc-img { width:64px; height:64px; }
.tbp-row.is-out { opacity:1; }
.tbp-row.is-out .tbc-img, .tbp-row.is-out .tbc-name { opacity:.6; }
.tbp-list .tbp-row { padding:12px; }

/* Home grid (tiles): picture on top */
.tbp-tile { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r, 14px); padding:12px; gap:10px; }
.tbp-tile.in { box-shadow:0 0 0 2px var(--tb-tint-2) inset; }
.tbp-tile .tbc-img { width:100%; aspect-ratio:1/1; height:auto; background:#fff; }
.tbp-tile .tbp-buy { margin-top:auto; }
.tbp-tile .tbp-form { flex:1; }
.tbp-tile .tbp-add { width:100%; }

@media (max-width:700px) {
  .tbp-row .tbc-img { width:54px; height:54px; }
  .tbp-list .tbp-row { padding:11px 8px; }
  .tbp .tbc-name { font-size:14.5px; }
  .tbp-sizes span { min-width:48px; height:34px; }
  .tbp-buy { gap:6px; }
  .tbp-add { height:36px; padding:0 10px; }
  .tbp-tile { padding:9px; gap:7px; }
  .tbp-tile .tbp-unit span { padding:0 8px; font-size:12.5px; }
  .tbp-tile .tbp-qty button { width:30px; }
  .tbp-tile .tbp-qty input { width:38px; }
  .tbp-tile .tbc-prices { font-size:13.5px; }
}

/* ─── 2026-10-31: smaller cards ───────────────────────────────────────
   The code sits under the name; one price only (the chosen size and unit:
   tbp-byc = carton); piece / carton · − n + · cart on one line in the
   category rows; on the home tiles − n + sits beside the cart button. */
.tbp [data-tbp-code][hidden] { display:none !important; }
.tbp .tbp-code { margin-top:-4px; }
.tbp:not(.tbp-byc) .tbc-prices .c, .tbp.tbp-byc .tbc-prices .u { display:none; }
.tbp .tbc-prices .c { color:var(--brand); }
.tbp-buy { flex-wrap:nowrap; }
.tbp-qty { flex:1 1 auto; min-width:0; max-width:132px; }
.tbp-qty button { flex:none; }
.tbp-qty input { flex:1 1 auto; min-width:0; width:40px; }
.tbp-add { flex:none; height:36px; padding:0 12px; }
.tbp-tile .tbp-add { width:auto; }
/* home tiles: piece / carton across the card, then − n + beside the cart */
.tbp-tile .tbp-buy { flex-wrap:wrap; }
.tbp-tile .tbp-unit { flex:1 0 100%; }
.tbp-tile .tbp-unit label { flex:1; display:flex; }
.tbp-tile .tbp-unit span { flex:1; justify-content:center; }
.tbp-tile .tbp-qty { max-width:none; }
.tbp-tile .tbp-add { flex:1 0 auto; }
/* category rows: the price beside the size buttons (it drops to its own line when there is no room) */
.tbp-row .tbp-form { flex-direction:row; flex-wrap:wrap; align-items:center; }
.tbp-row .tbp-form > * { flex:1 0 100%; }
.tbp-row .tbp-form > .tbp-sizes { flex:0 1 auto; }
.tbp-row .tbp-form > .tbp-info { flex:1 1 auto; }
.tbp-row .tbp-sizes + .tbp-info, .tbp-row .tbp-sizes ~ .tbp-info { text-align:end; }
.tbp-row .tbp-sizes ~ .tbp-info .tbc-prices { justify-content:flex-end; }
@media (max-width:700px) {
  .tbp .tbp-add, .tbp-tile .tbp-add { width:40px; padding:0; flex:none; }
  .tbp-add span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tbp-buy { gap:5px; }
  .tbp-row .tbp-unit span { padding:0 9px; font-size:12.5px; }
  .tbp .tbp-qty button { width:28px; }
  .tbp .tbp-qty input { width:30px; }
  .tbp-tile .tbp-unit span { height:32px; }
  .tbp-form { gap:5px; }
}

/* ─── 2026-10-31 (b): the card keeps its height whatever is picked ─────
   1L/4L and piece/carton used to change the height (the carton price is longer
   and wrapped). Now every size's code line, every size's prices and the piece
   and carton price share one slot each: the ones not picked stay in place but
   invisible, so the slot is always as tall as the tallest choice. The price
   reads: unit on its own small line («علبة» / «كرتون (12 علبة)»), then the
   price (and, for a dealer, the regular price struck through). Nothing is cut:
   a part that does not fit moves down whole, in every choice alike. */
.tbp-codes, .tbp-infos, .tbp .tbc-prices { display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; }
.tbp-codes { margin-top:-4px; }
.tbp .tbp-codes .tbp-code { margin-top:0; }
.tbp-codes > *, .tbp-infos > *, .tbp .tbc-prices > span { grid-area:1 / 1; min-width:0; }
.tbp .tbp-codes > [data-tbp-code][hidden], .tbp .tbp-infos > .tbp-info[hidden] { display:block !important; visibility:hidden; }
.tbp .tbc-prices { gap:0; }
.tbp .tbc-prices > span { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; white-space:nowrap; line-height:1.3; }
.tbp .tbc-prices > span > small { flex:0 0 100%; line-height:1.35; }
.tbp:not(.tbp-byc) .tbc-prices .c, .tbp.tbp-byc .tbc-prices .u { display:flex; visibility:hidden; }
/* category rows: the price block beside the size buttons whenever 118px are left (it drops under them only on
   narrower screens, the same for every choice); inside, a part that does not fit goes to the next line */
.tbp-row .tbp-form > .tbp-infos { flex:1 1 0; min-width:118px; }
.tbp-row .tbp-sizes ~ .tbp-infos { text-align:end; }
.tbp-row .tbp-sizes ~ .tbp-infos .tbc-prices > span { justify-content:flex-end; }