/* «Приборы» в корзине: плитки 0 / 1 / 2 / 3+ (js/cutlery.js → blockHtml; корзина телефона —
   include/cart-body.php #bs-cutlery, ПК — desktop/js/restar-desktop.js). Те же плитки —
   на экране 2 листа проверки (checkout-confirm.css), выбор общий. */
/* Цвета — как в макете, свои: в корзине ПК нет --light-text, а --dark-text светлее макета */
.cart-cutlery, .co-confirm-box { --cut-ink: #121214; --cut-muted: #88878c; }
.cart-cutlery {
  margin: 12px 0; padding: 14px 10px; border-radius: 16px;
  background: rgba(var(--theme-color), .06);
}
.cart-cutlery-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--cut-ink); }
.cart-cutlery-sub { margin: 2px 0 12px; font-size: 12.5px; line-height: 1.35; color: var(--cut-muted); }

/* Квадратные плитки 1×1 на любой ширине: min-height 0 — содержимое не вытягивает плитку
   в высоту (на телефонах уже 375px было 68×70), без вертикальных полей оно влезает и в 320px */
.co-cut-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.co-cut-tile {
  aspect-ratio: 1 / 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 0;
  border: 1.5px solid rgba(0, 0, 0, .08); border-radius: 12px;
  background: rgba(var(--white), 1); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
/* Силуэты людей контуром, как в макете: тёмные, тонкая линия (js/cutlery.js → peopleSvg);
   у выбранной — залиты цветом темы. Средний у «3+» (.co-cut-front) закрывает соседей фоном плитки. */
.co-cut-ico {
  height: 20px; width: auto; margin-bottom: 7px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round;
  color: var(--cut-ink);
}
.co-cut-ico .co-cut-front { fill: rgba(var(--white), 1); }
.co-cut-tile b { font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--cut-ink); }
/* Подпись в одну строку: на узком телефоне шрифт чуть меньше */
.co-cut-tile span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(9.5px, 2.65vw, 11px); font-weight: 500; line-height: 1.25; text-align: center;
  color: var(--cut-muted);
}
.co-cut-tile.is-active { border-color: rgba(var(--theme-color), 1); background: rgba(var(--theme-color), .07); }
.co-cut-tile.is-active .co-cut-ico,
.co-cut-tile.is-active .co-cut-ico .co-cut-front { color: rgba(var(--theme-color), 1); fill: currentColor; }

/* «3+» — точное количество, 3–20 */
.co-cut-more {
  display: none; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 8px 10px; border-radius: 12px;
  background: rgba(var(--white), 1);
  font-size: 13px; font-weight: 500; color: rgba(var(--dark-text), 1);
}
.co-cut-more.is-open { display: flex; }
.co-cut-step { display: flex; align-items: center; gap: 6px; }
.co-cut-step button {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--box-bg), 1); color: rgba(var(--dark-text), 1);
  font-size: 16px; cursor: pointer;
}
.co-cut-step button:disabled { opacity: .4; cursor: default; }
.co-cut-num { min-width: 22px; text-align: center; font-style: normal; font-size: 14px; font-weight: 600; }

/* Совсем узкий телефон (до 360px) — плитки чуть плотнее */
@media (max-width: 359px) {
  .co-cut-ico { height: 18px; margin-bottom: 5px; }
  .co-cut-tile b { font-size: 14px; }
}
@media (max-width: 339px) {
  .co-cut-tile span { font-size: 9px; }
}